From cbdc2fc21a93c41fcc1b3ac5f67857f4d8ef5cce Mon Sep 17 00:00:00 2001 From: Lucas Payr Date: Wed, 22 Apr 2020 13:20:34 +0200 Subject: [PATCH 1/4] Added unstable version of Homepage --- docs/unstable/index.html | 17994 +++++++++++++++++++++++++++++++++++++ 1 file changed, 17994 insertions(+) create mode 100644 docs/unstable/index.html 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

From 550b35fd0434fefb0ddbbc6435e3cdc99df7f521 Mon Sep 17 00:00:00 2001
From: Unknown 
Date: Sun, 24 May 2020 22:37:21 +0200
Subject: [PATCH 2/4] Added unstable version of Homepage

---
 docs/unstable/index.html | 9468 ++++++++++++++++++++++++++++----------
 1 file changed, 7077 insertions(+), 2391 deletions(-)

diff --git a/docs/unstable/index.html b/docs/unstable/index.html
index 7346cb7..2ae3dde 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,6 +13106,7 @@ 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);
+<<<<<<< HEAD
 var $mdgriffith$elm_ui$Element$el = F2(
 	function (attrs, child) {
 		return A4(
@@ -12819,6 +13126,125 @@ var $mdgriffith$elm_ui$Element$el = F2(
 	});
 var $mdgriffith$elm_ui$Internal$Model$Empty = {$: 'Empty'};
 var $mdgriffith$elm_ui$Element$none = $mdgriffith$elm_ui$Internal$Model$Empty;
+=======
+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$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));
+	});
+>>>>>>> cc2ca06... finishing the material design
 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(
@@ -13032,15 +13458,18 @@ var $author$project$Widget$Button$view = 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
 			});
@@ -13057,9 +13486,10 @@ var $author$project$Widget$Button$viewTextOnly = F2(
 var $author$project$Widget$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;
+<<<<<<< HEAD
 		return {
 			content: A2(
 				$mdgriffith$elm_ui$Element$column,
@@ -13097,6 +13527,59 @@ var $author$project$Widget$dialog = F2(
 									var _v2 = _v1.b;
 									return $elm$core$List$singleton(
 										A2($author$project$Widget$Button$viewTextOnly, style.accept, acceptButton));
+=======
+		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)
+											]);
+									}
+>>>>>>> cc2ca06... finishing the material design
 								} else {
 									var acceptButton = _v1.a.a;
 									var dismissButton = _v1.b.a;
@@ -13284,189 +13767,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};
 };
@@ -13484,6 +13827,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(
 		[
@@ -13785,12 +14145,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(
@@ -13830,6 +14207,7 @@ var $Orasund$elm_ui_framework$Framework$Grid$section = _Utils_ap(
 			$mdgriffith$elm_ui$Element$paddingEach(
 			{bottom: 30, left: 0, right: 0, top: 10})
 		]));
+<<<<<<< HEAD
 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');
@@ -13920,349 +14298,7 @@ var $mdgriffith$elm_ui$Internal$Model$mapAttrFromStyle = F2(
 				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 $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 $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 $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',
-	_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$Example$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 = {
-	dialog: {
-		accept: $author$project$Example$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$Example$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)),
-	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,
-	title: $Orasund$elm_ui_framework$Framework$Heading$h2
-};
+=======
 var $elm_community$intdict$IntDict$findMin = function (dict) {
 	findMin:
 	while (true) {
@@ -14273,6 +14309,7 @@ var $elm_community$intdict$IntDict$findMin = function (dict) {
 				var l = dict.a;
 				return $elm$core$Maybe$Just(
 					_Utils_Tuple2(l.key, l.value));
+>>>>>>> cc2ca06... finishing the material design
 			default:
 				var i = dict.a;
 				var $temp$dict = i.left;
@@ -14444,25 +14481,916 @@ var $author$project$Widget$ScrollingNav$toSelect = F2(
 						arrangement)))
 		};
 	});
-var $author$project$Icons$triangle = A2(
+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'))
+		]));
+<<<<<<< HEAD
+=======
+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);
+>>>>>>> cc2ca06... finishing the material design
+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)
+			])));
+<<<<<<< HEAD
+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$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,
-	'triangle',
+	'chevron-down',
 	_List_fromArray(
 		[
 			A2(
-			$elm$svg$Svg$path,
+			$elm$svg$Svg$polyline,
 			_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$points('6 9 12 15 18 9')
 				]),
 			_List_Nil)
 		]));
-var $author$project$Component$FilterMultiSelectSpecific = function (a) {
-	return {$: 'FilterMultiSelectSpecific', a: a};
+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 $author$project$Widget$FilterMultiSelect$ToggleSelected = function (a) {
-	return {$: 'ToggleSelected', a: a};
+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)
+	]);
+>>>>>>> cc2ca06... finishing the material design
+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 $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',
+	_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)
+		]));
+<<<<<<< HEAD
+var $author$project$Example$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 = {
+	dialog: {
+		accept: $author$project$Example$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,
+=======
+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,
+>>>>>>> cc2ca06... finishing the material design
+			_Utils_ap(
+				$Orasund$elm_ui_framework$Framework$Grid$simple,
+				_List_fromArray(
+					[
+<<<<<<< HEAD
+						$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$Example$textButton,
+		title: $Orasund$elm_ui_framework$Framework$Heading$h3
+	},
+=======
+						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,
+>>>>>>> cc2ca06... finishing the material design
+	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)));
+};
+<<<<<<< HEAD
 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) {
@@ -14471,11 +15399,25 @@ var $mdgriffith$elm_ui$Element$Input$Placeholder = F2(
 var $mdgriffith$elm_ui$Element$Input$placeholder = $mdgriffith$elm_ui$Element$Input$Placeholder;
 var $mdgriffith$elm_ui$Element$Input$HiddenLabel = function (a) {
 	return {$: 'HiddenLabel', a: a};
+=======
+var $avh4$elm_color$Color$fromRgba = function (components) {
+	return A4($avh4$elm_color$Color$RgbaSpace, components.red, components.green, components.blue, components.alpha);
+>>>>>>> cc2ca06... finishing the material design
 };
-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};
+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));
 };
+<<<<<<< HEAD
 var $mdgriffith$elm_ui$Element$Input$TextArea = {$: 'TextArea'};
 var $mdgriffith$elm_ui$Internal$Model$LivePolite = {$: 'LivePolite'};
 var $mdgriffith$elm_ui$Element$Region$announce = $mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$LivePolite);
@@ -14558,82 +15500,348 @@ var $mdgriffith$elm_ui$Element$createNearby = F2(
 	});
 var $mdgriffith$elm_ui$Element$behindContent = function (element) {
 	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$Behind, element);
+=======
+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
+	};
+>>>>>>> cc2ca06... finishing the material design
 };
-var $mdgriffith$elm_ui$Internal$Model$MoveY = function (a) {
-	return {$: 'MoveY', a: a};
+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 $mdgriffith$elm_ui$Internal$Flag$moveY = $mdgriffith$elm_ui$Internal$Flag$flag(26);
-var $mdgriffith$elm_ui$Element$moveUp = function (y) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$TransformComponent,
-		$mdgriffith$elm_ui$Internal$Flag$moveY,
-		$mdgriffith$elm_ui$Internal$Model$MoveY(-y));
+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 $mdgriffith$elm_ui$Element$Input$calcMoveToCompensateForPadding = function (attrs) {
-	var gatherSpacing = F2(
-		function (attr, found) {
-			if ((attr.$ === 'StyleClass') && (attr.b.$ === 'SpacingStyle')) {
-				var _v2 = attr.b;
-				var x = _v2.b;
-				var y = _v2.c;
-				if (found.$ === 'Nothing') {
-					return $elm$core$Maybe$Just(y);
-				} else {
-					return found;
-				}
-			} else {
-				return found;
-			}
-		});
-	var _v0 = A3($elm$core$List$foldr, gatherSpacing, $elm$core$Maybe$Nothing, attrs);
-	if (_v0.$ === 'Nothing') {
-		return $mdgriffith$elm_ui$Internal$Model$NoAttribute;
-	} else {
-		var vSpace = _v0.a;
-		return $mdgriffith$elm_ui$Element$moveUp(
-			$elm$core$Basics$floor(vSpace / 2));
-	}
+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)))
+		]);
 };
+<<<<<<< HEAD
 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(
+=======
+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(
+>>>>>>> cc2ca06... finishing the material design
 	function (r, g, b) {
-		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, r, g, b, 1);
+		return A4($avh4$elm_color$Color$RgbaSpace, r, g, b, 1.0);
 	});
-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);
-var $mdgriffith$elm_ui$Element$Input$defaultTextBoxStyle = _List_fromArray(
+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$Input$defaultTextPadding,
-		$mdgriffith$elm_ui$Element$Border$rounded(3),
-		$mdgriffith$elm_ui$Element$Border$color($mdgriffith$elm_ui$Element$Input$darkGrey),
-		$mdgriffith$elm_ui$Element$Background$color($mdgriffith$elm_ui$Element$Input$white),
-		$mdgriffith$elm_ui$Element$Border$width(1),
-		$mdgriffith$elm_ui$Element$spacing(5),
-		$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-		$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
+		$mdgriffith$elm_ui$Element$Font$size(20),
+		$mdgriffith$elm_ui$Element$Font$semiBold,
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.15)
 	]);
-var $mdgriffith$elm_ui$Element$Input$getHeight = function (attr) {
-	if (attr.$ === 'Height') {
-		var h = attr.a;
-		return $elm$core$Maybe$Just(h);
-	} else {
-		return $elm$core$Maybe$Nothing;
-	}
+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 $mdgriffith$elm_ui$Internal$Model$Label = function (a) {
-	return {$: 'Label', a: a};
+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 $mdgriffith$elm_ui$Element$Input$hiddenLabelAttribute = function (label) {
-	if (label.$ === 'HiddenLabel') {
-		var textLabel = label.a;
-		return $mdgriffith$elm_ui$Internal$Model$Describe(
-			$mdgriffith$elm_ui$Internal$Model$Label(textLabel));
-	} else {
-		return $mdgriffith$elm_ui$Internal$Model$NoAttribute;
-	}
+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)
+		])
 };
+<<<<<<< HEAD
 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);
@@ -14658,111 +15866,440 @@ var $mdgriffith$elm_ui$Element$Input$isConstrained = function (len) {
 				return true;
 		}
 	}
+=======
+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})
+			])
+	};
+>>>>>>> cc2ca06... finishing the material design
 };
-var $mdgriffith$elm_ui$Element$Input$isHiddenLabel = function (label) {
-	if (label.$ === 'HiddenLabel') {
-		return true;
-	} else {
-		return false;
-	}
+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 $mdgriffith$elm_ui$Element$Input$isStacked = function (label) {
-	if (label.$ === 'Label') {
-		var loc = label.a;
-		switch (loc.$) {
-			case 'OnRight':
-				return false;
-			case 'OnLeft':
-				return false;
-			case 'Above':
-				return true;
-			default:
-				return true;
-		}
-	} else {
-		return true;
-	}
+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 $mdgriffith$elm_ui$Element$Input$negateBox = function (box) {
-	return {bottom: -box.bottom, left: -box.left, right: -box.right, top: -box.top};
-};
-var $elm$html$Html$Events$alwaysStop = function (x) {
-	return _Utils_Tuple2(x, true);
-};
-var $elm$virtual_dom$VirtualDom$MayStopPropagation = function (a) {
-	return {$: 'MayStopPropagation', a: a};
-};
-var $elm$html$Html$Events$stopPropagationOn = F2(
-	function (event, decoder) {
+var $author$project$Widget$Style$Material$icon = F2(
+	function (string, size) {
 		return A2(
-			$elm$virtual_dom$VirtualDom$on,
-			event,
-			$elm$virtual_dom$VirtualDom$MayStopPropagation(decoder));
+			$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 $elm$json$Json$Decode$at = F2(
-	function (fields, decoder) {
-		return A3($elm$core$List$foldr, $elm$json$Json$Decode$field, decoder, fields);
-	});
-var $elm$html$Html$Events$targetValue = A2(
-	$elm$json$Json$Decode$at,
+var $author$project$Widget$Style$Material$expand_less = A3(
+	$author$project$Widget$Style$Material$icon,
+	'0 0 48 48',
+	24,
 	_List_fromArray(
-		['target', 'value']),
-	$elm$json$Json$Decode$string);
-var $elm$html$Html$Events$onInput = function (tagger) {
+		[
+			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(
-		$elm$html$Html$Events$stopPropagationOn,
-		'input',
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$fontFamily,
 		A2(
-			$elm$json$Json$Decode$map,
-			$elm$html$Html$Events$alwaysStop,
-			A2($elm$json$Json$Decode$map, tagger, $elm$html$Html$Events$targetValue)));
+			$mdgriffith$elm_ui$Internal$Model$FontFamily,
+			A3($elm$core$List$foldl, $mdgriffith$elm_ui$Internal$Model$renderFontClassName, 'ff-', families),
+			families));
 };
-var $mdgriffith$elm_ui$Element$Input$isFill = function (len) {
-	isFill:
-	while (true) {
-		switch (len.$) {
-			case 'Fill':
-				return true;
-			case 'Content':
-				return false;
-			case 'Px':
-				return false;
-			case 'Min':
-				var l = len.b;
-				var $temp$len = l;
-				len = $temp$len;
-				continue isFill;
-			default:
-				var l = len.b;
-				var $temp$len = l;
-				len = $temp$len;
-				continue isFill;
-		}
-	}
+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$Input$isPixel = function (len) {
-	isPixel:
-	while (true) {
-		switch (len.$) {
-			case 'Content':
-				return false;
-			case 'Px':
-				return true;
-			case 'Fill':
-				return false;
-			case 'Min':
-				var l = len.b;
-				var $temp$len = l;
-				len = $temp$len;
-				continue isPixel;
-			default:
-				var l = len.b;
-				var $temp$len = l;
-				len = $temp$len;
-				continue isPixel;
-		}
-	}
+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
+	};
 };
+<<<<<<< HEAD
 var $mdgriffith$elm_ui$Element$Input$redistributeOver = F4(
 	function (isMultiline, stacked, attr, els) {
 		switch (attr.$) {
@@ -15360,191 +16897,19 @@ var $author$project$Widget$FilterMultiSelect$viewOptions = function (_v0) {
 			function (string) {
 				return !A2($elm$core$Set$member, string, selected);
 			},
+=======
+var $author$project$Widget$Style$Material$more_vert = A3(
+	$author$project$Widget$Style$Material$icon,
+	'0 0 48 48',
+	24,
+	_List_fromArray(
+		[
+>>>>>>> cc2ca06... finishing the material design
 			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};
-	});
-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$Component$filterMultiSelect = function (model) {
-	return _Utils_Tuple2(
-		'Filter Multi Select',
-		A2(
-			$mdgriffith$elm_ui$Element$column,
-			$Orasund$elm_ui_framework$Framework$Grid$simple,
+			$elm$svg$Svg$path,
 			_List_fromArray(
 				[
+<<<<<<< HEAD
 					A2(
 					$author$project$Widget$textInput,
 					{
@@ -15685,251 +17050,545 @@ var $author$project$Widget$FilterSelect$viewOptions = function (_v0) {
 	return (raw === '') ? _List_Nil : $elm$core$Set$toList(
 		A2(
 			$elm$core$Set$filter,
+=======
+					$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(
+		[
+>>>>>>> cc2ca06... finishing the material design
+			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,
-				$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'),
+				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$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))
-				});
-		}
+				$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$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,
+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(
 							[
-								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)
-											]))))
-							]));
-				}
-			}));
+								$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 $author$project$Component$view = F2(
-	function (msgMapper, model) {
+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 {
-			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)),
+			container: _Utils_ap(
+				$author$project$Widget$Style$Material$textAndBackground(palette.background),
 				_List_fromArray(
 					[
-						$author$project$Component$filterSelect(model.filterSelect),
-						$author$project$Component$filterMultiSelect(model.filterMultiSelect),
-						$author$project$Component$validatedInput(model.validatedInput)
+						$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)
 					])),
-			title: 'Components'
+			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);
+	});
+<<<<<<< HEAD
 var $author$project$Layout$LeftSheet = {$: 'LeftSheet'};
 var $mdgriffith$elm_ui$Element$Phone = {$: 'Phone'};
 var $author$project$Layout$RightSheet = {$: 'RightSheet'};
@@ -15942,15 +17601,34 @@ 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) {
+=======
+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) {
+>>>>>>> cc2ca06... finishing the material design
 	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
+		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')
 	};
 };
+<<<<<<< HEAD
 var $elm$core$List$drop = F2(
 	function (n, list) {
 		drop:
@@ -16193,10 +17871,261 @@ var $elm$core$List$takeFast = F3(
 var $elm$core$List$take = F2(
 	function (n, list) {
 		return A3($elm$core$List$takeFast, 0, n, list);
-	});
-var $author$project$Widget$Snackbar$current = function (model) {
-	return A2($elm$core$Maybe$map, $elm$core$Tuple$first, model.current);
+=======
+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);
+>>>>>>> cc2ca06... finishing the material design
+	});
+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;
+			};
+	}
+};
+<<<<<<< HEAD
 var $author$project$Widget$Snackbar$view = F3(
 	function (style, toMessage, model) {
 		return A2(
@@ -16227,56 +18156,382 @@ var $author$project$Widget$Snackbar$view = F3(
 							]));
 				}),
 			$author$project$Widget$Snackbar$current(model));
-	});
-var $author$project$Layout$view = F2(
-	function (attributes, _v0) {
-		var search = _v0.search;
-		var title = _v0.title;
-		var onChangedSidebar = _v0.onChangedSidebar;
-		var menu = _v0.menu;
-		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,
-			$mdgriffith$elm_ui$Element$none,
-			A2(
-				$elm$core$Maybe$map,
-				$mdgriffith$elm_ui$Element$el(
+=======
+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$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 _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
-									])),
+							$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$column,
+							$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',
+	_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'
+						})))
+			]);
+>>>>>>> cc2ca06... finishing the material design
+	});
+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(
+<<<<<<< HEAD
 									[
 										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
 									]),
@@ -16296,14 +18551,54 @@ var $author$project$Layout$view = F2(
 							$mdgriffith$elm_ui$Element$el,
 							_Utils_ap(
 								style.sheet,
+=======
+									[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)
+									};
+								},
+>>>>>>> cc2ca06... finishing the material design
 								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
-										$mdgriffith$elm_ui$Element$alignRight
-									])),
-							A2(
-								$mdgriffith$elm_ui$Element$column,
+									[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(
+<<<<<<< HEAD
 									[
 										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
 									]),
@@ -16319,356 +18614,230 @@ var $author$project$Layout$view = F2(
 							var label = search.a.label;
 							return A2(
 								$mdgriffith$elm_ui$Element$el,
+=======
+									[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)
+									};
+								},
+>>>>>>> cc2ca06... finishing the material design
 								_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;
-			}
-		}();
-		var nav = A2(
-			$mdgriffith$elm_ui$Element$row,
-			_Utils_ap(
-				style.header,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$padding(0),
-						$mdgriffith$elm_ui$Element$centerX,
-						$mdgriffith$elm_ui$Element$spacing(style.spacing),
-						$mdgriffith$elm_ui$Element$alignTop,
-						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-					])),
-			_List_fromArray(
-				[
-					A2(
-					$mdgriffith$elm_ui$Element$row,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
-							$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.options) > 5))) ? _List_fromArray(
-						[
-							A2(
-							$author$project$Widget$Button$viewIconOnly,
-							style.menuButton,
-							{
-								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))),
-								text: 'Menu'
-							}),
-							A2(
-							$elm$core$Maybe$withDefault,
-							title,
-							A2(
-								$elm$core$Maybe$map,
-								A2(
-									$elm$core$Basics$composeR,
-									function ($) {
-										return $.text;
-									},
-									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)))
-						]) : _List_fromArray(
-						[
-							title,
-							A2(
-							$mdgriffith$elm_ui$Element$row,
-							_List_fromArray(
-								[
-									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
-								]),
-							A2(
+									[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,
-								$author$project$Core$Style$menuTabButton(style),
-								$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(
-						[
-							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
-							$mdgriffith$elm_ui$Element$alignRight
-						]),
-					$elm$core$List$concat(
-						_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$view,
-												style.menuButton,
-												{
-													icon: style.searchIcon,
-													onPress: $elm$core$Maybe$Just(
-														onChangedSidebar(
-															$elm$core$Maybe$Just($author$project$Layout$Search))),
-													text: label
-												})
-											]) : (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) ? _List_fromArray(
-											[
-												A2(
-												$author$project$Core$Style$menuIconButton,
-												style,
-												{
-													icon: style.searchIcon,
-													onPress: $elm$core$Maybe$Just(
-														onChangedSidebar(
-															$elm$core$Maybe$Just($author$project$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$Widget$Button$view(style.menuButton),
-								primaryActions),
-								$elm$core$List$isEmpty(moreActions) ? _List_Nil : _List_fromArray(
-								[
-									A2(
-									$author$project$Widget$Button$viewIconOnly,
-									style.menuButton,
-									{
-										icon: style.moreVerticalIcon,
-										onPress: $elm$core$Maybe$Just(
-											onChangedSidebar(
-												$elm$core$Maybe$Just($author$project$Layout$RightSheet))),
-										text: 'More'
-									})
-								])
-							])))
-				]));
-		return A2(
-			style.layout,
-			$elm$core$List$concat(
-				_List_fromArray(
-					[
-						attributes,
-						_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 (dialog.$ === 'Just') {
-								var dialogConfig = dialog.a;
-								return $author$project$Widget$modal(dialogConfig);
-							} else {
-								return $author$project$Widget$modal(
-									{
-										content: sheet,
-										onDismiss: $elm$core$Maybe$Just(
-											onChangedSidebar($elm$core$Maybe$Nothing))
-									});
-							}
-						}()) : _List_Nil
-					])),
-			content);
+								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$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) {
+var $author$project$Internal$Select$select = function (_v0) {
+	var selected = _v0.selected;
+	var options = _v0.options;
+	var onSelect = _v0.onSelect;
 	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)
-			]));
+		$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 $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(
+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(
-				$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)
-			]));
+					$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$Widget$SortTable$FloatColumn = function (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};
 };
@@ -16747,6 +18916,27 @@ var $mdgriffith$elm_ui$Element$tableHelper = F2(
 					$mdgriffith$elm_ui$Internal$Model$div,
 					_List_fromArray(
 						[
+<<<<<<< HEAD
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+							$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.options) > 5))) ? _List_fromArray(
+						[
+							A2(
+							$author$project$Widget$Button$viewIconOnly,
+							style.menuButton,
+							{
+								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))),
+								text: 'Menu'
+							}),
+							A2(
+							$elm$core$Maybe$withDefault,
+							title,
+=======
+>>>>>>> cc2ca06... finishing the material design
 							A2(
 							$mdgriffith$elm_ui$Internal$Model$StyleClass,
 							$mdgriffith$elm_ui$Internal$Flag$gridPosition,
@@ -16893,134 +19083,1146 @@ 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 _Utils_Tuple2(
-		'Sort Table',
-		A2(
+		};
+		return 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(
+			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);
+									},
+<<<<<<< HEAD
+									menu.selected)))
+						]) : _List_fromArray(
+						[
+							title,
+							A2(
+							$mdgriffith$elm_ui$Element$row,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
+								]),
+							A2(
+								$elm$core$List$map,
+								$author$project$Core$Style$menuTabButton(style),
+								$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,
+=======
+									value: function ($) {
+										return $.id;
+									},
+									width: $mdgriffith$elm_ui$Element$fill
+								}),
+								$author$project$Widget$stringColumn(
+>>>>>>> cc2ca06... finishing the material design
+								{
+									title: 'Name',
+									toString: $elm$core$Basics$identity,
+									value: function ($) {
+										return $.name;
+									},
+									width: $mdgriffith$elm_ui$Element$fill
+								})
+							]),
+						content: _List_fromArray(
+							[
+<<<<<<< HEAD
+								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$view,
+												style.menuButton,
+												{
+													icon: style.searchIcon,
+													onPress: $elm$core$Maybe$Just(
+														onChangedSidebar(
+															$elm$core$Maybe$Just($author$project$Layout$Search))),
+													text: label
+												})
+											]) : (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) ? _List_fromArray(
+											[
+												A2(
+												$author$project$Core$Style$menuIconButton,
+												style,
+												{
+													icon: style.searchIcon,
+													onPress: $elm$core$Maybe$Just(
+														onChangedSidebar(
+															$elm$core$Maybe$Just($author$project$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$Widget$Button$view(style.menuButton),
+								primaryActions),
+								$elm$core$List$isEmpty(moreActions) ? _List_Nil : _List_fromArray(
+								[
+									A2(
+									$author$project$Widget$Button$viewIconOnly,
+									style.menuButton,
+									{
+										icon: style.moreVerticalIcon,
+										onPress: $elm$core$Maybe$Just(
+											onChangedSidebar(
+												$elm$core$Maybe$Just($author$project$Layout$RightSheet))),
+										text: 'More'
+									})
+								])
+							])))
+				]));
+		return A2(
+			style.layout,
+			$elm$core$List$concat(
+				_List_fromArray(
+					[
+						attributes,
+						_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 (dialog.$ === 'Just') {
+								var dialogConfig = dialog.a;
+								return $author$project$Widget$modal(dialogConfig);
+							} else {
+								return $author$project$Widget$modal(
+									{
+										content: sheet,
+										onDismiss: $elm$core$Maybe$Just(
+											onChangedSidebar($elm$core$Maybe$Nothing))
+									});
+=======
+								{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
+>>>>>>> cc2ca06... finishing the material design
+							}
+							]),
+						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};
+};
+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};
+};
+var $mdgriffith$elm_ui$Element$Input$TextArea = {$: 'TextArea'};
+var $mdgriffith$elm_ui$Internal$Model$LivePolite = {$: 'LivePolite'};
+var $mdgriffith$elm_ui$Element$Region$announce = $mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$LivePolite);
+var $mdgriffith$elm_ui$Element$Input$applyLabel = F3(
+	function (attrs, label, input) {
+		if (label.$ === 'HiddenLabel') {
+			var labelText = label.a;
+			return A4(
+				$mdgriffith$elm_ui$Internal$Model$element,
+				$mdgriffith$elm_ui$Internal$Model$asColumn,
+				$mdgriffith$elm_ui$Internal$Model$NodeName('label'),
+				attrs,
+				$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+					_List_fromArray(
+						[input])));
+		} else {
+			var position = label.a;
+			var labelAttrs = label.b;
+			var labelChild = label.c;
+			var labelElement = A4(
+				$mdgriffith$elm_ui$Internal$Model$element,
+				$mdgriffith$elm_ui$Internal$Model$asEl,
+				$mdgriffith$elm_ui$Internal$Model$div,
+				labelAttrs,
+				$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+					_List_fromArray(
+						[labelChild])));
+			switch (position.$) {
+				case 'Above':
+					return A4(
+						$mdgriffith$elm_ui$Internal$Model$element,
+						$mdgriffith$elm_ui$Internal$Model$asColumn,
+						$mdgriffith$elm_ui$Internal$Model$NodeName('label'),
+						attrs,
+						$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+							_List_fromArray(
+								[labelElement, input])));
+				case 'Below':
+					return A4(
+						$mdgriffith$elm_ui$Internal$Model$element,
+						$mdgriffith$elm_ui$Internal$Model$asColumn,
+						$mdgriffith$elm_ui$Internal$Model$NodeName('label'),
+						attrs,
+						$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+							_List_fromArray(
+								[input, labelElement])));
+				case 'OnRight':
+					return A4(
+						$mdgriffith$elm_ui$Internal$Model$element,
+						$mdgriffith$elm_ui$Internal$Model$asRow,
+						$mdgriffith$elm_ui$Internal$Model$NodeName('label'),
+						attrs,
+						$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+							_List_fromArray(
+								[input, labelElement])));
+				default:
+					return A4(
+						$mdgriffith$elm_ui$Internal$Model$element,
+						$mdgriffith$elm_ui$Internal$Model$asRow,
+						$mdgriffith$elm_ui$Internal$Model$NodeName('label'),
+						attrs,
+						$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+							_List_fromArray(
+								[labelElement, input])));
+			}
+		}
+	});
+var $mdgriffith$elm_ui$Element$Input$autofill = A2(
+	$elm$core$Basics$composeL,
+	$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$behindContent = function (element) {
+	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$Behind, element);
+};
+var $mdgriffith$elm_ui$Internal$Model$MoveY = function (a) {
+	return {$: 'MoveY', a: a};
+};
+var $mdgriffith$elm_ui$Internal$Flag$moveY = $mdgriffith$elm_ui$Internal$Flag$flag(26);
+var $mdgriffith$elm_ui$Element$moveUp = function (y) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$TransformComponent,
+		$mdgriffith$elm_ui$Internal$Flag$moveY,
+		$mdgriffith$elm_ui$Internal$Model$MoveY(-y));
+};
+var $mdgriffith$elm_ui$Element$Input$calcMoveToCompensateForPadding = function (attrs) {
+	var gatherSpacing = F2(
+		function (attr, found) {
+			if ((attr.$ === 'StyleClass') && (attr.b.$ === 'SpacingStyle')) {
+				var _v2 = attr.b;
+				var x = _v2.b;
+				var y = _v2.c;
+				if (found.$ === 'Nothing') {
+					return $elm$core$Maybe$Just(y);
+				} else {
+					return found;
+				}
+			} else {
+				return found;
+			}
+		});
+	var _v0 = A3($elm$core$List$foldr, gatherSpacing, $elm$core$Maybe$Nothing, attrs);
+	if (_v0.$ === 'Nothing') {
+		return $mdgriffith$elm_ui$Internal$Model$NoAttribute;
+	} else {
+		var vSpace = _v0.a;
+		return $mdgriffith$elm_ui$Element$moveUp(
+			$elm$core$Basics$floor(vSpace / 2));
+	}
+};
+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);
+var $mdgriffith$elm_ui$Element$Input$defaultTextBoxStyle = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Input$defaultTextPadding,
+		$mdgriffith$elm_ui$Element$Border$rounded(3),
+		$mdgriffith$elm_ui$Element$Border$color($mdgriffith$elm_ui$Element$Input$darkGrey),
+		$mdgriffith$elm_ui$Element$Background$color($mdgriffith$elm_ui$Element$Input$white),
+		$mdgriffith$elm_ui$Element$Border$width(1),
+		$mdgriffith$elm_ui$Element$spacing(5),
+		$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+		$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
+	]);
+var $mdgriffith$elm_ui$Element$Input$getHeight = function (attr) {
+	if (attr.$ === 'Height') {
+		var h = attr.a;
+		return $elm$core$Maybe$Just(h);
+	} else {
+		return $elm$core$Maybe$Nothing;
+	}
+};
+var $mdgriffith$elm_ui$Element$Input$hiddenLabelAttribute = function (label) {
+	if (label.$ === 'HiddenLabel') {
+		var textLabel = label.a;
+		return $mdgriffith$elm_ui$Internal$Model$Describe(
+			$mdgriffith$elm_ui$Internal$Model$Label(textLabel));
+	} else {
+		return $mdgriffith$elm_ui$Internal$Model$NoAttribute;
+	}
+};
+var $mdgriffith$elm_ui$Element$Input$isConstrained = function (len) {
+	isConstrained:
+	while (true) {
+		switch (len.$) {
+			case 'Content':
+				return false;
+			case 'Px':
+				return true;
+			case 'Fill':
+				return true;
+			case 'Min':
+				var l = len.b;
+				var $temp$len = l;
+				len = $temp$len;
+				continue isConstrained;
+			default:
+				var l = len.b;
+				return true;
+		}
+	}
+};
+var $mdgriffith$elm_ui$Element$Input$isHiddenLabel = function (label) {
+	if (label.$ === 'HiddenLabel') {
+		return true;
+	} else {
+		return false;
+	}
+};
+var $mdgriffith$elm_ui$Element$Input$isStacked = function (label) {
+	if (label.$ === 'Label') {
+		var loc = label.a;
+		switch (loc.$) {
+			case 'OnRight':
+				return false;
+			case 'OnLeft':
+				return false;
+			case 'Above':
+				return true;
+			default:
+				return true;
+		}
+	} else {
+		return true;
+	}
+};
+var $mdgriffith$elm_ui$Element$Input$negateBox = function (box) {
+	return {bottom: -box.bottom, left: -box.left, right: -box.right, top: -box.top};
+};
+var $elm$html$Html$Events$alwaysStop = function (x) {
+	return _Utils_Tuple2(x, true);
+};
+var $elm$virtual_dom$VirtualDom$MayStopPropagation = function (a) {
+	return {$: 'MayStopPropagation', a: a};
+};
+var $elm$html$Html$Events$stopPropagationOn = F2(
+	function (event, decoder) {
+		return A2(
+			$elm$virtual_dom$VirtualDom$on,
+			event,
+			$elm$virtual_dom$VirtualDom$MayStopPropagation(decoder));
+	});
+var $elm$json$Json$Decode$at = F2(
+	function (fields, decoder) {
+		return A3($elm$core$List$foldr, $elm$json$Json$Decode$field, decoder, fields);
+	});
+var $elm$html$Html$Events$targetValue = A2(
+	$elm$json$Json$Decode$at,
+	_List_fromArray(
+		['target', 'value']),
+	$elm$json$Json$Decode$string);
+var $elm$html$Html$Events$onInput = function (tagger) {
+	return A2(
+		$elm$html$Html$Events$stopPropagationOn,
+		'input',
+		A2(
+			$elm$json$Json$Decode$map,
+			$elm$html$Html$Events$alwaysStop,
+			A2($elm$json$Json$Decode$map, tagger, $elm$html$Html$Events$targetValue)));
+};
+var $mdgriffith$elm_ui$Element$Input$isFill = function (len) {
+	isFill:
+	while (true) {
+		switch (len.$) {
+			case 'Fill':
+				return true;
+			case 'Content':
+				return false;
+			case 'Px':
+				return false;
+			case 'Min':
+				var l = len.b;
+				var $temp$len = l;
+				len = $temp$len;
+				continue isFill;
+			default:
+				var l = len.b;
+				var $temp$len = l;
+				len = $temp$len;
+				continue isFill;
+		}
+	}
+};
+var $mdgriffith$elm_ui$Element$Input$isPixel = function (len) {
+	isPixel:
+	while (true) {
+		switch (len.$) {
+			case 'Content':
+				return false;
+			case 'Px':
+				return true;
+			case 'Fill':
+				return false;
+			case 'Min':
+				var l = len.b;
+				var $temp$len = l;
+				len = $temp$len;
+				continue isPixel;
+			default:
+				var l = len.b;
+				var $temp$len = l;
+				len = $temp$len;
+				continue isPixel;
+		}
+	}
+};
+var $mdgriffith$elm_ui$Element$Input$redistributeOver = F4(
+	function (isMultiline, stacked, attr, els) {
+		switch (attr.$) {
+			case 'Nearby':
+				return _Utils_update(
+					els,
+					{
+						parent: A2($elm$core$List$cons, attr, els.parent)
+					});
+			case 'Width':
+				var width = attr.a;
+				return $mdgriffith$elm_ui$Element$Input$isFill(width) ? _Utils_update(
+					els,
+					{
+						fullParent: A2($elm$core$List$cons, attr, els.fullParent),
+						input: A2($elm$core$List$cons, attr, els.input),
+						parent: A2($elm$core$List$cons, attr, els.parent)
+					}) : (stacked ? _Utils_update(
+					els,
+					{
+						fullParent: A2($elm$core$List$cons, attr, els.fullParent)
+					}) : _Utils_update(
+					els,
+					{
+						parent: A2($elm$core$List$cons, attr, els.parent)
+					}));
+			case 'Height':
+				var height = attr.a;
+				return (!stacked) ? _Utils_update(
+					els,
+					{
+						fullParent: A2($elm$core$List$cons, attr, els.fullParent),
+						parent: A2($elm$core$List$cons, attr, els.parent)
+					}) : ($mdgriffith$elm_ui$Element$Input$isFill(height) ? _Utils_update(
+					els,
+					{
+						fullParent: A2($elm$core$List$cons, attr, els.fullParent),
+						parent: A2($elm$core$List$cons, attr, els.parent)
+					}) : ($mdgriffith$elm_ui$Element$Input$isPixel(height) ? _Utils_update(
+					els,
+					{
+						parent: A2($elm$core$List$cons, attr, els.parent)
+					}) : _Utils_update(
+					els,
+					{
+						parent: A2($elm$core$List$cons, attr, els.parent)
+					})));
+			case 'AlignX':
+				return _Utils_update(
+					els,
+					{
+						fullParent: A2($elm$core$List$cons, attr, els.fullParent)
+					});
+			case 'AlignY':
+				return _Utils_update(
+					els,
+					{
+						fullParent: A2($elm$core$List$cons, attr, els.fullParent)
+					});
+			case 'StyleClass':
+				switch (attr.b.$) {
+					case 'SpacingStyle':
+						var _v1 = attr.b;
+						return _Utils_update(
+							els,
+							{
+								fullParent: A2($elm$core$List$cons, attr, els.fullParent),
+								input: A2($elm$core$List$cons, attr, els.input),
+								parent: A2($elm$core$List$cons, attr, els.parent),
+								wrapper: A2($elm$core$List$cons, attr, els.wrapper)
+							});
+					case 'PaddingStyle':
+						var cls = attr.a;
+						var _v2 = attr.b;
+						var pad = _v2.a;
+						var t = _v2.b;
+						var r = _v2.c;
+						var b = _v2.d;
+						var l = _v2.e;
+						if (isMultiline) {
+							return _Utils_update(
+								els,
+								{
+									cover: A2($elm$core$List$cons, attr, els.cover),
+									parent: A2($elm$core$List$cons, attr, els.parent)
+								});
+						} else {
+							var reducedVerticalPadding = $mdgriffith$elm_ui$Element$paddingEach(
+								{
+									bottom: b - A2($elm$core$Basics$min, t, b),
+									left: l,
+									right: r,
+									top: t - A2($elm$core$Basics$min, t, b)
+								});
+							var newLineHeight = $mdgriffith$elm_ui$Element$htmlAttribute(
+								A2(
+									$elm$html$Html$Attributes$style,
+									'line-height',
+									'calc(1.0em + ' + ($elm$core$String$fromInt(
+										2 * A2($elm$core$Basics$min, t, b)) + 'px)')));
+							var newHeight = $mdgriffith$elm_ui$Element$htmlAttribute(
+								A2(
+									$elm$html$Html$Attributes$style,
+									'height',
+									'calc(1.0em + ' + ($elm$core$String$fromInt(
+										2 * A2($elm$core$Basics$min, t, b)) + 'px)')));
+							return _Utils_update(
+								els,
+								{
+									cover: A2($elm$core$List$cons, attr, els.cover),
+									input: A2(
+										$elm$core$List$cons,
+										newHeight,
+										A2($elm$core$List$cons, newLineHeight, els.input)),
+									parent: A2($elm$core$List$cons, reducedVerticalPadding, els.parent)
+								});
+						}
+					case 'BorderWidth':
+						var _v3 = attr.b;
+						return _Utils_update(
+							els,
+							{
+								cover: A2($elm$core$List$cons, attr, els.cover),
+								parent: A2($elm$core$List$cons, attr, els.parent)
+							});
+					case 'Transform':
+						return _Utils_update(
+							els,
+							{
+								cover: A2($elm$core$List$cons, attr, els.cover),
+								parent: A2($elm$core$List$cons, attr, els.parent)
+							});
+					case 'FontSize':
+						return _Utils_update(
+							els,
+							{
+								fullParent: A2($elm$core$List$cons, attr, els.fullParent)
+							});
+					case 'FontFamily':
+						var _v4 = attr.b;
+						return _Utils_update(
+							els,
+							{
+								fullParent: A2($elm$core$List$cons, attr, els.fullParent)
+							});
+					default:
+						var flag = attr.a;
+						var cls = attr.b;
+						return _Utils_update(
+							els,
+							{
+								parent: A2($elm$core$List$cons, attr, els.parent)
+							});
+				}
+			case 'NoAttribute':
+				return els;
+			case 'Attr':
+				var a = attr.a;
+				return _Utils_update(
+					els,
+					{
+						input: A2($elm$core$List$cons, attr, els.input)
+					});
+			case 'Describe':
+				return _Utils_update(
+					els,
+					{
+						input: A2($elm$core$List$cons, attr, els.input)
+					});
+			case 'Class':
+				return _Utils_update(
+					els,
+					{
+						parent: A2($elm$core$List$cons, attr, els.parent)
+					});
+			default:
+				return _Utils_update(
+					els,
+					{
+						input: A2($elm$core$List$cons, attr, els.input)
+					});
+		}
+	});
+var $mdgriffith$elm_ui$Element$Input$redistribute = F3(
+	function (isMultiline, stacked, attrs) {
+		return function (redist) {
+			return {
+				cover: $elm$core$List$reverse(redist.cover),
+				fullParent: $elm$core$List$reverse(redist.fullParent),
+				input: $elm$core$List$reverse(redist.input),
+				parent: $elm$core$List$reverse(redist.parent),
+				wrapper: $elm$core$List$reverse(redist.wrapper)
+			};
+		}(
+			A3(
+				$elm$core$List$foldl,
+				A2($mdgriffith$elm_ui$Element$Input$redistributeOver, isMultiline, stacked),
+				{cover: _List_Nil, fullParent: _List_Nil, input: _List_Nil, parent: _List_Nil, wrapper: _List_Nil},
+				attrs));
+	});
+var $mdgriffith$elm_ui$Element$Input$renderBox = function (_v0) {
+	var top = _v0.top;
+	var right = _v0.right;
+	var bottom = _v0.bottom;
+	var left = _v0.left;
+	return $elm$core$String$fromInt(top) + ('px ' + ($elm$core$String$fromInt(right) + ('px ' + ($elm$core$String$fromInt(bottom) + ('px ' + ($elm$core$String$fromInt(left) + 'px'))))));
+};
+var $mdgriffith$elm_ui$Internal$Model$Transparency = F2(
+	function (a, b) {
+		return {$: 'Transparency', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Internal$Flag$transparency = $mdgriffith$elm_ui$Internal$Flag$flag(0);
+var $mdgriffith$elm_ui$Element$alpha = function (o) {
+	var transparency = function (x) {
+		return 1 - x;
+	}(
+		A2(
+			$elm$core$Basics$min,
+			1.0,
+			A2($elm$core$Basics$max, 0.0, o)));
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$transparency,
+		A2(
+			$mdgriffith$elm_ui$Internal$Model$Transparency,
+			'transparency-' + $mdgriffith$elm_ui$Internal$Model$floatClass(transparency),
+			transparency));
+};
+var $mdgriffith$elm_ui$Element$Input$charcoal = A3($mdgriffith$elm_ui$Element$rgb, 136 / 255, 138 / 255, 133 / 255);
+var $mdgriffith$elm_ui$Element$Input$renderPlaceholder = F3(
+	function (_v0, forPlaceholder, on) {
+		var placeholderAttrs = _v0.a;
+		var placeholderEl = _v0.b;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_Utils_ap(
+				forPlaceholder,
+				_Utils_ap(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Font$color($mdgriffith$elm_ui$Element$Input$charcoal),
+							$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.noTextSelection + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.passPointerEvents)),
+							$mdgriffith$elm_ui$Element$clip,
+							$mdgriffith$elm_ui$Element$Border$color(
+							A4($mdgriffith$elm_ui$Element$rgba, 0, 0, 0, 0)),
+							$mdgriffith$elm_ui$Element$Background$color(
+							A4($mdgriffith$elm_ui$Element$rgba, 0, 0, 0, 0)),
+							$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+							$mdgriffith$elm_ui$Element$alpha(
+							on ? 1 : 0)
+						]),
+					placeholderAttrs)),
+			placeholderEl);
+	});
+var $mdgriffith$elm_ui$Element$scrollbarY = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$overflow, $mdgriffith$elm_ui$Internal$Style$classes.scrollbarsY);
+var $elm$html$Html$span = _VirtualDom_node('span');
+var $elm$html$Html$Attributes$spellcheck = $elm$html$Html$Attributes$boolProperty('spellcheck');
+var $mdgriffith$elm_ui$Element$Input$spellcheck = A2($elm$core$Basics$composeL, $mdgriffith$elm_ui$Internal$Model$Attr, $elm$html$Html$Attributes$spellcheck);
+var $elm$html$Html$Attributes$type_ = $elm$html$Html$Attributes$stringProperty('type');
+var $elm$html$Html$Attributes$value = $elm$html$Html$Attributes$stringProperty('value');
+var $mdgriffith$elm_ui$Element$Input$value = A2($elm$core$Basics$composeL, $mdgriffith$elm_ui$Internal$Model$Attr, $elm$html$Html$Attributes$value);
+var $mdgriffith$elm_ui$Element$Input$textHelper = F3(
+	function (textInput, attrs, textOptions) {
+		var withDefaults = _Utils_ap($mdgriffith$elm_ui$Element$Input$defaultTextBoxStyle, attrs);
+		var redistributed = A3(
+			$mdgriffith$elm_ui$Element$Input$redistribute,
+			_Utils_eq(textInput.type_, $mdgriffith$elm_ui$Element$Input$TextArea),
+			$mdgriffith$elm_ui$Element$Input$isStacked(textOptions.label),
+			withDefaults);
+		var onlySpacing = function (attr) {
+			if ((attr.$ === 'StyleClass') && (attr.b.$ === 'SpacingStyle')) {
+				var _v9 = attr.b;
+				return true;
+			} else {
+				return false;
+			}
+		};
+		var heightConstrained = function () {
+			var _v7 = textInput.type_;
+			if (_v7.$ === 'TextInputNode') {
+				var inputType = _v7.a;
+				return false;
+			} else {
+				return A2(
+					$elm$core$Maybe$withDefault,
+					false,
+					A2(
+						$elm$core$Maybe$map,
+						$mdgriffith$elm_ui$Element$Input$isConstrained,
+						$elm$core$List$head(
+							$elm$core$List$reverse(
+								A2($elm$core$List$filterMap, $mdgriffith$elm_ui$Element$Input$getHeight, withDefaults)))));
+			}
+		}();
+		var getPadding = function (attr) {
+			if ((attr.$ === 'StyleClass') && (attr.b.$ === 'PaddingStyle')) {
+				var cls = attr.a;
+				var _v6 = attr.b;
+				var pad = _v6.a;
+				var t = _v6.b;
+				var r = _v6.c;
+				var b = _v6.d;
+				var l = _v6.e;
+				return $elm$core$Maybe$Just(
+					{
+<<<<<<< HEAD
 						columns: _List_fromArray(
 							[
 								$author$project$Widget$SortTable$intColumn(
@@ -17171,14 +20373,117 @@ var $author$project$Stateless$carousel = function (model) {
 						$mdgriffith$elm_ui$Element$row,
 						_Utils_ap(
 							$Orasund$elm_ui_framework$Framework$Grid$simple,
+=======
+						bottom: A2(
+							$elm$core$Basics$max,
+							0,
+							$elm$core$Basics$floor(b - 3)),
+						left: A2(
+							$elm$core$Basics$max,
+							0,
+							$elm$core$Basics$floor(l - 3)),
+						right: A2(
+							$elm$core$Basics$max,
+							0,
+							$elm$core$Basics$floor(r - 3)),
+						top: A2(
+							$elm$core$Basics$max,
+							0,
+							$elm$core$Basics$floor(t - 3))
+					});
+			} else {
+				return $elm$core$Maybe$Nothing;
+			}
+		};
+		var parentPadding = A2(
+			$elm$core$Maybe$withDefault,
+			{bottom: 0, left: 0, right: 0, top: 0},
+			$elm$core$List$head(
+				$elm$core$List$reverse(
+					A2($elm$core$List$filterMap, getPadding, withDefaults))));
+		var inputElement = A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asEl,
+			function () {
+				var _v3 = textInput.type_;
+				if (_v3.$ === 'TextInputNode') {
+					var inputType = _v3.a;
+					return $mdgriffith$elm_ui$Internal$Model$NodeName('input');
+				} else {
+					return $mdgriffith$elm_ui$Internal$Model$NodeName('textarea');
+				}
+			}(),
+			_Utils_ap(
+				function () {
+					var _v4 = textInput.type_;
+					if (_v4.$ === 'TextInputNode') {
+						var inputType = _v4.a;
+						return _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Internal$Model$Attr(
+								$elm$html$Html$Attributes$type_(inputType)),
+								$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.inputText)
+							]);
+					} else {
+						return _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$clip,
+								$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+								$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.inputMultiline),
+								$mdgriffith$elm_ui$Element$Input$calcMoveToCompensateForPadding(withDefaults),
+								$mdgriffith$elm_ui$Element$paddingEach(parentPadding),
+								$mdgriffith$elm_ui$Internal$Model$Attr(
+								A2(
+									$elm$html$Html$Attributes$style,
+									'margin',
+									$mdgriffith$elm_ui$Element$Input$renderBox(
+										$mdgriffith$elm_ui$Element$Input$negateBox(parentPadding)))),
+								$mdgriffith$elm_ui$Internal$Model$Attr(
+								A2($elm$html$Html$Attributes$style, 'box-sizing', 'content-box'))
+							]);
+					}
+				}(),
+				_Utils_ap(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Input$value(textOptions.text),
+							$mdgriffith$elm_ui$Internal$Model$Attr(
+							$elm$html$Html$Events$onInput(textOptions.onChange)),
+							$mdgriffith$elm_ui$Element$Input$hiddenLabelAttribute(textOptions.label),
+							$mdgriffith$elm_ui$Element$Input$spellcheck(textInput.spellchecked),
+							A2(
+							$elm$core$Maybe$withDefault,
+							$mdgriffith$elm_ui$Internal$Model$NoAttribute,
+							A2($elm$core$Maybe$map, $mdgriffith$elm_ui$Element$Input$autofill, textInput.autofill))
+						]),
+					redistributed.input)),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(_List_Nil));
+		var wrappedInput = function () {
+			var _v0 = textInput.type_;
+			if (_v0.$ === 'TextArea') {
+				return A4(
+					$mdgriffith$elm_ui$Internal$Model$element,
+					$mdgriffith$elm_ui$Internal$Model$asEl,
+					$mdgriffith$elm_ui$Internal$Model$div,
+					_Utils_ap(
+						(heightConstrained ? $elm$core$List$cons($mdgriffith$elm_ui$Element$scrollbarY) : $elm$core$Basics$identity)(
+>>>>>>> cc2ca06... finishing the material design
 							_List_fromArray(
 								[
-									$mdgriffith$elm_ui$Element$centerX,
-									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
+									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+									A2($elm$core$List$any, $mdgriffith$elm_ui$Element$Input$hasFocusStyle, withDefaults) ? $mdgriffith$elm_ui$Internal$Model$NoAttribute : $mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.focusedWithin),
+									$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.inputMultilineWrapper)
 								])),
+						redistributed.parent),
+					$mdgriffith$elm_ui$Internal$Model$Unkeyed(
 						_List_fromArray(
 							[
+								A4(
+								$mdgriffith$elm_ui$Internal$Model$element,
+								$mdgriffith$elm_ui$Internal$Model$asParagraph,
+								$mdgriffith$elm_ui$Internal$Model$div,
 								A2(
+<<<<<<< HEAD
 								$mdgriffith$elm_ui$Element$Input$button,
 								_List_fromArray(
 									[$mdgriffith$elm_ui$Element$centerY]),
@@ -17227,54 +20532,166 @@ var $author$project$Stateless$ToggleCollapsable = function (a) {
 	return {$: 'ToggleCollapsable', a: a};
 };
 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(
-					[
+=======
+									$elm$core$List$cons,
+									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+									A2(
+										$elm$core$List$cons,
+										$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+										A2(
+											$elm$core$List$cons,
+											$mdgriffith$elm_ui$Element$inFront(inputElement),
+											A2(
+												$elm$core$List$cons,
+												$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.inputMultilineParent),
+												redistributed.wrapper)))),
+								$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+									function () {
+										if (textOptions.text === '') {
+											var _v1 = textOptions.placeholder;
+											if (_v1.$ === 'Nothing') {
+												return _List_fromArray(
+													[
+														$mdgriffith$elm_ui$Element$text('\u00A0')
+													]);
+											} else {
+												var place = _v1.a;
+												return _List_fromArray(
+													[
+														A3($mdgriffith$elm_ui$Element$Input$renderPlaceholder, place, _List_Nil, textOptions.text === '')
+													]);
+											}
+										} else {
+											return _List_fromArray(
+												[
+													$mdgriffith$elm_ui$Internal$Model$unstyled(
+													A2(
+														$elm$html$Html$span,
+														_List_fromArray(
+															[
+																$elm$html$Html$Attributes$class($mdgriffith$elm_ui$Internal$Style$classes.inputMultilineFiller)
+															]),
+														_List_fromArray(
+															[
+																$elm$html$Html$text(textOptions.text + '\u00A0')
+															])))
+												]);
+										}
+									}()))
+							])));
+			} else {
+				var inputType = _v0.a;
+				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$fill),
 						A2(
-						$mdgriffith$elm_ui$Element$Input$button,
-						style.button,
-						{
-							label: label,
-							onPress: $elm$core$Maybe$Just(
-								onToggle(!isCollapsed))
-						})
-					]),
-				isCollapsed ? _List_Nil : _List_fromArray(
-					[content])));
+							$elm$core$List$cons,
+							A2($elm$core$List$any, $mdgriffith$elm_ui$Element$Input$hasFocusStyle, withDefaults) ? $mdgriffith$elm_ui$Internal$Model$NoAttribute : $mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.focusedWithin),
+							$elm$core$List$concat(
+								_List_fromArray(
+									[
+										redistributed.parent,
+										function () {
+										var _v2 = textOptions.placeholder;
+										if (_v2.$ === 'Nothing') {
+											return _List_Nil;
+										} else {
+											var place = _v2.a;
+											return _List_fromArray(
+												[
+													$mdgriffith$elm_ui$Element$behindContent(
+													A3($mdgriffith$elm_ui$Element$Input$renderPlaceholder, place, redistributed.cover, textOptions.text === ''))
+												]);
+										}
+									}()
+									])))),
+					$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+						_List_fromArray(
+							[inputElement])));
+			}
+		}();
+		return A3(
+			$mdgriffith$elm_ui$Element$Input$applyLabel,
+			A2(
+				$elm$core$List$cons,
+				A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$cursor, $mdgriffith$elm_ui$Internal$Style$classes.cursorText),
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Element$Input$isHiddenLabel(textOptions.label) ? $mdgriffith$elm_ui$Internal$Model$NoAttribute : $mdgriffith$elm_ui$Element$spacing(5),
+					A2($elm$core$List$cons, $mdgriffith$elm_ui$Element$Region$announce, redistributed.fullParent))),
+			textOptions.label,
+			wrappedInput);
 	});
-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(
+var $mdgriffith$elm_ui$Element$Input$text = $mdgriffith$elm_ui$Element$Input$textHelper(
+	{
+		autofill: $elm$core$Maybe$Nothing,
+		spellchecked: false,
+		type_: $mdgriffith$elm_ui$Element$Input$TextInputNode('text')
+	});
+var $author$project$Internal$TextInput$textInput = F2(
+>>>>>>> cc2ca06... finishing the material design
+	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$row,
+			style.containerRow,
+			_List_fromArray(
+				[
+					$elm$core$List$isEmpty(chips) ? $mdgriffith$elm_ui$Element$none : A2(
 					$mdgriffith$elm_ui$Element$row,
-					_Utils_ap(
-						$Orasund$elm_ui_framework$Framework$Grid$simple,
-						_List_fromArray(
+					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(
 							[
+<<<<<<< HEAD
 								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
 							])),
 					_List_fromArray(
@@ -17305,10 +20722,57 @@ var $author$project$Stateless$dialog = F2(
 					label: $mdgriffith$elm_ui$Element$text('Show dialog'),
 					onPress: $elm$core$Maybe$Just(showDialog)
 				}));
+=======
+								{
+								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: ''
+					}))
+			]);
+>>>>>>> cc2ca06... finishing the material design
 	});
-var $author$project$Stateless$ToggleButton = function (a) {
-	return {$: 'ToggleButton', a: a};
+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;
+	}
 };
+<<<<<<< HEAD
 var $author$project$Stateless$buttonStyle = {
 	active: $Orasund$elm_ui_framework$Framework$Color$primary,
 	container: $Orasund$elm_ui_framework$Framework$Button$simple,
@@ -17320,6 +20784,67 @@ var $author$project$Stateless$buttonStyle = {
 };
 var $author$project$Icons$slash = A2(
 	$author$project$Icons$svgFeatherIcon,
+=======
+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,
+>>>>>>> cc2ca06... finishing the material design
 	'slash',
 	_List_fromArray(
 		[
@@ -17343,21 +20868,81 @@ var $author$project$Icons$slash = A2(
 				]),
 			_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,
+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(
+<<<<<<< HEAD
 					$author$project$Widget$Button$view,
 					$author$project$Stateless$buttonStyle,
+=======
+					$author$project$Widget$button,
+					style.primaryButton,
+>>>>>>> cc2ca06... finishing the material design
 					{
 						icon: A2(
 							$mdgriffith$elm_ui$Element$el,
 							_List_Nil,
+<<<<<<< HEAD
 							$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,
@@ -17366,62 +20951,478 @@ var $author$project$Stateless$iconButton = function (model) {
 					A2(
 					$author$project$Widget$Button$view,
 					$author$project$Stateless$buttonStyle,
+=======
+							$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,
+>>>>>>> cc2ca06... finishing the material design
 					{
-						icon: $mdgriffith$elm_ui$Element$none,
+						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(
-							$author$project$Stateless$ToggleButton(true)),
-						text: 'reset button'
+							msgMapper(
+								$author$project$Example$Button$ChangedButtonStatus(true))),
+						text: 'reset'
 					})
-				])));
+				]));
+	});
+var $author$project$Example$Dialog$OpenDialog = function (a) {
+	return {$: 'OpenDialog', a: a};
 };
-var $author$project$Stateless$modal = F2(
-	function (changedSheet, model) {
-		return _Utils_Tuple2(
-			'Modal',
+var $feathericons$elm_feather$FeatherIcons$eye = A2(
+	$feathericons$elm_feather$FeatherIcons$makeBuilder,
+	'eye',
+	_List_fromArray(
+		[
 			A2(
-				$mdgriffith$elm_ui$Element$column,
-				$Orasund$elm_ui_framework$Framework$Grid$simple,
+			$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(
 					[
-						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)))
-						})
-					])));
+						$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$Stateless$ChangedMultiSelected = function (a) {
-	return {$: 'ChangedMultiSelected', a: a};
+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};
+};
+<<<<<<< HEAD
 var $author$project$Widget$multiSelect = function (_v0) {
 	var selected = _v0.selected;
 	var options = _v0.options;
 	var onSelect = _v0.onSelect;
 	return A2(
 		$elm$core$List$indexedMap,
+=======
+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,
+>>>>>>> cc2ca06... finishing the material design
 		F2(
-			function (i, a) {
+			function (attr, _v0) {
+				var pad = _v0.a;
+				var spacing = _v0.b;
 				return _Utils_Tuple2(
-					A2($elm$core$Set$member, i, selected),
-					{
-						icon: a.icon,
-						onPress: onSelect(i),
-						text: a.text
-					});
+					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;
+							}
+						}
+					}());
 			}),
+<<<<<<< HEAD
 		options);
 };
 var $author$project$Stateless$multiSelect = function (model) {
@@ -17480,47 +21481,181 @@ var $author$project$Stateless$select = function (model) {
 							}));
 				},
 				$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
-					}))));
+=======
+		_Utils_Tuple2($elm$core$Maybe$Nothing, $elm$core$Maybe$Nothing),
+		attrs);
 };
-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) {
+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(
-			$mdgriffith$elm_ui$Element$column,
-			style.containerColumn,
+			$author$project$Widget$column,
+			style.column,
 			_List_fromArray(
 				[
 					A2(
-					$mdgriffith$elm_ui$Element$row,
-					style.optionRow,
+					$author$project$Widget$textInput,
+					style.textInput,
+>>>>>>> cc2ca06... finishing the material design
+					{
+						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,
-						$author$project$Widget$selectButton(style.button),
-						$author$project$Widget$select(options))),
-					content(options.selected)
+						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))))
 				]));
 	});
+<<<<<<< HEAD
 var $Orasund$elm_ui_framework$Framework$Group$top = _List_fromArray(
 	[
 		$mdgriffith$elm_ui$Element$Border$roundEach(
@@ -17554,40 +21689,340 @@ var $author$project$Stateless$tab = function (model) {
 					_List_fromArray(
 						[1, 2, 3])),
 				selected: model.tab
+=======
+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$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)
+				};
+>>>>>>> cc2ca06... finishing the material design
 			},
-			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;
+			$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$Widget$Layout$RightSheet = {$: 'RightSheet'};
+var $author$project$Widget$Layout$Search = {$: 'Search'};
+var $mdgriffith$elm_ui$Element$Tablet = {$: 'Tablet'};
+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$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 $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 {
-									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};
+						} 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$Widget$Snackbar$current = function (model) {
+	return A2($elm$core$Maybe$map, $elm$core$Tuple$first, model.current);
 };
+<<<<<<< HEAD
 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) {
@@ -17596,26 +22031,175 @@ var $elm$core$Dict$diff = F2(
 			F3(
 				function (k, v, t) {
 					return A2($elm$core$Dict$remove, k, t);
+=======
+var $author$project$Widget$Snackbar$view = F3(
+	function (style, toMessage, model) {
+		return A2(
+			$elm$core$Maybe$map,
+			A2(
+				$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))
+							]));
+>>>>>>> cc2ca06... finishing the material design
 				}),
-			t1,
-			t2);
+			$author$project$Widget$Snackbar$current(model));
 	});
-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,
+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 window = _v0.window;
+		var dialog = _v0.dialog;
+		var layout = _v0.layout;
+		var snackbar = A2(
+			$elm$core$Maybe$withDefault,
+			$mdgriffith$elm_ui$Element$none,
+			A2(
+				$elm$core$Maybe$map,
+				$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 _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(
+								$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(
+								$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;
+			}
+		}();
+		var nav = A2(
+			$mdgriffith$elm_ui$Element$row,
+			_Utils_ap(
+				style.header,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$padding(0),
+						$mdgriffith$elm_ui$Element$centerX,
+						$mdgriffith$elm_ui$Element$spacing(style.spacing),
+						$mdgriffith$elm_ui$Element$alignTop,
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+					])),
 			_List_fromArray(
 				[
 					A2(
+<<<<<<< HEAD
 					$author$project$Widget$textInput,
 					{
 						chip: $author$project$Stateless$chipButton,
@@ -17665,109 +22249,193 @@ var $author$project$Stateless$textInput = function (model) {
 					}),
 					A2(
 					$mdgriffith$elm_ui$Element$wrappedRow,
+=======
+					$mdgriffith$elm_ui$Element$row,
+>>>>>>> cc2ca06... finishing the material design
 					_List_fromArray(
 						[
-							$mdgriffith$elm_ui$Element$spacing(10)
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+							$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.options) > 5))) ? _List_fromArray(
+						[
+							A2(
+							$author$project$Widget$iconButton,
+							style.menuButton,
+							{
+								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$Widget$Layout$LeftSheet))),
+								text: 'Menu'
+							}),
+							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(
+						[
+							A2($mdgriffith$elm_ui$Element$el, style.title, title),
+							A2(
+							$mdgriffith$elm_ui$Element$row,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
+								]),
+							A2(
+								$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$List$map,
-						function (string) {
+						$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$button,
-								_Utils_ap($Orasund$elm_ui_framework$Framework$Button$simple, $Orasund$elm_ui_framework$Framework$Tag$simple),
+								$mdgriffith$elm_ui$Element$Input$text,
+								style.search,
 								{
-									label: $mdgriffith$elm_ui$Element$text(string),
-									onPress: $elm$core$Maybe$Just(
-										$author$project$Stateless$ToggleTextInputChip(string))
+									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
 								});
 						},
-						$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(
-				[
+						search)),
 					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,
+					$mdgriffith$elm_ui$Element$row,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+							$mdgriffith$elm_ui$Element$alignRight
+						]),
+					$elm$core$List$concat(
 						_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));
+								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$Widget$iconButton(style.menuButton) : $author$project$Widget$button(style.menuButton),
+								primaryActions),
+								$elm$core$List$isEmpty(moreActions) ? _List_Nil : _List_fromArray(
+								[
+									A2(
+									$author$project$Widget$iconButton,
+									style.menuButton,
+									{
+										icon: style.moreVerticalIcon,
+										onPress: $elm$core$Maybe$Just(
+											onChangedSidebar(
+												$elm$core$Maybe$Just($author$project$Widget$Layout$RightSheet))),
+										text: 'More'
+									})
+								])
+							])))
+				]));
+		return A2(
+			style.layout,
+			$elm$core$List$concat(
+				_List_fromArray(
+					[
+						style.container,
+						_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$inFront(nav),
+							$mdgriffith$elm_ui$Element$inFront(snackbar)
+						]),
+						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$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(
 						[
@@ -17777,7 +22445,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'
 						},
 							{
@@ -17786,163 +22454,68 @@ 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,
+<<<<<<< HEAD
 							$author$project$Example$style.dialog,
+=======
+							style.dialog,
+>>>>>>> cc2ca06... finishing the material design
 							{
 								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,
@@ -17951,31 +22524,144 @@ 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(
+<<<<<<< HEAD
 						{label: 'Search', onChange: $author$project$Example$ChangedSearch, text: m.search.raw}),
 					style: $author$project$Example$style,
+=======
+						{label: 'Search', onChange: $author$project$Main$ChangedSearch, text: m.search.raw}),
+>>>>>>> cc2ca06... finishing the material design
 					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)
 {

From 3a3cb211e22315fa65b49581a6912f2dc3eeac68 Mon Sep 17 00:00:00 2001
From: Unknown 
Date: Sun, 24 May 2020 22:48:02 +0200
Subject: [PATCH 3/4] Added unstable version of Homepage

---
 docs/unstable/index.html | 42383 +++++++++++++++++--------------------
 1 file changed, 19958 insertions(+), 22425 deletions(-)

diff --git a/docs/unstable/index.html b/docs/unstable/index.html
index 2ae3dde..65102e7 100644
--- a/docs/unstable/index.html
+++ b/docs/unstable/index.html
@@ -1,21563 +1,19134 @@
 
 
+
 
-  
-  Main
-  
+	
+	Main
+	
 
 
 
 
-

-
-
+			var app = Elm.Main.init({ node: document.getElementById("elm") });
+		}
+		catch (e) {
+			// display initialization errors (e.g. bad flags, infinite recursion)
+			var header = document.createElement("h1");
+			header.style.fontFamily = "monospace";
+			header.innerText = "Initialization Error";
+			var pre = document.getElementById("elm");
+			document.body.insertBefore(header, pre);
+			pre.innerText = e;
+			throw e;
+		}
+	
 
 
+
 
\ No newline at end of file

From 5014a6bb8bfc76248898e0786d4abf8d54c9d751 Mon Sep 17 00:00:00 2001
From: Unknown 
Date: Mon, 25 May 2020 07:45:16 +0200
Subject: [PATCH 4/4] Added assets images

---
 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
 13 files changed, 0 insertions(+), 0 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

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
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
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
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

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
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
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
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	GliS_kLVm$njb%~
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
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
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
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
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
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
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
TUG)9@?Qh_U^V-LAIuidUTp(NU

literal 0
HcmV?d00001