From 82b59530fdcbdb9192bccd61a64b8fe66c613745 Mon Sep 17 00:00:00 2001 From: Lucas Payr Date: Fri, 10 Apr 2020 08:04:33 +0200 Subject: [PATCH 01/14] added Search, refactored scrollingNav --- example/src/Component.elm | 13 +--- example/src/Example.elm | 75 ++++++++++++-------- example/src/Icons.elm | 8 +++ example/src/Reusable.elm | 10 +++ example/src/Stateless.elm | 10 +-- src/Core/Style.elm | 30 +++++--- src/Layout.elm | 123 +++++++++++++++++++++++++------- src/Widget/ScrollingNav.elm | 137 ++++++++++++++++-------------------- 8 files changed, 249 insertions(+), 157 deletions(-) diff --git a/example/src/Component.elm b/example/src/Component.elm index 3da1e98..952beea 100644 --- a/example/src/Component.elm +++ b/example/src/Component.elm @@ -154,17 +154,6 @@ validatedInput model = } ] - -scrollingNavCard : Element msg -scrollingNavCard = - [ Element.el Heading.h3 <| Element.text "Scrolling Nav" - , Element.text "Resize the screen and open the side-menu. Then start scrolling to see the scrolling navigation in action." - |> List.singleton - |> Element.paragraph [] - ] - |> Element.column (Grid.simple ++ Card.large ++ [Element.height <| Element.fill]) - - view : Model -> Element Msg view model = Element.column (Grid.section ++ [ Element.centerX ]) @@ -176,6 +165,6 @@ view model = , Element.wrappedRow (Grid.simple ++ [Element.height <| Element.shrink]) <| [ filterSelect model.filterSelect , validatedInput model.validatedInput - , scrollingNavCard + ] ] diff --git a/example/src/Example.elm b/example/src/Example.elm index 78bd0a8..9b58e91 100644 --- a/example/src/Example.elm +++ b/example/src/Example.elm @@ -21,7 +21,7 @@ import Framework.Tag as Tag import Html exposing (Html) import Html.Attributes as Attributes import Icons -import Layout exposing (Direction, Layout) +import Layout exposing (Part, Layout) import Core.Style exposing (Style) import Reusable import Set exposing (Set) @@ -43,6 +43,7 @@ type alias LoadedModel = , layout : Layout , displayDialog : Bool , deviceClass : DeviceClass + , search : String } @@ -55,14 +56,16 @@ type LoadedMsg = StatelessSpecific Stateless.Msg | ReusableSpecific Reusable.Msg | ComponentSpecific Component.Msg - | ScrollingNavSpecific (ScrollingNav.Msg Section) + | UpdateScrollingNav (ScrollingNav.Model Section -> ScrollingNav.Model Section) | TimePassed Int | AddSnackbar String | ToggleDialog Bool - | ChangedSidebar (Maybe Direction) + | ChangedSidebar (Maybe Part) | Resized { width : Int, height : Int } | Load String | JumpTo Section + | ChangedSearch String + | Idle type Msg @@ -109,6 +112,11 @@ style = , moreVerticalIcon = Icons.moreVertical |> Element.html |> Element.el [] , spacing = 8 + , title = Heading.h2 + , searchIcon = + Icons.search |> Element.html |> Element.el [] + , search = + Color.simple ++ [Font.color <| Element.rgb255 0 0 0 ] } @@ -119,6 +127,12 @@ initialModel { viewport } = ScrollingNav.init { labels = Section.toString , arrangement = Section.asList + , toMsg = \result -> + case result of + Ok fun -> + UpdateScrollingNav fun + Err _ -> + Idle } in ( { component = Component.init @@ -133,8 +147,9 @@ initialModel { viewport } = } |> Element.classifyDevice |> .class + , search = "" } - , cmd |> Cmd.map ScrollingNavSpecific + , cmd ) @@ -261,16 +276,15 @@ view model = ] , onChangedSidebar = ChangedSidebar , title = - (if m.deviceClass == Phone || m.deviceClass == Tablet then - m.scrollingNav - |> ScrollingNav.current Section.fromString - |> Maybe.map Section.toString - |> Maybe.withDefault "Elm-Ui-Widgets" - else - "Elm-Ui-Widgets" - ) + "Elm-Ui-Widgets" |> Element.text |> Element.el Heading.h1 + , search = + Just + { text = m.search + , onChange = ChangedSearch + , label = "Search" + } } @@ -309,23 +323,18 @@ updateLoaded msg model = } ) (Cmd.map StatelessSpecific) - - ScrollingNavSpecific m -> - model.scrollingNav - |> ScrollingNav.update m - |> Tuple.mapBoth - (\scrollingNav -> - { model - | scrollingNav = scrollingNav - } - ) - (Cmd.map ScrollingNavSpecific) + + UpdateScrollingNav fun -> + ( { model | scrollingNav = model.scrollingNav |> fun} + , Cmd.none + ) TimePassed int -> ( { model | layout = model.layout |> Layout.timePassed int } - , Cmd.none + , ScrollingNav.getPos + |> Task.perform UpdateScrollingNav ) AddSnackbar string -> @@ -344,7 +353,7 @@ updateLoaded msg model = ) ChangedSidebar sidebar -> - ( { model | layout = model.layout |> Layout.setSidebar sidebar } + ( { model | layout = model.layout |> Layout.activate sidebar } , Cmd.none ) @@ -354,9 +363,17 @@ updateLoaded msg model = JumpTo section -> ( model , model.scrollingNav - |> ScrollingNav.jumpTo section - |> Cmd.map ScrollingNavSpecific + |> ScrollingNav.jumpTo + { section = section + , onChange = always Idle + } ) + + ChangedSearch string -> + ( { model | search = string},Cmd.none) + + Idle -> + ( model , Cmd.none) update : Msg -> Model -> ( Model, Cmd Msg ) @@ -377,9 +394,7 @@ update msg model = subscriptions : Model -> Sub Msg subscriptions model = Sub.batch - [ ScrollingNav.subscriptions - |> Sub.map ScrollingNavSpecific - , Time.every 50 (always (TimePassed 50)) + [ Time.every 50 (always (TimePassed 50)) , Events.onResize (\h w -> Resized { height = h, width = w }) ] |> Sub.map LoadedSpecific diff --git a/example/src/Icons.elm b/example/src/Icons.elm index dd3410a..c6b19d1 100644 --- a/example/src/Icons.elm +++ b/example/src/Icons.elm @@ -6,6 +6,7 @@ module Icons exposing , circle , triangle , square + , search ) import Html exposing (Html) @@ -75,4 +76,11 @@ square : Html msg square = svgFeatherIcon "square" [ Svg.rect [ Svg.Attributes.x "3", y "3", width "18", height "18", rx "2", ry "2" ] [] + ] + +search : Html msg +search = + svgFeatherIcon "search" + [ Svg.circle [ cx "11", cy "11", r "8" ] [] + , Svg.line [ x1 "21", y1 "21", x2 "16.65", y2 "16.65" ] [] ] \ No newline at end of file diff --git a/example/src/Reusable.elm b/example/src/Reusable.elm index 0b4a15f..8bf0ab5 100644 --- a/example/src/Reusable.elm +++ b/example/src/Reusable.elm @@ -142,6 +142,15 @@ sortTable model = ] |> Element.column (Grid.simple ++ Card.large ++ [Element.height <| Element.fill]) +scrollingNavCard : Element msg +scrollingNavCard = + [ Element.el Heading.h3 <| Element.text "Scrolling Nav" + , Element.text "Resize the screen and open the side-menu. Then start scrolling to see the scrolling navigation in action." + |> List.singleton + |> Element.paragraph [] + ] + |> Element.column (Grid.simple ++ Card.large ++ [Element.height <| Element.fill]) + view : { addSnackbar : String -> msg @@ -159,5 +168,6 @@ view { addSnackbar, msgMapper, model } = , Element.wrappedRow (Grid.simple ++ [Element.height <| Element.shrink]) <| [ snackbar addSnackbar , sortTable model |> Element.map msgMapper + , scrollingNavCard ] ] diff --git a/example/src/Stateless.elm b/example/src/Stateless.elm index b3334ad..528eb1f 100644 --- a/example/src/Stateless.elm +++ b/example/src/Stateless.elm @@ -18,7 +18,7 @@ import Html exposing (Html) import Html.Attributes as Attributes import Set exposing (Set) import Widget -import Layout exposing (Direction(..)) +import Layout exposing (Part(..)) type alias Model = @@ -242,7 +242,7 @@ tab model = scrim : { showDialog : msg - , changedSheet : Maybe Direction -> msg + , changedSheet : Maybe Part -> msg } -> Model -> Element msg scrim {showDialog,changedSheet} model = [ Element.el Heading.h3 <| Element.text "Scrim" @@ -251,11 +251,11 @@ scrim {showDialog,changedSheet} model = , label = Element.text <| "Show dialog" } , Input.button Button.simple - { onPress = Just <| changedSheet <| Just Left + { onPress = Just <| changedSheet <| Just LeftSheet , label = Element.text <| "show left sheet" } , Input.button Button.simple - { onPress = Just <| changedSheet <| Just Right + { onPress = Just <| changedSheet <| Just RightSheet , label = Element.text <| "show right sheet" } ] @@ -301,7 +301,7 @@ carousel model = view : { msgMapper : Msg -> msg , showDialog : msg - , changedSheet : Maybe Direction -> msg + , changedSheet : Maybe Part -> msg } -> Model -> Element msg view { msgMapper, showDialog, changedSheet } model = Element.column (Grid.section ) diff --git a/src/Core/Style.elm b/src/Core/Style.elm index e2d07a6..3d1d838 100644 --- a/src/Core/Style.elm +++ b/src/Core/Style.elm @@ -1,4 +1,4 @@ -module Core.Style exposing (Style,menuTabButtonSelected,menuTabButton, menuButton, menuButtonSelected, menuIconButton, sheetButton, sheetButtonSelected) +module Core.Style exposing (Style, menuButton, menuButtonSelected, menuIconButton, menuTabButton, menuTabButtonSelected, sheetButton, sheetButtonSelected) import Element exposing (Attribute, Element) import Element.Input as Input @@ -19,10 +19,20 @@ type alias Style msg = , menuIcon : Element Never , moreVerticalIcon : Element Never , spacing : Int + , title : List (Attribute msg) + , searchIcon : Element Never + , search : List (Attribute msg) } -menuButtonSelected : Style msg -> { label : String, icon : Element Never, onPress : Maybe msg } -> Element msg +type alias ButtonInfo msg = + { label : String + , icon : Element Never + , onPress : Maybe msg + } + + +menuButtonSelected : Style msg -> ButtonInfo msg -> Element msg menuButtonSelected config { label, icon, onPress } = Input.button (config.menuButton ++ config.menuButtonSelected) { onPress = onPress @@ -34,7 +44,7 @@ menuButtonSelected config { label, icon, onPress } = } -menuButton : Style msg -> { label : String, icon : Element Never, onPress : Maybe msg } -> Element msg +menuButton : Style msg -> ButtonInfo msg -> Element msg menuButton config { label, icon, onPress } = Input.button config.menuButton { onPress = onPress @@ -46,7 +56,7 @@ menuButton config { label, icon, onPress } = } -menuIconButton : Style msg -> { label : String, icon : Element Never, onPress : Maybe msg } -> Element msg +menuIconButton : Style msg -> ButtonInfo msg -> Element msg menuIconButton config { label, icon, onPress } = Input.button config.menuButton { onPress = onPress @@ -54,7 +64,7 @@ menuIconButton config { label, icon, onPress } = } -sheetButton : Style msg -> { label : String, icon : Element Never, onPress : Maybe msg } -> Element msg +sheetButton : Style msg -> ButtonInfo msg -> Element msg sheetButton config { label, icon, onPress } = Input.button config.sheetButton { onPress = onPress @@ -66,7 +76,7 @@ sheetButton config { label, icon, onPress } = } -sheetButtonSelected : Style msg -> { label : String, icon : Element Never, onPress : Maybe msg } -> Element msg +sheetButtonSelected : Style msg -> ButtonInfo msg -> Element msg sheetButtonSelected config { label, icon, onPress } = Input.button (config.sheetButton ++ config.sheetButtonSelected) { onPress = onPress @@ -77,7 +87,8 @@ sheetButtonSelected config { label, icon, onPress } = ] } -menuTabButton : Style msg -> { label : String, icon : Element Never, onPress : Maybe msg } -> Element msg + +menuTabButton : Style msg -> ButtonInfo msg -> Element msg menuTabButton config { label, icon, onPress } = Input.button (config.menuButton ++ config.tabButton) { onPress = onPress @@ -88,7 +99,8 @@ menuTabButton config { label, icon, onPress } = ] } -menuTabButtonSelected : Style msg -> { label : String, icon : Element Never, onPress : Maybe msg } -> Element msg + +menuTabButtonSelected : Style msg -> ButtonInfo msg -> Element msg menuTabButtonSelected config { label, icon, onPress } = Input.button (config.menuButton ++ config.tabButton ++ config.tabButtonSelected) { onPress = onPress @@ -97,4 +109,4 @@ menuTabButtonSelected config { label, icon, onPress } = [ icon |> Element.map never , Element.text label ] - } \ No newline at end of file + } diff --git a/src/Layout.elm b/src/Layout.elm index 66b5b17..ca0689f 100644 --- a/src/Layout.elm +++ b/src/Layout.elm @@ -1,5 +1,6 @@ -module Layout exposing (Direction(..), Layout, init, queueMessage, setSidebar, timePassed, view) +module Layout exposing (Layout, Part(..), activate, init, queueMessage, timePassed, view) +import Array import Browser.Dom exposing (Viewport) import Core.Style as Style exposing (Style) import Element exposing (Attribute, DeviceClass(..), Element) @@ -12,21 +13,22 @@ import Widget import Widget.Snackbar as Snackbar -type Direction - = Left - | Right +type Part + = LeftSheet + | RightSheet + | Search type alias Layout = { snackbar : Snackbar.Model String - , sheet : Maybe Direction + , active : Maybe Part } init : Layout init = { snackbar = Snackbar.init - , sheet = Nothing + , active = Nothing } @@ -37,24 +39,27 @@ queueMessage message layout = } -setSidebar : Maybe Direction -> Layout -> Layout -setSidebar direction layout = +activate : Maybe Part -> Layout -> Layout +activate part layout = { layout - | sheet = direction + | active = part } timePassed : Int -> Layout -> Layout timePassed sec layout = - case layout.sheet of - Nothing -> + case layout.active of + Just LeftSheet -> + layout + + Just RightSheet -> + layout + + _ -> { layout | snackbar = layout.snackbar |> Snackbar.timePassed sec } - _ -> - layout - view : List (Attribute msg) @@ -68,12 +73,18 @@ view : { selected : Int , items : List { label : String, icon : Element Never, onPress : Maybe msg } } + , search : + Maybe + { onChange : String -> msg + , text : String + , label : String + } , actions : List { label : String, icon : Element Never, onPress : Maybe msg } - , onChangedSidebar : Maybe Direction -> msg + , onChangedSidebar : Maybe Part -> msg , style : Style msg } -> Html msg -view attributes { title, onChangedSidebar, menu, actions, deviceClass, dialog, content, style, layout } = +view attributes { search, title, onChangedSidebar, menu, actions, deviceClass, dialog, content, style, layout } = let ( primaryActions, moreActions ) = ( if (actions |> List.length) > 4 then @@ -107,10 +118,14 @@ view attributes { title, onChangedSidebar, menu, actions, deviceClass, dialog, c || ((menu.items |> List.length) > 5) then [ Input.button style.menuButton - { onPress = Just <| onChangedSidebar <| Just Left + { onPress = Just <| onChangedSidebar <| Just LeftSheet , label = style.menuIcon |> Element.map never } - , title + , menu.items + |> Array.fromList + |> Array.get menu.selected + |> Maybe.map (.label >> Element.text >> Element.el style.title) + |> Maybe.withDefault title ] else @@ -133,7 +148,40 @@ view attributes { title, onChangedSidebar, menu, actions, deviceClass, dialog, c [ Element.width <| Element.shrink , Element.spacing 8 ] - , [ primaryActions + , if deviceClass == Phone then + Element.none + + else + search + |> Maybe.map + (\{ onChange, text, label } -> + Input.text style.search + { onChange = onChange + , text = text + , placeholder = + Just <| + Input.placeholder [] <| + Element.text label + , label = Input.labelHidden label + } + ) + |> Maybe.withDefault Element.none + , [ if deviceClass == Phone then + search + |> Maybe.map + (\{ label } -> + [ Style.menuButton style + { onPress = Just <| onChangedSidebar <| Just Search + , icon = style.searchIcon + , label = label + } + ] + ) + |> Maybe.withDefault [] + + else + [] + , primaryActions |> List.map (if deviceClass == Phone then Style.menuIconButton style @@ -146,7 +194,7 @@ view attributes { title, onChangedSidebar, menu, actions, deviceClass, dialog, c else [ Style.menuButton style - { onPress = Just <| onChangedSidebar <| Just Right + { onPress = Just <| onChangedSidebar <| Just RightSheet , icon = style.moreVerticalIcon , label = "" } @@ -182,10 +230,13 @@ view attributes { title, onChangedSidebar, menu, actions, deviceClass, dialog, c ] ) |> Maybe.withDefault Element.none + sheet = - case layout.sheet of - Just Left -> - menu.items + case layout.active of + Just LeftSheet -> + [ [ title + ] + , menu.items |> List.indexedMap (\i -> if i == menu.selected then @@ -194,6 +245,8 @@ view attributes { title, onChangedSidebar, menu, actions, deviceClass, dialog, c else Style.sheetButton style ) + ] + |> List.concat |> Element.column [ Element.width <| Element.fill ] |> Element.el (style.sheet @@ -202,7 +255,7 @@ view attributes { title, onChangedSidebar, menu, actions, deviceClass, dialog, c ] ) - Just Right -> + Just RightSheet -> moreActions |> List.map (Style.sheetButton style) |> Element.column [ Element.width <| Element.fill ] @@ -213,6 +266,26 @@ view attributes { title, onChangedSidebar, menu, actions, deviceClass, dialog, c ] ) + Just Search -> + case search of + Just { onChange, text, label } -> + Input.text style.search + { onChange = onChange + , text = text + , placeholder = + Just <| + Input.placeholder [] <| + Element.text label + , label = Input.labelHidden label + } + |> Element.el + [ Element.alignTop + , Element.width <| Element.fill + ] + + Nothing -> + Element.none + Nothing -> Element.none in @@ -223,7 +296,7 @@ view attributes { title, onChangedSidebar, menu, actions, deviceClass, dialog, c , [ Element.inFront nav , Element.inFront snackbar ] - , if (layout.sheet /= Nothing) || (dialog /= Nothing) then + , if (layout.active /= Nothing) || (dialog /= Nothing) then Widget.scrim { onDismiss = Just <| diff --git a/src/Widget/ScrollingNav.elm b/src/Widget/ScrollingNav.elm index 8a55cf5..dab0dff 100644 --- a/src/Widget/ScrollingNav.elm +++ b/src/Widget/ScrollingNav.elm @@ -1,7 +1,7 @@ module Widget.ScrollingNav exposing - ( Model, Msg, init, update, subscriptions, view, viewSections, current + ( Model, init, view, viewSections, current , jumpTo, syncPositions - , jumpToWithOffset + , getPos, jumpToWithOffset, setPos ) {-| The Scrolling Nav is a navigation bar thats updates while you scroll through @@ -24,8 +24,7 @@ import Element exposing (Attribute, Element) import Framework.Grid as Grid import Html.Attributes as Attributes import IntDict exposing (IntDict) -import Task -import Time +import Task exposing (Task) {-| -} @@ -37,23 +36,15 @@ type alias Model section = } -{-| -} -type Msg section - = GotHeaderPos section (Result Dom.Error Int) - | ChangedViewport (Result Dom.Error ()) - | SyncPosition Int - | JumpTo section - | TimePassed - - {-| The intial state include the labels and the arrangement of the sections -} init : { labels : section -> String , arrangement : List section + , toMsg : Result Dom.Error (Model section -> Model section) -> msg } - -> ( Model section, Cmd (Msg section) ) -init { labels, arrangement } = + -> ( Model section, Cmd msg ) +init { labels, arrangement, toMsg } = { labels = labels , positions = IntDict.empty , arrangement = arrangement @@ -62,97 +53,91 @@ init { labels, arrangement } = |> (\a -> ( a , syncPositions a + |> Task.attempt toMsg ) ) -{-| -} -update : Msg section -> Model section -> ( Model section, Cmd (Msg section) ) -update msg model = - case msg of - GotHeaderPos label result -> - ( case result of - Ok pos -> - { model - | positions = - model.positions - |> IntDict.insert pos - (label |> model.labels) - } - - Err _ -> - model - , Cmd.none - ) - - ChangedViewport _ -> - ( model, Cmd.none ) - - SyncPosition pos -> - ( { model - | scrollPos = pos - } - , Cmd.none - ) - - TimePassed -> - ( model - , Dom.getViewport - |> Task.map (.viewport >> .y >> round) - |> Task.perform SyncPosition - ) - - JumpTo elem -> - ( model - , model - |> jumpTo elem +getPos : Task x (Model selection -> Model selection) +getPos = + Dom.getViewport + |> Task.map + (\int model -> + { model + | scrollPos = int.viewport.y |> round + } ) -{-| -} -subscriptions : Sub (Msg msg) -subscriptions = - Time.every 100 (always TimePassed) +setPos : Int -> Model section -> Model section +setPos pos model = + { model | scrollPos = pos } {-| scrolls the screen to the respective section -} -jumpTo : section -> Model section -> Cmd (Msg msg) -jumpTo section { labels } = +jumpTo : + { section : section + , onChange : Result Dom.Error () -> msg + } + -> Model section + -> Cmd msg +jumpTo { section, onChange } { labels } = Dom.getElement (section |> labels) |> Task.andThen (\{ element } -> - Dom.setViewport 0 (element.y) + Dom.setViewport 0 element.y ) - |> Task.attempt ChangedViewport + |> Task.attempt onChange + {-| scrolls the screen to the respective section with some offset -} -jumpToWithOffset : Float -> section -> Model section -> Cmd (Msg msg) -jumpToWithOffset offset section { labels } = +jumpToWithOffset : + { offset : Float + , section : section + , onChange : Result Dom.Error () -> msg + } + -> Model section + -> Cmd msg +jumpToWithOffset { offset, section, onChange } { labels } = Dom.getElement (section |> labels) |> Task.andThen (\{ element } -> Dom.setViewport 0 (element.y - offset) ) - |> Task.attempt ChangedViewport + |> Task.attempt onChange + {-| -} -syncPositions : Model section -> Cmd (Msg section) +syncPositions : Model section -> Task Dom.Error (Model section -> Model section) syncPositions { labels, arrangement } = arrangement |> List.map (\label -> Dom.getElement (labels label) |> Task.map - (.element - >> .y - >> round + (\x -> + ( x.element.y |> round + , label + ) ) - |> Task.attempt - (GotHeaderPos label) ) - |> Cmd.batch + |> Task.sequence + |> Task.map + (\list m -> + list + |> List.foldl + (\( pos, label ) model -> + { model + | positions = + model.positions + |> IntDict.insert pos + (label |> model.labels) + } + ) + m + ) {-| -} @@ -170,7 +155,7 @@ current fromString { positions, scrollPos } = viewSections : { label : String -> Element msg , fromString : String -> Maybe section - , msgMapper : Msg section -> msg + , onSelect : section -> msg , attributes : Bool -> List (Attribute msg) } -> Model section @@ -181,11 +166,11 @@ viewSections : , onChange : section -> msg , attributes : Bool -> List (Attribute msg) } -viewSections { label, fromString, msgMapper, attributes } ({ arrangement, scrollPos, labels, positions } as model) = +viewSections { label, fromString, onSelect, attributes } ({ arrangement, labels } as model) = { selected = model |> current fromString , options = arrangement , label = \elem -> label (elem |> labels) - , onChange = JumpTo >> msgMapper + , onChange = onSelect , attributes = attributes } From b73a19d3ce2d9184f59fc25dd2b2725528496428 Mon Sep 17 00:00:00 2001 From: Lucas Payr Date: Tue, 21 Apr 2020 06:30:32 +0200 Subject: [PATCH 02/14] Added Dialog, and more... --- elm.json | 3 +- example/src/Component.elm | 40 +++-- example/src/Example.elm | 319 ++++++++++++++++++++++++++---------- example/src/Icons.elm | 8 + example/src/Reusable.elm | 67 ++++---- example/src/Stateless.elm | 272 +++++++++++++++--------------- src/Core/Style.elm | 133 ++++----------- src/Layout.elm | 185 ++++++++++----------- src/Widget.elm | 262 ++++++++++++++++------------- src/Widget/Button.elm | 82 +++++++++ src/Widget/ScrollingNav.elm | 80 ++++----- src/Widget/Snackbar.elm | 38 +++++ 12 files changed, 878 insertions(+), 611 deletions(-) create mode 100644 src/Widget/Button.elm diff --git a/elm.json b/elm.json index e347336..0b8bf4e 100644 --- a/elm.json +++ b/elm.json @@ -18,6 +18,7 @@ "elm/browser": "1.0.2 <= v < 2.0.0", "elm/core": "1.0.0 <= v < 2.0.0", "elm/html": "1.0.0 <= v < 2.0.0", + "elm/svg": "1.0.1 <= v < 2.0.0", "elm/time": "1.0.0 <= v < 2.0.0", "elm-community/intdict": "3.0.0 <= v < 4.0.0", "jasonliang512/elm-heroicons": "1.0.2 <= v < 2.0.0", @@ -28,4 +29,4 @@ "test-dependencies": { "elm-explorations/test": "1.2.1 <= v < 2.0.0" } -} \ No newline at end of file +} diff --git a/example/src/Component.elm b/example/src/Component.elm index 952beea..ea6dab8 100644 --- a/example/src/Component.elm +++ b/example/src/Component.elm @@ -91,10 +91,9 @@ update msg model = ) -filterSelect : FilterSelect.Model -> Element Msg +filterSelect : FilterSelect.Model -> (String,Element Msg) filterSelect model = - Element.column (Grid.simple ++ Card.large ++ [Element.height <| Element.fill]) <| - [ Element.el Heading.h3 <| Element.text "Filter Select" + ( "Filter Select" , case model.selected of Just selected -> Element.row Grid.compact @@ -128,13 +127,12 @@ filterSelect model = ) |> Element.wrappedRow [ Element.spacing 10 ] ] - ] + ) -validatedInput : ValidatedInput.Model () ( String, String ) -> Element Msg +validatedInput : ValidatedInput.Model () ( String, String ) -> (String,Element Msg) validatedInput model = - Element.column (Grid.simple ++ Card.large ++ [Element.height <| Element.fill]) <| - [ Element.el Heading.h3 <| Element.text "Validated Input" + ( "Validated Input" , ValidatedInput.view Input.simple model { label = "First Name, Sir Name" @@ -152,19 +150,19 @@ validatedInput model = |> Element.el (Tag.simple ++ Group.right ++ Color.primary) ] } - ] + ) -view : Model -> Element Msg -view model = - Element.column (Grid.section ++ [ Element.centerX ]) - [ Element.el Heading.h2 <| Element.text "Components" - , "Components have a Model, an Update- and sometimes even a Subscription-function. It takes some time to set them up correctly." - |> Element.text - |> List.singleton - |> Element.paragraph [] - , Element.wrappedRow (Grid.simple ++ [Element.height <| Element.shrink]) <| - [ filterSelect model.filterSelect - , validatedInput model.validatedInput - - ] +view : (Msg -> msg) -> Model -> + { title : String + , description : String + , items : List (String,Element msg) + } +view msgMapper model = + { title = "Components" + , description = "Components have a Model, an Update- and sometimes even a Subscription-function. It takes some time to set them up correctly." + , items = + [ filterSelect model.filterSelect + , validatedInput model.validatedInput ] + |> List.map (Tuple.mapSecond (Element.map msgMapper) ) + } diff --git a/example/src/Example.elm b/example/src/Example.elm index 9b58e91..332b723 100644 --- a/example/src/Example.elm +++ b/example/src/Example.elm @@ -5,7 +5,7 @@ import Browser.Dom as Dom exposing (Viewport) import Browser.Events as Events import Browser.Navigation as Navigation import Component -import Element exposing (DeviceClass(..), Element) +import Element exposing (DeviceClass(..), Element,Attribute) import Element.Input as Input import Element.Font as Font import Element.Border as Border @@ -29,21 +29,27 @@ import Stateless import Task import Time import Widget +import Widget.Button exposing (ButtonStyle) import Widget.FilterSelect as FilterSelect import Widget.ScrollingNav as ScrollingNav import Widget.Snackbar as Snackbar import Widget.ValidatedInput as ValidatedInput import Data.Section as Section exposing (Section(..)) +import Array type alias LoadedModel = { component : Component.Model , stateless : Stateless.Model , reusable : Reusable.Model , scrollingNav : ScrollingNav.Model Section - , layout : Layout + , layout : Layout LoadedMsg , displayDialog : Bool - , deviceClass : DeviceClass - , search : String + , window : { height : Int, width : Int } + , search : + { raw : String + , current : String + , remaining : Int + } } @@ -58,7 +64,7 @@ type LoadedMsg | ComponentSpecific Component.Msg | UpdateScrollingNav (ScrollingNav.Model Section -> ScrollingNav.Model Section) | TimePassed Int - | AddSnackbar String + | AddSnackbar (String,Bool) | ToggleDialog Bool | ChangedSidebar (Maybe Part) | Resized { width : Int, height : Int } @@ -72,9 +78,64 @@ type Msg = LoadedSpecific LoadedMsg | GotViewport Viewport -style : Style msg +textButton : ButtonStyle msg +textButton = + { container = Button.simple + , label = Grid.simple + , disabled = Color.disabled + , active = Color.primary + } + +simpleButton : ButtonStyle msg +simpleButton = + { container = Button.simple ++ Color.primary + , label = Grid.simple + , disabled = Color.disabled + , active = Color.primary + } + +style : Style + { dialog : + { containerColumn : List (Attribute msg) + , title : List (Attribute msg) + , buttonRow : List (Attribute msg) + , accept : ButtonStyle msg + , dismiss : ButtonStyle msg + } + } msg style = - { snackbar = Card.simple ++ Color.dark + { dialog = + { containerColumn = + Card.simple + ++ Grid.simple + ++ [ Element.width <| Element.minimum 280 <| Element.maximum 560 <| Element.fill ] + , title = Heading.h3 + , buttonRow = + Grid.simple ++ + [ Element.paddingEach + { top = 28 + , bottom = 0 + , left = 0 + , right = 0 + } + ] + , accept = simpleButton + , dismiss = textButton + } + , snackbar = + { row = + Card.simple + ++ Color.dark + ++ Grid.simple + ++ [ Element.paddingXY 8 6] + , button = + { label = Grid.simple + , container = Button.simple ++ Color.dark + , disabled = Color.disabled + , active = Color.primary + } + , text = [Element.paddingXY 8 0] + } , layout = Framework.responsiveLayout , header = Framework.container @@ -83,28 +144,42 @@ style = , Element.height <| Element.px <| 42 ] , menuButton = - Button.simple ++ Group.center ++ Color.dark - , menuButtonSelected = - Color.primary + { label = Grid.simple + , container = Button.simple ++ Group.center ++ Color.dark + , disabled = Color.disabled + , active = Color.primary + } , sheetButton = - Button.fill - ++ Group.center - ++ Color.light - ++ [Font.alignLeft] - , sheetButtonSelected = - Color.primary - , tabButton = - [ Element.height <| Element.px <| 42 - , Border.widthEach - { top = 0, - left = 0, - right = 0, - bottom = 8 - } - ] - , tabButtonSelected = - [ Border.color Color.turquoise - ] + { container = + Button.fill + ++ Group.center + ++ Color.light + ++ [Font.alignLeft] + , label = Grid.simple + , disabled = Color.disabled + , active = Color.primary + } + , menuTabButton = + { container = + [ Element.height <| Element.px <| 42 + , Border.widthEach + { top = 0, + left = 0, + right = 0, + bottom = 4 + } + , Element.paddingEach + { top = 12 + , left = 8 + , right = 8 + , bottom = 4 + } + , Border.color Color.black + ] + , label = Grid.simple + , disabled = Color.disabled + , active = [ Border.color Color.turquoise ] + } , sheet = Color.light ++ [ Element.width <| Element.maximum 256 <| Element.fill] , menuIcon = @@ -116,7 +191,16 @@ style = , searchIcon = Icons.search |> Element.html |> Element.el [] , search = - Color.simple ++ [Font.color <| Element.rgb255 0 0 0 ] + Color.simple ++ + Card.large ++ + [Font.color <| Element.rgb255 0 0 0 + , Element.padding 6 + , Element.centerY + , Element.alignRight + ] + , searchFill = + Color.light + ++ Group.center } @@ -125,7 +209,8 @@ initialModel { viewport } = let ( scrollingNav, cmd ) = ScrollingNav.init - { labels = Section.toString + { toString = Section.toString + , fromString = Section.fromString , arrangement = Section.asList , toMsg = \result -> case result of @@ -141,13 +226,15 @@ initialModel { viewport } = , scrollingNav = scrollingNav , layout = Layout.init , displayDialog = False - , deviceClass = + , window = { width = viewport.width |> round , height = viewport.height |> round } - |> Element.classifyDevice - |> .class - , search = "" + , search = + { raw = "" + , current = "" + , remaining = 0 + } } , cmd ) @@ -171,25 +258,23 @@ view model = Layout.view [] { dialog = if m.displayDialog then - Just - { onDismiss = Just <| ToggleDialog False - , content = - [ Element.el Heading.h3 <| Element.text "Dialog" - , "This is a dialog window" + { body = + "This is a dialog window" |> Element.text |> List.singleton |> Element.paragraph [] - , Input.button (Button.simple ++ [ Element.alignRight ]) - { onPress = Just <| ToggleDialog False - , label = Element.text "Ok" - } - ] - |> Element.column - ( Grid.simple - ++ Card.large - ++ [Element.centerX, Element.centerY] - ) + , title = Just "Dialog" + , accept = Just + { text = "Ok" + , onPress = Just <| ToggleDialog False } + , dismiss = Just + { text = "Dismiss" + , onPress = Just <| ToggleDialog False + } + } + |> Widget.dialog style.dialog + |> Just else Nothing @@ -198,11 +283,12 @@ view model = , [ m.scrollingNav |> ScrollingNav.view (\section -> - case section of + ( case section of ComponentViews -> m.component - |> Component.view - |> Element.map ComponentSpecific + |> Component.view ComponentSpecific + + ReusableViews -> Reusable.view @@ -218,6 +304,39 @@ view model = , changedSheet = ChangedSidebar } m.stateless + ) |> (\{title,description,items} -> + [ Element.el Heading.h2 <| Element.text <| title + , if m.search.current == "" then + description + |> Element.text + |> List.singleton + |> Element.paragraph [] + else Element.none + , items + |> (if m.search.current /= "" then + List.filter + ( Tuple.first + >> String.toLower + >> String.contains (m.search.current |> String.toLower) + ) + else + identity) + |> List.map + (\(name,elem) -> + [ Element.text name + |> Element.el Heading.h3 + , elem + ] + |> Element.column + (Grid.simple + ++ Card.large + ++ [Element.height <| Element.fill]) + ) + |> Element.wrappedRow + (Grid.simple ++ [Element.height <| Element.shrink]) + ] + |> Element.column (Grid.section ++ [ Element.centerX ]) + ) ) ] |> Element.column Framework.container @@ -225,52 +344,35 @@ view model = |> Element.column Grid.compact , style = style , layout = m.layout - , deviceClass = m.deviceClass + , window = m.window , menu = - { selected = - Section.asList - |> List.indexedMap (\i s -> (i,s)) - |> List.filterMap - ( \(i,s) -> - if m.scrollingNav - |> ScrollingNav.current Section.fromString - |> (==) (Just s) - then - Just i - else - Nothing - ) - |> List.head - |> Maybe.withDefault 0 - , items = - Section.asList - |> List.map - (\label -> - { icon = Element.none - , label = label |> Section.toString - , onPress = Just <| JumpTo <| label - } - ) - } + m.scrollingNav + |> ScrollingNav.toSelect + (\int -> + m.scrollingNav.arrangement + |> Array.fromList + |> Array.get int + |> Maybe.map JumpTo + ) , actions = [ { onPress = Just <| Load "https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/" - , label = "Docs" + , text = "Docs" , icon = Icons.book|> Element.html |> Element.el [] } , { onPress = Just <| Load "https://github.com/Orasund/elm-ui-widgets" - , label = "Github" + , text = "Github" , icon = Icons.github|> Element.html |> Element.el [] } , { onPress = Nothing - , label = "Placeholder" + , text = "Placeholder" , icon = Icons.circle|> Element.html |> Element.el [] } , { onPress = Nothing - , label = "Placeholder" + , text = "Placeholder" , icon = Icons.triangle|> Element.html |> Element.el [] } , { onPress = Nothing - , label = "Placeholder" + , text = "Placeholder" , icon = Icons.square|> Element.html |> Element.el [] } ] @@ -281,7 +383,7 @@ view model = |> Element.el Heading.h1 , search = Just - { text = m.search + { text = m.search.raw , onChange = ChangedSearch , label = "Search" } @@ -330,15 +432,44 @@ updateLoaded msg model = ) TimePassed int -> + let + search = model.search + in ( { model | layout = model.layout |> Layout.timePassed int + , search = + if search.remaining > 0 then + if search.remaining <= int then + { search + | current = search.raw + , remaining = 0 + } + else + { search + | remaining = search.remaining - int + } + else + model.search } , ScrollingNav.getPos |> Task.perform UpdateScrollingNav ) - AddSnackbar string -> - ( { model | layout = model.layout |> Layout.queueMessage string } + AddSnackbar (string,bool) -> + ( { model + | layout = model.layout + |> Layout.queueMessage + { text = string + , button = if bool then + Just + { text = "Add" + , onPress = Just <| + (AddSnackbar ("This is another message", False)) + } + else + Nothing + } + } , Cmd.none ) @@ -347,8 +478,8 @@ updateLoaded msg model = , Cmd.none ) - Resized screen -> - ( { model | deviceClass = screen |> Element.classifyDevice |> .class } + Resized window -> + ( { model | window = window } , Cmd.none ) @@ -370,7 +501,17 @@ updateLoaded msg model = ) ChangedSearch string -> - ( { model | search = string},Cmd.none) + let + search = model.search + in + ( { model | search = + { search + | raw = string + , remaining = 300 + } + } + , Cmd.none + ) Idle -> ( model , Cmd.none) diff --git a/example/src/Icons.elm b/example/src/Icons.elm index c6b19d1..1dc7422 100644 --- a/example/src/Icons.elm +++ b/example/src/Icons.elm @@ -7,6 +7,7 @@ module Icons exposing , triangle , square , search + , slash ) import Html exposing (Html) @@ -66,6 +67,13 @@ circle = [ Svg.circle [ cx "12", cy "12", r "10" ] [] ] +slash : Html msg +slash = + svgFeatherIcon "slash" + [ Svg.circle [ cx "12", cy "12", r "10" ] [] + , Svg.line [ x1 "4.93", y1 "4.93", x2 "19.07", y2 "19.07" ] [] + ] + triangle : Html msg triangle = svgFeatherIcon "triangle" diff --git a/example/src/Reusable.elm b/example/src/Reusable.elm index 8bf0ab5..c911b18 100644 --- a/example/src/Reusable.elm +++ b/example/src/Reusable.elm @@ -54,24 +54,37 @@ init = SortTable.sortBy { title = "Name", asc = True } -snackbar : (String -> msg) -> Element msg +snackbar : ((String,Bool) -> msg) -> (String,Element msg) snackbar addSnackbar = - [ Element.el Heading.h3 <| Element.text "Snackbar" - , Input.button Button.simple - { onPress = Just <| addSnackbar "This is a notification. It will disappear after 10 seconds." + ( "Snackbar" + , [Input.button Button.simple + { onPress = Just <| addSnackbar <| + ("This is a notification. It will disappear after 10 seconds." + , False + ) , label = "Add Notification" |> Element.text |> List.singleton |> Element.paragraph [] } - ] - |> Element.column (Grid.simple ++ Card.large ++ [Element.height <| Element.fill]) + , Input.button Button.simple + { onPress = Just <| addSnackbar <| + ("You can add another notification if you want." + , True + ) + , label = + "Add Notification with Action" + |> Element.text + |> List.singleton + |> Element.paragraph [] + } + ] |> Element.column Grid.simple + ) - -sortTable : SortTable.Model -> Element Msg +sortTable : SortTable.Model -> (String,Element Msg) sortTable model = - [ Element.el Heading.h3 <| Element.text "Sort Table" + ( "Sort Table" , SortTable.view { content = [ { id = 1, name = "Antonio", rating = 2.456 } @@ -139,35 +152,31 @@ sortTable model = } ) |> Element.table Grid.simple - ] - |> Element.column (Grid.simple ++ Card.large ++ [Element.height <| Element.fill]) + ) -scrollingNavCard : Element msg +scrollingNavCard : (String , Element msg ) scrollingNavCard = - [ Element.el Heading.h3 <| Element.text "Scrolling Nav" + ("Scrolling Nav" , Element.text "Resize the screen and open the side-menu. Then start scrolling to see the scrolling navigation in action." |> List.singleton |> Element.paragraph [] - ] - |> Element.column (Grid.simple ++ Card.large ++ [Element.height <| Element.fill]) - + ) view : - { addSnackbar : String -> msg + { addSnackbar : (String,Bool) -> msg , msgMapper : Msg -> msg , model : Model } - -> Element msg + -> { title : String + , description : String + , items : List (String,Element msg) + } view { addSnackbar, msgMapper, model } = - Element.column (Grid.section ++ [ Element.centerX ]) - [ Element.el Heading.h2 <| Element.text "Reusable Views" - , "Reusable views have an internal state but no update function. You will need to do some wiring, but nothing complicated." - |> Element.text - |> List.singleton - |> Element.paragraph [] - , Element.wrappedRow (Grid.simple ++ [Element.height <| Element.shrink]) <| - [ snackbar addSnackbar - , sortTable model |> Element.map msgMapper - , scrollingNavCard - ] + { title = "Reusable Views" + , description = "Reusable views have an internal state but no update function. You will need to do some wiring, but nothing complicated." + , items = + [ snackbar addSnackbar + , sortTable model |> Tuple.mapSecond (Element.map msgMapper) + , scrollingNavCard ] + } diff --git a/example/src/Stateless.elm b/example/src/Stateless.elm index 528eb1f..d946a8c 100644 --- a/example/src/Stateless.elm +++ b/example/src/Stateless.elm @@ -17,16 +17,34 @@ import Heroicons.Solid as Heroicons import Html exposing (Html) import Html.Attributes as Attributes import Set exposing (Set) -import Widget +import Widget.Button as Button exposing (ButtonStyle) import Layout exposing (Part(..)) +import Icons +import Widget +buttonStyle : ButtonStyle msg +buttonStyle = + { label = [ Element.spacing 8] + , container = Button.simple + , disabled = Color.disabled + , active = Color.primary + } + +tabButtonStyle :ButtonStyle msg +tabButtonStyle= + { label = [ Element.spacing 8] + , container = Button.simple ++ Group.top + , disabled = Color.disabled + , active = Color.primary + } type alias Model = { selected : Maybe Int , multiSelected : Set Int , isCollapsed : Bool , carousel : Int - , tab : Int + , tab : Maybe Int + , button : Bool } @@ -36,6 +54,7 @@ type Msg | ToggleCollapsable Bool | ChangedTab Int | SetCarousel Int + | ToggleButton Bool init : Model @@ -44,7 +63,8 @@ init = , multiSelected = Set.empty , isCollapsed = False , carousel = 0 - , tab = 1 + , tab = Just 1 + , button = True } @@ -91,35 +111,31 @@ update msg model = ) ChangedTab int -> - ( { model | tab = int }, Cmd.none ) + ( { model | tab = Just int }, Cmd.none ) + + ToggleButton bool -> + ( { model | button = bool }, Cmd.none ) -select : Model -> Element Msg +select : Model -> (String,Element Msg) select model = - [ Element.el Heading.h3 <| Element.text "Select" - , Widget.select - { selected = model.selected - , options = [ 1, 2, 42 ] - , label = String.fromInt >> Element.text - , onChange = ChangedSelected - , attributes = - \selected -> - Button.simple - ++ [ Border.width 0 - , Border.rounded 0 - ] - ++ (if selected then - Color.primary - - else - [] - ) - } + ( "Select" + , { selected = model.selected + , options = + [ 1, 2, 42 ] + |> List.map (\int -> + { text = String.fromInt int + , icon = Element.none + } + ) + , onSelect = ChangedSelected >> Just + } + |> Widget.select |> List.indexedMap (\i -> - Element.el - (Button.simple - ++ [ Element.padding <| 0 ] + Widget.selectButton + { buttonStyle + | container = buttonStyle.container ++ (if i == 0 then Group.left @@ -129,39 +145,31 @@ select model = else Group.center ) - ) + } ) + |> Element.row Grid.compact - ] - |> Element.column (Grid.simple ++ Card.large ++ [Element.height <| Element.fill]) + ) -multiSelect : Model -> Element Msg +multiSelect : Model -> (String,Element Msg) multiSelect model = - [ Element.el Heading.h3 <| Element.text "Multi Select" - , Widget.multiSelect - { selected = model.multiSelected - , options = [ 1, 2, 42 ] - , label = String.fromInt >> Element.text - , onChange = ChangedMultiSelected - , attributes = - \selected -> - Button.simple - ++ [ Border.width 0 - , Border.rounded 0 - ] - ++ (if selected then - Color.primary - - else - [] - ) - } + ( "Multi Select" + , { selected = model.multiSelected + , options = + [ 1, 2, 42 ] + |> List.map (\int -> + { text = String.fromInt int + , icon = Element.none + }) + , onSelect = ChangedMultiSelected >> Just + } + |> Widget.multiSelect |> List.indexedMap (\i -> - Element.el - (Button.simple - ++ [ Element.padding <| 0 ] + Widget.selectButton + { buttonStyle + | container = buttonStyle.container ++ (if i == 0 then Group.left @@ -171,16 +179,14 @@ multiSelect model = else Group.center ) - ) + } ) |> Element.row Grid.compact - ] - |> Element.column (Grid.simple ++ Card.large ++ [Element.height <| Element.fill]) + ) - -collapsable : Model -> Element Msg +collapsable : Model -> (String,Element Msg) collapsable model = - [ Element.el Heading.h3 <| Element.text "Collapsable" + ( "Collapsable" , Widget.collapsable { onToggle = ToggleCollapsable , isCollapsed = model.isCollapsed @@ -196,28 +202,33 @@ collapsable model = ] , content = Element.text <| "Hello World" } - ] - |> Element.column (Grid.simple ++ Card.large ++ [Element.height <| Element.fill]) + ) - -tab : Model -> Element Msg +tab : Model -> (String,Element Msg) tab model = - [ Element.el Heading.h3 <| Element.text "Tab" - , Widget.tab Grid.simple - { selected = model.tab - , options = [ 1, 2, 3 ] - , onChange = ChangedTab - , label = \int -> "Tab " ++ String.fromInt int |> Element.text - , content = - \selected -> + ( "Tab" + , Widget.tab + { tabButton = tabButtonStyle + , tabRow = Grid.simple + } + { selected = model.tab + , options = [ 1, 2, 3 ] + |> List.map (\int -> + { text = "Tab " ++ (int |> String.fromInt) + , icon = Element.none + } + ) + , onSelect = ChangedTab >> Just + } <| + (\selected -> (case selected of - 1 -> + Just 0 -> "This is Tab 1" - 2 -> + Just 1 -> "This is the second tab" - 3 -> + Just 2 -> "The thrid and last tab" _ -> @@ -225,46 +236,35 @@ tab model = ) |> Element.text |> Element.el (Card.small ++ Group.bottom) - , attributes = - \selected -> - Button.simple - ++ Group.top - ++ (if selected then - Color.primary + ) + ) - else - [] - ) - } - ] - |> Element.column (Grid.simple ++ Card.large ++ [Element.height <| Element.fill]) - - -scrim : - { showDialog : msg - , changedSheet : Maybe Part -> msg - } -> Model -> Element msg -scrim {showDialog,changedSheet} model = - [ Element.el Heading.h3 <| Element.text "Scrim" +modal : (Maybe Part -> msg) -> Model -> (String,Element msg) +modal changedSheet model = + ( "Modal" + , [ Input.button Button.simple + { onPress = Just <| changedSheet <| Just LeftSheet + , label = Element.text <| "show left sheet" + } + , Input.button Button.simple + { onPress = Just <| changedSheet <| Just RightSheet + , label = Element.text <| "show right sheet" + } + ] |> Element.column Grid.simple + ) + +dialog : msg -> Model -> (String,Element msg) +dialog showDialog model = + ( "Dialog" , Input.button Button.simple { onPress = Just showDialog , label = Element.text <| "Show dialog" } - , Input.button Button.simple - { onPress = Just <| changedSheet <| Just LeftSheet - , label = Element.text <| "show left sheet" - } - , Input.button Button.simple - { onPress = Just <| changedSheet <| Just RightSheet - , label = Element.text <| "show right sheet" - } - ] - |> Element.column (Grid.simple ++ Card.large ++ [Element.height <| Element.fill]) + ) - -carousel : Model -> Element Msg +carousel : Model -> (String,Element Msg) carousel model = - [ Element.el Heading.h3 <| Element.text "Carousel" + ( "Carousel" , Widget.carousel { content = ( Color.cyan, [ Color.yellow, Color.green, Color.red ] |> Array.fromList ) , current = model.carousel @@ -294,33 +294,47 @@ carousel model = ] |> Element.row (Grid.simple ++ [ Element.centerX, Element.width <| Element.shrink ]) } - ] - |> Element.column (Grid.simple ++ Card.large ++ [Element.height <| Element.fill]) + ) +iconButton : Model -> (String,Element Msg) +iconButton model = + ( "Icon Button" + , [Button.view buttonStyle + { text = "disable me" + , icon = Icons.slash |> Element.html |> Element.el [] , onPress = + if model.button then + Just <| ToggleButton False + else + Nothing + } + , Button.view buttonStyle + { text = "reset button" + , icon = Element.none + , onPress = Just <| ToggleButton True + } + ] |> Element.column Grid.simple + ) view : { msgMapper : Msg -> msg , showDialog : msg , changedSheet : Maybe Part -> msg - } -> Model -> Element msg + } -> Model + -> { title : String + , description : String + , items : List (String,Element msg) + } view { msgMapper, showDialog, changedSheet } model = - Element.column (Grid.section ) - [ Element.el Heading.h2 <| Element.text "Stateless Views" - , "Stateless views are simple functions that view some content. No wiring required." - |> Element.text - |> List.singleton - |> Element.paragraph [] - , Element.wrappedRow - (Grid.simple ++ [Element.height <| Element.shrink]) - <| - [ select model |> Element.map msgMapper - , multiSelect model |> Element.map msgMapper - , collapsable model |> Element.map msgMapper - , scrim - { showDialog = showDialog - , changedSheet = changedSheet - } model - , carousel model |> Element.map msgMapper - , tab model |> Element.map msgMapper - ] + { title = "Stateless Views" + , description = "Stateless views are simple functions that view some content. No wiring required." + , items = + [ iconButton model |> Tuple.mapSecond (Element.map msgMapper) + , select model |> Tuple.mapSecond (Element.map msgMapper) + , multiSelect model |> Tuple.mapSecond (Element.map msgMapper) + , collapsable model |> Tuple.mapSecond (Element.map msgMapper) + , modal changedSheet model + , carousel model |> Tuple.mapSecond (Element.map msgMapper) + , tab model |> Tuple.mapSecond (Element.map msgMapper) + , dialog showDialog model ] + } diff --git a/src/Core/Style.elm b/src/Core/Style.elm index 3d1d838..273fe65 100644 --- a/src/Core/Style.elm +++ b/src/Core/Style.elm @@ -1,112 +1,49 @@ -module Core.Style exposing (Style, menuButton, menuButtonSelected, menuIconButton, menuTabButton, menuTabButtonSelected, sheetButton, sheetButtonSelected) +module Core.Style exposing (Style, menuButton, menuIconButton, menuTabButton, sheetButton) import Element exposing (Attribute, Element) -import Element.Input as Input import Html exposing (Html) +import Widget +import Widget.Button as Button exposing (Button, ButtonStyle) -type alias Style msg = - { snackbar : List (Attribute msg) - , layout : List (Attribute msg) -> Element msg -> Html msg - , header : List (Attribute msg) - , sheet : List (Attribute msg) - , menuButton : List (Attribute msg) - , menuButtonSelected : List (Attribute msg) - , sheetButton : List (Attribute msg) - , sheetButtonSelected : List (Attribute msg) - , tabButton : List (Attribute msg) - , tabButtonSelected : List (Attribute msg) - , menuIcon : Element Never - , moreVerticalIcon : Element Never - , spacing : Int - , title : List (Attribute msg) - , searchIcon : Element Never - , search : List (Attribute msg) +type alias Style style msg = + { style + | snackbar : + { row : List (Attribute msg) + , text : List (Attribute msg) + , button : ButtonStyle msg + } + , layout : List (Attribute msg) -> Element msg -> Html msg + , header : List (Attribute msg) + , sheet : List (Attribute msg) + , sheetButton : ButtonStyle msg + , menuButton : ButtonStyle msg + , menuTabButton : ButtonStyle msg + , menuIcon : Element Never + , moreVerticalIcon : Element Never + , spacing : Int + , title : List (Attribute msg) + , searchIcon : Element Never + , search : List (Attribute msg) + , searchFill : List (Attribute msg) } -type alias ButtonInfo msg = - { label : String - , icon : Element Never - , onPress : Maybe msg - } +menuButton : Style style msg -> ( Bool, Button msg ) -> Element msg +menuButton style = + Widget.selectButton style.menuButton -menuButtonSelected : Style msg -> ButtonInfo msg -> Element msg -menuButtonSelected config { label, icon, onPress } = - Input.button (config.menuButton ++ config.menuButtonSelected) - { onPress = onPress - , label = - Element.row [ Element.spacing 8 ] - [ icon |> Element.map never - , Element.text label - ] - } +menuIconButton : Style style msg -> Button msg -> Element msg +menuIconButton style = + Button.viewIconOnly style.menuButton -menuButton : Style msg -> ButtonInfo msg -> Element msg -menuButton config { label, icon, onPress } = - Input.button config.menuButton - { onPress = onPress - , label = - Element.row [ Element.spacing 8 ] - [ icon |> Element.map never - , Element.text label - ] - } +sheetButton : Style style msg -> ( Bool, Button msg ) -> Element msg +sheetButton style = + Widget.selectButton style.sheetButton -menuIconButton : Style msg -> ButtonInfo msg -> Element msg -menuIconButton config { label, icon, onPress } = - Input.button config.menuButton - { onPress = onPress - , label = icon |> Element.map never - } - - -sheetButton : Style msg -> ButtonInfo msg -> Element msg -sheetButton config { label, icon, onPress } = - Input.button config.sheetButton - { onPress = onPress - , label = - Element.row [ Element.spacing 8 ] - [ icon |> Element.map never - , Element.text label - ] - } - - -sheetButtonSelected : Style msg -> ButtonInfo msg -> Element msg -sheetButtonSelected config { label, icon, onPress } = - Input.button (config.sheetButton ++ config.sheetButtonSelected) - { onPress = onPress - , label = - Element.row [ Element.spacing 8 ] - [ icon |> Element.map never - , Element.text label - ] - } - - -menuTabButton : Style msg -> ButtonInfo msg -> Element msg -menuTabButton config { label, icon, onPress } = - Input.button (config.menuButton ++ config.tabButton) - { onPress = onPress - , label = - Element.row [ Element.spacing 8 ] - [ icon |> Element.map never - , Element.text label - ] - } - - -menuTabButtonSelected : Style msg -> ButtonInfo msg -> Element msg -menuTabButtonSelected config { label, icon, onPress } = - Input.button (config.menuButton ++ config.tabButton ++ config.tabButtonSelected) - { onPress = onPress - , label = - Element.row [ Element.spacing 8 ] - [ icon |> Element.map never - , Element.text label - ] - } +menuTabButton : Style style msg -> ( Bool, Button msg ) -> Element msg +menuTabButton style = + Widget.selectButton style.menuTabButton diff --git a/src/Layout.elm b/src/Layout.elm index ca0689f..4af1877 100644 --- a/src/Layout.elm +++ b/src/Layout.elm @@ -1,16 +1,13 @@ module Layout exposing (Layout, Part(..), activate, init, queueMessage, timePassed, view) import Array -import Browser.Dom exposing (Viewport) import Core.Style as Style exposing (Style) import Element exposing (Attribute, DeviceClass(..), Element) -import Element.Background as Background -import Element.Events as Events import Element.Input as Input import Html exposing (Html) -import Html.Attributes as Attributes -import Widget -import Widget.Snackbar as Snackbar +import Widget exposing (Select) +import Widget.Button as Button exposing (Button) +import Widget.Snackbar as Snackbar exposing (Message) type Part @@ -19,34 +16,34 @@ type Part | Search -type alias Layout = - { snackbar : Snackbar.Model String +type alias Layout msg = + { snackbar : Snackbar.Model (Message msg) , active : Maybe Part } -init : Layout +init : Layout msg init = { snackbar = Snackbar.init , active = Nothing } -queueMessage : String -> Layout -> Layout +queueMessage : Message msg -> Layout msg -> Layout msg queueMessage message layout = { layout | snackbar = layout.snackbar |> Snackbar.insert message } -activate : Maybe Part -> Layout -> Layout +activate : Maybe Part -> Layout msg -> Layout msg activate part layout = { layout | active = part } -timePassed : Int -> Layout -> Layout +timePassed : Int -> Layout msg -> Layout msg timePassed sec layout = case layout.active of Just LeftSheet -> @@ -64,28 +61,31 @@ timePassed sec layout = view : List (Attribute msg) -> - { deviceClass : DeviceClass + { window : { height : Int, width : Int } , dialog : Maybe { onDismiss : Maybe msg, content : Element msg } , content : Element msg - , layout : Layout + , layout : Layout msg , title : Element msg - , menu : - { selected : Int - , items : List { label : String, icon : Element Never, onPress : Maybe msg } - } + , menu : Select msg , search : Maybe { onChange : String -> msg , text : String , label : String } - , actions : List { label : String, icon : Element Never, onPress : Maybe msg } + , actions : List (Button msg) , onChangedSidebar : Maybe Part -> msg - , style : Style msg + , style : Style style msg } -> Html msg -view attributes { search, title, onChangedSidebar, menu, actions, deviceClass, dialog, content, style, layout } = +view attributes { search, title, onChangedSidebar, menu, actions, window, dialog, content, style, layout } = let + deviceClass : DeviceClass + deviceClass = + window + |> Element.classifyDevice + |> .class + ( primaryActions, moreActions ) = ( if (actions |> List.length) > 4 then actions |> List.take 2 @@ -115,30 +115,29 @@ view attributes { search, title, onChangedSidebar, menu, actions, deviceClass, d [ (if (deviceClass == Phone) || (deviceClass == Tablet) - || ((menu.items |> List.length) > 5) + || ((menu.options |> List.length) > 5) then - [ Input.button style.menuButton + [ Button.viewIconOnly style.menuButton { onPress = Just <| onChangedSidebar <| Just LeftSheet - , label = style.menuIcon |> Element.map never + , icon = style.menuIcon |> Element.map never + , text = "Menu" } - , menu.items - |> Array.fromList - |> Array.get menu.selected - |> Maybe.map (.label >> Element.text >> Element.el style.title) + , menu.selected + |> Maybe.andThen + (\option -> + menu.options + |> Array.fromList + |> Array.get option + ) + |> Maybe.map (.text >> Element.text >> Element.el style.title) |> Maybe.withDefault title ] else [ title - , menu.items - |> List.indexedMap - (\i -> - if i == menu.selected then - Style.menuTabButtonSelected style - - else - Style.menuTabButton style - ) + , menu + |> Widget.select + |> List.map (Style.menuTabButton style) |> Element.row [ Element.width <| Element.shrink ] @@ -146,9 +145,9 @@ view attributes { search, title, onChangedSidebar, menu, actions, deviceClass, d ) |> Element.row [ Element.width <| Element.shrink - , Element.spacing 8 + , Element.spacing style.spacing ] - , if deviceClass == Phone then + , if deviceClass == Phone || deviceClass == Tablet then Element.none else @@ -166,37 +165,45 @@ view attributes { search, title, onChangedSidebar, menu, actions, deviceClass, d } ) |> Maybe.withDefault Element.none - , [ if deviceClass == Phone then - search - |> Maybe.map - (\{ label } -> - [ Style.menuButton style + , [ search + |> Maybe.map + (\{ label } -> + if deviceClass == Tablet then + [ Button.view style.menuButton { onPress = Just <| onChangedSidebar <| Just Search , icon = style.searchIcon - , label = label + , text = label } ] - ) - |> Maybe.withDefault [] - else - [] + else if deviceClass == Phone then + [ Style.menuIconButton style + { onPress = Just <| onChangedSidebar <| Just Search + , icon = style.searchIcon + , text = label + } + ] + + else + [] + ) + |> Maybe.withDefault [] , primaryActions |> List.map (if deviceClass == Phone then Style.menuIconButton style else - Style.menuButton style + Button.view style.menuButton ) , if moreActions |> List.isEmpty then [] else - [ Style.menuButton style + [ Button.viewIconOnly style.menuButton { onPress = Just <| onChangedSidebar <| Just RightSheet , icon = style.moreVerticalIcon - , label = "" + , text = "More" } ] ] @@ -210,7 +217,7 @@ view attributes { search, title, onChangedSidebar, menu, actions, deviceClass, d (style.header ++ [ Element.padding 0 , Element.centerX - , Element.spaceEvenly + , Element.spacing style.spacing , Element.alignTop , Element.width <| Element.fill ] @@ -218,16 +225,13 @@ view attributes { search, title, onChangedSidebar, menu, actions, deviceClass, d snackbar = layout.snackbar - |> Snackbar.current + |> Snackbar.view style.snackbar identity |> Maybe.map - (Element.text - >> List.singleton - >> Element.paragraph style.snackbar - >> Element.el - [ Element.padding 8 - , Element.alignBottom - , Element.alignRight - ] + (Element.el + [ Element.padding style.spacing + , Element.alignBottom + , Element.alignRight + ] ) |> Maybe.withDefault Element.none @@ -236,15 +240,9 @@ view attributes { search, title, onChangedSidebar, menu, actions, deviceClass, d Just LeftSheet -> [ [ title ] - , menu.items - |> List.indexedMap - (\i -> - if i == menu.selected then - Style.sheetButtonSelected style - - else - Style.sheetButton style - ) + , menu + |> Widget.select + |> List.map (Style.sheetButton style) ] |> List.concat |> Element.column [ Element.width <| Element.fill ] @@ -257,7 +255,7 @@ view attributes { search, title, onChangedSidebar, menu, actions, deviceClass, d Just RightSheet -> moreActions - |> List.map (Style.sheetButton style) + |> List.map (Button.view style.sheetButton) |> Element.column [ Element.width <| Element.fill ] |> Element.el (style.sheet @@ -269,7 +267,11 @@ view attributes { search, title, onChangedSidebar, menu, actions, deviceClass, d Just Search -> case search of Just { onChange, text, label } -> - Input.text style.search + Input.text + (style.searchFill + ++ [ Element.width <| Element.fill + ] + ) { onChange = onChange , text = text , placeholder = @@ -297,33 +299,22 @@ view attributes { search, title, onChangedSidebar, menu, actions, deviceClass, d , Element.inFront snackbar ] , if (layout.active /= Nothing) || (dialog /= Nothing) then - Widget.scrim - { onDismiss = - Just <| - case dialog of - Just { onDismiss } -> - onDismiss - |> Maybe.withDefault - (Nothing - |> onChangedSidebar - ) + (Element.height <| Element.px <| window.height) + :: (case dialog of + Just dialogConfig -> + Widget.modal dialogConfig - Nothing -> - Nothing - |> onChangedSidebar - , content = Element.none - } + Nothing -> + Widget.modal + { onDismiss = + Nothing + |> onChangedSidebar + |> Just + , content = sheet + } + ) else [] - , [ Element.inFront sheet - , Element.inFront <| - case dialog of - Just element -> - element.content - - Nothing -> - Element.none - ] ] ) diff --git a/src/Widget.elm b/src/Widget.elm index 65e0abd..05227c6 100644 --- a/src/Widget.elm +++ b/src/Widget.elm @@ -1,11 +1,11 @@ module Widget exposing - ( select, multiSelect, collapsable, carousel, scrim, tab - , dialog + ( select, multiSelect, collapsable, carousel, modal, tab, dialog + , Dialog, MultiSelect, Select, selectButton ) {-| This module contains functions for displaying data. -@docs select, multiSelect, collapsable, carousel, scrim, tab +@docs select, multiSelect, collapsable, carousel, modal, tab, dialog # DEPRECATED @@ -20,67 +20,97 @@ import Element.Background as Background import Element.Events as Events import Element.Input as Input import Set exposing (Set) +import Widget.Button as Button exposing (Button, ButtonStyle, TextButton) + + +type alias Select msg = + { selected : Maybe Int + , options : + List + { text : String + , icon : Element Never + } + , onSelect : Int -> Maybe msg + } + + +type alias MultiSelect msg = + { selected : Set Int + , options : + List + { text : String + , icon : Element Never + } + , onSelect : Int -> Maybe msg + } + + +type alias Dialog msg = + { title : Maybe String + , body : Element msg + , accept : Maybe (TextButton msg) + , dismiss : Maybe (TextButton msg) + } + + +{-| A simple button +-} +selectButton : + ButtonStyle msg + -> ( Bool, Button msg ) + -> Element msg +selectButton style ( selected, b ) = + b + |> Button.view + { style + | container = + style.container + ++ (if selected then + style.active + + else + [] + ) + } {-| Selects one out of multiple options. This can be used for radio buttons or Menus. -} select : - { selected : Maybe a - , options : List a - , label : a -> Element msg - , onChange : a -> msg - , attributes : Bool -> List (Attribute msg) - } - -> List (Element msg) -select { selected, options, label, onChange, attributes } = + Select msg + -> List ( Bool, Button msg ) +select { selected, options, onSelect } = options - |> List.map - (\a -> - Input.button (attributes (selected == Just a)) - { onPress = a |> onChange |> Just - , label = label a - } + |> List.indexedMap + (\i a -> + ( selected == Just i + , { onPress = i |> onSelect + , text = a.text + , icon = a.icon + } + ) ) {-| Selects multible options. This can be used for checkboxes. -} multiSelect : - { selected : Set comparable - , options : List comparable - , label : comparable -> Element msg - , onChange : comparable -> msg - , attributes : Bool -> List (Attribute msg) - } - -> List (Element msg) -multiSelect { selected, options, label, onChange, attributes } = + MultiSelect msg + -> List ( Bool, Button msg ) +multiSelect { selected, options, onSelect } = options - |> List.map - (\a -> - Input.button (attributes (selected |> Set.member a)) - { onPress = a |> onChange |> Just - , label = - label a - } + |> List.indexedMap + (\i a -> + ( selected |> Set.member i + , { onPress = i |> onSelect + , text = a.text + , icon = a.icon + } + ) ) {-| Some collapsable content. - - Widget.collapsable - {onToggle = ToggleCollapsable - ,isCollapsed = model.isCollapsed - ,label = Element.row Grid.compact - [ Element.html <| - if model.isCollapsed then - Heroicons.cheveronRight [ Attributes.width 20] - else - Heroicons.cheveronDown [ Attributes.width 20] - , Element.el Heading.h4 <|Element.text <| "Title" - ] - ,content = Element.text <| "Hello World" - } - -} collapsable : { onToggle : Bool -> msg @@ -107,81 +137,92 @@ collapsable { onToggle, isCollapsed, label, content } = {-| Displayes a list of contents in a tab -} tab : - List (Attribute msg) - -> - { selected : a - , options : List a - , onChange : a -> msg - , label : a -> Element msg - , content : a -> Element msg - , attributes : Bool -> List (Attribute msg) - } + { style + | tabButton : ButtonStyle msg + , tabRow : List (Attribute msg) + } + -> Select msg + -> (Maybe Int -> Element msg) -> Element msg -tab atts { selected, options, onChange, label, content, attributes } = - [ select - { selected = Just selected - , options = options - , label = label - , onChange = onChange - , attributes = attributes - } - |> Element.row atts - , content selected +tab style options content = + [ options + |> select + |> List.map (selectButton style.tabButton) + |> Element.row style.tabRow + , options.selected + |> content ] |> Element.column [] -{-| DEPRECATED. Use scrim instead. --} dialog : - { onDismiss : Maybe msg - , content : Element msg + { containerColumn : List (Attribute msg) + , title : List (Attribute msg) + , buttonRow : List (Attribute msg) + , accept : ButtonStyle msg + , dismiss : ButtonStyle msg } - -> Element msg -dialog { onDismiss, content } = - content - |> Element.el - [ Element.centerX - , Element.centerY - ] - |> Element.el - ([ Element.width <| Element.fill - , Element.height <| Element.fill - , Background.color <| Element.rgba255 0 0 0 0.5 - ] - ++ (onDismiss - |> Maybe.map (Events.onClick >> List.singleton) - |> Maybe.withDefault [] - ) + -> Dialog msg + -> { onDismiss : Maybe msg, content : Element msg } +dialog style { title, body, accept, dismiss } = + { onDismiss = + case ( accept, dismiss ) of + ( Nothing, Nothing ) -> + Nothing + + ( Nothing, Just { onPress } ) -> + onPress + + ( Just _, _ ) -> + Nothing + , content = + Element.column + (style.containerColumn + ++ [ Element.centerX + , Element.centerY + ] ) + [ title + |> Maybe.map + (Element.text + >> Element.el style.title + ) + |> Maybe.withDefault Element.none + , body + , Element.row + (style.buttonRow + ++ [ Element.alignRight + , Element.width <| Element.shrink + ] + ) + (case ( accept, dismiss ) of + ( Just acceptButton, Nothing ) -> + acceptButton + |> Button.viewTextOnly style.accept + |> List.singleton - -{-| A scrim to block the interaction with the site. Usefull for modals and side panels - -If the scrim is clicked a message may be send. Also one can place an element infront. - - Framework.Layout - [ Wiget.scrim - { onDismiss = Just <| ToggleDialog False - , content = - [ "This is a dialog window" - |> Element.text - , Input.button [] - {onPress = Just <| ToggleDialog False - , label = Element.text "Ok" - } - ] - |> Element.column - [ Element.centerX - , Element.centerY + ( Just acceptButton, Just dismissButton ) -> + [ dismissButton + |> Button.viewTextOnly style.dismiss + , acceptButton + |> Button.viewTextOnly style.accept ] - } + + _ -> + [] + ) ] + } + + +{-| A modal. + +NOTE: to stop the screen from scrolling, just set the height of the layout to the height of the screen. -} -scrim : { onDismiss : Maybe msg, content : Element msg } -> List (Attribute msg) -scrim { onDismiss, content } = - Element.el +modal : { onDismiss : Maybe msg, content : Element msg } -> List (Attribute msg) +modal { onDismiss, content } = + [ Element.el ([ Element.width <| Element.fill , Element.height <| Element.fill , Background.color <| Element.rgba255 0 0 0 0.5 @@ -193,7 +234,8 @@ scrim { onDismiss, content } = ) content |> Element.inFront - |> List.singleton + , Element.clip + ] {-| A Carousel circles through a non empty list of contents. diff --git a/src/Widget/Button.elm b/src/Widget/Button.elm new file mode 100644 index 0000000..6be1e10 --- /dev/null +++ b/src/Widget/Button.elm @@ -0,0 +1,82 @@ +module Widget.Button exposing + ( Button + , ButtonStyle + , TextButton + , view + , viewIconOnly + , viewTextOnly + ) + +import Element exposing (Attribute, Element) +import Element.Input as Input +import Element.Region as Region + + +type alias Button msg = + { text : String + , icon : Element Never + , onPress : Maybe msg + } + + +type alias TextButton msg = + { text : String + , onPress : Maybe msg + } + + +type alias ButtonStyle msg = + { container : List (Attribute msg) + , disabled : List (Attribute msg) + , label : List (Attribute msg) + , active : List (Attribute msg) + } + + +viewIconOnly : ButtonStyle msg -> Button msg -> Element msg +viewIconOnly style { onPress, text, icon } = + Input.button + (style.container + ++ (if onPress == Nothing then + style.disabled + + else + [] + ) + ++ [ Region.description text ] + ) + { onPress = onPress + , label = + icon |> Element.map never + } + + +viewTextOnly : ButtonStyle msg -> TextButton msg -> Element msg +viewTextOnly style { onPress, text } = + view style + { onPress = onPress + , text = text + , icon = Element.none + } + + +{-| The first argument can be used to define the spacing between the icon and the text +-} +view : ButtonStyle msg -> Button msg -> Element msg +view style { onPress, text, icon } = + Input.button + (style.container + ++ (if onPress == Nothing then + style.disabled + + else + [] + ) + ) + { onPress = onPress + , label = + Element.row style.label + [ icon |> Element.map never + , Element.text text + ] + } diff --git a/src/Widget/ScrollingNav.elm b/src/Widget/ScrollingNav.elm index dab0dff..3c0f141 100644 --- a/src/Widget/ScrollingNav.elm +++ b/src/Widget/ScrollingNav.elm @@ -1,7 +1,7 @@ module Widget.ScrollingNav exposing - ( Model, init, view, viewSections, current + ( Model, init, view, current , jumpTo, syncPositions - , getPos, jumpToWithOffset, setPos + , getPos, jumpToWithOffset, setPos, toSelect ) {-| The Scrolling Nav is a navigation bar thats updates while you scroll through @@ -20,16 +20,18 @@ the page. Clicking on a navigation button will scroll directly to that section. -} import Browser.Dom as Dom -import Element exposing (Attribute, Element) +import Element exposing (Element) import Framework.Grid as Grid import Html.Attributes as Attributes import IntDict exposing (IntDict) import Task exposing (Task) +import Widget exposing (Select) {-| -} type alias Model section = - { labels : section -> String + { toString : section -> String + , fromString : String -> Maybe section , positions : IntDict String , arrangement : List section , scrollPos : Int @@ -39,13 +41,15 @@ type alias Model section = {-| The intial state include the labels and the arrangement of the sections -} init : - { labels : section -> String + { toString : section -> String + , fromString : String -> Maybe section , arrangement : List section , toMsg : Result Dom.Error (Model section -> Model section) -> msg } -> ( Model section, Cmd msg ) -init { labels, arrangement, toMsg } = - { labels = labels +init { toString, fromString, arrangement, toMsg } = + { toString = toString + , fromString = fromString , positions = IntDict.empty , arrangement = arrangement , scrollPos = 0 @@ -82,8 +86,8 @@ jumpTo : } -> Model section -> Cmd msg -jumpTo { section, onChange } { labels } = - Dom.getElement (section |> labels) +jumpTo { section, onChange } { toString } = + Dom.getElement (section |> toString) |> Task.andThen (\{ element } -> Dom.setViewport 0 element.y @@ -100,8 +104,8 @@ jumpToWithOffset : } -> Model section -> Cmd msg -jumpToWithOffset { offset, section, onChange } { labels } = - Dom.getElement (section |> labels) +jumpToWithOffset { offset, section, onChange } { toString } = + Dom.getElement (section |> toString) |> Task.andThen (\{ element } -> Dom.setViewport 0 (element.y - offset) @@ -111,11 +115,11 @@ jumpToWithOffset { offset, section, onChange } { labels } = {-| -} syncPositions : Model section -> Task Dom.Error (Model section -> Model section) -syncPositions { labels, arrangement } = +syncPositions { toString, arrangement } = arrangement |> List.map (\label -> - Dom.getElement (labels label) + Dom.getElement (toString label) |> Task.map (\x -> ( x.element.y |> round @@ -133,7 +137,7 @@ syncPositions { labels, arrangement } = | positions = model.positions |> IntDict.insert pos - (label |> model.labels) + (label |> model.toString) } ) m @@ -151,27 +155,29 @@ current fromString { positions, scrollPos } = |> Maybe.andThen fromString -{-| -} -viewSections : - { label : String -> Element msg - , fromString : String -> Maybe section - , onSelect : section -> msg - , attributes : Bool -> List (Attribute msg) - } - -> Model section - -> - { selected : Maybe section - , options : List section - , label : section -> Element msg - , onChange : section -> msg - , attributes : Bool -> List (Attribute msg) - } -viewSections { label, fromString, onSelect, attributes } ({ arrangement, labels } as model) = - { selected = model |> current fromString - , options = arrangement - , label = \elem -> label (elem |> labels) - , onChange = onSelect - , attributes = attributes +toSelect : (Int -> Maybe msg) -> Model section -> Select msg +toSelect onSelect ({ arrangement, toString, fromString } as model) = + { selected = + arrangement + |> List.indexedMap (\i s -> ( i, s )) + |> List.filterMap + (\( i, s ) -> + if Just s == current fromString model then + Just i + + else + Nothing + ) + |> List.head + , options = + arrangement + |> List.map + (\s -> + { text = toString s + , icon = Element.none + } + ) + , onSelect = onSelect } @@ -180,13 +186,13 @@ view : (section -> Element msg) -> Model section -> Element msg -view asElement { labels, arrangement } = +view asElement { toString, arrangement } = arrangement |> List.map (\header -> Element.el [ header - |> labels + |> toString |> Attributes.id |> Element.htmlAttribute , Element.width <| Element.fill diff --git a/src/Widget/Snackbar.elm b/src/Widget/Snackbar.elm index aa2eadc..464f3fd 100644 --- a/src/Widget/Snackbar.elm +++ b/src/Widget/Snackbar.elm @@ -1,6 +1,7 @@ module Widget.Snackbar exposing ( Model, init, current, timePassed , insert, insertFor, dismiss + , Message, view ) {-| A [snackbar](https://material.io/components/snackbars/) shows notification, one at a time. @@ -17,7 +18,16 @@ module Widget.Snackbar exposing -} +import Element exposing (Attribute, Element) import Queue exposing (Queue) +import Widget +import Widget.Button as Button exposing (ButtonStyle, TextButton) + + +type alias Message msg = + { text : String + , button : Maybe (TextButton msg) + } {-| A snackbar has a queue of Notifications, each with the amount of ms the message should be displayed @@ -92,3 +102,31 @@ timePassed ms model = current : Model a -> Maybe a current model = model.current |> Maybe.map Tuple.first + + +view : + { row : List (Attribute msg) + , text : List (Attribute msg) + , button : ButtonStyle msg + } + -> (a -> Message msg) + -> Model a + -> Maybe (Element msg) +view style toMessage model = + model + |> current + |> Maybe.map + (toMessage + >> (\{ text, button } -> + [ text + |> Element.text + |> List.singleton + |> Element.paragraph style.text + , button + |> Maybe.map + (Button.viewTextOnly style.button) + |> Maybe.withDefault Element.none + ] + |> Element.row style.row + ) + ) From 27dff31fb9d1b8816a9c76ec7fe0ca20933fa685 Mon Sep 17 00:00:00 2001 From: Lucas Payr Date: Wed, 22 Apr 2020 13:14:55 +0200 Subject: [PATCH 03/14] Added unstable homepage --- docs/unstable/index.html | 17994 +++++++++++++++++++++++++++++ example/src/Component.elm | 89 +- example/src/Example.elm | 20 +- example/src/Stateless.elm | 111 +- src/Widget.elm | 88 +- src/Widget/FilterMultiSelect.elm | 108 + src/Widget/Snackbar.elm | 1 - 7 files changed, 18370 insertions(+), 41 deletions(-) create mode 100644 docs/unstable/index.html create mode 100644 src/Widget/FilterMultiSelect.elm diff --git a/docs/unstable/index.html b/docs/unstable/index.html new file mode 100644 index 0000000..7346cb7 --- /dev/null +++ b/docs/unstable/index.html @@ -0,0 +1,17994 @@ + + + + + Example + + + + + +

+
+
+
+
+
\ No newline at end of file
diff --git a/example/src/Component.elm b/example/src/Component.elm
index ea6dab8..f1a527f 100644
--- a/example/src/Component.elm
+++ b/example/src/Component.elm
@@ -4,6 +4,8 @@ import Browser
 import Element exposing (Color, Element)
 import Element.Background as Background
 import Element.Input as Input
+import Element.Border as Border
+import Element.Font as Font
 import Framework
 import Framework.Button as Button
 import Framework.Card as Card
@@ -19,22 +21,32 @@ import Html.Attributes as Attributes
 import Set exposing (Set)
 import Time
 import Widget
+import Widget.Button as Button exposing (ButtonStyle)
 import Widget.FilterSelect as FilterSelect
+import Widget.FilterMultiSelect as FilterMultiSelect
 import Widget.ScrollingNav as ScrollingNav
 import Widget.Snackbar as Snackbar
 import Widget.ValidatedInput as ValidatedInput
 
-
 type alias Model =
     { filterSelect : FilterSelect.Model
+    , filterMultiSelect : FilterMultiSelect.Model
     , validatedInput : ValidatedInput.Model () ( String, String )
     }
 
 
 type Msg
     = FilterSelectSpecific FilterSelect.Msg
+    | FilterMultiSelectSpecific FilterMultiSelect.Msg
     | ValidatedInputSpecific ValidatedInput.Msg
 
+chipButton : ButtonStyle msg
+chipButton =
+    { container = Tag.simple
+    , disabled = []
+    , label = Grid.simple
+    , active = Color.primary
+    }
 
 init : Model
 init =
@@ -56,6 +68,24 @@ init =
         ]
             |> Set.fromList
             |> FilterSelect.init
+    , filterMultiSelect =
+        [ "Apple"
+        , "Kiwi"
+        , "Strawberry"
+        , "Pineapple"
+        , "Mango"
+        , "Grapes"
+        , "Watermelon"
+        , "Orange"
+        , "Lemon"
+        , "Blueberry"
+        , "Grapefruit"
+        , "Coconut"
+        , "Cherry"
+        , "Banana"
+        ]
+            |> Set.fromList
+            |> FilterMultiSelect.init
     , validatedInput =
         ValidatedInput.init
             { value = ( "John", "Doe" )
@@ -83,6 +113,13 @@ update msg model =
             , Cmd.none
             )
 
+        FilterMultiSelectSpecific m ->
+            ( { model
+                | filterMultiSelect = model.filterMultiSelect |> FilterMultiSelect.update m
+              }
+            , Cmd.none
+            )
+
         ValidatedInputSpecific m ->
             ( { model
                 | validatedInput = model.validatedInput |> ValidatedInput.update m
@@ -129,6 +166,55 @@ filterSelect model =
                     ]
     )
 
+filterMultiSelect : FilterMultiSelect.Model -> (String,Element Msg)
+filterMultiSelect model =
+    ( "Filter Multi Select"
+    ,   [ FilterMultiSelect.viewInput model
+            { msgMapper = FilterMultiSelectSpecific
+            , placeholder =
+                Just <|
+                    Input.placeholder [] <|
+                        Element.text <|
+                            "Fruit"
+            , label = "Fruit"
+            , toChip = \string ->
+                { text = string
+                , onPress = Just <| FilterMultiSelectSpecific <| FilterMultiSelect.ToggleSelected <| string
+                , icon = Element.none
+                }
+            }
+            |> Widget.textInput
+                { chip = chipButton
+                , chipsRow = 
+                    [ Element.width <| Element.shrink
+                    , Element.spacing <| 4 ]
+                , containerRow = 
+                    Button.simple
+                    ++ Color.light
+                    ++ [ Border.color <| Element.rgb255 186 189 182
+                        , Font.alignLeft
+                        , Element.padding 8
+                        , Element.height <| Element.px <|42
+                        ]
+                    ++ Grid.simple
+                , input =
+                    Color.light
+                    ++ [Element.padding 0]
+                }
+
+        , model
+            |> FilterMultiSelect.viewOptions
+            |> List.map
+                (\string ->
+                    Input.button (Button.simple ++ Tag.simple)
+                        { onPress = Just <| FilterMultiSelectSpecific <| FilterMultiSelect.ToggleSelected <| string
+                        , label = Element.text string
+                        }
+                )
+            |> Element.wrappedRow [ Element.spacing 10 ]
+        ]
+            |> Element.column Grid.simple
+    )
 
 validatedInput : ValidatedInput.Model () ( String, String ) -> (String,Element Msg)
 validatedInput model =
@@ -162,6 +248,7 @@ view msgMapper model =
     , description = "Components have a Model, an Update- and sometimes even a Subscription-function. It takes some time to set them up correctly."
     , items =
         [ filterSelect model.filterSelect
+        , filterMultiSelect model.filterMultiSelect
         , validatedInput model.validatedInput 
         ]
             |> List.map (Tuple.mapSecond (Element.map msgMapper) )
diff --git a/example/src/Example.elm b/example/src/Example.elm
index 332b723..0a0b58a 100644
--- a/example/src/Example.elm
+++ b/example/src/Example.elm
@@ -127,7 +127,8 @@ style =
             Card.simple 
             ++ Color.dark
             ++ Grid.simple
-            ++ [ Element.paddingXY 8 6]
+            ++ [ Element.paddingXY 8 6
+                , Element.height <| Element.px <|54]
         , button = 
             { label = Grid.simple
             , container = Button.simple ++ Color.dark
@@ -137,6 +138,23 @@ style =
         , text = [Element.paddingXY 8 0]
         }
     , layout = Framework.responsiveLayout
+    {--\a w ->
+        Html.div []
+        [ Html.node "meta"
+            [ Attributes.attribute "name" "viewport"
+            , Attributes.attribute "content" "width=device-width, initial-scale=1.0"
+            ]
+            []
+        , Element.layoutWith
+            {options = (Element.focusStyle
+                { borderColor = Nothing
+                , backgroundColor = Nothing
+                , shadow = Nothing
+                }
+                |> List.singleton)
+            }
+         (Framework.layoutAttributes ++ a) <| w
+        ]--}
     , header =
         Framework.container
             ++ Color.dark
diff --git a/example/src/Stateless.elm b/example/src/Stateless.elm
index d946a8c..3dd9347 100644
--- a/example/src/Stateless.elm
+++ b/example/src/Stateless.elm
@@ -21,6 +21,7 @@ import Widget.Button as Button exposing (ButtonStyle)
 import Layout exposing (Part(..))
 import Icons
 import Widget
+import Element.Font as Font
 
 buttonStyle : ButtonStyle msg
 buttonStyle =
@@ -38,13 +39,23 @@ tabButtonStyle=
     , active = Color.primary
     }
 
+chipButton : ButtonStyle msg
+chipButton =
+    { container = Tag.simple
+    , disabled = []
+    , label = Grid.simple
+    , active = Color.primary
+    }
+
 type alias Model =
     { selected : Maybe Int
     , multiSelected : Set Int
+    , chipTextInput : Set String
     , isCollapsed : Bool
     , carousel : Int
     , tab : Maybe Int
     , button : Bool
+    , textInput : String
     }
 
 
@@ -52,19 +63,24 @@ type Msg
     = ChangedSelected Int
     | ChangedMultiSelected Int
     | ToggleCollapsable Bool
+    | ToggleTextInputChip String
     | ChangedTab Int
     | SetCarousel Int
     | ToggleButton Bool
+    | SetTextInput String
+    | Idle
 
 
 init : Model
 init =
     { selected = Nothing
     , multiSelected = Set.empty
+    , chipTextInput = Set.empty
     , isCollapsed = False
     , carousel = 0
     , tab = Just 1
     , button = True
+    , textInput = ""
     }
 
 
@@ -98,6 +114,18 @@ update msg model =
               }
             , Cmd.none
             )
+        
+        ToggleTextInputChip string ->
+            ( { model
+                | chipTextInput =
+                    model.chipTextInput |>
+                        if model.chipTextInput |> Set.member string then
+                            Set.remove string
+                        else
+                            Set.insert string
+                }
+            , Cmd.none
+            )
 
         SetCarousel int ->
             ( if (int < 0) || (int > 3) then
@@ -115,6 +143,12 @@ update msg model =
         
         ToggleButton bool ->
             ( { model | button = bool }, Cmd.none )
+        
+        SetTextInput string ->
+            ( {model | textInput = string },Cmd.none)
+
+        Idle ->
+            ( model, Cmd.none)
 
 
 select : Model -> (String,Element Msg)
@@ -187,29 +221,35 @@ multiSelect model =
 collapsable : Model -> (String,Element Msg)
 collapsable model =
     ( "Collapsable"
-    , Widget.collapsable
-        { onToggle = ToggleCollapsable
+    ,   { onToggle = ToggleCollapsable
         , isCollapsed = model.isCollapsed
         , label =
-            Element.row Grid.compact
+            Element.row (Grid.simple ++ [Element.width<| Element.fill])
                 [ Element.html <|
                     if model.isCollapsed then
                         Heroicons.cheveronRight [ Attributes.width 20 ]
 
                     else
                         Heroicons.cheveronDown [ Attributes.width 20 ]
-                , Element.el Heading.h4 <| Element.text <| "Title"
+                , Element.text <| "Title"
                 ]
         , content = Element.text <| "Hello World"
         }
+        |>Widget.collapsable
+        { containerColumn = Card.simple ++ Grid.simple
+            ++ [ Element.padding 8 ]
+        , button = []
+        }
+        
     )
 
 tab : Model -> (String,Element Msg)
 tab model =
     ( "Tab"
     , Widget.tab 
-            { tabButton = tabButtonStyle
-            , tabRow = Grid.simple
+            { button = tabButtonStyle
+            , optionRow = Grid.simple
+            , containerColumn = Grid.compact
             } 
             { selected = model.tab
             , options = [ 1, 2, 3 ]
@@ -315,6 +355,64 @@ iconButton model =
     ] |> Element.column Grid.simple
     )
 
+textInput : Model -> (String,Element Msg)
+textInput model =
+    ( "Chip Text Input"
+    ,   [ { chips =
+            model.chipTextInput
+            |> Set.toList
+            |> List.map (\string ->
+                    { icon = Element.none
+                    , text = string
+                    , onPress =
+                        string
+                            |> ToggleTextInputChip
+                            |> Just
+                    }
+                )
+        , text = model.textInput
+        , placeholder = Nothing
+        , label = "Chips"
+        , onChange = SetTextInput
+        }
+            |> Widget.textInput
+            { chip = chipButton
+            , chipsRow = 
+                [ Element.width <| Element.shrink
+                , Element.spacing <| 4 ]
+            , containerRow = 
+                Button.simple
+                ++ Color.light
+                ++ [ Border.color <| Element.rgb255 186 189 182
+                    , Font.alignLeft
+                    , Element.padding 8
+                    , Element.height <| Element.px <|42
+                    ]
+                ++ Grid.simple
+            , input =
+                Color.light
+                ++ [Element.padding 0]
+            }
+        , model.chipTextInput
+            |> Set.diff
+                (["A","B","C"]
+                    |> Set.fromList
+                )
+            |> Set.toList
+            |> List.map
+                (\string ->
+                    Input.button (Button.simple ++ Tag.simple)
+                        { onPress =
+                            string
+                            |> ToggleTextInputChip
+                            |> Just
+                        , label = Element.text string
+                        }
+                )
+            |> Element.wrappedRow [ Element.spacing 10 ]
+        ] |> Element.column Grid.simple
+    )
+
 view : 
     { msgMapper : Msg -> msg
     , showDialog : msg
@@ -336,5 +434,6 @@ view { msgMapper, showDialog, changedSheet } model =
         , carousel model |> Tuple.mapSecond (Element.map msgMapper)
         , tab model |> Tuple.mapSecond (Element.map msgMapper)
         , dialog showDialog model
+        , textInput model |> Tuple.mapSecond (Element.map msgMapper)
         ]
     }
diff --git a/src/Widget.elm b/src/Widget.elm
index 05227c6..53e52f6 100644
--- a/src/Widget.elm
+++ b/src/Widget.elm
@@ -1,24 +1,19 @@
 module Widget exposing
     ( select, multiSelect, collapsable, carousel, modal, tab, dialog
-    , Dialog, MultiSelect, Select, selectButton
+    , Dialog, Select, selectButton, textInput
     )
 
 {-| This module contains functions for displaying data.
 
 @docs select, multiSelect, collapsable, carousel, modal, tab, dialog
 
-
-# DEPRECATED
-
-@docs dialog
-
 -}
 
 import Array exposing (Array)
 import Element exposing (Attribute, Element)
 import Element.Background as Background
 import Element.Events as Events
-import Element.Input as Input
+import Element.Input as Input exposing (Placeholder)
 import Set exposing (Set)
 import Widget.Button as Button exposing (Button, ButtonStyle, TextButton)
 
@@ -34,17 +29,6 @@ type alias Select msg =
     }
 
 
-type alias MultiSelect msg =
-    { selected : Set Int
-    , options :
-        List
-            { text : String
-            , icon : Element Never
-            }
-    , onSelect : Int -> Maybe msg
-    }
-
-
 type alias Dialog msg =
     { title : Maybe String
     , body : Element msg
@@ -95,7 +79,14 @@ select { selected, options, onSelect } =
 {-| Selects multible options. This can be used for checkboxes.
 -}
 multiSelect :
-    MultiSelect msg
+    { selected : Set Int
+    , options :
+        List
+            { text : String
+            , icon : Element Never
+            }
+    , onSelect : Int -> Maybe msg
+    }
     -> List ( Bool, Button msg )
 multiSelect { selected, options, onSelect } =
     options
@@ -110,18 +101,51 @@ multiSelect { selected, options, onSelect } =
             )
 
 
+{-| -}
+textInput :
+    { chip : ButtonStyle msg
+    , containerRow : List (Attribute msg)
+    , chipsRow : List (Attribute msg)
+    , input : List (Attribute msg)
+    }
+    ->
+        { chips : List (Button msg)
+        , text : String
+        , placeholder : Maybe (Placeholder msg)
+        , label : String
+        , onChange : String -> msg
+        }
+    -> Element msg
+textInput style { chips, placeholder, label, text, onChange } =
+    Element.row style.containerRow
+        [ chips
+            |> List.map (Button.view style.chip)
+            |> Element.row style.chipsRow
+        , Input.text style.input
+            { onChange = onChange
+            , text = text
+            , placeholder = placeholder
+            , label = Input.labelHidden label
+            }
+        ]
+
+
 {-| Some collapsable content.
 -}
 collapsable :
-    { onToggle : Bool -> msg
-    , isCollapsed : Bool
-    , label : Element msg
-    , content : Element msg
+    { containerColumn : List (Attribute msg)
+    , button : List (Attribute msg)
     }
+    ->
+        { onToggle : Bool -> msg
+        , isCollapsed : Bool
+        , label : Element msg
+        , content : Element msg
+        }
     -> Element msg
-collapsable { onToggle, isCollapsed, label, content } =
-    Element.column [] <|
-        [ Input.button []
+collapsable style { onToggle, isCollapsed, label, content } =
+    Element.column style.containerColumn <|
+        [ Input.button style.button
             { onPress = Just <| onToggle <| not isCollapsed
             , label = label
             }
@@ -137,9 +161,9 @@ collapsable { onToggle, isCollapsed, label, content } =
 {-| Displayes a list of contents in a tab
 -}
 tab :
-    { style
-        | tabButton : ButtonStyle msg
-        , tabRow : List (Attribute msg)
+    { button : ButtonStyle msg
+    , optionRow : List (Attribute msg)
+    , containerColumn : List (Attribute msg)
     }
     -> Select msg
     -> (Maybe Int -> Element msg)
@@ -147,12 +171,12 @@ tab :
 tab style options content =
     [ options
         |> select
-        |> List.map (selectButton style.tabButton)
-        |> Element.row style.tabRow
+        |> List.map (selectButton style.button)
+        |> Element.row style.optionRow
     , options.selected
         |> content
     ]
-        |> Element.column []
+        |> Element.column style.containerColumn
 
 
 dialog :
diff --git a/src/Widget/FilterMultiSelect.elm b/src/Widget/FilterMultiSelect.elm
new file mode 100644
index 0000000..da4f13e
--- /dev/null
+++ b/src/Widget/FilterMultiSelect.elm
@@ -0,0 +1,108 @@
+module Widget.FilterMultiSelect exposing (Model, Msg(..), init, update, viewInput, viewOptions)
+
+{-|
+
+@docs Model, Msg, init, update, viewInput, viewOptions
+
+-}
+
+import Element.Input exposing (Placeholder)
+import Set exposing (Set)
+import Widget.Button exposing (Button)
+
+
+{-| The Model containing the raw value, the selected value and all the possible options.
+-}
+type alias Model =
+    { raw : String
+    , selected : Set String
+    , options : Set String
+    }
+
+
+{-| The Msg is exposed by design. You can unselect by sending `Selected Nothing`.
+-}
+type Msg
+    = ChangedRaw String
+    | ToggleSelected String
+
+
+{-| The initial state contains the set of possible options.
+-}
+init : Set String -> Model
+init options =
+    { raw = ""
+    , selected = Set.empty
+    , options = options
+    }
+
+
+{-| Updates the Model
+-}
+update : Msg -> Model -> Model
+update msg model =
+    case msg of
+        ChangedRaw string ->
+            { model
+                | raw = string
+            }
+
+        ToggleSelected string ->
+            if model.selected |> Set.member string then
+                { model
+                    | selected = model.selected |> Set.remove string
+                }
+
+            else
+                { model
+                    | selected = model.selected |> Set.insert string
+                    , raw = ""
+                }
+
+
+{-| A wrapper around Input.text.
+-}
+viewInput :
+    Model
+    ->
+        { msgMapper : Msg -> msg
+        , placeholder : Maybe (Placeholder msg)
+        , label : String
+        , toChip : String -> Button msg
+        }
+    ->
+        { chips : List (Button msg)
+        , text : String
+        , placeholder : Maybe (Placeholder msg)
+        , label : String
+        , onChange : String -> msg
+        }
+viewInput model { msgMapper, placeholder, label, toChip } =
+    { chips =
+        model.selected
+            |> Set.toList
+            |> List.map toChip
+    , text = model.raw
+    , placeholder = placeholder
+    , label = label
+    , onChange = ChangedRaw >> msgMapper
+    }
+
+
+{-| Returns a List of all options that matches the filter.
+-}
+viewOptions : Model -> List String
+viewOptions { raw, options, selected } =
+    if raw == "" then
+        []
+
+    else
+        options
+            |> Set.filter (String.toUpper >> String.contains (raw |> String.toUpper))
+            |> Set.filter
+                (\string ->
+                    selected
+                        |> Set.member string
+                        |> not
+                )
+            |> Set.toList
diff --git a/src/Widget/Snackbar.elm b/src/Widget/Snackbar.elm
index 464f3fd..a4d90d0 100644
--- a/src/Widget/Snackbar.elm
+++ b/src/Widget/Snackbar.elm
@@ -20,7 +20,6 @@ module Widget.Snackbar exposing
 
 import Element exposing (Attribute, Element)
 import Queue exposing (Queue)
-import Widget
 import Widget.Button as Button exposing (ButtonStyle, TextButton)
 
 

From be011f7acc1e661b4055de6df8d6fb29b14d9ebd Mon Sep 17 00:00:00 2001
From: Lucas Payr 
Date: Wed, 22 Apr 2020 20:55:02 +0200
Subject: [PATCH 04/14] collecting all styles into one type

---
 example/src/Component.elm  |  28 +----
 example/src/Data/Style.elm | 222 +++++++++++++++++++++++++++++++++++++
 example/src/Example.elm    | 145 +-----------------------
 example/src/Stateless.elm  |  56 ++--------
 src/Layout.elm             |   2 +-
 src/{Core => }/Style.elm   |   2 +-
 src/Widget.elm             |  16 ++-
 7 files changed, 249 insertions(+), 222 deletions(-)
 create mode 100644 example/src/Data/Style.elm
 rename src/{Core => }/Style.elm (93%)

diff --git a/example/src/Component.elm b/example/src/Component.elm
index f1a527f..892e2f9 100644
--- a/example/src/Component.elm
+++ b/example/src/Component.elm
@@ -27,6 +27,7 @@ import Widget.FilterMultiSelect as FilterMultiSelect
 import Widget.ScrollingNav as ScrollingNav
 import Widget.Snackbar as Snackbar
 import Widget.ValidatedInput as ValidatedInput
+import Data.Style exposing (style)
 
 type alias Model =
     { filterSelect : FilterSelect.Model
@@ -40,13 +41,7 @@ type Msg
     | FilterMultiSelectSpecific FilterMultiSelect.Msg
     | ValidatedInputSpecific ValidatedInput.Msg
 
-chipButton : ButtonStyle msg
-chipButton =
-    { container = Tag.simple
-    , disabled = []
-    , label = Grid.simple
-    , active = Color.primary
-    }
+
 
 init : Model
 init =
@@ -183,24 +178,7 @@ filterMultiSelect model =
                 , icon = Element.none
                 }
             }
-            |> Widget.textInput
-                { chip = chipButton
-                , chipsRow = 
-                    [ Element.width <| Element.shrink
-                    , Element.spacing <| 4 ]
-                , containerRow = 
-                    Button.simple
-                    ++ Color.light
-                    ++ [ Border.color <| Element.rgb255 186 189 182
-                        , Font.alignLeft
-                        , Element.padding 8
-                        , Element.height <| Element.px <|42
-                        ]
-                    ++ Grid.simple
-                , input =
-                    Color.light
-                    ++ [Element.padding 0]
-                }
+            |> Widget.textInput style.textInput
 
         , model
             |> FilterMultiSelect.viewOptions
diff --git a/example/src/Data/Style.elm b/example/src/Data/Style.elm
new file mode 100644
index 0000000..e341ab0
--- /dev/null
+++ b/example/src/Data/Style.elm
@@ -0,0 +1,222 @@
+module Data.Style exposing (style)
+
+import Widget exposing (TextInputStyle)
+import Widget.Button exposing (ButtonStyle)
+import Style exposing (Style)
+import Element exposing (Attribute)
+import Element.Input as Input
+import Element.Font as Font
+import Element.Border as Border
+import Framework
+import Framework.Button as Button
+import Framework.Card as Card
+import Framework.Color as Color
+import Framework.Grid as Grid
+import Framework.Group as Group
+import Framework.Heading as Heading
+import Framework.Input as Input
+import Framework.Tag as Tag
+import Icons
+
+textButton : ButtonStyle msg
+textButton =
+    { container = Button.simple
+    , label = Grid.simple
+    , disabled = Color.disabled
+    , active = Color.primary
+    }
+
+simpleButton : ButtonStyle msg
+simpleButton =
+    { container = Button.simple ++ Color.primary
+    , label = Grid.simple
+    , disabled = Color.disabled
+    , active = Color.primary
+    }
+
+buttonStyle : ButtonStyle msg
+buttonStyle =
+    { label = [ Element.spacing 8]
+    , container = Button.simple
+    , disabled = Color.disabled
+    , active = Color.primary
+    }
+
+tabButtonStyle :ButtonStyle msg
+tabButtonStyle=
+    { label = [ Element.spacing 8]
+    , container = Button.simple ++ Group.top
+    , disabled = Color.disabled
+    , active = Color.primary
+    }
+
+textInputStyle =
+    { chip = chipButtonStyle
+    , chipsRow = 
+        [ Element.width <| Element.shrink
+        , Element.spacing <| 4
+        , Element.paddingEach
+            { top = 8
+            , left = 0
+            , right = 0
+            , bottom = 8
+            }
+        ]
+    , containerRow = 
+        Button.simple
+        ++ Color.light
+        ++ [ Border.color <| Element.rgb255 186 189 182
+            , Font.alignLeft
+            , Element.paddingXY 8 0
+            , Element.height <| Element.px <|42
+            ]
+        ++ Grid.simple
+    , input =
+        Color.light
+        ++ [ Element.padding 8
+        ]
+    }
+
+
+chipButtonStyle : ButtonStyle msg
+chipButtonStyle =
+    { container = Tag.simple
+    , disabled = []
+    , label = Grid.simple
+    , active = Color.primary
+    }
+
+style : Style
+    { dialog :
+        { containerColumn : List (Attribute msg)
+        , title : List (Attribute msg)
+        , buttonRow : List (Attribute msg)
+        , accept : ButtonStyle msg
+        , dismiss : ButtonStyle msg
+        }
+    , button : ButtonStyle msg
+    , tabButton : ButtonStyle msg
+    , textInput : TextInputStyle msg
+    , chipButton : ButtonStyle msg
+    } msg
+style =
+    { button = buttonStyle
+    , tabButton = tabButtonStyle
+    , textInput = textInputStyle
+    , chipButton = chipButtonStyle
+    , dialog =
+        { containerColumn = 
+            Card.simple
+            ++ Grid.simple
+            ++ [ Element.width <| Element.minimum 280 <| Element.maximum  560 <| Element.fill ]
+        , title = Heading.h3
+        , buttonRow = 
+            Grid.simple ++
+            [ Element.paddingEach
+                { top = 28
+                , bottom = 0
+                , left = 0
+                , right = 0
+                }
+            ]
+        , accept = simpleButton
+        , dismiss = textButton
+        }
+    , snackbar = 
+        { row = 
+            Card.simple 
+            ++ Color.dark
+            ++ Grid.simple
+            ++ [ Element.paddingXY 8 6
+                , Element.height <| Element.px <|54]
+        , button = 
+            { label = Grid.simple
+            , container = Button.simple ++ Color.dark
+            , disabled = Color.disabled
+            , active = Color.primary
+            }
+        , text = [Element.paddingXY 8 0]
+        }
+    , layout = Framework.responsiveLayout
+    {--\a w ->
+        Html.div []
+        [ Html.node "meta"
+            [ Attributes.attribute "name" "viewport"
+            , Attributes.attribute "content" "width=device-width, initial-scale=1.0"
+            ]
+            []
+        , Element.layoutWith
+            {options = (Element.focusStyle
+                { borderColor = Nothing
+                , backgroundColor = Nothing
+                , shadow = Nothing
+                }
+                |> List.singleton)
+            }
+         (Framework.layoutAttributes ++ a) <| w
+        ]--}
+    , header =
+        Framework.container
+            ++ Color.dark
+            ++ [ Element.padding <| 0
+                , Element.height <| Element.px <| 42
+                ]
+    , menuButton =
+        { label = Grid.simple
+        , container = Button.simple ++ Group.center ++ Color.dark
+        , disabled = Color.disabled
+        , active = Color.primary
+        }
+    , sheetButton =
+        { container = 
+            Button.fill
+            ++ Group.center 
+            ++ Color.light
+            ++ [Font.alignLeft]
+        , label = Grid.simple
+        , disabled = Color.disabled
+        , active = Color.primary
+        }
+    , menuTabButton = 
+        { container =
+            [ Element.height <| Element.px <| 42
+            , Border.widthEach 
+                { top = 0,
+                left = 0,
+                right = 0,
+                bottom = 4
+                }
+            , Element.paddingEach
+                { top = 12
+                , left = 8
+                , right = 8
+                , bottom = 4
+                }
+            , Border.color Color.black
+            ]
+        , label = Grid.simple
+        , disabled = Color.disabled
+        , active = [ Border.color Color.turquoise ]
+        }
+    , sheet =
+        Color.light ++ [ Element.width <| Element.maximum 256 <| Element.fill]
+    , menuIcon =
+        Icons.menu |> Element.html |> Element.el []
+    , moreVerticalIcon =
+        Icons.moreVertical |> Element.html |> Element.el []
+    , spacing = 8
+    , title = Heading.h2
+    , searchIcon =
+        Icons.search |> Element.html |> Element.el []
+    , search =
+        Color.simple ++ 
+        Card.large ++
+        [Font.color <| Element.rgb255 0 0 0
+        , Element.padding 6
+        , Element.centerY
+        , Element.alignRight
+        ]
+    , searchFill =
+        Color.light
+        ++ Group.center
+    }
\ No newline at end of file
diff --git a/example/src/Example.elm b/example/src/Example.elm
index 0a0b58a..63b623e 100644
--- a/example/src/Example.elm
+++ b/example/src/Example.elm
@@ -22,7 +22,7 @@ import Html exposing (Html)
 import Html.Attributes as Attributes
 import Icons
 import Layout exposing (Part, Layout)
-import Core.Style exposing (Style)
+import Data.Style exposing (style)
 import Reusable
 import Set exposing (Set)
 import Stateless
@@ -78,149 +78,6 @@ type Msg
     = LoadedSpecific LoadedMsg
     | GotViewport Viewport
 
-textButton : ButtonStyle msg
-textButton =
-    { container = Button.simple
-    , label = Grid.simple
-    , disabled = Color.disabled
-    , active = Color.primary
-    }
-
-simpleButton : ButtonStyle msg
-simpleButton =
-    { container = Button.simple ++ Color.primary
-    , label = Grid.simple
-    , disabled = Color.disabled
-    , active = Color.primary
-    }
-
-style : Style
-    { dialog :
-        { containerColumn : List (Attribute msg)
-        , title : List (Attribute msg)
-        , buttonRow : List (Attribute msg)
-        , accept : ButtonStyle msg
-        , dismiss : ButtonStyle msg
-        }
-    } msg
-style =
-    { dialog =
-        { containerColumn = 
-            Card.simple
-            ++ Grid.simple
-            ++ [ Element.width <| Element.minimum 280 <| Element.maximum  560 <| Element.fill ]
-        , title = Heading.h3
-        , buttonRow = 
-            Grid.simple ++
-            [ Element.paddingEach
-                { top = 28
-                , bottom = 0
-                , left = 0
-                , right = 0
-                }
-            ]
-        , accept = simpleButton
-        , dismiss = textButton
-        }
-    , snackbar = 
-        { row = 
-            Card.simple 
-            ++ Color.dark
-            ++ Grid.simple
-            ++ [ Element.paddingXY 8 6
-                , Element.height <| Element.px <|54]
-        , button = 
-            { label = Grid.simple
-            , container = Button.simple ++ Color.dark
-            , disabled = Color.disabled
-            , active = Color.primary
-            }
-        , text = [Element.paddingXY 8 0]
-        }
-    , layout = Framework.responsiveLayout
-    {--\a w ->
-        Html.div []
-        [ Html.node "meta"
-            [ Attributes.attribute "name" "viewport"
-            , Attributes.attribute "content" "width=device-width, initial-scale=1.0"
-            ]
-            []
-        , Element.layoutWith
-            {options = (Element.focusStyle
-                { borderColor = Nothing
-                , backgroundColor = Nothing
-                , shadow = Nothing
-                }
-                |> List.singleton)
-            }
-         (Framework.layoutAttributes ++ a) <| w
-        ]--}
-    , header =
-        Framework.container
-            ++ Color.dark
-            ++ [ Element.padding <| 0
-                , Element.height <| Element.px <| 42
-                ]
-    , menuButton =
-        { label = Grid.simple
-        , container = Button.simple ++ Group.center ++ Color.dark
-        , disabled = Color.disabled
-        , active = Color.primary
-        }
-    , sheetButton =
-        { container = 
-            Button.fill
-            ++ Group.center 
-            ++ Color.light
-            ++ [Font.alignLeft]
-        , label = Grid.simple
-        , disabled = Color.disabled
-        , active = Color.primary
-        }
-    , menuTabButton = 
-        { container =
-            [ Element.height <| Element.px <| 42
-            , Border.widthEach 
-                { top = 0,
-                left = 0,
-                right = 0,
-                bottom = 4
-                }
-            , Element.paddingEach
-                { top = 12
-                , left = 8
-                , right = 8
-                , bottom = 4
-                }
-            , Border.color Color.black
-            ]
-        , label = Grid.simple
-        , disabled = Color.disabled
-        , active = [ Border.color Color.turquoise ]
-        }
-    , sheet =
-        Color.light ++ [ Element.width <| Element.maximum 256 <| Element.fill]
-    , menuIcon =
-        Icons.menu |> Element.html |> Element.el []
-    , moreVerticalIcon =
-        Icons.moreVertical |> Element.html |> Element.el []
-    , spacing = 8
-    , title = Heading.h2
-    , searchIcon =
-        Icons.search |> Element.html |> Element.el []
-    , search =
-        Color.simple ++ 
-        Card.large ++
-        [Font.color <| Element.rgb255 0 0 0
-        , Element.padding 6
-        , Element.centerY
-        , Element.alignRight
-        ]
-    , searchFill =
-        Color.light
-        ++ Group.center
-    }
-
 
 initialModel : Viewport -> ( LoadedModel, Cmd LoadedMsg )
 initialModel { viewport } =
diff --git a/example/src/Stateless.elm b/example/src/Stateless.elm
index 3dd9347..b77f9a4 100644
--- a/example/src/Stateless.elm
+++ b/example/src/Stateless.elm
@@ -22,30 +22,7 @@ import Layout exposing (Part(..))
 import Icons
 import Widget
 import Element.Font as Font
-
-buttonStyle : ButtonStyle msg
-buttonStyle =
-    { label = [ Element.spacing 8]
-    , container = Button.simple
-    , disabled = Color.disabled
-    , active = Color.primary
-    }
-
-tabButtonStyle :ButtonStyle msg
-tabButtonStyle=
-    { label = [ Element.spacing 8]
-    , container = Button.simple ++ Group.top
-    , disabled = Color.disabled
-    , active = Color.primary
-    }
-
-chipButton : ButtonStyle msg
-chipButton =
-    { container = Tag.simple
-    , disabled = []
-    , label = Grid.simple
-    , active = Color.primary
-    }
+import Data.Style exposing (style)
 
 type alias Model =
     { selected : Maybe Int
@@ -153,6 +130,9 @@ update msg model =
 
 select : Model -> (String,Element Msg)
 select model =
+    let
+        buttonStyle = style.button
+    in
     ( "Select"
     , { selected = model.selected
       , options = 
@@ -188,6 +168,9 @@ select model =
 
 multiSelect : Model -> (String,Element Msg)
 multiSelect model =
+    let
+        buttonStyle = style.button
+    in
     ( "Multi Select"
     , { selected = model.multiSelected
       , options = 
@@ -247,7 +230,7 @@ tab : Model -> (String,Element Msg)
 tab model =
     ( "Tab"
     , Widget.tab 
-            { button = tabButtonStyle
+            { button = style.tabButton
             , optionRow = Grid.simple
             , containerColumn = Grid.compact
             } 
@@ -339,7 +322,7 @@ carousel model =
 iconButton : Model -> (String,Element Msg)
 iconButton model =
     ( "Icon Button"
-    , [Button.view buttonStyle
+    , [Button.view style.button
         { text = "disable me"
         , icon = Icons.slash |> Element.html |> Element.el []        , onPress =
             if model.button then
@@ -347,7 +330,7 @@ iconButton model =
             else
                 Nothing
         }
-    , Button.view buttonStyle
+    , Button.view style.button
         { text = "reset button"
         , icon = Element.none       
         , onPress =  Just <| ToggleButton True
@@ -375,24 +358,7 @@ textInput model =
         , label = "Chips"
         , onChange = SetTextInput
         }
-            |> Widget.textInput
-            { chip = chipButton
-            , chipsRow = 
-                [ Element.width <| Element.shrink
-                , Element.spacing <| 4 ]
-            , containerRow = 
-                Button.simple
-                ++ Color.light
-                ++ [ Border.color <| Element.rgb255 186 189 182
-                    , Font.alignLeft
-                    , Element.padding 8
-                    , Element.height <| Element.px <|42
-                    ]
-                ++ Grid.simple
-            , input =
-                Color.light
-                ++ [Element.padding 0]
-            }
+            |> Widget.textInput style.textInput
         , model.chipTextInput
             |> Set.diff
                 (["A","B","C"]
diff --git a/src/Layout.elm b/src/Layout.elm
index 4af1877..46a5183 100644
--- a/src/Layout.elm
+++ b/src/Layout.elm
@@ -1,10 +1,10 @@
 module Layout exposing (Layout, Part(..), activate, init, queueMessage, timePassed, view)
 
 import Array
-import Core.Style as Style exposing (Style)
 import Element exposing (Attribute, DeviceClass(..), Element)
 import Element.Input as Input
 import Html exposing (Html)
+import Style exposing (Style)
 import Widget exposing (Select)
 import Widget.Button as Button exposing (Button)
 import Widget.Snackbar as Snackbar exposing (Message)
diff --git a/src/Core/Style.elm b/src/Style.elm
similarity index 93%
rename from src/Core/Style.elm
rename to src/Style.elm
index 273fe65..5fa852e 100644
--- a/src/Core/Style.elm
+++ b/src/Style.elm
@@ -1,4 +1,4 @@
-module Core.Style exposing (Style, menuButton, menuIconButton, menuTabButton, sheetButton)
+module Style exposing (Style, menuButton, menuIconButton, menuTabButton, sheetButton)
 
 import Element exposing (Attribute, Element)
 import Html exposing (Html)
diff --git a/src/Widget.elm b/src/Widget.elm
index 53e52f6..2a7e342 100644
--- a/src/Widget.elm
+++ b/src/Widget.elm
@@ -1,6 +1,6 @@
 module Widget exposing
     ( select, multiSelect, collapsable, carousel, modal, tab, dialog
-    , Dialog, Select, selectButton, textInput
+    , Dialog, Select, TextInputStyle, selectButton, textInput
     )
 
 {-| This module contains functions for displaying data.
@@ -37,6 +37,14 @@ type alias Dialog msg =
     }
 
 
+type alias TextInputStyle msg =
+    { chip : ButtonStyle msg
+    , containerRow : List (Attribute msg)
+    , chipsRow : List (Attribute msg)
+    , input : List (Attribute msg)
+    }
+
+
 {-| A simple button
 -}
 selectButton :
@@ -103,11 +111,7 @@ multiSelect { selected, options, onSelect } =
 
 {-| -}
 textInput :
-    { chip : ButtonStyle msg
-    , containerRow : List (Attribute msg)
-    , chipsRow : List (Attribute msg)
-    , input : List (Attribute msg)
-    }
+    TextInputStyle msg
     ->
         { chips : List (Button msg)
         , text : String

From 8bb1d173713d07a48766dafe3fdd12977c0a4599 Mon Sep 17 00:00:00 2001
From: Lucas Payr 
Date: Fri, 1 May 2020 19:40:19 +0200
Subject: [PATCH 05/14] Starting to clean up

---
 README.md                           |  19 +
 docs/unstable/index.html            | 828 +++++++++++++++-------------
 example/elm.json                    |   1 +
 example/src/Component.elm           |   2 +-
 example/src/Data/Style.elm          |   5 +-
 example/src/Example.elm             |   2 +-
 example/src/Icons.elm               |  31 ++
 example/src/Stateless.elm           |  79 ++-
 src/Core/Utillity.elm               |  30 -
 src/{Widget => Internal}/Button.elm |  39 +-
 src/Internal/Dialog.elm             |  90 +++
 src/Internal/Select.elm             |  79 +++
 src/Layout.elm                      |  27 +-
 src/Widget.elm                      | 373 +++++++------
 src/Widget/FilterMultiSelect.elm    |   2 +-
 src/Widget/Snackbar.elm             |   5 +-
 src/{ => Widget}/Style.elm          |  41 +-
 17 files changed, 956 insertions(+), 697 deletions(-)
 delete mode 100644 src/Core/Utillity.elm
 rename src/{Widget => Internal}/Button.elm (59%)
 create mode 100644 src/Internal/Dialog.elm
 create mode 100644 src/Internal/Select.elm
 rename src/{ => Widget}/Style.elm (54%)

diff --git a/README.md b/README.md
index fcdff6f..064af9a 100644
--- a/README.md
+++ b/README.md
@@ -26,6 +26,25 @@ After looking at the current packages that implement various reusable views (and
 
 This package tries to solve both of these problems.
 
+Here are some alternative packages for creating UIs:
+
+* Using Elm-Ui
+    * [lucamug/style-framework](https://dark.elm.dmy.fr/packages/lucamug/style-framework/latest/) - Full customization requires the cloning of the package.
+    * [jxxcarlson/elm-widget](https://dark.elm.dmy.fr/packages/jxxcarlson/elm-widget/latest/Widget-Button) -  Uses a Builder pattern. Has some redefined customizations.
+    * [QiTASC/hatchinq](https://dark.elm.dmy.fr/packages/QiTASC/hatchinq/latest/) - Similar Arroach, stillin experimental phase
+* Using Elm/Html
+    * [nathanjohnson320/elm-ui-components](https://dark.elm.dmy.fr/packages/nathanjohnson320/elm-ui-components/latest/) - Sticks with the elm/html way of styling.
+    * [NoRedInk/noredink-ui](https://dark.elm.dmy.fr/packages/NoRedInk/noredink-ui/latest/) - Similar Approach but no customization options.
+    * [peterszerzo/elm-natural-ui](https://dark.elm.dmy.fr/packages/peterszerzo/elm-natural-ui/latest) - Uses custom Attributes with some customization.
+* Ui Frameworks
+    * [aforemny/material-components-web-elm](https://dark.elm.dmy.fr/packages/aforemny/material-components-web-elm/latest/) - Wrapper of Material design using custom elements.
+    * [afidegnum/elm-tailwind](https://dark.elm.dmy.fr/packages/afidegnum/elm-tailwind/latest/) - Wrapper of Tailwind by including the tailwind stylesheet.
+    * [surprisetalk/elm-bulma](https://dark.elm.dmy.fr/packages/surprisetalk/elm-bulma/latest/) - Wrapper for Bulma by  including the bulma stylesheet.
+    * [rundis/elm-bootstrap](https://dark.elm.dmy.fr/packages/rundis/elm-bootstrap/latest/) - Wrapper for Bootstrap by including the bootstrap stylesheet.
+
+
+
+
 ## Why does this package also include components?
 
 I wrote a component whenever the boilerplate of a similar reusable view is less than just include the wiring in the package.
diff --git a/docs/unstable/index.html b/docs/unstable/index.html
index 7346cb7..15083a1 100644
--- a/docs/unstable/index.html
+++ b/docs/unstable/index.html
@@ -12817,8 +12817,85 @@ var $mdgriffith$elm_ui$Element$el = F2(
 				_List_fromArray(
 					[child])));
 	});
+var $mdgriffith$elm_ui$Internal$Model$Class = F2(
+	function (a, b) {
+		return {$: 'Class', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Internal$Flag$overflow = $mdgriffith$elm_ui$Internal$Flag$flag(20);
+var $mdgriffith$elm_ui$Element$clip = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$overflow, $mdgriffith$elm_ui$Internal$Style$classes.clip);
+var $mdgriffith$elm_ui$Internal$Model$InFront = {$: 'InFront'};
+var $mdgriffith$elm_ui$Internal$Model$Nearby = F2(
+	function (a, b) {
+		return {$: 'Nearby', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Internal$Model$NoAttribute = {$: 'NoAttribute'};
+var $mdgriffith$elm_ui$Element$createNearby = F2(
+	function (loc, element) {
+		if (element.$ === 'Empty') {
+			return $mdgriffith$elm_ui$Internal$Model$NoAttribute;
+		} else {
+			return A2($mdgriffith$elm_ui$Internal$Model$Nearby, loc, element);
+		}
+	});
+var $mdgriffith$elm_ui$Element$inFront = function (element) {
+	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$InFront, element);
+};
 var $mdgriffith$elm_ui$Internal$Model$Empty = {$: 'Empty'};
 var $mdgriffith$elm_ui$Element$none = $mdgriffith$elm_ui$Internal$Model$Empty;
+var $elm$virtual_dom$VirtualDom$Normal = function (a) {
+	return {$: 'Normal', a: a};
+};
+var $elm$virtual_dom$VirtualDom$on = _VirtualDom_on;
+var $elm$html$Html$Events$on = F2(
+	function (event, decoder) {
+		return A2(
+			$elm$virtual_dom$VirtualDom$on,
+			event,
+			$elm$virtual_dom$VirtualDom$Normal(decoder));
+	});
+var $elm$html$Html$Events$onClick = function (msg) {
+	return A2(
+		$elm$html$Html$Events$on,
+		'click',
+		$elm$json$Json$Decode$succeed(msg));
+};
+var $mdgriffith$elm_ui$Element$Events$onClick = A2($elm$core$Basics$composeL, $mdgriffith$elm_ui$Internal$Model$Attr, $elm$html$Html$Events$onClick);
+var $mdgriffith$elm_ui$Element$rgba255 = F4(
+	function (red, green, blue, a) {
+		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, red / 255, green / 255, blue / 255, a);
+	});
+var $elm$core$List$singleton = function (value) {
+	return _List_fromArray(
+		[value]);
+};
+var $author$project$Internal$Dialog$modal = function (_v0) {
+	var onDismiss = _v0.onDismiss;
+	var content = _v0.content;
+	return _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$inFront(
+			A2(
+				$mdgriffith$elm_ui$Element$el,
+				_Utils_ap(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+							$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+							$mdgriffith$elm_ui$Element$Background$color(
+							A4($mdgriffith$elm_ui$Element$rgba255, 0, 0, 0, 0.5))
+						]),
+					A2(
+						$elm$core$Maybe$withDefault,
+						_List_Nil,
+						A2(
+							$elm$core$Maybe$map,
+							A2($elm$core$Basics$composeR, $mdgriffith$elm_ui$Element$Events$onClick, $elm$core$List$singleton),
+							onDismiss))),
+				$mdgriffith$elm_ui$Element$none)),
+			$mdgriffith$elm_ui$Element$inFront(content),
+			$mdgriffith$elm_ui$Element$clip
+		]);
+};
 var $mdgriffith$elm_ui$Internal$Model$AsRow = {$: 'AsRow'};
 var $mdgriffith$elm_ui$Internal$Model$asRow = $mdgriffith$elm_ui$Internal$Model$AsRow;
 var $mdgriffith$elm_ui$Element$row = F2(
@@ -12839,10 +12916,6 @@ var $mdgriffith$elm_ui$Element$row = F2(
 						attrs))),
 			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
 	});
-var $elm$core$List$singleton = function (value) {
-	return _List_fromArray(
-		[value]);
-};
 var $mdgriffith$elm_ui$Internal$Model$Text = function (a) {
 	return {$: 'Text', a: a};
 };
@@ -12859,7 +12932,6 @@ var $elm$html$Html$Attributes$boolProperty = F2(
 			$elm$json$Json$Encode$bool(bool));
 	});
 var $elm$html$Html$Attributes$disabled = $elm$html$Html$Attributes$boolProperty('disabled');
-var $mdgriffith$elm_ui$Internal$Model$NoAttribute = {$: 'NoAttribute'};
 var $mdgriffith$elm_ui$Element$Input$hasFocusStyle = function (attr) {
 	if (((attr.$ === 'StyleClass') && (attr.b.$ === 'PseudoSelector')) && (attr.b.a.$ === 'Focus')) {
 		var _v1 = attr.b;
@@ -12872,24 +12944,6 @@ var $mdgriffith$elm_ui$Element$Input$hasFocusStyle = function (attr) {
 var $mdgriffith$elm_ui$Element$Input$focusDefault = function (attrs) {
 	return A2($elm$core$List$any, $mdgriffith$elm_ui$Element$Input$hasFocusStyle, attrs) ? $mdgriffith$elm_ui$Internal$Model$NoAttribute : $mdgriffith$elm_ui$Internal$Model$htmlClass('focusable');
 };
-var $elm$virtual_dom$VirtualDom$Normal = function (a) {
-	return {$: 'Normal', a: a};
-};
-var $elm$virtual_dom$VirtualDom$on = _VirtualDom_on;
-var $elm$html$Html$Events$on = F2(
-	function (event, decoder) {
-		return A2(
-			$elm$virtual_dom$VirtualDom$on,
-			event,
-			$elm$virtual_dom$VirtualDom$Normal(decoder));
-	});
-var $elm$html$Html$Events$onClick = function (msg) {
-	return A2(
-		$elm$html$Html$Events$on,
-		'click',
-		$elm$json$Json$Decode$succeed(msg));
-};
-var $mdgriffith$elm_ui$Element$Events$onClick = A2($elm$core$Basics$composeL, $mdgriffith$elm_ui$Internal$Model$Attr, $elm$html$Html$Events$onClick);
 var $mdgriffith$elm_ui$Element$Input$enter = 'Enter';
 var $elm$json$Json$Decode$andThen = _Json_andThen;
 var $elm$json$Json$Decode$fail = _Json_fail;
@@ -12927,10 +12981,6 @@ var $mdgriffith$elm_ui$Element$Input$onKey = F2(
 var $mdgriffith$elm_ui$Element$Input$onEnter = function (msg) {
 	return A2($mdgriffith$elm_ui$Element$Input$onKey, $mdgriffith$elm_ui$Element$Input$enter, msg);
 };
-var $mdgriffith$elm_ui$Internal$Model$Class = F2(
-	function (a, b) {
-		return {$: 'Class', a: a, b: b};
-	});
 var $mdgriffith$elm_ui$Internal$Flag$cursor = $mdgriffith$elm_ui$Internal$Flag$flag(21);
 var $mdgriffith$elm_ui$Element$pointer = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$cursor, $mdgriffith$elm_ui$Internal$Style$classes.cursorPointer);
 var $elm$html$Html$Attributes$tabindex = function (n) {
@@ -13023,7 +13073,7 @@ var $mdgriffith$elm_ui$Internal$Model$map = F2(
 		}
 	});
 var $mdgriffith$elm_ui$Element$map = $mdgriffith$elm_ui$Internal$Model$map;
-var $author$project$Widget$Button$view = F2(
+var $author$project$Internal$Button$button = F2(
 	function (style, _v0) {
 		var onPress = _v0.onPress;
 		var text = _v0.text;
@@ -13045,90 +13095,92 @@ var $author$project$Widget$Button$view = F2(
 				onPress: onPress
 			});
 	});
-var $author$project$Widget$Button$viewTextOnly = F2(
+var $author$project$Internal$Button$textButton = F2(
 	function (style, _v0) {
 		var onPress = _v0.onPress;
 		var text = _v0.text;
 		return A2(
-			$author$project$Widget$Button$view,
+			$author$project$Internal$Button$button,
 			style,
 			{icon: $mdgriffith$elm_ui$Element$none, onPress: onPress, text: text});
 	});
-var $author$project$Widget$dialog = F2(
+var $author$project$Internal$Dialog$dialog = F2(
 	function (style, _v0) {
 		var title = _v0.title;
 		var body = _v0.body;
 		var accept = _v0.accept;
 		var dismiss = _v0.dismiss;
-		return {
-			content: A2(
-				$mdgriffith$elm_ui$Element$column,
-				_Utils_ap(
-					style.containerColumn,
+		return $author$project$Internal$Dialog$modal(
+			{
+				content: A2(
+					$mdgriffith$elm_ui$Element$column,
+					_Utils_ap(
+						style.containerColumn,
+						_List_fromArray(
+							[$mdgriffith$elm_ui$Element$centerX, $mdgriffith$elm_ui$Element$centerY])),
 					_List_fromArray(
-						[$mdgriffith$elm_ui$Element$centerX, $mdgriffith$elm_ui$Element$centerY])),
-				_List_fromArray(
-					[
-						A2(
-						$elm$core$Maybe$withDefault,
-						$mdgriffith$elm_ui$Element$none,
-						A2(
-							$elm$core$Maybe$map,
+						[
 							A2(
-								$elm$core$Basics$composeR,
-								$mdgriffith$elm_ui$Element$text,
-								$mdgriffith$elm_ui$Element$el(style.title)),
-							title)),
-						body,
-						A2(
-						$mdgriffith$elm_ui$Element$row,
-						_Utils_ap(
-							style.buttonRow,
-							_List_fromArray(
-								[
-									$mdgriffith$elm_ui$Element$alignRight,
-									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
-								])),
-						function () {
-							var _v1 = _Utils_Tuple2(accept, dismiss);
-							if (_v1.a.$ === 'Just') {
-								if (_v1.b.$ === 'Nothing') {
-									var acceptButton = _v1.a.a;
-									var _v2 = _v1.b;
-									return $elm$core$List$singleton(
-										A2($author$project$Widget$Button$viewTextOnly, style.accept, acceptButton));
+							$elm$core$Maybe$withDefault,
+							$mdgriffith$elm_ui$Element$none,
+							A2(
+								$elm$core$Maybe$map,
+								A2(
+									$elm$core$Basics$composeR,
+									$mdgriffith$elm_ui$Element$text,
+									$mdgriffith$elm_ui$Element$el(style.title)),
+								title)),
+							body,
+							A2(
+							$mdgriffith$elm_ui$Element$row,
+							_Utils_ap(
+								style.buttonRow,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$alignRight,
+										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
+									])),
+							function () {
+								var _v1 = _Utils_Tuple2(accept, dismiss);
+								if (_v1.a.$ === 'Just') {
+									if (_v1.b.$ === 'Nothing') {
+										var acceptButton = _v1.a.a;
+										var _v2 = _v1.b;
+										return $elm$core$List$singleton(
+											A2($author$project$Internal$Button$textButton, style.accept, acceptButton));
+									} else {
+										var acceptButton = _v1.a.a;
+										var dismissButton = _v1.b.a;
+										return _List_fromArray(
+											[
+												A2($author$project$Internal$Button$textButton, style.dismiss, dismissButton),
+												A2($author$project$Internal$Button$textButton, style.accept, acceptButton)
+											]);
+									}
 								} else {
-									var acceptButton = _v1.a.a;
-									var dismissButton = _v1.b.a;
-									return _List_fromArray(
-										[
-											A2($author$project$Widget$Button$viewTextOnly, style.dismiss, dismissButton),
-											A2($author$project$Widget$Button$viewTextOnly, style.accept, acceptButton)
-										]);
+									return _List_Nil;
 								}
-							} else {
-								return _List_Nil;
-							}
-						}())
-					])),
-			onDismiss: function () {
-				var _v3 = _Utils_Tuple2(accept, dismiss);
-				if (_v3.a.$ === 'Nothing') {
-					if (_v3.b.$ === 'Nothing') {
-						var _v4 = _v3.a;
-						var _v5 = _v3.b;
-						return $elm$core$Maybe$Nothing;
+							}())
+						])),
+				onDismiss: function () {
+					var _v3 = _Utils_Tuple2(accept, dismiss);
+					if (_v3.a.$ === 'Nothing') {
+						if (_v3.b.$ === 'Nothing') {
+							var _v4 = _v3.a;
+							var _v5 = _v3.b;
+							return $elm$core$Maybe$Nothing;
+						} else {
+							var _v6 = _v3.a;
+							var onPress = _v3.b.a.onPress;
+							return onPress;
+						}
 					} else {
-						var _v6 = _v3.a;
-						var onPress = _v3.b.a.onPress;
-						return onPress;
+						return $elm$core$Maybe$Nothing;
 					}
-				} else {
-					return $elm$core$Maybe$Nothing;
-				}
-			}()
-		};
+				}()
+			});
 	});
+var $author$project$Widget$dialog = $author$project$Internal$Dialog$dialog;
 var $elm$core$Array$fromListHelp = F3(
 	function (list, nodeList, nodeListSize) {
 		fromListHelp:
@@ -13856,26 +13908,12 @@ var $author$project$Icons$square = A2(
 var $mdgriffith$elm_ui$Internal$Flag$fontAlignment = $mdgriffith$elm_ui$Internal$Flag$flag(12);
 var $mdgriffith$elm_ui$Element$Font$alignLeft = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$fontAlignment, $mdgriffith$elm_ui$Internal$Style$classes.textLeft);
 var $Orasund$elm_ui_framework$Framework$Color$black = A3($mdgriffith$elm_ui$Element$rgb255, 0, 0, 0);
-var $Orasund$elm_ui_framework$Framework$Group$center = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Border$rounded(0)
-	]);
-var $Orasund$elm_ui_framework$Framework$Color$dark = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$darkerGrey),
-		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$darkerGrey),
-		$mdgriffith$elm_ui$Element$Font$color($Orasund$elm_ui_framework$Framework$Color$lighterGrey)
-	]);
 var $mdgriffith$elm_ui$Internal$Model$Focus = {$: 'Focus'};
 var $mdgriffith$elm_ui$Internal$Model$PseudoSelector = F2(
 	function (a, b) {
 		return {$: 'PseudoSelector', a: a, b: b};
 	});
 var $mdgriffith$elm_ui$Internal$Flag$focus = $mdgriffith$elm_ui$Internal$Flag$flag(31);
-var $mdgriffith$elm_ui$Internal$Model$Nearby = F2(
-	function (a, b) {
-		return {$: 'Nearby', a: a, b: b};
-	});
 var $mdgriffith$elm_ui$Internal$Model$TransformComponent = F2(
 	function (a, b) {
 		return {$: 'TransformComponent', a: a, b: b};
@@ -13997,6 +14035,11 @@ var $Orasund$elm_ui_framework$Framework$Color$disabled = _Utils_ap(
 			$mdgriffith$elm_ui$Element$htmlAttribute(
 			A2($elm$html$Html$Attributes$style, 'cursor', 'not-allowed'))
 		]));
+var $Orasund$elm_ui_framework$Framework$Color$primary = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$turquoise),
+		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$turquoise)
+	]);
 var $mdgriffith$elm_ui$Element$Font$center = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$fontAlignment, $mdgriffith$elm_ui$Internal$Style$classes.textCenter);
 var $Orasund$elm_ui_framework$Framework$Button$simple = _Utils_ap(
 	$Orasund$elm_ui_framework$Framework$Card$simple,
@@ -14012,6 +14055,26 @@ var $Orasund$elm_ui_framework$Framework$Button$simple = _Utils_ap(
 					])),
 				A2($mdgriffith$elm_ui$Element$paddingXY, 16, 12)
 			])));
+var $author$project$Data$Style$buttonStyle = {
+	active: $Orasund$elm_ui_framework$Framework$Color$primary,
+	container: $Orasund$elm_ui_framework$Framework$Button$simple,
+	disabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
+	label: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$spacing(8)
+		])
+};
+var $Orasund$elm_ui_framework$Framework$Group$center = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Border$rounded(0)
+	]);
+var $author$project$Data$Style$chipButtonStyle = {active: $Orasund$elm_ui_framework$Framework$Color$primary, container: $Orasund$elm_ui_framework$Framework$Tag$simple, disabled: _List_Nil, label: $Orasund$elm_ui_framework$Framework$Grid$simple};
+var $Orasund$elm_ui_framework$Framework$Color$dark = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$darkerGrey),
+		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$darkerGrey),
+		$mdgriffith$elm_ui$Element$Font$color($Orasund$elm_ui_framework$Framework$Color$lighterGrey)
+	]);
 var $Orasund$elm_ui_framework$Framework$Button$fill = _Utils_ap(
 	$Orasund$elm_ui_framework$Framework$Button$simple,
 	_List_fromArray(
@@ -14092,11 +14155,6 @@ var $author$project$Icons$moreVertical = A2(
 				]),
 			_List_Nil)
 		]));
-var $Orasund$elm_ui_framework$Framework$Color$primary = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$turquoise),
-		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$turquoise)
-	]);
 var $author$project$Icons$search = A2(
 	$author$project$Icons$svgFeatherIcon,
 	'search',
@@ -14122,16 +14180,77 @@ var $author$project$Icons$search = A2(
 				]),
 			_List_Nil)
 		]));
-var $author$project$Example$simpleButton = {
+var $author$project$Data$Style$simpleButton = {
 	active: $Orasund$elm_ui_framework$Framework$Color$primary,
 	container: _Utils_ap($Orasund$elm_ui_framework$Framework$Button$simple, $Orasund$elm_ui_framework$Framework$Color$primary),
 	disabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
 	label: $Orasund$elm_ui_framework$Framework$Grid$simple
 };
-var $author$project$Example$textButton = {active: $Orasund$elm_ui_framework$Framework$Color$primary, container: $Orasund$elm_ui_framework$Framework$Button$simple, disabled: $Orasund$elm_ui_framework$Framework$Color$disabled, label: $Orasund$elm_ui_framework$Framework$Grid$simple};
-var $author$project$Example$style = {
+var $mdgriffith$elm_ui$Element$Border$roundEach = function (_v0) {
+	var topLeft = _v0.topLeft;
+	var topRight = _v0.topRight;
+	var bottomLeft = _v0.bottomLeft;
+	var bottomRight = _v0.bottomRight;
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$borderRound,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$Single,
+			'br-' + ($elm$core$String$fromInt(topLeft) + ('-' + ($elm$core$String$fromInt(topRight) + ($elm$core$String$fromInt(bottomLeft) + ('-' + $elm$core$String$fromInt(bottomRight)))))),
+			'border-radius',
+			$elm$core$String$fromInt(topLeft) + ('px ' + ($elm$core$String$fromInt(topRight) + ('px ' + ($elm$core$String$fromInt(bottomRight) + ('px ' + ($elm$core$String$fromInt(bottomLeft) + 'px'))))))));
+};
+var $Orasund$elm_ui_framework$Framework$Group$top = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Border$roundEach(
+		{bottomLeft: 0, bottomRight: 0, topLeft: 4, topRight: 4})
+	]);
+var $author$project$Data$Style$tabButtonStyle = {
+	active: $Orasund$elm_ui_framework$Framework$Color$primary,
+	container: _Utils_ap($Orasund$elm_ui_framework$Framework$Button$simple, $Orasund$elm_ui_framework$Framework$Group$top),
+	disabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
+	label: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$spacing(8)
+		])
+};
+var $author$project$Data$Style$textButton = {active: $Orasund$elm_ui_framework$Framework$Color$primary, container: $Orasund$elm_ui_framework$Framework$Button$simple, disabled: $Orasund$elm_ui_framework$Framework$Color$disabled, label: $Orasund$elm_ui_framework$Framework$Grid$simple};
+var $author$project$Data$Style$textInputStyle = {
+	chip: $author$project$Data$Style$chipButtonStyle,
+	chipsRow: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+			$mdgriffith$elm_ui$Element$spacing(4),
+			$mdgriffith$elm_ui$Element$paddingEach(
+			{bottom: 8, left: 0, right: 0, top: 8})
+		]),
+	containerRow: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Button$simple,
+		_Utils_ap(
+			$Orasund$elm_ui_framework$Framework$Color$light,
+			_Utils_ap(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Border$color(
+						A3($mdgriffith$elm_ui$Element$rgb255, 186, 189, 182)),
+						$mdgriffith$elm_ui$Element$Font$alignLeft,
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0),
+						$mdgriffith$elm_ui$Element$height(
+						$mdgriffith$elm_ui$Element$px(42))
+					]),
+				$Orasund$elm_ui_framework$Framework$Grid$simple))),
+	input: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Color$light,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$padding(8)
+			]))
+};
+var $author$project$Data$Style$style = {
+	button: $author$project$Data$Style$buttonStyle,
+	chipButton: $author$project$Data$Style$chipButtonStyle,
 	dialog: {
-		accept: $author$project$Example$simpleButton,
+		accept: $author$project$Data$Style$simpleButton,
 		buttonRow: _Utils_ap(
 			$Orasund$elm_ui_framework$Framework$Grid$simple,
 			_List_fromArray(
@@ -14151,7 +14270,7 @@ var $author$project$Example$style = {
 							280,
 							A2($mdgriffith$elm_ui$Element$maximum, 560, $mdgriffith$elm_ui$Element$fill)))
 					]))),
-		dismiss: $author$project$Example$textButton,
+		dismiss: $author$project$Data$Style$textButton,
 		title: $Orasund$elm_ui_framework$Framework$Heading$h3
 	},
 	header: _Utils_ap(
@@ -14199,6 +14318,7 @@ var $author$project$Example$style = {
 		$mdgriffith$elm_ui$Element$el,
 		_List_Nil,
 		$mdgriffith$elm_ui$Element$html($author$project$Icons$moreVertical)),
+	primaryButton: $author$project$Data$Style$simpleButton,
 	search: _Utils_ap(
 		$Orasund$elm_ui_framework$Framework$Color$simple,
 		_Utils_ap(
@@ -14261,6 +14381,8 @@ var $author$project$Example$style = {
 			])
 	},
 	spacing: 8,
+	tabButton: $author$project$Data$Style$tabButtonStyle,
+	textInput: $author$project$Data$Style$textInputStyle,
 	title: $Orasund$elm_ui_framework$Framework$Heading$h2
 };
 var $elm_community$intdict$IntDict$findMin = function (dict) {
@@ -14463,7 +14585,6 @@ var $author$project$Component$FilterMultiSelectSpecific = function (a) {
 var $author$project$Widget$FilterMultiSelect$ToggleSelected = function (a) {
 	return {$: 'ToggleSelected', a: a};
 };
-var $author$project$Component$chipButton = {active: $Orasund$elm_ui_framework$Framework$Color$primary, container: $Orasund$elm_ui_framework$Framework$Tag$simple, disabled: _List_Nil, label: $Orasund$elm_ui_framework$Framework$Grid$simple};
 var $mdgriffith$elm_ui$Element$Input$Placeholder = F2(
 	function (a, b) {
 		return {$: 'Placeholder', a: a, b: b};
@@ -14548,14 +14669,6 @@ var $mdgriffith$elm_ui$Element$Input$autofill = A2(
 	$mdgriffith$elm_ui$Internal$Model$Attr,
 	$elm$html$Html$Attributes$attribute('autocomplete'));
 var $mdgriffith$elm_ui$Internal$Model$Behind = {$: 'Behind'};
-var $mdgriffith$elm_ui$Element$createNearby = F2(
-	function (loc, element) {
-		if (element.$ === 'Empty') {
-			return $mdgriffith$elm_ui$Internal$Model$NoAttribute;
-		} else {
-			return A2($mdgriffith$elm_ui$Internal$Model$Nearby, loc, element);
-		}
-	});
 var $mdgriffith$elm_ui$Element$behindContent = function (element) {
 	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$Behind, element);
 };
@@ -14594,8 +14707,6 @@ var $mdgriffith$elm_ui$Element$Input$calcMoveToCompensateForPadding = function (
 			$elm$core$Basics$floor(vSpace / 2));
 	}
 };
-var $mdgriffith$elm_ui$Internal$Flag$overflow = $mdgriffith$elm_ui$Internal$Flag$flag(20);
-var $mdgriffith$elm_ui$Element$clip = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$overflow, $mdgriffith$elm_ui$Internal$Style$classes.clip);
 var $mdgriffith$elm_ui$Element$rgb = F3(
 	function (r, g, b) {
 		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, r, g, b, 1);
@@ -14634,10 +14745,6 @@ var $mdgriffith$elm_ui$Element$Input$hiddenLabelAttribute = function (label) {
 		return $mdgriffith$elm_ui$Internal$Model$NoAttribute;
 	}
 };
-var $mdgriffith$elm_ui$Internal$Model$InFront = {$: 'InFront'};
-var $mdgriffith$elm_ui$Element$inFront = function (element) {
-	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$InFront, element);
-};
 var $mdgriffith$elm_ui$Element$Input$isConstrained = function (len) {
 	isConstrained:
 	while (true) {
@@ -15293,7 +15400,7 @@ var $author$project$Widget$textInput = F2(
 					style.chipsRow,
 					A2(
 						$elm$core$List$map,
-						$author$project$Widget$Button$view(style.chip),
+						$author$project$Internal$Button$button(style.chip),
 						chips)),
 					A2(
 					$mdgriffith$elm_ui$Element$Input$text,
@@ -15547,35 +15654,7 @@ var $author$project$Component$filterMultiSelect = function (model) {
 				[
 					A2(
 					$author$project$Widget$textInput,
-					{
-						chip: $author$project$Component$chipButton,
-						chipsRow: _List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
-								$mdgriffith$elm_ui$Element$spacing(4)
-							]),
-						containerRow: _Utils_ap(
-							$Orasund$elm_ui_framework$Framework$Button$simple,
-							_Utils_ap(
-								$Orasund$elm_ui_framework$Framework$Color$light,
-								_Utils_ap(
-									_List_fromArray(
-										[
-											$mdgriffith$elm_ui$Element$Border$color(
-											A3($mdgriffith$elm_ui$Element$rgb255, 186, 189, 182)),
-											$mdgriffith$elm_ui$Element$Font$alignLeft,
-											$mdgriffith$elm_ui$Element$padding(8),
-											$mdgriffith$elm_ui$Element$height(
-											$mdgriffith$elm_ui$Element$px(42))
-										]),
-									$Orasund$elm_ui_framework$Framework$Grid$simple))),
-						input: _Utils_ap(
-							$Orasund$elm_ui_framework$Framework$Color$light,
-							_List_fromArray(
-								[
-									$mdgriffith$elm_ui$Element$padding(0)
-								]))
-					},
+					$author$project$Data$Style$style.textInput,
 					A2(
 						$author$project$Widget$FilterMultiSelect$viewInput,
 						model,
@@ -15632,20 +15711,6 @@ var $Orasund$elm_ui_framework$Framework$Color$danger = _List_fromArray(
 		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$red),
 		$mdgriffith$elm_ui$Element$Font$color($Orasund$elm_ui_framework$Framework$Color$lighterGrey)
 	]);
-var $mdgriffith$elm_ui$Element$Border$roundEach = function (_v0) {
-	var topLeft = _v0.topLeft;
-	var topRight = _v0.topRight;
-	var bottomLeft = _v0.bottomLeft;
-	var bottomRight = _v0.bottomRight;
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$borderRound,
-		A3(
-			$mdgriffith$elm_ui$Internal$Model$Single,
-			'br-' + ($elm$core$String$fromInt(topLeft) + ('-' + ($elm$core$String$fromInt(topRight) + ($elm$core$String$fromInt(bottomLeft) + ('-' + $elm$core$String$fromInt(bottomRight)))))),
-			'border-radius',
-			$elm$core$String$fromInt(topLeft) + ('px ' + ($elm$core$String$fromInt(topRight) + ('px ' + ($elm$core$String$fromInt(bottomRight) + ('px ' + ($elm$core$String$fromInt(bottomLeft) + 'px'))))))));
-};
 var $Orasund$elm_ui_framework$Framework$Group$left = _List_fromArray(
 	[
 		$mdgriffith$elm_ui$Element$Border$roundEach(
@@ -15937,6 +16002,7 @@ var $author$project$Layout$Search = {$: 'Search'};
 var $mdgriffith$elm_ui$Element$Tablet = {$: 'Tablet'};
 var $mdgriffith$elm_ui$Internal$Model$Bottom = {$: 'Bottom'};
 var $mdgriffith$elm_ui$Element$alignBottom = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$Bottom);
+var $author$project$Widget$button = $author$project$Internal$Button$button;
 var $mdgriffith$elm_ui$Element$BigDesktop = {$: 'BigDesktop'};
 var $mdgriffith$elm_ui$Element$Desktop = {$: 'Desktop'};
 var $mdgriffith$elm_ui$Element$Landscape = {$: 'Landscape'};
@@ -15973,7 +16039,7 @@ var $elm$core$List$drop = F2(
 		}
 	});
 var $mdgriffith$elm_ui$Element$Region$description = A2($elm$core$Basics$composeL, $mdgriffith$elm_ui$Internal$Model$Describe, $mdgriffith$elm_ui$Internal$Model$Label);
-var $author$project$Widget$Button$viewIconOnly = F2(
+var $author$project$Internal$Button$iconButton = F2(
 	function (style, _v0) {
 		var onPress = _v0.onPress;
 		var text = _v0.text;
@@ -15993,59 +16059,9 @@ var $author$project$Widget$Button$viewIconOnly = F2(
 				onPress: onPress
 			});
 	});
-var $author$project$Core$Style$menuIconButton = function (style) {
-	return $author$project$Widget$Button$viewIconOnly(style.menuButton);
-};
-var $author$project$Widget$selectButton = F2(
-	function (style, _v0) {
-		var selected = _v0.a;
-		var b = _v0.b;
-		return A2(
-			$author$project$Widget$Button$view,
-			_Utils_update(
-				style,
-				{
-					container: _Utils_ap(
-						style.container,
-						selected ? style.active : _List_Nil)
-				}),
-			b);
-	});
-var $author$project$Core$Style$menuTabButton = function (style) {
-	return $author$project$Widget$selectButton(style.menuTabButton);
-};
-var $mdgriffith$elm_ui$Element$rgba255 = F4(
-	function (red, green, blue, a) {
-		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, red / 255, green / 255, blue / 255, a);
-	});
-var $author$project$Widget$modal = function (_v0) {
-	var onDismiss = _v0.onDismiss;
-	var content = _v0.content;
-	return _List_fromArray(
-		[
-			$mdgriffith$elm_ui$Element$inFront(
-			A2(
-				$mdgriffith$elm_ui$Element$el,
-				_Utils_ap(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-							$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
-							$mdgriffith$elm_ui$Element$Background$color(
-							A4($mdgriffith$elm_ui$Element$rgba255, 0, 0, 0, 0.5))
-						]),
-					A2(
-						$elm$core$Maybe$withDefault,
-						_List_Nil,
-						A2(
-							$elm$core$Maybe$map,
-							A2($elm$core$Basics$composeR, $mdgriffith$elm_ui$Element$Events$onClick, $elm$core$List$singleton),
-							onDismiss))),
-				content)),
-			$mdgriffith$elm_ui$Element$clip
-		]);
-};
-var $author$project$Widget$select = function (_v0) {
+var $author$project$Widget$iconButton = $author$project$Internal$Button$iconButton;
+var $author$project$Widget$modal = $author$project$Internal$Dialog$modal;
+var $author$project$Internal$Select$select = function (_v0) {
 	var selected = _v0.selected;
 	var options = _v0.options;
 	var onSelect = _v0.onSelect;
@@ -16065,9 +16081,23 @@ var $author$project$Widget$select = function (_v0) {
 			}),
 		options);
 };
-var $author$project$Core$Style$sheetButton = function (style) {
-	return $author$project$Widget$selectButton(style.sheetButton);
-};
+var $author$project$Widget$select = $author$project$Internal$Select$select;
+var $author$project$Internal$Select$selectButton = F2(
+	function (style, _v0) {
+		var selected = _v0.a;
+		var b = _v0.b;
+		return A2(
+			$author$project$Internal$Button$button,
+			_Utils_update(
+				style,
+				{
+					container: _Utils_ap(
+						style.container,
+						selected ? style.active : _List_Nil)
+				}),
+			b);
+	});
+var $author$project$Widget$selectButton = $author$project$Internal$Select$selectButton;
 var $elm$core$List$takeReverse = F3(
 	function (n, list, kept) {
 		takeReverse:
@@ -16197,6 +16227,15 @@ var $elm$core$List$take = F2(
 var $author$project$Widget$Snackbar$current = function (model) {
 	return A2($elm$core$Maybe$map, $elm$core$Tuple$first, model.current);
 };
+var $author$project$Widget$textButton = F2(
+	function (style, _v0) {
+		var text = _v0.text;
+		var onPress = _v0.onPress;
+		return A2(
+			$author$project$Internal$Button$textButton,
+			style,
+			{onPress: onPress, text: text});
+	});
 var $author$project$Widget$Snackbar$view = F3(
 	function (style, toMessage, model) {
 		return A2(
@@ -16222,7 +16261,7 @@ var $author$project$Widget$Snackbar$view = F3(
 								$mdgriffith$elm_ui$Element$none,
 								A2(
 									$elm$core$Maybe$map,
-									$author$project$Widget$Button$viewTextOnly(style.button),
+									$author$project$Widget$textButton(style.button),
 									button))
 							]));
 				}),
@@ -16287,7 +16326,7 @@ var $author$project$Layout$view = F2(
 											[title]),
 											A2(
 											$elm$core$List$map,
-											$author$project$Core$Style$sheetButton(style),
+											$author$project$Widget$selectButton(style.sheetButton),
 											$author$project$Widget$select(menu))
 										]))));
 					case 'RightSheet':
@@ -16309,7 +16348,7 @@ var $author$project$Layout$view = F2(
 									]),
 								A2(
 									$elm$core$List$map,
-									$author$project$Widget$Button$view(style.sheetButton),
+									$author$project$Widget$button(style.sheetButton),
 									moreActions)));
 					default:
 						var _v8 = _v5.a;
@@ -16374,7 +16413,7 @@ var $author$project$Layout$view = F2(
 					(_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) || (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Tablet) || ($elm$core$List$length(menu.options) > 5))) ? _List_fromArray(
 						[
 							A2(
-							$author$project$Widget$Button$viewIconOnly,
+							$author$project$Widget$iconButton,
 							style.menuButton,
 							{
 								icon: A2($mdgriffith$elm_ui$Element$map, $elm$core$Basics$never, style.menuIcon),
@@ -16417,7 +16456,7 @@ var $author$project$Layout$view = F2(
 								]),
 							A2(
 								$elm$core$List$map,
-								$author$project$Core$Style$menuTabButton(style),
+								$author$project$Widget$selectButton(style.menuTabButton),
 								$author$project$Widget$select(menu)))
 						])),
 					(_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) || _Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Tablet)) ? $mdgriffith$elm_ui$Element$none : A2(
@@ -16464,7 +16503,7 @@ var $author$project$Layout$view = F2(
 										return _Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Tablet) ? _List_fromArray(
 											[
 												A2(
-												$author$project$Widget$Button$view,
+												$author$project$Widget$button,
 												style.menuButton,
 												{
 													icon: style.searchIcon,
@@ -16476,8 +16515,8 @@ var $author$project$Layout$view = F2(
 											]) : (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) ? _List_fromArray(
 											[
 												A2(
-												$author$project$Core$Style$menuIconButton,
-												style,
+												$author$project$Widget$iconButton,
+												style.menuButton,
 												{
 													icon: style.searchIcon,
 													onPress: $elm$core$Maybe$Just(
@@ -16490,12 +16529,12 @@ var $author$project$Layout$view = F2(
 									search)),
 								A2(
 								$elm$core$List$map,
-								_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) ? $author$project$Core$Style$menuIconButton(style) : $author$project$Widget$Button$view(style.menuButton),
+								_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) ? $author$project$Widget$iconButton(style.menuButton) : $author$project$Widget$button(style.menuButton),
 								primaryActions),
 								$elm$core$List$isEmpty(moreActions) ? _List_Nil : _List_fromArray(
 								[
 									A2(
-									$author$project$Widget$Button$viewIconOnly,
+									$author$project$Widget$iconButton,
 									style.menuButton,
 									{
 										icon: style.moreVerticalIcon,
@@ -16525,7 +16564,7 @@ var $author$project$Layout$view = F2(
 						function () {
 							if (dialog.$ === 'Just') {
 								var dialogConfig = dialog.a;
-								return $author$project$Widget$modal(dialogConfig);
+								return dialogConfig;
 							} else {
 								return $author$project$Widget$modal(
 									{
@@ -17106,52 +17145,34 @@ var $author$project$Widget$carousel = function (_v0) {
 			head,
 			A2($elm$core$Array$get, current - 1, tail))));
 };
-var $jasonliang512$elm_heroicons$Heroicons$Solid$cheveronLeft = function (attrs) {
-	return A2(
-		$elm$svg$Svg$svg,
-		A2(
-			$elm$core$List$cons,
-			$elm$svg$Svg$Attributes$viewBox('0 0 20 20'),
+var $elm$svg$Svg$Attributes$points = _VirtualDom_attribute('points');
+var $elm$svg$Svg$polyline = $elm$svg$Svg$trustedNode('polyline');
+var $author$project$Icons$chevronLeft = A2(
+	$author$project$Icons$svgFeatherIcon,
+	'chevron-left',
+	_List_fromArray(
+		[
 			A2(
-				$elm$core$List$cons,
-				$elm$svg$Svg$Attributes$fill('currentColor'),
-				attrs)),
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$fillRule('evenodd'),
-						$elm$svg$Svg$Attributes$d('M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z'),
-						$elm$svg$Svg$Attributes$clipRule('evenodd')
-					]),
-				_List_Nil)
-			]));
-};
-var $jasonliang512$elm_heroicons$Heroicons$Solid$cheveronRight = function (attrs) {
-	return A2(
-		$elm$svg$Svg$svg,
-		A2(
-			$elm$core$List$cons,
-			$elm$svg$Svg$Attributes$viewBox('0 0 20 20'),
+			$elm$svg$Svg$polyline,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$points('15 18 9 12 15 6')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Icons$chevronRight = A2(
+	$author$project$Icons$svgFeatherIcon,
+	'chevron-right',
+	_List_fromArray(
+		[
 			A2(
-				$elm$core$List$cons,
-				$elm$svg$Svg$Attributes$fill('currentColor'),
-				attrs)),
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$fillRule('evenodd'),
-						$elm$svg$Svg$Attributes$d('M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z'),
-						$elm$svg$Svg$Attributes$clipRule('evenodd')
-					]),
-				_List_Nil)
-			]));
-};
+			$elm$svg$Svg$polyline,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$points('9 18 15 12 9 6')
+				]),
+			_List_Nil)
+		]));
 var $Orasund$elm_ui_framework$Framework$Color$cyan = A3($mdgriffith$elm_ui$Element$rgb255, 32, 156, 238);
 var $Orasund$elm_ui_framework$Framework$Color$green = A3($mdgriffith$elm_ui$Element$rgb255, 35, 209, 96);
 var $Orasund$elm_ui_framework$Framework$Color$yellow = A3($mdgriffith$elm_ui$Element$rgb255, 255, 221, 87);
@@ -17179,19 +17200,23 @@ var $author$project$Stateless$carousel = function (model) {
 						_List_fromArray(
 							[
 								A2(
-								$mdgriffith$elm_ui$Element$Input$button,
+								$mdgriffith$elm_ui$Element$el,
 								_List_fromArray(
 									[$mdgriffith$elm_ui$Element$centerY]),
-								{
-									label: $mdgriffith$elm_ui$Element$html(
-										$jasonliang512$elm_heroicons$Heroicons$Solid$cheveronLeft(
-											_List_fromArray(
-												[
-													$elm$html$Html$Attributes$width(20)
-												]))),
-									onPress: $elm$core$Maybe$Just(
-										$author$project$Stateless$SetCarousel(model.carousel - 1))
-								}),
+								A2(
+									$author$project$Widget$iconButton,
+									$author$project$Data$Style$style.button,
+									{
+										icon: A2(
+											$mdgriffith$elm_ui$Element$el,
+											_List_Nil,
+											$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronLeft)),
+										onPress: function (i) {
+											return (i < 0) ? $elm$core$Maybe$Nothing : $elm$core$Maybe$Just(
+												$author$project$Stateless$SetCarousel(i));
+										}(model.carousel - 1),
+										text: 'Previous'
+									})),
 								A2(
 								$mdgriffith$elm_ui$Element$el,
 								_Utils_ap(
@@ -17206,19 +17231,23 @@ var $author$project$Stateless$carousel = function (model) {
 										])),
 								$mdgriffith$elm_ui$Element$none),
 								A2(
-								$mdgriffith$elm_ui$Element$Input$button,
+								$mdgriffith$elm_ui$Element$el,
 								_List_fromArray(
 									[$mdgriffith$elm_ui$Element$centerY]),
-								{
-									label: $mdgriffith$elm_ui$Element$html(
-										$jasonliang512$elm_heroicons$Heroicons$Solid$cheveronRight(
-											_List_fromArray(
-												[
-													$elm$html$Html$Attributes$width(20)
-												]))),
-									onPress: $elm$core$Maybe$Just(
-										$author$project$Stateless$SetCarousel(model.carousel + 1))
-								})
+								A2(
+									$author$project$Widget$iconButton,
+									$author$project$Data$Style$style.button,
+									{
+										icon: A2(
+											$mdgriffith$elm_ui$Element$el,
+											_List_Nil,
+											$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronRight)),
+										onPress: function (i) {
+											return (i >= 4) ? $elm$core$Maybe$Nothing : $elm$core$Maybe$Just(
+												$author$project$Stateless$SetCarousel(i));
+										}(model.carousel + 1),
+										text: 'Next'
+									}))
 							]));
 				}
 			}));
@@ -17226,6 +17255,19 @@ var $author$project$Stateless$carousel = function (model) {
 var $author$project$Stateless$ToggleCollapsable = function (a) {
 	return {$: 'ToggleCollapsable', a: a};
 };
+var $author$project$Icons$chevronDown = A2(
+	$author$project$Icons$svgFeatherIcon,
+	'chevron-down',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$polyline,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$points('6 9 12 15 18 9')
+				]),
+			_List_Nil)
+		]));
 var $author$project$Widget$collapsable = F2(
 	function (style, _v0) {
 		var onToggle = _v0.onToggle;
@@ -17279,16 +17321,13 @@ var $author$project$Stateless$collapsable = function (model) {
 							])),
 					_List_fromArray(
 						[
-							$mdgriffith$elm_ui$Element$html(
-							model.isCollapsed ? $jasonliang512$elm_heroicons$Heroicons$Solid$cheveronRight(
-								_List_fromArray(
-									[
-										$elm$html$Html$Attributes$width(20)
-									])) : $jasonliang512$elm_heroicons$Heroicons$Solid$cheveronDown(
-								_List_fromArray(
-									[
-										$elm$html$Html$Attributes$width(20)
-									]))),
+							model.isCollapsed ? A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_Nil,
+							$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronRight)) : A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_Nil,
+							$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronDown)),
 							$mdgriffith$elm_ui$Element$text('Title')
 						])),
 				onToggle: $author$project$Stateless$ToggleCollapsable
@@ -17309,15 +17348,40 @@ var $author$project$Stateless$dialog = F2(
 var $author$project$Stateless$ToggleButton = function (a) {
 	return {$: 'ToggleButton', a: a};
 };
-var $author$project$Stateless$buttonStyle = {
-	active: $Orasund$elm_ui_framework$Framework$Color$primary,
-	container: $Orasund$elm_ui_framework$Framework$Button$simple,
-	disabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
-	label: _List_fromArray(
+var $author$project$Icons$repeat = A2(
+	$author$project$Icons$svgFeatherIcon,
+	'repeat',
+	_List_fromArray(
 		[
-			$mdgriffith$elm_ui$Element$spacing(8)
-		])
-};
+			A2(
+			$elm$svg$Svg$polyline,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$points('17 1 21 5 17 9')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M3 11V9a4 4 0 0 1 4-4h14')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$polyline,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$points('7 23 3 19 7 15')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M21 13v2a4 4 0 0 1-4 4H3')
+				]),
+			_List_Nil)
+		]));
 var $author$project$Icons$slash = A2(
 	$author$project$Icons$svgFeatherIcon,
 	'slash',
@@ -17352,20 +17416,38 @@ var $author$project$Stateless$iconButton = function (model) {
 			_List_fromArray(
 				[
 					A2(
-					$author$project$Widget$Button$view,
-					$author$project$Stateless$buttonStyle,
-					{
-						icon: A2(
-							$mdgriffith$elm_ui$Element$el,
-							_List_Nil,
-							$mdgriffith$elm_ui$Element$html($author$project$Icons$slash)),
-						onPress: model.button ? $elm$core$Maybe$Just(
-							$author$project$Stateless$ToggleButton(false)) : $elm$core$Maybe$Nothing,
-						text: 'disable me'
-					}),
+					$mdgriffith$elm_ui$Element$row,
+					$Orasund$elm_ui_framework$Framework$Grid$simple,
+					_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$button,
+							$author$project$Data$Style$style.primaryButton,
+							{
+								icon: A2(
+									$mdgriffith$elm_ui$Element$el,
+									_List_Nil,
+									$mdgriffith$elm_ui$Element$html($author$project$Icons$slash)),
+								onPress: model.button ? $elm$core$Maybe$Just(
+									$author$project$Stateless$ToggleButton(false)) : $elm$core$Maybe$Nothing,
+								text: 'disable me'
+							}),
+							A2(
+							$author$project$Widget$iconButton,
+							$author$project$Data$Style$style.button,
+							{
+								icon: A2(
+									$mdgriffith$elm_ui$Element$el,
+									_List_Nil,
+									$mdgriffith$elm_ui$Element$html($author$project$Icons$repeat)),
+								onPress: $elm$core$Maybe$Just(
+									$author$project$Stateless$ToggleButton(true)),
+								text: 'reset'
+							})
+						])),
 					A2(
-					$author$project$Widget$Button$view,
-					$author$project$Stateless$buttonStyle,
+					$author$project$Widget$button,
+					$author$project$Data$Style$style.button,
 					{
 						icon: $mdgriffith$elm_ui$Element$none,
 						onPress: $elm$core$Maybe$Just(
@@ -17406,7 +17488,7 @@ var $author$project$Stateless$modal = F2(
 var $author$project$Stateless$ChangedMultiSelected = function (a) {
 	return {$: 'ChangedMultiSelected', a: a};
 };
-var $author$project$Widget$multiSelect = function (_v0) {
+var $author$project$Internal$Select$multiSelect = function (_v0) {
 	var selected = _v0.selected;
 	var options = _v0.options;
 	var onSelect = _v0.onSelect;
@@ -17424,7 +17506,9 @@ var $author$project$Widget$multiSelect = function (_v0) {
 			}),
 		options);
 };
+var $author$project$Widget$multiSelect = $author$project$Internal$Select$multiSelect;
 var $author$project$Stateless$multiSelect = function (model) {
+	var buttonStyle = $author$project$Data$Style$style.button;
 	return _Utils_Tuple2(
 		'Multi Select',
 		A2(
@@ -17435,10 +17519,10 @@ var $author$project$Stateless$multiSelect = function (model) {
 				function (i) {
 					return $author$project$Widget$selectButton(
 						_Utils_update(
-							$author$project$Stateless$buttonStyle,
+							buttonStyle,
 							{
 								container: _Utils_ap(
-									$author$project$Stateless$buttonStyle.container,
+									buttonStyle.container,
 									(!i) ? $Orasund$elm_ui_framework$Framework$Group$left : ((i === 2) ? $Orasund$elm_ui_framework$Framework$Group$right : $Orasund$elm_ui_framework$Framework$Group$center))
 							}));
 				},
@@ -17462,6 +17546,7 @@ var $author$project$Stateless$ChangedSelected = function (a) {
 	return {$: 'ChangedSelected', a: a};
 };
 var $author$project$Stateless$select = function (model) {
+	var buttonStyle = $author$project$Data$Style$style.button;
 	return _Utils_Tuple2(
 		'Select',
 		A2(
@@ -17472,10 +17557,10 @@ var $author$project$Stateless$select = function (model) {
 				function (i) {
 					return $author$project$Widget$selectButton(
 						_Utils_update(
-							$author$project$Stateless$buttonStyle,
+							buttonStyle,
 							{
 								container: _Utils_ap(
-									$author$project$Stateless$buttonStyle.container,
+									buttonStyle.container,
 									(!i) ? $Orasund$elm_ui_framework$Framework$Group$left : ((i === 2) ? $Orasund$elm_ui_framework$Framework$Group$right : $Orasund$elm_ui_framework$Framework$Group$center))
 							}));
 				},
@@ -17521,26 +17606,12 @@ var $author$project$Widget$tab = F3(
 					content(options.selected)
 				]));
 	});
-var $Orasund$elm_ui_framework$Framework$Group$top = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Border$roundEach(
-		{bottomLeft: 0, bottomRight: 0, topLeft: 4, topRight: 4})
-	]);
-var $author$project$Stateless$tabButtonStyle = {
-	active: $Orasund$elm_ui_framework$Framework$Color$primary,
-	container: _Utils_ap($Orasund$elm_ui_framework$Framework$Button$simple, $Orasund$elm_ui_framework$Framework$Group$top),
-	disabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
-	label: _List_fromArray(
-		[
-			$mdgriffith$elm_ui$Element$spacing(8)
-		])
-};
 var $author$project$Stateless$tab = function (model) {
 	return _Utils_Tuple2(
 		'Tab',
 		A3(
 			$author$project$Widget$tab,
-			{button: $author$project$Stateless$tabButtonStyle, containerColumn: $Orasund$elm_ui_framework$Framework$Grid$compact, optionRow: $Orasund$elm_ui_framework$Framework$Grid$simple},
+			{button: $author$project$Data$Style$style.tabButton, containerColumn: $Orasund$elm_ui_framework$Framework$Grid$compact, optionRow: $Orasund$elm_ui_framework$Framework$Grid$simple},
 			{
 				onSelect: A2($elm$core$Basics$composeR, $author$project$Stateless$ChangedTab, $elm$core$Maybe$Just),
 				options: A2(
@@ -17588,7 +17659,6 @@ var $author$project$Stateless$SetTextInput = function (a) {
 var $author$project$Stateless$ToggleTextInputChip = function (a) {
 	return {$: 'ToggleTextInputChip', a: a};
 };
-var $author$project$Stateless$chipButton = {active: $Orasund$elm_ui_framework$Framework$Color$primary, container: $Orasund$elm_ui_framework$Framework$Tag$simple, disabled: _List_Nil, label: $Orasund$elm_ui_framework$Framework$Grid$simple};
 var $elm$core$Dict$diff = F2(
 	function (t1, t2) {
 		return A3(
@@ -17617,35 +17687,7 @@ var $author$project$Stateless$textInput = function (model) {
 				[
 					A2(
 					$author$project$Widget$textInput,
-					{
-						chip: $author$project$Stateless$chipButton,
-						chipsRow: _List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
-								$mdgriffith$elm_ui$Element$spacing(4)
-							]),
-						containerRow: _Utils_ap(
-							$Orasund$elm_ui_framework$Framework$Button$simple,
-							_Utils_ap(
-								$Orasund$elm_ui_framework$Framework$Color$light,
-								_Utils_ap(
-									_List_fromArray(
-										[
-											$mdgriffith$elm_ui$Element$Border$color(
-											A3($mdgriffith$elm_ui$Element$rgb255, 186, 189, 182)),
-											$mdgriffith$elm_ui$Element$Font$alignLeft,
-											$mdgriffith$elm_ui$Element$padding(8),
-											$mdgriffith$elm_ui$Element$height(
-											$mdgriffith$elm_ui$Element$px(42))
-										]),
-									$Orasund$elm_ui_framework$Framework$Grid$simple))),
-						input: _Utils_ap(
-							$Orasund$elm_ui_framework$Framework$Color$light,
-							_List_fromArray(
-								[
-									$mdgriffith$elm_ui$Element$padding(0)
-								]))
-					},
+					$author$project$Data$Style$style.textInput,
 					{
 						chips: A2(
 							$elm$core$List$map,
@@ -17924,7 +17966,7 @@ var $author$project$Example$view = function (model) {
 					dialog: m.displayDialog ? $elm$core$Maybe$Just(
 						A2(
 							$author$project$Widget$dialog,
-							$author$project$Example$style.dialog,
+							$author$project$Data$Style$style.dialog,
 							{
 								accept: $elm$core$Maybe$Just(
 									{
@@ -17961,7 +18003,7 @@ var $author$project$Example$view = function (model) {
 					onChangedSidebar: $author$project$Example$ChangedSidebar,
 					search: $elm$core$Maybe$Just(
 						{label: 'Search', onChange: $author$project$Example$ChangedSearch, text: m.search.raw}),
-					style: $author$project$Example$style,
+					style: $author$project$Data$Style$style,
 					title: A2(
 						$mdgriffith$elm_ui$Element$el,
 						$Orasund$elm_ui_framework$Framework$Heading$h1,
diff --git a/example/elm.json b/example/elm.json
index e7ae95b..9f18fca 100644
--- a/example/elm.json
+++ b/example/elm.json
@@ -14,6 +14,7 @@
             "elm/svg": "1.0.1",
             "elm/time": "1.0.0",
             "elm-community/intdict": "3.0.0",
+            "feathericons/elm-feather": "1.4.0",
             "jasonliang512/elm-heroicons": "1.0.2",
             "mdgriffith/elm-ui": "1.1.5",
             "turboMaCk/queue": "1.0.2",
diff --git a/example/src/Component.elm b/example/src/Component.elm
index 892e2f9..e2b4d5a 100644
--- a/example/src/Component.elm
+++ b/example/src/Component.elm
@@ -21,7 +21,7 @@ import Html.Attributes as Attributes
 import Set exposing (Set)
 import Time
 import Widget
-import Widget.Button as Button exposing (ButtonStyle)
+import Widget.Style exposing (ButtonStyle)
 import Widget.FilterSelect as FilterSelect
 import Widget.FilterMultiSelect as FilterMultiSelect
 import Widget.ScrollingNav as ScrollingNav
diff --git a/example/src/Data/Style.elm b/example/src/Data/Style.elm
index e341ab0..6b95d84 100644
--- a/example/src/Data/Style.elm
+++ b/example/src/Data/Style.elm
@@ -1,8 +1,7 @@
 module Data.Style exposing (style)
 
 import Widget exposing (TextInputStyle)
-import Widget.Button exposing (ButtonStyle)
-import Style exposing (Style)
+import Widget.Style exposing (Style,ButtonStyle)
 import Element exposing (Attribute)
 import Element.Input as Input
 import Element.Font as Font
@@ -95,12 +94,14 @@ style : Style
         , dismiss : ButtonStyle msg
         }
     , button : ButtonStyle msg
+    , primaryButton : ButtonStyle msg
     , tabButton : ButtonStyle msg
     , textInput : TextInputStyle msg
     , chipButton : ButtonStyle msg
     } msg
 style =
     { button = buttonStyle
+    , primaryButton = simpleButton
     , tabButton = tabButtonStyle
     , textInput = textInputStyle
     , chipButton = chipButtonStyle
diff --git a/example/src/Example.elm b/example/src/Example.elm
index 63b623e..051e028 100644
--- a/example/src/Example.elm
+++ b/example/src/Example.elm
@@ -29,7 +29,7 @@ import Stateless
 import Task
 import Time
 import Widget
-import Widget.Button exposing (ButtonStyle)
+import Widget.Style exposing (ButtonStyle)
 import Widget.FilterSelect as FilterSelect
 import Widget.ScrollingNav as ScrollingNav
 import Widget.Snackbar as Snackbar
diff --git a/example/src/Icons.elm b/example/src/Icons.elm
index 1dc7422..bf413af 100644
--- a/example/src/Icons.elm
+++ b/example/src/Icons.elm
@@ -8,6 +8,10 @@ module Icons exposing
     , square
     , search
     , slash
+    , repeat
+    , chevronDown
+    , chevronRight
+    , chevronLeft
     )
 
 import Html exposing (Html)
@@ -29,6 +33,33 @@ svgFeatherIcon className =
         , width "16"
         ]
 
+chevronDown : Html msg
+chevronDown =
+    svgFeatherIcon "chevron-down"
+        [ Svg.polyline [ points "6 9 12 15 18 9" ] []
+        ]
+
+
+chevronRight : Html msg
+chevronRight =
+    svgFeatherIcon "chevron-right"
+        [ Svg.polyline [ points "9 18 15 12 9 6" ] []
+        ]
+chevronLeft : Html msg
+chevronLeft =
+    svgFeatherIcon "chevron-left"
+        [ Svg.polyline [ points "15 18 9 12 15 6" ] []
+        ]
+
+repeat : Html msg
+repeat =
+    svgFeatherIcon "repeat"
+        [ Svg.polyline [ points "17 1 21 5 17 9" ] []
+        , Svg.path [ d "M3 11V9a4 4 0 0 1 4-4h14" ] []
+        , Svg.polyline [ points "7 23 3 19 7 15" ] []
+        , Svg.path [ d "M21 13v2a4 4 0 0 1-4 4H3" ] []
+        ]
+
 
 book : Html msg
 book =
diff --git a/example/src/Stateless.elm b/example/src/Stateless.elm
index b77f9a4..ace8b0e 100644
--- a/example/src/Stateless.elm
+++ b/example/src/Stateless.elm
@@ -17,7 +17,7 @@ import Heroicons.Solid as Heroicons
 import Html exposing (Html)
 import Html.Attributes as Attributes
 import Set exposing (Set)
-import Widget.Button as Button exposing (ButtonStyle)
+import Widget.Style exposing (ButtonStyle)
 import Layout exposing (Part(..))
 import Icons
 import Widget
@@ -208,12 +208,11 @@ collapsable model =
         , isCollapsed = model.isCollapsed
         , label =
             Element.row (Grid.simple ++ [Element.width<| Element.fill])
-                [ Element.html <|
-                    if model.isCollapsed then
-                        Heroicons.cheveronRight [ Attributes.width 20 ]
+                [  if model.isCollapsed then
+                        Icons.chevronRight |> Element.html |> Element.el []
 
                     else
-                        Heroicons.cheveronDown [ Attributes.width 20 ]
+                        Icons.chevronDown  |> Element.html |> Element.el []
                 , Element.text <| "Title"
                 ]
         , content = Element.text <| "Hello World"
@@ -293,11 +292,21 @@ carousel model =
         , current = model.carousel
         , label =
             \c ->
-                [ Input.button [ Element.centerY ]
-                    { onPress = Just <| SetCarousel <| model.carousel - 1
-                    , label =
-                        Heroicons.cheveronLeft [ Attributes.width 20 ]
+                [ Element.el [Element.centerY] <|
+                Widget.iconButton style.button
+                    { onPress = 
+                        model.carousel - 1
+                        |> \i ->
+                            if i < 0 then
+                                Nothing
+                            else
+                                SetCarousel i
+                                |> Just
+                    , icon =
+                        Icons.chevronLeft
                             |> Element.html
+                            |> Element.el []
+                    , text = "Previous"
                     }
                 , Element.el
                     (Card.simple
@@ -308,11 +317,20 @@ carousel model =
                     )
                   <|
                     Element.none
-                , Input.button [ Element.centerY ]
-                    { onPress = Just <| SetCarousel <| model.carousel + 1
-                    , label =
-                        Heroicons.cheveronRight [ Attributes.width 20 ]
+                , Element.el [ Element.centerY ] <|
+                    Widget.iconButton style.button
+                    { onPress = model.carousel + 1
+                        |> \i ->
+                            if i >= 4 then
+                                Nothing
+                            else
+                                SetCarousel i
+                                |> Just
+                    , icon =
+                        Icons.chevronRight 
                             |> Element.html
+                            |> Element.el []
+                    , text = "Next"
                     }
                 ]
                     |> Element.row (Grid.simple ++ [ Element.centerX, Element.width <| Element.shrink ])
@@ -322,20 +340,27 @@ carousel model =
 iconButton : Model -> (String,Element Msg)
 iconButton model =
     ( "Icon Button"
-    , [Button.view style.button
-        { text = "disable me"
-        , icon = Icons.slash |> Element.html |> Element.el []        , onPress =
-            if model.button then
-                Just <| ToggleButton False
-            else
-                Nothing
-        }
-    , Button.view style.button
-        { text = "reset button"
-        , icon = Element.none       
-        , onPress =  Just <| ToggleButton True
-        }
-    ] |> Element.column Grid.simple
+    ,   [   [ Widget.button style.primaryButton
+                { text = "disable me"
+                , icon = Icons.slash |> Element.html |> Element.el []        , onPress =
+                    if model.button then
+                        Just <| ToggleButton False
+                    else
+                        Nothing
+                }
+            , Widget.iconButton style.button
+                { text = "reset"
+                , icon = Icons.repeat |> Element.html |> Element.el []       
+                , onPress =  Just <| ToggleButton True
+                }
+            ]
+            |> Element.row Grid.simple
+        , Widget.button style.button
+            { text = "reset button"
+            , icon = Element.none       
+            , onPress =  Just <| ToggleButton True
+            }
+        ] |> Element.column Grid.simple
     )
 
 textInput : Model -> (String,Element Msg)
diff --git a/src/Core/Utillity.elm b/src/Core/Utillity.elm
deleted file mode 100644
index 2aee893..0000000
--- a/src/Core/Utillity.elm
+++ /dev/null
@@ -1,30 +0,0 @@
-module Core.Utillity exposing (responsiveLayout)
-
-import Element exposing (Attribute, Element)
-import Html exposing (Html)
-import Html.Attributes as Attributes
-
-
-{-| taken from Orasund/elm-ui-framework
--}
-layout : List (Attribute msg) -> Element msg -> Html msg
-layout attributes =
-    Element.layoutWith
-        { options = layoutOptions
-        }
-        (layoutAttributes ++ attributes)
-
-
-{-| taken from Orasund/elm-ui-framework
--}
-responsiveLayout : List (Attribute msg) -> Element msg -> Html msg
-responsiveLayout attributes view =
-    Html.div []
-        [ Html.node "meta"
-            [ Attributes.attribute "name" "viewport"
-            , Attributes.attribute "content" "width=device-width, initial-scale=1.0"
-            ]
-            []
-        , layout attributes <|
-            view
-        ]
diff --git a/src/Widget/Button.elm b/src/Internal/Button.elm
similarity index 59%
rename from src/Widget/Button.elm
rename to src/Internal/Button.elm
index 6be1e10..610fafc 100644
--- a/src/Widget/Button.elm
+++ b/src/Internal/Button.elm
@@ -1,15 +1,15 @@
-module Widget.Button exposing
+module Internal.Button exposing
     ( Button
-    , ButtonStyle
     , TextButton
-    , view
-    , viewIconOnly
-    , viewTextOnly
+    , button
+    , iconButton
+    , textButton
     )
 
-import Element exposing (Attribute, Element)
+import Element exposing (Element)
 import Element.Input as Input
 import Element.Region as Region
+import Widget.Style exposing (ButtonStyle)
 
 
 type alias Button msg =
@@ -25,16 +25,8 @@ type alias TextButton msg =
     }
 
 
-type alias ButtonStyle msg =
-    { container : List (Attribute msg)
-    , disabled : List (Attribute msg)
-    , label : List (Attribute msg)
-    , active : List (Attribute msg)
-    }
-
-
-viewIconOnly : ButtonStyle msg -> Button msg -> Element msg
-viewIconOnly style { onPress, text, icon } =
+iconButton : ButtonStyle msg -> Button msg -> Element msg
+iconButton style { onPress, text, icon } =
     Input.button
         (style.container
             ++ (if onPress == Nothing then
@@ -51,19 +43,20 @@ viewIconOnly style { onPress, text, icon } =
         }
 
 
-viewTextOnly : ButtonStyle msg -> TextButton msg -> Element msg
-viewTextOnly style { onPress, text } =
-    view style
+textButton : ButtonStyle msg -> TextButton msg -> Element msg
+textButton style { onPress, text } =
+    button style
         { onPress = onPress
         , text = text
         , icon = Element.none
         }
 
 
-{-| The first argument can be used to define the spacing between the icon and the text
--}
-view : ButtonStyle msg -> Button msg -> Element msg
-view style { onPress, text, icon } =
+button :
+    ButtonStyle msg
+    -> Button msg
+    -> Element msg
+button style { onPress, text, icon } =
     Input.button
         (style.container
             ++ (if onPress == Nothing then
diff --git a/src/Internal/Dialog.elm b/src/Internal/Dialog.elm
new file mode 100644
index 0000000..5da2108
--- /dev/null
+++ b/src/Internal/Dialog.elm
@@ -0,0 +1,90 @@
+module Internal.Dialog exposing (Dialog, dialog, modal)
+
+import Element exposing (Attribute, Element)
+import Element.Background as Background
+import Element.Events as Events
+import Internal.Button as Button exposing (TextButton)
+import Widget.Style exposing (DialogStyle)
+
+
+type alias Dialog msg =
+    { title : Maybe String
+    , body : Element msg
+    , accept : Maybe (TextButton msg)
+    , dismiss : Maybe (TextButton msg)
+    }
+
+
+modal : { onDismiss : Maybe msg, content : Element msg } -> List (Attribute msg)
+modal { onDismiss, content } =
+    [ Element.none
+        |> Element.el
+            ([ Element.width <| Element.fill
+             , Element.height <| Element.fill
+             , Background.color <| Element.rgba255 0 0 0 0.5
+             ]
+                ++ (onDismiss
+                        |> Maybe.map (Events.onClick >> List.singleton)
+                        |> Maybe.withDefault []
+                   )
+            )
+        |> Element.inFront
+    , content |> Element.inFront
+    , Element.clip
+    ]
+
+
+dialog :
+    DialogStyle msg
+    -> Dialog msg
+    -> List (Attribute msg)
+dialog style { title, body, accept, dismiss } =
+    { onDismiss =
+        case ( accept, dismiss ) of
+            ( Nothing, Nothing ) ->
+                Nothing
+
+            ( Nothing, Just { onPress } ) ->
+                onPress
+
+            ( Just _, _ ) ->
+                Nothing
+    , content =
+        Element.column
+            (style.containerColumn
+                ++ [ Element.centerX
+                   , Element.centerY
+                   ]
+            )
+            [ title
+                |> Maybe.map
+                    (Element.text
+                        >> Element.el style.title
+                    )
+                |> Maybe.withDefault Element.none
+            , body
+            , Element.row
+                (style.buttonRow
+                    ++ [ Element.alignRight
+                       , Element.width <| Element.shrink
+                       ]
+                )
+                (case ( accept, dismiss ) of
+                    ( Just acceptButton, Nothing ) ->
+                        acceptButton
+                            |> Button.textButton style.accept
+                            |> List.singleton
+
+                    ( Just acceptButton, Just dismissButton ) ->
+                        [ dismissButton
+                            |> Button.textButton style.dismiss
+                        , acceptButton
+                            |> Button.textButton style.accept
+                        ]
+
+                    _ ->
+                        []
+                )
+            ]
+    }
+        |> modal
diff --git a/src/Internal/Select.elm b/src/Internal/Select.elm
new file mode 100644
index 0000000..1c93b21
--- /dev/null
+++ b/src/Internal/Select.elm
@@ -0,0 +1,79 @@
+module Internal.Select exposing (multiSelect, select, selectButton)
+
+import Element exposing (Element)
+import Internal.Button as Button exposing (Button)
+import Set exposing (Set)
+import Widget.Style exposing (ButtonStyle)
+
+
+type alias Select msg =
+    { selected : Maybe Int
+    , options :
+        List
+            { text : String
+            , icon : Element Never
+            }
+    , onSelect : Int -> Maybe msg
+    }
+
+
+type alias MultiSelect msg =
+    { selected : Set Int
+    , options :
+        List
+            { text : String
+            , icon : Element Never
+            }
+    , onSelect : Int -> Maybe msg
+    }
+
+
+selectButton :
+    ButtonStyle msg
+    -> ( Bool, Button msg )
+    -> Element msg
+selectButton style ( selected, b ) =
+    b
+        |> Button.button
+            { style
+                | container =
+                    style.container
+                        ++ (if selected then
+                                style.active
+
+                            else
+                                []
+                           )
+            }
+
+
+select :
+    Select msg
+    -> List ( Bool, Button msg )
+select { selected, options, onSelect } =
+    options
+        |> List.indexedMap
+            (\i a ->
+                ( selected == Just i
+                , { onPress = i |> onSelect
+                  , text = a.text
+                  , icon = a.icon
+                  }
+                )
+            )
+
+
+multiSelect :
+    MultiSelect msg
+    -> List ( Bool, Button msg )
+multiSelect { selected, options, onSelect } =
+    options
+        |> List.indexedMap
+            (\i a ->
+                ( selected |> Set.member i
+                , { onPress = i |> onSelect
+                  , text = a.text
+                  , icon = a.icon
+                  }
+                )
+            )
diff --git a/src/Layout.elm b/src/Layout.elm
index 46a5183..56388ea 100644
--- a/src/Layout.elm
+++ b/src/Layout.elm
@@ -4,10 +4,9 @@ import Array
 import Element exposing (Attribute, DeviceClass(..), Element)
 import Element.Input as Input
 import Html exposing (Html)
-import Style exposing (Style)
-import Widget exposing (Select)
-import Widget.Button as Button exposing (Button)
+import Widget exposing (Button, Select)
 import Widget.Snackbar as Snackbar exposing (Message)
+import Widget.Style exposing (Style)
 
 
 type Part
@@ -62,7 +61,7 @@ view :
     List (Attribute msg)
     ->
         { window : { height : Int, width : Int }
-        , dialog : Maybe { onDismiss : Maybe msg, content : Element msg }
+        , dialog : Maybe (List (Attribute msg))
         , content : Element msg
         , layout : Layout msg
         , title : Element msg
@@ -117,7 +116,7 @@ view attributes { search, title, onChangedSidebar, menu, actions, window, dialog
                     || (deviceClass == Tablet)
                     || ((menu.options |> List.length) > 5)
                then
-                [ Button.viewIconOnly style.menuButton
+                [ Widget.iconButton style.menuButton
                     { onPress = Just <| onChangedSidebar <| Just LeftSheet
                     , icon = style.menuIcon |> Element.map never
                     , text = "Menu"
@@ -137,7 +136,7 @@ view attributes { search, title, onChangedSidebar, menu, actions, window, dialog
                 [ title
                 , menu
                     |> Widget.select
-                    |> List.map (Style.menuTabButton style)
+                    |> List.map (Widget.selectButton style.menuTabButton)
                     |> Element.row
                         [ Element.width <| Element.shrink
                         ]
@@ -169,7 +168,7 @@ view attributes { search, title, onChangedSidebar, menu, actions, window, dialog
                     |> Maybe.map
                         (\{ label } ->
                             if deviceClass == Tablet then
-                                [ Button.view style.menuButton
+                                [ Widget.button style.menuButton
                                     { onPress = Just <| onChangedSidebar <| Just Search
                                     , icon = style.searchIcon
                                     , text = label
@@ -177,7 +176,7 @@ view attributes { search, title, onChangedSidebar, menu, actions, window, dialog
                                 ]
 
                             else if deviceClass == Phone then
-                                [ Style.menuIconButton style
+                                [ Widget.iconButton style.menuButton
                                     { onPress = Just <| onChangedSidebar <| Just Search
                                     , icon = style.searchIcon
                                     , text = label
@@ -191,16 +190,16 @@ view attributes { search, title, onChangedSidebar, menu, actions, window, dialog
               , primaryActions
                     |> List.map
                         (if deviceClass == Phone then
-                            Style.menuIconButton style
+                            Widget.iconButton style.menuButton
 
                          else
-                            Button.view style.menuButton
+                            Widget.button style.menuButton
                         )
               , if moreActions |> List.isEmpty then
                     []
 
                 else
-                    [ Button.viewIconOnly style.menuButton
+                    [ Widget.iconButton style.menuButton
                         { onPress = Just <| onChangedSidebar <| Just RightSheet
                         , icon = style.moreVerticalIcon
                         , text = "More"
@@ -242,7 +241,7 @@ view attributes { search, title, onChangedSidebar, menu, actions, window, dialog
                       ]
                     , menu
                         |> Widget.select
-                        |> List.map (Style.sheetButton style)
+                        |> List.map (Widget.selectButton style.sheetButton)
                     ]
                         |> List.concat
                         |> Element.column [ Element.width <| Element.fill ]
@@ -255,7 +254,7 @@ view attributes { search, title, onChangedSidebar, menu, actions, window, dialog
 
                 Just RightSheet ->
                     moreActions
-                        |> List.map (Button.view style.sheetButton)
+                        |> List.map (Widget.button style.sheetButton)
                         |> Element.column [ Element.width <| Element.fill ]
                         |> Element.el
                             (style.sheet
@@ -302,7 +301,7 @@ view attributes { search, title, onChangedSidebar, menu, actions, window, dialog
                     (Element.height <| Element.px <| window.height)
                         :: (case dialog of
                                 Just dialogConfig ->
-                                    Widget.modal dialogConfig
+                                    dialogConfig
 
                                 Nothing ->
                                     Widget.modal
diff --git a/src/Widget.elm b/src/Widget.elm
index 2a7e342..532ef86 100644
--- a/src/Widget.elm
+++ b/src/Widget.elm
@@ -1,23 +1,123 @@
 module Widget exposing
-    ( select, multiSelect, collapsable, carousel, modal, tab, dialog
-    , Dialog, Select, TextInputStyle, selectButton, textInput
+    ( Button, TextButton, iconButton, textButton, button
+    , Select, MultiSelect, selectButton, select, multiSelect
+    , Dialog, modal, dialog
+    , TextInputStyle, textInput, collapsable, carousel, tab
     )
 
 {-| This module contains functions for displaying data.
 
-@docs select, multiSelect, collapsable, carousel, modal, tab, dialog
+
+# Buttons
+
+@docs Button, TextButton, iconButton, textButton, button
+
+
+# Select
+
+@docs Select, MultiSelect, selectButton, select, multiSelect
+
+
+# Dialog
+
+@docs Dialog, modal, dialog
+
+
+# Other Widgets
+
+@docs TextInputStyle, textInput, collapsable, carousel, tab
 
 -}
 
 import Array exposing (Array)
 import Element exposing (Attribute, Element)
-import Element.Background as Background
-import Element.Events as Events
 import Element.Input as Input exposing (Placeholder)
+import Internal.Button as Button
+import Internal.Dialog as Dialog
+import Internal.Select as Select
 import Set exposing (Set)
-import Widget.Button as Button exposing (Button, ButtonStyle, TextButton)
+import Widget.Style exposing (ButtonStyle, DialogStyle)
 
 
+
+{----------------------------------------------------------
+- BUTTON
+----------------------------------------------------------}
+
+
+{-| A Button as a type
+-}
+type alias Button msg =
+    { text : String
+    , icon : Element Never
+    , onPress : Maybe msg
+    }
+
+
+{-| A Button with just text as a type
+-}
+type alias TextButton msg =
+    { text : String
+    , onPress : Maybe msg
+    }
+
+
+{-| A button containing only an icon, the text is used for screenreaders.
+-}
+iconButton :
+    ButtonStyle msg
+    ->
+        { text : String
+        , icon : Element Never
+        , onPress : Maybe msg
+        }
+    -> Element msg
+iconButton =
+    Button.iconButton
+
+
+{-| A button with just text and not icon.
+-}
+textButton :
+    ButtonStyle msg
+    ->
+        { textButton
+            | text : String
+            , onPress : Maybe msg
+        }
+    -> Element msg
+textButton style { text, onPress } =
+    Button.textButton style
+        { text = text
+        , onPress = onPress
+        }
+
+
+{-| A button containing a text and an icon.
+-}
+button :
+    ButtonStyle msg
+    ->
+        { text : String
+        , icon : Element Never
+        , onPress : Maybe msg
+        }
+    -> Element msg
+button =
+    Button.button
+
+
+
+{----------------------------------------------------------
+- SELECT
+----------------------------------------------------------}
+
+
+{-| A list of options with at most one selected.
+
+Alternaitve Name: Choice
+
+-}
 type alias Select msg =
     { selected : Maybe Int
     , options :
@@ -29,64 +129,12 @@ type alias Select msg =
     }
 
 
-type alias Dialog msg =
-    { title : Maybe String
-    , body : Element msg
-    , accept : Maybe (TextButton msg)
-    , dismiss : Maybe (TextButton msg)
-    }
+{-| A list of options with multiple selected.
 
+Alternative Name: Options
 
-type alias TextInputStyle msg =
-    { chip : ButtonStyle msg
-    , containerRow : List (Attribute msg)
-    , chipsRow : List (Attribute msg)
-    , input : List (Attribute msg)
-    }
-
-
-{-| A simple button
 -}
-selectButton :
-    ButtonStyle msg
-    -> ( Bool, Button msg )
-    -> Element msg
-selectButton style ( selected, b ) =
-    b
-        |> Button.view
-            { style
-                | container =
-                    style.container
-                        ++ (if selected then
-                                style.active
-
-                            else
-                                []
-                           )
-            }
-
-
-{-| Selects one out of multiple options. This can be used for radio buttons or Menus.
--}
-select :
-    Select msg
-    -> List ( Bool, Button msg )
-select { selected, options, onSelect } =
-    options
-        |> List.indexedMap
-            (\i a ->
-                ( selected == Just i
-                , { onPress = i |> onSelect
-                  , text = a.text
-                  , icon = a.icon
-                  }
-                )
-            )
-
-
-{-| Selects multible options. This can be used for checkboxes.
--}
-multiSelect :
+type alias MultiSelect msg =
     { selected : Set Int
     , options :
         List
@@ -95,18 +143,90 @@ multiSelect :
             }
     , onSelect : Int -> Maybe msg
     }
+
+
+{-| A simple button that can be selected.
+-}
+selectButton :
+    ButtonStyle msg
+    -> ( Bool, Button msg )
+    -> Element msg
+selectButton =
+    Select.selectButton
+
+
+{-| Selects one out of multiple options. This can be used for radio buttons or Menus.
+-}
+select :
+    Select msg
     -> List ( Bool, Button msg )
-multiSelect { selected, options, onSelect } =
-    options
-        |> List.indexedMap
-            (\i a ->
-                ( selected |> Set.member i
-                , { onPress = i |> onSelect
-                  , text = a.text
-                  , icon = a.icon
-                  }
-                )
-            )
+select =
+    Select.select
+
+
+{-| Selects multible options. This can be used for checkboxes.
+-}
+multiSelect :
+    MultiSelect msg
+    -> List ( Bool, Button msg )
+multiSelect =
+    Select.multiSelect
+
+
+
+{----------------------------------------------------------
+- DIALOG
+----------------------------------------------------------}
+
+
+{-| A Dialog window displaying an important choice.
+-}
+type alias Dialog msg =
+    { title : Maybe String
+    , body : Element msg
+    , accept : Maybe (TextButton msg)
+    , dismiss : Maybe (TextButton msg)
+    }
+
+
+{-| A modal.
+
+NOTE: to stop the screen from scrolling, set the height of the layout to the height of the screen.
+
+-}
+modal : { onDismiss : Maybe msg, content : Element msg } -> List (Attribute msg)
+modal =
+    Dialog.modal
+
+
+{-| A Dialog Window.
+-}
+dialog :
+    DialogStyle msg
+    ->
+        { title : Maybe String
+        , body : Element msg
+        , accept : Maybe (TextButton msg)
+        , dismiss : Maybe (TextButton msg)
+        }
+    -> List (Attribute msg)
+dialog =
+    Dialog.dialog
+
+
+
+{----------------------------------------------------------
+- OTHER STATELESS WIDGETS
+----------------------------------------------------------}
+
+
+{-| -}
+type alias TextInputStyle msg =
+    { chip : ButtonStyle msg
+    , containerRow : List (Attribute msg)
+    , chipsRow : List (Attribute msg)
+    , input : List (Attribute msg)
+    }
 
 
 {-| -}
@@ -123,7 +243,7 @@ textInput :
 textInput style { chips, placeholder, label, text, onChange } =
     Element.row style.containerRow
         [ chips
-            |> List.map (Button.view style.chip)
+            |> List.map (Button.button style.chip)
             |> Element.row style.chipsRow
         , Input.text style.input
             { onChange = onChange
@@ -183,114 +303,7 @@ tab style options content =
         |> Element.column style.containerColumn
 
 
-dialog :
-    { containerColumn : List (Attribute msg)
-    , title : List (Attribute msg)
-    , buttonRow : List (Attribute msg)
-    , accept : ButtonStyle msg
-    , dismiss : ButtonStyle msg
-    }
-    -> Dialog msg
-    -> { onDismiss : Maybe msg, content : Element msg }
-dialog style { title, body, accept, dismiss } =
-    { onDismiss =
-        case ( accept, dismiss ) of
-            ( Nothing, Nothing ) ->
-                Nothing
-
-            ( Nothing, Just { onPress } ) ->
-                onPress
-
-            ( Just _, _ ) ->
-                Nothing
-    , content =
-        Element.column
-            (style.containerColumn
-                ++ [ Element.centerX
-                   , Element.centerY
-                   ]
-            )
-            [ title
-                |> Maybe.map
-                    (Element.text
-                        >> Element.el style.title
-                    )
-                |> Maybe.withDefault Element.none
-            , body
-            , Element.row
-                (style.buttonRow
-                    ++ [ Element.alignRight
-                       , Element.width <| Element.shrink
-                       ]
-                )
-                (case ( accept, dismiss ) of
-                    ( Just acceptButton, Nothing ) ->
-                        acceptButton
-                            |> Button.viewTextOnly style.accept
-                            |> List.singleton
-
-                    ( Just acceptButton, Just dismissButton ) ->
-                        [ dismissButton
-                            |> Button.viewTextOnly style.dismiss
-                        , acceptButton
-                            |> Button.viewTextOnly style.accept
-                        ]
-
-                    _ ->
-                        []
-                )
-            ]
-    }
-
-
-{-| A modal.
-
-NOTE: to stop the screen from scrolling, just set the height of the layout to the height of the screen.
-
--}
-modal : { onDismiss : Maybe msg, content : Element msg } -> List (Attribute msg)
-modal { onDismiss, content } =
-    [ Element.el
-        ([ Element.width <| Element.fill
-         , Element.height <| Element.fill
-         , Background.color <| Element.rgba255 0 0 0 0.5
-         ]
-            ++ (onDismiss
-                    |> Maybe.map (Events.onClick >> List.singleton)
-                    |> Maybe.withDefault []
-               )
-        )
-        content
-        |> Element.inFront
-    , Element.clip
-    ]
-
-
 {-| A Carousel circles through a non empty list of contents.
-
-        Widget.carousel
-            {content = ("Blue",["Yellow", "Green" , "Red" ]|> Array.fromList)
-            ,current = model.carousel
-            , label = \c ->
-                [ Input.button [Element.centerY]
-                    { onPress = Just <|
-                         SetCarousel <|
-                            (\x -> if x < 0 then 0 else x) <|
-                                model.carousel - 1
-                    , label = "<" |> Element.text
-                    }
-                , c |> Element.text
-                , Input.button [Element.centerY]
-                    { onPress = Just <|
-                        SetCarousel <|
-                            (\x -> if x > 3 then 3 else x) <|
-                            model.carousel + 1
-                    , label = ">" |> Element.text
-                    }
-                ]
-                |> Element.row [Element.centerX, Element.width<| Element.shrink]
-            }
-
 -}
 carousel :
     { content : ( a, Array a )
diff --git a/src/Widget/FilterMultiSelect.elm b/src/Widget/FilterMultiSelect.elm
index da4f13e..4d0ac79 100644
--- a/src/Widget/FilterMultiSelect.elm
+++ b/src/Widget/FilterMultiSelect.elm
@@ -8,7 +8,7 @@ module Widget.FilterMultiSelect exposing (Model, Msg(..), init, update, viewInpu
 
 import Element.Input exposing (Placeholder)
 import Set exposing (Set)
-import Widget.Button exposing (Button)
+import Widget exposing (Button)
 
 
 {-| The Model containing the raw value, the selected value and all the possible options.
diff --git a/src/Widget/Snackbar.elm b/src/Widget/Snackbar.elm
index a4d90d0..2c03a61 100644
--- a/src/Widget/Snackbar.elm
+++ b/src/Widget/Snackbar.elm
@@ -20,7 +20,8 @@ module Widget.Snackbar exposing
 
 import Element exposing (Attribute, Element)
 import Queue exposing (Queue)
-import Widget.Button as Button exposing (ButtonStyle, TextButton)
+import Widget exposing (TextButton)
+import Widget.Style exposing (ButtonStyle)
 
 
 type alias Message msg =
@@ -123,7 +124,7 @@ view style toMessage model =
                             |> Element.paragraph style.text
                         , button
                             |> Maybe.map
-                                (Button.viewTextOnly style.button)
+                                (Widget.textButton style.button)
                             |> Maybe.withDefault Element.none
                         ]
                             |> Element.row style.row
diff --git a/src/Style.elm b/src/Widget/Style.elm
similarity index 54%
rename from src/Style.elm
rename to src/Widget/Style.elm
index 5fa852e..c1ca2ea 100644
--- a/src/Style.elm
+++ b/src/Widget/Style.elm
@@ -1,9 +1,24 @@
-module Style exposing (Style, menuButton, menuIconButton, menuTabButton, sheetButton)
+module Widget.Style exposing (ButtonStyle, DialogStyle, Style)
 
 import Element exposing (Attribute, Element)
 import Html exposing (Html)
-import Widget
-import Widget.Button as Button exposing (Button, ButtonStyle)
+
+
+type alias ButtonStyle msg =
+    { container : List (Attribute msg)
+    , disabled : List (Attribute msg)
+    , label : List (Attribute msg)
+    , active : List (Attribute msg)
+    }
+
+
+type alias DialogStyle msg =
+    { containerColumn : List (Attribute msg)
+    , title : List (Attribute msg)
+    , buttonRow : List (Attribute msg)
+    , accept : ButtonStyle msg
+    , dismiss : ButtonStyle msg
+    }
 
 
 type alias Style style msg =
@@ -27,23 +42,3 @@ type alias Style style msg =
         , search : List (Attribute msg)
         , searchFill : List (Attribute msg)
     }
-
-
-menuButton : Style style msg -> ( Bool, Button msg ) -> Element msg
-menuButton style =
-    Widget.selectButton style.menuButton
-
-
-menuIconButton : Style style msg -> Button msg -> Element msg
-menuIconButton style =
-    Button.viewIconOnly style.menuButton
-
-
-sheetButton : Style style msg -> ( Bool, Button msg ) -> Element msg
-sheetButton style =
-    Widget.selectButton style.sheetButton
-
-
-menuTabButton : Style style msg -> ( Bool, Button msg ) -> Element msg
-menuTabButton style =
-    Widget.selectButton style.menuTabButton

From 732a18720d35db474602e28118cf0c042b48256c Mon Sep 17 00:00:00 2001
From: Lucas Payr 
Date: Wed, 6 May 2020 14:29:28 +0200
Subject: [PATCH 06/14] starting work on List-Widget

---
 example/src/Component.elm                 | 233 -----------
 example/src/Data/Section.elm              |  17 +-
 example/src/Data/Style.elm                | 235 +----------
 example/src/Data/Style/ElmUiFramework.elm | 291 +++++++++++++
 example/src/Data/Style/Template.elm       | 142 +++++++
 example/src/Data/Theme.elm                |  17 +
 example/src/Example.elm                   | 298 ++++++++------
 example/src/Icons.elm                     |  41 +-
 example/src/Reusable.elm                  |  90 ++--
 example/src/Stateless.elm                 | 480 ++++++++++++----------
 src/Internal/Button.elm                   |   8 +-
 src/Internal/Dialog.elm                   |  22 +-
 src/Internal/ExpansionPanel.elm           |  46 +++
 src/Internal/List.elm                     | 108 +++++
 src/Internal/Select.elm                   |   4 +-
 src/Internal/Tab.elm                      |  24 ++
 src/Internal/TextInput.elm                |  34 ++
 src/Widget.elm                            | 151 ++++---
 src/Widget/FilterMultiSelect.elm          | 108 -----
 src/Widget/FilterSelect.elm               |  93 -----
 src/Widget/Snackbar.elm                   |  11 +-
 src/Widget/Style.elm                      |  69 +++-
 src/Widget/ValidatedInput.elm             | 161 --------
 23 files changed, 1373 insertions(+), 1310 deletions(-)
 delete mode 100644 example/src/Component.elm
 create mode 100644 example/src/Data/Style/ElmUiFramework.elm
 create mode 100644 example/src/Data/Style/Template.elm
 create mode 100644 example/src/Data/Theme.elm
 create mode 100644 src/Internal/ExpansionPanel.elm
 create mode 100644 src/Internal/List.elm
 create mode 100644 src/Internal/Tab.elm
 create mode 100644 src/Internal/TextInput.elm
 delete mode 100644 src/Widget/FilterMultiSelect.elm
 delete mode 100644 src/Widget/FilterSelect.elm
 delete mode 100644 src/Widget/ValidatedInput.elm

diff --git a/example/src/Component.elm b/example/src/Component.elm
deleted file mode 100644
index e2b4d5a..0000000
--- a/example/src/Component.elm
+++ /dev/null
@@ -1,233 +0,0 @@
-module Component exposing (Model, Msg(..), init, update, view)
-
-import Browser
-import Element exposing (Color, Element)
-import Element.Background as Background
-import Element.Input as Input
-import Element.Border as Border
-import Element.Font as Font
-import Framework
-import Framework.Button as Button
-import Framework.Card as Card
-import Framework.Color as Color
-import Framework.Grid as Grid
-import Framework.Group as Group
-import Framework.Heading as Heading
-import Framework.Input as Input
-import Framework.Tag as Tag
-import Heroicons.Solid as Heroicons
-import Html exposing (Html)
-import Html.Attributes as Attributes
-import Set exposing (Set)
-import Time
-import Widget
-import Widget.Style exposing (ButtonStyle)
-import Widget.FilterSelect as FilterSelect
-import Widget.FilterMultiSelect as FilterMultiSelect
-import Widget.ScrollingNav as ScrollingNav
-import Widget.Snackbar as Snackbar
-import Widget.ValidatedInput as ValidatedInput
-import Data.Style exposing (style)
-
-type alias Model =
-    { filterSelect : FilterSelect.Model
-    , filterMultiSelect : FilterMultiSelect.Model
-    , validatedInput : ValidatedInput.Model () ( String, String )
-    }
-
-
-type Msg
-    = FilterSelectSpecific FilterSelect.Msg
-    | FilterMultiSelectSpecific FilterMultiSelect.Msg
-    | ValidatedInputSpecific ValidatedInput.Msg
-
-
-
-init : Model
-init =
-    { filterSelect =
-        [ "Apple"
-        , "Kiwi"
-        , "Strawberry"
-        , "Pineapple"
-        , "Mango"
-        , "Grapes"
-        , "Watermelon"
-        , "Orange"
-        , "Lemon"
-        , "Blueberry"
-        , "Grapefruit"
-        , "Coconut"
-        , "Cherry"
-        , "Banana"
-        ]
-            |> Set.fromList
-            |> FilterSelect.init
-    , filterMultiSelect =
-        [ "Apple"
-        , "Kiwi"
-        , "Strawberry"
-        , "Pineapple"
-        , "Mango"
-        , "Grapes"
-        , "Watermelon"
-        , "Orange"
-        , "Lemon"
-        , "Blueberry"
-        , "Grapefruit"
-        , "Coconut"
-        , "Cherry"
-        , "Banana"
-        ]
-            |> Set.fromList
-            |> FilterMultiSelect.init
-    , validatedInput =
-        ValidatedInput.init
-            { value = ( "John", "Doe" )
-            , validator =
-                \string ->
-                    case string |> String.split " " of
-                        [ first, second ] ->
-                            Ok ( first, second )
-
-                        _ ->
-                            Err ()
-            , toString =
-                \( first, second ) -> first ++ " " ++ second
-            }
-    }
-
-
-update : Msg -> Model -> ( Model, Cmd Msg )
-update msg model =
-    case msg of
-        FilterSelectSpecific m ->
-            ( { model
-                | filterSelect = model.filterSelect |> FilterSelect.update m
-              }
-            , Cmd.none
-            )
-
-        FilterMultiSelectSpecific m ->
-            ( { model
-                | filterMultiSelect = model.filterMultiSelect |> FilterMultiSelect.update m
-              }
-            , Cmd.none
-            )
-
-        ValidatedInputSpecific m ->
-            ( { model
-                | validatedInput = model.validatedInput |> ValidatedInput.update m
-              }
-            , Cmd.none
-            )
-
-
-filterSelect : FilterSelect.Model -> (String,Element Msg)
-filterSelect model =
-    ( "Filter Select"
-        , case model.selected of
-            Just selected ->
-                Element.row Grid.compact
-                    [ Element.el (Tag.simple ++ Group.left) <| Element.text <| selected
-                    , Input.button (Tag.simple ++ Group.right ++ Color.danger)
-                        { onPress = Just <| FilterSelectSpecific <| FilterSelect.Selected Nothing
-                        , label = Element.html <| Heroicons.x [ Attributes.width 16 ]
-                        }
-                    ]
-
-            Nothing ->
-                Element.column Grid.simple
-                    [ FilterSelect.viewInput Input.simple
-                        model
-                        { msgMapper = FilterSelectSpecific
-                        , placeholder =
-                            Just <|
-                                Input.placeholder [] <|
-                                    Element.text <|
-                                        "Fruit"
-                        , label = "Fruit"
-                        }
-                    , model
-                        |> FilterSelect.viewOptions
-                        |> List.map
-                            (\string ->
-                                Input.button (Button.simple ++ Tag.simple)
-                                    { onPress = Just <| FilterSelectSpecific <| FilterSelect.Selected <| Just <| string
-                                    , label = Element.text string
-                                    }
-                            )
-                        |> Element.wrappedRow [ Element.spacing 10 ]
-                    ]
-    )
-
-filterMultiSelect : FilterMultiSelect.Model -> (String,Element Msg)
-filterMultiSelect model =
-    ( "Filter Multi Select"
-    ,   [ FilterMultiSelect.viewInput model
-            { msgMapper = FilterMultiSelectSpecific
-            , placeholder =
-                Just <|
-                    Input.placeholder [] <|
-                        Element.text <|
-                            "Fruit"
-            , label = "Fruit"
-            , toChip = \string ->
-                { text = string
-                , onPress = Just <| FilterMultiSelectSpecific <| FilterMultiSelect.ToggleSelected <| string
-                , icon = Element.none
-                }
-            }
-            |> Widget.textInput style.textInput
-
-        , model
-            |> FilterMultiSelect.viewOptions
-            |> List.map
-                (\string ->
-                    Input.button (Button.simple ++ Tag.simple)
-                        { onPress = Just <| FilterMultiSelectSpecific <| FilterMultiSelect.ToggleSelected <| string
-                        , label = Element.text string
-                        }
-                )
-            |> Element.wrappedRow [ Element.spacing 10 ]
-        ]
-            |> Element.column Grid.simple
-    )
-
-validatedInput : ValidatedInput.Model () ( String, String ) -> (String,Element Msg)
-validatedInput model =
-    ( "Validated Input"
-        , ValidatedInput.view Input.simple
-            model
-            { label = "First Name, Sir Name"
-            , msgMapper = ValidatedInputSpecific
-            , placeholder = Nothing
-            , readOnly =
-                \maybeTuple ->
-                    Element.row Grid.compact
-                        [ maybeTuple
-                            |> (\( a, b ) -> a ++ " " ++ b)
-                            |> Element.text
-                            |> Element.el (Tag.simple ++ Group.left)
-                        , Heroicons.pencil [ Attributes.width 16 ]
-                            |> Element.html
-                            |> Element.el (Tag.simple ++ Group.right ++ Color.primary)
-                        ]
-            }
-    )
-
-view : (Msg -> msg) -> Model -> 
-    { title : String
-    , description : String
-    , items : List (String,Element msg)
-    }
-view msgMapper model =
-    { title = "Components"
-    , description = "Components have a Model, an Update- and sometimes even a Subscription-function. It takes some time to set them up correctly."
-    , items =
-        [ filterSelect model.filterSelect
-        , filterMultiSelect model.filterMultiSelect
-        , validatedInput model.validatedInput 
-        ]
-            |> List.map (Tuple.mapSecond (Element.map msgMapper) )
-    }
diff --git a/example/src/Data/Section.elm b/example/src/Data/Section.elm
index 4dfb07c..28d9d9a 100644
--- a/example/src/Data/Section.elm
+++ b/example/src/Data/Section.elm
@@ -1,19 +1,19 @@
-module Data.Section exposing (Section(..),asList,toString,fromString)
+module Data.Section exposing (Section(..), asList, fromString, toString)
+
 
 type Section
-    = ComponentViews
-    | ReusableViews
+    = ReusableViews
     | StatelessViews
 
+
 asList : List Section
 asList =
-    [ StatelessViews, ReusableViews, ComponentViews ]
+    [ StatelessViews, ReusableViews ]
+
 
 toString : Section -> String
 toString section =
     case section of
-        ComponentViews ->
-            "Component"
 
         ReusableViews ->
             "Reusable"
@@ -21,11 +21,10 @@ toString section =
         StatelessViews ->
             "Stateless"
 
+
 fromString : String -> Maybe Section
 fromString string =
     case string of
-        "Component" ->
-            Just ComponentViews
 
         "Reusable" ->
             Just ReusableViews
@@ -34,4 +33,4 @@ fromString string =
             Just StatelessViews
 
         _ ->
-            Nothing
\ No newline at end of file
+            Nothing
diff --git a/example/src/Data/Style.elm b/example/src/Data/Style.elm
index 6b95d84..ad1deb4 100644
--- a/example/src/Data/Style.elm
+++ b/example/src/Data/Style.elm
@@ -1,223 +1,20 @@
-module Data.Style exposing (style)
+module Data.Style exposing (Style)
 
-import Widget exposing (TextInputStyle)
-import Widget.Style exposing (Style,ButtonStyle)
 import Element exposing (Attribute)
-import Element.Input as Input
-import Element.Font as Font
-import Element.Border as Border
-import Framework
-import Framework.Button as Button
-import Framework.Card as Card
-import Framework.Color as Color
-import Framework.Grid as Grid
-import Framework.Group as Group
-import Framework.Heading as Heading
-import Framework.Input as Input
-import Framework.Tag as Tag
-import Icons
+import Widget.Style exposing (ButtonStyle, DialogStyle, ExpansionPanelStyle,
+    SnackbarStyle ,RowStyle,ColumnStyle,TextInputStyle,TabStyle)
 
-textButton : ButtonStyle msg
-textButton =
-    { container = Button.simple
-    , label = Grid.simple
-    , disabled = Color.disabled
-    , active = Color.primary
-    }
-
-simpleButton : ButtonStyle msg
-simpleButton =
-    { container = Button.simple ++ Color.primary
-    , label = Grid.simple
-    , disabled = Color.disabled
-    , active = Color.primary
-    }
-
-buttonStyle : ButtonStyle msg
-buttonStyle =
-    { label = [ Element.spacing 8]
-    , container = Button.simple
-    , disabled = Color.disabled
-    , active = Color.primary
-    }
-
-tabButtonStyle :ButtonStyle msg
-tabButtonStyle=
-    { label = [ Element.spacing 8]
-    , container = Button.simple ++ Group.top
-    , disabled = Color.disabled
-    , active = Color.primary
-    }
-
-textInputStyle =
-    { chip = chipButtonStyle
-    , chipsRow = 
-        [ Element.width <| Element.shrink
-        , Element.spacing <| 4
-        , Element.paddingEach
-            { top = 8
-            , left = 0
-            , right = 0
-            , bottom = 8
-            }
-        ]
-    , containerRow = 
-        Button.simple
-        ++ Color.light
-        ++ [ Border.color <| Element.rgb255 186 189 182
-            , Font.alignLeft
-            , Element.paddingXY 8 0
-            , Element.height <| Element.px <|42
-            ]
-        ++ Grid.simple
-    , input =
-        Color.light
-        ++ [ Element.padding 8
-        ]
-    }
-
-
-chipButtonStyle : ButtonStyle msg
-chipButtonStyle =
-    { container = Tag.simple
-    , disabled = []
-    , label = Grid.simple
-    , active = Color.primary
-    }
-
-style : Style
-    { dialog :
-        { containerColumn : List (Attribute msg)
-        , title : List (Attribute msg)
-        , buttonRow : List (Attribute msg)
-        , accept : ButtonStyle msg
-        , dismiss : ButtonStyle msg
+type alias Style msg =
+    Widget.Style.Style
+        { dialog : DialogStyle msg
+        , expansionPanel : ExpansionPanelStyle msg
+        , button : ButtonStyle msg
+        , primaryButton : ButtonStyle msg
+        , tab : TabStyle msg
+        , textInput : TextInputStyle msg
+        , chipButton : ButtonStyle msg
+        , row : RowStyle msg
+        , column : ColumnStyle msg
+        , cardColumn : ColumnStyle msg
         }
-    , button : ButtonStyle msg
-    , primaryButton : ButtonStyle msg
-    , tabButton : ButtonStyle msg
-    , textInput : TextInputStyle msg
-    , chipButton : ButtonStyle msg
-    } msg
-style =
-    { button = buttonStyle
-    , primaryButton = simpleButton
-    , tabButton = tabButtonStyle
-    , textInput = textInputStyle
-    , chipButton = chipButtonStyle
-    , dialog =
-        { containerColumn = 
-            Card.simple
-            ++ Grid.simple
-            ++ [ Element.width <| Element.minimum 280 <| Element.maximum  560 <| Element.fill ]
-        , title = Heading.h3
-        , buttonRow = 
-            Grid.simple ++
-            [ Element.paddingEach
-                { top = 28
-                , bottom = 0
-                , left = 0
-                , right = 0
-                }
-            ]
-        , accept = simpleButton
-        , dismiss = textButton
-        }
-    , snackbar = 
-        { row = 
-            Card.simple 
-            ++ Color.dark
-            ++ Grid.simple
-            ++ [ Element.paddingXY 8 6
-                , Element.height <| Element.px <|54]
-        , button = 
-            { label = Grid.simple
-            , container = Button.simple ++ Color.dark
-            , disabled = Color.disabled
-            , active = Color.primary
-            }
-        , text = [Element.paddingXY 8 0]
-        }
-    , layout = Framework.responsiveLayout
-    {--\a w ->
-        Html.div []
-        [ Html.node "meta"
-            [ Attributes.attribute "name" "viewport"
-            , Attributes.attribute "content" "width=device-width, initial-scale=1.0"
-            ]
-            []
-        , Element.layoutWith
-            {options = (Element.focusStyle
-                { borderColor = Nothing
-                , backgroundColor = Nothing
-                , shadow = Nothing
-                }
-                |> List.singleton)
-            }
-         (Framework.layoutAttributes ++ a) <| w
-        ]--}
-    , header =
-        Framework.container
-            ++ Color.dark
-            ++ [ Element.padding <| 0
-                , Element.height <| Element.px <| 42
-                ]
-    , menuButton =
-        { label = Grid.simple
-        , container = Button.simple ++ Group.center ++ Color.dark
-        , disabled = Color.disabled
-        , active = Color.primary
-        }
-    , sheetButton =
-        { container = 
-            Button.fill
-            ++ Group.center 
-            ++ Color.light
-            ++ [Font.alignLeft]
-        , label = Grid.simple
-        , disabled = Color.disabled
-        , active = Color.primary
-        }
-    , menuTabButton = 
-        { container =
-            [ Element.height <| Element.px <| 42
-            , Border.widthEach 
-                { top = 0,
-                left = 0,
-                right = 0,
-                bottom = 4
-                }
-            , Element.paddingEach
-                { top = 12
-                , left = 8
-                , right = 8
-                , bottom = 4
-                }
-            , Border.color Color.black
-            ]
-        , label = Grid.simple
-        , disabled = Color.disabled
-        , active = [ Border.color Color.turquoise ]
-        }
-    , sheet =
-        Color.light ++ [ Element.width <| Element.maximum 256 <| Element.fill]
-    , menuIcon =
-        Icons.menu |> Element.html |> Element.el []
-    , moreVerticalIcon =
-        Icons.moreVertical |> Element.html |> Element.el []
-    , spacing = 8
-    , title = Heading.h2
-    , searchIcon =
-        Icons.search |> Element.html |> Element.el []
-    , search =
-        Color.simple ++ 
-        Card.large ++
-        [Font.color <| Element.rgb255 0 0 0
-        , Element.padding 6
-        , Element.centerY
-        , Element.alignRight
-        ]
-    , searchFill =
-        Color.light
-        ++ Group.center
-    }
\ No newline at end of file
+        msg
\ No newline at end of file
diff --git a/example/src/Data/Style/ElmUiFramework.elm b/example/src/Data/Style/ElmUiFramework.elm
new file mode 100644
index 0000000..5f11b08
--- /dev/null
+++ b/example/src/Data/Style/ElmUiFramework.elm
@@ -0,0 +1,291 @@
+module Data.Style.ElmUiFramework exposing (style)
+
+import Element exposing (Attribute)
+import Element.Border as Border
+import Element.Font as Font
+import Element.Input as Input
+import Framework
+import Framework.Button as Button
+import Framework.Card as Card
+import Framework.Color as Color
+import Framework.Grid as Grid
+import Framework.Group as Group
+import Framework.Heading as Heading
+import Framework.Input as Input
+import Framework.Tag as Tag
+import Icons
+import Data.Style exposing (Style)
+import Widget.Style exposing (ButtonStyle, DialogStyle, ExpansionPanelStyle,
+    SnackbarStyle ,RowStyle,ColumnStyle,TextInputStyle,TabStyle)
+
+textButton : ButtonStyle msg
+textButton =
+    { container = Button.simple
+    , labelRow = Grid.simple
+    , ifDisabled = Color.disabled
+    , ifActive = Color.primary
+    }
+
+
+simpleButton : ButtonStyle msg
+simpleButton =
+    { container = Button.simple ++ Color.primary
+    , labelRow = Grid.simple
+    , ifDisabled = Color.disabled
+    , ifActive = Color.primary
+    }
+
+
+menuTabButton : ButtonStyle msg
+menuTabButton =
+    { container =
+        [ Element.height <| Element.px <| 42
+        , Border.widthEach
+            { top = 0
+            , left = 0
+            , right = 0
+            , bottom = 4
+            }
+        , Element.paddingEach
+            { top = 12
+            , left = 8
+            , right = 8
+            , bottom = 4
+            }
+        , Border.color Color.black
+        ]
+    , labelRow = Grid.simple
+    , ifDisabled = Color.disabled
+    , ifActive = [ Border.color Color.turquoise ]
+    }
+
+
+menuButton : ButtonStyle msg
+menuButton =
+    { labelRow = Grid.simple
+    , container = Button.simple ++ Group.center ++ Color.dark
+    , ifDisabled = Color.disabled
+    , ifActive = Color.primary
+    }
+
+
+sheetButton : ButtonStyle msg
+sheetButton =
+    { container =
+        Button.fill
+            ++ Group.center
+            ++ Color.light
+            ++ [ Font.alignLeft ]
+    , labelRow = Grid.simple
+    , ifDisabled = Color.disabled
+    , ifActive = Color.primary
+    }
+
+
+buttonStyle : ButtonStyle msg
+buttonStyle =
+    { labelRow = [ Element.spacing 8 ]
+    , container = Button.simple
+    , ifDisabled = Color.disabled
+    , ifActive = Color.primary
+    }
+
+
+snackbarButton : ButtonStyle msg
+snackbarButton =
+    { labelRow = Grid.simple
+    , container = Button.simple ++ Color.dark
+    , ifDisabled = Color.disabled
+    , ifActive = Color.primary
+    }
+
+
+tabButtonStyle : ButtonStyle msg
+tabButtonStyle =
+    { labelRow = [ Element.spacing 8 ]
+    , container = Button.simple ++ Group.top
+    , ifDisabled = Color.disabled
+    , ifActive = Color.primary
+    }
+
+textInputStyle : TextInputStyle msg
+textInputStyle =
+    { chipButton = chipButtonStyle
+    , chipsRow =
+        [ Element.width <| Element.shrink
+        , Element.spacing <| 4
+        , Element.paddingEach
+            { top = 8
+            , left = 0
+            , right = 0
+            , bottom = 8
+            }
+        ]
+    , containerRow =
+        Button.simple
+            ++ Color.light
+            ++ [ Border.color <| Element.rgb255 186 189 182
+               , Font.alignLeft
+               , Element.paddingXY 8 0
+               , Element.height <| Element.px <| 42
+               ]
+            ++ Grid.simple
+    , input =
+        Color.light
+            ++ [ Element.padding 8
+               ]
+    }
+
+
+chipButtonStyle : ButtonStyle msg
+chipButtonStyle =
+    { container = Tag.simple
+    , ifDisabled = []
+    , labelRow = Grid.simple
+    , ifActive = Color.primary
+    }
+
+expansionPanelStyle : ExpansionPanelStyle msg
+expansionPanelStyle =
+    { containerColumn = Card.simple ++ Grid.simple ++ [Element.height <| Element.shrink]
+    , panelRow = Grid.spacedEvenly ++ [Element.height <| Element.shrink]
+    , labelRow = Grid.simple ++ [Element.height <| Element.shrink]
+    , content = []
+        , expandIcon = Icons.chevronDown  |> Element.html |> Element.el []
+        , collapseIcon = Icons.chevronUp |> Element.html |> Element.el []
+    }
+
+
+
+dialog : DialogStyle msg
+dialog =
+    { containerColumn =
+            Card.simple
+                ++ Grid.simple
+                ++  [ Element.centerY
+                    , Element.width <| Element.minimum 280 <| Element.maximum 560 <| Element.fill
+                    ]
+        , title = Heading.h3
+        , buttonRow =
+            Grid.simple
+                ++ [ Element.paddingEach
+                        { top = 28
+                        , bottom = 0
+                        , left = 0
+                        , right = 0
+                        }
+                   ]
+        , acceptButton = simpleButton
+        , dismissButton = textButton
+        }
+
+snackbar : SnackbarStyle msg
+snackbar =
+    { containerRow =
+        Card.simple
+            ++ Color.dark
+            ++ Grid.simple
+            ++ [ Element.paddingXY 8 6
+                , Element.height <| Element.px <| 54
+                ]
+    , button = snackbarButton
+    , text = [ Element.paddingXY 8 0 ]
+    }
+
+tab : TabStyle msg
+tab =
+    { button = tabButtonStyle
+        , optionRow = Grid.simple
+        , containerColumn = Grid.compact
+        , content = (Card.small ++ Group.bottom)
+        }
+
+row : RowStyle msg
+row =
+    { containerRow = Grid.compact
+    , element = []
+    , ifFirst = Group.left
+    , ifLast = Group.right
+    , ifCenter = Group.center
+    }
+
+cardColumn : ColumnStyle msg
+cardColumn =
+    { containerColumn = Grid.compact
+    , element = Card.large ++ [Element.height <| Element.fill]
+    , ifFirst = Group.top
+    , ifLast = Group.bottom
+    , ifCenter = Group.center 
+    }
+
+column : ColumnStyle msg
+column =
+    { containerColumn = Grid.compact
+    , element = []
+    , ifFirst = Group.top
+    , ifLast = Group.bottom
+    , ifCenter =Group.center 
+    }
+
+style : Style msg
+style =
+    { row = row
+    , cardColumn = cardColumn
+    , column = column
+    , button = buttonStyle
+    , primaryButton = simpleButton
+    , tab = tab
+    , textInput = textInputStyle
+    , chipButton = chipButtonStyle
+    , expansionPanel = expansionPanelStyle
+    , dialog = dialog
+    , snackbar = snackbar
+    , layout = Framework.responsiveLayout
+
+    {--\a w ->
+        Html.div []
+        [ Html.node "meta"
+            [ Attributes.attribute "name" "viewport"
+            , Attributes.attribute "content" "width=device-width, initial-scale=1.0"
+            ]
+            []
+        , Element.layoutWith
+            {options = (Element.focusStyle
+                { borderColor = Nothing
+                , backgroundColor = Nothing
+                , shadow = Nothing
+                }
+                |> List.singleton)
+            }
+         (Framework.layoutAttributes ++ a) <| w
+        ]--}
+    , header =
+        Framework.container
+            ++ Color.dark
+            ++ [ Element.padding <| 0
+               , Element.height <| Element.px <| 42
+               ]
+    , menuButton = menuButton
+    , sheetButton = sheetButton
+    , menuTabButton = menuTabButton
+    , sheet =
+        Color.light ++ [ Element.width <| Element.maximum 256 <| Element.fill ]
+    , menuIcon =
+        Icons.menu |> Element.html |> Element.el []
+    , moreVerticalIcon =
+        Icons.moreVertical |> Element.html |> Element.el []
+    , spacing = 8
+    , title = Heading.h2
+    , searchIcon =
+        Icons.search |> Element.html |> Element.el []
+    , search =
+        Color.simple
+            ++ Card.large
+            ++ [ Font.color <| Element.rgb255 0 0 0
+               , Element.padding 6
+               , Element.centerY
+               , Element.alignRight
+               ]
+    , searchFill =
+        Color.light ++ Group.center
+    }
diff --git a/example/src/Data/Style/Template.elm b/example/src/Data/Style/Template.elm
new file mode 100644
index 0000000..1dca97d
--- /dev/null
+++ b/example/src/Data/Style/Template.elm
@@ -0,0 +1,142 @@
+module Data.Style.Template exposing (style)
+
+import Data.Style exposing (Style)
+import Element exposing (Attribute,Element)
+import Element.Border as Border
+import Element.Font as Font
+import Element.Background as Background
+import Widget.Style exposing (ButtonStyle, DialogStyle, ExpansionPanelStyle,
+    SnackbarStyle ,TextInputStyle,TabStyle,ColumnStyle,RowStyle)
+
+
+fontSize : Int
+fontSize = 10
+
+box : String -> List (Attribute msg)
+box string =
+    [ Border.width 1
+    , Background.color <| Element.rgba 1 1 1 0.5
+    , Element.padding 10
+    , Element.spacing 10
+    , Element.above <| 
+        Element.el [Font.size <| fontSize] <|
+            Element.text string 
+    ]
+
+decoration : String -> List (Attribute msg)
+decoration string =
+    [ Element.below <| 
+        Element.el [Font.size <| fontSize] <|
+            Element.text string
+    , Background.color <| Element.rgb 0.66 0.66 0.66
+    ]
+
+
+icon : String -> Element msg
+icon string =
+    Element.none
+    |> Element.el
+    [ Element.width <| Element.px 12
+    , Element.height <| Element.px 12
+    , Border.rounded 6
+    , Border.width 1
+    , Element.above <|
+        Element.el [Font.size <| fontSize] <|
+            Element.text string 
+    ]
+
+button : String -> ButtonStyle msg
+button string =
+    { container = box <| string ++ ":container"
+    , labelRow = box <| string ++ ":labelRow"
+    , ifDisabled = decoration <| string ++ ":ifDisabled"
+    , ifActive = decoration <| string ++ ":ifActive"
+    }
+
+snackbar : String -> SnackbarStyle msg
+snackbar string =
+    { containerRow = box <| string ++ ":containerRow"
+    , button = button <| string ++ ":button"
+    , text = box <| string ++ ":text"
+    }
+
+dialog : String -> DialogStyle msg
+dialog string =
+    { containerColumn = box <| string ++ ":containerColumn"
+    , title = box <| string ++ ":title"
+    , buttonRow = box <| string ++ ":buttonRow"
+    , acceptButton = button <| string ++ ":acceptButton"
+    , dismissButton = button <| string  ++ ":dismissButton"
+    }
+
+expansionPanel : String -> ExpansionPanelStyle msg
+expansionPanel string =
+    { containerColumn = box <| string ++ ":containerColumn"
+    , panelRow = box <| string ++ ":panelRow"
+    , labelRow = box <| string ++ ":labelRow"
+    , content = box <| string ++ ":content"
+    , expandIcon = icon <| string ++ ":expandIcon"
+    , collapseIcon = icon <| string ++ ":collapseIcon"
+    }
+
+textInput : String -> TextInputStyle msg
+textInput string =
+    { chipButton = button <| string ++ ":chipButton"
+    , chipsRow = box <| string ++ ":chipsRow"
+    , containerRow = box <| string ++ ":containerRow"
+    , input = box <| string ++ ":input"
+    }
+
+tab : String -> TabStyle msg
+tab string =
+    { button = button <| string ++ ":button"
+    , optionRow = box <| string ++ ":optionRow"
+    , containerColumn = box <| string ++ ":containerColumn"
+    , content = box <| string ++ ":content"
+    }
+
+row : String -> RowStyle msg
+row string =
+    { containerRow = box <| string ++ ":containerRow"
+    , element = box <| string ++ ":element"
+    , ifFirst = box <| string ++ ":ifFirst"
+    , ifLast = box <| string ++ ":ifLast"
+    , ifCenter = box <| string ++ ":ifCenter"
+    }
+
+column : String -> ColumnStyle msg
+column string =
+    { containerColumn = box <| string ++ ":containerColumn"
+    , element = box <| string ++ ":element"
+    , ifFirst = box <| string ++ ":ifFirst"
+    , ifLast = box <| string ++ ":ifLast"
+    , ifCenter = box <| string ++ ":ifCenter"
+    }
+
+style :Style msg
+style =
+    { row = row <| "row"
+    , cardColumn = column <| "cardRow"
+    , column = column <| "column"
+    , button = button <| "button"
+    , primaryButton = button <| "primaryButton"
+    , tab = tab <| "tab"
+    , textInput = textInput <| "textInput"
+    , chipButton = button <| "chipButton"
+    , expansionPanel = expansionPanel "expansionPanel"
+    , dialog = dialog "dialog"
+    , snackbar = snackbar "snackbar"
+    , layout = Element.layout
+    , header = box "header"
+    , menuButton = button "menuButton"
+    , sheetButton = button "sheetButton"
+    , menuTabButton = button "menuTabButton"
+    , sheet = box "sheet"
+    , menuIcon = icon "menuIcon"
+    , moreVerticalIcon = icon "moreVerticalIcon"
+    , spacing = 8
+    , title = box "title"
+    , searchIcon = icon "searchIcon"
+    , search = box "search"
+    , searchFill = box "searchFill"
+    }
\ No newline at end of file
diff --git a/example/src/Data/Theme.elm b/example/src/Data/Theme.elm
new file mode 100644
index 0000000..65d172c
--- /dev/null
+++ b/example/src/Data/Theme.elm
@@ -0,0 +1,17 @@
+module Data.Theme exposing (Theme(..),toStyle)
+
+import Data.Style exposing (Style)
+import Data.Style.ElmUiFramework
+import Data.Style.Template
+
+type  Theme =
+    ElmUiFramework
+    | Template
+
+toStyle : Theme -> Style msg
+toStyle theme =
+    case theme of
+        ElmUiFramework ->
+            Data.Style.ElmUiFramework.style
+        Template ->
+            Data.Style.Template.style
diff --git a/example/src/Example.elm b/example/src/Example.elm
index 051e028..1b3674a 100644
--- a/example/src/Example.elm
+++ b/example/src/Example.elm
@@ -1,14 +1,15 @@
 module Example exposing (main)
 
+import Array
 import Browser
 import Browser.Dom as Dom exposing (Viewport)
 import Browser.Events as Events
 import Browser.Navigation as Navigation
-import Component
-import Element exposing (DeviceClass(..), Element,Attribute)
-import Element.Input as Input
-import Element.Font as Font
+import Data.Section as Section exposing (Section(..))
+import Element exposing (Attribute, DeviceClass(..), Element)
 import Element.Border as Border
+import Element.Font as Font
+import Element.Input as Input
 import Framework
 import Framework.Button as Button
 import Framework.Card as Card
@@ -21,35 +22,35 @@ import Framework.Tag as Tag
 import Html exposing (Html)
 import Html.Attributes as Attributes
 import Icons
-import Layout exposing (Part, Layout)
-import Data.Style exposing (style)
+import Layout exposing (Layout, Part)
 import Reusable
 import Set exposing (Set)
 import Stateless
 import Task
 import Time
 import Widget
-import Widget.Style exposing (ButtonStyle)
-import Widget.FilterSelect as FilterSelect
 import Widget.ScrollingNav as ScrollingNav
 import Widget.Snackbar as Snackbar
-import Widget.ValidatedInput as ValidatedInput
-import Data.Section as Section exposing (Section(..))
-import Array
+import Widget.Style exposing (ButtonStyle)
+import Data.Style as Style exposing (Style)
+import Data.Theme as Theme exposing (Theme(..))
+
+
+
 
 type alias LoadedModel =
-    { component : Component.Model
-    , stateless : Stateless.Model
+    { stateless : Stateless.Model
     , reusable : Reusable.Model
     , scrollingNav : ScrollingNav.Model Section
     , layout : Layout LoadedMsg
     , displayDialog : Bool
     , window : { height : Int, width : Int }
-    , search : 
+    , search :
         { raw : String
         , current : String
         , remaining : Int
         }
+    , theme : Theme
     }
 
 
@@ -61,16 +62,16 @@ type Model
 type LoadedMsg
     = StatelessSpecific Stateless.Msg
     | ReusableSpecific Reusable.Msg
-    | ComponentSpecific Component.Msg
     | UpdateScrollingNav (ScrollingNav.Model Section -> ScrollingNav.Model Section)
     | TimePassed Int
-    | AddSnackbar (String,Bool)
+    | AddSnackbar ( String, Bool )
     | ToggleDialog Bool
     | ChangedSidebar (Maybe Part)
     | Resized { width : Int, height : Int }
     | Load String
     | JumpTo Section
     | ChangedSearch String
+    | SetTheme Theme
     | Idle
 
 
@@ -87,16 +88,17 @@ initialModel { viewport } =
                 { toString = Section.toString
                 , fromString = Section.fromString
                 , arrangement = Section.asList
-                , toMsg = \result ->
-                    case result of
-                        Ok fun ->
-                            UpdateScrollingNav fun
-                        Err _ ->
-                            Idle
+                , toMsg =
+                    \result ->
+                        case result of
+                            Ok fun ->
+                                UpdateScrollingNav fun
+
+                            Err _ ->
+                                Idle
                 }
     in
-    ( { component = Component.init
-      , stateless = Stateless.init
+    ( { stateless = Stateless.init
       , reusable = Reusable.init
       , scrollingNav = scrollingNav
       , layout = Layout.init
@@ -105,11 +107,12 @@ initialModel { viewport } =
             { width = viewport.width |> round
             , height = viewport.height |> round
             }
-      , search = 
+      , search =
             { raw = ""
             , current = ""
             , remaining = 0
             }
+      , theme = ElmUiFramework
       }
     , cmd
     )
@@ -124,32 +127,40 @@ init () =
 
 view : Model -> Html Msg
 view model =
+    
     case model of
         Loading ->
             Element.none |> Framework.responsiveLayout []
 
         Loaded m ->
+            let
+                style : Style msg
+                style =
+                    Theme.toStyle m.theme
+            in
             Html.map LoadedSpecific <|
                 Layout.view []
                     { dialog =
                         if m.displayDialog then
                             { body =
                                 "This is a dialog window"
-                                        |> Element.text
-                                        |> List.singleton
-                                        |> Element.paragraph []
+                                    |> Element.text
+                                    |> List.singleton
+                                    |> Element.paragraph []
                             , title = Just "Dialog"
-                            , accept = Just
-                                { text = "Ok"
-                                , onPress = Just <| ToggleDialog False
-                                }
-                            , dismiss = Just
-                                { text = "Dismiss"
-                                , onPress = Just <| ToggleDialog False
-                                }
+                            , accept =
+                                Just
+                                    { text = "Ok"
+                                    , onPress = Just <| ToggleDialog False
+                                    }
+                            , dismiss =
+                                Just
+                                    { text = "Dismiss"
+                                    , onPress = Just <| ToggleDialog False
+                                    }
                             }
-                            |> Widget.dialog style.dialog
-                            |> Just
+                                |> Widget.dialog style.dialog
+                                |> Just
 
                         else
                             Nothing
@@ -158,104 +169,116 @@ view model =
                         , [ m.scrollingNav
                                 |> ScrollingNav.view
                                     (\section ->
-                                        ( case section of
-                                            ComponentViews ->
-                                                m.component
-                                                    |> Component.view  ComponentSpecific
-                                                 
-        
-
+                                        (case section of
                                             ReusableViews ->
-                                                Reusable.view
+                                                Reusable.view m.theme
                                                     { addSnackbar = AddSnackbar
                                                     , model = m.reusable
                                                     , msgMapper = ReusableSpecific
                                                     }
 
                                             StatelessViews ->
-                                                Stateless.view
+                                                Stateless.view m.theme
                                                     { msgMapper = StatelessSpecific
                                                     , showDialog = ToggleDialog True
                                                     , changedSheet = ChangedSidebar
                                                     }
                                                     m.stateless
-                                        ) |> (\{title,description,items} ->
-                                                        [ Element.el Heading.h2 <| Element.text <| title
-                                                        , if m.search.current == "" then
-                                                            description
+                                        )
+                                            |> (\{ title, description, items } ->
+                                                    [ Element.el Heading.h2 <| Element.text <| title
+                                                    , if m.search.current == "" then
+                                                        description
                                                             |> Element.text
                                                             |> List.singleton
                                                             |> Element.paragraph []
-                                                          else Element.none
-                                                        , items
-                                                            |> (if m.search.current /= "" then
-                                                                    List.filter 
-                                                                        ( Tuple.first 
-                                                                        >> String.toLower
-                                                                        >> String.contains (m.search.current |> String.toLower)
-                                                                        )
-                                                                else
-                                                                    identity)
-                                                            |> List.map
-                                                                (\(name,elem) ->
-                                                                    [ Element.text name
+
+                                                      else
+                                                        Element.none
+                                                    , items
+                                                        |> (if m.search.current /= "" then
+                                                                List.filter
+                                                                    (\(a,_,_) ->
+                                                                        a
+                                                                        |> String.toLower
+                                                                        |> String.contains (m.search.current |> String.toLower)
+                                                                    )
+
+                                                            else
+                                                                identity
+                                                           )
+                                                        |> List.map
+                                                            (\( name, elem, more ) ->
+                                                                [ Element.text name
                                                                     |> Element.el Heading.h3
-                                                                    , elem
-                                                                    ]
-                                                                    |> Element.column
-                                                                        (Grid.simple 
-                                                                        ++ Card.large 
-                                                                        ++ [Element.height <| Element.fill])
-                                                                )
-                                                            |> Element.wrappedRow
-                                                            (Grid.simple ++ [Element.height <| Element.shrink])
-                                                        ]
-                                                            |> Element.column (Grid.section ++ [ Element.centerX ])
-                                                        )
+                                                                , elem
+                                                                , more
+                                                                ]
+                                                                    |> Widget.column style.cardColumn
+                                                            )
+                                                        |> Element.wrappedRow
+                                                            (Grid.simple ++ [ Element.height <| Element.shrink ])
+                                                    ]
+                                                        |> Element.column (Grid.section ++ [ Element.centerX ])
+                                               )
                                     )
                           ]
                             |> Element.column Framework.container
                         ]
                             |> Element.column Grid.compact
-                    , style = style
+                    , style =style
                     , layout = m.layout
                     , window = m.window
                     , menu =
-                         m.scrollingNav
-                         |> ScrollingNav.toSelect
-                         (\int ->
-                                m.scrollingNav.arrangement
-                                |> Array.fromList
-                                |> Array.get int
-                                |> Maybe.map JumpTo
-                         )
+                        m.scrollingNav
+                            |> ScrollingNav.toSelect
+                                (\int ->
+                                    m.scrollingNav.arrangement
+                                        |> Array.fromList
+                                        |> Array.get int
+                                        |> Maybe.map JumpTo
+                                )
                     , actions =
                         [ { onPress = Just <| Load "https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/"
                           , text = "Docs"
-                          , icon = Icons.book|> Element.html |> Element.el []
+                          , icon = Icons.book |> Element.html |> Element.el []
                           }
                         , { onPress = Just <| Load "https://github.com/Orasund/elm-ui-widgets"
                           , text = "Github"
-                          , icon = Icons.github|> Element.html |> Element.el []
+                          , icon = Icons.github |> Element.html |> Element.el []
+                          }
+                        , { onPress = if m.theme /= ElmUiFramework then
+                                Just <| SetTheme <| ElmUiFramework
+                            else
+                                Nothing
+                          , text = "Elm-Ui-Framework Theme"
+                          , icon = Icons.penTool |> Element.html |> Element.el []
+                          }
+                        , { onPress = if m.theme /= Template then
+                                Just <| SetTheme <| Template
+                            else
+                                Nothing
+                          , text = "Template Theme"
+                          , icon = Icons.penTool |> Element.html |> Element.el []
                           }
                         , { onPress = Nothing
                           , text = "Placeholder"
-                          , icon = Icons.circle|> Element.html |> Element.el []
+                          , icon = Icons.circle |> Element.html |> Element.el []
                           }
                         , { onPress = Nothing
                           , text = "Placeholder"
-                          , icon = Icons.triangle|> Element.html |> Element.el []
+                          , icon = Icons.triangle |> Element.html |> Element.el []
                           }
                         , { onPress = Nothing
                           , text = "Placeholder"
-                          , icon = Icons.square|> Element.html |> Element.el []
+                          , icon = Icons.square |> Element.html |> Element.el []
                           }
                         ]
                     , onChangedSidebar = ChangedSidebar
-                    , title = 
+                    , title =
                         "Elm-Ui-Widgets"
-                        |> Element.text 
-                        |> Element.el Heading.h1
+                            |> Element.text
+                            |> Element.el Heading.h1
                     , search =
                         Just
                             { text = m.search.raw
@@ -268,17 +291,6 @@ view model =
 updateLoaded : LoadedMsg -> LoadedModel -> ( LoadedModel, Cmd LoadedMsg )
 updateLoaded msg model =
     case msg of
-        ComponentSpecific m ->
-            model.component
-                |> Component.update m
-                |> Tuple.mapBoth
-                    (\component ->
-                        { model
-                            | component = component
-                        }
-                    )
-                    (Cmd.map ComponentSpecific)
-
         ReusableSpecific m ->
             ( model.reusable
                 |> Reusable.update m
@@ -300,15 +312,16 @@ updateLoaded msg model =
                         }
                     )
                     (Cmd.map StatelessSpecific)
-        
+
         UpdateScrollingNav fun ->
-            ( { model | scrollingNav = model.scrollingNav |> fun}
+            ( { model | scrollingNav = model.scrollingNav |> fun }
             , Cmd.none
             )
 
         TimePassed int ->
             let
-                search = model.search
+                search =
+                    model.search
             in
             ( { model
                 | layout = model.layout |> Layout.timePassed int
@@ -316,13 +329,15 @@ updateLoaded msg model =
                     if search.remaining > 0 then
                         if search.remaining <= int then
                             { search
-                            | current = search.raw
-                            , remaining = 0
+                                | current = search.raw
+                                , remaining = 0
                             }
+
                         else
                             { search
-                            | remaining = search.remaining - int
+                                | remaining = search.remaining - int
                             }
+
                     else
                         model.search
               }
@@ -330,21 +345,25 @@ updateLoaded msg model =
                 |> Task.perform UpdateScrollingNav
             )
 
-        AddSnackbar (string,bool) ->
-            ( { model 
-              | layout = model.layout 
-                |> Layout.queueMessage 
-                    { text = string
-                    , button = if bool then
-                            Just
-                                { text = "Add"
-                                , onPress = Just <|
-                                    (AddSnackbar ("This is another message", False))
-                                }
-                        else
-                            Nothing
-                    }
-                }
+        AddSnackbar ( string, bool ) ->
+            ( { model
+                | layout =
+                    model.layout
+                        |> Layout.queueMessage
+                            { text = string
+                            , button =
+                                if bool then
+                                    Just
+                                        { text = "Add"
+                                        , onPress =
+                                            Just <|
+                                                AddSnackbar ( "This is another message", False )
+                                        }
+
+                                else
+                                    Nothing
+                            }
+              }
             , Cmd.none
             )
 
@@ -362,34 +381,41 @@ updateLoaded msg model =
             ( { model | layout = model.layout |> Layout.activate sidebar }
             , Cmd.none
             )
-        
+
         Load string ->
-            ( model, Navigation.load string)
-        
+            ( model, Navigation.load string )
+
         JumpTo section ->
             ( model
             , model.scrollingNav
-                |> ScrollingNav.jumpTo 
+                |> ScrollingNav.jumpTo
                     { section = section
                     , onChange = always Idle
                     }
             )
-        
+
         ChangedSearch string ->
             let
-                search = model.search
+                search =
+                    model.search
             in
-            ( { model | search = 
+            ( { model
+                | search =
                     { search
-                    | raw = string
-                    , remaining = 300
+                        | raw = string
+                        , remaining = 300
                     }
-            }
+              }
             , Cmd.none
             )
         
+        SetTheme theme ->
+            ( { model | theme = theme }
+            , Cmd.none
+            )
+
         Idle ->
-            ( model , Cmd.none)
+            ( model, Cmd.none )
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
diff --git a/example/src/Icons.elm b/example/src/Icons.elm
index bf413af..be94eae 100644
--- a/example/src/Icons.elm
+++ b/example/src/Icons.elm
@@ -1,17 +1,19 @@
 module Icons exposing
     ( book
+    , chevronDown
+    , chevronLeft
+    , chevronRight
+    , circle
     , github
     , menu
     , moreVertical
-    , circle
-    , triangle
-    , square
+    , repeat
     , search
     , slash
-    , repeat
-    , chevronDown
-    , chevronRight
-    , chevronLeft
+    , square
+    , triangle
+    , chevronUp
+    , penTool
     )
 
 import Html exposing (Html)
@@ -33,6 +35,7 @@ svgFeatherIcon className =
         , width "16"
         ]
 
+
 chevronDown : Html msg
 chevronDown =
     svgFeatherIcon "chevron-down"
@@ -45,12 +48,20 @@ chevronRight =
     svgFeatherIcon "chevron-right"
         [ Svg.polyline [ points "9 18 15 12 9 6" ] []
         ]
+
+
 chevronLeft : Html msg
 chevronLeft =
     svgFeatherIcon "chevron-left"
         [ Svg.polyline [ points "15 18 9 12 15 6" ] []
         ]
 
+chevronUp : Html msg
+chevronUp =
+    svgFeatherIcon "chevron-up"
+        [ Svg.polyline [ points "18 15 12 9 6 15" ] []
+        ]
+
 repeat : Html msg
 repeat =
     svgFeatherIcon "repeat"
@@ -60,6 +71,14 @@ repeat =
         , Svg.path [ d "M21 13v2a4 4 0 0 1-4 4H3" ] []
         ]
 
+penTool : Html msg
+penTool =
+    svgFeatherIcon "pen-tool"
+        [ Svg.path [ d "M12 19l7-7 3 3-7 7-3-3z" ] []
+        , Svg.path [ d "M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" ] []
+        , Svg.path [ d "M2 2l7.586 7.586" ] []
+        , Svg.circle [ cx "11", cy "11", r "2" ] []
+        ]
 
 book : Html msg
 book =
@@ -84,6 +103,7 @@ menu =
         , Svg.line [ x1 "3", y1 "18", x2 "21", y2 "18" ] []
         ]
 
+
 moreVertical : Html msg
 moreVertical =
     svgFeatherIcon "more-vertical"
@@ -92,12 +112,14 @@ moreVertical =
         , Svg.circle [ cx "12", cy "19", r "1" ] []
         ]
 
+
 circle : Html msg
 circle =
     svgFeatherIcon "circle"
         [ Svg.circle [ cx "12", cy "12", r "10" ] []
         ]
 
+
 slash : Html msg
 slash =
     svgFeatherIcon "slash"
@@ -105,21 +127,24 @@ slash =
         , Svg.line [ x1 "4.93", y1 "4.93", x2 "19.07", y2 "19.07" ] []
         ]
 
+
 triangle : Html msg
 triangle =
     svgFeatherIcon "triangle"
         [ Svg.path [ d "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" ] []
         ]
 
+
 square : Html msg
 square =
     svgFeatherIcon "square"
         [ Svg.rect [ Svg.Attributes.x "3", y "3", width "18", height "18", rx "2", ry "2" ] []
         ]
 
+
 search : Html msg
 search =
     svgFeatherIcon "search"
         [ Svg.circle [ cx "11", cy "11", r "8" ] []
         , Svg.line [ x1 "21", y1 "21", x2 "16.65", y2 "16.65" ] []
-        ]
\ No newline at end of file
+        ]
diff --git a/example/src/Reusable.elm b/example/src/Reusable.elm
index c911b18..a87b5ef 100644
--- a/example/src/Reusable.elm
+++ b/example/src/Reusable.elm
@@ -20,12 +20,11 @@ import Html.Attributes as Attributes
 import Set exposing (Set)
 import Time
 import Widget
-import Widget.FilterSelect as FilterSelect
 import Widget.ScrollingNav as ScrollingNav
 import Widget.Snackbar as Snackbar
 import Widget.SortTable as SortTable
-import Widget.ValidatedInput as ValidatedInput
-
+import Data.Style exposing (Style)
+import Data.Theme as Theme exposing (Theme)
 
 type alias Model =
     SortTable.Model
@@ -54,36 +53,37 @@ init =
     SortTable.sortBy { title = "Name", asc = True }
 
 
-snackbar : ((String,Bool) -> msg) -> (String,Element msg)
-snackbar addSnackbar =
+snackbar : Style msg -> (( String, Bool ) -> msg) -> ( String, Element msg,Element msg )
+snackbar style addSnackbar =
     ( "Snackbar"
-    , [Input.button Button.simple
-        { onPress = Just <| addSnackbar <|
-            ("This is a notification. It will disappear after 10 seconds."
-            , False
-            )
-        , label =
-            "Add Notification"
-                |> Element.text
-                |> List.singleton
-                |> Element.paragraph []
-        }
-    ,  Input.button Button.simple
-        { onPress = Just <| addSnackbar <|
-            ("You can add another notification if you want."
-            , True
-            )
-        , label =
-            "Add Notification with Action"
-                |> Element.text
-                |> List.singleton
-                |> Element.paragraph []
-        }
-    ] |> Element.column Grid.simple
+    , [ Widget.button style.button
+            { onPress =
+                Just <|
+                    addSnackbar <|
+                        ( "This is a notification. It will disappear after 10 seconds."
+                        , False
+                        )
+            , text = "Add Notification"
+            , icon =Element.none
+            }
+      , Widget.button style.button
+            { onPress =
+                Just <|
+                    addSnackbar <|
+                        ( "You can add another notification if you want."
+                        , True
+                        )
+            , text = "Add Notification with Action"
+            , icon = Element.none
+            }
+      ]
+        |> Element.column Grid.simple
+    , Element.none
     )
 
-sortTable : SortTable.Model -> (String,Element Msg)
-sortTable model =
+
+sortTable : Style Msg -> SortTable.Model -> ( String, Element Msg,Element Msg )
+sortTable style model =
     ( "Sort Table"
     , SortTable.view
         { content =
@@ -152,31 +152,41 @@ sortTable model =
                 }
            )
         |> Element.table Grid.simple
+    , Element.none
     )
 
-scrollingNavCard : (String , Element msg )
-scrollingNavCard =
-    ("Scrolling Nav"
+
+scrollingNavCard : Style msg -> ( String, Element msg, Element msg )
+scrollingNavCard style =
+    ( "Scrolling Nav"
     , Element.text "Resize the screen and open the side-menu. Then start scrolling to see the scrolling navigation in action."
         |> List.singleton
         |> Element.paragraph []
+    , Element.none
     )
 
+
 view :
-    { addSnackbar : (String,Bool) -> msg
+    Theme ->
+    { addSnackbar : ( String, Bool ) -> msg
     , msgMapper : Msg -> msg
     , model : Model
     }
-    -> { title : String
+    ->
+        { title : String
         , description : String
-        , items : List (String,Element msg)
+        , items : List ( String, Element msg,Element msg )
         }
-view { addSnackbar, msgMapper, model } =
+view theme { addSnackbar, msgMapper, model } =
+    let
+        style = Theme.toStyle theme
+    in
     { title = "Reusable Views"
     , description = "Reusable views have an internal state but no update function. You will need to do some wiring, but nothing complicated."
     , items =
-        [ snackbar addSnackbar
-        , sortTable model |> Tuple.mapSecond (Element.map msgMapper)
-        , scrollingNavCard
+        [ snackbar style addSnackbar
+        , sortTable style model |> \(a,b,c) ->
+            (a,b |> Element.map msgMapper,c |> Element.map msgMapper)
+        , scrollingNavCard style
         ]
     }
diff --git a/example/src/Stateless.elm b/example/src/Stateless.elm
index ace8b0e..8487d25 100644
--- a/example/src/Stateless.elm
+++ b/example/src/Stateless.elm
@@ -1,9 +1,11 @@
 module Stateless exposing (Model, Msg, init, update, view)
 
 import Array exposing (Array)
+import Data.Style exposing (Style)
 import Element exposing (Element)
 import Element.Background as Background
 import Element.Border as Border
+import Element.Font as Font
 import Element.Input as Input
 import Framework.Button as Button
 import Framework.Card as Card
@@ -16,19 +18,18 @@ import Framework.Tag as Tag
 import Heroicons.Solid as Heroicons
 import Html exposing (Html)
 import Html.Attributes as Attributes
-import Set exposing (Set)
-import Widget.Style exposing (ButtonStyle)
-import Layout exposing (Part(..))
 import Icons
+import Layout exposing (Part(..))
+import Set exposing (Set)
 import Widget
-import Element.Font as Font
-import Data.Style exposing (style)
+import Widget.Style exposing (ButtonStyle)
+import Data.Theme as Theme exposing (Theme)
 
 type alias Model =
     { selected : Maybe Int
     , multiSelected : Set Int
     , chipTextInput : Set String
-    , isCollapsed : Bool
+    , isExpanded : Bool
     , carousel : Int
     , tab : Maybe Int
     , button : Bool
@@ -53,7 +54,7 @@ init =
     { selected = Nothing
     , multiSelected = Set.empty
     , chipTextInput = Set.empty
-    , isCollapsed = False
+    , isExpanded = False
     , carousel = 0
     , tab = Just 1
     , button = True
@@ -87,20 +88,22 @@ update msg model =
 
         ToggleCollapsable bool ->
             ( { model
-                | isCollapsed = bool
+                | isExpanded = bool
               }
             , Cmd.none
             )
-        
+
         ToggleTextInputChip string ->
             ( { model
                 | chipTextInput =
-                    model.chipTextInput |>
-                        if model.chipTextInput |> Set.member string then
-                            Set.remove string
-                        else
-                            Set.insert string
-                }
+                    model.chipTextInput
+                        |> (if model.chipTextInput |> Set.member string then
+                                Set.remove string
+
+                            else
+                                Set.insert string
+                           )
+              }
             , Cmd.none
             )
 
@@ -117,132 +120,104 @@ update msg model =
 
         ChangedTab int ->
             ( { model | tab = Just int }, Cmd.none )
-        
+
         ToggleButton bool ->
             ( { model | button = bool }, Cmd.none )
-        
+
         SetTextInput string ->
-            ( {model | textInput = string },Cmd.none)
+            ( { model | textInput = string }, Cmd.none )
 
         Idle ->
-            ( model, Cmd.none)
+            ( model, Cmd.none )
 
 
-select : Model -> (String,Element Msg)
-select model =
+select : Style Msg -> Model -> ( String, Element Msg,Element Msg )
+select style model =
     let
-        buttonStyle = style.button
+        buttonStyle =
+            style.button
     in
     ( "Select"
     , { selected = model.selected
-      , options = 
-        [ 1, 2, 42 ]
-        |> List.map (\int ->
-            { text = String.fromInt int
-            , icon = Element.none
-            }
-        )
+      , options =
+            [ 1, 2, 42 ]
+                |> List.map
+                    (\int ->
+                        { text = String.fromInt int
+                        , icon = Element.none
+                        }
+                    )
       , onSelect = ChangedSelected >> Just
       }
         |> Widget.select
-        |> List.indexedMap
-            (\i ->
-                Widget.selectButton
-                    { buttonStyle
-                    | container = buttonStyle.container
-                        ++ (if i == 0 then
-                                Group.left
-
-                            else if i == 2 then
-                                Group.right
-
-                            else
-                                Group.center
-                           )
-                    }
-            )
-        
-        |> Element.row Grid.compact
+        |> Widget.buttonRow
+            { list = style.row
+            , button = style.button
+            }
+    , Element.none
     )
 
 
-multiSelect : Model -> (String,Element Msg)
-multiSelect model =
+multiSelect : Style Msg -> Model -> ( String, Element Msg, Element Msg )
+multiSelect style model =
     let
-        buttonStyle = style.button
+        buttonStyle =
+            style.button
     in
     ( "Multi Select"
     , { selected = model.multiSelected
-      , options = 
-        [ 1, 2, 42 ]
-        |> List.map (\int -> 
-            { text = String.fromInt int
-            , icon = Element.none
-            })
+      , options =
+            [ 1, 2, 42 ]
+                |> List.map
+                    (\int ->
+                        { text = String.fromInt int
+                        , icon = Element.none
+                        }
+                    )
       , onSelect = ChangedMultiSelected >> Just
       }
         |> Widget.multiSelect
-        |> List.indexedMap
-            (\i ->
-                Widget.selectButton
-                    { buttonStyle
-                    | container = buttonStyle.container
-                        ++ (if i == 0 then
-                                Group.left
-
-                            else if i == 2 then
-                                Group.right
-
-                            else
-                                Group.center
-                           )
-                    }
-            )
-        |> Element.row Grid.compact
+        |> Widget.buttonRow
+            { list = style.row
+            , button = style.button
+            }
+    , Element.none
     )
 
-collapsable : Model -> (String,Element Msg)
-collapsable model =
-    ( "Collapsable"
+expansionPanel : Style Msg -> Model -> (String,Element Msg,Element Msg)
+expansionPanel style model =
+    ( "Expansion Panel"
     ,   { onToggle = ToggleCollapsable
-        , isCollapsed = model.isCollapsed
-        , label =
-            Element.row (Grid.simple ++ [Element.width<| Element.fill])
-                [  if model.isCollapsed then
-                        Icons.chevronRight |> Element.html |> Element.el []
-
-                    else
-                        Icons.chevronDown  |> Element.html |> Element.el []
-                , Element.text <| "Title"
-                ]
+        , isExpanded = model.isExpanded
+        , icon = Element.none
+        , text = "Title"
         , content = Element.text <| "Hello World"
         }
-        |>Widget.collapsable
-        { containerColumn = Card.simple ++ Grid.simple
-            ++ [ Element.padding 8 ]
-        , button = []
-        }
-        
+        |>Widget.expansionPanel style.expansionPanel
+    , Element.none
     )
 
-tab : Model -> (String,Element Msg)
-tab model =
+
+
+
+tab : Style Msg -> Model -> ( String, Element Msg, Element Msg )
+tab style model =
     ( "Tab"
-    , Widget.tab 
-            { button = style.tabButton
-            , optionRow = Grid.simple
-            , containerColumn = Grid.compact
-            } 
+    , Widget.tab style.tab
+        { tabs =
             { selected = model.tab
-            , options = [ 1, 2, 3 ]
-                |> List.map (\int ->
-                    { text = "Tab " ++ (int |> String.fromInt)
-                    , icon = Element.none
-                    }
-                )
+            , options =
+                [ 1, 2, 3 ]
+                    |> List.map
+                        (\int ->
+                            { text = "Tab " ++ (int |> String.fromInt)
+                            , icon = Element.none
+                            }
+                        )
             , onSelect = ChangedTab >> Just
-            } <|
-            (\selected ->
+            }
+        , content =
+            \selected ->
                 (case selected of
                     Just 0 ->
                         "This is Tab 1"
@@ -257,57 +232,69 @@ tab model =
                         "Please select a tab"
                 )
                     |> Element.text
-                    |> Element.el (Card.small ++ Group.bottom)
-            )
-    )
-
-modal : (Maybe Part -> msg) -> Model -> (String,Element msg)
-modal changedSheet model =
-    ( "Modal"
-    ,   [ Input.button Button.simple
-            { onPress = Just <| changedSheet <| Just LeftSheet
-            , label = Element.text <| "show left sheet"
-            }
-        ,  Input.button Button.simple
-            { onPress = Just <| changedSheet <| Just RightSheet
-            , label = Element.text <| "show right sheet"
-            }
-        ] |> Element.column Grid.simple
-    )
-    
-dialog : msg -> Model -> (String,Element msg)
-dialog showDialog model =
-    ( "Dialog"
-    , Input.button Button.simple
-        { onPress = Just showDialog
-        , label = Element.text <| "Show dialog"
         }
+    , Element.none
     )
 
-carousel : Model -> (String,Element Msg)
-carousel model =
+
+modal : Style msg -> (Maybe Part -> msg) -> Model -> ( String, Element msg,Element msg )
+modal style changedSheet model =
+    ( "Modal"
+    , [ Widget.button style.button
+            { onPress = Just <| changedSheet <| Just LeftSheet
+            , text = "show left sheet"
+            , icon = Element.none
+            }
+      , Widget.button style.button
+            { onPress = Just <| changedSheet <| Just RightSheet
+            , text = "show right sheet"
+            , icon = Element.none
+            }
+      ]
+        |> Element.column Grid.simple
+    ,Element.none
+    )
+
+
+dialog : Style msg -> msg -> Model -> ( String, Element msg, Element msg )
+dialog style showDialog model =
+    ( "Dialog"
+    , Widget.button style.button
+        { onPress = Just showDialog
+        , text = "Show dialog"
+        , icon = Element.none
+        }
+    , Element.none
+    )
+
+
+carousel : Style Msg -> Model -> ( String, Element Msg, Element Msg )
+carousel style model =
     ( "Carousel"
     , Widget.carousel
         { content = ( Color.cyan, [ Color.yellow, Color.green, Color.red ] |> Array.fromList )
         , current = model.carousel
         , label =
             \c ->
-                [ Element.el [Element.centerY] <|
-                Widget.iconButton style.button
-                    { onPress = 
-                        model.carousel - 1
-                        |> \i ->
-                            if i < 0 then
-                                Nothing
-                            else
-                                SetCarousel i
-                                |> Just
-                    , icon =
-                        Icons.chevronLeft
-                            |> Element.html
-                            |> Element.el []
-                    , text = "Previous"
-                    }
+                [ Element.el [ Element.centerY ] <|
+                    Widget.iconButton style.button
+                        { onPress =
+                            model.carousel
+                                - 1
+                                |> (\i ->
+                                        if i < 0 then
+                                            Nothing
+
+                                        else
+                                            SetCarousel i
+                                                |> Just
+                                   )
+                        , icon =
+                            Icons.chevronLeft
+                                |> Element.html
+                                |> Element.el []
+                        , text = "Previous"
+                        }
                 , Element.el
                     (Card.simple
                         ++ [ Background.color <| c
@@ -319,112 +306,169 @@ carousel model =
                     Element.none
                 , Element.el [ Element.centerY ] <|
                     Widget.iconButton style.button
-                    { onPress = model.carousel + 1
-                        |> \i ->
-                            if i >= 4 then
-                                Nothing
-                            else
-                                SetCarousel i
-                                |> Just
-                    , icon =
-                        Icons.chevronRight 
-                            |> Element.html
-                            |> Element.el []
-                    , text = "Next"
-                    }
+                        { onPress =
+                            model.carousel
+                                + 1
+                                |> (\i ->
+                                        if i >= 4 then
+                                            Nothing
+
+                                        else
+                                            SetCarousel i
+                                                |> Just
+                                   )
+                        , icon =
+                            Icons.chevronRight
+                                |> Element.html
+                                |> Element.el []
+                        , text = "Next"
+                        }
                 ]
                     |> Element.row (Grid.simple ++ [ Element.centerX, Element.width <| Element.shrink ])
         }
+    , Element.none
     )
 
-iconButton : Model -> (String,Element Msg)
-iconButton model =
+
+iconButton : Style Msg -> Model -> ( String, Element Msg, Element Msg )
+iconButton style model =
     ( "Icon Button"
-    ,   [   [ Widget.button style.primaryButton
-                { text = "disable me"
-                , icon = Icons.slash |> Element.html |> Element.el []        , onPress =
-                    if model.button then
-                        Just <| ToggleButton False
-                    else
-                        Nothing
-                }
-            , Widget.iconButton style.button
-                { text = "reset"
-                , icon = Icons.repeat |> Element.html |> Element.el []       
-                , onPress =  Just <| ToggleButton True
-                }
-            ]
-            |> Element.row Grid.simple
-        , Widget.button style.button
-            { text = "reset button"
-            , icon = Element.none       
-            , onPress =  Just <| ToggleButton True
+    , [ Widget.button style.primaryButton
+            { text = "disable me"
+            , icon = Icons.slash |> Element.html |> Element.el []
+            , onPress =
+                if model.button then
+                    Just <| ToggleButton False
+
+                else
+                    Nothing
             }
-        ] |> Element.column Grid.simple
+        , Widget.iconButton style.button
+            { text = "reset"
+            , icon = Icons.repeat |> Element.html |> Element.el []
+            , onPress = Just <| ToggleButton True
+            }
+        ]
+            |> Element.row Grid.simple
+    , Element.column Grid.simple
+            [ Element.row Grid.spacedEvenly
+                [ "Button"
+                    |> Element.text
+                , Widget.button style.button
+                    { text = "reset"
+                    , icon = Icons.repeat |> Element.html |> Element.el []
+                    , onPress = Just <| ToggleButton True
+                    }
+                ]
+            , Element.row Grid.spacedEvenly
+                [ "Text button"
+                    |> Element.text
+                , Widget.textButton style.button
+                    { text = "reset"
+                    , onPress = Just <| ToggleButton True
+                    }
+                ]
+            , Element.row Grid.spacedEvenly
+                [ "Button"
+                    |> Element.text
+                , Widget.iconButton style.button
+                    { text = "reset"
+                    , icon = Icons.repeat |> Element.html |> Element.el []
+                    , onPress = Just <| ToggleButton True
+                    }
+                ]
+            , Element.row Grid.spacedEvenly
+                [ "Disabled button"
+                    |> Element.text
+                , Widget.button style.button
+                    { text = "reset"
+                    , icon = Icons.repeat |> Element.html |> Element.el []
+                    , onPress = Nothing
+                    }
+                ] 
+            ]
     )
 
-textInput : Model -> (String,Element Msg)
-textInput model =
+
+textInput : Style Msg -> Model -> ( String, Element Msg, Element Msg )
+textInput style model =
     ( "Chip Text Input"
-    ,   [ { chips =
+    , [ { chips =
             model.chipTextInput
-            |> Set.toList
-            |> List.map (\string ->
-                    { icon = Element.none
-                    , text = string
-                    , onPress =
-                        string
-                            |> ToggleTextInputChip
-                            |> Just
-                    }
-                )
+                |> Set.toList
+                |> List.map
+                    (\string ->
+                        { icon = Element.none
+                        , text = string
+                        , onPress =
+                            string
+                                |> ToggleTextInputChip
+                                |> Just
+                        }
+                    )
         , text = model.textInput
         , placeholder = Nothing
         , label = "Chips"
         , onChange = SetTextInput
         }
             |> Widget.textInput style.textInput
-        , model.chipTextInput
+      , model.chipTextInput
             |> Set.diff
-                (["A","B","C"]
+                ([ "A", "B", "C" ]
                     |> Set.fromList
                 )
             |> Set.toList
             |> List.map
                 (\string ->
-                    Input.button (Button.simple ++ Tag.simple)
+                    Widget.button style.textInput.chipButton
                         { onPress =
                             string
-                            |> ToggleTextInputChip
-                            |> Just
-                        , label = Element.text string
+                                |> ToggleTextInputChip
+                                |> Just
+                        , text = string
+                        , icon = Element.none
                         }
                 )
             |> Element.wrappedRow [ Element.spacing 10 ]
-        ] |> Element.column Grid.simple
+      ]
+        |> Element.column Grid.simple
+    , Element.none
     )
 
-view : 
+
+view :
+    Theme ->
     { msgMapper : Msg -> msg
     , showDialog : msg
     , changedSheet : Maybe Part -> msg
-    } -> Model 
-     -> { title : String
+    }
+    -> Model
+    ->
+        { title : String
         , description : String
-        , items : List (String,Element msg)
+        , items : List ( String, Element msg, Element msg )
         }
-view { msgMapper, showDialog, changedSheet } model =
+view theme { msgMapper, showDialog, changedSheet } model =
+    let
+        style = Theme.toStyle theme
+
+        map (a,b,c) =
+            ( a
+            , b |> Element.map msgMapper
+            , c |> Element.map msgMapper
+            )
+    in
     { title = "Stateless Views"
     , description = "Stateless views are simple functions that view some content. No wiring required."
     , items =
-        [ iconButton model  |> Tuple.mapSecond (Element.map msgMapper)
-        , select model |> Tuple.mapSecond (Element.map msgMapper)
-        , multiSelect model |> Tuple.mapSecond (Element.map msgMapper)
-        , collapsable model |> Tuple.mapSecond (Element.map msgMapper)
-        , modal changedSheet model
-        , carousel model |> Tuple.mapSecond (Element.map msgMapper)
-        , tab model |> Tuple.mapSecond (Element.map msgMapper)
-        , dialog showDialog model
-        , textInput model |> Tuple.mapSecond (Element.map msgMapper)
+        [ iconButton style model |> map
+        , select style model |> map
+        , multiSelect style model |> map
+        , expansionPanel style model |> map
+        , modal style changedSheet model
+        , carousel style model |> map
+        , tab style model |> map
+        , dialog style showDialog model
+        , textInput style model |> map
         ]
     }
diff --git a/src/Internal/Button.elm b/src/Internal/Button.elm
index 610fafc..0b8a96e 100644
--- a/src/Internal/Button.elm
+++ b/src/Internal/Button.elm
@@ -14,8 +14,8 @@ import Widget.Style exposing (ButtonStyle)
 
 type alias Button msg =
     { text : String
-    , icon : Element Never
     , onPress : Maybe msg
+    , icon : Element Never
     }
 
 
@@ -30,7 +30,7 @@ iconButton style { onPress, text, icon } =
     Input.button
         (style.container
             ++ (if onPress == Nothing then
-                    style.disabled
+                    style.ifDisabled
 
                 else
                     []
@@ -60,7 +60,7 @@ button style { onPress, text, icon } =
     Input.button
         (style.container
             ++ (if onPress == Nothing then
-                    style.disabled
+                    style.ifDisabled
 
                 else
                     []
@@ -68,7 +68,7 @@ button style { onPress, text, icon } =
         )
         { onPress = onPress
         , label =
-            Element.row style.label
+            Element.row style.labelRow
                 [ icon |> Element.map never
                 , Element.text text
                 ]
diff --git a/src/Internal/Dialog.elm b/src/Internal/Dialog.elm
index 5da2108..97a55eb 100644
--- a/src/Internal/Dialog.elm
+++ b/src/Internal/Dialog.elm
@@ -51,10 +51,10 @@ dialog style { title, body, accept, dismiss } =
                 Nothing
     , content =
         Element.column
-            (style.containerColumn
-                ++ [ Element.centerX
-                   , Element.centerY
-                   ]
+            ([ Element.centerX
+             , Element.centerY
+             ]
+                ++ style.containerColumn
             )
             [ title
                 |> Maybe.map
@@ -64,22 +64,22 @@ dialog style { title, body, accept, dismiss } =
                 |> Maybe.withDefault Element.none
             , body
             , Element.row
-                (style.buttonRow
-                    ++ [ Element.alignRight
-                       , Element.width <| Element.shrink
-                       ]
+                ([ Element.alignRight
+                 , Element.width <| Element.shrink
+                 ]
+                    ++ style.buttonRow
                 )
                 (case ( accept, dismiss ) of
                     ( Just acceptButton, Nothing ) ->
                         acceptButton
-                            |> Button.textButton style.accept
+                            |> Button.textButton style.acceptButton
                             |> List.singleton
 
                     ( Just acceptButton, Just dismissButton ) ->
                         [ dismissButton
-                            |> Button.textButton style.dismiss
+                            |> Button.textButton style.dismissButton
                         , acceptButton
-                            |> Button.textButton style.accept
+                            |> Button.textButton style.acceptButton
                         ]
 
                     _ ->
diff --git a/src/Internal/ExpansionPanel.elm b/src/Internal/ExpansionPanel.elm
new file mode 100644
index 0000000..d8f7a1b
--- /dev/null
+++ b/src/Internal/ExpansionPanel.elm
@@ -0,0 +1,46 @@
+module Internal.ExpansionPanel exposing (ExpansionPanel, expansionPanel)
+
+{-| Part of Material Design Lists
+-}
+
+import Element exposing (Element)
+import Element.Events as Events
+import Widget.Style exposing (ExpansionPanelStyle)
+
+
+type alias ExpansionPanel msg =
+    { onToggle : Bool -> msg
+    , icon : Element Never
+    , text : String
+    , content : Element msg
+    , isExpanded : Bool
+    }
+
+
+expansionPanel :
+    ExpansionPanelStyle msg
+    -> ExpansionPanel msg
+    -> Element msg
+expansionPanel style model =
+    Element.column style.containerColumn <|
+        [ Element.row
+            ((Events.onClick <| model.onToggle <| not model.isExpanded)
+                :: style.panelRow
+            )
+            [ Element.row style.labelRow
+                [ model.icon |> Element.map never
+                , model.text |> Element.text
+                ]
+            , Element.map never <|
+                if model.isExpanded then
+                    style.collapseIcon
+
+                else
+                    style.expandIcon
+            ]
+        , if model.isExpanded then
+            Element.el style.content <| model.content
+
+          else
+            Element.none
+        ]
diff --git a/src/Internal/List.elm b/src/Internal/List.elm
new file mode 100644
index 0000000..55fb29f
--- /dev/null
+++ b/src/Internal/List.elm
@@ -0,0 +1,108 @@
+module Internal.List exposing (buttonColumn, buttonRow, column, row)
+
+import Element exposing (Attribute, Element)
+import Internal.Button exposing (Button)
+import Internal.Select as Select
+import Widget.Style exposing (ButtonStyle, ColumnStyle, RowStyle)
+
+
+internal :
+    { list
+        | element : List (Attribute msg)
+        , ifFirst : List (Attribute msg)
+        , ifLast : List (Attribute msg)
+        , ifCenter : List (Attribute msg)
+    }
+    -> List (Element msg)
+    -> List (Element msg)
+internal style list =
+    list
+        |> List.indexedMap
+            (\i ->
+                Element.el <|
+                    style.element
+                        ++ (if List.length list == 1 then
+                                []
+
+                            else if i == 0 then
+                                style.ifFirst
+
+                            else if i == (List.length list - 1) then
+                                style.ifLast
+
+                            else
+                                style.ifCenter
+                           )
+            )
+
+
+row : RowStyle msg -> List (Element msg) -> Element msg
+row style =
+    internal style >> Element.row style.containerRow
+
+
+column : ColumnStyle msg -> List (Element msg) -> Element msg
+column style =
+    internal style >> Element.column style.containerColumn
+
+
+internalButton :
+    { list :
+        { list
+            | element : List (Attribute msg)
+            , ifFirst : List (Attribute msg)
+            , ifLast : List (Attribute msg)
+            , ifCenter : List (Attribute msg)
+        }
+    , button : ButtonStyle msg
+    }
+    -> List ( Bool, Button msg )
+    -> List (Element msg)
+internalButton style list =
+    list
+        |> List.indexedMap
+            (\i ->
+                Select.selectButton
+                    { container =
+                        style.button.container
+                            ++ style.list.element
+                            ++ (if List.length list == 1 then
+                                    []
+
+                                else if i == 0 then
+                                    style.list.ifFirst
+
+                                else if i == (List.length list - 1) then
+                                    style.list.ifLast
+
+                                else
+                                    style.list.ifCenter
+                               )
+                    , labelRow =
+                        style.button.labelRow
+                    , ifDisabled =
+                        style.button.ifDisabled
+                    , ifActive =
+                        style.button.ifActive
+                    }
+            )
+
+
+buttonRow :
+    { list : RowStyle msg
+    , button : ButtonStyle msg
+    }
+    -> List ( Bool, Button msg )
+    -> Element msg
+buttonRow style =
+    internalButton style >> Element.row style.list.containerRow
+
+
+buttonColumn :
+    { list : ColumnStyle msg
+    , button : ButtonStyle msg
+    }
+    -> List ( Bool, Button msg )
+    -> Element msg
+buttonColumn style =
+    internalButton style >> Element.column style.list.containerColumn
diff --git a/src/Internal/Select.elm b/src/Internal/Select.elm
index 1c93b21..f6acc5d 100644
--- a/src/Internal/Select.elm
+++ b/src/Internal/Select.elm
@@ -1,4 +1,4 @@
-module Internal.Select exposing (multiSelect, select, selectButton)
+module Internal.Select exposing (MultiSelect, Select, multiSelect, select, selectButton)
 
 import Element exposing (Element)
 import Internal.Button as Button exposing (Button)
@@ -39,7 +39,7 @@ selectButton style ( selected, b ) =
                 | container =
                     style.container
                         ++ (if selected then
-                                style.active
+                                style.ifActive
 
                             else
                                 []
diff --git a/src/Internal/Tab.elm b/src/Internal/Tab.elm
new file mode 100644
index 0000000..131b560
--- /dev/null
+++ b/src/Internal/Tab.elm
@@ -0,0 +1,24 @@
+module Internal.Tab exposing (Tab, tab)
+
+import Element exposing (Element)
+import Internal.Select as Select exposing (Select)
+import Widget.Style exposing (TabStyle)
+
+
+type alias Tab msg =
+    { tabs : Select msg
+    , content : Maybe Int -> Element msg
+    }
+
+
+tab : TabStyle msg -> Tab msg -> Element msg
+tab style { tabs, content } =
+    [ tabs
+        |> Select.select
+        |> List.map (Select.selectButton style.button)
+        |> Element.row style.optionRow
+    , tabs.selected
+        |> content
+        |> Element.el style.content
+    ]
+        |> Element.column style.containerColumn
diff --git a/src/Internal/TextInput.elm b/src/Internal/TextInput.elm
new file mode 100644
index 0000000..4d56f81
--- /dev/null
+++ b/src/Internal/TextInput.elm
@@ -0,0 +1,34 @@
+module Internal.TextInput exposing (TextInput, textInput)
+
+import Element exposing (Element)
+import Element.Input as Input exposing (Placeholder)
+import Internal.Button as Button exposing (Button)
+import Widget.Style exposing (TextInputStyle)
+
+
+type alias TextInput msg =
+    { chips : List (Button msg)
+    , text : String
+    , placeholder : Maybe (Placeholder msg)
+    , label : String
+    , onChange : String -> msg
+    }
+
+
+textInput : TextInputStyle msg -> TextInput msg -> Element msg
+textInput style { chips, placeholder, label, text, onChange } =
+    Element.row style.containerRow
+        [ if chips |> List.isEmpty then
+            Element.none
+
+          else
+            chips
+                |> List.map (Button.button style.chipButton)
+                |> Element.row style.chipsRow
+        , Input.text style.input
+            { onChange = onChange
+            , text = text
+            , placeholder = placeholder
+            , label = Input.labelHidden label
+            }
+        ]
diff --git a/src/Widget.elm b/src/Widget.elm
index 532ef86..95a6888 100644
--- a/src/Widget.elm
+++ b/src/Widget.elm
@@ -2,7 +2,9 @@ module Widget exposing
     ( Button, TextButton, iconButton, textButton, button
     , Select, MultiSelect, selectButton, select, multiSelect
     , Dialog, modal, dialog
-    , TextInputStyle, textInput, collapsable, carousel, tab
+    , ExpansionPanel, expansionPanel
+    , TextInputStyle, textInput, carousel, tab
+    , Tab, buttonColumn, buttonRow, column, row
     )
 
 {-| This module contains functions for displaying data.
@@ -23,20 +25,28 @@ module Widget exposing
 @docs Dialog, modal, dialog
 
 
+# ExpansionPanel
+
+@docs ExpansionPanel, expansionPanel
+
+
 # Other Widgets
 
-@docs TextInputStyle, textInput, collapsable, carousel, tab
+@docs TextInputStyle, textInput, carousel, tab
 
 -}
 
 import Array exposing (Array)
 import Element exposing (Attribute, Element)
-import Element.Input as Input exposing (Placeholder)
+import Element.Input exposing (Placeholder)
 import Internal.Button as Button
 import Internal.Dialog as Dialog
+import Internal.ExpansionPanel as ExpansionPanel
+import Internal.List as List
 import Internal.Select as Select
+import Internal.TextInput as TextInput
 import Set exposing (Set)
-import Widget.Style exposing (ButtonStyle, DialogStyle)
+import Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, RowStyle, TabStyle)
 
 
 
@@ -216,13 +226,44 @@ dialog =
 
 
 {----------------------------------------------------------
-- OTHER STATELESS WIDGETS
+- DIALOG
+----------------------------------------------------------}
+
+
+type alias ExpansionPanel msg =
+    { onToggle : Bool -> msg
+    , icon : Element Never
+    , text : String
+    , expandIcon : Element Never
+    , collapseIcon : Element Never
+    , content : Element msg
+    , isExpanded : Bool
+    }
+
+
+expansionPanel :
+    ExpansionPanelStyle msg
+    ->
+        { onToggle : Bool -> msg
+        , icon : Element Never
+        , text : String
+        , content : Element msg
+        , isExpanded : Bool
+        }
+    -> Element msg
+expansionPanel =
+    ExpansionPanel.expansionPanel
+
+
+
+{----------------------------------------------------------
+- TEXT INPUT
 ----------------------------------------------------------}
 
 
 {-| -}
 type alias TextInputStyle msg =
-    { chip : ButtonStyle msg
+    { chipButton : ButtonStyle msg
     , containerRow : List (Attribute msg)
     , chipsRow : List (Attribute msg)
     , input : List (Attribute msg)
@@ -240,65 +281,75 @@ textInput :
         , onChange : String -> msg
         }
     -> Element msg
-textInput style { chips, placeholder, label, text, onChange } =
-    Element.row style.containerRow
-        [ chips
-            |> List.map (Button.button style.chip)
-            |> Element.row style.chipsRow
-        , Input.text style.input
-            { onChange = onChange
-            , text = text
-            , placeholder = placeholder
-            , label = Input.labelHidden label
-            }
-        ]
+textInput =
+    TextInput.textInput
 
 
-{-| Some collapsable content.
--}
-collapsable :
-    { containerColumn : List (Attribute msg)
-    , button : List (Attribute msg)
+
+{----------------------------------------------------------
+- LIST
+----------------------------------------------------------}
+
+
+row : RowStyle msg -> List (Element msg) -> Element msg
+row =
+    List.row
+
+
+column : ColumnStyle msg -> List (Element msg) -> Element msg
+column =
+    List.column
+
+
+buttonRow :
+    { list : RowStyle msg
+    , button : ButtonStyle msg
     }
-    ->
-        { onToggle : Bool -> msg
-        , isCollapsed : Bool
-        , label : Element msg
-        , content : Element msg
-        }
+    -> List ( Bool, Button msg )
     -> Element msg
-collapsable style { onToggle, isCollapsed, label, content } =
-    Element.column style.containerColumn <|
-        [ Input.button style.button
-            { onPress = Just <| onToggle <| not isCollapsed
-            , label = label
-            }
-        ]
-            ++ (if isCollapsed then
-                    []
+buttonRow =
+    List.buttonRow
 
-                else
-                    [ content ]
-               )
+
+buttonColumn :
+    { list : ColumnStyle msg
+    , button : ButtonStyle msg
+    }
+    -> List ( Bool, Button msg )
+    -> Element msg
+buttonColumn =
+    List.buttonColumn
+
+
+
+{----------------------------------------------------------
+- OTHER STATELESS WIDGETS
+----------------------------------------------------------}
+
+
+type alias Tab msg =
+    { tabs : Select msg
+    , content : Maybe Int -> Element msg
+    }
 
 
 {-| Displayes a list of contents in a tab
 -}
 tab :
-    { button : ButtonStyle msg
-    , optionRow : List (Attribute msg)
-    , containerColumn : List (Attribute msg)
-    }
-    -> Select msg
-    -> (Maybe Int -> Element msg)
+    TabStyle msg
+    ->
+        { tabs : Select msg
+        , content : Maybe Int -> Element msg
+        }
     -> Element msg
-tab style options content =
-    [ options
+tab style { tabs, content } =
+    [ tabs
         |> select
         |> List.map (selectButton style.button)
         |> Element.row style.optionRow
-    , options.selected
+    , tabs.selected
         |> content
+        |> Element.el style.content
     ]
         |> Element.column style.containerColumn
 
diff --git a/src/Widget/FilterMultiSelect.elm b/src/Widget/FilterMultiSelect.elm
deleted file mode 100644
index 4d0ac79..0000000
--- a/src/Widget/FilterMultiSelect.elm
+++ /dev/null
@@ -1,108 +0,0 @@
-module Widget.FilterMultiSelect exposing (Model, Msg(..), init, update, viewInput, viewOptions)
-
-{-|
-
-@docs Model, Msg, init, update, viewInput, viewOptions
-
--}
-
-import Element.Input exposing (Placeholder)
-import Set exposing (Set)
-import Widget exposing (Button)
-
-
-{-| The Model containing the raw value, the selected value and all the possible options.
--}
-type alias Model =
-    { raw : String
-    , selected : Set String
-    , options : Set String
-    }
-
-
-{-| The Msg is exposed by design. You can unselect by sending `Selected Nothing`.
--}
-type Msg
-    = ChangedRaw String
-    | ToggleSelected String
-
-
-{-| The initial state contains the set of possible options.
--}
-init : Set String -> Model
-init options =
-    { raw = ""
-    , selected = Set.empty
-    , options = options
-    }
-
-
-{-| Updates the Model
--}
-update : Msg -> Model -> Model
-update msg model =
-    case msg of
-        ChangedRaw string ->
-            { model
-                | raw = string
-            }
-
-        ToggleSelected string ->
-            if model.selected |> Set.member string then
-                { model
-                    | selected = model.selected |> Set.remove string
-                }
-
-            else
-                { model
-                    | selected = model.selected |> Set.insert string
-                    , raw = ""
-                }
-
-
-{-| A wrapper around Input.text.
--}
-viewInput :
-    Model
-    ->
-        { msgMapper : Msg -> msg
-        , placeholder : Maybe (Placeholder msg)
-        , label : String
-        , toChip : String -> Button msg
-        }
-    ->
-        { chips : List (Button msg)
-        , text : String
-        , placeholder : Maybe (Placeholder msg)
-        , label : String
-        , onChange : String -> msg
-        }
-viewInput model { msgMapper, placeholder, label, toChip } =
-    { chips =
-        model.selected
-            |> Set.toList
-            |> List.map toChip
-    , text = model.raw
-    , placeholder = placeholder
-    , label = label
-    , onChange = ChangedRaw >> msgMapper
-    }
-
-
-{-| Returns a List of all options that matches the filter.
--}
-viewOptions : Model -> List String
-viewOptions { raw, options, selected } =
-    if raw == "" then
-        []
-
-    else
-        options
-            |> Set.filter (String.toUpper >> String.contains (raw |> String.toUpper))
-            |> Set.filter
-                (\string ->
-                    selected
-                        |> Set.member string
-                        |> not
-                )
-            |> Set.toList
diff --git a/src/Widget/FilterSelect.elm b/src/Widget/FilterSelect.elm
deleted file mode 100644
index 8d6bbf9..0000000
--- a/src/Widget/FilterSelect.elm
+++ /dev/null
@@ -1,93 +0,0 @@
-module Widget.FilterSelect exposing (Model, Msg(..), init, update, viewInput, viewOptions)
-
-{-|
-
-@docs Model, Msg, init, update, viewInput, viewOptions
-
--}
-
-import Element exposing (Attribute, Element)
-import Element.Input as Input exposing (Placeholder)
-import Set exposing (Set)
-
-
-{-| The Model containing the raw value, the selected value and all the possible options.
--}
-type alias Model =
-    { raw : String
-    , selected : Maybe String
-    , options : Set String
-    }
-
-
-{-| The Msg is exposed by design. You can unselect by sending `Selected Nothing`.
--}
-type Msg
-    = ChangedRaw String
-    | Selected (Maybe String)
-
-
-{-| The initial state contains the set of possible options.
--}
-init : Set String -> Model
-init options =
-    { raw = ""
-    , selected = Nothing
-    , options = options
-    }
-
-
-{-| Updates the Model
--}
-update : Msg -> Model -> Model
-update msg model =
-    case msg of
-        ChangedRaw string ->
-            { model
-                | raw = string
-            }
-
-        Selected maybe ->
-            { model
-                | selected = maybe
-            }
-                |> (case maybe of
-                        Just string ->
-                            \m -> { m | raw = string }
-
-                        Nothing ->
-                            identity
-                   )
-
-
-{-| A wrapper around Input.text.
--}
-viewInput :
-    List (Attribute msg)
-    -> Model
-    ->
-        { msgMapper : Msg -> msg
-        , placeholder : Maybe (Placeholder msg)
-        , label : String
-        }
-    -> Element msg
-viewInput attributes model { msgMapper, placeholder, label } =
-    Input.text attributes
-        { onChange = ChangedRaw >> msgMapper
-        , text = model.raw
-        , placeholder = placeholder
-        , label = Input.labelHidden label
-        }
-
-
-{-| Returns a List of all options that matches the filter.
--}
-viewOptions : Model -> List String
-viewOptions { raw, options } =
-    if raw == "" then
-        []
-
-    else
-        options
-            |> Set.filter (String.toUpper >> String.contains (raw |> String.toUpper))
-            |> Set.toList
diff --git a/src/Widget/Snackbar.elm b/src/Widget/Snackbar.elm
index 2c03a61..4116da1 100644
--- a/src/Widget/Snackbar.elm
+++ b/src/Widget/Snackbar.elm
@@ -18,10 +18,10 @@ module Widget.Snackbar exposing
 
 -}
 
-import Element exposing (Attribute, Element)
+import Element exposing (Element)
 import Queue exposing (Queue)
 import Widget exposing (TextButton)
-import Widget.Style exposing (ButtonStyle)
+import Widget.Style exposing (SnackbarStyle)
 
 
 type alias Message msg =
@@ -105,10 +105,7 @@ current model =
 
 
 view :
-    { row : List (Attribute msg)
-    , text : List (Attribute msg)
-    , button : ButtonStyle msg
-    }
+    SnackbarStyle msg
     -> (a -> Message msg)
     -> Model a
     -> Maybe (Element msg)
@@ -127,6 +124,6 @@ view style toMessage model =
                                 (Widget.textButton style.button)
                             |> Maybe.withDefault Element.none
                         ]
-                            |> Element.row style.row
+                            |> Element.row style.containerRow
                    )
             )
diff --git a/src/Widget/Style.elm b/src/Widget/Style.elm
index c1ca2ea..d88e328 100644
--- a/src/Widget/Style.elm
+++ b/src/Widget/Style.elm
@@ -1,4 +1,4 @@
-module Widget.Style exposing (ButtonStyle, DialogStyle, Style)
+module Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, RowStyle, SnackbarStyle, Style, TabStyle, TextInputStyle)
 
 import Element exposing (Attribute, Element)
 import Html exposing (Html)
@@ -6,9 +6,9 @@ import Html exposing (Html)
 
 type alias ButtonStyle msg =
     { container : List (Attribute msg)
-    , disabled : List (Attribute msg)
-    , label : List (Attribute msg)
-    , active : List (Attribute msg)
+    , labelRow : List (Attribute msg)
+    , ifDisabled : List (Attribute msg)
+    , ifActive : List (Attribute msg)
     }
 
 
@@ -16,18 +16,65 @@ type alias DialogStyle msg =
     { containerColumn : List (Attribute msg)
     , title : List (Attribute msg)
     , buttonRow : List (Attribute msg)
-    , accept : ButtonStyle msg
-    , dismiss : ButtonStyle msg
+    , acceptButton : ButtonStyle msg
+    , dismissButton : ButtonStyle msg
+    }
+
+
+type alias ExpansionPanelStyle msg =
+    { containerColumn : List (Attribute msg)
+    , panelRow : List (Attribute msg)
+    , labelRow : List (Attribute msg)
+    , content : List (Attribute msg)
+    , expandIcon : Element Never
+    , collapseIcon : Element Never
+    }
+
+
+type alias SnackbarStyle msg =
+    { containerRow : List (Attribute msg)
+    , text : List (Attribute msg)
+    , button : ButtonStyle msg
+    }
+
+
+type alias TextInputStyle msg =
+    { chipButton : ButtonStyle msg
+    , containerRow : List (Attribute msg)
+    , chipsRow : List (Attribute msg)
+    , input : List (Attribute msg)
+    }
+
+
+type alias TabStyle msg =
+    { button : ButtonStyle msg
+    , optionRow : List (Attribute msg)
+    , containerColumn : List (Attribute msg)
+    , content : List (Attribute msg)
+    }
+
+
+type alias RowStyle msg =
+    { containerRow : List (Attribute msg)
+    , element : List (Attribute msg)
+    , ifFirst : List (Attribute msg)
+    , ifLast : List (Attribute msg)
+    , ifCenter : List (Attribute msg)
+    }
+
+
+type alias ColumnStyle msg =
+    { containerColumn : List (Attribute msg)
+    , element : List (Attribute msg)
+    , ifFirst : List (Attribute msg)
+    , ifLast : List (Attribute msg)
+    , ifCenter : List (Attribute msg)
     }
 
 
 type alias Style style msg =
     { style
-        | snackbar :
-            { row : List (Attribute msg)
-            , text : List (Attribute msg)
-            , button : ButtonStyle msg
-            }
+        | snackbar : SnackbarStyle msg
         , layout : List (Attribute msg) -> Element msg -> Html msg
         , header : List (Attribute msg)
         , sheet : List (Attribute msg)
diff --git a/src/Widget/ValidatedInput.elm b/src/Widget/ValidatedInput.elm
deleted file mode 100644
index e3aa08e..0000000
--- a/src/Widget/ValidatedInput.elm
+++ /dev/null
@@ -1,161 +0,0 @@
-module Widget.ValidatedInput exposing
-    ( Model, Msg, init, update, view
-    , getError, getRaw, getValue
-    )
-
-{-| The validated Input is a wrapper around `Input.text`.
-They can validate the input and return an error if nessarry.
-
-
-# Basics
-
-@docs Model, Msg, init, update, view
-
-
-# Access the Model
-
-@docs getError, getRaw, getValue
-
--}
-
-import Element exposing (Attribute, Element)
-import Element.Events as Events
-import Element.Input as Input exposing (Placeholder)
-
-
-{-| -}
-type Model err a
-    = Model
-        { raw : Maybe String
-        , value : a
-        , err : Maybe err
-        , validator : String -> Result err a
-        , toString : a -> String
-        }
-
-
-{-| returns the raw value (the value that the user currently sees)
--}
-getRaw : Model err a -> String
-getRaw (Model { raw, value, toString }) =
-    case raw of
-        Just string ->
-            string
-
-        Nothing ->
-            value |> toString
-
-
-{-| returns the value (the value that has been last successfully validated)
--}
-getValue : Model err a -> a
-getValue (Model { value }) =
-    value
-
-
-{-| returns the error (if one exists)
--}
-getError : Model err a -> Maybe err
-getError (Model { err }) =
-    err
-
-
-{-| -}
-type Msg
-    = ChangedRaw String
-    | LostFocus
-    | StartEditing
-
-
-{-| The initial state contains
-
-  - `value`: starting value
-  - `validator`: a vaidation function (a decoder)
-  - `toString`: a function that returns a string representation
-
--}
-init : { value : a, validator : String -> Result err a, toString : a -> String } -> Model err a
-init { validator, toString, value } =
-    Model
-        { raw = Nothing
-        , value = value
-        , err = Nothing
-        , validator = validator
-        , toString = toString
-        }
-
-
-{-| -}
-update : Msg -> Model err a -> Model err a
-update msg (Model model) =
-    case msg of
-        StartEditing ->
-            Model
-                { model
-                    | raw = model.value |> model.toString |> Just
-                }
-
-        ChangedRaw string ->
-            Model
-                { model
-                    | raw = Just string
-                    , err = Nothing
-                }
-
-        LostFocus ->
-            case model.raw of
-                Just string ->
-                    case model.validator string of
-                        Ok value ->
-                            Model
-                                { model
-                                    | value = value
-                                    , raw = Nothing
-                                    , err = Nothing
-                                }
-
-                        Err err ->
-                            Model
-                                { model
-                                    | raw = Nothing
-                                    , err = Just err
-                                }
-
-                Nothing ->
-                    Model model
-
-
-{-| the view function, the parameters include
-
-  - `msgMapper`: A function wrapping the `Msg` into a `msg`
-  - `placeholder`: See Element.text for more information
-  - `label`: The (hidden) label of the input (needed for screen readers)
-  - `readOnly`: a representation of the validated value
-    (clicking on the element will turn on edit mode)
-
--}
-view :
-    List (Attribute msg)
-    -> Model err a
-    ->
-        { msgMapper : Msg -> msg
-        , placeholder : Maybe (Placeholder msg)
-        , label : String
-        , readOnly : a -> Element msg
-        }
-    -> Element msg
-view attributes (Model model) { msgMapper, placeholder, label, readOnly } =
-    case model.raw of
-        Just string ->
-            Input.text (attributes ++ [ Events.onLoseFocus <| msgMapper <| LostFocus ])
-                { onChange = ChangedRaw >> msgMapper
-                , text = string
-                , placeholder = placeholder
-                , label = Input.labelHidden label
-                }
-
-        Nothing ->
-            Input.button []
-                { onPress = Just (StartEditing |> msgMapper)
-                , label = model.value |> readOnly
-                }

From bc2c86257f0c07841838cc27a502870de6afc80c Mon Sep 17 00:00:00 2001
From: Lucas Payr 
Date: Tue, 12 May 2020 21:15:44 +0200
Subject: [PATCH 07/14] Moving Examples into own folder

---
 example/elm.json                          |   1 +
 example/src/Data/Example.elm              | 187 ++++++++++
 example/src/Data/Style/ElmUiFramework.elm |   4 +-
 example/src/Example/Button.elm            |  83 +++++
 example/src/Example/ExpansionPanel.elm    |  53 +++
 example/src/Example/MultiSelect.elm       |  72 ++++
 example/src/Example/Select.elm            |  64 ++++
 example/src/Example/Tab.elm               |  76 ++++
 example/src/{Example.elm => Main.elm}     |  74 ++--
 example/src/Reusable.elm                  |  98 +----
 example/src/Stateless.elm                 | 419 +++++++++-------------
 example/src/View/Test.elm                 | 390 ++++++++++++++++++++
 src/Internal/SortTable.elm                | 181 ++++++++++
 src/Widget.elm                            | 100 +++++-
 src/Widget/SortTable.elm                  | 215 -----------
 src/Widget/Style.elm                      |  11 +-
 16 files changed, 1418 insertions(+), 610 deletions(-)
 create mode 100644 example/src/Data/Example.elm
 create mode 100644 example/src/Example/Button.elm
 create mode 100644 example/src/Example/ExpansionPanel.elm
 create mode 100644 example/src/Example/MultiSelect.elm
 create mode 100644 example/src/Example/Select.elm
 create mode 100644 example/src/Example/Tab.elm
 rename example/src/{Example.elm => Main.elm} (92%)
 create mode 100644 example/src/View/Test.elm
 create mode 100644 src/Internal/SortTable.elm
 delete mode 100644 src/Widget/SortTable.elm

diff --git a/example/elm.json b/example/elm.json
index 9f18fca..ec138fb 100644
--- a/example/elm.json
+++ b/example/elm.json
@@ -17,6 +17,7 @@
             "feathericons/elm-feather": "1.4.0",
             "jasonliang512/elm-heroicons": "1.0.2",
             "mdgriffith/elm-ui": "1.1.5",
+            "ryannhg/elm-spa": "4.1.0",
             "turboMaCk/queue": "1.0.2",
             "wernerdegroot/listzipper": "4.0.0"
         },
diff --git a/example/src/Data/Example.elm b/example/src/Data/Example.elm
new file mode 100644
index 0000000..881a8dd
--- /dev/null
+++ b/example/src/Data/Example.elm
@@ -0,0 +1,187 @@
+module Data.Example exposing (Model, Msg, init, subscriptions, toCardList, update, view)
+
+import Data.Style exposing (Style)
+import Element exposing (Element)
+import Example.Button as Button
+import Example.ExpansionPanel as ExpansionPanel
+import Example.MultiSelect as MultiSelect
+import Example.Select as Select
+import Example.Tab as Tab
+import Framework.Grid as Grid
+import View.Test as Test
+
+
+type Msg
+    = Button Button.Msg
+    | Select Select.Msg
+    | MultiSelect MultiSelect.Msg
+    | ExpansionPanel ExpansionPanel.Msg
+    | Tab Tab.Msg
+
+
+type alias Model =
+    { button : Button.Model
+    , select : Select.Model
+    , multiSelect : MultiSelect.Model
+    , expansionPanel : ExpansionPanel.Model
+    , tab : Tab.Model
+    }
+
+
+init : ( Model, Cmd Msg )
+init =
+    let
+        ( buttonModel, buttonMsg ) =
+            Button.init
+
+        ( selectModel, selectMsg ) =
+            Select.init
+
+        ( multiSelectModel, multiSelectMsg ) =
+            MultiSelect.init
+
+        ( expansionPanelModel, expansionPanelMsg ) =
+            ExpansionPanel.init
+
+        ( tabModel, tabMsg ) =
+            Tab.init
+    in
+    ( { button = buttonModel
+      , select = selectModel
+      , multiSelect = multiSelectModel
+      , expansionPanel = expansionPanelModel
+      , tab = tabModel
+      }
+    , [ Cmd.map Button buttonMsg
+      , Cmd.map Select selectMsg
+      , Cmd.map MultiSelect multiSelectMsg
+      , Cmd.map Tab tabMsg
+      ]
+        |> Cmd.batch
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        Button buttonMsg ->
+            Button.update buttonMsg model.button
+                |> Tuple.mapBoth
+                    (\a -> { model | button = a })
+                    (Cmd.map Button)
+
+        Select selectMsg ->
+            Select.update selectMsg model.select
+                |> Tuple.mapBoth
+                    (\a -> { model | select = a })
+                    (Cmd.map Select)
+
+        MultiSelect multiSelectMsg ->
+            MultiSelect.update multiSelectMsg model.multiSelect
+                |> Tuple.mapBoth
+                    (\a -> { model | multiSelect = a })
+                    (Cmd.map MultiSelect)
+
+        ExpansionPanel expansionPanelMsg ->
+            ExpansionPanel.update expansionPanelMsg model.expansionPanel
+                |> Tuple.mapBoth
+                    (\a -> { model | expansionPanel = a })
+                    (Cmd.map ExpansionPanel)
+
+        Tab tabMsg ->
+            Tab.update tabMsg model.tab
+                |> Tuple.mapBoth
+                    (\a -> { model | tab = a })
+                    (Cmd.map Tab)
+
+
+subscriptions : Model -> Sub Msg
+subscriptions model =
+    [ Button.subscriptions model.button |> Sub.map Button
+    , Select.subscriptions model.select |> Sub.map Select
+    , MultiSelect.subscriptions model.multiSelect |> Sub.map MultiSelect
+    , ExpansionPanel.subscriptions model.expansionPanel |> Sub.map ExpansionPanel
+    , Tab.subscriptions model.tab |> Sub.map Tab
+    ]
+        |> Sub.batch
+
+
+view :
+    (Msg -> msg)
+    -> Style msg
+    -> Model
+    ->
+        { button : Element msg
+        , select : Element msg
+        , multiSelect : Element msg
+        , expansionPanel : Element msg
+        , tab : Element msg
+        }
+view msgMapper style model =
+    { button =
+        Button.view
+            (Button >> msgMapper)
+            style
+            model.button
+    , select =
+        Select.view
+            (Select >> msgMapper)
+            style
+            model.select
+    , multiSelect =
+        MultiSelect.view
+            (MultiSelect >> msgMapper)
+            style
+            model.multiSelect
+    , expansionPanel =
+        ExpansionPanel.view
+            (ExpansionPanel >> msgMapper)
+            style
+            model.expansionPanel
+    , tab =
+        Tab.view
+            (Tab >> msgMapper)
+            style
+            model.tab
+    }
+
+
+toCardList :
+    { idle : msg
+    , msgMapper : Msg -> msg
+    , style : Style msg
+    , model : Model
+    }
+    -> List ( String, Element msg, Element msg )
+toCardList { idle, msgMapper, style, model } =
+    [ { title = "Icon Button"
+      , example = .button
+      , test = Test.iconButton
+      }
+    , { title = "Select"
+      , example = .select
+      , test = Test.select
+      }
+    , { title = "Multi Select"
+      , example = .multiSelect
+      , test = Test.multiSelect
+      }
+    , { title = "Expansion Panel"
+      , example = .expansionPanel
+      , test = Test.expansionPanel
+      }
+    , { title = "Tab"
+      , example = .tab
+      , test = Test.tab
+      }
+    ]
+        |> List.map
+            (\{ title, example, test } ->
+                ( title
+                , model
+                    |> view msgMapper style
+                    |> example
+                , test idle style
+                    |> Element.column Grid.simple
+                )
+            )
diff --git a/example/src/Data/Style/ElmUiFramework.elm b/example/src/Data/Style/ElmUiFramework.elm
index 5f11b08..b16d5cc 100644
--- a/example/src/Data/Style/ElmUiFramework.elm
+++ b/example/src/Data/Style/ElmUiFramework.elm
@@ -29,7 +29,7 @@ textButton =
 
 simpleButton : ButtonStyle msg
 simpleButton =
-    { container = Button.simple ++ Color.primary
+    { container = Button.simple ++ Color.success
     , labelRow = Grid.simple
     , ifDisabled = Color.disabled
     , ifActive = Color.primary
@@ -211,7 +211,7 @@ row =
 
 cardColumn : ColumnStyle msg
 cardColumn =
-    { containerColumn = Grid.compact
+    { containerColumn = Grid.compact ++ [Element.height <| Element.fill]
     , element = Card.large ++ [Element.height <| Element.fill]
     , ifFirst = Group.top
     , ifLast = Group.bottom
diff --git a/example/src/Example/Button.elm b/example/src/Example/Button.elm
new file mode 100644
index 0000000..36211f0
--- /dev/null
+++ b/example/src/Example/Button.elm
@@ -0,0 +1,83 @@
+module Example.Button exposing (Model, Msg, init, subscriptions, update, view)
+
+import Element exposing (Element)
+import FeatherIcons
+import Widget
+import Widget.Style exposing (ButtonStyle)
+
+
+type alias Style style msg =
+    { style
+        | primaryButton : ButtonStyle msg
+        , button : ButtonStyle msg
+    }
+
+
+type alias Model =
+    { isButtonEnabled : Bool
+    }
+
+
+type Msg
+    = ChangedButtonStatus Bool
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( { isButtonEnabled = True
+      }
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        ChangedButtonStatus bool ->
+            ( { model | isButtonEnabled = bool }
+            , Cmd.none
+            )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+view : (Msg -> msg) -> Style style msg -> Model -> Element msg
+view msgMapper style model =
+    [ Widget.button style.primaryButton
+        { text = "disable me"
+        , icon =
+            FeatherIcons.slash
+                |> FeatherIcons.withSize 16
+                |> FeatherIcons.toHtml []
+                |> Element.html
+                |> Element.el []
+        , onPress =
+            if model.isButtonEnabled then
+                ChangedButtonStatus False
+                    |> msgMapper
+                    |> Just
+
+            else
+                Nothing
+        }
+    , Widget.iconButton style.button
+        { text = "reset"
+        , icon =
+            FeatherIcons.repeat
+                |> FeatherIcons.withSize 16
+                |> FeatherIcons.toHtml []
+                |> Element.html
+                |> Element.el []
+        , onPress =
+            ChangedButtonStatus True
+                |> msgMapper
+                |> Just
+        }
+    ]
+        |> Element.row
+            [ Element.spaceEvenly
+            , Element.width <| Element.fill
+            ]
diff --git a/example/src/Example/ExpansionPanel.elm b/example/src/Example/ExpansionPanel.elm
new file mode 100644
index 0000000..69cb3c3
--- /dev/null
+++ b/example/src/Example/ExpansionPanel.elm
@@ -0,0 +1,53 @@
+module Example.ExpansionPanel exposing (Model, Msg, init, subscriptions, update, view)
+
+import Element exposing (Element)
+import Widget
+import Widget.Style exposing (ExpansionPanelStyle)
+
+
+type alias Style style msg =
+    { style
+        | expansionPanel : ExpansionPanelStyle msg
+    }
+
+
+type alias Model =
+    { isExpanded : Bool }
+
+
+type Msg
+    = ToggleCollapsable Bool
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( { isExpanded = False }
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        ToggleCollapsable bool ->
+            ( { model
+                | isExpanded = bool
+              }
+            , Cmd.none
+            )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+view : (Msg -> msg) -> Style style msg -> Model -> Element msg
+view msgMapper style model =
+    { onToggle = ToggleCollapsable >> msgMapper
+    , isExpanded = model.isExpanded
+    , icon = Element.none
+    , text = "Title"
+    , content = Element.text <| "Hello World"
+    }
+        |> Widget.expansionPanel style.expansionPanel
diff --git a/example/src/Example/MultiSelect.elm b/example/src/Example/MultiSelect.elm
new file mode 100644
index 0000000..977d4ec
--- /dev/null
+++ b/example/src/Example/MultiSelect.elm
@@ -0,0 +1,72 @@
+module Example.MultiSelect exposing (Model, Msg, init, subscriptions, update, view)
+
+import Element exposing (Element)
+import Set exposing (Set)
+import Widget
+import Widget.Style exposing (ButtonStyle, RowStyle)
+
+
+type alias Style style msg =
+    { style
+        | row : RowStyle msg
+        , button : ButtonStyle msg
+    }
+
+
+type alias Model =
+    { selected : Set Int
+    }
+
+
+type Msg
+    = ChangedSelected Int
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( { selected = Set.empty }
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        ChangedSelected int ->
+            ( { model
+                | selected =
+                    model.selected
+                        |> (if model.selected |> Set.member int then
+                                Set.remove int
+
+                            else
+                                Set.insert int
+                           )
+              }
+            , Cmd.none
+            )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+view : (Msg -> msg) -> Style style msg -> Model -> Element msg
+view msgMapper style model =
+    { selected = model.selected
+    , options =
+        [ 1, 2, 42 ]
+            |> List.map
+                (\int ->
+                    { text = String.fromInt int
+                    , icon = Element.none
+                    }
+                )
+    , onSelect = ChangedSelected >> msgMapper >> Just
+    }
+        |> Widget.multiSelect
+        |> Widget.buttonRow
+            { list = style.row
+            , button = style.button
+            }
diff --git a/example/src/Example/Select.elm b/example/src/Example/Select.elm
new file mode 100644
index 0000000..fbebe32
--- /dev/null
+++ b/example/src/Example/Select.elm
@@ -0,0 +1,64 @@
+module Example.Select exposing (Model, Msg, init, subscriptions, update, view)
+
+import Element exposing (Attribute, Element)
+import FeatherIcons
+import Widget
+import Widget.Style exposing (ButtonStyle, RowStyle)
+
+
+type alias Style style msg =
+    { style
+        | row : RowStyle msg
+        , button : ButtonStyle msg
+    }
+
+
+type alias Model =
+    { selected : Maybe Int }
+
+
+type Msg
+    = ChangedSelected Int
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( { selected = Nothing }
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        ChangedSelected int ->
+            ( { model
+                | selected = Just int
+              }
+            , Cmd.none
+            )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+view : (Msg -> msg) -> Style style msg -> Model -> Element msg
+view msgMapper style model =
+    { selected = model.selected
+    , options =
+        [ 1, 2, 42 ]
+            |> List.map
+                (\int ->
+                    { text = String.fromInt int
+                    , icon = Element.none
+                    }
+                )
+    , onSelect = ChangedSelected >> msgMapper >> Just
+    }
+        |> Widget.select
+        |> Widget.buttonRow
+            { list = style.row
+            , button = style.button
+            }
diff --git a/example/src/Example/Tab.elm b/example/src/Example/Tab.elm
new file mode 100644
index 0000000..9da1e79
--- /dev/null
+++ b/example/src/Example/Tab.elm
@@ -0,0 +1,76 @@
+module Example.Tab exposing (Model, Msg, init, subscriptions, update, view)
+
+import Element exposing (Element)
+import Widget
+import Widget.Style exposing (TabStyle)
+
+
+type alias Style style msg =
+    { style
+        | tab : TabStyle msg
+    }
+
+
+type alias Model =
+    { selected : Maybe Int
+    }
+
+
+type Msg
+    = ChangedTab Int
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( { selected = Nothing
+      }
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        ChangedTab int ->
+            ( { model | selected = Just int }
+            , Cmd.none
+            )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+view : (Msg -> msg) -> Style style msg -> Model -> Element msg
+view msgMapper style model =
+    Widget.tab style.tab
+        { tabs =
+            { selected = model.selected
+            , options =
+                [ 1, 2, 3 ]
+                    |> List.map
+                        (\int ->
+                            { text = "Tab " ++ (int |> String.fromInt)
+                            , icon = Element.none
+                            }
+                        )
+            , onSelect = ChangedTab >> msgMapper >> Just
+            }
+        , content =
+            \selected ->
+                (case selected of
+                    Just 0 ->
+                        "This is Tab 1"
+
+                    Just 1 ->
+                        "This is the second tab"
+
+                    Just 2 ->
+                        "The thrid and last tab"
+
+                    _ ->
+                        "Please select a tab"
+                )
+                    |> Element.text
+        }
diff --git a/example/src/Example.elm b/example/src/Main.elm
similarity index 92%
rename from example/src/Example.elm
rename to example/src/Main.elm
index 1b3674a..10dc053 100644
--- a/example/src/Example.elm
+++ b/example/src/Main.elm
@@ -1,4 +1,4 @@
-module Example exposing (main)
+module Main exposing (main)
 
 import Array
 import Browser
@@ -6,6 +6,8 @@ import Browser.Dom as Dom exposing (Viewport)
 import Browser.Events as Events
 import Browser.Navigation as Navigation
 import Data.Section as Section exposing (Section(..))
+import Data.Style as Style exposing (Style)
+import Data.Theme as Theme exposing (Theme(..))
 import Element exposing (Attribute, DeviceClass(..), Element)
 import Element.Border as Border
 import Element.Font as Font
@@ -32,15 +34,10 @@ import Widget
 import Widget.ScrollingNav as ScrollingNav
 import Widget.Snackbar as Snackbar
 import Widget.Style exposing (ButtonStyle)
-import Data.Style as Style exposing (Style)
-import Data.Theme as Theme exposing (Theme(..))
-
-
 
 
 type alias LoadedModel =
     { stateless : Stateless.Model
-    , reusable : Reusable.Model
     , scrollingNav : ScrollingNav.Model Section
     , layout : Layout LoadedMsg
     , displayDialog : Bool
@@ -61,7 +58,6 @@ type Model
 
 type LoadedMsg
     = StatelessSpecific Stateless.Msg
-    | ReusableSpecific Reusable.Msg
     | UpdateScrollingNav (ScrollingNav.Model Section -> ScrollingNav.Model Section)
     | TimePassed Int
     | AddSnackbar ( String, Bool )
@@ -97,9 +93,11 @@ initialModel { viewport } =
                             Err _ ->
                                 Idle
                 }
+
+        ( stateless, statelessCmd ) =
+            Stateless.init
     in
-    ( { stateless = Stateless.init
-      , reusable = Reusable.init
+    ( { stateless = stateless
       , scrollingNav = scrollingNav
       , layout = Layout.init
       , displayDialog = False
@@ -114,7 +112,10 @@ initialModel { viewport } =
             }
       , theme = ElmUiFramework
       }
-    , cmd
+    , [ cmd
+      , statelessCmd |> Cmd.map StatelessSpecific
+      ]
+        |> Cmd.batch
     )
 
 
@@ -127,7 +128,6 @@ init () =
 
 view : Model -> Html Msg
 view model =
-    
     case model of
         Loading ->
             Element.none |> Framework.responsiveLayout []
@@ -173,8 +173,6 @@ view model =
                                             ReusableViews ->
                                                 Reusable.view m.theme
                                                     { addSnackbar = AddSnackbar
-                                                    , model = m.reusable
-                                                    , msgMapper = ReusableSpecific
                                                     }
 
                                             StatelessViews ->
@@ -198,10 +196,10 @@ view model =
                                                     , items
                                                         |> (if m.search.current /= "" then
                                                                 List.filter
-                                                                    (\(a,_,_) ->
+                                                                    (\( a, _, _ ) ->
                                                                         a
-                                                                        |> String.toLower
-                                                                        |> String.contains (m.search.current |> String.toLower)
+                                                                            |> String.toLower
+                                                                            |> String.contains (m.search.current |> String.toLower)
                                                                     )
 
                                                             else
@@ -209,10 +207,13 @@ view model =
                                                            )
                                                         |> List.map
                                                             (\( name, elem, more ) ->
-                                                                [ Element.text name
-                                                                    |> Element.el Heading.h3
-                                                                , elem
+                                                                [ [ Element.text name
+                                                                        |> Element.el (Heading.h3 ++ [ Element.height <| Element.shrink ])
+                                                                  , elem
+                                                                  ]
+                                                                    |> Element.column Grid.simple
                                                                 , more
+                                                                    |> Element.el [ Element.height <| Element.fill ]
                                                                 ]
                                                                     |> Widget.column style.cardColumn
                                                             )
@@ -226,7 +227,7 @@ view model =
                             |> Element.column Framework.container
                         ]
                             |> Element.column Grid.compact
-                    , style =style
+                    , style = style
                     , layout = m.layout
                     , window = m.window
                     , menu =
@@ -247,17 +248,21 @@ view model =
                           , text = "Github"
                           , icon = Icons.github |> Element.html |> Element.el []
                           }
-                        , { onPress = if m.theme /= ElmUiFramework then
-                                Just <| SetTheme <| ElmUiFramework
-                            else
-                                Nothing
+                        , { onPress =
+                                if m.theme /= ElmUiFramework then
+                                    Just <| SetTheme <| ElmUiFramework
+
+                                else
+                                    Nothing
                           , text = "Elm-Ui-Framework Theme"
                           , icon = Icons.penTool |> Element.html |> Element.el []
                           }
-                        , { onPress = if m.theme /= Template then
-                                Just <| SetTheme <| Template
-                            else
-                                Nothing
+                        , { onPress =
+                                if m.theme /= Template then
+                                    Just <| SetTheme <| Template
+
+                                else
+                                    Nothing
                           , text = "Template Theme"
                           , icon = Icons.penTool |> Element.html |> Element.el []
                           }
@@ -291,17 +296,6 @@ view model =
 updateLoaded : LoadedMsg -> LoadedModel -> ( LoadedModel, Cmd LoadedMsg )
 updateLoaded msg model =
     case msg of
-        ReusableSpecific m ->
-            ( model.reusable
-                |> Reusable.update m
-                |> (\reusable ->
-                        { model
-                            | reusable = reusable
-                        }
-                   )
-            , Cmd.none
-            )
-
         StatelessSpecific m ->
             model.stateless
                 |> Stateless.update m
@@ -408,7 +402,7 @@ updateLoaded msg model =
               }
             , Cmd.none
             )
-        
+
         SetTheme theme ->
             ( { model | theme = theme }
             , Cmd.none
diff --git a/example/src/Reusable.elm b/example/src/Reusable.elm
index a87b5ef..cf8e3fa 100644
--- a/example/src/Reusable.elm
+++ b/example/src/Reusable.elm
@@ -1,4 +1,4 @@
-module Reusable exposing (Model, Msg, init, update, view)
+module Reusable exposing ( view)
 
 import Browser
 import Element exposing (Color, Element)
@@ -22,17 +22,9 @@ import Time
 import Widget
 import Widget.ScrollingNav as ScrollingNav
 import Widget.Snackbar as Snackbar
-import Widget.SortTable as SortTable
 import Data.Style exposing (Style)
 import Data.Theme as Theme exposing (Theme)
 
-type alias Model =
-    SortTable.Model
-
-
-type Msg
-    = SortBy { title : String, asc : Bool }
-
 
 type alias Item =
     { name : String
@@ -41,17 +33,6 @@ type alias Item =
     }
 
 
-update : Msg -> Model -> Model
-update msg model =
-    case msg of
-        SortBy m ->
-            m
-
-
-init : Model
-init =
-    SortTable.sortBy { title = "Name", asc = True }
-
 
 snackbar : Style msg -> (( String, Bool ) -> msg) -> ( String, Element msg,Element msg )
 snackbar style addSnackbar =
@@ -82,78 +63,7 @@ snackbar style addSnackbar =
     )
 
 
-sortTable : Style Msg -> SortTable.Model -> ( String, Element Msg,Element Msg )
-sortTable style model =
-    ( "Sort Table"
-    , SortTable.view
-        { content =
-            [ { id = 1, name = "Antonio", rating = 2.456 }
-            , { id = 2, name = "Ana", rating = 1.34 }
-            , { id = 3, name = "Alfred", rating = 4.22 }
-            , { id = 4, name = "Thomas", rating = 3 }
-            ]
-        , columns =
-            [ SortTable.intColumn
-                { title = "Id"
-                , value = .id
-                , toString = \int -> "#" ++ String.fromInt int
-                }
-            , SortTable.stringColumn
-                { title = "Name"
-                , value = .name
-                , toString = identity
-                }
-            , SortTable.floatColumn
-                { title = "rating"
-                , value = .rating
-                , toString = String.fromFloat
-                }
-            ]
-        , model = model
-        }
-        |> (\{ data, columns } ->
-                { data = data
-                , columns =
-                    columns
-                        |> List.map
-                            (\config ->
-                                { header =
-                                    Input.button [ Font.bold ]
-                                        { onPress =
-                                            { title = config.header
-                                            , asc =
-                                                if config.header == model.title then
-                                                    not model.asc
 
-                                                else
-                                                    True
-                                            }
-                                                |> SortBy
-                                                |> Just
-                                        , label =
-                                            if config.header == model.title then
-                                                [ config.header |> Element.text
-                                                , Element.html <|
-                                                    if model.asc then
-                                                        Heroicons.cheveronUp [ Attributes.width 16 ]
-
-                                                    else
-                                                        Heroicons.cheveronDown [ Attributes.width 16 ]
-                                                ]
-                                                    |> Element.row (Grid.simple ++ [ Font.bold ])
-
-                                            else
-                                                config.header |> Element.text
-                                        }
-                                , view = config.view >> Element.text
-                                , width = Element.fill
-                                }
-                            )
-                }
-           )
-        |> Element.table Grid.simple
-    , Element.none
-    )
 
 
 scrollingNavCard : Style msg -> ( String, Element msg, Element msg )
@@ -169,15 +79,13 @@ scrollingNavCard style =
 view :
     Theme ->
     { addSnackbar : ( String, Bool ) -> msg
-    , msgMapper : Msg -> msg
-    , model : Model
     }
     ->
         { title : String
         , description : String
         , items : List ( String, Element msg,Element msg )
         }
-view theme { addSnackbar, msgMapper, model } =
+view theme { addSnackbar } =
     let
         style = Theme.toStyle theme
     in
@@ -185,8 +93,6 @@ view theme { addSnackbar, msgMapper, model } =
     , description = "Reusable views have an internal state but no update function. You will need to do some wiring, but nothing complicated."
     , items =
         [ snackbar style addSnackbar
-        , sortTable style model |> \(a,b,c) ->
-            (a,b |> Element.map msgMapper,c |> Element.map msgMapper)
         , scrollingNavCard style
         ]
     }
diff --git a/example/src/Stateless.elm b/example/src/Stateless.elm
index 8487d25..c70301c 100644
--- a/example/src/Stateless.elm
+++ b/example/src/Stateless.elm
@@ -1,96 +1,66 @@
 module Stateless exposing (Model, Msg, init, update, view)
 
-import Array exposing (Array)
+import Array
+import Data.Example as Example
 import Data.Style exposing (Style)
+import Data.Theme as Theme exposing (Theme)
 import Element exposing (Element)
 import Element.Background as Background
-import Element.Border as Border
-import Element.Font as Font
-import Element.Input as Input
-import Framework.Button as Button
 import Framework.Card as Card
 import Framework.Color as Color
 import Framework.Grid as Grid
-import Framework.Group as Group
-import Framework.Heading as Heading
-import Framework.Input as Input
-import Framework.Tag as Tag
 import Heroicons.Solid as Heroicons
-import Html exposing (Html)
 import Html.Attributes as Attributes
 import Icons
 import Layout exposing (Part(..))
 import Set exposing (Set)
 import Widget
-import Widget.Style exposing (ButtonStyle)
-import Data.Theme as Theme exposing (Theme)
+
 
 type alias Model =
-    { selected : Maybe Int
-    , multiSelected : Set Int
-    , chipTextInput : Set String
-    , isExpanded : Bool
+    { chipTextInput : Set String
     , carousel : Int
-    , tab : Maybe Int
-    , button : Bool
     , textInput : String
+    , table : { title : String, asc : Bool }
+    , example : Example.Model
     }
 
 
 type Msg
-    = ChangedSelected Int
-    | ChangedMultiSelected Int
-    | ToggleCollapsable Bool
-    | ToggleTextInputChip String
-    | ChangedTab Int
+    = ToggleTextInputChip String
     | SetCarousel Int
-    | ToggleButton Bool
     | SetTextInput String
+    | ChangedSorting String
+    | ExampleSpecific Example.Msg
     | Idle
 
 
-init : Model
+init : ( Model, Cmd Msg )
 init =
-    { selected = Nothing
-    , multiSelected = Set.empty
-    , chipTextInput = Set.empty
-    , isExpanded = False
-    , carousel = 0
-    , tab = Just 1
-    , button = True
-    , textInput = ""
-    }
+    let
+        ( example, cmd ) =
+            Example.init
+    in
+    ( { chipTextInput = Set.empty
+      , carousel = 0
+      , textInput = ""
+      , table = { title = "Name", asc = True }
+      , example = example
+      }
+    , cmd |> Cmd.map ExampleSpecific
+    )
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of
-        ChangedSelected int ->
-            ( { model
-                | selected = Just int
-              }
-            , Cmd.none
-            )
-
-        ChangedMultiSelected int ->
-            ( { model
-                | multiSelected =
-                    model.multiSelected
-                        |> (if model.multiSelected |> Set.member int then
-                                Set.remove int
-
-                            else
-                                Set.insert int
-                           )
-              }
-            , Cmd.none
-            )
-
-        ToggleCollapsable bool ->
-            ( { model
-                | isExpanded = bool
-              }
-            , Cmd.none
+        ExampleSpecific exampleMsg ->
+            let
+                ( exampleModel, exampleCmd ) =
+                    Example.update exampleMsg model.example
+            in
+            ( { model | example = exampleModel }
+            , exampleCmd |> Cmd.map ExampleSpecific
             )
 
         ToggleTextInputChip string ->
@@ -118,127 +88,30 @@ update msg model =
             , Cmd.none
             )
 
-        ChangedTab int ->
-            ( { model | tab = Just int }, Cmd.none )
-
-        ToggleButton bool ->
-            ( { model | button = bool }, Cmd.none )
-
         SetTextInput string ->
             ( { model | textInput = string }, Cmd.none )
 
+        ChangedSorting string ->
+            ( { model
+                | table =
+                    { title = string
+                    , asc =
+                        if model.table.title == string then
+                            not model.table.asc
+
+                        else
+                            True
+                    }
+              }
+            , Cmd.none
+            )
+
         Idle ->
             ( model, Cmd.none )
 
 
-select : Style Msg -> Model -> ( String, Element Msg,Element Msg )
-select style model =
-    let
-        buttonStyle =
-            style.button
-    in
-    ( "Select"
-    , { selected = model.selected
-      , options =
-            [ 1, 2, 42 ]
-                |> List.map
-                    (\int ->
-                        { text = String.fromInt int
-                        , icon = Element.none
-                        }
-                    )
-      , onSelect = ChangedSelected >> Just
-      }
-        |> Widget.select
-        |> Widget.buttonRow
-            { list = style.row
-            , button = style.button
-            }
-    , Element.none
-    )
-
-
-multiSelect : Style Msg -> Model -> ( String, Element Msg, Element Msg )
-multiSelect style model =
-    let
-        buttonStyle =
-            style.button
-    in
-    ( "Multi Select"
-    , { selected = model.multiSelected
-      , options =
-            [ 1, 2, 42 ]
-                |> List.map
-                    (\int ->
-                        { text = String.fromInt int
-                        , icon = Element.none
-                        }
-                    )
-      , onSelect = ChangedMultiSelected >> Just
-      }
-        |> Widget.multiSelect
-        |> Widget.buttonRow
-            { list = style.row
-            , button = style.button
-            }
-    , Element.none
-    )
-
-expansionPanel : Style Msg -> Model -> (String,Element Msg,Element Msg)
-expansionPanel style model =
-    ( "Expansion Panel"
-    ,   { onToggle = ToggleCollapsable
-        , isExpanded = model.isExpanded
-        , icon = Element.none
-        , text = "Title"
-        , content = Element.text <| "Hello World"
-        }
-        |>Widget.expansionPanel style.expansionPanel
-    , Element.none
-    )
-
-
-
-
-tab : Style Msg -> Model -> ( String, Element Msg, Element Msg )
-tab style model =
-    ( "Tab"
-    , Widget.tab style.tab
-        { tabs =
-            { selected = model.tab
-            , options =
-                [ 1, 2, 3 ]
-                    |> List.map
-                        (\int ->
-                            { text = "Tab " ++ (int |> String.fromInt)
-                            , icon = Element.none
-                            }
-                        )
-            , onSelect = ChangedTab >> Just
-            }
-        , content =
-            \selected ->
-                (case selected of
-                    Just 0 ->
-                        "This is Tab 1"
-
-                    Just 1 ->
-                        "This is the second tab"
-
-                    Just 2 ->
-                        "The thrid and last tab"
-
-                    _ ->
-                        "Please select a tab"
-                )
-                    |> Element.text
-        }
-    , Element.none
-    )
-
-
-modal : Style msg -> (Maybe Part -> msg) -> Model -> ( String, Element msg,Element msg )
-modal style changedSheet model =
+modal : Style msg -> (Maybe Part -> msg) -> Model -> ( String, Element msg, Element msg )
+modal style changedSheet _ =
     ( "Modal"
     , [ Widget.button style.button
             { onPress = Just <| changedSheet <| Just LeftSheet
@@ -252,12 +125,12 @@ modal style changedSheet model =
             }
       ]
         |> Element.column Grid.simple
-    ,Element.none
+    , Element.none
     )
 
 
 dialog : Style msg -> msg -> Model -> ( String, Element msg, Element msg )
-dialog style showDialog model =
+dialog style showDialog _ =
     ( "Dialog"
     , Widget.button style.button
         { onPress = Just showDialog
@@ -330,66 +203,6 @@ carousel style model =
     )
 
 
-iconButton : Style Msg -> Model -> ( String, Element Msg, Element Msg )
-iconButton style model =
-    ( "Icon Button"
-    , [ Widget.button style.primaryButton
-            { text = "disable me"
-            , icon = Icons.slash |> Element.html |> Element.el []
-            , onPress =
-                if model.button then
-                    Just <| ToggleButton False
-
-                else
-                    Nothing
-            }
-        , Widget.iconButton style.button
-            { text = "reset"
-            , icon = Icons.repeat |> Element.html |> Element.el []
-            , onPress = Just <| ToggleButton True
-            }
-        ]
-            |> Element.row Grid.simple
-    , Element.column Grid.simple
-            [ Element.row Grid.spacedEvenly
-                [ "Button"
-                    |> Element.text
-                , Widget.button style.button
-                    { text = "reset"
-                    , icon = Icons.repeat |> Element.html |> Element.el []
-                    , onPress = Just <| ToggleButton True
-                    }
-                ]
-            , Element.row Grid.spacedEvenly
-                [ "Text button"
-                    |> Element.text
-                , Widget.textButton style.button
-                    { text = "reset"
-                    , onPress = Just <| ToggleButton True
-                    }
-                ]
-            , Element.row Grid.spacedEvenly
-                [ "Button"
-                    |> Element.text
-                , Widget.iconButton style.button
-                    { text = "reset"
-                    , icon = Icons.repeat |> Element.html |> Element.el []
-                    , onPress = Just <| ToggleButton True
-                    }
-                ]
-            , Element.row Grid.spacedEvenly
-                [ "Disabled button"
-                    |> Element.text
-                , Widget.button style.button
-                    { text = "reset"
-                    , icon = Icons.repeat |> Element.html |> Element.el []
-                    , onPress = Nothing
-                    }
-                ] 
-            ]
-    )
-
-
 textInput : Style Msg -> Model -> ( String, Element Msg, Element Msg )
 textInput style model =
     ( "Chip Text Input"
@@ -432,16 +245,112 @@ textInput style model =
             |> Element.wrappedRow [ Element.spacing 10 ]
       ]
         |> Element.column Grid.simple
+    , [ Element.row Grid.spacedEvenly
+            [ "Nothing Selected"
+                |> Element.text
+                |> Element.el [ Element.width <| Element.fill ]
+            , { chips = []
+              , text = ""
+              , placeholder = Nothing
+              , label = "Label"
+              , onChange = always Idle
+              }
+                |> Widget.textInput style.textInput
+            ]
+      , Element.row Grid.spacedEvenly
+            [ "Some chips"
+                |> Element.text
+                |> Element.el [ Element.width <| Element.fill ]
+            , { chips =
+                    [ { icon = Icons.triangle |> Element.html |> Element.el []
+                      , text = "A"
+                      , onPress = Just Idle
+                      }
+                    , { icon = Icons.circle |> Element.html |> Element.el []
+                      , text = "B"
+                      , onPress = Just Idle
+                      }
+                    ]
+              , text = ""
+              , placeholder = Nothing
+              , label = "Label"
+              , onChange = always Idle
+              }
+                |> Widget.textInput style.textInput
+            ]
+      ]
+        |> Element.column Grid.simple
+    )
+
+
+list : Style Msg -> Model -> ( String, Element Msg, Element Msg )
+list style _ =
+    ( "List"
+    , [ Element.text <| "A"
+      , Element.text <| "B"
+      , Element.text <| "C"
+      ]
+        |> Widget.column style.cardColumn
+    , Element.none
+    )
+
+
+sortTable : Style Msg -> Model -> ( String, Element Msg, Element Msg )
+sortTable _ model =
+    ( "Sort Table"
+    , Widget.sortTable
+        { containerTable = Grid.simple
+        , headerButton =
+            { container = []
+            , labelRow = []
+            , ifDisabled = []
+            , ifActive = []
+            }
+        , ascIcon = Heroicons.cheveronUp [ Attributes.width 16 ] |> Element.html
+        , descIcon = Heroicons.cheveronDown [ Attributes.width 16 ] |> Element.html
+        , defaultIcon = Element.none
+        }
+        { content =
+            [ { id = 1, name = "Antonio", rating = 2.456 }
+            , { id = 2, name = "Ana", rating = 1.34 }
+            , { id = 3, name = "Alfred", rating = 4.22 }
+            , { id = 4, name = "Thomas", rating = 3 }
+            ]
+        , columns =
+            [ Widget.intColumn
+                { title = "Id"
+                , value = .id
+                , toString = \int -> "#" ++ String.fromInt int
+                , width = Element.fill
+                }
+            , Widget.stringColumn
+                { title = "Name"
+                , value = .name
+                , toString = identity
+                , width = Element.fill
+                }
+            , Widget.floatColumn
+                { title = "rating"
+                , value = .rating
+                , toString = String.fromFloat
+                , width = Element.fill
+                }
+            ]
+        , asc = model.table.asc
+        , sortBy = model.table.title
+        , onChange = ChangedSorting
+        }
     , Element.none
     )
 
 
 view :
-    Theme ->
-    { msgMapper : Msg -> msg
-    , showDialog : msg
-    , changedSheet : Maybe Part -> msg
-    }
+    Theme
+    ->
+        { msgMapper : Msg -> msg
+        , showDialog : msg
+        , changedSheet : Maybe Part -> msg
+        }
     -> Model
     ->
         { title : String
@@ -450,9 +359,10 @@ view :
         }
 view theme { msgMapper, showDialog, changedSheet } model =
     let
-        style = Theme.toStyle theme
+        style =
+            Theme.toStyle theme
 
-        map (a,b,c) =
+        map ( a, b, c ) =
             ( a
             , b |> Element.map msgMapper
             , c |> Element.map msgMapper
@@ -461,14 +371,17 @@ view theme { msgMapper, showDialog, changedSheet } model =
     { title = "Stateless Views"
     , description = "Stateless views are simple functions that view some content. No wiring required."
     , items =
-        [ iconButton style model |> map
-        , select style model |> map
-        , multiSelect style model |> map
-        , expansionPanel style model |> map
-        , modal style changedSheet model
-        , carousel style model |> map
-        , tab style model |> map
-        , dialog style showDialog model
-        , textInput style model |> map
-        ]
+        Example.toCardList
+            { idle = Idle |> msgMapper
+            , msgMapper = ExampleSpecific >> msgMapper
+            , style = style
+            , model = model.example
+            }
+            ++ [ modal style changedSheet model
+               , carousel style model |> map
+               , dialog style showDialog model
+               , textInput style model |> map
+               , list style model |> map
+               , sortTable style model |> map
+               ]
     }
diff --git a/example/src/View/Test.elm b/example/src/View/Test.elm
new file mode 100644
index 0000000..2264e7f
--- /dev/null
+++ b/example/src/View/Test.elm
@@ -0,0 +1,390 @@
+module View.Test exposing (expansionPanel, iconButton, multiSelect, select, tab)
+
+import Array
+import Data.Style exposing (Style)
+import Data.Theme as Theme exposing (Theme)
+import Element exposing (Element)
+import Element.Background as Background
+import Framework.Card as Card
+import Framework.Color as Color
+import Framework.Grid as Grid
+import Heroicons.Solid as Heroicons
+import Html.Attributes as Attributes
+import Icons
+import Layout exposing (Part(..))
+import Set exposing (Set)
+import Widget
+
+
+iconButton : msg -> Style msg -> List (Element msg)
+iconButton idle style =
+    [ Element.row Grid.spacedEvenly
+        [ "Button"
+            |> Element.text
+        , Widget.button style.button
+            { text = "Button"
+            , icon = Icons.triangle |> Element.html |> Element.el []
+            , onPress = Just idle
+            }
+        ]
+    , Element.row Grid.spacedEvenly
+        [ "Text button"
+            |> Element.text
+        , Widget.textButton style.button
+            { text = "Button"
+            , onPress = Just idle
+            }
+        ]
+    , Element.row Grid.spacedEvenly
+        [ "Icon button"
+            |> Element.text
+        , Widget.iconButton style.button
+            { text = "Button"
+            , icon = Icons.triangle |> Element.html |> Element.el []
+            , onPress = Just idle
+            }
+        ]
+    , Element.row Grid.spacedEvenly
+        [ "Disabled button"
+            |> Element.text
+        , Widget.button style.button
+            { text = "Button"
+            , icon = Icons.triangle |> Element.html |> Element.el []
+            , onPress = Nothing
+            }
+        ]
+    , Element.row Grid.spacedEvenly
+        [ "Inactive Select button"
+            |> Element.text
+        , Widget.selectButton style.button
+            ( False
+            , { text = "Button"
+              , icon = Icons.triangle |> Element.html |> Element.el []
+              , onPress = Just idle
+              }
+            )
+        ]
+    , Element.row Grid.spacedEvenly
+        [ "Active Select button"
+            |> Element.text
+        , Widget.selectButton style.button
+            ( True
+            , { text = "Button"
+              , icon = Icons.triangle |> Element.html |> Element.el []
+              , onPress = Just idle
+              }
+            )
+        ]
+    ]
+
+
+select : msg -> Style msg -> List (Element msg)
+select idle style =
+    [ Element.row Grid.spacedEvenly
+        [ "First selected"
+            |> Element.text
+            |> Element.el [ Element.width <| Element.fill ]
+        , { selected = Just 0
+          , options =
+                [ 1, 2, 42 ]
+                    |> List.map
+                        (\int ->
+                            { text = String.fromInt int
+                            , icon = Element.none
+                            }
+                        )
+          , onSelect = always idle >> Just
+          }
+            |> Widget.select
+            |> Widget.buttonRow
+                { list = style.row
+                , button = style.button
+                }
+        ]
+    , Element.row Grid.spacedEvenly
+        [ "Nothing selected"
+            |> Element.text
+            |> Element.el [ Element.width <| Element.fill ]
+        , { selected = Nothing
+          , options =
+                [ 1, 2, 42 ]
+                    |> List.map
+                        (\int ->
+                            { text = String.fromInt int
+                            , icon = Element.none
+                            }
+                        )
+          , onSelect = always idle >> Just
+          }
+            |> Widget.select
+            |> Widget.buttonRow
+                { list = style.row
+                , button = style.button
+                }
+        ]
+    , Element.row Grid.spacedEvenly
+        [ "Invalid selection"
+            |> Element.text
+            |> Element.el [ Element.width <| Element.fill ]
+        , { selected = Just -1
+          , options =
+                [ 1, 2, 42 ]
+                    |> List.map
+                        (\int ->
+                            { text = String.fromInt int
+                            , icon = Element.none
+                            }
+                        )
+          , onSelect = always idle >> Just
+          }
+            |> Widget.select
+            |> Widget.buttonRow
+                { list = style.row
+                , button = style.button
+                }
+        ]
+    , Element.row Grid.spacedEvenly
+        [ "Disabled selection"
+            |> Element.text
+            |> Element.el [ Element.width <| Element.fill ]
+        , { selected = Just 0
+          , options =
+                [ 1, 2, 42 ]
+                    |> List.map
+                        (\int ->
+                            { text = String.fromInt int
+                            , icon = Element.none
+                            }
+                        )
+          , onSelect = always Nothing
+          }
+            |> Widget.select
+            |> Widget.buttonRow
+                { list = style.row
+                , button = style.button
+                }
+        ]
+    , Element.row Grid.spacedEvenly
+        [ "Empty Options"
+            |> Element.text
+            |> Element.el [ Element.width <| Element.fill ]
+        , { selected = Nothing
+          , options =
+                []
+                    |> List.map
+                        (\int ->
+                            { text = String.fromInt int
+                            , icon = Element.none
+                            }
+                        )
+          , onSelect = always idle >> Just
+          }
+            |> Widget.select
+            |> Widget.buttonRow
+                { list = style.row
+                , button = style.button
+                }
+        ]
+    ]
+
+
+multiSelect : msg -> Style msg -> List (Element msg)
+multiSelect idle style =
+    [ Element.row Grid.spacedEvenly
+        [ "Some selected"
+            |> Element.text
+            |> Element.el [ Element.width <| Element.fill ]
+        , { selected = Set.fromList [ 0, 1 ]
+          , options =
+                [ 1, 2, 42 ]
+                    |> List.map
+                        (\int ->
+                            { text = String.fromInt int
+                            , icon = Element.none
+                            }
+                        )
+          , onSelect = always idle >> Just
+          }
+            |> Widget.multiSelect
+            |> Widget.buttonRow
+                { list = style.row
+                , button = style.button
+                }
+        ]
+    , Element.row Grid.spacedEvenly
+        [ "Nothing selected"
+            |> Element.text
+            |> Element.el [ Element.width <| Element.fill ]
+        , { selected = Set.empty
+          , options =
+                [ 1, 2, 42 ]
+                    |> List.map
+                        (\int ->
+                            { text = String.fromInt int
+                            , icon = Element.none
+                            }
+                        )
+          , onSelect = always idle >> Just
+          }
+            |> Widget.multiSelect
+            |> Widget.buttonRow
+                { list = style.row
+                , button = style.button
+                }
+        ]
+    , Element.row Grid.spacedEvenly
+        [ "Invalid selection"
+            |> Element.text
+            |> Element.el [ Element.width <| Element.fill ]
+        , { selected = Set.singleton -1
+          , options =
+                [ 1, 2, 42 ]
+                    |> List.map
+                        (\int ->
+                            { text = String.fromInt int
+                            , icon = Element.none
+                            }
+                        )
+          , onSelect = always idle >> Just
+          }
+            |> Widget.multiSelect
+            |> Widget.buttonRow
+                { list = style.row
+                , button = style.button
+                }
+        ]
+    , Element.row Grid.spacedEvenly
+        [ "Disabled selection"
+            |> Element.text
+            |> Element.el [ Element.width <| Element.fill ]
+        , { selected = Set.singleton 0
+          , options =
+                [ 1, 2, 42 ]
+                    |> List.map
+                        (\int ->
+                            { text = String.fromInt int
+                            , icon = Element.none
+                            }
+                        )
+          , onSelect = always Nothing
+          }
+            |> Widget.multiSelect
+            |> Widget.buttonRow
+                { list = style.row
+                , button = style.button
+                }
+        ]
+    , Element.row Grid.spacedEvenly
+        [ "Empty Options"
+            |> Element.text
+            |> Element.el [ Element.width <| Element.fill ]
+        , { selected = Set.empty
+          , options =
+                []
+                    |> List.map
+                        (\int ->
+                            { text = String.fromInt int
+                            , icon = Element.none
+                            }
+                        )
+          , onSelect = always idle >> Just
+          }
+            |> Widget.multiSelect
+            |> Widget.buttonRow
+                { list = style.row
+                , button = style.button
+                }
+        ]
+    ]
+
+
+expansionPanel : msg -> Style msg -> List (Element msg)
+expansionPanel idle style =
+    [ Element.row Grid.spacedEvenly
+        [ "Collapsed"
+            |> Element.text
+            |> Element.el [ Element.width <| Element.fill ]
+        , { onToggle = always idle
+          , isExpanded = False
+          , icon = Icons.triangle |> Element.html |> Element.el []
+          , text = "Button"
+          , content = Element.text <| "Hidden Message"
+          }
+            |> Widget.expansionPanel style.expansionPanel
+        ]
+    , Element.row Grid.spacedEvenly
+        [ "Expanded"
+            |> Element.text
+            |> Element.el [ Element.width <| Element.fill ]
+        , { onToggle = always idle
+          , isExpanded = True
+          , icon = Icons.triangle |> Element.html |> Element.el []
+          , text = "Button"
+          , content = Element.text <| "Hidden Message"
+          }
+            |> Widget.expansionPanel style.expansionPanel
+        ]
+    ]
+
+
+tab : msg -> Style msg -> List (Element msg)
+tab idle style =
+    [ Element.row Grid.spacedEvenly
+        [ "Nothing selected"
+            |> Element.text
+            |> Element.el [ Element.width <| Element.fill ]
+        , Widget.tab style.tab
+            { tabs =
+                { selected = Nothing
+                , options =
+                    [ 1, 2, 3 ]
+                        |> List.map
+                            (\int ->
+                                { text = int |> String.fromInt
+                                , icon = Element.none
+                                }
+                            )
+                , onSelect = always idle >> Just
+                }
+            , content =
+                \selected ->
+                    (case selected of
+                        Nothing ->
+                            "Please select a tab"
+
+                        _ ->
+                            ""
+                    )
+                        |> Element.text
+            }
+        ]
+    , Element.row Grid.spacedEvenly
+        [ "Tab selected"
+            |> Element.text
+            |> Element.el [ Element.width <| Element.fill ]
+        , Widget.tab style.tab
+            { tabs =
+                { selected = Just 0
+                , options =
+                    [ 1, 2, 3 ]
+                        |> List.map
+                            (\int ->
+                                { text = int |> String.fromInt
+                                , icon = Element.none
+                                }
+                            )
+                , onSelect = always idle >> Just
+                }
+            , content =
+                \selected ->
+                    (case selected of
+                        Just 0 ->
+                            "First Tab selected"
+
+                        _ ->
+                            "Please select a tab"
+                    )
+                        |> Element.text
+            }
+        ]
+    ]
diff --git a/src/Internal/SortTable.elm b/src/Internal/SortTable.elm
new file mode 100644
index 0000000..e2e41c1
--- /dev/null
+++ b/src/Internal/SortTable.elm
@@ -0,0 +1,181 @@
+module Internal.SortTable exposing
+    ( Column
+    , ColumnType
+    , SortTable
+    , floatColumn
+    , intColumn
+    , sortTable
+    , stringColumn
+    , unsortableColumn
+    )
+
+import Element exposing (Element, Length)
+import Internal.Button as Button
+import Widget.Style exposing (SortTableStyle)
+
+
+{-| A Sortable list allows you to sort coulmn.
+-}
+type ColumnType a
+    = StringColumn { value : a -> String, toString : String -> String }
+    | IntColumn { value : a -> Int, toString : Int -> String }
+    | FloatColumn { value : a -> Float, toString : Float -> String }
+    | UnsortableColumn (a -> String)
+
+
+{-| The Model contains the sorting column name and if ascending or descending.
+-}
+type alias SortTable a msg =
+    { content : List a
+    , columns : List (Column a)
+    , sortBy : String
+    , asc : Bool
+    , onChange : String -> msg
+    }
+
+
+type Column a
+    = Column
+        { title : String
+        , content : ColumnType a
+        , width : Length
+        }
+
+
+unsortableColumn : { title : String, toString : a -> String, width : Length } -> Column a
+unsortableColumn { title, toString, width } =
+    Column
+        { title = title
+        , content = UnsortableColumn toString
+        , width = width
+        }
+
+
+{-| A Column containing a Int
+-}
+intColumn : { title : String, value : a -> Int, toString : Int -> String, width : Length } -> Column a
+intColumn { title, value, toString, width } =
+    Column
+        { title = title
+        , content = IntColumn { value = value, toString = toString }
+        , width = width
+        }
+
+
+{-| A Column containing a Float
+-}
+floatColumn : { title : String, value : a -> Float, toString : Float -> String, width : Length } -> Column a
+floatColumn { title, value, toString, width } =
+    Column
+        { title = title
+        , content = FloatColumn { value = value, toString = toString }
+        , width = width
+        }
+
+
+{-| A Column containing a String
+-}
+stringColumn : { title : String, value : a -> String, toString : String -> String, width : Length } -> Column a
+stringColumn { title, value, toString, width } =
+    Column
+        { title = title
+        , content = StringColumn { value = value, toString = toString }
+        , width = width
+        }
+
+
+{-| The View
+-}
+sortTable :
+    SortTableStyle msg
+    -> SortTable a msg
+    -> Element msg
+sortTable style model =
+    let
+        findTitle : List (Column a) -> Maybe (ColumnType a)
+        findTitle list =
+            case list of
+                [] ->
+                    Nothing
+
+                (Column head) :: tail ->
+                    if head.title == model.sortBy then
+                        Just head.content
+
+                    else
+                        findTitle tail
+    in
+    Element.table style.containerTable
+        { data =
+            model.content
+                |> (model.columns
+                        |> findTitle
+                        |> Maybe.andThen
+                            (\c ->
+                                case c of
+                                    StringColumn { value } ->
+                                        Just <| List.sortBy value
+
+                                    IntColumn { value } ->
+                                        Just <| List.sortBy value
+
+                                    FloatColumn { value } ->
+                                        Just <| List.sortBy value
+
+                                    UnsortableColumn _ ->
+                                        Nothing
+                            )
+                        |> Maybe.withDefault identity
+                   )
+                |> (if model.asc then
+                        identity
+
+                    else
+                        List.reverse
+                   )
+        , columns =
+            model.columns
+                |> List.map
+                    (\(Column column) ->
+                        { header =
+                            Button.button style.headerButton
+                                { text = column.title
+                                , icon =
+                                    if column.title == model.sortBy then
+                                        if model.asc then
+                                            style.ascIcon
+
+                                        else
+                                            style.descIcon
+
+                                    else
+                                        style.defaultIcon
+                                , onPress =
+                                    case column.content of
+                                        UnsortableColumn _ ->
+                                            Nothing
+
+                                        _ ->
+                                            Just <| model.onChange <| column.title
+                                }
+                        , width = column.width
+                        , view =
+                            (case column.content of
+                                IntColumn { value, toString } ->
+                                    value >> toString
+
+                                FloatColumn { value, toString } ->
+                                    value >> toString
+
+                                StringColumn { value, toString } ->
+                                    value >> toString
+
+                                UnsortableColumn toString ->
+                                    toString
+                            )
+                                >> Element.text
+                                >> List.singleton
+                                >> Element.paragraph []
+                        }
+                    )
+        }
diff --git a/src/Widget.elm b/src/Widget.elm
index 95a6888..38b08c0 100644
--- a/src/Widget.elm
+++ b/src/Widget.elm
@@ -3,8 +3,10 @@ module Widget exposing
     , Select, MultiSelect, selectButton, select, multiSelect
     , Dialog, modal, dialog
     , ExpansionPanel, expansionPanel
+    , row, column, buttonRow, buttonColumn
+    , ColumnType, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
     , TextInputStyle, textInput, carousel, tab
-    , Tab, buttonColumn, buttonRow, column, row
+    , Tab
     )
 
 {-| This module contains functions for displaying data.
@@ -30,6 +32,16 @@ module Widget exposing
 @docs ExpansionPanel, expansionPanel
 
 
+# List
+
+@docs row, column, buttonRow, buttonColumn
+
+
+# SortTable
+
+@docs ColumnType, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
+
+
 # Other Widgets
 
 @docs TextInputStyle, textInput, carousel, tab
@@ -37,16 +49,17 @@ module Widget exposing
 -}
 
 import Array exposing (Array)
-import Element exposing (Attribute, Element)
+import Element exposing (Attribute, Element, Length)
 import Element.Input exposing (Placeholder)
 import Internal.Button as Button
 import Internal.Dialog as Dialog
 import Internal.ExpansionPanel as ExpansionPanel
 import Internal.List as List
 import Internal.Select as Select
+import Internal.SortTable as SortTable
 import Internal.TextInput as TextInput
 import Set exposing (Set)
-import Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, RowStyle, TabStyle)
+import Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, RowStyle, SortTableStyle, TabStyle)
 
 
 
@@ -322,6 +335,87 @@ buttonColumn =
 
 
 
+{----------------------------------------------------------
+- SORT TABLE
+----------------------------------------------------------}
+
+
+{-| A Sortable list allows you to sort coulmn.
+-}
+type alias ColumnType a =
+    SortTable.ColumnType a
+
+
+type alias Column a =
+    SortTable.Column a
+
+
+unsortableColumn :
+    { title : String
+    , toString : a -> String
+    , width : Length
+    }
+    -> Column a
+unsortableColumn =
+    SortTable.unsortableColumn
+
+
+{-| A Column containing a Int
+-}
+intColumn :
+    { title : String
+    , value : a -> Int
+    , toString : Int -> String
+    , width : Length
+    }
+    -> Column a
+intColumn =
+    SortTable.intColumn
+
+
+{-| A Column containing a Float
+-}
+floatColumn :
+    { title : String
+    , value : a -> Float
+    , toString : Float -> String
+    , width : Length
+    }
+    -> Column a
+floatColumn =
+    SortTable.floatColumn
+
+
+{-| A Column containing a String
+-}
+stringColumn :
+    { title : String
+    , value : a -> String
+    , toString : String -> String
+    , width : Length
+    }
+    -> Column a
+stringColumn =
+    SortTable.stringColumn
+
+
+{-| The View
+-}
+sortTable :
+    SortTableStyle msg
+    ->
+        { content : List a
+        , columns : List (Column a)
+        , sortBy : String
+        , asc : Bool
+        , onChange : String -> msg
+        }
+    -> Element msg
+sortTable =
+    SortTable.sortTable
+
+
+
 {----------------------------------------------------------
 - OTHER STATELESS WIDGETS
 ----------------------------------------------------------}
diff --git a/src/Widget/SortTable.elm b/src/Widget/SortTable.elm
deleted file mode 100644
index 1b2e41e..0000000
--- a/src/Widget/SortTable.elm
+++ /dev/null
@@ -1,215 +0,0 @@
-module Widget.SortTable exposing
-    ( Model, init, view, sortBy
-    , intColumn, floatColumn, stringColumn
-    )
-
-{-| A Sortable list allows you to sort coulmn.
-
-        SortTable.view
-            { content =
-                [ {id = 1, name = "Antonio", rating = 2.456}
-                , {id = 2, name = "Ana", rating = 1.34}
-                , {id = 3, name = "Alfred", rating = 4.22}
-                , {id = 4, name = "Thomas", rating = 3 }
-                ]
-            , columns =
-                [ SortTable.intColumn
-                    { title = "Id"
-                    , value = .id
-                    , toString = \int -> "#" ++ String.fromInt int
-                    }
-                , SortTable.stringColumn
-                    { title = "Name"
-                    , value = .name
-                    , toString = identity
-                    }
-                , SortTable.floatColumn
-                    { title = "rating"
-                    , value = .rating
-                    , toString = String.fromFloat
-                    }
-                ]
-            , model = model
-            }
-            |> (\{data,columns} ->
-                {data = data
-                ,columns = columns
-                    |> List.map (\config->
-                            { header =
-                                Input.button [Font.bold]
-                                    { onPress =
-                                        { title = config.header
-                                        , asc =
-                                            if config.header == model.title then
-                                                not model.asc
-                                            else
-                                                True
-                                        }
-                                            |> SortBy
-                                            |> Just
-                                    , label =
-                                        if config.header == model.title then
-                                            [ config.header |> Element.text
-                                            , Element.text <|
-                                                if model.asc then
-                                                    "/\"
-                                                else
-                                                    "\/"
-                                            ]
-                                                |> Element.row [Font.bold]
-                                        else
-                                            config.header  |> Element.text
-                                    }
-                            , view = config.view >> Element.text
-                            , width = Element.fill
-                            }
-                        )
-                })
-            |> Element.table []
-
-
-# Basics
-
-@docs Model, init, view, sortBy
-
-
-# Columns
-
-@docs intColumn, floatColumn, stringColumn
-
--}
-
-
-type ColumnType a
-    = StringColumn { value : a -> String, toString : String -> String }
-    | IntColumn { value : a -> Int, toString : Int -> String }
-    | FloatColumn { value : a -> Float, toString : Float -> String }
-
-
-{-| The Model contains the sorting column name and if ascending or descending.
--}
-type alias Model =
-    { title : String
-    , asc : Bool
-    }
-
-
-type alias Column a =
-    { title : String
-    , content : ColumnType a
-    }
-
-
-{-| The initial State setting the sorting column name to the empty string.
--}
-init : Model
-init =
-    { title = "", asc = True }
-
-
-{-| A Column containing a Int
--}
-intColumn : { title : String, value : a -> Int, toString : Int -> String } -> Column a
-intColumn { title, value, toString } =
-    { title = title
-    , content = IntColumn { value = value, toString = toString }
-    }
-
-
-{-| A Column containing a Float
--}
-floatColumn : { title : String, value : a -> Float, toString : Float -> String } -> Column a
-floatColumn { title, value, toString } =
-    { title = title
-    , content = FloatColumn { value = value, toString = toString }
-    }
-
-
-{-| A Column containing a String
--}
-stringColumn : { title : String, value : a -> String, toString : String -> String } -> Column a
-stringColumn { title, value, toString } =
-    { title = title
-    , content = StringColumn { value = value, toString = toString }
-    }
-
-
-{-| Change the sorting criteras.
-
-        sortBy =
-            identity
-
--}
-sortBy : { title : String, asc : Bool } -> Model
-sortBy =
-    identity
-
-
-{-| The View
--}
-view :
-    { content : List a
-    , columns : List (Column a)
-    , model : Model
-    }
-    ->
-        { data : List a
-        , columns : List { header : String, view : a -> String }
-        }
-view { content, columns, model } =
-    let
-        findTitle : List (Column a) -> Maybe (ColumnType a)
-        findTitle list =
-            case list of
-                [] ->
-                    Nothing
-
-                head :: tail ->
-                    if head.title == model.title then
-                        Just head.content
-
-                    else
-                        findTitle tail
-    in
-    { data =
-        content
-            |> (columns
-                    |> findTitle
-                    |> Maybe.map
-                        (\c ->
-                            case c of
-                                StringColumn { value } ->
-                                    List.sortBy value
-
-                                IntColumn { value } ->
-                                    List.sortBy value
-
-                                FloatColumn { value } ->
-                                    List.sortBy value
-                        )
-                    |> Maybe.withDefault identity
-               )
-            |> (if model.asc then
-                    identity
-
-                else
-                    List.reverse
-               )
-    , columns =
-        columns
-            |> List.map
-                (\column ->
-                    { header = column.title
-                    , view =
-                        case column.content of
-                            IntColumn { value, toString } ->
-                                value >> toString
-
-                            FloatColumn { value, toString } ->
-                                value >> toString
-
-                            StringColumn { value, toString } ->
-                                value >> toString
-                    }
-                )
-    }
diff --git a/src/Widget/Style.elm b/src/Widget/Style.elm
index d88e328..5e8af81 100644
--- a/src/Widget/Style.elm
+++ b/src/Widget/Style.elm
@@ -1,4 +1,4 @@
-module Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, RowStyle, SnackbarStyle, Style, TabStyle, TextInputStyle)
+module Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, RowStyle, SnackbarStyle, SortTableStyle, Style, TabStyle, TextInputStyle)
 
 import Element exposing (Attribute, Element)
 import Html exposing (Html)
@@ -72,6 +72,15 @@ type alias ColumnStyle msg =
     }
 
 
+type alias SortTableStyle msg =
+    { containerTable : List (Attribute msg)
+    , headerButton : ButtonStyle msg
+    , ascIcon : Element Never
+    , descIcon : Element Never
+    , defaultIcon : Element Never
+    }
+
+
 type alias Style style msg =
     { style
         | snackbar : SnackbarStyle msg

From 308a049613d2b2a98da8123148bd42a026af8ce6 Mon Sep 17 00:00:00 2001
From: Unknown 
Date: Sun, 17 May 2020 22:02:29 +0200
Subject: [PATCH 08/14] Started with Material Design

---
 elm.json                                  |  10 +-
 example/elm.json                          |   6 +-
 example/src/Data/Example.elm              | 312 +++++++++--
 example/src/Data/Style.elm                |  18 +-
 example/src/Data/Style/ElmUiFramework.elm | 120 +++--
 example/src/Data/Style/Material.elm       | 393 ++++++++++++++
 example/src/Data/Style/Template.elm       |  84 ++-
 example/src/Data/Theme.elm                |  14 +-
 example/src/Example/Button.elm            |  24 +-
 example/src/Example/Dialog.elm            |  93 ++++
 example/src/Example/ExpansionPanel.elm    |  16 +-
 example/src/Example/List.elm              |  47 ++
 example/src/Example/Modal.elm             |  88 ++++
 example/src/Example/MultiSelect.elm       |  29 +-
 example/src/Example/Select.elm            |  19 +-
 example/src/Example/SortTable.elm         |  89 ++++
 example/src/Example/Tab.elm               |  20 +-
 example/src/Example/TextInput.elm         | 104 ++++
 example/src/Icons.elm                     | 137 +++--
 example/src/Main.elm                      |  60 ++-
 example/src/Reusable.elm                  |  66 +--
 example/src/Stateless.elm                 | 332 +-----------
 example/src/View/Test.elm                 | 605 +++++++++++++---------
 src/Internal/Button.elm                   |   4 +-
 src/Internal/List.elm                     |  10 +-
 src/Widget.elm                            |  62 +--
 src/{ => Widget}/Layout.elm               |   2 +-
 src/Widget/Style.elm                      |   5 +-
 28 files changed, 1843 insertions(+), 926 deletions(-)
 create mode 100644 example/src/Data/Style/Material.elm
 create mode 100644 example/src/Example/Dialog.elm
 create mode 100644 example/src/Example/List.elm
 create mode 100644 example/src/Example/Modal.elm
 create mode 100644 example/src/Example/SortTable.elm
 create mode 100644 example/src/Example/TextInput.elm
 rename src/{ => Widget}/Layout.elm (99%)

diff --git a/elm.json b/elm.json
index 0b8bf4e..ae03e96 100644
--- a/elm.json
+++ b/elm.json
@@ -5,12 +5,10 @@
     "license": "BSD-3-Clause",
     "version": "1.0.0",
     "exposed-modules": [
-        "Widget",
-        "Widget.FilterSelect",
-        "Widget.ValidatedInput",
+        "Widget.Layout",
+        "Widget.Style",
         "Widget.ScrollingNav",
-        "Widget.Snackbar",
-        "Widget.SortTable"
+        "Widget.Snackbar"
     ],
     "elm-version": "0.19.0 <= v < 0.20.0",
     "dependencies": {
@@ -29,4 +27,4 @@
     "test-dependencies": {
         "elm-explorations/test": "1.2.1 <= v < 2.0.0"
     }
-}
+}
\ No newline at end of file
diff --git a/example/elm.json b/example/elm.json
index ec138fb..d7b3bbb 100644
--- a/example/elm.json
+++ b/example/elm.json
@@ -8,6 +8,7 @@
     "dependencies": {
         "direct": {
             "Orasund/elm-ui-framework": "1.6.1",
+            "avh4/elm-color": "1.0.0",
             "elm/browser": "1.0.2",
             "elm/core": "1.0.5",
             "elm/html": "1.0.0",
@@ -17,14 +18,17 @@
             "feathericons/elm-feather": "1.4.0",
             "jasonliang512/elm-heroicons": "1.0.2",
             "mdgriffith/elm-ui": "1.1.5",
+            "noahzgordon/elm-color-extra": "1.0.2",
             "ryannhg/elm-spa": "4.1.0",
             "turboMaCk/queue": "1.0.2",
             "wernerdegroot/listzipper": "4.0.0"
         },
         "indirect": {
             "elm/json": "1.1.3",
+            "elm/regex": "1.0.0",
             "elm/url": "1.0.0",
-            "elm/virtual-dom": "1.0.2"
+            "elm/virtual-dom": "1.0.2",
+            "fredcy/elm-parseint": "2.0.1"
         }
     },
     "test-dependencies": {
diff --git a/example/src/Data/Example.elm b/example/src/Data/Example.elm
index 881a8dd..e6e5424 100644
--- a/example/src/Data/Example.elm
+++ b/example/src/Data/Example.elm
@@ -3,10 +3,15 @@ module Data.Example exposing (Model, Msg, init, subscriptions, toCardList, updat
 import Data.Style exposing (Style)
 import Element exposing (Element)
 import Example.Button as Button
+import Example.Dialog as Dialog
 import Example.ExpansionPanel as ExpansionPanel
+import Example.List as List
+import Example.Modal as Modal
 import Example.MultiSelect as MultiSelect
 import Example.Select as Select
+import Example.SortTable as SortTable
 import Example.Tab as Tab
+import Example.TextInput as TextInput
 import Framework.Grid as Grid
 import View.Test as Test
 
@@ -17,6 +22,11 @@ type Msg
     | MultiSelect MultiSelect.Msg
     | ExpansionPanel ExpansionPanel.Msg
     | Tab Tab.Msg
+    | SortTable SortTable.Msg
+    | Modal Modal.Msg
+    | Dialog Dialog.Msg
+    | TextInput TextInput.Msg
+    | List List.Msg
 
 
 type alias Model =
@@ -25,6 +35,34 @@ type alias Model =
     , multiSelect : MultiSelect.Model
     , expansionPanel : ExpansionPanel.Model
     , tab : Tab.Model
+    , sortTable : SortTable.Model
+    , modal : Modal.Model
+    , dialog : Dialog.Model
+    , textInput : TextInput.Model
+    , list : List.Model
+    }
+
+
+type alias UpgradeRecord model msg =
+    { from : Model -> model
+    , to : Model -> model -> Model
+    , msgMapper : msg -> Msg
+    , updateFun : msg -> model -> ( model, Cmd msg )
+    , subscriptionsFun : model -> Sub msg
+    }
+
+
+type alias UpgradeCollection =
+    { button : UpgradeRecord Button.Model Button.Msg
+    , select : UpgradeRecord Select.Model Select.Msg
+    , multiSelect : UpgradeRecord MultiSelect.Model MultiSelect.Msg
+    , expansionPanel : UpgradeRecord ExpansionPanel.Model ExpansionPanel.Msg
+    , tab : UpgradeRecord Tab.Model Tab.Msg
+    , sortTable : UpgradeRecord SortTable.Model SortTable.Msg
+    , modal : UpgradeRecord Modal.Model Modal.Msg
+    , dialog : UpgradeRecord Dialog.Model Dialog.Msg
+    , textInput : UpgradeRecord TextInput.Model TextInput.Msg
+    , list : UpgradeRecord List.Model List.Msg
     }
 
 
@@ -45,63 +83,175 @@ init =
 
         ( tabModel, tabMsg ) =
             Tab.init
+
+        ( sortTableModel, sortTableMsg ) =
+            SortTable.init
+
+        ( modalModel, modalMsg ) =
+            Modal.init
+
+        ( dialogModel, dialogMsg ) =
+            Dialog.init
+
+        ( textInputModel, textInputMsg ) =
+            TextInput.init
+
+        ( listModel, listMsg ) =
+            List.init
     in
     ( { button = buttonModel
       , select = selectModel
       , multiSelect = multiSelectModel
       , expansionPanel = expansionPanelModel
       , tab = tabModel
+      , sortTable = sortTableModel
+      , modal = modalModel
+      , dialog = dialogModel
+      , textInput = textInputModel
+      , list = listModel
       }
     , [ Cmd.map Button buttonMsg
       , Cmd.map Select selectMsg
       , Cmd.map MultiSelect multiSelectMsg
+      , Cmd.map ExpansionPanel expansionPanelMsg
       , Cmd.map Tab tabMsg
+      , Cmd.map SortTable sortTableMsg
+      , Cmd.map Modal modalMsg
+      , Cmd.map Dialog dialogMsg
+      , Cmd.map TextInput textInputMsg
+      , Cmd.map List listMsg
       ]
         |> Cmd.batch
     )
 
 
+upgradeRecord : UpgradeCollection
+upgradeRecord =
+    { button =
+        { from = .button
+        , to = \model a -> { model | button = a }
+        , msgMapper = Button
+        , updateFun = Button.update
+        , subscriptionsFun = Button.subscriptions
+        }
+    , select =
+        { from = .select
+        , to = \model a -> { model | select = a }
+        , msgMapper = Select
+        , updateFun = Select.update
+        , subscriptionsFun = Select.subscriptions
+        }
+    , multiSelect =
+        { from = .multiSelect
+        , to = \model a -> { model | multiSelect = a }
+        , msgMapper = MultiSelect
+        , updateFun = MultiSelect.update
+        , subscriptionsFun = MultiSelect.subscriptions
+        }
+    , expansionPanel =
+        { from = .expansionPanel
+        , to = \model a -> { model | expansionPanel = a }
+        , msgMapper = ExpansionPanel
+        , updateFun = ExpansionPanel.update
+        , subscriptionsFun = ExpansionPanel.subscriptions
+        }
+    , tab =
+        { from = .tab
+        , to = \model a -> { model | tab = a }
+        , msgMapper = Tab
+        , updateFun = Tab.update
+        , subscriptionsFun = Tab.subscriptions
+        }
+    , sortTable =
+        { from = .sortTable
+        , to = \model a -> { model | sortTable = a }
+        , msgMapper = SortTable
+        , updateFun = SortTable.update
+        , subscriptionsFun = SortTable.subscriptions
+        }
+    , modal =
+        { from = .modal
+        , to = \model a -> { model | modal = a }
+        , msgMapper = Modal
+        , updateFun = Modal.update
+        , subscriptionsFun = Modal.subscriptions
+        }
+    , dialog =
+        { from = .dialog
+        , to = \model a -> { model | dialog = a }
+        , msgMapper = Dialog
+        , updateFun = Dialog.update
+        , subscriptionsFun = Dialog.subscriptions
+        }
+    , textInput =
+        { from = .textInput
+        , to = \model a -> { model | textInput = a }
+        , msgMapper = TextInput
+        , updateFun = TextInput.update
+        , subscriptionsFun = TextInput.subscriptions
+        }
+    , list =
+        { from = .list
+        , to = \model a -> { model | list = a }
+        , msgMapper = List
+        , updateFun = List.update
+        , subscriptionsFun = List.subscriptions
+        }
+    }
+
+
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
-    case msg of
-        Button buttonMsg ->
-            Button.update buttonMsg model.button
-                |> Tuple.mapBoth
-                    (\a -> { model | button = a })
-                    (Cmd.map Button)
+    (case msg of
+        Button m ->
+            updateField .button m
 
-        Select selectMsg ->
-            Select.update selectMsg model.select
-                |> Tuple.mapBoth
-                    (\a -> { model | select = a })
-                    (Cmd.map Select)
+        Select m ->
+            updateField .select m
 
-        MultiSelect multiSelectMsg ->
-            MultiSelect.update multiSelectMsg model.multiSelect
-                |> Tuple.mapBoth
-                    (\a -> { model | multiSelect = a })
-                    (Cmd.map MultiSelect)
+        MultiSelect m ->
+            updateField .multiSelect m
 
-        ExpansionPanel expansionPanelMsg ->
-            ExpansionPanel.update expansionPanelMsg model.expansionPanel
-                |> Tuple.mapBoth
-                    (\a -> { model | expansionPanel = a })
-                    (Cmd.map ExpansionPanel)
+        ExpansionPanel m ->
+            updateField .expansionPanel m
 
-        Tab tabMsg ->
-            Tab.update tabMsg model.tab
-                |> Tuple.mapBoth
-                    (\a -> { model | tab = a })
-                    (Cmd.map Tab)
+        Tab m ->
+            updateField .tab m
+
+        SortTable m ->
+            updateField .sortTable m
+
+        Modal m ->
+            updateField .modal m
+
+        Dialog m ->
+            updateField .dialog m
+
+        TextInput m ->
+            updateField .textInput m
+
+        List m ->
+            updateField .list m
+    )
+        model
 
 
 subscriptions : Model -> Sub Msg
 subscriptions model =
-    [ Button.subscriptions model.button |> Sub.map Button
-    , Select.subscriptions model.select |> Sub.map Select
-    , MultiSelect.subscriptions model.multiSelect |> Sub.map MultiSelect
-    , ExpansionPanel.subscriptions model.expansionPanel |> Sub.map ExpansionPanel
-    , Tab.subscriptions model.tab |> Sub.map Tab
+    let
+        subFun { from, msgMapper, subscriptionsFun } =
+            subscriptionsFun (from model) |> Sub.map msgMapper
+    in
+    [ upgradeRecord.button |> subFun
+    , upgradeRecord.select |> subFun
+    , upgradeRecord.multiSelect |> subFun
+    , upgradeRecord.expansionPanel |> subFun
+    , upgradeRecord.tab |> subFun
+    , upgradeRecord.sortTable |> subFun
+    , upgradeRecord.modal |> subFun
+    , upgradeRecord.dialog |> subFun
+    , upgradeRecord.textInput |> subFun
+    , upgradeRecord.list |> subFun
     ]
         |> Sub.batch
 
@@ -116,33 +266,33 @@ view :
         , multiSelect : Element msg
         , expansionPanel : Element msg
         , tab : Element msg
+        , sortTable : Element msg
+        , modal : Element msg
+        , dialog : Element msg
+        , textInput : Element msg
+        , list : Element msg
         }
 view msgMapper style model =
     { button =
-        Button.view
-            (Button >> msgMapper)
-            style
-            model.button
+        Button.view (Button >> msgMapper) style (.button model)
     , select =
-        Select.view
-            (Select >> msgMapper)
-            style
-            model.select
+        Select.view (Select >> msgMapper) style (.select model)
     , multiSelect =
-        MultiSelect.view
-            (MultiSelect >> msgMapper)
-            style
-            model.multiSelect
+        MultiSelect.view (MultiSelect >> msgMapper) style (.multiSelect model)
     , expansionPanel =
-        ExpansionPanel.view
-            (ExpansionPanel >> msgMapper)
-            style
-            model.expansionPanel
+        ExpansionPanel.view (ExpansionPanel >> msgMapper) style (.expansionPanel model)
     , tab =
-        Tab.view
-            (Tab >> msgMapper)
-            style
-            model.tab
+        Tab.view (Tab >> msgMapper) style (.tab model)
+    , sortTable =
+        SortTable.view (SortTable >> msgMapper) style (.sortTable model)
+    , modal =
+        Modal.view (Modal >> msgMapper) style (.modal model)
+    , dialog =
+        Dialog.view (Dialog >> msgMapper) style (.dialog model)
+    , textInput =
+        TextInput.view (TextInput >> msgMapper) style (.textInput model)
+    , list =
+        List.view (List >> msgMapper) style (.list model)
     }
 
 
@@ -154,9 +304,9 @@ toCardList :
     }
     -> List ( String, Element msg, Element msg )
 toCardList { idle, msgMapper, style, model } =
-    [ { title = "Icon Button"
+    [ { title = "Button"
       , example = .button
-      , test = Test.iconButton
+      , test = Test.button
       }
     , { title = "Select"
       , example = .select
@@ -174,7 +324,28 @@ toCardList { idle, msgMapper, style, model } =
       , example = .tab
       , test = Test.tab
       }
+    , { title = "Sort Table"
+      , example = .sortTable
+      , test = Test.sortTable
+      }
+    , { title = "Modal"
+      , example = .modal
+      , test = Test.modal
+      }
+    , { title = "Dialog"
+      , example = .dialog
+      , test = Test.dialog
+      }
+    , { title = "Text Input"
+      , example = .textInput
+      , test = Test.textInput
+      }
+    , { title = "List"
+      , example = .list
+      , test = Test.list
+      }
     ]
+        |> List.sortBy .title
         |> List.map
             (\{ title, example, test } ->
                 ( title
@@ -182,6 +353,39 @@ toCardList { idle, msgMapper, style, model } =
                     |> view msgMapper style
                     |> example
                 , test idle style
-                    |> Element.column Grid.simple
+                    |> List.map
+                        (\( name, elem ) ->
+                            Element.row Grid.spacedEvenly
+                                [ name
+                                    |> Element.text
+                                    |> List.singleton
+                                    |> Element.wrappedRow [ Element.width <| Element.shrink ]
+                                , elem
+                                    |> Element.el [ Element.width <| Element.shrink ]
+                                ]
+                        )
+                    |> Element.column
+                        (Grid.simple
+                            ++ [ Element.width <| Element.fill ]
+                        )
                 )
             )
+
+
+
+{-------------------------------------------------------------------------------
+-------------------------------------------------------------------------------}
+
+
+updateField :
+    (UpgradeCollection -> UpgradeRecord model msg)
+    -> msg
+    -> Model
+    -> ( Model, Cmd Msg )
+updateField getter msg model =
+    let
+        { from, to, msgMapper, updateFun } =
+            getter upgradeRecord
+    in
+    updateFun msg (from model)
+        |> Tuple.mapBoth (to model) (Cmd.map msgMapper)
diff --git a/example/src/Data/Style.elm b/example/src/Data/Style.elm
index ad1deb4..cd00a69 100644
--- a/example/src/Data/Style.elm
+++ b/example/src/Data/Style.elm
@@ -1,8 +1,17 @@
 module Data.Style exposing (Style)
 
-import Element exposing (Attribute)
-import Widget.Style exposing (ButtonStyle, DialogStyle, ExpansionPanelStyle,
-    SnackbarStyle ,RowStyle,ColumnStyle,TextInputStyle,TabStyle)
+import Widget.Style
+    exposing
+        ( ButtonStyle
+        , ColumnStyle
+        , DialogStyle
+        , ExpansionPanelStyle
+        , RowStyle
+        , SortTableStyle
+        , TabStyle
+        , TextInputStyle
+        )
+
 
 type alias Style msg =
     Widget.Style.Style
@@ -16,5 +25,6 @@ type alias Style msg =
         , row : RowStyle msg
         , column : ColumnStyle msg
         , cardColumn : ColumnStyle msg
+        , sortTable : SortTableStyle msg
         }
-        msg
\ No newline at end of file
+        msg
diff --git a/example/src/Data/Style/ElmUiFramework.elm b/example/src/Data/Style/ElmUiFramework.elm
index b16d5cc..9b522c5 100644
--- a/example/src/Data/Style/ElmUiFramework.elm
+++ b/example/src/Data/Style/ElmUiFramework.elm
@@ -1,9 +1,9 @@
 module Data.Style.ElmUiFramework exposing (style)
 
-import Element exposing (Attribute)
+import Data.Style exposing (Style)
+import Element
 import Element.Border as Border
 import Element.Font as Font
-import Element.Input as Input
 import Framework
 import Framework.Button as Button
 import Framework.Card as Card
@@ -11,12 +11,21 @@ import Framework.Color as Color
 import Framework.Grid as Grid
 import Framework.Group as Group
 import Framework.Heading as Heading
-import Framework.Input as Input
 import Framework.Tag as Tag
 import Icons
-import Data.Style exposing (Style)
-import Widget.Style exposing (ButtonStyle, DialogStyle, ExpansionPanelStyle,
-    SnackbarStyle ,RowStyle,ColumnStyle,TextInputStyle,TabStyle)
+import Widget.Style
+    exposing
+        ( ButtonStyle
+        , ColumnStyle
+        , DialogStyle
+        , ExpansionPanelStyle
+        , RowStyle
+        , SnackbarStyle
+        , SortTableStyle
+        , TabStyle
+        , TextInputStyle
+        )
+
 
 textButton : ButtonStyle msg
 textButton =
@@ -24,6 +33,7 @@ textButton =
     , labelRow = Grid.simple
     , ifDisabled = Color.disabled
     , ifActive = Color.primary
+    , otherwise = []
     }
 
 
@@ -33,6 +43,7 @@ simpleButton =
     , labelRow = Grid.simple
     , ifDisabled = Color.disabled
     , ifActive = Color.primary
+    , otherwise = []
     }
 
 
@@ -57,6 +68,7 @@ menuTabButton =
     , labelRow = Grid.simple
     , ifDisabled = Color.disabled
     , ifActive = [ Border.color Color.turquoise ]
+    , otherwise = []
     }
 
 
@@ -66,6 +78,7 @@ menuButton =
     , container = Button.simple ++ Group.center ++ Color.dark
     , ifDisabled = Color.disabled
     , ifActive = Color.primary
+    , otherwise = []
     }
 
 
@@ -79,6 +92,7 @@ sheetButton =
     , labelRow = Grid.simple
     , ifDisabled = Color.disabled
     , ifActive = Color.primary
+    , otherwise = []
     }
 
 
@@ -88,6 +102,7 @@ buttonStyle =
     , container = Button.simple
     , ifDisabled = Color.disabled
     , ifActive = Color.primary
+    , otherwise = []
     }
 
 
@@ -97,6 +112,7 @@ snackbarButton =
     , container = Button.simple ++ Color.dark
     , ifDisabled = Color.disabled
     , ifActive = Color.primary
+    , otherwise = []
     }
 
 
@@ -106,8 +122,10 @@ tabButtonStyle =
     , container = Button.simple ++ Group.top
     , ifDisabled = Color.disabled
     , ifActive = Color.primary
+    , otherwise = []
     }
 
+
 textInputStyle : TextInputStyle msg
 textInputStyle =
     { chipButton = chipButtonStyle
@@ -143,41 +161,43 @@ chipButtonStyle =
     , ifDisabled = []
     , labelRow = Grid.simple
     , ifActive = Color.primary
+    , otherwise = []
     }
 
+
 expansionPanelStyle : ExpansionPanelStyle msg
 expansionPanelStyle =
-    { containerColumn = Card.simple ++ Grid.simple ++ [Element.height <| Element.shrink]
-    , panelRow = Grid.spacedEvenly ++ [Element.height <| Element.shrink]
-    , labelRow = Grid.simple ++ [Element.height <| Element.shrink]
+    { containerColumn = Card.simple ++ Grid.simple ++ [ Element.height <| Element.shrink ]
+    , panelRow = Grid.spacedEvenly ++ [ Element.height <| Element.shrink ]
+    , labelRow = Grid.simple ++ [ Element.height <| Element.shrink ]
     , content = []
-        , expandIcon = Icons.chevronDown  |> Element.html |> Element.el []
-        , collapseIcon = Icons.chevronUp |> Element.html |> Element.el []
+    , expandIcon = Icons.chevronDown |> Element.html |> Element.el []
+    , collapseIcon = Icons.chevronUp |> Element.html |> Element.el []
     }
 
 
-
 dialog : DialogStyle msg
 dialog =
     { containerColumn =
-            Card.simple
-                ++ Grid.simple
-                ++  [ Element.centerY
-                    , Element.width <| Element.minimum 280 <| Element.maximum 560 <| Element.fill
-                    ]
-        , title = Heading.h3
-        , buttonRow =
-            Grid.simple
-                ++ [ Element.paddingEach
-                        { top = 28
-                        , bottom = 0
-                        , left = 0
-                        , right = 0
-                        }
-                   ]
-        , acceptButton = simpleButton
-        , dismissButton = textButton
-        }
+        Card.simple
+            ++ Grid.simple
+            ++ [ Element.centerY
+               , Element.width <| Element.minimum 280 <| Element.maximum 560 <| Element.fill
+               ]
+    , title = Heading.h3
+    , buttonRow =
+        Grid.simple
+            ++ [ Element.paddingEach
+                    { top = 28
+                    , bottom = 0
+                    , left = 0
+                    , right = 0
+                    }
+               ]
+    , acceptButton = simpleButton
+    , dismissButton = textButton
+    }
+
 
 snackbar : SnackbarStyle msg
 snackbar =
@@ -186,19 +206,21 @@ snackbar =
             ++ Color.dark
             ++ Grid.simple
             ++ [ Element.paddingXY 8 6
-                , Element.height <| Element.px <| 54
-                ]
+               , Element.height <| Element.px <| 54
+               ]
     , button = snackbarButton
     , text = [ Element.paddingXY 8 0 ]
     }
 
+
 tab : TabStyle msg
 tab =
     { button = tabButtonStyle
-        , optionRow = Grid.simple
-        , containerColumn = Grid.compact
-        , content = (Card.small ++ Group.bottom)
-        }
+    , optionRow = Grid.simple
+    , containerColumn = Grid.compact
+    , content = Card.small ++ Group.bottom
+    }
+
 
 row : RowStyle msg
 row =
@@ -206,30 +228,44 @@ row =
     , element = []
     , ifFirst = Group.left
     , ifLast = Group.right
-    , ifCenter = Group.center
+    , otherwise = Group.center
     }
 
+
 cardColumn : ColumnStyle msg
 cardColumn =
-    { containerColumn = Grid.compact ++ [Element.height <| Element.fill]
-    , element = Card.large ++ [Element.height <| Element.fill]
+    { containerColumn = Grid.compact ++ [ Element.height <| Element.fill ]
+    , element = Card.large ++ [ Element.height <| Element.fill ]
     , ifFirst = Group.top
     , ifLast = Group.bottom
-    , ifCenter = Group.center 
+    , otherwise = Group.center
     }
 
+
 column : ColumnStyle msg
 column =
     { containerColumn = Grid.compact
     , element = []
     , ifFirst = Group.top
     , ifLast = Group.bottom
-    , ifCenter =Group.center 
+    , otherwise = Group.center
     }
 
+
+sortTable : SortTableStyle msg
+sortTable =
+    { containerTable = Grid.simple
+    , headerButton = tabButtonStyle
+    , ascIcon = Icons.chevronUp |> Element.html |> Element.el []
+    , descIcon = Icons.chevronDown |> Element.html |> Element.el []
+    , defaultIcon = Element.none
+    }
+
+
 style : Style msg
 style =
-    { row = row
+    { sortTable = sortTable
+    , row = row
     , cardColumn = cardColumn
     , column = column
     , button = buttonStyle
diff --git a/example/src/Data/Style/Material.elm b/example/src/Data/Style/Material.elm
new file mode 100644
index 0000000..250319f
--- /dev/null
+++ b/example/src/Data/Style/Material.elm
@@ -0,0 +1,393 @@
+module Data.Style.Material exposing (Palette, defaultPalette, style)
+
+import Color exposing (Color)
+import Color.Accessibility as Accessibility
+import Color.Convert as Convert
+import Color.Manipulate as Manipulate
+import Data.Style exposing (Style)
+import Element exposing (Attribute, Element)
+import Element.Background as Background
+import Element.Border as Border
+import Element.Font as Font
+import Html.Attributes as Attributes
+import Widget.Style
+    exposing
+        ( ButtonStyle
+        , ColumnStyle
+        , DialogStyle
+        , ExpansionPanelStyle
+        , RowStyle
+        , SnackbarStyle
+        , SortTableStyle
+        , TabStyle
+        , TextInputStyle
+        )
+
+
+type alias Palette =
+    { primary : Color --Color.rgb255 0x62 0x00 0xEE
+    , secondary : Color --Color.rgb255 0x03 0xda 0xc6
+    , background : Color --Color.rgb255 0xFF 0xFF 0xFF
+    , surface : Color --Color.rgb255 0xFF 0xFF 0xFF
+    , error : Color --Color.rgb255 0xB0 0x00 0x20
+    , on :
+        { primary : Color --Color.rgb255 0xFF 0xFF 0xFF
+        , secondary : Color --Color.rgb255 0x00 0x00 0x00
+        , background : Color --Color.rgb255 0x00 0x00 0x00
+        , surface : Color --Color.rgb255 0x00 0x00 0x00
+        , error : Color --Color.rgb255 0xFF 0xFF 0xFF
+        }
+    }
+
+
+defaultPalette : Palette
+defaultPalette =
+    { primary = Color.rgb255 0x62 0x00 0xEE
+    , secondary = Color.rgb255 0x03 0xDA 0xC6
+    , background = Color.rgb255 0xFF 0xFF 0xFF
+    , surface = Color.rgb255 0xFF 0xFF 0xFF
+    , error = Color.rgb255 0xB0 0x00 0x20
+    , on =
+        { primary = Color.rgb255 0xFF 0xFF 0xFF
+        , secondary = Color.rgb255 0x00 0x00 0x00
+        , background = Color.rgb255 0x00 0x00 0x00
+        , surface = Color.rgb255 0x00 0x00 0x00
+        , error = Color.rgb255 0xFF 0xFF 0xFF
+        }
+    }
+
+
+accessibleTextColor : Color -> Color
+accessibleTextColor color =
+    if (0.05 / (Accessibility.luminance color + 0.05)) < 7 then
+        Color.rgb 255 255 255
+
+    else
+        Color.rgb 0 0 0
+
+
+{-| using noahzgordon/elm-color-extra for colors
+-}
+withShade : Color -> Float -> Color -> Color
+withShade c2 amount c1 =
+    let
+        alpha = c1 
+            |> Color.toRgba |> .alpha
+        
+
+        toCIELCH =
+            Convert.colorToLab
+                >> (\{ l, a, b } ->
+                        { l = l
+                        , c = sqrt (a * a + b * b)
+                        , h = atan2 b a
+                        }
+                   )
+
+        fromCIELCH =
+            (\{ l, c, h } ->
+                { l = l
+                , a = c * cos h
+                , b = c * sin h
+                }
+            )
+                >> Convert.labToColor
+
+        fun a b =
+            { l = (a.l * (1 - amount) + b.l * amount) / 1
+            , c = (a.c * (1 - amount) + b.c * amount) / 1
+            , h = (a.h * (1 - amount) + b.h * amount) / 1
+            }
+    in
+    fun (toCIELCH c1) (toCIELCH c2)
+        |> fromCIELCH
+        |> Color.toRgba
+        |> (\color -> { color | alpha = alpha })
+        |> Color.fromRgba
+
+scaleOpacity : Float -> Color -> Color
+scaleOpacity opacity =
+    Color.toRgba
+        >> (\color -> { color | alpha = color.alpha * opacity})
+        >> Color.fromRgba
+
+{-| hsl 265 100 47 (0% onColor)
+rgb 98 0 238
+-}
+primaryColor : Palette -> Color
+primaryColor { primary } =
+    primary
+
+
+{-| hsl 265 75 59 (24% onColor)
+rgb 136 61 242
+-}
+primaryColorFocused : Palette -> Color
+primaryColorFocused {primary, on } =
+    primary |> withShade on.primary 0.24
+
+
+
+--Color.rgb255 0x87 0x3D 0xF2
+
+
+{-| hsl 265 92 51 (08% onColor)
+-}
+primaryColorHover : Palette -> Color
+primaryColorHover {primary, on } =
+    primary |> withShade on.primary 0.08
+
+
+
+--Color.rgb255 0x6E 0x14 0xEF
+
+
+{-| hsl 265 66 64 (32% onColor)
+-}
+primaryColorPressed : Palette -> Color
+primaryColorPressed {primary, on } =
+    primary |> withShade on.primary 0.32
+
+
+
+--Color.rgb255 0x94 0x52 0xF3
+
+
+primaryColorDisabled : Palette ->Color
+primaryColorDisabled {primary,on}=
+    Color.rgb255 0x77 0x77 0x77 |> scaleOpacity 0.38
+
+disabledFontColor : Color
+disabledFontColor =
+    Color.rgb255 0x77 0x77 0x77--0x85 0x85 0x85
+
+
+shadow :
+    Float
+    ->
+        { offset : ( Float, Float )
+        , size : Float
+        , blur : Float
+        , color : Element.Color
+        }
+shadow float =
+    { color = Element.rgba255 0x00 0x00 0x00 0.2
+    , offset = ( 0, float )
+    , size = 0
+    , blur = float
+    }
+
+
+primaryButton : Palette -> ButtonStyle msg
+primaryButton palette =
+    { container =
+        [ Element.height <| Element.px 36
+        , Element.width <| Element.minimum 64 <| Element.shrink
+        , Border.rounded <| 4
+        , Border.shadow <| shadow 2
+        , Font.size 14
+        , Font.medium
+        , Font.letterSpacing 1.25
+        , Element.htmlAttribute <| Attributes.style "text-transform" "uppercase"
+        , Element.paddingXY 16 8
+        , Element.mouseDown
+            [ Background.color <| Element.fromRgb <| Color.toRgba <| primaryColorPressed palette
+            , Font.color <| Element.fromRgb <| Color.toRgba <| accessibleTextColor <| primaryColorPressed palette
+            , Border.shadow <| shadow 12
+            ]
+        , Element.mouseOver
+            [ Background.color <| Element.fromRgb <| Color.toRgba <| primaryColorHover palette
+            , Font.color <| Element.fromRgb <| Color.toRgba <| accessibleTextColor <| primaryColorHover palette
+            , Border.shadow <| shadow 6
+            ]
+        , Element.focused
+            [ Background.color <| Element.fromRgb <| Color.toRgba <| primaryColorFocused palette
+            , Font.color <| Element.fromRgb <| Color.toRgba <| accessibleTextColor <| primaryColorFocused palette
+            , Border.shadow <| shadow 6
+            ]
+        ]
+    , labelRow =
+        [ Element.spacing <| 8
+        ]
+    , ifDisabled =
+        [ Background.color <| Element.fromRgb <| Color.toRgba <| primaryColorDisabled palette
+        , Font.color <| Element.fromRgb <| Color.toRgba <| disabledFontColor
+        , Element.htmlAttribute <| Attributes.style "cursor" "not-allowed"
+        , Element.mouseDown []
+        , Element.mouseOver []
+        , Element.focused []
+        , Border.shadow <| shadow 0
+        ]
+    , ifActive =
+        [ Background.color <| Element.fromRgb <| Color.toRgba <| primaryColorFocused palette
+        , Font.color <| Element.fromRgb <| Color.toRgba <| accessibleTextColor <| primaryColorHover palette
+        ]
+    , otherwise =
+        [ Background.color <| Element.fromRgb <| Color.toRgba <| primaryColor palette
+        , Font.color <| Element.fromRgb <| Color.toRgba <| accessibleTextColor <| primaryColor palette
+        
+        ]
+    }
+
+
+
+{-------------------------------------------------------------------------------
+- Template
+-------------------------------------------------------------------------------}
+
+
+fontSize : Int
+fontSize =
+    10
+
+
+box : String -> List (Attribute msg)
+box string =
+    [ Border.width 1
+    , Background.color <| Element.rgba 1 1 1 0.5
+    , Element.padding 10
+    , Element.spacing 10
+    , Element.above <|
+        Element.el [ Font.size <| fontSize ] <|
+            Element.text string
+    ]
+
+
+decoration : String -> List (Attribute msg)
+decoration string =
+    [ Element.below <|
+        Element.el [ Font.size <| fontSize ] <|
+            Element.text string
+    , Background.color <| Element.rgb 0.66 0.66 0.66
+    ]
+
+
+icon : String -> Element msg
+icon string =
+    Element.none
+        |> Element.el
+            [ Element.width <| Element.px 12
+            , Element.height <| Element.px 12
+            , Border.rounded 6
+            , Border.width 1
+            , Element.above <|
+                Element.el [ Font.size <| fontSize ] <|
+                    Element.text string
+            ]
+
+
+button : String -> ButtonStyle msg
+button string =
+    { container = box <| string ++ ":container"
+    , labelRow = box <| string ++ ":labelRow"
+    , ifDisabled = decoration <| string ++ ":ifDisabled"
+    , ifActive = decoration <| string ++ ":ifActive"
+    , otherwise = box <| string ++ ":otherwise"
+    }
+
+
+snackbar : String -> SnackbarStyle msg
+snackbar string =
+    { containerRow = box <| string ++ ":containerRow"
+    , button = button <| string ++ ":button"
+    , text = box <| string ++ ":text"
+    }
+
+
+dialog : String -> DialogStyle msg
+dialog string =
+    { containerColumn = box <| string ++ ":containerColumn"
+    , title = box <| string ++ ":title"
+    , buttonRow = box <| string ++ ":buttonRow"
+    , acceptButton = button <| string ++ ":acceptButton"
+    , dismissButton = button <| string ++ ":dismissButton"
+    }
+
+
+expansionPanel : String -> ExpansionPanelStyle msg
+expansionPanel string =
+    { containerColumn = box <| string ++ ":containerColumn"
+    , panelRow = box <| string ++ ":panelRow"
+    , labelRow = box <| string ++ ":labelRow"
+    , content = box <| string ++ ":content"
+    , expandIcon = icon <| string ++ ":expandIcon"
+    , collapseIcon = icon <| string ++ ":collapseIcon"
+    }
+
+
+textInput : String -> TextInputStyle msg
+textInput string =
+    { chipButton = button <| string ++ ":chipButton"
+    , chipsRow = box <| string ++ ":chipsRow"
+    , containerRow = box <| string ++ ":containerRow"
+    , input = box <| string ++ ":input"
+    }
+
+
+tab : String -> TabStyle msg
+tab string =
+    { button = button <| string ++ ":button"
+    , optionRow = box <| string ++ ":optionRow"
+    , containerColumn = box <| string ++ ":containerColumn"
+    , content = box <| string ++ ":content"
+    }
+
+
+row : String -> RowStyle msg
+row string =
+    { containerRow = box <| string ++ ":containerRow"
+    , element = box <| string ++ ":element"
+    , ifFirst = box <| string ++ ":ifFirst"
+    , ifLast = box <| string ++ ":ifLast"
+    , otherwise = box <| string ++ ":otherwise"
+    }
+
+
+column : String -> ColumnStyle msg
+column string =
+    { containerColumn = box <| string ++ ":containerColumn"
+    , element = box <| string ++ ":element"
+    , ifFirst = box <| string ++ ":ifFirst"
+    , ifLast = box <| string ++ ":ifLast"
+    , otherwise = box <| string ++ ":otherwise"
+    }
+
+
+sortTable : String -> SortTableStyle msg
+sortTable string =
+    { containerTable = box <| string ++ ":containerTable"
+    , headerButton = button <| string ++ ":headerButton"
+    , ascIcon = icon <| string ++ ":ascIcon"
+    , descIcon = icon <| string ++ ":descIcon"
+    , defaultIcon = icon <| string ++ ":defaultIcon"
+    }
+
+
+style : Palette -> Style msg
+style palette =
+    { sortTable = sortTable <| "sortTable"
+    , row = row <| "row"
+    , cardColumn = column <| "cardRow"
+    , column = column <| "column"
+    , button = button <| "button"
+    , primaryButton = primaryButton palette
+    , tab = tab <| "tab"
+    , textInput = textInput <| "textInput"
+    , chipButton = button <| "chipButton"
+    , expansionPanel = expansionPanel "expansionPanel"
+    , dialog = dialog "dialog"
+    , snackbar = snackbar "snackbar"
+    , layout = Element.layout
+    , header = box "header"
+    , menuButton = button "menuButton"
+    , sheetButton = button "sheetButton"
+    , menuTabButton = button "menuTabButton"
+    , sheet = box "sheet"
+    , menuIcon = icon "menuIcon"
+    , moreVerticalIcon = icon "moreVerticalIcon"
+    , spacing = 8
+    , title = box "title"
+    , searchIcon = icon "searchIcon"
+    , search = box "search"
+    , searchFill = box "searchFill"
+    }
diff --git a/example/src/Data/Style/Template.elm b/example/src/Data/Style/Template.elm
index 1dca97d..9400875 100644
--- a/example/src/Data/Style/Template.elm
+++ b/example/src/Data/Style/Template.elm
@@ -1,16 +1,28 @@
 module Data.Style.Template exposing (style)
 
 import Data.Style exposing (Style)
-import Element exposing (Attribute,Element)
+import Element exposing (Attribute, Element)
+import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
-import Element.Background as Background
-import Widget.Style exposing (ButtonStyle, DialogStyle, ExpansionPanelStyle,
-    SnackbarStyle ,TextInputStyle,TabStyle,ColumnStyle,RowStyle)
+import Widget.Style
+    exposing
+        ( ButtonStyle
+        , ColumnStyle
+        , DialogStyle
+        , ExpansionPanelStyle
+        , RowStyle
+        , SnackbarStyle
+        , TabStyle
+        , TextInputStyle
+        ,SortTableStyle
+        )
 
 
 fontSize : Int
-fontSize = 10
+fontSize =
+    10
+
 
 box : String -> List (Attribute msg)
 box string =
@@ -18,15 +30,16 @@ box string =
     , Background.color <| Element.rgba 1 1 1 0.5
     , Element.padding 10
     , Element.spacing 10
-    , Element.above <| 
-        Element.el [Font.size <| fontSize] <|
-            Element.text string 
+    , Element.above <|
+        Element.el [ Font.size <| fontSize ] <|
+            Element.text string
     ]
 
+
 decoration : String -> List (Attribute msg)
 decoration string =
-    [ Element.below <| 
-        Element.el [Font.size <| fontSize] <|
+    [ Element.below <|
+        Element.el [ Font.size <| fontSize ] <|
             Element.text string
     , Background.color <| Element.rgb 0.66 0.66 0.66
     ]
@@ -35,15 +48,16 @@ decoration string =
 icon : String -> Element msg
 icon string =
     Element.none
-    |> Element.el
-    [ Element.width <| Element.px 12
-    , Element.height <| Element.px 12
-    , Border.rounded 6
-    , Border.width 1
-    , Element.above <|
-        Element.el [Font.size <| fontSize] <|
-            Element.text string 
-    ]
+        |> Element.el
+            [ Element.width <| Element.px 12
+            , Element.height <| Element.px 12
+            , Border.rounded 6
+            , Border.width 1
+            , Element.above <|
+                Element.el [ Font.size <| fontSize ] <|
+                    Element.text string
+            ]
+
 
 button : String -> ButtonStyle msg
 button string =
@@ -51,8 +65,10 @@ button string =
     , labelRow = box <| string ++ ":labelRow"
     , ifDisabled = decoration <| string ++ ":ifDisabled"
     , ifActive = decoration <| string ++ ":ifActive"
+    , otherwise = decoration <| string ++ ":otherwise"
     }
 
+
 snackbar : String -> SnackbarStyle msg
 snackbar string =
     { containerRow = box <| string ++ ":containerRow"
@@ -60,15 +76,17 @@ snackbar string =
     , text = box <| string ++ ":text"
     }
 
+
 dialog : String -> DialogStyle msg
 dialog string =
     { containerColumn = box <| string ++ ":containerColumn"
     , title = box <| string ++ ":title"
     , buttonRow = box <| string ++ ":buttonRow"
     , acceptButton = button <| string ++ ":acceptButton"
-    , dismissButton = button <| string  ++ ":dismissButton"
+    , dismissButton = button <| string ++ ":dismissButton"
     }
 
+
 expansionPanel : String -> ExpansionPanelStyle msg
 expansionPanel string =
     { containerColumn = box <| string ++ ":containerColumn"
@@ -79,6 +97,7 @@ expansionPanel string =
     , collapseIcon = icon <| string ++ ":collapseIcon"
     }
 
+
 textInput : String -> TextInputStyle msg
 textInput string =
     { chipButton = button <| string ++ ":chipButton"
@@ -87,6 +106,7 @@ textInput string =
     , input = box <| string ++ ":input"
     }
 
+
 tab : String -> TabStyle msg
 tab string =
     { button = button <| string ++ ":button"
@@ -95,27 +115,41 @@ tab string =
     , content = box <| string ++ ":content"
     }
 
+
 row : String -> RowStyle msg
 row string =
     { containerRow = box <| string ++ ":containerRow"
     , element = box <| string ++ ":element"
     , ifFirst = box <| string ++ ":ifFirst"
     , ifLast = box <| string ++ ":ifLast"
-    , ifCenter = box <| string ++ ":ifCenter"
+    , otherwise = box <| string ++ ":otherwise"
     }
 
+
 column : String -> ColumnStyle msg
 column string =
     { containerColumn = box <| string ++ ":containerColumn"
     , element = box <| string ++ ":element"
     , ifFirst = box <| string ++ ":ifFirst"
     , ifLast = box <| string ++ ":ifLast"
-    , ifCenter = box <| string ++ ":ifCenter"
+    , otherwise = box <| string ++ ":otherwise"
     }
 
-style :Style msg
+
+sortTable : String -> SortTableStyle msg
+sortTable string =
+    { containerTable = box <| string ++ ":containerTable"
+    , headerButton = button <| string ++ ":headerButton"
+    , ascIcon = icon <| string ++ ":ascIcon"
+    , descIcon = icon <| string ++ ":descIcon"
+    , defaultIcon = icon <| string ++ ":defaultIcon"
+    }
+
+
+style : Style msg
 style =
-    { row = row <| "row"
+    { sortTable = sortTable <| "sortTable"
+    , row = row <| "row"
     , cardColumn = column <| "cardRow"
     , column = column <| "column"
     , button = button <| "button"
@@ -139,4 +173,4 @@ style =
     , searchIcon = icon "searchIcon"
     , search = box "search"
     , searchFill = box "searchFill"
-    }
\ No newline at end of file
+    }
diff --git a/example/src/Data/Theme.elm b/example/src/Data/Theme.elm
index 65d172c..6e960d4 100644
--- a/example/src/Data/Theme.elm
+++ b/example/src/Data/Theme.elm
@@ -1,17 +1,25 @@
-module Data.Theme exposing (Theme(..),toStyle)
+module Data.Theme exposing (Theme(..), toStyle)
 
 import Data.Style exposing (Style)
 import Data.Style.ElmUiFramework
+import Data.Style.Material
 import Data.Style.Template
 
-type  Theme =
-    ElmUiFramework
+
+type Theme
+    = ElmUiFramework
     | Template
+    | Material
+
 
 toStyle : Theme -> Style msg
 toStyle theme =
     case theme of
         ElmUiFramework ->
             Data.Style.ElmUiFramework.style
+
         Template ->
             Data.Style.Template.style
+
+        Material ->
+            Data.Style.Material.style Data.Style.Material.defaultPalette
diff --git a/example/src/Example/Button.elm b/example/src/Example/Button.elm
index 36211f0..f09a798 100644
--- a/example/src/Example/Button.elm
+++ b/example/src/Example/Button.elm
@@ -3,19 +3,19 @@ module Example.Button exposing (Model, Msg, init, subscriptions, update, view)
 import Element exposing (Element)
 import FeatherIcons
 import Widget
-import Widget.Style exposing (ButtonStyle)
+import Widget.Style exposing (ButtonStyle, RowStyle)
 
 
 type alias Style style msg =
     { style
         | primaryButton : ButtonStyle msg
         , button : ButtonStyle msg
+        , row : RowStyle msg
     }
 
 
-type alias Model =
-    { isButtonEnabled : Bool
-    }
+type Model
+    = IsButtonEnabled Bool
 
 
 type Msg
@@ -24,17 +24,16 @@ type Msg
 
 init : ( Model, Cmd Msg )
 init =
-    ( { isButtonEnabled = True
-      }
+    ( IsButtonEnabled True
     , Cmd.none
     )
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
-update msg model =
+update msg _ =
     case msg of
         ChangedButtonStatus bool ->
-            ( { model | isButtonEnabled = bool }
+            ( IsButtonEnabled bool
             , Cmd.none
             )
 
@@ -45,7 +44,7 @@ subscriptions _ =
 
 
 view : (Msg -> msg) -> Style style msg -> Model -> Element msg
-view msgMapper style model =
+view msgMapper style (IsButtonEnabled isButtonEnabled) =
     [ Widget.button style.primaryButton
         { text = "disable me"
         , icon =
@@ -55,7 +54,7 @@ view msgMapper style model =
                 |> Element.html
                 |> Element.el []
         , onPress =
-            if model.isButtonEnabled then
+            if isButtonEnabled then
                 ChangedButtonStatus False
                     |> msgMapper
                     |> Just
@@ -77,7 +76,4 @@ view msgMapper style model =
                 |> Just
         }
     ]
-        |> Element.row
-            [ Element.spaceEvenly
-            , Element.width <| Element.fill
-            ]
+        |> Widget.row style.row
diff --git a/example/src/Example/Dialog.elm b/example/src/Example/Dialog.elm
new file mode 100644
index 0000000..1d2a50e
--- /dev/null
+++ b/example/src/Example/Dialog.elm
@@ -0,0 +1,93 @@
+module Example.Dialog exposing (Model, Msg, init, subscriptions, update, view)
+
+import Element exposing (Element)
+import FeatherIcons
+import Widget
+import Widget.Style exposing (ButtonStyle, DialogStyle)
+
+
+type alias Style style msg =
+    { style
+        | dialog : DialogStyle msg
+        , primaryButton : ButtonStyle msg
+    }
+
+
+type Model =
+    IsOpen Bool
+
+
+type Msg
+    = OpenDialog Bool
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( IsOpen True
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg _ =
+    case msg of
+        OpenDialog bool ->
+            ( IsOpen bool
+            , Cmd.none
+            )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+view : (Msg -> msg) -> Style style msg -> Model -> Element msg
+view msgMapper style (IsOpen isOpen) =
+    Widget.button style.primaryButton
+        { text = "show Dialog"
+        , icon =
+            FeatherIcons.eye
+                |> FeatherIcons.withSize 16
+                |> FeatherIcons.toHtml []
+                |> Element.html
+                |> Element.el []
+        , onPress =
+            OpenDialog True
+                |> msgMapper
+                |> Just
+        }
+        |> Element.el
+            ([ Element.height <| Element.minimum 200 <| Element.fill
+             , Element.width <| Element.minimum 400 <| Element.fill
+             ]
+                ++ (if isOpen then
+                        { body =
+                            "This is a dialog window"
+                                |> Element.text
+                                |> List.singleton
+                                |> Element.paragraph []
+                        , title = Just "Dialog"
+                        , accept =
+                            Just
+                                { text = "Ok"
+                                , onPress =
+                                    Just <|
+                                        msgMapper <|
+                                            OpenDialog False
+                                }
+                        , dismiss =
+                            Just
+                                { text = "Dismiss"
+                                , onPress =
+                                    Just <|
+                                        msgMapper <|
+                                            OpenDialog False
+                                }
+                        }
+                            |> Widget.dialog style.dialog
+
+                    else
+                        []
+                   )
+            )
diff --git a/example/src/Example/ExpansionPanel.elm b/example/src/Example/ExpansionPanel.elm
index 69cb3c3..757c16b 100644
--- a/example/src/Example/ExpansionPanel.elm
+++ b/example/src/Example/ExpansionPanel.elm
@@ -11,8 +11,8 @@ type alias Style style msg =
     }
 
 
-type alias Model =
-    { isExpanded : Bool }
+type Model
+    = IsExpanded Bool
 
 
 type Msg
@@ -21,18 +21,16 @@ type Msg
 
 init : ( Model, Cmd Msg )
 init =
-    ( { isExpanded = False }
+    ( IsExpanded False
     , Cmd.none
     )
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
-update msg model =
+update msg _ =
     case msg of
         ToggleCollapsable bool ->
-            ( { model
-                | isExpanded = bool
-              }
+            ( IsExpanded bool
             , Cmd.none
             )
 
@@ -43,9 +41,9 @@ subscriptions _ =
 
 
 view : (Msg -> msg) -> Style style msg -> Model -> Element msg
-view msgMapper style model =
+view msgMapper style (IsExpanded isExpanded) =
     { onToggle = ToggleCollapsable >> msgMapper
-    , isExpanded = model.isExpanded
+    , isExpanded = isExpanded
     , icon = Element.none
     , text = "Title"
     , content = Element.text <| "Hello World"
diff --git a/example/src/Example/List.elm b/example/src/Example/List.elm
new file mode 100644
index 0000000..5e86224
--- /dev/null
+++ b/example/src/Example/List.elm
@@ -0,0 +1,47 @@
+module Example.List exposing (Model, Msg, init, subscriptions, update, view)
+
+import Element exposing (Element)
+import Widget
+import Widget.Style exposing (ColumnStyle)
+
+
+type alias Style style msg =
+    { style
+        | cardColumn : ColumnStyle msg
+    }
+
+
+type alias Model =
+    ()
+
+
+type alias Msg =
+    Never
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( ()
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update _ () =
+    ( ()
+    , Cmd.none
+    )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions () =
+    Sub.none
+
+
+view : (Msg -> msg) -> Style style msg -> Model -> Element msg
+view _ style () =
+    [ Element.text <| "A"
+    , Element.text <| "B"
+    , Element.text <| "C"
+    ]
+        |> Widget.column style.cardColumn
diff --git a/example/src/Example/Modal.elm b/example/src/Example/Modal.elm
new file mode 100644
index 0000000..60166a3
--- /dev/null
+++ b/example/src/Example/Modal.elm
@@ -0,0 +1,88 @@
+module Example.Modal exposing (Model, Msg, init, subscriptions, update, view)
+
+import Element exposing (Element)
+import FeatherIcons
+import Widget
+import Widget.Style exposing (ButtonStyle, ColumnStyle)
+
+
+type alias Style style msg =
+    { style
+        | cardColumn : ColumnStyle msg
+        , primaryButton : ButtonStyle msg
+    }
+
+
+type Model
+    = IsEnabled Bool
+
+
+type Msg
+    = ToggleModal Bool
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( IsEnabled True
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg _ =
+    case msg of
+        ToggleModal bool ->
+            ( IsEnabled bool
+            , Cmd.none
+            )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+view : (Msg -> msg) -> Style style msg -> Model -> Element msg
+view msgMapper style (IsEnabled isEnabled) =
+    Widget.button style.primaryButton
+        { text = "show Modal"
+        , icon =
+            FeatherIcons.eye
+                |> FeatherIcons.withSize 16
+                |> FeatherIcons.toHtml []
+                |> Element.html
+                |> Element.el []
+        , onPress =
+            ToggleModal True
+                |> msgMapper
+                |> Just
+        }
+        |> Element.el
+            ([ Element.height <| Element.minimum 200 <| Element.fill
+             , Element.width <| Element.minimum 400 <| Element.fill
+             ]
+                ++ (if isEnabled then
+                        Widget.modal
+                            { onDismiss =
+                                ToggleModal False
+                                    |> msgMapper
+                                    |> Just
+                            , content =
+                                "Click on the area around this box to close it."
+                                    |> Element.text
+                                    |> List.singleton
+                                    |> Element.paragraph []
+                                    |> List.singleton
+                                    |> Widget.column style.cardColumn
+                                    |> Element.el
+                                        [ Element.height <| Element.px 100
+                                        , Element.width <| Element.px 250
+                                        , Element.centerX
+                                        , Element.centerY
+                                        ]
+                            }
+
+                    else
+                        []
+                   )
+            )
diff --git a/example/src/Example/MultiSelect.elm b/example/src/Example/MultiSelect.elm
index 977d4ec..3673125 100644
--- a/example/src/Example/MultiSelect.elm
+++ b/example/src/Example/MultiSelect.elm
@@ -13,9 +13,8 @@ type alias Style style msg =
     }
 
 
-type alias Model =
-    { selected : Set Int
-    }
+type Model
+    = Selected (Set Int)
 
 
 type Msg
@@ -24,25 +23,23 @@ type Msg
 
 init : ( Model, Cmd Msg )
 init =
-    ( { selected = Set.empty }
+    ( Selected <| Set.empty
     , Cmd.none
     )
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
-update msg model =
+update msg (Selected selected) =
     case msg of
         ChangedSelected int ->
-            ( { model
-                | selected =
-                    model.selected
-                        |> (if model.selected |> Set.member int then
-                                Set.remove int
+            ( selected
+                |> (if selected |> Set.member int then
+                        Set.remove int
 
-                            else
-                                Set.insert int
-                           )
-              }
+                    else
+                        Set.insert int
+                   )
+                |> Selected
             , Cmd.none
             )
 
@@ -53,8 +50,8 @@ subscriptions _ =
 
 
 view : (Msg -> msg) -> Style style msg -> Model -> Element msg
-view msgMapper style model =
-    { selected = model.selected
+view msgMapper style (Selected selected) =
+    { selected = selected
     , options =
         [ 1, 2, 42 ]
             |> List.map
diff --git a/example/src/Example/Select.elm b/example/src/Example/Select.elm
index fbebe32..f663c7f 100644
--- a/example/src/Example/Select.elm
+++ b/example/src/Example/Select.elm
@@ -1,7 +1,6 @@
 module Example.Select exposing (Model, Msg, init, subscriptions, update, view)
 
-import Element exposing (Attribute, Element)
-import FeatherIcons
+import Element exposing (Element)
 import Widget
 import Widget.Style exposing (ButtonStyle, RowStyle)
 
@@ -13,8 +12,8 @@ type alias Style style msg =
     }
 
 
-type alias Model =
-    { selected : Maybe Int }
+type Model
+    = Selected (Maybe Int)
 
 
 type Msg
@@ -23,18 +22,16 @@ type Msg
 
 init : ( Model, Cmd Msg )
 init =
-    ( { selected = Nothing }
+    ( Selected Nothing
     , Cmd.none
     )
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
-update msg model =
+update msg _ =
     case msg of
         ChangedSelected int ->
-            ( { model
-                | selected = Just int
-              }
+            ( Selected <| Just int
             , Cmd.none
             )
 
@@ -45,8 +42,8 @@ subscriptions _ =
 
 
 view : (Msg -> msg) -> Style style msg -> Model -> Element msg
-view msgMapper style model =
-    { selected = model.selected
+view msgMapper style (Selected selected) =
+    { selected = selected
     , options =
         [ 1, 2, 42 ]
             |> List.map
diff --git a/example/src/Example/SortTable.elm b/example/src/Example/SortTable.elm
new file mode 100644
index 0000000..585c0e7
--- /dev/null
+++ b/example/src/Example/SortTable.elm
@@ -0,0 +1,89 @@
+module Example.SortTable exposing (Model, Msg, init, subscriptions, update, view)
+
+import Element exposing (Element)
+import Widget
+import Widget.Style exposing (SortTableStyle)
+
+
+type alias Style style msg =
+    { style
+        | sortTable : SortTableStyle msg
+    }
+
+
+type alias Model =
+    { title : String
+    , asc : Bool
+    }
+
+
+type Msg
+    = ChangedSorting String
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( { title = "Name", asc = True }
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        ChangedSorting string ->
+            ( { title = string
+              , asc =
+                    if model.title == string then
+                        not model.asc
+
+                    else
+                        True
+              }
+            , Cmd.none
+            )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+view : (Msg -> msg) -> Style style msg -> Model -> Element msg
+view msgMapper style model =
+    Widget.sortTable style.sortTable
+        { content =
+            [ { id = 1, name = "Antonio", rating = 2.456, hash = Nothing }
+            , { id = 2, name = "Ana", rating = 1.34, hash = Just "45jf" }
+            , { id = 3, name = "Alfred", rating = 4.22, hash = Just "6fs1" }
+            , { id = 4, name = "Thomas", rating = 3, hash = Just "k52f" }
+            ]
+        , columns =
+            [ Widget.intColumn
+                { title = "Id"
+                , value = .id
+                , toString = \int -> "#" ++ String.fromInt int
+                , width = Element.fill
+                }
+            , Widget.stringColumn
+                { title = "Name"
+                , value = .name
+                , toString = identity
+                , width = Element.fill
+                }
+            , Widget.floatColumn
+                { title = "Rating"
+                , value = .rating
+                , toString = String.fromFloat
+                , width = Element.fill
+                }
+            , Widget.unsortableColumn
+                { title = "Hash"
+                , toString = .hash >> Maybe.withDefault "None"
+                , width = Element.fill
+                }
+            ]
+        , asc = model.asc
+        , sortBy = model.title
+        , onChange = ChangedSorting >> msgMapper
+        }
diff --git a/example/src/Example/Tab.elm b/example/src/Example/Tab.elm
index 9da1e79..70c53af 100644
--- a/example/src/Example/Tab.elm
+++ b/example/src/Example/Tab.elm
@@ -11,9 +11,8 @@ type alias Style style msg =
     }
 
 
-type alias Model =
-    { selected : Maybe Int
-    }
+type Model
+    = Selected (Maybe Int)
 
 
 type Msg
@@ -22,17 +21,16 @@ type Msg
 
 init : ( Model, Cmd Msg )
 init =
-    ( { selected = Nothing
-      }
+    ( Selected Nothing
     , Cmd.none
     )
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
-update msg model =
+update msg _ =
     case msg of
         ChangedTab int ->
-            ( { model | selected = Just int }
+            ( Selected <| Just int
             , Cmd.none
             )
 
@@ -43,10 +41,10 @@ subscriptions _ =
 
 
 view : (Msg -> msg) -> Style style msg -> Model -> Element msg
-view msgMapper style model =
+view msgMapper style (Selected selected) =
     Widget.tab style.tab
         { tabs =
-            { selected = model.selected
+            { selected = selected
             , options =
                 [ 1, 2, 3 ]
                     |> List.map
@@ -58,8 +56,8 @@ view msgMapper style model =
             , onSelect = ChangedTab >> msgMapper >> Just
             }
         , content =
-            \selected ->
-                (case selected of
+            \s ->
+                (case s of
                     Just 0 ->
                         "This is Tab 1"
 
diff --git a/example/src/Example/TextInput.elm b/example/src/Example/TextInput.elm
new file mode 100644
index 0000000..ee719c9
--- /dev/null
+++ b/example/src/Example/TextInput.elm
@@ -0,0 +1,104 @@
+module Example.TextInput exposing (Model, Msg, init, subscriptions, update, view)
+
+import Element exposing (Element)
+import Set exposing (Set)
+import Widget
+import Widget.Style exposing (ColumnStyle, TextInputStyle)
+
+
+type alias Style style msg =
+    { style
+        | textInput : TextInputStyle msg
+        , column : ColumnStyle msg
+    }
+
+
+type alias Model =
+    { chipTextInput : Set String
+    , textInput : String
+    }
+
+
+type Msg
+    = ToggleTextInputChip String
+    | SetTextInput String
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( { chipTextInput = Set.empty
+      , textInput = ""
+      }
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        ToggleTextInputChip string ->
+            ( { model
+                | chipTextInput =
+                    model.chipTextInput
+                        |> (if model.chipTextInput |> Set.member string then
+                                Set.remove string
+
+                            else
+                                Set.insert string
+                           )
+              }
+            , Cmd.none
+            )
+
+        SetTextInput string ->
+            ( { model | textInput = string }, Cmd.none )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+view : (Msg -> msg) -> Style style msg -> Model -> Element msg
+view msgMapper style model =
+    [ { chips =
+            model.chipTextInput
+                |> Set.toList
+                |> List.map
+                    (\string ->
+                        { icon = Element.none
+                        , text = string
+                        , onPress =
+                            string
+                                |> ToggleTextInputChip
+                                |> msgMapper
+                                |> Just
+                        }
+                    )
+      , text = model.textInput
+      , placeholder = Nothing
+      , label = "Chips"
+      , onChange = SetTextInput >> msgMapper
+      }
+        |> Widget.textInput style.textInput
+    , model.chipTextInput
+        |> Set.diff
+            ([ "A", "B", "C" ]
+                |> Set.fromList
+            )
+        |> Set.toList
+        |> List.map
+            (\string ->
+                Widget.button style.textInput.chipButton
+                    { onPress =
+                        string
+                            |> ToggleTextInputChip
+                            |> msgMapper
+                            |> Just
+                    , text = string
+                    , icon = Element.none
+                    }
+            )
+        |> Element.wrappedRow [ Element.spacing 10 ]
+    ]
+        |> Widget.column style.column
diff --git a/example/src/Icons.elm b/example/src/Icons.elm
index be94eae..de4dd0d 100644
--- a/example/src/Icons.elm
+++ b/example/src/Icons.elm
@@ -3,148 +3,205 @@ module Icons exposing
     , chevronDown
     , chevronLeft
     , chevronRight
+    , chevronUp
     , circle
     , github
     , menu
     , moreVertical
+    , penTool
     , repeat
     , search
     , slash
     , square
     , triangle
-    , chevronUp
-    , penTool
     )
 
 import Html exposing (Html)
 import Svg exposing (Svg, svg)
-import Svg.Attributes exposing (..)
+import Svg.Attributes as Attributes
 
 
 svgFeatherIcon : String -> List (Svg msg) -> Html msg
 svgFeatherIcon className =
     svg
-        [ class <| "feather feather-" ++ className
-        , fill "none"
-        , height "16"
-        , stroke "currentColor"
-        , strokeLinecap "round"
-        , strokeLinejoin "round"
-        , strokeWidth "2"
-        , viewBox "0 0 24 24"
-        , width "16"
+        [ Attributes.class <| "feather feather-" ++ className
+        , Attributes.fill "none"
+        , Attributes.height "16"
+        , Attributes.stroke "currentColor"
+        , Attributes.strokeLinecap "round"
+        , Attributes.strokeLinejoin "round"
+        , Attributes.strokeWidth "2"
+        , Attributes.viewBox "0 0 24 24"
+        , Attributes.width "16"
         ]
 
 
 chevronDown : Html msg
 chevronDown =
     svgFeatherIcon "chevron-down"
-        [ Svg.polyline [ points "6 9 12 15 18 9" ] []
+        [ Svg.polyline [ Attributes.points "6 9 12 15 18 9" ] []
         ]
 
 
 chevronRight : Html msg
 chevronRight =
     svgFeatherIcon "chevron-right"
-        [ Svg.polyline [ points "9 18 15 12 9 6" ] []
+        [ Svg.polyline [ Attributes.points "9 18 15 12 9 6" ] []
         ]
 
 
 chevronLeft : Html msg
 chevronLeft =
     svgFeatherIcon "chevron-left"
-        [ Svg.polyline [ points "15 18 9 12 15 6" ] []
+        [ Svg.polyline [ Attributes.points "15 18 9 12 15 6" ] []
         ]
 
+
 chevronUp : Html msg
 chevronUp =
     svgFeatherIcon "chevron-up"
-        [ Svg.polyline [ points "18 15 12 9 6 15" ] []
+        [ Svg.polyline [ Attributes.points "18 15 12 9 6 15" ] []
         ]
 
+
 repeat : Html msg
 repeat =
     svgFeatherIcon "repeat"
-        [ Svg.polyline [ points "17 1 21 5 17 9" ] []
-        , Svg.path [ d "M3 11V9a4 4 0 0 1 4-4h14" ] []
-        , Svg.polyline [ points "7 23 3 19 7 15" ] []
-        , Svg.path [ d "M21 13v2a4 4 0 0 1-4 4H3" ] []
+        [ Svg.polyline [ Attributes.points "17 1 21 5 17 9" ] []
+        , Svg.path [ Attributes.d "M3 11V9a4 4 0 0 1 4-4h14" ] []
+        , Svg.polyline [ Attributes.points "7 23 3 19 7 15" ] []
+        , Svg.path [ Attributes.d "M21 13v2a4 4 0 0 1-4 4H3" ] []
         ]
 
+
 penTool : Html msg
 penTool =
     svgFeatherIcon "pen-tool"
-        [ Svg.path [ d "M12 19l7-7 3 3-7 7-3-3z" ] []
-        , Svg.path [ d "M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" ] []
-        , Svg.path [ d "M2 2l7.586 7.586" ] []
-        , Svg.circle [ cx "11", cy "11", r "2" ] []
+        [ Svg.path [ Attributes.d "M12 19l7-7 3 3-7 7-3-3z" ] []
+        , Svg.path [ Attributes.d "M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" ] []
+        , Svg.path [ Attributes.d "M2 2l7.586 7.586" ] []
+        , Svg.circle
+            [ Attributes.cx "11"
+            , Attributes.cy "11"
+            , Attributes.r "2"
+            ]
+            []
         ]
 
+
 book : Html msg
 book =
     svgFeatherIcon "book"
-        [ Svg.path [ d "M4 19.5A2.5 2.5 0 0 1 6.5 17H20" ] []
-        , Svg.path [ d "M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" ] []
+        [ Svg.path [ Attributes.d "M4 19.5A2.5 2.5 0 0 1 6.5 17H20" ] []
+        , Svg.path [ Attributes.d "M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" ] []
         ]
 
 
 github : Html msg
 github =
     svgFeatherIcon "github"
-        [ Svg.path [ d "M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" ] []
+        [ Svg.path [ Attributes.d "M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" ] []
         ]
 
 
 menu : Html msg
 menu =
     svgFeatherIcon "menu"
-        [ Svg.line [ x1 "3", y1 "12", x2 "21", y2 "12" ] []
-        , Svg.line [ x1 "3", y1 "6", x2 "21", y2 "6" ] []
-        , Svg.line [ x1 "3", y1 "18", x2 "21", y2 "18" ] []
+        [ Svg.line
+            [ Attributes.x1 "3"
+            , Attributes.y1 "12"
+            , Attributes.x2 "21"
+            , Attributes.y2 "12"
+            ]
+            []
+        , Svg.line
+            [ Attributes.x1 "3"
+            , Attributes.y1 "6"
+            , Attributes.x2 "21"
+            , Attributes.y2 "6"
+            ]
+            []
+        , Svg.line
+            [ Attributes.x1 "3"
+            , Attributes.y1 "18"
+            , Attributes.x2 "21"
+            , Attributes.y2 "18"
+            ]
+            []
         ]
 
 
 moreVertical : Html msg
 moreVertical =
     svgFeatherIcon "more-vertical"
-        [ Svg.circle [ cx "12", cy "12", r "1" ] []
-        , Svg.circle [ cx "12", cy "5", r "1" ] []
-        , Svg.circle [ cx "12", cy "19", r "1" ] []
+        [ Svg.circle [ Attributes.cx "12", Attributes.cy "12", Attributes.r "1" ] []
+        , Svg.circle [ Attributes.cx "12", Attributes.cy "5", Attributes.r "1" ] []
+        , Svg.circle [ Attributes.cx "12", Attributes.cy "19", Attributes.r "1" ] []
         ]
 
 
 circle : Html msg
 circle =
     svgFeatherIcon "circle"
-        [ Svg.circle [ cx "12", cy "12", r "10" ] []
+        [ Svg.circle [ Attributes.cx "12", Attributes.cy "12", Attributes.r "10" ] []
         ]
 
 
 slash : Html msg
 slash =
     svgFeatherIcon "slash"
-        [ Svg.circle [ cx "12", cy "12", r "10" ] []
-        , Svg.line [ x1 "4.93", y1 "4.93", x2 "19.07", y2 "19.07" ] []
+        [ Svg.circle
+            [ Attributes.cx "12"
+            , Attributes.cy "12"
+            , Attributes.r "10"
+            ]
+            []
+        , Svg.line
+            [ Attributes.x1 "4.93"
+            , Attributes.y1 "4.93"
+            , Attributes.x2 "19.07"
+            , Attributes.y2 "19.07"
+            ]
+            []
         ]
 
 
 triangle : Html msg
 triangle =
     svgFeatherIcon "triangle"
-        [ Svg.path [ d "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" ] []
+        [ Svg.path [ Attributes.d "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" ] []
         ]
 
 
 square : Html msg
 square =
     svgFeatherIcon "square"
-        [ Svg.rect [ Svg.Attributes.x "3", y "3", width "18", height "18", rx "2", ry "2" ] []
+        [ Svg.rect
+            [ Attributes.x "3"
+            , Attributes.y "3"
+            , Attributes.width "18"
+            , Attributes.height "18"
+            , Attributes.rx "2"
+            , Attributes.ry "2"
+            ]
+            []
         ]
 
 
 search : Html msg
 search =
     svgFeatherIcon "search"
-        [ Svg.circle [ cx "11", cy "11", r "8" ] []
-        , Svg.line [ x1 "21", y1 "21", x2 "16.65", y2 "16.65" ] []
+        [ Svg.circle
+            [ Attributes.cx "11"
+            , Attributes.cy "11"
+            , Attributes.r "8"
+            ]
+            []
+        , Svg.line
+            [ Attributes.x1 "21"
+            , Attributes.y1 "21"
+            , Attributes.x2 "16.65"
+            , Attributes.y2 "16.65"
+            ]
+            []
         ]
diff --git a/example/src/Main.elm b/example/src/Main.elm
index 10dc053..8c6895f 100644
--- a/example/src/Main.elm
+++ b/example/src/Main.elm
@@ -6,34 +6,21 @@ import Browser.Dom as Dom exposing (Viewport)
 import Browser.Events as Events
 import Browser.Navigation as Navigation
 import Data.Section as Section exposing (Section(..))
-import Data.Style as Style exposing (Style)
+import Data.Style exposing (Style)
 import Data.Theme as Theme exposing (Theme(..))
-import Element exposing (Attribute, DeviceClass(..), Element)
-import Element.Border as Border
-import Element.Font as Font
-import Element.Input as Input
+import Element exposing (DeviceClass(..))
 import Framework
-import Framework.Button as Button
-import Framework.Card as Card
-import Framework.Color as Color
 import Framework.Grid as Grid
-import Framework.Group as Group
 import Framework.Heading as Heading
-import Framework.Input as Input
-import Framework.Tag as Tag
 import Html exposing (Html)
-import Html.Attributes as Attributes
 import Icons
-import Layout exposing (Layout, Part)
 import Reusable
-import Set exposing (Set)
 import Stateless
 import Task
 import Time
 import Widget
+import Widget.Layout as Layout exposing (Layout, Part)
 import Widget.ScrollingNav as ScrollingNav
-import Widget.Snackbar as Snackbar
-import Widget.Style exposing (ButtonStyle)
 
 
 type alias LoadedModel =
@@ -41,7 +28,10 @@ type alias LoadedModel =
     , scrollingNav : ScrollingNav.Model Section
     , layout : Layout LoadedMsg
     , displayDialog : Bool
-    , window : { height : Int, width : Int }
+    , window :
+        { height : Int
+        , width : Int
+        }
     , search :
         { raw : String
         , current : String
@@ -110,7 +100,7 @@ initialModel { viewport } =
             , current = ""
             , remaining = 0
             }
-      , theme = ElmUiFramework
+      , theme = Material
       }
     , [ cmd
       , statelessCmd |> Cmd.map StatelessSpecific
@@ -171,17 +161,17 @@ view model =
                                     (\section ->
                                         (case section of
                                             ReusableViews ->
-                                                Reusable.view m.theme
-                                                    { addSnackbar = AddSnackbar
+                                                Reusable.view
+                                                    { theme = m.theme
+                                                    , addSnackbar = AddSnackbar
                                                     }
 
                                             StatelessViews ->
-                                                Stateless.view m.theme
-                                                    { msgMapper = StatelessSpecific
-                                                    , showDialog = ToggleDialog True
-                                                    , changedSheet = ChangedSidebar
+                                                Stateless.view
+                                                    { theme = m.theme
+                                                    , msgMapper = StatelessSpecific
+                                                    , model = m.stateless
                                                     }
-                                                    m.stateless
                                         )
                                             |> (\{ title, description, items } ->
                                                     [ Element.el Heading.h2 <| Element.text <| title
@@ -213,12 +203,17 @@ view model =
                                                                   ]
                                                                     |> Element.column Grid.simple
                                                                 , more
-                                                                    |> Element.el [ Element.height <| Element.fill ]
+                                                                    |> Element.el
+                                                                        [ Element.width <| Element.fill
+                                                                        ]
                                                                 ]
                                                                     |> Widget.column style.cardColumn
                                                             )
                                                         |> Element.wrappedRow
-                                                            (Grid.simple ++ [ Element.height <| Element.shrink ])
+                                                            (Grid.simple
+                                                                ++ [ Element.height <| Element.shrink
+                                                                   ]
+                                                            )
                                                     ]
                                                         |> Element.column (Grid.section ++ [ Element.centerX ])
                                                )
@@ -266,6 +261,15 @@ view model =
                           , text = "Template Theme"
                           , icon = Icons.penTool |> Element.html |> Element.el []
                           }
+                        , { onPress =
+                                if m.theme /= Material then
+                                    Just <| SetTheme <| Material
+
+                                else
+                                    Nothing
+                          , text = "Material Theme"
+                          , icon = Icons.penTool |> Element.html |> Element.el []
+                          }
                         , { onPress = Nothing
                           , text = "Placeholder"
                           , icon = Icons.circle |> Element.html |> Element.el []
@@ -428,7 +432,7 @@ update msg model =
 
 
 subscriptions : Model -> Sub Msg
-subscriptions model =
+subscriptions _ =
     Sub.batch
         [ Time.every 50 (always (TimePassed 50))
         , Events.onResize (\h w -> Resized { height = h, width = w })
diff --git a/example/src/Reusable.elm b/example/src/Reusable.elm
index cf8e3fa..9587b86 100644
--- a/example/src/Reusable.elm
+++ b/example/src/Reusable.elm
@@ -1,40 +1,13 @@
-module Reusable exposing ( view)
+module Reusable exposing (view)
 
-import Browser
-import Element exposing (Color, Element)
-import Element.Background as Background
-import Element.Font as Font
-import Element.Input as Input
-import Framework
-import Framework.Button as Button
-import Framework.Card as Card
-import Framework.Color as Color
-import Framework.Grid as Grid
-import Framework.Group as Group
-import Framework.Heading as Heading
-import Framework.Input as Input
-import Framework.Tag as Tag
-import Heroicons.Solid as Heroicons
-import Html exposing (Html)
-import Html.Attributes as Attributes
-import Set exposing (Set)
-import Time
-import Widget
-import Widget.ScrollingNav as ScrollingNav
-import Widget.Snackbar as Snackbar
 import Data.Style exposing (Style)
 import Data.Theme as Theme exposing (Theme)
+import Element exposing (Element)
+import Framework.Grid as Grid
+import Widget
 
 
-type alias Item =
-    { name : String
-    , amount : Int
-    , price : Float
-    }
-
-
-
-snackbar : Style msg -> (( String, Bool ) -> msg) -> ( String, Element msg,Element msg )
+snackbar : Style msg -> (( String, Bool ) -> msg) -> ( String, Element msg, Element msg )
 snackbar style addSnackbar =
     ( "Snackbar"
     , [ Widget.button style.button
@@ -45,7 +18,7 @@ snackbar style addSnackbar =
                         , False
                         )
             , text = "Add Notification"
-            , icon =Element.none
+            , icon = Element.none
             }
       , Widget.button style.button
             { onPress =
@@ -63,11 +36,8 @@ snackbar style addSnackbar =
     )
 
 
-
-
-
 scrollingNavCard : Style msg -> ( String, Element msg, Element msg )
-scrollingNavCard style =
+scrollingNavCard _ =
     ( "Scrolling Nav"
     , Element.text "Resize the screen and open the side-menu. Then start scrolling to see the scrolling navigation in action."
         |> List.singleton
@@ -76,23 +46,35 @@ scrollingNavCard style =
     )
 
 
+layout : Style msg -> ( String, Element msg, Element msg )
+layout _ =
+    ( "Layout"
+    , Element.text "The layout combines the menu bar, both side bar, the dialog window and the snackbar. Try using all of them and also try resizing the window to see how they interact with each other."
+        |> List.singleton
+        |> Element.paragraph []
+    , Element.none
+    )
+
+
 view :
-    Theme ->
-    { addSnackbar : ( String, Bool ) -> msg
+    { theme : Theme
+    , addSnackbar : ( String, Bool ) -> msg
     }
     ->
         { title : String
         , description : String
-        , items : List ( String, Element msg,Element msg )
+        , items : List ( String, Element msg, Element msg )
         }
-view theme { addSnackbar } =
+view { theme, addSnackbar } =
     let
-        style = Theme.toStyle theme
+        style =
+            Theme.toStyle theme
     in
     { title = "Reusable Views"
     , description = "Reusable views have an internal state but no update function. You will need to do some wiring, but nothing complicated."
     , items =
         [ snackbar style addSnackbar
         , scrollingNavCard style
+        , layout style
         ]
     }
diff --git a/example/src/Stateless.elm b/example/src/Stateless.elm
index c70301c..65d4b30 100644
--- a/example/src/Stateless.elm
+++ b/example/src/Stateless.elm
@@ -1,37 +1,19 @@
 module Stateless exposing (Model, Msg, init, update, view)
 
-import Array
 import Data.Example as Example
-import Data.Style exposing (Style)
 import Data.Theme as Theme exposing (Theme)
 import Element exposing (Element)
-import Element.Background as Background
-import Framework.Card as Card
-import Framework.Color as Color
-import Framework.Grid as Grid
-import Heroicons.Solid as Heroicons
-import Html.Attributes as Attributes
-import Icons
-import Layout exposing (Part(..))
-import Set exposing (Set)
-import Widget
+import Widget.Layout exposing (Part(..))
 
 
 type alias Model =
-    { chipTextInput : Set String
-    , carousel : Int
-    , textInput : String
-    , table : { title : String, asc : Bool }
+    { carousel : Int
     , example : Example.Model
     }
 
 
 type Msg
-    = ToggleTextInputChip String
-    | SetCarousel Int
-    | SetTextInput String
-    | ChangedSorting String
-    | ExampleSpecific Example.Msg
+    = ExampleSpecific Example.Msg
     | Idle
 
 
@@ -41,10 +23,7 @@ init =
         ( example, cmd ) =
             Example.init
     in
-    ( { chipTextInput = Set.empty
-      , carousel = 0
-      , textInput = ""
-      , table = { title = "Name", asc = True }
+    ( { carousel = 0
       , example = example
       }
     , cmd |> Cmd.map ExampleSpecific
@@ -63,310 +42,24 @@ update msg model =
             , exampleCmd |> Cmd.map ExampleSpecific
             )
 
-        ToggleTextInputChip string ->
-            ( { model
-                | chipTextInput =
-                    model.chipTextInput
-                        |> (if model.chipTextInput |> Set.member string then
-                                Set.remove string
-
-                            else
-                                Set.insert string
-                           )
-              }
-            , Cmd.none
-            )
-
-        SetCarousel int ->
-            ( if (int < 0) || (int > 3) then
-                model
-
-              else
-                { model
-                    | carousel = int
-                }
-            , Cmd.none
-            )
-
-        SetTextInput string ->
-            ( { model | textInput = string }, Cmd.none )
-
-        ChangedSorting string ->
-            ( { model
-                | table =
-                    { title = string
-                    , asc =
-                        if model.table.title == string then
-                            not model.table.asc
-
-                        else
-                            True
-                    }
-              }
-            , Cmd.none
-            )
-
         Idle ->
             ( model, Cmd.none )
 
 
-modal : Style msg -> (Maybe Part -> msg) -> Model -> ( String, Element msg, Element msg )
-modal style changedSheet _ =
-    ( "Modal"
-    , [ Widget.button style.button
-            { onPress = Just <| changedSheet <| Just LeftSheet
-            , text = "show left sheet"
-            , icon = Element.none
-            }
-      , Widget.button style.button
-            { onPress = Just <| changedSheet <| Just RightSheet
-            , text = "show right sheet"
-            , icon = Element.none
-            }
-      ]
-        |> Element.column Grid.simple
-    , Element.none
-    )
-
-
-dialog : Style msg -> msg -> Model -> ( String, Element msg, Element msg )
-dialog style showDialog _ =
-    ( "Dialog"
-    , Widget.button style.button
-        { onPress = Just showDialog
-        , text = "Show dialog"
-        , icon = Element.none
-        }
-    , Element.none
-    )
-
-
-carousel : Style Msg -> Model -> ( String, Element Msg, Element Msg )
-carousel style model =
-    ( "Carousel"
-    , Widget.carousel
-        { content = ( Color.cyan, [ Color.yellow, Color.green, Color.red ] |> Array.fromList )
-        , current = model.carousel
-        , label =
-            \c ->
-                [ Element.el [ Element.centerY ] <|
-                    Widget.iconButton style.button
-                        { onPress =
-                            model.carousel
-                                - 1
-                                |> (\i ->
-                                        if i < 0 then
-                                            Nothing
-
-                                        else
-                                            SetCarousel i
-                                                |> Just
-                                   )
-                        , icon =
-                            Icons.chevronLeft
-                                |> Element.html
-                                |> Element.el []
-                        , text = "Previous"
-                        }
-                , Element.el
-                    (Card.simple
-                        ++ [ Background.color <| c
-                           , Element.height <| Element.px <| 100
-                           , Element.width <| Element.px <| 100
-                           ]
-                    )
-                  <|
-                    Element.none
-                , Element.el [ Element.centerY ] <|
-                    Widget.iconButton style.button
-                        { onPress =
-                            model.carousel
-                                + 1
-                                |> (\i ->
-                                        if i >= 4 then
-                                            Nothing
-
-                                        else
-                                            SetCarousel i
-                                                |> Just
-                                   )
-                        , icon =
-                            Icons.chevronRight
-                                |> Element.html
-                                |> Element.el []
-                        , text = "Next"
-                        }
-                ]
-                    |> Element.row (Grid.simple ++ [ Element.centerX, Element.width <| Element.shrink ])
-        }
-    , Element.none
-    )
-
-
-textInput : Style Msg -> Model -> ( String, Element Msg, Element Msg )
-textInput style model =
-    ( "Chip Text Input"
-    , [ { chips =
-            model.chipTextInput
-                |> Set.toList
-                |> List.map
-                    (\string ->
-                        { icon = Element.none
-                        , text = string
-                        , onPress =
-                            string
-                                |> ToggleTextInputChip
-                                |> Just
-                        }
-                    )
-        , text = model.textInput
-        , placeholder = Nothing
-        , label = "Chips"
-        , onChange = SetTextInput
-        }
-            |> Widget.textInput style.textInput
-      , model.chipTextInput
-            |> Set.diff
-                ([ "A", "B", "C" ]
-                    |> Set.fromList
-                )
-            |> Set.toList
-            |> List.map
-                (\string ->
-                    Widget.button style.textInput.chipButton
-                        { onPress =
-                            string
-                                |> ToggleTextInputChip
-                                |> Just
-                        , text = string
-                        , icon = Element.none
-                        }
-                )
-            |> Element.wrappedRow [ Element.spacing 10 ]
-      ]
-        |> Element.column Grid.simple
-    , [ Element.row Grid.spacedEvenly
-            [ "Nothing Selected"
-                |> Element.text
-                |> Element.el [ Element.width <| Element.fill ]
-            , { chips = []
-              , text = ""
-              , placeholder = Nothing
-              , label = "Label"
-              , onChange = always Idle
-              }
-                |> Widget.textInput style.textInput
-            ]
-      , Element.row Grid.spacedEvenly
-            [ "Some chips"
-                |> Element.text
-                |> Element.el [ Element.width <| Element.fill ]
-            , { chips =
-                    [ { icon = Icons.triangle |> Element.html |> Element.el []
-                      , text = "A"
-                      , onPress = Just Idle
-                      }
-                    , { icon = Icons.circle |> Element.html |> Element.el []
-                      , text = "B"
-                      , onPress = Just Idle
-                      }
-                    ]
-              , text = ""
-              , placeholder = Nothing
-              , label = "Label"
-              , onChange = always Idle
-              }
-                |> Widget.textInput style.textInput
-            ]
-      ]
-        |> Element.column Grid.simple
-    )
-
-
-list : Style Msg -> Model -> ( String, Element Msg, Element Msg )
-list style _ =
-    ( "List"
-    , [ Element.text <| "A"
-      , Element.text <| "B"
-      , Element.text <| "C"
-      ]
-        |> Widget.column style.cardColumn
-    , Element.none
-    )
-
-
-sortTable : Style Msg -> Model -> ( String, Element Msg, Element Msg )
-sortTable _ model =
-    ( "Sort Table"
-    , Widget.sortTable
-        { containerTable = Grid.simple
-        , headerButton =
-            { container = []
-            , labelRow = []
-            , ifDisabled = []
-            , ifActive = []
-            }
-        , ascIcon = Heroicons.cheveronUp [ Attributes.width 16 ] |> Element.html
-        , descIcon = Heroicons.cheveronDown [ Attributes.width 16 ] |> Element.html
-        , defaultIcon = Element.none
-        }
-        { content =
-            [ { id = 1, name = "Antonio", rating = 2.456 }
-            , { id = 2, name = "Ana", rating = 1.34 }
-            , { id = 3, name = "Alfred", rating = 4.22 }
-            , { id = 4, name = "Thomas", rating = 3 }
-            ]
-        , columns =
-            [ Widget.intColumn
-                { title = "Id"
-                , value = .id
-                , toString = \int -> "#" ++ String.fromInt int
-                , width = Element.fill
-                }
-            , Widget.stringColumn
-                { title = "Name"
-                , value = .name
-                , toString = identity
-                , width = Element.fill
-                }
-            , Widget.floatColumn
-                { title = "rating"
-                , value = .rating
-                , toString = String.fromFloat
-                , width = Element.fill
-                }
-            ]
-        , asc = model.table.asc
-        , sortBy = model.table.title
-        , onChange = ChangedSorting
-        }
-    , Element.none
-    )
-
-
 view :
-    Theme
-    ->
-        { msgMapper : Msg -> msg
-        , showDialog : msg
-        , changedSheet : Maybe Part -> msg
-        }
-    -> Model
+    { theme : Theme
+    , msgMapper : Msg -> msg
+    , model : Model
+    }
     ->
         { title : String
         , description : String
         , items : List ( String, Element msg, Element msg )
         }
-view theme { msgMapper, showDialog, changedSheet } model =
+view { theme, msgMapper, model } =
     let
         style =
             Theme.toStyle theme
-
-        map ( a, b, c ) =
-            ( a
-            , b |> Element.map msgMapper
-            , c |> Element.map msgMapper
-            )
     in
     { title = "Stateless Views"
     , description = "Stateless views are simple functions that view some content. No wiring required."
@@ -377,11 +70,4 @@ view theme { msgMapper, showDialog, changedSheet } model =
             , style = style
             , model = model.example
             }
-            ++ [ modal style changedSheet model
-               , carousel style model |> map
-               , dialog style showDialog model
-               , textInput style model |> map
-               , list style model |> map
-               , sortTable style model |> map
-               ]
     }
diff --git a/example/src/View/Test.elm b/example/src/View/Test.elm
index 2264e7f..d239459 100644
--- a/example/src/View/Test.elm
+++ b/example/src/View/Test.elm
@@ -1,339 +1,280 @@
-module View.Test exposing (expansionPanel, iconButton, multiSelect, select, tab)
+module View.Test exposing (button, dialog, expansionPanel, list, modal, multiSelect, select, sortTable, tab, textInput)
 
-import Array
 import Data.Style exposing (Style)
-import Data.Theme as Theme exposing (Theme)
 import Element exposing (Element)
-import Element.Background as Background
-import Framework.Card as Card
-import Framework.Color as Color
-import Framework.Grid as Grid
-import Heroicons.Solid as Heroicons
-import Html.Attributes as Attributes
 import Icons
-import Layout exposing (Part(..))
-import Set exposing (Set)
+import Set
 import Widget
+import Widget.Layout exposing (Part(..))
 
 
-iconButton : msg -> Style msg -> List (Element msg)
-iconButton idle style =
-    [ Element.row Grid.spacedEvenly
-        [ "Button"
-            |> Element.text
-        , Widget.button style.button
+button : msg -> Style msg -> List ( String, Element msg )
+button idle style =
+    [ ( "Button"
+      , Widget.button style.button
             { text = "Button"
             , icon = Icons.triangle |> Element.html |> Element.el []
             , onPress = Just idle
             }
-        ]
-    , Element.row Grid.spacedEvenly
-        [ "Text button"
-            |> Element.text
-        , Widget.textButton style.button
+      )
+    , ( "Text button"
+      , Widget.textButton style.button
             { text = "Button"
             , onPress = Just idle
             }
-        ]
-    , Element.row Grid.spacedEvenly
-        [ "Icon button"
-            |> Element.text
-        , Widget.iconButton style.button
+      )
+    , ( "Icon button"
+      , Widget.iconButton style.button
             { text = "Button"
             , icon = Icons.triangle |> Element.html |> Element.el []
             , onPress = Just idle
             }
-        ]
-    , Element.row Grid.spacedEvenly
-        [ "Disabled button"
-            |> Element.text
-        , Widget.button style.button
+      )
+    , ( "Disabled button"
+      , Widget.button style.button
             { text = "Button"
             , icon = Icons.triangle |> Element.html |> Element.el []
             , onPress = Nothing
             }
-        ]
-    , Element.row Grid.spacedEvenly
-        [ "Inactive Select button"
-            |> Element.text
-        , Widget.selectButton style.button
+      )
+    , ( "Inactive Select button"
+      , Widget.selectButton style.button
             ( False
             , { text = "Button"
               , icon = Icons.triangle |> Element.html |> Element.el []
               , onPress = Just idle
               }
             )
-        ]
-    , Element.row Grid.spacedEvenly
-        [ "Active Select button"
-            |> Element.text
-        , Widget.selectButton style.button
+      )
+    , ( "Active Select button"
+      , Widget.selectButton style.button
             ( True
             , { text = "Button"
               , icon = Icons.triangle |> Element.html |> Element.el []
               , onPress = Just idle
               }
             )
-        ]
+      )
     ]
 
 
-select : msg -> Style msg -> List (Element msg)
+select : msg -> Style msg -> List ( String, Element msg )
 select idle style =
-    [ Element.row Grid.spacedEvenly
-        [ "First selected"
-            |> Element.text
-            |> Element.el [ Element.width <| Element.fill ]
-        , { selected = Just 0
-          , options =
-                [ 1, 2, 42 ]
-                    |> List.map
-                        (\int ->
-                            { text = String.fromInt int
-                            , icon = Element.none
-                            }
-                        )
-          , onSelect = always idle >> Just
-          }
+    [ ( "First selected"
+      , { selected = Just 0
+        , options =
+            [ 1, 2, 42 ]
+                |> List.map
+                    (\int ->
+                        { text = String.fromInt int
+                        , icon = Element.none
+                        }
+                    )
+        , onSelect = always idle >> Just
+        }
             |> Widget.select
             |> Widget.buttonRow
                 { list = style.row
                 , button = style.button
                 }
-        ]
-    , Element.row Grid.spacedEvenly
-        [ "Nothing selected"
-            |> Element.text
-            |> Element.el [ Element.width <| Element.fill ]
-        , { selected = Nothing
-          , options =
-                [ 1, 2, 42 ]
-                    |> List.map
-                        (\int ->
-                            { text = String.fromInt int
-                            , icon = Element.none
-                            }
-                        )
-          , onSelect = always idle >> Just
-          }
+      )
+    , ( "Nothing selected"
+      , { selected = Nothing
+        , options =
+            [ 1, 2, 42 ]
+                |> List.map
+                    (\int ->
+                        { text = String.fromInt int
+                        , icon = Element.none
+                        }
+                    )
+        , onSelect = always idle >> Just
+        }
             |> Widget.select
             |> Widget.buttonRow
                 { list = style.row
                 , button = style.button
                 }
-        ]
-    , Element.row Grid.spacedEvenly
-        [ "Invalid selection"
-            |> Element.text
-            |> Element.el [ Element.width <| Element.fill ]
-        , { selected = Just -1
-          , options =
-                [ 1, 2, 42 ]
-                    |> List.map
-                        (\int ->
-                            { text = String.fromInt int
-                            , icon = Element.none
-                            }
-                        )
-          , onSelect = always idle >> Just
-          }
+      )
+    , ( "Invalid selection"
+      , { selected = Just -1
+        , options =
+            [ 1, 2, 42 ]
+                |> List.map
+                    (\int ->
+                        { text = String.fromInt int
+                        , icon = Element.none
+                        }
+                    )
+        , onSelect = always idle >> Just
+        }
             |> Widget.select
             |> Widget.buttonRow
                 { list = style.row
                 , button = style.button
                 }
-        ]
-    , Element.row Grid.spacedEvenly
-        [ "Disabled selection"
-            |> Element.text
-            |> Element.el [ Element.width <| Element.fill ]
-        , { selected = Just 0
-          , options =
-                [ 1, 2, 42 ]
-                    |> List.map
-                        (\int ->
-                            { text = String.fromInt int
-                            , icon = Element.none
-                            }
-                        )
-          , onSelect = always Nothing
-          }
+      )
+    , ( "Disabled selection"
+      , { selected = Just 0
+        , options =
+            [ 1, 2, 42 ]
+                |> List.map
+                    (\int ->
+                        { text = String.fromInt int
+                        , icon = Element.none
+                        }
+                    )
+        , onSelect = always Nothing
+        }
             |> Widget.select
             |> Widget.buttonRow
                 { list = style.row
                 , button = style.button
                 }
-        ]
-    , Element.row Grid.spacedEvenly
-        [ "Empty Options"
-            |> Element.text
-            |> Element.el [ Element.width <| Element.fill ]
-        , { selected = Nothing
-          , options =
-                []
-                    |> List.map
-                        (\int ->
-                            { text = String.fromInt int
-                            , icon = Element.none
-                            }
-                        )
-          , onSelect = always idle >> Just
-          }
+      )
+    , ( "Empty Options"
+      , { selected = Nothing
+        , options =
+            []
+                |> List.map
+                    (\int ->
+                        { text = String.fromInt int
+                        , icon = Element.none
+                        }
+                    )
+        , onSelect = always idle >> Just
+        }
             |> Widget.select
             |> Widget.buttonRow
                 { list = style.row
                 , button = style.button
                 }
-        ]
+      )
     ]
 
 
-multiSelect : msg -> Style msg -> List (Element msg)
+multiSelect : msg -> Style msg -> List ( String, Element msg )
 multiSelect idle style =
-    [ Element.row Grid.spacedEvenly
-        [ "Some selected"
-            |> Element.text
-            |> Element.el [ Element.width <| Element.fill ]
-        , { selected = Set.fromList [ 0, 1 ]
-          , options =
-                [ 1, 2, 42 ]
-                    |> List.map
-                        (\int ->
-                            { text = String.fromInt int
-                            , icon = Element.none
-                            }
-                        )
-          , onSelect = always idle >> Just
-          }
+    [ ( "Some selected"
+      , { selected = Set.fromList [ 0, 1 ]
+        , options =
+            [ 1, 2, 42 ]
+                |> List.map
+                    (\int ->
+                        { text = String.fromInt int
+                        , icon = Element.none
+                        }
+                    )
+        , onSelect = always idle >> Just
+        }
             |> Widget.multiSelect
             |> Widget.buttonRow
                 { list = style.row
                 , button = style.button
                 }
-        ]
-    , Element.row Grid.spacedEvenly
-        [ "Nothing selected"
-            |> Element.text
-            |> Element.el [ Element.width <| Element.fill ]
-        , { selected = Set.empty
-          , options =
-                [ 1, 2, 42 ]
-                    |> List.map
-                        (\int ->
-                            { text = String.fromInt int
-                            , icon = Element.none
-                            }
-                        )
-          , onSelect = always idle >> Just
-          }
+      )
+    , ( "Nothing selected"
+      , { selected = Set.empty
+        , options =
+            [ 1, 2, 42 ]
+                |> List.map
+                    (\int ->
+                        { text = String.fromInt int
+                        , icon = Element.none
+                        }
+                    )
+        , onSelect = always idle >> Just
+        }
             |> Widget.multiSelect
             |> Widget.buttonRow
                 { list = style.row
                 , button = style.button
                 }
-        ]
-    , Element.row Grid.spacedEvenly
-        [ "Invalid selection"
-            |> Element.text
-            |> Element.el [ Element.width <| Element.fill ]
-        , { selected = Set.singleton -1
-          , options =
-                [ 1, 2, 42 ]
-                    |> List.map
-                        (\int ->
-                            { text = String.fromInt int
-                            , icon = Element.none
-                            }
-                        )
-          , onSelect = always idle >> Just
-          }
+      )
+    , ( "Invalid selection"
+      , { selected = Set.singleton -1
+        , options =
+            [ 1, 2, 42 ]
+                |> List.map
+                    (\int ->
+                        { text = String.fromInt int
+                        , icon = Element.none
+                        }
+                    )
+        , onSelect = always idle >> Just
+        }
             |> Widget.multiSelect
             |> Widget.buttonRow
                 { list = style.row
                 , button = style.button
                 }
-        ]
-    , Element.row Grid.spacedEvenly
-        [ "Disabled selection"
-            |> Element.text
-            |> Element.el [ Element.width <| Element.fill ]
-        , { selected = Set.singleton 0
-          , options =
-                [ 1, 2, 42 ]
-                    |> List.map
-                        (\int ->
-                            { text = String.fromInt int
-                            , icon = Element.none
-                            }
-                        )
-          , onSelect = always Nothing
-          }
+      )
+    , ( "Disabled selection"
+      , { selected = Set.singleton 0
+        , options =
+            [ 1, 2, 42 ]
+                |> List.map
+                    (\int ->
+                        { text = String.fromInt int
+                        , icon = Element.none
+                        }
+                    )
+        , onSelect = always Nothing
+        }
             |> Widget.multiSelect
             |> Widget.buttonRow
                 { list = style.row
                 , button = style.button
                 }
-        ]
-    , Element.row Grid.spacedEvenly
-        [ "Empty Options"
-            |> Element.text
-            |> Element.el [ Element.width <| Element.fill ]
-        , { selected = Set.empty
-          , options =
-                []
-                    |> List.map
-                        (\int ->
-                            { text = String.fromInt int
-                            , icon = Element.none
-                            }
-                        )
-          , onSelect = always idle >> Just
-          }
+      )
+    , ( "Empty Options"
+      , { selected = Set.empty
+        , options =
+            []
+                |> List.map
+                    (\int ->
+                        { text = String.fromInt int
+                        , icon = Element.none
+                        }
+                    )
+        , onSelect = always idle >> Just
+        }
             |> Widget.multiSelect
             |> Widget.buttonRow
                 { list = style.row
                 , button = style.button
                 }
-        ]
+      )
     ]
 
 
-expansionPanel : msg -> Style msg -> List (Element msg)
+expansionPanel : msg -> Style msg -> List ( String, Element msg )
 expansionPanel idle style =
-    [ Element.row Grid.spacedEvenly
-        [ "Collapsed"
-            |> Element.text
-            |> Element.el [ Element.width <| Element.fill ]
-        , { onToggle = always idle
-          , isExpanded = False
-          , icon = Icons.triangle |> Element.html |> Element.el []
-          , text = "Button"
-          , content = Element.text <| "Hidden Message"
-          }
+    [ ( "Collapsed"
+      , { onToggle = always idle
+        , isExpanded = False
+        , icon = Icons.triangle |> Element.html |> Element.el []
+        , text = "Button"
+        , content = Element.text <| "Hidden Message"
+        }
             |> Widget.expansionPanel style.expansionPanel
-        ]
-    , Element.row Grid.spacedEvenly
-        [ "Expanded"
-            |> Element.text
-            |> Element.el [ Element.width <| Element.fill ]
-        , { onToggle = always idle
-          , isExpanded = True
-          , icon = Icons.triangle |> Element.html |> Element.el []
-          , text = "Button"
-          , content = Element.text <| "Hidden Message"
-          }
+      )
+    , ( "Expanded"
+      , { onToggle = always idle
+        , isExpanded = True
+        , icon = Icons.triangle |> Element.html |> Element.el []
+        , text = "Button"
+        , content = Element.text <| "Hidden Message"
+        }
             |> Widget.expansionPanel style.expansionPanel
-        ]
+      )
     ]
 
 
-tab : msg -> Style msg -> List (Element msg)
+tab : msg -> Style msg -> List ( String, Element msg )
 tab idle style =
-    [ Element.row Grid.spacedEvenly
-        [ "Nothing selected"
-            |> Element.text
-            |> Element.el [ Element.width <| Element.fill ]
-        , Widget.tab style.tab
+    [ ( "Nothing selected"
+      , Widget.tab style.tab
             { tabs =
                 { selected = Nothing
                 , options =
@@ -357,12 +298,9 @@ tab idle style =
                     )
                         |> Element.text
             }
-        ]
-    , Element.row Grid.spacedEvenly
-        [ "Tab selected"
-            |> Element.text
-            |> Element.el [ Element.width <| Element.fill ]
-        , Widget.tab style.tab
+      )
+    , ( "Tab selected"
+      , Widget.tab style.tab
             { tabs =
                 { selected = Just 0
                 , options =
@@ -386,5 +324,190 @@ tab idle style =
                     )
                         |> Element.text
             }
-        ]
+      )
+    ]
+
+
+sortTable : msg -> Style msg -> List ( String, Element msg )
+sortTable idle style =
+    [ ( "Int column"
+      , Widget.sortTable style.sortTable
+            { content =
+                [ { id = 1, name = "Antonio", rating = 2.456, hash = Nothing }
+                , { id = 2, name = "Ana", rating = 1.34, hash = Just "45jf" }
+                ]
+            , columns =
+                [ Widget.intColumn
+                    { title = "Id"
+                    , value = .id
+                    , toString = \int -> "#" ++ String.fromInt int
+                    , width = Element.fill
+                    }
+                , Widget.stringColumn
+                    { title = "Name"
+                    , value = .name
+                    , toString = identity
+                    , width = Element.fill
+                    }
+                ]
+            , asc = True
+            , sortBy = "Id"
+            , onChange = always idle
+            }
+      )
+    , ( "Name column"
+      , Widget.sortTable style.sortTable
+            { content =
+                [ { id = 1, name = "Antonio", rating = 2.456, hash = Nothing }
+                , { id = 2, name = "Ana", rating = 1.34, hash = Just "45jf" }
+                ]
+            , columns =
+                [ Widget.stringColumn
+                    { title = "Name"
+                    , value = .name
+                    , toString = identity
+                    , width = Element.fill
+                    }
+                , Widget.floatColumn
+                    { title = "Rating"
+                    , value = .rating
+                    , toString = String.fromFloat
+                    , width = Element.fill
+                    }
+                ]
+            , asc = True
+            , sortBy = "Name"
+            , onChange = always idle
+            }
+      )
+    , ( "Float column"
+      , Widget.sortTable style.sortTable
+            { content =
+                [ { id = 1, name = "Antonio", rating = 2.456, hash = Nothing }
+                , { id = 2, name = "Ana", rating = 1.34, hash = Just "45jf" }
+                ]
+            , columns =
+                [ Widget.floatColumn
+                    { title = "Rating"
+                    , value = .rating
+                    , toString = String.fromFloat
+                    , width = Element.fill
+                    }
+                , Widget.unsortableColumn
+                    { title = "Hash"
+                    , toString = .hash >> Maybe.withDefault "None"
+                    , width = Element.fill
+                    }
+                ]
+            , asc = False
+            , sortBy = "Rating"
+            , onChange = always idle
+            }
+      )
+    , ( "Unsortable column"
+      , Widget.sortTable style.sortTable
+            { content =
+                [ { id = 1, name = "Antonio", rating = 2.456, hash = Nothing }
+                , { id = 2, name = "Ana", rating = 1.34, hash = Just "45jf" }
+                ]
+            , columns =
+                [ Widget.floatColumn
+                    { title = "Rating"
+                    , value = .rating
+                    , toString = String.fromFloat
+                    , width = Element.fill
+                    }
+                , Widget.unsortableColumn
+                    { title = "Hash"
+                    , toString = .hash >> Maybe.withDefault "None"
+                    , width = Element.fill
+                    }
+                ]
+            , asc = True
+            , sortBy = "Hash"
+            , onChange = always idle
+            }
+      )
+    , ( "Empty Table"
+      , Widget.sortTable style.sortTable
+            { content =
+                [ { id = 1, name = "Antonio", rating = 2.456, hash = Nothing }
+                , { id = 2, name = "Ana", rating = 1.34, hash = Just "45jf" }
+                ]
+            , columns = []
+            , asc = True
+            , sortBy = ""
+            , onChange = always idle
+            }
+      )
+    ]
+
+
+modal : msg -> Style msg -> List ( String, Element msg )
+modal _ _ =
+    []
+
+
+dialog : msg -> Style msg -> List ( String, Element msg )
+dialog _ _ =
+    []
+
+
+textInput : msg -> Style msg -> List ( String, Element msg )
+textInput idle style =
+    [ ( "Nothing Selected"
+      , { chips = []
+        , text = ""
+        , placeholder = Nothing
+        , label = "Label"
+        , onChange = always idle
+        }
+            |> Widget.textInput style.textInput
+      )
+    , ( "Some chips"
+      , { chips =
+            [ { icon = Icons.triangle |> Element.html |> Element.el []
+              , text = "A"
+              , onPress = Just idle
+              }
+            , { icon = Icons.circle |> Element.html |> Element.el []
+              , text = "B"
+              , onPress = Just idle
+              }
+            ]
+        , text = ""
+        , placeholder = Nothing
+        , label = "Label"
+        , onChange = always idle
+        }
+            |> Widget.textInput style.textInput
+      )
+    ]
+
+
+list : msg -> Style msg -> List ( String, Element msg )
+list _ style =
+    [ ( "Row"
+      , [ Element.text "A"
+        , Element.text "B"
+        , Element.text "C"
+        ]
+            |> Widget.row style.row
+      )
+    , ( "Column"
+      , [ Element.text "A"
+        , Element.text "B"
+        , Element.text "C"
+        ]
+            |> Widget.column style.cardColumn
+      )
+    , ( "Singleton List"
+      , [ Element.text "A"
+        ]
+            |> Widget.column style.cardColumn
+      )
+    , ( "Empty List"
+      , []
+            |> Widget.column style.cardColumn
+      )
     ]
diff --git a/src/Internal/Button.elm b/src/Internal/Button.elm
index 0b8a96e..306f41e 100644
--- a/src/Internal/Button.elm
+++ b/src/Internal/Button.elm
@@ -33,7 +33,7 @@ iconButton style { onPress, text, icon } =
                     style.ifDisabled
 
                 else
-                    []
+                    style.otherwise
                )
             ++ [ Region.description text ]
         )
@@ -63,7 +63,7 @@ button style { onPress, text, icon } =
                     style.ifDisabled
 
                 else
-                    []
+                    style.otherwise
                )
         )
         { onPress = onPress
diff --git a/src/Internal/List.elm b/src/Internal/List.elm
index 55fb29f..b7da91c 100644
--- a/src/Internal/List.elm
+++ b/src/Internal/List.elm
@@ -11,7 +11,7 @@ internal :
         | element : List (Attribute msg)
         , ifFirst : List (Attribute msg)
         , ifLast : List (Attribute msg)
-        , ifCenter : List (Attribute msg)
+        , otherwise : List (Attribute msg)
     }
     -> List (Element msg)
     -> List (Element msg)
@@ -31,7 +31,7 @@ internal style list =
                                 style.ifLast
 
                             else
-                                style.ifCenter
+                                style.otherwise
                            )
             )
 
@@ -52,7 +52,7 @@ internalButton :
             | element : List (Attribute msg)
             , ifFirst : List (Attribute msg)
             , ifLast : List (Attribute msg)
-            , ifCenter : List (Attribute msg)
+            , otherwise : List (Attribute msg)
         }
     , button : ButtonStyle msg
     }
@@ -76,7 +76,7 @@ internalButton style list =
                                     style.list.ifLast
 
                                 else
-                                    style.list.ifCenter
+                                    style.list.otherwise
                                )
                     , labelRow =
                         style.button.labelRow
@@ -84,6 +84,8 @@ internalButton style list =
                         style.button.ifDisabled
                     , ifActive =
                         style.button.ifActive
+                    , otherwise =
+                        style.button.otherwise
                     }
             )
 
diff --git a/src/Widget.elm b/src/Widget.elm
index 38b08c0..a2ff771 100644
--- a/src/Widget.elm
+++ b/src/Widget.elm
@@ -5,8 +5,8 @@ module Widget exposing
     , ExpansionPanel, expansionPanel
     , row, column, buttonRow, buttonColumn
     , ColumnType, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
-    , TextInputStyle, textInput, carousel, tab
-    , Tab
+    , TextInputStyle, textInput
+    , Tab, tab
     )
 
 {-| This module contains functions for displaying data.
@@ -27,7 +27,7 @@ module Widget exposing
 @docs Dialog, modal, dialog
 
 
-# ExpansionPanel
+# Expansion Panel
 
 @docs ExpansionPanel, expansionPanel
 
@@ -37,18 +37,22 @@ module Widget exposing
 @docs row, column, buttonRow, buttonColumn
 
 
-# SortTable
+# Sort Table
 
 @docs ColumnType, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
 
 
-# Other Widgets
+# Text Input
 
-@docs TextInputStyle, textInput, carousel, tab
+@docs TextInputStyle, textInput
+
+
+# Tab
+
+@docs Tab, tab
 
 -}
 
-import Array exposing (Array)
 import Element exposing (Attribute, Element, Length)
 import Element.Input exposing (Placeholder)
 import Internal.Button as Button
@@ -57,6 +61,7 @@ import Internal.ExpansionPanel as ExpansionPanel
 import Internal.List as List
 import Internal.Select as Select
 import Internal.SortTable as SortTable
+import Internal.Tab as Tab
 import Internal.TextInput as TextInput
 import Set exposing (Set)
 import Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, RowStyle, SortTableStyle, TabStyle)
@@ -417,7 +422,7 @@ sortTable =
 
 
 {----------------------------------------------------------
-- OTHER STATELESS WIDGETS
+- TAB
 ----------------------------------------------------------}
 
 
@@ -436,42 +441,5 @@ tab :
         , content : Maybe Int -> Element msg
         }
     -> Element msg
-tab style { tabs, content } =
-    [ tabs
-        |> select
-        |> List.map (selectButton style.button)
-        |> Element.row style.optionRow
-    , tabs.selected
-        |> content
-        |> Element.el style.content
-    ]
-        |> Element.column style.containerColumn
-
-
-{-| A Carousel circles through a non empty list of contents.
--}
-carousel :
-    { content : ( a, Array a )
-    , current : Int
-    , label : a -> Element msg
-    }
-    -> Element msg
-carousel { content, current, label } =
-    let
-        ( head, tail ) =
-            content
-    in
-    (if current <= 0 then
-        head
-
-     else if current > Array.length tail then
-        tail
-            |> Array.get (Array.length tail - 1)
-            |> Maybe.withDefault head
-
-     else
-        tail
-            |> Array.get (current - 1)
-            |> Maybe.withDefault head
-    )
-        |> label
+tab =
+    Tab.tab
diff --git a/src/Layout.elm b/src/Widget/Layout.elm
similarity index 99%
rename from src/Layout.elm
rename to src/Widget/Layout.elm
index 56388ea..914ac46 100644
--- a/src/Layout.elm
+++ b/src/Widget/Layout.elm
@@ -1,4 +1,4 @@
-module Layout exposing (Layout, Part(..), activate, init, queueMessage, timePassed, view)
+module Widget.Layout exposing (Layout, Part(..), activate, init, queueMessage, timePassed, view)
 
 import Array
 import Element exposing (Attribute, DeviceClass(..), Element)
diff --git a/src/Widget/Style.elm b/src/Widget/Style.elm
index 5e8af81..f09d5cf 100644
--- a/src/Widget/Style.elm
+++ b/src/Widget/Style.elm
@@ -9,6 +9,7 @@ type alias ButtonStyle msg =
     , labelRow : List (Attribute msg)
     , ifDisabled : List (Attribute msg)
     , ifActive : List (Attribute msg)
+    , otherwise : List (Attribute msg)
     }
 
 
@@ -59,7 +60,7 @@ type alias RowStyle msg =
     , element : List (Attribute msg)
     , ifFirst : List (Attribute msg)
     , ifLast : List (Attribute msg)
-    , ifCenter : List (Attribute msg)
+    , otherwise : List (Attribute msg)
     }
 
 
@@ -68,7 +69,7 @@ type alias ColumnStyle msg =
     , element : List (Attribute msg)
     , ifFirst : List (Attribute msg)
     , ifLast : List (Attribute msg)
-    , ifCenter : List (Attribute msg)
+    , otherwise : List (Attribute msg)
     }
 
 

From 58067a6748fa531173bfa41758e7da7df2b84de6 Mon Sep 17 00:00:00 2001
From: Unknown 
Date: Thu, 21 May 2020 14:22:47 +0200
Subject: [PATCH 09/14] finished with button styling

---
 README.md                                 |  88 +++-
 elm.json                                  |   4 +-
 example/src/Data/Example.elm              |  10 +-
 example/src/Data/Style.elm                |   6 +-
 example/src/Data/Style/ElmUiFramework.elm |  73 +--
 example/src/Data/Style/Material.elm       | 384 +-------------
 example/src/Data/Style/Template.elm       | 179 +------
 example/src/Data/Theme.elm                |   8 +-
 example/src/Example/MultiSelect.elm       |   8 +-
 example/src/Example/Select.elm            |   8 +-
 example/src/Main.elm                      | 161 +++---
 example/src/View/Test.elm                 |  40 +-
 src/Internal/Button.elm                   |   4 +-
 src/Internal/List.elm                     |   4 +
 src/Internal/Select.elm                   |  32 +-
 src/Widget/Layout.elm                     |  11 +-
 src/Widget/Style.elm                      |  35 +-
 src/Widget/Style/Material.elm             | 606 ++++++++++++++++++++++
 src/Widget/Style/Template.elm             | 167 ++++++
 19 files changed, 1103 insertions(+), 725 deletions(-)
 create mode 100644 src/Widget/Style/Material.elm
 create mode 100644 src/Widget/Style/Template.elm

diff --git a/README.md b/README.md
index 064af9a..b9e7706 100644
--- a/README.md
+++ b/README.md
@@ -1,24 +1,11 @@
 # Elm-Ui-Widgets
 
 Usefull Widgets written for Elm-ui.
-These include:
-
-* Select
-* Tab
-* Multi Select
-* Collapsable
-* Dialog
-* Carousel
-* Snackbar
-* Sort Table
-* Filter Select
-* Validated Input
-* Scrolling Nav
 
 Examples of all widgets can be found [here](https://orasund.github.io/elm-ui-widgets/). For styling, I used my own [Orasund/elm-ui-framework](https://package.elm-lang.org/packages/Orasund/elm-ui-framework/latest/).
 
 ## Why create such a package?
-
+el
 After looking at the current packages that implement various reusable views (and components) I noticed two things:
 
 * There are (nearly) no widgets for Elm-Ui, and that's a problem because while going from `Element` to `Html` is easy, the opposite is not always possible (as a lot of styling in Elm-Ui would not be adapted to the `Html` element.)
@@ -42,12 +29,81 @@ Here are some alternative packages for creating UIs:
     * [surprisetalk/elm-bulma](https://dark.elm.dmy.fr/packages/surprisetalk/elm-bulma/latest/) - Wrapper for Bulma by  including the bulma stylesheet.
     * [rundis/elm-bootstrap](https://dark.elm.dmy.fr/packages/rundis/elm-bootstrap/latest/) - Wrapper for Bootstrap by including the bootstrap stylesheet.
 
+# Goal
 
+The long time goal is to have a universal tool for creating UI-frameworks natively in Elm, in particular a native **Material Design** implementation. It should allow easy customizability and also extendability of existing widgets.
 
+# Example: Button
 
-## Why does this package also include components?
+A good example, how I image the package to work is the button:
 
-I wrote a component whenever the boilerplate of a similar reusable view is less than just include the wiring in the package.
+```elm
+button: ButtonStyle msg
+    ->
+        { text : String
+        , icon : Element Never
+        , onPress : Maybe msg
+        }
+    -> Element msg
+```
+
+In comparison to Elm-Ui's button, we see two new things: 
+
+* `List (Attribute msg)` has changed into
+  ```
+  type alias ButtonStyle msg =
+      { container : List (Attribute msg)
+      , labelRow : List (Attribute msg)
+      , ifDisabled : List (Attribute msg)
+      , ifActive : List (Attribute msg)
+      }
+  ```
+* We can display an icon, besides the text. Just like the [Material Design specification](https://material.io/components/buttons) describes it.
+  Actually there is also a type for the button:
+  ```
+  type alias Button msg =
+      { text : String
+      , icon : Element Never
+      , onPress : Maybe msg
+      }
+  ```
+
+There are also a few different implementations of the button, like the Icon without text:
+
+``` elm
+iconButton :
+    ButtonStyle msg
+    ->
+        { text : String --for screen readers
+        , icon : Element Never
+        , onPress : Maybe msg
+        }
+    -> Element msg
+```
+
+or a Button with no icon
+
+```
+textButton :
+    ButtonStyle msg
+    ->
+        { textButton
+            | text : String
+            , onPress : Maybe msg
+        }
+    -> Element msg
+```
+
+# Concept
+
+Here are the reasons why I implemented it that way:
+
+* The core of Elm-Ui-Widgets are **independend** widgets (no components), that can be used without knowing anything else about the package.
+* Each widget comes with a _Widget Type_ and a _Style Type_. The Widget Type is an abstract representation of the widget and the Style Type has all styling attributes.
+* Style Types should be definable without knowing implementation details
+* Widget Types can be use for a Master View Type (Elm-Ui-Widgets might provide some master view types, for example for elm-Markup support)
+* Widget Types can be used as building Blocks for more complicated Widgets
+  (Button -> Select Buttons -> Menu -> Layout)
 
 ## Where will it go from here
 
diff --git a/elm.json b/elm.json
index ae03e96..966a9b6 100644
--- a/elm.json
+++ b/elm.json
@@ -13,6 +13,7 @@
     "elm-version": "0.19.0 <= v < 0.20.0",
     "dependencies": {
         "Orasund/elm-ui-framework": "1.6.1 <= v < 2.0.0",
+        "avh4/elm-color": "1.0.0 <= v < 2.0.0",
         "elm/browser": "1.0.2 <= v < 2.0.0",
         "elm/core": "1.0.0 <= v < 2.0.0",
         "elm/html": "1.0.0 <= v < 2.0.0",
@@ -21,10 +22,11 @@
         "elm-community/intdict": "3.0.0 <= v < 4.0.0",
         "jasonliang512/elm-heroicons": "1.0.2 <= v < 2.0.0",
         "mdgriffith/elm-ui": "1.1.5 <= v < 2.0.0",
+        "noahzgordon/elm-color-extra": "1.0.2 <= v < 2.0.0",
         "turboMaCk/queue": "1.0.2 <= v < 2.0.0",
         "wernerdegroot/listzipper": "4.0.0 <= v < 5.0.0"
     },
     "test-dependencies": {
         "elm-explorations/test": "1.2.1 <= v < 2.0.0"
     }
-}
\ No newline at end of file
+}
diff --git a/example/src/Data/Example.elm b/example/src/Data/Example.elm
index e6e5424..7749ba4 100644
--- a/example/src/Data/Example.elm
+++ b/example/src/Data/Example.elm
@@ -361,7 +361,15 @@ toCardList { idle, msgMapper, style, model } =
                                     |> List.singleton
                                     |> Element.wrappedRow [ Element.width <| Element.shrink ]
                                 , elem
-                                    |> Element.el [ Element.width <| Element.shrink ]
+                                    |> Element.el
+                                        [ Element.paddingEach
+                                            { top = 0
+                                            , right = 0
+                                            , bottom = 0
+                                            , left = 8
+                                            }
+                                        , Element.width <| Element.shrink
+                                        ]
                                 ]
                         )
                     |> Element.column
diff --git a/example/src/Data/Style.elm b/example/src/Data/Style.elm
index cd00a69..ba5d3c2 100644
--- a/example/src/Data/Style.elm
+++ b/example/src/Data/Style.elm
@@ -10,11 +10,11 @@ import Widget.Style
         , SortTableStyle
         , TabStyle
         , TextInputStyle
+        , LayoutStyle
         )
 
 
 type alias Style msg =
-    Widget.Style.Style
         { dialog : DialogStyle msg
         , expansionPanel : ExpansionPanelStyle msg
         , button : ButtonStyle msg
@@ -23,8 +23,10 @@ type alias Style msg =
         , textInput : TextInputStyle msg
         , chipButton : ButtonStyle msg
         , row : RowStyle msg
+        , buttonRow : RowStyle msg
         , column : ColumnStyle msg
         , cardColumn : ColumnStyle msg
         , sortTable : SortTableStyle msg
+        , selectButton : ButtonStyle msg
+        , layout : LayoutStyle msg
         }
-        msg
diff --git a/example/src/Data/Style/ElmUiFramework.elm b/example/src/Data/Style/ElmUiFramework.elm
index 9b522c5..0b74a43 100644
--- a/example/src/Data/Style/ElmUiFramework.elm
+++ b/example/src/Data/Style/ElmUiFramework.elm
@@ -19,6 +19,7 @@ import Widget.Style
         , ColumnStyle
         , DialogStyle
         , ExpansionPanelStyle
+        , LayoutStyle
         , RowStyle
         , SnackbarStyle
         , SortTableStyle
@@ -31,6 +32,7 @@ textButton : ButtonStyle msg
 textButton =
     { container = Button.simple
     , labelRow = Grid.simple
+    , text = []
     , ifDisabled = Color.disabled
     , ifActive = Color.primary
     , otherwise = []
@@ -41,6 +43,7 @@ simpleButton : ButtonStyle msg
 simpleButton =
     { container = Button.simple ++ Color.success
     , labelRow = Grid.simple
+    , text = []
     , ifDisabled = Color.disabled
     , ifActive = Color.primary
     , otherwise = []
@@ -66,6 +69,7 @@ menuTabButton =
         , Border.color Color.black
         ]
     , labelRow = Grid.simple
+    , text = []
     , ifDisabled = Color.disabled
     , ifActive = [ Border.color Color.turquoise ]
     , otherwise = []
@@ -76,6 +80,7 @@ menuButton : ButtonStyle msg
 menuButton =
     { labelRow = Grid.simple
     , container = Button.simple ++ Group.center ++ Color.dark
+    , text = []
     , ifDisabled = Color.disabled
     , ifActive = Color.primary
     , otherwise = []
@@ -90,6 +95,7 @@ sheetButton =
             ++ Color.light
             ++ [ Font.alignLeft ]
     , labelRow = Grid.simple
+    , text = []
     , ifDisabled = Color.disabled
     , ifActive = Color.primary
     , otherwise = []
@@ -100,6 +106,7 @@ buttonStyle : ButtonStyle msg
 buttonStyle =
     { labelRow = [ Element.spacing 8 ]
     , container = Button.simple
+    , text = []
     , ifDisabled = Color.disabled
     , ifActive = Color.primary
     , otherwise = []
@@ -110,6 +117,7 @@ snackbarButton : ButtonStyle msg
 snackbarButton =
     { labelRow = Grid.simple
     , container = Button.simple ++ Color.dark
+    , text = []
     , ifDisabled = Color.disabled
     , ifActive = Color.primary
     , otherwise = []
@@ -120,6 +128,7 @@ tabButtonStyle : ButtonStyle msg
 tabButtonStyle =
     { labelRow = [ Element.spacing 8 ]
     , container = Button.simple ++ Group.top
+    , text = []
     , ifDisabled = Color.disabled
     , ifActive = Color.primary
     , otherwise = []
@@ -158,6 +167,7 @@ textInputStyle =
 chipButtonStyle : ButtonStyle msg
 chipButtonStyle =
     { container = Tag.simple
+    , text = []
     , ifDisabled = []
     , labelRow = Grid.simple
     , ifActive = Color.primary
@@ -224,6 +234,16 @@ tab =
 
 row : RowStyle msg
 row =
+    { containerRow = Grid.simple
+    , element = []
+    , ifFirst = Group.left
+    , ifLast = Group.right
+    , otherwise = Group.center
+    }
+
+
+buttonRow : RowStyle msg
+buttonRow =
     { containerRow = Grid.compact
     , element = []
     , ifFirst = Group.left
@@ -262,39 +282,11 @@ sortTable =
     }
 
 
-style : Style msg
-style =
-    { sortTable = sortTable
-    , row = row
-    , cardColumn = cardColumn
-    , column = column
-    , button = buttonStyle
-    , primaryButton = simpleButton
-    , tab = tab
-    , textInput = textInputStyle
-    , chipButton = chipButtonStyle
-    , expansionPanel = expansionPanelStyle
-    , dialog = dialog
+layout : LayoutStyle msg
+layout =
+    { container = []
     , snackbar = snackbar
     , layout = Framework.responsiveLayout
-
-    {--\a w ->
-        Html.div []
-        [ Html.node "meta"
-            [ Attributes.attribute "name" "viewport"
-            , Attributes.attribute "content" "width=device-width, initial-scale=1.0"
-            ]
-            []
-        , Element.layoutWith
-            {options = (Element.focusStyle
-                { borderColor = Nothing
-                , backgroundColor = Nothing
-                , shadow = Nothing
-                }
-                |> List.singleton)
-            }
-         (Framework.layoutAttributes ++ a) <| w
-        ]--}
     , header =
         Framework.container
             ++ Color.dark
@@ -325,3 +317,22 @@ style =
     , searchFill =
         Color.light ++ Group.center
     }
+
+
+style : Style msg
+style =
+    { sortTable = sortTable
+    , row = row
+    , buttonRow = buttonRow
+    , cardColumn = cardColumn
+    , column = column
+    , button = buttonStyle
+    , primaryButton = simpleButton
+    , tab = tab
+    , textInput = textInputStyle
+    , chipButton = chipButtonStyle
+    , expansionPanel = expansionPanelStyle
+    , dialog = dialog
+    , selectButton = buttonStyle
+    , layout = layout
+    }
diff --git a/example/src/Data/Style/Material.elm b/example/src/Data/Style/Material.elm
index 250319f..4ce147c 100644
--- a/example/src/Data/Style/Material.elm
+++ b/example/src/Data/Style/Material.elm
@@ -1,9 +1,8 @@
-module Data.Style.Material exposing (Palette, defaultPalette, style)
+module Data.Style.Material exposing (style)
 
 import Color exposing (Color)
 import Color.Accessibility as Accessibility
 import Color.Convert as Convert
-import Color.Manipulate as Manipulate
 import Data.Style exposing (Style)
 import Element exposing (Attribute, Element)
 import Element.Background as Background
@@ -16,378 +15,31 @@ import Widget.Style
         , ColumnStyle
         , DialogStyle
         , ExpansionPanelStyle
+        , LayoutStyle
         , RowStyle
         , SnackbarStyle
         , SortTableStyle
         , TabStyle
         , TextInputStyle
         )
-
-
-type alias Palette =
-    { primary : Color --Color.rgb255 0x62 0x00 0xEE
-    , secondary : Color --Color.rgb255 0x03 0xda 0xc6
-    , background : Color --Color.rgb255 0xFF 0xFF 0xFF
-    , surface : Color --Color.rgb255 0xFF 0xFF 0xFF
-    , error : Color --Color.rgb255 0xB0 0x00 0x20
-    , on :
-        { primary : Color --Color.rgb255 0xFF 0xFF 0xFF
-        , secondary : Color --Color.rgb255 0x00 0x00 0x00
-        , background : Color --Color.rgb255 0x00 0x00 0x00
-        , surface : Color --Color.rgb255 0x00 0x00 0x00
-        , error : Color --Color.rgb255 0xFF 0xFF 0xFF
-        }
-    }
-
-
-defaultPalette : Palette
-defaultPalette =
-    { primary = Color.rgb255 0x62 0x00 0xEE
-    , secondary = Color.rgb255 0x03 0xDA 0xC6
-    , background = Color.rgb255 0xFF 0xFF 0xFF
-    , surface = Color.rgb255 0xFF 0xFF 0xFF
-    , error = Color.rgb255 0xB0 0x00 0x20
-    , on =
-        { primary = Color.rgb255 0xFF 0xFF 0xFF
-        , secondary = Color.rgb255 0x00 0x00 0x00
-        , background = Color.rgb255 0x00 0x00 0x00
-        , surface = Color.rgb255 0x00 0x00 0x00
-        , error = Color.rgb255 0xFF 0xFF 0xFF
-        }
-    }
-
-
-accessibleTextColor : Color -> Color
-accessibleTextColor color =
-    if (0.05 / (Accessibility.luminance color + 0.05)) < 7 then
-        Color.rgb 255 255 255
-
-    else
-        Color.rgb 0 0 0
-
-
-{-| using noahzgordon/elm-color-extra for colors
--}
-withShade : Color -> Float -> Color -> Color
-withShade c2 amount c1 =
-    let
-        alpha = c1 
-            |> Color.toRgba |> .alpha
-        
-
-        toCIELCH =
-            Convert.colorToLab
-                >> (\{ l, a, b } ->
-                        { l = l
-                        , c = sqrt (a * a + b * b)
-                        , h = atan2 b a
-                        }
-                   )
-
-        fromCIELCH =
-            (\{ l, c, h } ->
-                { l = l
-                , a = c * cos h
-                , b = c * sin h
-                }
-            )
-                >> Convert.labToColor
-
-        fun a b =
-            { l = (a.l * (1 - amount) + b.l * amount) / 1
-            , c = (a.c * (1 - amount) + b.c * amount) / 1
-            , h = (a.h * (1 - amount) + b.h * amount) / 1
-            }
-    in
-    fun (toCIELCH c1) (toCIELCH c2)
-        |> fromCIELCH
-        |> Color.toRgba
-        |> (\color -> { color | alpha = alpha })
-        |> Color.fromRgba
-
-scaleOpacity : Float -> Color -> Color
-scaleOpacity opacity =
-    Color.toRgba
-        >> (\color -> { color | alpha = color.alpha * opacity})
-        >> Color.fromRgba
-
-{-| hsl 265 100 47 (0% onColor)
-rgb 98 0 238
--}
-primaryColor : Palette -> Color
-primaryColor { primary } =
-    primary
-
-
-{-| hsl 265 75 59 (24% onColor)
-rgb 136 61 242
--}
-primaryColorFocused : Palette -> Color
-primaryColorFocused {primary, on } =
-    primary |> withShade on.primary 0.24
-
-
-
---Color.rgb255 0x87 0x3D 0xF2
-
-
-{-| hsl 265 92 51 (08% onColor)
--}
-primaryColorHover : Palette -> Color
-primaryColorHover {primary, on } =
-    primary |> withShade on.primary 0.08
-
-
-
---Color.rgb255 0x6E 0x14 0xEF
-
-
-{-| hsl 265 66 64 (32% onColor)
--}
-primaryColorPressed : Palette -> Color
-primaryColorPressed {primary, on } =
-    primary |> withShade on.primary 0.32
-
-
-
---Color.rgb255 0x94 0x52 0xF3
-
-
-primaryColorDisabled : Palette ->Color
-primaryColorDisabled {primary,on}=
-    Color.rgb255 0x77 0x77 0x77 |> scaleOpacity 0.38
-
-disabledFontColor : Color
-disabledFontColor =
-    Color.rgb255 0x77 0x77 0x77--0x85 0x85 0x85
-
-
-shadow :
-    Float
-    ->
-        { offset : ( Float, Float )
-        , size : Float
-        , blur : Float
-        , color : Element.Color
-        }
-shadow float =
-    { color = Element.rgba255 0x00 0x00 0x00 0.2
-    , offset = ( 0, float )
-    , size = 0
-    , blur = float
-    }
-
-
-primaryButton : Palette -> ButtonStyle msg
-primaryButton palette =
-    { container =
-        [ Element.height <| Element.px 36
-        , Element.width <| Element.minimum 64 <| Element.shrink
-        , Border.rounded <| 4
-        , Border.shadow <| shadow 2
-        , Font.size 14
-        , Font.medium
-        , Font.letterSpacing 1.25
-        , Element.htmlAttribute <| Attributes.style "text-transform" "uppercase"
-        , Element.paddingXY 16 8
-        , Element.mouseDown
-            [ Background.color <| Element.fromRgb <| Color.toRgba <| primaryColorPressed palette
-            , Font.color <| Element.fromRgb <| Color.toRgba <| accessibleTextColor <| primaryColorPressed palette
-            , Border.shadow <| shadow 12
-            ]
-        , Element.mouseOver
-            [ Background.color <| Element.fromRgb <| Color.toRgba <| primaryColorHover palette
-            , Font.color <| Element.fromRgb <| Color.toRgba <| accessibleTextColor <| primaryColorHover palette
-            , Border.shadow <| shadow 6
-            ]
-        , Element.focused
-            [ Background.color <| Element.fromRgb <| Color.toRgba <| primaryColorFocused palette
-            , Font.color <| Element.fromRgb <| Color.toRgba <| accessibleTextColor <| primaryColorFocused palette
-            , Border.shadow <| shadow 6
-            ]
-        ]
-    , labelRow =
-        [ Element.spacing <| 8
-        ]
-    , ifDisabled =
-        [ Background.color <| Element.fromRgb <| Color.toRgba <| primaryColorDisabled palette
-        , Font.color <| Element.fromRgb <| Color.toRgba <| disabledFontColor
-        , Element.htmlAttribute <| Attributes.style "cursor" "not-allowed"
-        , Element.mouseDown []
-        , Element.mouseOver []
-        , Element.focused []
-        , Border.shadow <| shadow 0
-        ]
-    , ifActive =
-        [ Background.color <| Element.fromRgb <| Color.toRgba <| primaryColorFocused palette
-        , Font.color <| Element.fromRgb <| Color.toRgba <| accessibleTextColor <| primaryColorHover palette
-        ]
-    , otherwise =
-        [ Background.color <| Element.fromRgb <| Color.toRgba <| primaryColor palette
-        , Font.color <| Element.fromRgb <| Color.toRgba <| accessibleTextColor <| primaryColor palette
-        
-        ]
-    }
-
-
-
-{-------------------------------------------------------------------------------
-- Template
--------------------------------------------------------------------------------}
-
-
-fontSize : Int
-fontSize =
-    10
-
-
-box : String -> List (Attribute msg)
-box string =
-    [ Border.width 1
-    , Background.color <| Element.rgba 1 1 1 0.5
-    , Element.padding 10
-    , Element.spacing 10
-    , Element.above <|
-        Element.el [ Font.size <| fontSize ] <|
-            Element.text string
-    ]
-
-
-decoration : String -> List (Attribute msg)
-decoration string =
-    [ Element.below <|
-        Element.el [ Font.size <| fontSize ] <|
-            Element.text string
-    , Background.color <| Element.rgb 0.66 0.66 0.66
-    ]
-
-
-icon : String -> Element msg
-icon string =
-    Element.none
-        |> Element.el
-            [ Element.width <| Element.px 12
-            , Element.height <| Element.px 12
-            , Border.rounded 6
-            , Border.width 1
-            , Element.above <|
-                Element.el [ Font.size <| fontSize ] <|
-                    Element.text string
-            ]
-
-
-button : String -> ButtonStyle msg
-button string =
-    { container = box <| string ++ ":container"
-    , labelRow = box <| string ++ ":labelRow"
-    , ifDisabled = decoration <| string ++ ":ifDisabled"
-    , ifActive = decoration <| string ++ ":ifActive"
-    , otherwise = box <| string ++ ":otherwise"
-    }
-
-
-snackbar : String -> SnackbarStyle msg
-snackbar string =
-    { containerRow = box <| string ++ ":containerRow"
-    , button = button <| string ++ ":button"
-    , text = box <| string ++ ":text"
-    }
-
-
-dialog : String -> DialogStyle msg
-dialog string =
-    { containerColumn = box <| string ++ ":containerColumn"
-    , title = box <| string ++ ":title"
-    , buttonRow = box <| string ++ ":buttonRow"
-    , acceptButton = button <| string ++ ":acceptButton"
-    , dismissButton = button <| string ++ ":dismissButton"
-    }
-
-
-expansionPanel : String -> ExpansionPanelStyle msg
-expansionPanel string =
-    { containerColumn = box <| string ++ ":containerColumn"
-    , panelRow = box <| string ++ ":panelRow"
-    , labelRow = box <| string ++ ":labelRow"
-    , content = box <| string ++ ":content"
-    , expandIcon = icon <| string ++ ":expandIcon"
-    , collapseIcon = icon <| string ++ ":collapseIcon"
-    }
-
-
-textInput : String -> TextInputStyle msg
-textInput string =
-    { chipButton = button <| string ++ ":chipButton"
-    , chipsRow = box <| string ++ ":chipsRow"
-    , containerRow = box <| string ++ ":containerRow"
-    , input = box <| string ++ ":input"
-    }
-
-
-tab : String -> TabStyle msg
-tab string =
-    { button = button <| string ++ ":button"
-    , optionRow = box <| string ++ ":optionRow"
-    , containerColumn = box <| string ++ ":containerColumn"
-    , content = box <| string ++ ":content"
-    }
-
-
-row : String -> RowStyle msg
-row string =
-    { containerRow = box <| string ++ ":containerRow"
-    , element = box <| string ++ ":element"
-    , ifFirst = box <| string ++ ":ifFirst"
-    , ifLast = box <| string ++ ":ifLast"
-    , otherwise = box <| string ++ ":otherwise"
-    }
-
-
-column : String -> ColumnStyle msg
-column string =
-    { containerColumn = box <| string ++ ":containerColumn"
-    , element = box <| string ++ ":element"
-    , ifFirst = box <| string ++ ":ifFirst"
-    , ifLast = box <| string ++ ":ifLast"
-    , otherwise = box <| string ++ ":otherwise"
-    }
-
-
-sortTable : String -> SortTableStyle msg
-sortTable string =
-    { containerTable = box <| string ++ ":containerTable"
-    , headerButton = button <| string ++ ":headerButton"
-    , ascIcon = icon <| string ++ ":ascIcon"
-    , descIcon = icon <| string ++ ":descIcon"
-    , defaultIcon = icon <| string ++ ":defaultIcon"
-    }
+import Widget.Style.Material as Material exposing (Palette)
+import Widget.Style.Template as Template
 
 
 style : Palette -> Style msg
 style palette =
-    { sortTable = sortTable <| "sortTable"
-    , row = row <| "row"
-    , cardColumn = column <| "cardRow"
-    , column = column <| "column"
-    , button = button <| "button"
-    , primaryButton = primaryButton palette
-    , tab = tab <| "tab"
-    , textInput = textInput <| "textInput"
-    , chipButton = button <| "chipButton"
-    , expansionPanel = expansionPanel "expansionPanel"
-    , dialog = dialog "dialog"
-    , snackbar = snackbar "snackbar"
-    , layout = Element.layout
-    , header = box "header"
-    , menuButton = button "menuButton"
-    , sheetButton = button "sheetButton"
-    , menuTabButton = button "menuTabButton"
-    , sheet = box "sheet"
-    , menuIcon = icon "menuIcon"
-    , moreVerticalIcon = icon "moreVerticalIcon"
-    , spacing = 8
-    , title = box "title"
-    , searchIcon = icon "searchIcon"
-    , search = box "search"
-    , searchFill = box "searchFill"
+    { sortTable = Template.sortTable <| "sortTable"
+    , row = Material.row
+    , buttonRow = Material.buttonRow
+    , cardColumn = Template.column <| "cardRow"
+    , column = Template.column <| "column"
+    , button = Material.outlinedButton palette
+    , primaryButton = Material.containedButton palette
+    , selectButton = Material.toggleButton palette
+    , tab = Template.tab <| "tab"
+    , textInput = Template.textInput <| "textInput"
+    , chipButton = Template.button <| "Button"
+    , expansionPanel = Template.expansionPanel "expansionPanel"
+    , dialog = Template.dialog <| "dialog"
+    , layout = Template.layout "layout"
     }
diff --git a/example/src/Data/Style/Template.elm b/example/src/Data/Style/Template.elm
index 9400875..937c718 100644
--- a/example/src/Data/Style/Template.elm
+++ b/example/src/Data/Style/Template.elm
@@ -5,172 +5,23 @@ import Element exposing (Attribute, Element)
 import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
-import Widget.Style
-    exposing
-        ( ButtonStyle
-        , ColumnStyle
-        , DialogStyle
-        , ExpansionPanelStyle
-        , RowStyle
-        , SnackbarStyle
-        , TabStyle
-        , TextInputStyle
-        ,SortTableStyle
-        )
-
-
-fontSize : Int
-fontSize =
-    10
-
-
-box : String -> List (Attribute msg)
-box string =
-    [ Border.width 1
-    , Background.color <| Element.rgba 1 1 1 0.5
-    , Element.padding 10
-    , Element.spacing 10
-    , Element.above <|
-        Element.el [ Font.size <| fontSize ] <|
-            Element.text string
-    ]
-
-
-decoration : String -> List (Attribute msg)
-decoration string =
-    [ Element.below <|
-        Element.el [ Font.size <| fontSize ] <|
-            Element.text string
-    , Background.color <| Element.rgb 0.66 0.66 0.66
-    ]
-
-
-icon : String -> Element msg
-icon string =
-    Element.none
-        |> Element.el
-            [ Element.width <| Element.px 12
-            , Element.height <| Element.px 12
-            , Border.rounded 6
-            , Border.width 1
-            , Element.above <|
-                Element.el [ Font.size <| fontSize ] <|
-                    Element.text string
-            ]
-
-
-button : String -> ButtonStyle msg
-button string =
-    { container = box <| string ++ ":container"
-    , labelRow = box <| string ++ ":labelRow"
-    , ifDisabled = decoration <| string ++ ":ifDisabled"
-    , ifActive = decoration <| string ++ ":ifActive"
-    , otherwise = decoration <| string ++ ":otherwise"
-    }
-
-
-snackbar : String -> SnackbarStyle msg
-snackbar string =
-    { containerRow = box <| string ++ ":containerRow"
-    , button = button <| string ++ ":button"
-    , text = box <| string ++ ":text"
-    }
-
-
-dialog : String -> DialogStyle msg
-dialog string =
-    { containerColumn = box <| string ++ ":containerColumn"
-    , title = box <| string ++ ":title"
-    , buttonRow = box <| string ++ ":buttonRow"
-    , acceptButton = button <| string ++ ":acceptButton"
-    , dismissButton = button <| string ++ ":dismissButton"
-    }
-
-
-expansionPanel : String -> ExpansionPanelStyle msg
-expansionPanel string =
-    { containerColumn = box <| string ++ ":containerColumn"
-    , panelRow = box <| string ++ ":panelRow"
-    , labelRow = box <| string ++ ":labelRow"
-    , content = box <| string ++ ":content"
-    , expandIcon = icon <| string ++ ":expandIcon"
-    , collapseIcon = icon <| string ++ ":collapseIcon"
-    }
-
-
-textInput : String -> TextInputStyle msg
-textInput string =
-    { chipButton = button <| string ++ ":chipButton"
-    , chipsRow = box <| string ++ ":chipsRow"
-    , containerRow = box <| string ++ ":containerRow"
-    , input = box <| string ++ ":input"
-    }
-
-
-tab : String -> TabStyle msg
-tab string =
-    { button = button <| string ++ ":button"
-    , optionRow = box <| string ++ ":optionRow"
-    , containerColumn = box <| string ++ ":containerColumn"
-    , content = box <| string ++ ":content"
-    }
-
-
-row : String -> RowStyle msg
-row string =
-    { containerRow = box <| string ++ ":containerRow"
-    , element = box <| string ++ ":element"
-    , ifFirst = box <| string ++ ":ifFirst"
-    , ifLast = box <| string ++ ":ifLast"
-    , otherwise = box <| string ++ ":otherwise"
-    }
-
-
-column : String -> ColumnStyle msg
-column string =
-    { containerColumn = box <| string ++ ":containerColumn"
-    , element = box <| string ++ ":element"
-    , ifFirst = box <| string ++ ":ifFirst"
-    , ifLast = box <| string ++ ":ifLast"
-    , otherwise = box <| string ++ ":otherwise"
-    }
-
-
-sortTable : String -> SortTableStyle msg
-sortTable string =
-    { containerTable = box <| string ++ ":containerTable"
-    , headerButton = button <| string ++ ":headerButton"
-    , ascIcon = icon <| string ++ ":ascIcon"
-    , descIcon = icon <| string ++ ":descIcon"
-    , defaultIcon = icon <| string ++ ":defaultIcon"
-    }
+import Widget.Style.Template as Template
 
 
 style : Style msg
 style =
-    { sortTable = sortTable <| "sortTable"
-    , row = row <| "row"
-    , cardColumn = column <| "cardRow"
-    , column = column <| "column"
-    , button = button <| "button"
-    , primaryButton = button <| "primaryButton"
-    , tab = tab <| "tab"
-    , textInput = textInput <| "textInput"
-    , chipButton = button <| "chipButton"
-    , expansionPanel = expansionPanel "expansionPanel"
-    , dialog = dialog "dialog"
-    , snackbar = snackbar "snackbar"
-    , layout = Element.layout
-    , header = box "header"
-    , menuButton = button "menuButton"
-    , sheetButton = button "sheetButton"
-    , menuTabButton = button "menuTabButton"
-    , sheet = box "sheet"
-    , menuIcon = icon "menuIcon"
-    , moreVerticalIcon = icon "moreVerticalIcon"
-    , spacing = 8
-    , title = box "title"
-    , searchIcon = icon "searchIcon"
-    , search = box "search"
-    , searchFill = box "searchFill"
+    { sortTable = Template.sortTable <| "sortTable"
+    , row = Template.row <| "row"
+    , buttonRow = Template.row <| "buttonRow"
+    , cardColumn = Template.column <| "cardRow"
+    , column = Template.column <| "column"
+    , button = Template.button <| "button"
+    , primaryButton = Template.button <| "primaryButton"
+    , tab = Template.tab <| "tab"
+    , textInput = Template.textInput <| "textInput"
+    , chipButton = Template.button <| "chipButton"
+    , expansionPanel = Template.expansionPanel "expansionPanel"
+    , selectButton = Template.button "selectButton"
+    , dialog = Template.dialog "dialog"
+    , layout = Template.layout "layout"
     }
diff --git a/example/src/Data/Theme.elm b/example/src/Data/Theme.elm
index 6e960d4..64d254a 100644
--- a/example/src/Data/Theme.elm
+++ b/example/src/Data/Theme.elm
@@ -4,12 +4,13 @@ import Data.Style exposing (Style)
 import Data.Style.ElmUiFramework
 import Data.Style.Material
 import Data.Style.Template
-
+import Widget.Style.Material
 
 type Theme
     = ElmUiFramework
     | Template
     | Material
+    | DarkMaterial
 
 
 toStyle : Theme -> Style msg
@@ -22,4 +23,7 @@ toStyle theme =
             Data.Style.Template.style
 
         Material ->
-            Data.Style.Material.style Data.Style.Material.defaultPalette
+            Data.Style.Material.style Widget.Style.Material.defaultPalette
+
+        DarkMaterial ->
+            Data.Style.Material.style Widget.Style.Material.darkPalette
diff --git a/example/src/Example/MultiSelect.elm b/example/src/Example/MultiSelect.elm
index 3673125..73cfa0a 100644
--- a/example/src/Example/MultiSelect.elm
+++ b/example/src/Example/MultiSelect.elm
@@ -8,8 +8,8 @@ import Widget.Style exposing (ButtonStyle, RowStyle)
 
 type alias Style style msg =
     { style
-        | row : RowStyle msg
-        , button : ButtonStyle msg
+        | buttonRow : RowStyle msg
+        , selectButton : ButtonStyle msg
     }
 
 
@@ -64,6 +64,6 @@ view msgMapper style (Selected selected) =
     }
         |> Widget.multiSelect
         |> Widget.buttonRow
-            { list = style.row
-            , button = style.button
+            { list = style.buttonRow
+            , button = style.selectButton
             }
diff --git a/example/src/Example/Select.elm b/example/src/Example/Select.elm
index f663c7f..b51e58f 100644
--- a/example/src/Example/Select.elm
+++ b/example/src/Example/Select.elm
@@ -7,8 +7,8 @@ import Widget.Style exposing (ButtonStyle, RowStyle)
 
 type alias Style style msg =
     { style
-        | row : RowStyle msg
-        , button : ButtonStyle msg
+        | buttonRow : RowStyle msg
+        , selectButton : ButtonStyle msg
     }
 
 
@@ -56,6 +56,6 @@ view msgMapper style (Selected selected) =
     }
         |> Widget.select
         |> Widget.buttonRow
-            { list = style.row
-            , button = style.button
+            { list = style.buttonRow
+            , button = style.selectButton
             }
diff --git a/example/src/Main.elm b/example/src/Main.elm
index 8c6895f..37e4f24 100644
--- a/example/src/Main.elm
+++ b/example/src/Main.elm
@@ -129,7 +129,7 @@ view model =
                     Theme.toStyle m.theme
             in
             Html.map LoadedSpecific <|
-                Layout.view []
+                Layout.view style.layout
                     { dialog =
                         if m.displayDialog then
                             { body =
@@ -154,8 +154,88 @@ view model =
 
                         else
                             Nothing
-                    , content =
-                        [ Element.el [ Element.height <| Element.px <| 42 ] <| Element.none
+                    , layout = m.layout
+                    , window = m.window
+                    , menu =
+                        m.scrollingNav
+                            |> ScrollingNav.toSelect
+                                (\int ->
+                                    m.scrollingNav.arrangement
+                                        |> Array.fromList
+                                        |> Array.get int
+                                        |> Maybe.map JumpTo
+                                )
+                    , actions =
+                        [ { onPress = Just <| Load "https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/"
+                          , text = "Docs"
+                          , icon = Icons.book |> Element.html |> Element.el []
+                          }
+                        , { onPress = Just <| Load "https://github.com/Orasund/elm-ui-widgets"
+                          , text = "Github"
+                          , icon = Icons.github |> Element.html |> Element.el []
+                          }
+                        , { onPress =
+                                if m.theme /= ElmUiFramework then
+                                    Just <| SetTheme <| ElmUiFramework
+
+                                else
+                                    Nothing
+                          , text = "Elm-Ui-Framework Theme"
+                          , icon = Icons.penTool |> Element.html |> Element.el []
+                          }
+                        , { onPress =
+                                if m.theme /= Template then
+                                    Just <| SetTheme <| Template
+
+                                else
+                                    Nothing
+                          , text = "Template Theme"
+                          , icon = Icons.penTool |> Element.html |> Element.el []
+                          }
+                        , { onPress =
+                                if m.theme /= Material then
+                                    Just <| SetTheme <| Material
+
+                                else
+                                    Nothing
+                          , text = "Material Theme"
+                          , icon = Icons.penTool |> Element.html |> Element.el []
+                          }
+                        , { onPress =
+                                if m.theme /= DarkMaterial then
+                                    Just <| SetTheme <| DarkMaterial
+
+                                else
+                                    Nothing
+                          , text = "Dark Material Theme"
+                          , icon = Icons.penTool |> Element.html |> Element.el []
+                          }
+                        , { onPress = Nothing
+                          , text = "Placeholder"
+                          , icon = Icons.circle |> Element.html |> Element.el []
+                          }
+                        , { onPress = Nothing
+                          , text = "Placeholder"
+                          , icon = Icons.triangle |> Element.html |> Element.el []
+                          }
+                        , { onPress = Nothing
+                          , text = "Placeholder"
+                          , icon = Icons.square |> Element.html |> Element.el []
+                          }
+                        ]
+                    , onChangedSidebar = ChangedSidebar
+                    , title =
+                        "Elm-Ui-Widgets"
+                            |> Element.text
+                            |> Element.el Heading.h1
+                    , search =
+                        Just
+                            { text = m.search.raw
+                            , onChange = ChangedSearch
+                            , label = "Search"
+                            }
+                    } <|
+                    ([ Element.el [ Element.height <| Element.px <| 42 ] <| Element.none
                         , [ m.scrollingNav
                                 |> ScrollingNav.view
                                     (\section ->
@@ -221,80 +301,7 @@ view model =
                           ]
                             |> Element.column Framework.container
                         ]
-                            |> Element.column Grid.compact
-                    , style = style
-                    , layout = m.layout
-                    , window = m.window
-                    , menu =
-                        m.scrollingNav
-                            |> ScrollingNav.toSelect
-                                (\int ->
-                                    m.scrollingNav.arrangement
-                                        |> Array.fromList
-                                        |> Array.get int
-                                        |> Maybe.map JumpTo
-                                )
-                    , actions =
-                        [ { onPress = Just <| Load "https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/"
-                          , text = "Docs"
-                          , icon = Icons.book |> Element.html |> Element.el []
-                          }
-                        , { onPress = Just <| Load "https://github.com/Orasund/elm-ui-widgets"
-                          , text = "Github"
-                          , icon = Icons.github |> Element.html |> Element.el []
-                          }
-                        , { onPress =
-                                if m.theme /= ElmUiFramework then
-                                    Just <| SetTheme <| ElmUiFramework
-
-                                else
-                                    Nothing
-                          , text = "Elm-Ui-Framework Theme"
-                          , icon = Icons.penTool |> Element.html |> Element.el []
-                          }
-                        , { onPress =
-                                if m.theme /= Template then
-                                    Just <| SetTheme <| Template
-
-                                else
-                                    Nothing
-                          , text = "Template Theme"
-                          , icon = Icons.penTool |> Element.html |> Element.el []
-                          }
-                        , { onPress =
-                                if m.theme /= Material then
-                                    Just <| SetTheme <| Material
-
-                                else
-                                    Nothing
-                          , text = "Material Theme"
-                          , icon = Icons.penTool |> Element.html |> Element.el []
-                          }
-                        , { onPress = Nothing
-                          , text = "Placeholder"
-                          , icon = Icons.circle |> Element.html |> Element.el []
-                          }
-                        , { onPress = Nothing
-                          , text = "Placeholder"
-                          , icon = Icons.triangle |> Element.html |> Element.el []
-                          }
-                        , { onPress = Nothing
-                          , text = "Placeholder"
-                          , icon = Icons.square |> Element.html |> Element.el []
-                          }
-                        ]
-                    , onChangedSidebar = ChangedSidebar
-                    , title =
-                        "Elm-Ui-Widgets"
-                            |> Element.text
-                            |> Element.el Heading.h1
-                    , search =
-                        Just
-                            { text = m.search.raw
-                            , onChange = ChangedSearch
-                            , label = "Search"
-                            }
-                    }
+                            |> Element.column Grid.compact)
 
 
 updateLoaded : LoadedMsg -> LoadedModel -> ( LoadedModel, Cmd LoadedMsg )
diff --git a/example/src/View/Test.elm b/example/src/View/Test.elm
index d239459..8055f07 100644
--- a/example/src/View/Test.elm
+++ b/example/src/View/Test.elm
@@ -74,8 +74,8 @@ select idle style =
         }
             |> Widget.select
             |> Widget.buttonRow
-                { list = style.row
-                , button = style.button
+                { list = style.buttonRow
+                , button = style.selectButton
                 }
       )
     , ( "Nothing selected"
@@ -92,8 +92,8 @@ select idle style =
         }
             |> Widget.select
             |> Widget.buttonRow
-                { list = style.row
-                , button = style.button
+                { list = style.buttonRow
+                , button = style.selectButton
                 }
       )
     , ( "Invalid selection"
@@ -110,8 +110,8 @@ select idle style =
         }
             |> Widget.select
             |> Widget.buttonRow
-                { list = style.row
-                , button = style.button
+                { list = style.buttonRow
+                , button = style.selectButton
                 }
       )
     , ( "Disabled selection"
@@ -128,8 +128,8 @@ select idle style =
         }
             |> Widget.select
             |> Widget.buttonRow
-                { list = style.row
-                , button = style.button
+                { list = style.buttonRow
+                , button = style.selectButton
                 }
       )
     , ( "Empty Options"
@@ -146,8 +146,8 @@ select idle style =
         }
             |> Widget.select
             |> Widget.buttonRow
-                { list = style.row
-                , button = style.button
+                { list = style.buttonRow
+                , button = style.selectButton
                 }
       )
     ]
@@ -169,8 +169,8 @@ multiSelect idle style =
         }
             |> Widget.multiSelect
             |> Widget.buttonRow
-                { list = style.row
-                , button = style.button
+                { list = style.buttonRow
+                , button = style.selectButton
                 }
       )
     , ( "Nothing selected"
@@ -187,8 +187,8 @@ multiSelect idle style =
         }
             |> Widget.multiSelect
             |> Widget.buttonRow
-                { list = style.row
-                , button = style.button
+                { list = style.buttonRow
+                , button = style.selectButton
                 }
       )
     , ( "Invalid selection"
@@ -205,8 +205,8 @@ multiSelect idle style =
         }
             |> Widget.multiSelect
             |> Widget.buttonRow
-                { list = style.row
-                , button = style.button
+                { list = style.buttonRow
+                , button = style.selectButton
                 }
       )
     , ( "Disabled selection"
@@ -223,8 +223,8 @@ multiSelect idle style =
         }
             |> Widget.multiSelect
             |> Widget.buttonRow
-                { list = style.row
-                , button = style.button
+                { list = style.buttonRow
+                , button = style.selectButton
                 }
       )
     , ( "Empty Options"
@@ -241,8 +241,8 @@ multiSelect idle style =
         }
             |> Widget.multiSelect
             |> Widget.buttonRow
-                { list = style.row
-                , button = style.button
+                { list = style.buttonRow
+                , button = style.selectButton
                 }
       )
     ]
diff --git a/src/Internal/Button.elm b/src/Internal/Button.elm
index 306f41e..648a163 100644
--- a/src/Internal/Button.elm
+++ b/src/Internal/Button.elm
@@ -39,7 +39,7 @@ iconButton style { onPress, text, icon } =
         )
         { onPress = onPress
         , label =
-            icon |> Element.map never
+            icon |> Element.map never |> Element.el style.labelRow
         }
 
 
@@ -70,6 +70,6 @@ button style { onPress, text, icon } =
         , label =
             Element.row style.labelRow
                 [ icon |> Element.map never
-                , Element.text text
+                , Element.text text |> Element.el style.text
                 ]
         }
diff --git a/src/Internal/List.elm b/src/Internal/List.elm
index b7da91c..74ade97 100644
--- a/src/Internal/List.elm
+++ b/src/Internal/List.elm
@@ -80,6 +80,8 @@ internalButton style list =
                                )
                     , labelRow =
                         style.button.labelRow
+                    , text =
+                        style.button.text
                     , ifDisabled =
                         style.button.ifDisabled
                     , ifActive =
@@ -87,6 +89,8 @@ internalButton style list =
                     , otherwise =
                         style.button.otherwise
                     }
+                    --Workaround for https://github.com/mdgriffith/elm-ui/issues/47
+                    >> Element.el []
             )
 
 
diff --git a/src/Internal/Select.elm b/src/Internal/Select.elm
index f6acc5d..e0e4375 100644
--- a/src/Internal/Select.elm
+++ b/src/Internal/Select.elm
@@ -1,7 +1,8 @@
 module Internal.Select exposing (MultiSelect, Select, multiSelect, select, selectButton)
 
 import Element exposing (Element)
-import Internal.Button as Button exposing (Button)
+import Element.Input as Input
+import Internal.Button exposing (Button)
 import Set exposing (Set)
 import Widget.Style exposing (ButtonStyle)
 
@@ -33,18 +34,25 @@ selectButton :
     -> ( Bool, Button msg )
     -> Element msg
 selectButton style ( selected, b ) =
-    b
-        |> Button.button
-            { style
-                | container =
-                    style.container
-                        ++ (if selected then
-                                style.ifActive
+    Input.button
+        (style.container
+            ++ (if b.onPress == Nothing then
+                    style.ifDisabled
 
-                            else
-                                []
-                           )
-            }
+                else if selected then
+                    style.ifActive
+
+                else
+                    style.otherwise
+               )
+        )
+        { onPress = b.onPress
+        , label =
+            Element.row style.labelRow
+                [ b.icon |> Element.map never
+                , Element.text b.text |> Element.el style.text
+                ]
+        }
 
 
 select :
diff --git a/src/Widget/Layout.elm b/src/Widget/Layout.elm
index 914ac46..0cb2931 100644
--- a/src/Widget/Layout.elm
+++ b/src/Widget/Layout.elm
@@ -6,7 +6,7 @@ import Element.Input as Input
 import Html exposing (Html)
 import Widget exposing (Button, Select)
 import Widget.Snackbar as Snackbar exposing (Message)
-import Widget.Style exposing (Style)
+import Widget.Style exposing (LayoutStyle)
 
 
 type Part
@@ -58,11 +58,10 @@ timePassed sec layout =
 
 
 view :
-    List (Attribute msg)
+    LayoutStyle msg
     ->
         { window : { height : Int, width : Int }
         , dialog : Maybe (List (Attribute msg))
-        , content : Element msg
         , layout : Layout msg
         , title : Element msg
         , menu : Select msg
@@ -74,10 +73,10 @@ view :
                 }
         , actions : List (Button msg)
         , onChangedSidebar : Maybe Part -> msg
-        , style : Style style msg
         }
+    -> Element msg
     -> Html msg
-view attributes { search, title, onChangedSidebar, menu, actions, window, dialog, content, style, layout } =
+view style { search, title, onChangedSidebar, menu, actions, window, dialog, layout } content =
     let
         deviceClass : DeviceClass
         deviceClass =
@@ -293,7 +292,7 @@ view attributes { search, title, onChangedSidebar, menu, actions, window, dialog
     content
         |> style.layout
             (List.concat
-                [ attributes
+                [ style.container
                 , [ Element.inFront nav
                   , Element.inFront snackbar
                   ]
diff --git a/src/Widget/Style.elm b/src/Widget/Style.elm
index f09d5cf..6a183c6 100644
--- a/src/Widget/Style.elm
+++ b/src/Widget/Style.elm
@@ -1,4 +1,4 @@
-module Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, RowStyle, SnackbarStyle, SortTableStyle, Style, TabStyle, TextInputStyle)
+module Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, RowStyle, SnackbarStyle, SortTableStyle, TabStyle, TextInputStyle)
 
 import Element exposing (Attribute, Element)
 import Html exposing (Html)
@@ -7,6 +7,7 @@ import Html exposing (Html)
 type alias ButtonStyle msg =
     { container : List (Attribute msg)
     , labelRow : List (Attribute msg)
+    , text : List (Attribute msg)
     , ifDisabled : List (Attribute msg)
     , ifActive : List (Attribute msg)
     , otherwise : List (Attribute msg)
@@ -82,20 +83,20 @@ type alias SortTableStyle msg =
     }
 
 
-type alias Style style msg =
-    { style
-        | snackbar : SnackbarStyle msg
-        , layout : List (Attribute msg) -> Element msg -> Html msg
-        , header : List (Attribute msg)
-        , sheet : List (Attribute msg)
-        , sheetButton : ButtonStyle msg
-        , menuButton : ButtonStyle msg
-        , menuTabButton : ButtonStyle msg
-        , menuIcon : Element Never
-        , moreVerticalIcon : Element Never
-        , spacing : Int
-        , title : List (Attribute msg)
-        , searchIcon : Element Never
-        , search : List (Attribute msg)
-        , searchFill : List (Attribute msg)
+type alias LayoutStyle msg =
+    { container : List (Attribute msg)
+    , snackbar : SnackbarStyle msg
+    , layout : List (Attribute msg) -> Element msg -> Html msg
+    , header : List (Attribute msg)
+    , sheet : List (Attribute msg)
+    , sheetButton : ButtonStyle msg
+    , menuButton : ButtonStyle msg
+    , menuTabButton : ButtonStyle msg
+    , menuIcon : Element Never
+    , moreVerticalIcon : Element Never
+    , spacing : Int
+    , title : List (Attribute msg)
+    , searchIcon : Element Never
+    , search : List (Attribute msg)
+    , searchFill : List (Attribute msg)
     }
diff --git a/src/Widget/Style/Material.elm b/src/Widget/Style/Material.elm
new file mode 100644
index 0000000..6fec9c5
--- /dev/null
+++ b/src/Widget/Style/Material.elm
@@ -0,0 +1,606 @@
+module Widget.Style.Material exposing
+    ( Palette, defaultPalette
+    , buttonRow, containedButton, darkPalette, outlinedButton, row, textButton, toggleButton
+    )
+
+{-|
+
+
+# Style
+
+@docs style
+
+
+# Palette
+
+@docs Palette, defaultPalette
+
+
+# Button
+
+Material design comes with four types of buttons:
+
+  - Contained buttons for **primary** actions
+  - Outlined buttons for **secondary** actions
+  - Text buttons for normal actions
+  - Toggle buttons for **selecting** an action out of a group
+
+![All four types next to eachother](https://lh3.googleusercontent.com/WTxHKH2jzRSMpsFtwfL-FzlD2wpmFSclAEEx5x55hOpn4IaVcXuYg7DWk6ruqww8WCi-FOItzwz88LTMuTF_15zBTHxU22VCzvebDg=w1064-v0)
+_(Image taken from [material.io](https://material.io/components/buttons#usage))_
+
+| ![Use primary buttons for a single action](https://lh3.googleusercontent.com/O0Xmm8U4xZmXhpGjM1PZQi3K2HGGPhmurZV0Y-Fge-pWBMVIXeI2y_Pdgmsvc5k1pdW-MCsZw5wLPsIb4VEEW4_98RpJqSK_G3eyDg=w1064-v0) | ![Only use one primary button per group](https://lh3.googleusercontent.com/T9NXwqJ3_K_HZQm3_-Lhlp6O6E67OLmIpxC7239p6WLlCAxCa4s01lEgxyNz6uMdPdkpmiyu02RmvPCEfJRugyUuwkSyKuj-V9wupA=w1064-v0) |
+| ![Secondary buttons can be used like primary buttons. You can have multiple secondary buttons per group](https://lh3.googleusercontent.com/fNDmzeeVxcH-QHf_EWBCYny1sxKv4qs91qheWWYYwRyd-IEWJut9UtjOSVdbEvQbUC_E-Yh9wTJ_GQG3aXc8HdVT-uVicCAv1meoIQ=w1064-v0) | ![Use select buttons for different options](https://lh3.googleusercontent.com/esmi4QrTD57XxgjEwlR4LP9DenkSUkTUJPJfVhtBtdmahh5xifRJfV_ItOQp5Fm2EVeVORhtZfRqFBmdNzg3cZyW7pkKTCjJOYAfUg=w1064-v0) |
+_(Images taken from [material.io](https://material.io/components/buttons#usage))_
+
+-}
+
+import Color exposing (Color)
+import Color.Accessibility as Accessibility
+import Color.Convert as Convert
+import Element exposing (Attribute, Element)
+import Element.Background as Background
+import Element.Border as Border
+import Element.Font as Font
+import Html.Attributes as Attributes
+import Widget.Style
+    exposing
+        ( ButtonStyle
+        , ColumnStyle
+        , DialogStyle
+        , ExpansionPanelStyle
+        , RowStyle
+        , SnackbarStyle
+        , SortTableStyle
+        , TabStyle
+        , TextInputStyle
+        )
+
+
+
+{-------------------------------------------------------------------------------
+-- C O L O R
+-------------------------------------------------------------------------------}
+
+
+type alias Palette =
+    { primary : Color --Color.rgb255 0x62 0x00 0xEE
+    , secondary : Color --Color.rgb255 0x03 0xda 0xc6
+    , background : Color --Color.rgb255 0xFF 0xFF 0xFF
+    , surface : Color --Color.rgb255 0xFF 0xFF 0xFF
+    , error : Color --Color.rgb255 0xB0 0x00 0x20
+    , on :
+        { primary : Color --Color.rgb255 0xFF 0xFF 0xFF
+        , secondary : Color --Color.rgb255 0x00 0x00 0x00
+        , background : Color --Color.rgb255 0x00 0x00 0x00
+        , surface : Color --Color.rgb255 0x00 0x00 0x00
+        , error : Color --Color.rgb255 0xFF 0xFF 0xFF
+        }
+    }
+
+
+defaultPalette : Palette
+defaultPalette =
+    { primary = Color.rgb255 0x62 0x00 0xEE
+    , secondary = Color.rgb255 0x03 0xDA 0xC6
+    , background = Color.rgb255 0xFF 0xFF 0xFF
+    , surface = Color.rgb255 0xFF 0xFF 0xFF
+    , error = Color.rgb255 0xB0 0x00 0x20
+    , on =
+        { primary = Color.rgb255 0xFF 0xFF 0xFF
+        , secondary = Color.rgb255 0x00 0x00 0x00
+        , background = Color.rgb255 0x00 0x00 0x00
+        , surface = Color.rgb255 0x00 0x00 0x00
+        , error = Color.rgb255 0xFF 0xFF 0xFF
+        }
+    }
+
+
+darkPalette : Palette
+darkPalette =
+    { primary = Color.rgb255 0xBB 0x86 0xFC
+    , secondary = Color.rgb255 0x03 0xDA 0xC6
+    , background = Color.rgb255 0x12 0x12 0x12
+    , surface = Color.rgb255 0x12 0x12 0x12
+    , error = Color.rgb255 0xCF 0x66 0x79
+    , on =
+        { primary = Color.rgb255 0x00 0x00 0x00
+        , secondary = Color.rgb255 0x00 0x00 0x00
+        , background = Color.rgb255 0xFF 0xFF 0xFF
+        , surface = Color.rgb255 0xFF 0xFF 0xFF
+        , error = Color.rgb255 0x00 0x00 0x00
+        }
+    }
+
+
+buttonHoverOpacity : Float
+buttonHoverOpacity =
+    0.08
+
+
+buttonFocusOpacity : Float
+buttonFocusOpacity =
+    0.24
+
+
+buttonPressedOpacity : Float
+buttonPressedOpacity =
+    0.32
+
+
+buttonDisabledOpacity : Float
+buttonDisabledOpacity =
+    0.38
+
+
+buttonSelectedOpacity : Float
+buttonSelectedOpacity =
+    0.16
+
+
+accessibleTextColor : Color -> Color
+accessibleTextColor color =
+    if (1.05 / (Accessibility.luminance color + 0.05)) < 7 then
+        Color.rgb255 0 0 0
+
+    else
+        Color.rgb255 255 255 255
+
+
+{-| using noahzgordon/elm-color-extra for colors
+-}
+withShade : Color -> Float -> Color -> Color
+withShade c2 amount c1 =
+    let
+        alpha =
+            c1
+                |> Color.toRgba
+                |> .alpha
+
+        toCIELCH =
+            Convert.colorToLab
+                >> (\{ l, a, b } ->
+                        { l = l
+                        , c = sqrt (a * a + b * b)
+                        , h = atan2 b a
+                        }
+                   )
+
+        fromCIELCH =
+            (\{ l, c, h } ->
+                { l = l
+                , a = c * cos h
+                , b = c * sin h
+                }
+            )
+                >> Convert.labToColor
+
+        fun a b =
+            { l = (a.l * (1 - amount) + b.l * amount) / 1
+            , c = (a.c * (1 - amount) + b.c * amount) / 1
+            , h = (a.h * (1 - amount) + b.h * amount) / 1
+            }
+    in
+    fun (toCIELCH c1) (toCIELCH c2)
+        |> fromCIELCH
+        |> Color.toRgba
+        |> (\color -> { color | alpha = alpha })
+        |> Color.fromRgba
+
+
+scaleOpacity : Float -> Color -> Color
+scaleOpacity opacity =
+    Color.toRgba
+        >> (\color -> { color | alpha = color.alpha * opacity })
+        >> Color.fromRgba
+
+
+gray : Color
+gray =
+    Color.rgb255 0x77 0x77 0x77
+
+
+fromColor : Color -> Element.Color
+fromColor =
+    Color.toRgba >> Element.fromRgb
+
+
+shadow :
+    Float
+    ->
+        { offset : ( Float, Float )
+        , size : Float
+        , blur : Float
+        , color : Element.Color
+        }
+shadow float =
+    { color = Element.rgba255 0x00 0x00 0x00 0.2
+    , offset = ( 0, float )
+    , size = 0
+    , blur = float
+    }
+
+
+
+{-------------------------------------------------------------------------------
+-- B U T T O N
+-------------------------------------------------------------------------------}
+
+
+baseButton : Palette -> ButtonStyle msg
+baseButton _ =
+    { container =
+        [ Element.height <| Element.px 36
+        , Element.htmlAttribute <| Attributes.style "text-transform" "uppercase"
+        , Element.paddingXY 8 8
+        , Border.rounded <| 4
+        , Font.size 14
+        , Font.medium
+        , Font.letterSpacing 1.25
+        ]
+    , labelRow =
+        [ Element.spacing <| 8
+        , Element.width <| Element.minimum 32 <| Element.shrink
+        , Element.centerY
+        ]
+    , text = [ Element.centerX ]
+    , ifDisabled =
+        [ Element.htmlAttribute <| Attributes.style "cursor" "not-allowed"
+        ]
+    , ifActive = []
+    , otherwise = []
+    }
+
+
+containedButton : Palette -> ButtonStyle msg
+containedButton palette =
+    { container =
+        (baseButton palette |> .container)
+            ++ [ Border.shadow <| shadow 2
+               , Element.mouseDown
+                    [ palette.primary
+                        |> withShade palette.on.primary buttonPressedOpacity
+                        |> fromColor
+                        |> Background.color
+                    , palette.primary
+                        |> withShade palette.on.primary buttonPressedOpacity
+                        |> accessibleTextColor
+                        |> fromColor
+                        |> Font.color
+                    , Border.shadow <| shadow 12
+                    ]
+               , Element.mouseOver
+                    [ palette.primary
+                        |> withShade palette.on.primary buttonHoverOpacity
+                        |> fromColor
+                        |> Background.color
+                    , palette.primary
+                        |> withShade palette.on.primary buttonHoverOpacity
+                        |> accessibleTextColor
+                        |> fromColor
+                        |> Font.color
+                    , Border.shadow <| shadow 6
+                    ]
+               , Element.focused
+                    [ palette.primary
+                        |> withShade palette.on.primary buttonFocusOpacity
+                        |> fromColor
+                        |> Background.color
+                    , palette.primary
+                        |> withShade palette.on.primary buttonFocusOpacity
+                        |> accessibleTextColor
+                        |> fromColor
+                        |> Font.color
+                    , Border.shadow <| shadow 6
+                    ]
+               ]
+    , labelRow =
+        (baseButton palette |> .labelRow)
+            ++ [ Element.paddingXY 8 0
+               ]
+    , text = baseButton palette |> .text
+    , ifDisabled =
+        (baseButton palette |> .ifDisabled)
+            ++ [ gray
+                    |> scaleOpacity buttonDisabledOpacity
+                    |> fromColor
+                    |> Background.color
+               , Font.color <| fromColor <| gray
+               , Border.shadow <| shadow 0
+               , Element.mouseDown []
+               , Element.mouseOver []
+               , Element.focused []
+               ]
+    , ifActive =
+        [ palette.primary
+            |> withShade palette.on.primary buttonHoverOpacity
+            |> fromColor
+            |> Background.color
+        , palette.primary
+            |> withShade palette.on.primary buttonHoverOpacity
+            |> accessibleTextColor
+            |> fromColor
+            |> Font.color
+        ]
+    , otherwise =
+        [ palette.primary
+            |> fromColor
+            |> Background.color
+        , palette.primary
+            |> accessibleTextColor
+            |> fromColor
+            |> Font.color
+        ]
+    }
+
+
+outlinedButton : Palette -> ButtonStyle msg
+outlinedButton palette =
+    { container =
+        (baseButton palette |> .container)
+            ++ [ Border.width <| 1
+               , Border.color <| fromColor <| gray
+               , Font.color <| fromColor <| palette.primary
+               , Element.mouseDown
+                    [ palette.primary
+                        |> scaleOpacity buttonPressedOpacity
+                        |> fromColor
+                        |> Background.color
+                    , gray
+                        |> withShade palette.primary buttonPressedOpacity
+                        |> fromColor
+                        |> Border.color
+                    ]
+               , Element.mouseOver
+                    [ palette.primary
+                        |> scaleOpacity buttonHoverOpacity
+                        |> fromColor
+                        |> Background.color
+                    , gray
+                        |> withShade palette.primary buttonHoverOpacity
+                        |> fromColor
+                        |> Border.color
+                    ]
+               , Element.focused
+                    [ palette.primary
+                        |> scaleOpacity buttonFocusOpacity
+                        |> fromColor
+                        |> Background.color
+                    , gray
+                        |> withShade palette.primary buttonFocusOpacity
+                        |> fromColor
+                        |> Border.color
+                    ]
+               ]
+    , labelRow =
+        (baseButton palette |> .labelRow)
+            ++ [ Element.paddingXY 8 0
+               ]
+    , text = baseButton palette |> .text
+    , ifDisabled =
+        (baseButton palette |> .ifDisabled)
+            ++ [ gray
+                    |> fromColor
+                    |> Font.color
+               , Element.mouseDown []
+               , Element.mouseOver []
+               , Element.focused []
+               ]
+    , ifActive =
+        [ palette.primary
+            |> scaleOpacity buttonHoverOpacity
+            |> fromColor
+            |> Background.color
+        , gray
+            |> withShade palette.primary buttonHoverOpacity
+            |> fromColor
+            |> Border.color
+        ]
+    , otherwise =
+        []
+    }
+
+
+textButton : Palette -> ButtonStyle msg
+textButton palette =
+    { container =
+        (baseButton palette |> .container)
+            ++ [ Font.color <| fromColor <| palette.primary
+               , Element.mouseDown
+                    [ palette.primary
+                        |> scaleOpacity buttonPressedOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               , Element.mouseOver
+                    [ palette.primary
+                        |> scaleOpacity buttonHoverOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               , Element.focused
+                    [ palette.primary
+                        |> scaleOpacity buttonFocusOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               ]
+    , labelRow = baseButton palette |> .labelRow
+    , text = baseButton palette |> .text
+    , ifDisabled =
+        (baseButton palette |> .ifDisabled)
+            ++ [ gray
+                    |> fromColor
+                    |> Font.color
+               , Element.mouseDown []
+               , Element.mouseOver []
+               , Element.focused []
+               ]
+    , ifActive =
+        [ palette.primary
+            |> scaleOpacity buttonHoverOpacity
+            |> fromColor
+            |> Background.color
+        ]
+    , otherwise =
+        []
+    }
+
+
+{-| Implementation Detail:
+
+  - Border color was not defined in the [specification](https://material.io/components/buttons#toggle-button)
+
+-}
+toggleButton : Palette -> ButtonStyle msg
+toggleButton palette =
+    { container =
+        [ Element.width <| Element.px 48
+        , Element.height <| Element.px 48
+        , Element.padding 4
+        , Element.htmlAttribute <| Attributes.style "text-transform" "uppercase"
+        , Border.width <| 1
+        , Font.size 14
+        , Font.medium
+        , Font.letterSpacing 1.25
+        , Element.mouseDown
+            [ palette.surface
+                |> withShade palette.on.surface buttonPressedOpacity
+                |> fromColor
+                |> Background.color
+            , palette.surface
+                |> withShade palette.on.surface buttonPressedOpacity
+                |> accessibleTextColor
+                |> fromColor
+                |> Font.color
+            , palette.on.surface
+                |> scaleOpacity 0.14
+                |> withShade palette.on.surface buttonPressedOpacity
+                |> fromColor
+                |> Border.color
+            ]
+        , Element.mouseOver
+            [ palette.surface
+                |> withShade palette.on.surface buttonHoverOpacity
+                |> fromColor
+                |> Background.color
+            , palette.surface
+                |> withShade palette.on.surface buttonHoverOpacity
+                |> accessibleTextColor
+                |> fromColor
+                |> Font.color
+            , palette.on.surface
+                |> scaleOpacity 0.14
+                |> withShade palette.on.surface buttonHoverOpacity
+                |> fromColor
+                |> Border.color
+            ]
+        , Element.focused []
+        ]
+    , labelRow =
+        [ Element.spacing <| 8
+        , Element.height Element.fill
+        , Element.width Element.fill
+        , Border.rounded 24
+        , Element.padding 8
+        , Element.focused
+            [ palette.surface
+                |> withShade palette.on.surface buttonFocusOpacity
+                |> fromColor
+                |> Background.color
+            , palette.surface
+                |> withShade palette.on.surface buttonFocusOpacity
+                |> accessibleTextColor
+                |> fromColor
+                |> Font.color
+            ]
+        ]
+    , text = [ Element.centerX ]
+    , ifDisabled =
+        [ palette.surface
+            |> fromColor
+            |> Background.color
+        , palette.on.surface
+            |> scaleOpacity 0.14
+            |> fromColor
+            |> Border.color
+        , gray
+            |> fromColor
+            |> Font.color
+        , Element.mouseDown []
+        , Element.mouseOver []
+        ]
+    , ifActive =
+        [ palette.surface
+            |> withShade palette.on.surface buttonSelectedOpacity
+            |> fromColor
+            |> Background.color
+        , palette.surface
+            |> withShade palette.on.surface buttonSelectedOpacity
+            |> accessibleTextColor
+            |> fromColor
+            |> Font.color
+        , palette.on.surface
+            |> scaleOpacity 0.14
+            |> withShade palette.on.surface buttonSelectedOpacity
+            |> fromColor
+            |> Border.color
+        , Element.mouseOver []
+        ]
+    , otherwise =
+        [ palette.surface
+            |> fromColor
+            |> Background.color
+        , palette.surface
+            |> accessibleTextColor
+            |> fromColor
+            |> Font.color
+        , palette.on.surface
+            |> scaleOpacity 0.14
+            |> fromColor
+            |> Border.color
+        ]
+    }
+
+
+
+{-------------------------------------------------------------------------------
+-- L I S T
+-------------------------------------------------------------------------------}
+
+
+row : RowStyle msg
+row =
+    { containerRow = [ Element.spacing 8 ]
+    , element = []
+    , ifFirst = []
+    , ifLast = []
+    , otherwise = []
+    }
+
+
+buttonRow : RowStyle msg
+buttonRow =
+    { containerRow = []
+    , element =
+        [ Border.rounded 2
+        ]
+    , ifFirst =
+        [ Border.roundEach
+            { topLeft = 2
+            , topRight = 0
+            , bottomLeft = 2
+            , bottomRight = 0
+            }
+        ]
+    , ifLast =
+        [ Border.roundEach
+            { topLeft = 0
+            , topRight = 2
+            , bottomLeft = 0
+            , bottomRight = 2
+            }
+        ]
+    , otherwise =
+        [ Border.rounded 0
+        ]
+    }
diff --git a/src/Widget/Style/Template.elm b/src/Widget/Style/Template.elm
new file mode 100644
index 0000000..2e303c2
--- /dev/null
+++ b/src/Widget/Style/Template.elm
@@ -0,0 +1,167 @@
+module Widget.Style.Template exposing (box, button, column, decoration, dialog, expansionPanel, icon, layout, row, snackbar, sortTable, tab, textInput)
+
+import Element exposing (Attribute, Element)
+import Element.Background as Background
+import Element.Border as Border
+import Element.Font as Font
+import Widget.Style
+    exposing
+        ( ButtonStyle
+        , ColumnStyle
+        , DialogStyle
+        , ExpansionPanelStyle
+        , LayoutStyle
+        , RowStyle
+        , SnackbarStyle
+        , SortTableStyle
+        , TabStyle
+        , TextInputStyle
+        )
+
+
+fontSize : Int
+fontSize =
+    10
+
+
+box : String -> List (Attribute msg)
+box string =
+    [ Border.width 1
+    , Background.color <| Element.rgba 1 1 1 0.5
+    , Element.padding 10
+    , Element.spacing 10
+    , Element.above <|
+        Element.el [ Font.size <| fontSize ] <|
+            Element.text string
+    ]
+
+
+decoration : String -> List (Attribute msg)
+decoration string =
+    [ Element.below <|
+        Element.el [ Font.size <| fontSize ] <|
+            Element.text string
+    , Background.color <| Element.rgb 0.66 0.66 0.66
+    ]
+
+
+icon : String -> Element msg
+icon string =
+    Element.none
+        |> Element.el
+            [ Element.width <| Element.px 12
+            , Element.height <| Element.px 12
+            , Border.rounded 6
+            , Border.width 1
+            , Element.above <|
+                Element.el [ Font.size <| fontSize ] <|
+                    Element.text string
+            ]
+
+
+button : String -> ButtonStyle msg
+button string =
+    { container = box <| string ++ ":container"
+    , labelRow = box <| string ++ ":labelRow"
+    , text = box <| string ++ ":text"
+    , ifDisabled = decoration <| string ++ ":ifDisabled"
+    , ifActive = decoration <| string ++ ":ifActive"
+    , otherwise = decoration <| string ++ ":otherwise"
+    }
+
+
+snackbar : String -> SnackbarStyle msg
+snackbar string =
+    { containerRow = box <| string ++ ":containerRow"
+    , button = button <| string ++ ":button"
+    , text = box <| string ++ ":text"
+    }
+
+
+dialog : String -> DialogStyle msg
+dialog string =
+    { containerColumn = box <| string ++ ":containerColumn"
+    , title = box <| string ++ ":title"
+    , buttonRow = box <| string ++ ":buttonRow"
+    , acceptButton = button <| string ++ ":acceptButton"
+    , dismissButton = button <| string ++ ":dismissButton"
+    }
+
+
+expansionPanel : String -> ExpansionPanelStyle msg
+expansionPanel string =
+    { containerColumn = box <| string ++ ":containerColumn"
+    , panelRow = box <| string ++ ":panelRow"
+    , labelRow = box <| string ++ ":labelRow"
+    , content = box <| string ++ ":content"
+    , expandIcon = icon <| string ++ ":expandIcon"
+    , collapseIcon = icon <| string ++ ":collapseIcon"
+    }
+
+
+textInput : String -> TextInputStyle msg
+textInput string =
+    { chipButton = button <| string ++ ":chipButton"
+    , chipsRow = box <| string ++ ":chipsRow"
+    , containerRow = box <| string ++ ":containerRow"
+    , input = box <| string ++ ":input"
+    }
+
+
+tab : String -> TabStyle msg
+tab string =
+    { button = button <| string ++ ":button"
+    , optionRow = box <| string ++ ":optionRow"
+    , containerColumn = box <| string ++ ":containerColumn"
+    , content = box <| string ++ ":content"
+    }
+
+
+row : String -> RowStyle msg
+row string =
+    { containerRow = box <| string ++ ":containerRow"
+    , element = box <| string ++ ":element"
+    , ifFirst = box <| string ++ ":ifFirst"
+    , ifLast = box <| string ++ ":ifLast"
+    , otherwise = box <| string ++ ":otherwise"
+    }
+
+
+column : String -> ColumnStyle msg
+column string =
+    { containerColumn = box <| string ++ ":containerColumn"
+    , element = box <| string ++ ":element"
+    , ifFirst = box <| string ++ ":ifFirst"
+    , ifLast = box <| string ++ ":ifLast"
+    , otherwise = box <| string ++ ":otherwise"
+    }
+
+
+sortTable : String -> SortTableStyle msg
+sortTable string =
+    { containerTable = box <| string ++ ":containerTable"
+    , headerButton = button <| string ++ ":headerButton"
+    , ascIcon = icon <| string ++ ":ascIcon"
+    , descIcon = icon <| string ++ ":descIcon"
+    , defaultIcon = icon <| string ++ ":defaultIcon"
+    }
+
+
+layout : String -> LayoutStyle msg
+layout string =
+    { container = box <| string ++ ":container"
+    , snackbar = snackbar <| string ++ "snackbar"
+    , layout = Element.layout
+    , header = box <| string ++ "header"
+    , menuButton = button <| string ++ "menuButton"
+    , sheetButton = button <| string ++ "sheetButton"
+    , menuTabButton = button <| string ++ "menuTabButton"
+    , sheet = box <| string ++ "sheet"
+    , menuIcon = icon <| string ++ "menuIcon"
+    , moreVerticalIcon = icon <| string ++ "moreVerticalIcon"
+    , spacing = 8
+    , title = box <| string ++ "title"
+    , searchIcon = icon <| string ++ "searchIcon"
+    , search = box <| string ++ "search"
+    , searchFill = box <| string ++ "searchFill"
+    }

From 31dc7c09ddd69d29f5ac08581d721e2e9b6348cf Mon Sep 17 00:00:00 2001
From: Unknown 
Date: Sun, 24 May 2020 07:00:09 +0200
Subject: [PATCH 10/14] Added more styling

---
 example/src/Data/Style/ElmUiFramework.elm |   1 +
 example/src/Data/Style/Material.elm       |  50 +-
 example/src/Example/Dialog.elm            |   6 +-
 example/src/Main.elm                      |  18 +-
 src/Internal/Dialog.elm                   |   9 +-
 src/Internal/TextInput.elm                |   6 +-
 src/Widget.elm                            |   2 +-
 src/Widget/Style.elm                      |   1 +
 src/Widget/Style/Material.elm             | 798 ++++++++++++++++------
 src/Widget/Style/Template.elm             |  25 +-
 10 files changed, 673 insertions(+), 243 deletions(-)

diff --git a/example/src/Data/Style/ElmUiFramework.elm b/example/src/Data/Style/ElmUiFramework.elm
index 0b74a43..6cb4486 100644
--- a/example/src/Data/Style/ElmUiFramework.elm
+++ b/example/src/Data/Style/ElmUiFramework.elm
@@ -195,6 +195,7 @@ dialog =
                , Element.width <| Element.minimum 280 <| Element.maximum 560 <| Element.fill
                ]
     , title = Heading.h3
+    , text = []
     , buttonRow =
         Grid.simple
             ++ [ Element.paddingEach
diff --git a/example/src/Data/Style/Material.elm b/example/src/Data/Style/Material.elm
index 4ce147c..5e27964 100644
--- a/example/src/Data/Style/Material.elm
+++ b/example/src/Data/Style/Material.elm
@@ -24,22 +24,56 @@ import Widget.Style
         )
 import Widget.Style.Material as Material exposing (Palette)
 import Widget.Style.Template as Template
+import Icons
+
+sortTable : Palette -> SortTableStyle msg
+sortTable palette =
+    { containerTable = []
+    , headerButton = Material.textButton palette
+    , ascIcon = Icons.chevronUp |> Element.html |> Element.el []
+    , descIcon = Icons.chevronDown |> Element.html |> Element.el []
+    , defaultIcon = Element.none
+    }
+
+layout : Palette -> String -> LayoutStyle msg
+layout palette string =
+    { container = [Font.family
+            [ Font.typeface "Roboto"
+            , Font.sansSerif
+            ]
+        ,Font.size 16
+    , Font.letterSpacing 0.5]
+    , snackbar = Material.snackbar palette
+    , layout = Element.layout
+    , header = Template.box <| string ++ ":header"
+    , menuButton = Template.button <| string ++ ":menuButton"
+    , sheetButton = Template.button <| string ++ ":sheetButton"
+    , menuTabButton = Template.button <| string ++ ":menuTabButton"
+    , sheet = Template.box <| string ++ ":sheet"
+    , menuIcon = Template.icon <| string ++ ":menuIcon"
+    , moreVerticalIcon = Template.icon <| string ++ ":moreVerticalIcon"
+    , spacing = 8
+    , title = Template.box <| string ++ ":title"
+    , searchIcon = Template.icon <| string ++ ":searchIcon"
+    , search = Template.box <| string ++ ":search"
+    , searchFill = Template.box <| string ++ ":searchFill"
+    }
 
 
 style : Palette -> Style msg
 style palette =
-    { sortTable = Template.sortTable <| "sortTable"
+    { sortTable = sortTable palette
     , row = Material.row
     , buttonRow = Material.buttonRow
-    , cardColumn = Template.column <| "cardRow"
-    , column = Template.column <| "column"
+    , cardColumn = Material.cardColumn palette
+    , column = Material.column
     , button = Material.outlinedButton palette
     , primaryButton = Material.containedButton palette
     , selectButton = Material.toggleButton palette
     , tab = Template.tab <| "tab"
-    , textInput = Template.textInput <| "textInput"
-    , chipButton = Template.button <| "Button"
-    , expansionPanel = Template.expansionPanel "expansionPanel"
-    , dialog = Template.dialog <| "dialog"
-    , layout = Template.layout "layout"
+    , textInput = Material.textInput palette
+    , chipButton = Material.chip palette
+    , expansionPanel = Material.expansionPanel palette
+    , dialog = Material.alertDialog palette
+    , layout = layout palette "layout"
     }
diff --git a/example/src/Example/Dialog.elm b/example/src/Example/Dialog.elm
index 1d2a50e..2153615 100644
--- a/example/src/Example/Dialog.elm
+++ b/example/src/Example/Dialog.elm
@@ -62,11 +62,7 @@ view msgMapper style (IsOpen isOpen) =
              , Element.width <| Element.minimum 400 <| Element.fill
              ]
                 ++ (if isOpen then
-                        { body =
-                            "This is a dialog window"
-                                |> Element.text
-                                |> List.singleton
-                                |> Element.paragraph []
+                        { text = "This is a dialog window"
                         , title = Just "Dialog"
                         , accept =
                             Just
diff --git a/example/src/Main.elm b/example/src/Main.elm
index 37e4f24..4edb930 100644
--- a/example/src/Main.elm
+++ b/example/src/Main.elm
@@ -132,11 +132,7 @@ view model =
                 Layout.view style.layout
                     { dialog =
                         if m.displayDialog then
-                            { body =
-                                "This is a dialog window"
-                                    |> Element.text
-                                    |> List.singleton
-                                    |> Element.paragraph []
+                            { text = "This is a dialog window"
                             , title = Just "Dialog"
                             , accept =
                                 Just
@@ -210,18 +206,6 @@ view model =
                           , text = "Dark Material Theme"
                           , icon = Icons.penTool |> Element.html |> Element.el []
                           }
-                        , { onPress = Nothing
-                          , text = "Placeholder"
-                          , icon = Icons.circle |> Element.html |> Element.el []
-                          }
-                        , { onPress = Nothing
-                          , text = "Placeholder"
-                          , icon = Icons.triangle |> Element.html |> Element.el []
-                          }
-                        , { onPress = Nothing
-                          , text = "Placeholder"
-                          , icon = Icons.square |> Element.html |> Element.el []
-                          }
                         ]
                     , onChangedSidebar = ChangedSidebar
                     , title =
diff --git a/src/Internal/Dialog.elm b/src/Internal/Dialog.elm
index 97a55eb..8470820 100644
--- a/src/Internal/Dialog.elm
+++ b/src/Internal/Dialog.elm
@@ -9,7 +9,7 @@ import Widget.Style exposing (DialogStyle)
 
 type alias Dialog msg =
     { title : Maybe String
-    , body : Element msg
+    , text : String
     , accept : Maybe (TextButton msg)
     , dismiss : Maybe (TextButton msg)
     }
@@ -38,7 +38,7 @@ dialog :
     DialogStyle msg
     -> Dialog msg
     -> List (Attribute msg)
-dialog style { title, body, accept, dismiss } =
+dialog style { title, text, accept, dismiss } =
     { onDismiss =
         case ( accept, dismiss ) of
             ( Nothing, Nothing ) ->
@@ -62,7 +62,10 @@ dialog style { title, body, accept, dismiss } =
                         >> Element.el style.title
                     )
                 |> Maybe.withDefault Element.none
-            , body
+            , text
+                |> Element.text
+                |> List.singleton
+                |> Element.paragraph style.text
             , Element.row
                 ([ Element.alignRight
                  , Element.width <| Element.shrink
diff --git a/src/Internal/TextInput.elm b/src/Internal/TextInput.elm
index 4d56f81..c4725f5 100644
--- a/src/Internal/TextInput.elm
+++ b/src/Internal/TextInput.elm
@@ -23,7 +23,11 @@ textInput style { chips, placeholder, label, text, onChange } =
 
           else
             chips
-                |> List.map (Button.button style.chipButton)
+                |> List.map
+                    (Button.button style.chipButton
+                        --Workaround for https://github.com/mdgriffith/elm-ui/issues/47
+                        >> Element.el []
+                    )
                 |> Element.row style.chipsRow
         , Input.text style.input
             { onChange = onChange
diff --git a/src/Widget.elm b/src/Widget.elm
index a2ff771..86ddaad 100644
--- a/src/Widget.elm
+++ b/src/Widget.elm
@@ -233,7 +233,7 @@ dialog :
     DialogStyle msg
     ->
         { title : Maybe String
-        , body : Element msg
+        , text : String
         , accept : Maybe (TextButton msg)
         , dismiss : Maybe (TextButton msg)
         }
diff --git a/src/Widget/Style.elm b/src/Widget/Style.elm
index 6a183c6..605f7ba 100644
--- a/src/Widget/Style.elm
+++ b/src/Widget/Style.elm
@@ -20,6 +20,7 @@ type alias DialogStyle msg =
     , buttonRow : List (Attribute msg)
     , acceptButton : ButtonStyle msg
     , dismissButton : ButtonStyle msg
+    , text : List (Attribute msg)
     }
 
 
diff --git a/src/Widget/Style/Material.elm b/src/Widget/Style/Material.elm
index 6fec9c5..7414537 100644
--- a/src/Widget/Style/Material.elm
+++ b/src/Widget/Style/Material.elm
@@ -1,6 +1,11 @@
 module Widget.Style.Material exposing
     ( Palette, defaultPalette
-    , buttonRow, containedButton, darkPalette, outlinedButton, row, textButton, toggleButton
+    , containedButton, outlinedButton, textButton
+    , toggleButton, buttonRow
+    , alertDialog
+    , row, column, cardColumn
+    , expansionPanel
+    , chip, darkPalette, snackbar, textInput
     )
 
 {-|
@@ -18,19 +23,24 @@ module Widget.Style.Material exposing
 
 # Button
 
-Material design comes with four types of buttons:
+@docs containedButton, outlinedButton, textButton
 
-  - Contained buttons for **primary** actions
-  - Outlined buttons for **secondary** actions
-  - Text buttons for normal actions
-  - Toggle buttons for **selecting** an action out of a group
+@docs toggleButton, buttonRow
 
-![All four types next to eachother](https://lh3.googleusercontent.com/WTxHKH2jzRSMpsFtwfL-FzlD2wpmFSclAEEx5x55hOpn4IaVcXuYg7DWk6ruqww8WCi-FOItzwz88LTMuTF_15zBTHxU22VCzvebDg=w1064-v0)
-_(Image taken from [material.io](https://material.io/components/buttons#usage))_
 
-| ![Use primary buttons for a single action](https://lh3.googleusercontent.com/O0Xmm8U4xZmXhpGjM1PZQi3K2HGGPhmurZV0Y-Fge-pWBMVIXeI2y_Pdgmsvc5k1pdW-MCsZw5wLPsIb4VEEW4_98RpJqSK_G3eyDg=w1064-v0) | ![Only use one primary button per group](https://lh3.googleusercontent.com/T9NXwqJ3_K_HZQm3_-Lhlp6O6E67OLmIpxC7239p6WLlCAxCa4s01lEgxyNz6uMdPdkpmiyu02RmvPCEfJRugyUuwkSyKuj-V9wupA=w1064-v0) |
-| ![Secondary buttons can be used like primary buttons. You can have multiple secondary buttons per group](https://lh3.googleusercontent.com/fNDmzeeVxcH-QHf_EWBCYny1sxKv4qs91qheWWYYwRyd-IEWJut9UtjOSVdbEvQbUC_E-Yh9wTJ_GQG3aXc8HdVT-uVicCAv1meoIQ=w1064-v0) | ![Use select buttons for different options](https://lh3.googleusercontent.com/esmi4QrTD57XxgjEwlR4LP9DenkSUkTUJPJfVhtBtdmahh5xifRJfV_ItOQp5Fm2EVeVORhtZfRqFBmdNzg3cZyW7pkKTCjJOYAfUg=w1064-v0) |
-_(Images taken from [material.io](https://material.io/components/buttons#usage))_
+# Dialog
+
+@docs alertDialog
+
+
+# List
+
+@docs row, column, cardColumn
+
+
+# Expansion Panel
+
+@docs expansionPanel
 
 -}
 
@@ -42,6 +52,8 @@ import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
 import Html.Attributes as Attributes
+import Svg exposing (Svg)
+import Svg.Attributes
 import Widget.Style
     exposing
         ( ButtonStyle
@@ -57,6 +69,29 @@ import Widget.Style
 
 
 
+{-------------------------------------------------------------------------------
+-- T Y P O G R A P H Y
+-------------------------------------------------------------------------------}
+
+
+buttonFont : List (Attribute msg)
+buttonFont =
+    [ Element.htmlAttribute <| Attributes.style "text-transform" "uppercase"
+    , Font.size 14
+    , Font.semiBold --medium
+    , Font.letterSpacing 1.25
+    ]
+
+
+h6 : List (Attribute msg)
+h6 =
+    [ Font.size 20
+    , Font.semiBold --medium
+    , Font.letterSpacing 0.15
+    ]
+
+
+
 {-------------------------------------------------------------------------------
 -- C O L O R
 -------------------------------------------------------------------------------}
@@ -139,13 +174,91 @@ buttonSelectedOpacity =
 
 accessibleTextColor : Color -> Color
 accessibleTextColor color =
-    if (1.05 / (Accessibility.luminance color + 0.05)) < 7 then
+    let
+        l : Float
+        l =
+            1
+                + (color |> Color.toRgba |> .alpha)
+                * (Accessibility.luminance color - 1)
+    in
+    if (1.05 / (l + 0.05)) < 7 then
         Color.rgb255 0 0 0
 
     else
         Color.rgb255 255 255 255
 
 
+accessibleWithTextColor : Color -> Color -> Color
+accessibleWithTextColor c color =
+    let
+        l1 : Float
+        l1 =
+            1
+                + (c |> Color.toRgba |> .alpha)
+                * (Accessibility.luminance c - 1)
+
+        l2 : Float
+        l2 =
+            1
+                + (color |> Color.toRgba |> .alpha)
+                * (Accessibility.luminance color - 1)
+
+        newConstrast : Float
+        newConstrast =
+            7
+
+        lighterLuminance : Float
+        lighterLuminance =
+            newConstrast * (l2 + 0.05) - 0.05
+
+        darkerLuminance : Float
+        darkerLuminance =
+            (l2 + 0.05) - 0.05 / newConstrast
+    in
+    c
+        |> (if l1 > l2 then
+                if ((l1 + 0.05) / (l2 + 0.05)) < 7 then
+                    Convert.colorToLab
+                        >> (\col ->
+                                { col | l = 100 * lighterLuminance }
+                           )
+                        >> Convert.labToColor
+
+                else
+                    identity
+
+            else if ((l2 + 0.05) / (l1 + 0.05)) < 7 then
+                Convert.colorToLab
+                    >> (\col ->
+                            { col | l = 100 * darkerLuminance }
+                       )
+                    >> Convert.labToColor
+
+            else
+                identity
+           )
+
+
+toCIELCH =
+    Convert.colorToLab
+        >> (\{ l, a, b } ->
+                { l = l
+                , c = sqrt (a * a + b * b)
+                , h = atan2 b a
+                }
+           )
+
+
+fromCIELCH =
+    (\{ l, c, h } ->
+        { l = l
+        , a = c * cos h
+        , b = c * sin h
+        }
+    )
+        >> Convert.labToColor
+
+
 {-| using noahzgordon/elm-color-extra for colors
 -}
 withShade : Color -> Float -> Color -> Color
@@ -156,24 +269,6 @@ withShade c2 amount c1 =
                 |> Color.toRgba
                 |> .alpha
 
-        toCIELCH =
-            Convert.colorToLab
-                >> (\{ l, a, b } ->
-                        { l = l
-                        , c = sqrt (a * a + b * b)
-                        , h = atan2 b a
-                        }
-                   )
-
-        fromCIELCH =
-            (\{ l, c, h } ->
-                { l = l
-                , a = c * cos h
-                , b = c * sin h
-                }
-            )
-                >> Convert.labToColor
-
         fun a b =
             { l = (a.l * (1 - amount) + b.l * amount) / 1
             , c = (a.c * (1 - amount) + b.c * amount) / 1
@@ -199,6 +294,11 @@ gray =
     Color.rgb255 0x77 0x77 0x77
 
 
+dark : Color
+dark =
+    Color.rgb255 50 50 50
+
+
 fromColor : Color -> Element.Color
 fromColor =
     Color.toRgba >> Element.fromRgb
@@ -220,6 +320,18 @@ shadow float =
     }
 
 
+textAndBackground : Color -> List (Element.Attr decorative msg)
+textAndBackground color =
+    [ color
+        |> fromColor
+        |> Background.color
+    , color
+        |> accessibleTextColor
+        |> fromColor
+        |> Font.color
+    ]
+
+
 
 {-------------------------------------------------------------------------------
 -- B U T T O N
@@ -229,14 +341,11 @@ shadow float =
 baseButton : Palette -> ButtonStyle msg
 baseButton _ =
     { container =
-        [ Element.height <| Element.px 36
-        , Element.htmlAttribute <| Attributes.style "text-transform" "uppercase"
-        , Element.paddingXY 8 8
-        , Border.rounded <| 4
-        , Font.size 14
-        , Font.medium
-        , Font.letterSpacing 1.25
-        ]
+        buttonFont
+            ++ [ Element.height <| Element.px 36
+               , Element.paddingXY 8 8
+               , Border.rounded <| 4
+               ]
     , labelRow =
         [ Element.spacing <| 8
         , Element.width <| Element.minimum 32 <| Element.shrink
@@ -256,42 +365,24 @@ containedButton palette =
     { container =
         (baseButton palette |> .container)
             ++ [ Border.shadow <| shadow 2
-               , Element.mouseDown
-                    [ palette.primary
+               , Element.mouseDown <|
+                    (palette.primary
                         |> withShade palette.on.primary buttonPressedOpacity
-                        |> fromColor
-                        |> Background.color
-                    , palette.primary
-                        |> withShade palette.on.primary buttonPressedOpacity
-                        |> accessibleTextColor
-                        |> fromColor
-                        |> Font.color
-                    , Border.shadow <| shadow 12
-                    ]
-               , Element.mouseOver
-                    [ palette.primary
-                        |> withShade palette.on.primary buttonHoverOpacity
-                        |> fromColor
-                        |> Background.color
-                    , palette.primary
-                        |> withShade palette.on.primary buttonHoverOpacity
-                        |> accessibleTextColor
-                        |> fromColor
-                        |> Font.color
-                    , Border.shadow <| shadow 6
-                    ]
-               , Element.focused
-                    [ palette.primary
+                        |> textAndBackground
+                    )
+                        ++ [ Border.shadow <| shadow 12 ]
+               , Element.focused <|
+                    (palette.primary
                         |> withShade palette.on.primary buttonFocusOpacity
-                        |> fromColor
-                        |> Background.color
-                    , palette.primary
-                        |> withShade palette.on.primary buttonFocusOpacity
-                        |> accessibleTextColor
-                        |> fromColor
-                        |> Font.color
-                    , Border.shadow <| shadow 6
-                    ]
+                        |> textAndBackground
+                    )
+                        ++ [ Border.shadow <| shadow 6 ]
+               , Element.mouseOver <|
+                    (palette.primary
+                        |> withShade palette.on.primary buttonHoverOpacity
+                        |> textAndBackground
+                    )
+                        ++ [ Border.shadow <| shadow 6 ]
                ]
     , labelRow =
         (baseButton palette |> .labelRow)
@@ -311,25 +402,12 @@ containedButton palette =
                , Element.focused []
                ]
     , ifActive =
-        [ palette.primary
+        palette.primary
             |> withShade palette.on.primary buttonHoverOpacity
-            |> fromColor
-            |> Background.color
-        , palette.primary
-            |> withShade palette.on.primary buttonHoverOpacity
-            |> accessibleTextColor
-            |> fromColor
-            |> Font.color
-        ]
+            |> textAndBackground
     , otherwise =
-        [ palette.primary
-            |> fromColor
-            |> Background.color
-        , palette.primary
-            |> accessibleTextColor
-            |> fromColor
-            |> Font.color
-        ]
+        palette.primary
+            |> textAndBackground
     }
 
 
@@ -350,16 +428,6 @@ outlinedButton palette =
                         |> fromColor
                         |> Border.color
                     ]
-               , Element.mouseOver
-                    [ palette.primary
-                        |> scaleOpacity buttonHoverOpacity
-                        |> fromColor
-                        |> Background.color
-                    , gray
-                        |> withShade palette.primary buttonHoverOpacity
-                        |> fromColor
-                        |> Border.color
-                    ]
                , Element.focused
                     [ palette.primary
                         |> scaleOpacity buttonFocusOpacity
@@ -370,6 +438,16 @@ outlinedButton palette =
                         |> fromColor
                         |> Border.color
                     ]
+               , Element.mouseOver
+                    [ palette.primary
+                        |> scaleOpacity buttonHoverOpacity
+                        |> fromColor
+                        |> Background.color
+                    , gray
+                        |> withShade palette.primary buttonHoverOpacity
+                        |> fromColor
+                        |> Border.color
+                    ]
                ]
     , labelRow =
         (baseButton palette |> .labelRow)
@@ -411,18 +489,18 @@ textButton palette =
                         |> fromColor
                         |> Background.color
                     ]
-               , Element.mouseOver
-                    [ palette.primary
-                        |> scaleOpacity buttonHoverOpacity
-                        |> fromColor
-                        |> Background.color
-                    ]
                , Element.focused
                     [ palette.primary
                         |> scaleOpacity buttonFocusOpacity
                         |> fromColor
                         |> Background.color
                     ]
+               , Element.mouseOver
+                    [ palette.primary
+                        |> scaleOpacity buttonHoverOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
                ]
     , labelRow = baseButton palette |> .labelRow
     , text = baseButton palette |> .text
@@ -454,111 +532,164 @@ textButton palette =
 toggleButton : Palette -> ButtonStyle msg
 toggleButton palette =
     { container =
-        [ Element.width <| Element.px 48
-        , Element.height <| Element.px 48
-        , Element.padding 4
-        , Element.htmlAttribute <| Attributes.style "text-transform" "uppercase"
-        , Border.width <| 1
-        , Font.size 14
-        , Font.medium
-        , Font.letterSpacing 1.25
-        , Element.mouseDown
-            [ palette.surface
-                |> withShade palette.on.surface buttonPressedOpacity
-                |> fromColor
-                |> Background.color
-            , palette.surface
-                |> withShade palette.on.surface buttonPressedOpacity
-                |> accessibleTextColor
-                |> fromColor
-                |> Font.color
-            , palette.on.surface
-                |> scaleOpacity 0.14
-                |> withShade palette.on.surface buttonPressedOpacity
-                |> fromColor
-                |> Border.color
-            ]
-        , Element.mouseOver
-            [ palette.surface
-                |> withShade palette.on.surface buttonHoverOpacity
-                |> fromColor
-                |> Background.color
-            , palette.surface
-                |> withShade palette.on.surface buttonHoverOpacity
-                |> accessibleTextColor
-                |> fromColor
-                |> Font.color
-            , palette.on.surface
-                |> scaleOpacity 0.14
-                |> withShade palette.on.surface buttonHoverOpacity
-                |> fromColor
-                |> Border.color
-            ]
-        , Element.focused []
-        ]
+        buttonFont
+            ++ [ Element.width <| Element.px 48
+               , Element.height <| Element.px 48
+               , Element.padding 4
+               , Border.width <| 1
+               , Element.mouseDown <|
+                    (palette.surface
+                        |> withShade palette.on.surface buttonPressedOpacity
+                        |> textAndBackground
+                    )
+                        ++ [ palette.on.surface
+                                |> scaleOpacity 0.14
+                                |> withShade palette.on.surface buttonPressedOpacity
+                                |> fromColor
+                                |> Border.color
+                           ]
+               , Element.focused []
+               , Element.mouseOver <|
+                    (palette.surface
+                        |> withShade palette.on.surface buttonHoverOpacity
+                        |> textAndBackground
+                    )
+                        ++ [ palette.on.surface
+                                |> scaleOpacity 0.14
+                                |> withShade palette.on.surface buttonHoverOpacity
+                                |> fromColor
+                                |> Border.color
+                           ]
+               ]
     , labelRow =
         [ Element.spacing <| 8
         , Element.height Element.fill
         , Element.width Element.fill
         , Border.rounded 24
         , Element.padding 8
-        , Element.focused
-            [ palette.surface
+        , Element.focused <|
+            (palette.surface
                 |> withShade palette.on.surface buttonFocusOpacity
-                |> fromColor
-                |> Background.color
-            , palette.surface
-                |> withShade palette.on.surface buttonFocusOpacity
-                |> accessibleTextColor
-                |> fromColor
-                |> Font.color
-            ]
+                |> textAndBackground
+            )
         ]
     , text = [ Element.centerX ]
     , ifDisabled =
-        [ palette.surface
-            |> fromColor
-            |> Background.color
-        , palette.on.surface
-            |> scaleOpacity 0.14
-            |> fromColor
-            |> Border.color
-        , gray
-            |> fromColor
-            |> Font.color
-        , Element.mouseDown []
-        , Element.mouseOver []
-        ]
+        (baseButton palette |> .ifDisabled)
+            ++ [ palette.surface
+                    |> fromColor
+                    |> Background.color
+               , palette.on.surface
+                    |> scaleOpacity 0.14
+                    |> fromColor
+                    |> Border.color
+               , gray
+                    |> fromColor
+                    |> Font.color
+               , Element.mouseDown []
+               , Element.mouseOver []
+               ]
     , ifActive =
-        [ palette.surface
+        (palette.surface
             |> withShade palette.on.surface buttonSelectedOpacity
-            |> fromColor
-            |> Background.color
-        , palette.surface
-            |> withShade palette.on.surface buttonSelectedOpacity
-            |> accessibleTextColor
-            |> fromColor
-            |> Font.color
-        , palette.on.surface
-            |> scaleOpacity 0.14
-            |> withShade palette.on.surface buttonSelectedOpacity
-            |> fromColor
-            |> Border.color
-        , Element.mouseOver []
-        ]
+            |> textAndBackground
+        )
+            ++ [ palette.on.surface
+                    |> scaleOpacity 0.14
+                    |> withShade palette.on.surface buttonSelectedOpacity
+                    |> fromColor
+                    |> Border.color
+               , Element.mouseOver []
+               ]
     , otherwise =
-        [ palette.surface
-            |> fromColor
-            |> Background.color
-        , palette.surface
-            |> accessibleTextColor
-            |> fromColor
-            |> Font.color
-        , palette.on.surface
-            |> scaleOpacity 0.14
-            |> fromColor
-            |> Border.color
+        (palette.surface
+            |> textAndBackground
+        )
+            ++ [ palette.on.surface
+                    |> scaleOpacity 0.14
+                    |> fromColor
+                    |> Border.color
+               ]
+    }
+
+
+
+{-------------------------------------------------------------------------------
+-- C H I P
+-------------------------------------------------------------------------------}
+
+
+{-| Implementation Detail:
+
+  - There seams to be a bug, where in the mouseOver effects are now visible.
+    This might have something to do with .
+    This needs to be investigated, but for now i leave it at that.
+
+  - Desided against the implementation of an outlined chip.
+    Please open a new issue or a PR if you want to have it implemented.
+
+-}
+chip : Palette -> ButtonStyle msg
+chip palette =
+    { container =
+        [ Element.height <| Element.px 32
+        , Element.paddingEach
+            { top = 0
+            , right = 12
+            , bottom = 0
+            , left = 4
+            }
+        , Border.rounded <| 16
+        , Element.mouseDown <|
+            (palette.on.surface
+                |> scaleOpacity 0.12
+                |> withShade palette.on.surface buttonPressedOpacity
+                |> textAndBackground
+            )
+        , Element.focused <|
+            (palette.on.surface
+                |> scaleOpacity 0.12
+                |> withShade palette.on.surface buttonFocusOpacity
+                |> textAndBackground
+            )
+        , Element.mouseOver <|
+            (palette.on.surface
+                |> scaleOpacity 0.12
+                |> withShade palette.on.surface buttonHoverOpacity
+                |> textAndBackground
+            )
         ]
+    , labelRow = [ Element.spacing 0, Element.centerY ]
+    , text =
+        [ Element.paddingEach
+            { top = 0
+            , right = 0
+            , bottom = 0
+            , left = 8
+            }
+        ]
+    , ifDisabled =
+        (baseButton palette |> .ifDisabled)
+            ++ (palette.on.surface
+                    |> scaleOpacity 0.12
+                    |> withShade palette.on.surface buttonDisabledOpacity
+                    |> textAndBackground
+               )
+            ++ [ Element.mouseDown []
+               , Element.mouseOver []
+               , Element.focused []
+               ]
+    , ifActive =
+        (palette.on.surface
+            |> scaleOpacity 0.12
+            |> withShade palette.on.surface buttonSelectedOpacity
+            |> textAndBackground
+        )
+            ++ [ Border.shadow <| shadow 4 ]
+    , otherwise =
+        palette.on.surface
+            |> scaleOpacity 0.12
+            |> textAndBackground
     }
 
 
@@ -578,6 +709,16 @@ row =
     }
 
 
+column : ColumnStyle msg
+column =
+    { containerColumn = [ Element.spacing 8 ]
+    , element = []
+    , ifFirst = []
+    , ifLast = []
+    , otherwise = []
+    }
+
+
 buttonRow : RowStyle msg
 buttonRow =
     { containerRow = []
@@ -604,3 +745,268 @@ buttonRow =
         [ Border.rounded 0
         ]
     }
+
+
+{-| Implementation Detail:
+
+This is a simplification of the [Material Design Card
+](https://material.io/components/cards) and might get replaced at a later date.
+
+-}
+cardColumn : Palette -> ColumnStyle msg
+cardColumn palette =
+    { containerColumn =
+        [ Element.width <| Element.fill
+        , Element.mouseOver <|
+            [ Border.shadow <| shadow 4 ]
+        , Element.alignTop
+        , Border.rounded 4
+        ]
+    , element =
+        [ Element.padding 16
+        , Border.rounded 4
+        , Border.width 1
+        , palette.surface
+            |> fromColor
+            |> Background.color
+        , palette.surface
+            |> accessibleTextColor
+            |> fromColor
+            |> Font.color
+        , palette.on.surface
+            |> scaleOpacity 0.14
+            |> fromColor
+            |> Border.color
+        , Element.width <| Element.minimum 344 <| Element.fill
+        ]
+    , ifFirst =
+        [ Border.roundEach
+            { topLeft = 4
+            , topRight = 4
+            , bottomLeft = 0
+            , bottomRight = 0
+            }
+        ]
+    , ifLast =
+        [ Border.roundEach
+            { topLeft = 0
+            , topRight = 0
+            , bottomLeft = 4
+            , bottomRight = 4
+            }
+        , Border.widthEach
+            { top = 0
+            , left = 1
+            , right = 1
+            , bottom = 1
+            }
+        ]
+    , otherwise =
+        [ Border.rounded 0
+        , Border.widthEach
+            { top = 0
+            , left = 1
+            , right = 1
+            , bottom = 1
+            }
+        ]
+    }
+
+
+
+{-------------------------------------------------------------------------------
+-- D I A L O G
+-------------------------------------------------------------------------------}
+
+
+alertDialog : Palette -> DialogStyle msg
+alertDialog palette =
+    { containerColumn =
+        [ Border.rounded 4
+        , Element.fill
+            |> Element.maximum 560
+            |> Element.minimum 280
+            |> Element.width
+        , Element.height <| Element.minimum 182 <| Element.shrink
+        , Background.color <| fromColor <| palette.surface
+        ]
+    , title = h6 ++ [ Element.paddingXY 24 20 ]
+    , text = [ Element.paddingXY 24 0 ]
+    , buttonRow =
+        [ Element.paddingXY 8 8
+        , Element.spacing 8
+        , Element.alignRight
+        , Element.alignBottom
+        ]
+    , acceptButton = containedButton palette
+    , dismissButton = textButton palette
+    }
+
+
+
+{-------------------------------------------------------------------------------
+-- E X P A N S I O N   P A N E L
+-------------------------------------------------------------------------------}
+
+
+icon : String -> List (Svg Never) -> Element Never
+icon size =
+    Svg.svg
+        [ Svg.Attributes.height "24"
+        , Svg.Attributes.stroke "currentColor"
+        , Svg.Attributes.fill "currentColor"
+        , Svg.Attributes.strokeLinecap "round"
+        , Svg.Attributes.strokeLinejoin "round"
+        , Svg.Attributes.strokeWidth "2"
+        , Svg.Attributes.viewBox size
+        , Svg.Attributes.width "24"
+        ]
+        >> Element.html
+        >> Element.el []
+
+
+expand_less : Element Never
+expand_less =
+    icon "0 0 48 48" [ Svg.path [ Svg.Attributes.d "M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z" ] [] ]
+
+
+expand_more : Element Never
+expand_more =
+    icon "0 0 48 48" [ Svg.path [ Svg.Attributes.d "M33.17 17.17L24 26.34l-9.17-9.17L12 20l12 12 12-12z" ] [] ]
+
+
+{-| Implementation Details:
+
+  - The expansion panel is part of an [older version](https://material.io/archive/guidelines/components/expansion-panels.html) of the Material Design.
+    The newer version is part of the List component.
+    The styling is taken from the [new specification](https://material.io/components/lists#specs).
+  - The Icons are taken from [icidasset/elm-material-icons](https://dark.elm.dmy.fr/packages/icidasset/elm-material-icons/latest) but seem wrong.
+
+-}
+expansionPanel : Palette -> ExpansionPanelStyle msg
+expansionPanel palette =
+    { containerColumn =
+        [ Background.color <| fromColor <| palette.surface
+        , Element.width <| Element.fill
+        ]
+    , panelRow =
+        [ Element.height <| Element.px 48
+        , Element.spaceEvenly
+        , Element.padding 14
+        , Element.width <| Element.fill
+        ]
+    , labelRow =
+        [ Element.spacing 32
+        ]
+    , content =
+        [ Element.padding 14 ]
+    , expandIcon =
+        expand_more
+            |> Element.el
+                [ gray
+                    |> fromColor
+                    |> Font.color
+                ]
+    , collapseIcon =
+        expand_less
+            |> Element.el
+                [ gray
+                    |> fromColor
+                    |> Font.color
+                ]
+    }
+
+
+
+{-------------------------------------------------------------------------------
+-- S N A C K B A R
+-------------------------------------------------------------------------------}
+
+
+{-| Implementation Detail:
+
+  - The text color of the button was not given in the specification. This implementation
+    adujsts the luminance of the color to fit the [w3 accessability standard](https://www.w3.org/TR/WCAG20/#Contrast)
+
+-}
+snackbar : Palette -> SnackbarStyle msg
+snackbar palette =
+    { containerRow =
+        [ dark
+            |> fromColor
+            |> Background.color
+        , dark
+            |> accessibleTextColor
+            |> fromColor
+            |> Font.color
+        , Border.rounded 4
+        , Element.width <| Element.maximum 344 <| Element.fill
+        , Element.paddingXY 8 6
+        , Element.spacing 8
+        , Border.shadow <| shadow 2
+        ]
+    , text =
+        [ Element.centerX
+        , Element.paddingXY 10 8
+        ]
+    , button =
+        textButton palette
+            |> (\b ->
+                    { b
+                        | container =
+                            b.container
+                                ++ [ dark
+                                        |> accessibleWithTextColor palette.primary
+                                        |> fromColor
+                                        |> Font.color
+                                   ]
+                    }
+               )
+    }
+
+
+
+{-------------------------------------------------------------------------------
+-- T E X T   I N P U T
+-------------------------------------------------------------------------------}
+
+
+{-| Implementation Detail:
+
+  - This is just a temporary implementation. It will soon be replaced with the official implementation.
+
+-}
+textInput : Palette -> TextInputStyle msg
+textInput palette =
+    { chipButton = chip palette
+    , chipsRow = [ Element.spacing 8 ]
+    , containerRow =
+        [ Element.spacing 8
+        , Element.paddingXY 8 0
+        , Border.width 1
+        , Border.rounded 4
+        , palette.on.surface
+            |> scaleOpacity 0.14
+            |> fromColor
+            |> Border.color
+        , Element.focused
+            [ Border.shadow <| shadow 4
+            , palette.primary
+                |> fromColor
+                |> Border.color
+            ]
+        , Element.mouseOver [ Border.shadow <| shadow 2 ]
+        ]
+    , input =
+        [ Border.width 0
+        , Element.mouseOver []
+        , Element.focused []
+        ]
+    }
+
+
+
+{-------------------------------------------------------------------------------
+-- L A Y O U T
+-------------------------------------------------------------------------------}
+
diff --git a/src/Widget/Style/Template.elm b/src/Widget/Style/Template.elm
index 2e303c2..18535aa 100644
--- a/src/Widget/Style/Template.elm
+++ b/src/Widget/Style/Template.elm
@@ -82,6 +82,7 @@ dialog : String -> DialogStyle msg
 dialog string =
     { containerColumn = box <| string ++ ":containerColumn"
     , title = box <| string ++ ":title"
+    , text = box <| string ++ ":text"
     , buttonRow = box <| string ++ ":buttonRow"
     , acceptButton = button <| string ++ ":acceptButton"
     , dismissButton = button <| string ++ ":dismissButton"
@@ -150,18 +151,18 @@ sortTable string =
 layout : String -> LayoutStyle msg
 layout string =
     { container = box <| string ++ ":container"
-    , snackbar = snackbar <| string ++ "snackbar"
+    , snackbar = snackbar <| string ++ ":snackbar"
     , layout = Element.layout
-    , header = box <| string ++ "header"
-    , menuButton = button <| string ++ "menuButton"
-    , sheetButton = button <| string ++ "sheetButton"
-    , menuTabButton = button <| string ++ "menuTabButton"
-    , sheet = box <| string ++ "sheet"
-    , menuIcon = icon <| string ++ "menuIcon"
-    , moreVerticalIcon = icon <| string ++ "moreVerticalIcon"
+    , header = box <| string ++ ":header"
+    , menuButton = button <| string ++ ":menuButton"
+    , sheetButton = button <| string ++ ":sheetButton"
+    , menuTabButton = button <| string ++ ":menuTabButton"
+    , sheet = box <| string ++ ":sheet"
+    , menuIcon = icon <| string ++ ":menuIcon"
+    , moreVerticalIcon = icon <| string ++ ":moreVerticalIcon"
     , spacing = 8
-    , title = box <| string ++ "title"
-    , searchIcon = icon <| string ++ "searchIcon"
-    , search = box <| string ++ "search"
-    , searchFill = box <| string ++ "searchFill"
+    , title = box <| string ++ ":title"
+    , searchIcon = icon <| string ++ ":searchIcon"
+    , search = box <| string ++ ":search"
+    , searchFill = box <| string ++ ":searchFill"
     }

From cc2ca06d9344f78c41a8847ddca097edfd771c39 Mon Sep 17 00:00:00 2001
From: Unknown 
Date: Sun, 24 May 2020 22:34:38 +0200
Subject: [PATCH 11/14] finishing the material design

---
 docs/unstable/index.html            | 8548 +++++++++++++++++----------
 example/src/Data/Example.elm        |  163 +-
 example/src/Data/Style/Material.elm |   28 +-
 example/src/Main.elm                |   75 +-
 src/Internal/Button.elm             |    1 +
 src/Widget/Layout.elm               |   35 +-
 src/Widget/Style/Material.elm       |  423 +-
 7 files changed, 6142 insertions(+), 3131 deletions(-)

diff --git a/docs/unstable/index.html b/docs/unstable/index.html
index 15083a1..1f0995e 100644
--- a/docs/unstable/index.html
+++ b/docs/unstable/index.html
@@ -2,7 +2,7 @@
 
 
   
-  Example
+  Main
   
 
 
@@ -5241,23 +5241,23 @@ var $elm$core$Task$perform = F2(
 				A2($elm$core$Task$map, toMessage, task)));
 	});
 var $elm$browser$Browser$element = _Browser_element;
-var $author$project$Example$GotViewport = function (a) {
+var $author$project$Main$GotViewport = function (a) {
 	return {$: 'GotViewport', a: a};
 };
-var $author$project$Example$Loading = {$: 'Loading'};
+var $author$project$Main$Loading = {$: 'Loading'};
 var $elm$browser$Browser$Dom$getViewport = _Browser_withWindow(_Browser_getViewport);
-var $author$project$Example$init = function (_v0) {
+var $author$project$Main$init = function (_v0) {
 	return _Utils_Tuple2(
-		$author$project$Example$Loading,
-		A2($elm$core$Task$perform, $author$project$Example$GotViewport, $elm$browser$Browser$Dom$getViewport));
+		$author$project$Main$Loading,
+		A2($elm$core$Task$perform, $author$project$Main$GotViewport, $elm$browser$Browser$Dom$getViewport));
 };
-var $author$project$Example$LoadedSpecific = function (a) {
+var $author$project$Main$LoadedSpecific = function (a) {
 	return {$: 'LoadedSpecific', a: a};
 };
-var $author$project$Example$Resized = function (a) {
+var $author$project$Main$Resized = function (a) {
 	return {$: 'Resized', a: a};
 };
-var $author$project$Example$TimePassed = function (a) {
+var $author$project$Main$TimePassed = function (a) {
 	return {$: 'TimePassed', a: a};
 };
 var $elm$core$Basics$always = F2(
@@ -5898,10 +5898,10 @@ var $elm$browser$Browser$Events$onResize = function (func) {
 				A2($elm$json$Json$Decode$field, 'innerWidth', $elm$json$Json$Decode$int),
 				A2($elm$json$Json$Decode$field, 'innerHeight', $elm$json$Json$Decode$int))));
 };
-var $author$project$Example$subscriptions = function (model) {
+var $author$project$Main$subscriptions = function (_v0) {
 	return A2(
 		$elm$core$Platform$Sub$map,
-		$author$project$Example$LoadedSpecific,
+		$author$project$Main$LoadedSpecific,
 		$elm$core$Platform$Sub$batch(
 			_List_fromArray(
 				[
@@ -5909,119 +5909,244 @@ var $author$project$Example$subscriptions = function (model) {
 					$elm$time$Time$every,
 					50,
 					$elm$core$Basics$always(
-						$author$project$Example$TimePassed(50))),
+						$author$project$Main$TimePassed(50))),
 					$elm$browser$Browser$Events$onResize(
 					F2(
 						function (h, w) {
-							return $author$project$Example$Resized(
+							return $author$project$Main$Resized(
 								{height: h, width: w});
 						}))
 				])));
 };
-var $author$project$Example$Loaded = function (a) {
+var $author$project$Main$Loaded = function (a) {
 	return {$: 'Loaded', a: a};
 };
-var $author$project$Example$Idle = {$: 'Idle'};
-var $author$project$Example$UpdateScrollingNav = function (a) {
+var $author$project$Main$Idle = {$: 'Idle'};
+var $author$project$Data$Theme$Material = {$: 'Material'};
+var $author$project$Main$StatelessSpecific = function (a) {
+	return {$: 'StatelessSpecific', a: a};
+};
+var $author$project$Main$UpdateScrollingNav = function (a) {
 	return {$: 'UpdateScrollingNav', a: a};
 };
-var $author$project$Data$Section$ComponentViews = {$: 'ComponentViews'};
-var $author$project$Data$Section$ReusableViews = {$: 'ReusableViews'};
-var $author$project$Data$Section$StatelessViews = {$: 'StatelessViews'};
-var $author$project$Data$Section$asList = _List_fromArray(
-	[$author$project$Data$Section$StatelessViews, $author$project$Data$Section$ReusableViews, $author$project$Data$Section$ComponentViews]);
-var $author$project$Data$Section$fromString = function (string) {
+var $author$project$Data$Example$ButtonExample = {$: 'ButtonExample'};
+var $author$project$Data$Example$DialogExample = {$: 'DialogExample'};
+var $author$project$Data$Example$ExpansionPanelExample = {$: 'ExpansionPanelExample'};
+var $author$project$Data$Example$ListExample = {$: 'ListExample'};
+var $author$project$Data$Example$ModalExample = {$: 'ModalExample'};
+var $author$project$Data$Example$MultiSelectExample = {$: 'MultiSelectExample'};
+var $author$project$Data$Example$SelectExample = {$: 'SelectExample'};
+var $author$project$Data$Example$SortTableExample = {$: 'SortTableExample'};
+var $author$project$Data$Example$TabExample = {$: 'TabExample'};
+var $author$project$Data$Example$TextInputExample = {$: 'TextInputExample'};
+var $elm$core$List$sortBy = _List_sortBy;
+var $author$project$Data$Example$toString = function (example) {
+	switch (example.$) {
+		case 'ButtonExample':
+			return 'Button';
+		case 'SelectExample':
+			return 'Select';
+		case 'MultiSelectExample':
+			return 'Multi Select';
+		case 'ExpansionPanelExample':
+			return 'ExpansionPanel';
+		case 'TabExample':
+			return 'Tab';
+		case 'SortTableExample':
+			return 'SortTable';
+		case 'ModalExample':
+			return 'Modal';
+		case 'DialogExample':
+			return 'Dialog';
+		case 'TextInputExample':
+			return 'TextInput';
+		default:
+			return 'List';
+	}
+};
+var $author$project$Data$Example$asList = A2(
+	$elm$core$List$sortBy,
+	$author$project$Data$Example$toString,
+	_List_fromArray(
+		[$author$project$Data$Example$ButtonExample, $author$project$Data$Example$SelectExample, $author$project$Data$Example$MultiSelectExample, $author$project$Data$Example$ExpansionPanelExample, $author$project$Data$Example$TabExample, $author$project$Data$Example$SortTableExample, $author$project$Data$Example$ModalExample, $author$project$Data$Example$DialogExample, $author$project$Data$Example$TextInputExample, $author$project$Data$Example$ListExample]));
+var $elm$core$Platform$Cmd$batch = _Platform_batch;
+var $author$project$Data$Example$fromString = function (string) {
 	switch (string) {
-		case 'Component':
-			return $elm$core$Maybe$Just($author$project$Data$Section$ComponentViews);
-		case 'Reusable':
-			return $elm$core$Maybe$Just($author$project$Data$Section$ReusableViews);
-		case 'Stateless':
-			return $elm$core$Maybe$Just($author$project$Data$Section$StatelessViews);
+		case 'Button':
+			return $elm$core$Maybe$Just($author$project$Data$Example$ButtonExample);
+		case 'Select':
+			return $elm$core$Maybe$Just($author$project$Data$Example$SelectExample);
+		case 'Multi Select':
+			return $elm$core$Maybe$Just($author$project$Data$Example$MultiSelectExample);
+		case 'ExpansionPanel':
+			return $elm$core$Maybe$Just($author$project$Data$Example$ExpansionPanelExample);
+		case 'Tab':
+			return $elm$core$Maybe$Just($author$project$Data$Example$TabExample);
+		case 'SortTable':
+			return $elm$core$Maybe$Just($author$project$Data$Example$SortTableExample);
+		case 'Modal':
+			return $elm$core$Maybe$Just($author$project$Data$Example$ModalExample);
+		case 'Dialog':
+			return $elm$core$Maybe$Just($author$project$Data$Example$DialogExample);
+		case 'TextInput':
+			return $elm$core$Maybe$Just($author$project$Data$Example$TextInputExample);
+		case 'List':
+			return $elm$core$Maybe$Just($author$project$Data$Example$ListExample);
 		default:
 			return $elm$core$Maybe$Nothing;
 	}
 };
+var $author$project$Stateless$ExampleSpecific = function (a) {
+	return {$: 'ExampleSpecific', a: a};
+};
+var $author$project$Data$Example$Button = function (a) {
+	return {$: 'Button', a: a};
+};
+var $author$project$Data$Example$Dialog = function (a) {
+	return {$: 'Dialog', a: a};
+};
+var $author$project$Data$Example$ExpansionPanel = function (a) {
+	return {$: 'ExpansionPanel', a: a};
+};
+var $author$project$Data$Example$List = function (a) {
+	return {$: 'List', a: a};
+};
+var $author$project$Data$Example$Modal = function (a) {
+	return {$: 'Modal', a: a};
+};
+var $author$project$Data$Example$MultiSelect = function (a) {
+	return {$: 'MultiSelect', a: a};
+};
+var $author$project$Data$Example$Select = function (a) {
+	return {$: 'Select', a: a};
+};
+var $author$project$Data$Example$SortTable = function (a) {
+	return {$: 'SortTable', a: a};
+};
+var $author$project$Data$Example$Tab = function (a) {
+	return {$: 'Tab', a: a};
+};
+var $author$project$Data$Example$TextInput = function (a) {
+	return {$: 'TextInput', a: a};
+};
+var $author$project$Example$Button$IsButtonEnabled = function (a) {
+	return {$: 'IsButtonEnabled', a: a};
+};
+var $elm$core$Platform$Cmd$none = $elm$core$Platform$Cmd$batch(_List_Nil);
+var $author$project$Example$Button$init = _Utils_Tuple2(
+	$author$project$Example$Button$IsButtonEnabled(true),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Example$Dialog$IsOpen = function (a) {
+	return {$: 'IsOpen', a: a};
+};
+var $author$project$Example$Dialog$init = _Utils_Tuple2(
+	$author$project$Example$Dialog$IsOpen(true),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Example$ExpansionPanel$IsExpanded = function (a) {
+	return {$: 'IsExpanded', a: a};
+};
+var $author$project$Example$ExpansionPanel$init = _Utils_Tuple2(
+	$author$project$Example$ExpansionPanel$IsExpanded(false),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Example$List$init = _Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none);
+var $author$project$Example$Modal$IsEnabled = function (a) {
+	return {$: 'IsEnabled', a: a};
+};
+var $author$project$Example$Modal$init = _Utils_Tuple2(
+	$author$project$Example$Modal$IsEnabled(true),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Example$MultiSelect$Selected = function (a) {
+	return {$: 'Selected', a: a};
+};
 var $elm$core$Set$Set_elm_builtin = function (a) {
 	return {$: 'Set_elm_builtin', a: a};
 };
 var $elm$core$Set$empty = $elm$core$Set$Set_elm_builtin($elm$core$Dict$empty);
-var $elm$core$Set$insert = F2(
-	function (key, _v0) {
-		var dict = _v0.a;
-		return $elm$core$Set$Set_elm_builtin(
-			A3($elm$core$Dict$insert, key, _Utils_Tuple0, dict));
-	});
-var $elm$core$Set$fromList = function (list) {
-	return A3($elm$core$List$foldl, $elm$core$Set$insert, $elm$core$Set$empty, list);
+var $author$project$Example$MultiSelect$init = _Utils_Tuple2(
+	$author$project$Example$MultiSelect$Selected($elm$core$Set$empty),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Example$Select$Selected = function (a) {
+	return {$: 'Selected', a: a};
 };
-var $author$project$Widget$FilterMultiSelect$init = function (options) {
-	return {options: options, raw: '', selected: $elm$core$Set$empty};
+var $author$project$Example$Select$init = _Utils_Tuple2(
+	$author$project$Example$Select$Selected($elm$core$Maybe$Nothing),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Example$SortTable$init = _Utils_Tuple2(
+	{asc: true, title: 'Name'},
+	$elm$core$Platform$Cmd$none);
+var $author$project$Example$Tab$Selected = function (a) {
+	return {$: 'Selected', a: a};
 };
-var $author$project$Widget$FilterSelect$init = function (options) {
-	return {options: options, raw: '', selected: $elm$core$Maybe$Nothing};
-};
-var $author$project$Widget$ValidatedInput$Model = function (a) {
-	return {$: 'Model', a: a};
-};
-var $author$project$Widget$ValidatedInput$init = function (_v0) {
-	var validator = _v0.validator;
-	var toString = _v0.toString;
-	var value = _v0.value;
-	return $author$project$Widget$ValidatedInput$Model(
-		{err: $elm$core$Maybe$Nothing, raw: $elm$core$Maybe$Nothing, toString: toString, validator: validator, value: value});
-};
-var $author$project$Component$init = {
-	filterMultiSelect: $author$project$Widget$FilterMultiSelect$init(
-		$elm$core$Set$fromList(
+var $author$project$Example$Tab$init = _Utils_Tuple2(
+	$author$project$Example$Tab$Selected($elm$core$Maybe$Nothing),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Example$TextInput$init = _Utils_Tuple2(
+	{chipTextInput: $elm$core$Set$empty, textInput: ''},
+	$elm$core$Platform$Cmd$none);
+var $elm$core$Platform$Cmd$map = _Platform_map;
+var $author$project$Data$Example$init = function () {
+	var _v0 = $author$project$Example$TextInput$init;
+	var textInputModel = _v0.a;
+	var textInputMsg = _v0.b;
+	var _v1 = $author$project$Example$Tab$init;
+	var tabModel = _v1.a;
+	var tabMsg = _v1.b;
+	var _v2 = $author$project$Example$SortTable$init;
+	var sortTableModel = _v2.a;
+	var sortTableMsg = _v2.b;
+	var _v3 = $author$project$Example$Select$init;
+	var selectModel = _v3.a;
+	var selectMsg = _v3.b;
+	var _v4 = $author$project$Example$MultiSelect$init;
+	var multiSelectModel = _v4.a;
+	var multiSelectMsg = _v4.b;
+	var _v5 = $author$project$Example$Modal$init;
+	var modalModel = _v5.a;
+	var modalMsg = _v5.b;
+	var _v6 = $author$project$Example$List$init;
+	var listModel = _v6.a;
+	var listMsg = _v6.b;
+	var _v7 = $author$project$Example$ExpansionPanel$init;
+	var expansionPanelModel = _v7.a;
+	var expansionPanelMsg = _v7.b;
+	var _v8 = $author$project$Example$Dialog$init;
+	var dialogModel = _v8.a;
+	var dialogMsg = _v8.b;
+	var _v9 = $author$project$Example$Button$init;
+	var buttonModel = _v9.a;
+	var buttonMsg = _v9.b;
+	return _Utils_Tuple2(
+		{button: buttonModel, dialog: dialogModel, expansionPanel: expansionPanelModel, list: listModel, modal: modalModel, multiSelect: multiSelectModel, select: selectModel, sortTable: sortTableModel, tab: tabModel, textInput: textInputModel},
+		$elm$core$Platform$Cmd$batch(
 			_List_fromArray(
-				['Apple', 'Kiwi', 'Strawberry', 'Pineapple', 'Mango', 'Grapes', 'Watermelon', 'Orange', 'Lemon', 'Blueberry', 'Grapefruit', 'Coconut', 'Cherry', 'Banana']))),
-	filterSelect: $author$project$Widget$FilterSelect$init(
-		$elm$core$Set$fromList(
-			_List_fromArray(
-				['Apple', 'Kiwi', 'Strawberry', 'Pineapple', 'Mango', 'Grapes', 'Watermelon', 'Orange', 'Lemon', 'Blueberry', 'Grapefruit', 'Coconut', 'Cherry', 'Banana']))),
-	validatedInput: $author$project$Widget$ValidatedInput$init(
-		{
-			toString: function (_v0) {
-				var first = _v0.a;
-				var second = _v0.b;
-				return first + (' ' + second);
-			},
-			validator: function (string) {
-				var _v1 = A2($elm$core$String$split, ' ', string);
-				if ((_v1.b && _v1.b.b) && (!_v1.b.b.b)) {
-					var first = _v1.a;
-					var _v2 = _v1.b;
-					var second = _v2.a;
-					return $elm$core$Result$Ok(
-						_Utils_Tuple2(first, second));
-				} else {
-					return $elm$core$Result$Err(_Utils_Tuple0);
-				}
-			},
-			value: _Utils_Tuple2('John', 'Doe')
-		})
-};
+				[
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Button, buttonMsg),
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Select, selectMsg),
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$MultiSelect, multiSelectMsg),
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$ExpansionPanel, expansionPanelMsg),
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Tab, tabMsg),
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$SortTable, sortTableMsg),
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Modal, modalMsg),
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Dialog, dialogMsg),
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$TextInput, textInputMsg),
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$List, listMsg)
+				])));
+}();
+var $author$project$Stateless$init = function () {
+	var _v0 = $author$project$Data$Example$init;
+	var example = _v0.a;
+	var cmd = _v0.b;
+	return _Utils_Tuple2(
+		{carousel: 0, example: example},
+		A2($elm$core$Platform$Cmd$map, $author$project$Stateless$ExampleSpecific, cmd));
+}();
 var $turboMaCk$queue$Queue$Queue = F2(
 	function (a, b) {
 		return {$: 'Queue', a: a, b: b};
 	});
 var $turboMaCk$queue$Queue$empty = A2($turboMaCk$queue$Queue$Queue, _List_Nil, _List_Nil);
 var $author$project$Widget$Snackbar$init = {current: $elm$core$Maybe$Nothing, queue: $turboMaCk$queue$Queue$empty};
-var $author$project$Layout$init = {active: $elm$core$Maybe$Nothing, snackbar: $author$project$Widget$Snackbar$init};
-var $author$project$Widget$SortTable$sortBy = $elm$core$Basics$identity;
-var $author$project$Reusable$init = $author$project$Widget$SortTable$sortBy(
-	{asc: true, title: 'Name'});
-var $author$project$Stateless$init = {
-	button: true,
-	carousel: 0,
-	chipTextInput: $elm$core$Set$empty,
-	isCollapsed: false,
-	multiSelected: $elm$core$Set$empty,
-	selected: $elm$core$Maybe$Nothing,
-	tab: $elm$core$Maybe$Just(1),
-	textInput: ''
-};
+var $author$project$Widget$Layout$init = {active: $elm$core$Maybe$Nothing, snackbar: $author$project$Widget$Snackbar$init};
 var $elm$core$Task$onError = _Scheduler_onError;
 var $elm$core$Task$attempt = F2(
 	function (resultToMessage, task) {
@@ -6256,51 +6381,47 @@ var $author$project$Widget$ScrollingNav$init = function (_v0) {
 	}(
 		{arrangement: arrangement, fromString: fromString, positions: $elm_community$intdict$IntDict$empty, scrollPos: 0, toString: toString});
 };
-var $author$project$Data$Section$toString = function (section) {
-	switch (section.$) {
-		case 'ComponentViews':
-			return 'Component';
-		case 'ReusableViews':
-			return 'Reusable';
-		default:
-			return 'Stateless';
-	}
-};
-var $author$project$Example$initialModel = function (_v0) {
+var $author$project$Main$initialModel = function (_v0) {
 	var viewport = _v0.viewport;
-	var _v1 = $author$project$Widget$ScrollingNav$init(
+	var _v1 = $author$project$Stateless$init;
+	var stateless = _v1.a;
+	var statelessCmd = _v1.b;
+	var _v2 = $author$project$Widget$ScrollingNav$init(
 		{
-			arrangement: $author$project$Data$Section$asList,
-			fromString: $author$project$Data$Section$fromString,
+			arrangement: $author$project$Data$Example$asList,
+			fromString: $author$project$Data$Example$fromString,
 			toMsg: function (result) {
 				if (result.$ === 'Ok') {
 					var fun = result.a;
-					return $author$project$Example$UpdateScrollingNav(fun);
+					return $author$project$Main$UpdateScrollingNav(fun);
 				} else {
-					return $author$project$Example$Idle;
+					return $author$project$Main$Idle;
 				}
 			},
-			toString: $author$project$Data$Section$toString
+			toString: $author$project$Data$Example$toString
 		});
-	var scrollingNav = _v1.a;
-	var cmd = _v1.b;
+	var scrollingNav = _v2.a;
+	var cmd = _v2.b;
 	return _Utils_Tuple2(
 		{
-			component: $author$project$Component$init,
 			displayDialog: false,
-			layout: $author$project$Layout$init,
-			reusable: $author$project$Reusable$init,
+			layout: $author$project$Widget$Layout$init,
 			scrollingNav: scrollingNav,
 			search: {current: '', raw: '', remaining: 0},
-			stateless: $author$project$Stateless$init,
+			stateless: stateless,
+			theme: $author$project$Data$Theme$Material,
 			window: {
 				height: $elm$core$Basics$round(viewport.height),
 				width: $elm$core$Basics$round(viewport.width)
 			}
 		},
-		cmd);
+		$elm$core$Platform$Cmd$batch(
+			_List_fromArray(
+				[
+					cmd,
+					A2($elm$core$Platform$Cmd$map, $author$project$Main$StatelessSpecific, statelessCmd)
+				])));
 };
-var $elm$core$Platform$Cmd$map = _Platform_map;
 var $elm$core$Tuple$mapBoth = F3(
 	function (funcA, funcB, _v0) {
 		var x = _v0.a;
@@ -6309,18 +6430,10 @@ var $elm$core$Tuple$mapBoth = F3(
 			funcA(x),
 			funcB(y));
 	});
-var $elm$core$Platform$Cmd$batch = _Platform_batch;
-var $elm$core$Platform$Cmd$none = $elm$core$Platform$Cmd$batch(_List_Nil);
-var $author$project$Example$AddSnackbar = function (a) {
+var $author$project$Main$AddSnackbar = function (a) {
 	return {$: 'AddSnackbar', a: a};
 };
-var $author$project$Example$ComponentSpecific = function (a) {
-	return {$: 'ComponentSpecific', a: a};
-};
-var $author$project$Example$StatelessSpecific = function (a) {
-	return {$: 'StatelessSpecific', a: a};
-};
-var $author$project$Layout$activate = F2(
+var $author$project$Widget$Layout$activate = F2(
 	function (part, layout) {
 		return _Utils_update(
 			layout,
@@ -6398,7 +6511,7 @@ var $author$project$Widget$Snackbar$insertFor = F3(
 		}
 	});
 var $author$project$Widget$Snackbar$insert = $author$project$Widget$Snackbar$insertFor(10000);
-var $author$project$Layout$queueMessage = F2(
+var $author$project$Widget$Layout$queueMessage = F2(
 	function (message, layout) {
 		return _Utils_update(
 			layout,
@@ -6468,7 +6581,7 @@ var $author$project$Widget$Snackbar$timePassed = F2(
 				});
 		}
 	});
-var $author$project$Layout$timePassed = F2(
+var $author$project$Widget$Layout$timePassed = F2(
 	function (sec, layout) {
 		var _v0 = layout.active;
 		_v0$2:
@@ -6494,6 +6607,75 @@ var $author$project$Layout$timePassed = F2(
 				snackbar: A2($author$project$Widget$Snackbar$timePassed, sec, layout.snackbar)
 			});
 	});
+var $elm$core$Platform$Sub$none = $elm$core$Platform$Sub$batch(_List_Nil);
+var $author$project$Example$Button$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$Dialog$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$ExpansionPanel$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$List$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$Modal$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$MultiSelect$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$Select$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$SortTable$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$Tab$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$TextInput$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$Button$update = F2(
+	function (msg, _v0) {
+		var bool = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Example$Button$IsButtonEnabled(bool),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Example$Dialog$update = F2(
+	function (msg, _v0) {
+		var bool = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Example$Dialog$IsOpen(bool),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Example$ExpansionPanel$update = F2(
+	function (msg, _v0) {
+		var bool = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Example$ExpansionPanel$IsExpanded(bool),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Example$List$update = F2(
+	function (_v0, _v1) {
+		return _Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none);
+	});
+var $author$project$Example$Modal$update = F2(
+	function (msg, _v0) {
+		var bool = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Example$Modal$IsEnabled(bool),
+			$elm$core$Platform$Cmd$none);
+	});
+var $elm$core$Set$insert = F2(
+	function (key, _v0) {
+		var dict = _v0.a;
+		return $elm$core$Set$Set_elm_builtin(
+			A3($elm$core$Dict$insert, key, _Utils_Tuple0, dict));
+	});
 var $elm$core$Dict$member = F2(
 	function (key, dict) {
 		var _v0 = A2($elm$core$Dict$get, key, dict);
@@ -6876,232 +7058,326 @@ var $elm$core$Set$remove = F2(
 		return $elm$core$Set$Set_elm_builtin(
 			A2($elm$core$Dict$remove, key, dict));
 	});
-var $author$project$Widget$FilterMultiSelect$update = F2(
-	function (msg, model) {
-		if (msg.$ === 'ChangedRaw') {
-			var string = msg.a;
-			return _Utils_update(
-				model,
-				{raw: string});
-		} else {
-			var string = msg.a;
-			return A2($elm$core$Set$member, string, model.selected) ? _Utils_update(
-				model,
-				{
-					selected: A2($elm$core$Set$remove, string, model.selected)
-				}) : _Utils_update(
-				model,
-				{
-					raw: '',
-					selected: A2($elm$core$Set$insert, string, model.selected)
-				});
-		}
+var $author$project$Example$MultiSelect$update = F2(
+	function (msg, _v0) {
+		var selected = _v0.a;
+		var _int = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Example$MultiSelect$Selected(
+				(A2($elm$core$Set$member, _int, selected) ? $elm$core$Set$remove(_int) : $elm$core$Set$insert(_int))(selected)),
+			$elm$core$Platform$Cmd$none);
 	});
-var $author$project$Widget$FilterSelect$update = F2(
+var $author$project$Example$Select$update = F2(
+	function (msg, _v0) {
+		var _int = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Example$Select$Selected(
+				$elm$core$Maybe$Just(_int)),
+			$elm$core$Platform$Cmd$none);
+	});
+var $elm$core$Basics$not = _Basics_not;
+var $author$project$Example$SortTable$update = F2(
 	function (msg, model) {
-		if (msg.$ === 'ChangedRaw') {
+		var string = msg.a;
+		return _Utils_Tuple2(
+			{
+				asc: _Utils_eq(model.title, string) ? (!model.asc) : true,
+				title: string
+			},
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Example$Tab$update = F2(
+	function (msg, _v0) {
+		var _int = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Example$Tab$Selected(
+				$elm$core$Maybe$Just(_int)),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Example$TextInput$update = F2(
+	function (msg, model) {
+		if (msg.$ === 'ToggleTextInputChip') {
 			var string = msg.a;
-			return _Utils_update(
-				model,
-				{raw: string});
-		} else {
-			var maybe = msg.a;
-			return function () {
-				if (maybe.$ === 'Just') {
-					var string = maybe.a;
-					return function (m) {
-						return _Utils_update(
-							m,
-							{raw: string});
-					};
-				} else {
-					return $elm$core$Basics$identity;
-				}
-			}()(
+			return _Utils_Tuple2(
 				_Utils_update(
 					model,
-					{selected: maybe}));
+					{
+						chipTextInput: (A2($elm$core$Set$member, string, model.chipTextInput) ? $elm$core$Set$remove(string) : $elm$core$Set$insert(string))(model.chipTextInput)
+					}),
+				$elm$core$Platform$Cmd$none);
+		} else {
+			var string = msg.a;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{textInput: string}),
+				$elm$core$Platform$Cmd$none);
 		}
 	});
-var $author$project$Widget$ValidatedInput$update = F2(
-	function (msg, _v0) {
-		var model = _v0.a;
-		switch (msg.$) {
-			case 'StartEditing':
-				return $author$project$Widget$ValidatedInput$Model(
-					_Utils_update(
-						model,
-						{
-							raw: $elm$core$Maybe$Just(
-								model.toString(model.value))
-						}));
-			case 'ChangedRaw':
-				var string = msg.a;
-				return $author$project$Widget$ValidatedInput$Model(
-					_Utils_update(
-						model,
-						{
-							err: $elm$core$Maybe$Nothing,
-							raw: $elm$core$Maybe$Just(string)
-						}));
-			default:
-				var _v2 = model.raw;
-				if (_v2.$ === 'Just') {
-					var string = _v2.a;
-					var _v3 = model.validator(string);
-					if (_v3.$ === 'Ok') {
-						var value = _v3.a;
-						return $author$project$Widget$ValidatedInput$Model(
-							_Utils_update(
-								model,
-								{err: $elm$core$Maybe$Nothing, raw: $elm$core$Maybe$Nothing, value: value}));
-					} else {
-						var err = _v3.a;
-						return $author$project$Widget$ValidatedInput$Model(
-							_Utils_update(
-								model,
-								{
-									err: $elm$core$Maybe$Just(err),
-									raw: $elm$core$Maybe$Nothing
-								}));
-					}
-				} else {
-					return $author$project$Widget$ValidatedInput$Model(model);
-				}
-		}
+var $author$project$Data$Example$upgradeRecord = {
+	button: {
+		from: function ($) {
+			return $.button;
+		},
+		msgMapper: $author$project$Data$Example$Button,
+		subscriptionsFun: $author$project$Example$Button$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{button: a});
+			}),
+		updateFun: $author$project$Example$Button$update
+	},
+	dialog: {
+		from: function ($) {
+			return $.dialog;
+		},
+		msgMapper: $author$project$Data$Example$Dialog,
+		subscriptionsFun: $author$project$Example$Dialog$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{dialog: a});
+			}),
+		updateFun: $author$project$Example$Dialog$update
+	},
+	expansionPanel: {
+		from: function ($) {
+			return $.expansionPanel;
+		},
+		msgMapper: $author$project$Data$Example$ExpansionPanel,
+		subscriptionsFun: $author$project$Example$ExpansionPanel$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{expansionPanel: a});
+			}),
+		updateFun: $author$project$Example$ExpansionPanel$update
+	},
+	list: {
+		from: function ($) {
+			return $.list;
+		},
+		msgMapper: $author$project$Data$Example$List,
+		subscriptionsFun: $author$project$Example$List$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{list: a});
+			}),
+		updateFun: $author$project$Example$List$update
+	},
+	modal: {
+		from: function ($) {
+			return $.modal;
+		},
+		msgMapper: $author$project$Data$Example$Modal,
+		subscriptionsFun: $author$project$Example$Modal$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{modal: a});
+			}),
+		updateFun: $author$project$Example$Modal$update
+	},
+	multiSelect: {
+		from: function ($) {
+			return $.multiSelect;
+		},
+		msgMapper: $author$project$Data$Example$MultiSelect,
+		subscriptionsFun: $author$project$Example$MultiSelect$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{multiSelect: a});
+			}),
+		updateFun: $author$project$Example$MultiSelect$update
+	},
+	select: {
+		from: function ($) {
+			return $.select;
+		},
+		msgMapper: $author$project$Data$Example$Select,
+		subscriptionsFun: $author$project$Example$Select$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{select: a});
+			}),
+		updateFun: $author$project$Example$Select$update
+	},
+	sortTable: {
+		from: function ($) {
+			return $.sortTable;
+		},
+		msgMapper: $author$project$Data$Example$SortTable,
+		subscriptionsFun: $author$project$Example$SortTable$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{sortTable: a});
+			}),
+		updateFun: $author$project$Example$SortTable$update
+	},
+	tab: {
+		from: function ($) {
+			return $.tab;
+		},
+		msgMapper: $author$project$Data$Example$Tab,
+		subscriptionsFun: $author$project$Example$Tab$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{tab: a});
+			}),
+		updateFun: $author$project$Example$Tab$update
+	},
+	textInput: {
+		from: function ($) {
+			return $.textInput;
+		},
+		msgMapper: $author$project$Data$Example$TextInput,
+		subscriptionsFun: $author$project$Example$TextInput$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{textInput: a});
+			}),
+		updateFun: $author$project$Example$TextInput$update
+	}
+};
+var $author$project$Data$Example$updateField = F3(
+	function (getter, msg, model) {
+		var _v0 = getter($author$project$Data$Example$upgradeRecord);
+		var from = _v0.from;
+		var to = _v0.to;
+		var msgMapper = _v0.msgMapper;
+		var updateFun = _v0.updateFun;
+		return A3(
+			$elm$core$Tuple$mapBoth,
+			to(model),
+			$elm$core$Platform$Cmd$map(msgMapper),
+			A2(
+				updateFun,
+				msg,
+				from(model)));
 	});
-var $author$project$Component$update = F2(
+var $author$project$Data$Example$update = F2(
 	function (msg, model) {
-		switch (msg.$) {
-			case 'FilterSelectSpecific':
-				var m = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							filterSelect: A2($author$project$Widget$FilterSelect$update, m, model.filterSelect)
-						}),
-					$elm$core$Platform$Cmd$none);
-			case 'FilterMultiSelectSpecific':
-				var m = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							filterMultiSelect: A2($author$project$Widget$FilterMultiSelect$update, m, model.filterMultiSelect)
-						}),
-					$elm$core$Platform$Cmd$none);
-			default:
-				var m = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							validatedInput: A2($author$project$Widget$ValidatedInput$update, m, model.validatedInput)
-						}),
-					$elm$core$Platform$Cmd$none);
-		}
-	});
-var $author$project$Reusable$update = F2(
-	function (msg, model) {
-		var m = msg.a;
-		return m;
+		return function () {
+			switch (msg.$) {
+				case 'Button':
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.button;
+						},
+						m);
+				case 'Select':
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.select;
+						},
+						m);
+				case 'MultiSelect':
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.multiSelect;
+						},
+						m);
+				case 'ExpansionPanel':
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.expansionPanel;
+						},
+						m);
+				case 'Tab':
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.tab;
+						},
+						m);
+				case 'SortTable':
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.sortTable;
+						},
+						m);
+				case 'Modal':
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.modal;
+						},
+						m);
+				case 'Dialog':
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.dialog;
+						},
+						m);
+				case 'TextInput':
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.textInput;
+						},
+						m);
+				default:
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.list;
+						},
+						m);
+			}
+		}()(model);
 	});
 var $author$project$Stateless$update = F2(
 	function (msg, model) {
-		switch (msg.$) {
-			case 'ChangedSelected':
-				var _int = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							selected: $elm$core$Maybe$Just(_int)
-						}),
-					$elm$core$Platform$Cmd$none);
-			case 'ChangedMultiSelected':
-				var _int = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							multiSelected: (A2($elm$core$Set$member, _int, model.multiSelected) ? $elm$core$Set$remove(_int) : $elm$core$Set$insert(_int))(model.multiSelected)
-						}),
-					$elm$core$Platform$Cmd$none);
-			case 'ToggleCollapsable':
-				var bool = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{isCollapsed: bool}),
-					$elm$core$Platform$Cmd$none);
-			case 'ToggleTextInputChip':
-				var string = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							chipTextInput: (A2($elm$core$Set$member, string, model.chipTextInput) ? $elm$core$Set$remove(string) : $elm$core$Set$insert(string))(model.chipTextInput)
-						}),
-					$elm$core$Platform$Cmd$none);
-			case 'SetCarousel':
-				var _int = msg.a;
-				return _Utils_Tuple2(
-					((_int < 0) || (_int > 3)) ? model : _Utils_update(
-						model,
-						{carousel: _int}),
-					$elm$core$Platform$Cmd$none);
-			case 'ChangedTab':
-				var _int = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							tab: $elm$core$Maybe$Just(_int)
-						}),
-					$elm$core$Platform$Cmd$none);
-			case 'ToggleButton':
-				var bool = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{button: bool}),
-					$elm$core$Platform$Cmd$none);
-			case 'SetTextInput':
-				var string = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{textInput: string}),
-					$elm$core$Platform$Cmd$none);
-			default:
-				return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
+		if (msg.$ === 'ExampleSpecific') {
+			var exampleMsg = msg.a;
+			var _v1 = A2($author$project$Data$Example$update, exampleMsg, model.example);
+			var exampleModel = _v1.a;
+			var exampleCmd = _v1.b;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{example: exampleModel}),
+				A2($elm$core$Platform$Cmd$map, $author$project$Stateless$ExampleSpecific, exampleCmd));
+		} else {
+			return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
 		}
 	});
-var $author$project$Example$updateLoaded = F2(
+var $author$project$Main$updateLoaded = F2(
 	function (msg, model) {
 		switch (msg.$) {
-			case 'ComponentSpecific':
-				var m = msg.a;
-				return A3(
-					$elm$core$Tuple$mapBoth,
-					function (component) {
-						return _Utils_update(
-							model,
-							{component: component});
-					},
-					$elm$core$Platform$Cmd$map($author$project$Example$ComponentSpecific),
-					A2($author$project$Component$update, m, model.component));
-			case 'ReusableSpecific':
-				var m = msg.a;
-				return _Utils_Tuple2(
-					function (reusable) {
-						return _Utils_update(
-							model,
-							{reusable: reusable});
-					}(
-						A2($author$project$Reusable$update, m, model.reusable)),
-					$elm$core$Platform$Cmd$none);
 			case 'StatelessSpecific':
 				var m = msg.a;
 				return A3(
@@ -7111,7 +7387,7 @@ var $author$project$Example$updateLoaded = F2(
 							model,
 							{stateless: stateless});
 					},
-					$elm$core$Platform$Cmd$map($author$project$Example$StatelessSpecific),
+					$elm$core$Platform$Cmd$map($author$project$Main$StatelessSpecific),
 					A2($author$project$Stateless$update, m, model.stateless));
 			case 'UpdateScrollingNav':
 				var fun = msg.a;
@@ -7129,14 +7405,14 @@ var $author$project$Example$updateLoaded = F2(
 					_Utils_update(
 						model,
 						{
-							layout: A2($author$project$Layout$timePassed, _int, model.layout),
+							layout: A2($author$project$Widget$Layout$timePassed, _int, model.layout),
 							search: (search.remaining > 0) ? ((_Utils_cmp(search.remaining, _int) < 1) ? _Utils_update(
 								search,
 								{current: search.raw, remaining: 0}) : _Utils_update(
 								search,
 								{remaining: search.remaining - _int})) : model.search
 						}),
-					A2($elm$core$Task$perform, $author$project$Example$UpdateScrollingNav, $author$project$Widget$ScrollingNav$getPos));
+					A2($elm$core$Task$perform, $author$project$Main$UpdateScrollingNav, $author$project$Widget$ScrollingNav$getPos));
 			case 'AddSnackbar':
 				var _v1 = msg.a;
 				var string = _v1.a;
@@ -7146,12 +7422,12 @@ var $author$project$Example$updateLoaded = F2(
 						model,
 						{
 							layout: A2(
-								$author$project$Layout$queueMessage,
+								$author$project$Widget$Layout$queueMessage,
 								{
 									button: bool ? $elm$core$Maybe$Just(
 										{
 											onPress: $elm$core$Maybe$Just(
-												$author$project$Example$AddSnackbar(
+												$author$project$Main$AddSnackbar(
 													_Utils_Tuple2('This is another message', false))),
 											text: 'Add'
 										}) : $elm$core$Maybe$Nothing,
@@ -7180,7 +7456,7 @@ var $author$project$Example$updateLoaded = F2(
 					_Utils_update(
 						model,
 						{
-							layout: A2($author$project$Layout$activate, sidebar, model.layout)
+							layout: A2($author$project$Widget$Layout$activate, sidebar, model.layout)
 						}),
 					$elm$core$Platform$Cmd$none);
 			case 'Load':
@@ -7195,7 +7471,7 @@ var $author$project$Example$updateLoaded = F2(
 					A2(
 						$author$project$Widget$ScrollingNav$jumpTo,
 						{
-							onChange: $elm$core$Basics$always($author$project$Example$Idle),
+							onChange: $elm$core$Basics$always($author$project$Main$Idle),
 							section: section
 						},
 						model.scrollingNav));
@@ -7211,11 +7487,18 @@ var $author$project$Example$updateLoaded = F2(
 								{raw: string, remaining: 300})
 						}),
 					$elm$core$Platform$Cmd$none);
+			case 'SetTheme':
+				var theme = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{theme: theme}),
+					$elm$core$Platform$Cmd$none);
 			default:
 				return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
 		}
 	});
-var $author$project$Example$update = F2(
+var $author$project$Main$update = F2(
 	function (msg, model) {
 		var _v0 = _Utils_Tuple2(model, msg);
 		_v0$2:
@@ -7226,9 +7509,9 @@ var $author$project$Example$update = F2(
 					var viewport = _v0.b.a;
 					return A3(
 						$elm$core$Tuple$mapBoth,
-						$author$project$Example$Loaded,
-						$elm$core$Platform$Cmd$map($author$project$Example$LoadedSpecific),
-						$author$project$Example$initialModel(viewport));
+						$author$project$Main$Loaded,
+						$elm$core$Platform$Cmd$map($author$project$Main$LoadedSpecific),
+						$author$project$Main$initialModel(viewport));
 				} else {
 					break _v0$2;
 				}
@@ -7238,9 +7521,9 @@ var $author$project$Example$update = F2(
 					var m = _v0.b.a;
 					return A3(
 						$elm$core$Tuple$mapBoth,
-						$author$project$Example$Loaded,
-						$elm$core$Platform$Cmd$map($author$project$Example$LoadedSpecific),
-						A2($author$project$Example$updateLoaded, m, state));
+						$author$project$Main$Loaded,
+						$elm$core$Platform$Cmd$map($author$project$Main$LoadedSpecific),
+						A2($author$project$Main$updateLoaded, m, state));
 				} else {
 					break _v0$2;
 				}
@@ -7248,22 +7531,27 @@ var $author$project$Example$update = F2(
 		}
 		return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
 	});
-var $author$project$Example$ChangedSearch = function (a) {
+var $author$project$Main$ChangedSearch = function (a) {
 	return {$: 'ChangedSearch', a: a};
 };
-var $author$project$Example$ChangedSidebar = function (a) {
+var $author$project$Main$ChangedSidebar = function (a) {
 	return {$: 'ChangedSidebar', a: a};
 };
-var $author$project$Example$JumpTo = function (a) {
+var $author$project$Data$Theme$DarkMaterial = {$: 'DarkMaterial'};
+var $author$project$Data$Theme$ElmUiFramework = {$: 'ElmUiFramework'};
+var $author$project$Main$JumpTo = function (a) {
 	return {$: 'JumpTo', a: a};
 };
-var $author$project$Example$Load = function (a) {
+var $author$project$Main$Load = function (a) {
 	return {$: 'Load', a: a};
 };
-var $author$project$Example$ReusableSpecific = function (a) {
-	return {$: 'ReusableSpecific', a: a};
+var $author$project$Data$Section$ReusableViews = {$: 'ReusableViews'};
+var $author$project$Main$SetTheme = function (a) {
+	return {$: 'SetTheme', a: a};
 };
-var $author$project$Example$ToggleDialog = function (a) {
+var $author$project$Data$Section$StatelessViews = {$: 'StatelessViews'};
+var $author$project$Data$Theme$Template = {$: 'Template'};
+var $author$project$Main$ToggleDialog = function (a) {
 	return {$: 'ToggleDialog', a: a};
 };
 var $elm$svg$Svg$Attributes$d = _VirtualDom_attribute('d');
@@ -7319,25 +7607,6 @@ var $mdgriffith$elm_ui$Internal$Model$AlignX = function (a) {
 };
 var $mdgriffith$elm_ui$Internal$Model$CenterX = {$: 'CenterX'};
 var $mdgriffith$elm_ui$Element$centerX = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$CenterX);
-var $elm$svg$Svg$circle = $elm$svg$Svg$trustedNode('circle');
-var $elm$svg$Svg$Attributes$cx = _VirtualDom_attribute('cx');
-var $elm$svg$Svg$Attributes$cy = _VirtualDom_attribute('cy');
-var $elm$svg$Svg$Attributes$r = _VirtualDom_attribute('r');
-var $author$project$Icons$circle = A2(
-	$author$project$Icons$svgFeatherIcon,
-	'circle',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$circle,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$cx('12'),
-					$elm$svg$Svg$Attributes$cy('12'),
-					$elm$svg$Svg$Attributes$r('10')
-				]),
-			_List_Nil)
-		]));
 var $mdgriffith$elm_ui$Internal$Model$Unkeyed = function (a) {
 	return {$: 'Unkeyed', a: a};
 };
@@ -10890,7 +11159,6 @@ var $elm$virtual_dom$VirtualDom$keyedNode = function (tag) {
 	return _VirtualDom_keyedNode(
 		_VirtualDom_noScript(tag));
 };
-var $elm$core$Basics$not = _Basics_not;
 var $elm$html$Html$p = _VirtualDom_node('p');
 var $mdgriffith$elm_ui$Internal$Flag$present = F2(
 	function (myFlag, _v0) {
@@ -12707,6 +12975,44 @@ var $mdgriffith$elm_ui$Element$column = F2(
 						attrs))),
 			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
 	});
+var $mdgriffith$elm_ui$Element$el = F2(
+	function (attrs, child) {
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asEl,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+					attrs)),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+				_List_fromArray(
+					[child])));
+	});
+var $author$project$Internal$List$internal = F2(
+	function (style, list) {
+		return A2(
+			$elm$core$List$indexedMap,
+			function (i) {
+				return $mdgriffith$elm_ui$Element$el(
+					_Utils_ap(
+						style.element,
+						($elm$core$List$length(list) === 1) ? _List_Nil : ((!i) ? style.ifFirst : (_Utils_eq(
+							i,
+							$elm$core$List$length(list) - 1) ? style.ifLast : style.otherwise))));
+			},
+			list);
+	});
+var $author$project$Internal$List$column = function (style) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$author$project$Internal$List$internal(style),
+		$mdgriffith$elm_ui$Element$column(style.containerColumn));
+};
+var $author$project$Widget$column = $author$project$Internal$List$column;
 var $mdgriffith$elm_ui$Internal$Model$AlignY = function (a) {
 	return {$: 'AlignY', a: a};
 };
@@ -12800,23 +13106,6 @@ var $Orasund$elm_ui_framework$Framework$container = _List_fromArray(
 	]);
 var $mdgriffith$elm_ui$Internal$Model$Right = {$: 'Right'};
 var $mdgriffith$elm_ui$Element$alignRight = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$Right);
-var $mdgriffith$elm_ui$Element$el = F2(
-	function (attrs, child) {
-		return A4(
-			$mdgriffith$elm_ui$Internal$Model$element,
-			$mdgriffith$elm_ui$Internal$Model$asEl,
-			$mdgriffith$elm_ui$Internal$Model$div,
-			A2(
-				$elm$core$List$cons,
-				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
-				A2(
-					$elm$core$List$cons,
-					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
-					attrs)),
-			$mdgriffith$elm_ui$Internal$Model$Unkeyed(
-				_List_fromArray(
-					[child])));
-	});
 var $mdgriffith$elm_ui$Internal$Model$Class = F2(
 	function (a, b) {
 		return {$: 'Class', a: a, b: b};
@@ -12896,6 +13185,44 @@ var $author$project$Internal$Dialog$modal = function (_v0) {
 			$mdgriffith$elm_ui$Element$clip
 		]);
 };
+var $mdgriffith$elm_ui$Internal$Model$Paragraph = {$: 'Paragraph'};
+var $mdgriffith$elm_ui$Internal$Model$SpacingStyle = F3(
+	function (a, b, c) {
+		return {$: 'SpacingStyle', a: a, b: b, c: c};
+	});
+var $mdgriffith$elm_ui$Internal$Flag$spacing = $mdgriffith$elm_ui$Internal$Flag$flag(3);
+var $mdgriffith$elm_ui$Internal$Model$spacingName = F2(
+	function (x, y) {
+		return 'spacing-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y)));
+	});
+var $mdgriffith$elm_ui$Element$spacing = function (x) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$spacing,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$SpacingStyle,
+			A2($mdgriffith$elm_ui$Internal$Model$spacingName, x, x),
+			x,
+			x));
+};
+var $mdgriffith$elm_ui$Element$paragraph = F2(
+	function (attrs, children) {
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asParagraph,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$Paragraph),
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$spacing(5),
+						attrs))),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
+	});
 var $mdgriffith$elm_ui$Internal$Model$AsRow = {$: 'AsRow'};
 var $mdgriffith$elm_ui$Internal$Model$asRow = $mdgriffith$elm_ui$Internal$Model$AsRow;
 var $mdgriffith$elm_ui$Element$row = F2(
@@ -13082,15 +13409,18 @@ var $author$project$Internal$Button$button = F2(
 			$mdgriffith$elm_ui$Element$Input$button,
 			_Utils_ap(
 				style.container,
-				_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.disabled : _List_Nil),
+				_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
 			{
 				label: A2(
 					$mdgriffith$elm_ui$Element$row,
-					style.label,
+					style.labelRow,
 					_List_fromArray(
 						[
 							A2($mdgriffith$elm_ui$Element$map, $elm$core$Basics$never, icon),
-							$mdgriffith$elm_ui$Element$text(text)
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							style.text,
+							$mdgriffith$elm_ui$Element$text(text))
 						])),
 				onPress: onPress
 			});
@@ -13107,7 +13437,7 @@ var $author$project$Internal$Button$textButton = F2(
 var $author$project$Internal$Dialog$dialog = F2(
 	function (style, _v0) {
 		var title = _v0.title;
-		var body = _v0.body;
+		var text = _v0.text;
 		var accept = _v0.accept;
 		var dismiss = _v0.dismiss;
 		return $author$project$Internal$Dialog$modal(
@@ -13115,9 +13445,9 @@ var $author$project$Internal$Dialog$dialog = F2(
 				content: A2(
 					$mdgriffith$elm_ui$Element$column,
 					_Utils_ap(
-						style.containerColumn,
 						_List_fromArray(
-							[$mdgriffith$elm_ui$Element$centerX, $mdgriffith$elm_ui$Element$centerY])),
+							[$mdgriffith$elm_ui$Element$centerX, $mdgriffith$elm_ui$Element$centerY]),
+						style.containerColumn),
 					_List_fromArray(
 						[
 							A2(
@@ -13130,16 +13460,20 @@ var $author$project$Internal$Dialog$dialog = F2(
 									$mdgriffith$elm_ui$Element$text,
 									$mdgriffith$elm_ui$Element$el(style.title)),
 								title)),
-							body,
+							A2(
+							$mdgriffith$elm_ui$Element$paragraph,
+							style.text,
+							$elm$core$List$singleton(
+								$mdgriffith$elm_ui$Element$text(text))),
 							A2(
 							$mdgriffith$elm_ui$Element$row,
 							_Utils_ap(
-								style.buttonRow,
 								_List_fromArray(
 									[
 										$mdgriffith$elm_ui$Element$alignRight,
 										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
-									])),
+									]),
+								style.buttonRow),
 							function () {
 								var _v1 = _Utils_Tuple2(accept, dismiss);
 								if (_v1.a.$ === 'Just') {
@@ -13147,14 +13481,14 @@ var $author$project$Internal$Dialog$dialog = F2(
 										var acceptButton = _v1.a.a;
 										var _v2 = _v1.b;
 										return $elm$core$List$singleton(
-											A2($author$project$Internal$Button$textButton, style.accept, acceptButton));
+											A2($author$project$Internal$Button$textButton, style.acceptButton, acceptButton));
 									} else {
 										var acceptButton = _v1.a.a;
 										var dismissButton = _v1.b.a;
 										return _List_fromArray(
 											[
-												A2($author$project$Internal$Button$textButton, style.dismiss, dismissButton),
-												A2($author$project$Internal$Button$textButton, style.accept, acceptButton)
+												A2($author$project$Internal$Button$textButton, style.dismissButton, dismissButton),
+												A2($author$project$Internal$Button$textButton, style.acceptButton, acceptButton)
 											]);
 									}
 								} else {
@@ -13336,189 +13670,49 @@ var $Orasund$elm_ui_framework$Framework$Heading$h2 = $Orasund$elm_ui_framework$F
 var $Orasund$elm_ui_framework$Framework$Heading$h3 = $Orasund$elm_ui_framework$Framework$Heading$h(3);
 var $mdgriffith$elm_ui$Internal$Model$unstyled = A2($elm$core$Basics$composeL, $mdgriffith$elm_ui$Internal$Model$Unstyled, $elm$core$Basics$always);
 var $mdgriffith$elm_ui$Element$html = $mdgriffith$elm_ui$Internal$Model$unstyled;
-var $mdgriffith$elm_ui$Internal$Model$Min = F2(
-	function (a, b) {
-		return {$: 'Min', a: a, b: b};
-	});
-var $mdgriffith$elm_ui$Element$minimum = F2(
-	function (i, l) {
-		return A2($mdgriffith$elm_ui$Internal$Model$Min, i, l);
-	});
-var $mdgriffith$elm_ui$Internal$Flag$borderColor = $mdgriffith$elm_ui$Internal$Flag$flag(28);
-var $mdgriffith$elm_ui$Element$Border$color = function (clr) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$borderColor,
-		A3(
-			$mdgriffith$elm_ui$Internal$Model$Colored,
-			'bc-' + $mdgriffith$elm_ui$Internal$Model$formatColorClass(clr),
-			'border-color',
-			clr));
-};
-var $Orasund$elm_ui_framework$Framework$Color$lighterGrey = A3($mdgriffith$elm_ui$Element$rgb255, 245, 245, 245);
-var $Orasund$elm_ui_framework$Framework$Color$light = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$lighterGrey),
-		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$lighterGrey)
-	]);
-var $Orasund$elm_ui_framework$Framework$Color$lightGrey = A3($mdgriffith$elm_ui$Element$rgb255, 219, 219, 219);
-var $mdgriffith$elm_ui$Element$rgba = $mdgriffith$elm_ui$Internal$Model$Rgba;
-var $mdgriffith$elm_ui$Internal$Model$boxShadowClass = function (shadow) {
-	return $elm$core$String$concat(
-		_List_fromArray(
-			[
-				shadow.inset ? 'box-inset' : 'box-',
-				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.offset.a) + 'px',
-				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.offset.b) + 'px',
-				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.blur) + 'px',
-				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.size) + 'px',
-				$mdgriffith$elm_ui$Internal$Model$formatColorClass(shadow.color)
-			]));
-};
-var $mdgriffith$elm_ui$Internal$Flag$shadows = $mdgriffith$elm_ui$Internal$Flag$flag(19);
-var $mdgriffith$elm_ui$Element$Border$shadow = function (almostShade) {
-	var shade = {blur: almostShade.blur, color: almostShade.color, inset: false, offset: almostShade.offset, size: almostShade.size};
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$shadows,
-		A3(
-			$mdgriffith$elm_ui$Internal$Model$Single,
-			$mdgriffith$elm_ui$Internal$Model$boxShadowClass(shade),
-			'box-shadow',
-			$mdgriffith$elm_ui$Internal$Model$formatBoxShadow(shade)));
-};
-var $mdgriffith$elm_ui$Element$paddingXY = F2(
-	function (x, y) {
-		return _Utils_eq(x, y) ? A2(
-			$mdgriffith$elm_ui$Internal$Model$StyleClass,
-			$mdgriffith$elm_ui$Internal$Flag$padding,
-			A5(
-				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-				'p-' + $elm$core$String$fromInt(x),
-				x,
-				x,
-				x,
-				x)) : A2(
-			$mdgriffith$elm_ui$Internal$Model$StyleClass,
-			$mdgriffith$elm_ui$Internal$Flag$padding,
-			A5(
-				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-				'p-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y))),
-				y,
-				x,
-				y,
-				x));
-	});
-var $mdgriffith$elm_ui$Internal$Flag$borderRound = $mdgriffith$elm_ui$Internal$Flag$flag(17);
-var $mdgriffith$elm_ui$Element$Border$rounded = function (radius) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$borderRound,
-		A3(
-			$mdgriffith$elm_ui$Internal$Model$Single,
-			'br-' + $elm$core$String$fromInt(radius),
-			'border-radius',
-			$elm$core$String$fromInt(radius) + 'px'));
-};
-var $Orasund$elm_ui_framework$Framework$Color$simple = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$lightGrey),
-		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$lightGrey)
-	]);
-var $Orasund$elm_ui_framework$Framework$Tag$simple = _Utils_ap(
-	$Orasund$elm_ui_framework$Framework$Color$simple,
+var $mdgriffith$elm_ui$Element$htmlAttribute = $mdgriffith$elm_ui$Internal$Model$Attr;
+var $elm$html$Html$Attributes$id = $elm$html$Html$Attributes$stringProperty('id');
+var $elm$html$Html$map = $elm$virtual_dom$VirtualDom$map;
+var $elm$svg$Svg$circle = $elm$svg$Svg$trustedNode('circle');
+var $elm$svg$Svg$Attributes$cx = _VirtualDom_attribute('cx');
+var $elm$svg$Svg$Attributes$cy = _VirtualDom_attribute('cy');
+var $elm$svg$Svg$Attributes$r = _VirtualDom_attribute('r');
+var $author$project$Icons$penTool = A2(
+	$author$project$Icons$svgFeatherIcon,
+	'pen-tool',
 	_List_fromArray(
 		[
-			$mdgriffith$elm_ui$Element$Border$rounded(4),
-			A2($mdgriffith$elm_ui$Element$paddingXY, 7, 4)
-		]));
-var $mdgriffith$elm_ui$Internal$Model$BorderWidth = F5(
-	function (a, b, c, d, e) {
-		return {$: 'BorderWidth', a: a, b: b, c: c, d: d, e: e};
-	});
-var $mdgriffith$elm_ui$Element$Border$width = function (v) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$borderWidth,
-		A5(
-			$mdgriffith$elm_ui$Internal$Model$BorderWidth,
-			'b-' + $elm$core$String$fromInt(v),
-			v,
-			v,
-			v,
-			v));
-};
-var $Orasund$elm_ui_framework$Framework$Card$simple = _Utils_ap(
-	$Orasund$elm_ui_framework$Framework$Tag$simple,
-	_Utils_ap(
-		$Orasund$elm_ui_framework$Framework$Color$light,
-		_List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Border$shadow(
-				{
-					blur: 10,
-					color: A4($mdgriffith$elm_ui$Element$rgba, 0, 0, 0, 0.05),
-					offset: _Utils_Tuple2(0, 2),
-					size: 1
-				}),
-				$mdgriffith$elm_ui$Element$Border$width(1),
-				$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$lightGrey),
-				$mdgriffith$elm_ui$Element$alignTop,
-				$mdgriffith$elm_ui$Element$padding(20),
-				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
-			])));
-var $Orasund$elm_ui_framework$Framework$Card$withSize = function (_int) {
-	return _Utils_ap(
-		$Orasund$elm_ui_framework$Framework$Card$simple,
-		_List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$width(
-				A2(
-					$mdgriffith$elm_ui$Element$minimum,
-					240,
-					A2($mdgriffith$elm_ui$Element$maximum, _int, $mdgriffith$elm_ui$Element$fill)))
-			]));
-};
-var $Orasund$elm_ui_framework$Framework$Card$large = $Orasund$elm_ui_framework$Framework$Card$withSize(480);
-var $elm$html$Html$map = $elm$virtual_dom$VirtualDom$map;
-var $mdgriffith$elm_ui$Internal$Model$Paragraph = {$: 'Paragraph'};
-var $mdgriffith$elm_ui$Internal$Model$SpacingStyle = F3(
-	function (a, b, c) {
-		return {$: 'SpacingStyle', a: a, b: b, c: c};
-	});
-var $mdgriffith$elm_ui$Internal$Flag$spacing = $mdgriffith$elm_ui$Internal$Flag$flag(3);
-var $mdgriffith$elm_ui$Internal$Model$spacingName = F2(
-	function (x, y) {
-		return 'spacing-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y)));
-	});
-var $mdgriffith$elm_ui$Element$spacing = function (x) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$spacing,
-		A3(
-			$mdgriffith$elm_ui$Internal$Model$SpacingStyle,
-			A2($mdgriffith$elm_ui$Internal$Model$spacingName, x, x),
-			x,
-			x));
-};
-var $mdgriffith$elm_ui$Element$paragraph = F2(
-	function (attrs, children) {
-		return A4(
-			$mdgriffith$elm_ui$Internal$Model$element,
-			$mdgriffith$elm_ui$Internal$Model$asParagraph,
-			$mdgriffith$elm_ui$Internal$Model$div,
 			A2(
-				$elm$core$List$cons,
-				$mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$Paragraph),
-				A2(
-					$elm$core$List$cons,
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					A2(
-						$elm$core$List$cons,
-						$mdgriffith$elm_ui$Element$spacing(5),
-						attrs))),
-			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
-	});
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M12 19l7-7 3 3-7 7-3-3z')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M2 2l7.586 7.586')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$circle,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$cx('11'),
+					$elm$svg$Svg$Attributes$cy('11'),
+					$elm$svg$Svg$Attributes$r('2')
+				]),
+			_List_Nil)
+		]));
 var $mdgriffith$elm_ui$Internal$Model$Px = function (a) {
 	return {$: 'Px', a: a};
 };
@@ -13536,6 +13730,23 @@ var $mdgriffith$elm_ui$Element$Font$color = function (fontColor) {
 			fontColor));
 };
 var $Orasund$elm_ui_framework$Framework$Color$darkerGrey = A3($mdgriffith$elm_ui$Element$rgb255, 18, 18, 18);
+var $mdgriffith$elm_ui$Internal$Flag$borderColor = $mdgriffith$elm_ui$Internal$Flag$flag(28);
+var $mdgriffith$elm_ui$Element$Border$color = function (clr) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$borderColor,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$Colored,
+			'bc-' + $mdgriffith$elm_ui$Internal$Model$formatColorClass(clr),
+			'border-color',
+			clr));
+};
+var $Orasund$elm_ui_framework$Framework$Color$lighterGrey = A3($mdgriffith$elm_ui$Element$rgb255, 245, 245, 245);
+var $Orasund$elm_ui_framework$Framework$Color$light = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$lighterGrey),
+		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$lighterGrey)
+	]);
 var $Orasund$elm_ui_framework$Framework$layoutAttributes = _Utils_ap(
 	_List_fromArray(
 		[
@@ -13837,12 +14048,29 @@ var $Orasund$elm_ui_framework$Framework$responsiveLayout = F2(
 					A2($Orasund$elm_ui_framework$Framework$layout, attributes, view)
 				]));
 	});
+var $Orasund$elm_ui_framework$Framework$Color$lightGrey = A3($mdgriffith$elm_ui$Element$rgb255, 219, 219, 219);
 var $Orasund$elm_ui_framework$Framework$Grid$simple = _List_fromArray(
 	[
 		$mdgriffith$elm_ui$Element$spacing(10),
 		$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
 		$mdgriffith$elm_ui$Element$alignTop
 	]);
+var $mdgriffith$elm_ui$Internal$Model$BorderWidth = F5(
+	function (a, b, c, d, e) {
+		return {$: 'BorderWidth', a: a, b: b, c: c, d: d, e: e};
+	});
+var $mdgriffith$elm_ui$Element$Border$width = function (v) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$borderWidth,
+		A5(
+			$mdgriffith$elm_ui$Internal$Model$BorderWidth,
+			'b-' + $elm$core$String$fromInt(v),
+			v,
+			v,
+			v,
+			v));
+};
 var $mdgriffith$elm_ui$Element$Border$widthXY = F2(
 	function (x, y) {
 		return A2(
@@ -13882,509 +14110,6 @@ var $Orasund$elm_ui_framework$Framework$Grid$section = _Utils_ap(
 			$mdgriffith$elm_ui$Element$paddingEach(
 			{bottom: 30, left: 0, right: 0, top: 10})
 		]));
-var $elm$svg$Svg$rect = $elm$svg$Svg$trustedNode('rect');
-var $elm$svg$Svg$Attributes$rx = _VirtualDom_attribute('rx');
-var $elm$svg$Svg$Attributes$ry = _VirtualDom_attribute('ry');
-var $elm$svg$Svg$Attributes$x = _VirtualDom_attribute('x');
-var $elm$svg$Svg$Attributes$y = _VirtualDom_attribute('y');
-var $author$project$Icons$square = A2(
-	$author$project$Icons$svgFeatherIcon,
-	'square',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$rect,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$x('3'),
-					$elm$svg$Svg$Attributes$y('3'),
-					$elm$svg$Svg$Attributes$width('18'),
-					$elm$svg$Svg$Attributes$height('18'),
-					$elm$svg$Svg$Attributes$rx('2'),
-					$elm$svg$Svg$Attributes$ry('2')
-				]),
-			_List_Nil)
-		]));
-var $mdgriffith$elm_ui$Internal$Flag$fontAlignment = $mdgriffith$elm_ui$Internal$Flag$flag(12);
-var $mdgriffith$elm_ui$Element$Font$alignLeft = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$fontAlignment, $mdgriffith$elm_ui$Internal$Style$classes.textLeft);
-var $Orasund$elm_ui_framework$Framework$Color$black = A3($mdgriffith$elm_ui$Element$rgb255, 0, 0, 0);
-var $mdgriffith$elm_ui$Internal$Model$Focus = {$: 'Focus'};
-var $mdgriffith$elm_ui$Internal$Model$PseudoSelector = F2(
-	function (a, b) {
-		return {$: 'PseudoSelector', a: a, b: b};
-	});
-var $mdgriffith$elm_ui$Internal$Flag$focus = $mdgriffith$elm_ui$Internal$Flag$flag(31);
-var $mdgriffith$elm_ui$Internal$Model$TransformComponent = F2(
-	function (a, b) {
-		return {$: 'TransformComponent', a: a, b: b};
-	});
-var $elm$virtual_dom$VirtualDom$mapAttribute = _VirtualDom_mapAttribute;
-var $mdgriffith$elm_ui$Internal$Model$mapAttrFromStyle = F2(
-	function (fn, attr) {
-		switch (attr.$) {
-			case 'NoAttribute':
-				return $mdgriffith$elm_ui$Internal$Model$NoAttribute;
-			case 'Describe':
-				var description = attr.a;
-				return $mdgriffith$elm_ui$Internal$Model$Describe(description);
-			case 'AlignX':
-				var x = attr.a;
-				return $mdgriffith$elm_ui$Internal$Model$AlignX(x);
-			case 'AlignY':
-				var y = attr.a;
-				return $mdgriffith$elm_ui$Internal$Model$AlignY(y);
-			case 'Width':
-				var x = attr.a;
-				return $mdgriffith$elm_ui$Internal$Model$Width(x);
-			case 'Height':
-				var x = attr.a;
-				return $mdgriffith$elm_ui$Internal$Model$Height(x);
-			case 'Class':
-				var x = attr.a;
-				var y = attr.b;
-				return A2($mdgriffith$elm_ui$Internal$Model$Class, x, y);
-			case 'StyleClass':
-				var flag = attr.a;
-				var style = attr.b;
-				return A2($mdgriffith$elm_ui$Internal$Model$StyleClass, flag, style);
-			case 'Nearby':
-				var location = attr.a;
-				var elem = attr.b;
-				return A2(
-					$mdgriffith$elm_ui$Internal$Model$Nearby,
-					location,
-					A2($mdgriffith$elm_ui$Internal$Model$map, fn, elem));
-			case 'Attr':
-				var htmlAttr = attr.a;
-				return $mdgriffith$elm_ui$Internal$Model$Attr(
-					A2($elm$virtual_dom$VirtualDom$mapAttribute, fn, htmlAttr));
-			default:
-				var fl = attr.a;
-				var trans = attr.b;
-				return A2($mdgriffith$elm_ui$Internal$Model$TransformComponent, fl, trans);
-		}
-	});
-var $mdgriffith$elm_ui$Internal$Model$removeNever = function (style) {
-	return A2($mdgriffith$elm_ui$Internal$Model$mapAttrFromStyle, $elm$core$Basics$never, style);
-};
-var $mdgriffith$elm_ui$Internal$Model$unwrapDecsHelper = F2(
-	function (attr, _v0) {
-		var styles = _v0.a;
-		var trans = _v0.b;
-		var _v1 = $mdgriffith$elm_ui$Internal$Model$removeNever(attr);
-		switch (_v1.$) {
-			case 'StyleClass':
-				var style = _v1.b;
-				return _Utils_Tuple2(
-					A2($elm$core$List$cons, style, styles),
-					trans);
-			case 'TransformComponent':
-				var flag = _v1.a;
-				var component = _v1.b;
-				return _Utils_Tuple2(
-					styles,
-					A2($mdgriffith$elm_ui$Internal$Model$composeTransformation, trans, component));
-			default:
-				return _Utils_Tuple2(styles, trans);
-		}
-	});
-var $mdgriffith$elm_ui$Internal$Model$unwrapDecorations = function (attrs) {
-	var _v0 = A3(
-		$elm$core$List$foldl,
-		$mdgriffith$elm_ui$Internal$Model$unwrapDecsHelper,
-		_Utils_Tuple2(_List_Nil, $mdgriffith$elm_ui$Internal$Model$Untransformed),
-		attrs);
-	var styles = _v0.a;
-	var transform = _v0.b;
-	return A2(
-		$elm$core$List$cons,
-		$mdgriffith$elm_ui$Internal$Model$Transform(transform),
-		styles);
-};
-var $mdgriffith$elm_ui$Element$focused = function (decs) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$focus,
-		A2(
-			$mdgriffith$elm_ui$Internal$Model$PseudoSelector,
-			$mdgriffith$elm_ui$Internal$Model$Focus,
-			$mdgriffith$elm_ui$Internal$Model$unwrapDecorations(decs)));
-};
-var $Orasund$elm_ui_framework$Framework$Color$grey = A3($mdgriffith$elm_ui$Element$rgb255, 122, 122, 122);
-var $mdgriffith$elm_ui$Element$htmlAttribute = $mdgriffith$elm_ui$Internal$Model$Attr;
-var $mdgriffith$elm_ui$Internal$Model$Hover = {$: 'Hover'};
-var $mdgriffith$elm_ui$Internal$Flag$hover = $mdgriffith$elm_ui$Internal$Flag$flag(33);
-var $mdgriffith$elm_ui$Element$mouseOver = function (decs) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$hover,
-		A2(
-			$mdgriffith$elm_ui$Internal$Model$PseudoSelector,
-			$mdgriffith$elm_ui$Internal$Model$Hover,
-			$mdgriffith$elm_ui$Internal$Model$unwrapDecorations(decs)));
-};
-var $elm$virtual_dom$VirtualDom$style = _VirtualDom_style;
-var $elm$html$Html$Attributes$style = $elm$virtual_dom$VirtualDom$style;
-var $Orasund$elm_ui_framework$Framework$Color$disabled = _Utils_ap(
-	$Orasund$elm_ui_framework$Framework$Color$simple,
-	_List_fromArray(
-		[
-			$mdgriffith$elm_ui$Element$Font$color($Orasund$elm_ui_framework$Framework$Color$grey),
-			$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-			$mdgriffith$elm_ui$Element$focused(_List_Nil),
-			$mdgriffith$elm_ui$Element$htmlAttribute(
-			A2($elm$html$Html$Attributes$style, 'cursor', 'not-allowed'))
-		]));
-var $Orasund$elm_ui_framework$Framework$Color$primary = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$turquoise),
-		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$turquoise)
-	]);
-var $mdgriffith$elm_ui$Element$Font$center = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$fontAlignment, $mdgriffith$elm_ui$Internal$Style$classes.textCenter);
-var $Orasund$elm_ui_framework$Framework$Button$simple = _Utils_ap(
-	$Orasund$elm_ui_framework$Framework$Card$simple,
-	_Utils_ap(
-		$Orasund$elm_ui_framework$Framework$Color$simple,
-		_List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Font$center,
-				$mdgriffith$elm_ui$Element$mouseOver(
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$grey)
-					])),
-				A2($mdgriffith$elm_ui$Element$paddingXY, 16, 12)
-			])));
-var $author$project$Data$Style$buttonStyle = {
-	active: $Orasund$elm_ui_framework$Framework$Color$primary,
-	container: $Orasund$elm_ui_framework$Framework$Button$simple,
-	disabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
-	label: _List_fromArray(
-		[
-			$mdgriffith$elm_ui$Element$spacing(8)
-		])
-};
-var $Orasund$elm_ui_framework$Framework$Group$center = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Border$rounded(0)
-	]);
-var $author$project$Data$Style$chipButtonStyle = {active: $Orasund$elm_ui_framework$Framework$Color$primary, container: $Orasund$elm_ui_framework$Framework$Tag$simple, disabled: _List_Nil, label: $Orasund$elm_ui_framework$Framework$Grid$simple};
-var $Orasund$elm_ui_framework$Framework$Color$dark = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$darkerGrey),
-		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$darkerGrey),
-		$mdgriffith$elm_ui$Element$Font$color($Orasund$elm_ui_framework$Framework$Color$lighterGrey)
-	]);
-var $Orasund$elm_ui_framework$Framework$Button$fill = _Utils_ap(
-	$Orasund$elm_ui_framework$Framework$Button$simple,
-	_List_fromArray(
-		[
-			$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-		]));
-var $elm$svg$Svg$line = $elm$svg$Svg$trustedNode('line');
-var $elm$svg$Svg$Attributes$x1 = _VirtualDom_attribute('x1');
-var $elm$svg$Svg$Attributes$x2 = _VirtualDom_attribute('x2');
-var $elm$svg$Svg$Attributes$y1 = _VirtualDom_attribute('y1');
-var $elm$svg$Svg$Attributes$y2 = _VirtualDom_attribute('y2');
-var $author$project$Icons$menu = A2(
-	$author$project$Icons$svgFeatherIcon,
-	'menu',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$line,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$x1('3'),
-					$elm$svg$Svg$Attributes$y1('12'),
-					$elm$svg$Svg$Attributes$x2('21'),
-					$elm$svg$Svg$Attributes$y2('12')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$line,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$x1('3'),
-					$elm$svg$Svg$Attributes$y1('6'),
-					$elm$svg$Svg$Attributes$x2('21'),
-					$elm$svg$Svg$Attributes$y2('6')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$line,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$x1('3'),
-					$elm$svg$Svg$Attributes$y1('18'),
-					$elm$svg$Svg$Attributes$x2('21'),
-					$elm$svg$Svg$Attributes$y2('18')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Icons$moreVertical = A2(
-	$author$project$Icons$svgFeatherIcon,
-	'more-vertical',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$circle,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$cx('12'),
-					$elm$svg$Svg$Attributes$cy('12'),
-					$elm$svg$Svg$Attributes$r('1')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$circle,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$cx('12'),
-					$elm$svg$Svg$Attributes$cy('5'),
-					$elm$svg$Svg$Attributes$r('1')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$circle,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$cx('12'),
-					$elm$svg$Svg$Attributes$cy('19'),
-					$elm$svg$Svg$Attributes$r('1')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Icons$search = A2(
-	$author$project$Icons$svgFeatherIcon,
-	'search',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$circle,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$cx('11'),
-					$elm$svg$Svg$Attributes$cy('11'),
-					$elm$svg$Svg$Attributes$r('8')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$line,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$x1('21'),
-					$elm$svg$Svg$Attributes$y1('21'),
-					$elm$svg$Svg$Attributes$x2('16.65'),
-					$elm$svg$Svg$Attributes$y2('16.65')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Data$Style$simpleButton = {
-	active: $Orasund$elm_ui_framework$Framework$Color$primary,
-	container: _Utils_ap($Orasund$elm_ui_framework$Framework$Button$simple, $Orasund$elm_ui_framework$Framework$Color$primary),
-	disabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
-	label: $Orasund$elm_ui_framework$Framework$Grid$simple
-};
-var $mdgriffith$elm_ui$Element$Border$roundEach = function (_v0) {
-	var topLeft = _v0.topLeft;
-	var topRight = _v0.topRight;
-	var bottomLeft = _v0.bottomLeft;
-	var bottomRight = _v0.bottomRight;
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$borderRound,
-		A3(
-			$mdgriffith$elm_ui$Internal$Model$Single,
-			'br-' + ($elm$core$String$fromInt(topLeft) + ('-' + ($elm$core$String$fromInt(topRight) + ($elm$core$String$fromInt(bottomLeft) + ('-' + $elm$core$String$fromInt(bottomRight)))))),
-			'border-radius',
-			$elm$core$String$fromInt(topLeft) + ('px ' + ($elm$core$String$fromInt(topRight) + ('px ' + ($elm$core$String$fromInt(bottomRight) + ('px ' + ($elm$core$String$fromInt(bottomLeft) + 'px'))))))));
-};
-var $Orasund$elm_ui_framework$Framework$Group$top = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Border$roundEach(
-		{bottomLeft: 0, bottomRight: 0, topLeft: 4, topRight: 4})
-	]);
-var $author$project$Data$Style$tabButtonStyle = {
-	active: $Orasund$elm_ui_framework$Framework$Color$primary,
-	container: _Utils_ap($Orasund$elm_ui_framework$Framework$Button$simple, $Orasund$elm_ui_framework$Framework$Group$top),
-	disabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
-	label: _List_fromArray(
-		[
-			$mdgriffith$elm_ui$Element$spacing(8)
-		])
-};
-var $author$project$Data$Style$textButton = {active: $Orasund$elm_ui_framework$Framework$Color$primary, container: $Orasund$elm_ui_framework$Framework$Button$simple, disabled: $Orasund$elm_ui_framework$Framework$Color$disabled, label: $Orasund$elm_ui_framework$Framework$Grid$simple};
-var $author$project$Data$Style$textInputStyle = {
-	chip: $author$project$Data$Style$chipButtonStyle,
-	chipsRow: _List_fromArray(
-		[
-			$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
-			$mdgriffith$elm_ui$Element$spacing(4),
-			$mdgriffith$elm_ui$Element$paddingEach(
-			{bottom: 8, left: 0, right: 0, top: 8})
-		]),
-	containerRow: _Utils_ap(
-		$Orasund$elm_ui_framework$Framework$Button$simple,
-		_Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Color$light,
-			_Utils_ap(
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Border$color(
-						A3($mdgriffith$elm_ui$Element$rgb255, 186, 189, 182)),
-						$mdgriffith$elm_ui$Element$Font$alignLeft,
-						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0),
-						$mdgriffith$elm_ui$Element$height(
-						$mdgriffith$elm_ui$Element$px(42))
-					]),
-				$Orasund$elm_ui_framework$Framework$Grid$simple))),
-	input: _Utils_ap(
-		$Orasund$elm_ui_framework$Framework$Color$light,
-		_List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$padding(8)
-			]))
-};
-var $author$project$Data$Style$style = {
-	button: $author$project$Data$Style$buttonStyle,
-	chipButton: $author$project$Data$Style$chipButtonStyle,
-	dialog: {
-		accept: $author$project$Data$Style$simpleButton,
-		buttonRow: _Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Grid$simple,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$paddingEach(
-					{bottom: 0, left: 0, right: 0, top: 28})
-				])),
-		containerColumn: _Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Card$simple,
-			_Utils_ap(
-				$Orasund$elm_ui_framework$Framework$Grid$simple,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$width(
-						A2(
-							$mdgriffith$elm_ui$Element$minimum,
-							280,
-							A2($mdgriffith$elm_ui$Element$maximum, 560, $mdgriffith$elm_ui$Element$fill)))
-					]))),
-		dismiss: $author$project$Data$Style$textButton,
-		title: $Orasund$elm_ui_framework$Framework$Heading$h3
-	},
-	header: _Utils_ap(
-		$Orasund$elm_ui_framework$Framework$container,
-		_Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Color$dark,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$padding(0),
-					$mdgriffith$elm_ui$Element$height(
-					$mdgriffith$elm_ui$Element$px(42))
-				]))),
-	layout: $Orasund$elm_ui_framework$Framework$responsiveLayout,
-	menuButton: {
-		active: $Orasund$elm_ui_framework$Framework$Color$primary,
-		container: _Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Button$simple,
-			_Utils_ap($Orasund$elm_ui_framework$Framework$Group$center, $Orasund$elm_ui_framework$Framework$Color$dark)),
-		disabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
-		label: $Orasund$elm_ui_framework$Framework$Grid$simple
-	},
-	menuIcon: A2(
-		$mdgriffith$elm_ui$Element$el,
-		_List_Nil,
-		$mdgriffith$elm_ui$Element$html($author$project$Icons$menu)),
-	menuTabButton: {
-		active: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$turquoise)
-			]),
-		container: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$height(
-				$mdgriffith$elm_ui$Element$px(42)),
-				$mdgriffith$elm_ui$Element$Border$widthEach(
-				{bottom: 4, left: 0, right: 0, top: 0}),
-				$mdgriffith$elm_ui$Element$paddingEach(
-				{bottom: 4, left: 8, right: 8, top: 12}),
-				$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$black)
-			]),
-		disabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
-		label: $Orasund$elm_ui_framework$Framework$Grid$simple
-	},
-	moreVerticalIcon: A2(
-		$mdgriffith$elm_ui$Element$el,
-		_List_Nil,
-		$mdgriffith$elm_ui$Element$html($author$project$Icons$moreVertical)),
-	primaryButton: $author$project$Data$Style$simpleButton,
-	search: _Utils_ap(
-		$Orasund$elm_ui_framework$Framework$Color$simple,
-		_Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Card$large,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Font$color(
-					A3($mdgriffith$elm_ui$Element$rgb255, 0, 0, 0)),
-					$mdgriffith$elm_ui$Element$padding(6),
-					$mdgriffith$elm_ui$Element$centerY,
-					$mdgriffith$elm_ui$Element$alignRight
-				]))),
-	searchFill: _Utils_ap($Orasund$elm_ui_framework$Framework$Color$light, $Orasund$elm_ui_framework$Framework$Group$center),
-	searchIcon: A2(
-		$mdgriffith$elm_ui$Element$el,
-		_List_Nil,
-		$mdgriffith$elm_ui$Element$html($author$project$Icons$search)),
-	sheet: _Utils_ap(
-		$Orasund$elm_ui_framework$Framework$Color$light,
-		_List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$width(
-				A2($mdgriffith$elm_ui$Element$maximum, 256, $mdgriffith$elm_ui$Element$fill))
-			])),
-	sheetButton: {
-		active: $Orasund$elm_ui_framework$Framework$Color$primary,
-		container: _Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Button$fill,
-			_Utils_ap(
-				$Orasund$elm_ui_framework$Framework$Group$center,
-				_Utils_ap(
-					$Orasund$elm_ui_framework$Framework$Color$light,
-					_List_fromArray(
-						[$mdgriffith$elm_ui$Element$Font$alignLeft])))),
-		disabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
-		label: $Orasund$elm_ui_framework$Framework$Grid$simple
-	},
-	snackbar: {
-		button: {
-			active: $Orasund$elm_ui_framework$Framework$Color$primary,
-			container: _Utils_ap($Orasund$elm_ui_framework$Framework$Button$simple, $Orasund$elm_ui_framework$Framework$Color$dark),
-			disabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
-			label: $Orasund$elm_ui_framework$Framework$Grid$simple
-		},
-		row: _Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Card$simple,
-			_Utils_ap(
-				$Orasund$elm_ui_framework$Framework$Color$dark,
-				_Utils_ap(
-					$Orasund$elm_ui_framework$Framework$Grid$simple,
-					_List_fromArray(
-						[
-							A2($mdgriffith$elm_ui$Element$paddingXY, 8, 6),
-							$mdgriffith$elm_ui$Element$height(
-							$mdgriffith$elm_ui$Element$px(54))
-						])))),
-		text: _List_fromArray(
-			[
-				A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
-			])
-	},
-	spacing: 8,
-	tabButton: $author$project$Data$Style$tabButtonStyle,
-	textInput: $author$project$Data$Style$textInputStyle,
-	title: $Orasund$elm_ui_framework$Framework$Heading$h2
-};
 var $elm_community$intdict$IntDict$findMin = function (dict) {
 	findMin:
 	while (true) {
@@ -14566,6 +14291,2529 @@ var $author$project$Widget$ScrollingNav$toSelect = F2(
 						arrangement)))
 		};
 	});
+var $avh4$elm_color$Color$RgbaSpace = F4(
+	function (a, b, c, d) {
+		return {$: 'RgbaSpace', a: a, b: b, c: c, d: d};
+	});
+var $avh4$elm_color$Color$scaleFrom255 = function (c) {
+	return c / 255;
+};
+var $avh4$elm_color$Color$rgb255 = F3(
+	function (r, g, b) {
+		return A4(
+			$avh4$elm_color$Color$RgbaSpace,
+			$avh4$elm_color$Color$scaleFrom255(r),
+			$avh4$elm_color$Color$scaleFrom255(g),
+			$avh4$elm_color$Color$scaleFrom255(b),
+			1.0);
+	});
+var $author$project$Widget$Style$Material$darkPalette = {
+	background: A3($avh4$elm_color$Color$rgb255, 18, 18, 18),
+	error: A3($avh4$elm_color$Color$rgb255, 207, 102, 121),
+	on: {
+		background: A3($avh4$elm_color$Color$rgb255, 255, 255, 255),
+		error: A3($avh4$elm_color$Color$rgb255, 0, 0, 0),
+		primary: A3($avh4$elm_color$Color$rgb255, 0, 0, 0),
+		secondary: A3($avh4$elm_color$Color$rgb255, 0, 0, 0),
+		surface: A3($avh4$elm_color$Color$rgb255, 255, 255, 255)
+	},
+	primary: A3($avh4$elm_color$Color$rgb255, 187, 134, 252),
+	secondary: A3($avh4$elm_color$Color$rgb255, 3, 218, 198),
+	surface: A3($avh4$elm_color$Color$rgb255, 18, 18, 18)
+};
+var $author$project$Widget$Style$Material$defaultPalette = {
+	background: A3($avh4$elm_color$Color$rgb255, 255, 255, 255),
+	error: A3($avh4$elm_color$Color$rgb255, 176, 0, 32),
+	on: {
+		background: A3($avh4$elm_color$Color$rgb255, 0, 0, 0),
+		error: A3($avh4$elm_color$Color$rgb255, 255, 255, 255),
+		primary: A3($avh4$elm_color$Color$rgb255, 255, 255, 255),
+		secondary: A3($avh4$elm_color$Color$rgb255, 0, 0, 0),
+		surface: A3($avh4$elm_color$Color$rgb255, 0, 0, 0)
+	},
+	primary: A3($avh4$elm_color$Color$rgb255, 98, 0, 238),
+	secondary: A3($avh4$elm_color$Color$rgb255, 3, 218, 198),
+	surface: A3($avh4$elm_color$Color$rgb255, 255, 255, 255)
+};
+var $mdgriffith$elm_ui$Internal$Flag$borderRound = $mdgriffith$elm_ui$Internal$Flag$flag(17);
+var $mdgriffith$elm_ui$Element$Border$rounded = function (radius) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$borderRound,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$Single,
+			'br-' + $elm$core$String$fromInt(radius),
+			'border-radius',
+			$elm$core$String$fromInt(radius) + 'px'));
+};
+var $Orasund$elm_ui_framework$Framework$Group$center = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Border$rounded(0)
+	]);
+var $mdgriffith$elm_ui$Element$Border$roundEach = function (_v0) {
+	var topLeft = _v0.topLeft;
+	var topRight = _v0.topRight;
+	var bottomLeft = _v0.bottomLeft;
+	var bottomRight = _v0.bottomRight;
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$borderRound,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$Single,
+			'br-' + ($elm$core$String$fromInt(topLeft) + ('-' + ($elm$core$String$fromInt(topRight) + ($elm$core$String$fromInt(bottomLeft) + ('-' + $elm$core$String$fromInt(bottomRight)))))),
+			'border-radius',
+			$elm$core$String$fromInt(topLeft) + ('px ' + ($elm$core$String$fromInt(topRight) + ('px ' + ($elm$core$String$fromInt(bottomRight) + ('px ' + ($elm$core$String$fromInt(bottomLeft) + 'px'))))))));
+};
+var $Orasund$elm_ui_framework$Framework$Group$left = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Border$roundEach(
+		{bottomLeft: 4, bottomRight: 0, topLeft: 4, topRight: 0})
+	]);
+var $Orasund$elm_ui_framework$Framework$Group$right = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Border$roundEach(
+		{bottomLeft: 0, bottomRight: 4, topLeft: 0, topRight: 4})
+	]);
+var $author$project$Data$Style$ElmUiFramework$buttonRow = {containerRow: $Orasund$elm_ui_framework$Framework$Grid$compact, element: _List_Nil, ifFirst: $Orasund$elm_ui_framework$Framework$Group$left, ifLast: $Orasund$elm_ui_framework$Framework$Group$right, otherwise: $Orasund$elm_ui_framework$Framework$Group$center};
+var $mdgriffith$elm_ui$Internal$Model$Focus = {$: 'Focus'};
+var $mdgriffith$elm_ui$Internal$Model$PseudoSelector = F2(
+	function (a, b) {
+		return {$: 'PseudoSelector', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Internal$Flag$focus = $mdgriffith$elm_ui$Internal$Flag$flag(31);
+var $mdgriffith$elm_ui$Internal$Model$TransformComponent = F2(
+	function (a, b) {
+		return {$: 'TransformComponent', a: a, b: b};
+	});
+var $elm$virtual_dom$VirtualDom$mapAttribute = _VirtualDom_mapAttribute;
+var $mdgriffith$elm_ui$Internal$Model$mapAttrFromStyle = F2(
+	function (fn, attr) {
+		switch (attr.$) {
+			case 'NoAttribute':
+				return $mdgriffith$elm_ui$Internal$Model$NoAttribute;
+			case 'Describe':
+				var description = attr.a;
+				return $mdgriffith$elm_ui$Internal$Model$Describe(description);
+			case 'AlignX':
+				var x = attr.a;
+				return $mdgriffith$elm_ui$Internal$Model$AlignX(x);
+			case 'AlignY':
+				var y = attr.a;
+				return $mdgriffith$elm_ui$Internal$Model$AlignY(y);
+			case 'Width':
+				var x = attr.a;
+				return $mdgriffith$elm_ui$Internal$Model$Width(x);
+			case 'Height':
+				var x = attr.a;
+				return $mdgriffith$elm_ui$Internal$Model$Height(x);
+			case 'Class':
+				var x = attr.a;
+				var y = attr.b;
+				return A2($mdgriffith$elm_ui$Internal$Model$Class, x, y);
+			case 'StyleClass':
+				var flag = attr.a;
+				var style = attr.b;
+				return A2($mdgriffith$elm_ui$Internal$Model$StyleClass, flag, style);
+			case 'Nearby':
+				var location = attr.a;
+				var elem = attr.b;
+				return A2(
+					$mdgriffith$elm_ui$Internal$Model$Nearby,
+					location,
+					A2($mdgriffith$elm_ui$Internal$Model$map, fn, elem));
+			case 'Attr':
+				var htmlAttr = attr.a;
+				return $mdgriffith$elm_ui$Internal$Model$Attr(
+					A2($elm$virtual_dom$VirtualDom$mapAttribute, fn, htmlAttr));
+			default:
+				var fl = attr.a;
+				var trans = attr.b;
+				return A2($mdgriffith$elm_ui$Internal$Model$TransformComponent, fl, trans);
+		}
+	});
+var $mdgriffith$elm_ui$Internal$Model$removeNever = function (style) {
+	return A2($mdgriffith$elm_ui$Internal$Model$mapAttrFromStyle, $elm$core$Basics$never, style);
+};
+var $mdgriffith$elm_ui$Internal$Model$unwrapDecsHelper = F2(
+	function (attr, _v0) {
+		var styles = _v0.a;
+		var trans = _v0.b;
+		var _v1 = $mdgriffith$elm_ui$Internal$Model$removeNever(attr);
+		switch (_v1.$) {
+			case 'StyleClass':
+				var style = _v1.b;
+				return _Utils_Tuple2(
+					A2($elm$core$List$cons, style, styles),
+					trans);
+			case 'TransformComponent':
+				var flag = _v1.a;
+				var component = _v1.b;
+				return _Utils_Tuple2(
+					styles,
+					A2($mdgriffith$elm_ui$Internal$Model$composeTransformation, trans, component));
+			default:
+				return _Utils_Tuple2(styles, trans);
+		}
+	});
+var $mdgriffith$elm_ui$Internal$Model$unwrapDecorations = function (attrs) {
+	var _v0 = A3(
+		$elm$core$List$foldl,
+		$mdgriffith$elm_ui$Internal$Model$unwrapDecsHelper,
+		_Utils_Tuple2(_List_Nil, $mdgriffith$elm_ui$Internal$Model$Untransformed),
+		attrs);
+	var styles = _v0.a;
+	var transform = _v0.b;
+	return A2(
+		$elm$core$List$cons,
+		$mdgriffith$elm_ui$Internal$Model$Transform(transform),
+		styles);
+};
+var $mdgriffith$elm_ui$Element$focused = function (decs) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$focus,
+		A2(
+			$mdgriffith$elm_ui$Internal$Model$PseudoSelector,
+			$mdgriffith$elm_ui$Internal$Model$Focus,
+			$mdgriffith$elm_ui$Internal$Model$unwrapDecorations(decs)));
+};
+var $Orasund$elm_ui_framework$Framework$Color$grey = A3($mdgriffith$elm_ui$Element$rgb255, 122, 122, 122);
+var $mdgriffith$elm_ui$Internal$Model$Hover = {$: 'Hover'};
+var $mdgriffith$elm_ui$Internal$Flag$hover = $mdgriffith$elm_ui$Internal$Flag$flag(33);
+var $mdgriffith$elm_ui$Element$mouseOver = function (decs) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$hover,
+		A2(
+			$mdgriffith$elm_ui$Internal$Model$PseudoSelector,
+			$mdgriffith$elm_ui$Internal$Model$Hover,
+			$mdgriffith$elm_ui$Internal$Model$unwrapDecorations(decs)));
+};
+var $Orasund$elm_ui_framework$Framework$Color$simple = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$lightGrey),
+		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$lightGrey)
+	]);
+var $elm$virtual_dom$VirtualDom$style = _VirtualDom_style;
+var $elm$html$Html$Attributes$style = $elm$virtual_dom$VirtualDom$style;
+var $Orasund$elm_ui_framework$Framework$Color$disabled = _Utils_ap(
+	$Orasund$elm_ui_framework$Framework$Color$simple,
+	_List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Font$color($Orasund$elm_ui_framework$Framework$Color$grey),
+			$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+			$mdgriffith$elm_ui$Element$focused(_List_Nil),
+			$mdgriffith$elm_ui$Element$htmlAttribute(
+			A2($elm$html$Html$Attributes$style, 'cursor', 'not-allowed'))
+		]));
+var $Orasund$elm_ui_framework$Framework$Color$primary = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$turquoise),
+		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$turquoise)
+	]);
+var $mdgriffith$elm_ui$Internal$Flag$fontAlignment = $mdgriffith$elm_ui$Internal$Flag$flag(12);
+var $mdgriffith$elm_ui$Element$Font$center = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$fontAlignment, $mdgriffith$elm_ui$Internal$Style$classes.textCenter);
+var $mdgriffith$elm_ui$Element$paddingXY = F2(
+	function (x, y) {
+		return _Utils_eq(x, y) ? A2(
+			$mdgriffith$elm_ui$Internal$Model$StyleClass,
+			$mdgriffith$elm_ui$Internal$Flag$padding,
+			A5(
+				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+				'p-' + $elm$core$String$fromInt(x),
+				x,
+				x,
+				x,
+				x)) : A2(
+			$mdgriffith$elm_ui$Internal$Model$StyleClass,
+			$mdgriffith$elm_ui$Internal$Flag$padding,
+			A5(
+				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+				'p-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y))),
+				y,
+				x,
+				y,
+				x));
+	});
+var $mdgriffith$elm_ui$Element$rgba = $mdgriffith$elm_ui$Internal$Model$Rgba;
+var $mdgriffith$elm_ui$Internal$Model$boxShadowClass = function (shadow) {
+	return $elm$core$String$concat(
+		_List_fromArray(
+			[
+				shadow.inset ? 'box-inset' : 'box-',
+				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.offset.a) + 'px',
+				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.offset.b) + 'px',
+				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.blur) + 'px',
+				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.size) + 'px',
+				$mdgriffith$elm_ui$Internal$Model$formatColorClass(shadow.color)
+			]));
+};
+var $mdgriffith$elm_ui$Internal$Flag$shadows = $mdgriffith$elm_ui$Internal$Flag$flag(19);
+var $mdgriffith$elm_ui$Element$Border$shadow = function (almostShade) {
+	var shade = {blur: almostShade.blur, color: almostShade.color, inset: false, offset: almostShade.offset, size: almostShade.size};
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$shadows,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$Single,
+			$mdgriffith$elm_ui$Internal$Model$boxShadowClass(shade),
+			'box-shadow',
+			$mdgriffith$elm_ui$Internal$Model$formatBoxShadow(shade)));
+};
+var $Orasund$elm_ui_framework$Framework$Tag$simple = _Utils_ap(
+	$Orasund$elm_ui_framework$Framework$Color$simple,
+	_List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Border$rounded(4),
+			A2($mdgriffith$elm_ui$Element$paddingXY, 7, 4)
+		]));
+var $Orasund$elm_ui_framework$Framework$Card$simple = _Utils_ap(
+	$Orasund$elm_ui_framework$Framework$Tag$simple,
+	_Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Color$light,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$shadow(
+				{
+					blur: 10,
+					color: A4($mdgriffith$elm_ui$Element$rgba, 0, 0, 0, 0.05),
+					offset: _Utils_Tuple2(0, 2),
+					size: 1
+				}),
+				$mdgriffith$elm_ui$Element$Border$width(1),
+				$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$lightGrey),
+				$mdgriffith$elm_ui$Element$alignTop,
+				$mdgriffith$elm_ui$Element$padding(20),
+				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
+			])));
+var $Orasund$elm_ui_framework$Framework$Button$simple = _Utils_ap(
+	$Orasund$elm_ui_framework$Framework$Card$simple,
+	_Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Color$simple,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Font$center,
+				$mdgriffith$elm_ui$Element$mouseOver(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$grey)
+					])),
+				A2($mdgriffith$elm_ui$Element$paddingXY, 16, 12)
+			])));
+var $author$project$Data$Style$ElmUiFramework$buttonStyle = {
+	container: $Orasund$elm_ui_framework$Framework$Button$simple,
+	ifActive: $Orasund$elm_ui_framework$Framework$Color$primary,
+	ifDisabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
+	labelRow: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$spacing(8)
+		]),
+	otherwise: _List_Nil,
+	text: _List_Nil
+};
+var $Orasund$elm_ui_framework$Framework$Group$bottom = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Border$roundEach(
+		{bottomLeft: 4, bottomRight: 4, topLeft: 0, topRight: 0})
+	]);
+var $mdgriffith$elm_ui$Internal$Model$Min = F2(
+	function (a, b) {
+		return {$: 'Min', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Element$minimum = F2(
+	function (i, l) {
+		return A2($mdgriffith$elm_ui$Internal$Model$Min, i, l);
+	});
+var $Orasund$elm_ui_framework$Framework$Card$withSize = function (_int) {
+	return _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Card$simple,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width(
+				A2(
+					$mdgriffith$elm_ui$Element$minimum,
+					240,
+					A2($mdgriffith$elm_ui$Element$maximum, _int, $mdgriffith$elm_ui$Element$fill)))
+			]));
+};
+var $Orasund$elm_ui_framework$Framework$Card$large = $Orasund$elm_ui_framework$Framework$Card$withSize(480);
+var $Orasund$elm_ui_framework$Framework$Group$top = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Border$roundEach(
+		{bottomLeft: 0, bottomRight: 0, topLeft: 4, topRight: 4})
+	]);
+var $author$project$Data$Style$ElmUiFramework$cardColumn = {
+	containerColumn: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Grid$compact,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
+			])),
+	element: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Card$large,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
+			])),
+	ifFirst: $Orasund$elm_ui_framework$Framework$Group$top,
+	ifLast: $Orasund$elm_ui_framework$Framework$Group$bottom,
+	otherwise: $Orasund$elm_ui_framework$Framework$Group$center
+};
+var $author$project$Data$Style$ElmUiFramework$chipButtonStyle = {container: $Orasund$elm_ui_framework$Framework$Tag$simple, ifActive: $Orasund$elm_ui_framework$Framework$Color$primary, ifDisabled: _List_Nil, labelRow: $Orasund$elm_ui_framework$Framework$Grid$simple, otherwise: _List_Nil, text: _List_Nil};
+var $author$project$Data$Style$ElmUiFramework$column = {containerColumn: $Orasund$elm_ui_framework$Framework$Grid$compact, element: _List_Nil, ifFirst: $Orasund$elm_ui_framework$Framework$Group$top, ifLast: $Orasund$elm_ui_framework$Framework$Group$bottom, otherwise: $Orasund$elm_ui_framework$Framework$Group$center};
+var $Orasund$elm_ui_framework$Framework$Color$green = A3($mdgriffith$elm_ui$Element$rgb255, 35, 209, 96);
+var $Orasund$elm_ui_framework$Framework$Color$success = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$green),
+		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$green)
+	]);
+var $author$project$Data$Style$ElmUiFramework$simpleButton = {
+	container: _Utils_ap($Orasund$elm_ui_framework$Framework$Button$simple, $Orasund$elm_ui_framework$Framework$Color$success),
+	ifActive: $Orasund$elm_ui_framework$Framework$Color$primary,
+	ifDisabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
+	labelRow: $Orasund$elm_ui_framework$Framework$Grid$simple,
+	otherwise: _List_Nil,
+	text: _List_Nil
+};
+var $author$project$Data$Style$ElmUiFramework$textButton = {container: $Orasund$elm_ui_framework$Framework$Button$simple, ifActive: $Orasund$elm_ui_framework$Framework$Color$primary, ifDisabled: $Orasund$elm_ui_framework$Framework$Color$disabled, labelRow: $Orasund$elm_ui_framework$Framework$Grid$simple, otherwise: _List_Nil, text: _List_Nil};
+var $author$project$Data$Style$ElmUiFramework$dialog = {
+	acceptButton: $author$project$Data$Style$ElmUiFramework$simpleButton,
+	buttonRow: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Grid$simple,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$paddingEach(
+				{bottom: 0, left: 0, right: 0, top: 28})
+			])),
+	containerColumn: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Card$simple,
+		_Utils_ap(
+			$Orasund$elm_ui_framework$Framework$Grid$simple,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$centerY,
+					$mdgriffith$elm_ui$Element$width(
+					A2(
+						$mdgriffith$elm_ui$Element$minimum,
+						280,
+						A2($mdgriffith$elm_ui$Element$maximum, 560, $mdgriffith$elm_ui$Element$fill)))
+				]))),
+	dismissButton: $author$project$Data$Style$ElmUiFramework$textButton,
+	text: _List_Nil,
+	title: $Orasund$elm_ui_framework$Framework$Heading$h3
+};
+var $elm$svg$Svg$Attributes$points = _VirtualDom_attribute('points');
+var $elm$svg$Svg$polyline = $elm$svg$Svg$trustedNode('polyline');
+var $author$project$Icons$chevronDown = A2(
+	$author$project$Icons$svgFeatherIcon,
+	'chevron-down',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$polyline,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$points('6 9 12 15 18 9')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Icons$chevronUp = A2(
+	$author$project$Icons$svgFeatherIcon,
+	'chevron-up',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$polyline,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$points('18 15 12 9 6 15')
+				]),
+			_List_Nil)
+		]));
+var $mdgriffith$elm_ui$Element$spaceEvenly = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$spacing, $mdgriffith$elm_ui$Internal$Style$classes.spaceEvenly);
+var $Orasund$elm_ui_framework$Framework$Grid$spacedEvenly = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$spaceEvenly,
+		$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+		$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+		$mdgriffith$elm_ui$Element$centerX,
+		$mdgriffith$elm_ui$Element$centerY
+	]);
+var $author$project$Data$Style$ElmUiFramework$expansionPanelStyle = {
+	collapseIcon: A2(
+		$mdgriffith$elm_ui$Element$el,
+		_List_Nil,
+		$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronUp)),
+	containerColumn: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Card$simple,
+		_Utils_ap(
+			$Orasund$elm_ui_framework$Framework$Grid$simple,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
+				]))),
+	content: _List_Nil,
+	expandIcon: A2(
+		$mdgriffith$elm_ui$Element$el,
+		_List_Nil,
+		$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronDown)),
+	labelRow: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Grid$simple,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
+			])),
+	panelRow: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Grid$spacedEvenly,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
+			]))
+};
+var $Orasund$elm_ui_framework$Framework$Color$dark = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$darkerGrey),
+		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$darkerGrey),
+		$mdgriffith$elm_ui$Element$Font$color($Orasund$elm_ui_framework$Framework$Color$lighterGrey)
+	]);
+var $elm$svg$Svg$line = $elm$svg$Svg$trustedNode('line');
+var $elm$svg$Svg$Attributes$x1 = _VirtualDom_attribute('x1');
+var $elm$svg$Svg$Attributes$x2 = _VirtualDom_attribute('x2');
+var $elm$svg$Svg$Attributes$y1 = _VirtualDom_attribute('y1');
+var $elm$svg$Svg$Attributes$y2 = _VirtualDom_attribute('y2');
+var $author$project$Icons$menu = A2(
+	$author$project$Icons$svgFeatherIcon,
+	'menu',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$line,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$x1('3'),
+					$elm$svg$Svg$Attributes$y1('12'),
+					$elm$svg$Svg$Attributes$x2('21'),
+					$elm$svg$Svg$Attributes$y2('12')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$line,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$x1('3'),
+					$elm$svg$Svg$Attributes$y1('6'),
+					$elm$svg$Svg$Attributes$x2('21'),
+					$elm$svg$Svg$Attributes$y2('6')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$line,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$x1('3'),
+					$elm$svg$Svg$Attributes$y1('18'),
+					$elm$svg$Svg$Attributes$x2('21'),
+					$elm$svg$Svg$Attributes$y2('18')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Data$Style$ElmUiFramework$menuButton = {
+	container: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Button$simple,
+		_Utils_ap($Orasund$elm_ui_framework$Framework$Group$center, $Orasund$elm_ui_framework$Framework$Color$dark)),
+	ifActive: $Orasund$elm_ui_framework$Framework$Color$primary,
+	ifDisabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
+	labelRow: $Orasund$elm_ui_framework$Framework$Grid$simple,
+	otherwise: _List_Nil,
+	text: _List_Nil
+};
+var $Orasund$elm_ui_framework$Framework$Color$black = A3($mdgriffith$elm_ui$Element$rgb255, 0, 0, 0);
+var $author$project$Data$Style$ElmUiFramework$menuTabButton = {
+	container: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$height(
+			$mdgriffith$elm_ui$Element$px(42)),
+			$mdgriffith$elm_ui$Element$Border$widthEach(
+			{bottom: 4, left: 0, right: 0, top: 0}),
+			$mdgriffith$elm_ui$Element$paddingEach(
+			{bottom: 4, left: 8, right: 8, top: 12}),
+			$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$black)
+		]),
+	ifActive: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$turquoise)
+		]),
+	ifDisabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
+	labelRow: $Orasund$elm_ui_framework$Framework$Grid$simple,
+	otherwise: _List_Nil,
+	text: _List_Nil
+};
+var $author$project$Icons$moreVertical = A2(
+	$author$project$Icons$svgFeatherIcon,
+	'more-vertical',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$circle,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$cx('12'),
+					$elm$svg$Svg$Attributes$cy('12'),
+					$elm$svg$Svg$Attributes$r('1')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$circle,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$cx('12'),
+					$elm$svg$Svg$Attributes$cy('5'),
+					$elm$svg$Svg$Attributes$r('1')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$circle,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$cx('12'),
+					$elm$svg$Svg$Attributes$cy('19'),
+					$elm$svg$Svg$Attributes$r('1')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Icons$search = A2(
+	$author$project$Icons$svgFeatherIcon,
+	'search',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$circle,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$cx('11'),
+					$elm$svg$Svg$Attributes$cy('11'),
+					$elm$svg$Svg$Attributes$r('8')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$line,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$x1('21'),
+					$elm$svg$Svg$Attributes$y1('21'),
+					$elm$svg$Svg$Attributes$x2('16.65'),
+					$elm$svg$Svg$Attributes$y2('16.65')
+				]),
+			_List_Nil)
+		]));
+var $mdgriffith$elm_ui$Element$Font$alignLeft = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$fontAlignment, $mdgriffith$elm_ui$Internal$Style$classes.textLeft);
+var $Orasund$elm_ui_framework$Framework$Button$fill = _Utils_ap(
+	$Orasund$elm_ui_framework$Framework$Button$simple,
+	_List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+		]));
+var $author$project$Data$Style$ElmUiFramework$sheetButton = {
+	container: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Button$fill,
+		_Utils_ap(
+			$Orasund$elm_ui_framework$Framework$Group$center,
+			_Utils_ap(
+				$Orasund$elm_ui_framework$Framework$Color$light,
+				_List_fromArray(
+					[$mdgriffith$elm_ui$Element$Font$alignLeft])))),
+	ifActive: $Orasund$elm_ui_framework$Framework$Color$primary,
+	ifDisabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
+	labelRow: $Orasund$elm_ui_framework$Framework$Grid$simple,
+	otherwise: _List_Nil,
+	text: _List_Nil
+};
+var $author$project$Data$Style$ElmUiFramework$snackbarButton = {
+	container: _Utils_ap($Orasund$elm_ui_framework$Framework$Button$simple, $Orasund$elm_ui_framework$Framework$Color$dark),
+	ifActive: $Orasund$elm_ui_framework$Framework$Color$primary,
+	ifDisabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
+	labelRow: $Orasund$elm_ui_framework$Framework$Grid$simple,
+	otherwise: _List_Nil,
+	text: _List_Nil
+};
+var $author$project$Data$Style$ElmUiFramework$snackbar = {
+	button: $author$project$Data$Style$ElmUiFramework$snackbarButton,
+	containerRow: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Card$simple,
+		_Utils_ap(
+			$Orasund$elm_ui_framework$Framework$Color$dark,
+			_Utils_ap(
+				$Orasund$elm_ui_framework$Framework$Grid$simple,
+				_List_fromArray(
+					[
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 6),
+						$mdgriffith$elm_ui$Element$height(
+						$mdgriffith$elm_ui$Element$px(54))
+					])))),
+	text: _List_fromArray(
+		[
+			A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+		])
+};
+var $author$project$Data$Style$ElmUiFramework$layout = {
+	container: _List_Nil,
+	header: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$container,
+		_Utils_ap(
+			$Orasund$elm_ui_framework$Framework$Color$dark,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$padding(0),
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(42))
+				]))),
+	layout: $Orasund$elm_ui_framework$Framework$responsiveLayout,
+	menuButton: $author$project$Data$Style$ElmUiFramework$menuButton,
+	menuIcon: A2(
+		$mdgriffith$elm_ui$Element$el,
+		_List_Nil,
+		$mdgriffith$elm_ui$Element$html($author$project$Icons$menu)),
+	menuTabButton: $author$project$Data$Style$ElmUiFramework$menuTabButton,
+	moreVerticalIcon: A2(
+		$mdgriffith$elm_ui$Element$el,
+		_List_Nil,
+		$mdgriffith$elm_ui$Element$html($author$project$Icons$moreVertical)),
+	search: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Color$simple,
+		_Utils_ap(
+			$Orasund$elm_ui_framework$Framework$Card$large,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					A3($mdgriffith$elm_ui$Element$rgb255, 0, 0, 0)),
+					$mdgriffith$elm_ui$Element$padding(6),
+					$mdgriffith$elm_ui$Element$centerY,
+					$mdgriffith$elm_ui$Element$alignRight
+				]))),
+	searchFill: _Utils_ap($Orasund$elm_ui_framework$Framework$Color$light, $Orasund$elm_ui_framework$Framework$Group$center),
+	searchIcon: A2(
+		$mdgriffith$elm_ui$Element$el,
+		_List_Nil,
+		$mdgriffith$elm_ui$Element$html($author$project$Icons$search)),
+	sheet: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Color$light,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width(
+				A2($mdgriffith$elm_ui$Element$maximum, 256, $mdgriffith$elm_ui$Element$fill))
+			])),
+	sheetButton: $author$project$Data$Style$ElmUiFramework$sheetButton,
+	snackbar: $author$project$Data$Style$ElmUiFramework$snackbar,
+	spacing: 8,
+	title: $Orasund$elm_ui_framework$Framework$Heading$h2
+};
+var $author$project$Data$Style$ElmUiFramework$row = {containerRow: $Orasund$elm_ui_framework$Framework$Grid$simple, element: _List_Nil, ifFirst: $Orasund$elm_ui_framework$Framework$Group$left, ifLast: $Orasund$elm_ui_framework$Framework$Group$right, otherwise: $Orasund$elm_ui_framework$Framework$Group$center};
+var $author$project$Data$Style$ElmUiFramework$tabButtonStyle = {
+	container: _Utils_ap($Orasund$elm_ui_framework$Framework$Button$simple, $Orasund$elm_ui_framework$Framework$Group$top),
+	ifActive: $Orasund$elm_ui_framework$Framework$Color$primary,
+	ifDisabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
+	labelRow: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$spacing(8)
+		]),
+	otherwise: _List_Nil,
+	text: _List_Nil
+};
+var $author$project$Data$Style$ElmUiFramework$sortTable = {
+	ascIcon: A2(
+		$mdgriffith$elm_ui$Element$el,
+		_List_Nil,
+		$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronUp)),
+	containerTable: $Orasund$elm_ui_framework$Framework$Grid$simple,
+	defaultIcon: $mdgriffith$elm_ui$Element$none,
+	descIcon: A2(
+		$mdgriffith$elm_ui$Element$el,
+		_List_Nil,
+		$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronDown)),
+	headerButton: $author$project$Data$Style$ElmUiFramework$tabButtonStyle
+};
+var $Orasund$elm_ui_framework$Framework$Card$small = $Orasund$elm_ui_framework$Framework$Card$withSize(240);
+var $author$project$Data$Style$ElmUiFramework$tab = {
+	button: $author$project$Data$Style$ElmUiFramework$tabButtonStyle,
+	containerColumn: $Orasund$elm_ui_framework$Framework$Grid$compact,
+	content: _Utils_ap($Orasund$elm_ui_framework$Framework$Card$small, $Orasund$elm_ui_framework$Framework$Group$bottom),
+	optionRow: $Orasund$elm_ui_framework$Framework$Grid$simple
+};
+var $author$project$Data$Style$ElmUiFramework$textInputStyle = {
+	chipButton: $author$project$Data$Style$ElmUiFramework$chipButtonStyle,
+	chipsRow: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+			$mdgriffith$elm_ui$Element$spacing(4),
+			$mdgriffith$elm_ui$Element$paddingEach(
+			{bottom: 8, left: 0, right: 0, top: 8})
+		]),
+	containerRow: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Button$simple,
+		_Utils_ap(
+			$Orasund$elm_ui_framework$Framework$Color$light,
+			_Utils_ap(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Border$color(
+						A3($mdgriffith$elm_ui$Element$rgb255, 186, 189, 182)),
+						$mdgriffith$elm_ui$Element$Font$alignLeft,
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0),
+						$mdgriffith$elm_ui$Element$height(
+						$mdgriffith$elm_ui$Element$px(42))
+					]),
+				$Orasund$elm_ui_framework$Framework$Grid$simple))),
+	input: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Color$light,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$padding(8)
+			]))
+};
+var $author$project$Data$Style$ElmUiFramework$style = {button: $author$project$Data$Style$ElmUiFramework$buttonStyle, buttonRow: $author$project$Data$Style$ElmUiFramework$buttonRow, cardColumn: $author$project$Data$Style$ElmUiFramework$cardColumn, chipButton: $author$project$Data$Style$ElmUiFramework$chipButtonStyle, column: $author$project$Data$Style$ElmUiFramework$column, dialog: $author$project$Data$Style$ElmUiFramework$dialog, expansionPanel: $author$project$Data$Style$ElmUiFramework$expansionPanelStyle, layout: $author$project$Data$Style$ElmUiFramework$layout, primaryButton: $author$project$Data$Style$ElmUiFramework$simpleButton, row: $author$project$Data$Style$ElmUiFramework$row, selectButton: $author$project$Data$Style$ElmUiFramework$buttonStyle, sortTable: $author$project$Data$Style$ElmUiFramework$sortTable, tab: $author$project$Data$Style$ElmUiFramework$tab, textInput: $author$project$Data$Style$ElmUiFramework$textInputStyle};
+var $mdgriffith$elm_ui$Internal$Model$Bottom = {$: 'Bottom'};
+var $mdgriffith$elm_ui$Element$alignBottom = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$Bottom);
+var $mdgriffith$elm_ui$Internal$Flag$letterSpacing = $mdgriffith$elm_ui$Internal$Flag$flag(16);
+var $mdgriffith$elm_ui$Element$Font$letterSpacing = function (offset) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$letterSpacing,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$Single,
+			'ls-' + $mdgriffith$elm_ui$Internal$Model$floatClass(offset),
+			'letter-spacing',
+			$elm$core$String$fromFloat(offset) + 'px'));
+};
+var $mdgriffith$elm_ui$Element$Font$semiBold = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$fontWeight, $mdgriffith$elm_ui$Internal$Style$classes.textSemiBold);
+var $author$project$Widget$Style$Material$buttonFont = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$htmlAttribute(
+		A2($elm$html$Html$Attributes$style, 'text-transform', 'uppercase')),
+		$mdgriffith$elm_ui$Element$Font$size(14),
+		$mdgriffith$elm_ui$Element$Font$semiBold,
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(1.25)
+	]);
+var $author$project$Widget$Style$Material$baseButton = function (_v0) {
+	return {
+		container: _Utils_ap(
+			$author$project$Widget$Style$Material$buttonFont,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(36)),
+					A2($mdgriffith$elm_ui$Element$paddingXY, 8, 8),
+					$mdgriffith$elm_ui$Element$Border$rounded(4)
+				])),
+		ifActive: _List_Nil,
+		ifDisabled: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$htmlAttribute(
+				A2($elm$html$Html$Attributes$style, 'cursor', 'not-allowed'))
+			]),
+		labelRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(8),
+				$mdgriffith$elm_ui$Element$width(
+				A2($mdgriffith$elm_ui$Element$minimum, 32, $mdgriffith$elm_ui$Element$shrink)),
+				$mdgriffith$elm_ui$Element$centerY
+			]),
+		otherwise: _List_Nil,
+		text: _List_fromArray(
+			[$mdgriffith$elm_ui$Element$centerX])
+	};
+};
+var $author$project$Widget$Style$Material$buttonDisabledOpacity = 0.38;
+var $author$project$Widget$Style$Material$buttonFocusOpacity = 0.24;
+var $author$project$Widget$Style$Material$buttonHoverOpacity = 0.08;
+var $author$project$Widget$Style$Material$buttonPressedOpacity = 0.32;
+var $mdgriffith$elm_ui$Element$fromRgb = function (clr) {
+	return A4($mdgriffith$elm_ui$Internal$Model$Rgba, clr.red, clr.green, clr.blue, clr.alpha);
+};
+var $avh4$elm_color$Color$toRgba = function (_v0) {
+	var r = _v0.a;
+	var g = _v0.b;
+	var b = _v0.c;
+	var a = _v0.d;
+	return {alpha: a, blue: b, green: g, red: r};
+};
+var $author$project$Widget$Style$Material$fromColor = A2($elm$core$Basics$composeR, $avh4$elm_color$Color$toRgba, $mdgriffith$elm_ui$Element$fromRgb);
+var $author$project$Widget$Style$Material$gray = A3($avh4$elm_color$Color$rgb255, 119, 119, 119);
+var $mdgriffith$elm_ui$Internal$Model$Active = {$: 'Active'};
+var $mdgriffith$elm_ui$Internal$Flag$active = $mdgriffith$elm_ui$Internal$Flag$flag(32);
+var $mdgriffith$elm_ui$Element$mouseDown = function (decs) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$active,
+		A2(
+			$mdgriffith$elm_ui$Internal$Model$PseudoSelector,
+			$mdgriffith$elm_ui$Internal$Model$Active,
+			$mdgriffith$elm_ui$Internal$Model$unwrapDecorations(decs)));
+};
+var $avh4$elm_color$Color$fromRgba = function (components) {
+	return A4($avh4$elm_color$Color$RgbaSpace, components.red, components.green, components.blue, components.alpha);
+};
+var $author$project$Widget$Style$Material$scaleOpacity = function (opacity) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$avh4$elm_color$Color$toRgba,
+		A2(
+			$elm$core$Basics$composeR,
+			function (color) {
+				return _Utils_update(
+					color,
+					{alpha: color.alpha * opacity});
+			},
+			$avh4$elm_color$Color$fromRgba));
+};
+var $author$project$Widget$Style$Material$shadow = function (_float) {
+	return {
+		blur: _float,
+		color: A4($mdgriffith$elm_ui$Element$rgba255, 0, 0, 0, 0.2),
+		offset: _Utils_Tuple2(0, _float),
+		size: 0
+	};
+};
+var $elm$core$Basics$pow = _Basics_pow;
+var $noahzgordon$elm_color_extra$Color$Accessibility$luminance = function (cl) {
+	var f = function (intensity) {
+		return (intensity <= 0.03928) ? (intensity / 12.92) : A2($elm$core$Basics$pow, (intensity + 0.055) / 1.055, 2.4);
+	};
+	var _v0 = function (a) {
+		return _Utils_Tuple3(
+			f(a.red),
+			f(a.green),
+			f(a.blue));
+	}(
+		$avh4$elm_color$Color$toRgba(cl));
+	var r = _v0.a;
+	var g = _v0.b;
+	var b = _v0.c;
+	return ((0.2126 * r) + (0.7152 * g)) + (0.0722 * b);
+};
+var $author$project$Widget$Style$Material$accessibleTextColor = function (color) {
+	var l = 1 + ($avh4$elm_color$Color$toRgba(color).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(color) - 1));
+	return ((1.05 / (l + 0.05)) < 7) ? A3($avh4$elm_color$Color$rgb255, 0, 0, 0) : A3($avh4$elm_color$Color$rgb255, 255, 255, 255);
+};
+var $author$project$Widget$Style$Material$textAndBackground = function (color) {
+	return _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Background$color(
+			$author$project$Widget$Style$Material$fromColor(color)),
+			$mdgriffith$elm_ui$Element$Font$color(
+			$author$project$Widget$Style$Material$fromColor(
+				$author$project$Widget$Style$Material$accessibleTextColor(color)))
+		]);
+};
+var $elm$core$Basics$cos = _Basics_cos;
+var $noahzgordon$elm_color_extra$Color$Convert$labToXyz = function (_v0) {
+	var l = _v0.l;
+	var a = _v0.a;
+	var b = _v0.b;
+	var y = (l + 16) / 116;
+	var c = function (ch) {
+		var ch_ = (ch * ch) * ch;
+		return (ch_ > 8.856e-3) ? ch_ : ((ch - (16 / 116)) / 7.787);
+	};
+	return {
+		x: c(y + (a / 500)) * 95.047,
+		y: c(y) * 100,
+		z: c(y - (b / 200)) * 108.883
+	};
+};
+var $avh4$elm_color$Color$rgb = F3(
+	function (r, g, b) {
+		return A4($avh4$elm_color$Color$RgbaSpace, r, g, b, 1.0);
+	});
+var $noahzgordon$elm_color_extra$Color$Convert$xyzToColor = function (_v0) {
+	var x = _v0.x;
+	var y = _v0.y;
+	var z = _v0.z;
+	var z_ = z / 100;
+	var y_ = y / 100;
+	var x_ = x / 100;
+	var r = ((x_ * 3.2404542) + (y_ * (-1.5371385))) + (z_ * (-0.4986));
+	var g = ((x_ * (-0.969266)) + (y_ * 1.8760108)) + (z_ * 4.1556e-2);
+	var c = function (ch) {
+		var ch_ = (ch > 3.1308e-3) ? ((1.055 * A2($elm$core$Basics$pow, ch, 1 / 2.4)) - 5.5e-2) : (12.92 * ch);
+		return A3($elm$core$Basics$clamp, 0, 1, ch_);
+	};
+	var b = ((x_ * 5.56434e-2) + (y_ * (-0.2040259))) + (z_ * 1.0572252);
+	return A3(
+		$avh4$elm_color$Color$rgb,
+		c(r),
+		c(g),
+		c(b));
+};
+var $noahzgordon$elm_color_extra$Color$Convert$labToColor = A2($elm$core$Basics$composeR, $noahzgordon$elm_color_extra$Color$Convert$labToXyz, $noahzgordon$elm_color_extra$Color$Convert$xyzToColor);
+var $elm$core$Basics$sin = _Basics_sin;
+var $author$project$Widget$Style$Material$fromCIELCH = A2(
+	$elm$core$Basics$composeR,
+	function (_v0) {
+		var l = _v0.l;
+		var c = _v0.c;
+		var h = _v0.h;
+		return {
+			a: c * $elm$core$Basics$cos(h),
+			b: c * $elm$core$Basics$sin(h),
+			l: l
+		};
+	},
+	$noahzgordon$elm_color_extra$Color$Convert$labToColor);
+var $elm$core$Basics$atan2 = _Basics_atan2;
+var $noahzgordon$elm_color_extra$Color$Convert$colorToXyz = function (cl) {
+	var c = function (ch) {
+		var ch_ = (ch > 4.045e-2) ? A2($elm$core$Basics$pow, (ch + 5.5e-2) / 1.055, 2.4) : (ch / 12.92);
+		return ch_ * 100;
+	};
+	var _v0 = $avh4$elm_color$Color$toRgba(cl);
+	var red = _v0.red;
+	var green = _v0.green;
+	var blue = _v0.blue;
+	var b = c(blue);
+	var g = c(green);
+	var r = c(red);
+	return {x: ((r * 0.4124) + (g * 0.3576)) + (b * 0.1805), y: ((r * 0.2126) + (g * 0.7152)) + (b * 7.22e-2), z: ((r * 1.93e-2) + (g * 0.1192)) + (b * 0.9505)};
+};
+var $noahzgordon$elm_color_extra$Color$Convert$xyzToLab = function (_v0) {
+	var x = _v0.x;
+	var y = _v0.y;
+	var z = _v0.z;
+	var c = function (ch) {
+		return (ch > 8.856e-3) ? A2($elm$core$Basics$pow, ch, 1 / 3) : ((7.787 * ch) + (16 / 116));
+	};
+	var x_ = c(x / 95.047);
+	var y_ = c(y / 100);
+	var z_ = c(z / 108.883);
+	return {a: 500 * (x_ - y_), b: 200 * (y_ - z_), l: (116 * y_) - 16};
+};
+var $noahzgordon$elm_color_extra$Color$Convert$colorToLab = A2($elm$core$Basics$composeR, $noahzgordon$elm_color_extra$Color$Convert$colorToXyz, $noahzgordon$elm_color_extra$Color$Convert$xyzToLab);
+var $elm$core$Basics$sqrt = _Basics_sqrt;
+var $author$project$Widget$Style$Material$toCIELCH = A2(
+	$elm$core$Basics$composeR,
+	$noahzgordon$elm_color_extra$Color$Convert$colorToLab,
+	function (_v0) {
+		var l = _v0.l;
+		var a = _v0.a;
+		var b = _v0.b;
+		return {
+			c: $elm$core$Basics$sqrt((a * a) + (b * b)),
+			h: A2($elm$core$Basics$atan2, b, a),
+			l: l
+		};
+	});
+var $author$project$Widget$Style$Material$withShade = F3(
+	function (c2, amount, c1) {
+		var fun = F2(
+			function (a, b) {
+				return {c: ((a.c * (1 - amount)) + (b.c * amount)) / 1, h: ((a.h * (1 - amount)) + (b.h * amount)) / 1, l: ((a.l * (1 - amount)) + (b.l * amount)) / 1};
+			});
+		var alpha = $avh4$elm_color$Color$toRgba(c1).alpha;
+		return $avh4$elm_color$Color$fromRgba(
+			function (color) {
+				return _Utils_update(
+					color,
+					{alpha: alpha});
+			}(
+				$avh4$elm_color$Color$toRgba(
+					$author$project$Widget$Style$Material$fromCIELCH(
+						A2(
+							fun,
+							$author$project$Widget$Style$Material$toCIELCH(c1),
+							$author$project$Widget$Style$Material$toCIELCH(c2))))));
+	});
+var $author$project$Widget$Style$Material$containedButton = function (palette) {
+	return {
+		container: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).container,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$shadow(
+					$author$project$Widget$Style$Material$shadow(2)),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_Utils_ap(
+						$author$project$Widget$Style$Material$textAndBackground(
+							A3($author$project$Widget$Style$Material$withShade, palette.on.primary, $author$project$Widget$Style$Material$buttonPressedOpacity, palette.primary)),
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Border$shadow(
+								$author$project$Widget$Style$Material$shadow(12))
+							]))),
+					$mdgriffith$elm_ui$Element$focused(
+					_Utils_ap(
+						$author$project$Widget$Style$Material$textAndBackground(
+							A3($author$project$Widget$Style$Material$withShade, palette.on.primary, $author$project$Widget$Style$Material$buttonFocusOpacity, palette.primary)),
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Border$shadow(
+								$author$project$Widget$Style$Material$shadow(6))
+							]))),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_Utils_ap(
+						$author$project$Widget$Style$Material$textAndBackground(
+							A3($author$project$Widget$Style$Material$withShade, palette.on.primary, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary)),
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Border$shadow(
+								$author$project$Widget$Style$Material$shadow(6))
+							])))
+				])),
+		ifActive: $author$project$Widget$Style$Material$textAndBackground(
+			A3($author$project$Widget$Style$Material$withShade, palette.on.primary, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary)),
+		ifDisabled: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Style$Material$fromColor(
+						A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonDisabledOpacity, $author$project$Widget$Style$Material$gray))),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray)),
+					$mdgriffith$elm_ui$Element$Border$shadow(
+					$author$project$Widget$Style$Material$shadow(0)),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		labelRow: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).labelRow,
+			_List_fromArray(
+				[
+					A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+				])),
+		otherwise: $author$project$Widget$Style$Material$textAndBackground(palette.primary),
+		text: $author$project$Widget$Style$Material$baseButton(palette).text
+	};
+};
+var $author$project$Widget$Style$Material$h6 = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Font$size(20),
+		$mdgriffith$elm_ui$Element$Font$semiBold,
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.15)
+	]);
+var $author$project$Widget$Style$Material$textButton = function (palette) {
+	return {
+		container: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).container,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor(palette.primary)),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary)))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Style$Material$fromColor(
+					A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary)))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray)),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		labelRow: $author$project$Widget$Style$Material$baseButton(palette).labelRow,
+		otherwise: _List_Nil,
+		text: $author$project$Widget$Style$Material$baseButton(palette).text
+	};
+};
+var $author$project$Widget$Style$Material$alertDialog = function (palette) {
+	return {
+		acceptButton: $author$project$Widget$Style$Material$containedButton(palette),
+		buttonRow: _List_fromArray(
+			[
+				A2($mdgriffith$elm_ui$Element$paddingXY, 8, 8),
+				$mdgriffith$elm_ui$Element$spacing(8),
+				$mdgriffith$elm_ui$Element$alignRight,
+				$mdgriffith$elm_ui$Element$alignBottom
+			]),
+		containerColumn: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$rounded(4),
+				$mdgriffith$elm_ui$Element$width(
+				A2(
+					$mdgriffith$elm_ui$Element$minimum,
+					280,
+					A2($mdgriffith$elm_ui$Element$maximum, 560, $mdgriffith$elm_ui$Element$fill))),
+				$mdgriffith$elm_ui$Element$height(
+				A2($mdgriffith$elm_ui$Element$minimum, 182, $mdgriffith$elm_ui$Element$shrink)),
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Style$Material$fromColor(palette.surface))
+			]),
+		dismissButton: $author$project$Widget$Style$Material$textButton(palette),
+		text: _List_fromArray(
+			[
+				A2($mdgriffith$elm_ui$Element$paddingXY, 24, 0)
+			]),
+		title: _Utils_ap(
+			$author$project$Widget$Style$Material$h6,
+			_List_fromArray(
+				[
+					A2($mdgriffith$elm_ui$Element$paddingXY, 24, 20)
+				]))
+	};
+};
+var $author$project$Widget$Style$Material$buttonRow = {
+	containerRow: _List_Nil,
+	element: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Border$rounded(2)
+		]),
+	ifFirst: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Border$roundEach(
+			{bottomLeft: 2, bottomRight: 0, topLeft: 2, topRight: 0})
+		]),
+	ifLast: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Border$roundEach(
+			{bottomLeft: 0, bottomRight: 2, topLeft: 0, topRight: 2})
+		]),
+	otherwise: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Border$rounded(0)
+		])
+};
+var $author$project$Widget$Style$Material$cardColumn = function (palette) {
+	return {
+		containerColumn: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$mouseOver(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Border$shadow(
+						$author$project$Widget$Style$Material$shadow(4))
+					])),
+				$mdgriffith$elm_ui$Element$alignTop,
+				$mdgriffith$elm_ui$Element$Border$rounded(4)
+			]),
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$padding(16),
+				$mdgriffith$elm_ui$Element$Border$rounded(4),
+				$mdgriffith$elm_ui$Element$Border$width(1),
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Style$Material$fromColor(palette.surface)),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Style$Material$fromColor(
+					$author$project$Widget$Style$Material$accessibleTextColor(palette.surface))),
+				$mdgriffith$elm_ui$Element$Border$color(
+				$author$project$Widget$Style$Material$fromColor(
+					A2($author$project$Widget$Style$Material$scaleOpacity, 0.14, palette.on.surface))),
+				$mdgriffith$elm_ui$Element$width(
+				A2($mdgriffith$elm_ui$Element$minimum, 344, $mdgriffith$elm_ui$Element$fill))
+			]),
+		ifFirst: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$roundEach(
+				{bottomLeft: 0, bottomRight: 0, topLeft: 4, topRight: 4})
+			]),
+		ifLast: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$roundEach(
+				{bottomLeft: 4, bottomRight: 4, topLeft: 0, topRight: 0}),
+				$mdgriffith$elm_ui$Element$Border$widthEach(
+				{bottom: 1, left: 1, right: 1, top: 0})
+			]),
+		otherwise: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$rounded(0),
+				$mdgriffith$elm_ui$Element$Border$widthEach(
+				{bottom: 1, left: 1, right: 1, top: 0})
+			])
+	};
+};
+var $author$project$Widget$Style$Material$buttonSelectedOpacity = 0.16;
+var $author$project$Widget$Style$Material$chip = function (palette) {
+	return {
+		container: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(32)),
+				$mdgriffith$elm_ui$Element$paddingEach(
+				{bottom: 0, left: 4, right: 12, top: 0}),
+				$mdgriffith$elm_ui$Element$Border$rounded(16),
+				$mdgriffith$elm_ui$Element$mouseDown(
+				$author$project$Widget$Style$Material$textAndBackground(
+					A3(
+						$author$project$Widget$Style$Material$withShade,
+						palette.on.surface,
+						$author$project$Widget$Style$Material$buttonPressedOpacity,
+						A2($author$project$Widget$Style$Material$scaleOpacity, 0.12, palette.on.surface)))),
+				$mdgriffith$elm_ui$Element$focused(
+				$author$project$Widget$Style$Material$textAndBackground(
+					A3(
+						$author$project$Widget$Style$Material$withShade,
+						palette.on.surface,
+						$author$project$Widget$Style$Material$buttonFocusOpacity,
+						A2($author$project$Widget$Style$Material$scaleOpacity, 0.12, palette.on.surface)))),
+				$mdgriffith$elm_ui$Element$mouseOver(
+				$author$project$Widget$Style$Material$textAndBackground(
+					A3(
+						$author$project$Widget$Style$Material$withShade,
+						palette.on.surface,
+						$author$project$Widget$Style$Material$buttonHoverOpacity,
+						A2($author$project$Widget$Style$Material$scaleOpacity, 0.12, palette.on.surface))))
+			]),
+		ifActive: _Utils_ap(
+			$author$project$Widget$Style$Material$textAndBackground(
+				A3(
+					$author$project$Widget$Style$Material$withShade,
+					palette.on.surface,
+					$author$project$Widget$Style$Material$buttonSelectedOpacity,
+					A2($author$project$Widget$Style$Material$scaleOpacity, 0.12, palette.on.surface))),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$shadow(
+					$author$project$Widget$Style$Material$shadow(4))
+				])),
+		ifDisabled: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).ifDisabled,
+			_Utils_ap(
+				$author$project$Widget$Style$Material$textAndBackground(
+					A3(
+						$author$project$Widget$Style$Material$withShade,
+						palette.on.surface,
+						$author$project$Widget$Style$Material$buttonDisabledOpacity,
+						A2($author$project$Widget$Style$Material$scaleOpacity, 0.12, palette.on.surface))),
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+						$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+						$mdgriffith$elm_ui$Element$focused(_List_Nil)
+					]))),
+		labelRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(0),
+				$mdgriffith$elm_ui$Element$centerY
+			]),
+		otherwise: $author$project$Widget$Style$Material$textAndBackground(
+			A2($author$project$Widget$Style$Material$scaleOpacity, 0.12, palette.on.surface)),
+		text: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$paddingEach(
+				{bottom: 0, left: 8, right: 0, top: 0})
+			])
+	};
+};
+var $author$project$Widget$Style$Material$column = {
+	containerColumn: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$spacing(8)
+		]),
+	element: _List_Nil,
+	ifFirst: _List_Nil,
+	ifLast: _List_Nil,
+	otherwise: _List_Nil
+};
+var $author$project$Widget$Style$Material$icon = F2(
+	function (string, size) {
+		return A2(
+			$elm$core$Basics$composeR,
+			$elm$svg$Svg$svg(
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$height(
+						$elm$core$String$fromInt(size)),
+						$elm$svg$Svg$Attributes$stroke('currentColor'),
+						$elm$svg$Svg$Attributes$fill('currentColor'),
+						$elm$svg$Svg$Attributes$viewBox(string),
+						$elm$svg$Svg$Attributes$width(
+						$elm$core$String$fromInt(size))
+					])),
+			A2(
+				$elm$core$Basics$composeR,
+				$mdgriffith$elm_ui$Element$html,
+				$mdgriffith$elm_ui$Element$el(_List_Nil)));
+	});
+var $author$project$Widget$Style$Material$expand_less = A3(
+	$author$project$Widget$Style$Material$icon,
+	'0 0 48 48',
+	24,
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Widget$Style$Material$expand_more = A3(
+	$author$project$Widget$Style$Material$icon,
+	'0 0 48 48',
+	24,
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M33.17 17.17L24 26.34l-9.17-9.17L12 20l12 12 12-12z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Widget$Style$Material$expansionPanel = function (palette) {
+	return {
+		collapseIcon: A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray))
+				]),
+			$author$project$Widget$Style$Material$expand_less),
+		containerColumn: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Style$Material$fromColor(palette.surface)),
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+			]),
+		content: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$padding(14)
+			]),
+		expandIcon: A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray))
+				]),
+			$author$project$Widget$Style$Material$expand_more),
+		labelRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(32)
+			]),
+		panelRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(48)),
+				$mdgriffith$elm_ui$Element$spaceEvenly,
+				$mdgriffith$elm_ui$Element$padding(14),
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+			])
+	};
+};
+var $author$project$Widget$Style$Material$drawerButton = function (palette) {
+	return {
+		container: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Font$size(14),
+				$mdgriffith$elm_ui$Element$Font$semiBold,
+				$mdgriffith$elm_ui$Element$Font$letterSpacing(0.25),
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(36)),
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				A2($mdgriffith$elm_ui$Element$paddingXY, 8, 8),
+				$mdgriffith$elm_ui$Element$Border$rounded(4),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Style$Material$fromColor(
+					$author$project$Widget$Style$Material$accessibleTextColor(palette.surface))),
+				$mdgriffith$elm_ui$Element$mouseDown(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Style$Material$fromColor(
+							A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonPressedOpacity, palette.primary)))
+					])),
+				$mdgriffith$elm_ui$Element$focused(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Style$Material$fromColor(
+							A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonFocusOpacity, palette.primary)))
+					])),
+				$mdgriffith$elm_ui$Element$mouseOver(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Style$Material$fromColor(
+							A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary)))
+					]))
+			]),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Style$Material$fromColor(
+					A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary))),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Style$Material$fromColor(palette.primary))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray)),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		labelRow: $author$project$Widget$Style$Material$baseButton(palette).labelRow,
+		otherwise: _List_Nil,
+		text: $author$project$Widget$Style$Material$baseButton(palette).text
+	};
+};
+var $mdgriffith$elm_ui$Element$Font$family = function (families) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$fontFamily,
+		A2(
+			$mdgriffith$elm_ui$Internal$Model$FontFamily,
+			A3($elm$core$List$foldl, $mdgriffith$elm_ui$Internal$Model$renderFontClassName, 'ff-', families),
+			families));
+};
+var $author$project$Widget$Style$Material$iconButton = function (palette) {
+	return {
+		container: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).container,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(48)),
+					$mdgriffith$elm_ui$Element$Border$rounded(24),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonPressedOpacity, palette.surface)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonFocusOpacity, palette.surface)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.surface)))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Style$Material$fromColor(
+					A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.surface)))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray)),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		labelRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(8),
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+				$mdgriffith$elm_ui$Element$centerY,
+				$mdgriffith$elm_ui$Element$centerX
+			]),
+		otherwise: _List_Nil,
+		text: $author$project$Widget$Style$Material$baseButton(palette).text
+	};
+};
+var $mdgriffith$elm_ui$Element$layout = $mdgriffith$elm_ui$Element$layoutWith(
+	{options: _List_Nil});
+var $author$project$Widget$Style$Material$menu = A3(
+	$author$project$Widget$Style$Material$icon,
+	'0 0 48 48',
+	24,
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M6 36h36v-4H6v4zm0-10h36v-4H6v4zm0-14v4h36v-4H6z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Widget$Style$Material$menuTabButton = function (palette) {
+	return {
+		container: _Utils_ap(
+			$author$project$Widget$Style$Material$buttonFont,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(56)),
+					$mdgriffith$elm_ui$Element$width(
+					A2(
+						$mdgriffith$elm_ui$Element$minimum,
+						90,
+						A2($mdgriffith$elm_ui$Element$maximum, 360, $mdgriffith$elm_ui$Element$fill))),
+					A2($mdgriffith$elm_ui$Element$paddingXY, 12, 16),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor(
+						$author$project$Widget$Style$Material$accessibleTextColor(palette.primary))),
+					$mdgriffith$elm_ui$Element$alignBottom,
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary)))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$widthEach(
+				{bottom: 2, left: 0, right: 0, top: 0})
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray)),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		labelRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(8),
+				$mdgriffith$elm_ui$Element$centerY,
+				$mdgriffith$elm_ui$Element$centerX
+			]),
+		otherwise: _List_Nil,
+		text: _List_Nil
+	};
+};
+var $author$project$Widget$Style$Material$more_vert = A3(
+	$author$project$Widget$Style$Material$icon,
+	'0 0 48 48',
+	24,
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M24 16c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 4c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z')
+				]),
+			_List_Nil)
+		]));
+var $mdgriffith$elm_ui$Element$Font$sansSerif = $mdgriffith$elm_ui$Internal$Model$SansSerif;
+var $author$project$Widget$Style$Material$search = A3(
+	$author$project$Widget$Style$Material$icon,
+	'0 0 48 48',
+	24,
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Widget$Style$Material$accessibleWithTextColor = F2(
+	function (c, color) {
+		var newConstrast = 7;
+		var l2 = 1 + ($avh4$elm_color$Color$toRgba(color).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(color) - 1));
+		var lighterLuminance = (newConstrast * (l2 + 0.05)) - 0.05;
+		var l1 = 1 + ($avh4$elm_color$Color$toRgba(c).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(c) - 1));
+		var darkerLuminance = (l2 + 0.05) - (0.05 / newConstrast);
+		return ((_Utils_cmp(l1, l2) > 0) ? ((((l1 + 0.05) / (l2 + 0.05)) < 7) ? A2(
+			$elm$core$Basics$composeR,
+			$noahzgordon$elm_color_extra$Color$Convert$colorToLab,
+			A2(
+				$elm$core$Basics$composeR,
+				function (col) {
+					return _Utils_update(
+						col,
+						{l: 100 * lighterLuminance});
+				},
+				$noahzgordon$elm_color_extra$Color$Convert$labToColor)) : $elm$core$Basics$identity) : ((((l2 + 0.05) / (l1 + 0.05)) < 7) ? A2(
+			$elm$core$Basics$composeR,
+			$noahzgordon$elm_color_extra$Color$Convert$colorToLab,
+			A2(
+				$elm$core$Basics$composeR,
+				function (col) {
+					return _Utils_update(
+						col,
+						{l: 100 * darkerLuminance});
+				},
+				$noahzgordon$elm_color_extra$Color$Convert$labToColor)) : $elm$core$Basics$identity))(c);
+	});
+var $author$project$Widget$Style$Material$dark = A3($avh4$elm_color$Color$rgb255, 50, 50, 50);
+var $author$project$Widget$Style$Material$snackbar = function (palette) {
+	return {
+		button: function (b) {
+			return _Utils_update(
+				b,
+				{
+					container: _Utils_ap(
+						b.container,
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Font$color(
+								$author$project$Widget$Style$Material$fromColor(
+									A2($author$project$Widget$Style$Material$accessibleWithTextColor, palette.primary, $author$project$Widget$Style$Material$dark)))
+							]))
+				});
+		}(
+			$author$project$Widget$Style$Material$textButton(palette)),
+		containerRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$dark)),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Style$Material$fromColor(
+					$author$project$Widget$Style$Material$accessibleTextColor($author$project$Widget$Style$Material$dark))),
+				$mdgriffith$elm_ui$Element$Border$rounded(4),
+				$mdgriffith$elm_ui$Element$width(
+				A2($mdgriffith$elm_ui$Element$maximum, 344, $mdgriffith$elm_ui$Element$fill)),
+				A2($mdgriffith$elm_ui$Element$paddingXY, 8, 6),
+				$mdgriffith$elm_ui$Element$spacing(8),
+				$mdgriffith$elm_ui$Element$Border$shadow(
+				$author$project$Widget$Style$Material$shadow(2))
+			]),
+		text: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$centerX,
+				A2($mdgriffith$elm_ui$Element$paddingXY, 10, 8)
+			])
+	};
+};
+var $mdgriffith$elm_ui$Element$Font$typeface = $mdgriffith$elm_ui$Internal$Model$Typeface;
+var $author$project$Widget$Style$Material$layout = F2(
+	function (palette, string) {
+		return {
+			container: _Utils_ap(
+				$author$project$Widget$Style$Material$textAndBackground(palette.background),
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Font$family(
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Font$typeface('Roboto'),
+								$mdgriffith$elm_ui$Element$Font$sansSerif
+							])),
+						$mdgriffith$elm_ui$Element$Font$size(16),
+						$mdgriffith$elm_ui$Element$Font$letterSpacing(0.5)
+					])),
+			header: _Utils_ap(
+				$author$project$Widget$Style$Material$textAndBackground(palette.primary),
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$height(
+						$mdgriffith$elm_ui$Element$px(56)),
+						$mdgriffith$elm_ui$Element$padding(16),
+						$mdgriffith$elm_ui$Element$width(
+						A2($mdgriffith$elm_ui$Element$minimum, 360, $mdgriffith$elm_ui$Element$fill))
+					])),
+			layout: $mdgriffith$elm_ui$Element$layout,
+			menuButton: $author$project$Widget$Style$Material$iconButton(palette),
+			menuIcon: $author$project$Widget$Style$Material$menu,
+			menuTabButton: $author$project$Widget$Style$Material$menuTabButton(palette),
+			moreVerticalIcon: $author$project$Widget$Style$Material$more_vert,
+			search: _Utils_ap(
+				$author$project$Widget$Style$Material$textAndBackground(palette.surface),
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spacing(8),
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 8),
+						$mdgriffith$elm_ui$Element$height(
+						$mdgriffith$elm_ui$Element$px(32)),
+						$mdgriffith$elm_ui$Element$Border$width(1),
+						$mdgriffith$elm_ui$Element$Border$rounded(4),
+						$mdgriffith$elm_ui$Element$Border$color(
+						$author$project$Widget$Style$Material$fromColor(
+							A2($author$project$Widget$Style$Material$scaleOpacity, 0.14, palette.on.surface))),
+						$mdgriffith$elm_ui$Element$focused(
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Border$shadow(
+								$author$project$Widget$Style$Material$shadow(4))
+							])),
+						$mdgriffith$elm_ui$Element$mouseOver(
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Border$shadow(
+								$author$project$Widget$Style$Material$shadow(2))
+							])),
+						$mdgriffith$elm_ui$Element$width(
+						A2($mdgriffith$elm_ui$Element$maximum, 360, $mdgriffith$elm_ui$Element$fill)),
+						$mdgriffith$elm_ui$Element$alignRight
+					])),
+			searchFill: $author$project$Widget$Style$Material$textAndBackground(palette.surface),
+			searchIcon: $author$project$Widget$Style$Material$search,
+			sheet: _Utils_ap(
+				$author$project$Widget$Style$Material$textAndBackground(palette.surface),
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$width(
+						A2($mdgriffith$elm_ui$Element$maximum, 360, $mdgriffith$elm_ui$Element$fill)),
+						$mdgriffith$elm_ui$Element$padding(8),
+						$mdgriffith$elm_ui$Element$spacing(8)
+					])),
+			sheetButton: $author$project$Widget$Style$Material$drawerButton(palette),
+			snackbar: $author$project$Widget$Style$Material$snackbar(palette),
+			spacing: 8,
+			title: _Utils_ap(
+				$author$project$Widget$Style$Material$h6,
+				_List_fromArray(
+					[
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+					]))
+		};
+	});
+var $author$project$Widget$Style$Material$outlinedButton = function (palette) {
+	return {
+		container: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).container,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$width(1),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray)),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor(palette.primary)),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonPressedOpacity, palette.primary))),
+							$mdgriffith$elm_ui$Element$Border$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A3($author$project$Widget$Style$Material$withShade, palette.primary, $author$project$Widget$Style$Material$buttonPressedOpacity, $author$project$Widget$Style$Material$gray)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonFocusOpacity, palette.primary))),
+							$mdgriffith$elm_ui$Element$Border$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A3($author$project$Widget$Style$Material$withShade, palette.primary, $author$project$Widget$Style$Material$buttonFocusOpacity, $author$project$Widget$Style$Material$gray)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary))),
+							$mdgriffith$elm_ui$Element$Border$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A3($author$project$Widget$Style$Material$withShade, palette.primary, $author$project$Widget$Style$Material$buttonHoverOpacity, $author$project$Widget$Style$Material$gray)))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Style$Material$fromColor(
+					A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary))),
+				$mdgriffith$elm_ui$Element$Border$color(
+				$author$project$Widget$Style$Material$fromColor(
+					A3($author$project$Widget$Style$Material$withShade, palette.primary, $author$project$Widget$Style$Material$buttonHoverOpacity, $author$project$Widget$Style$Material$gray)))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray)),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		labelRow: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).labelRow,
+			_List_fromArray(
+				[
+					A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+				])),
+		otherwise: _List_Nil,
+		text: $author$project$Widget$Style$Material$baseButton(palette).text
+	};
+};
+var $author$project$Widget$Style$Material$row = {
+	containerRow: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$spacing(8)
+		]),
+	element: _List_Nil,
+	ifFirst: _List_Nil,
+	ifLast: _List_Nil,
+	otherwise: _List_Nil
+};
+var $author$project$Data$Style$Material$sortTable = function (palette) {
+	return {
+		ascIcon: A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_Nil,
+			$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronUp)),
+		containerTable: _List_Nil,
+		defaultIcon: $mdgriffith$elm_ui$Element$none,
+		descIcon: A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_Nil,
+			$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronDown)),
+		headerButton: $author$project$Widget$Style$Material$textButton(palette)
+	};
+};
+var $author$project$Widget$Style$Material$tabButton = function (palette) {
+	return {
+		container: _Utils_ap(
+			$author$project$Widget$Style$Material$buttonFont,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(48)),
+					$mdgriffith$elm_ui$Element$width(
+					A2(
+						$mdgriffith$elm_ui$Element$minimum,
+						90,
+						A2($mdgriffith$elm_ui$Element$maximum, 360, $mdgriffith$elm_ui$Element$fill))),
+					A2($mdgriffith$elm_ui$Element$paddingXY, 12, 16),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor(palette.primary)),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary)))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(48)),
+				$mdgriffith$elm_ui$Element$Border$widthEach(
+				{bottom: 2, left: 0, right: 0, top: 0})
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray)),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		labelRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(8),
+				$mdgriffith$elm_ui$Element$centerY,
+				$mdgriffith$elm_ui$Element$centerX
+			]),
+		otherwise: _List_Nil,
+		text: _List_Nil
+	};
+};
+var $author$project$Widget$Style$Material$tab = function (palette) {
+	return {
+		button: $author$project$Widget$Style$Material$tabButton(palette),
+		containerColumn: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(8)
+			]),
+		content: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+			]),
+		optionRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spaceEvenly,
+				$mdgriffith$elm_ui$Element$Border$shadow(
+				$author$project$Widget$Style$Material$shadow(4))
+			])
+	};
+};
+var $author$project$Widget$Style$Material$textInput = function (palette) {
+	return {
+		chipButton: $author$project$Widget$Style$Material$chip(palette),
+		chipsRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(8)
+			]),
+		containerRow: _Utils_ap(
+			$author$project$Widget$Style$Material$textAndBackground(palette.surface),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$spacing(8),
+					A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0),
+					$mdgriffith$elm_ui$Element$Border$width(1),
+					$mdgriffith$elm_ui$Element$Border$rounded(4),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Style$Material$fromColor(
+						A2($author$project$Widget$Style$Material$scaleOpacity, 0.14, palette.on.surface))),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Style$Material$shadow(4)),
+							$mdgriffith$elm_ui$Element$Border$color(
+							$author$project$Widget$Style$Material$fromColor(palette.primary))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Style$Material$shadow(2))
+						]))
+				])),
+		input: _Utils_ap(
+			$author$project$Widget$Style$Material$textAndBackground(palette.surface),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$width(0),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				]))
+	};
+};
+var $author$project$Widget$Style$Material$toggleButton = function (palette) {
+	return {
+		container: _Utils_ap(
+			$author$project$Widget$Style$Material$buttonFont,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width(
+					$mdgriffith$elm_ui$Element$px(48)),
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(48)),
+					$mdgriffith$elm_ui$Element$padding(4),
+					$mdgriffith$elm_ui$Element$Border$width(1),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_Utils_ap(
+						$author$project$Widget$Style$Material$textAndBackground(
+							A3($author$project$Widget$Style$Material$withShade, palette.on.surface, $author$project$Widget$Style$Material$buttonPressedOpacity, palette.surface)),
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Border$color(
+								$author$project$Widget$Style$Material$fromColor(
+									A3(
+										$author$project$Widget$Style$Material$withShade,
+										palette.on.surface,
+										$author$project$Widget$Style$Material$buttonPressedOpacity,
+										A2($author$project$Widget$Style$Material$scaleOpacity, 0.14, palette.on.surface))))
+							]))),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_Utils_ap(
+						$author$project$Widget$Style$Material$textAndBackground(
+							A3($author$project$Widget$Style$Material$withShade, palette.on.surface, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.surface)),
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Border$color(
+								$author$project$Widget$Style$Material$fromColor(
+									A3(
+										$author$project$Widget$Style$Material$withShade,
+										palette.on.surface,
+										$author$project$Widget$Style$Material$buttonHoverOpacity,
+										A2($author$project$Widget$Style$Material$scaleOpacity, 0.14, palette.on.surface))))
+							])))
+				])),
+		ifActive: _Utils_ap(
+			$author$project$Widget$Style$Material$textAndBackground(
+				A3($author$project$Widget$Style$Material$withShade, palette.on.surface, $author$project$Widget$Style$Material$buttonSelectedOpacity, palette.surface)),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Style$Material$fromColor(
+						A3(
+							$author$project$Widget$Style$Material$withShade,
+							palette.on.surface,
+							$author$project$Widget$Style$Material$buttonSelectedOpacity,
+							A2($author$project$Widget$Style$Material$scaleOpacity, 0.14, palette.on.surface)))),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
+				])),
+		ifDisabled: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Style$Material$fromColor(palette.surface)),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Style$Material$fromColor(
+						A2($author$project$Widget$Style$Material$scaleOpacity, 0.14, palette.on.surface))),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray)),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
+				])),
+		labelRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(8),
+				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$Border$rounded(24),
+				$mdgriffith$elm_ui$Element$padding(8),
+				$mdgriffith$elm_ui$Element$focused(
+				$author$project$Widget$Style$Material$textAndBackground(
+					A3($author$project$Widget$Style$Material$withShade, palette.on.surface, $author$project$Widget$Style$Material$buttonFocusOpacity, palette.surface)))
+			]),
+		otherwise: _Utils_ap(
+			$author$project$Widget$Style$Material$textAndBackground(palette.surface),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Style$Material$fromColor(
+						A2($author$project$Widget$Style$Material$scaleOpacity, 0.14, palette.on.surface)))
+				])),
+		text: _List_fromArray(
+			[$mdgriffith$elm_ui$Element$centerX])
+	};
+};
+var $author$project$Data$Style$Material$style = function (palette) {
+	return {
+		button: $author$project$Widget$Style$Material$outlinedButton(palette),
+		buttonRow: $author$project$Widget$Style$Material$buttonRow,
+		cardColumn: $author$project$Widget$Style$Material$cardColumn(palette),
+		chipButton: $author$project$Widget$Style$Material$chip(palette),
+		column: $author$project$Widget$Style$Material$column,
+		dialog: $author$project$Widget$Style$Material$alertDialog(palette),
+		expansionPanel: $author$project$Widget$Style$Material$expansionPanel(palette),
+		layout: A2($author$project$Widget$Style$Material$layout, palette, 'layout'),
+		primaryButton: $author$project$Widget$Style$Material$containedButton(palette),
+		row: $author$project$Widget$Style$Material$row,
+		selectButton: $author$project$Widget$Style$Material$toggleButton(palette),
+		sortTable: $author$project$Data$Style$Material$sortTable(palette),
+		tab: $author$project$Widget$Style$Material$tab(palette),
+		textInput: $author$project$Widget$Style$Material$textInput(palette)
+	};
+};
+var $mdgriffith$elm_ui$Internal$Model$Above = {$: 'Above'};
+var $mdgriffith$elm_ui$Element$above = function (element) {
+	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$Above, element);
+};
+var $author$project$Widget$Style$Template$fontSize = 10;
+var $author$project$Widget$Style$Template$box = function (string) {
+	return _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Border$width(1),
+			$mdgriffith$elm_ui$Element$Background$color(
+			A4($mdgriffith$elm_ui$Element$rgba, 1, 1, 1, 0.5)),
+			$mdgriffith$elm_ui$Element$padding(10),
+			$mdgriffith$elm_ui$Element$spacing(10),
+			$mdgriffith$elm_ui$Element$above(
+			A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Font$size($author$project$Widget$Style$Template$fontSize)
+					]),
+				$mdgriffith$elm_ui$Element$text(string)))
+		]);
+};
+var $mdgriffith$elm_ui$Internal$Model$Below = {$: 'Below'};
+var $mdgriffith$elm_ui$Element$below = function (element) {
+	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$Below, element);
+};
+var $mdgriffith$elm_ui$Element$rgb = F3(
+	function (r, g, b) {
+		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, r, g, b, 1);
+	});
+var $author$project$Widget$Style$Template$decoration = function (string) {
+	return _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$below(
+			A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Font$size($author$project$Widget$Style$Template$fontSize)
+					]),
+				$mdgriffith$elm_ui$Element$text(string))),
+			$mdgriffith$elm_ui$Element$Background$color(
+			A3($mdgriffith$elm_ui$Element$rgb, 0.66, 0.66, 0.66))
+		]);
+};
+var $author$project$Widget$Style$Template$button = function (string) {
+	return {
+		container: $author$project$Widget$Style$Template$box(string + ':container'),
+		ifActive: $author$project$Widget$Style$Template$decoration(string + ':ifActive'),
+		ifDisabled: $author$project$Widget$Style$Template$decoration(string + ':ifDisabled'),
+		labelRow: $author$project$Widget$Style$Template$box(string + ':labelRow'),
+		otherwise: $author$project$Widget$Style$Template$decoration(string + ':otherwise'),
+		text: $author$project$Widget$Style$Template$box(string + ':text')
+	};
+};
+var $author$project$Widget$Style$Template$column = function (string) {
+	return {
+		containerColumn: $author$project$Widget$Style$Template$box(string + ':containerColumn'),
+		element: $author$project$Widget$Style$Template$box(string + ':element'),
+		ifFirst: $author$project$Widget$Style$Template$box(string + ':ifFirst'),
+		ifLast: $author$project$Widget$Style$Template$box(string + ':ifLast'),
+		otherwise: $author$project$Widget$Style$Template$box(string + ':otherwise')
+	};
+};
+var $author$project$Widget$Style$Template$dialog = function (string) {
+	return {
+		acceptButton: $author$project$Widget$Style$Template$button(string + ':acceptButton'),
+		buttonRow: $author$project$Widget$Style$Template$box(string + ':buttonRow'),
+		containerColumn: $author$project$Widget$Style$Template$box(string + ':containerColumn'),
+		dismissButton: $author$project$Widget$Style$Template$button(string + ':dismissButton'),
+		text: $author$project$Widget$Style$Template$box(string + ':text'),
+		title: $author$project$Widget$Style$Template$box(string + ':title')
+	};
+};
+var $author$project$Widget$Style$Template$icon = function (string) {
+	return A2(
+		$mdgriffith$elm_ui$Element$el,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width(
+				$mdgriffith$elm_ui$Element$px(12)),
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(12)),
+				$mdgriffith$elm_ui$Element$Border$rounded(6),
+				$mdgriffith$elm_ui$Element$Border$width(1),
+				$mdgriffith$elm_ui$Element$above(
+				A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Font$size($author$project$Widget$Style$Template$fontSize)
+						]),
+					$mdgriffith$elm_ui$Element$text(string)))
+			]),
+		$mdgriffith$elm_ui$Element$none);
+};
+var $author$project$Widget$Style$Template$expansionPanel = function (string) {
+	return {
+		collapseIcon: $author$project$Widget$Style$Template$icon(string + ':collapseIcon'),
+		containerColumn: $author$project$Widget$Style$Template$box(string + ':containerColumn'),
+		content: $author$project$Widget$Style$Template$box(string + ':content'),
+		expandIcon: $author$project$Widget$Style$Template$icon(string + ':expandIcon'),
+		labelRow: $author$project$Widget$Style$Template$box(string + ':labelRow'),
+		panelRow: $author$project$Widget$Style$Template$box(string + ':panelRow')
+	};
+};
+var $author$project$Widget$Style$Template$snackbar = function (string) {
+	return {
+		button: $author$project$Widget$Style$Template$button(string + ':button'),
+		containerRow: $author$project$Widget$Style$Template$box(string + ':containerRow'),
+		text: $author$project$Widget$Style$Template$box(string + ':text')
+	};
+};
+var $author$project$Widget$Style$Template$layout = function (string) {
+	return {
+		container: $author$project$Widget$Style$Template$box(string + ':container'),
+		header: $author$project$Widget$Style$Template$box(string + ':header'),
+		layout: $mdgriffith$elm_ui$Element$layout,
+		menuButton: $author$project$Widget$Style$Template$button(string + ':menuButton'),
+		menuIcon: $author$project$Widget$Style$Template$icon(string + ':menuIcon'),
+		menuTabButton: $author$project$Widget$Style$Template$button(string + ':menuTabButton'),
+		moreVerticalIcon: $author$project$Widget$Style$Template$icon(string + ':moreVerticalIcon'),
+		search: $author$project$Widget$Style$Template$box(string + ':search'),
+		searchFill: $author$project$Widget$Style$Template$box(string + ':searchFill'),
+		searchIcon: $author$project$Widget$Style$Template$icon(string + ':searchIcon'),
+		sheet: $author$project$Widget$Style$Template$box(string + ':sheet'),
+		sheetButton: $author$project$Widget$Style$Template$button(string + ':sheetButton'),
+		snackbar: $author$project$Widget$Style$Template$snackbar(string + ':snackbar'),
+		spacing: 8,
+		title: $author$project$Widget$Style$Template$box(string + ':title')
+	};
+};
+var $author$project$Widget$Style$Template$row = function (string) {
+	return {
+		containerRow: $author$project$Widget$Style$Template$box(string + ':containerRow'),
+		element: $author$project$Widget$Style$Template$box(string + ':element'),
+		ifFirst: $author$project$Widget$Style$Template$box(string + ':ifFirst'),
+		ifLast: $author$project$Widget$Style$Template$box(string + ':ifLast'),
+		otherwise: $author$project$Widget$Style$Template$box(string + ':otherwise')
+	};
+};
+var $author$project$Widget$Style$Template$sortTable = function (string) {
+	return {
+		ascIcon: $author$project$Widget$Style$Template$icon(string + ':ascIcon'),
+		containerTable: $author$project$Widget$Style$Template$box(string + ':containerTable'),
+		defaultIcon: $author$project$Widget$Style$Template$icon(string + ':defaultIcon'),
+		descIcon: $author$project$Widget$Style$Template$icon(string + ':descIcon'),
+		headerButton: $author$project$Widget$Style$Template$button(string + ':headerButton')
+	};
+};
+var $author$project$Widget$Style$Template$tab = function (string) {
+	return {
+		button: $author$project$Widget$Style$Template$button(string + ':button'),
+		containerColumn: $author$project$Widget$Style$Template$box(string + ':containerColumn'),
+		content: $author$project$Widget$Style$Template$box(string + ':content'),
+		optionRow: $author$project$Widget$Style$Template$box(string + ':optionRow')
+	};
+};
+var $author$project$Widget$Style$Template$textInput = function (string) {
+	return {
+		chipButton: $author$project$Widget$Style$Template$button(string + ':chipButton'),
+		chipsRow: $author$project$Widget$Style$Template$box(string + ':chipsRow'),
+		containerRow: $author$project$Widget$Style$Template$box(string + ':containerRow'),
+		input: $author$project$Widget$Style$Template$box(string + ':input')
+	};
+};
+var $author$project$Data$Style$Template$style = {
+	button: $author$project$Widget$Style$Template$button('button'),
+	buttonRow: $author$project$Widget$Style$Template$row('buttonRow'),
+	cardColumn: $author$project$Widget$Style$Template$column('cardRow'),
+	chipButton: $author$project$Widget$Style$Template$button('chipButton'),
+	column: $author$project$Widget$Style$Template$column('column'),
+	dialog: $author$project$Widget$Style$Template$dialog('dialog'),
+	expansionPanel: $author$project$Widget$Style$Template$expansionPanel('expansionPanel'),
+	layout: $author$project$Widget$Style$Template$layout('layout'),
+	primaryButton: $author$project$Widget$Style$Template$button('primaryButton'),
+	row: $author$project$Widget$Style$Template$row('row'),
+	selectButton: $author$project$Widget$Style$Template$button('selectButton'),
+	sortTable: $author$project$Widget$Style$Template$sortTable('sortTable'),
+	tab: $author$project$Widget$Style$Template$tab('tab'),
+	textInput: $author$project$Widget$Style$Template$textInput('textInput')
+};
+var $author$project$Data$Theme$toStyle = function (theme) {
+	switch (theme.$) {
+		case 'ElmUiFramework':
+			return $author$project$Data$Style$ElmUiFramework$style;
+		case 'Template':
+			return $author$project$Data$Style$Template$style;
+		case 'Material':
+			return $author$project$Data$Style$Material$style($author$project$Widget$Style$Material$defaultPalette);
+		default:
+			return $author$project$Data$Style$Material$style($author$project$Widget$Style$Material$darkPalette);
+	}
+};
+var $author$project$Reusable$layout = function (_v0) {
+	return _Utils_Tuple3(
+		'Layout',
+		A2(
+			$mdgriffith$elm_ui$Element$paragraph,
+			_List_Nil,
+			$elm$core$List$singleton(
+				$mdgriffith$elm_ui$Element$text('The layout combines the menu bar, both side bar, the dialog window and the snackbar. Try using all of them and also try resizing the window to see how they interact with each other.'))),
+		$mdgriffith$elm_ui$Element$none);
+};
+var $author$project$Reusable$scrollingNavCard = function (_v0) {
+	return _Utils_Tuple3(
+		'Scrolling Nav',
+		A2(
+			$mdgriffith$elm_ui$Element$paragraph,
+			_List_Nil,
+			$elm$core$List$singleton(
+				$mdgriffith$elm_ui$Element$text('Resize the screen and open the side-menu. Then start scrolling to see the scrolling navigation in action.'))),
+		$mdgriffith$elm_ui$Element$none);
+};
+var $author$project$Widget$button = $author$project$Internal$Button$button;
+var $author$project$Reusable$snackbar = F2(
+	function (style, addSnackbar) {
+		return _Utils_Tuple3(
+			'Snackbar',
+			A2(
+				$mdgriffith$elm_ui$Element$column,
+				$Orasund$elm_ui_framework$Framework$Grid$simple,
+				_List_fromArray(
+					[
+						A2(
+						$author$project$Widget$button,
+						style.button,
+						{
+							icon: $mdgriffith$elm_ui$Element$none,
+							onPress: $elm$core$Maybe$Just(
+								addSnackbar(
+									_Utils_Tuple2('This is a notification. It will disappear after 10 seconds.', false))),
+							text: 'Add Notification'
+						}),
+						A2(
+						$author$project$Widget$button,
+						style.button,
+						{
+							icon: $mdgriffith$elm_ui$Element$none,
+							onPress: $elm$core$Maybe$Just(
+								addSnackbar(
+									_Utils_Tuple2('You can add another notification if you want.', true))),
+							text: 'Add Notification with Action'
+						})
+					])),
+			$mdgriffith$elm_ui$Element$none);
+	});
+var $author$project$Reusable$view = function (_v0) {
+	var theme = _v0.theme;
+	var addSnackbar = _v0.addSnackbar;
+	var style = $author$project$Data$Theme$toStyle(theme);
+	return {
+		description: 'Reusable views have an internal state but no update function. You will need to do some wiring, but nothing complicated.',
+		items: _List_fromArray(
+			[
+				A2($author$project$Reusable$snackbar, style, addSnackbar),
+				$author$project$Reusable$scrollingNavCard(style),
+				$author$project$Reusable$layout(style)
+			]),
+		title: 'Reusable Views'
+	};
+};
+var $author$project$Stateless$Idle = {$: 'Idle'};
+var $author$project$Data$Example$get = function (example) {
+	switch (example.$) {
+		case 'ButtonExample':
+			return function ($) {
+				return $.button;
+			};
+		case 'SelectExample':
+			return function ($) {
+				return $.select;
+			};
+		case 'MultiSelectExample':
+			return function ($) {
+				return $.multiSelect;
+			};
+		case 'ExpansionPanelExample':
+			return function ($) {
+				return $.expansionPanel;
+			};
+		case 'TabExample':
+			return function ($) {
+				return $.tab;
+			};
+		case 'SortTableExample':
+			return function ($) {
+				return $.sortTable;
+			};
+		case 'ModalExample':
+			return function ($) {
+				return $.modal;
+			};
+		case 'DialogExample':
+			return function ($) {
+				return $.dialog;
+			};
+		case 'TextInputExample':
+			return function ($) {
+				return $.textInput;
+			};
+		default:
+			return function ($) {
+				return $.list;
+			};
+	}
+};
+var $mdgriffith$elm_ui$Internal$Model$Label = function (a) {
+	return {$: 'Label', a: a};
+};
+var $mdgriffith$elm_ui$Element$Region$description = A2($elm$core$Basics$composeL, $mdgriffith$elm_ui$Internal$Model$Describe, $mdgriffith$elm_ui$Internal$Model$Label);
+var $author$project$Internal$Button$iconButton = F2(
+	function (style, _v0) {
+		var onPress = _v0.onPress;
+		var text = _v0.text;
+		var icon = _v0.icon;
+		return A2(
+			$mdgriffith$elm_ui$Element$Input$button,
+			_Utils_ap(
+				style.container,
+				_Utils_ap(
+					_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Region$description(text)
+						]))),
+			{
+				label: A2(
+					$mdgriffith$elm_ui$Element$el,
+					style.labelRow,
+					A2($mdgriffith$elm_ui$Element$map, $elm$core$Basics$never, icon)),
+				onPress: onPress
+			});
+	});
+var $author$project$Widget$iconButton = $author$project$Internal$Button$iconButton;
+var $author$project$Internal$Select$selectButton = F2(
+	function (style, _v0) {
+		var selected = _v0.a;
+		var b = _v0.b;
+		return A2(
+			$mdgriffith$elm_ui$Element$Input$button,
+			_Utils_ap(
+				style.container,
+				_Utils_eq(b.onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : (selected ? style.ifActive : style.otherwise)),
+			{
+				label: A2(
+					$mdgriffith$elm_ui$Element$row,
+					style.labelRow,
+					_List_fromArray(
+						[
+							A2($mdgriffith$elm_ui$Element$map, $elm$core$Basics$never, b.icon),
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							style.text,
+							$mdgriffith$elm_ui$Element$text(b.text))
+						])),
+				onPress: b.onPress
+			});
+	});
+var $author$project$Widget$selectButton = $author$project$Internal$Select$selectButton;
+var $author$project$Widget$textButton = F2(
+	function (style, _v0) {
+		var text = _v0.text;
+		var onPress = _v0.onPress;
+		return A2(
+			$author$project$Internal$Button$textButton,
+			style,
+			{onPress: onPress, text: text});
+	});
 var $author$project$Icons$triangle = A2(
 	$author$project$Icons$svgFeatherIcon,
 	'triangle',
@@ -14579,17 +16827,1243 @@ var $author$project$Icons$triangle = A2(
 				]),
 			_List_Nil)
 		]));
-var $author$project$Component$FilterMultiSelectSpecific = function (a) {
-	return {$: 'FilterMultiSelectSpecific', a: a};
-};
-var $author$project$Widget$FilterMultiSelect$ToggleSelected = function (a) {
-	return {$: 'ToggleSelected', a: a};
-};
-var $mdgriffith$elm_ui$Element$Input$Placeholder = F2(
-	function (a, b) {
-		return {$: 'Placeholder', a: a, b: b};
+var $author$project$View$Test$button = F2(
+	function (idle, style) {
+		return _List_fromArray(
+			[
+				_Utils_Tuple2(
+				'Button',
+				A2(
+					$author$project$Widget$button,
+					style.button,
+					{
+						icon: A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_Nil,
+							$mdgriffith$elm_ui$Element$html($author$project$Icons$triangle)),
+						onPress: $elm$core$Maybe$Just(idle),
+						text: 'Button'
+					})),
+				_Utils_Tuple2(
+				'Text button',
+				A2(
+					$author$project$Widget$textButton,
+					style.button,
+					{
+						onPress: $elm$core$Maybe$Just(idle),
+						text: 'Button'
+					})),
+				_Utils_Tuple2(
+				'Icon button',
+				A2(
+					$author$project$Widget$iconButton,
+					style.button,
+					{
+						icon: A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_Nil,
+							$mdgriffith$elm_ui$Element$html($author$project$Icons$triangle)),
+						onPress: $elm$core$Maybe$Just(idle),
+						text: 'Button'
+					})),
+				_Utils_Tuple2(
+				'Disabled button',
+				A2(
+					$author$project$Widget$button,
+					style.button,
+					{
+						icon: A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_Nil,
+							$mdgriffith$elm_ui$Element$html($author$project$Icons$triangle)),
+						onPress: $elm$core$Maybe$Nothing,
+						text: 'Button'
+					})),
+				_Utils_Tuple2(
+				'Inactive Select button',
+				A2(
+					$author$project$Widget$selectButton,
+					style.button,
+					_Utils_Tuple2(
+						false,
+						{
+							icon: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_Nil,
+								$mdgriffith$elm_ui$Element$html($author$project$Icons$triangle)),
+							onPress: $elm$core$Maybe$Just(idle),
+							text: 'Button'
+						}))),
+				_Utils_Tuple2(
+				'Active Select button',
+				A2(
+					$author$project$Widget$selectButton,
+					style.button,
+					_Utils_Tuple2(
+						true,
+						{
+							icon: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_Nil,
+								$mdgriffith$elm_ui$Element$html($author$project$Icons$triangle)),
+							onPress: $elm$core$Maybe$Just(idle),
+							text: 'Button'
+						})))
+			]);
 	});
-var $mdgriffith$elm_ui$Element$Input$placeholder = $mdgriffith$elm_ui$Element$Input$Placeholder;
+var $author$project$View$Test$dialog = F2(
+	function (_v0, _v1) {
+		return _List_Nil;
+	});
+var $author$project$Internal$ExpansionPanel$expansionPanel = F2(
+	function (style, model) {
+		return A2(
+			$mdgriffith$elm_ui$Element$column,
+			style.containerColumn,
+			_List_fromArray(
+				[
+					A2(
+					$mdgriffith$elm_ui$Element$row,
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$Events$onClick(
+							model.onToggle(!model.isExpanded)),
+						style.panelRow),
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Element$row,
+							style.labelRow,
+							_List_fromArray(
+								[
+									A2($mdgriffith$elm_ui$Element$map, $elm$core$Basics$never, model.icon),
+									$mdgriffith$elm_ui$Element$text(model.text)
+								])),
+							A2(
+							$mdgriffith$elm_ui$Element$map,
+							$elm$core$Basics$never,
+							model.isExpanded ? style.collapseIcon : style.expandIcon)
+						])),
+					model.isExpanded ? A2($mdgriffith$elm_ui$Element$el, style.content, model.content) : $mdgriffith$elm_ui$Element$none
+				]));
+	});
+var $author$project$Widget$expansionPanel = $author$project$Internal$ExpansionPanel$expansionPanel;
+var $author$project$View$Test$expansionPanel = F2(
+	function (idle, style) {
+		return _List_fromArray(
+			[
+				_Utils_Tuple2(
+				'Collapsed',
+				A2(
+					$author$project$Widget$expansionPanel,
+					style.expansionPanel,
+					{
+						content: $mdgriffith$elm_ui$Element$text('Hidden Message'),
+						icon: A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_Nil,
+							$mdgriffith$elm_ui$Element$html($author$project$Icons$triangle)),
+						isExpanded: false,
+						onToggle: $elm$core$Basics$always(idle),
+						text: 'Button'
+					})),
+				_Utils_Tuple2(
+				'Expanded',
+				A2(
+					$author$project$Widget$expansionPanel,
+					style.expansionPanel,
+					{
+						content: $mdgriffith$elm_ui$Element$text('Hidden Message'),
+						icon: A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_Nil,
+							$mdgriffith$elm_ui$Element$html($author$project$Icons$triangle)),
+						isExpanded: true,
+						onToggle: $elm$core$Basics$always(idle),
+						text: 'Button'
+					}))
+			]);
+	});
+var $author$project$Internal$List$row = function (style) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$author$project$Internal$List$internal(style),
+		$mdgriffith$elm_ui$Element$row(style.containerRow));
+};
+var $author$project$Widget$row = $author$project$Internal$List$row;
+var $author$project$View$Test$list = F2(
+	function (_v0, style) {
+		return _List_fromArray(
+			[
+				_Utils_Tuple2(
+				'Row',
+				A2(
+					$author$project$Widget$row,
+					style.row,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$text('A'),
+							$mdgriffith$elm_ui$Element$text('B'),
+							$mdgriffith$elm_ui$Element$text('C')
+						]))),
+				_Utils_Tuple2(
+				'Column',
+				A2(
+					$author$project$Widget$column,
+					style.cardColumn,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$text('A'),
+							$mdgriffith$elm_ui$Element$text('B'),
+							$mdgriffith$elm_ui$Element$text('C')
+						]))),
+				_Utils_Tuple2(
+				'Singleton List',
+				A2(
+					$author$project$Widget$column,
+					style.cardColumn,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$text('A')
+						]))),
+				_Utils_Tuple2(
+				'Empty List',
+				A2($author$project$Widget$column, style.cardColumn, _List_Nil))
+			]);
+	});
+var $author$project$View$Test$modal = F2(
+	function (_v0, _v1) {
+		return _List_Nil;
+	});
+var $author$project$Internal$List$internalButton = F2(
+	function (style, list) {
+		return A2(
+			$elm$core$List$indexedMap,
+			function (i) {
+				return A2(
+					$elm$core$Basics$composeR,
+					$author$project$Internal$Select$selectButton(
+						{
+							container: _Utils_ap(
+								style.button.container,
+								_Utils_ap(
+									style.list.element,
+									($elm$core$List$length(list) === 1) ? _List_Nil : ((!i) ? style.list.ifFirst : (_Utils_eq(
+										i,
+										$elm$core$List$length(list) - 1) ? style.list.ifLast : style.list.otherwise)))),
+							ifActive: style.button.ifActive,
+							ifDisabled: style.button.ifDisabled,
+							labelRow: style.button.labelRow,
+							otherwise: style.button.otherwise,
+							text: style.button.text
+						}),
+					$mdgriffith$elm_ui$Element$el(_List_Nil));
+			},
+			list);
+	});
+var $author$project$Internal$List$buttonRow = function (style) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$author$project$Internal$List$internalButton(style),
+		$mdgriffith$elm_ui$Element$row(style.list.containerRow));
+};
+var $author$project$Widget$buttonRow = $author$project$Internal$List$buttonRow;
+var $elm$core$Set$fromList = function (list) {
+	return A3($elm$core$List$foldl, $elm$core$Set$insert, $elm$core$Set$empty, list);
+};
+var $author$project$Internal$Select$multiSelect = function (_v0) {
+	var selected = _v0.selected;
+	var options = _v0.options;
+	var onSelect = _v0.onSelect;
+	return A2(
+		$elm$core$List$indexedMap,
+		F2(
+			function (i, a) {
+				return _Utils_Tuple2(
+					A2($elm$core$Set$member, i, selected),
+					{
+						icon: a.icon,
+						onPress: onSelect(i),
+						text: a.text
+					});
+			}),
+		options);
+};
+var $author$project$Widget$multiSelect = $author$project$Internal$Select$multiSelect;
+var $elm$core$Dict$singleton = F2(
+	function (key, value) {
+		return A5($elm$core$Dict$RBNode_elm_builtin, $elm$core$Dict$Black, key, value, $elm$core$Dict$RBEmpty_elm_builtin, $elm$core$Dict$RBEmpty_elm_builtin);
+	});
+var $elm$core$Set$singleton = function (key) {
+	return $elm$core$Set$Set_elm_builtin(
+		A2($elm$core$Dict$singleton, key, _Utils_Tuple0));
+};
+var $author$project$View$Test$multiSelect = F2(
+	function (idle, style) {
+		return _List_fromArray(
+			[
+				_Utils_Tuple2(
+				'Some selected',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$multiSelect(
+						{
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 42])),
+							selected: $elm$core$Set$fromList(
+								_List_fromArray(
+									[0, 1]))
+						}))),
+				_Utils_Tuple2(
+				'Nothing selected',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$multiSelect(
+						{
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 42])),
+							selected: $elm$core$Set$empty
+						}))),
+				_Utils_Tuple2(
+				'Invalid selection',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$multiSelect(
+						{
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 42])),
+							selected: $elm$core$Set$singleton(-1)
+						}))),
+				_Utils_Tuple2(
+				'Disabled selection',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$multiSelect(
+						{
+							onSelect: $elm$core$Basics$always($elm$core$Maybe$Nothing),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 42])),
+							selected: $elm$core$Set$singleton(0)
+						}))),
+				_Utils_Tuple2(
+				'Empty Options',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$multiSelect(
+						{
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_Nil),
+							selected: $elm$core$Set$empty
+						})))
+			]);
+	});
+var $author$project$Internal$Select$select = function (_v0) {
+	var selected = _v0.selected;
+	var options = _v0.options;
+	var onSelect = _v0.onSelect;
+	return A2(
+		$elm$core$List$indexedMap,
+		F2(
+			function (i, a) {
+				return _Utils_Tuple2(
+					_Utils_eq(
+						selected,
+						$elm$core$Maybe$Just(i)),
+					{
+						icon: a.icon,
+						onPress: onSelect(i),
+						text: a.text
+					});
+			}),
+		options);
+};
+var $author$project$Widget$select = $author$project$Internal$Select$select;
+var $author$project$View$Test$select = F2(
+	function (idle, style) {
+		return _List_fromArray(
+			[
+				_Utils_Tuple2(
+				'First selected',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$select(
+						{
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 42])),
+							selected: $elm$core$Maybe$Just(0)
+						}))),
+				_Utils_Tuple2(
+				'Nothing selected',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$select(
+						{
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 42])),
+							selected: $elm$core$Maybe$Nothing
+						}))),
+				_Utils_Tuple2(
+				'Invalid selection',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$select(
+						{
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 42])),
+							selected: $elm$core$Maybe$Just(-1)
+						}))),
+				_Utils_Tuple2(
+				'Disabled selection',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$select(
+						{
+							onSelect: $elm$core$Basics$always($elm$core$Maybe$Nothing),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 42])),
+							selected: $elm$core$Maybe$Just(0)
+						}))),
+				_Utils_Tuple2(
+				'Empty Options',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$select(
+						{
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_Nil),
+							selected: $elm$core$Maybe$Nothing
+						})))
+			]);
+	});
+var $author$project$Internal$SortTable$Column = function (a) {
+	return {$: 'Column', a: a};
+};
+var $author$project$Internal$SortTable$FloatColumn = function (a) {
+	return {$: 'FloatColumn', a: a};
+};
+var $author$project$Internal$SortTable$floatColumn = function (_v0) {
+	var title = _v0.title;
+	var value = _v0.value;
+	var toString = _v0.toString;
+	var width = _v0.width;
+	return $author$project$Internal$SortTable$Column(
+		{
+			content: $author$project$Internal$SortTable$FloatColumn(
+				{toString: toString, value: value}),
+			title: title,
+			width: width
+		});
+};
+var $author$project$Widget$floatColumn = $author$project$Internal$SortTable$floatColumn;
+var $author$project$Internal$SortTable$IntColumn = function (a) {
+	return {$: 'IntColumn', a: a};
+};
+var $author$project$Internal$SortTable$intColumn = function (_v0) {
+	var title = _v0.title;
+	var value = _v0.value;
+	var toString = _v0.toString;
+	var width = _v0.width;
+	return $author$project$Internal$SortTable$Column(
+		{
+			content: $author$project$Internal$SortTable$IntColumn(
+				{toString: toString, value: value}),
+			title: title,
+			width: width
+		});
+};
+var $author$project$Widget$intColumn = $author$project$Internal$SortTable$intColumn;
+var $mdgriffith$elm_ui$Element$InternalColumn = function (a) {
+	return {$: 'InternalColumn', a: a};
+};
+var $mdgriffith$elm_ui$Internal$Model$GridPosition = function (a) {
+	return {$: 'GridPosition', a: a};
+};
+var $mdgriffith$elm_ui$Internal$Model$GridTemplateStyle = function (a) {
+	return {$: 'GridTemplateStyle', a: a};
+};
+var $elm$core$List$all = F2(
+	function (isOkay, list) {
+		return !A2(
+			$elm$core$List$any,
+			A2($elm$core$Basics$composeL, $elm$core$Basics$not, isOkay),
+			list);
+	});
+var $mdgriffith$elm_ui$Internal$Model$AsGrid = {$: 'AsGrid'};
+var $mdgriffith$elm_ui$Internal$Model$asGrid = $mdgriffith$elm_ui$Internal$Model$AsGrid;
+var $mdgriffith$elm_ui$Internal$Model$getSpacing = F2(
+	function (attrs, _default) {
+		return A2(
+			$elm$core$Maybe$withDefault,
+			_default,
+			A3(
+				$elm$core$List$foldr,
+				F2(
+					function (attr, acc) {
+						if (acc.$ === 'Just') {
+							var x = acc.a;
+							return $elm$core$Maybe$Just(x);
+						} else {
+							if ((attr.$ === 'StyleClass') && (attr.b.$ === 'SpacingStyle')) {
+								var _v2 = attr.b;
+								var x = _v2.b;
+								var y = _v2.c;
+								return $elm$core$Maybe$Just(
+									_Utils_Tuple2(x, y));
+							} else {
+								return $elm$core$Maybe$Nothing;
+							}
+						}
+					}),
+				$elm$core$Maybe$Nothing,
+				attrs));
+	});
+var $mdgriffith$elm_ui$Internal$Flag$gridPosition = $mdgriffith$elm_ui$Internal$Flag$flag(35);
+var $mdgriffith$elm_ui$Internal$Flag$gridTemplate = $mdgriffith$elm_ui$Internal$Flag$flag(34);
+var $elm$core$List$repeatHelp = F3(
+	function (result, n, value) {
+		repeatHelp:
+		while (true) {
+			if (n <= 0) {
+				return result;
+			} else {
+				var $temp$result = A2($elm$core$List$cons, value, result),
+					$temp$n = n - 1,
+					$temp$value = value;
+				result = $temp$result;
+				n = $temp$n;
+				value = $temp$value;
+				continue repeatHelp;
+			}
+		}
+	});
+var $elm$core$List$repeat = F2(
+	function (n, value) {
+		return A3($elm$core$List$repeatHelp, _List_Nil, n, value);
+	});
+var $mdgriffith$elm_ui$Element$tableHelper = F2(
+	function (attrs, config) {
+		var onGrid = F3(
+			function (rowLevel, columnLevel, elem) {
+				return A4(
+					$mdgriffith$elm_ui$Internal$Model$element,
+					$mdgriffith$elm_ui$Internal$Model$asEl,
+					$mdgriffith$elm_ui$Internal$Model$div,
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Internal$Model$StyleClass,
+							$mdgriffith$elm_ui$Internal$Flag$gridPosition,
+							$mdgriffith$elm_ui$Internal$Model$GridPosition(
+								{col: columnLevel, height: 1, row: rowLevel, width: 1}))
+						]),
+					$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+						_List_fromArray(
+							[elem])));
+			});
+		var columnWidth = function (col) {
+			if (col.$ === 'InternalIndexedColumn') {
+				var colConfig = col.a;
+				return colConfig.width;
+			} else {
+				var colConfig = col.a;
+				return colConfig.width;
+			}
+		};
+		var columnHeader = function (col) {
+			if (col.$ === 'InternalIndexedColumn') {
+				var colConfig = col.a;
+				return colConfig.header;
+			} else {
+				var colConfig = col.a;
+				return colConfig.header;
+			}
+		};
+		var maybeHeaders = function (headers) {
+			return A2(
+				$elm$core$List$all,
+				$elm$core$Basics$eq($mdgriffith$elm_ui$Internal$Model$Empty),
+				headers) ? $elm$core$Maybe$Nothing : $elm$core$Maybe$Just(
+				A2(
+					$elm$core$List$indexedMap,
+					F2(
+						function (col, header) {
+							return A3(onGrid, 1, col + 1, header);
+						}),
+					headers));
+		}(
+			A2($elm$core$List$map, columnHeader, config.columns));
+		var add = F3(
+			function (cell, columnConfig, cursor) {
+				if (columnConfig.$ === 'InternalIndexedColumn') {
+					var col = columnConfig.a;
+					return _Utils_update(
+						cursor,
+						{
+							column: cursor.column + 1,
+							elements: A2(
+								$elm$core$List$cons,
+								A3(
+									onGrid,
+									cursor.row,
+									cursor.column,
+									A2(
+										col.view,
+										_Utils_eq(maybeHeaders, $elm$core$Maybe$Nothing) ? (cursor.row - 1) : (cursor.row - 2),
+										cell)),
+								cursor.elements)
+						});
+				} else {
+					var col = columnConfig.a;
+					return {
+						column: cursor.column + 1,
+						elements: A2(
+							$elm$core$List$cons,
+							A3(
+								onGrid,
+								cursor.row,
+								cursor.column,
+								col.view(cell)),
+							cursor.elements),
+						row: cursor.row
+					};
+				}
+			});
+		var build = F3(
+			function (columns, rowData, cursor) {
+				var newCursor = A3(
+					$elm$core$List$foldl,
+					add(rowData),
+					cursor,
+					columns);
+				return {column: 1, elements: newCursor.elements, row: cursor.row + 1};
+			});
+		var children = A3(
+			$elm$core$List$foldl,
+			build(config.columns),
+			{
+				column: 1,
+				elements: _List_Nil,
+				row: _Utils_eq(maybeHeaders, $elm$core$Maybe$Nothing) ? 1 : 2
+			},
+			config.data);
+		var _v0 = A2(
+			$mdgriffith$elm_ui$Internal$Model$getSpacing,
+			attrs,
+			_Utils_Tuple2(0, 0));
+		var sX = _v0.a;
+		var sY = _v0.b;
+		var template = A2(
+			$mdgriffith$elm_ui$Internal$Model$StyleClass,
+			$mdgriffith$elm_ui$Internal$Flag$gridTemplate,
+			$mdgriffith$elm_ui$Internal$Model$GridTemplateStyle(
+				{
+					columns: A2($elm$core$List$map, columnWidth, config.columns),
+					rows: A2(
+						$elm$core$List$repeat,
+						$elm$core$List$length(config.data),
+						$mdgriffith$elm_ui$Internal$Model$Content),
+					spacing: _Utils_Tuple2(
+						$mdgriffith$elm_ui$Element$px(sX),
+						$mdgriffith$elm_ui$Element$px(sY))
+				}));
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asGrid,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				A2($elm$core$List$cons, template, attrs)),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+				function () {
+					if (maybeHeaders.$ === 'Nothing') {
+						return children.elements;
+					} else {
+						var renderedHeaders = maybeHeaders.a;
+						return _Utils_ap(
+							renderedHeaders,
+							$elm$core$List$reverse(children.elements));
+					}
+				}()));
+	});
+var $mdgriffith$elm_ui$Element$table = F2(
+	function (attrs, config) {
+		return A2(
+			$mdgriffith$elm_ui$Element$tableHelper,
+			attrs,
+			{
+				columns: A2($elm$core$List$map, $mdgriffith$elm_ui$Element$InternalColumn, config.columns),
+				data: config.data
+			});
+	});
+var $author$project$Internal$SortTable$sortTable = F2(
+	function (style, model) {
+		var findTitle = function (list) {
+			findTitle:
+			while (true) {
+				if (!list.b) {
+					return $elm$core$Maybe$Nothing;
+				} else {
+					var head = list.a.a;
+					var tail = list.b;
+					if (_Utils_eq(head.title, model.sortBy)) {
+						return $elm$core$Maybe$Just(head.content);
+					} else {
+						var $temp$list = tail;
+						list = $temp$list;
+						continue findTitle;
+					}
+				}
+			}
+		};
+		return A2(
+			$mdgriffith$elm_ui$Element$table,
+			style.containerTable,
+			{
+				columns: A2(
+					$elm$core$List$map,
+					function (_v1) {
+						var column = _v1.a;
+						return {
+							header: A2(
+								$author$project$Internal$Button$button,
+								style.headerButton,
+								{
+									icon: _Utils_eq(column.title, model.sortBy) ? (model.asc ? style.ascIcon : style.descIcon) : style.defaultIcon,
+									onPress: function () {
+										var _v2 = column.content;
+										if (_v2.$ === 'UnsortableColumn') {
+											return $elm$core$Maybe$Nothing;
+										} else {
+											return $elm$core$Maybe$Just(
+												model.onChange(column.title));
+										}
+									}(),
+									text: column.title
+								}),
+							view: A2(
+								$elm$core$Basics$composeR,
+								function () {
+									var _v3 = column.content;
+									switch (_v3.$) {
+										case 'IntColumn':
+											var value = _v3.a.value;
+											var toString = _v3.a.toString;
+											return A2($elm$core$Basics$composeR, value, toString);
+										case 'FloatColumn':
+											var value = _v3.a.value;
+											var toString = _v3.a.toString;
+											return A2($elm$core$Basics$composeR, value, toString);
+										case 'StringColumn':
+											var value = _v3.a.value;
+											var toString = _v3.a.toString;
+											return A2($elm$core$Basics$composeR, value, toString);
+										default:
+											var toString = _v3.a;
+											return toString;
+									}
+								}(),
+								A2(
+									$elm$core$Basics$composeR,
+									$mdgriffith$elm_ui$Element$text,
+									A2(
+										$elm$core$Basics$composeR,
+										$elm$core$List$singleton,
+										$mdgriffith$elm_ui$Element$paragraph(_List_Nil)))),
+							width: column.width
+						};
+					},
+					model.columns),
+				data: (model.asc ? $elm$core$Basics$identity : $elm$core$List$reverse)(
+					A3(
+						$elm$core$Basics$apR,
+						A2(
+							$elm$core$Maybe$andThen,
+							function (c) {
+								switch (c.$) {
+									case 'StringColumn':
+										var value = c.a.value;
+										return $elm$core$Maybe$Just(
+											$elm$core$List$sortBy(value));
+									case 'IntColumn':
+										var value = c.a.value;
+										return $elm$core$Maybe$Just(
+											$elm$core$List$sortBy(value));
+									case 'FloatColumn':
+										var value = c.a.value;
+										return $elm$core$Maybe$Just(
+											$elm$core$List$sortBy(value));
+									default:
+										return $elm$core$Maybe$Nothing;
+								}
+							},
+							findTitle(model.columns)),
+						$elm$core$Maybe$withDefault($elm$core$Basics$identity),
+						model.content))
+			});
+	});
+var $author$project$Widget$sortTable = $author$project$Internal$SortTable$sortTable;
+var $author$project$Internal$SortTable$StringColumn = function (a) {
+	return {$: 'StringColumn', a: a};
+};
+var $author$project$Internal$SortTable$stringColumn = function (_v0) {
+	var title = _v0.title;
+	var value = _v0.value;
+	var toString = _v0.toString;
+	var width = _v0.width;
+	return $author$project$Internal$SortTable$Column(
+		{
+			content: $author$project$Internal$SortTable$StringColumn(
+				{toString: toString, value: value}),
+			title: title,
+			width: width
+		});
+};
+var $author$project$Widget$stringColumn = $author$project$Internal$SortTable$stringColumn;
+var $author$project$Internal$SortTable$UnsortableColumn = function (a) {
+	return {$: 'UnsortableColumn', a: a};
+};
+var $author$project$Internal$SortTable$unsortableColumn = function (_v0) {
+	var title = _v0.title;
+	var toString = _v0.toString;
+	var width = _v0.width;
+	return $author$project$Internal$SortTable$Column(
+		{
+			content: $author$project$Internal$SortTable$UnsortableColumn(toString),
+			title: title,
+			width: width
+		});
+};
+var $author$project$Widget$unsortableColumn = $author$project$Internal$SortTable$unsortableColumn;
+var $author$project$View$Test$sortTable = F2(
+	function (idle, style) {
+		return _List_fromArray(
+			[
+				_Utils_Tuple2(
+				'Int column',
+				A2(
+					$author$project$Widget$sortTable,
+					style.sortTable,
+					{
+						asc: true,
+						columns: _List_fromArray(
+							[
+								$author$project$Widget$intColumn(
+								{
+									title: 'Id',
+									toString: function (_int) {
+										return '#' + $elm$core$String$fromInt(_int);
+									},
+									value: function ($) {
+										return $.id;
+									},
+									width: $mdgriffith$elm_ui$Element$fill
+								}),
+								$author$project$Widget$stringColumn(
+								{
+									title: 'Name',
+									toString: $elm$core$Basics$identity,
+									value: function ($) {
+										return $.name;
+									},
+									width: $mdgriffith$elm_ui$Element$fill
+								})
+							]),
+						content: _List_fromArray(
+							[
+								{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
+								{
+								hash: $elm$core$Maybe$Just('45jf'),
+								id: 2,
+								name: 'Ana',
+								rating: 1.34
+							}
+							]),
+						onChange: $elm$core$Basics$always(idle),
+						sortBy: 'Id'
+					})),
+				_Utils_Tuple2(
+				'Name column',
+				A2(
+					$author$project$Widget$sortTable,
+					style.sortTable,
+					{
+						asc: true,
+						columns: _List_fromArray(
+							[
+								$author$project$Widget$stringColumn(
+								{
+									title: 'Name',
+									toString: $elm$core$Basics$identity,
+									value: function ($) {
+										return $.name;
+									},
+									width: $mdgriffith$elm_ui$Element$fill
+								}),
+								$author$project$Widget$floatColumn(
+								{
+									title: 'Rating',
+									toString: $elm$core$String$fromFloat,
+									value: function ($) {
+										return $.rating;
+									},
+									width: $mdgriffith$elm_ui$Element$fill
+								})
+							]),
+						content: _List_fromArray(
+							[
+								{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
+								{
+								hash: $elm$core$Maybe$Just('45jf'),
+								id: 2,
+								name: 'Ana',
+								rating: 1.34
+							}
+							]),
+						onChange: $elm$core$Basics$always(idle),
+						sortBy: 'Name'
+					})),
+				_Utils_Tuple2(
+				'Float column',
+				A2(
+					$author$project$Widget$sortTable,
+					style.sortTable,
+					{
+						asc: false,
+						columns: _List_fromArray(
+							[
+								$author$project$Widget$floatColumn(
+								{
+									title: 'Rating',
+									toString: $elm$core$String$fromFloat,
+									value: function ($) {
+										return $.rating;
+									},
+									width: $mdgriffith$elm_ui$Element$fill
+								}),
+								$author$project$Widget$unsortableColumn(
+								{
+									title: 'Hash',
+									toString: A2(
+										$elm$core$Basics$composeR,
+										function ($) {
+											return $.hash;
+										},
+										$elm$core$Maybe$withDefault('None')),
+									width: $mdgriffith$elm_ui$Element$fill
+								})
+							]),
+						content: _List_fromArray(
+							[
+								{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
+								{
+								hash: $elm$core$Maybe$Just('45jf'),
+								id: 2,
+								name: 'Ana',
+								rating: 1.34
+							}
+							]),
+						onChange: $elm$core$Basics$always(idle),
+						sortBy: 'Rating'
+					})),
+				_Utils_Tuple2(
+				'Unsortable column',
+				A2(
+					$author$project$Widget$sortTable,
+					style.sortTable,
+					{
+						asc: true,
+						columns: _List_fromArray(
+							[
+								$author$project$Widget$floatColumn(
+								{
+									title: 'Rating',
+									toString: $elm$core$String$fromFloat,
+									value: function ($) {
+										return $.rating;
+									},
+									width: $mdgriffith$elm_ui$Element$fill
+								}),
+								$author$project$Widget$unsortableColumn(
+								{
+									title: 'Hash',
+									toString: A2(
+										$elm$core$Basics$composeR,
+										function ($) {
+											return $.hash;
+										},
+										$elm$core$Maybe$withDefault('None')),
+									width: $mdgriffith$elm_ui$Element$fill
+								})
+							]),
+						content: _List_fromArray(
+							[
+								{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
+								{
+								hash: $elm$core$Maybe$Just('45jf'),
+								id: 2,
+								name: 'Ana',
+								rating: 1.34
+							}
+							]),
+						onChange: $elm$core$Basics$always(idle),
+						sortBy: 'Hash'
+					})),
+				_Utils_Tuple2(
+				'Empty Table',
+				A2(
+					$author$project$Widget$sortTable,
+					style.sortTable,
+					{
+						asc: true,
+						columns: _List_Nil,
+						content: _List_fromArray(
+							[
+								{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
+								{
+								hash: $elm$core$Maybe$Just('45jf'),
+								id: 2,
+								name: 'Ana',
+								rating: 1.34
+							}
+							]),
+						onChange: $elm$core$Basics$always(idle),
+						sortBy: ''
+					}))
+			]);
+	});
+var $author$project$Internal$Tab$tab = F2(
+	function (style, _v0) {
+		var tabs = _v0.tabs;
+		var content = _v0.content;
+		return A2(
+			$mdgriffith$elm_ui$Element$column,
+			style.containerColumn,
+			_List_fromArray(
+				[
+					A2(
+					$mdgriffith$elm_ui$Element$row,
+					style.optionRow,
+					A2(
+						$elm$core$List$map,
+						$author$project$Internal$Select$selectButton(style.button),
+						$author$project$Internal$Select$select(tabs))),
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					style.content,
+					content(tabs.selected))
+				]));
+	});
+var $author$project$Widget$tab = $author$project$Internal$Tab$tab;
+var $author$project$View$Test$tab = F2(
+	function (idle, style) {
+		return _List_fromArray(
+			[
+				_Utils_Tuple2(
+				'Nothing selected',
+				A2(
+					$author$project$Widget$tab,
+					style.tab,
+					{
+						content: function (selected) {
+							return $mdgriffith$elm_ui$Element$text(
+								function () {
+									if (selected.$ === 'Nothing') {
+										return 'Please select a tab';
+									} else {
+										return '';
+									}
+								}());
+						},
+						tabs: {
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 3])),
+							selected: $elm$core$Maybe$Nothing
+						}
+					})),
+				_Utils_Tuple2(
+				'Tab selected',
+				A2(
+					$author$project$Widget$tab,
+					style.tab,
+					{
+						content: function (selected) {
+							return $mdgriffith$elm_ui$Element$text(
+								function () {
+									if ((selected.$ === 'Just') && (!selected.a)) {
+										return 'First Tab selected';
+									} else {
+										return 'Please select a tab';
+									}
+								}());
+						},
+						tabs: {
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 3])),
+							selected: $elm$core$Maybe$Just(0)
+						}
+					}))
+			]);
+	});
+var $author$project$Icons$circle = A2(
+	$author$project$Icons$svgFeatherIcon,
+	'circle',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$circle,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$cx('12'),
+					$elm$svg$Svg$Attributes$cy('12'),
+					$elm$svg$Svg$Attributes$r('10')
+				]),
+			_List_Nil)
+		]));
 var $mdgriffith$elm_ui$Element$Input$HiddenLabel = function (a) {
 	return {$: 'HiddenLabel', a: a};
 };
@@ -14707,10 +18181,6 @@ var $mdgriffith$elm_ui$Element$Input$calcMoveToCompensateForPadding = function (
 			$elm$core$Basics$floor(vSpace / 2));
 	}
 };
-var $mdgriffith$elm_ui$Element$rgb = F3(
-	function (r, g, b) {
-		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, r, g, b, 1);
-	});
 var $mdgriffith$elm_ui$Element$Input$darkGrey = A3($mdgriffith$elm_ui$Element$rgb, 186 / 255, 189 / 255, 182 / 255);
 var $mdgriffith$elm_ui$Element$Input$defaultTextPadding = A2($mdgriffith$elm_ui$Element$paddingXY, 12, 12);
 var $mdgriffith$elm_ui$Element$Input$white = A3($mdgriffith$elm_ui$Element$rgb, 1, 1, 1);
@@ -14733,9 +18203,6 @@ var $mdgriffith$elm_ui$Element$Input$getHeight = function (attr) {
 		return $elm$core$Maybe$Nothing;
 	}
 };
-var $mdgriffith$elm_ui$Internal$Model$Label = function (a) {
-	return {$: 'Label', a: a};
-};
 var $mdgriffith$elm_ui$Element$Input$hiddenLabelAttribute = function (label) {
 	if (label.$ === 'HiddenLabel') {
 		var textLabel = label.a;
@@ -15383,7 +18850,7 @@ var $mdgriffith$elm_ui$Element$Input$text = $mdgriffith$elm_ui$Element$Input$tex
 		spellchecked: false,
 		type_: $mdgriffith$elm_ui$Element$Input$TextInputNode('text')
 	});
-var $author$project$Widget$textInput = F2(
+var $author$project$Internal$TextInput$textInput = F2(
 	function (style, _v0) {
 		var chips = _v0.chips;
 		var placeholder = _v0.placeholder;
@@ -15395,12 +18862,15 @@ var $author$project$Widget$textInput = F2(
 			style.containerRow,
 			_List_fromArray(
 				[
-					A2(
+					$elm$core$List$isEmpty(chips) ? $mdgriffith$elm_ui$Element$none : A2(
 					$mdgriffith$elm_ui$Element$row,
 					style.chipsRow,
 					A2(
 						$elm$core$List$map,
-						$author$project$Internal$Button$button(style.chip),
+						A2(
+							$elm$core$Basics$composeR,
+							$author$project$Internal$Button$button(style.chipButton),
+							$mdgriffith$elm_ui$Element$el(_List_Nil)),
 						chips)),
 					A2(
 					$mdgriffith$elm_ui$Element$Input$text,
@@ -15413,69 +18883,637 @@ var $author$project$Widget$textInput = F2(
 					})
 				]));
 	});
-var $author$project$Widget$FilterMultiSelect$ChangedRaw = function (a) {
-	return {$: 'ChangedRaw', a: a};
-};
-var $author$project$Widget$FilterMultiSelect$viewInput = F2(
-	function (model, _v0) {
-		var msgMapper = _v0.msgMapper;
-		var placeholder = _v0.placeholder;
-		var label = _v0.label;
-		var toChip = _v0.toChip;
-		return {
-			chips: A2(
-				$elm$core$List$map,
-				toChip,
-				$elm$core$Set$toList(model.selected)),
-			label: label,
-			onChange: A2($elm$core$Basics$composeR, $author$project$Widget$FilterMultiSelect$ChangedRaw, msgMapper),
-			placeholder: placeholder,
-			text: model.raw
-		};
+var $author$project$Widget$textInput = $author$project$Internal$TextInput$textInput;
+var $author$project$View$Test$textInput = F2(
+	function (idle, style) {
+		return _List_fromArray(
+			[
+				_Utils_Tuple2(
+				'Nothing Selected',
+				A2(
+					$author$project$Widget$textInput,
+					style.textInput,
+					{
+						chips: _List_Nil,
+						label: 'Label',
+						onChange: $elm$core$Basics$always(idle),
+						placeholder: $elm$core$Maybe$Nothing,
+						text: ''
+					})),
+				_Utils_Tuple2(
+				'Some chips',
+				A2(
+					$author$project$Widget$textInput,
+					style.textInput,
+					{
+						chips: _List_fromArray(
+							[
+								{
+								icon: A2(
+									$mdgriffith$elm_ui$Element$el,
+									_List_Nil,
+									$mdgriffith$elm_ui$Element$html($author$project$Icons$triangle)),
+								onPress: $elm$core$Maybe$Just(idle),
+								text: 'A'
+							},
+								{
+								icon: A2(
+									$mdgriffith$elm_ui$Element$el,
+									_List_Nil,
+									$mdgriffith$elm_ui$Element$html($author$project$Icons$circle)),
+								onPress: $elm$core$Maybe$Just(idle),
+								text: 'B'
+							}
+							]),
+						label: 'Label',
+						onChange: $elm$core$Basics$always(idle),
+						placeholder: $elm$core$Maybe$Nothing,
+						text: ''
+					}))
+			]);
 	});
-var $elm$core$Dict$filter = F2(
-	function (isGood, dict) {
+var $author$project$Data$Example$toTests = function (example) {
+	switch (example.$) {
+		case 'ButtonExample':
+			return $author$project$View$Test$button;
+		case 'SelectExample':
+			return $author$project$View$Test$select;
+		case 'MultiSelectExample':
+			return $author$project$View$Test$multiSelect;
+		case 'ExpansionPanelExample':
+			return $author$project$View$Test$expansionPanel;
+		case 'TabExample':
+			return $author$project$View$Test$tab;
+		case 'SortTableExample':
+			return $author$project$View$Test$sortTable;
+		case 'ModalExample':
+			return $author$project$View$Test$modal;
+		case 'DialogExample':
+			return $author$project$View$Test$dialog;
+		case 'TextInputExample':
+			return $author$project$View$Test$textInput;
+		default:
+			return $author$project$View$Test$list;
+	}
+};
+var $author$project$Example$Button$ChangedButtonStatus = function (a) {
+	return {$: 'ChangedButtonStatus', a: a};
+};
+var $feathericons$elm_feather$FeatherIcons$Icon = function (a) {
+	return {$: 'Icon', a: a};
+};
+var $feathericons$elm_feather$FeatherIcons$defaultAttributes = function (name) {
+	return {
+		_class: $elm$core$Maybe$Just('feather feather-' + name),
+		size: 24,
+		sizeUnit: '',
+		strokeWidth: 2,
+		viewBox: '0 0 24 24'
+	};
+};
+var $feathericons$elm_feather$FeatherIcons$makeBuilder = F2(
+	function (name, src) {
+		return $feathericons$elm_feather$FeatherIcons$Icon(
+			{
+				attrs: $feathericons$elm_feather$FeatherIcons$defaultAttributes(name),
+				src: src
+			});
+	});
+var $feathericons$elm_feather$FeatherIcons$repeat = A2(
+	$feathericons$elm_feather$FeatherIcons$makeBuilder,
+	'repeat',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$polyline,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$points('17 1 21 5 17 9')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M3 11V9a4 4 0 0 1 4-4h14')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$polyline,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$points('7 23 3 19 7 15')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M21 13v2a4 4 0 0 1-4 4H3')
+				]),
+			_List_Nil)
+		]));
+var $feathericons$elm_feather$FeatherIcons$slash = A2(
+	$feathericons$elm_feather$FeatherIcons$makeBuilder,
+	'slash',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$circle,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$cx('12'),
+					$elm$svg$Svg$Attributes$cy('12'),
+					$elm$svg$Svg$Attributes$r('10')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$line,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$x1('4.93'),
+					$elm$svg$Svg$Attributes$y1('4.93'),
+					$elm$svg$Svg$Attributes$x2('19.07'),
+					$elm$svg$Svg$Attributes$y2('19.07')
+				]),
+			_List_Nil)
+		]));
+var $elm$svg$Svg$map = $elm$virtual_dom$VirtualDom$map;
+var $feathericons$elm_feather$FeatherIcons$toHtml = F2(
+	function (attributes, _v0) {
+		var src = _v0.a.src;
+		var attrs = _v0.a.attrs;
+		var strSize = $elm$core$String$fromFloat(attrs.size);
+		var baseAttributes = _List_fromArray(
+			[
+				$elm$svg$Svg$Attributes$fill('none'),
+				$elm$svg$Svg$Attributes$height(
+				_Utils_ap(strSize, attrs.sizeUnit)),
+				$elm$svg$Svg$Attributes$width(
+				_Utils_ap(strSize, attrs.sizeUnit)),
+				$elm$svg$Svg$Attributes$stroke('currentColor'),
+				$elm$svg$Svg$Attributes$strokeLinecap('round'),
+				$elm$svg$Svg$Attributes$strokeLinejoin('round'),
+				$elm$svg$Svg$Attributes$strokeWidth(
+				$elm$core$String$fromFloat(attrs.strokeWidth)),
+				$elm$svg$Svg$Attributes$viewBox(attrs.viewBox)
+			]);
+		var combinedAttributes = _Utils_ap(
+			function () {
+				var _v1 = attrs._class;
+				if (_v1.$ === 'Just') {
+					var c = _v1.a;
+					return A2(
+						$elm$core$List$cons,
+						$elm$svg$Svg$Attributes$class(c),
+						baseAttributes);
+				} else {
+					return baseAttributes;
+				}
+			}(),
+			attributes);
+		return A2(
+			$elm$svg$Svg$svg,
+			combinedAttributes,
+			A2(
+				$elm$core$List$map,
+				$elm$svg$Svg$map($elm$core$Basics$never),
+				src));
+	});
+var $feathericons$elm_feather$FeatherIcons$withSize = F2(
+	function (size, _v0) {
+		var attrs = _v0.a.attrs;
+		var src = _v0.a.src;
+		return $feathericons$elm_feather$FeatherIcons$Icon(
+			{
+				attrs: _Utils_update(
+					attrs,
+					{size: size}),
+				src: src
+			});
+	});
+var $author$project$Example$Button$view = F3(
+	function (msgMapper, style, _v0) {
+		var isButtonEnabled = _v0.a;
+		return A2(
+			$author$project$Widget$row,
+			style.row,
+			_List_fromArray(
+				[
+					A2(
+					$author$project$Widget$button,
+					style.primaryButton,
+					{
+						icon: A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_Nil,
+							$mdgriffith$elm_ui$Element$html(
+								A2(
+									$feathericons$elm_feather$FeatherIcons$toHtml,
+									_List_Nil,
+									A2($feathericons$elm_feather$FeatherIcons$withSize, 16, $feathericons$elm_feather$FeatherIcons$slash)))),
+						onPress: isButtonEnabled ? $elm$core$Maybe$Just(
+							msgMapper(
+								$author$project$Example$Button$ChangedButtonStatus(false))) : $elm$core$Maybe$Nothing,
+						text: 'disable me'
+					}),
+					A2(
+					$author$project$Widget$iconButton,
+					style.button,
+					{
+						icon: A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_Nil,
+							$mdgriffith$elm_ui$Element$html(
+								A2(
+									$feathericons$elm_feather$FeatherIcons$toHtml,
+									_List_Nil,
+									A2($feathericons$elm_feather$FeatherIcons$withSize, 16, $feathericons$elm_feather$FeatherIcons$repeat)))),
+						onPress: $elm$core$Maybe$Just(
+							msgMapper(
+								$author$project$Example$Button$ChangedButtonStatus(true))),
+						text: 'reset'
+					})
+				]));
+	});
+var $author$project$Example$Dialog$OpenDialog = function (a) {
+	return {$: 'OpenDialog', a: a};
+};
+var $feathericons$elm_feather$FeatherIcons$eye = A2(
+	$feathericons$elm_feather$FeatherIcons$makeBuilder,
+	'eye',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$circle,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$cx('12'),
+					$elm$svg$Svg$Attributes$cy('12'),
+					$elm$svg$Svg$Attributes$r('3')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Example$Dialog$view = F3(
+	function (msgMapper, style, _v0) {
+		var isOpen = _v0.a;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_Utils_ap(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$height(
+						A2($mdgriffith$elm_ui$Element$minimum, 200, $mdgriffith$elm_ui$Element$fill)),
+						$mdgriffith$elm_ui$Element$width(
+						A2($mdgriffith$elm_ui$Element$minimum, 400, $mdgriffith$elm_ui$Element$fill))
+					]),
+				isOpen ? A2(
+					$author$project$Widget$dialog,
+					style.dialog,
+					{
+						accept: $elm$core$Maybe$Just(
+							{
+								onPress: $elm$core$Maybe$Just(
+									msgMapper(
+										$author$project$Example$Dialog$OpenDialog(false))),
+								text: 'Ok'
+							}),
+						dismiss: $elm$core$Maybe$Just(
+							{
+								onPress: $elm$core$Maybe$Just(
+									msgMapper(
+										$author$project$Example$Dialog$OpenDialog(false))),
+								text: 'Dismiss'
+							}),
+						text: 'This is a dialog window',
+						title: $elm$core$Maybe$Just('Dialog')
+					}) : _List_Nil),
+			A2(
+				$author$project$Widget$button,
+				style.primaryButton,
+				{
+					icon: A2(
+						$mdgriffith$elm_ui$Element$el,
+						_List_Nil,
+						$mdgriffith$elm_ui$Element$html(
+							A2(
+								$feathericons$elm_feather$FeatherIcons$toHtml,
+								_List_Nil,
+								A2($feathericons$elm_feather$FeatherIcons$withSize, 16, $feathericons$elm_feather$FeatherIcons$eye)))),
+					onPress: $elm$core$Maybe$Just(
+						msgMapper(
+							$author$project$Example$Dialog$OpenDialog(true))),
+					text: 'show Dialog'
+				}));
+	});
+var $author$project$Example$ExpansionPanel$ToggleCollapsable = function (a) {
+	return {$: 'ToggleCollapsable', a: a};
+};
+var $author$project$Example$ExpansionPanel$view = F3(
+	function (msgMapper, style, _v0) {
+		var isExpanded = _v0.a;
+		return A2(
+			$author$project$Widget$expansionPanel,
+			style.expansionPanel,
+			{
+				content: $mdgriffith$elm_ui$Element$text('Hello World'),
+				icon: $mdgriffith$elm_ui$Element$none,
+				isExpanded: isExpanded,
+				onToggle: A2($elm$core$Basics$composeR, $author$project$Example$ExpansionPanel$ToggleCollapsable, msgMapper),
+				text: 'Title'
+			});
+	});
+var $author$project$Example$List$view = F3(
+	function (_v0, style, _v1) {
+		return A2(
+			$author$project$Widget$column,
+			style.cardColumn,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$text('A'),
+					$mdgriffith$elm_ui$Element$text('B'),
+					$mdgriffith$elm_ui$Element$text('C')
+				]));
+	});
+var $author$project$Example$Modal$ToggleModal = function (a) {
+	return {$: 'ToggleModal', a: a};
+};
+var $author$project$Widget$modal = $author$project$Internal$Dialog$modal;
+var $author$project$Example$Modal$view = F3(
+	function (msgMapper, style, _v0) {
+		var isEnabled = _v0.a;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_Utils_ap(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$height(
+						A2($mdgriffith$elm_ui$Element$minimum, 200, $mdgriffith$elm_ui$Element$fill)),
+						$mdgriffith$elm_ui$Element$width(
+						A2($mdgriffith$elm_ui$Element$minimum, 400, $mdgriffith$elm_ui$Element$fill))
+					]),
+				isEnabled ? $author$project$Widget$modal(
+					{
+						content: A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$height(
+									$mdgriffith$elm_ui$Element$px(100)),
+									$mdgriffith$elm_ui$Element$width(
+									$mdgriffith$elm_ui$Element$px(250)),
+									$mdgriffith$elm_ui$Element$centerX,
+									$mdgriffith$elm_ui$Element$centerY
+								]),
+							A2(
+								$author$project$Widget$column,
+								style.cardColumn,
+								$elm$core$List$singleton(
+									A2(
+										$mdgriffith$elm_ui$Element$paragraph,
+										_List_Nil,
+										$elm$core$List$singleton(
+											$mdgriffith$elm_ui$Element$text('Click on the area around this box to close it.')))))),
+						onDismiss: $elm$core$Maybe$Just(
+							msgMapper(
+								$author$project$Example$Modal$ToggleModal(false)))
+					}) : _List_Nil),
+			A2(
+				$author$project$Widget$button,
+				style.primaryButton,
+				{
+					icon: A2(
+						$mdgriffith$elm_ui$Element$el,
+						_List_Nil,
+						$mdgriffith$elm_ui$Element$html(
+							A2(
+								$feathericons$elm_feather$FeatherIcons$toHtml,
+								_List_Nil,
+								A2($feathericons$elm_feather$FeatherIcons$withSize, 16, $feathericons$elm_feather$FeatherIcons$eye)))),
+					onPress: $elm$core$Maybe$Just(
+						msgMapper(
+							$author$project$Example$Modal$ToggleModal(true))),
+					text: 'show Modal'
+				}));
+	});
+var $author$project$Example$MultiSelect$ChangedSelected = function (a) {
+	return {$: 'ChangedSelected', a: a};
+};
+var $author$project$Example$MultiSelect$view = F3(
+	function (msgMapper, style, _v0) {
+		var selected = _v0.a;
+		return A2(
+			$author$project$Widget$buttonRow,
+			{button: style.selectButton, list: style.buttonRow},
+			$author$project$Widget$multiSelect(
+				{
+					onSelect: A2(
+						$elm$core$Basics$composeR,
+						$author$project$Example$MultiSelect$ChangedSelected,
+						A2($elm$core$Basics$composeR, msgMapper, $elm$core$Maybe$Just)),
+					options: A2(
+						$elm$core$List$map,
+						function (_int) {
+							return {
+								icon: $mdgriffith$elm_ui$Element$none,
+								text: $elm$core$String$fromInt(_int)
+							};
+						},
+						_List_fromArray(
+							[1, 2, 42])),
+					selected: selected
+				}));
+	});
+var $author$project$Example$Select$ChangedSelected = function (a) {
+	return {$: 'ChangedSelected', a: a};
+};
+var $author$project$Example$Select$view = F3(
+	function (msgMapper, style, _v0) {
+		var selected = _v0.a;
+		return A2(
+			$author$project$Widget$buttonRow,
+			{button: style.selectButton, list: style.buttonRow},
+			$author$project$Widget$select(
+				{
+					onSelect: A2(
+						$elm$core$Basics$composeR,
+						$author$project$Example$Select$ChangedSelected,
+						A2($elm$core$Basics$composeR, msgMapper, $elm$core$Maybe$Just)),
+					options: A2(
+						$elm$core$List$map,
+						function (_int) {
+							return {
+								icon: $mdgriffith$elm_ui$Element$none,
+								text: $elm$core$String$fromInt(_int)
+							};
+						},
+						_List_fromArray(
+							[1, 2, 42])),
+					selected: selected
+				}));
+	});
+var $author$project$Example$SortTable$ChangedSorting = function (a) {
+	return {$: 'ChangedSorting', a: a};
+};
+var $author$project$Example$SortTable$view = F3(
+	function (msgMapper, style, model) {
+		return A2(
+			$author$project$Widget$sortTable,
+			style.sortTable,
+			{
+				asc: model.asc,
+				columns: _List_fromArray(
+					[
+						$author$project$Widget$intColumn(
+						{
+							title: 'Id',
+							toString: function (_int) {
+								return '#' + $elm$core$String$fromInt(_int);
+							},
+							value: function ($) {
+								return $.id;
+							},
+							width: $mdgriffith$elm_ui$Element$fill
+						}),
+						$author$project$Widget$stringColumn(
+						{
+							title: 'Name',
+							toString: $elm$core$Basics$identity,
+							value: function ($) {
+								return $.name;
+							},
+							width: $mdgriffith$elm_ui$Element$fill
+						}),
+						$author$project$Widget$floatColumn(
+						{
+							title: 'Rating',
+							toString: $elm$core$String$fromFloat,
+							value: function ($) {
+								return $.rating;
+							},
+							width: $mdgriffith$elm_ui$Element$fill
+						}),
+						$author$project$Widget$unsortableColumn(
+						{
+							title: 'Hash',
+							toString: A2(
+								$elm$core$Basics$composeR,
+								function ($) {
+									return $.hash;
+								},
+								$elm$core$Maybe$withDefault('None')),
+							width: $mdgriffith$elm_ui$Element$fill
+						})
+					]),
+				content: _List_fromArray(
+					[
+						{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
+						{
+						hash: $elm$core$Maybe$Just('45jf'),
+						id: 2,
+						name: 'Ana',
+						rating: 1.34
+					},
+						{
+						hash: $elm$core$Maybe$Just('6fs1'),
+						id: 3,
+						name: 'Alfred',
+						rating: 4.22
+					},
+						{
+						hash: $elm$core$Maybe$Just('k52f'),
+						id: 4,
+						name: 'Thomas',
+						rating: 3
+					}
+					]),
+				onChange: A2($elm$core$Basics$composeR, $author$project$Example$SortTable$ChangedSorting, msgMapper),
+				sortBy: model.title
+			});
+	});
+var $author$project$Example$Tab$ChangedTab = function (a) {
+	return {$: 'ChangedTab', a: a};
+};
+var $author$project$Example$Tab$view = F3(
+	function (msgMapper, style, _v0) {
+		var selected = _v0.a;
+		return A2(
+			$author$project$Widget$tab,
+			style.tab,
+			{
+				content: function (s) {
+					return $mdgriffith$elm_ui$Element$text(
+						function () {
+							_v1$3:
+							while (true) {
+								if (s.$ === 'Just') {
+									switch (s.a) {
+										case 0:
+											return 'This is Tab 1';
+										case 1:
+											return 'This is the second tab';
+										case 2:
+											return 'The thrid and last tab';
+										default:
+											break _v1$3;
+									}
+								} else {
+									break _v1$3;
+								}
+							}
+							return 'Please select a tab';
+						}());
+				},
+				tabs: {
+					onSelect: A2(
+						$elm$core$Basics$composeR,
+						$author$project$Example$Tab$ChangedTab,
+						A2($elm$core$Basics$composeR, msgMapper, $elm$core$Maybe$Just)),
+					options: A2(
+						$elm$core$List$map,
+						function (_int) {
+							return {
+								icon: $mdgriffith$elm_ui$Element$none,
+								text: 'Tab ' + $elm$core$String$fromInt(_int)
+							};
+						},
+						_List_fromArray(
+							[1, 2, 3])),
+					selected: selected
+				}
+			});
+	});
+var $author$project$Example$TextInput$SetTextInput = function (a) {
+	return {$: 'SetTextInput', a: a};
+};
+var $author$project$Example$TextInput$ToggleTextInputChip = function (a) {
+	return {$: 'ToggleTextInputChip', a: a};
+};
+var $elm$core$Dict$diff = F2(
+	function (t1, t2) {
 		return A3(
 			$elm$core$Dict$foldl,
 			F3(
-				function (k, v, d) {
-					return A2(isGood, k, v) ? A3($elm$core$Dict$insert, k, v, d) : d;
+				function (k, v, t) {
+					return A2($elm$core$Dict$remove, k, t);
 				}),
-			$elm$core$Dict$empty,
-			dict);
+			t1,
+			t2);
 	});
-var $elm$core$Set$filter = F2(
-	function (isGood, _v0) {
-		var dict = _v0.a;
+var $elm$core$Set$diff = F2(
+	function (_v0, _v1) {
+		var dict1 = _v0.a;
+		var dict2 = _v1.a;
 		return $elm$core$Set$Set_elm_builtin(
-			A2(
-				$elm$core$Dict$filter,
-				F2(
-					function (key, _v1) {
-						return isGood(key);
-					}),
-				dict));
+			A2($elm$core$Dict$diff, dict1, dict2));
 	});
-var $elm$core$String$toUpper = _String_toUpper;
-var $author$project$Widget$FilterMultiSelect$viewOptions = function (_v0) {
-	var raw = _v0.raw;
-	var options = _v0.options;
-	var selected = _v0.selected;
-	return (raw === '') ? _List_Nil : $elm$core$Set$toList(
-		A2(
-			$elm$core$Set$filter,
-			function (string) {
-				return !A2($elm$core$Set$member, string, selected);
-			},
-			A2(
-				$elm$core$Set$filter,
-				A2(
-					$elm$core$Basics$composeR,
-					$elm$core$String$toUpper,
-					$elm$core$String$contains(
-						$elm$core$String$toUpper(raw))),
-				options)));
-};
 var $mdgriffith$elm_ui$Internal$Model$Padding = F5(
 	function (a, b, c, d, e) {
 		return {$: 'Padding', a: a, b: b, c: c, d: d, e: e};
@@ -15644,38 +19682,34 @@ var $mdgriffith$elm_ui$Element$wrappedRow = F2(
 			}
 		}
 	});
-var $author$project$Component$filterMultiSelect = function (model) {
-	return _Utils_Tuple2(
-		'Filter Multi Select',
-		A2(
-			$mdgriffith$elm_ui$Element$column,
-			$Orasund$elm_ui_framework$Framework$Grid$simple,
+var $author$project$Example$TextInput$view = F3(
+	function (msgMapper, style, model) {
+		return A2(
+			$author$project$Widget$column,
+			style.column,
 			_List_fromArray(
 				[
 					A2(
 					$author$project$Widget$textInput,
-					$author$project$Data$Style$style.textInput,
-					A2(
-						$author$project$Widget$FilterMultiSelect$viewInput,
-						model,
-						{
-							label: 'Fruit',
-							msgMapper: $author$project$Component$FilterMultiSelectSpecific,
-							placeholder: $elm$core$Maybe$Just(
-								A2(
-									$mdgriffith$elm_ui$Element$Input$placeholder,
-									_List_Nil,
-									$mdgriffith$elm_ui$Element$text('Fruit'))),
-							toChip: function (string) {
+					style.textInput,
+					{
+						chips: A2(
+							$elm$core$List$map,
+							function (string) {
 								return {
 									icon: $mdgriffith$elm_ui$Element$none,
 									onPress: $elm$core$Maybe$Just(
-										$author$project$Component$FilterMultiSelectSpecific(
-											$author$project$Widget$FilterMultiSelect$ToggleSelected(string))),
+										msgMapper(
+											$author$project$Example$TextInput$ToggleTextInputChip(string))),
 									text: string
 								};
-							}
-						})),
+							},
+							$elm$core$Set$toList(model.chipTextInput)),
+						label: 'Chips',
+						onChange: A2($elm$core$Basics$composeR, $author$project$Example$TextInput$SetTextInput, msgMapper),
+						placeholder: $elm$core$Maybe$Nothing,
+						text: model.textInput
+					}),
 					A2(
 					$mdgriffith$elm_ui$Element$wrappedRow,
 					_List_fromArray(
@@ -15686,323 +19720,187 @@ var $author$project$Component$filterMultiSelect = function (model) {
 						$elm$core$List$map,
 						function (string) {
 							return A2(
-								$mdgriffith$elm_ui$Element$Input$button,
-								_Utils_ap($Orasund$elm_ui_framework$Framework$Button$simple, $Orasund$elm_ui_framework$Framework$Tag$simple),
+								$author$project$Widget$button,
+								style.textInput.chipButton,
 								{
-									label: $mdgriffith$elm_ui$Element$text(string),
+									icon: $mdgriffith$elm_ui$Element$none,
 									onPress: $elm$core$Maybe$Just(
-										$author$project$Component$FilterMultiSelectSpecific(
-											$author$project$Widget$FilterMultiSelect$ToggleSelected(string)))
+										msgMapper(
+											$author$project$Example$TextInput$ToggleTextInputChip(string))),
+									text: string
 								});
 						},
-						$author$project$Widget$FilterMultiSelect$viewOptions(model)))
-				])));
-};
-var $author$project$Component$FilterSelectSpecific = function (a) {
-	return {$: 'FilterSelectSpecific', a: a};
-};
-var $author$project$Widget$FilterSelect$Selected = function (a) {
-	return {$: 'Selected', a: a};
-};
-var $Orasund$elm_ui_framework$Framework$Color$red = A3($mdgriffith$elm_ui$Element$rgb255, 255, 56, 96);
-var $Orasund$elm_ui_framework$Framework$Color$danger = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$red),
-		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$red),
-		$mdgriffith$elm_ui$Element$Font$color($Orasund$elm_ui_framework$Framework$Color$lighterGrey)
-	]);
-var $Orasund$elm_ui_framework$Framework$Group$left = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Border$roundEach(
-		{bottomLeft: 4, bottomRight: 0, topLeft: 4, topRight: 0})
-	]);
-var $Orasund$elm_ui_framework$Framework$Group$right = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Border$roundEach(
-		{bottomLeft: 0, bottomRight: 4, topLeft: 0, topRight: 4})
-	]);
-var $Orasund$elm_ui_framework$Framework$Input$simple = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$lighterGrey),
-		$mdgriffith$elm_ui$Element$Font$color($Orasund$elm_ui_framework$Framework$Color$darkerGrey)
-	]);
-var $author$project$Widget$FilterSelect$ChangedRaw = function (a) {
-	return {$: 'ChangedRaw', a: a};
-};
-var $author$project$Widget$FilterSelect$viewInput = F3(
-	function (attributes, model, _v0) {
-		var msgMapper = _v0.msgMapper;
-		var placeholder = _v0.placeholder;
-		var label = _v0.label;
-		return A2(
-			$mdgriffith$elm_ui$Element$Input$text,
-			attributes,
-			{
-				label: $mdgriffith$elm_ui$Element$Input$labelHidden(label),
-				onChange: A2($elm$core$Basics$composeR, $author$project$Widget$FilterSelect$ChangedRaw, msgMapper),
-				placeholder: placeholder,
-				text: model.raw
-			});
+						$elm$core$Set$toList(
+							A2(
+								$elm$core$Set$diff,
+								$elm$core$Set$fromList(
+									_List_fromArray(
+										['A', 'B', 'C'])),
+								model.chipTextInput))))
+				]));
 	});
-var $author$project$Widget$FilterSelect$viewOptions = function (_v0) {
-	var raw = _v0.raw;
-	var options = _v0.options;
-	return (raw === '') ? _List_Nil : $elm$core$Set$toList(
-		A2(
-			$elm$core$Set$filter,
-			A2(
-				$elm$core$Basics$composeR,
-				$elm$core$String$toUpper,
-				$elm$core$String$contains(
-					$elm$core$String$toUpper(raw))),
-			options));
-};
-var $elm$html$Html$Attributes$width = function (n) {
-	return A2(
-		_VirtualDom_attribute,
-		'width',
-		$elm$core$String$fromInt(n));
-};
-var $elm$svg$Svg$Attributes$clipRule = _VirtualDom_attribute('clip-rule');
-var $elm$svg$Svg$Attributes$fillRule = _VirtualDom_attribute('fill-rule');
-var $jasonliang512$elm_heroicons$Heroicons$Solid$x = function (attrs) {
-	return A2(
-		$elm$svg$Svg$svg,
-		A2(
-			$elm$core$List$cons,
-			$elm$svg$Svg$Attributes$viewBox('0 0 20 20'),
-			A2(
-				$elm$core$List$cons,
-				$elm$svg$Svg$Attributes$fill('currentColor'),
-				attrs)),
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$fillRule('evenodd'),
-						$elm$svg$Svg$Attributes$d('M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'),
-						$elm$svg$Svg$Attributes$clipRule('evenodd')
-					]),
-				_List_Nil)
-			]));
-};
-var $author$project$Component$filterSelect = function (model) {
-	return _Utils_Tuple2(
-		'Filter Select',
-		function () {
-			var _v0 = model.selected;
-			if (_v0.$ === 'Just') {
-				var selected = _v0.a;
-				return A2(
-					$mdgriffith$elm_ui$Element$row,
-					$Orasund$elm_ui_framework$Framework$Grid$compact,
-					_List_fromArray(
-						[
-							A2(
-							$mdgriffith$elm_ui$Element$el,
-							_Utils_ap($Orasund$elm_ui_framework$Framework$Tag$simple, $Orasund$elm_ui_framework$Framework$Group$left),
-							$mdgriffith$elm_ui$Element$text(selected)),
-							A2(
-							$mdgriffith$elm_ui$Element$Input$button,
-							_Utils_ap(
-								$Orasund$elm_ui_framework$Framework$Tag$simple,
-								_Utils_ap($Orasund$elm_ui_framework$Framework$Group$right, $Orasund$elm_ui_framework$Framework$Color$danger)),
-							{
-								label: $mdgriffith$elm_ui$Element$html(
-									$jasonliang512$elm_heroicons$Heroicons$Solid$x(
-										_List_fromArray(
-											[
-												$elm$html$Html$Attributes$width(16)
-											]))),
-								onPress: $elm$core$Maybe$Just(
-									$author$project$Component$FilterSelectSpecific(
-										$author$project$Widget$FilterSelect$Selected($elm$core$Maybe$Nothing)))
-							})
-						]));
-			} else {
-				return A2(
-					$mdgriffith$elm_ui$Element$column,
-					$Orasund$elm_ui_framework$Framework$Grid$simple,
-					_List_fromArray(
-						[
-							A3(
-							$author$project$Widget$FilterSelect$viewInput,
-							$Orasund$elm_ui_framework$Framework$Input$simple,
-							model,
-							{
-								label: 'Fruit',
-								msgMapper: $author$project$Component$FilterSelectSpecific,
-								placeholder: $elm$core$Maybe$Just(
-									A2(
-										$mdgriffith$elm_ui$Element$Input$placeholder,
-										_List_Nil,
-										$mdgriffith$elm_ui$Element$text('Fruit')))
-							}),
-							A2(
-							$mdgriffith$elm_ui$Element$wrappedRow,
-							_List_fromArray(
-								[
-									$mdgriffith$elm_ui$Element$spacing(10)
-								]),
-							A2(
-								$elm$core$List$map,
-								function (string) {
-									return A2(
-										$mdgriffith$elm_ui$Element$Input$button,
-										_Utils_ap($Orasund$elm_ui_framework$Framework$Button$simple, $Orasund$elm_ui_framework$Framework$Tag$simple),
-										{
-											label: $mdgriffith$elm_ui$Element$text(string),
-											onPress: $elm$core$Maybe$Just(
-												$author$project$Component$FilterSelectSpecific(
-													$author$project$Widget$FilterSelect$Selected(
-														$elm$core$Maybe$Just(string))))
-										});
-								},
-								$author$project$Widget$FilterSelect$viewOptions(model)))
-						]));
-			}
-		}());
-};
-var $author$project$Component$ValidatedInputSpecific = function (a) {
-	return {$: 'ValidatedInputSpecific', a: a};
-};
-var $jasonliang512$elm_heroicons$Heroicons$Solid$pencil = function (attrs) {
-	return A2(
-		$elm$svg$Svg$svg,
-		A2(
-			$elm$core$List$cons,
-			$elm$svg$Svg$Attributes$viewBox('0 0 20 20'),
-			A2(
-				$elm$core$List$cons,
-				$elm$svg$Svg$Attributes$fill('currentColor'),
-				attrs)),
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$d('M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z')
-					]),
-				_List_Nil)
-			]));
-};
-var $author$project$Widget$ValidatedInput$ChangedRaw = function (a) {
-	return {$: 'ChangedRaw', a: a};
-};
-var $author$project$Widget$ValidatedInput$LostFocus = {$: 'LostFocus'};
-var $author$project$Widget$ValidatedInput$StartEditing = {$: 'StartEditing'};
-var $elm$html$Html$Events$onBlur = function (msg) {
-	return A2(
-		$elm$html$Html$Events$on,
-		'blur',
-		$elm$json$Json$Decode$succeed(msg));
-};
-var $mdgriffith$elm_ui$Element$Events$onLoseFocus = A2($elm$core$Basics$composeL, $mdgriffith$elm_ui$Internal$Model$Attr, $elm$html$Html$Events$onBlur);
-var $author$project$Widget$ValidatedInput$view = F3(
-	function (attributes, _v0, _v1) {
-		var model = _v0.a;
-		var msgMapper = _v1.msgMapper;
-		var placeholder = _v1.placeholder;
-		var label = _v1.label;
-		var readOnly = _v1.readOnly;
-		var _v2 = model.raw;
-		if (_v2.$ === 'Just') {
-			var string = _v2.a;
-			return A2(
-				$mdgriffith$elm_ui$Element$Input$text,
-				_Utils_ap(
-					attributes,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Events$onLoseFocus(
-							msgMapper($author$project$Widget$ValidatedInput$LostFocus))
-						])),
-				{
-					label: $mdgriffith$elm_ui$Element$Input$labelHidden(label),
-					onChange: A2($elm$core$Basics$composeR, $author$project$Widget$ValidatedInput$ChangedRaw, msgMapper),
-					placeholder: placeholder,
-					text: string
-				});
-		} else {
-			return A2(
-				$mdgriffith$elm_ui$Element$Input$button,
-				_List_Nil,
-				{
-					label: readOnly(model.value),
-					onPress: $elm$core$Maybe$Just(
-						msgMapper($author$project$Widget$ValidatedInput$StartEditing))
-				});
-		}
-	});
-var $author$project$Component$validatedInput = function (model) {
-	return _Utils_Tuple2(
-		'Validated Input',
-		A3(
-			$author$project$Widget$ValidatedInput$view,
-			$Orasund$elm_ui_framework$Framework$Input$simple,
-			model,
-			{
-				label: 'First Name, Sir Name',
-				msgMapper: $author$project$Component$ValidatedInputSpecific,
-				placeholder: $elm$core$Maybe$Nothing,
-				readOnly: function (maybeTuple) {
-					return A2(
-						$mdgriffith$elm_ui$Element$row,
-						$Orasund$elm_ui_framework$Framework$Grid$compact,
-						_List_fromArray(
-							[
-								A2(
-								$mdgriffith$elm_ui$Element$el,
-								_Utils_ap($Orasund$elm_ui_framework$Framework$Tag$simple, $Orasund$elm_ui_framework$Framework$Group$left),
-								$mdgriffith$elm_ui$Element$text(
-									function (_v0) {
-										var a = _v0.a;
-										var b = _v0.b;
-										return a + (' ' + b);
-									}(maybeTuple))),
-								A2(
-								$mdgriffith$elm_ui$Element$el,
-								_Utils_ap(
-									$Orasund$elm_ui_framework$Framework$Tag$simple,
-									_Utils_ap($Orasund$elm_ui_framework$Framework$Group$right, $Orasund$elm_ui_framework$Framework$Color$primary)),
-								$mdgriffith$elm_ui$Element$html(
-									$jasonliang512$elm_heroicons$Heroicons$Solid$pencil(
-										_List_fromArray(
-											[
-												$elm$html$Html$Attributes$width(16)
-											]))))
-							]));
-				}
-			}));
-};
-var $author$project$Component$view = F2(
-	function (msgMapper, model) {
+var $author$project$Data$Example$view = F3(
+	function (msgMapper, style, model) {
 		return {
-			description: 'Components have a Model, an Update- and sometimes even a Subscription-function. It takes some time to set them up correctly.',
-			items: A2(
-				$elm$core$List$map,
-				$elm$core$Tuple$mapSecond(
-					$mdgriffith$elm_ui$Element$map(msgMapper)),
-				_List_fromArray(
-					[
-						$author$project$Component$filterSelect(model.filterSelect),
-						$author$project$Component$filterMultiSelect(model.filterMultiSelect),
-						$author$project$Component$validatedInput(model.validatedInput)
-					])),
-			title: 'Components'
+			button: A3(
+				$author$project$Example$Button$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$Button, msgMapper),
+				style,
+				function ($) {
+					return $.button;
+				}(model)),
+			dialog: A3(
+				$author$project$Example$Dialog$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$Dialog, msgMapper),
+				style,
+				function ($) {
+					return $.dialog;
+				}(model)),
+			expansionPanel: A3(
+				$author$project$Example$ExpansionPanel$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$ExpansionPanel, msgMapper),
+				style,
+				function ($) {
+					return $.expansionPanel;
+				}(model)),
+			list: A3(
+				$author$project$Example$List$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$List, msgMapper),
+				style,
+				function ($) {
+					return $.list;
+				}(model)),
+			modal: A3(
+				$author$project$Example$Modal$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$Modal, msgMapper),
+				style,
+				function ($) {
+					return $.modal;
+				}(model)),
+			multiSelect: A3(
+				$author$project$Example$MultiSelect$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$MultiSelect, msgMapper),
+				style,
+				function ($) {
+					return $.multiSelect;
+				}(model)),
+			select: A3(
+				$author$project$Example$Select$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$Select, msgMapper),
+				style,
+				function ($) {
+					return $.select;
+				}(model)),
+			sortTable: A3(
+				$author$project$Example$SortTable$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$SortTable, msgMapper),
+				style,
+				function ($) {
+					return $.sortTable;
+				}(model)),
+			tab: A3(
+				$author$project$Example$Tab$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$Tab, msgMapper),
+				style,
+				function ($) {
+					return $.tab;
+				}(model)),
+			textInput: A3(
+				$author$project$Example$TextInput$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$TextInput, msgMapper),
+				style,
+				function ($) {
+					return $.textInput;
+				}(model))
 		};
 	});
-var $author$project$Layout$LeftSheet = {$: 'LeftSheet'};
+var $author$project$Data$Example$toCardList = function (_v0) {
+	var idle = _v0.idle;
+	var msgMapper = _v0.msgMapper;
+	var style = _v0.style;
+	var model = _v0.model;
+	return A2(
+		$elm$core$List$map,
+		function (_v1) {
+			var title = _v1.title;
+			var example = _v1.example;
+			var test = _v1.test;
+			return _Utils_Tuple3(
+				title,
+				example(
+					A3($author$project$Data$Example$view, msgMapper, style, model)),
+				A2(
+					$mdgriffith$elm_ui$Element$column,
+					_Utils_ap(
+						$Orasund$elm_ui_framework$Framework$Grid$simple,
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+							])),
+					A2(
+						$elm$core$List$map,
+						function (_v2) {
+							var name = _v2.a;
+							var elem = _v2.b;
+							return A2(
+								$mdgriffith$elm_ui$Element$row,
+								$Orasund$elm_ui_framework$Framework$Grid$spacedEvenly,
+								_List_fromArray(
+									[
+										A2(
+										$mdgriffith$elm_ui$Element$wrappedRow,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
+											]),
+										$elm$core$List$singleton(
+											$mdgriffith$elm_ui$Element$text(name))),
+										A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$paddingEach(
+												{bottom: 0, left: 8, right: 0, top: 0}),
+												$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
+											]),
+										elem)
+									]));
+						},
+						A2(test, idle, style))));
+		},
+		A2(
+			$elm$core$List$map,
+			function (example) {
+				return {
+					example: $author$project$Data$Example$get(example),
+					test: $author$project$Data$Example$toTests(example),
+					title: $author$project$Data$Example$toString(example)
+				};
+			},
+			$author$project$Data$Example$asList));
+};
+var $author$project$Stateless$view = function (_v0) {
+	var theme = _v0.theme;
+	var msgMapper = _v0.msgMapper;
+	var model = _v0.model;
+	var style = $author$project$Data$Theme$toStyle(theme);
+	return {
+		description: 'Stateless views are simple functions that view some content. No wiring required.',
+		items: $author$project$Data$Example$toCardList(
+			{
+				idle: msgMapper($author$project$Stateless$Idle),
+				model: model.example,
+				msgMapper: A2($elm$core$Basics$composeR, $author$project$Stateless$ExampleSpecific, msgMapper),
+				style: style
+			}),
+		title: 'Stateless Views'
+	};
+};
+var $author$project$Widget$Layout$LeftSheet = {$: 'LeftSheet'};
 var $mdgriffith$elm_ui$Element$Phone = {$: 'Phone'};
-var $author$project$Layout$RightSheet = {$: 'RightSheet'};
-var $author$project$Layout$Search = {$: 'Search'};
+var $author$project$Widget$Layout$RightSheet = {$: 'RightSheet'};
+var $author$project$Widget$Layout$Search = {$: 'Search'};
 var $mdgriffith$elm_ui$Element$Tablet = {$: 'Tablet'};
-var $mdgriffith$elm_ui$Internal$Model$Bottom = {$: 'Bottom'};
-var $mdgriffith$elm_ui$Element$alignBottom = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$Bottom);
-var $author$project$Widget$button = $author$project$Internal$Button$button;
 var $mdgriffith$elm_ui$Element$BigDesktop = {$: 'BigDesktop'};
 var $mdgriffith$elm_ui$Element$Desktop = {$: 'Desktop'};
 var $mdgriffith$elm_ui$Element$Landscape = {$: 'Landscape'};
@@ -16038,66 +19936,11 @@ var $elm$core$List$drop = F2(
 			}
 		}
 	});
-var $mdgriffith$elm_ui$Element$Region$description = A2($elm$core$Basics$composeL, $mdgriffith$elm_ui$Internal$Model$Describe, $mdgriffith$elm_ui$Internal$Model$Label);
-var $author$project$Internal$Button$iconButton = F2(
-	function (style, _v0) {
-		var onPress = _v0.onPress;
-		var text = _v0.text;
-		var icon = _v0.icon;
-		return A2(
-			$mdgriffith$elm_ui$Element$Input$button,
-			_Utils_ap(
-				style.container,
-				_Utils_ap(
-					_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.disabled : _List_Nil,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Region$description(text)
-						]))),
-			{
-				label: A2($mdgriffith$elm_ui$Element$map, $elm$core$Basics$never, icon),
-				onPress: onPress
-			});
+var $mdgriffith$elm_ui$Element$Input$Placeholder = F2(
+	function (a, b) {
+		return {$: 'Placeholder', a: a, b: b};
 	});
-var $author$project$Widget$iconButton = $author$project$Internal$Button$iconButton;
-var $author$project$Widget$modal = $author$project$Internal$Dialog$modal;
-var $author$project$Internal$Select$select = function (_v0) {
-	var selected = _v0.selected;
-	var options = _v0.options;
-	var onSelect = _v0.onSelect;
-	return A2(
-		$elm$core$List$indexedMap,
-		F2(
-			function (i, a) {
-				return _Utils_Tuple2(
-					_Utils_eq(
-						selected,
-						$elm$core$Maybe$Just(i)),
-					{
-						icon: a.icon,
-						onPress: onSelect(i),
-						text: a.text
-					});
-			}),
-		options);
-};
-var $author$project$Widget$select = $author$project$Internal$Select$select;
-var $author$project$Internal$Select$selectButton = F2(
-	function (style, _v0) {
-		var selected = _v0.a;
-		var b = _v0.b;
-		return A2(
-			$author$project$Internal$Button$button,
-			_Utils_update(
-				style,
-				{
-					container: _Utils_ap(
-						style.container,
-						selected ? style.active : _List_Nil)
-				}),
-			b);
-	});
-var $author$project$Widget$selectButton = $author$project$Internal$Select$selectButton;
+var $mdgriffith$elm_ui$Element$Input$placeholder = $mdgriffith$elm_ui$Element$Input$Placeholder;
 var $elm$core$List$takeReverse = F3(
 	function (n, list, kept) {
 		takeReverse:
@@ -16227,15 +20070,6 @@ var $elm$core$List$take = F2(
 var $author$project$Widget$Snackbar$current = function (model) {
 	return A2($elm$core$Maybe$map, $elm$core$Tuple$first, model.current);
 };
-var $author$project$Widget$textButton = F2(
-	function (style, _v0) {
-		var text = _v0.text;
-		var onPress = _v0.onPress;
-		return A2(
-			$author$project$Internal$Button$textButton,
-			style,
-			{onPress: onPress, text: text});
-	});
 var $author$project$Widget$Snackbar$view = F3(
 	function (style, toMessage, model) {
 		return A2(
@@ -16248,7 +20082,7 @@ var $author$project$Widget$Snackbar$view = F3(
 					var button = _v0.button;
 					return A2(
 						$mdgriffith$elm_ui$Element$row,
-						style.row,
+						style.containerRow,
 						_List_fromArray(
 							[
 								A2(
@@ -16267,8 +20101,8 @@ var $author$project$Widget$Snackbar$view = F3(
 				}),
 			$author$project$Widget$Snackbar$current(model));
 	});
-var $author$project$Layout$view = F2(
-	function (attributes, _v0) {
+var $author$project$Widget$Layout$view = F3(
+	function (style, _v0, content) {
 		var search = _v0.search;
 		var title = _v0.title;
 		var onChangedSidebar = _v0.onChangedSidebar;
@@ -16276,8 +20110,6 @@ var $author$project$Layout$view = F2(
 		var actions = _v0.actions;
 		var window = _v0.window;
 		var dialog = _v0.dialog;
-		var content = _v0.content;
-		var style = _v0.style;
 		var layout = _v0.layout;
 		var snackbar = A2(
 			$elm$core$Maybe$withDefault,
@@ -16419,35 +20251,35 @@ var $author$project$Layout$view = F2(
 								icon: A2($mdgriffith$elm_ui$Element$map, $elm$core$Basics$never, style.menuIcon),
 								onPress: $elm$core$Maybe$Just(
 									onChangedSidebar(
-										$elm$core$Maybe$Just($author$project$Layout$LeftSheet))),
+										$elm$core$Maybe$Just($author$project$Widget$Layout$LeftSheet))),
 								text: 'Menu'
 							}),
 							A2(
-							$elm$core$Maybe$withDefault,
-							title,
+							$mdgriffith$elm_ui$Element$el,
+							style.title,
 							A2(
-								$elm$core$Maybe$map,
+								$elm$core$Maybe$withDefault,
+								title,
 								A2(
-									$elm$core$Basics$composeR,
-									function ($) {
-										return $.text;
-									},
+									$elm$core$Maybe$map,
 									A2(
 										$elm$core$Basics$composeR,
-										$mdgriffith$elm_ui$Element$text,
-										$mdgriffith$elm_ui$Element$el(style.title))),
-								A2(
-									$elm$core$Maybe$andThen,
-									function (option) {
-										return A2(
-											$elm$core$Array$get,
-											option,
-											$elm$core$Array$fromList(menu.options));
-									},
-									menu.selected)))
+										function ($) {
+											return $.text;
+										},
+										$mdgriffith$elm_ui$Element$text),
+									A2(
+										$elm$core$Maybe$andThen,
+										function (option) {
+											return A2(
+												$elm$core$Array$get,
+												option,
+												$elm$core$Array$fromList(menu.options));
+										},
+										menu.selected))))
 						]) : _List_fromArray(
 						[
-							title,
+							A2($mdgriffith$elm_ui$Element$el, style.title, title),
 							A2(
 							$mdgriffith$elm_ui$Element$row,
 							_List_fromArray(
@@ -16509,7 +20341,7 @@ var $author$project$Layout$view = F2(
 													icon: style.searchIcon,
 													onPress: $elm$core$Maybe$Just(
 														onChangedSidebar(
-															$elm$core$Maybe$Just($author$project$Layout$Search))),
+															$elm$core$Maybe$Just($author$project$Widget$Layout$Search))),
 													text: label
 												})
 											]) : (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) ? _List_fromArray(
@@ -16521,7 +20353,7 @@ var $author$project$Layout$view = F2(
 													icon: style.searchIcon,
 													onPress: $elm$core$Maybe$Just(
 														onChangedSidebar(
-															$elm$core$Maybe$Just($author$project$Layout$Search))),
+															$elm$core$Maybe$Just($author$project$Widget$Layout$Search))),
 													text: label
 												})
 											]) : _List_Nil);
@@ -16540,7 +20372,7 @@ var $author$project$Layout$view = F2(
 										icon: style.moreVerticalIcon,
 										onPress: $elm$core$Maybe$Just(
 											onChangedSidebar(
-												$elm$core$Maybe$Just($author$project$Layout$RightSheet))),
+												$elm$core$Maybe$Just($author$project$Widget$Layout$RightSheet))),
 										text: 'More'
 									})
 								])
@@ -16551,17 +20383,14 @@ var $author$project$Layout$view = F2(
 			$elm$core$List$concat(
 				_List_fromArray(
 					[
-						attributes,
+						style.container,
 						_List_fromArray(
 						[
 							$mdgriffith$elm_ui$Element$inFront(nav),
 							$mdgriffith$elm_ui$Element$inFront(snackbar)
 						]),
-						((!_Utils_eq(layout.active, $elm$core$Maybe$Nothing)) || (!_Utils_eq(dialog, $elm$core$Maybe$Nothing))) ? A2(
-						$elm$core$List$cons,
-						$mdgriffith$elm_ui$Element$height(
-							$mdgriffith$elm_ui$Element$px(window.height)),
 						function () {
+						if ((!_Utils_eq(layout.active, $elm$core$Maybe$Nothing)) || (!_Utils_eq(dialog, $elm$core$Maybe$Nothing))) {
 							if (dialog.$ === 'Just') {
 								var dialogConfig = dialog.a;
 								return dialogConfig;
@@ -16573,1243 +20402,25 @@ var $author$project$Layout$view = F2(
 											onChangedSidebar($elm$core$Maybe$Nothing))
 									});
 							}
-						}()) : _List_Nil
+						} else {
+							return _List_Nil;
+						}
+					}()
 					])),
 			content);
 	});
-var $author$project$Reusable$scrollingNavCard = _Utils_Tuple2(
-	'Scrolling Nav',
-	A2(
-		$mdgriffith$elm_ui$Element$paragraph,
-		_List_Nil,
-		$elm$core$List$singleton(
-			$mdgriffith$elm_ui$Element$text('Resize the screen and open the side-menu. Then start scrolling to see the scrolling navigation in action.'))));
-var $author$project$Reusable$snackbar = function (addSnackbar) {
-	return _Utils_Tuple2(
-		'Snackbar',
-		A2(
-			$mdgriffith$elm_ui$Element$column,
-			$Orasund$elm_ui_framework$Framework$Grid$simple,
-			_List_fromArray(
-				[
-					A2(
-					$mdgriffith$elm_ui$Element$Input$button,
-					$Orasund$elm_ui_framework$Framework$Button$simple,
-					{
-						label: A2(
-							$mdgriffith$elm_ui$Element$paragraph,
-							_List_Nil,
-							$elm$core$List$singleton(
-								$mdgriffith$elm_ui$Element$text('Add Notification'))),
-						onPress: $elm$core$Maybe$Just(
-							addSnackbar(
-								_Utils_Tuple2('This is a notification. It will disappear after 10 seconds.', false)))
-					}),
-					A2(
-					$mdgriffith$elm_ui$Element$Input$button,
-					$Orasund$elm_ui_framework$Framework$Button$simple,
-					{
-						label: A2(
-							$mdgriffith$elm_ui$Element$paragraph,
-							_List_Nil,
-							$elm$core$List$singleton(
-								$mdgriffith$elm_ui$Element$text('Add Notification with Action'))),
-						onPress: $elm$core$Maybe$Just(
-							addSnackbar(
-								_Utils_Tuple2('You can add another notification if you want.', true)))
-					})
-				])));
-};
-var $author$project$Reusable$SortBy = function (a) {
-	return {$: 'SortBy', a: a};
-};
-var $jasonliang512$elm_heroicons$Heroicons$Solid$cheveronDown = function (attrs) {
-	return A2(
-		$elm$svg$Svg$svg,
-		A2(
-			$elm$core$List$cons,
-			$elm$svg$Svg$Attributes$viewBox('0 0 20 20'),
-			A2(
-				$elm$core$List$cons,
-				$elm$svg$Svg$Attributes$fill('currentColor'),
-				attrs)),
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$fillRule('evenodd'),
-						$elm$svg$Svg$Attributes$d('M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'),
-						$elm$svg$Svg$Attributes$clipRule('evenodd')
-					]),
-				_List_Nil)
-			]));
-};
-var $jasonliang512$elm_heroicons$Heroicons$Solid$cheveronUp = function (attrs) {
-	return A2(
-		$elm$svg$Svg$svg,
-		A2(
-			$elm$core$List$cons,
-			$elm$svg$Svg$Attributes$viewBox('0 0 20 20'),
-			A2(
-				$elm$core$List$cons,
-				$elm$svg$Svg$Attributes$fill('currentColor'),
-				attrs)),
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$fillRule('evenodd'),
-						$elm$svg$Svg$Attributes$d('M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z'),
-						$elm$svg$Svg$Attributes$clipRule('evenodd')
-					]),
-				_List_Nil)
-			]));
-};
-var $author$project$Widget$SortTable$FloatColumn = function (a) {
-	return {$: 'FloatColumn', a: a};
-};
-var $author$project$Widget$SortTable$floatColumn = function (_v0) {
-	var title = _v0.title;
-	var value = _v0.value;
-	var toString = _v0.toString;
-	return {
-		content: $author$project$Widget$SortTable$FloatColumn(
-			{toString: toString, value: value}),
-		title: title
-	};
-};
-var $author$project$Widget$SortTable$IntColumn = function (a) {
-	return {$: 'IntColumn', a: a};
-};
-var $author$project$Widget$SortTable$intColumn = function (_v0) {
-	var title = _v0.title;
-	var value = _v0.value;
-	var toString = _v0.toString;
-	return {
-		content: $author$project$Widget$SortTable$IntColumn(
-			{toString: toString, value: value}),
-		title: title
-	};
-};
-var $author$project$Widget$SortTable$StringColumn = function (a) {
-	return {$: 'StringColumn', a: a};
-};
-var $author$project$Widget$SortTable$stringColumn = function (_v0) {
-	var title = _v0.title;
-	var value = _v0.value;
-	var toString = _v0.toString;
-	return {
-		content: $author$project$Widget$SortTable$StringColumn(
-			{toString: toString, value: value}),
-		title: title
-	};
-};
-var $mdgriffith$elm_ui$Element$InternalColumn = function (a) {
-	return {$: 'InternalColumn', a: a};
-};
-var $mdgriffith$elm_ui$Internal$Model$GridPosition = function (a) {
-	return {$: 'GridPosition', a: a};
-};
-var $mdgriffith$elm_ui$Internal$Model$GridTemplateStyle = function (a) {
-	return {$: 'GridTemplateStyle', a: a};
-};
-var $elm$core$List$all = F2(
-	function (isOkay, list) {
-		return !A2(
-			$elm$core$List$any,
-			A2($elm$core$Basics$composeL, $elm$core$Basics$not, isOkay),
-			list);
-	});
-var $mdgriffith$elm_ui$Internal$Model$AsGrid = {$: 'AsGrid'};
-var $mdgriffith$elm_ui$Internal$Model$asGrid = $mdgriffith$elm_ui$Internal$Model$AsGrid;
-var $mdgriffith$elm_ui$Internal$Model$getSpacing = F2(
-	function (attrs, _default) {
-		return A2(
-			$elm$core$Maybe$withDefault,
-			_default,
-			A3(
-				$elm$core$List$foldr,
-				F2(
-					function (attr, acc) {
-						if (acc.$ === 'Just') {
-							var x = acc.a;
-							return $elm$core$Maybe$Just(x);
-						} else {
-							if ((attr.$ === 'StyleClass') && (attr.b.$ === 'SpacingStyle')) {
-								var _v2 = attr.b;
-								var x = _v2.b;
-								var y = _v2.c;
-								return $elm$core$Maybe$Just(
-									_Utils_Tuple2(x, y));
-							} else {
-								return $elm$core$Maybe$Nothing;
-							}
-						}
-					}),
-				$elm$core$Maybe$Nothing,
-				attrs));
-	});
-var $mdgriffith$elm_ui$Internal$Flag$gridPosition = $mdgriffith$elm_ui$Internal$Flag$flag(35);
-var $mdgriffith$elm_ui$Internal$Flag$gridTemplate = $mdgriffith$elm_ui$Internal$Flag$flag(34);
-var $elm$core$List$repeatHelp = F3(
-	function (result, n, value) {
-		repeatHelp:
-		while (true) {
-			if (n <= 0) {
-				return result;
-			} else {
-				var $temp$result = A2($elm$core$List$cons, value, result),
-					$temp$n = n - 1,
-					$temp$value = value;
-				result = $temp$result;
-				n = $temp$n;
-				value = $temp$value;
-				continue repeatHelp;
-			}
-		}
-	});
-var $elm$core$List$repeat = F2(
-	function (n, value) {
-		return A3($elm$core$List$repeatHelp, _List_Nil, n, value);
-	});
-var $mdgriffith$elm_ui$Element$tableHelper = F2(
-	function (attrs, config) {
-		var onGrid = F3(
-			function (rowLevel, columnLevel, elem) {
-				return A4(
-					$mdgriffith$elm_ui$Internal$Model$element,
-					$mdgriffith$elm_ui$Internal$Model$asEl,
-					$mdgriffith$elm_ui$Internal$Model$div,
-					_List_fromArray(
-						[
-							A2(
-							$mdgriffith$elm_ui$Internal$Model$StyleClass,
-							$mdgriffith$elm_ui$Internal$Flag$gridPosition,
-							$mdgriffith$elm_ui$Internal$Model$GridPosition(
-								{col: columnLevel, height: 1, row: rowLevel, width: 1}))
-						]),
-					$mdgriffith$elm_ui$Internal$Model$Unkeyed(
-						_List_fromArray(
-							[elem])));
-			});
-		var columnWidth = function (col) {
-			if (col.$ === 'InternalIndexedColumn') {
-				var colConfig = col.a;
-				return colConfig.width;
-			} else {
-				var colConfig = col.a;
-				return colConfig.width;
-			}
-		};
-		var columnHeader = function (col) {
-			if (col.$ === 'InternalIndexedColumn') {
-				var colConfig = col.a;
-				return colConfig.header;
-			} else {
-				var colConfig = col.a;
-				return colConfig.header;
-			}
-		};
-		var maybeHeaders = function (headers) {
-			return A2(
-				$elm$core$List$all,
-				$elm$core$Basics$eq($mdgriffith$elm_ui$Internal$Model$Empty),
-				headers) ? $elm$core$Maybe$Nothing : $elm$core$Maybe$Just(
-				A2(
-					$elm$core$List$indexedMap,
-					F2(
-						function (col, header) {
-							return A3(onGrid, 1, col + 1, header);
-						}),
-					headers));
-		}(
-			A2($elm$core$List$map, columnHeader, config.columns));
-		var add = F3(
-			function (cell, columnConfig, cursor) {
-				if (columnConfig.$ === 'InternalIndexedColumn') {
-					var col = columnConfig.a;
-					return _Utils_update(
-						cursor,
-						{
-							column: cursor.column + 1,
-							elements: A2(
-								$elm$core$List$cons,
-								A3(
-									onGrid,
-									cursor.row,
-									cursor.column,
-									A2(
-										col.view,
-										_Utils_eq(maybeHeaders, $elm$core$Maybe$Nothing) ? (cursor.row - 1) : (cursor.row - 2),
-										cell)),
-								cursor.elements)
-						});
-				} else {
-					var col = columnConfig.a;
-					return {
-						column: cursor.column + 1,
-						elements: A2(
-							$elm$core$List$cons,
-							A3(
-								onGrid,
-								cursor.row,
-								cursor.column,
-								col.view(cell)),
-							cursor.elements),
-						row: cursor.row
-					};
-				}
-			});
-		var build = F3(
-			function (columns, rowData, cursor) {
-				var newCursor = A3(
-					$elm$core$List$foldl,
-					add(rowData),
-					cursor,
-					columns);
-				return {column: 1, elements: newCursor.elements, row: cursor.row + 1};
-			});
-		var children = A3(
-			$elm$core$List$foldl,
-			build(config.columns),
-			{
-				column: 1,
-				elements: _List_Nil,
-				row: _Utils_eq(maybeHeaders, $elm$core$Maybe$Nothing) ? 1 : 2
-			},
-			config.data);
-		var _v0 = A2(
-			$mdgriffith$elm_ui$Internal$Model$getSpacing,
-			attrs,
-			_Utils_Tuple2(0, 0));
-		var sX = _v0.a;
-		var sY = _v0.b;
-		var template = A2(
-			$mdgriffith$elm_ui$Internal$Model$StyleClass,
-			$mdgriffith$elm_ui$Internal$Flag$gridTemplate,
-			$mdgriffith$elm_ui$Internal$Model$GridTemplateStyle(
-				{
-					columns: A2($elm$core$List$map, columnWidth, config.columns),
-					rows: A2(
-						$elm$core$List$repeat,
-						$elm$core$List$length(config.data),
-						$mdgriffith$elm_ui$Internal$Model$Content),
-					spacing: _Utils_Tuple2(
-						$mdgriffith$elm_ui$Element$px(sX),
-						$mdgriffith$elm_ui$Element$px(sY))
-				}));
-		return A4(
-			$mdgriffith$elm_ui$Internal$Model$element,
-			$mdgriffith$elm_ui$Internal$Model$asGrid,
-			$mdgriffith$elm_ui$Internal$Model$div,
-			A2(
-				$elm$core$List$cons,
-				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-				A2($elm$core$List$cons, template, attrs)),
-			$mdgriffith$elm_ui$Internal$Model$Unkeyed(
-				function () {
-					if (maybeHeaders.$ === 'Nothing') {
-						return children.elements;
-					} else {
-						var renderedHeaders = maybeHeaders.a;
-						return _Utils_ap(
-							renderedHeaders,
-							$elm$core$List$reverse(children.elements));
-					}
-				}()));
-	});
-var $mdgriffith$elm_ui$Element$table = F2(
-	function (attrs, config) {
-		return A2(
-			$mdgriffith$elm_ui$Element$tableHelper,
-			attrs,
-			{
-				columns: A2($elm$core$List$map, $mdgriffith$elm_ui$Element$InternalColumn, config.columns),
-				data: config.data
-			});
-	});
-var $elm$core$List$sortBy = _List_sortBy;
-var $author$project$Widget$SortTable$view = function (_v0) {
-	var content = _v0.content;
-	var columns = _v0.columns;
-	var model = _v0.model;
-	var findTitle = function (list) {
-		findTitle:
-		while (true) {
-			if (!list.b) {
-				return $elm$core$Maybe$Nothing;
-			} else {
-				var head = list.a;
-				var tail = list.b;
-				if (_Utils_eq(head.title, model.title)) {
-					return $elm$core$Maybe$Just(head.content);
-				} else {
-					var $temp$list = tail;
-					list = $temp$list;
-					continue findTitle;
-				}
-			}
-		}
-	};
-	return {
-		columns: A2(
-			$elm$core$List$map,
-			function (column) {
-				return {
-					header: column.title,
-					view: function () {
-						var _v2 = column.content;
-						switch (_v2.$) {
-							case 'IntColumn':
-								var value = _v2.a.value;
-								var toString = _v2.a.toString;
-								return A2($elm$core$Basics$composeR, value, toString);
-							case 'FloatColumn':
-								var value = _v2.a.value;
-								var toString = _v2.a.toString;
-								return A2($elm$core$Basics$composeR, value, toString);
-							default:
-								var value = _v2.a.value;
-								var toString = _v2.a.toString;
-								return A2($elm$core$Basics$composeR, value, toString);
-						}
-					}()
-				};
-			},
-			columns),
-		data: (model.asc ? $elm$core$Basics$identity : $elm$core$List$reverse)(
-			A3(
-				$elm$core$Basics$apR,
-				A2(
-					$elm$core$Maybe$map,
-					function (c) {
-						switch (c.$) {
-							case 'StringColumn':
-								var value = c.a.value;
-								return $elm$core$List$sortBy(value);
-							case 'IntColumn':
-								var value = c.a.value;
-								return $elm$core$List$sortBy(value);
-							default:
-								var value = c.a.value;
-								return $elm$core$List$sortBy(value);
-						}
-					},
-					findTitle(columns)),
-				$elm$core$Maybe$withDefault($elm$core$Basics$identity),
-				content))
-	};
-};
-var $author$project$Reusable$sortTable = function (model) {
-	return _Utils_Tuple2(
-		'Sort Table',
-		A2(
-			$mdgriffith$elm_ui$Element$table,
-			$Orasund$elm_ui_framework$Framework$Grid$simple,
-			function (_v0) {
-				var data = _v0.data;
-				var columns = _v0.columns;
-				return {
-					columns: A2(
-						$elm$core$List$map,
-						function (config) {
-							return {
-								header: A2(
-									$mdgriffith$elm_ui$Element$Input$button,
-									_List_fromArray(
-										[$mdgriffith$elm_ui$Element$Font$bold]),
-									{
-										label: _Utils_eq(config.header, model.title) ? A2(
-											$mdgriffith$elm_ui$Element$row,
-											_Utils_ap(
-												$Orasund$elm_ui_framework$Framework$Grid$simple,
-												_List_fromArray(
-													[$mdgriffith$elm_ui$Element$Font$bold])),
-											_List_fromArray(
-												[
-													$mdgriffith$elm_ui$Element$text(config.header),
-													$mdgriffith$elm_ui$Element$html(
-													model.asc ? $jasonliang512$elm_heroicons$Heroicons$Solid$cheveronUp(
-														_List_fromArray(
-															[
-																$elm$html$Html$Attributes$width(16)
-															])) : $jasonliang512$elm_heroicons$Heroicons$Solid$cheveronDown(
-														_List_fromArray(
-															[
-																$elm$html$Html$Attributes$width(16)
-															])))
-												])) : $mdgriffith$elm_ui$Element$text(config.header),
-										onPress: $elm$core$Maybe$Just(
-											$author$project$Reusable$SortBy(
-												{
-													asc: _Utils_eq(config.header, model.title) ? (!model.asc) : true,
-													title: config.header
-												}))
-									}),
-								view: A2($elm$core$Basics$composeR, config.view, $mdgriffith$elm_ui$Element$text),
-								width: $mdgriffith$elm_ui$Element$fill
-							};
-						},
-						columns),
-					data: data
-				};
-			}(
-				$author$project$Widget$SortTable$view(
-					{
-						columns: _List_fromArray(
-							[
-								$author$project$Widget$SortTable$intColumn(
-								{
-									title: 'Id',
-									toString: function (_int) {
-										return '#' + $elm$core$String$fromInt(_int);
-									},
-									value: function ($) {
-										return $.id;
-									}
-								}),
-								$author$project$Widget$SortTable$stringColumn(
-								{
-									title: 'Name',
-									toString: $elm$core$Basics$identity,
-									value: function ($) {
-										return $.name;
-									}
-								}),
-								$author$project$Widget$SortTable$floatColumn(
-								{
-									title: 'rating',
-									toString: $elm$core$String$fromFloat,
-									value: function ($) {
-										return $.rating;
-									}
-								})
-							]),
-						content: _List_fromArray(
-							[
-								{id: 1, name: 'Antonio', rating: 2.456},
-								{id: 2, name: 'Ana', rating: 1.34},
-								{id: 3, name: 'Alfred', rating: 4.22},
-								{id: 4, name: 'Thomas', rating: 3}
-							]),
-						model: model
-					}))));
-};
-var $author$project$Reusable$view = function (_v0) {
-	var addSnackbar = _v0.addSnackbar;
-	var msgMapper = _v0.msgMapper;
-	var model = _v0.model;
-	return {
-		description: 'Reusable views have an internal state but no update function. You will need to do some wiring, but nothing complicated.',
-		items: _List_fromArray(
-			[
-				$author$project$Reusable$snackbar(addSnackbar),
-				A2(
-				$elm$core$Tuple$mapSecond,
-				$mdgriffith$elm_ui$Element$map(msgMapper),
-				$author$project$Reusable$sortTable(model)),
-				$author$project$Reusable$scrollingNavCard
-			]),
-		title: 'Reusable Views'
-	};
-};
-var $author$project$Stateless$SetCarousel = function (a) {
-	return {$: 'SetCarousel', a: a};
-};
-var $elm$core$Array$length = function (_v0) {
-	var len = _v0.a;
-	return len;
-};
-var $author$project$Widget$carousel = function (_v0) {
-	var content = _v0.content;
-	var current = _v0.current;
-	var label = _v0.label;
-	var _v1 = content;
-	var head = _v1.a;
-	var tail = _v1.b;
-	return label(
-		(current <= 0) ? head : ((_Utils_cmp(
-			current,
-			$elm$core$Array$length(tail)) > 0) ? A2(
-			$elm$core$Maybe$withDefault,
-			head,
-			A2(
-				$elm$core$Array$get,
-				$elm$core$Array$length(tail) - 1,
-				tail)) : A2(
-			$elm$core$Maybe$withDefault,
-			head,
-			A2($elm$core$Array$get, current - 1, tail))));
-};
-var $elm$svg$Svg$Attributes$points = _VirtualDom_attribute('points');
-var $elm$svg$Svg$polyline = $elm$svg$Svg$trustedNode('polyline');
-var $author$project$Icons$chevronLeft = A2(
-	$author$project$Icons$svgFeatherIcon,
-	'chevron-left',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$polyline,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$points('15 18 9 12 15 6')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Icons$chevronRight = A2(
-	$author$project$Icons$svgFeatherIcon,
-	'chevron-right',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$polyline,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$points('9 18 15 12 9 6')
-				]),
-			_List_Nil)
-		]));
-var $Orasund$elm_ui_framework$Framework$Color$cyan = A3($mdgriffith$elm_ui$Element$rgb255, 32, 156, 238);
-var $Orasund$elm_ui_framework$Framework$Color$green = A3($mdgriffith$elm_ui$Element$rgb255, 35, 209, 96);
-var $Orasund$elm_ui_framework$Framework$Color$yellow = A3($mdgriffith$elm_ui$Element$rgb255, 255, 221, 87);
-var $author$project$Stateless$carousel = function (model) {
-	return _Utils_Tuple2(
-		'Carousel',
-		$author$project$Widget$carousel(
-			{
-				content: _Utils_Tuple2(
-					$Orasund$elm_ui_framework$Framework$Color$cyan,
-					$elm$core$Array$fromList(
-						_List_fromArray(
-							[$Orasund$elm_ui_framework$Framework$Color$yellow, $Orasund$elm_ui_framework$Framework$Color$green, $Orasund$elm_ui_framework$Framework$Color$red]))),
-				current: model.carousel,
-				label: function (c) {
-					return A2(
-						$mdgriffith$elm_ui$Element$row,
-						_Utils_ap(
-							$Orasund$elm_ui_framework$Framework$Grid$simple,
-							_List_fromArray(
-								[
-									$mdgriffith$elm_ui$Element$centerX,
-									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
-								])),
-						_List_fromArray(
-							[
-								A2(
-								$mdgriffith$elm_ui$Element$el,
-								_List_fromArray(
-									[$mdgriffith$elm_ui$Element$centerY]),
-								A2(
-									$author$project$Widget$iconButton,
-									$author$project$Data$Style$style.button,
-									{
-										icon: A2(
-											$mdgriffith$elm_ui$Element$el,
-											_List_Nil,
-											$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronLeft)),
-										onPress: function (i) {
-											return (i < 0) ? $elm$core$Maybe$Nothing : $elm$core$Maybe$Just(
-												$author$project$Stateless$SetCarousel(i));
-										}(model.carousel - 1),
-										text: 'Previous'
-									})),
-								A2(
-								$mdgriffith$elm_ui$Element$el,
-								_Utils_ap(
-									$Orasund$elm_ui_framework$Framework$Card$simple,
-									_List_fromArray(
-										[
-											$mdgriffith$elm_ui$Element$Background$color(c),
-											$mdgriffith$elm_ui$Element$height(
-											$mdgriffith$elm_ui$Element$px(100)),
-											$mdgriffith$elm_ui$Element$width(
-											$mdgriffith$elm_ui$Element$px(100))
-										])),
-								$mdgriffith$elm_ui$Element$none),
-								A2(
-								$mdgriffith$elm_ui$Element$el,
-								_List_fromArray(
-									[$mdgriffith$elm_ui$Element$centerY]),
-								A2(
-									$author$project$Widget$iconButton,
-									$author$project$Data$Style$style.button,
-									{
-										icon: A2(
-											$mdgriffith$elm_ui$Element$el,
-											_List_Nil,
-											$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronRight)),
-										onPress: function (i) {
-											return (i >= 4) ? $elm$core$Maybe$Nothing : $elm$core$Maybe$Just(
-												$author$project$Stateless$SetCarousel(i));
-										}(model.carousel + 1),
-										text: 'Next'
-									}))
-							]));
-				}
-			}));
-};
-var $author$project$Stateless$ToggleCollapsable = function (a) {
-	return {$: 'ToggleCollapsable', a: a};
-};
-var $author$project$Icons$chevronDown = A2(
-	$author$project$Icons$svgFeatherIcon,
-	'chevron-down',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$polyline,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$points('6 9 12 15 18 9')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Widget$collapsable = F2(
-	function (style, _v0) {
-		var onToggle = _v0.onToggle;
-		var isCollapsed = _v0.isCollapsed;
-		var label = _v0.label;
-		var content = _v0.content;
-		return A2(
-			$mdgriffith$elm_ui$Element$column,
-			style.containerColumn,
-			_Utils_ap(
-				_List_fromArray(
-					[
-						A2(
-						$mdgriffith$elm_ui$Element$Input$button,
-						style.button,
-						{
-							label: label,
-							onPress: $elm$core$Maybe$Just(
-								onToggle(!isCollapsed))
-						})
-					]),
-				isCollapsed ? _List_Nil : _List_fromArray(
-					[content])));
-	});
-var $author$project$Stateless$collapsable = function (model) {
-	return _Utils_Tuple2(
-		'Collapsable',
-		A2(
-			$author$project$Widget$collapsable,
-			{
-				button: _List_Nil,
-				containerColumn: _Utils_ap(
-					$Orasund$elm_ui_framework$Framework$Card$simple,
-					_Utils_ap(
-						$Orasund$elm_ui_framework$Framework$Grid$simple,
-						_List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$padding(8)
-							])))
-			},
-			{
-				content: $mdgriffith$elm_ui$Element$text('Hello World'),
-				isCollapsed: model.isCollapsed,
-				label: A2(
-					$mdgriffith$elm_ui$Element$row,
-					_Utils_ap(
-						$Orasund$elm_ui_framework$Framework$Grid$simple,
-						_List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-							])),
-					_List_fromArray(
-						[
-							model.isCollapsed ? A2(
-							$mdgriffith$elm_ui$Element$el,
-							_List_Nil,
-							$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronRight)) : A2(
-							$mdgriffith$elm_ui$Element$el,
-							_List_Nil,
-							$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronDown)),
-							$mdgriffith$elm_ui$Element$text('Title')
-						])),
-				onToggle: $author$project$Stateless$ToggleCollapsable
-			}));
-};
-var $author$project$Stateless$dialog = F2(
-	function (showDialog, model) {
-		return _Utils_Tuple2(
-			'Dialog',
-			A2(
-				$mdgriffith$elm_ui$Element$Input$button,
-				$Orasund$elm_ui_framework$Framework$Button$simple,
-				{
-					label: $mdgriffith$elm_ui$Element$text('Show dialog'),
-					onPress: $elm$core$Maybe$Just(showDialog)
-				}));
-	});
-var $author$project$Stateless$ToggleButton = function (a) {
-	return {$: 'ToggleButton', a: a};
-};
-var $author$project$Icons$repeat = A2(
-	$author$project$Icons$svgFeatherIcon,
-	'repeat',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$polyline,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$points('17 1 21 5 17 9')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M3 11V9a4 4 0 0 1 4-4h14')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$polyline,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$points('7 23 3 19 7 15')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M21 13v2a4 4 0 0 1-4 4H3')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Icons$slash = A2(
-	$author$project$Icons$svgFeatherIcon,
-	'slash',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$circle,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$cx('12'),
-					$elm$svg$Svg$Attributes$cy('12'),
-					$elm$svg$Svg$Attributes$r('10')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$line,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$x1('4.93'),
-					$elm$svg$Svg$Attributes$y1('4.93'),
-					$elm$svg$Svg$Attributes$x2('19.07'),
-					$elm$svg$Svg$Attributes$y2('19.07')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Stateless$iconButton = function (model) {
-	return _Utils_Tuple2(
-		'Icon Button',
-		A2(
-			$mdgriffith$elm_ui$Element$column,
-			$Orasund$elm_ui_framework$Framework$Grid$simple,
-			_List_fromArray(
-				[
-					A2(
-					$mdgriffith$elm_ui$Element$row,
-					$Orasund$elm_ui_framework$Framework$Grid$simple,
-					_List_fromArray(
-						[
-							A2(
-							$author$project$Widget$button,
-							$author$project$Data$Style$style.primaryButton,
-							{
-								icon: A2(
-									$mdgriffith$elm_ui$Element$el,
-									_List_Nil,
-									$mdgriffith$elm_ui$Element$html($author$project$Icons$slash)),
-								onPress: model.button ? $elm$core$Maybe$Just(
-									$author$project$Stateless$ToggleButton(false)) : $elm$core$Maybe$Nothing,
-								text: 'disable me'
-							}),
-							A2(
-							$author$project$Widget$iconButton,
-							$author$project$Data$Style$style.button,
-							{
-								icon: A2(
-									$mdgriffith$elm_ui$Element$el,
-									_List_Nil,
-									$mdgriffith$elm_ui$Element$html($author$project$Icons$repeat)),
-								onPress: $elm$core$Maybe$Just(
-									$author$project$Stateless$ToggleButton(true)),
-								text: 'reset'
-							})
-						])),
-					A2(
-					$author$project$Widget$button,
-					$author$project$Data$Style$style.button,
-					{
-						icon: $mdgriffith$elm_ui$Element$none,
-						onPress: $elm$core$Maybe$Just(
-							$author$project$Stateless$ToggleButton(true)),
-						text: 'reset button'
-					})
-				])));
-};
-var $author$project$Stateless$modal = F2(
-	function (changedSheet, model) {
-		return _Utils_Tuple2(
-			'Modal',
-			A2(
-				$mdgriffith$elm_ui$Element$column,
-				$Orasund$elm_ui_framework$Framework$Grid$simple,
-				_List_fromArray(
-					[
-						A2(
-						$mdgriffith$elm_ui$Element$Input$button,
-						$Orasund$elm_ui_framework$Framework$Button$simple,
-						{
-							label: $mdgriffith$elm_ui$Element$text('show left sheet'),
-							onPress: $elm$core$Maybe$Just(
-								changedSheet(
-									$elm$core$Maybe$Just($author$project$Layout$LeftSheet)))
-						}),
-						A2(
-						$mdgriffith$elm_ui$Element$Input$button,
-						$Orasund$elm_ui_framework$Framework$Button$simple,
-						{
-							label: $mdgriffith$elm_ui$Element$text('show right sheet'),
-							onPress: $elm$core$Maybe$Just(
-								changedSheet(
-									$elm$core$Maybe$Just($author$project$Layout$RightSheet)))
-						})
-					])));
-	});
-var $author$project$Stateless$ChangedMultiSelected = function (a) {
-	return {$: 'ChangedMultiSelected', a: a};
-};
-var $author$project$Internal$Select$multiSelect = function (_v0) {
-	var selected = _v0.selected;
-	var options = _v0.options;
-	var onSelect = _v0.onSelect;
-	return A2(
-		$elm$core$List$indexedMap,
-		F2(
-			function (i, a) {
-				return _Utils_Tuple2(
-					A2($elm$core$Set$member, i, selected),
-					{
-						icon: a.icon,
-						onPress: onSelect(i),
-						text: a.text
-					});
-			}),
-		options);
-};
-var $author$project$Widget$multiSelect = $author$project$Internal$Select$multiSelect;
-var $author$project$Stateless$multiSelect = function (model) {
-	var buttonStyle = $author$project$Data$Style$style.button;
-	return _Utils_Tuple2(
-		'Multi Select',
-		A2(
-			$mdgriffith$elm_ui$Element$row,
-			$Orasund$elm_ui_framework$Framework$Grid$compact,
-			A2(
-				$elm$core$List$indexedMap,
-				function (i) {
-					return $author$project$Widget$selectButton(
-						_Utils_update(
-							buttonStyle,
-							{
-								container: _Utils_ap(
-									buttonStyle.container,
-									(!i) ? $Orasund$elm_ui_framework$Framework$Group$left : ((i === 2) ? $Orasund$elm_ui_framework$Framework$Group$right : $Orasund$elm_ui_framework$Framework$Group$center))
-							}));
-				},
-				$author$project$Widget$multiSelect(
-					{
-						onSelect: A2($elm$core$Basics$composeR, $author$project$Stateless$ChangedMultiSelected, $elm$core$Maybe$Just),
-						options: A2(
-							$elm$core$List$map,
-							function (_int) {
-								return {
-									icon: $mdgriffith$elm_ui$Element$none,
-									text: $elm$core$String$fromInt(_int)
-								};
-							},
-							_List_fromArray(
-								[1, 2, 42])),
-						selected: model.multiSelected
-					}))));
-};
-var $author$project$Stateless$ChangedSelected = function (a) {
-	return {$: 'ChangedSelected', a: a};
-};
-var $author$project$Stateless$select = function (model) {
-	var buttonStyle = $author$project$Data$Style$style.button;
-	return _Utils_Tuple2(
-		'Select',
-		A2(
-			$mdgriffith$elm_ui$Element$row,
-			$Orasund$elm_ui_framework$Framework$Grid$compact,
-			A2(
-				$elm$core$List$indexedMap,
-				function (i) {
-					return $author$project$Widget$selectButton(
-						_Utils_update(
-							buttonStyle,
-							{
-								container: _Utils_ap(
-									buttonStyle.container,
-									(!i) ? $Orasund$elm_ui_framework$Framework$Group$left : ((i === 2) ? $Orasund$elm_ui_framework$Framework$Group$right : $Orasund$elm_ui_framework$Framework$Group$center))
-							}));
-				},
-				$author$project$Widget$select(
-					{
-						onSelect: A2($elm$core$Basics$composeR, $author$project$Stateless$ChangedSelected, $elm$core$Maybe$Just),
-						options: A2(
-							$elm$core$List$map,
-							function (_int) {
-								return {
-									icon: $mdgriffith$elm_ui$Element$none,
-									text: $elm$core$String$fromInt(_int)
-								};
-							},
-							_List_fromArray(
-								[1, 2, 42])),
-						selected: model.selected
-					}))));
-};
-var $author$project$Stateless$ChangedTab = function (a) {
-	return {$: 'ChangedTab', a: a};
-};
-var $Orasund$elm_ui_framework$Framework$Group$bottom = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Border$roundEach(
-		{bottomLeft: 4, bottomRight: 4, topLeft: 0, topRight: 0})
-	]);
-var $Orasund$elm_ui_framework$Framework$Card$small = $Orasund$elm_ui_framework$Framework$Card$withSize(240);
-var $author$project$Widget$tab = F3(
-	function (style, options, content) {
-		return A2(
-			$mdgriffith$elm_ui$Element$column,
-			style.containerColumn,
-			_List_fromArray(
-				[
-					A2(
-					$mdgriffith$elm_ui$Element$row,
-					style.optionRow,
-					A2(
-						$elm$core$List$map,
-						$author$project$Widget$selectButton(style.button),
-						$author$project$Widget$select(options))),
-					content(options.selected)
-				]));
-	});
-var $author$project$Stateless$tab = function (model) {
-	return _Utils_Tuple2(
-		'Tab',
-		A3(
-			$author$project$Widget$tab,
-			{button: $author$project$Data$Style$style.tabButton, containerColumn: $Orasund$elm_ui_framework$Framework$Grid$compact, optionRow: $Orasund$elm_ui_framework$Framework$Grid$simple},
-			{
-				onSelect: A2($elm$core$Basics$composeR, $author$project$Stateless$ChangedTab, $elm$core$Maybe$Just),
-				options: A2(
-					$elm$core$List$map,
-					function (_int) {
-						return {
-							icon: $mdgriffith$elm_ui$Element$none,
-							text: 'Tab ' + $elm$core$String$fromInt(_int)
-						};
-					},
-					_List_fromArray(
-						[1, 2, 3])),
-				selected: model.tab
-			},
-			function (selected) {
-				return A2(
-					$mdgriffith$elm_ui$Element$el,
-					_Utils_ap($Orasund$elm_ui_framework$Framework$Card$small, $Orasund$elm_ui_framework$Framework$Group$bottom),
-					$mdgriffith$elm_ui$Element$text(
-						function () {
-							_v0$3:
-							while (true) {
-								if (selected.$ === 'Just') {
-									switch (selected.a) {
-										case 0:
-											return 'This is Tab 1';
-										case 1:
-											return 'This is the second tab';
-										case 2:
-											return 'The thrid and last tab';
-										default:
-											break _v0$3;
-									}
-								} else {
-									break _v0$3;
-								}
-							}
-							return 'Please select a tab';
-						}()));
-			}));
-};
-var $author$project$Stateless$SetTextInput = function (a) {
-	return {$: 'SetTextInput', a: a};
-};
-var $author$project$Stateless$ToggleTextInputChip = function (a) {
-	return {$: 'ToggleTextInputChip', a: a};
-};
-var $elm$core$Dict$diff = F2(
-	function (t1, t2) {
-		return A3(
-			$elm$core$Dict$foldl,
-			F3(
-				function (k, v, t) {
-					return A2($elm$core$Dict$remove, k, t);
-				}),
-			t1,
-			t2);
-	});
-var $elm$core$Set$diff = F2(
-	function (_v0, _v1) {
-		var dict1 = _v0.a;
-		var dict2 = _v1.a;
-		return $elm$core$Set$Set_elm_builtin(
-			A2($elm$core$Dict$diff, dict1, dict2));
-	});
-var $author$project$Stateless$textInput = function (model) {
-	return _Utils_Tuple2(
-		'Chip Text Input',
-		A2(
-			$mdgriffith$elm_ui$Element$column,
-			$Orasund$elm_ui_framework$Framework$Grid$simple,
-			_List_fromArray(
-				[
-					A2(
-					$author$project$Widget$textInput,
-					$author$project$Data$Style$style.textInput,
-					{
-						chips: A2(
-							$elm$core$List$map,
-							function (string) {
-								return {
-									icon: $mdgriffith$elm_ui$Element$none,
-									onPress: $elm$core$Maybe$Just(
-										$author$project$Stateless$ToggleTextInputChip(string)),
-									text: string
-								};
-							},
-							$elm$core$Set$toList(model.chipTextInput)),
-						label: 'Chips',
-						onChange: $author$project$Stateless$SetTextInput,
-						placeholder: $elm$core$Maybe$Nothing,
-						text: model.textInput
-					}),
-					A2(
-					$mdgriffith$elm_ui$Element$wrappedRow,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$spacing(10)
-						]),
-					A2(
-						$elm$core$List$map,
-						function (string) {
-							return A2(
-								$mdgriffith$elm_ui$Element$Input$button,
-								_Utils_ap($Orasund$elm_ui_framework$Framework$Button$simple, $Orasund$elm_ui_framework$Framework$Tag$simple),
-								{
-									label: $mdgriffith$elm_ui$Element$text(string),
-									onPress: $elm$core$Maybe$Just(
-										$author$project$Stateless$ToggleTextInputChip(string))
-								});
-						},
-						$elm$core$Set$toList(
-							A2(
-								$elm$core$Set$diff,
-								$elm$core$Set$fromList(
-									_List_fromArray(
-										['A', 'B', 'C'])),
-								model.chipTextInput))))
-				])));
-};
-var $author$project$Stateless$view = F2(
-	function (_v0, model) {
-		var msgMapper = _v0.msgMapper;
-		var showDialog = _v0.showDialog;
-		var changedSheet = _v0.changedSheet;
-		return {
-			description: 'Stateless views are simple functions that view some content. No wiring required.',
-			items: _List_fromArray(
-				[
-					A2(
-					$elm$core$Tuple$mapSecond,
-					$mdgriffith$elm_ui$Element$map(msgMapper),
-					$author$project$Stateless$iconButton(model)),
-					A2(
-					$elm$core$Tuple$mapSecond,
-					$mdgriffith$elm_ui$Element$map(msgMapper),
-					$author$project$Stateless$select(model)),
-					A2(
-					$elm$core$Tuple$mapSecond,
-					$mdgriffith$elm_ui$Element$map(msgMapper),
-					$author$project$Stateless$multiSelect(model)),
-					A2(
-					$elm$core$Tuple$mapSecond,
-					$mdgriffith$elm_ui$Element$map(msgMapper),
-					$author$project$Stateless$collapsable(model)),
-					A2($author$project$Stateless$modal, changedSheet, model),
-					A2(
-					$elm$core$Tuple$mapSecond,
-					$mdgriffith$elm_ui$Element$map(msgMapper),
-					$author$project$Stateless$carousel(model)),
-					A2(
-					$elm$core$Tuple$mapSecond,
-					$mdgriffith$elm_ui$Element$map(msgMapper),
-					$author$project$Stateless$tab(model)),
-					A2($author$project$Stateless$dialog, showDialog, model),
-					A2(
-					$elm$core$Tuple$mapSecond,
-					$mdgriffith$elm_ui$Element$map(msgMapper),
-					$author$project$Stateless$textInput(model))
-				]),
-			title: 'Stateless Views'
-		};
-	});
-var $elm$html$Html$Attributes$id = $elm$html$Html$Attributes$stringProperty('id');
-var $author$project$Widget$ScrollingNav$view = F2(
-	function (asElement, _v0) {
-		var toString = _v0.toString;
-		var arrangement = _v0.arrangement;
-		return A2(
-			$mdgriffith$elm_ui$Element$column,
-			$Orasund$elm_ui_framework$Framework$Grid$simple,
-			A2(
-				$elm$core$List$map,
-				function (header) {
-					return A2(
-						$mdgriffith$elm_ui$Element$el,
-						_List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$htmlAttribute(
-								$elm$html$Html$Attributes$id(
-									toString(header))),
-								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-							]),
-						asElement(header));
-				},
-				arrangement));
-	});
-var $author$project$Example$view = function (model) {
+var $author$project$Main$view = function (model) {
 	if (model.$ === 'Loading') {
 		return A2($Orasund$elm_ui_framework$Framework$responsiveLayout, _List_Nil, $mdgriffith$elm_ui$Element$none);
 	} else {
 		var m = model.a;
+		var style = $author$project$Data$Theme$toStyle(m.theme);
 		return A2(
 			$elm$html$Html$map,
-			$author$project$Example$LoadedSpecific,
-			A2(
-				$author$project$Layout$view,
-				_List_Nil,
+			$author$project$Main$LoadedSpecific,
+			A3(
+				$author$project$Widget$Layout$view,
+				style.layout,
 				{
 					actions: _List_fromArray(
 						[
@@ -17819,7 +20430,7 @@ var $author$project$Example$view = function (model) {
 								_List_Nil,
 								$mdgriffith$elm_ui$Element$html($author$project$Icons$book)),
 							onPress: $elm$core$Maybe$Just(
-								$author$project$Example$Load('https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/')),
+								$author$project$Main$Load('https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/')),
 							text: 'Docs'
 						},
 							{
@@ -17828,163 +20439,64 @@ var $author$project$Example$view = function (model) {
 								_List_Nil,
 								$mdgriffith$elm_ui$Element$html($author$project$Icons$github)),
 							onPress: $elm$core$Maybe$Just(
-								$author$project$Example$Load('https://github.com/Orasund/elm-ui-widgets')),
+								$author$project$Main$Load('https://github.com/Orasund/elm-ui-widgets')),
 							text: 'Github'
 						},
 							{
 							icon: A2(
 								$mdgriffith$elm_ui$Element$el,
 								_List_Nil,
-								$mdgriffith$elm_ui$Element$html($author$project$Icons$circle)),
-							onPress: $elm$core$Maybe$Nothing,
-							text: 'Placeholder'
+								$mdgriffith$elm_ui$Element$html($author$project$Icons$penTool)),
+							onPress: (!_Utils_eq(m.theme, $author$project$Data$Theme$Material)) ? $elm$core$Maybe$Just(
+								$author$project$Main$SetTheme($author$project$Data$Theme$Material)) : $elm$core$Maybe$Nothing,
+							text: 'Material Theme'
 						},
 							{
 							icon: A2(
 								$mdgriffith$elm_ui$Element$el,
 								_List_Nil,
-								$mdgriffith$elm_ui$Element$html($author$project$Icons$triangle)),
-							onPress: $elm$core$Maybe$Nothing,
-							text: 'Placeholder'
+								$mdgriffith$elm_ui$Element$html($author$project$Icons$penTool)),
+							onPress: (!_Utils_eq(m.theme, $author$project$Data$Theme$DarkMaterial)) ? $elm$core$Maybe$Just(
+								$author$project$Main$SetTheme($author$project$Data$Theme$DarkMaterial)) : $elm$core$Maybe$Nothing,
+							text: 'Dark Material Theme'
 						},
 							{
 							icon: A2(
 								$mdgriffith$elm_ui$Element$el,
 								_List_Nil,
-								$mdgriffith$elm_ui$Element$html($author$project$Icons$square)),
-							onPress: $elm$core$Maybe$Nothing,
-							text: 'Placeholder'
+								$mdgriffith$elm_ui$Element$html($author$project$Icons$penTool)),
+							onPress: (!_Utils_eq(m.theme, $author$project$Data$Theme$ElmUiFramework)) ? $elm$core$Maybe$Just(
+								$author$project$Main$SetTheme($author$project$Data$Theme$ElmUiFramework)) : $elm$core$Maybe$Nothing,
+							text: 'Elm-Ui-Framework Theme'
+						},
+							{
+							icon: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_Nil,
+								$mdgriffith$elm_ui$Element$html($author$project$Icons$penTool)),
+							onPress: (!_Utils_eq(m.theme, $author$project$Data$Theme$Template)) ? $elm$core$Maybe$Just(
+								$author$project$Main$SetTheme($author$project$Data$Theme$Template)) : $elm$core$Maybe$Nothing,
+							text: 'Template Theme'
 						}
 						]),
-					content: A2(
-						$mdgriffith$elm_ui$Element$column,
-						$Orasund$elm_ui_framework$Framework$Grid$compact,
-						_List_fromArray(
-							[
-								A2(
-								$mdgriffith$elm_ui$Element$el,
-								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$height(
-										$mdgriffith$elm_ui$Element$px(42))
-									]),
-								$mdgriffith$elm_ui$Element$none),
-								A2(
-								$mdgriffith$elm_ui$Element$column,
-								$Orasund$elm_ui_framework$Framework$container,
-								_List_fromArray(
-									[
-										A2(
-										$author$project$Widget$ScrollingNav$view,
-										function (section) {
-											return function (_v2) {
-												var title = _v2.title;
-												var description = _v2.description;
-												var items = _v2.items;
-												return A2(
-													$mdgriffith$elm_ui$Element$column,
-													_Utils_ap(
-														$Orasund$elm_ui_framework$Framework$Grid$section,
-														_List_fromArray(
-															[$mdgriffith$elm_ui$Element$centerX])),
-													_List_fromArray(
-														[
-															A2(
-															$mdgriffith$elm_ui$Element$el,
-															$Orasund$elm_ui_framework$Framework$Heading$h2,
-															$mdgriffith$elm_ui$Element$text(title)),
-															(m.search.current === '') ? A2(
-															$mdgriffith$elm_ui$Element$paragraph,
-															_List_Nil,
-															$elm$core$List$singleton(
-																$mdgriffith$elm_ui$Element$text(description))) : $mdgriffith$elm_ui$Element$none,
-															A2(
-															$mdgriffith$elm_ui$Element$wrappedRow,
-															_Utils_ap(
-																$Orasund$elm_ui_framework$Framework$Grid$simple,
-																_List_fromArray(
-																	[
-																		$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
-																	])),
-															A2(
-																$elm$core$List$map,
-																function (_v3) {
-																	var name = _v3.a;
-																	var elem = _v3.b;
-																	return A2(
-																		$mdgriffith$elm_ui$Element$column,
-																		_Utils_ap(
-																			$Orasund$elm_ui_framework$Framework$Grid$simple,
-																			_Utils_ap(
-																				$Orasund$elm_ui_framework$Framework$Card$large,
-																				_List_fromArray(
-																					[
-																						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
-																					]))),
-																		_List_fromArray(
-																			[
-																				A2(
-																				$mdgriffith$elm_ui$Element$el,
-																				$Orasund$elm_ui_framework$Framework$Heading$h3,
-																				$mdgriffith$elm_ui$Element$text(name)),
-																				elem
-																			]));
-																},
-																((m.search.current !== '') ? $elm$core$List$filter(
-																	A2(
-																		$elm$core$Basics$composeR,
-																		$elm$core$Tuple$first,
-																		A2(
-																			$elm$core$Basics$composeR,
-																			$elm$core$String$toLower,
-																			$elm$core$String$contains(
-																				$elm$core$String$toLower(m.search.current))))) : $elm$core$Basics$identity)(items)))
-														]));
-											}(
-												function () {
-													switch (section.$) {
-														case 'ComponentViews':
-															return A2($author$project$Component$view, $author$project$Example$ComponentSpecific, m.component);
-														case 'ReusableViews':
-															return $author$project$Reusable$view(
-																{addSnackbar: $author$project$Example$AddSnackbar, model: m.reusable, msgMapper: $author$project$Example$ReusableSpecific});
-														default:
-															return A2(
-																$author$project$Stateless$view,
-																{
-																	changedSheet: $author$project$Example$ChangedSidebar,
-																	msgMapper: $author$project$Example$StatelessSpecific,
-																	showDialog: $author$project$Example$ToggleDialog(true)
-																},
-																m.stateless);
-													}
-												}());
-										},
-										m.scrollingNav)
-									]))
-							])),
 					dialog: m.displayDialog ? $elm$core$Maybe$Just(
 						A2(
 							$author$project$Widget$dialog,
-							$author$project$Data$Style$style.dialog,
+							style.dialog,
 							{
 								accept: $elm$core$Maybe$Just(
 									{
 										onPress: $elm$core$Maybe$Just(
-											$author$project$Example$ToggleDialog(false)),
+											$author$project$Main$ToggleDialog(false)),
 										text: 'Ok'
 									}),
-								body: A2(
-									$mdgriffith$elm_ui$Element$paragraph,
-									_List_Nil,
-									$elm$core$List$singleton(
-										$mdgriffith$elm_ui$Element$text('This is a dialog window'))),
 								dismiss: $elm$core$Maybe$Just(
 									{
 										onPress: $elm$core$Maybe$Just(
-											$author$project$Example$ToggleDialog(false)),
+											$author$project$Main$ToggleDialog(false)),
 										text: 'Dismiss'
 									}),
+								text: 'This is a dialog window',
 								title: $elm$core$Maybe$Just('Dialog')
 							})) : $elm$core$Maybe$Nothing,
 					layout: m.layout,
@@ -17993,31 +20505,139 @@ var $author$project$Example$view = function (model) {
 						function (_int) {
 							return A2(
 								$elm$core$Maybe$map,
-								$author$project$Example$JumpTo,
+								$author$project$Main$JumpTo,
 								A2(
 									$elm$core$Array$get,
 									_int,
 									$elm$core$Array$fromList(m.scrollingNav.arrangement)));
 						},
 						m.scrollingNav),
-					onChangedSidebar: $author$project$Example$ChangedSidebar,
+					onChangedSidebar: $author$project$Main$ChangedSidebar,
 					search: $elm$core$Maybe$Just(
-						{label: 'Search', onChange: $author$project$Example$ChangedSearch, text: m.search.raw}),
-					style: $author$project$Data$Style$style,
+						{label: 'Search', onChange: $author$project$Main$ChangedSearch, text: m.search.raw}),
 					title: A2(
 						$mdgriffith$elm_ui$Element$el,
 						$Orasund$elm_ui_framework$Framework$Heading$h1,
 						$mdgriffith$elm_ui$Element$text('Elm-Ui-Widgets')),
 					window: m.window
-				}));
+				},
+				A2(
+					$mdgriffith$elm_ui$Element$column,
+					$Orasund$elm_ui_framework$Framework$Grid$compact,
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$height(
+									$mdgriffith$elm_ui$Element$px(42))
+								]),
+							$mdgriffith$elm_ui$Element$none),
+							A2(
+							$mdgriffith$elm_ui$Element$column,
+							_Utils_ap($Orasund$elm_ui_framework$Framework$container, style.layout.container),
+							A2(
+								$elm$core$List$map,
+								function (section) {
+									return function (_v2) {
+										var title = _v2.title;
+										var description = _v2.description;
+										var items = _v2.items;
+										return A2(
+											$mdgriffith$elm_ui$Element$column,
+											_Utils_ap(
+												$Orasund$elm_ui_framework$Framework$Grid$section,
+												_List_fromArray(
+													[$mdgriffith$elm_ui$Element$centerX])),
+											_List_fromArray(
+												[
+													A2(
+													$mdgriffith$elm_ui$Element$el,
+													$Orasund$elm_ui_framework$Framework$Heading$h2,
+													$mdgriffith$elm_ui$Element$text(title)),
+													(m.search.current === '') ? A2(
+													$mdgriffith$elm_ui$Element$paragraph,
+													_List_Nil,
+													$elm$core$List$singleton(
+														$mdgriffith$elm_ui$Element$text(description))) : $mdgriffith$elm_ui$Element$none,
+													A2(
+													$mdgriffith$elm_ui$Element$wrappedRow,
+													_Utils_ap(
+														$Orasund$elm_ui_framework$Framework$Grid$simple,
+														_List_fromArray(
+															[
+																$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
+															])),
+													A2(
+														$elm$core$List$map,
+														function (_v4) {
+															var name = _v4.a;
+															var elem = _v4.b;
+															var more = _v4.c;
+															return A2(
+																$author$project$Widget$column,
+																style.cardColumn,
+																_List_fromArray(
+																	[
+																		A2(
+																		$mdgriffith$elm_ui$Element$column,
+																		$Orasund$elm_ui_framework$Framework$Grid$simple,
+																		_List_fromArray(
+																			[
+																				A2(
+																				$mdgriffith$elm_ui$Element$el,
+																				_Utils_ap(
+																					$Orasund$elm_ui_framework$Framework$Heading$h3,
+																					_List_fromArray(
+																						[
+																							$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+																							$mdgriffith$elm_ui$Element$htmlAttribute(
+																							$elm$html$Html$Attributes$id(name))
+																						])),
+																				$mdgriffith$elm_ui$Element$text(name)),
+																				elem
+																			])),
+																		A2(
+																		$mdgriffith$elm_ui$Element$el,
+																		_List_fromArray(
+																			[
+																				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+																			]),
+																		more)
+																	]));
+														},
+														((m.search.current !== '') ? $elm$core$List$filter(
+															function (_v3) {
+																var a = _v3.a;
+																return A2(
+																	$elm$core$String$contains,
+																	$elm$core$String$toLower(m.search.current),
+																	$elm$core$String$toLower(a));
+															}) : $elm$core$Basics$identity)(items)))
+												]));
+									}(
+										function () {
+											if (section.$ === 'ReusableViews') {
+												return $author$project$Reusable$view(
+													{addSnackbar: $author$project$Main$AddSnackbar, theme: m.theme});
+											} else {
+												return $author$project$Stateless$view(
+													{model: m.stateless, msgMapper: $author$project$Main$StatelessSpecific, theme: m.theme});
+											}
+										}());
+								},
+								_List_fromArray(
+									[$author$project$Data$Section$StatelessViews, $author$project$Data$Section$ReusableViews])))
+						]))));
 	}
 };
-var $author$project$Example$main = $elm$browser$Browser$element(
-	{init: $author$project$Example$init, subscriptions: $author$project$Example$subscriptions, update: $author$project$Example$update, view: $author$project$Example$view});
-_Platform_export({'Example':{'init':$author$project$Example$main(
+var $author$project$Main$main = $elm$browser$Browser$element(
+	{init: $author$project$Main$init, subscriptions: $author$project$Main$subscriptions, update: $author$project$Main$update, view: $author$project$Main$view});
+_Platform_export({'Main':{'init':$author$project$Main$main(
 	$elm$json$Json$Decode$succeed(_Utils_Tuple0))(0)}});}(this));
 
-  var app = Elm.Example.init({ node: document.getElementById("elm") });
+  var app = Elm.Main.init({ node: document.getElementById("elm") });
 }
 catch (e)
 {
diff --git a/example/src/Data/Example.elm b/example/src/Data/Example.elm
index 7749ba4..c43a4e9 100644
--- a/example/src/Data/Example.elm
+++ b/example/src/Data/Example.elm
@@ -1,4 +1,4 @@
-module Data.Example exposing (Model, Msg, init, subscriptions, toCardList, update, view)
+module Data.Example exposing (Example, asList, toString,fromString, Model, Msg, init, subscriptions, toCardList, update, view)
 
 import Data.Style exposing (Style)
 import Element exposing (Element)
@@ -15,6 +15,90 @@ import Example.TextInput as TextInput
 import Framework.Grid as Grid
 import View.Test as Test
 
+type Example
+    = ButtonExample
+    | SelectExample
+    | MultiSelectExample
+    | ExpansionPanelExample
+    | TabExample
+    | SortTableExample
+    | ModalExample
+    | DialogExample
+    | TextInputExample
+    | ListExample
+
+asList : List Example
+asList =
+    [ ButtonExample
+    , SelectExample
+    , MultiSelectExample
+    , ExpansionPanelExample
+    , TabExample
+    , SortTableExample
+    , ModalExample
+    , DialogExample
+    , TextInputExample
+    , ListExample
+    ]
+    |> List.sortBy toString
+
+
+toString : Example -> String
+toString example =
+    case example of
+        ButtonExample -> "Button"
+        SelectExample -> "Select"
+        MultiSelectExample -> "Multi Select"
+        ExpansionPanelExample -> "ExpansionPanel"
+        TabExample -> "Tab"
+        SortTableExample -> "SortTable"
+        ModalExample -> "Modal"
+        DialogExample -> "Dialog"
+        TextInputExample -> "TextInput"
+        ListExample -> "List"
+
+fromString  : String -> Maybe Example
+fromString string =
+    case string of
+          "Button" -> Just ButtonExample
+          "Select" -> Just SelectExample
+          "Multi Select" -> Just MultiSelectExample
+          "ExpansionPanel" -> Just ExpansionPanelExample
+          "Tab" -> Just TabExample
+          "SortTable" -> Just SortTableExample
+          "Modal" -> Just ModalExample
+          "Dialog" -> Just DialogExample
+          "TextInput" -> Just TextInputExample
+          "List" -> Just ListExample
+          _ -> Nothing
+
+get : Example -> ExampleView msg -> Element msg
+get example =
+    case example of
+        ButtonExample -> .button
+        SelectExample -> .select
+        MultiSelectExample -> .multiSelect
+        ExpansionPanelExample -> .expansionPanel
+        TabExample -> .tab
+        SortTableExample -> .sortTable
+        ModalExample -> .modal
+        DialogExample -> .dialog
+        TextInputExample -> .textInput
+        ListExample -> .list
+
+toTests : Example -> msg -> Style msg -> List ( String, Element msg )
+toTests example =
+    case example of
+        ButtonExample -> Test.button
+        SelectExample -> Test.select
+        MultiSelectExample -> Test.multiSelect
+        ExpansionPanelExample -> Test.expansionPanel
+        TabExample -> Test.tab
+        SortTableExample -> Test.sortTable
+        ModalExample -> Test.modal
+        DialogExample -> Test.dialog
+        TextInputExample -> Test.textInput
+        ListExample -> Test.list
 
 type Msg
     = Button Button.Msg
@@ -29,6 +113,7 @@ type Msg
     | List List.Msg
 
 
+
 type alias Model =
     { button : Button.Model
     , select : Select.Model
@@ -65,6 +150,18 @@ type alias UpgradeCollection =
     , list : UpgradeRecord List.Model List.Msg
     }
 
+type alias ExampleView msg =
+    { button : Element msg
+        , select : Element msg
+        , multiSelect : Element msg
+        , expansionPanel : Element msg
+        , tab : Element msg
+        , sortTable : Element msg
+        , modal : Element msg
+        , dialog : Element msg
+        , textInput : Element msg
+        , list : Element msg
+        }
 
 init : ( Model, Cmd Msg )
 init =
@@ -260,18 +357,8 @@ view :
     (Msg -> msg)
     -> Style msg
     -> Model
-    ->
-        { button : Element msg
-        , select : Element msg
-        , multiSelect : Element msg
-        , expansionPanel : Element msg
-        , tab : Element msg
-        , sortTable : Element msg
-        , modal : Element msg
-        , dialog : Element msg
-        , textInput : Element msg
-        , list : Element msg
-        }
+    -> ExampleView msg
+        
 view msgMapper style model =
     { button =
         Button.view (Button >> msgMapper) style (.button model)
@@ -304,48 +391,14 @@ toCardList :
     }
     -> List ( String, Element msg, Element msg )
 toCardList { idle, msgMapper, style, model } =
-    [ { title = "Button"
-      , example = .button
-      , test = Test.button
-      }
-    , { title = "Select"
-      , example = .select
-      , test = Test.select
-      }
-    , { title = "Multi Select"
-      , example = .multiSelect
-      , test = Test.multiSelect
-      }
-    , { title = "Expansion Panel"
-      , example = .expansionPanel
-      , test = Test.expansionPanel
-      }
-    , { title = "Tab"
-      , example = .tab
-      , test = Test.tab
-      }
-    , { title = "Sort Table"
-      , example = .sortTable
-      , test = Test.sortTable
-      }
-    , { title = "Modal"
-      , example = .modal
-      , test = Test.modal
-      }
-    , { title = "Dialog"
-      , example = .dialog
-      , test = Test.dialog
-      }
-    , { title = "Text Input"
-      , example = .textInput
-      , test = Test.textInput
-      }
-    , { title = "List"
-      , example = .list
-      , test = Test.list
-      }
-    ]
-        |> List.sortBy .title
+    asList
+    |> List.map 
+        (\example ->
+            { title = example |> toString
+            , example = example |> get
+            , test = example |> toTests
+            }
+        )
         |> List.map
             (\{ title, example, test } ->
                 ( title
diff --git a/example/src/Data/Style/Material.elm b/example/src/Data/Style/Material.elm
index 5e27964..bc41f53 100644
--- a/example/src/Data/Style/Material.elm
+++ b/example/src/Data/Style/Material.elm
@@ -35,30 +35,6 @@ sortTable palette =
     , defaultIcon = Element.none
     }
 
-layout : Palette -> String -> LayoutStyle msg
-layout palette string =
-    { container = [Font.family
-            [ Font.typeface "Roboto"
-            , Font.sansSerif
-            ]
-        ,Font.size 16
-    , Font.letterSpacing 0.5]
-    , snackbar = Material.snackbar palette
-    , layout = Element.layout
-    , header = Template.box <| string ++ ":header"
-    , menuButton = Template.button <| string ++ ":menuButton"
-    , sheetButton = Template.button <| string ++ ":sheetButton"
-    , menuTabButton = Template.button <| string ++ ":menuTabButton"
-    , sheet = Template.box <| string ++ ":sheet"
-    , menuIcon = Template.icon <| string ++ ":menuIcon"
-    , moreVerticalIcon = Template.icon <| string ++ ":moreVerticalIcon"
-    , spacing = 8
-    , title = Template.box <| string ++ ":title"
-    , searchIcon = Template.icon <| string ++ ":searchIcon"
-    , search = Template.box <| string ++ ":search"
-    , searchFill = Template.box <| string ++ ":searchFill"
-    }
-
 
 style : Palette -> Style msg
 style palette =
@@ -70,10 +46,10 @@ style palette =
     , button = Material.outlinedButton palette
     , primaryButton = Material.containedButton palette
     , selectButton = Material.toggleButton palette
-    , tab = Template.tab <| "tab"
+    , tab = Material.tab palette
     , textInput = Material.textInput palette
     , chipButton = Material.chip palette
     , expansionPanel = Material.expansionPanel palette
     , dialog = Material.alertDialog palette
-    , layout = layout palette "layout"
+    , layout = Material.layout palette "layout"
     }
diff --git a/example/src/Main.elm b/example/src/Main.elm
index 4edb930..9833ee9 100644
--- a/example/src/Main.elm
+++ b/example/src/Main.elm
@@ -8,11 +8,13 @@ import Browser.Navigation as Navigation
 import Data.Section as Section exposing (Section(..))
 import Data.Style exposing (Style)
 import Data.Theme as Theme exposing (Theme(..))
+import Data.Example as Example exposing (Example)
 import Element exposing (DeviceClass(..))
 import Framework
 import Framework.Grid as Grid
 import Framework.Heading as Heading
 import Html exposing (Html)
+import Html.Attributes as Attributes
 import Icons
 import Reusable
 import Stateless
@@ -25,7 +27,7 @@ import Widget.ScrollingNav as ScrollingNav
 
 type alias LoadedModel =
     { stateless : Stateless.Model
-    , scrollingNav : ScrollingNav.Model Section
+    , scrollingNav : ScrollingNav.Model Example
     , layout : Layout LoadedMsg
     , displayDialog : Bool
     , window :
@@ -48,14 +50,14 @@ type Model
 
 type LoadedMsg
     = StatelessSpecific Stateless.Msg
-    | UpdateScrollingNav (ScrollingNav.Model Section -> ScrollingNav.Model Section)
+    | UpdateScrollingNav (ScrollingNav.Model Example -> ScrollingNav.Model Example)
     | TimePassed Int
     | AddSnackbar ( String, Bool )
     | ToggleDialog Bool
     | ChangedSidebar (Maybe Part)
     | Resized { width : Int, height : Int }
     | Load String
-    | JumpTo Section
+    | JumpTo Example
     | ChangedSearch String
     | SetTheme Theme
     | Idle
@@ -71,9 +73,9 @@ initialModel { viewport } =
     let
         ( scrollingNav, cmd ) =
             ScrollingNav.init
-                { toString = Section.toString
-                , fromString = Section.fromString
-                , arrangement = Section.asList
+                { toString = Example.toString
+                , fromString = Example.fromString
+                , arrangement = Example.asList 
                 , toMsg =
                     \result ->
                         case result of
@@ -170,24 +172,6 @@ view model =
                           , text = "Github"
                           , icon = Icons.github |> Element.html |> Element.el []
                           }
-                        , { onPress =
-                                if m.theme /= ElmUiFramework then
-                                    Just <| SetTheme <| ElmUiFramework
-
-                                else
-                                    Nothing
-                          , text = "Elm-Ui-Framework Theme"
-                          , icon = Icons.penTool |> Element.html |> Element.el []
-                          }
-                        , { onPress =
-                                if m.theme /= Template then
-                                    Just <| SetTheme <| Template
-
-                                else
-                                    Nothing
-                          , text = "Template Theme"
-                          , icon = Icons.penTool |> Element.html |> Element.el []
-                          }
                         , { onPress =
                                 if m.theme /= Material then
                                     Just <| SetTheme <| Material
@@ -206,6 +190,25 @@ view model =
                           , text = "Dark Material Theme"
                           , icon = Icons.penTool |> Element.html |> Element.el []
                           }
+                        
+                        , { onPress =
+                                if m.theme /= ElmUiFramework then
+                                    Just <| SetTheme <| ElmUiFramework
+
+                                else
+                                    Nothing
+                          , text = "Elm-Ui-Framework Theme"
+                          , icon = Icons.penTool |> Element.html |> Element.el []
+                          }
+                        , { onPress =
+                                if m.theme /= Template then
+                                    Just <| SetTheme <| Template
+
+                                else
+                                    Nothing
+                          , text = "Template Theme"
+                          , icon = Icons.penTool |> Element.html |> Element.el []
+                          }
                         ]
                     , onChangedSidebar = ChangedSidebar
                     , title =
@@ -219,9 +222,10 @@ view model =
                             , label = "Search"
                             }
                     } <|
-                    ([ Element.el [ Element.height <| Element.px <| 42 ] <| Element.none
-                        , [ m.scrollingNav
-                                |> ScrollingNav.view
+                    (
+                        [ Element.el [ Element.height <| Element.px <| 42 ] <| Element.none
+                        , [StatelessViews,ReusableViews]
+                                |> List.map
                                     (\section ->
                                         (case section of
                                             ReusableViews ->
@@ -238,7 +242,9 @@ view model =
                                                     }
                                         )
                                             |> (\{ title, description, items } ->
-                                                    [ Element.el Heading.h2 <| Element.text <| title
+                                                    [ title
+                                                    |> Element.text
+                                                    |> Element.el ( Heading.h2 )
                                                     , if m.search.current == "" then
                                                         description
                                                             |> Element.text
@@ -262,7 +268,10 @@ view model =
                                                         |> List.map
                                                             (\( name, elem, more ) ->
                                                                 [ [ Element.text name
-                                                                        |> Element.el (Heading.h3 ++ [ Element.height <| Element.shrink ])
+                                                                        |> Element.el (Heading.h3 ++ [ Element.height <| Element.shrink 
+                                                                       , name
+                                                            |> Attributes.id
+                                                            |> Element.htmlAttribute])
                                                                   , elem
                                                                   ]
                                                                     |> Element.column Grid.simple
@@ -282,10 +291,12 @@ view model =
                                                         |> Element.column (Grid.section ++ [ Element.centerX ])
                                                )
                                     )
-                          ]
-                            |> Element.column Framework.container
+                               -- |> Element.column Grid.section
+                          --]
+                            |> Element.column (Framework.container ++ style.layout.container)
                         ]
-                            |> Element.column Grid.compact)
+                            |> Element.column Grid.compact
+                    )
 
 
 updateLoaded : LoadedMsg -> LoadedModel -> ( LoadedModel, Cmd LoadedMsg )
diff --git a/src/Internal/Button.elm b/src/Internal/Button.elm
index 648a163..981b19b 100644
--- a/src/Internal/Button.elm
+++ b/src/Internal/Button.elm
@@ -73,3 +73,4 @@ button style { onPress, text, icon } =
                 , Element.text text |> Element.el style.text
                 ]
         }
+        
diff --git a/src/Widget/Layout.elm b/src/Widget/Layout.elm
index 0cb2931..69faea8 100644
--- a/src/Widget/Layout.elm
+++ b/src/Widget/Layout.elm
@@ -127,12 +127,13 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay
                                 |> Array.fromList
                                 |> Array.get option
                         )
-                    |> Maybe.map (.text >> Element.text >> Element.el style.title)
+                    |> Maybe.map (.text >> Element.text)
                     |> Maybe.withDefault title
+                    |> Element.el style.title
                 ]
 
                else
-                [ title
+                [ title |> Element.el style.title
                 , menu
                     |> Widget.select
                     |> List.map (Widget.selectButton style.menuTabButton)
@@ -240,7 +241,9 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay
                       ]
                     , menu
                         |> Widget.select
-                        |> List.map (Widget.selectButton style.sheetButton)
+                        |> List.map
+                            (Widget.selectButton style.sheetButton
+                            )
                     ]
                         |> List.concat
                         |> Element.column [ Element.width <| Element.fill ]
@@ -297,20 +300,20 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay
                   , Element.inFront snackbar
                   ]
                 , if (layout.active /= Nothing) || (dialog /= Nothing) then
-                    (Element.height <| Element.px <| window.height)
-                        :: (case dialog of
-                                Just dialogConfig ->
-                                    dialogConfig
+                    --(Element.height <| Element.px <| window.height)
+                    --    ::
+                    case dialog of
+                        Just dialogConfig ->
+                            dialogConfig
 
-                                Nothing ->
-                                    Widget.modal
-                                        { onDismiss =
-                                            Nothing
-                                                |> onChangedSidebar
-                                                |> Just
-                                        , content = sheet
-                                        }
-                           )
+                        Nothing ->
+                            Widget.modal
+                                { onDismiss =
+                                    Nothing
+                                        |> onChangedSidebar
+                                        |> Just
+                                , content = sheet
+                                }
 
                   else
                     []
diff --git a/src/Widget/Style/Material.elm b/src/Widget/Style/Material.elm
index 7414537..9aac859 100644
--- a/src/Widget/Style/Material.elm
+++ b/src/Widget/Style/Material.elm
@@ -5,7 +5,7 @@ module Widget.Style.Material exposing
     , alertDialog
     , row, column, cardColumn
     , expansionPanel
-    , chip, darkPalette, snackbar, textInput
+    , chip, darkPalette, iconButton, layout, snackbar, tab, tabButton, textInput
     )
 
 {-|
@@ -60,12 +60,13 @@ import Widget.Style
         , ColumnStyle
         , DialogStyle
         , ExpansionPanelStyle
+        , LayoutStyle
         , RowStyle
         , SnackbarStyle
-        , SortTableStyle
         , TabStyle
         , TextInputStyle
         )
+import Widget.Style.Template as Template
 
 
 
@@ -239,6 +240,7 @@ accessibleWithTextColor c color =
            )
 
 
+toCIELCH : Color -> { l : Float, c : Float, h : Float }
 toCIELCH =
     Convert.colorToLab
         >> (\{ l, a, b } ->
@@ -249,6 +251,7 @@ toCIELCH =
            )
 
 
+fromCIELCH : { l : Float, c : Float, h : Float } -> Color
 fromCIELCH =
     (\{ l, c, h } ->
         { l = l
@@ -524,7 +527,7 @@ textButton palette =
     }
 
 
-{-| Implementation Detail:
+{-| Technical Remark:
 
   - Border color was not defined in the [specification](https://material.io/components/buttons#toggle-button)
 
@@ -613,13 +616,72 @@ toggleButton palette =
     }
 
 
+{-| Technical Remark:
+
+  - Could not find any specification details
+
+-}
+iconButton : Palette -> ButtonStyle msg
+iconButton palette =
+    { container =
+        (baseButton palette |> .container)
+            ++ [ Element.height <| Element.px 48
+               , Border.rounded 24
+
+               --, Font.color <| fromColor <| palette.primary
+               , Element.mouseDown
+                    [ palette.surface
+                        |> scaleOpacity buttonPressedOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               , Element.focused
+                    [ palette.surface
+                        |> scaleOpacity buttonFocusOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               , Element.mouseOver
+                    [ palette.surface
+                        |> scaleOpacity buttonHoverOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               ]
+    , labelRow =
+        [ Element.spacing 8
+        , Element.width <| Element.shrink
+        , Element.centerY
+        , Element.centerX
+        ]
+    , text = baseButton palette |> .text
+    , ifDisabled =
+        (baseButton palette |> .ifDisabled)
+            ++ [ gray
+                    |> fromColor
+                    |> Font.color
+               , Element.mouseDown []
+               , Element.mouseOver []
+               , Element.focused []
+               ]
+    , ifActive =
+        [ palette.surface
+            |> scaleOpacity buttonHoverOpacity
+            |> fromColor
+            |> Background.color
+        ]
+    , otherwise =
+        []
+    }
+
+
 
 {-------------------------------------------------------------------------------
 -- C H I P
 -------------------------------------------------------------------------------}
 
 
-{-| Implementation Detail:
+{-| Technical Remark:
 
   - There seams to be a bug, where in the mouseOver effects are now visible.
     This might have something to do with .
@@ -747,7 +809,7 @@ buttonRow =
     }
 
 
-{-| Implementation Detail:
+{-| Technical Remark:
 
 This is a simplification of the [Material Design Card
 ](https://material.io/components/cards) and might get replaced at a later date.
@@ -849,17 +911,18 @@ alertDialog palette =
 -------------------------------------------------------------------------------}
 
 
-icon : String -> List (Svg Never) -> Element Never
-icon size =
+icon : String -> Int -> List (Svg Never) -> Element Never
+icon string size =
     Svg.svg
-        [ Svg.Attributes.height "24"
+        [ Svg.Attributes.height <| String.fromInt size
         , Svg.Attributes.stroke "currentColor"
         , Svg.Attributes.fill "currentColor"
-        , Svg.Attributes.strokeLinecap "round"
-        , Svg.Attributes.strokeLinejoin "round"
-        , Svg.Attributes.strokeWidth "2"
-        , Svg.Attributes.viewBox size
-        , Svg.Attributes.width "24"
+
+        --, Svg.Attributes.strokeLinecap "round"
+        --, Svg.Attributes.strokeLinejoin "round"
+        --, Svg.Attributes.strokeWidth "2"
+        , Svg.Attributes.viewBox string
+        , Svg.Attributes.width <| String.fromInt size
         ]
         >> Element.html
         >> Element.el []
@@ -867,20 +930,20 @@ icon size =
 
 expand_less : Element Never
 expand_less =
-    icon "0 0 48 48" [ Svg.path [ Svg.Attributes.d "M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z" ] [] ]
+    icon "0 0 48 48" 24 [ Svg.path [ Svg.Attributes.d "M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z" ] [] ]
 
 
 expand_more : Element Never
 expand_more =
-    icon "0 0 48 48" [ Svg.path [ Svg.Attributes.d "M33.17 17.17L24 26.34l-9.17-9.17L12 20l12 12 12-12z" ] [] ]
+    icon "0 0 48 48" 24 [ Svg.path [ Svg.Attributes.d "M33.17 17.17L24 26.34l-9.17-9.17L12 20l12 12 12-12z" ] [] ]
 
 
-{-| Implementation Details:
+{-| Technical Remarks:
 
   - The expansion panel is part of an [older version](https://material.io/archive/guidelines/components/expansion-panels.html) of the Material Design.
     The newer version is part of the List component.
     The styling is taken from the [new specification](https://material.io/components/lists#specs).
-  - The Icons are taken from [icidasset/elm-material-icons](https://dark.elm.dmy.fr/packages/icidasset/elm-material-icons/latest) but seem wrong.
+  - The Icons are taken from [danmarcab/material-icons](https://dark.elm.dmy.fr/packages/danmarcab/material-icons/latest/).
 
 -}
 expansionPanel : Palette -> ExpansionPanelStyle msg
@@ -923,7 +986,7 @@ expansionPanel palette =
 -------------------------------------------------------------------------------}
 
 
-{-| Implementation Detail:
+{-| Technical Remark:
 
   - The text color of the button was not given in the specification. This implementation
     adujsts the luminance of the color to fit the [w3 accessability standard](https://www.w3.org/TR/WCAG20/#Contrast)
@@ -971,7 +1034,7 @@ snackbar palette =
 -------------------------------------------------------------------------------}
 
 
-{-| Implementation Detail:
+{-| Technical Remark:
 
   - This is just a temporary implementation. It will soon be replaced with the official implementation.
 
@@ -981,27 +1044,111 @@ textInput palette =
     { chipButton = chip palette
     , chipsRow = [ Element.spacing 8 ]
     , containerRow =
-        [ Element.spacing 8
-        , Element.paddingXY 8 0
-        , Border.width 1
-        , Border.rounded 4
-        , palette.on.surface
-            |> scaleOpacity 0.14
-            |> fromColor
-            |> Border.color
-        , Element.focused
-            [ Border.shadow <| shadow 4
-            , palette.primary
-                |> fromColor
-                |> Border.color
-            ]
-        , Element.mouseOver [ Border.shadow <| shadow 2 ]
-        ]
+        (palette.surface
+            |> textAndBackground
+        )
+            ++ [ Element.spacing 8
+               , Element.paddingXY 8 0
+               , Border.width 1
+               , Border.rounded 4
+               , palette.on.surface
+                    |> scaleOpacity 0.14
+                    |> fromColor
+                    |> Border.color
+               , Element.focused
+                    [ Border.shadow <| shadow 4
+                    , palette.primary
+                        |> fromColor
+                        |> Border.color
+                    ]
+               , Element.mouseOver [ Border.shadow <| shadow 2 ]
+               ]
     , input =
-        [ Border.width 0
-        , Element.mouseOver []
-        , Element.focused []
+        (palette.surface
+            |> textAndBackground
+        )
+            ++ [ Border.width 0
+               , Element.mouseOver []
+               , Element.focused []
+               ]
+    }
+
+
+
+{-------------------------------------------------------------------------------
+-- T A B
+-------------------------------------------------------------------------------}
+
+
+tabButton : Palette -> ButtonStyle msg
+tabButton palette =
+    { container =
+        buttonFont
+            ++ [ Element.height <| Element.px 48
+               , Element.fill
+                    |> Element.maximum 360
+                    |> Element.minimum 90
+                    |> Element.width
+               , Element.paddingXY 12 16
+               , Font.color <| fromColor <| palette.primary
+               , Element.mouseDown
+                    [ palette.primary
+                        |> scaleOpacity buttonPressedOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               , Element.focused
+                    [ palette.primary
+                        |> scaleOpacity buttonFocusOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               , Element.mouseOver
+                    [ palette.primary
+                        |> scaleOpacity buttonHoverOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               ]
+    , labelRow =
+        [ Element.spacing <| 8
+        , Element.centerY
+        , Element.centerX
         ]
+    , text = []
+    , ifDisabled =
+        (baseButton palette |> .ifDisabled)
+            ++ [ gray
+                    |> fromColor
+                    |> Font.color
+               , Element.mouseDown []
+               , Element.mouseOver []
+               , Element.focused []
+               ]
+    , ifActive =
+        [ Element.height <| Element.px 48
+        , Border.widthEach
+            { bottom = 2
+            , left = 0
+            , right = 0
+            , top = 0
+            }
+        ]
+    , otherwise =
+        []
+    }
+
+
+{-| -}
+tab : Palette -> TabStyle msg
+tab palette =
+    { button = tabButton palette
+    , optionRow =
+        [ Element.spaceEvenly
+        , Border.shadow <| shadow 4
+        ]
+    , containerColumn = [ Element.spacing 8 ]
+    , content = [ Element.width <| Element.fill ]
     }
 
 
@@ -1010,3 +1157,203 @@ textInput palette =
 -- L A Y O U T
 -------------------------------------------------------------------------------}
 
+
+more_vert : Element Never
+more_vert =
+    icon "0 0 48 48" 24 [ Svg.path [ Svg.Attributes.d "M24 16c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 4c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z" ] [] ]
+
+
+search : Element Never
+search =
+    icon "0 0 48 48" 24 [ Svg.path [ Svg.Attributes.d "M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z" ] [] ]
+
+
+menu : Element Never
+menu =
+    icon "0 0 48 48" 24 [ Svg.path [ Svg.Attributes.d "M6 36h36v-4H6v4zm0-10h36v-4H6v4zm0-14v4h36v-4H6z" ] [] ]
+
+
+menuTabButton : Palette -> ButtonStyle msg
+menuTabButton palette =
+    { container =
+        buttonFont
+            ++ [ Element.height <| Element.px 56
+               , Element.fill
+                    |> Element.maximum 360
+                    |> Element.minimum 90
+                    |> Element.width
+               , Element.paddingXY 12 16
+               , palette.primary
+                    |> accessibleTextColor
+                    |> fromColor
+                    |> Font.color
+               , Element.alignBottom
+               , Element.mouseDown
+                    [ palette.primary
+                        |> scaleOpacity buttonPressedOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               , Element.focused
+                    [ palette.primary
+                        |> scaleOpacity buttonFocusOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               , Element.mouseOver
+                    [ palette.primary
+                        |> scaleOpacity buttonHoverOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               ]
+    , labelRow =
+        [ Element.spacing <| 8
+        , Element.centerY
+        , Element.centerX
+        ]
+    , text = []
+    , ifDisabled =
+        (baseButton palette |> .ifDisabled)
+            ++ [ gray
+                    |> fromColor
+                    |> Font.color
+               , Element.mouseDown []
+               , Element.mouseOver []
+               , Element.focused []
+               ]
+    , ifActive =
+        [ Border.widthEach
+            { bottom = 2
+            , left = 0
+            , right = 0
+            , top = 0
+            }
+        ]
+    , otherwise =
+        []
+    }
+
+
+drawerButton : Palette -> ButtonStyle msg
+drawerButton palette =
+    { container =
+        [ Font.size 14
+        , Font.semiBold
+        , Font.letterSpacing 0.25
+        , Element.height <| Element.px 36
+        , Element.width <| Element.fill
+        , Element.paddingXY 8 8
+        , Border.rounded <| 4
+        , palette.surface
+            |> accessibleTextColor
+            |> fromColor
+            |> Font.color
+        , Element.mouseDown
+            [ palette.primary
+                |> scaleOpacity buttonPressedOpacity
+                |> fromColor
+                |> Background.color
+            ]
+        , Element.focused
+            [ palette.primary
+                |> scaleOpacity buttonFocusOpacity
+                |> fromColor
+                |> Background.color
+            ]
+        , Element.mouseOver
+            [ palette.primary
+                |> scaleOpacity buttonHoverOpacity
+                |> fromColor
+                |> Background.color
+            ]
+        ]
+    , labelRow = baseButton palette |> .labelRow
+    , text = baseButton palette |> .text
+    , ifDisabled =
+        (baseButton palette |> .ifDisabled)
+            ++ [ gray
+                    |> fromColor
+                    |> Font.color
+               , Element.mouseDown []
+               , Element.mouseOver []
+               , Element.focused []
+               ]
+    , ifActive =
+        [ palette.primary
+            |> scaleOpacity buttonHoverOpacity
+            |> fromColor
+            |> Background.color
+        , palette.primary
+            |> fromColor
+            |> Font.color
+        ]
+    , otherwise =
+        []
+    }
+
+
+{-| Technical Remark:
+
+  - Due to [a bug in Elm-Ui](https://github.com/mdgriffith/elm-ui/issues/47) the menu button still behave wierd.
+    I've not found a workaround for it.
+  - The Icons are taken from [danmarcab/material-icons](https://dark.elm.dmy.fr/packages/danmarcab/material-icons/latest/).
+  - The drawer button as not taken from the specification (This will been to be added later)
+
+-}
+layout : Palette -> String -> LayoutStyle msg
+layout palette string =
+    { container =
+        (palette.background |> textAndBackground)
+            ++ [ Font.family
+                    [ Font.typeface "Roboto"
+                    , Font.sansSerif
+                    ]
+               , Font.size 16
+               , Font.letterSpacing 0.5
+               ]
+    , snackbar = snackbar palette
+    , layout = Element.layout
+    , header =
+        (palette.primary
+            |> textAndBackground
+        )
+            ++ [ Element.height <| Element.px 56
+               , Element.padding 16
+               , Element.width <| Element.minimum 360 <| Element.fill
+               ]
+    , menuButton = iconButton palette
+    , sheetButton = drawerButton palette
+    , menuTabButton = menuTabButton palette
+    , sheet =
+        (palette.surface |> textAndBackground)
+            ++ [ Element.width <| Element.maximum 360 <| Element.fill
+               , Element.padding 8
+               , Element.spacing 8
+               ]
+    , menuIcon = menu
+    , moreVerticalIcon = more_vert
+    , spacing = 8
+    , title = h6 ++ [ Element.paddingXY 8 0 ]
+    , searchIcon = search
+    , search =
+        (palette.surface |> textAndBackground)
+            ++ [ Element.spacing 8
+               , Element.paddingXY 8 8
+               , Element.height <| Element.px 32
+               , Border.width 1
+               , Border.rounded 4
+               , palette.on.surface
+                    |> scaleOpacity 0.14
+                    |> fromColor
+                    |> Border.color
+               , Element.focused
+                    [ Border.shadow <| shadow 4
+                    ]
+               , Element.mouseOver [ Border.shadow <| shadow 2 ]
+               , Element.width <| Element.maximum 360 <| Element.fill
+               , Element.alignRight
+               ]
+    , searchFill =
+        palette.surface |> textAndBackground
+    }

From bb3ae50376b8b9b8c98ab46d8c3e34f5c6cce194 Mon Sep 17 00:00:00 2001
From: Unknown 
Date: Mon, 25 May 2020 07:40:46 +0200
Subject: [PATCH 12/14] Added images for doc, starting with doc

---
 docs/assets/button.png              | Bin 0 -> 2639 bytes
 docs/assets/dialog.png              | Bin 0 -> 4753 bytes
 docs/assets/expansionPanel.png      | Bin 0 -> 2704 bytes
 docs/assets/list.png                | Bin 0 -> 2095 bytes
 docs/assets/material-style.png      | Bin 0 -> 17218 bytes
 docs/assets/modal.png               | Bin 0 -> 4426 bytes
 docs/assets/multiSelect.png         | Bin 0 -> 2429 bytes
 docs/assets/select.png              | Bin 0 -> 2141 bytes
 docs/assets/snackbar.png            | Bin 0 -> 6274 bytes
 docs/assets/sortTable.png           | Bin 0 -> 6221 bytes
 docs/assets/tab.png                 | Bin 0 -> 2538 bytes
 docs/assets/template-style.png      | Bin 0 -> 22214 bytes
 docs/assets/textInput.png           | Bin 0 -> 2804 bytes
 docs/select.png                     | Bin 933 -> 0 bytes
 elm.json                            |   8 +-
 example/elm.json                    |   4 +-
 example/src/Data/Example.elm        | 210 +++++++++-----
 example/src/Data/Section.elm        |   2 -
 example/src/Data/Style.elm          |  32 +--
 example/src/Data/Style/Material.elm |   5 +-
 example/src/Data/Theme.elm          |   1 +
 example/src/Example/Dialog.elm      |   4 +-
 example/src/Main.elm                | 412 +++++++++++++++-------------
 src/Widget/Layout.elm               |   3 +-
 src/Widget/ScrollingNav.elm         |  58 +++-
 src/Widget/Snackbar.elm             |   7 +-
 src/Widget/Style.elm                |  31 +++
 src/Widget/Style/Material.elm       |   5 +-
 src/Widget/Style/Template.elm       |   3 +
 29 files changed, 490 insertions(+), 295 deletions(-)
 create mode 100644 docs/assets/button.png
 create mode 100644 docs/assets/dialog.png
 create mode 100644 docs/assets/expansionPanel.png
 create mode 100644 docs/assets/list.png
 create mode 100644 docs/assets/material-style.png
 create mode 100644 docs/assets/modal.png
 create mode 100644 docs/assets/multiSelect.png
 create mode 100644 docs/assets/select.png
 create mode 100644 docs/assets/snackbar.png
 create mode 100644 docs/assets/sortTable.png
 create mode 100644 docs/assets/tab.png
 create mode 100644 docs/assets/template-style.png
 create mode 100644 docs/assets/textInput.png
 delete mode 100644 docs/select.png

diff --git a/docs/assets/button.png b/docs/assets/button.png
new file mode 100644
index 0000000000000000000000000000000000000000..0c468e3ef2eec32764101323a319d964109af767
GIT binary patch
literal 2639
zcmb7Fdpy)x8$T9>%GyOH+oam8RT?RYvb97~sE|uk%#h0z)fhiaQDd~NXbBr-6fw-W
zc0r6Gl&O?UVpwyjmuAZ4H_XInX3X!M_WkGm>;1g@e7@&-p7VXa=lpY?&vSl1?B%vX
z&r}Zpu)=-6i#GroOm%)*M^o*eDyF_w2MvO^n=`2CS^Y`9(TZ^LbOPZ1AIp@X+5l*R
z!ydk_Y90U->Z@M|fCE5Ts)Hp;odJgpYSI}1_04zy2mqx931#IBHsCCsa1KZD2mY=R
z)HM{qZ2%;DfU{pma6;idEuCF)_%jCxq0SHlUAS-opeVpK7q}OqoG9RE8H&il0{GO@
z=~GMKQ##WTI&jo7arAOAUSEs_^H{KO+CWS+n@RX_CSk+O#Z9v**0au`6z`~99I+64
zPH~J(0^}~#l^z>%mrZ()!!?Q%#ydwl5J-xJ7$01
zBcTJB4(6}Ae9ZEgz2POzIV>$a`I#E>nHD=oC(JX5^Bn;00P{oV;GuI1taR^cGOmjZ
zy2uV)=?8jl9pjgH_t5Y|Gy=bYB%*nX7{|mlIPn9#xB)L~B_W-p403gGaWRF~mC?X&
zOqVgUWz4LF*2=%=tttu|$?Zl8IkM^jaoGS;EkNo=#bskiy%=GM5SA2S$&jHMim0{l
z>76e_MT%z+-gmUB`X0*rAIaY~$%oq%!Xj8$G(Xp>#)7D~P~4e|j24Oq%ESZJVoo(O
zRwf%`AtDwcWg#*ao6YX+?d|XH9~>MU9UbLzxqLofAP{tLkl`l^ez#okO3@`ndJtqt
zj0_t##D8aEB_b0e3K4>c5XDz&W@ct~c2**hNTt%bxjC8Iq{tkCATk-Ekg3DM
z!ors?UzAGa;^HELC{-$zy7;w`|A}Fjj@ha8x@Y$XsvB9q^Xt-J$5w=?NmQI`K%7tP
zsW>R~d^k888Wj_Vi3yKeYm2eL*c$#C`4oU9kKA3Hd=pMgQ-6buTv1OfjGXRYN@p41
zbs|At#eLZ@NqfDXmTo#r7HLq2b_)1SD><;x)I0Bqa%^rX(vV8McGI+ul}0rSJca&g(N@6&-h`BJ(OOGoh;w
zi_58a&$#FApIOnBRlILI^T%b(d;bX6a+qcqqv!8%MV;K0kNDD3-QCG?nY#H18iJfZ
z|6-D3+0xjUugTsMJ0diQzq$EMlVPe5Yp471E{|uS#q2iaH4Q|oSkPUA^2uPmsUDNZ
z%{gd)-E%EFk6nK?Yv+^APOcW@@FsE!g6YZ>DDN2`zSicT)iI9~*j`G(tTtr!)ZR4|8zZopO
zNF6%fk=<;>xJW1Vz>d!bskz_gpDFzSViec-WgL27<5~Tl7rCbw|u!9FW?sT
z3-n&icsG;(9~Mw|dB!WL*^lK`Y(cqBo=CqtpDQs)u7*M(lOUlR;mPxG8)arOm!WfI
zl>zF5g
zwT3a5FWK={Euq3JhoD7myZm`-TFpl#i^}gf^#nNyw8ir&Ftbe$i`9&&t!zf2kh>Pwd%Y
zWiOf0&Ocxf46Qg%)BVZT?-oFZv9|^LDr3LLz&~M4-W_{ou2aR_>fqzG3X9cL7kQapJ({MB_|h1&XzV);jFb81G-MWqjMg`cJ{9
zQ+--nBT{dNL4Vb0KlWke*^c%2R#9P|=ccD2WjW1Hnm6T|C!R|*-`YBA3%~OC0eU!=
zrWNQL(&Tdo17iix)9(2xRfI!4&%&$iFX{Rd-%Qr{3M&ug-n2gW9^Bnk-TrtJIc3tR
zHn-33v~%#9_FHFO+g38-Wzh*ojx1CgcTsHFn|^?W+wmuJV&{jCZ}ln1X05G&Ki{JFNrE{Zpf=^ymi*+0jw{oSMl^0G>^nZy
z_%{J*B`wN&PJ_D57W%7^O$bB)zp&yE6#S&kK?)Hex%ICd%aUU>r4Zb8yb
zih!zh8ZMbG4jfZP#x6V#TsMivBuA`LH$Tyig9%g?AOS6<4I@d=4UN-qSey?bGRm`F
zP!VVv%@4~%YYy|Cl~AY8OfI?wks@-tF{_xn>Np?VhPf;4n{bg&;Ex^u6D3?5TY8P^
Z+wrQ2wld#`Klz3;v56>4InCvZUg
z00002`nPYI0RT@8w;kRO;*R8W89H-6JZLk$8$e;l2`0D0>!xj}4FJWFzpYpy~XQ5-o
zV1lZ&*zX}l+63(i$uIW8e<>`TQbPWSPSyDi(X^IFLQaQw^Mx0+kiJTtejpcSw(&Dq(;E--dLz~N{$gHzctW^EDd
z(YnBO$*X>gD@^mMgTSKx@$A<<`tM!z1~(VK>D285Omwfvmd$;77DGP=gr84|wecOl
zU=IU;8GW#skSRI#dX4w1R~5FT3L8F0>YDuUiM
zFC;9~Fn1*ux%RTU_1Hty2I(l8Akt1AAZWg
zC)pQq73)5+w#MOjwTzgoSiOS;AJDU+?aU{Wn0+Y;h2t&x`iy&(v3zP>JKYUhc_i>;
z)2ckq9_n$8s9;Btz=2l1zGw-d9tXJl#UMdqv(sVBz5+DoR{YzU@d=@x=j$WR#*YH?
z(vFr6A?}pxe-=j1evFhuC(fkq#v!ij`%iov@hne5g5LQ&qYm%xWH^j61=KM1E=w=&
zxaYAic^>4b!9~~dmL@Z8@$lK|DTe)sK~8LDd*2hy**S&6$z_^id?$0TgPA7KzuQ@G
z{2{|`#Wh7(=z4bM1=r%nXGkl$b-4(-bgQ~>w%*}cw|`}TY};4r=vg$3-bCt{%}vM5hJk2i8r$+1eq7E`DM9;@{rLyFw_*EAXlZ
zaHy>Zk3HOmn|U0w8_41j#r)u0rDbh
zkD_tgnRt4+`C}`Gg9L7fePyU8nic~mhSU{ja#@>#F{HZ@YM$);jT_r^LHsofk=_)O
z$Q?~r%|<9M3goxJU4uWOlt2uC8Sc(!tme73323ZN(e<<$RlbIhW=@AO;lb3mqJ?%D
zp%L=JA;wgU6mVBU7gD46hH3v8rIg=lWVm#zVz&(UElxFxXtcZ0vs3^^vHZW?dc?YL
zAJ6_<;}XqvVaZ
z?|XyhUvMg-*2)L8uBK65U9L>X=MC;+A4QiY?TQ4HNhu^SHh2LyPFNL%vf53Z*)4rD
zo$40C|F+|*ha`-ew10;`^F{Wpr!#G|+l75-(nm7NT87j0-l{qUy47)4_?^f7?&5HYvYs
zOGeeVs0xvd@UFKYaB&4xZDZ(V*Hn@AaAb+9os6^*08Tnab#|{bfxZE3R8_)Sdc4vJ
zmv~C=xwhl|Ie{?TIx0svg~Sn=ZEBT#-pu31p6Mt&>ROP4{K1-ocPap@gL&Eu&Ki~Oib?TzT|2{*DuB-xYz?`
zQmFVaFOXYSMKD591tqAwUT+2+pxuaG@bPp4aL5oJb}Zi8qv&;Es5^E!A~|&O(^hrRUp%pEwOzfo
zrcg(RvTDM%hfTqQL9r>tnuqR3Y-q>YsQGEt0V?g^q6@j~5X
z19KQD(w}rkAe+#@z8?sAn&>EtW5E5h)^0MsZF8q^M?>mVkd{$eT1g5dxWHJIlPp^M
zVcwZ(-QK!%c#S-O{=R{~tWkp8C&kA@I3r9p`;nc^e)z{@g%kCrfMbLS?LMDB323N&
zOIU4{I_#}^h^GE;J#YVP<4+$*42^n1fl2AHj^~iSvJj2-VxQT+d~13_>_znccIz(I
zZ(~@3CRj1~(PLvuCV80D)U{H{dcr*w0sNO52UVJf#V=T}m&->VeLZAv0?iwfb2S$h
zLO(@Hg2VXVoF$vm(%GaXM4}UXcvj6^>b+89i?+($Ge;l5C5a@zJSQh5F|<|vSQu2%X)RcM+k97zlV7n|9Bz2UZJi=l-8L36JCa*T>0UnW;3N2J
zJM|#pIr4yg+5_{Ij=<+NqF$WnJcebfylW-A=;iIr341x1bW67D4L$^%=6v2?BnG^k
zxjkWkCDw^RRx6kD&J~|STae*0cX}^EzRLJpwi7@Q+sCfk%
z$JVyh;f$S0UKI(UsFkFApsx6`Mkh8{=QRe#sv#TeZKILv!{@M+f#nw#JANRr%5T&a
z#2*)_pD*7LOEBOZiurJpv{+n{c`1&x*kdOvbDL=sHGXTetS9a1cJim=Hev46kC!XF
z1LCfB)HT}p7F#QRM+RuDr=?8G?N%N&&RE|stR5T3l*K(NF4cKkU}ON1z(QhBLU`Y4
zzPu|TM#|-}LpcHOPSb6>K793h0;$`mt~os3S%cshnr+568XmbDmKaWNUmdsdyvoX`
zDHzW3Q)M@+1U#s#vC}NHH5cwpTRX73aB!VG6goFNB3t!NM{Y+KRNAXA=h{(_;30>2
z_T!L>`;|;sP1qfaYZgS|OB7K~S!2NO&Yx-!Kho>2#tq&laI
zR~H^JofIQ%e|*|_*~N#rl{&n>lCf<~nmNW}GksH}H*NL9OqlFnkA=S{pM9S@Tw+l?
zZZuJWd1{Pj_HSc+U&?q+kC4o`8=Z&!{tPW?221EG
z=e8pECA){<8+pqPTp>JwhtqMY(b^*0`ComH&&v%nv^6IOb
zV3Dw@u^Czi*AVe1Ak_(c9hHsbO~4SMu`90iSfV896zO&{{n*?%mQVtkkj6j#-Z=-X7y(1
zems*IUCfjb{DsQfHM~64sm@u}AF^R8Dytn!4>#AlDiOy2w#uzDb*Bw6e>3X-(CIU=
z-ZOs^bs#*dXN4-7Bc*m%G`!OX%RlXRdGk`aJ&Q~B(V;^umS-%{S3$W$C(+dm3J6>a
z+VXKD&J)L(r^jNuXDW%;_wWK+TeGB0wK8;+H`k~+^#2ep?Lj5N6cb!YY2Ls&7U@A-
zt6=|1#^B>30*bQuwZ8CZ=BUE-7Bw!aaAR@#J-!{~G9_g1
zuhc8NoKO)m+E9hNHvCmIkoCt9W80-%dWf?*kMK)Q6b<7qHPVH+{5WlG38mO|ujxYY
zONA4oVp1^L%5}~W$#fszbunjXKfHl>vY
zi+}Lht_^xJPvhge(E=3;B*ti|gEohZ*t7@dpUf%5phw>;3A~k9-Ij>8>lU!kC{|?sN2LJ)6P{gcLzV{Vojyf%aN`n%Kbs*
zF|2~q?}aYPO=@?vo=f1AG4!VR?Dtm5M&1u!x;TN%@yLjL(MqM|CK$oai>QE6sh_5i
z!#_4M;ACV!ZfVR#73>=IN$-k&Wc@Q|hdrb_WQ@AKk!?rY7^Z{$w`-MMlg~j?tZBJX
zyxN~z@+qG?AA4N9Fxg14KYM2_w5sEZVD(;Tr7^j=gwucKNNG~SFpjeD6-C06Q(
zJMTMBtkclYKvaZ=>)krXbxN|8*PL5L=ryR>EDbtT9QXbO_3_epD2Epyzt?W&N`sCR
zjV&R7ma|WSD+oLW3L)*hN;O%IJ&-!b{vtwxA|n2&emYY+n0~r1+E>3Z>uz;xzCVP=
zvERL$#?31?xym4u08A$A<^Lc8VlUz6cYN}*pWwzz5m01Y{!d;WraEF5in
zEe-%Ay8b)@z3AtG{NzvZ)}HaMXjDAbKQ;)6_79DU*NzH`KW?C{r)?l@9?}f}A_8`o
zEZh=qtj=_XPc5mujoF8I9fWBAKG#SM5Id&5?jyzr&k{tcT-6tj_}pHSa?rS3)gx1c
zlouIvS{4)PSa_=}G8mn!=u&dRNfIJPdul1lyV$5~mlODo*Al5T^^eZS_JP+L%F3Hn
zxa&K`j2%vySt@UL*UHk`^?aq||bO}a8OCp@;
zg>r+{)zz_7fm#0Ud;!k?uN&TTgUz_vQfPEWx64)VY)8R{WGBU2b~k&y-}
z)YSl6X9pm+90ZPA^9h-MMOcPqPBiKt_z~t&*I8dgG5@GVUb4AalgQoq{Gxz$9mjd9
z7iV>G^~8awBh)=ylk0%_Sd?kf>JxLlhU4msJH-?vk%4N!RgRYl$ViKRz9%ypwQLQh
z*Mr5fTVMJZZ=jNm>}M0~7v-R*)F>47RUL#}gQW`gW|wZFlL(Xhuq6NbG=kR7;DgoQ
zCi6MPuN(6)`L$TY6m*{HnHC&$wtr#|L->w%G$RTY(>$~}9uo=|M@%IS
zFX4uBeyFR-bsKyIZIs5ZM53L+;gkhreV^=#pLMcMi9skr8<)>4Z(OK8dj@k(=VL_e
zu3x||Wa4yWKxFlglZEYn7?L0vs4$6h=q#(c*`SweMlPzJnzalSt1-l?OC2Fw6V=>E
zP%%)s>4o_Wb@nz&_jwZX3!D3`X_H)G;RPLgXl$>iN3Xi(z#4zA$ks>;=*hbBv0pV6
z#}L8R2j)GDC$rx)kJd8VkDdID;dXn*WaLpyF-_(hWm_kKP`sdDm(zoKX{KOfk{|b}
z-7(`)FwJO6+D4bU?7F7fV@L$y0mkZJQEk|2er+`GZ86r@Fru>`(Nc8wofJW`ptmMz
zLwDaQ<`xoZv6qXiQk<-ua^z-vdJE#iQ95`|Bxa}L+nWXZIv?@s2t}Q};Op!O!~HQc
z(rjZ0O|@7HF?HeQ`fla;wB%W3=8#1JLdE#EOLwToU3uWaI7^=wB@$!sWYJ-y*M5^?
zArpof45xmQno7WGP~(&2X=$9|cb&ucnooo;U`ZpHgr=Gb+jvcm9SM(Ot(Bbla{U)0rbmd#EB>uy!2=XUizQZzZ_8x`V1diQJW
z&Oj8WNDE&UCpJL*W`pUv=?tRs6?tw379cWoRPDlr^UurTADBAp;i1(ryh&kSUhJFo
z^{25TQ5PMj`O?YAjJBUCKz1KFxD~ieJ+Eb*%*doSAy@qJnnD*72a?;2R!`%^jrvPJ
z8NHn!H?ojOHz8+XxKwyTmve&bDF&nZ)c##~g7Q|ce3Lh++QYaGSs4*{`-I3)1J7ui
zAaxqT?~6k#NQu;jgp#aOP%gFa?I
z0G+%t(tReTDOiXiSesE>KsVP*gBje{k$7%=G-V_uK<~ceU5D>EZP+t!TVJfP(J9*o
zO5kO)3Q!dStB48D!&+4)iatn;P-gnQdr_L6Dw)V3bWYW-jtQj_#?L@@Zmj);g~M~x
z);Ax$cE9+C{JYYu<3iWIsR{|=(0Mqj5e&u?SX&
z1_}wXqbABbjuuJTq85}w1yvZh{`Nol-Cr8we-NVDK^obi
zDCKpHamumaF|O8
zmPBOAkD9z4^3Y~k0-`I+%gZw)?D+UN8=L0!T-gP>M6X6-G6~s50TQu{f>(5O>&+mx
zu%?lFmkVKgX&4{&S|O{7?XKk}Nsz6A&`dQJgHEYjtx)`(cEw}=u%7@yMp;>zsM%8v
znRj^x3R71QGk!L|GT{1ndq7jky{k~iHz_8C%YGeJS&mzOd_MVmL{Y2T;&ZS|U9En1
zAfzLSwY;>{$4O-KvzQ0MpQ`x;8*Y
zMyZxvC{L&{WHgz1$VpF->jwB?pehob8%O4+5O~?3>MU8B4dgi}c^+1pLl~%GYfH)6
z3aYs&gI6l&$;><%%vC_4${^I3`9n}R3ME?DE#P&FiU&mbS{cuvD26f~ROA}E_=c`3
zIK+pe5|v7&R;x7{jZ~(UKG90GPzs?O!T|`iPo&V$4gUg$hljNg8qClD5!1qH#2d!O
z#>U6TO(v6h8k!NMM&`TBZWpXw3I{jiZjSsBH(
zV{+_^bX;|5$?f5GFPAMe?{XqL*?4#B1M?%2ONJ>VZRE0Tg*eqwyG3N^f2}
zmnIsj*?39UkSKc#q*O9JmOa(g-3&fPuDOcN?9Uut_&12Mb7%w
zTD@YQzR{sr^1MScl)l+rKP&iwK%8Ki+u4DVyAr=1=8E6zGZ^-2c+jHUhW2KP{eRV9
zGJo<}c^v!HMowz~h$r1d3oQ`1Ujdi4POO_bcS*jRFj(kz*^+-we6YEkK$8&f8_3s_Z{
zvx+q2jalNx+3~4SLc`QotfF(T{2F~|F9%O|P>CGjs?Yz1x;NPziPt`~JdHU2xS1A+
zKdpcFVf?L3s>rJk$H}_zYB;WQBo^8C_bPu>qU_ZF^4^V{!6--7{+@rR4uvVc*PXT5
zubijmUR+G~HYZRkbJg4-_I0nWZ@+)Qt?iteyy)?veQiI9`lDKVS
zp46$0OB=1*fLE56Kj3yqf|4_1_FvI`!>-p2_LX$UX$Sji5@kX7A5IXhPOchYXA8$Yc*ur5Mpx5;Bkgf7NjW%HS?p{8%@3Jyv03}Jng
zf(uXNM|tR<6STEcE22c_0_E^bL7|HD{9l_B;mlW8(Ng#Df?fEWhCb2+FSlvad%IFM
z>I#*D&8%44viz5a=I6G;IA
I!r|;c08#^ksQ>@~

literal 0
HcmV?d00001

diff --git a/docs/assets/material-style.png b/docs/assets/material-style.png
new file mode 100644
index 0000000000000000000000000000000000000000..d83a905671304db536a15a6740bcf61d605373ed
GIT binary patch
literal 17218
zcmch9cT`i|wr{L_qM(3)fQTYZiqwFBfYMtC5L!Tb4^6ssKb793H|ZD%RR~483er2F
zmq>@uq)LF0xAC0s-Fxmm=f3mCc;o%S*kiBkz4j_|{$}~jMX0)(0vRbiDF_52Q&N=G
z1c5Frod5lC5opPz{^0~%F1TtcNP|lI?ydnhm#v>eo`XQ;(brE+uK@SgUMj*}K_K#$
z^S=x2P6ZY~;~h6SJvW$>m7AxjizVo#sjZ{iV@FH3`$CWT9}7`EvuOo^q|r*U&$V6|
zZKnH07%us(5Oiybcp$9-2|BDpj<>T(MMH$2Kc`TC&v@-J3n`CnVAep}pYQWn1Ri5L
zjKp1DDMg^=HIz(SSlE!)EF2PJcZUL5$Q^~%BkupW81;Y=#^=xAV;@~EF_F*DkqK7EBC+F!fkn(4C~C9zT{TK~tJ`ypZ^NVY%T6!@4RfSbDiKQ~q(
zfz8b;Mb=x5n;#mFQ44wTtIyBBPu~V%qW5uI`Z|^&`IKMMYh#?BfGKy0&&04O&rimA
zlpT#51(L_+gbhNG{%fHv-X%iwKW00dn|+_!4$;o791Pd9$L0vjT+gvA@1ydFyw^yG
z{>66Sb8AK%p0kk6xIb!quY5h>(*coD!&bBTVflWGc}+%RjYfeG3aeF6%SLQ-RoH4W
zI}N(IvE%4|I?hOS;t6d+AJ`1#5#Fa0@qMA?HSE-4Hjq)lwBu3N!|Gc~?2Ok`XYAvX
z^?SO)OmY6#Hd76Ud5L>-B*eqlTXw+kEtN+Zv2d*G(r0%g>7hK7Ui1EssIh3tCIs_3
zSJr7J)<=<~!egkgcR1YMy~cSt@b@}N|HlWWuy`^c#Wgeo)c5MnHud>0DXe1
z`?WnU9yBSG3JR~m(DLK^>
zN;SR9U-}w)kZnnFlZp5+Qyu8GGhHnfOmI80euPb)+O)7Kg4_D^!2IT7b
z$JJ-3Qf0VtEfLmb(XU!A2VAnzdj7eYK9c&1?kl6v>Bw(7UJXo{ruGFdQ@op2SYGK4
z_FZebANCFYeeWB_kD@01h;ODNjSUjBSVPD9kaJSVJz@DU>uIOGl(#7&-ROFZ+fWRL
zbDTPA%xzndx%8>7OlAK1l(?rCJgR=GWCfCg>eb0uD0%U+RFJ8IeM3~Tjc@grlg^gtsvofsEJEq!ze`l%xQUAFP96tvvzyc?
z=~%c#u@~Ol<|M&9cEYNo&yctkoNjR4O=i?Tj@HcM=XiK(-Z4TK)qC;#n1I53m
z+r{i-6(wdlo!Wfa!;UiMl4nTM+*&Z5q>H&PV{>50Lmj*=)j`COA1>((KSScw)dVdu
z@Af@O$Xz-arjedW9G8(Rd~YF4E#hm^?T^CnxM>=}%NS5s~sbO~4-&
z_BC^Ft|^Q)pJ-&-;MjB-i|h+ZXlr3z5C?k7(9l$Hm7I~qET`>|56lN#mXays4m&x%
zEuVYv0C9&kAopmLtG(=C%OTEFq-m7r-SO#i;K?bJBu?+-BcbrU5bDmPg37?*XvJaK
zukBZaqf-Z0hk!rOcvK4`(LW=2qqw9p2Mpo5>I!8XF;9jRW73%$xcVzoz1o)`@nyNm
z&atyyCrYV{B%D1PS*Vc~E$DV*W|axfw}P+GST=`z4iFAM|FM1^hMUCUv72XQTlk~66MAqB@<8{wPCk~N&=hHJM1a)
zMmF1Qm&4L1)nmz;gp>}(B$3>eSLv%?TV*pae`>#6@+!(x>T%{-KIyFK0=7H|uh=J1
z8V$_~Lp3rnJw|190NWif-uyBD?Gn?(db2d9NF{aj<3?8T$dusChBOQB1KR;LwvmlN%SOiTv^L}+6f>PyjRo*FKCZSav*%2T8KFcd>1IJbdRftOBkumaVn
zf6u940@0V#iphw(m3BLWdoVv+SIyee?^Vu*lJf~thnw&-S%R>df~rdREm2~B(lD>(
zJ)9Hqdg!)S@0KGuEx@UHr6xc2mvO+Cs76dMOm^GGZCjz8^PoJ3!o&u_U$n+gFJ*?=qm
zpGjH+ZHb%|^?$2T%nG-&vr}a^X5=wp$#gsrysVmii8Vn~SU6Fe)6C3l{!fy7dd>cR
ziH^~mQ#ED!RfW9)q#o^2jC(8nHE6w0CSU)&L{jm_|3|v#EWVXp(lm}XTH;Vo=e>D<
zhD7GsetyZM5_@{3Y0Fj1QaHNJ<=qnKOY!gp7*tJ7a;KHbb)~O&Yx}O|VYL7LL+x(*
z56`0fkLH4jtI=nQ?kpkPHQIS&Q;zkUi*e9VRbi*u4@=du#%cQN4Ze7nw1&?+Z4A+O
zMPm~nD=F3)_(trBMA2a<)Zb;S)Uc}+0|Mt=LXHxAyB_6RhSwWR{=PSfj)*w)i
zR;gXh37_>p*({#8om{74<5?_G(M!yWQyXH>D87GdU2%QV*!l`cU1}11P*m3B-9~3U
zPR1)Ixj!J|bGT8?%=q-^$J?{<$;@|R!0Rk0OKDC`qC^nOR{eodk>_+V2!vCpMUN%cd}>Nf6UMHKc;Oy`VL7G{+>VU91=ob7+gFQ
z-)!W)_K`OL-+j28Ey>%sKg2{lYNw*2f=5#I*dWrzC#*9a+}*M)?sDav)^F9Vf4j~b
zVQt!M$FrYHa6E*bEkaLIV%dBERI92bty_96^D6#siv)JU=Njy$Oi>D%SGE7SWoM4+|
zzcc^cI>QS|y+$}&U?P4ty40BkdJCyX`V$Vuqz=oYCk!ooaGc@;oXF9V@q#Ev-ISf5
zb1gdPFx1Bd1E)r9GIYfkb}774dZ4x-rZ5Jz6vdwDJ0!&+8~yH(K
z{Ff4RmwVHas8^0w6{Pfc_~mvRqZThH`tHZvLAPRDwrHDv1{T|kjT!lD_N9xXz1yP*
zGgw0UQl>W!#oKgbmMBi}OlJ1yWo>$&$ZK3`i8&b2e%xTuHuO>DWNU%^nO&tFg6=1m
zF<#kYUDeb_d!}fTj8V*uqevv34njDbax!)sl!NO~O!i9rnsyzXia?H969EzC>E@ZA
z59jq?FR3XO(J(_m`fKXEv~CADi!H$aD9LcbEi_e7=o_5GwnY@bs1>k_^8rzMPETgG
zL8&8EOKJ^0XWZe>DPpSvWJBb2f)gLba#_k(GsC9@2!2cF3xn~#H}ay!F&#{D$9@uA
z^**L*ta~eCtz$A^hc+OaVfI%u#gg@bOFxRq_vhDQlfDnEDv9GF6|4hxrL}C`z2HY)
zYJ_g%v!R2+#ysVNuW(%LN`}vAXltQ%(KLOeDvz9Ud}0}6rR1~K5=BEock^jC+&bM7
zKbYspM7N?KbsW>^glb~@iGunmpA0K7`3WI@;a4(=KS-o(Ap1Jj^TWmR3JOxcYWofS
z@k{GtWyEOWQMAR>Y)C=(5lFUoA@?Rv)e-~nA@<`#9nH~rOmt~@;>>QY$U@ZF@p@Se
z)fkk~0GTazXh7z^gypW}En4+kYGZJ!ylWVqWb8kY;a)(+^9>ku5mZs^`8u7+kG0pR
zK*_q}{59#v4L_x^7sXkTql`y@)UP_8_E<|&WtO+GO$u7o!h{6eD__rQ_!HIv<%Rid
zQgi9(#Yi!nulwMPPUsKcO9iBlpVVZW7I|Lp=6;Yd({fYl#b8HdNPjq(D*!~v2TQZ;a=gsU)v1-+pGA*HczY9-2ipHMZr7-zpEdmu-{S+!is5}gf
zyhq*
zX^!*&JWr1yi2HYHU6xU`d!e|ieWdis`b?!&RT%5dVW^Zu5p97D?o_9g;*54P5E+%(
z-o4X*vaqm_>YFIe2p1(GR{p1TfEIL4N9yko!jd
zyCX;1=4DeS!?Wsa%Y9=8Zg_<(Z1;KYI)j9^pqV>$BZBB9h=;^s`w-fVW+NY3I*qm<{gL$F3bVZ}Z`x83ESO
z8m#}6E>z}-%GYmtu$>~nKfNJI>SP1$t%A;ZDn>CT_Qhm45w-9(@HELI{fKUQ+d{((
z2bj~;nf>!E+7DQGB#b)xAm;DFn?H@g8;5|IQzzf&?>|@=QsM38dgA5gI365&8cdn(
zx6bRo6JBg|W!`6Mcd0wzcsTQTDoA*22l9E?g{om=;~!WT;&EfAZ`yq|wu<1jC0tSER{q0(@UF<
z5#j?0BL^d~$Et27PWJ>$3-xXLYNlPn12QG>@mKi@Do^%hm)vNm|CZr%AMxnS%80N4OzE;pB6m3(PqXF4ecH`b
zeG!N0t%Nw=;rprjz;ZTKO${~D|1z6AE-|dviMq$YP!FKFVLbDMejQ3%fvEue{+(U4
z+d>T^3%%d*s88qsTB&tk
zWZUgeyY^2MPKKPNwS80A1ie)t@y{(dnUIQ1ynn*dObpFLrJrm!8+WOlZI!>butNpG
zzg|1dEqC0O$D&^5{Q%rN16=@zGXR4qZ!9CEg?KZZB{Jg%OPoqxFRkx8PC9BLY&u!j
zMuzScE1pJ}#oNmdMmDw2AJslNzD(8JOwk@`OipolIvMtEwxawXU(H>9YRwPJQr9!ZfF>Ap$kD}Cup9>b4hHxXG&-AV2JWY_kVdwl>8pkgvX
zqed*eIQ)^aKgC!FMjAHq4qb6qZ1@NoaHn%%Cw5H+ddeCs(Ok`(dn)%)JB)aE9Z+OC
z*!3Cwx%+y$h2HuY9dNpEyiwL)d(4+Mk`{HD6R#f^mw)#4mb;nU?zgd~Loin?UGvXC
z-f^ky6{doN2~j-FJByN=%Sa6+m}J=5$X&NRu3_tfx97eiv3Hsh#^BV1Umj~dI{=`e
zzqpWsw{A7(Tfn;7+oqr2u1}s7$q?s*BToQdcUdl%3Im^ZZfC>|U~jrTPBQdJk+Qe_
z^JqhwBZYdAgTHFv9oPXfDD!P}H
zokXmk*9K9vSQG7oF(sGCTFAF0l9WDnOLV*nX)!V{0cTP)DifMrH+Bw2UUnz)pc(Sh
zS;O+xV?2W1W(=01HkU(rZBDR;2VLmAu*Drtr0{}ntw>O7>?NgcqfgwKrN~U@h~9yW@75Sd?{o*&1UT
zTDY)hK!KwAbs-(?D5sul8d`n~Y8TreYwna9fwX{dx7SsDc#?Tk2T@b#-YT+Y)JKJs
z%)`Zf4*9
z>EqfpNm;*cSyM*GAt)F+yaly-5p1sNNGLQ#pNebfmWR~p_|;wK#^6{lHWsipyXZuo
zX>NiNM+z|E^{-Ia!NSLAE)#Gg75LYc@^W8#YHJRAHlxB>-zTOH4u2HEpLk26Z0#gd
zwJZJ@4b?_7Gd(^uk;_n3`zrp6nMvfqDEBrj#UH`^xE{O@3t0@uWJlV_%?8}<3oF)t
zaVxttR_^CL=ADLEYW0{*MVBZs^%Y?Q1`(ynavLE7E=CrypA2#aI_$M3JAnx=>@{2-
zj6^qI4y>x`GneAW{tUu1v#&M0dm^*W7iHJp*%Me3=Bf^c8|Xm@m7=X;OL{k}lfN0I
z9u`Kn%QsEQTN?^o;0nuM8;M7CZ(5gJY93I6%w0FztIWX(-d3_SmQa}t5l+dost^$S
zxuB@oD^^avfTAm;fwFt(X==Tx8FFqi3sbmdnm+tlBp1aNsLyuCTJ<~qsL!s@?Uq@sbMxBEqt?W9V=UhSxZxkjMFL16HFMV^oRJ3uO
zQMdLdJ(sQM=rm&aWURc|QA>(^Zd{Kubtk9oY$5zn--Bg_u3vXEs|7aoT7AVIf3SY&
zd-hGNoEk0O9wI2>_TrU7s616jzU|w|a#nLE=g)bH1sEEZJ~WDMQuXw5ql`*nXg^OM
zd_1IDS&2PH57MeeT2|Kkw0Q&fHAw@nKa%J0pj_K4GfE)8l;~5F2JDhzh|1#LnDgDo
z&64F>QV#Tp&oAeseI#@9Rt(}o!bo-Rt9=O>h82yotYLL?eXB3Yx2tZBhn;k@*0P-K
zR#Y9z>1s4+RnO}Pn$1j7SEL@NBwU#fIn?L()d9wRswef;m`s>;`$69W^0@*ncdbG(
zkK$@E8k~X>0kflJ-EJ$?ulRyyBotP$a73@Yq9ds3f(!&^NXPr0bxOot*eGl8h69`b
zo7rsEk=7NO74CUXR=M+urP6E36`IINXGdZS4LZ
zWh26+wPHK9-$lbepYPZrE3NoWr$Nlm!M$$BGMXjpHL8M8osko0NQv@sWzKkL-2u2K
ziETXebgG$P@Zz$aWoPUGMH3snv=onRbFH>O5hnTbMd!(&C<54gZ~uz!kQz3&iGB&q
z$TunA-XOuOuUvnR*@%*{{kqBZ&9VDyy=B3ydu8lJK+aY`nMI8|M~&VKRv<(6pnsX&
zX+b}5{Ap9Q{W9XQn>`tEA4(L;FqF>qV&jF2dluQ|w(2^-xZ-{Q+m+&0U=fOPzstVB
z*yhE?7#0i2V?+Ow53H6K);Z7R(b-L0O)<=jy;DzmL<L>qLG7SL|YOmnV&_Bp%)7GCUW$JZ4rHWsZtVlw|?r5*4-%+M1Rh8}pHjRx6R&grr
zBS6EtSNudqnBh^
z?pwt}w{k0AOL7W;4ye@Wk{Jt^rLGFz+?y)E@2@7?d#)Ck83Zy
z)@;vwc;8IJo>H8*m5oNBr~fPN4!`j@+{emgG{++2n)9UCXqK>-!HRE7o_}Im?jSI&
zNy9noY>QeHp?hY>VsFnL5mf%Br0^3Q|8(I)U}QmHMc$`1xWR~)Uv~|;L$wn7w=yUE
zT0v^_>k^E9=#${fnX&TR+rw;DjFUG;2DsW`pFUh3(Fz>*^8fr(4I?#SP=
zsW=-Pjws`JP5fKH1F?sNq9VVn4Gjr}@Lg-&YfB%iOSZX_qiR=@~IUQG0oop@6_CJQ({lQ>3
zqi@AswXhgK)M}!D>PW0Uc^qRta+;~S8@F3ia4L<8qP9H~I}C{EOq}ugl(En?bxoLF
z=JPCi3H``syMw>7Q*xj&3UWH
z8#`jl0qU__GczIG{!AWh`XJusHT+`Z!QBibd7n!RTWzm2*yC2
za!4c9;H^UzS$d)#9QLtI7h^1(WzQmfDRvXUBup5!0fx3N5BrsjZI;rAxqKZ-W>BRi
zuE8wgG?G1D3mH}{G+S_cJX$
zy!fmhskY_uFd&I^Ou0#jo_#jQLuVM18x7fNJ%W$B({p52##
z0rFLh>2IP7dh+)4=%WKUPmWnu3V__YZD$Deckq~Vb?SvQ`7=zsx$;Okr;z^P6J>u{
zaA(l9@!F7BiVIo!KDbkYJ%_Pq*O>FhaNaFDdF8)NOlveGwWZE|{RIhdZsuJ6+{S(Qn(Qi;mG?YZl{)Hh0+dk)2RhbXP8ORb-ro!04FsQ%mE!4-?zW
zDaI61I4d+Zp3r?SAIeiC^LruwP--H%(wu^XT9{S5>In(M$Ct9KjZF2vM$gUh2=?FG
zL{m567ER~TPVd2`--I1!4!BvAp!;cPJYl8=@81R4EGd2y6z)JZfBCMZx9h_U+n)a1
zAw2~$s_j;MfxaD*rb`zE>1@g=J=VEhj=(dED?Ai^X#9+z+B9>wtoT@qT^jEkFaMCU
zojxoNLjze<*na>DiX%^^M@a9Ejy#X8Apx!OC)Y&}W(bjLby_&hKH>v^*?5CGNwb{W
zkxLTd`P=OU5RM$+a|*^3i_Xr@;^#%Gs;bif$I$6U5{uhVb?!R-LU)nSa;)^u%}
zh*RIBkkVad{)1Go9XAu~(zE_mCm1`ugxl)C@xeM&bm=x1BOP5QY3gO*w~{*?u<(Zp
zQPZy$B6aHQCn~sW%1!t12uo24OGI#~pLe3<^9olf-=m*#P)RQ!B|2UoC?N!_yq%8k
zMX4)xO}4{Gfb-FZsEMuRL4D_`qMz=D9CsF81l_1cZ8sCoxNF#vvrT>{K+YETG7RMAkU~q_Ugkc(m>x0b0!~vNm1RjHK
z2ofA{veud_K#Ge;!C);x*GN=S(oxP3>|Se1_*z5Gov+~sNM_)TcvK__lkb4?0<9o@
zinoOYOD47$^=o5dZw(qSxtlfvGe>}uV=f3C06Sb#Ie-Da`L)!rp4%1BpK#;ToTVCb
zoJ=seVF2ME5xe1v06G;EP)AC7@2~FlOKnF-^oy>1044z+g!=DNbw6Fpi>r)IR9%{I
z3OJcMGhCKO`Y*;PU^dSPCnX&a!b-r|%A_*W(^mrxr$1Y6)*Q~mV1BwsYE&+2=@&p5PT=ks9Rp<2d5R8@|58kBvqr;q(@7dXUNZ|KpqzfD{IqqNh^4lQlo2w(Ah&gGt$T`CJ9-$%cbhBch_BA|kkr8eR<+
z=UlU)PgND>c|DPpsVX5VieEQw3eP2Z=*H*{c88#g#2HgG!lpkvFSNGGCW2LLE~W;t
zy)8DSS!0JWNqD=B1e$k}LHC_j5p6^xfgFe8(_~h}Yqs1+me*cq42vK~m)8ffWv=^+
zH%^6~kr_e^hrc;g9ezSLrA65Yq-rLDRz>~H5e`j<+t|!$oNRM&sqI{~_h63PgoZ=G
zT)fGvRR$Q7sEdVtgaXrBnmS}%#RQn#1o2u?D#aV1$223G#uTQS*WM)BZ$VDCBcP8VPvXAF!U>7E=rhnN{dlB>?4ir9MPQLeEg|Ta+mc
z9W#vBqDyX%71+FPs>~^flHV8bw!#tW*$-x?ql)>#JlbUn|j0;-5Ee
zwo9HE)ZZ3U*G%D+JlLo)jV+iQHtvhgn)jI0S4KSfnqq@BB)NW|~erdo%;x&Ioa@Cg3{eWZLiP3p>Oo
zWxU$PJ{WT5uJ}o+x3TI7NI_X6=1jcnrS!A~u!uAj`iv>gJp^W4}ti
z?Fe(^GM~BIG^Qp)Vo#{)c(AE^NpS{1)*TMTv4Mye@<;X7Ujn#N%ZGG2m-1MGLLHmJimUgP#95Jj-pQN
z`vVySxA+NZ^y?mE!g@>#3{@UKim&1<(2u2SQDp>M)2Q4|OrFfMGOIcc9egUdHvLVD
zVaZX{aflNc)vE#!Io9)*WABYeQ#%@;xcG^xt$
zWm@m;_L4bSBGnXw6cw#jDIl9Og~7>A;9ktN9mXOQuxEzDfdL@}L+!eZ0dFUMrss%s
zru<&#CKUC#S{#l=(R57;NgSK)3>!pC!`M%{fZfwb+EO3RblH{QfI+z71(O_}x`;eK
zn21<)s=IKNQ2Ksm^aw2zaYXL=xyS~6!(*_qSDIp3eWLeDb=ZX>IYNX`P0$8y#Xp2hk8W~UnAu}xq1x?AUJ
zcq?Vn>>3ego1U|Pq+wh4sO}H^{jENXY)K9Sa*GmJ912xPj}-tmoF)h};Y+YfS{Gnc
zXgZ*xg)})exfeie?Js`^9qG)JV{~()VC~2`%Js@40c_oAZQThNE@b=PIA?`3=nLSg
z{SAb`Blqa&CO$ixCl*`)a@X;!Aa6AQ)9mdxR&F-#Ob}bEy>Cg6Y3Rbn01KR(n>*Rk
z6^(8}k6socgUG|WDuBna$;YdMxhKE2$7Xf|0*<o+q3jB|
z(hSW(HqWrh`Zjy+KYu)*nVtM`dOX(b4>-@5OZ&8Sh&qqDH+4~Usgc4M(5=D7IL0bj
zD5Rt}$Wo_lzlIWqut5K?VZ=_x+CWKlO6|oyK&y
zFc<{Vda!4u@+luE>=OI;1A%|@$=Bw@A>}`1*0~$I&;|pWn$C0zzcSEq-9AsaIjY
z?g0J}YMd%Akpfn-`^=mt$VWrDCki3H1
z=F6vK@2_vJ{0;$NqSTg+UVF>Hp4X+uv3z+sL;>SX5wHFkFA?^U>0Wn5)&&^^;+p4d
zgV%A&M+P96+O2fLxvP--p83^dC%mk;39^Jp=gic7I|
zs9f3oy~N`bL4|Y{rJ~}<+Uk`=x?gLF&5ko-ya#L`f?66-ep%*2^zj(|Gq$U8F(O`Z
zl+$erBlW`V{v%C}VQ(7Y3zo-s`3`y(AtiSwL{)@@tD@o{Zl*)j#g~$*QYKIMyM1I{
zHz6UgvZhy=vWcunbr--7sAyG9wm1+}$?R~})#0y-+wSGJEaJk_Uq`(-Ft?Iyhipoi
z<5FUtIp{JtH-;rbO4Q6`(C9{zR`YDJLOPNwtHzW32g~fyJ`gGN{_Vh&$c}n&=UO4k
zK_>m_)+e>t8qy^Wdv#R_!BA-6WlnhgO9MgoY+pZa!77nf44-19IpUG3500BceVL3Y
zxq8s?oh^Up>e5z9-N4K@`5q@66Vb}*CGffzjD6O=9n)k7=*f*sJZX~wG07hQ-HMO3GyKOdZ#+8Ojoye9v`@?yu5t=?zhBfu0o~URtJY
z#yovCh&`8m6gYItW4BQ>5ZOmO8*rI_IfzkCou*E%i)cVmfxGj8n!Fd>g~^k#TgHs9
zYLe-%CeyTP?05!g7p55O%^B#=xkP9bELcH!NX4Ub*^!5yJ-AVrg1;2)vud0yRTe=E77?>riH(HbKsoWyH57ZQu<`
z&TAzU6*$rkD3G}Rt#)(IySgI|D;w$jS`I)hwPmjf>ACITBdzjKozS92hpi-2-$Y%l0p21yCU)`G-Njg!F&X>yD0&
zwnzr_Wj8vWDw?M%TELq(#LuyNsq_9uaeY{#Zg}xIF2K)W;N^?a$yFuh@GLtUuc{6n
z8~uMPi}ByV>vhyukS*?35zB!8*`jr?J3bMf_r0)u=Chsv`{m9qK;+!}Pi
zeAA!T%Xth7=CBS)Tb_dxX!S<;k#SSu;5TX0^PA*4X5a%>WU7V~z|-if$WkCp`x<@;
zrVE7kUyA=kalJuZFd6-Vp{DbN@dB~0+9g1jOrMrtD$8P(~fDD#$K1Ywt+c
zE?L@ZX_CaaOdtxZM|lEgcmmFReeO{9ezxkRU-}&7o|PxDpIqqkL3%CCl=krp8+Wrz
z;ly8Sd*zpk%6`2*F9pq;y;Ix-=?v+2z+~4M);JpK&>+dwUBzq=f$J4h$g{beOG+`)
zDWm95*Eoh(UZaX)MXFH4u5MX*0ur_vkiy>2`H5U56_GaS91|Uw#QiyX)|pA+3rSUC
zm=Gg4cmWQ=q=6C`9dQg3S|hxiud|v*y?b)-#B_4+
z9UX+x=aWXy8Bdy+b9spCKtIlj1yq&82xF&coR)ym))|b4;30$sY|o7-U^>Zzv262-
z`^B|jQmvjaRBrecWYE{Fw@97+A8QI|%=TCt-|amXEqmoTuCA6
zL_+pb>s$^hL8z7sfd1r=nFwZQON?=`eS1!f$U_8kGp(>{Y&nv(v49Wt99$XYaB+tb
z;5jmfqEP<=h$IBrltpq)DIJpQzzJHD#!&Lpxy%YyH7r7*?~(s
zg4COogq27~G7+91ILuVZ2r4B10*?YJt#A+itKI;L&u3?X3j=g78O-M{2VhSR{r^Gj
z%3tlwhlak9B7YZ>sCYermGc~l1S29M?598T|D%4Jy18l9%cX>*yFbvU;fXqb+*11-
zz}nxxtu&2~pm|Qt6Hb$V1#%tG@4wf`14H`nh4cTak?#j)(PURJ0CHV@h434(?%Z)L#0&31n$ZE{n$*T^6lqf;oG774V0lyX{bfdW3-dk2(KyEz+
zWZib$MG7=P&d7fdTWfwDI+3e)JXg+LM8@ZS&U*PlPLM`5i(i0X=p?;Ffm%#mfXgP~
z0l3O#`NOkz_!j0;Fn({vpou&_0>3_5vZrZ_3ENHnjTzvD0S00FkQqln(t!kNm(~?+
z^l{fjr7cXgFm=R9$U*!oP#E4FW<~|FNfd_gh#UVp`?XR0o3j|bBML80bk>z(=}GSD@ljrQ>!==gZZ>o?;*&6>;P&5E21C+fYBZ
zgq*1r40w?NUaa1l)B8`A{lquUWBYc(;ruxDO+J)vf&zOm6uFI-41~-LI!J?qbsOblxm^myTz5NkwDk#gnaxm_B#XovBlS}1kTXgyeo>z(I3V+9g
zW@MXKMsKgL_fnONZ{xqZO#eE*NzUdwsIcr_R<%Am#RCLKM_4qY_{$$(-dwqU?p}OM
zQ)oo>%S+gge|kVyPAbd=kyL>KwISN++=g@z8HYyG*vkdd3aTZ#GdGbxmP8)5nBim*
znz-p&R}tX6%f~5Xv}(GLeJ#@+D={E0Y-Du>*Sv+*?dsqglE!>ij4Gg_?rhZA4qGY&Q;Yr
z^ygnu&gvJJT`C(=vKU5ft7obuWL4E8E(KA&p<8e+PG2?3@ONNZD_jDXE-s&1&W;^f
z-KE2mlHA)GM)UYZ!Ga5{C`vnuz|w+GY3oZs19V98KJ-p%t!3CN8ZjNh-;w2xu>LIt
zSr4N+H`ElIM459qR#1}}UNqnU!vgdVT<6(;I4IW00Sr<_Fy>KD)Qlah3RwjS)51C|
z?N(_Pt)+(JDpSv$^%zJ?Ff2xFKlNIeh~
zmlC=817pvtnbH3werhi%f8V7oWwq=&jrr!?h7pYG=-?Ym4w^5IST0mn4;+UInamq!
zca?S*^d<8ao6Zg3B_DQ06Iwf4=VF;-ise<=z;YiP1okYd`LrtUlUoBNjEK@qxOdpM
z9{I(Y)J3-ujJK3JVbM9*J+?ucLt#9Nm8#&)ac2~#;18s*6k^Y&Q(7yJG{~!0U#?xr
z6ewc_rj5O8eTj8fd&mXj@WI;DvfY4g=eF+?u0lt|h|(g%6x(pOZqQuz73U|DlC)vJT7u^MPHEDmZu$$L6IH6MZ7Y}dy0K|!NP;bt?irlUn
zAt-aCKkkVWVve+LY_Pn##p(-(vP^ra%E-=wg+TdKtKVoo&OqS7nnKBob|oq0;ZkhnvCnBTuoXcBMiON)2lIDmkVjz9Ei79HA6@a(B(zwqXo9a1!{}
z+y11I(9CGOu3TaqOW>$!;hOVPmnz{4%a&%B0dbN}CAI4&n)b3bkZG)=%0nZUQ&y>MiiG3pm|MwQbDD8N>
coOsi@a}<4To8klTFD^hza%!@r(k5^I7a#Zp4*&oF

literal 0
HcmV?d00001

diff --git a/docs/assets/modal.png b/docs/assets/modal.png
new file mode 100644
index 0000000000000000000000000000000000000000..64d11bb97d205fe30959da3dc15b6ef3b482aa95
GIT binary patch
literal 4426
zcmeHKX;f3mwmy!nazVQh3?k5uIATX+5&=OGK^bHeFk-|2;Xn`qCqO0}(%QMAGUjms#$_}cd!FE!cD`f&hlVeXIlVxmZmn3
zUI75h0Jl?~_9`9#5C8&!P&MDoW&p4N5W7?j@*4s+Z&Q(W0N?}wsww;cgdKoTVGscD
zfH{Z+2*%4G(#UhW86;x1>cIdg=Fav-5jkOI8IJp-s{R}$Kla>0#s!S@mvKn@Ea<6Q}OS5kZc
zF%az@92^`H5)v938Xg{w!{H(#BG4c;>^wOFLyia{g9PfOU`k{N1rJhUA}CalLJSNa$W)<4LLKp50r4Tz?vBLip2R(&
z&Yh(yQolSYSga&Im*RQTG*w&#ko*&nVGblaBj}C*4Q;{n0+=WS7Yhht06`pr8@`#2
zv8y8k%mhG?iY&MeGSi7nmU~?SAiRzgrXuSS+$DGHBzK(Z(!n~GyX2vtgykn>fs$fS
z%5sS1~hOz(%8t;&K9B~t}H
zzy(rRFaisvVG)N`*I6K{=hl5-PS?|>n`v-84OZFKWVnZ}>?oM-EP(r&@CPO=Er6#5
z@SLEltE;D{r?(}}Dc@_Fo=YL_|jVruV^y*6|eDMIF
zQS+@XsgHPa@mpF%+n{X>?HYNXRQy<`p^~v-ONU
zC+~}kJ&Vz*A1xE@-Yr_OZ0Anz6idF_s}v@8{gZ^!6~{`on?&vYo_ldIojZ?v4pi2W
zlUDtD@^t>d#>l5m*S&iaJr8R0URT}2OZu&{w-K5SZ_myi|2R#)=c4S5Q!=vW8c{nO
zb6DM}`|e&jQ)(J6K7G;>_W~cBVh>6gWwI0gifSuuHvjn}=iZSE&+#4`tG6YI*2$}n
z^UK?eaHUDQ@_~N|y)kAt9-V~qZ~5EY?-&V#Fp0Yg#K~A!@1iM?{M&CD6n7LlBOo`x+DP!Cbnf%QVvE4`vHtA77k;PtIf+KhEZ9*Y`ABF{-B~Hg@Vt#nNtPvbroN;%i8}xL|Dc`*xd&JAHEH$zgOqdqKJ9!j#A_eD11ye1ln8
zILzzS;@`ABs!MTlDlTj1n3$CEcgy1hB)iy!OV4lR1~0z(GPCUow?~qq*5=w7z@EPc
z734o)oS$qkq!FqW;Nat!Z1}#x8&l}9xWAK6Va)XBkjBKshVL_=ee4GenQs>P?B(dS
znwC;Gu6lV3;jO~J;MvIy-Q41p5V5a(Arade-1Ppm3nrBCwrfFAmX>uiPqI*ZirZ20
zK6#mBB2eGh-*=hi=#8F?b6j=EtS_Q^#>L3DX`Hc2xX3xnZWzr}P4tWr!ko|$&^-B6
zL2z}Nyk
z{(wp*93&^C`Jk_+bPS`+<jtZV-iK$%8K++F(QcH}2Wkg<
z2PzWzJbg+~WVBD`4|?f_T#LAyarXLqsT*n?4{_n$jJ;PINq3XHe2(#1GVOf&UBe;m
z@p0PrAKh;wxQVtwmW|scMakhetRE$Pez!d?Y$58nx3vqO_wIv9AfdM@k;l_u*uZ~q
zIFAbsuQX;Z_%H}XVHd?+G0=gUh?pzsdzZ3VP*NC2-EDxx20Ki2#^?jv|6nn`Gbmim
zPrSaB#yL}7w60?7n#g0tC((S77_*ct3%PsGhfd;1ZZFM?lDx!U-!Oc>56O(nRa?W;
zHyK<)O@>xkpVNeb_hsIlQRDNpKQF-#tA(>L4u|{RK%(?8pLAWKEX2y)dg1kePB6#X
zNjdm&bbAza5|7z*pBBEpuVG?cl2)5AF|9MX?^={`DB*U?>r9`G>aveJl+lKB!!8D8
zs8I`kaYyF6^^TTnttD0#L7_9RMDKpvHSW`}6@PtP%g``!Dj;St&)&4W4XK&+6VJUn
z?#t*Mp11GjkQu+hUmq&`YE7&9-iR@$UU;n*Y-`NAqw!;+tX)%$ozc4n{rqljb7mI(
zP$HyHstA(twAVWfU3*cRa2Wmc=Zp2H%Er|T9ggZe_|96K5(c+N-=KVKPGs9`?V^0*
zb4BBk8yWFn{2CLRvI`VtSUn#9LNt1NAyLPp;zIuX5w4mlxo1%`%DeEs^G4p0;Rs9V)@lE5Fd=D2?
z1s#Tps}&Cio3(SM5?mCewavE!4$2{Zkjy)P^nL|H^2-KS8(xs?`h^(j)iUD(Ra#){
z4;}a#`}d3ZAG6|{TZMNQiY#wAD!Zpr)(XgHZQlz`cF-+fH5o^swkPP8znTm;bk59#
z`#Y{$v#9YJ6q$?a4cTDUU7PYxVE09{8}5E3zB^V9dc&~`pz`-OoLSjQUk8t^h6O2o
zBh63C-iFo)%FWt4Zy8qnJX_|GX=J0rt;Lo5n9UtYFSDt02Agn~AYJ+KSWBLwh*$YvK%$d-#XZ(vgik5oO&C0TArl;`jR$N*a
z8M)oQ6f;g^g6$6yK^qn|Lgv!=T=Z-H7FS=bnhDO+Pg4a%7qV<)#pn6-E5xdO)aEAH
zZ&=U>`JITg#&CIso9{8vf%YtEX2fdcwEi0n{w%qmRClDoE0S&X)KQKhMyH7?gVYQjY6EiYo*JjsA`bFLFaRa1pLTRa5lDQZQH
z1a8=4cH7emgRHefx!ICt|Bj)Nb;RoxTd=)FhXby@6=$|$*+WnG
z&Y$PWFdF$YPpNHPV=;x{Wh3h?b2{M@Hs>#l3|qeT!7qB3Fv3q~H#L9uyP<#kqwU>W
zWqUX)7rtP<)cp-Ta95?THGS=heM}%vs&(nmSX?<(j}&GRx7z^S{K2H>*S-Re)NIQ8
zwj6!mX{}HX0%#bl@$@X4enKR9aP;SNgSTX#cVRVN8Xh|2=!Yn%W$QNo+Va!0KQw8j
zb&K~@OU&Y9O9#jA$3lZXMT>H1%6hxlJFxX{&vl@1A0u#(+xg&A`kj3=FH;1|)ws>b
zHKXuQ;f3Cv*dv8bVRivo))^R?+dj*RsuTW{>Sq_sLa(B*Zj|FiHq5NUK|bpS85O<+
zY*toFKx3CagbDU|&J6SD0jf0eHnFT(PxhlHEaY+ZIm)`8;jG^3kZW-LMHa&
znx&nxh>)_-q`vajq1o@UVy&hilJQ$qu%cRc{3{N<0a}>F;C7a$ahoDFM-Voz3ytNh
zeh#`>nqMKzATk+|b81h@g{6f>$YuwDFk_;|S#q&*G+O(4)XeD*_U6|2Rh$#Y$LT@tpP!}Vd8wD6j^>mE%OZJ;;|wDUVoleA&?WDXUr8%tCiAm#
zQ+Y)R`w_Fb2Q&(n1%(#}-dgvU=dZt|e9X*9v13kgZ87wF-GKTY?2K+e*xAw~e}CD8
ze;L?hpz&@xa?C6vd};s7mPTZULlKf&Bc$v-P!v=mo@sR)TkHSoR8?67ey>%3WEDGK
z4}xYkKV`tAc1j*oytd{G9>chg%I!WcbqdY$^}GaBXcq=hIA+2+brK!a~TqXVwd+UFl1OIdj
z{(rasc2oP$-+S&CJ+&YHQq6z$*tt-D!Svt+_3}>Bsf_PlioZPt9qnC?aqP|~{2QL&
B7XJVM

literal 0
HcmV?d00001

diff --git a/docs/assets/multiSelect.png b/docs/assets/multiSelect.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a64163100e1a4710e11d96d6541e9c25b6e9cf0
GIT binary patch
literal 2429
zcmb7FYfuwe7QQa)pjgQGK;m1}kyRce!yqpi7Z8;wC=nFFC=x)R!6G02wFsP6>kn2R~)V{ZAF&qt8iH4c^XdssJ;`e#c`cAn9f$__u0XIB2wXwV
zCQ$4LikY+=1c(BGC>ThXpcDbJSb!!2QGy$qwp!pv=Vvg^$I|5)0L^zqPx?r*S)xJ?
zT8PL>IPz?Odj@Xq@%@uEX38K0Yuc<+BF@w0nA}CVFBb#`9u?WrO*Vfk7*VhZ~
zsB`L7q9(OWhw>HJd4-0rAo&W&ZzlyxSga(@cfsOrC{d_ORVq}a5-D&|H!0FWi58+=
zgh&S^Iw;da6o)7Y&TXj@yGN~P-V?(XU7(P%VUtyTl&avaKyP!1txgcyWs0%{0SL!l9BAS7`N
z>g7<6K|&1)4K&IjNvS5~5NdQfU0+`xJ^^tE2@(<$kbsjOND^>@s^M^gDi8*PVR(4h
zXf%$Fj*=uKCm>15AUQTR_UY3nihUjFZ-rl$JNr}G>4&%Mp+;_I%jBA(VBdxRtHkY||{u8xhk-b3?pl<mZ*FH|zoy#%z3ZB(Cqs;RwDqgvBI^OWY
zB#(xUKWoDcTRVn&{X5e4wzfvEvbFM%PD&PcmjBilA&a>ew%6Z}%Vzhpy@NlVx!nFX
z+$!Fx_eu0U_q@*+tk~B(L)e|%vtt#OB-D>MEbvPA_NP**RAHot3c-C
zc~!eq29vv2Tk*DYO>0d$J-Yi-hDN4a{Hfs|H_4B6>9t>eujaHzr)VP=R9#e~MZ~V*
zI^E7CyVIVqHt3J!q^(e89z8R^;r&|@zcOV|W#&<4$L%$WRYUFL(+_+wt&EULH5I8Y
z7AoGux7YEG_oETzsgLz&!pW?OxPeFKj&kiiC3wNY(|(KJ-`BWB%C7oGamJ><-XSV{
zC?wS#UZGVVrY!Ma;U4&GSpT?|8N=}0vIILeYHPFpcN34YO779y6}>imKa*NxqjrBI
zmv{W0M*4;B)o7n!RT94;=bfE&m8nNgCAZN@vCqGE`)#57GLKHSi{SyM^fWWlq?+?2
z!X@5|hzhDR*>CJ{z-sjOpEu_h?2+PWwvBb6X@wg`+n-0R>fCVF>FH0@PIlZz_W1VF
z3|`H^OkEZF;P^4-LZ3yif4to(pU9pt20y(y_~_iLqIY^GVQH#qaVeuZ93tDU#Fr^k
z;>(8qvZmxiQ_~rn7H(9*=$AR3y-a1wrOg?AY5VsD1SN^_XK#w;WE$q>U3Xp*psnEB
zjAV%G^+6Uk&D_BJ0d7Lr9BrI<@Keij$6)ske;#-=4DRQ4$n8NcY2c9G-G>o
z39+W{VBP7&$h!+4^gKkC-rk-Nw=}biO!zI>x*>nYhhOrar&V3H@GD(cvFRwhM~Sw=SAc!!o{}bL_?l9J@SNy6A@&*7KVK4ppC9IPms6j|cyqUJNI@7)GRL
zF=7`Z&03pfKi9tbP`@_1SrVixY>azKd?u9Zw5GmWtJ{q$L&F<>$m^T99`kK`|Ir-d
zzS{Xgc~U{I3k&g0y18d&Q8@X}@uc!}$%+N;UDsO8xOIC6=k30FjVQPfQ}%Alv5i}+
zE4tWG?xleR`UgqX(%zV^ZM`0Stldgere~hxjU7ikrat5PJNw}4Ix92oT{h1a+V5^S
zGA?w|U%GBResjJQDW9Kwwk9mZ`Gm6M?zvS1@s|HiFLQ{v>+|HtXa$zs+%L1vtbBy+
zY97d*CaB7um(qBILdkRT91Xed$x0YtQ$69OW_
zQ9)J+u*FSOFd#xeh>4|0zyhI>79=6bdRUAY;1yDNg@CiK_K!dI>u=}G+>htpnLB6B
zbLU*>p`iEI+N=ctyiYw4NCRM%1hcdMXokt?d$%~4TE(ITkwK%vZVGe$aNIw{AAsi4
zb<1(90WbrhpNCN}8~_~djdTQn2yl4dM8qsS4tQa{6NU!>5DWkf=SBuj3_xHy63BRe
z20n!OTOb$*u-Z{LzyN>+0FwZ634lRxq=f^9Kb{$aXHbaDa3VR5#SAC2;>ZAS!H!};
z-~vK1pz^^N0uU|$%sP-F249OorWBVV#z%6AIbvdt6y(XtaopgPVp>WW`5OTvvy73+
z2OK#Ln>>YAi6Wp-8q5
z8le_K{iqxwaum@*WCR-J5XDm7W*J8y)INRsRF6Wv3F;w4P>7fy0wFYEo*tSo6PcTv
zo1dRI8jTAJ3n&&cqR@nC^wq0Z%gf6c@P<3T+p&hS@9)^<|CD|p5+ko=_nWn<_r#3^
z48&znj%57#L{dgp+{r|c9+#4q;gOb@vH3F(FOSbY+L!zQ>!}~8f&O9HF*D;RD=Zu*
zpUYx^bzL4su~xRON521%lKS{UojlEg;xBkm5`1n;=gyx~Iq_B(KD3pG)=_6`pAu1-
zWUMN0Jqs<6bbIgC9V6%yc3yty(ymB%vax^W?$vtAeE(K!jV#M8KKa6oX0NN6DMNl+
z<-1wB`}q!AL-{33>nLYc*M8D?a)Iqk`ZfEs*6s`JyGl!6)sueKDg;_x{-mQ@P@aM#!8XQz7{iX-k^Y?d)I9
zH)ai0Zn@kvAJG?oazLTIc=|7sWr^*o>g`r}qK|Y<>z!?SQ`0Zsp?~G2dYSwwY1&fd
zvgL(!71AfyH`Qz#
zL@k1lYPbB{?d++Z!-qfUSoZb1Y#4XRmNEl{^j0Gk&9*XVo+k|zMNdU&?vF-HKRWOE
zj6PVjy6J9}oyx~a?NRjF^m@v>(k{lxY!2)oo-LbsbpBvC?HYaS+OfsgIqGVX#=pEP
z?Y)gNHW%a2MGHK^PUoHY*Zha$zG)HSXC;!3@TS=0(LxJJ7yDw4WF=W#c{Rx^~Q2G@wkc-a8$8}mM}l&xgs#mdSCBrwY@(#
zfjzwP0fqmKN$=2$r>WVik?	GliS_kLVm$njb%~
zkjPec^?iA>;d*1|bJ9;JI`wVH!0iU3Q)LTX>Zfqr@c*#&ZH=QzlCFjCWvAOTB$vYR
zzfENDG_kq!eve6_L6~gi+MsEh`fkt1A*91DC$B4L*6fB$8go1Py;9mPRsN635oK3~
zpEn!Q&FKZvw_3u)>{;Xo^~?4_ty1@8ON;poIZ@0MA^gP`UwAIuYCT-(!(RECRr7+a
z7PdznPr^o|CKIfLq;IRKL6TVFSmpxP1Q8MGpfst13fusp6F^Gn5SoZIY0^6wiqs?o2vraektR)A
z1VoDTE?qhk-fw1}nO`%{_aisC`|h*vO3prOt$PynTvz=%B`YNX0l{@m4OKk?0>Uo*
z=PYs}{89gy-WUHy=&7f!Oi(_+zKTB~d8wqML_mOzr#iDD#h+8SX&8GF5Zw5B^&;$Y
zEw#Z1nZ2GEdFi{_dHGm**b=x|Ik@XVTs@B;1eDV|~k6c3^Jv1{jYYw`+7%6#X
z#=;$zK=Sd{+c3dNdM8fyv)M1iK5FFLd}LR-0f#Vc?4gxsuNjCtjGp*eTiUZ6`3b$U
zKq=R0uLykA-Cz;6*v>TTB7lOsP{gt~;wI~0lu{q#xrP)7MNi2Im
z`TV)q?G@dnX-y>?yh>oKTzvNUyr!Yy_-JQ7L>*m&zfBD(%x`%BfvuGSR-Lanv_&qYfypom_j?Bq8Bby~Sz}8BUQ7ooW9d
z9PR1k-z~wO)w0+_&Ruv4Hbbzj`kYXdUe7VJ{|ILY2J?q`sn%l}A7-Kr^5Of<-eYyN
zcoYe7D^&oKU=ruawa$AYW66OIP;Zx~&Zlh)Ny6n)3Tbm3#rRn#Cwxih4K3%4w7dod%t&^
zq+YYat$%+RZunedeVbicY)gtS%piFSQoHl5l$q#;j0fE1cp&ZO3w`vBb8nkgj^fd{
ze!Io02Z48o9MXc_|3o=Me{WcpA^*apD%V28DbS;W80CaDSGRpv_0Vo&Xs%8Bw9$L=
zl958Vmp`u7!P+Kp^eN`B{#axzjz*8P(FrJp&5R>yu^$grAILPOQ${^a$54JZ%a*78YrHvVAz=4JOy~z{e0rcl
z%6rVn&y~;5bWrMH!6(2OM%s8^!1hqxS3@K*U~_zQ7-9EfKFzOAP98xb0Y103Jv<`x
z8GiiWrB6!hS_Rx@?h=yu2r1fMXtMG35+N_9nEHyhPqR~cb
z00~?>0pe9MIfqFLKGUT?*fKc@cmO$iI8o_gMTNe75s>;iR-N1--VBS{F2ufuS{=4!
zoMLo)-W=yYs&#A}a!N{5FZ)?4DmtKZ35D7Ca!r^>zCh1)1sNKYHZUTA>k)#Cp(R%MiP2MMu$e+^0fzjCh5HBa=KASgN(Iyj_=5mqR`p40*LoJC@)znaAIX3vp4}(s
z4tVPVsTIp@BFU9B(?poxX8CmglN(g>6;Z+#a7o`i)CH-9
z@1N~w1aO(K9dn&VisNQxQ|cwZnB!a29(55)ynEUhz9%-u)SX3B#k8_!E&*6=);7$J
z-HQ$1SvZD5K5?L57jcR)XK4kINqu(FODz!*{|@BNyk}i|EaqP$c
zD!vk6#j|HFQjL`Ncr?GZ-+&6>96#9*Gju!J^fQY%x{(Fuw}~GC(2puCWPj5S8M3{C
z`XdhlJO)cE`f_zUJD8Y-~ZgzDRL#}&}_P`<@Y3FV0?sn
zbWH00gKC5HdbpX^3~@rAu+DT-`1*01?*mzkmd4E?Gqhch#&_<$M}wP266gIFt>cT}
z--z&U=|BogI75p?t?TTD-tfaZT(jh=sxe#U2*#xoCFWSL=VE@)FqTvW)yF&wv|Y&F
zt02N?b>|dLg2VL~1uil~A6^FLO=3Z?1H)6fpnUjj9-GVky->gDmuN_FOmlS)%$tqM
zRW6wGM?8$>95Gm53#$FnH%V5Gh3O9S+-gb
z{EO$ec^vPSk3RB3fN^7n$G+J8-r3;md9t@~*E89{R~d4jFZiau7XR_Z>%zqRMjT!{
zY(6Xg8{GbXD}kmDrm?OLzBAV${&L{G03TWTbyMz-y1y7yx~EHGz#W*706Ta0ouLBt
z^2mg{A0^$wXJzw^G`|l%L0jJpVe3TDB;72hGZoniOHj~d!bD#u_dynNxFKd8-37xo
z+#Bt2cn$r;t6UdiNVUph59m?&)+XfO1tay%zZn2I;wHrp3{SS^4s^E@$I$cryM0ct
zMsO7MTk(F^Pu4i6JyKtoKBZHqWzKf^xW|~4+7$9jaz?Cn)#>PBv(WV?f09kso0*SK
z;QO)Ya_P`Ip^fYoNI%4(KB>lLY{H^d(y%Ph9vBuk7(vC}j7UD65Vspe`5FtUhBG8u
zMt6=%=JU?Y+YPUO0H6gCmj(;vlad(6xeP-u2}&@`WDr&Ova}FjlFIVgI8xKryC{CT
z^%BayT($q2(TYWfPdDn%pEvGlPV;igdR07B+IoCNeQqsxLit2qL#5Klo|Y}2C+mN7
zQSJ+D0lqF$YS)=#ot4o^Ir-6Gz?F>1nO4Y4Qj?zUR+{~tzcO#!!}da!BkctSByxUc
zrND6AD=WA6adtzn@QhP=bmy3swLcY4#Y(g@6C`z?nxO{uBB`X8(Y?b+v^@;qVoezB
z8Pv(Q;Yj4QWhtdY+nGC@!JsS(bRwOM>jE`aIE`H$h?oL;sbah?AJF{%TmfzOj;7)3
zCkLQ}Y`;0nU6rAX_1zX0*GOS&BH`LmcO9eU|F*{%a54O2`v(`v*^Du6N0~%^Yfnk@
z>3S<37fGGPjN(Px;VOJ%c?+aIsb64s%=71eRyw}I@V$m9%?a0;{qxiJp%OVv*KIfG
z?sQJ!p0v?!F5RKFvCd-GQ`aC_XEjVpMHJYe1)vU!Qj0YKY*$!;vCgI3l){l2|BgDm
z8S;PYXpEa`&Ya3+?)jX1o{m$Gv$j6*^exuqOLA9z^{ZQrA;lTM*)OG*Ys#$)X!Kg6
zm#CSHW9Jwq8EZhREFfE)<=BL>i)FJJFMMy55sMOKy7~Q9RMIQ;Qn`i2MTa|hVXG>b
zoOQ-zb17AY=L6aQyLp@{v<^j@AR6Bl(MejZ=S*Dq!9YUfFP4gQj5P|)QK
zjFx=mi>Y6~ywr3$&)ELN($~C-!{q=!X`B1FJQRa$og25u!
zAgMGw_~a|fB7xMh+XKpxis&?AyhpudkMqdG^BEC-EZzXBj^_i%Q9!(Yi7rCkZ&(Dx
zZNphjhu*C~hq+bYv*Fgj1%GRTZrRD#n~y)2_XboMV70^5B`uTkO
z_t(EOK{JSYb*0vsbf1~Pzn!sc9veD3x>$kkv$k+5xr|!%FGf>b>_i2;*L8Gc
zL&>SbenT+Ptt;`IkJD1%R-}hF<*=YjM{fSDB#)NWgmGSAXhT(RpUrl<5-jj^ja~Mo%Bo1bQ>MIQ2zlO
zh$-1^T$Ncy5Bx5gW^eC7mV`93xJ{hPpcF~f2CL_sj9L`C6yl>G3i5<^=mA~AuJX~c
zY_D`>*So8v9|-H;LkQvIWuLvSNvDxfYVo1B4QLbY9ia*)q10BN0wOhS?VqY*)-VJ&
z3a@W3*`qg#B8gQ$dMrkFj@c8e3u&Y>>8r(q2{%b$B6iJnb#G}?3S#NOg!oBmbOxxo
z7l+BZYi(W0Ug6O4qA7V&`D1-*+uM+y{wQe=$HX)ZqpDp<53=)1FsPNS?bG)c_hbTq
zVQn;Di-F&WgXdl3aN3>G1`S|(Gid)eiGK_o4e2v;f3}ut~Xi
z1H9ReG_S}MIoym`r~R5=G_C8045{pyWAyLG&O8Fi>vmyR$+YIK^1zkn%HN8FQqEhbAz
zu21@aszI2fnXa&BJ=Ji1>c!7KwBzy*WeZKCF^px|eXgFOg8gXSe#G*;jykjld96*$
z#a^JRHI4XGr>1L#)-2(^-!WKAOH$#SvDbmV@VAIi3r`3lvA^B!#zPjFN}$z=noog6
zOmcl3I`j`$wFRXY~rX`PJPjGo5yT;QP$@liy2fcjh>+#^b19lg*{|La@;?uO7!M%{`x8nBs-}4&%LsK8^I|_q2Yut?(q)`
z%S!m<#B&f`0gCGs7Z-POa*|FP5jHHJ6^<*qK0KJeiM5+_Or;fwf8MR6w>zv~XiB6N
z*2JI6C!t_zNZSlkr-&i5dK%OJT(NhhOqdi;C_pucyuzbs)&pjKiq-zL&XXQcQ`ASa
zIpue#TiK=f=N`MZdhDuBKfYz)5_f<1aD~*}WfrC`Rne|!LNd%RCa2eN5i21Hx`vsU
zGB|o)t8a+$6o@s}Ky0_Go@kpkCh2`NrA$&~XnE_rku)b9*W5wq533%|(6g;>Bh=-O
zlVZ~3`tP}lwmYQVzXy&XOWE=uC2kPga4yKB8A$3M3)C*NkeR|^MgzSZ)3tTSHTZJ1N2d1%W?M7^mkJ<~{gB1xwm>sC{^9e)K^eZS9B
z=M&bJAi34k$CnmS%^*l)N`D8FHL(`SSjl!ENK!g3@ue4eW_WC9nq-jN2a#(Y1w9*0
z$O$fUhJ;fc{7fniPfvd!g%Vyb)xI8G!bpbot)->hxuv8f&!^xVujDL1z%N^)pvLqM
zCBLE}bccuw`+o)zX|Y)rXo`!d2dE~HCU(=()gC!kr-rxvFgfwBK5YBBAQqNFykE6$
z`O-`XK5^yN==l9Q-$58E(i+%rp(QQy^B7{0c>C1Z)n8bzjemssgKt>TfbpQ${y9^%
zYjbM)YV&L&n$D))MK`e7FA6=49Tl;t9avS@zKT$1MtQ6&p!sdf?`smhrjR&0UcT~x
zRI^%?zc`J3vPOQjTa`0)Sr+WIXD%@_S~l4q9BVgc!?98904VR`GpGL3Zr%Fg#~N!S
zQT~J4N4#`QSA)fGeCA;Tt`xe?(x;4dL)Ij6
zpoz0nT=bdqE%egGhNv%CrzQgndOq1BY%%h$VmtMKf{swGQNPM#a~@9X)$O3f7@k~+
zyCB7#MEB?sXI4}+{$4Rd066vL9&$G?YM4XtaK9{C|9m4)VOn?)weU9tEE1vM
zh%-!nRzU0oxITBVV>94{q@J1MEyG{~up|C4#`a<z_=otOc`02W#Np!S&A-Hh9gV3=^zKNSaZAbQlB&!w~
z4%WQ?yu7*H>4+6PL1LrEIw+ZpeHe-Od~0A21Gyiqqc#XDO2_Cmu}mE0(>Oybcthq-c~lnopJ_;4
zAxc?BS<_IIhHTf6>XZV_Ag<{|T4ZciFYmih^E*lna-#HfUUqcgwtK8U2HJRzO?
z9^JvNDPf8Y2(qjs_~=`B$V0SKJMcKB4MeG=Q1_d@Q5;lX@T62grAuX}-VMh)M8fuH
z4&h(^SvAt$Yop(i1*iV;%5pWJos}zxi+?8m--a094p-Z$l3hC^#>Ymd>koF7iEk5yEZmtUOieZM4&(@g)fL~6u{|BHY?^NFr%xw2)*
Fe*mfW|A+tp

literal 0
HcmV?d00001

diff --git a/docs/assets/sortTable.png b/docs/assets/sortTable.png
new file mode 100644
index 0000000000000000000000000000000000000000..18fcab45d852bef9f8e8b2a8fea9a90689d70990
GIT binary patch
literal 6221
zcmd5=S5y;Gn2spYyFfyfE)YrxMT($wB!sGf(nCjzROu*9AfZSLNH3um0Tl>M&>$E<
zh=K$G>0P8sXXDwIeb{sMVfSGlX6Czh=0EqpcfP+S7{PVus5z(s005nyuBHh9a0N@k
zjg(}hI|ys8N_t%JGtp58)DLs5kp|aX?it(z0N$j~oY|9;##BDKmVN*Lec!+9O22od
zBWV)ouVvwH>h0_wWbf+)@UeIE@|W~-^1mr736Yd#x$F870ATOZ)4XT)%w{XU+r!G7
z*ni*x^Uy`;zFDi4d2vJh$2@DLg+^j+b&)$n-$IiEQbtLv%M*Ut@khAS;e#aeqC>)%
zBZyUhvo~p`_nsszlVu+#it05!7!woBnYQOW^%$uB-Bh+Yze-=XjDvsx8=
z{hvZ5&b{xGM|R$!ep}0SpL`a^iQ|Qb427^wYV*O#(V5?!P~~Dp6S3Lr{laWb@yz!(EQ|
zamY%mIw~Lw;Fqg6{$}YVM?Nt)Strzc(n;})O60Tcg)P+MlZ+6jCEU95V+|oIELeJ`
zeCg4hiVE8q%Seq*?w@DVhpQe9(r_CWQ>3C|+k5QWLk#qivxakfdpZ={og}-wIE9_+
zF7V%A3M#STbfVGkS
z&vrZ3OP1EMr)mPlKm6LtFI@@bj#gMEV&6{+Z=BBByn+-adnrG-|1iFP)8YkW;`f>2
zv_rtk_RmIgM3>5Bq{3hO_wN`Ai4OpPJ;P9hOaZ1%sh2@d5wv
zr6PWP%-7>6HD{1B9nyN--=}8;ba{w?)6XhUhi(jKw=ACdFP7uXhaUaW}q)xdfn<0
zoHy%-sJ}RtR(f97ao5snC^U8CGO!>2*bKSnScJ`zu+h!PTcsQ}u
z@jaiSrH%QpG+e=kdo#>bPK5$srJRqf8qFs2K8=S6MNd&|Qm>?+%PB{O+eZ9atALAc
z!kM7U<9C94>sQ_J;8_@Cc|3fSLgnlSimNa4ClX?K*}wIxuhBfVQ0<7a6b4|69>&Rb
zD5;&!?sSd>Zd#}Htj`Ew2PbE}rh>OO`-2i+z`RdaMx!AFW&Lay{N9Sl0!1m7_e9w^
zt`?%8Ju26aN6RAcKbOe$P(xP$emz2<^gVaqUAxth@pC}6p3TquzjN&v4dAz?QHsYa
z7vodMZ=Q~#N6W_+imk~IWM3JG9D8SbQ?^uw*DAcet@=wJ`%Vq#1R&eQ;m&l{
zC{VpbwLojz#l`T&`Od)ka`W!nRfpbM1T3(P1<;t6xwp|
zjOFbpEwcjm=5)OL+u9=6w?&44f!{8Orp1c-Z3VutW2H`2_a7M8z5A1
znKU>nOUr51XSYY=?x=MZo)bZcrur9NCj|C8k!%+-V(rD(0O-d=PE)#qUV^%i7hV76
zBz|vUc?I$*J;4;Ywk@F8#7>cjz;`PpOcNE$$kP!QW#94zr0neRT+zxpb3i{F?MTFO
z&mI~8rng2`nMw1oc^9lccRZnxSn56oB`@jLOrq!21tIAWsRCZF4K-{At=G>+ojys+
zCS|q9+dHRgAMFgzo*T`e+1aINo`)bdcrKPHqCSz_id;H@;xuUH@#6!s5JbRMr}8NS
ze05V!XFq7^^;9S-(!4+cb7FTXGSiYiicl^zmBq{-AN@YvI2`GiwVJ&+DmY<|*gPKZ
z_gZ8}R>8kd&cKouRo%@a`2lv%SG`C+c9n+YnE>BNzaDT`
z;{O?J_<|m>*{nTVVZf?Q4I~w+8K>_a47{;C|~kZ3b$_#QGBui^N&$R;Dk-+$mk)0xVp
zyXjEEUl5sA!vq^j>>_+Wn?d!+ZhKWnx$fCnTkhV6m6WZrrT&J4#E=i&n|YMoFXp9e
zo6nsBj}}G?Y&KSB14F3L0*LB~FrmqkxlKlQWpBLE54|A@L|p#S^l%&GyZD-a-(O_c
zV;aPT{ZhsDW*!ovk#UrCU^4-$gP;~(O7UkiUzVVNuw3b7p;rnR!+W+kJ-WZIBG3L_
zR%Pc`#z8G~3@@I6UQk`bJX
z;9yM?pkS}vwlTE!OWUx5^s40@_Ld%6wV^@#Led&C-_iBI((To^jp}6&6l-LUrTcH)
zEWJu#yiaj~vcCHxM=iVrb+=B#k9iFo1L>Tg78(8c1lOXR5QH|cmh($~)i#W_dD)Ak
z4Z2^DCW;KMG6O=hv7LRZV@SvlC$@;p{JrqI_5wm`lcHkEZB#^s`CceGEP!h*Q~zW4
zVtqZc-;DwBNbtI{LfJzv<8icFxJy~>icT>!ePTS)%pRHZoF-XxgkGKnqJ7FFjvg|#
z!?X3ESv9lr9^^)pAz~dq^=pXTzr*6=4QlEe{xC95j#vG727-nuB;9U5I;HTnG?&Jp
z3K;Yq@vdWC%R+@7NKtSO=($oEXrX!c2C$i&6^Ab%?#I{iy1WvmDXQ5rsJcp^-bs3^
zE}irS_wn7M8T5pF^?a`1Au>#&Wy#hpaL571+cS`C9wz&6@8G>ll@s7VEFoUhx89Zdj6yUKSnmAsY+Vw)`1xRCZW2i5zj|*gKpCTT1
z=RzeaES9zf?~K3cdf<=@|9y7LH?&I?!_h2D$@*IJI#SpkuP^A0Ka!JLdyD>@2CwvF
zf55T_dk`OJ@9h7Ya1x9VZuqEUuE{TO8h*ybLY)R*W@P@d(xDwH9>~xo#gqo#*LKL?
zaLk2lN#x@L^yZW=q%lIO;_(ovSZV~u1!gDAkHGOzDM$j-bXr0B+j2R}ga!|&v+N+$
zR;npe&N{=nnG>p3^6m5Ux}Pfn&`)S>&z+&Ceg!=FXc{+p+DCH#e8oPHl&%2WpF^$y
zirD_wFe@3S!s+RS+-$g(953GYCb;IAJkjFmX58f6r-66h==J%kSj|DcrRSoep~@9P
z)j4e4thY+z4Ae@hWxg&D#vBk{7Kbs56r5UkDR-o!UB}d&^Q=TKoS9ySV$wrG%b
zk!T9vP}JdskGamRYIipnPhT?lIb@A7cipNC6wDW64wnp8PmC^yD_rvoX%LVOiG?Um
zBddsgE;Bn{b+X8~QJFs+M@C1DsPb9(k(NCf^|vlw-tIr*+xW}>>K)bQH{W7HoQ@tH
zvj$2T+-qohIypHK`LC&}vwyiItKvf&md
z%;xaFF;eR^z5MA7ZK>@yvfPy_Imlr>W-#J(S44J+fq@_mKLMg
zD0$N@k$P}2il1GPgV5MnYDmj{hph!8IKZFI=r4mw?D7U4bn%hb5HSp`bFTz=HlHcG
znjm(QMGTxe{hmT@>eajXscGx{F*>0
zCK~d^IU=I-dBXa_S;A<_0T-W6{mCiMl_oa#(RG3IS8_6p-IkLkZAa)&7ff*__q
z9(XUSH}pz4A**kjMzKgF|uJkCjq*gH9pDYziK+uVsdLr}#G<2S?SmZHh{3E+szp6||Q{%JL~
zKX0Y1I^$hpZEs+Fu<^hj1nAw;tFJD#?2UT%Aw%E46l#FgzLfK3ujwuNaW@ZlQd7+r
zm++I!1HU>IeO}TyY(4`YNcZo=B|lBg$c#xtn6}Py5#|g`hf$3ob};If+CV68)-^$w
zG&s&IANby}O-O92iv6fKHIn7440rN0Rhs&BiB=7Pk#|`){64$4+(yv3D6cWjlq+CB
z`pE(N^KbMoLbPs+|E>PMX#N|zg{&ed7#?n7*%cpA)tt$Kahb=a`o8fa5%)J#QDn|g
zXNUyUWonJQOJN^19d&`?4I$wkG{MLIy$v#EmnjWO+aGf`FM3llF;N>w>wduf8
z*rXThkNhZUB7EI>fV#P@I);>164S_mLdg6!w=k1EEMa(UGSc|=-?GnR8twknrIcp6
z&GdYAbY={ah;hHSJ)lt#dt8U
z(a^$g#Ak~&S9WRM|7p(b@4lvYyGfIaqpT;xVOi@#pPe8#l(ndm=Ni?y}d{97iE{Hgqq)
zG>b!=UoVa}##8~frFgfH17Bdw6vhoy2pNmJuLLoQd~q3sE_5jbvz<;!{JPSqB2g|E
zj`g{RodVZUWx
zA0>%^v8wV)T@+kJ+}E5>JR@jo7nKE7fhAH~H7XjuJQ1O%u(j-dpL8VrF;C&4S*Pg9
zscEZYEj~@V%jdLM>&bg1RT_yQpUwHo1uoZgm7Nlshd~sG>X5@=%*@^(Lk~Ky^_Ab`
zfbbU_%vWLHiC0$ZBYfOWwy_|6zChW5%qr{VoFlzK51BreH7#%Drddx)e!HU|*kHZ}
zR-oQ1`!N`_W(Q-v&kkl?dckH7yUyxkw0U664D4nYI+kakWt=_28$SAJEUOL@~$Ko_JUDCsV#-
zd*5Xq<&5z4`CAhMOiEls)gNI_KFblvm=wgdw9j~Dr-TiK?L%}=AsBb6hxqcCILMvj
zn9_ZN0PPHvsG#m@uTO#vJY^GkTkr9&b#({JbJ|Fa5$;8Q?{yh~`
z$RzHBFisE93XU`G@I^P4zmc*KWKaEuKKx@TI3=7y%l*l{i+Ne@>o~glN0`L}SScHI
z4?3$UQfoS@(^@R71}0*K0iaCKeK=^eGtMY%}bW`Hkd$KM?-LDW9O4Du5nbv7cPrJ-?OJgUE
z_LnPIAuuwJ(U9ZM>tCZ+uP#5tk{wTuqR&7A7pis$I)v{oL(>N|$RC95PpB;88*@V#y`dS=IXVz5=3}|1XH^vZN8GwtOAoYlpu-f0s|w)J+C6?hs+jWx=sZ
z`J8_ta
z1>SWe`q*C3cc{p}LICAP{03jwdOHf$bDF)q3>CK_g^~fOVBOw?whc_KQfGmQyffuZ
zCwGf@;rw5>$~qdxzTgEV5`{HNHc}|F7I}+j_h`U-KOE0!xo_Bciuh_Dw&vpHWK$^R
zl*HiK5Daxqia?|xnkhX5TCo(ApMe^<9Y(1Sf#rlkmZgN7L^j-_zcj|3Q&o)V0CQSt@;15&G6~~(uZy96XGY6_
zkXU}8`w7vAEpI48Z};jh0Qhe~Cb?nWX&+oXhzYzw|)D~W*Ov2BXqIXO(yrBG^G7`Vp)`aOL
zBp0}@kd!5*ROt8Dwz2%0EMx{W2r*Z2nnGJo82R@Er`v1+>K-8+9Q$$_wqw2YEQ<+a
zabS?yYP%kthr@azvsH^d488&RSI*G?uWOk9xeD?iHC+IN;N8W`E3?w+(?F)Tv!n@t
No)%oQUfu4+e*kCJjDr9G

literal 0
HcmV?d00001

diff --git a/docs/assets/tab.png b/docs/assets/tab.png
new file mode 100644
index 0000000000000000000000000000000000000000..616d1cda6e45d1b9160e8f6a67d43d8fdfd16f64
GIT binary patch
literal 2538
zcmeHJ{WsL>7JtgAkUFK*9CD%@@^Yqxia9BRFvpOI<5J@_O%owAnw&}9G>DM$R`R~g
zM3~Bi%!E#ui5PDg#CUHeCf`{`-kSK{sh{o-cinsbfV3dJ;~$
zIBZhYR0RNRa&ol80kDRnz^Tegik(qraZz!sA>ka*fXUxAr7(UV*kEk{cy?#wSO0YY
zD1npC?)C~lLa~4;0G0ru3lN4t&r%lw3=s-jA!q<_0D%Sw3_y4TKmrI7!UO}3P%!{t
z5DE@>BLLb2fjgobtfw$>fi{Rh8^d6%VW7V*hDaqvDWYh=BL}$Afd?JnD*^x%0Hgt6
zmI@%We-eh6jw2=oc*v+8QV_#6P2`)V@PiX8(AmQnh2{<87~+7K*?^e&UWYG37FFd`9pv
zGg!c+iWxY#o(eZobC_IOy_m*Zr19Vk9-K1>SM*5fBXHHoB7Fj`n1ERmaFrOYQ|KIA
zw+IWEG;TG$Jq8jnq*7jzv@u=!HV5X>;K3Ytgbq*8VM!IA&+q8y=gww5?(XU7
z5eNkR{rv+21A~KuLqkI&BO_c`%7x)}7#2w3VL3bu!!U0amT(s(0$3`5VJ^HlJUTi$
zHa0dsK0Y})DH4gqVzERbnVFf9N~IzgmdasxLI%TPST0pqGMQ{{ZtnBv&-3&13kwU2
z3Q^n%&%^NI($dnGFJI(x`PZ*sS5{V5S63Cpw}<_|e6K)#&@qMrsDwLukpS4-_-(D>
zg_WFDI1yy~e~?dwog-8HBZ5G#brqDO#ogV4>X(m+Oe%g7#
z$xzQ!eHzMt)a&Is314YFSB1KB+qzQ2=?snCQ$0D4rC;7v1tG7>M;d&O`j*N=?A3R=
zEgFTD*HWEj`wb%{`x&$*`|Xs5=;cqnR*qJbUw6N;IQ*ki5{)AlS#j!@p*FMEK-lb3
z!U@~&d0`M6RtIqgSM#=$hMQeWI6E`g9|+g;TK-%t*e;oes$WGo2I#!Qqf0l02uL;a
zT@5>Yd*p5L&PUa?3L&3ArYl`#zWBm-&H1M(DZg8@zNaZ))eM~eL~2JHP&2gJV>eFr
zndrHog&(d*i++ooS~)hgOnGvtW`eh$IZ`>pbjALvzE?wdH!l8r)jn?C$!?7OFR+z;
z`j^dpy2(zZ9Pa8%Le6?9C4f>^W{k8~GfqY=V}?Fto=HSxM(l(B@XU1K=$YpDcoW^D
znxP1L*)Fra<7lX214$&lH=)a
zy1)2%k&B*}A7e4b<3kTp-rvsdf9`d`(<98Y
zIO~Ke5sjLM<8Jo&+d||9_Knf`r+xh;%%`2FB0G~hD?1x@%-<#=DdX6$Q^h0#hgZ3k
zBDtgLY8z>HKI#%BC=x5;3twUrOS(q&1NK6%PuSmRxn)Q6a+plS9?n1wWU7pp@gae>
zMpfy?FfW-)uw`~@?o4Cs&k1Hh1c&x-jKyOGgS(M`%Gs>8=i$Y@ypVTm8wUcFAc2-f
z^`bF9rIl74lD{>k=HzkKi^1Q}4zba=vM%A53GAeYy94Fb-|jg@Q~K4iu6quv4Y}S}
z+k%gSR9{*71_fOC_-Zx!?8vH;ZR0jaNQ6skX|#>seD7v_+-3srTJXo^3bvLqcr9m{Gd
zcCt!)@UUY%$I^rlEzZok6==DEEU0vb*7pY5(+a)kF#Bp6hmx7V!oQGxfb8N-8tppxT3<6>M4Wy}(W{Y!dnz3w!UH
zO))(U*=2kEAs;sk?f!ksg1to}%SH2NYwFdN8T{NI@TFPjsn+MqJZB7(i;6F!he};?
z1=>icDaq4s=z()MbKtqMrli|mMJlu=d%B{BTDZ1Jw@_)bT@aUjxi+cs1#3|AS$gVW
zwd(cy`oi8cWl65sMXINyS-j8f`L!rgc=_9=R+@Q4B}(T$H0`7TC8-m58dJjfl-t&V
zTp#Ft%EKrJ%0r9=WFCn388x?;J>IQ!Gzq1p7fo4rBSR6A0m*Lmu@l6#tT+>{@SpwK
z5_JkLRw87$#iCfAvsB-m4-7TP6QbPu>{Q<;;rX?-?q<@nk#lH<;k|VSwj8WL%^~^+
z%F+^C>ONPrV>T(0ltIdC|K33Uw~1XO-0FPd#Hv!V%1n3DIlSWA1%Q*iiyaf~7xOO<
C$gCLv

literal 0
HcmV?d00001

diff --git a/docs/assets/template-style.png b/docs/assets/template-style.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2200a8326e2cb922ec99c555dacea761f98d734
GIT binary patch
literal 22214
zcmdSAbx@qmwl@kPI01so46Z>3f)0cP0t63`;6Aty?(Q-qxNCp}2rxi!2|)%665M5Q
zpFnW=$h-I1=Tv=l{<&56R^6$3s-EtrXZ4cbTD^Kzcl29T`6qZZcxY&7PZZv~)<8o;
zNB(_qFdll?zeN81fbOaxFO60?4A^;SJhpnJ@(K+No`8R2iiw7Xf%aDUo$NzDCMG5>
zE-oG(9svQtlP6Dzh=_=ZiJv}wNh10y3N6B83NGcyYd3o9!t8yg!tJ39vl2PY@zvuDq^xVX5vxp{ba
zczJpG`1ttw`9UC%fPjFYpy2c8&xM49goTAgL_|bIMa9I##KpzIV6cRQgrub8ix)4X
zq@-THeEI6tD`{zI85x<^uV2f`%F4;f$;->XdGkg=K|xVbQAtTjSy@>{MMYIrRZUIp
z?c2BN>gpOA8k(A#@7}$8|Ngy}mX@}*wvLXDuCA`0o}RwGzJY;(p`oFXk&&^nv5AR^
zsi~=%nHdBEF*i52u&}VSw6wCavbMIiv9YnWwY9Uev$wZ*aBy&RbaZlZa&~rxLZL1$
zF0QVwZfF3X%zkK;pR#sMCUS3gA@%8K1%F4>Bs;cVhYB(HTQ&Ur0TU%FG_wC!a`uh5Y
zhK9z*#-^sG=H}*>mX_Am*0#2`_V)IUj*jo&zjt2
z_4W7n4-5&4Gc&WZ
zvvYHE^Yily3k!>ji%UyO%gf6vD=Vw3t7~g(NF;K7eSKqNV{>zJYinzJdwXYRXLomZ
zZ*OmZfB)d%;PCM9=;-M9_!xyk{r>&?C@yIofvvi=ht
z{u^TL7-EHLX=N2|IkRv~UgG@kwZewPWrKXOj#y=#1GZH>(H`%Wg&TQB@g1JChM0jV
ztBKM3dxRwLiaY6dA_~(SR~7mm#PAyytMwJmn9TvQ^|NK1b5-qUWVmh)i5-b;4Gj$s
z6KA0ZF=79}?A}QsZ(^u0;s5leTa1g$MX`qLzG1f`1ea
zurP?ppi8r`GH@~GG4X#11U^Mp|ME@e7XA9oXoaRejgsmE
zE8UwXl4>6pFYa|XxMjDc#07a2zOJxX)41^1c%QwDnYW{B$MQ#vYM~oP-6_c+S^;0W
zxE3Ezr=HQQ?7jIYiWqfj;d`m}G`|g(d>4EeQK^%t@G9w4_%8P4mVIT>Hro(|fwK1I
zYOv}%$zBZ9XB)$}2bX)gdiTgq7y2jAGP;wNGV3=wz8R6t1E=shd++Hw{&H8nOjxAm
zYd65%n_xHtaZsSfOI+_+>->5MKkPnp(R2peI_5MV47^tKVxSXpz>R|PSlXD9i&A%K
z7b0hf=y_A?m2>7fzoH|2vMS*EF)-Be9xb9vqwUiL;dG?c1OjYyvTo_@w}1$9*M#TqLz!jqf5^^fMD3hL9AkX(hZWK8-@jLWXNabvAy1&L09Hxb7N
zvZpa+eE>7wwcC4xeoKn%FGKywdrAEH8w`#+ExT_ZifGy2w~r_%hhO
zl>v7DSov|;o#^@#BJ>=GVCgi)&T#z^3c<*G>-qi?gmk3@h~>Ef@H5f3Gul~d9N
zQq>$2ZbCk9i*fU{*7Kjoi8s|%cUS_+WEH`ayhKl0Qiyf0HkIsh{YZrOeVup1N;Tbd
zU}6ypfB_lR{T=Uva{^0zRRKmETm~#r!WU>f&b9Yv;ma(u-Io$%mjx^9^Kg}>Tn^r|
zKph0KPD5iv5U&jLfM!`^vpXWwnJ}1+-{f3*I
zvwrv`Obsv4<6Yws-{#&!uQyF}jm{iAU$y|@o8b1uCRZ!5{wF7?CVDeQ+Zg-~OET3T
zYwtu<2#(E|Ea>iCU)AeVTpG|VT!$?RbX3F~rt;HV#PsbGzj=jlw#BjwX8y{mCS4vb
zHmWj0*v09BMqnoMM2Ql{$YDdBnho{i4icSaM141wwq
zd;a9QS)rchJZCQ-(EHWuBsTA2*uPzx@)H+t)gu+UD<7MH;
zfcqKWw7ABT)%gxVCf}=k`b!;fdsl}yfqUzpg2)@94PMt26Y!ag)&#uVc6TD?{u|r2
z_vefH`%7e`<1oc_(DohtPr;WNY>9W>S7?1-UBMA_0M9kV&I;jILyodRqVOWH2nVa%
z5N44ZaEFMJ%cOqgG3D!dc%Wz#r=5Sb^SW(9AP%(#!ENUg=G4oG1sD?r6aB^DEaggzh
zIE+q@E{f3)Qfj|j$T8J1gRzEttyWVvFJ|%s!#6Um!IcHmwbj6TawZvYYI61U^Eyae
zyuZ+EgolA9DQfryo4cKM&IBA4B8cEWBY(g8ipLF|Sg3)xLLMP!eUwf-N4C$&FWl^0
zS^$A$U{6JeUAj8!e14Ys?r?yoTjfoJjk+NKsq^j~1-Gj-c5oNTeriUNU%N6Tp^^kA
zH^b!+$Vilw&u*Bo|C5|cgstr{V6-vS2}w9)
z{sKW_mckgl^q&G`s5>>~61;anysm&S|6pE4yyX|)>povhb_YrF;f^Vee{Oru5{=}*
z!sDItEkbvbFjShOlB*XP2IVN@B;cHKAzIyVSDvDmOBia-eL9YMxuwu=8%s7BRUY!SDz=S?((iTNUNv0Ue6kbPA2b-)&5~G0}nA
zRdbuE-emdtYI-Oq41;*9zMvyT^_+jY?QDtGw?zYx-ws1#ZD|JwHw+TrbNSLlIlHUj
zeODmL1&4R-*H}I=`uzyuy!0;geq}v6m%A8~Q*4S))Ck4mMe*3G)eBl^st()B$6tHL
zH^8*9-I%??p3N_mN=Xtj{KV^5&&#<_g(PCBcC@qiUK8uO;U{FdLuk@G-pjaxA*Zj9&)TjyDUC
zUSmzi&s)}u#e0?XFRDu9+D22bK25;>;M0Y%$@pEcGTQyZmK4~_XC!}4@7#*Vc5Lh|
zHdLyKC9z}1;Gm(7qZHB29{wauvIzQK)tz}>(m){Ekf#V{1D5;tprO84Slh>_2Hrz6
zOPUWc$j6w7MswymNVQ?a0TmFEt^E!WOG88PzQ$ug6P6UExK4F_COa8F+2q1}unC_}
zFyw*2c2t7AglIy-*O#t$@SajtOvGkzK7~@Q{juj^z!=C;Yd99e{kW!;tYQ4s*jXHB
zygZTaB2DHj6p1BH7mA$aYocGqlFag*XLgfN?L?^x{4VuvaG0<6Y)9(*QT$^B;#|V0
zL9K8YC*Usv8t2LxPx2F_pWS7RD1Hos$vXrI-Pg^0^vxVm4AVuZpW;=fIg)-=!OD{b
zCDyz3Nu)aWxz(hN$i#hmKelKT6d8Q+DFJplH{C0tM|dqu_LrtA%+BjGEe@rC9dOcI
z2|Fi=_ym?jX26$Il#ESd9G~UH;;_>|bKX8T-rnCr%_aV*QYSk
zyuXuk8X}BS&FO;Ww2@w4WZ0Z;B?i^~(Dav!zg`jw9PVg|o_XA%zWOEpxnUI-$uj4?
zdwEbkzr^ik&Mi)eve?3&uT?lZ8w`QaG+xznX{s>g=w^O|pAztPkz1_Jseo1WoO9f!
z*SxA2Jg$HeLH~HuAApp2JT^_K#6imQ9S*Xx_C0=`P#E
zFLJWu|BVPt*G2%_vgpt{>NM$2+VI`_hFhe{k8s$4McR3iSsw1bU4JUYv7io)lvsZ1
z>Ss1Fzy;(JO`SUA8X1rbRd5+RyX61u_d*aOv?njiBfE8FZifNpjW7#QSqoXWd17Cc
ziv-Pkn;*cIV`pmW=QueVtdRPwb|A>fGuKxlN$
z^P{99;w1FEYe94P&w(Y7ov+bDJj#^^1_^bxshh`2EETG5LnFeF{#DgBf)Rfd7>|wi
zFMLcQciGafYFIoazXoKyTl?ix{rw9x;yY^21E(FUlL%4SMMwJ*p{=DVmaytW+?VKK
zk7l~tMA|=t=ZnU?UJ=al{2>C`C3lej%2Jq{{sBmWB~coHf!&~^3*y;snfQ3mPgB~o
zGk@WkocKF)cU|-_eXpBity4U0_Wj<66V8jkjU@jLgAWS8ao4TPPWgf=HtLgeKXlFQ
ziyya2cfm^1s;xq4hm<7GJpv9-YsKSAIkffHX^uqu_}5AzO&Xg&xbA@aVxF>JB_n%x
zmgo9qvdqfS6HD8$5SG`wq6p*L53OMc-QP1rP?DT)4kJt~c9(d&>2j5wK!zG%RZd!V
z5v;31$OZ9`o-qWtNt6Iu=xI)eRG3FW@xx~2eg0)tjtlsapQOSQgh=}&Uc@F!90;9G
zQUF{#qbrb>>;z3^pNSAx$%`=h-1b6_lpFvC>Dtz|L4;E@~CDvxEJuw
z=PrFOZC=!FZR?~jNOdj;rV?Ks`5`C%qz|~3k@T@{+Ih(RU`y3&8!49iByy4=X1J35
zkG9q?w#9bgCDdVd5wUcKy+lMVwFwelkCc3z@QXn)8+oERR|Air!t{V7FTvgV+3Z+?>e>(nFBF
z>a?r;yK4*7lw;7-M)7M>L&P6*uDC}$wW}YLofqyVRvJvsR);pyRKUW4Pu6`UObV-b
zSqZV}>@uAFo=m^Yr_4|5yLc=UH)vOu1o_k0+=_ep!{o*S_jF2t+Mp3**prB3pe3|)
z|Ff~@_@lS%q7kHKYW@cRgyUT51{
zES-OT`SXY;mK-)hw{{uXfb7dlk6}W@$bSG8<2N97@@PmrvFVhgZ8!zKjgh`Tlcy%2
zoht_V!6&Z8>(r4oimyKb|5aZ;`mrh9XzLfWB3nOml_TJK%@6Pc0-MFGP1#~FUxH&n
z-Fq=!8Z_Hosy^x)3=J#+*b%1@u9z|ue`+nMv#k;|c<1yB14et^URIckqfSs9KH)`e
zzQrh9V8-u2x%O)o_S6orH%e=R{QEi&CHNZ$=b-{V%nk<4bkJ<98JJi-MDlOCfHn^m
zHwABgaG@(EeR4mHVP>#Fb-gI{aeSvh-{)bN4{V3$QxuhUfttcZMceakkD-Dj+)n-2
zlk($P?AL6VrhXAjb&#{rQfKrRr3e*1kz$|%fIVFPvCj}`VVW?f1kv2k8FZ@IIcZHa_FUtJ&BQ~Kcx|DVl~Ao#7@bMj`gZ-
ztOKP+=!>1kdlTH7?A&(6^N#(;pHu2y!#A-?tUku+tem1+dLd~?{5J{OtAcUhS2%5Y
z)_AYpvDejWJ7@Gk6A|B5rd3aWQJ|HtEK9qGbcirXj+NK4V9F!fUMbGg9?g{8W3*rg
zVpDeVC5X3$a;>E@?~?v8c{NQLKKi*17`bLd_M_x@kwIWMoaK=JX3GiNCY7Hkdph>$
zPYi{@-UfsXk4`VOdS$SkFPu$EGL+&bzP0+u%B*v;{_{9$Otm(|;pptw_st%?`4*|8
zls|OsZ7lU|L!jF`4l=e2!b)O$(g5#IY#UX`IREn3_*e=ceO;1RJQV5)pS|xa+5CFY
z&@N`0xA6i`Thy}I3fFs?i^g)J>vl0c=d0f!B<3>R+f-tK)mBfH?fzfKZvsuY|7D-JK<4_!$E?1uwb|?Qki&c3?J4T7nt?pBC0)O7KiE@oGIe#i
z;_4!oLTqFP(^ju-PBMS@3)_&eJeK?TX5~y@M=w3BP`aR6;_-5)tS8a=$0Vh_z3H46
z{#WaG1i41q9ZWcy@>D_(hw*8Pn8r+|SeXgSuLL!olO;QC0n(sAw7^EvMhto%0Z$n-}?4bQsrtm5mcv!yQ`d+;aGa`1pxD>;fc2P_7;E)}1=&781_gOYQd+J7y3JO$MBAex
zto~GT=Dh~unn#k-z*jw^Ul=$`VQRyS>y^ya`=>E2u!?lo-+g%0Q;~zX1y{ZpGcrd^
z%xPF^*hk_nG@*Ygo@3$V61`V-Y${%mrPJYe*Nt=u>`tpJ+h8;nDZ_9=9ntJ26I$p
z-Ep{LbUGB`Hy!;4NrC9370c2-Rnz+x8h)Zqb;u$HaeqdaoKTqeR_=g@`0ik^=66oy0oB_dWHfjp-(X<v6<%o
zWbT4?R&UVo#UreETcv^H+AHCv8BFA1tl2BHgr~Pk+LA-xB(ksde$l*~umuaNl^qzb
zKQuZ$7VhD|^FVvVE&V+79`V07Lt%VvFTk-MDrTz!`>i+zGD?r1rW-b0oheC>$)jmG
zo%I_8c8TCmoZxP(5l90BZlAGB23}`6Qn@U^iH^Do%x@{^*{V1Ky@%BE-IF#Zr53Ah
zCr`eK9?sxI@8Gk4Cl6w%ybrh_1c1TRz
zjyY9V+~r|U#SG))dENAksCwG_^fMBlNcy~$kAf~Pp{xNE^%PNxAYHpzl%>M;?9AVP
zsVTXiUcdOKqPADK?L!B!uNOxSfWI{QF6j0QvvXMBM*0;NBQh1K*$u}iUOD&yEDcDM
z6|kIIz5ezZu}XQ!wth%?LFe*ku&wA(~Uj8XL!{nWaN&QWlfai{>@h@vu?Oc%wh?CE@l7zq~{pQi*ji3xR~Vb
zsh=4(@L)P2Xb@XQo0(5W{!XG!=kVf(vUO)ii_0Hp-jp}w&pkQPjG8^|aJ2l*9y6w-
zCBrr&w~j93+?NO>On(e#dQ4tq%1xpitqY2O0*w_3%bbY73|-rgjrStvHD}u?>d(5$
z2T~+8Md;t3j|Yb`A_jD~8N|-%yQtL>+NzGZp-7f?^7y62K_HUT;f$TwIxyxN_aRlJ
z{JT#t$3u!lp8uhut>$dZ)EoPXcSta!3(-~?DQtu+e87fxLeNU2f*0W$>d&B>(3eJSnkY4C8O^fZEl`F!l;yVo6n3-jZTl;oIL%QUt0FtSGg_?3l
zC^_y@$V!L(`6&N3l{HwiHpr)U?5*>Sg##ymin$OXaS@H4!{!?2P6yc_-#}Y-7f2gp
zUaEHyR;UrV$JD07@I~FI!OJZXMhl=}*pKt#?Aj04QHx^c`;nr&GUtVa!qg{w;i`~)
zlLgSPdP*{w6pyImJRXv#$+wpNE*54J8uy4<$W?jXfy{XV6$$qXp`+ybSnBNmrnkOP
zE0WR-a9v&An=7?T1wN-5Reuf(sb!~niYFDkV_lmrRjH&N6Y>K
z*>_%2TY=pRchQN)E;9{k_c^NpC7@
zHP#66a4vqNAAxZ$NA+~79@%01xuttjGi$X1(CKJx@<98*xO_HvbYo*QlduO+6nJH(
zN#%}&mGgafenVb%jG}^le;z>YtZsz;(=*dY$L-Gzo#+kQMZ`MQ%u9R*{QzJRxYy1(
z-I!no|LE=oA<<}h>5mLx8;Nu@fG5(`bw2`&0t>)(osSZo3iNw#bKNmRfRZgKgS?A@
z%^!c3b6aT7rPnTZMl|yJ7%WBya<2k0wq&+{AQ!)A|J+H5{|w1iN+>U?PJIF<0kgd2
zbJY|Vwmvkw1u(-<*;;5sc4Mf|5%p89Zxcd|ovwdd<-_X1ZW8xLA3Me|RxKJrz)ddR+nSAR>K+(lqZLZtIrK)F>VDpVgZX18@a)v$
z;`ABrLBWn{urXLft%tY^C9WhD#J{d%(`P~c_!z0t8iyHa#=}_Ojk_|RvKqeEwGjGsL;jtifQM=c>VX&wpmdisS>KFYz%wU9pqTIKqpd4yEVj^=q{
zwQOvg(79LCwbc@PB!i2LIakF%{+D8BbNf8oisnw7w@W+G2}SZI7}%jOhb#ViZzO);#axqXgG~k)I6rqBj8v?nS!*M`lx=$6sXysGZ1hw?i*7$B)x}bc8I~QvN
zSJ$~L+s_pYHQeo~^m^f7+CNub$
zozTkFZ=m?=EQ>3sG8SsHC;3l#ZlCkMnh|*jk#>x;#%s2m^{!ybTBz-~^*sO3a?FXT
z(Frf6&fpq(rMxRzk0QIe#`EMVKmR}~Ea#HvFEI|PMTe|3*A@_0tW;FBH(CJteP{xw
z8NpIBgo6#nhXw{$_(37n%4g++kd6EfG*cD%4z07%NK4FPPTaRLr={pvptVNmyHsO;
zQN(gUTH9$(?ZA;hOyKqK6z-^Z-kf6n-A*}dS`g1;Vi-E%_E5AN5#5|PIu3(uq(|jEskcr)L$Loy116P0YchjU|uzTNA_9#yN{Jh4AQeMPuu4r
zfeA(t1O1#|PK=3Nin=xU5zGN^tC>YjCkA{y_8%%F@yR>cn)(?ji`@WxS~aojmi@Ih
z#GSsIgnLYB04;^~rJs+S?yV0ZbFgA%0<|?>J8*tkbDRczUNt9nfs=f(R!=|A&*Z#a
zqwK__+f|AnYmPE%pUkrRR3&h_$i*j{4PT
z&bhoqk8hq}lai^;e6M=^5bEPl{M$Mur4y-xnGZzQp7Th-EC{1PLZM$~!m|-I-DOoJ
zQl($*4@p9GW+$^M2ap#3{%mz-n&B)uTU%E^mM*d*#adtJ?s;<7oh2wWS?;YFXF5ax
zW6n=91CKh73SEeGl{qMxv}me96Y-;0(AxOtwc2KSvJBSIlQT}BKGsnrjknFQZ^g=X
zqrc>03yoZ-5&L*4m7$k&Z_jYg`)gbGCLO|ps;RFjRhu%|9pr?$E=F;VkC|cQ8+^1V
zD+THoI<=y7a!M-;xI=fm+=YmfqfLL=&wK
zEG?jci-^ryMZ75A5jfOhnu2hr_6kt)n^g`{ATy#D!Ca6#IzPqIffTi~TbEaC?s4Jd
zNg8IHjS#@HjH>;D+sS3H)^}(WR(L#ORu2YWGCdpM`q88@fnvn2q@KbSG(Te&R~~I@
zTmb2-PRb54icVFLUmBaU>Ufzc7Hf@-kwrR1A>*K3Fdi}4IQgj
zR9Kxuq$=y*S}D~*&xTxd$qEdfQwC*(b*sjY;)+s;&{^4um4Gpar(A~47$-rSJphkq
zyq*9<-eeiK3Vp7v(u=w2%9|Rujg5FzN10j#I)bN1RGJ~BI=C*8cW7tOF1fyo?F5dOYD_?w6<-}z;i!Yi`o{veDaV~?K>->CaRDlv(>Dtk4AmXx}R+aGf8zC?+mURa_^FS
z{?Mm5bH9Do4%P_~{60lJn^#xmxu)BhWv<2@#wE+k!#!+?@od7B8<$QiAkYtou+ee&
zv2J|P@#yb0gLe6bDj@2G9{_-fcr~PNpuv(VjQ~k1J5v2216NWA=e`0qRP{_6K8yEU
zfQQq`9J%jn;PV2s`4C9kNz=47tkEyk1|0I;JO(=BUsFh#OFH@eg{@w11+e4F0lLKW
zdWZ59!wDtOZ)^k3oJQmpV1KU5@D6kE+@WUOL_~g*>d5@k@VA~5P<^q^adC+ai4;lG
zd2l^bV8ed__nD$Lep
zN+aNq>e8jOa4V3t+Kd;LyYk89!O%5GcL@x7mtNA#fO@)GK306x%I@Ts8~
zNhlf&cd4uTxzIb3fZnFpB#M!zcb>p{Aw?c1+RLt<5Gunh1tca~l+D%9dnkXL@82Nw
zM427Rhr*DWKI&V!hBM7J9ieGf7sW+__t=E|4Q6vXQ6~z*Kyw?LZkD&o0D`k>Y`)bZ
zTmcHWQ(F-1_WZ+8ij`{IaXAc`$TUVK4nv7+Qy6hT&dg{>OkiNb1+|)hyXg=w#6a;D
zVrFvzCab7t`$w+iP?B8T
z9Z!e3ZvW|suH&
zeTJ8s81s5EFVD}{pb6BMeO!IUs>{aOv0`XLnjj*ST|(=8ZrO(4!`SzlqVJI0N_7a8
zzCQpwilPmC1}?Ah7+%!;2Jmc$NUcFDmd{VyT(4V^seU)@?U&bCcX?j5jj#Q*;YKJc
zw3N_}FK=#@6hC<61G6lJ
zudUy0bVrpkP#AXEeWnD)o<}{*4)l~r;CTw92P!*#y0dM+nyR{(A8gWTwFAK#uL&o
zAyD{eZ64YRLD8YsVe`V`wgU|B(>wryzD@0rZ@}qVF*L4-YSfLk8l}~1;E6HbXIQw(
zq13^}c8(6ZC_%JHtfz;c*<;#Y6uhfK-vc?%=8}_M>}O1(M3>-R30^LU0ju#Ee8$eP
z&N}Uccm%2;Z4W#}m0$x3i@$%K*Uq|6dXqu4*LTT>`3~`e?Svk`yiKOr>^rLT^0YLo
z++{fC?*srScr^|VNegXjrm(|JDCyvSDE0XmNM5vgAw*O0&!Z4xho{w8hdQ%+-{A~C
z246QZ>B8m*NktER3{+wn?fnoZI=%HS5|x$RExWq>n>q{Yp4dpqS!{vpR)}a@u~ceA
zsNSk2Y8ZxUB~b&Ro`*{(jg7zgb8|s0Aq5jFIZu9=1AlNva)Z&TPN*ElC#8t+4G56X
z{K<89_WLnx^#ZDTP>&lr3&`$2#i6~w9O5=^v#Q1rAP~!`ns_0Bsg{EIAl-P@AAiUl
zrZ$u8bcQ39bA^F_`DiDvChmiXP-Q-HIPEy~Me~b*oW1Wuad8>@;@U%?wo-#ec>@Ev
zBhG2(isu&NfRS64*ae=2czRD???(v5dEVCHKLX&au8bjgBPuO-WI)GmwINprAQ!|e#lP1kLYZnUAYg>*gZ0Ee<8S`eFW*An1NGJ7};eo
z)1z0nqLkOTw08XKRJ40sD?>_#D`W@dox%=?kKehsKcn<`!5)_U2;+p~4*4*)mqrA1)Z$$P&c4rJnAA?#=
zvW1NNZrss;CrH~Dbn*=S-1ATo({8xRa&HhM-6@ICnVu8U4Z5$}c`)H^o{{T9@^oh8
z?HkNIm^4xK6tX6S&8P5n^k<^BIQ%)P0ui8Em1c5tG~Cy(@bP+IoQPL?SCv15^k^@R
zg5v
zClfL+dpUuOh@-uZSTTP(`W&UioB9kuZE`g}HZ|_8
zGXxTzqSrD3VXB2wOh?s2p>r^(1mVh`uO}-rv>K^Aksd?s&^lnLvYJ>4
z5{k*##YTsT;Q#Yvv(bhM_G=WP{UHW#zp)3EPT=$yF^*G*L@oy*?OU1fV3YbK4sm0e
zFbAImIu`DrfQv)IXsTsPOD#1
zshL8Zs}b0DXHIs$By)HjJiR8Gz5pHcqZpc*!h(NCo%-&$d5{_oewVAz1rod-lOwbK
zg(}`v7WgLi1sN3?jstBagnx&}_zU{`{oFNSh!HM)d4e!#y69fCb~?
z|C@1m;eH|Is|jkJOQ^=>Ru8q|9Q;5u;(zcVsg7{QD{d9h8APR|81_OQ&TGIe-5;Pu
ztDdj$!20*M;0=j(!)WDuC3#ZiFR|j!l6#b9fmO!f)
zZ@Y}r+$=5F+9jV5X2VIH{KaGAPHqLS`m401p0*h|fMNeZi1JT(e9Hd|NOwW(Li$j$
ze9*9CNwu?LB6JL)EVB&+F{a+3&N;l)E%UF4%e_@WBwmMV4eN>z6z5psAYUvVaho~PNWMN?Zmx4@U
zV61*^OzC)!*L6w!BcJ&rm~KevWCG$k>=RUESmH*mY=tC;GQy8c0Hgoy32p>s`C?d)
z7>{CGiYZY&=%+n#$9!w?FCqZ??)%{}A23aw%))LNhQM
z)UY_)*m-shrQk1*3h}dW9kAv2X?Xt-s6FdrF;RBe=bl*!1<}q!iIV>P$^{$@j+$?}&Z<@wz1=t=
z+tAsEVwn2K+OcNI
z)Z2=bD0ZZ3&#bDeGt;5-kK9cvUKNU64sRC+xBAcZuSRA?91*o-u>rLn1t0If?WV1n
zhda9e6AR3QH-Tx-+{aO}{_dn(Uk9@ytJd@%+0nMNRL?%iYq%Aw63WItxHu-Z@4HYb
z8u1|5epmWWq_cEYc{sT1m?O%a9_ggg`wfR
zTHW@QJ@61Dyl{PSG+CsX+{ez3%ki$oO@hsv{X{RzF=T|l{t(U6zT-}(O8g&h2GNeg
z9ELvrTf4O|M$^F1w2G{;N>xc^r+2N-=pHF!UE@l=E1cLJJ(Y`|oq@gg`TY9JWWi26
zNiBQ=z62EvXp1uz*Mx;9Uzv+wALCrayCoFpGVLj7MWWJ|I6zr+Hi&J!WqmbNcw*U}
zdc!l$ls<|7BJcyg@1FRw+qcR$5G_QNnok!ChZAS8_D#4C<=gchoaZOib$Mj(NIbcg
zL<=8Vj?Igqgh^0K!_GlQ=V9)OrZkw-az_VohFA4;@YjaHD!7zn6^3+yfsGfevB!%_
zOm4exvH#+;7Tyg9KcXwh89>JwSka0BbY0t9ki}`vXm{DW0SXS%m-?dbciJ*?jt;_b
z=)+S!G^EHS?>xyrT^c@o&Ha&$F|P)m1c5q}wEHTAsRI9P(Nxih#H-^BpCdhD{GHG!<$%ce?1F7WqnyKo?hBIODOKhOzcF8M3n~0{aaZN_PiyIC&wd}{
zsmU728a?LQc(X!P&zeBIHM7bO?3TAO!49?P@$G+-uNnEz`jsBD+!9*?GAAjN+%t8Vi}BeV2*e1P3)9y?+AVENnROO7HZ71HY2){hr$RsV~y3pbi_?rx)gxf^|G*
zFxRoZ7U^G)C#TvJNjSf6*Gt<*xivGV;s7CF$1vZ3x#!b6sC02Qa?^!NiESpq#mV^BVDqU*si)|9$rf@T@2sze7QBu1ml
z{Q7?Nun+imB5oyy)W^LCX4v0u7DNm9`^_mPQVi25TS0u3y6t_Mf!a+son=gw<=v4<
zP-}3nj>T@SDXRj$)svE1P#de6Fa?;GYk(!UtZ@GKv@b)t?k0=HDZt~MD
zCs~A2`OD(vZ@HprAN-`AYeYTAy$kizSz%)77{Iu<(MVXKVlyO0q~Yr7jF%-*s7i1V
zO|y5He36Ti8dJ)R|5pfrd_&$mJH~l5AVJKH(NJ0T+hp`TR>aMvX!s)UkR0ND9ng21
zAu=yCN|&SvO%{C!alO3RX^k&
z3B*2vv))iHYP!{o{VP^A7XuMuSZQ@2tk8A^+4m3WvYmB|85kxWLF9J0dO&4m%Cui(
z1Frmg52ogGx$wFUu6NetyrO@>@jkJUPiaS+)-mO|>AC6I1wnwU;LXz(GPR=TEnQS#
zZ{dHrjfzMd!s0W_CKXtZQneHGO=d;>H`KDU7OrLf^%h#+U9Ii6^$z8
zX-K(deeaxmm$?$O|6WP-5Y^4?
zXv=yGHmlC*?h$0sqE@R1tBIs{NH1j|A^~v|!$vT#%133T&LF&F>@Q@qkN;_XhUDM4
zv`0J>@3af5dh~|oA9Oz;brR|>M&wr5i8;TqN(#244P-sxFI`>s4*KP7qoLt4#GJ`+
z*?ejB=x^dW#KtoZ4V8Da*LgR{rZu@{4)|8?g|<`koU))#~
z8!kAO@3#_ndtIbmHg=_de=1e?Xp4u5Jbx*eCdrqyz#hFPRbV0WN%~^B+Bz*Zd9aCU
zdGf6w%6l0h1DeSg&0cqth?@
z)4%B`D9Z>+&~;p9n2!ZWD-v?n%EDA3qfEZHeY%%D2sNF63VAFY=Xs2OE59%bD)Su$
z1*nBQQxX>ICu!Y_$kfF2ny)++4Z2{Y3EO?l+FrJdptlb_i(
zspgBZOIOmH4J0cgKq6M^q3m{PT;~qy7)X$K#F;_XMzBTqx2FhXgW+hd=8rnaP42pP
zC+P8@0r98B=Qptd*BUj{e6tkK$2B?3Cj0M+{!BK%PAF|58i%2L
z6TeuZeTF6B`MnNu
zB^e!SuKGLWX#&^35R3GR^8`0ah`vZ0L(M$#7ZN8Nu|&d|kZB2Hm3l*RM1R-d*il-T
zz7GaIp!Cge_mh#wf2sbB)2!aB1f9$n{nJ0CNdNAd%!KP9q$AH4JMsUm7VW)*brbK*gFce0`QIean(PHxL_$Y7JHFQ&gUH@
zwj`O&ef0+p=`ecjLU^J}21GP}Dn;hZQ|UWh(d%Dwn+J)}scyo*S2+!sqRVwS`(dBG
z&7QxIFgFnkh#O)~s9C9sPQ&DY!V)AU+_p=QW9`kWs|Du!q$<@b`-02B?huChVIgZ#
zq7dXrpzm`2-d5|N7Fvao^YLoI^oZ11e^M8A6YP5&-%^I_ZT_`KU?+uOg?nqXy?D1Y
z7^o}pnpy`I$!qKPE~V9)*<1sM5y_DPnYc((leGw4X9=ixJ*QG_#xuO=)~`y*l9KY
zrcLb7XRrIG#BBD+qMRRZjzzTOK%nMR~>+?ASjxW3E%
zj0X7Zz0Tbi#3fx6tA6K{6P6?bFim85!dZ86>6vHFWuvR|X+-~pZ&*dp?8wrEmQq*u
zr4{sR!%ejO%L;ct1W=;d(pen5%YQi4
z`I*UP6XwJwyP#D-2&_XVG{;A2kgx_rDri!KKIop@oakm*##a9s*5ukghKN)wJ-`k)
zf{dgwqzZyHnM)#^7BBE`qH@7NI<<)VPpLqy9I0lzlZt`~kmTt9Y39nKp?u%IC2O)~
z31cLL>`R8R6+$6O451jMB#dPcvSta7B1>ftB@|h*jIqU&zV;;wk;gXHv6bCBqwn|k
z_I=NL-uI91`#b0T>zQ+(=f2N#-Pf7x{(L^ybzfVJ$nOD6=~rd(Tbe=BE+(8kk8!zF
z+d)ZIZn&)}#+WgJCM-DZQg7=^P7)3?}mK+%gZ?a>Z90*^UT!wi=kk-d9bK9e7klgluOY^2NbvA4}1JvS6T%3iW!!#Ad|p&h0NJ`Y^WijYgx6kX#zwJkQlo
zxYkKfs&i%8XGdY9q2#li*i`a+=Az@zQIYb+{K`|qA4ED&G+726N9@gG)Tp;SYwua_
z4#(D9U)+11+bK}xs~PqUN5lNGL#nXNJR%lg>x^4M8|GL!_am1fX*KK&^+Rr1&SV=sF)jK9(f4Q+T>WHBH
z&q>%Rywc$(X;Qr(Ud}DiF9a<0iio#qwS3-hg*&R|FsPu;ImrqdwQWUS%|7
z8p3+#tjBK@b^rt~>6H-+-DdMRQe-#*U5rto?kMSA;_{=4hIwyZdaOVJyVI@7KX)CO
zN4orS*5n|ZmXaU_$_ycJOds#E_mtun%lUsYBrKD9+{fWJz|n#&j4yM`kM|$hQJ_2^
z>Aie_A6+_LahcnBEg_v2S_0BqOG5ulO6|T67yc*dfnwxleR>XZ)lOH!V#Fqx
zbZ`-b?KENk(y9*@FO&ZQ|48$0<`A?*6nc|cro5hah@NebNKKU2W#1>}5J{Ti}lo){HVxjt{2gChYsYk6@y3cC(-&P4W
z7(8W5x+cRDBsSQgZJbhc+9A!^^FM88KrEF!`$Ef82n?6jC)LooLYDm^G=DM7a;t3!ucZyWs
zp?9q_?{AZ>LJ7`>u2Bcv4SDM?f<*!Y3z&0Vjs
z=W(F^iNc|RtHlUO4wd=)CxZTzF`a=@N!#LYpe
zNRiodWX{)`D3}As95;YT)KV|IJfGShjU%-T=si+$IB18_HFCWl
z|L73kWKKbXe@(!elWZGf@!>s5a8XOrR5_cZK#)}&zBw}fEz?~P%d-4N?-A3^%lm@#
zF9V&Bc>rO+Ek$@fefRM|bUVB*18FF;;SINss%A@5?Q0;5MkpnLKg2|)c>Ek0NYGX_
zQ@|qP@WhlDJkNbb#`JDX?`7bsUc%h$GZ(>}GOuyvbAf8lVo2n@YM?(csR9rfv9fw*
z!In-rH>3&0Mm~?>H~8o&AN&Ys@$uG=dAg7~eWNuFz30+vPoN&PTp?Fi4#cjHecC0f
z*Jd$!0qb5~=WWH?cH2K_#tHmzMCI_O5A&j^0BXv~`td2k1>hp14i0oQ8!v?qzY}Wx
zSGKNL^?%FOy;S!PeWdibHLOh?*rpEnpQhdE^6U`jwc~8g
zNJtbzQ;?kc6s>5X@6xqmm<&EjbDNSMx&29|qc<$w-MQCq?GgH`=-qqlwyQy`hOvKU
z>(=Pa&G41XLzpc)-O1=Vo=3p4rK`lcT^dMiF?n16u(g`wl*Bb_P|KTX+H<_w-00p`
zOy|Q-+yip5u-@spo|ii`k=vYmJhu0$l=xT9HPR3n_QOsUuPtZT#=P0b^W7(#JiDmRG{_lN?`-bLU!vXrGTVm6kiA3%Jp41GRc|f~LX2Ch
z@28SW!e_<(I^b)Zn|5Cz%4tREg#w#1*8sSvU5oI=r_n_Vyv3C(&0d26URR3SPN+&B
zHs`z>j(>{nC3e!F-@@|(L~fW|Jv4q6*%BVzek{*gBrXxvg}G`?b{h`;h{mX!L((H^
z0Wrn1&b=A!kAoFJa$%OpAJfxn7G|F9HsuS0R^u>7`}fZcTu$YG@^)#~NLFlr3Q+Not6Wvc&kW0ikM
zkP0grv4$l=&&xz^fbU)gNAQwFCg>Xf%3B|@$Ry+pjx?7eT!Q<Oe+RiVVTWyUW_cu9FKswc{u<-DKq_9L
zs6apD{E{Q}&mYF8DI-~iYuDK`vU=Df#Xj|Kq5b7+tGGZqu#1;x?**-fcCPOb+s3F#
zYaaXKAAmZk4PK9Wj-svmhuF^41O|;wv0a0S4HL}rae)~2B}AaQ?CRFCd`43~k4JIt
z72PFq#szC|&{8`*W}-oC8F<=kqpY!Y?8vJ%W$?Pf9!z7m1(T0n
zvegsMFzI$D2^cifw@3oE%A1pZ+2?aZWHscT=&!Mb9?ylwQknFYhb+2ro;PowYw1x?
zG}_8sO4*|6^pAfrxe+=X(b=R!6Mkl?ipFFk|80{dRjCF_E;S}_N>b9Qc5FA1%#xN4
z$AAP5;B9!G`k)Z$h9Ifx|J&u474b!ZTd!ZV$gRFF_u!W)3x*np-v!_chZPeFmk_S>
zdvJG_w8-r5m95A!u9Ie9M(sjvRrX@&?DFb9w9DnYQ|X8;s=hxJG3G;77-VAjtm2jt
zx0h1n=F|*7@J9!DL1JnGHMrBO^le^!o?@S*o!1CqZy<}-f=0b3K42lO%as6@sVUPg#c>UY?EDJ2zHX__5%?Di5*TtT4Kd}WK;M
zz^Ig)NKh4s2Q^ml%^E7p00Fb!nAP+?APd?k;>&2R%4plMz5K`Qa~3UPQ%$p->H_R?
z5o}wbAwLfaOq$YGek1ms%3F9m9m5uK-0@j$)rC%sr{JRJV6KutMkPzC6Y_r4e3q$s
zQ))lQw}>vi%XUPdN0~pgw*>Bl1S;*=uLBrqgmEdiHvz%b)&j@gR&mJ}tn0#9pSk{u
z_7#*5KO?p$h>Js*3)9Pj3wJomAdSfsn48=usiIAV;@QUei<0G*F!n0E!F@m4$`ComdP_@~*~uXeRIsT$b|NlAhC6;mgQ=d1%dG5cCziF7vlFsW$m|1K{47G1=V6+C#W`h!qZ
zxm`>Ok^eC4*th?X_gA2ZK1Bi)6yB*CDDwH@4Br0pm`oM@rvqp$RpSdAEtF(T0|d{Y
z7%pr`@}3Le*;hnxvA<}hCxTsGaC5W!l38c>0#9E~CXSRgz{$Nh4Rnol-kiN2@*lg#
Bk6r)(

literal 0
HcmV?d00001

diff --git a/docs/assets/textInput.png b/docs/assets/textInput.png
new file mode 100644
index 0000000000000000000000000000000000000000..74d6cf98cc91b1c9c9989f1a3ff2f020767ddd6c
GIT binary patch
literal 2804
zcmc&$d03KJ7r)k+nQ3K4Fsg0Io3k+>qD6SRes3?6IrDKewf{{_V#MGEtYHFp{
zI2M={s2PR4shL}aVrHTRD6ZrNxfG4tJ2c-j&olqb_wRR~bI(2Jcka38JkLFMNjTu;
zVmQxq9st156~B)FfDWvcv*ym$ay|QH2HHV~MsRTgJn_nYt@2%nqo*SP#a9icf^-3x
z4Gwr5!f9~;Am|%62LJ^C20%8z0`s>5Fcw-99soB0v>}K9A_71LfDYL@LAGwdf(+0U
zV9x|-CU7MKABv458RJ9II{Y;o5FtRcg$QVK3IG%c&;g)9fQ$wddq6=0CR!_-;{hHI
z=rl)&>}W&rv?1d#^hiJn!vMen5DVBR0W=GslYo0FaLs`nS&%0S_^=@o7lg4u7#~FP
zpin*(RfdV?gLAd0bG1%EEJ9QcCZ2_fF9Y$l&_yxoiWqZIjJZ-vj^~o&%P47OwA*F)
zG!c>0PT(ks_m#9vF`1{PJkih#70f3}X1Ru0rD16^fB*{(lI#J?5lVFjIV6bf19*{u
z9}4lKpt5L)9fsjYW7rW+wdX+XITSaZT$VAqnh1;
za61rw2f|Y**xd+MOG<=0i152LWm-}q5*|xb$WxZ5E9z3!jX6ji3u#P3q&ezlwnoZD
zI@k&Y59#J2O0K4xj|}pWu`;PtDwD}NIyyuOg?JFD9YbmnO)Y|m5k#U!+7U#d5FvwN
zL@hzawD4b+F^NK<=<4d~>+2gD8d9lLN)4i%M3e}koa0-reqDR{X!6m@cAV}~gHvR6nKRkMeWZ^O*T!%w6TvkD*(+UD&n!mdzre+%%tOE2
zD9LIh_Q&*CP9y5<450=3;4*_v-E;1-MoI%tr=0OJ+dz9dB(7aXjdz2t!@aHdBLuLo
zjbO!sR1Mb7eplcL1&@bw;V;ilejyCJi<+pjB09_a)sLs5
z8dWE*HCNo(bp9bM>hmN>1NU^WRrO}hS0{FN{-(1ub%@&QSy{MaI7)6FN^4DdF`W74
zm%Whcl&p34_Fg-A%b6<`?dsJf79U@bwz|??ZqEv~Ymr;6@M(_Ex4O@vOy#;js?i)S
z{P5BZc#i76S021SyM^^Y5^d(`Yv?;jMeN*$i?-uD&E`~GbFWA
zdSMSmST#+RSqPa23cT+XUJYp)N$jVWuEaUM>7zbijE}?}Wc1VrL|i~nGM}6K7%L(D
z3iVFOy>~3#caKW3X|ukM@pT`C+ezh?f(M&>;mJr}_WBA}yKHQXMTe09y
zbe%Q5%6kCa;ra+(XWJ@w2=`rOEbnKwHtp8UKfAis+`HhSd%>+CUcauKJ$Y+&AskT7
zg*8>AC_G*BY9HHcreX5LZuZ7jd7)P3KDIltLbsU_3&w!C}
zZAd(*M$^5wetu>ab!}}QX2Lj6bn^9s+fO6gEw+B1f*1}J>NY!MNAuXO9d{${-1@C0
zRl;~$PLAP^gsSz-;zkqbzPc}0xz6eb|0vZ^;q3l@FI{a#x5=OA?R7$t=^pS{5d6V0mg{22~`^hreK^$l1d}eW})V}Td;B>~vhR=pn
zMG4isSswmdA$L!QeN30}S~>S9Iq1ic5F_(9^6)EBH+yp6@t)EZ^QbiTxFqON)`l*b
zp-VyY=t_9By0k>EK6b+WM{isfR=R~98?bm;km{m8VTl*cGe}kcjF<02dgaNvT8D|V
zWvuX9)Eun{Dyit**8O(zGJn;a_Y0f1O?Ec?r)QhP%XOqZnOKKo8?z!(XS$8L32)MS
z#U2a$1`~N)>z{<_>t9BO^!4_Hop1V?eceSEYs;{;&Mon$42JGZh38+T>r|>fOi!4e
z7~C!}d;V=LIJ~~+dvV3Yyfwj+v|_Q3A94Q!R6u1QJF~jfKsh&TrL8o1$pVa%T>{PI
zb%RNR!qqK=hOXI5J?!2kTe@>`No>ebzJ-|7bRmQA$yUgz7FJ<%7ru~n$|-Y0RYiTj
z$D$d2lr5LFynFlQ9SpyKY?oZ@!_bg@!m7i@W;azuml9J3jOIpM+9}$0Y{=i43s!7C
zp_}XMVuR=xG{t>Dv+)JVvswS#@4s&>O9{!paKXF_tIoequ|cU`p9%Bb+}3dY>`mig
z-ow^jNlmO#d0=C@HRHIQcLFq|$jkId2=|qY7QL)g*{v5Xf#FA)$7|=GqAm*Iw8=C0
zD}SICQ4;eVY6f@@!{&}$Kn1xj$c7(1K`abUQA!SQ+GNX_8FnqJlEN6c=vB$v4L+jz
zuA97VRY}73ffWY-#-?^63|8#>*Ja`hw>qrOw6VH`{1rdy`S?
z4Rbo*a>hN11rB++EhOvtrWXo&pb?$;;AMWY<+SrxZU#@6zp3tkWYoZu(JAZivTAOn
zp3tK$J)XJ9Aj4s^UVyyx(3G_{?pLb?bLo#wTGZXCrn?p$VJHbr#U9JE;jW2uI|x-)
zvxZQMRfM&u;14ofP5o4$Wz76N^&Sbu4L)ax$*(CT{8eJCQVD&-lkYcy;7hdXeD!2j2yb9@(+j-5?R}suNj4j`pGU
zPQfSIWSy&0=Krkvr1F{bBcoUZxpAfTAF#MJe<%7`*$v9QyKLeX8=E8eA-
zkaOD4%Jv55uKQ!`kYxemsO*=g$AcDV@3%ptcU%A7;Q#p~{r9DMj9qh$$3t|S@(Xlc
TUG)9@?Qh_U^V-LAIuidUTp(NU

literal 0
HcmV?d00001

diff --git a/docs/select.png b/docs/select.png
deleted file mode 100644
index b544c665a9ee4505d29832528524f06bf63b4b7d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 933
zcmV;W16urvP)r001fo0ssI2Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D02p*dSaefwW^{L9
za%BK;VQFr3E^cLXAT%y9E;JKBXv6>j0~Sd{K~#8N?c70b(?Apk;1Obj)K%3Dk>CpS
z5}Y9F5qgN`5LqP~x@5tM6p)}GAy`$4L<@m7aoQ%zswi1m$_aQges;!Vdy+aco^g4<
z-X@t!na<}owxhaixm+IK-R=k98^bT`_XoQ*c#ri9>K)YcKc}}9<|fW{obh-(olbGs
zkHCCpv)N*?02+4u_h#?%R9#0KHIR9@4f_dof|IHwh!gXG4FtzL3m}0I+Yi2}>u9M~
zHiAdku#4(=P$q2?1OX2F7w93@xU#>eK^3%)TOP3SnFkt(sq1K|5}x?16WOqf9?r#n
z5J&JNtuq>paM;UK#*@FZvGb~VlGY&}sj@txbsX|UHpC-p#gp3EobwEaLmc)pPI=CO
z=Pgdeeu$^IT=PUW5aP+JBAy?_ql*h3>9WlU57-b-x`?M#i05JRd~NOQ9zIsy%$9kc
ze&=8}No(DALx^LAN6h3%zC-A>a9)sR=M3L1ku7=JPxuU~=MgJ%(CJ67PWWo*g%HOA
zPruvbYp~)GHt|a_T3%=io;QblT0E8WoOPP%-??`rY2^iRjPvlBh$KAxSZPVElzZB7
zk)z9l;Bj;A;p;9wRLA4)+#||8Pqh25+dUA+9FMeR74wMWrgZB-YR$gb|rve^v
z+!(Qe)RG5p)YZs0gK7}RK2QF>r@bfBWLut1%P3EYAdVFtiyCzm;(;QbQgOkh5~)@{_un#w*Jc?{7F4`%!ojAsqHB&^q(^oP}Ws
zLeN7`t?qIKkN!Rze8lP4Ps9UJcqWqx{)8Wi{_O

diff --git a/elm.json b/elm.json
index 966a9b6..1b50a13 100644
--- a/elm.json
+++ b/elm.json
@@ -6,9 +6,11 @@
     "version": "1.0.0",
     "exposed-modules": [
         "Widget.Layout",
-        "Widget.Style",
         "Widget.ScrollingNav",
-        "Widget.Snackbar"
+        "Widget.Snackbar",
+        "Widget.Style",
+        "Widget.Style.Material",
+        "Widget.Style.Template"
     ],
     "elm-version": "0.19.0 <= v < 0.20.0",
     "dependencies": {
@@ -29,4 +31,4 @@
     "test-dependencies": {
         "elm-explorations/test": "1.2.1 <= v < 2.0.0"
     }
-}
+}
\ No newline at end of file
diff --git a/example/elm.json b/example/elm.json
index d7b3bbb..c04d182 100644
--- a/example/elm.json
+++ b/example/elm.json
@@ -20,6 +20,7 @@
             "mdgriffith/elm-ui": "1.1.5",
             "noahzgordon/elm-color-extra": "1.0.2",
             "ryannhg/elm-spa": "4.1.0",
+            "turboMaCk/any-set": "1.4.0",
             "turboMaCk/queue": "1.0.2",
             "wernerdegroot/listzipper": "4.0.0"
         },
@@ -28,7 +29,8 @@
             "elm/regex": "1.0.0",
             "elm/url": "1.0.0",
             "elm/virtual-dom": "1.0.2",
-            "fredcy/elm-parseint": "2.0.1"
+            "fredcy/elm-parseint": "2.0.1",
+            "turboMaCk/any-dict": "2.3.0"
         }
     },
     "test-dependencies": {
diff --git a/example/src/Data/Example.elm b/example/src/Data/Example.elm
index c43a4e9..9572ebb 100644
--- a/example/src/Data/Example.elm
+++ b/example/src/Data/Example.elm
@@ -1,4 +1,4 @@
-module Data.Example exposing (Example, asList, toString,fromString, Model, Msg, init, subscriptions, toCardList, update, view)
+module Data.Example exposing (Example, Model, Msg, asList, fromString, init, subscriptions, toCardList, toString, update, view)
 
 import Data.Style exposing (Style)
 import Element exposing (Element)
@@ -15,6 +15,7 @@ import Example.TextInput as TextInput
 import Framework.Grid as Grid
 import View.Test as Test
 
+
 type Example
     = ButtonExample
     | SelectExample
@@ -27,6 +28,7 @@ type Example
     | TextInputExample
     | ListExample
 
+
 asList : List Example
 asList =
     [ ButtonExample
@@ -40,65 +42,147 @@ asList =
     , TextInputExample
     , ListExample
     ]
-    |> List.sortBy toString
+        |> List.sortBy toString
 
 
 toString : Example -> String
 toString example =
     case example of
-        ButtonExample -> "Button"
-        SelectExample -> "Select"
-        MultiSelectExample -> "Multi Select"
-        ExpansionPanelExample -> "ExpansionPanel"
-        TabExample -> "Tab"
-        SortTableExample -> "SortTable"
-        ModalExample -> "Modal"
-        DialogExample -> "Dialog"
-        TextInputExample -> "TextInput"
-        ListExample -> "List"
+        ButtonExample ->
+            "Button"
 
-fromString  : String -> Maybe Example
+        SelectExample ->
+            "Select"
+
+        MultiSelectExample ->
+            "Multi Select"
+
+        ExpansionPanelExample ->
+            "ExpansionPanel"
+
+        TabExample ->
+            "Tab"
+
+        SortTableExample ->
+            "SortTable"
+
+        ModalExample ->
+            "Modal"
+
+        DialogExample ->
+            "Dialog"
+
+        TextInputExample ->
+            "TextInput"
+
+        ListExample ->
+            "List"
+
+
+fromString : String -> Maybe Example
 fromString string =
     case string of
-          "Button" -> Just ButtonExample
-          "Select" -> Just SelectExample
-          "Multi Select" -> Just MultiSelectExample
-          "ExpansionPanel" -> Just ExpansionPanelExample
-          "Tab" -> Just TabExample
-          "SortTable" -> Just SortTableExample
-          "Modal" -> Just ModalExample
-          "Dialog" -> Just DialogExample
-          "TextInput" -> Just TextInputExample
-          "List" -> Just ListExample
-          _ -> Nothing
+        "Button" ->
+            Just ButtonExample
+
+        "Select" ->
+            Just SelectExample
+
+        "Multi Select" ->
+            Just MultiSelectExample
+
+        "ExpansionPanel" ->
+            Just ExpansionPanelExample
+
+        "Tab" ->
+            Just TabExample
+
+        "SortTable" ->
+            Just SortTableExample
+
+        "Modal" ->
+            Just ModalExample
+
+        "Dialog" ->
+            Just DialogExample
+
+        "TextInput" ->
+            Just TextInputExample
+
+        "List" ->
+            Just ListExample
+
+        _ ->
+            Nothing
+
 
 get : Example -> ExampleView msg -> Element msg
 get example =
     case example of
-        ButtonExample -> .button
-        SelectExample -> .select
-        MultiSelectExample -> .multiSelect
-        ExpansionPanelExample -> .expansionPanel
-        TabExample -> .tab
-        SortTableExample -> .sortTable
-        ModalExample -> .modal
-        DialogExample -> .dialog
-        TextInputExample -> .textInput
-        ListExample -> .list
+        ButtonExample ->
+            .button
+
+        SelectExample ->
+            .select
+
+        MultiSelectExample ->
+            .multiSelect
+
+        ExpansionPanelExample ->
+            .expansionPanel
+
+        TabExample ->
+            .tab
+
+        SortTableExample ->
+            .sortTable
+
+        ModalExample ->
+            .modal
+
+        DialogExample ->
+            .dialog
+
+        TextInputExample ->
+            .textInput
+
+        ListExample ->
+            .list
+
 
 toTests : Example -> msg -> Style msg -> List ( String, Element msg )
 toTests example =
     case example of
-        ButtonExample -> Test.button
-        SelectExample -> Test.select
-        MultiSelectExample -> Test.multiSelect
-        ExpansionPanelExample -> Test.expansionPanel
-        TabExample -> Test.tab
-        SortTableExample -> Test.sortTable
-        ModalExample -> Test.modal
-        DialogExample -> Test.dialog
-        TextInputExample -> Test.textInput
-        ListExample -> Test.list
+        ButtonExample ->
+            Test.button
+
+        SelectExample ->
+            Test.select
+
+        MultiSelectExample ->
+            Test.multiSelect
+
+        ExpansionPanelExample ->
+            Test.expansionPanel
+
+        TabExample ->
+            Test.tab
+
+        SortTableExample ->
+            Test.sortTable
+
+        ModalExample ->
+            Test.modal
+
+        DialogExample ->
+            Test.dialog
+
+        TextInputExample ->
+            Test.textInput
+
+        ListExample ->
+            Test.list
+
 
 type Msg
     = Button Button.Msg
@@ -113,7 +197,6 @@ type Msg
     | List List.Msg
 
 
-
 type alias Model =
     { button : Button.Model
     , select : Select.Model
@@ -150,18 +233,20 @@ type alias UpgradeCollection =
     , list : UpgradeRecord List.Model List.Msg
     }
 
+
 type alias ExampleView msg =
     { button : Element msg
-        , select : Element msg
-        , multiSelect : Element msg
-        , expansionPanel : Element msg
-        , tab : Element msg
-        , sortTable : Element msg
-        , modal : Element msg
-        , dialog : Element msg
-        , textInput : Element msg
-        , list : Element msg
-        }
+    , select : Element msg
+    , multiSelect : Element msg
+    , expansionPanel : Element msg
+    , tab : Element msg
+    , sortTable : Element msg
+    , modal : Element msg
+    , dialog : Element msg
+    , textInput : Element msg
+    , list : Element msg
+    }
+
 
 init : ( Model, Cmd Msg )
 init =
@@ -358,7 +443,6 @@ view :
     -> Style msg
     -> Model
     -> ExampleView msg
-        
 view msgMapper style model =
     { button =
         Button.view (Button >> msgMapper) style (.button model)
@@ -392,13 +476,13 @@ toCardList :
     -> List ( String, Element msg, Element msg )
 toCardList { idle, msgMapper, style, model } =
     asList
-    |> List.map 
-        (\example ->
-            { title = example |> toString
-            , example = example |> get
-            , test = example |> toTests
-            }
-        )
+        |> List.map
+            (\example ->
+                { title = example |> toString
+                , example = example |> get
+                , test = example |> toTests
+                }
+            )
         |> List.map
             (\{ title, example, test } ->
                 ( title
diff --git a/example/src/Data/Section.elm b/example/src/Data/Section.elm
index 28d9d9a..ffb9f47 100644
--- a/example/src/Data/Section.elm
+++ b/example/src/Data/Section.elm
@@ -14,7 +14,6 @@ asList =
 toString : Section -> String
 toString section =
     case section of
-
         ReusableViews ->
             "Reusable"
 
@@ -25,7 +24,6 @@ toString section =
 fromString : String -> Maybe Section
 fromString string =
     case string of
-
         "Reusable" ->
             Just ReusableViews
 
diff --git a/example/src/Data/Style.elm b/example/src/Data/Style.elm
index ba5d3c2..7886b7f 100644
--- a/example/src/Data/Style.elm
+++ b/example/src/Data/Style.elm
@@ -6,27 +6,27 @@ import Widget.Style
         , ColumnStyle
         , DialogStyle
         , ExpansionPanelStyle
+        , LayoutStyle
         , RowStyle
         , SortTableStyle
         , TabStyle
         , TextInputStyle
-        , LayoutStyle
         )
 
 
 type alias Style msg =
-        { dialog : DialogStyle msg
-        , expansionPanel : ExpansionPanelStyle msg
-        , button : ButtonStyle msg
-        , primaryButton : ButtonStyle msg
-        , tab : TabStyle msg
-        , textInput : TextInputStyle msg
-        , chipButton : ButtonStyle msg
-        , row : RowStyle msg
-        , buttonRow : RowStyle msg
-        , column : ColumnStyle msg
-        , cardColumn : ColumnStyle msg
-        , sortTable : SortTableStyle msg
-        , selectButton : ButtonStyle msg
-        , layout : LayoutStyle msg
-        }
+    { dialog : DialogStyle msg
+    , expansionPanel : ExpansionPanelStyle msg
+    , button : ButtonStyle msg
+    , primaryButton : ButtonStyle msg
+    , tab : TabStyle msg
+    , textInput : TextInputStyle msg
+    , chipButton : ButtonStyle msg
+    , row : RowStyle msg
+    , buttonRow : RowStyle msg
+    , column : ColumnStyle msg
+    , cardColumn : ColumnStyle msg
+    , sortTable : SortTableStyle msg
+    , selectButton : ButtonStyle msg
+    , layout : LayoutStyle msg
+    }
diff --git a/example/src/Data/Style/Material.elm b/example/src/Data/Style/Material.elm
index bc41f53..890a166 100644
--- a/example/src/Data/Style/Material.elm
+++ b/example/src/Data/Style/Material.elm
@@ -9,6 +9,7 @@ import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
 import Html.Attributes as Attributes
+import Icons
 import Widget.Style
     exposing
         ( ButtonStyle
@@ -24,7 +25,7 @@ import Widget.Style
         )
 import Widget.Style.Material as Material exposing (Palette)
 import Widget.Style.Template as Template
-import Icons
+
 
 sortTable : Palette -> SortTableStyle msg
 sortTable palette =
@@ -51,5 +52,5 @@ style palette =
     , chipButton = Material.chip palette
     , expansionPanel = Material.expansionPanel palette
     , dialog = Material.alertDialog palette
-    , layout = Material.layout palette "layout"
+    , layout = Material.layout palette
     }
diff --git a/example/src/Data/Theme.elm b/example/src/Data/Theme.elm
index 64d254a..dfaf9b0 100644
--- a/example/src/Data/Theme.elm
+++ b/example/src/Data/Theme.elm
@@ -6,6 +6,7 @@ import Data.Style.Material
 import Data.Style.Template
 import Widget.Style.Material
 
+
 type Theme
     = ElmUiFramework
     | Template
diff --git a/example/src/Example/Dialog.elm b/example/src/Example/Dialog.elm
index 2153615..aeb182e 100644
--- a/example/src/Example/Dialog.elm
+++ b/example/src/Example/Dialog.elm
@@ -13,8 +13,8 @@ type alias Style style msg =
     }
 
 
-type Model =
-    IsOpen Bool
+type Model
+    = IsOpen Bool
 
 
 type Msg
diff --git a/example/src/Main.elm b/example/src/Main.elm
index 9833ee9..eeb7e3f 100644
--- a/example/src/Main.elm
+++ b/example/src/Main.elm
@@ -5,11 +5,11 @@ import Browser
 import Browser.Dom as Dom exposing (Viewport)
 import Browser.Events as Events
 import Browser.Navigation as Navigation
+import Data.Example as Example exposing (Example)
 import Data.Section as Section exposing (Section(..))
 import Data.Style exposing (Style)
 import Data.Theme as Theme exposing (Theme(..))
-import Data.Example as Example exposing (Example)
-import Element exposing (DeviceClass(..))
+import Element exposing (Element,DeviceClass(..))
 import Framework
 import Framework.Grid as Grid
 import Framework.Heading as Heading
@@ -17,13 +17,14 @@ import Html exposing (Html)
 import Html.Attributes as Attributes
 import Icons
 import Reusable
+import Set.Any as AnySet exposing (AnySet)
 import Stateless
 import Task
 import Time
 import Widget
 import Widget.Layout as Layout exposing (Layout, Part)
 import Widget.ScrollingNav as ScrollingNav
-
+import FeatherIcons
 
 type alias LoadedModel =
     { stateless : Stateless.Model
@@ -40,6 +41,7 @@ type alias LoadedModel =
         , remaining : Int
         }
     , theme : Theme
+    , expanded : AnySet String Example
     }
 
 
@@ -61,6 +63,7 @@ type LoadedMsg
     | ChangedSearch String
     | SetTheme Theme
     | Idle
+    | ToggledExample Example
 
 
 type Msg
@@ -75,7 +78,7 @@ initialModel { viewport } =
             ScrollingNav.init
                 { toString = Example.toString
                 , fromString = Example.fromString
-                , arrangement = Example.asList 
+                , arrangement = Example.asList
                 , toMsg =
                     \result ->
                         case result of
@@ -103,6 +106,7 @@ initialModel { viewport } =
             , remaining = 0
             }
       , theme = Material
+      , expanded = AnySet.empty Example.toString
       }
     , [ cmd
       , statelessCmd |> Cmd.map StatelessSpecific
@@ -118,187 +122,6 @@ init () =
     )
 
 
-view : Model -> Html Msg
-view model =
-    case model of
-        Loading ->
-            Element.none |> Framework.responsiveLayout []
-
-        Loaded m ->
-            let
-                style : Style msg
-                style =
-                    Theme.toStyle m.theme
-            in
-            Html.map LoadedSpecific <|
-                Layout.view style.layout
-                    { dialog =
-                        if m.displayDialog then
-                            { text = "This is a dialog window"
-                            , title = Just "Dialog"
-                            , accept =
-                                Just
-                                    { text = "Ok"
-                                    , onPress = Just <| ToggleDialog False
-                                    }
-                            , dismiss =
-                                Just
-                                    { text = "Dismiss"
-                                    , onPress = Just <| ToggleDialog False
-                                    }
-                            }
-                                |> Widget.dialog style.dialog
-                                |> Just
-
-                        else
-                            Nothing
-                    , layout = m.layout
-                    , window = m.window
-                    , menu =
-                        m.scrollingNav
-                            |> ScrollingNav.toSelect
-                                (\int ->
-                                    m.scrollingNav.arrangement
-                                        |> Array.fromList
-                                        |> Array.get int
-                                        |> Maybe.map JumpTo
-                                )
-                    , actions =
-                        [ { onPress = Just <| Load "https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/"
-                          , text = "Docs"
-                          , icon = Icons.book |> Element.html |> Element.el []
-                          }
-                        , { onPress = Just <| Load "https://github.com/Orasund/elm-ui-widgets"
-                          , text = "Github"
-                          , icon = Icons.github |> Element.html |> Element.el []
-                          }
-                        , { onPress =
-                                if m.theme /= Material then
-                                    Just <| SetTheme <| Material
-
-                                else
-                                    Nothing
-                          , text = "Material Theme"
-                          , icon = Icons.penTool |> Element.html |> Element.el []
-                          }
-                        , { onPress =
-                                if m.theme /= DarkMaterial then
-                                    Just <| SetTheme <| DarkMaterial
-
-                                else
-                                    Nothing
-                          , text = "Dark Material Theme"
-                          , icon = Icons.penTool |> Element.html |> Element.el []
-                          }
-                        
-                        , { onPress =
-                                if m.theme /= ElmUiFramework then
-                                    Just <| SetTheme <| ElmUiFramework
-
-                                else
-                                    Nothing
-                          , text = "Elm-Ui-Framework Theme"
-                          , icon = Icons.penTool |> Element.html |> Element.el []
-                          }
-                        , { onPress =
-                                if m.theme /= Template then
-                                    Just <| SetTheme <| Template
-
-                                else
-                                    Nothing
-                          , text = "Template Theme"
-                          , icon = Icons.penTool |> Element.html |> Element.el []
-                          }
-                        ]
-                    , onChangedSidebar = ChangedSidebar
-                    , title =
-                        "Elm-Ui-Widgets"
-                            |> Element.text
-                            |> Element.el Heading.h1
-                    , search =
-                        Just
-                            { text = m.search.raw
-                            , onChange = ChangedSearch
-                            , label = "Search"
-                            }
-                    } <|
-                    (
-                        [ Element.el [ Element.height <| Element.px <| 42 ] <| Element.none
-                        , [StatelessViews,ReusableViews]
-                                |> List.map
-                                    (\section ->
-                                        (case section of
-                                            ReusableViews ->
-                                                Reusable.view
-                                                    { theme = m.theme
-                                                    , addSnackbar = AddSnackbar
-                                                    }
-
-                                            StatelessViews ->
-                                                Stateless.view
-                                                    { theme = m.theme
-                                                    , msgMapper = StatelessSpecific
-                                                    , model = m.stateless
-                                                    }
-                                        )
-                                            |> (\{ title, description, items } ->
-                                                    [ title
-                                                    |> Element.text
-                                                    |> Element.el ( Heading.h2 )
-                                                    , if m.search.current == "" then
-                                                        description
-                                                            |> Element.text
-                                                            |> List.singleton
-                                                            |> Element.paragraph []
-
-                                                      else
-                                                        Element.none
-                                                    , items
-                                                        |> (if m.search.current /= "" then
-                                                                List.filter
-                                                                    (\( a, _, _ ) ->
-                                                                        a
-                                                                            |> String.toLower
-                                                                            |> String.contains (m.search.current |> String.toLower)
-                                                                    )
-
-                                                            else
-                                                                identity
-                                                           )
-                                                        |> List.map
-                                                            (\( name, elem, more ) ->
-                                                                [ [ Element.text name
-                                                                        |> Element.el (Heading.h3 ++ [ Element.height <| Element.shrink 
-                                                                       , name
-                                                            |> Attributes.id
-                                                            |> Element.htmlAttribute])
-                                                                  , elem
-                                                                  ]
-                                                                    |> Element.column Grid.simple
-                                                                , more
-                                                                    |> Element.el
-                                                                        [ Element.width <| Element.fill
-                                                                        ]
-                                                                ]
-                                                                    |> Widget.column style.cardColumn
-                                                            )
-                                                        |> Element.wrappedRow
-                                                            (Grid.simple
-                                                                ++ [ Element.height <| Element.shrink
-                                                                   ]
-                                                            )
-                                                    ]
-                                                        |> Element.column (Grid.section ++ [ Element.centerX ])
-                                               )
-                                    )
-                               -- |> Element.column Grid.section
-                          --]
-                            |> Element.column (Framework.container ++ style.layout.container)
-                        ]
-                            |> Element.column Grid.compact
-                    )
-
-
 updateLoaded : LoadedMsg -> LoadedModel -> ( LoadedModel, Cmd LoadedMsg )
 updateLoaded msg model =
     case msg of
@@ -414,6 +237,13 @@ updateLoaded msg model =
             , Cmd.none
             )
 
+        ToggledExample example ->
+            ( { model
+                | expanded = model.expanded |> AnySet.toggle example
+              }
+            , Cmd.none
+            )
+
         Idle ->
             ( model, Cmd.none )
 
@@ -442,6 +272,218 @@ subscriptions _ =
         |> Sub.map LoadedSpecific
 
 
+view : Model -> Html Msg
+view model =
+    case model of
+        Loading ->
+            Element.none |> Framework.responsiveLayout []
+
+        Loaded m ->
+            let
+                style : Style msg
+                style =
+                    Theme.toStyle m.theme
+            in
+            Html.map LoadedSpecific <|
+                Layout.view style.layout
+                    { dialog =
+                        if m.displayDialog then
+                            { text = "This is a dialog window"
+                            , title = Just "Dialog"
+                            , accept =
+                                Just
+                                    { text = "Ok"
+                                    , onPress = Just <| ToggleDialog False
+                                    }
+                            , dismiss =
+                                Just
+                                    { text = "Dismiss"
+                                    , onPress = Just <| ToggleDialog False
+                                    }
+                            }
+                                |> Widget.dialog style.dialog
+                                |> Just
+
+                        else
+                            Nothing
+                    , layout = m.layout
+                    , window = m.window
+                    , menu =
+                        m.scrollingNav
+                            |> ScrollingNav.toSelect
+                                (\int ->
+                                    m.scrollingNav.arrangement
+                                        |> Array.fromList
+                                        |> Array.get int
+                                        |> Maybe.map JumpTo
+                                )
+                    , actions =
+                        [ { onPress = Just <| Load "https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/"
+                          , text = "Docs"
+                          , icon = Icons.book |> Element.html |> Element.el []
+                          }
+                        , { onPress = Just <| Load "https://github.com/Orasund/elm-ui-widgets"
+                          , text = "Github"
+                          , icon = Icons.github |> Element.html |> Element.el []
+                          }
+                        , { onPress =
+                                if m.theme /= Material then
+                                    Just <| SetTheme <| Material
+
+                                else
+                                    Nothing
+                          , text = "Material Theme"
+                          , icon = Icons.penTool |> Element.html |> Element.el []
+                          }
+                        , { onPress =
+                                if m.theme /= DarkMaterial then
+                                    Just <| SetTheme <| DarkMaterial
+
+                                else
+                                    Nothing
+                          , text = "Dark Material Theme"
+                          , icon = Icons.penTool |> Element.html |> Element.el []
+                          }
+                        , { onPress =
+                                if m.theme /= ElmUiFramework then
+                                    Just <| SetTheme <| ElmUiFramework
+
+                                else
+                                    Nothing
+                          , text = "Elm-Ui-Framework Theme"
+                          , icon = Icons.penTool |> Element.html |> Element.el []
+                          }
+                        , { onPress =
+                                if m.theme /= Template then
+                                    Just <| SetTheme <| Template
+
+                                else
+                                    Nothing
+                          , text = "Template Theme"
+                          , icon = Icons.penTool |> Element.html |> Element.el []
+                          }
+                        ]
+                    , onChangedSidebar = ChangedSidebar
+                    , title =
+                        "Elm-Ui-Widgets"
+                            |> Element.text
+                            |> Element.el Heading.h1
+                    , search =
+                        Just
+                            { text = m.search.raw
+                            , onChange = ChangedSearch
+                            , label = "Search"
+                            }
+                    }
+                <|
+                    viewLoaded m
+
+
+viewLoaded : LoadedModel -> Element LoadedMsg
+viewLoaded m =
+    let
+        style : Style msg
+        style =
+            Theme.toStyle m.theme
+    in
+    [ Element.el [ Element.height <| Element.px <| 42 ] <| Element.none
+    , [ StatelessViews, ReusableViews ]
+        |> List.map
+            (\section ->
+                (case section of
+                    ReusableViews ->
+                        Reusable.view
+                            { theme = m.theme
+                            , addSnackbar = AddSnackbar
+                            }
+
+                    StatelessViews ->
+                        Stateless.view
+                            { theme = m.theme
+                            , msgMapper = StatelessSpecific
+                            , model = m.stateless
+                            }
+                )
+                    |> (\{ title, description, items } ->
+                            [ title
+                                |> Element.text
+                                |> Element.el Heading.h2
+                            , if m.search.current == "" then
+                                description
+                                    |> Element.text
+                                    |> List.singleton
+                                    |> Element.paragraph []
+
+                              else
+                                Element.none
+                            , items
+                                |> (if m.search.current /= "" then
+                                        List.filter
+                                            (\( a, _, _ ) ->
+                                                a
+                                                    |> String.toLower
+                                                    |> String.contains (m.search.current |> String.toLower)
+                                            )
+
+                                    else
+                                        identity
+                                   )
+                                |> List.map
+                                    (\( name, elem, more ) ->
+                                        [ [ Element.text name
+                                                |> Element.el
+                                                    (Heading.h3
+                                                        ++ [ Element.height <| Element.shrink
+                                                           , name
+                                                                |> Attributes.id
+                                                                |> Element.htmlAttribute
+                                                           ]
+                                                    )
+                                          , elem
+                                          ]
+                                            |> Element.column Grid.simple
+                                        , 
+                                            Widget.expansionPanel style.expansionPanel
+    
+                                                { onToggle = 
+                                                    always
+                                                    (name
+                                                    |> Example.fromString
+                                                    |> Maybe.map ToggledExample
+                                                    |> Maybe.withDefault Idle
+                                                    )
+                                                , icon = Element.none
+                                                , text =
+                                                    "States"
+                                                , content = more
+                                                , isExpanded =
+                                                    name
+                                                    |> Example.fromString
+                                                    |> Maybe.map
+                                                    (\example ->
+                                                    m.expanded 
+                                                    |> AnySet.member example 
+                                                    )|> Maybe.withDefault False
+                                                    
+
+                                                }
+                                        ]
+                                            |> Widget.column style.cardColumn
+                                    )
+                                |> Element.wrappedRow
+                                    (Grid.simple
+                                        ++ [ Element.height <| Element.shrink
+                                           ]
+                                    )
+                            ]
+                                |> Element.column (Grid.section ++ [ Element.centerX ])
+                       )
+            )
+        |> Element.column (Framework.container ++ style.layout.container)
+    ]
+        |> Element.column Grid.compact
+
+
 main : Program () Model Msg
 main =
     Browser.element
diff --git a/src/Widget/Layout.elm b/src/Widget/Layout.elm
index 69faea8..230bc15 100644
--- a/src/Widget/Layout.elm
+++ b/src/Widget/Layout.elm
@@ -242,8 +242,7 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay
                     , menu
                         |> Widget.select
                         |> List.map
-                            (Widget.selectButton style.sheetButton
-                            )
+                            (Widget.selectButton style.sheetButton)
                     ]
                         |> List.concat
                         |> Element.column [ Element.width <| Element.fill ]
diff --git a/src/Widget/ScrollingNav.elm b/src/Widget/ScrollingNav.elm
index 3c0f141..4cd7420 100644
--- a/src/Widget/ScrollingNav.elm
+++ b/src/Widget/ScrollingNav.elm
@@ -1,7 +1,6 @@
 module Widget.ScrollingNav exposing
-    ( Model, init, view, current
-    , jumpTo, syncPositions
-    , getPos, jumpToWithOffset, setPos, toSelect
+    ( Model, init, view, current, toSelect
+    , jumpTo, jumpToWithOffset, syncPositions, getPos, setPos
     )
 
 {-| The Scrolling Nav is a navigation bar thats updates while you scroll through
@@ -10,18 +9,17 @@ the page. Clicking on a navigation button will scroll directly to that section.
 
 # Basics
 
-@docs Model, Msg, init, update, subscriptions, view, viewSections, current
+@docs Model, init, view, current, toSelect
 
 
 # Operations
 
-@docs jumpTo, syncPositions
+@docs jumpTo, jumpToWithOffset, syncPositions, getPos, setPos
 
 -}
 
 import Browser.Dom as Dom
 import Element exposing (Element)
-import Framework.Grid as Grid
 import Html.Attributes as Attributes
 import IntDict exposing (IntDict)
 import Task exposing (Task)
@@ -62,6 +60,8 @@ init { toString, fromString, arrangement, toMsg } =
            )
 
 
+{-| Syncs the position of of the viewport
+-}
 getPos : Task x (Model selection -> Model selection)
 getPos =
     Dom.getViewport
@@ -73,12 +73,14 @@ getPos =
             )
 
 
+{-| sets the position of the viewport to show a specific section
+-}
 setPos : Int -> Model section -> Model section
 setPos pos model =
     { model | scrollPos = pos }
 
 
-{-| scrolls the screen to the respective section
+{-| Scrolls the screen to the respective section
 -}
 jumpTo :
     { section : section
@@ -95,7 +97,7 @@ jumpTo { section, onChange } { toString } =
         |> Task.attempt onChange
 
 
-{-| scrolls the screen to the respective section with some offset
+{-| Scrolls the screen to the respective section with some offset
 -}
 jumpToWithOffset :
     { offset : Float
@@ -113,7 +115,9 @@ jumpToWithOffset { offset, section, onChange } { toString } =
         |> Task.attempt onChange
 
 
-{-| -}
+{-| Updates the positions of all sections.
+This functions should be called regularly if the height of elements on your page can change during time.
+-}
 syncPositions : Model section -> Task Dom.Error (Model section -> Model section)
 syncPositions { toString, arrangement } =
     arrangement
@@ -144,7 +148,8 @@ syncPositions { toString, arrangement } =
             )
 
 
-{-| -}
+{-| Returns the current section
+-}
 current : (String -> Maybe section) -> Model section -> Maybe section
 current fromString { positions, scrollPos } =
     positions
@@ -155,6 +160,8 @@ current fromString { positions, scrollPos } =
         |> Maybe.andThen fromString
 
 
+{-| Returns a select widget containing all section, with the current section selected.
+-}
 toSelect : (Int -> Maybe msg) -> Model section -> Select msg
 toSelect onSelect ({ arrangement, toString, fromString } as model) =
     { selected =
@@ -181,11 +188,37 @@ toSelect onSelect ({ arrangement, toString, fromString } as model) =
     }
 
 
-{-| -}
+{-| Opinionated way of viewing the section.
+
+This might be useful at first, but you should consider writing your own view function.
+
+```
 view :
     (section -> Element msg)
     -> Model section
-    -> Element msg
+    -> List (Element msg)
+view asElement { toString, arrangement } =
+    arrangement
+        |> List.map
+            (\header ->
+                Element.el
+                    [ header
+                        |> toString
+                        |> Attributes.id
+                        |> Element.htmlAttribute
+                    , Element.width <| Element.fill
+                    ]
+                <|
+                    asElement <|
+                        header
+            )
+```
+
+-}
+view :
+    (section -> Element msg)
+    -> Model section
+    -> List (Element msg)
 view asElement { toString, arrangement } =
     arrangement
         |> List.map
@@ -201,4 +234,3 @@ view asElement { toString, arrangement } =
                     asElement <|
                         header
             )
-        |> Element.column Grid.simple
diff --git a/src/Widget/Snackbar.elm b/src/Widget/Snackbar.elm
index 4116da1..b93c69c 100644
--- a/src/Widget/Snackbar.elm
+++ b/src/Widget/Snackbar.elm
@@ -1,7 +1,6 @@
 module Widget.Snackbar exposing
-    ( Model, init, current, timePassed
+    ( Model, Message, init, current, timePassed, view
     , insert, insertFor, dismiss
-    , Message, view
     )
 
 {-| A [snackbar](https://material.io/components/snackbars/) shows notification, one at a time.
@@ -9,7 +8,7 @@ module Widget.Snackbar exposing
 
 # Basics
 
-@docs Model, init, current, timePassed
+@docs Model, Message, init, current, timePassed, view
 
 
 # Operations
@@ -104,6 +103,8 @@ current model =
     model.current |> Maybe.map Tuple.first
 
 
+{-| Views the current Message. (only one at a time)
+-}
 view :
     SnackbarStyle msg
     -> (a -> Message msg)
diff --git a/src/Widget/Style.elm b/src/Widget/Style.elm
index 605f7ba..f1e6347 100644
--- a/src/Widget/Style.elm
+++ b/src/Widget/Style.elm
@@ -1,9 +1,16 @@
 module Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, RowStyle, SnackbarStyle, SortTableStyle, TabStyle, TextInputStyle)
 
+{-| This module contains style types for every widget.
+
+@docs ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, RowStyle, SnackbarStyle, SortTableStyle, TabStyle, TextInputStyle
+
+-}
+
 import Element exposing (Attribute, Element)
 import Html exposing (Html)
 
 
+{-| -}
 type alias ButtonStyle msg =
     { container : List (Attribute msg)
     , labelRow : List (Attribute msg)
@@ -14,6 +21,7 @@ type alias ButtonStyle msg =
     }
 
 
+{-| -}
 type alias DialogStyle msg =
     { containerColumn : List (Attribute msg)
     , title : List (Attribute msg)
@@ -24,6 +32,12 @@ type alias DialogStyle msg =
     }
 
 
+{-| Technical Remark:
+
+  - If icons are defined in Svg, they might not display correctly.
+    To avoid that, make sure to wrap them in `Element.html >> Element.el []`
+
+-}
 type alias ExpansionPanelStyle msg =
     { containerColumn : List (Attribute msg)
     , panelRow : List (Attribute msg)
@@ -34,6 +48,7 @@ type alias ExpansionPanelStyle msg =
     }
 
 
+{-| -}
 type alias SnackbarStyle msg =
     { containerRow : List (Attribute msg)
     , text : List (Attribute msg)
@@ -41,6 +56,7 @@ type alias SnackbarStyle msg =
     }
 
 
+{-| -}
 type alias TextInputStyle msg =
     { chipButton : ButtonStyle msg
     , containerRow : List (Attribute msg)
@@ -49,6 +65,7 @@ type alias TextInputStyle msg =
     }
 
 
+{-| -}
 type alias TabStyle msg =
     { button : ButtonStyle msg
     , optionRow : List (Attribute msg)
@@ -57,6 +74,7 @@ type alias TabStyle msg =
     }
 
 
+{-| -}
 type alias RowStyle msg =
     { containerRow : List (Attribute msg)
     , element : List (Attribute msg)
@@ -66,6 +84,7 @@ type alias RowStyle msg =
     }
 
 
+{-| -}
 type alias ColumnStyle msg =
     { containerColumn : List (Attribute msg)
     , element : List (Attribute msg)
@@ -75,6 +94,12 @@ type alias ColumnStyle msg =
     }
 
 
+{-| Technical Remark:
+
+  - If icons are defined in Svg, they might not display correctly.
+    To avoid that, make sure to wrap them in `Element.html >> Element.el []`
+
+-}
 type alias SortTableStyle msg =
     { containerTable : List (Attribute msg)
     , headerButton : ButtonStyle msg
@@ -84,6 +109,12 @@ type alias SortTableStyle msg =
     }
 
 
+{-| Technical Remark:
+
+  - If icons are defined in Svg, they might not display correctly.
+    To avoid that, make sure to wrap them in `Element.html >> Element.el []`
+
+-}
 type alias LayoutStyle msg =
     { container : List (Attribute msg)
     , snackbar : SnackbarStyle msg
diff --git a/src/Widget/Style/Material.elm b/src/Widget/Style/Material.elm
index 9aac859..300a055 100644
--- a/src/Widget/Style/Material.elm
+++ b/src/Widget/Style/Material.elm
@@ -66,7 +66,6 @@ import Widget.Style
         , TabStyle
         , TextInputStyle
         )
-import Widget.Style.Template as Template
 
 
 
@@ -1301,8 +1300,8 @@ drawerButton palette =
   - The drawer button as not taken from the specification (This will been to be added later)
 
 -}
-layout : Palette -> String -> LayoutStyle msg
-layout palette string =
+layout : Palette -> LayoutStyle msg
+layout palette =
     { container =
         (palette.background |> textAndBackground)
             ++ [ Font.family
diff --git a/src/Widget/Style/Template.elm b/src/Widget/Style/Template.elm
index 18535aa..49785ef 100644
--- a/src/Widget/Style/Template.elm
+++ b/src/Widget/Style/Template.elm
@@ -1,5 +1,8 @@
 module Widget.Style.Template exposing (box, button, column, decoration, dialog, expansionPanel, icon, layout, row, snackbar, sortTable, tab, textInput)
 
+{-| This package
+-}
+
 import Element exposing (Attribute, Element)
 import Element.Background as Background
 import Element.Border as Border

From 86ff420314356f938a8797d2afc4f1c47b38d890 Mon Sep 17 00:00:00 2001
From: Unknown 
Date: Mon, 25 May 2020 13:58:22 +0200
Subject: [PATCH 13/14] Ready to Merge

---
 README.md                              | 147 +++++++++-----
 docs.json                              |   2 +-
 elm.json                               |   9 +-
 example/src/Example/Button.elm         |  19 +-
 example/src/Example/Dialog.elm         |  17 +-
 example/src/Example/ExpansionPanel.elm |  16 +-
 example/src/Example/List.elm           |  16 +-
 example/src/Example/Modal.elm          |  17 +-
 example/src/Example/MultiSelect.elm    |  17 +-
 example/src/Example/Select.elm         |  17 +-
 example/src/Example/SortTable.elm      |  27 ++-
 example/src/Example/Tab.elm            |  16 +-
 example/src/Example/TextInput.elm      |  18 +-
 example/src/Main.elm                   |   4 +-
 src/Widget.elm                         | 137 +++++++++----
 src/Widget/Layout.elm                  |  45 ++++-
 src/Widget/ScrollingNav.elm            |  26 +--
 src/Widget/Snackbar.elm                |  27 +--
 src/Widget/Style.elm                   |   2 +-
 src/Widget/Style/Material.elm          | 267 ++++++++++++++++++++++---
 src/Widget/Style/Template.elm          | 228 ++++++++++++++++++++-
 21 files changed, 895 insertions(+), 179 deletions(-)

diff --git a/README.md b/README.md
index b9e7706..b99e139 100644
--- a/README.md
+++ b/README.md
@@ -1,41 +1,24 @@
 # Elm-Ui-Widgets
 
-Usefull Widgets written for Elm-ui.
+This package contains **independend** widgets (no components) written for [Elm-Ui](https://dark.elm.dmy.fr/packages/mdgriffith/elm-ui/latest/). These widgets have no dependencies to other parts of this package. So you can just use as much as you need.
 
-Examples of all widgets can be found [here](https://orasund.github.io/elm-ui-widgets/). For styling, I used my own [Orasund/elm-ui-framework](https://package.elm-lang.org/packages/Orasund/elm-ui-framework/latest/).
+It also supports custom themes and has a material design theme already ready to use.
 
-## Why create such a package?
-el
-After looking at the current packages that implement various reusable views (and components) I noticed two things:
+[Examples of all widgets can be found here](https://orasund.github.io/elm-ui-widgets/).
 
-* There are (nearly) no widgets for Elm-Ui, and that's a problem because while going from `Element` to `Html` is easy, the opposite is not always possible (as a lot of styling in Elm-Ui would not be adapted to the `Html` element.)
-* There is collection of widgets, all in one place. A lot of components get reimplemented over and over again. It's hard to keep track of what package is currently the best.
+![Example using the Material Design style](https://orasund.github.io/elm-ui-widgets/assets/material-style.png)
 
-This package tries to solve both of these problems.
+## Concept
 
-Here are some alternative packages for creating UIs:
+**Summary**
 
-* Using Elm-Ui
-    * [lucamug/style-framework](https://dark.elm.dmy.fr/packages/lucamug/style-framework/latest/) - Full customization requires the cloning of the package.
-    * [jxxcarlson/elm-widget](https://dark.elm.dmy.fr/packages/jxxcarlson/elm-widget/latest/Widget-Button) -  Uses a Builder pattern. Has some redefined customizations.
-    * [QiTASC/hatchinq](https://dark.elm.dmy.fr/packages/QiTASC/hatchinq/latest/) - Similar Arroach, stillin experimental phase
-* Using Elm/Html
-    * [nathanjohnson320/elm-ui-components](https://dark.elm.dmy.fr/packages/nathanjohnson320/elm-ui-components/latest/) - Sticks with the elm/html way of styling.
-    * [NoRedInk/noredink-ui](https://dark.elm.dmy.fr/packages/NoRedInk/noredink-ui/latest/) - Similar Approach but no customization options.
-    * [peterszerzo/elm-natural-ui](https://dark.elm.dmy.fr/packages/peterszerzo/elm-natural-ui/latest) - Uses custom Attributes with some customization.
-* Ui Frameworks
-    * [aforemny/material-components-web-elm](https://dark.elm.dmy.fr/packages/aforemny/material-components-web-elm/latest/) - Wrapper of Material design using custom elements.
-    * [afidegnum/elm-tailwind](https://dark.elm.dmy.fr/packages/afidegnum/elm-tailwind/latest/) - Wrapper of Tailwind by including the tailwind stylesheet.
-    * [surprisetalk/elm-bulma](https://dark.elm.dmy.fr/packages/surprisetalk/elm-bulma/latest/) - Wrapper for Bulma by  including the bulma stylesheet.
-    * [rundis/elm-bootstrap](https://dark.elm.dmy.fr/packages/rundis/elm-bootstrap/latest/) - Wrapper for Bootstrap by including the bootstrap stylesheet.
+* Each widget comes with a _Widget Type_ and a _Style Type_. The Widget Type is an abstract representation of the widget and the Style Type has all styling attributes.
+* Widget Types can be used as building Blocks for more complicated Widgets
+   (Button -> Select Buttons -> Menu -> Layout)
 
-# Goal
+**Example**
 
-The long time goal is to have a universal tool for creating UI-frameworks natively in Elm, in particular a native **Material Design** implementation. It should allow easy customizability and also extendability of existing widgets.
-
-# Example: Button
-
-A good example, how I image the package to work is the button:
+Let's look at the button widget.
 
 ```elm
 button: ButtonStyle msg
@@ -47,9 +30,7 @@ button: ButtonStyle msg
     -> Element msg
 ```
 
-In comparison to Elm-Ui's button, we see two new things: 
-
-* `List (Attribute msg)` has changed into
+In comparison to Elm-Ui's button, we see  that `List (Attribute msg)` has changed into a _Style Type_.
   ```
   type alias ButtonStyle msg =
       { container : List (Attribute msg)
@@ -58,19 +39,11 @@ In comparison to Elm-Ui's button, we see two new things:
       , ifActive : List (Attribute msg)
       }
   ```
-* We can display an icon, besides the text. Just like the [Material Design specification](https://material.io/components/buttons) describes it.
-  Actually there is also a type for the button:
-  ```
-  type alias Button msg =
-      { text : String
-      , icon : Element Never
-      , onPress : Maybe msg
-      }
-  ```
 
-There are also a few different implementations of the button, like the Icon without text:
+For actually displaying the button we have a few different implementations:
 
 ``` elm
+{-| Button with only an icon and no text -}
 iconButton :
     ButtonStyle msg
     ->
@@ -79,11 +52,8 @@ iconButton :
         , onPress : Maybe msg
         }
     -> Element msg
-```
 
-or a Button with no icon
-
-```
+{-| Button with a text but no icon -}
 textButton :
     ButtonStyle msg
     ->
@@ -92,19 +62,86 @@ textButton :
             , onPress : Maybe msg
         }
     -> Element msg
+
+{-| Button with both icon and text -}
+button :
+    ButtonStyle msg
+    ->
+        { text : String
+        , icon : Element Never
+        , onPress : Maybe msg
+        }
+    -> Element msg
 ```
 
-# Concept
+We also have a `Widget Type` for the button:
 
-Here are the reasons why I implemented it that way:
+```
+type alias Button msg =
+    { text : String
+    , icon : Element Never
+    , onPress : Maybe msg
+    }
+```
 
-* The core of Elm-Ui-Widgets are **independend** widgets (no components), that can be used without knowing anything else about the package.
-* Each widget comes with a _Widget Type_ and a _Style Type_. The Widget Type is an abstract representation of the widget and the Style Type has all styling attributes.
-* Style Types should be definable without knowing implementation details
-* Widget Types can be use for a Master View Type (Elm-Ui-Widgets might provide some master view types, for example for elm-Markup support)
-* Widget Types can be used as building Blocks for more complicated Widgets
-  (Button -> Select Buttons -> Menu -> Layout)
+We can use it to build more complex widgets, for example a select button:
 
-## Where will it go from here
+```
+type alias Select msg =
+    { selected : Maybe Int
+    , options :
+        List
+            { text : String
+            , icon : Element Never
+            }
+    , onSelect : Int -> Maybe msg
+    }
 
-I really would like to write a native material-design implementation in Elm. But after doing this package as a first step, (Which I already wrote while having the material.io docs as reference) I am not quite sure how I can avoid a lot of boilerplating. It seems like a [Master View Type](https://www.freecodecamp.org/news/scaling-elm-views-with-master-view-types/) would be the solution, but I'm not quite sure how I can ensure the customizability when my entire page can be described as a single type. (I don't want to know how many parameters such a type would need).
\ No newline at end of file
+select :
+    Select msg
+    -> List ( Bool, Button msg )
+
+selectButton :
+    ButtonStyle msg
+    -> ( Bool, Button msg )
+    -> Element msg
+```
+
+## Reusable Views vs. Components
+
+In Elm we like to use reusable views instead of components.
+At first this packages had a few components, but they where so complicated to use in comparison, so they got slowly turned into reusable views one by one.
+
+Most could be reduced even further into _view functions_: reusable views without a model.
+Currently we have only three reusable views: `Widget.Layout`, `Widget.ScrollingNav` and `Widget.Snackbar`.
+
+## Alternatives
+
+For comparison, here are some alternative packages for creating UIs:
+
+* **Using Elm-Ui**
+    * [lucamug/style-framework](https://dark.elm.dmy.fr/packages/lucamug/style-framework/latest/) - Full customization requires the cloning of the package.
+    * [jxxcarlson/elm-widget](https://dark.elm.dmy.fr/packages/jxxcarlson/elm-widget/latest/Widget-Button) -  Uses a Builder pattern. Has some redefined customizations.
+    * [QiTASC/hatchinq](https://dark.elm.dmy.fr/packages/QiTASC/hatchinq/latest/) - Similar Arroach but still in experimental phase
+* **Using Elm/Html**
+    * [nathanjohnson320/elm-ui-components](https://dark.elm.dmy.fr/packages/nathanjohnson320/elm-ui-components/latest/) - Uses the elm/html way of styling.
+    * [NoRedInk/noredink-ui](https://dark.elm.dmy.fr/packages/NoRedInk/noredink-ui/latest/) - Similar Approach but no customization options.
+    * [peterszerzo/elm-natural-ui](https://dark.elm.dmy.fr/packages/peterszerzo/elm-natural-ui/latest) - Uses custom Attributes with some customization.
+* **Ui Frameworks**
+    * [aforemny/material-components-web-elm](https://dark.elm.dmy.fr/packages/aforemny/material-components-web-elm/latest/) - Wrapper of Material design using custom elements.
+    * [afidegnum/elm-tailwind](https://dark.elm.dmy.fr/packages/afidegnum/elm-tailwind/latest/) - Wrapper of Tailwind by including the tailwind stylesheet.
+    * [surprisetalk/elm-bulma](https://dark.elm.dmy.fr/packages/surprisetalk/elm-bulma/latest/) - Wrapper for Bulma by  including the bulma stylesheet.
+    * [rundis/elm-bootstrap](https://dark.elm.dmy.fr/packages/rundis/elm-bootstrap/latest/) - Wrapper for Bootstrap by including the bootstrap stylesheet.
+
+## Motivation
+
+After looking at the current packages that implement various reusable views (and components) I noticed two things:
+
+* There are (nearly) no widgets for Elm-Ui, and that's a problem because while going from `Element` to `Html` is easy, the opposite is not always possible (as a lot of styling in Elm-Ui would not be adapted to the `Html` element.)
+* There is collection of widgets, all in one place. A lot of components get reimplemented over and over again. It's hard to keep track of what package is currently the best.
+
+This package tries to solve both of these problems.
+
+## Changelog
+
+* **Version 2.0** - Complete rewrite of the package. Now including a material design implementation.
\ No newline at end of file
diff --git a/docs.json b/docs.json
index 89b845a..8048680 100644
--- a/docs.json
+++ b/docs.json
@@ -1 +1 @@
-[{"name":"Framework","comment":" This module includes the basic building bocks.\r\nMaybe start by copying the follow code into your project:\r\n\r\n```\r\nview : Html msg\r\nview =\r\n    Framework.layout [] <|\r\n        Element.el Framework.container <|\r\n            Element.text \"the first element should be a container.\"\r\n```\r\n\r\n@docs layout, container, layoutOptions, layoutAttributes\r\n\r\n","unions":[],"aliases":[],"values":[{"name":"container","comment":" The container should be the outer most element.\r\nIt centers the content and sets the background to white.\r\n","type":"List.List (Element.Attribute msg)"},{"name":"layout","comment":" A replacement of Element.layout adding both the Framework.layoutOptions and the Framework.layoutAttributes.\r\n","type":"List.List (Element.Attribute msg) -> Element.Element msg -> Html.Html msg"},{"name":"layoutAttributes","comment":" The default Attributes. Check the source code if you want to know more.\r\n","type":"List.List (Element.Attribute msg)"},{"name":"layoutOptions","comment":" The default layoutOptions. Check the source code if you want to know more.\r\n","type":"List.List Element.Option"}],"binops":[]},{"name":"Framework.Button","comment":" This module contains a attribute to style buttons.\r\n\r\n```\r\nInput.button (Button.simple ++ Color.primary) <|\r\n    { onPress = Nothing\r\n    , label = Element.text \"Button.simple ++ Color.primary\"\r\n    }\r\n```\r\n\r\nThe attribute can only be used on `Input.button` but it may be with additional attibutes from this package.\r\n\r\n@docs simple\r\n\r\n","unions":[],"aliases":[],"values":[{"name":"simple","comment":" a simple Button styling. Check the source-code for more information.\r\n","type":"List.List (Element.Attribute msg)"}],"binops":[]},{"name":"Framework.Card","comment":" The Card attributes can be used almost anywere in the elm-ui elements.\r\n\r\nHere are some examples:\r\n\r\n```\r\nElement.column (Card.simple ++ Grid.simple) <|\r\n    [ Element.text <| \"adds a border around the column\"\r\n    ]\r\n```\r\n\r\n```\r\nElement.el Card.small <|\r\n    Element.text \"a basic card\"\r\n```\r\n\r\n```\r\nInput.button (Button.simple ++ Card.large) <|\r\n    { onPress = Nothing\r\n    , label = Element.text \"a clickable card\"\r\n    }\r\n```\r\n\r\n@docs simple, small, large, fill\r\n\r\n","unions":[],"aliases":[],"values":[{"name":"fill","comment":" A card filling all the avaiable space.\r\nCheck the source-code for more information.\r\n","type":"List.List (Element.Attribute msg)"},{"name":"large","comment":" A 480px wide card.\r\nCheck the source-code for more information.\r\n","type":"List.List (Element.Attribute msg)"},{"name":"simple","comment":" A basic card.\r\nCheck the source-code for more information.\r\n","type":"List.List (Element.Attribute msg)"},{"name":"small","comment":" A 240px wide card.\r\nCheck the source-code for more information.\r\n","type":"List.List (Element.Attribute msg)"}],"binops":[]},{"name":"Framework.Color","comment":" This module contains the colors used in the framework.\r\n\r\n@docs cyan, green, lighterGrey, lightGrey, grey, darkGrey, darkerGrey, red, turquoise, yellow\r\n\r\nSome colors also have a Attribute that can be used nearly everywhere.\r\n\r\n@docs danger, light, dark, disabled, info, primary, success, warning\r\n\r\n","unions":[],"aliases":[],"values":[{"name":"cyan","comment":" ","type":"Element.Color"},{"name":"danger","comment":" ","type":"List.List (Element.Attribute msg)"},{"name":"dark","comment":" ","type":"List.List (Element.Attribute msg)"},{"name":"darkGrey","comment":" ","type":"Element.Color"},{"name":"darkerGrey","comment":" ","type":"Element.Color"},{"name":"disabled","comment":" ","type":"List.List (Element.Attribute msg)"},{"name":"green","comment":" ","type":"Element.Color"},{"name":"grey","comment":" ","type":"Element.Color"},{"name":"info","comment":" ","type":"List.List (Element.Attribute msg)"},{"name":"light","comment":" ","type":"List.List (Element.Attribute msg)"},{"name":"lightGrey","comment":" ","type":"Element.Color"},{"name":"lighterGrey","comment":" ","type":"Element.Color"},{"name":"primary","comment":" ","type":"List.List (Element.Attribute msg)"},{"name":"red","comment":" ","type":"Element.Color"},{"name":"success","comment":" ","type":"List.List (Element.Attribute msg)"},{"name":"turquoise","comment":" ","type":"Element.Color"},{"name":"warning","comment":" ","type":"List.List (Element.Attribute msg)"},{"name":"yellow","comment":" ","type":"Element.Color"}],"binops":[]},{"name":"Framework.Grid","comment":" This module include the basic attributes for columns and rows and two variants.\r\nAny of these Attributes can be used for columns and rows.\r\n\r\n```\r\nElement.row Grid.spacedEvenly <|\r\n    [ Element.text \"left item\"\r\n    , Element.text \"center item\"\r\n    , Element.text \"right item\"\r\n    ]\r\n```\r\n\r\n@docs simple, spacedEvenly, section\r\n\r\n","unions":[],"aliases":[],"values":[{"name":"section","comment":" The simple attributes but with a horizontal line at the top\r\nCheck the source-code for more information.\r\n","type":"List.List (Element.Attribute msg)"},{"name":"simple","comment":" The basic attributes for columns and rows.\r\nCheck the source-code for more information.\r\n","type":"List.List (Element.Attribute msg)"},{"name":"spacedEvenly","comment":" The simple attibutes but with evenly spaced elements.\r\nCheck the source-code for more information.\r\n","type":"List.List (Element.Attribute msg)"}],"binops":[]},{"name":"Framework.Heading","comment":" Styling for heading\r\n\r\n```\r\nElement.el Heading.h1 <| Element.text \"Only Element.el may be styled as a heading\"\r\n```\r\n\r\n@docs h1, h2, h3, h4, h5, h6\r\n\r\n","unions":[],"aliases":[],"values":[{"name":"h1","comment":" ","type":"List.List (Element.Attribute msg)"},{"name":"h2","comment":" ","type":"List.List (Element.Attribute msg)"},{"name":"h3","comment":" ","type":"List.List (Element.Attribute msg)"},{"name":"h4","comment":" ","type":"List.List (Element.Attribute msg)"},{"name":"h5","comment":" ","type":"List.List (Element.Attribute msg)"},{"name":"h6","comment":" ","type":"List.List (Element.Attribute msg)"}],"binops":[]},{"name":"Framework.Input","comment":" This module exposes simple attibutes for Inputs (beside Buttons) and\r\nstyling for labels.\r\n\r\n```\r\nInput.text Input.simple\r\n    { onChange = always ()\r\n    , text = \"Input.simple\"\r\n    , placeholder = Nothing\r\n    , label = Input.labelLeft Input.label <| Element.text \"Input.label\"\r\n    }\r\n```\r\n\r\n@docs simple, label\r\n\r\n","unions":[],"aliases":[],"values":[{"name":"label","comment":" ","type":"List.List (Element.Attribute msg)"},{"name":"simple","comment":" ","type":"List.List (Element.Attribute msg)"}],"binops":[]}]
\ No newline at end of file
+[{"name":"Widget","comment":" This module contains different stateless view functions. No wiring required.\n\nThese widgets should be used by defining the styling seperately:\n\n```\nWidget.button Material.primaryButton\n    { text = \"disable me\"\n    , icon =\n        FeatherIcons.slash\n            |> FeatherIcons.withSize 16\n            |> FeatherIcons.toHtml []\n            |> Element.html\n            |> Element.el []\n    , onPress =\n        if isButtonEnabled then\n            ChangedButtonStatus False\n                |> Just\n\n        else\n            Nothing\n    }\n```\n\nEvery widgets comes with a type. You can think of the widgets as building blocks.\nYou can create you own widgets by sticking widgets types together.\n\n# Buttons\n\n![Button](https://orasund.github.io/elm-ui-widgets/assets/button.png)\n\n@docs Button, TextButton, iconButton, textButton, button\n\n\n# Select\n\n![Select](https://orasund.github.io/elm-ui-widgets/assets/select.png)\n\n@docs Select, selectButton, select\n\n![multiSelect](https://orasund.github.io/elm-ui-widgets/assets/multiSelect.png)\n\n@docs MultiSelect, multiSelect\n\n\n# Dialog\n\n![dialog](https://orasund.github.io/elm-ui-widgets/assets/dialog.png)\n\n@docs Dialog, modal, dialog\n\n\n# Expansion Panel\n\n![expansionPanel](https://orasund.github.io/elm-ui-widgets/assets/expansionPanel.png)\n\n@docs ExpansionPanel, expansionPanel\n\n\n# List\n\n![list](https://orasund.github.io/elm-ui-widgets/assets/list.png)\n\n@docs row, column, buttonRow, buttonColumn\n\n\n# Sort Table\n\n![sortTable](https://orasund.github.io/elm-ui-widgets/assets/sortTable.png)\n\n@docs SortTable,Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn\n\n\n# Text Input\n\n![textInput](https://orasund.github.io/elm-ui-widgets/assets/textInput.png)\n\n@docs TextInput, textInput\n\n\n# Tab\n\n![tab](https://orasund.github.io/elm-ui-widgets/assets/textInput.png)\n\n@docs Tab, tab\n\n","unions":[],"aliases":[{"name":"Button","comment":" Button widget type\n","args":["msg"],"type":"{ text : String.String, icon : Element.Element Basics.Never, onPress : Maybe.Maybe msg }"},{"name":"Column","comment":" Column for the Sort Table widget type\n","args":["a"],"type":"Internal.SortTable.Column a"},{"name":"Dialog","comment":" Dialog widget type\n","args":["msg"],"type":"{ title : Maybe.Maybe String.String, body : Element.Element msg, accept : Maybe.Maybe (Widget.TextButton msg), dismiss : Maybe.Maybe (Widget.TextButton msg) }"},{"name":"ExpansionPanel","comment":" Expansion Panel widget type\n","args":["msg"],"type":"{ onToggle : Basics.Bool -> msg, icon : Element.Element Basics.Never, text : String.String, expandIcon : Element.Element Basics.Never, collapseIcon : Element.Element Basics.Never, content : Element.Element msg, isExpanded : Basics.Bool }"},{"name":"MultiSelect","comment":" Multi Select widget type\n\nTechnical Remark:\n\n* A more suitable name would be \"Options\"\n\n","args":["msg"],"type":"{ selected : Set.Set Basics.Int, options : List.List { text : String.String, icon : Element.Element Basics.Never }, onSelect : Basics.Int -> Maybe.Maybe msg }"},{"name":"Select","comment":" Select widget type\n\nTechnical Remark:\n\n* A more suitable name would be \"Choice\"\n\n","args":["msg"],"type":"{ selected : Maybe.Maybe Basics.Int, options : List.List { text : String.String, icon : Element.Element Basics.Never }, onSelect : Basics.Int -> Maybe.Maybe msg }"},{"name":"SortTable","comment":"  Sort Table widget type\n","args":["a","msg"],"type":"{ content : List.List a, columns : List.List (Widget.Column a), sortBy : String.String, asc : Basics.Bool, onChange : String.String -> msg }"},{"name":"Tab","comment":" Tab widget type\n","args":["msg"],"type":"{ tabs : Widget.Select msg, content : Maybe.Maybe Basics.Int -> Element.Element msg }"},{"name":"TextButton","comment":" Button widget type with no icon\n","args":["msg"],"type":"{ text : String.String, onPress : Maybe.Maybe msg }"},{"name":"TextInput","comment":" Text Input widget type\n","args":["msg"],"type":"{ chips : List.List (Widget.Button msg), text : String.String, placeholder : Maybe.Maybe (Element.Input.Placeholder msg), label : String.String, onChange : String.String -> msg }"}],"values":[{"name":"button","comment":" A button containing a text and an icon.\n","type":"Widget.Style.ButtonStyle msg -> { text : String.String, icon : Element.Element Basics.Never, onPress : Maybe.Maybe msg } -> Element.Element msg"},{"name":"buttonColumn","comment":" A column of buttons\n","type":"{ list : Widget.Style.ColumnStyle msg, button : Widget.Style.ButtonStyle msg } -> List.List ( Basics.Bool, Widget.Button msg ) -> Element.Element msg"},{"name":"buttonRow","comment":" A row of buttons\n","type":"{ list : Widget.Style.RowStyle msg, button : Widget.Style.ButtonStyle msg } -> List.List ( Basics.Bool, Widget.Button msg ) -> Element.Element msg"},{"name":"column","comment":" Replacement of `Element.column`\n","type":"Widget.Style.ColumnStyle msg -> List.List (Element.Element msg) -> Element.Element msg"},{"name":"dialog","comment":" A Dialog Window.\n","type":"Widget.Style.DialogStyle msg -> { title : Maybe.Maybe String.String, text : String.String, accept : Maybe.Maybe (Widget.TextButton msg), dismiss : Maybe.Maybe (Widget.TextButton msg) } -> List.List (Element.Attribute msg)"},{"name":"expansionPanel","comment":" An expansion Panel\n","type":"Widget.Style.ExpansionPanelStyle msg -> { onToggle : Basics.Bool -> msg, icon : Element.Element Basics.Never, text : String.String, content : Element.Element msg, isExpanded : Basics.Bool } -> Element.Element msg"},{"name":"floatColumn","comment":" A Column containing a Float\n","type":"{ title : String.String, value : a -> Basics.Float, toString : Basics.Float -> String.String, width : Element.Length } -> Widget.Column a"},{"name":"iconButton","comment":" A button containing only an icon, the text is used for screenreaders.\n","type":"Widget.Style.ButtonStyle msg -> { text : String.String, icon : Element.Element Basics.Never, onPress : Maybe.Maybe msg } -> Element.Element msg"},{"name":"intColumn","comment":" A Column containing a Int\n","type":"{ title : String.String, value : a -> Basics.Int, toString : Basics.Int -> String.String, width : Element.Length } -> Widget.Column a"},{"name":"modal","comment":" A modal.\n\nTechnical Remark:\n\n* To stop the screen from scrolling, set the height of the layout to the height of the screen.\n\n","type":"{ onDismiss : Maybe.Maybe msg, content : Element.Element msg } -> List.List (Element.Attribute msg)"},{"name":"multiSelect","comment":" Selects multible options. This can be used for checkboxes.\n","type":"Widget.MultiSelect msg -> List.List ( Basics.Bool, Widget.Button msg )"},{"name":"row","comment":" Replacement of `Element.row`\n","type":"Widget.Style.RowStyle msg -> List.List (Element.Element msg) -> Element.Element msg"},{"name":"select","comment":" Selects one out of multiple options. This can be used for radio buttons or Menus.\n","type":"Widget.Select msg -> List.List ( Basics.Bool, Widget.Button msg )"},{"name":"selectButton","comment":" A simple button that can be selected.\n","type":"Widget.Style.ButtonStyle msg -> ( Basics.Bool, Widget.Button msg ) -> Element.Element msg"},{"name":"sortTable","comment":" The View\n","type":"Widget.Style.SortTableStyle msg -> { content : List.List a, columns : List.List (Widget.Column a), sortBy : String.String, asc : Basics.Bool, onChange : String.String -> msg } -> Element.Element msg"},{"name":"stringColumn","comment":" A Column containing a String\n","type":"{ title : String.String, value : a -> String.String, toString : String.String -> String.String, width : Element.Length } -> Widget.Column a"},{"name":"tab","comment":" Displayes a list of contents in a tab\n","type":"Widget.Style.TabStyle msg -> { tabs : Widget.Select msg, content : Maybe.Maybe Basics.Int -> Element.Element msg } -> Element.Element msg"},{"name":"textButton","comment":" A button with just text and not icon.\n","type":"Widget.Style.ButtonStyle msg -> { textButton | text : String.String, onPress : Maybe.Maybe msg } -> Element.Element msg"},{"name":"textInput","comment":" A text Input that allows to include chips. ","type":"Widget.Style.TextInputStyle msg -> { chips : List.List (Widget.Button msg), text : String.String, placeholder : Maybe.Maybe (Element.Input.Placeholder msg), label : String.String, onChange : String.String -> msg } -> Element.Element msg"},{"name":"unsortableColumn","comment":" An unsortable Column, when trying to sort by this column, nothing will change.\n","type":"{ title : String.String, toString : a -> String.String, width : Element.Length } -> Widget.Column a"}],"binops":[]},{"name":"Widget.Layout","comment":" Combines multiple concepts from the [material design specification](https://material.io/components/), namely:\n\n* Top App Bar\n* Navigation Draw\n* Side Panel\n* Dialog\n* Snackbar\n\nIt is responsive and changes view to apply to the [material design guidelines](https://material.io/components/app-bars-top).\n\n# Basics\n\n@docs Layout, Part, init, timePassed, view\n\n# Actions\n\n@docs activate, queueMessage\n\n\n","unions":[{"name":"Part","comment":" The currently visible part: either the left sheet, right sheet or the search bar\n","args":[],"cases":[["LeftSheet",[]],["RightSheet",[]],["Search",[]]]}],"aliases":[{"name":"Layout","comment":" The model of the layout containing the snackbar and the currently active side sheet (or search bar)\n","args":["msg"],"type":"{ snackbar : Widget.Snackbar.Snackbar (Widget.Snackbar.Message msg), active : Maybe.Maybe Widget.Layout.Part }"}],"values":[{"name":"activate","comment":" Open either a side sheet or the search bar.\n","type":"Maybe.Maybe Widget.Layout.Part -> Widget.Layout.Layout msg -> Widget.Layout.Layout msg"},{"name":"init","comment":" The initial state of the layout\n","type":"Widget.Layout.Layout msg"},{"name":"queueMessage","comment":" Queues a message and displayes it as a snackbar once no other snackbar is visible.\n","type":"Widget.Snackbar.Message msg -> Widget.Layout.Layout msg -> Widget.Layout.Layout msg"},{"name":"timePassed","comment":" Update the model, put this function into your subscription.\nThe first argument is the seconds that have passed sice the function was called last.\n","type":"Basics.Int -> Widget.Layout.Layout msg -> Widget.Layout.Layout msg"},{"name":"view","comment":" View the layout. Replacement of `Element.layout`.\n","type":"Widget.Style.LayoutStyle msg -> { window : { height : Basics.Int, width : Basics.Int }, dialog : Maybe.Maybe (List.List (Element.Attribute msg)), layout : Widget.Layout.Layout msg, title : Element.Element msg, menu : Widget.Select msg, search : Maybe.Maybe { onChange : String.String -> msg, text : String.String, label : String.String }, actions : List.List (Widget.Button msg), onChangedSidebar : Maybe.Maybe Widget.Layout.Part -> msg } -> Element.Element msg -> Html.Html msg"}],"binops":[]},{"name":"Widget.ScrollingNav","comment":" The Scrolling Nav is a navigation bar thats updates while you scroll through\nthe page. Clicking on a navigation button will scroll directly to that section.\n\n\n# Basics\n\n@docs ScrollingNav, init, view, current, toSelect\n\n\n# Operations\n\n@docs jumpTo, jumpToWithOffset, syncPositions, getPos, setPos\n\n","unions":[],"aliases":[{"name":"ScrollingNav","comment":" ","args":["section"],"type":"{ toString : section -> String.String, fromString : String.String -> Maybe.Maybe section, positions : IntDict.IntDict String.String, arrangement : List.List section, scrollPos : Basics.Int }"}],"values":[{"name":"current","comment":" Returns the current section\n","type":"(String.String -> Maybe.Maybe section) -> Widget.ScrollingNav.ScrollingNav section -> Maybe.Maybe section"},{"name":"getPos","comment":" Syncs the position of of the viewport\n","type":"Task.Task x (Widget.ScrollingNav.ScrollingNav selection -> Widget.ScrollingNav.ScrollingNav selection)"},{"name":"init","comment":" The intial state include the labels and the arrangement of the sections\n","type":"{ toString : section -> String.String, fromString : String.String -> Maybe.Maybe section, arrangement : List.List section, toMsg : Result.Result Browser.Dom.Error (Widget.ScrollingNav.ScrollingNav section -> Widget.ScrollingNav.ScrollingNav section) -> msg } -> ( Widget.ScrollingNav.ScrollingNav section, Platform.Cmd.Cmd msg )"},{"name":"jumpTo","comment":" Scrolls the screen to the respective section\n","type":"{ section : section, onChange : Result.Result Browser.Dom.Error () -> msg } -> Widget.ScrollingNav.ScrollingNav section -> Platform.Cmd.Cmd msg"},{"name":"jumpToWithOffset","comment":" Scrolls the screen to the respective section with some offset\n","type":"{ offset : Basics.Float, section : section, onChange : Result.Result Browser.Dom.Error () -> msg } -> Widget.ScrollingNav.ScrollingNav section -> Platform.Cmd.Cmd msg"},{"name":"setPos","comment":" sets the position of the viewport to show a specific section\n","type":"Basics.Int -> Widget.ScrollingNav.ScrollingNav section -> Widget.ScrollingNav.ScrollingNav section"},{"name":"syncPositions","comment":" Updates the positions of all sections.\nThis functions should be called regularly if the height of elements on your page can change during time.\n","type":"Widget.ScrollingNav.ScrollingNav section -> Task.Task Browser.Dom.Error (Widget.ScrollingNav.ScrollingNav section -> Widget.ScrollingNav.ScrollingNav section)"},{"name":"toSelect","comment":" Returns a select widget containing all section, with the current section selected.\n","type":"(Basics.Int -> Maybe.Maybe msg) -> Widget.ScrollingNav.ScrollingNav section -> Widget.Select msg"},{"name":"view","comment":" Opinionated way of viewing the section.\n\nThis might be useful at first, but you should consider writing your own view function.\n\n```\nview :\n    (section -> Element msg)\n    -> Model section\n    -> List (Element msg)\nview asElement { toString, arrangement } =\n    arrangement\n        |> List.map\n            (\\header ->\n                Element.el\n                    [ header\n                        |> toString\n                        |> Attributes.id\n                        |> Element.htmlAttribute\n                    , Element.width <| Element.fill\n                    ]\n                <|\n                    asElement <|\n                        header\n            )\n```\n\n","type":"(section -> Element.Element msg) -> Widget.ScrollingNav.ScrollingNav section -> List.List (Element.Element msg)"}],"binops":[]},{"name":"Widget.Snackbar","comment":" ![Snackbar](https://orasund.github.io/elm-ui-widgets/assets/snackbar.png)\n\nA [snackbar](https://material.io/components/snackbars/) shows notification, one at a time.\n\n\n# Basics\n\n@docs Snackbar, Message, init, current, timePassed, view\n\n\n# Operations\n\n@docs insert, insertFor, dismiss\n\n","unions":[],"aliases":[{"name":"Message","comment":" A message with maybe some action button\n","args":["msg"],"type":"{ text : String.String, button : Maybe.Maybe (Widget.TextButton msg) }"},{"name":"Snackbar","comment":" A snackbar has a queue of Notifications, each with the amount of ms the message should be displayed\n","args":["a"],"type":"{ queue : Queue.Queue ( a, Basics.Int ), current : Maybe.Maybe ( a, Basics.Int ) }"}],"values":[{"name":"current","comment":" Returns the current element.\n","type":"Widget.Snackbar.Snackbar a -> Maybe.Maybe a"},{"name":"dismiss","comment":" Dismiss the current message.\n","type":"Widget.Snackbar.Snackbar a -> Widget.Snackbar.Snackbar a"},{"name":"init","comment":" Inital state\n","type":"Widget.Snackbar.Snackbar a"},{"name":"insert","comment":" Insert a message that will last for 10 seconds.\n","type":"a -> Widget.Snackbar.Snackbar a -> Widget.Snackbar.Snackbar a"},{"name":"insertFor","comment":" Insert a message for a specific amount of milli seconds.\n","type":"Basics.Int -> a -> Widget.Snackbar.Snackbar a -> Widget.Snackbar.Snackbar a"},{"name":"timePassed","comment":" Updates the model. This functions should be called regularly.\nThe first argument is the milli seconds that passed since the last time the function was called.\n","type":"Basics.Int -> Widget.Snackbar.Snackbar a -> Widget.Snackbar.Snackbar a"},{"name":"view","comment":" Views the current Message. (only one at a time)\n","type":"Widget.Style.SnackbarStyle msg -> (a -> Widget.Snackbar.Message msg) -> Widget.Snackbar.Snackbar a -> Maybe.Maybe (Element.Element msg)"}],"binops":[]},{"name":"Widget.Style","comment":" This module contains style types for every widget.\n\n@docs ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, RowStyle, SnackbarStyle, SortTableStyle, TabStyle, TextInputStyle\n\n","unions":[],"aliases":[{"name":"ButtonStyle","comment":" ","args":["msg"],"type":"{ container : List.List (Element.Attribute msg), labelRow : List.List (Element.Attribute msg), text : List.List (Element.Attribute msg), ifDisabled : List.List (Element.Attribute msg), ifActive : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg) }"},{"name":"ColumnStyle","comment":" ","args":["msg"],"type":"{ containerColumn : List.List (Element.Attribute msg), element : List.List (Element.Attribute msg), ifFirst : List.List (Element.Attribute msg), ifLast : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg) }"},{"name":"DialogStyle","comment":" ","args":["msg"],"type":"{ containerColumn : List.List (Element.Attribute msg), title : List.List (Element.Attribute msg), buttonRow : List.List (Element.Attribute msg), acceptButton : Widget.Style.ButtonStyle msg, dismissButton : Widget.Style.ButtonStyle msg, text : List.List (Element.Attribute msg) }"},{"name":"ExpansionPanelStyle","comment":" Technical Remark:\n\n  - If icons are defined in Svg, they might not display correctly.\n    To avoid that, make sure to wrap them in `Element.html >> Element.el []`\n\n","args":["msg"],"type":"{ containerColumn : List.List (Element.Attribute msg), panelRow : List.List (Element.Attribute msg), labelRow : List.List (Element.Attribute msg), content : List.List (Element.Attribute msg), expandIcon : Element.Element Basics.Never, collapseIcon : Element.Element Basics.Never }"},{"name":"LayoutStyle","comment":" Technical Remark:\n\n  - If icons are defined in Svg, they might not display correctly.\n    To avoid that, make sure to wrap them in `Element.html >> Element.el []`\n\n","args":["msg"],"type":"{ container : List.List (Element.Attribute msg), snackbar : Widget.Style.SnackbarStyle msg, layout : List.List (Element.Attribute msg) -> Element.Element msg -> Html.Html msg, header : List.List (Element.Attribute msg), sheet : List.List (Element.Attribute msg), sheetButton : Widget.Style.ButtonStyle msg, menuButton : Widget.Style.ButtonStyle msg, menuTabButton : Widget.Style.ButtonStyle msg, menuIcon : Element.Element Basics.Never, moreVerticalIcon : Element.Element Basics.Never, spacing : Basics.Int, title : List.List (Element.Attribute msg), searchIcon : Element.Element Basics.Never, search : List.List (Element.Attribute msg), searchFill : List.List (Element.Attribute msg) }"},{"name":"RowStyle","comment":" ","args":["msg"],"type":"{ containerRow : List.List (Element.Attribute msg), element : List.List (Element.Attribute msg), ifFirst : List.List (Element.Attribute msg), ifLast : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg) }"},{"name":"SnackbarStyle","comment":" ","args":["msg"],"type":"{ containerRow : List.List (Element.Attribute msg), text : List.List (Element.Attribute msg), button : Widget.Style.ButtonStyle msg }"},{"name":"SortTableStyle","comment":" Technical Remark:\n\n  - If icons are defined in Svg, they might not display correctly.\n    To avoid that, make sure to wrap them in `Element.html >> Element.el []`\n\n","args":["msg"],"type":"{ containerTable : List.List (Element.Attribute msg), headerButton : Widget.Style.ButtonStyle msg, ascIcon : Element.Element Basics.Never, descIcon : Element.Element Basics.Never, defaultIcon : Element.Element Basics.Never }"},{"name":"TabStyle","comment":" ","args":["msg"],"type":"{ button : Widget.Style.ButtonStyle msg, optionRow : List.List (Element.Attribute msg), containerColumn : List.List (Element.Attribute msg), content : List.List (Element.Attribute msg) }"},{"name":"TextInputStyle","comment":" ","args":["msg"],"type":"{ chipButton : Widget.Style.ButtonStyle msg, containerRow : List.List (Element.Attribute msg), chipsRow : List.List (Element.Attribute msg), input : List.List (Element.Attribute msg) }"}],"values":[],"binops":[]},{"name":"Widget.Style.Material","comment":" ![Example using the Material Design style](https://orasund.github.io/elm-ui-widgets/assets/material-style.png)\n\nThis module implements a Material design theme for all widgets.\n\nThe stylings are following [the official Material Design guidelines](https://material.io/components) as close as possible.\nPlease use these widgets in combination with the official guidelines.\n\nThe typograpahy is taken from [the material design guidelines](https://material.io/design/typography/the-type-system.html#type-scale).\nIts recommended to use a font size of 16px width and the [Roboto Font](https://fonts.google.com/specimen/Roboto?query=Ro).\n\nThe style are not opaque, so you can change every styling to your needs.\n\nIf you have any suggestions or improvements, be sure to leave a PR or a Issue over at the github repos.\n\nYou can use the theme by copying the following code:\n\n```\ntype alias Style msg =\n    { dialog : DialogStyle msg\n    , expansionPanel : ExpansionPanelStyle msg\n    , button : ButtonStyle msg\n    , primaryButton : ButtonStyle msg\n    , tab : TabStyle msg\n    , textInput : TextInputStyle msg\n    , chipButton : ButtonStyle msg\n    , row : RowStyle msg\n    , buttonRow : RowStyle msg\n    , column : ColumnStyle msg\n    , cardColumn : ColumnStyle msg\n    , sortTable : SortTableStyle msg\n    , selectButton : ButtonStyle msg\n    , layout : LayoutStyle msg\n    }\n\nsortTable : Palette -> SortTableStyle msg\nsortTable palette =\n    { containerTable = []\n    , headerButton = Material.textButton palette\n    , ascIcon = Icons.chevronUp |> Element.html |> Element.el []\n    , descIcon = Icons.chevronDown |> Element.html |> Element.el []\n    , defaultIcon = Element.none\n    }\n\n\nstyle : Palette -> Style msg\nstyle palette =\n    { sortTable = sortTable palette\n    , row = Material.row\n    , buttonRow = Material.buttonRow\n    , cardColumn = Material.cardColumn palette\n    , column = Material.column\n    , button = Material.outlinedButton palette\n    , primaryButton = Material.containedButton palette\n    , selectButton = Material.toggleButton palette\n    , tab = Material.tab palette\n    , textInput = Material.textInput palette\n    , chipButton = Material.chip palette\n    , expansionPanel = Material.expansionPanel palette\n    , dialog = Material.alertDialog palette\n    , layout = Material.layout palette\n    }\n```\n\n# Palette\n\n@docs Palette, defaultPalette, darkPalette\n\n\n# Button\n\nDifferent styles for buttons have different meanings.\n\n  - Use `textButton` as your default button\n  - Use `containedButton` for any important action\n  - Use `outlinedButton` if you have more then one important action.\n    Use `containedButton` for **the most** important action of the group.\n\n@docs containedButton, outlinedButton, textButton\n\n@docs iconButton, toggleButton, buttonRow\n\n# Card\n\nIn the material design specification the card is not really specified at all.\nIm practice the List seams more useful then a own card widget.\nThus for now we only provide a card containing a list.\n\n@docs cardColumn\n\n# Chip\n\n@docs chip, textInput\n\n# Dialog\n\n@docs alertDialog\n\n\n# Expansion Panel\n\n@docs expansionPanel\n\n\n# List\n\nThe [List widget](https://material.io/components/lists) is a very complex widget that sadly only particially made it into this package.\n\n@docs row, column\n\n# Snackbar\n\n@docs snackbar\n\n# Tab\n\n@docs tab, tabButton\n\n# Layout\n\n@docs layout\n","unions":[],"aliases":[{"name":"Palette","comment":" The material design comes with customizable color palettes.\n\nCheck out [the official documentation about the color system](https://material.io/design/color/the-color-system.html#color-theme-creation) to see how these colors are used.\n\nFor the `-on` colors you can use white, for transitions into white, or black,for transitions into black. Other colors are also possible, but i've not seen any website acutally using a different color.\n\n","args":[],"type":"{ primary : Color.Color, secondary : Color.Color, background : Color.Color, surface : Color.Color, error : Color.Color, on : { primary : Color.Color, secondary : Color.Color, background : Color.Color, surface : Color.Color, error : Color.Color } }"}],"values":[{"name":"alertDialog","comment":" An alert dialog for important decisions. Use a snackbar for less important notification.\n\n![Alert Dialog](https://material.io/develop/images/content/9d61e2d1bd60599344c7fae5e71c9667.png)\n\n_Image taken from [material.io](https://material.io/develop/android/components/buttons/)_\n\n\n","type":"Widget.Style.Material.Palette -> Widget.Style.DialogStyle msg"},{"name":"buttonRow","comment":" a Row of buttons.\n\nOnly use in combination with `toggleButton`\n\n","type":"Widget.Style.RowStyle msg"},{"name":"cardColumn","comment":" A List styled like a card.\n\nTechnical Remark:\n\nThis is a simplification of the [Material Design Card\n](https://material.io/components/cards) and might get replaced at a later date.\n\n","type":"Widget.Style.Material.Palette -> Widget.Style.ColumnStyle msg"},{"name":"chip","comment":" Chips have the same behaviour as buttons but are visually less important.\n\nIn the [official documentation](https://material.io/components/chips#types) chips have different names depending on where they are used:\n\n  - **Input Chips** are used inside a text field. Use `textInput` for this feature.\n  - **Choice Chips** are used for selcting an option.\n    The material design guidelines recommend using `toggleButton` for icons with no text and chips for text with no icons.\n  - **Filter Chips** are used for selecting multiple options. They typically have a done-icon when selected.\n  - **Action chips** are like button. Make sure to include an icon when using action chips.\n\nTechnical Remark:\n\n  - There seems to be a bug, where in the mouseOver effects are now visible.\n    This might have something to do with .\n    This needs to be investigated, but for now i leave it at that.\n\n  - Desided against the implementation of an outlined chip.\n    Please open a new issue or a PR if you want to have it implemented.\n\n","type":"Widget.Style.Material.Palette -> Widget.Style.ButtonStyle msg"},{"name":"column","comment":" A simple styling for a column.\n","type":"Widget.Style.ColumnStyle msg"},{"name":"containedButton","comment":" A contained button representing the most important action of a group.\n\n![Contained Button](https://material.io/develop/images/content/79e62add1830d33fc90edb22212bce53.svg)\n\n_Image taken from [material.io](https://material.io/develop/android/components/buttons/)_\n\n","type":"Widget.Style.Material.Palette -> Widget.Style.ButtonStyle msg"},{"name":"darkPalette","comment":" The offical dark theme of google.\n\n![The dark theme](https://lh3.googleusercontent.com/tv7J2o4ZiSmLYwyBslBs_PLzKyzI8QUV5qdvHGfoAQn9r7pY4Hj5SmW27m3zUWeDtRSE8Cb5_5PQmkbavDfw7XbIL8EodIKZhilRdg=w1064-v0)\n\n_Image take from [material.io](https://material.io/design/color/dark-theme.html#ui-application)_\n\n","type":"Widget.Style.Material.Palette"},{"name":"defaultPalette","comment":" The default color theme.\n\n![The default theme](https://lh3.googleusercontent.com/k6WO1fd7T40A9JvSVfHqs0CPLFyTEDCecsVGxEDhOaTP0wUTPYOVVkxt60hKxBprgNoMqs8OyKqtlaQ4tDBtQJs-fTcZrpZEjxhUVQ=w1064-v0)\n\n_Image take from [material.io](https://material.io/design/color/the-color-system.html#color-theme-creation)_\n\n","type":"Widget.Style.Material.Palette"},{"name":"expansionPanel","comment":" The expansion Panel is an outdated part of the material design specification.\nIn modern implementation it gets replaced with a very sophisticated list widget.\n\nTechnical Remarks:\n\n  - The expansion panel is part of an [older version](https://material.io/archive/guidelines/components/expansion-panels.html) of the Material Design.\n    The newer version is part of the List component.\n    The styling is taken from the [new specification](https://material.io/components/lists#specs).\n  - The Icons are taken from [danmarcab/material-icons](https://dark.elm.dmy.fr/packages/danmarcab/material-icons/latest/).\n\n","type":"Widget.Style.Material.Palette -> Widget.Style.ExpansionPanelStyle msg"},{"name":"iconButton","comment":" An single selectable icon.\n\n![Icon Button](https://material.io/develop/images/content/9bc212d8a3ef79bb7ed83a5359651505.png)\n\n_Image taken from [material.io](https://material.io/develop/android/components/buttons/)_\n\nTechnical Remark:\n\n  - Could not find any specification details\n\n","type":"Widget.Style.Material.Palette -> Widget.Style.ButtonStyle msg"},{"name":"layout","comment":" The Layout Widget combines the following Material design concepts:\n\n* Top bar\n* Navigation drawer\n* Side Sheet\n* Dialog\n* Snackbar\n\nFuture updates might try to seperate them into there own widgets.\nBut for now they are only available as an all-in-one solution.\n\nTechnical Remark:\n\n  - Due to [a bug in Elm-Ui](https://github.com/mdgriffith/elm-ui/issues/47) the menu button still behave wierd.\n    I've not found a workaround for it.\n  - The Icons are taken from [danmarcab/material-icons](https://dark.elm.dmy.fr/packages/danmarcab/material-icons/latest/).\n  - The drawer button as not taken from the specification (This will been to be added later)\n\n","type":"Widget.Style.Material.Palette -> Widget.Style.LayoutStyle msg"},{"name":"outlinedButton","comment":" A outlined button representing an important action within a group.\n\n![Contained Button](https://material.io/develop/images/content/2b50635d38c5fdec260f09be9aeafb10.svg)\n\n_Image taken from [material.io](https://material.io/develop/android/components/buttons/)_\n\n","type":"Widget.Style.Material.Palette -> Widget.Style.ButtonStyle msg"},{"name":"row","comment":" A simple styling for a row.\n","type":"Widget.Style.RowStyle msg"},{"name":"snackbar","comment":" A typical snackbar\n\n![Snackbar](https://material.io/develop/images/content/f2ec5451582a06af5eb20e3dfb3d27d5.svg)\n\n_Image take from [material.io](https://material.io/develop/android/components/snackbar/)_\n\nTechnical Remark:\n\n  - The text color of the button was not given in the specification. This implementation\n    adujsts the luminance of the color to fit the [w3 accessability standard](https://www.w3.org/TR/WCAG20/#Contrast)\n\n","type":"Widget.Style.Material.Palette -> Widget.Style.SnackbarStyle msg"},{"name":"tab","comment":" A Tab bar meant for only the upper most level. Do not use a tab within a tab.\n","type":"Widget.Style.Material.Palette -> Widget.Style.TabStyle msg"},{"name":"tabButton","comment":" A single Tab button.\n\nTechnical Remark:\n\n* The official specification states that the background color should be the surface color,\n   but the pictures and actuall implementations all have no background color.\n   So here the background color is also not set.\n","type":"Widget.Style.Material.Palette -> Widget.Style.ButtonStyle msg"},{"name":"textButton","comment":" A text button representing a simple action within a group.\n\n![Text Button](https://material.io/develop/images/content/d3079632c6f54d86f9b7093d541c2ee9.svg)\n\n_Image taken from [material.io](https://material.io/develop/android/components/buttons/)_\n\n","type":"Widget.Style.Material.Palette -> Widget.Style.ButtonStyle msg"},{"name":"textInput","comment":" A text input style that is included only to support input chips.\n\nTechnical Remark:\n\n  - This is just a temporary implementation. It will soon be replaced with the official implementation.\n\n","type":"Widget.Style.Material.Palette -> Widget.Style.TextInputStyle msg"},{"name":"toggleButton","comment":" A ToggleButton. Only use as a group in combination with `buttonRow`.\n\n![Toggle Button](https://material.io/develop/images/content/749a1ba8591d02356fa1d6eea2641d96.svg)\n\n_Image taken from [material.io](https://material.io/develop/android/components/buttons/)_\n\nToggle buttons should only be used with the `iconButton` widget, else use chips instead.\n\nTechnical Remark:\n\n  - Border color was not defined in the [specification](https://material.io/components/buttons#toggle-button)\n  - There are two different versions, one where the selected color is gray and another where the color is primary.\n    I noticed the gray version was used more often, so i went with that one.\n\n","type":"Widget.Style.Material.Palette -> Widget.Style.ButtonStyle msg"}],"binops":[]},{"name":"Widget.Style.Template","comment":" ![Example using the Template style](https://orasund.github.io/elm-ui-widgets/assets/template-style.png)\n\nThis package contains mockups designed for writing your own style.\n\nStart by copying the following code and then replace the fields one by one.\n\n```\ntype alias Style msg =\n    { dialog : DialogStyle msg\n    , expansionPanel : ExpansionPanelStyle msg\n    , button : ButtonStyle msg\n    , primaryButton : ButtonStyle msg\n    , tab : TabStyle msg\n    , textInput : TextInputStyle msg\n    , chipButton : ButtonStyle msg\n    , row : RowStyle msg\n    , buttonRow : RowStyle msg\n    , column : ColumnStyle msg\n    , cardColumn : ColumnStyle msg\n    , sortTable : SortTableStyle msg\n    , selectButton : ButtonStyle msg\n    , layout : LayoutStyle msg\n    }\n\nstyle : Style msg\nstyle =\n    { sortTable = Template.sortTable <| \"sortTable\"\n    , row = Template.row <| \"row\"\n    , buttonRow = Template.row <| \"buttonRow\"\n    , cardColumn = Template.column <| \"cardRow\"\n    , column = Template.column <| \"column\"\n    , button = Template.button <| \"button\"\n    , primaryButton = Template.button <| \"primaryButton\"\n    , tab = Template.tab <| \"tab\"\n    , textInput = Template.textInput <| \"textInput\"\n    , chipButton = Template.button <| \"chipButton\"\n    , expansionPanel = Template.expansionPanel \"expansionPanel\"\n    , selectButton = Template.button \"selectButton\"\n    , dialog = Template.dialog \"dialog\"\n    , layout = Template.layout \"layout\"\n    }\n```\n\n\n# Base Elements\n\n@docs box, decoration, icon\n\n\n# Mockups\n\n@docs button, column, dialog, expansionPanel, layout, row, snackbar, sortTable, tab, textInput\n\n","unions":[],"aliases":[],"values":[{"name":"box","comment":" A box representing an element\n","type":"String.String -> List.List (Element.Attribute msg)"},{"name":"button","comment":"\n\n```\nbutton : String -> ButtonStyle msg\nbutton string =\n    { container = box <| string ++ \":container\"\n    , labelRow = box <| string ++ \":labelRow\"\n    , text = box <| string ++ \":text\"\n    , ifDisabled = decoration <| string ++ \":ifDisabled\"\n    , ifActive = decoration <| string ++ \":ifActive\"\n    , otherwise = decoration <| string ++ \":otherwise\"\n    }\n```\n\n","type":"String.String -> Widget.Style.ButtonStyle msg"},{"name":"column","comment":"\n\n```\ncolumn : String -> ColumnStyle msg\ncolumn string =\n    { containerColumn = box <| string ++ \":containerColumn\"\n    , element = box <| string ++ \":element\"\n    , ifFirst = box <| string ++ \":ifFirst\"\n    , ifLast = box <| string ++ \":ifLast\"\n    , otherwise = box <| string ++ \":otherwise\"\n    }\n```\n\n","type":"String.String -> Widget.Style.ColumnStyle msg"},{"name":"decoration","comment":" An additional attribute representing a state change.\n","type":"String.String -> List.List (Element.Attribute msg)"},{"name":"dialog","comment":"\n\n```\ndialog : String -> DialogStyle msg\ndialog string =\n    { containerColumn = box <| string ++ \":containerColumn\"\n    , title = box <| string ++ \":title\"\n    , text = box <| string ++ \":text\"\n    , buttonRow = box <| string ++ \":buttonRow\"\n    , acceptButton = button <| string ++ \":acceptButton\"\n    , dismissButton = button <| string ++ \":dismissButton\"\n    }\n```\n\n","type":"String.String -> Widget.Style.DialogStyle msg"},{"name":"expansionPanel","comment":"\n\n```\nexpansionPanel : String -> ExpansionPanelStyle msg\nexpansionPanel string =\n    { containerColumn = box <| string ++ \":containerColumn\"\n    , panelRow = box <| string ++ \":panelRow\"\n    , labelRow = box <| string ++ \":labelRow\"\n    , content = box <| string ++ \":content\"\n    , expandIcon = icon <| string ++ \":expandIcon\"\n    , collapseIcon = icon <| string ++ \":collapseIcon\"\n    }\n\n```\n\n","type":"String.String -> Widget.Style.ExpansionPanelStyle msg"},{"name":"icon","comment":" A circle representing an icon\n","type":"String.String -> Element.Element msg"},{"name":"layout","comment":"\n\n```\nlayout : String -> LayoutStyle msg\nlayout string =\n    { container = box <| string ++ \":container\"\n    , snackbar = snackbar <| string ++ \":snackbar\"\n    , layout = Element.layout\n    , header = box <| string ++ \":header\"\n    , menuButton = button <| string ++ \":menuButton\"\n    , sheetButton = button <| string ++ \":sheetButton\"\n    , menuTabButton = button <| string ++ \":menuTabButton\"\n    , sheet = box <| string ++ \":sheet\"\n    , menuIcon = icon <| string ++ \":menuIcon\"\n    , moreVerticalIcon = icon <| string ++ \":moreVerticalIcon\"\n    , spacing = 8\n    , title = box <| string ++ \":title\"\n    , searchIcon = icon <| string ++ \":searchIcon\"\n    , search = box <| string ++ \":search\"\n    , searchFill = box <| string ++ \":searchFill\"\n    }\n```\n\n","type":"String.String -> Widget.Style.LayoutStyle msg"},{"name":"row","comment":"\n\n```\nrow : String -> RowStyle msg\nrow string =\n    { containerRow = box <| string ++ \":containerRow\"\n    , element = box <| string ++ \":element\"\n    , ifFirst = box <| string ++ \":ifFirst\"\n    , ifLast = box <| string ++ \":ifLast\"\n    , otherwise = box <| string ++ \":otherwise\"\n    }\n```\n\n","type":"String.String -> Widget.Style.RowStyle msg"},{"name":"snackbar","comment":"\n\n```\nsnackbar : String -> SnackbarStyle msg\nsnackbar string =\n    { containerRow = box <| string ++ \":containerRow\"\n    , button = button <| string ++ \":button\"\n    , text = box <| string ++ \":text\"\n    }\n```\n\n","type":"String.String -> Widget.Style.SnackbarStyle msg"},{"name":"sortTable","comment":"\n\n```\nsortTable : String -> SortTableStyle msg\nsortTable string =\n    { containerTable = box <| string ++ \":containerTable\"\n    , headerButton = button <| string ++ \":headerButton\"\n    , ascIcon = icon <| string ++ \":ascIcon\"\n    , descIcon = icon <| string ++ \":descIcon\"\n    , defaultIcon = icon <| string ++ \":defaultIcon\"\n    }\n```\n\n","type":"String.String -> Widget.Style.SortTableStyle msg"},{"name":"tab","comment":"\n\n```\ntab : String -> TabStyle msg\ntab string =\n    { button = button <| string ++ \":button\"\n    , optionRow = box <| string ++ \":optionRow\"\n    , containerColumn = box <| string ++ \":containerColumn\"\n    , content = box <| string ++ \":content\"\n    }\n```\n\n","type":"String.String -> Widget.Style.TabStyle msg"},{"name":"textInput","comment":"\n\n```\ntextInput : String -> TextInputStyle msg\ntextInput string =\n    { chipButton = button <| string ++ \":chipButton\"\n    , chipsRow = box <| string ++ \":chipsRow\"\n    , containerRow = box <| string ++ \":containerRow\"\n    , input = box <| string ++ \":input\"\n    }\n\n```\n\n","type":"String.String -> Widget.Style.TextInputStyle msg"}],"binops":[]}]
\ No newline at end of file
diff --git a/elm.json b/elm.json
index 1b50a13..d259fd4 100644
--- a/elm.json
+++ b/elm.json
@@ -5,12 +5,13 @@
     "license": "BSD-3-Clause",
     "version": "1.0.0",
     "exposed-modules": [
-        "Widget.Layout",
-        "Widget.ScrollingNav",
-        "Widget.Snackbar",
+        "Widget",
         "Widget.Style",
         "Widget.Style.Material",
-        "Widget.Style.Template"
+        "Widget.Style.Template",
+        "Widget.Layout",
+        "Widget.ScrollingNav",
+        "Widget.Snackbar"
     ],
     "elm-version": "0.19.0 <= v < 0.20.0",
     "dependencies": {
diff --git a/example/src/Example/Button.elm b/example/src/Example/Button.elm
index f09a798..0ba4857 100644
--- a/example/src/Example/Button.elm
+++ b/example/src/Example/Button.elm
@@ -4,7 +4,8 @@ import Element exposing (Element)
 import FeatherIcons
 import Widget
 import Widget.Style exposing (ButtonStyle, RowStyle)
-
+import Widget.Style.Material as Material
+import Browser
 
 type alias Style style msg =
     { style
@@ -13,6 +14,13 @@ type alias Style style msg =
         , row : RowStyle msg
     }
 
+materialStyle : Style {} msg
+materialStyle =
+    { primaryButton = Material.containedButton Material.defaultPalette
+    , button = Material.outlinedButton Material.defaultPalette
+    , row = Material.row 
+    }
+
 
 type Model
     = IsButtonEnabled Bool
@@ -77,3 +85,12 @@ view msgMapper style (IsButtonEnabled isButtonEnabled) =
         }
     ]
         |> Widget.row style.row
+
+main : Program () Model Msg
+main =
+    Browser.element
+        { init = always init
+        , view = view identity materialStyle >> Element.layout []
+        , update = update
+        , subscriptions = subscriptions
+        }
\ No newline at end of file
diff --git a/example/src/Example/Dialog.elm b/example/src/Example/Dialog.elm
index aeb182e..b587c3d 100644
--- a/example/src/Example/Dialog.elm
+++ b/example/src/Example/Dialog.elm
@@ -4,7 +4,8 @@ import Element exposing (Element)
 import FeatherIcons
 import Widget
 import Widget.Style exposing (ButtonStyle, DialogStyle)
-
+import Widget.Style.Material as Material
+import Browser
 
 type alias Style style msg =
     { style
@@ -12,6 +13,11 @@ type alias Style style msg =
         , primaryButton : ButtonStyle msg
     }
 
+materialStyle : Style {} msg
+materialStyle =
+    { dialog = Material.alertDialog Material.defaultPalette
+    , primaryButton = Material.containedButton Material.defaultPalette
+    }
 
 type Model
     = IsOpen Bool
@@ -87,3 +93,12 @@ view msgMapper style (IsOpen isOpen) =
                         []
                    )
             )
+
+main : Program () Model Msg
+main =
+    Browser.element
+        { init = always init
+        , view = view identity materialStyle >> Element.layout []
+        , update = update
+        , subscriptions = subscriptions
+        }
\ No newline at end of file
diff --git a/example/src/Example/ExpansionPanel.elm b/example/src/Example/ExpansionPanel.elm
index 757c16b..566a44b 100644
--- a/example/src/Example/ExpansionPanel.elm
+++ b/example/src/Example/ExpansionPanel.elm
@@ -3,13 +3,18 @@ module Example.ExpansionPanel exposing (Model, Msg, init, subscriptions, update,
 import Element exposing (Element)
 import Widget
 import Widget.Style exposing (ExpansionPanelStyle)
-
+import Widget.Style.Material as Material
+import Browser
 
 type alias Style style msg =
     { style
         | expansionPanel : ExpansionPanelStyle msg
     }
 
+materialStyle : Style {} msg
+materialStyle =
+    { expansionPanel = Material.expansionPanel Material.defaultPalette
+    }
 
 type Model
     = IsExpanded Bool
@@ -49,3 +54,12 @@ view msgMapper style (IsExpanded isExpanded) =
     , content = Element.text <| "Hello World"
     }
         |> Widget.expansionPanel style.expansionPanel
+
+main : Program () Model Msg
+main =
+    Browser.element
+        { init = always init
+        , view = view identity materialStyle >> Element.layout []
+        , update = update
+        , subscriptions = subscriptions
+        }
\ No newline at end of file
diff --git a/example/src/Example/List.elm b/example/src/Example/List.elm
index 5e86224..cdb7b7e 100644
--- a/example/src/Example/List.elm
+++ b/example/src/Example/List.elm
@@ -3,13 +3,18 @@ module Example.List exposing (Model, Msg, init, subscriptions, update, view)
 import Element exposing (Element)
 import Widget
 import Widget.Style exposing (ColumnStyle)
-
+import Widget.Style.Material as Material
+import Browser
 
 type alias Style style msg =
     { style
         | cardColumn : ColumnStyle msg
     }
 
+materialStyle : Style {} msg
+materialStyle =
+    { cardColumn = Material.cardColumn Material.defaultPalette
+    }
 
 type alias Model =
     ()
@@ -45,3 +50,12 @@ view _ style () =
     , Element.text <| "C"
     ]
         |> Widget.column style.cardColumn
+
+main : Program () Model Msg
+main =
+    Browser.element
+        { init = always init
+        , view = view identity materialStyle >> Element.layout []
+        , update = update
+        , subscriptions = subscriptions
+        }
\ No newline at end of file
diff --git a/example/src/Example/Modal.elm b/example/src/Example/Modal.elm
index 60166a3..f09b0b2 100644
--- a/example/src/Example/Modal.elm
+++ b/example/src/Example/Modal.elm
@@ -4,7 +4,8 @@ import Element exposing (Element)
 import FeatherIcons
 import Widget
 import Widget.Style exposing (ButtonStyle, ColumnStyle)
-
+import Widget.Style.Material as Material
+import Browser
 
 type alias Style style msg =
     { style
@@ -12,6 +13,11 @@ type alias Style style msg =
         , primaryButton : ButtonStyle msg
     }
 
+materialStyle : Style {} msg
+materialStyle =
+    { cardColumn = Material.cardColumn Material.defaultPalette
+    , primaryButton = Material.containedButton Material.defaultPalette
+    }
 
 type Model
     = IsEnabled Bool
@@ -86,3 +92,12 @@ view msgMapper style (IsEnabled isEnabled) =
                         []
                    )
             )
+
+main : Program () Model Msg
+main =
+    Browser.element
+        { init = always init
+        , view = view identity materialStyle >> Element.layout []
+        , update = update
+        , subscriptions = subscriptions
+        }
\ No newline at end of file
diff --git a/example/src/Example/MultiSelect.elm b/example/src/Example/MultiSelect.elm
index 73cfa0a..acc77e1 100644
--- a/example/src/Example/MultiSelect.elm
+++ b/example/src/Example/MultiSelect.elm
@@ -4,7 +4,8 @@ import Element exposing (Element)
 import Set exposing (Set)
 import Widget
 import Widget.Style exposing (ButtonStyle, RowStyle)
-
+import Widget.Style.Material as Material
+import Browser
 
 type alias Style style msg =
     { style
@@ -12,6 +13,11 @@ type alias Style style msg =
         , selectButton : ButtonStyle msg
     }
 
+materialStyle : Style {} msg
+materialStyle =
+    { buttonRow = Material.buttonRow
+    , selectButton = Material.toggleButton Material.defaultPalette
+    }
 
 type Model
     = Selected (Set Int)
@@ -67,3 +73,12 @@ view msgMapper style (Selected selected) =
             { list = style.buttonRow
             , button = style.selectButton
             }
+
+main : Program () Model Msg
+main =
+    Browser.element
+        { init = always init
+        , view = view identity materialStyle >> Element.layout []
+        , update = update
+        , subscriptions = subscriptions
+        }
\ No newline at end of file
diff --git a/example/src/Example/Select.elm b/example/src/Example/Select.elm
index b51e58f..6a9a091 100644
--- a/example/src/Example/Select.elm
+++ b/example/src/Example/Select.elm
@@ -3,7 +3,8 @@ module Example.Select exposing (Model, Msg, init, subscriptions, update, view)
 import Element exposing (Element)
 import Widget
 import Widget.Style exposing (ButtonStyle, RowStyle)
-
+import Widget.Style.Material as Material
+import Browser
 
 type alias Style style msg =
     { style
@@ -11,6 +12,11 @@ type alias Style style msg =
         , selectButton : ButtonStyle msg
     }
 
+materialStyle : Style {} msg
+materialStyle =
+    { buttonRow = Material.buttonRow
+    , selectButton = Material.toggleButton Material.defaultPalette
+    }
 
 type Model
     = Selected (Maybe Int)
@@ -59,3 +65,12 @@ view msgMapper style (Selected selected) =
             { list = style.buttonRow
             , button = style.selectButton
             }
+
+main : Program () Model Msg
+main =
+    Browser.element
+        { init = always init
+        , view = view identity materialStyle >> Element.layout []
+        , update = update
+        , subscriptions = subscriptions
+        }
\ No newline at end of file
diff --git a/example/src/Example/SortTable.elm b/example/src/Example/SortTable.elm
index 585c0e7..a3eb7b0 100644
--- a/example/src/Example/SortTable.elm
+++ b/example/src/Example/SortTable.elm
@@ -3,13 +3,29 @@ module Example.SortTable exposing (Model, Msg, init, subscriptions, update, view
 import Element exposing (Element)
 import Widget
 import Widget.Style exposing (SortTableStyle)
-
+import Widget.Style.Material as Material
+import Browser
 
 type alias Style style msg =
     { style
         | sortTable : SortTableStyle msg
     }
 
+materialStyle : Style {} msg
+materialStyle =
+    { sortTable = 
+        { containerTable = []
+        , headerButton = Material.textButton Material.defaultPalette
+        , ascIcon = 
+            Material.expansionPanel Material.defaultPalette
+                |> .collapseIcon
+        , descIcon =
+            Material.expansionPanel Material.defaultPalette
+                |> .expandIcon
+        , defaultIcon = Element.none
+        }
+    }
+
 
 type alias Model =
     { title : String
@@ -87,3 +103,12 @@ view msgMapper style model =
         , sortBy = model.title
         , onChange = ChangedSorting >> msgMapper
         }
+
+main : Program () Model Msg
+main =
+    Browser.element
+        { init = always init
+        , view = view identity materialStyle >> Element.layout []
+        , update = update
+        , subscriptions = subscriptions
+        }
\ No newline at end of file
diff --git a/example/src/Example/Tab.elm b/example/src/Example/Tab.elm
index 70c53af..f07ca4a 100644
--- a/example/src/Example/Tab.elm
+++ b/example/src/Example/Tab.elm
@@ -3,13 +3,18 @@ module Example.Tab exposing (Model, Msg, init, subscriptions, update, view)
 import Element exposing (Element)
 import Widget
 import Widget.Style exposing (TabStyle)
-
+import Widget.Style.Material as Material
+import Browser
 
 type alias Style style msg =
     { style
         | tab : TabStyle msg
     }
 
+materialStyle : Style {} msg
+materialStyle =
+    { tab = Material.tab Material.defaultPalette
+    }
 
 type Model
     = Selected (Maybe Int)
@@ -72,3 +77,12 @@ view msgMapper style (Selected selected) =
                 )
                     |> Element.text
         }
+
+main : Program () Model Msg
+main =
+    Browser.element
+        { init = always init
+        , view = view identity materialStyle >> Element.layout []
+        , update = update
+        , subscriptions = subscriptions
+        }
\ No newline at end of file
diff --git a/example/src/Example/TextInput.elm b/example/src/Example/TextInput.elm
index ee719c9..786fed9 100644
--- a/example/src/Example/TextInput.elm
+++ b/example/src/Example/TextInput.elm
@@ -4,7 +4,8 @@ import Element exposing (Element)
 import Set exposing (Set)
 import Widget
 import Widget.Style exposing (ColumnStyle, TextInputStyle)
-
+import Widget.Style.Material as Material
+import Browser
 
 type alias Style style msg =
     { style
@@ -12,6 +13,12 @@ type alias Style style msg =
         , column : ColumnStyle msg
     }
 
+materialStyle : Style {} msg
+materialStyle =
+    { textInput = Material.textInput Material.defaultPalette
+    , column = Material.column
+    }
+
 
 type alias Model =
     { chipTextInput : Set String
@@ -102,3 +109,12 @@ view msgMapper style model =
         |> Element.wrappedRow [ Element.spacing 10 ]
     ]
         |> Widget.column style.column
+
+main : Program () Model Msg
+main =
+    Browser.element
+        { init = always init
+        , view = view identity materialStyle >> Element.layout []
+        , update = update
+        , subscriptions = subscriptions
+        }
\ No newline at end of file
diff --git a/example/src/Main.elm b/example/src/Main.elm
index eeb7e3f..6db0904 100644
--- a/example/src/Main.elm
+++ b/example/src/Main.elm
@@ -28,7 +28,7 @@ import FeatherIcons
 
 type alias LoadedModel =
     { stateless : Stateless.Model
-    , scrollingNav : ScrollingNav.Model Example
+    , scrollingNav : ScrollingNav.ScrollingNav Example
     , layout : Layout LoadedMsg
     , displayDialog : Bool
     , window :
@@ -52,7 +52,7 @@ type Model
 
 type LoadedMsg
     = StatelessSpecific Stateless.Msg
-    | UpdateScrollingNav (ScrollingNav.Model Example -> ScrollingNav.Model Example)
+    | UpdateScrollingNav (ScrollingNav.ScrollingNav Example -> ScrollingNav.ScrollingNav Example)
     | TimePassed Int
     | AddSnackbar ( String, Bool )
     | ToggleDialog Bool
diff --git a/src/Widget.elm b/src/Widget.elm
index 86ddaad..374c0e6 100644
--- a/src/Widget.elm
+++ b/src/Widget.elm
@@ -4,51 +4,94 @@ module Widget exposing
     , Dialog, modal, dialog
     , ExpansionPanel, expansionPanel
     , row, column, buttonRow, buttonColumn
-    , ColumnType, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
-    , TextInputStyle, textInput
+    , SortTable,Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
+    , TextInput, textInput
     , Tab, tab
     )
 
-{-| This module contains functions for displaying data.
+{-| This module contains different stateless view functions. No wiring required.
 
+These widgets should be used by defining the styling seperately:
+
+```
+Widget.button Material.primaryButton
+    { text = "disable me"
+    , icon =
+        FeatherIcons.slash
+            |> FeatherIcons.withSize 16
+            |> FeatherIcons.toHtml []
+            |> Element.html
+            |> Element.el []
+    , onPress =
+        if isButtonEnabled then
+            ChangedButtonStatus False
+                |> Just
+
+        else
+            Nothing
+    }
+```
+
+Every widgets comes with a type. You can think of the widgets as building blocks.
+You can create you own widgets by sticking widgets types together.
 
 # Buttons
 
+![Button](https://orasund.github.io/elm-ui-widgets/assets/button.png)
+
 @docs Button, TextButton, iconButton, textButton, button
 
 
 # Select
 
-@docs Select, MultiSelect, selectButton, select, multiSelect
+![Select](https://orasund.github.io/elm-ui-widgets/assets/select.png)
+
+@docs Select, selectButton, select
+
+![multiSelect](https://orasund.github.io/elm-ui-widgets/assets/multiSelect.png)
+
+@docs MultiSelect, multiSelect
 
 
 # Dialog
 
+![dialog](https://orasund.github.io/elm-ui-widgets/assets/dialog.png)
+
 @docs Dialog, modal, dialog
 
 
 # Expansion Panel
 
+![expansionPanel](https://orasund.github.io/elm-ui-widgets/assets/expansionPanel.png)
+
 @docs ExpansionPanel, expansionPanel
 
 
 # List
 
+![list](https://orasund.github.io/elm-ui-widgets/assets/list.png)
+
 @docs row, column, buttonRow, buttonColumn
 
 
 # Sort Table
 
-@docs ColumnType, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
+![sortTable](https://orasund.github.io/elm-ui-widgets/assets/sortTable.png)
+
+@docs SortTable,Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
 
 
 # Text Input
 
-@docs TextInputStyle, textInput
+![textInput](https://orasund.github.io/elm-ui-widgets/assets/textInput.png)
+
+@docs TextInput, textInput
 
 
 # Tab
 
+![tab](https://orasund.github.io/elm-ui-widgets/assets/textInput.png)
+
 @docs Tab, tab
 
 -}
@@ -64,7 +107,7 @@ import Internal.SortTable as SortTable
 import Internal.Tab as Tab
 import Internal.TextInput as TextInput
 import Set exposing (Set)
-import Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, RowStyle, SortTableStyle, TabStyle)
+import Widget.Style exposing (ButtonStyle,TextInputStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, RowStyle, SortTableStyle, TabStyle)
 
 
 
@@ -73,7 +116,7 @@ import Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPa
 ----------------------------------------------------------}
 
 
-{-| A Button as a type
+{-| Button widget type
 -}
 type alias Button msg =
     { text : String
@@ -82,7 +125,7 @@ type alias Button msg =
     }
 
 
-{-| A Button with just text as a type
+{-| Button widget type with no icon
 -}
 type alias TextButton msg =
     { text : String
@@ -141,9 +184,11 @@ button =
 ----------------------------------------------------------}
 
 
-{-| A list of options with at most one selected.
+{-| Select widget type
 
-Alternaitve Name: Choice
+Technical Remark:
+
+* A more suitable name would be "Choice"
 
 -}
 type alias Select msg =
@@ -157,9 +202,11 @@ type alias Select msg =
     }
 
 
-{-| A list of options with multiple selected.
+{-| Multi Select widget type
 
-Alternative Name: Options
+Technical Remark:
+
+* A more suitable name would be "Options"
 
 -}
 type alias MultiSelect msg =
@@ -207,7 +254,7 @@ multiSelect =
 ----------------------------------------------------------}
 
 
-{-| A Dialog window displaying an important choice.
+{-| Dialog widget type
 -}
 type alias Dialog msg =
     { title : Maybe String
@@ -219,7 +266,9 @@ type alias Dialog msg =
 
 {-| A modal.
 
-NOTE: to stop the screen from scrolling, set the height of the layout to the height of the screen.
+Technical Remark:
+
+* To stop the screen from scrolling, set the height of the layout to the height of the screen.
 
 -}
 modal : { onDismiss : Maybe msg, content : Element msg } -> List (Attribute msg)
@@ -244,10 +293,11 @@ dialog =
 
 
 {----------------------------------------------------------
-- DIALOG
+- EXPANSION PANEL
 ----------------------------------------------------------}
 
-
+{-| Expansion Panel widget type
+-}
 type alias ExpansionPanel msg =
     { onToggle : Bool -> msg
     , icon : Element Never
@@ -258,7 +308,8 @@ type alias ExpansionPanel msg =
     , isExpanded : Bool
     }
 
-
+{-| An expansion Panel
+-}
 expansionPanel :
     ExpansionPanelStyle msg
     ->
@@ -278,17 +329,17 @@ expansionPanel =
 - TEXT INPUT
 ----------------------------------------------------------}
 
-
-{-| -}
-type alias TextInputStyle msg =
-    { chipButton : ButtonStyle msg
-    , containerRow : List (Attribute msg)
-    , chipsRow : List (Attribute msg)
-    , input : List (Attribute msg)
+{-| Text Input widget type
+-}
+type alias TextInput msg =
+    { chips : List (Button msg)
+    , text : String
+    , placeholder : Maybe (Placeholder msg)
+    , label : String
+    , onChange : String -> msg
     }
 
-
-{-| -}
+{-| A text Input that allows to include chips. -}
 textInput :
     TextInputStyle msg
     ->
@@ -308,17 +359,20 @@ textInput =
 - LIST
 ----------------------------------------------------------}
 
-
+{-| Replacement of `Element.row`
+-}
 row : RowStyle msg -> List (Element msg) -> Element msg
 row =
     List.row
 
-
+{-| Replacement of `Element.column`
+-}
 column : ColumnStyle msg -> List (Element msg) -> Element msg
 column =
     List.column
 
-
+{-| A row of buttons
+-}
 buttonRow :
     { list : RowStyle msg
     , button : ButtonStyle msg
@@ -328,7 +382,8 @@ buttonRow :
 buttonRow =
     List.buttonRow
 
-
+{-| A column of buttons
+-}
 buttonColumn :
     { list : ColumnStyle msg
     , button : ButtonStyle msg
@@ -345,16 +400,23 @@ buttonColumn =
 ----------------------------------------------------------}
 
 
-{-| A Sortable list allows you to sort coulmn.
+{-| Column for the Sort Table widget type
 -}
-type alias ColumnType a =
-    SortTable.ColumnType a
-
-
 type alias Column a =
     SortTable.Column a
 
+{-|  Sort Table widget type
+-}
+type alias SortTable a msg=
+    { content : List a
+    , columns : List (Column a)
+    , sortBy : String
+    , asc : Bool
+    , onChange : String -> msg
+    }
 
+{-| An unsortable Column, when trying to sort by this column, nothing will change.
+-}
 unsortableColumn :
     { title : String
     , toString : a -> String
@@ -425,7 +487,8 @@ sortTable =
 - TAB
 ----------------------------------------------------------}
 
-
+{-| Tab widget type
+-}
 type alias Tab msg =
     { tabs : Select msg
     , content : Maybe Int -> Element msg
diff --git a/src/Widget/Layout.elm b/src/Widget/Layout.elm
index 230bc15..2675447 100644
--- a/src/Widget/Layout.elm
+++ b/src/Widget/Layout.elm
@@ -1,5 +1,26 @@
 module Widget.Layout exposing (Layout, Part(..), activate, init, queueMessage, timePassed, view)
 
+{-| Combines multiple concepts from the [material design specification](https://material.io/components/), namely:
+
+* Top App Bar
+* Navigation Draw
+* Side Panel
+* Dialog
+* Snackbar
+
+It is responsive and changes view to apply to the [material design guidelines](https://material.io/components/app-bars-top).
+
+# Basics
+
+@docs Layout, Part, init, timePassed, view
+
+# Actions
+
+@docs activate, queueMessage
+
+
+-}
+
 import Array
 import Element exposing (Attribute, DeviceClass(..), Element)
 import Element.Input as Input
@@ -8,40 +29,47 @@ import Widget exposing (Button, Select)
 import Widget.Snackbar as Snackbar exposing (Message)
 import Widget.Style exposing (LayoutStyle)
 
-
+{-| The currently visible part: either the left sheet, right sheet or the search bar
+-}
 type Part
     = LeftSheet
     | RightSheet
     | Search
 
-
+{-| The model of the layout containing the snackbar and the currently active side sheet (or search bar)
+-}
 type alias Layout msg =
-    { snackbar : Snackbar.Model (Message msg)
+    { snackbar : Snackbar.Snackbar (Message msg)
     , active : Maybe Part
     }
 
-
+{-| The initial state of the layout
+-}
 init : Layout msg
 init =
     { snackbar = Snackbar.init
     , active = Nothing
     }
 
-
+{-| Queues a message and displayes it as a snackbar once no other snackbar is visible.
+-}
 queueMessage : Message msg -> Layout msg -> Layout msg
 queueMessage message layout =
     { layout
         | snackbar = layout.snackbar |> Snackbar.insert message
     }
 
-
+{-| Open either a side sheet or the search bar.
+-}
 activate : Maybe Part -> Layout msg -> Layout msg
 activate part layout =
     { layout
         | active = part
     }
 
-
+{-| Update the model, put this function into your subscription.
+The first argument is the seconds that have passed sice the function was called last.
+-}
 timePassed : Int -> Layout msg -> Layout msg
 timePassed sec layout =
     case layout.active of
@@ -56,7 +84,8 @@ timePassed sec layout =
                 | snackbar = layout.snackbar |> Snackbar.timePassed sec
             }
 
-
+{-| View the layout. Replacement of `Element.layout`.
+-}
 view :
     LayoutStyle msg
     ->
diff --git a/src/Widget/ScrollingNav.elm b/src/Widget/ScrollingNav.elm
index 4cd7420..83675c0 100644
--- a/src/Widget/ScrollingNav.elm
+++ b/src/Widget/ScrollingNav.elm
@@ -1,5 +1,5 @@
 module Widget.ScrollingNav exposing
-    ( Model, init, view, current, toSelect
+    ( ScrollingNav, init, view, current, toSelect
     , jumpTo, jumpToWithOffset, syncPositions, getPos, setPos
     )
 
@@ -9,7 +9,7 @@ the page. Clicking on a navigation button will scroll directly to that section.
 
 # Basics
 
-@docs Model, init, view, current, toSelect
+@docs ScrollingNav, init, view, current, toSelect
 
 
 # Operations
@@ -27,7 +27,7 @@ import Widget exposing (Select)
 
 
 {-| -}
-type alias Model section =
+type alias ScrollingNav section =
     { toString : section -> String
     , fromString : String -> Maybe section
     , positions : IntDict String
@@ -42,9 +42,9 @@ init :
     { toString : section -> String
     , fromString : String -> Maybe section
     , arrangement : List section
-    , toMsg : Result Dom.Error (Model section -> Model section) -> msg
+    , toMsg : Result Dom.Error (ScrollingNav section -> ScrollingNav section) -> msg
     }
-    -> ( Model section, Cmd msg )
+    -> ( ScrollingNav section, Cmd msg )
 init { toString, fromString, arrangement, toMsg } =
     { toString = toString
     , fromString = fromString
@@ -62,7 +62,7 @@ init { toString, fromString, arrangement, toMsg } =
 
 {-| Syncs the position of of the viewport
 -}
-getPos : Task x (Model selection -> Model selection)
+getPos : Task x (ScrollingNav selection -> ScrollingNav selection)
 getPos =
     Dom.getViewport
         |> Task.map
@@ -75,7 +75,7 @@ getPos =
 
 {-| sets the position of the viewport to show a specific section
 -}
-setPos : Int -> Model section -> Model section
+setPos : Int -> ScrollingNav section -> ScrollingNav section
 setPos pos model =
     { model | scrollPos = pos }
 
@@ -86,7 +86,7 @@ jumpTo :
     { section : section
     , onChange : Result Dom.Error () -> msg
     }
-    -> Model section
+    -> ScrollingNav section
     -> Cmd msg
 jumpTo { section, onChange } { toString } =
     Dom.getElement (section |> toString)
@@ -104,7 +104,7 @@ jumpToWithOffset :
     , section : section
     , onChange : Result Dom.Error () -> msg
     }
-    -> Model section
+    -> ScrollingNav section
     -> Cmd msg
 jumpToWithOffset { offset, section, onChange } { toString } =
     Dom.getElement (section |> toString)
@@ -118,7 +118,7 @@ jumpToWithOffset { offset, section, onChange } { toString } =
 {-| Updates the positions of all sections.
 This functions should be called regularly if the height of elements on your page can change during time.
 -}
-syncPositions : Model section -> Task Dom.Error (Model section -> Model section)
+syncPositions : ScrollingNav section -> Task Dom.Error (ScrollingNav section -> ScrollingNav section)
 syncPositions { toString, arrangement } =
     arrangement
         |> List.map
@@ -150,7 +150,7 @@ syncPositions { toString, arrangement } =
 
 {-| Returns the current section
 -}
-current : (String -> Maybe section) -> Model section -> Maybe section
+current : (String -> Maybe section) -> ScrollingNav section -> Maybe section
 current fromString { positions, scrollPos } =
     positions
         |> IntDict.before (scrollPos + 1)
@@ -162,7 +162,7 @@ current fromString { positions, scrollPos } =
 
 {-| Returns a select widget containing all section, with the current section selected.
 -}
-toSelect : (Int -> Maybe msg) -> Model section -> Select msg
+toSelect : (Int -> Maybe msg) -> ScrollingNav section -> Select msg
 toSelect onSelect ({ arrangement, toString, fromString } as model) =
     { selected =
         arrangement
@@ -217,7 +217,7 @@ view asElement { toString, arrangement } =
 -}
 view :
     (section -> Element msg)
-    -> Model section
+    -> ScrollingNav section
     -> List (Element msg)
 view asElement { toString, arrangement } =
     arrangement
diff --git a/src/Widget/Snackbar.elm b/src/Widget/Snackbar.elm
index b93c69c..e84c77d 100644
--- a/src/Widget/Snackbar.elm
+++ b/src/Widget/Snackbar.elm
@@ -1,14 +1,16 @@
 module Widget.Snackbar exposing
-    ( Model, Message, init, current, timePassed, view
+    ( Snackbar, Message, init, current, timePassed, view
     , insert, insertFor, dismiss
     )
 
-{-| A [snackbar](https://material.io/components/snackbars/) shows notification, one at a time.
+{-| ![Snackbar](https://orasund.github.io/elm-ui-widgets/assets/snackbar.png)
+
+A [snackbar](https://material.io/components/snackbars/) shows notification, one at a time.
 
 
 # Basics
 
-@docs Model, Message, init, current, timePassed, view
+@docs Snackbar, Message, init, current, timePassed, view
 
 
 # Operations
@@ -22,7 +24,8 @@ import Queue exposing (Queue)
 import Widget exposing (TextButton)
 import Widget.Style exposing (SnackbarStyle)
 
-
+{-| A message with maybe some action button
+-}
 type alias Message msg =
     { text : String
     , button : Maybe (TextButton msg)
@@ -31,7 +34,7 @@ type alias Message msg =
 
 {-| A snackbar has a queue of Notifications, each with the amount of ms the message should be displayed
 -}
-type alias Model a =
+type alias Snackbar a =
     { queue : Queue ( a, Int )
     , current : Maybe ( a, Int )
     }
@@ -39,7 +42,7 @@ type alias Model a =
 
 {-| Inital state
 -}
-init : Model a
+init : Snackbar a
 init =
     { queue = Queue.empty
     , current = Nothing
@@ -48,14 +51,14 @@ init =
 
 {-| Insert a message that will last for 10 seconds.
 -}
-insert : a -> Model a -> Model a
+insert : a -> Snackbar a -> Snackbar a
 insert =
     insertFor 10000
 
 
 {-| Insert a message for a specific amount of milli seconds.
 -}
-insertFor : Int -> a -> Model a -> Model a
+insertFor : Int -> a -> Snackbar a -> Snackbar a
 insertFor removeIn a model =
     case model.current of
         Nothing ->
@@ -67,7 +70,7 @@ insertFor removeIn a model =
 
 {-| Dismiss the current message.
 -}
-dismiss : Model a -> Model a
+dismiss : Snackbar a -> Snackbar a
 dismiss model =
     { model | current = Nothing }
 
@@ -75,7 +78,7 @@ dismiss model =
 {-| Updates the model. This functions should be called regularly.
 The first argument is the milli seconds that passed since the last time the function was called.
 -}
-timePassed : Int -> Model a -> Model a
+timePassed : Int -> Snackbar a -> Snackbar a
 timePassed ms model =
     case model.current of
         Nothing ->
@@ -98,7 +101,7 @@ timePassed ms model =
 
 {-| Returns the current element.
 -}
-current : Model a -> Maybe a
+current : Snackbar a -> Maybe a
 current model =
     model.current |> Maybe.map Tuple.first
 
@@ -108,7 +111,7 @@ current model =
 view :
     SnackbarStyle msg
     -> (a -> Message msg)
-    -> Model a
+    -> Snackbar a
     -> Maybe (Element msg)
 view style toMessage model =
     model
diff --git a/src/Widget/Style.elm b/src/Widget/Style.elm
index f1e6347..0ce5cf2 100644
--- a/src/Widget/Style.elm
+++ b/src/Widget/Style.elm
@@ -1,4 +1,4 @@
-module Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, RowStyle, SnackbarStyle, SortTableStyle, TabStyle, TextInputStyle)
+module Widget.Style exposing (ButtonStyle,ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, RowStyle, SnackbarStyle, SortTableStyle, TabStyle, TextInputStyle)
 
 {-| This module contains style types for every widget.
 
diff --git a/src/Widget/Style/Material.elm b/src/Widget/Style/Material.elm
index 300a055..12dcc46 100644
--- a/src/Widget/Style/Material.elm
+++ b/src/Widget/Style/Material.elm
@@ -1,47 +1,135 @@
 module Widget.Style.Material exposing
-    ( Palette, defaultPalette
+    ( Palette, defaultPalette, darkPalette
     , containedButton, outlinedButton, textButton
-    , toggleButton, buttonRow
+    , iconButton, toggleButton, buttonRow
+    , chip, textInput
     , alertDialog
-    , row, column, cardColumn
     , expansionPanel
-    , chip, darkPalette, iconButton, layout, snackbar, tab, tabButton, textInput
+    , row, column
+    , cardColumn
+    , layout, snackbar, tab, tabButton
     )
 
-{-|
+{-| ![Example using the Material Design style](https://orasund.github.io/elm-ui-widgets/assets/material-style.png)
+
+This module implements a Material design theme for all widgets.
+
+The stylings are following [the official Material Design guidelines](https://material.io/components) as close as possible.
+Please use these widgets in combination with the official guidelines.
+
+The typograpahy is taken from [the material design guidelines](https://material.io/design/typography/the-type-system.html#type-scale).
+Its recommended to use a font size of 16px width and the [Roboto Font](https://fonts.google.com/specimen/Roboto?query=Ro).
+
+The style are not opaque, so you can change every styling to your needs.
+
+If you have any suggestions or improvements, be sure to leave a PR or a Issue over at the github repos.
+
+You can use the theme by copying the following code:
+
+```
+type alias Style msg =
+    { dialog : DialogStyle msg
+    , expansionPanel : ExpansionPanelStyle msg
+    , button : ButtonStyle msg
+    , primaryButton : ButtonStyle msg
+    , tab : TabStyle msg
+    , textInput : TextInputStyle msg
+    , chipButton : ButtonStyle msg
+    , row : RowStyle msg
+    , buttonRow : RowStyle msg
+    , column : ColumnStyle msg
+    , cardColumn : ColumnStyle msg
+    , sortTable : SortTableStyle msg
+    , selectButton : ButtonStyle msg
+    , layout : LayoutStyle msg
+    }
+
+sortTable : Palette -> SortTableStyle msg
+sortTable palette =
+    { containerTable = []
+    , headerButton = Material.textButton palette
+    , ascIcon = Icons.chevronUp |> Element.html |> Element.el []
+    , descIcon = Icons.chevronDown |> Element.html |> Element.el []
+    , defaultIcon = Element.none
+    }
 
 
-# Style
-
-@docs style
-
+style : Palette -> Style msg
+style palette =
+    { sortTable = sortTable palette
+    , row = Material.row
+    , buttonRow = Material.buttonRow
+    , cardColumn = Material.cardColumn palette
+    , column = Material.column
+    , button = Material.outlinedButton palette
+    , primaryButton = Material.containedButton palette
+    , selectButton = Material.toggleButton palette
+    , tab = Material.tab palette
+    , textInput = Material.textInput palette
+    , chipButton = Material.chip palette
+    , expansionPanel = Material.expansionPanel palette
+    , dialog = Material.alertDialog palette
+    , layout = Material.layout palette
+    }
+```
 
 # Palette
 
-@docs Palette, defaultPalette
+@docs Palette, defaultPalette, darkPalette
 
 
 # Button
 
+Different styles for buttons have different meanings.
+
+  - Use `textButton` as your default button
+  - Use `containedButton` for any important action
+  - Use `outlinedButton` if you have more then one important action.
+    Use `containedButton` for **the most** important action of the group.
+
 @docs containedButton, outlinedButton, textButton
 
-@docs toggleButton, buttonRow
+@docs iconButton, toggleButton, buttonRow
 
+# Card
+
+In the material design specification the card is not really specified at all.
+Im practice the List seams more useful then a own card widget.
+Thus for now we only provide a card containing a list.
+
+@docs cardColumn
+
+# Chip
+
+@docs chip, textInput
 
 # Dialog
 
 @docs alertDialog
 
 
-# List
-
-@docs row, column, cardColumn
-
-
 # Expansion Panel
 
 @docs expansionPanel
 
+
+# List
+
+The [List widget](https://material.io/components/lists) is a very complex widget that sadly only particially made it into this package.
+
+@docs row, column
+
+# Snackbar
+
+@docs snackbar
+
+# Tab
+
+@docs tab, tabButton
+
+# Layout
+
+@docs layout
 -}
 
 import Color exposing (Color)
@@ -97,6 +185,13 @@ h6 =
 -------------------------------------------------------------------------------}
 
 
+{-| The material design comes with customizable color palettes.
+
+Check out [the official documentation about the color system](https://material.io/design/color/the-color-system.html#color-theme-creation) to see how these colors are used.
+
+For the `-on` colors you can use white, for transitions into white, or black,for transitions into black. Other colors are also possible, but i've not seen any website acutally using a different color.
+
+-}
 type alias Palette =
     { primary : Color --Color.rgb255 0x62 0x00 0xEE
     , secondary : Color --Color.rgb255 0x03 0xda 0xc6
@@ -113,6 +208,13 @@ type alias Palette =
     }
 
 
+{-| The default color theme.
+
+![The default theme](https://lh3.googleusercontent.com/k6WO1fd7T40A9JvSVfHqs0CPLFyTEDCecsVGxEDhOaTP0wUTPYOVVkxt60hKxBprgNoMqs8OyKqtlaQ4tDBtQJs-fTcZrpZEjxhUVQ=w1064-v0)
+
+_Image take from [material.io](https://material.io/design/color/the-color-system.html#color-theme-creation)_
+
+-}
 defaultPalette : Palette
 defaultPalette =
     { primary = Color.rgb255 0x62 0x00 0xEE
@@ -130,6 +232,13 @@ defaultPalette =
     }
 
 
+{-| The offical dark theme of google.
+
+![The dark theme](https://lh3.googleusercontent.com/tv7J2o4ZiSmLYwyBslBs_PLzKyzI8QUV5qdvHGfoAQn9r7pY4Hj5SmW27m3zUWeDtRSE8Cb5_5PQmkbavDfw7XbIL8EodIKZhilRdg=w1064-v0)
+
+_Image take from [material.io](https://material.io/design/color/dark-theme.html#ui-application)_
+
+-}
 darkPalette : Palette
 darkPalette =
     { primary = Color.rgb255 0xBB 0x86 0xFC
@@ -362,6 +471,13 @@ baseButton _ =
     }
 
 
+{-| A contained button representing the most important action of a group.
+
+![Contained Button](https://material.io/develop/images/content/79e62add1830d33fc90edb22212bce53.svg)
+
+_Image taken from [material.io](https://material.io/develop/android/components/buttons/)_
+
+-}
 containedButton : Palette -> ButtonStyle msg
 containedButton palette =
     { container =
@@ -413,6 +529,13 @@ containedButton palette =
     }
 
 
+{-| A outlined button representing an important action within a group.
+
+![Contained Button](https://material.io/develop/images/content/2b50635d38c5fdec260f09be9aeafb10.svg)
+
+_Image taken from [material.io](https://material.io/develop/android/components/buttons/)_
+
+-}
 outlinedButton : Palette -> ButtonStyle msg
 outlinedButton palette =
     { container =
@@ -480,6 +603,13 @@ outlinedButton palette =
     }
 
 
+{-| A text button representing a simple action within a group.
+
+![Text Button](https://material.io/develop/images/content/d3079632c6f54d86f9b7093d541c2ee9.svg)
+
+_Image taken from [material.io](https://material.io/develop/android/components/buttons/)_
+
+-}
 textButton : Palette -> ButtonStyle msg
 textButton palette =
     { container =
@@ -526,9 +656,19 @@ textButton palette =
     }
 
 
-{-| Technical Remark:
+{-| A ToggleButton. Only use as a group in combination with `buttonRow`.
+
+![Toggle Button](https://material.io/develop/images/content/749a1ba8591d02356fa1d6eea2641d96.svg)
+
+_Image taken from [material.io](https://material.io/develop/android/components/buttons/)_
+
+Toggle buttons should only be used with the `iconButton` widget, else use chips instead.
+
+Technical Remark:
 
   - Border color was not defined in the [specification](https://material.io/components/buttons#toggle-button)
+  - There are two different versions, one where the selected color is gray and another where the color is primary.
+    I noticed the gray version was used more often, so i went with that one.
 
 -}
 toggleButton : Palette -> ButtonStyle msg
@@ -615,7 +755,13 @@ toggleButton palette =
     }
 
 
-{-| Technical Remark:
+{-| An single selectable icon.
+
+![Icon Button](https://material.io/develop/images/content/9bc212d8a3ef79bb7ed83a5359651505.png)
+
+_Image taken from [material.io](https://material.io/develop/android/components/buttons/)_
+
+Technical Remark:
 
   - Could not find any specification details
 
@@ -680,9 +826,19 @@ iconButton palette =
 -------------------------------------------------------------------------------}
 
 
-{-| Technical Remark:
+{-| Chips have the same behaviour as buttons but are visually less important.
 
-  - There seams to be a bug, where in the mouseOver effects are now visible.
+In the [official documentation](https://material.io/components/chips#types) chips have different names depending on where they are used:
+
+  - **Input Chips** are used inside a text field. Use `textInput` for this feature.
+  - **Choice Chips** are used for selcting an option.
+    The material design guidelines recommend using `toggleButton` for icons with no text and chips for text with no icons.
+  - **Filter Chips** are used for selecting multiple options. They typically have a done-icon when selected.
+  - **Action chips** are like button. Make sure to include an icon when using action chips.
+
+Technical Remark:
+
+  - There seems to be a bug, where in the mouseOver effects are now visible.
     This might have something to do with .
     This needs to be investigated, but for now i leave it at that.
 
@@ -760,9 +916,14 @@ chip palette =
 -------------------------------------------------------------------------------}
 
 
+{-| A simple styling for a row.
+-}
 row : RowStyle msg
 row =
-    { containerRow = [ Element.spacing 8 ]
+    { containerRow =
+        [ Element.paddingXY 0 8
+        , Element.spacing 8
+        ]
     , element = []
     , ifFirst = []
     , ifLast = []
@@ -770,9 +931,14 @@ row =
     }
 
 
+{-| A simple styling for a column.
+-}
 column : ColumnStyle msg
 column =
-    { containerColumn = [ Element.spacing 8 ]
+    { containerColumn =
+        [ Element.paddingXY 0 8
+        , Element.spacing 8
+        ]
     , element = []
     , ifFirst = []
     , ifLast = []
@@ -780,6 +946,11 @@ column =
     }
 
 
+{-| a Row of buttons.
+
+Only use in combination with `toggleButton`
+
+-}
 buttonRow : RowStyle msg
 buttonRow =
     { containerRow = []
@@ -808,7 +979,9 @@ buttonRow =
     }
 
 
-{-| Technical Remark:
+{-| A List styled like a card.
+
+Technical Remark:
 
 This is a simplification of the [Material Design Card
 ](https://material.io/components/cards) and might get replaced at a later date.
@@ -880,6 +1053,14 @@ cardColumn palette =
 -------------------------------------------------------------------------------}
 
 
+{-| An alert dialog for important decisions. Use a snackbar for less important notification.
+
+![Alert Dialog](https://material.io/develop/images/content/9d61e2d1bd60599344c7fae5e71c9667.png)
+
+_Image taken from [material.io](https://material.io/develop/android/components/buttons/)_
+
+
+-}
 alertDialog : Palette -> DialogStyle msg
 alertDialog palette =
     { containerColumn =
@@ -937,7 +1118,10 @@ expand_more =
     icon "0 0 48 48" 24 [ Svg.path [ Svg.Attributes.d "M33.17 17.17L24 26.34l-9.17-9.17L12 20l12 12 12-12z" ] [] ]
 
 
-{-| Technical Remarks:
+{-| The expansion Panel is an outdated part of the material design specification.
+In modern implementation it gets replaced with a very sophisticated list widget.
+
+Technical Remarks:
 
   - The expansion panel is part of an [older version](https://material.io/archive/guidelines/components/expansion-panels.html) of the Material Design.
     The newer version is part of the List component.
@@ -985,7 +1169,13 @@ expansionPanel palette =
 -------------------------------------------------------------------------------}
 
 
-{-| Technical Remark:
+{-| A typical snackbar
+
+![Snackbar](https://material.io/develop/images/content/f2ec5451582a06af5eb20e3dfb3d27d5.svg)
+
+_Image take from [material.io](https://material.io/develop/android/components/snackbar/)_
+
+Technical Remark:
 
   - The text color of the button was not given in the specification. This implementation
     adujsts the luminance of the color to fit the [w3 accessability standard](https://www.w3.org/TR/WCAG20/#Contrast)
@@ -1033,7 +1223,9 @@ snackbar palette =
 -------------------------------------------------------------------------------}
 
 
-{-| Technical Remark:
+{-| A text input style that is included only to support input chips.
+
+Technical Remark:
 
   - This is just a temporary implementation. It will soon be replaced with the official implementation.
 
@@ -1078,7 +1270,14 @@ textInput palette =
 -- T A B
 -------------------------------------------------------------------------------}
 
+{-| A single Tab button.
 
+Technical Remark:
+
+* The official specification states that the background color should be the surface color,
+   but the pictures and actuall implementations all have no background color.
+   So here the background color is also not set.
+-}
 tabButton : Palette -> ButtonStyle msg
 tabButton palette =
     { container =
@@ -1138,7 +1337,8 @@ tabButton palette =
     }
 
 
-{-| -}
+{-| A Tab bar meant for only the upper most level. Do not use a tab within a tab.
+-}
 tab : Palette -> TabStyle msg
 tab palette =
     { button = tabButton palette
@@ -1292,7 +1492,18 @@ drawerButton palette =
     }
 
 
-{-| Technical Remark:
+{-| The Layout Widget combines the following Material design concepts:
+
+* Top bar
+* Navigation drawer
+* Side Sheet
+* Dialog
+* Snackbar
+
+Future updates might try to seperate them into there own widgets.
+But for now they are only available as an all-in-one solution.
+
+Technical Remark:
 
   - Due to [a bug in Elm-Ui](https://github.com/mdgriffith/elm-ui/issues/47) the menu button still behave wierd.
     I've not found a workaround for it.
diff --git a/src/Widget/Style/Template.elm b/src/Widget/Style/Template.elm
index 49785ef..2149525 100644
--- a/src/Widget/Style/Template.elm
+++ b/src/Widget/Style/Template.elm
@@ -1,6 +1,61 @@
-module Widget.Style.Template exposing (box, button, column, decoration, dialog, expansionPanel, icon, layout, row, snackbar, sortTable, tab, textInput)
+module Widget.Style.Template exposing
+    ( box, decoration, icon
+    , button, column, dialog, expansionPanel, layout, row, snackbar, sortTable, tab, textInput
+    )
+
+{-| ![Example using the Template style](https://orasund.github.io/elm-ui-widgets/assets/template-style.png)
+
+This package contains mockups designed for writing your own style.
+
+Start by copying the following code and then replace the fields one by one.
+
+```
+type alias Style msg =
+    { dialog : DialogStyle msg
+    , expansionPanel : ExpansionPanelStyle msg
+    , button : ButtonStyle msg
+    , primaryButton : ButtonStyle msg
+    , tab : TabStyle msg
+    , textInput : TextInputStyle msg
+    , chipButton : ButtonStyle msg
+    , row : RowStyle msg
+    , buttonRow : RowStyle msg
+    , column : ColumnStyle msg
+    , cardColumn : ColumnStyle msg
+    , sortTable : SortTableStyle msg
+    , selectButton : ButtonStyle msg
+    , layout : LayoutStyle msg
+    }
+
+style : Style msg
+style =
+    { sortTable = Template.sortTable <| "sortTable"
+    , row = Template.row <| "row"
+    , buttonRow = Template.row <| "buttonRow"
+    , cardColumn = Template.column <| "cardRow"
+    , column = Template.column <| "column"
+    , button = Template.button <| "button"
+    , primaryButton = Template.button <| "primaryButton"
+    , tab = Template.tab <| "tab"
+    , textInput = Template.textInput <| "textInput"
+    , chipButton = Template.button <| "chipButton"
+    , expansionPanel = Template.expansionPanel "expansionPanel"
+    , selectButton = Template.button "selectButton"
+    , dialog = Template.dialog "dialog"
+    , layout = Template.layout "layout"
+    }
+```
+
+
+# Base Elements
+
+@docs box, decoration, icon
+
+
+# Mockups
+
+@docs button, column, dialog, expansionPanel, layout, row, snackbar, sortTable, tab, textInput
 
-{-| This package
 -}
 
 import Element exposing (Attribute, Element)
@@ -27,6 +82,8 @@ fontSize =
     10
 
 
+{-| A box representing an element
+-}
 box : String -> List (Attribute msg)
 box string =
     [ Border.width 1
@@ -39,6 +96,8 @@ box string =
     ]
 
 
+{-| An additional attribute representing a state change.
+-}
 decoration : String -> List (Attribute msg)
 decoration string =
     [ Element.below <|
@@ -48,6 +107,8 @@ decoration string =
     ]
 
 
+{-| A circle representing an icon
+-}
 icon : String -> Element msg
 icon string =
     Element.none
@@ -62,6 +123,21 @@ icon string =
             ]
 
 
+{-|
+
+```
+button : String -> ButtonStyle msg
+button string =
+    { container = box <| string ++ ":container"
+    , labelRow = box <| string ++ ":labelRow"
+    , text = box <| string ++ ":text"
+    , ifDisabled = decoration <| string ++ ":ifDisabled"
+    , ifActive = decoration <| string ++ ":ifActive"
+    , otherwise = decoration <| string ++ ":otherwise"
+    }
+```
+
+-}
 button : String -> ButtonStyle msg
 button string =
     { container = box <| string ++ ":container"
@@ -73,6 +149,18 @@ button string =
     }
 
 
+{-|
+
+```
+snackbar : String -> SnackbarStyle msg
+snackbar string =
+    { containerRow = box <| string ++ ":containerRow"
+    , button = button <| string ++ ":button"
+    , text = box <| string ++ ":text"
+    }
+```
+
+-}
 snackbar : String -> SnackbarStyle msg
 snackbar string =
     { containerRow = box <| string ++ ":containerRow"
@@ -81,6 +169,21 @@ snackbar string =
     }
 
 
+{-|
+
+```
+dialog : String -> DialogStyle msg
+dialog string =
+    { containerColumn = box <| string ++ ":containerColumn"
+    , title = box <| string ++ ":title"
+    , text = box <| string ++ ":text"
+    , buttonRow = box <| string ++ ":buttonRow"
+    , acceptButton = button <| string ++ ":acceptButton"
+    , dismissButton = button <| string ++ ":dismissButton"
+    }
+```
+
+-}
 dialog : String -> DialogStyle msg
 dialog string =
     { containerColumn = box <| string ++ ":containerColumn"
@@ -92,6 +195,22 @@ dialog string =
     }
 
 
+{-|
+
+```
+expansionPanel : String -> ExpansionPanelStyle msg
+expansionPanel string =
+    { containerColumn = box <| string ++ ":containerColumn"
+    , panelRow = box <| string ++ ":panelRow"
+    , labelRow = box <| string ++ ":labelRow"
+    , content = box <| string ++ ":content"
+    , expandIcon = icon <| string ++ ":expandIcon"
+    , collapseIcon = icon <| string ++ ":collapseIcon"
+    }
+
+```
+
+-}
 expansionPanel : String -> ExpansionPanelStyle msg
 expansionPanel string =
     { containerColumn = box <| string ++ ":containerColumn"
@@ -103,6 +222,20 @@ expansionPanel string =
     }
 
 
+{-|
+
+```
+textInput : String -> TextInputStyle msg
+textInput string =
+    { chipButton = button <| string ++ ":chipButton"
+    , chipsRow = box <| string ++ ":chipsRow"
+    , containerRow = box <| string ++ ":containerRow"
+    , input = box <| string ++ ":input"
+    }
+
+```
+
+-}
 textInput : String -> TextInputStyle msg
 textInput string =
     { chipButton = button <| string ++ ":chipButton"
@@ -112,6 +245,19 @@ textInput string =
     }
 
 
+{-|
+
+```
+tab : String -> TabStyle msg
+tab string =
+    { button = button <| string ++ ":button"
+    , optionRow = box <| string ++ ":optionRow"
+    , containerColumn = box <| string ++ ":containerColumn"
+    , content = box <| string ++ ":content"
+    }
+```
+
+-}
 tab : String -> TabStyle msg
 tab string =
     { button = button <| string ++ ":button"
@@ -121,26 +267,68 @@ tab string =
     }
 
 
+{-|
+
+```
 row : String -> RowStyle msg
 row string =
     { containerRow = box <| string ++ ":containerRow"
     , element = box <| string ++ ":element"
-    , ifFirst = box <| string ++ ":ifFirst"
-    , ifLast = box <| string ++ ":ifLast"
-    , otherwise = box <| string ++ ":otherwise"
+    , ifFirst = decoration <| string ++ ":ifFirst"
+    , ifLast = decoration <| string ++ ":ifLast"
+    , otherwise = decoration <| string ++ ":otherwise"
+    }
+```
+
+-}
+row : String -> RowStyle msg
+row string =
+    { containerRow = box <| string ++ ":containerRow"
+    , element = box <| string ++ ":element"
+    , ifFirst = decoration <| string ++ ":ifFirst"
+    , ifLast = decoration <| string ++ ":ifLast"
+    , otherwise = decoration <| string ++ ":otherwise"
     }
 
 
+{-|
+
+```
 column : String -> ColumnStyle msg
 column string =
     { containerColumn = box <| string ++ ":containerColumn"
     , element = box <| string ++ ":element"
-    , ifFirst = box <| string ++ ":ifFirst"
-    , ifLast = box <| string ++ ":ifLast"
-    , otherwise = box <| string ++ ":otherwise"
+    , ifFirst = decoration <| string ++ ":ifFirst"
+    , ifLast = decoration <| string ++ ":ifLast"
+    , otherwise = decoration <| string ++ ":otherwise"
+    }
+```
+
+-}
+column : String -> ColumnStyle msg
+column string =
+    { containerColumn = box <| string ++ ":containerColumn"
+    , element = box <| string ++ ":element"
+    , ifFirst = decoration <| string ++ ":ifFirst"
+    , ifLast = decoration <| string ++ ":ifLast"
+    , otherwise = decoration <| string ++ ":otherwise"
     }
 
 
+{-|
+
+```
+sortTable : String -> SortTableStyle msg
+sortTable string =
+    { containerTable = box <| string ++ ":containerTable"
+    , headerButton = button <| string ++ ":headerButton"
+    , ascIcon = icon <| string ++ ":ascIcon"
+    , descIcon = icon <| string ++ ":descIcon"
+    , defaultIcon = icon <| string ++ ":defaultIcon"
+    }
+```
+
+-}
 sortTable : String -> SortTableStyle msg
 sortTable string =
     { containerTable = box <| string ++ ":containerTable"
@@ -151,6 +339,30 @@ sortTable string =
     }
 
 
+{-|
+
+```
+layout : String -> LayoutStyle msg
+layout string =
+    { container = box <| string ++ ":container"
+    , snackbar = snackbar <| string ++ ":snackbar"
+    , layout = Element.layout
+    , header = box <| string ++ ":header"
+    , menuButton = button <| string ++ ":menuButton"
+    , sheetButton = button <| string ++ ":sheetButton"
+    , menuTabButton = button <| string ++ ":menuTabButton"
+    , sheet = box <| string ++ ":sheet"
+    , menuIcon = icon <| string ++ ":menuIcon"
+    , moreVerticalIcon = icon <| string ++ ":moreVerticalIcon"
+    , spacing = 8
+    , title = box <| string ++ ":title"
+    , searchIcon = icon <| string ++ ":searchIcon"
+    , search = box <| string ++ ":search"
+    , searchFill = box <| string ++ ":searchFill"
+    }
+```
+
+-}
 layout : String -> LayoutStyle msg
 layout string =
     { container = box <| string ++ ":container"

From be554442b6509917db03c089563a783a93bd7eb6 Mon Sep 17 00:00:00 2001
From: Unknown 
Date: Mon, 25 May 2020 14:08:50 +0200
Subject: [PATCH 14/14] Updated Homepage with version 2.0

---
 docs/index.html          | 10183 ++++++++++++------
 docs/unstable/index.html | 20657 -------------------------------------
 2 files changed, 6769 insertions(+), 24071 deletions(-)
 delete mode 100644 docs/unstable/index.html

diff --git a/docs/index.html b/docs/index.html
index fefb9a7..e757add 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,7 +2,7 @@
 
 
   
-  Example
+  Main
   
 
 
@@ -5241,26 +5241,23 @@ var $elm$core$Task$perform = F2(
 				A2($elm$core$Task$map, toMessage, task)));
 	});
 var $elm$browser$Browser$element = _Browser_element;
-var $author$project$Example$GotViewport = function (a) {
+var $author$project$Main$GotViewport = function (a) {
 	return {$: 'GotViewport', a: a};
 };
-var $author$project$Example$Loading = {$: 'Loading'};
+var $author$project$Main$Loading = {$: 'Loading'};
 var $elm$browser$Browser$Dom$getViewport = _Browser_withWindow(_Browser_getViewport);
-var $author$project$Example$init = function (_v0) {
+var $author$project$Main$init = function (_v0) {
 	return _Utils_Tuple2(
-		$author$project$Example$Loading,
-		A2($elm$core$Task$perform, $author$project$Example$GotViewport, $elm$browser$Browser$Dom$getViewport));
+		$author$project$Main$Loading,
+		A2($elm$core$Task$perform, $author$project$Main$GotViewport, $elm$browser$Browser$Dom$getViewport));
 };
-var $author$project$Example$LoadedSpecific = function (a) {
+var $author$project$Main$LoadedSpecific = function (a) {
 	return {$: 'LoadedSpecific', a: a};
 };
-var $author$project$Example$Resized = function (a) {
+var $author$project$Main$Resized = function (a) {
 	return {$: 'Resized', a: a};
 };
-var $author$project$Example$ScrollingNavSpecific = function (a) {
-	return {$: 'ScrollingNavSpecific', a: a};
-};
-var $author$project$Example$TimePassed = function (a) {
+var $author$project$Main$TimePassed = function (a) {
 	return {$: 'TimePassed', a: a};
 };
 var $elm$core$Basics$always = F2(
@@ -5901,130 +5898,266 @@ var $elm$browser$Browser$Events$onResize = function (func) {
 				A2($elm$json$Json$Decode$field, 'innerWidth', $elm$json$Json$Decode$int),
 				A2($elm$json$Json$Decode$field, 'innerHeight', $elm$json$Json$Decode$int))));
 };
-var $author$project$Widget$ScrollingNav$TimePassed = {$: 'TimePassed'};
-var $author$project$Widget$ScrollingNav$subscriptions = A2(
-	$elm$time$Time$every,
-	100,
-	$elm$core$Basics$always($author$project$Widget$ScrollingNav$TimePassed));
-var $author$project$Example$subscriptions = function (model) {
+var $author$project$Main$subscriptions = function (_v0) {
 	return A2(
 		$elm$core$Platform$Sub$map,
-		$author$project$Example$LoadedSpecific,
+		$author$project$Main$LoadedSpecific,
 		$elm$core$Platform$Sub$batch(
 			_List_fromArray(
 				[
-					A2($elm$core$Platform$Sub$map, $author$project$Example$ScrollingNavSpecific, $author$project$Widget$ScrollingNav$subscriptions),
 					A2(
 					$elm$time$Time$every,
 					50,
 					$elm$core$Basics$always(
-						$author$project$Example$TimePassed(50))),
+						$author$project$Main$TimePassed(50))),
 					$elm$browser$Browser$Events$onResize(
 					F2(
 						function (h, w) {
-							return $author$project$Example$Resized(
+							return $author$project$Main$Resized(
 								{height: h, width: w});
 						}))
 				])));
 };
-var $author$project$Example$Loaded = function (a) {
+var $author$project$Main$Loaded = function (a) {
 	return {$: 'Loaded', a: a};
 };
-var $author$project$Data$Section$ComponentViews = {$: 'ComponentViews'};
-var $author$project$Data$Section$ReusableViews = {$: 'ReusableViews'};
-var $author$project$Data$Section$StatelessViews = {$: 'StatelessViews'};
-var $author$project$Data$Section$asList = _List_fromArray(
-	[$author$project$Data$Section$StatelessViews, $author$project$Data$Section$ReusableViews, $author$project$Data$Section$ComponentViews]);
-var $mdgriffith$elm_ui$Element$BigDesktop = {$: 'BigDesktop'};
-var $mdgriffith$elm_ui$Element$Desktop = {$: 'Desktop'};
-var $mdgriffith$elm_ui$Element$Landscape = {$: 'Landscape'};
-var $mdgriffith$elm_ui$Element$Phone = {$: 'Phone'};
-var $mdgriffith$elm_ui$Element$Portrait = {$: 'Portrait'};
-var $mdgriffith$elm_ui$Element$Tablet = {$: 'Tablet'};
-var $elm$core$Basics$min = F2(
-	function (x, y) {
-		return (_Utils_cmp(x, y) < 0) ? x : y;
-	});
-var $mdgriffith$elm_ui$Element$classifyDevice = function (window) {
-	return {
-		_class: function () {
-			var shortSide = A2($elm$core$Basics$min, window.width, window.height);
-			var longSide = A2($elm$core$Basics$max, window.width, window.height);
-			return (shortSide < 600) ? $mdgriffith$elm_ui$Element$Phone : ((longSide <= 1200) ? $mdgriffith$elm_ui$Element$Tablet : (((longSide > 1200) && (longSide <= 1920)) ? $mdgriffith$elm_ui$Element$Desktop : $mdgriffith$elm_ui$Element$BigDesktop));
-		}(),
-		orientation: (_Utils_cmp(window.width, window.height) < 0) ? $mdgriffith$elm_ui$Element$Portrait : $mdgriffith$elm_ui$Element$Landscape
-	};
+var $author$project$Main$Idle = {$: 'Idle'};
+var $author$project$Data$Theme$Material = {$: 'Material'};
+var $author$project$Main$StatelessSpecific = function (a) {
+	return {$: 'StatelessSpecific', a: a};
+};
+var $author$project$Main$UpdateScrollingNav = function (a) {
+	return {$: 'UpdateScrollingNav', a: a};
+};
+var $author$project$Data$Example$ButtonExample = {$: 'ButtonExample'};
+var $author$project$Data$Example$DialogExample = {$: 'DialogExample'};
+var $author$project$Data$Example$ExpansionPanelExample = {$: 'ExpansionPanelExample'};
+var $author$project$Data$Example$ListExample = {$: 'ListExample'};
+var $author$project$Data$Example$ModalExample = {$: 'ModalExample'};
+var $author$project$Data$Example$MultiSelectExample = {$: 'MultiSelectExample'};
+var $author$project$Data$Example$SelectExample = {$: 'SelectExample'};
+var $author$project$Data$Example$SortTableExample = {$: 'SortTableExample'};
+var $author$project$Data$Example$TabExample = {$: 'TabExample'};
+var $author$project$Data$Example$TextInputExample = {$: 'TextInputExample'};
+var $elm$core$List$sortBy = _List_sortBy;
+var $author$project$Data$Example$toString = function (example) {
+	switch (example.$) {
+		case 'ButtonExample':
+			return 'Button';
+		case 'SelectExample':
+			return 'Select';
+		case 'MultiSelectExample':
+			return 'Multi Select';
+		case 'ExpansionPanelExample':
+			return 'ExpansionPanel';
+		case 'TabExample':
+			return 'Tab';
+		case 'SortTableExample':
+			return 'SortTable';
+		case 'ModalExample':
+			return 'Modal';
+		case 'DialogExample':
+			return 'Dialog';
+		case 'TextInputExample':
+			return 'TextInput';
+		default:
+			return 'List';
+	}
+};
+var $author$project$Data$Example$asList = A2(
+	$elm$core$List$sortBy,
+	$author$project$Data$Example$toString,
+	_List_fromArray(
+		[$author$project$Data$Example$ButtonExample, $author$project$Data$Example$SelectExample, $author$project$Data$Example$MultiSelectExample, $author$project$Data$Example$ExpansionPanelExample, $author$project$Data$Example$TabExample, $author$project$Data$Example$SortTableExample, $author$project$Data$Example$ModalExample, $author$project$Data$Example$DialogExample, $author$project$Data$Example$TextInputExample, $author$project$Data$Example$ListExample]));
+var $elm$core$Platform$Cmd$batch = _Platform_batch;
+var $turboMaCk$any_set$Set$Any$AnySet = function (a) {
+	return {$: 'AnySet', a: a};
+};
+var $turboMaCk$any_dict$Dict$Any$AnyDict = function (a) {
+	return {$: 'AnyDict', a: a};
+};
+var $turboMaCk$any_dict$Dict$Any$empty = function (toKey) {
+	return $turboMaCk$any_dict$Dict$Any$AnyDict(
+		{dict: $elm$core$Dict$empty, toKey: toKey});
+};
+var $turboMaCk$any_set$Set$Any$empty = A2($elm$core$Basics$composeL, $turboMaCk$any_set$Set$Any$AnySet, $turboMaCk$any_dict$Dict$Any$empty);
+var $author$project$Data$Example$fromString = function (string) {
+	switch (string) {
+		case 'Button':
+			return $elm$core$Maybe$Just($author$project$Data$Example$ButtonExample);
+		case 'Select':
+			return $elm$core$Maybe$Just($author$project$Data$Example$SelectExample);
+		case 'Multi Select':
+			return $elm$core$Maybe$Just($author$project$Data$Example$MultiSelectExample);
+		case 'ExpansionPanel':
+			return $elm$core$Maybe$Just($author$project$Data$Example$ExpansionPanelExample);
+		case 'Tab':
+			return $elm$core$Maybe$Just($author$project$Data$Example$TabExample);
+		case 'SortTable':
+			return $elm$core$Maybe$Just($author$project$Data$Example$SortTableExample);
+		case 'Modal':
+			return $elm$core$Maybe$Just($author$project$Data$Example$ModalExample);
+		case 'Dialog':
+			return $elm$core$Maybe$Just($author$project$Data$Example$DialogExample);
+		case 'TextInput':
+			return $elm$core$Maybe$Just($author$project$Data$Example$TextInputExample);
+		case 'List':
+			return $elm$core$Maybe$Just($author$project$Data$Example$ListExample);
+		default:
+			return $elm$core$Maybe$Nothing;
+	}
+};
+var $author$project$Stateless$ExampleSpecific = function (a) {
+	return {$: 'ExampleSpecific', a: a};
+};
+var $author$project$Data$Example$Button = function (a) {
+	return {$: 'Button', a: a};
+};
+var $author$project$Data$Example$Dialog = function (a) {
+	return {$: 'Dialog', a: a};
+};
+var $author$project$Data$Example$ExpansionPanel = function (a) {
+	return {$: 'ExpansionPanel', a: a};
+};
+var $author$project$Data$Example$List = function (a) {
+	return {$: 'List', a: a};
+};
+var $author$project$Data$Example$Modal = function (a) {
+	return {$: 'Modal', a: a};
+};
+var $author$project$Data$Example$MultiSelect = function (a) {
+	return {$: 'MultiSelect', a: a};
+};
+var $author$project$Data$Example$Select = function (a) {
+	return {$: 'Select', a: a};
+};
+var $author$project$Data$Example$SortTable = function (a) {
+	return {$: 'SortTable', a: a};
+};
+var $author$project$Data$Example$Tab = function (a) {
+	return {$: 'Tab', a: a};
+};
+var $author$project$Data$Example$TextInput = function (a) {
+	return {$: 'TextInput', a: a};
+};
+var $author$project$Example$Button$IsButtonEnabled = function (a) {
+	return {$: 'IsButtonEnabled', a: a};
+};
+var $elm$core$Platform$Cmd$none = $elm$core$Platform$Cmd$batch(_List_Nil);
+var $author$project$Example$Button$init = _Utils_Tuple2(
+	$author$project$Example$Button$IsButtonEnabled(true),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Example$Dialog$IsOpen = function (a) {
+	return {$: 'IsOpen', a: a};
+};
+var $author$project$Example$Dialog$init = _Utils_Tuple2(
+	$author$project$Example$Dialog$IsOpen(true),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Example$ExpansionPanel$IsExpanded = function (a) {
+	return {$: 'IsExpanded', a: a};
+};
+var $author$project$Example$ExpansionPanel$init = _Utils_Tuple2(
+	$author$project$Example$ExpansionPanel$IsExpanded(false),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Example$List$init = _Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none);
+var $author$project$Example$Modal$IsEnabled = function (a) {
+	return {$: 'IsEnabled', a: a};
+};
+var $author$project$Example$Modal$init = _Utils_Tuple2(
+	$author$project$Example$Modal$IsEnabled(true),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Example$MultiSelect$Selected = function (a) {
+	return {$: 'Selected', a: a};
 };
 var $elm$core$Set$Set_elm_builtin = function (a) {
 	return {$: 'Set_elm_builtin', a: a};
 };
 var $elm$core$Set$empty = $elm$core$Set$Set_elm_builtin($elm$core$Dict$empty);
-var $elm$core$Set$insert = F2(
-	function (key, _v0) {
-		var dict = _v0.a;
-		return $elm$core$Set$Set_elm_builtin(
-			A3($elm$core$Dict$insert, key, _Utils_Tuple0, dict));
-	});
-var $elm$core$Set$fromList = function (list) {
-	return A3($elm$core$List$foldl, $elm$core$Set$insert, $elm$core$Set$empty, list);
+var $author$project$Example$MultiSelect$init = _Utils_Tuple2(
+	$author$project$Example$MultiSelect$Selected($elm$core$Set$empty),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Example$Select$Selected = function (a) {
+	return {$: 'Selected', a: a};
 };
-var $author$project$Widget$FilterSelect$init = function (options) {
-	return {options: options, raw: '', selected: $elm$core$Maybe$Nothing};
+var $author$project$Example$Select$init = _Utils_Tuple2(
+	$author$project$Example$Select$Selected($elm$core$Maybe$Nothing),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Example$SortTable$init = _Utils_Tuple2(
+	{asc: true, title: 'Name'},
+	$elm$core$Platform$Cmd$none);
+var $author$project$Example$Tab$Selected = function (a) {
+	return {$: 'Selected', a: a};
 };
-var $author$project$Widget$ValidatedInput$Model = function (a) {
-	return {$: 'Model', a: a};
-};
-var $author$project$Widget$ValidatedInput$init = function (_v0) {
-	var validator = _v0.validator;
-	var toString = _v0.toString;
-	var value = _v0.value;
-	return $author$project$Widget$ValidatedInput$Model(
-		{err: $elm$core$Maybe$Nothing, raw: $elm$core$Maybe$Nothing, toString: toString, validator: validator, value: value});
-};
-var $author$project$Component$init = {
-	filterSelect: $author$project$Widget$FilterSelect$init(
-		$elm$core$Set$fromList(
+var $author$project$Example$Tab$init = _Utils_Tuple2(
+	$author$project$Example$Tab$Selected($elm$core$Maybe$Nothing),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Example$TextInput$init = _Utils_Tuple2(
+	{chipTextInput: $elm$core$Set$empty, textInput: ''},
+	$elm$core$Platform$Cmd$none);
+var $elm$core$Platform$Cmd$map = _Platform_map;
+var $author$project$Data$Example$init = function () {
+	var _v0 = $author$project$Example$TextInput$init;
+	var textInputModel = _v0.a;
+	var textInputMsg = _v0.b;
+	var _v1 = $author$project$Example$Tab$init;
+	var tabModel = _v1.a;
+	var tabMsg = _v1.b;
+	var _v2 = $author$project$Example$SortTable$init;
+	var sortTableModel = _v2.a;
+	var sortTableMsg = _v2.b;
+	var _v3 = $author$project$Example$Select$init;
+	var selectModel = _v3.a;
+	var selectMsg = _v3.b;
+	var _v4 = $author$project$Example$MultiSelect$init;
+	var multiSelectModel = _v4.a;
+	var multiSelectMsg = _v4.b;
+	var _v5 = $author$project$Example$Modal$init;
+	var modalModel = _v5.a;
+	var modalMsg = _v5.b;
+	var _v6 = $author$project$Example$List$init;
+	var listModel = _v6.a;
+	var listMsg = _v6.b;
+	var _v7 = $author$project$Example$ExpansionPanel$init;
+	var expansionPanelModel = _v7.a;
+	var expansionPanelMsg = _v7.b;
+	var _v8 = $author$project$Example$Dialog$init;
+	var dialogModel = _v8.a;
+	var dialogMsg = _v8.b;
+	var _v9 = $author$project$Example$Button$init;
+	var buttonModel = _v9.a;
+	var buttonMsg = _v9.b;
+	return _Utils_Tuple2(
+		{button: buttonModel, dialog: dialogModel, expansionPanel: expansionPanelModel, list: listModel, modal: modalModel, multiSelect: multiSelectModel, select: selectModel, sortTable: sortTableModel, tab: tabModel, textInput: textInputModel},
+		$elm$core$Platform$Cmd$batch(
 			_List_fromArray(
-				['Apple', 'Kiwi', 'Strawberry', 'Pineapple', 'Mango', 'Grapes', 'Watermelon', 'Orange', 'Lemon', 'Blueberry', 'Grapefruit', 'Coconut', 'Cherry', 'Banana']))),
-	validatedInput: $author$project$Widget$ValidatedInput$init(
-		{
-			toString: function (_v0) {
-				var first = _v0.a;
-				var second = _v0.b;
-				return first + (' ' + second);
-			},
-			validator: function (string) {
-				var _v1 = A2($elm$core$String$split, ' ', string);
-				if ((_v1.b && _v1.b.b) && (!_v1.b.b.b)) {
-					var first = _v1.a;
-					var _v2 = _v1.b;
-					var second = _v2.a;
-					return $elm$core$Result$Ok(
-						_Utils_Tuple2(first, second));
-				} else {
-					return $elm$core$Result$Err(_Utils_Tuple0);
-				}
-			},
-			value: _Utils_Tuple2('John', 'Doe')
-		})
-};
+				[
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Button, buttonMsg),
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Select, selectMsg),
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$MultiSelect, multiSelectMsg),
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$ExpansionPanel, expansionPanelMsg),
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Tab, tabMsg),
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$SortTable, sortTableMsg),
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Modal, modalMsg),
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Dialog, dialogMsg),
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$TextInput, textInputMsg),
+					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$List, listMsg)
+				])));
+}();
+var $author$project$Stateless$init = function () {
+	var _v0 = $author$project$Data$Example$init;
+	var example = _v0.a;
+	var cmd = _v0.b;
+	return _Utils_Tuple2(
+		{carousel: 0, example: example},
+		A2($elm$core$Platform$Cmd$map, $author$project$Stateless$ExampleSpecific, cmd));
+}();
 var $turboMaCk$queue$Queue$Queue = F2(
 	function (a, b) {
 		return {$: 'Queue', a: a, b: b};
 	});
 var $turboMaCk$queue$Queue$empty = A2($turboMaCk$queue$Queue$Queue, _List_Nil, _List_Nil);
 var $author$project$Widget$Snackbar$init = {current: $elm$core$Maybe$Nothing, queue: $turboMaCk$queue$Queue$empty};
-var $author$project$Layout$init = {sheet: $elm$core$Maybe$Nothing, snackbar: $author$project$Widget$Snackbar$init};
-var $author$project$Widget$SortTable$sortBy = $elm$core$Basics$identity;
-var $author$project$Reusable$init = $author$project$Widget$SortTable$sortBy(
-	{asc: true, title: 'Name'});
-var $author$project$Stateless$init = {carousel: 0, isCollapsed: false, multiSelected: $elm$core$Set$empty, selected: $elm$core$Maybe$Nothing, tab: 1};
-var $elm_community$intdict$IntDict$Empty = {$: 'Empty'};
-var $elm_community$intdict$IntDict$empty = $elm_community$intdict$IntDict$Empty;
-var $author$project$Widget$ScrollingNav$GotHeaderPos = F2(
-	function (a, b) {
-		return {$: 'GotHeaderPos', a: a, b: b};
-	});
+var $author$project$Widget$Layout$init = {active: $elm$core$Maybe$Nothing, snackbar: $author$project$Widget$Snackbar$init};
 var $elm$core$Task$onError = _Scheduler_onError;
 var $elm$core$Task$attempt = F2(
 	function (resultToMessage, task) {
@@ -6044,84 +6177,262 @@ var $elm$core$Task$attempt = F2(
 							$elm$core$Result$Ok),
 						task))));
 	});
-var $elm$core$Platform$Cmd$batch = _Platform_batch;
+var $elm_community$intdict$IntDict$Empty = {$: 'Empty'};
+var $elm_community$intdict$IntDict$empty = $elm_community$intdict$IntDict$Empty;
+var $elm$browser$Browser$Dom$getElement = _Browser_getElement;
+var $elm_community$intdict$IntDict$Inner = function (a) {
+	return {$: 'Inner', a: a};
+};
+var $elm_community$intdict$IntDict$size = function (dict) {
+	switch (dict.$) {
+		case 'Empty':
+			return 0;
+		case 'Leaf':
+			return 1;
+		default:
+			var i = dict.a;
+			return i.size;
+	}
+};
+var $elm_community$intdict$IntDict$inner = F3(
+	function (p, l, r) {
+		var _v0 = _Utils_Tuple2(l, r);
+		if (_v0.a.$ === 'Empty') {
+			var _v1 = _v0.a;
+			return r;
+		} else {
+			if (_v0.b.$ === 'Empty') {
+				var _v2 = _v0.b;
+				return l;
+			} else {
+				return $elm_community$intdict$IntDict$Inner(
+					{
+						left: l,
+						prefix: p,
+						right: r,
+						size: $elm_community$intdict$IntDict$size(l) + $elm_community$intdict$IntDict$size(r)
+					});
+			}
+		}
+	});
+var $elm$core$Bitwise$and = _Bitwise_and;
 var $elm$core$Basics$composeR = F3(
 	function (f, g, x) {
 		return g(
 			f(x));
 	});
-var $elm$browser$Browser$Dom$getElement = _Browser_getElement;
+var $elm$core$Basics$neq = _Utils_notEqual;
+var $elm$core$Bitwise$complement = _Bitwise_complement;
+var $elm$core$Bitwise$or = _Bitwise_or;
+var $elm$core$Bitwise$shiftRightZfBy = _Bitwise_shiftRightZfBy;
+var $elm_community$intdict$IntDict$highestBitSet = function (n) {
+	var shiftOr = F2(
+		function (i, shift) {
+			return i | (i >>> shift);
+		});
+	var n1 = A2(shiftOr, n, 1);
+	var n2 = A2(shiftOr, n1, 2);
+	var n3 = A2(shiftOr, n2, 4);
+	var n4 = A2(shiftOr, n3, 8);
+	var n5 = A2(shiftOr, n4, 16);
+	return n5 & (~(n5 >>> 1));
+};
+var $elm$core$Basics$negate = function (n) {
+	return -n;
+};
+var $elm_community$intdict$IntDict$signBit = $elm_community$intdict$IntDict$highestBitSet(-1);
+var $elm$core$Bitwise$xor = _Bitwise_xor;
+var $elm_community$intdict$IntDict$isBranchingBitSet = function (p) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$elm$core$Bitwise$xor($elm_community$intdict$IntDict$signBit),
+		A2(
+			$elm$core$Basics$composeR,
+			$elm$core$Bitwise$and(p.branchingBit),
+			$elm$core$Basics$neq(0)));
+};
+var $elm_community$intdict$IntDict$higherBitMask = function (branchingBit) {
+	return branchingBit ^ (~(branchingBit - 1));
+};
+var $elm_community$intdict$IntDict$lcp = F2(
+	function (x, y) {
+		var branchingBit = $elm_community$intdict$IntDict$highestBitSet(x ^ y);
+		var mask = $elm_community$intdict$IntDict$higherBitMask(branchingBit);
+		var prefixBits = x & mask;
+		return {branchingBit: branchingBit, prefixBits: prefixBits};
+	});
+var $elm_community$intdict$IntDict$Leaf = function (a) {
+	return {$: 'Leaf', a: a};
+};
+var $elm_community$intdict$IntDict$leaf = F2(
+	function (k, v) {
+		return $elm_community$intdict$IntDict$Leaf(
+			{key: k, value: v});
+	});
+var $elm_community$intdict$IntDict$prefixMatches = F2(
+	function (p, n) {
+		return _Utils_eq(
+			n & $elm_community$intdict$IntDict$higherBitMask(p.branchingBit),
+			p.prefixBits);
+	});
+var $elm_community$intdict$IntDict$update = F3(
+	function (key, alter, dict) {
+		var join = F2(
+			function (_v2, _v3) {
+				var k1 = _v2.a;
+				var l = _v2.b;
+				var k2 = _v3.a;
+				var r = _v3.b;
+				var prefix = A2($elm_community$intdict$IntDict$lcp, k1, k2);
+				return A2($elm_community$intdict$IntDict$isBranchingBitSet, prefix, k2) ? A3($elm_community$intdict$IntDict$inner, prefix, l, r) : A3($elm_community$intdict$IntDict$inner, prefix, r, l);
+			});
+		var alteredNode = function (mv) {
+			var _v1 = alter(mv);
+			if (_v1.$ === 'Just') {
+				var v = _v1.a;
+				return A2($elm_community$intdict$IntDict$leaf, key, v);
+			} else {
+				return $elm_community$intdict$IntDict$empty;
+			}
+		};
+		switch (dict.$) {
+			case 'Empty':
+				return alteredNode($elm$core$Maybe$Nothing);
+			case 'Leaf':
+				var l = dict.a;
+				return _Utils_eq(l.key, key) ? alteredNode(
+					$elm$core$Maybe$Just(l.value)) : A2(
+					join,
+					_Utils_Tuple2(
+						key,
+						alteredNode($elm$core$Maybe$Nothing)),
+					_Utils_Tuple2(l.key, dict));
+			default:
+				var i = dict.a;
+				return A2($elm_community$intdict$IntDict$prefixMatches, i.prefix, key) ? (A2($elm_community$intdict$IntDict$isBranchingBitSet, i.prefix, key) ? A3(
+					$elm_community$intdict$IntDict$inner,
+					i.prefix,
+					i.left,
+					A3($elm_community$intdict$IntDict$update, key, alter, i.right)) : A3(
+					$elm_community$intdict$IntDict$inner,
+					i.prefix,
+					A3($elm_community$intdict$IntDict$update, key, alter, i.left),
+					i.right)) : A2(
+					join,
+					_Utils_Tuple2(
+						key,
+						alteredNode($elm$core$Maybe$Nothing)),
+					_Utils_Tuple2(i.prefix.prefixBits, dict));
+		}
+	});
+var $elm_community$intdict$IntDict$insert = F3(
+	function (key, value, dict) {
+		return A3(
+			$elm_community$intdict$IntDict$update,
+			key,
+			$elm$core$Basics$always(
+				$elm$core$Maybe$Just(value)),
+			dict);
+	});
 var $elm$core$Basics$round = _Basics_round;
 var $author$project$Widget$ScrollingNav$syncPositions = function (_v0) {
-	var labels = _v0.labels;
+	var toString = _v0.toString;
 	var arrangement = _v0.arrangement;
-	return $elm$core$Platform$Cmd$batch(
-		A2(
-			$elm$core$List$map,
-			function (label) {
-				return A2(
-					$elm$core$Task$attempt,
-					$author$project$Widget$ScrollingNav$GotHeaderPos(label),
-					A2(
+	return A2(
+		$elm$core$Task$map,
+		F2(
+			function (list, m) {
+				return A3(
+					$elm$core$List$foldl,
+					F2(
+						function (_v1, model) {
+							var pos = _v1.a;
+							var label = _v1.b;
+							return _Utils_update(
+								model,
+								{
+									positions: A3(
+										$elm_community$intdict$IntDict$insert,
+										pos,
+										model.toString(label),
+										model.positions)
+								});
+						}),
+					m,
+					list);
+			}),
+		$elm$core$Task$sequence(
+			A2(
+				$elm$core$List$map,
+				function (label) {
+					return A2(
 						$elm$core$Task$map,
-						A2(
-							$elm$core$Basics$composeR,
-							function ($) {
-								return $.element;
-							},
-							A2(
-								$elm$core$Basics$composeR,
-								function ($) {
-									return $.y;
-								},
-								$elm$core$Basics$round)),
+						function (x) {
+							return _Utils_Tuple2(
+								$elm$core$Basics$round(x.element.y),
+								label);
+						},
 						$elm$browser$Browser$Dom$getElement(
-							labels(label))));
-			},
-			arrangement));
+							toString(label)));
+				},
+				arrangement)));
 };
 var $author$project$Widget$ScrollingNav$init = function (_v0) {
-	var labels = _v0.labels;
+	var toString = _v0.toString;
+	var fromString = _v0.fromString;
 	var arrangement = _v0.arrangement;
+	var toMsg = _v0.toMsg;
 	return function (a) {
 		return _Utils_Tuple2(
 			a,
-			$author$project$Widget$ScrollingNav$syncPositions(a));
+			A2(
+				$elm$core$Task$attempt,
+				toMsg,
+				$author$project$Widget$ScrollingNav$syncPositions(a)));
 	}(
-		{arrangement: arrangement, labels: labels, positions: $elm_community$intdict$IntDict$empty, scrollPos: 0});
+		{arrangement: arrangement, fromString: fromString, positions: $elm_community$intdict$IntDict$empty, scrollPos: 0, toString: toString});
 };
-var $elm$core$Platform$Cmd$map = _Platform_map;
-var $author$project$Data$Section$toString = function (section) {
-	switch (section.$) {
-		case 'ComponentViews':
-			return 'Component';
-		case 'ReusableViews':
-			return 'Reusable';
-		default:
-			return 'Stateless';
-	}
-};
-var $author$project$Example$initialModel = function (_v0) {
+var $author$project$Main$initialModel = function (_v0) {
 	var viewport = _v0.viewport;
-	var _v1 = $author$project$Widget$ScrollingNav$init(
-		{arrangement: $author$project$Data$Section$asList, labels: $author$project$Data$Section$toString});
-	var scrollingNav = _v1.a;
-	var cmd = _v1.b;
+	var _v1 = $author$project$Stateless$init;
+	var stateless = _v1.a;
+	var statelessCmd = _v1.b;
+	var _v2 = $author$project$Widget$ScrollingNav$init(
+		{
+			arrangement: $author$project$Data$Example$asList,
+			fromString: $author$project$Data$Example$fromString,
+			toMsg: function (result) {
+				if (result.$ === 'Ok') {
+					var fun = result.a;
+					return $author$project$Main$UpdateScrollingNav(fun);
+				} else {
+					return $author$project$Main$Idle;
+				}
+			},
+			toString: $author$project$Data$Example$toString
+		});
+	var scrollingNav = _v2.a;
+	var cmd = _v2.b;
 	return _Utils_Tuple2(
 		{
-			component: $author$project$Component$init,
-			deviceClass: $mdgriffith$elm_ui$Element$classifyDevice(
-				{
-					height: $elm$core$Basics$round(viewport.height),
-					width: $elm$core$Basics$round(viewport.width)
-				})._class,
 			displayDialog: false,
-			layout: $author$project$Layout$init,
-			reusable: $author$project$Reusable$init,
+			expanded: $turboMaCk$any_set$Set$Any$empty($author$project$Data$Example$toString),
+			layout: $author$project$Widget$Layout$init,
 			scrollingNav: scrollingNav,
-			stateless: $author$project$Stateless$init
+			search: {current: '', raw: '', remaining: 0},
+			stateless: stateless,
+			theme: $author$project$Data$Theme$Material,
+			window: {
+				height: $elm$core$Basics$round(viewport.height),
+				width: $elm$core$Basics$round(viewport.width)
+			}
 		},
-		A2($elm$core$Platform$Cmd$map, $author$project$Example$ScrollingNavSpecific, cmd));
+		$elm$core$Platform$Cmd$batch(
+			_List_fromArray(
+				[
+					cmd,
+					A2($elm$core$Platform$Cmd$map, $author$project$Main$StatelessSpecific, statelessCmd)
+				])));
 };
 var $elm$core$Tuple$mapBoth = F3(
 	function (funcA, funcB, _v0) {
@@ -6131,31 +6442,43 @@ var $elm$core$Tuple$mapBoth = F3(
 			funcA(x),
 			funcB(y));
 	});
-var $elm$core$Platform$Cmd$none = $elm$core$Platform$Cmd$batch(_List_Nil);
-var $author$project$Example$ComponentSpecific = function (a) {
-	return {$: 'ComponentSpecific', a: a};
-};
-var $author$project$Example$StatelessSpecific = function (a) {
-	return {$: 'StatelessSpecific', a: a};
-};
-var $author$project$Widget$ScrollingNav$ChangedViewport = function (a) {
-	return {$: 'ChangedViewport', a: a};
+var $author$project$Main$AddSnackbar = function (a) {
+	return {$: 'AddSnackbar', a: a};
 };
+var $author$project$Widget$Layout$activate = F2(
+	function (part, layout) {
+		return _Utils_update(
+			layout,
+			{active: part});
+	});
+var $author$project$Widget$ScrollingNav$getPos = A2(
+	$elm$core$Task$map,
+	F2(
+		function (_int, model) {
+			return _Utils_update(
+				model,
+				{
+					scrollPos: $elm$core$Basics$round(_int.viewport.y)
+				});
+		}),
+	$elm$browser$Browser$Dom$getViewport);
 var $elm$browser$Browser$Dom$setViewport = _Browser_setViewport;
 var $author$project$Widget$ScrollingNav$jumpTo = F2(
-	function (section, _v0) {
-		var labels = _v0.labels;
+	function (_v0, _v1) {
+		var section = _v0.section;
+		var onChange = _v0.onChange;
+		var toString = _v1.toString;
 		return A2(
 			$elm$core$Task$attempt,
-			$author$project$Widget$ScrollingNav$ChangedViewport,
+			onChange,
 			A2(
 				$elm$core$Task$andThen,
-				function (_v1) {
-					var element = _v1.element;
+				function (_v2) {
+					var element = _v2.element;
 					return A2($elm$browser$Browser$Dom$setViewport, 0, element.y);
 				},
 				$elm$browser$Browser$Dom$getElement(
-					labels(section))));
+					toString(section))));
 	});
 var $elm$browser$Browser$Navigation$load = _Browser_load;
 var $turboMaCk$queue$Queue$queue = F2(
@@ -6200,7 +6523,7 @@ var $author$project$Widget$Snackbar$insertFor = F3(
 		}
 	});
 var $author$project$Widget$Snackbar$insert = $author$project$Widget$Snackbar$insertFor(10000);
-var $author$project$Layout$queueMessage = F2(
+var $author$project$Widget$Layout$queueMessage = F2(
 	function (message, layout) {
 		return _Utils_update(
 			layout,
@@ -6208,12 +6531,6 @@ var $author$project$Layout$queueMessage = F2(
 				snackbar: A2($author$project$Widget$Snackbar$insert, message, layout.snackbar)
 			});
 	});
-var $author$project$Layout$setSidebar = F2(
-	function (direction, layout) {
-		return _Utils_update(
-			layout,
-			{sheet: direction});
-	});
 var $turboMaCk$queue$Queue$dequeue = function (_v0) {
 	var fl = _v0.a;
 	var rl = _v0.b;
@@ -6252,9 +6569,6 @@ var $elm$core$Tuple$mapSecond = F2(
 			x,
 			func(y));
 	});
-var $elm$core$Basics$negate = function (n) {
-	return -n;
-};
 var $author$project$Widget$Snackbar$timePassed = F2(
 	function (ms, model) {
 		var _v0 = model.current;
@@ -6279,118 +6593,51 @@ var $author$project$Widget$Snackbar$timePassed = F2(
 				});
 		}
 	});
-var $author$project$Layout$timePassed = F2(
+var $author$project$Widget$Layout$timePassed = F2(
 	function (sec, layout) {
-		var _v0 = layout.sheet;
-		if (_v0.$ === 'Nothing') {
-			return _Utils_update(
-				layout,
+		var _v0 = layout.active;
+		_v0$2:
+		while (true) {
+			if (_v0.$ === 'Just') {
+				switch (_v0.a.$) {
+					case 'LeftSheet':
+						var _v1 = _v0.a;
+						return layout;
+					case 'RightSheet':
+						var _v2 = _v0.a;
+						return layout;
+					default:
+						break _v0$2;
+				}
+			} else {
+				break _v0$2;
+			}
+		}
+		return _Utils_update(
+			layout,
+			{
+				snackbar: A2($author$project$Widget$Snackbar$timePassed, sec, layout.snackbar)
+			});
+	});
+var $turboMaCk$any_dict$Dict$Any$insert = F3(
+	function (k, v, _v0) {
+		var inner = _v0.a;
+		return $turboMaCk$any_dict$Dict$Any$AnyDict(
+			_Utils_update(
+				inner,
 				{
-					snackbar: A2($author$project$Widget$Snackbar$timePassed, sec, layout.snackbar)
-				});
-		} else {
-			return layout;
-		}
+					dict: A3(
+						$elm$core$Dict$insert,
+						inner.toKey(k),
+						_Utils_Tuple2(k, v),
+						inner.dict)
+				}));
 	});
-var $author$project$Widget$FilterSelect$update = F2(
-	function (msg, model) {
-		if (msg.$ === 'ChangedRaw') {
-			var string = msg.a;
-			return _Utils_update(
-				model,
-				{raw: string});
-		} else {
-			var maybe = msg.a;
-			return function () {
-				if (maybe.$ === 'Just') {
-					var string = maybe.a;
-					return function (m) {
-						return _Utils_update(
-							m,
-							{raw: string});
-					};
-				} else {
-					return $elm$core$Basics$identity;
-				}
-			}()(
-				_Utils_update(
-					model,
-					{selected: maybe}));
-		}
-	});
-var $author$project$Widget$ValidatedInput$update = F2(
-	function (msg, _v0) {
-		var model = _v0.a;
-		switch (msg.$) {
-			case 'StartEditing':
-				return $author$project$Widget$ValidatedInput$Model(
-					_Utils_update(
-						model,
-						{
-							raw: $elm$core$Maybe$Just(
-								model.toString(model.value))
-						}));
-			case 'ChangedRaw':
-				var string = msg.a;
-				return $author$project$Widget$ValidatedInput$Model(
-					_Utils_update(
-						model,
-						{
-							err: $elm$core$Maybe$Nothing,
-							raw: $elm$core$Maybe$Just(string)
-						}));
-			default:
-				var _v2 = model.raw;
-				if (_v2.$ === 'Just') {
-					var string = _v2.a;
-					var _v3 = model.validator(string);
-					if (_v3.$ === 'Ok') {
-						var value = _v3.a;
-						return $author$project$Widget$ValidatedInput$Model(
-							_Utils_update(
-								model,
-								{err: $elm$core$Maybe$Nothing, raw: $elm$core$Maybe$Nothing, value: value}));
-					} else {
-						var err = _v3.a;
-						return $author$project$Widget$ValidatedInput$Model(
-							_Utils_update(
-								model,
-								{
-									err: $elm$core$Maybe$Just(err),
-									raw: $elm$core$Maybe$Nothing
-								}));
-					}
-				} else {
-					return $author$project$Widget$ValidatedInput$Model(model);
-				}
-		}
-	});
-var $author$project$Component$update = F2(
-	function (msg, model) {
-		if (msg.$ === 'FilterSelectSpecific') {
-			var m = msg.a;
-			return _Utils_Tuple2(
-				_Utils_update(
-					model,
-					{
-						filterSelect: A2($author$project$Widget$FilterSelect$update, m, model.filterSelect)
-					}),
-				$elm$core$Platform$Cmd$none);
-		} else {
-			var m = msg.a;
-			return _Utils_Tuple2(
-				_Utils_update(
-					model,
-					{
-						validatedInput: A2($author$project$Widget$ValidatedInput$update, m, model.validatedInput)
-					}),
-				$elm$core$Platform$Cmd$none);
-		}
-	});
-var $author$project$Reusable$update = F2(
-	function (msg, model) {
-		var m = msg.a;
-		return m;
+var $turboMaCk$any_set$Set$Any$insert = F2(
+	function (a, _v0) {
+		var dict = _v0.a;
+		return $turboMaCk$any_set$Set$Any$AnySet(
+			A3($turboMaCk$any_dict$Dict$Any$insert, a, _Utils_Tuple0, dict));
 	});
 var $elm$core$Dict$member = F2(
 	function (key, dict) {
@@ -6401,10 +6648,19 @@ var $elm$core$Dict$member = F2(
 			return false;
 		}
 	});
-var $elm$core$Set$member = F2(
-	function (key, _v0) {
+var $turboMaCk$any_dict$Dict$Any$member = F2(
+	function (k, _v0) {
+		var dict = _v0.a.dict;
+		var toKey = _v0.a.toKey;
+		return A2(
+			$elm$core$Dict$member,
+			toKey(k),
+			dict);
+	});
+var $turboMaCk$any_set$Set$Any$member = F2(
+	function (a, _v0) {
 		var dict = _v0.a;
-		return A2($elm$core$Dict$member, key, dict);
+		return A2($turboMaCk$any_dict$Dict$Any$member, a, dict);
 	});
 var $elm$core$Dict$getMin = function (dict) {
 	getMin:
@@ -6768,289 +7024,429 @@ var $elm$core$Dict$remove = F2(
 			return x;
 		}
 	});
+var $turboMaCk$any_dict$Dict$Any$remove = F2(
+	function (k, _v0) {
+		var inner = _v0.a;
+		return $turboMaCk$any_dict$Dict$Any$AnyDict(
+			_Utils_update(
+				inner,
+				{
+					dict: A2(
+						$elm$core$Dict$remove,
+						inner.toKey(k),
+						inner.dict)
+				}));
+	});
+var $turboMaCk$any_set$Set$Any$remove = F2(
+	function (a, _v0) {
+		var dict = _v0.a;
+		return $turboMaCk$any_set$Set$Any$AnySet(
+			A2($turboMaCk$any_dict$Dict$Any$remove, a, dict));
+	});
+var $turboMaCk$any_set$Set$Any$toggle = F2(
+	function (a, set) {
+		return A2($turboMaCk$any_set$Set$Any$member, a, set) ? A2($turboMaCk$any_set$Set$Any$remove, a, set) : A2($turboMaCk$any_set$Set$Any$insert, a, set);
+	});
+var $elm$core$Platform$Sub$none = $elm$core$Platform$Sub$batch(_List_Nil);
+var $author$project$Example$Button$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$Dialog$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$ExpansionPanel$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$List$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$Modal$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$MultiSelect$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$Select$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$SortTable$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$Tab$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$TextInput$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Example$Button$update = F2(
+	function (msg, _v0) {
+		var bool = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Example$Button$IsButtonEnabled(bool),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Example$Dialog$update = F2(
+	function (msg, _v0) {
+		var bool = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Example$Dialog$IsOpen(bool),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Example$ExpansionPanel$update = F2(
+	function (msg, _v0) {
+		var bool = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Example$ExpansionPanel$IsExpanded(bool),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Example$List$update = F2(
+	function (_v0, _v1) {
+		return _Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none);
+	});
+var $author$project$Example$Modal$update = F2(
+	function (msg, _v0) {
+		var bool = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Example$Modal$IsEnabled(bool),
+			$elm$core$Platform$Cmd$none);
+	});
+var $elm$core$Set$insert = F2(
+	function (key, _v0) {
+		var dict = _v0.a;
+		return $elm$core$Set$Set_elm_builtin(
+			A3($elm$core$Dict$insert, key, _Utils_Tuple0, dict));
+	});
+var $elm$core$Set$member = F2(
+	function (key, _v0) {
+		var dict = _v0.a;
+		return A2($elm$core$Dict$member, key, dict);
+	});
 var $elm$core$Set$remove = F2(
 	function (key, _v0) {
 		var dict = _v0.a;
 		return $elm$core$Set$Set_elm_builtin(
 			A2($elm$core$Dict$remove, key, dict));
 	});
-var $author$project$Stateless$update = F2(
+var $author$project$Example$MultiSelect$update = F2(
+	function (msg, _v0) {
+		var selected = _v0.a;
+		var _int = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Example$MultiSelect$Selected(
+				(A2($elm$core$Set$member, _int, selected) ? $elm$core$Set$remove(_int) : $elm$core$Set$insert(_int))(selected)),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Example$Select$update = F2(
+	function (msg, _v0) {
+		var _int = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Example$Select$Selected(
+				$elm$core$Maybe$Just(_int)),
+			$elm$core$Platform$Cmd$none);
+	});
+var $elm$core$Basics$not = _Basics_not;
+var $author$project$Example$SortTable$update = F2(
 	function (msg, model) {
-		switch (msg.$) {
-			case 'ChangedSelected':
-				var _int = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							selected: $elm$core$Maybe$Just(_int)
-						}),
-					$elm$core$Platform$Cmd$none);
-			case 'ChangedMultiSelected':
-				var _int = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							multiSelected: (A2($elm$core$Set$member, _int, model.multiSelected) ? $elm$core$Set$remove(_int) : $elm$core$Set$insert(_int))(model.multiSelected)
-						}),
-					$elm$core$Platform$Cmd$none);
-			case 'ToggleCollapsable':
-				var bool = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{isCollapsed: bool}),
-					$elm$core$Platform$Cmd$none);
-			case 'SetCarousel':
-				var _int = msg.a;
-				return _Utils_Tuple2(
-					((_int < 0) || (_int > 3)) ? model : _Utils_update(
-						model,
-						{carousel: _int}),
-					$elm$core$Platform$Cmd$none);
-			default:
-				var _int = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{tab: _int}),
-					$elm$core$Platform$Cmd$none);
+		var string = msg.a;
+		return _Utils_Tuple2(
+			{
+				asc: _Utils_eq(model.title, string) ? (!model.asc) : true,
+				title: string
+			},
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Example$Tab$update = F2(
+	function (msg, _v0) {
+		var _int = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Example$Tab$Selected(
+				$elm$core$Maybe$Just(_int)),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Example$TextInput$update = F2(
+	function (msg, model) {
+		if (msg.$ === 'ToggleTextInputChip') {
+			var string = msg.a;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{
+						chipTextInput: (A2($elm$core$Set$member, string, model.chipTextInput) ? $elm$core$Set$remove(string) : $elm$core$Set$insert(string))(model.chipTextInput)
+					}),
+				$elm$core$Platform$Cmd$none);
+		} else {
+			var string = msg.a;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{textInput: string}),
+				$elm$core$Platform$Cmd$none);
 		}
 	});
-var $author$project$Widget$ScrollingNav$SyncPosition = function (a) {
-	return {$: 'SyncPosition', a: a};
-};
-var $elm_community$intdict$IntDict$Inner = function (a) {
-	return {$: 'Inner', a: a};
-};
-var $elm_community$intdict$IntDict$size = function (dict) {
-	switch (dict.$) {
-		case 'Empty':
-			return 0;
-		case 'Leaf':
-			return 1;
-		default:
-			var i = dict.a;
-			return i.size;
+var $author$project$Data$Example$upgradeRecord = {
+	button: {
+		from: function ($) {
+			return $.button;
+		},
+		msgMapper: $author$project$Data$Example$Button,
+		subscriptionsFun: $author$project$Example$Button$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{button: a});
+			}),
+		updateFun: $author$project$Example$Button$update
+	},
+	dialog: {
+		from: function ($) {
+			return $.dialog;
+		},
+		msgMapper: $author$project$Data$Example$Dialog,
+		subscriptionsFun: $author$project$Example$Dialog$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{dialog: a});
+			}),
+		updateFun: $author$project$Example$Dialog$update
+	},
+	expansionPanel: {
+		from: function ($) {
+			return $.expansionPanel;
+		},
+		msgMapper: $author$project$Data$Example$ExpansionPanel,
+		subscriptionsFun: $author$project$Example$ExpansionPanel$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{expansionPanel: a});
+			}),
+		updateFun: $author$project$Example$ExpansionPanel$update
+	},
+	list: {
+		from: function ($) {
+			return $.list;
+		},
+		msgMapper: $author$project$Data$Example$List,
+		subscriptionsFun: $author$project$Example$List$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{list: a});
+			}),
+		updateFun: $author$project$Example$List$update
+	},
+	modal: {
+		from: function ($) {
+			return $.modal;
+		},
+		msgMapper: $author$project$Data$Example$Modal,
+		subscriptionsFun: $author$project$Example$Modal$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{modal: a});
+			}),
+		updateFun: $author$project$Example$Modal$update
+	},
+	multiSelect: {
+		from: function ($) {
+			return $.multiSelect;
+		},
+		msgMapper: $author$project$Data$Example$MultiSelect,
+		subscriptionsFun: $author$project$Example$MultiSelect$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{multiSelect: a});
+			}),
+		updateFun: $author$project$Example$MultiSelect$update
+	},
+	select: {
+		from: function ($) {
+			return $.select;
+		},
+		msgMapper: $author$project$Data$Example$Select,
+		subscriptionsFun: $author$project$Example$Select$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{select: a});
+			}),
+		updateFun: $author$project$Example$Select$update
+	},
+	sortTable: {
+		from: function ($) {
+			return $.sortTable;
+		},
+		msgMapper: $author$project$Data$Example$SortTable,
+		subscriptionsFun: $author$project$Example$SortTable$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{sortTable: a});
+			}),
+		updateFun: $author$project$Example$SortTable$update
+	},
+	tab: {
+		from: function ($) {
+			return $.tab;
+		},
+		msgMapper: $author$project$Data$Example$Tab,
+		subscriptionsFun: $author$project$Example$Tab$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{tab: a});
+			}),
+		updateFun: $author$project$Example$Tab$update
+	},
+	textInput: {
+		from: function ($) {
+			return $.textInput;
+		},
+		msgMapper: $author$project$Data$Example$TextInput,
+		subscriptionsFun: $author$project$Example$TextInput$subscriptions,
+		to: F2(
+			function (model, a) {
+				return _Utils_update(
+					model,
+					{textInput: a});
+			}),
+		updateFun: $author$project$Example$TextInput$update
 	}
 };
-var $elm_community$intdict$IntDict$inner = F3(
-	function (p, l, r) {
-		var _v0 = _Utils_Tuple2(l, r);
-		if (_v0.a.$ === 'Empty') {
-			var _v1 = _v0.a;
-			return r;
-		} else {
-			if (_v0.b.$ === 'Empty') {
-				var _v2 = _v0.b;
-				return l;
-			} else {
-				return $elm_community$intdict$IntDict$Inner(
-					{
-						left: l,
-						prefix: p,
-						right: r,
-						size: $elm_community$intdict$IntDict$size(l) + $elm_community$intdict$IntDict$size(r)
-					});
-			}
-		}
-	});
-var $elm$core$Bitwise$and = _Bitwise_and;
-var $elm$core$Basics$neq = _Utils_notEqual;
-var $elm$core$Bitwise$complement = _Bitwise_complement;
-var $elm$core$Bitwise$or = _Bitwise_or;
-var $elm$core$Bitwise$shiftRightZfBy = _Bitwise_shiftRightZfBy;
-var $elm_community$intdict$IntDict$highestBitSet = function (n) {
-	var shiftOr = F2(
-		function (i, shift) {
-			return i | (i >>> shift);
-		});
-	var n1 = A2(shiftOr, n, 1);
-	var n2 = A2(shiftOr, n1, 2);
-	var n3 = A2(shiftOr, n2, 4);
-	var n4 = A2(shiftOr, n3, 8);
-	var n5 = A2(shiftOr, n4, 16);
-	return n5 & (~(n5 >>> 1));
-};
-var $elm_community$intdict$IntDict$signBit = $elm_community$intdict$IntDict$highestBitSet(-1);
-var $elm$core$Bitwise$xor = _Bitwise_xor;
-var $elm_community$intdict$IntDict$isBranchingBitSet = function (p) {
-	return A2(
-		$elm$core$Basics$composeR,
-		$elm$core$Bitwise$xor($elm_community$intdict$IntDict$signBit),
-		A2(
-			$elm$core$Basics$composeR,
-			$elm$core$Bitwise$and(p.branchingBit),
-			$elm$core$Basics$neq(0)));
-};
-var $elm_community$intdict$IntDict$higherBitMask = function (branchingBit) {
-	return branchingBit ^ (~(branchingBit - 1));
-};
-var $elm_community$intdict$IntDict$lcp = F2(
-	function (x, y) {
-		var branchingBit = $elm_community$intdict$IntDict$highestBitSet(x ^ y);
-		var mask = $elm_community$intdict$IntDict$higherBitMask(branchingBit);
-		var prefixBits = x & mask;
-		return {branchingBit: branchingBit, prefixBits: prefixBits};
-	});
-var $elm_community$intdict$IntDict$Leaf = function (a) {
-	return {$: 'Leaf', a: a};
-};
-var $elm_community$intdict$IntDict$leaf = F2(
-	function (k, v) {
-		return $elm_community$intdict$IntDict$Leaf(
-			{key: k, value: v});
-	});
-var $elm_community$intdict$IntDict$prefixMatches = F2(
-	function (p, n) {
-		return _Utils_eq(
-			n & $elm_community$intdict$IntDict$higherBitMask(p.branchingBit),
-			p.prefixBits);
-	});
-var $elm_community$intdict$IntDict$update = F3(
-	function (key, alter, dict) {
-		var join = F2(
-			function (_v2, _v3) {
-				var k1 = _v2.a;
-				var l = _v2.b;
-				var k2 = _v3.a;
-				var r = _v3.b;
-				var prefix = A2($elm_community$intdict$IntDict$lcp, k1, k2);
-				return A2($elm_community$intdict$IntDict$isBranchingBitSet, prefix, k2) ? A3($elm_community$intdict$IntDict$inner, prefix, l, r) : A3($elm_community$intdict$IntDict$inner, prefix, r, l);
-			});
-		var alteredNode = function (mv) {
-			var _v1 = alter(mv);
-			if (_v1.$ === 'Just') {
-				var v = _v1.a;
-				return A2($elm_community$intdict$IntDict$leaf, key, v);
-			} else {
-				return $elm_community$intdict$IntDict$empty;
-			}
-		};
-		switch (dict.$) {
-			case 'Empty':
-				return alteredNode($elm$core$Maybe$Nothing);
-			case 'Leaf':
-				var l = dict.a;
-				return _Utils_eq(l.key, key) ? alteredNode(
-					$elm$core$Maybe$Just(l.value)) : A2(
-					join,
-					_Utils_Tuple2(
-						key,
-						alteredNode($elm$core$Maybe$Nothing)),
-					_Utils_Tuple2(l.key, dict));
-			default:
-				var i = dict.a;
-				return A2($elm_community$intdict$IntDict$prefixMatches, i.prefix, key) ? (A2($elm_community$intdict$IntDict$isBranchingBitSet, i.prefix, key) ? A3(
-					$elm_community$intdict$IntDict$inner,
-					i.prefix,
-					i.left,
-					A3($elm_community$intdict$IntDict$update, key, alter, i.right)) : A3(
-					$elm_community$intdict$IntDict$inner,
-					i.prefix,
-					A3($elm_community$intdict$IntDict$update, key, alter, i.left),
-					i.right)) : A2(
-					join,
-					_Utils_Tuple2(
-						key,
-						alteredNode($elm$core$Maybe$Nothing)),
-					_Utils_Tuple2(i.prefix.prefixBits, dict));
-		}
-	});
-var $elm_community$intdict$IntDict$insert = F3(
-	function (key, value, dict) {
+var $author$project$Data$Example$updateField = F3(
+	function (getter, msg, model) {
+		var _v0 = getter($author$project$Data$Example$upgradeRecord);
+		var from = _v0.from;
+		var to = _v0.to;
+		var msgMapper = _v0.msgMapper;
+		var updateFun = _v0.updateFun;
 		return A3(
-			$elm_community$intdict$IntDict$update,
-			key,
-			$elm$core$Basics$always(
-				$elm$core$Maybe$Just(value)),
-			dict);
+			$elm$core$Tuple$mapBoth,
+			to(model),
+			$elm$core$Platform$Cmd$map(msgMapper),
+			A2(
+				updateFun,
+				msg,
+				from(model)));
 	});
-var $author$project$Widget$ScrollingNav$update = F2(
+var $author$project$Data$Example$update = F2(
 	function (msg, model) {
-		switch (msg.$) {
-			case 'GotHeaderPos':
-				var label = msg.a;
-				var result = msg.b;
-				return _Utils_Tuple2(
-					function () {
-						if (result.$ === 'Ok') {
-							var pos = result.a;
-							return _Utils_update(
-								model,
-								{
-									positions: A3(
-										$elm_community$intdict$IntDict$insert,
-										pos,
-										model.labels(label),
-										model.positions)
-								});
-						} else {
-							return model;
-						}
-					}(),
-					$elm$core$Platform$Cmd$none);
-			case 'ChangedViewport':
-				return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
-			case 'SyncPosition':
-				var pos = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{scrollPos: pos}),
-					$elm$core$Platform$Cmd$none);
-			case 'TimePassed':
-				return _Utils_Tuple2(
+		return function () {
+			switch (msg.$) {
+				case 'Button':
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.button;
+						},
+						m);
+				case 'Select':
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.select;
+						},
+						m);
+				case 'MultiSelect':
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.multiSelect;
+						},
+						m);
+				case 'ExpansionPanel':
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.expansionPanel;
+						},
+						m);
+				case 'Tab':
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.tab;
+						},
+						m);
+				case 'SortTable':
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.sortTable;
+						},
+						m);
+				case 'Modal':
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.modal;
+						},
+						m);
+				case 'Dialog':
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.dialog;
+						},
+						m);
+				case 'TextInput':
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.textInput;
+						},
+						m);
+				default:
+					var m = msg.a;
+					return A2(
+						$author$project$Data$Example$updateField,
+						function ($) {
+							return $.list;
+						},
+						m);
+			}
+		}()(model);
+	});
+var $author$project$Stateless$update = F2(
+	function (msg, model) {
+		if (msg.$ === 'ExampleSpecific') {
+			var exampleMsg = msg.a;
+			var _v1 = A2($author$project$Data$Example$update, exampleMsg, model.example);
+			var exampleModel = _v1.a;
+			var exampleCmd = _v1.b;
+			return _Utils_Tuple2(
+				_Utils_update(
 					model,
-					A2(
-						$elm$core$Task$perform,
-						$author$project$Widget$ScrollingNav$SyncPosition,
-						A2(
-							$elm$core$Task$map,
-							A2(
-								$elm$core$Basics$composeR,
-								function ($) {
-									return $.viewport;
-								},
-								A2(
-									$elm$core$Basics$composeR,
-									function ($) {
-										return $.y;
-									},
-									$elm$core$Basics$round)),
-							$elm$browser$Browser$Dom$getViewport)));
-			default:
-				var elem = msg.a;
-				return _Utils_Tuple2(
-					model,
-					A2($author$project$Widget$ScrollingNav$jumpTo, elem, model));
+					{example: exampleModel}),
+				A2($elm$core$Platform$Cmd$map, $author$project$Stateless$ExampleSpecific, exampleCmd));
+		} else {
+			return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
 		}
 	});
-var $author$project$Example$updateLoaded = F2(
+var $author$project$Main$updateLoaded = F2(
 	function (msg, model) {
 		switch (msg.$) {
-			case 'ComponentSpecific':
-				var m = msg.a;
-				return A3(
-					$elm$core$Tuple$mapBoth,
-					function (component) {
-						return _Utils_update(
-							model,
-							{component: component});
-					},
-					$elm$core$Platform$Cmd$map($author$project$Example$ComponentSpecific),
-					A2($author$project$Component$update, m, model.component));
-			case 'ReusableSpecific':
-				var m = msg.a;
-				return _Utils_Tuple2(
-					function (reusable) {
-						return _Utils_update(
-							model,
-							{reusable: reusable});
-					}(
-						A2($author$project$Reusable$update, m, model.reusable)),
-					$elm$core$Platform$Cmd$none);
 			case 'StatelessSpecific':
 				var m = msg.a;
 				return A3(
@@ -7060,35 +7456,53 @@ var $author$project$Example$updateLoaded = F2(
 							model,
 							{stateless: stateless});
 					},
-					$elm$core$Platform$Cmd$map($author$project$Example$StatelessSpecific),
+					$elm$core$Platform$Cmd$map($author$project$Main$StatelessSpecific),
 					A2($author$project$Stateless$update, m, model.stateless));
-			case 'ScrollingNavSpecific':
-				var m = msg.a;
-				return A3(
-					$elm$core$Tuple$mapBoth,
-					function (scrollingNav) {
-						return _Utils_update(
-							model,
-							{scrollingNav: scrollingNav});
-					},
-					$elm$core$Platform$Cmd$map($author$project$Example$ScrollingNavSpecific),
-					A2($author$project$Widget$ScrollingNav$update, m, model.scrollingNav));
-			case 'TimePassed':
-				var _int = msg.a;
+			case 'UpdateScrollingNav':
+				var fun = msg.a;
 				return _Utils_Tuple2(
 					_Utils_update(
 						model,
 						{
-							layout: A2($author$project$Layout$timePassed, _int, model.layout)
+							scrollingNav: fun(model.scrollingNav)
 						}),
 					$elm$core$Platform$Cmd$none);
-			case 'AddSnackbar':
-				var string = msg.a;
+			case 'TimePassed':
+				var _int = msg.a;
+				var search = model.search;
 				return _Utils_Tuple2(
 					_Utils_update(
 						model,
 						{
-							layout: A2($author$project$Layout$queueMessage, string, model.layout)
+							layout: A2($author$project$Widget$Layout$timePassed, _int, model.layout),
+							search: (search.remaining > 0) ? ((_Utils_cmp(search.remaining, _int) < 1) ? _Utils_update(
+								search,
+								{current: search.raw, remaining: 0}) : _Utils_update(
+								search,
+								{remaining: search.remaining - _int})) : model.search
+						}),
+					A2($elm$core$Task$perform, $author$project$Main$UpdateScrollingNav, $author$project$Widget$ScrollingNav$getPos));
+			case 'AddSnackbar':
+				var _v1 = msg.a;
+				var string = _v1.a;
+				var bool = _v1.b;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{
+							layout: A2(
+								$author$project$Widget$Layout$queueMessage,
+								{
+									button: bool ? $elm$core$Maybe$Just(
+										{
+											onPress: $elm$core$Maybe$Just(
+												$author$project$Main$AddSnackbar(
+													_Utils_Tuple2('This is another message', false))),
+											text: 'Add'
+										}) : $elm$core$Maybe$Nothing,
+									text: string
+								},
+								model.layout)
 						}),
 					$elm$core$Platform$Cmd$none);
 			case 'ToggleDialog':
@@ -7099,13 +7513,11 @@ var $author$project$Example$updateLoaded = F2(
 						{displayDialog: bool}),
 					$elm$core$Platform$Cmd$none);
 			case 'Resized':
-				var screen = msg.a;
+				var window = msg.a;
 				return _Utils_Tuple2(
 					_Utils_update(
 						model,
-						{
-							deviceClass: $mdgriffith$elm_ui$Element$classifyDevice(screen)._class
-						}),
+						{window: window}),
 					$elm$core$Platform$Cmd$none);
 			case 'ChangedSidebar':
 				var sidebar = msg.a;
@@ -7113,7 +7525,7 @@ var $author$project$Example$updateLoaded = F2(
 					_Utils_update(
 						model,
 						{
-							layout: A2($author$project$Layout$setSidebar, sidebar, model.layout)
+							layout: A2($author$project$Widget$Layout$activate, sidebar, model.layout)
 						}),
 					$elm$core$Platform$Cmd$none);
 			case 'Load':
@@ -7121,17 +7533,50 @@ var $author$project$Example$updateLoaded = F2(
 				return _Utils_Tuple2(
 					model,
 					$elm$browser$Browser$Navigation$load(string));
-			default:
+			case 'JumpTo':
 				var section = msg.a;
 				return _Utils_Tuple2(
 					model,
 					A2(
-						$elm$core$Platform$Cmd$map,
-						$author$project$Example$ScrollingNavSpecific,
-						A2($author$project$Widget$ScrollingNav$jumpTo, section, model.scrollingNav)));
+						$author$project$Widget$ScrollingNav$jumpTo,
+						{
+							onChange: $elm$core$Basics$always($author$project$Main$Idle),
+							section: section
+						},
+						model.scrollingNav));
+			case 'ChangedSearch':
+				var string = msg.a;
+				var search = model.search;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{
+							search: _Utils_update(
+								search,
+								{raw: string, remaining: 300})
+						}),
+					$elm$core$Platform$Cmd$none);
+			case 'SetTheme':
+				var theme = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{theme: theme}),
+					$elm$core$Platform$Cmd$none);
+			case 'ToggledExample':
+				var example = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{
+							expanded: A2($turboMaCk$any_set$Set$Any$toggle, example, model.expanded)
+						}),
+					$elm$core$Platform$Cmd$none);
+			default:
+				return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
 		}
 	});
-var $author$project$Example$update = F2(
+var $author$project$Main$update = F2(
 	function (msg, model) {
 		var _v0 = _Utils_Tuple2(model, msg);
 		_v0$2:
@@ -7142,9 +7587,9 @@ var $author$project$Example$update = F2(
 					var viewport = _v0.b.a;
 					return A3(
 						$elm$core$Tuple$mapBoth,
-						$author$project$Example$Loaded,
-						$elm$core$Platform$Cmd$map($author$project$Example$LoadedSpecific),
-						$author$project$Example$initialModel(viewport));
+						$author$project$Main$Loaded,
+						$elm$core$Platform$Cmd$map($author$project$Main$LoadedSpecific),
+						$author$project$Main$initialModel(viewport));
 				} else {
 					break _v0$2;
 				}
@@ -7154,9 +7599,9 @@ var $author$project$Example$update = F2(
 					var m = _v0.b.a;
 					return A3(
 						$elm$core$Tuple$mapBoth,
-						$author$project$Example$Loaded,
-						$elm$core$Platform$Cmd$map($author$project$Example$LoadedSpecific),
-						A2($author$project$Example$updateLoaded, m, state));
+						$author$project$Main$Loaded,
+						$elm$core$Platform$Cmd$map($author$project$Main$LoadedSpecific),
+						A2($author$project$Main$updateLoaded, m, state));
 				} else {
 					break _v0$2;
 				}
@@ -7164,29 +7609,27 @@ var $author$project$Example$update = F2(
 		}
 		return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
 	});
-var $author$project$Example$AddSnackbar = function (a) {
-	return {$: 'AddSnackbar', a: a};
+var $author$project$Main$ChangedSearch = function (a) {
+	return {$: 'ChangedSearch', a: a};
 };
-var $author$project$Example$ChangedSidebar = function (a) {
+var $author$project$Main$ChangedSidebar = function (a) {
 	return {$: 'ChangedSidebar', a: a};
 };
-var $author$project$Example$JumpTo = function (a) {
+var $author$project$Data$Theme$DarkMaterial = {$: 'DarkMaterial'};
+var $author$project$Data$Theme$ElmUiFramework = {$: 'ElmUiFramework'};
+var $author$project$Main$JumpTo = function (a) {
 	return {$: 'JumpTo', a: a};
 };
-var $author$project$Example$Load = function (a) {
+var $author$project$Main$Load = function (a) {
 	return {$: 'Load', a: a};
 };
-var $author$project$Example$ReusableSpecific = function (a) {
-	return {$: 'ReusableSpecific', a: a};
+var $author$project$Main$SetTheme = function (a) {
+	return {$: 'SetTheme', a: a};
 };
-var $author$project$Example$ToggleDialog = function (a) {
+var $author$project$Data$Theme$Template = {$: 'Template'};
+var $author$project$Main$ToggleDialog = function (a) {
 	return {$: 'ToggleDialog', a: a};
 };
-var $mdgriffith$elm_ui$Internal$Model$AlignX = function (a) {
-	return {$: 'AlignX', a: a};
-};
-var $mdgriffith$elm_ui$Internal$Model$Right = {$: 'Right'};
-var $mdgriffith$elm_ui$Element$alignRight = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$Right);
 var $elm$svg$Svg$Attributes$d = _VirtualDom_attribute('d');
 var $elm$svg$Svg$trustedNode = _VirtualDom_nodeNS('http://www.w3.org/2000/svg');
 var $elm$svg$Svg$path = $elm$svg$Svg$trustedNode('path');
@@ -7235,28 +7678,24 @@ var $author$project$Icons$book = A2(
 				]),
 			_List_Nil)
 		]));
-var $mdgriffith$elm_ui$Internal$Model$Attr = function (a) {
-	return {$: 'Attr', a: a};
+var $mdgriffith$elm_ui$Internal$Model$AlignX = function (a) {
+	return {$: 'AlignX', a: a};
 };
-var $mdgriffith$elm_ui$Internal$Model$Button = {$: 'Button'};
-var $mdgriffith$elm_ui$Internal$Model$Describe = function (a) {
-	return {$: 'Describe', a: a};
+var $mdgriffith$elm_ui$Internal$Model$Right = {$: 'Right'};
+var $mdgriffith$elm_ui$Element$alignRight = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$Right);
+var $mdgriffith$elm_ui$Internal$Model$CenterX = {$: 'CenterX'};
+var $mdgriffith$elm_ui$Element$centerX = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$CenterX);
+var $mdgriffith$elm_ui$Internal$Model$AlignY = function (a) {
+	return {$: 'AlignY', a: a};
 };
+var $mdgriffith$elm_ui$Internal$Model$CenterY = {$: 'CenterY'};
+var $mdgriffith$elm_ui$Element$centerY = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$CenterY);
 var $mdgriffith$elm_ui$Internal$Model$Unkeyed = function (a) {
 	return {$: 'Unkeyed', a: a};
 };
-var $mdgriffith$elm_ui$Internal$Model$AsEl = {$: 'AsEl'};
-var $mdgriffith$elm_ui$Internal$Model$asEl = $mdgriffith$elm_ui$Internal$Model$AsEl;
+var $mdgriffith$elm_ui$Internal$Model$AsColumn = {$: 'AsColumn'};
+var $mdgriffith$elm_ui$Internal$Model$asColumn = $mdgriffith$elm_ui$Internal$Model$AsColumn;
 var $mdgriffith$elm_ui$Internal$Style$classes = {above: 'a', active: 'atv', alignBottom: 'ab', alignCenterX: 'cx', alignCenterY: 'cy', alignContainerBottom: 'acb', alignContainerCenterX: 'accx', alignContainerCenterY: 'accy', alignContainerRight: 'acr', alignLeft: 'al', alignRight: 'ar', alignTop: 'at', alignedHorizontally: 'ah', alignedVertically: 'av', any: 's', behind: 'bh', below: 'b', bold: 'w7', borderDashed: 'bd', borderDotted: 'bdt', borderNone: 'bn', borderSolid: 'bs', capturePointerEvents: 'cpe', clip: 'cp', clipX: 'cpx', clipY: 'cpy', column: 'c', container: 'ctr', contentBottom: 'cb', contentCenterX: 'ccx', contentCenterY: 'ccy', contentLeft: 'cl', contentRight: 'cr', contentTop: 'ct', cursorPointer: 'cptr', cursorText: 'ctxt', focus: 'fcs', focusedWithin: 'focus-within', fullSize: 'fs', grid: 'g', hasBehind: 'hbh', heightContent: 'hc', heightExact: 'he', heightFill: 'hf', heightFillPortion: 'hfp', hover: 'hv', imageContainer: 'ic', inFront: 'fr', inputMultiline: 'iml', inputMultilineFiller: 'imlf', inputMultilineParent: 'imlp', inputMultilineWrapper: 'implw', inputText: 'it', italic: 'i', link: 'lnk', nearby: 'nb', noTextSelection: 'notxt', onLeft: 'ol', onRight: 'or', opaque: 'oq', overflowHidden: 'oh', page: 'pg', paragraph: 'p', passPointerEvents: 'ppe', root: 'ui', row: 'r', scrollbars: 'sb', scrollbarsX: 'sbx', scrollbarsY: 'sby', seButton: 'sbt', single: 'e', sizeByCapital: 'cap', spaceEvenly: 'sev', strike: 'sk', text: 't', textCenter: 'tc', textExtraBold: 'w8', textExtraLight: 'w2', textHeavy: 'w9', textJustify: 'tj', textJustifyAll: 'tja', textLeft: 'tl', textLight: 'w3', textMedium: 'w5', textNormalWeight: 'w4', textRight: 'tr', textSemiBold: 'w6', textThin: 'w1', textUnitalicized: 'tun', transition: 'ts', transparent: 'clr', underline: 'u', widthContent: 'wc', widthExact: 'we', widthFill: 'wf', widthFillPortion: 'wfp', wrapped: 'wrp'};
-var $elm$json$Json$Encode$bool = _Json_wrap;
-var $elm$html$Html$Attributes$boolProperty = F2(
-	function (key, bool) {
-		return A2(
-			_VirtualDom_property,
-			key,
-			$elm$json$Json$Encode$bool(bool));
-	});
-var $elm$html$Html$Attributes$disabled = $elm$html$Html$Attributes$boolProperty('disabled');
 var $mdgriffith$elm_ui$Internal$Model$Generic = {$: 'Generic'};
 var $mdgriffith$elm_ui$Internal$Model$div = $mdgriffith$elm_ui$Internal$Model$Generic;
 var $mdgriffith$elm_ui$Internal$Model$NoNearbyChildren = {$: 'NoNearbyChildren'};
@@ -7356,6 +7795,8 @@ var $mdgriffith$elm_ui$Internal$Model$addKeyedChildren = F3(
 							inFront)));
 		}
 	});
+var $mdgriffith$elm_ui$Internal$Model$AsEl = {$: 'AsEl'};
+var $mdgriffith$elm_ui$Internal$Model$asEl = $mdgriffith$elm_ui$Internal$Model$AsEl;
 var $mdgriffith$elm_ui$Internal$Model$AsParagraph = {$: 'AsParagraph'};
 var $mdgriffith$elm_ui$Internal$Model$asParagraph = $mdgriffith$elm_ui$Internal$Model$AsParagraph;
 var $mdgriffith$elm_ui$Internal$Flag$Flag = function (a) {
@@ -9803,6 +10244,10 @@ var $mdgriffith$elm_ui$Internal$Model$hasSmallCaps = function (typeface) {
 		return false;
 	}
 };
+var $elm$core$Basics$min = F2(
+	function (x, y) {
+		return (_Utils_cmp(x, y) < 0) ? x : y;
+	});
 var $mdgriffith$elm_ui$Internal$Model$renderProps = F3(
 	function (force, _v0, existing) {
 		var key = _v0.a;
@@ -10797,7 +11242,6 @@ var $elm$virtual_dom$VirtualDom$keyedNode = function (tag) {
 	return _VirtualDom_keyedNode(
 		_VirtualDom_noScript(tag));
 };
-var $elm$core$Basics$not = _Basics_not;
 var $elm$html$Html$p = _VirtualDom_node('p');
 var $mdgriffith$elm_ui$Internal$Flag$present = F2(
 	function (myFlag, _v0) {
@@ -12579,27 +13023,113 @@ var $mdgriffith$elm_ui$Internal$Model$element = F4(
 				$mdgriffith$elm_ui$Internal$Model$NoNearbyChildren,
 				$elm$core$List$reverse(attributes)));
 	});
-var $mdgriffith$elm_ui$Internal$Model$NoAttribute = {$: 'NoAttribute'};
-var $mdgriffith$elm_ui$Element$Input$hasFocusStyle = function (attr) {
-	if (((attr.$ === 'StyleClass') && (attr.b.$ === 'PseudoSelector')) && (attr.b.a.$ === 'Focus')) {
-		var _v1 = attr.b;
-		var _v2 = _v1.a;
-		return true;
-	} else {
-		return false;
-	}
+var $mdgriffith$elm_ui$Internal$Model$Height = function (a) {
+	return {$: 'Height', a: a};
+};
+var $mdgriffith$elm_ui$Element$height = $mdgriffith$elm_ui$Internal$Model$Height;
+var $mdgriffith$elm_ui$Internal$Model$Attr = function (a) {
+	return {$: 'Attr', a: a};
 };
 var $mdgriffith$elm_ui$Internal$Model$htmlClass = function (cls) {
 	return $mdgriffith$elm_ui$Internal$Model$Attr(
 		$elm$html$Html$Attributes$class(cls));
 };
-var $mdgriffith$elm_ui$Element$Input$focusDefault = function (attrs) {
-	return A2($elm$core$List$any, $mdgriffith$elm_ui$Element$Input$hasFocusStyle, attrs) ? $mdgriffith$elm_ui$Internal$Model$NoAttribute : $mdgriffith$elm_ui$Internal$Model$htmlClass('focusable');
+var $mdgriffith$elm_ui$Internal$Model$Content = {$: 'Content'};
+var $mdgriffith$elm_ui$Element$shrink = $mdgriffith$elm_ui$Internal$Model$Content;
+var $mdgriffith$elm_ui$Internal$Model$Width = function (a) {
+	return {$: 'Width', a: a};
 };
-var $mdgriffith$elm_ui$Internal$Model$Height = function (a) {
-	return {$: 'Height', a: a};
+var $mdgriffith$elm_ui$Element$width = $mdgriffith$elm_ui$Internal$Model$Width;
+var $mdgriffith$elm_ui$Element$column = F2(
+	function (attrs, children) {
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asColumn,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentTop + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.contentLeft)),
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+						attrs))),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
+	});
+var $mdgriffith$elm_ui$Element$el = F2(
+	function (attrs, child) {
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asEl,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+					attrs)),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+				_List_fromArray(
+					[child])));
+	});
+var $mdgriffith$elm_ui$Internal$Model$Class = F2(
+	function (a, b) {
+		return {$: 'Class', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Internal$Flag$overflow = $mdgriffith$elm_ui$Internal$Flag$flag(20);
+var $mdgriffith$elm_ui$Element$clip = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$overflow, $mdgriffith$elm_ui$Internal$Style$classes.clip);
+var $mdgriffith$elm_ui$Internal$Model$Colored = F3(
+	function (a, b, c) {
+		return {$: 'Colored', a: a, b: b, c: c};
+	});
+var $mdgriffith$elm_ui$Internal$Model$StyleClass = F2(
+	function (a, b) {
+		return {$: 'StyleClass', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Internal$Flag$bgColor = $mdgriffith$elm_ui$Internal$Flag$flag(8);
+var $mdgriffith$elm_ui$Internal$Model$formatColorClass = function (_v0) {
+	var red = _v0.a;
+	var green = _v0.b;
+	var blue = _v0.c;
+	var alpha = _v0.d;
+	return $mdgriffith$elm_ui$Internal$Model$floatClass(red) + ('-' + ($mdgriffith$elm_ui$Internal$Model$floatClass(green) + ('-' + ($mdgriffith$elm_ui$Internal$Model$floatClass(blue) + ('-' + $mdgriffith$elm_ui$Internal$Model$floatClass(alpha))))));
 };
-var $mdgriffith$elm_ui$Element$height = $mdgriffith$elm_ui$Internal$Model$Height;
+var $mdgriffith$elm_ui$Element$Background$color = function (clr) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$bgColor,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$Colored,
+			'bg-' + $mdgriffith$elm_ui$Internal$Model$formatColorClass(clr),
+			'background-color',
+			clr));
+};
+var $mdgriffith$elm_ui$Internal$Model$Fill = function (a) {
+	return {$: 'Fill', a: a};
+};
+var $mdgriffith$elm_ui$Element$fill = $mdgriffith$elm_ui$Internal$Model$Fill(1);
+var $mdgriffith$elm_ui$Internal$Model$InFront = {$: 'InFront'};
+var $mdgriffith$elm_ui$Internal$Model$Nearby = F2(
+	function (a, b) {
+		return {$: 'Nearby', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Internal$Model$NoAttribute = {$: 'NoAttribute'};
+var $mdgriffith$elm_ui$Element$createNearby = F2(
+	function (loc, element) {
+		if (element.$ === 'Empty') {
+			return $mdgriffith$elm_ui$Internal$Model$NoAttribute;
+		} else {
+			return A2($mdgriffith$elm_ui$Internal$Model$Nearby, loc, element);
+		}
+	});
+var $mdgriffith$elm_ui$Element$inFront = function (element) {
+	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$InFront, element);
+};
+var $mdgriffith$elm_ui$Internal$Model$Empty = {$: 'Empty'};
+var $mdgriffith$elm_ui$Element$none = $mdgriffith$elm_ui$Internal$Model$Empty;
 var $elm$virtual_dom$VirtualDom$Normal = function (a) {
 	return {$: 'Normal', a: a};
 };
@@ -12618,6 +13148,135 @@ var $elm$html$Html$Events$onClick = function (msg) {
 		$elm$json$Json$Decode$succeed(msg));
 };
 var $mdgriffith$elm_ui$Element$Events$onClick = A2($elm$core$Basics$composeL, $mdgriffith$elm_ui$Internal$Model$Attr, $elm$html$Html$Events$onClick);
+var $mdgriffith$elm_ui$Internal$Model$Rgba = F4(
+	function (a, b, c, d) {
+		return {$: 'Rgba', a: a, b: b, c: c, d: d};
+	});
+var $mdgriffith$elm_ui$Element$rgba255 = F4(
+	function (red, green, blue, a) {
+		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, red / 255, green / 255, blue / 255, a);
+	});
+var $elm$core$List$singleton = function (value) {
+	return _List_fromArray(
+		[value]);
+};
+var $author$project$Internal$Dialog$modal = function (_v0) {
+	var onDismiss = _v0.onDismiss;
+	var content = _v0.content;
+	return _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$inFront(
+			A2(
+				$mdgriffith$elm_ui$Element$el,
+				_Utils_ap(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+							$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+							$mdgriffith$elm_ui$Element$Background$color(
+							A4($mdgriffith$elm_ui$Element$rgba255, 0, 0, 0, 0.5))
+						]),
+					A2(
+						$elm$core$Maybe$withDefault,
+						_List_Nil,
+						A2(
+							$elm$core$Maybe$map,
+							A2($elm$core$Basics$composeR, $mdgriffith$elm_ui$Element$Events$onClick, $elm$core$List$singleton),
+							onDismiss))),
+				$mdgriffith$elm_ui$Element$none)),
+			$mdgriffith$elm_ui$Element$inFront(content),
+			$mdgriffith$elm_ui$Element$clip
+		]);
+};
+var $mdgriffith$elm_ui$Internal$Model$Describe = function (a) {
+	return {$: 'Describe', a: a};
+};
+var $mdgriffith$elm_ui$Internal$Model$Paragraph = {$: 'Paragraph'};
+var $mdgriffith$elm_ui$Internal$Model$SpacingStyle = F3(
+	function (a, b, c) {
+		return {$: 'SpacingStyle', a: a, b: b, c: c};
+	});
+var $mdgriffith$elm_ui$Internal$Flag$spacing = $mdgriffith$elm_ui$Internal$Flag$flag(3);
+var $mdgriffith$elm_ui$Internal$Model$spacingName = F2(
+	function (x, y) {
+		return 'spacing-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y)));
+	});
+var $mdgriffith$elm_ui$Element$spacing = function (x) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$spacing,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$SpacingStyle,
+			A2($mdgriffith$elm_ui$Internal$Model$spacingName, x, x),
+			x,
+			x));
+};
+var $mdgriffith$elm_ui$Element$paragraph = F2(
+	function (attrs, children) {
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asParagraph,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$Paragraph),
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$spacing(5),
+						attrs))),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
+	});
+var $mdgriffith$elm_ui$Internal$Model$AsRow = {$: 'AsRow'};
+var $mdgriffith$elm_ui$Internal$Model$asRow = $mdgriffith$elm_ui$Internal$Model$AsRow;
+var $mdgriffith$elm_ui$Element$row = F2(
+	function (attrs, children) {
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asRow,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentLeft + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.contentCenterY)),
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+						attrs))),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
+	});
+var $mdgriffith$elm_ui$Internal$Model$Text = function (a) {
+	return {$: 'Text', a: a};
+};
+var $mdgriffith$elm_ui$Element$text = function (content) {
+	return $mdgriffith$elm_ui$Internal$Model$Text(content);
+};
+var $mdgriffith$elm_ui$Internal$Model$Button = {$: 'Button'};
+var $elm$json$Json$Encode$bool = _Json_wrap;
+var $elm$html$Html$Attributes$boolProperty = F2(
+	function (key, bool) {
+		return A2(
+			_VirtualDom_property,
+			key,
+			$elm$json$Json$Encode$bool(bool));
+	});
+var $elm$html$Html$Attributes$disabled = $elm$html$Html$Attributes$boolProperty('disabled');
+var $mdgriffith$elm_ui$Element$Input$hasFocusStyle = function (attr) {
+	if (((attr.$ === 'StyleClass') && (attr.b.$ === 'PseudoSelector')) && (attr.b.a.$ === 'Focus')) {
+		var _v1 = attr.b;
+		var _v2 = _v1.a;
+		return true;
+	} else {
+		return false;
+	}
+};
+var $mdgriffith$elm_ui$Element$Input$focusDefault = function (attrs) {
+	return A2($elm$core$List$any, $mdgriffith$elm_ui$Element$Input$hasFocusStyle, attrs) ? $mdgriffith$elm_ui$Internal$Model$NoAttribute : $mdgriffith$elm_ui$Internal$Model$htmlClass('focusable');
+};
 var $mdgriffith$elm_ui$Element$Input$enter = 'Enter';
 var $elm$json$Json$Decode$andThen = _Json_andThen;
 var $elm$json$Json$Decode$fail = _Json_fail;
@@ -12655,24 +13314,14 @@ var $mdgriffith$elm_ui$Element$Input$onKey = F2(
 var $mdgriffith$elm_ui$Element$Input$onEnter = function (msg) {
 	return A2($mdgriffith$elm_ui$Element$Input$onKey, $mdgriffith$elm_ui$Element$Input$enter, msg);
 };
-var $mdgriffith$elm_ui$Internal$Model$Class = F2(
-	function (a, b) {
-		return {$: 'Class', a: a, b: b};
-	});
 var $mdgriffith$elm_ui$Internal$Flag$cursor = $mdgriffith$elm_ui$Internal$Flag$flag(21);
 var $mdgriffith$elm_ui$Element$pointer = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$cursor, $mdgriffith$elm_ui$Internal$Style$classes.cursorPointer);
-var $mdgriffith$elm_ui$Internal$Model$Content = {$: 'Content'};
-var $mdgriffith$elm_ui$Element$shrink = $mdgriffith$elm_ui$Internal$Model$Content;
 var $elm$html$Html$Attributes$tabindex = function (n) {
 	return A2(
 		_VirtualDom_attribute,
 		'tabIndex',
 		$elm$core$String$fromInt(n));
 };
-var $mdgriffith$elm_ui$Internal$Model$Width = function (a) {
-	return {$: 'Width', a: a};
-};
-var $mdgriffith$elm_ui$Element$width = $mdgriffith$elm_ui$Internal$Model$Width;
 var $mdgriffith$elm_ui$Element$Input$button = F2(
 	function (attrs, _v0) {
 		var onPress = _v0.onPress;
@@ -12725,301 +13374,226 @@ var $mdgriffith$elm_ui$Element$Input$button = F2(
 				_List_fromArray(
 					[label])));
 	});
-var $mdgriffith$elm_ui$Internal$Model$CenterX = {$: 'CenterX'};
-var $mdgriffith$elm_ui$Element$centerX = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$CenterX);
-var $mdgriffith$elm_ui$Internal$Model$AlignY = function (a) {
-	return {$: 'AlignY', a: a};
-};
-var $mdgriffith$elm_ui$Internal$Model$CenterY = {$: 'CenterY'};
-var $mdgriffith$elm_ui$Element$centerY = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$CenterY);
-var $elm$svg$Svg$circle = $elm$svg$Svg$trustedNode('circle');
-var $elm$svg$Svg$Attributes$cx = _VirtualDom_attribute('cx');
-var $elm$svg$Svg$Attributes$cy = _VirtualDom_attribute('cy');
-var $elm$svg$Svg$Attributes$r = _VirtualDom_attribute('r');
-var $author$project$Icons$circle = A2(
-	$author$project$Icons$svgFeatherIcon,
-	'circle',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$circle,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$cx('12'),
-					$elm$svg$Svg$Attributes$cy('12'),
-					$elm$svg$Svg$Attributes$r('10')
-				]),
-			_List_Nil)
-		]));
-var $mdgriffith$elm_ui$Internal$Model$AsColumn = {$: 'AsColumn'};
-var $mdgriffith$elm_ui$Internal$Model$asColumn = $mdgriffith$elm_ui$Internal$Model$AsColumn;
-var $mdgriffith$elm_ui$Element$column = F2(
-	function (attrs, children) {
-		return A4(
-			$mdgriffith$elm_ui$Internal$Model$element,
-			$mdgriffith$elm_ui$Internal$Model$asColumn,
-			$mdgriffith$elm_ui$Internal$Model$div,
-			A2(
-				$elm$core$List$cons,
-				$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentTop + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.contentLeft)),
-				A2(
-					$elm$core$List$cons,
-					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+var $elm$virtual_dom$VirtualDom$map = _VirtualDom_map;
+var $mdgriffith$elm_ui$Internal$Model$map = F2(
+	function (fn, el) {
+		switch (el.$) {
+			case 'Styled':
+				var styled = el.a;
+				return $mdgriffith$elm_ui$Internal$Model$Styled(
+					{
+						html: F2(
+							function (add, context) {
+								return A2(
+									$elm$virtual_dom$VirtualDom$map,
+									fn,
+									A2(styled.html, add, context));
+							}),
+						styles: styled.styles
+					});
+			case 'Unstyled':
+				var html = el.a;
+				return $mdgriffith$elm_ui$Internal$Model$Unstyled(
 					A2(
-						$elm$core$List$cons,
-						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
-						attrs))),
-			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
-	});
-var $mdgriffith$elm_ui$Internal$Model$Top = {$: 'Top'};
-var $mdgriffith$elm_ui$Element$alignTop = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$Top);
-var $mdgriffith$elm_ui$Internal$Model$Fill = function (a) {
-	return {$: 'Fill', a: a};
-};
-var $mdgriffith$elm_ui$Element$fill = $mdgriffith$elm_ui$Internal$Model$Fill(1);
-var $Orasund$elm_ui_framework$Framework$Grid$compact = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-		$mdgriffith$elm_ui$Element$alignTop
-	]);
-var $mdgriffith$elm_ui$Internal$Model$Colored = F3(
-	function (a, b, c) {
-		return {$: 'Colored', a: a, b: b, c: c};
-	});
-var $mdgriffith$elm_ui$Internal$Model$StyleClass = F2(
-	function (a, b) {
-		return {$: 'StyleClass', a: a, b: b};
-	});
-var $mdgriffith$elm_ui$Internal$Flag$bgColor = $mdgriffith$elm_ui$Internal$Flag$flag(8);
-var $mdgriffith$elm_ui$Internal$Model$formatColorClass = function (_v0) {
-	var red = _v0.a;
-	var green = _v0.b;
-	var blue = _v0.c;
-	var alpha = _v0.d;
-	return $mdgriffith$elm_ui$Internal$Model$floatClass(red) + ('-' + ($mdgriffith$elm_ui$Internal$Model$floatClass(green) + ('-' + ($mdgriffith$elm_ui$Internal$Model$floatClass(blue) + ('-' + $mdgriffith$elm_ui$Internal$Model$floatClass(alpha))))));
-};
-var $mdgriffith$elm_ui$Element$Background$color = function (clr) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$bgColor,
-		A3(
-			$mdgriffith$elm_ui$Internal$Model$Colored,
-			'bg-' + $mdgriffith$elm_ui$Internal$Model$formatColorClass(clr),
-			'background-color',
-			clr));
-};
-var $mdgriffith$elm_ui$Internal$Model$Main = {$: 'Main'};
-var $mdgriffith$elm_ui$Element$Region$mainContent = $mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$Main);
-var $mdgriffith$elm_ui$Internal$Model$Max = F2(
-	function (a, b) {
-		return {$: 'Max', a: a, b: b};
-	});
-var $mdgriffith$elm_ui$Element$maximum = F2(
-	function (i, l) {
-		return A2($mdgriffith$elm_ui$Internal$Model$Max, i, l);
-	});
-var $mdgriffith$elm_ui$Internal$Model$PaddingStyle = F5(
-	function (a, b, c, d, e) {
-		return {$: 'PaddingStyle', a: a, b: b, c: c, d: d, e: e};
-	});
-var $mdgriffith$elm_ui$Internal$Flag$padding = $mdgriffith$elm_ui$Internal$Flag$flag(2);
-var $mdgriffith$elm_ui$Element$padding = function (x) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$padding,
-		A5(
-			$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-			'p-' + $elm$core$String$fromInt(x),
-			x,
-			x,
-			x,
-			x));
-};
-var $mdgriffith$elm_ui$Internal$Model$Rgba = F4(
-	function (a, b, c, d) {
-		return {$: 'Rgba', a: a, b: b, c: c, d: d};
-	});
-var $mdgriffith$elm_ui$Element$rgb255 = F3(
-	function (red, green, blue) {
-		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, red / 255, green / 255, blue / 255, 1);
-	});
-var $Orasund$elm_ui_framework$Framework$container = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$centerX,
-		$mdgriffith$elm_ui$Element$centerY,
-		$mdgriffith$elm_ui$Element$width(
-		A2($mdgriffith$elm_ui$Element$maximum, 1200, $mdgriffith$elm_ui$Element$fill)),
-		$mdgriffith$elm_ui$Element$padding(20),
-		$mdgriffith$elm_ui$Element$Region$mainContent,
-		$mdgriffith$elm_ui$Element$Background$color(
-		A3($mdgriffith$elm_ui$Element$rgb255, 255, 255, 255))
-	]);
-var $elm_community$intdict$IntDict$findMin = function (dict) {
-	findMin:
-	while (true) {
-		switch (dict.$) {
-			case 'Empty':
-				return $elm$core$Maybe$Nothing;
-			case 'Leaf':
-				var l = dict.a;
-				return $elm$core$Maybe$Just(
-					_Utils_Tuple2(l.key, l.value));
+						$elm$core$Basics$composeL,
+						$elm$virtual_dom$VirtualDom$map(fn),
+						html));
+			case 'Text':
+				var str = el.a;
+				return $mdgriffith$elm_ui$Internal$Model$Text(str);
 			default:
-				var i = dict.a;
-				var $temp$dict = i.left;
-				dict = $temp$dict;
-				continue findMin;
-		}
-	}
-};
-var $elm_community$intdict$IntDict$after = F2(
-	function (key, dict) {
-		var go = F2(
-			function (def, currentDict) {
-				go:
-				while (true) {
-					switch (currentDict.$) {
-						case 'Empty':
-							return $elm_community$intdict$IntDict$findMin(def);
-						case 'Leaf':
-							var l = currentDict.a;
-							return (_Utils_cmp(l.key, key) < 1) ? $elm_community$intdict$IntDict$findMin(def) : $elm$core$Maybe$Just(
-								_Utils_Tuple2(l.key, l.value));
-						default:
-							var i = currentDict.a;
-							if (!A2($elm_community$intdict$IntDict$prefixMatches, i.prefix, key)) {
-								return (_Utils_cmp(i.prefix.prefixBits, key) < 0) ? $elm_community$intdict$IntDict$findMin(def) : $elm_community$intdict$IntDict$findMin(i.left);
-							} else {
-								if (A2($elm_community$intdict$IntDict$isBranchingBitSet, i.prefix, key)) {
-									var $temp$def = def,
-										$temp$currentDict = i.right;
-									def = $temp$def;
-									currentDict = $temp$currentDict;
-									continue go;
-								} else {
-									var $temp$def = i.right,
-										$temp$currentDict = i.left;
-									def = $temp$def;
-									currentDict = $temp$currentDict;
-									continue go;
-								}
-							}
-					}
-				}
-			});
-		return A2(go, $elm_community$intdict$IntDict$Empty, dict);
-	});
-var $elm$core$Maybe$andThen = F2(
-	function (callback, maybeValue) {
-		if (maybeValue.$ === 'Just') {
-			var value = maybeValue.a;
-			return callback(value);
-		} else {
-			return $elm$core$Maybe$Nothing;
+				return $mdgriffith$elm_ui$Internal$Model$Empty;
 		}
 	});
-var $elm_community$intdict$IntDict$findMax = function (dict) {
-	findMax:
-	while (true) {
-		switch (dict.$) {
-			case 'Empty':
-				return $elm$core$Maybe$Nothing;
-			case 'Leaf':
-				var l = dict.a;
-				return $elm$core$Maybe$Just(
-					_Utils_Tuple2(l.key, l.value));
-			default:
-				var i = dict.a;
-				var $temp$dict = i.right;
-				dict = $temp$dict;
-				continue findMax;
-		}
-	}
-};
-var $elm_community$intdict$IntDict$before = F2(
-	function (key, dict) {
-		var go = F2(
-			function (def, currentDict) {
-				go:
-				while (true) {
-					switch (currentDict.$) {
-						case 'Empty':
-							return $elm_community$intdict$IntDict$findMax(def);
-						case 'Leaf':
-							var l = currentDict.a;
-							return (_Utils_cmp(l.key, key) > -1) ? $elm_community$intdict$IntDict$findMax(def) : $elm$core$Maybe$Just(
-								_Utils_Tuple2(l.key, l.value));
-						default:
-							var i = currentDict.a;
-							if (!A2($elm_community$intdict$IntDict$prefixMatches, i.prefix, key)) {
-								return (_Utils_cmp(i.prefix.prefixBits, key) > 0) ? $elm_community$intdict$IntDict$findMax(def) : $elm_community$intdict$IntDict$findMax(i.right);
-							} else {
-								if (A2($elm_community$intdict$IntDict$isBranchingBitSet, i.prefix, key)) {
-									var $temp$def = i.left,
-										$temp$currentDict = i.right;
-									def = $temp$def;
-									currentDict = $temp$currentDict;
-									continue go;
-								} else {
-									var $temp$def = def,
-										$temp$currentDict = i.left;
-									def = $temp$def;
-									currentDict = $temp$currentDict;
-									continue go;
-								}
-							}
-					}
-				}
-			});
-		return A2(go, $elm_community$intdict$IntDict$Empty, dict);
-	});
-var $author$project$Widget$ScrollingNav$current = F2(
-	function (fromString, _v0) {
-		var positions = _v0.positions;
-		var scrollPos = _v0.scrollPos;
+var $mdgriffith$elm_ui$Element$map = $mdgriffith$elm_ui$Internal$Model$map;
+var $author$project$Internal$Button$button = F2(
+	function (style, _v0) {
+		var onPress = _v0.onPress;
+		var text = _v0.text;
+		var icon = _v0.icon;
 		return A2(
-			$elm$core$Maybe$andThen,
-			fromString,
-			A2(
-				$elm$core$Maybe$map,
-				$elm$core$Tuple$second,
-				A2(
-					$elm$core$Maybe$withDefault,
-					A2($elm_community$intdict$IntDict$after, scrollPos + 1, positions),
-					A2(
-						$elm$core$Maybe$map,
-						$elm$core$Maybe$Just,
-						A2($elm_community$intdict$IntDict$before, scrollPos + 1, positions)))));
+			$mdgriffith$elm_ui$Element$Input$button,
+			_Utils_ap(
+				style.container,
+				_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
+			{
+				label: A2(
+					$mdgriffith$elm_ui$Element$row,
+					style.labelRow,
+					_List_fromArray(
+						[
+							A2($mdgriffith$elm_ui$Element$map, $elm$core$Basics$never, icon),
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							style.text,
+							$mdgriffith$elm_ui$Element$text(text))
+						])),
+				onPress: onPress
+			});
 	});
-var $mdgriffith$elm_ui$Element$el = F2(
-	function (attrs, child) {
-		return A4(
-			$mdgriffith$elm_ui$Internal$Model$element,
-			$mdgriffith$elm_ui$Internal$Model$asEl,
-			$mdgriffith$elm_ui$Internal$Model$div,
-			A2(
-				$elm$core$List$cons,
-				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
-				A2(
+var $author$project$Internal$Button$textButton = F2(
+	function (style, _v0) {
+		var onPress = _v0.onPress;
+		var text = _v0.text;
+		return A2(
+			$author$project$Internal$Button$button,
+			style,
+			{icon: $mdgriffith$elm_ui$Element$none, onPress: onPress, text: text});
+	});
+var $author$project$Internal$Dialog$dialog = F2(
+	function (style, _v0) {
+		var title = _v0.title;
+		var text = _v0.text;
+		var accept = _v0.accept;
+		var dismiss = _v0.dismiss;
+		return $author$project$Internal$Dialog$modal(
+			{
+				content: A2(
+					$mdgriffith$elm_ui$Element$column,
+					_Utils_ap(
+						_List_fromArray(
+							[$mdgriffith$elm_ui$Element$centerX, $mdgriffith$elm_ui$Element$centerY]),
+						style.containerColumn),
+					_List_fromArray(
+						[
+							A2(
+							$elm$core$Maybe$withDefault,
+							$mdgriffith$elm_ui$Element$none,
+							A2(
+								$elm$core$Maybe$map,
+								A2(
+									$elm$core$Basics$composeR,
+									$mdgriffith$elm_ui$Element$text,
+									$mdgriffith$elm_ui$Element$el(style.title)),
+								title)),
+							A2(
+							$mdgriffith$elm_ui$Element$paragraph,
+							style.text,
+							$elm$core$List$singleton(
+								$mdgriffith$elm_ui$Element$text(text))),
+							A2(
+							$mdgriffith$elm_ui$Element$row,
+							_Utils_ap(
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$alignRight,
+										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
+									]),
+								style.buttonRow),
+							function () {
+								var _v1 = _Utils_Tuple2(accept, dismiss);
+								if (_v1.a.$ === 'Just') {
+									if (_v1.b.$ === 'Nothing') {
+										var acceptButton = _v1.a.a;
+										var _v2 = _v1.b;
+										return $elm$core$List$singleton(
+											A2($author$project$Internal$Button$textButton, style.acceptButton, acceptButton));
+									} else {
+										var acceptButton = _v1.a.a;
+										var dismissButton = _v1.b.a;
+										return _List_fromArray(
+											[
+												A2($author$project$Internal$Button$textButton, style.dismissButton, dismissButton),
+												A2($author$project$Internal$Button$textButton, style.acceptButton, acceptButton)
+											]);
+									}
+								} else {
+									return _List_Nil;
+								}
+							}())
+						])),
+				onDismiss: function () {
+					var _v3 = _Utils_Tuple2(accept, dismiss);
+					if (_v3.a.$ === 'Nothing') {
+						if (_v3.b.$ === 'Nothing') {
+							var _v4 = _v3.a;
+							var _v5 = _v3.b;
+							return $elm$core$Maybe$Nothing;
+						} else {
+							var _v6 = _v3.a;
+							var onPress = _v3.b.a.onPress;
+							return onPress;
+						}
+					} else {
+						return $elm$core$Maybe$Nothing;
+					}
+				}()
+			});
+	});
+var $author$project$Widget$dialog = $author$project$Internal$Dialog$dialog;
+var $elm$core$Array$fromListHelp = F3(
+	function (list, nodeList, nodeListSize) {
+		fromListHelp:
+		while (true) {
+			var _v0 = A2($elm$core$Elm$JsArray$initializeFromList, $elm$core$Array$branchFactor, list);
+			var jsArray = _v0.a;
+			var remainingItems = _v0.b;
+			if (_Utils_cmp(
+				$elm$core$Elm$JsArray$length(jsArray),
+				$elm$core$Array$branchFactor) < 0) {
+				return A2(
+					$elm$core$Array$builderToArray,
+					true,
+					{nodeList: nodeList, nodeListSize: nodeListSize, tail: jsArray});
+			} else {
+				var $temp$list = remainingItems,
+					$temp$nodeList = A2(
 					$elm$core$List$cons,
-					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
-					attrs)),
-			$mdgriffith$elm_ui$Internal$Model$Unkeyed(
-				_List_fromArray(
-					[child])));
+					$elm$core$Array$Leaf(jsArray),
+					nodeList),
+					$temp$nodeListSize = nodeListSize + 1;
+				list = $temp$list;
+				nodeList = $temp$nodeList;
+				nodeListSize = $temp$nodeListSize;
+				continue fromListHelp;
+			}
+		}
 	});
-var $author$project$Data$Section$fromString = function (string) {
-	switch (string) {
-		case 'Component':
-			return $elm$core$Maybe$Just($author$project$Data$Section$ComponentViews);
-		case 'Reusable':
-			return $elm$core$Maybe$Just($author$project$Data$Section$ReusableViews);
-		case 'Stateless':
-			return $elm$core$Maybe$Just($author$project$Data$Section$StatelessViews);
-		default:
-			return $elm$core$Maybe$Nothing;
+var $elm$core$Array$fromList = function (list) {
+	if (!list.b) {
+		return $elm$core$Array$empty;
+	} else {
+		return A3($elm$core$Array$fromListHelp, list, _List_Nil, 0);
 	}
 };
+var $elm$core$Array$bitMask = 4294967295 >>> (32 - $elm$core$Array$shiftStep);
+var $elm$core$Elm$JsArray$unsafeGet = _JsArray_unsafeGet;
+var $elm$core$Array$getHelp = F3(
+	function (shift, index, tree) {
+		getHelp:
+		while (true) {
+			var pos = $elm$core$Array$bitMask & (index >>> shift);
+			var _v0 = A2($elm$core$Elm$JsArray$unsafeGet, pos, tree);
+			if (_v0.$ === 'SubTree') {
+				var subTree = _v0.a;
+				var $temp$shift = shift - $elm$core$Array$shiftStep,
+					$temp$index = index,
+					$temp$tree = subTree;
+				shift = $temp$shift;
+				index = $temp$index;
+				tree = $temp$tree;
+				continue getHelp;
+			} else {
+				var values = _v0.a;
+				return A2($elm$core$Elm$JsArray$unsafeGet, $elm$core$Array$bitMask & index, values);
+			}
+		}
+	});
+var $elm$core$Array$tailIndex = function (len) {
+	return (len >>> 5) << 5;
+};
+var $elm$core$Array$get = F2(
+	function (index, _v0) {
+		var len = _v0.a;
+		var startShift = _v0.b;
+		var tree = _v0.c;
+		var tail = _v0.d;
+		return ((index < 0) || (_Utils_cmp(index, len) > -1)) ? $elm$core$Maybe$Nothing : ((_Utils_cmp(
+			index,
+			$elm$core$Array$tailIndex(len)) > -1) ? $elm$core$Maybe$Just(
+			A2($elm$core$Elm$JsArray$unsafeGet, $elm$core$Array$bitMask & index, tail)) : $elm$core$Maybe$Just(
+			A3($elm$core$Array$getHelp, startShift, index, tree)));
+	});
 var $author$project$Icons$github = A2(
 	$author$project$Icons$svgFeatherIcon,
 	'github',
@@ -13045,6 +13619,11 @@ var $mdgriffith$elm_ui$Internal$Model$Heading = function (a) {
 	return {$: 'Heading', a: a};
 };
 var $mdgriffith$elm_ui$Element$Region$heading = A2($elm$core$Basics$composeL, $mdgriffith$elm_ui$Internal$Model$Describe, $mdgriffith$elm_ui$Internal$Model$Heading);
+var $mdgriffith$elm_ui$Internal$Model$PaddingStyle = F5(
+	function (a, b, c, d, e) {
+		return {$: 'PaddingStyle', a: a, b: b, c: c, d: d, e: e};
+	});
+var $mdgriffith$elm_ui$Internal$Flag$padding = $mdgriffith$elm_ui$Internal$Flag$flag(2);
 var $mdgriffith$elm_ui$Internal$Model$paddingName = F4(
 	function (top, right, bottom, left) {
 		return 'pad-' + ($elm$core$String$fromInt(top) + ('-' + ($elm$core$String$fromInt(right) + ('-' + ($elm$core$String$fromInt(bottom) + ('-' + $elm$core$String$fromInt(left)))))));
@@ -13098,26 +13677,66 @@ var $Orasund$elm_ui_framework$Framework$Heading$h = function (inputLevel) {
 		]);
 };
 var $Orasund$elm_ui_framework$Framework$Heading$h1 = $Orasund$elm_ui_framework$Framework$Heading$h(1);
-var $Orasund$elm_ui_framework$Framework$Heading$h3 = $Orasund$elm_ui_framework$Framework$Heading$h(3);
-var $elm$core$List$head = function (list) {
-	if (list.b) {
-		var x = list.a;
-		var xs = list.b;
-		return $elm$core$Maybe$Just(x);
-	} else {
-		return $elm$core$Maybe$Nothing;
-	}
-};
 var $mdgriffith$elm_ui$Internal$Model$unstyled = A2($elm$core$Basics$composeL, $mdgriffith$elm_ui$Internal$Model$Unstyled, $elm$core$Basics$always);
 var $mdgriffith$elm_ui$Element$html = $mdgriffith$elm_ui$Internal$Model$unstyled;
-var $mdgriffith$elm_ui$Internal$Model$Min = F2(
-	function (a, b) {
-		return {$: 'Min', a: a, b: b};
-	});
-var $mdgriffith$elm_ui$Element$minimum = F2(
-	function (i, l) {
-		return A2($mdgriffith$elm_ui$Internal$Model$Min, i, l);
+var $elm$html$Html$map = $elm$virtual_dom$VirtualDom$map;
+var $elm$svg$Svg$circle = $elm$svg$Svg$trustedNode('circle');
+var $elm$svg$Svg$Attributes$cx = _VirtualDom_attribute('cx');
+var $elm$svg$Svg$Attributes$cy = _VirtualDom_attribute('cy');
+var $elm$svg$Svg$Attributes$r = _VirtualDom_attribute('r');
+var $author$project$Icons$penTool = A2(
+	$author$project$Icons$svgFeatherIcon,
+	'pen-tool',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M12 19l7-7 3 3-7 7-3-3z')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M2 2l7.586 7.586')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$circle,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$cx('11'),
+					$elm$svg$Svg$Attributes$cy('11'),
+					$elm$svg$Svg$Attributes$r('2')
+				]),
+			_List_Nil)
+		]));
+var $elm$html$Html$Attributes$attribute = $elm$virtual_dom$VirtualDom$attribute;
+var $mdgriffith$elm_ui$Internal$Flag$fontColor = $mdgriffith$elm_ui$Internal$Flag$flag(14);
+var $mdgriffith$elm_ui$Element$Font$color = function (fontColor) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$fontColor,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$Colored,
+			'fc-' + $mdgriffith$elm_ui$Internal$Model$formatColorClass(fontColor),
+			'color',
+			fontColor));
+};
+var $mdgriffith$elm_ui$Element$rgb255 = F3(
+	function (red, green, blue) {
+		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, red / 255, green / 255, blue / 255, 1);
 	});
+var $Orasund$elm_ui_framework$Framework$Color$darkerGrey = A3($mdgriffith$elm_ui$Element$rgb255, 18, 18, 18);
 var $mdgriffith$elm_ui$Internal$Flag$borderColor = $mdgriffith$elm_ui$Internal$Flag$flag(28);
 var $mdgriffith$elm_ui$Element$Border$color = function (clr) {
 	return A2(
@@ -13135,218 +13754,6 @@ var $Orasund$elm_ui_framework$Framework$Color$light = _List_fromArray(
 		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$lighterGrey),
 		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$lighterGrey)
 	]);
-var $Orasund$elm_ui_framework$Framework$Color$lightGrey = A3($mdgriffith$elm_ui$Element$rgb255, 219, 219, 219);
-var $mdgriffith$elm_ui$Element$rgba = $mdgriffith$elm_ui$Internal$Model$Rgba;
-var $mdgriffith$elm_ui$Internal$Model$boxShadowClass = function (shadow) {
-	return $elm$core$String$concat(
-		_List_fromArray(
-			[
-				shadow.inset ? 'box-inset' : 'box-',
-				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.offset.a) + 'px',
-				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.offset.b) + 'px',
-				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.blur) + 'px',
-				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.size) + 'px',
-				$mdgriffith$elm_ui$Internal$Model$formatColorClass(shadow.color)
-			]));
-};
-var $mdgriffith$elm_ui$Internal$Flag$shadows = $mdgriffith$elm_ui$Internal$Flag$flag(19);
-var $mdgriffith$elm_ui$Element$Border$shadow = function (almostShade) {
-	var shade = {blur: almostShade.blur, color: almostShade.color, inset: false, offset: almostShade.offset, size: almostShade.size};
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$shadows,
-		A3(
-			$mdgriffith$elm_ui$Internal$Model$Single,
-			$mdgriffith$elm_ui$Internal$Model$boxShadowClass(shade),
-			'box-shadow',
-			$mdgriffith$elm_ui$Internal$Model$formatBoxShadow(shade)));
-};
-var $mdgriffith$elm_ui$Element$paddingXY = F2(
-	function (x, y) {
-		return _Utils_eq(x, y) ? A2(
-			$mdgriffith$elm_ui$Internal$Model$StyleClass,
-			$mdgriffith$elm_ui$Internal$Flag$padding,
-			A5(
-				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-				'p-' + $elm$core$String$fromInt(x),
-				x,
-				x,
-				x,
-				x)) : A2(
-			$mdgriffith$elm_ui$Internal$Model$StyleClass,
-			$mdgriffith$elm_ui$Internal$Flag$padding,
-			A5(
-				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-				'p-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y))),
-				y,
-				x,
-				y,
-				x));
-	});
-var $mdgriffith$elm_ui$Internal$Flag$borderRound = $mdgriffith$elm_ui$Internal$Flag$flag(17);
-var $mdgriffith$elm_ui$Element$Border$rounded = function (radius) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$borderRound,
-		A3(
-			$mdgriffith$elm_ui$Internal$Model$Single,
-			'br-' + $elm$core$String$fromInt(radius),
-			'border-radius',
-			$elm$core$String$fromInt(radius) + 'px'));
-};
-var $Orasund$elm_ui_framework$Framework$Color$simple = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$lightGrey),
-		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$lightGrey)
-	]);
-var $Orasund$elm_ui_framework$Framework$Tag$simple = _Utils_ap(
-	$Orasund$elm_ui_framework$Framework$Color$simple,
-	_List_fromArray(
-		[
-			$mdgriffith$elm_ui$Element$Border$rounded(4),
-			A2($mdgriffith$elm_ui$Element$paddingXY, 7, 4)
-		]));
-var $mdgriffith$elm_ui$Internal$Model$BorderWidth = F5(
-	function (a, b, c, d, e) {
-		return {$: 'BorderWidth', a: a, b: b, c: c, d: d, e: e};
-	});
-var $mdgriffith$elm_ui$Element$Border$width = function (v) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$borderWidth,
-		A5(
-			$mdgriffith$elm_ui$Internal$Model$BorderWidth,
-			'b-' + $elm$core$String$fromInt(v),
-			v,
-			v,
-			v,
-			v));
-};
-var $Orasund$elm_ui_framework$Framework$Card$simple = _Utils_ap(
-	$Orasund$elm_ui_framework$Framework$Tag$simple,
-	_Utils_ap(
-		$Orasund$elm_ui_framework$Framework$Color$light,
-		_List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Border$shadow(
-				{
-					blur: 10,
-					color: A4($mdgriffith$elm_ui$Element$rgba, 0, 0, 0, 0.05),
-					offset: _Utils_Tuple2(0, 2),
-					size: 1
-				}),
-				$mdgriffith$elm_ui$Element$Border$width(1),
-				$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$lightGrey),
-				$mdgriffith$elm_ui$Element$alignTop,
-				$mdgriffith$elm_ui$Element$padding(20),
-				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
-			])));
-var $Orasund$elm_ui_framework$Framework$Card$withSize = function (_int) {
-	return _Utils_ap(
-		$Orasund$elm_ui_framework$Framework$Card$simple,
-		_List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$width(
-				A2(
-					$mdgriffith$elm_ui$Element$minimum,
-					240,
-					A2($mdgriffith$elm_ui$Element$maximum, _int, $mdgriffith$elm_ui$Element$fill)))
-			]));
-};
-var $Orasund$elm_ui_framework$Framework$Card$large = $Orasund$elm_ui_framework$Framework$Card$withSize(480);
-var $mdgriffith$elm_ui$Internal$Model$Empty = {$: 'Empty'};
-var $mdgriffith$elm_ui$Internal$Model$Text = function (a) {
-	return {$: 'Text', a: a};
-};
-var $elm$virtual_dom$VirtualDom$map = _VirtualDom_map;
-var $mdgriffith$elm_ui$Internal$Model$map = F2(
-	function (fn, el) {
-		switch (el.$) {
-			case 'Styled':
-				var styled = el.a;
-				return $mdgriffith$elm_ui$Internal$Model$Styled(
-					{
-						html: F2(
-							function (add, context) {
-								return A2(
-									$elm$virtual_dom$VirtualDom$map,
-									fn,
-									A2(styled.html, add, context));
-							}),
-						styles: styled.styles
-					});
-			case 'Unstyled':
-				var html = el.a;
-				return $mdgriffith$elm_ui$Internal$Model$Unstyled(
-					A2(
-						$elm$core$Basics$composeL,
-						$elm$virtual_dom$VirtualDom$map(fn),
-						html));
-			case 'Text':
-				var str = el.a;
-				return $mdgriffith$elm_ui$Internal$Model$Text(str);
-			default:
-				return $mdgriffith$elm_ui$Internal$Model$Empty;
-		}
-	});
-var $mdgriffith$elm_ui$Element$map = $mdgriffith$elm_ui$Internal$Model$map;
-var $elm$html$Html$map = $elm$virtual_dom$VirtualDom$map;
-var $mdgriffith$elm_ui$Element$none = $mdgriffith$elm_ui$Internal$Model$Empty;
-var $mdgriffith$elm_ui$Internal$Model$Paragraph = {$: 'Paragraph'};
-var $mdgriffith$elm_ui$Internal$Model$SpacingStyle = F3(
-	function (a, b, c) {
-		return {$: 'SpacingStyle', a: a, b: b, c: c};
-	});
-var $mdgriffith$elm_ui$Internal$Flag$spacing = $mdgriffith$elm_ui$Internal$Flag$flag(3);
-var $mdgriffith$elm_ui$Internal$Model$spacingName = F2(
-	function (x, y) {
-		return 'spacing-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y)));
-	});
-var $mdgriffith$elm_ui$Element$spacing = function (x) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$spacing,
-		A3(
-			$mdgriffith$elm_ui$Internal$Model$SpacingStyle,
-			A2($mdgriffith$elm_ui$Internal$Model$spacingName, x, x),
-			x,
-			x));
-};
-var $mdgriffith$elm_ui$Element$paragraph = F2(
-	function (attrs, children) {
-		return A4(
-			$mdgriffith$elm_ui$Internal$Model$element,
-			$mdgriffith$elm_ui$Internal$Model$asParagraph,
-			$mdgriffith$elm_ui$Internal$Model$div,
-			A2(
-				$elm$core$List$cons,
-				$mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$Paragraph),
-				A2(
-					$elm$core$List$cons,
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					A2(
-						$elm$core$List$cons,
-						$mdgriffith$elm_ui$Element$spacing(5),
-						attrs))),
-			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
-	});
-var $mdgriffith$elm_ui$Internal$Model$Px = function (a) {
-	return {$: 'Px', a: a};
-};
-var $mdgriffith$elm_ui$Element$px = $mdgriffith$elm_ui$Internal$Model$Px;
-var $elm$html$Html$Attributes$attribute = $elm$virtual_dom$VirtualDom$attribute;
-var $mdgriffith$elm_ui$Internal$Flag$fontColor = $mdgriffith$elm_ui$Internal$Flag$flag(14);
-var $mdgriffith$elm_ui$Element$Font$color = function (fontColor) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$fontColor,
-		A3(
-			$mdgriffith$elm_ui$Internal$Model$Colored,
-			'fc-' + $mdgriffith$elm_ui$Internal$Model$formatColorClass(fontColor),
-			'color',
-			fontColor));
-};
-var $Orasund$elm_ui_framework$Framework$Color$darkerGrey = A3($mdgriffith$elm_ui$Element$rgb255, 18, 18, 18);
 var $Orasund$elm_ui_framework$Framework$layoutAttributes = _Utils_ap(
 	_List_fromArray(
 		[
@@ -13358,10 +13765,6 @@ var $mdgriffith$elm_ui$Internal$Model$FocusStyleOption = function (a) {
 	return {$: 'FocusStyleOption', a: a};
 };
 var $mdgriffith$elm_ui$Element$focusStyle = $mdgriffith$elm_ui$Internal$Model$FocusStyleOption;
-var $elm$core$List$singleton = function (value) {
-	return _List_fromArray(
-		[value]);
-};
 var $Orasund$elm_ui_framework$Framework$Color$turquoise = A3($mdgriffith$elm_ui$Element$rgb255, 0, 209, 178);
 var $Orasund$elm_ui_framework$Framework$layoutOptions = $elm$core$List$singleton(
 	$mdgriffith$elm_ui$Element$focusStyle(
@@ -13652,19 +14055,284 @@ var $Orasund$elm_ui_framework$Framework$responsiveLayout = F2(
 					A2($Orasund$elm_ui_framework$Framework$layout, attributes, view)
 				]));
 	});
-var $mdgriffith$elm_ui$Internal$Flag$fontAlignment = $mdgriffith$elm_ui$Internal$Flag$flag(12);
-var $mdgriffith$elm_ui$Element$Font$center = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$fontAlignment, $mdgriffith$elm_ui$Internal$Style$classes.textCenter);
-var $Orasund$elm_ui_framework$Framework$Color$grey = A3($mdgriffith$elm_ui$Element$rgb255, 122, 122, 122);
-var $mdgriffith$elm_ui$Internal$Model$Hover = {$: 'Hover'};
+var $elm_community$intdict$IntDict$findMin = function (dict) {
+	findMin:
+	while (true) {
+		switch (dict.$) {
+			case 'Empty':
+				return $elm$core$Maybe$Nothing;
+			case 'Leaf':
+				var l = dict.a;
+				return $elm$core$Maybe$Just(
+					_Utils_Tuple2(l.key, l.value));
+			default:
+				var i = dict.a;
+				var $temp$dict = i.left;
+				dict = $temp$dict;
+				continue findMin;
+		}
+	}
+};
+var $elm_community$intdict$IntDict$after = F2(
+	function (key, dict) {
+		var go = F2(
+			function (def, currentDict) {
+				go:
+				while (true) {
+					switch (currentDict.$) {
+						case 'Empty':
+							return $elm_community$intdict$IntDict$findMin(def);
+						case 'Leaf':
+							var l = currentDict.a;
+							return (_Utils_cmp(l.key, key) < 1) ? $elm_community$intdict$IntDict$findMin(def) : $elm$core$Maybe$Just(
+								_Utils_Tuple2(l.key, l.value));
+						default:
+							var i = currentDict.a;
+							if (!A2($elm_community$intdict$IntDict$prefixMatches, i.prefix, key)) {
+								return (_Utils_cmp(i.prefix.prefixBits, key) < 0) ? $elm_community$intdict$IntDict$findMin(def) : $elm_community$intdict$IntDict$findMin(i.left);
+							} else {
+								if (A2($elm_community$intdict$IntDict$isBranchingBitSet, i.prefix, key)) {
+									var $temp$def = def,
+										$temp$currentDict = i.right;
+									def = $temp$def;
+									currentDict = $temp$currentDict;
+									continue go;
+								} else {
+									var $temp$def = i.right,
+										$temp$currentDict = i.left;
+									def = $temp$def;
+									currentDict = $temp$currentDict;
+									continue go;
+								}
+							}
+					}
+				}
+			});
+		return A2(go, $elm_community$intdict$IntDict$Empty, dict);
+	});
+var $elm$core$Maybe$andThen = F2(
+	function (callback, maybeValue) {
+		if (maybeValue.$ === 'Just') {
+			var value = maybeValue.a;
+			return callback(value);
+		} else {
+			return $elm$core$Maybe$Nothing;
+		}
+	});
+var $elm_community$intdict$IntDict$findMax = function (dict) {
+	findMax:
+	while (true) {
+		switch (dict.$) {
+			case 'Empty':
+				return $elm$core$Maybe$Nothing;
+			case 'Leaf':
+				var l = dict.a;
+				return $elm$core$Maybe$Just(
+					_Utils_Tuple2(l.key, l.value));
+			default:
+				var i = dict.a;
+				var $temp$dict = i.right;
+				dict = $temp$dict;
+				continue findMax;
+		}
+	}
+};
+var $elm_community$intdict$IntDict$before = F2(
+	function (key, dict) {
+		var go = F2(
+			function (def, currentDict) {
+				go:
+				while (true) {
+					switch (currentDict.$) {
+						case 'Empty':
+							return $elm_community$intdict$IntDict$findMax(def);
+						case 'Leaf':
+							var l = currentDict.a;
+							return (_Utils_cmp(l.key, key) > -1) ? $elm_community$intdict$IntDict$findMax(def) : $elm$core$Maybe$Just(
+								_Utils_Tuple2(l.key, l.value));
+						default:
+							var i = currentDict.a;
+							if (!A2($elm_community$intdict$IntDict$prefixMatches, i.prefix, key)) {
+								return (_Utils_cmp(i.prefix.prefixBits, key) > 0) ? $elm_community$intdict$IntDict$findMax(def) : $elm_community$intdict$IntDict$findMax(i.right);
+							} else {
+								if (A2($elm_community$intdict$IntDict$isBranchingBitSet, i.prefix, key)) {
+									var $temp$def = i.left,
+										$temp$currentDict = i.right;
+									def = $temp$def;
+									currentDict = $temp$currentDict;
+									continue go;
+								} else {
+									var $temp$def = def,
+										$temp$currentDict = i.left;
+									def = $temp$def;
+									currentDict = $temp$currentDict;
+									continue go;
+								}
+							}
+					}
+				}
+			});
+		return A2(go, $elm_community$intdict$IntDict$Empty, dict);
+	});
+var $author$project$Widget$ScrollingNav$current = F2(
+	function (fromString, _v0) {
+		var positions = _v0.positions;
+		var scrollPos = _v0.scrollPos;
+		return A2(
+			$elm$core$Maybe$andThen,
+			fromString,
+			A2(
+				$elm$core$Maybe$map,
+				$elm$core$Tuple$second,
+				A2(
+					$elm$core$Maybe$withDefault,
+					A2($elm_community$intdict$IntDict$after, scrollPos + 1, positions),
+					A2(
+						$elm$core$Maybe$map,
+						$elm$core$Maybe$Just,
+						A2($elm_community$intdict$IntDict$before, scrollPos + 1, positions)))));
+	});
+var $elm$core$List$head = function (list) {
+	if (list.b) {
+		var x = list.a;
+		var xs = list.b;
+		return $elm$core$Maybe$Just(x);
+	} else {
+		return $elm$core$Maybe$Nothing;
+	}
+};
+var $author$project$Widget$ScrollingNav$toSelect = F2(
+	function (onSelect, model) {
+		var arrangement = model.arrangement;
+		var toString = model.toString;
+		var fromString = model.fromString;
+		return {
+			onSelect: onSelect,
+			options: A2(
+				$elm$core$List$map,
+				function (s) {
+					return {
+						icon: $mdgriffith$elm_ui$Element$none,
+						text: toString(s)
+					};
+				},
+				arrangement),
+			selected: $elm$core$List$head(
+				A2(
+					$elm$core$List$filterMap,
+					function (_v0) {
+						var i = _v0.a;
+						var s = _v0.b;
+						return _Utils_eq(
+							$elm$core$Maybe$Just(s),
+							A2($author$project$Widget$ScrollingNav$current, fromString, model)) ? $elm$core$Maybe$Just(i) : $elm$core$Maybe$Nothing;
+					},
+					A2(
+						$elm$core$List$indexedMap,
+						F2(
+							function (i, s) {
+								return _Utils_Tuple2(i, s);
+							}),
+						arrangement)))
+		};
+	});
+var $avh4$elm_color$Color$RgbaSpace = F4(
+	function (a, b, c, d) {
+		return {$: 'RgbaSpace', a: a, b: b, c: c, d: d};
+	});
+var $avh4$elm_color$Color$scaleFrom255 = function (c) {
+	return c / 255;
+};
+var $avh4$elm_color$Color$rgb255 = F3(
+	function (r, g, b) {
+		return A4(
+			$avh4$elm_color$Color$RgbaSpace,
+			$avh4$elm_color$Color$scaleFrom255(r),
+			$avh4$elm_color$Color$scaleFrom255(g),
+			$avh4$elm_color$Color$scaleFrom255(b),
+			1.0);
+	});
+var $author$project$Widget$Style$Material$darkPalette = {
+	background: A3($avh4$elm_color$Color$rgb255, 18, 18, 18),
+	error: A3($avh4$elm_color$Color$rgb255, 207, 102, 121),
+	on: {
+		background: A3($avh4$elm_color$Color$rgb255, 255, 255, 255),
+		error: A3($avh4$elm_color$Color$rgb255, 0, 0, 0),
+		primary: A3($avh4$elm_color$Color$rgb255, 0, 0, 0),
+		secondary: A3($avh4$elm_color$Color$rgb255, 0, 0, 0),
+		surface: A3($avh4$elm_color$Color$rgb255, 255, 255, 255)
+	},
+	primary: A3($avh4$elm_color$Color$rgb255, 187, 134, 252),
+	secondary: A3($avh4$elm_color$Color$rgb255, 3, 218, 198),
+	surface: A3($avh4$elm_color$Color$rgb255, 18, 18, 18)
+};
+var $author$project$Widget$Style$Material$defaultPalette = {
+	background: A3($avh4$elm_color$Color$rgb255, 255, 255, 255),
+	error: A3($avh4$elm_color$Color$rgb255, 176, 0, 32),
+	on: {
+		background: A3($avh4$elm_color$Color$rgb255, 0, 0, 0),
+		error: A3($avh4$elm_color$Color$rgb255, 255, 255, 255),
+		primary: A3($avh4$elm_color$Color$rgb255, 255, 255, 255),
+		secondary: A3($avh4$elm_color$Color$rgb255, 0, 0, 0),
+		surface: A3($avh4$elm_color$Color$rgb255, 0, 0, 0)
+	},
+	primary: A3($avh4$elm_color$Color$rgb255, 98, 0, 238),
+	secondary: A3($avh4$elm_color$Color$rgb255, 3, 218, 198),
+	surface: A3($avh4$elm_color$Color$rgb255, 255, 255, 255)
+};
+var $mdgriffith$elm_ui$Internal$Flag$borderRound = $mdgriffith$elm_ui$Internal$Flag$flag(17);
+var $mdgriffith$elm_ui$Element$Border$rounded = function (radius) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$borderRound,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$Single,
+			'br-' + $elm$core$String$fromInt(radius),
+			'border-radius',
+			$elm$core$String$fromInt(radius) + 'px'));
+};
+var $Orasund$elm_ui_framework$Framework$Group$center = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Border$rounded(0)
+	]);
+var $mdgriffith$elm_ui$Internal$Model$Top = {$: 'Top'};
+var $mdgriffith$elm_ui$Element$alignTop = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$Top);
+var $Orasund$elm_ui_framework$Framework$Grid$compact = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+		$mdgriffith$elm_ui$Element$alignTop
+	]);
+var $mdgriffith$elm_ui$Element$Border$roundEach = function (_v0) {
+	var topLeft = _v0.topLeft;
+	var topRight = _v0.topRight;
+	var bottomLeft = _v0.bottomLeft;
+	var bottomRight = _v0.bottomRight;
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$borderRound,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$Single,
+			'br-' + ($elm$core$String$fromInt(topLeft) + ('-' + ($elm$core$String$fromInt(topRight) + ($elm$core$String$fromInt(bottomLeft) + ('-' + $elm$core$String$fromInt(bottomRight)))))),
+			'border-radius',
+			$elm$core$String$fromInt(topLeft) + ('px ' + ($elm$core$String$fromInt(topRight) + ('px ' + ($elm$core$String$fromInt(bottomRight) + ('px ' + ($elm$core$String$fromInt(bottomLeft) + 'px'))))))));
+};
+var $Orasund$elm_ui_framework$Framework$Group$left = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Border$roundEach(
+		{bottomLeft: 4, bottomRight: 0, topLeft: 4, topRight: 0})
+	]);
+var $Orasund$elm_ui_framework$Framework$Group$right = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Border$roundEach(
+		{bottomLeft: 0, bottomRight: 4, topLeft: 0, topRight: 4})
+	]);
+var $author$project$Data$Style$ElmUiFramework$buttonRow = {containerRow: $Orasund$elm_ui_framework$Framework$Grid$compact, element: _List_Nil, ifFirst: $Orasund$elm_ui_framework$Framework$Group$left, ifLast: $Orasund$elm_ui_framework$Framework$Group$right, otherwise: $Orasund$elm_ui_framework$Framework$Group$center};
+var $mdgriffith$elm_ui$Internal$Model$Focus = {$: 'Focus'};
 var $mdgriffith$elm_ui$Internal$Model$PseudoSelector = F2(
 	function (a, b) {
 		return {$: 'PseudoSelector', a: a, b: b};
 	});
-var $mdgriffith$elm_ui$Internal$Flag$hover = $mdgriffith$elm_ui$Internal$Flag$flag(33);
-var $mdgriffith$elm_ui$Internal$Model$Nearby = F2(
-	function (a, b) {
-		return {$: 'Nearby', a: a, b: b};
-	});
+var $mdgriffith$elm_ui$Internal$Flag$focus = $mdgriffith$elm_ui$Internal$Flag$flag(31);
 var $mdgriffith$elm_ui$Internal$Model$TransformComponent = F2(
 	function (a, b) {
 		return {$: 'TransformComponent', a: a, b: b};
@@ -13752,6 +14420,19 @@ var $mdgriffith$elm_ui$Internal$Model$unwrapDecorations = function (attrs) {
 		$mdgriffith$elm_ui$Internal$Model$Transform(transform),
 		styles);
 };
+var $mdgriffith$elm_ui$Element$focused = function (decs) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$focus,
+		A2(
+			$mdgriffith$elm_ui$Internal$Model$PseudoSelector,
+			$mdgriffith$elm_ui$Internal$Model$Focus,
+			$mdgriffith$elm_ui$Internal$Model$unwrapDecorations(decs)));
+};
+var $Orasund$elm_ui_framework$Framework$Color$grey = A3($mdgriffith$elm_ui$Element$rgb255, 122, 122, 122);
+var $mdgriffith$elm_ui$Element$htmlAttribute = $mdgriffith$elm_ui$Internal$Model$Attr;
+var $mdgriffith$elm_ui$Internal$Model$Hover = {$: 'Hover'};
+var $mdgriffith$elm_ui$Internal$Flag$hover = $mdgriffith$elm_ui$Internal$Flag$flag(33);
 var $mdgriffith$elm_ui$Element$mouseOver = function (decs) {
 	return A2(
 		$mdgriffith$elm_ui$Internal$Model$StyleClass,
@@ -13761,6 +14442,132 @@ var $mdgriffith$elm_ui$Element$mouseOver = function (decs) {
 			$mdgriffith$elm_ui$Internal$Model$Hover,
 			$mdgriffith$elm_ui$Internal$Model$unwrapDecorations(decs)));
 };
+var $Orasund$elm_ui_framework$Framework$Color$lightGrey = A3($mdgriffith$elm_ui$Element$rgb255, 219, 219, 219);
+var $Orasund$elm_ui_framework$Framework$Color$simple = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$lightGrey),
+		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$lightGrey)
+	]);
+var $elm$virtual_dom$VirtualDom$style = _VirtualDom_style;
+var $elm$html$Html$Attributes$style = $elm$virtual_dom$VirtualDom$style;
+var $Orasund$elm_ui_framework$Framework$Color$disabled = _Utils_ap(
+	$Orasund$elm_ui_framework$Framework$Color$simple,
+	_List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Font$color($Orasund$elm_ui_framework$Framework$Color$grey),
+			$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+			$mdgriffith$elm_ui$Element$focused(_List_Nil),
+			$mdgriffith$elm_ui$Element$htmlAttribute(
+			A2($elm$html$Html$Attributes$style, 'cursor', 'not-allowed'))
+		]));
+var $Orasund$elm_ui_framework$Framework$Color$primary = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$turquoise),
+		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$turquoise)
+	]);
+var $mdgriffith$elm_ui$Internal$Flag$fontAlignment = $mdgriffith$elm_ui$Internal$Flag$flag(12);
+var $mdgriffith$elm_ui$Element$Font$center = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$fontAlignment, $mdgriffith$elm_ui$Internal$Style$classes.textCenter);
+var $mdgriffith$elm_ui$Element$paddingXY = F2(
+	function (x, y) {
+		return _Utils_eq(x, y) ? A2(
+			$mdgriffith$elm_ui$Internal$Model$StyleClass,
+			$mdgriffith$elm_ui$Internal$Flag$padding,
+			A5(
+				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+				'p-' + $elm$core$String$fromInt(x),
+				x,
+				x,
+				x,
+				x)) : A2(
+			$mdgriffith$elm_ui$Internal$Model$StyleClass,
+			$mdgriffith$elm_ui$Internal$Flag$padding,
+			A5(
+				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+				'p-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y))),
+				y,
+				x,
+				y,
+				x));
+	});
+var $mdgriffith$elm_ui$Element$padding = function (x) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$padding,
+		A5(
+			$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+			'p-' + $elm$core$String$fromInt(x),
+			x,
+			x,
+			x,
+			x));
+};
+var $mdgriffith$elm_ui$Element$rgba = $mdgriffith$elm_ui$Internal$Model$Rgba;
+var $mdgriffith$elm_ui$Internal$Model$boxShadowClass = function (shadow) {
+	return $elm$core$String$concat(
+		_List_fromArray(
+			[
+				shadow.inset ? 'box-inset' : 'box-',
+				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.offset.a) + 'px',
+				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.offset.b) + 'px',
+				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.blur) + 'px',
+				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.size) + 'px',
+				$mdgriffith$elm_ui$Internal$Model$formatColorClass(shadow.color)
+			]));
+};
+var $mdgriffith$elm_ui$Internal$Flag$shadows = $mdgriffith$elm_ui$Internal$Flag$flag(19);
+var $mdgriffith$elm_ui$Element$Border$shadow = function (almostShade) {
+	var shade = {blur: almostShade.blur, color: almostShade.color, inset: false, offset: almostShade.offset, size: almostShade.size};
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$shadows,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$Single,
+			$mdgriffith$elm_ui$Internal$Model$boxShadowClass(shade),
+			'box-shadow',
+			$mdgriffith$elm_ui$Internal$Model$formatBoxShadow(shade)));
+};
+var $Orasund$elm_ui_framework$Framework$Tag$simple = _Utils_ap(
+	$Orasund$elm_ui_framework$Framework$Color$simple,
+	_List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Border$rounded(4),
+			A2($mdgriffith$elm_ui$Element$paddingXY, 7, 4)
+		]));
+var $mdgriffith$elm_ui$Internal$Model$BorderWidth = F5(
+	function (a, b, c, d, e) {
+		return {$: 'BorderWidth', a: a, b: b, c: c, d: d, e: e};
+	});
+var $mdgriffith$elm_ui$Element$Border$width = function (v) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$borderWidth,
+		A5(
+			$mdgriffith$elm_ui$Internal$Model$BorderWidth,
+			'b-' + $elm$core$String$fromInt(v),
+			v,
+			v,
+			v,
+			v));
+};
+var $Orasund$elm_ui_framework$Framework$Card$simple = _Utils_ap(
+	$Orasund$elm_ui_framework$Framework$Tag$simple,
+	_Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Color$light,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$shadow(
+				{
+					blur: 10,
+					color: A4($mdgriffith$elm_ui$Element$rgba, 0, 0, 0, 0.05),
+					offset: _Utils_Tuple2(0, 2),
+					size: 1
+				}),
+				$mdgriffith$elm_ui$Element$Border$width(1),
+				$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$lightGrey),
+				$mdgriffith$elm_ui$Element$alignTop,
+				$mdgriffith$elm_ui$Element$padding(20),
+				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
+			])));
 var $Orasund$elm_ui_framework$Framework$Button$simple = _Utils_ap(
 	$Orasund$elm_ui_framework$Framework$Card$simple,
 	_Utils_ap(
@@ -13775,39 +14582,203 @@ var $Orasund$elm_ui_framework$Framework$Button$simple = _Utils_ap(
 					])),
 				A2($mdgriffith$elm_ui$Element$paddingXY, 16, 12)
 			])));
+var $author$project$Data$Style$ElmUiFramework$buttonStyle = {
+	container: $Orasund$elm_ui_framework$Framework$Button$simple,
+	ifActive: $Orasund$elm_ui_framework$Framework$Color$primary,
+	ifDisabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
+	labelRow: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$spacing(8)
+		]),
+	otherwise: _List_Nil,
+	text: _List_Nil
+};
+var $Orasund$elm_ui_framework$Framework$Group$bottom = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Border$roundEach(
+		{bottomLeft: 4, bottomRight: 4, topLeft: 0, topRight: 0})
+	]);
+var $mdgriffith$elm_ui$Internal$Model$Max = F2(
+	function (a, b) {
+		return {$: 'Max', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Element$maximum = F2(
+	function (i, l) {
+		return A2($mdgriffith$elm_ui$Internal$Model$Max, i, l);
+	});
+var $mdgriffith$elm_ui$Internal$Model$Min = F2(
+	function (a, b) {
+		return {$: 'Min', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Element$minimum = F2(
+	function (i, l) {
+		return A2($mdgriffith$elm_ui$Internal$Model$Min, i, l);
+	});
+var $Orasund$elm_ui_framework$Framework$Card$withSize = function (_int) {
+	return _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Card$simple,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width(
+				A2(
+					$mdgriffith$elm_ui$Element$minimum,
+					240,
+					A2($mdgriffith$elm_ui$Element$maximum, _int, $mdgriffith$elm_ui$Element$fill)))
+			]));
+};
+var $Orasund$elm_ui_framework$Framework$Card$large = $Orasund$elm_ui_framework$Framework$Card$withSize(480);
+var $Orasund$elm_ui_framework$Framework$Group$top = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Border$roundEach(
+		{bottomLeft: 0, bottomRight: 0, topLeft: 4, topRight: 4})
+	]);
+var $author$project$Data$Style$ElmUiFramework$cardColumn = {
+	containerColumn: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Grid$compact,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
+			])),
+	element: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Card$large,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
+			])),
+	ifFirst: $Orasund$elm_ui_framework$Framework$Group$top,
+	ifLast: $Orasund$elm_ui_framework$Framework$Group$bottom,
+	otherwise: $Orasund$elm_ui_framework$Framework$Group$center
+};
 var $Orasund$elm_ui_framework$Framework$Grid$simple = _List_fromArray(
 	[
 		$mdgriffith$elm_ui$Element$spacing(10),
 		$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
 		$mdgriffith$elm_ui$Element$alignTop
 	]);
-var $elm$svg$Svg$rect = $elm$svg$Svg$trustedNode('rect');
-var $elm$svg$Svg$Attributes$rx = _VirtualDom_attribute('rx');
-var $elm$svg$Svg$Attributes$ry = _VirtualDom_attribute('ry');
-var $elm$svg$Svg$Attributes$x = _VirtualDom_attribute('x');
-var $elm$svg$Svg$Attributes$y = _VirtualDom_attribute('y');
-var $author$project$Icons$square = A2(
+var $author$project$Data$Style$ElmUiFramework$chipButtonStyle = {container: $Orasund$elm_ui_framework$Framework$Tag$simple, ifActive: $Orasund$elm_ui_framework$Framework$Color$primary, ifDisabled: _List_Nil, labelRow: $Orasund$elm_ui_framework$Framework$Grid$simple, otherwise: _List_Nil, text: _List_Nil};
+var $author$project$Data$Style$ElmUiFramework$column = {containerColumn: $Orasund$elm_ui_framework$Framework$Grid$compact, element: _List_Nil, ifFirst: $Orasund$elm_ui_framework$Framework$Group$top, ifLast: $Orasund$elm_ui_framework$Framework$Group$bottom, otherwise: $Orasund$elm_ui_framework$Framework$Group$center};
+var $Orasund$elm_ui_framework$Framework$Heading$h3 = $Orasund$elm_ui_framework$Framework$Heading$h(3);
+var $Orasund$elm_ui_framework$Framework$Color$green = A3($mdgriffith$elm_ui$Element$rgb255, 35, 209, 96);
+var $Orasund$elm_ui_framework$Framework$Color$success = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$green),
+		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$green)
+	]);
+var $author$project$Data$Style$ElmUiFramework$simpleButton = {
+	container: _Utils_ap($Orasund$elm_ui_framework$Framework$Button$simple, $Orasund$elm_ui_framework$Framework$Color$success),
+	ifActive: $Orasund$elm_ui_framework$Framework$Color$primary,
+	ifDisabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
+	labelRow: $Orasund$elm_ui_framework$Framework$Grid$simple,
+	otherwise: _List_Nil,
+	text: _List_Nil
+};
+var $author$project$Data$Style$ElmUiFramework$textButton = {container: $Orasund$elm_ui_framework$Framework$Button$simple, ifActive: $Orasund$elm_ui_framework$Framework$Color$primary, ifDisabled: $Orasund$elm_ui_framework$Framework$Color$disabled, labelRow: $Orasund$elm_ui_framework$Framework$Grid$simple, otherwise: _List_Nil, text: _List_Nil};
+var $author$project$Data$Style$ElmUiFramework$dialog = {
+	acceptButton: $author$project$Data$Style$ElmUiFramework$simpleButton,
+	buttonRow: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Grid$simple,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$paddingEach(
+				{bottom: 0, left: 0, right: 0, top: 28})
+			])),
+	containerColumn: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Card$simple,
+		_Utils_ap(
+			$Orasund$elm_ui_framework$Framework$Grid$simple,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$centerY,
+					$mdgriffith$elm_ui$Element$width(
+					A2(
+						$mdgriffith$elm_ui$Element$minimum,
+						280,
+						A2($mdgriffith$elm_ui$Element$maximum, 560, $mdgriffith$elm_ui$Element$fill)))
+				]))),
+	dismissButton: $author$project$Data$Style$ElmUiFramework$textButton,
+	text: _List_Nil,
+	title: $Orasund$elm_ui_framework$Framework$Heading$h3
+};
+var $elm$svg$Svg$Attributes$points = _VirtualDom_attribute('points');
+var $elm$svg$Svg$polyline = $elm$svg$Svg$trustedNode('polyline');
+var $author$project$Icons$chevronDown = A2(
 	$author$project$Icons$svgFeatherIcon,
-	'square',
+	'chevron-down',
 	_List_fromArray(
 		[
 			A2(
-			$elm$svg$Svg$rect,
+			$elm$svg$Svg$polyline,
 			_List_fromArray(
 				[
-					$elm$svg$Svg$Attributes$x('3'),
-					$elm$svg$Svg$Attributes$y('3'),
-					$elm$svg$Svg$Attributes$width('18'),
-					$elm$svg$Svg$Attributes$height('18'),
-					$elm$svg$Svg$Attributes$rx('2'),
-					$elm$svg$Svg$Attributes$ry('2')
+					$elm$svg$Svg$Attributes$points('6 9 12 15 18 9')
 				]),
 			_List_Nil)
 		]));
-var $mdgriffith$elm_ui$Element$Font$alignLeft = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$fontAlignment, $mdgriffith$elm_ui$Internal$Style$classes.textLeft);
-var $Orasund$elm_ui_framework$Framework$Group$center = _List_fromArray(
+var $author$project$Icons$chevronUp = A2(
+	$author$project$Icons$svgFeatherIcon,
+	'chevron-up',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$polyline,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$points('18 15 12 9 6 15')
+				]),
+			_List_Nil)
+		]));
+var $mdgriffith$elm_ui$Element$spaceEvenly = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$spacing, $mdgriffith$elm_ui$Internal$Style$classes.spaceEvenly);
+var $Orasund$elm_ui_framework$Framework$Grid$spacedEvenly = _List_fromArray(
 	[
-		$mdgriffith$elm_ui$Element$Border$rounded(0)
+		$mdgriffith$elm_ui$Element$spaceEvenly,
+		$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+		$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+		$mdgriffith$elm_ui$Element$centerX,
+		$mdgriffith$elm_ui$Element$centerY
+	]);
+var $author$project$Data$Style$ElmUiFramework$expansionPanelStyle = {
+	collapseIcon: A2(
+		$mdgriffith$elm_ui$Element$el,
+		_List_Nil,
+		$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronUp)),
+	containerColumn: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Card$simple,
+		_Utils_ap(
+			$Orasund$elm_ui_framework$Framework$Grid$simple,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
+				]))),
+	content: _List_Nil,
+	expandIcon: A2(
+		$mdgriffith$elm_ui$Element$el,
+		_List_Nil,
+		$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronDown)),
+	labelRow: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Grid$simple,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
+			])),
+	panelRow: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Grid$spacedEvenly,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
+			]))
+};
+var $mdgriffith$elm_ui$Internal$Model$Main = {$: 'Main'};
+var $mdgriffith$elm_ui$Element$Region$mainContent = $mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$Main);
+var $Orasund$elm_ui_framework$Framework$container = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$centerX,
+		$mdgriffith$elm_ui$Element$centerY,
+		$mdgriffith$elm_ui$Element$width(
+		A2($mdgriffith$elm_ui$Element$maximum, 1200, $mdgriffith$elm_ui$Element$fill)),
+		$mdgriffith$elm_ui$Element$padding(20),
+		$mdgriffith$elm_ui$Element$Region$mainContent,
+		$mdgriffith$elm_ui$Element$Background$color(
+		A3($mdgriffith$elm_ui$Element$rgb255, 255, 255, 255))
 	]);
 var $Orasund$elm_ui_framework$Framework$Color$dark = _List_fromArray(
 	[
@@ -13815,12 +14786,7 @@ var $Orasund$elm_ui_framework$Framework$Color$dark = _List_fromArray(
 		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$darkerGrey),
 		$mdgriffith$elm_ui$Element$Font$color($Orasund$elm_ui_framework$Framework$Color$lighterGrey)
 	]);
-var $Orasund$elm_ui_framework$Framework$Button$fill = _Utils_ap(
-	$Orasund$elm_ui_framework$Framework$Button$simple,
-	_List_fromArray(
-		[
-			$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-		]));
+var $Orasund$elm_ui_framework$Framework$Heading$h2 = $Orasund$elm_ui_framework$Framework$Heading$h(2);
 var $elm$svg$Svg$line = $elm$svg$Svg$trustedNode('line');
 var $elm$svg$Svg$Attributes$x1 = _VirtualDom_attribute('x1');
 var $elm$svg$Svg$Attributes$x2 = _VirtualDom_attribute('x2');
@@ -13862,6 +14828,70 @@ var $author$project$Icons$menu = A2(
 				]),
 			_List_Nil)
 		]));
+var $author$project$Data$Style$ElmUiFramework$menuButton = {
+	container: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Button$simple,
+		_Utils_ap($Orasund$elm_ui_framework$Framework$Group$center, $Orasund$elm_ui_framework$Framework$Color$dark)),
+	ifActive: $Orasund$elm_ui_framework$Framework$Color$primary,
+	ifDisabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
+	labelRow: $Orasund$elm_ui_framework$Framework$Grid$simple,
+	otherwise: _List_Nil,
+	text: _List_Nil
+};
+var $Orasund$elm_ui_framework$Framework$Color$black = A3($mdgriffith$elm_ui$Element$rgb255, 0, 0, 0);
+var $mdgriffith$elm_ui$Internal$Model$Px = function (a) {
+	return {$: 'Px', a: a};
+};
+var $mdgriffith$elm_ui$Element$px = $mdgriffith$elm_ui$Internal$Model$Px;
+var $mdgriffith$elm_ui$Element$Border$widthXY = F2(
+	function (x, y) {
+		return A2(
+			$mdgriffith$elm_ui$Internal$Model$StyleClass,
+			$mdgriffith$elm_ui$Internal$Flag$borderWidth,
+			A5(
+				$mdgriffith$elm_ui$Internal$Model$BorderWidth,
+				'b-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y))),
+				y,
+				x,
+				y,
+				x));
+	});
+var $mdgriffith$elm_ui$Element$Border$widthEach = function (_v0) {
+	var bottom = _v0.bottom;
+	var top = _v0.top;
+	var left = _v0.left;
+	var right = _v0.right;
+	return (_Utils_eq(top, bottom) && _Utils_eq(left, right)) ? (_Utils_eq(top, right) ? $mdgriffith$elm_ui$Element$Border$width(top) : A2($mdgriffith$elm_ui$Element$Border$widthXY, left, top)) : A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$borderWidth,
+		A5(
+			$mdgriffith$elm_ui$Internal$Model$BorderWidth,
+			'b-' + ($elm$core$String$fromInt(top) + ('-' + ($elm$core$String$fromInt(right) + ('-' + ($elm$core$String$fromInt(bottom) + ('-' + $elm$core$String$fromInt(left))))))),
+			top,
+			right,
+			bottom,
+			left));
+};
+var $author$project$Data$Style$ElmUiFramework$menuTabButton = {
+	container: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$height(
+			$mdgriffith$elm_ui$Element$px(42)),
+			$mdgriffith$elm_ui$Element$Border$widthEach(
+			{bottom: 4, left: 0, right: 0, top: 0}),
+			$mdgriffith$elm_ui$Element$paddingEach(
+			{bottom: 4, left: 8, right: 8, top: 12}),
+			$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$black)
+		]),
+	ifActive: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$turquoise)
+		]),
+	ifDisabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
+	labelRow: $Orasund$elm_ui_framework$Framework$Grid$simple,
+	otherwise: _List_Nil,
+	text: _List_Nil
+};
 var $author$project$Icons$moreVertical = A2(
 	$author$project$Icons$svgFeatherIcon,
 	'more-vertical',
@@ -13895,41 +14925,82 @@ var $author$project$Icons$moreVertical = A2(
 				]),
 			_List_Nil)
 		]));
-var $Orasund$elm_ui_framework$Framework$Color$primary = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$turquoise),
-		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$turquoise)
-	]);
-var $mdgriffith$elm_ui$Element$Border$widthXY = F2(
-	function (x, y) {
-		return A2(
-			$mdgriffith$elm_ui$Internal$Model$StyleClass,
-			$mdgriffith$elm_ui$Internal$Flag$borderWidth,
-			A5(
-				$mdgriffith$elm_ui$Internal$Model$BorderWidth,
-				'b-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y))),
-				y,
-				x,
-				y,
-				x));
-	});
-var $mdgriffith$elm_ui$Element$Border$widthEach = function (_v0) {
-	var bottom = _v0.bottom;
-	var top = _v0.top;
-	var left = _v0.left;
-	var right = _v0.right;
-	return (_Utils_eq(top, bottom) && _Utils_eq(left, right)) ? (_Utils_eq(top, right) ? $mdgriffith$elm_ui$Element$Border$width(top) : A2($mdgriffith$elm_ui$Element$Border$widthXY, left, top)) : A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$borderWidth,
-		A5(
-			$mdgriffith$elm_ui$Internal$Model$BorderWidth,
-			'b-' + ($elm$core$String$fromInt(top) + ('-' + ($elm$core$String$fromInt(right) + ('-' + ($elm$core$String$fromInt(bottom) + ('-' + $elm$core$String$fromInt(left))))))),
-			top,
-			right,
-			bottom,
-			left));
+var $author$project$Icons$search = A2(
+	$author$project$Icons$svgFeatherIcon,
+	'search',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$circle,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$cx('11'),
+					$elm$svg$Svg$Attributes$cy('11'),
+					$elm$svg$Svg$Attributes$r('8')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$line,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$x1('21'),
+					$elm$svg$Svg$Attributes$y1('21'),
+					$elm$svg$Svg$Attributes$x2('16.65'),
+					$elm$svg$Svg$Attributes$y2('16.65')
+				]),
+			_List_Nil)
+		]));
+var $mdgriffith$elm_ui$Element$Font$alignLeft = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$fontAlignment, $mdgriffith$elm_ui$Internal$Style$classes.textLeft);
+var $Orasund$elm_ui_framework$Framework$Button$fill = _Utils_ap(
+	$Orasund$elm_ui_framework$Framework$Button$simple,
+	_List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+		]));
+var $author$project$Data$Style$ElmUiFramework$sheetButton = {
+	container: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Button$fill,
+		_Utils_ap(
+			$Orasund$elm_ui_framework$Framework$Group$center,
+			_Utils_ap(
+				$Orasund$elm_ui_framework$Framework$Color$light,
+				_List_fromArray(
+					[$mdgriffith$elm_ui$Element$Font$alignLeft])))),
+	ifActive: $Orasund$elm_ui_framework$Framework$Color$primary,
+	ifDisabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
+	labelRow: $Orasund$elm_ui_framework$Framework$Grid$simple,
+	otherwise: _List_Nil,
+	text: _List_Nil
 };
-var $author$project$Example$style = {
+var $author$project$Data$Style$ElmUiFramework$snackbarButton = {
+	container: _Utils_ap($Orasund$elm_ui_framework$Framework$Button$simple, $Orasund$elm_ui_framework$Framework$Color$dark),
+	ifActive: $Orasund$elm_ui_framework$Framework$Color$primary,
+	ifDisabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
+	labelRow: $Orasund$elm_ui_framework$Framework$Grid$simple,
+	otherwise: _List_Nil,
+	text: _List_Nil
+};
+var $author$project$Data$Style$ElmUiFramework$snackbar = {
+	button: $author$project$Data$Style$ElmUiFramework$snackbarButton,
+	containerRow: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Card$simple,
+		_Utils_ap(
+			$Orasund$elm_ui_framework$Framework$Color$dark,
+			_Utils_ap(
+				$Orasund$elm_ui_framework$Framework$Grid$simple,
+				_List_fromArray(
+					[
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 6),
+						$mdgriffith$elm_ui$Element$height(
+						$mdgriffith$elm_ui$Element$px(54))
+					])))),
+	text: _List_fromArray(
+		[
+			A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+		])
+};
+var $author$project$Data$Style$ElmUiFramework$layout = {
+	container: _List_Nil,
 	header: _Utils_ap(
 		$Orasund$elm_ui_framework$Framework$container,
 		_Utils_ap(
@@ -13941,18 +15012,33 @@ var $author$project$Example$style = {
 					$mdgriffith$elm_ui$Element$px(42))
 				]))),
 	layout: $Orasund$elm_ui_framework$Framework$responsiveLayout,
-	menuButton: _Utils_ap(
-		$Orasund$elm_ui_framework$Framework$Button$simple,
-		_Utils_ap($Orasund$elm_ui_framework$Framework$Group$center, $Orasund$elm_ui_framework$Framework$Color$dark)),
-	menuButtonSelected: $Orasund$elm_ui_framework$Framework$Color$primary,
+	menuButton: $author$project$Data$Style$ElmUiFramework$menuButton,
 	menuIcon: A2(
 		$mdgriffith$elm_ui$Element$el,
 		_List_Nil,
 		$mdgriffith$elm_ui$Element$html($author$project$Icons$menu)),
+	menuTabButton: $author$project$Data$Style$ElmUiFramework$menuTabButton,
 	moreVerticalIcon: A2(
 		$mdgriffith$elm_ui$Element$el,
 		_List_Nil,
 		$mdgriffith$elm_ui$Element$html($author$project$Icons$moreVertical)),
+	search: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Color$simple,
+		_Utils_ap(
+			$Orasund$elm_ui_framework$Framework$Card$large,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					A3($mdgriffith$elm_ui$Element$rgb255, 0, 0, 0)),
+					$mdgriffith$elm_ui$Element$padding(6),
+					$mdgriffith$elm_ui$Element$centerY,
+					$mdgriffith$elm_ui$Element$alignRight
+				]))),
+	searchFill: _Utils_ap($Orasund$elm_ui_framework$Framework$Color$light, $Orasund$elm_ui_framework$Framework$Group$center),
+	searchIcon: A2(
+		$mdgriffith$elm_ui$Element$el,
+		_List_Nil,
+		$mdgriffith$elm_ui$Element$html($author$project$Icons$search)),
 	sheet: _Utils_ap(
 		$Orasund$elm_ui_framework$Framework$Color$light,
 		_List_fromArray(
@@ -13960,119 +15046,1895 @@ var $author$project$Example$style = {
 				$mdgriffith$elm_ui$Element$width(
 				A2($mdgriffith$elm_ui$Element$maximum, 256, $mdgriffith$elm_ui$Element$fill))
 			])),
-	sheetButton: _Utils_ap(
-		$Orasund$elm_ui_framework$Framework$Button$fill,
-		_Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Group$center,
-			_Utils_ap(
-				$Orasund$elm_ui_framework$Framework$Color$light,
-				_List_fromArray(
-					[$mdgriffith$elm_ui$Element$Font$alignLeft])))),
-	sheetButtonSelected: $Orasund$elm_ui_framework$Framework$Color$primary,
-	snackbar: _Utils_ap($Orasund$elm_ui_framework$Framework$Card$simple, $Orasund$elm_ui_framework$Framework$Color$dark),
+	sheetButton: $author$project$Data$Style$ElmUiFramework$sheetButton,
+	snackbar: $author$project$Data$Style$ElmUiFramework$snackbar,
 	spacing: 8,
-	tabButton: _List_fromArray(
+	title: $Orasund$elm_ui_framework$Framework$Heading$h2
+};
+var $author$project$Data$Style$ElmUiFramework$row = {containerRow: $Orasund$elm_ui_framework$Framework$Grid$simple, element: _List_Nil, ifFirst: $Orasund$elm_ui_framework$Framework$Group$left, ifLast: $Orasund$elm_ui_framework$Framework$Group$right, otherwise: $Orasund$elm_ui_framework$Framework$Group$center};
+var $author$project$Data$Style$ElmUiFramework$tabButtonStyle = {
+	container: _Utils_ap($Orasund$elm_ui_framework$Framework$Button$simple, $Orasund$elm_ui_framework$Framework$Group$top),
+	ifActive: $Orasund$elm_ui_framework$Framework$Color$primary,
+	ifDisabled: $Orasund$elm_ui_framework$Framework$Color$disabled,
+	labelRow: _List_fromArray(
 		[
-			$mdgriffith$elm_ui$Element$height(
-			$mdgriffith$elm_ui$Element$px(42)),
-			$mdgriffith$elm_ui$Element$Border$widthEach(
-			{bottom: 8, left: 0, right: 0, top: 0})
+			$mdgriffith$elm_ui$Element$spacing(8)
 		]),
-	tabButtonSelected: _List_fromArray(
+	otherwise: _List_Nil,
+	text: _List_Nil
+};
+var $author$project$Data$Style$ElmUiFramework$sortTable = {
+	ascIcon: A2(
+		$mdgriffith$elm_ui$Element$el,
+		_List_Nil,
+		$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronUp)),
+	containerTable: $Orasund$elm_ui_framework$Framework$Grid$simple,
+	defaultIcon: $mdgriffith$elm_ui$Element$none,
+	descIcon: A2(
+		$mdgriffith$elm_ui$Element$el,
+		_List_Nil,
+		$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronDown)),
+	headerButton: $author$project$Data$Style$ElmUiFramework$tabButtonStyle
+};
+var $Orasund$elm_ui_framework$Framework$Card$small = $Orasund$elm_ui_framework$Framework$Card$withSize(240);
+var $author$project$Data$Style$ElmUiFramework$tab = {
+	button: $author$project$Data$Style$ElmUiFramework$tabButtonStyle,
+	containerColumn: $Orasund$elm_ui_framework$Framework$Grid$compact,
+	content: _Utils_ap($Orasund$elm_ui_framework$Framework$Card$small, $Orasund$elm_ui_framework$Framework$Group$bottom),
+	optionRow: $Orasund$elm_ui_framework$Framework$Grid$simple
+};
+var $author$project$Data$Style$ElmUiFramework$textInputStyle = {
+	chipButton: $author$project$Data$Style$ElmUiFramework$chipButtonStyle,
+	chipsRow: _List_fromArray(
 		[
-			$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$turquoise)
+			$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+			$mdgriffith$elm_ui$Element$spacing(4),
+			$mdgriffith$elm_ui$Element$paddingEach(
+			{bottom: 8, left: 0, right: 0, top: 8})
+		]),
+	containerRow: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Button$simple,
+		_Utils_ap(
+			$Orasund$elm_ui_framework$Framework$Color$light,
+			_Utils_ap(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Border$color(
+						A3($mdgriffith$elm_ui$Element$rgb255, 186, 189, 182)),
+						$mdgriffith$elm_ui$Element$Font$alignLeft,
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0),
+						$mdgriffith$elm_ui$Element$height(
+						$mdgriffith$elm_ui$Element$px(42))
+					]),
+				$Orasund$elm_ui_framework$Framework$Grid$simple))),
+	input: _Utils_ap(
+		$Orasund$elm_ui_framework$Framework$Color$light,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$padding(8)
+			]))
+};
+var $author$project$Data$Style$ElmUiFramework$style = {button: $author$project$Data$Style$ElmUiFramework$buttonStyle, buttonRow: $author$project$Data$Style$ElmUiFramework$buttonRow, cardColumn: $author$project$Data$Style$ElmUiFramework$cardColumn, chipButton: $author$project$Data$Style$ElmUiFramework$chipButtonStyle, column: $author$project$Data$Style$ElmUiFramework$column, dialog: $author$project$Data$Style$ElmUiFramework$dialog, expansionPanel: $author$project$Data$Style$ElmUiFramework$expansionPanelStyle, layout: $author$project$Data$Style$ElmUiFramework$layout, primaryButton: $author$project$Data$Style$ElmUiFramework$simpleButton, row: $author$project$Data$Style$ElmUiFramework$row, selectButton: $author$project$Data$Style$ElmUiFramework$buttonStyle, sortTable: $author$project$Data$Style$ElmUiFramework$sortTable, tab: $author$project$Data$Style$ElmUiFramework$tab, textInput: $author$project$Data$Style$ElmUiFramework$textInputStyle};
+var $mdgriffith$elm_ui$Internal$Model$Bottom = {$: 'Bottom'};
+var $mdgriffith$elm_ui$Element$alignBottom = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$Bottom);
+var $mdgriffith$elm_ui$Internal$Flag$letterSpacing = $mdgriffith$elm_ui$Internal$Flag$flag(16);
+var $mdgriffith$elm_ui$Element$Font$letterSpacing = function (offset) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$letterSpacing,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$Single,
+			'ls-' + $mdgriffith$elm_ui$Internal$Model$floatClass(offset),
+			'letter-spacing',
+			$elm$core$String$fromFloat(offset) + 'px'));
+};
+var $mdgriffith$elm_ui$Element$Font$semiBold = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$fontWeight, $mdgriffith$elm_ui$Internal$Style$classes.textSemiBold);
+var $author$project$Widget$Style$Material$buttonFont = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$htmlAttribute(
+		A2($elm$html$Html$Attributes$style, 'text-transform', 'uppercase')),
+		$mdgriffith$elm_ui$Element$Font$size(14),
+		$mdgriffith$elm_ui$Element$Font$semiBold,
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(1.25)
+	]);
+var $author$project$Widget$Style$Material$baseButton = function (_v0) {
+	return {
+		container: _Utils_ap(
+			$author$project$Widget$Style$Material$buttonFont,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(36)),
+					A2($mdgriffith$elm_ui$Element$paddingXY, 8, 8),
+					$mdgriffith$elm_ui$Element$Border$rounded(4)
+				])),
+		ifActive: _List_Nil,
+		ifDisabled: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$htmlAttribute(
+				A2($elm$html$Html$Attributes$style, 'cursor', 'not-allowed'))
+			]),
+		labelRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(8),
+				$mdgriffith$elm_ui$Element$width(
+				A2($mdgriffith$elm_ui$Element$minimum, 32, $mdgriffith$elm_ui$Element$shrink)),
+				$mdgriffith$elm_ui$Element$centerY
+			]),
+		otherwise: _List_Nil,
+		text: _List_fromArray(
+			[$mdgriffith$elm_ui$Element$centerX])
+	};
+};
+var $author$project$Widget$Style$Material$buttonDisabledOpacity = 0.38;
+var $author$project$Widget$Style$Material$buttonFocusOpacity = 0.24;
+var $author$project$Widget$Style$Material$buttonHoverOpacity = 0.08;
+var $author$project$Widget$Style$Material$buttonPressedOpacity = 0.32;
+var $mdgriffith$elm_ui$Element$fromRgb = function (clr) {
+	return A4($mdgriffith$elm_ui$Internal$Model$Rgba, clr.red, clr.green, clr.blue, clr.alpha);
+};
+var $avh4$elm_color$Color$toRgba = function (_v0) {
+	var r = _v0.a;
+	var g = _v0.b;
+	var b = _v0.c;
+	var a = _v0.d;
+	return {alpha: a, blue: b, green: g, red: r};
+};
+var $author$project$Widget$Style$Material$fromColor = A2($elm$core$Basics$composeR, $avh4$elm_color$Color$toRgba, $mdgriffith$elm_ui$Element$fromRgb);
+var $author$project$Widget$Style$Material$gray = A3($avh4$elm_color$Color$rgb255, 119, 119, 119);
+var $mdgriffith$elm_ui$Internal$Model$Active = {$: 'Active'};
+var $mdgriffith$elm_ui$Internal$Flag$active = $mdgriffith$elm_ui$Internal$Flag$flag(32);
+var $mdgriffith$elm_ui$Element$mouseDown = function (decs) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$active,
+		A2(
+			$mdgriffith$elm_ui$Internal$Model$PseudoSelector,
+			$mdgriffith$elm_ui$Internal$Model$Active,
+			$mdgriffith$elm_ui$Internal$Model$unwrapDecorations(decs)));
+};
+var $avh4$elm_color$Color$fromRgba = function (components) {
+	return A4($avh4$elm_color$Color$RgbaSpace, components.red, components.green, components.blue, components.alpha);
+};
+var $author$project$Widget$Style$Material$scaleOpacity = function (opacity) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$avh4$elm_color$Color$toRgba,
+		A2(
+			$elm$core$Basics$composeR,
+			function (color) {
+				return _Utils_update(
+					color,
+					{alpha: color.alpha * opacity});
+			},
+			$avh4$elm_color$Color$fromRgba));
+};
+var $author$project$Widget$Style$Material$shadow = function (_float) {
+	return {
+		blur: _float,
+		color: A4($mdgriffith$elm_ui$Element$rgba255, 0, 0, 0, 0.2),
+		offset: _Utils_Tuple2(0, _float),
+		size: 0
+	};
+};
+var $elm$core$Basics$pow = _Basics_pow;
+var $noahzgordon$elm_color_extra$Color$Accessibility$luminance = function (cl) {
+	var f = function (intensity) {
+		return (intensity <= 0.03928) ? (intensity / 12.92) : A2($elm$core$Basics$pow, (intensity + 0.055) / 1.055, 2.4);
+	};
+	var _v0 = function (a) {
+		return _Utils_Tuple3(
+			f(a.red),
+			f(a.green),
+			f(a.blue));
+	}(
+		$avh4$elm_color$Color$toRgba(cl));
+	var r = _v0.a;
+	var g = _v0.b;
+	var b = _v0.c;
+	return ((0.2126 * r) + (0.7152 * g)) + (0.0722 * b);
+};
+var $author$project$Widget$Style$Material$accessibleTextColor = function (color) {
+	var l = 1 + ($avh4$elm_color$Color$toRgba(color).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(color) - 1));
+	return ((1.05 / (l + 0.05)) < 7) ? A3($avh4$elm_color$Color$rgb255, 0, 0, 0) : A3($avh4$elm_color$Color$rgb255, 255, 255, 255);
+};
+var $author$project$Widget$Style$Material$textAndBackground = function (color) {
+	return _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Background$color(
+			$author$project$Widget$Style$Material$fromColor(color)),
+			$mdgriffith$elm_ui$Element$Font$color(
+			$author$project$Widget$Style$Material$fromColor(
+				$author$project$Widget$Style$Material$accessibleTextColor(color)))
+		]);
+};
+var $elm$core$Basics$cos = _Basics_cos;
+var $noahzgordon$elm_color_extra$Color$Convert$labToXyz = function (_v0) {
+	var l = _v0.l;
+	var a = _v0.a;
+	var b = _v0.b;
+	var y = (l + 16) / 116;
+	var c = function (ch) {
+		var ch_ = (ch * ch) * ch;
+		return (ch_ > 8.856e-3) ? ch_ : ((ch - (16 / 116)) / 7.787);
+	};
+	return {
+		x: c(y + (a / 500)) * 95.047,
+		y: c(y) * 100,
+		z: c(y - (b / 200)) * 108.883
+	};
+};
+var $avh4$elm_color$Color$rgb = F3(
+	function (r, g, b) {
+		return A4($avh4$elm_color$Color$RgbaSpace, r, g, b, 1.0);
+	});
+var $noahzgordon$elm_color_extra$Color$Convert$xyzToColor = function (_v0) {
+	var x = _v0.x;
+	var y = _v0.y;
+	var z = _v0.z;
+	var z_ = z / 100;
+	var y_ = y / 100;
+	var x_ = x / 100;
+	var r = ((x_ * 3.2404542) + (y_ * (-1.5371385))) + (z_ * (-0.4986));
+	var g = ((x_ * (-0.969266)) + (y_ * 1.8760108)) + (z_ * 4.1556e-2);
+	var c = function (ch) {
+		var ch_ = (ch > 3.1308e-3) ? ((1.055 * A2($elm$core$Basics$pow, ch, 1 / 2.4)) - 5.5e-2) : (12.92 * ch);
+		return A3($elm$core$Basics$clamp, 0, 1, ch_);
+	};
+	var b = ((x_ * 5.56434e-2) + (y_ * (-0.2040259))) + (z_ * 1.0572252);
+	return A3(
+		$avh4$elm_color$Color$rgb,
+		c(r),
+		c(g),
+		c(b));
+};
+var $noahzgordon$elm_color_extra$Color$Convert$labToColor = A2($elm$core$Basics$composeR, $noahzgordon$elm_color_extra$Color$Convert$labToXyz, $noahzgordon$elm_color_extra$Color$Convert$xyzToColor);
+var $elm$core$Basics$sin = _Basics_sin;
+var $author$project$Widget$Style$Material$fromCIELCH = A2(
+	$elm$core$Basics$composeR,
+	function (_v0) {
+		var l = _v0.l;
+		var c = _v0.c;
+		var h = _v0.h;
+		return {
+			a: c * $elm$core$Basics$cos(h),
+			b: c * $elm$core$Basics$sin(h),
+			l: l
+		};
+	},
+	$noahzgordon$elm_color_extra$Color$Convert$labToColor);
+var $elm$core$Basics$atan2 = _Basics_atan2;
+var $noahzgordon$elm_color_extra$Color$Convert$colorToXyz = function (cl) {
+	var c = function (ch) {
+		var ch_ = (ch > 4.045e-2) ? A2($elm$core$Basics$pow, (ch + 5.5e-2) / 1.055, 2.4) : (ch / 12.92);
+		return ch_ * 100;
+	};
+	var _v0 = $avh4$elm_color$Color$toRgba(cl);
+	var red = _v0.red;
+	var green = _v0.green;
+	var blue = _v0.blue;
+	var b = c(blue);
+	var g = c(green);
+	var r = c(red);
+	return {x: ((r * 0.4124) + (g * 0.3576)) + (b * 0.1805), y: ((r * 0.2126) + (g * 0.7152)) + (b * 7.22e-2), z: ((r * 1.93e-2) + (g * 0.1192)) + (b * 0.9505)};
+};
+var $noahzgordon$elm_color_extra$Color$Convert$xyzToLab = function (_v0) {
+	var x = _v0.x;
+	var y = _v0.y;
+	var z = _v0.z;
+	var c = function (ch) {
+		return (ch > 8.856e-3) ? A2($elm$core$Basics$pow, ch, 1 / 3) : ((7.787 * ch) + (16 / 116));
+	};
+	var x_ = c(x / 95.047);
+	var y_ = c(y / 100);
+	var z_ = c(z / 108.883);
+	return {a: 500 * (x_ - y_), b: 200 * (y_ - z_), l: (116 * y_) - 16};
+};
+var $noahzgordon$elm_color_extra$Color$Convert$colorToLab = A2($elm$core$Basics$composeR, $noahzgordon$elm_color_extra$Color$Convert$colorToXyz, $noahzgordon$elm_color_extra$Color$Convert$xyzToLab);
+var $elm$core$Basics$sqrt = _Basics_sqrt;
+var $author$project$Widget$Style$Material$toCIELCH = A2(
+	$elm$core$Basics$composeR,
+	$noahzgordon$elm_color_extra$Color$Convert$colorToLab,
+	function (_v0) {
+		var l = _v0.l;
+		var a = _v0.a;
+		var b = _v0.b;
+		return {
+			c: $elm$core$Basics$sqrt((a * a) + (b * b)),
+			h: A2($elm$core$Basics$atan2, b, a),
+			l: l
+		};
+	});
+var $author$project$Widget$Style$Material$withShade = F3(
+	function (c2, amount, c1) {
+		var fun = F2(
+			function (a, b) {
+				return {c: ((a.c * (1 - amount)) + (b.c * amount)) / 1, h: ((a.h * (1 - amount)) + (b.h * amount)) / 1, l: ((a.l * (1 - amount)) + (b.l * amount)) / 1};
+			});
+		var alpha = $avh4$elm_color$Color$toRgba(c1).alpha;
+		return $avh4$elm_color$Color$fromRgba(
+			function (color) {
+				return _Utils_update(
+					color,
+					{alpha: alpha});
+			}(
+				$avh4$elm_color$Color$toRgba(
+					$author$project$Widget$Style$Material$fromCIELCH(
+						A2(
+							fun,
+							$author$project$Widget$Style$Material$toCIELCH(c1),
+							$author$project$Widget$Style$Material$toCIELCH(c2))))));
+	});
+var $author$project$Widget$Style$Material$containedButton = function (palette) {
+	return {
+		container: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).container,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$shadow(
+					$author$project$Widget$Style$Material$shadow(2)),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_Utils_ap(
+						$author$project$Widget$Style$Material$textAndBackground(
+							A3($author$project$Widget$Style$Material$withShade, palette.on.primary, $author$project$Widget$Style$Material$buttonPressedOpacity, palette.primary)),
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Border$shadow(
+								$author$project$Widget$Style$Material$shadow(12))
+							]))),
+					$mdgriffith$elm_ui$Element$focused(
+					_Utils_ap(
+						$author$project$Widget$Style$Material$textAndBackground(
+							A3($author$project$Widget$Style$Material$withShade, palette.on.primary, $author$project$Widget$Style$Material$buttonFocusOpacity, palette.primary)),
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Border$shadow(
+								$author$project$Widget$Style$Material$shadow(6))
+							]))),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_Utils_ap(
+						$author$project$Widget$Style$Material$textAndBackground(
+							A3($author$project$Widget$Style$Material$withShade, palette.on.primary, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary)),
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Border$shadow(
+								$author$project$Widget$Style$Material$shadow(6))
+							])))
+				])),
+		ifActive: $author$project$Widget$Style$Material$textAndBackground(
+			A3($author$project$Widget$Style$Material$withShade, palette.on.primary, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary)),
+		ifDisabled: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Style$Material$fromColor(
+						A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonDisabledOpacity, $author$project$Widget$Style$Material$gray))),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray)),
+					$mdgriffith$elm_ui$Element$Border$shadow(
+					$author$project$Widget$Style$Material$shadow(0)),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		labelRow: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).labelRow,
+			_List_fromArray(
+				[
+					A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+				])),
+		otherwise: $author$project$Widget$Style$Material$textAndBackground(palette.primary),
+		text: $author$project$Widget$Style$Material$baseButton(palette).text
+	};
+};
+var $author$project$Widget$Style$Material$h6 = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Font$size(20),
+		$mdgriffith$elm_ui$Element$Font$semiBold,
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.15)
+	]);
+var $author$project$Widget$Style$Material$textButton = function (palette) {
+	return {
+		container: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).container,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor(palette.primary)),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary)))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Style$Material$fromColor(
+					A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary)))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray)),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		labelRow: $author$project$Widget$Style$Material$baseButton(palette).labelRow,
+		otherwise: _List_Nil,
+		text: $author$project$Widget$Style$Material$baseButton(palette).text
+	};
+};
+var $author$project$Widget$Style$Material$alertDialog = function (palette) {
+	return {
+		acceptButton: $author$project$Widget$Style$Material$containedButton(palette),
+		buttonRow: _List_fromArray(
+			[
+				A2($mdgriffith$elm_ui$Element$paddingXY, 8, 8),
+				$mdgriffith$elm_ui$Element$spacing(8),
+				$mdgriffith$elm_ui$Element$alignRight,
+				$mdgriffith$elm_ui$Element$alignBottom
+			]),
+		containerColumn: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$rounded(4),
+				$mdgriffith$elm_ui$Element$width(
+				A2(
+					$mdgriffith$elm_ui$Element$minimum,
+					280,
+					A2($mdgriffith$elm_ui$Element$maximum, 560, $mdgriffith$elm_ui$Element$fill))),
+				$mdgriffith$elm_ui$Element$height(
+				A2($mdgriffith$elm_ui$Element$minimum, 182, $mdgriffith$elm_ui$Element$shrink)),
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Style$Material$fromColor(palette.surface))
+			]),
+		dismissButton: $author$project$Widget$Style$Material$textButton(palette),
+		text: _List_fromArray(
+			[
+				A2($mdgriffith$elm_ui$Element$paddingXY, 24, 0)
+			]),
+		title: _Utils_ap(
+			$author$project$Widget$Style$Material$h6,
+			_List_fromArray(
+				[
+					A2($mdgriffith$elm_ui$Element$paddingXY, 24, 20)
+				]))
+	};
+};
+var $author$project$Widget$Style$Material$buttonRow = {
+	containerRow: _List_Nil,
+	element: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Border$rounded(2)
+		]),
+	ifFirst: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Border$roundEach(
+			{bottomLeft: 2, bottomRight: 0, topLeft: 2, topRight: 0})
+		]),
+	ifLast: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Border$roundEach(
+			{bottomLeft: 0, bottomRight: 2, topLeft: 0, topRight: 2})
+		]),
+	otherwise: _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Border$rounded(0)
 		])
 };
-var $mdgriffith$elm_ui$Element$text = function (content) {
-	return $mdgriffith$elm_ui$Internal$Model$Text(content);
+var $author$project$Widget$Style$Material$cardColumn = function (palette) {
+	return {
+		containerColumn: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$mouseOver(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Border$shadow(
+						$author$project$Widget$Style$Material$shadow(4))
+					])),
+				$mdgriffith$elm_ui$Element$alignTop,
+				$mdgriffith$elm_ui$Element$Border$rounded(4)
+			]),
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$padding(16),
+				$mdgriffith$elm_ui$Element$Border$rounded(4),
+				$mdgriffith$elm_ui$Element$Border$width(1),
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Style$Material$fromColor(palette.surface)),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Style$Material$fromColor(
+					$author$project$Widget$Style$Material$accessibleTextColor(palette.surface))),
+				$mdgriffith$elm_ui$Element$Border$color(
+				$author$project$Widget$Style$Material$fromColor(
+					A2($author$project$Widget$Style$Material$scaleOpacity, 0.14, palette.on.surface))),
+				$mdgriffith$elm_ui$Element$width(
+				A2($mdgriffith$elm_ui$Element$minimum, 344, $mdgriffith$elm_ui$Element$fill))
+			]),
+		ifFirst: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$roundEach(
+				{bottomLeft: 0, bottomRight: 0, topLeft: 4, topRight: 4})
+			]),
+		ifLast: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$roundEach(
+				{bottomLeft: 4, bottomRight: 4, topLeft: 0, topRight: 0}),
+				$mdgriffith$elm_ui$Element$Border$widthEach(
+				{bottom: 1, left: 1, right: 1, top: 0})
+			]),
+		otherwise: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$rounded(0),
+				$mdgriffith$elm_ui$Element$Border$widthEach(
+				{bottom: 1, left: 1, right: 1, top: 0})
+			])
+	};
 };
-var $author$project$Icons$triangle = A2(
-	$author$project$Icons$svgFeatherIcon,
-	'triangle',
+var $author$project$Widget$Style$Material$buttonSelectedOpacity = 0.16;
+var $author$project$Widget$Style$Material$chip = function (palette) {
+	return {
+		container: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(32)),
+				$mdgriffith$elm_ui$Element$paddingEach(
+				{bottom: 0, left: 4, right: 12, top: 0}),
+				$mdgriffith$elm_ui$Element$Border$rounded(16),
+				$mdgriffith$elm_ui$Element$mouseDown(
+				$author$project$Widget$Style$Material$textAndBackground(
+					A3(
+						$author$project$Widget$Style$Material$withShade,
+						palette.on.surface,
+						$author$project$Widget$Style$Material$buttonPressedOpacity,
+						A2($author$project$Widget$Style$Material$scaleOpacity, 0.12, palette.on.surface)))),
+				$mdgriffith$elm_ui$Element$focused(
+				$author$project$Widget$Style$Material$textAndBackground(
+					A3(
+						$author$project$Widget$Style$Material$withShade,
+						palette.on.surface,
+						$author$project$Widget$Style$Material$buttonFocusOpacity,
+						A2($author$project$Widget$Style$Material$scaleOpacity, 0.12, palette.on.surface)))),
+				$mdgriffith$elm_ui$Element$mouseOver(
+				$author$project$Widget$Style$Material$textAndBackground(
+					A3(
+						$author$project$Widget$Style$Material$withShade,
+						palette.on.surface,
+						$author$project$Widget$Style$Material$buttonHoverOpacity,
+						A2($author$project$Widget$Style$Material$scaleOpacity, 0.12, palette.on.surface))))
+			]),
+		ifActive: _Utils_ap(
+			$author$project$Widget$Style$Material$textAndBackground(
+				A3(
+					$author$project$Widget$Style$Material$withShade,
+					palette.on.surface,
+					$author$project$Widget$Style$Material$buttonSelectedOpacity,
+					A2($author$project$Widget$Style$Material$scaleOpacity, 0.12, palette.on.surface))),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$shadow(
+					$author$project$Widget$Style$Material$shadow(4))
+				])),
+		ifDisabled: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).ifDisabled,
+			_Utils_ap(
+				$author$project$Widget$Style$Material$textAndBackground(
+					A3(
+						$author$project$Widget$Style$Material$withShade,
+						palette.on.surface,
+						$author$project$Widget$Style$Material$buttonDisabledOpacity,
+						A2($author$project$Widget$Style$Material$scaleOpacity, 0.12, palette.on.surface))),
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+						$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+						$mdgriffith$elm_ui$Element$focused(_List_Nil)
+					]))),
+		labelRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(0),
+				$mdgriffith$elm_ui$Element$centerY
+			]),
+		otherwise: $author$project$Widget$Style$Material$textAndBackground(
+			A2($author$project$Widget$Style$Material$scaleOpacity, 0.12, palette.on.surface)),
+		text: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$paddingEach(
+				{bottom: 0, left: 8, right: 0, top: 0})
+			])
+	};
+};
+var $author$project$Widget$Style$Material$column = {
+	containerColumn: _List_fromArray(
+		[
+			A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8),
+			$mdgriffith$elm_ui$Element$spacing(8)
+		]),
+	element: _List_Nil,
+	ifFirst: _List_Nil,
+	ifLast: _List_Nil,
+	otherwise: _List_Nil
+};
+var $author$project$Widget$Style$Material$icon = F2(
+	function (string, size) {
+		return A2(
+			$elm$core$Basics$composeR,
+			$elm$svg$Svg$svg(
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$height(
+						$elm$core$String$fromInt(size)),
+						$elm$svg$Svg$Attributes$stroke('currentColor'),
+						$elm$svg$Svg$Attributes$fill('currentColor'),
+						$elm$svg$Svg$Attributes$viewBox(string),
+						$elm$svg$Svg$Attributes$width(
+						$elm$core$String$fromInt(size))
+					])),
+			A2(
+				$elm$core$Basics$composeR,
+				$mdgriffith$elm_ui$Element$html,
+				$mdgriffith$elm_ui$Element$el(_List_Nil)));
+	});
+var $author$project$Widget$Style$Material$expand_less = A3(
+	$author$project$Widget$Style$Material$icon,
+	'0 0 48 48',
+	24,
 	_List_fromArray(
 		[
 			A2(
 			$elm$svg$Svg$path,
 			_List_fromArray(
 				[
-					$elm$svg$Svg$Attributes$d('M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z')
+					$elm$svg$Svg$Attributes$d('M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z')
 				]),
 			_List_Nil)
 		]));
-var $author$project$Component$FilterSelectSpecific = function (a) {
-	return {$: 'FilterSelectSpecific', a: a};
+var $author$project$Widget$Style$Material$expand_more = A3(
+	$author$project$Widget$Style$Material$icon,
+	'0 0 48 48',
+	24,
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M33.17 17.17L24 26.34l-9.17-9.17L12 20l12 12 12-12z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Widget$Style$Material$expansionPanel = function (palette) {
+	return {
+		collapseIcon: A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray))
+				]),
+			$author$project$Widget$Style$Material$expand_less),
+		containerColumn: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Style$Material$fromColor(palette.surface)),
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+			]),
+		content: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$padding(14)
+			]),
+		expandIcon: A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray))
+				]),
+			$author$project$Widget$Style$Material$expand_more),
+		labelRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(32)
+			]),
+		panelRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(48)),
+				$mdgriffith$elm_ui$Element$spaceEvenly,
+				$mdgriffith$elm_ui$Element$padding(14),
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+			])
+	};
 };
-var $author$project$Widget$FilterSelect$Selected = function (a) {
-	return {$: 'Selected', a: a};
+var $author$project$Widget$Style$Material$drawerButton = function (palette) {
+	return {
+		container: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Font$size(14),
+				$mdgriffith$elm_ui$Element$Font$semiBold,
+				$mdgriffith$elm_ui$Element$Font$letterSpacing(0.25),
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(36)),
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				A2($mdgriffith$elm_ui$Element$paddingXY, 8, 8),
+				$mdgriffith$elm_ui$Element$Border$rounded(4),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Style$Material$fromColor(
+					$author$project$Widget$Style$Material$accessibleTextColor(palette.surface))),
+				$mdgriffith$elm_ui$Element$mouseDown(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Style$Material$fromColor(
+							A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonPressedOpacity, palette.primary)))
+					])),
+				$mdgriffith$elm_ui$Element$focused(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Style$Material$fromColor(
+							A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonFocusOpacity, palette.primary)))
+					])),
+				$mdgriffith$elm_ui$Element$mouseOver(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Style$Material$fromColor(
+							A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary)))
+					]))
+			]),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Style$Material$fromColor(
+					A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary))),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Style$Material$fromColor(palette.primary))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray)),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		labelRow: $author$project$Widget$Style$Material$baseButton(palette).labelRow,
+		otherwise: _List_Nil,
+		text: $author$project$Widget$Style$Material$baseButton(palette).text
+	};
 };
-var $Orasund$elm_ui_framework$Framework$Color$red = A3($mdgriffith$elm_ui$Element$rgb255, 255, 56, 96);
-var $Orasund$elm_ui_framework$Framework$Color$danger = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$red),
-		$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$red),
-		$mdgriffith$elm_ui$Element$Font$color($Orasund$elm_ui_framework$Framework$Color$lighterGrey)
-	]);
-var $mdgriffith$elm_ui$Element$Border$roundEach = function (_v0) {
-	var topLeft = _v0.topLeft;
-	var topRight = _v0.topRight;
-	var bottomLeft = _v0.bottomLeft;
-	var bottomRight = _v0.bottomRight;
+var $mdgriffith$elm_ui$Element$Font$family = function (families) {
 	return A2(
 		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$borderRound,
-		A3(
-			$mdgriffith$elm_ui$Internal$Model$Single,
-			'br-' + ($elm$core$String$fromInt(topLeft) + ('-' + ($elm$core$String$fromInt(topRight) + ($elm$core$String$fromInt(bottomLeft) + ('-' + $elm$core$String$fromInt(bottomRight)))))),
-			'border-radius',
-			$elm$core$String$fromInt(topLeft) + ('px ' + ($elm$core$String$fromInt(topRight) + ('px ' + ($elm$core$String$fromInt(bottomRight) + ('px ' + ($elm$core$String$fromInt(bottomLeft) + 'px'))))))));
+		$mdgriffith$elm_ui$Internal$Flag$fontFamily,
+		A2(
+			$mdgriffith$elm_ui$Internal$Model$FontFamily,
+			A3($elm$core$List$foldl, $mdgriffith$elm_ui$Internal$Model$renderFontClassName, 'ff-', families),
+			families));
 };
-var $Orasund$elm_ui_framework$Framework$Group$left = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Border$roundEach(
-		{bottomLeft: 4, bottomRight: 0, topLeft: 4, topRight: 0})
-	]);
+var $author$project$Widget$Style$Material$iconButton = function (palette) {
+	return {
+		container: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).container,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(48)),
+					$mdgriffith$elm_ui$Element$Border$rounded(24),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonPressedOpacity, palette.surface)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonFocusOpacity, palette.surface)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.surface)))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Style$Material$fromColor(
+					A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.surface)))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray)),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		labelRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(8),
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+				$mdgriffith$elm_ui$Element$centerY,
+				$mdgriffith$elm_ui$Element$centerX
+			]),
+		otherwise: _List_Nil,
+		text: $author$project$Widget$Style$Material$baseButton(palette).text
+	};
+};
+var $mdgriffith$elm_ui$Element$layout = $mdgriffith$elm_ui$Element$layoutWith(
+	{options: _List_Nil});
+var $author$project$Widget$Style$Material$menu = A3(
+	$author$project$Widget$Style$Material$icon,
+	'0 0 48 48',
+	24,
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M6 36h36v-4H6v4zm0-10h36v-4H6v4zm0-14v4h36v-4H6z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Widget$Style$Material$menuTabButton = function (palette) {
+	return {
+		container: _Utils_ap(
+			$author$project$Widget$Style$Material$buttonFont,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(56)),
+					$mdgriffith$elm_ui$Element$width(
+					A2(
+						$mdgriffith$elm_ui$Element$minimum,
+						90,
+						A2($mdgriffith$elm_ui$Element$maximum, 360, $mdgriffith$elm_ui$Element$fill))),
+					A2($mdgriffith$elm_ui$Element$paddingXY, 12, 16),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor(
+						$author$project$Widget$Style$Material$accessibleTextColor(palette.primary))),
+					$mdgriffith$elm_ui$Element$alignBottom,
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary)))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$widthEach(
+				{bottom: 2, left: 0, right: 0, top: 0})
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray)),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		labelRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(8),
+				$mdgriffith$elm_ui$Element$centerY,
+				$mdgriffith$elm_ui$Element$centerX
+			]),
+		otherwise: _List_Nil,
+		text: _List_Nil
+	};
+};
+var $author$project$Widget$Style$Material$more_vert = A3(
+	$author$project$Widget$Style$Material$icon,
+	'0 0 48 48',
+	24,
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M24 16c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 4c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z')
+				]),
+			_List_Nil)
+		]));
+var $mdgriffith$elm_ui$Element$Font$sansSerif = $mdgriffith$elm_ui$Internal$Model$SansSerif;
+var $author$project$Widget$Style$Material$search = A3(
+	$author$project$Widget$Style$Material$icon,
+	'0 0 48 48',
+	24,
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Widget$Style$Material$accessibleWithTextColor = F2(
+	function (c, color) {
+		var newConstrast = 7;
+		var l2 = 1 + ($avh4$elm_color$Color$toRgba(color).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(color) - 1));
+		var lighterLuminance = (newConstrast * (l2 + 0.05)) - 0.05;
+		var l1 = 1 + ($avh4$elm_color$Color$toRgba(c).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(c) - 1));
+		var darkerLuminance = (l2 + 0.05) - (0.05 / newConstrast);
+		return ((_Utils_cmp(l1, l2) > 0) ? ((((l1 + 0.05) / (l2 + 0.05)) < 7) ? A2(
+			$elm$core$Basics$composeR,
+			$noahzgordon$elm_color_extra$Color$Convert$colorToLab,
+			A2(
+				$elm$core$Basics$composeR,
+				function (col) {
+					return _Utils_update(
+						col,
+						{l: 100 * lighterLuminance});
+				},
+				$noahzgordon$elm_color_extra$Color$Convert$labToColor)) : $elm$core$Basics$identity) : ((((l2 + 0.05) / (l1 + 0.05)) < 7) ? A2(
+			$elm$core$Basics$composeR,
+			$noahzgordon$elm_color_extra$Color$Convert$colorToLab,
+			A2(
+				$elm$core$Basics$composeR,
+				function (col) {
+					return _Utils_update(
+						col,
+						{l: 100 * darkerLuminance});
+				},
+				$noahzgordon$elm_color_extra$Color$Convert$labToColor)) : $elm$core$Basics$identity))(c);
+	});
+var $author$project$Widget$Style$Material$dark = A3($avh4$elm_color$Color$rgb255, 50, 50, 50);
+var $author$project$Widget$Style$Material$snackbar = function (palette) {
+	return {
+		button: function (b) {
+			return _Utils_update(
+				b,
+				{
+					container: _Utils_ap(
+						b.container,
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Font$color(
+								$author$project$Widget$Style$Material$fromColor(
+									A2($author$project$Widget$Style$Material$accessibleWithTextColor, palette.primary, $author$project$Widget$Style$Material$dark)))
+							]))
+				});
+		}(
+			$author$project$Widget$Style$Material$textButton(palette)),
+		containerRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$dark)),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Style$Material$fromColor(
+					$author$project$Widget$Style$Material$accessibleTextColor($author$project$Widget$Style$Material$dark))),
+				$mdgriffith$elm_ui$Element$Border$rounded(4),
+				$mdgriffith$elm_ui$Element$width(
+				A2($mdgriffith$elm_ui$Element$maximum, 344, $mdgriffith$elm_ui$Element$fill)),
+				A2($mdgriffith$elm_ui$Element$paddingXY, 8, 6),
+				$mdgriffith$elm_ui$Element$spacing(8),
+				$mdgriffith$elm_ui$Element$Border$shadow(
+				$author$project$Widget$Style$Material$shadow(2))
+			]),
+		text: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$centerX,
+				A2($mdgriffith$elm_ui$Element$paddingXY, 10, 8)
+			])
+	};
+};
+var $mdgriffith$elm_ui$Element$Font$typeface = $mdgriffith$elm_ui$Internal$Model$Typeface;
+var $author$project$Widget$Style$Material$layout = function (palette) {
+	return {
+		container: _Utils_ap(
+			$author$project$Widget$Style$Material$textAndBackground(palette.background),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$family(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Font$typeface('Roboto'),
+							$mdgriffith$elm_ui$Element$Font$sansSerif
+						])),
+					$mdgriffith$elm_ui$Element$Font$size(16),
+					$mdgriffith$elm_ui$Element$Font$letterSpacing(0.5)
+				])),
+		header: _Utils_ap(
+			$author$project$Widget$Style$Material$textAndBackground(palette.primary),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(56)),
+					$mdgriffith$elm_ui$Element$padding(16),
+					$mdgriffith$elm_ui$Element$width(
+					A2($mdgriffith$elm_ui$Element$minimum, 360, $mdgriffith$elm_ui$Element$fill))
+				])),
+		layout: $mdgriffith$elm_ui$Element$layout,
+		menuButton: $author$project$Widget$Style$Material$iconButton(palette),
+		menuIcon: $author$project$Widget$Style$Material$menu,
+		menuTabButton: $author$project$Widget$Style$Material$menuTabButton(palette),
+		moreVerticalIcon: $author$project$Widget$Style$Material$more_vert,
+		search: _Utils_ap(
+			$author$project$Widget$Style$Material$textAndBackground(palette.surface),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$spacing(8),
+					A2($mdgriffith$elm_ui$Element$paddingXY, 8, 8),
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(32)),
+					$mdgriffith$elm_ui$Element$Border$width(1),
+					$mdgriffith$elm_ui$Element$Border$rounded(4),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Style$Material$fromColor(
+						A2($author$project$Widget$Style$Material$scaleOpacity, 0.14, palette.on.surface))),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Style$Material$shadow(4))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Style$Material$shadow(2))
+						])),
+					$mdgriffith$elm_ui$Element$width(
+					A2($mdgriffith$elm_ui$Element$maximum, 360, $mdgriffith$elm_ui$Element$fill)),
+					$mdgriffith$elm_ui$Element$alignRight
+				])),
+		searchFill: $author$project$Widget$Style$Material$textAndBackground(palette.surface),
+		searchIcon: $author$project$Widget$Style$Material$search,
+		sheet: _Utils_ap(
+			$author$project$Widget$Style$Material$textAndBackground(palette.surface),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width(
+					A2($mdgriffith$elm_ui$Element$maximum, 360, $mdgriffith$elm_ui$Element$fill)),
+					$mdgriffith$elm_ui$Element$padding(8),
+					$mdgriffith$elm_ui$Element$spacing(8)
+				])),
+		sheetButton: $author$project$Widget$Style$Material$drawerButton(palette),
+		snackbar: $author$project$Widget$Style$Material$snackbar(palette),
+		spacing: 8,
+		title: _Utils_ap(
+			$author$project$Widget$Style$Material$h6,
+			_List_fromArray(
+				[
+					A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+				]))
+	};
+};
+var $author$project$Widget$Style$Material$outlinedButton = function (palette) {
+	return {
+		container: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).container,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$width(1),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray)),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor(palette.primary)),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonPressedOpacity, palette.primary))),
+							$mdgriffith$elm_ui$Element$Border$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A3($author$project$Widget$Style$Material$withShade, palette.primary, $author$project$Widget$Style$Material$buttonPressedOpacity, $author$project$Widget$Style$Material$gray)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonFocusOpacity, palette.primary))),
+							$mdgriffith$elm_ui$Element$Border$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A3($author$project$Widget$Style$Material$withShade, palette.primary, $author$project$Widget$Style$Material$buttonFocusOpacity, $author$project$Widget$Style$Material$gray)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary))),
+							$mdgriffith$elm_ui$Element$Border$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A3($author$project$Widget$Style$Material$withShade, palette.primary, $author$project$Widget$Style$Material$buttonHoverOpacity, $author$project$Widget$Style$Material$gray)))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Style$Material$fromColor(
+					A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary))),
+				$mdgriffith$elm_ui$Element$Border$color(
+				$author$project$Widget$Style$Material$fromColor(
+					A3($author$project$Widget$Style$Material$withShade, palette.primary, $author$project$Widget$Style$Material$buttonHoverOpacity, $author$project$Widget$Style$Material$gray)))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray)),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		labelRow: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).labelRow,
+			_List_fromArray(
+				[
+					A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+				])),
+		otherwise: _List_Nil,
+		text: $author$project$Widget$Style$Material$baseButton(palette).text
+	};
+};
+var $author$project$Widget$Style$Material$row = {
+	containerRow: _List_fromArray(
+		[
+			A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8),
+			$mdgriffith$elm_ui$Element$spacing(8)
+		]),
+	element: _List_Nil,
+	ifFirst: _List_Nil,
+	ifLast: _List_Nil,
+	otherwise: _List_Nil
+};
+var $author$project$Data$Style$Material$sortTable = function (palette) {
+	return {
+		ascIcon: A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_Nil,
+			$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronUp)),
+		containerTable: _List_Nil,
+		defaultIcon: $mdgriffith$elm_ui$Element$none,
+		descIcon: A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_Nil,
+			$mdgriffith$elm_ui$Element$html($author$project$Icons$chevronDown)),
+		headerButton: $author$project$Widget$Style$Material$textButton(palette)
+	};
+};
+var $author$project$Widget$Style$Material$tabButton = function (palette) {
+	return {
+		container: _Utils_ap(
+			$author$project$Widget$Style$Material$buttonFont,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(48)),
+					$mdgriffith$elm_ui$Element$width(
+					A2(
+						$mdgriffith$elm_ui$Element$minimum,
+						90,
+						A2($mdgriffith$elm_ui$Element$maximum, 360, $mdgriffith$elm_ui$Element$fill))),
+					A2($mdgriffith$elm_ui$Element$paddingXY, 12, 16),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor(palette.primary)),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Style$Material$fromColor(
+								A2($author$project$Widget$Style$Material$scaleOpacity, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.primary)))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(48)),
+				$mdgriffith$elm_ui$Element$Border$widthEach(
+				{bottom: 2, left: 0, right: 0, top: 0})
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray)),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		labelRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(8),
+				$mdgriffith$elm_ui$Element$centerY,
+				$mdgriffith$elm_ui$Element$centerX
+			]),
+		otherwise: _List_Nil,
+		text: _List_Nil
+	};
+};
+var $author$project$Widget$Style$Material$tab = function (palette) {
+	return {
+		button: $author$project$Widget$Style$Material$tabButton(palette),
+		containerColumn: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(8)
+			]),
+		content: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+			]),
+		optionRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spaceEvenly,
+				$mdgriffith$elm_ui$Element$Border$shadow(
+				$author$project$Widget$Style$Material$shadow(4))
+			])
+	};
+};
+var $author$project$Widget$Style$Material$textInput = function (palette) {
+	return {
+		chipButton: $author$project$Widget$Style$Material$chip(palette),
+		chipsRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(8)
+			]),
+		containerRow: _Utils_ap(
+			$author$project$Widget$Style$Material$textAndBackground(palette.surface),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$spacing(8),
+					A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0),
+					$mdgriffith$elm_ui$Element$Border$width(1),
+					$mdgriffith$elm_ui$Element$Border$rounded(4),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Style$Material$fromColor(
+						A2($author$project$Widget$Style$Material$scaleOpacity, 0.14, palette.on.surface))),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Style$Material$shadow(4)),
+							$mdgriffith$elm_ui$Element$Border$color(
+							$author$project$Widget$Style$Material$fromColor(palette.primary))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Style$Material$shadow(2))
+						]))
+				])),
+		input: _Utils_ap(
+			$author$project$Widget$Style$Material$textAndBackground(palette.surface),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$width(0),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				]))
+	};
+};
+var $author$project$Widget$Style$Material$toggleButton = function (palette) {
+	return {
+		container: _Utils_ap(
+			$author$project$Widget$Style$Material$buttonFont,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width(
+					$mdgriffith$elm_ui$Element$px(48)),
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(48)),
+					$mdgriffith$elm_ui$Element$padding(4),
+					$mdgriffith$elm_ui$Element$Border$width(1),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_Utils_ap(
+						$author$project$Widget$Style$Material$textAndBackground(
+							A3($author$project$Widget$Style$Material$withShade, palette.on.surface, $author$project$Widget$Style$Material$buttonPressedOpacity, palette.surface)),
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Border$color(
+								$author$project$Widget$Style$Material$fromColor(
+									A3(
+										$author$project$Widget$Style$Material$withShade,
+										palette.on.surface,
+										$author$project$Widget$Style$Material$buttonPressedOpacity,
+										A2($author$project$Widget$Style$Material$scaleOpacity, 0.14, palette.on.surface))))
+							]))),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_Utils_ap(
+						$author$project$Widget$Style$Material$textAndBackground(
+							A3($author$project$Widget$Style$Material$withShade, palette.on.surface, $author$project$Widget$Style$Material$buttonHoverOpacity, palette.surface)),
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Border$color(
+								$author$project$Widget$Style$Material$fromColor(
+									A3(
+										$author$project$Widget$Style$Material$withShade,
+										palette.on.surface,
+										$author$project$Widget$Style$Material$buttonHoverOpacity,
+										A2($author$project$Widget$Style$Material$scaleOpacity, 0.14, palette.on.surface))))
+							])))
+				])),
+		ifActive: _Utils_ap(
+			$author$project$Widget$Style$Material$textAndBackground(
+				A3($author$project$Widget$Style$Material$withShade, palette.on.surface, $author$project$Widget$Style$Material$buttonSelectedOpacity, palette.surface)),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Style$Material$fromColor(
+						A3(
+							$author$project$Widget$Style$Material$withShade,
+							palette.on.surface,
+							$author$project$Widget$Style$Material$buttonSelectedOpacity,
+							A2($author$project$Widget$Style$Material$scaleOpacity, 0.14, palette.on.surface)))),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
+				])),
+		ifDisabled: _Utils_ap(
+			$author$project$Widget$Style$Material$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Style$Material$fromColor(palette.surface)),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Style$Material$fromColor(
+						A2($author$project$Widget$Style$Material$scaleOpacity, 0.14, palette.on.surface))),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Style$Material$fromColor($author$project$Widget$Style$Material$gray)),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
+				])),
+		labelRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(8),
+				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$Border$rounded(24),
+				$mdgriffith$elm_ui$Element$padding(8),
+				$mdgriffith$elm_ui$Element$focused(
+				$author$project$Widget$Style$Material$textAndBackground(
+					A3($author$project$Widget$Style$Material$withShade, palette.on.surface, $author$project$Widget$Style$Material$buttonFocusOpacity, palette.surface)))
+			]),
+		otherwise: _Utils_ap(
+			$author$project$Widget$Style$Material$textAndBackground(palette.surface),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Style$Material$fromColor(
+						A2($author$project$Widget$Style$Material$scaleOpacity, 0.14, palette.on.surface)))
+				])),
+		text: _List_fromArray(
+			[$mdgriffith$elm_ui$Element$centerX])
+	};
+};
+var $author$project$Data$Style$Material$style = function (palette) {
+	return {
+		button: $author$project$Widget$Style$Material$outlinedButton(palette),
+		buttonRow: $author$project$Widget$Style$Material$buttonRow,
+		cardColumn: $author$project$Widget$Style$Material$cardColumn(palette),
+		chipButton: $author$project$Widget$Style$Material$chip(palette),
+		column: $author$project$Widget$Style$Material$column,
+		dialog: $author$project$Widget$Style$Material$alertDialog(palette),
+		expansionPanel: $author$project$Widget$Style$Material$expansionPanel(palette),
+		layout: $author$project$Widget$Style$Material$layout(palette),
+		primaryButton: $author$project$Widget$Style$Material$containedButton(palette),
+		row: $author$project$Widget$Style$Material$row,
+		selectButton: $author$project$Widget$Style$Material$toggleButton(palette),
+		sortTable: $author$project$Data$Style$Material$sortTable(palette),
+		tab: $author$project$Widget$Style$Material$tab(palette),
+		textInput: $author$project$Widget$Style$Material$textInput(palette)
+	};
+};
+var $mdgriffith$elm_ui$Internal$Model$Above = {$: 'Above'};
+var $mdgriffith$elm_ui$Element$above = function (element) {
+	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$Above, element);
+};
+var $author$project$Widget$Style$Template$fontSize = 10;
+var $author$project$Widget$Style$Template$box = function (string) {
+	return _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Border$width(1),
+			$mdgriffith$elm_ui$Element$Background$color(
+			A4($mdgriffith$elm_ui$Element$rgba, 1, 1, 1, 0.5)),
+			$mdgriffith$elm_ui$Element$padding(10),
+			$mdgriffith$elm_ui$Element$spacing(10),
+			$mdgriffith$elm_ui$Element$above(
+			A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Font$size($author$project$Widget$Style$Template$fontSize)
+					]),
+				$mdgriffith$elm_ui$Element$text(string)))
+		]);
+};
+var $mdgriffith$elm_ui$Internal$Model$Below = {$: 'Below'};
+var $mdgriffith$elm_ui$Element$below = function (element) {
+	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$Below, element);
+};
+var $mdgriffith$elm_ui$Element$rgb = F3(
+	function (r, g, b) {
+		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, r, g, b, 1);
+	});
+var $author$project$Widget$Style$Template$decoration = function (string) {
+	return _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$below(
+			A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Font$size($author$project$Widget$Style$Template$fontSize)
+					]),
+				$mdgriffith$elm_ui$Element$text(string))),
+			$mdgriffith$elm_ui$Element$Background$color(
+			A3($mdgriffith$elm_ui$Element$rgb, 0.66, 0.66, 0.66))
+		]);
+};
+var $author$project$Widget$Style$Template$button = function (string) {
+	return {
+		container: $author$project$Widget$Style$Template$box(string + ':container'),
+		ifActive: $author$project$Widget$Style$Template$decoration(string + ':ifActive'),
+		ifDisabled: $author$project$Widget$Style$Template$decoration(string + ':ifDisabled'),
+		labelRow: $author$project$Widget$Style$Template$box(string + ':labelRow'),
+		otherwise: $author$project$Widget$Style$Template$decoration(string + ':otherwise'),
+		text: $author$project$Widget$Style$Template$box(string + ':text')
+	};
+};
+var $author$project$Widget$Style$Template$column = function (string) {
+	return {
+		containerColumn: $author$project$Widget$Style$Template$box(string + ':containerColumn'),
+		element: $author$project$Widget$Style$Template$box(string + ':element'),
+		ifFirst: $author$project$Widget$Style$Template$decoration(string + ':ifFirst'),
+		ifLast: $author$project$Widget$Style$Template$decoration(string + ':ifLast'),
+		otherwise: $author$project$Widget$Style$Template$decoration(string + ':otherwise')
+	};
+};
+var $author$project$Widget$Style$Template$dialog = function (string) {
+	return {
+		acceptButton: $author$project$Widget$Style$Template$button(string + ':acceptButton'),
+		buttonRow: $author$project$Widget$Style$Template$box(string + ':buttonRow'),
+		containerColumn: $author$project$Widget$Style$Template$box(string + ':containerColumn'),
+		dismissButton: $author$project$Widget$Style$Template$button(string + ':dismissButton'),
+		text: $author$project$Widget$Style$Template$box(string + ':text'),
+		title: $author$project$Widget$Style$Template$box(string + ':title')
+	};
+};
+var $author$project$Widget$Style$Template$icon = function (string) {
+	return A2(
+		$mdgriffith$elm_ui$Element$el,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width(
+				$mdgriffith$elm_ui$Element$px(12)),
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(12)),
+				$mdgriffith$elm_ui$Element$Border$rounded(6),
+				$mdgriffith$elm_ui$Element$Border$width(1),
+				$mdgriffith$elm_ui$Element$above(
+				A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Font$size($author$project$Widget$Style$Template$fontSize)
+						]),
+					$mdgriffith$elm_ui$Element$text(string)))
+			]),
+		$mdgriffith$elm_ui$Element$none);
+};
+var $author$project$Widget$Style$Template$expansionPanel = function (string) {
+	return {
+		collapseIcon: $author$project$Widget$Style$Template$icon(string + ':collapseIcon'),
+		containerColumn: $author$project$Widget$Style$Template$box(string + ':containerColumn'),
+		content: $author$project$Widget$Style$Template$box(string + ':content'),
+		expandIcon: $author$project$Widget$Style$Template$icon(string + ':expandIcon'),
+		labelRow: $author$project$Widget$Style$Template$box(string + ':labelRow'),
+		panelRow: $author$project$Widget$Style$Template$box(string + ':panelRow')
+	};
+};
+var $author$project$Widget$Style$Template$snackbar = function (string) {
+	return {
+		button: $author$project$Widget$Style$Template$button(string + ':button'),
+		containerRow: $author$project$Widget$Style$Template$box(string + ':containerRow'),
+		text: $author$project$Widget$Style$Template$box(string + ':text')
+	};
+};
+var $author$project$Widget$Style$Template$layout = function (string) {
+	return {
+		container: $author$project$Widget$Style$Template$box(string + ':container'),
+		header: $author$project$Widget$Style$Template$box(string + ':header'),
+		layout: $mdgriffith$elm_ui$Element$layout,
+		menuButton: $author$project$Widget$Style$Template$button(string + ':menuButton'),
+		menuIcon: $author$project$Widget$Style$Template$icon(string + ':menuIcon'),
+		menuTabButton: $author$project$Widget$Style$Template$button(string + ':menuTabButton'),
+		moreVerticalIcon: $author$project$Widget$Style$Template$icon(string + ':moreVerticalIcon'),
+		search: $author$project$Widget$Style$Template$box(string + ':search'),
+		searchFill: $author$project$Widget$Style$Template$box(string + ':searchFill'),
+		searchIcon: $author$project$Widget$Style$Template$icon(string + ':searchIcon'),
+		sheet: $author$project$Widget$Style$Template$box(string + ':sheet'),
+		sheetButton: $author$project$Widget$Style$Template$button(string + ':sheetButton'),
+		snackbar: $author$project$Widget$Style$Template$snackbar(string + ':snackbar'),
+		spacing: 8,
+		title: $author$project$Widget$Style$Template$box(string + ':title')
+	};
+};
+var $author$project$Widget$Style$Template$row = function (string) {
+	return {
+		containerRow: $author$project$Widget$Style$Template$box(string + ':containerRow'),
+		element: $author$project$Widget$Style$Template$box(string + ':element'),
+		ifFirst: $author$project$Widget$Style$Template$decoration(string + ':ifFirst'),
+		ifLast: $author$project$Widget$Style$Template$decoration(string + ':ifLast'),
+		otherwise: $author$project$Widget$Style$Template$decoration(string + ':otherwise')
+	};
+};
+var $author$project$Widget$Style$Template$sortTable = function (string) {
+	return {
+		ascIcon: $author$project$Widget$Style$Template$icon(string + ':ascIcon'),
+		containerTable: $author$project$Widget$Style$Template$box(string + ':containerTable'),
+		defaultIcon: $author$project$Widget$Style$Template$icon(string + ':defaultIcon'),
+		descIcon: $author$project$Widget$Style$Template$icon(string + ':descIcon'),
+		headerButton: $author$project$Widget$Style$Template$button(string + ':headerButton')
+	};
+};
+var $author$project$Widget$Style$Template$tab = function (string) {
+	return {
+		button: $author$project$Widget$Style$Template$button(string + ':button'),
+		containerColumn: $author$project$Widget$Style$Template$box(string + ':containerColumn'),
+		content: $author$project$Widget$Style$Template$box(string + ':content'),
+		optionRow: $author$project$Widget$Style$Template$box(string + ':optionRow')
+	};
+};
+var $author$project$Widget$Style$Template$textInput = function (string) {
+	return {
+		chipButton: $author$project$Widget$Style$Template$button(string + ':chipButton'),
+		chipsRow: $author$project$Widget$Style$Template$box(string + ':chipsRow'),
+		containerRow: $author$project$Widget$Style$Template$box(string + ':containerRow'),
+		input: $author$project$Widget$Style$Template$box(string + ':input')
+	};
+};
+var $author$project$Data$Style$Template$style = {
+	button: $author$project$Widget$Style$Template$button('button'),
+	buttonRow: $author$project$Widget$Style$Template$row('buttonRow'),
+	cardColumn: $author$project$Widget$Style$Template$column('cardRow'),
+	chipButton: $author$project$Widget$Style$Template$button('chipButton'),
+	column: $author$project$Widget$Style$Template$column('column'),
+	dialog: $author$project$Widget$Style$Template$dialog('dialog'),
+	expansionPanel: $author$project$Widget$Style$Template$expansionPanel('expansionPanel'),
+	layout: $author$project$Widget$Style$Template$layout('layout'),
+	primaryButton: $author$project$Widget$Style$Template$button('primaryButton'),
+	row: $author$project$Widget$Style$Template$row('row'),
+	selectButton: $author$project$Widget$Style$Template$button('selectButton'),
+	sortTable: $author$project$Widget$Style$Template$sortTable('sortTable'),
+	tab: $author$project$Widget$Style$Template$tab('tab'),
+	textInput: $author$project$Widget$Style$Template$textInput('textInput')
+};
+var $author$project$Data$Theme$toStyle = function (theme) {
+	switch (theme.$) {
+		case 'ElmUiFramework':
+			return $author$project$Data$Style$ElmUiFramework$style;
+		case 'Template':
+			return $author$project$Data$Style$Template$style;
+		case 'Material':
+			return $author$project$Data$Style$Material$style($author$project$Widget$Style$Material$defaultPalette);
+		default:
+			return $author$project$Data$Style$Material$style($author$project$Widget$Style$Material$darkPalette);
+	}
+};
+var $author$project$Widget$Layout$LeftSheet = {$: 'LeftSheet'};
+var $mdgriffith$elm_ui$Element$Phone = {$: 'Phone'};
+var $author$project$Widget$Layout$RightSheet = {$: 'RightSheet'};
+var $author$project$Widget$Layout$Search = {$: 'Search'};
+var $mdgriffith$elm_ui$Element$Tablet = {$: 'Tablet'};
+var $author$project$Widget$button = $author$project$Internal$Button$button;
+var $mdgriffith$elm_ui$Element$BigDesktop = {$: 'BigDesktop'};
+var $mdgriffith$elm_ui$Element$Desktop = {$: 'Desktop'};
+var $mdgriffith$elm_ui$Element$Landscape = {$: 'Landscape'};
+var $mdgriffith$elm_ui$Element$Portrait = {$: 'Portrait'};
+var $mdgriffith$elm_ui$Element$classifyDevice = function (window) {
+	return {
+		_class: function () {
+			var shortSide = A2($elm$core$Basics$min, window.width, window.height);
+			var longSide = A2($elm$core$Basics$max, window.width, window.height);
+			return (shortSide < 600) ? $mdgriffith$elm_ui$Element$Phone : ((longSide <= 1200) ? $mdgriffith$elm_ui$Element$Tablet : (((longSide > 1200) && (longSide <= 1920)) ? $mdgriffith$elm_ui$Element$Desktop : $mdgriffith$elm_ui$Element$BigDesktop));
+		}(),
+		orientation: (_Utils_cmp(window.width, window.height) < 0) ? $mdgriffith$elm_ui$Element$Portrait : $mdgriffith$elm_ui$Element$Landscape
+	};
+};
+var $elm$core$List$drop = F2(
+	function (n, list) {
+		drop:
+		while (true) {
+			if (n <= 0) {
+				return list;
+			} else {
+				if (!list.b) {
+					return list;
+				} else {
+					var x = list.a;
+					var xs = list.b;
+					var $temp$n = n - 1,
+						$temp$list = xs;
+					n = $temp$n;
+					list = $temp$list;
+					continue drop;
+				}
+			}
+		}
+	});
+var $mdgriffith$elm_ui$Internal$Model$Label = function (a) {
+	return {$: 'Label', a: a};
+};
+var $mdgriffith$elm_ui$Element$Region$description = A2($elm$core$Basics$composeL, $mdgriffith$elm_ui$Internal$Model$Describe, $mdgriffith$elm_ui$Internal$Model$Label);
+var $author$project$Internal$Button$iconButton = F2(
+	function (style, _v0) {
+		var onPress = _v0.onPress;
+		var text = _v0.text;
+		var icon = _v0.icon;
+		return A2(
+			$mdgriffith$elm_ui$Element$Input$button,
+			_Utils_ap(
+				style.container,
+				_Utils_ap(
+					_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Region$description(text)
+						]))),
+			{
+				label: A2(
+					$mdgriffith$elm_ui$Element$el,
+					style.labelRow,
+					A2($mdgriffith$elm_ui$Element$map, $elm$core$Basics$never, icon)),
+				onPress: onPress
+			});
+	});
+var $author$project$Widget$iconButton = $author$project$Internal$Button$iconButton;
+var $mdgriffith$elm_ui$Element$Input$HiddenLabel = function (a) {
+	return {$: 'HiddenLabel', a: a};
+};
+var $mdgriffith$elm_ui$Element$Input$labelHidden = $mdgriffith$elm_ui$Element$Input$HiddenLabel;
+var $author$project$Widget$modal = $author$project$Internal$Dialog$modal;
 var $mdgriffith$elm_ui$Element$Input$Placeholder = F2(
 	function (a, b) {
 		return {$: 'Placeholder', a: a, b: b};
 	});
 var $mdgriffith$elm_ui$Element$Input$placeholder = $mdgriffith$elm_ui$Element$Input$Placeholder;
-var $Orasund$elm_ui_framework$Framework$Group$right = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Border$roundEach(
-		{bottomLeft: 0, bottomRight: 4, topLeft: 0, topRight: 4})
-	]);
-var $mdgriffith$elm_ui$Internal$Model$AsRow = {$: 'AsRow'};
-var $mdgriffith$elm_ui$Internal$Model$asRow = $mdgriffith$elm_ui$Internal$Model$AsRow;
-var $mdgriffith$elm_ui$Element$row = F2(
-	function (attrs, children) {
-		return A4(
-			$mdgriffith$elm_ui$Internal$Model$element,
-			$mdgriffith$elm_ui$Internal$Model$asRow,
-			$mdgriffith$elm_ui$Internal$Model$div,
-			A2(
-				$elm$core$List$cons,
-				$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentLeft + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.contentCenterY)),
-				A2(
-					$elm$core$List$cons,
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
-					A2(
-						$elm$core$List$cons,
-						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
-						attrs))),
-			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
+var $author$project$Internal$Select$select = function (_v0) {
+	var selected = _v0.selected;
+	var options = _v0.options;
+	var onSelect = _v0.onSelect;
+	return A2(
+		$elm$core$List$indexedMap,
+		F2(
+			function (i, a) {
+				return _Utils_Tuple2(
+					_Utils_eq(
+						selected,
+						$elm$core$Maybe$Just(i)),
+					{
+						icon: a.icon,
+						onPress: onSelect(i),
+						text: a.text
+					});
+			}),
+		options);
+};
+var $author$project$Widget$select = $author$project$Internal$Select$select;
+var $author$project$Internal$Select$selectButton = F2(
+	function (style, _v0) {
+		var selected = _v0.a;
+		var b = _v0.b;
+		return A2(
+			$mdgriffith$elm_ui$Element$Input$button,
+			_Utils_ap(
+				style.container,
+				_Utils_eq(b.onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : (selected ? style.ifActive : style.otherwise)),
+			{
+				label: A2(
+					$mdgriffith$elm_ui$Element$row,
+					style.labelRow,
+					_List_fromArray(
+						[
+							A2($mdgriffith$elm_ui$Element$map, $elm$core$Basics$never, b.icon),
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							style.text,
+							$mdgriffith$elm_ui$Element$text(b.text))
+						])),
+				onPress: b.onPress
+			});
+	});
+var $author$project$Widget$selectButton = $author$project$Internal$Select$selectButton;
+var $elm$core$List$takeReverse = F3(
+	function (n, list, kept) {
+		takeReverse:
+		while (true) {
+			if (n <= 0) {
+				return kept;
+			} else {
+				if (!list.b) {
+					return kept;
+				} else {
+					var x = list.a;
+					var xs = list.b;
+					var $temp$n = n - 1,
+						$temp$list = xs,
+						$temp$kept = A2($elm$core$List$cons, x, kept);
+					n = $temp$n;
+					list = $temp$list;
+					kept = $temp$kept;
+					continue takeReverse;
+				}
+			}
+		}
+	});
+var $elm$core$List$takeTailRec = F2(
+	function (n, list) {
+		return $elm$core$List$reverse(
+			A3($elm$core$List$takeReverse, n, list, _List_Nil));
+	});
+var $elm$core$List$takeFast = F3(
+	function (ctr, n, list) {
+		if (n <= 0) {
+			return _List_Nil;
+		} else {
+			var _v0 = _Utils_Tuple2(n, list);
+			_v0$1:
+			while (true) {
+				_v0$5:
+				while (true) {
+					if (!_v0.b.b) {
+						return list;
+					} else {
+						if (_v0.b.b.b) {
+							switch (_v0.a) {
+								case 1:
+									break _v0$1;
+								case 2:
+									var _v2 = _v0.b;
+									var x = _v2.a;
+									var _v3 = _v2.b;
+									var y = _v3.a;
+									return _List_fromArray(
+										[x, y]);
+								case 3:
+									if (_v0.b.b.b.b) {
+										var _v4 = _v0.b;
+										var x = _v4.a;
+										var _v5 = _v4.b;
+										var y = _v5.a;
+										var _v6 = _v5.b;
+										var z = _v6.a;
+										return _List_fromArray(
+											[x, y, z]);
+									} else {
+										break _v0$5;
+									}
+								default:
+									if (_v0.b.b.b.b && _v0.b.b.b.b.b) {
+										var _v7 = _v0.b;
+										var x = _v7.a;
+										var _v8 = _v7.b;
+										var y = _v8.a;
+										var _v9 = _v8.b;
+										var z = _v9.a;
+										var _v10 = _v9.b;
+										var w = _v10.a;
+										var tl = _v10.b;
+										return (ctr > 1000) ? A2(
+											$elm$core$List$cons,
+											x,
+											A2(
+												$elm$core$List$cons,
+												y,
+												A2(
+													$elm$core$List$cons,
+													z,
+													A2(
+														$elm$core$List$cons,
+														w,
+														A2($elm$core$List$takeTailRec, n - 4, tl))))) : A2(
+											$elm$core$List$cons,
+											x,
+											A2(
+												$elm$core$List$cons,
+												y,
+												A2(
+													$elm$core$List$cons,
+													z,
+													A2(
+														$elm$core$List$cons,
+														w,
+														A3($elm$core$List$takeFast, ctr + 1, n - 4, tl)))));
+									} else {
+										break _v0$5;
+									}
+							}
+						} else {
+							if (_v0.a === 1) {
+								break _v0$1;
+							} else {
+								break _v0$5;
+							}
+						}
+					}
+				}
+				return list;
+			}
+			var _v1 = _v0.b;
+			var x = _v1.a;
+			return _List_fromArray(
+				[x]);
+		}
+	});
+var $elm$core$List$take = F2(
+	function (n, list) {
+		return A3($elm$core$List$takeFast, 0, n, list);
 	});
-var $Orasund$elm_ui_framework$Framework$Input$simple = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Background$color($Orasund$elm_ui_framework$Framework$Color$lighterGrey),
-		$mdgriffith$elm_ui$Element$Font$color($Orasund$elm_ui_framework$Framework$Color$darkerGrey)
-	]);
-var $author$project$Widget$FilterSelect$ChangedRaw = function (a) {
-	return {$: 'ChangedRaw', a: a};
-};
-var $mdgriffith$elm_ui$Element$Input$HiddenLabel = function (a) {
-	return {$: 'HiddenLabel', a: a};
-};
-var $mdgriffith$elm_ui$Element$Input$labelHidden = $mdgriffith$elm_ui$Element$Input$HiddenLabel;
 var $mdgriffith$elm_ui$Element$Input$TextInputNode = function (a) {
 	return {$: 'TextInputNode', a: a};
 };
@@ -14148,14 +17010,6 @@ var $mdgriffith$elm_ui$Element$Input$autofill = A2(
 	$mdgriffith$elm_ui$Internal$Model$Attr,
 	$elm$html$Html$Attributes$attribute('autocomplete'));
 var $mdgriffith$elm_ui$Internal$Model$Behind = {$: 'Behind'};
-var $mdgriffith$elm_ui$Element$createNearby = F2(
-	function (loc, element) {
-		if (element.$ === 'Empty') {
-			return $mdgriffith$elm_ui$Internal$Model$NoAttribute;
-		} else {
-			return A2($mdgriffith$elm_ui$Internal$Model$Nearby, loc, element);
-		}
-	});
 var $mdgriffith$elm_ui$Element$behindContent = function (element) {
 	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$Behind, element);
 };
@@ -14194,12 +17048,6 @@ var $mdgriffith$elm_ui$Element$Input$calcMoveToCompensateForPadding = function (
 			$elm$core$Basics$floor(vSpace / 2));
 	}
 };
-var $mdgriffith$elm_ui$Internal$Flag$overflow = $mdgriffith$elm_ui$Internal$Flag$flag(20);
-var $mdgriffith$elm_ui$Element$clip = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$overflow, $mdgriffith$elm_ui$Internal$Style$classes.clip);
-var $mdgriffith$elm_ui$Element$rgb = F3(
-	function (r, g, b) {
-		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, r, g, b, 1);
-	});
 var $mdgriffith$elm_ui$Element$Input$darkGrey = A3($mdgriffith$elm_ui$Element$rgb, 186 / 255, 189 / 255, 182 / 255);
 var $mdgriffith$elm_ui$Element$Input$defaultTextPadding = A2($mdgriffith$elm_ui$Element$paddingXY, 12, 12);
 var $mdgriffith$elm_ui$Element$Input$white = A3($mdgriffith$elm_ui$Element$rgb, 1, 1, 1);
@@ -14222,9 +17070,6 @@ var $mdgriffith$elm_ui$Element$Input$getHeight = function (attr) {
 		return $elm$core$Maybe$Nothing;
 	}
 };
-var $mdgriffith$elm_ui$Internal$Model$Label = function (a) {
-	return {$: 'Label', a: a};
-};
 var $mdgriffith$elm_ui$Element$Input$hiddenLabelAttribute = function (label) {
 	if (label.$ === 'HiddenLabel') {
 		var textLabel = label.a;
@@ -14234,10 +17079,6 @@ var $mdgriffith$elm_ui$Element$Input$hiddenLabelAttribute = function (label) {
 		return $mdgriffith$elm_ui$Internal$Model$NoAttribute;
 	}
 };
-var $mdgriffith$elm_ui$Internal$Model$InFront = {$: 'InFront'};
-var $mdgriffith$elm_ui$Element$inFront = function (element) {
-	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$InFront, element);
-};
 var $mdgriffith$elm_ui$Element$Input$isConstrained = function (len) {
 	isConstrained:
 	while (true) {
@@ -14317,7 +17158,6 @@ var $elm$html$Html$Events$onInput = function (tagger) {
 			$elm$html$Html$Events$alwaysStop,
 			A2($elm$json$Json$Decode$map, tagger, $elm$html$Html$Events$targetValue)));
 };
-var $mdgriffith$elm_ui$Element$htmlAttribute = $mdgriffith$elm_ui$Internal$Model$Attr;
 var $mdgriffith$elm_ui$Element$Input$isFill = function (len) {
 	isFill:
 	while (true) {
@@ -14364,8 +17204,6 @@ var $mdgriffith$elm_ui$Element$Input$isPixel = function (len) {
 		}
 	}
 };
-var $elm$virtual_dom$VirtualDom$style = _VirtualDom_style;
-var $elm$html$Html$Attributes$style = $elm$virtual_dom$VirtualDom$style;
 var $mdgriffith$elm_ui$Element$Input$redistributeOver = F4(
 	function (isMultiline, stacked, attr, els) {
 		switch (attr.$) {
@@ -14879,942 +17717,164 @@ var $mdgriffith$elm_ui$Element$Input$text = $mdgriffith$elm_ui$Element$Input$tex
 		spellchecked: false,
 		type_: $mdgriffith$elm_ui$Element$Input$TextInputNode('text')
 	});
-var $author$project$Widget$FilterSelect$viewInput = F3(
-	function (attributes, model, _v0) {
-		var msgMapper = _v0.msgMapper;
-		var placeholder = _v0.placeholder;
-		var label = _v0.label;
-		return A2(
-			$mdgriffith$elm_ui$Element$Input$text,
-			attributes,
-			{
-				label: $mdgriffith$elm_ui$Element$Input$labelHidden(label),
-				onChange: A2($elm$core$Basics$composeR, $author$project$Widget$FilterSelect$ChangedRaw, msgMapper),
-				placeholder: placeholder,
-				text: model.raw
-			});
-	});
-var $elm$core$Dict$filter = F2(
-	function (isGood, dict) {
-		return A3(
-			$elm$core$Dict$foldl,
-			F3(
-				function (k, v, d) {
-					return A2(isGood, k, v) ? A3($elm$core$Dict$insert, k, v, d) : d;
-				}),
-			$elm$core$Dict$empty,
-			dict);
-	});
-var $elm$core$Set$filter = F2(
-	function (isGood, _v0) {
-		var dict = _v0.a;
-		return $elm$core$Set$Set_elm_builtin(
-			A2(
-				$elm$core$Dict$filter,
-				F2(
-					function (key, _v1) {
-						return isGood(key);
-					}),
-				dict));
-	});
-var $elm$core$String$toUpper = _String_toUpper;
-var $author$project$Widget$FilterSelect$viewOptions = function (_v0) {
-	var raw = _v0.raw;
-	var options = _v0.options;
-	return (raw === '') ? _List_Nil : $elm$core$Set$toList(
-		A2(
-			$elm$core$Set$filter,
-			A2(
-				$elm$core$Basics$composeR,
-				$elm$core$String$toUpper,
-				$elm$core$String$contains(
-					$elm$core$String$toUpper(raw))),
-			options));
-};
-var $elm$html$Html$Attributes$width = function (n) {
-	return A2(
-		_VirtualDom_attribute,
-		'width',
-		$elm$core$String$fromInt(n));
-};
-var $mdgriffith$elm_ui$Internal$Model$Padding = F5(
-	function (a, b, c, d, e) {
-		return {$: 'Padding', a: a, b: b, c: c, d: d, e: e};
-	});
-var $mdgriffith$elm_ui$Internal$Model$Spaced = F3(
-	function (a, b, c) {
-		return {$: 'Spaced', a: a, b: b, c: c};
-	});
-var $mdgriffith$elm_ui$Internal$Model$extractSpacingAndPadding = function (attrs) {
-	return A3(
-		$elm$core$List$foldr,
-		F2(
-			function (attr, _v0) {
-				var pad = _v0.a;
-				var spacing = _v0.b;
-				return _Utils_Tuple2(
-					function () {
-						if (pad.$ === 'Just') {
-							var x = pad.a;
-							return pad;
-						} else {
-							if ((attr.$ === 'StyleClass') && (attr.b.$ === 'PaddingStyle')) {
-								var _v3 = attr.b;
-								var name = _v3.a;
-								var t = _v3.b;
-								var r = _v3.c;
-								var b = _v3.d;
-								var l = _v3.e;
-								return $elm$core$Maybe$Just(
-									A5($mdgriffith$elm_ui$Internal$Model$Padding, name, t, r, b, l));
-							} else {
-								return $elm$core$Maybe$Nothing;
-							}
-						}
-					}(),
-					function () {
-						if (spacing.$ === 'Just') {
-							var x = spacing.a;
-							return spacing;
-						} else {
-							if ((attr.$ === 'StyleClass') && (attr.b.$ === 'SpacingStyle')) {
-								var _v6 = attr.b;
-								var name = _v6.a;
-								var x = _v6.b;
-								var y = _v6.c;
-								return $elm$core$Maybe$Just(
-									A3($mdgriffith$elm_ui$Internal$Model$Spaced, name, x, y));
-							} else {
-								return $elm$core$Maybe$Nothing;
-							}
-						}
-					}());
-			}),
-		_Utils_Tuple2($elm$core$Maybe$Nothing, $elm$core$Maybe$Nothing),
-		attrs);
-};
-var $mdgriffith$elm_ui$Element$wrappedRow = F2(
-	function (attrs, children) {
-		var _v0 = $mdgriffith$elm_ui$Internal$Model$extractSpacingAndPadding(attrs);
-		var padded = _v0.a;
-		var spaced = _v0.b;
-		if (spaced.$ === 'Nothing') {
-			return A4(
-				$mdgriffith$elm_ui$Internal$Model$element,
-				$mdgriffith$elm_ui$Internal$Model$asRow,
-				$mdgriffith$elm_ui$Internal$Model$div,
-				A2(
-					$elm$core$List$cons,
-					$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentLeft + (' ' + ($mdgriffith$elm_ui$Internal$Style$classes.contentCenterY + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.wrapped)))),
-					A2(
-						$elm$core$List$cons,
-						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
-						A2(
-							$elm$core$List$cons,
-							$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
-							attrs))),
-				$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
-		} else {
-			var _v2 = spaced.a;
-			var spaceName = _v2.a;
-			var x = _v2.b;
-			var y = _v2.c;
-			var newPadding = function () {
-				if (padded.$ === 'Just') {
-					var _v5 = padded.a;
-					var name = _v5.a;
-					var t = _v5.b;
-					var r = _v5.c;
-					var b = _v5.d;
-					var l = _v5.e;
-					return ((_Utils_cmp(r, (x / 2) | 0) > -1) && (_Utils_cmp(b, (y / 2) | 0) > -1)) ? $elm$core$Maybe$Just(
-						$mdgriffith$elm_ui$Element$paddingEach(
-							{bottom: b - ((y / 2) | 0), left: l - ((x / 2) | 0), right: r - ((x / 2) | 0), top: t - ((y / 2) | 0)})) : $elm$core$Maybe$Nothing;
-				} else {
-					return $elm$core$Maybe$Nothing;
-				}
-			}();
-			if (newPadding.$ === 'Just') {
-				var pad = newPadding.a;
-				return A4(
-					$mdgriffith$elm_ui$Internal$Model$element,
-					$mdgriffith$elm_ui$Internal$Model$asRow,
-					$mdgriffith$elm_ui$Internal$Model$div,
-					A2(
-						$elm$core$List$cons,
-						$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentLeft + (' ' + ($mdgriffith$elm_ui$Internal$Style$classes.contentCenterY + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.wrapped)))),
-						A2(
-							$elm$core$List$cons,
-							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
-							A2(
-								$elm$core$List$cons,
-								$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
-								_Utils_ap(
-									attrs,
-									_List_fromArray(
-										[pad]))))),
-					$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
-			} else {
-				var halfY = -(y / 2);
-				var halfX = -(x / 2);
-				return A4(
-					$mdgriffith$elm_ui$Internal$Model$element,
-					$mdgriffith$elm_ui$Internal$Model$asEl,
-					$mdgriffith$elm_ui$Internal$Model$div,
-					attrs,
-					$mdgriffith$elm_ui$Internal$Model$Unkeyed(
-						_List_fromArray(
-							[
-								A4(
-								$mdgriffith$elm_ui$Internal$Model$element,
-								$mdgriffith$elm_ui$Internal$Model$asRow,
-								$mdgriffith$elm_ui$Internal$Model$div,
-								A2(
-									$elm$core$List$cons,
-									$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentLeft + (' ' + ($mdgriffith$elm_ui$Internal$Style$classes.contentCenterY + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.wrapped)))),
-									A2(
-										$elm$core$List$cons,
-										$mdgriffith$elm_ui$Internal$Model$Attr(
-											A2(
-												$elm$html$Html$Attributes$style,
-												'margin',
-												$elm$core$String$fromFloat(halfY) + ('px' + (' ' + ($elm$core$String$fromFloat(halfX) + 'px'))))),
-										A2(
-											$elm$core$List$cons,
-											$mdgriffith$elm_ui$Internal$Model$Attr(
-												A2(
-													$elm$html$Html$Attributes$style,
-													'width',
-													'calc(100% + ' + ($elm$core$String$fromInt(x) + 'px)'))),
-											A2(
-												$elm$core$List$cons,
-												$mdgriffith$elm_ui$Internal$Model$Attr(
-													A2(
-														$elm$html$Html$Attributes$style,
-														'height',
-														'calc(100% + ' + ($elm$core$String$fromInt(y) + 'px)'))),
-												A2(
-													$elm$core$List$cons,
-													A2(
-														$mdgriffith$elm_ui$Internal$Model$StyleClass,
-														$mdgriffith$elm_ui$Internal$Flag$spacing,
-														A3($mdgriffith$elm_ui$Internal$Model$SpacingStyle, spaceName, x, y)),
-													_List_Nil))))),
-								$mdgriffith$elm_ui$Internal$Model$Unkeyed(children))
-							])));
-			}
-		}
-	});
-var $elm$svg$Svg$Attributes$clipRule = _VirtualDom_attribute('clip-rule');
-var $elm$svg$Svg$Attributes$fillRule = _VirtualDom_attribute('fill-rule');
-var $jasonliang512$elm_heroicons$Heroicons$Solid$x = function (attrs) {
-	return A2(
-		$elm$svg$Svg$svg,
-		A2(
-			$elm$core$List$cons,
-			$elm$svg$Svg$Attributes$viewBox('0 0 20 20'),
-			A2(
-				$elm$core$List$cons,
-				$elm$svg$Svg$Attributes$fill('currentColor'),
-				attrs)),
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$fillRule('evenodd'),
-						$elm$svg$Svg$Attributes$d('M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'),
-						$elm$svg$Svg$Attributes$clipRule('evenodd')
-					]),
-				_List_Nil)
-			]));
-};
-var $author$project$Component$filterSelect = function (model) {
-	return A2(
-		$mdgriffith$elm_ui$Element$column,
-		_Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Grid$simple,
-			_Utils_ap(
-				$Orasund$elm_ui_framework$Framework$Card$large,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
-					]))),
-		_List_fromArray(
-			[
-				A2(
-				$mdgriffith$elm_ui$Element$el,
-				$Orasund$elm_ui_framework$Framework$Heading$h3,
-				$mdgriffith$elm_ui$Element$text('Filter Select')),
-				function () {
-				var _v0 = model.selected;
-				if (_v0.$ === 'Just') {
-					var selected = _v0.a;
-					return A2(
-						$mdgriffith$elm_ui$Element$row,
-						$Orasund$elm_ui_framework$Framework$Grid$compact,
-						_List_fromArray(
-							[
-								A2(
-								$mdgriffith$elm_ui$Element$el,
-								_Utils_ap($Orasund$elm_ui_framework$Framework$Tag$simple, $Orasund$elm_ui_framework$Framework$Group$left),
-								$mdgriffith$elm_ui$Element$text(selected)),
-								A2(
-								$mdgriffith$elm_ui$Element$Input$button,
-								_Utils_ap(
-									$Orasund$elm_ui_framework$Framework$Tag$simple,
-									_Utils_ap($Orasund$elm_ui_framework$Framework$Group$right, $Orasund$elm_ui_framework$Framework$Color$danger)),
-								{
-									label: $mdgriffith$elm_ui$Element$html(
-										$jasonliang512$elm_heroicons$Heroicons$Solid$x(
-											_List_fromArray(
-												[
-													$elm$html$Html$Attributes$width(16)
-												]))),
-									onPress: $elm$core$Maybe$Just(
-										$author$project$Component$FilterSelectSpecific(
-											$author$project$Widget$FilterSelect$Selected($elm$core$Maybe$Nothing)))
-								})
-							]));
-				} else {
-					return A2(
-						$mdgriffith$elm_ui$Element$column,
-						$Orasund$elm_ui_framework$Framework$Grid$simple,
-						_List_fromArray(
-							[
-								A3(
-								$author$project$Widget$FilterSelect$viewInput,
-								$Orasund$elm_ui_framework$Framework$Input$simple,
-								model,
-								{
-									label: 'Fruit',
-									msgMapper: $author$project$Component$FilterSelectSpecific,
-									placeholder: $elm$core$Maybe$Just(
-										A2(
-											$mdgriffith$elm_ui$Element$Input$placeholder,
-											_List_Nil,
-											$mdgriffith$elm_ui$Element$text('Fruit')))
-								}),
-								A2(
-								$mdgriffith$elm_ui$Element$wrappedRow,
-								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$spacing(10)
-									]),
-								A2(
-									$elm$core$List$map,
-									function (string) {
-										return A2(
-											$mdgriffith$elm_ui$Element$Input$button,
-											_Utils_ap($Orasund$elm_ui_framework$Framework$Button$simple, $Orasund$elm_ui_framework$Framework$Tag$simple),
-											{
-												label: $mdgriffith$elm_ui$Element$text(string),
-												onPress: $elm$core$Maybe$Just(
-													$author$project$Component$FilterSelectSpecific(
-														$author$project$Widget$FilterSelect$Selected(
-															$elm$core$Maybe$Just(string))))
-											});
-									},
-									$author$project$Widget$FilterSelect$viewOptions(model)))
-							]));
-				}
-			}()
-			]));
-};
-var $Orasund$elm_ui_framework$Framework$Heading$h2 = $Orasund$elm_ui_framework$Framework$Heading$h(2);
-var $author$project$Component$scrollingNavCard = A2(
-	$mdgriffith$elm_ui$Element$column,
-	_Utils_ap(
-		$Orasund$elm_ui_framework$Framework$Grid$simple,
-		_Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Card$large,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
-				]))),
-	_List_fromArray(
-		[
-			A2(
-			$mdgriffith$elm_ui$Element$el,
-			$Orasund$elm_ui_framework$Framework$Heading$h3,
-			$mdgriffith$elm_ui$Element$text('Scrolling Nav')),
-			A2(
-			$mdgriffith$elm_ui$Element$paragraph,
-			_List_Nil,
-			$elm$core$List$singleton(
-				$mdgriffith$elm_ui$Element$text('Resize the screen and open the side-menu. Then start scrolling to see the scrolling navigation in action.')))
-		]));
-var $Orasund$elm_ui_framework$Framework$Grid$section = _Utils_ap(
-	$Orasund$elm_ui_framework$Framework$Grid$simple,
-	_List_fromArray(
-		[
-			$mdgriffith$elm_ui$Element$Border$widthEach(
-			{bottom: 0, left: 0, right: 0, top: 2}),
-			$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$lightGrey),
-			$mdgriffith$elm_ui$Element$paddingEach(
-			{bottom: 30, left: 0, right: 0, top: 10})
-		]));
-var $author$project$Component$ValidatedInputSpecific = function (a) {
-	return {$: 'ValidatedInputSpecific', a: a};
-};
-var $jasonliang512$elm_heroicons$Heroicons$Solid$pencil = function (attrs) {
-	return A2(
-		$elm$svg$Svg$svg,
-		A2(
-			$elm$core$List$cons,
-			$elm$svg$Svg$Attributes$viewBox('0 0 20 20'),
-			A2(
-				$elm$core$List$cons,
-				$elm$svg$Svg$Attributes$fill('currentColor'),
-				attrs)),
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$d('M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z')
-					]),
-				_List_Nil)
-			]));
-};
-var $author$project$Widget$ValidatedInput$ChangedRaw = function (a) {
-	return {$: 'ChangedRaw', a: a};
-};
-var $author$project$Widget$ValidatedInput$LostFocus = {$: 'LostFocus'};
-var $author$project$Widget$ValidatedInput$StartEditing = {$: 'StartEditing'};
-var $elm$html$Html$Events$onBlur = function (msg) {
-	return A2(
-		$elm$html$Html$Events$on,
-		'blur',
-		$elm$json$Json$Decode$succeed(msg));
-};
-var $mdgriffith$elm_ui$Element$Events$onLoseFocus = A2($elm$core$Basics$composeL, $mdgriffith$elm_ui$Internal$Model$Attr, $elm$html$Html$Events$onBlur);
-var $author$project$Widget$ValidatedInput$view = F3(
-	function (attributes, _v0, _v1) {
-		var model = _v0.a;
-		var msgMapper = _v1.msgMapper;
-		var placeholder = _v1.placeholder;
-		var label = _v1.label;
-		var readOnly = _v1.readOnly;
-		var _v2 = model.raw;
-		if (_v2.$ === 'Just') {
-			var string = _v2.a;
-			return A2(
-				$mdgriffith$elm_ui$Element$Input$text,
-				_Utils_ap(
-					attributes,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Events$onLoseFocus(
-							msgMapper($author$project$Widget$ValidatedInput$LostFocus))
-						])),
-				{
-					label: $mdgriffith$elm_ui$Element$Input$labelHidden(label),
-					onChange: A2($elm$core$Basics$composeR, $author$project$Widget$ValidatedInput$ChangedRaw, msgMapper),
-					placeholder: placeholder,
-					text: string
-				});
-		} else {
-			return A2(
-				$mdgriffith$elm_ui$Element$Input$button,
-				_List_Nil,
-				{
-					label: readOnly(model.value),
-					onPress: $elm$core$Maybe$Just(
-						msgMapper($author$project$Widget$ValidatedInput$StartEditing))
-				});
-		}
-	});
-var $author$project$Component$validatedInput = function (model) {
-	return A2(
-		$mdgriffith$elm_ui$Element$column,
-		_Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Grid$simple,
-			_Utils_ap(
-				$Orasund$elm_ui_framework$Framework$Card$large,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
-					]))),
-		_List_fromArray(
-			[
-				A2(
-				$mdgriffith$elm_ui$Element$el,
-				$Orasund$elm_ui_framework$Framework$Heading$h3,
-				$mdgriffith$elm_ui$Element$text('Validated Input')),
-				A3(
-				$author$project$Widget$ValidatedInput$view,
-				$Orasund$elm_ui_framework$Framework$Input$simple,
-				model,
-				{
-					label: 'First Name, Sir Name',
-					msgMapper: $author$project$Component$ValidatedInputSpecific,
-					placeholder: $elm$core$Maybe$Nothing,
-					readOnly: function (maybeTuple) {
-						return A2(
-							$mdgriffith$elm_ui$Element$row,
-							$Orasund$elm_ui_framework$Framework$Grid$compact,
-							_List_fromArray(
-								[
-									A2(
-									$mdgriffith$elm_ui$Element$el,
-									_Utils_ap($Orasund$elm_ui_framework$Framework$Tag$simple, $Orasund$elm_ui_framework$Framework$Group$left),
-									$mdgriffith$elm_ui$Element$text(
-										function (_v0) {
-											var a = _v0.a;
-											var b = _v0.b;
-											return a + (' ' + b);
-										}(maybeTuple))),
-									A2(
-									$mdgriffith$elm_ui$Element$el,
-									_Utils_ap(
-										$Orasund$elm_ui_framework$Framework$Tag$simple,
-										_Utils_ap($Orasund$elm_ui_framework$Framework$Group$right, $Orasund$elm_ui_framework$Framework$Color$primary)),
-									$mdgriffith$elm_ui$Element$html(
-										$jasonliang512$elm_heroicons$Heroicons$Solid$pencil(
-											_List_fromArray(
-												[
-													$elm$html$Html$Attributes$width(16)
-												]))))
-								]));
-					}
-				})
-			]));
-};
-var $author$project$Component$view = function (model) {
-	return A2(
-		$mdgriffith$elm_ui$Element$column,
-		_Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Grid$section,
-			_List_fromArray(
-				[$mdgriffith$elm_ui$Element$centerX])),
-		_List_fromArray(
-			[
-				A2(
-				$mdgriffith$elm_ui$Element$el,
-				$Orasund$elm_ui_framework$Framework$Heading$h2,
-				$mdgriffith$elm_ui$Element$text('Components')),
-				A2(
-				$mdgriffith$elm_ui$Element$paragraph,
-				_List_Nil,
-				$elm$core$List$singleton(
-					$mdgriffith$elm_ui$Element$text('Components have a Model, an Update- and sometimes even a Subscription-function. It takes some time to set them up correctly.'))),
-				A2(
-				$mdgriffith$elm_ui$Element$wrappedRow,
-				_Utils_ap(
-					$Orasund$elm_ui_framework$Framework$Grid$simple,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
-						])),
-				_List_fromArray(
-					[
-						$author$project$Component$filterSelect(model.filterSelect),
-						$author$project$Component$validatedInput(model.validatedInput),
-						$author$project$Component$scrollingNavCard
-					]))
-			]));
-};
-var $author$project$Layout$Left = {$: 'Left'};
-var $author$project$Layout$Right = {$: 'Right'};
-var $mdgriffith$elm_ui$Internal$Model$Bottom = {$: 'Bottom'};
-var $mdgriffith$elm_ui$Element$alignBottom = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$Bottom);
 var $author$project$Widget$Snackbar$current = function (model) {
 	return A2($elm$core$Maybe$map, $elm$core$Tuple$first, model.current);
 };
-var $elm$core$List$drop = F2(
-	function (n, list) {
-		drop:
-		while (true) {
-			if (n <= 0) {
-				return list;
-			} else {
-				if (!list.b) {
-					return list;
-				} else {
-					var x = list.a;
-					var xs = list.b;
-					var $temp$n = n - 1,
-						$temp$list = xs;
-					n = $temp$n;
-					list = $temp$list;
-					continue drop;
-				}
-			}
-		}
-	});
-var $author$project$Core$Style$menuButton = F2(
-	function (config, _v0) {
-		var label = _v0.label;
-		var icon = _v0.icon;
+var $author$project$Widget$textButton = F2(
+	function (style, _v0) {
+		var text = _v0.text;
 		var onPress = _v0.onPress;
 		return A2(
-			$mdgriffith$elm_ui$Element$Input$button,
-			config.menuButton,
-			{
-				label: A2(
-					$mdgriffith$elm_ui$Element$row,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$spacing(8)
-						]),
-					_List_fromArray(
-						[
-							A2($mdgriffith$elm_ui$Element$map, $elm$core$Basics$never, icon),
-							$mdgriffith$elm_ui$Element$text(label)
-						])),
-				onPress: onPress
-			});
+			$author$project$Internal$Button$textButton,
+			style,
+			{onPress: onPress, text: text});
 	});
-var $author$project$Core$Style$menuIconButton = F2(
-	function (config, _v0) {
-		var label = _v0.label;
-		var icon = _v0.icon;
-		var onPress = _v0.onPress;
+var $author$project$Widget$Snackbar$view = F3(
+	function (style, toMessage, model) {
 		return A2(
-			$mdgriffith$elm_ui$Element$Input$button,
-			config.menuButton,
-			{
-				label: A2($mdgriffith$elm_ui$Element$map, $elm$core$Basics$never, icon),
-				onPress: onPress
-			});
-	});
-var $author$project$Core$Style$menuTabButton = F2(
-	function (config, _v0) {
-		var label = _v0.label;
-		var icon = _v0.icon;
-		var onPress = _v0.onPress;
-		return A2(
-			$mdgriffith$elm_ui$Element$Input$button,
-			_Utils_ap(config.menuButton, config.tabButton),
-			{
-				label: A2(
-					$mdgriffith$elm_ui$Element$row,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$spacing(8)
-						]),
-					_List_fromArray(
-						[
-							A2($mdgriffith$elm_ui$Element$map, $elm$core$Basics$never, icon),
-							$mdgriffith$elm_ui$Element$text(label)
-						])),
-				onPress: onPress
-			});
-	});
-var $author$project$Core$Style$menuTabButtonSelected = F2(
-	function (config, _v0) {
-		var label = _v0.label;
-		var icon = _v0.icon;
-		var onPress = _v0.onPress;
-		return A2(
-			$mdgriffith$elm_ui$Element$Input$button,
-			_Utils_ap(
-				config.menuButton,
-				_Utils_ap(config.tabButton, config.tabButtonSelected)),
-			{
-				label: A2(
-					$mdgriffith$elm_ui$Element$row,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$spacing(8)
-						]),
-					_List_fromArray(
-						[
-							A2($mdgriffith$elm_ui$Element$map, $elm$core$Basics$never, icon),
-							$mdgriffith$elm_ui$Element$text(label)
-						])),
-				onPress: onPress
-			});
-	});
-var $mdgriffith$elm_ui$Element$rgba255 = F4(
-	function (red, green, blue, a) {
-		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, red / 255, green / 255, blue / 255, a);
-	});
-var $author$project$Widget$scrim = function (_v0) {
-	var onDismiss = _v0.onDismiss;
-	var content = _v0.content;
-	return $elm$core$List$singleton(
-		$mdgriffith$elm_ui$Element$inFront(
+			$elm$core$Maybe$map,
 			A2(
-				$mdgriffith$elm_ui$Element$el,
-				_Utils_ap(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-							$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
-							$mdgriffith$elm_ui$Element$Background$color(
-							A4($mdgriffith$elm_ui$Element$rgba255, 0, 0, 0, 0.5))
-						]),
-					A2(
-						$elm$core$Maybe$withDefault,
-						_List_Nil,
-						A2(
-							$elm$core$Maybe$map,
-							A2($elm$core$Basics$composeR, $mdgriffith$elm_ui$Element$Events$onClick, $elm$core$List$singleton),
-							onDismiss))),
-				content)));
-};
-var $author$project$Core$Style$sheetButton = F2(
-	function (config, _v0) {
-		var label = _v0.label;
-		var icon = _v0.icon;
-		var onPress = _v0.onPress;
-		return A2(
-			$mdgriffith$elm_ui$Element$Input$button,
-			config.sheetButton,
-			{
-				label: A2(
-					$mdgriffith$elm_ui$Element$row,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$spacing(8)
-						]),
-					_List_fromArray(
-						[
-							A2($mdgriffith$elm_ui$Element$map, $elm$core$Basics$never, icon),
-							$mdgriffith$elm_ui$Element$text(label)
-						])),
-				onPress: onPress
-			});
+				$elm$core$Basics$composeR,
+				toMessage,
+				function (_v0) {
+					var text = _v0.text;
+					var button = _v0.button;
+					return A2(
+						$mdgriffith$elm_ui$Element$row,
+						style.containerRow,
+						_List_fromArray(
+							[
+								A2(
+								$mdgriffith$elm_ui$Element$paragraph,
+								style.text,
+								$elm$core$List$singleton(
+									$mdgriffith$elm_ui$Element$text(text))),
+								A2(
+								$elm$core$Maybe$withDefault,
+								$mdgriffith$elm_ui$Element$none,
+								A2(
+									$elm$core$Maybe$map,
+									$author$project$Widget$textButton(style.button),
+									button))
+							]));
+				}),
+			$author$project$Widget$Snackbar$current(model));
 	});
-var $author$project$Core$Style$sheetButtonSelected = F2(
-	function (config, _v0) {
-		var label = _v0.label;
-		var icon = _v0.icon;
-		var onPress = _v0.onPress;
-		return A2(
-			$mdgriffith$elm_ui$Element$Input$button,
-			_Utils_ap(config.sheetButton, config.sheetButtonSelected),
-			{
-				label: A2(
-					$mdgriffith$elm_ui$Element$row,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$spacing(8)
-						]),
-					_List_fromArray(
-						[
-							A2($mdgriffith$elm_ui$Element$map, $elm$core$Basics$never, icon),
-							$mdgriffith$elm_ui$Element$text(label)
-						])),
-				onPress: onPress
-			});
-	});
-var $mdgriffith$elm_ui$Element$spaceEvenly = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$spacing, $mdgriffith$elm_ui$Internal$Style$classes.spaceEvenly);
-var $elm$core$List$takeReverse = F3(
-	function (n, list, kept) {
-		takeReverse:
-		while (true) {
-			if (n <= 0) {
-				return kept;
-			} else {
-				if (!list.b) {
-					return kept;
-				} else {
-					var x = list.a;
-					var xs = list.b;
-					var $temp$n = n - 1,
-						$temp$list = xs,
-						$temp$kept = A2($elm$core$List$cons, x, kept);
-					n = $temp$n;
-					list = $temp$list;
-					kept = $temp$kept;
-					continue takeReverse;
-				}
-			}
-		}
-	});
-var $elm$core$List$takeTailRec = F2(
-	function (n, list) {
-		return $elm$core$List$reverse(
-			A3($elm$core$List$takeReverse, n, list, _List_Nil));
-	});
-var $elm$core$List$takeFast = F3(
-	function (ctr, n, list) {
-		if (n <= 0) {
-			return _List_Nil;
-		} else {
-			var _v0 = _Utils_Tuple2(n, list);
-			_v0$1:
-			while (true) {
-				_v0$5:
-				while (true) {
-					if (!_v0.b.b) {
-						return list;
-					} else {
-						if (_v0.b.b.b) {
-							switch (_v0.a) {
-								case 1:
-									break _v0$1;
-								case 2:
-									var _v2 = _v0.b;
-									var x = _v2.a;
-									var _v3 = _v2.b;
-									var y = _v3.a;
-									return _List_fromArray(
-										[x, y]);
-								case 3:
-									if (_v0.b.b.b.b) {
-										var _v4 = _v0.b;
-										var x = _v4.a;
-										var _v5 = _v4.b;
-										var y = _v5.a;
-										var _v6 = _v5.b;
-										var z = _v6.a;
-										return _List_fromArray(
-											[x, y, z]);
-									} else {
-										break _v0$5;
-									}
-								default:
-									if (_v0.b.b.b.b && _v0.b.b.b.b.b) {
-										var _v7 = _v0.b;
-										var x = _v7.a;
-										var _v8 = _v7.b;
-										var y = _v8.a;
-										var _v9 = _v8.b;
-										var z = _v9.a;
-										var _v10 = _v9.b;
-										var w = _v10.a;
-										var tl = _v10.b;
-										return (ctr > 1000) ? A2(
-											$elm$core$List$cons,
-											x,
-											A2(
-												$elm$core$List$cons,
-												y,
-												A2(
-													$elm$core$List$cons,
-													z,
-													A2(
-														$elm$core$List$cons,
-														w,
-														A2($elm$core$List$takeTailRec, n - 4, tl))))) : A2(
-											$elm$core$List$cons,
-											x,
-											A2(
-												$elm$core$List$cons,
-												y,
-												A2(
-													$elm$core$List$cons,
-													z,
-													A2(
-														$elm$core$List$cons,
-														w,
-														A3($elm$core$List$takeFast, ctr + 1, n - 4, tl)))));
-									} else {
-										break _v0$5;
-									}
-							}
-						} else {
-							if (_v0.a === 1) {
-								break _v0$1;
-							} else {
-								break _v0$5;
-							}
-						}
-					}
-				}
-				return list;
-			}
-			var _v1 = _v0.b;
-			var x = _v1.a;
-			return _List_fromArray(
-				[x]);
-		}
-	});
-var $elm$core$List$take = F2(
-	function (n, list) {
-		return A3($elm$core$List$takeFast, 0, n, list);
-	});
-var $author$project$Layout$view = F2(
-	function (attributes, _v0) {
+var $author$project$Widget$Layout$view = F3(
+	function (style, _v0, content) {
+		var search = _v0.search;
 		var title = _v0.title;
 		var onChangedSidebar = _v0.onChangedSidebar;
 		var menu = _v0.menu;
 		var actions = _v0.actions;
-		var deviceClass = _v0.deviceClass;
+		var window = _v0.window;
 		var dialog = _v0.dialog;
-		var content = _v0.content;
-		var style = _v0.style;
 		var layout = _v0.layout;
 		var snackbar = A2(
 			$elm$core$Maybe$withDefault,
 			$mdgriffith$elm_ui$Element$none,
 			A2(
 				$elm$core$Maybe$map,
-				A2(
-					$elm$core$Basics$composeR,
-					$mdgriffith$elm_ui$Element$text,
-					A2(
-						$elm$core$Basics$composeR,
-						$elm$core$List$singleton,
-						A2(
-							$elm$core$Basics$composeR,
-							$mdgriffith$elm_ui$Element$paragraph(style.snackbar),
-							$mdgriffith$elm_ui$Element$el(
-								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$padding(8),
-										$mdgriffith$elm_ui$Element$alignBottom,
-										$mdgriffith$elm_ui$Element$alignRight
-									]))))),
-				$author$project$Widget$Snackbar$current(layout.snackbar)));
+				$mdgriffith$elm_ui$Element$el(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$padding(style.spacing),
+							$mdgriffith$elm_ui$Element$alignBottom,
+							$mdgriffith$elm_ui$Element$alignRight
+						])),
+				A3($author$project$Widget$Snackbar$view, style.snackbar, $elm$core$Basics$identity, layout.snackbar)));
+		var deviceClass = $mdgriffith$elm_ui$Element$classifyDevice(window)._class;
 		var _v1 = _Utils_Tuple2(
 			($elm$core$List$length(actions) > 4) ? A2($elm$core$List$take, 2, actions) : (($elm$core$List$length(actions) === 4) ? A2($elm$core$List$take, 1, actions) : (($elm$core$List$length(actions) === 3) ? _List_Nil : A2($elm$core$List$take, 2, actions))),
 			($elm$core$List$length(actions) > 4) ? A2($elm$core$List$drop, 2, actions) : (($elm$core$List$length(actions) === 4) ? A2($elm$core$List$drop, 1, actions) : (($elm$core$List$length(actions) === 3) ? actions : A2($elm$core$List$drop, 2, actions))));
 		var primaryActions = _v1.a;
 		var moreActions = _v1.b;
 		var sheet = function () {
-			var _v4 = layout.sheet;
-			if (_v4.$ === 'Just') {
-				if (_v4.a.$ === 'Left') {
-					var _v5 = _v4.a;
-					return A2(
-						$mdgriffith$elm_ui$Element$el,
-						_Utils_ap(
-							style.sheet,
-							_List_fromArray(
-								[
-									$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
-									$mdgriffith$elm_ui$Element$alignLeft
-								])),
-						A2(
-							$mdgriffith$elm_ui$Element$column,
-							_List_fromArray(
-								[
-									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-								]),
+			var _v5 = layout.active;
+			if (_v5.$ === 'Just') {
+				switch (_v5.a.$) {
+					case 'LeftSheet':
+						var _v6 = _v5.a;
+						return A2(
+							$mdgriffith$elm_ui$Element$el,
+							_Utils_ap(
+								style.sheet,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+										$mdgriffith$elm_ui$Element$alignLeft
+									])),
 							A2(
-								$elm$core$List$indexedMap,
-								function (i) {
-									return _Utils_eq(i, menu.selected) ? $author$project$Core$Style$sheetButtonSelected(style) : $author$project$Core$Style$sheetButton(style);
-								},
-								menu.items)));
-				} else {
-					var _v6 = _v4.a;
-					return A2(
-						$mdgriffith$elm_ui$Element$el,
-						_Utils_ap(
-							style.sheet,
-							_List_fromArray(
-								[
-									$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
-									$mdgriffith$elm_ui$Element$alignRight
-								])),
-						A2(
-							$mdgriffith$elm_ui$Element$column,
-							_List_fromArray(
-								[
-									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-								]),
+								$mdgriffith$elm_ui$Element$column,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+									]),
+								$elm$core$List$concat(
+									_List_fromArray(
+										[
+											_List_fromArray(
+											[title]),
+											A2(
+											$elm$core$List$map,
+											$author$project$Widget$selectButton(style.sheetButton),
+											$author$project$Widget$select(menu))
+										]))));
+					case 'RightSheet':
+						var _v7 = _v5.a;
+						return A2(
+							$mdgriffith$elm_ui$Element$el,
+							_Utils_ap(
+								style.sheet,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+										$mdgriffith$elm_ui$Element$alignRight
+									])),
 							A2(
-								$elm$core$List$map,
-								$author$project$Core$Style$sheetButton(style),
-								moreActions)));
+								$mdgriffith$elm_ui$Element$column,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+									]),
+								A2(
+									$elm$core$List$map,
+									$author$project$Widget$button(style.sheetButton),
+									moreActions)));
+					default:
+						var _v8 = _v5.a;
+						if (search.$ === 'Just') {
+							var onChange = search.a.onChange;
+							var text = search.a.text;
+							var label = search.a.label;
+							return A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$alignTop,
+										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+									]),
+								A2(
+									$mdgriffith$elm_ui$Element$Input$text,
+									_Utils_ap(
+										style.searchFill,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+											])),
+									{
+										label: $mdgriffith$elm_ui$Element$Input$labelHidden(label),
+										onChange: onChange,
+										placeholder: $elm$core$Maybe$Just(
+											A2(
+												$mdgriffith$elm_ui$Element$Input$placeholder,
+												_List_Nil,
+												$mdgriffith$elm_ui$Element$text(label))),
+										text: text
+									}));
+						} else {
+							return $mdgriffith$elm_ui$Element$none;
+						}
 				}
 			} else {
 				return $mdgriffith$elm_ui$Element$none;
@@ -15828,7 +17888,7 @@ var $author$project$Layout$view = F2(
 					[
 						$mdgriffith$elm_ui$Element$padding(0),
 						$mdgriffith$elm_ui$Element$centerX,
-						$mdgriffith$elm_ui$Element$spaceEvenly,
+						$mdgriffith$elm_ui$Element$spacing(style.spacing),
 						$mdgriffith$elm_ui$Element$alignTop,
 						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
 					])),
@@ -15839,23 +17899,46 @@ var $author$project$Layout$view = F2(
 					_List_fromArray(
 						[
 							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
-							$mdgriffith$elm_ui$Element$spacing(8)
+							$mdgriffith$elm_ui$Element$spacing(style.spacing)
 						]),
-					(_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) || (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Tablet) || ($elm$core$List$length(menu.items) > 5))) ? _List_fromArray(
+					(_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) || (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Tablet) || ($elm$core$List$length(menu.options) > 5))) ? _List_fromArray(
 						[
 							A2(
-							$mdgriffith$elm_ui$Element$Input$button,
+							$author$project$Widget$iconButton,
 							style.menuButton,
 							{
-								label: A2($mdgriffith$elm_ui$Element$map, $elm$core$Basics$never, style.menuIcon),
+								icon: A2($mdgriffith$elm_ui$Element$map, $elm$core$Basics$never, style.menuIcon),
 								onPress: $elm$core$Maybe$Just(
 									onChangedSidebar(
-										$elm$core$Maybe$Just($author$project$Layout$Left)))
+										$elm$core$Maybe$Just($author$project$Widget$Layout$LeftSheet))),
+								text: 'Menu'
 							}),
-							title
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							style.title,
+							A2(
+								$elm$core$Maybe$withDefault,
+								title,
+								A2(
+									$elm$core$Maybe$map,
+									A2(
+										$elm$core$Basics$composeR,
+										function ($) {
+											return $.text;
+										},
+										$mdgriffith$elm_ui$Element$text),
+									A2(
+										$elm$core$Maybe$andThen,
+										function (option) {
+											return A2(
+												$elm$core$Array$get,
+												option,
+												$elm$core$Array$fromList(menu.options));
+										},
+										menu.selected))))
 						]) : _List_fromArray(
 						[
-							title,
+							A2($mdgriffith$elm_ui$Element$el, style.title, title),
 							A2(
 							$mdgriffith$elm_ui$Element$row,
 							_List_fromArray(
@@ -15863,12 +17946,34 @@ var $author$project$Layout$view = F2(
 									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
 								]),
 							A2(
-								$elm$core$List$indexedMap,
-								function (i) {
-									return _Utils_eq(i, menu.selected) ? $author$project$Core$Style$menuTabButtonSelected(style) : $author$project$Core$Style$menuTabButton(style);
-								},
-								menu.items))
+								$elm$core$List$map,
+								$author$project$Widget$selectButton(style.menuTabButton),
+								$author$project$Widget$select(menu)))
 						])),
+					(_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) || _Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Tablet)) ? $mdgriffith$elm_ui$Element$none : A2(
+					$elm$core$Maybe$withDefault,
+					$mdgriffith$elm_ui$Element$none,
+					A2(
+						$elm$core$Maybe$map,
+						function (_v3) {
+							var onChange = _v3.onChange;
+							var text = _v3.text;
+							var label = _v3.label;
+							return A2(
+								$mdgriffith$elm_ui$Element$Input$text,
+								style.search,
+								{
+									label: $mdgriffith$elm_ui$Element$Input$labelHidden(label),
+									onChange: onChange,
+									placeholder: $elm$core$Maybe$Just(
+										A2(
+											$mdgriffith$elm_ui$Element$Input$placeholder,
+											_List_Nil,
+											$mdgriffith$elm_ui$Element$text(label))),
+									text: text
+								});
+						},
+						search)),
 					A2(
 					$mdgriffith$elm_ui$Element$row,
 					_List_fromArray(
@@ -15880,20 +17985,54 @@ var $author$project$Layout$view = F2(
 						_List_fromArray(
 							[
 								A2(
+								$elm$core$Maybe$withDefault,
+								_List_Nil,
+								A2(
+									$elm$core$Maybe$map,
+									function (_v4) {
+										var label = _v4.label;
+										return _Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Tablet) ? _List_fromArray(
+											[
+												A2(
+												$author$project$Widget$button,
+												style.menuButton,
+												{
+													icon: style.searchIcon,
+													onPress: $elm$core$Maybe$Just(
+														onChangedSidebar(
+															$elm$core$Maybe$Just($author$project$Widget$Layout$Search))),
+													text: label
+												})
+											]) : (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) ? _List_fromArray(
+											[
+												A2(
+												$author$project$Widget$iconButton,
+												style.menuButton,
+												{
+													icon: style.searchIcon,
+													onPress: $elm$core$Maybe$Just(
+														onChangedSidebar(
+															$elm$core$Maybe$Just($author$project$Widget$Layout$Search))),
+													text: label
+												})
+											]) : _List_Nil);
+									},
+									search)),
+								A2(
 								$elm$core$List$map,
-								_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) ? $author$project$Core$Style$menuIconButton(style) : $author$project$Core$Style$menuButton(style),
+								_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) ? $author$project$Widget$iconButton(style.menuButton) : $author$project$Widget$button(style.menuButton),
 								primaryActions),
 								$elm$core$List$isEmpty(moreActions) ? _List_Nil : _List_fromArray(
 								[
 									A2(
-									$author$project$Core$Style$menuButton,
-									style,
+									$author$project$Widget$iconButton,
+									style.menuButton,
 									{
 										icon: style.moreVerticalIcon,
-										label: '',
 										onPress: $elm$core$Maybe$Just(
 											onChangedSidebar(
-												$elm$core$Maybe$Just($author$project$Layout$Right)))
+												$elm$core$Maybe$Just($author$project$Widget$Layout$RightSheet))),
+										text: 'More'
 									})
 								])
 							])))
@@ -15903,163 +18042,738 @@ var $author$project$Layout$view = F2(
 			$elm$core$List$concat(
 				_List_fromArray(
 					[
-						attributes,
+						style.container,
 						_List_fromArray(
 						[
 							$mdgriffith$elm_ui$Element$inFront(nav),
 							$mdgriffith$elm_ui$Element$inFront(snackbar)
 						]),
-						((!_Utils_eq(layout.sheet, $elm$core$Maybe$Nothing)) || (!_Utils_eq(dialog, $elm$core$Maybe$Nothing))) ? $author$project$Widget$scrim(
-						{
-							content: $mdgriffith$elm_ui$Element$none,
-							onDismiss: $elm$core$Maybe$Just(
-								function () {
-									if (dialog.$ === 'Just') {
-										var onDismiss = dialog.a.onDismiss;
-										return A2(
-											$elm$core$Maybe$withDefault,
-											onChangedSidebar($elm$core$Maybe$Nothing),
-											onDismiss);
-									} else {
-										return onChangedSidebar($elm$core$Maybe$Nothing);
-									}
-								}())
-						}) : _List_Nil,
-						_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$inFront(sheet),
-							$mdgriffith$elm_ui$Element$inFront(
-							function () {
-								if (dialog.$ === 'Just') {
-									var element = dialog.a;
-									return element.content;
-								} else {
-									return $mdgriffith$elm_ui$Element$none;
-								}
-							}())
-						])
+						function () {
+						if ((!_Utils_eq(layout.active, $elm$core$Maybe$Nothing)) || (!_Utils_eq(dialog, $elm$core$Maybe$Nothing))) {
+							if (dialog.$ === 'Just') {
+								var dialogConfig = dialog.a;
+								return dialogConfig;
+							} else {
+								return $author$project$Widget$modal(
+									{
+										content: sheet,
+										onDismiss: $elm$core$Maybe$Just(
+											onChangedSidebar($elm$core$Maybe$Nothing))
+									});
+							}
+						} else {
+							return _List_Nil;
+						}
+					}()
 					])),
 			content);
 	});
-var $author$project$Reusable$snackbar = function (addSnackbar) {
-	return A2(
-		$mdgriffith$elm_ui$Element$column,
-		_Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Grid$simple,
-			_Utils_ap(
-				$Orasund$elm_ui_framework$Framework$Card$large,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
-					]))),
-		_List_fromArray(
-			[
-				A2(
-				$mdgriffith$elm_ui$Element$el,
-				$Orasund$elm_ui_framework$Framework$Heading$h3,
-				$mdgriffith$elm_ui$Element$text('Snackbar')),
-				A2(
-				$mdgriffith$elm_ui$Element$Input$button,
-				$Orasund$elm_ui_framework$Framework$Button$simple,
-				{
-					label: A2(
-						$mdgriffith$elm_ui$Element$paragraph,
-						_List_Nil,
-						$elm$core$List$singleton(
-							$mdgriffith$elm_ui$Element$text('Add Notification'))),
-					onPress: $elm$core$Maybe$Just(
-						addSnackbar('This is a notification. It will disappear after 10 seconds.'))
-				})
-			]));
+var $author$project$Data$Section$ReusableViews = {$: 'ReusableViews'};
+var $author$project$Data$Section$StatelessViews = {$: 'StatelessViews'};
+var $author$project$Main$ToggledExample = function (a) {
+	return {$: 'ToggledExample', a: a};
 };
-var $author$project$Reusable$SortBy = function (a) {
-	return {$: 'SortBy', a: a};
-};
-var $jasonliang512$elm_heroicons$Heroicons$Solid$cheveronDown = function (attrs) {
+var $author$project$Internal$List$internal = F2(
+	function (style, list) {
+		return A2(
+			$elm$core$List$indexedMap,
+			function (i) {
+				return $mdgriffith$elm_ui$Element$el(
+					_Utils_ap(
+						style.element,
+						($elm$core$List$length(list) === 1) ? _List_Nil : ((!i) ? style.ifFirst : (_Utils_eq(
+							i,
+							$elm$core$List$length(list) - 1) ? style.ifLast : style.otherwise))));
+			},
+			list);
+	});
+var $author$project$Internal$List$column = function (style) {
 	return A2(
-		$elm$svg$Svg$svg,
+		$elm$core$Basics$composeR,
+		$author$project$Internal$List$internal(style),
+		$mdgriffith$elm_ui$Element$column(style.containerColumn));
+};
+var $author$project$Widget$column = $author$project$Internal$List$column;
+var $author$project$Internal$ExpansionPanel$expansionPanel = F2(
+	function (style, model) {
+		return A2(
+			$mdgriffith$elm_ui$Element$column,
+			style.containerColumn,
+			_List_fromArray(
+				[
+					A2(
+					$mdgriffith$elm_ui$Element$row,
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$Events$onClick(
+							model.onToggle(!model.isExpanded)),
+						style.panelRow),
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Element$row,
+							style.labelRow,
+							_List_fromArray(
+								[
+									A2($mdgriffith$elm_ui$Element$map, $elm$core$Basics$never, model.icon),
+									$mdgriffith$elm_ui$Element$text(model.text)
+								])),
+							A2(
+							$mdgriffith$elm_ui$Element$map,
+							$elm$core$Basics$never,
+							model.isExpanded ? style.collapseIcon : style.expandIcon)
+						])),
+					model.isExpanded ? A2($mdgriffith$elm_ui$Element$el, style.content, model.content) : $mdgriffith$elm_ui$Element$none
+				]));
+	});
+var $author$project$Widget$expansionPanel = $author$project$Internal$ExpansionPanel$expansionPanel;
+var $elm$html$Html$Attributes$id = $elm$html$Html$Attributes$stringProperty('id');
+var $Orasund$elm_ui_framework$Framework$Grid$section = _Utils_ap(
+	$Orasund$elm_ui_framework$Framework$Grid$simple,
+	_List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Border$widthEach(
+			{bottom: 0, left: 0, right: 0, top: 2}),
+			$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$lightGrey),
+			$mdgriffith$elm_ui$Element$paddingEach(
+			{bottom: 30, left: 0, right: 0, top: 10})
+		]));
+var $author$project$Reusable$layout = function (_v0) {
+	return _Utils_Tuple3(
+		'Layout',
 		A2(
-			$elm$core$List$cons,
-			$elm$svg$Svg$Attributes$viewBox('0 0 20 20'),
-			A2(
-				$elm$core$List$cons,
-				$elm$svg$Svg$Attributes$fill('currentColor'),
-				attrs)),
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$fillRule('evenodd'),
-						$elm$svg$Svg$Attributes$d('M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'),
-						$elm$svg$Svg$Attributes$clipRule('evenodd')
-					]),
-				_List_Nil)
-			]));
+			$mdgriffith$elm_ui$Element$paragraph,
+			_List_Nil,
+			$elm$core$List$singleton(
+				$mdgriffith$elm_ui$Element$text('The layout combines the menu bar, both side bar, the dialog window and the snackbar. Try using all of them and also try resizing the window to see how they interact with each other.'))),
+		$mdgriffith$elm_ui$Element$none);
 };
-var $jasonliang512$elm_heroicons$Heroicons$Solid$cheveronUp = function (attrs) {
-	return A2(
-		$elm$svg$Svg$svg,
+var $author$project$Reusable$scrollingNavCard = function (_v0) {
+	return _Utils_Tuple3(
+		'Scrolling Nav',
 		A2(
-			$elm$core$List$cons,
-			$elm$svg$Svg$Attributes$viewBox('0 0 20 20'),
+			$mdgriffith$elm_ui$Element$paragraph,
+			_List_Nil,
+			$elm$core$List$singleton(
+				$mdgriffith$elm_ui$Element$text('Resize the screen and open the side-menu. Then start scrolling to see the scrolling navigation in action.'))),
+		$mdgriffith$elm_ui$Element$none);
+};
+var $author$project$Reusable$snackbar = F2(
+	function (style, addSnackbar) {
+		return _Utils_Tuple3(
+			'Snackbar',
 			A2(
-				$elm$core$List$cons,
-				$elm$svg$Svg$Attributes$fill('currentColor'),
-				attrs)),
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
+				$mdgriffith$elm_ui$Element$column,
+				$Orasund$elm_ui_framework$Framework$Grid$simple,
 				_List_fromArray(
 					[
-						$elm$svg$Svg$Attributes$fillRule('evenodd'),
-						$elm$svg$Svg$Attributes$d('M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z'),
-						$elm$svg$Svg$Attributes$clipRule('evenodd')
-					]),
-				_List_Nil)
-			]));
+						A2(
+						$author$project$Widget$button,
+						style.button,
+						{
+							icon: $mdgriffith$elm_ui$Element$none,
+							onPress: $elm$core$Maybe$Just(
+								addSnackbar(
+									_Utils_Tuple2('This is a notification. It will disappear after 10 seconds.', false))),
+							text: 'Add Notification'
+						}),
+						A2(
+						$author$project$Widget$button,
+						style.button,
+						{
+							icon: $mdgriffith$elm_ui$Element$none,
+							onPress: $elm$core$Maybe$Just(
+								addSnackbar(
+									_Utils_Tuple2('You can add another notification if you want.', true))),
+							text: 'Add Notification with Action'
+						})
+					])),
+			$mdgriffith$elm_ui$Element$none);
+	});
+var $author$project$Reusable$view = function (_v0) {
+	var theme = _v0.theme;
+	var addSnackbar = _v0.addSnackbar;
+	var style = $author$project$Data$Theme$toStyle(theme);
+	return {
+		description: 'Reusable views have an internal state but no update function. You will need to do some wiring, but nothing complicated.',
+		items: _List_fromArray(
+			[
+				A2($author$project$Reusable$snackbar, style, addSnackbar),
+				$author$project$Reusable$scrollingNavCard(style),
+				$author$project$Reusable$layout(style)
+			]),
+		title: 'Reusable Views'
+	};
 };
-var $author$project$Widget$SortTable$FloatColumn = function (a) {
+var $author$project$Stateless$Idle = {$: 'Idle'};
+var $author$project$Data$Example$get = function (example) {
+	switch (example.$) {
+		case 'ButtonExample':
+			return function ($) {
+				return $.button;
+			};
+		case 'SelectExample':
+			return function ($) {
+				return $.select;
+			};
+		case 'MultiSelectExample':
+			return function ($) {
+				return $.multiSelect;
+			};
+		case 'ExpansionPanelExample':
+			return function ($) {
+				return $.expansionPanel;
+			};
+		case 'TabExample':
+			return function ($) {
+				return $.tab;
+			};
+		case 'SortTableExample':
+			return function ($) {
+				return $.sortTable;
+			};
+		case 'ModalExample':
+			return function ($) {
+				return $.modal;
+			};
+		case 'DialogExample':
+			return function ($) {
+				return $.dialog;
+			};
+		case 'TextInputExample':
+			return function ($) {
+				return $.textInput;
+			};
+		default:
+			return function ($) {
+				return $.list;
+			};
+	}
+};
+var $author$project$Icons$triangle = A2(
+	$author$project$Icons$svgFeatherIcon,
+	'triangle',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$View$Test$button = F2(
+	function (idle, style) {
+		return _List_fromArray(
+			[
+				_Utils_Tuple2(
+				'Button',
+				A2(
+					$author$project$Widget$button,
+					style.button,
+					{
+						icon: A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_Nil,
+							$mdgriffith$elm_ui$Element$html($author$project$Icons$triangle)),
+						onPress: $elm$core$Maybe$Just(idle),
+						text: 'Button'
+					})),
+				_Utils_Tuple2(
+				'Text button',
+				A2(
+					$author$project$Widget$textButton,
+					style.button,
+					{
+						onPress: $elm$core$Maybe$Just(idle),
+						text: 'Button'
+					})),
+				_Utils_Tuple2(
+				'Icon button',
+				A2(
+					$author$project$Widget$iconButton,
+					style.button,
+					{
+						icon: A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_Nil,
+							$mdgriffith$elm_ui$Element$html($author$project$Icons$triangle)),
+						onPress: $elm$core$Maybe$Just(idle),
+						text: 'Button'
+					})),
+				_Utils_Tuple2(
+				'Disabled button',
+				A2(
+					$author$project$Widget$button,
+					style.button,
+					{
+						icon: A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_Nil,
+							$mdgriffith$elm_ui$Element$html($author$project$Icons$triangle)),
+						onPress: $elm$core$Maybe$Nothing,
+						text: 'Button'
+					})),
+				_Utils_Tuple2(
+				'Inactive Select button',
+				A2(
+					$author$project$Widget$selectButton,
+					style.button,
+					_Utils_Tuple2(
+						false,
+						{
+							icon: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_Nil,
+								$mdgriffith$elm_ui$Element$html($author$project$Icons$triangle)),
+							onPress: $elm$core$Maybe$Just(idle),
+							text: 'Button'
+						}))),
+				_Utils_Tuple2(
+				'Active Select button',
+				A2(
+					$author$project$Widget$selectButton,
+					style.button,
+					_Utils_Tuple2(
+						true,
+						{
+							icon: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_Nil,
+								$mdgriffith$elm_ui$Element$html($author$project$Icons$triangle)),
+							onPress: $elm$core$Maybe$Just(idle),
+							text: 'Button'
+						})))
+			]);
+	});
+var $author$project$View$Test$dialog = F2(
+	function (_v0, _v1) {
+		return _List_Nil;
+	});
+var $author$project$View$Test$expansionPanel = F2(
+	function (idle, style) {
+		return _List_fromArray(
+			[
+				_Utils_Tuple2(
+				'Collapsed',
+				A2(
+					$author$project$Widget$expansionPanel,
+					style.expansionPanel,
+					{
+						content: $mdgriffith$elm_ui$Element$text('Hidden Message'),
+						icon: A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_Nil,
+							$mdgriffith$elm_ui$Element$html($author$project$Icons$triangle)),
+						isExpanded: false,
+						onToggle: $elm$core$Basics$always(idle),
+						text: 'Button'
+					})),
+				_Utils_Tuple2(
+				'Expanded',
+				A2(
+					$author$project$Widget$expansionPanel,
+					style.expansionPanel,
+					{
+						content: $mdgriffith$elm_ui$Element$text('Hidden Message'),
+						icon: A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_Nil,
+							$mdgriffith$elm_ui$Element$html($author$project$Icons$triangle)),
+						isExpanded: true,
+						onToggle: $elm$core$Basics$always(idle),
+						text: 'Button'
+					}))
+			]);
+	});
+var $author$project$Internal$List$row = function (style) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$author$project$Internal$List$internal(style),
+		$mdgriffith$elm_ui$Element$row(style.containerRow));
+};
+var $author$project$Widget$row = $author$project$Internal$List$row;
+var $author$project$View$Test$list = F2(
+	function (_v0, style) {
+		return _List_fromArray(
+			[
+				_Utils_Tuple2(
+				'Row',
+				A2(
+					$author$project$Widget$row,
+					style.row,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$text('A'),
+							$mdgriffith$elm_ui$Element$text('B'),
+							$mdgriffith$elm_ui$Element$text('C')
+						]))),
+				_Utils_Tuple2(
+				'Column',
+				A2(
+					$author$project$Widget$column,
+					style.cardColumn,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$text('A'),
+							$mdgriffith$elm_ui$Element$text('B'),
+							$mdgriffith$elm_ui$Element$text('C')
+						]))),
+				_Utils_Tuple2(
+				'Singleton List',
+				A2(
+					$author$project$Widget$column,
+					style.cardColumn,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$text('A')
+						]))),
+				_Utils_Tuple2(
+				'Empty List',
+				A2($author$project$Widget$column, style.cardColumn, _List_Nil))
+			]);
+	});
+var $author$project$View$Test$modal = F2(
+	function (_v0, _v1) {
+		return _List_Nil;
+	});
+var $author$project$Internal$List$internalButton = F2(
+	function (style, list) {
+		return A2(
+			$elm$core$List$indexedMap,
+			function (i) {
+				return A2(
+					$elm$core$Basics$composeR,
+					$author$project$Internal$Select$selectButton(
+						{
+							container: _Utils_ap(
+								style.button.container,
+								_Utils_ap(
+									style.list.element,
+									($elm$core$List$length(list) === 1) ? _List_Nil : ((!i) ? style.list.ifFirst : (_Utils_eq(
+										i,
+										$elm$core$List$length(list) - 1) ? style.list.ifLast : style.list.otherwise)))),
+							ifActive: style.button.ifActive,
+							ifDisabled: style.button.ifDisabled,
+							labelRow: style.button.labelRow,
+							otherwise: style.button.otherwise,
+							text: style.button.text
+						}),
+					$mdgriffith$elm_ui$Element$el(_List_Nil));
+			},
+			list);
+	});
+var $author$project$Internal$List$buttonRow = function (style) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$author$project$Internal$List$internalButton(style),
+		$mdgriffith$elm_ui$Element$row(style.list.containerRow));
+};
+var $author$project$Widget$buttonRow = $author$project$Internal$List$buttonRow;
+var $elm$core$Set$fromList = function (list) {
+	return A3($elm$core$List$foldl, $elm$core$Set$insert, $elm$core$Set$empty, list);
+};
+var $author$project$Internal$Select$multiSelect = function (_v0) {
+	var selected = _v0.selected;
+	var options = _v0.options;
+	var onSelect = _v0.onSelect;
+	return A2(
+		$elm$core$List$indexedMap,
+		F2(
+			function (i, a) {
+				return _Utils_Tuple2(
+					A2($elm$core$Set$member, i, selected),
+					{
+						icon: a.icon,
+						onPress: onSelect(i),
+						text: a.text
+					});
+			}),
+		options);
+};
+var $author$project$Widget$multiSelect = $author$project$Internal$Select$multiSelect;
+var $elm$core$Dict$singleton = F2(
+	function (key, value) {
+		return A5($elm$core$Dict$RBNode_elm_builtin, $elm$core$Dict$Black, key, value, $elm$core$Dict$RBEmpty_elm_builtin, $elm$core$Dict$RBEmpty_elm_builtin);
+	});
+var $elm$core$Set$singleton = function (key) {
+	return $elm$core$Set$Set_elm_builtin(
+		A2($elm$core$Dict$singleton, key, _Utils_Tuple0));
+};
+var $author$project$View$Test$multiSelect = F2(
+	function (idle, style) {
+		return _List_fromArray(
+			[
+				_Utils_Tuple2(
+				'Some selected',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$multiSelect(
+						{
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 42])),
+							selected: $elm$core$Set$fromList(
+								_List_fromArray(
+									[0, 1]))
+						}))),
+				_Utils_Tuple2(
+				'Nothing selected',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$multiSelect(
+						{
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 42])),
+							selected: $elm$core$Set$empty
+						}))),
+				_Utils_Tuple2(
+				'Invalid selection',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$multiSelect(
+						{
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 42])),
+							selected: $elm$core$Set$singleton(-1)
+						}))),
+				_Utils_Tuple2(
+				'Disabled selection',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$multiSelect(
+						{
+							onSelect: $elm$core$Basics$always($elm$core$Maybe$Nothing),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 42])),
+							selected: $elm$core$Set$singleton(0)
+						}))),
+				_Utils_Tuple2(
+				'Empty Options',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$multiSelect(
+						{
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_Nil),
+							selected: $elm$core$Set$empty
+						})))
+			]);
+	});
+var $author$project$View$Test$select = F2(
+	function (idle, style) {
+		return _List_fromArray(
+			[
+				_Utils_Tuple2(
+				'First selected',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$select(
+						{
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 42])),
+							selected: $elm$core$Maybe$Just(0)
+						}))),
+				_Utils_Tuple2(
+				'Nothing selected',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$select(
+						{
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 42])),
+							selected: $elm$core$Maybe$Nothing
+						}))),
+				_Utils_Tuple2(
+				'Invalid selection',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$select(
+						{
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 42])),
+							selected: $elm$core$Maybe$Just(-1)
+						}))),
+				_Utils_Tuple2(
+				'Disabled selection',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$select(
+						{
+							onSelect: $elm$core$Basics$always($elm$core$Maybe$Nothing),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 42])),
+							selected: $elm$core$Maybe$Just(0)
+						}))),
+				_Utils_Tuple2(
+				'Empty Options',
+				A2(
+					$author$project$Widget$buttonRow,
+					{button: style.selectButton, list: style.buttonRow},
+					$author$project$Widget$select(
+						{
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_Nil),
+							selected: $elm$core$Maybe$Nothing
+						})))
+			]);
+	});
+var $author$project$Internal$SortTable$Column = function (a) {
+	return {$: 'Column', a: a};
+};
+var $author$project$Internal$SortTable$FloatColumn = function (a) {
 	return {$: 'FloatColumn', a: a};
 };
-var $author$project$Widget$SortTable$floatColumn = function (_v0) {
+var $author$project$Internal$SortTable$floatColumn = function (_v0) {
 	var title = _v0.title;
 	var value = _v0.value;
 	var toString = _v0.toString;
-	return {
-		content: $author$project$Widget$SortTable$FloatColumn(
-			{toString: toString, value: value}),
-		title: title
-	};
+	var width = _v0.width;
+	return $author$project$Internal$SortTable$Column(
+		{
+			content: $author$project$Internal$SortTable$FloatColumn(
+				{toString: toString, value: value}),
+			title: title,
+			width: width
+		});
 };
-var $author$project$Widget$SortTable$IntColumn = function (a) {
+var $author$project$Widget$floatColumn = $author$project$Internal$SortTable$floatColumn;
+var $author$project$Internal$SortTable$IntColumn = function (a) {
 	return {$: 'IntColumn', a: a};
 };
-var $author$project$Widget$SortTable$intColumn = function (_v0) {
+var $author$project$Internal$SortTable$intColumn = function (_v0) {
 	var title = _v0.title;
 	var value = _v0.value;
 	var toString = _v0.toString;
-	return {
-		content: $author$project$Widget$SortTable$IntColumn(
-			{toString: toString, value: value}),
-		title: title
-	};
-};
-var $author$project$Widget$SortTable$StringColumn = function (a) {
-	return {$: 'StringColumn', a: a};
-};
-var $author$project$Widget$SortTable$stringColumn = function (_v0) {
-	var title = _v0.title;
-	var value = _v0.value;
-	var toString = _v0.toString;
-	return {
-		content: $author$project$Widget$SortTable$StringColumn(
-			{toString: toString, value: value}),
-		title: title
-	};
+	var width = _v0.width;
+	return $author$project$Internal$SortTable$Column(
+		{
+			content: $author$project$Internal$SortTable$IntColumn(
+				{toString: toString, value: value}),
+			title: title,
+			width: width
+		});
 };
+var $author$project$Widget$intColumn = $author$project$Internal$SortTable$intColumn;
 var $mdgriffith$elm_ui$Element$InternalColumn = function (a) {
 	return {$: 'InternalColumn', a: a};
 };
@@ -16284,926 +18998,1641 @@ var $mdgriffith$elm_ui$Element$table = F2(
 				data: config.data
 			});
 	});
-var $elm$core$List$sortBy = _List_sortBy;
-var $author$project$Widget$SortTable$view = function (_v0) {
-	var content = _v0.content;
-	var columns = _v0.columns;
-	var model = _v0.model;
-	var findTitle = function (list) {
-		findTitle:
-		while (true) {
-			if (!list.b) {
-				return $elm$core$Maybe$Nothing;
-			} else {
-				var head = list.a;
-				var tail = list.b;
-				if (_Utils_eq(head.title, model.title)) {
-					return $elm$core$Maybe$Just(head.content);
+var $author$project$Internal$SortTable$sortTable = F2(
+	function (style, model) {
+		var findTitle = function (list) {
+			findTitle:
+			while (true) {
+				if (!list.b) {
+					return $elm$core$Maybe$Nothing;
 				} else {
-					var $temp$list = tail;
-					list = $temp$list;
-					continue findTitle;
+					var head = list.a.a;
+					var tail = list.b;
+					if (_Utils_eq(head.title, model.sortBy)) {
+						return $elm$core$Maybe$Just(head.content);
+					} else {
+						var $temp$list = tail;
+						list = $temp$list;
+						continue findTitle;
+					}
 				}
 			}
-		}
-	};
-	return {
-		columns: A2(
-			$elm$core$List$map,
-			function (column) {
-				return {
-					header: column.title,
-					view: function () {
-						var _v2 = column.content;
-						switch (_v2.$) {
-							case 'IntColumn':
-								var value = _v2.a.value;
-								var toString = _v2.a.toString;
-								return A2($elm$core$Basics$composeR, value, toString);
-							case 'FloatColumn':
-								var value = _v2.a.value;
-								var toString = _v2.a.toString;
-								return A2($elm$core$Basics$composeR, value, toString);
-							default:
-								var value = _v2.a.value;
-								var toString = _v2.a.toString;
-								return A2($elm$core$Basics$composeR, value, toString);
-						}
-					}()
-				};
-			},
-			columns),
-		data: (model.asc ? $elm$core$Basics$identity : $elm$core$List$reverse)(
-			A3(
-				$elm$core$Basics$apR,
-				A2(
-					$elm$core$Maybe$map,
-					function (c) {
-						switch (c.$) {
-							case 'StringColumn':
-								var value = c.a.value;
-								return $elm$core$List$sortBy(value);
-							case 'IntColumn':
-								var value = c.a.value;
-								return $elm$core$List$sortBy(value);
-							default:
-								var value = c.a.value;
-								return $elm$core$List$sortBy(value);
-						}
-					},
-					findTitle(columns)),
-				$elm$core$Maybe$withDefault($elm$core$Basics$identity),
-				content))
-	};
-};
-var $author$project$Reusable$sortTable = function (model) {
-	return A2(
-		$mdgriffith$elm_ui$Element$column,
-		_Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Grid$simple,
-			_Utils_ap(
-				$Orasund$elm_ui_framework$Framework$Card$large,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
-					]))),
-		_List_fromArray(
-			[
-				A2(
-				$mdgriffith$elm_ui$Element$el,
-				$Orasund$elm_ui_framework$Framework$Heading$h3,
-				$mdgriffith$elm_ui$Element$text('Sort Table')),
-				A2(
-				$mdgriffith$elm_ui$Element$table,
-				$Orasund$elm_ui_framework$Framework$Grid$simple,
-				function (_v0) {
-					var data = _v0.data;
-					var columns = _v0.columns;
-					return {
-						columns: A2(
-							$elm$core$List$map,
-							function (config) {
-								return {
-									header: A2(
-										$mdgriffith$elm_ui$Element$Input$button,
-										_List_fromArray(
-											[$mdgriffith$elm_ui$Element$Font$bold]),
-										{
-											label: _Utils_eq(config.header, model.title) ? A2(
-												$mdgriffith$elm_ui$Element$row,
-												_Utils_ap(
-													$Orasund$elm_ui_framework$Framework$Grid$simple,
-													_List_fromArray(
-														[$mdgriffith$elm_ui$Element$Font$bold])),
-												_List_fromArray(
-													[
-														$mdgriffith$elm_ui$Element$text(config.header),
-														$mdgriffith$elm_ui$Element$html(
-														model.asc ? $jasonliang512$elm_heroicons$Heroicons$Solid$cheveronUp(
-															_List_fromArray(
-																[
-																	$elm$html$Html$Attributes$width(16)
-																])) : $jasonliang512$elm_heroicons$Heroicons$Solid$cheveronDown(
-															_List_fromArray(
-																[
-																	$elm$html$Html$Attributes$width(16)
-																])))
-													])) : $mdgriffith$elm_ui$Element$text(config.header),
-											onPress: $elm$core$Maybe$Just(
-												$author$project$Reusable$SortBy(
-													{
-														asc: _Utils_eq(config.header, model.title) ? (!model.asc) : true,
-														title: config.header
-													}))
-										}),
-									view: A2($elm$core$Basics$composeR, config.view, $mdgriffith$elm_ui$Element$text),
-									width: $mdgriffith$elm_ui$Element$fill
-								};
-							},
-							columns),
-						data: data
-					};
-				}(
-					$author$project$Widget$SortTable$view(
-						{
-							columns: _List_fromArray(
-								[
-									$author$project$Widget$SortTable$intColumn(
-									{
-										title: 'Id',
-										toString: function (_int) {
-											return '#' + $elm$core$String$fromInt(_int);
-										},
-										value: function ($) {
-											return $.id;
+		};
+		return A2(
+			$mdgriffith$elm_ui$Element$table,
+			style.containerTable,
+			{
+				columns: A2(
+					$elm$core$List$map,
+					function (_v1) {
+						var column = _v1.a;
+						return {
+							header: A2(
+								$author$project$Internal$Button$button,
+								style.headerButton,
+								{
+									icon: _Utils_eq(column.title, model.sortBy) ? (model.asc ? style.ascIcon : style.descIcon) : style.defaultIcon,
+									onPress: function () {
+										var _v2 = column.content;
+										if (_v2.$ === 'UnsortableColumn') {
+											return $elm$core$Maybe$Nothing;
+										} else {
+											return $elm$core$Maybe$Just(
+												model.onChange(column.title));
 										}
-									}),
-									$author$project$Widget$SortTable$stringColumn(
-									{
-										title: 'Name',
-										toString: $elm$core$Basics$identity,
-										value: function ($) {
-											return $.name;
-										}
-									}),
-									$author$project$Widget$SortTable$floatColumn(
-									{
-										title: 'rating',
-										toString: $elm$core$String$fromFloat,
-										value: function ($) {
-											return $.rating;
-										}
-									})
-								]),
-							content: _List_fromArray(
-								[
-									{id: 1, name: 'Antonio', rating: 2.456},
-									{id: 2, name: 'Ana', rating: 1.34},
-									{id: 3, name: 'Alfred', rating: 4.22},
-									{id: 4, name: 'Thomas', rating: 3}
-								]),
-							model: model
-						})))
-			]));
-};
-var $author$project$Reusable$view = function (_v0) {
-	var addSnackbar = _v0.addSnackbar;
-	var msgMapper = _v0.msgMapper;
-	var model = _v0.model;
-	return A2(
-		$mdgriffith$elm_ui$Element$column,
-		_Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Grid$section,
-			_List_fromArray(
-				[$mdgriffith$elm_ui$Element$centerX])),
-		_List_fromArray(
-			[
-				A2(
-				$mdgriffith$elm_ui$Element$el,
-				$Orasund$elm_ui_framework$Framework$Heading$h2,
-				$mdgriffith$elm_ui$Element$text('Reusable Views')),
-				A2(
-				$mdgriffith$elm_ui$Element$paragraph,
-				_List_Nil,
-				$elm$core$List$singleton(
-					$mdgriffith$elm_ui$Element$text('Reusable views have an internal state but no update function. You will need to do some wiring, but nothing complicated.'))),
-				A2(
-				$mdgriffith$elm_ui$Element$wrappedRow,
-				_Utils_ap(
-					$Orasund$elm_ui_framework$Framework$Grid$simple,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
-						])),
-				_List_fromArray(
-					[
-						$author$project$Reusable$snackbar(addSnackbar),
-						A2(
-						$mdgriffith$elm_ui$Element$map,
-						msgMapper,
-						$author$project$Reusable$sortTable(model))
-					]))
-			]));
-};
-var $author$project$Stateless$SetCarousel = function (a) {
-	return {$: 'SetCarousel', a: a};
-};
-var $elm$core$Array$bitMask = 4294967295 >>> (32 - $elm$core$Array$shiftStep);
-var $elm$core$Elm$JsArray$unsafeGet = _JsArray_unsafeGet;
-var $elm$core$Array$getHelp = F3(
-	function (shift, index, tree) {
-		getHelp:
-		while (true) {
-			var pos = $elm$core$Array$bitMask & (index >>> shift);
-			var _v0 = A2($elm$core$Elm$JsArray$unsafeGet, pos, tree);
-			if (_v0.$ === 'SubTree') {
-				var subTree = _v0.a;
-				var $temp$shift = shift - $elm$core$Array$shiftStep,
-					$temp$index = index,
-					$temp$tree = subTree;
-				shift = $temp$shift;
-				index = $temp$index;
-				tree = $temp$tree;
-				continue getHelp;
-			} else {
-				var values = _v0.a;
-				return A2($elm$core$Elm$JsArray$unsafeGet, $elm$core$Array$bitMask & index, values);
-			}
-		}
-	});
-var $elm$core$Array$tailIndex = function (len) {
-	return (len >>> 5) << 5;
-};
-var $elm$core$Array$get = F2(
-	function (index, _v0) {
-		var len = _v0.a;
-		var startShift = _v0.b;
-		var tree = _v0.c;
-		var tail = _v0.d;
-		return ((index < 0) || (_Utils_cmp(index, len) > -1)) ? $elm$core$Maybe$Nothing : ((_Utils_cmp(
-			index,
-			$elm$core$Array$tailIndex(len)) > -1) ? $elm$core$Maybe$Just(
-			A2($elm$core$Elm$JsArray$unsafeGet, $elm$core$Array$bitMask & index, tail)) : $elm$core$Maybe$Just(
-			A3($elm$core$Array$getHelp, startShift, index, tree)));
-	});
-var $elm$core$Array$length = function (_v0) {
-	var len = _v0.a;
-	return len;
-};
-var $author$project$Widget$carousel = function (_v0) {
-	var content = _v0.content;
-	var current = _v0.current;
-	var label = _v0.label;
-	var _v1 = content;
-	var head = _v1.a;
-	var tail = _v1.b;
-	return label(
-		(current <= 0) ? head : ((_Utils_cmp(
-			current,
-			$elm$core$Array$length(tail)) > 0) ? A2(
-			$elm$core$Maybe$withDefault,
-			head,
-			A2(
-				$elm$core$Array$get,
-				$elm$core$Array$length(tail) - 1,
-				tail)) : A2(
-			$elm$core$Maybe$withDefault,
-			head,
-			A2($elm$core$Array$get, current - 1, tail))));
-};
-var $jasonliang512$elm_heroicons$Heroicons$Solid$cheveronLeft = function (attrs) {
-	return A2(
-		$elm$svg$Svg$svg,
-		A2(
-			$elm$core$List$cons,
-			$elm$svg$Svg$Attributes$viewBox('0 0 20 20'),
-			A2(
-				$elm$core$List$cons,
-				$elm$svg$Svg$Attributes$fill('currentColor'),
-				attrs)),
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$fillRule('evenodd'),
-						$elm$svg$Svg$Attributes$d('M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z'),
-						$elm$svg$Svg$Attributes$clipRule('evenodd')
-					]),
-				_List_Nil)
-			]));
-};
-var $jasonliang512$elm_heroicons$Heroicons$Solid$cheveronRight = function (attrs) {
-	return A2(
-		$elm$svg$Svg$svg,
-		A2(
-			$elm$core$List$cons,
-			$elm$svg$Svg$Attributes$viewBox('0 0 20 20'),
-			A2(
-				$elm$core$List$cons,
-				$elm$svg$Svg$Attributes$fill('currentColor'),
-				attrs)),
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$fillRule('evenodd'),
-						$elm$svg$Svg$Attributes$d('M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z'),
-						$elm$svg$Svg$Attributes$clipRule('evenodd')
-					]),
-				_List_Nil)
-			]));
-};
-var $Orasund$elm_ui_framework$Framework$Color$cyan = A3($mdgriffith$elm_ui$Element$rgb255, 32, 156, 238);
-var $elm$core$Array$fromListHelp = F3(
-	function (list, nodeList, nodeListSize) {
-		fromListHelp:
-		while (true) {
-			var _v0 = A2($elm$core$Elm$JsArray$initializeFromList, $elm$core$Array$branchFactor, list);
-			var jsArray = _v0.a;
-			var remainingItems = _v0.b;
-			if (_Utils_cmp(
-				$elm$core$Elm$JsArray$length(jsArray),
-				$elm$core$Array$branchFactor) < 0) {
-				return A2(
-					$elm$core$Array$builderToArray,
-					true,
-					{nodeList: nodeList, nodeListSize: nodeListSize, tail: jsArray});
-			} else {
-				var $temp$list = remainingItems,
-					$temp$nodeList = A2(
-					$elm$core$List$cons,
-					$elm$core$Array$Leaf(jsArray),
-					nodeList),
-					$temp$nodeListSize = nodeListSize + 1;
-				list = $temp$list;
-				nodeList = $temp$nodeList;
-				nodeListSize = $temp$nodeListSize;
-				continue fromListHelp;
-			}
-		}
-	});
-var $elm$core$Array$fromList = function (list) {
-	if (!list.b) {
-		return $elm$core$Array$empty;
-	} else {
-		return A3($elm$core$Array$fromListHelp, list, _List_Nil, 0);
-	}
-};
-var $Orasund$elm_ui_framework$Framework$Color$green = A3($mdgriffith$elm_ui$Element$rgb255, 35, 209, 96);
-var $Orasund$elm_ui_framework$Framework$Color$yellow = A3($mdgriffith$elm_ui$Element$rgb255, 255, 221, 87);
-var $author$project$Stateless$carousel = function (model) {
-	return A2(
-		$mdgriffith$elm_ui$Element$column,
-		_Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Grid$simple,
-			_Utils_ap(
-				$Orasund$elm_ui_framework$Framework$Card$large,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
-					]))),
-		_List_fromArray(
-			[
-				A2(
-				$mdgriffith$elm_ui$Element$el,
-				$Orasund$elm_ui_framework$Framework$Heading$h3,
-				$mdgriffith$elm_ui$Element$text('Carousel')),
-				$author$project$Widget$carousel(
-				{
-					content: _Utils_Tuple2(
-						$Orasund$elm_ui_framework$Framework$Color$cyan,
-						$elm$core$Array$fromList(
-							_List_fromArray(
-								[$Orasund$elm_ui_framework$Framework$Color$yellow, $Orasund$elm_ui_framework$Framework$Color$green, $Orasund$elm_ui_framework$Framework$Color$red]))),
-					current: model.carousel,
-					label: function (c) {
-						return A2(
-							$mdgriffith$elm_ui$Element$row,
-							_Utils_ap(
-								$Orasund$elm_ui_framework$Framework$Grid$simple,
-								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$centerX,
-										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
-									])),
-							_List_fromArray(
-								[
-									A2(
-									$mdgriffith$elm_ui$Element$Input$button,
-									_List_fromArray(
-										[$mdgriffith$elm_ui$Element$centerY]),
-									{
-										label: $mdgriffith$elm_ui$Element$html(
-											$jasonliang512$elm_heroicons$Heroicons$Solid$cheveronLeft(
-												_List_fromArray(
-													[
-														$elm$html$Html$Attributes$width(20)
-													]))),
-										onPress: $elm$core$Maybe$Just(
-											$author$project$Stateless$SetCarousel(model.carousel - 1))
-									}),
-									A2(
-									$mdgriffith$elm_ui$Element$el,
-									_Utils_ap(
-										$Orasund$elm_ui_framework$Framework$Card$simple,
-										_List_fromArray(
-											[
-												$mdgriffith$elm_ui$Element$Background$color(c),
-												$mdgriffith$elm_ui$Element$height(
-												$mdgriffith$elm_ui$Element$px(100)),
-												$mdgriffith$elm_ui$Element$width(
-												$mdgriffith$elm_ui$Element$px(100))
-											])),
-									$mdgriffith$elm_ui$Element$none),
-									A2(
-									$mdgriffith$elm_ui$Element$Input$button,
-									_List_fromArray(
-										[$mdgriffith$elm_ui$Element$centerY]),
-									{
-										label: $mdgriffith$elm_ui$Element$html(
-											$jasonliang512$elm_heroicons$Heroicons$Solid$cheveronRight(
-												_List_fromArray(
-													[
-														$elm$html$Html$Attributes$width(20)
-													]))),
-										onPress: $elm$core$Maybe$Just(
-											$author$project$Stateless$SetCarousel(model.carousel + 1))
-									})
-								]));
-					}
-				})
-			]));
-};
-var $author$project$Stateless$ToggleCollapsable = function (a) {
-	return {$: 'ToggleCollapsable', a: a};
-};
-var $author$project$Widget$collapsable = function (_v0) {
-	var onToggle = _v0.onToggle;
-	var isCollapsed = _v0.isCollapsed;
-	var label = _v0.label;
-	var content = _v0.content;
-	return A2(
-		$mdgriffith$elm_ui$Element$column,
-		_List_Nil,
-		_Utils_ap(
-			_List_fromArray(
-				[
-					A2(
-					$mdgriffith$elm_ui$Element$Input$button,
-					_List_Nil,
-					{
-						label: label,
-						onPress: $elm$core$Maybe$Just(
-							onToggle(!isCollapsed))
-					})
-				]),
-			isCollapsed ? _List_Nil : _List_fromArray(
-				[content])));
-};
-var $Orasund$elm_ui_framework$Framework$Heading$h4 = $Orasund$elm_ui_framework$Framework$Heading$h(4);
-var $author$project$Stateless$collapsable = function (model) {
-	return A2(
-		$mdgriffith$elm_ui$Element$column,
-		_Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Grid$simple,
-			_Utils_ap(
-				$Orasund$elm_ui_framework$Framework$Card$large,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
-					]))),
-		_List_fromArray(
-			[
-				A2(
-				$mdgriffith$elm_ui$Element$el,
-				$Orasund$elm_ui_framework$Framework$Heading$h3,
-				$mdgriffith$elm_ui$Element$text('Collapsable')),
-				$author$project$Widget$collapsable(
-				{
-					content: $mdgriffith$elm_ui$Element$text('Hello World'),
-					isCollapsed: model.isCollapsed,
-					label: A2(
-						$mdgriffith$elm_ui$Element$row,
-						$Orasund$elm_ui_framework$Framework$Grid$compact,
-						_List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$html(
-								model.isCollapsed ? $jasonliang512$elm_heroicons$Heroicons$Solid$cheveronRight(
-									_List_fromArray(
-										[
-											$elm$html$Html$Attributes$width(20)
-										])) : $jasonliang512$elm_heroicons$Heroicons$Solid$cheveronDown(
-									_List_fromArray(
-										[
-											$elm$html$Html$Attributes$width(20)
-										]))),
+									}(),
+									text: column.title
+								}),
+							view: A2(
+								$elm$core$Basics$composeR,
+								function () {
+									var _v3 = column.content;
+									switch (_v3.$) {
+										case 'IntColumn':
+											var value = _v3.a.value;
+											var toString = _v3.a.toString;
+											return A2($elm$core$Basics$composeR, value, toString);
+										case 'FloatColumn':
+											var value = _v3.a.value;
+											var toString = _v3.a.toString;
+											return A2($elm$core$Basics$composeR, value, toString);
+										case 'StringColumn':
+											var value = _v3.a.value;
+											var toString = _v3.a.toString;
+											return A2($elm$core$Basics$composeR, value, toString);
+										default:
+											var toString = _v3.a;
+											return toString;
+									}
+								}(),
 								A2(
-								$mdgriffith$elm_ui$Element$el,
-								$Orasund$elm_ui_framework$Framework$Heading$h4,
-								$mdgriffith$elm_ui$Element$text('Title'))
-							])),
-					onToggle: $author$project$Stateless$ToggleCollapsable
-				})
-			]));
-};
-var $author$project$Stateless$ChangedMultiSelected = function (a) {
-	return {$: 'ChangedMultiSelected', a: a};
-};
-var $author$project$Widget$multiSelect = function (_v0) {
-	var selected = _v0.selected;
-	var options = _v0.options;
-	var label = _v0.label;
-	var onChange = _v0.onChange;
-	var attributes = _v0.attributes;
-	return A2(
-		$elm$core$List$map,
-		function (a) {
-			return A2(
-				$mdgriffith$elm_ui$Element$Input$button,
-				attributes(
-					A2($elm$core$Set$member, a, selected)),
-				{
-					label: label(a),
-					onPress: $elm$core$Maybe$Just(
-						onChange(a))
-				});
-		},
-		options);
-};
-var $author$project$Stateless$multiSelect = function (model) {
-	return A2(
-		$mdgriffith$elm_ui$Element$column,
-		_Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Grid$simple,
-			_Utils_ap(
-				$Orasund$elm_ui_framework$Framework$Card$large,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
-					]))),
-		_List_fromArray(
-			[
-				A2(
-				$mdgriffith$elm_ui$Element$el,
-				$Orasund$elm_ui_framework$Framework$Heading$h3,
-				$mdgriffith$elm_ui$Element$text('Multi Select')),
-				A2(
-				$mdgriffith$elm_ui$Element$row,
-				$Orasund$elm_ui_framework$Framework$Grid$compact,
-				A2(
-					$elm$core$List$indexedMap,
-					function (i) {
-						return $mdgriffith$elm_ui$Element$el(
-							_Utils_ap(
-								$Orasund$elm_ui_framework$Framework$Button$simple,
-								_Utils_ap(
-									_List_fromArray(
-										[
-											$mdgriffith$elm_ui$Element$padding(0)
-										]),
-									(!i) ? $Orasund$elm_ui_framework$Framework$Group$left : ((i === 2) ? $Orasund$elm_ui_framework$Framework$Group$right : $Orasund$elm_ui_framework$Framework$Group$center))));
+									$elm$core$Basics$composeR,
+									$mdgriffith$elm_ui$Element$text,
+									A2(
+										$elm$core$Basics$composeR,
+										$elm$core$List$singleton,
+										$mdgriffith$elm_ui$Element$paragraph(_List_Nil)))),
+							width: column.width
+						};
 					},
-					$author$project$Widget$multiSelect(
-						{
-							attributes: function (selected) {
-								return _Utils_ap(
-									$Orasund$elm_ui_framework$Framework$Button$simple,
-									_Utils_ap(
-										_List_fromArray(
-											[
-												$mdgriffith$elm_ui$Element$Border$width(0),
-												$mdgriffith$elm_ui$Element$Border$rounded(0)
-											]),
-										selected ? $Orasund$elm_ui_framework$Framework$Color$primary : _List_Nil));
+					model.columns),
+				data: (model.asc ? $elm$core$Basics$identity : $elm$core$List$reverse)(
+					A3(
+						$elm$core$Basics$apR,
+						A2(
+							$elm$core$Maybe$andThen,
+							function (c) {
+								switch (c.$) {
+									case 'StringColumn':
+										var value = c.a.value;
+										return $elm$core$Maybe$Just(
+											$elm$core$List$sortBy(value));
+									case 'IntColumn':
+										var value = c.a.value;
+										return $elm$core$Maybe$Just(
+											$elm$core$List$sortBy(value));
+									case 'FloatColumn':
+										var value = c.a.value;
+										return $elm$core$Maybe$Just(
+											$elm$core$List$sortBy(value));
+									default:
+										return $elm$core$Maybe$Nothing;
+								}
 							},
-							label: A2($elm$core$Basics$composeR, $elm$core$String$fromInt, $mdgriffith$elm_ui$Element$text),
-							onChange: $author$project$Stateless$ChangedMultiSelected,
-							options: _List_fromArray(
-								[1, 2, 42]),
-							selected: model.multiSelected
-						})))
-			]));
-};
-var $author$project$Stateless$scrim = F2(
-	function (_v0, model) {
-		var showDialog = _v0.showDialog;
-		var changedSheet = _v0.changedSheet;
-		return A2(
-			$mdgriffith$elm_ui$Element$column,
-			_Utils_ap(
-				$Orasund$elm_ui_framework$Framework$Grid$simple,
-				_Utils_ap(
-					$Orasund$elm_ui_framework$Framework$Card$large,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
-						]))),
-			_List_fromArray(
-				[
-					A2(
-					$mdgriffith$elm_ui$Element$el,
-					$Orasund$elm_ui_framework$Framework$Heading$h3,
-					$mdgriffith$elm_ui$Element$text('Scrim')),
-					A2(
-					$mdgriffith$elm_ui$Element$Input$button,
-					$Orasund$elm_ui_framework$Framework$Button$simple,
-					{
-						label: $mdgriffith$elm_ui$Element$text('Show dialog'),
-						onPress: $elm$core$Maybe$Just(showDialog)
-					}),
-					A2(
-					$mdgriffith$elm_ui$Element$Input$button,
-					$Orasund$elm_ui_framework$Framework$Button$simple,
-					{
-						label: $mdgriffith$elm_ui$Element$text('show left sheet'),
-						onPress: $elm$core$Maybe$Just(
-							changedSheet(
-								$elm$core$Maybe$Just($author$project$Layout$Left)))
-					}),
-					A2(
-					$mdgriffith$elm_ui$Element$Input$button,
-					$Orasund$elm_ui_framework$Framework$Button$simple,
-					{
-						label: $mdgriffith$elm_ui$Element$text('show right sheet'),
-						onPress: $elm$core$Maybe$Just(
-							changedSheet(
-								$elm$core$Maybe$Just($author$project$Layout$Right)))
-					})
-				]));
+							findTitle(model.columns)),
+						$elm$core$Maybe$withDefault($elm$core$Basics$identity),
+						model.content))
+			});
 	});
-var $author$project$Stateless$ChangedSelected = function (a) {
-	return {$: 'ChangedSelected', a: a};
+var $author$project$Widget$sortTable = $author$project$Internal$SortTable$sortTable;
+var $author$project$Internal$SortTable$StringColumn = function (a) {
+	return {$: 'StringColumn', a: a};
 };
-var $author$project$Widget$select = function (_v0) {
-	var selected = _v0.selected;
-	var options = _v0.options;
-	var label = _v0.label;
-	var onChange = _v0.onChange;
-	var attributes = _v0.attributes;
-	return A2(
-		$elm$core$List$map,
-		function (a) {
-			return A2(
-				$mdgriffith$elm_ui$Element$Input$button,
-				attributes(
-					_Utils_eq(
-						selected,
-						$elm$core$Maybe$Just(a))),
-				{
-					label: label(a),
-					onPress: $elm$core$Maybe$Just(
-						onChange(a))
-				});
-		},
-		options);
+var $author$project$Internal$SortTable$stringColumn = function (_v0) {
+	var title = _v0.title;
+	var value = _v0.value;
+	var toString = _v0.toString;
+	var width = _v0.width;
+	return $author$project$Internal$SortTable$Column(
+		{
+			content: $author$project$Internal$SortTable$StringColumn(
+				{toString: toString, value: value}),
+			title: title,
+			width: width
+		});
 };
-var $author$project$Stateless$select = function (model) {
-	return A2(
-		$mdgriffith$elm_ui$Element$column,
-		_Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Grid$simple,
-			_Utils_ap(
-				$Orasund$elm_ui_framework$Framework$Card$large,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
-					]))),
-		_List_fromArray(
+var $author$project$Widget$stringColumn = $author$project$Internal$SortTable$stringColumn;
+var $author$project$Internal$SortTable$UnsortableColumn = function (a) {
+	return {$: 'UnsortableColumn', a: a};
+};
+var $author$project$Internal$SortTable$unsortableColumn = function (_v0) {
+	var title = _v0.title;
+	var toString = _v0.toString;
+	var width = _v0.width;
+	return $author$project$Internal$SortTable$Column(
+		{
+			content: $author$project$Internal$SortTable$UnsortableColumn(toString),
+			title: title,
+			width: width
+		});
+};
+var $author$project$Widget$unsortableColumn = $author$project$Internal$SortTable$unsortableColumn;
+var $author$project$View$Test$sortTable = F2(
+	function (idle, style) {
+		return _List_fromArray(
 			[
+				_Utils_Tuple2(
+				'Int column',
 				A2(
-				$mdgriffith$elm_ui$Element$el,
-				$Orasund$elm_ui_framework$Framework$Heading$h3,
-				$mdgriffith$elm_ui$Element$text('Select')),
+					$author$project$Widget$sortTable,
+					style.sortTable,
+					{
+						asc: true,
+						columns: _List_fromArray(
+							[
+								$author$project$Widget$intColumn(
+								{
+									title: 'Id',
+									toString: function (_int) {
+										return '#' + $elm$core$String$fromInt(_int);
+									},
+									value: function ($) {
+										return $.id;
+									},
+									width: $mdgriffith$elm_ui$Element$fill
+								}),
+								$author$project$Widget$stringColumn(
+								{
+									title: 'Name',
+									toString: $elm$core$Basics$identity,
+									value: function ($) {
+										return $.name;
+									},
+									width: $mdgriffith$elm_ui$Element$fill
+								})
+							]),
+						content: _List_fromArray(
+							[
+								{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
+								{
+								hash: $elm$core$Maybe$Just('45jf'),
+								id: 2,
+								name: 'Ana',
+								rating: 1.34
+							}
+							]),
+						onChange: $elm$core$Basics$always(idle),
+						sortBy: 'Id'
+					})),
+				_Utils_Tuple2(
+				'Name column',
 				A2(
-				$mdgriffith$elm_ui$Element$row,
-				$Orasund$elm_ui_framework$Framework$Grid$compact,
+					$author$project$Widget$sortTable,
+					style.sortTable,
+					{
+						asc: true,
+						columns: _List_fromArray(
+							[
+								$author$project$Widget$stringColumn(
+								{
+									title: 'Name',
+									toString: $elm$core$Basics$identity,
+									value: function ($) {
+										return $.name;
+									},
+									width: $mdgriffith$elm_ui$Element$fill
+								}),
+								$author$project$Widget$floatColumn(
+								{
+									title: 'Rating',
+									toString: $elm$core$String$fromFloat,
+									value: function ($) {
+										return $.rating;
+									},
+									width: $mdgriffith$elm_ui$Element$fill
+								})
+							]),
+						content: _List_fromArray(
+							[
+								{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
+								{
+								hash: $elm$core$Maybe$Just('45jf'),
+								id: 2,
+								name: 'Ana',
+								rating: 1.34
+							}
+							]),
+						onChange: $elm$core$Basics$always(idle),
+						sortBy: 'Name'
+					})),
+				_Utils_Tuple2(
+				'Float column',
 				A2(
-					$elm$core$List$indexedMap,
-					function (i) {
-						return $mdgriffith$elm_ui$Element$el(
-							_Utils_ap(
-								$Orasund$elm_ui_framework$Framework$Button$simple,
-								_Utils_ap(
-									_List_fromArray(
-										[
-											$mdgriffith$elm_ui$Element$padding(0)
-										]),
-									(!i) ? $Orasund$elm_ui_framework$Framework$Group$left : ((i === 2) ? $Orasund$elm_ui_framework$Framework$Group$right : $Orasund$elm_ui_framework$Framework$Group$center))));
-					},
-					$author$project$Widget$select(
-						{
-							attributes: function (selected) {
-								return _Utils_ap(
-									$Orasund$elm_ui_framework$Framework$Button$simple,
-									_Utils_ap(
-										_List_fromArray(
-											[
-												$mdgriffith$elm_ui$Element$Border$width(0),
-												$mdgriffith$elm_ui$Element$Border$rounded(0)
-											]),
-										selected ? $Orasund$elm_ui_framework$Framework$Color$primary : _List_Nil));
-							},
-							label: A2($elm$core$Basics$composeR, $elm$core$String$fromInt, $mdgriffith$elm_ui$Element$text),
-							onChange: $author$project$Stateless$ChangedSelected,
-							options: _List_fromArray(
-								[1, 2, 42]),
-							selected: model.selected
-						})))
-			]));
-};
-var $author$project$Stateless$ChangedTab = function (a) {
-	return {$: 'ChangedTab', a: a};
-};
-var $Orasund$elm_ui_framework$Framework$Group$bottom = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Border$roundEach(
-		{bottomLeft: 4, bottomRight: 4, topLeft: 0, topRight: 0})
-	]);
-var $Orasund$elm_ui_framework$Framework$Card$small = $Orasund$elm_ui_framework$Framework$Card$withSize(240);
-var $author$project$Widget$tab = F2(
-	function (atts, _v0) {
-		var selected = _v0.selected;
-		var options = _v0.options;
-		var onChange = _v0.onChange;
-		var label = _v0.label;
+					$author$project$Widget$sortTable,
+					style.sortTable,
+					{
+						asc: false,
+						columns: _List_fromArray(
+							[
+								$author$project$Widget$floatColumn(
+								{
+									title: 'Rating',
+									toString: $elm$core$String$fromFloat,
+									value: function ($) {
+										return $.rating;
+									},
+									width: $mdgriffith$elm_ui$Element$fill
+								}),
+								$author$project$Widget$unsortableColumn(
+								{
+									title: 'Hash',
+									toString: A2(
+										$elm$core$Basics$composeR,
+										function ($) {
+											return $.hash;
+										},
+										$elm$core$Maybe$withDefault('None')),
+									width: $mdgriffith$elm_ui$Element$fill
+								})
+							]),
+						content: _List_fromArray(
+							[
+								{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
+								{
+								hash: $elm$core$Maybe$Just('45jf'),
+								id: 2,
+								name: 'Ana',
+								rating: 1.34
+							}
+							]),
+						onChange: $elm$core$Basics$always(idle),
+						sortBy: 'Rating'
+					})),
+				_Utils_Tuple2(
+				'Unsortable column',
+				A2(
+					$author$project$Widget$sortTable,
+					style.sortTable,
+					{
+						asc: true,
+						columns: _List_fromArray(
+							[
+								$author$project$Widget$floatColumn(
+								{
+									title: 'Rating',
+									toString: $elm$core$String$fromFloat,
+									value: function ($) {
+										return $.rating;
+									},
+									width: $mdgriffith$elm_ui$Element$fill
+								}),
+								$author$project$Widget$unsortableColumn(
+								{
+									title: 'Hash',
+									toString: A2(
+										$elm$core$Basics$composeR,
+										function ($) {
+											return $.hash;
+										},
+										$elm$core$Maybe$withDefault('None')),
+									width: $mdgriffith$elm_ui$Element$fill
+								})
+							]),
+						content: _List_fromArray(
+							[
+								{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
+								{
+								hash: $elm$core$Maybe$Just('45jf'),
+								id: 2,
+								name: 'Ana',
+								rating: 1.34
+							}
+							]),
+						onChange: $elm$core$Basics$always(idle),
+						sortBy: 'Hash'
+					})),
+				_Utils_Tuple2(
+				'Empty Table',
+				A2(
+					$author$project$Widget$sortTable,
+					style.sortTable,
+					{
+						asc: true,
+						columns: _List_Nil,
+						content: _List_fromArray(
+							[
+								{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
+								{
+								hash: $elm$core$Maybe$Just('45jf'),
+								id: 2,
+								name: 'Ana',
+								rating: 1.34
+							}
+							]),
+						onChange: $elm$core$Basics$always(idle),
+						sortBy: ''
+					}))
+			]);
+	});
+var $author$project$Internal$Tab$tab = F2(
+	function (style, _v0) {
+		var tabs = _v0.tabs;
 		var content = _v0.content;
-		var attributes = _v0.attributes;
 		return A2(
 			$mdgriffith$elm_ui$Element$column,
-			_List_Nil,
+			style.containerColumn,
 			_List_fromArray(
 				[
 					A2(
 					$mdgriffith$elm_ui$Element$row,
-					atts,
-					$author$project$Widget$select(
-						{
-							attributes: attributes,
-							label: label,
-							onChange: onChange,
-							options: options,
-							selected: $elm$core$Maybe$Just(selected)
-						})),
-					content(selected)
+					style.optionRow,
+					A2(
+						$elm$core$List$map,
+						$author$project$Internal$Select$selectButton(style.button),
+						$author$project$Internal$Select$select(tabs))),
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					style.content,
+					content(tabs.selected))
 				]));
 	});
-var $Orasund$elm_ui_framework$Framework$Group$top = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Border$roundEach(
-		{bottomLeft: 0, bottomRight: 0, topLeft: 4, topRight: 4})
-	]);
-var $author$project$Stateless$tab = function (model) {
-	return A2(
-		$mdgriffith$elm_ui$Element$column,
-		_Utils_ap(
-			$Orasund$elm_ui_framework$Framework$Grid$simple,
-			_Utils_ap(
-				$Orasund$elm_ui_framework$Framework$Card$large,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
-					]))),
-		_List_fromArray(
+var $author$project$Widget$tab = $author$project$Internal$Tab$tab;
+var $author$project$View$Test$tab = F2(
+	function (idle, style) {
+		return _List_fromArray(
 			[
+				_Utils_Tuple2(
+				'Nothing selected',
 				A2(
-				$mdgriffith$elm_ui$Element$el,
-				$Orasund$elm_ui_framework$Framework$Heading$h3,
-				$mdgriffith$elm_ui$Element$text('Tab')),
-				A2(
-				$author$project$Widget$tab,
-				$Orasund$elm_ui_framework$Framework$Grid$simple,
-				{
-					attributes: function (selected) {
-						return _Utils_ap(
-							$Orasund$elm_ui_framework$Framework$Button$simple,
-							_Utils_ap(
-								$Orasund$elm_ui_framework$Framework$Group$top,
-								selected ? $Orasund$elm_ui_framework$Framework$Color$primary : _List_Nil));
-					},
-					content: function (selected) {
-						return A2(
-							$mdgriffith$elm_ui$Element$el,
-							_Utils_ap($Orasund$elm_ui_framework$Framework$Card$small, $Orasund$elm_ui_framework$Framework$Group$bottom),
-							$mdgriffith$elm_ui$Element$text(
+					$author$project$Widget$tab,
+					style.tab,
+					{
+						content: function (selected) {
+							return $mdgriffith$elm_ui$Element$text(
 								function () {
-									switch (selected) {
-										case 1:
-											return 'This is Tab 1';
-										case 2:
-											return 'This is the second tab';
-										case 3:
-											return 'The thrid and last tab';
-										default:
-											return 'Please select a tab';
+									if (selected.$ === 'Nothing') {
+										return 'Please select a tab';
+									} else {
+										return '';
 									}
-								}()));
-					},
-					label: function (_int) {
-						return $mdgriffith$elm_ui$Element$text(
-							'Tab ' + $elm$core$String$fromInt(_int));
-					},
-					onChange: $author$project$Stateless$ChangedTab,
-					options: _List_fromArray(
-						[1, 2, 3]),
-					selected: model.tab
-				})
-			]));
-};
-var $author$project$Stateless$view = F2(
-	function (_v0, model) {
-		var msgMapper = _v0.msgMapper;
-		var showDialog = _v0.showDialog;
-		var changedSheet = _v0.changedSheet;
+								}());
+						},
+						tabs: {
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 3])),
+							selected: $elm$core$Maybe$Nothing
+						}
+					})),
+				_Utils_Tuple2(
+				'Tab selected',
+				A2(
+					$author$project$Widget$tab,
+					style.tab,
+					{
+						content: function (selected) {
+							return $mdgriffith$elm_ui$Element$text(
+								function () {
+									if ((selected.$ === 'Just') && (!selected.a)) {
+										return 'First Tab selected';
+									} else {
+										return 'Please select a tab';
+									}
+								}());
+						},
+						tabs: {
+							onSelect: A2(
+								$elm$core$Basics$composeR,
+								$elm$core$Basics$always(idle),
+								$elm$core$Maybe$Just),
+							options: A2(
+								$elm$core$List$map,
+								function (_int) {
+									return {
+										icon: $mdgriffith$elm_ui$Element$none,
+										text: $elm$core$String$fromInt(_int)
+									};
+								},
+								_List_fromArray(
+									[1, 2, 3])),
+							selected: $elm$core$Maybe$Just(0)
+						}
+					}))
+			]);
+	});
+var $author$project$Icons$circle = A2(
+	$author$project$Icons$svgFeatherIcon,
+	'circle',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$circle,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$cx('12'),
+					$elm$svg$Svg$Attributes$cy('12'),
+					$elm$svg$Svg$Attributes$r('10')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Internal$TextInput$textInput = F2(
+	function (style, _v0) {
+		var chips = _v0.chips;
+		var placeholder = _v0.placeholder;
+		var label = _v0.label;
+		var text = _v0.text;
+		var onChange = _v0.onChange;
 		return A2(
-			$mdgriffith$elm_ui$Element$column,
-			$Orasund$elm_ui_framework$Framework$Grid$section,
+			$mdgriffith$elm_ui$Element$row,
+			style.containerRow,
+			_List_fromArray(
+				[
+					$elm$core$List$isEmpty(chips) ? $mdgriffith$elm_ui$Element$none : A2(
+					$mdgriffith$elm_ui$Element$row,
+					style.chipsRow,
+					A2(
+						$elm$core$List$map,
+						A2(
+							$elm$core$Basics$composeR,
+							$author$project$Internal$Button$button(style.chipButton),
+							$mdgriffith$elm_ui$Element$el(_List_Nil)),
+						chips)),
+					A2(
+					$mdgriffith$elm_ui$Element$Input$text,
+					style.input,
+					{
+						label: $mdgriffith$elm_ui$Element$Input$labelHidden(label),
+						onChange: onChange,
+						placeholder: placeholder,
+						text: text
+					})
+				]));
+	});
+var $author$project$Widget$textInput = $author$project$Internal$TextInput$textInput;
+var $author$project$View$Test$textInput = F2(
+	function (idle, style) {
+		return _List_fromArray(
+			[
+				_Utils_Tuple2(
+				'Nothing Selected',
+				A2(
+					$author$project$Widget$textInput,
+					style.textInput,
+					{
+						chips: _List_Nil,
+						label: 'Label',
+						onChange: $elm$core$Basics$always(idle),
+						placeholder: $elm$core$Maybe$Nothing,
+						text: ''
+					})),
+				_Utils_Tuple2(
+				'Some chips',
+				A2(
+					$author$project$Widget$textInput,
+					style.textInput,
+					{
+						chips: _List_fromArray(
+							[
+								{
+								icon: A2(
+									$mdgriffith$elm_ui$Element$el,
+									_List_Nil,
+									$mdgriffith$elm_ui$Element$html($author$project$Icons$triangle)),
+								onPress: $elm$core$Maybe$Just(idle),
+								text: 'A'
+							},
+								{
+								icon: A2(
+									$mdgriffith$elm_ui$Element$el,
+									_List_Nil,
+									$mdgriffith$elm_ui$Element$html($author$project$Icons$circle)),
+								onPress: $elm$core$Maybe$Just(idle),
+								text: 'B'
+							}
+							]),
+						label: 'Label',
+						onChange: $elm$core$Basics$always(idle),
+						placeholder: $elm$core$Maybe$Nothing,
+						text: ''
+					}))
+			]);
+	});
+var $author$project$Data$Example$toTests = function (example) {
+	switch (example.$) {
+		case 'ButtonExample':
+			return $author$project$View$Test$button;
+		case 'SelectExample':
+			return $author$project$View$Test$select;
+		case 'MultiSelectExample':
+			return $author$project$View$Test$multiSelect;
+		case 'ExpansionPanelExample':
+			return $author$project$View$Test$expansionPanel;
+		case 'TabExample':
+			return $author$project$View$Test$tab;
+		case 'SortTableExample':
+			return $author$project$View$Test$sortTable;
+		case 'ModalExample':
+			return $author$project$View$Test$modal;
+		case 'DialogExample':
+			return $author$project$View$Test$dialog;
+		case 'TextInputExample':
+			return $author$project$View$Test$textInput;
+		default:
+			return $author$project$View$Test$list;
+	}
+};
+var $author$project$Example$Button$ChangedButtonStatus = function (a) {
+	return {$: 'ChangedButtonStatus', a: a};
+};
+var $feathericons$elm_feather$FeatherIcons$Icon = function (a) {
+	return {$: 'Icon', a: a};
+};
+var $feathericons$elm_feather$FeatherIcons$defaultAttributes = function (name) {
+	return {
+		_class: $elm$core$Maybe$Just('feather feather-' + name),
+		size: 24,
+		sizeUnit: '',
+		strokeWidth: 2,
+		viewBox: '0 0 24 24'
+	};
+};
+var $feathericons$elm_feather$FeatherIcons$makeBuilder = F2(
+	function (name, src) {
+		return $feathericons$elm_feather$FeatherIcons$Icon(
+			{
+				attrs: $feathericons$elm_feather$FeatherIcons$defaultAttributes(name),
+				src: src
+			});
+	});
+var $feathericons$elm_feather$FeatherIcons$repeat = A2(
+	$feathericons$elm_feather$FeatherIcons$makeBuilder,
+	'repeat',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$polyline,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$points('17 1 21 5 17 9')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M3 11V9a4 4 0 0 1 4-4h14')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$polyline,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$points('7 23 3 19 7 15')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M21 13v2a4 4 0 0 1-4 4H3')
+				]),
+			_List_Nil)
+		]));
+var $feathericons$elm_feather$FeatherIcons$slash = A2(
+	$feathericons$elm_feather$FeatherIcons$makeBuilder,
+	'slash',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$circle,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$cx('12'),
+					$elm$svg$Svg$Attributes$cy('12'),
+					$elm$svg$Svg$Attributes$r('10')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$line,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$x1('4.93'),
+					$elm$svg$Svg$Attributes$y1('4.93'),
+					$elm$svg$Svg$Attributes$x2('19.07'),
+					$elm$svg$Svg$Attributes$y2('19.07')
+				]),
+			_List_Nil)
+		]));
+var $elm$svg$Svg$map = $elm$virtual_dom$VirtualDom$map;
+var $feathericons$elm_feather$FeatherIcons$toHtml = F2(
+	function (attributes, _v0) {
+		var src = _v0.a.src;
+		var attrs = _v0.a.attrs;
+		var strSize = $elm$core$String$fromFloat(attrs.size);
+		var baseAttributes = _List_fromArray(
+			[
+				$elm$svg$Svg$Attributes$fill('none'),
+				$elm$svg$Svg$Attributes$height(
+				_Utils_ap(strSize, attrs.sizeUnit)),
+				$elm$svg$Svg$Attributes$width(
+				_Utils_ap(strSize, attrs.sizeUnit)),
+				$elm$svg$Svg$Attributes$stroke('currentColor'),
+				$elm$svg$Svg$Attributes$strokeLinecap('round'),
+				$elm$svg$Svg$Attributes$strokeLinejoin('round'),
+				$elm$svg$Svg$Attributes$strokeWidth(
+				$elm$core$String$fromFloat(attrs.strokeWidth)),
+				$elm$svg$Svg$Attributes$viewBox(attrs.viewBox)
+			]);
+		var combinedAttributes = _Utils_ap(
+			function () {
+				var _v1 = attrs._class;
+				if (_v1.$ === 'Just') {
+					var c = _v1.a;
+					return A2(
+						$elm$core$List$cons,
+						$elm$svg$Svg$Attributes$class(c),
+						baseAttributes);
+				} else {
+					return baseAttributes;
+				}
+			}(),
+			attributes);
+		return A2(
+			$elm$svg$Svg$svg,
+			combinedAttributes,
+			A2(
+				$elm$core$List$map,
+				$elm$svg$Svg$map($elm$core$Basics$never),
+				src));
+	});
+var $feathericons$elm_feather$FeatherIcons$withSize = F2(
+	function (size, _v0) {
+		var attrs = _v0.a.attrs;
+		var src = _v0.a.src;
+		return $feathericons$elm_feather$FeatherIcons$Icon(
+			{
+				attrs: _Utils_update(
+					attrs,
+					{size: size}),
+				src: src
+			});
+	});
+var $author$project$Example$Button$view = F3(
+	function (msgMapper, style, _v0) {
+		var isButtonEnabled = _v0.a;
+		return A2(
+			$author$project$Widget$row,
+			style.row,
 			_List_fromArray(
 				[
 					A2(
-					$mdgriffith$elm_ui$Element$el,
-					$Orasund$elm_ui_framework$Framework$Heading$h2,
-					$mdgriffith$elm_ui$Element$text('Stateless Views')),
+					$author$project$Widget$button,
+					style.primaryButton,
+					{
+						icon: A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_Nil,
+							$mdgriffith$elm_ui$Element$html(
+								A2(
+									$feathericons$elm_feather$FeatherIcons$toHtml,
+									_List_Nil,
+									A2($feathericons$elm_feather$FeatherIcons$withSize, 16, $feathericons$elm_feather$FeatherIcons$slash)))),
+						onPress: isButtonEnabled ? $elm$core$Maybe$Just(
+							msgMapper(
+								$author$project$Example$Button$ChangedButtonStatus(false))) : $elm$core$Maybe$Nothing,
+						text: 'disable me'
+					}),
 					A2(
-					$mdgriffith$elm_ui$Element$paragraph,
-					_List_Nil,
-					$elm$core$List$singleton(
-						$mdgriffith$elm_ui$Element$text('Stateless views are simple functions that view some content. No wiring required.'))),
+					$author$project$Widget$iconButton,
+					style.button,
+					{
+						icon: A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_Nil,
+							$mdgriffith$elm_ui$Element$html(
+								A2(
+									$feathericons$elm_feather$FeatherIcons$toHtml,
+									_List_Nil,
+									A2($feathericons$elm_feather$FeatherIcons$withSize, 16, $feathericons$elm_feather$FeatherIcons$repeat)))),
+						onPress: $elm$core$Maybe$Just(
+							msgMapper(
+								$author$project$Example$Button$ChangedButtonStatus(true))),
+						text: 'reset'
+					})
+				]));
+	});
+var $author$project$Example$Dialog$OpenDialog = function (a) {
+	return {$: 'OpenDialog', a: a};
+};
+var $feathericons$elm_feather$FeatherIcons$eye = A2(
+	$feathericons$elm_feather$FeatherIcons$makeBuilder,
+	'eye',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z')
+				]),
+			_List_Nil),
+			A2(
+			$elm$svg$Svg$circle,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$cx('12'),
+					$elm$svg$Svg$Attributes$cy('12'),
+					$elm$svg$Svg$Attributes$r('3')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Example$Dialog$view = F3(
+	function (msgMapper, style, _v0) {
+		var isOpen = _v0.a;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_Utils_ap(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$height(
+						A2($mdgriffith$elm_ui$Element$minimum, 200, $mdgriffith$elm_ui$Element$fill)),
+						$mdgriffith$elm_ui$Element$width(
+						A2($mdgriffith$elm_ui$Element$minimum, 400, $mdgriffith$elm_ui$Element$fill))
+					]),
+				isOpen ? A2(
+					$author$project$Widget$dialog,
+					style.dialog,
+					{
+						accept: $elm$core$Maybe$Just(
+							{
+								onPress: $elm$core$Maybe$Just(
+									msgMapper(
+										$author$project$Example$Dialog$OpenDialog(false))),
+								text: 'Ok'
+							}),
+						dismiss: $elm$core$Maybe$Just(
+							{
+								onPress: $elm$core$Maybe$Just(
+									msgMapper(
+										$author$project$Example$Dialog$OpenDialog(false))),
+								text: 'Dismiss'
+							}),
+						text: 'This is a dialog window',
+						title: $elm$core$Maybe$Just('Dialog')
+					}) : _List_Nil),
+			A2(
+				$author$project$Widget$button,
+				style.primaryButton,
+				{
+					icon: A2(
+						$mdgriffith$elm_ui$Element$el,
+						_List_Nil,
+						$mdgriffith$elm_ui$Element$html(
+							A2(
+								$feathericons$elm_feather$FeatherIcons$toHtml,
+								_List_Nil,
+								A2($feathericons$elm_feather$FeatherIcons$withSize, 16, $feathericons$elm_feather$FeatherIcons$eye)))),
+					onPress: $elm$core$Maybe$Just(
+						msgMapper(
+							$author$project$Example$Dialog$OpenDialog(true))),
+					text: 'show Dialog'
+				}));
+	});
+var $author$project$Example$ExpansionPanel$ToggleCollapsable = function (a) {
+	return {$: 'ToggleCollapsable', a: a};
+};
+var $author$project$Example$ExpansionPanel$view = F3(
+	function (msgMapper, style, _v0) {
+		var isExpanded = _v0.a;
+		return A2(
+			$author$project$Widget$expansionPanel,
+			style.expansionPanel,
+			{
+				content: $mdgriffith$elm_ui$Element$text('Hello World'),
+				icon: $mdgriffith$elm_ui$Element$none,
+				isExpanded: isExpanded,
+				onToggle: A2($elm$core$Basics$composeR, $author$project$Example$ExpansionPanel$ToggleCollapsable, msgMapper),
+				text: 'Title'
+			});
+	});
+var $author$project$Example$List$view = F3(
+	function (_v0, style, _v1) {
+		return A2(
+			$author$project$Widget$column,
+			style.cardColumn,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$text('A'),
+					$mdgriffith$elm_ui$Element$text('B'),
+					$mdgriffith$elm_ui$Element$text('C')
+				]));
+	});
+var $author$project$Example$Modal$ToggleModal = function (a) {
+	return {$: 'ToggleModal', a: a};
+};
+var $author$project$Example$Modal$view = F3(
+	function (msgMapper, style, _v0) {
+		var isEnabled = _v0.a;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_Utils_ap(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$height(
+						A2($mdgriffith$elm_ui$Element$minimum, 200, $mdgriffith$elm_ui$Element$fill)),
+						$mdgriffith$elm_ui$Element$width(
+						A2($mdgriffith$elm_ui$Element$minimum, 400, $mdgriffith$elm_ui$Element$fill))
+					]),
+				isEnabled ? $author$project$Widget$modal(
+					{
+						content: A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$height(
+									$mdgriffith$elm_ui$Element$px(100)),
+									$mdgriffith$elm_ui$Element$width(
+									$mdgriffith$elm_ui$Element$px(250)),
+									$mdgriffith$elm_ui$Element$centerX,
+									$mdgriffith$elm_ui$Element$centerY
+								]),
+							A2(
+								$author$project$Widget$column,
+								style.cardColumn,
+								$elm$core$List$singleton(
+									A2(
+										$mdgriffith$elm_ui$Element$paragraph,
+										_List_Nil,
+										$elm$core$List$singleton(
+											$mdgriffith$elm_ui$Element$text('Click on the area around this box to close it.')))))),
+						onDismiss: $elm$core$Maybe$Just(
+							msgMapper(
+								$author$project$Example$Modal$ToggleModal(false)))
+					}) : _List_Nil),
+			A2(
+				$author$project$Widget$button,
+				style.primaryButton,
+				{
+					icon: A2(
+						$mdgriffith$elm_ui$Element$el,
+						_List_Nil,
+						$mdgriffith$elm_ui$Element$html(
+							A2(
+								$feathericons$elm_feather$FeatherIcons$toHtml,
+								_List_Nil,
+								A2($feathericons$elm_feather$FeatherIcons$withSize, 16, $feathericons$elm_feather$FeatherIcons$eye)))),
+					onPress: $elm$core$Maybe$Just(
+						msgMapper(
+							$author$project$Example$Modal$ToggleModal(true))),
+					text: 'show Modal'
+				}));
+	});
+var $author$project$Example$MultiSelect$ChangedSelected = function (a) {
+	return {$: 'ChangedSelected', a: a};
+};
+var $author$project$Example$MultiSelect$view = F3(
+	function (msgMapper, style, _v0) {
+		var selected = _v0.a;
+		return A2(
+			$author$project$Widget$buttonRow,
+			{button: style.selectButton, list: style.buttonRow},
+			$author$project$Widget$multiSelect(
+				{
+					onSelect: A2(
+						$elm$core$Basics$composeR,
+						$author$project$Example$MultiSelect$ChangedSelected,
+						A2($elm$core$Basics$composeR, msgMapper, $elm$core$Maybe$Just)),
+					options: A2(
+						$elm$core$List$map,
+						function (_int) {
+							return {
+								icon: $mdgriffith$elm_ui$Element$none,
+								text: $elm$core$String$fromInt(_int)
+							};
+						},
+						_List_fromArray(
+							[1, 2, 42])),
+					selected: selected
+				}));
+	});
+var $author$project$Example$Select$ChangedSelected = function (a) {
+	return {$: 'ChangedSelected', a: a};
+};
+var $author$project$Example$Select$view = F3(
+	function (msgMapper, style, _v0) {
+		var selected = _v0.a;
+		return A2(
+			$author$project$Widget$buttonRow,
+			{button: style.selectButton, list: style.buttonRow},
+			$author$project$Widget$select(
+				{
+					onSelect: A2(
+						$elm$core$Basics$composeR,
+						$author$project$Example$Select$ChangedSelected,
+						A2($elm$core$Basics$composeR, msgMapper, $elm$core$Maybe$Just)),
+					options: A2(
+						$elm$core$List$map,
+						function (_int) {
+							return {
+								icon: $mdgriffith$elm_ui$Element$none,
+								text: $elm$core$String$fromInt(_int)
+							};
+						},
+						_List_fromArray(
+							[1, 2, 42])),
+					selected: selected
+				}));
+	});
+var $author$project$Example$SortTable$ChangedSorting = function (a) {
+	return {$: 'ChangedSorting', a: a};
+};
+var $author$project$Example$SortTable$view = F3(
+	function (msgMapper, style, model) {
+		return A2(
+			$author$project$Widget$sortTable,
+			style.sortTable,
+			{
+				asc: model.asc,
+				columns: _List_fromArray(
+					[
+						$author$project$Widget$intColumn(
+						{
+							title: 'Id',
+							toString: function (_int) {
+								return '#' + $elm$core$String$fromInt(_int);
+							},
+							value: function ($) {
+								return $.id;
+							},
+							width: $mdgriffith$elm_ui$Element$fill
+						}),
+						$author$project$Widget$stringColumn(
+						{
+							title: 'Name',
+							toString: $elm$core$Basics$identity,
+							value: function ($) {
+								return $.name;
+							},
+							width: $mdgriffith$elm_ui$Element$fill
+						}),
+						$author$project$Widget$floatColumn(
+						{
+							title: 'Rating',
+							toString: $elm$core$String$fromFloat,
+							value: function ($) {
+								return $.rating;
+							},
+							width: $mdgriffith$elm_ui$Element$fill
+						}),
+						$author$project$Widget$unsortableColumn(
+						{
+							title: 'Hash',
+							toString: A2(
+								$elm$core$Basics$composeR,
+								function ($) {
+									return $.hash;
+								},
+								$elm$core$Maybe$withDefault('None')),
+							width: $mdgriffith$elm_ui$Element$fill
+						})
+					]),
+				content: _List_fromArray(
+					[
+						{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
+						{
+						hash: $elm$core$Maybe$Just('45jf'),
+						id: 2,
+						name: 'Ana',
+						rating: 1.34
+					},
+						{
+						hash: $elm$core$Maybe$Just('6fs1'),
+						id: 3,
+						name: 'Alfred',
+						rating: 4.22
+					},
+						{
+						hash: $elm$core$Maybe$Just('k52f'),
+						id: 4,
+						name: 'Thomas',
+						rating: 3
+					}
+					]),
+				onChange: A2($elm$core$Basics$composeR, $author$project$Example$SortTable$ChangedSorting, msgMapper),
+				sortBy: model.title
+			});
+	});
+var $author$project$Example$Tab$ChangedTab = function (a) {
+	return {$: 'ChangedTab', a: a};
+};
+var $author$project$Example$Tab$view = F3(
+	function (msgMapper, style, _v0) {
+		var selected = _v0.a;
+		return A2(
+			$author$project$Widget$tab,
+			style.tab,
+			{
+				content: function (s) {
+					return $mdgriffith$elm_ui$Element$text(
+						function () {
+							_v1$3:
+							while (true) {
+								if (s.$ === 'Just') {
+									switch (s.a) {
+										case 0:
+											return 'This is Tab 1';
+										case 1:
+											return 'This is the second tab';
+										case 2:
+											return 'The thrid and last tab';
+										default:
+											break _v1$3;
+									}
+								} else {
+									break _v1$3;
+								}
+							}
+							return 'Please select a tab';
+						}());
+				},
+				tabs: {
+					onSelect: A2(
+						$elm$core$Basics$composeR,
+						$author$project$Example$Tab$ChangedTab,
+						A2($elm$core$Basics$composeR, msgMapper, $elm$core$Maybe$Just)),
+					options: A2(
+						$elm$core$List$map,
+						function (_int) {
+							return {
+								icon: $mdgriffith$elm_ui$Element$none,
+								text: 'Tab ' + $elm$core$String$fromInt(_int)
+							};
+						},
+						_List_fromArray(
+							[1, 2, 3])),
+					selected: selected
+				}
+			});
+	});
+var $author$project$Example$TextInput$SetTextInput = function (a) {
+	return {$: 'SetTextInput', a: a};
+};
+var $author$project$Example$TextInput$ToggleTextInputChip = function (a) {
+	return {$: 'ToggleTextInputChip', a: a};
+};
+var $elm$core$Dict$diff = F2(
+	function (t1, t2) {
+		return A3(
+			$elm$core$Dict$foldl,
+			F3(
+				function (k, v, t) {
+					return A2($elm$core$Dict$remove, k, t);
+				}),
+			t1,
+			t2);
+	});
+var $elm$core$Set$diff = F2(
+	function (_v0, _v1) {
+		var dict1 = _v0.a;
+		var dict2 = _v1.a;
+		return $elm$core$Set$Set_elm_builtin(
+			A2($elm$core$Dict$diff, dict1, dict2));
+	});
+var $mdgriffith$elm_ui$Internal$Model$Padding = F5(
+	function (a, b, c, d, e) {
+		return {$: 'Padding', a: a, b: b, c: c, d: d, e: e};
+	});
+var $mdgriffith$elm_ui$Internal$Model$Spaced = F3(
+	function (a, b, c) {
+		return {$: 'Spaced', a: a, b: b, c: c};
+	});
+var $mdgriffith$elm_ui$Internal$Model$extractSpacingAndPadding = function (attrs) {
+	return A3(
+		$elm$core$List$foldr,
+		F2(
+			function (attr, _v0) {
+				var pad = _v0.a;
+				var spacing = _v0.b;
+				return _Utils_Tuple2(
+					function () {
+						if (pad.$ === 'Just') {
+							var x = pad.a;
+							return pad;
+						} else {
+							if ((attr.$ === 'StyleClass') && (attr.b.$ === 'PaddingStyle')) {
+								var _v3 = attr.b;
+								var name = _v3.a;
+								var t = _v3.b;
+								var r = _v3.c;
+								var b = _v3.d;
+								var l = _v3.e;
+								return $elm$core$Maybe$Just(
+									A5($mdgriffith$elm_ui$Internal$Model$Padding, name, t, r, b, l));
+							} else {
+								return $elm$core$Maybe$Nothing;
+							}
+						}
+					}(),
+					function () {
+						if (spacing.$ === 'Just') {
+							var x = spacing.a;
+							return spacing;
+						} else {
+							if ((attr.$ === 'StyleClass') && (attr.b.$ === 'SpacingStyle')) {
+								var _v6 = attr.b;
+								var name = _v6.a;
+								var x = _v6.b;
+								var y = _v6.c;
+								return $elm$core$Maybe$Just(
+									A3($mdgriffith$elm_ui$Internal$Model$Spaced, name, x, y));
+							} else {
+								return $elm$core$Maybe$Nothing;
+							}
+						}
+					}());
+			}),
+		_Utils_Tuple2($elm$core$Maybe$Nothing, $elm$core$Maybe$Nothing),
+		attrs);
+};
+var $mdgriffith$elm_ui$Element$wrappedRow = F2(
+	function (attrs, children) {
+		var _v0 = $mdgriffith$elm_ui$Internal$Model$extractSpacingAndPadding(attrs);
+		var padded = _v0.a;
+		var spaced = _v0.b;
+		if (spaced.$ === 'Nothing') {
+			return A4(
+				$mdgriffith$elm_ui$Internal$Model$element,
+				$mdgriffith$elm_ui$Internal$Model$asRow,
+				$mdgriffith$elm_ui$Internal$Model$div,
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentLeft + (' ' + ($mdgriffith$elm_ui$Internal$Style$classes.contentCenterY + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.wrapped)))),
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+						A2(
+							$elm$core$List$cons,
+							$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+							attrs))),
+				$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
+		} else {
+			var _v2 = spaced.a;
+			var spaceName = _v2.a;
+			var x = _v2.b;
+			var y = _v2.c;
+			var newPadding = function () {
+				if (padded.$ === 'Just') {
+					var _v5 = padded.a;
+					var name = _v5.a;
+					var t = _v5.b;
+					var r = _v5.c;
+					var b = _v5.d;
+					var l = _v5.e;
+					return ((_Utils_cmp(r, (x / 2) | 0) > -1) && (_Utils_cmp(b, (y / 2) | 0) > -1)) ? $elm$core$Maybe$Just(
+						$mdgriffith$elm_ui$Element$paddingEach(
+							{bottom: b - ((y / 2) | 0), left: l - ((x / 2) | 0), right: r - ((x / 2) | 0), top: t - ((y / 2) | 0)})) : $elm$core$Maybe$Nothing;
+				} else {
+					return $elm$core$Maybe$Nothing;
+				}
+			}();
+			if (newPadding.$ === 'Just') {
+				var pad = newPadding.a;
+				return A4(
+					$mdgriffith$elm_ui$Internal$Model$element,
+					$mdgriffith$elm_ui$Internal$Model$asRow,
+					$mdgriffith$elm_ui$Internal$Model$div,
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentLeft + (' ' + ($mdgriffith$elm_ui$Internal$Style$classes.contentCenterY + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.wrapped)))),
+						A2(
+							$elm$core$List$cons,
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+							A2(
+								$elm$core$List$cons,
+								$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+								_Utils_ap(
+									attrs,
+									_List_fromArray(
+										[pad]))))),
+					$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
+			} else {
+				var halfY = -(y / 2);
+				var halfX = -(x / 2);
+				return A4(
+					$mdgriffith$elm_ui$Internal$Model$element,
+					$mdgriffith$elm_ui$Internal$Model$asEl,
+					$mdgriffith$elm_ui$Internal$Model$div,
+					attrs,
+					$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+						_List_fromArray(
+							[
+								A4(
+								$mdgriffith$elm_ui$Internal$Model$element,
+								$mdgriffith$elm_ui$Internal$Model$asRow,
+								$mdgriffith$elm_ui$Internal$Model$div,
+								A2(
+									$elm$core$List$cons,
+									$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentLeft + (' ' + ($mdgriffith$elm_ui$Internal$Style$classes.contentCenterY + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.wrapped)))),
+									A2(
+										$elm$core$List$cons,
+										$mdgriffith$elm_ui$Internal$Model$Attr(
+											A2(
+												$elm$html$Html$Attributes$style,
+												'margin',
+												$elm$core$String$fromFloat(halfY) + ('px' + (' ' + ($elm$core$String$fromFloat(halfX) + 'px'))))),
+										A2(
+											$elm$core$List$cons,
+											$mdgriffith$elm_ui$Internal$Model$Attr(
+												A2(
+													$elm$html$Html$Attributes$style,
+													'width',
+													'calc(100% + ' + ($elm$core$String$fromInt(x) + 'px)'))),
+											A2(
+												$elm$core$List$cons,
+												$mdgriffith$elm_ui$Internal$Model$Attr(
+													A2(
+														$elm$html$Html$Attributes$style,
+														'height',
+														'calc(100% + ' + ($elm$core$String$fromInt(y) + 'px)'))),
+												A2(
+													$elm$core$List$cons,
+													A2(
+														$mdgriffith$elm_ui$Internal$Model$StyleClass,
+														$mdgriffith$elm_ui$Internal$Flag$spacing,
+														A3($mdgriffith$elm_ui$Internal$Model$SpacingStyle, spaceName, x, y)),
+													_List_Nil))))),
+								$mdgriffith$elm_ui$Internal$Model$Unkeyed(children))
+							])));
+			}
+		}
+	});
+var $author$project$Example$TextInput$view = F3(
+	function (msgMapper, style, model) {
+		return A2(
+			$author$project$Widget$column,
+			style.column,
+			_List_fromArray(
+				[
+					A2(
+					$author$project$Widget$textInput,
+					style.textInput,
+					{
+						chips: A2(
+							$elm$core$List$map,
+							function (string) {
+								return {
+									icon: $mdgriffith$elm_ui$Element$none,
+									onPress: $elm$core$Maybe$Just(
+										msgMapper(
+											$author$project$Example$TextInput$ToggleTextInputChip(string))),
+									text: string
+								};
+							},
+							$elm$core$Set$toList(model.chipTextInput)),
+						label: 'Chips',
+						onChange: A2($elm$core$Basics$composeR, $author$project$Example$TextInput$SetTextInput, msgMapper),
+						placeholder: $elm$core$Maybe$Nothing,
+						text: model.textInput
+					}),
 					A2(
 					$mdgriffith$elm_ui$Element$wrappedRow,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$spacing(10)
+						]),
+					A2(
+						$elm$core$List$map,
+						function (string) {
+							return A2(
+								$author$project$Widget$button,
+								style.textInput.chipButton,
+								{
+									icon: $mdgriffith$elm_ui$Element$none,
+									onPress: $elm$core$Maybe$Just(
+										msgMapper(
+											$author$project$Example$TextInput$ToggleTextInputChip(string))),
+									text: string
+								});
+						},
+						$elm$core$Set$toList(
+							A2(
+								$elm$core$Set$diff,
+								$elm$core$Set$fromList(
+									_List_fromArray(
+										['A', 'B', 'C'])),
+								model.chipTextInput))))
+				]));
+	});
+var $author$project$Data$Example$view = F3(
+	function (msgMapper, style, model) {
+		return {
+			button: A3(
+				$author$project$Example$Button$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$Button, msgMapper),
+				style,
+				function ($) {
+					return $.button;
+				}(model)),
+			dialog: A3(
+				$author$project$Example$Dialog$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$Dialog, msgMapper),
+				style,
+				function ($) {
+					return $.dialog;
+				}(model)),
+			expansionPanel: A3(
+				$author$project$Example$ExpansionPanel$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$ExpansionPanel, msgMapper),
+				style,
+				function ($) {
+					return $.expansionPanel;
+				}(model)),
+			list: A3(
+				$author$project$Example$List$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$List, msgMapper),
+				style,
+				function ($) {
+					return $.list;
+				}(model)),
+			modal: A3(
+				$author$project$Example$Modal$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$Modal, msgMapper),
+				style,
+				function ($) {
+					return $.modal;
+				}(model)),
+			multiSelect: A3(
+				$author$project$Example$MultiSelect$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$MultiSelect, msgMapper),
+				style,
+				function ($) {
+					return $.multiSelect;
+				}(model)),
+			select: A3(
+				$author$project$Example$Select$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$Select, msgMapper),
+				style,
+				function ($) {
+					return $.select;
+				}(model)),
+			sortTable: A3(
+				$author$project$Example$SortTable$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$SortTable, msgMapper),
+				style,
+				function ($) {
+					return $.sortTable;
+				}(model)),
+			tab: A3(
+				$author$project$Example$Tab$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$Tab, msgMapper),
+				style,
+				function ($) {
+					return $.tab;
+				}(model)),
+			textInput: A3(
+				$author$project$Example$TextInput$view,
+				A2($elm$core$Basics$composeR, $author$project$Data$Example$TextInput, msgMapper),
+				style,
+				function ($) {
+					return $.textInput;
+				}(model))
+		};
+	});
+var $author$project$Data$Example$toCardList = function (_v0) {
+	var idle = _v0.idle;
+	var msgMapper = _v0.msgMapper;
+	var style = _v0.style;
+	var model = _v0.model;
+	return A2(
+		$elm$core$List$map,
+		function (_v1) {
+			var title = _v1.title;
+			var example = _v1.example;
+			var test = _v1.test;
+			return _Utils_Tuple3(
+				title,
+				example(
+					A3($author$project$Data$Example$view, msgMapper, style, model)),
+				A2(
+					$mdgriffith$elm_ui$Element$column,
 					_Utils_ap(
 						$Orasund$elm_ui_framework$Framework$Grid$simple,
 						_List_fromArray(
 							[
-								$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
-							])),
-					_List_fromArray(
-						[
-							A2(
-							$mdgriffith$elm_ui$Element$map,
-							msgMapper,
-							$author$project$Stateless$select(model)),
-							A2(
-							$mdgriffith$elm_ui$Element$map,
-							msgMapper,
-							$author$project$Stateless$multiSelect(model)),
-							A2(
-							$mdgriffith$elm_ui$Element$map,
-							msgMapper,
-							$author$project$Stateless$collapsable(model)),
-							A2(
-							$author$project$Stateless$scrim,
-							{changedSheet: changedSheet, showDialog: showDialog},
-							model),
-							A2(
-							$mdgriffith$elm_ui$Element$map,
-							msgMapper,
-							$author$project$Stateless$carousel(model)),
-							A2(
-							$mdgriffith$elm_ui$Element$map,
-							msgMapper,
-							$author$project$Stateless$tab(model))
-						]))
-				]));
-	});
-var $elm$html$Html$Attributes$id = $elm$html$Html$Attributes$stringProperty('id');
-var $author$project$Widget$ScrollingNav$view = F2(
-	function (asElement, _v0) {
-		var labels = _v0.labels;
-		var arrangement = _v0.arrangement;
-		return A2(
-			$mdgriffith$elm_ui$Element$column,
-			$Orasund$elm_ui_framework$Framework$Grid$simple,
-			A2(
-				$elm$core$List$map,
-				function (header) {
-					return A2(
-						$mdgriffith$elm_ui$Element$el,
-						_List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$htmlAttribute(
-								$elm$html$Html$Attributes$id(
-									labels(header))),
 								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-							]),
-						asElement(header));
-				},
-				arrangement));
-	});
-var $author$project$Example$view = function (model) {
+							])),
+					A2(
+						$elm$core$List$map,
+						function (_v2) {
+							var name = _v2.a;
+							var elem = _v2.b;
+							return A2(
+								$mdgriffith$elm_ui$Element$row,
+								$Orasund$elm_ui_framework$Framework$Grid$spacedEvenly,
+								_List_fromArray(
+									[
+										A2(
+										$mdgriffith$elm_ui$Element$wrappedRow,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
+											]),
+										$elm$core$List$singleton(
+											$mdgriffith$elm_ui$Element$text(name))),
+										A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$paddingEach(
+												{bottom: 0, left: 8, right: 0, top: 0}),
+												$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
+											]),
+										elem)
+									]));
+						},
+						A2(test, idle, style))));
+		},
+		A2(
+			$elm$core$List$map,
+			function (example) {
+				return {
+					example: $author$project$Data$Example$get(example),
+					test: $author$project$Data$Example$toTests(example),
+					title: $author$project$Data$Example$toString(example)
+				};
+			},
+			$author$project$Data$Example$asList));
+};
+var $author$project$Stateless$view = function (_v0) {
+	var theme = _v0.theme;
+	var msgMapper = _v0.msgMapper;
+	var model = _v0.model;
+	var style = $author$project$Data$Theme$toStyle(theme);
+	return {
+		description: 'Stateless views are simple functions that view some content. No wiring required.',
+		items: $author$project$Data$Example$toCardList(
+			{
+				idle: msgMapper($author$project$Stateless$Idle),
+				model: model.example,
+				msgMapper: A2($elm$core$Basics$composeR, $author$project$Stateless$ExampleSpecific, msgMapper),
+				style: style
+			}),
+		title: 'Stateless Views'
+	};
+};
+var $author$project$Main$viewLoaded = function (m) {
+	var style = $author$project$Data$Theme$toStyle(m.theme);
+	return A2(
+		$mdgriffith$elm_ui$Element$column,
+		$Orasund$elm_ui_framework$Framework$Grid$compact,
+		_List_fromArray(
+			[
+				A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$height(
+						$mdgriffith$elm_ui$Element$px(42))
+					]),
+				$mdgriffith$elm_ui$Element$none),
+				A2(
+				$mdgriffith$elm_ui$Element$column,
+				_Utils_ap($Orasund$elm_ui_framework$Framework$container, style.layout.container),
+				A2(
+					$elm$core$List$map,
+					function (section) {
+						return function (_v1) {
+							var title = _v1.title;
+							var description = _v1.description;
+							var items = _v1.items;
+							return A2(
+								$mdgriffith$elm_ui$Element$column,
+								_Utils_ap(
+									$Orasund$elm_ui_framework$Framework$Grid$section,
+									_List_fromArray(
+										[$mdgriffith$elm_ui$Element$centerX])),
+								_List_fromArray(
+									[
+										A2(
+										$mdgriffith$elm_ui$Element$el,
+										$Orasund$elm_ui_framework$Framework$Heading$h2,
+										$mdgriffith$elm_ui$Element$text(title)),
+										(m.search.current === '') ? A2(
+										$mdgriffith$elm_ui$Element$paragraph,
+										_List_Nil,
+										$elm$core$List$singleton(
+											$mdgriffith$elm_ui$Element$text(description))) : $mdgriffith$elm_ui$Element$none,
+										A2(
+										$mdgriffith$elm_ui$Element$wrappedRow,
+										_Utils_ap(
+											$Orasund$elm_ui_framework$Framework$Grid$simple,
+											_List_fromArray(
+												[
+													$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
+												])),
+										A2(
+											$elm$core$List$map,
+											function (_v3) {
+												var name = _v3.a;
+												var elem = _v3.b;
+												var more = _v3.c;
+												return A2(
+													$author$project$Widget$column,
+													style.cardColumn,
+													_List_fromArray(
+														[
+															A2(
+															$mdgriffith$elm_ui$Element$column,
+															$Orasund$elm_ui_framework$Framework$Grid$simple,
+															_List_fromArray(
+																[
+																	A2(
+																	$mdgriffith$elm_ui$Element$el,
+																	_Utils_ap(
+																		$Orasund$elm_ui_framework$Framework$Heading$h3,
+																		_List_fromArray(
+																			[
+																				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+																				$mdgriffith$elm_ui$Element$htmlAttribute(
+																				$elm$html$Html$Attributes$id(name))
+																			])),
+																	$mdgriffith$elm_ui$Element$text(name)),
+																	elem
+																])),
+															A2(
+															$author$project$Widget$expansionPanel,
+															style.expansionPanel,
+															{
+																content: more,
+																icon: $mdgriffith$elm_ui$Element$none,
+																isExpanded: A2(
+																	$elm$core$Maybe$withDefault,
+																	false,
+																	A2(
+																		$elm$core$Maybe$map,
+																		function (example) {
+																			return A2($turboMaCk$any_set$Set$Any$member, example, m.expanded);
+																		},
+																		$author$project$Data$Example$fromString(name))),
+																onToggle: $elm$core$Basics$always(
+																	A2(
+																		$elm$core$Maybe$withDefault,
+																		$author$project$Main$Idle,
+																		A2(
+																			$elm$core$Maybe$map,
+																			$author$project$Main$ToggledExample,
+																			$author$project$Data$Example$fromString(name)))),
+																text: 'States'
+															})
+														]));
+											},
+											((m.search.current !== '') ? $elm$core$List$filter(
+												function (_v2) {
+													var a = _v2.a;
+													return A2(
+														$elm$core$String$contains,
+														$elm$core$String$toLower(m.search.current),
+														$elm$core$String$toLower(a));
+												}) : $elm$core$Basics$identity)(items)))
+									]));
+						}(
+							function () {
+								if (section.$ === 'ReusableViews') {
+									return $author$project$Reusable$view(
+										{addSnackbar: $author$project$Main$AddSnackbar, theme: m.theme});
+								} else {
+									return $author$project$Stateless$view(
+										{model: m.stateless, msgMapper: $author$project$Main$StatelessSpecific, theme: m.theme});
+								}
+							}());
+					},
+					_List_fromArray(
+						[$author$project$Data$Section$StatelessViews, $author$project$Data$Section$ReusableViews])))
+			]));
+};
+var $author$project$Main$view = function (model) {
 	if (model.$ === 'Loading') {
 		return A2($Orasund$elm_ui_framework$Framework$responsiveLayout, _List_Nil, $mdgriffith$elm_ui$Element$none);
 	} else {
 		var m = model.a;
+		var style = $author$project$Data$Theme$toStyle(m.theme);
 		return A2(
 			$elm$html$Html$map,
-			$author$project$Example$LoadedSpecific,
-			A2(
-				$author$project$Layout$view,
-				_List_Nil,
+			$author$project$Main$LoadedSpecific,
+			A3(
+				$author$project$Widget$Layout$view,
+				style.layout,
 				{
 					actions: _List_fromArray(
 						[
@@ -17212,181 +20641,107 @@ var $author$project$Example$view = function (model) {
 								$mdgriffith$elm_ui$Element$el,
 								_List_Nil,
 								$mdgriffith$elm_ui$Element$html($author$project$Icons$book)),
-							label: 'Docs',
 							onPress: $elm$core$Maybe$Just(
-								$author$project$Example$Load('https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/'))
+								$author$project$Main$Load('https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/')),
+							text: 'Docs'
 						},
 							{
 							icon: A2(
 								$mdgriffith$elm_ui$Element$el,
 								_List_Nil,
 								$mdgriffith$elm_ui$Element$html($author$project$Icons$github)),
-							label: 'Github',
 							onPress: $elm$core$Maybe$Just(
-								$author$project$Example$Load('https://github.com/Orasund/elm-ui-widgets'))
+								$author$project$Main$Load('https://github.com/Orasund/elm-ui-widgets')),
+							text: 'Github'
 						},
 							{
 							icon: A2(
 								$mdgriffith$elm_ui$Element$el,
 								_List_Nil,
-								$mdgriffith$elm_ui$Element$html($author$project$Icons$circle)),
-							label: 'Placeholder',
-							onPress: $elm$core$Maybe$Nothing
+								$mdgriffith$elm_ui$Element$html($author$project$Icons$penTool)),
+							onPress: (!_Utils_eq(m.theme, $author$project$Data$Theme$Material)) ? $elm$core$Maybe$Just(
+								$author$project$Main$SetTheme($author$project$Data$Theme$Material)) : $elm$core$Maybe$Nothing,
+							text: 'Material Theme'
 						},
 							{
 							icon: A2(
 								$mdgriffith$elm_ui$Element$el,
 								_List_Nil,
-								$mdgriffith$elm_ui$Element$html($author$project$Icons$triangle)),
-							label: 'Placeholder',
-							onPress: $elm$core$Maybe$Nothing
+								$mdgriffith$elm_ui$Element$html($author$project$Icons$penTool)),
+							onPress: (!_Utils_eq(m.theme, $author$project$Data$Theme$DarkMaterial)) ? $elm$core$Maybe$Just(
+								$author$project$Main$SetTheme($author$project$Data$Theme$DarkMaterial)) : $elm$core$Maybe$Nothing,
+							text: 'Dark Material Theme'
 						},
 							{
 							icon: A2(
 								$mdgriffith$elm_ui$Element$el,
 								_List_Nil,
-								$mdgriffith$elm_ui$Element$html($author$project$Icons$square)),
-							label: 'Placeholder',
-							onPress: $elm$core$Maybe$Nothing
+								$mdgriffith$elm_ui$Element$html($author$project$Icons$penTool)),
+							onPress: (!_Utils_eq(m.theme, $author$project$Data$Theme$ElmUiFramework)) ? $elm$core$Maybe$Just(
+								$author$project$Main$SetTheme($author$project$Data$Theme$ElmUiFramework)) : $elm$core$Maybe$Nothing,
+							text: 'Elm-Ui-Framework Theme'
+						},
+							{
+							icon: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_Nil,
+								$mdgriffith$elm_ui$Element$html($author$project$Icons$penTool)),
+							onPress: (!_Utils_eq(m.theme, $author$project$Data$Theme$Template)) ? $elm$core$Maybe$Just(
+								$author$project$Main$SetTheme($author$project$Data$Theme$Template)) : $elm$core$Maybe$Nothing,
+							text: 'Template Theme'
 						}
 						]),
-					content: A2(
-						$mdgriffith$elm_ui$Element$column,
-						$Orasund$elm_ui_framework$Framework$Grid$compact,
-						_List_fromArray(
-							[
-								A2(
-								$mdgriffith$elm_ui$Element$el,
-								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$height(
-										$mdgriffith$elm_ui$Element$px(42))
-									]),
-								$mdgriffith$elm_ui$Element$none),
-								A2(
-								$mdgriffith$elm_ui$Element$column,
-								$Orasund$elm_ui_framework$Framework$container,
-								_List_fromArray(
-									[
-										A2(
-										$author$project$Widget$ScrollingNav$view,
-										function (section) {
-											switch (section.$) {
-												case 'ComponentViews':
-													return A2(
-														$mdgriffith$elm_ui$Element$map,
-														$author$project$Example$ComponentSpecific,
-														$author$project$Component$view(m.component));
-												case 'ReusableViews':
-													return $author$project$Reusable$view(
-														{addSnackbar: $author$project$Example$AddSnackbar, model: m.reusable, msgMapper: $author$project$Example$ReusableSpecific});
-												default:
-													return A2(
-														$author$project$Stateless$view,
-														{
-															changedSheet: $author$project$Example$ChangedSidebar,
-															msgMapper: $author$project$Example$StatelessSpecific,
-															showDialog: $author$project$Example$ToggleDialog(true)
-														},
-														m.stateless);
-											}
-										},
-										m.scrollingNav)
-									]))
-							])),
-					deviceClass: m.deviceClass,
 					dialog: m.displayDialog ? $elm$core$Maybe$Just(
-						{
-							content: A2(
-								$mdgriffith$elm_ui$Element$column,
-								_Utils_ap(
-									$Orasund$elm_ui_framework$Framework$Grid$simple,
-									_Utils_ap(
-										$Orasund$elm_ui_framework$Framework$Card$large,
-										_List_fromArray(
-											[$mdgriffith$elm_ui$Element$centerX, $mdgriffith$elm_ui$Element$centerY]))),
-								_List_fromArray(
-									[
-										A2(
-										$mdgriffith$elm_ui$Element$el,
-										$Orasund$elm_ui_framework$Framework$Heading$h3,
-										$mdgriffith$elm_ui$Element$text('Dialog')),
-										A2(
-										$mdgriffith$elm_ui$Element$paragraph,
-										_List_Nil,
-										$elm$core$List$singleton(
-											$mdgriffith$elm_ui$Element$text('This is a dialog window'))),
-										A2(
-										$mdgriffith$elm_ui$Element$Input$button,
-										_Utils_ap(
-											$Orasund$elm_ui_framework$Framework$Button$simple,
-											_List_fromArray(
-												[$mdgriffith$elm_ui$Element$alignRight])),
-										{
-											label: $mdgriffith$elm_ui$Element$text('Ok'),
-											onPress: $elm$core$Maybe$Just(
-												$author$project$Example$ToggleDialog(false))
-										})
-									])),
-							onDismiss: $elm$core$Maybe$Just(
-								$author$project$Example$ToggleDialog(false))
-						}) : $elm$core$Maybe$Nothing,
+						A2(
+							$author$project$Widget$dialog,
+							style.dialog,
+							{
+								accept: $elm$core$Maybe$Just(
+									{
+										onPress: $elm$core$Maybe$Just(
+											$author$project$Main$ToggleDialog(false)),
+										text: 'Ok'
+									}),
+								dismiss: $elm$core$Maybe$Just(
+									{
+										onPress: $elm$core$Maybe$Just(
+											$author$project$Main$ToggleDialog(false)),
+										text: 'Dismiss'
+									}),
+								text: 'This is a dialog window',
+								title: $elm$core$Maybe$Just('Dialog')
+							})) : $elm$core$Maybe$Nothing,
 					layout: m.layout,
-					menu: {
-						items: A2(
-							$elm$core$List$map,
-							function (label) {
-								return {
-									icon: $mdgriffith$elm_ui$Element$none,
-									label: $author$project$Data$Section$toString(label),
-									onPress: $elm$core$Maybe$Just(
-										$author$project$Example$JumpTo(label))
-								};
-							},
-							$author$project$Data$Section$asList),
-						selected: A2(
-							$elm$core$Maybe$withDefault,
-							0,
-							$elm$core$List$head(
+					menu: A2(
+						$author$project$Widget$ScrollingNav$toSelect,
+						function (_int) {
+							return A2(
+								$elm$core$Maybe$map,
+								$author$project$Main$JumpTo,
 								A2(
-									$elm$core$List$filterMap,
-									function (_v2) {
-										var i = _v2.a;
-										var s = _v2.b;
-										return _Utils_eq(
-											$elm$core$Maybe$Just(s),
-											A2($author$project$Widget$ScrollingNav$current, $author$project$Data$Section$fromString, m.scrollingNav)) ? $elm$core$Maybe$Just(i) : $elm$core$Maybe$Nothing;
-									},
-									A2(
-										$elm$core$List$indexedMap,
-										F2(
-											function (i, s) {
-												return _Utils_Tuple2(i, s);
-											}),
-										$author$project$Data$Section$asList))))
-					},
-					onChangedSidebar: $author$project$Example$ChangedSidebar,
-					style: $author$project$Example$style,
+									$elm$core$Array$get,
+									_int,
+									$elm$core$Array$fromList(m.scrollingNav.arrangement)));
+						},
+						m.scrollingNav),
+					onChangedSidebar: $author$project$Main$ChangedSidebar,
+					search: $elm$core$Maybe$Just(
+						{label: 'Search', onChange: $author$project$Main$ChangedSearch, text: m.search.raw}),
 					title: A2(
 						$mdgriffith$elm_ui$Element$el,
 						$Orasund$elm_ui_framework$Framework$Heading$h1,
-						$mdgriffith$elm_ui$Element$text(
-							(_Utils_eq(m.deviceClass, $mdgriffith$elm_ui$Element$Phone) || _Utils_eq(m.deviceClass, $mdgriffith$elm_ui$Element$Tablet)) ? A2(
-								$elm$core$Maybe$withDefault,
-								'Elm-Ui-Widgets',
-								A2(
-									$elm$core$Maybe$map,
-									$author$project$Data$Section$toString,
-									A2($author$project$Widget$ScrollingNav$current, $author$project$Data$Section$fromString, m.scrollingNav))) : 'Elm-Ui-Widgets'))
-				}));
+						$mdgriffith$elm_ui$Element$text('Elm-Ui-Widgets')),
+					window: m.window
+				},
+				$author$project$Main$viewLoaded(m)));
 	}
 };
-var $author$project$Example$main = $elm$browser$Browser$element(
-	{init: $author$project$Example$init, subscriptions: $author$project$Example$subscriptions, update: $author$project$Example$update, view: $author$project$Example$view});
-_Platform_export({'Example':{'init':$author$project$Example$main(
+var $author$project$Main$main = $elm$browser$Browser$element(
+	{init: $author$project$Main$init, subscriptions: $author$project$Main$subscriptions, update: $author$project$Main$update, view: $author$project$Main$view});
+_Platform_export({'Main':{'init':$author$project$Main$main(
 	$elm$json$Json$Decode$succeed(_Utils_Tuple0))(0)}});}(this));
 
-  var app = Elm.Example.init({ node: document.getElementById("elm") });
+  var app = Elm.Main.init({ node: document.getElementById("elm") });
 }
 catch (e)
 {
diff --git a/docs/unstable/index.html b/docs/unstable/index.html
deleted file mode 100644
index cd6c28d..0000000
--- a/docs/unstable/index.html
+++ /dev/null
@@ -1,20657 +0,0 @@
-
-
-
-  
-  Main
-  
-
-
-
-
-

-
-
-
-
-
-				});
\ No newline at end of file