diff --git a/docs/3.0.0/index.html b/docs/3.0.0/index.html
index 8bb3ce4..d153814 100644
--- a/docs/3.0.0/index.html
+++ b/docs/3.0.0/index.html
@@ -10,6 +10,31 @@
 
 <pre id="elm"></pre>
 
+<!-- Start Single Page Apps for GitHub Pages -->
+<script type="text/javascript">
+	// Single Page Apps for GitHub Pages
+	// MIT License
+	// https://github.com/rafgraph/spa-github-pages
+	// This script checks to see if a redirect is present in the query string,
+	// converts it back into the correct url and adds it to the
+	// browser's history using window.history.replaceState(...),
+	// which won't cause the browser to attempt to load the new url.
+	// When the single page app is loaded further down in this file,
+	// the correct url will be waiting in the browser's history for
+	// the single page app to route accordingly.
+	(function(l) {
+		if (l.search[1] === '/' ) {
+			var decoded = l.search.slice(1).split('&').map(function(s) { 
+				return s.replace(/~and~/g, '&')
+			}).join('?');
+			window.history.replaceState(null, null,
+					l.pathname.slice(0, -1) + decoded + l.hash
+			);
+		}
+	}(window.location))
+</script>
+<!-- End Single Page Apps for GitHub Pages -->
+
 <script>
 try {
 (function(scope){
@@ -4371,6 +4396,60 @@ function _Browser_load(url)
 }
 
 
+function _Url_percentEncode(string)
+{
+	return encodeURIComponent(string);
+}
+
+function _Url_percentDecode(string)
+{
+	try
+	{
+		return $elm$core$Maybe$Just(decodeURIComponent(string));
+	}
+	catch (e)
+	{
+		return $elm$core$Maybe$Nothing;
+	}
+}
+
+
+var _Bitwise_and = F2(function(a, b)
+{
+	return a & b;
+});
+
+var _Bitwise_or = F2(function(a, b)
+{
+	return a | b;
+});
+
+var _Bitwise_xor = F2(function(a, b)
+{
+	return a ^ b;
+});
+
+function _Bitwise_complement(a)
+{
+	return ~a;
+};
+
+var _Bitwise_shiftLeftBy = F2(function(offset, a)
+{
+	return a << offset;
+});
+
+var _Bitwise_shiftRightBy = F2(function(offset, a)
+{
+	return a >> offset;
+});
+
+var _Bitwise_shiftRightZfBy = F2(function(offset, a)
+{
+	return a >>> offset;
+});
+
+
 
 function _Time_now(millisToPosix)
 {
@@ -4415,43 +4494,12 @@ function _Time_getZoneName()
 		callback(_Scheduler_succeed(name));
 	});
 }
-
-
-
-var _Bitwise_and = F2(function(a, b)
-{
-	return a & b;
-});
-
-var _Bitwise_or = F2(function(a, b)
-{
-	return a | b;
-});
-
-var _Bitwise_xor = F2(function(a, b)
-{
-	return a ^ b;
-});
-
-function _Bitwise_complement(a)
-{
-	return ~a;
+var $author$project$UIExplorer$LinkClicked = function (a) {
+	return {$: 'LinkClicked', a: a};
+};
+var $author$project$UIExplorer$UrlChanged = function (a) {
+	return {$: 'UrlChanged', a: a};
 };
-
-var _Bitwise_shiftLeftBy = F2(function(offset, a)
-{
-	return a << offset;
-});
-
-var _Bitwise_shiftRightBy = F2(function(offset, a)
-{
-	return a >> offset;
-});
-
-var _Bitwise_shiftRightZfBy = F2(function(offset, a)
-{
-	return a >>> offset;
-});
 var $elm$core$Basics$EQ = {$: 'EQ'};
 var $elm$core$Basics$GT = {$: 'GT'};
 var $elm$core$Basics$LT = {$: 'LT'};
@@ -5240,74 +5288,48 @@ var $elm$core$Task$perform = F2(
 			$elm$core$Task$Perform(
 				A2($elm$core$Task$map, toMessage, task)));
 	});
-var $elm$browser$Browser$element = _Browser_element;
-var $author$project$Main$GotViewport = function (a) {
-	return {$: 'GotViewport', a: a};
+var $elm$browser$Browser$application = _Browser_application;
+var $author$project$UIExplorer$FlagsDidNotParse = function (a) {
+	return {$: 'FlagsDidNotParse', a: a};
 };
-var $author$project$Main$Loading = {$: 'Loading'};
-var $elm$browser$Browser$Dom$getViewport = _Browser_withWindow(_Browser_getViewport);
-var $author$project$Main$init = function (_v0) {
-	return _Utils_Tuple2(
-		$author$project$Main$Loading,
-		A2($elm$core$Task$perform, $author$project$Main$GotViewport, $elm$browser$Browser$Dom$getViewport));
+var $author$project$UIExplorer$FlagsParsed = function (a) {
+	return {$: 'FlagsParsed', a: a};
 };
-var $author$project$Main$LoadedSpecific = function (a) {
-	return {$: 'LoadedSpecific', a: a};
+var $author$project$UIExplorer$Native = {$: 'Native'};
+var $author$project$UIExplorer$PageBuilder = function (a) {
+	return {$: 'PageBuilder', a: a};
 };
-var $author$project$Main$Resized = function (a) {
-	return {$: 'Resized', a: a};
+var $author$project$UIExplorer$PageMsg = function (a) {
+	return {$: 'PageMsg', a: a};
 };
-var $author$project$Main$StatelessSpecific = function (a) {
-	return {$: 'StatelessSpecific', a: a};
+var $author$project$UIExplorer$WindowResized = function (a) {
+	return {$: 'WindowResized', a: a};
 };
-var $author$project$Main$TimePassed = function (a) {
-	return {$: 'TimePassed', a: a};
+var $elm$core$Platform$Cmd$batch = _Platform_batch;
+var $elm$json$Json$Decode$decodeValue = _Json_run;
+var $elm$core$Set$Set_elm_builtin = function (a) {
+	return {$: 'Set_elm_builtin', a: a};
 };
-var $elm$core$Basics$always = F2(
-	function (a, _v0) {
-		return a;
-	});
-var $elm$core$Platform$Sub$batch = _Platform_batch;
-var $elm$time$Time$Every = F2(
-	function (a, b) {
-		return {$: 'Every', a: a, b: b};
-	});
-var $elm$time$Time$State = F2(
-	function (taggers, processes) {
-		return {processes: processes, taggers: taggers};
-	});
 var $elm$core$Dict$RBEmpty_elm_builtin = {$: 'RBEmpty_elm_builtin'};
 var $elm$core$Dict$empty = $elm$core$Dict$RBEmpty_elm_builtin;
-var $elm$time$Time$init = $elm$core$Task$succeed(
-	A2($elm$time$Time$State, $elm$core$Dict$empty, $elm$core$Dict$empty));
-var $elm$core$Basics$compare = _Utils_compare;
-var $elm$core$Dict$get = F2(
-	function (targetKey, dict) {
-		get:
+var $elm$core$Set$empty = $elm$core$Set$Set_elm_builtin($elm$core$Dict$empty);
+var $elm$core$List$drop = F2(
+	function (n, list) {
+		drop:
 		while (true) {
-			if (dict.$ === 'RBEmpty_elm_builtin') {
-				return $elm$core$Maybe$Nothing;
+			if (n <= 0) {
+				return list;
 			} else {
-				var key = dict.b;
-				var value = dict.c;
-				var left = dict.d;
-				var right = dict.e;
-				var _v1 = A2($elm$core$Basics$compare, targetKey, key);
-				switch (_v1.$) {
-					case 'LT':
-						var $temp$targetKey = targetKey,
-							$temp$dict = left;
-						targetKey = $temp$targetKey;
-						dict = $temp$dict;
-						continue get;
-					case 'EQ':
-						return $elm$core$Maybe$Just(value);
-					default:
-						var $temp$targetKey = targetKey,
-							$temp$dict = right;
-						targetKey = $temp$targetKey;
-						dict = $temp$dict;
-						continue get;
+				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;
 				}
 			}
 		}
@@ -5372,6 +5394,7 @@ var $elm$core$Dict$balance = F5(
 			}
 		}
 	});
+var $elm$core$Basics$compare = _Utils_compare;
 var $elm$core$Dict$insertHelp = F3(
 	function (key, value, dict) {
 		if (dict.$ === 'RBEmpty_elm_builtin') {
@@ -5420,28 +5443,45 @@ var $elm$core$Dict$insert = F3(
 			return x;
 		}
 	});
-var $elm$time$Time$addMySub = F2(
-	function (_v0, state) {
-		var interval = _v0.a;
-		var tagger = _v0.b;
-		var _v1 = A2($elm$core$Dict$get, interval, state);
-		if (_v1.$ === 'Nothing') {
-			return A3(
-				$elm$core$Dict$insert,
-				interval,
-				_List_fromArray(
-					[tagger]),
-				state);
-		} else {
-			var taggers = _v1.a;
-			return A3(
-				$elm$core$Dict$insert,
-				interval,
-				A2($elm$core$List$cons, tagger, taggers),
-				state);
-		}
+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$Process$kill = _Scheduler_kill;
+var $elm$core$Set$fromList = function (list) {
+	return A3($elm$core$List$foldl, $elm$core$Set$insert, $elm$core$Set$empty, list);
+};
+var $elm$url$Url$Builder$toQueryPair = function (_v0) {
+	var key = _v0.a;
+	var value = _v0.b;
+	return key + ('=' + value);
+};
+var $elm$url$Url$Builder$toQuery = function (parameters) {
+	if (!parameters.b) {
+		return '';
+	} else {
+		return '?' + A2(
+			$elm$core$String$join,
+			'&',
+			A2($elm$core$List$map, $elm$url$Url$Builder$toQueryPair, parameters));
+	}
+};
+var $elm$url$Url$Builder$absolute = F2(
+	function (pathSegments, parameters) {
+		return '/' + (A2($elm$core$String$join, '/', pathSegments) + $elm$url$Url$Builder$toQuery(parameters));
+	});
+var $elm$url$Url$percentEncode = _Url_percentEncode;
+var $author$project$UIExplorer$uiUrl = F2(
+	function (path, pageId) {
+		return A2(
+			$elm$url$Url$Builder$absolute,
+			_Utils_ap(
+				path,
+				A2($elm$core$List$map, $elm$url$Url$percentEncode, pageId)),
+			_List_Nil);
+	});
+var $author$project$UIExplorer$pageGroupToString = $author$project$UIExplorer$uiUrl(_List_Nil);
 var $elm$core$Dict$foldl = F3(
 	function (func, acc, dict) {
 		foldl:
@@ -5467,862 +5507,152 @@ var $elm$core$Dict$foldl = F3(
 			}
 		}
 	});
-var $elm$core$Dict$merge = F6(
-	function (leftStep, bothStep, rightStep, leftDict, rightDict, initialResult) {
-		var stepState = F3(
-			function (rKey, rValue, _v0) {
-				stepState:
-				while (true) {
-					var list = _v0.a;
-					var result = _v0.b;
-					if (!list.b) {
-						return _Utils_Tuple2(
-							list,
-							A3(rightStep, rKey, rValue, result));
-					} else {
-						var _v2 = list.a;
-						var lKey = _v2.a;
-						var lValue = _v2.b;
-						var rest = list.b;
-						if (_Utils_cmp(lKey, rKey) < 0) {
-							var $temp$rKey = rKey,
-								$temp$rValue = rValue,
-								$temp$_v0 = _Utils_Tuple2(
-								rest,
-								A3(leftStep, lKey, lValue, result));
-							rKey = $temp$rKey;
-							rValue = $temp$rValue;
-							_v0 = $temp$_v0;
-							continue stepState;
-						} else {
-							if (_Utils_cmp(lKey, rKey) > 0) {
-								return _Utils_Tuple2(
-									list,
-									A3(rightStep, rKey, rValue, result));
-							} else {
-								return _Utils_Tuple2(
-									rest,
-									A4(bothStep, lKey, lValue, rValue, result));
-							}
-						}
-					}
-				}
-			});
-		var _v3 = A3(
-			$elm$core$Dict$foldl,
-			stepState,
-			_Utils_Tuple2(
-				$elm$core$Dict$toList(leftDict),
-				initialResult),
-			rightDict);
-		var leftovers = _v3.a;
-		var intermediateResult = _v3.b;
-		return A3(
-			$elm$core$List$foldl,
-			F2(
-				function (_v4, result) {
-					var k = _v4.a;
-					var v = _v4.b;
-					return A3(leftStep, k, v, result);
-				}),
-			intermediateResult,
-			leftovers);
-	});
-var $elm$core$Platform$sendToSelf = _Platform_sendToSelf;
-var $elm$time$Time$Name = function (a) {
-	return {$: 'Name', a: a};
-};
-var $elm$time$Time$Offset = function (a) {
-	return {$: 'Offset', a: a};
-};
-var $elm$time$Time$Zone = F2(
-	function (a, b) {
-		return {$: 'Zone', a: a, b: b};
-	});
-var $elm$time$Time$customZone = $elm$time$Time$Zone;
-var $elm$time$Time$setInterval = _Time_setInterval;
-var $elm$core$Process$spawn = _Scheduler_spawn;
-var $elm$time$Time$spawnHelp = F3(
-	function (router, intervals, processes) {
-		if (!intervals.b) {
-			return $elm$core$Task$succeed(processes);
-		} else {
-			var interval = intervals.a;
-			var rest = intervals.b;
-			var spawnTimer = $elm$core$Process$spawn(
-				A2(
-					$elm$time$Time$setInterval,
-					interval,
-					A2($elm$core$Platform$sendToSelf, router, interval)));
-			var spawnRest = function (id) {
-				return A3(
-					$elm$time$Time$spawnHelp,
-					router,
-					rest,
-					A3($elm$core$Dict$insert, interval, id, processes));
-			};
-			return A2($elm$core$Task$andThen, spawnRest, spawnTimer);
-		}
-	});
-var $elm$time$Time$onEffects = F3(
-	function (router, subs, _v0) {
-		var processes = _v0.processes;
-		var rightStep = F3(
-			function (_v6, id, _v7) {
-				var spawns = _v7.a;
-				var existing = _v7.b;
-				var kills = _v7.c;
-				return _Utils_Tuple3(
-					spawns,
-					existing,
-					A2(
-						$elm$core$Task$andThen,
-						function (_v5) {
-							return kills;
-						},
-						$elm$core$Process$kill(id)));
-			});
-		var newTaggers = A3($elm$core$List$foldl, $elm$time$Time$addMySub, $elm$core$Dict$empty, subs);
-		var leftStep = F3(
-			function (interval, taggers, _v4) {
-				var spawns = _v4.a;
-				var existing = _v4.b;
-				var kills = _v4.c;
-				return _Utils_Tuple3(
-					A2($elm$core$List$cons, interval, spawns),
-					existing,
-					kills);
-			});
-		var bothStep = F4(
-			function (interval, taggers, id, _v3) {
-				var spawns = _v3.a;
-				var existing = _v3.b;
-				var kills = _v3.c;
-				return _Utils_Tuple3(
-					spawns,
-					A3($elm$core$Dict$insert, interval, id, existing),
-					kills);
-			});
-		var _v1 = A6(
-			$elm$core$Dict$merge,
-			leftStep,
-			bothStep,
-			rightStep,
-			newTaggers,
-			processes,
-			_Utils_Tuple3(
-				_List_Nil,
-				$elm$core$Dict$empty,
-				$elm$core$Task$succeed(_Utils_Tuple0)));
-		var spawnList = _v1.a;
-		var existingDict = _v1.b;
-		var killTask = _v1.c;
-		return A2(
-			$elm$core$Task$andThen,
-			function (newProcesses) {
-				return $elm$core$Task$succeed(
-					A2($elm$time$Time$State, newTaggers, newProcesses));
-			},
-			A2(
-				$elm$core$Task$andThen,
-				function (_v2) {
-					return A3($elm$time$Time$spawnHelp, router, spawnList, existingDict);
-				},
-				killTask));
-	});
-var $elm$time$Time$Posix = function (a) {
-	return {$: 'Posix', a: a};
-};
-var $elm$time$Time$millisToPosix = $elm$time$Time$Posix;
-var $elm$time$Time$now = _Time_now($elm$time$Time$millisToPosix);
-var $elm$time$Time$onSelfMsg = F3(
-	function (router, interval, state) {
-		var _v0 = A2($elm$core$Dict$get, interval, state.taggers);
-		if (_v0.$ === 'Nothing') {
-			return $elm$core$Task$succeed(state);
-		} else {
-			var taggers = _v0.a;
-			var tellTaggers = function (time) {
-				return $elm$core$Task$sequence(
-					A2(
-						$elm$core$List$map,
-						function (tagger) {
-							return A2(
-								$elm$core$Platform$sendToApp,
-								router,
-								tagger(time));
-						},
-						taggers));
-			};
-			return A2(
-				$elm$core$Task$andThen,
-				function (_v1) {
-					return $elm$core$Task$succeed(state);
-				},
-				A2($elm$core$Task$andThen, tellTaggers, $elm$time$Time$now));
-		}
-	});
-var $elm$core$Basics$composeL = F3(
-	function (g, f, x) {
-		return g(
-			f(x));
-	});
-var $elm$time$Time$subMap = F2(
-	function (f, _v0) {
-		var interval = _v0.a;
-		var tagger = _v0.b;
-		return A2(
-			$elm$time$Time$Every,
-			interval,
-			A2($elm$core$Basics$composeL, f, tagger));
-	});
-_Platform_effectManagers['Time'] = _Platform_createManager($elm$time$Time$init, $elm$time$Time$onEffects, $elm$time$Time$onSelfMsg, 0, $elm$time$Time$subMap);
-var $elm$time$Time$subscription = _Platform_leaf('Time');
-var $elm$time$Time$every = F2(
-	function (interval, tagger) {
-		return $elm$time$Time$subscription(
-			A2($elm$time$Time$Every, interval, tagger));
-	});
-var $elm$core$Platform$Sub$map = _Platform_map;
-var $elm$browser$Browser$Events$Window = {$: 'Window'};
-var $elm$json$Json$Decode$field = _Json_decodeField;
-var $elm$json$Json$Decode$int = _Json_decodeInt;
-var $elm$browser$Browser$Events$MySub = F3(
-	function (a, b, c) {
-		return {$: 'MySub', a: a, b: b, c: c};
-	});
-var $elm$browser$Browser$Events$State = F2(
-	function (subs, pids) {
-		return {pids: pids, subs: subs};
-	});
-var $elm$browser$Browser$Events$init = $elm$core$Task$succeed(
-	A2($elm$browser$Browser$Events$State, _List_Nil, $elm$core$Dict$empty));
-var $elm$browser$Browser$Events$nodeToKey = function (node) {
-	if (node.$ === 'Document') {
-		return 'd_';
-	} else {
-		return 'w_';
-	}
-};
-var $elm$browser$Browser$Events$addKey = function (sub) {
-	var node = sub.a;
-	var name = sub.b;
-	return _Utils_Tuple2(
-		_Utils_ap(
-			$elm$browser$Browser$Events$nodeToKey(node),
-			name),
-		sub);
-};
-var $elm$core$Dict$fromList = function (assocs) {
-	return A3(
-		$elm$core$List$foldl,
-		F2(
-			function (_v0, dict) {
-				var key = _v0.a;
-				var value = _v0.b;
-				return A3($elm$core$Dict$insert, key, value, dict);
-			}),
-		$elm$core$Dict$empty,
-		assocs);
-};
-var $elm$browser$Browser$Events$Event = F2(
-	function (key, event) {
-		return {event: event, key: key};
-	});
-var $elm$browser$Browser$Events$spawn = F3(
-	function (router, key, _v0) {
-		var node = _v0.a;
-		var name = _v0.b;
-		var actualNode = function () {
-			if (node.$ === 'Document') {
-				return _Browser_doc;
-			} else {
-				return _Browser_window;
-			}
-		}();
-		return A2(
-			$elm$core$Task$map,
-			function (value) {
-				return _Utils_Tuple2(key, value);
-			},
-			A3(
-				_Browser_on,
-				actualNode,
-				name,
-				function (event) {
-					return A2(
-						$elm$core$Platform$sendToSelf,
-						router,
-						A2($elm$browser$Browser$Events$Event, key, event));
-				}));
-	});
 var $elm$core$Dict$union = F2(
 	function (t1, t2) {
 		return A3($elm$core$Dict$foldl, $elm$core$Dict$insert, t2, t1);
 	});
-var $elm$browser$Browser$Events$onEffects = F3(
-	function (router, subs, state) {
-		var stepRight = F3(
-			function (key, sub, _v6) {
-				var deads = _v6.a;
-				var lives = _v6.b;
-				var news = _v6.c;
-				return _Utils_Tuple3(
-					deads,
-					lives,
-					A2(
-						$elm$core$List$cons,
-						A3($elm$browser$Browser$Events$spawn, router, key, sub),
-						news));
-			});
-		var stepLeft = F3(
-			function (_v4, pid, _v5) {
-				var deads = _v5.a;
-				var lives = _v5.b;
-				var news = _v5.c;
-				return _Utils_Tuple3(
-					A2($elm$core$List$cons, pid, deads),
-					lives,
-					news);
-			});
-		var stepBoth = F4(
-			function (key, pid, _v2, _v3) {
-				var deads = _v3.a;
-				var lives = _v3.b;
-				var news = _v3.c;
-				return _Utils_Tuple3(
-					deads,
-					A3($elm$core$Dict$insert, key, pid, lives),
-					news);
-			});
-		var newSubs = A2($elm$core$List$map, $elm$browser$Browser$Events$addKey, subs);
-		var _v0 = A6(
-			$elm$core$Dict$merge,
-			stepLeft,
-			stepBoth,
-			stepRight,
-			state.pids,
-			$elm$core$Dict$fromList(newSubs),
-			_Utils_Tuple3(_List_Nil, $elm$core$Dict$empty, _List_Nil));
-		var deadPids = _v0.a;
-		var livePids = _v0.b;
-		var makeNewPids = _v0.c;
+var $elm$core$Set$union = F2(
+	function (_v0, _v1) {
+		var dict1 = _v0.a;
+		var dict2 = _v1.a;
+		return $elm$core$Set$Set_elm_builtin(
+			A2($elm$core$Dict$union, dict1, dict2));
+	});
+var $author$project$UIExplorer$expandPage = F2(
+	function (page, expandedGroups) {
 		return A2(
-			$elm$core$Task$andThen,
-			function (pids) {
-				return $elm$core$Task$succeed(
-					A2(
-						$elm$browser$Browser$Events$State,
-						newSubs,
-						A2(
-							$elm$core$Dict$union,
-							livePids,
-							$elm$core$Dict$fromList(pids))));
-			},
-			A2(
-				$elm$core$Task$andThen,
-				function (_v1) {
-					return $elm$core$Task$sequence(makeNewPids);
-				},
-				$elm$core$Task$sequence(
-					A2($elm$core$List$map, $elm$core$Process$kill, deadPids))));
-	});
-var $elm$core$List$maybeCons = F3(
-	function (f, mx, xs) {
-		var _v0 = f(mx);
-		if (_v0.$ === 'Just') {
-			var x = _v0.a;
-			return A2($elm$core$List$cons, x, xs);
-		} else {
-			return xs;
-		}
-	});
-var $elm$core$List$filterMap = F2(
-	function (f, xs) {
-		return A3(
-			$elm$core$List$foldr,
-			$elm$core$List$maybeCons(f),
-			_List_Nil,
-			xs);
-	});
-var $elm$browser$Browser$Events$onSelfMsg = F3(
-	function (router, _v0, state) {
-		var key = _v0.key;
-		var event = _v0.event;
-		var toMessage = function (_v2) {
-			var subKey = _v2.a;
-			var _v3 = _v2.b;
-			var node = _v3.a;
-			var name = _v3.b;
-			var decoder = _v3.c;
-			return _Utils_eq(subKey, key) ? A2(_Browser_decodeEvent, decoder, event) : $elm$core$Maybe$Nothing;
-		};
-		var messages = A2($elm$core$List$filterMap, toMessage, state.subs);
-		return A2(
-			$elm$core$Task$andThen,
-			function (_v1) {
-				return $elm$core$Task$succeed(state);
-			},
-			$elm$core$Task$sequence(
+			$elm$core$Set$union,
+			expandedGroups,
+			$elm$core$Set$fromList(
 				A2(
 					$elm$core$List$map,
-					$elm$core$Platform$sendToApp(router),
-					messages)));
+					$author$project$UIExplorer$pageGroupToString,
+					A3(
+						$elm$core$List$foldr,
+						F2(
+							function (segment, state) {
+								return A2(
+									$elm$core$List$map,
+									function (a) {
+										return A2($elm$core$List$cons, segment, a);
+									},
+									A2($elm$core$List$cons, _List_Nil, state));
+							}),
+						_List_Nil,
+						$elm$core$List$reverse(
+							A2(
+								$elm$core$List$drop,
+								1,
+								$elm$core$List$reverse(page)))))));
 	});
-var $elm$browser$Browser$Events$subMap = F2(
-	function (func, _v0) {
-		var node = _v0.a;
-		var name = _v0.b;
-		var decoder = _v0.c;
-		return A3(
-			$elm$browser$Browser$Events$MySub,
-			node,
-			name,
-			A2($elm$json$Json$Decode$map, func, decoder));
-	});
-_Platform_effectManagers['Browser.Events'] = _Platform_createManager($elm$browser$Browser$Events$init, $elm$browser$Browser$Events$onEffects, $elm$browser$Browser$Events$onSelfMsg, 0, $elm$browser$Browser$Events$subMap);
-var $elm$browser$Browser$Events$subscription = _Platform_leaf('Browser.Events');
-var $elm$browser$Browser$Events$on = F3(
-	function (node, name, decoder) {
-		return $elm$browser$Browser$Events$subscription(
-			A3($elm$browser$Browser$Events$MySub, node, name, decoder));
-	});
-var $elm$browser$Browser$Events$onResize = function (func) {
-	return A3(
-		$elm$browser$Browser$Events$on,
-		$elm$browser$Browser$Events$Window,
-		'resize',
-		A2(
-			$elm$json$Json$Decode$field,
-			'target',
-			A3(
-				$elm$json$Json$Decode$map2,
-				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 $elm$core$List$singleton = function (value) {
-	return _List_fromArray(
-		[value]);
-};
-var $author$project$Stateless$ExampleSpecific = function (a) {
-	return {$: 'ExampleSpecific', a: a};
-};
-var $author$project$Data$Example$AppBar = function (a) {
-	return {$: 'AppBar', 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$Icon = function (a) {
-	return {$: 'Icon', a: a};
-};
-var $author$project$Data$Example$Layout = function (a) {
-	return {$: 'Layout', 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$ProgressIndicator = function (a) {
-	return {$: 'ProgressIndicator', a: a};
-};
-var $author$project$Data$Example$Select = function (a) {
-	return {$: 'Select', a: a};
-};
-var $author$project$Data$Example$Sheet = function (a) {
-	return {$: 'Sheet', a: a};
-};
-var $author$project$Data$Example$Snackbar = function (a) {
-	return {$: 'Snackbar', a: a};
-};
-var $author$project$Data$Example$SortTable = function (a) {
-	return {$: 'SortTable', a: a};
-};
-var $author$project$Data$Example$Switch = function (a) {
-	return {$: 'Switch', 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 $elm$core$Platform$Sub$none = $elm$core$Platform$Sub$batch(_List_Nil);
-var $author$project$Example$AppBar$subscriptions = function (_v0) {
-	return $elm$core$Platform$Sub$none;
-};
-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$Icon$subscriptions = function (_v0) {
-	return $elm$core$Platform$Sub$none;
-};
-var $author$project$Example$Layout$Resized = function (a) {
-	return {$: 'Resized', a: a};
-};
-var $author$project$Example$Layout$TimePassed = function (a) {
-	return {$: 'TimePassed', a: a};
-};
-var $author$project$Example$Layout$subscriptions = function (_v0) {
-	return $elm$core$Platform$Sub$batch(
-		_List_fromArray(
-			[
-				$elm$browser$Browser$Events$onResize(
-				F2(
-					function (h, w) {
-						return $author$project$Example$Layout$Resized(
-							{height: h, width: w});
-					})),
-				A2(
-				$elm$time$Time$every,
-				50,
-				$elm$core$Basics$always(
-					$author$project$Example$Layout$TimePassed(50)))
-			]));
-};
-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$ProgressIndicator$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$Sheet$subscriptions = function (_v0) {
-	return $elm$core$Platform$Sub$none;
-};
-var $author$project$Example$Snackbar$TimePassed = function (a) {
-	return {$: 'TimePassed', a: a};
-};
-var $author$project$Example$Snackbar$subscriptions = function (_v0) {
-	return A2(
-		$elm$time$Time$every,
-		50,
-		$elm$core$Basics$always(
-			$author$project$Example$Snackbar$TimePassed(50)));
-};
-var $author$project$Example$SortTable$subscriptions = function (_v0) {
-	return $elm$core$Platform$Sub$none;
-};
-var $author$project$Example$Switch$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 $elm$core$Platform$Cmd$batch = _Platform_batch;
+var $elm$browser$Browser$Dom$getViewport = _Browser_withWindow(_Browser_getViewport);
+var $elm$core$Platform$Cmd$map = _Platform_map;
 var $elm$core$Platform$Cmd$none = $elm$core$Platform$Cmd$batch(_List_Nil);
-var $author$project$Example$AppBar$update = F2(
-	function (msg, menu) {
-		switch (msg.$) {
-			case 'SetDesign':
-				var bool = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						menu,
-						{isMenuBar: bool}),
-					$elm$core$Platform$Cmd$none);
-			case 'SetSelected':
-				var _int = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						menu,
-						{selected: _int}),
-					$elm$core$Platform$Cmd$none);
-			default:
-				var string = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						menu,
-						{search: string}),
-					$elm$core$Platform$Cmd$none);
-		}
-	});
-var $elm$core$Basics$ge = _Utils_ge;
-var $author$project$Example$Button$update = F2(
-	function (msg, model) {
-		switch (msg.$) {
-			case 'Increase':
-				var _int = msg.a;
-				return _Utils_Tuple2(model + _int, $elm$core$Platform$Cmd$none);
-			case 'Decrease':
-				var _int = msg.a;
-				return _Utils_Tuple2(
-					((model - _int) >= 0) ? (model - _int) : model,
-					$elm$core$Platform$Cmd$none);
-			default:
-				return _Utils_Tuple2(0, $elm$core$Platform$Cmd$none);
-		}
-	});
-var $author$project$Example$Dialog$IsOpen = function (a) {
-	return {$: 'IsOpen', a: a};
-};
-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$Icon$update = F2(
-	function (msg, _v0) {
-		return _Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none);
-	});
-var $turboMaCk$queue$Queue$Queue = F2(
-	function (a, b) {
-		return {$: 'Queue', a: a, b: b};
-	});
-var $turboMaCk$queue$Queue$queue = F2(
-	function (fl, rl) {
-		if (!fl.b) {
-			return A2(
-				$turboMaCk$queue$Queue$Queue,
-				$elm$core$List$reverse(rl),
-				_List_Nil);
-		} else {
-			return A2($turboMaCk$queue$Queue$Queue, fl, rl);
-		}
-	});
-var $turboMaCk$queue$Queue$enqueue = F2(
-	function (a, _v0) {
-		var fl = _v0.a;
-		var rl = _v0.b;
-		return A2(
-			$turboMaCk$queue$Queue$queue,
-			fl,
-			A2($elm$core$List$cons, a, rl));
-	});
-var $author$project$Widget$Snackbar$insertFor = F3(
-	function (removeIn, a, model) {
-		var _v0 = model.current;
-		if (_v0.$ === 'Nothing') {
-			return _Utils_update(
-				model,
-				{
-					current: $elm$core$Maybe$Just(
-						_Utils_Tuple2(a, removeIn))
-				});
-		} else {
-			return _Utils_update(
-				model,
-				{
-					queue: A2(
-						$turboMaCk$queue$Queue$enqueue,
-						_Utils_Tuple2(a, removeIn),
-						model.queue)
-				});
-		}
-	});
-var $author$project$Widget$Snackbar$insert = $author$project$Widget$Snackbar$insertFor(10000);
-var $turboMaCk$queue$Queue$dequeue = function (_v0) {
-	var fl = _v0.a;
-	var rl = _v0.b;
-	if (!fl.b) {
-		return _Utils_Tuple2(
-			$elm$core$Maybe$Nothing,
-			A2($turboMaCk$queue$Queue$Queue, _List_Nil, _List_Nil));
+var $elm$core$List$head = function (list) {
+	if (list.b) {
+		var x = list.a;
+		var xs = list.b;
+		return $elm$core$Maybe$Just(x);
 	} else {
-		var head = fl.a;
-		var tail = fl.b;
-		return _Utils_Tuple2(
-			$elm$core$Maybe$Just(head),
-			A2($turboMaCk$queue$Queue$queue, tail, rl));
+		return $elm$core$Maybe$Nothing;
 	}
 };
-var $author$project$Widget$Snackbar$dismiss = function (model) {
-	return _Utils_update(
-		model,
-		{current: $elm$core$Maybe$Nothing});
-};
-var $elm$core$Maybe$map = F2(
-	function (f, maybe) {
-		if (maybe.$ === 'Just') {
-			var value = maybe.a;
-			return $elm$core$Maybe$Just(
-				f(value));
-		} else {
+var $elm$url$Url$Parser$State = F5(
+	function (visited, unvisited, params, frag, value) {
+		return {frag: frag, params: params, unvisited: unvisited, value: value, visited: visited};
+	});
+var $elm$url$Url$Parser$getFirstMatch = function (states) {
+	getFirstMatch:
+	while (true) {
+		if (!states.b) {
 			return $elm$core$Maybe$Nothing;
-		}
-	});
-var $elm$core$Tuple$mapSecond = F2(
-	function (func, _v0) {
-		var x = _v0.a;
-		var y = _v0.b;
-		return _Utils_Tuple2(
-			x,
-			func(y));
-	});
-var $elm$core$Basics$negate = function (n) {
-	return -n;
-};
-var $author$project$Widget$Snackbar$timePassed = F2(
-	function (ms, model) {
-		var _v0 = model.current;
-		if (_v0.$ === 'Nothing') {
-			var _v1 = $turboMaCk$queue$Queue$dequeue(model.queue);
-			var c = _v1.a;
-			var queue = _v1.b;
-			return _Utils_update(
-				model,
-				{current: c, queue: queue});
 		} else {
-			var _v2 = _v0.a;
-			var removeIn = _v2.b;
-			return (_Utils_cmp(removeIn, ms) < 1) ? $author$project$Widget$Snackbar$dismiss(model) : _Utils_update(
-				model,
-				{
-					current: A2(
-						$elm$core$Maybe$map,
-						$elm$core$Tuple$mapSecond(
-							$elm$core$Basics$add(-ms)),
-						model.current)
-				});
+			var state = states.a;
+			var rest = states.b;
+			var _v1 = state.unvisited;
+			if (!_v1.b) {
+				return $elm$core$Maybe$Just(state.value);
+			} else {
+				if ((_v1.a === '') && (!_v1.b.b)) {
+					return $elm$core$Maybe$Just(state.value);
+				} else {
+					var $temp$states = rest;
+					states = $temp$states;
+					continue getFirstMatch;
+				}
+			}
 		}
-	});
-var $author$project$Example$Layout$update = F2(
-	function (msg, model) {
-		switch (msg.$) {
-			case 'ChangedSidebar':
-				var maybePart = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{active: maybePart}),
-					$elm$core$Platform$Cmd$none);
-			case 'Resized':
-				var window = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{window: window}),
-					$elm$core$Platform$Cmd$none);
-			case 'SetSelected':
-				var _int = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{selected: _int}),
-					$elm$core$Platform$Cmd$none);
-			case 'AddSnackbar':
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							snackbar: A2($author$project$Widget$Snackbar$insert, 'This is a message', model.snackbar)
-						}),
-					$elm$core$Platform$Cmd$none);
-			case 'ShowDialog':
-				var bool = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{showDialog: bool}),
-					$elm$core$Platform$Cmd$none);
-			case 'SetSearchText':
-				var maybeString = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{searchText: maybeString}),
-					$elm$core$Platform$Cmd$none);
-			default:
-				var sec = msg.a;
-				return _Utils_Tuple2(
-					function () {
-						var _v1 = model.active;
-						_v1$2:
-						while (true) {
-							if (_v1.$ === 'Just') {
-								switch (_v1.a.$) {
-									case 'LeftSheet':
-										var _v2 = _v1.a;
-										return model;
-									case 'RightSheet':
-										var _v3 = _v1.a;
-										return model;
-									default:
-										break _v1$2;
-								}
-							} else {
-								break _v1$2;
-							}
-						}
-						return _Utils_update(
-							model,
-							{
-								snackbar: A2($author$project$Widget$Snackbar$timePassed, sec, model.snackbar)
-							});
-					}(),
-					$elm$core$Platform$Cmd$none);
-		}
-	});
-var $author$project$Example$List$IsExpanded = function (a) {
-	return {$: 'IsExpanded', a: a};
+	}
 };
-var $author$project$Example$List$update = F2(
-	function (msg, _v0) {
-		var bool = msg.a;
-		return _Utils_Tuple2(
-			$author$project$Example$List$IsExpanded(bool),
-			$elm$core$Platform$Cmd$none);
-	});
-var $author$project$Example$Modal$IsEnabled = function (a) {
-	return {$: 'IsEnabled', a: a};
-};
-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 $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$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);
-		if (_v0.$ === 'Just') {
-			return true;
+var $elm$url$Url$Parser$removeFinalEmpty = function (segments) {
+	if (!segments.b) {
+		return _List_Nil;
+	} else {
+		if ((segments.a === '') && (!segments.b.b)) {
+			return _List_Nil;
 		} else {
-			return false;
+			var segment = segments.a;
+			var rest = segments.b;
+			return A2(
+				$elm$core$List$cons,
+				segment,
+				$elm$url$Url$Parser$removeFinalEmpty(rest));
+		}
+	}
+};
+var $elm$url$Url$Parser$preparePath = function (path) {
+	var _v0 = A2($elm$core$String$split, '/', path);
+	if (_v0.b && (_v0.a === '')) {
+		var segments = _v0.b;
+		return $elm$url$Url$Parser$removeFinalEmpty(segments);
+	} else {
+		var segments = _v0;
+		return $elm$url$Url$Parser$removeFinalEmpty(segments);
+	}
+};
+var $elm$url$Url$Parser$addToParametersHelp = F2(
+	function (value, maybeList) {
+		if (maybeList.$ === 'Nothing') {
+			return $elm$core$Maybe$Just(
+				_List_fromArray(
+					[value]));
+		} else {
+			var list = maybeList.a;
+			return $elm$core$Maybe$Just(
+				A2($elm$core$List$cons, value, list));
 		}
 	});
-var $elm$core$Set$member = F2(
-	function (key, _v0) {
-		var dict = _v0.a;
-		return A2($elm$core$Dict$member, key, dict);
+var $elm$url$Url$percentDecode = _Url_percentDecode;
+var $elm$core$Dict$get = F2(
+	function (targetKey, dict) {
+		get:
+		while (true) {
+			if (dict.$ === 'RBEmpty_elm_builtin') {
+				return $elm$core$Maybe$Nothing;
+			} else {
+				var key = dict.b;
+				var value = dict.c;
+				var left = dict.d;
+				var right = dict.e;
+				var _v1 = A2($elm$core$Basics$compare, targetKey, key);
+				switch (_v1.$) {
+					case 'LT':
+						var $temp$targetKey = targetKey,
+							$temp$dict = left;
+						targetKey = $temp$targetKey;
+						dict = $temp$dict;
+						continue get;
+					case 'EQ':
+						return $elm$core$Maybe$Just(value);
+					default:
+						var $temp$targetKey = targetKey,
+							$temp$dict = right;
+						targetKey = $temp$targetKey;
+						dict = $temp$dict;
+						continue get;
+				}
+			}
+		}
 	});
 var $elm$core$Dict$getMin = function (dict) {
 	getMin:
@@ -6686,665 +6016,665 @@ var $elm$core$Dict$remove = F2(
 			return x;
 		}
 	});
-var $elm$core$Set$remove = F2(
-	function (key, _v0) {
-		var dict = _v0.a;
-		return $elm$core$Set$Set_elm_builtin(
-			A2($elm$core$Dict$remove, key, dict));
-	});
-var $author$project$Example$MultiSelect$update = F2(
-	function (msg, _v0) {
-		var selected = _v0.a;
-		var _int = msg.a;
-		return _Utils_Tuple2(
-			$author$project$Example$MultiSelect$Selected(
-				(A2($elm$core$Set$member, _int, selected) ? $elm$core$Set$remove(_int) : $elm$core$Set$insert(_int))(selected)),
-			$elm$core$Platform$Cmd$none);
-	});
-var $author$project$Example$ProgressIndicator$MaybeProgress = function (a) {
-	return {$: 'MaybeProgress', a: a};
-};
-var $author$project$Example$ProgressIndicator$update = F2(
-	function (msg, _v0) {
-		var maybeFloat = msg.a;
-		return _Utils_Tuple2(
-			$author$project$Example$ProgressIndicator$MaybeProgress(maybeFloat),
-			$elm$core$Platform$Cmd$none);
-	});
-var $author$project$Example$Select$Selected = function (a) {
-	return {$: 'Selected', a: a};
-};
-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 $author$project$Example$Sheet$IsEnabled = function (a) {
-	return {$: 'IsEnabled', a: a};
-};
-var $author$project$Example$Sheet$update = F2(
-	function (msg, _v0) {
-		var bool = msg.a;
-		return _Utils_Tuple2(
-			$author$project$Example$Sheet$IsEnabled(bool),
-			$elm$core$Platform$Cmd$none);
-	});
-var $author$project$Example$Snackbar$update = F2(
-	function (msg, model) {
-		if (msg.$ === 'TimePassed') {
-			var _int = msg.a;
-			return _Utils_Tuple2(
-				A2($author$project$Widget$Snackbar$timePassed, _int, model),
-				$elm$core$Platform$Cmd$none);
+var $elm$core$Dict$update = F3(
+	function (targetKey, alter, dictionary) {
+		var _v0 = alter(
+			A2($elm$core$Dict$get, targetKey, dictionary));
+		if (_v0.$ === 'Just') {
+			var value = _v0.a;
+			return A3($elm$core$Dict$insert, targetKey, value, dictionary);
 		} else {
-			var snack = msg.a;
-			return _Utils_Tuple2(
-				A2($author$project$Widget$Snackbar$insert, snack, model),
-				$elm$core$Platform$Cmd$none);
+			return A2($elm$core$Dict$remove, targetKey, dictionary);
 		}
 	});
-var $elm$core$Basics$not = _Basics_not;
-var $author$project$Example$SortTable$update = F2(
-	function (msg, model) {
-		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$Switch$IsButtonEnabled = function (a) {
-	return {$: 'IsButtonEnabled', a: a};
-};
-var $author$project$Example$Switch$update = F2(
-	function (msg, _v0) {
-		var buttonEnabled = _v0.a;
-		return _Utils_Tuple2(
-			$author$project$Example$Switch$IsButtonEnabled(!buttonEnabled),
-			$elm$core$Platform$Cmd$none);
-	});
-var $author$project$Example$Tab$Selected = function (a) {
-	return {$: 'Selected', a: a};
-};
-var $author$project$Example$Tab$update = F2(
-	function (msg, _v0) {
-		var _int = msg.a;
-		return _Utils_Tuple2(
-			$author$project$Example$Tab$Selected(
-				$elm$core$Maybe$Just(_int)),
-			$elm$core$Platform$Cmd$none);
-	});
-var $author$project$Example$TextInput$update = F2(
-	function (msg, model) {
-		if (msg.$ === 'ToggleTextInputChip') {
-			var string = msg.a;
-			return _Utils_Tuple2(
-				_Utils_update(
-					model,
-					{
-						chipTextInput: (A2($elm$core$Set$member, string, model.chipTextInput) ? $elm$core$Set$remove(string) : $elm$core$Set$insert(string))(model.chipTextInput)
-					}),
-				$elm$core$Platform$Cmd$none);
+var $elm$url$Url$Parser$addParam = F2(
+	function (segment, dict) {
+		var _v0 = A2($elm$core$String$split, '=', segment);
+		if ((_v0.b && _v0.b.b) && (!_v0.b.b.b)) {
+			var rawKey = _v0.a;
+			var _v1 = _v0.b;
+			var rawValue = _v1.a;
+			var _v2 = $elm$url$Url$percentDecode(rawKey);
+			if (_v2.$ === 'Nothing') {
+				return dict;
+			} else {
+				var key = _v2.a;
+				var _v3 = $elm$url$Url$percentDecode(rawValue);
+				if (_v3.$ === 'Nothing') {
+					return dict;
+				} else {
+					var value = _v3.a;
+					return A3(
+						$elm$core$Dict$update,
+						key,
+						$elm$url$Url$Parser$addToParametersHelp(value),
+						dict);
+				}
+			}
 		} else {
-			var string = msg.a;
-			return _Utils_Tuple2(
-				_Utils_update(
-					model,
-					{textInput: string}),
-				$elm$core$Platform$Cmd$none);
+			return dict;
 		}
 	});
-var $author$project$Data$Example$upgradeRecord = {
-	appBar: {
-		from: function ($) {
-			return $.appBar;
-		},
-		msgMapper: $author$project$Data$Example$AppBar,
-		subscriptionsFun: $author$project$Example$AppBar$subscriptions,
-		to: F2(
-			function (model, a) {
-				return _Utils_update(
-					model,
-					{appBar: a});
-			}),
-		updateFun: $author$project$Example$AppBar$update
-	},
-	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
-	},
-	icon: {
-		from: function ($) {
-			return $.icon;
-		},
-		msgMapper: $author$project$Data$Example$Icon,
-		subscriptionsFun: $author$project$Example$Icon$subscriptions,
-		to: F2(
-			function (model, a) {
-				return _Utils_update(
-					model,
-					{icon: a});
-			}),
-		updateFun: $author$project$Example$Icon$update
-	},
-	layout: {
-		from: function ($) {
-			return $.layout;
-		},
-		msgMapper: $author$project$Data$Example$Layout,
-		subscriptionsFun: $author$project$Example$Layout$subscriptions,
-		to: F2(
-			function (model, a) {
-				return _Utils_update(
-					model,
-					{layout: a});
-			}),
-		updateFun: $author$project$Example$Layout$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
-	},
-	progressIndicator: {
-		from: function ($) {
-			return $.progressIndicator;
-		},
-		msgMapper: $author$project$Data$Example$ProgressIndicator,
-		subscriptionsFun: $author$project$Example$ProgressIndicator$subscriptions,
-		to: F2(
-			function (model, a) {
-				return _Utils_update(
-					model,
-					{progressIndicator: a});
-			}),
-		updateFun: $author$project$Example$ProgressIndicator$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
-	},
-	sheet: {
-		from: function ($) {
-			return $.sheet;
-		},
-		msgMapper: $author$project$Data$Example$Sheet,
-		subscriptionsFun: $author$project$Example$Sheet$subscriptions,
-		to: F2(
-			function (model, a) {
-				return _Utils_update(
-					model,
-					{sheet: a});
-			}),
-		updateFun: $author$project$Example$Sheet$update
-	},
-	snackbar: {
-		from: function ($) {
-			return $.snackbar;
-		},
-		msgMapper: $author$project$Data$Example$Snackbar,
-		subscriptionsFun: $author$project$Example$Snackbar$subscriptions,
-		to: F2(
-			function (model, a) {
-				return _Utils_update(
-					model,
-					{snackbar: a});
-			}),
-		updateFun: $author$project$Example$Snackbar$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
-	},
-	_switch: {
-		from: function ($) {
-			return $._switch;
-		},
-		msgMapper: $author$project$Data$Example$Switch,
-		subscriptionsFun: $author$project$Example$Switch$subscriptions,
-		to: F2(
-			function (model, a) {
-				return _Utils_update(
-					model,
-					{_switch: a});
-			}),
-		updateFun: $author$project$Example$Switch$update
-	},
-	tab: {
-		from: function ($) {
-			return $.tab;
-		},
-		msgMapper: $author$project$Data$Example$Tab,
-		subscriptionsFun: $author$project$Example$Tab$subscriptions,
-		to: F2(
-			function (model, a) {
-				return _Utils_update(
-					model,
-					{tab: a});
-			}),
-		updateFun: $author$project$Example$Tab$update
-	},
-	textInput: {
-		from: function ($) {
-			return $.textInput;
-		},
-		msgMapper: $author$project$Data$Example$TextInput,
-		subscriptionsFun: $author$project$Example$TextInput$subscriptions,
-		to: F2(
-			function (model, a) {
-				return _Utils_update(
-					model,
-					{textInput: a});
-			}),
-		updateFun: $author$project$Example$TextInput$update
+var $elm$url$Url$Parser$prepareQuery = function (maybeQuery) {
+	if (maybeQuery.$ === 'Nothing') {
+		return $elm$core$Dict$empty;
+	} else {
+		var qry = maybeQuery.a;
+		return A3(
+			$elm$core$List$foldr,
+			$elm$url$Url$Parser$addParam,
+			$elm$core$Dict$empty,
+			A2($elm$core$String$split, '&', qry));
 	}
 };
-var $author$project$Data$Example$subscriptions = function (model) {
-	var subFun = function (_v0) {
-		var from = _v0.from;
-		var msgMapper = _v0.msgMapper;
-		var subscriptionsFun = _v0.subscriptionsFun;
-		return A2(
-			$elm$core$Platform$Sub$map,
-			msgMapper,
-			subscriptionsFun(
-				from(model)));
-	};
-	return $elm$core$Platform$Sub$batch(
-		_List_fromArray(
-			[
-				subFun($author$project$Data$Example$upgradeRecord.button),
-				subFun($author$project$Data$Example$upgradeRecord._switch),
-				subFun($author$project$Data$Example$upgradeRecord.select),
-				subFun($author$project$Data$Example$upgradeRecord.multiSelect),
-				subFun($author$project$Data$Example$upgradeRecord.tab),
-				subFun($author$project$Data$Example$upgradeRecord.sortTable),
-				subFun($author$project$Data$Example$upgradeRecord.modal),
-				subFun($author$project$Data$Example$upgradeRecord.dialog),
-				subFun($author$project$Data$Example$upgradeRecord.textInput),
-				subFun($author$project$Data$Example$upgradeRecord.list),
-				subFun($author$project$Data$Example$upgradeRecord.progressIndicator),
-				subFun($author$project$Data$Example$upgradeRecord.icon),
-				subFun($author$project$Data$Example$upgradeRecord.sheet),
-				subFun($author$project$Data$Example$upgradeRecord.appBar),
-				subFun($author$project$Data$Example$upgradeRecord.layout),
-				subFun($author$project$Data$Example$upgradeRecord.snackbar)
-			]));
+var $elm$url$Url$Parser$parse = F2(
+	function (_v0, url) {
+		var parser = _v0.a;
+		return $elm$url$Url$Parser$getFirstMatch(
+			parser(
+				A5(
+					$elm$url$Url$Parser$State,
+					_List_Nil,
+					$elm$url$Url$Parser$preparePath(url.path),
+					$elm$url$Url$Parser$prepareQuery(url.query),
+					url.fragment,
+					$elm$core$Basics$identity)));
+	});
+var $elm$browser$Browser$Navigation$replaceUrl = _Browser_replaceUrl;
+var $elm$url$Url$Parser$Parser = function (a) {
+	return {$: 'Parser', a: a};
 };
-var $author$project$Stateless$subscriptions = function (model) {
-	return A2(
-		$elm$core$Platform$Sub$map,
-		$author$project$Stateless$ExampleSpecific,
-		$author$project$Data$Example$subscriptions(model.example));
+var $elm$url$Url$Parser$mapState = F2(
+	function (func, _v0) {
+		var visited = _v0.visited;
+		var unvisited = _v0.unvisited;
+		var params = _v0.params;
+		var frag = _v0.frag;
+		var value = _v0.value;
+		return A5(
+			$elm$url$Url$Parser$State,
+			visited,
+			unvisited,
+			params,
+			frag,
+			func(value));
+	});
+var $elm$url$Url$Parser$map = F2(
+	function (subValue, _v0) {
+		var parseArg = _v0.a;
+		return $elm$url$Url$Parser$Parser(
+			function (_v1) {
+				var visited = _v1.visited;
+				var unvisited = _v1.unvisited;
+				var params = _v1.params;
+				var frag = _v1.frag;
+				var value = _v1.value;
+				return A2(
+					$elm$core$List$map,
+					$elm$url$Url$Parser$mapState(value),
+					parseArg(
+						A5($elm$url$Url$Parser$State, visited, unvisited, params, frag, subValue)));
+			});
+	});
+var $elm$core$List$append = F2(
+	function (xs, ys) {
+		if (!ys.b) {
+			return xs;
+		} else {
+			return A3($elm$core$List$foldr, $elm$core$List$cons, ys, xs);
+		}
+	});
+var $elm$core$List$concat = function (lists) {
+	return A3($elm$core$List$foldr, $elm$core$List$append, _List_Nil, lists);
 };
-var $author$project$Main$subscriptions = function (model) {
-	var ms = 2000;
-	return A2(
-		$elm$core$Platform$Sub$map,
-		$author$project$Main$LoadedSpecific,
-		$elm$core$Platform$Sub$batch(
-			_Utils_ap(
-				_List_fromArray(
+var $elm$core$List$concatMap = F2(
+	function (f, list) {
+		return $elm$core$List$concat(
+			A2($elm$core$List$map, f, list));
+	});
+var $elm$url$Url$Parser$oneOf = function (parsers) {
+	return $elm$url$Url$Parser$Parser(
+		function (state) {
+			return A2(
+				$elm$core$List$concatMap,
+				function (_v0) {
+					var parser = _v0.a;
+					return parser(state);
+				},
+				parsers);
+		});
+};
+var $elm$url$Url$Parser$s = function (str) {
+	return $elm$url$Url$Parser$Parser(
+		function (_v0) {
+			var visited = _v0.visited;
+			var unvisited = _v0.unvisited;
+			var params = _v0.params;
+			var frag = _v0.frag;
+			var value = _v0.value;
+			if (!unvisited.b) {
+				return _List_Nil;
+			} else {
+				var next = unvisited.a;
+				var rest = unvisited.b;
+				return _Utils_eq(next, str) ? _List_fromArray(
 					[
+						A5(
+						$elm$url$Url$Parser$State,
+						A2($elm$core$List$cons, next, visited),
+						rest,
+						params,
+						frag,
+						value)
+					]) : _List_Nil;
+			}
+		});
+};
+var $elm$url$Url$Parser$slash = F2(
+	function (_v0, _v1) {
+		var parseBefore = _v0.a;
+		var parseAfter = _v1.a;
+		return $elm$url$Url$Parser$Parser(
+			function (state) {
+				return A2(
+					$elm$core$List$concatMap,
+					parseAfter,
+					parseBefore(state));
+			});
+	});
+var $elm$url$Url$Parser$top = $elm$url$Url$Parser$Parser(
+	function (state) {
+		return _List_fromArray(
+			[state]);
+	});
+var $author$project$UIExplorer$urlParser = F2(
+	function (_v0, rootPath) {
+		var pages = _v0.a;
+		var pathParser = function (path) {
+			return A3(
+				$elm$core$List$foldl,
+				F2(
+					function (segment, state) {
+						return A2(
+							$elm$url$Url$Parser$slash,
+							state,
+							$elm$url$Url$Parser$s(
+								$elm$url$Url$percentEncode(segment)));
+					}),
+				$elm$url$Url$Parser$top,
+				path);
+		};
+		var allPagePaths = A2(
+			$elm$core$List$map,
+			function (path) {
+				return A2(
+					$elm$url$Url$Parser$map,
+					$elm$core$Maybe$Just(path),
+					pathParser(
+						_Utils_ap(rootPath, path)));
+			},
+			A2(
+				$elm$core$List$map,
+				function (_v1) {
+					var pageId = _v1.pageId;
+					var pageGroup = _v1.pageGroup;
+					return _Utils_ap(
+						pageGroup,
+						_List_fromArray(
+							[pageId]));
+				},
+				pages.ids));
+		return $elm$url$Url$Parser$oneOf(
+			A2(
+				$elm$core$List$cons,
+				A2($elm$url$Url$Parser$map, $elm$core$Maybe$Nothing, $elm$url$Url$Parser$top),
+				A2(
+					$elm$core$List$cons,
+					A2(
+						$elm$url$Url$Parser$map,
+						$elm$core$Maybe$Nothing,
+						pathParser(rootPath)),
+					allPagePaths)));
+	});
+var $author$project$UIExplorer$pageFromUrl = F4(
+	function (_v0, rootPath, key, url) {
+		var pages = _v0.a;
+		var _v1 = A2(
+			$elm$url$Url$Parser$parse,
+			A2(
+				$author$project$UIExplorer$urlParser,
+				$author$project$UIExplorer$PageBuilder(pages),
+				rootPath),
+			url);
+		if (_v1.$ === 'Just') {
+			if (_v1.a.$ === 'Nothing') {
+				var _v2 = _v1.a;
+				var _v3 = $elm$core$List$head(
+					$elm$core$List$reverse(pages.ids));
+				if (_v3.$ === 'Just') {
+					var pageId = _v3.a.pageId;
+					var pageGroup = _v3.a.pageGroup;
+					return _Utils_Tuple2(
+						_List_Nil,
 						A2(
-						$elm$time$Time$every,
-						ms,
-						$elm$core$Basics$always(
-							$author$project$Main$TimePassed(ms))),
-						$elm$browser$Browser$Events$onResize(
-						F2(
-							function (h, w) {
-								return $author$project$Main$Resized(
-									{height: h, width: w});
-							}))
-					]),
-				function () {
-					if (model.$ === 'Loading') {
-						return _List_Nil;
-					} else {
-						var stateless = model.a.stateless;
-						return $elm$core$List$singleton(
+							$elm$browser$Browser$Navigation$replaceUrl,
+							key,
 							A2(
-								$elm$core$Platform$Sub$map,
-								$author$project$Main$StatelessSpecific,
-								$author$project$Stateless$subscriptions(stateless)));
-					}
-				}())));
+								$author$project$UIExplorer$uiUrl,
+								rootPath,
+								_Utils_ap(
+									pageGroup,
+									_List_fromArray(
+										[pageId])))));
+				} else {
+					return _Utils_Tuple2(_List_Nil, $elm$core$Platform$Cmd$none);
+				}
+			} else {
+				var page = _v1.a.a;
+				return _Utils_Tuple2(page, $elm$core$Platform$Cmd$none);
+			}
+		} else {
+			return _Utils_Tuple2(_List_Nil, $elm$core$Platform$Cmd$none);
+		}
+	});
+var $ianmackenzie$elm_units$Quantity$Quantity = function (a) {
+	return {$: 'Quantity', a: a};
 };
-var $author$project$Main$Loaded = function (a) {
-	return {$: 'Loaded', a: a};
+var $ianmackenzie$elm_units$Pixels$pixels = function (numPixels) {
+	return $ianmackenzie$elm_units$Quantity$Quantity(numPixels);
 };
-var $author$project$Main$Idle = {$: 'Idle'};
-var $author$project$Data$Theme$Material = {$: 'Material'};
-var $author$project$Main$UpdateScrollingNav = function (a) {
-	return {$: 'UpdateScrollingNav', a: a};
-};
-var $author$project$Data$Example$AppBarExample = {$: 'AppBarExample'};
-var $author$project$Data$Example$ButtonExample = {$: 'ButtonExample'};
-var $author$project$Data$Example$DialogExample = {$: 'DialogExample'};
-var $author$project$Data$Example$IconExample = {$: 'IconExample'};
-var $author$project$Data$Example$LayoutExample = {$: 'LayoutExample'};
-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$ProgressIndicatorExample = {$: 'ProgressIndicatorExample'};
-var $author$project$Data$Example$SelectExample = {$: 'SelectExample'};
-var $author$project$Data$Example$SheetExample = {$: 'SheetExample'};
-var $author$project$Data$Example$SnackbarExample = {$: 'SnackbarExample'};
-var $author$project$Data$Example$SortTableExample = {$: 'SortTableExample'};
-var $author$project$Data$Example$SwitchExample = {$: 'SwitchExample'};
-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 'SwitchExample':
-			return 'Switch';
-		case 'SelectExample':
-			return 'Select';
-		case 'MultiSelectExample':
-			return 'Multi Select';
-		case 'TabExample':
-			return 'Tab';
-		case 'SortTableExample':
-			return 'SortTable';
-		case 'ModalExample':
-			return 'Modal';
-		case 'DialogExample':
-			return 'Dialog';
-		case 'TextInputExample':
-			return 'TextInput';
-		case 'ListExample':
-			return 'List';
-		case 'ProgressIndicatorExample':
-			return 'Progress Indicator';
-		case 'IconExample':
-			return 'Icon';
-		case 'SheetExample':
-			return 'Sheet';
-		case 'AppBarExample':
-			return 'App Bar';
-		case 'LayoutExample':
-			return 'Layout';
-		default:
-			return 'Snackbar';
+var $elm$core$Basics$round = _Basics_round;
+var $author$project$UIExplorer$init = F5(
+	function (config, _v0, flagsJson, url, key) {
+		var pages = _v0.a;
+		var _v1 = A4(
+			$author$project$UIExplorer$pageFromUrl,
+			$author$project$UIExplorer$PageBuilder(pages),
+			config.relativeUrlPath,
+			key,
+			url);
+		var page = _v1.a;
+		var navigationCmd = _v1.b;
+		var _v2 = A2($elm$json$Json$Decode$decodeValue, config.flagsDecoder, flagsJson);
+		if (_v2.$ === 'Ok') {
+			var flags = _v2.a;
+			var _v3 = pages.init(flags);
+			var pageModels = _v3.a;
+			var pageCmds = _v3.b;
+			return _Utils_Tuple2(
+				$author$project$UIExplorer$FlagsParsed(
+					{
+						colorBlindOption: $elm$core$Maybe$Nothing,
+						darkThemeEnabled: false,
+						expandColorBlindOptions: false,
+						expandPageSizeOptions: false,
+						expandedGroups: A2($author$project$UIExplorer$expandPage, page, $elm$core$Set$empty),
+						flags: flags,
+						key: key,
+						minimizeSidebar: false,
+						page: page,
+						pageModel: pageModels,
+						pageSizeOption: $author$project$UIExplorer$Native,
+						searchText: '',
+						windowSize: {
+							height: $ianmackenzie$elm_units$Pixels$pixels(1080),
+							width: $ianmackenzie$elm_units$Pixels$pixels(1920)
+						}
+					}),
+				$elm$core$Platform$Cmd$batch(
+					_List_fromArray(
+						[
+							navigationCmd,
+							A2(
+							$elm$core$Task$perform,
+							$author$project$UIExplorer$WindowResized,
+							A2(
+								$elm$core$Task$map,
+								function (_v4) {
+									var viewport = _v4.viewport;
+									return {
+										height: $ianmackenzie$elm_units$Pixels$pixels(
+											$elm$core$Basics$round(viewport.height)),
+										width: $ianmackenzie$elm_units$Pixels$pixels(
+											$elm$core$Basics$round(viewport.width))
+									};
+								},
+								$elm$browser$Browser$Dom$getViewport)),
+							A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$PageMsg, pageCmds)
+						])));
+		} else {
+			var error = _v2.a;
+			return _Utils_Tuple2(
+				$author$project$UIExplorer$FlagsDidNotParse(
+					$elm$json$Json$Decode$errorToString(error)),
+				$elm$core$Platform$Cmd$none);
+		}
+	});
+var $elm$core$Platform$Sub$batch = _Platform_batch;
+var $elm$core$Platform$Sub$map = _Platform_map;
+var $elm$core$Platform$Sub$none = $elm$core$Platform$Sub$batch(_List_Nil);
+var $elm$browser$Browser$Events$Window = {$: 'Window'};
+var $elm$json$Json$Decode$field = _Json_decodeField;
+var $elm$json$Json$Decode$int = _Json_decodeInt;
+var $elm$browser$Browser$Events$MySub = F3(
+	function (a, b, c) {
+		return {$: 'MySub', a: a, b: b, c: c};
+	});
+var $elm$browser$Browser$Events$State = F2(
+	function (subs, pids) {
+		return {pids: pids, subs: subs};
+	});
+var $elm$browser$Browser$Events$init = $elm$core$Task$succeed(
+	A2($elm$browser$Browser$Events$State, _List_Nil, $elm$core$Dict$empty));
+var $elm$browser$Browser$Events$nodeToKey = function (node) {
+	if (node.$ === 'Document') {
+		return 'd_';
+	} else {
+		return 'w_';
 	}
 };
-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$SwitchExample, $author$project$Data$Example$SelectExample, $author$project$Data$Example$MultiSelectExample, $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, $author$project$Data$Example$ProgressIndicatorExample, $author$project$Data$Example$IconExample, $author$project$Data$Example$SheetExample, $author$project$Data$Example$AppBarExample, $author$project$Data$Example$LayoutExample, $author$project$Data$Example$SnackbarExample]));
-var $turboMaCk$any_set$Set$Any$AnySet = function (a) {
-	return {$: 'AnySet', a: a};
-};
-var $turboMaCk$any_dict$Dict$Any$AnyDict = function (a) {
-	return {$: 'AnyDict', a: a};
-};
-var $turboMaCk$any_dict$Dict$Any$empty = function (toKey) {
-	return $turboMaCk$any_dict$Dict$Any$AnyDict(
-		{dict: $elm$core$Dict$empty, toKey: toKey});
-};
-var $turboMaCk$any_set$Set$Any$empty = A2($elm$core$Basics$composeL, $turboMaCk$any_set$Set$Any$AnySet, $turboMaCk$any_dict$Dict$Any$empty);
-var $author$project$Data$Example$fromString = function (string) {
-	switch (string) {
-		case 'Button':
-			return $elm$core$Maybe$Just($author$project$Data$Example$ButtonExample);
-		case 'Switch':
-			return $elm$core$Maybe$Just($author$project$Data$Example$SwitchExample);
-		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 '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);
-		case 'Progress Indicator':
-			return $elm$core$Maybe$Just($author$project$Data$Example$ProgressIndicatorExample);
-		case 'Icon':
-			return $elm$core$Maybe$Just($author$project$Data$Example$IconExample);
-		case 'Sheet':
-			return $elm$core$Maybe$Just($author$project$Data$Example$SheetExample);
-		case 'App Bar':
-			return $elm$core$Maybe$Just($author$project$Data$Example$AppBarExample);
-		case 'Layout':
-			return $elm$core$Maybe$Just($author$project$Data$Example$LayoutExample);
-		case 'Snackbar':
-			return $elm$core$Maybe$Just($author$project$Data$Example$SnackbarExample);
-		default:
-			return $elm$core$Maybe$Nothing;
-	}
-};
-var $author$project$Example$AppBar$init = _Utils_Tuple2(
-	{isMenuBar: true, search: '', selected: 0},
-	$elm$core$Platform$Cmd$none);
-var $author$project$Example$Button$init = _Utils_Tuple2(0, $elm$core$Platform$Cmd$none);
-var $author$project$Example$Dialog$init = _Utils_Tuple2(
-	$author$project$Example$Dialog$IsOpen(true),
-	$elm$core$Platform$Cmd$none);
-var $author$project$Example$Icon$init = _Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none);
-var $author$project$Example$Layout$RightSheet = {$: 'RightSheet'};
-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$Example$Layout$init = _Utils_Tuple2(
-	{
-		active: $elm$core$Maybe$Just($author$project$Example$Layout$RightSheet),
-		searchText: '',
-		selected: 0,
-		showDialog: false,
-		snackbar: $author$project$Widget$Snackbar$init,
-		window: {height: 200, width: 400}
-	},
-	$elm$core$Platform$Cmd$none);
-var $author$project$Example$List$init = _Utils_Tuple2(
-	$author$project$Example$List$IsExpanded(false),
-	$elm$core$Platform$Cmd$none);
-var $author$project$Example$Modal$init = _Utils_Tuple2(
-	$author$project$Example$Modal$IsEnabled(true),
-	$elm$core$Platform$Cmd$none);
-var $elm$core$Set$empty = $elm$core$Set$Set_elm_builtin($elm$core$Dict$empty);
-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$ProgressIndicator$init = _Utils_Tuple2(
-	$author$project$Example$ProgressIndicator$MaybeProgress($elm$core$Maybe$Nothing),
-	$elm$core$Platform$Cmd$none);
-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$Sheet$init = _Utils_Tuple2(
-	$author$project$Example$Sheet$IsEnabled(true),
-	$elm$core$Platform$Cmd$none);
-var $author$project$Example$Snackbar$init = _Utils_Tuple2($author$project$Widget$Snackbar$init, $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$Switch$init = _Utils_Tuple2(
-	$author$project$Example$Switch$IsButtonEnabled(false),
-	$elm$core$Platform$Cmd$none);
-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$Switch$init;
-	var switchModel = _v2.a;
-	var switchMsg = _v2.b;
-	var _v3 = $author$project$Example$SortTable$init;
-	var sortTableModel = _v3.a;
-	var sortTableMsg = _v3.b;
-	var _v4 = $author$project$Example$Snackbar$init;
-	var snackbarModel = _v4.a;
-	var snackbarMsg = _v4.b;
-	var _v5 = $author$project$Example$Sheet$init;
-	var sheetModel = _v5.a;
-	var sheetMsg = _v5.b;
-	var _v6 = $author$project$Example$Select$init;
-	var selectModel = _v6.a;
-	var selectMsg = _v6.b;
-	var _v7 = $author$project$Example$ProgressIndicator$init;
-	var progressIndicatorModel = _v7.a;
-	var progressIndicatorMsg = _v7.b;
-	var _v8 = $author$project$Example$MultiSelect$init;
-	var multiSelectModel = _v8.a;
-	var multiSelectMsg = _v8.b;
-	var _v9 = $author$project$Example$Modal$init;
-	var modalModel = _v9.a;
-	var modalMsg = _v9.b;
-	var _v10 = $author$project$Example$List$init;
-	var listModel = _v10.a;
-	var listMsg = _v10.b;
-	var _v11 = $author$project$Example$Layout$init;
-	var layoutModel = _v11.a;
-	var layoutMsg = _v11.b;
-	var _v12 = $author$project$Example$Icon$init;
-	var iconModel = _v12.a;
-	var iconMsg = _v12.b;
-	var _v13 = $author$project$Example$Dialog$init;
-	var dialogModel = _v13.a;
-	var dialogMsg = _v13.b;
-	var _v14 = $author$project$Example$Button$init;
-	var buttonModel = _v14.a;
-	var buttonMsg = _v14.b;
-	var _v15 = $author$project$Example$AppBar$init;
-	var appBarModel = _v15.a;
-	var appBarMsg = _v15.b;
+var $elm$browser$Browser$Events$addKey = function (sub) {
+	var node = sub.a;
+	var name = sub.b;
 	return _Utils_Tuple2(
-		{appBar: appBarModel, button: buttonModel, dialog: dialogModel, icon: iconModel, layout: layoutModel, list: listModel, modal: modalModel, multiSelect: multiSelectModel, progressIndicator: progressIndicatorModel, select: selectModel, sheet: sheetModel, snackbar: snackbarModel, sortTable: sortTableModel, _switch: switchModel, tab: tabModel, textInput: textInputModel},
-		$elm$core$Platform$Cmd$batch(
+		_Utils_ap(
+			$elm$browser$Browser$Events$nodeToKey(node),
+			name),
+		sub);
+};
+var $elm$core$Dict$fromList = function (assocs) {
+	return A3(
+		$elm$core$List$foldl,
+		F2(
+			function (_v0, dict) {
+				var key = _v0.a;
+				var value = _v0.b;
+				return A3($elm$core$Dict$insert, key, value, dict);
+			}),
+		$elm$core$Dict$empty,
+		assocs);
+};
+var $elm$core$Process$kill = _Scheduler_kill;
+var $elm$core$Dict$merge = F6(
+	function (leftStep, bothStep, rightStep, leftDict, rightDict, initialResult) {
+		var stepState = F3(
+			function (rKey, rValue, _v0) {
+				stepState:
+				while (true) {
+					var list = _v0.a;
+					var result = _v0.b;
+					if (!list.b) {
+						return _Utils_Tuple2(
+							list,
+							A3(rightStep, rKey, rValue, result));
+					} else {
+						var _v2 = list.a;
+						var lKey = _v2.a;
+						var lValue = _v2.b;
+						var rest = list.b;
+						if (_Utils_cmp(lKey, rKey) < 0) {
+							var $temp$rKey = rKey,
+								$temp$rValue = rValue,
+								$temp$_v0 = _Utils_Tuple2(
+								rest,
+								A3(leftStep, lKey, lValue, result));
+							rKey = $temp$rKey;
+							rValue = $temp$rValue;
+							_v0 = $temp$_v0;
+							continue stepState;
+						} else {
+							if (_Utils_cmp(lKey, rKey) > 0) {
+								return _Utils_Tuple2(
+									list,
+									A3(rightStep, rKey, rValue, result));
+							} else {
+								return _Utils_Tuple2(
+									rest,
+									A4(bothStep, lKey, lValue, rValue, result));
+							}
+						}
+					}
+				}
+			});
+		var _v3 = A3(
+			$elm$core$Dict$foldl,
+			stepState,
+			_Utils_Tuple2(
+				$elm$core$Dict$toList(leftDict),
+				initialResult),
+			rightDict);
+		var leftovers = _v3.a;
+		var intermediateResult = _v3.b;
+		return A3(
+			$elm$core$List$foldl,
+			F2(
+				function (_v4, result) {
+					var k = _v4.a;
+					var v = _v4.b;
+					return A3(leftStep, k, v, result);
+				}),
+			intermediateResult,
+			leftovers);
+	});
+var $elm$browser$Browser$Events$Event = F2(
+	function (key, event) {
+		return {event: event, key: key};
+	});
+var $elm$core$Platform$sendToSelf = _Platform_sendToSelf;
+var $elm$browser$Browser$Events$spawn = F3(
+	function (router, key, _v0) {
+		var node = _v0.a;
+		var name = _v0.b;
+		var actualNode = function () {
+			if (node.$ === 'Document') {
+				return _Browser_doc;
+			} else {
+				return _Browser_window;
+			}
+		}();
+		return A2(
+			$elm$core$Task$map,
+			function (value) {
+				return _Utils_Tuple2(key, value);
+			},
+			A3(
+				_Browser_on,
+				actualNode,
+				name,
+				function (event) {
+					return A2(
+						$elm$core$Platform$sendToSelf,
+						router,
+						A2($elm$browser$Browser$Events$Event, key, event));
+				}));
+	});
+var $elm$browser$Browser$Events$onEffects = F3(
+	function (router, subs, state) {
+		var stepRight = F3(
+			function (key, sub, _v6) {
+				var deads = _v6.a;
+				var lives = _v6.b;
+				var news = _v6.c;
+				return _Utils_Tuple3(
+					deads,
+					lives,
+					A2(
+						$elm$core$List$cons,
+						A3($elm$browser$Browser$Events$spawn, router, key, sub),
+						news));
+			});
+		var stepLeft = F3(
+			function (_v4, pid, _v5) {
+				var deads = _v5.a;
+				var lives = _v5.b;
+				var news = _v5.c;
+				return _Utils_Tuple3(
+					A2($elm$core$List$cons, pid, deads),
+					lives,
+					news);
+			});
+		var stepBoth = F4(
+			function (key, pid, _v2, _v3) {
+				var deads = _v3.a;
+				var lives = _v3.b;
+				var news = _v3.c;
+				return _Utils_Tuple3(
+					deads,
+					A3($elm$core$Dict$insert, key, pid, lives),
+					news);
+			});
+		var newSubs = A2($elm$core$List$map, $elm$browser$Browser$Events$addKey, subs);
+		var _v0 = A6(
+			$elm$core$Dict$merge,
+			stepLeft,
+			stepBoth,
+			stepRight,
+			state.pids,
+			$elm$core$Dict$fromList(newSubs),
+			_Utils_Tuple3(_List_Nil, $elm$core$Dict$empty, _List_Nil));
+		var deadPids = _v0.a;
+		var livePids = _v0.b;
+		var makeNewPids = _v0.c;
+		return A2(
+			$elm$core$Task$andThen,
+			function (pids) {
+				return $elm$core$Task$succeed(
+					A2(
+						$elm$browser$Browser$Events$State,
+						newSubs,
+						A2(
+							$elm$core$Dict$union,
+							livePids,
+							$elm$core$Dict$fromList(pids))));
+			},
+			A2(
+				$elm$core$Task$andThen,
+				function (_v1) {
+					return $elm$core$Task$sequence(makeNewPids);
+				},
+				$elm$core$Task$sequence(
+					A2($elm$core$List$map, $elm$core$Process$kill, deadPids))));
+	});
+var $elm$core$List$maybeCons = F3(
+	function (f, mx, xs) {
+		var _v0 = f(mx);
+		if (_v0.$ === 'Just') {
+			var x = _v0.a;
+			return A2($elm$core$List$cons, x, xs);
+		} else {
+			return xs;
+		}
+	});
+var $elm$core$List$filterMap = F2(
+	function (f, xs) {
+		return A3(
+			$elm$core$List$foldr,
+			$elm$core$List$maybeCons(f),
+			_List_Nil,
+			xs);
+	});
+var $elm$browser$Browser$Events$onSelfMsg = F3(
+	function (router, _v0, state) {
+		var key = _v0.key;
+		var event = _v0.event;
+		var toMessage = function (_v2) {
+			var subKey = _v2.a;
+			var _v3 = _v2.b;
+			var node = _v3.a;
+			var name = _v3.b;
+			var decoder = _v3.c;
+			return _Utils_eq(subKey, key) ? A2(_Browser_decodeEvent, decoder, event) : $elm$core$Maybe$Nothing;
+		};
+		var messages = A2($elm$core$List$filterMap, toMessage, state.subs);
+		return A2(
+			$elm$core$Task$andThen,
+			function (_v1) {
+				return $elm$core$Task$succeed(state);
+			},
+			$elm$core$Task$sequence(
+				A2(
+					$elm$core$List$map,
+					$elm$core$Platform$sendToApp(router),
+					messages)));
+	});
+var $elm$browser$Browser$Events$subMap = F2(
+	function (func, _v0) {
+		var node = _v0.a;
+		var name = _v0.b;
+		var decoder = _v0.c;
+		return A3(
+			$elm$browser$Browser$Events$MySub,
+			node,
+			name,
+			A2($elm$json$Json$Decode$map, func, decoder));
+	});
+_Platform_effectManagers['Browser.Events'] = _Platform_createManager($elm$browser$Browser$Events$init, $elm$browser$Browser$Events$onEffects, $elm$browser$Browser$Events$onSelfMsg, 0, $elm$browser$Browser$Events$subMap);
+var $elm$browser$Browser$Events$subscription = _Platform_leaf('Browser.Events');
+var $elm$browser$Browser$Events$on = F3(
+	function (node, name, decoder) {
+		return $elm$browser$Browser$Events$subscription(
+			A3($elm$browser$Browser$Events$MySub, node, name, decoder));
+	});
+var $elm$browser$Browser$Events$onResize = function (func) {
+	return A3(
+		$elm$browser$Browser$Events$on,
+		$elm$browser$Browser$Events$Window,
+		'resize',
+		A2(
+			$elm$json$Json$Decode$field,
+			'target',
+			A3(
+				$elm$json$Json$Decode$map2,
+				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$UIExplorer$subscriptions = F2(
+	function (_v0, model) {
+		var pages = _v0.a;
+		return $elm$core$Platform$Sub$batch(
 			_List_fromArray(
 				[
-					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Button, buttonMsg),
-					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Switch, switchMsg),
-					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$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),
-					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$ProgressIndicator, progressIndicatorMsg),
-					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Icon, iconMsg),
-					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Sheet, sheetMsg),
-					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$AppBar, appBarMsg),
-					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Layout, layoutMsg),
-					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Snackbar, snackbarMsg)
-				])));
-}();
-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));
-}();
+					$elm$browser$Browser$Events$onResize(
+					F2(
+						function (width, height) {
+							return $author$project$UIExplorer$WindowResized(
+								{
+									height: $ianmackenzie$elm_units$Pixels$pixels(height),
+									width: $ianmackenzie$elm_units$Pixels$pixels(width)
+								});
+						})),
+					function () {
+					if (model.$ === 'FlagsParsed') {
+						var successModel = model.a;
+						return A2(
+							$elm$core$Platform$Sub$map,
+							$author$project$UIExplorer$PageMsg,
+							pages.subscriptions(successModel.pageModel));
+					} else {
+						return $elm$core$Platform$Sub$none;
+					}
+				}()
+				]));
+	});
+var $elm$core$Tuple$mapFirst = F2(
+	function (func, _v0) {
+		var x = _v0.a;
+		var y = _v0.b;
+		return _Utils_Tuple2(
+			func(x),
+			y);
+	});
+var $author$project$UIExplorer$NoOp = {$: 'NoOp'};
+var $elm$core$Basics$always = F2(
+	function (a, _v0) {
+		return a;
+	});
+var $elm$core$Basics$composeL = F3(
+	function (g, f, x) {
+		return g(
+			f(x));
+	});
 var $elm$core$Task$onError = _Scheduler_onError;
 var $elm$core$Task$attempt = F2(
 	function (resultToMessage, task) {
@@ -7364,729 +6694,299 @@ var $elm$core$Task$attempt = F2(
 							$elm$core$Result$Ok),
 						task))));
 	});
-var $elm_community$intdict$IntDict$Empty = {$: 'Empty'};
-var $elm_community$intdict$IntDict$empty = $elm_community$intdict$IntDict$Empty;
-var $elm$browser$Browser$Dom$getElement = _Browser_getElement;
-var $elm_community$intdict$IntDict$Inner = function (a) {
-	return {$: 'Inner', a: a};
-};
-var $elm_community$intdict$IntDict$size = function (dict) {
-	switch (dict.$) {
-		case 'Empty':
-			return 0;
-		case 'Leaf':
-			return 1;
-		default:
-			var i = dict.a;
-			return i.size;
-	}
-};
-var $elm_community$intdict$IntDict$inner = F3(
-	function (p, l, r) {
-		var _v0 = _Utils_Tuple2(l, r);
-		if (_v0.a.$ === 'Empty') {
-			var _v1 = _v0.a;
-			return r;
-		} else {
-			if (_v0.b.$ === 'Empty') {
-				var _v2 = _v0.b;
-				return l;
-			} else {
-				return $elm_community$intdict$IntDict$Inner(
-					{
-						left: l,
-						prefix: p,
-						right: r,
-						size: $elm_community$intdict$IntDict$size(l) + $elm_community$intdict$IntDict$size(r)
-					});
-			}
-		}
-	});
-var $elm$core$Bitwise$and = _Bitwise_and;
-var $elm$core$Basics$composeR = F3(
-	function (f, g, x) {
-		return g(
-			f(x));
-	});
-var $elm$core$Basics$neq = _Utils_notEqual;
-var $elm$core$Bitwise$complement = _Bitwise_complement;
-var $elm$core$Bitwise$or = _Bitwise_or;
-var $elm$core$Bitwise$shiftRightZfBy = _Bitwise_shiftRightZfBy;
-var $elm_community$intdict$IntDict$highestBitSet = function (n) {
-	var shiftOr = F2(
-		function (i, shift) {
-			return i | (i >>> shift);
-		});
-	var n1 = A2(shiftOr, n, 1);
-	var n2 = A2(shiftOr, n1, 2);
-	var n3 = A2(shiftOr, n2, 4);
-	var n4 = A2(shiftOr, n3, 8);
-	var n5 = A2(shiftOr, n4, 16);
-	return n5 & (~(n5 >>> 1));
-};
-var $elm_community$intdict$IntDict$signBit = $elm_community$intdict$IntDict$highestBitSet(-1);
-var $elm$core$Bitwise$xor = _Bitwise_xor;
-var $elm_community$intdict$IntDict$isBranchingBitSet = function (p) {
-	return A2(
-		$elm$core$Basics$composeR,
-		$elm$core$Bitwise$xor($elm_community$intdict$IntDict$signBit),
-		A2(
-			$elm$core$Basics$composeR,
-			$elm$core$Bitwise$and(p.branchingBit),
-			$elm$core$Basics$neq(0)));
-};
-var $elm_community$intdict$IntDict$higherBitMask = function (branchingBit) {
-	return branchingBit ^ (~(branchingBit - 1));
-};
-var $elm_community$intdict$IntDict$lcp = F2(
-	function (x, y) {
-		var branchingBit = $elm_community$intdict$IntDict$highestBitSet(x ^ y);
-		var mask = $elm_community$intdict$IntDict$higherBitMask(branchingBit);
-		var prefixBits = x & mask;
-		return {branchingBit: branchingBit, prefixBits: prefixBits};
-	});
-var $elm_community$intdict$IntDict$Leaf = function (a) {
-	return {$: 'Leaf', a: a};
-};
-var $elm_community$intdict$IntDict$leaf = F2(
-	function (k, v) {
-		return $elm_community$intdict$IntDict$Leaf(
-			{key: k, value: v});
-	});
-var $elm_community$intdict$IntDict$prefixMatches = F2(
-	function (p, n) {
-		return _Utils_eq(
-			n & $elm_community$intdict$IntDict$higherBitMask(p.branchingBit),
-			p.prefixBits);
-	});
-var $elm_community$intdict$IntDict$update = F3(
-	function (key, alter, dict) {
-		var join = F2(
-			function (_v2, _v3) {
-				var k1 = _v2.a;
-				var l = _v2.b;
-				var k2 = _v3.a;
-				var r = _v3.b;
-				var prefix = A2($elm_community$intdict$IntDict$lcp, k1, k2);
-				return A2($elm_community$intdict$IntDict$isBranchingBitSet, prefix, k2) ? A3($elm_community$intdict$IntDict$inner, prefix, l, r) : A3($elm_community$intdict$IntDict$inner, prefix, r, l);
-			});
-		var alteredNode = function (mv) {
-			var _v1 = alter(mv);
-			if (_v1.$ === 'Just') {
-				var v = _v1.a;
-				return A2($elm_community$intdict$IntDict$leaf, key, v);
-			} else {
-				return $elm_community$intdict$IntDict$empty;
-			}
-		};
-		switch (dict.$) {
-			case 'Empty':
-				return alteredNode($elm$core$Maybe$Nothing);
-			case 'Leaf':
-				var l = dict.a;
-				return _Utils_eq(l.key, key) ? alteredNode(
-					$elm$core$Maybe$Just(l.value)) : A2(
-					join,
-					_Utils_Tuple2(
-						key,
-						alteredNode($elm$core$Maybe$Nothing)),
-					_Utils_Tuple2(l.key, dict));
-			default:
-				var i = dict.a;
-				return A2($elm_community$intdict$IntDict$prefixMatches, i.prefix, key) ? (A2($elm_community$intdict$IntDict$isBranchingBitSet, i.prefix, key) ? A3(
-					$elm_community$intdict$IntDict$inner,
-					i.prefix,
-					i.left,
-					A3($elm_community$intdict$IntDict$update, key, alter, i.right)) : A3(
-					$elm_community$intdict$IntDict$inner,
-					i.prefix,
-					A3($elm_community$intdict$IntDict$update, key, alter, i.left),
-					i.right)) : A2(
-					join,
-					_Utils_Tuple2(
-						key,
-						alteredNode($elm$core$Maybe$Nothing)),
-					_Utils_Tuple2(i.prefix.prefixBits, dict));
-		}
-	});
-var $elm_community$intdict$IntDict$insert = F3(
-	function (key, value, dict) {
-		return A3(
-			$elm_community$intdict$IntDict$update,
-			key,
-			$elm$core$Basics$always(
-				$elm$core$Maybe$Just(value)),
-			dict);
-	});
-var $elm$core$Basics$round = _Basics_round;
-var $author$project$Widget$ScrollingNav$syncPositions = function (_v0) {
-	var toString = _v0.toString;
-	var arrangement = _v0.arrangement;
-	var fun = F2(
-		function (_v1, model) {
-			var pos = _v1.a;
-			var label = _v1.b;
-			return _Utils_update(
-				model,
-				{
-					positions: A3(
-						$elm_community$intdict$IntDict$insert,
-						pos,
-						model.toString(label),
-						model.positions)
-				});
-		});
-	return A2(
-		$elm$core$Task$map,
-		F2(
-			function (list, m) {
-				return A3($elm$core$List$foldl, fun, m, list);
-			}),
-		$elm$core$Task$sequence(
-			A2(
-				$elm$core$List$map,
-				function (label) {
-					return A2(
-						$elm$core$Task$map,
-						function (x) {
-							return _Utils_Tuple2(
-								$elm$core$Basics$round(x.element.y),
-								label);
-						},
-						$elm$browser$Browser$Dom$getElement(
-							toString(label)));
-				},
-				arrangement)));
-};
-var $author$project$Widget$ScrollingNav$init = function (_v0) {
-	var toString = _v0.toString;
-	var fromString = _v0.fromString;
-	var arrangement = _v0.arrangement;
-	var toMsg = _v0.toMsg;
-	return function (a) {
-		return _Utils_Tuple2(
-			a,
-			A2(
-				$elm$core$Task$attempt,
-				toMsg,
-				$author$project$Widget$ScrollingNav$syncPositions(a)));
-	}(
-		{arrangement: arrangement, fromString: fromString, positions: $elm_community$intdict$IntDict$empty, scrollPos: 0, toString: toString});
-};
-var $author$project$Main$initialModel = function (_v0) {
-	var viewport = _v0.viewport;
-	var _v1 = $author$project$Stateless$init;
-	var stateless = _v1.a;
-	var statelessCmd = _v1.b;
-	var _v2 = $author$project$Widget$ScrollingNav$init(
-		{
-			arrangement: $author$project$Data$Example$asList,
-			fromString: $author$project$Data$Example$fromString,
-			toMsg: function (result) {
-				if (result.$ === 'Ok') {
-					var fun = result.a;
-					return $author$project$Main$UpdateScrollingNav(fun);
-				} else {
-					return $author$project$Main$Idle;
-				}
-			},
-			toString: $author$project$Data$Example$toString
-		});
-	var scrollingNav = _v2.a;
-	var cmd = _v2.b;
-	return _Utils_Tuple2(
-		{
-			active: $elm$core$Maybe$Nothing,
-			displayDialog: false,
-			expanded: $turboMaCk$any_set$Set$Any$empty($author$project$Data$Example$toString),
-			scrollingNav: scrollingNav,
-			search: {current: '', raw: '', remaining: 0},
-			snackbar: $author$project$Widget$Snackbar$init,
-			stateless: stateless,
-			theme: $author$project$Data$Theme$Material,
-			window: {
-				height: $elm$core$Basics$round(viewport.height),
-				width: $elm$core$Basics$round(viewport.width)
-			}
-		},
-		$elm$core$Platform$Cmd$batch(
-			_List_fromArray(
-				[
-					cmd,
-					A2($elm$core$Platform$Cmd$map, $author$project$Main$StatelessSpecific, statelessCmd)
-				])));
-};
-var $elm$core$Tuple$mapBoth = F3(
-	function (funcA, funcB, _v0) {
-		var x = _v0.a;
-		var y = _v0.b;
-		return _Utils_Tuple2(
-			funcA(x),
-			funcB(y));
-	});
-var $author$project$Main$AddSnackbar = function (a) {
-	return {$: 'AddSnackbar', a: a};
-};
-var $author$project$Widget$ScrollingNav$getPos = A2(
-	$elm$core$Task$map,
-	F2(
-		function (_int, model) {
-			return _Utils_update(
-				model,
-				{
-					scrollPos: $elm$core$Basics$round(_int.viewport.y)
-				});
-		}),
-	$elm$browser$Browser$Dom$getViewport);
-var $elm$browser$Browser$Dom$setViewport = _Browser_setViewport;
-var $author$project$Widget$ScrollingNav$jumpTo = F2(
-	function (_v0, _v1) {
-		var section = _v0.section;
-		var onChange = _v0.onChange;
-		var toString = _v1.toString;
-		return A2(
-			$elm$core$Task$attempt,
-			onChange,
-			A2(
-				$elm$core$Task$andThen,
-				function (_v2) {
-					var element = _v2.element;
-					return A2($elm$browser$Browser$Dom$setViewport, 0, element.y);
-				},
-				$elm$browser$Browser$Dom$getElement(
-					toString(section))));
-	});
+var $elm$browser$Browser$Dom$focus = _Browser_call('focus');
 var $elm$browser$Browser$Navigation$load = _Browser_load;
-var $turboMaCk$any_dict$Dict$Any$insert = F3(
-	function (k, v, _v0) {
-		var inner = _v0.a;
-		return $turboMaCk$any_dict$Dict$Any$AnyDict(
-			_Utils_update(
-				inner,
-				{
-					dict: A3(
-						$elm$core$Dict$insert,
-						inner.toKey(k),
-						_Utils_Tuple2(k, v),
-						inner.dict)
-				}));
+var $elm$core$Dict$member = F2(
+	function (key, dict) {
+		var _v0 = A2($elm$core$Dict$get, key, dict);
+		if (_v0.$ === 'Just') {
+			return true;
+		} else {
+			return false;
+		}
 	});
-var $turboMaCk$any_set$Set$Any$insert = F2(
-	function (a, _v0) {
+var $elm$core$Set$member = F2(
+	function (key, _v0) {
 		var dict = _v0.a;
-		return $turboMaCk$any_set$Set$Any$AnySet(
-			A3($turboMaCk$any_dict$Dict$Any$insert, a, _Utils_Tuple0, dict));
+		return A2($elm$core$Dict$member, key, dict);
 	});
-var $turboMaCk$any_dict$Dict$Any$member = F2(
-	function (k, _v0) {
-		var dict = _v0.a.dict;
-		var toKey = _v0.a.toKey;
-		return A2(
-			$elm$core$Dict$member,
-			toKey(k),
-			dict);
-	});
-var $turboMaCk$any_set$Set$Any$member = F2(
-	function (a, _v0) {
+var $elm$core$Basics$not = _Basics_not;
+var $elm$browser$Browser$Navigation$pushUrl = _Browser_pushUrl;
+var $elm$core$Set$remove = F2(
+	function (key, _v0) {
 		var dict = _v0.a;
-		return A2($turboMaCk$any_dict$Dict$Any$member, a, dict);
+		return $elm$core$Set$Set_elm_builtin(
+			A2($elm$core$Dict$remove, key, dict));
 	});
-var $turboMaCk$any_dict$Dict$Any$remove = F2(
-	function (k, _v0) {
-		var inner = _v0.a;
-		return $turboMaCk$any_dict$Dict$Any$AnyDict(
-			_Utils_update(
-				inner,
-				{
-					dict: A2(
-						$elm$core$Dict$remove,
-						inner.toKey(k),
-						inner.dict)
-				}));
+var $author$project$UIExplorer$showSearchResults = function (searchText) {
+	return $elm$core$String$length(searchText) > 1;
+};
+var $elm$url$Url$addPort = F2(
+	function (maybePort, starter) {
+		if (maybePort.$ === 'Nothing') {
+			return starter;
+		} else {
+			var port_ = maybePort.a;
+			return starter + (':' + $elm$core$String$fromInt(port_));
+		}
 	});
-var $turboMaCk$any_set$Set$Any$remove = F2(
-	function (a, _v0) {
-		var dict = _v0.a;
-		return $turboMaCk$any_set$Set$Any$AnySet(
-			A2($turboMaCk$any_dict$Dict$Any$remove, a, dict));
+var $elm$url$Url$addPrefixed = F3(
+	function (prefix, maybeSegment, starter) {
+		if (maybeSegment.$ === 'Nothing') {
+			return starter;
+		} else {
+			var segment = maybeSegment.a;
+			return _Utils_ap(
+				starter,
+				_Utils_ap(prefix, segment));
+		}
 	});
-var $turboMaCk$any_set$Set$Any$toggle = F2(
-	function (a, set) {
-		return A2($turboMaCk$any_set$Set$Any$member, a, set) ? A2($turboMaCk$any_set$Set$Any$remove, a, set) : A2($turboMaCk$any_set$Set$Any$insert, a, set);
-	});
-var $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$Data$Example$update = F2(
-	function (msg, model) {
-		return function () {
-			switch (msg.$) {
-				case 'Button':
-					var m = msg.a;
-					return A2(
-						$author$project$Data$Example$updateField,
-						function ($) {
-							return $.button;
-						},
-						m);
-				case 'Switch':
-					var m = msg.a;
-					return A2(
-						$author$project$Data$Example$updateField,
-						function ($) {
-							return $._switch;
-						},
-						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 '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);
-				case 'List':
-					var m = msg.a;
-					return A2(
-						$author$project$Data$Example$updateField,
-						function ($) {
-							return $.list;
-						},
-						m);
-				case 'ProgressIndicator':
-					var m = msg.a;
-					return A2(
-						$author$project$Data$Example$updateField,
-						function ($) {
-							return $.progressIndicator;
-						},
-						m);
-				case 'Icon':
-					var m = msg.a;
-					return A2(
-						$author$project$Data$Example$updateField,
-						function ($) {
-							return $.icon;
-						},
-						m);
-				case 'Sheet':
-					var m = msg.a;
-					return A2(
-						$author$project$Data$Example$updateField,
-						function ($) {
-							return $.sheet;
-						},
-						m);
-				case 'AppBar':
-					var m = msg.a;
-					return A2(
-						$author$project$Data$Example$updateField,
-						function ($) {
-							return $.appBar;
-						},
-						m);
-				case 'Layout':
-					var m = msg.a;
-					return A2(
-						$author$project$Data$Example$updateField,
-						function ($) {
-							return $.layout;
-						},
-						m);
-				default:
-					var m = msg.a;
-					return A2(
-						$author$project$Data$Example$updateField,
-						function ($) {
-							return $.snackbar;
-						},
-						m);
-			}
-		}()(model);
-	});
-var $author$project$Stateless$update = F2(
-	function (msg, model) {
-		if (msg.$ === 'ExampleSpecific') {
-			var exampleMsg = msg.a;
-			var _v1 = A2($author$project$Data$Example$update, exampleMsg, model.example);
-			var exampleModel = _v1.a;
-			var exampleCmd = _v1.b;
-			return _Utils_Tuple2(
-				_Utils_update(
+var $elm$url$Url$toString = function (url) {
+	var http = function () {
+		var _v0 = url.protocol;
+		if (_v0.$ === 'Http') {
+			return 'http://';
+		} else {
+			return 'https://';
+		}
+	}();
+	return A3(
+		$elm$url$Url$addPrefixed,
+		'#',
+		url.fragment,
+		A3(
+			$elm$url$Url$addPrefixed,
+			'?',
+			url.query,
+			_Utils_ap(
+				A2(
+					$elm$url$Url$addPort,
+					url.port_,
+					_Utils_ap(http, url.host)),
+				url.path)));
+};
+var $author$project$UIExplorer$updateSuccess = F4(
+	function (_v0, config, msg, model) {
+		var pages = _v0.a;
+		switch (msg.$) {
+			case 'UrlChanged':
+				var url = msg.a;
+				var _v2 = A4(
+					$author$project$UIExplorer$pageFromUrl,
+					$author$project$UIExplorer$PageBuilder(pages),
+					config.relativeUrlPath,
+					model.key,
+					url);
+				var page = _v2.a;
+				var pageCmd = _v2.b;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{page: page}),
+					pageCmd);
+			case 'LinkClicked':
+				var urlRequest = msg.a;
+				if (urlRequest.$ === 'Internal') {
+					var url = urlRequest.a;
+					return _Utils_Tuple2(
+						model,
+						A2(
+							$elm$browser$Browser$Navigation$pushUrl,
+							model.key,
+							$elm$url$Url$toString(url)));
+				} else {
+					var url = urlRequest.a;
+					return _Utils_Tuple2(
+						model,
+						$elm$browser$Browser$Navigation$load(url));
+				}
+			case 'NoOp':
+				return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
+			case 'WindowResized':
+				var size = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{windowSize: size}),
+					$elm$core$Platform$Cmd$none);
+			case 'PressedToggleSidebar':
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{minimizeSidebar: !model.minimizeSidebar}),
+					$elm$core$Platform$Cmd$none);
+			case 'PageMsg':
+				var pageMsg = msg.a;
+				var _v4 = A2(pages.update, pageMsg, model.pageModel);
+				var pageModel = _v4.a;
+				var pageCmd = _v4.b;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{pageModel: pageModel}),
+					A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$PageMsg, pageCmd));
+			case 'PressedChangePageHotkey':
+				var pageId = msg.a;
+				return _Utils_Tuple2(
 					model,
-					{example: exampleModel}),
-				A2($elm$core$Platform$Cmd$map, $author$project$Stateless$ExampleSpecific, exampleCmd));
+					$elm$core$Platform$Cmd$batch(
+						_List_fromArray(
+							[
+								A2(
+								$elm$browser$Browser$Navigation$pushUrl,
+								model.key,
+								A2($author$project$UIExplorer$uiUrl, config.relativeUrlPath, pageId)),
+								A2(
+								$elm$core$Task$attempt,
+								$elm$core$Basics$always($author$project$UIExplorer$NoOp),
+								$elm$browser$Browser$Dom$focus(
+									$author$project$UIExplorer$pageGroupToString(pageId)))
+							])));
+			case 'ToggledPageGroup':
+				var path = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{
+							expandedGroups: function () {
+								var pathString = $author$project$UIExplorer$pageGroupToString(path);
+								return A2($elm$core$Set$member, pathString, model.expandedGroups) ? A2($elm$core$Set$remove, pathString, model.expandedGroups) : A2($elm$core$Set$insert, pathString, model.expandedGroups);
+							}()
+						}),
+					$elm$core$Platform$Cmd$none);
+			case 'TypingSearchText':
+				var text = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{
+							expandedGroups: $author$project$UIExplorer$showSearchResults(model.searchText) ? model.expandedGroups : A2($author$project$UIExplorer$expandPage, model.page, model.expandedGroups),
+							searchText: text
+						}),
+					$elm$core$Platform$Cmd$none);
+			case 'PressedClearSearchText':
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{
+							expandedGroups: A2($author$project$UIExplorer$expandPage, model.page, model.expandedGroups),
+							searchText: ''
+						}),
+					$elm$core$Platform$Cmd$none);
+			case 'PressedPageSizeOption':
+				var pageSizeOption = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{expandPageSizeOptions: false, pageSizeOption: pageSizeOption}),
+					$elm$core$Platform$Cmd$none);
+			case 'ToggledPageSizeGroup':
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{expandColorBlindOptions: false, expandPageSizeOptions: !model.expandPageSizeOptions}),
+					$elm$core$Platform$Cmd$none);
+			case 'PressedColorBlindOption':
+				var colorBlindOption = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{colorBlindOption: colorBlindOption, expandColorBlindOptions: false}),
+					$elm$core$Platform$Cmd$none);
+			case 'ToggledColorBlindGroup':
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{expandColorBlindOptions: !model.expandColorBlindOptions, expandPageSizeOptions: false}),
+					$elm$core$Platform$Cmd$none);
+			case 'ChangeDarkTheme':
+				var enabled = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{darkThemeEnabled: enabled}),
+					$elm$core$Platform$Cmd$none);
+			default:
+				var string = msg.a;
+				return _Utils_Tuple2(
+					model,
+					A2($elm$browser$Browser$Navigation$pushUrl, model.key, string));
+		}
+	});
+var $author$project$UIExplorer$update = F4(
+	function (pages, config, msg, model) {
+		if (model.$ === 'FlagsParsed') {
+			var successModel = model.a;
+			return A2(
+				$elm$core$Tuple$mapFirst,
+				$author$project$UIExplorer$FlagsParsed,
+				A4($author$project$UIExplorer$updateSuccess, pages, config, msg, successModel));
 		} else {
 			return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
 		}
 	});
-var $author$project$Main$updateLoaded = F2(
-	function (msg, model) {
-		switch (msg.$) {
-			case 'StatelessSpecific':
-				var m = msg.a;
-				return A3(
-					$elm$core$Tuple$mapBoth,
-					function (stateless) {
-						return _Utils_update(
-							model,
-							{stateless: stateless});
-					},
-					$elm$core$Platform$Cmd$map($author$project$Main$StatelessSpecific),
-					A2($author$project$Stateless$update, m, model.stateless));
-			case 'UpdateScrollingNav':
-				var fun = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							scrollingNav: fun(model.scrollingNav)
-						}),
-					$elm$core$Platform$Cmd$none);
-			case 'TimePassed':
-				var _int = msg.a;
-				var search = model.search;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							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,
-							snackbar: function () {
-								var _v1 = model.active;
-								_v1$2:
-								while (true) {
-									if (_v1.$ === 'Just') {
-										switch (_v1.a.$) {
-											case 'LeftSheet':
-												var _v2 = _v1.a;
-												return model.snackbar;
-											case 'RightSheet':
-												var _v3 = _v1.a;
-												return model.snackbar;
-											default:
-												break _v1$2;
-										}
-									} else {
-										break _v1$2;
-									}
-								}
-								return A2($author$project$Widget$Snackbar$timePassed, _int, model.snackbar);
-							}()
-						}),
-					A2($elm$core$Task$perform, $author$project$Main$UpdateScrollingNav, $author$project$Widget$ScrollingNav$getPos));
-			case 'AddSnackbar':
-				var _v4 = msg.a;
-				var string = _v4.a;
-				var bool = _v4.b;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							snackbar: A2(
-								$author$project$Widget$Snackbar$insert,
-								{
-									button: bool ? $elm$core$Maybe$Just(
-										{
-											onPress: $elm$core$Maybe$Just(
-												$author$project$Main$AddSnackbar(
-													_Utils_Tuple2('This is another message', false))),
-											text: 'Add'
-										}) : $elm$core$Maybe$Nothing,
-									text: string
-								},
-								model.snackbar)
-						}),
-					$elm$core$Platform$Cmd$none);
-			case 'Resized':
-				var window = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{window: window}),
-					$elm$core$Platform$Cmd$none);
-			case 'ChangedSidebar':
-				var sidebar = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{active: sidebar}),
-					$elm$core$Platform$Cmd$none);
-			case 'Load':
-				var string = msg.a;
-				return _Utils_Tuple2(
-					model,
-					$elm$browser$Browser$Navigation$load(string));
-			case 'JumpTo':
-				var section = msg.a;
-				return _Utils_Tuple2(
-					model,
-					A2(
-						$author$project$Widget$ScrollingNav$jumpTo,
-						{
-							onChange: $elm$core$Basics$always($author$project$Main$Idle),
-							section: section
-						},
-						model.scrollingNav));
-			case 'ChangedSearch':
-				var string = msg.a;
-				var search = model.search;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							search: _Utils_update(
-								search,
-								{raw: string, remaining: 300})
-						}),
-					$elm$core$Platform$Cmd$none);
-			case 'SetTheme':
-				var theme = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{theme: theme}),
-					$elm$core$Platform$Cmd$none);
-			case 'ToggledExample':
-				var example = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							expanded: A2($turboMaCk$any_set$Set$Any$toggle, example, model.expanded)
-						}),
-					$elm$core$Platform$Cmd$none);
-			default:
-				return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
-		}
-	});
-var $author$project$Main$update = F2(
-	function (msg, model) {
-		var _v0 = _Utils_Tuple2(model, msg);
-		_v0$2:
-		while (true) {
-			if (_v0.a.$ === 'Loading') {
-				if (_v0.b.$ === 'GotViewport') {
-					var _v1 = _v0.a;
-					var viewport = _v0.b.a;
-					return A3(
-						$elm$core$Tuple$mapBoth,
-						$author$project$Main$Loaded,
-						$elm$core$Platform$Cmd$map($author$project$Main$LoadedSpecific),
-						$author$project$Main$initialModel(viewport));
-				} else {
-					break _v0$2;
-				}
-			} else {
-				if (_v0.b.$ === 'LoadedSpecific') {
-					var state = _v0.a.a;
-					var m = _v0.b.a;
-					return A3(
-						$elm$core$Tuple$mapBoth,
-						$author$project$Main$Loaded,
-						$elm$core$Platform$Cmd$map($author$project$Main$LoadedSpecific),
-						A2($author$project$Main$updateLoaded, m, state));
-				} else {
-					break _v0$2;
-				}
-			}
-		}
-		return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
-	});
-var $mdgriffith$elm_ui$Internal$Style$classes = {above: 'a', active: 'atv', alignBottom: 'ab', alignCenterX: 'cx', alignCenterY: 'cy', alignContainerBottom: 'acb', alignContainerCenterX: 'accx', alignContainerCenterY: 'accy', alignContainerRight: 'acr', alignLeft: 'al', alignRight: 'ar', alignTop: 'at', alignedHorizontally: 'ah', alignedVertically: 'av', any: 's', behind: 'bh', below: 'b', bold: 'w7', borderDashed: 'bd', borderDotted: 'bdt', borderNone: 'bn', borderSolid: 'bs', capturePointerEvents: 'cpe', clip: 'cp', clipX: 'cpx', clipY: 'cpy', column: 'c', container: 'ctr', contentBottom: 'cb', contentCenterX: 'ccx', contentCenterY: 'ccy', contentLeft: 'cl', contentRight: 'cr', contentTop: 'ct', cursorPointer: 'cptr', cursorText: 'ctxt', focus: 'fcs', focusedWithin: 'focus-within', fullSize: 'fs', grid: 'g', hasBehind: 'hbh', heightContent: 'hc', heightExact: 'he', heightFill: 'hf', heightFillPortion: 'hfp', hover: 'hv', imageContainer: 'ic', inFront: 'fr', inputLabel: 'lbl', inputMultiline: 'iml', inputMultilineFiller: 'imlf', inputMultilineParent: 'imlp', inputMultilineWrapper: 'implw', inputText: 'it', italic: 'i', link: 'lnk', nearby: 'nb', noTextSelection: 'notxt', onLeft: 'ol', onRight: 'or', opaque: 'oq', overflowHidden: 'oh', page: 'pg', paragraph: 'p', passPointerEvents: 'ppe', root: 'ui', row: 'r', scrollbars: 'sb', scrollbarsX: 'sbx', scrollbarsY: 'sby', seButton: 'sbt', single: 'e', sizeByCapital: 'cap', spaceEvenly: 'sev', strike: 'sk', text: 't', textCenter: 'tc', textExtraBold: 'w8', textExtraLight: 'w2', textHeavy: 'w9', textJustify: 'tj', textJustifyAll: 'tja', textLeft: 'tl', textLight: 'w3', textMedium: 'w5', textNormalWeight: 'w4', textRight: 'tr', textSemiBold: 'w6', textThin: 'w1', textUnitalicized: 'tun', transition: 'ts', transparent: 'clr', underline: 'u', widthContent: 'wc', widthExact: 'we', widthFill: 'wf', widthFillPortion: 'wfp', wrapped: 'wrp'};
-var $mdgriffith$elm_ui$Internal$Model$Attr = function (a) {
-	return {$: 'Attr', a: a};
+var $mdgriffith$elm_ui$Internal$Model$Describe = function (a) {
+	return {$: 'Describe', a: a};
 };
-var $elm$json$Json$Encode$string = _Json_wrap;
-var $elm$html$Html$Attributes$stringProperty = F2(
-	function (key, string) {
-		return A2(
-			_VirtualDom_property,
-			key,
-			$elm$json$Json$Encode$string(string));
+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$Internal$Model$Colored = F3(
+	function (a, b, c) {
+		return {$: 'Colored', a: a, b: b, c: c};
 	});
-var $elm$html$Html$Attributes$class = $elm$html$Html$Attributes$stringProperty('className');
-var $mdgriffith$elm_ui$Internal$Model$htmlClass = function (cls) {
-	return $mdgriffith$elm_ui$Internal$Model$Attr(
-		$elm$html$Html$Attributes$class(cls));
+var $mdgriffith$elm_ui$Internal$Model$StyleClass = F2(
+	function (a, b) {
+		return {$: 'StyleClass', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Internal$Flag$Flag = function (a) {
+	return {$: 'Flag', a: a};
+};
+var $mdgriffith$elm_ui$Internal$Flag$Second = function (a) {
+	return {$: 'Second', a: a};
+};
+var $elm$core$Bitwise$shiftLeftBy = _Bitwise_shiftLeftBy;
+var $mdgriffith$elm_ui$Internal$Flag$flag = function (i) {
+	return (i > 31) ? $mdgriffith$elm_ui$Internal$Flag$Second(1 << (i - 32)) : $mdgriffith$elm_ui$Internal$Flag$Flag(1 << i);
+};
+var $mdgriffith$elm_ui$Internal$Flag$bgColor = $mdgriffith$elm_ui$Internal$Flag$flag(8);
+var $mdgriffith$elm_ui$Internal$Model$floatClass = function (x) {
+	return $elm$core$String$fromInt(
+		$elm$core$Basics$round(x * 255));
+};
+var $mdgriffith$elm_ui$Internal$Model$formatColorClass = function (_v0) {
+	var red = _v0.a;
+	var green = _v0.b;
+	var blue = _v0.c;
+	var alpha = _v0.d;
+	return $mdgriffith$elm_ui$Internal$Model$floatClass(red) + ('-' + ($mdgriffith$elm_ui$Internal$Model$floatClass(green) + ('-' + ($mdgriffith$elm_ui$Internal$Model$floatClass(blue) + ('-' + $mdgriffith$elm_ui$Internal$Model$floatClass(alpha))))));
+};
+var $mdgriffith$elm_ui$Element$Background$color = function (clr) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$bgColor,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$Colored,
+			'bg-' + $mdgriffith$elm_ui$Internal$Model$formatColorClass(clr),
+			'background-color',
+			clr));
+};
+var $mdgriffith$elm_ui$Internal$Flag$fontColor = $mdgriffith$elm_ui$Internal$Flag$flag(14);
+var $mdgriffith$elm_ui$Element$Font$color = function (fontColor) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$fontColor,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$Colored,
+			'fc-' + $mdgriffith$elm_ui$Internal$Model$formatColorClass(fontColor),
+			'color',
+			fontColor));
 };
-var $mdgriffith$elm_ui$Internal$Model$OnlyDynamic = F2(
-	function (a, b) {
-		return {$: 'OnlyDynamic', a: a, b: b};
-	});
-var $mdgriffith$elm_ui$Internal$Model$StaticRootAndDynamic = F2(
-	function (a, b) {
-		return {$: 'StaticRootAndDynamic', a: a, b: b};
-	});
 var $mdgriffith$elm_ui$Internal$Model$Unkeyed = function (a) {
 	return {$: 'Unkeyed', a: a};
 };
-var $mdgriffith$elm_ui$Internal$Model$AsEl = {$: 'AsEl'};
-var $mdgriffith$elm_ui$Internal$Model$asEl = $mdgriffith$elm_ui$Internal$Model$AsEl;
+var $mdgriffith$elm_ui$Internal$Model$AsColumn = {$: 'AsColumn'};
+var $mdgriffith$elm_ui$Internal$Model$asColumn = $mdgriffith$elm_ui$Internal$Model$AsColumn;
+var $mdgriffith$elm_ui$Internal$Style$classes = {above: 'a', active: 'atv', alignBottom: 'ab', alignCenterX: 'cx', alignCenterY: 'cy', alignContainerBottom: 'acb', alignContainerCenterX: 'accx', alignContainerCenterY: 'accy', alignContainerRight: 'acr', alignLeft: 'al', alignRight: 'ar', alignTop: 'at', alignedHorizontally: 'ah', alignedVertically: 'av', any: 's', behind: 'bh', below: 'b', bold: 'w7', borderDashed: 'bd', borderDotted: 'bdt', borderNone: 'bn', borderSolid: 'bs', capturePointerEvents: 'cpe', clip: 'cp', clipX: 'cpx', clipY: 'cpy', column: 'c', container: 'ctr', contentBottom: 'cb', contentCenterX: 'ccx', contentCenterY: 'ccy', contentLeft: 'cl', contentRight: 'cr', contentTop: 'ct', cursorPointer: 'cptr', cursorText: 'ctxt', focus: 'fcs', focusedWithin: 'focus-within', fullSize: 'fs', grid: 'g', hasBehind: 'hbh', heightContent: 'hc', heightExact: 'he', heightFill: 'hf', heightFillPortion: 'hfp', hover: 'hv', imageContainer: 'ic', inFront: 'fr', inputLabel: 'lbl', inputMultiline: 'iml', inputMultilineFiller: 'imlf', inputMultilineParent: 'imlp', inputMultilineWrapper: 'implw', inputText: 'it', italic: 'i', link: 'lnk', nearby: 'nb', noTextSelection: 'notxt', onLeft: 'ol', onRight: 'or', opaque: 'oq', overflowHidden: 'oh', page: 'pg', paragraph: 'p', passPointerEvents: 'ppe', root: 'ui', row: 'r', scrollbars: 'sb', scrollbarsX: 'sbx', scrollbarsY: 'sby', seButton: 'sbt', single: 'e', sizeByCapital: 'cap', spaceEvenly: 'sev', strike: 'sk', text: 't', textCenter: 'tc', textExtraBold: 'w8', textExtraLight: 'w2', textHeavy: 'w9', textJustify: 'tj', textJustifyAll: 'tja', textLeft: 'tl', textLight: 'w3', textMedium: 'w5', textNormalWeight: 'w4', textRight: 'tr', textSemiBold: 'w6', textThin: 'w1', textUnitalicized: 'tun', transition: 'ts', transparent: 'clr', underline: 'u', widthContent: 'wc', widthExact: 'we', widthFill: 'wf', widthFillPortion: 'wfp', wrapped: 'wrp'};
 var $mdgriffith$elm_ui$Internal$Model$Generic = {$: 'Generic'};
 var $mdgriffith$elm_ui$Internal$Model$div = $mdgriffith$elm_ui$Internal$Model$Generic;
 var $mdgriffith$elm_ui$Internal$Model$NoNearbyChildren = {$: 'NoNearbyChildren'};
@@ -8186,22 +7086,23 @@ var $mdgriffith$elm_ui$Internal$Model$addKeyedChildren = F3(
 							inFront)));
 		}
 	});
+var $mdgriffith$elm_ui$Internal$Model$AsEl = {$: 'AsEl'};
+var $mdgriffith$elm_ui$Internal$Model$asEl = $mdgriffith$elm_ui$Internal$Model$AsEl;
 var $mdgriffith$elm_ui$Internal$Model$AsParagraph = {$: 'AsParagraph'};
 var $mdgriffith$elm_ui$Internal$Model$asParagraph = $mdgriffith$elm_ui$Internal$Model$AsParagraph;
-var $mdgriffith$elm_ui$Internal$Flag$Flag = function (a) {
-	return {$: 'Flag', a: a};
-};
-var $mdgriffith$elm_ui$Internal$Flag$Second = function (a) {
-	return {$: 'Second', a: a};
-};
-var $elm$core$Bitwise$shiftLeftBy = _Bitwise_shiftLeftBy;
-var $mdgriffith$elm_ui$Internal$Flag$flag = function (i) {
-	return (i > 31) ? $mdgriffith$elm_ui$Internal$Flag$Second(1 << (i - 32)) : $mdgriffith$elm_ui$Internal$Flag$Flag(1 << i);
-};
 var $mdgriffith$elm_ui$Internal$Flag$alignBottom = $mdgriffith$elm_ui$Internal$Flag$flag(41);
 var $mdgriffith$elm_ui$Internal$Flag$alignRight = $mdgriffith$elm_ui$Internal$Flag$flag(40);
 var $mdgriffith$elm_ui$Internal$Flag$centerX = $mdgriffith$elm_ui$Internal$Flag$flag(42);
 var $mdgriffith$elm_ui$Internal$Flag$centerY = $mdgriffith$elm_ui$Internal$Flag$flag(43);
+var $elm$json$Json$Encode$string = _Json_wrap;
+var $elm$html$Html$Attributes$stringProperty = F2(
+	function (key, string) {
+		return A2(
+			_VirtualDom_property,
+			key,
+			$elm$json$Json$Encode$string(string));
+	});
+var $elm$html$Html$Attributes$class = $elm$html$Html$Attributes$stringProperty('className');
 var $elm$html$Html$div = _VirtualDom_node('div');
 var $mdgriffith$elm_ui$Internal$Model$lengthClassName = function (x) {
 	switch (x.$) {
@@ -8227,10 +7128,6 @@ var $elm$core$Tuple$second = function (_v0) {
 	var y = _v0.b;
 	return y;
 };
-var $mdgriffith$elm_ui$Internal$Model$floatClass = function (x) {
-	return $elm$core$String$fromInt(
-		$elm$core$Basics$round(x * 255));
-};
 var $mdgriffith$elm_ui$Internal$Model$transformClass = function (transform) {
 	switch (transform.$) {
 		case 'Untransformed':
@@ -8413,13 +7310,23 @@ var $mdgriffith$elm_ui$Internal$Model$formatBoxShadow = function (shadow) {
 					$mdgriffith$elm_ui$Internal$Model$formatColor(shadow.color))
 				])));
 };
-var $elm$core$Tuple$mapFirst = F2(
+var $elm$core$Maybe$map = F2(
+	function (f, maybe) {
+		if (maybe.$ === 'Just') {
+			var value = maybe.a;
+			return $elm$core$Maybe$Just(
+				f(value));
+		} else {
+			return $elm$core$Maybe$Nothing;
+		}
+	});
+var $elm$core$Tuple$mapSecond = F2(
 	function (func, _v0) {
 		var x = _v0.a;
 		var y = _v0.b;
 		return _Utils_Tuple2(
-			func(x),
-			y);
+			x,
+			func(y));
 	});
 var $mdgriffith$elm_ui$Internal$Model$renderFocusStyle = function (focus) {
 	return _List_fromArray(
@@ -8574,22 +7481,6 @@ var $mdgriffith$elm_ui$Internal$Style$CenterY = {$: 'CenterY'};
 var $mdgriffith$elm_ui$Internal$Style$Top = {$: 'Top'};
 var $mdgriffith$elm_ui$Internal$Style$alignments = _List_fromArray(
 	[$mdgriffith$elm_ui$Internal$Style$Top, $mdgriffith$elm_ui$Internal$Style$Bottom, $mdgriffith$elm_ui$Internal$Style$Right, $mdgriffith$elm_ui$Internal$Style$Left, $mdgriffith$elm_ui$Internal$Style$CenterX, $mdgriffith$elm_ui$Internal$Style$CenterY]);
-var $elm$core$List$append = F2(
-	function (xs, ys) {
-		if (!ys.b) {
-			return xs;
-		} else {
-			return A3($elm$core$List$foldr, $elm$core$List$cons, ys, xs);
-		}
-	});
-var $elm$core$List$concat = function (lists) {
-	return A3($elm$core$List$foldr, $elm$core$List$append, _List_Nil, lists);
-};
-var $elm$core$List$concatMap = F2(
-	function (f, list) {
-		return $elm$core$List$concat(
-			A2($elm$core$List$map, f, list));
-	});
 var $mdgriffith$elm_ui$Internal$Style$contentName = function (desc) {
 	switch (desc.a.$) {
 		case 'Top':
@@ -10684,6 +9575,9 @@ var $elm$core$Basics$min = F2(
 	function (x, y) {
 		return (_Utils_cmp(x, y) < 0) ? x : y;
 	});
+var $elm$core$Basics$negate = function (n) {
+	return -n;
+};
 var $mdgriffith$elm_ui$Internal$Model$renderProps = F3(
 	function (force, _v0, existing) {
 		var key = _v0.a;
@@ -11394,6 +10288,7 @@ var $elm$core$List$minimum = function (list) {
 		return $elm$core$Maybe$Nothing;
 	}
 };
+var $elm$core$Basics$neq = _Utils_notEqual;
 var $mdgriffith$elm_ui$Internal$Model$convertAdjustment = function (adjustment) {
 	var lines = _List_fromArray(
 		[adjustment.capital, adjustment.baseline, adjustment.descender, adjustment.lowercase]);
@@ -11679,6 +10574,7 @@ var $elm$virtual_dom$VirtualDom$keyedNode = function (tag) {
 		_VirtualDom_noScript(tag));
 };
 var $elm$html$Html$p = _VirtualDom_node('p');
+var $elm$core$Bitwise$and = _Bitwise_and;
 var $mdgriffith$elm_ui$Internal$Flag$present = F2(
 	function (myFlag, _v0) {
 		var fieldOne = _v0.a;
@@ -12047,6 +10943,7 @@ var $mdgriffith$elm_ui$Internal$Flag$Field = F2(
 	function (a, b) {
 		return {$: 'Field', a: a, b: b};
 	});
+var $elm$core$Bitwise$or = _Bitwise_or;
 var $mdgriffith$elm_ui$Internal$Flag$add = F2(
 	function (myFlag, _v0) {
 		var one = _v0.a;
@@ -12525,6 +11422,7 @@ var $mdgriffith$elm_ui$Internal$Model$renderWidth = function (w) {
 	}
 };
 var $mdgriffith$elm_ui$Internal$Flag$borderWidth = $mdgriffith$elm_ui$Internal$Flag$flag(27);
+var $elm$core$Basics$ge = _Utils_ge;
 var $mdgriffith$elm_ui$Internal$Model$skippable = F2(
 	function (flag, style) {
 		if (_Utils_eq(flag, $mdgriffith$elm_ui$Internal$Flag$borderWidth)) {
@@ -13458,12 +12356,188 @@ var $mdgriffith$elm_ui$Internal$Model$element = F4(
 				$mdgriffith$elm_ui$Internal$Model$NoNearbyChildren,
 				$elm$core$List$reverse(attributes)));
 	});
-var $mdgriffith$elm_ui$Internal$Model$AllowHover = {$: 'AllowHover'};
-var $mdgriffith$elm_ui$Internal$Model$Layout = {$: 'Layout'};
+var $mdgriffith$elm_ui$Internal$Model$Height = function (a) {
+	return {$: 'Height', a: a};
+};
+var $mdgriffith$elm_ui$Element$height = $mdgriffith$elm_ui$Internal$Model$Height;
+var $mdgriffith$elm_ui$Internal$Model$Attr = function (a) {
+	return {$: 'Attr', a: a};
+};
+var $mdgriffith$elm_ui$Internal$Model$htmlClass = function (cls) {
+	return $mdgriffith$elm_ui$Internal$Model$Attr(
+		$elm$html$Html$Attributes$class(cls));
+};
+var $mdgriffith$elm_ui$Internal$Model$Content = {$: 'Content'};
+var $mdgriffith$elm_ui$Element$shrink = $mdgriffith$elm_ui$Internal$Model$Content;
+var $mdgriffith$elm_ui$Internal$Model$Width = function (a) {
+	return {$: 'Width', a: a};
+};
+var $mdgriffith$elm_ui$Element$width = $mdgriffith$elm_ui$Internal$Model$Width;
+var $mdgriffith$elm_ui$Element$column = F2(
+	function (attrs, children) {
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asColumn,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentTop + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.contentLeft)),
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+						attrs))),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
+	});
+var $mdgriffith$elm_ui$Element$el = F2(
+	function (attrs, child) {
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asEl,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+					attrs)),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+				_List_fromArray(
+					[child])));
+	});
+var $mdgriffith$elm_ui$Internal$Model$Fill = function (a) {
+	return {$: 'Fill', a: a};
+};
+var $mdgriffith$elm_ui$Element$fill = $mdgriffith$elm_ui$Internal$Model$Fill(1);
+var $mdgriffith$elm_ui$Internal$Model$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$PaddingStyle = F5(
+	function (a, b, c, d, e) {
+		return {$: 'PaddingStyle', a: a, b: b, c: c, d: d, e: e};
+	});
+var $mdgriffith$elm_ui$Internal$Flag$padding = $mdgriffith$elm_ui$Internal$Flag$flag(2);
+var $mdgriffith$elm_ui$Element$padding = function (x) {
+	var f = x;
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$padding,
+		A5(
+			$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+			'p-' + $elm$core$String$fromInt(x),
+			f,
+			f,
+			f,
+			f));
+};
 var $mdgriffith$elm_ui$Internal$Model$Rgba = F4(
 	function (a, b, c, d) {
 		return {$: 'Rgba', a: a, b: b, c: c, d: d};
 	});
+var $mdgriffith$elm_ui$Element$rgb255 = F3(
+	function (red, green, blue) {
+		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, red / 255, green / 255, blue / 255, 1);
+	});
+var $mdgriffith$elm_ui$Internal$Model$FontSize = function (a) {
+	return {$: 'FontSize', a: a};
+};
+var $mdgriffith$elm_ui$Internal$Flag$fontSize = $mdgriffith$elm_ui$Internal$Flag$flag(4);
+var $mdgriffith$elm_ui$Element$Font$size = function (i) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$fontSize,
+		$mdgriffith$elm_ui$Internal$Model$FontSize(i));
+};
+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 $elm$virtual_dom$VirtualDom$style = _VirtualDom_style;
+var $elm$html$Html$Attributes$style = $elm$virtual_dom$VirtualDom$style;
+var $mdgriffith$elm_ui$Internal$Model$Text = function (a) {
+	return {$: 'Text', a: a};
+};
+var $mdgriffith$elm_ui$Element$text = function (content) {
+	return $mdgriffith$elm_ui$Internal$Model$Text(content);
+};
+var $author$project$UIExplorer$gray = A3($mdgriffith$elm_ui$Element$rgb255, 206, 215, 225);
+var $author$project$UIExplorer$textColor = function (dark) {
+	return dark ? $author$project$UIExplorer$gray : A3($mdgriffith$elm_ui$Element$rgb255, 56, 60, 67);
+};
+var $author$project$UIExplorer$errorView = F2(
+	function (dark, errorMessage) {
+		return A2(
+			$mdgriffith$elm_ui$Element$column,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Region$announce,
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$Background$color(
+					A3($mdgriffith$elm_ui$Element$rgb255, 250, 237, 236)),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$UIExplorer$textColor(dark)),
+					$mdgriffith$elm_ui$Element$padding(16),
+					$mdgriffith$elm_ui$Element$spacing(16)
+				]),
+			_List_fromArray(
+				[
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Font$size(20)
+						]),
+					$mdgriffith$elm_ui$Element$text('Failed to parse flags')),
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Font$size(16)
+						]),
+					$mdgriffith$elm_ui$Element$html(
+						A2(
+							$elm$html$Html$div,
+							_List_fromArray(
+								[
+									A2($elm$html$Html$Attributes$style, 'white-space', 'pre-wrap'),
+									A2($elm$html$Html$Attributes$style, 'line-height', '1.25'),
+									A2($elm$html$Html$Attributes$style, 'padding-top', '0'),
+									A2($elm$html$Html$Attributes$style, 'width', '100%'),
+									A2($elm$html$Html$Attributes$style, 'word-break', 'break-word')
+								]),
+							_List_fromArray(
+								[
+									$elm$html$Html$text(errorMessage)
+								]))))
+				]));
+	});
+var $mdgriffith$elm_ui$Internal$Model$OnlyDynamic = F2(
+	function (a, b) {
+		return {$: 'OnlyDynamic', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Internal$Model$StaticRootAndDynamic = F2(
+	function (a, b) {
+		return {$: 'StaticRootAndDynamic', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Internal$Model$AllowHover = {$: 'AllowHover'};
+var $mdgriffith$elm_ui$Internal$Model$Layout = {$: 'Layout'};
 var $mdgriffith$elm_ui$Internal$Model$focusDefaultStyle = {
 	backgroundColor: $elm$core$Maybe$Nothing,
 	borderColor: $elm$core$Maybe$Nothing,
@@ -13598,36 +12672,15 @@ var $mdgriffith$elm_ui$Internal$Model$renderRoot = F3(
 					_List_fromArray(
 						[child]))));
 	});
-var $mdgriffith$elm_ui$Internal$Model$Colored = F3(
-	function (a, b, c) {
-		return {$: 'Colored', a: a, b: b, c: c};
-	});
 var $mdgriffith$elm_ui$Internal$Model$FontFamily = F2(
 	function (a, b) {
 		return {$: 'FontFamily', a: a, b: b};
 	});
-var $mdgriffith$elm_ui$Internal$Model$FontSize = function (a) {
-	return {$: 'FontSize', a: a};
-};
 var $mdgriffith$elm_ui$Internal$Model$SansSerif = {$: 'SansSerif'};
-var $mdgriffith$elm_ui$Internal$Model$StyleClass = F2(
-	function (a, b) {
-		return {$: 'StyleClass', a: a, b: b};
-	});
 var $mdgriffith$elm_ui$Internal$Model$Typeface = function (a) {
 	return {$: 'Typeface', a: a};
 };
-var $mdgriffith$elm_ui$Internal$Flag$bgColor = $mdgriffith$elm_ui$Internal$Flag$flag(8);
-var $mdgriffith$elm_ui$Internal$Flag$fontColor = $mdgriffith$elm_ui$Internal$Flag$flag(14);
 var $mdgriffith$elm_ui$Internal$Flag$fontFamily = $mdgriffith$elm_ui$Internal$Flag$flag(5);
-var $mdgriffith$elm_ui$Internal$Flag$fontSize = $mdgriffith$elm_ui$Internal$Flag$flag(4);
-var $mdgriffith$elm_ui$Internal$Model$formatColorClass = function (_v0) {
-	var red = _v0.a;
-	var green = _v0.b;
-	var blue = _v0.c;
-	var alpha = _v0.d;
-	return $mdgriffith$elm_ui$Internal$Model$floatClass(red) + ('-' + ($mdgriffith$elm_ui$Internal$Model$floatClass(green) + ('-' + ($mdgriffith$elm_ui$Internal$Model$floatClass(blue) + ('-' + $mdgriffith$elm_ui$Internal$Model$floatClass(alpha))))));
-};
 var $elm$core$String$toLower = _String_toLower;
 var $elm$core$String$words = _String_words;
 var $mdgriffith$elm_ui$Internal$Model$renderFontClassName = F2(
@@ -13725,112 +12778,324 @@ var $mdgriffith$elm_ui$Element$layoutWith = F3(
 				_Utils_ap($mdgriffith$elm_ui$Internal$Model$rootStyle, attrs)),
 			child);
 	});
-var $mdgriffith$elm_ui$Element$layout = $mdgriffith$elm_ui$Element$layoutWith(
-	{options: _List_Nil});
-var $elm$virtual_dom$VirtualDom$map = _VirtualDom_map;
-var $elm$html$Html$map = $elm$virtual_dom$VirtualDom$map;
-var $mdgriffith$elm_ui$Internal$Model$Empty = {$: 'Empty'};
-var $mdgriffith$elm_ui$Element$none = $mdgriffith$elm_ui$Internal$Model$Empty;
-var $elm$html$Html$Attributes$attribute = $elm$virtual_dom$VirtualDom$attribute;
-var $mdgriffith$elm_ui$Element$Font$color = function (fontColor) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$fontColor,
-		A3(
-			$mdgriffith$elm_ui$Internal$Model$Colored,
-			'fc-' + $mdgriffith$elm_ui$Internal$Model$formatColorClass(fontColor),
-			'color',
-			fontColor));
+var $mdgriffith$elm_ui$Element$Desktop = {$: 'Desktop'};
+var $author$project$UIExplorer$PressedToggleSidebar = {$: 'PressedToggleSidebar'};
+var $mdgriffith$elm_ui$Internal$Model$AlignY = function (a) {
+	return {$: 'AlignY', a: a};
 };
-var $mdgriffith$elm_ui$Element$rgb255 = F3(
-	function (red, green, blue) {
-		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, red / 255, green / 255, blue / 255, 1);
+var $mdgriffith$elm_ui$Internal$Model$Top = {$: 'Top'};
+var $mdgriffith$elm_ui$Element$alignTop = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$Top);
+var $mdgriffith$elm_ui$Internal$Model$Behind = {$: 'Behind'};
+var $mdgriffith$elm_ui$Internal$Model$Nearby = F2(
+	function (a, b) {
+		return {$: 'Nearby', a: a, b: b};
 	});
-var $Orasund$elm_ui_framework$Framework$Color$darkerGrey = A3($mdgriffith$elm_ui$Element$rgb255, 18, 18, 18);
-var $mdgriffith$elm_ui$Element$Background$color = function (clr) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$bgColor,
-		A3(
-			$mdgriffith$elm_ui$Internal$Model$Colored,
-			'bg-' + $mdgriffith$elm_ui$Internal$Model$formatColorClass(clr),
-			'background-color',
-			clr));
+var $mdgriffith$elm_ui$Internal$Model$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$behindContent = function (element) {
+	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$Behind, element);
 };
-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 $mdgriffith$elm_ui$Element$rgb = F3(
+	function (r, g, b) {
+		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, r, g, b, 1);
+	});
+var $author$project$UIExplorer$black = A3($mdgriffith$elm_ui$Element$rgb, 0, 0, 0);
+var $mdgriffith$elm_ui$Internal$Model$AlignX = function (a) {
+	return {$: 'AlignX', a: a};
 };
-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 $mdgriffith$elm_ui$Element$Font$size = function (i) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$fontSize,
-		$mdgriffith$elm_ui$Internal$Model$FontSize(i));
+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 $author$project$UIExplorer$colorBlindOptionToCssClass = function (colorBlindOption) {
+	switch (colorBlindOption.$) {
+		case 'Protanopia':
+			return 'uie-a';
+		case 'Protanomaly':
+			return 'uie-b';
+		case 'Deuteranopia':
+			return 'uie-c';
+		case 'Deuteranomaly':
+			return 'uie-d';
+		case 'Tritanopia':
+			return 'uie-e';
+		case 'Tritanomaly':
+			return 'uie-f';
+		case 'Achromatopsia':
+			return 'uie-g';
+		case 'Achromatomaly':
+			return 'uie-h';
+		default:
+			return 'uie-i';
+	}
 };
-var $Orasund$elm_ui_framework$Framework$layoutAttributes = _Utils_ap(
+var $author$project$UIExplorer$Achromatomaly = {$: 'Achromatomaly'};
+var $author$project$UIExplorer$Achromatopsia = {$: 'Achromatopsia'};
+var $author$project$UIExplorer$Blind = {$: 'Blind'};
+var $author$project$UIExplorer$Deuteranomaly = {$: 'Deuteranomaly'};
+var $author$project$UIExplorer$Deuteranopia = {$: 'Deuteranopia'};
+var $author$project$UIExplorer$Protanomaly = {$: 'Protanomaly'};
+var $author$project$UIExplorer$Protanopia = {$: 'Protanopia'};
+var $author$project$UIExplorer$Tritanomaly = {$: 'Tritanomaly'};
+var $author$project$UIExplorer$Tritanopia = {$: 'Tritanopia'};
+var $author$project$UIExplorer$allColorBlindOptions = _List_fromArray(
+	[$author$project$UIExplorer$Protanopia, $author$project$UIExplorer$Protanomaly, $author$project$UIExplorer$Deuteranopia, $author$project$UIExplorer$Deuteranomaly, $author$project$UIExplorer$Tritanopia, $author$project$UIExplorer$Tritanomaly, $author$project$UIExplorer$Achromatopsia, $author$project$UIExplorer$Achromatomaly, $author$project$UIExplorer$Blind]);
+var $elm$html$Html$node = $elm$virtual_dom$VirtualDom$node;
+var $author$project$UIExplorer$colorblindnessCss = A3(
+	$elm$html$Html$node,
+	'style',
+	_List_Nil,
 	_List_fromArray(
 		[
-			$mdgriffith$elm_ui$Element$Font$size(16),
-			$mdgriffith$elm_ui$Element$Font$color($Orasund$elm_ui_framework$Framework$Color$darkerGrey)
-		]),
-	$Orasund$elm_ui_framework$Framework$Color$light);
-var $mdgriffith$elm_ui$Internal$Model$FocusStyleOption = function (a) {
-	return {$: 'FocusStyleOption', a: a};
-};
-var $mdgriffith$elm_ui$Element$focusStyle = $mdgriffith$elm_ui$Internal$Model$FocusStyleOption;
-var $Orasund$elm_ui_framework$Framework$Color$turquoise = A3($mdgriffith$elm_ui$Element$rgb255, 0, 209, 178);
-var $Orasund$elm_ui_framework$Framework$layoutOptions = $elm$core$List$singleton(
-	$mdgriffith$elm_ui$Element$focusStyle(
-		{
-			backgroundColor: $elm$core$Maybe$Nothing,
-			borderColor: $elm$core$Maybe$Just($Orasund$elm_ui_framework$Framework$Color$turquoise),
-			shadow: $elm$core$Maybe$Just(
-				{
-					blur: 10,
-					color: $Orasund$elm_ui_framework$Framework$Color$turquoise,
-					offset: _Utils_Tuple2(0, 0),
-					size: 1
-				})
-		}));
-var $Orasund$elm_ui_framework$Framework$layout = function (attributes) {
+			$elm$html$Html$text(
+			$elm$core$String$concat(
+				A2(
+					$elm$core$List$map,
+					function (option) {
+						var className = $author$project$UIExplorer$colorBlindOptionToCssClass(option);
+						return '.' + (className + (' { filter: url(#' + (className + ') }\n')));
+					},
+					$author$project$UIExplorer$allColorBlindOptions)))
+		]));
+var $elm$svg$Svg$trustedNode = _VirtualDom_nodeNS('http://www.w3.org/2000/svg');
+var $elm$svg$Svg$defs = $elm$svg$Svg$trustedNode('defs');
+var $elm$svg$Svg$feColorMatrix = $elm$svg$Svg$trustedNode('feColorMatrix');
+var $elm$svg$Svg$filter = $elm$svg$Svg$trustedNode('filter');
+var $elm$svg$Svg$Attributes$id = _VirtualDom_attribute('id');
+var $elm$svg$Svg$Attributes$in_ = _VirtualDom_attribute('in');
+var $elm$svg$Svg$svg = $elm$svg$Svg$trustedNode('svg');
+var $elm$svg$Svg$Attributes$values = function (value) {
 	return A2(
-		$mdgriffith$elm_ui$Element$layoutWith,
-		{options: $Orasund$elm_ui_framework$Framework$layoutOptions},
-		_Utils_ap($Orasund$elm_ui_framework$Framework$layoutAttributes, attributes));
+		_VirtualDom_attribute,
+		'values',
+		_VirtualDom_noJavaScriptUri(value));
 };
-var $elm$html$Html$node = $elm$virtual_dom$VirtualDom$node;
-var $Orasund$elm_ui_framework$Framework$responsiveLayout = F2(
-	function (attributes, view) {
-		return A2(
-			$elm$html$Html$div,
+var $author$project$UIExplorer$colorblindnessSvg = A2(
+	$elm$svg$Svg$svg,
+	_List_Nil,
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$defs,
 			_List_Nil,
 			_List_fromArray(
 				[
-					A3(
-					$elm$html$Html$node,
-					'meta',
+					A2(
+					$elm$svg$Svg$filter,
 					_List_fromArray(
 						[
-							A2($elm$html$Html$Attributes$attribute, 'name', 'viewport'),
-							A2($elm$html$Html$Attributes$attribute, 'content', 'width=device-width, initial-scale=1.0')
+							$elm$svg$Svg$Attributes$id(
+							$author$project$UIExplorer$colorBlindOptionToCssClass($author$project$UIExplorer$Protanopia))
 						]),
-					_List_Nil),
-					A2($Orasund$elm_ui_framework$Framework$layout, attributes, view)
-				]));
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$feColorMatrix,
+							_List_fromArray(
+								[
+									$elm$svg$Svg$Attributes$in_('SourceGraphic'),
+									$elm$svg$Svg$Attributes$values('0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0')
+								]),
+							_List_Nil)
+						])),
+					A2(
+					$elm$svg$Svg$filter,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$id(
+							$author$project$UIExplorer$colorBlindOptionToCssClass($author$project$UIExplorer$Protanomaly))
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$feColorMatrix,
+							_List_fromArray(
+								[
+									$elm$svg$Svg$Attributes$in_('SourceGraphic'),
+									$elm$svg$Svg$Attributes$values('0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0')
+								]),
+							_List_Nil)
+						])),
+					A2(
+					$elm$svg$Svg$filter,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$id(
+							$author$project$UIExplorer$colorBlindOptionToCssClass($author$project$UIExplorer$Deuteranopia))
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$feColorMatrix,
+							_List_fromArray(
+								[
+									$elm$svg$Svg$Attributes$in_('SourceGraphic'),
+									$elm$svg$Svg$Attributes$values('0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0')
+								]),
+							_List_Nil)
+						])),
+					A2(
+					$elm$svg$Svg$filter,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$id(
+							$author$project$UIExplorer$colorBlindOptionToCssClass($author$project$UIExplorer$Deuteranomaly))
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$feColorMatrix,
+							_List_fromArray(
+								[
+									$elm$svg$Svg$Attributes$in_('SourceGraphic'),
+									$elm$svg$Svg$Attributes$values('0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0')
+								]),
+							_List_Nil)
+						])),
+					A2(
+					$elm$svg$Svg$filter,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$id(
+							$author$project$UIExplorer$colorBlindOptionToCssClass($author$project$UIExplorer$Tritanopia))
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$feColorMatrix,
+							_List_fromArray(
+								[
+									$elm$svg$Svg$Attributes$in_('SourceGraphic'),
+									$elm$svg$Svg$Attributes$values('0.95, 0.05,  0, 0, 0 0,  0.433, 0.567, 0, 0 0,  0.475, 0.525, 0, 0 0,  0, 0, 1, 0')
+								]),
+							_List_Nil)
+						])),
+					A2(
+					$elm$svg$Svg$filter,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$id(
+							$author$project$UIExplorer$colorBlindOptionToCssClass($author$project$UIExplorer$Tritanomaly))
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$feColorMatrix,
+							_List_fromArray(
+								[
+									$elm$svg$Svg$Attributes$in_('SourceGraphic'),
+									$elm$svg$Svg$Attributes$values('0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0')
+								]),
+							_List_Nil)
+						])),
+					A2(
+					$elm$svg$Svg$filter,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$id(
+							$author$project$UIExplorer$colorBlindOptionToCssClass($author$project$UIExplorer$Achromatopsia))
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$feColorMatrix,
+							_List_fromArray(
+								[
+									$elm$svg$Svg$Attributes$in_('SourceGraphic'),
+									$elm$svg$Svg$Attributes$values('0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0')
+								]),
+							_List_Nil)
+						])),
+					A2(
+					$elm$svg$Svg$filter,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$id(
+							$author$project$UIExplorer$colorBlindOptionToCssClass($author$project$UIExplorer$Achromatomaly))
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$feColorMatrix,
+							_List_fromArray(
+								[
+									$elm$svg$Svg$Attributes$in_('SourceGraphic'),
+									$elm$svg$Svg$Attributes$values('0.618, 0.320, 0.062, 0, 0 0.163, 0.775, 0.062, 0, 0 0.163, 0.320, 0.516, 0, 0 0, 0, 0, 1, 0')
+								]),
+							_List_Nil)
+						])),
+					A2(
+					$elm$svg$Svg$filter,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$id(
+							$author$project$UIExplorer$colorBlindOptionToCssClass($author$project$UIExplorer$Blind))
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$feColorMatrix,
+							_List_fromArray(
+								[
+									$elm$svg$Svg$Attributes$in_('SourceGraphic'),
+									$elm$svg$Svg$Attributes$values('0, 0, 0, 0, 0 0, 0, 0, 0, 0 0, 0, 0, 0, 0 0, 0, 0, 0, 0')
+								]),
+							_List_Nil)
+						]))
+				]))
+		]));
+var $ianmackenzie$elm_units$Quantity$minus = F2(
+	function (_v0, _v1) {
+		var y = _v0.a;
+		var x = _v1.a;
+		return $ianmackenzie$elm_units$Quantity$Quantity(x - y);
 	});
+var $author$project$UIExplorer$pageSizeOptionWidth = function (pageSizeOption) {
+	switch (pageSizeOption.$) {
+		case 'Iphone5':
+			return $elm$core$Maybe$Just(
+				$ianmackenzie$elm_units$Pixels$pixels(320));
+		case 'Iphone6':
+			return $elm$core$Maybe$Just(
+				$ianmackenzie$elm_units$Pixels$pixels(375));
+		case 'IpadVertical':
+			return $elm$core$Maybe$Just(
+				$ianmackenzie$elm_units$Pixels$pixels(768));
+		case 'IpadHorizontal':
+			return $elm$core$Maybe$Just(
+				$ianmackenzie$elm_units$Pixels$pixels(1024));
+		default:
+			return $elm$core$Maybe$Nothing;
+	}
+};
+var $author$project$UIExplorer$sidebarMinimizedWidth = $ianmackenzie$elm_units$Pixels$pixels(16);
+var $author$project$UIExplorer$sidebarWidth = $ianmackenzie$elm_units$Pixels$pixels(210);
+var $author$project$UIExplorer$contentSize = function (model) {
+	return model.minimizeSidebar ? {
+		height: model.windowSize.height,
+		width: A2(
+			$ianmackenzie$elm_units$Quantity$minus,
+			$author$project$UIExplorer$sidebarMinimizedWidth,
+			A2(
+				$elm$core$Maybe$withDefault,
+				model.windowSize.width,
+				$author$project$UIExplorer$pageSizeOptionWidth(model.pageSizeOption)))
+	} : {
+		height: model.windowSize.height,
+		width: A2(
+			$ianmackenzie$elm_units$Quantity$minus,
+			$author$project$UIExplorer$sidebarWidth,
+			A2(
+				$elm$core$Maybe$withDefault,
+				model.windowSize.width,
+				$author$project$UIExplorer$pageSizeOptionWidth(model.pageSizeOption)))
+	};
+};
 var $avh4$elm_color$Color$RgbaSpace = F4(
 	function (a, b, c, d) {
 		return {$: 'RgbaSpace', a: a, b: b, c: c, d: d};
@@ -13877,47 +13142,7 @@ var $author$project$Internal$Material$Palette$defaultPalette = {
 	surface: A3($avh4$elm_color$Color$rgb255, 255, 255, 255)
 };
 var $author$project$Widget$Material$defaultPalette = $author$project$Internal$Material$Palette$defaultPalette;
-var $mdgriffith$elm_ui$Internal$Model$AlignY = function (a) {
-	return {$: 'AlignY', a: a};
-};
-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$Model$AlignX = function (a) {
-	return {$: 'AlignX', a: a};
-};
-var $mdgriffith$elm_ui$Internal$Model$Right = {$: 'Right'};
-var $mdgriffith$elm_ui$Element$alignRight = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$Right);
-var $elm$core$Basics$pow = _Basics_pow;
-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 $noahzgordon$elm_color_extra$Color$Accessibility$luminance = function (cl) {
-	var f = function (intensity) {
-		return (intensity <= 0.03928) ? (intensity / 12.92) : A2($elm$core$Basics$pow, (intensity + 0.055) / 1.055, 2.4);
-	};
-	var _v0 = function (a) {
-		return _Utils_Tuple3(
-			f(a.red),
-			f(a.green),
-			f(a.blue));
-	}(
-		$avh4$elm_color$Color$toRgba(cl));
-	var r = _v0.a;
-	var g = _v0.b;
-	var b = _v0.c;
-	return ((0.2126 * r) + (0.7152 * g)) + (0.0722 * b);
-};
-var $author$project$Widget$Material$Color$accessibleTextColor = function (color) {
-	var l = 1 + ($avh4$elm_color$Color$toRgba(color).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(color) - 1));
-	var ratioBlack = 1.05 / (l + 0.05);
-	var ratioWhite = (l + 0.05) / 0.05;
-	return (_Utils_cmp(ratioBlack, ratioWhite) < 0) ? A3($avh4$elm_color$Color$rgb255, 0, 0, 0) : A3($avh4$elm_color$Color$rgb255, 255, 255, 255);
-};
-var $mdgriffith$elm_ui$Element$htmlAttribute = $mdgriffith$elm_ui$Internal$Model$Attr;
+var $mdgriffith$elm_ui$Element$fillPortion = $mdgriffith$elm_ui$Internal$Model$Fill;
 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(
@@ -13935,172 +13160,21 @@ var $mdgriffith$elm_ui$Internal$Model$Class = F2(
 	});
 var $mdgriffith$elm_ui$Internal$Flag$fontWeight = $mdgriffith$elm_ui$Internal$Flag$flag(13);
 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 $elm$virtual_dom$VirtualDom$style = _VirtualDom_style;
-var $elm$html$Html$Attributes$style = $elm$virtual_dom$VirtualDom$style;
-var $author$project$Widget$Material$Typography$button = _List_fromArray(
+var $author$project$Widget$Material$Typography$h6 = _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$size(20),
 		$mdgriffith$elm_ui$Element$Font$semiBold,
-		$mdgriffith$elm_ui$Element$Font$letterSpacing(1.25)
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.15)
 	]);
-var $mdgriffith$elm_ui$Internal$Model$CenterX = {$: 'CenterX'};
-var $mdgriffith$elm_ui$Element$centerX = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$CenterX);
-var $mdgriffith$elm_ui$Internal$Model$CenterY = {$: 'CenterY'};
-var $mdgriffith$elm_ui$Element$centerY = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$CenterY);
-var $author$project$Widget$Material$Color$gray = A3($avh4$elm_color$Color$rgb255, 119, 119, 119);
-var $mdgriffith$elm_ui$Internal$Model$Height = function (a) {
-	return {$: 'Height', a: a};
-};
-var $mdgriffith$elm_ui$Element$height = $mdgriffith$elm_ui$Internal$Model$Height;
-var $mdgriffith$elm_ui$Internal$Model$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$Model$PaddingStyle = F5(
-	function (a, b, c, d, e) {
-		return {$: 'PaddingStyle', a: a, b: b, c: c, d: d, e: e};
-	});
-var $mdgriffith$elm_ui$Internal$Flag$padding = $mdgriffith$elm_ui$Internal$Flag$flag(2);
-var $mdgriffith$elm_ui$Element$paddingXY = F2(
-	function (x, y) {
-		if (_Utils_eq(x, y)) {
-			var f = x;
-			return A2(
-				$mdgriffith$elm_ui$Internal$Model$StyleClass,
-				$mdgriffith$elm_ui$Internal$Flag$padding,
-				A5(
-					$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-					'p-' + $elm$core$String$fromInt(x),
-					f,
-					f,
-					f,
-					f));
-		} else {
-			var yFloat = y;
-			var xFloat = x;
-			return A2(
-				$mdgriffith$elm_ui$Internal$Model$StyleClass,
-				$mdgriffith$elm_ui$Internal$Flag$padding,
-				A5(
-					$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-					'p-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y))),
-					yFloat,
-					xFloat,
-					yFloat,
-					xFloat));
-		}
-	});
-var $mdgriffith$elm_ui$Internal$Model$Px = function (a) {
-	return {$: 'Px', a: a};
-};
-var $mdgriffith$elm_ui$Element$px = $mdgriffith$elm_ui$Internal$Model$Px;
-var $mdgriffith$elm_ui$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 $mdgriffith$elm_ui$Internal$Model$Content = {$: 'Content'};
-var $mdgriffith$elm_ui$Element$shrink = $mdgriffith$elm_ui$Internal$Model$Content;
-var $mdgriffith$elm_ui$Internal$Model$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$Internal$Model$Width = function (a) {
-	return {$: 'Width', a: a};
-};
-var $mdgriffith$elm_ui$Element$width = $mdgriffith$elm_ui$Internal$Model$Width;
-var $author$project$Internal$Material$Button$baseButton = function (_v0) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {color: $author$project$Widget$Material$Color$gray, size: 18},
-					ifDisabled: {color: $author$project$Widget$Material$Color$gray, size: 18},
-					otherwise: {color: $author$project$Widget$Material$Color$gray, size: 18}
-				},
-				text: {
-					contentText: _List_fromArray(
-						[$mdgriffith$elm_ui$Element$centerX])
-				}
-			},
-			elementRow: _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
-				])
-		},
-		elementButton: _Utils_ap(
-			$author$project$Widget$Material$Typography$button,
-			_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'))
-			]),
-		otherwise: _List_Nil
-	};
-};
-var $author$project$Widget$Material$Color$buttonDisabledOpacity = 0.38;
-var $author$project$Widget$Material$Color$buttonFocusOpacity = 0.24;
-var $author$project$Widget$Material$Color$buttonHoverOpacity = 0.08;
-var $author$project$Widget$Material$Color$buttonPressedOpacity = 0.32;
-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$Describe = function (a) {
-	return {$: 'Describe', a: a};
-};
-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$Internal$Model$TransformComponent = F2(
-	function (a, b) {
-		return {$: 'TransformComponent', a: a, b: b};
-	});
-var $mdgriffith$elm_ui$Internal$Model$Text = function (a) {
-	return {$: 'Text', a: a};
+var $mdgriffith$elm_ui$Element$htmlAttribute = $mdgriffith$elm_ui$Internal$Model$Attr;
+var $ianmackenzie$elm_units$Pixels$inPixels = function (_v0) {
+	var numPixels = _v0.a;
+	return numPixels;
 };
+var $mdgriffith$elm_ui$Internal$Model$Main = {$: 'Main'};
+var $mdgriffith$elm_ui$Element$Region$mainContent = $mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$Main);
+var $mdgriffith$elm_ui$Internal$Model$Empty = {$: 'Empty'};
+var $elm$virtual_dom$VirtualDom$map = _VirtualDom_map;
 var $mdgriffith$elm_ui$Internal$Model$map = F2(
 	function (fn, el) {
 		switch (el.$) {
@@ -14131,3079 +13205,7 @@ var $mdgriffith$elm_ui$Internal$Model$map = F2(
 				return $mdgriffith$elm_ui$Internal$Model$Empty;
 		}
 	});
-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 $mdgriffith$elm_ui$Element$fromRgb = function (clr) {
-	return A4($mdgriffith$elm_ui$Internal$Model$Rgba, clr.red, clr.green, clr.blue, clr.alpha);
-};
-var $author$project$Widget$Material$Color$fromColor = A2($elm$core$Basics$composeR, $avh4$elm_color$Color$toRgba, $mdgriffith$elm_ui$Element$fromRgb);
-var $mdgriffith$elm_ui$Internal$Model$Active = {$: 'Active'};
-var $mdgriffith$elm_ui$Internal$Flag$active = $mdgriffith$elm_ui$Internal$Flag$flag(32);
-var $mdgriffith$elm_ui$Element$mouseDown = function (decs) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$active,
-		A2(
-			$mdgriffith$elm_ui$Internal$Model$PseudoSelector,
-			$mdgriffith$elm_ui$Internal$Model$Active,
-			$mdgriffith$elm_ui$Internal$Model$unwrapDecorations(decs)));
-};
-var $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 $avh4$elm_color$Color$fromRgba = function (components) {
-	return A4($avh4$elm_color$Color$RgbaSpace, components.red, components.green, components.blue, components.alpha);
-};
-var $author$project$Widget$Material$Color$scaleOpacity = function (opacity) {
-	return A2(
-		$elm$core$Basics$composeR,
-		$avh4$elm_color$Color$toRgba,
-		A2(
-			$elm$core$Basics$composeR,
-			function (color) {
-				return _Utils_update(
-					color,
-					{alpha: color.alpha * opacity});
-			},
-			$avh4$elm_color$Color$fromRgba));
-};
-var $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$rgba255 = F4(
-	function (red, green, blue, a) {
-		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, red / 255, green / 255, blue / 255, a);
-	});
-var $author$project$Widget$Material$Color$shadow = function (_float) {
-	return {
-		blur: _float,
-		color: A4($mdgriffith$elm_ui$Element$rgba255, 0, 0, 0, 0.2),
-		offset: _Utils_Tuple2(0, _float),
-		size: 0
-	};
-};
-var $elm$core$Basics$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 $elm$core$Basics$clamp = F3(
-	function (low, high, number) {
-		return (_Utils_cmp(number, low) < 0) ? low : ((_Utils_cmp(number, high) > 0) ? high : number);
-	});
-var $avh4$elm_color$Color$rgb = F3(
-	function (r, g, b) {
-		return A4($avh4$elm_color$Color$RgbaSpace, r, g, b, 1.0);
-	});
-var $noahzgordon$elm_color_extra$Color$Convert$xyzToColor = function (_v0) {
-	var x = _v0.x;
-	var y = _v0.y;
-	var z = _v0.z;
-	var z_ = z / 100;
-	var y_ = y / 100;
-	var x_ = x / 100;
-	var r = ((x_ * 3.2404542) + (y_ * (-1.5371385))) + (z_ * (-0.4986));
-	var g = ((x_ * (-0.969266)) + (y_ * 1.8760108)) + (z_ * 4.1556e-2);
-	var c = function (ch) {
-		var ch_ = (ch > 3.1308e-3) ? ((1.055 * A2($elm$core$Basics$pow, ch, 1 / 2.4)) - 5.5e-2) : (12.92 * ch);
-		return A3($elm$core$Basics$clamp, 0, 1, ch_);
-	};
-	var b = ((x_ * 5.56434e-2) + (y_ * (-0.2040259))) + (z_ * 1.0572252);
-	return A3(
-		$avh4$elm_color$Color$rgb,
-		c(r),
-		c(g),
-		c(b));
-};
-var $noahzgordon$elm_color_extra$Color$Convert$labToColor = A2($elm$core$Basics$composeR, $noahzgordon$elm_color_extra$Color$Convert$labToXyz, $noahzgordon$elm_color_extra$Color$Convert$xyzToColor);
-var $elm$core$Basics$sin = _Basics_sin;
-var $author$project$Widget$Material$Color$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$Material$Color$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$Material$Color$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$Material$Color$fromCIELCH(
-						A2(
-							fun,
-							$author$project$Widget$Material$Color$toCIELCH(c1),
-							$author$project$Widget$Material$Color$toCIELCH(c2))))));
-	});
-var $author$project$Internal$Material$Button$containedButton = function (palette) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
-						size: 18
-					},
-					ifDisabled: {color: $author$project$Widget$Material$Color$gray, size: 18},
-					otherwise: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
-						size: 18
-					}
-				},
-				text: {
-					contentText: function (b) {
-						return b.content.content.text.contentText;
-					}(
-						$author$project$Internal$Material$Button$baseButton(palette))
-				}
-			},
-			elementRow: _Utils_ap(
-				$author$project$Internal$Material$Button$baseButton(palette).content.elementRow,
-				_List_fromArray(
-					[
-						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
-					]))
-		},
-		elementButton: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Border$shadow(
-					$author$project$Widget$Material$Color$shadow(2)),
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary))),
-							$mdgriffith$elm_ui$Element$Border$shadow(
-							$author$project$Widget$Material$Color$shadow(12))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary))),
-							$mdgriffith$elm_ui$Element$Border$shadow(
-							$author$project$Widget$Material$Color$shadow(6))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary))),
-							$mdgriffith$elm_ui$Element$Border$shadow(
-							$author$project$Widget$Material$Color$shadow(6))
-						]))
-				])),
-		ifActive: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary))),
-				$mdgriffith$elm_ui$Element$Font$color(
-				$author$project$Widget$Material$Color$fromColor(
-					$author$project$Widget$Material$Color$accessibleTextColor(palette.primary)))
-			]),
-		ifDisabled: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonDisabledOpacity, $author$project$Widget$Material$Color$gray))),
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray)),
-					$mdgriffith$elm_ui$Element$Border$shadow(
-					$author$project$Widget$Material$Color$shadow(0)),
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-					$mdgriffith$elm_ui$Element$focused(_List_Nil)
-				])),
-		otherwise: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(palette.primary)),
-				$mdgriffith$elm_ui$Element$Font$color(
-				$author$project$Widget$Material$Color$fromColor(
-					$author$project$Widget$Material$Color$accessibleTextColor(palette.primary)))
-			])
-	};
-};
-var $mdgriffith$elm_ui$Internal$Model$Fill = function (a) {
-	return {$: 'Fill', a: a};
-};
-var $mdgriffith$elm_ui$Element$fill = $mdgriffith$elm_ui$Internal$Model$Fill(1);
-var $author$project$Widget$Material$Typography$h6 = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Font$size(20),
-		$mdgriffith$elm_ui$Element$Font$semiBold,
-		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.15)
-	]);
-var $mdgriffith$elm_ui$Internal$Model$Max = F2(
-	function (a, b) {
-		return {$: 'Max', a: a, b: b};
-	});
-var $mdgriffith$elm_ui$Element$maximum = F2(
-	function (i, l) {
-		return A2($mdgriffith$elm_ui$Internal$Model$Max, i, l);
-	});
-var $author$project$Internal$Material$Button$textButton = function (palette) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {color: palette.primary, size: 18},
-					ifDisabled: {color: $author$project$Widget$Material$Color$gray, size: 18},
-					otherwise: {color: palette.primary, size: 18}
-				},
-				text: {
-					contentText: function (b) {
-						return b.content.content.text.contentText;
-					}(
-						$author$project$Internal$Material$Button$baseButton(palette))
-				}
-			},
-			elementRow: function (b) {
-				return b.content.elementRow;
-			}(
-				$author$project$Internal$Material$Button$baseButton(palette))
-		},
-		elementButton: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor(palette.primary)),
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
-						]))
-				])),
-		ifActive: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
-			]),
-		ifDisabled: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray)),
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-					$mdgriffith$elm_ui$Element$focused(_List_Nil)
-				])),
-		otherwise: _List_Nil
-	};
-};
-var $author$project$Internal$Material$Dialog$alertDialog = function (palette) {
-	return {
-		content: {
-			buttons: {
-				content: {
-					accept: $author$project$Internal$Material$Button$containedButton(palette),
-					dismiss: $author$project$Internal$Material$Button$textButton(palette)
-				},
-				elementRow: _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
-					])
-			},
-			text: {
-				contentText: _List_fromArray(
-					[
-						A2($mdgriffith$elm_ui$Element$paddingXY, 24, 0)
-					])
-			},
-			title: {
-				contentText: _Utils_ap(
-					$author$project$Widget$Material$Typography$h6,
-					_List_fromArray(
-						[
-							A2($mdgriffith$elm_ui$Element$paddingXY, 24, 20)
-						]))
-			}
-		},
-		elementColumn: _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$Material$Color$fromColor(palette.surface))
-			])
-	};
-};
-var $author$project$Widget$Material$alertDialog = $author$project$Internal$Material$Dialog$alertDialog;
-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 $author$project$Internal$Material$List$buttonRow = {
-	content: {
-		element: _List_Nil,
-		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})
-			]),
-		ifSingleton: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Border$rounded(2)
-			]),
-		otherwise: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Border$rounded(0)
-			])
-	},
-	elementRow: _List_Nil
-};
-var $author$project$Widget$Material$buttonRow = $author$project$Internal$Material$List$buttonRow;
-var $mdgriffith$elm_ui$Internal$Model$Top = {$: 'Top'};
-var $mdgriffith$elm_ui$Element$alignTop = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$Top);
-var $mdgriffith$elm_ui$Internal$Model$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(
-			$mdgriffith$elm_ui$Internal$Model$StyleClass,
-			$mdgriffith$elm_ui$Internal$Flag$borderWidth,
-			A5(
-				$mdgriffith$elm_ui$Internal$Model$BorderWidth,
-				'b-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y))),
-				y,
-				x,
-				y,
-				x));
-	});
-var $mdgriffith$elm_ui$Element$Border$widthEach = function (_v0) {
-	var bottom = _v0.bottom;
-	var top = _v0.top;
-	var left = _v0.left;
-	var right = _v0.right;
-	return (_Utils_eq(top, bottom) && _Utils_eq(left, right)) ? (_Utils_eq(top, right) ? $mdgriffith$elm_ui$Element$Border$width(top) : A2($mdgriffith$elm_ui$Element$Border$widthXY, left, top)) : A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$borderWidth,
-		A5(
-			$mdgriffith$elm_ui$Internal$Model$BorderWidth,
-			'b-' + ($elm$core$String$fromInt(top) + ('-' + ($elm$core$String$fromInt(right) + ('-' + ($elm$core$String$fromInt(bottom) + ('-' + $elm$core$String$fromInt(left))))))),
-			top,
-			right,
-			bottom,
-			left));
-};
-var $author$project$Internal$Material$List$cardColumn = function (palette) {
-	return {
-		content: {
-			element: _List_fromArray(
-				[
-					A2($mdgriffith$elm_ui$Element$paddingXY, 16, 12),
-					$mdgriffith$elm_ui$Element$height(
-					A2($mdgriffith$elm_ui$Element$minimum, 48, $mdgriffith$elm_ui$Element$shrink)),
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(palette.surface)),
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor(
-						$author$project$Widget$Material$Color$accessibleTextColor(palette.surface))),
-					$mdgriffith$elm_ui$Element$Border$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A2($author$project$Widget$Material$Color$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}),
-					$mdgriffith$elm_ui$Element$Border$widthEach(
-					{bottom: 0, left: 1, right: 1, top: 1})
-				]),
-			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})
-				]),
-			ifSingleton: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Border$rounded(4),
-					$mdgriffith$elm_ui$Element$Border$width(1)
-				]),
-			otherwise: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Border$rounded(0),
-					$mdgriffith$elm_ui$Element$Border$widthEach(
-					{bottom: 0, left: 1, right: 1, top: 0})
-				])
-		},
-		elementColumn: _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$Material$Color$shadow(4))
-					])),
-				$mdgriffith$elm_ui$Element$alignTop,
-				$mdgriffith$elm_ui$Element$Border$rounded(4)
-			])
-	};
-};
-var $author$project$Widget$Material$cardColumn = $author$project$Internal$Material$List$cardColumn;
-var $author$project$Widget$Material$Color$buttonSelectedOpacity = 0.16;
-var $mdgriffith$elm_ui$Internal$Model$paddingName = F4(
-	function (top, right, bottom, left) {
-		return 'pad-' + ($elm$core$String$fromInt(top) + ('-' + ($elm$core$String$fromInt(right) + ('-' + ($elm$core$String$fromInt(bottom) + ('-' + $elm$core$String$fromInt(left)))))));
-	});
-var $mdgriffith$elm_ui$Element$paddingEach = function (_v0) {
-	var top = _v0.top;
-	var right = _v0.right;
-	var bottom = _v0.bottom;
-	var left = _v0.left;
-	if (_Utils_eq(top, right) && (_Utils_eq(top, bottom) && _Utils_eq(top, left))) {
-		var topFloat = top;
-		return A2(
-			$mdgriffith$elm_ui$Internal$Model$StyleClass,
-			$mdgriffith$elm_ui$Internal$Flag$padding,
-			A5(
-				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-				'p-' + $elm$core$String$fromInt(top),
-				topFloat,
-				topFloat,
-				topFloat,
-				topFloat));
-	} else {
-		return A2(
-			$mdgriffith$elm_ui$Internal$Model$StyleClass,
-			$mdgriffith$elm_ui$Internal$Flag$padding,
-			A5(
-				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-				A4($mdgriffith$elm_ui$Internal$Model$paddingName, top, right, bottom, left),
-				top,
-				right,
-				bottom,
-				left));
-	}
-};
-var $author$project$Widget$Material$Color$textAndBackground = function (color) {
-	return _List_fromArray(
-		[
-			$mdgriffith$elm_ui$Element$Background$color(
-			$author$project$Widget$Material$Color$fromColor(color)),
-			$mdgriffith$elm_ui$Element$Font$color(
-			$author$project$Widget$Material$Color$fromColor(
-				$author$project$Widget$Material$Color$accessibleTextColor(color)))
-		]);
-};
-var $author$project$Internal$Material$Chip$chip = function (palette) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(
-							A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface)),
-						size: 18
-					},
-					ifDisabled: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(
-							A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface)),
-						size: 18
-					},
-					otherwise: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(
-							A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface)),
-						size: 18
-					}
-				},
-				text: {
-					contentText: _List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$paddingEach(
-							{bottom: 0, left: 8, right: 0, top: 0})
-						])
-				}
-			},
-			elementRow: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$spacing(0),
-					$mdgriffith$elm_ui$Element$centerY
-				])
-		},
-		elementButton: _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(
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Background$color(
-						$author$project$Widget$Material$Color$fromColor(
-							A3(
-								$author$project$Widget$Material$Color$withShade,
-								palette.on.surface,
-								$author$project$Widget$Material$Color$buttonPressedOpacity,
-								A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface))))
-					])),
-				$mdgriffith$elm_ui$Element$focused(
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Background$color(
-						$author$project$Widget$Material$Color$fromColor(
-							A3(
-								$author$project$Widget$Material$Color$withShade,
-								palette.on.surface,
-								$author$project$Widget$Material$Color$buttonFocusOpacity,
-								A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface))))
-					])),
-				$mdgriffith$elm_ui$Element$mouseOver(
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Background$color(
-						$author$project$Widget$Material$Color$fromColor(
-							A3(
-								$author$project$Widget$Material$Color$withShade,
-								palette.on.surface,
-								$author$project$Widget$Material$Color$buttonHoverOpacity,
-								A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface))))
-					]))
-			]),
-		ifActive: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A3(
-						$author$project$Widget$Material$Color$withShade,
-						palette.on.surface,
-						$author$project$Widget$Material$Color$buttonSelectedOpacity,
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface)))),
-				$mdgriffith$elm_ui$Element$Font$color(
-				$author$project$Widget$Material$Color$fromColor(
-					$author$project$Widget$Material$Color$accessibleTextColor(
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface)))),
-				$mdgriffith$elm_ui$Element$Border$shadow(
-				$author$project$Widget$Material$Color$shadow(4))
-			]),
-		ifDisabled: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
-			_Utils_ap(
-				$author$project$Widget$Material$Color$textAndBackground(
-					A3(
-						$author$project$Widget$Material$Color$withShade,
-						palette.on.surface,
-						$author$project$Widget$Material$Color$buttonDisabledOpacity,
-						A2($author$project$Widget$Material$Color$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)
-					]))),
-		otherwise: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface))),
-				$mdgriffith$elm_ui$Element$Font$color(
-				$author$project$Widget$Material$Color$fromColor(
-					$author$project$Widget$Material$Color$accessibleTextColor(
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface))))
-			])
-	};
-};
-var $author$project$Widget$Material$chip = $author$project$Internal$Material$Chip$chip;
-var $author$project$Internal$Material$List$column = {
-	content: {element: _List_Nil, ifFirst: _List_Nil, ifLast: _List_Nil, ifSingleton: _List_Nil, otherwise: _List_Nil},
-	elementColumn: _List_fromArray(
-		[
-			A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8),
-			$mdgriffith$elm_ui$Element$spacing(8)
-		])
-};
-var $author$project$Widget$Material$column = $author$project$Internal$Material$List$column;
-var $author$project$Widget$Material$containedButton = $author$project$Internal$Material$Button$containedButton;
-var $elm$svg$Svg$Attributes$d = _VirtualDom_attribute('d');
-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 $elm$svg$Svg$Attributes$fill = _VirtualDom_attribute('fill');
-var $elm$svg$Svg$Attributes$height = _VirtualDom_attribute('height');
-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 $elm$svg$Svg$Attributes$stroke = _VirtualDom_attribute('stroke');
-var $elm$svg$Svg$trustedNode = _VirtualDom_nodeNS('http://www.w3.org/2000/svg');
-var $elm$svg$Svg$svg = $elm$svg$Svg$trustedNode('svg');
-var $avh4$elm_color$Color$toCssString = function (_v0) {
-	var r = _v0.a;
-	var g = _v0.b;
-	var b = _v0.c;
-	var a = _v0.d;
-	var roundTo = function (x) {
-		return $elm$core$Basics$round(x * 1000) / 1000;
-	};
-	var pct = function (x) {
-		return $elm$core$Basics$round(x * 10000) / 100;
-	};
-	return $elm$core$String$concat(
-		_List_fromArray(
-			[
-				'rgba(',
-				$elm$core$String$fromFloat(
-				pct(r)),
-				'%,',
-				$elm$core$String$fromFloat(
-				pct(g)),
-				'%,',
-				$elm$core$String$fromFloat(
-				pct(b)),
-				'%,',
-				$elm$core$String$fromFloat(
-				roundTo(a)),
-				')'
-			]));
-};
-var $elm$svg$Svg$Attributes$viewBox = _VirtualDom_attribute('viewBox');
-var $elm$svg$Svg$Attributes$width = _VirtualDom_attribute('width');
-var $author$project$Internal$Material$Icon$icon = function (_v0) {
-	var viewBox = _v0.viewBox;
-	var size = _v0.size;
-	var color = _v0.color;
-	return A2(
-		$elm$core$Basics$composeR,
-		$elm$svg$Svg$svg(
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$height(
-					$elm$core$String$fromInt(size)),
-					$elm$svg$Svg$Attributes$stroke(
-					$avh4$elm_color$Color$toCssString(color)),
-					$elm$svg$Svg$Attributes$fill(
-					$avh4$elm_color$Color$toCssString(color)),
-					$elm$svg$Svg$Attributes$viewBox(viewBox),
-					$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$svg$Svg$path = $elm$svg$Svg$trustedNode('path');
-var $author$project$Internal$Material$Icon$expand_less = function (_v0) {
-	var size = _v0.size;
-	var color = _v0.color;
-	return A2(
-		$author$project$Internal$Material$Icon$icon,
-		{color: color, size: size, viewBox: '0 0 48 48'},
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$d('M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z')
-					]),
-				_List_Nil)
-			]));
-};
-var $author$project$Internal$Material$Icon$expand_more = function (_v0) {
-	var size = _v0.size;
-	var color = _v0.color;
-	return A2(
-		$author$project$Internal$Material$Icon$icon,
-		{color: color, size: size, viewBox: '0 0 48 48'},
-		_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 $mdgriffith$elm_ui$Element$padding = function (x) {
-	var f = x;
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$padding,
-		A5(
-			$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-			'p-' + $elm$core$String$fromInt(x),
-			f,
-			f,
-			f,
-			f));
-};
-var $author$project$Internal$Material$Item$insetItem = function (_v0) {
-	return {
-		content: {
-			content: {
-				content: {
-					content: {color: $author$project$Widget$Material$Color$gray, size: 24},
-					icon: {
-						content: {color: $author$project$Widget$Material$Color$gray, size: 24},
-						element: _List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width(
-								$mdgriffith$elm_ui$Element$px(40)),
-								$mdgriffith$elm_ui$Element$height(
-								$mdgriffith$elm_ui$Element$px(24))
-							])
-					},
-					text: {
-						elementText: _List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-							])
-					}
-				},
-				elementRow: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$spacing(16),
-						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-					])
-			},
-			elementButton: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					$mdgriffith$elm_ui$Element$padding(16)
-				]),
-			ifDisabled: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$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', 'default'))
-				]),
-			otherwise: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, $author$project$Widget$Material$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, $author$project$Widget$Material$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, $author$project$Widget$Material$Color$gray)))
-						]))
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$padding(0)
-			])
-	};
-};
-var $author$project$Internal$Material$Item$expansionItem = function (palette) {
-	return {
-		collapseIcon: $author$project$Internal$Material$Icon$expand_less,
-		expandIcon: $author$project$Internal$Material$Icon$expand_more,
-		item: $author$project$Internal$Material$Item$insetItem(palette)
-	};
-};
-var $author$project$Widget$Material$expansionItem = $author$project$Internal$Material$Item$expansionItem;
-var $mdgriffith$elm_ui$Element$Font$family = function (families) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$fontFamily,
-		A2(
-			$mdgriffith$elm_ui$Internal$Model$FontFamily,
-			A3($elm$core$List$foldl, $mdgriffith$elm_ui$Internal$Model$renderFontClassName, 'ff-', families),
-			families));
-};
-var $avh4$elm_color$Color$gray = A4($avh4$elm_color$Color$RgbaSpace, 211 / 255, 215 / 255, 207 / 255, 1.0);
-var $author$project$Internal$Material$Item$fullBleedDivider = function (_v0) {
-	return {
-		content: {
-			element: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					$mdgriffith$elm_ui$Element$height(
-					$mdgriffith$elm_ui$Element$px(1)),
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor($avh4$elm_color$Color$gray))
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-				$mdgriffith$elm_ui$Element$height(
-				$mdgriffith$elm_ui$Element$px(1)),
-				$mdgriffith$elm_ui$Element$padding(0),
-				$mdgriffith$elm_ui$Element$Border$widthEach(
-				{bottom: 0, left: 1, right: 1, top: 0})
-			])
-	};
-};
-var $author$project$Widget$Material$fullBleedDivider = $author$project$Internal$Material$Item$fullBleedDivider;
-var $author$project$Widget$Material$Typography$caption = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Font$size(12),
-		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.4)
-	]);
-var $author$project$Internal$Material$Item$insetDivider = function (_v0) {
-	return {
-		content: {
-			element: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					$mdgriffith$elm_ui$Element$height(
-					$mdgriffith$elm_ui$Element$px(1)),
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor($avh4$elm_color$Color$gray))
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-				$mdgriffith$elm_ui$Element$height(
-				$mdgriffith$elm_ui$Element$px(1)),
-				$mdgriffith$elm_ui$Element$Border$widthEach(
-				{bottom: 0, left: 1, right: 1, top: 0}),
-				$mdgriffith$elm_ui$Element$paddingEach(
-				{bottom: 0, left: 72, right: 0, top: 0})
-			])
-	};
-};
-var $author$project$Internal$Material$Item$fullBleedHeader = function (palette) {
-	return {
-		content: {
-			content: {
-				divider: $author$project$Internal$Material$Item$insetDivider(palette).content,
-				title: _Utils_ap(
-					$author$project$Widget$Material$Typography$caption,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Font$color(
-							$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray)),
-							A2($mdgriffith$elm_ui$Element$paddingXY, 16, 0)
-						]))
-			},
-			elementColumn: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					$mdgriffith$elm_ui$Element$spacing(8)
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
-				$mdgriffith$elm_ui$Element$padding(0),
-				$mdgriffith$elm_ui$Element$Border$widthEach(
-				{bottom: 0, left: 1, right: 1, top: 0})
-			])
-	};
-};
-var $author$project$Widget$Material$fullBleedHeader = $author$project$Internal$Material$Item$fullBleedHeader;
-var $author$project$Internal$Material$Item$fullBleedItem = function (palette) {
-	var i = $author$project$Internal$Material$Item$insetItem(palette);
-	return {
-		content: {
-			content: {
-				content: {icon: i.content.content.content.content, text: i.content.content.content.text},
-				elementRow: i.content.content.elementRow
-			},
-			elementButton: i.content.elementButton,
-			ifDisabled: i.content.ifDisabled,
-			otherwise: i.content.otherwise
-		},
-		element: i.element
-	};
-};
-var $author$project$Widget$Material$fullBleedItem = $author$project$Internal$Material$Item$fullBleedItem;
-var $author$project$Internal$Material$Button$iconButton = function (palette) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {color: palette.primary, size: 18},
-					ifDisabled: {color: $author$project$Widget$Material$Color$gray, size: 18},
-					otherwise: {color: palette.primary, size: 18}
-				},
-				text: {
-					contentText: _List_fromArray(
-						[$mdgriffith$elm_ui$Element$centerX])
-				}
-			},
-			elementRow: _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
-				])
-		},
-		elementButton: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$height(
-					$mdgriffith$elm_ui$Element$px(48)),
-					$mdgriffith$elm_ui$Element$width(
-					A2($mdgriffith$elm_ui$Element$minimum, 48, $mdgriffith$elm_ui$Element$shrink)),
-					$mdgriffith$elm_ui$Element$Border$rounded(24),
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.surface)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.surface)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface)))
-						]))
-				])),
-		ifActive: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface)))
-			]),
-		ifDisabled: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray)),
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-					$mdgriffith$elm_ui$Element$focused(_List_Nil)
-				])),
-		otherwise: _List_Nil
-	};
-};
-var $author$project$Widget$Material$iconButton = $author$project$Internal$Material$Button$iconButton;
-var $author$project$Internal$Material$Item$imageItem = function (_v0) {
-	return {
-		content: {
-			content: {
-				content: {
-					content: {color: $author$project$Widget$Material$Color$gray, size: 24},
-					image: {
-						element: _List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width(
-								$mdgriffith$elm_ui$Element$px(40)),
-								$mdgriffith$elm_ui$Element$height(
-								$mdgriffith$elm_ui$Element$px(40))
-							])
-					},
-					text: {
-						elementText: _List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-							])
-					}
-				},
-				elementRow: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$spacing(16),
-						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-					])
-			},
-			elementButton: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					A2($mdgriffith$elm_ui$Element$paddingXY, 16, 8)
-				]),
-			ifDisabled: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$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', 'default'))
-				]),
-			otherwise: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, $author$project$Widget$Material$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, $author$project$Widget$Material$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, $author$project$Widget$Material$Color$gray)))
-						]))
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$padding(0)
-			])
-	};
-};
-var $author$project$Widget$Material$imageItem = $author$project$Internal$Material$Item$imageItem;
-var $author$project$Widget$Material$insetDivider = $author$project$Internal$Material$Item$insetDivider;
-var $author$project$Widget$Material$Typography$body2 = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Font$size(14),
-		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.25)
-	]);
-var $author$project$Internal$Material$Item$insetHeader = function (palette) {
-	return {
-		content: {
-			content: {
-				divider: $author$project$Internal$Material$Item$insetDivider(palette).content,
-				title: _Utils_ap(
-					$author$project$Widget$Material$Typography$body2,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Font$color(
-							$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray))
-						]))
-			},
-			elementColumn: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					$mdgriffith$elm_ui$Element$spacing(12)
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
-				$mdgriffith$elm_ui$Element$Border$widthEach(
-				{bottom: 0, left: 1, right: 1, top: 0}),
-				$mdgriffith$elm_ui$Element$paddingEach(
-				{bottom: 0, left: 72, right: 0, top: 0})
-			])
-	};
-};
-var $author$project$Widget$Material$insetHeader = $author$project$Internal$Material$Item$insetHeader;
-var $author$project$Widget$Material$insetItem = $author$project$Internal$Material$Item$insetItem;
-var $author$project$Widget$Customize$mapContent = F2(
-	function (fun, a) {
-		return _Utils_update(
-			a,
-			{
-				content: fun(a.content)
-			});
-	});
-var $author$project$Internal$Material$Icon$more_vert = function (_v0) {
-	var size = _v0.size;
-	var color = _v0.color;
-	return A2(
-		$author$project$Internal$Material$Icon$icon,
-		{color: color, size: size, viewBox: '0 0 48 48'},
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$d('M24 16c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 4c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z')
-					]),
-				_List_Nil)
-			]));
-};
-var $author$project$Internal$Material$Icon$search = function (_v0) {
-	var size = _v0.size;
-	var color = _v0.color;
-	return A2(
-		$author$project$Internal$Material$Icon$icon,
-		{color: color, size: size, viewBox: '0 0 48 48'},
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$d('M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z')
-					]),
-				_List_Nil)
-			]));
-};
-var $author$project$Widget$Customize$mapElementTextInput = F2(
-	function (fun, a) {
-		return _Utils_update(
-			a,
-			{
-				elementTextInput: fun(a.elementTextInput)
-			});
-	});
-var $author$project$Widget$Customize$elementTextInput = F2(
-	function (list, a) {
-		return A2(
-			$author$project$Widget$Customize$mapElementTextInput,
-			function (b) {
-				return _Utils_ap(b, list);
-			},
-			a);
-	});
-var $author$project$Widget$Customize$mapElementRow = F2(
-	function (fun, a) {
-		return _Utils_update(
-			a,
-			{
-				elementRow: fun(a.elementRow)
-			});
-	});
-var $author$project$Internal$Material$TextInput$textInputBase = function (palette) {
-	return {
-		content: {
-			chips: {
-				content: $author$project$Internal$Material$Chip$chip(palette),
-				elementRow: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$spacing(8)
-					])
-			},
-			text: {
-				elementTextInput: _Utils_ap(
-					$author$project$Widget$Material$Color$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)
-						]))
-			}
-		},
-		elementRow: $author$project$Widget$Material$Color$textAndBackground(palette.surface)
-	};
-};
-var $author$project$Internal$Material$TextInput$searchInput = function (palette) {
-	return A2(
-		$author$project$Widget$Customize$mapContent,
-		function (record) {
-			return _Utils_update(
-				record,
-				{
-					text: A2(
-						$author$project$Widget$Customize$elementTextInput,
-						_List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$Border$width(0),
-								A2($mdgriffith$elm_ui$Element$paddingXY, 8, 8),
-								$mdgriffith$elm_ui$Element$height(
-								$mdgriffith$elm_ui$Element$px(32)),
-								$mdgriffith$elm_ui$Element$width(
-								A2($mdgriffith$elm_ui$Element$maximum, 360, $mdgriffith$elm_ui$Element$fill))
-							]),
-						record.text)
-				});
-		},
-		A2(
-			$author$project$Widget$Customize$mapElementRow,
-			$elm$core$Basics$always(
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$alignRight,
-						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 8),
-						$mdgriffith$elm_ui$Element$Border$rounded(4)
-					])),
-			$author$project$Internal$Material$TextInput$textInputBase(palette)));
-};
-var $author$project$Internal$Material$AppBar$internalBar = F2(
-	function (content, palette) {
-		return {
-			content: {
-				actions: {
-					content: {
-						button: A2(
-							$author$project$Widget$Customize$mapContent,
-							$author$project$Widget$Customize$mapContent(
-								function (record) {
-									return _Utils_update(
-										record,
-										{
-											icon: {
-												ifActive: {
-													color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
-													size: record.icon.ifActive.size
-												},
-												ifDisabled: record.icon.ifDisabled,
-												otherwise: {
-													color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
-													size: record.icon.otherwise.size
-												}
-											}
-										});
-								}),
-							$author$project$Internal$Material$Button$iconButton(palette)),
-						moreVerticalIcon: $author$project$Internal$Material$Icon$more_vert,
-						searchIcon: $author$project$Internal$Material$Icon$search
-					},
-					elementRow: _List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$alignRight,
-							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
-						])
-				},
-				menu: {
-					content: content,
-					elementRow: _List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
-							$mdgriffith$elm_ui$Element$spacing(8)
-						])
-				},
-				search: $author$project$Internal$Material$TextInput$searchInput(palette)
-			},
-			elementRow: _Utils_ap(
-				$author$project$Widget$Material$Color$textAndBackground(palette.primary),
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$padding(0),
-						$mdgriffith$elm_ui$Element$spacing(8),
-						$mdgriffith$elm_ui$Element$height(
-						$mdgriffith$elm_ui$Element$px(56)),
-						$mdgriffith$elm_ui$Element$width(
-						A2($mdgriffith$elm_ui$Element$minimum, 360, $mdgriffith$elm_ui$Element$fill))
-					]))
-		};
-	});
-var $author$project$Internal$Material$Icon$menu = function (_v0) {
-	var size = _v0.size;
-	var color = _v0.color;
-	return A2(
-		$author$project$Internal$Material$Icon$icon,
-		{color: color, size: size, viewBox: '0 0 48 48'},
-		_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$Internal$Material$AppBar$menuBar = $author$project$Internal$Material$AppBar$internalBar(
-	{
-		menuIcon: $author$project$Internal$Material$Icon$menu,
-		title: _Utils_ap(
-			$author$project$Widget$Material$Typography$h6,
-			_List_fromArray(
-				[
-					A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
-				]))
-	});
-var $author$project$Widget$Material$menuBar = $author$project$Internal$Material$AppBar$menuBar;
-var $author$project$Internal$Material$Item$middleDivider = function (_v0) {
-	return {
-		content: {
-			element: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					$mdgriffith$elm_ui$Element$height(
-					$mdgriffith$elm_ui$Element$px(1)),
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor($avh4$elm_color$Color$gray))
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-				$mdgriffith$elm_ui$Element$height(
-				$mdgriffith$elm_ui$Element$px(1)),
-				$mdgriffith$elm_ui$Element$Border$widthEach(
-				{bottom: 0, left: 1, right: 1, top: 0}),
-				$mdgriffith$elm_ui$Element$paddingEach(
-				{bottom: 0, left: 16, right: 16, top: 0})
-			])
-	};
-};
-var $author$project$Widget$Material$middleDivider = $author$project$Internal$Material$Item$middleDivider;
-var $author$project$Widget$Material$Typography$body1 = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Font$size(16),
-		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.5)
-	]);
-var $author$project$Internal$Material$Item$multiLineItem = function (_v0) {
-	return {
-		content: {
-			content: {
-				content: {
-					content: {color: $author$project$Widget$Material$Color$gray, size: 24},
-					description: {
-						content: {
-							text: {
-								elementText: _Utils_ap(
-									$author$project$Widget$Material$Typography$body2,
-									_List_fromArray(
-										[
-											$mdgriffith$elm_ui$Element$Font$color(
-											$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray))
-										]))
-							},
-							title: {elementText: $author$project$Widget$Material$Typography$body1}
-						},
-						elementColumn: _List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-								$mdgriffith$elm_ui$Element$spacing(4)
-							])
-					},
-					icon: {
-						content: {color: $author$project$Widget$Material$Color$gray, size: 24},
-						element: _List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width(
-								$mdgriffith$elm_ui$Element$px(40)),
-								$mdgriffith$elm_ui$Element$height(
-								$mdgriffith$elm_ui$Element$px(24))
-							])
-					}
-				},
-				elementRow: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$spacing(16),
-						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-					])
-			},
-			elementButton: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					$mdgriffith$elm_ui$Element$padding(16)
-				]),
-			ifDisabled: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$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', 'default'))
-				]),
-			otherwise: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, $author$project$Widget$Material$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, $author$project$Widget$Material$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, $author$project$Widget$Material$Color$gray)))
-						]))
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$padding(0)
-			])
-	};
-};
-var $author$project$Widget$Material$multiLineItem = $author$project$Internal$Material$Item$multiLineItem;
-var $author$project$Internal$Material$Button$outlinedButton = function (palette) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {color: palette.primary, size: 18},
-					ifDisabled: {color: $author$project$Widget$Material$Color$gray, size: 18},
-					otherwise: {color: palette.primary, size: 18}
-				},
-				text: {
-					contentText: $author$project$Internal$Material$Button$baseButton(palette).content.content.text.contentText
-				}
-			},
-			elementRow: _Utils_ap(
-				$author$project$Internal$Material$Button$baseButton(palette).content.elementRow,
-				_List_fromArray(
-					[
-						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
-					]))
-		},
-		elementButton: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Border$width(1),
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor(palette.primary)),
-					$mdgriffith$elm_ui$Element$Border$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A3(
-							$author$project$Widget$Material$Color$withShade,
-							palette.primary,
-							$author$project$Widget$Material$Color$buttonHoverOpacity,
-							A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface)))),
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
-						]))
-				])),
-		ifActive: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
-			]),
-		ifDisabled: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray)),
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-					$mdgriffith$elm_ui$Element$focused(_List_Nil)
-				])),
-		otherwise: _List_Nil
-	};
-};
-var $author$project$Widget$Material$outlinedButton = $author$project$Internal$Material$Button$outlinedButton;
-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$g = $elm$svg$Svg$trustedNode('g');
-var $elm$svg$Svg$Attributes$r = _VirtualDom_attribute('r');
-var $elm$svg$Svg$Attributes$strokeDasharray = _VirtualDom_attribute('stroke-dasharray');
-var $elm$svg$Svg$Attributes$strokeDashoffset = _VirtualDom_attribute('stroke-dashoffset');
-var $elm$svg$Svg$Attributes$strokeLinecap = _VirtualDom_attribute('stroke-linecap');
-var $elm$svg$Svg$Attributes$strokeWidth = _VirtualDom_attribute('stroke-width');
-var $elm$svg$Svg$Attributes$transform = _VirtualDom_attribute('transform');
-var $elm$svg$Svg$Attributes$xmlSpace = A2(_VirtualDom_attributeNS, 'http://www.w3.org/XML/1998/namespace', 'xml:space');
-var $author$project$Internal$Material$ProgressIndicator$determinateCircularIcon = F3(
-	function (color, attribs, progress) {
-		var strokeDashoffset = function () {
-			var clampedProgress = A3($elm$core$Basics$clamp, 0, 1, progress);
-			return $elm$core$Basics$round(188 - (188 * clampedProgress));
-		}();
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			attribs,
-			$mdgriffith$elm_ui$Element$html(
-				A2(
-					$elm$svg$Svg$svg,
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$height('48px'),
-							$elm$svg$Svg$Attributes$width('48px'),
-							$elm$svg$Svg$Attributes$viewBox('0 0 66 66'),
-							$elm$svg$Svg$Attributes$xmlSpace('http://www.w3.org/2000/svg')
-						]),
-					_List_fromArray(
-						[
-							A2(
-							$elm$svg$Svg$g,
-							_List_Nil,
-							_List_fromArray(
-								[
-									A2(
-									$elm$svg$Svg$circle,
-									_List_fromArray(
-										[
-											$elm$svg$Svg$Attributes$fill('none'),
-											$elm$svg$Svg$Attributes$stroke(
-											$avh4$elm_color$Color$toCssString(color)),
-											$elm$svg$Svg$Attributes$strokeWidth('5'),
-											$elm$svg$Svg$Attributes$strokeLinecap('butt'),
-											$elm$svg$Svg$Attributes$cx('33'),
-											$elm$svg$Svg$Attributes$cy('33'),
-											$elm$svg$Svg$Attributes$r('30'),
-											$elm$svg$Svg$Attributes$strokeDasharray('188 188'),
-											$elm$svg$Svg$Attributes$strokeDashoffset(
-											$elm$core$String$fromInt(strokeDashoffset)),
-											$elm$svg$Svg$Attributes$transform('rotate(-90 33 33)')
-										]),
-									_List_Nil)
-								]))
-						]))));
-	});
-var $elm$svg$Svg$animate = $elm$svg$Svg$trustedNode('animate');
-var $elm$svg$Svg$animateTransform = $elm$svg$Svg$trustedNode('animateTransform');
-var $elm$svg$Svg$Attributes$attributeName = _VirtualDom_attribute('attributeName');
-var $elm$svg$Svg$Attributes$begin = _VirtualDom_attribute('begin');
-var $elm$svg$Svg$Attributes$dur = _VirtualDom_attribute('dur');
-var $elm$svg$Svg$Attributes$repeatCount = _VirtualDom_attribute('repeatCount');
-var $elm$svg$Svg$Attributes$type_ = _VirtualDom_attribute('type');
-var $elm$svg$Svg$Attributes$values = function (value) {
-	return A2(
-		_VirtualDom_attribute,
-		'values',
-		_VirtualDom_noJavaScriptUri(value));
-};
-var $author$project$Internal$Material$ProgressIndicator$indeterminateCircularIcon = F2(
-	function (color, attribs) {
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			attribs,
-			$mdgriffith$elm_ui$Element$html(
-				A2(
-					$elm$svg$Svg$svg,
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$height('48px'),
-							$elm$svg$Svg$Attributes$width('48px'),
-							$elm$svg$Svg$Attributes$viewBox('0 0 66 66'),
-							$elm$svg$Svg$Attributes$xmlSpace('http://www.w3.org/2000/svg')
-						]),
-					_List_fromArray(
-						[
-							A2(
-							$elm$svg$Svg$g,
-							_List_Nil,
-							_List_fromArray(
-								[
-									A2(
-									$elm$svg$Svg$animateTransform,
-									_List_fromArray(
-										[
-											$elm$svg$Svg$Attributes$attributeName('transform'),
-											$elm$svg$Svg$Attributes$type_('rotate'),
-											$elm$svg$Svg$Attributes$values('0 33 33;270 33 33'),
-											$elm$svg$Svg$Attributes$begin('0s'),
-											$elm$svg$Svg$Attributes$dur('1.4s'),
-											$elm$svg$Svg$Attributes$fill('freeze'),
-											$elm$svg$Svg$Attributes$repeatCount('indefinite')
-										]),
-									_List_Nil),
-									A2(
-									$elm$svg$Svg$circle,
-									_List_fromArray(
-										[
-											$elm$svg$Svg$Attributes$fill('none'),
-											$elm$svg$Svg$Attributes$stroke(
-											$avh4$elm_color$Color$toCssString(color)),
-											$elm$svg$Svg$Attributes$strokeWidth('5'),
-											$elm$svg$Svg$Attributes$strokeLinecap('square'),
-											$elm$svg$Svg$Attributes$cx('33'),
-											$elm$svg$Svg$Attributes$cy('33'),
-											$elm$svg$Svg$Attributes$r('30'),
-											$elm$svg$Svg$Attributes$strokeDasharray('187'),
-											$elm$svg$Svg$Attributes$strokeDashoffset('610')
-										]),
-									_List_fromArray(
-										[
-											A2(
-											$elm$svg$Svg$animateTransform,
-											_List_fromArray(
-												[
-													$elm$svg$Svg$Attributes$attributeName('transform'),
-													$elm$svg$Svg$Attributes$type_('rotate'),
-													$elm$svg$Svg$Attributes$values('0 33 33;135 33 33;450 33 33'),
-													$elm$svg$Svg$Attributes$begin('0s'),
-													$elm$svg$Svg$Attributes$dur('1.4s'),
-													$elm$svg$Svg$Attributes$fill('freeze'),
-													$elm$svg$Svg$Attributes$repeatCount('indefinite')
-												]),
-											_List_Nil),
-											A2(
-											$elm$svg$Svg$animate,
-											_List_fromArray(
-												[
-													$elm$svg$Svg$Attributes$attributeName('stroke-dashoffset'),
-													$elm$svg$Svg$Attributes$values('187;46.75;187'),
-													$elm$svg$Svg$Attributes$begin('0s'),
-													$elm$svg$Svg$Attributes$dur('1.4s'),
-													$elm$svg$Svg$Attributes$fill('freeze'),
-													$elm$svg$Svg$Attributes$repeatCount('indefinite')
-												]),
-											_List_Nil)
-										]))
-								]))
-						]))));
-	});
-var $author$project$Internal$Material$ProgressIndicator$progressIndicator = function (palette) {
-	return {
-		elementFunction: function (maybeProgress) {
-			if (maybeProgress.$ === 'Nothing') {
-				return A2($author$project$Internal$Material$ProgressIndicator$indeterminateCircularIcon, palette.primary, _List_Nil);
-			} else {
-				var progress = maybeProgress.a;
-				return A3($author$project$Internal$Material$ProgressIndicator$determinateCircularIcon, palette.primary, _List_Nil, progress);
-			}
-		}
-	};
-};
-var $author$project$Widget$Material$progressIndicator = $author$project$Internal$Material$ProgressIndicator$progressIndicator;
-var $author$project$Internal$Material$List$row = {
-	content: {element: _List_Nil, ifFirst: _List_Nil, ifLast: _List_Nil, ifSingleton: _List_Nil, otherwise: _List_Nil},
-	elementRow: _List_fromArray(
-		[
-			A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8),
-			$mdgriffith$elm_ui$Element$spacing(8)
-		])
-};
-var $author$project$Widget$Material$row = $author$project$Internal$Material$List$row;
-var $mdgriffith$elm_ui$Element$Font$sansSerif = $mdgriffith$elm_ui$Internal$Model$SansSerif;
-var $author$project$Internal$Material$Item$selectItem = function (palette) {
-	return {
-		content: {
-			content: {
-				content: {
-					icon: {
-						ifActive: {
-							color: $author$project$Widget$Material$Color$accessibleTextColor(palette.surface),
-							size: 18
-						},
-						ifDisabled: {color: $author$project$Widget$Material$Color$gray, size: 18},
-						otherwise: {
-							color: $author$project$Widget$Material$Color$accessibleTextColor(palette.surface),
-							size: 18
-						}
-					},
-					text: {
-						contentText: _List_fromArray(
-							[$mdgriffith$elm_ui$Element$centerX])
-					}
-				},
-				elementRow: _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
-					])
-			},
-			elementButton: _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$Material$Color$fromColor(
-						$author$project$Widget$Material$Color$accessibleTextColor(palette.surface))),
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
-						]))
-				]),
-			ifActive: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary))),
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor(palette.primary))
-				]),
-			ifDisabled: _Utils_ap(
-				$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Font$color(
-						$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray)),
-						$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-						$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-						$mdgriffith$elm_ui$Element$focused(_List_Nil)
-					])),
-			otherwise: _List_Nil
-		},
-		element: _List_fromArray(
-			[
-				A2($mdgriffith$elm_ui$Element$paddingXY, 8, 4)
-			])
-	};
-};
-var $author$project$Widget$Material$selectItem = $author$project$Internal$Material$Item$selectItem;
-var $author$project$Internal$Material$List$sideSheet = function (palette) {
-	return {
-		content: {
-			element: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-				]),
-			ifFirst: _List_Nil,
-			ifLast: _List_Nil,
-			ifSingleton: _List_Nil,
-			otherwise: _List_Nil
-		},
-		elementColumn: _Utils_ap(
-			$author$project$Widget$Material$Color$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$height($mdgriffith$elm_ui$Element$fill),
-					A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8)
-				]))
-	};
-};
-var $author$project$Widget$Material$sideSheet = $author$project$Internal$Material$List$sideSheet;
-var $author$project$Widget$Material$Color$accessibleWithTextColor = F2(
-	function (c, color) {
-		var newConstrast = 7;
-		var l2 = 1 + ($avh4$elm_color$Color$toRgba(color).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(color) - 1));
-		var lighterLuminance = (newConstrast * (l2 + 0.05)) - 0.05;
-		var l1 = 1 + ($avh4$elm_color$Color$toRgba(c).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(c) - 1));
-		var darkerLuminance = (l2 + 0.05) - (0.05 / newConstrast);
-		return ((_Utils_cmp(l1, l2) > 0) ? ((((l1 + 0.05) / (l2 + 0.05)) < 7) ? A2(
-			$elm$core$Basics$composeR,
-			$noahzgordon$elm_color_extra$Color$Convert$colorToLab,
-			A2(
-				$elm$core$Basics$composeR,
-				function (col) {
-					return _Utils_update(
-						col,
-						{l: 100 * lighterLuminance});
-				},
-				$noahzgordon$elm_color_extra$Color$Convert$labToColor)) : $elm$core$Basics$identity) : ((((l2 + 0.05) / (l1 + 0.05)) < 7) ? A2(
-			$elm$core$Basics$composeR,
-			$noahzgordon$elm_color_extra$Color$Convert$colorToLab,
-			A2(
-				$elm$core$Basics$composeR,
-				function (col) {
-					return _Utils_update(
-						col,
-						{l: 100 * darkerLuminance});
-				},
-				$noahzgordon$elm_color_extra$Color$Convert$labToColor)) : $elm$core$Basics$identity))(c);
-	});
-var $author$project$Widget$Material$Color$dark = A3($avh4$elm_color$Color$rgb255, 50, 50, 50);
-var $author$project$Widget$Customize$mapElementButton = F2(
-	function (fun, a) {
-		return _Utils_update(
-			a,
-			{
-				elementButton: fun(a.elementButton)
-			});
-	});
-var $author$project$Widget$Customize$elementButton = F2(
-	function (list, a) {
-		return A2(
-			$author$project$Widget$Customize$mapElementButton,
-			function (b) {
-				return _Utils_ap(b, list);
-			},
-			a);
-	});
-var $author$project$Internal$Material$Snackbar$snackbar = function (palette) {
-	return {
-		content: {
-			button: A2(
-				$author$project$Widget$Customize$elementButton,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Font$color(
-						$author$project$Widget$Material$Color$fromColor(
-							A2($author$project$Widget$Material$Color$accessibleWithTextColor, palette.primary, $author$project$Widget$Material$Color$dark)))
-					]),
-				$author$project$Internal$Material$Button$textButton(palette)),
-			text: {
-				elementText: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$centerX,
-						A2($mdgriffith$elm_ui$Element$paddingXY, 10, 8)
-					])
-			}
-		},
-		elementRow: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$dark)),
-				$mdgriffith$elm_ui$Element$Font$color(
-				$author$project$Widget$Material$Color$fromColor(
-					$author$project$Widget$Material$Color$accessibleTextColor($author$project$Widget$Material$Color$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$Material$Color$shadow(2))
-			])
-	};
-};
-var $author$project$Widget$Material$snackbar = $author$project$Internal$Material$Snackbar$snackbar;
-var $author$project$Internal$Material$SortTable$sortTable = function (palette) {
-	return {
-		content: {
-			ascIcon: $author$project$Internal$Material$Icon$expand_less,
-			defaultIcon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-			descIcon: $author$project$Internal$Material$Icon$expand_more,
-			header: $author$project$Internal$Material$Button$textButton(palette)
-		},
-		elementTable: _List_Nil
-	};
-};
-var $author$project$Widget$Material$sortTable = $author$project$Internal$Material$SortTable$sortTable;
-var $mdgriffith$elm_ui$Internal$Model$Left = {$: 'Left'};
-var $mdgriffith$elm_ui$Element$alignLeft = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$Left);
-var $mdgriffith$elm_ui$Internal$Model$MoveX = function (a) {
-	return {$: 'MoveX', a: a};
-};
-var $mdgriffith$elm_ui$Internal$Flag$moveX = $mdgriffith$elm_ui$Internal$Flag$flag(25);
-var $mdgriffith$elm_ui$Element$moveLeft = function (x) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$TransformComponent,
-		$mdgriffith$elm_ui$Internal$Flag$moveX,
-		$mdgriffith$elm_ui$Internal$Model$MoveX(-x));
-};
-var $mdgriffith$elm_ui$Element$moveRight = function (x) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$TransformComponent,
-		$mdgriffith$elm_ui$Internal$Flag$moveX,
-		$mdgriffith$elm_ui$Internal$Model$MoveX(x));
-};
-var $author$project$Internal$Material$Switch$switch = function (palette) {
-	return {
-		content: {
-			element: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$height(
-					$mdgriffith$elm_ui$Element$px(14)),
-					$mdgriffith$elm_ui$Element$width(
-					$mdgriffith$elm_ui$Element$px(34)),
-					$mdgriffith$elm_ui$Element$centerY,
-					$mdgriffith$elm_ui$Element$centerX,
-					$mdgriffith$elm_ui$Element$Border$rounded(10)
-				]),
-			ifActive: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.5, palette.primary)))
-				]),
-			ifDisabled: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$htmlAttribute(
-					A2($elm$html$Html$Attributes$style, 'cursor', 'not-allowed')),
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A3($author$project$Widget$Material$Color$withShade, $author$project$Widget$Material$Color$gray, 0.5 * $author$project$Widget$Material$Color$buttonDisabledOpacity, palette.surface)))
-				]),
-			otherwise: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.5, $author$project$Widget$Material$Color$gray)))
-				])
-		},
-		contentInFront: {
-			content: {
-				element: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height(
-						$mdgriffith$elm_ui$Element$px(20)),
-						$mdgriffith$elm_ui$Element$width(
-						$mdgriffith$elm_ui$Element$px(20)),
-						$mdgriffith$elm_ui$Element$centerY,
-						$mdgriffith$elm_ui$Element$centerX,
-						$mdgriffith$elm_ui$Element$Border$rounded(10),
-						$mdgriffith$elm_ui$Element$Border$shadow(
-						$author$project$Widget$Material$Color$shadow(2)),
-						$mdgriffith$elm_ui$Element$Background$color(
-						$author$project$Widget$Material$Color$fromColor(palette.surface))
-					]),
-				ifActive: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Background$color(
-						$author$project$Widget$Material$Color$fromColor(
-							A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
-					]),
-				ifDisabled: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Background$color(
-						$author$project$Widget$Material$Color$fromColor(
-							A3($author$project$Widget$Material$Color$withShade, $avh4$elm_color$Color$gray, $author$project$Widget$Material$Color$buttonDisabledOpacity, palette.surface))),
-						$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-						$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-						$mdgriffith$elm_ui$Element$focused(_List_Nil)
-					]),
-				otherwise: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Background$color(
-						$author$project$Widget$Material$Color$fromColor(
-							A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface)))
-					])
-			},
-			element: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$height(
-					$mdgriffith$elm_ui$Element$px(38)),
-					$mdgriffith$elm_ui$Element$width(
-					$mdgriffith$elm_ui$Element$px(38)),
-					$mdgriffith$elm_ui$Element$Border$rounded(19)
-				]),
-			ifActive: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$alignRight,
-					$mdgriffith$elm_ui$Element$moveRight(8)
-				]),
-			ifDisabled: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$htmlAttribute(
-					A2($elm$html$Html$Attributes$style, 'cursor', 'not-allowed'))
-				]),
-			otherwise: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, $avh4$elm_color$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, $avh4$elm_color$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, $avh4$elm_color$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$alignLeft,
-					$mdgriffith$elm_ui$Element$moveLeft(8)
-				])
-		},
-		elementButton: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$height(
-				$mdgriffith$elm_ui$Element$px(38)),
-				$mdgriffith$elm_ui$Element$width(
-				$mdgriffith$elm_ui$Element$px(58 - 18)),
-				$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-				$mdgriffith$elm_ui$Element$focused(_List_Nil),
-				$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
-			])
-	};
-};
-var $author$project$Widget$Material$switch = $author$project$Internal$Material$Switch$switch;
-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 $author$project$Internal$Material$Tab$tabButton = function (palette) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {color: palette.primary, size: 18},
-					ifDisabled: {color: $author$project$Widget$Material$Color$gray, size: 18},
-					otherwise: {color: palette.primary, size: 18}
-				},
-				text: {contentText: _List_Nil}
-			},
-			elementRow: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$spacing(8),
-					$mdgriffith$elm_ui$Element$centerY,
-					$mdgriffith$elm_ui$Element$centerX
-				])
-		},
-		elementButton: _Utils_ap(
-			$author$project$Widget$Material$Typography$button,
-			_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$Material$Color$fromColor(palette.primary)),
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$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$Internal$Material$Button$baseButton(palette).ifDisabled,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray)),
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-					$mdgriffith$elm_ui$Element$focused(_List_Nil)
-				])),
-		otherwise: _List_Nil
-	};
-};
-var $author$project$Internal$Material$Tab$tab = function (palette) {
-	return {
-		content: {
-			content: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-				]),
-			tabs: {
-				content: $author$project$Internal$Material$Tab$tabButton(palette),
-				elementRow: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$spaceEvenly,
-						$mdgriffith$elm_ui$Element$Border$shadow(
-						$author$project$Widget$Material$Color$shadow(4)),
-						$mdgriffith$elm_ui$Element$spacing(8),
-						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-					])
-			}
-		},
-		elementColumn: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$spacing(8),
-				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-			])
-	};
-};
-var $author$project$Widget$Material$tab = $author$project$Internal$Material$Tab$tab;
-var $author$project$Internal$Material$AppBar$menuTabButton = function (palette) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
-						size: 18
-					},
-					ifDisabled: {color: $author$project$Widget$Material$Color$gray, size: 18},
-					otherwise: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
-						size: 18
-					}
-				},
-				text: {contentText: _List_Nil}
-			},
-			elementRow: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$spacing(8),
-					$mdgriffith$elm_ui$Element$centerY,
-					$mdgriffith$elm_ui$Element$centerX
-				])
-		},
-		elementButton: _Utils_ap(
-			$author$project$Widget$Material$Typography$button,
-			_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$Material$Color$fromColor(
-						$author$project$Widget$Material$Color$accessibleTextColor(palette.primary))),
-					$mdgriffith$elm_ui$Element$alignBottom,
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$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$Internal$Material$Button$baseButton(palette).ifDisabled,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray)),
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-					$mdgriffith$elm_ui$Element$focused(_List_Nil)
-				])),
-		otherwise: _List_Nil
-	};
-};
-var $author$project$Internal$Material$AppBar$tabBar = function (palette) {
-	return A2(
-		$author$project$Internal$Material$AppBar$internalBar,
-		{
-			menuTabButton: $author$project$Internal$Material$AppBar$menuTabButton(palette),
-			title: _Utils_ap(
-				$author$project$Widget$Material$Typography$h6,
-				_List_fromArray(
-					[
-						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
-					]))
-		},
-		palette);
-};
-var $author$project$Widget$Material$tabBar = $author$project$Internal$Material$AppBar$tabBar;
-var $author$project$Widget$Material$textButton = $author$project$Internal$Material$Button$textButton;
-var $author$project$Internal$Material$TextInput$textInput = function (palette) {
-	return {
-		content: {
-			chips: {
-				content: $author$project$Internal$Material$Chip$chip(palette),
-				elementRow: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$spacing(8)
-					])
-			},
-			text: {
-				elementTextInput: _Utils_ap(
-					$author$project$Widget$Material$Color$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),
-							$mdgriffith$elm_ui$Element$centerY
-						]))
-			}
-		},
-		elementRow: _Utils_ap(
-			$author$project$Widget$Material$Color$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$Material$Color$fromColor(
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Border$shadow(
-							$author$project$Widget$Material$Color$shadow(4)),
-							$mdgriffith$elm_ui$Element$Border$color(
-							$author$project$Widget$Material$Color$fromColor(palette.primary))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Border$shadow(
-							$author$project$Widget$Material$Color$shadow(2))
-						]))
-				]))
-	};
-};
-var $author$project$Widget$Material$textInput = $author$project$Internal$Material$TextInput$textInput;
-var $author$project$Internal$Material$Button$toggleButton = function (palette) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.surface),
-						size: 24
-					},
-					ifDisabled: {color: $author$project$Widget$Material$Color$gray, size: 24},
-					otherwise: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.surface),
-						size: 24
-					}
-				},
-				text: {
-					contentText: _List_fromArray(
-						[$mdgriffith$elm_ui$Element$centerX])
-				}
-			},
-			elementRow: _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$Material$Color$textAndBackground(
-						A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.surface)))
-				])
-		},
-		elementButton: _Utils_ap(
-			$author$project$Widget$Material$Typography$button,
-			_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(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.surface))),
-							$mdgriffith$elm_ui$Element$Border$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A3(
-									$author$project$Widget$Material$Color$withShade,
-									palette.on.surface,
-									$author$project$Widget$Material$Color$buttonPressedOpacity,
-									A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))))
-						])),
-					$mdgriffith$elm_ui$Element$focused(_List_Nil),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface))),
-							$mdgriffith$elm_ui$Element$Border$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A3(
-									$author$project$Widget$Material$Color$withShade,
-									palette.on.surface,
-									$author$project$Widget$Material$Color$buttonHoverOpacity,
-									A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))))
-						]))
-				])),
-		ifActive: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonSelectedOpacity, palette.surface))),
-				$mdgriffith$elm_ui$Element$Font$color(
-				$author$project$Widget$Material$Color$fromColor(
-					$author$project$Widget$Material$Color$accessibleTextColor(palette.surface))),
-				$mdgriffith$elm_ui$Element$Border$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A3(
-						$author$project$Widget$Material$Color$withShade,
-						palette.on.surface,
-						$author$project$Widget$Material$Color$buttonSelectedOpacity,
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface)))),
-				$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
-			]),
-		ifDisabled: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(palette.surface)),
-					$mdgriffith$elm_ui$Element$Border$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))),
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray)),
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
-				])),
-		otherwise: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(palette.surface)),
-				$mdgriffith$elm_ui$Element$Font$color(
-				$author$project$Widget$Material$Color$fromColor(
-					$author$project$Widget$Material$Color$accessibleTextColor(palette.surface))),
-				$mdgriffith$elm_ui$Element$Border$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface)))
-			])
-	};
-};
-var $author$project$Widget$Material$toggleButton = $author$project$Internal$Material$Button$toggleButton;
-var $mdgriffith$elm_ui$Element$Font$typeface = $mdgriffith$elm_ui$Internal$Model$Typeface;
-var $author$project$Data$Style$style = function (palette) {
-	return {
-		button: $author$project$Widget$Material$outlinedButton(palette),
-		buttonRow: $author$project$Widget$Material$buttonRow,
-		cardColumn: $author$project$Widget$Material$cardColumn(palette),
-		chipButton: $author$project$Widget$Material$chip(palette),
-		column: $author$project$Widget$Material$column,
-		containedButton: $author$project$Widget$Material$containedButton($author$project$Widget$Material$defaultPalette),
-		container: _Utils_ap(
-			$author$project$Widget$Material$Color$textAndBackground($author$project$Widget$Material$defaultPalette.background),
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Font$family(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Font$typeface('Roboto'),
-							$mdgriffith$elm_ui$Element$Font$sansSerif
-						])),
-					$mdgriffith$elm_ui$Element$Font$size(16),
-					$mdgriffith$elm_ui$Element$Font$letterSpacing(0.5)
-				])),
-		dialog: $author$project$Widget$Material$alertDialog(palette),
-		expansionItem: $author$project$Widget$Material$expansionItem(palette),
-		fullBleedDivider: $author$project$Widget$Material$fullBleedDivider(palette),
-		fullBleedHeader: $author$project$Widget$Material$fullBleedHeader(palette),
-		fullBleedItem: $author$project$Widget$Material$fullBleedItem($author$project$Widget$Material$defaultPalette),
-		iconButton: $author$project$Widget$Material$iconButton($author$project$Widget$Material$defaultPalette),
-		imageItem: $author$project$Widget$Material$imageItem(palette),
-		insetDivider: $author$project$Widget$Material$insetDivider(palette),
-		insetHeader: $author$project$Widget$Material$insetHeader(palette),
-		insetItem: $author$project$Widget$Material$insetItem(palette),
-		menuBar: $author$project$Widget$Material$menuBar($author$project$Widget$Material$defaultPalette),
-		middleDivider: $author$project$Widget$Material$middleDivider(palette),
-		multiLineItem: $author$project$Widget$Material$multiLineItem(palette),
-		outlinedButton: $author$project$Widget$Material$outlinedButton($author$project$Widget$Material$defaultPalette),
-		primaryButton: $author$project$Widget$Material$containedButton(palette),
-		progressIndicator: $author$project$Widget$Material$progressIndicator(palette),
-		row: $author$project$Widget$Material$row,
-		searchFill: {
-			content: {
-				chips: {
-					content: $author$project$Widget$Material$chip($author$project$Widget$Material$defaultPalette),
-					elementRow: _List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$spacing(8)
-						])
-				},
-				text: {
-					elementTextInput: _Utils_ap(
-						$author$project$Widget$Material$Color$textAndBackground($author$project$Widget$Material$defaultPalette.surface),
-						_List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$Border$width(0),
-								$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-								$mdgriffith$elm_ui$Element$focused(_List_Nil)
-							]))
-				}
-			},
-			elementRow: _Utils_ap(
-				$author$project$Widget$Material$Color$textAndBackground($author$project$Widget$Material$defaultPalette.surface),
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height(
-						$mdgriffith$elm_ui$Element$px(56))
-					]))
-		},
-		selectButton: $author$project$Widget$Material$toggleButton(palette),
-		selectItem: $author$project$Widget$Material$selectItem($author$project$Widget$Material$defaultPalette),
-		sheetButton: $author$project$Widget$Material$selectItem($author$project$Widget$Material$defaultPalette),
-		sideSheet: $author$project$Widget$Material$sideSheet(palette),
-		snackbar: $author$project$Widget$Material$snackbar($author$project$Widget$Material$defaultPalette),
-		sortTable: $author$project$Widget$Material$sortTable(palette),
-		_switch: $author$project$Widget$Material$switch(palette),
-		tab: $author$project$Widget$Material$tab(palette),
-		tabBar: $author$project$Widget$Material$tabBar($author$project$Widget$Material$defaultPalette),
-		textButton: $author$project$Widget$Material$textButton($author$project$Widget$Material$defaultPalette),
-		textInput: $author$project$Widget$Material$textInput(palette)
-	};
-};
-var $author$project$Data$Theme$toStyle = function (theme) {
-	if (theme.$ === 'Material') {
-		return $author$project$Data$Style$style($author$project$Widget$Material$defaultPalette);
-	} else {
-		return $author$project$Data$Style$style($author$project$Widget$Material$darkPalette);
-	}
-};
-var $author$project$Main$ChangedSearch = function (a) {
-	return {$: 'ChangedSearch', a: a};
-};
-var $author$project$Main$ChangedSidebar = function (a) {
-	return {$: 'ChangedSidebar', a: a};
-};
-var $author$project$Data$Theme$DarkMaterial = {$: 'DarkMaterial'};
-var $author$project$Main$JumpTo = function (a) {
-	return {$: 'JumpTo', a: a};
-};
-var $author$project$Main$LeftSheet = {$: 'LeftSheet'};
-var $author$project$Main$Load = function (a) {
-	return {$: 'Load', a: a};
-};
-var $mdgriffith$elm_ui$Element$Phone = {$: 'Phone'};
-var $author$project$Main$RightSheet = {$: 'RightSheet'};
-var $author$project$Main$Search = {$: 'Search'};
-var $author$project$Main$SetTheme = function (a) {
-	return {$: 'SetTheme', a: a};
-};
-var $mdgriffith$elm_ui$Element$Tablet = {$: 'Tablet'};
-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$book = A2(
-	$feathericons$elm_feather$FeatherIcons$makeBuilder,
-	'book',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M4 19.5A2.5 2.5 0 0 1 6.5 17H20')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Widget$Icon$elmFeather = F2(
-	function (fun, icon) {
-		return function (_v0) {
-			var size = _v0.size;
-			var color = _v0.color;
-			return A2(
-				$mdgriffith$elm_ui$Element$el,
-				_List_Nil,
-				$mdgriffith$elm_ui$Element$html(
-					A2(
-						fun,
-						_List_fromArray(
-							[
-								$elm$svg$Svg$Attributes$width(
-								$elm$core$String$fromInt(size)),
-								$elm$svg$Svg$Attributes$height(
-								$elm$core$String$fromInt(size)),
-								$elm$svg$Svg$Attributes$stroke(
-								$avh4$elm_color$Color$toCssString(color))
-							]),
-						icon)));
-		};
-	});
-var $elm$core$Array$fromListHelp = F3(
-	function (list, nodeList, nodeListSize) {
-		fromListHelp:
-		while (true) {
-			var _v0 = A2($elm$core$Elm$JsArray$initializeFromList, $elm$core$Array$branchFactor, list);
-			var jsArray = _v0.a;
-			var remainingItems = _v0.b;
-			if (_Utils_cmp(
-				$elm$core$Elm$JsArray$length(jsArray),
-				$elm$core$Array$branchFactor) < 0) {
-				return A2(
-					$elm$core$Array$builderToArray,
-					true,
-					{nodeList: nodeList, nodeListSize: nodeListSize, tail: jsArray});
-			} else {
-				var $temp$list = remainingItems,
-					$temp$nodeList = A2(
-					$elm$core$List$cons,
-					$elm$core$Array$Leaf(jsArray),
-					nodeList),
-					$temp$nodeListSize = nodeListSize + 1;
-				list = $temp$list;
-				nodeList = $temp$nodeList;
-				nodeListSize = $temp$nodeListSize;
-				continue fromListHelp;
-			}
-		}
-	});
-var $elm$core$Array$fromList = function (list) {
-	if (!list.b) {
-		return $elm$core$Array$empty;
-	} else {
-		return A3($elm$core$Array$fromListHelp, list, _List_Nil, 0);
-	}
-};
-var $elm$core$Array$bitMask = 4294967295 >>> (32 - $elm$core$Array$shiftStep);
-var $elm$core$Elm$JsArray$unsafeGet = _JsArray_unsafeGet;
-var $elm$core$Array$getHelp = F3(
-	function (shift, index, tree) {
-		getHelp:
-		while (true) {
-			var pos = $elm$core$Array$bitMask & (index >>> shift);
-			var _v0 = A2($elm$core$Elm$JsArray$unsafeGet, pos, tree);
-			if (_v0.$ === 'SubTree') {
-				var subTree = _v0.a;
-				var $temp$shift = shift - $elm$core$Array$shiftStep,
-					$temp$index = index,
-					$temp$tree = subTree;
-				shift = $temp$shift;
-				index = $temp$index;
-				tree = $temp$tree;
-				continue getHelp;
-			} else {
-				var values = _v0.a;
-				return A2($elm$core$Elm$JsArray$unsafeGet, $elm$core$Array$bitMask & index, values);
-			}
-		}
-	});
-var $elm$core$Array$tailIndex = function (len) {
-	return (len >>> 5) << 5;
-};
-var $elm$core$Array$get = F2(
-	function (index, _v0) {
-		var len = _v0.a;
-		var startShift = _v0.b;
-		var tree = _v0.c;
-		var tail = _v0.d;
-		return ((index < 0) || (_Utils_cmp(index, len) > -1)) ? $elm$core$Maybe$Nothing : ((_Utils_cmp(
-			index,
-			$elm$core$Array$tailIndex(len)) > -1) ? $elm$core$Maybe$Just(
-			A2($elm$core$Elm$JsArray$unsafeGet, $elm$core$Array$bitMask & index, tail)) : $elm$core$Maybe$Just(
-			A3($elm$core$Array$getHelp, startShift, index, tree)));
-	});
-var $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 $author$project$Widget$Layout$getDeviceClass = function (window) {
-	return $mdgriffith$elm_ui$Element$classifyDevice(window)._class;
-};
-var $feathericons$elm_feather$FeatherIcons$github = A2(
-	$feathericons$elm_feather$FeatherIcons$makeBuilder,
-	'github',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22')
-				]),
-			_List_Nil)
-		]));
-var $mdgriffith$elm_ui$Internal$Model$InFront = {$: 'InFront'};
-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 $author$project$Internal$Item$toItem = F2(
-	function (style, element) {
-		return function (attr) {
-			return A2(
-				$mdgriffith$elm_ui$Element$el,
-				_Utils_ap(attr, style.element),
-				element(style.content));
-		};
-	});
-var $author$project$Internal$Item$asItem = function (element) {
-	return A2(
-		$author$project$Internal$Item$toItem,
-		{content: _Utils_Tuple0, element: _List_Nil},
-		$elm$core$Basics$always(element));
-};
-var $author$project$Widget$Customize$mapElementColumn = F2(
-	function (fun, a) {
-		return _Utils_update(
-			a,
-			{
-				elementColumn: fun(a.elementColumn)
-			});
-	});
-var $author$project$Widget$Customize$elementColumn = F2(
-	function (list, a) {
-		return A2(
-			$author$project$Widget$Customize$mapElementColumn,
-			function (b) {
-				return _Utils_ap(b, list);
-			},
-			a);
-	});
-var $mdgriffith$elm_ui$Internal$Model$AsColumn = {$: 'AsColumn'};
-var $mdgriffith$elm_ui$Internal$Model$asColumn = $mdgriffith$elm_ui$Internal$Model$AsColumn;
-var $mdgriffith$elm_ui$Element$column = F2(
-	function (attrs, children) {
-		return A4(
-			$mdgriffith$elm_ui$Internal$Model$element,
-			$mdgriffith$elm_ui$Internal$Model$asColumn,
-			$mdgriffith$elm_ui$Internal$Model$div,
-			A2(
-				$elm$core$List$cons,
-				$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentTop + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.contentLeft)),
-				A2(
-					$elm$core$List$cons,
-					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
-					A2(
-						$elm$core$List$cons,
-						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
-						attrs))),
-			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
-	});
-var $author$project$Widget$Customize$mapElement = F2(
-	function (fun, a) {
-		return _Utils_update(
-			a,
-			{
-				element: fun(a.element)
-			});
-	});
-var $author$project$Widget$Customize$element = F2(
-	function (list, a) {
-		return A2(
-			$author$project$Widget$Customize$mapElement,
-			function (b) {
-				return _Utils_ap(b, list);
-			},
-			a);
-	});
-var $author$project$Internal$List$internal = F2(
-	function (style, list) {
-		return A2(
-			$elm$core$List$indexedMap,
-			F2(
-				function (i, fun) {
-					return fun(
-						_Utils_ap(
-							style.element,
-							($elm$core$List$length(list) === 1) ? style.ifSingleton : ((!i) ? style.ifFirst : (_Utils_eq(
-								i,
-								$elm$core$List$length(list) - 1) ? style.ifLast : style.otherwise))));
-				}),
-			list);
-	});
-var $author$project$Internal$List$itemList = function (style) {
-	return A2(
-		$elm$core$Basics$composeR,
-		$author$project$Internal$List$internal(
-			A2(
-				$author$project$Widget$Customize$element,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
-					]),
-				style.content)),
-		$mdgriffith$elm_ui$Element$column(style.elementColumn));
-};
-var $author$project$Internal$Select$select = function (_v0) {
-	var selected = _v0.selected;
-	var options = _v0.options;
-	var onSelect = _v0.onSelect;
-	return A2(
-		$elm$core$List$indexedMap,
-		F2(
-			function (i, a) {
-				return _Utils_Tuple2(
-					_Utils_eq(
-						selected,
-						$elm$core$Maybe$Just(i)),
-					{
-						icon: a.icon,
-						onPress: onSelect(i),
-						text: a.text
-					});
-			}),
-		options);
-};
+var $mdgriffith$elm_ui$Element$map = $mdgriffith$elm_ui$Internal$Model$map;
 var $mdgriffith$elm_ui$Internal$Model$Button = {$: 'Button'};
 var $elm$json$Json$Encode$bool = _Json_wrap;
 var $elm$html$Html$Attributes$boolProperty = F2(
@@ -17341,88 +13343,6 @@ var $mdgriffith$elm_ui$Element$Input$button = F2(
 				_List_fromArray(
 					[label])));
 	});
-var $mdgriffith$elm_ui$Internal$Model$AsRow = {$: 'AsRow'};
-var $mdgriffith$elm_ui$Internal$Model$asRow = $mdgriffith$elm_ui$Internal$Model$AsRow;
-var $mdgriffith$elm_ui$Element$row = F2(
-	function (attrs, children) {
-		return A4(
-			$mdgriffith$elm_ui$Internal$Model$element,
-			$mdgriffith$elm_ui$Internal$Model$asRow,
-			$mdgriffith$elm_ui$Internal$Model$div,
-			A2(
-				$elm$core$List$cons,
-				$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentLeft + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.contentCenterY)),
-				A2(
-					$elm$core$List$cons,
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
-					A2(
-						$elm$core$List$cons,
-						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
-						attrs))),
-			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
-	});
-var $mdgriffith$elm_ui$Element$text = function (content) {
-	return $mdgriffith$elm_ui$Internal$Model$Text(content);
-};
-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.elementButton,
-				_Utils_eq(b.onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : (selected ? style.ifActive : style.otherwise)),
-			{
-				label: A2(
-					$mdgriffith$elm_ui$Element$row,
-					style.content.elementRow,
-					_List_fromArray(
-						[
-							b.icon(
-							_Utils_eq(b.onPress, $elm$core$Maybe$Nothing) ? style.content.content.icon.ifDisabled : (selected ? style.content.content.icon.ifActive : style.content.content.icon.otherwise)),
-							A2(
-							$mdgriffith$elm_ui$Element$el,
-							style.content.content.text.contentText,
-							$mdgriffith$elm_ui$Element$text(b.text))
-						])),
-				onPress: b.onPress
-			});
-	});
-var $author$project$Internal$Item$selectItem = F2(
-	function (s, select) {
-		return A2(
-			$elm$core$List$map,
-			function (b) {
-				return A2(
-					$author$project$Internal$Item$toItem,
-					s,
-					function (style) {
-						return A2($author$project$Internal$Select$selectButton, style, b);
-					});
-			},
-			$author$project$Internal$Select$select(select));
-	});
-var $author$project$Widget$Layout$leftSheet = F2(
-	function (style, _v0) {
-		var title = _v0.title;
-		var onDismiss = _v0.onDismiss;
-		var menu = _v0.menu;
-		return {
-			content: A2(
-				$author$project$Internal$List$itemList,
-				A2(
-					$author$project$Widget$Customize$elementColumn,
-					_List_fromArray(
-						[$mdgriffith$elm_ui$Element$alignLeft]),
-					style.sheet),
-				A2(
-					$elm$core$List$cons,
-					$author$project$Internal$Item$asItem(title),
-					A2($author$project$Internal$Item$selectItem, style.button, menu))),
-			onDismiss: $elm$core$Maybe$Just(onDismiss)
-		};
-	});
 var $mdgriffith$elm_ui$Internal$Model$Label = function (a) {
 	return {$: 'Label', a: a};
 };
@@ -17451,6 +13371,28 @@ var $author$project$Internal$Button$iconButton = F2(
 				onPress: onPress
 			});
 	});
+var $mdgriffith$elm_ui$Element$Phone = {$: 'Phone'};
+var $mdgriffith$elm_ui$Element$Tablet = {$: 'Tablet'};
+var $mdgriffith$elm_ui$Internal$Model$AsRow = {$: 'AsRow'};
+var $mdgriffith$elm_ui$Internal$Model$asRow = $mdgriffith$elm_ui$Internal$Model$AsRow;
+var $mdgriffith$elm_ui$Element$row = F2(
+	function (attrs, children) {
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asRow,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentLeft + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.contentCenterY)),
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+						attrs))),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
+	});
 var $author$project$Internal$Button$button = F2(
 	function (style, _v0) {
 		var onPress = _v0.onPress;
@@ -17460,7 +13402,12 @@ var $author$project$Internal$Button$button = F2(
 			$mdgriffith$elm_ui$Element$Input$button,
 			_Utils_ap(
 				style.elementButton,
-				_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
+				_Utils_ap(
+					_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Region$description(text)
+						]))),
 			{
 				label: A2(
 					$mdgriffith$elm_ui$Element$row,
@@ -17477,6 +13424,24 @@ var $author$project$Internal$Button$button = F2(
 				onPress: onPress
 			});
 	});
+var $author$project$Widget$Customize$mapElementButton = F2(
+	function (fun, a) {
+		return _Utils_update(
+			a,
+			{
+				elementButton: fun(a.elementButton)
+			});
+	});
+var $author$project$Widget$Customize$elementButton = F2(
+	function (list, a) {
+		return A2(
+			$author$project$Widget$Customize$mapElementButton,
+			function (b) {
+				return _Utils_ap(b, list);
+			},
+			a);
+	});
+var $mdgriffith$elm_ui$Element$none = $mdgriffith$elm_ui$Internal$Model$Empty;
 var $mdgriffith$elm_ui$Element$Input$Placeholder = F2(
 	function (a, b) {
 		return {$: 'Placeholder', a: a, b: b};
@@ -17490,8 +13455,6 @@ 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') {
@@ -17568,17 +13531,18 @@ var $mdgriffith$elm_ui$Element$Input$applyLabel = F3(
 			}
 		}
 	});
+var $elm$html$Html$Attributes$attribute = $elm$virtual_dom$VirtualDom$attribute;
 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$Model$TransformComponent = F2(
+	function (a, b) {
+		return {$: 'TransformComponent', a: a, b: 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(
@@ -17613,13 +13577,76 @@ var $mdgriffith$elm_ui$Element$Input$calcMoveToCompensateForPadding = function (
 };
 var $mdgriffith$elm_ui$Internal$Flag$overflow = $mdgriffith$elm_ui$Internal$Flag$flag(20);
 var $mdgriffith$elm_ui$Element$clip = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$overflow, $mdgriffith$elm_ui$Internal$Style$classes.clip);
-var $mdgriffith$elm_ui$Element$rgb = F3(
-	function (r, g, b) {
-		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, r, g, b, 1);
-	});
+var $mdgriffith$elm_ui$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 $mdgriffith$elm_ui$Element$Input$darkGrey = A3($mdgriffith$elm_ui$Element$rgb, 186 / 255, 189 / 255, 182 / 255);
+var $mdgriffith$elm_ui$Element$paddingXY = F2(
+	function (x, y) {
+		if (_Utils_eq(x, y)) {
+			var f = x;
+			return A2(
+				$mdgriffith$elm_ui$Internal$Model$StyleClass,
+				$mdgriffith$elm_ui$Internal$Flag$padding,
+				A5(
+					$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+					'p-' + $elm$core$String$fromInt(x),
+					f,
+					f,
+					f,
+					f));
+		} else {
+			var yFloat = y;
+			var xFloat = x;
+			return A2(
+				$mdgriffith$elm_ui$Internal$Model$StyleClass,
+				$mdgriffith$elm_ui$Internal$Flag$padding,
+				A5(
+					$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+					'p-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y))),
+					yFloat,
+					xFloat,
+					yFloat,
+					xFloat));
+		}
+	});
 var $mdgriffith$elm_ui$Element$Input$defaultTextPadding = A2($mdgriffith$elm_ui$Element$paddingXY, 12, 12);
+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 $mdgriffith$elm_ui$Element$Input$white = A3($mdgriffith$elm_ui$Element$rgb, 1, 1, 1);
+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$Input$defaultTextBoxStyle = _List_fromArray(
 	[
 		$mdgriffith$elm_ui$Element$Input$defaultTextPadding,
@@ -17639,15 +13666,6 @@ var $mdgriffith$elm_ui$Element$Input$getHeight = function (attr) {
 		return $elm$core$Maybe$Nothing;
 	}
 };
-var $elm$core$List$head = function (list) {
-	if (list.b) {
-		var x = list.a;
-		var xs = list.b;
-		return $elm$core$Maybe$Just(x);
-	} else {
-		return $elm$core$Maybe$Nothing;
-	}
-};
 var $mdgriffith$elm_ui$Element$Input$hiddenLabelAttribute = function (label) {
 	if (label.$ === 'HiddenLabel') {
 		var textLabel = label.a;
@@ -17657,6 +13675,10 @@ var $mdgriffith$elm_ui$Element$Input$hiddenLabelAttribute = function (label) {
 		return $mdgriffith$elm_ui$Internal$Model$NoAttribute;
 	}
 };
+var $mdgriffith$elm_ui$Internal$Model$InFront = {$: 'InFront'};
+var $mdgriffith$elm_ui$Element$inFront = function (element) {
+	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$InFront, element);
+};
 var $mdgriffith$elm_ui$Element$Input$isConstrained = function (len) {
 	isConstrained:
 	while (true) {
@@ -17736,6 +13758,40 @@ var $elm$html$Html$Events$onInput = function (tagger) {
 			$elm$html$Html$Events$alwaysStop,
 			A2($elm$json$Json$Decode$map, tagger, $elm$html$Html$Events$targetValue)));
 };
+var $mdgriffith$elm_ui$Internal$Model$paddingName = F4(
+	function (top, right, bottom, left) {
+		return 'pad-' + ($elm$core$String$fromInt(top) + ('-' + ($elm$core$String$fromInt(right) + ('-' + ($elm$core$String$fromInt(bottom) + ('-' + $elm$core$String$fromInt(left)))))));
+	});
+var $mdgriffith$elm_ui$Element$paddingEach = function (_v0) {
+	var top = _v0.top;
+	var right = _v0.right;
+	var bottom = _v0.bottom;
+	var left = _v0.left;
+	if (_Utils_eq(top, right) && (_Utils_eq(top, bottom) && _Utils_eq(top, left))) {
+		var topFloat = top;
+		return A2(
+			$mdgriffith$elm_ui$Internal$Model$StyleClass,
+			$mdgriffith$elm_ui$Internal$Flag$padding,
+			A5(
+				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+				'p-' + $elm$core$String$fromInt(top),
+				topFloat,
+				topFloat,
+				topFloat,
+				topFloat));
+	} else {
+		return A2(
+			$mdgriffith$elm_ui$Internal$Model$StyleClass,
+			$mdgriffith$elm_ui$Internal$Flag$padding,
+			A5(
+				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+				A4($mdgriffith$elm_ui$Internal$Model$paddingName, top, right, bottom, left),
+				top,
+				right,
+				bottom,
+				left));
+	}
+};
 var $mdgriffith$elm_ui$Element$Input$isFill = function (len) {
 	isFill:
 	while (true) {
@@ -18463,6 +14519,5848 @@ var $author$project$Internal$AppBar$menuBar = F2(
 			m);
 	});
 var $author$project$Widget$menuBar = $author$project$Internal$AppBar$menuBar;
+var $elm$core$Basics$pow = _Basics_pow;
+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 $noahzgordon$elm_color_extra$Color$Accessibility$luminance = function (cl) {
+	var f = function (intensity) {
+		return (intensity <= 0.03928) ? (intensity / 12.92) : A2($elm$core$Basics$pow, (intensity + 0.055) / 1.055, 2.4);
+	};
+	var _v0 = function (a) {
+		return _Utils_Tuple3(
+			f(a.red),
+			f(a.green),
+			f(a.blue));
+	}(
+		$avh4$elm_color$Color$toRgba(cl));
+	var r = _v0.a;
+	var g = _v0.b;
+	var b = _v0.c;
+	return ((0.2126 * r) + (0.7152 * g)) + (0.0722 * b);
+};
+var $author$project$Widget$Material$Color$accessibleTextColor = function (color) {
+	var l = 1 + ($avh4$elm_color$Color$toRgba(color).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(color) - 1));
+	var ratioBlack = 1.05 / (l + 0.05);
+	var ratioWhite = (l + 0.05) / 0.05;
+	return (_Utils_cmp(ratioBlack, ratioWhite) < 0) ? A3($avh4$elm_color$Color$rgb255, 0, 0, 0) : A3($avh4$elm_color$Color$rgb255, 255, 255, 255);
+};
+var $mdgriffith$elm_ui$Internal$Model$Right = {$: 'Right'};
+var $mdgriffith$elm_ui$Element$alignRight = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$Right);
+var $author$project$Widget$Material$Typography$button = _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 $mdgriffith$elm_ui$Internal$Model$CenterY = {$: 'CenterY'};
+var $mdgriffith$elm_ui$Element$centerY = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$CenterY);
+var $elm$core$Basics$composeR = F3(
+	function (f, g, x) {
+		return g(
+			f(x));
+	});
+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 $elm$core$Basics$clamp = F3(
+	function (low, high, number) {
+		return (_Utils_cmp(number, low) < 0) ? low : ((_Utils_cmp(number, high) > 0) ? high : number);
+	});
+var $avh4$elm_color$Color$rgb = F3(
+	function (r, g, b) {
+		return A4($avh4$elm_color$Color$RgbaSpace, r, g, b, 1.0);
+	});
+var $noahzgordon$elm_color_extra$Color$Convert$xyzToColor = function (_v0) {
+	var x = _v0.x;
+	var y = _v0.y;
+	var z = _v0.z;
+	var z_ = z / 100;
+	var y_ = y / 100;
+	var x_ = x / 100;
+	var r = ((x_ * 3.2404542) + (y_ * (-1.5371385))) + (z_ * (-0.4986));
+	var g = ((x_ * (-0.969266)) + (y_ * 1.8760108)) + (z_ * 4.1556e-2);
+	var c = function (ch) {
+		var ch_ = (ch > 3.1308e-3) ? ((1.055 * A2($elm$core$Basics$pow, ch, 1 / 2.4)) - 5.5e-2) : (12.92 * ch);
+		return A3($elm$core$Basics$clamp, 0, 1, ch_);
+	};
+	var b = ((x_ * 5.56434e-2) + (y_ * (-0.2040259))) + (z_ * 1.0572252);
+	return A3(
+		$avh4$elm_color$Color$rgb,
+		c(r),
+		c(g),
+		c(b));
+};
+var $noahzgordon$elm_color_extra$Color$Convert$labToColor = A2($elm$core$Basics$composeR, $noahzgordon$elm_color_extra$Color$Convert$labToXyz, $noahzgordon$elm_color_extra$Color$Convert$xyzToColor);
+var $elm$core$Basics$sin = _Basics_sin;
+var $author$project$Widget$Material$Color$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 $avh4$elm_color$Color$fromRgba = function (components) {
+	return A4($avh4$elm_color$Color$RgbaSpace, components.red, components.green, components.blue, components.alpha);
+};
+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$Material$Color$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$Material$Color$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$Material$Color$fromCIELCH(
+						A2(
+							fun,
+							$author$project$Widget$Material$Color$toCIELCH(c1),
+							$author$project$Widget$Material$Color$toCIELCH(c2))))));
+	});
+var $author$project$Internal$Material$Palette$gray = function (palette) {
+	return A3($author$project$Widget$Material$Color$withShade, palette.on.surface, 0.5, palette.surface);
+};
+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$Model$Px = function (a) {
+	return {$: 'Px', a: a};
+};
+var $mdgriffith$elm_ui$Element$px = $mdgriffith$elm_ui$Internal$Model$Px;
+var $author$project$Internal$Material$Button$baseButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					otherwise: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					}
+				},
+				text: {
+					contentText: _List_fromArray(
+						[$mdgriffith$elm_ui$Element$centerX])
+				}
+			},
+			elementRow: _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
+				])
+		},
+		elementButton: _Utils_ap(
+			$author$project$Widget$Material$Typography$button,
+			_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'))
+			]),
+		otherwise: _List_Nil
+	};
+};
+var $author$project$Widget$Material$Color$buttonFocusOpacity = 0.24;
+var $author$project$Widget$Material$Color$buttonHoverOpacity = 0.08;
+var $author$project$Widget$Material$Color$buttonPressedOpacity = 0.32;
+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 $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 $mdgriffith$elm_ui$Element$fromRgb = function (clr) {
+	return A4($mdgriffith$elm_ui$Internal$Model$Rgba, clr.red, clr.green, clr.blue, clr.alpha);
+};
+var $author$project$Widget$Material$Color$fromColor = A2($elm$core$Basics$composeR, $avh4$elm_color$Color$toRgba, $mdgriffith$elm_ui$Element$fromRgb);
+var $mdgriffith$elm_ui$Internal$Model$Active = {$: 'Active'};
+var $mdgriffith$elm_ui$Internal$Flag$active = $mdgriffith$elm_ui$Internal$Flag$flag(32);
+var $mdgriffith$elm_ui$Element$mouseDown = function (decs) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$active,
+		A2(
+			$mdgriffith$elm_ui$Internal$Model$PseudoSelector,
+			$mdgriffith$elm_ui$Internal$Model$Active,
+			$mdgriffith$elm_ui$Internal$Model$unwrapDecorations(decs)));
+};
+var $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 $author$project$Widget$Material$Color$scaleOpacity = function (opacity) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$avh4$elm_color$Color$toRgba,
+		A2(
+			$elm$core$Basics$composeR,
+			function (color) {
+				return _Utils_update(
+					color,
+					{alpha: color.alpha * opacity});
+			},
+			$avh4$elm_color$Color$fromRgba));
+};
+var $author$project$Internal$Material$Button$iconButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {color: palette.primary, size: 18},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					otherwise: {color: palette.primary, size: 18}
+				},
+				text: {
+					contentText: _List_fromArray(
+						[$mdgriffith$elm_ui$Element$centerX])
+				}
+			},
+			elementRow: _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
+				])
+		},
+		elementButton: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(48)),
+					$mdgriffith$elm_ui$Element$width(
+					A2($mdgriffith$elm_ui$Element$minimum, 48, $mdgriffith$elm_ui$Element$shrink)),
+					$mdgriffith$elm_ui$Element$Border$rounded(24),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.surface)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.surface)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface)))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface)))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		otherwise: _List_Nil
+	};
+};
+var $author$project$Widget$Customize$mapContent = F2(
+	function (fun, a) {
+		return _Utils_update(
+			a,
+			{
+				content: fun(a.content)
+			});
+	});
+var $elm$svg$Svg$Attributes$d = _VirtualDom_attribute('d');
+var $elm$svg$Svg$Attributes$fill = _VirtualDom_attribute('fill');
+var $elm$svg$Svg$Attributes$height = _VirtualDom_attribute('height');
+var $elm$svg$Svg$Attributes$stroke = _VirtualDom_attribute('stroke');
+var $avh4$elm_color$Color$toCssString = function (_v0) {
+	var r = _v0.a;
+	var g = _v0.b;
+	var b = _v0.c;
+	var a = _v0.d;
+	var roundTo = function (x) {
+		return $elm$core$Basics$round(x * 1000) / 1000;
+	};
+	var pct = function (x) {
+		return $elm$core$Basics$round(x * 10000) / 100;
+	};
+	return $elm$core$String$concat(
+		_List_fromArray(
+			[
+				'rgba(',
+				$elm$core$String$fromFloat(
+				pct(r)),
+				'%,',
+				$elm$core$String$fromFloat(
+				pct(g)),
+				'%,',
+				$elm$core$String$fromFloat(
+				pct(b)),
+				'%,',
+				$elm$core$String$fromFloat(
+				roundTo(a)),
+				')'
+			]));
+};
+var $elm$svg$Svg$Attributes$viewBox = _VirtualDom_attribute('viewBox');
+var $elm$svg$Svg$Attributes$width = _VirtualDom_attribute('width');
+var $author$project$Internal$Material$Icon$icon = function (_v0) {
+	var viewBox = _v0.viewBox;
+	var size = _v0.size;
+	var color = _v0.color;
+	return A2(
+		$elm$core$Basics$composeR,
+		$elm$svg$Svg$svg(
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$height(
+					$elm$core$String$fromInt(size)),
+					$elm$svg$Svg$Attributes$stroke(
+					$avh4$elm_color$Color$toCssString(color)),
+					$elm$svg$Svg$Attributes$fill(
+					$avh4$elm_color$Color$toCssString(color)),
+					$elm$svg$Svg$Attributes$viewBox(viewBox),
+					$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$svg$Svg$path = $elm$svg$Svg$trustedNode('path');
+var $author$project$Internal$Material$Icon$more_vert = function (_v0) {
+	var size = _v0.size;
+	var color = _v0.color;
+	return A2(
+		$author$project$Internal$Material$Icon$icon,
+		{color: color, size: size, viewBox: '0 0 48 48'},
+		_List_fromArray(
+			[
+				A2(
+				$elm$svg$Svg$path,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$d('M24 16c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 4c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z')
+					]),
+				_List_Nil)
+			]));
+};
+var $author$project$Internal$Material$Icon$search = function (_v0) {
+	var size = _v0.size;
+	var color = _v0.color;
+	return A2(
+		$author$project$Internal$Material$Icon$icon,
+		{color: color, size: size, viewBox: '0 0 48 48'},
+		_List_fromArray(
+			[
+				A2(
+				$elm$svg$Svg$path,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$d('M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z')
+					]),
+				_List_Nil)
+			]));
+};
+var $author$project$Widget$Customize$mapElementTextInput = F2(
+	function (fun, a) {
+		return _Utils_update(
+			a,
+			{
+				elementTextInput: fun(a.elementTextInput)
+			});
+	});
+var $author$project$Widget$Customize$elementTextInput = F2(
+	function (list, a) {
+		return A2(
+			$author$project$Widget$Customize$mapElementTextInput,
+			function (b) {
+				return _Utils_ap(b, list);
+			},
+			a);
+	});
+var $author$project$Widget$Customize$mapElementRow = F2(
+	function (fun, a) {
+		return _Utils_update(
+			a,
+			{
+				elementRow: fun(a.elementRow)
+			});
+	});
+var $mdgriffith$elm_ui$Internal$Model$Max = F2(
+	function (a, b) {
+		return {$: 'Max', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Element$maximum = F2(
+	function (i, l) {
+		return A2($mdgriffith$elm_ui$Internal$Model$Max, i, l);
+	});
+var $author$project$Widget$Material$Color$buttonDisabledOpacity = 0.38;
+var $author$project$Widget$Material$Color$buttonSelectedOpacity = 0.16;
+var $author$project$Internal$Material$Palette$lightGray = function (palette) {
+	return A3($author$project$Widget$Material$Color$withShade, palette.on.surface, 0.14, palette.surface);
+};
+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$rgba255 = F4(
+	function (red, green, blue, a) {
+		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, red / 255, green / 255, blue / 255, a);
+	});
+var $author$project$Widget$Material$Color$shadow = function (_float) {
+	return {
+		blur: _float,
+		color: A4($mdgriffith$elm_ui$Element$rgba255, 0, 0, 0, 0.2),
+		offset: _Utils_Tuple2(0, _float),
+		size: 0
+	};
+};
+var $author$project$Widget$Material$Color$textAndBackground = function (color) {
+	return _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Background$color(
+			$author$project$Widget$Material$Color$fromColor(color)),
+			$mdgriffith$elm_ui$Element$Font$color(
+			$author$project$Widget$Material$Color$fromColor(
+				$author$project$Widget$Material$Color$accessibleTextColor(color)))
+		]);
+};
+var $author$project$Internal$Material$Chip$chip = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(
+							$author$project$Internal$Material$Palette$lightGray(palette)),
+						size: 18
+					},
+					ifDisabled: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(
+							$author$project$Internal$Material$Palette$lightGray(palette)),
+						size: 18
+					},
+					otherwise: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(
+							$author$project$Internal$Material$Palette$lightGray(palette)),
+						size: 18
+					}
+				},
+				text: {contentText: _List_Nil}
+			},
+			elementRow: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$spacing(8),
+					$mdgriffith$elm_ui$Element$paddingEach(
+					{bottom: 0, left: 8, right: 0, top: 0}),
+					$mdgriffith$elm_ui$Element$centerY
+				])
+		},
+		elementButton: _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(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Material$Color$fromColor(
+							A3(
+								$author$project$Widget$Material$Color$withShade,
+								palette.on.surface,
+								$author$project$Widget$Material$Color$buttonPressedOpacity,
+								$author$project$Internal$Material$Palette$lightGray(palette))))
+					])),
+				$mdgriffith$elm_ui$Element$focused(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Material$Color$fromColor(
+							A3(
+								$author$project$Widget$Material$Color$withShade,
+								palette.on.surface,
+								$author$project$Widget$Material$Color$buttonFocusOpacity,
+								$author$project$Internal$Material$Palette$lightGray(palette))))
+					])),
+				$mdgriffith$elm_ui$Element$mouseOver(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Material$Color$fromColor(
+							A3(
+								$author$project$Widget$Material$Color$withShade,
+								palette.on.surface,
+								$author$project$Widget$Material$Color$buttonHoverOpacity,
+								$author$project$Internal$Material$Palette$lightGray(palette))))
+					]))
+			]),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A3(
+						$author$project$Widget$Material$Color$withShade,
+						palette.on.surface,
+						$author$project$Widget$Material$Color$buttonSelectedOpacity,
+						$author$project$Internal$Material$Palette$lightGray(palette)))),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Widget$Material$Color$accessibleTextColor(
+						$author$project$Internal$Material$Palette$lightGray(palette)))),
+				$mdgriffith$elm_ui$Element$Border$shadow(
+				$author$project$Widget$Material$Color$shadow(4))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_Utils_ap(
+				$author$project$Widget$Material$Color$textAndBackground(
+					A3(
+						$author$project$Widget$Material$Color$withShade,
+						palette.on.surface,
+						$author$project$Widget$Material$Color$buttonDisabledOpacity,
+						$author$project$Internal$Material$Palette$lightGray(palette))),
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+						$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+						$mdgriffith$elm_ui$Element$focused(_List_Nil)
+					]))),
+		otherwise: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Internal$Material$Palette$lightGray(palette))),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Widget$Material$Color$accessibleTextColor(
+						$author$project$Internal$Material$Palette$lightGray(palette))))
+			])
+	};
+};
+var $author$project$Internal$Material$TextInput$textInputBase = function (palette) {
+	return {
+		content: {
+			chips: {
+				content: $author$project$Internal$Material$Chip$chip(palette),
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spacing(8)
+					])
+			},
+			text: {
+				elementTextInput: _Utils_ap(
+					$author$project$Widget$Material$Color$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)
+						]))
+			}
+		},
+		elementRow: $author$project$Widget$Material$Color$textAndBackground(palette.surface)
+	};
+};
+var $author$project$Internal$Material$TextInput$searchInput = function (palette) {
+	return A2(
+		$author$project$Widget$Customize$mapContent,
+		function (record) {
+			return _Utils_update(
+				record,
+				{
+					text: A2(
+						$author$project$Widget$Customize$elementTextInput,
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Border$width(0),
+								A2($mdgriffith$elm_ui$Element$paddingXY, 8, 8),
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(32)),
+								$mdgriffith$elm_ui$Element$width(
+								A2($mdgriffith$elm_ui$Element$maximum, 360, $mdgriffith$elm_ui$Element$fill))
+							]),
+						record.text)
+				});
+		},
+		A2(
+			$author$project$Widget$Customize$mapElementRow,
+			$elm$core$Basics$always(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$alignRight,
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 8),
+						$mdgriffith$elm_ui$Element$Border$rounded(4)
+					])),
+			$author$project$Internal$Material$TextInput$textInputBase(palette)));
+};
+var $author$project$Internal$Material$AppBar$internalBar = F2(
+	function (content, palette) {
+		return {
+			content: {
+				actions: {
+					content: {
+						button: A2(
+							$author$project$Widget$Customize$mapContent,
+							$author$project$Widget$Customize$mapContent(
+								function (record) {
+									return _Utils_update(
+										record,
+										{
+											icon: {
+												ifActive: {
+													color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
+													size: record.icon.ifActive.size
+												},
+												ifDisabled: record.icon.ifDisabled,
+												otherwise: {
+													color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
+													size: record.icon.otherwise.size
+												}
+											}
+										});
+								}),
+							$author$project$Internal$Material$Button$iconButton(palette)),
+						moreVerticalIcon: $author$project$Internal$Material$Icon$more_vert,
+						searchIcon: $author$project$Internal$Material$Icon$search
+					},
+					elementRow: _List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$alignRight,
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
+						])
+				},
+				menu: {
+					content: content,
+					elementRow: _List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+							$mdgriffith$elm_ui$Element$spacing(8)
+						])
+				},
+				search: $author$project$Internal$Material$TextInput$searchInput(palette)
+			},
+			elementRow: _Utils_ap(
+				$author$project$Widget$Material$Color$textAndBackground(palette.primary),
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$padding(0),
+						$mdgriffith$elm_ui$Element$spacing(8),
+						$mdgriffith$elm_ui$Element$height(
+						$mdgriffith$elm_ui$Element$px(56)),
+						$mdgriffith$elm_ui$Element$width(
+						A2($mdgriffith$elm_ui$Element$minimum, 360, $mdgriffith$elm_ui$Element$fill))
+					]))
+		};
+	});
+var $author$project$Internal$Material$Icon$menu = function (_v0) {
+	var size = _v0.size;
+	var color = _v0.color;
+	return A2(
+		$author$project$Internal$Material$Icon$icon,
+		{color: color, size: size, viewBox: '0 0 48 48'},
+		_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$Internal$Material$AppBar$menuBar = $author$project$Internal$Material$AppBar$internalBar(
+	{
+		menuIcon: $author$project$Internal$Material$Icon$menu,
+		title: _Utils_ap(
+			$author$project$Widget$Material$Typography$h6,
+			_List_fromArray(
+				[
+					A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+				]))
+	});
+var $author$project$Widget$Material$menuBar = $author$project$Internal$Material$AppBar$menuBar;
+var $elm$core$List$singleton = function (value) {
+	return _List_fromArray(
+		[value]);
+};
+var $author$project$UIExplorer$ChangeDarkTheme = function (a) {
+	return {$: 'ChangeDarkTheme', a: a};
+};
+var $author$project$UIExplorer$TypingSearchText = function (a) {
+	return {$: 'TypingSearchText', a: a};
+};
+var $author$project$Internal$Item$toItem = F2(
+	function (style, element) {
+		return function (attr) {
+			return A2(
+				$mdgriffith$elm_ui$Element$el,
+				_Utils_ap(attr, style.element),
+				element(style.content));
+		};
+	});
+var $author$project$Internal$Item$asItem = function (element) {
+	return A2(
+		$author$project$Internal$Item$toItem,
+		{content: _Utils_Tuple0, element: _List_Nil},
+		$elm$core$Basics$always(element));
+};
+var $author$project$Widget$asItem = $author$project$Internal$Item$asItem;
+var $author$project$UIExplorer$PressedColorBlindOption = function (a) {
+	return {$: 'PressedColorBlindOption', a: a};
+};
+var $author$project$UIExplorer$ToggledColorBlindGroup = {$: 'ToggledColorBlindGroup'};
+var $author$project$UIExplorer$colorBlindOptionToString = function (colorBlindOption) {
+	switch (colorBlindOption.$) {
+		case 'Protanopia':
+			return 'Protanopia';
+		case 'Protanomaly':
+			return 'Protanomaly';
+		case 'Deuteranopia':
+			return 'Deuteranopia';
+		case 'Deuteranomaly':
+			return 'Deuteranomaly';
+		case 'Tritanopia':
+			return 'Tritanopia';
+		case 'Tritanomaly':
+			return 'Tritanomaly';
+		case 'Achromatopsia':
+			return 'Achromatopsia';
+		case 'Achromatomaly':
+			return 'Achromatomaly';
+		default:
+			return 'Blind';
+	}
+};
+var $author$project$UIExplorer$darkerGray = A3($mdgriffith$elm_ui$Element$rgb255, 20, 30, 40);
+var $mdgriffith$elm_ui$Internal$Model$Paragraph = {$: 'Paragraph'};
+var $mdgriffith$elm_ui$Element$paragraph = F2(
+	function (attrs, children) {
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asParagraph,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$Paragraph),
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$spacing(5),
+						attrs))),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
+	});
+var $author$project$Internal$Item$insetItem = F2(
+	function (s, _v0) {
+		var onPress = _v0.onPress;
+		var text = _v0.text;
+		var icon = _v0.icon;
+		var content = _v0.content;
+		return A2(
+			$author$project$Internal$Item$toItem,
+			s,
+			function (style) {
+				return A2(
+					$mdgriffith$elm_ui$Element$Input$button,
+					_Utils_ap(
+						style.elementButton,
+						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
+					{
+						label: A2(
+							$mdgriffith$elm_ui$Element$row,
+							style.content.elementRow,
+							_List_fromArray(
+								[
+									A2(
+									$mdgriffith$elm_ui$Element$el,
+									style.content.content.icon.element,
+									icon(style.content.content.icon.content)),
+									A2(
+									$mdgriffith$elm_ui$Element$el,
+									style.content.content.text.elementText,
+									A2(
+										$mdgriffith$elm_ui$Element$paragraph,
+										_List_Nil,
+										$elm$core$List$singleton(
+											$mdgriffith$elm_ui$Element$text(text)))),
+									content(style.content.content.content)
+								])),
+						onPress: onPress
+					});
+			});
+	});
+var $author$project$Internal$Item$expansionItem = F2(
+	function (s, _v0) {
+		var icon = _v0.icon;
+		var text = _v0.text;
+		var onToggle = _v0.onToggle;
+		var content = _v0.content;
+		var isExpanded = _v0.isExpanded;
+		return A2(
+			$elm$core$List$cons,
+			A2(
+				$author$project$Internal$Item$insetItem,
+				s.item,
+				{
+					content: isExpanded ? s.collapseIcon : s.expandIcon,
+					icon: icon,
+					onPress: $elm$core$Maybe$Just(
+						onToggle(!isExpanded)),
+					text: text
+				}),
+			isExpanded ? content : _List_Nil);
+	});
+var $author$project$Widget$expansionItem = function () {
+	var fun = $author$project$Internal$Item$expansionItem;
+	return fun;
+}();
+var $author$project$Internal$Material$Icon$expand_less = function (_v0) {
+	var size = _v0.size;
+	var color = _v0.color;
+	return A2(
+		$author$project$Internal$Material$Icon$icon,
+		{color: color, size: size, viewBox: '0 0 48 48'},
+		_List_fromArray(
+			[
+				A2(
+				$elm$svg$Svg$path,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$d('M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z')
+					]),
+				_List_Nil)
+			]));
+};
+var $author$project$Internal$Material$Icon$expand_more = function (_v0) {
+	var size = _v0.size;
+	var color = _v0.color;
+	return A2(
+		$author$project$Internal$Material$Icon$icon,
+		{color: color, size: size, viewBox: '0 0 48 48'},
+		_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$Internal$Material$Item$insetItem = function (palette) {
+	return {
+		content: {
+			content: {
+				content: {
+					content: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 24
+					},
+					icon: {
+						content: {
+							color: $author$project$Internal$Material$Palette$gray(palette),
+							size: 24
+						},
+						element: _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width(
+								$mdgriffith$elm_ui$Element$px(40)),
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(24))
+							])
+					},
+					text: {
+						elementText: _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+							])
+					}
+				},
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spacing(16),
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+					])
+			},
+			elementButton: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$padding(16)
+				]),
+			ifDisabled: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$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', 'default'))
+				]),
+			otherwise: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonPressedOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonFocusOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonHoverOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						]))
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$padding(0)
+			])
+	};
+};
+var $author$project$Internal$Material$Item$expansionItem = function (palette) {
+	return {
+		collapseIcon: $author$project$Internal$Material$Icon$expand_less,
+		expandIcon: $author$project$Internal$Material$Icon$expand_more,
+		item: $author$project$Internal$Material$Item$insetItem(palette)
+	};
+};
+var $author$project$Widget$Material$expansionItem = $author$project$Internal$Material$Item$expansionItem;
+var $author$project$Widget$insetItem = function () {
+	var fun = $author$project$Internal$Item$insetItem;
+	return fun;
+}();
+var $author$project$Widget$Material$insetItem = $author$project$Internal$Material$Item$insetItem;
+var $author$project$UIExplorer$lightBlue = A3($mdgriffith$elm_ui$Element$rgb255, 176, 208, 225);
+var $author$project$UIExplorer$optionGroupView = F7(
+	function (dark, isExpanded, selectedItem, items, itemToString, onPress, toggleExpand) {
+		var palette = dark ? $author$project$Widget$Material$darkPalette : $author$project$Widget$Material$defaultPalette;
+		var _v0 = dark ? $author$project$UIExplorer$darkerGray : $author$project$UIExplorer$lightBlue;
+		return A2(
+			$author$project$Widget$expansionItem,
+			$author$project$Widget$Material$expansionItem(palette),
+			{
+				content: A2(
+					$elm$core$List$map,
+					function (option) {
+						return A2(
+							$author$project$Widget$insetItem,
+							$author$project$Widget$Material$insetItem(palette),
+							{
+								content: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								onPress: $elm$core$Maybe$Just(
+									onPress(option)),
+								text: itemToString(option)
+							});
+					},
+					isExpanded ? items : _List_Nil),
+				icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+				isExpanded: isExpanded,
+				onToggle: $elm$core$Basics$always(toggleExpand),
+				text: itemToString(selectedItem)
+			});
+	});
+var $author$project$UIExplorer$colorBlindOptionView = F3(
+	function (dark, isExpanded, selectedColorBlindOption) {
+		return A7(
+			$author$project$UIExplorer$optionGroupView,
+			dark,
+			isExpanded,
+			selectedColorBlindOption,
+			A2(
+				$elm$core$List$cons,
+				$elm$core$Maybe$Nothing,
+				A2($elm$core$List$map, $elm$core$Maybe$Just, $author$project$UIExplorer$allColorBlindOptions)),
+			A2(
+				$elm$core$Basics$composeR,
+				$elm$core$Maybe$map($author$project$UIExplorer$colorBlindOptionToString),
+				$elm$core$Maybe$withDefault('No color blindness')),
+			$author$project$UIExplorer$PressedColorBlindOption,
+			$author$project$UIExplorer$ToggledColorBlindGroup);
+	});
+var $author$project$Widget$Material$Typography$subtitle2 = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Font$size(14),
+		$mdgriffith$elm_ui$Element$Font$semiBold,
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.1)
+	]);
+var $mdgriffith$elm_ui$Element$Border$widthXY = F2(
+	function (x, y) {
+		return A2(
+			$mdgriffith$elm_ui$Internal$Model$StyleClass,
+			$mdgriffith$elm_ui$Internal$Flag$borderWidth,
+			A5(
+				$mdgriffith$elm_ui$Internal$Model$BorderWidth,
+				'b-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y))),
+				y,
+				x,
+				y,
+				x));
+	});
+var $mdgriffith$elm_ui$Element$Border$widthEach = function (_v0) {
+	var bottom = _v0.bottom;
+	var top = _v0.top;
+	var left = _v0.left;
+	var right = _v0.right;
+	return (_Utils_eq(top, bottom) && _Utils_eq(left, right)) ? (_Utils_eq(top, right) ? $mdgriffith$elm_ui$Element$Border$width(top) : A2($mdgriffith$elm_ui$Element$Border$widthXY, left, top)) : A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$borderWidth,
+		A5(
+			$mdgriffith$elm_ui$Internal$Model$BorderWidth,
+			'b-' + ($elm$core$String$fromInt(top) + ('-' + ($elm$core$String$fromInt(right) + ('-' + ($elm$core$String$fromInt(bottom) + ('-' + $elm$core$String$fromInt(left))))))),
+			top,
+			right,
+			bottom,
+			left));
+};
+var $author$project$Internal$Material$Item$fullBleedHeader = function (palette) {
+	return {
+		content: {
+			content: {
+				divider: {element: _List_Nil},
+				title: _Utils_ap(
+					$author$project$Widget$Material$Typography$subtitle2,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Font$color(
+							$author$project$Widget$Material$Color$fromColor(
+								$author$project$Internal$Material$Palette$gray(palette))),
+							A2($mdgriffith$elm_ui$Element$paddingXY, 16, 8)
+						]))
+			},
+			elementColumn: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$spacing(8)
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+				$mdgriffith$elm_ui$Element$padding(0),
+				$mdgriffith$elm_ui$Element$Border$widthEach(
+				{bottom: 0, left: 0, right: 0, top: 1}),
+				$mdgriffith$elm_ui$Element$Border$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Internal$Material$Palette$lightGray(palette)))
+			])
+	};
+};
+var $author$project$Widget$Material$fullBleedHeader = $author$project$Internal$Material$Item$fullBleedHeader;
+var $author$project$Internal$Item$headerItem = F2(
+	function (style, title) {
+		return A2(
+			$author$project$Internal$Item$toItem,
+			style,
+			function (_v0) {
+				var elementColumn = _v0.elementColumn;
+				var content = _v0.content;
+				return A2(
+					$mdgriffith$elm_ui$Element$column,
+					elementColumn,
+					_List_fromArray(
+						[
+							A2($mdgriffith$elm_ui$Element$el, content.divider.element, $mdgriffith$elm_ui$Element$none),
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							content.title,
+							$mdgriffith$elm_ui$Element$text(title))
+						]));
+			});
+	});
+var $author$project$Widget$headerItem = $author$project$Internal$Item$headerItem;
+var $author$project$Internal$List$internal = F2(
+	function (style, list) {
+		return A2(
+			$elm$core$List$indexedMap,
+			F2(
+				function (i, fun) {
+					return fun(
+						_Utils_ap(
+							style.element,
+							($elm$core$List$length(list) === 1) ? style.ifSingleton : ((!i) ? style.ifFirst : (_Utils_eq(
+								i,
+								$elm$core$List$length(list) - 1) ? style.ifLast : style.otherwise))));
+				}),
+			list);
+	});
+var $author$project$Internal$List$itemList = function (style) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$author$project$Internal$List$internal(style.content),
+		$mdgriffith$elm_ui$Element$column(style.elementColumn));
+};
+var $author$project$Widget$itemList = function () {
+	var fun = $author$project$Internal$List$itemList;
+	return fun;
+}();
+var $mdgriffith$elm_ui$Element$Lazy$embed = function (x) {
+	switch (x.$) {
+		case 'Unstyled':
+			var html = x.a;
+			return html;
+		case 'Styled':
+			var styled = x.a;
+			return styled.html(
+				A2(
+					$mdgriffith$elm_ui$Internal$Model$OnlyDynamic,
+					{
+						focus: {backgroundColor: $elm$core$Maybe$Nothing, borderColor: $elm$core$Maybe$Nothing, shadow: $elm$core$Maybe$Nothing},
+						hover: $mdgriffith$elm_ui$Internal$Model$AllowHover,
+						mode: $mdgriffith$elm_ui$Internal$Model$Layout
+					},
+					styled.styles));
+		case 'Text':
+			var text = x.a;
+			return $elm$core$Basics$always(
+				$elm$virtual_dom$VirtualDom$text(text));
+		default:
+			return $elm$core$Basics$always(
+				$elm$virtual_dom$VirtualDom$text(''));
+	}
+};
+var $mdgriffith$elm_ui$Element$Lazy$apply5 = F6(
+	function (fn, a, b, c, d, e) {
+		return $mdgriffith$elm_ui$Element$Lazy$embed(
+			A5(fn, a, b, c, d, e));
+	});
+var $elm$virtual_dom$VirtualDom$lazy7 = _VirtualDom_lazy7;
+var $mdgriffith$elm_ui$Element$Lazy$lazy5 = F6(
+	function (fn, a, b, c, d, e) {
+		return $mdgriffith$elm_ui$Internal$Model$Unstyled(
+			A7($elm$virtual_dom$VirtualDom$lazy7, $mdgriffith$elm_ui$Element$Lazy$apply5, fn, a, b, c, d, e));
+	});
+var $author$project$Internal$Material$List$sideSheet = function (palette) {
+	return {
+		content: {
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette)))
+				]),
+			ifFirst: _List_Nil,
+			ifLast: _List_Nil,
+			ifSingleton: _List_Nil,
+			otherwise: _List_Nil
+		},
+		elementColumn: _Utils_ap(
+			$author$project$Widget$Material$Color$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$height($mdgriffith$elm_ui$Element$fill),
+					A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette)))
+				]))
+	};
+};
+var $author$project$Widget$Material$sideSheet = $author$project$Internal$Material$List$sideSheet;
+var $author$project$Internal$Switch$switch = F2(
+	function (style, _v0) {
+		var onPress = _v0.onPress;
+		var description = _v0.description;
+		var active = _v0.active;
+		return A2(
+			$mdgriffith$elm_ui$Element$Input$button,
+			_Utils_ap(
+				style.elementButton,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Region$description(description),
+						$mdgriffith$elm_ui$Element$inFront(
+						A2(
+							$mdgriffith$elm_ui$Element$el,
+							_Utils_ap(
+								style.contentInFront.element,
+								active ? style.contentInFront.ifActive : (_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.contentInFront.ifDisabled : style.contentInFront.otherwise)),
+							A2(
+								$mdgriffith$elm_ui$Element$el,
+								_Utils_ap(
+									style.contentInFront.content.element,
+									active ? style.contentInFront.content.ifActive : (_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.contentInFront.content.ifDisabled : style.contentInFront.content.otherwise)),
+								$mdgriffith$elm_ui$Element$none)))
+					])),
+			{
+				label: A2(
+					$mdgriffith$elm_ui$Element$el,
+					_Utils_ap(
+						style.content.element,
+						active ? style.content.ifActive : (_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.content.ifDisabled : style.content.otherwise)),
+					$mdgriffith$elm_ui$Element$none),
+				onPress: onPress
+			});
+	});
+var $author$project$Widget$switch = function () {
+	var fun = $author$project$Internal$Switch$switch;
+	return fun;
+}();
+var $mdgriffith$elm_ui$Internal$Model$Left = {$: 'Left'};
+var $mdgriffith$elm_ui$Element$alignLeft = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$Left);
+var $avh4$elm_color$Color$gray = A4($avh4$elm_color$Color$RgbaSpace, 211 / 255, 215 / 255, 207 / 255, 1.0);
+var $mdgriffith$elm_ui$Internal$Model$MoveX = function (a) {
+	return {$: 'MoveX', a: a};
+};
+var $mdgriffith$elm_ui$Internal$Flag$moveX = $mdgriffith$elm_ui$Internal$Flag$flag(25);
+var $mdgriffith$elm_ui$Element$moveLeft = function (x) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$TransformComponent,
+		$mdgriffith$elm_ui$Internal$Flag$moveX,
+		$mdgriffith$elm_ui$Internal$Model$MoveX(-x));
+};
+var $mdgriffith$elm_ui$Element$moveRight = function (x) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$TransformComponent,
+		$mdgriffith$elm_ui$Internal$Flag$moveX,
+		$mdgriffith$elm_ui$Internal$Model$MoveX(x));
+};
+var $author$project$Internal$Material$Switch$switch = function (palette) {
+	return {
+		content: {
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(14)),
+					$mdgriffith$elm_ui$Element$width(
+					$mdgriffith$elm_ui$Element$px(34)),
+					$mdgriffith$elm_ui$Element$centerY,
+					$mdgriffith$elm_ui$Element$centerX,
+					$mdgriffith$elm_ui$Element$Border$rounded(10)
+				]),
+			ifActive: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A2($author$project$Widget$Material$Color$scaleOpacity, 0.5, palette.primary)))
+				]),
+			ifDisabled: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$htmlAttribute(
+					A2($elm$html$Html$Attributes$style, 'cursor', 'not-allowed')),
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A3(
+							$author$project$Widget$Material$Color$withShade,
+							$author$project$Internal$Material$Palette$gray(palette),
+							0.5 * $author$project$Widget$Material$Color$buttonDisabledOpacity,
+							palette.surface)))
+				]),
+			otherwise: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A2(
+							$author$project$Widget$Material$Color$scaleOpacity,
+							0.5,
+							$author$project$Internal$Material$Palette$gray(palette))))
+				])
+		},
+		contentInFront: {
+			content: {
+				element: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$height(
+						$mdgriffith$elm_ui$Element$px(20)),
+						$mdgriffith$elm_ui$Element$width(
+						$mdgriffith$elm_ui$Element$px(20)),
+						$mdgriffith$elm_ui$Element$centerY,
+						$mdgriffith$elm_ui$Element$centerX,
+						$mdgriffith$elm_ui$Element$Border$rounded(10),
+						$mdgriffith$elm_ui$Element$Border$shadow(
+						$author$project$Widget$Material$Color$shadow(2)),
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Material$Color$fromColor(palette.surface))
+					]),
+				ifActive: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Material$Color$fromColor(
+							A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+					]),
+				ifDisabled: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Material$Color$fromColor(
+							A3($author$project$Widget$Material$Color$withShade, $avh4$elm_color$Color$gray, $author$project$Widget$Material$Color$buttonDisabledOpacity, palette.surface))),
+						$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+						$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+						$mdgriffith$elm_ui$Element$focused(_List_Nil)
+					]),
+				otherwise: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Material$Color$fromColor(
+							A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface)))
+					])
+			},
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(38)),
+					$mdgriffith$elm_ui$Element$width(
+					$mdgriffith$elm_ui$Element$px(38)),
+					$mdgriffith$elm_ui$Element$Border$rounded(19)
+				]),
+			ifActive: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$alignRight,
+					$mdgriffith$elm_ui$Element$moveRight(8)
+				]),
+			ifDisabled: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$htmlAttribute(
+					A2($elm$html$Html$Attributes$style, 'cursor', 'not-allowed'))
+				]),
+			otherwise: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, $avh4$elm_color$Color$gray)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, $avh4$elm_color$Color$gray)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, $avh4$elm_color$Color$gray)))
+						])),
+					$mdgriffith$elm_ui$Element$alignLeft,
+					$mdgriffith$elm_ui$Element$moveLeft(8)
+				])
+		},
+		elementButton: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(38)),
+				$mdgriffith$elm_ui$Element$width(
+				$mdgriffith$elm_ui$Element$px(58 - 18)),
+				$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+				$mdgriffith$elm_ui$Element$focused(_List_Nil),
+				$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
+			])
+	};
+};
+var $author$project$Widget$Material$switch = $author$project$Internal$Material$Switch$switch;
+var $author$project$Widget$textInput = function () {
+	var fun = $author$project$Internal$TextInput$textInput;
+	return fun;
+}();
+var $author$project$Internal$Material$TextInput$textInput = function (palette) {
+	return {
+		content: {
+			chips: {
+				content: $author$project$Internal$Material$Chip$chip(palette),
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spacing(8)
+					])
+			},
+			text: {
+				elementTextInput: _Utils_ap(
+					$author$project$Widget$Material$Color$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),
+							$mdgriffith$elm_ui$Element$centerY
+						]))
+			}
+		},
+		elementRow: _Utils_ap(
+			$author$project$Widget$Material$Color$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$Material$Color$fromColor(
+						A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Material$Color$shadow(4)),
+							$mdgriffith$elm_ui$Element$Border$color(
+							$author$project$Widget$Material$Color$fromColor(palette.primary))
+						])),
+					$mdgriffith$elm_ui$Element$width(
+					$mdgriffith$elm_ui$Element$px(280)),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Material$Color$shadow(2))
+						]))
+				]))
+	};
+};
+var $author$project$Widget$Material$textInput = $author$project$Internal$Material$TextInput$textInput;
+var $author$project$UIExplorer$Load = function (a) {
+	return {$: 'Load', a: a};
+};
+var $elm$core$Array$fromListHelp = F3(
+	function (list, nodeList, nodeListSize) {
+		fromListHelp:
+		while (true) {
+			var _v0 = A2($elm$core$Elm$JsArray$initializeFromList, $elm$core$Array$branchFactor, list);
+			var jsArray = _v0.a;
+			var remainingItems = _v0.b;
+			if (_Utils_cmp(
+				$elm$core$Elm$JsArray$length(jsArray),
+				$elm$core$Array$branchFactor) < 0) {
+				return A2(
+					$elm$core$Array$builderToArray,
+					true,
+					{nodeList: nodeList, nodeListSize: nodeListSize, tail: jsArray});
+			} else {
+				var $temp$list = remainingItems,
+					$temp$nodeList = A2(
+					$elm$core$List$cons,
+					$elm$core$Array$Leaf(jsArray),
+					nodeList),
+					$temp$nodeListSize = nodeListSize + 1;
+				list = $temp$list;
+				nodeList = $temp$nodeList;
+				nodeListSize = $temp$nodeListSize;
+				continue fromListHelp;
+			}
+		}
+	});
+var $elm$core$Array$fromList = function (list) {
+	if (!list.b) {
+		return $elm$core$Array$empty;
+	} else {
+		return A3($elm$core$Array$fromListHelp, list, _List_Nil, 0);
+	}
+};
+var $elm$core$Array$filter = F2(
+	function (isGood, array) {
+		return $elm$core$Array$fromList(
+			A3(
+				$elm$core$Array$foldr,
+				F2(
+					function (x, xs) {
+						return isGood(x) ? A2($elm$core$List$cons, x, xs) : xs;
+					}),
+				_List_Nil,
+				array));
+	});
+var $elm$core$Bitwise$shiftRightZfBy = _Bitwise_shiftRightZfBy;
+var $elm$core$Array$bitMask = 4294967295 >>> (32 - $elm$core$Array$shiftStep);
+var $elm$core$Elm$JsArray$unsafeGet = _JsArray_unsafeGet;
+var $elm$core$Array$getHelp = F3(
+	function (shift, index, tree) {
+		getHelp:
+		while (true) {
+			var pos = $elm$core$Array$bitMask & (index >>> shift);
+			var _v0 = A2($elm$core$Elm$JsArray$unsafeGet, pos, tree);
+			if (_v0.$ === 'SubTree') {
+				var subTree = _v0.a;
+				var $temp$shift = shift - $elm$core$Array$shiftStep,
+					$temp$index = index,
+					$temp$tree = subTree;
+				shift = $temp$shift;
+				index = $temp$index;
+				tree = $temp$tree;
+				continue getHelp;
+			} else {
+				var values = _v0.a;
+				return A2($elm$core$Elm$JsArray$unsafeGet, $elm$core$Array$bitMask & index, values);
+			}
+		}
+	});
+var $elm$core$Array$tailIndex = function (len) {
+	return (len >>> 5) << 5;
+};
+var $elm$core$Array$get = F2(
+	function (index, _v0) {
+		var len = _v0.a;
+		var startShift = _v0.b;
+		var tree = _v0.c;
+		var tail = _v0.d;
+		return ((index < 0) || (_Utils_cmp(index, len) > -1)) ? $elm$core$Maybe$Nothing : ((_Utils_cmp(
+			index,
+			$elm$core$Array$tailIndex(len)) > -1) ? $elm$core$Maybe$Just(
+			A2($elm$core$Elm$JsArray$unsafeGet, $elm$core$Array$bitMask & index, tail)) : $elm$core$Maybe$Just(
+			A3($elm$core$Array$getHelp, startShift, index, tree)));
+	});
+var $elm$core$Elm$JsArray$foldl = _JsArray_foldl;
+var $elm$core$Elm$JsArray$indexedMap = _JsArray_indexedMap;
+var $elm$core$Array$indexedMap = F2(
+	function (func, _v0) {
+		var len = _v0.a;
+		var tree = _v0.c;
+		var tail = _v0.d;
+		var initialBuilder = {
+			nodeList: _List_Nil,
+			nodeListSize: 0,
+			tail: A3(
+				$elm$core$Elm$JsArray$indexedMap,
+				func,
+				$elm$core$Array$tailIndex(len),
+				tail)
+		};
+		var helper = F2(
+			function (node, builder) {
+				if (node.$ === 'SubTree') {
+					var subTree = node.a;
+					return A3($elm$core$Elm$JsArray$foldl, helper, builder, subTree);
+				} else {
+					var leaf = node.a;
+					var offset = builder.nodeListSize * $elm$core$Array$branchFactor;
+					var mappedLeaf = $elm$core$Array$Leaf(
+						A3($elm$core$Elm$JsArray$indexedMap, func, offset, leaf));
+					return {
+						nodeList: A2($elm$core$List$cons, mappedLeaf, builder.nodeList),
+						nodeListSize: builder.nodeListSize + 1,
+						tail: builder.tail
+					};
+				}
+			});
+		return A2(
+			$elm$core$Array$builderToArray,
+			true,
+			A3($elm$core$Elm$JsArray$foldl, helper, initialBuilder, tree));
+	});
+var $author$project$UIExplorer$listNeighborsHelper = F3(
+	function (list, _v0, newList) {
+		listNeighborsHelper:
+		while (true) {
+			var current = _v0.current;
+			var next = _v0.next;
+			if (list.b) {
+				var head = list.a;
+				var rest = list.b;
+				var newState = {
+					current: next,
+					next: $elm$core$Maybe$Just(head),
+					previous: current
+				};
+				if (next.$ === 'Just') {
+					var next_ = next.a;
+					var $temp$list = rest,
+						$temp$_v0 = newState,
+						$temp$newList = A2(
+						$elm$core$List$cons,
+						{
+							current: next_,
+							next: $elm$core$Maybe$Just(head),
+							previous: current
+						},
+						newList);
+					list = $temp$list;
+					_v0 = $temp$_v0;
+					newList = $temp$newList;
+					continue listNeighborsHelper;
+				} else {
+					var $temp$list = rest,
+						$temp$_v0 = newState,
+						$temp$newList = newList;
+					list = $temp$list;
+					_v0 = $temp$_v0;
+					newList = $temp$newList;
+					continue listNeighborsHelper;
+				}
+			} else {
+				if (next.$ === 'Just') {
+					var next_ = next.a;
+					return A2(
+						$elm$core$List$cons,
+						{current: next_, next: $elm$core$Maybe$Nothing, previous: current},
+						newList);
+				} else {
+					return newList;
+				}
+			}
+		}
+	});
+var $author$project$UIExplorer$listNeighbors = function (list) {
+	return $elm$core$List$reverse(
+		A3(
+			$author$project$UIExplorer$listNeighborsHelper,
+			list,
+			{current: $elm$core$Maybe$Nothing, next: $elm$core$Maybe$Nothing, previous: $elm$core$Maybe$Nothing},
+			_List_Nil));
+};
+var $elm$core$Tuple$pair = F2(
+	function (a, b) {
+		return _Utils_Tuple2(a, b);
+	});
+var $author$project$Internal$Select$select = function (_v0) {
+	var selected = _v0.selected;
+	var options = _v0.options;
+	var onSelect = _v0.onSelect;
+	return A2(
+		$elm$core$List$indexedMap,
+		F2(
+			function (i, a) {
+				return _Utils_Tuple2(
+					_Utils_eq(
+						selected,
+						$elm$core$Maybe$Just(i)),
+					{
+						icon: a.icon,
+						onPress: onSelect(i),
+						text: a.text
+					});
+			}),
+		options);
+};
+var $author$project$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.elementButton,
+				_Utils_ap(
+					_Utils_eq(b.onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : (selected ? style.ifActive : style.otherwise),
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Region$description(b.text)
+						]))),
+			{
+				label: A2(
+					$mdgriffith$elm_ui$Element$row,
+					style.content.elementRow,
+					_List_fromArray(
+						[
+							b.icon(
+							_Utils_eq(b.onPress, $elm$core$Maybe$Nothing) ? style.content.content.icon.ifDisabled : (selected ? style.content.content.icon.ifActive : style.content.content.icon.otherwise)),
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							style.content.content.text.contentText,
+							$mdgriffith$elm_ui$Element$text(b.text))
+						])),
+				onPress: b.onPress
+			});
+	});
+var $author$project$Internal$Item$selectItem = F2(
+	function (s, select) {
+		return A2(
+			$elm$core$List$map,
+			function (b) {
+				return A2(
+					$author$project$Internal$Item$toItem,
+					s,
+					function (style) {
+						return A2($author$project$Internal$Select$selectButton, style, b);
+					});
+			},
+			$author$project$Internal$Select$select(select));
+	});
+var $author$project$Widget$selectItem = $author$project$Internal$Item$selectItem;
+var $author$project$Internal$Material$Item$selectItem = function (palette) {
+	return {
+		content: {
+			content: {
+				content: {
+					icon: {
+						ifActive: {
+							color: $author$project$Widget$Material$Color$accessibleTextColor(palette.surface),
+							size: 18
+						},
+						ifDisabled: {
+							color: $author$project$Internal$Material$Palette$gray(palette),
+							size: 18
+						},
+						otherwise: {
+							color: $author$project$Widget$Material$Color$accessibleTextColor(palette.surface),
+							size: 18
+						}
+					},
+					text: {
+						contentText: _List_fromArray(
+							[$mdgriffith$elm_ui$Element$centerX])
+					}
+				},
+				elementRow: _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
+					])
+			},
+			elementButton: _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$Material$Color$fromColor(
+						$author$project$Widget$Material$Color$accessibleTextColor(palette.surface))),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+						]))
+				]),
+			ifActive: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary))),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(palette.primary))
+				]),
+			ifDisabled: _Utils_ap(
+				$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Font$color(
+						$author$project$Widget$Material$Color$fromColor(
+							$author$project$Internal$Material$Palette$gray(palette))),
+						$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+						$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+						$mdgriffith$elm_ui$Element$focused(_List_Nil)
+					])),
+			otherwise: _List_Nil
+		},
+		element: _List_fromArray(
+			[
+				A2($mdgriffith$elm_ui$Element$paddingXY, 8, 4)
+			])
+	};
+};
+var $author$project$Widget$Material$selectItem = $author$project$Internal$Material$Item$selectItem;
+var $elm$core$List$sortBy = _List_sortBy;
+var $elm$core$List$sort = function (xs) {
+	return A2($elm$core$List$sortBy, $elm$core$Basics$identity, xs);
+};
+var $author$project$UIExplorer$viewSearchResults = F5(
+	function (dark, _v0, config, currentPage, searchText) {
+		var pages = _v0.a;
+		var palette = dark ? $author$project$Widget$Material$darkPalette : $author$project$Widget$Material$defaultPalette;
+		var options = $elm$core$Array$fromList(
+			$author$project$UIExplorer$listNeighbors(
+				$elm$core$List$sort(
+					A2(
+						$elm$core$List$filterMap,
+						function (_v1) {
+							var pageId = _v1.pageId;
+							var pageGroup = _v1.pageGroup;
+							return A2(
+								$elm$core$String$contains,
+								$elm$core$String$toLower(searchText),
+								$elm$core$String$toLower(
+									A2($elm$core$String$join, ' ', pageGroup) + (' ' + pageId))) ? $elm$core$Maybe$Just(
+								_Utils_ap(
+									pageGroup,
+									_List_fromArray(
+										[pageId]))) : $elm$core$Maybe$Nothing;
+						},
+						pages.ids))));
+		return A2(
+			$author$project$Widget$itemList,
+			$author$project$Widget$Material$sideSheet(palette),
+			A2(
+				$author$project$Widget$selectItem,
+				$author$project$Widget$Material$selectItem(palette),
+				{
+					onSelect: function (_int) {
+						return $elm$core$Maybe$Just(
+							$author$project$UIExplorer$Load(
+								A2(
+									$author$project$UIExplorer$uiUrl,
+									config.relativeUrlPath,
+									A2(
+										$elm$core$Maybe$withDefault,
+										_List_Nil,
+										A2(
+											$elm$core$Maybe$map,
+											function ($) {
+												return $.current;
+											},
+											A2($elm$core$Array$get, _int, options))))));
+					},
+					options: A2(
+						$elm$core$List$filterMap,
+						A2(
+							$elm$core$Basics$composeR,
+							function ($) {
+								return $.current;
+							},
+							A2(
+								$elm$core$Basics$composeR,
+								$elm$core$List$reverse,
+								A2(
+									$elm$core$Basics$composeR,
+									$elm$core$List$head,
+									$elm$core$Maybe$map(
+										function (text) {
+											return {
+												icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+												text: text
+											};
+										})))),
+						$elm$core$Array$toList(options)),
+					selected: A2(
+						$elm$core$Maybe$map,
+						$elm$core$Tuple$first,
+						A2(
+							$elm$core$Array$get,
+							0,
+							A2(
+								$elm$core$Array$filter,
+								A2(
+									$elm$core$Basics$composeR,
+									$elm$core$Tuple$second,
+									A2(
+										$elm$core$Basics$composeR,
+										function ($) {
+											return $.current;
+										},
+										$elm$core$Basics$eq(currentPage))),
+								A2($elm$core$Array$indexedMap, $elm$core$Tuple$pair, options))))
+				}));
+	});
+var $author$project$UIExplorer$Group = function (a) {
+	return {$: 'Group', a: a};
+};
+var $author$project$UIExplorer$TempLeaf = function (a) {
+	return {$: 'TempLeaf', a: a};
+};
+var $elm$core$List$partition = F2(
+	function (pred, list) {
+		var step = F2(
+			function (x, _v0) {
+				var trues = _v0.a;
+				var falses = _v0.b;
+				return pred(x) ? _Utils_Tuple2(
+					A2($elm$core$List$cons, x, trues),
+					falses) : _Utils_Tuple2(
+					trues,
+					A2($elm$core$List$cons, x, falses));
+			});
+		return A3(
+			$elm$core$List$foldr,
+			step,
+			_Utils_Tuple2(_List_Nil, _List_Nil),
+			list);
+	});
+var $author$project$UIExplorer$gatherWith = F2(
+	function (testFn, list) {
+		var helper = F2(
+			function (scattered, gathered) {
+				if (!scattered.b) {
+					return $elm$core$List$reverse(gathered);
+				} else {
+					var toGather = scattered.a;
+					var population = scattered.b;
+					var _v1 = A2(
+						$elm$core$List$partition,
+						testFn(toGather),
+						population);
+					var gathering = _v1.a;
+					var remaining = _v1.b;
+					return A2(
+						helper,
+						remaining,
+						A2(
+							$elm$core$List$cons,
+							_Utils_Tuple2(toGather, gathering),
+							gathered));
+				}
+			});
+		return A2(helper, list, _List_Nil);
+	});
+var $zwilias$elm_rosetree$Tree$Tree = F2(
+	function (a, b) {
+		return {$: 'Tree', a: a, b: b};
+	});
+var $zwilias$elm_rosetree$Tree$singleton = function (v) {
+	return A2($zwilias$elm_rosetree$Tree$Tree, v, _List_Nil);
+};
+var $zwilias$elm_rosetree$Tree$tree = $zwilias$elm_rosetree$Tree$Tree;
+var $author$project$UIExplorer$buildTree = function (items) {
+	var helper = function (items_) {
+		return A2(
+			$elm$core$List$map,
+			function (_v2) {
+				var head = _v2.a;
+				var rest = _v2.b;
+				if (head.$ === 'TempLeaf') {
+					var leaf = head.a;
+					return $zwilias$elm_rosetree$Tree$singleton(leaf);
+				} else {
+					var pageGroupHead = head.a.pageGroupHead;
+					return A2(
+						$zwilias$elm_rosetree$Tree$tree,
+						pageGroupHead,
+						helper(
+							A2(
+								$elm$core$List$filterMap,
+								function (a) {
+									if (a.$ === 'Group') {
+										var pageId = a.a.pageId;
+										var pageGroup = a.a.pageGroup;
+										return $elm$core$Maybe$Just(
+											{pageGroup: pageGroup, pageId: pageId});
+									} else {
+										return $elm$core$Maybe$Nothing;
+									}
+								},
+								A2($elm$core$List$cons, head, rest))));
+				}
+			},
+			A2(
+				$author$project$UIExplorer$gatherWith,
+				F2(
+					function (a, b) {
+						var _v1 = _Utils_Tuple2(a, b);
+						if ((_v1.a.$ === 'Group') && (_v1.b.$ === 'Group')) {
+							var groupA = _v1.a.a;
+							var groupB = _v1.b.a;
+							return _Utils_eq(groupA.pageGroupHead, groupB.pageGroupHead);
+						} else {
+							return false;
+						}
+					}),
+				A2(
+					$elm$core$List$map,
+					function (item) {
+						var _v0 = item.pageGroup;
+						if (_v0.b) {
+							var head = _v0.a;
+							var rest = _v0.b;
+							return $author$project$UIExplorer$Group(
+								{pageGroup: rest, pageGroupHead: head, pageId: item.pageId});
+						} else {
+							return $author$project$UIExplorer$TempLeaf(item.pageId);
+						}
+					},
+					items_)));
+	};
+	return helper(items);
+};
+var $zwilias$elm_rosetree$Tree$children = function (_v0) {
+	var c = _v0.b;
+	return c;
+};
+var $zwilias$elm_rosetree$Tree$label = function (_v0) {
+	var v = _v0.a;
+	return v;
+};
+var $author$project$UIExplorer$viewSidebarLinksHelper = F6(
+	function (dark, config, page, expandedGroups, path, trees) {
+		return A2(
+			$elm$core$List$concatMap,
+			function (tree) {
+				var label = $zwilias$elm_rosetree$Tree$label(tree);
+				var newPath = _Utils_ap(
+					path,
+					_List_fromArray(
+						[label]));
+				var _v0 = $zwilias$elm_rosetree$Tree$children(tree);
+				if (!_v0.b) {
+					return _List_fromArray(
+						[newPath]);
+				} else {
+					var children = _v0;
+					return A6($author$project$UIExplorer$viewSidebarLinksHelper, dark, config, page, expandedGroups, newPath, children);
+				}
+			},
+			A2($elm$core$List$sortBy, $zwilias$elm_rosetree$Tree$label, trees));
+	});
+var $author$project$UIExplorer$viewSidebarLinks = F5(
+	function (dark, _v0, config, page, expandedGroups) {
+		var pages = _v0.a;
+		var palette = dark ? $author$project$Widget$Material$darkPalette : $author$project$Widget$Material$defaultPalette;
+		var options = $elm$core$Array$fromList(
+			A6(
+				$author$project$UIExplorer$viewSidebarLinksHelper,
+				dark,
+				config,
+				page,
+				expandedGroups,
+				_List_Nil,
+				$author$project$UIExplorer$buildTree(pages.ids)));
+		return A2(
+			$author$project$Widget$itemList,
+			$author$project$Widget$Material$sideSheet(palette),
+			A2(
+				$author$project$Widget$selectItem,
+				$author$project$Widget$Material$selectItem(palette),
+				{
+					onSelect: function (_int) {
+						return $elm$core$Maybe$Just(
+							$author$project$UIExplorer$Load(
+								A2(
+									$author$project$UIExplorer$uiUrl,
+									config.relativeUrlPath,
+									A2(
+										$elm$core$Maybe$withDefault,
+										_List_Nil,
+										A2($elm$core$Array$get, _int, options)))));
+					},
+					options: A2(
+						$elm$core$List$filterMap,
+						A2(
+							$elm$core$Basics$composeR,
+							$elm$core$List$reverse,
+							A2(
+								$elm$core$Basics$composeR,
+								$elm$core$List$head,
+								$elm$core$Maybe$map(
+									function (text) {
+										return {
+											icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+											text: text
+										};
+									}))),
+						$elm$core$Array$toList(options)),
+					selected: A2(
+						$elm$core$Maybe$map,
+						$elm$core$Tuple$first,
+						A2(
+							$elm$core$Array$get,
+							0,
+							A2(
+								$elm$core$Array$filter,
+								A2(
+									$elm$core$Basics$composeR,
+									$elm$core$Tuple$second,
+									$elm$core$Basics$eq(page)),
+								A2($elm$core$Array$indexedMap, $elm$core$Tuple$pair, options))))
+				}));
+	});
+var $author$project$UIExplorer$viewSidebar = F3(
+	function (pages, config, model) {
+		var palette = model.darkThemeEnabled ? $author$project$Widget$Material$darkPalette : $author$project$Widget$Material$defaultPalette;
+		return model.minimizeSidebar ? $mdgriffith$elm_ui$Element$none : A2(
+			$author$project$Widget$itemList,
+			$author$project$Widget$Material$sideSheet(palette),
+			$elm$core$List$concat(
+				_List_fromArray(
+					[
+						_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$headerItem,
+							$author$project$Widget$Material$fullBleedHeader(palette),
+							'Device Toolbar'),
+							A2(
+							$author$project$Widget$insetItem,
+							$author$project$Widget$Material$insetItem(palette),
+							{
+								content: function (_v0) {
+									return A2(
+										$author$project$Widget$switch,
+										$author$project$Widget$Material$switch(palette),
+										{
+											active: model.darkThemeEnabled,
+											description: 'Toggle Theme',
+											onPress: $elm$core$Maybe$Just(
+												$author$project$UIExplorer$ChangeDarkTheme(!model.darkThemeEnabled))
+										});
+								},
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								onPress: $elm$core$Maybe$Just(
+									$author$project$UIExplorer$ChangeDarkTheme(!model.darkThemeEnabled)),
+								text: 'Dark Theme'
+							})
+						]),
+						A3($author$project$UIExplorer$colorBlindOptionView, model.darkThemeEnabled, model.expandColorBlindOptions, model.colorBlindOption),
+						_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$headerItem,
+							$author$project$Widget$Material$fullBleedHeader(palette),
+							'Widgets'),
+							$author$project$Widget$asItem(
+							A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$height(
+										$mdgriffith$elm_ui$Element$px(70)),
+										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+									]),
+								A2(
+									$mdgriffith$elm_ui$Element$el,
+									_List_fromArray(
+										[
+											A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+										]),
+									A2(
+										$author$project$Widget$textInput,
+										$author$project$Widget$Material$textInput(palette),
+										{
+											chips: _List_Nil,
+											label: 'Search pages',
+											onChange: $author$project$UIExplorer$TypingSearchText,
+											placeholder: $elm$core$Maybe$Just(
+												A2(
+													$mdgriffith$elm_ui$Element$Input$placeholder,
+													_List_Nil,
+													$mdgriffith$elm_ui$Element$text('Search pages'))),
+											text: model.searchText
+										})))),
+							$author$project$Widget$asItem(
+							$author$project$UIExplorer$showSearchResults(model.searchText) ? A6($mdgriffith$elm_ui$Element$Lazy$lazy5, $author$project$UIExplorer$viewSearchResults, model.darkThemeEnabled, pages, config, model.page, model.searchText) : A6($mdgriffith$elm_ui$Element$Lazy$lazy5, $author$project$UIExplorer$viewSidebarLinks, model.darkThemeEnabled, pages, config, model.page, model.expandedGroups))
+						])
+					])));
+	});
+var $author$project$UIExplorer$viewSuccess = F3(
+	function (config, pages_, model) {
+		var pages = pages_.a;
+		var palette = model.darkThemeEnabled ? $author$project$Widget$Material$darkPalette : $author$project$Widget$Material$defaultPalette;
+		return {
+			body: _List_fromArray(
+				[
+					A3(
+					$mdgriffith$elm_ui$Element$layoutWith,
+					{options: config.layoutOptions},
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+						A2(
+							$elm$core$List$cons,
+							$mdgriffith$elm_ui$Element$Background$color(
+								model.darkThemeEnabled ? $author$project$UIExplorer$black : $author$project$UIExplorer$gray),
+							config.layoutAttributes)),
+					A2(
+						$mdgriffith$elm_ui$Element$column,
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+								$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
+							]),
+						_List_fromArray(
+							[
+								A2(
+								$author$project$Widget$menuBar,
+								$author$project$Widget$Material$menuBar(palette),
+								{
+									deviceClass: $mdgriffith$elm_ui$Element$Desktop,
+									openLeftSheet: $elm$core$Maybe$Just($author$project$UIExplorer$PressedToggleSidebar),
+									openRightSheet: $elm$core$Maybe$Nothing,
+									openTopSheet: $elm$core$Maybe$Nothing,
+									primaryActions: _List_Nil,
+									search: $elm$core$Maybe$Nothing,
+									title: A2($mdgriffith$elm_ui$Element$el, $author$project$Widget$Material$Typography$h6, config.sidebarTitle)
+								}),
+								A2(
+								$mdgriffith$elm_ui$Element$row,
+								_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$behindContent(
+										$mdgriffith$elm_ui$Element$html($author$project$UIExplorer$colorblindnessSvg)),
+										$mdgriffith$elm_ui$Element$behindContent(
+										$mdgriffith$elm_ui$Element$html($author$project$UIExplorer$colorblindnessCss)),
+										$mdgriffith$elm_ui$Element$Font$color(
+										$author$project$UIExplorer$textColor(model.darkThemeEnabled))
+									]),
+								_List_fromArray(
+									[
+										A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+												$mdgriffith$elm_ui$Element$Font$size(16)
+											]),
+										A3($author$project$UIExplorer$viewSidebar, pages_, config, model)),
+										A2(
+										$mdgriffith$elm_ui$Element$el,
+										_Utils_ap(
+											_List_fromArray(
+												[
+													$mdgriffith$elm_ui$Element$alignTop,
+													$mdgriffith$elm_ui$Element$width(
+													function () {
+														var _v0 = $author$project$UIExplorer$pageSizeOptionWidth(model.pageSizeOption);
+														if (_v0.$ === 'Just') {
+															var width = _v0.a;
+															return $mdgriffith$elm_ui$Element$px(
+																$ianmackenzie$elm_units$Pixels$inPixels(width));
+														} else {
+															return $mdgriffith$elm_ui$Element$fillPortion(999999999);
+														}
+													}()),
+													$mdgriffith$elm_ui$Element$centerX,
+													A2($mdgriffith$elm_ui$Element$paddingXY, 0, 56),
+													$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+													$mdgriffith$elm_ui$Element$Region$mainContent,
+													model.darkThemeEnabled ? $mdgriffith$elm_ui$Element$Background$color(
+													A3($mdgriffith$elm_ui$Element$rgb255, 30, 30, 30)) : $mdgriffith$elm_ui$Element$Background$color(
+													A3($mdgriffith$elm_ui$Element$rgb255, 225, 225, 225))
+												]),
+											function () {
+												var _v1 = model.colorBlindOption;
+												if (_v1.$ === 'Nothing') {
+													return _List_Nil;
+												} else {
+													var colorBlindOption = _v1.a;
+													return $elm$core$List$singleton(
+														$mdgriffith$elm_ui$Element$htmlAttribute(
+															$elm$html$Html$Attributes$class(
+																$author$project$UIExplorer$colorBlindOptionToCssClass(colorBlindOption))));
+												}
+											}()),
+										A2(
+											$mdgriffith$elm_ui$Element$map,
+											$author$project$UIExplorer$PageMsg,
+											A4(
+												pages.view,
+												model.page,
+												$author$project$UIExplorer$contentSize(model),
+												model.darkThemeEnabled,
+												model.pageModel)))
+									]))
+							])))
+				]),
+			title: 'UI Explorer'
+		};
+	});
+var $author$project$UIExplorer$view = F3(
+	function (config, pages, model) {
+		if (model.$ === 'FlagsParsed') {
+			var successModel = model.a;
+			return A3($author$project$UIExplorer$viewSuccess, config, pages, successModel);
+		} else {
+			var errorMessage = model.a;
+			return {
+				body: _List_fromArray(
+					[
+						A3(
+						$mdgriffith$elm_ui$Element$layoutWith,
+						{options: config.layoutOptions},
+						A2(
+							$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),
+								config.layoutAttributes)),
+						A2($author$project$UIExplorer$errorView, false, errorMessage))
+					]),
+				title: 'Error'
+			};
+		}
+	});
+var $author$project$UIExplorer$application = F2(
+	function (config, pages) {
+		return $elm$browser$Browser$application(
+			{
+				init: A2($author$project$UIExplorer$init, config, pages),
+				onUrlChange: $author$project$UIExplorer$UrlChanged,
+				onUrlRequest: $author$project$UIExplorer$LinkClicked,
+				subscriptions: $author$project$UIExplorer$subscriptions(pages),
+				update: A2($author$project$UIExplorer$update, pages, config),
+				view: A2($author$project$UIExplorer$view, config, pages)
+			});
+	});
+var $author$project$UIExplorer$defaultConfig = {
+	flagsDecoder: $elm$json$Json$Decode$succeed(_Utils_Tuple0),
+	layoutAttributes: _List_Nil,
+	layoutOptions: _List_Nil,
+	relativeUrlPath: _List_Nil,
+	sidebarTitle: $mdgriffith$elm_ui$Element$text('UI explorer')
+};
+var $author$project$UIExplorer$Current = function (a) {
+	return {$: 'Current', a: a};
+};
+var $author$project$UIExplorer$Previous = function (a) {
+	return {$: 'Previous', a: a};
+};
+var $mdgriffith$elm_ui$Element$Lazy$apply3 = F4(
+	function (fn, a, b, c) {
+		return $mdgriffith$elm_ui$Element$Lazy$embed(
+			A3(fn, a, b, c));
+	});
+var $elm$virtual_dom$VirtualDom$lazy5 = _VirtualDom_lazy5;
+var $mdgriffith$elm_ui$Element$Lazy$lazy3 = F4(
+	function (fn, a, b, c) {
+		return $mdgriffith$elm_ui$Internal$Model$Unstyled(
+			A5($elm$virtual_dom$VirtualDom$lazy5, $mdgriffith$elm_ui$Element$Lazy$apply3, fn, a, b, c));
+	});
+var $author$project$UIExplorer$nextPage = F3(
+	function (id, config, _v0) {
+		var previous = _v0.a;
+		var view_ = F4(
+			function (pageId, windowSize, darkTheme, _v8) {
+				var previousModel = _v8.a;
+				var model = _v8.b;
+				return _Utils_eq(
+					_Utils_ap(
+						previous.pageGroup,
+						_List_fromArray(
+							[id])),
+					pageId) ? A2(
+					$mdgriffith$elm_ui$Element$map,
+					$author$project$UIExplorer$Current,
+					A4($mdgriffith$elm_ui$Element$Lazy$lazy3, config.view, windowSize, darkTheme, model)) : A2(
+					$mdgriffith$elm_ui$Element$map,
+					$author$project$UIExplorer$Previous,
+					A4(previous.view, pageId, windowSize, darkTheme, previousModel));
+			});
+		var update_ = F2(
+			function (msg, _v7) {
+				var previousModel = _v7.a;
+				var model = _v7.b;
+				if (msg.$ === 'Previous') {
+					var previousMsg = msg.a;
+					var _v5 = A2(previous.update, previousMsg, previousModel);
+					var newPreviousModel = _v5.a;
+					var previousCmds = _v5.b;
+					return _Utils_Tuple2(
+						_Utils_Tuple2(newPreviousModel, model),
+						A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Previous, previousCmds));
+				} else {
+					var currentMsg = msg.a;
+					var _v6 = A2(config.update, currentMsg, model);
+					var newModel = _v6.a;
+					var cmds = _v6.b;
+					return _Utils_Tuple2(
+						_Utils_Tuple2(previousModel, newModel),
+						A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Current, cmds));
+				}
+			});
+		var subscriptions_ = function (_v3) {
+			var previousModel = _v3.a;
+			var model = _v3.b;
+			return $elm$core$Platform$Sub$batch(
+				_List_fromArray(
+					[
+						A2(
+						$elm$core$Platform$Sub$map,
+						$author$project$UIExplorer$Current,
+						config.subscriptions(model)),
+						A2(
+						$elm$core$Platform$Sub$map,
+						$author$project$UIExplorer$Previous,
+						previous.subscriptions(previousModel))
+					]));
+		};
+		var init_ = function (flags) {
+			var _v1 = previous.init(flags);
+			var previousModel = _v1.a;
+			var previousCmds = _v1.b;
+			var _v2 = config.init(flags);
+			var model = _v2.a;
+			var cmds = _v2.b;
+			return _Utils_Tuple2(
+				_Utils_Tuple2(previousModel, model),
+				$elm$core$Platform$Cmd$batch(
+					_List_fromArray(
+						[
+							A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Previous, previousCmds),
+							A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Current, cmds)
+						])));
+		};
+		return $author$project$UIExplorer$PageBuilder(
+			{
+				ids: A2(
+					$elm$core$List$cons,
+					{pageGroup: previous.pageGroup, pageId: id},
+					previous.ids),
+				init: init_,
+				pageGroup: previous.pageGroup,
+				subscriptions: subscriptions_,
+				update: update_,
+				view: view_
+			});
+	});
+var $author$project$UIExplorer$firstPage = F2(
+	function (id, config) {
+		return A3(
+			$author$project$UIExplorer$nextPage,
+			id,
+			config,
+			$author$project$UIExplorer$PageBuilder(
+				{
+					ids: _List_Nil,
+					init: $elm$core$Basics$always(
+						_Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none)),
+					pageGroup: _List_Nil,
+					subscriptions: function (_v0) {
+						return $elm$core$Platform$Sub$none;
+					},
+					update: F2(
+						function (_v1, m) {
+							return _Utils_Tuple2(m, $elm$core$Platform$Cmd$none);
+						}),
+					view: F4(
+						function (_v2, _v3, _v4, _v5) {
+							return A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$centerX,
+										$mdgriffith$elm_ui$Element$centerY,
+										$mdgriffith$elm_ui$Element$Font$size(28)
+									]),
+								$mdgriffith$elm_ui$Element$text('Page not found'));
+						})
+				}));
+	});
+var $mdgriffith$elm_ui$Element$BigDesktop = {$: 'BigDesktop'};
+var $author$project$UIExplorer$Story$addStoryToGroup = function (builder) {
+	return {
+		init: builder.init,
+		subscriptions: builder.subscriptions,
+		update: builder.update,
+		views: function (_v0) {
+			var a = _v0.a;
+			var previous = _v0.b;
+			return A2(
+				$elm$core$List$map,
+				function (view) {
+					return view(a);
+				},
+				builder.views(previous));
+		}
+	};
+};
+var $author$project$UIExplorer$Story$addStory = F2(
+	function (_v0, builder) {
+		var info = _v0.info;
+		var toValue = _v0.toValue;
+		var storiesToValue = function (key) {
+			if (key.b) {
+				var head = key.a;
+				var tail = key.b;
+				return _Utils_Tuple2(
+					toValue(head),
+					builder.storiesToValue(tail));
+			} else {
+				return _Utils_Tuple2(
+					toValue(''),
+					builder.storiesToValue(_List_Nil));
+			}
+		};
+		return {
+			stories: A2($elm$core$List$cons, info, builder.stories),
+			storiesToValue: storiesToValue,
+			tilelist: $author$project$UIExplorer$Story$addStoryToGroup(builder.tilelist),
+			title: builder.title
+		};
+	});
+var $author$project$UIExplorer$Story$book = F2(
+	function (title, tilelist) {
+		return {
+			stories: _List_Nil,
+			storiesToValue: $elm$core$Basics$always(_Utils_Tuple0),
+			tilelist: {
+				init: tilelist.init,
+				subscriptions: tilelist.subscriptions,
+				update: tilelist.update,
+				views: $elm$core$Basics$always(tilelist.views)
+			},
+			title: title
+		};
+	});
+var $author$project$UIExplorer$Story$BoolStory = F2(
+	function (a, b) {
+		return {$: 'BoolStory', a: a, b: b};
+	});
+var $author$project$UIExplorer$Story$boolStory = F3(
+	function (label, _v0, _default) {
+		var ifTrue = _v0.a;
+		var ifFalse = _v0.b;
+		return {
+			info: A2($author$project$UIExplorer$Story$BoolStory, label, _default),
+			toValue: function (s) {
+				return (s === 't') ? ifTrue : ifFalse;
+			}
+		};
+	});
+var $author$project$UIExplorer$Tile$Current = function (a) {
+	return {$: 'Current', a: a};
+};
+var $author$project$UIExplorer$Tile$Previous = function (a) {
+	return {$: 'Previous', a: a};
+};
+var $mdgriffith$elm_ui$Internal$Model$mapAttr = 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$Element$mapAttribute = $mdgriffith$elm_ui$Internal$Model$mapAttr;
+var $author$project$UIExplorer$Tile$mapView = F2(
+	function (map, view) {
+		return {
+			attributes: A2(
+				$elm$core$List$map,
+				$mdgriffith$elm_ui$Element$mapAttribute(map),
+				view.attributes),
+			body: A2($mdgriffith$elm_ui$Element$map, map, view.body),
+			position: view.position,
+			title: view.title
+		};
+	});
+var $author$project$UIExplorer$Tile$mapViewList = function (map) {
+	return $elm$core$List$map(
+		$author$project$UIExplorer$Tile$mapView(map));
+};
+var $author$project$UIExplorer$Tile$linkGroup = F2(
+	function (linked, parent) {
+		var views_ = F2(
+			function (pageSize, _v7) {
+				var sharedModel = _v7.a;
+				var model = _v7.b;
+				return A2(
+					$elm$core$List$append,
+					A2(
+						$author$project$UIExplorer$Tile$mapViewList,
+						$author$project$UIExplorer$Tile$Previous,
+						A2(parent.views, pageSize, sharedModel)),
+					A2(
+						$author$project$UIExplorer$Tile$mapViewList,
+						$author$project$UIExplorer$Tile$Current,
+						A2(
+							linked.views,
+							pageSize,
+							_Utils_Tuple2(sharedModel, model))));
+			});
+		var update_ = F2(
+			function (msg, _v6) {
+				var sharedModel = _v6.a;
+				var model = _v6.b;
+				if (msg.$ === 'Previous') {
+					var parentMsg = msg.a;
+					var _v4 = A2(parent.update, parentMsg, sharedModel);
+					var newParentModel = _v4.a;
+					var parentCmd = _v4.b;
+					return _Utils_Tuple2(
+						_Utils_Tuple2(newParentModel, model),
+						A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Tile$Previous, parentCmd));
+				} else {
+					var currentMsg = msg.a;
+					var _v5 = A2(
+						linked.update,
+						currentMsg,
+						_Utils_Tuple2(sharedModel, model));
+					var newModel = _v5.a;
+					var cmd = _v5.b;
+					return _Utils_Tuple2(
+						_Utils_Tuple2(sharedModel, newModel),
+						A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Tile$Current, cmd));
+				}
+			});
+		var subscriptions_ = function (_v2) {
+			var sharedModel = _v2.a;
+			var model = _v2.b;
+			return $elm$core$Platform$Sub$batch(
+				_List_fromArray(
+					[
+						A2(
+						$elm$core$Platform$Sub$map,
+						$author$project$UIExplorer$Tile$Current,
+						linked.subscriptions(
+							_Utils_Tuple2(sharedModel, model))),
+						A2(
+						$elm$core$Platform$Sub$map,
+						$author$project$UIExplorer$Tile$Previous,
+						parent.subscriptions(sharedModel))
+					]));
+		};
+		var init_ = function (flags) {
+			var _v0 = parent.init(flags);
+			var parentModel = _v0.a;
+			var parentCmd = _v0.b;
+			var _v1 = linked.init(flags);
+			var model = _v1.a;
+			var cmd = _v1.b;
+			return _Utils_Tuple2(
+				_Utils_Tuple2(parentModel, model),
+				$elm$core$Platform$Cmd$batch(
+					_List_fromArray(
+						[
+							A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Tile$Previous, parentCmd),
+							A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Tile$Current, cmd)
+						])));
+		};
+		return {init: init_, subscriptions: subscriptions_, update: update_, views: views_};
+	});
+var $miyamoen$select_list$Types$selected = function (_v0) {
+	var a = _v0.b;
+	return a;
+};
+var $miyamoen$select_list$SelectList$selected = $miyamoen$select_list$Types$selected;
+var $author$project$UIExplorer$Story$storyCurrentValue = function (model) {
+	switch (model.$) {
+		case 'RangeStoryModel':
+			var value = model.b.value;
+			return $elm$core$String$fromInt(value);
+		case 'TextStoryModel':
+			var value = model.b;
+			return value;
+		case 'OptionListStoryModel':
+			var select = model.b;
+			return $miyamoen$select_list$SelectList$selected(select);
+		default:
+			var value = model.b;
+			return value ? 't' : 'f';
+	}
+};
+var $author$project$UIExplorer$Story$selectedStories = $elm$core$List$map($author$project$UIExplorer$Story$storyCurrentValue);
+var $author$project$UIExplorer$Tile$NewRightColumnTile = {$: 'NewRightColumnTile'};
+var $author$project$UIExplorer$Story$storyLabelIs = F2(
+	function (label, model) {
+		switch (model.$) {
+			case 'RangeStoryModel':
+				var storyLabel = model.a;
+				return _Utils_eq(label, storyLabel);
+			case 'TextStoryModel':
+				var storyLabel = model.a;
+				return _Utils_eq(label, storyLabel);
+			case 'OptionListStoryModel':
+				var storyLabel = model.a;
+				return _Utils_eq(label, storyLabel);
+			default:
+				var storyLabel = model.a;
+				return _Utils_eq(label, storyLabel);
+		}
+	});
+var $author$project$UIExplorer$Story$BoolStoryModel = F2(
+	function (a, b) {
+		return {$: 'BoolStoryModel', a: a, b: b};
+	});
+var $author$project$UIExplorer$Story$OptionListStoryModel = F2(
+	function (a, b) {
+		return {$: 'OptionListStoryModel', a: a, b: b};
+	});
+var $author$project$UIExplorer$Story$RangeStoryModel = F2(
+	function (a, b) {
+		return {$: 'RangeStoryModel', a: a, b: b};
+	});
+var $author$project$UIExplorer$Story$TextStoryModel = F2(
+	function (a, b) {
+		return {$: 'TextStoryModel', a: a, b: b};
+	});
+var $miyamoen$select_list$SelectList$attempt = F2(
+	function (action, selectList) {
+		return A2(
+			$elm$core$Maybe$withDefault,
+			selectList,
+			action(selectList));
+	});
+var $author$project$UIExplorer$Story$enforceRange = F3(
+	function (min, max, value) {
+		var _v0 = _Utils_Tuple2(
+			_Utils_cmp(value, min) < 0,
+			_Utils_cmp(value, max) > 0);
+		if (_v0.a) {
+			if (_v0.b) {
+				return value;
+			} else {
+				return min;
+			}
+		} else {
+			if (_v0.b) {
+				return max;
+			} else {
+				return value;
+			}
+		}
+	});
+var $miyamoen$select_list$Types$SelectList = F3(
+	function (a, b, c) {
+		return {$: 'SelectList', a: a, b: b, c: c};
+	});
+var $miyamoen$select_list$Select$splitWhen = F2(
+	function (predicate, list) {
+		var _v0 = A3(
+			$elm$core$List$foldl,
+			F2(
+				function (a, _v1) {
+					var before = _v1.a;
+					var res = _v1.b;
+					var after = _v1.c;
+					if (res.$ === 'Nothing') {
+						return predicate(a) ? _Utils_Tuple3(
+							before,
+							$elm$core$Maybe$Just(a),
+							after) : _Utils_Tuple3(
+							A2($elm$core$List$cons, a, before),
+							$elm$core$Maybe$Nothing,
+							after);
+					} else {
+						return _Utils_Tuple3(
+							before,
+							res,
+							A2($elm$core$List$cons, a, after));
+					}
+				}),
+			_Utils_Tuple3(_List_Nil, $elm$core$Maybe$Nothing, _List_Nil),
+			list);
+		var beforeList = _v0.a;
+		var maybe = _v0.b;
+		var afterList = _v0.c;
+		return A2(
+			$elm$core$Maybe$map,
+			function (target) {
+				return _Utils_Tuple3(beforeList, target, afterList);
+			},
+			maybe);
+	});
+var $miyamoen$select_list$Select$afterIf = F2(
+	function (pred, _v0) {
+		var befor = _v0.a;
+		var a = _v0.b;
+		var after = _v0.c;
+		return A2(
+			$elm$core$Maybe$map,
+			function (_v1) {
+				var nextBefore = _v1.a;
+				var next = _v1.b;
+				var nextAfter = _v1.c;
+				return A3(
+					$miyamoen$select_list$Types$SelectList,
+					_Utils_ap(
+						nextBefore,
+						A2($elm$core$List$cons, a, befor)),
+					next,
+					$elm$core$List$reverse(nextAfter));
+			},
+			A2($miyamoen$select_list$Select$splitWhen, pred, after));
+	});
+var $miyamoen$select_list$SelectList$selectAfterIf = $miyamoen$select_list$Select$afterIf;
+var $miyamoen$select_list$Select$beforeIf = F2(
+	function (pred, _v0) {
+		var befor = _v0.a;
+		var a = _v0.b;
+		var after = _v0.c;
+		return A2(
+			$elm$core$Maybe$map,
+			function (_v1) {
+				var nextAfter = _v1.a;
+				var next = _v1.b;
+				var nextBefore = _v1.c;
+				return A3(
+					$miyamoen$select_list$Types$SelectList,
+					$elm$core$List$reverse(nextBefore),
+					next,
+					_Utils_ap(
+						nextAfter,
+						A2($elm$core$List$cons, a, after)));
+			},
+			A2($miyamoen$select_list$Select$splitWhen, pred, befor));
+	});
+var $miyamoen$select_list$SelectList$selectBeforeIf = $miyamoen$select_list$Select$beforeIf;
+var $author$project$UIExplorer$Story$storySetValue = F2(
+	function (value, model) {
+		switch (model.$) {
+			case 'RangeStoryModel':
+				var storyLabel = model.a;
+				var state = model.b;
+				var _v1 = $elm$core$String$toInt(value);
+				if (_v1.$ === 'Nothing') {
+					return model;
+				} else {
+					var intValue = _v1.a;
+					return A2(
+						$author$project$UIExplorer$Story$RangeStoryModel,
+						storyLabel,
+						_Utils_update(
+							state,
+							{
+								value: A3($author$project$UIExplorer$Story$enforceRange, state.min, state.max, intValue)
+							}));
+				}
+			case 'TextStoryModel':
+				var storyLabel = model.a;
+				return A2($author$project$UIExplorer$Story$TextStoryModel, storyLabel, value);
+			case 'OptionListStoryModel':
+				var storyLabel = model.a;
+				var select = model.b;
+				return A2(
+					$author$project$UIExplorer$Story$OptionListStoryModel,
+					storyLabel,
+					A2(
+						$miyamoen$select_list$SelectList$attempt,
+						$miyamoen$select_list$SelectList$selectAfterIf(
+							$elm$core$Basics$eq(value)),
+						A2(
+							$miyamoen$select_list$SelectList$attempt,
+							$miyamoen$select_list$SelectList$selectBeforeIf(
+								$elm$core$Basics$eq(value)),
+							select)));
+			default:
+				var storyLabel = model.a;
+				return A2($author$project$UIExplorer$Story$BoolStoryModel, storyLabel, value === 't');
+		}
+	});
+var $author$project$UIExplorer$Story$selectStory = F2(
+	function (label, value) {
+		return $elm$core$List$map(
+			function (story) {
+				return A2($author$project$UIExplorer$Story$storyLabelIs, label, story) ? A2($author$project$UIExplorer$Story$storySetValue, value, story) : story;
+			});
+	});
+var $miyamoen$select_list$Types$fromList = function (list) {
+	if (list.b) {
+		var x = list.a;
+		var xs = list.b;
+		return $elm$core$Maybe$Just(
+			A3($miyamoen$select_list$Types$SelectList, _List_Nil, x, xs));
+	} else {
+		return $elm$core$Maybe$Nothing;
+	}
+};
+var $miyamoen$select_list$SelectList$fromList = $miyamoen$select_list$Types$fromList;
+var $author$project$UIExplorer$Story$storyHelp = function (info) {
+	switch (info.$) {
+		case 'RangeStory':
+			var label = info.a;
+			var unit = info.b.unit;
+			var min = info.b.min;
+			var max = info.b.max;
+			var _default = info.b._default;
+			return $elm$core$Maybe$Just(
+				A2(
+					$author$project$UIExplorer$Story$RangeStoryModel,
+					label,
+					{max: max, min: min, unit: unit, value: _default}));
+		case 'TextStory':
+			var label = info.a;
+			var _default = info.b;
+			return $elm$core$Maybe$Just(
+				A2($author$project$UIExplorer$Story$TextStoryModel, label, _default));
+		case 'OptionListStory':
+			var label = info.a;
+			var options = info.b;
+			return A2(
+				$elm$core$Maybe$map,
+				$author$project$UIExplorer$Story$OptionListStoryModel(label),
+				$miyamoen$select_list$SelectList$fromList(options));
+		default:
+			var label = info.a;
+			var _default = info.b;
+			return $elm$core$Maybe$Just(
+				A2($author$project$UIExplorer$Story$BoolStoryModel, label, _default));
+	}
+};
+var $author$project$UIExplorer$Story$StorySelect = F2(
+	function (a, b) {
+		return {$: 'StorySelect', a: a, b: b};
+	});
+var $author$project$Widget$Material$Typography$caption = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Font$size(12),
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.4)
+	]);
+var $author$project$Widget$Material$chip = $author$project$Internal$Material$Chip$chip;
+var $mdgriffith$elm_ui$Element$Input$Thumb = function (a) {
+	return {$: 'Thumb', a: a};
+};
+var $mdgriffith$elm_ui$Element$Input$defaultThumb = $mdgriffith$elm_ui$Element$Input$Thumb(
+	_List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$width(
+			$mdgriffith$elm_ui$Element$px(16)),
+			$mdgriffith$elm_ui$Element$height(
+			$mdgriffith$elm_ui$Element$px(16)),
+			$mdgriffith$elm_ui$Element$Border$rounded(8),
+			$mdgriffith$elm_ui$Element$Border$width(1),
+			$mdgriffith$elm_ui$Element$Border$color(
+			A3($mdgriffith$elm_ui$Element$rgb, 0.5, 0.5, 0.5)),
+			$mdgriffith$elm_ui$Element$Background$color(
+			A3($mdgriffith$elm_ui$Element$rgb, 1, 1, 1))
+		]));
+var $miyamoen$select_list$Query$beforeLength = function (_v0) {
+	var before = _v0.a;
+	return $elm$core$List$length(before);
+};
+var $miyamoen$select_list$SelectList$beforeLength = $miyamoen$select_list$Query$beforeLength;
+var $miyamoen$select_list$SelectList$index = $miyamoen$select_list$SelectList$beforeLength;
+var $author$project$Internal$Material$List$row = {
+	content: {element: _List_Nil, ifFirst: _List_Nil, ifLast: _List_Nil, ifSingleton: _List_Nil, otherwise: _List_Nil},
+	elementRow: _List_fromArray(
+		[
+			A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8),
+			$mdgriffith$elm_ui$Element$spacing(8)
+		])
+};
+var $author$project$Widget$Material$row = $author$project$Internal$Material$List$row;
+var $author$project$Widget$select = $author$project$Internal$Select$select;
+var $mdgriffith$elm_ui$Internal$Model$getHeight = function (attrs) {
+	return A3(
+		$elm$core$List$foldr,
+		F2(
+			function (attr, acc) {
+				if (acc.$ === 'Just') {
+					var x = acc.a;
+					return $elm$core$Maybe$Just(x);
+				} else {
+					if (attr.$ === 'Height') {
+						var len = attr.a;
+						return $elm$core$Maybe$Just(len);
+					} else {
+						return $elm$core$Maybe$Nothing;
+					}
+				}
+			}),
+		$elm$core$Maybe$Nothing,
+		attrs);
+};
+var $mdgriffith$elm_ui$Internal$Model$getSpacing = F2(
+	function (attrs, _default) {
+		return A2(
+			$elm$core$Maybe$withDefault,
+			_default,
+			A3(
+				$elm$core$List$foldr,
+				F2(
+					function (attr, acc) {
+						if (acc.$ === 'Just') {
+							var x = acc.a;
+							return $elm$core$Maybe$Just(x);
+						} else {
+							if ((attr.$ === 'StyleClass') && (attr.b.$ === 'SpacingStyle')) {
+								var _v2 = attr.b;
+								var x = _v2.b;
+								var y = _v2.c;
+								return $elm$core$Maybe$Just(
+									_Utils_Tuple2(x, y));
+							} else {
+								return $elm$core$Maybe$Nothing;
+							}
+						}
+					}),
+				$elm$core$Maybe$Nothing,
+				attrs));
+	});
+var $mdgriffith$elm_ui$Internal$Model$getWidth = function (attrs) {
+	return A3(
+		$elm$core$List$foldr,
+		F2(
+			function (attr, acc) {
+				if (acc.$ === 'Just') {
+					var x = acc.a;
+					return $elm$core$Maybe$Just(x);
+				} else {
+					if (attr.$ === 'Width') {
+						var len = attr.a;
+						return $elm$core$Maybe$Just(len);
+					} else {
+						return $elm$core$Maybe$Nothing;
+					}
+				}
+			}),
+		$elm$core$Maybe$Nothing,
+		attrs);
+};
+var $elm$html$Html$Attributes$max = $elm$html$Html$Attributes$stringProperty('max');
+var $elm$html$Html$Attributes$min = $elm$html$Html$Attributes$stringProperty('min');
+var $mdgriffith$elm_ui$Element$spacingXY = F2(
+	function (x, y) {
+		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, y),
+				x,
+				y));
+	});
+var $elm$html$Html$Attributes$step = function (n) {
+	return A2($elm$html$Html$Attributes$stringProperty, 'step', n);
+};
+var $elm$core$String$toFloat = _String_toFloat;
+var $elm$core$Basics$abs = function (n) {
+	return (n < 0) ? (-n) : n;
+};
+var $mdgriffith$elm_ui$Element$Input$viewHorizontalThumb = F3(
+	function (factor, thumbAttributes, trackHeight) {
+		return A2(
+			$mdgriffith$elm_ui$Element$row,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$height(
+					A2($elm$core$Maybe$withDefault, $mdgriffith$elm_ui$Element$fill, trackHeight)),
+					$mdgriffith$elm_ui$Element$centerY
+				]),
+			_List_fromArray(
+				[
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width(
+							$mdgriffith$elm_ui$Element$fillPortion(
+								$elm$core$Basics$round(factor * 10000)))
+						]),
+					$mdgriffith$elm_ui$Element$none),
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$centerY,
+						A2(
+							$elm$core$List$map,
+							$mdgriffith$elm_ui$Internal$Model$mapAttr($elm$core$Basics$never),
+							thumbAttributes)),
+					$mdgriffith$elm_ui$Element$none),
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width(
+							$mdgriffith$elm_ui$Element$fillPortion(
+								$elm$core$Basics$round(
+									$elm$core$Basics$abs(1 - factor) * 10000)))
+						]),
+					$mdgriffith$elm_ui$Element$none)
+				]));
+	});
+var $mdgriffith$elm_ui$Element$Input$viewVerticalThumb = F3(
+	function (factor, thumbAttributes, trackWidth) {
+		return A2(
+			$mdgriffith$elm_ui$Element$column,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$width(
+					A2($elm$core$Maybe$withDefault, $mdgriffith$elm_ui$Element$fill, trackWidth)),
+					$mdgriffith$elm_ui$Element$centerX
+				]),
+			_List_fromArray(
+				[
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$height(
+							$mdgriffith$elm_ui$Element$fillPortion(
+								$elm$core$Basics$round(
+									$elm$core$Basics$abs(1 - factor) * 10000)))
+						]),
+					$mdgriffith$elm_ui$Element$none),
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$centerX,
+						A2(
+							$elm$core$List$map,
+							$mdgriffith$elm_ui$Internal$Model$mapAttr($elm$core$Basics$never),
+							thumbAttributes)),
+					$mdgriffith$elm_ui$Element$none),
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$height(
+							$mdgriffith$elm_ui$Element$fillPortion(
+								$elm$core$Basics$round(factor * 10000)))
+						]),
+					$mdgriffith$elm_ui$Element$none)
+				]));
+	});
+var $mdgriffith$elm_ui$Element$Input$slider = F2(
+	function (attributes, input) {
+		var trackWidth = $mdgriffith$elm_ui$Internal$Model$getWidth(attributes);
+		var trackHeight = $mdgriffith$elm_ui$Internal$Model$getHeight(attributes);
+		var vertical = function () {
+			var _v8 = _Utils_Tuple2(trackWidth, trackHeight);
+			_v8$3:
+			while (true) {
+				if (_v8.a.$ === 'Nothing') {
+					if (_v8.b.$ === 'Nothing') {
+						var _v9 = _v8.a;
+						var _v10 = _v8.b;
+						return false;
+					} else {
+						break _v8$3;
+					}
+				} else {
+					if ((_v8.a.a.$ === 'Px') && (_v8.b.$ === 'Just')) {
+						switch (_v8.b.a.$) {
+							case 'Px':
+								var w = _v8.a.a.a;
+								var h = _v8.b.a.a;
+								return _Utils_cmp(h, w) > 0;
+							case 'Fill':
+								return true;
+							default:
+								break _v8$3;
+						}
+					} else {
+						break _v8$3;
+					}
+				}
+			}
+			return false;
+		}();
+		var factor = (input.value - input.min) / (input.max - input.min);
+		var _v0 = input.thumb;
+		var thumbAttributes = _v0.a;
+		var height = $mdgriffith$elm_ui$Internal$Model$getHeight(thumbAttributes);
+		var thumbHeightString = function () {
+			if (height.$ === 'Nothing') {
+				return '20px';
+			} else {
+				if (height.a.$ === 'Px') {
+					var px = height.a.a;
+					return $elm$core$String$fromInt(px) + 'px';
+				} else {
+					return '100%';
+				}
+			}
+		}();
+		var width = $mdgriffith$elm_ui$Internal$Model$getWidth(thumbAttributes);
+		var thumbWidthString = function () {
+			if (width.$ === 'Nothing') {
+				return '20px';
+			} else {
+				if (width.a.$ === 'Px') {
+					var px = width.a.a;
+					return $elm$core$String$fromInt(px) + 'px';
+				} else {
+					return '100%';
+				}
+			}
+		}();
+		var className = 'thmb-' + (thumbWidthString + ('-' + thumbHeightString));
+		var thumbShadowStyle = _List_fromArray(
+			[
+				A2($mdgriffith$elm_ui$Internal$Model$Property, 'width', thumbWidthString),
+				A2($mdgriffith$elm_ui$Internal$Model$Property, 'height', thumbHeightString)
+			]);
+		var _v1 = A2(
+			$mdgriffith$elm_ui$Internal$Model$getSpacing,
+			attributes,
+			_Utils_Tuple2(5, 5));
+		var spacingX = _v1.a;
+		var spacingY = _v1.b;
+		return A3(
+			$mdgriffith$elm_ui$Element$Input$applyLabel,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Input$isHiddenLabel(input.label) ? $mdgriffith$elm_ui$Internal$Model$NoAttribute : A2($mdgriffith$elm_ui$Element$spacingXY, spacingX, spacingY),
+					$mdgriffith$elm_ui$Element$Region$announce,
+					$mdgriffith$elm_ui$Element$width(
+					function () {
+						if (trackWidth.$ === 'Nothing') {
+							return $mdgriffith$elm_ui$Element$fill;
+						} else {
+							if (trackWidth.a.$ === 'Px') {
+								return $mdgriffith$elm_ui$Element$shrink;
+							} else {
+								var x = trackWidth.a;
+								return x;
+							}
+						}
+					}()),
+					$mdgriffith$elm_ui$Element$height(
+					function () {
+						if (trackHeight.$ === 'Nothing') {
+							return $mdgriffith$elm_ui$Element$shrink;
+						} else {
+							if (trackHeight.a.$ === 'Px') {
+								return $mdgriffith$elm_ui$Element$shrink;
+							} else {
+								var x = trackHeight.a;
+								return x;
+							}
+						}
+					}())
+				]),
+			input.label,
+			A2(
+				$mdgriffith$elm_ui$Element$row,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$width(
+						A2($elm$core$Maybe$withDefault, $mdgriffith$elm_ui$Element$fill, trackWidth)),
+						$mdgriffith$elm_ui$Element$height(
+						A2(
+							$elm$core$Maybe$withDefault,
+							$mdgriffith$elm_ui$Element$px(20),
+							trackHeight))
+					]),
+				_List_fromArray(
+					[
+						A4(
+						$mdgriffith$elm_ui$Internal$Model$element,
+						$mdgriffith$elm_ui$Internal$Model$asEl,
+						$mdgriffith$elm_ui$Internal$Model$NodeName('input'),
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Input$hiddenLabelAttribute(input.label),
+								A2(
+								$mdgriffith$elm_ui$Internal$Model$StyleClass,
+								$mdgriffith$elm_ui$Internal$Flag$active,
+								A2($mdgriffith$elm_ui$Internal$Model$Style, 'input[type=\"range\"].' + (className + '::-moz-range-thumb'), thumbShadowStyle)),
+								A2(
+								$mdgriffith$elm_ui$Internal$Model$StyleClass,
+								$mdgriffith$elm_ui$Internal$Flag$hover,
+								A2($mdgriffith$elm_ui$Internal$Model$Style, 'input[type=\"range\"].' + (className + '::-webkit-slider-thumb'), thumbShadowStyle)),
+								A2(
+								$mdgriffith$elm_ui$Internal$Model$StyleClass,
+								$mdgriffith$elm_ui$Internal$Flag$focus,
+								A2($mdgriffith$elm_ui$Internal$Model$Style, 'input[type=\"range\"].' + (className + '::-ms-thumb'), thumbShadowStyle)),
+								$mdgriffith$elm_ui$Internal$Model$Attr(
+								$elm$html$Html$Attributes$class(className + ' focusable-parent')),
+								$mdgriffith$elm_ui$Internal$Model$Attr(
+								$elm$html$Html$Events$onInput(
+									function (str) {
+										var _v4 = $elm$core$String$toFloat(str);
+										if (_v4.$ === 'Nothing') {
+											return input.onChange(0);
+										} else {
+											var val = _v4.a;
+											return input.onChange(val);
+										}
+									})),
+								$mdgriffith$elm_ui$Internal$Model$Attr(
+								$elm$html$Html$Attributes$type_('range')),
+								$mdgriffith$elm_ui$Internal$Model$Attr(
+								$elm$html$Html$Attributes$step(
+									function () {
+										var _v5 = input.step;
+										if (_v5.$ === 'Nothing') {
+											return 'any';
+										} else {
+											var step = _v5.a;
+											return $elm$core$String$fromFloat(step);
+										}
+									}())),
+								$mdgriffith$elm_ui$Internal$Model$Attr(
+								$elm$html$Html$Attributes$min(
+									$elm$core$String$fromFloat(input.min))),
+								$mdgriffith$elm_ui$Internal$Model$Attr(
+								$elm$html$Html$Attributes$max(
+									$elm$core$String$fromFloat(input.max))),
+								$mdgriffith$elm_ui$Internal$Model$Attr(
+								$elm$html$Html$Attributes$value(
+									$elm$core$String$fromFloat(input.value))),
+								vertical ? $mdgriffith$elm_ui$Internal$Model$Attr(
+								A2($elm$html$Html$Attributes$attribute, 'orient', 'vertical')) : $mdgriffith$elm_ui$Internal$Model$NoAttribute,
+								$mdgriffith$elm_ui$Element$width(
+								vertical ? A2(
+									$elm$core$Maybe$withDefault,
+									$mdgriffith$elm_ui$Element$px(20),
+									trackHeight) : A2($elm$core$Maybe$withDefault, $mdgriffith$elm_ui$Element$fill, trackWidth)),
+								$mdgriffith$elm_ui$Element$height(
+								vertical ? A2($elm$core$Maybe$withDefault, $mdgriffith$elm_ui$Element$fill, trackWidth) : A2(
+									$elm$core$Maybe$withDefault,
+									$mdgriffith$elm_ui$Element$px(20),
+									trackHeight))
+							]),
+						$mdgriffith$elm_ui$Internal$Model$Unkeyed(_List_Nil)),
+						A2(
+						$mdgriffith$elm_ui$Element$el,
+						A2(
+							$elm$core$List$cons,
+							$mdgriffith$elm_ui$Element$width(
+								A2($elm$core$Maybe$withDefault, $mdgriffith$elm_ui$Element$fill, trackWidth)),
+							A2(
+								$elm$core$List$cons,
+								$mdgriffith$elm_ui$Element$height(
+									A2(
+										$elm$core$Maybe$withDefault,
+										$mdgriffith$elm_ui$Element$px(20),
+										trackHeight)),
+								_Utils_ap(
+									attributes,
+									_List_fromArray(
+										[
+											$mdgriffith$elm_ui$Element$behindContent(
+											vertical ? A3($mdgriffith$elm_ui$Element$Input$viewVerticalThumb, factor, thumbAttributes, trackWidth) : A3($mdgriffith$elm_ui$Element$Input$viewHorizontalThumb, factor, thumbAttributes, trackHeight))
+										])))),
+						$mdgriffith$elm_ui$Element$none)
+					])));
+	});
+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 $miyamoen$select_list$Types$reverseAppend = F2(
+	function (xs, ys) {
+		return A3($elm$core$List$foldl, $elm$core$List$cons, ys, xs);
+	});
+var $miyamoen$select_list$Types$toList = function (_v0) {
+	var before = _v0.a;
+	var a = _v0.b;
+	var after = _v0.c;
+	return A2(
+		$miyamoen$select_list$Types$reverseAppend,
+		before,
+		A2($elm$core$List$cons, a, after));
+};
+var $miyamoen$select_list$SelectList$toList = $miyamoen$select_list$Types$toList;
+var $author$project$Internal$List$internalButton = F2(
+	function (style, list) {
+		return A2(
+			$elm$core$List$indexedMap,
+			function (i) {
+				return $author$project$Internal$Select$selectButton(
+					A2(
+						$author$project$Widget$Customize$elementButton,
+						_Utils_ap(
+							style.element,
+							($elm$core$List$length(list) === 1) ? style.ifSingleton : ((!i) ? style.ifFirst : (_Utils_eq(
+								i,
+								$elm$core$List$length(list) - 1) ? style.ifLast : style.otherwise))),
+						style.content));
+			},
+			list);
+	});
+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;
+					if ((_Utils_cmp(r, x / 2) > -1) && (_Utils_cmp(b, y / 2) > -1)) {
+						var newTop = t - (y / 2);
+						var newRight = r - (x / 2);
+						var newLeft = l - (x / 2);
+						var newBottom = b - (y / 2);
+						return $elm$core$Maybe$Just(
+							A2(
+								$mdgriffith$elm_ui$Internal$Model$StyleClass,
+								$mdgriffith$elm_ui$Internal$Flag$padding,
+								A5(
+									$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+									A4($mdgriffith$elm_ui$Internal$Model$paddingNameFloat, newTop, newRight, newBottom, newLeft),
+									newTop,
+									newRight,
+									newBottom,
+									newLeft)));
+					} else {
+						return $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$Internal$List$wrappedButtonRow = function (style) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$author$project$Internal$List$internalButton(
+			{content: style.content, element: style.elementRow.content.element, ifFirst: style.elementRow.content.ifFirst, ifLast: style.elementRow.content.ifLast, ifSingleton: style.elementRow.content.ifSingleton, otherwise: style.elementRow.content.otherwise}),
+		$mdgriffith$elm_ui$Element$wrappedRow(style.elementRow.elementRow));
+};
+var $author$project$Widget$wrappedButtonRow = $author$project$Internal$List$wrappedButtonRow;
+var $author$project$UIExplorer$Story$storyView = F2(
+	function (context, model) {
+		switch (model.$) {
+			case 'RangeStoryModel':
+				var label = model.a;
+				var unit = model.b.unit;
+				var min = model.b.min;
+				var max = model.b.max;
+				var value = model.b.value;
+				return A2(
+					$mdgriffith$elm_ui$Element$column,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$spacing(8),
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							$author$project$Widget$Material$Typography$caption,
+							$mdgriffith$elm_ui$Element$text(
+								label + (' (' + ($elm$core$String$fromInt(value) + (unit + ')'))))),
+							A2(
+							$mdgriffith$elm_ui$Element$Input$slider,
+							_List_Nil,
+							{
+								label: $mdgriffith$elm_ui$Element$Input$labelHidden(label),
+								max: max,
+								min: min,
+								onChange: A2(
+									$elm$core$Basics$composeR,
+									$elm$core$Basics$round,
+									A2(
+										$elm$core$Basics$composeR,
+										$elm$core$String$fromInt,
+										$author$project$UIExplorer$Story$StorySelect(label))),
+								step: $elm$core$Maybe$Just(1.0),
+								thumb: $mdgriffith$elm_ui$Element$Input$defaultThumb,
+								value: value
+							})
+						]));
+			case 'TextStoryModel':
+				var label = model.a;
+				var value = model.b;
+				return A2(
+					$mdgriffith$elm_ui$Element$column,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$spacing(8),
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							$author$project$Widget$Material$Typography$caption,
+							$mdgriffith$elm_ui$Element$text(label)),
+							A2(
+							$author$project$Widget$textInput,
+							$author$project$Widget$Material$textInput(context.palette),
+							{
+								chips: _List_Nil,
+								label: label,
+								onChange: $author$project$UIExplorer$Story$StorySelect(label),
+								placeholder: $elm$core$Maybe$Nothing,
+								text: value
+							})
+						]));
+			case 'OptionListStoryModel':
+				var label = model.a;
+				var options = model.b;
+				return A2(
+					$mdgriffith$elm_ui$Element$column,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$spacing(8),
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							$author$project$Widget$Material$Typography$caption,
+							$mdgriffith$elm_ui$Element$text(label)),
+							A2(
+							$author$project$Widget$wrappedButtonRow,
+							{
+								content: $author$project$Widget$Material$chip(context.palette),
+								elementRow: $author$project$Widget$Material$row
+							},
+							$author$project$Widget$select(
+								{
+									onSelect: function (selected) {
+										return A2(
+											$elm$core$Maybe$map,
+											A2(
+												$elm$core$Basics$composeR,
+												$elm$core$Tuple$second,
+												$author$project$UIExplorer$Story$StorySelect(label)),
+											$elm$core$List$head(
+												A2(
+													$elm$core$List$filter,
+													function (_v1) {
+														var i = _v1.a;
+														return _Utils_eq(selected, i);
+													},
+													A2(
+														$elm$core$List$indexedMap,
+														F2(
+															function (i, opt) {
+																return _Utils_Tuple2(i, opt);
+															}),
+														$miyamoen$select_list$SelectList$toList(options)))));
+									},
+									options: A2(
+										$elm$core$List$map,
+										function (opt) {
+											return {
+												icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+												text: opt
+											};
+										},
+										$miyamoen$select_list$SelectList$toList(options)),
+									selected: $elm$core$Maybe$Just(
+										$miyamoen$select_list$SelectList$index(options))
+								}))
+						]));
+			default:
+				var label = model.a;
+				var value = model.b;
+				return A2(
+					$mdgriffith$elm_ui$Element$row,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$spaceEvenly,
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							$author$project$Widget$Material$Typography$caption,
+							$mdgriffith$elm_ui$Element$text(label)),
+							A2(
+							$author$project$Widget$switch,
+							$author$project$Widget$Material$switch(context.palette),
+							{
+								active: value,
+								description: label,
+								onPress: $elm$core$Maybe$Just(
+									A2(
+										$author$project$UIExplorer$Story$StorySelect,
+										label,
+										value ? 'f' : 't'))
+							})
+						]));
+		}
+	});
+var $author$project$UIExplorer$Story$storyTile = F3(
+	function (title, stories, _v0) {
+		return {
+			init: function (_v1) {
+				return _Utils_Tuple2(
+					A2(
+						$elm$core$List$filterMap,
+						$author$project$UIExplorer$Story$storyHelp,
+						$elm$core$List$reverse(stories)),
+					$elm$core$Platform$Cmd$none);
+			},
+			subscriptions: $elm$core$Basics$always($elm$core$Platform$Sub$none),
+			update: F2(
+				function (msg, model) {
+					var story = msg.a;
+					var value = msg.b;
+					return _Utils_Tuple2(
+						A3($author$project$UIExplorer$Story$selectStory, story, value, model),
+						$elm$core$Platform$Cmd$none);
+				}),
+			views: F2(
+				function (context, model) {
+					return _List_fromArray(
+						[
+							{
+							attributes: _List_Nil,
+							body: A2(
+								$mdgriffith$elm_ui$Element$column,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$spacing(8),
+										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+									]),
+								A2(
+									$elm$core$List$map,
+									$author$project$UIExplorer$Story$storyView(context),
+									model)),
+							position: $author$project$UIExplorer$Tile$NewRightColumnTile,
+							title: title
+						}
+						]);
+				})
+		};
+	});
+var $author$project$UIExplorer$Story$build = function (builder) {
+	return A2(
+		$author$project$UIExplorer$Tile$linkGroup,
+		{
+			init: builder.tilelist.init,
+			subscriptions: A2($elm$core$Basics$composeR, $elm$core$Tuple$second, builder.tilelist.subscriptions),
+			update: F2(
+				function (msg, _v0) {
+					var model = _v0.b;
+					return A2(builder.tilelist.update, msg, model);
+				}),
+			views: F2(
+				function (context, _v1) {
+					var selectorModel = _v1.a;
+					var model = _v1.b;
+					return A2(
+						$elm$core$List$map,
+						function (view) {
+							return A2(view, context, model);
+						},
+						builder.tilelist.views(
+							builder.storiesToValue(
+								$elm$core$List$reverse(
+									$author$project$UIExplorer$Story$selectedStories(selectorModel)))));
+				})
+		},
+		A3($author$project$UIExplorer$Story$storyTile, builder.title, builder.stories, builder.storiesToValue));
+};
+var $author$project$UIExplorer$Story$OptionListStory = F2(
+	function (a, b) {
+		return {$: 'OptionListStory', a: a, b: b};
+	});
+var $author$project$UIExplorer$Story$optionListStory = F3(
+	function (label, first, options) {
+		return {
+			info: A2(
+				$author$project$UIExplorer$Story$OptionListStory,
+				label,
+				A2(
+					$elm$core$List$map,
+					$elm$core$Tuple$first,
+					A2($elm$core$List$cons, first, options))),
+			toValue: function (optLabel) {
+				return A2(
+					$elm$core$Maybe$withDefault,
+					first.b,
+					A3(
+						$elm$core$List$foldl,
+						F2(
+							function (_v0, res) {
+								var key = _v0.a;
+								var optvalue = _v0.b;
+								var _v1 = _Utils_Tuple2(
+									res,
+									_Utils_eq(optLabel, key));
+								if (_v1.a.$ === 'Just') {
+									var x = _v1.a.a;
+									return $elm$core$Maybe$Just(x);
+								} else {
+									if (_v1.b) {
+										var _v2 = _v1.a;
+										return $elm$core$Maybe$Just(optvalue);
+									} else {
+										var _v3 = _v1.a;
+										return $elm$core$Maybe$Nothing;
+									}
+								}
+							}),
+						$elm$core$Maybe$Nothing,
+						A2($elm$core$List$cons, first, options)));
+			}
+		};
+	});
+var $author$project$UIExplorer$Story$RangeStory = F2(
+	function (a, b) {
+		return {$: 'RangeStory', a: a, b: b};
+	});
+var $author$project$UIExplorer$Story$rangeStory = F2(
+	function (label, cfg) {
+		return {
+			info: A2($author$project$UIExplorer$Story$RangeStory, label, cfg),
+			toValue: A2(
+				$elm$core$Basics$composeR,
+				$elm$core$String$toInt,
+				$elm$core$Maybe$withDefault(cfg._default))
+		};
+	});
+var $author$project$UIExplorer$Story$TextStory = F2(
+	function (a, b) {
+		return {$: 'TextStory', a: a, b: b};
+	});
+var $author$project$UIExplorer$Story$textStory = F2(
+	function (label, _default) {
+		return {
+			info: A2($author$project$UIExplorer$Story$TextStory, label, _default),
+			toValue: $elm$core$Basics$identity
+		};
+	});
+var $icidasset$elm_material_icons$Material$Icons$Types$Color = function (a) {
+	return {$: 'Color', a: a};
+};
+var $author$project$UIExplorer$Story$addTile = F2(
+	function (view, tilelist) {
+		return _Utils_update(
+			tilelist,
+			{
+				views: A2(
+					$elm$core$List$append,
+					tilelist.views,
+					_List_fromArray(
+						[view]))
+			});
+	});
+var $icidasset$elm_material_icons$Material$Icons$Internal$f = $elm$svg$Svg$Attributes$fill;
+var $elm$svg$Svg$g = $elm$svg$Svg$trustedNode('g');
+var $icidasset$elm_material_icons$Material$Icons$Internal$icon = F4(
+	function (attributes, nodes, size, coloring) {
+		var sizeAsString = $elm$core$String$fromInt(size);
+		return A2(
+			$elm$svg$Svg$svg,
+			_Utils_ap(
+				attributes,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$height(sizeAsString),
+						$elm$svg$Svg$Attributes$width(sizeAsString)
+					])),
+			_List_fromArray(
+				[
+					A2(
+					$elm$svg$Svg$g,
+					_List_fromArray(
+						[
+							function () {
+							if (coloring.$ === 'Color') {
+								var color = coloring.a;
+								return $elm$svg$Svg$Attributes$fill(
+									$avh4$elm_color$Color$toCssString(color));
+							} else {
+								return $elm$svg$Svg$Attributes$fill('currentColor');
+							}
+						}()
+						]),
+					nodes)
+				]));
+	});
+var $icidasset$elm_material_icons$Material$Icons$Internal$p = $elm$svg$Svg$path;
+var $icidasset$elm_material_icons$Material$Icons$Internal$v = $elm$svg$Svg$Attributes$viewBox;
+var $icidasset$elm_material_icons$Material$Icons$change_history = A2(
+	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
+	_List_fromArray(
+		[
+			$icidasset$elm_material_icons$Material$Icons$Internal$v('0 0 24 24')
+		]),
+	_List_fromArray(
+		[
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M0 0h24v24H0V0z'),
+					$icidasset$elm_material_icons$Material$Icons$Internal$f('none')
+				]),
+			_List_Nil),
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Widget$Icon$elmMaterialIcons = F2(
+	function (wrapper, fun) {
+		return function (_v0) {
+			var size = _v0.size;
+			var color = _v0.color;
+			return A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_Nil,
+				$mdgriffith$elm_ui$Element$html(
+					A2(
+						fun,
+						size,
+						wrapper(color))));
+		};
+	});
+var $author$project$UIExplorer$Story$initStaticTiles = {
+	init: $elm$core$Basics$always(
+		_Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none)),
+	subscriptions: $elm$core$Basics$always($elm$core$Platform$Sub$none),
+	update: F2(
+		function (_v0, _v1) {
+			return _Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none);
+		}),
+	views: _List_Nil
+};
+var $elm$core$List$repeatHelp = F3(
+	function (result, n, value) {
+		repeatHelp:
+		while (true) {
+			if (n <= 0) {
+				return result;
+			} else {
+				var $temp$result = A2($elm$core$List$cons, value, result),
+					$temp$n = n - 1,
+					$temp$value = value;
+				result = $temp$result;
+				n = $temp$n;
+				value = $temp$value;
+				continue repeatHelp;
+			}
+		}
+	});
+var $elm$core$List$repeat = F2(
+	function (n, value) {
+		return A3($elm$core$List$repeatHelp, _List_Nil, n, value);
+	});
+var $mdgriffith$elm_ui$Element$scrollbarX = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$overflow, $mdgriffith$elm_ui$Internal$Style$classes.scrollbarsX);
+var $author$project$Internal$AppBar$tabBar = F2(
+	function (style, m) {
+		return A3(
+			$author$project$Internal$AppBar$internalNav,
+			_List_fromArray(
+				[
+					A2($mdgriffith$elm_ui$Element$el, style.content.menu.content.title, m.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$Internal$Select$selectButton(style.content.menu.content.menuTabButton),
+						$author$project$Internal$Select$select(m.menu)))
+				]),
+			{
+				content: {
+					actions: style.content.actions,
+					menu: {elementRow: style.content.menu.elementRow},
+					search: style.content.search
+				},
+				elementRow: style.elementRow
+			},
+			m);
+	});
+var $author$project$Widget$tabBar = $author$project$Internal$AppBar$tabBar;
+var $mdgriffith$elm_ui$Internal$Model$Bottom = {$: 'Bottom'};
+var $mdgriffith$elm_ui$Element$alignBottom = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$Bottom);
+var $author$project$Internal$Material$AppBar$menuTabButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
+						size: 18
+					},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					otherwise: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
+						size: 18
+					}
+				},
+				text: {contentText: _List_Nil}
+			},
+			elementRow: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$spacing(8),
+					$mdgriffith$elm_ui$Element$centerY,
+					$mdgriffith$elm_ui$Element$centerX
+				])
+		},
+		elementButton: _Utils_ap(
+			$author$project$Widget$Material$Typography$button,
+			_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$Material$Color$fromColor(
+						$author$project$Widget$Material$Color$accessibleTextColor(palette.primary))),
+					$mdgriffith$elm_ui$Element$alignBottom,
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$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$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		otherwise: _List_Nil
+	};
+};
+var $author$project$Internal$Material$AppBar$tabBar = function (palette) {
+	return A2(
+		$author$project$Internal$Material$AppBar$internalBar,
+		{
+			menuTabButton: $author$project$Internal$Material$AppBar$menuTabButton(palette),
+			title: _Utils_ap(
+				$author$project$Widget$Material$Typography$h6,
+				_List_fromArray(
+					[
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+					]))
+		},
+		palette);
+};
+var $author$project$Widget$Material$tabBar = $author$project$Internal$Material$AppBar$tabBar;
+var $author$project$UIExplorer$Tile$LeftColumnTile = {$: 'LeftColumnTile'};
+var $author$project$Page$viewTile = F2(
+	function (title, content) {
+		return {
+			attributes: _List_Nil,
+			body: A2(
+				$mdgriffith$elm_ui$Element$column,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+						$mdgriffith$elm_ui$Element$spacing(8)
+					]),
+				_List_fromArray(
+					[
+						A2(
+						$mdgriffith$elm_ui$Element$el,
+						$author$project$Widget$Material$Typography$caption,
+						$mdgriffith$elm_ui$Element$text(title)),
+						content
+					])),
+			position: $author$project$UIExplorer$Tile$LeftColumnTile,
+			title: $elm$core$Maybe$Nothing
+		};
+	});
+var $author$project$Page$AppBar$viewFunctions = function () {
+	var viewTabBar = F9(
+		function (titleString, deviceClass, _v2, openRightSheet, openTopSheet, primaryActions, search, _v3, _v4) {
+			var palette = _v3.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.button',
+				A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width(
+							$mdgriffith$elm_ui$Element$px(400)),
+							$mdgriffith$elm_ui$Element$scrollbarX
+						]),
+					A2(
+						$author$project$Widget$tabBar,
+						$author$project$Widget$Material$tabBar(palette),
+						{
+							deviceClass: deviceClass,
+							menu: {
+								onSelect: $elm$core$Basics$always(
+									$elm$core$Maybe$Just(_Utils_Tuple0)),
+								options: A2(
+									$elm$core$List$map,
+									function (string) {
+										return {
+											icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+											text: string
+										};
+									},
+									_List_fromArray(
+										['Home', 'About'])),
+								selected: $elm$core$Maybe$Just(0)
+							},
+							openRightSheet: openRightSheet,
+							openTopSheet: openTopSheet,
+							primaryActions: A2(
+								$elm$core$List$repeat,
+								primaryActions,
+								{
+									icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$change_history),
+									onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+									text: 'Action'
+								}),
+							search: search,
+							title: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_Nil,
+								$mdgriffith$elm_ui$Element$text(titleString))
+						})));
+		});
+	var viewMenuBar = F9(
+		function (titleString, deviceClass, openLeftSheet, openRightSheet, openTopSheet, primaryActions, search, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.button',
+				A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width(
+							$mdgriffith$elm_ui$Element$px(400)),
+							$mdgriffith$elm_ui$Element$scrollbarX
+						]),
+					A2(
+						$author$project$Widget$menuBar,
+						$author$project$Widget$Material$menuBar(palette),
+						{
+							deviceClass: deviceClass,
+							openLeftSheet: openLeftSheet,
+							openRightSheet: openRightSheet,
+							openTopSheet: openTopSheet,
+							primaryActions: A2(
+								$elm$core$List$repeat,
+								primaryActions,
+								{
+									icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$change_history),
+									onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+									text: 'Action'
+								}),
+							search: search,
+							title: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_Nil,
+								$mdgriffith$elm_ui$Element$text(titleString))
+						})));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewMenuBar, viewTabBar]));
+}();
+var $author$project$Page$AppBar$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With search',
+			_Utils_Tuple2(
+				$elm$core$Maybe$Just(
+					{
+						chips: _List_Nil,
+						label: 'Search',
+						onChange: $elm$core$Basics$always(_Utils_Tuple0),
+						placeholder: $elm$core$Maybe$Nothing,
+						text: 'Placeholder Text'
+					}),
+				$elm$core$Maybe$Nothing),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A2(
+				$author$project$UIExplorer$Story$rangeStory,
+				'Primary Actions',
+				{_default: 3, max: 5, min: 0, unit: 'Buttons'}),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'With openTopSheet event handler',
+					_Utils_Tuple2(
+						$elm$core$Maybe$Just(_Utils_Tuple0),
+						$elm$core$Maybe$Nothing),
+					true),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$boolStory,
+						'With openRightSheet event handler',
+						_Utils_Tuple2(
+							$elm$core$Maybe$Just(_Utils_Tuple0),
+							$elm$core$Maybe$Nothing),
+						true),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$boolStory,
+							'With openLeftSheet event handler',
+							_Utils_Tuple2(
+								$elm$core$Maybe$Just(_Utils_Tuple0),
+								$elm$core$Maybe$Nothing),
+							true),
+						A2(
+							$author$project$UIExplorer$Story$addStory,
+							A3(
+								$author$project$UIExplorer$Story$optionListStory,
+								'Device Class',
+								_Utils_Tuple2('Phone', $mdgriffith$elm_ui$Element$Phone),
+								_List_fromArray(
+									[
+										_Utils_Tuple2('Tablet', $mdgriffith$elm_ui$Element$Tablet),
+										_Utils_Tuple2('Desktop', $mdgriffith$elm_ui$Element$Desktop),
+										_Utils_Tuple2('BigDesktop', $mdgriffith$elm_ui$Element$BigDesktop)
+									])),
+							A2(
+								$author$project$UIExplorer$Story$addStory,
+								A2($author$project$UIExplorer$Story$textStory, 'Title', 'Title'),
+								A2(
+									$author$project$UIExplorer$Story$book,
+									$elm$core$Maybe$Just('Options'),
+									$author$project$Page$AppBar$viewFunctions)))))))));
+var $author$project$UIExplorer$Tile$Builder = function (a) {
+	return {$: 'Builder', a: a};
+};
+var $author$project$UIExplorer$Tile$nextGroup = F2(
+	function (config, _v0) {
+		var previous = _v0.a;
+		var views_ = F2(
+			function (windowSize, _v8) {
+				var previousModel = _v8.a;
+				var model = _v8.b;
+				return A2(
+					$elm$core$List$append,
+					A2(
+						$author$project$UIExplorer$Tile$mapViewList,
+						$author$project$UIExplorer$Tile$Previous,
+						A2(previous.views, windowSize, previousModel)),
+					A2(
+						$author$project$UIExplorer$Tile$mapViewList,
+						$author$project$UIExplorer$Tile$Current,
+						A2(config.views, windowSize, model)));
+			});
+		var update_ = F2(
+			function (msg, _v7) {
+				var previousModel = _v7.a;
+				var model = _v7.b;
+				if (msg.$ === 'Previous') {
+					var previousMsg = msg.a;
+					var _v5 = A2(previous.update, previousMsg, previousModel);
+					var newPreviousModel = _v5.a;
+					var previousCmds = _v5.b;
+					return _Utils_Tuple2(
+						_Utils_Tuple2(newPreviousModel, model),
+						A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Tile$Previous, previousCmds));
+				} else {
+					var currentMsg = msg.a;
+					var _v6 = A2(config.update, currentMsg, model);
+					var newModel = _v6.a;
+					var cmds = _v6.b;
+					return _Utils_Tuple2(
+						_Utils_Tuple2(previousModel, newModel),
+						A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Tile$Current, cmds));
+				}
+			});
+		var subscriptions_ = function (_v3) {
+			var previousModel = _v3.a;
+			var model = _v3.b;
+			return $elm$core$Platform$Sub$batch(
+				_List_fromArray(
+					[
+						A2(
+						$elm$core$Platform$Sub$map,
+						$author$project$UIExplorer$Tile$Current,
+						config.subscriptions(model)),
+						A2(
+						$elm$core$Platform$Sub$map,
+						$author$project$UIExplorer$Tile$Previous,
+						previous.subscriptions(previousModel))
+					]));
+		};
+		var init_ = function (flags) {
+			var _v1 = previous.init(flags);
+			var previousModel = _v1.a;
+			var previousCmds = _v1.b;
+			var _v2 = config.init(flags);
+			var model = _v2.a;
+			var cmds = _v2.b;
+			return _Utils_Tuple2(
+				_Utils_Tuple2(previousModel, model),
+				$elm$core$Platform$Cmd$batch(
+					_List_fromArray(
+						[
+							A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Tile$Previous, previousCmds),
+							A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Tile$Current, cmds)
+						])));
+		};
+		return $author$project$UIExplorer$Tile$Builder(
+			{init: init_, subscriptions: subscriptions_, update: update_, views: views_});
+	});
+var $author$project$UIExplorer$Tile$firstGroup = function (config) {
+	return A2(
+		$author$project$UIExplorer$Tile$nextGroup,
+		config,
+		$author$project$UIExplorer$Tile$Builder(
+			{
+				init: $elm$core$Basics$always(
+					_Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none)),
+				subscriptions: $elm$core$Basics$always($elm$core$Platform$Sub$none),
+				update: F2(
+					function (_v0, m) {
+						return _Utils_Tuple2(m, $elm$core$Platform$Cmd$none);
+					}),
+				views: F2(
+					function (_v1, _v2) {
+						return _List_Nil;
+					})
+			}));
+};
+var $author$project$UIExplorer$Tile$groupSingleton = function (tile) {
+	return {
+		init: tile.init,
+		subscriptions: tile.subscriptions,
+		update: tile.update,
+		views: F2(
+			function (pagesize, model) {
+				return $elm$core$List$singleton(
+					A2(tile.view, pagesize, model));
+			})
+	};
+};
+var $author$project$UIExplorer$Tile$first = A2($elm$core$Basics$composeR, $author$project$UIExplorer$Tile$groupSingleton, $author$project$UIExplorer$Tile$firstGroup);
+var $author$project$Widget$Material$Typography$h3 = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Font$size(48)
+	]);
+var $author$project$UIExplorer$Tile$next = A2($elm$core$Basics$composeR, $author$project$UIExplorer$Tile$groupSingleton, $author$project$UIExplorer$Tile$nextGroup);
+var $mdgriffith$elm_ui$Element$Font$family = function (families) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$fontFamily,
+		A2(
+			$mdgriffith$elm_ui$Internal$Model$FontFamily,
+			A3($elm$core$List$foldl, $mdgriffith$elm_ui$Internal$Model$renderFontClassName, 'ff-', families),
+			families));
+};
+var $author$project$UIExplorer$Tile$OneColumn = function (a) {
+	return {$: 'OneColumn', a: a};
+};
+var $author$project$UIExplorer$Tile$TwoColumn = F2(
+	function (a, b) {
+		return {$: 'TwoColumn', a: a, b: b};
+	});
+var $author$project$UIExplorer$Tile$layoutAddTile = F2(
+	function (view, layout) {
+		var _v0 = view.position;
+		switch (_v0.$) {
+			case 'FullWidthTile':
+				if (layout.b && (layout.a.$ === 'OneColumn')) {
+					var items = layout.a.a;
+					var tail = layout.b;
+					return A2(
+						$elm$core$List$cons,
+						$author$project$UIExplorer$Tile$OneColumn(
+							A2($elm$core$List$cons, view, items)),
+						tail);
+				} else {
+					return A2(
+						$elm$core$List$cons,
+						$author$project$UIExplorer$Tile$OneColumn(
+							_List_fromArray(
+								[view])),
+						layout);
+				}
+			case 'LeftColumnTile':
+				if (layout.b && (layout.a.$ === 'TwoColumn')) {
+					var _v3 = layout.a;
+					var left = _v3.a;
+					var right = _v3.b;
+					var tail = layout.b;
+					return A2(
+						$elm$core$List$cons,
+						A2(
+							$author$project$UIExplorer$Tile$TwoColumn,
+							A2($elm$core$List$cons, view, left),
+							right),
+						tail);
+				} else {
+					return A2(
+						$elm$core$List$cons,
+						A2(
+							$author$project$UIExplorer$Tile$TwoColumn,
+							_List_fromArray(
+								[view]),
+							_List_Nil),
+						layout);
+				}
+			case 'NewLeftColumnTile':
+				return A2(
+					$elm$core$List$cons,
+					A2(
+						$author$project$UIExplorer$Tile$TwoColumn,
+						_List_fromArray(
+							[view]),
+						_List_Nil),
+					layout);
+			case 'RightColumnTile':
+				if (layout.b && (layout.a.$ === 'TwoColumn')) {
+					var _v5 = layout.a;
+					var left = _v5.a;
+					var right = _v5.b;
+					var tail = layout.b;
+					return A2(
+						$elm$core$List$cons,
+						A2(
+							$author$project$UIExplorer$Tile$TwoColumn,
+							left,
+							A2($elm$core$List$cons, view, right)),
+						tail);
+				} else {
+					return A2(
+						$elm$core$List$cons,
+						A2(
+							$author$project$UIExplorer$Tile$TwoColumn,
+							_List_Nil,
+							_List_fromArray(
+								[view])),
+						layout);
+				}
+			default:
+				return A2(
+					$elm$core$List$cons,
+					A2(
+						$author$project$UIExplorer$Tile$TwoColumn,
+						_List_Nil,
+						_List_fromArray(
+							[view])),
+					layout);
+		}
+	});
+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 $author$project$Internal$Material$List$cardColumn = function (palette) {
+	return {
+		content: {
+			element: _List_fromArray(
+				[
+					A2($mdgriffith$elm_ui$Element$paddingXY, 16, 12),
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(palette.surface)),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Widget$Material$Color$accessibleTextColor(palette.surface))),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A2($author$project$Widget$Material$Color$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})
+				]),
+			ifSingleton: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$rounded(4),
+					$mdgriffith$elm_ui$Element$Border$width(1)
+				]),
+			otherwise: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$rounded(0)
+				])
+		},
+		elementColumn: _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$Material$Color$shadow(4))
+					])),
+				$mdgriffith$elm_ui$Element$alignTop,
+				$mdgriffith$elm_ui$Element$Border$rounded(4),
+				$mdgriffith$elm_ui$Element$Border$width(1),
+				$mdgriffith$elm_ui$Element$Border$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface)))
+			])
+	};
+};
+var $author$project$Widget$Material$cardColumn = $author$project$Internal$Material$List$cardColumn;
+var $author$project$UIExplorer$Tile$layoutView = F3(
+	function (palette, _v0, view) {
+		var _v1 = view.title;
+		if (_v1.$ === 'Just') {
+			var string = _v1.a;
+			return A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
+					]),
+				A2(
+					$author$project$Widget$itemList,
+					$author$project$Widget$Material$cardColumn(palette),
+					_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$headerItem,
+							$author$project$Widget$Material$fullBleedHeader(palette),
+							string),
+							$author$project$Widget$asItem(
+							A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+									]),
+								view.body))
+						])));
+		} else {
+			return view.body;
+		}
+	});
+var $author$project$UIExplorer$Tile$layoutRowView = F2(
+	function (palette, row) {
+		if (row.$ === 'OneColumn') {
+			var items = row.a;
+			return A2(
+				$elm$core$List$map,
+				A2($author$project$UIExplorer$Tile$layoutView, palette, _List_Nil),
+				$elm$core$List$reverse(items));
+		} else {
+			var left = row.a;
+			var right = row.b;
+			return $elm$core$List$singleton(
+				A2(
+					$mdgriffith$elm_ui$Element$row,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+							$mdgriffith$elm_ui$Element$spacing(8)
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Element$column,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width(
+									$mdgriffith$elm_ui$Element$fillPortion(2)),
+									$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+									$mdgriffith$elm_ui$Element$spacing(32)
+								]),
+							A2(
+								$elm$core$List$map,
+								A2(
+									$author$project$UIExplorer$Tile$layoutView,
+									palette,
+									_List_fromArray(
+										[
+											$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
+										])),
+								$elm$core$List$reverse(left))),
+							A2(
+							$mdgriffith$elm_ui$Element$column,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width(
+									$mdgriffith$elm_ui$Element$fillPortion(1)),
+									$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+									$mdgriffith$elm_ui$Element$spacing(8)
+								]),
+							A2(
+								$elm$core$List$map,
+								A2($author$project$UIExplorer$Tile$layoutView, palette, _List_Nil),
+								$elm$core$List$reverse(right)))
+						])));
+		}
+	});
+var $mdgriffith$elm_ui$Element$Font$sansSerif = $mdgriffith$elm_ui$Internal$Model$SansSerif;
+var $mdgriffith$elm_ui$Element$Font$typeface = $mdgriffith$elm_ui$Internal$Model$Typeface;
+var $author$project$UIExplorer$Tile$page = function (_v0) {
+	var config = _v0.a;
+	return {
+		init: config.init,
+		subscriptions: config.subscriptions,
+		update: config.update,
+		view: F3(
+			function (pagesize, dark, model) {
+				var palette = dark ? $author$project$Widget$Material$darkPalette : $author$project$Widget$Material$defaultPalette;
+				return A2(
+					$mdgriffith$elm_ui$Element$column,
+					_Utils_ap(
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$padding(16),
+								$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+								$mdgriffith$elm_ui$Element$spacing(32),
+								$mdgriffith$elm_ui$Element$width(
+								$mdgriffith$elm_ui$Element$px(800)),
+								$mdgriffith$elm_ui$Element$centerX,
+								$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)
+							]),
+						$author$project$Widget$Material$Color$textAndBackground(palette.background)),
+					A2(
+						$elm$core$List$concatMap,
+						$author$project$UIExplorer$Tile$layoutRowView(palette),
+						$elm$core$List$reverse(
+							A3(
+								$elm$core$List$foldl,
+								$author$project$UIExplorer$Tile$layoutAddTile,
+								_List_Nil,
+								A2(
+									config.views,
+									{pagesize: pagesize, palette: palette},
+									model)))));
+			})
+	};
+};
+var $author$project$UIExplorer$Tile$FullWidthTile = {$: 'FullWidthTile'};
+var $author$project$UIExplorer$Tile$static = F2(
+	function (attributes, tileView) {
+		return {
+			init: function (flags) {
+				return _Utils_Tuple2(flags, $elm$core$Platform$Cmd$none);
+			},
+			subscriptions: function (_v0) {
+				return $elm$core$Platform$Sub$none;
+			},
+			update: F2(
+				function (_v1, m) {
+					return _Utils_Tuple2(m, $elm$core$Platform$Cmd$none);
+				}),
+			view: F2(
+				function (pagesize, flags) {
+					return {
+						attributes: attributes,
+						body: A2(tileView, pagesize, flags),
+						position: $author$project$UIExplorer$Tile$FullWidthTile,
+						title: $elm$core$Maybe$Nothing
+					};
+				})
+		};
+	});
+var $author$project$Page$create = function (config) {
+	return $author$project$UIExplorer$Tile$page(
+		A2(
+			$author$project$UIExplorer$Tile$nextGroup,
+			config.book,
+			A2(
+				$author$project$UIExplorer$Tile$next,
+				config.demo,
+				$author$project$UIExplorer$Tile$first(
+					A2(
+						$author$project$UIExplorer$Tile$static,
+						_List_Nil,
+						F2(
+							function (_v0, _v1) {
+								return A2(
+									$mdgriffith$elm_ui$Element$column,
+									_List_fromArray(
+										[
+											$mdgriffith$elm_ui$Element$spacing(32)
+										]),
+									_List_fromArray(
+										[
+											A2(
+											$mdgriffith$elm_ui$Element$el,
+											$author$project$Widget$Material$Typography$h3,
+											$mdgriffith$elm_ui$Element$text(config.title)),
+											A2(
+											$mdgriffith$elm_ui$Element$paragraph,
+											_List_Nil,
+											$elm$core$List$singleton(
+												$mdgriffith$elm_ui$Element$text(config.description)))
+										]));
+							}))))));
+};
+var $author$project$Page$demo = F3(
+	function (fun, context, model) {
+		return function (body) {
+			return {
+				attributes: _List_Nil,
+				body: body,
+				position: $author$project$UIExplorer$Tile$FullWidthTile,
+				title: $elm$core$Maybe$Just('Interactive Demo')
+			};
+		}(
+			A2(fun, context, model));
+	});
+var $author$project$Page$AppBar$RightSheet = {$: 'RightSheet'};
+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$Page$AppBar$init = _Utils_Tuple2(
+	{
+		active: $elm$core$Maybe$Just($author$project$Page$AppBar$RightSheet),
+		searchText: '',
+		selected: 0,
+		showDialog: false,
+		snackbar: $author$project$Widget$Snackbar$init,
+		window: {height: 200, width: 400}
+	},
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$AppBar$Resized = function (a) {
+	return {$: 'Resized', a: a};
+};
+var $author$project$Page$AppBar$TimePassed = function (a) {
+	return {$: 'TimePassed', a: a};
+};
+var $elm$time$Time$Every = F2(
+	function (a, b) {
+		return {$: 'Every', a: a, b: b};
+	});
+var $elm$time$Time$State = F2(
+	function (taggers, processes) {
+		return {processes: processes, taggers: taggers};
+	});
+var $elm$time$Time$init = $elm$core$Task$succeed(
+	A2($elm$time$Time$State, $elm$core$Dict$empty, $elm$core$Dict$empty));
+var $elm$time$Time$addMySub = F2(
+	function (_v0, state) {
+		var interval = _v0.a;
+		var tagger = _v0.b;
+		var _v1 = A2($elm$core$Dict$get, interval, state);
+		if (_v1.$ === 'Nothing') {
+			return A3(
+				$elm$core$Dict$insert,
+				interval,
+				_List_fromArray(
+					[tagger]),
+				state);
+		} else {
+			var taggers = _v1.a;
+			return A3(
+				$elm$core$Dict$insert,
+				interval,
+				A2($elm$core$List$cons, tagger, taggers),
+				state);
+		}
+	});
+var $elm$time$Time$Name = function (a) {
+	return {$: 'Name', a: a};
+};
+var $elm$time$Time$Offset = function (a) {
+	return {$: 'Offset', a: a};
+};
+var $elm$time$Time$Zone = F2(
+	function (a, b) {
+		return {$: 'Zone', a: a, b: b};
+	});
+var $elm$time$Time$customZone = $elm$time$Time$Zone;
+var $elm$time$Time$setInterval = _Time_setInterval;
+var $elm$core$Process$spawn = _Scheduler_spawn;
+var $elm$time$Time$spawnHelp = F3(
+	function (router, intervals, processes) {
+		if (!intervals.b) {
+			return $elm$core$Task$succeed(processes);
+		} else {
+			var interval = intervals.a;
+			var rest = intervals.b;
+			var spawnTimer = $elm$core$Process$spawn(
+				A2(
+					$elm$time$Time$setInterval,
+					interval,
+					A2($elm$core$Platform$sendToSelf, router, interval)));
+			var spawnRest = function (id) {
+				return A3(
+					$elm$time$Time$spawnHelp,
+					router,
+					rest,
+					A3($elm$core$Dict$insert, interval, id, processes));
+			};
+			return A2($elm$core$Task$andThen, spawnRest, spawnTimer);
+		}
+	});
+var $elm$time$Time$onEffects = F3(
+	function (router, subs, _v0) {
+		var processes = _v0.processes;
+		var rightStep = F3(
+			function (_v6, id, _v7) {
+				var spawns = _v7.a;
+				var existing = _v7.b;
+				var kills = _v7.c;
+				return _Utils_Tuple3(
+					spawns,
+					existing,
+					A2(
+						$elm$core$Task$andThen,
+						function (_v5) {
+							return kills;
+						},
+						$elm$core$Process$kill(id)));
+			});
+		var newTaggers = A3($elm$core$List$foldl, $elm$time$Time$addMySub, $elm$core$Dict$empty, subs);
+		var leftStep = F3(
+			function (interval, taggers, _v4) {
+				var spawns = _v4.a;
+				var existing = _v4.b;
+				var kills = _v4.c;
+				return _Utils_Tuple3(
+					A2($elm$core$List$cons, interval, spawns),
+					existing,
+					kills);
+			});
+		var bothStep = F4(
+			function (interval, taggers, id, _v3) {
+				var spawns = _v3.a;
+				var existing = _v3.b;
+				var kills = _v3.c;
+				return _Utils_Tuple3(
+					spawns,
+					A3($elm$core$Dict$insert, interval, id, existing),
+					kills);
+			});
+		var _v1 = A6(
+			$elm$core$Dict$merge,
+			leftStep,
+			bothStep,
+			rightStep,
+			newTaggers,
+			processes,
+			_Utils_Tuple3(
+				_List_Nil,
+				$elm$core$Dict$empty,
+				$elm$core$Task$succeed(_Utils_Tuple0)));
+		var spawnList = _v1.a;
+		var existingDict = _v1.b;
+		var killTask = _v1.c;
+		return A2(
+			$elm$core$Task$andThen,
+			function (newProcesses) {
+				return $elm$core$Task$succeed(
+					A2($elm$time$Time$State, newTaggers, newProcesses));
+			},
+			A2(
+				$elm$core$Task$andThen,
+				function (_v2) {
+					return A3($elm$time$Time$spawnHelp, router, spawnList, existingDict);
+				},
+				killTask));
+	});
+var $elm$time$Time$Posix = function (a) {
+	return {$: 'Posix', a: a};
+};
+var $elm$time$Time$millisToPosix = $elm$time$Time$Posix;
+var $elm$time$Time$now = _Time_now($elm$time$Time$millisToPosix);
+var $elm$time$Time$onSelfMsg = F3(
+	function (router, interval, state) {
+		var _v0 = A2($elm$core$Dict$get, interval, state.taggers);
+		if (_v0.$ === 'Nothing') {
+			return $elm$core$Task$succeed(state);
+		} else {
+			var taggers = _v0.a;
+			var tellTaggers = function (time) {
+				return $elm$core$Task$sequence(
+					A2(
+						$elm$core$List$map,
+						function (tagger) {
+							return A2(
+								$elm$core$Platform$sendToApp,
+								router,
+								tagger(time));
+						},
+						taggers));
+			};
+			return A2(
+				$elm$core$Task$andThen,
+				function (_v1) {
+					return $elm$core$Task$succeed(state);
+				},
+				A2($elm$core$Task$andThen, tellTaggers, $elm$time$Time$now));
+		}
+	});
+var $elm$time$Time$subMap = F2(
+	function (f, _v0) {
+		var interval = _v0.a;
+		var tagger = _v0.b;
+		return A2(
+			$elm$time$Time$Every,
+			interval,
+			A2($elm$core$Basics$composeL, f, tagger));
+	});
+_Platform_effectManagers['Time'] = _Platform_createManager($elm$time$Time$init, $elm$time$Time$onEffects, $elm$time$Time$onSelfMsg, 0, $elm$time$Time$subMap);
+var $elm$time$Time$subscription = _Platform_leaf('Time');
+var $elm$time$Time$every = F2(
+	function (interval, tagger) {
+		return $elm$time$Time$subscription(
+			A2($elm$time$Time$Every, interval, tagger));
+	});
+var $author$project$Page$AppBar$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$batch(
+		_List_fromArray(
+			[
+				$elm$browser$Browser$Events$onResize(
+				F2(
+					function (h, w) {
+						return $author$project$Page$AppBar$Resized(
+							{height: h, width: w});
+					})),
+				A2(
+				$elm$time$Time$every,
+				50,
+				$elm$core$Basics$always(
+					$author$project$Page$AppBar$TimePassed(50)))
+			]));
+};
+var $turboMaCk$queue$Queue$queue = F2(
+	function (fl, rl) {
+		if (!fl.b) {
+			return A2(
+				$turboMaCk$queue$Queue$Queue,
+				$elm$core$List$reverse(rl),
+				_List_Nil);
+		} else {
+			return A2($turboMaCk$queue$Queue$Queue, fl, rl);
+		}
+	});
+var $turboMaCk$queue$Queue$enqueue = F2(
+	function (a, _v0) {
+		var fl = _v0.a;
+		var rl = _v0.b;
+		return A2(
+			$turboMaCk$queue$Queue$queue,
+			fl,
+			A2($elm$core$List$cons, a, rl));
+	});
+var $author$project$Widget$Snackbar$insertFor = F3(
+	function (removeIn, a, model) {
+		var _v0 = model.current;
+		if (_v0.$ === 'Nothing') {
+			return _Utils_update(
+				model,
+				{
+					current: $elm$core$Maybe$Just(
+						_Utils_Tuple2(a, removeIn))
+				});
+		} else {
+			return _Utils_update(
+				model,
+				{
+					queue: A2(
+						$turboMaCk$queue$Queue$enqueue,
+						_Utils_Tuple2(a, removeIn),
+						model.queue)
+				});
+		}
+	});
+var $author$project$Widget$Snackbar$insert = $author$project$Widget$Snackbar$insertFor(10000);
+var $turboMaCk$queue$Queue$dequeue = function (_v0) {
+	var fl = _v0.a;
+	var rl = _v0.b;
+	if (!fl.b) {
+		return _Utils_Tuple2(
+			$elm$core$Maybe$Nothing,
+			A2($turboMaCk$queue$Queue$Queue, _List_Nil, _List_Nil));
+	} else {
+		var head = fl.a;
+		var tail = fl.b;
+		return _Utils_Tuple2(
+			$elm$core$Maybe$Just(head),
+			A2($turboMaCk$queue$Queue$queue, tail, rl));
+	}
+};
+var $author$project$Widget$Snackbar$dismiss = function (model) {
+	return _Utils_update(
+		model,
+		{current: $elm$core$Maybe$Nothing});
+};
+var $author$project$Widget$Snackbar$timePassed = F2(
+	function (ms, model) {
+		var _v0 = model.current;
+		if (_v0.$ === 'Nothing') {
+			var _v1 = $turboMaCk$queue$Queue$dequeue(model.queue);
+			var c = _v1.a;
+			var queue = _v1.b;
+			return _Utils_update(
+				model,
+				{current: c, queue: queue});
+		} else {
+			var _v2 = _v0.a;
+			var removeIn = _v2.b;
+			return (_Utils_cmp(removeIn, ms) < 1) ? $author$project$Widget$Snackbar$dismiss(model) : _Utils_update(
+				model,
+				{
+					current: A2(
+						$elm$core$Maybe$map,
+						$elm$core$Tuple$mapSecond(
+							$elm$core$Basics$add(-ms)),
+						model.current)
+				});
+		}
+	});
+var $author$project$Page$AppBar$update = F2(
+	function (msg, model) {
+		switch (msg.$) {
+			case 'ChangedSidebar':
+				var maybePart = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{active: maybePart}),
+					$elm$core$Platform$Cmd$none);
+			case 'Resized':
+				var window = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{window: window}),
+					$elm$core$Platform$Cmd$none);
+			case 'SetSelected':
+				var _int = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{selected: _int}),
+					$elm$core$Platform$Cmd$none);
+			case 'AddSnackbar':
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{
+							snackbar: A2($author$project$Widget$Snackbar$insert, 'This is a message', model.snackbar)
+						}),
+					$elm$core$Platform$Cmd$none);
+			case 'ShowDialog':
+				var bool = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{showDialog: bool}),
+					$elm$core$Platform$Cmd$none);
+			case 'SetSearchText':
+				var maybeString = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{searchText: maybeString}),
+					$elm$core$Platform$Cmd$none);
+			default:
+				var sec = msg.a;
+				return _Utils_Tuple2(
+					function () {
+						var _v1 = model.active;
+						_v1$2:
+						while (true) {
+							if (_v1.$ === 'Just') {
+								switch (_v1.a.$) {
+									case 'LeftSheet':
+										var _v2 = _v1.a;
+										return model;
+									case 'RightSheet':
+										var _v3 = _v1.a;
+										return model;
+									default:
+										break _v1$2;
+								}
+							} else {
+								break _v1$2;
+							}
+						}
+						return _Utils_update(
+							model,
+							{
+								snackbar: A2($author$project$Widget$Snackbar$timePassed, sec, model.snackbar)
+							});
+					}(),
+					$elm$core$Platform$Cmd$none);
+		}
+	});
+var $author$project$Page$AppBar$AddSnackbar = {$: 'AddSnackbar'};
+var $author$project$Page$AppBar$ChangedSidebar = function (a) {
+	return {$: 'ChangedSidebar', a: a};
+};
+var $author$project$Page$AppBar$LeftSheet = {$: 'LeftSheet'};
+var $author$project$Page$AppBar$Search = {$: 'Search'};
+var $author$project$Page$AppBar$SetSearchText = function (a) {
+	return {$: 'SetSearchText', a: a};
+};
+var $author$project$Page$AppBar$SetSelected = function (a) {
+	return {$: 'SetSelected', a: a};
+};
+var $author$project$Page$AppBar$ShowDialog = function (a) {
+	return {$: 'ShowDialog', a: a};
+};
+var $author$project$Internal$Material$Button$containedButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
+						size: 18
+					},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					otherwise: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
+						size: 18
+					}
+				},
+				text: {
+					contentText: function (b) {
+						return b.content.content.text.contentText;
+					}(
+						$author$project$Internal$Material$Button$baseButton(palette))
+				}
+			},
+			elementRow: _Utils_ap(
+				$author$project$Internal$Material$Button$baseButton(palette).content.elementRow,
+				_List_fromArray(
+					[
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+					]))
+		},
+		elementButton: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$shadow(
+					$author$project$Widget$Material$Color$shadow(2)),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary))),
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Material$Color$shadow(12))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary))),
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Material$Color$shadow(6))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary))),
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Material$Color$shadow(6))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary))),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Widget$Material$Color$accessibleTextColor(palette.primary)))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A2(
+							$author$project$Widget$Material$Color$scaleOpacity,
+							$author$project$Widget$Material$Color$buttonDisabledOpacity,
+							$author$project$Internal$Material$Palette$gray(palette)))),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$Border$shadow(
+					$author$project$Widget$Material$Color$shadow(0)),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		otherwise: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(palette.primary)),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Widget$Material$Color$accessibleTextColor(palette.primary)))
+			])
+	};
+};
+var $author$project$Internal$Material$Button$textButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {color: palette.primary, size: 18},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					otherwise: {color: palette.primary, size: 18}
+				},
+				text: {
+					contentText: function (b) {
+						return b.content.content.text.contentText;
+					}(
+						$author$project$Internal$Material$Button$baseButton(palette))
+				}
+			},
+			elementRow: function (b) {
+				return b.content.elementRow;
+			}(
+				$author$project$Internal$Material$Button$baseButton(palette))
+		},
+		elementButton: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(palette.primary)),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		otherwise: _List_Nil
+	};
+};
+var $author$project$Internal$Material$Dialog$alertDialog = function (palette) {
+	return {
+		content: {
+			buttons: {
+				content: {
+					accept: $author$project$Internal$Material$Button$containedButton(palette),
+					dismiss: $author$project$Internal$Material$Button$textButton(palette)
+				},
+				elementRow: _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
+					])
+			},
+			text: {
+				contentText: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$paddingEach(
+						{bottom: 0, left: 24, right: 24, top: 20})
+					])
+			},
+			title: {
+				contentText: _Utils_ap(
+					$author$project$Widget$Material$Typography$h6,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$paddingEach(
+							{bottom: 0, left: 24, right: 24, top: 20})
+						]))
+			}
+		},
+		elementColumn: _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$Material$Color$fromColor(palette.surface))
+			])
+	};
+};
+var $author$project$Widget$Material$alertDialog = $author$project$Internal$Material$Dialog$alertDialog;
+var $author$project$Widget$button = function () {
+	var fun = $author$project$Internal$Button$button;
+	return fun;
+}();
+var $author$project$Widget$Material$containedButton = $author$project$Internal$Material$Button$containedButton;
+var $author$project$Page$AppBar$container = function (palette) {
+	return _Utils_ap(
+		$author$project$Widget$Material$Color$textAndBackground(palette.background),
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Font$family(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Font$typeface('Roboto'),
+						$mdgriffith$elm_ui$Element$Font$sansSerif
+					])),
+				$mdgriffith$elm_ui$Element$Font$size(16),
+				$mdgriffith$elm_ui$Element$Font$letterSpacing(0.5)
+			]));
+};
+var $author$project$Internal$Button$textButton = F2(
+	function (style, _v0) {
+		var onPress = _v0.onPress;
+		var text = _v0.text;
+		return A2(
+			$author$project$Internal$Button$button,
+			style,
+			{
+				icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+				onPress: onPress,
+				text: text
+			});
+	});
+var $author$project$Internal$Dialog$dialog = F2(
+	function (style, _v0) {
+		var title = _v0.title;
+		var text = _v0.text;
+		var accept = _v0.accept;
+		var dismiss = _v0.dismiss;
+		return {
+			content: A2(
+				$mdgriffith$elm_ui$Element$column,
+				_Utils_ap(
+					_List_fromArray(
+						[$mdgriffith$elm_ui$Element$centerX, $mdgriffith$elm_ui$Element$centerY]),
+					style.elementColumn),
+				_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.content.title.contentText)),
+							title)),
+						A2(
+						$mdgriffith$elm_ui$Element$paragraph,
+						style.content.text.contentText,
+						$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.content.buttons.elementRow),
+						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.content.buttons.content.accept, acceptButton));
+								} else {
+									var acceptButton = _v1.a.a;
+									var dismissButton = _v1.b.a;
+									return _List_fromArray(
+										[
+											A2($author$project$Internal$Button$textButton, style.content.buttons.content.dismiss, dismissButton),
+											A2($author$project$Internal$Button$textButton, style.content.buttons.content.accept, acceptButton)
+										]);
+								}
+							} else {
+								return _List_Nil;
+							}
+						}())
+					])),
+			onDismiss: function () {
+				var _v3 = _Utils_Tuple2(accept, dismiss);
+				if (_v3.a.$ === 'Nothing') {
+					if (_v3.b.$ === 'Nothing') {
+						var _v4 = _v3.a;
+						var _v5 = _v3.b;
+						return $elm$core$Maybe$Nothing;
+					} else {
+						var _v6 = _v3.a;
+						var onPress = _v3.b.a.onPress;
+						return onPress;
+					}
+				} else {
+					return $elm$core$Maybe$Nothing;
+				}
+			}()
+		};
+	});
+var $author$project$Widget$dialog = function () {
+	var fun = $author$project$Internal$Dialog$dialog;
+	return fun;
+}();
+var $author$project$Widget$Customize$mapElementColumn = F2(
+	function (fun, a) {
+		return _Utils_update(
+			a,
+			{
+				elementColumn: fun(a.elementColumn)
+			});
+	});
+var $author$project$Widget$Customize$elementColumn = F2(
+	function (list, a) {
+		return A2(
+			$author$project$Widget$Customize$mapElementColumn,
+			function (b) {
+				return _Utils_ap(b, list);
+			},
+			a);
+	});
+var $author$project$Widget$Layout$leftSheet = F2(
+	function (style, _v0) {
+		var title = _v0.title;
+		var onDismiss = _v0.onDismiss;
+		var menu = _v0.menu;
+		return {
+			content: A2(
+				$author$project$Internal$List$itemList,
+				A2(
+					$author$project$Widget$Customize$elementColumn,
+					_List_fromArray(
+						[$mdgriffith$elm_ui$Element$alignLeft]),
+					style.sheet),
+				A2(
+					$elm$core$List$cons,
+					$author$project$Internal$Item$asItem(title),
+					A2($author$project$Internal$Item$selectItem, style.button, menu))),
+			onDismiss: $elm$core$Maybe$Just(onDismiss)
+		};
+	});
 var $author$project$Widget$Layout$orderModals = function (modals) {
 	return A2(
 		$elm$core$List$filterMap,
@@ -18470,27 +20368,6 @@ var $author$project$Widget$Layout$orderModals = function (modals) {
 		_List_fromArray(
 			[modals.dialog, modals.leftSheet, modals.rightSheet, modals.topSheet]));
 };
-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 $elm$core$List$takeReverse = F3(
 	function (n, list, kept) {
 		takeReverse:
@@ -18623,100 +20500,6 @@ var $author$project$Widget$Layout$partitionActions = function (actions) {
 		primaryActions: ($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)))
 	};
 };
-var $feathericons$elm_feather$FeatherIcons$penTool = A2(
-	$feathericons$elm_feather$FeatherIcons$makeBuilder,
-	'pen-tool',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M12 19l7-7 3 3-7 7-3-3z')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M2 2l7.586 7.586')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$circle,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$cx('11'),
-					$elm$svg$Svg$Attributes$cy('11'),
-					$elm$svg$Svg$Attributes$r('2')
-				]),
-			_List_Nil)
-		]));
-var $mdgriffith$elm_ui$Internal$Model$Paragraph = {$: 'Paragraph'};
-var $mdgriffith$elm_ui$Element$paragraph = F2(
-	function (attrs, children) {
-		return A4(
-			$mdgriffith$elm_ui$Internal$Model$element,
-			$mdgriffith$elm_ui$Internal$Model$asParagraph,
-			$mdgriffith$elm_ui$Internal$Model$div,
-			A2(
-				$elm$core$List$cons,
-				$mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$Paragraph),
-				A2(
-					$elm$core$List$cons,
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					A2(
-						$elm$core$List$cons,
-						$mdgriffith$elm_ui$Element$spacing(5),
-						attrs))),
-			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
-	});
-var $author$project$Internal$Item$insetItem = F2(
-	function (s, _v0) {
-		var onPress = _v0.onPress;
-		var text = _v0.text;
-		var icon = _v0.icon;
-		var content = _v0.content;
-		return A2(
-			$author$project$Internal$Item$toItem,
-			s,
-			function (style) {
-				return A2(
-					$mdgriffith$elm_ui$Element$Input$button,
-					_Utils_ap(
-						style.elementButton,
-						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
-					{
-						label: A2(
-							$mdgriffith$elm_ui$Element$row,
-							style.content.elementRow,
-							_List_fromArray(
-								[
-									A2(
-									$mdgriffith$elm_ui$Element$el,
-									style.content.content.icon.element,
-									icon(style.content.content.icon.content)),
-									A2(
-									$mdgriffith$elm_ui$Element$el,
-									style.content.content.text.elementText,
-									A2(
-										$mdgriffith$elm_ui$Element$paragraph,
-										_List_Nil,
-										$elm$core$List$singleton(
-											$mdgriffith$elm_ui$Element$text(text)))),
-									content(style.content.content.content)
-								])),
-						onPress: onPress
-					});
-			});
-	});
 var $author$project$Widget$Layout$rightSheet = F2(
 	function (style, _v0) {
 		var onDismiss = _v0.onDismiss;
@@ -18749,6 +20532,36 @@ var $author$project$Widget$Layout$rightSheet = F2(
 			onDismiss: $elm$core$Maybe$Just(onDismiss)
 		};
 	});
+var $author$project$Page$AppBar$searchFill = function (palette) {
+	return {
+		content: {
+			chips: {
+				content: $author$project$Widget$Material$chip(palette),
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spacing(8)
+					])
+			},
+			text: {
+				elementTextInput: _Utils_ap(
+					$author$project$Widget$Material$Color$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)
+						]))
+			}
+		},
+		elementRow: _Utils_ap(
+			$author$project$Widget$Material$Color$textAndBackground(palette.surface),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(56))
+				]))
+	};
+};
 var $author$project$Widget$Customize$elementRow = F2(
 	function (list, a) {
 		return A2(
@@ -18833,38 +20646,1516 @@ var $author$project$Internal$Modal$singleModal = A2(
 			}),
 		$elm$core$Maybe$withDefault(_List_Nil)));
 var $author$project$Widget$singleModal = $author$project$Internal$Modal$singleModal;
-var $author$project$Internal$AppBar$tabBar = F2(
-	function (style, m) {
-		return A3(
-			$author$project$Internal$AppBar$internalNav,
-			_List_fromArray(
-				[
-					A2($mdgriffith$elm_ui$Element$el, style.content.menu.content.title, m.title),
-					A2(
-					$mdgriffith$elm_ui$Element$row,
+var $author$project$Widget$Material$Color$accessibleWithTextColor = F2(
+	function (c, color) {
+		var newConstrast = 7;
+		var l2 = 1 + ($avh4$elm_color$Color$toRgba(color).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(color) - 1));
+		var lighterLuminance = (newConstrast * (l2 + 0.05)) - 0.05;
+		var l1 = 1 + ($avh4$elm_color$Color$toRgba(c).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(c) - 1));
+		var darkerLuminance = (l2 + 0.05) - (0.05 / newConstrast);
+		return ((_Utils_cmp(l1, l2) > 0) ? ((((l1 + 0.05) / (l2 + 0.05)) < 7) ? A2(
+			$elm$core$Basics$composeR,
+			$noahzgordon$elm_color_extra$Color$Convert$colorToLab,
+			A2(
+				$elm$core$Basics$composeR,
+				function (col) {
+					return _Utils_update(
+						col,
+						{l: 100 * lighterLuminance});
+				},
+				$noahzgordon$elm_color_extra$Color$Convert$labToColor)) : $elm$core$Basics$identity) : ((((l2 + 0.05) / (l1 + 0.05)) < 7) ? A2(
+			$elm$core$Basics$composeR,
+			$noahzgordon$elm_color_extra$Color$Convert$colorToLab,
+			A2(
+				$elm$core$Basics$composeR,
+				function (col) {
+					return _Utils_update(
+						col,
+						{l: 100 * darkerLuminance});
+				},
+				$noahzgordon$elm_color_extra$Color$Convert$labToColor)) : $elm$core$Basics$identity))(c);
+	});
+var $author$project$Widget$Material$Color$dark = A3($avh4$elm_color$Color$rgb255, 50, 50, 50);
+var $author$project$Internal$Material$Snackbar$snackbar = function (palette) {
+	return {
+		content: {
+			button: A2(
+				$author$project$Widget$Customize$elementButton,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Font$color(
+						$author$project$Widget$Material$Color$fromColor(
+							A2($author$project$Widget$Material$Color$accessibleWithTextColor, palette.primary, $author$project$Widget$Material$Color$dark)))
+					]),
+				$author$project$Internal$Material$Button$textButton(palette)),
+			text: {
+				elementText: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$centerX,
+						A2($mdgriffith$elm_ui$Element$paddingXY, 10, 8)
+					])
+			}
+		},
+		elementRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$dark)),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Widget$Material$Color$accessibleTextColor($author$project$Widget$Material$Color$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$Material$Color$shadow(2))
+			])
+	};
+};
+var $author$project$Widget$Material$snackbar = $author$project$Internal$Material$Snackbar$snackbar;
+var $author$project$Widget$Snackbar$current = function (model) {
+	return A2($elm$core$Maybe$map, $elm$core$Tuple$first, model.current);
+};
+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.elementRow,
+						_List_fromArray(
+							[
+								A2(
+								$mdgriffith$elm_ui$Element$paragraph,
+								style.content.text.elementText,
+								$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$Internal$Button$textButton(style.content.button),
+									button))
+							]));
+				}),
+			$author$project$Widget$Snackbar$current(model));
+	});
+var $author$project$Page$AppBar$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var snackbar = _v1.snackbar;
+		var searchText = _v1.searchText;
+		var selected = _v1.selected;
+		var showDialog = _v1.showDialog;
+		var active = _v1.active;
+		var titleEl = A2(
+			$mdgriffith$elm_ui$Element$el,
+			_Utils_ap(
+				$author$project$Widget$Material$Typography$h6,
+				_List_fromArray(
+					[
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+					])),
+			$mdgriffith$elm_ui$Element$text('Title'));
+		var snackbarElem = 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$width($mdgriffith$elm_ui$Element$shrink)
-						]),
-					A2(
-						$elm$core$List$map,
-						$author$project$Internal$Select$selectButton(style.content.menu.content.menuTabButton),
-						$author$project$Internal$Select$select(m.menu)))
-				]),
-			{
-				content: {
-					actions: style.content.actions,
-					menu: {elementRow: style.content.menu.elementRow},
-					search: style.content.search
+							$mdgriffith$elm_ui$Element$padding(8),
+							$mdgriffith$elm_ui$Element$alignBottom,
+							$mdgriffith$elm_ui$Element$alignRight
+						])),
+				A3(
+					$author$project$Widget$Snackbar$view,
+					$author$project$Widget$Material$snackbar(palette),
+					function (text) {
+						return {button: $elm$core$Maybe$Nothing, text: text};
+					},
+					snackbar)));
+		var search = {chips: _List_Nil, label: 'Search', onChange: $author$project$Page$AppBar$SetSearchText, placeholder: $elm$core$Maybe$Nothing, text: searchText};
+		var onDismiss = $author$project$Page$AppBar$ChangedSidebar($elm$core$Maybe$Nothing);
+		var menu = {
+			onSelect: A2($elm$core$Basics$composeR, $author$project$Page$AppBar$SetSelected, $elm$core$Maybe$Just),
+			options: A2(
+				$elm$core$List$map,
+				function (string) {
+					return {
+						icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+						text: string
+					};
 				},
-				elementRow: style.elementRow
-			},
-			m);
+				_List_fromArray(
+					['Home', 'About'])),
+			selected: $elm$core$Maybe$Just(selected)
+		};
+		var dialog = showDialog ? $elm$core$Maybe$Just(
+			A2(
+				$author$project$Widget$dialog,
+				$author$project$Widget$Material$alertDialog(palette),
+				{
+					accept: $elm$core$Maybe$Nothing,
+					dismiss: $elm$core$Maybe$Just(
+						{
+							onPress: $elm$core$Maybe$Just(
+								$author$project$Page$AppBar$ShowDialog(false)),
+							text: 'Accept'
+						}),
+					text: 'This is a dialog window',
+					title: $elm$core$Maybe$Just('Dialog')
+				})) : $elm$core$Maybe$Nothing;
+		var deviceClass = $mdgriffith$elm_ui$Element$Phone;
+		var actions = A2(
+			$elm$core$List$repeat,
+			5,
+			{
+				icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$change_history),
+				onPress: $elm$core$Maybe$Nothing,
+				text: 'Action'
+			});
+		var _v2 = $author$project$Widget$Layout$partitionActions(actions);
+		var primaryActions = _v2.primaryActions;
+		var moreActions = _v2.moreActions;
+		var modals = $author$project$Widget$Layout$orderModals(
+			{
+				bottomSheet: $elm$core$Maybe$Nothing,
+				dialog: dialog,
+				leftSheet: _Utils_eq(
+					active,
+					$elm$core$Maybe$Just($author$project$Page$AppBar$LeftSheet)) ? $elm$core$Maybe$Just(
+					A2(
+						$author$project$Widget$Layout$leftSheet,
+						{
+							button: $author$project$Widget$Material$selectItem(palette),
+							sheet: $author$project$Widget$Material$sideSheet(palette)
+						},
+						{menu: menu, onDismiss: onDismiss, title: titleEl})) : $elm$core$Maybe$Nothing,
+				rightSheet: _Utils_eq(
+					active,
+					$elm$core$Maybe$Just($author$project$Page$AppBar$RightSheet)) ? $elm$core$Maybe$Just(
+					A2(
+						$author$project$Widget$Layout$rightSheet,
+						{
+							insetItem: $author$project$Widget$Material$insetItem(palette),
+							sheet: $author$project$Widget$Material$sideSheet(palette)
+						},
+						{moreActions: moreActions, onDismiss: onDismiss})) : $elm$core$Maybe$Nothing,
+				topSheet: _Utils_eq(
+					active,
+					$elm$core$Maybe$Just($author$project$Page$AppBar$Search)) ? $elm$core$Maybe$Just(
+					A2(
+						$author$project$Widget$Layout$searchSheet,
+						$author$project$Page$AppBar$searchFill(palette),
+						{onDismiss: onDismiss, search: search})) : $elm$core$Maybe$Nothing
+			});
+		var nav = (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) || (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Tablet) || ($elm$core$List$length(menu.options) > 5))) ? A2(
+			$author$project$Widget$menuBar,
+			$author$project$Widget$Material$menuBar(palette),
+			{
+				deviceClass: deviceClass,
+				openLeftSheet: $elm$core$Maybe$Just(
+					$author$project$Page$AppBar$ChangedSidebar(
+						$elm$core$Maybe$Just($author$project$Page$AppBar$LeftSheet))),
+				openRightSheet: $elm$core$Maybe$Just(
+					$author$project$Page$AppBar$ChangedSidebar(
+						$elm$core$Maybe$Just($author$project$Page$AppBar$RightSheet))),
+				openTopSheet: $elm$core$Maybe$Just(
+					$author$project$Page$AppBar$ChangedSidebar(
+						$elm$core$Maybe$Just($author$project$Page$AppBar$Search))),
+				primaryActions: primaryActions,
+				search: $elm$core$Maybe$Just(search),
+				title: titleEl
+			}) : A2(
+			$author$project$Widget$tabBar,
+			$author$project$Widget$Material$tabBar(palette),
+			{
+				deviceClass: deviceClass,
+				menu: menu,
+				openRightSheet: $elm$core$Maybe$Just(
+					$author$project$Page$AppBar$ChangedSidebar(
+						$elm$core$Maybe$Just($author$project$Page$AppBar$RightSheet))),
+				openTopSheet: $elm$core$Maybe$Nothing,
+				primaryActions: primaryActions,
+				search: $elm$core$Maybe$Just(search),
+				title: titleEl
+			});
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			$elm$core$List$concat(
+				_List_fromArray(
+					[
+						$author$project$Page$AppBar$container(palette),
+						_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$inFront(snackbarElem)
+						]),
+						$author$project$Widget$singleModal(modals),
+						_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))
+						])
+					])),
+			A2(
+				$mdgriffith$elm_ui$Element$column,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+						$mdgriffith$elm_ui$Element$spacing(8)
+					]),
+				_List_fromArray(
+					[
+						nav,
+						A2(
+						$author$project$Widget$button,
+						$author$project$Widget$Material$containedButton(palette),
+						{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							onPress: $elm$core$Maybe$Just($author$project$Page$AppBar$AddSnackbar),
+							text: 'Add Notification'
+						})
+					])));
 	});
-var $author$project$Widget$tabBar = $author$project$Internal$AppBar$tabBar;
+var $author$project$Page$AppBar$demo = {
+	init: $elm$core$Basics$always($author$project$Page$AppBar$init),
+	subscriptions: $author$project$Page$AppBar$subscriptions,
+	update: $author$project$Page$AppBar$update,
+	view: $author$project$Page$demo($author$project$Page$AppBar$view)
+};
+var $author$project$Page$AppBar$description = 'The top app bar displays information and actions relating to the current screen.';
+var $author$project$Page$AppBar$title = 'App Bar';
+var $author$project$Page$AppBar$page = $author$project$Page$create(
+	{book: $author$project$Page$AppBar$book, demo: $author$project$Page$AppBar$demo, description: $author$project$Page$AppBar$description, title: $author$project$Page$AppBar$title});
+var $icidasset$elm_material_icons$Material$Icons$done = A2(
+	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
+	_List_fromArray(
+		[
+			$icidasset$elm_material_icons$Material$Icons$Internal$v('0 0 24 24')
+		]),
+	_List_fromArray(
+		[
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M0 0h24v24H0z'),
+					$icidasset$elm_material_icons$Material$Icons$Internal$f('none')
+				]),
+			_List_Nil),
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Widget$Material$iconButton = $author$project$Internal$Material$Button$iconButton;
+var $author$project$Internal$Material$Button$outlinedButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {color: palette.primary, size: 18},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					otherwise: {color: palette.primary, size: 18}
+				},
+				text: {
+					contentText: $author$project$Internal$Material$Button$baseButton(palette).content.content.text.contentText
+				}
+			},
+			elementRow: _Utils_ap(
+				$author$project$Internal$Material$Button$baseButton(palette).content.elementRow,
+				_List_fromArray(
+					[
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+					]))
+		},
+		elementButton: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$width(1),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(palette.primary)),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A3(
+							$author$project$Widget$Material$Color$withShade,
+							palette.primary,
+							$author$project$Widget$Material$Color$buttonHoverOpacity,
+							A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface)))),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		otherwise: _List_Nil
+	};
+};
+var $author$project$Widget$Material$outlinedButton = $author$project$Internal$Material$Button$outlinedButton;
+var $author$project$Widget$Material$textButton = $author$project$Internal$Material$Button$textButton;
+var $author$project$Widget$iconButton = function () {
+	var fun = $author$project$Internal$Button$iconButton;
+	return fun;
+}();
+var $author$project$Widget$textButton = F2(
+	function (style, _v0) {
+		var text = _v0.text;
+		var onPress = _v0.onPress;
+		var fun = $author$project$Internal$Button$textButton;
+		return A2(
+			fun,
+			style,
+			{onPress: onPress, text: text});
+	});
+var $author$project$Page$Button$viewFunctions = function () {
+	var viewTextButton = F6(
+		function (style, text, _v4, onPress, _v5, _v6) {
+			var palette = _v5.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.textButton',
+				A2(
+					$author$project$Widget$textButton,
+					A2(
+						$author$project$Widget$Customize$elementButton,
+						_List_fromArray(
+							[$mdgriffith$elm_ui$Element$alignLeft, $mdgriffith$elm_ui$Element$centerY]),
+						style(palette)),
+					{onPress: onPress, text: text}));
+		});
+	var viewIconButton = F6(
+		function (style, text, icon, onPress, _v2, _v3) {
+			var palette = _v2.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.itemButton',
+				A2(
+					$author$project$Widget$iconButton,
+					A2(
+						$author$project$Widget$Customize$elementButton,
+						_List_fromArray(
+							[$mdgriffith$elm_ui$Element$alignLeft, $mdgriffith$elm_ui$Element$centerY]),
+						style(palette)),
+					{icon: icon, onPress: onPress, text: text}));
+		});
+	var viewButton = F6(
+		function (style, text, icon, onPress, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.button',
+				A2(
+					$author$project$Widget$button,
+					style(palette),
+					{icon: icon, onPress: onPress, text: text}));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewButton, viewTextButton, viewIconButton]));
+}();
+var $author$project$Page$Button$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With event handler',
+			_Utils_Tuple2(
+				$elm$core$Maybe$Just(_Utils_Tuple0),
+				$elm$core$Maybe$Nothing),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'With Icon',
+				_Utils_Tuple2(
+					A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+					$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A2($author$project$UIExplorer$Story$textStory, 'Label', 'OK'),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('Contained', $author$project$Widget$Material$containedButton),
+						_List_fromArray(
+							[
+								_Utils_Tuple2('Outlined', $author$project$Widget$Material$outlinedButton),
+								_Utils_Tuple2('Text', $author$project$Widget$Material$textButton),
+								_Utils_Tuple2('Chip', $author$project$Widget$Material$chip),
+								_Utils_Tuple2('IconButton', $author$project$Widget$Material$iconButton)
+							])),
+					A2(
+						$author$project$UIExplorer$Story$book,
+						$elm$core$Maybe$Just('Options'),
+						$author$project$Page$Button$viewFunctions))))));
+var $author$project$Page$Button$init = _Utils_Tuple2(0, $elm$core$Platform$Cmd$none);
+var $author$project$Page$Button$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Button$update = F2(
+	function (msg, model) {
+		switch (msg.$) {
+			case 'Noop':
+				return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
+			case 'Increase':
+				var _int = msg.a;
+				return _Utils_Tuple2(model + _int, $elm$core$Platform$Cmd$none);
+			case 'Decrease':
+				var _int = msg.a;
+				return _Utils_Tuple2(
+					((model - _int) >= 0) ? (model - _int) : model,
+					$elm$core$Platform$Cmd$none);
+			default:
+				return _Utils_Tuple2(0, $elm$core$Platform$Cmd$none);
+		}
+	});
+var $author$project$Page$Button$Decrease = function (a) {
+	return {$: 'Decrease', a: a};
+};
+var $author$project$Page$Button$Increase = function (a) {
+	return {$: 'Increase', a: a};
+};
+var $author$project$Page$Button$Reset = {$: 'Reset'};
+var $icidasset$elm_material_icons$Material$Icons$add = A2(
+	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
+	_List_fromArray(
+		[
+			$icidasset$elm_material_icons$Material$Icons$Internal$v('0 0 24 24')
+		]),
+	_List_fromArray(
+		[
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M0 0h24v24H0z'),
+					$icidasset$elm_material_icons$Material$Icons$Internal$f('none')
+				]),
+			_List_Nil),
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Internal$List$column = function (style) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$elm$core$List$map(
+			function (a) {
+				return A2(
+					$author$project$Internal$Item$toItem,
+					{content: _Utils_Tuple0, element: style.content.element},
+					$elm$core$Basics$always(a));
+			}),
+		$author$project$Internal$List$itemList(style));
+};
+var $author$project$Widget$column = function () {
+	var fun = $author$project$Internal$List$column;
+	return fun;
+}();
+var $author$project$Internal$Material$List$column = {
+	content: {element: _List_Nil, ifFirst: _List_Nil, ifLast: _List_Nil, ifSingleton: _List_Nil, otherwise: _List_Nil},
+	elementColumn: _List_fromArray(
+		[
+			A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8),
+			$mdgriffith$elm_ui$Element$spacing(8)
+		])
+};
+var $author$project$Widget$Material$column = $author$project$Internal$Material$List$column;
+var $author$project$Widget$Customize$mapElement = F2(
+	function (fun, a) {
+		return _Utils_update(
+			a,
+			{
+				element: fun(a.element)
+			});
+	});
+var $author$project$Widget$Customize$element = F2(
+	function (list, a) {
+		return A2(
+			$author$project$Widget$Customize$mapElement,
+			function (b) {
+				return _Utils_ap(b, list);
+			},
+			a);
+	});
+var $icidasset$elm_material_icons$Material$Icons$exposure_plus_2 = A2(
+	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
+	_List_fromArray(
+		[
+			$icidasset$elm_material_icons$Material$Icons$Internal$v('0 0 24 24')
+		]),
+	_List_fromArray(
+		[
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M0 0h24v24H0zm0 0h24v24H0z'),
+					$icidasset$elm_material_icons$Material$Icons$Internal$f('none')
+				]),
+			_List_Nil),
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M16.05 16.29l2.86-3.07c.38-.39.72-.79 1.04-1.18.32-.39.59-.78.82-1.17.23-.39.41-.78.54-1.17.13-.39.19-.79.19-1.18 0-.53-.09-1.02-.27-1.46-.18-.44-.44-.81-.78-1.11-.34-.31-.77-.54-1.26-.71-.51-.16-1.08-.24-1.72-.24-.69 0-1.31.11-1.85.32-.54.21-1 .51-1.36.88-.37.37-.65.8-.84 1.3-.18.47-.27.97-.28 1.5h2.14c.01-.31.05-.6.13-.87.09-.29.23-.54.4-.75.18-.21.41-.37.68-.49.27-.12.6-.18.96-.18.31 0 .58.05.81.15.23.1.43.25.59.43.16.18.28.4.37.65.08.25.13.52.13.81 0 .22-.03.43-.08.65-.06.22-.15.45-.29.7-.14.25-.32.53-.56.83-.23.3-.52.65-.88 1.03l-4.17 4.55V18H22v-1.71h-5.95zM8 7H6v4H2v2h4v4h2v-4h4v-2H8V7z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Widget$Material$Typography$h4 = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Font$size(34),
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.25)
+	]);
+var $icidasset$elm_material_icons$Material$Icons$remove = A2(
+	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
+	_List_fromArray(
+		[
+			$icidasset$elm_material_icons$Material$Icons$Internal$v('0 0 24 24')
+		]),
+	_List_fromArray(
+		[
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M0 0h24v24H0z'),
+					$icidasset$elm_material_icons$Material$Icons$Internal$f('none')
+				]),
+			_List_Nil),
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M19 13H5v-2h14v2z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Internal$List$row = function (style) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$elm$core$List$map(
+			function (a) {
+				return A2(
+					$author$project$Internal$Item$toItem,
+					{content: _Utils_Tuple0, element: style.content.element},
+					$elm$core$Basics$always(a));
+			}),
+		A2(
+			$elm$core$Basics$composeR,
+			$author$project$Internal$List$internal(style.content),
+			$mdgriffith$elm_ui$Element$row(style.elementRow)));
+};
+var $author$project$Widget$row = function () {
+	var fun = $author$project$Internal$List$row;
+	return fun;
+}();
+var $author$project$Page$Button$view = F2(
+	function (_v0, model) {
+		var palette = _v0.palette;
+		var style = {
+			cardColumn: $author$project$Widget$Material$cardColumn(palette),
+			column: $author$project$Widget$Material$column,
+			containedButton: $author$project$Widget$Material$containedButton(palette),
+			iconButton: $author$project$Widget$Material$iconButton(palette),
+			outlinedButton: $author$project$Widget$Material$outlinedButton(palette),
+			row: $author$project$Widget$Material$row,
+			textButton: $author$project$Widget$Material$textButton(palette)
+		};
+		return A2(
+			$author$project$Widget$column,
+			A2(
+				$author$project$Widget$Customize$mapContent,
+				$author$project$Widget$Customize$element(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+						])),
+				A2(
+					$author$project$Widget$Customize$elementColumn,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+						]),
+					style.column)),
+			_List_fromArray(
+				[
+					A2(
+					$author$project$Widget$column,
+					A2(
+						$author$project$Widget$Customize$mapContent,
+						$author$project$Widget$Customize$element(
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width(
+									$mdgriffith$elm_ui$Element$px(128)),
+									$mdgriffith$elm_ui$Element$height(
+									$mdgriffith$elm_ui$Element$px(128)),
+									$mdgriffith$elm_ui$Element$Background$color(
+									$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$defaultPalette.secondary))
+								])),
+						A2(
+							$author$project$Widget$Customize$elementColumn,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$centerX,
+									$mdgriffith$elm_ui$Element$width(
+									$mdgriffith$elm_ui$Element$px(128)),
+									$mdgriffith$elm_ui$Element$height(
+									$mdgriffith$elm_ui$Element$px(128)),
+									$mdgriffith$elm_ui$Element$inFront(
+									A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[$mdgriffith$elm_ui$Element$alignRight]),
+										A2(
+											$author$project$Widget$iconButton,
+											style.iconButton,
+											{
+												icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$exposure_plus_2),
+												onPress: $elm$core$Maybe$Just(
+													$author$project$Page$Button$Increase(2)),
+												text: '+2'
+											})))
+								]),
+							style.cardColumn)),
+					$elm$core$List$singleton(
+						A2(
+							$mdgriffith$elm_ui$Element$el,
+							_Utils_ap(
+								$author$project$Widget$Material$Typography$h4,
+								_List_fromArray(
+									[$mdgriffith$elm_ui$Element$centerX, $mdgriffith$elm_ui$Element$centerY])),
+							$mdgriffith$elm_ui$Element$text(
+								$elm$core$String$fromInt(model))))),
+					A2(
+					$author$project$Widget$row,
+					A2(
+						$author$project$Widget$Customize$mapContent,
+						$author$project$Widget$Customize$element(
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+								])),
+						A2(
+							$author$project$Widget$Customize$elementRow,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+								]),
+							style.row)),
+					_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$row,
+							A2(
+								$author$project$Widget$Customize$elementRow,
+								_List_fromArray(
+									[$mdgriffith$elm_ui$Element$alignRight]),
+								style.row),
+							_List_fromArray(
+								[
+									A2(
+									$author$project$Widget$textButton,
+									style.textButton,
+									{
+										onPress: $elm$core$Maybe$Just($author$project$Page$Button$Reset),
+										text: 'Reset'
+									}),
+									A2(
+									$author$project$Widget$button,
+									style.outlinedButton,
+									{
+										icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$remove),
+										onPress: (model > 0) ? $elm$core$Maybe$Just(
+											$author$project$Page$Button$Decrease(1)) : $elm$core$Maybe$Nothing,
+										text: 'Decrease'
+									})
+								])),
+							A2(
+							$author$project$Widget$row,
+							A2(
+								$author$project$Widget$Customize$elementRow,
+								_List_fromArray(
+									[$mdgriffith$elm_ui$Element$alignLeft]),
+								style.row),
+							_List_fromArray(
+								[
+									A2(
+									$author$project$Widget$button,
+									style.containedButton,
+									{
+										icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$add),
+										onPress: $elm$core$Maybe$Just(
+											$author$project$Page$Button$Increase(1)),
+										text: 'Increase'
+									})
+								]))
+						]))
+				]));
+	});
+var $author$project$Page$Button$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Button$init),
+	subscriptions: $author$project$Page$Button$subscriptions,
+	update: $author$project$Page$Button$update,
+	view: $author$project$Page$demo($author$project$Page$Button$view)
+};
+var $author$project$Page$Button$description = 'Buttons allow users to take actions, and make choices, with a single tap.';
+var $author$project$Page$Button$title = 'Button';
+var $author$project$Page$Button$page = $author$project$Page$create(
+	{book: $author$project$Page$Button$book, demo: $author$project$Page$Button$demo, description: $author$project$Page$Button$description, title: $author$project$Page$Button$title});
+var $author$project$Page$Dialog$viewFunctions = function () {
+	var viewDialog = F7(
+		function (style, text, titleString, accept, dismiss, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.dialog',
+				A2(
+					$mdgriffith$elm_ui$Element$el,
+					_Utils_ap(
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(200)),
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+							]),
+						$author$project$Widget$singleModal(
+							$elm$core$List$singleton(
+								A2(
+									$author$project$Widget$dialog,
+									style(palette),
+									{accept: accept, dismiss: dismiss, text: text, title: titleString})))),
+					$mdgriffith$elm_ui$Element$text('Placeholder Text')));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewDialog]));
+}();
+var $author$project$Page$Dialog$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'Dismissible',
+			_Utils_Tuple2(
+				$elm$core$Maybe$Just(
+					{
+						onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+						text: 'Dismiss'
+					}),
+				$elm$core$Maybe$Nothing),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'With accept button',
+				_Utils_Tuple2(
+					$elm$core$Maybe$Just(
+						{
+							onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+							text: 'Ok'
+						}),
+					$elm$core$Maybe$Nothing),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'With title',
+					_Utils_Tuple2(
+						$elm$core$Maybe$Just('Title'),
+						$elm$core$Maybe$Nothing),
+					true),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A2($author$project$UIExplorer$Story$textStory, 'Text', 'If an accept button is given then the window can only be closed manually. Else it can be closed by pressing somewhere outside of it.'),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$optionListStory,
+							'Style',
+							_Utils_Tuple2('Alert Dialog', $author$project$Widget$Material$alertDialog),
+							_List_Nil),
+						A2(
+							$author$project$UIExplorer$Story$book,
+							$elm$core$Maybe$Just('Options'),
+							$author$project$Page$Dialog$viewFunctions)))))));
+var $author$project$Page$Dialog$IsOpen = function (a) {
+	return {$: 'IsOpen', a: a};
+};
+var $author$project$Page$Dialog$init = _Utils_Tuple2(
+	$author$project$Page$Dialog$IsOpen(true),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$Dialog$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Dialog$update = F2(
+	function (msg, _v0) {
+		var bool = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Page$Dialog$IsOpen(bool),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Page$Dialog$OpenDialog = function (a) {
+	return {$: 'OpenDialog', a: a};
+};
+var $icidasset$elm_material_icons$Material$Icons$visibility = A2(
+	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
+	_List_fromArray(
+		[
+			$icidasset$elm_material_icons$Material$Icons$Internal$v('0 0 24 24')
+		]),
+	_List_fromArray(
+		[
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M0 0h24v24H0z'),
+					$icidasset$elm_material_icons$Material$Icons$Internal$f('none')
+				]),
+			_List_Nil),
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Page$Dialog$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var isOpen = _v1.a;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_Utils_ap(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$height(
+						A2($mdgriffith$elm_ui$Element$minimum, 200, $mdgriffith$elm_ui$Element$fill)),
+						$mdgriffith$elm_ui$Element$width(
+						A2($mdgriffith$elm_ui$Element$minimum, 400, $mdgriffith$elm_ui$Element$fill))
+					]),
+				isOpen ? $author$project$Widget$singleModal(
+					$elm$core$List$singleton(
+						A2(
+							$author$project$Widget$dialog,
+							$author$project$Widget$Material$alertDialog(palette),
+							{
+								accept: $elm$core$Maybe$Just(
+									{
+										onPress: $elm$core$Maybe$Just(
+											$author$project$Page$Dialog$OpenDialog(false)),
+										text: 'Ok'
+									}),
+								dismiss: $elm$core$Maybe$Just(
+									{
+										onPress: $elm$core$Maybe$Just(
+											$author$project$Page$Dialog$OpenDialog(false)),
+										text: 'Dismiss'
+									}),
+								text: 'This is a dialog window',
+								title: $elm$core$Maybe$Just('Dialog')
+							}))) : _List_Nil),
+			A2(
+				$author$project$Widget$button,
+				$author$project$Widget$Material$containedButton(palette),
+				{
+					icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$visibility),
+					onPress: $elm$core$Maybe$Just(
+						$author$project$Page$Dialog$OpenDialog(true)),
+					text: 'Show Dialog'
+				}));
+	});
+var $author$project$Page$Dialog$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Dialog$init),
+	subscriptions: $author$project$Page$Dialog$subscriptions,
+	update: $author$project$Page$Dialog$update,
+	view: $author$project$Page$demo($author$project$Page$Dialog$view)
+};
+var $author$project$Page$Dialog$description = 'Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.';
+var $author$project$Page$Dialog$title = 'Dialog';
+var $author$project$Page$Dialog$page = $author$project$Page$create(
+	{book: $author$project$Page$Dialog$book, demo: $author$project$Page$Dialog$demo, description: $author$project$Page$Dialog$description, title: $author$project$Page$Dialog$title});
+var $author$project$Page$Icon$init = _Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none);
+var $author$project$Page$Icon$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Icon$update = F2(
+	function (msg, _v0) {
+		return _Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none);
+	});
+var $author$project$Widget$Icon$antDesignIconsElm = function (fun) {
+	return function (_v0) {
+		var size = _v0.size;
+		var color = _v0.color;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_Nil,
+			$mdgriffith$elm_ui$Element$html(
+				fun(
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$width(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$height(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$fill(
+							$avh4$elm_color$Color$toCssString(color))
+						]))));
+	};
+};
+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 $elm$svg$Svg$Attributes$points = _VirtualDom_attribute('points');
+var $elm$svg$Svg$polyline = $elm$svg$Svg$trustedNode('polyline');
+var $feathericons$elm_feather$FeatherIcons$check = A2(
+	$feathericons$elm_feather$FeatherIcons$makeBuilder,
+	'check',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$polyline,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$points('20 6 9 17 4 12')
+				]),
+			_List_Nil)
+		]));
+var $lattyware$elm_fontawesome$FontAwesome$Icon$Icon = F5(
+	function (prefix, name, width, height, paths) {
+		return {height: height, name: name, paths: paths, prefix: prefix, width: width};
+	});
+var $lattyware$elm_fontawesome$FontAwesome$Solid$check = A5(
+	$lattyware$elm_fontawesome$FontAwesome$Icon$Icon,
+	'fas',
+	'check',
+	512,
+	512,
+	_List_fromArray(
+		['M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z']));
+var $elm$svg$Svg$Attributes$clipRule = _VirtualDom_attribute('clip-rule');
+var $elm$svg$Svg$Attributes$fillRule = _VirtualDom_attribute('fill-rule');
+var $jasonliang_dev$elm_heroicons$Heroicons$Solid$check = function (attrs) {
+	return A2(
+		$elm$svg$Svg$svg,
+		A2(
+			$elm$core$List$cons,
+			$elm$svg$Svg$Attributes$viewBox('0 0 20 20'),
+			A2(
+				$elm$core$List$cons,
+				$elm$svg$Svg$Attributes$fill('currentColor'),
+				attrs)),
+		_List_fromArray(
+			[
+				A2(
+				$elm$svg$Svg$path,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$fillRule('evenodd'),
+						$elm$svg$Svg$Attributes$d('M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'),
+						$elm$svg$Svg$Attributes$clipRule('evenodd')
+					]),
+				_List_Nil)
+			]));
+};
+var $capitalist$elm_octicons$Octicons$checkPolygon = '12 5 4 13 0 9 1.5 7.5 4 10 10.5 3.5';
 var $elm$svg$Svg$Attributes$class = _VirtualDom_attribute('class');
+var $elm$svg$Svg$Attributes$style = _VirtualDom_attribute('style');
+var $elm$svg$Svg$Attributes$version = _VirtualDom_attribute('version');
+var $capitalist$elm_octicons$Octicons$Internal$iconSVG = F5(
+	function (viewBox, name, options, attributes, children) {
+		var style = function () {
+			var _v2 = options.style;
+			if (_v2.$ === 'Nothing') {
+				return _List_Nil;
+			} else {
+				var s = _v2.a;
+				return _List_fromArray(
+					[s]);
+			}
+		}();
+		var margin = function () {
+			var _v1 = options.margin;
+			if (_v1.$ === 'Nothing') {
+				return _List_Nil;
+			} else {
+				var m = _v1.a;
+				return _List_fromArray(
+					['margin: ' + m]);
+			}
+		}();
+		var styles = function () {
+			var _v0 = $elm$core$List$concat(
+				_List_fromArray(
+					[style, margin]));
+			if (!_v0.b) {
+				return _List_Nil;
+			} else {
+				var lst = _v0;
+				return _List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$style(
+						A2($elm$core$String$join, ';', lst))
+					]);
+			}
+		}();
+		return A2(
+			$elm$svg$Svg$svg,
+			$elm$core$List$concat(
+				_List_fromArray(
+					[
+						_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$version('1.1'),
+							$elm$svg$Svg$Attributes$class(
+							A2($elm$core$Maybe$withDefault, 'octicon ' + name, options._class)),
+							$elm$svg$Svg$Attributes$width(
+							$elm$core$String$fromInt(options.width)),
+							$elm$svg$Svg$Attributes$height(
+							$elm$core$String$fromInt(options.height)),
+							$elm$svg$Svg$Attributes$viewBox(viewBox)
+						]),
+						attributes,
+						styles
+					])),
+			children);
+	});
+var $elm$svg$Svg$polygon = $elm$svg$Svg$trustedNode('polygon');
+var $capitalist$elm_octicons$Octicons$polygonIconWithOptions = F4(
+	function (points, viewBox, octiconName, options) {
+		return A5(
+			$capitalist$elm_octicons$Octicons$Internal$iconSVG,
+			viewBox,
+			octiconName,
+			options,
+			_List_Nil,
+			_List_fromArray(
+				[
+					A2(
+					$elm$svg$Svg$polygon,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$points(points),
+							$elm$svg$Svg$Attributes$fillRule(options.fillRule),
+							$elm$svg$Svg$Attributes$fill(options.color)
+						]),
+					_List_Nil)
+				]));
+	});
+var $capitalist$elm_octicons$Octicons$check = A3($capitalist$elm_octicons$Octicons$polygonIconWithOptions, $capitalist$elm_octicons$Octicons$checkPolygon, '0 0 12 16', 'check');
+var $lemol$ant_design_icons_elm$Ant$Icons$Svg$CheckOutlined$viewWithAttributes = function (attributes) {
+	return A2(
+		$elm$svg$Svg$svg,
+		_Utils_ap(
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$viewBox('64 64 896 896')
+				]),
+			attributes),
+		_List_fromArray(
+			[
+				A2(
+				$elm$svg$Svg$path,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$d('M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z')
+					]),
+				_List_Nil)
+			]));
+};
+var $lemol$ant_design_icons_elm$Ant$Icons$Svg$checkOutlined = $lemol$ant_design_icons_elm$Ant$Icons$Svg$CheckOutlined$viewWithAttributes;
+var $j_panasiuk$elm_ionicons$Ionicon$Internal$toAlphaString = function (value) {
+	return A2(
+		$elm$core$String$left,
+		5,
+		$elm$core$String$fromFloat(
+			A3($elm$core$Basics$clamp, 0, 1, value)));
+};
+var $j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString = function (value) {
+	return A2(
+		$elm$core$String$left,
+		5,
+		$elm$core$String$fromFloat(
+			A3($elm$core$Basics$clamp, 0, 255, 255 * value)));
+};
+var $j_panasiuk$elm_ionicons$Ionicon$Internal$fill = function (_v0) {
+	var red = _v0.red;
+	var green = _v0.green;
+	var blue = _v0.blue;
+	var alpha = _v0.alpha;
+	var _v1 = ((0 <= alpha) && (alpha < 1)) ? _Utils_Tuple2(
+		'rgba',
+		_List_fromArray(
+			[
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(red),
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(green),
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(blue),
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toAlphaString(alpha)
+			])) : _Utils_Tuple2(
+		'rgb',
+		_List_fromArray(
+			[
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(red),
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(green),
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(blue)
+			]));
+	var colorSpace = _v1.a;
+	var values = _v1.b;
+	return colorSpace + ('(' + (A2($elm$core$String$join, ',', values) + ')'));
+};
+var $elm$svg$Svg$Attributes$enableBackground = _VirtualDom_attribute('enable-background');
+var $elm$svg$Svg$Attributes$x = _VirtualDom_attribute('x');
+var $elm$svg$Svg$Attributes$y = _VirtualDom_attribute('y');
+var $j_panasiuk$elm_ionicons$Ionicon$Internal$svg = function (size) {
+	return $elm$svg$Svg$svg(
+		_List_fromArray(
+			[
+				$elm$svg$Svg$Attributes$version('1.1'),
+				$elm$svg$Svg$Attributes$x('0px'),
+				$elm$svg$Svg$Attributes$y('0px'),
+				$elm$svg$Svg$Attributes$width(
+				$elm$core$String$fromInt(size)),
+				$elm$svg$Svg$Attributes$height(
+				$elm$core$String$fromInt(size)),
+				$elm$svg$Svg$Attributes$viewBox('0 0 512 512'),
+				$elm$svg$Svg$Attributes$enableBackground('new 0 0 512 512')
+			]));
+};
+var $j_panasiuk$elm_ionicons$Ionicon$Internal$p = F3(
+	function (d, size, color) {
+		return A2(
+			$j_panasiuk$elm_ionicons$Ionicon$Internal$svg,
+			size,
+			_List_fromArray(
+				[
+					A2(
+					$elm$svg$Svg$path,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$d(d),
+							$elm$svg$Svg$Attributes$fill(
+							$j_panasiuk$elm_ionicons$Ionicon$Internal$fill(color))
+						]),
+					_List_Nil)
+				]));
+	});
+var $j_panasiuk$elm_ionicons$Ionicon$checkmark = $j_panasiuk$elm_ionicons$Ionicon$Internal$p('M461.6,109.6l-54.9-43.3c-1.7-1.4-3.8-2.4-6.2-2.4c-2.4,0-4.6,1-6.3,2.5L194.5,323c0,0-78.5-75.5-80.7-77.7c-2.2-2.2-5.1-5.9-9.5-5.9c-4.4,0-6.4,3.1-8.7,5.4c-1.7,1.8-29.7,31.2-43.5,45.8c-0.8,0.9-1.3,1.4-2,2.1c-1.2,1.7-2,3.6-2,5.7c0,2.2,0.8,4,2,5.7l2.8,2.6c0,0,139.3,133.8,141.6,136.1c2.3,2.3,5.1,5.2,9.2,5.2c4,0,7.3-4.3,9.2-6.2L462,121.8c1.2-1.7,2-3.6,2-5.8C464,113.5,463,111.4,461.6,109.6z');
+var $pehota$elm_zondicons$Zondicons$checkmark = function (attributes) {
+	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'),
+				attributes)),
+		_List_fromArray(
+			[
+				A2(
+				$elm$svg$Svg$path,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$d('M0 11l2-2 5 5L18 3l2 2L7 18z')
+					]),
+				_List_Nil)
+			]));
+};
+var $capitalist$elm_octicons$Octicons$color = F2(
+	function (value, options) {
+		return _Utils_update(
+			options,
+			{color: value});
+	});
+var $capitalist$elm_octicons$Octicons$defaultOptions = {_class: $elm$core$Maybe$Nothing, color: 'black', fillRule: 'evenodd', height: 16, margin: $elm$core$Maybe$Nothing, style: $elm$core$Maybe$Nothing, width: 16};
+var $danmarcab$material_icons$Material$Icons$Internal$toRgbaString = function (color) {
+	var _v0 = $avh4$elm_color$Color$toRgba(color);
+	var red = _v0.red;
+	var green = _v0.green;
+	var blue = _v0.blue;
+	var alpha = _v0.alpha;
+	return 'rgba(' + ($elm$core$String$fromInt(
+		$elm$core$Basics$round(255 * red)) + (',' + ($elm$core$String$fromInt(
+		$elm$core$Basics$round(255 * green)) + (',' + ($elm$core$String$fromInt(
+		$elm$core$Basics$round(255 * blue)) + (',' + ($elm$core$String$fromFloat(alpha) + ')')))))));
+};
+var $danmarcab$material_icons$Material$Icons$Internal$icon = F4(
+	function (viewBox, children, color, size) {
+		var stringSize = $elm$core$String$fromInt(size);
+		var stringColor = $danmarcab$material_icons$Material$Icons$Internal$toRgbaString(color);
+		return A2(
+			$elm$svg$Svg$svg,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$width(stringSize),
+					$elm$svg$Svg$Attributes$height(stringSize),
+					$elm$svg$Svg$Attributes$viewBox(viewBox)
+				]),
+			_List_fromArray(
+				[
+					A2(
+					$elm$svg$Svg$g,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$fill(stringColor)
+						]),
+					children)
+				]));
+	});
+var $danmarcab$material_icons$Material$Icons$Action$done = A2(
+	$danmarcab$material_icons$Material$Icons$Internal$icon,
+	'0 0 48 48',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M18 32.34L9.66 24l-2.83 2.83L18 38l24-24-2.83-2.83z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Widget$Icon$elmFeather = F2(
+	function (fun, icon) {
+		return function (_v0) {
+			var size = _v0.size;
+			var color = _v0.color;
+			return A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_Nil,
+				$mdgriffith$elm_ui$Element$html(
+					A2(
+						fun,
+						_List_fromArray(
+							[
+								$elm$svg$Svg$Attributes$width(
+								$elm$core$String$fromInt(size)),
+								$elm$svg$Svg$Attributes$height(
+								$elm$core$String$fromInt(size)),
+								$elm$svg$Svg$Attributes$stroke(
+								$avh4$elm_color$Color$toCssString(color))
+							]),
+						icon)));
+		};
+	});
+var $author$project$Widget$Icon$elmFontawesome = F2(
+	function (fun, icon) {
+		return function (_v0) {
+			var size = _v0.size;
+			var color = _v0.color;
+			return A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_Nil,
+				$mdgriffith$elm_ui$Element$html(
+					A2(
+						$elm$svg$Svg$svg,
+						_List_fromArray(
+							[
+								$elm$svg$Svg$Attributes$width(
+								$elm$core$String$fromInt(size)),
+								$elm$svg$Svg$Attributes$height(
+								$elm$core$String$fromInt(size)),
+								$elm$svg$Svg$Attributes$stroke(
+								$avh4$elm_color$Color$toCssString(color)),
+								$elm$svg$Svg$Attributes$viewBox(
+								'0 0 ' + ($elm$core$String$fromInt(512) + (' ' + $elm$core$String$fromInt(512))))
+							]),
+						$elm$core$List$singleton(
+							fun(icon)))));
+		};
+	});
+var $author$project$Widget$Icon$elmHeroicons = function (fun) {
+	return function (_v0) {
+		var size = _v0.size;
+		var color = _v0.color;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_Nil,
+			$mdgriffith$elm_ui$Element$html(
+				fun(
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$width(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$height(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$stroke(
+							$avh4$elm_color$Color$toCssString(color))
+						]))));
+	};
+};
+var $author$project$Widget$Icon$elmIonicons = function (fun) {
+	return function (_v0) {
+		var size = _v0.size;
+		var color = _v0.color;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_Nil,
+			$mdgriffith$elm_ui$Element$html(
+				A2(
+					fun,
+					size,
+					$avh4$elm_color$Color$toRgba(color))));
+	};
+};
+var $author$project$Widget$Icon$elmOcticons = F2(
+	function (_v0, fun) {
+		var withSize = _v0.withSize;
+		var withColor = _v0.withColor;
+		var defaultOptions = _v0.defaultOptions;
+		return function (_v1) {
+			var size = _v1.size;
+			var color = _v1.color;
+			return A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_Nil,
+				$mdgriffith$elm_ui$Element$html(
+					fun(
+						A2(
+							withColor,
+							$avh4$elm_color$Color$toCssString(color),
+							A2(withSize, size, defaultOptions)))));
+		};
+	});
+var $author$project$Widget$Icon$elmZondicons = function (fun) {
+	return function (_v0) {
+		var size = _v0.size;
+		var color = _v0.color;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_Nil,
+			$mdgriffith$elm_ui$Element$html(
+				fun(
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$width(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$height(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$stroke(
+							$avh4$elm_color$Color$toCssString(color))
+						]))));
+	};
+};
+var $author$project$Widget$Icon$materialIcons = function (fun) {
+	return function (_v0) {
+		var size = _v0.size;
+		var color = _v0.color;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_Nil,
+			$mdgriffith$elm_ui$Element$html(
+				A2(
+					$elm$svg$Svg$svg,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$width(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$height(
+							$elm$core$String$fromInt(size))
+						]),
+					$elm$core$List$singleton(
+						A2(fun, color, size)))));
+	};
+};
+var $capitalist$elm_octicons$Octicons$size = F2(
+	function (value, options) {
+		return _Utils_update(
+			options,
+			{height: value, width: value});
+	});
 var $elm$svg$Svg$map = $elm$virtual_dom$VirtualDom$map;
+var $elm$svg$Svg$Attributes$strokeLinecap = _VirtualDom_attribute('stroke-linecap');
 var $elm$svg$Svg$Attributes$strokeLinejoin = _VirtualDom_attribute('stroke-linejoin');
+var $elm$svg$Svg$Attributes$strokeWidth = _VirtualDom_attribute('stroke-width');
 var $feathericons$elm_feather$FeatherIcons$toHtml = F2(
 	function (attributes, _v0) {
 		var src = _v0.a.src;
@@ -18906,404 +22197,183 @@ var $feathericons$elm_feather$FeatherIcons$toHtml = F2(
 				$elm$svg$Svg$map($elm$core$Basics$never),
 				src));
 	});
-var $elm_community$intdict$IntDict$findMin = function (dict) {
-	findMin:
-	while (true) {
-		switch (dict.$) {
-			case 'Empty':
-				return $elm$core$Maybe$Nothing;
-			case 'Leaf':
-				var l = dict.a;
-				return $elm$core$Maybe$Just(
-					_Utils_Tuple2(l.key, l.value));
-			default:
-				var i = dict.a;
-				var $temp$dict = i.left;
-				dict = $temp$dict;
-				continue findMin;
-		}
-	}
-};
-var $elm_community$intdict$IntDict$after = F2(
-	function (key, dict) {
-		var go = F2(
-			function (def, currentDict) {
-				go:
-				while (true) {
-					switch (currentDict.$) {
-						case 'Empty':
-							return $elm_community$intdict$IntDict$findMin(def);
-						case 'Leaf':
-							var l = currentDict.a;
-							return (_Utils_cmp(l.key, key) < 1) ? $elm_community$intdict$IntDict$findMin(def) : $elm$core$Maybe$Just(
-								_Utils_Tuple2(l.key, l.value));
-						default:
-							var i = currentDict.a;
-							if (!A2($elm_community$intdict$IntDict$prefixMatches, i.prefix, key)) {
-								return (_Utils_cmp(i.prefix.prefixBits, key) < 0) ? $elm_community$intdict$IntDict$findMin(def) : $elm_community$intdict$IntDict$findMin(i.left);
-							} else {
-								if (A2($elm_community$intdict$IntDict$isBranchingBitSet, i.prefix, key)) {
-									var $temp$def = def,
-										$temp$currentDict = i.right;
-									def = $temp$def;
-									currentDict = $temp$currentDict;
-									continue go;
-								} else {
-									var $temp$def = i.right,
-										$temp$currentDict = i.left;
-									def = $temp$def;
-									currentDict = $temp$currentDict;
-									continue go;
-								}
-							}
-					}
-				}
-			});
-		return A2(go, $elm_community$intdict$IntDict$Empty, dict);
+var $lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath = F2(
+	function (attrs, d) {
+		return A2(
+			$elm$svg$Svg$path,
+			A2(
+				$elm$core$List$cons,
+				$elm$svg$Svg$Attributes$fill('currentColor'),
+				A2(
+					$elm$core$List$cons,
+					$elm$svg$Svg$Attributes$d(d),
+					attrs)),
+			_List_Nil);
 	});
-var $elm$core$Maybe$andThen = F2(
-	function (callback, maybeValue) {
-		if (maybeValue.$ === 'Just') {
-			var value = maybeValue.a;
-			return callback(value);
+var $lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePaths = F2(
+	function (attrs, icon) {
+		var _v0 = icon.paths;
+		if (!_v0.b) {
+			return A2($lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath, attrs, '');
 		} else {
-			return $elm$core$Maybe$Nothing;
-		}
-	});
-var $elm_community$intdict$IntDict$findMax = function (dict) {
-	findMax:
-	while (true) {
-		switch (dict.$) {
-			case 'Empty':
-				return $elm$core$Maybe$Nothing;
-			case 'Leaf':
-				var l = dict.a;
-				return $elm$core$Maybe$Just(
-					_Utils_Tuple2(l.key, l.value));
-			default:
-				var i = dict.a;
-				var $temp$dict = i.right;
-				dict = $temp$dict;
-				continue findMax;
-		}
-	}
-};
-var $elm_community$intdict$IntDict$before = F2(
-	function (key, dict) {
-		var go = F2(
-			function (def, currentDict) {
-				go:
-				while (true) {
-					switch (currentDict.$) {
-						case 'Empty':
-							return $elm_community$intdict$IntDict$findMax(def);
-						case 'Leaf':
-							var l = currentDict.a;
-							return (_Utils_cmp(l.key, key) > -1) ? $elm_community$intdict$IntDict$findMax(def) : $elm$core$Maybe$Just(
-								_Utils_Tuple2(l.key, l.value));
-						default:
-							var i = currentDict.a;
-							if (!A2($elm_community$intdict$IntDict$prefixMatches, i.prefix, key)) {
-								return (_Utils_cmp(i.prefix.prefixBits, key) > 0) ? $elm_community$intdict$IntDict$findMax(def) : $elm_community$intdict$IntDict$findMax(i.right);
-							} else {
-								if (A2($elm_community$intdict$IntDict$isBranchingBitSet, i.prefix, key)) {
-									var $temp$def = i.left,
-										$temp$currentDict = i.right;
-									def = $temp$def;
-									currentDict = $temp$currentDict;
-									continue go;
-								} else {
-									var $temp$def = def,
-										$temp$currentDict = i.left;
-									def = $temp$def;
-									currentDict = $temp$currentDict;
-									continue go;
-								}
-							}
-					}
-				}
-			});
-		return A2(go, $elm_community$intdict$IntDict$Empty, dict);
-	});
-var $author$project$Widget$ScrollingNav$current = F2(
-	function (fromString, _v0) {
-		var positions = _v0.positions;
-		var scrollPos = _v0.scrollPos;
-		return A2(
-			$elm$core$Maybe$andThen,
-			fromString,
-			A2(
-				$elm$core$Maybe$map,
-				$elm$core$Tuple$second,
-				A2(
-					$elm$core$Maybe$withDefault,
-					A2($elm_community$intdict$IntDict$after, scrollPos + 1, positions),
-					A2(
-						$elm$core$Maybe$map,
-						$elm$core$Maybe$Just,
-						A2($elm_community$intdict$IntDict$before, scrollPos + 1, positions)))));
-	});
-var $author$project$Widget$ScrollingNav$toSelect = F2(
-	function (onSelect, model) {
-		var arrangement = model.arrangement;
-		var toString = model.toString;
-		var fromString = model.fromString;
-		return {
-			onSelect: onSelect,
-			options: A2(
-				$elm$core$List$map,
-				function (s) {
-					return {
-						icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-						text: toString(s)
-					};
-				},
-				arrangement),
-			selected: $elm$core$List$head(
-				A2(
-					$elm$core$List$filterMap,
-					function (_v0) {
-						var i = _v0.a;
-						var s = _v0.b;
-						return _Utils_eq(
-							$elm$core$Maybe$Just(s),
-							A2($author$project$Widget$ScrollingNav$current, fromString, model)) ? $elm$core$Maybe$Just(i) : $elm$core$Maybe$Nothing;
-					},
-					A2(
-						$elm$core$List$indexedMap,
-						F2(
-							function (i, s) {
-								return _Utils_Tuple2(i, s);
-							}),
-						arrangement)))
-		};
-	});
-var $author$project$Widget$Snackbar$current = function (model) {
-	return A2($elm$core$Maybe$map, $elm$core$Tuple$first, model.current);
-};
-var $author$project$Internal$Button$textButton = F2(
-	function (style, _v0) {
-		var onPress = _v0.onPress;
-		var text = _v0.text;
-		return A2(
-			$author$project$Internal$Button$button,
-			style,
-			{
-				icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-				onPress: onPress,
-				text: text
-			});
-	});
-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.elementRow,
-						_List_fromArray(
-							[
-								A2(
-								$mdgriffith$elm_ui$Element$paragraph,
-								style.content.text.elementText,
-								$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$Internal$Button$textButton(style.content.button),
-									button))
-							]));
-				}),
-			$author$project$Widget$Snackbar$current(model));
-	});
-var $author$project$Main$viewLayout = F3(
-	function (msgMapper, style, model) {
-		var title = A2(
-			$mdgriffith$elm_ui$Element$el,
-			_Utils_ap(
-				$author$project$Widget$Material$Typography$h6,
-				_List_fromArray(
-					[
-						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
-					])),
-			$mdgriffith$elm_ui$Element$text('Elm-Ui-Widgets'));
-		var snackbarElem = A2(
-			$elm$core$Maybe$withDefault,
-			$mdgriffith$elm_ui$Element$none,
-			A2(
-				$elm$core$Maybe$map,
-				$mdgriffith$elm_ui$Element$el(
+			if (!_v0.b.b) {
+				var only = _v0.a;
+				return A2($lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath, attrs, only);
+			} else {
+				var secondary = _v0.a;
+				var _v1 = _v0.b;
+				var primary = _v1.a;
+				return A2(
+					$elm$svg$Svg$g,
 					_List_fromArray(
 						[
-							$mdgriffith$elm_ui$Element$padding(8),
-							$mdgriffith$elm_ui$Element$alignBottom,
-							$mdgriffith$elm_ui$Element$alignRight
-						])),
-				A3($author$project$Widget$Snackbar$view, style.snackbar, $elm$core$Basics$identity, model.snackbar)));
-		var search = {
-			chips: _List_Nil,
-			label: 'Search',
-			onChange: A2($elm$core$Basics$composeR, $author$project$Main$ChangedSearch, msgMapper),
-			placeholder: $elm$core$Maybe$Just(
-				A2(
-					$mdgriffith$elm_ui$Element$Input$placeholder,
-					_List_Nil,
-					$mdgriffith$elm_ui$Element$text('Search Widgets...'))),
-			text: model.search.raw
-		};
-		var onDismiss = msgMapper(
-			$author$project$Main$ChangedSidebar($elm$core$Maybe$Nothing));
-		var onChangedSidebar = $author$project$Main$ChangedSidebar;
-		var menu = A2(
-			$author$project$Widget$ScrollingNav$toSelect,
-			function (_int) {
-				return A2(
-					$elm$core$Maybe$map,
-					$author$project$Main$JumpTo,
-					A2(
-						$elm$core$Array$get,
-						_int,
-						$elm$core$Array$fromList(model.scrollingNav.arrangement)));
-			},
-			model.scrollingNav);
-		var dialog = $elm$core$Maybe$Nothing;
-		var deviceClass = $author$project$Widget$Layout$getDeviceClass(model.window);
-		var actions = _List_fromArray(
-			[
-				{
-				icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$book),
-				onPress: $elm$core$Maybe$Just(
-					$author$project$Main$Load('https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/')),
-				text: 'Docs'
-			},
-				{
-				icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$github),
-				onPress: $elm$core$Maybe$Just(
-					$author$project$Main$Load('https://github.com/Orasund/elm-ui-widgets')),
-				text: 'Github'
-			},
-				{
-				icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$penTool),
-				onPress: (!_Utils_eq(model.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($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$penTool),
-				onPress: (!_Utils_eq(model.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'
+							$elm$svg$Svg$Attributes$class('fa-group')
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath,
+							A2(
+								$elm$core$List$cons,
+								$elm$svg$Svg$Attributes$class('fa-secondary'),
+								attrs),
+							secondary),
+							A2(
+							$lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath,
+							A2(
+								$elm$core$List$cons,
+								$elm$svg$Svg$Attributes$class('fa-primary'),
+								attrs),
+							primary)
+						]));
 			}
-			]);
-		var _v0 = $author$project$Widget$Layout$partitionActions(actions);
-		var primaryActions = _v0.primaryActions;
-		var moreActions = _v0.moreActions;
-		var modals = $author$project$Widget$Layout$orderModals(
-			{
-				bottomSheet: $elm$core$Maybe$Nothing,
-				dialog: dialog,
-				leftSheet: _Utils_eq(
-					model.active,
-					$elm$core$Maybe$Just($author$project$Main$LeftSheet)) ? $elm$core$Maybe$Just(
-					A2(
-						$author$project$Widget$Layout$leftSheet,
-						{button: style.sheetButton, sheet: style.sideSheet},
-						{menu: menu, onDismiss: onDismiss, title: title})) : $elm$core$Maybe$Nothing,
-				rightSheet: _Utils_eq(
-					model.active,
-					$elm$core$Maybe$Just($author$project$Main$RightSheet)) ? $elm$core$Maybe$Just(
-					A2(
-						$author$project$Widget$Layout$rightSheet,
-						{insetItem: style.insetItem, sheet: style.sideSheet},
-						{moreActions: moreActions, onDismiss: onDismiss})) : $elm$core$Maybe$Nothing,
-				topSheet: _Utils_eq(
-					model.active,
-					$elm$core$Maybe$Just($author$project$Main$Search)) ? $elm$core$Maybe$Just(
-					A2(
-						$author$project$Widget$Layout$searchSheet,
-						style.searchFill,
-						{onDismiss: onDismiss, search: search})) : $elm$core$Maybe$Nothing
-			});
-		var nav = (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) || (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Tablet) || ($elm$core$List$length(menu.options) > 5))) ? A2(
-			$author$project$Widget$menuBar,
-			style.menuBar,
-			{
-				deviceClass: deviceClass,
-				openLeftSheet: $elm$core$Maybe$Just(
-					msgMapper(
-						$author$project$Main$ChangedSidebar(
-							$elm$core$Maybe$Just($author$project$Main$LeftSheet)))),
-				openRightSheet: $elm$core$Maybe$Just(
-					msgMapper(
-						$author$project$Main$ChangedSidebar(
-							$elm$core$Maybe$Just($author$project$Main$RightSheet)))),
-				openTopSheet: $elm$core$Maybe$Just(
-					msgMapper(
-						$author$project$Main$ChangedSidebar(
-							$elm$core$Maybe$Just($author$project$Main$Search)))),
-				primaryActions: primaryActions,
-				search: $elm$core$Maybe$Just(search),
-				title: title
-			}) : A2(
-			$author$project$Widget$tabBar,
-			style.tabBar,
-			{
-				deviceClass: deviceClass,
-				menu: menu,
-				openRightSheet: $elm$core$Maybe$Just(
-					msgMapper(
-						$author$project$Main$ChangedSidebar(
-							$elm$core$Maybe$Just($author$project$Main$RightSheet)))),
-				openTopSheet: $elm$core$Maybe$Nothing,
-				primaryActions: primaryActions,
-				search: $elm$core$Maybe$Just(search),
-				title: title
-			});
-		return $elm$core$List$concat(
+		}
+	});
+var $lattyware$elm_fontawesome$FontAwesome$Svg$viewIcon = $lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePaths(_List_Nil);
+var $author$project$Page$Icon$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		return A2(
+			$mdgriffith$elm_ui$Element$wrappedRow,
 			_List_fromArray(
 				[
-					style.container,
-					_List_fromArray(
+					$mdgriffith$elm_ui$Element$spacing(10)
+				]),
+			A2(
+				$elm$core$List$map,
+				function (_v2) {
+					var icon = _v2.a;
+					var text = _v2.b;
+					return A2(
+						$author$project$Widget$button,
+						$author$project$Widget$Material$containedButton(palette),
+						{
+							icon: icon,
+							onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+							text: text
+						});
+				},
+				_List_fromArray(
 					[
-						$mdgriffith$elm_ui$Element$inFront(snackbarElem),
-						$mdgriffith$elm_ui$Element$inFront(nav)
-					]),
-					$author$project$Widget$singleModal(modals)
-				]));
+						_Utils_Tuple2(
+						A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+						'elm-material-icons'),
+						_Utils_Tuple2(
+						$author$project$Widget$Icon$materialIcons($danmarcab$material_icons$Material$Icons$Action$done),
+						'material-icons'),
+						_Utils_Tuple2(
+						A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$check),
+						'elm-feather'),
+						_Utils_Tuple2(
+						A2($author$project$Widget$Icon$elmFontawesome, $lattyware$elm_fontawesome$FontAwesome$Svg$viewIcon, $lattyware$elm_fontawesome$FontAwesome$Solid$check),
+						'elm-fontawesome'),
+						_Utils_Tuple2(
+						$author$project$Widget$Icon$elmIonicons($j_panasiuk$elm_ionicons$Ionicon$checkmark),
+						'elm-ionicons'),
+						_Utils_Tuple2(
+						A2(
+							$author$project$Widget$Icon$elmOcticons,
+							{defaultOptions: $capitalist$elm_octicons$Octicons$defaultOptions, withColor: $capitalist$elm_octicons$Octicons$color, withSize: $capitalist$elm_octicons$Octicons$size},
+							$capitalist$elm_octicons$Octicons$check),
+						'elm-octicons'),
+						_Utils_Tuple2(
+						$author$project$Widget$Icon$elmHeroicons($jasonliang_dev$elm_heroicons$Heroicons$Solid$check),
+						'elm-heroicons'),
+						_Utils_Tuple2(
+						$author$project$Widget$Icon$antDesignIconsElm($lemol$ant_design_icons_elm$Ant$Icons$Svg$checkOutlined),
+						'ant-design-icons-elm'),
+						_Utils_Tuple2(
+						$author$project$Widget$Icon$elmZondicons($pehota$elm_zondicons$Zondicons$checkmark),
+						'elm-zondicons')
+					])));
 	});
-var $author$project$Data$Section$ReusableViews = {$: 'ReusableViews'};
-var $author$project$Data$Section$StatelessViews = {$: 'StatelessViews'};
-var $author$project$Main$ToggledExample = function (a) {
-	return {$: 'ToggledExample', a: a};
+var $author$project$Page$Icon$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Icon$init),
+	subscriptions: $author$project$Page$Icon$subscriptions,
+	update: $author$project$Page$Icon$update,
+	view: $author$project$Page$demo($author$project$Page$Icon$view)
+};
+var $author$project$Page$Icon$description = 'Every icon package on elm-packages is supported.';
+var $author$project$Page$Icon$title = 'Icon';
+var $author$project$Page$Icon$page = $author$project$UIExplorer$Tile$page(
+	A2(
+		$author$project$UIExplorer$Tile$next,
+		$author$project$Page$Icon$demo,
+		$author$project$UIExplorer$Tile$first(
+			A2(
+				$author$project$UIExplorer$Tile$static,
+				_List_Nil,
+				F2(
+					function (_v0, _v1) {
+						return A2(
+							$mdgriffith$elm_ui$Element$column,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$spacing(32)
+								]),
+							_List_fromArray(
+								[
+									A2(
+									$mdgriffith$elm_ui$Element$el,
+									$author$project$Widget$Material$Typography$h3,
+									$mdgriffith$elm_ui$Element$text($author$project$Page$Icon$title)),
+									A2(
+									$mdgriffith$elm_ui$Element$paragraph,
+									_List_Nil,
+									$elm$core$List$singleton(
+										$mdgriffith$elm_ui$Element$text($author$project$Page$Icon$description)))
+								]));
+					})))));
+var $author$project$Page$Item$init = _Utils_Tuple2(
+	{isEnabled: true, isExpanded: false},
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$Item$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Item$update = F2(
+	function (msg, model) {
+		if (msg.$ === 'ToggleModal') {
+			var bool = msg.a;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{isEnabled: bool}),
+				$elm$core$Platform$Cmd$none);
+		} else {
+			var bool = msg.a;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{isExpanded: bool}),
+				$elm$core$Platform$Cmd$none);
+		}
+	});
+var $author$project$Page$Item$ToggleModal = function (a) {
+	return {$: 'ToggleModal', a: a};
+};
+var $author$project$Page$Item$ToogleExpand = function (a) {
+	return {$: 'ToogleExpand', a: a};
 };
-var $author$project$Widget$asItem = $author$project$Internal$Item$asItem;
-var $Orasund$elm_ui_framework$Framework$Grid$compact = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-		$mdgriffith$elm_ui$Element$alignTop
-	]);
-var $mdgriffith$elm_ui$Internal$Model$Main = {$: 'Main'};
-var $mdgriffith$elm_ui$Element$Region$mainContent = $mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$Main);
-var $Orasund$elm_ui_framework$Framework$container = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$centerX,
-		$mdgriffith$elm_ui$Element$centerY,
-		$mdgriffith$elm_ui$Element$width(
-		A2($mdgriffith$elm_ui$Element$maximum, 1200, $mdgriffith$elm_ui$Element$fill)),
-		$mdgriffith$elm_ui$Element$padding(20),
-		$mdgriffith$elm_ui$Element$Region$mainContent,
-		$mdgriffith$elm_ui$Element$Background$color(
-		A3($mdgriffith$elm_ui$Element$rgb255, 255, 255, 255))
-	]);
 var $author$project$Internal$Item$divider = function (style) {
 	return A2(
 		$author$project$Internal$Item$toItem,
@@ -19314,419 +22384,1908 @@ var $author$project$Internal$Item$divider = function (style) {
 		});
 };
 var $author$project$Widget$divider = $author$project$Internal$Item$divider;
-var $author$project$Internal$Item$expansionItem = F2(
-	function (s, _v0) {
-		var icon = _v0.icon;
-		var text = _v0.text;
-		var onToggle = _v0.onToggle;
-		var content = _v0.content;
-		var isExpanded = _v0.isExpanded;
-		return A2(
-			$elm$core$List$cons,
-			A2(
-				$author$project$Internal$Item$insetItem,
-				s.item,
-				{
-					content: isExpanded ? s.collapseIcon : s.expandIcon,
-					icon: icon,
-					onPress: $elm$core$Maybe$Just(
-						onToggle(!isExpanded)),
-					text: text
-				}),
-			isExpanded ? content : _List_Nil);
-	});
-var $author$project$Widget$expansionItem = function () {
-	var fun = $author$project$Internal$Item$expansionItem;
-	return fun;
-}();
-var $mdgriffith$elm_ui$Element$Font$bold = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$fontWeight, $mdgriffith$elm_ui$Internal$Style$classes.bold);
-var $mdgriffith$elm_ui$Internal$Model$Heading = function (a) {
-	return {$: 'Heading', a: a};
-};
-var $mdgriffith$elm_ui$Element$Region$heading = A2($elm$core$Basics$composeL, $mdgriffith$elm_ui$Internal$Model$Describe, $mdgriffith$elm_ui$Internal$Model$Heading);
-var $Orasund$elm_ui_framework$Framework$Heading$h = function (inputLevel) {
-	var level = A3($elm$core$Basics$clamp, 1, 6, inputLevel);
-	var size = (level === 6) ? 14 : (32 - ((level - 1) * 4));
-	return _List_fromArray(
-		[
-			$mdgriffith$elm_ui$Element$Region$heading(level),
-			$mdgriffith$elm_ui$Element$Font$size(size),
-			$mdgriffith$elm_ui$Element$paddingEach(
-			{bottom: 2, left: 0, right: 0, top: 2}),
-			$mdgriffith$elm_ui$Element$alignLeft,
-			$mdgriffith$elm_ui$Element$Font$bold
-		]);
-};
-var $Orasund$elm_ui_framework$Framework$Heading$h2 = $Orasund$elm_ui_framework$Framework$Heading$h(2);
-var $Orasund$elm_ui_framework$Framework$Heading$h3 = $Orasund$elm_ui_framework$Framework$Heading$h(3);
-var $elm$html$Html$Attributes$id = $elm$html$Html$Attributes$stringProperty('id');
-var $author$project$Widget$itemList = function () {
-	var fun = $author$project$Internal$List$itemList;
-	return fun;
-}();
-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 $Orasund$elm_ui_framework$Framework$Grid$section = _Utils_ap(
-	$Orasund$elm_ui_framework$Framework$Grid$simple,
-	_List_fromArray(
-		[
-			$mdgriffith$elm_ui$Element$Border$widthEach(
-			{bottom: 0, left: 0, right: 0, top: 2}),
-			$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$lightGrey),
-			$mdgriffith$elm_ui$Element$paddingEach(
-			{bottom: 30, left: 0, right: 0, top: 10})
-		]));
-var $author$project$Widget$button = function () {
-	var fun = $author$project$Internal$Button$button;
-	return fun;
-}();
-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: $elm$core$Basics$always($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: $elm$core$Basics$always($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'
-						})
-					])),
-			_List_Nil);
-	});
-var $author$project$Reusable$view = function (_v0) {
-	var theme = _v0.theme;
-	var addSnackbar = _v0.addSnackbar;
-	var style = $author$project$Data$Theme$toStyle(theme);
+var $author$project$Internal$Material$Item$fullBleedDivider = function (palette) {
 	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(
+		content: {
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(1)),
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$lightGray(palette)))
+				])
+		},
+		element: _List_fromArray(
 			[
-				A2($author$project$Reusable$snackbar, style, addSnackbar)
-			]),
-		title: 'Reusable Views'
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(1)),
+				$mdgriffith$elm_ui$Element$padding(0),
+				$mdgriffith$elm_ui$Element$Border$width(0)
+			])
 	};
 };
-var $author$project$Stateless$Idle = {$: 'Idle'};
-var $author$project$Data$Example$get = function (example) {
-	switch (example.$) {
-		case 'ButtonExample':
-			return function ($) {
-				return $.button;
-			};
-		case 'SwitchExample':
-			return function ($) {
-				return $._switch;
-			};
-		case 'SelectExample':
-			return function ($) {
-				return $.select;
-			};
-		case 'MultiSelectExample':
-			return function ($) {
-				return $.multiSelect;
-			};
-		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;
-			};
-		case 'ListExample':
-			return function ($) {
-				return $.list;
-			};
-		case 'ProgressIndicatorExample':
-			return function ($) {
-				return $.progressIndicator;
-			};
-		case 'IconExample':
-			return function ($) {
-				return $.icon;
-			};
-		case 'SheetExample':
-			return function ($) {
-				return $.sheet;
-			};
-		case 'AppBarExample':
-			return function ($) {
-				return $.appBar;
-			};
-		case 'LayoutExample':
-			return function ($) {
-				return $.layout;
-			};
-		default:
-			return function ($) {
-				return $.snackbar;
-			};
-	}
-};
-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$View$States$appBar = F2(
-	function (_v0, style) {
-		return _List_Nil;
+var $author$project$Widget$Material$fullBleedDivider = $author$project$Internal$Material$Item$fullBleedDivider;
+var $author$project$Internal$Item$fullBleedItem = F2(
+	function (s, _v0) {
+		var onPress = _v0.onPress;
+		var text = _v0.text;
+		var icon = _v0.icon;
+		return A2(
+			$author$project$Internal$Item$toItem,
+			s,
+			function (style) {
+				return A2(
+					$mdgriffith$elm_ui$Element$Input$button,
+					_Utils_ap(
+						style.elementButton,
+						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
+					{
+						label: A2(
+							$mdgriffith$elm_ui$Element$row,
+							style.content.elementRow,
+							_List_fromArray(
+								[
+									A2(
+									$mdgriffith$elm_ui$Element$el,
+									style.content.content.text.elementText,
+									A2(
+										$mdgriffith$elm_ui$Element$paragraph,
+										_List_Nil,
+										$elm$core$List$singleton(
+											$mdgriffith$elm_ui$Element$text(text)))),
+									icon(style.content.content.icon)
+								])),
+						onPress: onPress
+					});
+			});
 	});
-var $author$project$Widget$iconButton = function () {
-	var fun = $author$project$Internal$Button$iconButton;
+var $author$project$Widget$fullBleedItem = function () {
+	var fun = $author$project$Internal$Item$fullBleedItem;
 	return fun;
 }();
-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;
-		var fun = $author$project$Internal$Button$textButton;
-		return A2(
-			fun,
-			style,
-			{onPress: onPress, text: text});
-	});
-var $feathericons$elm_feather$FeatherIcons$triangle = A2(
-	$feathericons$elm_feather$FeatherIcons$makeBuilder,
-	'triangle',
-	_List_fromArray(
-		[
+var $author$project$Internal$Material$Item$fullBleedItem = function (palette) {
+	var i = $author$project$Internal$Material$Item$insetItem(palette);
+	return {
+		content: {
+			content: {
+				content: {icon: i.content.content.content.content, text: i.content.content.content.text},
+				elementRow: i.content.content.elementRow
+			},
+			elementButton: i.content.elementButton,
+			ifDisabled: i.content.ifDisabled,
+			otherwise: i.content.otherwise
+		},
+		element: i.element
+	};
+};
+var $author$project$Widget$Material$fullBleedItem = $author$project$Internal$Material$Item$fullBleedItem;
+var $elm$html$Html$Attributes$alt = $elm$html$Html$Attributes$stringProperty('alt');
+var $elm$html$Html$Attributes$src = function (url) {
+	return A2(
+		$elm$html$Html$Attributes$stringProperty,
+		'src',
+		_VirtualDom_noJavaScriptOrHtmlUri(url));
+};
+var $mdgriffith$elm_ui$Element$image = F2(
+	function (attrs, _v0) {
+		var src = _v0.src;
+		var description = _v0.description;
+		var imageAttributes = A2(
+			$elm$core$List$filter,
+			function (a) {
+				switch (a.$) {
+					case 'Width':
+						return true;
+					case 'Height':
+						return true;
+					default:
+						return false;
+				}
+			},
+			attrs);
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asEl,
+			$mdgriffith$elm_ui$Internal$Model$div,
 			A2(
-			$elm$svg$Svg$path,
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.imageContainer),
+				attrs),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+				_List_fromArray(
+					[
+						A4(
+						$mdgriffith$elm_ui$Internal$Model$element,
+						$mdgriffith$elm_ui$Internal$Model$asEl,
+						$mdgriffith$elm_ui$Internal$Model$NodeName('img'),
+						_Utils_ap(
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Internal$Model$Attr(
+									$elm$html$Html$Attributes$src(src)),
+									$mdgriffith$elm_ui$Internal$Model$Attr(
+									$elm$html$Html$Attributes$alt(description))
+								]),
+							imageAttributes),
+						$mdgriffith$elm_ui$Internal$Model$Unkeyed(_List_Nil))
+					])));
+	});
+var $author$project$Internal$Item$imageItem = F2(
+	function (s, _v0) {
+		var onPress = _v0.onPress;
+		var text = _v0.text;
+		var image = _v0.image;
+		var content = _v0.content;
+		return A2(
+			$author$project$Internal$Item$toItem,
+			s,
+			function (style) {
+				return A2(
+					$mdgriffith$elm_ui$Element$Input$button,
+					_Utils_ap(
+						style.elementButton,
+						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
+					{
+						label: A2(
+							$mdgriffith$elm_ui$Element$row,
+							style.content.elementRow,
+							_List_fromArray(
+								[
+									A2($mdgriffith$elm_ui$Element$el, style.content.content.image.element, image),
+									A2(
+									$mdgriffith$elm_ui$Element$el,
+									style.content.content.text.elementText,
+									A2(
+										$mdgriffith$elm_ui$Element$paragraph,
+										_List_Nil,
+										$elm$core$List$singleton(
+											$mdgriffith$elm_ui$Element$text(text)))),
+									content(style.content.content.content)
+								])),
+						onPress: onPress
+					});
+			});
+	});
+var $author$project$Widget$imageItem = function () {
+	var fun = $author$project$Internal$Item$imageItem;
+	return fun;
+}();
+var $author$project$Internal$Material$Item$imageItem = function (palette) {
+	return {
+		content: {
+			content: {
+				content: {
+					content: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 24
+					},
+					image: {
+						element: _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width(
+								$mdgriffith$elm_ui$Element$px(40)),
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(40))
+							])
+					},
+					text: {
+						elementText: _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+							])
+					}
+				},
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spacing(16),
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+					])
+			},
+			elementButton: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					A2($mdgriffith$elm_ui$Element$paddingXY, 16, 8)
+				]),
+			ifDisabled: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$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', 'default'))
+				]),
+			otherwise: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonPressedOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonFocusOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonHoverOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						]))
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$padding(0)
+			])
+	};
+};
+var $author$project$Widget$Material$imageItem = $author$project$Internal$Material$Item$imageItem;
+var $author$project$Internal$Material$Item$insetDivider = function (palette) {
+	return {
+		content: {
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(1)),
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$lightGray(palette)))
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(1)),
+				$mdgriffith$elm_ui$Element$Border$width(0),
+				$mdgriffith$elm_ui$Element$paddingEach(
+				{bottom: 0, left: 72, right: 0, top: 0})
+			])
+	};
+};
+var $author$project$Widget$Material$insetDivider = $author$project$Internal$Material$Item$insetDivider;
+var $author$project$Internal$Material$Palette$textGray = function (palette) {
+	return A3($author$project$Widget$Material$Color$withShade, palette.on.surface, 0.77, palette.surface);
+};
+var $author$project$Internal$Material$Item$insetHeader = function (palette) {
+	return {
+		content: {
+			content: {
+				divider: $author$project$Internal$Material$Item$insetDivider(palette).content,
+				title: _Utils_ap(
+					$author$project$Widget$Material$Typography$caption,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Font$color(
+							$author$project$Widget$Material$Color$fromColor(
+								$author$project$Internal$Material$Palette$textGray(palette)))
+						]))
+			},
+			elementColumn: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$spacing(12)
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+				$mdgriffith$elm_ui$Element$Border$width(0),
+				$mdgriffith$elm_ui$Element$paddingEach(
+				{bottom: 0, left: 72, right: 0, top: 0})
+			])
+	};
+};
+var $author$project$Widget$Material$insetHeader = $author$project$Internal$Material$Item$insetHeader;
+var $author$project$Internal$Material$Item$middleDivider = function (palette) {
+	return {
+		content: {
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(1)),
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$lightGray(palette)))
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(1)),
+				$mdgriffith$elm_ui$Element$Border$width(0),
+				$mdgriffith$elm_ui$Element$paddingEach(
+				{bottom: 0, left: 16, right: 16, top: 0})
+			])
+	};
+};
+var $author$project$Widget$Material$middleDivider = $author$project$Internal$Material$Item$middleDivider;
+var $author$project$Internal$Item$multiLineItem = F2(
+	function (s, _v0) {
+		var onPress = _v0.onPress;
+		var title = _v0.title;
+		var text = _v0.text;
+		var icon = _v0.icon;
+		var content = _v0.content;
+		return A2(
+			$author$project$Internal$Item$toItem,
+			s,
+			function (style) {
+				return A2(
+					$mdgriffith$elm_ui$Element$Input$button,
+					_Utils_ap(
+						style.elementButton,
+						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
+					{
+						label: A2(
+							$mdgriffith$elm_ui$Element$row,
+							style.content.elementRow,
+							_List_fromArray(
+								[
+									A2(
+									$mdgriffith$elm_ui$Element$el,
+									style.content.content.icon.element,
+									icon(style.content.content.icon.content)),
+									A2(
+									$mdgriffith$elm_ui$Element$column,
+									style.content.content.description.elementColumn,
+									_List_fromArray(
+										[
+											A2(
+											$mdgriffith$elm_ui$Element$paragraph,
+											style.content.content.description.content.title.elementText,
+											$elm$core$List$singleton(
+												$mdgriffith$elm_ui$Element$text(title))),
+											A2(
+											$mdgriffith$elm_ui$Element$paragraph,
+											style.content.content.description.content.text.elementText,
+											$elm$core$List$singleton(
+												$mdgriffith$elm_ui$Element$text(text)))
+										])),
+									content(style.content.content.content)
+								])),
+						onPress: onPress
+					});
+			});
+	});
+var $author$project$Widget$multiLineItem = function () {
+	var fun = $author$project$Internal$Item$multiLineItem;
+	return fun;
+}();
+var $author$project$Widget$Material$Typography$body1 = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Font$size(16),
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.5)
+	]);
+var $author$project$Widget$Material$Typography$body2 = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Font$size(14),
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.25)
+	]);
+var $author$project$Internal$Material$Item$multiLineItem = function (palette) {
+	return {
+		content: {
+			content: {
+				content: {
+					content: {
+						color: $author$project$Internal$Material$Palette$textGray(palette),
+						size: 24
+					},
+					description: {
+						content: {
+							text: {
+								elementText: _Utils_ap(
+									$author$project$Widget$Material$Typography$body2,
+									_List_fromArray(
+										[
+											$mdgriffith$elm_ui$Element$Font$color(
+											$author$project$Widget$Material$Color$fromColor(
+												$author$project$Internal$Material$Palette$gray(palette)))
+										]))
+							},
+							title: {elementText: $author$project$Widget$Material$Typography$body1}
+						},
+						elementColumn: _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+								$mdgriffith$elm_ui$Element$spacing(4)
+							])
+					},
+					icon: {
+						content: {
+							color: $author$project$Internal$Material$Palette$textGray(palette),
+							size: 24
+						},
+						element: _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width(
+								$mdgriffith$elm_ui$Element$px(40)),
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(24))
+							])
+					}
+				},
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spacing(16),
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+					])
+			},
+			elementButton: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$padding(16)
+				]),
+			ifDisabled: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$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', 'default'))
+				]),
+			otherwise: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonPressedOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonFocusOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonHoverOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						]))
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$padding(0)
+			])
+	};
+};
+var $author$project$Widget$Material$multiLineItem = $author$project$Internal$Material$Item$multiLineItem;
+var $author$project$Page$Item$view = F2(
+	function (_v0, model) {
+		var palette = _v0.palette;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_Utils_ap(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$height(
+						A2($mdgriffith$elm_ui$Element$minimum, 800, $mdgriffith$elm_ui$Element$fill)),
+						$mdgriffith$elm_ui$Element$width(
+						A2($mdgriffith$elm_ui$Element$minimum, 400, $mdgriffith$elm_ui$Element$fill))
+					]),
+				model.isEnabled ? $author$project$Widget$singleModal(
+					$elm$core$List$singleton(
+						{
+							content: A2(
+								$author$project$Widget$itemList,
+								$author$project$Widget$Material$sideSheet(palette),
+								$elm$core$List$concat(
+									_List_fromArray(
+										[
+											_List_fromArray(
+											[
+												A2(
+												$author$project$Widget$headerItem,
+												$author$project$Widget$Material$fullBleedHeader(palette),
+												'Section 1'),
+												$author$project$Widget$asItem(
+												$mdgriffith$elm_ui$Element$text('Custom Item')),
+												$author$project$Widget$divider(
+												$author$project$Widget$Material$middleDivider(palette)),
+												A2(
+												$author$project$Widget$fullBleedItem,
+												$author$project$Widget$Material$fullBleedItem(palette),
+												{
+													icon: function (_v1) {
+														return $mdgriffith$elm_ui$Element$none;
+													},
+													onPress: $elm$core$Maybe$Nothing,
+													text: 'Full Bleed Item'
+												}),
+												A2(
+												$author$project$Widget$headerItem,
+												$author$project$Widget$Material$fullBleedHeader(palette),
+												'Section 2'),
+												A2(
+												$author$project$Widget$insetItem,
+												$author$project$Widget$Material$insetItem(palette),
+												{
+													content: function (_v2) {
+														return $mdgriffith$elm_ui$Element$none;
+													},
+													icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$change_history),
+													onPress: $elm$core$Maybe$Nothing,
+													text: 'Item with Icon'
+												}),
+												A2(
+												$author$project$Widget$imageItem,
+												$author$project$Widget$Material$imageItem(palette),
+												{
+													content: function (_v3) {
+														var size = _v3.size;
+														var color = _v3.color;
+														return A2(
+															$mdgriffith$elm_ui$Element$el,
+															_List_fromArray(
+																[
+																	$mdgriffith$elm_ui$Element$Font$color(
+																	$author$project$Widget$Material$Color$fromColor(color)),
+																	$mdgriffith$elm_ui$Element$Font$size(size)
+																]),
+															$mdgriffith$elm_ui$Element$text('1.'));
+													},
+													image: A2(
+														$mdgriffith$elm_ui$Element$image,
+														_List_fromArray(
+															[
+																$mdgriffith$elm_ui$Element$width(
+																$mdgriffith$elm_ui$Element$px(40)),
+																$mdgriffith$elm_ui$Element$height(
+																$mdgriffith$elm_ui$Element$px(40))
+															]),
+														{description: 'Elm logo', src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Elm_logo.svg/1024px-Elm_logo.svg.png'}),
+													onPress: $elm$core$Maybe$Nothing,
+													text: 'Item with Image'
+												}),
+												$author$project$Widget$divider(
+												$author$project$Widget$Material$insetDivider(palette)),
+												A2(
+												$author$project$Widget$insetItem,
+												$author$project$Widget$Material$insetItem(palette),
+												{
+													content: function (_v4) {
+														var size = _v4.size;
+														var color = _v4.color;
+														return A2(
+															$mdgriffith$elm_ui$Element$el,
+															_List_fromArray(
+																[
+																	$mdgriffith$elm_ui$Element$Font$color(
+																	$author$project$Widget$Material$Color$fromColor(color)),
+																	$mdgriffith$elm_ui$Element$Font$size(size)
+																]),
+															$mdgriffith$elm_ui$Element$text('2.'));
+													},
+													icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+													onPress: $elm$core$Maybe$Just(
+														$author$project$Page$Item$ToogleExpand(!model.isExpanded)),
+													text: 'Click Me'
+												}),
+												A2(
+												$author$project$Widget$multiLineItem,
+												$author$project$Widget$Material$multiLineItem(palette),
+												{
+													content: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+													icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+													onPress: $elm$core$Maybe$Nothing,
+													text: 'Description. Description. Description. Description. Description. Description. Description. Description. Description. Description.',
+													title: 'Item'
+												}),
+												A2(
+												$author$project$Widget$imageItem,
+												$author$project$Widget$Material$imageItem(palette),
+												{
+													content: function (_v5) {
+														return A2(
+															$author$project$Widget$switch,
+															$author$project$Widget$Material$switch(palette),
+															{
+																active: model.isExpanded,
+																description: 'Click Me',
+																onPress: $elm$core$Maybe$Just(
+																	$author$project$Page$Item$ToogleExpand(!model.isExpanded))
+															});
+													},
+													image: $mdgriffith$elm_ui$Element$none,
+													onPress: $elm$core$Maybe$Just(
+														$author$project$Page$Item$ToogleExpand(!model.isExpanded)),
+													text: 'Clickable Item with Switch'
+												}),
+												$author$project$Widget$divider(
+												$author$project$Widget$Material$fullBleedDivider(palette))
+											]),
+											A2(
+											$author$project$Widget$expansionItem,
+											$author$project$Widget$Material$expansionItem(palette),
+											{
+												content: _List_fromArray(
+													[
+														A2(
+														$author$project$Widget$headerItem,
+														$author$project$Widget$Material$insetHeader(palette),
+														'Section 3'),
+														A2(
+														$author$project$Widget$insetItem,
+														$author$project$Widget$Material$insetItem(palette),
+														{
+															content: function (_v6) {
+																var size = _v6.size;
+																var color = _v6.color;
+																return A2(
+																	$mdgriffith$elm_ui$Element$el,
+																	_List_fromArray(
+																		[
+																			$mdgriffith$elm_ui$Element$Font$color(
+																			$author$project$Widget$Material$Color$fromColor(color)),
+																			$mdgriffith$elm_ui$Element$Font$size(size)
+																		]),
+																	$mdgriffith$elm_ui$Element$text('3.'));
+															},
+															icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+															onPress: $elm$core$Maybe$Nothing,
+															text: 'Item'
+														})
+													]),
+												icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+												isExpanded: model.isExpanded,
+												onToggle: $author$project$Page$Item$ToogleExpand,
+												text: 'Expandable Item'
+											}),
+											_List_fromArray(
+											[
+												A2(
+												$author$project$Widget$headerItem,
+												$author$project$Widget$Material$fullBleedHeader(palette),
+												'Menu')
+											]),
+											A2(
+											$author$project$Widget$selectItem,
+											$author$project$Widget$Material$selectItem(palette),
+											{
+												onSelect: function (_int) {
+													return $elm$core$Maybe$Just(
+														$author$project$Page$Item$ToogleExpand(_int === 1));
+												},
+												options: A2(
+													$elm$core$List$map,
+													function (bool) {
+														return {
+															icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+															text: bool ? 'Expanded' : 'Collapsed'
+														};
+													},
+													_List_fromArray(
+														[true, false])),
+												selected: model.isExpanded ? $elm$core$Maybe$Just(1) : $elm$core$Maybe$Just(0)
+											})
+										]))),
+							onDismiss: $elm$core$Maybe$Just(
+								$author$project$Page$Item$ToggleModal(false))
+						})) : _List_Nil),
+			A2(
+				$author$project$Widget$button,
+				$author$project$Widget$Material$containedButton(palette),
+				{
+					icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$visibility),
+					onPress: $elm$core$Maybe$Just(
+						$author$project$Page$Item$ToggleModal(true)),
+					text: 'Show Sheet'
+				}));
+	});
+var $author$project$Page$Item$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Item$init),
+	subscriptions: $author$project$Page$Item$subscriptions,
+	update: $author$project$Page$Item$update,
+	view: $author$project$Page$demo($author$project$Page$Item$view)
+};
+var $author$project$Page$Item$description = 'Items can be composed into lists.';
+var $author$project$Internal$Material$List$bottomSheet = function (palette) {
+	return {
+		content: {
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+				]),
+			ifFirst: _List_Nil,
+			ifLast: _List_Nil,
+			ifSingleton: _List_Nil,
+			otherwise: _List_Nil
+		},
+		elementColumn: _Utils_ap(
+			$author$project$Widget$Material$Color$textAndBackground(palette.surface),
 			_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$States$button = F2(
-	function (idle, style) {
-		return _List_fromArray(
-			[
-				_Utils_Tuple2(
-				'Button',
-				A2(
-					$author$project$Widget$button,
-					style.button,
-					{
-						icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$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($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$triangle),
-						onPress: $elm$core$Maybe$Just(idle),
-						text: 'Button'
-					})),
-				_Utils_Tuple2(
-				'Disabled button',
-				A2(
-					$author$project$Widget$button,
-					style.button,
-					{
-						icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$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($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$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($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$triangle),
-							onPress: $elm$core$Maybe$Just(idle),
-							text: 'Button'
-						})))
-			]);
-	});
-var $author$project$View$States$dialog = F2(
-	function (_v0, _v1) {
-		return _List_Nil;
-	});
-var $author$project$View$States$icon = F2(
-	function (_v0, style) {
-		return _List_Nil;
-	});
-var $author$project$View$States$layout = F2(
-	function (_v0, style) {
-		return _List_Nil;
-	});
-var $author$project$Internal$List$column = function (style) {
-	return A2(
-		$elm$core$Basics$composeR,
-		$elm$core$List$map(
-			function (a) {
-				return A2(
-					$author$project$Internal$Item$toItem,
-					{content: _Utils_Tuple0, element: style.content.element},
-					$elm$core$Basics$always(a));
-			}),
-		$author$project$Internal$List$itemList(style));
+					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$width(
+					A2($mdgriffith$elm_ui$Element$maximum, 360, $mdgriffith$elm_ui$Element$fill)),
+					A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8)
+				]))
+	};
 };
-var $author$project$Widget$column = function () {
-	var fun = $author$project$Internal$List$column;
-	return fun;
+var $author$project$Widget$Material$bottomSheet = $author$project$Internal$Material$List$bottomSheet;
+var $author$project$Page$Item$viewDividerFunctions = function () {
+	var viewButton = F4(
+		function (listStyle, style, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.divider',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					_List_fromArray(
+						[
+							$author$project$Widget$divider(
+							style(palette)),
+							A2(
+							$author$project$Widget$fullBleedItem,
+							$author$project$Widget$Material$fullBleedItem(palette),
+							{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								onPress: $elm$core$Maybe$Nothing,
+								text: 'Placeholder'
+							}),
+							$author$project$Widget$divider(
+							style(palette)),
+							A2(
+							$author$project$Widget$fullBleedItem,
+							$author$project$Widget$Material$fullBleedItem(palette),
+							{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								onPress: $elm$core$Maybe$Nothing,
+								text: 'Placeholder'
+							}),
+							$author$project$Widget$divider(
+							style(palette))
+						])));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewButton]));
 }();
-var $author$project$Internal$List$row = function (style) {
-	return A2(
-		$elm$core$Basics$composeR,
-		$elm$core$List$map(
-			function (a) {
-				return A2(
-					$author$project$Internal$Item$toItem,
-					{content: _Utils_Tuple0, element: style.content.element},
-					$elm$core$Basics$always(a));
-			}),
+var $author$project$Page$Item$dividerBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$optionListStory,
+			'Style',
+			_Utils_Tuple2('FullBleedDivider', $author$project$Widget$Material$fullBleedDivider),
+			_List_fromArray(
+				[
+					_Utils_Tuple2('MiddleDivider', $author$project$Widget$Material$middleDivider),
+					_Utils_Tuple2('InsetDivider', $author$project$Widget$Material$insetDivider)
+				])),
 		A2(
-			$elm$core$Basics$composeR,
-			$author$project$Internal$List$internal(style.content),
-			$mdgriffith$elm_ui$Element$row(style.elementRow)));
-};
-var $author$project$Widget$row = function () {
-	var fun = $author$project$Internal$List$row;
-	return fun;
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$optionListStory,
+				'Column Style',
+				_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+				_List_fromArray(
+					[
+						_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+						_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+						_Utils_Tuple2(
+						'Column',
+						$elm$core$Basics$always($author$project$Widget$Material$column))
+					])),
+			A2(
+				$author$project$UIExplorer$Story$book,
+				$elm$core$Maybe$Just('Options'),
+				$author$project$Page$Item$viewDividerFunctions))));
+var $author$project$Page$Item$viewMExpansionItemFunctions = function () {
+	var viewMultiLineItem = F7(
+		function (listStyle, style, icon, text, isExpanded, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.multiLineItem',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					$elm$core$List$concat(
+						_List_fromArray(
+							[
+								A2(
+								$author$project$Widget$expansionItem,
+								style(palette),
+								{
+									content: _List_fromArray(
+										[
+											A2(
+											$author$project$Widget$fullBleedItem,
+											$author$project$Widget$Material$fullBleedItem(palette),
+											{
+												icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+												onPress: $elm$core$Maybe$Nothing,
+												text: 'Placeholder'
+											})
+										]),
+									icon: icon,
+									isExpanded: isExpanded,
+									onToggle: $elm$core$Basics$always(_Utils_Tuple0),
+									text: text
+								}),
+								A2(
+								$author$project$Widget$expansionItem,
+								style(palette),
+								{
+									content: _List_fromArray(
+										[
+											A2(
+											$author$project$Widget$fullBleedItem,
+											$author$project$Widget$Material$fullBleedItem(palette),
+											{
+												icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+												onPress: $elm$core$Maybe$Nothing,
+												text: 'Placeholder'
+											})
+										]),
+									icon: icon,
+									isExpanded: isExpanded,
+									onToggle: $elm$core$Basics$always(_Utils_Tuple0),
+									text: text
+								}),
+								A2(
+								$author$project$Widget$expansionItem,
+								style(palette),
+								{
+									content: _List_fromArray(
+										[
+											A2(
+											$author$project$Widget$fullBleedItem,
+											$author$project$Widget$Material$fullBleedItem(palette),
+											{
+												icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+												onPress: $elm$core$Maybe$Nothing,
+												text: 'Placeholder'
+											})
+										]),
+									icon: icon,
+									isExpanded: isExpanded,
+									onToggle: $elm$core$Basics$always(_Utils_Tuple0),
+									text: text
+								})
+							]))));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewMultiLineItem]));
 }();
-var $author$project$View$States$list = F2(
-	function (_v0, style) {
-		return _List_fromArray(
-			[
-				_Utils_Tuple2(
-				'Row',
+var $author$project$Page$Item$expansionItemBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'is Expanded',
+			_Utils_Tuple2(true, false),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A2($author$project$UIExplorer$Story$textStory, 'Text', 'Item text'),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'With Icon',
+					_Utils_Tuple2(
+						A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+						$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+					true),
 				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.column,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$text('A'),
-							$mdgriffith$elm_ui$Element$text('B'),
-							$mdgriffith$elm_ui$Element$text('C')
-						]))),
-				_Utils_Tuple2(
-				'Column as Card',
-				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 as Card',
-				A2(
-					$author$project$Widget$column,
-					style.cardColumn,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$text('A')
-						]))),
-				_Utils_Tuple2(
-				'Empty List as Card',
-				A2($author$project$Widget$column, style.cardColumn, _List_Nil))
-			]);
-	});
-var $author$project$View$States$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 $author$project$Internal$Select$selectButton(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('InsetItem', $author$project$Widget$Material$expansionItem),
+						_List_Nil),
 					A2(
-						$author$project$Widget$Customize$elementButton,
-						_Utils_ap(
-							style.element,
-							($elm$core$List$length(list) === 1) ? style.ifSingleton : ((!i) ? style.ifFirst : (_Utils_eq(
-								i,
-								$elm$core$List$length(list) - 1) ? style.ifLast : style.otherwise))),
-						style.content));
-			},
-			list);
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$optionListStory,
+							'Column Style',
+							_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+							_List_fromArray(
+								[
+									_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+									_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+									_Utils_Tuple2(
+									'Column',
+									$elm$core$Basics$always($author$project$Widget$Material$column))
+								])),
+						A2(
+							$author$project$UIExplorer$Story$book,
+							$elm$core$Maybe$Just('Options'),
+							$author$project$Page$Item$viewMExpansionItemFunctions)))))));
+var $author$project$Page$Item$viewFullBleedItemFunctions = function () {
+	var viewFullBleedItem = F7(
+		function (listStyle, style, text, onPress, icon, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.fullBleedItem',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$fullBleedItem,
+							style(palette),
+							{icon: icon, onPress: onPress, text: text}),
+							A2(
+							$author$project$Widget$fullBleedItem,
+							style(palette),
+							{icon: icon, onPress: onPress, text: text}),
+							A2(
+							$author$project$Widget$fullBleedItem,
+							style(palette),
+							{icon: icon, onPress: onPress, text: text})
+						])));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewFullBleedItem]));
+}();
+var $author$project$Page$Item$fullBleedItemBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With Icon',
+			_Utils_Tuple2(
+				A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+				$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'With event handler',
+				_Utils_Tuple2(
+					$elm$core$Maybe$Just(_Utils_Tuple0),
+					$elm$core$Maybe$Nothing),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A2($author$project$UIExplorer$Story$textStory, 'Text', 'Item text'),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('FullBleedItem', $author$project$Widget$Material$fullBleedItem),
+						_List_Nil),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$optionListStory,
+							'Column Style',
+							_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+							_List_fromArray(
+								[
+									_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+									_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+									_Utils_Tuple2(
+									'Column',
+									$elm$core$Basics$always($author$project$Widget$Material$column))
+								])),
+						A2(
+							$author$project$UIExplorer$Story$book,
+							$elm$core$Maybe$Just('Options'),
+							$author$project$Page$Item$viewFullBleedItemFunctions)))))));
+var $author$project$Page$Item$viewHeaderFunctions = function () {
+	var viewButton = F5(
+		function (listStyle, style, text, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.divider',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$headerItem,
+							style(palette),
+							text),
+							A2(
+							$author$project$Widget$fullBleedItem,
+							$author$project$Widget$Material$fullBleedItem(palette),
+							{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								onPress: $elm$core$Maybe$Nothing,
+								text: 'Placeholder'
+							}),
+							A2(
+							$author$project$Widget$headerItem,
+							style(palette),
+							text),
+							A2(
+							$author$project$Widget$fullBleedItem,
+							$author$project$Widget$Material$fullBleedItem(palette),
+							{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								onPress: $elm$core$Maybe$Nothing,
+								text: 'Placeholder'
+							}),
+							A2(
+							$author$project$Widget$headerItem,
+							style(palette),
+							text)
+						])));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewButton]));
+}();
+var $author$project$Page$Item$headerBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A2($author$project$UIExplorer$Story$textStory, 'Text', 'Header'),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$optionListStory,
+				'Style',
+				_Utils_Tuple2('FullBleedHeader', $author$project$Widget$Material$fullBleedHeader),
+				_List_fromArray(
+					[
+						_Utils_Tuple2('InsetHeader', $author$project$Widget$Material$insetHeader)
+					])),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Column Style',
+					_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+					_List_fromArray(
+						[
+							_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+							_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+							_Utils_Tuple2(
+							'Column',
+							$elm$core$Basics$always($author$project$Widget$Material$column))
+						])),
+				A2(
+					$author$project$UIExplorer$Story$book,
+					$elm$core$Maybe$Just('Options'),
+					$author$project$Page$Item$viewHeaderFunctions)))));
+var $author$project$Page$Item$viewInsetItemFunctions = function () {
+	var viewFullBleedItem = F8(
+		function (listStyle, style, text, onPress, icon, content, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.insetItem',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$insetItem,
+							style(palette),
+							{content: content, icon: icon, onPress: onPress, text: text}),
+							A2(
+							$author$project$Widget$insetItem,
+							style(palette),
+							{content: content, icon: icon, onPress: onPress, text: text}),
+							A2(
+							$author$project$Widget$insetItem,
+							style(palette),
+							{content: content, icon: icon, onPress: onPress, text: text})
+						])));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewFullBleedItem]));
+}();
+var $author$project$Page$Item$insetItemBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With Content',
+			_Utils_Tuple2(
+				A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+				$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'With Icon',
+				_Utils_Tuple2(
+					A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+					$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'With event handler',
+					_Utils_Tuple2(
+						$elm$core$Maybe$Just(_Utils_Tuple0),
+						$elm$core$Maybe$Nothing),
+					true),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A2($author$project$UIExplorer$Story$textStory, 'Text', 'Item text'),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$optionListStory,
+							'Style',
+							_Utils_Tuple2('InsetItem', $author$project$Widget$Material$insetItem),
+							_List_Nil),
+						A2(
+							$author$project$UIExplorer$Story$addStory,
+							A3(
+								$author$project$UIExplorer$Story$optionListStory,
+								'Column Style',
+								_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+								_List_fromArray(
+									[
+										_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+										_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+										_Utils_Tuple2(
+										'Column',
+										$elm$core$Basics$always($author$project$Widget$Material$column))
+									])),
+							A2(
+								$author$project$UIExplorer$Story$book,
+								$elm$core$Maybe$Just('Options'),
+								$author$project$Page$Item$viewInsetItemFunctions))))))));
+var $author$project$Page$Item$viewMultiLineItemFunctions = function () {
+	var viewMultiLineItem = F9(
+		function (listStyle, style, titleText, text, onPress, icon, content, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.multiLineItem',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$multiLineItem,
+							style(palette),
+							{content: content, icon: icon, onPress: onPress, text: text, title: titleText}),
+							A2(
+							$author$project$Widget$multiLineItem,
+							style(palette),
+							{content: content, icon: icon, onPress: onPress, text: text, title: titleText}),
+							A2(
+							$author$project$Widget$multiLineItem,
+							style(palette),
+							{content: content, icon: icon, onPress: onPress, text: text, title: titleText})
+						])));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewMultiLineItem]));
+}();
+var $author$project$Page$Item$multiLineItemBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With Content',
+			_Utils_Tuple2(
+				A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+				$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'With Icon',
+				_Utils_Tuple2(
+					A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+					$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'With event handler',
+					_Utils_Tuple2(
+						$elm$core$Maybe$Just(_Utils_Tuple0),
+						$elm$core$Maybe$Nothing),
+					true),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A2($author$project$UIExplorer$Story$textStory, 'Text', 'This text may span over multiple lines. But more then three should be avoided.'),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A2($author$project$UIExplorer$Story$textStory, 'Title', 'Title'),
+						A2(
+							$author$project$UIExplorer$Story$addStory,
+							A3(
+								$author$project$UIExplorer$Story$optionListStory,
+								'Style',
+								_Utils_Tuple2('InsetItem', $author$project$Widget$Material$multiLineItem),
+								_List_Nil),
+							A2(
+								$author$project$UIExplorer$Story$addStory,
+								A3(
+									$author$project$UIExplorer$Story$optionListStory,
+									'Column Style',
+									_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+									_List_fromArray(
+										[
+											_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+											_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+											_Utils_Tuple2(
+											'Column',
+											$elm$core$Basics$always($author$project$Widget$Material$column))
+										])),
+								A2(
+									$author$project$UIExplorer$Story$book,
+									$elm$core$Maybe$Just('Options'),
+									$author$project$Page$Item$viewMultiLineItemFunctions)))))))));
+var $author$project$Page$Item$viewSelectItemFunctions = function () {
+	var viewMultiLineItem = F7(
+		function (listStyle, style, selected, options, onSelect, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.multiLineItem',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					$elm$core$List$concat(
+						_List_fromArray(
+							[
+								A2(
+								$author$project$Widget$selectItem,
+								style(palette),
+								{onSelect: onSelect, options: options, selected: selected})
+							]))));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewMultiLineItem]));
+}();
+var $author$project$Page$Item$selectItemBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With event handler',
+			_Utils_Tuple2(
+				$elm$core$Basics$always(
+					$elm$core$Maybe$Just(_Utils_Tuple0)),
+				$elm$core$Basics$always($elm$core$Maybe$Nothing)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$optionListStory,
+				'Options',
+				_Utils_Tuple2(
+					'3 Option',
+					_List_fromArray(
+						[
+							{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							text: 'Submit'
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: ''
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: 'Submit'
+						}
+						])),
+				_List_fromArray(
+					[
+						_Utils_Tuple2(
+						'2 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: 'Submit'
+							},
+								{
+								icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+								text: ''
+							}
+							])),
+						_Utils_Tuple2(
+						'1 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: 'Submit'
+							}
+							]))
+					])),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Selected',
+					_Utils_Tuple2(
+						'Third',
+						$elm$core$Maybe$Just(2)),
+					_List_fromArray(
+						[
+							_Utils_Tuple2(
+							'Second',
+							$elm$core$Maybe$Just(1)),
+							_Utils_Tuple2(
+							'First',
+							$elm$core$Maybe$Just(0)),
+							_Utils_Tuple2('Nothing or Invalid', $elm$core$Maybe$Nothing)
+						])),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('InsetItem', $author$project$Widget$Material$selectItem),
+						_List_Nil),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$optionListStory,
+							'Column Style',
+							_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+							_List_fromArray(
+								[
+									_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+									_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+									_Utils_Tuple2(
+									'Column',
+									$elm$core$Basics$always($author$project$Widget$Material$column))
+								])),
+						A2(
+							$author$project$UIExplorer$Story$book,
+							$elm$core$Maybe$Just('Options'),
+							$author$project$Page$Item$viewSelectItemFunctions)))))));
+var $author$project$Page$Item$title = 'Item';
+var $author$project$Page$Item$page = $author$project$UIExplorer$Tile$page(
+	A2(
+		$author$project$UIExplorer$Tile$nextGroup,
+		$author$project$Page$Item$selectItemBook,
+		A2(
+			$author$project$UIExplorer$Tile$nextGroup,
+			$author$project$Page$Item$expansionItemBook,
+			A2(
+				$author$project$UIExplorer$Tile$nextGroup,
+				$author$project$Page$Item$multiLineItemBook,
+				A2(
+					$author$project$UIExplorer$Tile$nextGroup,
+					$author$project$Page$Item$insetItemBook,
+					A2(
+						$author$project$UIExplorer$Tile$nextGroup,
+						$author$project$Page$Item$fullBleedItemBook,
+						A2(
+							$author$project$UIExplorer$Tile$nextGroup,
+							$author$project$Page$Item$headerBook,
+							A2(
+								$author$project$UIExplorer$Tile$nextGroup,
+								$author$project$Page$Item$dividerBook,
+								A2(
+									$author$project$UIExplorer$Tile$next,
+									$author$project$Page$Item$demo,
+									$author$project$UIExplorer$Tile$first(
+										A2(
+											$author$project$UIExplorer$Tile$static,
+											_List_Nil,
+											F2(
+												function (_v0, _v1) {
+													return A2(
+														$mdgriffith$elm_ui$Element$column,
+														_List_fromArray(
+															[
+																$mdgriffith$elm_ui$Element$spacing(32)
+															]),
+														_List_fromArray(
+															[
+																A2(
+																$mdgriffith$elm_ui$Element$el,
+																$author$project$Widget$Material$Typography$h3,
+																$mdgriffith$elm_ui$Element$text($author$project$Page$Item$title)),
+																A2(
+																$mdgriffith$elm_ui$Element$paragraph,
+																_List_Nil,
+																$elm$core$List$singleton(
+																	$mdgriffith$elm_ui$Element$text($author$project$Page$Item$description)))
+															]));
+												}))))))))))));
+var $mdgriffith$elm_ui$Element$moveDown = 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$Internal$Modal$multiModal = function (list) {
+	if (list.b) {
+		var head = list.a;
+		var tail = list.b;
+		return _Utils_ap(
+			A2(
+				$elm$core$List$map,
+				function (_v1) {
+					var content = _v1.content;
+					return $mdgriffith$elm_ui$Element$inFront(content);
+				},
+				$elm$core$List$reverse(tail)),
+			_Utils_ap(
+				$author$project$Internal$Modal$background(head.onDismiss),
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$inFront(head.content)
+					])));
+	} else {
+		return _List_Nil;
+	}
+};
+var $author$project$Widget$multiModal = $author$project$Internal$Modal$multiModal;
+var $author$project$Page$Modal$viewFunctions = function () {
+	var viewSingle = F4(
+		function (content, onDismiss, _v2, _v3) {
+			var palette = _v2.palette;
+			var contentEl = A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$padding(8)
+					]),
+				A2(
+					$author$project$Widget$column,
+					$author$project$Widget$Material$cardColumn(palette),
+					$elm$core$List$singleton(
+						A2(
+							$mdgriffith$elm_ui$Element$paragraph,
+							_List_Nil,
+							$elm$core$List$singleton(
+								$mdgriffith$elm_ui$Element$text(content))))));
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.singleModal',
+				A2(
+					$mdgriffith$elm_ui$Element$el,
+					_Utils_ap(
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(200)),
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+							]),
+						$author$project$Widget$singleModal(
+							_List_fromArray(
+								[
+									{content: contentEl, onDismiss: onDismiss},
+									{
+									content: A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$moveDown(10),
+												$mdgriffith$elm_ui$Element$moveRight(10)
+											]),
+										contentEl),
+									onDismiss: onDismiss
+								},
+									{
+									content: A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$moveDown(20),
+												$mdgriffith$elm_ui$Element$moveRight(20)
+											]),
+										contentEl),
+									onDismiss: onDismiss
+								}
+								]))),
+					$mdgriffith$elm_ui$Element$text('Placeholder Text')));
+		});
+	var viewMulti = F4(
+		function (content, onDismiss, _v0, _v1) {
+			var palette = _v0.palette;
+			var contentEl = A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$padding(8)
+					]),
+				A2(
+					$author$project$Widget$column,
+					$author$project$Widget$Material$cardColumn(palette),
+					$elm$core$List$singleton(
+						A2(
+							$mdgriffith$elm_ui$Element$paragraph,
+							_List_Nil,
+							$elm$core$List$singleton(
+								$mdgriffith$elm_ui$Element$text(content))))));
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.multiModal',
+				A2(
+					$mdgriffith$elm_ui$Element$el,
+					_Utils_ap(
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(200)),
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+							]),
+						$author$project$Widget$multiModal(
+							_List_fromArray(
+								[
+									{content: contentEl, onDismiss: onDismiss},
+									{
+									content: A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$moveDown(10),
+												$mdgriffith$elm_ui$Element$moveRight(10)
+											]),
+										contentEl),
+									onDismiss: onDismiss
+								},
+									{
+									content: A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$moveDown(20),
+												$mdgriffith$elm_ui$Element$moveRight(20)
+											]),
+										contentEl),
+									onDismiss: onDismiss
+								}
+								]))),
+					$mdgriffith$elm_ui$Element$text('Placeholder Text')));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewSingle, viewMulti]));
+}();
+var $author$project$Page$Modal$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With event handler',
+			_Utils_Tuple2(
+				$elm$core$Maybe$Just(_Utils_Tuple0),
+				$elm$core$Maybe$Nothing),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A2($author$project$UIExplorer$Story$textStory, 'Content', 'This is a windows that is in front of everything else. You can allow the user to close it by pressing outside of it or disable this feature.'),
+			A2(
+				$author$project$UIExplorer$Story$book,
+				$elm$core$Maybe$Just('Options'),
+				$author$project$Page$Modal$viewFunctions))));
+var $author$project$Page$Modal$IsEnabled = function (a) {
+	return {$: 'IsEnabled', a: a};
+};
+var $author$project$Page$Modal$init = _Utils_Tuple2(
+	$author$project$Page$Modal$IsEnabled(true),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$Modal$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Modal$update = F2(
+	function (msg, _v0) {
+		var bool = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Page$Modal$IsEnabled(bool),
+			$elm$core$Platform$Cmd$none);
 	});
+var $author$project$Page$Modal$ToggleModal = function (a) {
+	return {$: 'ToggleModal', a: a};
+};
+var $author$project$Page$Modal$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var isEnabled = _v1.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$multiModal(
+					_List_fromArray(
+						[
+							{
+							content: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_fromArray(
+									[
+										$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,
+									$author$project$Widget$Material$cardColumn(palette),
+									$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(
+								$author$project$Page$Modal$ToggleModal(false))
+						},
+							{
+							content: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$height(
+										$mdgriffith$elm_ui$Element$px(150)),
+										$mdgriffith$elm_ui$Element$width(
+										$mdgriffith$elm_ui$Element$px(200)),
+										$mdgriffith$elm_ui$Element$centerX,
+										$mdgriffith$elm_ui$Element$centerY
+									]),
+								A2(
+									$author$project$Widget$column,
+									$author$project$Widget$Material$cardColumn(palette),
+									$elm$core$List$singleton(
+										A2(
+											$mdgriffith$elm_ui$Element$paragraph,
+											_List_Nil,
+											$elm$core$List$singleton(
+												$mdgriffith$elm_ui$Element$text('This card can not be selected.')))))),
+							onDismiss: $elm$core$Maybe$Nothing
+						},
+							{
+							content: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$height(
+										$mdgriffith$elm_ui$Element$px(300)),
+										$mdgriffith$elm_ui$Element$width(
+										$mdgriffith$elm_ui$Element$px(300)),
+										$mdgriffith$elm_ui$Element$centerX,
+										$mdgriffith$elm_ui$Element$centerY
+									]),
+								A2(
+									$author$project$Widget$column,
+									$author$project$Widget$Material$cardColumn(palette),
+									$elm$core$List$singleton(
+										A2(
+											$mdgriffith$elm_ui$Element$paragraph,
+											_List_Nil,
+											$elm$core$List$singleton(
+												$mdgriffith$elm_ui$Element$text('This is message is behind the other two')))))),
+							onDismiss: $elm$core$Maybe$Nothing
+						}
+						])) : _List_Nil),
+			A2(
+				$author$project$Widget$button,
+				$author$project$Widget$Material$containedButton(palette),
+				{
+					icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$visibility),
+					onPress: $elm$core$Maybe$Just(
+						$author$project$Page$Modal$ToggleModal(true)),
+					text: 'Show Modal'
+				}));
+	});
+var $author$project$Page$Modal$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Modal$init),
+	subscriptions: $author$project$Page$Modal$subscriptions,
+	update: $author$project$Page$Modal$update,
+	view: $author$project$Page$demo($author$project$Page$Modal$view)
+};
+var $author$project$Page$Modal$description = 'All modal surfaces are interruptive by design – their purpose is to have the user focus on content on a surface that appears in front of all other surfaces.';
+var $author$project$Page$Modal$title = 'Modal';
+var $author$project$Page$Modal$page = $author$project$Page$create(
+	{book: $author$project$Page$Modal$book, demo: $author$project$Page$Modal$demo, description: $author$project$Page$Modal$description, title: $author$project$Page$Modal$title});
+var $author$project$Internal$Material$Button$toggleButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.surface),
+						size: 24
+					},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 24
+					},
+					otherwise: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.surface),
+						size: 24
+					}
+				},
+				text: {
+					contentText: _List_fromArray(
+						[$mdgriffith$elm_ui$Element$centerX])
+				}
+			},
+			elementRow: _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$Material$Color$textAndBackground(
+						A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.surface)))
+				])
+		},
+		elementButton: _Utils_ap(
+			$author$project$Widget$Material$Typography$button,
+			_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(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.surface))),
+							$mdgriffith$elm_ui$Element$Border$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3(
+									$author$project$Widget$Material$Color$withShade,
+									palette.on.surface,
+									$author$project$Widget$Material$Color$buttonPressedOpacity,
+									A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))))
+						])),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface))),
+							$mdgriffith$elm_ui$Element$Border$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3(
+									$author$project$Widget$Material$Color$withShade,
+									palette.on.surface,
+									$author$project$Widget$Material$Color$buttonHoverOpacity,
+									A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonSelectedOpacity, palette.surface))),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Widget$Material$Color$accessibleTextColor(palette.surface))),
+				$mdgriffith$elm_ui$Element$Border$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A3(
+						$author$project$Widget$Material$Color$withShade,
+						palette.on.surface,
+						$author$project$Widget$Material$Color$buttonSelectedOpacity,
+						A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface)))),
+				$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(palette.surface)),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
+				])),
+		otherwise: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(palette.surface)),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Widget$Material$Color$accessibleTextColor(palette.surface))),
+				$mdgriffith$elm_ui$Element$Border$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface)))
+			])
+	};
+};
+var $author$project$Widget$Material$toggleButton = $author$project$Internal$Material$Button$toggleButton;
+var $author$project$Internal$List$buttonColumn = function (style) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$author$project$Internal$List$internalButton(
+			{content: style.content, element: style.elementColumn.content.element, ifFirst: style.elementColumn.content.ifFirst, ifLast: style.elementColumn.content.ifLast, ifSingleton: style.elementColumn.content.ifSingleton, otherwise: style.elementColumn.content.otherwise}),
+		$mdgriffith$elm_ui$Element$column(style.elementColumn.elementColumn));
+};
+var $author$project$Widget$buttonColumn = $author$project$Internal$List$buttonColumn;
 var $author$project$Internal$List$buttonRow = function (style) {
 	return A2(
 		$elm$core$Basics$composeR,
@@ -19735,9 +24294,6 @@ var $author$project$Internal$List$buttonRow = function (style) {
 		$mdgriffith$elm_ui$Element$row(style.elementRow.elementRow));
 };
 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;
@@ -19757,287 +24313,1244 @@ var $author$project$Internal$Select$multiSelect = function (_v0) {
 		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 $author$project$Internal$Select$toggleButton = F2(
+	function (style, _v0) {
+		var selected = _v0.a;
+		var b = _v0.b;
+		return A2(
+			$mdgriffith$elm_ui$Element$Input$button,
+			_Utils_ap(
+				style.elementButton,
+				_Utils_ap(
+					_Utils_eq(b.onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : (selected ? style.ifActive : style.otherwise),
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Region$description(b.text)
+						]))),
+			{
+				label: A2(
+					$mdgriffith$elm_ui$Element$el,
+					style.content.elementRow,
+					b.icon(
+						_Utils_eq(b.onPress, $elm$core$Maybe$Nothing) ? style.content.content.icon.ifDisabled : (selected ? style.content.content.icon.ifActive : style.content.content.icon.otherwise))),
+				onPress: b.onPress
+			});
 	});
-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$States$multiSelect = F2(
-	function (idle, style) {
-		return _List_fromArray(
+var $author$project$Internal$List$toggleRow = F2(
+	function (style, list) {
+		return A2(
+			$mdgriffith$elm_ui$Element$row,
+			style.elementRow.elementRow,
+			A2(
+				$elm$core$List$indexedMap,
+				function (i) {
+					return $author$project$Internal$Select$toggleButton(
+						A2(
+							$author$project$Widget$Customize$elementButton,
+							_Utils_ap(
+								style.elementRow.content.element,
+								($elm$core$List$length(list) === 1) ? style.elementRow.content.ifSingleton : ((!i) ? style.elementRow.content.ifFirst : (_Utils_eq(
+									i,
+									$elm$core$List$length(list) - 1) ? style.elementRow.content.ifLast : style.elementRow.content.otherwise))),
+							style.content));
+				},
+				list));
+	});
+var $author$project$Widget$toggleRow = $author$project$Internal$List$toggleRow;
+var $author$project$Internal$Material$List$toggleRow = {
+	content: {
+		element: _List_Nil,
+		ifFirst: _List_fromArray(
 			[
-				_Utils_Tuple2(
-				'Some selected',
+				$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})
+			]),
+		ifSingleton: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$rounded(2)
+			]),
+		otherwise: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$rounded(0)
+			])
+	},
+	elementRow: _List_Nil
+};
+var $author$project$Widget$Material$toggleRow = $author$project$Internal$Material$List$toggleRow;
+var $author$project$Page$MultiSelect$viewFunctions = function () {
+	var viewWrappedRow = F8(
+		function (style, selected1, selected2, selected3, options, onSelect, _v6, _v7) {
+			var palette = _v6.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.wrappedButtonRow',
 				A2(
-					$author$project$Widget$buttonRow,
-					{content: style.selectButton, elementRow: style.buttonRow},
+					$author$project$Widget$wrappedButtonRow,
+					{
+						content: style(palette),
+						elementRow: $author$project$Widget$Material$row
+					},
 					$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: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-										text: $elm$core$String$fromInt(_int)
-									};
-								},
-								_List_fromArray(
-									[1, 2, 42])),
+							onSelect: onSelect,
+							options: options,
 							selected: $elm$core$Set$fromList(
-								_List_fromArray(
-									[0, 1]))
-						}))),
-				_Utils_Tuple2(
-				'Nothing selected',
+								A2(
+									$elm$core$List$filterMap,
+									$elm$core$Basics$identity,
+									_List_fromArray(
+										[selected1, selected2, selected3])))
+						})));
+		});
+	var viewTogggleRow = F8(
+		function (style, selected1, selected2, selected3, options, onSelect, _v4, _v5) {
+			var palette = _v4.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.toggleRow',
 				A2(
-					$author$project$Widget$buttonRow,
-					{content: style.selectButton, elementRow: style.buttonRow},
+					$author$project$Widget$toggleRow,
+					{
+						content: style(palette),
+						elementRow: $author$project$Widget$Material$toggleRow
+					},
 					$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: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-										text: $elm$core$String$fromInt(_int)
-									};
-								},
-								_List_fromArray(
-									[1, 2, 42])),
-							selected: $elm$core$Set$empty
-						}))),
-				_Utils_Tuple2(
-				'Invalid selection',
+							onSelect: onSelect,
+							options: options,
+							selected: $elm$core$Set$fromList(
+								A2(
+									$elm$core$List$filterMap,
+									$elm$core$Basics$identity,
+									_List_fromArray(
+										[selected1, selected2, selected3])))
+						})));
+		});
+	var viewSelectRow = F8(
+		function (style, selected1, selected2, selected3, options, onSelect, _v2, _v3) {
+			var palette = _v2.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.buttonRow ',
 				A2(
 					$author$project$Widget$buttonRow,
-					{content: style.selectButton, elementRow: style.buttonRow},
+					{
+						content: style(palette),
+						elementRow: $author$project$Widget$Material$row
+					},
 					$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: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-										text: $elm$core$String$fromInt(_int)
-									};
-								},
-								_List_fromArray(
-									[1, 2, 42])),
-							selected: $elm$core$Set$singleton(-1)
-						}))),
-				_Utils_Tuple2(
-				'Disabled selection',
+							onSelect: onSelect,
+							options: options,
+							selected: $elm$core$Set$fromList(
+								A2(
+									$elm$core$List$filterMap,
+									$elm$core$Basics$identity,
+									_List_fromArray(
+										[selected1, selected2, selected3])))
+						})));
+		});
+	var viewSelectColumn = F8(
+		function (style, selected1, selected2, selected3, options, onSelect, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.buttonColumn',
 				A2(
-					$author$project$Widget$buttonRow,
-					{content: style.selectButton, elementRow: style.buttonRow},
+					$author$project$Widget$buttonColumn,
+					{
+						content: style(palette),
+						elementColumn: $author$project$Widget$Material$column
+					},
 					$author$project$Widget$multiSelect(
 						{
-							onSelect: $elm$core$Basics$always($elm$core$Maybe$Nothing),
-							options: A2(
-								$elm$core$List$map,
-								function (_int) {
-									return {
-										icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-										text: $elm$core$String$fromInt(_int)
-									};
-								},
-								_List_fromArray(
-									[1, 2, 42])),
-							selected: $elm$core$Set$singleton(0)
-						}))),
+							onSelect: onSelect,
+							options: options,
+							selected: $elm$core$Set$fromList(
+								A2(
+									$elm$core$List$filterMap,
+									$elm$core$Basics$identity,
+									_List_fromArray(
+										[selected1, selected2, selected3])))
+						})));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewTogggleRow, viewSelectRow, viewSelectColumn, viewWrappedRow]));
+}();
+var $author$project$Page$MultiSelect$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With event handler',
+			_Utils_Tuple2(
+				$elm$core$Basics$always(
+					$elm$core$Maybe$Just(_Utils_Tuple0)),
+				$elm$core$Basics$always($elm$core$Maybe$Nothing)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$optionListStory,
+				'Options',
 				_Utils_Tuple2(
-				'Empty Options',
+					'3 Option',
+					_List_fromArray(
+						[
+							{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							text: 'Submit'
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: ''
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: 'Submit'
+						}
+						])),
+				_List_fromArray(
+					[
+						_Utils_Tuple2(
+						'2 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: 'Submit'
+							},
+								{
+								icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+								text: ''
+							}
+							])),
+						_Utils_Tuple2(
+						'1 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: 'Submit'
+							}
+							]))
+					])),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'Selected Third',
+					_Utils_Tuple2(
+						$elm$core$Maybe$Just(2),
+						$elm$core$Maybe$Nothing),
+					true),
 				A2(
-					$author$project$Widget$buttonRow,
-					{content: style.selectButton, elementRow: 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: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-										text: $elm$core$String$fromInt(_int)
-									};
-								},
-								_List_Nil),
-							selected: $elm$core$Set$empty
-						})))
-			]);
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$boolStory,
+						'Selected Second',
+						_Utils_Tuple2(
+							$elm$core$Maybe$Just(1),
+							$elm$core$Maybe$Nothing),
+						true),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$boolStory,
+							'Selected First',
+							_Utils_Tuple2(
+								$elm$core$Maybe$Just(0),
+								$elm$core$Maybe$Nothing),
+							false),
+						A2(
+							$author$project$UIExplorer$Story$addStory,
+							A3(
+								$author$project$UIExplorer$Story$optionListStory,
+								'Style',
+								_Utils_Tuple2('Contained', $author$project$Widget$Material$containedButton),
+								_List_fromArray(
+									[
+										_Utils_Tuple2('Outlined', $author$project$Widget$Material$outlinedButton),
+										_Utils_Tuple2('Text', $author$project$Widget$Material$textButton),
+										_Utils_Tuple2('Chip', $author$project$Widget$Material$chip),
+										_Utils_Tuple2('IconButton', $author$project$Widget$Material$iconButton),
+										_Utils_Tuple2('Toggle', $author$project$Widget$Material$toggleButton)
+									])),
+							A2(
+								$author$project$UIExplorer$Story$book,
+								$elm$core$Maybe$Just('Options'),
+								$author$project$Page$MultiSelect$viewFunctions))))))));
+var $author$project$Page$MultiSelect$Selected = function (a) {
+	return {$: 'Selected', a: a};
+};
+var $author$project$Page$MultiSelect$init = _Utils_Tuple2(
+	$author$project$Page$MultiSelect$Selected($elm$core$Set$empty),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$MultiSelect$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$MultiSelect$update = F2(
+	function (msg, _v0) {
+		var selected = _v0.a;
+		var _int = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Page$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$Page$MultiSelect$ChangedSelected = function (a) {
+	return {$: 'ChangedSelected', a: a};
+};
+var $author$project$Page$MultiSelect$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var selected = _v1.a;
+		return A2(
+			$author$project$Widget$buttonRow,
+			{
+				content: $author$project$Widget$Material$toggleButton(palette),
+				elementRow: $author$project$Widget$Material$toggleRow
+			},
+			$author$project$Widget$multiSelect(
+				{
+					onSelect: A2($elm$core$Basics$composeR, $author$project$Page$MultiSelect$ChangedSelected, $elm$core$Maybe$Just),
+					options: A2(
+						$elm$core$List$map,
+						function (_int) {
+							return {
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: $elm$core$String$fromInt(_int)
+							};
+						},
+						_List_fromArray(
+							[1, 2, 42])),
+					selected: selected
+				}));
+	});
+var $author$project$Page$MultiSelect$demo = {
+	init: $elm$core$Basics$always($author$project$Page$MultiSelect$init),
+	subscriptions: $author$project$Page$MultiSelect$subscriptions,
+	update: $author$project$Page$MultiSelect$update,
+	view: $author$project$Page$demo($author$project$Page$MultiSelect$view)
+};
+var $author$project$Page$MultiSelect$description = 'Select buttons group a set of actions using layout and spacing.';
+var $author$project$Page$MultiSelect$title = 'Multi Select';
+var $author$project$Page$MultiSelect$page = $author$project$Page$create(
+	{book: $author$project$Page$MultiSelect$book, demo: $author$project$Page$MultiSelect$demo, description: $author$project$Page$MultiSelect$description, title: $author$project$Page$MultiSelect$title});
+var $mdgriffith$elm_ui$Element$Input$currentPassword = F2(
+	function (attrs, pass) {
+		return A3(
+			$mdgriffith$elm_ui$Element$Input$textHelper,
+			{
+				autofill: $elm$core$Maybe$Just('current-password'),
+				spellchecked: false,
+				type_: $mdgriffith$elm_ui$Element$Input$TextInputNode(
+					pass.show ? 'text' : 'password')
+			},
+			attrs,
+			{label: pass.label, onChange: pass.onChange, placeholder: pass.placeholder, text: pass.text});
+	});
+var $author$project$Internal$PasswordInput$password = F3(
+	function (input, style, _v0) {
+		var placeholder = _v0.placeholder;
+		var label = _v0.label;
+		var text = _v0.text;
+		var onChange = _v0.onChange;
+		var show = _v0.show;
+		return A2(
+			$mdgriffith$elm_ui$Element$row,
+			style.elementRow,
+			_List_fromArray(
+				[
+					A2(
+					input,
+					style.content.password.elementPasswordInput,
+					{
+						label: $mdgriffith$elm_ui$Element$Input$labelHidden(label),
+						onChange: onChange,
+						placeholder: placeholder,
+						show: show,
+						text: text
+					})
+				]));
+	});
+var $author$project$Internal$PasswordInput$currentPasswordInput = $author$project$Internal$PasswordInput$password($mdgriffith$elm_ui$Element$Input$currentPassword);
+var $author$project$Widget$currentPasswordInput = $author$project$Internal$PasswordInput$currentPasswordInput;
+var $mdgriffith$elm_ui$Element$Input$newPassword = F2(
+	function (attrs, pass) {
+		return A3(
+			$mdgriffith$elm_ui$Element$Input$textHelper,
+			{
+				autofill: $elm$core$Maybe$Just('new-password'),
+				spellchecked: false,
+				type_: $mdgriffith$elm_ui$Element$Input$TextInputNode(
+					pass.show ? 'text' : 'password')
+			},
+			attrs,
+			{label: pass.label, onChange: pass.onChange, placeholder: pass.placeholder, text: pass.text});
+	});
+var $author$project$Internal$PasswordInput$newPasswordInput = $author$project$Internal$PasswordInput$password($mdgriffith$elm_ui$Element$Input$newPassword);
+var $author$project$Widget$newPasswordInput = $author$project$Internal$PasswordInput$newPasswordInput;
+var $author$project$Internal$Material$PasswordInput$passwordInput = function (palette) {
+	return {
+		content: {
+			password: {
+				elementPasswordInput: _Utils_ap(
+					$author$project$Widget$Material$Color$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),
+							$mdgriffith$elm_ui$Element$centerY
+						]))
+			}
+		},
+		elementRow: _Utils_ap(
+			$author$project$Widget$Material$Color$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$Material$Color$fromColor(
+						A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Material$Color$shadow(4)),
+							$mdgriffith$elm_ui$Element$Border$color(
+							$author$project$Widget$Material$Color$fromColor(palette.primary))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Material$Color$shadow(2))
+						])),
+					$mdgriffith$elm_ui$Element$width(
+					$mdgriffith$elm_ui$Element$px(280))
+				]))
+	};
+};
+var $author$project$Widget$Material$passwordInput = $author$project$Internal$Material$PasswordInput$passwordInput;
+var $author$project$Page$PasswordInput$viewFunctions = function () {
+	var viewNewPassword = F6(
+		function (text, placeholder, label, show, _v2, _v3) {
+			var palette = _v2.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.newPasswordInput',
+				A2(
+					$author$project$Widget$newPasswordInput,
+					$author$project$Widget$Material$passwordInput(palette),
+					{
+						label: label,
+						onChange: $elm$core$Basics$always(_Utils_Tuple0),
+						placeholder: placeholder,
+						show: show,
+						text: text
+					}));
+		});
+	var viewCurrentPassword = F6(
+		function (text, placeholder, label, show, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.currentPasswordInput',
+				A2(
+					$author$project$Widget$currentPasswordInput,
+					$author$project$Widget$Material$passwordInput(palette),
+					{
+						label: label,
+						onChange: $elm$core$Basics$always(_Utils_Tuple0),
+						placeholder: placeholder,
+						show: show,
+						text: text
+					}));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewNewPassword, viewCurrentPassword]));
+}();
+var $author$project$Page$PasswordInput$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'Show',
+			_Utils_Tuple2(true, false),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A2($author$project$UIExplorer$Story$textStory, 'Label', 'Password'),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'Placeholder',
+					_Utils_Tuple2(
+						$elm$core$Maybe$Just(
+							A2(
+								$mdgriffith$elm_ui$Element$Input$placeholder,
+								_List_Nil,
+								$mdgriffith$elm_ui$Element$text('password'))),
+						$elm$core$Maybe$Nothing),
+					true),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A2($author$project$UIExplorer$Story$textStory, 'Text', '123456789'),
+					A2(
+						$author$project$UIExplorer$Story$book,
+						$elm$core$Maybe$Just('Options'),
+						$author$project$Page$PasswordInput$viewFunctions))))));
+var $author$project$Page$PasswordInput$init = _Utils_Tuple2(
+	{newInput: '', passwordInput: ''},
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$PasswordInput$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$PasswordInput$update = F2(
+	function (msg, model) {
+		if (msg.$ === 'SetPasswordInput') {
+			var string = msg.a;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{passwordInput: string}),
+				$elm$core$Platform$Cmd$none);
+		} else {
+			var string = msg.a;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{newInput: string}),
+				$elm$core$Platform$Cmd$none);
+		}
+	});
+var $author$project$Page$PasswordInput$SetNewPasswordInput = function (a) {
+	return {$: 'SetNewPasswordInput', a: a};
+};
+var $author$project$Page$PasswordInput$SetPasswordInput = function (a) {
+	return {$: 'SetPasswordInput', a: a};
+};
+var $author$project$Page$PasswordInput$view = F2(
+	function (_v0, model) {
+		var palette = _v0.palette;
+		return A2(
+			$mdgriffith$elm_ui$Element$column,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$spacing(8)
+				]),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$text('Try  filling out these fields using autofill'),
+					A2(
+					$mdgriffith$elm_ui$Element$row,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+							$mdgriffith$elm_ui$Element$spaceEvenly
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+								]),
+							$mdgriffith$elm_ui$Element$text('Current Password')),
+							A2(
+							$author$project$Widget$currentPasswordInput,
+							$author$project$Widget$Material$passwordInput(palette),
+							{label: 'Chips', onChange: $author$project$Page$PasswordInput$SetPasswordInput, placeholder: $elm$core$Maybe$Nothing, show: false, text: model.passwordInput})
+						])),
+					A2(
+					$mdgriffith$elm_ui$Element$row,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+							$mdgriffith$elm_ui$Element$spaceEvenly
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+								]),
+							$mdgriffith$elm_ui$Element$text('New Password')),
+							A2(
+							$author$project$Widget$newPasswordInput,
+							$author$project$Widget$Material$passwordInput(palette),
+							{label: 'Chips', onChange: $author$project$Page$PasswordInput$SetNewPasswordInput, placeholder: $elm$core$Maybe$Nothing, show: false, text: model.newInput})
+						])),
+					$mdgriffith$elm_ui$Element$text(
+					((model.newInput !== '') && _Utils_eq(model.newInput, model.passwordInput)) ? 'Yeay, the two passwords match!' : '')
+				]));
+	});
+var $author$project$Page$PasswordInput$demo = {
+	init: $elm$core$Basics$always($author$project$Page$PasswordInput$init),
+	subscriptions: $author$project$Page$PasswordInput$subscriptions,
+	update: $author$project$Page$PasswordInput$update,
+	view: $author$project$Page$demo($author$project$Page$PasswordInput$view)
+};
+var $author$project$Page$PasswordInput$description = 'If we want to play nicely with a browser\'s ability to autofill a form, we need to be able to give it a hint about what we\'re expecting.\n    \nThe following inputs are very similar to Input.text, but they give the browser a hint to allow autofill to work correctly.';
+var $author$project$Page$PasswordInput$title = 'Password Input';
+var $author$project$Page$PasswordInput$page = $author$project$Page$create(
+	{book: $author$project$Page$PasswordInput$book, demo: $author$project$Page$PasswordInput$demo, description: $author$project$Page$PasswordInput$description, title: $author$project$Page$PasswordInput$title});
+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 $elm$svg$Svg$Attributes$strokeDasharray = _VirtualDom_attribute('stroke-dasharray');
+var $elm$svg$Svg$Attributes$strokeDashoffset = _VirtualDom_attribute('stroke-dashoffset');
+var $elm$svg$Svg$Attributes$transform = _VirtualDom_attribute('transform');
+var $elm$svg$Svg$Attributes$xmlSpace = A2(_VirtualDom_attributeNS, 'http://www.w3.org/XML/1998/namespace', 'xml:space');
+var $author$project$Internal$Material$ProgressIndicator$determinateCircularIcon = F3(
+	function (color, attribs, progress) {
+		var strokeDashoffset = function () {
+			var clampedProgress = A3($elm$core$Basics$clamp, 0, 1, progress);
+			return $elm$core$Basics$round(188 - (188 * clampedProgress));
+		}();
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			attribs,
+			$mdgriffith$elm_ui$Element$html(
+				A2(
+					$elm$svg$Svg$svg,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$height('48px'),
+							$elm$svg$Svg$Attributes$width('48px'),
+							$elm$svg$Svg$Attributes$viewBox('0 0 66 66'),
+							$elm$svg$Svg$Attributes$xmlSpace('http://www.w3.org/2000/svg')
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$g,
+							_List_Nil,
+							_List_fromArray(
+								[
+									A2(
+									$elm$svg$Svg$circle,
+									_List_fromArray(
+										[
+											$elm$svg$Svg$Attributes$fill('none'),
+											$elm$svg$Svg$Attributes$stroke(
+											$avh4$elm_color$Color$toCssString(color)),
+											$elm$svg$Svg$Attributes$strokeWidth('5'),
+											$elm$svg$Svg$Attributes$strokeLinecap('butt'),
+											$elm$svg$Svg$Attributes$cx('33'),
+											$elm$svg$Svg$Attributes$cy('33'),
+											$elm$svg$Svg$Attributes$r('30'),
+											$elm$svg$Svg$Attributes$strokeDasharray('188 188'),
+											$elm$svg$Svg$Attributes$strokeDashoffset(
+											$elm$core$String$fromInt(strokeDashoffset)),
+											$elm$svg$Svg$Attributes$transform('rotate(-90 33 33)')
+										]),
+									_List_Nil)
+								]))
+						]))));
+	});
+var $elm$svg$Svg$animate = $elm$svg$Svg$trustedNode('animate');
+var $elm$svg$Svg$animateTransform = $elm$svg$Svg$trustedNode('animateTransform');
+var $elm$svg$Svg$Attributes$attributeName = _VirtualDom_attribute('attributeName');
+var $elm$svg$Svg$Attributes$begin = _VirtualDom_attribute('begin');
+var $elm$svg$Svg$Attributes$dur = _VirtualDom_attribute('dur');
+var $elm$svg$Svg$Attributes$repeatCount = _VirtualDom_attribute('repeatCount');
+var $elm$svg$Svg$Attributes$type_ = _VirtualDom_attribute('type');
+var $author$project$Internal$Material$ProgressIndicator$indeterminateCircularIcon = F2(
+	function (color, attribs) {
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			attribs,
+			$mdgriffith$elm_ui$Element$html(
+				A2(
+					$elm$svg$Svg$svg,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$height('48px'),
+							$elm$svg$Svg$Attributes$width('48px'),
+							$elm$svg$Svg$Attributes$viewBox('0 0 66 66'),
+							$elm$svg$Svg$Attributes$xmlSpace('http://www.w3.org/2000/svg')
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$g,
+							_List_Nil,
+							_List_fromArray(
+								[
+									A2(
+									$elm$svg$Svg$animateTransform,
+									_List_fromArray(
+										[
+											$elm$svg$Svg$Attributes$attributeName('transform'),
+											$elm$svg$Svg$Attributes$type_('rotate'),
+											$elm$svg$Svg$Attributes$values('0 33 33;270 33 33'),
+											$elm$svg$Svg$Attributes$begin('0s'),
+											$elm$svg$Svg$Attributes$dur('1.4s'),
+											$elm$svg$Svg$Attributes$fill('freeze'),
+											$elm$svg$Svg$Attributes$repeatCount('indefinite')
+										]),
+									_List_Nil),
+									A2(
+									$elm$svg$Svg$circle,
+									_List_fromArray(
+										[
+											$elm$svg$Svg$Attributes$fill('none'),
+											$elm$svg$Svg$Attributes$stroke(
+											$avh4$elm_color$Color$toCssString(color)),
+											$elm$svg$Svg$Attributes$strokeWidth('5'),
+											$elm$svg$Svg$Attributes$strokeLinecap('square'),
+											$elm$svg$Svg$Attributes$cx('33'),
+											$elm$svg$Svg$Attributes$cy('33'),
+											$elm$svg$Svg$Attributes$r('30'),
+											$elm$svg$Svg$Attributes$strokeDasharray('187'),
+											$elm$svg$Svg$Attributes$strokeDashoffset('610')
+										]),
+									_List_fromArray(
+										[
+											A2(
+											$elm$svg$Svg$animateTransform,
+											_List_fromArray(
+												[
+													$elm$svg$Svg$Attributes$attributeName('transform'),
+													$elm$svg$Svg$Attributes$type_('rotate'),
+													$elm$svg$Svg$Attributes$values('0 33 33;135 33 33;450 33 33'),
+													$elm$svg$Svg$Attributes$begin('0s'),
+													$elm$svg$Svg$Attributes$dur('1.4s'),
+													$elm$svg$Svg$Attributes$fill('freeze'),
+													$elm$svg$Svg$Attributes$repeatCount('indefinite')
+												]),
+											_List_Nil),
+											A2(
+											$elm$svg$Svg$animate,
+											_List_fromArray(
+												[
+													$elm$svg$Svg$Attributes$attributeName('stroke-dashoffset'),
+													$elm$svg$Svg$Attributes$values('187;46.75;187'),
+													$elm$svg$Svg$Attributes$begin('0s'),
+													$elm$svg$Svg$Attributes$dur('1.4s'),
+													$elm$svg$Svg$Attributes$fill('freeze'),
+													$elm$svg$Svg$Attributes$repeatCount('indefinite')
+												]),
+											_List_Nil)
+										]))
+								]))
+						]))));
+	});
+var $author$project$Internal$Material$ProgressIndicator$progressIndicator = function (palette) {
+	return {
+		elementFunction: function (maybeProgress) {
+			if (maybeProgress.$ === 'Nothing') {
+				return A2($author$project$Internal$Material$ProgressIndicator$indeterminateCircularIcon, palette.primary, _List_Nil);
+			} else {
+				var progress = maybeProgress.a;
+				return A3($author$project$Internal$Material$ProgressIndicator$determinateCircularIcon, palette.primary, _List_Nil, progress);
+			}
+		}
+	};
+};
+var $author$project$Widget$Material$progressIndicator = $author$project$Internal$Material$ProgressIndicator$progressIndicator;
 var $author$project$Internal$ProgressIndicator$circularProgressIndicator = F2(
 	function (style, maybeProgress) {
 		return style.elementFunction(maybeProgress);
 	});
 var $author$project$Widget$circularProgressIndicator = $author$project$Internal$ProgressIndicator$circularProgressIndicator;
-var $author$project$View$States$progressIndicator = F2(
-	function (_v0, style) {
-		var determinateIndicators = A2(
-			$elm$core$List$map,
-			function (completeness) {
-				return _Utils_Tuple2(
-					'Completeness ' + $elm$core$String$fromFloat(completeness),
+var $author$project$Page$ProgressIndicator$viewFunctions = function () {
+	var viewIndicator = F5(
+		function (style, progress, indeterminate, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.circularProgressIndicator',
+				A2(
+					$author$project$Widget$circularProgressIndicator,
+					style(palette),
+					indeterminate(progress / 100)));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewIndicator]));
+}();
+var $author$project$Page$ProgressIndicator$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'Indeterminate Indicator',
+			_Utils_Tuple2(
+				$elm$core$Basics$always($elm$core$Maybe$Nothing),
+				$elm$core$Maybe$Just),
+			false),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A2(
+				$author$project$UIExplorer$Story$rangeStory,
+				'Progress',
+				{_default: 50, max: 100, min: 0, unit: '%'}),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Style',
+					_Utils_Tuple2('ProgressIndicator', $author$project$Widget$Material$progressIndicator),
+					_List_Nil),
+				A2(
+					$author$project$UIExplorer$Story$book,
+					$elm$core$Maybe$Just('Options'),
+					$author$project$Page$ProgressIndicator$viewFunctions)))));
+var $author$project$Page$ProgressIndicator$MaybeProgress = function (a) {
+	return {$: 'MaybeProgress', a: a};
+};
+var $author$project$Page$ProgressIndicator$init = _Utils_Tuple2(
+	$author$project$Page$ProgressIndicator$MaybeProgress($elm$core$Maybe$Nothing),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$ProgressIndicator$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$ProgressIndicator$update = F2(
+	function (msg, _v0) {
+		var maybeFloat = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Page$ProgressIndicator$MaybeProgress(maybeFloat),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Page$ProgressIndicator$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var maybeProgress = _v1.a;
+		return A2(
+			$author$project$Widget$circularProgressIndicator,
+			$author$project$Widget$Material$progressIndicator(palette),
+			maybeProgress);
+	});
+var $author$project$Page$ProgressIndicator$demo = {
+	init: $elm$core$Basics$always($author$project$Page$ProgressIndicator$init),
+	subscriptions: $author$project$Page$ProgressIndicator$subscriptions,
+	update: $author$project$Page$ProgressIndicator$update,
+	view: $author$project$Page$demo($author$project$Page$ProgressIndicator$view)
+};
+var $author$project$Page$ProgressIndicator$description = 'Progress indicators express an unspecified wait time or display the length of a process.';
+var $author$project$Page$ProgressIndicator$title = 'Progress Indicator';
+var $author$project$Page$ProgressIndicator$page = $author$project$Page$create(
+	{book: $author$project$Page$ProgressIndicator$book, demo: $author$project$Page$ProgressIndicator$demo, description: $author$project$Page$ProgressIndicator$description, title: $author$project$Page$ProgressIndicator$title});
+var $author$project$Page$Select$viewFunctions = function () {
+	var viewWrappedRow = F6(
+		function (style, selected, options, onSelect, _v6, _v7) {
+			var palette = _v6.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.wrappedButtonRow',
+				A2(
+					$author$project$Widget$wrappedButtonRow,
+					{
+						content: style(palette),
+						elementRow: $author$project$Widget$Material$row
+					},
+					$author$project$Widget$select(
+						{onSelect: onSelect, options: options, selected: selected})));
+		});
+	var viewTogggleRow = F6(
+		function (style, selected, options, onSelect, _v4, _v5) {
+			var palette = _v4.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.toggleRow',
+				A2(
+					$author$project$Widget$toggleRow,
+					{
+						content: style(palette),
+						elementRow: $author$project$Widget$Material$toggleRow
+					},
+					$author$project$Widget$select(
+						{onSelect: onSelect, options: options, selected: selected})));
+		});
+	var viewSelectRow = F6(
+		function (style, selected, options, onSelect, _v2, _v3) {
+			var palette = _v2.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.buttonRow ',
+				A2(
+					$author$project$Widget$buttonRow,
+					{
+						content: style(palette),
+						elementRow: $author$project$Widget$Material$row
+					},
+					$author$project$Widget$select(
+						{onSelect: onSelect, options: options, selected: selected})));
+		});
+	var viewSelectColumn = F6(
+		function (style, selected, options, onSelect, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.buttonColumn',
+				A2(
+					$author$project$Widget$buttonColumn,
+					{
+						content: style(palette),
+						elementColumn: $author$project$Widget$Material$column
+					},
+					$author$project$Widget$select(
+						{onSelect: onSelect, options: options, selected: selected})));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewTogggleRow, viewSelectRow, viewSelectColumn, viewWrappedRow]));
+}();
+var $author$project$Page$Select$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With event handler',
+			_Utils_Tuple2(
+				$elm$core$Basics$always(
+					$elm$core$Maybe$Just(_Utils_Tuple0)),
+				$elm$core$Basics$always($elm$core$Maybe$Nothing)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$optionListStory,
+				'Options',
+				_Utils_Tuple2(
+					'3 Option',
+					_List_fromArray(
+						[
+							{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							text: 'Submit'
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: ''
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: 'Submit'
+						}
+						])),
+				_List_fromArray(
+					[
+						_Utils_Tuple2(
+						'2 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: 'Submit'
+							},
+								{
+								icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+								text: ''
+							}
+							])),
+						_Utils_Tuple2(
+						'1 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: 'Submit'
+							}
+							]))
+					])),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Selected',
+					_Utils_Tuple2(
+						'Third',
+						$elm$core$Maybe$Just(2)),
+					_List_fromArray(
+						[
+							_Utils_Tuple2(
+							'Second',
+							$elm$core$Maybe$Just(1)),
+							_Utils_Tuple2(
+							'First',
+							$elm$core$Maybe$Just(0)),
+							_Utils_Tuple2('Nothing or Invalid', $elm$core$Maybe$Nothing)
+						])),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('Contained', $author$project$Widget$Material$containedButton),
+						_List_fromArray(
+							[
+								_Utils_Tuple2('Outlined', $author$project$Widget$Material$outlinedButton),
+								_Utils_Tuple2('Text', $author$project$Widget$Material$textButton),
+								_Utils_Tuple2('Chip', $author$project$Widget$Material$chip),
+								_Utils_Tuple2('IconButton', $author$project$Widget$Material$iconButton),
+								_Utils_Tuple2('Toggle', $author$project$Widget$Material$toggleButton)
+							])),
 					A2(
-						$author$project$Widget$circularProgressIndicator,
-						style.progressIndicator,
-						$elm$core$Maybe$Just(completeness)));
+						$author$project$UIExplorer$Story$book,
+						$elm$core$Maybe$Just('Options'),
+						$author$project$Page$Select$viewFunctions))))));
+var $author$project$Page$Select$Selected = function (a) {
+	return {$: 'Selected', a: a};
+};
+var $author$project$Page$Select$init = _Utils_Tuple2(
+	$author$project$Page$Select$Selected($elm$core$Maybe$Nothing),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$Select$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Select$update = F2(
+	function (msg, _v0) {
+		var _int = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Page$Select$Selected(
+				$elm$core$Maybe$Just(_int)),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Page$Select$ChangedSelected = function (a) {
+	return {$: 'ChangedSelected', a: a};
+};
+var $author$project$Widget$Material$buttonRow = $author$project$Internal$Material$List$toggleRow;
+var $author$project$Page$Select$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var selected = _v1.a;
+		return A2(
+			$author$project$Widget$buttonRow,
+			{
+				content: $author$project$Widget$Material$toggleButton(palette),
+				elementRow: $author$project$Widget$Material$buttonRow
 			},
-			_List_fromArray(
-				[0, 0.25, 0.5, 0.75, 1]));
-		return _Utils_ap(
+			$author$project$Widget$select(
+				{
+					onSelect: A2($elm$core$Basics$composeR, $author$project$Page$Select$ChangedSelected, $elm$core$Maybe$Just),
+					options: A2(
+						$elm$core$List$map,
+						function (_int) {
+							return {
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: $elm$core$String$fromInt(_int)
+							};
+						},
+						_List_fromArray(
+							[1, 2, 42])),
+					selected: selected
+				}));
+	});
+var $author$project$Page$Select$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Select$init),
+	subscriptions: $author$project$Page$Select$subscriptions,
+	update: $author$project$Page$Select$update,
+	view: $author$project$Page$demo($author$project$Page$Select$view)
+};
+var $author$project$Page$Select$description = 'Select buttons group a set of actions using layout and spacing.';
+var $author$project$Page$Select$title = 'Select';
+var $author$project$Page$Select$page = $author$project$Page$create(
+	{book: $author$project$Page$Select$book, demo: $author$project$Page$Select$demo, description: $author$project$Page$Select$description, title: $author$project$Page$Select$title});
+var $author$project$Page$Snackbar$viewFunctions = function () {
+	var viewSnackbar = F5(
+		function (style, text, button, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Snackbar.view',
+				A2(
+					$elm$core$Maybe$withDefault,
+					$mdgriffith$elm_ui$Element$none,
+					A3(
+						$author$project$Widget$Snackbar$view,
+						style(palette),
+						$elm$core$Basics$identity,
+						A2(
+							$author$project$Widget$Snackbar$insert,
+							{button: button, text: text},
+							$author$project$Widget$Snackbar$init))));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewSnackbar]));
+}();
+var $author$project$Page$Snackbar$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$optionListStory,
+			'Button',
+			_Utils_Tuple2(
+				'Button with event handler',
+				$elm$core$Maybe$Just(
+					{
+						onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+						text: 'Close'
+					})),
 			_List_fromArray(
 				[
 					_Utils_Tuple2(
-					'Indeterminate Progress Indicator',
-					A2($author$project$Widget$circularProgressIndicator, style.progressIndicator, $elm$core$Maybe$Nothing))
+					'Eventless Button',
+					$elm$core$Maybe$Just(
+						{onPress: $elm$core$Maybe$Nothing, text: 'Close'})),
+					_Utils_Tuple2('None', $elm$core$Maybe$Nothing)
+				])),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A2($author$project$UIExplorer$Story$textStory, 'Text', 'This is a notification that will close after 10 seconds. Additional notifications are being queued.'),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Style',
+					_Utils_Tuple2('Snackbar', $author$project$Widget$Material$snackbar),
+					_List_Nil),
+				A2(
+					$author$project$UIExplorer$Story$book,
+					$elm$core$Maybe$Just('Options'),
+					$author$project$Page$Snackbar$viewFunctions)))));
+var $author$project$Page$Snackbar$init = _Utils_Tuple2($author$project$Widget$Snackbar$init, $elm$core$Platform$Cmd$none);
+var $author$project$Page$Snackbar$TimePassed = function (a) {
+	return {$: 'TimePassed', a: a};
+};
+var $author$project$Page$Snackbar$subscriptions = function (_v0) {
+	return A2(
+		$elm$time$Time$every,
+		50,
+		$elm$core$Basics$always(
+			$author$project$Page$Snackbar$TimePassed(50)));
+};
+var $author$project$Page$Snackbar$update = F2(
+	function (msg, model) {
+		if (msg.$ === 'TimePassed') {
+			var _int = msg.a;
+			return _Utils_Tuple2(
+				A2($author$project$Widget$Snackbar$timePassed, _int, model),
+				$elm$core$Platform$Cmd$none);
+		} else {
+			var snack = msg.a;
+			return _Utils_Tuple2(
+				A2(
+					$author$project$Widget$Snackbar$insert,
+					snack,
+					$author$project$Widget$Snackbar$dismiss(model)),
+				$elm$core$Platform$Cmd$none);
+		}
+	});
+var $author$project$Page$Snackbar$AddSnackbar = function (a) {
+	return {$: 'AddSnackbar', a: a};
+};
+var $author$project$Page$Snackbar$view = F2(
+	function (_v0, model) {
+		var palette = _v0.palette;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_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)),
+					$mdgriffith$elm_ui$Element$inFront(
+					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(8),
+										$mdgriffith$elm_ui$Element$alignBottom,
+										$mdgriffith$elm_ui$Element$alignRight
+									])),
+							A3(
+								$author$project$Widget$Snackbar$view,
+								$author$project$Widget$Material$snackbar(palette),
+								function (_v1) {
+									var text = _v1.a;
+									var hasButton = _v1.b;
+									return {
+										button: hasButton ? $elm$core$Maybe$Just(
+											{
+												onPress: $elm$core$Maybe$Just(
+													$author$project$Page$Snackbar$AddSnackbar(
+														_Utils_Tuple2('This is another message', false))),
+												text: 'Add'
+											}) : $elm$core$Maybe$Nothing,
+										text: text
+									};
+								},
+								model))))
 				]),
-			determinateIndicators);
-	});
-var $author$project$Widget$select = $author$project$Internal$Select$select;
-var $author$project$View$States$select = F2(
-	function (idle, style) {
-		return _List_fromArray(
-			[
-				_Utils_Tuple2(
-				'First selected',
-				A2(
-					$author$project$Widget$buttonRow,
-					{content: style.selectButton, elementRow: 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: $elm$core$Basics$always($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,
-					{content: style.selectButton, elementRow: 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: $elm$core$Basics$always($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,
-					{content: style.selectButton, elementRow: 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: $elm$core$Basics$always($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,
-					{content: style.selectButton, elementRow: 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: $elm$core$Basics$always($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,
-					{content: style.selectButton, elementRow: 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: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-										text: $elm$core$String$fromInt(_int)
-									};
-								},
-								_List_Nil),
-							selected: $elm$core$Maybe$Nothing
-						})))
-			]);
-	});
-var $author$project$View$States$sheet = F2(
-	function (_v0, style) {
-		return _List_Nil;
-	});
-var $author$project$View$States$snackbar = F2(
-	function (_v0, style) {
-		return _List_Nil;
+			A2(
+				$author$project$Widget$column,
+				$author$project$Widget$Material$column,
+				_List_fromArray(
+					[
+						A2(
+						$author$project$Widget$button,
+						$author$project$Widget$Material$containedButton(palette),
+						{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							onPress: $elm$core$Maybe$Just(
+								$author$project$Page$Snackbar$AddSnackbar(
+									_Utils_Tuple2('This is a notification. It will disappear after 10 seconds.', false))),
+							text: 'Add Notification'
+						}),
+						A2(
+						$author$project$Widget$button,
+						$author$project$Widget$Material$containedButton(palette),
+						{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							onPress: $elm$core$Maybe$Just(
+								$author$project$Page$Snackbar$AddSnackbar(
+									_Utils_Tuple2('You can add another notification if you want.', true))),
+							text: 'Add Notification with Action'
+						})
+					])));
 	});
+var $author$project$Page$Snackbar$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Snackbar$init),
+	subscriptions: $author$project$Page$Snackbar$subscriptions,
+	update: $author$project$Page$Snackbar$update,
+	view: $author$project$Page$demo($author$project$Page$Snackbar$view)
+};
+var $author$project$Page$Snackbar$description = 'Buttons allow users to take actions, and make choices, with a single tap.';
+var $author$project$Page$Snackbar$title = 'Button';
+var $author$project$Page$Snackbar$page = $author$project$Page$create(
+	{book: $author$project$Page$Snackbar$book, demo: $author$project$Page$Snackbar$demo, description: $author$project$Page$Snackbar$description, title: $author$project$Page$Snackbar$title});
 var $author$project$Internal$SortTable$Column = function (a) {
 	return {$: 'Column', a: a};
 };
@@ -20075,6 +25588,59 @@ var $author$project$Internal$SortTable$intColumn = function (_v0) {
 		});
 };
 var $author$project$Widget$intColumn = $author$project$Internal$SortTable$intColumn;
+var $author$project$Internal$Material$SortTable$sortTable = function (palette) {
+	return {
+		content: {
+			ascIcon: $author$project$Internal$Material$Icon$expand_less,
+			defaultIcon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+			descIcon: $author$project$Internal$Material$Icon$expand_more,
+			header: $author$project$Internal$Material$Button$textButton(palette)
+		},
+		elementTable: _List_Nil
+	};
+};
+var $author$project$Widget$Material$sortTable = $author$project$Internal$Material$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 $elm$core$Maybe$andThen = F2(
+	function (callback, maybeValue) {
+		if (maybeValue.$ === 'Just') {
+			var value = maybeValue.a;
+			return callback(value);
+		} else {
+			return $elm$core$Maybe$Nothing;
+		}
+	});
 var $mdgriffith$elm_ui$Element$InternalColumn = function (a) {
 	return {$: 'InternalColumn', a: a};
 };
@@ -20093,56 +25659,8 @@ var $elm$core$List$all = F2(
 	});
 var $mdgriffith$elm_ui$Internal$Model$AsGrid = {$: 'AsGrid'};
 var $mdgriffith$elm_ui$Internal$Model$asGrid = $mdgriffith$elm_ui$Internal$Model$AsGrid;
-var $mdgriffith$elm_ui$Internal$Model$getSpacing = F2(
-	function (attrs, _default) {
-		return A2(
-			$elm$core$Maybe$withDefault,
-			_default,
-			A3(
-				$elm$core$List$foldr,
-				F2(
-					function (attr, acc) {
-						if (acc.$ === 'Just') {
-							var x = acc.a;
-							return $elm$core$Maybe$Just(x);
-						} else {
-							if ((attr.$ === 'StyleClass') && (attr.b.$ === 'SpacingStyle')) {
-								var _v2 = attr.b;
-								var x = _v2.b;
-								var y = _v2.c;
-								return $elm$core$Maybe$Just(
-									_Utils_Tuple2(x, y));
-							} else {
-								return $elm$core$Maybe$Nothing;
-							}
-						}
-					}),
-				$elm$core$Maybe$Nothing,
-				attrs));
-	});
 var $mdgriffith$elm_ui$Internal$Flag$gridPosition = $mdgriffith$elm_ui$Internal$Flag$flag(35);
 var $mdgriffith$elm_ui$Internal$Flag$gridTemplate = $mdgriffith$elm_ui$Internal$Flag$flag(34);
-var $elm$core$List$repeatHelp = F3(
-	function (result, n, value) {
-		repeatHelp:
-		while (true) {
-			if (n <= 0) {
-				return result;
-			} else {
-				var $temp$result = A2($elm$core$List$cons, value, result),
-					$temp$n = n - 1,
-					$temp$value = value;
-				result = $temp$result;
-				n = $temp$n;
-				value = $temp$value;
-				continue repeatHelp;
-			}
-		}
-	});
-var $elm$core$List$repeat = F2(
-	function (n, value) {
-		return A3($elm$core$List$repeatHelp, _List_Nil, n, value);
-	});
 var $mdgriffith$elm_ui$Element$tableHelper = F2(
 	function (attrs, config) {
 		var onGrid = F3(
@@ -20409,50 +25927,60 @@ var $author$project$Widget$sortTable = function () {
 	var fun = $author$project$Internal$SortTable$sortTable;
 	return fun;
 }();
-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$States$sortTable = F2(
-	function (idle, style) {
-		return _List_fromArray(
-			[
-				_Utils_Tuple2(
-				'Int column',
+var $author$project$Page$SortTable$viewFunctions = function () {
+	var viewTable = F7(
+		function (style, content, columns, asc, sortBy, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.sortTable',
 				A2(
 					$author$project$Widget$sortTable,
-					style.sortTable,
+					style(palette),
 					{
-						asc: true,
-						columns: _List_fromArray(
+						asc: asc,
+						columns: columns,
+						content: content,
+						onChange: $elm$core$Basics$always(_Utils_Tuple0),
+						sortBy: sortBy
+					}));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewTable]));
+}();
+var $author$project$Page$SortTable$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$optionListStory,
+			'Sort by',
+			_Utils_Tuple2('Id', 'Id'),
+			_List_fromArray(
+				[
+					_Utils_Tuple2('Name', 'Name'),
+					_Utils_Tuple2('Rating', 'Rating'),
+					_Utils_Tuple2('Hash', 'Hash'),
+					_Utils_Tuple2('None', '')
+				])),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'Sort ascendingly',
+				_Utils_Tuple2(true, false),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Columns',
+					_Utils_Tuple2(
+						'4 Columns',
+						_List_fromArray(
 							[
 								$author$project$Widget$intColumn(
 								{
@@ -20465,38 +25993,6 @@ var $author$project$View$States$sortTable = F2(
 									},
 									width: $mdgriffith$elm_ui$Element$fill
 								}),
-								$author$project$Widget$stringColumn(
-								{
-									title: 'Name',
-									toString: $elm$core$Basics$identity,
-									value: function ($) {
-										return $.name;
-									},
-									width: $mdgriffith$elm_ui$Element$fill
-								})
-							]),
-						content: _List_fromArray(
-							[
-								{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
-								{
-								hash: $elm$core$Maybe$Just('45jf'),
-								id: 2,
-								name: 'Ana',
-								rating: 1.34
-							}
-							]),
-						onChange: $elm$core$Basics$always(idle),
-						sortBy: 'Id'
-					})),
-				_Utils_Tuple2(
-				'Name column',
-				A2(
-					$author$project$Widget$sortTable,
-					style.sortTable,
-					{
-						asc: true,
-						columns: _List_fromArray(
-							[
 								$author$project$Widget$stringColumn(
 								{
 									title: 'Name',
@@ -20506,38 +26002,6 @@ var $author$project$View$States$sortTable = F2(
 									},
 									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',
@@ -20558,2621 +26022,96 @@ var $author$project$View$States$sortTable = F2(
 										$elm$core$Maybe$withDefault('None')),
 									width: $mdgriffith$elm_ui$Element$fill
 								})
-							]),
-						content: _List_fromArray(
-							[
-								{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
-								{
-								hash: $elm$core$Maybe$Just('45jf'),
-								id: 2,
-								name: 'Ana',
-								rating: 1.34
-							}
-							]),
-						onChange: $elm$core$Basics$always(idle),
-						sortBy: 'Rating'
-					})),
-				_Utils_Tuple2(
-				'Unsortable column',
-				A2(
-					$author$project$Widget$sortTable,
-					style.sortTable,
-					{
-						asc: true,
-						columns: _List_fromArray(
-							[
-								$author$project$Widget$floatColumn(
-								{
-									title: 'Rating',
-									toString: $elm$core$String$fromFloat,
-									value: function ($) {
-										return $.rating;
-									},
-									width: $mdgriffith$elm_ui$Element$fill
-								}),
-								$author$project$Widget$unsortableColumn(
-								{
-									title: 'Hash',
-									toString: A2(
-										$elm$core$Basics$composeR,
-										function ($) {
-											return $.hash;
-										},
-										$elm$core$Maybe$withDefault('None')),
-									width: $mdgriffith$elm_ui$Element$fill
-								})
-							]),
-						content: _List_fromArray(
-							[
-								{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
-								{
-								hash: $elm$core$Maybe$Just('45jf'),
-								id: 2,
-								name: 'Ana',
-								rating: 1.34
-							}
-							]),
-						onChange: $elm$core$Basics$always(idle),
-						sortBy: 'Hash'
-					})),
-				_Utils_Tuple2(
-				'Empty Table',
-				A2(
-					$author$project$Widget$sortTable,
-					style.sortTable,
-					{
-						asc: true,
-						columns: _List_Nil,
-						content: _List_fromArray(
-							[
-								{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
-								{
-								hash: $elm$core$Maybe$Just('45jf'),
-								id: 2,
-								name: 'Ana',
-								rating: 1.34
-							}
-							]),
-						onChange: $elm$core$Basics$always(idle),
-						sortBy: ''
-					}))
-			]);
-	});
-var $author$project$Internal$Switch$switch = F2(
-	function (style, _v0) {
-		var onPress = _v0.onPress;
-		var description = _v0.description;
-		var active = _v0.active;
-		return A2(
-			$mdgriffith$elm_ui$Element$Input$button,
-			_Utils_ap(
-				style.elementButton,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Region$description(description),
-						$mdgriffith$elm_ui$Element$inFront(
-						A2(
-							$mdgriffith$elm_ui$Element$el,
-							_Utils_ap(
-								style.contentInFront.element,
-								active ? style.contentInFront.ifActive : (_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.contentInFront.ifDisabled : style.contentInFront.otherwise)),
-							A2(
-								$mdgriffith$elm_ui$Element$el,
-								_Utils_ap(
-									style.contentInFront.content.element,
-									active ? style.contentInFront.content.ifActive : (_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.contentInFront.content.ifDisabled : style.contentInFront.content.otherwise)),
-								$mdgriffith$elm_ui$Element$none)))
-					])),
-			{
-				label: A2(
-					$mdgriffith$elm_ui$Element$el,
-					_Utils_ap(
-						style.content.element,
-						active ? style.content.ifActive : (_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.content.ifDisabled : style.content.otherwise)),
-					$mdgriffith$elm_ui$Element$none),
-				onPress: onPress
-			});
-	});
-var $author$project$Widget$switch = function () {
-	var fun = $author$project$Internal$Switch$switch;
-	return fun;
-}();
-var $author$project$View$States$switch = F2(
-	function (idle, style) {
-		return _List_fromArray(
-			[
-				_Utils_Tuple2(
-				'Disabled switch',
-				A2(
-					$author$project$Widget$switch,
-					style._switch,
-					{active: false, description: 'Disabled switch', onPress: $elm$core$Maybe$Nothing})),
-				_Utils_Tuple2(
-				'Inactive Select switch',
-				A2(
-					$author$project$Widget$switch,
-					style._switch,
-					{
-						active: false,
-						description: 'Inactive Select switch',
-						onPress: $elm$core$Maybe$Just(idle)
-					})),
-				_Utils_Tuple2(
-				'Active Select switch',
-				A2(
-					$author$project$Widget$switch,
-					style._switch,
-					{
-						active: true,
-						description: 'Active Select switch',
-						onPress: $elm$core$Maybe$Just(idle)
-					}))
-			]);
-	});
-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.elementColumn,
-			_List_fromArray(
-				[
-					A2(
-					$mdgriffith$elm_ui$Element$row,
-					style.content.tabs.elementRow,
-					A2(
-						$elm$core$List$map,
-						$author$project$Internal$Select$selectButton(style.content.tabs.content),
-						$author$project$Internal$Select$select(tabs))),
-					A2(
-					$mdgriffith$elm_ui$Element$el,
-					style.content.content,
-					content(tabs.selected))
-				]));
-	});
-var $author$project$Widget$tab = function () {
-	var fun = $author$project$Internal$Tab$tab;
-	return fun;
-}();
-var $author$project$View$States$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: $elm$core$Basics$always($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: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-										text: $elm$core$String$fromInt(_int)
-									};
-								},
-								_List_fromArray(
-									[1, 2, 3])),
-							selected: $elm$core$Maybe$Just(0)
-						}
-					}))
-			]);
-	});
-var $feathericons$elm_feather$FeatherIcons$circle = A2(
-	$feathericons$elm_feather$FeatherIcons$makeBuilder,
-	'circle',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$circle,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$cx('12'),
-					$elm$svg$Svg$Attributes$cy('12'),
-					$elm$svg$Svg$Attributes$r('10')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Widget$textInput = function () {
-	var fun = $author$project$Internal$TextInput$textInput;
-	return fun;
-}();
-var $author$project$View$States$textInput = F2(
-	function (idle, style) {
-		return _List_fromArray(
-			[
-				_Utils_Tuple2(
-				'Nothing Selected',
-				A2(
-					$author$project$Widget$textInput,
-					style.textInput,
-					{
-						chips: _List_Nil,
-						label: 'Label',
-						onChange: $elm$core$Basics$always(idle),
-						placeholder: $elm$core$Maybe$Nothing,
-						text: ''
-					})),
-				_Utils_Tuple2(
-				'Some chips',
-				A2(
-					$author$project$Widget$textInput,
-					style.textInput,
-					{
-						chips: _List_fromArray(
-							[
-								{
-								icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$triangle),
-								onPress: $elm$core$Maybe$Just(idle),
-								text: 'A'
-							},
-								{
-								icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$circle),
-								onPress: $elm$core$Maybe$Just(idle),
-								text: 'B'
-							}
-							]),
-						label: 'Label',
-						onChange: $elm$core$Basics$always(idle),
-						placeholder: $elm$core$Maybe$Nothing,
-						text: ''
-					}))
-			]);
-	});
-var $author$project$Data$Example$toTests = function (example) {
-	switch (example.$) {
-		case 'ButtonExample':
-			return $author$project$View$States$button;
-		case 'SwitchExample':
-			return $author$project$View$States$switch;
-		case 'SelectExample':
-			return $author$project$View$States$select;
-		case 'MultiSelectExample':
-			return $author$project$View$States$multiSelect;
-		case 'TabExample':
-			return $author$project$View$States$tab;
-		case 'SortTableExample':
-			return $author$project$View$States$sortTable;
-		case 'ModalExample':
-			return $author$project$View$States$modal;
-		case 'DialogExample':
-			return $author$project$View$States$dialog;
-		case 'TextInputExample':
-			return $author$project$View$States$textInput;
-		case 'ListExample':
-			return $author$project$View$States$list;
-		case 'ProgressIndicatorExample':
-			return $author$project$View$States$progressIndicator;
-		case 'IconExample':
-			return $author$project$View$States$icon;
-		case 'SheetExample':
-			return $author$project$View$States$sheet;
-		case 'AppBarExample':
-			return $author$project$View$States$appBar;
-		case 'LayoutExample':
-			return $author$project$View$States$layout;
-		default:
-			return $author$project$View$States$snackbar;
-	}
-};
-var $icidasset$elm_material_icons$Material$Icons$Types$Color = function (a) {
-	return {$: 'Color', a: a};
-};
-var $author$project$Example$AppBar$SetDesign = function (a) {
-	return {$: 'SetDesign', a: a};
-};
-var $author$project$Example$AppBar$SetSearch = function (a) {
-	return {$: 'SetSearch', a: a};
-};
-var $author$project$Example$AppBar$SetSelected = function (a) {
-	return {$: 'SetSelected', a: a};
-};
-var $icidasset$elm_material_icons$Material$Icons$Internal$icon = F4(
-	function (attributes, nodes, size, coloring) {
-		var sizeAsString = $elm$core$String$fromInt(size);
-		return A2(
-			$elm$svg$Svg$svg,
-			_Utils_ap(
-				attributes,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$height(sizeAsString),
-						$elm$svg$Svg$Attributes$width(sizeAsString)
-					])),
-			_List_fromArray(
-				[
-					A2(
-					$elm$svg$Svg$g,
+							])),
 					_List_fromArray(
 						[
-							function () {
-							if (coloring.$ === 'Color') {
-								var color = coloring.a;
-								return $elm$svg$Svg$Attributes$fill(
-									$avh4$elm_color$Color$toCssString(color));
-							} else {
-								return $elm$svg$Svg$Attributes$fill('currentColor');
-							}
-						}()
-						]),
-					nodes)
-				]));
-	});
-var $icidasset$elm_material_icons$Material$Icons$change_history = A2(
-	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
-	_List_fromArray(
-		[
-			$elm$svg$Svg$Attributes$viewBox('0 0 24 24')
-		]),
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M0 0h24v24H0V0z'),
-					$elm$svg$Svg$Attributes$fill('none')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Widget$Icon$elmMaterialIcons = F2(
-	function (wrapper, fun) {
-		return function (_v0) {
-			var size = _v0.size;
-			var color = _v0.color;
-			return A2(
-				$mdgriffith$elm_ui$Element$el,
-				_List_Nil,
-				$mdgriffith$elm_ui$Element$html(
-					A2(
-						fun,
-						size,
-						wrapper(color))));
-		};
-	});
-var $author$project$Example$AppBar$view = F3(
-	function (msgMapper, style, model) {
-		var search = {
-			chips: _List_Nil,
-			label: 'Search',
-			onChange: A2($elm$core$Basics$composeR, $author$project$Example$AppBar$SetSearch, msgMapper),
-			placeholder: $elm$core$Maybe$Nothing,
-			text: model.search
-		};
-		var primaryActions = _List_fromArray(
-			[
-				{
-				icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$change_history),
-				onPress: $elm$core$Maybe$Just(
-					msgMapper(
-						$author$project$Example$AppBar$SetDesign(!model.isMenuBar))),
-				text: 'Action'
-			}
-			]);
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width(
-					A2($mdgriffith$elm_ui$Element$minimum, 400, $mdgriffith$elm_ui$Element$fill))
-				]),
-			model.isMenuBar ? A2(
-				$author$project$Widget$menuBar,
-				style.menuBar,
-				{
-					deviceClass: $mdgriffith$elm_ui$Element$Tablet,
-					openLeftSheet: $elm$core$Maybe$Just(
-						msgMapper(
-							$author$project$Example$AppBar$SetDesign(!model.isMenuBar))),
-					openRightSheet: $elm$core$Maybe$Just(
-						msgMapper(
-							$author$project$Example$AppBar$SetDesign(!model.isMenuBar))),
-					openTopSheet: $elm$core$Maybe$Just(
-						msgMapper(
-							$author$project$Example$AppBar$SetDesign(!model.isMenuBar))),
-					primaryActions: primaryActions,
-					search: $elm$core$Maybe$Just(search),
-					title: A2(
-						$mdgriffith$elm_ui$Element$el,
-						$author$project$Widget$Material$Typography$h6,
-						$mdgriffith$elm_ui$Element$text('Title'))
-				}) : A2(
-				$author$project$Widget$tabBar,
-				style.tabBar,
-				{
-					deviceClass: $mdgriffith$elm_ui$Element$Phone,
-					menu: {
-						onSelect: A2(
-							$elm$core$Basics$composeR,
-							$author$project$Example$AppBar$SetSelected,
-							A2($elm$core$Basics$composeR, msgMapper, $elm$core$Maybe$Just)),
-						options: A2(
-							$elm$core$List$map,
-							function (string) {
-								return {
-									icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-									text: string
-								};
-							},
+							_Utils_Tuple2(
+							'1 Column',
 							_List_fromArray(
-								['Home', 'About'])),
-						selected: $elm$core$Maybe$Just(model.selected)
-					},
-					openRightSheet: $elm$core$Maybe$Just(
-						msgMapper(
-							$author$project$Example$AppBar$SetDesign(!model.isMenuBar))),
-					openTopSheet: $elm$core$Maybe$Just(
-						msgMapper(
-							$author$project$Example$AppBar$SetDesign(!model.isMenuBar))),
-					primaryActions: primaryActions,
-					search: $elm$core$Maybe$Just(search),
-					title: A2(
-						$mdgriffith$elm_ui$Element$el,
-						$author$project$Widget$Material$Typography$h6,
-						$mdgriffith$elm_ui$Element$text('Title'))
-				}));
-	});
-var $author$project$Example$Button$Decrease = function (a) {
-	return {$: 'Decrease', a: a};
-};
-var $author$project$Example$Button$Increase = function (a) {
-	return {$: 'Increase', a: a};
-};
-var $author$project$Example$Button$Reset = {$: 'Reset'};
-var $icidasset$elm_material_icons$Material$Icons$add = A2(
-	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
-	_List_fromArray(
-		[
-			$elm$svg$Svg$Attributes$viewBox('0 0 24 24')
-		]),
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M0 0h24v24H0z'),
-					$elm$svg$Svg$Attributes$fill('none')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z')
-				]),
-			_List_Nil)
-		]));
-var $icidasset$elm_material_icons$Material$Icons$exposure_plus_2 = A2(
-	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
-	_List_fromArray(
-		[
-			$elm$svg$Svg$Attributes$viewBox('0 0 24 24')
-		]),
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M0 0h24v24H0zm0 0h24v24H0z'),
-					$elm$svg$Svg$Attributes$fill('none')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M16.05 16.29l2.86-3.07c.38-.39.72-.79 1.04-1.18.32-.39.59-.78.82-1.17.23-.39.41-.78.54-1.17.13-.39.19-.79.19-1.18 0-.53-.09-1.02-.27-1.46-.18-.44-.44-.81-.78-1.11-.34-.31-.77-.54-1.26-.71-.51-.16-1.08-.24-1.72-.24-.69 0-1.31.11-1.85.32-.54.21-1 .51-1.36.88-.37.37-.65.8-.84 1.3-.18.47-.27.97-.28 1.5h2.14c.01-.31.05-.6.13-.87.09-.29.23-.54.4-.75.18-.21.41-.37.68-.49.27-.12.6-.18.96-.18.31 0 .58.05.81.15.23.1.43.25.59.43.16.18.28.4.37.65.08.25.13.52.13.81 0 .22-.03.43-.08.65-.06.22-.15.45-.29.7-.14.25-.32.53-.56.83-.23.3-.52.65-.88 1.03l-4.17 4.55V18H22v-1.71h-5.95zM8 7H6v4H2v2h4v4h2v-4h4v-2H8V7z')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Widget$Material$Typography$h4 = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Font$size(34),
-		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.25)
-	]);
-var $icidasset$elm_material_icons$Material$Icons$remove = A2(
-	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
-	_List_fromArray(
-		[
-			$elm$svg$Svg$Attributes$viewBox('0 0 24 24')
-		]),
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M0 0h24v24H0z'),
-					$elm$svg$Svg$Attributes$fill('none')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M19 13H5v-2h14v2z')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Example$Button$view = F3(
-	function (msgMapper, style, model) {
-		return A2(
-			$author$project$Widget$column,
-			A2(
-				$author$project$Widget$Customize$mapContent,
-				$author$project$Widget$Customize$element(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+								[
+									$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
+									})
+								])),
+							_Utils_Tuple2('None', _List_Nil)
 						])),
 				A2(
-					$author$project$Widget$Customize$elementColumn,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-						]),
-					style.column)),
-			_List_fromArray(
-				[
-					A2(
-					$author$project$Widget$column,
-					A2(
-						$author$project$Widget$Customize$mapContent,
-						$author$project$Widget$Customize$element(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Content',
+						_Utils_Tuple2(
+							'Data',
 							_List_fromArray(
 								[
-									$mdgriffith$elm_ui$Element$width(
-									$mdgriffith$elm_ui$Element$px(128)),
-									$mdgriffith$elm_ui$Element$height(
-									$mdgriffith$elm_ui$Element$px(128)),
-									$mdgriffith$elm_ui$Element$Background$color(
-									$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$defaultPalette.secondary))
-								])),
-						A2(
-							$author$project$Widget$Customize$elementColumn,
-							_List_fromArray(
-								[
-									$mdgriffith$elm_ui$Element$centerX,
-									$mdgriffith$elm_ui$Element$width(
-									$mdgriffith$elm_ui$Element$px(128)),
-									$mdgriffith$elm_ui$Element$height(
-									$mdgriffith$elm_ui$Element$px(128)),
-									$mdgriffith$elm_ui$Element$inFront(
-									A2(
-										$mdgriffith$elm_ui$Element$el,
-										_List_fromArray(
-											[$mdgriffith$elm_ui$Element$alignRight]),
-										A2(
-											$author$project$Widget$iconButton,
-											style.iconButton,
-											{
-												icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$exposure_plus_2),
-												onPress: $elm$core$Maybe$Just(
-													msgMapper(
-														$author$project$Example$Button$Increase(2))),
-												text: '+2'
-											})))
-								]),
-							style.cardColumn)),
-					$elm$core$List$singleton(
-						A2(
-							$mdgriffith$elm_ui$Element$el,
-							_Utils_ap(
-								$author$project$Widget$Material$Typography$h4,
-								_List_fromArray(
-									[$mdgriffith$elm_ui$Element$centerX, $mdgriffith$elm_ui$Element$centerY])),
-							$mdgriffith$elm_ui$Element$text(
-								$elm$core$String$fromInt(model))))),
-					A2(
-					$author$project$Widget$row,
-					A2(
-						$author$project$Widget$Customize$mapContent,
-						$author$project$Widget$Customize$element(
-							_List_fromArray(
-								[
-									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-								])),
-						A2(
-							$author$project$Widget$Customize$elementRow,
-							_List_fromArray(
-								[
-									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-								]),
-							style.row)),
-					_List_fromArray(
-						[
-							A2(
-							$author$project$Widget$row,
-							A2(
-								$author$project$Widget$Customize$elementRow,
-								_List_fromArray(
-									[$mdgriffith$elm_ui$Element$alignRight]),
-								style.row),
-							_List_fromArray(
-								[
-									A2(
-									$author$project$Widget$textButton,
-									style.textButton,
+									{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
 									{
-										onPress: $elm$core$Maybe$Just(
-											msgMapper($author$project$Example$Button$Reset)),
-										text: 'Reset'
-									}),
-									A2(
-									$author$project$Widget$button,
-									style.outlinedButton,
+									hash: $elm$core$Maybe$Just('45jf'),
+									id: 2,
+									name: 'Ana',
+									rating: 1.34
+								},
 									{
-										icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$remove),
-										onPress: (model > 0) ? $elm$core$Maybe$Just(
-											msgMapper(
-												$author$project$Example$Button$Decrease(1))) : $elm$core$Maybe$Nothing,
-										text: 'Decrease'
-									})
-								])),
-							A2(
-							$author$project$Widget$row,
-							A2(
-								$author$project$Widget$Customize$elementRow,
-								_List_fromArray(
-									[$mdgriffith$elm_ui$Element$alignLeft]),
-								style.row),
-							_List_fromArray(
-								[
-									A2(
-									$author$project$Widget$button,
-									style.containedButton,
+									hash: $elm$core$Maybe$Just('6fs1'),
+									id: 3,
+									name: 'Alfred',
+									rating: 4.22
+								},
 									{
-										icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$add),
-										onPress: $elm$core$Maybe$Just(
-											msgMapper(
-												$author$project$Example$Button$Increase(1))),
-										text: 'Increase'
-									})
-								]))
-						]))
-				]));
-	});
-var $author$project$Example$Dialog$OpenDialog = function (a) {
-	return {$: 'OpenDialog', a: a};
-};
-var $author$project$Internal$Dialog$dialog = F2(
-	function (style, _v0) {
-		var title = _v0.title;
-		var text = _v0.text;
-		var accept = _v0.accept;
-		var dismiss = _v0.dismiss;
-		return {
-			content: A2(
-				$mdgriffith$elm_ui$Element$column,
-				_Utils_ap(
-					_List_fromArray(
-						[$mdgriffith$elm_ui$Element$centerX, $mdgriffith$elm_ui$Element$centerY]),
-					style.elementColumn),
-				_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.content.title.contentText)),
-							title)),
-						A2(
-						$mdgriffith$elm_ui$Element$paragraph,
-						style.content.text.contentText,
-						$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.content.buttons.elementRow),
-						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.content.buttons.content.accept, acceptButton));
-								} else {
-									var acceptButton = _v1.a.a;
-									var dismissButton = _v1.b.a;
-									return _List_fromArray(
-										[
-											A2($author$project$Internal$Button$textButton, style.content.buttons.content.dismiss, dismissButton),
-											A2($author$project$Internal$Button$textButton, style.content.buttons.content.accept, acceptButton)
-										]);
+									hash: $elm$core$Maybe$Just('k52f'),
+									id: 4,
+									name: 'Thomas',
+									rating: 3
 								}
-							} else {
-								return _List_Nil;
-							}
-						}())
-					])),
-			onDismiss: function () {
-				var _v3 = _Utils_Tuple2(accept, dismiss);
-				if (_v3.a.$ === 'Nothing') {
-					if (_v3.b.$ === 'Nothing') {
-						var _v4 = _v3.a;
-						var _v5 = _v3.b;
-						return $elm$core$Maybe$Nothing;
-					} else {
-						var _v6 = _v3.a;
-						var onPress = _v3.b.a.onPress;
-						return onPress;
-					}
-				} else {
-					return $elm$core$Maybe$Nothing;
-				}
-			}()
-		};
-	});
-var $author$project$Widget$dialog = function () {
-	var fun = $author$project$Internal$Dialog$dialog;
-	return fun;
-}();
-var $feathericons$elm_feather$FeatherIcons$eye = A2(
-	$feathericons$elm_feather$FeatherIcons$makeBuilder,
-	'eye',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$circle,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$cx('12'),
-					$elm$svg$Svg$Attributes$cy('12'),
-					$elm$svg$Svg$Attributes$r('3')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Example$Dialog$view = F3(
-	function (msgMapper, style, _v0) {
-		var isOpen = _v0.a;
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			_Utils_ap(
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height(
-						A2($mdgriffith$elm_ui$Element$minimum, 200, $mdgriffith$elm_ui$Element$fill)),
-						$mdgriffith$elm_ui$Element$width(
-						A2($mdgriffith$elm_ui$Element$minimum, 400, $mdgriffith$elm_ui$Element$fill))
-					]),
-				isOpen ? $author$project$Widget$singleModal(
-					$elm$core$List$singleton(
-						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($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$eye),
-					onPress: $elm$core$Maybe$Just(
-						msgMapper(
-							$author$project$Example$Dialog$OpenDialog(true))),
-					text: 'Show Dialog'
-				}));
-	});
-var $author$project$Widget$Icon$antDesignIconsElm = function (fun) {
-	return function (_v0) {
-		var size = _v0.size;
-		var color = _v0.color;
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			_List_Nil,
-			$mdgriffith$elm_ui$Element$html(
-				fun(
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$width(
-							$elm$core$String$fromInt(size)),
-							$elm$svg$Svg$Attributes$height(
-							$elm$core$String$fromInt(size)),
-							$elm$svg$Svg$Attributes$fill(
-							$avh4$elm_color$Color$toCssString(color))
-						]))));
-	};
-};
-var $elm$svg$Svg$Attributes$points = _VirtualDom_attribute('points');
-var $elm$svg$Svg$polyline = $elm$svg$Svg$trustedNode('polyline');
-var $feathericons$elm_feather$FeatherIcons$check = A2(
-	$feathericons$elm_feather$FeatherIcons$makeBuilder,
-	'check',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$polyline,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$points('20 6 9 17 4 12')
-				]),
-			_List_Nil)
-		]));
-var $lattyware$elm_fontawesome$FontAwesome$Icon$Icon = F5(
-	function (prefix, name, width, height, paths) {
-		return {height: height, name: name, paths: paths, prefix: prefix, width: width};
-	});
-var $lattyware$elm_fontawesome$FontAwesome$Solid$check = A5(
-	$lattyware$elm_fontawesome$FontAwesome$Icon$Icon,
-	'fas',
-	'check',
-	512,
-	512,
-	_List_fromArray(
-		['M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z']));
-var $elm$svg$Svg$Attributes$clipRule = _VirtualDom_attribute('clip-rule');
-var $elm$svg$Svg$Attributes$fillRule = _VirtualDom_attribute('fill-rule');
-var $jasonliang_dev$elm_heroicons$Heroicons$Solid$check = function (attrs) {
-	return A2(
-		$elm$svg$Svg$svg,
-		A2(
-			$elm$core$List$cons,
-			$elm$svg$Svg$Attributes$viewBox('0 0 20 20'),
-			A2(
-				$elm$core$List$cons,
-				$elm$svg$Svg$Attributes$fill('currentColor'),
-				attrs)),
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$fillRule('evenodd'),
-						$elm$svg$Svg$Attributes$d('M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'),
-						$elm$svg$Svg$Attributes$clipRule('evenodd')
-					]),
-				_List_Nil)
-			]));
-};
-var $capitalist$elm_octicons$Octicons$checkPolygon = '12 5 4 13 0 9 1.5 7.5 4 10 10.5 3.5';
-var $elm$svg$Svg$Attributes$style = _VirtualDom_attribute('style');
-var $elm$svg$Svg$Attributes$version = _VirtualDom_attribute('version');
-var $capitalist$elm_octicons$Octicons$Internal$iconSVG = F5(
-	function (viewBox, name, options, attributes, children) {
-		var style = function () {
-			var _v2 = options.style;
-			if (_v2.$ === 'Nothing') {
-				return _List_Nil;
-			} else {
-				var s = _v2.a;
-				return _List_fromArray(
-					[s]);
-			}
-		}();
-		var margin = function () {
-			var _v1 = options.margin;
-			if (_v1.$ === 'Nothing') {
-				return _List_Nil;
-			} else {
-				var m = _v1.a;
-				return _List_fromArray(
-					['margin: ' + m]);
-			}
-		}();
-		var styles = function () {
-			var _v0 = $elm$core$List$concat(
-				_List_fromArray(
-					[style, margin]));
-			if (!_v0.b) {
-				return _List_Nil;
-			} else {
-				var lst = _v0;
-				return _List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$style(
-						A2($elm$core$String$join, ';', lst))
-					]);
-			}
-		}();
-		return A2(
-			$elm$svg$Svg$svg,
-			$elm$core$List$concat(
-				_List_fromArray(
-					[
-						_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$version('1.1'),
-							$elm$svg$Svg$Attributes$class(
-							A2($elm$core$Maybe$withDefault, 'octicon ' + name, options._class)),
-							$elm$svg$Svg$Attributes$width(
-							$elm$core$String$fromInt(options.width)),
-							$elm$svg$Svg$Attributes$height(
-							$elm$core$String$fromInt(options.height)),
-							$elm$svg$Svg$Attributes$viewBox(viewBox)
-						]),
-						attributes,
-						styles
-					])),
-			children);
-	});
-var $elm$svg$Svg$polygon = $elm$svg$Svg$trustedNode('polygon');
-var $capitalist$elm_octicons$Octicons$polygonIconWithOptions = F4(
-	function (points, viewBox, octiconName, options) {
-		return A5(
-			$capitalist$elm_octicons$Octicons$Internal$iconSVG,
-			viewBox,
-			octiconName,
-			options,
-			_List_Nil,
-			_List_fromArray(
-				[
-					A2(
-					$elm$svg$Svg$polygon,
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$points(points),
-							$elm$svg$Svg$Attributes$fillRule(options.fillRule),
-							$elm$svg$Svg$Attributes$fill(options.color)
-						]),
-					_List_Nil)
-				]));
-	});
-var $capitalist$elm_octicons$Octicons$check = A3($capitalist$elm_octicons$Octicons$polygonIconWithOptions, $capitalist$elm_octicons$Octicons$checkPolygon, '0 0 12 16', 'check');
-var $lemol$ant_design_icons_elm$Ant$Icons$Svg$CheckOutlined$viewWithAttributes = function (attributes) {
-	return A2(
-		$elm$svg$Svg$svg,
-		_Utils_ap(
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$viewBox('64 64 896 896')
-				]),
-			attributes),
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$d('M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z')
-					]),
-				_List_Nil)
-			]));
-};
-var $lemol$ant_design_icons_elm$Ant$Icons$Svg$checkOutlined = $lemol$ant_design_icons_elm$Ant$Icons$Svg$CheckOutlined$viewWithAttributes;
-var $j_panasiuk$elm_ionicons$Ionicon$Internal$toAlphaString = function (value) {
-	return A2(
-		$elm$core$String$left,
-		5,
-		$elm$core$String$fromFloat(
-			A3($elm$core$Basics$clamp, 0, 1, value)));
-};
-var $j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString = function (value) {
-	return A2(
-		$elm$core$String$left,
-		5,
-		$elm$core$String$fromFloat(
-			A3($elm$core$Basics$clamp, 0, 255, 255 * value)));
-};
-var $j_panasiuk$elm_ionicons$Ionicon$Internal$fill = function (_v0) {
-	var red = _v0.red;
-	var green = _v0.green;
-	var blue = _v0.blue;
-	var alpha = _v0.alpha;
-	var _v1 = ((0 <= alpha) && (alpha < 1)) ? _Utils_Tuple2(
-		'rgba',
-		_List_fromArray(
-			[
-				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(red),
-				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(green),
-				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(blue),
-				$j_panasiuk$elm_ionicons$Ionicon$Internal$toAlphaString(alpha)
-			])) : _Utils_Tuple2(
-		'rgb',
-		_List_fromArray(
-			[
-				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(red),
-				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(green),
-				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(blue)
-			]));
-	var colorSpace = _v1.a;
-	var values = _v1.b;
-	return colorSpace + ('(' + (A2($elm$core$String$join, ',', values) + ')'));
-};
-var $elm$svg$Svg$Attributes$enableBackground = _VirtualDom_attribute('enable-background');
-var $elm$svg$Svg$Attributes$x = _VirtualDom_attribute('x');
-var $elm$svg$Svg$Attributes$y = _VirtualDom_attribute('y');
-var $j_panasiuk$elm_ionicons$Ionicon$Internal$svg = function (size) {
-	return $elm$svg$Svg$svg(
-		_List_fromArray(
-			[
-				$elm$svg$Svg$Attributes$version('1.1'),
-				$elm$svg$Svg$Attributes$x('0px'),
-				$elm$svg$Svg$Attributes$y('0px'),
-				$elm$svg$Svg$Attributes$width(
-				$elm$core$String$fromInt(size)),
-				$elm$svg$Svg$Attributes$height(
-				$elm$core$String$fromInt(size)),
-				$elm$svg$Svg$Attributes$viewBox('0 0 512 512'),
-				$elm$svg$Svg$Attributes$enableBackground('new 0 0 512 512')
-			]));
-};
-var $j_panasiuk$elm_ionicons$Ionicon$Internal$p = F3(
-	function (d, size, color) {
-		return A2(
-			$j_panasiuk$elm_ionicons$Ionicon$Internal$svg,
-			size,
-			_List_fromArray(
-				[
-					A2(
-					$elm$svg$Svg$path,
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$d(d),
-							$elm$svg$Svg$Attributes$fill(
-							$j_panasiuk$elm_ionicons$Ionicon$Internal$fill(color))
-						]),
-					_List_Nil)
-				]));
-	});
-var $j_panasiuk$elm_ionicons$Ionicon$checkmark = $j_panasiuk$elm_ionicons$Ionicon$Internal$p('M461.6,109.6l-54.9-43.3c-1.7-1.4-3.8-2.4-6.2-2.4c-2.4,0-4.6,1-6.3,2.5L194.5,323c0,0-78.5-75.5-80.7-77.7c-2.2-2.2-5.1-5.9-9.5-5.9c-4.4,0-6.4,3.1-8.7,5.4c-1.7,1.8-29.7,31.2-43.5,45.8c-0.8,0.9-1.3,1.4-2,2.1c-1.2,1.7-2,3.6-2,5.7c0,2.2,0.8,4,2,5.7l2.8,2.6c0,0,139.3,133.8,141.6,136.1c2.3,2.3,5.1,5.2,9.2,5.2c4,0,7.3-4.3,9.2-6.2L462,121.8c1.2-1.7,2-3.6,2-5.8C464,113.5,463,111.4,461.6,109.6z');
-var $pehota$elm_zondicons$Zondicons$checkmark = function (attributes) {
-	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'),
-				attributes)),
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$d('M0 11l2-2 5 5L18 3l2 2L7 18z')
-					]),
-				_List_Nil)
-			]));
-};
-var $capitalist$elm_octicons$Octicons$color = F2(
-	function (value, options) {
-		return _Utils_update(
-			options,
-			{color: value});
-	});
-var $capitalist$elm_octicons$Octicons$defaultOptions = {_class: $elm$core$Maybe$Nothing, color: 'black', fillRule: 'evenodd', height: 16, margin: $elm$core$Maybe$Nothing, style: $elm$core$Maybe$Nothing, width: 16};
-var $icidasset$elm_material_icons$Material$Icons$done = A2(
-	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
-	_List_fromArray(
-		[
-			$elm$svg$Svg$Attributes$viewBox('0 0 24 24')
-		]),
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M0 0h24v24H0z'),
-					$elm$svg$Svg$Attributes$fill('none')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z')
-				]),
-			_List_Nil)
-		]));
-var $danmarcab$material_icons$Material$Icons$Internal$toRgbaString = function (color) {
-	var _v0 = $avh4$elm_color$Color$toRgba(color);
-	var red = _v0.red;
-	var green = _v0.green;
-	var blue = _v0.blue;
-	var alpha = _v0.alpha;
-	return 'rgba(' + ($elm$core$String$fromInt(
-		$elm$core$Basics$round(255 * red)) + (',' + ($elm$core$String$fromInt(
-		$elm$core$Basics$round(255 * green)) + (',' + ($elm$core$String$fromInt(
-		$elm$core$Basics$round(255 * blue)) + (',' + ($elm$core$String$fromFloat(alpha) + ')')))))));
-};
-var $danmarcab$material_icons$Material$Icons$Internal$icon = F4(
-	function (viewBox, children, color, size) {
-		var stringSize = $elm$core$String$fromInt(size);
-		var stringColor = $danmarcab$material_icons$Material$Icons$Internal$toRgbaString(color);
-		return A2(
-			$elm$svg$Svg$svg,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$width(stringSize),
-					$elm$svg$Svg$Attributes$height(stringSize),
-					$elm$svg$Svg$Attributes$viewBox(viewBox)
-				]),
-			_List_fromArray(
-				[
-					A2(
-					$elm$svg$Svg$g,
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$fill(stringColor)
-						]),
-					children)
-				]));
-	});
-var $danmarcab$material_icons$Material$Icons$Action$done = A2(
-	$danmarcab$material_icons$Material$Icons$Internal$icon,
-	'0 0 48 48',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M18 32.34L9.66 24l-2.83 2.83L18 38l24-24-2.83-2.83z')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Widget$Icon$elmFontawesome = F2(
-	function (fun, icon) {
-		return function (_v0) {
-			var size = _v0.size;
-			var color = _v0.color;
-			return A2(
-				$mdgriffith$elm_ui$Element$el,
-				_List_Nil,
-				$mdgriffith$elm_ui$Element$html(
-					A2(
-						$elm$svg$Svg$svg,
-						_List_fromArray(
-							[
-								$elm$svg$Svg$Attributes$width(
-								$elm$core$String$fromInt(size)),
-								$elm$svg$Svg$Attributes$height(
-								$elm$core$String$fromInt(size)),
-								$elm$svg$Svg$Attributes$stroke(
-								$avh4$elm_color$Color$toCssString(color)),
-								$elm$svg$Svg$Attributes$viewBox(
-								'0 0 ' + ($elm$core$String$fromInt(512) + (' ' + $elm$core$String$fromInt(512))))
-							]),
-						$elm$core$List$singleton(
-							fun(icon)))));
-		};
-	});
-var $author$project$Widget$Icon$elmHeroicons = function (fun) {
-	return function (_v0) {
-		var size = _v0.size;
-		var color = _v0.color;
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			_List_Nil,
-			$mdgriffith$elm_ui$Element$html(
-				fun(
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$width(
-							$elm$core$String$fromInt(size)),
-							$elm$svg$Svg$Attributes$height(
-							$elm$core$String$fromInt(size)),
-							$elm$svg$Svg$Attributes$stroke(
-							$avh4$elm_color$Color$toCssString(color))
-						]))));
-	};
-};
-var $author$project$Widget$Icon$elmIonicons = function (fun) {
-	return function (_v0) {
-		var size = _v0.size;
-		var color = _v0.color;
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			_List_Nil,
-			$mdgriffith$elm_ui$Element$html(
-				A2(
-					fun,
-					size,
-					$avh4$elm_color$Color$toRgba(color))));
-	};
-};
-var $author$project$Widget$Icon$elmOcticons = F2(
-	function (_v0, fun) {
-		var withSize = _v0.withSize;
-		var withColor = _v0.withColor;
-		var defaultOptions = _v0.defaultOptions;
-		return function (_v1) {
-			var size = _v1.size;
-			var color = _v1.color;
-			return A2(
-				$mdgriffith$elm_ui$Element$el,
-				_List_Nil,
-				$mdgriffith$elm_ui$Element$html(
-					fun(
-						A2(
-							withColor,
-							$avh4$elm_color$Color$toCssString(color),
-							A2(withSize, size, defaultOptions)))));
-		};
-	});
-var $author$project$Widget$Icon$elmZondicons = function (fun) {
-	return function (_v0) {
-		var size = _v0.size;
-		var color = _v0.color;
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			_List_Nil,
-			$mdgriffith$elm_ui$Element$html(
-				fun(
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$width(
-							$elm$core$String$fromInt(size)),
-							$elm$svg$Svg$Attributes$height(
-							$elm$core$String$fromInt(size)),
-							$elm$svg$Svg$Attributes$stroke(
-							$avh4$elm_color$Color$toCssString(color))
-						]))));
-	};
-};
-var $author$project$Widget$Icon$materialIcons = function (fun) {
-	return function (_v0) {
-		var size = _v0.size;
-		var color = _v0.color;
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			_List_Nil,
-			$mdgriffith$elm_ui$Element$html(
-				A2(
-					$elm$svg$Svg$svg,
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$width(
-							$elm$core$String$fromInt(size)),
-							$elm$svg$Svg$Attributes$height(
-							$elm$core$String$fromInt(size))
-						]),
-					$elm$core$List$singleton(
-						A2(fun, color, size)))));
-	};
-};
-var $capitalist$elm_octicons$Octicons$size = F2(
-	function (value, options) {
-		return _Utils_update(
-			options,
-			{height: value, width: value});
-	});
-var $lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath = F2(
-	function (attrs, d) {
-		return A2(
-			$elm$svg$Svg$path,
-			A2(
-				$elm$core$List$cons,
-				$elm$svg$Svg$Attributes$fill('currentColor'),
-				A2(
-					$elm$core$List$cons,
-					$elm$svg$Svg$Attributes$d(d),
-					attrs)),
-			_List_Nil);
-	});
-var $lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePaths = F2(
-	function (attrs, icon) {
-		var _v0 = icon.paths;
-		if (!_v0.b) {
-			return A2($lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath, attrs, '');
-		} else {
-			if (!_v0.b.b) {
-				var only = _v0.a;
-				return A2($lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath, attrs, only);
-			} else {
-				var secondary = _v0.a;
-				var _v1 = _v0.b;
-				var primary = _v1.a;
-				return A2(
-					$elm$svg$Svg$g,
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$class('fa-group')
-						]),
-					_List_fromArray(
-						[
-							A2(
-							$lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath,
-							A2(
-								$elm$core$List$cons,
-								$elm$svg$Svg$Attributes$class('fa-secondary'),
-								attrs),
-							secondary),
-							A2(
-							$lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath,
-							A2(
-								$elm$core$List$cons,
-								$elm$svg$Svg$Attributes$class('fa-primary'),
-								attrs),
-							primary)
-						]));
-			}
-		}
-	});
-var $lattyware$elm_fontawesome$FontAwesome$Svg$viewIcon = $lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePaths(_List_Nil);
-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;
-					if ((_Utils_cmp(r, x / 2) > -1) && (_Utils_cmp(b, y / 2) > -1)) {
-						var newTop = t - (y / 2);
-						var newRight = r - (x / 2);
-						var newLeft = l - (x / 2);
-						var newBottom = b - (y / 2);
-						return $elm$core$Maybe$Just(
-							A2(
-								$mdgriffith$elm_ui$Internal$Model$StyleClass,
-								$mdgriffith$elm_ui$Internal$Flag$padding,
-								A5(
-									$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-									A4($mdgriffith$elm_ui$Internal$Model$paddingNameFloat, newTop, newRight, newBottom, newLeft),
-									newTop,
-									newRight,
-									newBottom,
-									newLeft)));
-					} else {
-						return $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$Icon$view = F3(
-	function (msgMapper, style, _v0) {
-		return A2(
-			$mdgriffith$elm_ui$Element$column,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$spacing(10)
-				]),
-			_List_fromArray(
-				[
-					A2(
-					$mdgriffith$elm_ui$Element$paragraph,
-					_List_Nil,
-					$elm$core$List$singleton(
-						$mdgriffith$elm_ui$Element$text('Every icon package on elm-packages is supported.'))),
-					A2(
-					$mdgriffith$elm_ui$Element$wrappedRow,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$spacing(10)
-						]),
-					A2(
-						$elm$core$List$map,
-						function (_v1) {
-							var icon = _v1.a;
-							var text = _v1.b;
-							return A2(
-								$author$project$Widget$button,
-								style.primaryButton,
-								{
-									icon: icon,
-									onPress: $elm$core$Maybe$Just(
-										msgMapper(_Utils_Tuple0)),
-									text: text
-								});
-						},
-						_List_fromArray(
-							[
-								_Utils_Tuple2(
-								A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
-								'elm-material-icons'),
-								_Utils_Tuple2(
-								$author$project$Widget$Icon$materialIcons($danmarcab$material_icons$Material$Icons$Action$done),
-								'material-icons'),
-								_Utils_Tuple2(
-								A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$check),
-								'elm-feather'),
-								_Utils_Tuple2(
-								A2($author$project$Widget$Icon$elmFontawesome, $lattyware$elm_fontawesome$FontAwesome$Svg$viewIcon, $lattyware$elm_fontawesome$FontAwesome$Solid$check),
-								'elm-fontawesome'),
-								_Utils_Tuple2(
-								$author$project$Widget$Icon$elmIonicons($j_panasiuk$elm_ionicons$Ionicon$checkmark),
-								'elm-ionicons'),
-								_Utils_Tuple2(
-								A2(
-									$author$project$Widget$Icon$elmOcticons,
-									{defaultOptions: $capitalist$elm_octicons$Octicons$defaultOptions, withColor: $capitalist$elm_octicons$Octicons$color, withSize: $capitalist$elm_octicons$Octicons$size},
-									$capitalist$elm_octicons$Octicons$check),
-								'elm-octicons'),
-								_Utils_Tuple2(
-								$author$project$Widget$Icon$elmHeroicons($jasonliang_dev$elm_heroicons$Heroicons$Solid$check),
-								'elm-heroicons'),
-								_Utils_Tuple2(
-								$author$project$Widget$Icon$antDesignIconsElm($lemol$ant_design_icons_elm$Ant$Icons$Svg$checkOutlined),
-								'ant-design-icons-elm'),
-								_Utils_Tuple2(
-								$author$project$Widget$Icon$elmZondicons($pehota$elm_zondicons$Zondicons$checkmark),
-								'elm-zondicons')
-							])))
-				]));
-	});
-var $author$project$Example$Layout$AddSnackbar = {$: 'AddSnackbar'};
-var $author$project$Example$Layout$ChangedSidebar = function (a) {
-	return {$: 'ChangedSidebar', a: a};
-};
-var $author$project$Example$Layout$LeftSheet = {$: 'LeftSheet'};
-var $author$project$Example$Layout$Search = {$: 'Search'};
-var $author$project$Example$Layout$SetSearchText = function (a) {
-	return {$: 'SetSearchText', a: a};
-};
-var $author$project$Example$Layout$SetSelected = function (a) {
-	return {$: 'SetSelected', a: a};
-};
-var $author$project$Example$Layout$ShowDialog = function (a) {
-	return {$: 'ShowDialog', a: a};
-};
-var $author$project$Example$Layout$view = F3(
-	function (msgMapper, style, _v0) {
-		var snackbar = _v0.snackbar;
-		var searchText = _v0.searchText;
-		var selected = _v0.selected;
-		var showDialog = _v0.showDialog;
-		var active = _v0.active;
-		var title = A2(
-			$mdgriffith$elm_ui$Element$el,
-			_Utils_ap(
-				$author$project$Widget$Material$Typography$h6,
-				_List_fromArray(
-					[
-						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
-					])),
-			$mdgriffith$elm_ui$Element$text('Title'));
-		var snackbarElem = 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(8),
-							$mdgriffith$elm_ui$Element$alignBottom,
-							$mdgriffith$elm_ui$Element$alignRight
-						])),
-				A3(
-					$author$project$Widget$Snackbar$view,
-					style.snackbar,
-					function (text) {
-						return {button: $elm$core$Maybe$Nothing, text: text};
-					},
-					snackbar)));
-		var search = {
-			chips: _List_Nil,
-			label: 'Search',
-			onChange: A2($elm$core$Basics$composeR, $author$project$Example$Layout$SetSearchText, msgMapper),
-			placeholder: $elm$core$Maybe$Nothing,
-			text: searchText
-		};
-		var onDismiss = msgMapper(
-			$author$project$Example$Layout$ChangedSidebar($elm$core$Maybe$Nothing));
-		var onChangedSidebar = $author$project$Example$Layout$ChangedSidebar;
-		var menu = {
-			onSelect: A2(
-				$elm$core$Basics$composeR,
-				$author$project$Example$Layout$SetSelected,
-				A2($elm$core$Basics$composeR, msgMapper, $elm$core$Maybe$Just)),
-			options: A2(
-				$elm$core$List$map,
-				function (string) {
-					return {
-						icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-						text: string
-					};
-				},
-				_List_fromArray(
-					['Home', 'About'])),
-			selected: $elm$core$Maybe$Just(selected)
-		};
-		var dialog = showDialog ? $elm$core$Maybe$Just(
-			A2(
-				$author$project$Widget$dialog,
-				style.dialog,
-				{
-					accept: $elm$core$Maybe$Nothing,
-					dismiss: $elm$core$Maybe$Just(
-						{
-							onPress: $elm$core$Maybe$Just(
-								msgMapper(
-									$author$project$Example$Layout$ShowDialog(false))),
-							text: 'Accept'
-						}),
-					text: 'This is a dialog window',
-					title: $elm$core$Maybe$Just('Dialog')
-				})) : $elm$core$Maybe$Nothing;
-		var deviceClass = $mdgriffith$elm_ui$Element$Phone;
-		var actions = A2(
-			$elm$core$List$repeat,
-			5,
-			{
-				icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$change_history),
-				onPress: $elm$core$Maybe$Nothing,
-				text: 'Action'
-			});
-		var _v1 = $author$project$Widget$Layout$partitionActions(actions);
-		var primaryActions = _v1.primaryActions;
-		var moreActions = _v1.moreActions;
-		var modals = $author$project$Widget$Layout$orderModals(
-			{
-				bottomSheet: $elm$core$Maybe$Nothing,
-				dialog: dialog,
-				leftSheet: _Utils_eq(
-					active,
-					$elm$core$Maybe$Just($author$project$Example$Layout$LeftSheet)) ? $elm$core$Maybe$Just(
-					A2(
-						$author$project$Widget$Layout$leftSheet,
-						{button: style.sheetButton, sheet: style.sideSheet},
-						{menu: menu, onDismiss: onDismiss, title: title})) : $elm$core$Maybe$Nothing,
-				rightSheet: _Utils_eq(
-					active,
-					$elm$core$Maybe$Just($author$project$Example$Layout$RightSheet)) ? $elm$core$Maybe$Just(
-					A2(
-						$author$project$Widget$Layout$rightSheet,
-						{insetItem: style.insetItem, sheet: style.sideSheet},
-						{moreActions: moreActions, onDismiss: onDismiss})) : $elm$core$Maybe$Nothing,
-				topSheet: _Utils_eq(
-					active,
-					$elm$core$Maybe$Just($author$project$Example$Layout$Search)) ? $elm$core$Maybe$Just(
-					A2(
-						$author$project$Widget$Layout$searchSheet,
-						style.searchFill,
-						{onDismiss: onDismiss, search: search})) : $elm$core$Maybe$Nothing
-			});
-		var nav = (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) || (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Tablet) || ($elm$core$List$length(menu.options) > 5))) ? A2(
-			$author$project$Widget$menuBar,
-			style.menuBar,
-			{
-				deviceClass: deviceClass,
-				openLeftSheet: $elm$core$Maybe$Just(
-					msgMapper(
-						$author$project$Example$Layout$ChangedSidebar(
-							$elm$core$Maybe$Just($author$project$Example$Layout$LeftSheet)))),
-				openRightSheet: $elm$core$Maybe$Just(
-					msgMapper(
-						$author$project$Example$Layout$ChangedSidebar(
-							$elm$core$Maybe$Just($author$project$Example$Layout$RightSheet)))),
-				openTopSheet: $elm$core$Maybe$Just(
-					msgMapper(
-						$author$project$Example$Layout$ChangedSidebar(
-							$elm$core$Maybe$Just($author$project$Example$Layout$Search)))),
-				primaryActions: primaryActions,
-				search: $elm$core$Maybe$Just(search),
-				title: title
-			}) : A2(
-			$author$project$Widget$tabBar,
-			style.tabBar,
-			{
-				deviceClass: deviceClass,
-				menu: menu,
-				openRightSheet: $elm$core$Maybe$Just(
-					msgMapper(
-						$author$project$Example$Layout$ChangedSidebar(
-							$elm$core$Maybe$Just($author$project$Example$Layout$RightSheet)))),
-				openTopSheet: $elm$core$Maybe$Nothing,
-				primaryActions: primaryActions,
-				search: $elm$core$Maybe$Just(search),
-				title: title
-			});
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			$elm$core$List$concat(
-				_List_fromArray(
-					[
-						style.container,
-						_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$inFront(snackbarElem)
-						]),
-						$author$project$Widget$singleModal(modals),
-						_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))
-						])
-					])),
-			A2(
-				$mdgriffith$elm_ui$Element$column,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-						$mdgriffith$elm_ui$Element$spacing(8)
-					]),
-				_List_fromArray(
-					[
-						nav,
-						A2(
-						$author$project$Widget$button,
-						style.containedButton,
-						{
-							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-							onPress: $elm$core$Maybe$Just(
-								msgMapper($author$project$Example$Layout$AddSnackbar)),
-							text: 'Add Notification'
-						})
-					])));
-	});
-var $author$project$Example$List$ToggleCollapsable = function (a) {
-	return {$: 'ToggleCollapsable', a: a};
-};
-var $author$project$Internal$Item$fullBleedItem = F2(
-	function (s, _v0) {
-		var onPress = _v0.onPress;
-		var text = _v0.text;
-		var icon = _v0.icon;
-		return A2(
-			$author$project$Internal$Item$toItem,
-			s,
-			function (style) {
-				return A2(
-					$mdgriffith$elm_ui$Element$Input$button,
-					_Utils_ap(
-						style.elementButton,
-						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
-					{
-						label: A2(
-							$mdgriffith$elm_ui$Element$row,
-							style.content.elementRow,
-							_List_fromArray(
-								[
-									A2(
-									$mdgriffith$elm_ui$Element$el,
-									style.content.content.text.elementText,
-									A2(
-										$mdgriffith$elm_ui$Element$paragraph,
-										_List_Nil,
-										$elm$core$List$singleton(
-											$mdgriffith$elm_ui$Element$text(text)))),
-									icon(style.content.content.icon)
 								])),
-						onPress: onPress
-					});
-			});
-	});
-var $author$project$Widget$fullBleedItem = function () {
-	var fun = $author$project$Internal$Item$fullBleedItem;
-	return fun;
-}();
-var $author$project$Internal$Item$headerItem = F2(
-	function (style, title) {
-		return A2(
-			$author$project$Internal$Item$toItem,
-			style,
-			function (_v0) {
-				var elementColumn = _v0.elementColumn;
-				var content = _v0.content;
-				return A2(
-					$mdgriffith$elm_ui$Element$column,
-					elementColumn,
-					_List_fromArray(
-						[
-							A2($mdgriffith$elm_ui$Element$el, content.divider.element, $mdgriffith$elm_ui$Element$none),
-							A2(
-							$mdgriffith$elm_ui$Element$el,
-							content.title,
-							$mdgriffith$elm_ui$Element$text(title))
-						]));
-			});
-	});
-var $author$project$Widget$headerItem = $author$project$Internal$Item$headerItem;
-var $elm$html$Html$Attributes$alt = $elm$html$Html$Attributes$stringProperty('alt');
-var $elm$html$Html$Attributes$src = function (url) {
-	return A2(
-		$elm$html$Html$Attributes$stringProperty,
-		'src',
-		_VirtualDom_noJavaScriptOrHtmlUri(url));
+						_List_fromArray(
+							[
+								_Utils_Tuple2('None', _List_Nil)
+							])),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$optionListStory,
+							'Style',
+							_Utils_Tuple2('SortTable', $author$project$Widget$Material$sortTable),
+							_List_Nil),
+						A2(
+							$author$project$UIExplorer$Story$book,
+							$elm$core$Maybe$Just('Options'),
+							$author$project$Page$SortTable$viewFunctions)))))));
+var $author$project$Page$SortTable$init = _Utils_Tuple2(
+	{asc: true, title: 'Name'},
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$SortTable$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
 };
-var $mdgriffith$elm_ui$Element$image = F2(
-	function (attrs, _v0) {
-		var src = _v0.src;
-		var description = _v0.description;
-		var imageAttributes = A2(
-			$elm$core$List$filter,
-			function (a) {
-				switch (a.$) {
-					case 'Width':
-						return true;
-					case 'Height':
-						return true;
-					default:
-						return false;
-				}
+var $author$project$Page$SortTable$update = F2(
+	function (msg, model) {
+		var string = msg.a;
+		return _Utils_Tuple2(
+			{
+				asc: _Utils_eq(model.title, string) ? (!model.asc) : true,
+				title: string
 			},
-			attrs);
-		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$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.imageContainer),
-				attrs),
-			$mdgriffith$elm_ui$Internal$Model$Unkeyed(
-				_List_fromArray(
-					[
-						A4(
-						$mdgriffith$elm_ui$Internal$Model$element,
-						$mdgriffith$elm_ui$Internal$Model$asEl,
-						$mdgriffith$elm_ui$Internal$Model$NodeName('img'),
-						_Utils_ap(
-							_List_fromArray(
-								[
-									$mdgriffith$elm_ui$Internal$Model$Attr(
-									$elm$html$Html$Attributes$src(src)),
-									$mdgriffith$elm_ui$Internal$Model$Attr(
-									$elm$html$Html$Attributes$alt(description))
-								]),
-							imageAttributes),
-						$mdgriffith$elm_ui$Internal$Model$Unkeyed(_List_Nil))
-					])));
+			$elm$core$Platform$Cmd$none);
 	});
-var $author$project$Internal$Item$imageItem = F2(
-	function (s, _v0) {
-		var onPress = _v0.onPress;
-		var text = _v0.text;
-		var image = _v0.image;
-		var content = _v0.content;
-		return A2(
-			$author$project$Internal$Item$toItem,
-			s,
-			function (style) {
-				return A2(
-					$mdgriffith$elm_ui$Element$Input$button,
-					_Utils_ap(
-						style.elementButton,
-						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
-					{
-						label: A2(
-							$mdgriffith$elm_ui$Element$row,
-							style.content.elementRow,
-							_List_fromArray(
-								[
-									A2($mdgriffith$elm_ui$Element$el, style.content.content.image.element, image),
-									A2(
-									$mdgriffith$elm_ui$Element$el,
-									style.content.content.text.elementText,
-									A2(
-										$mdgriffith$elm_ui$Element$paragraph,
-										_List_Nil,
-										$elm$core$List$singleton(
-											$mdgriffith$elm_ui$Element$text(text)))),
-									content(style.content.content.content)
-								])),
-						onPress: onPress
-					});
-			});
-	});
-var $author$project$Widget$imageItem = function () {
-	var fun = $author$project$Internal$Item$imageItem;
-	return fun;
-}();
-var $author$project$Widget$insetItem = function () {
-	var fun = $author$project$Internal$Item$insetItem;
-	return fun;
-}();
-var $author$project$Internal$Item$multiLineItem = F2(
-	function (s, _v0) {
-		var onPress = _v0.onPress;
-		var title = _v0.title;
-		var text = _v0.text;
-		var icon = _v0.icon;
-		var content = _v0.content;
-		return A2(
-			$author$project$Internal$Item$toItem,
-			s,
-			function (style) {
-				return A2(
-					$mdgriffith$elm_ui$Element$Input$button,
-					_Utils_ap(
-						style.elementButton,
-						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
-					{
-						label: A2(
-							$mdgriffith$elm_ui$Element$row,
-							style.content.elementRow,
-							_List_fromArray(
-								[
-									A2(
-									$mdgriffith$elm_ui$Element$el,
-									style.content.content.icon.element,
-									icon(style.content.content.icon.content)),
-									A2(
-									$mdgriffith$elm_ui$Element$column,
-									style.content.content.description.elementColumn,
-									_List_fromArray(
-										[
-											A2(
-											$mdgriffith$elm_ui$Element$paragraph,
-											style.content.content.description.content.title.elementText,
-											$elm$core$List$singleton(
-												$mdgriffith$elm_ui$Element$text(title))),
-											A2(
-											$mdgriffith$elm_ui$Element$paragraph,
-											style.content.content.description.content.text.elementText,
-											$elm$core$List$singleton(
-												$mdgriffith$elm_ui$Element$text(text)))
-										])),
-									content(style.content.content.content)
-								])),
-						onPress: onPress
-					});
-			});
-	});
-var $author$project$Widget$multiLineItem = function () {
-	var fun = $author$project$Internal$Item$multiLineItem;
-	return fun;
-}();
-var $author$project$Widget$selectItem = $author$project$Internal$Item$selectItem;
-var $author$project$Example$List$view = F3(
-	function (msgMapper, style, _v0) {
-		var isExpanded = _v0.a;
-		return A2(
-			$author$project$Widget$itemList,
-			style.cardColumn,
-			_Utils_ap(
-				_List_fromArray(
-					[
-						A2($author$project$Widget$headerItem, style.fullBleedHeader, 'Section 1'),
-						$author$project$Widget$asItem(
-						$mdgriffith$elm_ui$Element$text('Custom Item')),
-						$author$project$Widget$divider(style.middleDivider),
-						A2(
-						$author$project$Widget$fullBleedItem,
-						style.fullBleedItem,
-						{
-							icon: function (_v1) {
-								return $mdgriffith$elm_ui$Element$none;
-							},
-							onPress: $elm$core$Maybe$Nothing,
-							text: 'Full Bleed Item'
-						}),
-						A2($author$project$Widget$headerItem, style.fullBleedHeader, 'Section 2'),
-						A2(
-						$author$project$Widget$insetItem,
-						style.insetItem,
-						{
-							content: function (_v2) {
-								return $mdgriffith$elm_ui$Element$none;
-							},
-							icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$triangle),
-							onPress: $elm$core$Maybe$Nothing,
-							text: 'Item with Icon'
-						}),
-						A2(
-						$author$project$Widget$imageItem,
-						style.imageItem,
-						{
-							content: function (_v3) {
-								var size = _v3.size;
-								var color = _v3.color;
-								return A2(
-									$mdgriffith$elm_ui$Element$el,
-									_List_fromArray(
-										[
-											$mdgriffith$elm_ui$Element$Font$color(
-											$author$project$Widget$Material$Color$fromColor(color)),
-											$mdgriffith$elm_ui$Element$Font$size(size)
-										]),
-									$mdgriffith$elm_ui$Element$text('1.'));
-							},
-							image: A2(
-								$mdgriffith$elm_ui$Element$image,
-								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$width(
-										$mdgriffith$elm_ui$Element$px(40)),
-										$mdgriffith$elm_ui$Element$height(
-										$mdgriffith$elm_ui$Element$px(40))
-									]),
-								{description: 'Elm logo', src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Elm_logo.svg/1024px-Elm_logo.svg.png'}),
-							onPress: $elm$core$Maybe$Nothing,
-							text: 'Item with Image'
-						}),
-						$author$project$Widget$divider(style.insetDivider),
-						A2(
-						$author$project$Widget$insetItem,
-						style.insetItem,
-						{
-							content: function (_v4) {
-								var size = _v4.size;
-								var color = _v4.color;
-								return A2(
-									$mdgriffith$elm_ui$Element$el,
-									_List_fromArray(
-										[
-											$mdgriffith$elm_ui$Element$Font$color(
-											$author$project$Widget$Material$Color$fromColor(color)),
-											$mdgriffith$elm_ui$Element$Font$size(size)
-										]),
-									$mdgriffith$elm_ui$Element$text('2.'));
-							},
-							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-							onPress: $elm$core$Maybe$Just(
-								msgMapper(
-									$author$project$Example$List$ToggleCollapsable(!isExpanded))),
-							text: 'Click Me'
-						}),
-						A2(
-						$author$project$Widget$multiLineItem,
-						style.multiLineItem,
-						{
-							content: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-							onPress: $elm$core$Maybe$Nothing,
-							text: 'Description. Description. Description. Description. Description. Description. Description. Description. Description. Description.',
-							title: 'Item'
-						}),
-						A2(
-						$author$project$Widget$imageItem,
-						style.imageItem,
-						{
-							content: function (_v5) {
-								return A2(
-									$author$project$Widget$switch,
-									style._switch,
-									{
-										active: isExpanded,
-										description: 'Click Me',
-										onPress: $elm$core$Maybe$Just(
-											msgMapper(
-												$author$project$Example$List$ToggleCollapsable(!isExpanded)))
-									});
-							},
-							image: $mdgriffith$elm_ui$Element$none,
-							onPress: $elm$core$Maybe$Just(
-								msgMapper(
-									$author$project$Example$List$ToggleCollapsable(!isExpanded))),
-							text: 'Clickable Item with Switch'
-						}),
-						$author$project$Widget$divider(style.fullBleedDivider)
-					]),
-				_Utils_ap(
-					A2(
-						$author$project$Widget$expansionItem,
-						style.expansionItem,
-						{
-							content: _List_fromArray(
-								[
-									A2($author$project$Widget$headerItem, style.insetHeader, 'Section 3'),
-									A2(
-									$author$project$Widget$insetItem,
-									style.insetItem,
-									{
-										content: function (_v6) {
-											var size = _v6.size;
-											var color = _v6.color;
-											return A2(
-												$mdgriffith$elm_ui$Element$el,
-												_List_fromArray(
-													[
-														$mdgriffith$elm_ui$Element$Font$color(
-														$author$project$Widget$Material$Color$fromColor(color)),
-														$mdgriffith$elm_ui$Element$Font$size(size)
-													]),
-												$mdgriffith$elm_ui$Element$text('3.'));
-										},
-										icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-										onPress: $elm$core$Maybe$Nothing,
-										text: 'Item'
-									})
-								]),
-							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-							isExpanded: isExpanded,
-							onToggle: A2($elm$core$Basics$composeR, $author$project$Example$List$ToggleCollapsable, msgMapper),
-							text: 'Expandable Item'
-						}),
-					_Utils_ap(
-						_List_fromArray(
-							[
-								A2($author$project$Widget$headerItem, style.fullBleedHeader, 'Menu')
-							]),
-						A2(
-							$author$project$Widget$selectItem,
-							style.selectItem,
-							{
-								onSelect: function (_int) {
-									return $elm$core$Maybe$Just(
-										msgMapper(
-											$author$project$Example$List$ToggleCollapsable(_int === 1)));
-								},
-								options: A2(
-									$elm$core$List$map,
-									function (bool) {
-										return {
-											icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-											text: bool ? 'Expanded' : 'Collapsed'
-										};
-									},
-									_List_fromArray(
-										[true, false])),
-								selected: isExpanded ? $elm$core$Maybe$Just(1) : $elm$core$Maybe$Just(0)
-							})))));
-	});
-var $author$project$Example$Modal$ToggleModal = function (a) {
-	return {$: 'ToggleModal', a: a};
-};
-var $author$project$Internal$Modal$multiModal = function (list) {
-	if (list.b) {
-		var head = list.a;
-		var tail = list.b;
-		return _Utils_ap(
-			A2(
-				$elm$core$List$map,
-				function (_v1) {
-					var content = _v1.content;
-					return $mdgriffith$elm_ui$Element$inFront(content);
-				},
-				$elm$core$List$reverse(tail)),
-			_Utils_ap(
-				$author$project$Internal$Modal$background(head.onDismiss),
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$inFront(head.content)
-					])));
-	} else {
-		return _List_Nil;
-	}
-};
-var $author$project$Widget$multiModal = $author$project$Internal$Modal$multiModal;
-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$multiModal(
-					_List_fromArray(
-						[
-							{
-							content: A2(
-								$mdgriffith$elm_ui$Element$el,
-								_List_fromArray(
-									[
-										$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)))
-						},
-							{
-							content: A2(
-								$mdgriffith$elm_ui$Element$el,
-								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$height(
-										$mdgriffith$elm_ui$Element$px(150)),
-										$mdgriffith$elm_ui$Element$width(
-										$mdgriffith$elm_ui$Element$px(200)),
-										$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('This card can not be selected.')))))),
-							onDismiss: $elm$core$Maybe$Nothing
-						},
-							{
-							content: A2(
-								$mdgriffith$elm_ui$Element$el,
-								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$height(
-										$mdgriffith$elm_ui$Element$px(300)),
-										$mdgriffith$elm_ui$Element$width(
-										$mdgriffith$elm_ui$Element$px(300)),
-										$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('This is message is behind the other two')))))),
-							onDismiss: $elm$core$Maybe$Nothing
-						}
-						])) : _List_Nil),
-			A2(
-				$author$project$Widget$button,
-				style.primaryButton,
-				{
-					icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $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,
-			{content: style.selectButton, elementRow: 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: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-								text: $elm$core$String$fromInt(_int)
-							};
-						},
-						_List_fromArray(
-							[1, 2, 42])),
-					selected: selected
-				}));
-	});
-var $author$project$Example$ProgressIndicator$view = F3(
-	function (msgMapper, style, _v0) {
-		var maybeProgress = _v0.a;
-		return A2($author$project$Widget$circularProgressIndicator, style.progressIndicator, maybeProgress);
-	});
-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,
-			{content: style.selectButton, elementRow: 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: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-								text: $elm$core$String$fromInt(_int)
-							};
-						},
-						_List_fromArray(
-							[1, 2, 42])),
-					selected: selected
-				}));
-	});
-var $author$project$Example$Sheet$ToggleModal = function (a) {
-	return {$: 'ToggleModal', a: a};
-};
-var $author$project$Example$Sheet$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$singleModal(
-					$elm$core$List$singleton(
-						{
-							content: A2(
-								$author$project$Widget$itemList,
-								style.sideSheet,
-								_List_fromArray(
-									[
-										$author$project$Widget$asItem(
-										A2(
-											$mdgriffith$elm_ui$Element$el,
-											$author$project$Widget$Material$Typography$h6,
-											$mdgriffith$elm_ui$Element$text('Menu'))),
-										A2(
-										$author$project$Widget$insetItem,
-										style.insetItem,
-										{
-											content: function (_v1) {
-												return $mdgriffith$elm_ui$Element$none;
-											},
-											icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$triangle),
-											onPress: $elm$core$Maybe$Just(
-												msgMapper(
-													$author$project$Example$Sheet$ToggleModal(false))),
-											text: 'Home'
-										}),
-										A2(
-										$author$project$Widget$insetItem,
-										style.insetItem,
-										{
-											content: function (_v2) {
-												return $mdgriffith$elm_ui$Element$none;
-											},
-											icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$triangle),
-											onPress: $elm$core$Maybe$Just(
-												msgMapper(
-													$author$project$Example$Sheet$ToggleModal(false))),
-											text: 'About'
-										})
-									])),
-							onDismiss: $elm$core$Maybe$Just(
-								msgMapper(
-									$author$project$Example$Sheet$ToggleModal(false)))
-						})) : _List_Nil),
-			A2(
-				$author$project$Widget$button,
-				style.primaryButton,
-				{
-					icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$eye),
-					onPress: $elm$core$Maybe$Just(
-						msgMapper(
-							$author$project$Example$Sheet$ToggleModal(true))),
-					text: 'Show Sheet'
-				}));
-	});
-var $author$project$Example$Snackbar$AddSnackbar = function (a) {
-	return {$: 'AddSnackbar', a: a};
-};
-var $author$project$Example$Snackbar$view = F3(
-	function (msgMapper, style, model) {
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			_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)),
-					$mdgriffith$elm_ui$Element$inFront(
-					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(8),
-										$mdgriffith$elm_ui$Element$alignBottom,
-										$mdgriffith$elm_ui$Element$alignRight
-									])),
-							A3(
-								$author$project$Widget$Snackbar$view,
-								style.snackbar,
-								function (_v0) {
-									var text = _v0.a;
-									var hasButton = _v0.b;
-									return {
-										button: hasButton ? $elm$core$Maybe$Just(
-											{
-												onPress: $elm$core$Maybe$Just(
-													msgMapper(
-														$author$project$Example$Snackbar$AddSnackbar(
-															_Utils_Tuple2('This is another message', false)))),
-												text: 'Add'
-											}) : $elm$core$Maybe$Nothing,
-										text: text
-									};
-								},
-								model))))
-				]),
-			A2(
-				$author$project$Widget$column,
-				style.column,
-				_List_fromArray(
-					[
-						A2(
-						$author$project$Widget$button,
-						style.button,
-						{
-							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-							onPress: $elm$core$Maybe$Just(
-								msgMapper(
-									$author$project$Example$Snackbar$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: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-							onPress: $elm$core$Maybe$Just(
-								msgMapper(
-									$author$project$Example$Snackbar$AddSnackbar(
-										_Utils_Tuple2('You can add another notification if you want.', true)))),
-							text: 'Add Notification with Action'
-						})
-					])));
-	});
-var $author$project$Example$SortTable$ChangedSorting = function (a) {
+var $author$project$Page$SortTable$ChangedSorting = function (a) {
 	return {$: 'ChangedSorting', a: a};
 };
-var $author$project$Example$SortTable$view = F3(
-	function (msgMapper, style, model) {
+var $author$project$Page$SortTable$view = F2(
+	function (_v0, model) {
+		var palette = _v0.palette;
 		return A2(
 			$author$project$Widget$sortTable,
-			style.sortTable,
+			$author$project$Widget$Material$sortTable(palette),
 			{
 				asc: model.asc,
 				columns: _List_fromArray(
@@ -23240,38 +26179,404 @@ var $author$project$Example$SortTable$view = F3(
 						rating: 3
 					}
 					]),
-				onChange: A2($elm$core$Basics$composeR, $author$project$Example$SortTable$ChangedSorting, msgMapper),
+				onChange: $author$project$Page$SortTable$ChangedSorting,
 				sortBy: model.title
 			});
 	});
-var $author$project$Example$Switch$ToggledButtonStatus = {$: 'ToggledButtonStatus'};
-var $author$project$Example$Switch$view = F3(
-	function (msgMapper, style, _v0) {
-		var isButtonEnabled = _v0.a;
+var $author$project$Page$SortTable$demo = {
+	init: $elm$core$Basics$always($author$project$Page$SortTable$init),
+	subscriptions: $author$project$Page$SortTable$subscriptions,
+	update: $author$project$Page$SortTable$update,
+	view: $author$project$Page$demo($author$project$Page$SortTable$view)
+};
+var $author$project$Page$SortTable$description = 'A simple sort table.';
+var $author$project$Page$SortTable$title = 'Sort Table';
+var $author$project$Page$SortTable$page = $author$project$Page$create(
+	{book: $author$project$Page$SortTable$book, demo: $author$project$Page$SortTable$demo, description: $author$project$Page$SortTable$description, title: $author$project$Page$SortTable$title});
+var $author$project$Page$Switch$viewFunctions = function () {
+	var viewSwitch = F6(
+		function (style, desc, active, onPress, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.switch',
+				A2(
+					$author$project$Widget$switch,
+					style(palette),
+					{active: active, description: desc, onPress: onPress}));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewSwitch]));
+}();
+var $author$project$Page$Switch$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'with event handler',
+			_Utils_Tuple2(
+				$elm$core$Maybe$Just(_Utils_Tuple0),
+				$elm$core$Maybe$Nothing),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'Active',
+				_Utils_Tuple2(true, false),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A2($author$project$UIExplorer$Story$textStory, 'Description', 'Be Awesome'),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('Switch', $author$project$Widget$Material$switch),
+						_List_Nil),
+					A2(
+						$author$project$UIExplorer$Story$book,
+						$elm$core$Maybe$Just('Options'),
+						$author$project$Page$Switch$viewFunctions))))));
+var $author$project$Page$Switch$IsButtonEnabled = function (a) {
+	return {$: 'IsButtonEnabled', a: a};
+};
+var $author$project$Page$Switch$init = _Utils_Tuple2(
+	$author$project$Page$Switch$IsButtonEnabled(false),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$Switch$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Switch$update = F2(
+	function (msg, _v0) {
+		var buttonEnabled = _v0.a;
+		return _Utils_Tuple2(
+			$author$project$Page$Switch$IsButtonEnabled(!buttonEnabled),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Page$Switch$ToggledButtonStatus = {$: 'ToggledButtonStatus'};
+var $author$project$Page$Switch$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var isButtonEnabled = _v1.a;
 		return A2(
 			$author$project$Widget$switch,
-			style._switch,
+			$author$project$Widget$Material$switch(palette),
 			{
 				active: isButtonEnabled,
 				description: 'click me',
-				onPress: $elm$core$Maybe$Just(
-					msgMapper($author$project$Example$Switch$ToggledButtonStatus))
+				onPress: $elm$core$Maybe$Just($author$project$Page$Switch$ToggledButtonStatus)
 			});
 	});
-var $author$project$Example$Tab$ChangedTab = function (a) {
+var $author$project$Page$Switch$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Switch$init),
+	subscriptions: $author$project$Page$Switch$subscriptions,
+	update: $author$project$Page$Switch$update,
+	view: $author$project$Page$demo($author$project$Page$Switch$view)
+};
+var $author$project$Page$Switch$description = 'Switches toggle the state of a single item on or off.';
+var $author$project$Page$Switch$title = 'Switch';
+var $author$project$Page$Switch$page = $author$project$Page$create(
+	{book: $author$project$Page$Switch$book, demo: $author$project$Page$Switch$demo, description: $author$project$Page$Switch$description, title: $author$project$Page$Switch$title});
+var $author$project$Internal$Material$Tab$tabButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {color: palette.primary, size: 18},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					otherwise: {color: palette.primary, size: 18}
+				},
+				text: {contentText: _List_Nil}
+			},
+			elementRow: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$spacing(8),
+					$mdgriffith$elm_ui$Element$centerY,
+					$mdgriffith$elm_ui$Element$centerX
+				])
+		},
+		elementButton: _Utils_ap(
+			$author$project$Widget$Material$Typography$button,
+			_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$Material$Color$fromColor(palette.primary)),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$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$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		otherwise: _List_Nil
+	};
+};
+var $author$project$Internal$Material$Tab$tab = function (palette) {
+	return {
+		content: {
+			content: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+				]),
+			tabs: {
+				content: $author$project$Internal$Material$Tab$tabButton(palette),
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spaceEvenly,
+						$mdgriffith$elm_ui$Element$Border$shadow(
+						$author$project$Widget$Material$Color$shadow(4)),
+						$mdgriffith$elm_ui$Element$spacing(8),
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+					])
+			}
+		},
+		elementColumn: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(8),
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+			])
+	};
+};
+var $author$project$Widget$Material$tab = $author$project$Internal$Material$Tab$tab;
+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.elementColumn,
+			_List_fromArray(
+				[
+					A2(
+					$mdgriffith$elm_ui$Element$row,
+					style.content.tabs.elementRow,
+					A2(
+						$elm$core$List$map,
+						$author$project$Internal$Select$selectButton(style.content.tabs.content),
+						$author$project$Internal$Select$select(tabs))),
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					style.content.content,
+					content(tabs.selected))
+				]));
+	});
+var $author$project$Widget$tab = function () {
+	var fun = $author$project$Internal$Tab$tab;
+	return fun;
+}();
+var $author$project$Page$Tab$viewFunctions = function () {
+	var viewTab = F6(
+		function (style, selected, options, onSelect, _v1, _v2) {
+			var palette = _v1.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.tab',
+				A2(
+					$author$project$Widget$tab,
+					style(palette),
+					{
+						content: function (s) {
+							return $mdgriffith$elm_ui$Element$text(
+								function () {
+									_v0$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 _v0$3;
+											}
+										} else {
+											break _v0$3;
+										}
+									}
+									return 'Please select a tab';
+								}());
+						},
+						tabs: {onSelect: onSelect, options: options, selected: selected}
+					}));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewTab]));
+}();
+var $author$project$Page$Tab$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With event handler',
+			_Utils_Tuple2(
+				$elm$core$Basics$always(
+					$elm$core$Maybe$Just(_Utils_Tuple0)),
+				$elm$core$Basics$always($elm$core$Maybe$Nothing)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$optionListStory,
+				'Options',
+				_Utils_Tuple2(
+					'3 Option',
+					_List_fromArray(
+						[
+							{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							text: '42'
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: ''
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: '42'
+						}
+						])),
+				_List_fromArray(
+					[
+						_Utils_Tuple2(
+						'2 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: '42'
+							},
+								{
+								icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+								text: ''
+							}
+							])),
+						_Utils_Tuple2(
+						'1 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: '42'
+							}
+							]))
+					])),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Selected',
+					_Utils_Tuple2(
+						'Third',
+						$elm$core$Maybe$Just(2)),
+					_List_fromArray(
+						[
+							_Utils_Tuple2(
+							'Second',
+							$elm$core$Maybe$Just(1)),
+							_Utils_Tuple2(
+							'First',
+							$elm$core$Maybe$Just(0)),
+							_Utils_Tuple2('Nothing or Invalid', $elm$core$Maybe$Nothing)
+						])),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('Tab', $author$project$Widget$Material$tab),
+						_List_Nil),
+					A2(
+						$author$project$UIExplorer$Story$book,
+						$elm$core$Maybe$Just('Options'),
+						$author$project$Page$Tab$viewFunctions))))));
+var $author$project$Page$Tab$Selected = function (a) {
+	return {$: 'Selected', a: a};
+};
+var $author$project$Page$Tab$init = _Utils_Tuple2(
+	$author$project$Page$Tab$Selected($elm$core$Maybe$Nothing),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$Tab$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Tab$update = F2(
+	function (msg, _v0) {
+		var _int = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Page$Tab$Selected(
+				$elm$core$Maybe$Just(_int)),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Page$Tab$ChangedTab = function (a) {
 	return {$: 'ChangedTab', a: a};
 };
-var $author$project$Example$Tab$view = F3(
-	function (msgMapper, style, _v0) {
-		var selected = _v0.a;
+var $author$project$Page$Tab$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var selected = _v1.a;
 		return A2(
 			$author$project$Widget$tab,
-			style.tab,
+			$author$project$Widget$Material$tab(palette),
 			{
 				content: function (s) {
 					return $mdgriffith$elm_ui$Element$text(
 						function () {
-							_v1$3:
+							_v2$3:
 							while (true) {
 								if (s.$ === 'Just') {
 									switch (s.a) {
@@ -23282,20 +26587,17 @@ var $author$project$Example$Tab$view = F3(
 										case 2:
 											return 'The thrid and last tab';
 										default:
-											break _v1$3;
+											break _v2$3;
 									}
 								} else {
-									break _v1$3;
+									break _v2$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)),
+					onSelect: A2($elm$core$Basics$composeR, $author$project$Page$Tab$ChangedTab, $elm$core$Maybe$Just),
 					options: A2(
 						$elm$core$List$map,
 						function (_int) {
@@ -23310,10 +26612,149 @@ var $author$project$Example$Tab$view = F3(
 				}
 			});
 	});
-var $author$project$Example$TextInput$SetTextInput = function (a) {
+var $author$project$Page$Tab$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Tab$init),
+	subscriptions: $author$project$Page$Tab$subscriptions,
+	update: $author$project$Page$Tab$update,
+	view: $author$project$Page$demo($author$project$Page$Tab$view)
+};
+var $author$project$Page$Tab$description = 'Tabs organize content across different screens, data sets, and other interactions.';
+var $author$project$Page$Tab$title = 'Tab';
+var $author$project$Page$Tab$page = $author$project$Page$create(
+	{book: $author$project$Page$Tab$book, demo: $author$project$Page$Tab$demo, description: $author$project$Page$Tab$description, title: $author$project$Page$Tab$title});
+var $author$project$Page$TextInput$viewFunctions = function () {
+	var viewInput = F6(
+		function (chips, text, placeholder, label, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.currentPasswordInput',
+				A2(
+					$author$project$Widget$textInput,
+					$author$project$Widget$Material$textInput(palette),
+					{
+						chips: chips,
+						label: label,
+						onChange: $elm$core$Basics$always(_Utils_Tuple0),
+						placeholder: placeholder,
+						text: text
+					}));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewInput]));
+}();
+var $author$project$Page$TextInput$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A2($author$project$UIExplorer$Story$textStory, 'Label', 'Name'),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'Placeholder',
+				_Utils_Tuple2(
+					$elm$core$Maybe$Just(
+						A2(
+							$mdgriffith$elm_ui$Element$Input$placeholder,
+							_List_Nil,
+							$mdgriffith$elm_ui$Element$text('password'))),
+					$elm$core$Maybe$Nothing),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A2($author$project$UIExplorer$Story$textStory, 'Text', '123456789'),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Chips',
+						_Utils_Tuple2(
+							'3 Chips',
+							_List_fromArray(
+								[
+									{
+									icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+									onPress: $elm$core$Maybe$Nothing,
+									text: 'Apples'
+								},
+									{
+									icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+									onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+									text: ''
+								},
+									{
+									icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+									onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+									text: 'Oranges'
+								}
+								])),
+						_List_fromArray(
+							[
+								_Utils_Tuple2(
+								'2 Chips',
+								_List_fromArray(
+									[
+										{
+										icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+										onPress: $elm$core$Maybe$Nothing,
+										text: 'Apples'
+									},
+										{
+										icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+										onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+										text: ''
+									}
+									])),
+								_Utils_Tuple2(
+								'1 Chips',
+								_List_fromArray(
+									[
+										{
+										icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+										onPress: $elm$core$Maybe$Nothing,
+										text: 'Apples'
+									}
+									])),
+								_Utils_Tuple2('None', _List_Nil)
+							])),
+					A2(
+						$author$project$UIExplorer$Story$book,
+						$elm$core$Maybe$Just('Options'),
+						$author$project$Page$TextInput$viewFunctions))))));
+var $author$project$Page$TextInput$init = _Utils_Tuple2(
+	{chipTextInput: $elm$core$Set$empty, textInput: ''},
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$TextInput$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$TextInput$update = F2(
+	function (msg, model) {
+		if (msg.$ === 'ToggleTextInputChip') {
+			var string = msg.a;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{
+						chipTextInput: (A2($elm$core$Set$member, string, model.chipTextInput) ? $elm$core$Set$remove(string) : $elm$core$Set$insert(string))(model.chipTextInput)
+					}),
+				$elm$core$Platform$Cmd$none);
+		} else {
+			var string = msg.a;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{textInput: string}),
+				$elm$core$Platform$Cmd$none);
+		}
+	});
+var $author$project$Page$TextInput$SetTextInput = function (a) {
 	return {$: 'SetTextInput', a: a};
 };
-var $author$project$Example$TextInput$ToggleTextInputChip = function (a) {
+var $author$project$Page$TextInput$ToggleTextInputChip = function (a) {
 	return {$: 'ToggleTextInputChip', a: a};
 };
 var $elm$core$Dict$diff = F2(
@@ -23334,16 +26775,17 @@ var $elm$core$Set$diff = F2(
 		return $elm$core$Set$Set_elm_builtin(
 			A2($elm$core$Dict$diff, dict1, dict2));
 	});
-var $author$project$Example$TextInput$view = F3(
-	function (msgMapper, style, model) {
+var $author$project$Page$TextInput$view = F2(
+	function (_v0, model) {
+		var palette = _v0.palette;
 		return A2(
 			$author$project$Widget$column,
-			style.column,
+			$author$project$Widget$Material$column,
 			_List_fromArray(
 				[
 					A2(
 					$author$project$Widget$textInput,
-					style.textInput,
+					$author$project$Widget$Material$textInput(palette),
 					{
 						chips: A2(
 							$elm$core$List$map,
@@ -23351,14 +26793,13 @@ var $author$project$Example$TextInput$view = F3(
 								return {
 									icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
 									onPress: $elm$core$Maybe$Just(
-										msgMapper(
-											$author$project$Example$TextInput$ToggleTextInputChip(string))),
+										$author$project$Page$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),
+						onChange: $author$project$Page$TextInput$SetTextInput,
 						placeholder: $elm$core$Maybe$Nothing,
 						text: model.textInput
 					}),
@@ -23373,12 +26814,11 @@ var $author$project$Example$TextInput$view = F3(
 						function (string) {
 							return A2(
 								$author$project$Widget$button,
-								style.textInput.content.chips.content,
+								$author$project$Widget$Material$textInput(palette).content.chips.content,
 								{
 									icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
 									onPress: $elm$core$Maybe$Just(
-										msgMapper(
-											$author$project$Example$TextInput$ToggleTextInputChip(string))),
+										$author$project$Page$TextInput$ToggleTextInputChip(string)),
 									text: string
 								});
 						},
@@ -23391,361 +26831,86 @@ var $author$project$Example$TextInput$view = F3(
 								model.chipTextInput))))
 				]));
 	});
-var $author$project$Data$Example$view = F3(
-	function (msgMapper, style, model) {
-		return {
-			appBar: A3(
-				$author$project$Example$AppBar$view,
-				A2($elm$core$Basics$composeR, $author$project$Data$Example$AppBar, msgMapper),
-				style,
-				function ($) {
-					return $.appBar;
-				}(model)),
-			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)),
-			icon: A3(
-				$author$project$Example$Icon$view,
-				A2($elm$core$Basics$composeR, $author$project$Data$Example$Icon, msgMapper),
-				style,
-				function ($) {
-					return $.icon;
-				}(model)),
-			layout: A3(
-				$author$project$Example$Layout$view,
-				A2($elm$core$Basics$composeR, $author$project$Data$Example$Layout, msgMapper),
-				style,
-				function ($) {
-					return $.layout;
-				}(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)),
-			progressIndicator: A3(
-				$author$project$Example$ProgressIndicator$view,
-				A2($elm$core$Basics$composeR, $author$project$Data$Example$ProgressIndicator, msgMapper),
-				style,
-				function ($) {
-					return $.progressIndicator;
-				}(model)),
-			select: A3(
-				$author$project$Example$Select$view,
-				A2($elm$core$Basics$composeR, $author$project$Data$Example$Select, msgMapper),
-				style,
-				function ($) {
-					return $.select;
-				}(model)),
-			sheet: A3(
-				$author$project$Example$Sheet$view,
-				A2($elm$core$Basics$composeR, $author$project$Data$Example$Sheet, msgMapper),
-				style,
-				function ($) {
-					return $.sheet;
-				}(model)),
-			snackbar: A3(
-				$author$project$Example$Snackbar$view,
-				A2($elm$core$Basics$composeR, $author$project$Data$Example$Snackbar, msgMapper),
-				style,
-				function ($) {
-					return $.snackbar;
-				}(model)),
-			sortTable: A3(
-				$author$project$Example$SortTable$view,
-				A2($elm$core$Basics$composeR, $author$project$Data$Example$SortTable, msgMapper),
-				style,
-				function ($) {
-					return $.sortTable;
-				}(model)),
-			_switch: A3(
-				$author$project$Example$Switch$view,
-				A2($elm$core$Basics$composeR, $author$project$Data$Example$Switch, msgMapper),
-				style,
-				function ($) {
-					return $._switch;
-				}(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(
-					$elm$core$List$map,
-					function (_v2) {
-						var name = _v2.a;
-						var elem = _v2.b;
-						return A2(
-							$mdgriffith$elm_ui$Element$row,
-							$Orasund$elm_ui_framework$Framework$Grid$spacedEvenly,
-							_List_fromArray(
-								[
-									A2(
-									$mdgriffith$elm_ui$Element$wrappedRow,
-									_List_fromArray(
-										[
-											$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
-										]),
-									$elm$core$List$singleton(
-										$mdgriffith$elm_ui$Element$text(name))),
-									A2(
-									$mdgriffith$elm_ui$Element$el,
-									_List_fromArray(
-										[
-											$mdgriffith$elm_ui$Element$paddingEach(
-											{bottom: 0, left: 8, right: 0, top: 0}),
-											$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
-										]),
-									elem)
-								]));
-					},
-					A2(test, idle, style)));
-		},
-		A2(
-			$elm$core$List$map,
-			function (example) {
-				return {
-					example: $author$project$Data$Example$get(example),
-					test: $author$project$Data$Example$toTests(example),
-					title: $author$project$Data$Example$toString(example)
-				};
-			},
-			$author$project$Data$Example$asList));
+var $author$project$Page$TextInput$demo = {
+	init: $elm$core$Basics$always($author$project$Page$TextInput$init),
+	subscriptions: $author$project$Page$TextInput$subscriptions,
+	update: $author$project$Page$TextInput$update,
+	view: $author$project$Page$demo($author$project$Page$TextInput$view)
 };
-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(
+var $author$project$Page$TextInput$description = 'Text fields let users enter and edit text.';
+var $author$project$Page$TextInput$title = 'Text Input';
+var $author$project$Page$TextInput$page = $author$project$Page$create(
+	{book: $author$project$Page$TextInput$book, demo: $author$project$Page$TextInput$demo, description: $author$project$Page$TextInput$description, title: $author$project$Page$TextInput$title});
+var $author$project$Main$pages = A3(
+	$author$project$UIExplorer$nextPage,
+	'Dialog',
+	$author$project$Page$Dialog$page,
+	A3(
+		$author$project$UIExplorer$nextPage,
+		'Icon',
+		$author$project$Page$Icon$page,
+		A3(
+			$author$project$UIExplorer$nextPage,
+			'App Bar',
+			$author$project$Page$AppBar$page,
+			A3(
+				$author$project$UIExplorer$nextPage,
+				'Modal',
+				$author$project$Page$Modal$page,
+				A3(
+					$author$project$UIExplorer$nextPage,
+					'ProgressIndicator',
+					$author$project$Page$ProgressIndicator$page,
+					A3(
+						$author$project$UIExplorer$nextPage,
+						'Item',
+						$author$project$Page$Item$page,
+						A3(
+							$author$project$UIExplorer$nextPage,
+							'Snackbar',
+							$author$project$Page$Snackbar$page,
+							A3(
+								$author$project$UIExplorer$nextPage,
+								'Sort Table',
+								$author$project$Page$SortTable$page,
+								A3(
+									$author$project$UIExplorer$nextPage,
+									'Text Input',
+									$author$project$Page$TextInput$page,
+									A3(
+										$author$project$UIExplorer$nextPage,
+										'Password Input',
+										$author$project$Page$PasswordInput$page,
+										A3(
+											$author$project$UIExplorer$nextPage,
+											'Tab',
+											$author$project$Page$Tab$page,
+											A3(
+												$author$project$UIExplorer$nextPage,
+												'Switch',
+												$author$project$Page$Switch$page,
+												A3(
+													$author$project$UIExplorer$nextPage,
+													'Multi Select',
+													$author$project$Page$MultiSelect$page,
+													A3(
+														$author$project$UIExplorer$nextPage,
+														'Select',
+														$author$project$Page$Select$page,
+														A2($author$project$UIExplorer$firstPage, 'Button', $author$project$Page$Button$page)))))))))))))));
+var $elm$json$Json$Decode$value = _Json_decodeValue;
+var $author$project$Main$main = function () {
+	var config = $author$project$UIExplorer$defaultConfig;
+	return A2(
+		$author$project$UIExplorer$application,
+		_Utils_update(
+			config,
 			{
-				idle: msgMapper($author$project$Stateless$Idle),
-				model: model.example,
-				msgMapper: A2($elm$core$Basics$composeR, $author$project$Stateless$ExampleSpecific, msgMapper),
-				style: style
+				sidebarTitle: $mdgriffith$elm_ui$Element$text('Elm UI Widgets')
 			}),
-		title: 'Stateless Views'
-	};
-};
-var $author$project$Main$viewLoaded = function (m) {
-	var style = $author$project$Data$Theme$toStyle(m.theme);
-	return A2(
-		$mdgriffith$elm_ui$Element$column,
-		$Orasund$elm_ui_framework$Framework$Grid$compact,
-		_List_fromArray(
-			[
-				A2(
-				$mdgriffith$elm_ui$Element$el,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height(
-						$mdgriffith$elm_ui$Element$px(42))
-					]),
-				$mdgriffith$elm_ui$Element$none),
-				A2(
-				$mdgriffith$elm_ui$Element$column,
-				_Utils_ap($Orasund$elm_ui_framework$Framework$container, style.container),
-				A2(
-					$elm$core$List$map,
-					function (section) {
-						return function (_v1) {
-							var title = _v1.title;
-							var description = _v1.description;
-							var items = _v1.items;
-							return A2(
-								$mdgriffith$elm_ui$Element$column,
-								_Utils_ap(
-									$Orasund$elm_ui_framework$Framework$Grid$section,
-									_List_fromArray(
-										[$mdgriffith$elm_ui$Element$centerX])),
-								_List_fromArray(
-									[
-										A2(
-										$mdgriffith$elm_ui$Element$el,
-										$Orasund$elm_ui_framework$Framework$Heading$h2,
-										$mdgriffith$elm_ui$Element$text(title)),
-										(m.search.current === '') ? A2(
-										$mdgriffith$elm_ui$Element$paragraph,
-										_List_Nil,
-										$elm$core$List$singleton(
-											$mdgriffith$elm_ui$Element$text(description))) : $mdgriffith$elm_ui$Element$none,
-										A2(
-										$mdgriffith$elm_ui$Element$wrappedRow,
-										_Utils_ap(
-											$Orasund$elm_ui_framework$Framework$Grid$simple,
-											_List_fromArray(
-												[
-													$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
-												])),
-										A2(
-											$elm$core$List$map,
-											function (_v3) {
-												var name = _v3.a;
-												var elem = _v3.b;
-												var more = _v3.c;
-												return A2(
-													$author$project$Widget$itemList,
-													style.cardColumn,
-													A2(
-														$elm$core$List$cons,
-														$author$project$Widget$asItem(
-															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
-																	]))),
-														$elm$core$List$isEmpty(more) ? _List_Nil : _Utils_ap(
-															_List_fromArray(
-																[
-																	$author$project$Widget$divider(style.fullBleedDivider)
-																]),
-															A2(
-																$author$project$Widget$expansionItem,
-																style.expansionItem,
-																{
-																	content: $elm$core$List$singleton(
-																		$author$project$Widget$asItem(
-																			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)
-																						])),
-																				more))),
-																	icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-																	isExpanded: A2(
-																		$elm$core$Maybe$withDefault,
-																		false,
-																		A2(
-																			$elm$core$Maybe$map,
-																			function (example) {
-																				return A2($turboMaCk$any_set$Set$Any$member, example, m.expanded);
-																			},
-																			$author$project$Data$Example$fromString(name))),
-																	onToggle: $elm$core$Basics$always(
-																		A2(
-																			$elm$core$Maybe$withDefault,
-																			$author$project$Main$Idle,
-																			A2(
-																				$elm$core$Maybe$map,
-																				$author$project$Main$ToggledExample,
-																				$author$project$Data$Example$fromString(name)))),
-																	text: 'States'
-																}))));
-											},
-											((m.search.current !== '') ? $elm$core$List$filter(
-												function (_v2) {
-													var a = _v2.a;
-													return A2(
-														$elm$core$String$contains,
-														$elm$core$String$toLower(m.search.current),
-														$elm$core$String$toLower(a));
-												}) : $elm$core$Basics$identity)(items)))
-									]));
-						}(
-							function () {
-								if (section.$ === 'ReusableViews') {
-									return $author$project$Reusable$view(
-										{addSnackbar: $author$project$Main$AddSnackbar, theme: m.theme});
-								} else {
-									return $author$project$Stateless$view(
-										{model: m.stateless, msgMapper: $author$project$Main$StatelessSpecific, theme: m.theme});
-								}
-							}());
-					},
-					_List_fromArray(
-						[$author$project$Data$Section$StatelessViews, $author$project$Data$Section$ReusableViews])))
-			]));
-};
-var $author$project$Main$view = function (model) {
-	if (model.$ === 'Loading') {
-		return A2($Orasund$elm_ui_framework$Framework$responsiveLayout, _List_Nil, $mdgriffith$elm_ui$Element$none);
-	} else {
-		var m = model.a;
-		var style = $author$project$Data$Theme$toStyle(m.theme);
-		return A2(
-			$elm$html$Html$map,
-			$author$project$Main$LoadedSpecific,
-			A2(
-				$mdgriffith$elm_ui$Element$layout,
-				A3($author$project$Main$viewLayout, $elm$core$Basics$identity, style, m),
-				$author$project$Main$viewLoaded(m)));
-	}
-};
-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));
+		$author$project$Main$pages);
+}();
+_Platform_export({'Main':{'init':$author$project$Main$main($elm$json$Json$Decode$value)(0)}});}(this));
 
   var app = Elm.Main.init({ node: document.getElementById("elm") });
 }
diff --git a/docs/404.html b/docs/404.html
new file mode 100644
index 0000000..662620c
--- /dev/null
+++ b/docs/404.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Single Page Apps for GitHub Pages</title>
+  <script type="text/javascript">
+    // Single Page Apps for GitHub Pages
+    // MIT License
+    // https://github.com/rafgraph/spa-github-pages
+    // This script takes the current url and converts the path and query
+    // string into just a query string, and then redirects the browser
+    // to the new url with only a query string and hash fragment,
+    // e.g. https://www.foo.tld/one/two?a=b&c=d#qwe, becomes
+    // https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
+    // Note: this 404.html file must be at least 512 bytes for it to work
+    // with Internet Explorer (it is currently > 512 bytes)
+
+    // If you're creating a Project Pages site and NOT using a custom domain,
+    // then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
+    // This way the code will only replace the route part of the path, and not
+    // the real directory in which the app resides, for example:
+    // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
+    // https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
+    // Otherwise, leave pathSegmentsToKeep as 0.
+    var pathSegmentsToKeep = 0;
+
+    var l = window.location;
+    l.replace(
+      l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
+      l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
+      l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
+      (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+      l.hash
+    );
+
+  </script>
+</head>
+
+<body>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 8bb3ce4..d153814 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -10,6 +10,31 @@
 
 <pre id="elm"></pre>
 
+<!-- Start Single Page Apps for GitHub Pages -->
+<script type="text/javascript">
+	// Single Page Apps for GitHub Pages
+	// MIT License
+	// https://github.com/rafgraph/spa-github-pages
+	// This script checks to see if a redirect is present in the query string,
+	// converts it back into the correct url and adds it to the
+	// browser's history using window.history.replaceState(...),
+	// which won't cause the browser to attempt to load the new url.
+	// When the single page app is loaded further down in this file,
+	// the correct url will be waiting in the browser's history for
+	// the single page app to route accordingly.
+	(function(l) {
+		if (l.search[1] === '/' ) {
+			var decoded = l.search.slice(1).split('&').map(function(s) { 
+				return s.replace(/~and~/g, '&')
+			}).join('?');
+			window.history.replaceState(null, null,
+					l.pathname.slice(0, -1) + decoded + l.hash
+			);
+		}
+	}(window.location))
+</script>
+<!-- End Single Page Apps for GitHub Pages -->
+
 <script>
 try {
 (function(scope){
@@ -4371,6 +4396,60 @@ function _Browser_load(url)
 }
 
 
+function _Url_percentEncode(string)
+{
+	return encodeURIComponent(string);
+}
+
+function _Url_percentDecode(string)
+{
+	try
+	{
+		return $elm$core$Maybe$Just(decodeURIComponent(string));
+	}
+	catch (e)
+	{
+		return $elm$core$Maybe$Nothing;
+	}
+}
+
+
+var _Bitwise_and = F2(function(a, b)
+{
+	return a & b;
+});
+
+var _Bitwise_or = F2(function(a, b)
+{
+	return a | b;
+});
+
+var _Bitwise_xor = F2(function(a, b)
+{
+	return a ^ b;
+});
+
+function _Bitwise_complement(a)
+{
+	return ~a;
+};
+
+var _Bitwise_shiftLeftBy = F2(function(offset, a)
+{
+	return a << offset;
+});
+
+var _Bitwise_shiftRightBy = F2(function(offset, a)
+{
+	return a >> offset;
+});
+
+var _Bitwise_shiftRightZfBy = F2(function(offset, a)
+{
+	return a >>> offset;
+});
+
+
 
 function _Time_now(millisToPosix)
 {
@@ -4415,43 +4494,12 @@ function _Time_getZoneName()
 		callback(_Scheduler_succeed(name));
 	});
 }
-
-
-
-var _Bitwise_and = F2(function(a, b)
-{
-	return a & b;
-});
-
-var _Bitwise_or = F2(function(a, b)
-{
-	return a | b;
-});
-
-var _Bitwise_xor = F2(function(a, b)
-{
-	return a ^ b;
-});
-
-function _Bitwise_complement(a)
-{
-	return ~a;
+var $author$project$UIExplorer$LinkClicked = function (a) {
+	return {$: 'LinkClicked', a: a};
+};
+var $author$project$UIExplorer$UrlChanged = function (a) {
+	return {$: 'UrlChanged', a: a};
 };
-
-var _Bitwise_shiftLeftBy = F2(function(offset, a)
-{
-	return a << offset;
-});
-
-var _Bitwise_shiftRightBy = F2(function(offset, a)
-{
-	return a >> offset;
-});
-
-var _Bitwise_shiftRightZfBy = F2(function(offset, a)
-{
-	return a >>> offset;
-});
 var $elm$core$Basics$EQ = {$: 'EQ'};
 var $elm$core$Basics$GT = {$: 'GT'};
 var $elm$core$Basics$LT = {$: 'LT'};
@@ -5240,74 +5288,48 @@ var $elm$core$Task$perform = F2(
 			$elm$core$Task$Perform(
 				A2($elm$core$Task$map, toMessage, task)));
 	});
-var $elm$browser$Browser$element = _Browser_element;
-var $author$project$Main$GotViewport = function (a) {
-	return {$: 'GotViewport', a: a};
+var $elm$browser$Browser$application = _Browser_application;
+var $author$project$UIExplorer$FlagsDidNotParse = function (a) {
+	return {$: 'FlagsDidNotParse', a: a};
 };
-var $author$project$Main$Loading = {$: 'Loading'};
-var $elm$browser$Browser$Dom$getViewport = _Browser_withWindow(_Browser_getViewport);
-var $author$project$Main$init = function (_v0) {
-	return _Utils_Tuple2(
-		$author$project$Main$Loading,
-		A2($elm$core$Task$perform, $author$project$Main$GotViewport, $elm$browser$Browser$Dom$getViewport));
+var $author$project$UIExplorer$FlagsParsed = function (a) {
+	return {$: 'FlagsParsed', a: a};
 };
-var $author$project$Main$LoadedSpecific = function (a) {
-	return {$: 'LoadedSpecific', a: a};
+var $author$project$UIExplorer$Native = {$: 'Native'};
+var $author$project$UIExplorer$PageBuilder = function (a) {
+	return {$: 'PageBuilder', a: a};
 };
-var $author$project$Main$Resized = function (a) {
-	return {$: 'Resized', a: a};
+var $author$project$UIExplorer$PageMsg = function (a) {
+	return {$: 'PageMsg', a: a};
 };
-var $author$project$Main$StatelessSpecific = function (a) {
-	return {$: 'StatelessSpecific', a: a};
+var $author$project$UIExplorer$WindowResized = function (a) {
+	return {$: 'WindowResized', a: a};
 };
-var $author$project$Main$TimePassed = function (a) {
-	return {$: 'TimePassed', a: a};
+var $elm$core$Platform$Cmd$batch = _Platform_batch;
+var $elm$json$Json$Decode$decodeValue = _Json_run;
+var $elm$core$Set$Set_elm_builtin = function (a) {
+	return {$: 'Set_elm_builtin', a: a};
 };
-var $elm$core$Basics$always = F2(
-	function (a, _v0) {
-		return a;
-	});
-var $elm$core$Platform$Sub$batch = _Platform_batch;
-var $elm$time$Time$Every = F2(
-	function (a, b) {
-		return {$: 'Every', a: a, b: b};
-	});
-var $elm$time$Time$State = F2(
-	function (taggers, processes) {
-		return {processes: processes, taggers: taggers};
-	});
 var $elm$core$Dict$RBEmpty_elm_builtin = {$: 'RBEmpty_elm_builtin'};
 var $elm$core$Dict$empty = $elm$core$Dict$RBEmpty_elm_builtin;
-var $elm$time$Time$init = $elm$core$Task$succeed(
-	A2($elm$time$Time$State, $elm$core$Dict$empty, $elm$core$Dict$empty));
-var $elm$core$Basics$compare = _Utils_compare;
-var $elm$core$Dict$get = F2(
-	function (targetKey, dict) {
-		get:
+var $elm$core$Set$empty = $elm$core$Set$Set_elm_builtin($elm$core$Dict$empty);
+var $elm$core$List$drop = F2(
+	function (n, list) {
+		drop:
 		while (true) {
-			if (dict.$ === 'RBEmpty_elm_builtin') {
-				return $elm$core$Maybe$Nothing;
+			if (n <= 0) {
+				return list;
 			} else {
-				var key = dict.b;
-				var value = dict.c;
-				var left = dict.d;
-				var right = dict.e;
-				var _v1 = A2($elm$core$Basics$compare, targetKey, key);
-				switch (_v1.$) {
-					case 'LT':
-						var $temp$targetKey = targetKey,
-							$temp$dict = left;
-						targetKey = $temp$targetKey;
-						dict = $temp$dict;
-						continue get;
-					case 'EQ':
-						return $elm$core$Maybe$Just(value);
-					default:
-						var $temp$targetKey = targetKey,
-							$temp$dict = right;
-						targetKey = $temp$targetKey;
-						dict = $temp$dict;
-						continue get;
+				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;
 				}
 			}
 		}
@@ -5372,6 +5394,7 @@ var $elm$core$Dict$balance = F5(
 			}
 		}
 	});
+var $elm$core$Basics$compare = _Utils_compare;
 var $elm$core$Dict$insertHelp = F3(
 	function (key, value, dict) {
 		if (dict.$ === 'RBEmpty_elm_builtin') {
@@ -5420,28 +5443,45 @@ var $elm$core$Dict$insert = F3(
 			return x;
 		}
 	});
-var $elm$time$Time$addMySub = F2(
-	function (_v0, state) {
-		var interval = _v0.a;
-		var tagger = _v0.b;
-		var _v1 = A2($elm$core$Dict$get, interval, state);
-		if (_v1.$ === 'Nothing') {
-			return A3(
-				$elm$core$Dict$insert,
-				interval,
-				_List_fromArray(
-					[tagger]),
-				state);
-		} else {
-			var taggers = _v1.a;
-			return A3(
-				$elm$core$Dict$insert,
-				interval,
-				A2($elm$core$List$cons, tagger, taggers),
-				state);
-		}
+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$Process$kill = _Scheduler_kill;
+var $elm$core$Set$fromList = function (list) {
+	return A3($elm$core$List$foldl, $elm$core$Set$insert, $elm$core$Set$empty, list);
+};
+var $elm$url$Url$Builder$toQueryPair = function (_v0) {
+	var key = _v0.a;
+	var value = _v0.b;
+	return key + ('=' + value);
+};
+var $elm$url$Url$Builder$toQuery = function (parameters) {
+	if (!parameters.b) {
+		return '';
+	} else {
+		return '?' + A2(
+			$elm$core$String$join,
+			'&',
+			A2($elm$core$List$map, $elm$url$Url$Builder$toQueryPair, parameters));
+	}
+};
+var $elm$url$Url$Builder$absolute = F2(
+	function (pathSegments, parameters) {
+		return '/' + (A2($elm$core$String$join, '/', pathSegments) + $elm$url$Url$Builder$toQuery(parameters));
+	});
+var $elm$url$Url$percentEncode = _Url_percentEncode;
+var $author$project$UIExplorer$uiUrl = F2(
+	function (path, pageId) {
+		return A2(
+			$elm$url$Url$Builder$absolute,
+			_Utils_ap(
+				path,
+				A2($elm$core$List$map, $elm$url$Url$percentEncode, pageId)),
+			_List_Nil);
+	});
+var $author$project$UIExplorer$pageGroupToString = $author$project$UIExplorer$uiUrl(_List_Nil);
 var $elm$core$Dict$foldl = F3(
 	function (func, acc, dict) {
 		foldl:
@@ -5467,862 +5507,152 @@ var $elm$core$Dict$foldl = F3(
 			}
 		}
 	});
-var $elm$core$Dict$merge = F6(
-	function (leftStep, bothStep, rightStep, leftDict, rightDict, initialResult) {
-		var stepState = F3(
-			function (rKey, rValue, _v0) {
-				stepState:
-				while (true) {
-					var list = _v0.a;
-					var result = _v0.b;
-					if (!list.b) {
-						return _Utils_Tuple2(
-							list,
-							A3(rightStep, rKey, rValue, result));
-					} else {
-						var _v2 = list.a;
-						var lKey = _v2.a;
-						var lValue = _v2.b;
-						var rest = list.b;
-						if (_Utils_cmp(lKey, rKey) < 0) {
-							var $temp$rKey = rKey,
-								$temp$rValue = rValue,
-								$temp$_v0 = _Utils_Tuple2(
-								rest,
-								A3(leftStep, lKey, lValue, result));
-							rKey = $temp$rKey;
-							rValue = $temp$rValue;
-							_v0 = $temp$_v0;
-							continue stepState;
-						} else {
-							if (_Utils_cmp(lKey, rKey) > 0) {
-								return _Utils_Tuple2(
-									list,
-									A3(rightStep, rKey, rValue, result));
-							} else {
-								return _Utils_Tuple2(
-									rest,
-									A4(bothStep, lKey, lValue, rValue, result));
-							}
-						}
-					}
-				}
-			});
-		var _v3 = A3(
-			$elm$core$Dict$foldl,
-			stepState,
-			_Utils_Tuple2(
-				$elm$core$Dict$toList(leftDict),
-				initialResult),
-			rightDict);
-		var leftovers = _v3.a;
-		var intermediateResult = _v3.b;
-		return A3(
-			$elm$core$List$foldl,
-			F2(
-				function (_v4, result) {
-					var k = _v4.a;
-					var v = _v4.b;
-					return A3(leftStep, k, v, result);
-				}),
-			intermediateResult,
-			leftovers);
-	});
-var $elm$core$Platform$sendToSelf = _Platform_sendToSelf;
-var $elm$time$Time$Name = function (a) {
-	return {$: 'Name', a: a};
-};
-var $elm$time$Time$Offset = function (a) {
-	return {$: 'Offset', a: a};
-};
-var $elm$time$Time$Zone = F2(
-	function (a, b) {
-		return {$: 'Zone', a: a, b: b};
-	});
-var $elm$time$Time$customZone = $elm$time$Time$Zone;
-var $elm$time$Time$setInterval = _Time_setInterval;
-var $elm$core$Process$spawn = _Scheduler_spawn;
-var $elm$time$Time$spawnHelp = F3(
-	function (router, intervals, processes) {
-		if (!intervals.b) {
-			return $elm$core$Task$succeed(processes);
-		} else {
-			var interval = intervals.a;
-			var rest = intervals.b;
-			var spawnTimer = $elm$core$Process$spawn(
-				A2(
-					$elm$time$Time$setInterval,
-					interval,
-					A2($elm$core$Platform$sendToSelf, router, interval)));
-			var spawnRest = function (id) {
-				return A3(
-					$elm$time$Time$spawnHelp,
-					router,
-					rest,
-					A3($elm$core$Dict$insert, interval, id, processes));
-			};
-			return A2($elm$core$Task$andThen, spawnRest, spawnTimer);
-		}
-	});
-var $elm$time$Time$onEffects = F3(
-	function (router, subs, _v0) {
-		var processes = _v0.processes;
-		var rightStep = F3(
-			function (_v6, id, _v7) {
-				var spawns = _v7.a;
-				var existing = _v7.b;
-				var kills = _v7.c;
-				return _Utils_Tuple3(
-					spawns,
-					existing,
-					A2(
-						$elm$core$Task$andThen,
-						function (_v5) {
-							return kills;
-						},
-						$elm$core$Process$kill(id)));
-			});
-		var newTaggers = A3($elm$core$List$foldl, $elm$time$Time$addMySub, $elm$core$Dict$empty, subs);
-		var leftStep = F3(
-			function (interval, taggers, _v4) {
-				var spawns = _v4.a;
-				var existing = _v4.b;
-				var kills = _v4.c;
-				return _Utils_Tuple3(
-					A2($elm$core$List$cons, interval, spawns),
-					existing,
-					kills);
-			});
-		var bothStep = F4(
-			function (interval, taggers, id, _v3) {
-				var spawns = _v3.a;
-				var existing = _v3.b;
-				var kills = _v3.c;
-				return _Utils_Tuple3(
-					spawns,
-					A3($elm$core$Dict$insert, interval, id, existing),
-					kills);
-			});
-		var _v1 = A6(
-			$elm$core$Dict$merge,
-			leftStep,
-			bothStep,
-			rightStep,
-			newTaggers,
-			processes,
-			_Utils_Tuple3(
-				_List_Nil,
-				$elm$core$Dict$empty,
-				$elm$core$Task$succeed(_Utils_Tuple0)));
-		var spawnList = _v1.a;
-		var existingDict = _v1.b;
-		var killTask = _v1.c;
-		return A2(
-			$elm$core$Task$andThen,
-			function (newProcesses) {
-				return $elm$core$Task$succeed(
-					A2($elm$time$Time$State, newTaggers, newProcesses));
-			},
-			A2(
-				$elm$core$Task$andThen,
-				function (_v2) {
-					return A3($elm$time$Time$spawnHelp, router, spawnList, existingDict);
-				},
-				killTask));
-	});
-var $elm$time$Time$Posix = function (a) {
-	return {$: 'Posix', a: a};
-};
-var $elm$time$Time$millisToPosix = $elm$time$Time$Posix;
-var $elm$time$Time$now = _Time_now($elm$time$Time$millisToPosix);
-var $elm$time$Time$onSelfMsg = F3(
-	function (router, interval, state) {
-		var _v0 = A2($elm$core$Dict$get, interval, state.taggers);
-		if (_v0.$ === 'Nothing') {
-			return $elm$core$Task$succeed(state);
-		} else {
-			var taggers = _v0.a;
-			var tellTaggers = function (time) {
-				return $elm$core$Task$sequence(
-					A2(
-						$elm$core$List$map,
-						function (tagger) {
-							return A2(
-								$elm$core$Platform$sendToApp,
-								router,
-								tagger(time));
-						},
-						taggers));
-			};
-			return A2(
-				$elm$core$Task$andThen,
-				function (_v1) {
-					return $elm$core$Task$succeed(state);
-				},
-				A2($elm$core$Task$andThen, tellTaggers, $elm$time$Time$now));
-		}
-	});
-var $elm$core$Basics$composeL = F3(
-	function (g, f, x) {
-		return g(
-			f(x));
-	});
-var $elm$time$Time$subMap = F2(
-	function (f, _v0) {
-		var interval = _v0.a;
-		var tagger = _v0.b;
-		return A2(
-			$elm$time$Time$Every,
-			interval,
-			A2($elm$core$Basics$composeL, f, tagger));
-	});
-_Platform_effectManagers['Time'] = _Platform_createManager($elm$time$Time$init, $elm$time$Time$onEffects, $elm$time$Time$onSelfMsg, 0, $elm$time$Time$subMap);
-var $elm$time$Time$subscription = _Platform_leaf('Time');
-var $elm$time$Time$every = F2(
-	function (interval, tagger) {
-		return $elm$time$Time$subscription(
-			A2($elm$time$Time$Every, interval, tagger));
-	});
-var $elm$core$Platform$Sub$map = _Platform_map;
-var $elm$browser$Browser$Events$Window = {$: 'Window'};
-var $elm$json$Json$Decode$field = _Json_decodeField;
-var $elm$json$Json$Decode$int = _Json_decodeInt;
-var $elm$browser$Browser$Events$MySub = F3(
-	function (a, b, c) {
-		return {$: 'MySub', a: a, b: b, c: c};
-	});
-var $elm$browser$Browser$Events$State = F2(
-	function (subs, pids) {
-		return {pids: pids, subs: subs};
-	});
-var $elm$browser$Browser$Events$init = $elm$core$Task$succeed(
-	A2($elm$browser$Browser$Events$State, _List_Nil, $elm$core$Dict$empty));
-var $elm$browser$Browser$Events$nodeToKey = function (node) {
-	if (node.$ === 'Document') {
-		return 'd_';
-	} else {
-		return 'w_';
-	}
-};
-var $elm$browser$Browser$Events$addKey = function (sub) {
-	var node = sub.a;
-	var name = sub.b;
-	return _Utils_Tuple2(
-		_Utils_ap(
-			$elm$browser$Browser$Events$nodeToKey(node),
-			name),
-		sub);
-};
-var $elm$core$Dict$fromList = function (assocs) {
-	return A3(
-		$elm$core$List$foldl,
-		F2(
-			function (_v0, dict) {
-				var key = _v0.a;
-				var value = _v0.b;
-				return A3($elm$core$Dict$insert, key, value, dict);
-			}),
-		$elm$core$Dict$empty,
-		assocs);
-};
-var $elm$browser$Browser$Events$Event = F2(
-	function (key, event) {
-		return {event: event, key: key};
-	});
-var $elm$browser$Browser$Events$spawn = F3(
-	function (router, key, _v0) {
-		var node = _v0.a;
-		var name = _v0.b;
-		var actualNode = function () {
-			if (node.$ === 'Document') {
-				return _Browser_doc;
-			} else {
-				return _Browser_window;
-			}
-		}();
-		return A2(
-			$elm$core$Task$map,
-			function (value) {
-				return _Utils_Tuple2(key, value);
-			},
-			A3(
-				_Browser_on,
-				actualNode,
-				name,
-				function (event) {
-					return A2(
-						$elm$core$Platform$sendToSelf,
-						router,
-						A2($elm$browser$Browser$Events$Event, key, event));
-				}));
-	});
 var $elm$core$Dict$union = F2(
 	function (t1, t2) {
 		return A3($elm$core$Dict$foldl, $elm$core$Dict$insert, t2, t1);
 	});
-var $elm$browser$Browser$Events$onEffects = F3(
-	function (router, subs, state) {
-		var stepRight = F3(
-			function (key, sub, _v6) {
-				var deads = _v6.a;
-				var lives = _v6.b;
-				var news = _v6.c;
-				return _Utils_Tuple3(
-					deads,
-					lives,
-					A2(
-						$elm$core$List$cons,
-						A3($elm$browser$Browser$Events$spawn, router, key, sub),
-						news));
-			});
-		var stepLeft = F3(
-			function (_v4, pid, _v5) {
-				var deads = _v5.a;
-				var lives = _v5.b;
-				var news = _v5.c;
-				return _Utils_Tuple3(
-					A2($elm$core$List$cons, pid, deads),
-					lives,
-					news);
-			});
-		var stepBoth = F4(
-			function (key, pid, _v2, _v3) {
-				var deads = _v3.a;
-				var lives = _v3.b;
-				var news = _v3.c;
-				return _Utils_Tuple3(
-					deads,
-					A3($elm$core$Dict$insert, key, pid, lives),
-					news);
-			});
-		var newSubs = A2($elm$core$List$map, $elm$browser$Browser$Events$addKey, subs);
-		var _v0 = A6(
-			$elm$core$Dict$merge,
-			stepLeft,
-			stepBoth,
-			stepRight,
-			state.pids,
-			$elm$core$Dict$fromList(newSubs),
-			_Utils_Tuple3(_List_Nil, $elm$core$Dict$empty, _List_Nil));
-		var deadPids = _v0.a;
-		var livePids = _v0.b;
-		var makeNewPids = _v0.c;
+var $elm$core$Set$union = F2(
+	function (_v0, _v1) {
+		var dict1 = _v0.a;
+		var dict2 = _v1.a;
+		return $elm$core$Set$Set_elm_builtin(
+			A2($elm$core$Dict$union, dict1, dict2));
+	});
+var $author$project$UIExplorer$expandPage = F2(
+	function (page, expandedGroups) {
 		return A2(
-			$elm$core$Task$andThen,
-			function (pids) {
-				return $elm$core$Task$succeed(
-					A2(
-						$elm$browser$Browser$Events$State,
-						newSubs,
-						A2(
-							$elm$core$Dict$union,
-							livePids,
-							$elm$core$Dict$fromList(pids))));
-			},
-			A2(
-				$elm$core$Task$andThen,
-				function (_v1) {
-					return $elm$core$Task$sequence(makeNewPids);
-				},
-				$elm$core$Task$sequence(
-					A2($elm$core$List$map, $elm$core$Process$kill, deadPids))));
-	});
-var $elm$core$List$maybeCons = F3(
-	function (f, mx, xs) {
-		var _v0 = f(mx);
-		if (_v0.$ === 'Just') {
-			var x = _v0.a;
-			return A2($elm$core$List$cons, x, xs);
-		} else {
-			return xs;
-		}
-	});
-var $elm$core$List$filterMap = F2(
-	function (f, xs) {
-		return A3(
-			$elm$core$List$foldr,
-			$elm$core$List$maybeCons(f),
-			_List_Nil,
-			xs);
-	});
-var $elm$browser$Browser$Events$onSelfMsg = F3(
-	function (router, _v0, state) {
-		var key = _v0.key;
-		var event = _v0.event;
-		var toMessage = function (_v2) {
-			var subKey = _v2.a;
-			var _v3 = _v2.b;
-			var node = _v3.a;
-			var name = _v3.b;
-			var decoder = _v3.c;
-			return _Utils_eq(subKey, key) ? A2(_Browser_decodeEvent, decoder, event) : $elm$core$Maybe$Nothing;
-		};
-		var messages = A2($elm$core$List$filterMap, toMessage, state.subs);
-		return A2(
-			$elm$core$Task$andThen,
-			function (_v1) {
-				return $elm$core$Task$succeed(state);
-			},
-			$elm$core$Task$sequence(
+			$elm$core$Set$union,
+			expandedGroups,
+			$elm$core$Set$fromList(
 				A2(
 					$elm$core$List$map,
-					$elm$core$Platform$sendToApp(router),
-					messages)));
+					$author$project$UIExplorer$pageGroupToString,
+					A3(
+						$elm$core$List$foldr,
+						F2(
+							function (segment, state) {
+								return A2(
+									$elm$core$List$map,
+									function (a) {
+										return A2($elm$core$List$cons, segment, a);
+									},
+									A2($elm$core$List$cons, _List_Nil, state));
+							}),
+						_List_Nil,
+						$elm$core$List$reverse(
+							A2(
+								$elm$core$List$drop,
+								1,
+								$elm$core$List$reverse(page)))))));
 	});
-var $elm$browser$Browser$Events$subMap = F2(
-	function (func, _v0) {
-		var node = _v0.a;
-		var name = _v0.b;
-		var decoder = _v0.c;
-		return A3(
-			$elm$browser$Browser$Events$MySub,
-			node,
-			name,
-			A2($elm$json$Json$Decode$map, func, decoder));
-	});
-_Platform_effectManagers['Browser.Events'] = _Platform_createManager($elm$browser$Browser$Events$init, $elm$browser$Browser$Events$onEffects, $elm$browser$Browser$Events$onSelfMsg, 0, $elm$browser$Browser$Events$subMap);
-var $elm$browser$Browser$Events$subscription = _Platform_leaf('Browser.Events');
-var $elm$browser$Browser$Events$on = F3(
-	function (node, name, decoder) {
-		return $elm$browser$Browser$Events$subscription(
-			A3($elm$browser$Browser$Events$MySub, node, name, decoder));
-	});
-var $elm$browser$Browser$Events$onResize = function (func) {
-	return A3(
-		$elm$browser$Browser$Events$on,
-		$elm$browser$Browser$Events$Window,
-		'resize',
-		A2(
-			$elm$json$Json$Decode$field,
-			'target',
-			A3(
-				$elm$json$Json$Decode$map2,
-				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 $elm$core$List$singleton = function (value) {
-	return _List_fromArray(
-		[value]);
-};
-var $author$project$Stateless$ExampleSpecific = function (a) {
-	return {$: 'ExampleSpecific', a: a};
-};
-var $author$project$Data$Example$AppBar = function (a) {
-	return {$: 'AppBar', 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$Icon = function (a) {
-	return {$: 'Icon', a: a};
-};
-var $author$project$Data$Example$Layout = function (a) {
-	return {$: 'Layout', 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$ProgressIndicator = function (a) {
-	return {$: 'ProgressIndicator', a: a};
-};
-var $author$project$Data$Example$Select = function (a) {
-	return {$: 'Select', a: a};
-};
-var $author$project$Data$Example$Sheet = function (a) {
-	return {$: 'Sheet', a: a};
-};
-var $author$project$Data$Example$Snackbar = function (a) {
-	return {$: 'Snackbar', a: a};
-};
-var $author$project$Data$Example$SortTable = function (a) {
-	return {$: 'SortTable', a: a};
-};
-var $author$project$Data$Example$Switch = function (a) {
-	return {$: 'Switch', 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 $elm$core$Platform$Sub$none = $elm$core$Platform$Sub$batch(_List_Nil);
-var $author$project$Example$AppBar$subscriptions = function (_v0) {
-	return $elm$core$Platform$Sub$none;
-};
-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$Icon$subscriptions = function (_v0) {
-	return $elm$core$Platform$Sub$none;
-};
-var $author$project$Example$Layout$Resized = function (a) {
-	return {$: 'Resized', a: a};
-};
-var $author$project$Example$Layout$TimePassed = function (a) {
-	return {$: 'TimePassed', a: a};
-};
-var $author$project$Example$Layout$subscriptions = function (_v0) {
-	return $elm$core$Platform$Sub$batch(
-		_List_fromArray(
-			[
-				$elm$browser$Browser$Events$onResize(
-				F2(
-					function (h, w) {
-						return $author$project$Example$Layout$Resized(
-							{height: h, width: w});
-					})),
-				A2(
-				$elm$time$Time$every,
-				50,
-				$elm$core$Basics$always(
-					$author$project$Example$Layout$TimePassed(50)))
-			]));
-};
-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$ProgressIndicator$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$Sheet$subscriptions = function (_v0) {
-	return $elm$core$Platform$Sub$none;
-};
-var $author$project$Example$Snackbar$TimePassed = function (a) {
-	return {$: 'TimePassed', a: a};
-};
-var $author$project$Example$Snackbar$subscriptions = function (_v0) {
-	return A2(
-		$elm$time$Time$every,
-		50,
-		$elm$core$Basics$always(
-			$author$project$Example$Snackbar$TimePassed(50)));
-};
-var $author$project$Example$SortTable$subscriptions = function (_v0) {
-	return $elm$core$Platform$Sub$none;
-};
-var $author$project$Example$Switch$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 $elm$core$Platform$Cmd$batch = _Platform_batch;
+var $elm$browser$Browser$Dom$getViewport = _Browser_withWindow(_Browser_getViewport);
+var $elm$core$Platform$Cmd$map = _Platform_map;
 var $elm$core$Platform$Cmd$none = $elm$core$Platform$Cmd$batch(_List_Nil);
-var $author$project$Example$AppBar$update = F2(
-	function (msg, menu) {
-		switch (msg.$) {
-			case 'SetDesign':
-				var bool = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						menu,
-						{isMenuBar: bool}),
-					$elm$core$Platform$Cmd$none);
-			case 'SetSelected':
-				var _int = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						menu,
-						{selected: _int}),
-					$elm$core$Platform$Cmd$none);
-			default:
-				var string = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						menu,
-						{search: string}),
-					$elm$core$Platform$Cmd$none);
-		}
-	});
-var $elm$core$Basics$ge = _Utils_ge;
-var $author$project$Example$Button$update = F2(
-	function (msg, model) {
-		switch (msg.$) {
-			case 'Increase':
-				var _int = msg.a;
-				return _Utils_Tuple2(model + _int, $elm$core$Platform$Cmd$none);
-			case 'Decrease':
-				var _int = msg.a;
-				return _Utils_Tuple2(
-					((model - _int) >= 0) ? (model - _int) : model,
-					$elm$core$Platform$Cmd$none);
-			default:
-				return _Utils_Tuple2(0, $elm$core$Platform$Cmd$none);
-		}
-	});
-var $author$project$Example$Dialog$IsOpen = function (a) {
-	return {$: 'IsOpen', a: a};
-};
-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$Icon$update = F2(
-	function (msg, _v0) {
-		return _Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none);
-	});
-var $turboMaCk$queue$Queue$Queue = F2(
-	function (a, b) {
-		return {$: 'Queue', a: a, b: b};
-	});
-var $turboMaCk$queue$Queue$queue = F2(
-	function (fl, rl) {
-		if (!fl.b) {
-			return A2(
-				$turboMaCk$queue$Queue$Queue,
-				$elm$core$List$reverse(rl),
-				_List_Nil);
-		} else {
-			return A2($turboMaCk$queue$Queue$Queue, fl, rl);
-		}
-	});
-var $turboMaCk$queue$Queue$enqueue = F2(
-	function (a, _v0) {
-		var fl = _v0.a;
-		var rl = _v0.b;
-		return A2(
-			$turboMaCk$queue$Queue$queue,
-			fl,
-			A2($elm$core$List$cons, a, rl));
-	});
-var $author$project$Widget$Snackbar$insertFor = F3(
-	function (removeIn, a, model) {
-		var _v0 = model.current;
-		if (_v0.$ === 'Nothing') {
-			return _Utils_update(
-				model,
-				{
-					current: $elm$core$Maybe$Just(
-						_Utils_Tuple2(a, removeIn))
-				});
-		} else {
-			return _Utils_update(
-				model,
-				{
-					queue: A2(
-						$turboMaCk$queue$Queue$enqueue,
-						_Utils_Tuple2(a, removeIn),
-						model.queue)
-				});
-		}
-	});
-var $author$project$Widget$Snackbar$insert = $author$project$Widget$Snackbar$insertFor(10000);
-var $turboMaCk$queue$Queue$dequeue = function (_v0) {
-	var fl = _v0.a;
-	var rl = _v0.b;
-	if (!fl.b) {
-		return _Utils_Tuple2(
-			$elm$core$Maybe$Nothing,
-			A2($turboMaCk$queue$Queue$Queue, _List_Nil, _List_Nil));
+var $elm$core$List$head = function (list) {
+	if (list.b) {
+		var x = list.a;
+		var xs = list.b;
+		return $elm$core$Maybe$Just(x);
 	} else {
-		var head = fl.a;
-		var tail = fl.b;
-		return _Utils_Tuple2(
-			$elm$core$Maybe$Just(head),
-			A2($turboMaCk$queue$Queue$queue, tail, rl));
+		return $elm$core$Maybe$Nothing;
 	}
 };
-var $author$project$Widget$Snackbar$dismiss = function (model) {
-	return _Utils_update(
-		model,
-		{current: $elm$core$Maybe$Nothing});
-};
-var $elm$core$Maybe$map = F2(
-	function (f, maybe) {
-		if (maybe.$ === 'Just') {
-			var value = maybe.a;
-			return $elm$core$Maybe$Just(
-				f(value));
-		} else {
+var $elm$url$Url$Parser$State = F5(
+	function (visited, unvisited, params, frag, value) {
+		return {frag: frag, params: params, unvisited: unvisited, value: value, visited: visited};
+	});
+var $elm$url$Url$Parser$getFirstMatch = function (states) {
+	getFirstMatch:
+	while (true) {
+		if (!states.b) {
 			return $elm$core$Maybe$Nothing;
-		}
-	});
-var $elm$core$Tuple$mapSecond = F2(
-	function (func, _v0) {
-		var x = _v0.a;
-		var y = _v0.b;
-		return _Utils_Tuple2(
-			x,
-			func(y));
-	});
-var $elm$core$Basics$negate = function (n) {
-	return -n;
-};
-var $author$project$Widget$Snackbar$timePassed = F2(
-	function (ms, model) {
-		var _v0 = model.current;
-		if (_v0.$ === 'Nothing') {
-			var _v1 = $turboMaCk$queue$Queue$dequeue(model.queue);
-			var c = _v1.a;
-			var queue = _v1.b;
-			return _Utils_update(
-				model,
-				{current: c, queue: queue});
 		} else {
-			var _v2 = _v0.a;
-			var removeIn = _v2.b;
-			return (_Utils_cmp(removeIn, ms) < 1) ? $author$project$Widget$Snackbar$dismiss(model) : _Utils_update(
-				model,
-				{
-					current: A2(
-						$elm$core$Maybe$map,
-						$elm$core$Tuple$mapSecond(
-							$elm$core$Basics$add(-ms)),
-						model.current)
-				});
+			var state = states.a;
+			var rest = states.b;
+			var _v1 = state.unvisited;
+			if (!_v1.b) {
+				return $elm$core$Maybe$Just(state.value);
+			} else {
+				if ((_v1.a === '') && (!_v1.b.b)) {
+					return $elm$core$Maybe$Just(state.value);
+				} else {
+					var $temp$states = rest;
+					states = $temp$states;
+					continue getFirstMatch;
+				}
+			}
 		}
-	});
-var $author$project$Example$Layout$update = F2(
-	function (msg, model) {
-		switch (msg.$) {
-			case 'ChangedSidebar':
-				var maybePart = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{active: maybePart}),
-					$elm$core$Platform$Cmd$none);
-			case 'Resized':
-				var window = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{window: window}),
-					$elm$core$Platform$Cmd$none);
-			case 'SetSelected':
-				var _int = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{selected: _int}),
-					$elm$core$Platform$Cmd$none);
-			case 'AddSnackbar':
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							snackbar: A2($author$project$Widget$Snackbar$insert, 'This is a message', model.snackbar)
-						}),
-					$elm$core$Platform$Cmd$none);
-			case 'ShowDialog':
-				var bool = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{showDialog: bool}),
-					$elm$core$Platform$Cmd$none);
-			case 'SetSearchText':
-				var maybeString = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{searchText: maybeString}),
-					$elm$core$Platform$Cmd$none);
-			default:
-				var sec = msg.a;
-				return _Utils_Tuple2(
-					function () {
-						var _v1 = model.active;
-						_v1$2:
-						while (true) {
-							if (_v1.$ === 'Just') {
-								switch (_v1.a.$) {
-									case 'LeftSheet':
-										var _v2 = _v1.a;
-										return model;
-									case 'RightSheet':
-										var _v3 = _v1.a;
-										return model;
-									default:
-										break _v1$2;
-								}
-							} else {
-								break _v1$2;
-							}
-						}
-						return _Utils_update(
-							model,
-							{
-								snackbar: A2($author$project$Widget$Snackbar$timePassed, sec, model.snackbar)
-							});
-					}(),
-					$elm$core$Platform$Cmd$none);
-		}
-	});
-var $author$project$Example$List$IsExpanded = function (a) {
-	return {$: 'IsExpanded', a: a};
+	}
 };
-var $author$project$Example$List$update = F2(
-	function (msg, _v0) {
-		var bool = msg.a;
-		return _Utils_Tuple2(
-			$author$project$Example$List$IsExpanded(bool),
-			$elm$core$Platform$Cmd$none);
-	});
-var $author$project$Example$Modal$IsEnabled = function (a) {
-	return {$: 'IsEnabled', a: a};
-};
-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 $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$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);
-		if (_v0.$ === 'Just') {
-			return true;
+var $elm$url$Url$Parser$removeFinalEmpty = function (segments) {
+	if (!segments.b) {
+		return _List_Nil;
+	} else {
+		if ((segments.a === '') && (!segments.b.b)) {
+			return _List_Nil;
 		} else {
-			return false;
+			var segment = segments.a;
+			var rest = segments.b;
+			return A2(
+				$elm$core$List$cons,
+				segment,
+				$elm$url$Url$Parser$removeFinalEmpty(rest));
+		}
+	}
+};
+var $elm$url$Url$Parser$preparePath = function (path) {
+	var _v0 = A2($elm$core$String$split, '/', path);
+	if (_v0.b && (_v0.a === '')) {
+		var segments = _v0.b;
+		return $elm$url$Url$Parser$removeFinalEmpty(segments);
+	} else {
+		var segments = _v0;
+		return $elm$url$Url$Parser$removeFinalEmpty(segments);
+	}
+};
+var $elm$url$Url$Parser$addToParametersHelp = F2(
+	function (value, maybeList) {
+		if (maybeList.$ === 'Nothing') {
+			return $elm$core$Maybe$Just(
+				_List_fromArray(
+					[value]));
+		} else {
+			var list = maybeList.a;
+			return $elm$core$Maybe$Just(
+				A2($elm$core$List$cons, value, list));
 		}
 	});
-var $elm$core$Set$member = F2(
-	function (key, _v0) {
-		var dict = _v0.a;
-		return A2($elm$core$Dict$member, key, dict);
+var $elm$url$Url$percentDecode = _Url_percentDecode;
+var $elm$core$Dict$get = F2(
+	function (targetKey, dict) {
+		get:
+		while (true) {
+			if (dict.$ === 'RBEmpty_elm_builtin') {
+				return $elm$core$Maybe$Nothing;
+			} else {
+				var key = dict.b;
+				var value = dict.c;
+				var left = dict.d;
+				var right = dict.e;
+				var _v1 = A2($elm$core$Basics$compare, targetKey, key);
+				switch (_v1.$) {
+					case 'LT':
+						var $temp$targetKey = targetKey,
+							$temp$dict = left;
+						targetKey = $temp$targetKey;
+						dict = $temp$dict;
+						continue get;
+					case 'EQ':
+						return $elm$core$Maybe$Just(value);
+					default:
+						var $temp$targetKey = targetKey,
+							$temp$dict = right;
+						targetKey = $temp$targetKey;
+						dict = $temp$dict;
+						continue get;
+				}
+			}
+		}
 	});
 var $elm$core$Dict$getMin = function (dict) {
 	getMin:
@@ -6686,665 +6016,665 @@ var $elm$core$Dict$remove = F2(
 			return x;
 		}
 	});
-var $elm$core$Set$remove = F2(
-	function (key, _v0) {
-		var dict = _v0.a;
-		return $elm$core$Set$Set_elm_builtin(
-			A2($elm$core$Dict$remove, key, dict));
-	});
-var $author$project$Example$MultiSelect$update = F2(
-	function (msg, _v0) {
-		var selected = _v0.a;
-		var _int = msg.a;
-		return _Utils_Tuple2(
-			$author$project$Example$MultiSelect$Selected(
-				(A2($elm$core$Set$member, _int, selected) ? $elm$core$Set$remove(_int) : $elm$core$Set$insert(_int))(selected)),
-			$elm$core$Platform$Cmd$none);
-	});
-var $author$project$Example$ProgressIndicator$MaybeProgress = function (a) {
-	return {$: 'MaybeProgress', a: a};
-};
-var $author$project$Example$ProgressIndicator$update = F2(
-	function (msg, _v0) {
-		var maybeFloat = msg.a;
-		return _Utils_Tuple2(
-			$author$project$Example$ProgressIndicator$MaybeProgress(maybeFloat),
-			$elm$core$Platform$Cmd$none);
-	});
-var $author$project$Example$Select$Selected = function (a) {
-	return {$: 'Selected', a: a};
-};
-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 $author$project$Example$Sheet$IsEnabled = function (a) {
-	return {$: 'IsEnabled', a: a};
-};
-var $author$project$Example$Sheet$update = F2(
-	function (msg, _v0) {
-		var bool = msg.a;
-		return _Utils_Tuple2(
-			$author$project$Example$Sheet$IsEnabled(bool),
-			$elm$core$Platform$Cmd$none);
-	});
-var $author$project$Example$Snackbar$update = F2(
-	function (msg, model) {
-		if (msg.$ === 'TimePassed') {
-			var _int = msg.a;
-			return _Utils_Tuple2(
-				A2($author$project$Widget$Snackbar$timePassed, _int, model),
-				$elm$core$Platform$Cmd$none);
+var $elm$core$Dict$update = F3(
+	function (targetKey, alter, dictionary) {
+		var _v0 = alter(
+			A2($elm$core$Dict$get, targetKey, dictionary));
+		if (_v0.$ === 'Just') {
+			var value = _v0.a;
+			return A3($elm$core$Dict$insert, targetKey, value, dictionary);
 		} else {
-			var snack = msg.a;
-			return _Utils_Tuple2(
-				A2($author$project$Widget$Snackbar$insert, snack, model),
-				$elm$core$Platform$Cmd$none);
+			return A2($elm$core$Dict$remove, targetKey, dictionary);
 		}
 	});
-var $elm$core$Basics$not = _Basics_not;
-var $author$project$Example$SortTable$update = F2(
-	function (msg, model) {
-		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$Switch$IsButtonEnabled = function (a) {
-	return {$: 'IsButtonEnabled', a: a};
-};
-var $author$project$Example$Switch$update = F2(
-	function (msg, _v0) {
-		var buttonEnabled = _v0.a;
-		return _Utils_Tuple2(
-			$author$project$Example$Switch$IsButtonEnabled(!buttonEnabled),
-			$elm$core$Platform$Cmd$none);
-	});
-var $author$project$Example$Tab$Selected = function (a) {
-	return {$: 'Selected', a: a};
-};
-var $author$project$Example$Tab$update = F2(
-	function (msg, _v0) {
-		var _int = msg.a;
-		return _Utils_Tuple2(
-			$author$project$Example$Tab$Selected(
-				$elm$core$Maybe$Just(_int)),
-			$elm$core$Platform$Cmd$none);
-	});
-var $author$project$Example$TextInput$update = F2(
-	function (msg, model) {
-		if (msg.$ === 'ToggleTextInputChip') {
-			var string = msg.a;
-			return _Utils_Tuple2(
-				_Utils_update(
-					model,
-					{
-						chipTextInput: (A2($elm$core$Set$member, string, model.chipTextInput) ? $elm$core$Set$remove(string) : $elm$core$Set$insert(string))(model.chipTextInput)
-					}),
-				$elm$core$Platform$Cmd$none);
+var $elm$url$Url$Parser$addParam = F2(
+	function (segment, dict) {
+		var _v0 = A2($elm$core$String$split, '=', segment);
+		if ((_v0.b && _v0.b.b) && (!_v0.b.b.b)) {
+			var rawKey = _v0.a;
+			var _v1 = _v0.b;
+			var rawValue = _v1.a;
+			var _v2 = $elm$url$Url$percentDecode(rawKey);
+			if (_v2.$ === 'Nothing') {
+				return dict;
+			} else {
+				var key = _v2.a;
+				var _v3 = $elm$url$Url$percentDecode(rawValue);
+				if (_v3.$ === 'Nothing') {
+					return dict;
+				} else {
+					var value = _v3.a;
+					return A3(
+						$elm$core$Dict$update,
+						key,
+						$elm$url$Url$Parser$addToParametersHelp(value),
+						dict);
+				}
+			}
 		} else {
-			var string = msg.a;
-			return _Utils_Tuple2(
-				_Utils_update(
-					model,
-					{textInput: string}),
-				$elm$core$Platform$Cmd$none);
+			return dict;
 		}
 	});
-var $author$project$Data$Example$upgradeRecord = {
-	appBar: {
-		from: function ($) {
-			return $.appBar;
-		},
-		msgMapper: $author$project$Data$Example$AppBar,
-		subscriptionsFun: $author$project$Example$AppBar$subscriptions,
-		to: F2(
-			function (model, a) {
-				return _Utils_update(
-					model,
-					{appBar: a});
-			}),
-		updateFun: $author$project$Example$AppBar$update
-	},
-	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
-	},
-	icon: {
-		from: function ($) {
-			return $.icon;
-		},
-		msgMapper: $author$project$Data$Example$Icon,
-		subscriptionsFun: $author$project$Example$Icon$subscriptions,
-		to: F2(
-			function (model, a) {
-				return _Utils_update(
-					model,
-					{icon: a});
-			}),
-		updateFun: $author$project$Example$Icon$update
-	},
-	layout: {
-		from: function ($) {
-			return $.layout;
-		},
-		msgMapper: $author$project$Data$Example$Layout,
-		subscriptionsFun: $author$project$Example$Layout$subscriptions,
-		to: F2(
-			function (model, a) {
-				return _Utils_update(
-					model,
-					{layout: a});
-			}),
-		updateFun: $author$project$Example$Layout$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
-	},
-	progressIndicator: {
-		from: function ($) {
-			return $.progressIndicator;
-		},
-		msgMapper: $author$project$Data$Example$ProgressIndicator,
-		subscriptionsFun: $author$project$Example$ProgressIndicator$subscriptions,
-		to: F2(
-			function (model, a) {
-				return _Utils_update(
-					model,
-					{progressIndicator: a});
-			}),
-		updateFun: $author$project$Example$ProgressIndicator$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
-	},
-	sheet: {
-		from: function ($) {
-			return $.sheet;
-		},
-		msgMapper: $author$project$Data$Example$Sheet,
-		subscriptionsFun: $author$project$Example$Sheet$subscriptions,
-		to: F2(
-			function (model, a) {
-				return _Utils_update(
-					model,
-					{sheet: a});
-			}),
-		updateFun: $author$project$Example$Sheet$update
-	},
-	snackbar: {
-		from: function ($) {
-			return $.snackbar;
-		},
-		msgMapper: $author$project$Data$Example$Snackbar,
-		subscriptionsFun: $author$project$Example$Snackbar$subscriptions,
-		to: F2(
-			function (model, a) {
-				return _Utils_update(
-					model,
-					{snackbar: a});
-			}),
-		updateFun: $author$project$Example$Snackbar$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
-	},
-	_switch: {
-		from: function ($) {
-			return $._switch;
-		},
-		msgMapper: $author$project$Data$Example$Switch,
-		subscriptionsFun: $author$project$Example$Switch$subscriptions,
-		to: F2(
-			function (model, a) {
-				return _Utils_update(
-					model,
-					{_switch: a});
-			}),
-		updateFun: $author$project$Example$Switch$update
-	},
-	tab: {
-		from: function ($) {
-			return $.tab;
-		},
-		msgMapper: $author$project$Data$Example$Tab,
-		subscriptionsFun: $author$project$Example$Tab$subscriptions,
-		to: F2(
-			function (model, a) {
-				return _Utils_update(
-					model,
-					{tab: a});
-			}),
-		updateFun: $author$project$Example$Tab$update
-	},
-	textInput: {
-		from: function ($) {
-			return $.textInput;
-		},
-		msgMapper: $author$project$Data$Example$TextInput,
-		subscriptionsFun: $author$project$Example$TextInput$subscriptions,
-		to: F2(
-			function (model, a) {
-				return _Utils_update(
-					model,
-					{textInput: a});
-			}),
-		updateFun: $author$project$Example$TextInput$update
+var $elm$url$Url$Parser$prepareQuery = function (maybeQuery) {
+	if (maybeQuery.$ === 'Nothing') {
+		return $elm$core$Dict$empty;
+	} else {
+		var qry = maybeQuery.a;
+		return A3(
+			$elm$core$List$foldr,
+			$elm$url$Url$Parser$addParam,
+			$elm$core$Dict$empty,
+			A2($elm$core$String$split, '&', qry));
 	}
 };
-var $author$project$Data$Example$subscriptions = function (model) {
-	var subFun = function (_v0) {
-		var from = _v0.from;
-		var msgMapper = _v0.msgMapper;
-		var subscriptionsFun = _v0.subscriptionsFun;
-		return A2(
-			$elm$core$Platform$Sub$map,
-			msgMapper,
-			subscriptionsFun(
-				from(model)));
-	};
-	return $elm$core$Platform$Sub$batch(
-		_List_fromArray(
-			[
-				subFun($author$project$Data$Example$upgradeRecord.button),
-				subFun($author$project$Data$Example$upgradeRecord._switch),
-				subFun($author$project$Data$Example$upgradeRecord.select),
-				subFun($author$project$Data$Example$upgradeRecord.multiSelect),
-				subFun($author$project$Data$Example$upgradeRecord.tab),
-				subFun($author$project$Data$Example$upgradeRecord.sortTable),
-				subFun($author$project$Data$Example$upgradeRecord.modal),
-				subFun($author$project$Data$Example$upgradeRecord.dialog),
-				subFun($author$project$Data$Example$upgradeRecord.textInput),
-				subFun($author$project$Data$Example$upgradeRecord.list),
-				subFun($author$project$Data$Example$upgradeRecord.progressIndicator),
-				subFun($author$project$Data$Example$upgradeRecord.icon),
-				subFun($author$project$Data$Example$upgradeRecord.sheet),
-				subFun($author$project$Data$Example$upgradeRecord.appBar),
-				subFun($author$project$Data$Example$upgradeRecord.layout),
-				subFun($author$project$Data$Example$upgradeRecord.snackbar)
-			]));
+var $elm$url$Url$Parser$parse = F2(
+	function (_v0, url) {
+		var parser = _v0.a;
+		return $elm$url$Url$Parser$getFirstMatch(
+			parser(
+				A5(
+					$elm$url$Url$Parser$State,
+					_List_Nil,
+					$elm$url$Url$Parser$preparePath(url.path),
+					$elm$url$Url$Parser$prepareQuery(url.query),
+					url.fragment,
+					$elm$core$Basics$identity)));
+	});
+var $elm$browser$Browser$Navigation$replaceUrl = _Browser_replaceUrl;
+var $elm$url$Url$Parser$Parser = function (a) {
+	return {$: 'Parser', a: a};
 };
-var $author$project$Stateless$subscriptions = function (model) {
-	return A2(
-		$elm$core$Platform$Sub$map,
-		$author$project$Stateless$ExampleSpecific,
-		$author$project$Data$Example$subscriptions(model.example));
+var $elm$url$Url$Parser$mapState = F2(
+	function (func, _v0) {
+		var visited = _v0.visited;
+		var unvisited = _v0.unvisited;
+		var params = _v0.params;
+		var frag = _v0.frag;
+		var value = _v0.value;
+		return A5(
+			$elm$url$Url$Parser$State,
+			visited,
+			unvisited,
+			params,
+			frag,
+			func(value));
+	});
+var $elm$url$Url$Parser$map = F2(
+	function (subValue, _v0) {
+		var parseArg = _v0.a;
+		return $elm$url$Url$Parser$Parser(
+			function (_v1) {
+				var visited = _v1.visited;
+				var unvisited = _v1.unvisited;
+				var params = _v1.params;
+				var frag = _v1.frag;
+				var value = _v1.value;
+				return A2(
+					$elm$core$List$map,
+					$elm$url$Url$Parser$mapState(value),
+					parseArg(
+						A5($elm$url$Url$Parser$State, visited, unvisited, params, frag, subValue)));
+			});
+	});
+var $elm$core$List$append = F2(
+	function (xs, ys) {
+		if (!ys.b) {
+			return xs;
+		} else {
+			return A3($elm$core$List$foldr, $elm$core$List$cons, ys, xs);
+		}
+	});
+var $elm$core$List$concat = function (lists) {
+	return A3($elm$core$List$foldr, $elm$core$List$append, _List_Nil, lists);
 };
-var $author$project$Main$subscriptions = function (model) {
-	var ms = 2000;
-	return A2(
-		$elm$core$Platform$Sub$map,
-		$author$project$Main$LoadedSpecific,
-		$elm$core$Platform$Sub$batch(
-			_Utils_ap(
-				_List_fromArray(
+var $elm$core$List$concatMap = F2(
+	function (f, list) {
+		return $elm$core$List$concat(
+			A2($elm$core$List$map, f, list));
+	});
+var $elm$url$Url$Parser$oneOf = function (parsers) {
+	return $elm$url$Url$Parser$Parser(
+		function (state) {
+			return A2(
+				$elm$core$List$concatMap,
+				function (_v0) {
+					var parser = _v0.a;
+					return parser(state);
+				},
+				parsers);
+		});
+};
+var $elm$url$Url$Parser$s = function (str) {
+	return $elm$url$Url$Parser$Parser(
+		function (_v0) {
+			var visited = _v0.visited;
+			var unvisited = _v0.unvisited;
+			var params = _v0.params;
+			var frag = _v0.frag;
+			var value = _v0.value;
+			if (!unvisited.b) {
+				return _List_Nil;
+			} else {
+				var next = unvisited.a;
+				var rest = unvisited.b;
+				return _Utils_eq(next, str) ? _List_fromArray(
 					[
+						A5(
+						$elm$url$Url$Parser$State,
+						A2($elm$core$List$cons, next, visited),
+						rest,
+						params,
+						frag,
+						value)
+					]) : _List_Nil;
+			}
+		});
+};
+var $elm$url$Url$Parser$slash = F2(
+	function (_v0, _v1) {
+		var parseBefore = _v0.a;
+		var parseAfter = _v1.a;
+		return $elm$url$Url$Parser$Parser(
+			function (state) {
+				return A2(
+					$elm$core$List$concatMap,
+					parseAfter,
+					parseBefore(state));
+			});
+	});
+var $elm$url$Url$Parser$top = $elm$url$Url$Parser$Parser(
+	function (state) {
+		return _List_fromArray(
+			[state]);
+	});
+var $author$project$UIExplorer$urlParser = F2(
+	function (_v0, rootPath) {
+		var pages = _v0.a;
+		var pathParser = function (path) {
+			return A3(
+				$elm$core$List$foldl,
+				F2(
+					function (segment, state) {
+						return A2(
+							$elm$url$Url$Parser$slash,
+							state,
+							$elm$url$Url$Parser$s(
+								$elm$url$Url$percentEncode(segment)));
+					}),
+				$elm$url$Url$Parser$top,
+				path);
+		};
+		var allPagePaths = A2(
+			$elm$core$List$map,
+			function (path) {
+				return A2(
+					$elm$url$Url$Parser$map,
+					$elm$core$Maybe$Just(path),
+					pathParser(
+						_Utils_ap(rootPath, path)));
+			},
+			A2(
+				$elm$core$List$map,
+				function (_v1) {
+					var pageId = _v1.pageId;
+					var pageGroup = _v1.pageGroup;
+					return _Utils_ap(
+						pageGroup,
+						_List_fromArray(
+							[pageId]));
+				},
+				pages.ids));
+		return $elm$url$Url$Parser$oneOf(
+			A2(
+				$elm$core$List$cons,
+				A2($elm$url$Url$Parser$map, $elm$core$Maybe$Nothing, $elm$url$Url$Parser$top),
+				A2(
+					$elm$core$List$cons,
+					A2(
+						$elm$url$Url$Parser$map,
+						$elm$core$Maybe$Nothing,
+						pathParser(rootPath)),
+					allPagePaths)));
+	});
+var $author$project$UIExplorer$pageFromUrl = F4(
+	function (_v0, rootPath, key, url) {
+		var pages = _v0.a;
+		var _v1 = A2(
+			$elm$url$Url$Parser$parse,
+			A2(
+				$author$project$UIExplorer$urlParser,
+				$author$project$UIExplorer$PageBuilder(pages),
+				rootPath),
+			url);
+		if (_v1.$ === 'Just') {
+			if (_v1.a.$ === 'Nothing') {
+				var _v2 = _v1.a;
+				var _v3 = $elm$core$List$head(
+					$elm$core$List$reverse(pages.ids));
+				if (_v3.$ === 'Just') {
+					var pageId = _v3.a.pageId;
+					var pageGroup = _v3.a.pageGroup;
+					return _Utils_Tuple2(
+						_List_Nil,
 						A2(
-						$elm$time$Time$every,
-						ms,
-						$elm$core$Basics$always(
-							$author$project$Main$TimePassed(ms))),
-						$elm$browser$Browser$Events$onResize(
-						F2(
-							function (h, w) {
-								return $author$project$Main$Resized(
-									{height: h, width: w});
-							}))
-					]),
-				function () {
-					if (model.$ === 'Loading') {
-						return _List_Nil;
-					} else {
-						var stateless = model.a.stateless;
-						return $elm$core$List$singleton(
+							$elm$browser$Browser$Navigation$replaceUrl,
+							key,
 							A2(
-								$elm$core$Platform$Sub$map,
-								$author$project$Main$StatelessSpecific,
-								$author$project$Stateless$subscriptions(stateless)));
-					}
-				}())));
+								$author$project$UIExplorer$uiUrl,
+								rootPath,
+								_Utils_ap(
+									pageGroup,
+									_List_fromArray(
+										[pageId])))));
+				} else {
+					return _Utils_Tuple2(_List_Nil, $elm$core$Platform$Cmd$none);
+				}
+			} else {
+				var page = _v1.a.a;
+				return _Utils_Tuple2(page, $elm$core$Platform$Cmd$none);
+			}
+		} else {
+			return _Utils_Tuple2(_List_Nil, $elm$core$Platform$Cmd$none);
+		}
+	});
+var $ianmackenzie$elm_units$Quantity$Quantity = function (a) {
+	return {$: 'Quantity', a: a};
 };
-var $author$project$Main$Loaded = function (a) {
-	return {$: 'Loaded', a: a};
+var $ianmackenzie$elm_units$Pixels$pixels = function (numPixels) {
+	return $ianmackenzie$elm_units$Quantity$Quantity(numPixels);
 };
-var $author$project$Main$Idle = {$: 'Idle'};
-var $author$project$Data$Theme$Material = {$: 'Material'};
-var $author$project$Main$UpdateScrollingNav = function (a) {
-	return {$: 'UpdateScrollingNav', a: a};
-};
-var $author$project$Data$Example$AppBarExample = {$: 'AppBarExample'};
-var $author$project$Data$Example$ButtonExample = {$: 'ButtonExample'};
-var $author$project$Data$Example$DialogExample = {$: 'DialogExample'};
-var $author$project$Data$Example$IconExample = {$: 'IconExample'};
-var $author$project$Data$Example$LayoutExample = {$: 'LayoutExample'};
-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$ProgressIndicatorExample = {$: 'ProgressIndicatorExample'};
-var $author$project$Data$Example$SelectExample = {$: 'SelectExample'};
-var $author$project$Data$Example$SheetExample = {$: 'SheetExample'};
-var $author$project$Data$Example$SnackbarExample = {$: 'SnackbarExample'};
-var $author$project$Data$Example$SortTableExample = {$: 'SortTableExample'};
-var $author$project$Data$Example$SwitchExample = {$: 'SwitchExample'};
-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 'SwitchExample':
-			return 'Switch';
-		case 'SelectExample':
-			return 'Select';
-		case 'MultiSelectExample':
-			return 'Multi Select';
-		case 'TabExample':
-			return 'Tab';
-		case 'SortTableExample':
-			return 'SortTable';
-		case 'ModalExample':
-			return 'Modal';
-		case 'DialogExample':
-			return 'Dialog';
-		case 'TextInputExample':
-			return 'TextInput';
-		case 'ListExample':
-			return 'List';
-		case 'ProgressIndicatorExample':
-			return 'Progress Indicator';
-		case 'IconExample':
-			return 'Icon';
-		case 'SheetExample':
-			return 'Sheet';
-		case 'AppBarExample':
-			return 'App Bar';
-		case 'LayoutExample':
-			return 'Layout';
-		default:
-			return 'Snackbar';
+var $elm$core$Basics$round = _Basics_round;
+var $author$project$UIExplorer$init = F5(
+	function (config, _v0, flagsJson, url, key) {
+		var pages = _v0.a;
+		var _v1 = A4(
+			$author$project$UIExplorer$pageFromUrl,
+			$author$project$UIExplorer$PageBuilder(pages),
+			config.relativeUrlPath,
+			key,
+			url);
+		var page = _v1.a;
+		var navigationCmd = _v1.b;
+		var _v2 = A2($elm$json$Json$Decode$decodeValue, config.flagsDecoder, flagsJson);
+		if (_v2.$ === 'Ok') {
+			var flags = _v2.a;
+			var _v3 = pages.init(flags);
+			var pageModels = _v3.a;
+			var pageCmds = _v3.b;
+			return _Utils_Tuple2(
+				$author$project$UIExplorer$FlagsParsed(
+					{
+						colorBlindOption: $elm$core$Maybe$Nothing,
+						darkThemeEnabled: false,
+						expandColorBlindOptions: false,
+						expandPageSizeOptions: false,
+						expandedGroups: A2($author$project$UIExplorer$expandPage, page, $elm$core$Set$empty),
+						flags: flags,
+						key: key,
+						minimizeSidebar: false,
+						page: page,
+						pageModel: pageModels,
+						pageSizeOption: $author$project$UIExplorer$Native,
+						searchText: '',
+						windowSize: {
+							height: $ianmackenzie$elm_units$Pixels$pixels(1080),
+							width: $ianmackenzie$elm_units$Pixels$pixels(1920)
+						}
+					}),
+				$elm$core$Platform$Cmd$batch(
+					_List_fromArray(
+						[
+							navigationCmd,
+							A2(
+							$elm$core$Task$perform,
+							$author$project$UIExplorer$WindowResized,
+							A2(
+								$elm$core$Task$map,
+								function (_v4) {
+									var viewport = _v4.viewport;
+									return {
+										height: $ianmackenzie$elm_units$Pixels$pixels(
+											$elm$core$Basics$round(viewport.height)),
+										width: $ianmackenzie$elm_units$Pixels$pixels(
+											$elm$core$Basics$round(viewport.width))
+									};
+								},
+								$elm$browser$Browser$Dom$getViewport)),
+							A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$PageMsg, pageCmds)
+						])));
+		} else {
+			var error = _v2.a;
+			return _Utils_Tuple2(
+				$author$project$UIExplorer$FlagsDidNotParse(
+					$elm$json$Json$Decode$errorToString(error)),
+				$elm$core$Platform$Cmd$none);
+		}
+	});
+var $elm$core$Platform$Sub$batch = _Platform_batch;
+var $elm$core$Platform$Sub$map = _Platform_map;
+var $elm$core$Platform$Sub$none = $elm$core$Platform$Sub$batch(_List_Nil);
+var $elm$browser$Browser$Events$Window = {$: 'Window'};
+var $elm$json$Json$Decode$field = _Json_decodeField;
+var $elm$json$Json$Decode$int = _Json_decodeInt;
+var $elm$browser$Browser$Events$MySub = F3(
+	function (a, b, c) {
+		return {$: 'MySub', a: a, b: b, c: c};
+	});
+var $elm$browser$Browser$Events$State = F2(
+	function (subs, pids) {
+		return {pids: pids, subs: subs};
+	});
+var $elm$browser$Browser$Events$init = $elm$core$Task$succeed(
+	A2($elm$browser$Browser$Events$State, _List_Nil, $elm$core$Dict$empty));
+var $elm$browser$Browser$Events$nodeToKey = function (node) {
+	if (node.$ === 'Document') {
+		return 'd_';
+	} else {
+		return 'w_';
 	}
 };
-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$SwitchExample, $author$project$Data$Example$SelectExample, $author$project$Data$Example$MultiSelectExample, $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, $author$project$Data$Example$ProgressIndicatorExample, $author$project$Data$Example$IconExample, $author$project$Data$Example$SheetExample, $author$project$Data$Example$AppBarExample, $author$project$Data$Example$LayoutExample, $author$project$Data$Example$SnackbarExample]));
-var $turboMaCk$any_set$Set$Any$AnySet = function (a) {
-	return {$: 'AnySet', a: a};
-};
-var $turboMaCk$any_dict$Dict$Any$AnyDict = function (a) {
-	return {$: 'AnyDict', a: a};
-};
-var $turboMaCk$any_dict$Dict$Any$empty = function (toKey) {
-	return $turboMaCk$any_dict$Dict$Any$AnyDict(
-		{dict: $elm$core$Dict$empty, toKey: toKey});
-};
-var $turboMaCk$any_set$Set$Any$empty = A2($elm$core$Basics$composeL, $turboMaCk$any_set$Set$Any$AnySet, $turboMaCk$any_dict$Dict$Any$empty);
-var $author$project$Data$Example$fromString = function (string) {
-	switch (string) {
-		case 'Button':
-			return $elm$core$Maybe$Just($author$project$Data$Example$ButtonExample);
-		case 'Switch':
-			return $elm$core$Maybe$Just($author$project$Data$Example$SwitchExample);
-		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 '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);
-		case 'Progress Indicator':
-			return $elm$core$Maybe$Just($author$project$Data$Example$ProgressIndicatorExample);
-		case 'Icon':
-			return $elm$core$Maybe$Just($author$project$Data$Example$IconExample);
-		case 'Sheet':
-			return $elm$core$Maybe$Just($author$project$Data$Example$SheetExample);
-		case 'App Bar':
-			return $elm$core$Maybe$Just($author$project$Data$Example$AppBarExample);
-		case 'Layout':
-			return $elm$core$Maybe$Just($author$project$Data$Example$LayoutExample);
-		case 'Snackbar':
-			return $elm$core$Maybe$Just($author$project$Data$Example$SnackbarExample);
-		default:
-			return $elm$core$Maybe$Nothing;
-	}
-};
-var $author$project$Example$AppBar$init = _Utils_Tuple2(
-	{isMenuBar: true, search: '', selected: 0},
-	$elm$core$Platform$Cmd$none);
-var $author$project$Example$Button$init = _Utils_Tuple2(0, $elm$core$Platform$Cmd$none);
-var $author$project$Example$Dialog$init = _Utils_Tuple2(
-	$author$project$Example$Dialog$IsOpen(true),
-	$elm$core$Platform$Cmd$none);
-var $author$project$Example$Icon$init = _Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none);
-var $author$project$Example$Layout$RightSheet = {$: 'RightSheet'};
-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$Example$Layout$init = _Utils_Tuple2(
-	{
-		active: $elm$core$Maybe$Just($author$project$Example$Layout$RightSheet),
-		searchText: '',
-		selected: 0,
-		showDialog: false,
-		snackbar: $author$project$Widget$Snackbar$init,
-		window: {height: 200, width: 400}
-	},
-	$elm$core$Platform$Cmd$none);
-var $author$project$Example$List$init = _Utils_Tuple2(
-	$author$project$Example$List$IsExpanded(false),
-	$elm$core$Platform$Cmd$none);
-var $author$project$Example$Modal$init = _Utils_Tuple2(
-	$author$project$Example$Modal$IsEnabled(true),
-	$elm$core$Platform$Cmd$none);
-var $elm$core$Set$empty = $elm$core$Set$Set_elm_builtin($elm$core$Dict$empty);
-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$ProgressIndicator$init = _Utils_Tuple2(
-	$author$project$Example$ProgressIndicator$MaybeProgress($elm$core$Maybe$Nothing),
-	$elm$core$Platform$Cmd$none);
-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$Sheet$init = _Utils_Tuple2(
-	$author$project$Example$Sheet$IsEnabled(true),
-	$elm$core$Platform$Cmd$none);
-var $author$project$Example$Snackbar$init = _Utils_Tuple2($author$project$Widget$Snackbar$init, $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$Switch$init = _Utils_Tuple2(
-	$author$project$Example$Switch$IsButtonEnabled(false),
-	$elm$core$Platform$Cmd$none);
-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$Switch$init;
-	var switchModel = _v2.a;
-	var switchMsg = _v2.b;
-	var _v3 = $author$project$Example$SortTable$init;
-	var sortTableModel = _v3.a;
-	var sortTableMsg = _v3.b;
-	var _v4 = $author$project$Example$Snackbar$init;
-	var snackbarModel = _v4.a;
-	var snackbarMsg = _v4.b;
-	var _v5 = $author$project$Example$Sheet$init;
-	var sheetModel = _v5.a;
-	var sheetMsg = _v5.b;
-	var _v6 = $author$project$Example$Select$init;
-	var selectModel = _v6.a;
-	var selectMsg = _v6.b;
-	var _v7 = $author$project$Example$ProgressIndicator$init;
-	var progressIndicatorModel = _v7.a;
-	var progressIndicatorMsg = _v7.b;
-	var _v8 = $author$project$Example$MultiSelect$init;
-	var multiSelectModel = _v8.a;
-	var multiSelectMsg = _v8.b;
-	var _v9 = $author$project$Example$Modal$init;
-	var modalModel = _v9.a;
-	var modalMsg = _v9.b;
-	var _v10 = $author$project$Example$List$init;
-	var listModel = _v10.a;
-	var listMsg = _v10.b;
-	var _v11 = $author$project$Example$Layout$init;
-	var layoutModel = _v11.a;
-	var layoutMsg = _v11.b;
-	var _v12 = $author$project$Example$Icon$init;
-	var iconModel = _v12.a;
-	var iconMsg = _v12.b;
-	var _v13 = $author$project$Example$Dialog$init;
-	var dialogModel = _v13.a;
-	var dialogMsg = _v13.b;
-	var _v14 = $author$project$Example$Button$init;
-	var buttonModel = _v14.a;
-	var buttonMsg = _v14.b;
-	var _v15 = $author$project$Example$AppBar$init;
-	var appBarModel = _v15.a;
-	var appBarMsg = _v15.b;
+var $elm$browser$Browser$Events$addKey = function (sub) {
+	var node = sub.a;
+	var name = sub.b;
 	return _Utils_Tuple2(
-		{appBar: appBarModel, button: buttonModel, dialog: dialogModel, icon: iconModel, layout: layoutModel, list: listModel, modal: modalModel, multiSelect: multiSelectModel, progressIndicator: progressIndicatorModel, select: selectModel, sheet: sheetModel, snackbar: snackbarModel, sortTable: sortTableModel, _switch: switchModel, tab: tabModel, textInput: textInputModel},
-		$elm$core$Platform$Cmd$batch(
+		_Utils_ap(
+			$elm$browser$Browser$Events$nodeToKey(node),
+			name),
+		sub);
+};
+var $elm$core$Dict$fromList = function (assocs) {
+	return A3(
+		$elm$core$List$foldl,
+		F2(
+			function (_v0, dict) {
+				var key = _v0.a;
+				var value = _v0.b;
+				return A3($elm$core$Dict$insert, key, value, dict);
+			}),
+		$elm$core$Dict$empty,
+		assocs);
+};
+var $elm$core$Process$kill = _Scheduler_kill;
+var $elm$core$Dict$merge = F6(
+	function (leftStep, bothStep, rightStep, leftDict, rightDict, initialResult) {
+		var stepState = F3(
+			function (rKey, rValue, _v0) {
+				stepState:
+				while (true) {
+					var list = _v0.a;
+					var result = _v0.b;
+					if (!list.b) {
+						return _Utils_Tuple2(
+							list,
+							A3(rightStep, rKey, rValue, result));
+					} else {
+						var _v2 = list.a;
+						var lKey = _v2.a;
+						var lValue = _v2.b;
+						var rest = list.b;
+						if (_Utils_cmp(lKey, rKey) < 0) {
+							var $temp$rKey = rKey,
+								$temp$rValue = rValue,
+								$temp$_v0 = _Utils_Tuple2(
+								rest,
+								A3(leftStep, lKey, lValue, result));
+							rKey = $temp$rKey;
+							rValue = $temp$rValue;
+							_v0 = $temp$_v0;
+							continue stepState;
+						} else {
+							if (_Utils_cmp(lKey, rKey) > 0) {
+								return _Utils_Tuple2(
+									list,
+									A3(rightStep, rKey, rValue, result));
+							} else {
+								return _Utils_Tuple2(
+									rest,
+									A4(bothStep, lKey, lValue, rValue, result));
+							}
+						}
+					}
+				}
+			});
+		var _v3 = A3(
+			$elm$core$Dict$foldl,
+			stepState,
+			_Utils_Tuple2(
+				$elm$core$Dict$toList(leftDict),
+				initialResult),
+			rightDict);
+		var leftovers = _v3.a;
+		var intermediateResult = _v3.b;
+		return A3(
+			$elm$core$List$foldl,
+			F2(
+				function (_v4, result) {
+					var k = _v4.a;
+					var v = _v4.b;
+					return A3(leftStep, k, v, result);
+				}),
+			intermediateResult,
+			leftovers);
+	});
+var $elm$browser$Browser$Events$Event = F2(
+	function (key, event) {
+		return {event: event, key: key};
+	});
+var $elm$core$Platform$sendToSelf = _Platform_sendToSelf;
+var $elm$browser$Browser$Events$spawn = F3(
+	function (router, key, _v0) {
+		var node = _v0.a;
+		var name = _v0.b;
+		var actualNode = function () {
+			if (node.$ === 'Document') {
+				return _Browser_doc;
+			} else {
+				return _Browser_window;
+			}
+		}();
+		return A2(
+			$elm$core$Task$map,
+			function (value) {
+				return _Utils_Tuple2(key, value);
+			},
+			A3(
+				_Browser_on,
+				actualNode,
+				name,
+				function (event) {
+					return A2(
+						$elm$core$Platform$sendToSelf,
+						router,
+						A2($elm$browser$Browser$Events$Event, key, event));
+				}));
+	});
+var $elm$browser$Browser$Events$onEffects = F3(
+	function (router, subs, state) {
+		var stepRight = F3(
+			function (key, sub, _v6) {
+				var deads = _v6.a;
+				var lives = _v6.b;
+				var news = _v6.c;
+				return _Utils_Tuple3(
+					deads,
+					lives,
+					A2(
+						$elm$core$List$cons,
+						A3($elm$browser$Browser$Events$spawn, router, key, sub),
+						news));
+			});
+		var stepLeft = F3(
+			function (_v4, pid, _v5) {
+				var deads = _v5.a;
+				var lives = _v5.b;
+				var news = _v5.c;
+				return _Utils_Tuple3(
+					A2($elm$core$List$cons, pid, deads),
+					lives,
+					news);
+			});
+		var stepBoth = F4(
+			function (key, pid, _v2, _v3) {
+				var deads = _v3.a;
+				var lives = _v3.b;
+				var news = _v3.c;
+				return _Utils_Tuple3(
+					deads,
+					A3($elm$core$Dict$insert, key, pid, lives),
+					news);
+			});
+		var newSubs = A2($elm$core$List$map, $elm$browser$Browser$Events$addKey, subs);
+		var _v0 = A6(
+			$elm$core$Dict$merge,
+			stepLeft,
+			stepBoth,
+			stepRight,
+			state.pids,
+			$elm$core$Dict$fromList(newSubs),
+			_Utils_Tuple3(_List_Nil, $elm$core$Dict$empty, _List_Nil));
+		var deadPids = _v0.a;
+		var livePids = _v0.b;
+		var makeNewPids = _v0.c;
+		return A2(
+			$elm$core$Task$andThen,
+			function (pids) {
+				return $elm$core$Task$succeed(
+					A2(
+						$elm$browser$Browser$Events$State,
+						newSubs,
+						A2(
+							$elm$core$Dict$union,
+							livePids,
+							$elm$core$Dict$fromList(pids))));
+			},
+			A2(
+				$elm$core$Task$andThen,
+				function (_v1) {
+					return $elm$core$Task$sequence(makeNewPids);
+				},
+				$elm$core$Task$sequence(
+					A2($elm$core$List$map, $elm$core$Process$kill, deadPids))));
+	});
+var $elm$core$List$maybeCons = F3(
+	function (f, mx, xs) {
+		var _v0 = f(mx);
+		if (_v0.$ === 'Just') {
+			var x = _v0.a;
+			return A2($elm$core$List$cons, x, xs);
+		} else {
+			return xs;
+		}
+	});
+var $elm$core$List$filterMap = F2(
+	function (f, xs) {
+		return A3(
+			$elm$core$List$foldr,
+			$elm$core$List$maybeCons(f),
+			_List_Nil,
+			xs);
+	});
+var $elm$browser$Browser$Events$onSelfMsg = F3(
+	function (router, _v0, state) {
+		var key = _v0.key;
+		var event = _v0.event;
+		var toMessage = function (_v2) {
+			var subKey = _v2.a;
+			var _v3 = _v2.b;
+			var node = _v3.a;
+			var name = _v3.b;
+			var decoder = _v3.c;
+			return _Utils_eq(subKey, key) ? A2(_Browser_decodeEvent, decoder, event) : $elm$core$Maybe$Nothing;
+		};
+		var messages = A2($elm$core$List$filterMap, toMessage, state.subs);
+		return A2(
+			$elm$core$Task$andThen,
+			function (_v1) {
+				return $elm$core$Task$succeed(state);
+			},
+			$elm$core$Task$sequence(
+				A2(
+					$elm$core$List$map,
+					$elm$core$Platform$sendToApp(router),
+					messages)));
+	});
+var $elm$browser$Browser$Events$subMap = F2(
+	function (func, _v0) {
+		var node = _v0.a;
+		var name = _v0.b;
+		var decoder = _v0.c;
+		return A3(
+			$elm$browser$Browser$Events$MySub,
+			node,
+			name,
+			A2($elm$json$Json$Decode$map, func, decoder));
+	});
+_Platform_effectManagers['Browser.Events'] = _Platform_createManager($elm$browser$Browser$Events$init, $elm$browser$Browser$Events$onEffects, $elm$browser$Browser$Events$onSelfMsg, 0, $elm$browser$Browser$Events$subMap);
+var $elm$browser$Browser$Events$subscription = _Platform_leaf('Browser.Events');
+var $elm$browser$Browser$Events$on = F3(
+	function (node, name, decoder) {
+		return $elm$browser$Browser$Events$subscription(
+			A3($elm$browser$Browser$Events$MySub, node, name, decoder));
+	});
+var $elm$browser$Browser$Events$onResize = function (func) {
+	return A3(
+		$elm$browser$Browser$Events$on,
+		$elm$browser$Browser$Events$Window,
+		'resize',
+		A2(
+			$elm$json$Json$Decode$field,
+			'target',
+			A3(
+				$elm$json$Json$Decode$map2,
+				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$UIExplorer$subscriptions = F2(
+	function (_v0, model) {
+		var pages = _v0.a;
+		return $elm$core$Platform$Sub$batch(
 			_List_fromArray(
 				[
-					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Button, buttonMsg),
-					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Switch, switchMsg),
-					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$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),
-					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$ProgressIndicator, progressIndicatorMsg),
-					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Icon, iconMsg),
-					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Sheet, sheetMsg),
-					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$AppBar, appBarMsg),
-					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Layout, layoutMsg),
-					A2($elm$core$Platform$Cmd$map, $author$project$Data$Example$Snackbar, snackbarMsg)
-				])));
-}();
-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));
-}();
+					$elm$browser$Browser$Events$onResize(
+					F2(
+						function (width, height) {
+							return $author$project$UIExplorer$WindowResized(
+								{
+									height: $ianmackenzie$elm_units$Pixels$pixels(height),
+									width: $ianmackenzie$elm_units$Pixels$pixels(width)
+								});
+						})),
+					function () {
+					if (model.$ === 'FlagsParsed') {
+						var successModel = model.a;
+						return A2(
+							$elm$core$Platform$Sub$map,
+							$author$project$UIExplorer$PageMsg,
+							pages.subscriptions(successModel.pageModel));
+					} else {
+						return $elm$core$Platform$Sub$none;
+					}
+				}()
+				]));
+	});
+var $elm$core$Tuple$mapFirst = F2(
+	function (func, _v0) {
+		var x = _v0.a;
+		var y = _v0.b;
+		return _Utils_Tuple2(
+			func(x),
+			y);
+	});
+var $author$project$UIExplorer$NoOp = {$: 'NoOp'};
+var $elm$core$Basics$always = F2(
+	function (a, _v0) {
+		return a;
+	});
+var $elm$core$Basics$composeL = F3(
+	function (g, f, x) {
+		return g(
+			f(x));
+	});
 var $elm$core$Task$onError = _Scheduler_onError;
 var $elm$core$Task$attempt = F2(
 	function (resultToMessage, task) {
@@ -7364,729 +6694,299 @@ var $elm$core$Task$attempt = F2(
 							$elm$core$Result$Ok),
 						task))));
 	});
-var $elm_community$intdict$IntDict$Empty = {$: 'Empty'};
-var $elm_community$intdict$IntDict$empty = $elm_community$intdict$IntDict$Empty;
-var $elm$browser$Browser$Dom$getElement = _Browser_getElement;
-var $elm_community$intdict$IntDict$Inner = function (a) {
-	return {$: 'Inner', a: a};
-};
-var $elm_community$intdict$IntDict$size = function (dict) {
-	switch (dict.$) {
-		case 'Empty':
-			return 0;
-		case 'Leaf':
-			return 1;
-		default:
-			var i = dict.a;
-			return i.size;
-	}
-};
-var $elm_community$intdict$IntDict$inner = F3(
-	function (p, l, r) {
-		var _v0 = _Utils_Tuple2(l, r);
-		if (_v0.a.$ === 'Empty') {
-			var _v1 = _v0.a;
-			return r;
-		} else {
-			if (_v0.b.$ === 'Empty') {
-				var _v2 = _v0.b;
-				return l;
-			} else {
-				return $elm_community$intdict$IntDict$Inner(
-					{
-						left: l,
-						prefix: p,
-						right: r,
-						size: $elm_community$intdict$IntDict$size(l) + $elm_community$intdict$IntDict$size(r)
-					});
-			}
-		}
-	});
-var $elm$core$Bitwise$and = _Bitwise_and;
-var $elm$core$Basics$composeR = F3(
-	function (f, g, x) {
-		return g(
-			f(x));
-	});
-var $elm$core$Basics$neq = _Utils_notEqual;
-var $elm$core$Bitwise$complement = _Bitwise_complement;
-var $elm$core$Bitwise$or = _Bitwise_or;
-var $elm$core$Bitwise$shiftRightZfBy = _Bitwise_shiftRightZfBy;
-var $elm_community$intdict$IntDict$highestBitSet = function (n) {
-	var shiftOr = F2(
-		function (i, shift) {
-			return i | (i >>> shift);
-		});
-	var n1 = A2(shiftOr, n, 1);
-	var n2 = A2(shiftOr, n1, 2);
-	var n3 = A2(shiftOr, n2, 4);
-	var n4 = A2(shiftOr, n3, 8);
-	var n5 = A2(shiftOr, n4, 16);
-	return n5 & (~(n5 >>> 1));
-};
-var $elm_community$intdict$IntDict$signBit = $elm_community$intdict$IntDict$highestBitSet(-1);
-var $elm$core$Bitwise$xor = _Bitwise_xor;
-var $elm_community$intdict$IntDict$isBranchingBitSet = function (p) {
-	return A2(
-		$elm$core$Basics$composeR,
-		$elm$core$Bitwise$xor($elm_community$intdict$IntDict$signBit),
-		A2(
-			$elm$core$Basics$composeR,
-			$elm$core$Bitwise$and(p.branchingBit),
-			$elm$core$Basics$neq(0)));
-};
-var $elm_community$intdict$IntDict$higherBitMask = function (branchingBit) {
-	return branchingBit ^ (~(branchingBit - 1));
-};
-var $elm_community$intdict$IntDict$lcp = F2(
-	function (x, y) {
-		var branchingBit = $elm_community$intdict$IntDict$highestBitSet(x ^ y);
-		var mask = $elm_community$intdict$IntDict$higherBitMask(branchingBit);
-		var prefixBits = x & mask;
-		return {branchingBit: branchingBit, prefixBits: prefixBits};
-	});
-var $elm_community$intdict$IntDict$Leaf = function (a) {
-	return {$: 'Leaf', a: a};
-};
-var $elm_community$intdict$IntDict$leaf = F2(
-	function (k, v) {
-		return $elm_community$intdict$IntDict$Leaf(
-			{key: k, value: v});
-	});
-var $elm_community$intdict$IntDict$prefixMatches = F2(
-	function (p, n) {
-		return _Utils_eq(
-			n & $elm_community$intdict$IntDict$higherBitMask(p.branchingBit),
-			p.prefixBits);
-	});
-var $elm_community$intdict$IntDict$update = F3(
-	function (key, alter, dict) {
-		var join = F2(
-			function (_v2, _v3) {
-				var k1 = _v2.a;
-				var l = _v2.b;
-				var k2 = _v3.a;
-				var r = _v3.b;
-				var prefix = A2($elm_community$intdict$IntDict$lcp, k1, k2);
-				return A2($elm_community$intdict$IntDict$isBranchingBitSet, prefix, k2) ? A3($elm_community$intdict$IntDict$inner, prefix, l, r) : A3($elm_community$intdict$IntDict$inner, prefix, r, l);
-			});
-		var alteredNode = function (mv) {
-			var _v1 = alter(mv);
-			if (_v1.$ === 'Just') {
-				var v = _v1.a;
-				return A2($elm_community$intdict$IntDict$leaf, key, v);
-			} else {
-				return $elm_community$intdict$IntDict$empty;
-			}
-		};
-		switch (dict.$) {
-			case 'Empty':
-				return alteredNode($elm$core$Maybe$Nothing);
-			case 'Leaf':
-				var l = dict.a;
-				return _Utils_eq(l.key, key) ? alteredNode(
-					$elm$core$Maybe$Just(l.value)) : A2(
-					join,
-					_Utils_Tuple2(
-						key,
-						alteredNode($elm$core$Maybe$Nothing)),
-					_Utils_Tuple2(l.key, dict));
-			default:
-				var i = dict.a;
-				return A2($elm_community$intdict$IntDict$prefixMatches, i.prefix, key) ? (A2($elm_community$intdict$IntDict$isBranchingBitSet, i.prefix, key) ? A3(
-					$elm_community$intdict$IntDict$inner,
-					i.prefix,
-					i.left,
-					A3($elm_community$intdict$IntDict$update, key, alter, i.right)) : A3(
-					$elm_community$intdict$IntDict$inner,
-					i.prefix,
-					A3($elm_community$intdict$IntDict$update, key, alter, i.left),
-					i.right)) : A2(
-					join,
-					_Utils_Tuple2(
-						key,
-						alteredNode($elm$core$Maybe$Nothing)),
-					_Utils_Tuple2(i.prefix.prefixBits, dict));
-		}
-	});
-var $elm_community$intdict$IntDict$insert = F3(
-	function (key, value, dict) {
-		return A3(
-			$elm_community$intdict$IntDict$update,
-			key,
-			$elm$core$Basics$always(
-				$elm$core$Maybe$Just(value)),
-			dict);
-	});
-var $elm$core$Basics$round = _Basics_round;
-var $author$project$Widget$ScrollingNav$syncPositions = function (_v0) {
-	var toString = _v0.toString;
-	var arrangement = _v0.arrangement;
-	var fun = F2(
-		function (_v1, model) {
-			var pos = _v1.a;
-			var label = _v1.b;
-			return _Utils_update(
-				model,
-				{
-					positions: A3(
-						$elm_community$intdict$IntDict$insert,
-						pos,
-						model.toString(label),
-						model.positions)
-				});
-		});
-	return A2(
-		$elm$core$Task$map,
-		F2(
-			function (list, m) {
-				return A3($elm$core$List$foldl, fun, m, list);
-			}),
-		$elm$core$Task$sequence(
-			A2(
-				$elm$core$List$map,
-				function (label) {
-					return A2(
-						$elm$core$Task$map,
-						function (x) {
-							return _Utils_Tuple2(
-								$elm$core$Basics$round(x.element.y),
-								label);
-						},
-						$elm$browser$Browser$Dom$getElement(
-							toString(label)));
-				},
-				arrangement)));
-};
-var $author$project$Widget$ScrollingNav$init = function (_v0) {
-	var toString = _v0.toString;
-	var fromString = _v0.fromString;
-	var arrangement = _v0.arrangement;
-	var toMsg = _v0.toMsg;
-	return function (a) {
-		return _Utils_Tuple2(
-			a,
-			A2(
-				$elm$core$Task$attempt,
-				toMsg,
-				$author$project$Widget$ScrollingNav$syncPositions(a)));
-	}(
-		{arrangement: arrangement, fromString: fromString, positions: $elm_community$intdict$IntDict$empty, scrollPos: 0, toString: toString});
-};
-var $author$project$Main$initialModel = function (_v0) {
-	var viewport = _v0.viewport;
-	var _v1 = $author$project$Stateless$init;
-	var stateless = _v1.a;
-	var statelessCmd = _v1.b;
-	var _v2 = $author$project$Widget$ScrollingNav$init(
-		{
-			arrangement: $author$project$Data$Example$asList,
-			fromString: $author$project$Data$Example$fromString,
-			toMsg: function (result) {
-				if (result.$ === 'Ok') {
-					var fun = result.a;
-					return $author$project$Main$UpdateScrollingNav(fun);
-				} else {
-					return $author$project$Main$Idle;
-				}
-			},
-			toString: $author$project$Data$Example$toString
-		});
-	var scrollingNav = _v2.a;
-	var cmd = _v2.b;
-	return _Utils_Tuple2(
-		{
-			active: $elm$core$Maybe$Nothing,
-			displayDialog: false,
-			expanded: $turboMaCk$any_set$Set$Any$empty($author$project$Data$Example$toString),
-			scrollingNav: scrollingNav,
-			search: {current: '', raw: '', remaining: 0},
-			snackbar: $author$project$Widget$Snackbar$init,
-			stateless: stateless,
-			theme: $author$project$Data$Theme$Material,
-			window: {
-				height: $elm$core$Basics$round(viewport.height),
-				width: $elm$core$Basics$round(viewport.width)
-			}
-		},
-		$elm$core$Platform$Cmd$batch(
-			_List_fromArray(
-				[
-					cmd,
-					A2($elm$core$Platform$Cmd$map, $author$project$Main$StatelessSpecific, statelessCmd)
-				])));
-};
-var $elm$core$Tuple$mapBoth = F3(
-	function (funcA, funcB, _v0) {
-		var x = _v0.a;
-		var y = _v0.b;
-		return _Utils_Tuple2(
-			funcA(x),
-			funcB(y));
-	});
-var $author$project$Main$AddSnackbar = function (a) {
-	return {$: 'AddSnackbar', a: a};
-};
-var $author$project$Widget$ScrollingNav$getPos = A2(
-	$elm$core$Task$map,
-	F2(
-		function (_int, model) {
-			return _Utils_update(
-				model,
-				{
-					scrollPos: $elm$core$Basics$round(_int.viewport.y)
-				});
-		}),
-	$elm$browser$Browser$Dom$getViewport);
-var $elm$browser$Browser$Dom$setViewport = _Browser_setViewport;
-var $author$project$Widget$ScrollingNav$jumpTo = F2(
-	function (_v0, _v1) {
-		var section = _v0.section;
-		var onChange = _v0.onChange;
-		var toString = _v1.toString;
-		return A2(
-			$elm$core$Task$attempt,
-			onChange,
-			A2(
-				$elm$core$Task$andThen,
-				function (_v2) {
-					var element = _v2.element;
-					return A2($elm$browser$Browser$Dom$setViewport, 0, element.y);
-				},
-				$elm$browser$Browser$Dom$getElement(
-					toString(section))));
-	});
+var $elm$browser$Browser$Dom$focus = _Browser_call('focus');
 var $elm$browser$Browser$Navigation$load = _Browser_load;
-var $turboMaCk$any_dict$Dict$Any$insert = F3(
-	function (k, v, _v0) {
-		var inner = _v0.a;
-		return $turboMaCk$any_dict$Dict$Any$AnyDict(
-			_Utils_update(
-				inner,
-				{
-					dict: A3(
-						$elm$core$Dict$insert,
-						inner.toKey(k),
-						_Utils_Tuple2(k, v),
-						inner.dict)
-				}));
+var $elm$core$Dict$member = F2(
+	function (key, dict) {
+		var _v0 = A2($elm$core$Dict$get, key, dict);
+		if (_v0.$ === 'Just') {
+			return true;
+		} else {
+			return false;
+		}
 	});
-var $turboMaCk$any_set$Set$Any$insert = F2(
-	function (a, _v0) {
+var $elm$core$Set$member = F2(
+	function (key, _v0) {
 		var dict = _v0.a;
-		return $turboMaCk$any_set$Set$Any$AnySet(
-			A3($turboMaCk$any_dict$Dict$Any$insert, a, _Utils_Tuple0, dict));
+		return A2($elm$core$Dict$member, key, dict);
 	});
-var $turboMaCk$any_dict$Dict$Any$member = F2(
-	function (k, _v0) {
-		var dict = _v0.a.dict;
-		var toKey = _v0.a.toKey;
-		return A2(
-			$elm$core$Dict$member,
-			toKey(k),
-			dict);
-	});
-var $turboMaCk$any_set$Set$Any$member = F2(
-	function (a, _v0) {
+var $elm$core$Basics$not = _Basics_not;
+var $elm$browser$Browser$Navigation$pushUrl = _Browser_pushUrl;
+var $elm$core$Set$remove = F2(
+	function (key, _v0) {
 		var dict = _v0.a;
-		return A2($turboMaCk$any_dict$Dict$Any$member, a, dict);
+		return $elm$core$Set$Set_elm_builtin(
+			A2($elm$core$Dict$remove, key, dict));
 	});
-var $turboMaCk$any_dict$Dict$Any$remove = F2(
-	function (k, _v0) {
-		var inner = _v0.a;
-		return $turboMaCk$any_dict$Dict$Any$AnyDict(
-			_Utils_update(
-				inner,
-				{
-					dict: A2(
-						$elm$core$Dict$remove,
-						inner.toKey(k),
-						inner.dict)
-				}));
+var $author$project$UIExplorer$showSearchResults = function (searchText) {
+	return $elm$core$String$length(searchText) > 1;
+};
+var $elm$url$Url$addPort = F2(
+	function (maybePort, starter) {
+		if (maybePort.$ === 'Nothing') {
+			return starter;
+		} else {
+			var port_ = maybePort.a;
+			return starter + (':' + $elm$core$String$fromInt(port_));
+		}
 	});
-var $turboMaCk$any_set$Set$Any$remove = F2(
-	function (a, _v0) {
-		var dict = _v0.a;
-		return $turboMaCk$any_set$Set$Any$AnySet(
-			A2($turboMaCk$any_dict$Dict$Any$remove, a, dict));
+var $elm$url$Url$addPrefixed = F3(
+	function (prefix, maybeSegment, starter) {
+		if (maybeSegment.$ === 'Nothing') {
+			return starter;
+		} else {
+			var segment = maybeSegment.a;
+			return _Utils_ap(
+				starter,
+				_Utils_ap(prefix, segment));
+		}
 	});
-var $turboMaCk$any_set$Set$Any$toggle = F2(
-	function (a, set) {
-		return A2($turboMaCk$any_set$Set$Any$member, a, set) ? A2($turboMaCk$any_set$Set$Any$remove, a, set) : A2($turboMaCk$any_set$Set$Any$insert, a, set);
-	});
-var $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$Data$Example$update = F2(
-	function (msg, model) {
-		return function () {
-			switch (msg.$) {
-				case 'Button':
-					var m = msg.a;
-					return A2(
-						$author$project$Data$Example$updateField,
-						function ($) {
-							return $.button;
-						},
-						m);
-				case 'Switch':
-					var m = msg.a;
-					return A2(
-						$author$project$Data$Example$updateField,
-						function ($) {
-							return $._switch;
-						},
-						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 '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);
-				case 'List':
-					var m = msg.a;
-					return A2(
-						$author$project$Data$Example$updateField,
-						function ($) {
-							return $.list;
-						},
-						m);
-				case 'ProgressIndicator':
-					var m = msg.a;
-					return A2(
-						$author$project$Data$Example$updateField,
-						function ($) {
-							return $.progressIndicator;
-						},
-						m);
-				case 'Icon':
-					var m = msg.a;
-					return A2(
-						$author$project$Data$Example$updateField,
-						function ($) {
-							return $.icon;
-						},
-						m);
-				case 'Sheet':
-					var m = msg.a;
-					return A2(
-						$author$project$Data$Example$updateField,
-						function ($) {
-							return $.sheet;
-						},
-						m);
-				case 'AppBar':
-					var m = msg.a;
-					return A2(
-						$author$project$Data$Example$updateField,
-						function ($) {
-							return $.appBar;
-						},
-						m);
-				case 'Layout':
-					var m = msg.a;
-					return A2(
-						$author$project$Data$Example$updateField,
-						function ($) {
-							return $.layout;
-						},
-						m);
-				default:
-					var m = msg.a;
-					return A2(
-						$author$project$Data$Example$updateField,
-						function ($) {
-							return $.snackbar;
-						},
-						m);
-			}
-		}()(model);
-	});
-var $author$project$Stateless$update = F2(
-	function (msg, model) {
-		if (msg.$ === 'ExampleSpecific') {
-			var exampleMsg = msg.a;
-			var _v1 = A2($author$project$Data$Example$update, exampleMsg, model.example);
-			var exampleModel = _v1.a;
-			var exampleCmd = _v1.b;
-			return _Utils_Tuple2(
-				_Utils_update(
+var $elm$url$Url$toString = function (url) {
+	var http = function () {
+		var _v0 = url.protocol;
+		if (_v0.$ === 'Http') {
+			return 'http://';
+		} else {
+			return 'https://';
+		}
+	}();
+	return A3(
+		$elm$url$Url$addPrefixed,
+		'#',
+		url.fragment,
+		A3(
+			$elm$url$Url$addPrefixed,
+			'?',
+			url.query,
+			_Utils_ap(
+				A2(
+					$elm$url$Url$addPort,
+					url.port_,
+					_Utils_ap(http, url.host)),
+				url.path)));
+};
+var $author$project$UIExplorer$updateSuccess = F4(
+	function (_v0, config, msg, model) {
+		var pages = _v0.a;
+		switch (msg.$) {
+			case 'UrlChanged':
+				var url = msg.a;
+				var _v2 = A4(
+					$author$project$UIExplorer$pageFromUrl,
+					$author$project$UIExplorer$PageBuilder(pages),
+					config.relativeUrlPath,
+					model.key,
+					url);
+				var page = _v2.a;
+				var pageCmd = _v2.b;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{page: page}),
+					pageCmd);
+			case 'LinkClicked':
+				var urlRequest = msg.a;
+				if (urlRequest.$ === 'Internal') {
+					var url = urlRequest.a;
+					return _Utils_Tuple2(
+						model,
+						A2(
+							$elm$browser$Browser$Navigation$pushUrl,
+							model.key,
+							$elm$url$Url$toString(url)));
+				} else {
+					var url = urlRequest.a;
+					return _Utils_Tuple2(
+						model,
+						$elm$browser$Browser$Navigation$load(url));
+				}
+			case 'NoOp':
+				return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
+			case 'WindowResized':
+				var size = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{windowSize: size}),
+					$elm$core$Platform$Cmd$none);
+			case 'PressedToggleSidebar':
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{minimizeSidebar: !model.minimizeSidebar}),
+					$elm$core$Platform$Cmd$none);
+			case 'PageMsg':
+				var pageMsg = msg.a;
+				var _v4 = A2(pages.update, pageMsg, model.pageModel);
+				var pageModel = _v4.a;
+				var pageCmd = _v4.b;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{pageModel: pageModel}),
+					A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$PageMsg, pageCmd));
+			case 'PressedChangePageHotkey':
+				var pageId = msg.a;
+				return _Utils_Tuple2(
 					model,
-					{example: exampleModel}),
-				A2($elm$core$Platform$Cmd$map, $author$project$Stateless$ExampleSpecific, exampleCmd));
+					$elm$core$Platform$Cmd$batch(
+						_List_fromArray(
+							[
+								A2(
+								$elm$browser$Browser$Navigation$pushUrl,
+								model.key,
+								A2($author$project$UIExplorer$uiUrl, config.relativeUrlPath, pageId)),
+								A2(
+								$elm$core$Task$attempt,
+								$elm$core$Basics$always($author$project$UIExplorer$NoOp),
+								$elm$browser$Browser$Dom$focus(
+									$author$project$UIExplorer$pageGroupToString(pageId)))
+							])));
+			case 'ToggledPageGroup':
+				var path = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{
+							expandedGroups: function () {
+								var pathString = $author$project$UIExplorer$pageGroupToString(path);
+								return A2($elm$core$Set$member, pathString, model.expandedGroups) ? A2($elm$core$Set$remove, pathString, model.expandedGroups) : A2($elm$core$Set$insert, pathString, model.expandedGroups);
+							}()
+						}),
+					$elm$core$Platform$Cmd$none);
+			case 'TypingSearchText':
+				var text = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{
+							expandedGroups: $author$project$UIExplorer$showSearchResults(model.searchText) ? model.expandedGroups : A2($author$project$UIExplorer$expandPage, model.page, model.expandedGroups),
+							searchText: text
+						}),
+					$elm$core$Platform$Cmd$none);
+			case 'PressedClearSearchText':
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{
+							expandedGroups: A2($author$project$UIExplorer$expandPage, model.page, model.expandedGroups),
+							searchText: ''
+						}),
+					$elm$core$Platform$Cmd$none);
+			case 'PressedPageSizeOption':
+				var pageSizeOption = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{expandPageSizeOptions: false, pageSizeOption: pageSizeOption}),
+					$elm$core$Platform$Cmd$none);
+			case 'ToggledPageSizeGroup':
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{expandColorBlindOptions: false, expandPageSizeOptions: !model.expandPageSizeOptions}),
+					$elm$core$Platform$Cmd$none);
+			case 'PressedColorBlindOption':
+				var colorBlindOption = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{colorBlindOption: colorBlindOption, expandColorBlindOptions: false}),
+					$elm$core$Platform$Cmd$none);
+			case 'ToggledColorBlindGroup':
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{expandColorBlindOptions: !model.expandColorBlindOptions, expandPageSizeOptions: false}),
+					$elm$core$Platform$Cmd$none);
+			case 'ChangeDarkTheme':
+				var enabled = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{darkThemeEnabled: enabled}),
+					$elm$core$Platform$Cmd$none);
+			default:
+				var string = msg.a;
+				return _Utils_Tuple2(
+					model,
+					A2($elm$browser$Browser$Navigation$pushUrl, model.key, string));
+		}
+	});
+var $author$project$UIExplorer$update = F4(
+	function (pages, config, msg, model) {
+		if (model.$ === 'FlagsParsed') {
+			var successModel = model.a;
+			return A2(
+				$elm$core$Tuple$mapFirst,
+				$author$project$UIExplorer$FlagsParsed,
+				A4($author$project$UIExplorer$updateSuccess, pages, config, msg, successModel));
 		} else {
 			return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
 		}
 	});
-var $author$project$Main$updateLoaded = F2(
-	function (msg, model) {
-		switch (msg.$) {
-			case 'StatelessSpecific':
-				var m = msg.a;
-				return A3(
-					$elm$core$Tuple$mapBoth,
-					function (stateless) {
-						return _Utils_update(
-							model,
-							{stateless: stateless});
-					},
-					$elm$core$Platform$Cmd$map($author$project$Main$StatelessSpecific),
-					A2($author$project$Stateless$update, m, model.stateless));
-			case 'UpdateScrollingNav':
-				var fun = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							scrollingNav: fun(model.scrollingNav)
-						}),
-					$elm$core$Platform$Cmd$none);
-			case 'TimePassed':
-				var _int = msg.a;
-				var search = model.search;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							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,
-							snackbar: function () {
-								var _v1 = model.active;
-								_v1$2:
-								while (true) {
-									if (_v1.$ === 'Just') {
-										switch (_v1.a.$) {
-											case 'LeftSheet':
-												var _v2 = _v1.a;
-												return model.snackbar;
-											case 'RightSheet':
-												var _v3 = _v1.a;
-												return model.snackbar;
-											default:
-												break _v1$2;
-										}
-									} else {
-										break _v1$2;
-									}
-								}
-								return A2($author$project$Widget$Snackbar$timePassed, _int, model.snackbar);
-							}()
-						}),
-					A2($elm$core$Task$perform, $author$project$Main$UpdateScrollingNav, $author$project$Widget$ScrollingNav$getPos));
-			case 'AddSnackbar':
-				var _v4 = msg.a;
-				var string = _v4.a;
-				var bool = _v4.b;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							snackbar: A2(
-								$author$project$Widget$Snackbar$insert,
-								{
-									button: bool ? $elm$core$Maybe$Just(
-										{
-											onPress: $elm$core$Maybe$Just(
-												$author$project$Main$AddSnackbar(
-													_Utils_Tuple2('This is another message', false))),
-											text: 'Add'
-										}) : $elm$core$Maybe$Nothing,
-									text: string
-								},
-								model.snackbar)
-						}),
-					$elm$core$Platform$Cmd$none);
-			case 'Resized':
-				var window = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{window: window}),
-					$elm$core$Platform$Cmd$none);
-			case 'ChangedSidebar':
-				var sidebar = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{active: sidebar}),
-					$elm$core$Platform$Cmd$none);
-			case 'Load':
-				var string = msg.a;
-				return _Utils_Tuple2(
-					model,
-					$elm$browser$Browser$Navigation$load(string));
-			case 'JumpTo':
-				var section = msg.a;
-				return _Utils_Tuple2(
-					model,
-					A2(
-						$author$project$Widget$ScrollingNav$jumpTo,
-						{
-							onChange: $elm$core$Basics$always($author$project$Main$Idle),
-							section: section
-						},
-						model.scrollingNav));
-			case 'ChangedSearch':
-				var string = msg.a;
-				var search = model.search;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							search: _Utils_update(
-								search,
-								{raw: string, remaining: 300})
-						}),
-					$elm$core$Platform$Cmd$none);
-			case 'SetTheme':
-				var theme = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{theme: theme}),
-					$elm$core$Platform$Cmd$none);
-			case 'ToggledExample':
-				var example = msg.a;
-				return _Utils_Tuple2(
-					_Utils_update(
-						model,
-						{
-							expanded: A2($turboMaCk$any_set$Set$Any$toggle, example, model.expanded)
-						}),
-					$elm$core$Platform$Cmd$none);
-			default:
-				return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
-		}
-	});
-var $author$project$Main$update = F2(
-	function (msg, model) {
-		var _v0 = _Utils_Tuple2(model, msg);
-		_v0$2:
-		while (true) {
-			if (_v0.a.$ === 'Loading') {
-				if (_v0.b.$ === 'GotViewport') {
-					var _v1 = _v0.a;
-					var viewport = _v0.b.a;
-					return A3(
-						$elm$core$Tuple$mapBoth,
-						$author$project$Main$Loaded,
-						$elm$core$Platform$Cmd$map($author$project$Main$LoadedSpecific),
-						$author$project$Main$initialModel(viewport));
-				} else {
-					break _v0$2;
-				}
-			} else {
-				if (_v0.b.$ === 'LoadedSpecific') {
-					var state = _v0.a.a;
-					var m = _v0.b.a;
-					return A3(
-						$elm$core$Tuple$mapBoth,
-						$author$project$Main$Loaded,
-						$elm$core$Platform$Cmd$map($author$project$Main$LoadedSpecific),
-						A2($author$project$Main$updateLoaded, m, state));
-				} else {
-					break _v0$2;
-				}
-			}
-		}
-		return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
-	});
-var $mdgriffith$elm_ui$Internal$Style$classes = {above: 'a', active: 'atv', alignBottom: 'ab', alignCenterX: 'cx', alignCenterY: 'cy', alignContainerBottom: 'acb', alignContainerCenterX: 'accx', alignContainerCenterY: 'accy', alignContainerRight: 'acr', alignLeft: 'al', alignRight: 'ar', alignTop: 'at', alignedHorizontally: 'ah', alignedVertically: 'av', any: 's', behind: 'bh', below: 'b', bold: 'w7', borderDashed: 'bd', borderDotted: 'bdt', borderNone: 'bn', borderSolid: 'bs', capturePointerEvents: 'cpe', clip: 'cp', clipX: 'cpx', clipY: 'cpy', column: 'c', container: 'ctr', contentBottom: 'cb', contentCenterX: 'ccx', contentCenterY: 'ccy', contentLeft: 'cl', contentRight: 'cr', contentTop: 'ct', cursorPointer: 'cptr', cursorText: 'ctxt', focus: 'fcs', focusedWithin: 'focus-within', fullSize: 'fs', grid: 'g', hasBehind: 'hbh', heightContent: 'hc', heightExact: 'he', heightFill: 'hf', heightFillPortion: 'hfp', hover: 'hv', imageContainer: 'ic', inFront: 'fr', inputLabel: 'lbl', inputMultiline: 'iml', inputMultilineFiller: 'imlf', inputMultilineParent: 'imlp', inputMultilineWrapper: 'implw', inputText: 'it', italic: 'i', link: 'lnk', nearby: 'nb', noTextSelection: 'notxt', onLeft: 'ol', onRight: 'or', opaque: 'oq', overflowHidden: 'oh', page: 'pg', paragraph: 'p', passPointerEvents: 'ppe', root: 'ui', row: 'r', scrollbars: 'sb', scrollbarsX: 'sbx', scrollbarsY: 'sby', seButton: 'sbt', single: 'e', sizeByCapital: 'cap', spaceEvenly: 'sev', strike: 'sk', text: 't', textCenter: 'tc', textExtraBold: 'w8', textExtraLight: 'w2', textHeavy: 'w9', textJustify: 'tj', textJustifyAll: 'tja', textLeft: 'tl', textLight: 'w3', textMedium: 'w5', textNormalWeight: 'w4', textRight: 'tr', textSemiBold: 'w6', textThin: 'w1', textUnitalicized: 'tun', transition: 'ts', transparent: 'clr', underline: 'u', widthContent: 'wc', widthExact: 'we', widthFill: 'wf', widthFillPortion: 'wfp', wrapped: 'wrp'};
-var $mdgriffith$elm_ui$Internal$Model$Attr = function (a) {
-	return {$: 'Attr', a: a};
+var $mdgriffith$elm_ui$Internal$Model$Describe = function (a) {
+	return {$: 'Describe', a: a};
 };
-var $elm$json$Json$Encode$string = _Json_wrap;
-var $elm$html$Html$Attributes$stringProperty = F2(
-	function (key, string) {
-		return A2(
-			_VirtualDom_property,
-			key,
-			$elm$json$Json$Encode$string(string));
+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$Internal$Model$Colored = F3(
+	function (a, b, c) {
+		return {$: 'Colored', a: a, b: b, c: c};
 	});
-var $elm$html$Html$Attributes$class = $elm$html$Html$Attributes$stringProperty('className');
-var $mdgriffith$elm_ui$Internal$Model$htmlClass = function (cls) {
-	return $mdgriffith$elm_ui$Internal$Model$Attr(
-		$elm$html$Html$Attributes$class(cls));
+var $mdgriffith$elm_ui$Internal$Model$StyleClass = F2(
+	function (a, b) {
+		return {$: 'StyleClass', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Internal$Flag$Flag = function (a) {
+	return {$: 'Flag', a: a};
+};
+var $mdgriffith$elm_ui$Internal$Flag$Second = function (a) {
+	return {$: 'Second', a: a};
+};
+var $elm$core$Bitwise$shiftLeftBy = _Bitwise_shiftLeftBy;
+var $mdgriffith$elm_ui$Internal$Flag$flag = function (i) {
+	return (i > 31) ? $mdgriffith$elm_ui$Internal$Flag$Second(1 << (i - 32)) : $mdgriffith$elm_ui$Internal$Flag$Flag(1 << i);
+};
+var $mdgriffith$elm_ui$Internal$Flag$bgColor = $mdgriffith$elm_ui$Internal$Flag$flag(8);
+var $mdgriffith$elm_ui$Internal$Model$floatClass = function (x) {
+	return $elm$core$String$fromInt(
+		$elm$core$Basics$round(x * 255));
+};
+var $mdgriffith$elm_ui$Internal$Model$formatColorClass = function (_v0) {
+	var red = _v0.a;
+	var green = _v0.b;
+	var blue = _v0.c;
+	var alpha = _v0.d;
+	return $mdgriffith$elm_ui$Internal$Model$floatClass(red) + ('-' + ($mdgriffith$elm_ui$Internal$Model$floatClass(green) + ('-' + ($mdgriffith$elm_ui$Internal$Model$floatClass(blue) + ('-' + $mdgriffith$elm_ui$Internal$Model$floatClass(alpha))))));
+};
+var $mdgriffith$elm_ui$Element$Background$color = function (clr) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$bgColor,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$Colored,
+			'bg-' + $mdgriffith$elm_ui$Internal$Model$formatColorClass(clr),
+			'background-color',
+			clr));
+};
+var $mdgriffith$elm_ui$Internal$Flag$fontColor = $mdgriffith$elm_ui$Internal$Flag$flag(14);
+var $mdgriffith$elm_ui$Element$Font$color = function (fontColor) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$fontColor,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$Colored,
+			'fc-' + $mdgriffith$elm_ui$Internal$Model$formatColorClass(fontColor),
+			'color',
+			fontColor));
 };
-var $mdgriffith$elm_ui$Internal$Model$OnlyDynamic = F2(
-	function (a, b) {
-		return {$: 'OnlyDynamic', a: a, b: b};
-	});
-var $mdgriffith$elm_ui$Internal$Model$StaticRootAndDynamic = F2(
-	function (a, b) {
-		return {$: 'StaticRootAndDynamic', a: a, b: b};
-	});
 var $mdgriffith$elm_ui$Internal$Model$Unkeyed = function (a) {
 	return {$: 'Unkeyed', a: a};
 };
-var $mdgriffith$elm_ui$Internal$Model$AsEl = {$: 'AsEl'};
-var $mdgriffith$elm_ui$Internal$Model$asEl = $mdgriffith$elm_ui$Internal$Model$AsEl;
+var $mdgriffith$elm_ui$Internal$Model$AsColumn = {$: 'AsColumn'};
+var $mdgriffith$elm_ui$Internal$Model$asColumn = $mdgriffith$elm_ui$Internal$Model$AsColumn;
+var $mdgriffith$elm_ui$Internal$Style$classes = {above: 'a', active: 'atv', alignBottom: 'ab', alignCenterX: 'cx', alignCenterY: 'cy', alignContainerBottom: 'acb', alignContainerCenterX: 'accx', alignContainerCenterY: 'accy', alignContainerRight: 'acr', alignLeft: 'al', alignRight: 'ar', alignTop: 'at', alignedHorizontally: 'ah', alignedVertically: 'av', any: 's', behind: 'bh', below: 'b', bold: 'w7', borderDashed: 'bd', borderDotted: 'bdt', borderNone: 'bn', borderSolid: 'bs', capturePointerEvents: 'cpe', clip: 'cp', clipX: 'cpx', clipY: 'cpy', column: 'c', container: 'ctr', contentBottom: 'cb', contentCenterX: 'ccx', contentCenterY: 'ccy', contentLeft: 'cl', contentRight: 'cr', contentTop: 'ct', cursorPointer: 'cptr', cursorText: 'ctxt', focus: 'fcs', focusedWithin: 'focus-within', fullSize: 'fs', grid: 'g', hasBehind: 'hbh', heightContent: 'hc', heightExact: 'he', heightFill: 'hf', heightFillPortion: 'hfp', hover: 'hv', imageContainer: 'ic', inFront: 'fr', inputLabel: 'lbl', inputMultiline: 'iml', inputMultilineFiller: 'imlf', inputMultilineParent: 'imlp', inputMultilineWrapper: 'implw', inputText: 'it', italic: 'i', link: 'lnk', nearby: 'nb', noTextSelection: 'notxt', onLeft: 'ol', onRight: 'or', opaque: 'oq', overflowHidden: 'oh', page: 'pg', paragraph: 'p', passPointerEvents: 'ppe', root: 'ui', row: 'r', scrollbars: 'sb', scrollbarsX: 'sbx', scrollbarsY: 'sby', seButton: 'sbt', single: 'e', sizeByCapital: 'cap', spaceEvenly: 'sev', strike: 'sk', text: 't', textCenter: 'tc', textExtraBold: 'w8', textExtraLight: 'w2', textHeavy: 'w9', textJustify: 'tj', textJustifyAll: 'tja', textLeft: 'tl', textLight: 'w3', textMedium: 'w5', textNormalWeight: 'w4', textRight: 'tr', textSemiBold: 'w6', textThin: 'w1', textUnitalicized: 'tun', transition: 'ts', transparent: 'clr', underline: 'u', widthContent: 'wc', widthExact: 'we', widthFill: 'wf', widthFillPortion: 'wfp', wrapped: 'wrp'};
 var $mdgriffith$elm_ui$Internal$Model$Generic = {$: 'Generic'};
 var $mdgriffith$elm_ui$Internal$Model$div = $mdgriffith$elm_ui$Internal$Model$Generic;
 var $mdgriffith$elm_ui$Internal$Model$NoNearbyChildren = {$: 'NoNearbyChildren'};
@@ -8186,22 +7086,23 @@ var $mdgriffith$elm_ui$Internal$Model$addKeyedChildren = F3(
 							inFront)));
 		}
 	});
+var $mdgriffith$elm_ui$Internal$Model$AsEl = {$: 'AsEl'};
+var $mdgriffith$elm_ui$Internal$Model$asEl = $mdgriffith$elm_ui$Internal$Model$AsEl;
 var $mdgriffith$elm_ui$Internal$Model$AsParagraph = {$: 'AsParagraph'};
 var $mdgriffith$elm_ui$Internal$Model$asParagraph = $mdgriffith$elm_ui$Internal$Model$AsParagraph;
-var $mdgriffith$elm_ui$Internal$Flag$Flag = function (a) {
-	return {$: 'Flag', a: a};
-};
-var $mdgriffith$elm_ui$Internal$Flag$Second = function (a) {
-	return {$: 'Second', a: a};
-};
-var $elm$core$Bitwise$shiftLeftBy = _Bitwise_shiftLeftBy;
-var $mdgriffith$elm_ui$Internal$Flag$flag = function (i) {
-	return (i > 31) ? $mdgriffith$elm_ui$Internal$Flag$Second(1 << (i - 32)) : $mdgriffith$elm_ui$Internal$Flag$Flag(1 << i);
-};
 var $mdgriffith$elm_ui$Internal$Flag$alignBottom = $mdgriffith$elm_ui$Internal$Flag$flag(41);
 var $mdgriffith$elm_ui$Internal$Flag$alignRight = $mdgriffith$elm_ui$Internal$Flag$flag(40);
 var $mdgriffith$elm_ui$Internal$Flag$centerX = $mdgriffith$elm_ui$Internal$Flag$flag(42);
 var $mdgriffith$elm_ui$Internal$Flag$centerY = $mdgriffith$elm_ui$Internal$Flag$flag(43);
+var $elm$json$Json$Encode$string = _Json_wrap;
+var $elm$html$Html$Attributes$stringProperty = F2(
+	function (key, string) {
+		return A2(
+			_VirtualDom_property,
+			key,
+			$elm$json$Json$Encode$string(string));
+	});
+var $elm$html$Html$Attributes$class = $elm$html$Html$Attributes$stringProperty('className');
 var $elm$html$Html$div = _VirtualDom_node('div');
 var $mdgriffith$elm_ui$Internal$Model$lengthClassName = function (x) {
 	switch (x.$) {
@@ -8227,10 +7128,6 @@ var $elm$core$Tuple$second = function (_v0) {
 	var y = _v0.b;
 	return y;
 };
-var $mdgriffith$elm_ui$Internal$Model$floatClass = function (x) {
-	return $elm$core$String$fromInt(
-		$elm$core$Basics$round(x * 255));
-};
 var $mdgriffith$elm_ui$Internal$Model$transformClass = function (transform) {
 	switch (transform.$) {
 		case 'Untransformed':
@@ -8413,13 +7310,23 @@ var $mdgriffith$elm_ui$Internal$Model$formatBoxShadow = function (shadow) {
 					$mdgriffith$elm_ui$Internal$Model$formatColor(shadow.color))
 				])));
 };
-var $elm$core$Tuple$mapFirst = F2(
+var $elm$core$Maybe$map = F2(
+	function (f, maybe) {
+		if (maybe.$ === 'Just') {
+			var value = maybe.a;
+			return $elm$core$Maybe$Just(
+				f(value));
+		} else {
+			return $elm$core$Maybe$Nothing;
+		}
+	});
+var $elm$core$Tuple$mapSecond = F2(
 	function (func, _v0) {
 		var x = _v0.a;
 		var y = _v0.b;
 		return _Utils_Tuple2(
-			func(x),
-			y);
+			x,
+			func(y));
 	});
 var $mdgriffith$elm_ui$Internal$Model$renderFocusStyle = function (focus) {
 	return _List_fromArray(
@@ -8574,22 +7481,6 @@ var $mdgriffith$elm_ui$Internal$Style$CenterY = {$: 'CenterY'};
 var $mdgriffith$elm_ui$Internal$Style$Top = {$: 'Top'};
 var $mdgriffith$elm_ui$Internal$Style$alignments = _List_fromArray(
 	[$mdgriffith$elm_ui$Internal$Style$Top, $mdgriffith$elm_ui$Internal$Style$Bottom, $mdgriffith$elm_ui$Internal$Style$Right, $mdgriffith$elm_ui$Internal$Style$Left, $mdgriffith$elm_ui$Internal$Style$CenterX, $mdgriffith$elm_ui$Internal$Style$CenterY]);
-var $elm$core$List$append = F2(
-	function (xs, ys) {
-		if (!ys.b) {
-			return xs;
-		} else {
-			return A3($elm$core$List$foldr, $elm$core$List$cons, ys, xs);
-		}
-	});
-var $elm$core$List$concat = function (lists) {
-	return A3($elm$core$List$foldr, $elm$core$List$append, _List_Nil, lists);
-};
-var $elm$core$List$concatMap = F2(
-	function (f, list) {
-		return $elm$core$List$concat(
-			A2($elm$core$List$map, f, list));
-	});
 var $mdgriffith$elm_ui$Internal$Style$contentName = function (desc) {
 	switch (desc.a.$) {
 		case 'Top':
@@ -10684,6 +9575,9 @@ var $elm$core$Basics$min = F2(
 	function (x, y) {
 		return (_Utils_cmp(x, y) < 0) ? x : y;
 	});
+var $elm$core$Basics$negate = function (n) {
+	return -n;
+};
 var $mdgriffith$elm_ui$Internal$Model$renderProps = F3(
 	function (force, _v0, existing) {
 		var key = _v0.a;
@@ -11394,6 +10288,7 @@ var $elm$core$List$minimum = function (list) {
 		return $elm$core$Maybe$Nothing;
 	}
 };
+var $elm$core$Basics$neq = _Utils_notEqual;
 var $mdgriffith$elm_ui$Internal$Model$convertAdjustment = function (adjustment) {
 	var lines = _List_fromArray(
 		[adjustment.capital, adjustment.baseline, adjustment.descender, adjustment.lowercase]);
@@ -11679,6 +10574,7 @@ var $elm$virtual_dom$VirtualDom$keyedNode = function (tag) {
 		_VirtualDom_noScript(tag));
 };
 var $elm$html$Html$p = _VirtualDom_node('p');
+var $elm$core$Bitwise$and = _Bitwise_and;
 var $mdgriffith$elm_ui$Internal$Flag$present = F2(
 	function (myFlag, _v0) {
 		var fieldOne = _v0.a;
@@ -12047,6 +10943,7 @@ var $mdgriffith$elm_ui$Internal$Flag$Field = F2(
 	function (a, b) {
 		return {$: 'Field', a: a, b: b};
 	});
+var $elm$core$Bitwise$or = _Bitwise_or;
 var $mdgriffith$elm_ui$Internal$Flag$add = F2(
 	function (myFlag, _v0) {
 		var one = _v0.a;
@@ -12525,6 +11422,7 @@ var $mdgriffith$elm_ui$Internal$Model$renderWidth = function (w) {
 	}
 };
 var $mdgriffith$elm_ui$Internal$Flag$borderWidth = $mdgriffith$elm_ui$Internal$Flag$flag(27);
+var $elm$core$Basics$ge = _Utils_ge;
 var $mdgriffith$elm_ui$Internal$Model$skippable = F2(
 	function (flag, style) {
 		if (_Utils_eq(flag, $mdgriffith$elm_ui$Internal$Flag$borderWidth)) {
@@ -13458,12 +12356,188 @@ var $mdgriffith$elm_ui$Internal$Model$element = F4(
 				$mdgriffith$elm_ui$Internal$Model$NoNearbyChildren,
 				$elm$core$List$reverse(attributes)));
 	});
-var $mdgriffith$elm_ui$Internal$Model$AllowHover = {$: 'AllowHover'};
-var $mdgriffith$elm_ui$Internal$Model$Layout = {$: 'Layout'};
+var $mdgriffith$elm_ui$Internal$Model$Height = function (a) {
+	return {$: 'Height', a: a};
+};
+var $mdgriffith$elm_ui$Element$height = $mdgriffith$elm_ui$Internal$Model$Height;
+var $mdgriffith$elm_ui$Internal$Model$Attr = function (a) {
+	return {$: 'Attr', a: a};
+};
+var $mdgriffith$elm_ui$Internal$Model$htmlClass = function (cls) {
+	return $mdgriffith$elm_ui$Internal$Model$Attr(
+		$elm$html$Html$Attributes$class(cls));
+};
+var $mdgriffith$elm_ui$Internal$Model$Content = {$: 'Content'};
+var $mdgriffith$elm_ui$Element$shrink = $mdgriffith$elm_ui$Internal$Model$Content;
+var $mdgriffith$elm_ui$Internal$Model$Width = function (a) {
+	return {$: 'Width', a: a};
+};
+var $mdgriffith$elm_ui$Element$width = $mdgriffith$elm_ui$Internal$Model$Width;
+var $mdgriffith$elm_ui$Element$column = F2(
+	function (attrs, children) {
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asColumn,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentTop + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.contentLeft)),
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+						attrs))),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
+	});
+var $mdgriffith$elm_ui$Element$el = F2(
+	function (attrs, child) {
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asEl,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+					attrs)),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+				_List_fromArray(
+					[child])));
+	});
+var $mdgriffith$elm_ui$Internal$Model$Fill = function (a) {
+	return {$: 'Fill', a: a};
+};
+var $mdgriffith$elm_ui$Element$fill = $mdgriffith$elm_ui$Internal$Model$Fill(1);
+var $mdgriffith$elm_ui$Internal$Model$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$PaddingStyle = F5(
+	function (a, b, c, d, e) {
+		return {$: 'PaddingStyle', a: a, b: b, c: c, d: d, e: e};
+	});
+var $mdgriffith$elm_ui$Internal$Flag$padding = $mdgriffith$elm_ui$Internal$Flag$flag(2);
+var $mdgriffith$elm_ui$Element$padding = function (x) {
+	var f = x;
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$padding,
+		A5(
+			$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+			'p-' + $elm$core$String$fromInt(x),
+			f,
+			f,
+			f,
+			f));
+};
 var $mdgriffith$elm_ui$Internal$Model$Rgba = F4(
 	function (a, b, c, d) {
 		return {$: 'Rgba', a: a, b: b, c: c, d: d};
 	});
+var $mdgriffith$elm_ui$Element$rgb255 = F3(
+	function (red, green, blue) {
+		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, red / 255, green / 255, blue / 255, 1);
+	});
+var $mdgriffith$elm_ui$Internal$Model$FontSize = function (a) {
+	return {$: 'FontSize', a: a};
+};
+var $mdgriffith$elm_ui$Internal$Flag$fontSize = $mdgriffith$elm_ui$Internal$Flag$flag(4);
+var $mdgriffith$elm_ui$Element$Font$size = function (i) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$fontSize,
+		$mdgriffith$elm_ui$Internal$Model$FontSize(i));
+};
+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 $elm$virtual_dom$VirtualDom$style = _VirtualDom_style;
+var $elm$html$Html$Attributes$style = $elm$virtual_dom$VirtualDom$style;
+var $mdgriffith$elm_ui$Internal$Model$Text = function (a) {
+	return {$: 'Text', a: a};
+};
+var $mdgriffith$elm_ui$Element$text = function (content) {
+	return $mdgriffith$elm_ui$Internal$Model$Text(content);
+};
+var $author$project$UIExplorer$gray = A3($mdgriffith$elm_ui$Element$rgb255, 206, 215, 225);
+var $author$project$UIExplorer$textColor = function (dark) {
+	return dark ? $author$project$UIExplorer$gray : A3($mdgriffith$elm_ui$Element$rgb255, 56, 60, 67);
+};
+var $author$project$UIExplorer$errorView = F2(
+	function (dark, errorMessage) {
+		return A2(
+			$mdgriffith$elm_ui$Element$column,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Region$announce,
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$Background$color(
+					A3($mdgriffith$elm_ui$Element$rgb255, 250, 237, 236)),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$UIExplorer$textColor(dark)),
+					$mdgriffith$elm_ui$Element$padding(16),
+					$mdgriffith$elm_ui$Element$spacing(16)
+				]),
+			_List_fromArray(
+				[
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Font$size(20)
+						]),
+					$mdgriffith$elm_ui$Element$text('Failed to parse flags')),
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Font$size(16)
+						]),
+					$mdgriffith$elm_ui$Element$html(
+						A2(
+							$elm$html$Html$div,
+							_List_fromArray(
+								[
+									A2($elm$html$Html$Attributes$style, 'white-space', 'pre-wrap'),
+									A2($elm$html$Html$Attributes$style, 'line-height', '1.25'),
+									A2($elm$html$Html$Attributes$style, 'padding-top', '0'),
+									A2($elm$html$Html$Attributes$style, 'width', '100%'),
+									A2($elm$html$Html$Attributes$style, 'word-break', 'break-word')
+								]),
+							_List_fromArray(
+								[
+									$elm$html$Html$text(errorMessage)
+								]))))
+				]));
+	});
+var $mdgriffith$elm_ui$Internal$Model$OnlyDynamic = F2(
+	function (a, b) {
+		return {$: 'OnlyDynamic', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Internal$Model$StaticRootAndDynamic = F2(
+	function (a, b) {
+		return {$: 'StaticRootAndDynamic', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Internal$Model$AllowHover = {$: 'AllowHover'};
+var $mdgriffith$elm_ui$Internal$Model$Layout = {$: 'Layout'};
 var $mdgriffith$elm_ui$Internal$Model$focusDefaultStyle = {
 	backgroundColor: $elm$core$Maybe$Nothing,
 	borderColor: $elm$core$Maybe$Nothing,
@@ -13598,36 +12672,15 @@ var $mdgriffith$elm_ui$Internal$Model$renderRoot = F3(
 					_List_fromArray(
 						[child]))));
 	});
-var $mdgriffith$elm_ui$Internal$Model$Colored = F3(
-	function (a, b, c) {
-		return {$: 'Colored', a: a, b: b, c: c};
-	});
 var $mdgriffith$elm_ui$Internal$Model$FontFamily = F2(
 	function (a, b) {
 		return {$: 'FontFamily', a: a, b: b};
 	});
-var $mdgriffith$elm_ui$Internal$Model$FontSize = function (a) {
-	return {$: 'FontSize', a: a};
-};
 var $mdgriffith$elm_ui$Internal$Model$SansSerif = {$: 'SansSerif'};
-var $mdgriffith$elm_ui$Internal$Model$StyleClass = F2(
-	function (a, b) {
-		return {$: 'StyleClass', a: a, b: b};
-	});
 var $mdgriffith$elm_ui$Internal$Model$Typeface = function (a) {
 	return {$: 'Typeface', a: a};
 };
-var $mdgriffith$elm_ui$Internal$Flag$bgColor = $mdgriffith$elm_ui$Internal$Flag$flag(8);
-var $mdgriffith$elm_ui$Internal$Flag$fontColor = $mdgriffith$elm_ui$Internal$Flag$flag(14);
 var $mdgriffith$elm_ui$Internal$Flag$fontFamily = $mdgriffith$elm_ui$Internal$Flag$flag(5);
-var $mdgriffith$elm_ui$Internal$Flag$fontSize = $mdgriffith$elm_ui$Internal$Flag$flag(4);
-var $mdgriffith$elm_ui$Internal$Model$formatColorClass = function (_v0) {
-	var red = _v0.a;
-	var green = _v0.b;
-	var blue = _v0.c;
-	var alpha = _v0.d;
-	return $mdgriffith$elm_ui$Internal$Model$floatClass(red) + ('-' + ($mdgriffith$elm_ui$Internal$Model$floatClass(green) + ('-' + ($mdgriffith$elm_ui$Internal$Model$floatClass(blue) + ('-' + $mdgriffith$elm_ui$Internal$Model$floatClass(alpha))))));
-};
 var $elm$core$String$toLower = _String_toLower;
 var $elm$core$String$words = _String_words;
 var $mdgriffith$elm_ui$Internal$Model$renderFontClassName = F2(
@@ -13725,112 +12778,324 @@ var $mdgriffith$elm_ui$Element$layoutWith = F3(
 				_Utils_ap($mdgriffith$elm_ui$Internal$Model$rootStyle, attrs)),
 			child);
 	});
-var $mdgriffith$elm_ui$Element$layout = $mdgriffith$elm_ui$Element$layoutWith(
-	{options: _List_Nil});
-var $elm$virtual_dom$VirtualDom$map = _VirtualDom_map;
-var $elm$html$Html$map = $elm$virtual_dom$VirtualDom$map;
-var $mdgriffith$elm_ui$Internal$Model$Empty = {$: 'Empty'};
-var $mdgriffith$elm_ui$Element$none = $mdgriffith$elm_ui$Internal$Model$Empty;
-var $elm$html$Html$Attributes$attribute = $elm$virtual_dom$VirtualDom$attribute;
-var $mdgriffith$elm_ui$Element$Font$color = function (fontColor) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$fontColor,
-		A3(
-			$mdgriffith$elm_ui$Internal$Model$Colored,
-			'fc-' + $mdgriffith$elm_ui$Internal$Model$formatColorClass(fontColor),
-			'color',
-			fontColor));
+var $mdgriffith$elm_ui$Element$Desktop = {$: 'Desktop'};
+var $author$project$UIExplorer$PressedToggleSidebar = {$: 'PressedToggleSidebar'};
+var $mdgriffith$elm_ui$Internal$Model$AlignY = function (a) {
+	return {$: 'AlignY', a: a};
 };
-var $mdgriffith$elm_ui$Element$rgb255 = F3(
-	function (red, green, blue) {
-		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, red / 255, green / 255, blue / 255, 1);
+var $mdgriffith$elm_ui$Internal$Model$Top = {$: 'Top'};
+var $mdgriffith$elm_ui$Element$alignTop = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$Top);
+var $mdgriffith$elm_ui$Internal$Model$Behind = {$: 'Behind'};
+var $mdgriffith$elm_ui$Internal$Model$Nearby = F2(
+	function (a, b) {
+		return {$: 'Nearby', a: a, b: b};
 	});
-var $Orasund$elm_ui_framework$Framework$Color$darkerGrey = A3($mdgriffith$elm_ui$Element$rgb255, 18, 18, 18);
-var $mdgriffith$elm_ui$Element$Background$color = function (clr) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$bgColor,
-		A3(
-			$mdgriffith$elm_ui$Internal$Model$Colored,
-			'bg-' + $mdgriffith$elm_ui$Internal$Model$formatColorClass(clr),
-			'background-color',
-			clr));
+var $mdgriffith$elm_ui$Internal$Model$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$behindContent = function (element) {
+	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$Behind, element);
 };
-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 $mdgriffith$elm_ui$Element$rgb = F3(
+	function (r, g, b) {
+		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, r, g, b, 1);
+	});
+var $author$project$UIExplorer$black = A3($mdgriffith$elm_ui$Element$rgb, 0, 0, 0);
+var $mdgriffith$elm_ui$Internal$Model$AlignX = function (a) {
+	return {$: 'AlignX', a: a};
 };
-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 $mdgriffith$elm_ui$Element$Font$size = function (i) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$fontSize,
-		$mdgriffith$elm_ui$Internal$Model$FontSize(i));
+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 $author$project$UIExplorer$colorBlindOptionToCssClass = function (colorBlindOption) {
+	switch (colorBlindOption.$) {
+		case 'Protanopia':
+			return 'uie-a';
+		case 'Protanomaly':
+			return 'uie-b';
+		case 'Deuteranopia':
+			return 'uie-c';
+		case 'Deuteranomaly':
+			return 'uie-d';
+		case 'Tritanopia':
+			return 'uie-e';
+		case 'Tritanomaly':
+			return 'uie-f';
+		case 'Achromatopsia':
+			return 'uie-g';
+		case 'Achromatomaly':
+			return 'uie-h';
+		default:
+			return 'uie-i';
+	}
 };
-var $Orasund$elm_ui_framework$Framework$layoutAttributes = _Utils_ap(
+var $author$project$UIExplorer$Achromatomaly = {$: 'Achromatomaly'};
+var $author$project$UIExplorer$Achromatopsia = {$: 'Achromatopsia'};
+var $author$project$UIExplorer$Blind = {$: 'Blind'};
+var $author$project$UIExplorer$Deuteranomaly = {$: 'Deuteranomaly'};
+var $author$project$UIExplorer$Deuteranopia = {$: 'Deuteranopia'};
+var $author$project$UIExplorer$Protanomaly = {$: 'Protanomaly'};
+var $author$project$UIExplorer$Protanopia = {$: 'Protanopia'};
+var $author$project$UIExplorer$Tritanomaly = {$: 'Tritanomaly'};
+var $author$project$UIExplorer$Tritanopia = {$: 'Tritanopia'};
+var $author$project$UIExplorer$allColorBlindOptions = _List_fromArray(
+	[$author$project$UIExplorer$Protanopia, $author$project$UIExplorer$Protanomaly, $author$project$UIExplorer$Deuteranopia, $author$project$UIExplorer$Deuteranomaly, $author$project$UIExplorer$Tritanopia, $author$project$UIExplorer$Tritanomaly, $author$project$UIExplorer$Achromatopsia, $author$project$UIExplorer$Achromatomaly, $author$project$UIExplorer$Blind]);
+var $elm$html$Html$node = $elm$virtual_dom$VirtualDom$node;
+var $author$project$UIExplorer$colorblindnessCss = A3(
+	$elm$html$Html$node,
+	'style',
+	_List_Nil,
 	_List_fromArray(
 		[
-			$mdgriffith$elm_ui$Element$Font$size(16),
-			$mdgriffith$elm_ui$Element$Font$color($Orasund$elm_ui_framework$Framework$Color$darkerGrey)
-		]),
-	$Orasund$elm_ui_framework$Framework$Color$light);
-var $mdgriffith$elm_ui$Internal$Model$FocusStyleOption = function (a) {
-	return {$: 'FocusStyleOption', a: a};
-};
-var $mdgriffith$elm_ui$Element$focusStyle = $mdgriffith$elm_ui$Internal$Model$FocusStyleOption;
-var $Orasund$elm_ui_framework$Framework$Color$turquoise = A3($mdgriffith$elm_ui$Element$rgb255, 0, 209, 178);
-var $Orasund$elm_ui_framework$Framework$layoutOptions = $elm$core$List$singleton(
-	$mdgriffith$elm_ui$Element$focusStyle(
-		{
-			backgroundColor: $elm$core$Maybe$Nothing,
-			borderColor: $elm$core$Maybe$Just($Orasund$elm_ui_framework$Framework$Color$turquoise),
-			shadow: $elm$core$Maybe$Just(
-				{
-					blur: 10,
-					color: $Orasund$elm_ui_framework$Framework$Color$turquoise,
-					offset: _Utils_Tuple2(0, 0),
-					size: 1
-				})
-		}));
-var $Orasund$elm_ui_framework$Framework$layout = function (attributes) {
+			$elm$html$Html$text(
+			$elm$core$String$concat(
+				A2(
+					$elm$core$List$map,
+					function (option) {
+						var className = $author$project$UIExplorer$colorBlindOptionToCssClass(option);
+						return '.' + (className + (' { filter: url(#' + (className + ') }\n')));
+					},
+					$author$project$UIExplorer$allColorBlindOptions)))
+		]));
+var $elm$svg$Svg$trustedNode = _VirtualDom_nodeNS('http://www.w3.org/2000/svg');
+var $elm$svg$Svg$defs = $elm$svg$Svg$trustedNode('defs');
+var $elm$svg$Svg$feColorMatrix = $elm$svg$Svg$trustedNode('feColorMatrix');
+var $elm$svg$Svg$filter = $elm$svg$Svg$trustedNode('filter');
+var $elm$svg$Svg$Attributes$id = _VirtualDom_attribute('id');
+var $elm$svg$Svg$Attributes$in_ = _VirtualDom_attribute('in');
+var $elm$svg$Svg$svg = $elm$svg$Svg$trustedNode('svg');
+var $elm$svg$Svg$Attributes$values = function (value) {
 	return A2(
-		$mdgriffith$elm_ui$Element$layoutWith,
-		{options: $Orasund$elm_ui_framework$Framework$layoutOptions},
-		_Utils_ap($Orasund$elm_ui_framework$Framework$layoutAttributes, attributes));
+		_VirtualDom_attribute,
+		'values',
+		_VirtualDom_noJavaScriptUri(value));
 };
-var $elm$html$Html$node = $elm$virtual_dom$VirtualDom$node;
-var $Orasund$elm_ui_framework$Framework$responsiveLayout = F2(
-	function (attributes, view) {
-		return A2(
-			$elm$html$Html$div,
+var $author$project$UIExplorer$colorblindnessSvg = A2(
+	$elm$svg$Svg$svg,
+	_List_Nil,
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$defs,
 			_List_Nil,
 			_List_fromArray(
 				[
-					A3(
-					$elm$html$Html$node,
-					'meta',
+					A2(
+					$elm$svg$Svg$filter,
 					_List_fromArray(
 						[
-							A2($elm$html$Html$Attributes$attribute, 'name', 'viewport'),
-							A2($elm$html$Html$Attributes$attribute, 'content', 'width=device-width, initial-scale=1.0')
+							$elm$svg$Svg$Attributes$id(
+							$author$project$UIExplorer$colorBlindOptionToCssClass($author$project$UIExplorer$Protanopia))
 						]),
-					_List_Nil),
-					A2($Orasund$elm_ui_framework$Framework$layout, attributes, view)
-				]));
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$feColorMatrix,
+							_List_fromArray(
+								[
+									$elm$svg$Svg$Attributes$in_('SourceGraphic'),
+									$elm$svg$Svg$Attributes$values('0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0')
+								]),
+							_List_Nil)
+						])),
+					A2(
+					$elm$svg$Svg$filter,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$id(
+							$author$project$UIExplorer$colorBlindOptionToCssClass($author$project$UIExplorer$Protanomaly))
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$feColorMatrix,
+							_List_fromArray(
+								[
+									$elm$svg$Svg$Attributes$in_('SourceGraphic'),
+									$elm$svg$Svg$Attributes$values('0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0')
+								]),
+							_List_Nil)
+						])),
+					A2(
+					$elm$svg$Svg$filter,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$id(
+							$author$project$UIExplorer$colorBlindOptionToCssClass($author$project$UIExplorer$Deuteranopia))
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$feColorMatrix,
+							_List_fromArray(
+								[
+									$elm$svg$Svg$Attributes$in_('SourceGraphic'),
+									$elm$svg$Svg$Attributes$values('0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0')
+								]),
+							_List_Nil)
+						])),
+					A2(
+					$elm$svg$Svg$filter,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$id(
+							$author$project$UIExplorer$colorBlindOptionToCssClass($author$project$UIExplorer$Deuteranomaly))
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$feColorMatrix,
+							_List_fromArray(
+								[
+									$elm$svg$Svg$Attributes$in_('SourceGraphic'),
+									$elm$svg$Svg$Attributes$values('0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0')
+								]),
+							_List_Nil)
+						])),
+					A2(
+					$elm$svg$Svg$filter,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$id(
+							$author$project$UIExplorer$colorBlindOptionToCssClass($author$project$UIExplorer$Tritanopia))
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$feColorMatrix,
+							_List_fromArray(
+								[
+									$elm$svg$Svg$Attributes$in_('SourceGraphic'),
+									$elm$svg$Svg$Attributes$values('0.95, 0.05,  0, 0, 0 0,  0.433, 0.567, 0, 0 0,  0.475, 0.525, 0, 0 0,  0, 0, 1, 0')
+								]),
+							_List_Nil)
+						])),
+					A2(
+					$elm$svg$Svg$filter,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$id(
+							$author$project$UIExplorer$colorBlindOptionToCssClass($author$project$UIExplorer$Tritanomaly))
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$feColorMatrix,
+							_List_fromArray(
+								[
+									$elm$svg$Svg$Attributes$in_('SourceGraphic'),
+									$elm$svg$Svg$Attributes$values('0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0')
+								]),
+							_List_Nil)
+						])),
+					A2(
+					$elm$svg$Svg$filter,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$id(
+							$author$project$UIExplorer$colorBlindOptionToCssClass($author$project$UIExplorer$Achromatopsia))
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$feColorMatrix,
+							_List_fromArray(
+								[
+									$elm$svg$Svg$Attributes$in_('SourceGraphic'),
+									$elm$svg$Svg$Attributes$values('0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0')
+								]),
+							_List_Nil)
+						])),
+					A2(
+					$elm$svg$Svg$filter,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$id(
+							$author$project$UIExplorer$colorBlindOptionToCssClass($author$project$UIExplorer$Achromatomaly))
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$feColorMatrix,
+							_List_fromArray(
+								[
+									$elm$svg$Svg$Attributes$in_('SourceGraphic'),
+									$elm$svg$Svg$Attributes$values('0.618, 0.320, 0.062, 0, 0 0.163, 0.775, 0.062, 0, 0 0.163, 0.320, 0.516, 0, 0 0, 0, 0, 1, 0')
+								]),
+							_List_Nil)
+						])),
+					A2(
+					$elm$svg$Svg$filter,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$id(
+							$author$project$UIExplorer$colorBlindOptionToCssClass($author$project$UIExplorer$Blind))
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$feColorMatrix,
+							_List_fromArray(
+								[
+									$elm$svg$Svg$Attributes$in_('SourceGraphic'),
+									$elm$svg$Svg$Attributes$values('0, 0, 0, 0, 0 0, 0, 0, 0, 0 0, 0, 0, 0, 0 0, 0, 0, 0, 0')
+								]),
+							_List_Nil)
+						]))
+				]))
+		]));
+var $ianmackenzie$elm_units$Quantity$minus = F2(
+	function (_v0, _v1) {
+		var y = _v0.a;
+		var x = _v1.a;
+		return $ianmackenzie$elm_units$Quantity$Quantity(x - y);
 	});
+var $author$project$UIExplorer$pageSizeOptionWidth = function (pageSizeOption) {
+	switch (pageSizeOption.$) {
+		case 'Iphone5':
+			return $elm$core$Maybe$Just(
+				$ianmackenzie$elm_units$Pixels$pixels(320));
+		case 'Iphone6':
+			return $elm$core$Maybe$Just(
+				$ianmackenzie$elm_units$Pixels$pixels(375));
+		case 'IpadVertical':
+			return $elm$core$Maybe$Just(
+				$ianmackenzie$elm_units$Pixels$pixels(768));
+		case 'IpadHorizontal':
+			return $elm$core$Maybe$Just(
+				$ianmackenzie$elm_units$Pixels$pixels(1024));
+		default:
+			return $elm$core$Maybe$Nothing;
+	}
+};
+var $author$project$UIExplorer$sidebarMinimizedWidth = $ianmackenzie$elm_units$Pixels$pixels(16);
+var $author$project$UIExplorer$sidebarWidth = $ianmackenzie$elm_units$Pixels$pixels(210);
+var $author$project$UIExplorer$contentSize = function (model) {
+	return model.minimizeSidebar ? {
+		height: model.windowSize.height,
+		width: A2(
+			$ianmackenzie$elm_units$Quantity$minus,
+			$author$project$UIExplorer$sidebarMinimizedWidth,
+			A2(
+				$elm$core$Maybe$withDefault,
+				model.windowSize.width,
+				$author$project$UIExplorer$pageSizeOptionWidth(model.pageSizeOption)))
+	} : {
+		height: model.windowSize.height,
+		width: A2(
+			$ianmackenzie$elm_units$Quantity$minus,
+			$author$project$UIExplorer$sidebarWidth,
+			A2(
+				$elm$core$Maybe$withDefault,
+				model.windowSize.width,
+				$author$project$UIExplorer$pageSizeOptionWidth(model.pageSizeOption)))
+	};
+};
 var $avh4$elm_color$Color$RgbaSpace = F4(
 	function (a, b, c, d) {
 		return {$: 'RgbaSpace', a: a, b: b, c: c, d: d};
@@ -13877,47 +13142,7 @@ var $author$project$Internal$Material$Palette$defaultPalette = {
 	surface: A3($avh4$elm_color$Color$rgb255, 255, 255, 255)
 };
 var $author$project$Widget$Material$defaultPalette = $author$project$Internal$Material$Palette$defaultPalette;
-var $mdgriffith$elm_ui$Internal$Model$AlignY = function (a) {
-	return {$: 'AlignY', a: a};
-};
-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$Model$AlignX = function (a) {
-	return {$: 'AlignX', a: a};
-};
-var $mdgriffith$elm_ui$Internal$Model$Right = {$: 'Right'};
-var $mdgriffith$elm_ui$Element$alignRight = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$Right);
-var $elm$core$Basics$pow = _Basics_pow;
-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 $noahzgordon$elm_color_extra$Color$Accessibility$luminance = function (cl) {
-	var f = function (intensity) {
-		return (intensity <= 0.03928) ? (intensity / 12.92) : A2($elm$core$Basics$pow, (intensity + 0.055) / 1.055, 2.4);
-	};
-	var _v0 = function (a) {
-		return _Utils_Tuple3(
-			f(a.red),
-			f(a.green),
-			f(a.blue));
-	}(
-		$avh4$elm_color$Color$toRgba(cl));
-	var r = _v0.a;
-	var g = _v0.b;
-	var b = _v0.c;
-	return ((0.2126 * r) + (0.7152 * g)) + (0.0722 * b);
-};
-var $author$project$Widget$Material$Color$accessibleTextColor = function (color) {
-	var l = 1 + ($avh4$elm_color$Color$toRgba(color).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(color) - 1));
-	var ratioBlack = 1.05 / (l + 0.05);
-	var ratioWhite = (l + 0.05) / 0.05;
-	return (_Utils_cmp(ratioBlack, ratioWhite) < 0) ? A3($avh4$elm_color$Color$rgb255, 0, 0, 0) : A3($avh4$elm_color$Color$rgb255, 255, 255, 255);
-};
-var $mdgriffith$elm_ui$Element$htmlAttribute = $mdgriffith$elm_ui$Internal$Model$Attr;
+var $mdgriffith$elm_ui$Element$fillPortion = $mdgriffith$elm_ui$Internal$Model$Fill;
 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(
@@ -13935,172 +13160,21 @@ var $mdgriffith$elm_ui$Internal$Model$Class = F2(
 	});
 var $mdgriffith$elm_ui$Internal$Flag$fontWeight = $mdgriffith$elm_ui$Internal$Flag$flag(13);
 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 $elm$virtual_dom$VirtualDom$style = _VirtualDom_style;
-var $elm$html$Html$Attributes$style = $elm$virtual_dom$VirtualDom$style;
-var $author$project$Widget$Material$Typography$button = _List_fromArray(
+var $author$project$Widget$Material$Typography$h6 = _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$size(20),
 		$mdgriffith$elm_ui$Element$Font$semiBold,
-		$mdgriffith$elm_ui$Element$Font$letterSpacing(1.25)
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.15)
 	]);
-var $mdgriffith$elm_ui$Internal$Model$CenterX = {$: 'CenterX'};
-var $mdgriffith$elm_ui$Element$centerX = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$CenterX);
-var $mdgriffith$elm_ui$Internal$Model$CenterY = {$: 'CenterY'};
-var $mdgriffith$elm_ui$Element$centerY = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$CenterY);
-var $author$project$Widget$Material$Color$gray = A3($avh4$elm_color$Color$rgb255, 119, 119, 119);
-var $mdgriffith$elm_ui$Internal$Model$Height = function (a) {
-	return {$: 'Height', a: a};
-};
-var $mdgriffith$elm_ui$Element$height = $mdgriffith$elm_ui$Internal$Model$Height;
-var $mdgriffith$elm_ui$Internal$Model$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$Model$PaddingStyle = F5(
-	function (a, b, c, d, e) {
-		return {$: 'PaddingStyle', a: a, b: b, c: c, d: d, e: e};
-	});
-var $mdgriffith$elm_ui$Internal$Flag$padding = $mdgriffith$elm_ui$Internal$Flag$flag(2);
-var $mdgriffith$elm_ui$Element$paddingXY = F2(
-	function (x, y) {
-		if (_Utils_eq(x, y)) {
-			var f = x;
-			return A2(
-				$mdgriffith$elm_ui$Internal$Model$StyleClass,
-				$mdgriffith$elm_ui$Internal$Flag$padding,
-				A5(
-					$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-					'p-' + $elm$core$String$fromInt(x),
-					f,
-					f,
-					f,
-					f));
-		} else {
-			var yFloat = y;
-			var xFloat = x;
-			return A2(
-				$mdgriffith$elm_ui$Internal$Model$StyleClass,
-				$mdgriffith$elm_ui$Internal$Flag$padding,
-				A5(
-					$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-					'p-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y))),
-					yFloat,
-					xFloat,
-					yFloat,
-					xFloat));
-		}
-	});
-var $mdgriffith$elm_ui$Internal$Model$Px = function (a) {
-	return {$: 'Px', a: a};
-};
-var $mdgriffith$elm_ui$Element$px = $mdgriffith$elm_ui$Internal$Model$Px;
-var $mdgriffith$elm_ui$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 $mdgriffith$elm_ui$Internal$Model$Content = {$: 'Content'};
-var $mdgriffith$elm_ui$Element$shrink = $mdgriffith$elm_ui$Internal$Model$Content;
-var $mdgriffith$elm_ui$Internal$Model$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$Internal$Model$Width = function (a) {
-	return {$: 'Width', a: a};
-};
-var $mdgriffith$elm_ui$Element$width = $mdgriffith$elm_ui$Internal$Model$Width;
-var $author$project$Internal$Material$Button$baseButton = function (_v0) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {color: $author$project$Widget$Material$Color$gray, size: 18},
-					ifDisabled: {color: $author$project$Widget$Material$Color$gray, size: 18},
-					otherwise: {color: $author$project$Widget$Material$Color$gray, size: 18}
-				},
-				text: {
-					contentText: _List_fromArray(
-						[$mdgriffith$elm_ui$Element$centerX])
-				}
-			},
-			elementRow: _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
-				])
-		},
-		elementButton: _Utils_ap(
-			$author$project$Widget$Material$Typography$button,
-			_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'))
-			]),
-		otherwise: _List_Nil
-	};
-};
-var $author$project$Widget$Material$Color$buttonDisabledOpacity = 0.38;
-var $author$project$Widget$Material$Color$buttonFocusOpacity = 0.24;
-var $author$project$Widget$Material$Color$buttonHoverOpacity = 0.08;
-var $author$project$Widget$Material$Color$buttonPressedOpacity = 0.32;
-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$Describe = function (a) {
-	return {$: 'Describe', a: a};
-};
-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$Internal$Model$TransformComponent = F2(
-	function (a, b) {
-		return {$: 'TransformComponent', a: a, b: b};
-	});
-var $mdgriffith$elm_ui$Internal$Model$Text = function (a) {
-	return {$: 'Text', a: a};
+var $mdgriffith$elm_ui$Element$htmlAttribute = $mdgriffith$elm_ui$Internal$Model$Attr;
+var $ianmackenzie$elm_units$Pixels$inPixels = function (_v0) {
+	var numPixels = _v0.a;
+	return numPixels;
 };
+var $mdgriffith$elm_ui$Internal$Model$Main = {$: 'Main'};
+var $mdgriffith$elm_ui$Element$Region$mainContent = $mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$Main);
+var $mdgriffith$elm_ui$Internal$Model$Empty = {$: 'Empty'};
+var $elm$virtual_dom$VirtualDom$map = _VirtualDom_map;
 var $mdgriffith$elm_ui$Internal$Model$map = F2(
 	function (fn, el) {
 		switch (el.$) {
@@ -14131,3079 +13205,7 @@ var $mdgriffith$elm_ui$Internal$Model$map = F2(
 				return $mdgriffith$elm_ui$Internal$Model$Empty;
 		}
 	});
-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 $mdgriffith$elm_ui$Element$fromRgb = function (clr) {
-	return A4($mdgriffith$elm_ui$Internal$Model$Rgba, clr.red, clr.green, clr.blue, clr.alpha);
-};
-var $author$project$Widget$Material$Color$fromColor = A2($elm$core$Basics$composeR, $avh4$elm_color$Color$toRgba, $mdgriffith$elm_ui$Element$fromRgb);
-var $mdgriffith$elm_ui$Internal$Model$Active = {$: 'Active'};
-var $mdgriffith$elm_ui$Internal$Flag$active = $mdgriffith$elm_ui$Internal$Flag$flag(32);
-var $mdgriffith$elm_ui$Element$mouseDown = function (decs) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$active,
-		A2(
-			$mdgriffith$elm_ui$Internal$Model$PseudoSelector,
-			$mdgriffith$elm_ui$Internal$Model$Active,
-			$mdgriffith$elm_ui$Internal$Model$unwrapDecorations(decs)));
-};
-var $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 $avh4$elm_color$Color$fromRgba = function (components) {
-	return A4($avh4$elm_color$Color$RgbaSpace, components.red, components.green, components.blue, components.alpha);
-};
-var $author$project$Widget$Material$Color$scaleOpacity = function (opacity) {
-	return A2(
-		$elm$core$Basics$composeR,
-		$avh4$elm_color$Color$toRgba,
-		A2(
-			$elm$core$Basics$composeR,
-			function (color) {
-				return _Utils_update(
-					color,
-					{alpha: color.alpha * opacity});
-			},
-			$avh4$elm_color$Color$fromRgba));
-};
-var $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$rgba255 = F4(
-	function (red, green, blue, a) {
-		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, red / 255, green / 255, blue / 255, a);
-	});
-var $author$project$Widget$Material$Color$shadow = function (_float) {
-	return {
-		blur: _float,
-		color: A4($mdgriffith$elm_ui$Element$rgba255, 0, 0, 0, 0.2),
-		offset: _Utils_Tuple2(0, _float),
-		size: 0
-	};
-};
-var $elm$core$Basics$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 $elm$core$Basics$clamp = F3(
-	function (low, high, number) {
-		return (_Utils_cmp(number, low) < 0) ? low : ((_Utils_cmp(number, high) > 0) ? high : number);
-	});
-var $avh4$elm_color$Color$rgb = F3(
-	function (r, g, b) {
-		return A4($avh4$elm_color$Color$RgbaSpace, r, g, b, 1.0);
-	});
-var $noahzgordon$elm_color_extra$Color$Convert$xyzToColor = function (_v0) {
-	var x = _v0.x;
-	var y = _v0.y;
-	var z = _v0.z;
-	var z_ = z / 100;
-	var y_ = y / 100;
-	var x_ = x / 100;
-	var r = ((x_ * 3.2404542) + (y_ * (-1.5371385))) + (z_ * (-0.4986));
-	var g = ((x_ * (-0.969266)) + (y_ * 1.8760108)) + (z_ * 4.1556e-2);
-	var c = function (ch) {
-		var ch_ = (ch > 3.1308e-3) ? ((1.055 * A2($elm$core$Basics$pow, ch, 1 / 2.4)) - 5.5e-2) : (12.92 * ch);
-		return A3($elm$core$Basics$clamp, 0, 1, ch_);
-	};
-	var b = ((x_ * 5.56434e-2) + (y_ * (-0.2040259))) + (z_ * 1.0572252);
-	return A3(
-		$avh4$elm_color$Color$rgb,
-		c(r),
-		c(g),
-		c(b));
-};
-var $noahzgordon$elm_color_extra$Color$Convert$labToColor = A2($elm$core$Basics$composeR, $noahzgordon$elm_color_extra$Color$Convert$labToXyz, $noahzgordon$elm_color_extra$Color$Convert$xyzToColor);
-var $elm$core$Basics$sin = _Basics_sin;
-var $author$project$Widget$Material$Color$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$Material$Color$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$Material$Color$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$Material$Color$fromCIELCH(
-						A2(
-							fun,
-							$author$project$Widget$Material$Color$toCIELCH(c1),
-							$author$project$Widget$Material$Color$toCIELCH(c2))))));
-	});
-var $author$project$Internal$Material$Button$containedButton = function (palette) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
-						size: 18
-					},
-					ifDisabled: {color: $author$project$Widget$Material$Color$gray, size: 18},
-					otherwise: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
-						size: 18
-					}
-				},
-				text: {
-					contentText: function (b) {
-						return b.content.content.text.contentText;
-					}(
-						$author$project$Internal$Material$Button$baseButton(palette))
-				}
-			},
-			elementRow: _Utils_ap(
-				$author$project$Internal$Material$Button$baseButton(palette).content.elementRow,
-				_List_fromArray(
-					[
-						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
-					]))
-		},
-		elementButton: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Border$shadow(
-					$author$project$Widget$Material$Color$shadow(2)),
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary))),
-							$mdgriffith$elm_ui$Element$Border$shadow(
-							$author$project$Widget$Material$Color$shadow(12))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary))),
-							$mdgriffith$elm_ui$Element$Border$shadow(
-							$author$project$Widget$Material$Color$shadow(6))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary))),
-							$mdgriffith$elm_ui$Element$Border$shadow(
-							$author$project$Widget$Material$Color$shadow(6))
-						]))
-				])),
-		ifActive: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary))),
-				$mdgriffith$elm_ui$Element$Font$color(
-				$author$project$Widget$Material$Color$fromColor(
-					$author$project$Widget$Material$Color$accessibleTextColor(palette.primary)))
-			]),
-		ifDisabled: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonDisabledOpacity, $author$project$Widget$Material$Color$gray))),
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray)),
-					$mdgriffith$elm_ui$Element$Border$shadow(
-					$author$project$Widget$Material$Color$shadow(0)),
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-					$mdgriffith$elm_ui$Element$focused(_List_Nil)
-				])),
-		otherwise: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(palette.primary)),
-				$mdgriffith$elm_ui$Element$Font$color(
-				$author$project$Widget$Material$Color$fromColor(
-					$author$project$Widget$Material$Color$accessibleTextColor(palette.primary)))
-			])
-	};
-};
-var $mdgriffith$elm_ui$Internal$Model$Fill = function (a) {
-	return {$: 'Fill', a: a};
-};
-var $mdgriffith$elm_ui$Element$fill = $mdgriffith$elm_ui$Internal$Model$Fill(1);
-var $author$project$Widget$Material$Typography$h6 = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Font$size(20),
-		$mdgriffith$elm_ui$Element$Font$semiBold,
-		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.15)
-	]);
-var $mdgriffith$elm_ui$Internal$Model$Max = F2(
-	function (a, b) {
-		return {$: 'Max', a: a, b: b};
-	});
-var $mdgriffith$elm_ui$Element$maximum = F2(
-	function (i, l) {
-		return A2($mdgriffith$elm_ui$Internal$Model$Max, i, l);
-	});
-var $author$project$Internal$Material$Button$textButton = function (palette) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {color: palette.primary, size: 18},
-					ifDisabled: {color: $author$project$Widget$Material$Color$gray, size: 18},
-					otherwise: {color: palette.primary, size: 18}
-				},
-				text: {
-					contentText: function (b) {
-						return b.content.content.text.contentText;
-					}(
-						$author$project$Internal$Material$Button$baseButton(palette))
-				}
-			},
-			elementRow: function (b) {
-				return b.content.elementRow;
-			}(
-				$author$project$Internal$Material$Button$baseButton(palette))
-		},
-		elementButton: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor(palette.primary)),
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
-						]))
-				])),
-		ifActive: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
-			]),
-		ifDisabled: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray)),
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-					$mdgriffith$elm_ui$Element$focused(_List_Nil)
-				])),
-		otherwise: _List_Nil
-	};
-};
-var $author$project$Internal$Material$Dialog$alertDialog = function (palette) {
-	return {
-		content: {
-			buttons: {
-				content: {
-					accept: $author$project$Internal$Material$Button$containedButton(palette),
-					dismiss: $author$project$Internal$Material$Button$textButton(palette)
-				},
-				elementRow: _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
-					])
-			},
-			text: {
-				contentText: _List_fromArray(
-					[
-						A2($mdgriffith$elm_ui$Element$paddingXY, 24, 0)
-					])
-			},
-			title: {
-				contentText: _Utils_ap(
-					$author$project$Widget$Material$Typography$h6,
-					_List_fromArray(
-						[
-							A2($mdgriffith$elm_ui$Element$paddingXY, 24, 20)
-						]))
-			}
-		},
-		elementColumn: _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$Material$Color$fromColor(palette.surface))
-			])
-	};
-};
-var $author$project$Widget$Material$alertDialog = $author$project$Internal$Material$Dialog$alertDialog;
-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 $author$project$Internal$Material$List$buttonRow = {
-	content: {
-		element: _List_Nil,
-		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})
-			]),
-		ifSingleton: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Border$rounded(2)
-			]),
-		otherwise: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Border$rounded(0)
-			])
-	},
-	elementRow: _List_Nil
-};
-var $author$project$Widget$Material$buttonRow = $author$project$Internal$Material$List$buttonRow;
-var $mdgriffith$elm_ui$Internal$Model$Top = {$: 'Top'};
-var $mdgriffith$elm_ui$Element$alignTop = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$Top);
-var $mdgriffith$elm_ui$Internal$Model$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(
-			$mdgriffith$elm_ui$Internal$Model$StyleClass,
-			$mdgriffith$elm_ui$Internal$Flag$borderWidth,
-			A5(
-				$mdgriffith$elm_ui$Internal$Model$BorderWidth,
-				'b-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y))),
-				y,
-				x,
-				y,
-				x));
-	});
-var $mdgriffith$elm_ui$Element$Border$widthEach = function (_v0) {
-	var bottom = _v0.bottom;
-	var top = _v0.top;
-	var left = _v0.left;
-	var right = _v0.right;
-	return (_Utils_eq(top, bottom) && _Utils_eq(left, right)) ? (_Utils_eq(top, right) ? $mdgriffith$elm_ui$Element$Border$width(top) : A2($mdgriffith$elm_ui$Element$Border$widthXY, left, top)) : A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$borderWidth,
-		A5(
-			$mdgriffith$elm_ui$Internal$Model$BorderWidth,
-			'b-' + ($elm$core$String$fromInt(top) + ('-' + ($elm$core$String$fromInt(right) + ('-' + ($elm$core$String$fromInt(bottom) + ('-' + $elm$core$String$fromInt(left))))))),
-			top,
-			right,
-			bottom,
-			left));
-};
-var $author$project$Internal$Material$List$cardColumn = function (palette) {
-	return {
-		content: {
-			element: _List_fromArray(
-				[
-					A2($mdgriffith$elm_ui$Element$paddingXY, 16, 12),
-					$mdgriffith$elm_ui$Element$height(
-					A2($mdgriffith$elm_ui$Element$minimum, 48, $mdgriffith$elm_ui$Element$shrink)),
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(palette.surface)),
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor(
-						$author$project$Widget$Material$Color$accessibleTextColor(palette.surface))),
-					$mdgriffith$elm_ui$Element$Border$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A2($author$project$Widget$Material$Color$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}),
-					$mdgriffith$elm_ui$Element$Border$widthEach(
-					{bottom: 0, left: 1, right: 1, top: 1})
-				]),
-			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})
-				]),
-			ifSingleton: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Border$rounded(4),
-					$mdgriffith$elm_ui$Element$Border$width(1)
-				]),
-			otherwise: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Border$rounded(0),
-					$mdgriffith$elm_ui$Element$Border$widthEach(
-					{bottom: 0, left: 1, right: 1, top: 0})
-				])
-		},
-		elementColumn: _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$Material$Color$shadow(4))
-					])),
-				$mdgriffith$elm_ui$Element$alignTop,
-				$mdgriffith$elm_ui$Element$Border$rounded(4)
-			])
-	};
-};
-var $author$project$Widget$Material$cardColumn = $author$project$Internal$Material$List$cardColumn;
-var $author$project$Widget$Material$Color$buttonSelectedOpacity = 0.16;
-var $mdgriffith$elm_ui$Internal$Model$paddingName = F4(
-	function (top, right, bottom, left) {
-		return 'pad-' + ($elm$core$String$fromInt(top) + ('-' + ($elm$core$String$fromInt(right) + ('-' + ($elm$core$String$fromInt(bottom) + ('-' + $elm$core$String$fromInt(left)))))));
-	});
-var $mdgriffith$elm_ui$Element$paddingEach = function (_v0) {
-	var top = _v0.top;
-	var right = _v0.right;
-	var bottom = _v0.bottom;
-	var left = _v0.left;
-	if (_Utils_eq(top, right) && (_Utils_eq(top, bottom) && _Utils_eq(top, left))) {
-		var topFloat = top;
-		return A2(
-			$mdgriffith$elm_ui$Internal$Model$StyleClass,
-			$mdgriffith$elm_ui$Internal$Flag$padding,
-			A5(
-				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-				'p-' + $elm$core$String$fromInt(top),
-				topFloat,
-				topFloat,
-				topFloat,
-				topFloat));
-	} else {
-		return A2(
-			$mdgriffith$elm_ui$Internal$Model$StyleClass,
-			$mdgriffith$elm_ui$Internal$Flag$padding,
-			A5(
-				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-				A4($mdgriffith$elm_ui$Internal$Model$paddingName, top, right, bottom, left),
-				top,
-				right,
-				bottom,
-				left));
-	}
-};
-var $author$project$Widget$Material$Color$textAndBackground = function (color) {
-	return _List_fromArray(
-		[
-			$mdgriffith$elm_ui$Element$Background$color(
-			$author$project$Widget$Material$Color$fromColor(color)),
-			$mdgriffith$elm_ui$Element$Font$color(
-			$author$project$Widget$Material$Color$fromColor(
-				$author$project$Widget$Material$Color$accessibleTextColor(color)))
-		]);
-};
-var $author$project$Internal$Material$Chip$chip = function (palette) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(
-							A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface)),
-						size: 18
-					},
-					ifDisabled: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(
-							A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface)),
-						size: 18
-					},
-					otherwise: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(
-							A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface)),
-						size: 18
-					}
-				},
-				text: {
-					contentText: _List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$paddingEach(
-							{bottom: 0, left: 8, right: 0, top: 0})
-						])
-				}
-			},
-			elementRow: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$spacing(0),
-					$mdgriffith$elm_ui$Element$centerY
-				])
-		},
-		elementButton: _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(
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Background$color(
-						$author$project$Widget$Material$Color$fromColor(
-							A3(
-								$author$project$Widget$Material$Color$withShade,
-								palette.on.surface,
-								$author$project$Widget$Material$Color$buttonPressedOpacity,
-								A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface))))
-					])),
-				$mdgriffith$elm_ui$Element$focused(
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Background$color(
-						$author$project$Widget$Material$Color$fromColor(
-							A3(
-								$author$project$Widget$Material$Color$withShade,
-								palette.on.surface,
-								$author$project$Widget$Material$Color$buttonFocusOpacity,
-								A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface))))
-					])),
-				$mdgriffith$elm_ui$Element$mouseOver(
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Background$color(
-						$author$project$Widget$Material$Color$fromColor(
-							A3(
-								$author$project$Widget$Material$Color$withShade,
-								palette.on.surface,
-								$author$project$Widget$Material$Color$buttonHoverOpacity,
-								A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface))))
-					]))
-			]),
-		ifActive: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A3(
-						$author$project$Widget$Material$Color$withShade,
-						palette.on.surface,
-						$author$project$Widget$Material$Color$buttonSelectedOpacity,
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface)))),
-				$mdgriffith$elm_ui$Element$Font$color(
-				$author$project$Widget$Material$Color$fromColor(
-					$author$project$Widget$Material$Color$accessibleTextColor(
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface)))),
-				$mdgriffith$elm_ui$Element$Border$shadow(
-				$author$project$Widget$Material$Color$shadow(4))
-			]),
-		ifDisabled: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
-			_Utils_ap(
-				$author$project$Widget$Material$Color$textAndBackground(
-					A3(
-						$author$project$Widget$Material$Color$withShade,
-						palette.on.surface,
-						$author$project$Widget$Material$Color$buttonDisabledOpacity,
-						A2($author$project$Widget$Material$Color$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)
-					]))),
-		otherwise: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface))),
-				$mdgriffith$elm_ui$Element$Font$color(
-				$author$project$Widget$Material$Color$fromColor(
-					$author$project$Widget$Material$Color$accessibleTextColor(
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface))))
-			])
-	};
-};
-var $author$project$Widget$Material$chip = $author$project$Internal$Material$Chip$chip;
-var $author$project$Internal$Material$List$column = {
-	content: {element: _List_Nil, ifFirst: _List_Nil, ifLast: _List_Nil, ifSingleton: _List_Nil, otherwise: _List_Nil},
-	elementColumn: _List_fromArray(
-		[
-			A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8),
-			$mdgriffith$elm_ui$Element$spacing(8)
-		])
-};
-var $author$project$Widget$Material$column = $author$project$Internal$Material$List$column;
-var $author$project$Widget$Material$containedButton = $author$project$Internal$Material$Button$containedButton;
-var $elm$svg$Svg$Attributes$d = _VirtualDom_attribute('d');
-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 $elm$svg$Svg$Attributes$fill = _VirtualDom_attribute('fill');
-var $elm$svg$Svg$Attributes$height = _VirtualDom_attribute('height');
-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 $elm$svg$Svg$Attributes$stroke = _VirtualDom_attribute('stroke');
-var $elm$svg$Svg$trustedNode = _VirtualDom_nodeNS('http://www.w3.org/2000/svg');
-var $elm$svg$Svg$svg = $elm$svg$Svg$trustedNode('svg');
-var $avh4$elm_color$Color$toCssString = function (_v0) {
-	var r = _v0.a;
-	var g = _v0.b;
-	var b = _v0.c;
-	var a = _v0.d;
-	var roundTo = function (x) {
-		return $elm$core$Basics$round(x * 1000) / 1000;
-	};
-	var pct = function (x) {
-		return $elm$core$Basics$round(x * 10000) / 100;
-	};
-	return $elm$core$String$concat(
-		_List_fromArray(
-			[
-				'rgba(',
-				$elm$core$String$fromFloat(
-				pct(r)),
-				'%,',
-				$elm$core$String$fromFloat(
-				pct(g)),
-				'%,',
-				$elm$core$String$fromFloat(
-				pct(b)),
-				'%,',
-				$elm$core$String$fromFloat(
-				roundTo(a)),
-				')'
-			]));
-};
-var $elm$svg$Svg$Attributes$viewBox = _VirtualDom_attribute('viewBox');
-var $elm$svg$Svg$Attributes$width = _VirtualDom_attribute('width');
-var $author$project$Internal$Material$Icon$icon = function (_v0) {
-	var viewBox = _v0.viewBox;
-	var size = _v0.size;
-	var color = _v0.color;
-	return A2(
-		$elm$core$Basics$composeR,
-		$elm$svg$Svg$svg(
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$height(
-					$elm$core$String$fromInt(size)),
-					$elm$svg$Svg$Attributes$stroke(
-					$avh4$elm_color$Color$toCssString(color)),
-					$elm$svg$Svg$Attributes$fill(
-					$avh4$elm_color$Color$toCssString(color)),
-					$elm$svg$Svg$Attributes$viewBox(viewBox),
-					$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$svg$Svg$path = $elm$svg$Svg$trustedNode('path');
-var $author$project$Internal$Material$Icon$expand_less = function (_v0) {
-	var size = _v0.size;
-	var color = _v0.color;
-	return A2(
-		$author$project$Internal$Material$Icon$icon,
-		{color: color, size: size, viewBox: '0 0 48 48'},
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$d('M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z')
-					]),
-				_List_Nil)
-			]));
-};
-var $author$project$Internal$Material$Icon$expand_more = function (_v0) {
-	var size = _v0.size;
-	var color = _v0.color;
-	return A2(
-		$author$project$Internal$Material$Icon$icon,
-		{color: color, size: size, viewBox: '0 0 48 48'},
-		_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 $mdgriffith$elm_ui$Element$padding = function (x) {
-	var f = x;
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$padding,
-		A5(
-			$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-			'p-' + $elm$core$String$fromInt(x),
-			f,
-			f,
-			f,
-			f));
-};
-var $author$project$Internal$Material$Item$insetItem = function (_v0) {
-	return {
-		content: {
-			content: {
-				content: {
-					content: {color: $author$project$Widget$Material$Color$gray, size: 24},
-					icon: {
-						content: {color: $author$project$Widget$Material$Color$gray, size: 24},
-						element: _List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width(
-								$mdgriffith$elm_ui$Element$px(40)),
-								$mdgriffith$elm_ui$Element$height(
-								$mdgriffith$elm_ui$Element$px(24))
-							])
-					},
-					text: {
-						elementText: _List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-							])
-					}
-				},
-				elementRow: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$spacing(16),
-						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-					])
-			},
-			elementButton: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					$mdgriffith$elm_ui$Element$padding(16)
-				]),
-			ifDisabled: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$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', 'default'))
-				]),
-			otherwise: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, $author$project$Widget$Material$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, $author$project$Widget$Material$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, $author$project$Widget$Material$Color$gray)))
-						]))
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$padding(0)
-			])
-	};
-};
-var $author$project$Internal$Material$Item$expansionItem = function (palette) {
-	return {
-		collapseIcon: $author$project$Internal$Material$Icon$expand_less,
-		expandIcon: $author$project$Internal$Material$Icon$expand_more,
-		item: $author$project$Internal$Material$Item$insetItem(palette)
-	};
-};
-var $author$project$Widget$Material$expansionItem = $author$project$Internal$Material$Item$expansionItem;
-var $mdgriffith$elm_ui$Element$Font$family = function (families) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$fontFamily,
-		A2(
-			$mdgriffith$elm_ui$Internal$Model$FontFamily,
-			A3($elm$core$List$foldl, $mdgriffith$elm_ui$Internal$Model$renderFontClassName, 'ff-', families),
-			families));
-};
-var $avh4$elm_color$Color$gray = A4($avh4$elm_color$Color$RgbaSpace, 211 / 255, 215 / 255, 207 / 255, 1.0);
-var $author$project$Internal$Material$Item$fullBleedDivider = function (_v0) {
-	return {
-		content: {
-			element: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					$mdgriffith$elm_ui$Element$height(
-					$mdgriffith$elm_ui$Element$px(1)),
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor($avh4$elm_color$Color$gray))
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-				$mdgriffith$elm_ui$Element$height(
-				$mdgriffith$elm_ui$Element$px(1)),
-				$mdgriffith$elm_ui$Element$padding(0),
-				$mdgriffith$elm_ui$Element$Border$widthEach(
-				{bottom: 0, left: 1, right: 1, top: 0})
-			])
-	};
-};
-var $author$project$Widget$Material$fullBleedDivider = $author$project$Internal$Material$Item$fullBleedDivider;
-var $author$project$Widget$Material$Typography$caption = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Font$size(12),
-		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.4)
-	]);
-var $author$project$Internal$Material$Item$insetDivider = function (_v0) {
-	return {
-		content: {
-			element: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					$mdgriffith$elm_ui$Element$height(
-					$mdgriffith$elm_ui$Element$px(1)),
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor($avh4$elm_color$Color$gray))
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-				$mdgriffith$elm_ui$Element$height(
-				$mdgriffith$elm_ui$Element$px(1)),
-				$mdgriffith$elm_ui$Element$Border$widthEach(
-				{bottom: 0, left: 1, right: 1, top: 0}),
-				$mdgriffith$elm_ui$Element$paddingEach(
-				{bottom: 0, left: 72, right: 0, top: 0})
-			])
-	};
-};
-var $author$project$Internal$Material$Item$fullBleedHeader = function (palette) {
-	return {
-		content: {
-			content: {
-				divider: $author$project$Internal$Material$Item$insetDivider(palette).content,
-				title: _Utils_ap(
-					$author$project$Widget$Material$Typography$caption,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Font$color(
-							$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray)),
-							A2($mdgriffith$elm_ui$Element$paddingXY, 16, 0)
-						]))
-			},
-			elementColumn: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					$mdgriffith$elm_ui$Element$spacing(8)
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
-				$mdgriffith$elm_ui$Element$padding(0),
-				$mdgriffith$elm_ui$Element$Border$widthEach(
-				{bottom: 0, left: 1, right: 1, top: 0})
-			])
-	};
-};
-var $author$project$Widget$Material$fullBleedHeader = $author$project$Internal$Material$Item$fullBleedHeader;
-var $author$project$Internal$Material$Item$fullBleedItem = function (palette) {
-	var i = $author$project$Internal$Material$Item$insetItem(palette);
-	return {
-		content: {
-			content: {
-				content: {icon: i.content.content.content.content, text: i.content.content.content.text},
-				elementRow: i.content.content.elementRow
-			},
-			elementButton: i.content.elementButton,
-			ifDisabled: i.content.ifDisabled,
-			otherwise: i.content.otherwise
-		},
-		element: i.element
-	};
-};
-var $author$project$Widget$Material$fullBleedItem = $author$project$Internal$Material$Item$fullBleedItem;
-var $author$project$Internal$Material$Button$iconButton = function (palette) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {color: palette.primary, size: 18},
-					ifDisabled: {color: $author$project$Widget$Material$Color$gray, size: 18},
-					otherwise: {color: palette.primary, size: 18}
-				},
-				text: {
-					contentText: _List_fromArray(
-						[$mdgriffith$elm_ui$Element$centerX])
-				}
-			},
-			elementRow: _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
-				])
-		},
-		elementButton: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$height(
-					$mdgriffith$elm_ui$Element$px(48)),
-					$mdgriffith$elm_ui$Element$width(
-					A2($mdgriffith$elm_ui$Element$minimum, 48, $mdgriffith$elm_ui$Element$shrink)),
-					$mdgriffith$elm_ui$Element$Border$rounded(24),
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.surface)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.surface)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface)))
-						]))
-				])),
-		ifActive: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface)))
-			]),
-		ifDisabled: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray)),
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-					$mdgriffith$elm_ui$Element$focused(_List_Nil)
-				])),
-		otherwise: _List_Nil
-	};
-};
-var $author$project$Widget$Material$iconButton = $author$project$Internal$Material$Button$iconButton;
-var $author$project$Internal$Material$Item$imageItem = function (_v0) {
-	return {
-		content: {
-			content: {
-				content: {
-					content: {color: $author$project$Widget$Material$Color$gray, size: 24},
-					image: {
-						element: _List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width(
-								$mdgriffith$elm_ui$Element$px(40)),
-								$mdgriffith$elm_ui$Element$height(
-								$mdgriffith$elm_ui$Element$px(40))
-							])
-					},
-					text: {
-						elementText: _List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-							])
-					}
-				},
-				elementRow: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$spacing(16),
-						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-					])
-			},
-			elementButton: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					A2($mdgriffith$elm_ui$Element$paddingXY, 16, 8)
-				]),
-			ifDisabled: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$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', 'default'))
-				]),
-			otherwise: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, $author$project$Widget$Material$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, $author$project$Widget$Material$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, $author$project$Widget$Material$Color$gray)))
-						]))
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$padding(0)
-			])
-	};
-};
-var $author$project$Widget$Material$imageItem = $author$project$Internal$Material$Item$imageItem;
-var $author$project$Widget$Material$insetDivider = $author$project$Internal$Material$Item$insetDivider;
-var $author$project$Widget$Material$Typography$body2 = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Font$size(14),
-		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.25)
-	]);
-var $author$project$Internal$Material$Item$insetHeader = function (palette) {
-	return {
-		content: {
-			content: {
-				divider: $author$project$Internal$Material$Item$insetDivider(palette).content,
-				title: _Utils_ap(
-					$author$project$Widget$Material$Typography$body2,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Font$color(
-							$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray))
-						]))
-			},
-			elementColumn: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					$mdgriffith$elm_ui$Element$spacing(12)
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
-				$mdgriffith$elm_ui$Element$Border$widthEach(
-				{bottom: 0, left: 1, right: 1, top: 0}),
-				$mdgriffith$elm_ui$Element$paddingEach(
-				{bottom: 0, left: 72, right: 0, top: 0})
-			])
-	};
-};
-var $author$project$Widget$Material$insetHeader = $author$project$Internal$Material$Item$insetHeader;
-var $author$project$Widget$Material$insetItem = $author$project$Internal$Material$Item$insetItem;
-var $author$project$Widget$Customize$mapContent = F2(
-	function (fun, a) {
-		return _Utils_update(
-			a,
-			{
-				content: fun(a.content)
-			});
-	});
-var $author$project$Internal$Material$Icon$more_vert = function (_v0) {
-	var size = _v0.size;
-	var color = _v0.color;
-	return A2(
-		$author$project$Internal$Material$Icon$icon,
-		{color: color, size: size, viewBox: '0 0 48 48'},
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$d('M24 16c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 4c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z')
-					]),
-				_List_Nil)
-			]));
-};
-var $author$project$Internal$Material$Icon$search = function (_v0) {
-	var size = _v0.size;
-	var color = _v0.color;
-	return A2(
-		$author$project$Internal$Material$Icon$icon,
-		{color: color, size: size, viewBox: '0 0 48 48'},
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$d('M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z')
-					]),
-				_List_Nil)
-			]));
-};
-var $author$project$Widget$Customize$mapElementTextInput = F2(
-	function (fun, a) {
-		return _Utils_update(
-			a,
-			{
-				elementTextInput: fun(a.elementTextInput)
-			});
-	});
-var $author$project$Widget$Customize$elementTextInput = F2(
-	function (list, a) {
-		return A2(
-			$author$project$Widget$Customize$mapElementTextInput,
-			function (b) {
-				return _Utils_ap(b, list);
-			},
-			a);
-	});
-var $author$project$Widget$Customize$mapElementRow = F2(
-	function (fun, a) {
-		return _Utils_update(
-			a,
-			{
-				elementRow: fun(a.elementRow)
-			});
-	});
-var $author$project$Internal$Material$TextInput$textInputBase = function (palette) {
-	return {
-		content: {
-			chips: {
-				content: $author$project$Internal$Material$Chip$chip(palette),
-				elementRow: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$spacing(8)
-					])
-			},
-			text: {
-				elementTextInput: _Utils_ap(
-					$author$project$Widget$Material$Color$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)
-						]))
-			}
-		},
-		elementRow: $author$project$Widget$Material$Color$textAndBackground(palette.surface)
-	};
-};
-var $author$project$Internal$Material$TextInput$searchInput = function (palette) {
-	return A2(
-		$author$project$Widget$Customize$mapContent,
-		function (record) {
-			return _Utils_update(
-				record,
-				{
-					text: A2(
-						$author$project$Widget$Customize$elementTextInput,
-						_List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$Border$width(0),
-								A2($mdgriffith$elm_ui$Element$paddingXY, 8, 8),
-								$mdgriffith$elm_ui$Element$height(
-								$mdgriffith$elm_ui$Element$px(32)),
-								$mdgriffith$elm_ui$Element$width(
-								A2($mdgriffith$elm_ui$Element$maximum, 360, $mdgriffith$elm_ui$Element$fill))
-							]),
-						record.text)
-				});
-		},
-		A2(
-			$author$project$Widget$Customize$mapElementRow,
-			$elm$core$Basics$always(
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$alignRight,
-						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 8),
-						$mdgriffith$elm_ui$Element$Border$rounded(4)
-					])),
-			$author$project$Internal$Material$TextInput$textInputBase(palette)));
-};
-var $author$project$Internal$Material$AppBar$internalBar = F2(
-	function (content, palette) {
-		return {
-			content: {
-				actions: {
-					content: {
-						button: A2(
-							$author$project$Widget$Customize$mapContent,
-							$author$project$Widget$Customize$mapContent(
-								function (record) {
-									return _Utils_update(
-										record,
-										{
-											icon: {
-												ifActive: {
-													color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
-													size: record.icon.ifActive.size
-												},
-												ifDisabled: record.icon.ifDisabled,
-												otherwise: {
-													color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
-													size: record.icon.otherwise.size
-												}
-											}
-										});
-								}),
-							$author$project$Internal$Material$Button$iconButton(palette)),
-						moreVerticalIcon: $author$project$Internal$Material$Icon$more_vert,
-						searchIcon: $author$project$Internal$Material$Icon$search
-					},
-					elementRow: _List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$alignRight,
-							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
-						])
-				},
-				menu: {
-					content: content,
-					elementRow: _List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
-							$mdgriffith$elm_ui$Element$spacing(8)
-						])
-				},
-				search: $author$project$Internal$Material$TextInput$searchInput(palette)
-			},
-			elementRow: _Utils_ap(
-				$author$project$Widget$Material$Color$textAndBackground(palette.primary),
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$padding(0),
-						$mdgriffith$elm_ui$Element$spacing(8),
-						$mdgriffith$elm_ui$Element$height(
-						$mdgriffith$elm_ui$Element$px(56)),
-						$mdgriffith$elm_ui$Element$width(
-						A2($mdgriffith$elm_ui$Element$minimum, 360, $mdgriffith$elm_ui$Element$fill))
-					]))
-		};
-	});
-var $author$project$Internal$Material$Icon$menu = function (_v0) {
-	var size = _v0.size;
-	var color = _v0.color;
-	return A2(
-		$author$project$Internal$Material$Icon$icon,
-		{color: color, size: size, viewBox: '0 0 48 48'},
-		_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$Internal$Material$AppBar$menuBar = $author$project$Internal$Material$AppBar$internalBar(
-	{
-		menuIcon: $author$project$Internal$Material$Icon$menu,
-		title: _Utils_ap(
-			$author$project$Widget$Material$Typography$h6,
-			_List_fromArray(
-				[
-					A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
-				]))
-	});
-var $author$project$Widget$Material$menuBar = $author$project$Internal$Material$AppBar$menuBar;
-var $author$project$Internal$Material$Item$middleDivider = function (_v0) {
-	return {
-		content: {
-			element: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					$mdgriffith$elm_ui$Element$height(
-					$mdgriffith$elm_ui$Element$px(1)),
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor($avh4$elm_color$Color$gray))
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-				$mdgriffith$elm_ui$Element$height(
-				$mdgriffith$elm_ui$Element$px(1)),
-				$mdgriffith$elm_ui$Element$Border$widthEach(
-				{bottom: 0, left: 1, right: 1, top: 0}),
-				$mdgriffith$elm_ui$Element$paddingEach(
-				{bottom: 0, left: 16, right: 16, top: 0})
-			])
-	};
-};
-var $author$project$Widget$Material$middleDivider = $author$project$Internal$Material$Item$middleDivider;
-var $author$project$Widget$Material$Typography$body1 = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Font$size(16),
-		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.5)
-	]);
-var $author$project$Internal$Material$Item$multiLineItem = function (_v0) {
-	return {
-		content: {
-			content: {
-				content: {
-					content: {color: $author$project$Widget$Material$Color$gray, size: 24},
-					description: {
-						content: {
-							text: {
-								elementText: _Utils_ap(
-									$author$project$Widget$Material$Typography$body2,
-									_List_fromArray(
-										[
-											$mdgriffith$elm_ui$Element$Font$color(
-											$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray))
-										]))
-							},
-							title: {elementText: $author$project$Widget$Material$Typography$body1}
-						},
-						elementColumn: _List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-								$mdgriffith$elm_ui$Element$spacing(4)
-							])
-					},
-					icon: {
-						content: {color: $author$project$Widget$Material$Color$gray, size: 24},
-						element: _List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width(
-								$mdgriffith$elm_ui$Element$px(40)),
-								$mdgriffith$elm_ui$Element$height(
-								$mdgriffith$elm_ui$Element$px(24))
-							])
-					}
-				},
-				elementRow: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$spacing(16),
-						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-					])
-			},
-			elementButton: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					$mdgriffith$elm_ui$Element$padding(16)
-				]),
-			ifDisabled: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$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', 'default'))
-				]),
-			otherwise: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, $author$project$Widget$Material$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, $author$project$Widget$Material$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, $author$project$Widget$Material$Color$gray)))
-						]))
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$padding(0)
-			])
-	};
-};
-var $author$project$Widget$Material$multiLineItem = $author$project$Internal$Material$Item$multiLineItem;
-var $author$project$Internal$Material$Button$outlinedButton = function (palette) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {color: palette.primary, size: 18},
-					ifDisabled: {color: $author$project$Widget$Material$Color$gray, size: 18},
-					otherwise: {color: palette.primary, size: 18}
-				},
-				text: {
-					contentText: $author$project$Internal$Material$Button$baseButton(palette).content.content.text.contentText
-				}
-			},
-			elementRow: _Utils_ap(
-				$author$project$Internal$Material$Button$baseButton(palette).content.elementRow,
-				_List_fromArray(
-					[
-						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
-					]))
-		},
-		elementButton: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Border$width(1),
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor(palette.primary)),
-					$mdgriffith$elm_ui$Element$Border$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A3(
-							$author$project$Widget$Material$Color$withShade,
-							palette.primary,
-							$author$project$Widget$Material$Color$buttonHoverOpacity,
-							A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface)))),
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
-						]))
-				])),
-		ifActive: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
-			]),
-		ifDisabled: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray)),
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-					$mdgriffith$elm_ui$Element$focused(_List_Nil)
-				])),
-		otherwise: _List_Nil
-	};
-};
-var $author$project$Widget$Material$outlinedButton = $author$project$Internal$Material$Button$outlinedButton;
-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$g = $elm$svg$Svg$trustedNode('g');
-var $elm$svg$Svg$Attributes$r = _VirtualDom_attribute('r');
-var $elm$svg$Svg$Attributes$strokeDasharray = _VirtualDom_attribute('stroke-dasharray');
-var $elm$svg$Svg$Attributes$strokeDashoffset = _VirtualDom_attribute('stroke-dashoffset');
-var $elm$svg$Svg$Attributes$strokeLinecap = _VirtualDom_attribute('stroke-linecap');
-var $elm$svg$Svg$Attributes$strokeWidth = _VirtualDom_attribute('stroke-width');
-var $elm$svg$Svg$Attributes$transform = _VirtualDom_attribute('transform');
-var $elm$svg$Svg$Attributes$xmlSpace = A2(_VirtualDom_attributeNS, 'http://www.w3.org/XML/1998/namespace', 'xml:space');
-var $author$project$Internal$Material$ProgressIndicator$determinateCircularIcon = F3(
-	function (color, attribs, progress) {
-		var strokeDashoffset = function () {
-			var clampedProgress = A3($elm$core$Basics$clamp, 0, 1, progress);
-			return $elm$core$Basics$round(188 - (188 * clampedProgress));
-		}();
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			attribs,
-			$mdgriffith$elm_ui$Element$html(
-				A2(
-					$elm$svg$Svg$svg,
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$height('48px'),
-							$elm$svg$Svg$Attributes$width('48px'),
-							$elm$svg$Svg$Attributes$viewBox('0 0 66 66'),
-							$elm$svg$Svg$Attributes$xmlSpace('http://www.w3.org/2000/svg')
-						]),
-					_List_fromArray(
-						[
-							A2(
-							$elm$svg$Svg$g,
-							_List_Nil,
-							_List_fromArray(
-								[
-									A2(
-									$elm$svg$Svg$circle,
-									_List_fromArray(
-										[
-											$elm$svg$Svg$Attributes$fill('none'),
-											$elm$svg$Svg$Attributes$stroke(
-											$avh4$elm_color$Color$toCssString(color)),
-											$elm$svg$Svg$Attributes$strokeWidth('5'),
-											$elm$svg$Svg$Attributes$strokeLinecap('butt'),
-											$elm$svg$Svg$Attributes$cx('33'),
-											$elm$svg$Svg$Attributes$cy('33'),
-											$elm$svg$Svg$Attributes$r('30'),
-											$elm$svg$Svg$Attributes$strokeDasharray('188 188'),
-											$elm$svg$Svg$Attributes$strokeDashoffset(
-											$elm$core$String$fromInt(strokeDashoffset)),
-											$elm$svg$Svg$Attributes$transform('rotate(-90 33 33)')
-										]),
-									_List_Nil)
-								]))
-						]))));
-	});
-var $elm$svg$Svg$animate = $elm$svg$Svg$trustedNode('animate');
-var $elm$svg$Svg$animateTransform = $elm$svg$Svg$trustedNode('animateTransform');
-var $elm$svg$Svg$Attributes$attributeName = _VirtualDom_attribute('attributeName');
-var $elm$svg$Svg$Attributes$begin = _VirtualDom_attribute('begin');
-var $elm$svg$Svg$Attributes$dur = _VirtualDom_attribute('dur');
-var $elm$svg$Svg$Attributes$repeatCount = _VirtualDom_attribute('repeatCount');
-var $elm$svg$Svg$Attributes$type_ = _VirtualDom_attribute('type');
-var $elm$svg$Svg$Attributes$values = function (value) {
-	return A2(
-		_VirtualDom_attribute,
-		'values',
-		_VirtualDom_noJavaScriptUri(value));
-};
-var $author$project$Internal$Material$ProgressIndicator$indeterminateCircularIcon = F2(
-	function (color, attribs) {
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			attribs,
-			$mdgriffith$elm_ui$Element$html(
-				A2(
-					$elm$svg$Svg$svg,
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$height('48px'),
-							$elm$svg$Svg$Attributes$width('48px'),
-							$elm$svg$Svg$Attributes$viewBox('0 0 66 66'),
-							$elm$svg$Svg$Attributes$xmlSpace('http://www.w3.org/2000/svg')
-						]),
-					_List_fromArray(
-						[
-							A2(
-							$elm$svg$Svg$g,
-							_List_Nil,
-							_List_fromArray(
-								[
-									A2(
-									$elm$svg$Svg$animateTransform,
-									_List_fromArray(
-										[
-											$elm$svg$Svg$Attributes$attributeName('transform'),
-											$elm$svg$Svg$Attributes$type_('rotate'),
-											$elm$svg$Svg$Attributes$values('0 33 33;270 33 33'),
-											$elm$svg$Svg$Attributes$begin('0s'),
-											$elm$svg$Svg$Attributes$dur('1.4s'),
-											$elm$svg$Svg$Attributes$fill('freeze'),
-											$elm$svg$Svg$Attributes$repeatCount('indefinite')
-										]),
-									_List_Nil),
-									A2(
-									$elm$svg$Svg$circle,
-									_List_fromArray(
-										[
-											$elm$svg$Svg$Attributes$fill('none'),
-											$elm$svg$Svg$Attributes$stroke(
-											$avh4$elm_color$Color$toCssString(color)),
-											$elm$svg$Svg$Attributes$strokeWidth('5'),
-											$elm$svg$Svg$Attributes$strokeLinecap('square'),
-											$elm$svg$Svg$Attributes$cx('33'),
-											$elm$svg$Svg$Attributes$cy('33'),
-											$elm$svg$Svg$Attributes$r('30'),
-											$elm$svg$Svg$Attributes$strokeDasharray('187'),
-											$elm$svg$Svg$Attributes$strokeDashoffset('610')
-										]),
-									_List_fromArray(
-										[
-											A2(
-											$elm$svg$Svg$animateTransform,
-											_List_fromArray(
-												[
-													$elm$svg$Svg$Attributes$attributeName('transform'),
-													$elm$svg$Svg$Attributes$type_('rotate'),
-													$elm$svg$Svg$Attributes$values('0 33 33;135 33 33;450 33 33'),
-													$elm$svg$Svg$Attributes$begin('0s'),
-													$elm$svg$Svg$Attributes$dur('1.4s'),
-													$elm$svg$Svg$Attributes$fill('freeze'),
-													$elm$svg$Svg$Attributes$repeatCount('indefinite')
-												]),
-											_List_Nil),
-											A2(
-											$elm$svg$Svg$animate,
-											_List_fromArray(
-												[
-													$elm$svg$Svg$Attributes$attributeName('stroke-dashoffset'),
-													$elm$svg$Svg$Attributes$values('187;46.75;187'),
-													$elm$svg$Svg$Attributes$begin('0s'),
-													$elm$svg$Svg$Attributes$dur('1.4s'),
-													$elm$svg$Svg$Attributes$fill('freeze'),
-													$elm$svg$Svg$Attributes$repeatCount('indefinite')
-												]),
-											_List_Nil)
-										]))
-								]))
-						]))));
-	});
-var $author$project$Internal$Material$ProgressIndicator$progressIndicator = function (palette) {
-	return {
-		elementFunction: function (maybeProgress) {
-			if (maybeProgress.$ === 'Nothing') {
-				return A2($author$project$Internal$Material$ProgressIndicator$indeterminateCircularIcon, palette.primary, _List_Nil);
-			} else {
-				var progress = maybeProgress.a;
-				return A3($author$project$Internal$Material$ProgressIndicator$determinateCircularIcon, palette.primary, _List_Nil, progress);
-			}
-		}
-	};
-};
-var $author$project$Widget$Material$progressIndicator = $author$project$Internal$Material$ProgressIndicator$progressIndicator;
-var $author$project$Internal$Material$List$row = {
-	content: {element: _List_Nil, ifFirst: _List_Nil, ifLast: _List_Nil, ifSingleton: _List_Nil, otherwise: _List_Nil},
-	elementRow: _List_fromArray(
-		[
-			A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8),
-			$mdgriffith$elm_ui$Element$spacing(8)
-		])
-};
-var $author$project$Widget$Material$row = $author$project$Internal$Material$List$row;
-var $mdgriffith$elm_ui$Element$Font$sansSerif = $mdgriffith$elm_ui$Internal$Model$SansSerif;
-var $author$project$Internal$Material$Item$selectItem = function (palette) {
-	return {
-		content: {
-			content: {
-				content: {
-					icon: {
-						ifActive: {
-							color: $author$project$Widget$Material$Color$accessibleTextColor(palette.surface),
-							size: 18
-						},
-						ifDisabled: {color: $author$project$Widget$Material$Color$gray, size: 18},
-						otherwise: {
-							color: $author$project$Widget$Material$Color$accessibleTextColor(palette.surface),
-							size: 18
-						}
-					},
-					text: {
-						contentText: _List_fromArray(
-							[$mdgriffith$elm_ui$Element$centerX])
-					}
-				},
-				elementRow: _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
-					])
-			},
-			elementButton: _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$Material$Color$fromColor(
-						$author$project$Widget$Material$Color$accessibleTextColor(palette.surface))),
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
-						]))
-				]),
-			ifActive: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary))),
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor(palette.primary))
-				]),
-			ifDisabled: _Utils_ap(
-				$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Font$color(
-						$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray)),
-						$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-						$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-						$mdgriffith$elm_ui$Element$focused(_List_Nil)
-					])),
-			otherwise: _List_Nil
-		},
-		element: _List_fromArray(
-			[
-				A2($mdgriffith$elm_ui$Element$paddingXY, 8, 4)
-			])
-	};
-};
-var $author$project$Widget$Material$selectItem = $author$project$Internal$Material$Item$selectItem;
-var $author$project$Internal$Material$List$sideSheet = function (palette) {
-	return {
-		content: {
-			element: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-				]),
-			ifFirst: _List_Nil,
-			ifLast: _List_Nil,
-			ifSingleton: _List_Nil,
-			otherwise: _List_Nil
-		},
-		elementColumn: _Utils_ap(
-			$author$project$Widget$Material$Color$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$height($mdgriffith$elm_ui$Element$fill),
-					A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8)
-				]))
-	};
-};
-var $author$project$Widget$Material$sideSheet = $author$project$Internal$Material$List$sideSheet;
-var $author$project$Widget$Material$Color$accessibleWithTextColor = F2(
-	function (c, color) {
-		var newConstrast = 7;
-		var l2 = 1 + ($avh4$elm_color$Color$toRgba(color).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(color) - 1));
-		var lighterLuminance = (newConstrast * (l2 + 0.05)) - 0.05;
-		var l1 = 1 + ($avh4$elm_color$Color$toRgba(c).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(c) - 1));
-		var darkerLuminance = (l2 + 0.05) - (0.05 / newConstrast);
-		return ((_Utils_cmp(l1, l2) > 0) ? ((((l1 + 0.05) / (l2 + 0.05)) < 7) ? A2(
-			$elm$core$Basics$composeR,
-			$noahzgordon$elm_color_extra$Color$Convert$colorToLab,
-			A2(
-				$elm$core$Basics$composeR,
-				function (col) {
-					return _Utils_update(
-						col,
-						{l: 100 * lighterLuminance});
-				},
-				$noahzgordon$elm_color_extra$Color$Convert$labToColor)) : $elm$core$Basics$identity) : ((((l2 + 0.05) / (l1 + 0.05)) < 7) ? A2(
-			$elm$core$Basics$composeR,
-			$noahzgordon$elm_color_extra$Color$Convert$colorToLab,
-			A2(
-				$elm$core$Basics$composeR,
-				function (col) {
-					return _Utils_update(
-						col,
-						{l: 100 * darkerLuminance});
-				},
-				$noahzgordon$elm_color_extra$Color$Convert$labToColor)) : $elm$core$Basics$identity))(c);
-	});
-var $author$project$Widget$Material$Color$dark = A3($avh4$elm_color$Color$rgb255, 50, 50, 50);
-var $author$project$Widget$Customize$mapElementButton = F2(
-	function (fun, a) {
-		return _Utils_update(
-			a,
-			{
-				elementButton: fun(a.elementButton)
-			});
-	});
-var $author$project$Widget$Customize$elementButton = F2(
-	function (list, a) {
-		return A2(
-			$author$project$Widget$Customize$mapElementButton,
-			function (b) {
-				return _Utils_ap(b, list);
-			},
-			a);
-	});
-var $author$project$Internal$Material$Snackbar$snackbar = function (palette) {
-	return {
-		content: {
-			button: A2(
-				$author$project$Widget$Customize$elementButton,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Font$color(
-						$author$project$Widget$Material$Color$fromColor(
-							A2($author$project$Widget$Material$Color$accessibleWithTextColor, palette.primary, $author$project$Widget$Material$Color$dark)))
-					]),
-				$author$project$Internal$Material$Button$textButton(palette)),
-			text: {
-				elementText: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$centerX,
-						A2($mdgriffith$elm_ui$Element$paddingXY, 10, 8)
-					])
-			}
-		},
-		elementRow: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$dark)),
-				$mdgriffith$elm_ui$Element$Font$color(
-				$author$project$Widget$Material$Color$fromColor(
-					$author$project$Widget$Material$Color$accessibleTextColor($author$project$Widget$Material$Color$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$Material$Color$shadow(2))
-			])
-	};
-};
-var $author$project$Widget$Material$snackbar = $author$project$Internal$Material$Snackbar$snackbar;
-var $author$project$Internal$Material$SortTable$sortTable = function (palette) {
-	return {
-		content: {
-			ascIcon: $author$project$Internal$Material$Icon$expand_less,
-			defaultIcon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-			descIcon: $author$project$Internal$Material$Icon$expand_more,
-			header: $author$project$Internal$Material$Button$textButton(palette)
-		},
-		elementTable: _List_Nil
-	};
-};
-var $author$project$Widget$Material$sortTable = $author$project$Internal$Material$SortTable$sortTable;
-var $mdgriffith$elm_ui$Internal$Model$Left = {$: 'Left'};
-var $mdgriffith$elm_ui$Element$alignLeft = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$Left);
-var $mdgriffith$elm_ui$Internal$Model$MoveX = function (a) {
-	return {$: 'MoveX', a: a};
-};
-var $mdgriffith$elm_ui$Internal$Flag$moveX = $mdgriffith$elm_ui$Internal$Flag$flag(25);
-var $mdgriffith$elm_ui$Element$moveLeft = function (x) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$TransformComponent,
-		$mdgriffith$elm_ui$Internal$Flag$moveX,
-		$mdgriffith$elm_ui$Internal$Model$MoveX(-x));
-};
-var $mdgriffith$elm_ui$Element$moveRight = function (x) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$TransformComponent,
-		$mdgriffith$elm_ui$Internal$Flag$moveX,
-		$mdgriffith$elm_ui$Internal$Model$MoveX(x));
-};
-var $author$project$Internal$Material$Switch$switch = function (palette) {
-	return {
-		content: {
-			element: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$height(
-					$mdgriffith$elm_ui$Element$px(14)),
-					$mdgriffith$elm_ui$Element$width(
-					$mdgriffith$elm_ui$Element$px(34)),
-					$mdgriffith$elm_ui$Element$centerY,
-					$mdgriffith$elm_ui$Element$centerX,
-					$mdgriffith$elm_ui$Element$Border$rounded(10)
-				]),
-			ifActive: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.5, palette.primary)))
-				]),
-			ifDisabled: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$htmlAttribute(
-					A2($elm$html$Html$Attributes$style, 'cursor', 'not-allowed')),
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A3($author$project$Widget$Material$Color$withShade, $author$project$Widget$Material$Color$gray, 0.5 * $author$project$Widget$Material$Color$buttonDisabledOpacity, palette.surface)))
-				]),
-			otherwise: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.5, $author$project$Widget$Material$Color$gray)))
-				])
-		},
-		contentInFront: {
-			content: {
-				element: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height(
-						$mdgriffith$elm_ui$Element$px(20)),
-						$mdgriffith$elm_ui$Element$width(
-						$mdgriffith$elm_ui$Element$px(20)),
-						$mdgriffith$elm_ui$Element$centerY,
-						$mdgriffith$elm_ui$Element$centerX,
-						$mdgriffith$elm_ui$Element$Border$rounded(10),
-						$mdgriffith$elm_ui$Element$Border$shadow(
-						$author$project$Widget$Material$Color$shadow(2)),
-						$mdgriffith$elm_ui$Element$Background$color(
-						$author$project$Widget$Material$Color$fromColor(palette.surface))
-					]),
-				ifActive: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Background$color(
-						$author$project$Widget$Material$Color$fromColor(
-							A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
-					]),
-				ifDisabled: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Background$color(
-						$author$project$Widget$Material$Color$fromColor(
-							A3($author$project$Widget$Material$Color$withShade, $avh4$elm_color$Color$gray, $author$project$Widget$Material$Color$buttonDisabledOpacity, palette.surface))),
-						$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-						$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-						$mdgriffith$elm_ui$Element$focused(_List_Nil)
-					]),
-				otherwise: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Background$color(
-						$author$project$Widget$Material$Color$fromColor(
-							A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface)))
-					])
-			},
-			element: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$height(
-					$mdgriffith$elm_ui$Element$px(38)),
-					$mdgriffith$elm_ui$Element$width(
-					$mdgriffith$elm_ui$Element$px(38)),
-					$mdgriffith$elm_ui$Element$Border$rounded(19)
-				]),
-			ifActive: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$alignRight,
-					$mdgriffith$elm_ui$Element$moveRight(8)
-				]),
-			ifDisabled: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$htmlAttribute(
-					A2($elm$html$Html$Attributes$style, 'cursor', 'not-allowed'))
-				]),
-			otherwise: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, $avh4$elm_color$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, $avh4$elm_color$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, $avh4$elm_color$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$alignLeft,
-					$mdgriffith$elm_ui$Element$moveLeft(8)
-				])
-		},
-		elementButton: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$height(
-				$mdgriffith$elm_ui$Element$px(38)),
-				$mdgriffith$elm_ui$Element$width(
-				$mdgriffith$elm_ui$Element$px(58 - 18)),
-				$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-				$mdgriffith$elm_ui$Element$focused(_List_Nil),
-				$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
-			])
-	};
-};
-var $author$project$Widget$Material$switch = $author$project$Internal$Material$Switch$switch;
-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 $author$project$Internal$Material$Tab$tabButton = function (palette) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {color: palette.primary, size: 18},
-					ifDisabled: {color: $author$project$Widget$Material$Color$gray, size: 18},
-					otherwise: {color: palette.primary, size: 18}
-				},
-				text: {contentText: _List_Nil}
-			},
-			elementRow: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$spacing(8),
-					$mdgriffith$elm_ui$Element$centerY,
-					$mdgriffith$elm_ui$Element$centerX
-				])
-		},
-		elementButton: _Utils_ap(
-			$author$project$Widget$Material$Typography$button,
-			_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$Material$Color$fromColor(palette.primary)),
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$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$Internal$Material$Button$baseButton(palette).ifDisabled,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray)),
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-					$mdgriffith$elm_ui$Element$focused(_List_Nil)
-				])),
-		otherwise: _List_Nil
-	};
-};
-var $author$project$Internal$Material$Tab$tab = function (palette) {
-	return {
-		content: {
-			content: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-				]),
-			tabs: {
-				content: $author$project$Internal$Material$Tab$tabButton(palette),
-				elementRow: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$spaceEvenly,
-						$mdgriffith$elm_ui$Element$Border$shadow(
-						$author$project$Widget$Material$Color$shadow(4)),
-						$mdgriffith$elm_ui$Element$spacing(8),
-						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-					])
-			}
-		},
-		elementColumn: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$spacing(8),
-				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-			])
-	};
-};
-var $author$project$Widget$Material$tab = $author$project$Internal$Material$Tab$tab;
-var $author$project$Internal$Material$AppBar$menuTabButton = function (palette) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
-						size: 18
-					},
-					ifDisabled: {color: $author$project$Widget$Material$Color$gray, size: 18},
-					otherwise: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
-						size: 18
-					}
-				},
-				text: {contentText: _List_Nil}
-			},
-			elementRow: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$spacing(8),
-					$mdgriffith$elm_ui$Element$centerY,
-					$mdgriffith$elm_ui$Element$centerX
-				])
-		},
-		elementButton: _Utils_ap(
-			$author$project$Widget$Material$Typography$button,
-			_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$Material$Color$fromColor(
-						$author$project$Widget$Material$Color$accessibleTextColor(palette.primary))),
-					$mdgriffith$elm_ui$Element$alignBottom,
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$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$Internal$Material$Button$baseButton(palette).ifDisabled,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray)),
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-					$mdgriffith$elm_ui$Element$focused(_List_Nil)
-				])),
-		otherwise: _List_Nil
-	};
-};
-var $author$project$Internal$Material$AppBar$tabBar = function (palette) {
-	return A2(
-		$author$project$Internal$Material$AppBar$internalBar,
-		{
-			menuTabButton: $author$project$Internal$Material$AppBar$menuTabButton(palette),
-			title: _Utils_ap(
-				$author$project$Widget$Material$Typography$h6,
-				_List_fromArray(
-					[
-						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
-					]))
-		},
-		palette);
-};
-var $author$project$Widget$Material$tabBar = $author$project$Internal$Material$AppBar$tabBar;
-var $author$project$Widget$Material$textButton = $author$project$Internal$Material$Button$textButton;
-var $author$project$Internal$Material$TextInput$textInput = function (palette) {
-	return {
-		content: {
-			chips: {
-				content: $author$project$Internal$Material$Chip$chip(palette),
-				elementRow: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$spacing(8)
-					])
-			},
-			text: {
-				elementTextInput: _Utils_ap(
-					$author$project$Widget$Material$Color$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),
-							$mdgriffith$elm_ui$Element$centerY
-						]))
-			}
-		},
-		elementRow: _Utils_ap(
-			$author$project$Widget$Material$Color$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$Material$Color$fromColor(
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Border$shadow(
-							$author$project$Widget$Material$Color$shadow(4)),
-							$mdgriffith$elm_ui$Element$Border$color(
-							$author$project$Widget$Material$Color$fromColor(palette.primary))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Border$shadow(
-							$author$project$Widget$Material$Color$shadow(2))
-						]))
-				]))
-	};
-};
-var $author$project$Widget$Material$textInput = $author$project$Internal$Material$TextInput$textInput;
-var $author$project$Internal$Material$Button$toggleButton = function (palette) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.surface),
-						size: 24
-					},
-					ifDisabled: {color: $author$project$Widget$Material$Color$gray, size: 24},
-					otherwise: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.surface),
-						size: 24
-					}
-				},
-				text: {
-					contentText: _List_fromArray(
-						[$mdgriffith$elm_ui$Element$centerX])
-				}
-			},
-			elementRow: _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$Material$Color$textAndBackground(
-						A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.surface)))
-				])
-		},
-		elementButton: _Utils_ap(
-			$author$project$Widget$Material$Typography$button,
-			_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(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.surface))),
-							$mdgriffith$elm_ui$Element$Border$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A3(
-									$author$project$Widget$Material$Color$withShade,
-									palette.on.surface,
-									$author$project$Widget$Material$Color$buttonPressedOpacity,
-									A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))))
-						])),
-					$mdgriffith$elm_ui$Element$focused(_List_Nil),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface))),
-							$mdgriffith$elm_ui$Element$Border$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A3(
-									$author$project$Widget$Material$Color$withShade,
-									palette.on.surface,
-									$author$project$Widget$Material$Color$buttonHoverOpacity,
-									A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))))
-						]))
-				])),
-		ifActive: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonSelectedOpacity, palette.surface))),
-				$mdgriffith$elm_ui$Element$Font$color(
-				$author$project$Widget$Material$Color$fromColor(
-					$author$project$Widget$Material$Color$accessibleTextColor(palette.surface))),
-				$mdgriffith$elm_ui$Element$Border$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A3(
-						$author$project$Widget$Material$Color$withShade,
-						palette.on.surface,
-						$author$project$Widget$Material$Color$buttonSelectedOpacity,
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface)))),
-				$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
-			]),
-		ifDisabled: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(palette.surface)),
-					$mdgriffith$elm_ui$Element$Border$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))),
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$gray)),
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
-				])),
-		otherwise: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(palette.surface)),
-				$mdgriffith$elm_ui$Element$Font$color(
-				$author$project$Widget$Material$Color$fromColor(
-					$author$project$Widget$Material$Color$accessibleTextColor(palette.surface))),
-				$mdgriffith$elm_ui$Element$Border$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface)))
-			])
-	};
-};
-var $author$project$Widget$Material$toggleButton = $author$project$Internal$Material$Button$toggleButton;
-var $mdgriffith$elm_ui$Element$Font$typeface = $mdgriffith$elm_ui$Internal$Model$Typeface;
-var $author$project$Data$Style$style = function (palette) {
-	return {
-		button: $author$project$Widget$Material$outlinedButton(palette),
-		buttonRow: $author$project$Widget$Material$buttonRow,
-		cardColumn: $author$project$Widget$Material$cardColumn(palette),
-		chipButton: $author$project$Widget$Material$chip(palette),
-		column: $author$project$Widget$Material$column,
-		containedButton: $author$project$Widget$Material$containedButton($author$project$Widget$Material$defaultPalette),
-		container: _Utils_ap(
-			$author$project$Widget$Material$Color$textAndBackground($author$project$Widget$Material$defaultPalette.background),
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Font$family(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Font$typeface('Roboto'),
-							$mdgriffith$elm_ui$Element$Font$sansSerif
-						])),
-					$mdgriffith$elm_ui$Element$Font$size(16),
-					$mdgriffith$elm_ui$Element$Font$letterSpacing(0.5)
-				])),
-		dialog: $author$project$Widget$Material$alertDialog(palette),
-		expansionItem: $author$project$Widget$Material$expansionItem(palette),
-		fullBleedDivider: $author$project$Widget$Material$fullBleedDivider(palette),
-		fullBleedHeader: $author$project$Widget$Material$fullBleedHeader(palette),
-		fullBleedItem: $author$project$Widget$Material$fullBleedItem($author$project$Widget$Material$defaultPalette),
-		iconButton: $author$project$Widget$Material$iconButton($author$project$Widget$Material$defaultPalette),
-		imageItem: $author$project$Widget$Material$imageItem(palette),
-		insetDivider: $author$project$Widget$Material$insetDivider(palette),
-		insetHeader: $author$project$Widget$Material$insetHeader(palette),
-		insetItem: $author$project$Widget$Material$insetItem(palette),
-		menuBar: $author$project$Widget$Material$menuBar($author$project$Widget$Material$defaultPalette),
-		middleDivider: $author$project$Widget$Material$middleDivider(palette),
-		multiLineItem: $author$project$Widget$Material$multiLineItem(palette),
-		outlinedButton: $author$project$Widget$Material$outlinedButton($author$project$Widget$Material$defaultPalette),
-		primaryButton: $author$project$Widget$Material$containedButton(palette),
-		progressIndicator: $author$project$Widget$Material$progressIndicator(palette),
-		row: $author$project$Widget$Material$row,
-		searchFill: {
-			content: {
-				chips: {
-					content: $author$project$Widget$Material$chip($author$project$Widget$Material$defaultPalette),
-					elementRow: _List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$spacing(8)
-						])
-				},
-				text: {
-					elementTextInput: _Utils_ap(
-						$author$project$Widget$Material$Color$textAndBackground($author$project$Widget$Material$defaultPalette.surface),
-						_List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$Border$width(0),
-								$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-								$mdgriffith$elm_ui$Element$focused(_List_Nil)
-							]))
-				}
-			},
-			elementRow: _Utils_ap(
-				$author$project$Widget$Material$Color$textAndBackground($author$project$Widget$Material$defaultPalette.surface),
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height(
-						$mdgriffith$elm_ui$Element$px(56))
-					]))
-		},
-		selectButton: $author$project$Widget$Material$toggleButton(palette),
-		selectItem: $author$project$Widget$Material$selectItem($author$project$Widget$Material$defaultPalette),
-		sheetButton: $author$project$Widget$Material$selectItem($author$project$Widget$Material$defaultPalette),
-		sideSheet: $author$project$Widget$Material$sideSheet(palette),
-		snackbar: $author$project$Widget$Material$snackbar($author$project$Widget$Material$defaultPalette),
-		sortTable: $author$project$Widget$Material$sortTable(palette),
-		_switch: $author$project$Widget$Material$switch(palette),
-		tab: $author$project$Widget$Material$tab(palette),
-		tabBar: $author$project$Widget$Material$tabBar($author$project$Widget$Material$defaultPalette),
-		textButton: $author$project$Widget$Material$textButton($author$project$Widget$Material$defaultPalette),
-		textInput: $author$project$Widget$Material$textInput(palette)
-	};
-};
-var $author$project$Data$Theme$toStyle = function (theme) {
-	if (theme.$ === 'Material') {
-		return $author$project$Data$Style$style($author$project$Widget$Material$defaultPalette);
-	} else {
-		return $author$project$Data$Style$style($author$project$Widget$Material$darkPalette);
-	}
-};
-var $author$project$Main$ChangedSearch = function (a) {
-	return {$: 'ChangedSearch', a: a};
-};
-var $author$project$Main$ChangedSidebar = function (a) {
-	return {$: 'ChangedSidebar', a: a};
-};
-var $author$project$Data$Theme$DarkMaterial = {$: 'DarkMaterial'};
-var $author$project$Main$JumpTo = function (a) {
-	return {$: 'JumpTo', a: a};
-};
-var $author$project$Main$LeftSheet = {$: 'LeftSheet'};
-var $author$project$Main$Load = function (a) {
-	return {$: 'Load', a: a};
-};
-var $mdgriffith$elm_ui$Element$Phone = {$: 'Phone'};
-var $author$project$Main$RightSheet = {$: 'RightSheet'};
-var $author$project$Main$Search = {$: 'Search'};
-var $author$project$Main$SetTheme = function (a) {
-	return {$: 'SetTheme', a: a};
-};
-var $mdgriffith$elm_ui$Element$Tablet = {$: 'Tablet'};
-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$book = A2(
-	$feathericons$elm_feather$FeatherIcons$makeBuilder,
-	'book',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M4 19.5A2.5 2.5 0 0 1 6.5 17H20')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Widget$Icon$elmFeather = F2(
-	function (fun, icon) {
-		return function (_v0) {
-			var size = _v0.size;
-			var color = _v0.color;
-			return A2(
-				$mdgriffith$elm_ui$Element$el,
-				_List_Nil,
-				$mdgriffith$elm_ui$Element$html(
-					A2(
-						fun,
-						_List_fromArray(
-							[
-								$elm$svg$Svg$Attributes$width(
-								$elm$core$String$fromInt(size)),
-								$elm$svg$Svg$Attributes$height(
-								$elm$core$String$fromInt(size)),
-								$elm$svg$Svg$Attributes$stroke(
-								$avh4$elm_color$Color$toCssString(color))
-							]),
-						icon)));
-		};
-	});
-var $elm$core$Array$fromListHelp = F3(
-	function (list, nodeList, nodeListSize) {
-		fromListHelp:
-		while (true) {
-			var _v0 = A2($elm$core$Elm$JsArray$initializeFromList, $elm$core$Array$branchFactor, list);
-			var jsArray = _v0.a;
-			var remainingItems = _v0.b;
-			if (_Utils_cmp(
-				$elm$core$Elm$JsArray$length(jsArray),
-				$elm$core$Array$branchFactor) < 0) {
-				return A2(
-					$elm$core$Array$builderToArray,
-					true,
-					{nodeList: nodeList, nodeListSize: nodeListSize, tail: jsArray});
-			} else {
-				var $temp$list = remainingItems,
-					$temp$nodeList = A2(
-					$elm$core$List$cons,
-					$elm$core$Array$Leaf(jsArray),
-					nodeList),
-					$temp$nodeListSize = nodeListSize + 1;
-				list = $temp$list;
-				nodeList = $temp$nodeList;
-				nodeListSize = $temp$nodeListSize;
-				continue fromListHelp;
-			}
-		}
-	});
-var $elm$core$Array$fromList = function (list) {
-	if (!list.b) {
-		return $elm$core$Array$empty;
-	} else {
-		return A3($elm$core$Array$fromListHelp, list, _List_Nil, 0);
-	}
-};
-var $elm$core$Array$bitMask = 4294967295 >>> (32 - $elm$core$Array$shiftStep);
-var $elm$core$Elm$JsArray$unsafeGet = _JsArray_unsafeGet;
-var $elm$core$Array$getHelp = F3(
-	function (shift, index, tree) {
-		getHelp:
-		while (true) {
-			var pos = $elm$core$Array$bitMask & (index >>> shift);
-			var _v0 = A2($elm$core$Elm$JsArray$unsafeGet, pos, tree);
-			if (_v0.$ === 'SubTree') {
-				var subTree = _v0.a;
-				var $temp$shift = shift - $elm$core$Array$shiftStep,
-					$temp$index = index,
-					$temp$tree = subTree;
-				shift = $temp$shift;
-				index = $temp$index;
-				tree = $temp$tree;
-				continue getHelp;
-			} else {
-				var values = _v0.a;
-				return A2($elm$core$Elm$JsArray$unsafeGet, $elm$core$Array$bitMask & index, values);
-			}
-		}
-	});
-var $elm$core$Array$tailIndex = function (len) {
-	return (len >>> 5) << 5;
-};
-var $elm$core$Array$get = F2(
-	function (index, _v0) {
-		var len = _v0.a;
-		var startShift = _v0.b;
-		var tree = _v0.c;
-		var tail = _v0.d;
-		return ((index < 0) || (_Utils_cmp(index, len) > -1)) ? $elm$core$Maybe$Nothing : ((_Utils_cmp(
-			index,
-			$elm$core$Array$tailIndex(len)) > -1) ? $elm$core$Maybe$Just(
-			A2($elm$core$Elm$JsArray$unsafeGet, $elm$core$Array$bitMask & index, tail)) : $elm$core$Maybe$Just(
-			A3($elm$core$Array$getHelp, startShift, index, tree)));
-	});
-var $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 $author$project$Widget$Layout$getDeviceClass = function (window) {
-	return $mdgriffith$elm_ui$Element$classifyDevice(window)._class;
-};
-var $feathericons$elm_feather$FeatherIcons$github = A2(
-	$feathericons$elm_feather$FeatherIcons$makeBuilder,
-	'github',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22')
-				]),
-			_List_Nil)
-		]));
-var $mdgriffith$elm_ui$Internal$Model$InFront = {$: 'InFront'};
-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 $author$project$Internal$Item$toItem = F2(
-	function (style, element) {
-		return function (attr) {
-			return A2(
-				$mdgriffith$elm_ui$Element$el,
-				_Utils_ap(attr, style.element),
-				element(style.content));
-		};
-	});
-var $author$project$Internal$Item$asItem = function (element) {
-	return A2(
-		$author$project$Internal$Item$toItem,
-		{content: _Utils_Tuple0, element: _List_Nil},
-		$elm$core$Basics$always(element));
-};
-var $author$project$Widget$Customize$mapElementColumn = F2(
-	function (fun, a) {
-		return _Utils_update(
-			a,
-			{
-				elementColumn: fun(a.elementColumn)
-			});
-	});
-var $author$project$Widget$Customize$elementColumn = F2(
-	function (list, a) {
-		return A2(
-			$author$project$Widget$Customize$mapElementColumn,
-			function (b) {
-				return _Utils_ap(b, list);
-			},
-			a);
-	});
-var $mdgriffith$elm_ui$Internal$Model$AsColumn = {$: 'AsColumn'};
-var $mdgriffith$elm_ui$Internal$Model$asColumn = $mdgriffith$elm_ui$Internal$Model$AsColumn;
-var $mdgriffith$elm_ui$Element$column = F2(
-	function (attrs, children) {
-		return A4(
-			$mdgriffith$elm_ui$Internal$Model$element,
-			$mdgriffith$elm_ui$Internal$Model$asColumn,
-			$mdgriffith$elm_ui$Internal$Model$div,
-			A2(
-				$elm$core$List$cons,
-				$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentTop + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.contentLeft)),
-				A2(
-					$elm$core$List$cons,
-					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
-					A2(
-						$elm$core$List$cons,
-						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
-						attrs))),
-			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
-	});
-var $author$project$Widget$Customize$mapElement = F2(
-	function (fun, a) {
-		return _Utils_update(
-			a,
-			{
-				element: fun(a.element)
-			});
-	});
-var $author$project$Widget$Customize$element = F2(
-	function (list, a) {
-		return A2(
-			$author$project$Widget$Customize$mapElement,
-			function (b) {
-				return _Utils_ap(b, list);
-			},
-			a);
-	});
-var $author$project$Internal$List$internal = F2(
-	function (style, list) {
-		return A2(
-			$elm$core$List$indexedMap,
-			F2(
-				function (i, fun) {
-					return fun(
-						_Utils_ap(
-							style.element,
-							($elm$core$List$length(list) === 1) ? style.ifSingleton : ((!i) ? style.ifFirst : (_Utils_eq(
-								i,
-								$elm$core$List$length(list) - 1) ? style.ifLast : style.otherwise))));
-				}),
-			list);
-	});
-var $author$project$Internal$List$itemList = function (style) {
-	return A2(
-		$elm$core$Basics$composeR,
-		$author$project$Internal$List$internal(
-			A2(
-				$author$project$Widget$Customize$element,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
-					]),
-				style.content)),
-		$mdgriffith$elm_ui$Element$column(style.elementColumn));
-};
-var $author$project$Internal$Select$select = function (_v0) {
-	var selected = _v0.selected;
-	var options = _v0.options;
-	var onSelect = _v0.onSelect;
-	return A2(
-		$elm$core$List$indexedMap,
-		F2(
-			function (i, a) {
-				return _Utils_Tuple2(
-					_Utils_eq(
-						selected,
-						$elm$core$Maybe$Just(i)),
-					{
-						icon: a.icon,
-						onPress: onSelect(i),
-						text: a.text
-					});
-			}),
-		options);
-};
+var $mdgriffith$elm_ui$Element$map = $mdgriffith$elm_ui$Internal$Model$map;
 var $mdgriffith$elm_ui$Internal$Model$Button = {$: 'Button'};
 var $elm$json$Json$Encode$bool = _Json_wrap;
 var $elm$html$Html$Attributes$boolProperty = F2(
@@ -17341,88 +13343,6 @@ var $mdgriffith$elm_ui$Element$Input$button = F2(
 				_List_fromArray(
 					[label])));
 	});
-var $mdgriffith$elm_ui$Internal$Model$AsRow = {$: 'AsRow'};
-var $mdgriffith$elm_ui$Internal$Model$asRow = $mdgriffith$elm_ui$Internal$Model$AsRow;
-var $mdgriffith$elm_ui$Element$row = F2(
-	function (attrs, children) {
-		return A4(
-			$mdgriffith$elm_ui$Internal$Model$element,
-			$mdgriffith$elm_ui$Internal$Model$asRow,
-			$mdgriffith$elm_ui$Internal$Model$div,
-			A2(
-				$elm$core$List$cons,
-				$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentLeft + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.contentCenterY)),
-				A2(
-					$elm$core$List$cons,
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
-					A2(
-						$elm$core$List$cons,
-						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
-						attrs))),
-			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
-	});
-var $mdgriffith$elm_ui$Element$text = function (content) {
-	return $mdgriffith$elm_ui$Internal$Model$Text(content);
-};
-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.elementButton,
-				_Utils_eq(b.onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : (selected ? style.ifActive : style.otherwise)),
-			{
-				label: A2(
-					$mdgriffith$elm_ui$Element$row,
-					style.content.elementRow,
-					_List_fromArray(
-						[
-							b.icon(
-							_Utils_eq(b.onPress, $elm$core$Maybe$Nothing) ? style.content.content.icon.ifDisabled : (selected ? style.content.content.icon.ifActive : style.content.content.icon.otherwise)),
-							A2(
-							$mdgriffith$elm_ui$Element$el,
-							style.content.content.text.contentText,
-							$mdgriffith$elm_ui$Element$text(b.text))
-						])),
-				onPress: b.onPress
-			});
-	});
-var $author$project$Internal$Item$selectItem = F2(
-	function (s, select) {
-		return A2(
-			$elm$core$List$map,
-			function (b) {
-				return A2(
-					$author$project$Internal$Item$toItem,
-					s,
-					function (style) {
-						return A2($author$project$Internal$Select$selectButton, style, b);
-					});
-			},
-			$author$project$Internal$Select$select(select));
-	});
-var $author$project$Widget$Layout$leftSheet = F2(
-	function (style, _v0) {
-		var title = _v0.title;
-		var onDismiss = _v0.onDismiss;
-		var menu = _v0.menu;
-		return {
-			content: A2(
-				$author$project$Internal$List$itemList,
-				A2(
-					$author$project$Widget$Customize$elementColumn,
-					_List_fromArray(
-						[$mdgriffith$elm_ui$Element$alignLeft]),
-					style.sheet),
-				A2(
-					$elm$core$List$cons,
-					$author$project$Internal$Item$asItem(title),
-					A2($author$project$Internal$Item$selectItem, style.button, menu))),
-			onDismiss: $elm$core$Maybe$Just(onDismiss)
-		};
-	});
 var $mdgriffith$elm_ui$Internal$Model$Label = function (a) {
 	return {$: 'Label', a: a};
 };
@@ -17451,6 +13371,28 @@ var $author$project$Internal$Button$iconButton = F2(
 				onPress: onPress
 			});
 	});
+var $mdgriffith$elm_ui$Element$Phone = {$: 'Phone'};
+var $mdgriffith$elm_ui$Element$Tablet = {$: 'Tablet'};
+var $mdgriffith$elm_ui$Internal$Model$AsRow = {$: 'AsRow'};
+var $mdgriffith$elm_ui$Internal$Model$asRow = $mdgriffith$elm_ui$Internal$Model$AsRow;
+var $mdgriffith$elm_ui$Element$row = F2(
+	function (attrs, children) {
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asRow,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentLeft + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.contentCenterY)),
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+						attrs))),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
+	});
 var $author$project$Internal$Button$button = F2(
 	function (style, _v0) {
 		var onPress = _v0.onPress;
@@ -17460,7 +13402,12 @@ var $author$project$Internal$Button$button = F2(
 			$mdgriffith$elm_ui$Element$Input$button,
 			_Utils_ap(
 				style.elementButton,
-				_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
+				_Utils_ap(
+					_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Region$description(text)
+						]))),
 			{
 				label: A2(
 					$mdgriffith$elm_ui$Element$row,
@@ -17477,6 +13424,24 @@ var $author$project$Internal$Button$button = F2(
 				onPress: onPress
 			});
 	});
+var $author$project$Widget$Customize$mapElementButton = F2(
+	function (fun, a) {
+		return _Utils_update(
+			a,
+			{
+				elementButton: fun(a.elementButton)
+			});
+	});
+var $author$project$Widget$Customize$elementButton = F2(
+	function (list, a) {
+		return A2(
+			$author$project$Widget$Customize$mapElementButton,
+			function (b) {
+				return _Utils_ap(b, list);
+			},
+			a);
+	});
+var $mdgriffith$elm_ui$Element$none = $mdgriffith$elm_ui$Internal$Model$Empty;
 var $mdgriffith$elm_ui$Element$Input$Placeholder = F2(
 	function (a, b) {
 		return {$: 'Placeholder', a: a, b: b};
@@ -17490,8 +13455,6 @@ 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') {
@@ -17568,17 +13531,18 @@ var $mdgriffith$elm_ui$Element$Input$applyLabel = F3(
 			}
 		}
 	});
+var $elm$html$Html$Attributes$attribute = $elm$virtual_dom$VirtualDom$attribute;
 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$Model$TransformComponent = F2(
+	function (a, b) {
+		return {$: 'TransformComponent', a: a, b: 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(
@@ -17613,13 +13577,76 @@ var $mdgriffith$elm_ui$Element$Input$calcMoveToCompensateForPadding = function (
 };
 var $mdgriffith$elm_ui$Internal$Flag$overflow = $mdgriffith$elm_ui$Internal$Flag$flag(20);
 var $mdgriffith$elm_ui$Element$clip = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$overflow, $mdgriffith$elm_ui$Internal$Style$classes.clip);
-var $mdgriffith$elm_ui$Element$rgb = F3(
-	function (r, g, b) {
-		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, r, g, b, 1);
-	});
+var $mdgriffith$elm_ui$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 $mdgriffith$elm_ui$Element$Input$darkGrey = A3($mdgriffith$elm_ui$Element$rgb, 186 / 255, 189 / 255, 182 / 255);
+var $mdgriffith$elm_ui$Element$paddingXY = F2(
+	function (x, y) {
+		if (_Utils_eq(x, y)) {
+			var f = x;
+			return A2(
+				$mdgriffith$elm_ui$Internal$Model$StyleClass,
+				$mdgriffith$elm_ui$Internal$Flag$padding,
+				A5(
+					$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+					'p-' + $elm$core$String$fromInt(x),
+					f,
+					f,
+					f,
+					f));
+		} else {
+			var yFloat = y;
+			var xFloat = x;
+			return A2(
+				$mdgriffith$elm_ui$Internal$Model$StyleClass,
+				$mdgriffith$elm_ui$Internal$Flag$padding,
+				A5(
+					$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+					'p-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y))),
+					yFloat,
+					xFloat,
+					yFloat,
+					xFloat));
+		}
+	});
 var $mdgriffith$elm_ui$Element$Input$defaultTextPadding = A2($mdgriffith$elm_ui$Element$paddingXY, 12, 12);
+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 $mdgriffith$elm_ui$Element$Input$white = A3($mdgriffith$elm_ui$Element$rgb, 1, 1, 1);
+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$Input$defaultTextBoxStyle = _List_fromArray(
 	[
 		$mdgriffith$elm_ui$Element$Input$defaultTextPadding,
@@ -17639,15 +13666,6 @@ var $mdgriffith$elm_ui$Element$Input$getHeight = function (attr) {
 		return $elm$core$Maybe$Nothing;
 	}
 };
-var $elm$core$List$head = function (list) {
-	if (list.b) {
-		var x = list.a;
-		var xs = list.b;
-		return $elm$core$Maybe$Just(x);
-	} else {
-		return $elm$core$Maybe$Nothing;
-	}
-};
 var $mdgriffith$elm_ui$Element$Input$hiddenLabelAttribute = function (label) {
 	if (label.$ === 'HiddenLabel') {
 		var textLabel = label.a;
@@ -17657,6 +13675,10 @@ var $mdgriffith$elm_ui$Element$Input$hiddenLabelAttribute = function (label) {
 		return $mdgriffith$elm_ui$Internal$Model$NoAttribute;
 	}
 };
+var $mdgriffith$elm_ui$Internal$Model$InFront = {$: 'InFront'};
+var $mdgriffith$elm_ui$Element$inFront = function (element) {
+	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$InFront, element);
+};
 var $mdgriffith$elm_ui$Element$Input$isConstrained = function (len) {
 	isConstrained:
 	while (true) {
@@ -17736,6 +13758,40 @@ var $elm$html$Html$Events$onInput = function (tagger) {
 			$elm$html$Html$Events$alwaysStop,
 			A2($elm$json$Json$Decode$map, tagger, $elm$html$Html$Events$targetValue)));
 };
+var $mdgriffith$elm_ui$Internal$Model$paddingName = F4(
+	function (top, right, bottom, left) {
+		return 'pad-' + ($elm$core$String$fromInt(top) + ('-' + ($elm$core$String$fromInt(right) + ('-' + ($elm$core$String$fromInt(bottom) + ('-' + $elm$core$String$fromInt(left)))))));
+	});
+var $mdgriffith$elm_ui$Element$paddingEach = function (_v0) {
+	var top = _v0.top;
+	var right = _v0.right;
+	var bottom = _v0.bottom;
+	var left = _v0.left;
+	if (_Utils_eq(top, right) && (_Utils_eq(top, bottom) && _Utils_eq(top, left))) {
+		var topFloat = top;
+		return A2(
+			$mdgriffith$elm_ui$Internal$Model$StyleClass,
+			$mdgriffith$elm_ui$Internal$Flag$padding,
+			A5(
+				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+				'p-' + $elm$core$String$fromInt(top),
+				topFloat,
+				topFloat,
+				topFloat,
+				topFloat));
+	} else {
+		return A2(
+			$mdgriffith$elm_ui$Internal$Model$StyleClass,
+			$mdgriffith$elm_ui$Internal$Flag$padding,
+			A5(
+				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+				A4($mdgriffith$elm_ui$Internal$Model$paddingName, top, right, bottom, left),
+				top,
+				right,
+				bottom,
+				left));
+	}
+};
 var $mdgriffith$elm_ui$Element$Input$isFill = function (len) {
 	isFill:
 	while (true) {
@@ -18463,6 +14519,5848 @@ var $author$project$Internal$AppBar$menuBar = F2(
 			m);
 	});
 var $author$project$Widget$menuBar = $author$project$Internal$AppBar$menuBar;
+var $elm$core$Basics$pow = _Basics_pow;
+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 $noahzgordon$elm_color_extra$Color$Accessibility$luminance = function (cl) {
+	var f = function (intensity) {
+		return (intensity <= 0.03928) ? (intensity / 12.92) : A2($elm$core$Basics$pow, (intensity + 0.055) / 1.055, 2.4);
+	};
+	var _v0 = function (a) {
+		return _Utils_Tuple3(
+			f(a.red),
+			f(a.green),
+			f(a.blue));
+	}(
+		$avh4$elm_color$Color$toRgba(cl));
+	var r = _v0.a;
+	var g = _v0.b;
+	var b = _v0.c;
+	return ((0.2126 * r) + (0.7152 * g)) + (0.0722 * b);
+};
+var $author$project$Widget$Material$Color$accessibleTextColor = function (color) {
+	var l = 1 + ($avh4$elm_color$Color$toRgba(color).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(color) - 1));
+	var ratioBlack = 1.05 / (l + 0.05);
+	var ratioWhite = (l + 0.05) / 0.05;
+	return (_Utils_cmp(ratioBlack, ratioWhite) < 0) ? A3($avh4$elm_color$Color$rgb255, 0, 0, 0) : A3($avh4$elm_color$Color$rgb255, 255, 255, 255);
+};
+var $mdgriffith$elm_ui$Internal$Model$Right = {$: 'Right'};
+var $mdgriffith$elm_ui$Element$alignRight = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$Right);
+var $author$project$Widget$Material$Typography$button = _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 $mdgriffith$elm_ui$Internal$Model$CenterY = {$: 'CenterY'};
+var $mdgriffith$elm_ui$Element$centerY = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$CenterY);
+var $elm$core$Basics$composeR = F3(
+	function (f, g, x) {
+		return g(
+			f(x));
+	});
+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 $elm$core$Basics$clamp = F3(
+	function (low, high, number) {
+		return (_Utils_cmp(number, low) < 0) ? low : ((_Utils_cmp(number, high) > 0) ? high : number);
+	});
+var $avh4$elm_color$Color$rgb = F3(
+	function (r, g, b) {
+		return A4($avh4$elm_color$Color$RgbaSpace, r, g, b, 1.0);
+	});
+var $noahzgordon$elm_color_extra$Color$Convert$xyzToColor = function (_v0) {
+	var x = _v0.x;
+	var y = _v0.y;
+	var z = _v0.z;
+	var z_ = z / 100;
+	var y_ = y / 100;
+	var x_ = x / 100;
+	var r = ((x_ * 3.2404542) + (y_ * (-1.5371385))) + (z_ * (-0.4986));
+	var g = ((x_ * (-0.969266)) + (y_ * 1.8760108)) + (z_ * 4.1556e-2);
+	var c = function (ch) {
+		var ch_ = (ch > 3.1308e-3) ? ((1.055 * A2($elm$core$Basics$pow, ch, 1 / 2.4)) - 5.5e-2) : (12.92 * ch);
+		return A3($elm$core$Basics$clamp, 0, 1, ch_);
+	};
+	var b = ((x_ * 5.56434e-2) + (y_ * (-0.2040259))) + (z_ * 1.0572252);
+	return A3(
+		$avh4$elm_color$Color$rgb,
+		c(r),
+		c(g),
+		c(b));
+};
+var $noahzgordon$elm_color_extra$Color$Convert$labToColor = A2($elm$core$Basics$composeR, $noahzgordon$elm_color_extra$Color$Convert$labToXyz, $noahzgordon$elm_color_extra$Color$Convert$xyzToColor);
+var $elm$core$Basics$sin = _Basics_sin;
+var $author$project$Widget$Material$Color$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 $avh4$elm_color$Color$fromRgba = function (components) {
+	return A4($avh4$elm_color$Color$RgbaSpace, components.red, components.green, components.blue, components.alpha);
+};
+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$Material$Color$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$Material$Color$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$Material$Color$fromCIELCH(
+						A2(
+							fun,
+							$author$project$Widget$Material$Color$toCIELCH(c1),
+							$author$project$Widget$Material$Color$toCIELCH(c2))))));
+	});
+var $author$project$Internal$Material$Palette$gray = function (palette) {
+	return A3($author$project$Widget$Material$Color$withShade, palette.on.surface, 0.5, palette.surface);
+};
+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$Model$Px = function (a) {
+	return {$: 'Px', a: a};
+};
+var $mdgriffith$elm_ui$Element$px = $mdgriffith$elm_ui$Internal$Model$Px;
+var $author$project$Internal$Material$Button$baseButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					otherwise: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					}
+				},
+				text: {
+					contentText: _List_fromArray(
+						[$mdgriffith$elm_ui$Element$centerX])
+				}
+			},
+			elementRow: _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
+				])
+		},
+		elementButton: _Utils_ap(
+			$author$project$Widget$Material$Typography$button,
+			_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'))
+			]),
+		otherwise: _List_Nil
+	};
+};
+var $author$project$Widget$Material$Color$buttonFocusOpacity = 0.24;
+var $author$project$Widget$Material$Color$buttonHoverOpacity = 0.08;
+var $author$project$Widget$Material$Color$buttonPressedOpacity = 0.32;
+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 $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 $mdgriffith$elm_ui$Element$fromRgb = function (clr) {
+	return A4($mdgriffith$elm_ui$Internal$Model$Rgba, clr.red, clr.green, clr.blue, clr.alpha);
+};
+var $author$project$Widget$Material$Color$fromColor = A2($elm$core$Basics$composeR, $avh4$elm_color$Color$toRgba, $mdgriffith$elm_ui$Element$fromRgb);
+var $mdgriffith$elm_ui$Internal$Model$Active = {$: 'Active'};
+var $mdgriffith$elm_ui$Internal$Flag$active = $mdgriffith$elm_ui$Internal$Flag$flag(32);
+var $mdgriffith$elm_ui$Element$mouseDown = function (decs) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$active,
+		A2(
+			$mdgriffith$elm_ui$Internal$Model$PseudoSelector,
+			$mdgriffith$elm_ui$Internal$Model$Active,
+			$mdgriffith$elm_ui$Internal$Model$unwrapDecorations(decs)));
+};
+var $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 $author$project$Widget$Material$Color$scaleOpacity = function (opacity) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$avh4$elm_color$Color$toRgba,
+		A2(
+			$elm$core$Basics$composeR,
+			function (color) {
+				return _Utils_update(
+					color,
+					{alpha: color.alpha * opacity});
+			},
+			$avh4$elm_color$Color$fromRgba));
+};
+var $author$project$Internal$Material$Button$iconButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {color: palette.primary, size: 18},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					otherwise: {color: palette.primary, size: 18}
+				},
+				text: {
+					contentText: _List_fromArray(
+						[$mdgriffith$elm_ui$Element$centerX])
+				}
+			},
+			elementRow: _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
+				])
+		},
+		elementButton: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(48)),
+					$mdgriffith$elm_ui$Element$width(
+					A2($mdgriffith$elm_ui$Element$minimum, 48, $mdgriffith$elm_ui$Element$shrink)),
+					$mdgriffith$elm_ui$Element$Border$rounded(24),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.surface)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.surface)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface)))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface)))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		otherwise: _List_Nil
+	};
+};
+var $author$project$Widget$Customize$mapContent = F2(
+	function (fun, a) {
+		return _Utils_update(
+			a,
+			{
+				content: fun(a.content)
+			});
+	});
+var $elm$svg$Svg$Attributes$d = _VirtualDom_attribute('d');
+var $elm$svg$Svg$Attributes$fill = _VirtualDom_attribute('fill');
+var $elm$svg$Svg$Attributes$height = _VirtualDom_attribute('height');
+var $elm$svg$Svg$Attributes$stroke = _VirtualDom_attribute('stroke');
+var $avh4$elm_color$Color$toCssString = function (_v0) {
+	var r = _v0.a;
+	var g = _v0.b;
+	var b = _v0.c;
+	var a = _v0.d;
+	var roundTo = function (x) {
+		return $elm$core$Basics$round(x * 1000) / 1000;
+	};
+	var pct = function (x) {
+		return $elm$core$Basics$round(x * 10000) / 100;
+	};
+	return $elm$core$String$concat(
+		_List_fromArray(
+			[
+				'rgba(',
+				$elm$core$String$fromFloat(
+				pct(r)),
+				'%,',
+				$elm$core$String$fromFloat(
+				pct(g)),
+				'%,',
+				$elm$core$String$fromFloat(
+				pct(b)),
+				'%,',
+				$elm$core$String$fromFloat(
+				roundTo(a)),
+				')'
+			]));
+};
+var $elm$svg$Svg$Attributes$viewBox = _VirtualDom_attribute('viewBox');
+var $elm$svg$Svg$Attributes$width = _VirtualDom_attribute('width');
+var $author$project$Internal$Material$Icon$icon = function (_v0) {
+	var viewBox = _v0.viewBox;
+	var size = _v0.size;
+	var color = _v0.color;
+	return A2(
+		$elm$core$Basics$composeR,
+		$elm$svg$Svg$svg(
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$height(
+					$elm$core$String$fromInt(size)),
+					$elm$svg$Svg$Attributes$stroke(
+					$avh4$elm_color$Color$toCssString(color)),
+					$elm$svg$Svg$Attributes$fill(
+					$avh4$elm_color$Color$toCssString(color)),
+					$elm$svg$Svg$Attributes$viewBox(viewBox),
+					$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$svg$Svg$path = $elm$svg$Svg$trustedNode('path');
+var $author$project$Internal$Material$Icon$more_vert = function (_v0) {
+	var size = _v0.size;
+	var color = _v0.color;
+	return A2(
+		$author$project$Internal$Material$Icon$icon,
+		{color: color, size: size, viewBox: '0 0 48 48'},
+		_List_fromArray(
+			[
+				A2(
+				$elm$svg$Svg$path,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$d('M24 16c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 4c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z')
+					]),
+				_List_Nil)
+			]));
+};
+var $author$project$Internal$Material$Icon$search = function (_v0) {
+	var size = _v0.size;
+	var color = _v0.color;
+	return A2(
+		$author$project$Internal$Material$Icon$icon,
+		{color: color, size: size, viewBox: '0 0 48 48'},
+		_List_fromArray(
+			[
+				A2(
+				$elm$svg$Svg$path,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$d('M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z')
+					]),
+				_List_Nil)
+			]));
+};
+var $author$project$Widget$Customize$mapElementTextInput = F2(
+	function (fun, a) {
+		return _Utils_update(
+			a,
+			{
+				elementTextInput: fun(a.elementTextInput)
+			});
+	});
+var $author$project$Widget$Customize$elementTextInput = F2(
+	function (list, a) {
+		return A2(
+			$author$project$Widget$Customize$mapElementTextInput,
+			function (b) {
+				return _Utils_ap(b, list);
+			},
+			a);
+	});
+var $author$project$Widget$Customize$mapElementRow = F2(
+	function (fun, a) {
+		return _Utils_update(
+			a,
+			{
+				elementRow: fun(a.elementRow)
+			});
+	});
+var $mdgriffith$elm_ui$Internal$Model$Max = F2(
+	function (a, b) {
+		return {$: 'Max', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Element$maximum = F2(
+	function (i, l) {
+		return A2($mdgriffith$elm_ui$Internal$Model$Max, i, l);
+	});
+var $author$project$Widget$Material$Color$buttonDisabledOpacity = 0.38;
+var $author$project$Widget$Material$Color$buttonSelectedOpacity = 0.16;
+var $author$project$Internal$Material$Palette$lightGray = function (palette) {
+	return A3($author$project$Widget$Material$Color$withShade, palette.on.surface, 0.14, palette.surface);
+};
+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$rgba255 = F4(
+	function (red, green, blue, a) {
+		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, red / 255, green / 255, blue / 255, a);
+	});
+var $author$project$Widget$Material$Color$shadow = function (_float) {
+	return {
+		blur: _float,
+		color: A4($mdgriffith$elm_ui$Element$rgba255, 0, 0, 0, 0.2),
+		offset: _Utils_Tuple2(0, _float),
+		size: 0
+	};
+};
+var $author$project$Widget$Material$Color$textAndBackground = function (color) {
+	return _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Background$color(
+			$author$project$Widget$Material$Color$fromColor(color)),
+			$mdgriffith$elm_ui$Element$Font$color(
+			$author$project$Widget$Material$Color$fromColor(
+				$author$project$Widget$Material$Color$accessibleTextColor(color)))
+		]);
+};
+var $author$project$Internal$Material$Chip$chip = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(
+							$author$project$Internal$Material$Palette$lightGray(palette)),
+						size: 18
+					},
+					ifDisabled: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(
+							$author$project$Internal$Material$Palette$lightGray(palette)),
+						size: 18
+					},
+					otherwise: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(
+							$author$project$Internal$Material$Palette$lightGray(palette)),
+						size: 18
+					}
+				},
+				text: {contentText: _List_Nil}
+			},
+			elementRow: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$spacing(8),
+					$mdgriffith$elm_ui$Element$paddingEach(
+					{bottom: 0, left: 8, right: 0, top: 0}),
+					$mdgriffith$elm_ui$Element$centerY
+				])
+		},
+		elementButton: _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(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Material$Color$fromColor(
+							A3(
+								$author$project$Widget$Material$Color$withShade,
+								palette.on.surface,
+								$author$project$Widget$Material$Color$buttonPressedOpacity,
+								$author$project$Internal$Material$Palette$lightGray(palette))))
+					])),
+				$mdgriffith$elm_ui$Element$focused(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Material$Color$fromColor(
+							A3(
+								$author$project$Widget$Material$Color$withShade,
+								palette.on.surface,
+								$author$project$Widget$Material$Color$buttonFocusOpacity,
+								$author$project$Internal$Material$Palette$lightGray(palette))))
+					])),
+				$mdgriffith$elm_ui$Element$mouseOver(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Material$Color$fromColor(
+							A3(
+								$author$project$Widget$Material$Color$withShade,
+								palette.on.surface,
+								$author$project$Widget$Material$Color$buttonHoverOpacity,
+								$author$project$Internal$Material$Palette$lightGray(palette))))
+					]))
+			]),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A3(
+						$author$project$Widget$Material$Color$withShade,
+						palette.on.surface,
+						$author$project$Widget$Material$Color$buttonSelectedOpacity,
+						$author$project$Internal$Material$Palette$lightGray(palette)))),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Widget$Material$Color$accessibleTextColor(
+						$author$project$Internal$Material$Palette$lightGray(palette)))),
+				$mdgriffith$elm_ui$Element$Border$shadow(
+				$author$project$Widget$Material$Color$shadow(4))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_Utils_ap(
+				$author$project$Widget$Material$Color$textAndBackground(
+					A3(
+						$author$project$Widget$Material$Color$withShade,
+						palette.on.surface,
+						$author$project$Widget$Material$Color$buttonDisabledOpacity,
+						$author$project$Internal$Material$Palette$lightGray(palette))),
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+						$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+						$mdgriffith$elm_ui$Element$focused(_List_Nil)
+					]))),
+		otherwise: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Internal$Material$Palette$lightGray(palette))),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Widget$Material$Color$accessibleTextColor(
+						$author$project$Internal$Material$Palette$lightGray(palette))))
+			])
+	};
+};
+var $author$project$Internal$Material$TextInput$textInputBase = function (palette) {
+	return {
+		content: {
+			chips: {
+				content: $author$project$Internal$Material$Chip$chip(palette),
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spacing(8)
+					])
+			},
+			text: {
+				elementTextInput: _Utils_ap(
+					$author$project$Widget$Material$Color$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)
+						]))
+			}
+		},
+		elementRow: $author$project$Widget$Material$Color$textAndBackground(palette.surface)
+	};
+};
+var $author$project$Internal$Material$TextInput$searchInput = function (palette) {
+	return A2(
+		$author$project$Widget$Customize$mapContent,
+		function (record) {
+			return _Utils_update(
+				record,
+				{
+					text: A2(
+						$author$project$Widget$Customize$elementTextInput,
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Border$width(0),
+								A2($mdgriffith$elm_ui$Element$paddingXY, 8, 8),
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(32)),
+								$mdgriffith$elm_ui$Element$width(
+								A2($mdgriffith$elm_ui$Element$maximum, 360, $mdgriffith$elm_ui$Element$fill))
+							]),
+						record.text)
+				});
+		},
+		A2(
+			$author$project$Widget$Customize$mapElementRow,
+			$elm$core$Basics$always(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$alignRight,
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 8),
+						$mdgriffith$elm_ui$Element$Border$rounded(4)
+					])),
+			$author$project$Internal$Material$TextInput$textInputBase(palette)));
+};
+var $author$project$Internal$Material$AppBar$internalBar = F2(
+	function (content, palette) {
+		return {
+			content: {
+				actions: {
+					content: {
+						button: A2(
+							$author$project$Widget$Customize$mapContent,
+							$author$project$Widget$Customize$mapContent(
+								function (record) {
+									return _Utils_update(
+										record,
+										{
+											icon: {
+												ifActive: {
+													color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
+													size: record.icon.ifActive.size
+												},
+												ifDisabled: record.icon.ifDisabled,
+												otherwise: {
+													color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
+													size: record.icon.otherwise.size
+												}
+											}
+										});
+								}),
+							$author$project$Internal$Material$Button$iconButton(palette)),
+						moreVerticalIcon: $author$project$Internal$Material$Icon$more_vert,
+						searchIcon: $author$project$Internal$Material$Icon$search
+					},
+					elementRow: _List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$alignRight,
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
+						])
+				},
+				menu: {
+					content: content,
+					elementRow: _List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+							$mdgriffith$elm_ui$Element$spacing(8)
+						])
+				},
+				search: $author$project$Internal$Material$TextInput$searchInput(palette)
+			},
+			elementRow: _Utils_ap(
+				$author$project$Widget$Material$Color$textAndBackground(palette.primary),
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$padding(0),
+						$mdgriffith$elm_ui$Element$spacing(8),
+						$mdgriffith$elm_ui$Element$height(
+						$mdgriffith$elm_ui$Element$px(56)),
+						$mdgriffith$elm_ui$Element$width(
+						A2($mdgriffith$elm_ui$Element$minimum, 360, $mdgriffith$elm_ui$Element$fill))
+					]))
+		};
+	});
+var $author$project$Internal$Material$Icon$menu = function (_v0) {
+	var size = _v0.size;
+	var color = _v0.color;
+	return A2(
+		$author$project$Internal$Material$Icon$icon,
+		{color: color, size: size, viewBox: '0 0 48 48'},
+		_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$Internal$Material$AppBar$menuBar = $author$project$Internal$Material$AppBar$internalBar(
+	{
+		menuIcon: $author$project$Internal$Material$Icon$menu,
+		title: _Utils_ap(
+			$author$project$Widget$Material$Typography$h6,
+			_List_fromArray(
+				[
+					A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+				]))
+	});
+var $author$project$Widget$Material$menuBar = $author$project$Internal$Material$AppBar$menuBar;
+var $elm$core$List$singleton = function (value) {
+	return _List_fromArray(
+		[value]);
+};
+var $author$project$UIExplorer$ChangeDarkTheme = function (a) {
+	return {$: 'ChangeDarkTheme', a: a};
+};
+var $author$project$UIExplorer$TypingSearchText = function (a) {
+	return {$: 'TypingSearchText', a: a};
+};
+var $author$project$Internal$Item$toItem = F2(
+	function (style, element) {
+		return function (attr) {
+			return A2(
+				$mdgriffith$elm_ui$Element$el,
+				_Utils_ap(attr, style.element),
+				element(style.content));
+		};
+	});
+var $author$project$Internal$Item$asItem = function (element) {
+	return A2(
+		$author$project$Internal$Item$toItem,
+		{content: _Utils_Tuple0, element: _List_Nil},
+		$elm$core$Basics$always(element));
+};
+var $author$project$Widget$asItem = $author$project$Internal$Item$asItem;
+var $author$project$UIExplorer$PressedColorBlindOption = function (a) {
+	return {$: 'PressedColorBlindOption', a: a};
+};
+var $author$project$UIExplorer$ToggledColorBlindGroup = {$: 'ToggledColorBlindGroup'};
+var $author$project$UIExplorer$colorBlindOptionToString = function (colorBlindOption) {
+	switch (colorBlindOption.$) {
+		case 'Protanopia':
+			return 'Protanopia';
+		case 'Protanomaly':
+			return 'Protanomaly';
+		case 'Deuteranopia':
+			return 'Deuteranopia';
+		case 'Deuteranomaly':
+			return 'Deuteranomaly';
+		case 'Tritanopia':
+			return 'Tritanopia';
+		case 'Tritanomaly':
+			return 'Tritanomaly';
+		case 'Achromatopsia':
+			return 'Achromatopsia';
+		case 'Achromatomaly':
+			return 'Achromatomaly';
+		default:
+			return 'Blind';
+	}
+};
+var $author$project$UIExplorer$darkerGray = A3($mdgriffith$elm_ui$Element$rgb255, 20, 30, 40);
+var $mdgriffith$elm_ui$Internal$Model$Paragraph = {$: 'Paragraph'};
+var $mdgriffith$elm_ui$Element$paragraph = F2(
+	function (attrs, children) {
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asParagraph,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$Paragraph),
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$spacing(5),
+						attrs))),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
+	});
+var $author$project$Internal$Item$insetItem = F2(
+	function (s, _v0) {
+		var onPress = _v0.onPress;
+		var text = _v0.text;
+		var icon = _v0.icon;
+		var content = _v0.content;
+		return A2(
+			$author$project$Internal$Item$toItem,
+			s,
+			function (style) {
+				return A2(
+					$mdgriffith$elm_ui$Element$Input$button,
+					_Utils_ap(
+						style.elementButton,
+						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
+					{
+						label: A2(
+							$mdgriffith$elm_ui$Element$row,
+							style.content.elementRow,
+							_List_fromArray(
+								[
+									A2(
+									$mdgriffith$elm_ui$Element$el,
+									style.content.content.icon.element,
+									icon(style.content.content.icon.content)),
+									A2(
+									$mdgriffith$elm_ui$Element$el,
+									style.content.content.text.elementText,
+									A2(
+										$mdgriffith$elm_ui$Element$paragraph,
+										_List_Nil,
+										$elm$core$List$singleton(
+											$mdgriffith$elm_ui$Element$text(text)))),
+									content(style.content.content.content)
+								])),
+						onPress: onPress
+					});
+			});
+	});
+var $author$project$Internal$Item$expansionItem = F2(
+	function (s, _v0) {
+		var icon = _v0.icon;
+		var text = _v0.text;
+		var onToggle = _v0.onToggle;
+		var content = _v0.content;
+		var isExpanded = _v0.isExpanded;
+		return A2(
+			$elm$core$List$cons,
+			A2(
+				$author$project$Internal$Item$insetItem,
+				s.item,
+				{
+					content: isExpanded ? s.collapseIcon : s.expandIcon,
+					icon: icon,
+					onPress: $elm$core$Maybe$Just(
+						onToggle(!isExpanded)),
+					text: text
+				}),
+			isExpanded ? content : _List_Nil);
+	});
+var $author$project$Widget$expansionItem = function () {
+	var fun = $author$project$Internal$Item$expansionItem;
+	return fun;
+}();
+var $author$project$Internal$Material$Icon$expand_less = function (_v0) {
+	var size = _v0.size;
+	var color = _v0.color;
+	return A2(
+		$author$project$Internal$Material$Icon$icon,
+		{color: color, size: size, viewBox: '0 0 48 48'},
+		_List_fromArray(
+			[
+				A2(
+				$elm$svg$Svg$path,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$d('M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z')
+					]),
+				_List_Nil)
+			]));
+};
+var $author$project$Internal$Material$Icon$expand_more = function (_v0) {
+	var size = _v0.size;
+	var color = _v0.color;
+	return A2(
+		$author$project$Internal$Material$Icon$icon,
+		{color: color, size: size, viewBox: '0 0 48 48'},
+		_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$Internal$Material$Item$insetItem = function (palette) {
+	return {
+		content: {
+			content: {
+				content: {
+					content: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 24
+					},
+					icon: {
+						content: {
+							color: $author$project$Internal$Material$Palette$gray(palette),
+							size: 24
+						},
+						element: _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width(
+								$mdgriffith$elm_ui$Element$px(40)),
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(24))
+							])
+					},
+					text: {
+						elementText: _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+							])
+					}
+				},
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spacing(16),
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+					])
+			},
+			elementButton: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$padding(16)
+				]),
+			ifDisabled: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$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', 'default'))
+				]),
+			otherwise: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonPressedOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonFocusOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonHoverOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						]))
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$padding(0)
+			])
+	};
+};
+var $author$project$Internal$Material$Item$expansionItem = function (palette) {
+	return {
+		collapseIcon: $author$project$Internal$Material$Icon$expand_less,
+		expandIcon: $author$project$Internal$Material$Icon$expand_more,
+		item: $author$project$Internal$Material$Item$insetItem(palette)
+	};
+};
+var $author$project$Widget$Material$expansionItem = $author$project$Internal$Material$Item$expansionItem;
+var $author$project$Widget$insetItem = function () {
+	var fun = $author$project$Internal$Item$insetItem;
+	return fun;
+}();
+var $author$project$Widget$Material$insetItem = $author$project$Internal$Material$Item$insetItem;
+var $author$project$UIExplorer$lightBlue = A3($mdgriffith$elm_ui$Element$rgb255, 176, 208, 225);
+var $author$project$UIExplorer$optionGroupView = F7(
+	function (dark, isExpanded, selectedItem, items, itemToString, onPress, toggleExpand) {
+		var palette = dark ? $author$project$Widget$Material$darkPalette : $author$project$Widget$Material$defaultPalette;
+		var _v0 = dark ? $author$project$UIExplorer$darkerGray : $author$project$UIExplorer$lightBlue;
+		return A2(
+			$author$project$Widget$expansionItem,
+			$author$project$Widget$Material$expansionItem(palette),
+			{
+				content: A2(
+					$elm$core$List$map,
+					function (option) {
+						return A2(
+							$author$project$Widget$insetItem,
+							$author$project$Widget$Material$insetItem(palette),
+							{
+								content: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								onPress: $elm$core$Maybe$Just(
+									onPress(option)),
+								text: itemToString(option)
+							});
+					},
+					isExpanded ? items : _List_Nil),
+				icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+				isExpanded: isExpanded,
+				onToggle: $elm$core$Basics$always(toggleExpand),
+				text: itemToString(selectedItem)
+			});
+	});
+var $author$project$UIExplorer$colorBlindOptionView = F3(
+	function (dark, isExpanded, selectedColorBlindOption) {
+		return A7(
+			$author$project$UIExplorer$optionGroupView,
+			dark,
+			isExpanded,
+			selectedColorBlindOption,
+			A2(
+				$elm$core$List$cons,
+				$elm$core$Maybe$Nothing,
+				A2($elm$core$List$map, $elm$core$Maybe$Just, $author$project$UIExplorer$allColorBlindOptions)),
+			A2(
+				$elm$core$Basics$composeR,
+				$elm$core$Maybe$map($author$project$UIExplorer$colorBlindOptionToString),
+				$elm$core$Maybe$withDefault('No color blindness')),
+			$author$project$UIExplorer$PressedColorBlindOption,
+			$author$project$UIExplorer$ToggledColorBlindGroup);
+	});
+var $author$project$Widget$Material$Typography$subtitle2 = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Font$size(14),
+		$mdgriffith$elm_ui$Element$Font$semiBold,
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.1)
+	]);
+var $mdgriffith$elm_ui$Element$Border$widthXY = F2(
+	function (x, y) {
+		return A2(
+			$mdgriffith$elm_ui$Internal$Model$StyleClass,
+			$mdgriffith$elm_ui$Internal$Flag$borderWidth,
+			A5(
+				$mdgriffith$elm_ui$Internal$Model$BorderWidth,
+				'b-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y))),
+				y,
+				x,
+				y,
+				x));
+	});
+var $mdgriffith$elm_ui$Element$Border$widthEach = function (_v0) {
+	var bottom = _v0.bottom;
+	var top = _v0.top;
+	var left = _v0.left;
+	var right = _v0.right;
+	return (_Utils_eq(top, bottom) && _Utils_eq(left, right)) ? (_Utils_eq(top, right) ? $mdgriffith$elm_ui$Element$Border$width(top) : A2($mdgriffith$elm_ui$Element$Border$widthXY, left, top)) : A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$borderWidth,
+		A5(
+			$mdgriffith$elm_ui$Internal$Model$BorderWidth,
+			'b-' + ($elm$core$String$fromInt(top) + ('-' + ($elm$core$String$fromInt(right) + ('-' + ($elm$core$String$fromInt(bottom) + ('-' + $elm$core$String$fromInt(left))))))),
+			top,
+			right,
+			bottom,
+			left));
+};
+var $author$project$Internal$Material$Item$fullBleedHeader = function (palette) {
+	return {
+		content: {
+			content: {
+				divider: {element: _List_Nil},
+				title: _Utils_ap(
+					$author$project$Widget$Material$Typography$subtitle2,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Font$color(
+							$author$project$Widget$Material$Color$fromColor(
+								$author$project$Internal$Material$Palette$gray(palette))),
+							A2($mdgriffith$elm_ui$Element$paddingXY, 16, 8)
+						]))
+			},
+			elementColumn: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$spacing(8)
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+				$mdgriffith$elm_ui$Element$padding(0),
+				$mdgriffith$elm_ui$Element$Border$widthEach(
+				{bottom: 0, left: 0, right: 0, top: 1}),
+				$mdgriffith$elm_ui$Element$Border$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Internal$Material$Palette$lightGray(palette)))
+			])
+	};
+};
+var $author$project$Widget$Material$fullBleedHeader = $author$project$Internal$Material$Item$fullBleedHeader;
+var $author$project$Internal$Item$headerItem = F2(
+	function (style, title) {
+		return A2(
+			$author$project$Internal$Item$toItem,
+			style,
+			function (_v0) {
+				var elementColumn = _v0.elementColumn;
+				var content = _v0.content;
+				return A2(
+					$mdgriffith$elm_ui$Element$column,
+					elementColumn,
+					_List_fromArray(
+						[
+							A2($mdgriffith$elm_ui$Element$el, content.divider.element, $mdgriffith$elm_ui$Element$none),
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							content.title,
+							$mdgriffith$elm_ui$Element$text(title))
+						]));
+			});
+	});
+var $author$project$Widget$headerItem = $author$project$Internal$Item$headerItem;
+var $author$project$Internal$List$internal = F2(
+	function (style, list) {
+		return A2(
+			$elm$core$List$indexedMap,
+			F2(
+				function (i, fun) {
+					return fun(
+						_Utils_ap(
+							style.element,
+							($elm$core$List$length(list) === 1) ? style.ifSingleton : ((!i) ? style.ifFirst : (_Utils_eq(
+								i,
+								$elm$core$List$length(list) - 1) ? style.ifLast : style.otherwise))));
+				}),
+			list);
+	});
+var $author$project$Internal$List$itemList = function (style) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$author$project$Internal$List$internal(style.content),
+		$mdgriffith$elm_ui$Element$column(style.elementColumn));
+};
+var $author$project$Widget$itemList = function () {
+	var fun = $author$project$Internal$List$itemList;
+	return fun;
+}();
+var $mdgriffith$elm_ui$Element$Lazy$embed = function (x) {
+	switch (x.$) {
+		case 'Unstyled':
+			var html = x.a;
+			return html;
+		case 'Styled':
+			var styled = x.a;
+			return styled.html(
+				A2(
+					$mdgriffith$elm_ui$Internal$Model$OnlyDynamic,
+					{
+						focus: {backgroundColor: $elm$core$Maybe$Nothing, borderColor: $elm$core$Maybe$Nothing, shadow: $elm$core$Maybe$Nothing},
+						hover: $mdgriffith$elm_ui$Internal$Model$AllowHover,
+						mode: $mdgriffith$elm_ui$Internal$Model$Layout
+					},
+					styled.styles));
+		case 'Text':
+			var text = x.a;
+			return $elm$core$Basics$always(
+				$elm$virtual_dom$VirtualDom$text(text));
+		default:
+			return $elm$core$Basics$always(
+				$elm$virtual_dom$VirtualDom$text(''));
+	}
+};
+var $mdgriffith$elm_ui$Element$Lazy$apply5 = F6(
+	function (fn, a, b, c, d, e) {
+		return $mdgriffith$elm_ui$Element$Lazy$embed(
+			A5(fn, a, b, c, d, e));
+	});
+var $elm$virtual_dom$VirtualDom$lazy7 = _VirtualDom_lazy7;
+var $mdgriffith$elm_ui$Element$Lazy$lazy5 = F6(
+	function (fn, a, b, c, d, e) {
+		return $mdgriffith$elm_ui$Internal$Model$Unstyled(
+			A7($elm$virtual_dom$VirtualDom$lazy7, $mdgriffith$elm_ui$Element$Lazy$apply5, fn, a, b, c, d, e));
+	});
+var $author$project$Internal$Material$List$sideSheet = function (palette) {
+	return {
+		content: {
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette)))
+				]),
+			ifFirst: _List_Nil,
+			ifLast: _List_Nil,
+			ifSingleton: _List_Nil,
+			otherwise: _List_Nil
+		},
+		elementColumn: _Utils_ap(
+			$author$project$Widget$Material$Color$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$height($mdgriffith$elm_ui$Element$fill),
+					A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette)))
+				]))
+	};
+};
+var $author$project$Widget$Material$sideSheet = $author$project$Internal$Material$List$sideSheet;
+var $author$project$Internal$Switch$switch = F2(
+	function (style, _v0) {
+		var onPress = _v0.onPress;
+		var description = _v0.description;
+		var active = _v0.active;
+		return A2(
+			$mdgriffith$elm_ui$Element$Input$button,
+			_Utils_ap(
+				style.elementButton,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Region$description(description),
+						$mdgriffith$elm_ui$Element$inFront(
+						A2(
+							$mdgriffith$elm_ui$Element$el,
+							_Utils_ap(
+								style.contentInFront.element,
+								active ? style.contentInFront.ifActive : (_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.contentInFront.ifDisabled : style.contentInFront.otherwise)),
+							A2(
+								$mdgriffith$elm_ui$Element$el,
+								_Utils_ap(
+									style.contentInFront.content.element,
+									active ? style.contentInFront.content.ifActive : (_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.contentInFront.content.ifDisabled : style.contentInFront.content.otherwise)),
+								$mdgriffith$elm_ui$Element$none)))
+					])),
+			{
+				label: A2(
+					$mdgriffith$elm_ui$Element$el,
+					_Utils_ap(
+						style.content.element,
+						active ? style.content.ifActive : (_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.content.ifDisabled : style.content.otherwise)),
+					$mdgriffith$elm_ui$Element$none),
+				onPress: onPress
+			});
+	});
+var $author$project$Widget$switch = function () {
+	var fun = $author$project$Internal$Switch$switch;
+	return fun;
+}();
+var $mdgriffith$elm_ui$Internal$Model$Left = {$: 'Left'};
+var $mdgriffith$elm_ui$Element$alignLeft = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$Left);
+var $avh4$elm_color$Color$gray = A4($avh4$elm_color$Color$RgbaSpace, 211 / 255, 215 / 255, 207 / 255, 1.0);
+var $mdgriffith$elm_ui$Internal$Model$MoveX = function (a) {
+	return {$: 'MoveX', a: a};
+};
+var $mdgriffith$elm_ui$Internal$Flag$moveX = $mdgriffith$elm_ui$Internal$Flag$flag(25);
+var $mdgriffith$elm_ui$Element$moveLeft = function (x) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$TransformComponent,
+		$mdgriffith$elm_ui$Internal$Flag$moveX,
+		$mdgriffith$elm_ui$Internal$Model$MoveX(-x));
+};
+var $mdgriffith$elm_ui$Element$moveRight = function (x) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$TransformComponent,
+		$mdgriffith$elm_ui$Internal$Flag$moveX,
+		$mdgriffith$elm_ui$Internal$Model$MoveX(x));
+};
+var $author$project$Internal$Material$Switch$switch = function (palette) {
+	return {
+		content: {
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(14)),
+					$mdgriffith$elm_ui$Element$width(
+					$mdgriffith$elm_ui$Element$px(34)),
+					$mdgriffith$elm_ui$Element$centerY,
+					$mdgriffith$elm_ui$Element$centerX,
+					$mdgriffith$elm_ui$Element$Border$rounded(10)
+				]),
+			ifActive: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A2($author$project$Widget$Material$Color$scaleOpacity, 0.5, palette.primary)))
+				]),
+			ifDisabled: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$htmlAttribute(
+					A2($elm$html$Html$Attributes$style, 'cursor', 'not-allowed')),
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A3(
+							$author$project$Widget$Material$Color$withShade,
+							$author$project$Internal$Material$Palette$gray(palette),
+							0.5 * $author$project$Widget$Material$Color$buttonDisabledOpacity,
+							palette.surface)))
+				]),
+			otherwise: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A2(
+							$author$project$Widget$Material$Color$scaleOpacity,
+							0.5,
+							$author$project$Internal$Material$Palette$gray(palette))))
+				])
+		},
+		contentInFront: {
+			content: {
+				element: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$height(
+						$mdgriffith$elm_ui$Element$px(20)),
+						$mdgriffith$elm_ui$Element$width(
+						$mdgriffith$elm_ui$Element$px(20)),
+						$mdgriffith$elm_ui$Element$centerY,
+						$mdgriffith$elm_ui$Element$centerX,
+						$mdgriffith$elm_ui$Element$Border$rounded(10),
+						$mdgriffith$elm_ui$Element$Border$shadow(
+						$author$project$Widget$Material$Color$shadow(2)),
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Material$Color$fromColor(palette.surface))
+					]),
+				ifActive: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Material$Color$fromColor(
+							A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+					]),
+				ifDisabled: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Material$Color$fromColor(
+							A3($author$project$Widget$Material$Color$withShade, $avh4$elm_color$Color$gray, $author$project$Widget$Material$Color$buttonDisabledOpacity, palette.surface))),
+						$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+						$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+						$mdgriffith$elm_ui$Element$focused(_List_Nil)
+					]),
+				otherwise: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Material$Color$fromColor(
+							A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface)))
+					])
+			},
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(38)),
+					$mdgriffith$elm_ui$Element$width(
+					$mdgriffith$elm_ui$Element$px(38)),
+					$mdgriffith$elm_ui$Element$Border$rounded(19)
+				]),
+			ifActive: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$alignRight,
+					$mdgriffith$elm_ui$Element$moveRight(8)
+				]),
+			ifDisabled: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$htmlAttribute(
+					A2($elm$html$Html$Attributes$style, 'cursor', 'not-allowed'))
+				]),
+			otherwise: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, $avh4$elm_color$Color$gray)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, $avh4$elm_color$Color$gray)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, $avh4$elm_color$Color$gray)))
+						])),
+					$mdgriffith$elm_ui$Element$alignLeft,
+					$mdgriffith$elm_ui$Element$moveLeft(8)
+				])
+		},
+		elementButton: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(38)),
+				$mdgriffith$elm_ui$Element$width(
+				$mdgriffith$elm_ui$Element$px(58 - 18)),
+				$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+				$mdgriffith$elm_ui$Element$focused(_List_Nil),
+				$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
+			])
+	};
+};
+var $author$project$Widget$Material$switch = $author$project$Internal$Material$Switch$switch;
+var $author$project$Widget$textInput = function () {
+	var fun = $author$project$Internal$TextInput$textInput;
+	return fun;
+}();
+var $author$project$Internal$Material$TextInput$textInput = function (palette) {
+	return {
+		content: {
+			chips: {
+				content: $author$project$Internal$Material$Chip$chip(palette),
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spacing(8)
+					])
+			},
+			text: {
+				elementTextInput: _Utils_ap(
+					$author$project$Widget$Material$Color$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),
+							$mdgriffith$elm_ui$Element$centerY
+						]))
+			}
+		},
+		elementRow: _Utils_ap(
+			$author$project$Widget$Material$Color$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$Material$Color$fromColor(
+						A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Material$Color$shadow(4)),
+							$mdgriffith$elm_ui$Element$Border$color(
+							$author$project$Widget$Material$Color$fromColor(palette.primary))
+						])),
+					$mdgriffith$elm_ui$Element$width(
+					$mdgriffith$elm_ui$Element$px(280)),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Material$Color$shadow(2))
+						]))
+				]))
+	};
+};
+var $author$project$Widget$Material$textInput = $author$project$Internal$Material$TextInput$textInput;
+var $author$project$UIExplorer$Load = function (a) {
+	return {$: 'Load', a: a};
+};
+var $elm$core$Array$fromListHelp = F3(
+	function (list, nodeList, nodeListSize) {
+		fromListHelp:
+		while (true) {
+			var _v0 = A2($elm$core$Elm$JsArray$initializeFromList, $elm$core$Array$branchFactor, list);
+			var jsArray = _v0.a;
+			var remainingItems = _v0.b;
+			if (_Utils_cmp(
+				$elm$core$Elm$JsArray$length(jsArray),
+				$elm$core$Array$branchFactor) < 0) {
+				return A2(
+					$elm$core$Array$builderToArray,
+					true,
+					{nodeList: nodeList, nodeListSize: nodeListSize, tail: jsArray});
+			} else {
+				var $temp$list = remainingItems,
+					$temp$nodeList = A2(
+					$elm$core$List$cons,
+					$elm$core$Array$Leaf(jsArray),
+					nodeList),
+					$temp$nodeListSize = nodeListSize + 1;
+				list = $temp$list;
+				nodeList = $temp$nodeList;
+				nodeListSize = $temp$nodeListSize;
+				continue fromListHelp;
+			}
+		}
+	});
+var $elm$core$Array$fromList = function (list) {
+	if (!list.b) {
+		return $elm$core$Array$empty;
+	} else {
+		return A3($elm$core$Array$fromListHelp, list, _List_Nil, 0);
+	}
+};
+var $elm$core$Array$filter = F2(
+	function (isGood, array) {
+		return $elm$core$Array$fromList(
+			A3(
+				$elm$core$Array$foldr,
+				F2(
+					function (x, xs) {
+						return isGood(x) ? A2($elm$core$List$cons, x, xs) : xs;
+					}),
+				_List_Nil,
+				array));
+	});
+var $elm$core$Bitwise$shiftRightZfBy = _Bitwise_shiftRightZfBy;
+var $elm$core$Array$bitMask = 4294967295 >>> (32 - $elm$core$Array$shiftStep);
+var $elm$core$Elm$JsArray$unsafeGet = _JsArray_unsafeGet;
+var $elm$core$Array$getHelp = F3(
+	function (shift, index, tree) {
+		getHelp:
+		while (true) {
+			var pos = $elm$core$Array$bitMask & (index >>> shift);
+			var _v0 = A2($elm$core$Elm$JsArray$unsafeGet, pos, tree);
+			if (_v0.$ === 'SubTree') {
+				var subTree = _v0.a;
+				var $temp$shift = shift - $elm$core$Array$shiftStep,
+					$temp$index = index,
+					$temp$tree = subTree;
+				shift = $temp$shift;
+				index = $temp$index;
+				tree = $temp$tree;
+				continue getHelp;
+			} else {
+				var values = _v0.a;
+				return A2($elm$core$Elm$JsArray$unsafeGet, $elm$core$Array$bitMask & index, values);
+			}
+		}
+	});
+var $elm$core$Array$tailIndex = function (len) {
+	return (len >>> 5) << 5;
+};
+var $elm$core$Array$get = F2(
+	function (index, _v0) {
+		var len = _v0.a;
+		var startShift = _v0.b;
+		var tree = _v0.c;
+		var tail = _v0.d;
+		return ((index < 0) || (_Utils_cmp(index, len) > -1)) ? $elm$core$Maybe$Nothing : ((_Utils_cmp(
+			index,
+			$elm$core$Array$tailIndex(len)) > -1) ? $elm$core$Maybe$Just(
+			A2($elm$core$Elm$JsArray$unsafeGet, $elm$core$Array$bitMask & index, tail)) : $elm$core$Maybe$Just(
+			A3($elm$core$Array$getHelp, startShift, index, tree)));
+	});
+var $elm$core$Elm$JsArray$foldl = _JsArray_foldl;
+var $elm$core$Elm$JsArray$indexedMap = _JsArray_indexedMap;
+var $elm$core$Array$indexedMap = F2(
+	function (func, _v0) {
+		var len = _v0.a;
+		var tree = _v0.c;
+		var tail = _v0.d;
+		var initialBuilder = {
+			nodeList: _List_Nil,
+			nodeListSize: 0,
+			tail: A3(
+				$elm$core$Elm$JsArray$indexedMap,
+				func,
+				$elm$core$Array$tailIndex(len),
+				tail)
+		};
+		var helper = F2(
+			function (node, builder) {
+				if (node.$ === 'SubTree') {
+					var subTree = node.a;
+					return A3($elm$core$Elm$JsArray$foldl, helper, builder, subTree);
+				} else {
+					var leaf = node.a;
+					var offset = builder.nodeListSize * $elm$core$Array$branchFactor;
+					var mappedLeaf = $elm$core$Array$Leaf(
+						A3($elm$core$Elm$JsArray$indexedMap, func, offset, leaf));
+					return {
+						nodeList: A2($elm$core$List$cons, mappedLeaf, builder.nodeList),
+						nodeListSize: builder.nodeListSize + 1,
+						tail: builder.tail
+					};
+				}
+			});
+		return A2(
+			$elm$core$Array$builderToArray,
+			true,
+			A3($elm$core$Elm$JsArray$foldl, helper, initialBuilder, tree));
+	});
+var $author$project$UIExplorer$listNeighborsHelper = F3(
+	function (list, _v0, newList) {
+		listNeighborsHelper:
+		while (true) {
+			var current = _v0.current;
+			var next = _v0.next;
+			if (list.b) {
+				var head = list.a;
+				var rest = list.b;
+				var newState = {
+					current: next,
+					next: $elm$core$Maybe$Just(head),
+					previous: current
+				};
+				if (next.$ === 'Just') {
+					var next_ = next.a;
+					var $temp$list = rest,
+						$temp$_v0 = newState,
+						$temp$newList = A2(
+						$elm$core$List$cons,
+						{
+							current: next_,
+							next: $elm$core$Maybe$Just(head),
+							previous: current
+						},
+						newList);
+					list = $temp$list;
+					_v0 = $temp$_v0;
+					newList = $temp$newList;
+					continue listNeighborsHelper;
+				} else {
+					var $temp$list = rest,
+						$temp$_v0 = newState,
+						$temp$newList = newList;
+					list = $temp$list;
+					_v0 = $temp$_v0;
+					newList = $temp$newList;
+					continue listNeighborsHelper;
+				}
+			} else {
+				if (next.$ === 'Just') {
+					var next_ = next.a;
+					return A2(
+						$elm$core$List$cons,
+						{current: next_, next: $elm$core$Maybe$Nothing, previous: current},
+						newList);
+				} else {
+					return newList;
+				}
+			}
+		}
+	});
+var $author$project$UIExplorer$listNeighbors = function (list) {
+	return $elm$core$List$reverse(
+		A3(
+			$author$project$UIExplorer$listNeighborsHelper,
+			list,
+			{current: $elm$core$Maybe$Nothing, next: $elm$core$Maybe$Nothing, previous: $elm$core$Maybe$Nothing},
+			_List_Nil));
+};
+var $elm$core$Tuple$pair = F2(
+	function (a, b) {
+		return _Utils_Tuple2(a, b);
+	});
+var $author$project$Internal$Select$select = function (_v0) {
+	var selected = _v0.selected;
+	var options = _v0.options;
+	var onSelect = _v0.onSelect;
+	return A2(
+		$elm$core$List$indexedMap,
+		F2(
+			function (i, a) {
+				return _Utils_Tuple2(
+					_Utils_eq(
+						selected,
+						$elm$core$Maybe$Just(i)),
+					{
+						icon: a.icon,
+						onPress: onSelect(i),
+						text: a.text
+					});
+			}),
+		options);
+};
+var $author$project$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.elementButton,
+				_Utils_ap(
+					_Utils_eq(b.onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : (selected ? style.ifActive : style.otherwise),
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Region$description(b.text)
+						]))),
+			{
+				label: A2(
+					$mdgriffith$elm_ui$Element$row,
+					style.content.elementRow,
+					_List_fromArray(
+						[
+							b.icon(
+							_Utils_eq(b.onPress, $elm$core$Maybe$Nothing) ? style.content.content.icon.ifDisabled : (selected ? style.content.content.icon.ifActive : style.content.content.icon.otherwise)),
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							style.content.content.text.contentText,
+							$mdgriffith$elm_ui$Element$text(b.text))
+						])),
+				onPress: b.onPress
+			});
+	});
+var $author$project$Internal$Item$selectItem = F2(
+	function (s, select) {
+		return A2(
+			$elm$core$List$map,
+			function (b) {
+				return A2(
+					$author$project$Internal$Item$toItem,
+					s,
+					function (style) {
+						return A2($author$project$Internal$Select$selectButton, style, b);
+					});
+			},
+			$author$project$Internal$Select$select(select));
+	});
+var $author$project$Widget$selectItem = $author$project$Internal$Item$selectItem;
+var $author$project$Internal$Material$Item$selectItem = function (palette) {
+	return {
+		content: {
+			content: {
+				content: {
+					icon: {
+						ifActive: {
+							color: $author$project$Widget$Material$Color$accessibleTextColor(palette.surface),
+							size: 18
+						},
+						ifDisabled: {
+							color: $author$project$Internal$Material$Palette$gray(palette),
+							size: 18
+						},
+						otherwise: {
+							color: $author$project$Widget$Material$Color$accessibleTextColor(palette.surface),
+							size: 18
+						}
+					},
+					text: {
+						contentText: _List_fromArray(
+							[$mdgriffith$elm_ui$Element$centerX])
+					}
+				},
+				elementRow: _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
+					])
+			},
+			elementButton: _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$Material$Color$fromColor(
+						$author$project$Widget$Material$Color$accessibleTextColor(palette.surface))),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+						]))
+				]),
+			ifActive: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary))),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(palette.primary))
+				]),
+			ifDisabled: _Utils_ap(
+				$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Font$color(
+						$author$project$Widget$Material$Color$fromColor(
+							$author$project$Internal$Material$Palette$gray(palette))),
+						$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+						$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+						$mdgriffith$elm_ui$Element$focused(_List_Nil)
+					])),
+			otherwise: _List_Nil
+		},
+		element: _List_fromArray(
+			[
+				A2($mdgriffith$elm_ui$Element$paddingXY, 8, 4)
+			])
+	};
+};
+var $author$project$Widget$Material$selectItem = $author$project$Internal$Material$Item$selectItem;
+var $elm$core$List$sortBy = _List_sortBy;
+var $elm$core$List$sort = function (xs) {
+	return A2($elm$core$List$sortBy, $elm$core$Basics$identity, xs);
+};
+var $author$project$UIExplorer$viewSearchResults = F5(
+	function (dark, _v0, config, currentPage, searchText) {
+		var pages = _v0.a;
+		var palette = dark ? $author$project$Widget$Material$darkPalette : $author$project$Widget$Material$defaultPalette;
+		var options = $elm$core$Array$fromList(
+			$author$project$UIExplorer$listNeighbors(
+				$elm$core$List$sort(
+					A2(
+						$elm$core$List$filterMap,
+						function (_v1) {
+							var pageId = _v1.pageId;
+							var pageGroup = _v1.pageGroup;
+							return A2(
+								$elm$core$String$contains,
+								$elm$core$String$toLower(searchText),
+								$elm$core$String$toLower(
+									A2($elm$core$String$join, ' ', pageGroup) + (' ' + pageId))) ? $elm$core$Maybe$Just(
+								_Utils_ap(
+									pageGroup,
+									_List_fromArray(
+										[pageId]))) : $elm$core$Maybe$Nothing;
+						},
+						pages.ids))));
+		return A2(
+			$author$project$Widget$itemList,
+			$author$project$Widget$Material$sideSheet(palette),
+			A2(
+				$author$project$Widget$selectItem,
+				$author$project$Widget$Material$selectItem(palette),
+				{
+					onSelect: function (_int) {
+						return $elm$core$Maybe$Just(
+							$author$project$UIExplorer$Load(
+								A2(
+									$author$project$UIExplorer$uiUrl,
+									config.relativeUrlPath,
+									A2(
+										$elm$core$Maybe$withDefault,
+										_List_Nil,
+										A2(
+											$elm$core$Maybe$map,
+											function ($) {
+												return $.current;
+											},
+											A2($elm$core$Array$get, _int, options))))));
+					},
+					options: A2(
+						$elm$core$List$filterMap,
+						A2(
+							$elm$core$Basics$composeR,
+							function ($) {
+								return $.current;
+							},
+							A2(
+								$elm$core$Basics$composeR,
+								$elm$core$List$reverse,
+								A2(
+									$elm$core$Basics$composeR,
+									$elm$core$List$head,
+									$elm$core$Maybe$map(
+										function (text) {
+											return {
+												icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+												text: text
+											};
+										})))),
+						$elm$core$Array$toList(options)),
+					selected: A2(
+						$elm$core$Maybe$map,
+						$elm$core$Tuple$first,
+						A2(
+							$elm$core$Array$get,
+							0,
+							A2(
+								$elm$core$Array$filter,
+								A2(
+									$elm$core$Basics$composeR,
+									$elm$core$Tuple$second,
+									A2(
+										$elm$core$Basics$composeR,
+										function ($) {
+											return $.current;
+										},
+										$elm$core$Basics$eq(currentPage))),
+								A2($elm$core$Array$indexedMap, $elm$core$Tuple$pair, options))))
+				}));
+	});
+var $author$project$UIExplorer$Group = function (a) {
+	return {$: 'Group', a: a};
+};
+var $author$project$UIExplorer$TempLeaf = function (a) {
+	return {$: 'TempLeaf', a: a};
+};
+var $elm$core$List$partition = F2(
+	function (pred, list) {
+		var step = F2(
+			function (x, _v0) {
+				var trues = _v0.a;
+				var falses = _v0.b;
+				return pred(x) ? _Utils_Tuple2(
+					A2($elm$core$List$cons, x, trues),
+					falses) : _Utils_Tuple2(
+					trues,
+					A2($elm$core$List$cons, x, falses));
+			});
+		return A3(
+			$elm$core$List$foldr,
+			step,
+			_Utils_Tuple2(_List_Nil, _List_Nil),
+			list);
+	});
+var $author$project$UIExplorer$gatherWith = F2(
+	function (testFn, list) {
+		var helper = F2(
+			function (scattered, gathered) {
+				if (!scattered.b) {
+					return $elm$core$List$reverse(gathered);
+				} else {
+					var toGather = scattered.a;
+					var population = scattered.b;
+					var _v1 = A2(
+						$elm$core$List$partition,
+						testFn(toGather),
+						population);
+					var gathering = _v1.a;
+					var remaining = _v1.b;
+					return A2(
+						helper,
+						remaining,
+						A2(
+							$elm$core$List$cons,
+							_Utils_Tuple2(toGather, gathering),
+							gathered));
+				}
+			});
+		return A2(helper, list, _List_Nil);
+	});
+var $zwilias$elm_rosetree$Tree$Tree = F2(
+	function (a, b) {
+		return {$: 'Tree', a: a, b: b};
+	});
+var $zwilias$elm_rosetree$Tree$singleton = function (v) {
+	return A2($zwilias$elm_rosetree$Tree$Tree, v, _List_Nil);
+};
+var $zwilias$elm_rosetree$Tree$tree = $zwilias$elm_rosetree$Tree$Tree;
+var $author$project$UIExplorer$buildTree = function (items) {
+	var helper = function (items_) {
+		return A2(
+			$elm$core$List$map,
+			function (_v2) {
+				var head = _v2.a;
+				var rest = _v2.b;
+				if (head.$ === 'TempLeaf') {
+					var leaf = head.a;
+					return $zwilias$elm_rosetree$Tree$singleton(leaf);
+				} else {
+					var pageGroupHead = head.a.pageGroupHead;
+					return A2(
+						$zwilias$elm_rosetree$Tree$tree,
+						pageGroupHead,
+						helper(
+							A2(
+								$elm$core$List$filterMap,
+								function (a) {
+									if (a.$ === 'Group') {
+										var pageId = a.a.pageId;
+										var pageGroup = a.a.pageGroup;
+										return $elm$core$Maybe$Just(
+											{pageGroup: pageGroup, pageId: pageId});
+									} else {
+										return $elm$core$Maybe$Nothing;
+									}
+								},
+								A2($elm$core$List$cons, head, rest))));
+				}
+			},
+			A2(
+				$author$project$UIExplorer$gatherWith,
+				F2(
+					function (a, b) {
+						var _v1 = _Utils_Tuple2(a, b);
+						if ((_v1.a.$ === 'Group') && (_v1.b.$ === 'Group')) {
+							var groupA = _v1.a.a;
+							var groupB = _v1.b.a;
+							return _Utils_eq(groupA.pageGroupHead, groupB.pageGroupHead);
+						} else {
+							return false;
+						}
+					}),
+				A2(
+					$elm$core$List$map,
+					function (item) {
+						var _v0 = item.pageGroup;
+						if (_v0.b) {
+							var head = _v0.a;
+							var rest = _v0.b;
+							return $author$project$UIExplorer$Group(
+								{pageGroup: rest, pageGroupHead: head, pageId: item.pageId});
+						} else {
+							return $author$project$UIExplorer$TempLeaf(item.pageId);
+						}
+					},
+					items_)));
+	};
+	return helper(items);
+};
+var $zwilias$elm_rosetree$Tree$children = function (_v0) {
+	var c = _v0.b;
+	return c;
+};
+var $zwilias$elm_rosetree$Tree$label = function (_v0) {
+	var v = _v0.a;
+	return v;
+};
+var $author$project$UIExplorer$viewSidebarLinksHelper = F6(
+	function (dark, config, page, expandedGroups, path, trees) {
+		return A2(
+			$elm$core$List$concatMap,
+			function (tree) {
+				var label = $zwilias$elm_rosetree$Tree$label(tree);
+				var newPath = _Utils_ap(
+					path,
+					_List_fromArray(
+						[label]));
+				var _v0 = $zwilias$elm_rosetree$Tree$children(tree);
+				if (!_v0.b) {
+					return _List_fromArray(
+						[newPath]);
+				} else {
+					var children = _v0;
+					return A6($author$project$UIExplorer$viewSidebarLinksHelper, dark, config, page, expandedGroups, newPath, children);
+				}
+			},
+			A2($elm$core$List$sortBy, $zwilias$elm_rosetree$Tree$label, trees));
+	});
+var $author$project$UIExplorer$viewSidebarLinks = F5(
+	function (dark, _v0, config, page, expandedGroups) {
+		var pages = _v0.a;
+		var palette = dark ? $author$project$Widget$Material$darkPalette : $author$project$Widget$Material$defaultPalette;
+		var options = $elm$core$Array$fromList(
+			A6(
+				$author$project$UIExplorer$viewSidebarLinksHelper,
+				dark,
+				config,
+				page,
+				expandedGroups,
+				_List_Nil,
+				$author$project$UIExplorer$buildTree(pages.ids)));
+		return A2(
+			$author$project$Widget$itemList,
+			$author$project$Widget$Material$sideSheet(palette),
+			A2(
+				$author$project$Widget$selectItem,
+				$author$project$Widget$Material$selectItem(palette),
+				{
+					onSelect: function (_int) {
+						return $elm$core$Maybe$Just(
+							$author$project$UIExplorer$Load(
+								A2(
+									$author$project$UIExplorer$uiUrl,
+									config.relativeUrlPath,
+									A2(
+										$elm$core$Maybe$withDefault,
+										_List_Nil,
+										A2($elm$core$Array$get, _int, options)))));
+					},
+					options: A2(
+						$elm$core$List$filterMap,
+						A2(
+							$elm$core$Basics$composeR,
+							$elm$core$List$reverse,
+							A2(
+								$elm$core$Basics$composeR,
+								$elm$core$List$head,
+								$elm$core$Maybe$map(
+									function (text) {
+										return {
+											icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+											text: text
+										};
+									}))),
+						$elm$core$Array$toList(options)),
+					selected: A2(
+						$elm$core$Maybe$map,
+						$elm$core$Tuple$first,
+						A2(
+							$elm$core$Array$get,
+							0,
+							A2(
+								$elm$core$Array$filter,
+								A2(
+									$elm$core$Basics$composeR,
+									$elm$core$Tuple$second,
+									$elm$core$Basics$eq(page)),
+								A2($elm$core$Array$indexedMap, $elm$core$Tuple$pair, options))))
+				}));
+	});
+var $author$project$UIExplorer$viewSidebar = F3(
+	function (pages, config, model) {
+		var palette = model.darkThemeEnabled ? $author$project$Widget$Material$darkPalette : $author$project$Widget$Material$defaultPalette;
+		return model.minimizeSidebar ? $mdgriffith$elm_ui$Element$none : A2(
+			$author$project$Widget$itemList,
+			$author$project$Widget$Material$sideSheet(palette),
+			$elm$core$List$concat(
+				_List_fromArray(
+					[
+						_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$headerItem,
+							$author$project$Widget$Material$fullBleedHeader(palette),
+							'Device Toolbar'),
+							A2(
+							$author$project$Widget$insetItem,
+							$author$project$Widget$Material$insetItem(palette),
+							{
+								content: function (_v0) {
+									return A2(
+										$author$project$Widget$switch,
+										$author$project$Widget$Material$switch(palette),
+										{
+											active: model.darkThemeEnabled,
+											description: 'Toggle Theme',
+											onPress: $elm$core$Maybe$Just(
+												$author$project$UIExplorer$ChangeDarkTheme(!model.darkThemeEnabled))
+										});
+								},
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								onPress: $elm$core$Maybe$Just(
+									$author$project$UIExplorer$ChangeDarkTheme(!model.darkThemeEnabled)),
+								text: 'Dark Theme'
+							})
+						]),
+						A3($author$project$UIExplorer$colorBlindOptionView, model.darkThemeEnabled, model.expandColorBlindOptions, model.colorBlindOption),
+						_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$headerItem,
+							$author$project$Widget$Material$fullBleedHeader(palette),
+							'Widgets'),
+							$author$project$Widget$asItem(
+							A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$height(
+										$mdgriffith$elm_ui$Element$px(70)),
+										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+									]),
+								A2(
+									$mdgriffith$elm_ui$Element$el,
+									_List_fromArray(
+										[
+											A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+										]),
+									A2(
+										$author$project$Widget$textInput,
+										$author$project$Widget$Material$textInput(palette),
+										{
+											chips: _List_Nil,
+											label: 'Search pages',
+											onChange: $author$project$UIExplorer$TypingSearchText,
+											placeholder: $elm$core$Maybe$Just(
+												A2(
+													$mdgriffith$elm_ui$Element$Input$placeholder,
+													_List_Nil,
+													$mdgriffith$elm_ui$Element$text('Search pages'))),
+											text: model.searchText
+										})))),
+							$author$project$Widget$asItem(
+							$author$project$UIExplorer$showSearchResults(model.searchText) ? A6($mdgriffith$elm_ui$Element$Lazy$lazy5, $author$project$UIExplorer$viewSearchResults, model.darkThemeEnabled, pages, config, model.page, model.searchText) : A6($mdgriffith$elm_ui$Element$Lazy$lazy5, $author$project$UIExplorer$viewSidebarLinks, model.darkThemeEnabled, pages, config, model.page, model.expandedGroups))
+						])
+					])));
+	});
+var $author$project$UIExplorer$viewSuccess = F3(
+	function (config, pages_, model) {
+		var pages = pages_.a;
+		var palette = model.darkThemeEnabled ? $author$project$Widget$Material$darkPalette : $author$project$Widget$Material$defaultPalette;
+		return {
+			body: _List_fromArray(
+				[
+					A3(
+					$mdgriffith$elm_ui$Element$layoutWith,
+					{options: config.layoutOptions},
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+						A2(
+							$elm$core$List$cons,
+							$mdgriffith$elm_ui$Element$Background$color(
+								model.darkThemeEnabled ? $author$project$UIExplorer$black : $author$project$UIExplorer$gray),
+							config.layoutAttributes)),
+					A2(
+						$mdgriffith$elm_ui$Element$column,
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+								$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
+							]),
+						_List_fromArray(
+							[
+								A2(
+								$author$project$Widget$menuBar,
+								$author$project$Widget$Material$menuBar(palette),
+								{
+									deviceClass: $mdgriffith$elm_ui$Element$Desktop,
+									openLeftSheet: $elm$core$Maybe$Just($author$project$UIExplorer$PressedToggleSidebar),
+									openRightSheet: $elm$core$Maybe$Nothing,
+									openTopSheet: $elm$core$Maybe$Nothing,
+									primaryActions: _List_Nil,
+									search: $elm$core$Maybe$Nothing,
+									title: A2($mdgriffith$elm_ui$Element$el, $author$project$Widget$Material$Typography$h6, config.sidebarTitle)
+								}),
+								A2(
+								$mdgriffith$elm_ui$Element$row,
+								_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$behindContent(
+										$mdgriffith$elm_ui$Element$html($author$project$UIExplorer$colorblindnessSvg)),
+										$mdgriffith$elm_ui$Element$behindContent(
+										$mdgriffith$elm_ui$Element$html($author$project$UIExplorer$colorblindnessCss)),
+										$mdgriffith$elm_ui$Element$Font$color(
+										$author$project$UIExplorer$textColor(model.darkThemeEnabled))
+									]),
+								_List_fromArray(
+									[
+										A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+												$mdgriffith$elm_ui$Element$Font$size(16)
+											]),
+										A3($author$project$UIExplorer$viewSidebar, pages_, config, model)),
+										A2(
+										$mdgriffith$elm_ui$Element$el,
+										_Utils_ap(
+											_List_fromArray(
+												[
+													$mdgriffith$elm_ui$Element$alignTop,
+													$mdgriffith$elm_ui$Element$width(
+													function () {
+														var _v0 = $author$project$UIExplorer$pageSizeOptionWidth(model.pageSizeOption);
+														if (_v0.$ === 'Just') {
+															var width = _v0.a;
+															return $mdgriffith$elm_ui$Element$px(
+																$ianmackenzie$elm_units$Pixels$inPixels(width));
+														} else {
+															return $mdgriffith$elm_ui$Element$fillPortion(999999999);
+														}
+													}()),
+													$mdgriffith$elm_ui$Element$centerX,
+													A2($mdgriffith$elm_ui$Element$paddingXY, 0, 56),
+													$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+													$mdgriffith$elm_ui$Element$Region$mainContent,
+													model.darkThemeEnabled ? $mdgriffith$elm_ui$Element$Background$color(
+													A3($mdgriffith$elm_ui$Element$rgb255, 30, 30, 30)) : $mdgriffith$elm_ui$Element$Background$color(
+													A3($mdgriffith$elm_ui$Element$rgb255, 225, 225, 225))
+												]),
+											function () {
+												var _v1 = model.colorBlindOption;
+												if (_v1.$ === 'Nothing') {
+													return _List_Nil;
+												} else {
+													var colorBlindOption = _v1.a;
+													return $elm$core$List$singleton(
+														$mdgriffith$elm_ui$Element$htmlAttribute(
+															$elm$html$Html$Attributes$class(
+																$author$project$UIExplorer$colorBlindOptionToCssClass(colorBlindOption))));
+												}
+											}()),
+										A2(
+											$mdgriffith$elm_ui$Element$map,
+											$author$project$UIExplorer$PageMsg,
+											A4(
+												pages.view,
+												model.page,
+												$author$project$UIExplorer$contentSize(model),
+												model.darkThemeEnabled,
+												model.pageModel)))
+									]))
+							])))
+				]),
+			title: 'UI Explorer'
+		};
+	});
+var $author$project$UIExplorer$view = F3(
+	function (config, pages, model) {
+		if (model.$ === 'FlagsParsed') {
+			var successModel = model.a;
+			return A3($author$project$UIExplorer$viewSuccess, config, pages, successModel);
+		} else {
+			var errorMessage = model.a;
+			return {
+				body: _List_fromArray(
+					[
+						A3(
+						$mdgriffith$elm_ui$Element$layoutWith,
+						{options: config.layoutOptions},
+						A2(
+							$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),
+								config.layoutAttributes)),
+						A2($author$project$UIExplorer$errorView, false, errorMessage))
+					]),
+				title: 'Error'
+			};
+		}
+	});
+var $author$project$UIExplorer$application = F2(
+	function (config, pages) {
+		return $elm$browser$Browser$application(
+			{
+				init: A2($author$project$UIExplorer$init, config, pages),
+				onUrlChange: $author$project$UIExplorer$UrlChanged,
+				onUrlRequest: $author$project$UIExplorer$LinkClicked,
+				subscriptions: $author$project$UIExplorer$subscriptions(pages),
+				update: A2($author$project$UIExplorer$update, pages, config),
+				view: A2($author$project$UIExplorer$view, config, pages)
+			});
+	});
+var $author$project$UIExplorer$defaultConfig = {
+	flagsDecoder: $elm$json$Json$Decode$succeed(_Utils_Tuple0),
+	layoutAttributes: _List_Nil,
+	layoutOptions: _List_Nil,
+	relativeUrlPath: _List_Nil,
+	sidebarTitle: $mdgriffith$elm_ui$Element$text('UI explorer')
+};
+var $author$project$UIExplorer$Current = function (a) {
+	return {$: 'Current', a: a};
+};
+var $author$project$UIExplorer$Previous = function (a) {
+	return {$: 'Previous', a: a};
+};
+var $mdgriffith$elm_ui$Element$Lazy$apply3 = F4(
+	function (fn, a, b, c) {
+		return $mdgriffith$elm_ui$Element$Lazy$embed(
+			A3(fn, a, b, c));
+	});
+var $elm$virtual_dom$VirtualDom$lazy5 = _VirtualDom_lazy5;
+var $mdgriffith$elm_ui$Element$Lazy$lazy3 = F4(
+	function (fn, a, b, c) {
+		return $mdgriffith$elm_ui$Internal$Model$Unstyled(
+			A5($elm$virtual_dom$VirtualDom$lazy5, $mdgriffith$elm_ui$Element$Lazy$apply3, fn, a, b, c));
+	});
+var $author$project$UIExplorer$nextPage = F3(
+	function (id, config, _v0) {
+		var previous = _v0.a;
+		var view_ = F4(
+			function (pageId, windowSize, darkTheme, _v8) {
+				var previousModel = _v8.a;
+				var model = _v8.b;
+				return _Utils_eq(
+					_Utils_ap(
+						previous.pageGroup,
+						_List_fromArray(
+							[id])),
+					pageId) ? A2(
+					$mdgriffith$elm_ui$Element$map,
+					$author$project$UIExplorer$Current,
+					A4($mdgriffith$elm_ui$Element$Lazy$lazy3, config.view, windowSize, darkTheme, model)) : A2(
+					$mdgriffith$elm_ui$Element$map,
+					$author$project$UIExplorer$Previous,
+					A4(previous.view, pageId, windowSize, darkTheme, previousModel));
+			});
+		var update_ = F2(
+			function (msg, _v7) {
+				var previousModel = _v7.a;
+				var model = _v7.b;
+				if (msg.$ === 'Previous') {
+					var previousMsg = msg.a;
+					var _v5 = A2(previous.update, previousMsg, previousModel);
+					var newPreviousModel = _v5.a;
+					var previousCmds = _v5.b;
+					return _Utils_Tuple2(
+						_Utils_Tuple2(newPreviousModel, model),
+						A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Previous, previousCmds));
+				} else {
+					var currentMsg = msg.a;
+					var _v6 = A2(config.update, currentMsg, model);
+					var newModel = _v6.a;
+					var cmds = _v6.b;
+					return _Utils_Tuple2(
+						_Utils_Tuple2(previousModel, newModel),
+						A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Current, cmds));
+				}
+			});
+		var subscriptions_ = function (_v3) {
+			var previousModel = _v3.a;
+			var model = _v3.b;
+			return $elm$core$Platform$Sub$batch(
+				_List_fromArray(
+					[
+						A2(
+						$elm$core$Platform$Sub$map,
+						$author$project$UIExplorer$Current,
+						config.subscriptions(model)),
+						A2(
+						$elm$core$Platform$Sub$map,
+						$author$project$UIExplorer$Previous,
+						previous.subscriptions(previousModel))
+					]));
+		};
+		var init_ = function (flags) {
+			var _v1 = previous.init(flags);
+			var previousModel = _v1.a;
+			var previousCmds = _v1.b;
+			var _v2 = config.init(flags);
+			var model = _v2.a;
+			var cmds = _v2.b;
+			return _Utils_Tuple2(
+				_Utils_Tuple2(previousModel, model),
+				$elm$core$Platform$Cmd$batch(
+					_List_fromArray(
+						[
+							A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Previous, previousCmds),
+							A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Current, cmds)
+						])));
+		};
+		return $author$project$UIExplorer$PageBuilder(
+			{
+				ids: A2(
+					$elm$core$List$cons,
+					{pageGroup: previous.pageGroup, pageId: id},
+					previous.ids),
+				init: init_,
+				pageGroup: previous.pageGroup,
+				subscriptions: subscriptions_,
+				update: update_,
+				view: view_
+			});
+	});
+var $author$project$UIExplorer$firstPage = F2(
+	function (id, config) {
+		return A3(
+			$author$project$UIExplorer$nextPage,
+			id,
+			config,
+			$author$project$UIExplorer$PageBuilder(
+				{
+					ids: _List_Nil,
+					init: $elm$core$Basics$always(
+						_Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none)),
+					pageGroup: _List_Nil,
+					subscriptions: function (_v0) {
+						return $elm$core$Platform$Sub$none;
+					},
+					update: F2(
+						function (_v1, m) {
+							return _Utils_Tuple2(m, $elm$core$Platform$Cmd$none);
+						}),
+					view: F4(
+						function (_v2, _v3, _v4, _v5) {
+							return A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$centerX,
+										$mdgriffith$elm_ui$Element$centerY,
+										$mdgriffith$elm_ui$Element$Font$size(28)
+									]),
+								$mdgriffith$elm_ui$Element$text('Page not found'));
+						})
+				}));
+	});
+var $mdgriffith$elm_ui$Element$BigDesktop = {$: 'BigDesktop'};
+var $author$project$UIExplorer$Story$addStoryToGroup = function (builder) {
+	return {
+		init: builder.init,
+		subscriptions: builder.subscriptions,
+		update: builder.update,
+		views: function (_v0) {
+			var a = _v0.a;
+			var previous = _v0.b;
+			return A2(
+				$elm$core$List$map,
+				function (view) {
+					return view(a);
+				},
+				builder.views(previous));
+		}
+	};
+};
+var $author$project$UIExplorer$Story$addStory = F2(
+	function (_v0, builder) {
+		var info = _v0.info;
+		var toValue = _v0.toValue;
+		var storiesToValue = function (key) {
+			if (key.b) {
+				var head = key.a;
+				var tail = key.b;
+				return _Utils_Tuple2(
+					toValue(head),
+					builder.storiesToValue(tail));
+			} else {
+				return _Utils_Tuple2(
+					toValue(''),
+					builder.storiesToValue(_List_Nil));
+			}
+		};
+		return {
+			stories: A2($elm$core$List$cons, info, builder.stories),
+			storiesToValue: storiesToValue,
+			tilelist: $author$project$UIExplorer$Story$addStoryToGroup(builder.tilelist),
+			title: builder.title
+		};
+	});
+var $author$project$UIExplorer$Story$book = F2(
+	function (title, tilelist) {
+		return {
+			stories: _List_Nil,
+			storiesToValue: $elm$core$Basics$always(_Utils_Tuple0),
+			tilelist: {
+				init: tilelist.init,
+				subscriptions: tilelist.subscriptions,
+				update: tilelist.update,
+				views: $elm$core$Basics$always(tilelist.views)
+			},
+			title: title
+		};
+	});
+var $author$project$UIExplorer$Story$BoolStory = F2(
+	function (a, b) {
+		return {$: 'BoolStory', a: a, b: b};
+	});
+var $author$project$UIExplorer$Story$boolStory = F3(
+	function (label, _v0, _default) {
+		var ifTrue = _v0.a;
+		var ifFalse = _v0.b;
+		return {
+			info: A2($author$project$UIExplorer$Story$BoolStory, label, _default),
+			toValue: function (s) {
+				return (s === 't') ? ifTrue : ifFalse;
+			}
+		};
+	});
+var $author$project$UIExplorer$Tile$Current = function (a) {
+	return {$: 'Current', a: a};
+};
+var $author$project$UIExplorer$Tile$Previous = function (a) {
+	return {$: 'Previous', a: a};
+};
+var $mdgriffith$elm_ui$Internal$Model$mapAttr = 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$Element$mapAttribute = $mdgriffith$elm_ui$Internal$Model$mapAttr;
+var $author$project$UIExplorer$Tile$mapView = F2(
+	function (map, view) {
+		return {
+			attributes: A2(
+				$elm$core$List$map,
+				$mdgriffith$elm_ui$Element$mapAttribute(map),
+				view.attributes),
+			body: A2($mdgriffith$elm_ui$Element$map, map, view.body),
+			position: view.position,
+			title: view.title
+		};
+	});
+var $author$project$UIExplorer$Tile$mapViewList = function (map) {
+	return $elm$core$List$map(
+		$author$project$UIExplorer$Tile$mapView(map));
+};
+var $author$project$UIExplorer$Tile$linkGroup = F2(
+	function (linked, parent) {
+		var views_ = F2(
+			function (pageSize, _v7) {
+				var sharedModel = _v7.a;
+				var model = _v7.b;
+				return A2(
+					$elm$core$List$append,
+					A2(
+						$author$project$UIExplorer$Tile$mapViewList,
+						$author$project$UIExplorer$Tile$Previous,
+						A2(parent.views, pageSize, sharedModel)),
+					A2(
+						$author$project$UIExplorer$Tile$mapViewList,
+						$author$project$UIExplorer$Tile$Current,
+						A2(
+							linked.views,
+							pageSize,
+							_Utils_Tuple2(sharedModel, model))));
+			});
+		var update_ = F2(
+			function (msg, _v6) {
+				var sharedModel = _v6.a;
+				var model = _v6.b;
+				if (msg.$ === 'Previous') {
+					var parentMsg = msg.a;
+					var _v4 = A2(parent.update, parentMsg, sharedModel);
+					var newParentModel = _v4.a;
+					var parentCmd = _v4.b;
+					return _Utils_Tuple2(
+						_Utils_Tuple2(newParentModel, model),
+						A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Tile$Previous, parentCmd));
+				} else {
+					var currentMsg = msg.a;
+					var _v5 = A2(
+						linked.update,
+						currentMsg,
+						_Utils_Tuple2(sharedModel, model));
+					var newModel = _v5.a;
+					var cmd = _v5.b;
+					return _Utils_Tuple2(
+						_Utils_Tuple2(sharedModel, newModel),
+						A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Tile$Current, cmd));
+				}
+			});
+		var subscriptions_ = function (_v2) {
+			var sharedModel = _v2.a;
+			var model = _v2.b;
+			return $elm$core$Platform$Sub$batch(
+				_List_fromArray(
+					[
+						A2(
+						$elm$core$Platform$Sub$map,
+						$author$project$UIExplorer$Tile$Current,
+						linked.subscriptions(
+							_Utils_Tuple2(sharedModel, model))),
+						A2(
+						$elm$core$Platform$Sub$map,
+						$author$project$UIExplorer$Tile$Previous,
+						parent.subscriptions(sharedModel))
+					]));
+		};
+		var init_ = function (flags) {
+			var _v0 = parent.init(flags);
+			var parentModel = _v0.a;
+			var parentCmd = _v0.b;
+			var _v1 = linked.init(flags);
+			var model = _v1.a;
+			var cmd = _v1.b;
+			return _Utils_Tuple2(
+				_Utils_Tuple2(parentModel, model),
+				$elm$core$Platform$Cmd$batch(
+					_List_fromArray(
+						[
+							A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Tile$Previous, parentCmd),
+							A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Tile$Current, cmd)
+						])));
+		};
+		return {init: init_, subscriptions: subscriptions_, update: update_, views: views_};
+	});
+var $miyamoen$select_list$Types$selected = function (_v0) {
+	var a = _v0.b;
+	return a;
+};
+var $miyamoen$select_list$SelectList$selected = $miyamoen$select_list$Types$selected;
+var $author$project$UIExplorer$Story$storyCurrentValue = function (model) {
+	switch (model.$) {
+		case 'RangeStoryModel':
+			var value = model.b.value;
+			return $elm$core$String$fromInt(value);
+		case 'TextStoryModel':
+			var value = model.b;
+			return value;
+		case 'OptionListStoryModel':
+			var select = model.b;
+			return $miyamoen$select_list$SelectList$selected(select);
+		default:
+			var value = model.b;
+			return value ? 't' : 'f';
+	}
+};
+var $author$project$UIExplorer$Story$selectedStories = $elm$core$List$map($author$project$UIExplorer$Story$storyCurrentValue);
+var $author$project$UIExplorer$Tile$NewRightColumnTile = {$: 'NewRightColumnTile'};
+var $author$project$UIExplorer$Story$storyLabelIs = F2(
+	function (label, model) {
+		switch (model.$) {
+			case 'RangeStoryModel':
+				var storyLabel = model.a;
+				return _Utils_eq(label, storyLabel);
+			case 'TextStoryModel':
+				var storyLabel = model.a;
+				return _Utils_eq(label, storyLabel);
+			case 'OptionListStoryModel':
+				var storyLabel = model.a;
+				return _Utils_eq(label, storyLabel);
+			default:
+				var storyLabel = model.a;
+				return _Utils_eq(label, storyLabel);
+		}
+	});
+var $author$project$UIExplorer$Story$BoolStoryModel = F2(
+	function (a, b) {
+		return {$: 'BoolStoryModel', a: a, b: b};
+	});
+var $author$project$UIExplorer$Story$OptionListStoryModel = F2(
+	function (a, b) {
+		return {$: 'OptionListStoryModel', a: a, b: b};
+	});
+var $author$project$UIExplorer$Story$RangeStoryModel = F2(
+	function (a, b) {
+		return {$: 'RangeStoryModel', a: a, b: b};
+	});
+var $author$project$UIExplorer$Story$TextStoryModel = F2(
+	function (a, b) {
+		return {$: 'TextStoryModel', a: a, b: b};
+	});
+var $miyamoen$select_list$SelectList$attempt = F2(
+	function (action, selectList) {
+		return A2(
+			$elm$core$Maybe$withDefault,
+			selectList,
+			action(selectList));
+	});
+var $author$project$UIExplorer$Story$enforceRange = F3(
+	function (min, max, value) {
+		var _v0 = _Utils_Tuple2(
+			_Utils_cmp(value, min) < 0,
+			_Utils_cmp(value, max) > 0);
+		if (_v0.a) {
+			if (_v0.b) {
+				return value;
+			} else {
+				return min;
+			}
+		} else {
+			if (_v0.b) {
+				return max;
+			} else {
+				return value;
+			}
+		}
+	});
+var $miyamoen$select_list$Types$SelectList = F3(
+	function (a, b, c) {
+		return {$: 'SelectList', a: a, b: b, c: c};
+	});
+var $miyamoen$select_list$Select$splitWhen = F2(
+	function (predicate, list) {
+		var _v0 = A3(
+			$elm$core$List$foldl,
+			F2(
+				function (a, _v1) {
+					var before = _v1.a;
+					var res = _v1.b;
+					var after = _v1.c;
+					if (res.$ === 'Nothing') {
+						return predicate(a) ? _Utils_Tuple3(
+							before,
+							$elm$core$Maybe$Just(a),
+							after) : _Utils_Tuple3(
+							A2($elm$core$List$cons, a, before),
+							$elm$core$Maybe$Nothing,
+							after);
+					} else {
+						return _Utils_Tuple3(
+							before,
+							res,
+							A2($elm$core$List$cons, a, after));
+					}
+				}),
+			_Utils_Tuple3(_List_Nil, $elm$core$Maybe$Nothing, _List_Nil),
+			list);
+		var beforeList = _v0.a;
+		var maybe = _v0.b;
+		var afterList = _v0.c;
+		return A2(
+			$elm$core$Maybe$map,
+			function (target) {
+				return _Utils_Tuple3(beforeList, target, afterList);
+			},
+			maybe);
+	});
+var $miyamoen$select_list$Select$afterIf = F2(
+	function (pred, _v0) {
+		var befor = _v0.a;
+		var a = _v0.b;
+		var after = _v0.c;
+		return A2(
+			$elm$core$Maybe$map,
+			function (_v1) {
+				var nextBefore = _v1.a;
+				var next = _v1.b;
+				var nextAfter = _v1.c;
+				return A3(
+					$miyamoen$select_list$Types$SelectList,
+					_Utils_ap(
+						nextBefore,
+						A2($elm$core$List$cons, a, befor)),
+					next,
+					$elm$core$List$reverse(nextAfter));
+			},
+			A2($miyamoen$select_list$Select$splitWhen, pred, after));
+	});
+var $miyamoen$select_list$SelectList$selectAfterIf = $miyamoen$select_list$Select$afterIf;
+var $miyamoen$select_list$Select$beforeIf = F2(
+	function (pred, _v0) {
+		var befor = _v0.a;
+		var a = _v0.b;
+		var after = _v0.c;
+		return A2(
+			$elm$core$Maybe$map,
+			function (_v1) {
+				var nextAfter = _v1.a;
+				var next = _v1.b;
+				var nextBefore = _v1.c;
+				return A3(
+					$miyamoen$select_list$Types$SelectList,
+					$elm$core$List$reverse(nextBefore),
+					next,
+					_Utils_ap(
+						nextAfter,
+						A2($elm$core$List$cons, a, after)));
+			},
+			A2($miyamoen$select_list$Select$splitWhen, pred, befor));
+	});
+var $miyamoen$select_list$SelectList$selectBeforeIf = $miyamoen$select_list$Select$beforeIf;
+var $author$project$UIExplorer$Story$storySetValue = F2(
+	function (value, model) {
+		switch (model.$) {
+			case 'RangeStoryModel':
+				var storyLabel = model.a;
+				var state = model.b;
+				var _v1 = $elm$core$String$toInt(value);
+				if (_v1.$ === 'Nothing') {
+					return model;
+				} else {
+					var intValue = _v1.a;
+					return A2(
+						$author$project$UIExplorer$Story$RangeStoryModel,
+						storyLabel,
+						_Utils_update(
+							state,
+							{
+								value: A3($author$project$UIExplorer$Story$enforceRange, state.min, state.max, intValue)
+							}));
+				}
+			case 'TextStoryModel':
+				var storyLabel = model.a;
+				return A2($author$project$UIExplorer$Story$TextStoryModel, storyLabel, value);
+			case 'OptionListStoryModel':
+				var storyLabel = model.a;
+				var select = model.b;
+				return A2(
+					$author$project$UIExplorer$Story$OptionListStoryModel,
+					storyLabel,
+					A2(
+						$miyamoen$select_list$SelectList$attempt,
+						$miyamoen$select_list$SelectList$selectAfterIf(
+							$elm$core$Basics$eq(value)),
+						A2(
+							$miyamoen$select_list$SelectList$attempt,
+							$miyamoen$select_list$SelectList$selectBeforeIf(
+								$elm$core$Basics$eq(value)),
+							select)));
+			default:
+				var storyLabel = model.a;
+				return A2($author$project$UIExplorer$Story$BoolStoryModel, storyLabel, value === 't');
+		}
+	});
+var $author$project$UIExplorer$Story$selectStory = F2(
+	function (label, value) {
+		return $elm$core$List$map(
+			function (story) {
+				return A2($author$project$UIExplorer$Story$storyLabelIs, label, story) ? A2($author$project$UIExplorer$Story$storySetValue, value, story) : story;
+			});
+	});
+var $miyamoen$select_list$Types$fromList = function (list) {
+	if (list.b) {
+		var x = list.a;
+		var xs = list.b;
+		return $elm$core$Maybe$Just(
+			A3($miyamoen$select_list$Types$SelectList, _List_Nil, x, xs));
+	} else {
+		return $elm$core$Maybe$Nothing;
+	}
+};
+var $miyamoen$select_list$SelectList$fromList = $miyamoen$select_list$Types$fromList;
+var $author$project$UIExplorer$Story$storyHelp = function (info) {
+	switch (info.$) {
+		case 'RangeStory':
+			var label = info.a;
+			var unit = info.b.unit;
+			var min = info.b.min;
+			var max = info.b.max;
+			var _default = info.b._default;
+			return $elm$core$Maybe$Just(
+				A2(
+					$author$project$UIExplorer$Story$RangeStoryModel,
+					label,
+					{max: max, min: min, unit: unit, value: _default}));
+		case 'TextStory':
+			var label = info.a;
+			var _default = info.b;
+			return $elm$core$Maybe$Just(
+				A2($author$project$UIExplorer$Story$TextStoryModel, label, _default));
+		case 'OptionListStory':
+			var label = info.a;
+			var options = info.b;
+			return A2(
+				$elm$core$Maybe$map,
+				$author$project$UIExplorer$Story$OptionListStoryModel(label),
+				$miyamoen$select_list$SelectList$fromList(options));
+		default:
+			var label = info.a;
+			var _default = info.b;
+			return $elm$core$Maybe$Just(
+				A2($author$project$UIExplorer$Story$BoolStoryModel, label, _default));
+	}
+};
+var $author$project$UIExplorer$Story$StorySelect = F2(
+	function (a, b) {
+		return {$: 'StorySelect', a: a, b: b};
+	});
+var $author$project$Widget$Material$Typography$caption = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Font$size(12),
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.4)
+	]);
+var $author$project$Widget$Material$chip = $author$project$Internal$Material$Chip$chip;
+var $mdgriffith$elm_ui$Element$Input$Thumb = function (a) {
+	return {$: 'Thumb', a: a};
+};
+var $mdgriffith$elm_ui$Element$Input$defaultThumb = $mdgriffith$elm_ui$Element$Input$Thumb(
+	_List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$width(
+			$mdgriffith$elm_ui$Element$px(16)),
+			$mdgriffith$elm_ui$Element$height(
+			$mdgriffith$elm_ui$Element$px(16)),
+			$mdgriffith$elm_ui$Element$Border$rounded(8),
+			$mdgriffith$elm_ui$Element$Border$width(1),
+			$mdgriffith$elm_ui$Element$Border$color(
+			A3($mdgriffith$elm_ui$Element$rgb, 0.5, 0.5, 0.5)),
+			$mdgriffith$elm_ui$Element$Background$color(
+			A3($mdgriffith$elm_ui$Element$rgb, 1, 1, 1))
+		]));
+var $miyamoen$select_list$Query$beforeLength = function (_v0) {
+	var before = _v0.a;
+	return $elm$core$List$length(before);
+};
+var $miyamoen$select_list$SelectList$beforeLength = $miyamoen$select_list$Query$beforeLength;
+var $miyamoen$select_list$SelectList$index = $miyamoen$select_list$SelectList$beforeLength;
+var $author$project$Internal$Material$List$row = {
+	content: {element: _List_Nil, ifFirst: _List_Nil, ifLast: _List_Nil, ifSingleton: _List_Nil, otherwise: _List_Nil},
+	elementRow: _List_fromArray(
+		[
+			A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8),
+			$mdgriffith$elm_ui$Element$spacing(8)
+		])
+};
+var $author$project$Widget$Material$row = $author$project$Internal$Material$List$row;
+var $author$project$Widget$select = $author$project$Internal$Select$select;
+var $mdgriffith$elm_ui$Internal$Model$getHeight = function (attrs) {
+	return A3(
+		$elm$core$List$foldr,
+		F2(
+			function (attr, acc) {
+				if (acc.$ === 'Just') {
+					var x = acc.a;
+					return $elm$core$Maybe$Just(x);
+				} else {
+					if (attr.$ === 'Height') {
+						var len = attr.a;
+						return $elm$core$Maybe$Just(len);
+					} else {
+						return $elm$core$Maybe$Nothing;
+					}
+				}
+			}),
+		$elm$core$Maybe$Nothing,
+		attrs);
+};
+var $mdgriffith$elm_ui$Internal$Model$getSpacing = F2(
+	function (attrs, _default) {
+		return A2(
+			$elm$core$Maybe$withDefault,
+			_default,
+			A3(
+				$elm$core$List$foldr,
+				F2(
+					function (attr, acc) {
+						if (acc.$ === 'Just') {
+							var x = acc.a;
+							return $elm$core$Maybe$Just(x);
+						} else {
+							if ((attr.$ === 'StyleClass') && (attr.b.$ === 'SpacingStyle')) {
+								var _v2 = attr.b;
+								var x = _v2.b;
+								var y = _v2.c;
+								return $elm$core$Maybe$Just(
+									_Utils_Tuple2(x, y));
+							} else {
+								return $elm$core$Maybe$Nothing;
+							}
+						}
+					}),
+				$elm$core$Maybe$Nothing,
+				attrs));
+	});
+var $mdgriffith$elm_ui$Internal$Model$getWidth = function (attrs) {
+	return A3(
+		$elm$core$List$foldr,
+		F2(
+			function (attr, acc) {
+				if (acc.$ === 'Just') {
+					var x = acc.a;
+					return $elm$core$Maybe$Just(x);
+				} else {
+					if (attr.$ === 'Width') {
+						var len = attr.a;
+						return $elm$core$Maybe$Just(len);
+					} else {
+						return $elm$core$Maybe$Nothing;
+					}
+				}
+			}),
+		$elm$core$Maybe$Nothing,
+		attrs);
+};
+var $elm$html$Html$Attributes$max = $elm$html$Html$Attributes$stringProperty('max');
+var $elm$html$Html$Attributes$min = $elm$html$Html$Attributes$stringProperty('min');
+var $mdgriffith$elm_ui$Element$spacingXY = F2(
+	function (x, y) {
+		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, y),
+				x,
+				y));
+	});
+var $elm$html$Html$Attributes$step = function (n) {
+	return A2($elm$html$Html$Attributes$stringProperty, 'step', n);
+};
+var $elm$core$String$toFloat = _String_toFloat;
+var $elm$core$Basics$abs = function (n) {
+	return (n < 0) ? (-n) : n;
+};
+var $mdgriffith$elm_ui$Element$Input$viewHorizontalThumb = F3(
+	function (factor, thumbAttributes, trackHeight) {
+		return A2(
+			$mdgriffith$elm_ui$Element$row,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$height(
+					A2($elm$core$Maybe$withDefault, $mdgriffith$elm_ui$Element$fill, trackHeight)),
+					$mdgriffith$elm_ui$Element$centerY
+				]),
+			_List_fromArray(
+				[
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width(
+							$mdgriffith$elm_ui$Element$fillPortion(
+								$elm$core$Basics$round(factor * 10000)))
+						]),
+					$mdgriffith$elm_ui$Element$none),
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$centerY,
+						A2(
+							$elm$core$List$map,
+							$mdgriffith$elm_ui$Internal$Model$mapAttr($elm$core$Basics$never),
+							thumbAttributes)),
+					$mdgriffith$elm_ui$Element$none),
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width(
+							$mdgriffith$elm_ui$Element$fillPortion(
+								$elm$core$Basics$round(
+									$elm$core$Basics$abs(1 - factor) * 10000)))
+						]),
+					$mdgriffith$elm_ui$Element$none)
+				]));
+	});
+var $mdgriffith$elm_ui$Element$Input$viewVerticalThumb = F3(
+	function (factor, thumbAttributes, trackWidth) {
+		return A2(
+			$mdgriffith$elm_ui$Element$column,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$width(
+					A2($elm$core$Maybe$withDefault, $mdgriffith$elm_ui$Element$fill, trackWidth)),
+					$mdgriffith$elm_ui$Element$centerX
+				]),
+			_List_fromArray(
+				[
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$height(
+							$mdgriffith$elm_ui$Element$fillPortion(
+								$elm$core$Basics$round(
+									$elm$core$Basics$abs(1 - factor) * 10000)))
+						]),
+					$mdgriffith$elm_ui$Element$none),
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$centerX,
+						A2(
+							$elm$core$List$map,
+							$mdgriffith$elm_ui$Internal$Model$mapAttr($elm$core$Basics$never),
+							thumbAttributes)),
+					$mdgriffith$elm_ui$Element$none),
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$height(
+							$mdgriffith$elm_ui$Element$fillPortion(
+								$elm$core$Basics$round(factor * 10000)))
+						]),
+					$mdgriffith$elm_ui$Element$none)
+				]));
+	});
+var $mdgriffith$elm_ui$Element$Input$slider = F2(
+	function (attributes, input) {
+		var trackWidth = $mdgriffith$elm_ui$Internal$Model$getWidth(attributes);
+		var trackHeight = $mdgriffith$elm_ui$Internal$Model$getHeight(attributes);
+		var vertical = function () {
+			var _v8 = _Utils_Tuple2(trackWidth, trackHeight);
+			_v8$3:
+			while (true) {
+				if (_v8.a.$ === 'Nothing') {
+					if (_v8.b.$ === 'Nothing') {
+						var _v9 = _v8.a;
+						var _v10 = _v8.b;
+						return false;
+					} else {
+						break _v8$3;
+					}
+				} else {
+					if ((_v8.a.a.$ === 'Px') && (_v8.b.$ === 'Just')) {
+						switch (_v8.b.a.$) {
+							case 'Px':
+								var w = _v8.a.a.a;
+								var h = _v8.b.a.a;
+								return _Utils_cmp(h, w) > 0;
+							case 'Fill':
+								return true;
+							default:
+								break _v8$3;
+						}
+					} else {
+						break _v8$3;
+					}
+				}
+			}
+			return false;
+		}();
+		var factor = (input.value - input.min) / (input.max - input.min);
+		var _v0 = input.thumb;
+		var thumbAttributes = _v0.a;
+		var height = $mdgriffith$elm_ui$Internal$Model$getHeight(thumbAttributes);
+		var thumbHeightString = function () {
+			if (height.$ === 'Nothing') {
+				return '20px';
+			} else {
+				if (height.a.$ === 'Px') {
+					var px = height.a.a;
+					return $elm$core$String$fromInt(px) + 'px';
+				} else {
+					return '100%';
+				}
+			}
+		}();
+		var width = $mdgriffith$elm_ui$Internal$Model$getWidth(thumbAttributes);
+		var thumbWidthString = function () {
+			if (width.$ === 'Nothing') {
+				return '20px';
+			} else {
+				if (width.a.$ === 'Px') {
+					var px = width.a.a;
+					return $elm$core$String$fromInt(px) + 'px';
+				} else {
+					return '100%';
+				}
+			}
+		}();
+		var className = 'thmb-' + (thumbWidthString + ('-' + thumbHeightString));
+		var thumbShadowStyle = _List_fromArray(
+			[
+				A2($mdgriffith$elm_ui$Internal$Model$Property, 'width', thumbWidthString),
+				A2($mdgriffith$elm_ui$Internal$Model$Property, 'height', thumbHeightString)
+			]);
+		var _v1 = A2(
+			$mdgriffith$elm_ui$Internal$Model$getSpacing,
+			attributes,
+			_Utils_Tuple2(5, 5));
+		var spacingX = _v1.a;
+		var spacingY = _v1.b;
+		return A3(
+			$mdgriffith$elm_ui$Element$Input$applyLabel,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Input$isHiddenLabel(input.label) ? $mdgriffith$elm_ui$Internal$Model$NoAttribute : A2($mdgriffith$elm_ui$Element$spacingXY, spacingX, spacingY),
+					$mdgriffith$elm_ui$Element$Region$announce,
+					$mdgriffith$elm_ui$Element$width(
+					function () {
+						if (trackWidth.$ === 'Nothing') {
+							return $mdgriffith$elm_ui$Element$fill;
+						} else {
+							if (trackWidth.a.$ === 'Px') {
+								return $mdgriffith$elm_ui$Element$shrink;
+							} else {
+								var x = trackWidth.a;
+								return x;
+							}
+						}
+					}()),
+					$mdgriffith$elm_ui$Element$height(
+					function () {
+						if (trackHeight.$ === 'Nothing') {
+							return $mdgriffith$elm_ui$Element$shrink;
+						} else {
+							if (trackHeight.a.$ === 'Px') {
+								return $mdgriffith$elm_ui$Element$shrink;
+							} else {
+								var x = trackHeight.a;
+								return x;
+							}
+						}
+					}())
+				]),
+			input.label,
+			A2(
+				$mdgriffith$elm_ui$Element$row,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$width(
+						A2($elm$core$Maybe$withDefault, $mdgriffith$elm_ui$Element$fill, trackWidth)),
+						$mdgriffith$elm_ui$Element$height(
+						A2(
+							$elm$core$Maybe$withDefault,
+							$mdgriffith$elm_ui$Element$px(20),
+							trackHeight))
+					]),
+				_List_fromArray(
+					[
+						A4(
+						$mdgriffith$elm_ui$Internal$Model$element,
+						$mdgriffith$elm_ui$Internal$Model$asEl,
+						$mdgriffith$elm_ui$Internal$Model$NodeName('input'),
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Input$hiddenLabelAttribute(input.label),
+								A2(
+								$mdgriffith$elm_ui$Internal$Model$StyleClass,
+								$mdgriffith$elm_ui$Internal$Flag$active,
+								A2($mdgriffith$elm_ui$Internal$Model$Style, 'input[type=\"range\"].' + (className + '::-moz-range-thumb'), thumbShadowStyle)),
+								A2(
+								$mdgriffith$elm_ui$Internal$Model$StyleClass,
+								$mdgriffith$elm_ui$Internal$Flag$hover,
+								A2($mdgriffith$elm_ui$Internal$Model$Style, 'input[type=\"range\"].' + (className + '::-webkit-slider-thumb'), thumbShadowStyle)),
+								A2(
+								$mdgriffith$elm_ui$Internal$Model$StyleClass,
+								$mdgriffith$elm_ui$Internal$Flag$focus,
+								A2($mdgriffith$elm_ui$Internal$Model$Style, 'input[type=\"range\"].' + (className + '::-ms-thumb'), thumbShadowStyle)),
+								$mdgriffith$elm_ui$Internal$Model$Attr(
+								$elm$html$Html$Attributes$class(className + ' focusable-parent')),
+								$mdgriffith$elm_ui$Internal$Model$Attr(
+								$elm$html$Html$Events$onInput(
+									function (str) {
+										var _v4 = $elm$core$String$toFloat(str);
+										if (_v4.$ === 'Nothing') {
+											return input.onChange(0);
+										} else {
+											var val = _v4.a;
+											return input.onChange(val);
+										}
+									})),
+								$mdgriffith$elm_ui$Internal$Model$Attr(
+								$elm$html$Html$Attributes$type_('range')),
+								$mdgriffith$elm_ui$Internal$Model$Attr(
+								$elm$html$Html$Attributes$step(
+									function () {
+										var _v5 = input.step;
+										if (_v5.$ === 'Nothing') {
+											return 'any';
+										} else {
+											var step = _v5.a;
+											return $elm$core$String$fromFloat(step);
+										}
+									}())),
+								$mdgriffith$elm_ui$Internal$Model$Attr(
+								$elm$html$Html$Attributes$min(
+									$elm$core$String$fromFloat(input.min))),
+								$mdgriffith$elm_ui$Internal$Model$Attr(
+								$elm$html$Html$Attributes$max(
+									$elm$core$String$fromFloat(input.max))),
+								$mdgriffith$elm_ui$Internal$Model$Attr(
+								$elm$html$Html$Attributes$value(
+									$elm$core$String$fromFloat(input.value))),
+								vertical ? $mdgriffith$elm_ui$Internal$Model$Attr(
+								A2($elm$html$Html$Attributes$attribute, 'orient', 'vertical')) : $mdgriffith$elm_ui$Internal$Model$NoAttribute,
+								$mdgriffith$elm_ui$Element$width(
+								vertical ? A2(
+									$elm$core$Maybe$withDefault,
+									$mdgriffith$elm_ui$Element$px(20),
+									trackHeight) : A2($elm$core$Maybe$withDefault, $mdgriffith$elm_ui$Element$fill, trackWidth)),
+								$mdgriffith$elm_ui$Element$height(
+								vertical ? A2($elm$core$Maybe$withDefault, $mdgriffith$elm_ui$Element$fill, trackWidth) : A2(
+									$elm$core$Maybe$withDefault,
+									$mdgriffith$elm_ui$Element$px(20),
+									trackHeight))
+							]),
+						$mdgriffith$elm_ui$Internal$Model$Unkeyed(_List_Nil)),
+						A2(
+						$mdgriffith$elm_ui$Element$el,
+						A2(
+							$elm$core$List$cons,
+							$mdgriffith$elm_ui$Element$width(
+								A2($elm$core$Maybe$withDefault, $mdgriffith$elm_ui$Element$fill, trackWidth)),
+							A2(
+								$elm$core$List$cons,
+								$mdgriffith$elm_ui$Element$height(
+									A2(
+										$elm$core$Maybe$withDefault,
+										$mdgriffith$elm_ui$Element$px(20),
+										trackHeight)),
+								_Utils_ap(
+									attributes,
+									_List_fromArray(
+										[
+											$mdgriffith$elm_ui$Element$behindContent(
+											vertical ? A3($mdgriffith$elm_ui$Element$Input$viewVerticalThumb, factor, thumbAttributes, trackWidth) : A3($mdgriffith$elm_ui$Element$Input$viewHorizontalThumb, factor, thumbAttributes, trackHeight))
+										])))),
+						$mdgriffith$elm_ui$Element$none)
+					])));
+	});
+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 $miyamoen$select_list$Types$reverseAppend = F2(
+	function (xs, ys) {
+		return A3($elm$core$List$foldl, $elm$core$List$cons, ys, xs);
+	});
+var $miyamoen$select_list$Types$toList = function (_v0) {
+	var before = _v0.a;
+	var a = _v0.b;
+	var after = _v0.c;
+	return A2(
+		$miyamoen$select_list$Types$reverseAppend,
+		before,
+		A2($elm$core$List$cons, a, after));
+};
+var $miyamoen$select_list$SelectList$toList = $miyamoen$select_list$Types$toList;
+var $author$project$Internal$List$internalButton = F2(
+	function (style, list) {
+		return A2(
+			$elm$core$List$indexedMap,
+			function (i) {
+				return $author$project$Internal$Select$selectButton(
+					A2(
+						$author$project$Widget$Customize$elementButton,
+						_Utils_ap(
+							style.element,
+							($elm$core$List$length(list) === 1) ? style.ifSingleton : ((!i) ? style.ifFirst : (_Utils_eq(
+								i,
+								$elm$core$List$length(list) - 1) ? style.ifLast : style.otherwise))),
+						style.content));
+			},
+			list);
+	});
+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;
+					if ((_Utils_cmp(r, x / 2) > -1) && (_Utils_cmp(b, y / 2) > -1)) {
+						var newTop = t - (y / 2);
+						var newRight = r - (x / 2);
+						var newLeft = l - (x / 2);
+						var newBottom = b - (y / 2);
+						return $elm$core$Maybe$Just(
+							A2(
+								$mdgriffith$elm_ui$Internal$Model$StyleClass,
+								$mdgriffith$elm_ui$Internal$Flag$padding,
+								A5(
+									$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+									A4($mdgriffith$elm_ui$Internal$Model$paddingNameFloat, newTop, newRight, newBottom, newLeft),
+									newTop,
+									newRight,
+									newBottom,
+									newLeft)));
+					} else {
+						return $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$Internal$List$wrappedButtonRow = function (style) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$author$project$Internal$List$internalButton(
+			{content: style.content, element: style.elementRow.content.element, ifFirst: style.elementRow.content.ifFirst, ifLast: style.elementRow.content.ifLast, ifSingleton: style.elementRow.content.ifSingleton, otherwise: style.elementRow.content.otherwise}),
+		$mdgriffith$elm_ui$Element$wrappedRow(style.elementRow.elementRow));
+};
+var $author$project$Widget$wrappedButtonRow = $author$project$Internal$List$wrappedButtonRow;
+var $author$project$UIExplorer$Story$storyView = F2(
+	function (context, model) {
+		switch (model.$) {
+			case 'RangeStoryModel':
+				var label = model.a;
+				var unit = model.b.unit;
+				var min = model.b.min;
+				var max = model.b.max;
+				var value = model.b.value;
+				return A2(
+					$mdgriffith$elm_ui$Element$column,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$spacing(8),
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							$author$project$Widget$Material$Typography$caption,
+							$mdgriffith$elm_ui$Element$text(
+								label + (' (' + ($elm$core$String$fromInt(value) + (unit + ')'))))),
+							A2(
+							$mdgriffith$elm_ui$Element$Input$slider,
+							_List_Nil,
+							{
+								label: $mdgriffith$elm_ui$Element$Input$labelHidden(label),
+								max: max,
+								min: min,
+								onChange: A2(
+									$elm$core$Basics$composeR,
+									$elm$core$Basics$round,
+									A2(
+										$elm$core$Basics$composeR,
+										$elm$core$String$fromInt,
+										$author$project$UIExplorer$Story$StorySelect(label))),
+								step: $elm$core$Maybe$Just(1.0),
+								thumb: $mdgriffith$elm_ui$Element$Input$defaultThumb,
+								value: value
+							})
+						]));
+			case 'TextStoryModel':
+				var label = model.a;
+				var value = model.b;
+				return A2(
+					$mdgriffith$elm_ui$Element$column,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$spacing(8),
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							$author$project$Widget$Material$Typography$caption,
+							$mdgriffith$elm_ui$Element$text(label)),
+							A2(
+							$author$project$Widget$textInput,
+							$author$project$Widget$Material$textInput(context.palette),
+							{
+								chips: _List_Nil,
+								label: label,
+								onChange: $author$project$UIExplorer$Story$StorySelect(label),
+								placeholder: $elm$core$Maybe$Nothing,
+								text: value
+							})
+						]));
+			case 'OptionListStoryModel':
+				var label = model.a;
+				var options = model.b;
+				return A2(
+					$mdgriffith$elm_ui$Element$column,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$spacing(8),
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							$author$project$Widget$Material$Typography$caption,
+							$mdgriffith$elm_ui$Element$text(label)),
+							A2(
+							$author$project$Widget$wrappedButtonRow,
+							{
+								content: $author$project$Widget$Material$chip(context.palette),
+								elementRow: $author$project$Widget$Material$row
+							},
+							$author$project$Widget$select(
+								{
+									onSelect: function (selected) {
+										return A2(
+											$elm$core$Maybe$map,
+											A2(
+												$elm$core$Basics$composeR,
+												$elm$core$Tuple$second,
+												$author$project$UIExplorer$Story$StorySelect(label)),
+											$elm$core$List$head(
+												A2(
+													$elm$core$List$filter,
+													function (_v1) {
+														var i = _v1.a;
+														return _Utils_eq(selected, i);
+													},
+													A2(
+														$elm$core$List$indexedMap,
+														F2(
+															function (i, opt) {
+																return _Utils_Tuple2(i, opt);
+															}),
+														$miyamoen$select_list$SelectList$toList(options)))));
+									},
+									options: A2(
+										$elm$core$List$map,
+										function (opt) {
+											return {
+												icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+												text: opt
+											};
+										},
+										$miyamoen$select_list$SelectList$toList(options)),
+									selected: $elm$core$Maybe$Just(
+										$miyamoen$select_list$SelectList$index(options))
+								}))
+						]));
+			default:
+				var label = model.a;
+				var value = model.b;
+				return A2(
+					$mdgriffith$elm_ui$Element$row,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$spaceEvenly,
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							$author$project$Widget$Material$Typography$caption,
+							$mdgriffith$elm_ui$Element$text(label)),
+							A2(
+							$author$project$Widget$switch,
+							$author$project$Widget$Material$switch(context.palette),
+							{
+								active: value,
+								description: label,
+								onPress: $elm$core$Maybe$Just(
+									A2(
+										$author$project$UIExplorer$Story$StorySelect,
+										label,
+										value ? 'f' : 't'))
+							})
+						]));
+		}
+	});
+var $author$project$UIExplorer$Story$storyTile = F3(
+	function (title, stories, _v0) {
+		return {
+			init: function (_v1) {
+				return _Utils_Tuple2(
+					A2(
+						$elm$core$List$filterMap,
+						$author$project$UIExplorer$Story$storyHelp,
+						$elm$core$List$reverse(stories)),
+					$elm$core$Platform$Cmd$none);
+			},
+			subscriptions: $elm$core$Basics$always($elm$core$Platform$Sub$none),
+			update: F2(
+				function (msg, model) {
+					var story = msg.a;
+					var value = msg.b;
+					return _Utils_Tuple2(
+						A3($author$project$UIExplorer$Story$selectStory, story, value, model),
+						$elm$core$Platform$Cmd$none);
+				}),
+			views: F2(
+				function (context, model) {
+					return _List_fromArray(
+						[
+							{
+							attributes: _List_Nil,
+							body: A2(
+								$mdgriffith$elm_ui$Element$column,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$spacing(8),
+										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+									]),
+								A2(
+									$elm$core$List$map,
+									$author$project$UIExplorer$Story$storyView(context),
+									model)),
+							position: $author$project$UIExplorer$Tile$NewRightColumnTile,
+							title: title
+						}
+						]);
+				})
+		};
+	});
+var $author$project$UIExplorer$Story$build = function (builder) {
+	return A2(
+		$author$project$UIExplorer$Tile$linkGroup,
+		{
+			init: builder.tilelist.init,
+			subscriptions: A2($elm$core$Basics$composeR, $elm$core$Tuple$second, builder.tilelist.subscriptions),
+			update: F2(
+				function (msg, _v0) {
+					var model = _v0.b;
+					return A2(builder.tilelist.update, msg, model);
+				}),
+			views: F2(
+				function (context, _v1) {
+					var selectorModel = _v1.a;
+					var model = _v1.b;
+					return A2(
+						$elm$core$List$map,
+						function (view) {
+							return A2(view, context, model);
+						},
+						builder.tilelist.views(
+							builder.storiesToValue(
+								$elm$core$List$reverse(
+									$author$project$UIExplorer$Story$selectedStories(selectorModel)))));
+				})
+		},
+		A3($author$project$UIExplorer$Story$storyTile, builder.title, builder.stories, builder.storiesToValue));
+};
+var $author$project$UIExplorer$Story$OptionListStory = F2(
+	function (a, b) {
+		return {$: 'OptionListStory', a: a, b: b};
+	});
+var $author$project$UIExplorer$Story$optionListStory = F3(
+	function (label, first, options) {
+		return {
+			info: A2(
+				$author$project$UIExplorer$Story$OptionListStory,
+				label,
+				A2(
+					$elm$core$List$map,
+					$elm$core$Tuple$first,
+					A2($elm$core$List$cons, first, options))),
+			toValue: function (optLabel) {
+				return A2(
+					$elm$core$Maybe$withDefault,
+					first.b,
+					A3(
+						$elm$core$List$foldl,
+						F2(
+							function (_v0, res) {
+								var key = _v0.a;
+								var optvalue = _v0.b;
+								var _v1 = _Utils_Tuple2(
+									res,
+									_Utils_eq(optLabel, key));
+								if (_v1.a.$ === 'Just') {
+									var x = _v1.a.a;
+									return $elm$core$Maybe$Just(x);
+								} else {
+									if (_v1.b) {
+										var _v2 = _v1.a;
+										return $elm$core$Maybe$Just(optvalue);
+									} else {
+										var _v3 = _v1.a;
+										return $elm$core$Maybe$Nothing;
+									}
+								}
+							}),
+						$elm$core$Maybe$Nothing,
+						A2($elm$core$List$cons, first, options)));
+			}
+		};
+	});
+var $author$project$UIExplorer$Story$RangeStory = F2(
+	function (a, b) {
+		return {$: 'RangeStory', a: a, b: b};
+	});
+var $author$project$UIExplorer$Story$rangeStory = F2(
+	function (label, cfg) {
+		return {
+			info: A2($author$project$UIExplorer$Story$RangeStory, label, cfg),
+			toValue: A2(
+				$elm$core$Basics$composeR,
+				$elm$core$String$toInt,
+				$elm$core$Maybe$withDefault(cfg._default))
+		};
+	});
+var $author$project$UIExplorer$Story$TextStory = F2(
+	function (a, b) {
+		return {$: 'TextStory', a: a, b: b};
+	});
+var $author$project$UIExplorer$Story$textStory = F2(
+	function (label, _default) {
+		return {
+			info: A2($author$project$UIExplorer$Story$TextStory, label, _default),
+			toValue: $elm$core$Basics$identity
+		};
+	});
+var $icidasset$elm_material_icons$Material$Icons$Types$Color = function (a) {
+	return {$: 'Color', a: a};
+};
+var $author$project$UIExplorer$Story$addTile = F2(
+	function (view, tilelist) {
+		return _Utils_update(
+			tilelist,
+			{
+				views: A2(
+					$elm$core$List$append,
+					tilelist.views,
+					_List_fromArray(
+						[view]))
+			});
+	});
+var $icidasset$elm_material_icons$Material$Icons$Internal$f = $elm$svg$Svg$Attributes$fill;
+var $elm$svg$Svg$g = $elm$svg$Svg$trustedNode('g');
+var $icidasset$elm_material_icons$Material$Icons$Internal$icon = F4(
+	function (attributes, nodes, size, coloring) {
+		var sizeAsString = $elm$core$String$fromInt(size);
+		return A2(
+			$elm$svg$Svg$svg,
+			_Utils_ap(
+				attributes,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$height(sizeAsString),
+						$elm$svg$Svg$Attributes$width(sizeAsString)
+					])),
+			_List_fromArray(
+				[
+					A2(
+					$elm$svg$Svg$g,
+					_List_fromArray(
+						[
+							function () {
+							if (coloring.$ === 'Color') {
+								var color = coloring.a;
+								return $elm$svg$Svg$Attributes$fill(
+									$avh4$elm_color$Color$toCssString(color));
+							} else {
+								return $elm$svg$Svg$Attributes$fill('currentColor');
+							}
+						}()
+						]),
+					nodes)
+				]));
+	});
+var $icidasset$elm_material_icons$Material$Icons$Internal$p = $elm$svg$Svg$path;
+var $icidasset$elm_material_icons$Material$Icons$Internal$v = $elm$svg$Svg$Attributes$viewBox;
+var $icidasset$elm_material_icons$Material$Icons$change_history = A2(
+	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
+	_List_fromArray(
+		[
+			$icidasset$elm_material_icons$Material$Icons$Internal$v('0 0 24 24')
+		]),
+	_List_fromArray(
+		[
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M0 0h24v24H0V0z'),
+					$icidasset$elm_material_icons$Material$Icons$Internal$f('none')
+				]),
+			_List_Nil),
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Widget$Icon$elmMaterialIcons = F2(
+	function (wrapper, fun) {
+		return function (_v0) {
+			var size = _v0.size;
+			var color = _v0.color;
+			return A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_Nil,
+				$mdgriffith$elm_ui$Element$html(
+					A2(
+						fun,
+						size,
+						wrapper(color))));
+		};
+	});
+var $author$project$UIExplorer$Story$initStaticTiles = {
+	init: $elm$core$Basics$always(
+		_Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none)),
+	subscriptions: $elm$core$Basics$always($elm$core$Platform$Sub$none),
+	update: F2(
+		function (_v0, _v1) {
+			return _Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none);
+		}),
+	views: _List_Nil
+};
+var $elm$core$List$repeatHelp = F3(
+	function (result, n, value) {
+		repeatHelp:
+		while (true) {
+			if (n <= 0) {
+				return result;
+			} else {
+				var $temp$result = A2($elm$core$List$cons, value, result),
+					$temp$n = n - 1,
+					$temp$value = value;
+				result = $temp$result;
+				n = $temp$n;
+				value = $temp$value;
+				continue repeatHelp;
+			}
+		}
+	});
+var $elm$core$List$repeat = F2(
+	function (n, value) {
+		return A3($elm$core$List$repeatHelp, _List_Nil, n, value);
+	});
+var $mdgriffith$elm_ui$Element$scrollbarX = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$overflow, $mdgriffith$elm_ui$Internal$Style$classes.scrollbarsX);
+var $author$project$Internal$AppBar$tabBar = F2(
+	function (style, m) {
+		return A3(
+			$author$project$Internal$AppBar$internalNav,
+			_List_fromArray(
+				[
+					A2($mdgriffith$elm_ui$Element$el, style.content.menu.content.title, m.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$Internal$Select$selectButton(style.content.menu.content.menuTabButton),
+						$author$project$Internal$Select$select(m.menu)))
+				]),
+			{
+				content: {
+					actions: style.content.actions,
+					menu: {elementRow: style.content.menu.elementRow},
+					search: style.content.search
+				},
+				elementRow: style.elementRow
+			},
+			m);
+	});
+var $author$project$Widget$tabBar = $author$project$Internal$AppBar$tabBar;
+var $mdgriffith$elm_ui$Internal$Model$Bottom = {$: 'Bottom'};
+var $mdgriffith$elm_ui$Element$alignBottom = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$Bottom);
+var $author$project$Internal$Material$AppBar$menuTabButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
+						size: 18
+					},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					otherwise: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
+						size: 18
+					}
+				},
+				text: {contentText: _List_Nil}
+			},
+			elementRow: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$spacing(8),
+					$mdgriffith$elm_ui$Element$centerY,
+					$mdgriffith$elm_ui$Element$centerX
+				])
+		},
+		elementButton: _Utils_ap(
+			$author$project$Widget$Material$Typography$button,
+			_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$Material$Color$fromColor(
+						$author$project$Widget$Material$Color$accessibleTextColor(palette.primary))),
+					$mdgriffith$elm_ui$Element$alignBottom,
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$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$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		otherwise: _List_Nil
+	};
+};
+var $author$project$Internal$Material$AppBar$tabBar = function (palette) {
+	return A2(
+		$author$project$Internal$Material$AppBar$internalBar,
+		{
+			menuTabButton: $author$project$Internal$Material$AppBar$menuTabButton(palette),
+			title: _Utils_ap(
+				$author$project$Widget$Material$Typography$h6,
+				_List_fromArray(
+					[
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+					]))
+		},
+		palette);
+};
+var $author$project$Widget$Material$tabBar = $author$project$Internal$Material$AppBar$tabBar;
+var $author$project$UIExplorer$Tile$LeftColumnTile = {$: 'LeftColumnTile'};
+var $author$project$Page$viewTile = F2(
+	function (title, content) {
+		return {
+			attributes: _List_Nil,
+			body: A2(
+				$mdgriffith$elm_ui$Element$column,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+						$mdgriffith$elm_ui$Element$spacing(8)
+					]),
+				_List_fromArray(
+					[
+						A2(
+						$mdgriffith$elm_ui$Element$el,
+						$author$project$Widget$Material$Typography$caption,
+						$mdgriffith$elm_ui$Element$text(title)),
+						content
+					])),
+			position: $author$project$UIExplorer$Tile$LeftColumnTile,
+			title: $elm$core$Maybe$Nothing
+		};
+	});
+var $author$project$Page$AppBar$viewFunctions = function () {
+	var viewTabBar = F9(
+		function (titleString, deviceClass, _v2, openRightSheet, openTopSheet, primaryActions, search, _v3, _v4) {
+			var palette = _v3.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.button',
+				A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width(
+							$mdgriffith$elm_ui$Element$px(400)),
+							$mdgriffith$elm_ui$Element$scrollbarX
+						]),
+					A2(
+						$author$project$Widget$tabBar,
+						$author$project$Widget$Material$tabBar(palette),
+						{
+							deviceClass: deviceClass,
+							menu: {
+								onSelect: $elm$core$Basics$always(
+									$elm$core$Maybe$Just(_Utils_Tuple0)),
+								options: A2(
+									$elm$core$List$map,
+									function (string) {
+										return {
+											icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+											text: string
+										};
+									},
+									_List_fromArray(
+										['Home', 'About'])),
+								selected: $elm$core$Maybe$Just(0)
+							},
+							openRightSheet: openRightSheet,
+							openTopSheet: openTopSheet,
+							primaryActions: A2(
+								$elm$core$List$repeat,
+								primaryActions,
+								{
+									icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$change_history),
+									onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+									text: 'Action'
+								}),
+							search: search,
+							title: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_Nil,
+								$mdgriffith$elm_ui$Element$text(titleString))
+						})));
+		});
+	var viewMenuBar = F9(
+		function (titleString, deviceClass, openLeftSheet, openRightSheet, openTopSheet, primaryActions, search, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.button',
+				A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width(
+							$mdgriffith$elm_ui$Element$px(400)),
+							$mdgriffith$elm_ui$Element$scrollbarX
+						]),
+					A2(
+						$author$project$Widget$menuBar,
+						$author$project$Widget$Material$menuBar(palette),
+						{
+							deviceClass: deviceClass,
+							openLeftSheet: openLeftSheet,
+							openRightSheet: openRightSheet,
+							openTopSheet: openTopSheet,
+							primaryActions: A2(
+								$elm$core$List$repeat,
+								primaryActions,
+								{
+									icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$change_history),
+									onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+									text: 'Action'
+								}),
+							search: search,
+							title: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_Nil,
+								$mdgriffith$elm_ui$Element$text(titleString))
+						})));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewMenuBar, viewTabBar]));
+}();
+var $author$project$Page$AppBar$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With search',
+			_Utils_Tuple2(
+				$elm$core$Maybe$Just(
+					{
+						chips: _List_Nil,
+						label: 'Search',
+						onChange: $elm$core$Basics$always(_Utils_Tuple0),
+						placeholder: $elm$core$Maybe$Nothing,
+						text: 'Placeholder Text'
+					}),
+				$elm$core$Maybe$Nothing),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A2(
+				$author$project$UIExplorer$Story$rangeStory,
+				'Primary Actions',
+				{_default: 3, max: 5, min: 0, unit: 'Buttons'}),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'With openTopSheet event handler',
+					_Utils_Tuple2(
+						$elm$core$Maybe$Just(_Utils_Tuple0),
+						$elm$core$Maybe$Nothing),
+					true),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$boolStory,
+						'With openRightSheet event handler',
+						_Utils_Tuple2(
+							$elm$core$Maybe$Just(_Utils_Tuple0),
+							$elm$core$Maybe$Nothing),
+						true),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$boolStory,
+							'With openLeftSheet event handler',
+							_Utils_Tuple2(
+								$elm$core$Maybe$Just(_Utils_Tuple0),
+								$elm$core$Maybe$Nothing),
+							true),
+						A2(
+							$author$project$UIExplorer$Story$addStory,
+							A3(
+								$author$project$UIExplorer$Story$optionListStory,
+								'Device Class',
+								_Utils_Tuple2('Phone', $mdgriffith$elm_ui$Element$Phone),
+								_List_fromArray(
+									[
+										_Utils_Tuple2('Tablet', $mdgriffith$elm_ui$Element$Tablet),
+										_Utils_Tuple2('Desktop', $mdgriffith$elm_ui$Element$Desktop),
+										_Utils_Tuple2('BigDesktop', $mdgriffith$elm_ui$Element$BigDesktop)
+									])),
+							A2(
+								$author$project$UIExplorer$Story$addStory,
+								A2($author$project$UIExplorer$Story$textStory, 'Title', 'Title'),
+								A2(
+									$author$project$UIExplorer$Story$book,
+									$elm$core$Maybe$Just('Options'),
+									$author$project$Page$AppBar$viewFunctions)))))))));
+var $author$project$UIExplorer$Tile$Builder = function (a) {
+	return {$: 'Builder', a: a};
+};
+var $author$project$UIExplorer$Tile$nextGroup = F2(
+	function (config, _v0) {
+		var previous = _v0.a;
+		var views_ = F2(
+			function (windowSize, _v8) {
+				var previousModel = _v8.a;
+				var model = _v8.b;
+				return A2(
+					$elm$core$List$append,
+					A2(
+						$author$project$UIExplorer$Tile$mapViewList,
+						$author$project$UIExplorer$Tile$Previous,
+						A2(previous.views, windowSize, previousModel)),
+					A2(
+						$author$project$UIExplorer$Tile$mapViewList,
+						$author$project$UIExplorer$Tile$Current,
+						A2(config.views, windowSize, model)));
+			});
+		var update_ = F2(
+			function (msg, _v7) {
+				var previousModel = _v7.a;
+				var model = _v7.b;
+				if (msg.$ === 'Previous') {
+					var previousMsg = msg.a;
+					var _v5 = A2(previous.update, previousMsg, previousModel);
+					var newPreviousModel = _v5.a;
+					var previousCmds = _v5.b;
+					return _Utils_Tuple2(
+						_Utils_Tuple2(newPreviousModel, model),
+						A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Tile$Previous, previousCmds));
+				} else {
+					var currentMsg = msg.a;
+					var _v6 = A2(config.update, currentMsg, model);
+					var newModel = _v6.a;
+					var cmds = _v6.b;
+					return _Utils_Tuple2(
+						_Utils_Tuple2(previousModel, newModel),
+						A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Tile$Current, cmds));
+				}
+			});
+		var subscriptions_ = function (_v3) {
+			var previousModel = _v3.a;
+			var model = _v3.b;
+			return $elm$core$Platform$Sub$batch(
+				_List_fromArray(
+					[
+						A2(
+						$elm$core$Platform$Sub$map,
+						$author$project$UIExplorer$Tile$Current,
+						config.subscriptions(model)),
+						A2(
+						$elm$core$Platform$Sub$map,
+						$author$project$UIExplorer$Tile$Previous,
+						previous.subscriptions(previousModel))
+					]));
+		};
+		var init_ = function (flags) {
+			var _v1 = previous.init(flags);
+			var previousModel = _v1.a;
+			var previousCmds = _v1.b;
+			var _v2 = config.init(flags);
+			var model = _v2.a;
+			var cmds = _v2.b;
+			return _Utils_Tuple2(
+				_Utils_Tuple2(previousModel, model),
+				$elm$core$Platform$Cmd$batch(
+					_List_fromArray(
+						[
+							A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Tile$Previous, previousCmds),
+							A2($elm$core$Platform$Cmd$map, $author$project$UIExplorer$Tile$Current, cmds)
+						])));
+		};
+		return $author$project$UIExplorer$Tile$Builder(
+			{init: init_, subscriptions: subscriptions_, update: update_, views: views_});
+	});
+var $author$project$UIExplorer$Tile$firstGroup = function (config) {
+	return A2(
+		$author$project$UIExplorer$Tile$nextGroup,
+		config,
+		$author$project$UIExplorer$Tile$Builder(
+			{
+				init: $elm$core$Basics$always(
+					_Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none)),
+				subscriptions: $elm$core$Basics$always($elm$core$Platform$Sub$none),
+				update: F2(
+					function (_v0, m) {
+						return _Utils_Tuple2(m, $elm$core$Platform$Cmd$none);
+					}),
+				views: F2(
+					function (_v1, _v2) {
+						return _List_Nil;
+					})
+			}));
+};
+var $author$project$UIExplorer$Tile$groupSingleton = function (tile) {
+	return {
+		init: tile.init,
+		subscriptions: tile.subscriptions,
+		update: tile.update,
+		views: F2(
+			function (pagesize, model) {
+				return $elm$core$List$singleton(
+					A2(tile.view, pagesize, model));
+			})
+	};
+};
+var $author$project$UIExplorer$Tile$first = A2($elm$core$Basics$composeR, $author$project$UIExplorer$Tile$groupSingleton, $author$project$UIExplorer$Tile$firstGroup);
+var $author$project$Widget$Material$Typography$h3 = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Font$size(48)
+	]);
+var $author$project$UIExplorer$Tile$next = A2($elm$core$Basics$composeR, $author$project$UIExplorer$Tile$groupSingleton, $author$project$UIExplorer$Tile$nextGroup);
+var $mdgriffith$elm_ui$Element$Font$family = function (families) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$fontFamily,
+		A2(
+			$mdgriffith$elm_ui$Internal$Model$FontFamily,
+			A3($elm$core$List$foldl, $mdgriffith$elm_ui$Internal$Model$renderFontClassName, 'ff-', families),
+			families));
+};
+var $author$project$UIExplorer$Tile$OneColumn = function (a) {
+	return {$: 'OneColumn', a: a};
+};
+var $author$project$UIExplorer$Tile$TwoColumn = F2(
+	function (a, b) {
+		return {$: 'TwoColumn', a: a, b: b};
+	});
+var $author$project$UIExplorer$Tile$layoutAddTile = F2(
+	function (view, layout) {
+		var _v0 = view.position;
+		switch (_v0.$) {
+			case 'FullWidthTile':
+				if (layout.b && (layout.a.$ === 'OneColumn')) {
+					var items = layout.a.a;
+					var tail = layout.b;
+					return A2(
+						$elm$core$List$cons,
+						$author$project$UIExplorer$Tile$OneColumn(
+							A2($elm$core$List$cons, view, items)),
+						tail);
+				} else {
+					return A2(
+						$elm$core$List$cons,
+						$author$project$UIExplorer$Tile$OneColumn(
+							_List_fromArray(
+								[view])),
+						layout);
+				}
+			case 'LeftColumnTile':
+				if (layout.b && (layout.a.$ === 'TwoColumn')) {
+					var _v3 = layout.a;
+					var left = _v3.a;
+					var right = _v3.b;
+					var tail = layout.b;
+					return A2(
+						$elm$core$List$cons,
+						A2(
+							$author$project$UIExplorer$Tile$TwoColumn,
+							A2($elm$core$List$cons, view, left),
+							right),
+						tail);
+				} else {
+					return A2(
+						$elm$core$List$cons,
+						A2(
+							$author$project$UIExplorer$Tile$TwoColumn,
+							_List_fromArray(
+								[view]),
+							_List_Nil),
+						layout);
+				}
+			case 'NewLeftColumnTile':
+				return A2(
+					$elm$core$List$cons,
+					A2(
+						$author$project$UIExplorer$Tile$TwoColumn,
+						_List_fromArray(
+							[view]),
+						_List_Nil),
+					layout);
+			case 'RightColumnTile':
+				if (layout.b && (layout.a.$ === 'TwoColumn')) {
+					var _v5 = layout.a;
+					var left = _v5.a;
+					var right = _v5.b;
+					var tail = layout.b;
+					return A2(
+						$elm$core$List$cons,
+						A2(
+							$author$project$UIExplorer$Tile$TwoColumn,
+							left,
+							A2($elm$core$List$cons, view, right)),
+						tail);
+				} else {
+					return A2(
+						$elm$core$List$cons,
+						A2(
+							$author$project$UIExplorer$Tile$TwoColumn,
+							_List_Nil,
+							_List_fromArray(
+								[view])),
+						layout);
+				}
+			default:
+				return A2(
+					$elm$core$List$cons,
+					A2(
+						$author$project$UIExplorer$Tile$TwoColumn,
+						_List_Nil,
+						_List_fromArray(
+							[view])),
+					layout);
+		}
+	});
+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 $author$project$Internal$Material$List$cardColumn = function (palette) {
+	return {
+		content: {
+			element: _List_fromArray(
+				[
+					A2($mdgriffith$elm_ui$Element$paddingXY, 16, 12),
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(palette.surface)),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Widget$Material$Color$accessibleTextColor(palette.surface))),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A2($author$project$Widget$Material$Color$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})
+				]),
+			ifSingleton: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$rounded(4),
+					$mdgriffith$elm_ui$Element$Border$width(1)
+				]),
+			otherwise: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$rounded(0)
+				])
+		},
+		elementColumn: _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$Material$Color$shadow(4))
+					])),
+				$mdgriffith$elm_ui$Element$alignTop,
+				$mdgriffith$elm_ui$Element$Border$rounded(4),
+				$mdgriffith$elm_ui$Element$Border$width(1),
+				$mdgriffith$elm_ui$Element$Border$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface)))
+			])
+	};
+};
+var $author$project$Widget$Material$cardColumn = $author$project$Internal$Material$List$cardColumn;
+var $author$project$UIExplorer$Tile$layoutView = F3(
+	function (palette, _v0, view) {
+		var _v1 = view.title;
+		if (_v1.$ === 'Just') {
+			var string = _v1.a;
+			return A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
+					]),
+				A2(
+					$author$project$Widget$itemList,
+					$author$project$Widget$Material$cardColumn(palette),
+					_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$headerItem,
+							$author$project$Widget$Material$fullBleedHeader(palette),
+							string),
+							$author$project$Widget$asItem(
+							A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+									]),
+								view.body))
+						])));
+		} else {
+			return view.body;
+		}
+	});
+var $author$project$UIExplorer$Tile$layoutRowView = F2(
+	function (palette, row) {
+		if (row.$ === 'OneColumn') {
+			var items = row.a;
+			return A2(
+				$elm$core$List$map,
+				A2($author$project$UIExplorer$Tile$layoutView, palette, _List_Nil),
+				$elm$core$List$reverse(items));
+		} else {
+			var left = row.a;
+			var right = row.b;
+			return $elm$core$List$singleton(
+				A2(
+					$mdgriffith$elm_ui$Element$row,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+							$mdgriffith$elm_ui$Element$spacing(8)
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Element$column,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width(
+									$mdgriffith$elm_ui$Element$fillPortion(2)),
+									$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+									$mdgriffith$elm_ui$Element$spacing(32)
+								]),
+							A2(
+								$elm$core$List$map,
+								A2(
+									$author$project$UIExplorer$Tile$layoutView,
+									palette,
+									_List_fromArray(
+										[
+											$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
+										])),
+								$elm$core$List$reverse(left))),
+							A2(
+							$mdgriffith$elm_ui$Element$column,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width(
+									$mdgriffith$elm_ui$Element$fillPortion(1)),
+									$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+									$mdgriffith$elm_ui$Element$spacing(8)
+								]),
+							A2(
+								$elm$core$List$map,
+								A2($author$project$UIExplorer$Tile$layoutView, palette, _List_Nil),
+								$elm$core$List$reverse(right)))
+						])));
+		}
+	});
+var $mdgriffith$elm_ui$Element$Font$sansSerif = $mdgriffith$elm_ui$Internal$Model$SansSerif;
+var $mdgriffith$elm_ui$Element$Font$typeface = $mdgriffith$elm_ui$Internal$Model$Typeface;
+var $author$project$UIExplorer$Tile$page = function (_v0) {
+	var config = _v0.a;
+	return {
+		init: config.init,
+		subscriptions: config.subscriptions,
+		update: config.update,
+		view: F3(
+			function (pagesize, dark, model) {
+				var palette = dark ? $author$project$Widget$Material$darkPalette : $author$project$Widget$Material$defaultPalette;
+				return A2(
+					$mdgriffith$elm_ui$Element$column,
+					_Utils_ap(
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$padding(16),
+								$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+								$mdgriffith$elm_ui$Element$spacing(32),
+								$mdgriffith$elm_ui$Element$width(
+								$mdgriffith$elm_ui$Element$px(800)),
+								$mdgriffith$elm_ui$Element$centerX,
+								$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)
+							]),
+						$author$project$Widget$Material$Color$textAndBackground(palette.background)),
+					A2(
+						$elm$core$List$concatMap,
+						$author$project$UIExplorer$Tile$layoutRowView(palette),
+						$elm$core$List$reverse(
+							A3(
+								$elm$core$List$foldl,
+								$author$project$UIExplorer$Tile$layoutAddTile,
+								_List_Nil,
+								A2(
+									config.views,
+									{pagesize: pagesize, palette: palette},
+									model)))));
+			})
+	};
+};
+var $author$project$UIExplorer$Tile$FullWidthTile = {$: 'FullWidthTile'};
+var $author$project$UIExplorer$Tile$static = F2(
+	function (attributes, tileView) {
+		return {
+			init: function (flags) {
+				return _Utils_Tuple2(flags, $elm$core$Platform$Cmd$none);
+			},
+			subscriptions: function (_v0) {
+				return $elm$core$Platform$Sub$none;
+			},
+			update: F2(
+				function (_v1, m) {
+					return _Utils_Tuple2(m, $elm$core$Platform$Cmd$none);
+				}),
+			view: F2(
+				function (pagesize, flags) {
+					return {
+						attributes: attributes,
+						body: A2(tileView, pagesize, flags),
+						position: $author$project$UIExplorer$Tile$FullWidthTile,
+						title: $elm$core$Maybe$Nothing
+					};
+				})
+		};
+	});
+var $author$project$Page$create = function (config) {
+	return $author$project$UIExplorer$Tile$page(
+		A2(
+			$author$project$UIExplorer$Tile$nextGroup,
+			config.book,
+			A2(
+				$author$project$UIExplorer$Tile$next,
+				config.demo,
+				$author$project$UIExplorer$Tile$first(
+					A2(
+						$author$project$UIExplorer$Tile$static,
+						_List_Nil,
+						F2(
+							function (_v0, _v1) {
+								return A2(
+									$mdgriffith$elm_ui$Element$column,
+									_List_fromArray(
+										[
+											$mdgriffith$elm_ui$Element$spacing(32)
+										]),
+									_List_fromArray(
+										[
+											A2(
+											$mdgriffith$elm_ui$Element$el,
+											$author$project$Widget$Material$Typography$h3,
+											$mdgriffith$elm_ui$Element$text(config.title)),
+											A2(
+											$mdgriffith$elm_ui$Element$paragraph,
+											_List_Nil,
+											$elm$core$List$singleton(
+												$mdgriffith$elm_ui$Element$text(config.description)))
+										]));
+							}))))));
+};
+var $author$project$Page$demo = F3(
+	function (fun, context, model) {
+		return function (body) {
+			return {
+				attributes: _List_Nil,
+				body: body,
+				position: $author$project$UIExplorer$Tile$FullWidthTile,
+				title: $elm$core$Maybe$Just('Interactive Demo')
+			};
+		}(
+			A2(fun, context, model));
+	});
+var $author$project$Page$AppBar$RightSheet = {$: 'RightSheet'};
+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$Page$AppBar$init = _Utils_Tuple2(
+	{
+		active: $elm$core$Maybe$Just($author$project$Page$AppBar$RightSheet),
+		searchText: '',
+		selected: 0,
+		showDialog: false,
+		snackbar: $author$project$Widget$Snackbar$init,
+		window: {height: 200, width: 400}
+	},
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$AppBar$Resized = function (a) {
+	return {$: 'Resized', a: a};
+};
+var $author$project$Page$AppBar$TimePassed = function (a) {
+	return {$: 'TimePassed', a: a};
+};
+var $elm$time$Time$Every = F2(
+	function (a, b) {
+		return {$: 'Every', a: a, b: b};
+	});
+var $elm$time$Time$State = F2(
+	function (taggers, processes) {
+		return {processes: processes, taggers: taggers};
+	});
+var $elm$time$Time$init = $elm$core$Task$succeed(
+	A2($elm$time$Time$State, $elm$core$Dict$empty, $elm$core$Dict$empty));
+var $elm$time$Time$addMySub = F2(
+	function (_v0, state) {
+		var interval = _v0.a;
+		var tagger = _v0.b;
+		var _v1 = A2($elm$core$Dict$get, interval, state);
+		if (_v1.$ === 'Nothing') {
+			return A3(
+				$elm$core$Dict$insert,
+				interval,
+				_List_fromArray(
+					[tagger]),
+				state);
+		} else {
+			var taggers = _v1.a;
+			return A3(
+				$elm$core$Dict$insert,
+				interval,
+				A2($elm$core$List$cons, tagger, taggers),
+				state);
+		}
+	});
+var $elm$time$Time$Name = function (a) {
+	return {$: 'Name', a: a};
+};
+var $elm$time$Time$Offset = function (a) {
+	return {$: 'Offset', a: a};
+};
+var $elm$time$Time$Zone = F2(
+	function (a, b) {
+		return {$: 'Zone', a: a, b: b};
+	});
+var $elm$time$Time$customZone = $elm$time$Time$Zone;
+var $elm$time$Time$setInterval = _Time_setInterval;
+var $elm$core$Process$spawn = _Scheduler_spawn;
+var $elm$time$Time$spawnHelp = F3(
+	function (router, intervals, processes) {
+		if (!intervals.b) {
+			return $elm$core$Task$succeed(processes);
+		} else {
+			var interval = intervals.a;
+			var rest = intervals.b;
+			var spawnTimer = $elm$core$Process$spawn(
+				A2(
+					$elm$time$Time$setInterval,
+					interval,
+					A2($elm$core$Platform$sendToSelf, router, interval)));
+			var spawnRest = function (id) {
+				return A3(
+					$elm$time$Time$spawnHelp,
+					router,
+					rest,
+					A3($elm$core$Dict$insert, interval, id, processes));
+			};
+			return A2($elm$core$Task$andThen, spawnRest, spawnTimer);
+		}
+	});
+var $elm$time$Time$onEffects = F3(
+	function (router, subs, _v0) {
+		var processes = _v0.processes;
+		var rightStep = F3(
+			function (_v6, id, _v7) {
+				var spawns = _v7.a;
+				var existing = _v7.b;
+				var kills = _v7.c;
+				return _Utils_Tuple3(
+					spawns,
+					existing,
+					A2(
+						$elm$core$Task$andThen,
+						function (_v5) {
+							return kills;
+						},
+						$elm$core$Process$kill(id)));
+			});
+		var newTaggers = A3($elm$core$List$foldl, $elm$time$Time$addMySub, $elm$core$Dict$empty, subs);
+		var leftStep = F3(
+			function (interval, taggers, _v4) {
+				var spawns = _v4.a;
+				var existing = _v4.b;
+				var kills = _v4.c;
+				return _Utils_Tuple3(
+					A2($elm$core$List$cons, interval, spawns),
+					existing,
+					kills);
+			});
+		var bothStep = F4(
+			function (interval, taggers, id, _v3) {
+				var spawns = _v3.a;
+				var existing = _v3.b;
+				var kills = _v3.c;
+				return _Utils_Tuple3(
+					spawns,
+					A3($elm$core$Dict$insert, interval, id, existing),
+					kills);
+			});
+		var _v1 = A6(
+			$elm$core$Dict$merge,
+			leftStep,
+			bothStep,
+			rightStep,
+			newTaggers,
+			processes,
+			_Utils_Tuple3(
+				_List_Nil,
+				$elm$core$Dict$empty,
+				$elm$core$Task$succeed(_Utils_Tuple0)));
+		var spawnList = _v1.a;
+		var existingDict = _v1.b;
+		var killTask = _v1.c;
+		return A2(
+			$elm$core$Task$andThen,
+			function (newProcesses) {
+				return $elm$core$Task$succeed(
+					A2($elm$time$Time$State, newTaggers, newProcesses));
+			},
+			A2(
+				$elm$core$Task$andThen,
+				function (_v2) {
+					return A3($elm$time$Time$spawnHelp, router, spawnList, existingDict);
+				},
+				killTask));
+	});
+var $elm$time$Time$Posix = function (a) {
+	return {$: 'Posix', a: a};
+};
+var $elm$time$Time$millisToPosix = $elm$time$Time$Posix;
+var $elm$time$Time$now = _Time_now($elm$time$Time$millisToPosix);
+var $elm$time$Time$onSelfMsg = F3(
+	function (router, interval, state) {
+		var _v0 = A2($elm$core$Dict$get, interval, state.taggers);
+		if (_v0.$ === 'Nothing') {
+			return $elm$core$Task$succeed(state);
+		} else {
+			var taggers = _v0.a;
+			var tellTaggers = function (time) {
+				return $elm$core$Task$sequence(
+					A2(
+						$elm$core$List$map,
+						function (tagger) {
+							return A2(
+								$elm$core$Platform$sendToApp,
+								router,
+								tagger(time));
+						},
+						taggers));
+			};
+			return A2(
+				$elm$core$Task$andThen,
+				function (_v1) {
+					return $elm$core$Task$succeed(state);
+				},
+				A2($elm$core$Task$andThen, tellTaggers, $elm$time$Time$now));
+		}
+	});
+var $elm$time$Time$subMap = F2(
+	function (f, _v0) {
+		var interval = _v0.a;
+		var tagger = _v0.b;
+		return A2(
+			$elm$time$Time$Every,
+			interval,
+			A2($elm$core$Basics$composeL, f, tagger));
+	});
+_Platform_effectManagers['Time'] = _Platform_createManager($elm$time$Time$init, $elm$time$Time$onEffects, $elm$time$Time$onSelfMsg, 0, $elm$time$Time$subMap);
+var $elm$time$Time$subscription = _Platform_leaf('Time');
+var $elm$time$Time$every = F2(
+	function (interval, tagger) {
+		return $elm$time$Time$subscription(
+			A2($elm$time$Time$Every, interval, tagger));
+	});
+var $author$project$Page$AppBar$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$batch(
+		_List_fromArray(
+			[
+				$elm$browser$Browser$Events$onResize(
+				F2(
+					function (h, w) {
+						return $author$project$Page$AppBar$Resized(
+							{height: h, width: w});
+					})),
+				A2(
+				$elm$time$Time$every,
+				50,
+				$elm$core$Basics$always(
+					$author$project$Page$AppBar$TimePassed(50)))
+			]));
+};
+var $turboMaCk$queue$Queue$queue = F2(
+	function (fl, rl) {
+		if (!fl.b) {
+			return A2(
+				$turboMaCk$queue$Queue$Queue,
+				$elm$core$List$reverse(rl),
+				_List_Nil);
+		} else {
+			return A2($turboMaCk$queue$Queue$Queue, fl, rl);
+		}
+	});
+var $turboMaCk$queue$Queue$enqueue = F2(
+	function (a, _v0) {
+		var fl = _v0.a;
+		var rl = _v0.b;
+		return A2(
+			$turboMaCk$queue$Queue$queue,
+			fl,
+			A2($elm$core$List$cons, a, rl));
+	});
+var $author$project$Widget$Snackbar$insertFor = F3(
+	function (removeIn, a, model) {
+		var _v0 = model.current;
+		if (_v0.$ === 'Nothing') {
+			return _Utils_update(
+				model,
+				{
+					current: $elm$core$Maybe$Just(
+						_Utils_Tuple2(a, removeIn))
+				});
+		} else {
+			return _Utils_update(
+				model,
+				{
+					queue: A2(
+						$turboMaCk$queue$Queue$enqueue,
+						_Utils_Tuple2(a, removeIn),
+						model.queue)
+				});
+		}
+	});
+var $author$project$Widget$Snackbar$insert = $author$project$Widget$Snackbar$insertFor(10000);
+var $turboMaCk$queue$Queue$dequeue = function (_v0) {
+	var fl = _v0.a;
+	var rl = _v0.b;
+	if (!fl.b) {
+		return _Utils_Tuple2(
+			$elm$core$Maybe$Nothing,
+			A2($turboMaCk$queue$Queue$Queue, _List_Nil, _List_Nil));
+	} else {
+		var head = fl.a;
+		var tail = fl.b;
+		return _Utils_Tuple2(
+			$elm$core$Maybe$Just(head),
+			A2($turboMaCk$queue$Queue$queue, tail, rl));
+	}
+};
+var $author$project$Widget$Snackbar$dismiss = function (model) {
+	return _Utils_update(
+		model,
+		{current: $elm$core$Maybe$Nothing});
+};
+var $author$project$Widget$Snackbar$timePassed = F2(
+	function (ms, model) {
+		var _v0 = model.current;
+		if (_v0.$ === 'Nothing') {
+			var _v1 = $turboMaCk$queue$Queue$dequeue(model.queue);
+			var c = _v1.a;
+			var queue = _v1.b;
+			return _Utils_update(
+				model,
+				{current: c, queue: queue});
+		} else {
+			var _v2 = _v0.a;
+			var removeIn = _v2.b;
+			return (_Utils_cmp(removeIn, ms) < 1) ? $author$project$Widget$Snackbar$dismiss(model) : _Utils_update(
+				model,
+				{
+					current: A2(
+						$elm$core$Maybe$map,
+						$elm$core$Tuple$mapSecond(
+							$elm$core$Basics$add(-ms)),
+						model.current)
+				});
+		}
+	});
+var $author$project$Page$AppBar$update = F2(
+	function (msg, model) {
+		switch (msg.$) {
+			case 'ChangedSidebar':
+				var maybePart = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{active: maybePart}),
+					$elm$core$Platform$Cmd$none);
+			case 'Resized':
+				var window = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{window: window}),
+					$elm$core$Platform$Cmd$none);
+			case 'SetSelected':
+				var _int = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{selected: _int}),
+					$elm$core$Platform$Cmd$none);
+			case 'AddSnackbar':
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{
+							snackbar: A2($author$project$Widget$Snackbar$insert, 'This is a message', model.snackbar)
+						}),
+					$elm$core$Platform$Cmd$none);
+			case 'ShowDialog':
+				var bool = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{showDialog: bool}),
+					$elm$core$Platform$Cmd$none);
+			case 'SetSearchText':
+				var maybeString = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{searchText: maybeString}),
+					$elm$core$Platform$Cmd$none);
+			default:
+				var sec = msg.a;
+				return _Utils_Tuple2(
+					function () {
+						var _v1 = model.active;
+						_v1$2:
+						while (true) {
+							if (_v1.$ === 'Just') {
+								switch (_v1.a.$) {
+									case 'LeftSheet':
+										var _v2 = _v1.a;
+										return model;
+									case 'RightSheet':
+										var _v3 = _v1.a;
+										return model;
+									default:
+										break _v1$2;
+								}
+							} else {
+								break _v1$2;
+							}
+						}
+						return _Utils_update(
+							model,
+							{
+								snackbar: A2($author$project$Widget$Snackbar$timePassed, sec, model.snackbar)
+							});
+					}(),
+					$elm$core$Platform$Cmd$none);
+		}
+	});
+var $author$project$Page$AppBar$AddSnackbar = {$: 'AddSnackbar'};
+var $author$project$Page$AppBar$ChangedSidebar = function (a) {
+	return {$: 'ChangedSidebar', a: a};
+};
+var $author$project$Page$AppBar$LeftSheet = {$: 'LeftSheet'};
+var $author$project$Page$AppBar$Search = {$: 'Search'};
+var $author$project$Page$AppBar$SetSearchText = function (a) {
+	return {$: 'SetSearchText', a: a};
+};
+var $author$project$Page$AppBar$SetSelected = function (a) {
+	return {$: 'SetSelected', a: a};
+};
+var $author$project$Page$AppBar$ShowDialog = function (a) {
+	return {$: 'ShowDialog', a: a};
+};
+var $author$project$Internal$Material$Button$containedButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
+						size: 18
+					},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					otherwise: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
+						size: 18
+					}
+				},
+				text: {
+					contentText: function (b) {
+						return b.content.content.text.contentText;
+					}(
+						$author$project$Internal$Material$Button$baseButton(palette))
+				}
+			},
+			elementRow: _Utils_ap(
+				$author$project$Internal$Material$Button$baseButton(palette).content.elementRow,
+				_List_fromArray(
+					[
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+					]))
+		},
+		elementButton: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$shadow(
+					$author$project$Widget$Material$Color$shadow(2)),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary))),
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Material$Color$shadow(12))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary))),
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Material$Color$shadow(6))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary))),
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Material$Color$shadow(6))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary))),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Widget$Material$Color$accessibleTextColor(palette.primary)))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A2(
+							$author$project$Widget$Material$Color$scaleOpacity,
+							$author$project$Widget$Material$Color$buttonDisabledOpacity,
+							$author$project$Internal$Material$Palette$gray(palette)))),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$Border$shadow(
+					$author$project$Widget$Material$Color$shadow(0)),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		otherwise: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(palette.primary)),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Widget$Material$Color$accessibleTextColor(palette.primary)))
+			])
+	};
+};
+var $author$project$Internal$Material$Button$textButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {color: palette.primary, size: 18},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					otherwise: {color: palette.primary, size: 18}
+				},
+				text: {
+					contentText: function (b) {
+						return b.content.content.text.contentText;
+					}(
+						$author$project$Internal$Material$Button$baseButton(palette))
+				}
+			},
+			elementRow: function (b) {
+				return b.content.elementRow;
+			}(
+				$author$project$Internal$Material$Button$baseButton(palette))
+		},
+		elementButton: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(palette.primary)),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		otherwise: _List_Nil
+	};
+};
+var $author$project$Internal$Material$Dialog$alertDialog = function (palette) {
+	return {
+		content: {
+			buttons: {
+				content: {
+					accept: $author$project$Internal$Material$Button$containedButton(palette),
+					dismiss: $author$project$Internal$Material$Button$textButton(palette)
+				},
+				elementRow: _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
+					])
+			},
+			text: {
+				contentText: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$paddingEach(
+						{bottom: 0, left: 24, right: 24, top: 20})
+					])
+			},
+			title: {
+				contentText: _Utils_ap(
+					$author$project$Widget$Material$Typography$h6,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$paddingEach(
+							{bottom: 0, left: 24, right: 24, top: 20})
+						]))
+			}
+		},
+		elementColumn: _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$Material$Color$fromColor(palette.surface))
+			])
+	};
+};
+var $author$project$Widget$Material$alertDialog = $author$project$Internal$Material$Dialog$alertDialog;
+var $author$project$Widget$button = function () {
+	var fun = $author$project$Internal$Button$button;
+	return fun;
+}();
+var $author$project$Widget$Material$containedButton = $author$project$Internal$Material$Button$containedButton;
+var $author$project$Page$AppBar$container = function (palette) {
+	return _Utils_ap(
+		$author$project$Widget$Material$Color$textAndBackground(palette.background),
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Font$family(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Font$typeface('Roboto'),
+						$mdgriffith$elm_ui$Element$Font$sansSerif
+					])),
+				$mdgriffith$elm_ui$Element$Font$size(16),
+				$mdgriffith$elm_ui$Element$Font$letterSpacing(0.5)
+			]));
+};
+var $author$project$Internal$Button$textButton = F2(
+	function (style, _v0) {
+		var onPress = _v0.onPress;
+		var text = _v0.text;
+		return A2(
+			$author$project$Internal$Button$button,
+			style,
+			{
+				icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+				onPress: onPress,
+				text: text
+			});
+	});
+var $author$project$Internal$Dialog$dialog = F2(
+	function (style, _v0) {
+		var title = _v0.title;
+		var text = _v0.text;
+		var accept = _v0.accept;
+		var dismiss = _v0.dismiss;
+		return {
+			content: A2(
+				$mdgriffith$elm_ui$Element$column,
+				_Utils_ap(
+					_List_fromArray(
+						[$mdgriffith$elm_ui$Element$centerX, $mdgriffith$elm_ui$Element$centerY]),
+					style.elementColumn),
+				_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.content.title.contentText)),
+							title)),
+						A2(
+						$mdgriffith$elm_ui$Element$paragraph,
+						style.content.text.contentText,
+						$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.content.buttons.elementRow),
+						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.content.buttons.content.accept, acceptButton));
+								} else {
+									var acceptButton = _v1.a.a;
+									var dismissButton = _v1.b.a;
+									return _List_fromArray(
+										[
+											A2($author$project$Internal$Button$textButton, style.content.buttons.content.dismiss, dismissButton),
+											A2($author$project$Internal$Button$textButton, style.content.buttons.content.accept, acceptButton)
+										]);
+								}
+							} else {
+								return _List_Nil;
+							}
+						}())
+					])),
+			onDismiss: function () {
+				var _v3 = _Utils_Tuple2(accept, dismiss);
+				if (_v3.a.$ === 'Nothing') {
+					if (_v3.b.$ === 'Nothing') {
+						var _v4 = _v3.a;
+						var _v5 = _v3.b;
+						return $elm$core$Maybe$Nothing;
+					} else {
+						var _v6 = _v3.a;
+						var onPress = _v3.b.a.onPress;
+						return onPress;
+					}
+				} else {
+					return $elm$core$Maybe$Nothing;
+				}
+			}()
+		};
+	});
+var $author$project$Widget$dialog = function () {
+	var fun = $author$project$Internal$Dialog$dialog;
+	return fun;
+}();
+var $author$project$Widget$Customize$mapElementColumn = F2(
+	function (fun, a) {
+		return _Utils_update(
+			a,
+			{
+				elementColumn: fun(a.elementColumn)
+			});
+	});
+var $author$project$Widget$Customize$elementColumn = F2(
+	function (list, a) {
+		return A2(
+			$author$project$Widget$Customize$mapElementColumn,
+			function (b) {
+				return _Utils_ap(b, list);
+			},
+			a);
+	});
+var $author$project$Widget$Layout$leftSheet = F2(
+	function (style, _v0) {
+		var title = _v0.title;
+		var onDismiss = _v0.onDismiss;
+		var menu = _v0.menu;
+		return {
+			content: A2(
+				$author$project$Internal$List$itemList,
+				A2(
+					$author$project$Widget$Customize$elementColumn,
+					_List_fromArray(
+						[$mdgriffith$elm_ui$Element$alignLeft]),
+					style.sheet),
+				A2(
+					$elm$core$List$cons,
+					$author$project$Internal$Item$asItem(title),
+					A2($author$project$Internal$Item$selectItem, style.button, menu))),
+			onDismiss: $elm$core$Maybe$Just(onDismiss)
+		};
+	});
 var $author$project$Widget$Layout$orderModals = function (modals) {
 	return A2(
 		$elm$core$List$filterMap,
@@ -18470,27 +20368,6 @@ var $author$project$Widget$Layout$orderModals = function (modals) {
 		_List_fromArray(
 			[modals.dialog, modals.leftSheet, modals.rightSheet, modals.topSheet]));
 };
-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 $elm$core$List$takeReverse = F3(
 	function (n, list, kept) {
 		takeReverse:
@@ -18623,100 +20500,6 @@ var $author$project$Widget$Layout$partitionActions = function (actions) {
 		primaryActions: ($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)))
 	};
 };
-var $feathericons$elm_feather$FeatherIcons$penTool = A2(
-	$feathericons$elm_feather$FeatherIcons$makeBuilder,
-	'pen-tool',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M12 19l7-7 3 3-7 7-3-3z')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M2 2l7.586 7.586')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$circle,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$cx('11'),
-					$elm$svg$Svg$Attributes$cy('11'),
-					$elm$svg$Svg$Attributes$r('2')
-				]),
-			_List_Nil)
-		]));
-var $mdgriffith$elm_ui$Internal$Model$Paragraph = {$: 'Paragraph'};
-var $mdgriffith$elm_ui$Element$paragraph = F2(
-	function (attrs, children) {
-		return A4(
-			$mdgriffith$elm_ui$Internal$Model$element,
-			$mdgriffith$elm_ui$Internal$Model$asParagraph,
-			$mdgriffith$elm_ui$Internal$Model$div,
-			A2(
-				$elm$core$List$cons,
-				$mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$Paragraph),
-				A2(
-					$elm$core$List$cons,
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					A2(
-						$elm$core$List$cons,
-						$mdgriffith$elm_ui$Element$spacing(5),
-						attrs))),
-			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
-	});
-var $author$project$Internal$Item$insetItem = F2(
-	function (s, _v0) {
-		var onPress = _v0.onPress;
-		var text = _v0.text;
-		var icon = _v0.icon;
-		var content = _v0.content;
-		return A2(
-			$author$project$Internal$Item$toItem,
-			s,
-			function (style) {
-				return A2(
-					$mdgriffith$elm_ui$Element$Input$button,
-					_Utils_ap(
-						style.elementButton,
-						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
-					{
-						label: A2(
-							$mdgriffith$elm_ui$Element$row,
-							style.content.elementRow,
-							_List_fromArray(
-								[
-									A2(
-									$mdgriffith$elm_ui$Element$el,
-									style.content.content.icon.element,
-									icon(style.content.content.icon.content)),
-									A2(
-									$mdgriffith$elm_ui$Element$el,
-									style.content.content.text.elementText,
-									A2(
-										$mdgriffith$elm_ui$Element$paragraph,
-										_List_Nil,
-										$elm$core$List$singleton(
-											$mdgriffith$elm_ui$Element$text(text)))),
-									content(style.content.content.content)
-								])),
-						onPress: onPress
-					});
-			});
-	});
 var $author$project$Widget$Layout$rightSheet = F2(
 	function (style, _v0) {
 		var onDismiss = _v0.onDismiss;
@@ -18749,6 +20532,36 @@ var $author$project$Widget$Layout$rightSheet = F2(
 			onDismiss: $elm$core$Maybe$Just(onDismiss)
 		};
 	});
+var $author$project$Page$AppBar$searchFill = function (palette) {
+	return {
+		content: {
+			chips: {
+				content: $author$project$Widget$Material$chip(palette),
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spacing(8)
+					])
+			},
+			text: {
+				elementTextInput: _Utils_ap(
+					$author$project$Widget$Material$Color$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)
+						]))
+			}
+		},
+		elementRow: _Utils_ap(
+			$author$project$Widget$Material$Color$textAndBackground(palette.surface),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(56))
+				]))
+	};
+};
 var $author$project$Widget$Customize$elementRow = F2(
 	function (list, a) {
 		return A2(
@@ -18833,38 +20646,1516 @@ var $author$project$Internal$Modal$singleModal = A2(
 			}),
 		$elm$core$Maybe$withDefault(_List_Nil)));
 var $author$project$Widget$singleModal = $author$project$Internal$Modal$singleModal;
-var $author$project$Internal$AppBar$tabBar = F2(
-	function (style, m) {
-		return A3(
-			$author$project$Internal$AppBar$internalNav,
-			_List_fromArray(
-				[
-					A2($mdgriffith$elm_ui$Element$el, style.content.menu.content.title, m.title),
-					A2(
-					$mdgriffith$elm_ui$Element$row,
+var $author$project$Widget$Material$Color$accessibleWithTextColor = F2(
+	function (c, color) {
+		var newConstrast = 7;
+		var l2 = 1 + ($avh4$elm_color$Color$toRgba(color).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(color) - 1));
+		var lighterLuminance = (newConstrast * (l2 + 0.05)) - 0.05;
+		var l1 = 1 + ($avh4$elm_color$Color$toRgba(c).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(c) - 1));
+		var darkerLuminance = (l2 + 0.05) - (0.05 / newConstrast);
+		return ((_Utils_cmp(l1, l2) > 0) ? ((((l1 + 0.05) / (l2 + 0.05)) < 7) ? A2(
+			$elm$core$Basics$composeR,
+			$noahzgordon$elm_color_extra$Color$Convert$colorToLab,
+			A2(
+				$elm$core$Basics$composeR,
+				function (col) {
+					return _Utils_update(
+						col,
+						{l: 100 * lighterLuminance});
+				},
+				$noahzgordon$elm_color_extra$Color$Convert$labToColor)) : $elm$core$Basics$identity) : ((((l2 + 0.05) / (l1 + 0.05)) < 7) ? A2(
+			$elm$core$Basics$composeR,
+			$noahzgordon$elm_color_extra$Color$Convert$colorToLab,
+			A2(
+				$elm$core$Basics$composeR,
+				function (col) {
+					return _Utils_update(
+						col,
+						{l: 100 * darkerLuminance});
+				},
+				$noahzgordon$elm_color_extra$Color$Convert$labToColor)) : $elm$core$Basics$identity))(c);
+	});
+var $author$project$Widget$Material$Color$dark = A3($avh4$elm_color$Color$rgb255, 50, 50, 50);
+var $author$project$Internal$Material$Snackbar$snackbar = function (palette) {
+	return {
+		content: {
+			button: A2(
+				$author$project$Widget$Customize$elementButton,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Font$color(
+						$author$project$Widget$Material$Color$fromColor(
+							A2($author$project$Widget$Material$Color$accessibleWithTextColor, palette.primary, $author$project$Widget$Material$Color$dark)))
+					]),
+				$author$project$Internal$Material$Button$textButton(palette)),
+			text: {
+				elementText: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$centerX,
+						A2($mdgriffith$elm_ui$Element$paddingXY, 10, 8)
+					])
+			}
+		},
+		elementRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$dark)),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Widget$Material$Color$accessibleTextColor($author$project$Widget$Material$Color$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$Material$Color$shadow(2))
+			])
+	};
+};
+var $author$project$Widget$Material$snackbar = $author$project$Internal$Material$Snackbar$snackbar;
+var $author$project$Widget$Snackbar$current = function (model) {
+	return A2($elm$core$Maybe$map, $elm$core$Tuple$first, model.current);
+};
+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.elementRow,
+						_List_fromArray(
+							[
+								A2(
+								$mdgriffith$elm_ui$Element$paragraph,
+								style.content.text.elementText,
+								$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$Internal$Button$textButton(style.content.button),
+									button))
+							]));
+				}),
+			$author$project$Widget$Snackbar$current(model));
+	});
+var $author$project$Page$AppBar$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var snackbar = _v1.snackbar;
+		var searchText = _v1.searchText;
+		var selected = _v1.selected;
+		var showDialog = _v1.showDialog;
+		var active = _v1.active;
+		var titleEl = A2(
+			$mdgriffith$elm_ui$Element$el,
+			_Utils_ap(
+				$author$project$Widget$Material$Typography$h6,
+				_List_fromArray(
+					[
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+					])),
+			$mdgriffith$elm_ui$Element$text('Title'));
+		var snackbarElem = 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$width($mdgriffith$elm_ui$Element$shrink)
-						]),
-					A2(
-						$elm$core$List$map,
-						$author$project$Internal$Select$selectButton(style.content.menu.content.menuTabButton),
-						$author$project$Internal$Select$select(m.menu)))
-				]),
-			{
-				content: {
-					actions: style.content.actions,
-					menu: {elementRow: style.content.menu.elementRow},
-					search: style.content.search
+							$mdgriffith$elm_ui$Element$padding(8),
+							$mdgriffith$elm_ui$Element$alignBottom,
+							$mdgriffith$elm_ui$Element$alignRight
+						])),
+				A3(
+					$author$project$Widget$Snackbar$view,
+					$author$project$Widget$Material$snackbar(palette),
+					function (text) {
+						return {button: $elm$core$Maybe$Nothing, text: text};
+					},
+					snackbar)));
+		var search = {chips: _List_Nil, label: 'Search', onChange: $author$project$Page$AppBar$SetSearchText, placeholder: $elm$core$Maybe$Nothing, text: searchText};
+		var onDismiss = $author$project$Page$AppBar$ChangedSidebar($elm$core$Maybe$Nothing);
+		var menu = {
+			onSelect: A2($elm$core$Basics$composeR, $author$project$Page$AppBar$SetSelected, $elm$core$Maybe$Just),
+			options: A2(
+				$elm$core$List$map,
+				function (string) {
+					return {
+						icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+						text: string
+					};
 				},
-				elementRow: style.elementRow
-			},
-			m);
+				_List_fromArray(
+					['Home', 'About'])),
+			selected: $elm$core$Maybe$Just(selected)
+		};
+		var dialog = showDialog ? $elm$core$Maybe$Just(
+			A2(
+				$author$project$Widget$dialog,
+				$author$project$Widget$Material$alertDialog(palette),
+				{
+					accept: $elm$core$Maybe$Nothing,
+					dismiss: $elm$core$Maybe$Just(
+						{
+							onPress: $elm$core$Maybe$Just(
+								$author$project$Page$AppBar$ShowDialog(false)),
+							text: 'Accept'
+						}),
+					text: 'This is a dialog window',
+					title: $elm$core$Maybe$Just('Dialog')
+				})) : $elm$core$Maybe$Nothing;
+		var deviceClass = $mdgriffith$elm_ui$Element$Phone;
+		var actions = A2(
+			$elm$core$List$repeat,
+			5,
+			{
+				icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$change_history),
+				onPress: $elm$core$Maybe$Nothing,
+				text: 'Action'
+			});
+		var _v2 = $author$project$Widget$Layout$partitionActions(actions);
+		var primaryActions = _v2.primaryActions;
+		var moreActions = _v2.moreActions;
+		var modals = $author$project$Widget$Layout$orderModals(
+			{
+				bottomSheet: $elm$core$Maybe$Nothing,
+				dialog: dialog,
+				leftSheet: _Utils_eq(
+					active,
+					$elm$core$Maybe$Just($author$project$Page$AppBar$LeftSheet)) ? $elm$core$Maybe$Just(
+					A2(
+						$author$project$Widget$Layout$leftSheet,
+						{
+							button: $author$project$Widget$Material$selectItem(palette),
+							sheet: $author$project$Widget$Material$sideSheet(palette)
+						},
+						{menu: menu, onDismiss: onDismiss, title: titleEl})) : $elm$core$Maybe$Nothing,
+				rightSheet: _Utils_eq(
+					active,
+					$elm$core$Maybe$Just($author$project$Page$AppBar$RightSheet)) ? $elm$core$Maybe$Just(
+					A2(
+						$author$project$Widget$Layout$rightSheet,
+						{
+							insetItem: $author$project$Widget$Material$insetItem(palette),
+							sheet: $author$project$Widget$Material$sideSheet(palette)
+						},
+						{moreActions: moreActions, onDismiss: onDismiss})) : $elm$core$Maybe$Nothing,
+				topSheet: _Utils_eq(
+					active,
+					$elm$core$Maybe$Just($author$project$Page$AppBar$Search)) ? $elm$core$Maybe$Just(
+					A2(
+						$author$project$Widget$Layout$searchSheet,
+						$author$project$Page$AppBar$searchFill(palette),
+						{onDismiss: onDismiss, search: search})) : $elm$core$Maybe$Nothing
+			});
+		var nav = (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) || (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Tablet) || ($elm$core$List$length(menu.options) > 5))) ? A2(
+			$author$project$Widget$menuBar,
+			$author$project$Widget$Material$menuBar(palette),
+			{
+				deviceClass: deviceClass,
+				openLeftSheet: $elm$core$Maybe$Just(
+					$author$project$Page$AppBar$ChangedSidebar(
+						$elm$core$Maybe$Just($author$project$Page$AppBar$LeftSheet))),
+				openRightSheet: $elm$core$Maybe$Just(
+					$author$project$Page$AppBar$ChangedSidebar(
+						$elm$core$Maybe$Just($author$project$Page$AppBar$RightSheet))),
+				openTopSheet: $elm$core$Maybe$Just(
+					$author$project$Page$AppBar$ChangedSidebar(
+						$elm$core$Maybe$Just($author$project$Page$AppBar$Search))),
+				primaryActions: primaryActions,
+				search: $elm$core$Maybe$Just(search),
+				title: titleEl
+			}) : A2(
+			$author$project$Widget$tabBar,
+			$author$project$Widget$Material$tabBar(palette),
+			{
+				deviceClass: deviceClass,
+				menu: menu,
+				openRightSheet: $elm$core$Maybe$Just(
+					$author$project$Page$AppBar$ChangedSidebar(
+						$elm$core$Maybe$Just($author$project$Page$AppBar$RightSheet))),
+				openTopSheet: $elm$core$Maybe$Nothing,
+				primaryActions: primaryActions,
+				search: $elm$core$Maybe$Just(search),
+				title: titleEl
+			});
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			$elm$core$List$concat(
+				_List_fromArray(
+					[
+						$author$project$Page$AppBar$container(palette),
+						_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$inFront(snackbarElem)
+						]),
+						$author$project$Widget$singleModal(modals),
+						_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))
+						])
+					])),
+			A2(
+				$mdgriffith$elm_ui$Element$column,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+						$mdgriffith$elm_ui$Element$spacing(8)
+					]),
+				_List_fromArray(
+					[
+						nav,
+						A2(
+						$author$project$Widget$button,
+						$author$project$Widget$Material$containedButton(palette),
+						{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							onPress: $elm$core$Maybe$Just($author$project$Page$AppBar$AddSnackbar),
+							text: 'Add Notification'
+						})
+					])));
 	});
-var $author$project$Widget$tabBar = $author$project$Internal$AppBar$tabBar;
+var $author$project$Page$AppBar$demo = {
+	init: $elm$core$Basics$always($author$project$Page$AppBar$init),
+	subscriptions: $author$project$Page$AppBar$subscriptions,
+	update: $author$project$Page$AppBar$update,
+	view: $author$project$Page$demo($author$project$Page$AppBar$view)
+};
+var $author$project$Page$AppBar$description = 'The top app bar displays information and actions relating to the current screen.';
+var $author$project$Page$AppBar$title = 'App Bar';
+var $author$project$Page$AppBar$page = $author$project$Page$create(
+	{book: $author$project$Page$AppBar$book, demo: $author$project$Page$AppBar$demo, description: $author$project$Page$AppBar$description, title: $author$project$Page$AppBar$title});
+var $icidasset$elm_material_icons$Material$Icons$done = A2(
+	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
+	_List_fromArray(
+		[
+			$icidasset$elm_material_icons$Material$Icons$Internal$v('0 0 24 24')
+		]),
+	_List_fromArray(
+		[
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M0 0h24v24H0z'),
+					$icidasset$elm_material_icons$Material$Icons$Internal$f('none')
+				]),
+			_List_Nil),
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Widget$Material$iconButton = $author$project$Internal$Material$Button$iconButton;
+var $author$project$Internal$Material$Button$outlinedButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {color: palette.primary, size: 18},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					otherwise: {color: palette.primary, size: 18}
+				},
+				text: {
+					contentText: $author$project$Internal$Material$Button$baseButton(palette).content.content.text.contentText
+				}
+			},
+			elementRow: _Utils_ap(
+				$author$project$Internal$Material$Button$baseButton(palette).content.elementRow,
+				_List_fromArray(
+					[
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+					]))
+		},
+		elementButton: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$width(1),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(palette.primary)),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A3(
+							$author$project$Widget$Material$Color$withShade,
+							palette.primary,
+							$author$project$Widget$Material$Color$buttonHoverOpacity,
+							A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface)))),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		otherwise: _List_Nil
+	};
+};
+var $author$project$Widget$Material$outlinedButton = $author$project$Internal$Material$Button$outlinedButton;
+var $author$project$Widget$Material$textButton = $author$project$Internal$Material$Button$textButton;
+var $author$project$Widget$iconButton = function () {
+	var fun = $author$project$Internal$Button$iconButton;
+	return fun;
+}();
+var $author$project$Widget$textButton = F2(
+	function (style, _v0) {
+		var text = _v0.text;
+		var onPress = _v0.onPress;
+		var fun = $author$project$Internal$Button$textButton;
+		return A2(
+			fun,
+			style,
+			{onPress: onPress, text: text});
+	});
+var $author$project$Page$Button$viewFunctions = function () {
+	var viewTextButton = F6(
+		function (style, text, _v4, onPress, _v5, _v6) {
+			var palette = _v5.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.textButton',
+				A2(
+					$author$project$Widget$textButton,
+					A2(
+						$author$project$Widget$Customize$elementButton,
+						_List_fromArray(
+							[$mdgriffith$elm_ui$Element$alignLeft, $mdgriffith$elm_ui$Element$centerY]),
+						style(palette)),
+					{onPress: onPress, text: text}));
+		});
+	var viewIconButton = F6(
+		function (style, text, icon, onPress, _v2, _v3) {
+			var palette = _v2.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.itemButton',
+				A2(
+					$author$project$Widget$iconButton,
+					A2(
+						$author$project$Widget$Customize$elementButton,
+						_List_fromArray(
+							[$mdgriffith$elm_ui$Element$alignLeft, $mdgriffith$elm_ui$Element$centerY]),
+						style(palette)),
+					{icon: icon, onPress: onPress, text: text}));
+		});
+	var viewButton = F6(
+		function (style, text, icon, onPress, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.button',
+				A2(
+					$author$project$Widget$button,
+					style(palette),
+					{icon: icon, onPress: onPress, text: text}));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewButton, viewTextButton, viewIconButton]));
+}();
+var $author$project$Page$Button$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With event handler',
+			_Utils_Tuple2(
+				$elm$core$Maybe$Just(_Utils_Tuple0),
+				$elm$core$Maybe$Nothing),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'With Icon',
+				_Utils_Tuple2(
+					A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+					$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A2($author$project$UIExplorer$Story$textStory, 'Label', 'OK'),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('Contained', $author$project$Widget$Material$containedButton),
+						_List_fromArray(
+							[
+								_Utils_Tuple2('Outlined', $author$project$Widget$Material$outlinedButton),
+								_Utils_Tuple2('Text', $author$project$Widget$Material$textButton),
+								_Utils_Tuple2('Chip', $author$project$Widget$Material$chip),
+								_Utils_Tuple2('IconButton', $author$project$Widget$Material$iconButton)
+							])),
+					A2(
+						$author$project$UIExplorer$Story$book,
+						$elm$core$Maybe$Just('Options'),
+						$author$project$Page$Button$viewFunctions))))));
+var $author$project$Page$Button$init = _Utils_Tuple2(0, $elm$core$Platform$Cmd$none);
+var $author$project$Page$Button$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Button$update = F2(
+	function (msg, model) {
+		switch (msg.$) {
+			case 'Noop':
+				return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
+			case 'Increase':
+				var _int = msg.a;
+				return _Utils_Tuple2(model + _int, $elm$core$Platform$Cmd$none);
+			case 'Decrease':
+				var _int = msg.a;
+				return _Utils_Tuple2(
+					((model - _int) >= 0) ? (model - _int) : model,
+					$elm$core$Platform$Cmd$none);
+			default:
+				return _Utils_Tuple2(0, $elm$core$Platform$Cmd$none);
+		}
+	});
+var $author$project$Page$Button$Decrease = function (a) {
+	return {$: 'Decrease', a: a};
+};
+var $author$project$Page$Button$Increase = function (a) {
+	return {$: 'Increase', a: a};
+};
+var $author$project$Page$Button$Reset = {$: 'Reset'};
+var $icidasset$elm_material_icons$Material$Icons$add = A2(
+	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
+	_List_fromArray(
+		[
+			$icidasset$elm_material_icons$Material$Icons$Internal$v('0 0 24 24')
+		]),
+	_List_fromArray(
+		[
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M0 0h24v24H0z'),
+					$icidasset$elm_material_icons$Material$Icons$Internal$f('none')
+				]),
+			_List_Nil),
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Internal$List$column = function (style) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$elm$core$List$map(
+			function (a) {
+				return A2(
+					$author$project$Internal$Item$toItem,
+					{content: _Utils_Tuple0, element: style.content.element},
+					$elm$core$Basics$always(a));
+			}),
+		$author$project$Internal$List$itemList(style));
+};
+var $author$project$Widget$column = function () {
+	var fun = $author$project$Internal$List$column;
+	return fun;
+}();
+var $author$project$Internal$Material$List$column = {
+	content: {element: _List_Nil, ifFirst: _List_Nil, ifLast: _List_Nil, ifSingleton: _List_Nil, otherwise: _List_Nil},
+	elementColumn: _List_fromArray(
+		[
+			A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8),
+			$mdgriffith$elm_ui$Element$spacing(8)
+		])
+};
+var $author$project$Widget$Material$column = $author$project$Internal$Material$List$column;
+var $author$project$Widget$Customize$mapElement = F2(
+	function (fun, a) {
+		return _Utils_update(
+			a,
+			{
+				element: fun(a.element)
+			});
+	});
+var $author$project$Widget$Customize$element = F2(
+	function (list, a) {
+		return A2(
+			$author$project$Widget$Customize$mapElement,
+			function (b) {
+				return _Utils_ap(b, list);
+			},
+			a);
+	});
+var $icidasset$elm_material_icons$Material$Icons$exposure_plus_2 = A2(
+	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
+	_List_fromArray(
+		[
+			$icidasset$elm_material_icons$Material$Icons$Internal$v('0 0 24 24')
+		]),
+	_List_fromArray(
+		[
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M0 0h24v24H0zm0 0h24v24H0z'),
+					$icidasset$elm_material_icons$Material$Icons$Internal$f('none')
+				]),
+			_List_Nil),
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M16.05 16.29l2.86-3.07c.38-.39.72-.79 1.04-1.18.32-.39.59-.78.82-1.17.23-.39.41-.78.54-1.17.13-.39.19-.79.19-1.18 0-.53-.09-1.02-.27-1.46-.18-.44-.44-.81-.78-1.11-.34-.31-.77-.54-1.26-.71-.51-.16-1.08-.24-1.72-.24-.69 0-1.31.11-1.85.32-.54.21-1 .51-1.36.88-.37.37-.65.8-.84 1.3-.18.47-.27.97-.28 1.5h2.14c.01-.31.05-.6.13-.87.09-.29.23-.54.4-.75.18-.21.41-.37.68-.49.27-.12.6-.18.96-.18.31 0 .58.05.81.15.23.1.43.25.59.43.16.18.28.4.37.65.08.25.13.52.13.81 0 .22-.03.43-.08.65-.06.22-.15.45-.29.7-.14.25-.32.53-.56.83-.23.3-.52.65-.88 1.03l-4.17 4.55V18H22v-1.71h-5.95zM8 7H6v4H2v2h4v4h2v-4h4v-2H8V7z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Widget$Material$Typography$h4 = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Font$size(34),
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.25)
+	]);
+var $icidasset$elm_material_icons$Material$Icons$remove = A2(
+	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
+	_List_fromArray(
+		[
+			$icidasset$elm_material_icons$Material$Icons$Internal$v('0 0 24 24')
+		]),
+	_List_fromArray(
+		[
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M0 0h24v24H0z'),
+					$icidasset$elm_material_icons$Material$Icons$Internal$f('none')
+				]),
+			_List_Nil),
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M19 13H5v-2h14v2z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Internal$List$row = function (style) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$elm$core$List$map(
+			function (a) {
+				return A2(
+					$author$project$Internal$Item$toItem,
+					{content: _Utils_Tuple0, element: style.content.element},
+					$elm$core$Basics$always(a));
+			}),
+		A2(
+			$elm$core$Basics$composeR,
+			$author$project$Internal$List$internal(style.content),
+			$mdgriffith$elm_ui$Element$row(style.elementRow)));
+};
+var $author$project$Widget$row = function () {
+	var fun = $author$project$Internal$List$row;
+	return fun;
+}();
+var $author$project$Page$Button$view = F2(
+	function (_v0, model) {
+		var palette = _v0.palette;
+		var style = {
+			cardColumn: $author$project$Widget$Material$cardColumn(palette),
+			column: $author$project$Widget$Material$column,
+			containedButton: $author$project$Widget$Material$containedButton(palette),
+			iconButton: $author$project$Widget$Material$iconButton(palette),
+			outlinedButton: $author$project$Widget$Material$outlinedButton(palette),
+			row: $author$project$Widget$Material$row,
+			textButton: $author$project$Widget$Material$textButton(palette)
+		};
+		return A2(
+			$author$project$Widget$column,
+			A2(
+				$author$project$Widget$Customize$mapContent,
+				$author$project$Widget$Customize$element(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+						])),
+				A2(
+					$author$project$Widget$Customize$elementColumn,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+						]),
+					style.column)),
+			_List_fromArray(
+				[
+					A2(
+					$author$project$Widget$column,
+					A2(
+						$author$project$Widget$Customize$mapContent,
+						$author$project$Widget$Customize$element(
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width(
+									$mdgriffith$elm_ui$Element$px(128)),
+									$mdgriffith$elm_ui$Element$height(
+									$mdgriffith$elm_ui$Element$px(128)),
+									$mdgriffith$elm_ui$Element$Background$color(
+									$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$defaultPalette.secondary))
+								])),
+						A2(
+							$author$project$Widget$Customize$elementColumn,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$centerX,
+									$mdgriffith$elm_ui$Element$width(
+									$mdgriffith$elm_ui$Element$px(128)),
+									$mdgriffith$elm_ui$Element$height(
+									$mdgriffith$elm_ui$Element$px(128)),
+									$mdgriffith$elm_ui$Element$inFront(
+									A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[$mdgriffith$elm_ui$Element$alignRight]),
+										A2(
+											$author$project$Widget$iconButton,
+											style.iconButton,
+											{
+												icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$exposure_plus_2),
+												onPress: $elm$core$Maybe$Just(
+													$author$project$Page$Button$Increase(2)),
+												text: '+2'
+											})))
+								]),
+							style.cardColumn)),
+					$elm$core$List$singleton(
+						A2(
+							$mdgriffith$elm_ui$Element$el,
+							_Utils_ap(
+								$author$project$Widget$Material$Typography$h4,
+								_List_fromArray(
+									[$mdgriffith$elm_ui$Element$centerX, $mdgriffith$elm_ui$Element$centerY])),
+							$mdgriffith$elm_ui$Element$text(
+								$elm$core$String$fromInt(model))))),
+					A2(
+					$author$project$Widget$row,
+					A2(
+						$author$project$Widget$Customize$mapContent,
+						$author$project$Widget$Customize$element(
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+								])),
+						A2(
+							$author$project$Widget$Customize$elementRow,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+								]),
+							style.row)),
+					_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$row,
+							A2(
+								$author$project$Widget$Customize$elementRow,
+								_List_fromArray(
+									[$mdgriffith$elm_ui$Element$alignRight]),
+								style.row),
+							_List_fromArray(
+								[
+									A2(
+									$author$project$Widget$textButton,
+									style.textButton,
+									{
+										onPress: $elm$core$Maybe$Just($author$project$Page$Button$Reset),
+										text: 'Reset'
+									}),
+									A2(
+									$author$project$Widget$button,
+									style.outlinedButton,
+									{
+										icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$remove),
+										onPress: (model > 0) ? $elm$core$Maybe$Just(
+											$author$project$Page$Button$Decrease(1)) : $elm$core$Maybe$Nothing,
+										text: 'Decrease'
+									})
+								])),
+							A2(
+							$author$project$Widget$row,
+							A2(
+								$author$project$Widget$Customize$elementRow,
+								_List_fromArray(
+									[$mdgriffith$elm_ui$Element$alignLeft]),
+								style.row),
+							_List_fromArray(
+								[
+									A2(
+									$author$project$Widget$button,
+									style.containedButton,
+									{
+										icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$add),
+										onPress: $elm$core$Maybe$Just(
+											$author$project$Page$Button$Increase(1)),
+										text: 'Increase'
+									})
+								]))
+						]))
+				]));
+	});
+var $author$project$Page$Button$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Button$init),
+	subscriptions: $author$project$Page$Button$subscriptions,
+	update: $author$project$Page$Button$update,
+	view: $author$project$Page$demo($author$project$Page$Button$view)
+};
+var $author$project$Page$Button$description = 'Buttons allow users to take actions, and make choices, with a single tap.';
+var $author$project$Page$Button$title = 'Button';
+var $author$project$Page$Button$page = $author$project$Page$create(
+	{book: $author$project$Page$Button$book, demo: $author$project$Page$Button$demo, description: $author$project$Page$Button$description, title: $author$project$Page$Button$title});
+var $author$project$Page$Dialog$viewFunctions = function () {
+	var viewDialog = F7(
+		function (style, text, titleString, accept, dismiss, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.dialog',
+				A2(
+					$mdgriffith$elm_ui$Element$el,
+					_Utils_ap(
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(200)),
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+							]),
+						$author$project$Widget$singleModal(
+							$elm$core$List$singleton(
+								A2(
+									$author$project$Widget$dialog,
+									style(palette),
+									{accept: accept, dismiss: dismiss, text: text, title: titleString})))),
+					$mdgriffith$elm_ui$Element$text('Placeholder Text')));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewDialog]));
+}();
+var $author$project$Page$Dialog$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'Dismissible',
+			_Utils_Tuple2(
+				$elm$core$Maybe$Just(
+					{
+						onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+						text: 'Dismiss'
+					}),
+				$elm$core$Maybe$Nothing),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'With accept button',
+				_Utils_Tuple2(
+					$elm$core$Maybe$Just(
+						{
+							onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+							text: 'Ok'
+						}),
+					$elm$core$Maybe$Nothing),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'With title',
+					_Utils_Tuple2(
+						$elm$core$Maybe$Just('Title'),
+						$elm$core$Maybe$Nothing),
+					true),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A2($author$project$UIExplorer$Story$textStory, 'Text', 'If an accept button is given then the window can only be closed manually. Else it can be closed by pressing somewhere outside of it.'),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$optionListStory,
+							'Style',
+							_Utils_Tuple2('Alert Dialog', $author$project$Widget$Material$alertDialog),
+							_List_Nil),
+						A2(
+							$author$project$UIExplorer$Story$book,
+							$elm$core$Maybe$Just('Options'),
+							$author$project$Page$Dialog$viewFunctions)))))));
+var $author$project$Page$Dialog$IsOpen = function (a) {
+	return {$: 'IsOpen', a: a};
+};
+var $author$project$Page$Dialog$init = _Utils_Tuple2(
+	$author$project$Page$Dialog$IsOpen(true),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$Dialog$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Dialog$update = F2(
+	function (msg, _v0) {
+		var bool = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Page$Dialog$IsOpen(bool),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Page$Dialog$OpenDialog = function (a) {
+	return {$: 'OpenDialog', a: a};
+};
+var $icidasset$elm_material_icons$Material$Icons$visibility = A2(
+	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
+	_List_fromArray(
+		[
+			$icidasset$elm_material_icons$Material$Icons$Internal$v('0 0 24 24')
+		]),
+	_List_fromArray(
+		[
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M0 0h24v24H0z'),
+					$icidasset$elm_material_icons$Material$Icons$Internal$f('none')
+				]),
+			_List_Nil),
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Page$Dialog$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var isOpen = _v1.a;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_Utils_ap(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$height(
+						A2($mdgriffith$elm_ui$Element$minimum, 200, $mdgriffith$elm_ui$Element$fill)),
+						$mdgriffith$elm_ui$Element$width(
+						A2($mdgriffith$elm_ui$Element$minimum, 400, $mdgriffith$elm_ui$Element$fill))
+					]),
+				isOpen ? $author$project$Widget$singleModal(
+					$elm$core$List$singleton(
+						A2(
+							$author$project$Widget$dialog,
+							$author$project$Widget$Material$alertDialog(palette),
+							{
+								accept: $elm$core$Maybe$Just(
+									{
+										onPress: $elm$core$Maybe$Just(
+											$author$project$Page$Dialog$OpenDialog(false)),
+										text: 'Ok'
+									}),
+								dismiss: $elm$core$Maybe$Just(
+									{
+										onPress: $elm$core$Maybe$Just(
+											$author$project$Page$Dialog$OpenDialog(false)),
+										text: 'Dismiss'
+									}),
+								text: 'This is a dialog window',
+								title: $elm$core$Maybe$Just('Dialog')
+							}))) : _List_Nil),
+			A2(
+				$author$project$Widget$button,
+				$author$project$Widget$Material$containedButton(palette),
+				{
+					icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$visibility),
+					onPress: $elm$core$Maybe$Just(
+						$author$project$Page$Dialog$OpenDialog(true)),
+					text: 'Show Dialog'
+				}));
+	});
+var $author$project$Page$Dialog$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Dialog$init),
+	subscriptions: $author$project$Page$Dialog$subscriptions,
+	update: $author$project$Page$Dialog$update,
+	view: $author$project$Page$demo($author$project$Page$Dialog$view)
+};
+var $author$project$Page$Dialog$description = 'Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.';
+var $author$project$Page$Dialog$title = 'Dialog';
+var $author$project$Page$Dialog$page = $author$project$Page$create(
+	{book: $author$project$Page$Dialog$book, demo: $author$project$Page$Dialog$demo, description: $author$project$Page$Dialog$description, title: $author$project$Page$Dialog$title});
+var $author$project$Page$Icon$init = _Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none);
+var $author$project$Page$Icon$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Icon$update = F2(
+	function (msg, _v0) {
+		return _Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none);
+	});
+var $author$project$Widget$Icon$antDesignIconsElm = function (fun) {
+	return function (_v0) {
+		var size = _v0.size;
+		var color = _v0.color;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_Nil,
+			$mdgriffith$elm_ui$Element$html(
+				fun(
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$width(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$height(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$fill(
+							$avh4$elm_color$Color$toCssString(color))
+						]))));
+	};
+};
+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 $elm$svg$Svg$Attributes$points = _VirtualDom_attribute('points');
+var $elm$svg$Svg$polyline = $elm$svg$Svg$trustedNode('polyline');
+var $feathericons$elm_feather$FeatherIcons$check = A2(
+	$feathericons$elm_feather$FeatherIcons$makeBuilder,
+	'check',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$polyline,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$points('20 6 9 17 4 12')
+				]),
+			_List_Nil)
+		]));
+var $lattyware$elm_fontawesome$FontAwesome$Icon$Icon = F5(
+	function (prefix, name, width, height, paths) {
+		return {height: height, name: name, paths: paths, prefix: prefix, width: width};
+	});
+var $lattyware$elm_fontawesome$FontAwesome$Solid$check = A5(
+	$lattyware$elm_fontawesome$FontAwesome$Icon$Icon,
+	'fas',
+	'check',
+	512,
+	512,
+	_List_fromArray(
+		['M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z']));
+var $elm$svg$Svg$Attributes$clipRule = _VirtualDom_attribute('clip-rule');
+var $elm$svg$Svg$Attributes$fillRule = _VirtualDom_attribute('fill-rule');
+var $jasonliang_dev$elm_heroicons$Heroicons$Solid$check = function (attrs) {
+	return A2(
+		$elm$svg$Svg$svg,
+		A2(
+			$elm$core$List$cons,
+			$elm$svg$Svg$Attributes$viewBox('0 0 20 20'),
+			A2(
+				$elm$core$List$cons,
+				$elm$svg$Svg$Attributes$fill('currentColor'),
+				attrs)),
+		_List_fromArray(
+			[
+				A2(
+				$elm$svg$Svg$path,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$fillRule('evenodd'),
+						$elm$svg$Svg$Attributes$d('M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'),
+						$elm$svg$Svg$Attributes$clipRule('evenodd')
+					]),
+				_List_Nil)
+			]));
+};
+var $capitalist$elm_octicons$Octicons$checkPolygon = '12 5 4 13 0 9 1.5 7.5 4 10 10.5 3.5';
 var $elm$svg$Svg$Attributes$class = _VirtualDom_attribute('class');
+var $elm$svg$Svg$Attributes$style = _VirtualDom_attribute('style');
+var $elm$svg$Svg$Attributes$version = _VirtualDom_attribute('version');
+var $capitalist$elm_octicons$Octicons$Internal$iconSVG = F5(
+	function (viewBox, name, options, attributes, children) {
+		var style = function () {
+			var _v2 = options.style;
+			if (_v2.$ === 'Nothing') {
+				return _List_Nil;
+			} else {
+				var s = _v2.a;
+				return _List_fromArray(
+					[s]);
+			}
+		}();
+		var margin = function () {
+			var _v1 = options.margin;
+			if (_v1.$ === 'Nothing') {
+				return _List_Nil;
+			} else {
+				var m = _v1.a;
+				return _List_fromArray(
+					['margin: ' + m]);
+			}
+		}();
+		var styles = function () {
+			var _v0 = $elm$core$List$concat(
+				_List_fromArray(
+					[style, margin]));
+			if (!_v0.b) {
+				return _List_Nil;
+			} else {
+				var lst = _v0;
+				return _List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$style(
+						A2($elm$core$String$join, ';', lst))
+					]);
+			}
+		}();
+		return A2(
+			$elm$svg$Svg$svg,
+			$elm$core$List$concat(
+				_List_fromArray(
+					[
+						_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$version('1.1'),
+							$elm$svg$Svg$Attributes$class(
+							A2($elm$core$Maybe$withDefault, 'octicon ' + name, options._class)),
+							$elm$svg$Svg$Attributes$width(
+							$elm$core$String$fromInt(options.width)),
+							$elm$svg$Svg$Attributes$height(
+							$elm$core$String$fromInt(options.height)),
+							$elm$svg$Svg$Attributes$viewBox(viewBox)
+						]),
+						attributes,
+						styles
+					])),
+			children);
+	});
+var $elm$svg$Svg$polygon = $elm$svg$Svg$trustedNode('polygon');
+var $capitalist$elm_octicons$Octicons$polygonIconWithOptions = F4(
+	function (points, viewBox, octiconName, options) {
+		return A5(
+			$capitalist$elm_octicons$Octicons$Internal$iconSVG,
+			viewBox,
+			octiconName,
+			options,
+			_List_Nil,
+			_List_fromArray(
+				[
+					A2(
+					$elm$svg$Svg$polygon,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$points(points),
+							$elm$svg$Svg$Attributes$fillRule(options.fillRule),
+							$elm$svg$Svg$Attributes$fill(options.color)
+						]),
+					_List_Nil)
+				]));
+	});
+var $capitalist$elm_octicons$Octicons$check = A3($capitalist$elm_octicons$Octicons$polygonIconWithOptions, $capitalist$elm_octicons$Octicons$checkPolygon, '0 0 12 16', 'check');
+var $lemol$ant_design_icons_elm$Ant$Icons$Svg$CheckOutlined$viewWithAttributes = function (attributes) {
+	return A2(
+		$elm$svg$Svg$svg,
+		_Utils_ap(
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$viewBox('64 64 896 896')
+				]),
+			attributes),
+		_List_fromArray(
+			[
+				A2(
+				$elm$svg$Svg$path,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$d('M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z')
+					]),
+				_List_Nil)
+			]));
+};
+var $lemol$ant_design_icons_elm$Ant$Icons$Svg$checkOutlined = $lemol$ant_design_icons_elm$Ant$Icons$Svg$CheckOutlined$viewWithAttributes;
+var $j_panasiuk$elm_ionicons$Ionicon$Internal$toAlphaString = function (value) {
+	return A2(
+		$elm$core$String$left,
+		5,
+		$elm$core$String$fromFloat(
+			A3($elm$core$Basics$clamp, 0, 1, value)));
+};
+var $j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString = function (value) {
+	return A2(
+		$elm$core$String$left,
+		5,
+		$elm$core$String$fromFloat(
+			A3($elm$core$Basics$clamp, 0, 255, 255 * value)));
+};
+var $j_panasiuk$elm_ionicons$Ionicon$Internal$fill = function (_v0) {
+	var red = _v0.red;
+	var green = _v0.green;
+	var blue = _v0.blue;
+	var alpha = _v0.alpha;
+	var _v1 = ((0 <= alpha) && (alpha < 1)) ? _Utils_Tuple2(
+		'rgba',
+		_List_fromArray(
+			[
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(red),
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(green),
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(blue),
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toAlphaString(alpha)
+			])) : _Utils_Tuple2(
+		'rgb',
+		_List_fromArray(
+			[
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(red),
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(green),
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(blue)
+			]));
+	var colorSpace = _v1.a;
+	var values = _v1.b;
+	return colorSpace + ('(' + (A2($elm$core$String$join, ',', values) + ')'));
+};
+var $elm$svg$Svg$Attributes$enableBackground = _VirtualDom_attribute('enable-background');
+var $elm$svg$Svg$Attributes$x = _VirtualDom_attribute('x');
+var $elm$svg$Svg$Attributes$y = _VirtualDom_attribute('y');
+var $j_panasiuk$elm_ionicons$Ionicon$Internal$svg = function (size) {
+	return $elm$svg$Svg$svg(
+		_List_fromArray(
+			[
+				$elm$svg$Svg$Attributes$version('1.1'),
+				$elm$svg$Svg$Attributes$x('0px'),
+				$elm$svg$Svg$Attributes$y('0px'),
+				$elm$svg$Svg$Attributes$width(
+				$elm$core$String$fromInt(size)),
+				$elm$svg$Svg$Attributes$height(
+				$elm$core$String$fromInt(size)),
+				$elm$svg$Svg$Attributes$viewBox('0 0 512 512'),
+				$elm$svg$Svg$Attributes$enableBackground('new 0 0 512 512')
+			]));
+};
+var $j_panasiuk$elm_ionicons$Ionicon$Internal$p = F3(
+	function (d, size, color) {
+		return A2(
+			$j_panasiuk$elm_ionicons$Ionicon$Internal$svg,
+			size,
+			_List_fromArray(
+				[
+					A2(
+					$elm$svg$Svg$path,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$d(d),
+							$elm$svg$Svg$Attributes$fill(
+							$j_panasiuk$elm_ionicons$Ionicon$Internal$fill(color))
+						]),
+					_List_Nil)
+				]));
+	});
+var $j_panasiuk$elm_ionicons$Ionicon$checkmark = $j_panasiuk$elm_ionicons$Ionicon$Internal$p('M461.6,109.6l-54.9-43.3c-1.7-1.4-3.8-2.4-6.2-2.4c-2.4,0-4.6,1-6.3,2.5L194.5,323c0,0-78.5-75.5-80.7-77.7c-2.2-2.2-5.1-5.9-9.5-5.9c-4.4,0-6.4,3.1-8.7,5.4c-1.7,1.8-29.7,31.2-43.5,45.8c-0.8,0.9-1.3,1.4-2,2.1c-1.2,1.7-2,3.6-2,5.7c0,2.2,0.8,4,2,5.7l2.8,2.6c0,0,139.3,133.8,141.6,136.1c2.3,2.3,5.1,5.2,9.2,5.2c4,0,7.3-4.3,9.2-6.2L462,121.8c1.2-1.7,2-3.6,2-5.8C464,113.5,463,111.4,461.6,109.6z');
+var $pehota$elm_zondicons$Zondicons$checkmark = function (attributes) {
+	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'),
+				attributes)),
+		_List_fromArray(
+			[
+				A2(
+				$elm$svg$Svg$path,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$d('M0 11l2-2 5 5L18 3l2 2L7 18z')
+					]),
+				_List_Nil)
+			]));
+};
+var $capitalist$elm_octicons$Octicons$color = F2(
+	function (value, options) {
+		return _Utils_update(
+			options,
+			{color: value});
+	});
+var $capitalist$elm_octicons$Octicons$defaultOptions = {_class: $elm$core$Maybe$Nothing, color: 'black', fillRule: 'evenodd', height: 16, margin: $elm$core$Maybe$Nothing, style: $elm$core$Maybe$Nothing, width: 16};
+var $danmarcab$material_icons$Material$Icons$Internal$toRgbaString = function (color) {
+	var _v0 = $avh4$elm_color$Color$toRgba(color);
+	var red = _v0.red;
+	var green = _v0.green;
+	var blue = _v0.blue;
+	var alpha = _v0.alpha;
+	return 'rgba(' + ($elm$core$String$fromInt(
+		$elm$core$Basics$round(255 * red)) + (',' + ($elm$core$String$fromInt(
+		$elm$core$Basics$round(255 * green)) + (',' + ($elm$core$String$fromInt(
+		$elm$core$Basics$round(255 * blue)) + (',' + ($elm$core$String$fromFloat(alpha) + ')')))))));
+};
+var $danmarcab$material_icons$Material$Icons$Internal$icon = F4(
+	function (viewBox, children, color, size) {
+		var stringSize = $elm$core$String$fromInt(size);
+		var stringColor = $danmarcab$material_icons$Material$Icons$Internal$toRgbaString(color);
+		return A2(
+			$elm$svg$Svg$svg,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$width(stringSize),
+					$elm$svg$Svg$Attributes$height(stringSize),
+					$elm$svg$Svg$Attributes$viewBox(viewBox)
+				]),
+			_List_fromArray(
+				[
+					A2(
+					$elm$svg$Svg$g,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$fill(stringColor)
+						]),
+					children)
+				]));
+	});
+var $danmarcab$material_icons$Material$Icons$Action$done = A2(
+	$danmarcab$material_icons$Material$Icons$Internal$icon,
+	'0 0 48 48',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M18 32.34L9.66 24l-2.83 2.83L18 38l24-24-2.83-2.83z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Widget$Icon$elmFeather = F2(
+	function (fun, icon) {
+		return function (_v0) {
+			var size = _v0.size;
+			var color = _v0.color;
+			return A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_Nil,
+				$mdgriffith$elm_ui$Element$html(
+					A2(
+						fun,
+						_List_fromArray(
+							[
+								$elm$svg$Svg$Attributes$width(
+								$elm$core$String$fromInt(size)),
+								$elm$svg$Svg$Attributes$height(
+								$elm$core$String$fromInt(size)),
+								$elm$svg$Svg$Attributes$stroke(
+								$avh4$elm_color$Color$toCssString(color))
+							]),
+						icon)));
+		};
+	});
+var $author$project$Widget$Icon$elmFontawesome = F2(
+	function (fun, icon) {
+		return function (_v0) {
+			var size = _v0.size;
+			var color = _v0.color;
+			return A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_Nil,
+				$mdgriffith$elm_ui$Element$html(
+					A2(
+						$elm$svg$Svg$svg,
+						_List_fromArray(
+							[
+								$elm$svg$Svg$Attributes$width(
+								$elm$core$String$fromInt(size)),
+								$elm$svg$Svg$Attributes$height(
+								$elm$core$String$fromInt(size)),
+								$elm$svg$Svg$Attributes$stroke(
+								$avh4$elm_color$Color$toCssString(color)),
+								$elm$svg$Svg$Attributes$viewBox(
+								'0 0 ' + ($elm$core$String$fromInt(512) + (' ' + $elm$core$String$fromInt(512))))
+							]),
+						$elm$core$List$singleton(
+							fun(icon)))));
+		};
+	});
+var $author$project$Widget$Icon$elmHeroicons = function (fun) {
+	return function (_v0) {
+		var size = _v0.size;
+		var color = _v0.color;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_Nil,
+			$mdgriffith$elm_ui$Element$html(
+				fun(
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$width(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$height(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$stroke(
+							$avh4$elm_color$Color$toCssString(color))
+						]))));
+	};
+};
+var $author$project$Widget$Icon$elmIonicons = function (fun) {
+	return function (_v0) {
+		var size = _v0.size;
+		var color = _v0.color;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_Nil,
+			$mdgriffith$elm_ui$Element$html(
+				A2(
+					fun,
+					size,
+					$avh4$elm_color$Color$toRgba(color))));
+	};
+};
+var $author$project$Widget$Icon$elmOcticons = F2(
+	function (_v0, fun) {
+		var withSize = _v0.withSize;
+		var withColor = _v0.withColor;
+		var defaultOptions = _v0.defaultOptions;
+		return function (_v1) {
+			var size = _v1.size;
+			var color = _v1.color;
+			return A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_Nil,
+				$mdgriffith$elm_ui$Element$html(
+					fun(
+						A2(
+							withColor,
+							$avh4$elm_color$Color$toCssString(color),
+							A2(withSize, size, defaultOptions)))));
+		};
+	});
+var $author$project$Widget$Icon$elmZondicons = function (fun) {
+	return function (_v0) {
+		var size = _v0.size;
+		var color = _v0.color;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_Nil,
+			$mdgriffith$elm_ui$Element$html(
+				fun(
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$width(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$height(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$stroke(
+							$avh4$elm_color$Color$toCssString(color))
+						]))));
+	};
+};
+var $author$project$Widget$Icon$materialIcons = function (fun) {
+	return function (_v0) {
+		var size = _v0.size;
+		var color = _v0.color;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_Nil,
+			$mdgriffith$elm_ui$Element$html(
+				A2(
+					$elm$svg$Svg$svg,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$width(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$height(
+							$elm$core$String$fromInt(size))
+						]),
+					$elm$core$List$singleton(
+						A2(fun, color, size)))));
+	};
+};
+var $capitalist$elm_octicons$Octicons$size = F2(
+	function (value, options) {
+		return _Utils_update(
+			options,
+			{height: value, width: value});
+	});
 var $elm$svg$Svg$map = $elm$virtual_dom$VirtualDom$map;
+var $elm$svg$Svg$Attributes$strokeLinecap = _VirtualDom_attribute('stroke-linecap');
 var $elm$svg$Svg$Attributes$strokeLinejoin = _VirtualDom_attribute('stroke-linejoin');
+var $elm$svg$Svg$Attributes$strokeWidth = _VirtualDom_attribute('stroke-width');
 var $feathericons$elm_feather$FeatherIcons$toHtml = F2(
 	function (attributes, _v0) {
 		var src = _v0.a.src;
@@ -18906,404 +22197,183 @@ var $feathericons$elm_feather$FeatherIcons$toHtml = F2(
 				$elm$svg$Svg$map($elm$core$Basics$never),
 				src));
 	});
-var $elm_community$intdict$IntDict$findMin = function (dict) {
-	findMin:
-	while (true) {
-		switch (dict.$) {
-			case 'Empty':
-				return $elm$core$Maybe$Nothing;
-			case 'Leaf':
-				var l = dict.a;
-				return $elm$core$Maybe$Just(
-					_Utils_Tuple2(l.key, l.value));
-			default:
-				var i = dict.a;
-				var $temp$dict = i.left;
-				dict = $temp$dict;
-				continue findMin;
-		}
-	}
-};
-var $elm_community$intdict$IntDict$after = F2(
-	function (key, dict) {
-		var go = F2(
-			function (def, currentDict) {
-				go:
-				while (true) {
-					switch (currentDict.$) {
-						case 'Empty':
-							return $elm_community$intdict$IntDict$findMin(def);
-						case 'Leaf':
-							var l = currentDict.a;
-							return (_Utils_cmp(l.key, key) < 1) ? $elm_community$intdict$IntDict$findMin(def) : $elm$core$Maybe$Just(
-								_Utils_Tuple2(l.key, l.value));
-						default:
-							var i = currentDict.a;
-							if (!A2($elm_community$intdict$IntDict$prefixMatches, i.prefix, key)) {
-								return (_Utils_cmp(i.prefix.prefixBits, key) < 0) ? $elm_community$intdict$IntDict$findMin(def) : $elm_community$intdict$IntDict$findMin(i.left);
-							} else {
-								if (A2($elm_community$intdict$IntDict$isBranchingBitSet, i.prefix, key)) {
-									var $temp$def = def,
-										$temp$currentDict = i.right;
-									def = $temp$def;
-									currentDict = $temp$currentDict;
-									continue go;
-								} else {
-									var $temp$def = i.right,
-										$temp$currentDict = i.left;
-									def = $temp$def;
-									currentDict = $temp$currentDict;
-									continue go;
-								}
-							}
-					}
-				}
-			});
-		return A2(go, $elm_community$intdict$IntDict$Empty, dict);
+var $lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath = F2(
+	function (attrs, d) {
+		return A2(
+			$elm$svg$Svg$path,
+			A2(
+				$elm$core$List$cons,
+				$elm$svg$Svg$Attributes$fill('currentColor'),
+				A2(
+					$elm$core$List$cons,
+					$elm$svg$Svg$Attributes$d(d),
+					attrs)),
+			_List_Nil);
 	});
-var $elm$core$Maybe$andThen = F2(
-	function (callback, maybeValue) {
-		if (maybeValue.$ === 'Just') {
-			var value = maybeValue.a;
-			return callback(value);
+var $lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePaths = F2(
+	function (attrs, icon) {
+		var _v0 = icon.paths;
+		if (!_v0.b) {
+			return A2($lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath, attrs, '');
 		} else {
-			return $elm$core$Maybe$Nothing;
-		}
-	});
-var $elm_community$intdict$IntDict$findMax = function (dict) {
-	findMax:
-	while (true) {
-		switch (dict.$) {
-			case 'Empty':
-				return $elm$core$Maybe$Nothing;
-			case 'Leaf':
-				var l = dict.a;
-				return $elm$core$Maybe$Just(
-					_Utils_Tuple2(l.key, l.value));
-			default:
-				var i = dict.a;
-				var $temp$dict = i.right;
-				dict = $temp$dict;
-				continue findMax;
-		}
-	}
-};
-var $elm_community$intdict$IntDict$before = F2(
-	function (key, dict) {
-		var go = F2(
-			function (def, currentDict) {
-				go:
-				while (true) {
-					switch (currentDict.$) {
-						case 'Empty':
-							return $elm_community$intdict$IntDict$findMax(def);
-						case 'Leaf':
-							var l = currentDict.a;
-							return (_Utils_cmp(l.key, key) > -1) ? $elm_community$intdict$IntDict$findMax(def) : $elm$core$Maybe$Just(
-								_Utils_Tuple2(l.key, l.value));
-						default:
-							var i = currentDict.a;
-							if (!A2($elm_community$intdict$IntDict$prefixMatches, i.prefix, key)) {
-								return (_Utils_cmp(i.prefix.prefixBits, key) > 0) ? $elm_community$intdict$IntDict$findMax(def) : $elm_community$intdict$IntDict$findMax(i.right);
-							} else {
-								if (A2($elm_community$intdict$IntDict$isBranchingBitSet, i.prefix, key)) {
-									var $temp$def = i.left,
-										$temp$currentDict = i.right;
-									def = $temp$def;
-									currentDict = $temp$currentDict;
-									continue go;
-								} else {
-									var $temp$def = def,
-										$temp$currentDict = i.left;
-									def = $temp$def;
-									currentDict = $temp$currentDict;
-									continue go;
-								}
-							}
-					}
-				}
-			});
-		return A2(go, $elm_community$intdict$IntDict$Empty, dict);
-	});
-var $author$project$Widget$ScrollingNav$current = F2(
-	function (fromString, _v0) {
-		var positions = _v0.positions;
-		var scrollPos = _v0.scrollPos;
-		return A2(
-			$elm$core$Maybe$andThen,
-			fromString,
-			A2(
-				$elm$core$Maybe$map,
-				$elm$core$Tuple$second,
-				A2(
-					$elm$core$Maybe$withDefault,
-					A2($elm_community$intdict$IntDict$after, scrollPos + 1, positions),
-					A2(
-						$elm$core$Maybe$map,
-						$elm$core$Maybe$Just,
-						A2($elm_community$intdict$IntDict$before, scrollPos + 1, positions)))));
-	});
-var $author$project$Widget$ScrollingNav$toSelect = F2(
-	function (onSelect, model) {
-		var arrangement = model.arrangement;
-		var toString = model.toString;
-		var fromString = model.fromString;
-		return {
-			onSelect: onSelect,
-			options: A2(
-				$elm$core$List$map,
-				function (s) {
-					return {
-						icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-						text: toString(s)
-					};
-				},
-				arrangement),
-			selected: $elm$core$List$head(
-				A2(
-					$elm$core$List$filterMap,
-					function (_v0) {
-						var i = _v0.a;
-						var s = _v0.b;
-						return _Utils_eq(
-							$elm$core$Maybe$Just(s),
-							A2($author$project$Widget$ScrollingNav$current, fromString, model)) ? $elm$core$Maybe$Just(i) : $elm$core$Maybe$Nothing;
-					},
-					A2(
-						$elm$core$List$indexedMap,
-						F2(
-							function (i, s) {
-								return _Utils_Tuple2(i, s);
-							}),
-						arrangement)))
-		};
-	});
-var $author$project$Widget$Snackbar$current = function (model) {
-	return A2($elm$core$Maybe$map, $elm$core$Tuple$first, model.current);
-};
-var $author$project$Internal$Button$textButton = F2(
-	function (style, _v0) {
-		var onPress = _v0.onPress;
-		var text = _v0.text;
-		return A2(
-			$author$project$Internal$Button$button,
-			style,
-			{
-				icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-				onPress: onPress,
-				text: text
-			});
-	});
-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.elementRow,
-						_List_fromArray(
-							[
-								A2(
-								$mdgriffith$elm_ui$Element$paragraph,
-								style.content.text.elementText,
-								$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$Internal$Button$textButton(style.content.button),
-									button))
-							]));
-				}),
-			$author$project$Widget$Snackbar$current(model));
-	});
-var $author$project$Main$viewLayout = F3(
-	function (msgMapper, style, model) {
-		var title = A2(
-			$mdgriffith$elm_ui$Element$el,
-			_Utils_ap(
-				$author$project$Widget$Material$Typography$h6,
-				_List_fromArray(
-					[
-						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
-					])),
-			$mdgriffith$elm_ui$Element$text('Elm-Ui-Widgets'));
-		var snackbarElem = A2(
-			$elm$core$Maybe$withDefault,
-			$mdgriffith$elm_ui$Element$none,
-			A2(
-				$elm$core$Maybe$map,
-				$mdgriffith$elm_ui$Element$el(
+			if (!_v0.b.b) {
+				var only = _v0.a;
+				return A2($lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath, attrs, only);
+			} else {
+				var secondary = _v0.a;
+				var _v1 = _v0.b;
+				var primary = _v1.a;
+				return A2(
+					$elm$svg$Svg$g,
 					_List_fromArray(
 						[
-							$mdgriffith$elm_ui$Element$padding(8),
-							$mdgriffith$elm_ui$Element$alignBottom,
-							$mdgriffith$elm_ui$Element$alignRight
-						])),
-				A3($author$project$Widget$Snackbar$view, style.snackbar, $elm$core$Basics$identity, model.snackbar)));
-		var search = {
-			chips: _List_Nil,
-			label: 'Search',
-			onChange: A2($elm$core$Basics$composeR, $author$project$Main$ChangedSearch, msgMapper),
-			placeholder: $elm$core$Maybe$Just(
-				A2(
-					$mdgriffith$elm_ui$Element$Input$placeholder,
-					_List_Nil,
-					$mdgriffith$elm_ui$Element$text('Search Widgets...'))),
-			text: model.search.raw
-		};
-		var onDismiss = msgMapper(
-			$author$project$Main$ChangedSidebar($elm$core$Maybe$Nothing));
-		var onChangedSidebar = $author$project$Main$ChangedSidebar;
-		var menu = A2(
-			$author$project$Widget$ScrollingNav$toSelect,
-			function (_int) {
-				return A2(
-					$elm$core$Maybe$map,
-					$author$project$Main$JumpTo,
-					A2(
-						$elm$core$Array$get,
-						_int,
-						$elm$core$Array$fromList(model.scrollingNav.arrangement)));
-			},
-			model.scrollingNav);
-		var dialog = $elm$core$Maybe$Nothing;
-		var deviceClass = $author$project$Widget$Layout$getDeviceClass(model.window);
-		var actions = _List_fromArray(
-			[
-				{
-				icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$book),
-				onPress: $elm$core$Maybe$Just(
-					$author$project$Main$Load('https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/')),
-				text: 'Docs'
-			},
-				{
-				icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$github),
-				onPress: $elm$core$Maybe$Just(
-					$author$project$Main$Load('https://github.com/Orasund/elm-ui-widgets')),
-				text: 'Github'
-			},
-				{
-				icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$penTool),
-				onPress: (!_Utils_eq(model.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($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$penTool),
-				onPress: (!_Utils_eq(model.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'
+							$elm$svg$Svg$Attributes$class('fa-group')
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath,
+							A2(
+								$elm$core$List$cons,
+								$elm$svg$Svg$Attributes$class('fa-secondary'),
+								attrs),
+							secondary),
+							A2(
+							$lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath,
+							A2(
+								$elm$core$List$cons,
+								$elm$svg$Svg$Attributes$class('fa-primary'),
+								attrs),
+							primary)
+						]));
 			}
-			]);
-		var _v0 = $author$project$Widget$Layout$partitionActions(actions);
-		var primaryActions = _v0.primaryActions;
-		var moreActions = _v0.moreActions;
-		var modals = $author$project$Widget$Layout$orderModals(
-			{
-				bottomSheet: $elm$core$Maybe$Nothing,
-				dialog: dialog,
-				leftSheet: _Utils_eq(
-					model.active,
-					$elm$core$Maybe$Just($author$project$Main$LeftSheet)) ? $elm$core$Maybe$Just(
-					A2(
-						$author$project$Widget$Layout$leftSheet,
-						{button: style.sheetButton, sheet: style.sideSheet},
-						{menu: menu, onDismiss: onDismiss, title: title})) : $elm$core$Maybe$Nothing,
-				rightSheet: _Utils_eq(
-					model.active,
-					$elm$core$Maybe$Just($author$project$Main$RightSheet)) ? $elm$core$Maybe$Just(
-					A2(
-						$author$project$Widget$Layout$rightSheet,
-						{insetItem: style.insetItem, sheet: style.sideSheet},
-						{moreActions: moreActions, onDismiss: onDismiss})) : $elm$core$Maybe$Nothing,
-				topSheet: _Utils_eq(
-					model.active,
-					$elm$core$Maybe$Just($author$project$Main$Search)) ? $elm$core$Maybe$Just(
-					A2(
-						$author$project$Widget$Layout$searchSheet,
-						style.searchFill,
-						{onDismiss: onDismiss, search: search})) : $elm$core$Maybe$Nothing
-			});
-		var nav = (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) || (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Tablet) || ($elm$core$List$length(menu.options) > 5))) ? A2(
-			$author$project$Widget$menuBar,
-			style.menuBar,
-			{
-				deviceClass: deviceClass,
-				openLeftSheet: $elm$core$Maybe$Just(
-					msgMapper(
-						$author$project$Main$ChangedSidebar(
-							$elm$core$Maybe$Just($author$project$Main$LeftSheet)))),
-				openRightSheet: $elm$core$Maybe$Just(
-					msgMapper(
-						$author$project$Main$ChangedSidebar(
-							$elm$core$Maybe$Just($author$project$Main$RightSheet)))),
-				openTopSheet: $elm$core$Maybe$Just(
-					msgMapper(
-						$author$project$Main$ChangedSidebar(
-							$elm$core$Maybe$Just($author$project$Main$Search)))),
-				primaryActions: primaryActions,
-				search: $elm$core$Maybe$Just(search),
-				title: title
-			}) : A2(
-			$author$project$Widget$tabBar,
-			style.tabBar,
-			{
-				deviceClass: deviceClass,
-				menu: menu,
-				openRightSheet: $elm$core$Maybe$Just(
-					msgMapper(
-						$author$project$Main$ChangedSidebar(
-							$elm$core$Maybe$Just($author$project$Main$RightSheet)))),
-				openTopSheet: $elm$core$Maybe$Nothing,
-				primaryActions: primaryActions,
-				search: $elm$core$Maybe$Just(search),
-				title: title
-			});
-		return $elm$core$List$concat(
+		}
+	});
+var $lattyware$elm_fontawesome$FontAwesome$Svg$viewIcon = $lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePaths(_List_Nil);
+var $author$project$Page$Icon$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		return A2(
+			$mdgriffith$elm_ui$Element$wrappedRow,
 			_List_fromArray(
 				[
-					style.container,
-					_List_fromArray(
+					$mdgriffith$elm_ui$Element$spacing(10)
+				]),
+			A2(
+				$elm$core$List$map,
+				function (_v2) {
+					var icon = _v2.a;
+					var text = _v2.b;
+					return A2(
+						$author$project$Widget$button,
+						$author$project$Widget$Material$containedButton(palette),
+						{
+							icon: icon,
+							onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+							text: text
+						});
+				},
+				_List_fromArray(
 					[
-						$mdgriffith$elm_ui$Element$inFront(snackbarElem),
-						$mdgriffith$elm_ui$Element$inFront(nav)
-					]),
-					$author$project$Widget$singleModal(modals)
-				]));
+						_Utils_Tuple2(
+						A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+						'elm-material-icons'),
+						_Utils_Tuple2(
+						$author$project$Widget$Icon$materialIcons($danmarcab$material_icons$Material$Icons$Action$done),
+						'material-icons'),
+						_Utils_Tuple2(
+						A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$check),
+						'elm-feather'),
+						_Utils_Tuple2(
+						A2($author$project$Widget$Icon$elmFontawesome, $lattyware$elm_fontawesome$FontAwesome$Svg$viewIcon, $lattyware$elm_fontawesome$FontAwesome$Solid$check),
+						'elm-fontawesome'),
+						_Utils_Tuple2(
+						$author$project$Widget$Icon$elmIonicons($j_panasiuk$elm_ionicons$Ionicon$checkmark),
+						'elm-ionicons'),
+						_Utils_Tuple2(
+						A2(
+							$author$project$Widget$Icon$elmOcticons,
+							{defaultOptions: $capitalist$elm_octicons$Octicons$defaultOptions, withColor: $capitalist$elm_octicons$Octicons$color, withSize: $capitalist$elm_octicons$Octicons$size},
+							$capitalist$elm_octicons$Octicons$check),
+						'elm-octicons'),
+						_Utils_Tuple2(
+						$author$project$Widget$Icon$elmHeroicons($jasonliang_dev$elm_heroicons$Heroicons$Solid$check),
+						'elm-heroicons'),
+						_Utils_Tuple2(
+						$author$project$Widget$Icon$antDesignIconsElm($lemol$ant_design_icons_elm$Ant$Icons$Svg$checkOutlined),
+						'ant-design-icons-elm'),
+						_Utils_Tuple2(
+						$author$project$Widget$Icon$elmZondicons($pehota$elm_zondicons$Zondicons$checkmark),
+						'elm-zondicons')
+					])));
 	});
-var $author$project$Data$Section$ReusableViews = {$: 'ReusableViews'};
-var $author$project$Data$Section$StatelessViews = {$: 'StatelessViews'};
-var $author$project$Main$ToggledExample = function (a) {
-	return {$: 'ToggledExample', a: a};
+var $author$project$Page$Icon$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Icon$init),
+	subscriptions: $author$project$Page$Icon$subscriptions,
+	update: $author$project$Page$Icon$update,
+	view: $author$project$Page$demo($author$project$Page$Icon$view)
+};
+var $author$project$Page$Icon$description = 'Every icon package on elm-packages is supported.';
+var $author$project$Page$Icon$title = 'Icon';
+var $author$project$Page$Icon$page = $author$project$UIExplorer$Tile$page(
+	A2(
+		$author$project$UIExplorer$Tile$next,
+		$author$project$Page$Icon$demo,
+		$author$project$UIExplorer$Tile$first(
+			A2(
+				$author$project$UIExplorer$Tile$static,
+				_List_Nil,
+				F2(
+					function (_v0, _v1) {
+						return A2(
+							$mdgriffith$elm_ui$Element$column,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$spacing(32)
+								]),
+							_List_fromArray(
+								[
+									A2(
+									$mdgriffith$elm_ui$Element$el,
+									$author$project$Widget$Material$Typography$h3,
+									$mdgriffith$elm_ui$Element$text($author$project$Page$Icon$title)),
+									A2(
+									$mdgriffith$elm_ui$Element$paragraph,
+									_List_Nil,
+									$elm$core$List$singleton(
+										$mdgriffith$elm_ui$Element$text($author$project$Page$Icon$description)))
+								]));
+					})))));
+var $author$project$Page$Item$init = _Utils_Tuple2(
+	{isEnabled: true, isExpanded: false},
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$Item$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Item$update = F2(
+	function (msg, model) {
+		if (msg.$ === 'ToggleModal') {
+			var bool = msg.a;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{isEnabled: bool}),
+				$elm$core$Platform$Cmd$none);
+		} else {
+			var bool = msg.a;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{isExpanded: bool}),
+				$elm$core$Platform$Cmd$none);
+		}
+	});
+var $author$project$Page$Item$ToggleModal = function (a) {
+	return {$: 'ToggleModal', a: a};
+};
+var $author$project$Page$Item$ToogleExpand = function (a) {
+	return {$: 'ToogleExpand', a: a};
 };
-var $author$project$Widget$asItem = $author$project$Internal$Item$asItem;
-var $Orasund$elm_ui_framework$Framework$Grid$compact = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-		$mdgriffith$elm_ui$Element$alignTop
-	]);
-var $mdgriffith$elm_ui$Internal$Model$Main = {$: 'Main'};
-var $mdgriffith$elm_ui$Element$Region$mainContent = $mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$Main);
-var $Orasund$elm_ui_framework$Framework$container = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$centerX,
-		$mdgriffith$elm_ui$Element$centerY,
-		$mdgriffith$elm_ui$Element$width(
-		A2($mdgriffith$elm_ui$Element$maximum, 1200, $mdgriffith$elm_ui$Element$fill)),
-		$mdgriffith$elm_ui$Element$padding(20),
-		$mdgriffith$elm_ui$Element$Region$mainContent,
-		$mdgriffith$elm_ui$Element$Background$color(
-		A3($mdgriffith$elm_ui$Element$rgb255, 255, 255, 255))
-	]);
 var $author$project$Internal$Item$divider = function (style) {
 	return A2(
 		$author$project$Internal$Item$toItem,
@@ -19314,419 +22384,1908 @@ var $author$project$Internal$Item$divider = function (style) {
 		});
 };
 var $author$project$Widget$divider = $author$project$Internal$Item$divider;
-var $author$project$Internal$Item$expansionItem = F2(
-	function (s, _v0) {
-		var icon = _v0.icon;
-		var text = _v0.text;
-		var onToggle = _v0.onToggle;
-		var content = _v0.content;
-		var isExpanded = _v0.isExpanded;
-		return A2(
-			$elm$core$List$cons,
-			A2(
-				$author$project$Internal$Item$insetItem,
-				s.item,
-				{
-					content: isExpanded ? s.collapseIcon : s.expandIcon,
-					icon: icon,
-					onPress: $elm$core$Maybe$Just(
-						onToggle(!isExpanded)),
-					text: text
-				}),
-			isExpanded ? content : _List_Nil);
-	});
-var $author$project$Widget$expansionItem = function () {
-	var fun = $author$project$Internal$Item$expansionItem;
-	return fun;
-}();
-var $mdgriffith$elm_ui$Element$Font$bold = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$fontWeight, $mdgriffith$elm_ui$Internal$Style$classes.bold);
-var $mdgriffith$elm_ui$Internal$Model$Heading = function (a) {
-	return {$: 'Heading', a: a};
-};
-var $mdgriffith$elm_ui$Element$Region$heading = A2($elm$core$Basics$composeL, $mdgriffith$elm_ui$Internal$Model$Describe, $mdgriffith$elm_ui$Internal$Model$Heading);
-var $Orasund$elm_ui_framework$Framework$Heading$h = function (inputLevel) {
-	var level = A3($elm$core$Basics$clamp, 1, 6, inputLevel);
-	var size = (level === 6) ? 14 : (32 - ((level - 1) * 4));
-	return _List_fromArray(
-		[
-			$mdgriffith$elm_ui$Element$Region$heading(level),
-			$mdgriffith$elm_ui$Element$Font$size(size),
-			$mdgriffith$elm_ui$Element$paddingEach(
-			{bottom: 2, left: 0, right: 0, top: 2}),
-			$mdgriffith$elm_ui$Element$alignLeft,
-			$mdgriffith$elm_ui$Element$Font$bold
-		]);
-};
-var $Orasund$elm_ui_framework$Framework$Heading$h2 = $Orasund$elm_ui_framework$Framework$Heading$h(2);
-var $Orasund$elm_ui_framework$Framework$Heading$h3 = $Orasund$elm_ui_framework$Framework$Heading$h(3);
-var $elm$html$Html$Attributes$id = $elm$html$Html$Attributes$stringProperty('id');
-var $author$project$Widget$itemList = function () {
-	var fun = $author$project$Internal$List$itemList;
-	return fun;
-}();
-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 $Orasund$elm_ui_framework$Framework$Grid$section = _Utils_ap(
-	$Orasund$elm_ui_framework$Framework$Grid$simple,
-	_List_fromArray(
-		[
-			$mdgriffith$elm_ui$Element$Border$widthEach(
-			{bottom: 0, left: 0, right: 0, top: 2}),
-			$mdgriffith$elm_ui$Element$Border$color($Orasund$elm_ui_framework$Framework$Color$lightGrey),
-			$mdgriffith$elm_ui$Element$paddingEach(
-			{bottom: 30, left: 0, right: 0, top: 10})
-		]));
-var $author$project$Widget$button = function () {
-	var fun = $author$project$Internal$Button$button;
-	return fun;
-}();
-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: $elm$core$Basics$always($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: $elm$core$Basics$always($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'
-						})
-					])),
-			_List_Nil);
-	});
-var $author$project$Reusable$view = function (_v0) {
-	var theme = _v0.theme;
-	var addSnackbar = _v0.addSnackbar;
-	var style = $author$project$Data$Theme$toStyle(theme);
+var $author$project$Internal$Material$Item$fullBleedDivider = function (palette) {
 	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(
+		content: {
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(1)),
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$lightGray(palette)))
+				])
+		},
+		element: _List_fromArray(
 			[
-				A2($author$project$Reusable$snackbar, style, addSnackbar)
-			]),
-		title: 'Reusable Views'
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(1)),
+				$mdgriffith$elm_ui$Element$padding(0),
+				$mdgriffith$elm_ui$Element$Border$width(0)
+			])
 	};
 };
-var $author$project$Stateless$Idle = {$: 'Idle'};
-var $author$project$Data$Example$get = function (example) {
-	switch (example.$) {
-		case 'ButtonExample':
-			return function ($) {
-				return $.button;
-			};
-		case 'SwitchExample':
-			return function ($) {
-				return $._switch;
-			};
-		case 'SelectExample':
-			return function ($) {
-				return $.select;
-			};
-		case 'MultiSelectExample':
-			return function ($) {
-				return $.multiSelect;
-			};
-		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;
-			};
-		case 'ListExample':
-			return function ($) {
-				return $.list;
-			};
-		case 'ProgressIndicatorExample':
-			return function ($) {
-				return $.progressIndicator;
-			};
-		case 'IconExample':
-			return function ($) {
-				return $.icon;
-			};
-		case 'SheetExample':
-			return function ($) {
-				return $.sheet;
-			};
-		case 'AppBarExample':
-			return function ($) {
-				return $.appBar;
-			};
-		case 'LayoutExample':
-			return function ($) {
-				return $.layout;
-			};
-		default:
-			return function ($) {
-				return $.snackbar;
-			};
-	}
-};
-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$View$States$appBar = F2(
-	function (_v0, style) {
-		return _List_Nil;
+var $author$project$Widget$Material$fullBleedDivider = $author$project$Internal$Material$Item$fullBleedDivider;
+var $author$project$Internal$Item$fullBleedItem = F2(
+	function (s, _v0) {
+		var onPress = _v0.onPress;
+		var text = _v0.text;
+		var icon = _v0.icon;
+		return A2(
+			$author$project$Internal$Item$toItem,
+			s,
+			function (style) {
+				return A2(
+					$mdgriffith$elm_ui$Element$Input$button,
+					_Utils_ap(
+						style.elementButton,
+						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
+					{
+						label: A2(
+							$mdgriffith$elm_ui$Element$row,
+							style.content.elementRow,
+							_List_fromArray(
+								[
+									A2(
+									$mdgriffith$elm_ui$Element$el,
+									style.content.content.text.elementText,
+									A2(
+										$mdgriffith$elm_ui$Element$paragraph,
+										_List_Nil,
+										$elm$core$List$singleton(
+											$mdgriffith$elm_ui$Element$text(text)))),
+									icon(style.content.content.icon)
+								])),
+						onPress: onPress
+					});
+			});
 	});
-var $author$project$Widget$iconButton = function () {
-	var fun = $author$project$Internal$Button$iconButton;
+var $author$project$Widget$fullBleedItem = function () {
+	var fun = $author$project$Internal$Item$fullBleedItem;
 	return fun;
 }();
-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;
-		var fun = $author$project$Internal$Button$textButton;
-		return A2(
-			fun,
-			style,
-			{onPress: onPress, text: text});
-	});
-var $feathericons$elm_feather$FeatherIcons$triangle = A2(
-	$feathericons$elm_feather$FeatherIcons$makeBuilder,
-	'triangle',
-	_List_fromArray(
-		[
+var $author$project$Internal$Material$Item$fullBleedItem = function (palette) {
+	var i = $author$project$Internal$Material$Item$insetItem(palette);
+	return {
+		content: {
+			content: {
+				content: {icon: i.content.content.content.content, text: i.content.content.content.text},
+				elementRow: i.content.content.elementRow
+			},
+			elementButton: i.content.elementButton,
+			ifDisabled: i.content.ifDisabled,
+			otherwise: i.content.otherwise
+		},
+		element: i.element
+	};
+};
+var $author$project$Widget$Material$fullBleedItem = $author$project$Internal$Material$Item$fullBleedItem;
+var $elm$html$Html$Attributes$alt = $elm$html$Html$Attributes$stringProperty('alt');
+var $elm$html$Html$Attributes$src = function (url) {
+	return A2(
+		$elm$html$Html$Attributes$stringProperty,
+		'src',
+		_VirtualDom_noJavaScriptOrHtmlUri(url));
+};
+var $mdgriffith$elm_ui$Element$image = F2(
+	function (attrs, _v0) {
+		var src = _v0.src;
+		var description = _v0.description;
+		var imageAttributes = A2(
+			$elm$core$List$filter,
+			function (a) {
+				switch (a.$) {
+					case 'Width':
+						return true;
+					case 'Height':
+						return true;
+					default:
+						return false;
+				}
+			},
+			attrs);
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asEl,
+			$mdgriffith$elm_ui$Internal$Model$div,
 			A2(
-			$elm$svg$Svg$path,
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.imageContainer),
+				attrs),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+				_List_fromArray(
+					[
+						A4(
+						$mdgriffith$elm_ui$Internal$Model$element,
+						$mdgriffith$elm_ui$Internal$Model$asEl,
+						$mdgriffith$elm_ui$Internal$Model$NodeName('img'),
+						_Utils_ap(
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Internal$Model$Attr(
+									$elm$html$Html$Attributes$src(src)),
+									$mdgriffith$elm_ui$Internal$Model$Attr(
+									$elm$html$Html$Attributes$alt(description))
+								]),
+							imageAttributes),
+						$mdgriffith$elm_ui$Internal$Model$Unkeyed(_List_Nil))
+					])));
+	});
+var $author$project$Internal$Item$imageItem = F2(
+	function (s, _v0) {
+		var onPress = _v0.onPress;
+		var text = _v0.text;
+		var image = _v0.image;
+		var content = _v0.content;
+		return A2(
+			$author$project$Internal$Item$toItem,
+			s,
+			function (style) {
+				return A2(
+					$mdgriffith$elm_ui$Element$Input$button,
+					_Utils_ap(
+						style.elementButton,
+						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
+					{
+						label: A2(
+							$mdgriffith$elm_ui$Element$row,
+							style.content.elementRow,
+							_List_fromArray(
+								[
+									A2($mdgriffith$elm_ui$Element$el, style.content.content.image.element, image),
+									A2(
+									$mdgriffith$elm_ui$Element$el,
+									style.content.content.text.elementText,
+									A2(
+										$mdgriffith$elm_ui$Element$paragraph,
+										_List_Nil,
+										$elm$core$List$singleton(
+											$mdgriffith$elm_ui$Element$text(text)))),
+									content(style.content.content.content)
+								])),
+						onPress: onPress
+					});
+			});
+	});
+var $author$project$Widget$imageItem = function () {
+	var fun = $author$project$Internal$Item$imageItem;
+	return fun;
+}();
+var $author$project$Internal$Material$Item$imageItem = function (palette) {
+	return {
+		content: {
+			content: {
+				content: {
+					content: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 24
+					},
+					image: {
+						element: _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width(
+								$mdgriffith$elm_ui$Element$px(40)),
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(40))
+							])
+					},
+					text: {
+						elementText: _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+							])
+					}
+				},
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spacing(16),
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+					])
+			},
+			elementButton: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					A2($mdgriffith$elm_ui$Element$paddingXY, 16, 8)
+				]),
+			ifDisabled: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$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', 'default'))
+				]),
+			otherwise: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonPressedOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonFocusOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonHoverOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						]))
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$padding(0)
+			])
+	};
+};
+var $author$project$Widget$Material$imageItem = $author$project$Internal$Material$Item$imageItem;
+var $author$project$Internal$Material$Item$insetDivider = function (palette) {
+	return {
+		content: {
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(1)),
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$lightGray(palette)))
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(1)),
+				$mdgriffith$elm_ui$Element$Border$width(0),
+				$mdgriffith$elm_ui$Element$paddingEach(
+				{bottom: 0, left: 72, right: 0, top: 0})
+			])
+	};
+};
+var $author$project$Widget$Material$insetDivider = $author$project$Internal$Material$Item$insetDivider;
+var $author$project$Internal$Material$Palette$textGray = function (palette) {
+	return A3($author$project$Widget$Material$Color$withShade, palette.on.surface, 0.77, palette.surface);
+};
+var $author$project$Internal$Material$Item$insetHeader = function (palette) {
+	return {
+		content: {
+			content: {
+				divider: $author$project$Internal$Material$Item$insetDivider(palette).content,
+				title: _Utils_ap(
+					$author$project$Widget$Material$Typography$caption,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Font$color(
+							$author$project$Widget$Material$Color$fromColor(
+								$author$project$Internal$Material$Palette$textGray(palette)))
+						]))
+			},
+			elementColumn: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$spacing(12)
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+				$mdgriffith$elm_ui$Element$Border$width(0),
+				$mdgriffith$elm_ui$Element$paddingEach(
+				{bottom: 0, left: 72, right: 0, top: 0})
+			])
+	};
+};
+var $author$project$Widget$Material$insetHeader = $author$project$Internal$Material$Item$insetHeader;
+var $author$project$Internal$Material$Item$middleDivider = function (palette) {
+	return {
+		content: {
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(1)),
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$lightGray(palette)))
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(1)),
+				$mdgriffith$elm_ui$Element$Border$width(0),
+				$mdgriffith$elm_ui$Element$paddingEach(
+				{bottom: 0, left: 16, right: 16, top: 0})
+			])
+	};
+};
+var $author$project$Widget$Material$middleDivider = $author$project$Internal$Material$Item$middleDivider;
+var $author$project$Internal$Item$multiLineItem = F2(
+	function (s, _v0) {
+		var onPress = _v0.onPress;
+		var title = _v0.title;
+		var text = _v0.text;
+		var icon = _v0.icon;
+		var content = _v0.content;
+		return A2(
+			$author$project$Internal$Item$toItem,
+			s,
+			function (style) {
+				return A2(
+					$mdgriffith$elm_ui$Element$Input$button,
+					_Utils_ap(
+						style.elementButton,
+						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
+					{
+						label: A2(
+							$mdgriffith$elm_ui$Element$row,
+							style.content.elementRow,
+							_List_fromArray(
+								[
+									A2(
+									$mdgriffith$elm_ui$Element$el,
+									style.content.content.icon.element,
+									icon(style.content.content.icon.content)),
+									A2(
+									$mdgriffith$elm_ui$Element$column,
+									style.content.content.description.elementColumn,
+									_List_fromArray(
+										[
+											A2(
+											$mdgriffith$elm_ui$Element$paragraph,
+											style.content.content.description.content.title.elementText,
+											$elm$core$List$singleton(
+												$mdgriffith$elm_ui$Element$text(title))),
+											A2(
+											$mdgriffith$elm_ui$Element$paragraph,
+											style.content.content.description.content.text.elementText,
+											$elm$core$List$singleton(
+												$mdgriffith$elm_ui$Element$text(text)))
+										])),
+									content(style.content.content.content)
+								])),
+						onPress: onPress
+					});
+			});
+	});
+var $author$project$Widget$multiLineItem = function () {
+	var fun = $author$project$Internal$Item$multiLineItem;
+	return fun;
+}();
+var $author$project$Widget$Material$Typography$body1 = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Font$size(16),
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.5)
+	]);
+var $author$project$Widget$Material$Typography$body2 = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Font$size(14),
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.25)
+	]);
+var $author$project$Internal$Material$Item$multiLineItem = function (palette) {
+	return {
+		content: {
+			content: {
+				content: {
+					content: {
+						color: $author$project$Internal$Material$Palette$textGray(palette),
+						size: 24
+					},
+					description: {
+						content: {
+							text: {
+								elementText: _Utils_ap(
+									$author$project$Widget$Material$Typography$body2,
+									_List_fromArray(
+										[
+											$mdgriffith$elm_ui$Element$Font$color(
+											$author$project$Widget$Material$Color$fromColor(
+												$author$project$Internal$Material$Palette$gray(palette)))
+										]))
+							},
+							title: {elementText: $author$project$Widget$Material$Typography$body1}
+						},
+						elementColumn: _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+								$mdgriffith$elm_ui$Element$spacing(4)
+							])
+					},
+					icon: {
+						content: {
+							color: $author$project$Internal$Material$Palette$textGray(palette),
+							size: 24
+						},
+						element: _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width(
+								$mdgriffith$elm_ui$Element$px(40)),
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(24))
+							])
+					}
+				},
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spacing(16),
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+					])
+			},
+			elementButton: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$padding(16)
+				]),
+			ifDisabled: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$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', 'default'))
+				]),
+			otherwise: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonPressedOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonFocusOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonHoverOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						]))
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$padding(0)
+			])
+	};
+};
+var $author$project$Widget$Material$multiLineItem = $author$project$Internal$Material$Item$multiLineItem;
+var $author$project$Page$Item$view = F2(
+	function (_v0, model) {
+		var palette = _v0.palette;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_Utils_ap(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$height(
+						A2($mdgriffith$elm_ui$Element$minimum, 800, $mdgriffith$elm_ui$Element$fill)),
+						$mdgriffith$elm_ui$Element$width(
+						A2($mdgriffith$elm_ui$Element$minimum, 400, $mdgriffith$elm_ui$Element$fill))
+					]),
+				model.isEnabled ? $author$project$Widget$singleModal(
+					$elm$core$List$singleton(
+						{
+							content: A2(
+								$author$project$Widget$itemList,
+								$author$project$Widget$Material$sideSheet(palette),
+								$elm$core$List$concat(
+									_List_fromArray(
+										[
+											_List_fromArray(
+											[
+												A2(
+												$author$project$Widget$headerItem,
+												$author$project$Widget$Material$fullBleedHeader(palette),
+												'Section 1'),
+												$author$project$Widget$asItem(
+												$mdgriffith$elm_ui$Element$text('Custom Item')),
+												$author$project$Widget$divider(
+												$author$project$Widget$Material$middleDivider(palette)),
+												A2(
+												$author$project$Widget$fullBleedItem,
+												$author$project$Widget$Material$fullBleedItem(palette),
+												{
+													icon: function (_v1) {
+														return $mdgriffith$elm_ui$Element$none;
+													},
+													onPress: $elm$core$Maybe$Nothing,
+													text: 'Full Bleed Item'
+												}),
+												A2(
+												$author$project$Widget$headerItem,
+												$author$project$Widget$Material$fullBleedHeader(palette),
+												'Section 2'),
+												A2(
+												$author$project$Widget$insetItem,
+												$author$project$Widget$Material$insetItem(palette),
+												{
+													content: function (_v2) {
+														return $mdgriffith$elm_ui$Element$none;
+													},
+													icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$change_history),
+													onPress: $elm$core$Maybe$Nothing,
+													text: 'Item with Icon'
+												}),
+												A2(
+												$author$project$Widget$imageItem,
+												$author$project$Widget$Material$imageItem(palette),
+												{
+													content: function (_v3) {
+														var size = _v3.size;
+														var color = _v3.color;
+														return A2(
+															$mdgriffith$elm_ui$Element$el,
+															_List_fromArray(
+																[
+																	$mdgriffith$elm_ui$Element$Font$color(
+																	$author$project$Widget$Material$Color$fromColor(color)),
+																	$mdgriffith$elm_ui$Element$Font$size(size)
+																]),
+															$mdgriffith$elm_ui$Element$text('1.'));
+													},
+													image: A2(
+														$mdgriffith$elm_ui$Element$image,
+														_List_fromArray(
+															[
+																$mdgriffith$elm_ui$Element$width(
+																$mdgriffith$elm_ui$Element$px(40)),
+																$mdgriffith$elm_ui$Element$height(
+																$mdgriffith$elm_ui$Element$px(40))
+															]),
+														{description: 'Elm logo', src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Elm_logo.svg/1024px-Elm_logo.svg.png'}),
+													onPress: $elm$core$Maybe$Nothing,
+													text: 'Item with Image'
+												}),
+												$author$project$Widget$divider(
+												$author$project$Widget$Material$insetDivider(palette)),
+												A2(
+												$author$project$Widget$insetItem,
+												$author$project$Widget$Material$insetItem(palette),
+												{
+													content: function (_v4) {
+														var size = _v4.size;
+														var color = _v4.color;
+														return A2(
+															$mdgriffith$elm_ui$Element$el,
+															_List_fromArray(
+																[
+																	$mdgriffith$elm_ui$Element$Font$color(
+																	$author$project$Widget$Material$Color$fromColor(color)),
+																	$mdgriffith$elm_ui$Element$Font$size(size)
+																]),
+															$mdgriffith$elm_ui$Element$text('2.'));
+													},
+													icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+													onPress: $elm$core$Maybe$Just(
+														$author$project$Page$Item$ToogleExpand(!model.isExpanded)),
+													text: 'Click Me'
+												}),
+												A2(
+												$author$project$Widget$multiLineItem,
+												$author$project$Widget$Material$multiLineItem(palette),
+												{
+													content: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+													icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+													onPress: $elm$core$Maybe$Nothing,
+													text: 'Description. Description. Description. Description. Description. Description. Description. Description. Description. Description.',
+													title: 'Item'
+												}),
+												A2(
+												$author$project$Widget$imageItem,
+												$author$project$Widget$Material$imageItem(palette),
+												{
+													content: function (_v5) {
+														return A2(
+															$author$project$Widget$switch,
+															$author$project$Widget$Material$switch(palette),
+															{
+																active: model.isExpanded,
+																description: 'Click Me',
+																onPress: $elm$core$Maybe$Just(
+																	$author$project$Page$Item$ToogleExpand(!model.isExpanded))
+															});
+													},
+													image: $mdgriffith$elm_ui$Element$none,
+													onPress: $elm$core$Maybe$Just(
+														$author$project$Page$Item$ToogleExpand(!model.isExpanded)),
+													text: 'Clickable Item with Switch'
+												}),
+												$author$project$Widget$divider(
+												$author$project$Widget$Material$fullBleedDivider(palette))
+											]),
+											A2(
+											$author$project$Widget$expansionItem,
+											$author$project$Widget$Material$expansionItem(palette),
+											{
+												content: _List_fromArray(
+													[
+														A2(
+														$author$project$Widget$headerItem,
+														$author$project$Widget$Material$insetHeader(palette),
+														'Section 3'),
+														A2(
+														$author$project$Widget$insetItem,
+														$author$project$Widget$Material$insetItem(palette),
+														{
+															content: function (_v6) {
+																var size = _v6.size;
+																var color = _v6.color;
+																return A2(
+																	$mdgriffith$elm_ui$Element$el,
+																	_List_fromArray(
+																		[
+																			$mdgriffith$elm_ui$Element$Font$color(
+																			$author$project$Widget$Material$Color$fromColor(color)),
+																			$mdgriffith$elm_ui$Element$Font$size(size)
+																		]),
+																	$mdgriffith$elm_ui$Element$text('3.'));
+															},
+															icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+															onPress: $elm$core$Maybe$Nothing,
+															text: 'Item'
+														})
+													]),
+												icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+												isExpanded: model.isExpanded,
+												onToggle: $author$project$Page$Item$ToogleExpand,
+												text: 'Expandable Item'
+											}),
+											_List_fromArray(
+											[
+												A2(
+												$author$project$Widget$headerItem,
+												$author$project$Widget$Material$fullBleedHeader(palette),
+												'Menu')
+											]),
+											A2(
+											$author$project$Widget$selectItem,
+											$author$project$Widget$Material$selectItem(palette),
+											{
+												onSelect: function (_int) {
+													return $elm$core$Maybe$Just(
+														$author$project$Page$Item$ToogleExpand(_int === 1));
+												},
+												options: A2(
+													$elm$core$List$map,
+													function (bool) {
+														return {
+															icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+															text: bool ? 'Expanded' : 'Collapsed'
+														};
+													},
+													_List_fromArray(
+														[true, false])),
+												selected: model.isExpanded ? $elm$core$Maybe$Just(1) : $elm$core$Maybe$Just(0)
+											})
+										]))),
+							onDismiss: $elm$core$Maybe$Just(
+								$author$project$Page$Item$ToggleModal(false))
+						})) : _List_Nil),
+			A2(
+				$author$project$Widget$button,
+				$author$project$Widget$Material$containedButton(palette),
+				{
+					icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$visibility),
+					onPress: $elm$core$Maybe$Just(
+						$author$project$Page$Item$ToggleModal(true)),
+					text: 'Show Sheet'
+				}));
+	});
+var $author$project$Page$Item$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Item$init),
+	subscriptions: $author$project$Page$Item$subscriptions,
+	update: $author$project$Page$Item$update,
+	view: $author$project$Page$demo($author$project$Page$Item$view)
+};
+var $author$project$Page$Item$description = 'Items can be composed into lists.';
+var $author$project$Internal$Material$List$bottomSheet = function (palette) {
+	return {
+		content: {
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+				]),
+			ifFirst: _List_Nil,
+			ifLast: _List_Nil,
+			ifSingleton: _List_Nil,
+			otherwise: _List_Nil
+		},
+		elementColumn: _Utils_ap(
+			$author$project$Widget$Material$Color$textAndBackground(palette.surface),
 			_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$States$button = F2(
-	function (idle, style) {
-		return _List_fromArray(
-			[
-				_Utils_Tuple2(
-				'Button',
-				A2(
-					$author$project$Widget$button,
-					style.button,
-					{
-						icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$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($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$triangle),
-						onPress: $elm$core$Maybe$Just(idle),
-						text: 'Button'
-					})),
-				_Utils_Tuple2(
-				'Disabled button',
-				A2(
-					$author$project$Widget$button,
-					style.button,
-					{
-						icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$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($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$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($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$triangle),
-							onPress: $elm$core$Maybe$Just(idle),
-							text: 'Button'
-						})))
-			]);
-	});
-var $author$project$View$States$dialog = F2(
-	function (_v0, _v1) {
-		return _List_Nil;
-	});
-var $author$project$View$States$icon = F2(
-	function (_v0, style) {
-		return _List_Nil;
-	});
-var $author$project$View$States$layout = F2(
-	function (_v0, style) {
-		return _List_Nil;
-	});
-var $author$project$Internal$List$column = function (style) {
-	return A2(
-		$elm$core$Basics$composeR,
-		$elm$core$List$map(
-			function (a) {
-				return A2(
-					$author$project$Internal$Item$toItem,
-					{content: _Utils_Tuple0, element: style.content.element},
-					$elm$core$Basics$always(a));
-			}),
-		$author$project$Internal$List$itemList(style));
+					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$width(
+					A2($mdgriffith$elm_ui$Element$maximum, 360, $mdgriffith$elm_ui$Element$fill)),
+					A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8)
+				]))
+	};
 };
-var $author$project$Widget$column = function () {
-	var fun = $author$project$Internal$List$column;
-	return fun;
+var $author$project$Widget$Material$bottomSheet = $author$project$Internal$Material$List$bottomSheet;
+var $author$project$Page$Item$viewDividerFunctions = function () {
+	var viewButton = F4(
+		function (listStyle, style, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.divider',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					_List_fromArray(
+						[
+							$author$project$Widget$divider(
+							style(palette)),
+							A2(
+							$author$project$Widget$fullBleedItem,
+							$author$project$Widget$Material$fullBleedItem(palette),
+							{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								onPress: $elm$core$Maybe$Nothing,
+								text: 'Placeholder'
+							}),
+							$author$project$Widget$divider(
+							style(palette)),
+							A2(
+							$author$project$Widget$fullBleedItem,
+							$author$project$Widget$Material$fullBleedItem(palette),
+							{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								onPress: $elm$core$Maybe$Nothing,
+								text: 'Placeholder'
+							}),
+							$author$project$Widget$divider(
+							style(palette))
+						])));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewButton]));
 }();
-var $author$project$Internal$List$row = function (style) {
-	return A2(
-		$elm$core$Basics$composeR,
-		$elm$core$List$map(
-			function (a) {
-				return A2(
-					$author$project$Internal$Item$toItem,
-					{content: _Utils_Tuple0, element: style.content.element},
-					$elm$core$Basics$always(a));
-			}),
+var $author$project$Page$Item$dividerBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$optionListStory,
+			'Style',
+			_Utils_Tuple2('FullBleedDivider', $author$project$Widget$Material$fullBleedDivider),
+			_List_fromArray(
+				[
+					_Utils_Tuple2('MiddleDivider', $author$project$Widget$Material$middleDivider),
+					_Utils_Tuple2('InsetDivider', $author$project$Widget$Material$insetDivider)
+				])),
 		A2(
-			$elm$core$Basics$composeR,
-			$author$project$Internal$List$internal(style.content),
-			$mdgriffith$elm_ui$Element$row(style.elementRow)));
-};
-var $author$project$Widget$row = function () {
-	var fun = $author$project$Internal$List$row;
-	return fun;
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$optionListStory,
+				'Column Style',
+				_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+				_List_fromArray(
+					[
+						_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+						_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+						_Utils_Tuple2(
+						'Column',
+						$elm$core$Basics$always($author$project$Widget$Material$column))
+					])),
+			A2(
+				$author$project$UIExplorer$Story$book,
+				$elm$core$Maybe$Just('Options'),
+				$author$project$Page$Item$viewDividerFunctions))));
+var $author$project$Page$Item$viewMExpansionItemFunctions = function () {
+	var viewMultiLineItem = F7(
+		function (listStyle, style, icon, text, isExpanded, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.multiLineItem',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					$elm$core$List$concat(
+						_List_fromArray(
+							[
+								A2(
+								$author$project$Widget$expansionItem,
+								style(palette),
+								{
+									content: _List_fromArray(
+										[
+											A2(
+											$author$project$Widget$fullBleedItem,
+											$author$project$Widget$Material$fullBleedItem(palette),
+											{
+												icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+												onPress: $elm$core$Maybe$Nothing,
+												text: 'Placeholder'
+											})
+										]),
+									icon: icon,
+									isExpanded: isExpanded,
+									onToggle: $elm$core$Basics$always(_Utils_Tuple0),
+									text: text
+								}),
+								A2(
+								$author$project$Widget$expansionItem,
+								style(palette),
+								{
+									content: _List_fromArray(
+										[
+											A2(
+											$author$project$Widget$fullBleedItem,
+											$author$project$Widget$Material$fullBleedItem(palette),
+											{
+												icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+												onPress: $elm$core$Maybe$Nothing,
+												text: 'Placeholder'
+											})
+										]),
+									icon: icon,
+									isExpanded: isExpanded,
+									onToggle: $elm$core$Basics$always(_Utils_Tuple0),
+									text: text
+								}),
+								A2(
+								$author$project$Widget$expansionItem,
+								style(palette),
+								{
+									content: _List_fromArray(
+										[
+											A2(
+											$author$project$Widget$fullBleedItem,
+											$author$project$Widget$Material$fullBleedItem(palette),
+											{
+												icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+												onPress: $elm$core$Maybe$Nothing,
+												text: 'Placeholder'
+											})
+										]),
+									icon: icon,
+									isExpanded: isExpanded,
+									onToggle: $elm$core$Basics$always(_Utils_Tuple0),
+									text: text
+								})
+							]))));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewMultiLineItem]));
 }();
-var $author$project$View$States$list = F2(
-	function (_v0, style) {
-		return _List_fromArray(
-			[
-				_Utils_Tuple2(
-				'Row',
+var $author$project$Page$Item$expansionItemBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'is Expanded',
+			_Utils_Tuple2(true, false),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A2($author$project$UIExplorer$Story$textStory, 'Text', 'Item text'),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'With Icon',
+					_Utils_Tuple2(
+						A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+						$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+					true),
 				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.column,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$text('A'),
-							$mdgriffith$elm_ui$Element$text('B'),
-							$mdgriffith$elm_ui$Element$text('C')
-						]))),
-				_Utils_Tuple2(
-				'Column as Card',
-				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 as Card',
-				A2(
-					$author$project$Widget$column,
-					style.cardColumn,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$text('A')
-						]))),
-				_Utils_Tuple2(
-				'Empty List as Card',
-				A2($author$project$Widget$column, style.cardColumn, _List_Nil))
-			]);
-	});
-var $author$project$View$States$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 $author$project$Internal$Select$selectButton(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('InsetItem', $author$project$Widget$Material$expansionItem),
+						_List_Nil),
 					A2(
-						$author$project$Widget$Customize$elementButton,
-						_Utils_ap(
-							style.element,
-							($elm$core$List$length(list) === 1) ? style.ifSingleton : ((!i) ? style.ifFirst : (_Utils_eq(
-								i,
-								$elm$core$List$length(list) - 1) ? style.ifLast : style.otherwise))),
-						style.content));
-			},
-			list);
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$optionListStory,
+							'Column Style',
+							_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+							_List_fromArray(
+								[
+									_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+									_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+									_Utils_Tuple2(
+									'Column',
+									$elm$core$Basics$always($author$project$Widget$Material$column))
+								])),
+						A2(
+							$author$project$UIExplorer$Story$book,
+							$elm$core$Maybe$Just('Options'),
+							$author$project$Page$Item$viewMExpansionItemFunctions)))))));
+var $author$project$Page$Item$viewFullBleedItemFunctions = function () {
+	var viewFullBleedItem = F7(
+		function (listStyle, style, text, onPress, icon, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.fullBleedItem',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$fullBleedItem,
+							style(palette),
+							{icon: icon, onPress: onPress, text: text}),
+							A2(
+							$author$project$Widget$fullBleedItem,
+							style(palette),
+							{icon: icon, onPress: onPress, text: text}),
+							A2(
+							$author$project$Widget$fullBleedItem,
+							style(palette),
+							{icon: icon, onPress: onPress, text: text})
+						])));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewFullBleedItem]));
+}();
+var $author$project$Page$Item$fullBleedItemBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With Icon',
+			_Utils_Tuple2(
+				A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+				$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'With event handler',
+				_Utils_Tuple2(
+					$elm$core$Maybe$Just(_Utils_Tuple0),
+					$elm$core$Maybe$Nothing),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A2($author$project$UIExplorer$Story$textStory, 'Text', 'Item text'),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('FullBleedItem', $author$project$Widget$Material$fullBleedItem),
+						_List_Nil),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$optionListStory,
+							'Column Style',
+							_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+							_List_fromArray(
+								[
+									_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+									_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+									_Utils_Tuple2(
+									'Column',
+									$elm$core$Basics$always($author$project$Widget$Material$column))
+								])),
+						A2(
+							$author$project$UIExplorer$Story$book,
+							$elm$core$Maybe$Just('Options'),
+							$author$project$Page$Item$viewFullBleedItemFunctions)))))));
+var $author$project$Page$Item$viewHeaderFunctions = function () {
+	var viewButton = F5(
+		function (listStyle, style, text, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.divider',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$headerItem,
+							style(palette),
+							text),
+							A2(
+							$author$project$Widget$fullBleedItem,
+							$author$project$Widget$Material$fullBleedItem(palette),
+							{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								onPress: $elm$core$Maybe$Nothing,
+								text: 'Placeholder'
+							}),
+							A2(
+							$author$project$Widget$headerItem,
+							style(palette),
+							text),
+							A2(
+							$author$project$Widget$fullBleedItem,
+							$author$project$Widget$Material$fullBleedItem(palette),
+							{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								onPress: $elm$core$Maybe$Nothing,
+								text: 'Placeholder'
+							}),
+							A2(
+							$author$project$Widget$headerItem,
+							style(palette),
+							text)
+						])));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewButton]));
+}();
+var $author$project$Page$Item$headerBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A2($author$project$UIExplorer$Story$textStory, 'Text', 'Header'),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$optionListStory,
+				'Style',
+				_Utils_Tuple2('FullBleedHeader', $author$project$Widget$Material$fullBleedHeader),
+				_List_fromArray(
+					[
+						_Utils_Tuple2('InsetHeader', $author$project$Widget$Material$insetHeader)
+					])),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Column Style',
+					_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+					_List_fromArray(
+						[
+							_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+							_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+							_Utils_Tuple2(
+							'Column',
+							$elm$core$Basics$always($author$project$Widget$Material$column))
+						])),
+				A2(
+					$author$project$UIExplorer$Story$book,
+					$elm$core$Maybe$Just('Options'),
+					$author$project$Page$Item$viewHeaderFunctions)))));
+var $author$project$Page$Item$viewInsetItemFunctions = function () {
+	var viewFullBleedItem = F8(
+		function (listStyle, style, text, onPress, icon, content, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.insetItem',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$insetItem,
+							style(palette),
+							{content: content, icon: icon, onPress: onPress, text: text}),
+							A2(
+							$author$project$Widget$insetItem,
+							style(palette),
+							{content: content, icon: icon, onPress: onPress, text: text}),
+							A2(
+							$author$project$Widget$insetItem,
+							style(palette),
+							{content: content, icon: icon, onPress: onPress, text: text})
+						])));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewFullBleedItem]));
+}();
+var $author$project$Page$Item$insetItemBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With Content',
+			_Utils_Tuple2(
+				A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+				$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'With Icon',
+				_Utils_Tuple2(
+					A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+					$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'With event handler',
+					_Utils_Tuple2(
+						$elm$core$Maybe$Just(_Utils_Tuple0),
+						$elm$core$Maybe$Nothing),
+					true),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A2($author$project$UIExplorer$Story$textStory, 'Text', 'Item text'),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$optionListStory,
+							'Style',
+							_Utils_Tuple2('InsetItem', $author$project$Widget$Material$insetItem),
+							_List_Nil),
+						A2(
+							$author$project$UIExplorer$Story$addStory,
+							A3(
+								$author$project$UIExplorer$Story$optionListStory,
+								'Column Style',
+								_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+								_List_fromArray(
+									[
+										_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+										_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+										_Utils_Tuple2(
+										'Column',
+										$elm$core$Basics$always($author$project$Widget$Material$column))
+									])),
+							A2(
+								$author$project$UIExplorer$Story$book,
+								$elm$core$Maybe$Just('Options'),
+								$author$project$Page$Item$viewInsetItemFunctions))))))));
+var $author$project$Page$Item$viewMultiLineItemFunctions = function () {
+	var viewMultiLineItem = F9(
+		function (listStyle, style, titleText, text, onPress, icon, content, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.multiLineItem',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$multiLineItem,
+							style(palette),
+							{content: content, icon: icon, onPress: onPress, text: text, title: titleText}),
+							A2(
+							$author$project$Widget$multiLineItem,
+							style(palette),
+							{content: content, icon: icon, onPress: onPress, text: text, title: titleText}),
+							A2(
+							$author$project$Widget$multiLineItem,
+							style(palette),
+							{content: content, icon: icon, onPress: onPress, text: text, title: titleText})
+						])));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewMultiLineItem]));
+}();
+var $author$project$Page$Item$multiLineItemBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With Content',
+			_Utils_Tuple2(
+				A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+				$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'With Icon',
+				_Utils_Tuple2(
+					A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+					$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'With event handler',
+					_Utils_Tuple2(
+						$elm$core$Maybe$Just(_Utils_Tuple0),
+						$elm$core$Maybe$Nothing),
+					true),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A2($author$project$UIExplorer$Story$textStory, 'Text', 'This text may span over multiple lines. But more then three should be avoided.'),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A2($author$project$UIExplorer$Story$textStory, 'Title', 'Title'),
+						A2(
+							$author$project$UIExplorer$Story$addStory,
+							A3(
+								$author$project$UIExplorer$Story$optionListStory,
+								'Style',
+								_Utils_Tuple2('InsetItem', $author$project$Widget$Material$multiLineItem),
+								_List_Nil),
+							A2(
+								$author$project$UIExplorer$Story$addStory,
+								A3(
+									$author$project$UIExplorer$Story$optionListStory,
+									'Column Style',
+									_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+									_List_fromArray(
+										[
+											_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+											_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+											_Utils_Tuple2(
+											'Column',
+											$elm$core$Basics$always($author$project$Widget$Material$column))
+										])),
+								A2(
+									$author$project$UIExplorer$Story$book,
+									$elm$core$Maybe$Just('Options'),
+									$author$project$Page$Item$viewMultiLineItemFunctions)))))))));
+var $author$project$Page$Item$viewSelectItemFunctions = function () {
+	var viewMultiLineItem = F7(
+		function (listStyle, style, selected, options, onSelect, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.multiLineItem',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					$elm$core$List$concat(
+						_List_fromArray(
+							[
+								A2(
+								$author$project$Widget$selectItem,
+								style(palette),
+								{onSelect: onSelect, options: options, selected: selected})
+							]))));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewMultiLineItem]));
+}();
+var $author$project$Page$Item$selectItemBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With event handler',
+			_Utils_Tuple2(
+				$elm$core$Basics$always(
+					$elm$core$Maybe$Just(_Utils_Tuple0)),
+				$elm$core$Basics$always($elm$core$Maybe$Nothing)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$optionListStory,
+				'Options',
+				_Utils_Tuple2(
+					'3 Option',
+					_List_fromArray(
+						[
+							{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							text: 'Submit'
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: ''
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: 'Submit'
+						}
+						])),
+				_List_fromArray(
+					[
+						_Utils_Tuple2(
+						'2 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: 'Submit'
+							},
+								{
+								icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+								text: ''
+							}
+							])),
+						_Utils_Tuple2(
+						'1 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: 'Submit'
+							}
+							]))
+					])),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Selected',
+					_Utils_Tuple2(
+						'Third',
+						$elm$core$Maybe$Just(2)),
+					_List_fromArray(
+						[
+							_Utils_Tuple2(
+							'Second',
+							$elm$core$Maybe$Just(1)),
+							_Utils_Tuple2(
+							'First',
+							$elm$core$Maybe$Just(0)),
+							_Utils_Tuple2('Nothing or Invalid', $elm$core$Maybe$Nothing)
+						])),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('InsetItem', $author$project$Widget$Material$selectItem),
+						_List_Nil),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$optionListStory,
+							'Column Style',
+							_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+							_List_fromArray(
+								[
+									_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+									_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+									_Utils_Tuple2(
+									'Column',
+									$elm$core$Basics$always($author$project$Widget$Material$column))
+								])),
+						A2(
+							$author$project$UIExplorer$Story$book,
+							$elm$core$Maybe$Just('Options'),
+							$author$project$Page$Item$viewSelectItemFunctions)))))));
+var $author$project$Page$Item$title = 'Item';
+var $author$project$Page$Item$page = $author$project$UIExplorer$Tile$page(
+	A2(
+		$author$project$UIExplorer$Tile$nextGroup,
+		$author$project$Page$Item$selectItemBook,
+		A2(
+			$author$project$UIExplorer$Tile$nextGroup,
+			$author$project$Page$Item$expansionItemBook,
+			A2(
+				$author$project$UIExplorer$Tile$nextGroup,
+				$author$project$Page$Item$multiLineItemBook,
+				A2(
+					$author$project$UIExplorer$Tile$nextGroup,
+					$author$project$Page$Item$insetItemBook,
+					A2(
+						$author$project$UIExplorer$Tile$nextGroup,
+						$author$project$Page$Item$fullBleedItemBook,
+						A2(
+							$author$project$UIExplorer$Tile$nextGroup,
+							$author$project$Page$Item$headerBook,
+							A2(
+								$author$project$UIExplorer$Tile$nextGroup,
+								$author$project$Page$Item$dividerBook,
+								A2(
+									$author$project$UIExplorer$Tile$next,
+									$author$project$Page$Item$demo,
+									$author$project$UIExplorer$Tile$first(
+										A2(
+											$author$project$UIExplorer$Tile$static,
+											_List_Nil,
+											F2(
+												function (_v0, _v1) {
+													return A2(
+														$mdgriffith$elm_ui$Element$column,
+														_List_fromArray(
+															[
+																$mdgriffith$elm_ui$Element$spacing(32)
+															]),
+														_List_fromArray(
+															[
+																A2(
+																$mdgriffith$elm_ui$Element$el,
+																$author$project$Widget$Material$Typography$h3,
+																$mdgriffith$elm_ui$Element$text($author$project$Page$Item$title)),
+																A2(
+																$mdgriffith$elm_ui$Element$paragraph,
+																_List_Nil,
+																$elm$core$List$singleton(
+																	$mdgriffith$elm_ui$Element$text($author$project$Page$Item$description)))
+															]));
+												}))))))))))));
+var $mdgriffith$elm_ui$Element$moveDown = 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$Internal$Modal$multiModal = function (list) {
+	if (list.b) {
+		var head = list.a;
+		var tail = list.b;
+		return _Utils_ap(
+			A2(
+				$elm$core$List$map,
+				function (_v1) {
+					var content = _v1.content;
+					return $mdgriffith$elm_ui$Element$inFront(content);
+				},
+				$elm$core$List$reverse(tail)),
+			_Utils_ap(
+				$author$project$Internal$Modal$background(head.onDismiss),
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$inFront(head.content)
+					])));
+	} else {
+		return _List_Nil;
+	}
+};
+var $author$project$Widget$multiModal = $author$project$Internal$Modal$multiModal;
+var $author$project$Page$Modal$viewFunctions = function () {
+	var viewSingle = F4(
+		function (content, onDismiss, _v2, _v3) {
+			var palette = _v2.palette;
+			var contentEl = A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$padding(8)
+					]),
+				A2(
+					$author$project$Widget$column,
+					$author$project$Widget$Material$cardColumn(palette),
+					$elm$core$List$singleton(
+						A2(
+							$mdgriffith$elm_ui$Element$paragraph,
+							_List_Nil,
+							$elm$core$List$singleton(
+								$mdgriffith$elm_ui$Element$text(content))))));
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.singleModal',
+				A2(
+					$mdgriffith$elm_ui$Element$el,
+					_Utils_ap(
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(200)),
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+							]),
+						$author$project$Widget$singleModal(
+							_List_fromArray(
+								[
+									{content: contentEl, onDismiss: onDismiss},
+									{
+									content: A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$moveDown(10),
+												$mdgriffith$elm_ui$Element$moveRight(10)
+											]),
+										contentEl),
+									onDismiss: onDismiss
+								},
+									{
+									content: A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$moveDown(20),
+												$mdgriffith$elm_ui$Element$moveRight(20)
+											]),
+										contentEl),
+									onDismiss: onDismiss
+								}
+								]))),
+					$mdgriffith$elm_ui$Element$text('Placeholder Text')));
+		});
+	var viewMulti = F4(
+		function (content, onDismiss, _v0, _v1) {
+			var palette = _v0.palette;
+			var contentEl = A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$padding(8)
+					]),
+				A2(
+					$author$project$Widget$column,
+					$author$project$Widget$Material$cardColumn(palette),
+					$elm$core$List$singleton(
+						A2(
+							$mdgriffith$elm_ui$Element$paragraph,
+							_List_Nil,
+							$elm$core$List$singleton(
+								$mdgriffith$elm_ui$Element$text(content))))));
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.multiModal',
+				A2(
+					$mdgriffith$elm_ui$Element$el,
+					_Utils_ap(
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(200)),
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+							]),
+						$author$project$Widget$multiModal(
+							_List_fromArray(
+								[
+									{content: contentEl, onDismiss: onDismiss},
+									{
+									content: A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$moveDown(10),
+												$mdgriffith$elm_ui$Element$moveRight(10)
+											]),
+										contentEl),
+									onDismiss: onDismiss
+								},
+									{
+									content: A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$moveDown(20),
+												$mdgriffith$elm_ui$Element$moveRight(20)
+											]),
+										contentEl),
+									onDismiss: onDismiss
+								}
+								]))),
+					$mdgriffith$elm_ui$Element$text('Placeholder Text')));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewSingle, viewMulti]));
+}();
+var $author$project$Page$Modal$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With event handler',
+			_Utils_Tuple2(
+				$elm$core$Maybe$Just(_Utils_Tuple0),
+				$elm$core$Maybe$Nothing),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A2($author$project$UIExplorer$Story$textStory, 'Content', 'This is a windows that is in front of everything else. You can allow the user to close it by pressing outside of it or disable this feature.'),
+			A2(
+				$author$project$UIExplorer$Story$book,
+				$elm$core$Maybe$Just('Options'),
+				$author$project$Page$Modal$viewFunctions))));
+var $author$project$Page$Modal$IsEnabled = function (a) {
+	return {$: 'IsEnabled', a: a};
+};
+var $author$project$Page$Modal$init = _Utils_Tuple2(
+	$author$project$Page$Modal$IsEnabled(true),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$Modal$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Modal$update = F2(
+	function (msg, _v0) {
+		var bool = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Page$Modal$IsEnabled(bool),
+			$elm$core$Platform$Cmd$none);
 	});
+var $author$project$Page$Modal$ToggleModal = function (a) {
+	return {$: 'ToggleModal', a: a};
+};
+var $author$project$Page$Modal$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var isEnabled = _v1.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$multiModal(
+					_List_fromArray(
+						[
+							{
+							content: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_fromArray(
+									[
+										$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,
+									$author$project$Widget$Material$cardColumn(palette),
+									$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(
+								$author$project$Page$Modal$ToggleModal(false))
+						},
+							{
+							content: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$height(
+										$mdgriffith$elm_ui$Element$px(150)),
+										$mdgriffith$elm_ui$Element$width(
+										$mdgriffith$elm_ui$Element$px(200)),
+										$mdgriffith$elm_ui$Element$centerX,
+										$mdgriffith$elm_ui$Element$centerY
+									]),
+								A2(
+									$author$project$Widget$column,
+									$author$project$Widget$Material$cardColumn(palette),
+									$elm$core$List$singleton(
+										A2(
+											$mdgriffith$elm_ui$Element$paragraph,
+											_List_Nil,
+											$elm$core$List$singleton(
+												$mdgriffith$elm_ui$Element$text('This card can not be selected.')))))),
+							onDismiss: $elm$core$Maybe$Nothing
+						},
+							{
+							content: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$height(
+										$mdgriffith$elm_ui$Element$px(300)),
+										$mdgriffith$elm_ui$Element$width(
+										$mdgriffith$elm_ui$Element$px(300)),
+										$mdgriffith$elm_ui$Element$centerX,
+										$mdgriffith$elm_ui$Element$centerY
+									]),
+								A2(
+									$author$project$Widget$column,
+									$author$project$Widget$Material$cardColumn(palette),
+									$elm$core$List$singleton(
+										A2(
+											$mdgriffith$elm_ui$Element$paragraph,
+											_List_Nil,
+											$elm$core$List$singleton(
+												$mdgriffith$elm_ui$Element$text('This is message is behind the other two')))))),
+							onDismiss: $elm$core$Maybe$Nothing
+						}
+						])) : _List_Nil),
+			A2(
+				$author$project$Widget$button,
+				$author$project$Widget$Material$containedButton(palette),
+				{
+					icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$visibility),
+					onPress: $elm$core$Maybe$Just(
+						$author$project$Page$Modal$ToggleModal(true)),
+					text: 'Show Modal'
+				}));
+	});
+var $author$project$Page$Modal$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Modal$init),
+	subscriptions: $author$project$Page$Modal$subscriptions,
+	update: $author$project$Page$Modal$update,
+	view: $author$project$Page$demo($author$project$Page$Modal$view)
+};
+var $author$project$Page$Modal$description = 'All modal surfaces are interruptive by design – their purpose is to have the user focus on content on a surface that appears in front of all other surfaces.';
+var $author$project$Page$Modal$title = 'Modal';
+var $author$project$Page$Modal$page = $author$project$Page$create(
+	{book: $author$project$Page$Modal$book, demo: $author$project$Page$Modal$demo, description: $author$project$Page$Modal$description, title: $author$project$Page$Modal$title});
+var $author$project$Internal$Material$Button$toggleButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.surface),
+						size: 24
+					},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 24
+					},
+					otherwise: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.surface),
+						size: 24
+					}
+				},
+				text: {
+					contentText: _List_fromArray(
+						[$mdgriffith$elm_ui$Element$centerX])
+				}
+			},
+			elementRow: _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$Material$Color$textAndBackground(
+						A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.surface)))
+				])
+		},
+		elementButton: _Utils_ap(
+			$author$project$Widget$Material$Typography$button,
+			_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(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.surface))),
+							$mdgriffith$elm_ui$Element$Border$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3(
+									$author$project$Widget$Material$Color$withShade,
+									palette.on.surface,
+									$author$project$Widget$Material$Color$buttonPressedOpacity,
+									A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))))
+						])),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface))),
+							$mdgriffith$elm_ui$Element$Border$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3(
+									$author$project$Widget$Material$Color$withShade,
+									palette.on.surface,
+									$author$project$Widget$Material$Color$buttonHoverOpacity,
+									A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonSelectedOpacity, palette.surface))),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Widget$Material$Color$accessibleTextColor(palette.surface))),
+				$mdgriffith$elm_ui$Element$Border$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A3(
+						$author$project$Widget$Material$Color$withShade,
+						palette.on.surface,
+						$author$project$Widget$Material$Color$buttonSelectedOpacity,
+						A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface)))),
+				$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(palette.surface)),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
+				])),
+		otherwise: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(palette.surface)),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Widget$Material$Color$accessibleTextColor(palette.surface))),
+				$mdgriffith$elm_ui$Element$Border$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface)))
+			])
+	};
+};
+var $author$project$Widget$Material$toggleButton = $author$project$Internal$Material$Button$toggleButton;
+var $author$project$Internal$List$buttonColumn = function (style) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$author$project$Internal$List$internalButton(
+			{content: style.content, element: style.elementColumn.content.element, ifFirst: style.elementColumn.content.ifFirst, ifLast: style.elementColumn.content.ifLast, ifSingleton: style.elementColumn.content.ifSingleton, otherwise: style.elementColumn.content.otherwise}),
+		$mdgriffith$elm_ui$Element$column(style.elementColumn.elementColumn));
+};
+var $author$project$Widget$buttonColumn = $author$project$Internal$List$buttonColumn;
 var $author$project$Internal$List$buttonRow = function (style) {
 	return A2(
 		$elm$core$Basics$composeR,
@@ -19735,9 +24294,6 @@ var $author$project$Internal$List$buttonRow = function (style) {
 		$mdgriffith$elm_ui$Element$row(style.elementRow.elementRow));
 };
 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;
@@ -19757,287 +24313,1244 @@ var $author$project$Internal$Select$multiSelect = function (_v0) {
 		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 $author$project$Internal$Select$toggleButton = F2(
+	function (style, _v0) {
+		var selected = _v0.a;
+		var b = _v0.b;
+		return A2(
+			$mdgriffith$elm_ui$Element$Input$button,
+			_Utils_ap(
+				style.elementButton,
+				_Utils_ap(
+					_Utils_eq(b.onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : (selected ? style.ifActive : style.otherwise),
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Region$description(b.text)
+						]))),
+			{
+				label: A2(
+					$mdgriffith$elm_ui$Element$el,
+					style.content.elementRow,
+					b.icon(
+						_Utils_eq(b.onPress, $elm$core$Maybe$Nothing) ? style.content.content.icon.ifDisabled : (selected ? style.content.content.icon.ifActive : style.content.content.icon.otherwise))),
+				onPress: b.onPress
+			});
 	});
-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$States$multiSelect = F2(
-	function (idle, style) {
-		return _List_fromArray(
+var $author$project$Internal$List$toggleRow = F2(
+	function (style, list) {
+		return A2(
+			$mdgriffith$elm_ui$Element$row,
+			style.elementRow.elementRow,
+			A2(
+				$elm$core$List$indexedMap,
+				function (i) {
+					return $author$project$Internal$Select$toggleButton(
+						A2(
+							$author$project$Widget$Customize$elementButton,
+							_Utils_ap(
+								style.elementRow.content.element,
+								($elm$core$List$length(list) === 1) ? style.elementRow.content.ifSingleton : ((!i) ? style.elementRow.content.ifFirst : (_Utils_eq(
+									i,
+									$elm$core$List$length(list) - 1) ? style.elementRow.content.ifLast : style.elementRow.content.otherwise))),
+							style.content));
+				},
+				list));
+	});
+var $author$project$Widget$toggleRow = $author$project$Internal$List$toggleRow;
+var $author$project$Internal$Material$List$toggleRow = {
+	content: {
+		element: _List_Nil,
+		ifFirst: _List_fromArray(
 			[
-				_Utils_Tuple2(
-				'Some selected',
+				$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})
+			]),
+		ifSingleton: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$rounded(2)
+			]),
+		otherwise: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$rounded(0)
+			])
+	},
+	elementRow: _List_Nil
+};
+var $author$project$Widget$Material$toggleRow = $author$project$Internal$Material$List$toggleRow;
+var $author$project$Page$MultiSelect$viewFunctions = function () {
+	var viewWrappedRow = F8(
+		function (style, selected1, selected2, selected3, options, onSelect, _v6, _v7) {
+			var palette = _v6.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.wrappedButtonRow',
 				A2(
-					$author$project$Widget$buttonRow,
-					{content: style.selectButton, elementRow: style.buttonRow},
+					$author$project$Widget$wrappedButtonRow,
+					{
+						content: style(palette),
+						elementRow: $author$project$Widget$Material$row
+					},
 					$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: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-										text: $elm$core$String$fromInt(_int)
-									};
-								},
-								_List_fromArray(
-									[1, 2, 42])),
+							onSelect: onSelect,
+							options: options,
 							selected: $elm$core$Set$fromList(
-								_List_fromArray(
-									[0, 1]))
-						}))),
-				_Utils_Tuple2(
-				'Nothing selected',
+								A2(
+									$elm$core$List$filterMap,
+									$elm$core$Basics$identity,
+									_List_fromArray(
+										[selected1, selected2, selected3])))
+						})));
+		});
+	var viewTogggleRow = F8(
+		function (style, selected1, selected2, selected3, options, onSelect, _v4, _v5) {
+			var palette = _v4.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.toggleRow',
 				A2(
-					$author$project$Widget$buttonRow,
-					{content: style.selectButton, elementRow: style.buttonRow},
+					$author$project$Widget$toggleRow,
+					{
+						content: style(palette),
+						elementRow: $author$project$Widget$Material$toggleRow
+					},
 					$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: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-										text: $elm$core$String$fromInt(_int)
-									};
-								},
-								_List_fromArray(
-									[1, 2, 42])),
-							selected: $elm$core$Set$empty
-						}))),
-				_Utils_Tuple2(
-				'Invalid selection',
+							onSelect: onSelect,
+							options: options,
+							selected: $elm$core$Set$fromList(
+								A2(
+									$elm$core$List$filterMap,
+									$elm$core$Basics$identity,
+									_List_fromArray(
+										[selected1, selected2, selected3])))
+						})));
+		});
+	var viewSelectRow = F8(
+		function (style, selected1, selected2, selected3, options, onSelect, _v2, _v3) {
+			var palette = _v2.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.buttonRow ',
 				A2(
 					$author$project$Widget$buttonRow,
-					{content: style.selectButton, elementRow: style.buttonRow},
+					{
+						content: style(palette),
+						elementRow: $author$project$Widget$Material$row
+					},
 					$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: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-										text: $elm$core$String$fromInt(_int)
-									};
-								},
-								_List_fromArray(
-									[1, 2, 42])),
-							selected: $elm$core$Set$singleton(-1)
-						}))),
-				_Utils_Tuple2(
-				'Disabled selection',
+							onSelect: onSelect,
+							options: options,
+							selected: $elm$core$Set$fromList(
+								A2(
+									$elm$core$List$filterMap,
+									$elm$core$Basics$identity,
+									_List_fromArray(
+										[selected1, selected2, selected3])))
+						})));
+		});
+	var viewSelectColumn = F8(
+		function (style, selected1, selected2, selected3, options, onSelect, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.buttonColumn',
 				A2(
-					$author$project$Widget$buttonRow,
-					{content: style.selectButton, elementRow: style.buttonRow},
+					$author$project$Widget$buttonColumn,
+					{
+						content: style(palette),
+						elementColumn: $author$project$Widget$Material$column
+					},
 					$author$project$Widget$multiSelect(
 						{
-							onSelect: $elm$core$Basics$always($elm$core$Maybe$Nothing),
-							options: A2(
-								$elm$core$List$map,
-								function (_int) {
-									return {
-										icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-										text: $elm$core$String$fromInt(_int)
-									};
-								},
-								_List_fromArray(
-									[1, 2, 42])),
-							selected: $elm$core$Set$singleton(0)
-						}))),
+							onSelect: onSelect,
+							options: options,
+							selected: $elm$core$Set$fromList(
+								A2(
+									$elm$core$List$filterMap,
+									$elm$core$Basics$identity,
+									_List_fromArray(
+										[selected1, selected2, selected3])))
+						})));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewTogggleRow, viewSelectRow, viewSelectColumn, viewWrappedRow]));
+}();
+var $author$project$Page$MultiSelect$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With event handler',
+			_Utils_Tuple2(
+				$elm$core$Basics$always(
+					$elm$core$Maybe$Just(_Utils_Tuple0)),
+				$elm$core$Basics$always($elm$core$Maybe$Nothing)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$optionListStory,
+				'Options',
 				_Utils_Tuple2(
-				'Empty Options',
+					'3 Option',
+					_List_fromArray(
+						[
+							{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							text: 'Submit'
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: ''
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: 'Submit'
+						}
+						])),
+				_List_fromArray(
+					[
+						_Utils_Tuple2(
+						'2 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: 'Submit'
+							},
+								{
+								icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+								text: ''
+							}
+							])),
+						_Utils_Tuple2(
+						'1 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: 'Submit'
+							}
+							]))
+					])),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'Selected Third',
+					_Utils_Tuple2(
+						$elm$core$Maybe$Just(2),
+						$elm$core$Maybe$Nothing),
+					true),
 				A2(
-					$author$project$Widget$buttonRow,
-					{content: style.selectButton, elementRow: 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: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-										text: $elm$core$String$fromInt(_int)
-									};
-								},
-								_List_Nil),
-							selected: $elm$core$Set$empty
-						})))
-			]);
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$boolStory,
+						'Selected Second',
+						_Utils_Tuple2(
+							$elm$core$Maybe$Just(1),
+							$elm$core$Maybe$Nothing),
+						true),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$boolStory,
+							'Selected First',
+							_Utils_Tuple2(
+								$elm$core$Maybe$Just(0),
+								$elm$core$Maybe$Nothing),
+							false),
+						A2(
+							$author$project$UIExplorer$Story$addStory,
+							A3(
+								$author$project$UIExplorer$Story$optionListStory,
+								'Style',
+								_Utils_Tuple2('Contained', $author$project$Widget$Material$containedButton),
+								_List_fromArray(
+									[
+										_Utils_Tuple2('Outlined', $author$project$Widget$Material$outlinedButton),
+										_Utils_Tuple2('Text', $author$project$Widget$Material$textButton),
+										_Utils_Tuple2('Chip', $author$project$Widget$Material$chip),
+										_Utils_Tuple2('IconButton', $author$project$Widget$Material$iconButton),
+										_Utils_Tuple2('Toggle', $author$project$Widget$Material$toggleButton)
+									])),
+							A2(
+								$author$project$UIExplorer$Story$book,
+								$elm$core$Maybe$Just('Options'),
+								$author$project$Page$MultiSelect$viewFunctions))))))));
+var $author$project$Page$MultiSelect$Selected = function (a) {
+	return {$: 'Selected', a: a};
+};
+var $author$project$Page$MultiSelect$init = _Utils_Tuple2(
+	$author$project$Page$MultiSelect$Selected($elm$core$Set$empty),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$MultiSelect$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$MultiSelect$update = F2(
+	function (msg, _v0) {
+		var selected = _v0.a;
+		var _int = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Page$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$Page$MultiSelect$ChangedSelected = function (a) {
+	return {$: 'ChangedSelected', a: a};
+};
+var $author$project$Page$MultiSelect$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var selected = _v1.a;
+		return A2(
+			$author$project$Widget$buttonRow,
+			{
+				content: $author$project$Widget$Material$toggleButton(palette),
+				elementRow: $author$project$Widget$Material$toggleRow
+			},
+			$author$project$Widget$multiSelect(
+				{
+					onSelect: A2($elm$core$Basics$composeR, $author$project$Page$MultiSelect$ChangedSelected, $elm$core$Maybe$Just),
+					options: A2(
+						$elm$core$List$map,
+						function (_int) {
+							return {
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: $elm$core$String$fromInt(_int)
+							};
+						},
+						_List_fromArray(
+							[1, 2, 42])),
+					selected: selected
+				}));
+	});
+var $author$project$Page$MultiSelect$demo = {
+	init: $elm$core$Basics$always($author$project$Page$MultiSelect$init),
+	subscriptions: $author$project$Page$MultiSelect$subscriptions,
+	update: $author$project$Page$MultiSelect$update,
+	view: $author$project$Page$demo($author$project$Page$MultiSelect$view)
+};
+var $author$project$Page$MultiSelect$description = 'Select buttons group a set of actions using layout and spacing.';
+var $author$project$Page$MultiSelect$title = 'Multi Select';
+var $author$project$Page$MultiSelect$page = $author$project$Page$create(
+	{book: $author$project$Page$MultiSelect$book, demo: $author$project$Page$MultiSelect$demo, description: $author$project$Page$MultiSelect$description, title: $author$project$Page$MultiSelect$title});
+var $mdgriffith$elm_ui$Element$Input$currentPassword = F2(
+	function (attrs, pass) {
+		return A3(
+			$mdgriffith$elm_ui$Element$Input$textHelper,
+			{
+				autofill: $elm$core$Maybe$Just('current-password'),
+				spellchecked: false,
+				type_: $mdgriffith$elm_ui$Element$Input$TextInputNode(
+					pass.show ? 'text' : 'password')
+			},
+			attrs,
+			{label: pass.label, onChange: pass.onChange, placeholder: pass.placeholder, text: pass.text});
+	});
+var $author$project$Internal$PasswordInput$password = F3(
+	function (input, style, _v0) {
+		var placeholder = _v0.placeholder;
+		var label = _v0.label;
+		var text = _v0.text;
+		var onChange = _v0.onChange;
+		var show = _v0.show;
+		return A2(
+			$mdgriffith$elm_ui$Element$row,
+			style.elementRow,
+			_List_fromArray(
+				[
+					A2(
+					input,
+					style.content.password.elementPasswordInput,
+					{
+						label: $mdgriffith$elm_ui$Element$Input$labelHidden(label),
+						onChange: onChange,
+						placeholder: placeholder,
+						show: show,
+						text: text
+					})
+				]));
+	});
+var $author$project$Internal$PasswordInput$currentPasswordInput = $author$project$Internal$PasswordInput$password($mdgriffith$elm_ui$Element$Input$currentPassword);
+var $author$project$Widget$currentPasswordInput = $author$project$Internal$PasswordInput$currentPasswordInput;
+var $mdgriffith$elm_ui$Element$Input$newPassword = F2(
+	function (attrs, pass) {
+		return A3(
+			$mdgriffith$elm_ui$Element$Input$textHelper,
+			{
+				autofill: $elm$core$Maybe$Just('new-password'),
+				spellchecked: false,
+				type_: $mdgriffith$elm_ui$Element$Input$TextInputNode(
+					pass.show ? 'text' : 'password')
+			},
+			attrs,
+			{label: pass.label, onChange: pass.onChange, placeholder: pass.placeholder, text: pass.text});
+	});
+var $author$project$Internal$PasswordInput$newPasswordInput = $author$project$Internal$PasswordInput$password($mdgriffith$elm_ui$Element$Input$newPassword);
+var $author$project$Widget$newPasswordInput = $author$project$Internal$PasswordInput$newPasswordInput;
+var $author$project$Internal$Material$PasswordInput$passwordInput = function (palette) {
+	return {
+		content: {
+			password: {
+				elementPasswordInput: _Utils_ap(
+					$author$project$Widget$Material$Color$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),
+							$mdgriffith$elm_ui$Element$centerY
+						]))
+			}
+		},
+		elementRow: _Utils_ap(
+			$author$project$Widget$Material$Color$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$Material$Color$fromColor(
+						A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Material$Color$shadow(4)),
+							$mdgriffith$elm_ui$Element$Border$color(
+							$author$project$Widget$Material$Color$fromColor(palette.primary))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Material$Color$shadow(2))
+						])),
+					$mdgriffith$elm_ui$Element$width(
+					$mdgriffith$elm_ui$Element$px(280))
+				]))
+	};
+};
+var $author$project$Widget$Material$passwordInput = $author$project$Internal$Material$PasswordInput$passwordInput;
+var $author$project$Page$PasswordInput$viewFunctions = function () {
+	var viewNewPassword = F6(
+		function (text, placeholder, label, show, _v2, _v3) {
+			var palette = _v2.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.newPasswordInput',
+				A2(
+					$author$project$Widget$newPasswordInput,
+					$author$project$Widget$Material$passwordInput(palette),
+					{
+						label: label,
+						onChange: $elm$core$Basics$always(_Utils_Tuple0),
+						placeholder: placeholder,
+						show: show,
+						text: text
+					}));
+		});
+	var viewCurrentPassword = F6(
+		function (text, placeholder, label, show, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.currentPasswordInput',
+				A2(
+					$author$project$Widget$currentPasswordInput,
+					$author$project$Widget$Material$passwordInput(palette),
+					{
+						label: label,
+						onChange: $elm$core$Basics$always(_Utils_Tuple0),
+						placeholder: placeholder,
+						show: show,
+						text: text
+					}));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewNewPassword, viewCurrentPassword]));
+}();
+var $author$project$Page$PasswordInput$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'Show',
+			_Utils_Tuple2(true, false),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A2($author$project$UIExplorer$Story$textStory, 'Label', 'Password'),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'Placeholder',
+					_Utils_Tuple2(
+						$elm$core$Maybe$Just(
+							A2(
+								$mdgriffith$elm_ui$Element$Input$placeholder,
+								_List_Nil,
+								$mdgriffith$elm_ui$Element$text('password'))),
+						$elm$core$Maybe$Nothing),
+					true),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A2($author$project$UIExplorer$Story$textStory, 'Text', '123456789'),
+					A2(
+						$author$project$UIExplorer$Story$book,
+						$elm$core$Maybe$Just('Options'),
+						$author$project$Page$PasswordInput$viewFunctions))))));
+var $author$project$Page$PasswordInput$init = _Utils_Tuple2(
+	{newInput: '', passwordInput: ''},
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$PasswordInput$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$PasswordInput$update = F2(
+	function (msg, model) {
+		if (msg.$ === 'SetPasswordInput') {
+			var string = msg.a;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{passwordInput: string}),
+				$elm$core$Platform$Cmd$none);
+		} else {
+			var string = msg.a;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{newInput: string}),
+				$elm$core$Platform$Cmd$none);
+		}
+	});
+var $author$project$Page$PasswordInput$SetNewPasswordInput = function (a) {
+	return {$: 'SetNewPasswordInput', a: a};
+};
+var $author$project$Page$PasswordInput$SetPasswordInput = function (a) {
+	return {$: 'SetPasswordInput', a: a};
+};
+var $author$project$Page$PasswordInput$view = F2(
+	function (_v0, model) {
+		var palette = _v0.palette;
+		return A2(
+			$mdgriffith$elm_ui$Element$column,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$spacing(8)
+				]),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$text('Try  filling out these fields using autofill'),
+					A2(
+					$mdgriffith$elm_ui$Element$row,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+							$mdgriffith$elm_ui$Element$spaceEvenly
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+								]),
+							$mdgriffith$elm_ui$Element$text('Current Password')),
+							A2(
+							$author$project$Widget$currentPasswordInput,
+							$author$project$Widget$Material$passwordInput(palette),
+							{label: 'Chips', onChange: $author$project$Page$PasswordInput$SetPasswordInput, placeholder: $elm$core$Maybe$Nothing, show: false, text: model.passwordInput})
+						])),
+					A2(
+					$mdgriffith$elm_ui$Element$row,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+							$mdgriffith$elm_ui$Element$spaceEvenly
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+								]),
+							$mdgriffith$elm_ui$Element$text('New Password')),
+							A2(
+							$author$project$Widget$newPasswordInput,
+							$author$project$Widget$Material$passwordInput(palette),
+							{label: 'Chips', onChange: $author$project$Page$PasswordInput$SetNewPasswordInput, placeholder: $elm$core$Maybe$Nothing, show: false, text: model.newInput})
+						])),
+					$mdgriffith$elm_ui$Element$text(
+					((model.newInput !== '') && _Utils_eq(model.newInput, model.passwordInput)) ? 'Yeay, the two passwords match!' : '')
+				]));
+	});
+var $author$project$Page$PasswordInput$demo = {
+	init: $elm$core$Basics$always($author$project$Page$PasswordInput$init),
+	subscriptions: $author$project$Page$PasswordInput$subscriptions,
+	update: $author$project$Page$PasswordInput$update,
+	view: $author$project$Page$demo($author$project$Page$PasswordInput$view)
+};
+var $author$project$Page$PasswordInput$description = 'If we want to play nicely with a browser\'s ability to autofill a form, we need to be able to give it a hint about what we\'re expecting.\n    \nThe following inputs are very similar to Input.text, but they give the browser a hint to allow autofill to work correctly.';
+var $author$project$Page$PasswordInput$title = 'Password Input';
+var $author$project$Page$PasswordInput$page = $author$project$Page$create(
+	{book: $author$project$Page$PasswordInput$book, demo: $author$project$Page$PasswordInput$demo, description: $author$project$Page$PasswordInput$description, title: $author$project$Page$PasswordInput$title});
+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 $elm$svg$Svg$Attributes$strokeDasharray = _VirtualDom_attribute('stroke-dasharray');
+var $elm$svg$Svg$Attributes$strokeDashoffset = _VirtualDom_attribute('stroke-dashoffset');
+var $elm$svg$Svg$Attributes$transform = _VirtualDom_attribute('transform');
+var $elm$svg$Svg$Attributes$xmlSpace = A2(_VirtualDom_attributeNS, 'http://www.w3.org/XML/1998/namespace', 'xml:space');
+var $author$project$Internal$Material$ProgressIndicator$determinateCircularIcon = F3(
+	function (color, attribs, progress) {
+		var strokeDashoffset = function () {
+			var clampedProgress = A3($elm$core$Basics$clamp, 0, 1, progress);
+			return $elm$core$Basics$round(188 - (188 * clampedProgress));
+		}();
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			attribs,
+			$mdgriffith$elm_ui$Element$html(
+				A2(
+					$elm$svg$Svg$svg,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$height('48px'),
+							$elm$svg$Svg$Attributes$width('48px'),
+							$elm$svg$Svg$Attributes$viewBox('0 0 66 66'),
+							$elm$svg$Svg$Attributes$xmlSpace('http://www.w3.org/2000/svg')
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$g,
+							_List_Nil,
+							_List_fromArray(
+								[
+									A2(
+									$elm$svg$Svg$circle,
+									_List_fromArray(
+										[
+											$elm$svg$Svg$Attributes$fill('none'),
+											$elm$svg$Svg$Attributes$stroke(
+											$avh4$elm_color$Color$toCssString(color)),
+											$elm$svg$Svg$Attributes$strokeWidth('5'),
+											$elm$svg$Svg$Attributes$strokeLinecap('butt'),
+											$elm$svg$Svg$Attributes$cx('33'),
+											$elm$svg$Svg$Attributes$cy('33'),
+											$elm$svg$Svg$Attributes$r('30'),
+											$elm$svg$Svg$Attributes$strokeDasharray('188 188'),
+											$elm$svg$Svg$Attributes$strokeDashoffset(
+											$elm$core$String$fromInt(strokeDashoffset)),
+											$elm$svg$Svg$Attributes$transform('rotate(-90 33 33)')
+										]),
+									_List_Nil)
+								]))
+						]))));
+	});
+var $elm$svg$Svg$animate = $elm$svg$Svg$trustedNode('animate');
+var $elm$svg$Svg$animateTransform = $elm$svg$Svg$trustedNode('animateTransform');
+var $elm$svg$Svg$Attributes$attributeName = _VirtualDom_attribute('attributeName');
+var $elm$svg$Svg$Attributes$begin = _VirtualDom_attribute('begin');
+var $elm$svg$Svg$Attributes$dur = _VirtualDom_attribute('dur');
+var $elm$svg$Svg$Attributes$repeatCount = _VirtualDom_attribute('repeatCount');
+var $elm$svg$Svg$Attributes$type_ = _VirtualDom_attribute('type');
+var $author$project$Internal$Material$ProgressIndicator$indeterminateCircularIcon = F2(
+	function (color, attribs) {
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			attribs,
+			$mdgriffith$elm_ui$Element$html(
+				A2(
+					$elm$svg$Svg$svg,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$height('48px'),
+							$elm$svg$Svg$Attributes$width('48px'),
+							$elm$svg$Svg$Attributes$viewBox('0 0 66 66'),
+							$elm$svg$Svg$Attributes$xmlSpace('http://www.w3.org/2000/svg')
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$g,
+							_List_Nil,
+							_List_fromArray(
+								[
+									A2(
+									$elm$svg$Svg$animateTransform,
+									_List_fromArray(
+										[
+											$elm$svg$Svg$Attributes$attributeName('transform'),
+											$elm$svg$Svg$Attributes$type_('rotate'),
+											$elm$svg$Svg$Attributes$values('0 33 33;270 33 33'),
+											$elm$svg$Svg$Attributes$begin('0s'),
+											$elm$svg$Svg$Attributes$dur('1.4s'),
+											$elm$svg$Svg$Attributes$fill('freeze'),
+											$elm$svg$Svg$Attributes$repeatCount('indefinite')
+										]),
+									_List_Nil),
+									A2(
+									$elm$svg$Svg$circle,
+									_List_fromArray(
+										[
+											$elm$svg$Svg$Attributes$fill('none'),
+											$elm$svg$Svg$Attributes$stroke(
+											$avh4$elm_color$Color$toCssString(color)),
+											$elm$svg$Svg$Attributes$strokeWidth('5'),
+											$elm$svg$Svg$Attributes$strokeLinecap('square'),
+											$elm$svg$Svg$Attributes$cx('33'),
+											$elm$svg$Svg$Attributes$cy('33'),
+											$elm$svg$Svg$Attributes$r('30'),
+											$elm$svg$Svg$Attributes$strokeDasharray('187'),
+											$elm$svg$Svg$Attributes$strokeDashoffset('610')
+										]),
+									_List_fromArray(
+										[
+											A2(
+											$elm$svg$Svg$animateTransform,
+											_List_fromArray(
+												[
+													$elm$svg$Svg$Attributes$attributeName('transform'),
+													$elm$svg$Svg$Attributes$type_('rotate'),
+													$elm$svg$Svg$Attributes$values('0 33 33;135 33 33;450 33 33'),
+													$elm$svg$Svg$Attributes$begin('0s'),
+													$elm$svg$Svg$Attributes$dur('1.4s'),
+													$elm$svg$Svg$Attributes$fill('freeze'),
+													$elm$svg$Svg$Attributes$repeatCount('indefinite')
+												]),
+											_List_Nil),
+											A2(
+											$elm$svg$Svg$animate,
+											_List_fromArray(
+												[
+													$elm$svg$Svg$Attributes$attributeName('stroke-dashoffset'),
+													$elm$svg$Svg$Attributes$values('187;46.75;187'),
+													$elm$svg$Svg$Attributes$begin('0s'),
+													$elm$svg$Svg$Attributes$dur('1.4s'),
+													$elm$svg$Svg$Attributes$fill('freeze'),
+													$elm$svg$Svg$Attributes$repeatCount('indefinite')
+												]),
+											_List_Nil)
+										]))
+								]))
+						]))));
+	});
+var $author$project$Internal$Material$ProgressIndicator$progressIndicator = function (palette) {
+	return {
+		elementFunction: function (maybeProgress) {
+			if (maybeProgress.$ === 'Nothing') {
+				return A2($author$project$Internal$Material$ProgressIndicator$indeterminateCircularIcon, palette.primary, _List_Nil);
+			} else {
+				var progress = maybeProgress.a;
+				return A3($author$project$Internal$Material$ProgressIndicator$determinateCircularIcon, palette.primary, _List_Nil, progress);
+			}
+		}
+	};
+};
+var $author$project$Widget$Material$progressIndicator = $author$project$Internal$Material$ProgressIndicator$progressIndicator;
 var $author$project$Internal$ProgressIndicator$circularProgressIndicator = F2(
 	function (style, maybeProgress) {
 		return style.elementFunction(maybeProgress);
 	});
 var $author$project$Widget$circularProgressIndicator = $author$project$Internal$ProgressIndicator$circularProgressIndicator;
-var $author$project$View$States$progressIndicator = F2(
-	function (_v0, style) {
-		var determinateIndicators = A2(
-			$elm$core$List$map,
-			function (completeness) {
-				return _Utils_Tuple2(
-					'Completeness ' + $elm$core$String$fromFloat(completeness),
+var $author$project$Page$ProgressIndicator$viewFunctions = function () {
+	var viewIndicator = F5(
+		function (style, progress, indeterminate, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.circularProgressIndicator',
+				A2(
+					$author$project$Widget$circularProgressIndicator,
+					style(palette),
+					indeterminate(progress / 100)));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewIndicator]));
+}();
+var $author$project$Page$ProgressIndicator$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'Indeterminate Indicator',
+			_Utils_Tuple2(
+				$elm$core$Basics$always($elm$core$Maybe$Nothing),
+				$elm$core$Maybe$Just),
+			false),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A2(
+				$author$project$UIExplorer$Story$rangeStory,
+				'Progress',
+				{_default: 50, max: 100, min: 0, unit: '%'}),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Style',
+					_Utils_Tuple2('ProgressIndicator', $author$project$Widget$Material$progressIndicator),
+					_List_Nil),
+				A2(
+					$author$project$UIExplorer$Story$book,
+					$elm$core$Maybe$Just('Options'),
+					$author$project$Page$ProgressIndicator$viewFunctions)))));
+var $author$project$Page$ProgressIndicator$MaybeProgress = function (a) {
+	return {$: 'MaybeProgress', a: a};
+};
+var $author$project$Page$ProgressIndicator$init = _Utils_Tuple2(
+	$author$project$Page$ProgressIndicator$MaybeProgress($elm$core$Maybe$Nothing),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$ProgressIndicator$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$ProgressIndicator$update = F2(
+	function (msg, _v0) {
+		var maybeFloat = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Page$ProgressIndicator$MaybeProgress(maybeFloat),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Page$ProgressIndicator$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var maybeProgress = _v1.a;
+		return A2(
+			$author$project$Widget$circularProgressIndicator,
+			$author$project$Widget$Material$progressIndicator(palette),
+			maybeProgress);
+	});
+var $author$project$Page$ProgressIndicator$demo = {
+	init: $elm$core$Basics$always($author$project$Page$ProgressIndicator$init),
+	subscriptions: $author$project$Page$ProgressIndicator$subscriptions,
+	update: $author$project$Page$ProgressIndicator$update,
+	view: $author$project$Page$demo($author$project$Page$ProgressIndicator$view)
+};
+var $author$project$Page$ProgressIndicator$description = 'Progress indicators express an unspecified wait time or display the length of a process.';
+var $author$project$Page$ProgressIndicator$title = 'Progress Indicator';
+var $author$project$Page$ProgressIndicator$page = $author$project$Page$create(
+	{book: $author$project$Page$ProgressIndicator$book, demo: $author$project$Page$ProgressIndicator$demo, description: $author$project$Page$ProgressIndicator$description, title: $author$project$Page$ProgressIndicator$title});
+var $author$project$Page$Select$viewFunctions = function () {
+	var viewWrappedRow = F6(
+		function (style, selected, options, onSelect, _v6, _v7) {
+			var palette = _v6.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.wrappedButtonRow',
+				A2(
+					$author$project$Widget$wrappedButtonRow,
+					{
+						content: style(palette),
+						elementRow: $author$project$Widget$Material$row
+					},
+					$author$project$Widget$select(
+						{onSelect: onSelect, options: options, selected: selected})));
+		});
+	var viewTogggleRow = F6(
+		function (style, selected, options, onSelect, _v4, _v5) {
+			var palette = _v4.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.toggleRow',
+				A2(
+					$author$project$Widget$toggleRow,
+					{
+						content: style(palette),
+						elementRow: $author$project$Widget$Material$toggleRow
+					},
+					$author$project$Widget$select(
+						{onSelect: onSelect, options: options, selected: selected})));
+		});
+	var viewSelectRow = F6(
+		function (style, selected, options, onSelect, _v2, _v3) {
+			var palette = _v2.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.buttonRow ',
+				A2(
+					$author$project$Widget$buttonRow,
+					{
+						content: style(palette),
+						elementRow: $author$project$Widget$Material$row
+					},
+					$author$project$Widget$select(
+						{onSelect: onSelect, options: options, selected: selected})));
+		});
+	var viewSelectColumn = F6(
+		function (style, selected, options, onSelect, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.buttonColumn',
+				A2(
+					$author$project$Widget$buttonColumn,
+					{
+						content: style(palette),
+						elementColumn: $author$project$Widget$Material$column
+					},
+					$author$project$Widget$select(
+						{onSelect: onSelect, options: options, selected: selected})));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewTogggleRow, viewSelectRow, viewSelectColumn, viewWrappedRow]));
+}();
+var $author$project$Page$Select$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With event handler',
+			_Utils_Tuple2(
+				$elm$core$Basics$always(
+					$elm$core$Maybe$Just(_Utils_Tuple0)),
+				$elm$core$Basics$always($elm$core$Maybe$Nothing)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$optionListStory,
+				'Options',
+				_Utils_Tuple2(
+					'3 Option',
+					_List_fromArray(
+						[
+							{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							text: 'Submit'
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: ''
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: 'Submit'
+						}
+						])),
+				_List_fromArray(
+					[
+						_Utils_Tuple2(
+						'2 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: 'Submit'
+							},
+								{
+								icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+								text: ''
+							}
+							])),
+						_Utils_Tuple2(
+						'1 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: 'Submit'
+							}
+							]))
+					])),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Selected',
+					_Utils_Tuple2(
+						'Third',
+						$elm$core$Maybe$Just(2)),
+					_List_fromArray(
+						[
+							_Utils_Tuple2(
+							'Second',
+							$elm$core$Maybe$Just(1)),
+							_Utils_Tuple2(
+							'First',
+							$elm$core$Maybe$Just(0)),
+							_Utils_Tuple2('Nothing or Invalid', $elm$core$Maybe$Nothing)
+						])),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('Contained', $author$project$Widget$Material$containedButton),
+						_List_fromArray(
+							[
+								_Utils_Tuple2('Outlined', $author$project$Widget$Material$outlinedButton),
+								_Utils_Tuple2('Text', $author$project$Widget$Material$textButton),
+								_Utils_Tuple2('Chip', $author$project$Widget$Material$chip),
+								_Utils_Tuple2('IconButton', $author$project$Widget$Material$iconButton),
+								_Utils_Tuple2('Toggle', $author$project$Widget$Material$toggleButton)
+							])),
 					A2(
-						$author$project$Widget$circularProgressIndicator,
-						style.progressIndicator,
-						$elm$core$Maybe$Just(completeness)));
+						$author$project$UIExplorer$Story$book,
+						$elm$core$Maybe$Just('Options'),
+						$author$project$Page$Select$viewFunctions))))));
+var $author$project$Page$Select$Selected = function (a) {
+	return {$: 'Selected', a: a};
+};
+var $author$project$Page$Select$init = _Utils_Tuple2(
+	$author$project$Page$Select$Selected($elm$core$Maybe$Nothing),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$Select$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Select$update = F2(
+	function (msg, _v0) {
+		var _int = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Page$Select$Selected(
+				$elm$core$Maybe$Just(_int)),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Page$Select$ChangedSelected = function (a) {
+	return {$: 'ChangedSelected', a: a};
+};
+var $author$project$Widget$Material$buttonRow = $author$project$Internal$Material$List$toggleRow;
+var $author$project$Page$Select$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var selected = _v1.a;
+		return A2(
+			$author$project$Widget$buttonRow,
+			{
+				content: $author$project$Widget$Material$toggleButton(palette),
+				elementRow: $author$project$Widget$Material$buttonRow
 			},
-			_List_fromArray(
-				[0, 0.25, 0.5, 0.75, 1]));
-		return _Utils_ap(
+			$author$project$Widget$select(
+				{
+					onSelect: A2($elm$core$Basics$composeR, $author$project$Page$Select$ChangedSelected, $elm$core$Maybe$Just),
+					options: A2(
+						$elm$core$List$map,
+						function (_int) {
+							return {
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: $elm$core$String$fromInt(_int)
+							};
+						},
+						_List_fromArray(
+							[1, 2, 42])),
+					selected: selected
+				}));
+	});
+var $author$project$Page$Select$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Select$init),
+	subscriptions: $author$project$Page$Select$subscriptions,
+	update: $author$project$Page$Select$update,
+	view: $author$project$Page$demo($author$project$Page$Select$view)
+};
+var $author$project$Page$Select$description = 'Select buttons group a set of actions using layout and spacing.';
+var $author$project$Page$Select$title = 'Select';
+var $author$project$Page$Select$page = $author$project$Page$create(
+	{book: $author$project$Page$Select$book, demo: $author$project$Page$Select$demo, description: $author$project$Page$Select$description, title: $author$project$Page$Select$title});
+var $author$project$Page$Snackbar$viewFunctions = function () {
+	var viewSnackbar = F5(
+		function (style, text, button, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Snackbar.view',
+				A2(
+					$elm$core$Maybe$withDefault,
+					$mdgriffith$elm_ui$Element$none,
+					A3(
+						$author$project$Widget$Snackbar$view,
+						style(palette),
+						$elm$core$Basics$identity,
+						A2(
+							$author$project$Widget$Snackbar$insert,
+							{button: button, text: text},
+							$author$project$Widget$Snackbar$init))));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewSnackbar]));
+}();
+var $author$project$Page$Snackbar$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$optionListStory,
+			'Button',
+			_Utils_Tuple2(
+				'Button with event handler',
+				$elm$core$Maybe$Just(
+					{
+						onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+						text: 'Close'
+					})),
 			_List_fromArray(
 				[
 					_Utils_Tuple2(
-					'Indeterminate Progress Indicator',
-					A2($author$project$Widget$circularProgressIndicator, style.progressIndicator, $elm$core$Maybe$Nothing))
+					'Eventless Button',
+					$elm$core$Maybe$Just(
+						{onPress: $elm$core$Maybe$Nothing, text: 'Close'})),
+					_Utils_Tuple2('None', $elm$core$Maybe$Nothing)
+				])),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A2($author$project$UIExplorer$Story$textStory, 'Text', 'This is a notification that will close after 10 seconds. Additional notifications are being queued.'),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Style',
+					_Utils_Tuple2('Snackbar', $author$project$Widget$Material$snackbar),
+					_List_Nil),
+				A2(
+					$author$project$UIExplorer$Story$book,
+					$elm$core$Maybe$Just('Options'),
+					$author$project$Page$Snackbar$viewFunctions)))));
+var $author$project$Page$Snackbar$init = _Utils_Tuple2($author$project$Widget$Snackbar$init, $elm$core$Platform$Cmd$none);
+var $author$project$Page$Snackbar$TimePassed = function (a) {
+	return {$: 'TimePassed', a: a};
+};
+var $author$project$Page$Snackbar$subscriptions = function (_v0) {
+	return A2(
+		$elm$time$Time$every,
+		50,
+		$elm$core$Basics$always(
+			$author$project$Page$Snackbar$TimePassed(50)));
+};
+var $author$project$Page$Snackbar$update = F2(
+	function (msg, model) {
+		if (msg.$ === 'TimePassed') {
+			var _int = msg.a;
+			return _Utils_Tuple2(
+				A2($author$project$Widget$Snackbar$timePassed, _int, model),
+				$elm$core$Platform$Cmd$none);
+		} else {
+			var snack = msg.a;
+			return _Utils_Tuple2(
+				A2(
+					$author$project$Widget$Snackbar$insert,
+					snack,
+					$author$project$Widget$Snackbar$dismiss(model)),
+				$elm$core$Platform$Cmd$none);
+		}
+	});
+var $author$project$Page$Snackbar$AddSnackbar = function (a) {
+	return {$: 'AddSnackbar', a: a};
+};
+var $author$project$Page$Snackbar$view = F2(
+	function (_v0, model) {
+		var palette = _v0.palette;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_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)),
+					$mdgriffith$elm_ui$Element$inFront(
+					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(8),
+										$mdgriffith$elm_ui$Element$alignBottom,
+										$mdgriffith$elm_ui$Element$alignRight
+									])),
+							A3(
+								$author$project$Widget$Snackbar$view,
+								$author$project$Widget$Material$snackbar(palette),
+								function (_v1) {
+									var text = _v1.a;
+									var hasButton = _v1.b;
+									return {
+										button: hasButton ? $elm$core$Maybe$Just(
+											{
+												onPress: $elm$core$Maybe$Just(
+													$author$project$Page$Snackbar$AddSnackbar(
+														_Utils_Tuple2('This is another message', false))),
+												text: 'Add'
+											}) : $elm$core$Maybe$Nothing,
+										text: text
+									};
+								},
+								model))))
 				]),
-			determinateIndicators);
-	});
-var $author$project$Widget$select = $author$project$Internal$Select$select;
-var $author$project$View$States$select = F2(
-	function (idle, style) {
-		return _List_fromArray(
-			[
-				_Utils_Tuple2(
-				'First selected',
-				A2(
-					$author$project$Widget$buttonRow,
-					{content: style.selectButton, elementRow: 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: $elm$core$Basics$always($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,
-					{content: style.selectButton, elementRow: 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: $elm$core$Basics$always($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,
-					{content: style.selectButton, elementRow: 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: $elm$core$Basics$always($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,
-					{content: style.selectButton, elementRow: 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: $elm$core$Basics$always($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,
-					{content: style.selectButton, elementRow: 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: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-										text: $elm$core$String$fromInt(_int)
-									};
-								},
-								_List_Nil),
-							selected: $elm$core$Maybe$Nothing
-						})))
-			]);
-	});
-var $author$project$View$States$sheet = F2(
-	function (_v0, style) {
-		return _List_Nil;
-	});
-var $author$project$View$States$snackbar = F2(
-	function (_v0, style) {
-		return _List_Nil;
+			A2(
+				$author$project$Widget$column,
+				$author$project$Widget$Material$column,
+				_List_fromArray(
+					[
+						A2(
+						$author$project$Widget$button,
+						$author$project$Widget$Material$containedButton(palette),
+						{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							onPress: $elm$core$Maybe$Just(
+								$author$project$Page$Snackbar$AddSnackbar(
+									_Utils_Tuple2('This is a notification. It will disappear after 10 seconds.', false))),
+							text: 'Add Notification'
+						}),
+						A2(
+						$author$project$Widget$button,
+						$author$project$Widget$Material$containedButton(palette),
+						{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							onPress: $elm$core$Maybe$Just(
+								$author$project$Page$Snackbar$AddSnackbar(
+									_Utils_Tuple2('You can add another notification if you want.', true))),
+							text: 'Add Notification with Action'
+						})
+					])));
 	});
+var $author$project$Page$Snackbar$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Snackbar$init),
+	subscriptions: $author$project$Page$Snackbar$subscriptions,
+	update: $author$project$Page$Snackbar$update,
+	view: $author$project$Page$demo($author$project$Page$Snackbar$view)
+};
+var $author$project$Page$Snackbar$description = 'Buttons allow users to take actions, and make choices, with a single tap.';
+var $author$project$Page$Snackbar$title = 'Button';
+var $author$project$Page$Snackbar$page = $author$project$Page$create(
+	{book: $author$project$Page$Snackbar$book, demo: $author$project$Page$Snackbar$demo, description: $author$project$Page$Snackbar$description, title: $author$project$Page$Snackbar$title});
 var $author$project$Internal$SortTable$Column = function (a) {
 	return {$: 'Column', a: a};
 };
@@ -20075,6 +25588,59 @@ var $author$project$Internal$SortTable$intColumn = function (_v0) {
 		});
 };
 var $author$project$Widget$intColumn = $author$project$Internal$SortTable$intColumn;
+var $author$project$Internal$Material$SortTable$sortTable = function (palette) {
+	return {
+		content: {
+			ascIcon: $author$project$Internal$Material$Icon$expand_less,
+			defaultIcon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+			descIcon: $author$project$Internal$Material$Icon$expand_more,
+			header: $author$project$Internal$Material$Button$textButton(palette)
+		},
+		elementTable: _List_Nil
+	};
+};
+var $author$project$Widget$Material$sortTable = $author$project$Internal$Material$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 $elm$core$Maybe$andThen = F2(
+	function (callback, maybeValue) {
+		if (maybeValue.$ === 'Just') {
+			var value = maybeValue.a;
+			return callback(value);
+		} else {
+			return $elm$core$Maybe$Nothing;
+		}
+	});
 var $mdgriffith$elm_ui$Element$InternalColumn = function (a) {
 	return {$: 'InternalColumn', a: a};
 };
@@ -20093,56 +25659,8 @@ var $elm$core$List$all = F2(
 	});
 var $mdgriffith$elm_ui$Internal$Model$AsGrid = {$: 'AsGrid'};
 var $mdgriffith$elm_ui$Internal$Model$asGrid = $mdgriffith$elm_ui$Internal$Model$AsGrid;
-var $mdgriffith$elm_ui$Internal$Model$getSpacing = F2(
-	function (attrs, _default) {
-		return A2(
-			$elm$core$Maybe$withDefault,
-			_default,
-			A3(
-				$elm$core$List$foldr,
-				F2(
-					function (attr, acc) {
-						if (acc.$ === 'Just') {
-							var x = acc.a;
-							return $elm$core$Maybe$Just(x);
-						} else {
-							if ((attr.$ === 'StyleClass') && (attr.b.$ === 'SpacingStyle')) {
-								var _v2 = attr.b;
-								var x = _v2.b;
-								var y = _v2.c;
-								return $elm$core$Maybe$Just(
-									_Utils_Tuple2(x, y));
-							} else {
-								return $elm$core$Maybe$Nothing;
-							}
-						}
-					}),
-				$elm$core$Maybe$Nothing,
-				attrs));
-	});
 var $mdgriffith$elm_ui$Internal$Flag$gridPosition = $mdgriffith$elm_ui$Internal$Flag$flag(35);
 var $mdgriffith$elm_ui$Internal$Flag$gridTemplate = $mdgriffith$elm_ui$Internal$Flag$flag(34);
-var $elm$core$List$repeatHelp = F3(
-	function (result, n, value) {
-		repeatHelp:
-		while (true) {
-			if (n <= 0) {
-				return result;
-			} else {
-				var $temp$result = A2($elm$core$List$cons, value, result),
-					$temp$n = n - 1,
-					$temp$value = value;
-				result = $temp$result;
-				n = $temp$n;
-				value = $temp$value;
-				continue repeatHelp;
-			}
-		}
-	});
-var $elm$core$List$repeat = F2(
-	function (n, value) {
-		return A3($elm$core$List$repeatHelp, _List_Nil, n, value);
-	});
 var $mdgriffith$elm_ui$Element$tableHelper = F2(
 	function (attrs, config) {
 		var onGrid = F3(
@@ -20409,50 +25927,60 @@ var $author$project$Widget$sortTable = function () {
 	var fun = $author$project$Internal$SortTable$sortTable;
 	return fun;
 }();
-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$States$sortTable = F2(
-	function (idle, style) {
-		return _List_fromArray(
-			[
-				_Utils_Tuple2(
-				'Int column',
+var $author$project$Page$SortTable$viewFunctions = function () {
+	var viewTable = F7(
+		function (style, content, columns, asc, sortBy, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.sortTable',
 				A2(
 					$author$project$Widget$sortTable,
-					style.sortTable,
+					style(palette),
 					{
-						asc: true,
-						columns: _List_fromArray(
+						asc: asc,
+						columns: columns,
+						content: content,
+						onChange: $elm$core$Basics$always(_Utils_Tuple0),
+						sortBy: sortBy
+					}));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewTable]));
+}();
+var $author$project$Page$SortTable$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$optionListStory,
+			'Sort by',
+			_Utils_Tuple2('Id', 'Id'),
+			_List_fromArray(
+				[
+					_Utils_Tuple2('Name', 'Name'),
+					_Utils_Tuple2('Rating', 'Rating'),
+					_Utils_Tuple2('Hash', 'Hash'),
+					_Utils_Tuple2('None', '')
+				])),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'Sort ascendingly',
+				_Utils_Tuple2(true, false),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Columns',
+					_Utils_Tuple2(
+						'4 Columns',
+						_List_fromArray(
 							[
 								$author$project$Widget$intColumn(
 								{
@@ -20465,38 +25993,6 @@ var $author$project$View$States$sortTable = F2(
 									},
 									width: $mdgriffith$elm_ui$Element$fill
 								}),
-								$author$project$Widget$stringColumn(
-								{
-									title: 'Name',
-									toString: $elm$core$Basics$identity,
-									value: function ($) {
-										return $.name;
-									},
-									width: $mdgriffith$elm_ui$Element$fill
-								})
-							]),
-						content: _List_fromArray(
-							[
-								{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
-								{
-								hash: $elm$core$Maybe$Just('45jf'),
-								id: 2,
-								name: 'Ana',
-								rating: 1.34
-							}
-							]),
-						onChange: $elm$core$Basics$always(idle),
-						sortBy: 'Id'
-					})),
-				_Utils_Tuple2(
-				'Name column',
-				A2(
-					$author$project$Widget$sortTable,
-					style.sortTable,
-					{
-						asc: true,
-						columns: _List_fromArray(
-							[
 								$author$project$Widget$stringColumn(
 								{
 									title: 'Name',
@@ -20506,38 +26002,6 @@ var $author$project$View$States$sortTable = F2(
 									},
 									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',
@@ -20558,2621 +26022,96 @@ var $author$project$View$States$sortTable = F2(
 										$elm$core$Maybe$withDefault('None')),
 									width: $mdgriffith$elm_ui$Element$fill
 								})
-							]),
-						content: _List_fromArray(
-							[
-								{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
-								{
-								hash: $elm$core$Maybe$Just('45jf'),
-								id: 2,
-								name: 'Ana',
-								rating: 1.34
-							}
-							]),
-						onChange: $elm$core$Basics$always(idle),
-						sortBy: 'Rating'
-					})),
-				_Utils_Tuple2(
-				'Unsortable column',
-				A2(
-					$author$project$Widget$sortTable,
-					style.sortTable,
-					{
-						asc: true,
-						columns: _List_fromArray(
-							[
-								$author$project$Widget$floatColumn(
-								{
-									title: 'Rating',
-									toString: $elm$core$String$fromFloat,
-									value: function ($) {
-										return $.rating;
-									},
-									width: $mdgriffith$elm_ui$Element$fill
-								}),
-								$author$project$Widget$unsortableColumn(
-								{
-									title: 'Hash',
-									toString: A2(
-										$elm$core$Basics$composeR,
-										function ($) {
-											return $.hash;
-										},
-										$elm$core$Maybe$withDefault('None')),
-									width: $mdgriffith$elm_ui$Element$fill
-								})
-							]),
-						content: _List_fromArray(
-							[
-								{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
-								{
-								hash: $elm$core$Maybe$Just('45jf'),
-								id: 2,
-								name: 'Ana',
-								rating: 1.34
-							}
-							]),
-						onChange: $elm$core$Basics$always(idle),
-						sortBy: 'Hash'
-					})),
-				_Utils_Tuple2(
-				'Empty Table',
-				A2(
-					$author$project$Widget$sortTable,
-					style.sortTable,
-					{
-						asc: true,
-						columns: _List_Nil,
-						content: _List_fromArray(
-							[
-								{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
-								{
-								hash: $elm$core$Maybe$Just('45jf'),
-								id: 2,
-								name: 'Ana',
-								rating: 1.34
-							}
-							]),
-						onChange: $elm$core$Basics$always(idle),
-						sortBy: ''
-					}))
-			]);
-	});
-var $author$project$Internal$Switch$switch = F2(
-	function (style, _v0) {
-		var onPress = _v0.onPress;
-		var description = _v0.description;
-		var active = _v0.active;
-		return A2(
-			$mdgriffith$elm_ui$Element$Input$button,
-			_Utils_ap(
-				style.elementButton,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Region$description(description),
-						$mdgriffith$elm_ui$Element$inFront(
-						A2(
-							$mdgriffith$elm_ui$Element$el,
-							_Utils_ap(
-								style.contentInFront.element,
-								active ? style.contentInFront.ifActive : (_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.contentInFront.ifDisabled : style.contentInFront.otherwise)),
-							A2(
-								$mdgriffith$elm_ui$Element$el,
-								_Utils_ap(
-									style.contentInFront.content.element,
-									active ? style.contentInFront.content.ifActive : (_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.contentInFront.content.ifDisabled : style.contentInFront.content.otherwise)),
-								$mdgriffith$elm_ui$Element$none)))
-					])),
-			{
-				label: A2(
-					$mdgriffith$elm_ui$Element$el,
-					_Utils_ap(
-						style.content.element,
-						active ? style.content.ifActive : (_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.content.ifDisabled : style.content.otherwise)),
-					$mdgriffith$elm_ui$Element$none),
-				onPress: onPress
-			});
-	});
-var $author$project$Widget$switch = function () {
-	var fun = $author$project$Internal$Switch$switch;
-	return fun;
-}();
-var $author$project$View$States$switch = F2(
-	function (idle, style) {
-		return _List_fromArray(
-			[
-				_Utils_Tuple2(
-				'Disabled switch',
-				A2(
-					$author$project$Widget$switch,
-					style._switch,
-					{active: false, description: 'Disabled switch', onPress: $elm$core$Maybe$Nothing})),
-				_Utils_Tuple2(
-				'Inactive Select switch',
-				A2(
-					$author$project$Widget$switch,
-					style._switch,
-					{
-						active: false,
-						description: 'Inactive Select switch',
-						onPress: $elm$core$Maybe$Just(idle)
-					})),
-				_Utils_Tuple2(
-				'Active Select switch',
-				A2(
-					$author$project$Widget$switch,
-					style._switch,
-					{
-						active: true,
-						description: 'Active Select switch',
-						onPress: $elm$core$Maybe$Just(idle)
-					}))
-			]);
-	});
-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.elementColumn,
-			_List_fromArray(
-				[
-					A2(
-					$mdgriffith$elm_ui$Element$row,
-					style.content.tabs.elementRow,
-					A2(
-						$elm$core$List$map,
-						$author$project$Internal$Select$selectButton(style.content.tabs.content),
-						$author$project$Internal$Select$select(tabs))),
-					A2(
-					$mdgriffith$elm_ui$Element$el,
-					style.content.content,
-					content(tabs.selected))
-				]));
-	});
-var $author$project$Widget$tab = function () {
-	var fun = $author$project$Internal$Tab$tab;
-	return fun;
-}();
-var $author$project$View$States$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: $elm$core$Basics$always($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: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-										text: $elm$core$String$fromInt(_int)
-									};
-								},
-								_List_fromArray(
-									[1, 2, 3])),
-							selected: $elm$core$Maybe$Just(0)
-						}
-					}))
-			]);
-	});
-var $feathericons$elm_feather$FeatherIcons$circle = A2(
-	$feathericons$elm_feather$FeatherIcons$makeBuilder,
-	'circle',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$circle,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$cx('12'),
-					$elm$svg$Svg$Attributes$cy('12'),
-					$elm$svg$Svg$Attributes$r('10')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Widget$textInput = function () {
-	var fun = $author$project$Internal$TextInput$textInput;
-	return fun;
-}();
-var $author$project$View$States$textInput = F2(
-	function (idle, style) {
-		return _List_fromArray(
-			[
-				_Utils_Tuple2(
-				'Nothing Selected',
-				A2(
-					$author$project$Widget$textInput,
-					style.textInput,
-					{
-						chips: _List_Nil,
-						label: 'Label',
-						onChange: $elm$core$Basics$always(idle),
-						placeholder: $elm$core$Maybe$Nothing,
-						text: ''
-					})),
-				_Utils_Tuple2(
-				'Some chips',
-				A2(
-					$author$project$Widget$textInput,
-					style.textInput,
-					{
-						chips: _List_fromArray(
-							[
-								{
-								icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$triangle),
-								onPress: $elm$core$Maybe$Just(idle),
-								text: 'A'
-							},
-								{
-								icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$circle),
-								onPress: $elm$core$Maybe$Just(idle),
-								text: 'B'
-							}
-							]),
-						label: 'Label',
-						onChange: $elm$core$Basics$always(idle),
-						placeholder: $elm$core$Maybe$Nothing,
-						text: ''
-					}))
-			]);
-	});
-var $author$project$Data$Example$toTests = function (example) {
-	switch (example.$) {
-		case 'ButtonExample':
-			return $author$project$View$States$button;
-		case 'SwitchExample':
-			return $author$project$View$States$switch;
-		case 'SelectExample':
-			return $author$project$View$States$select;
-		case 'MultiSelectExample':
-			return $author$project$View$States$multiSelect;
-		case 'TabExample':
-			return $author$project$View$States$tab;
-		case 'SortTableExample':
-			return $author$project$View$States$sortTable;
-		case 'ModalExample':
-			return $author$project$View$States$modal;
-		case 'DialogExample':
-			return $author$project$View$States$dialog;
-		case 'TextInputExample':
-			return $author$project$View$States$textInput;
-		case 'ListExample':
-			return $author$project$View$States$list;
-		case 'ProgressIndicatorExample':
-			return $author$project$View$States$progressIndicator;
-		case 'IconExample':
-			return $author$project$View$States$icon;
-		case 'SheetExample':
-			return $author$project$View$States$sheet;
-		case 'AppBarExample':
-			return $author$project$View$States$appBar;
-		case 'LayoutExample':
-			return $author$project$View$States$layout;
-		default:
-			return $author$project$View$States$snackbar;
-	}
-};
-var $icidasset$elm_material_icons$Material$Icons$Types$Color = function (a) {
-	return {$: 'Color', a: a};
-};
-var $author$project$Example$AppBar$SetDesign = function (a) {
-	return {$: 'SetDesign', a: a};
-};
-var $author$project$Example$AppBar$SetSearch = function (a) {
-	return {$: 'SetSearch', a: a};
-};
-var $author$project$Example$AppBar$SetSelected = function (a) {
-	return {$: 'SetSelected', a: a};
-};
-var $icidasset$elm_material_icons$Material$Icons$Internal$icon = F4(
-	function (attributes, nodes, size, coloring) {
-		var sizeAsString = $elm$core$String$fromInt(size);
-		return A2(
-			$elm$svg$Svg$svg,
-			_Utils_ap(
-				attributes,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$height(sizeAsString),
-						$elm$svg$Svg$Attributes$width(sizeAsString)
-					])),
-			_List_fromArray(
-				[
-					A2(
-					$elm$svg$Svg$g,
+							])),
 					_List_fromArray(
 						[
-							function () {
-							if (coloring.$ === 'Color') {
-								var color = coloring.a;
-								return $elm$svg$Svg$Attributes$fill(
-									$avh4$elm_color$Color$toCssString(color));
-							} else {
-								return $elm$svg$Svg$Attributes$fill('currentColor');
-							}
-						}()
-						]),
-					nodes)
-				]));
-	});
-var $icidasset$elm_material_icons$Material$Icons$change_history = A2(
-	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
-	_List_fromArray(
-		[
-			$elm$svg$Svg$Attributes$viewBox('0 0 24 24')
-		]),
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M0 0h24v24H0V0z'),
-					$elm$svg$Svg$Attributes$fill('none')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Widget$Icon$elmMaterialIcons = F2(
-	function (wrapper, fun) {
-		return function (_v0) {
-			var size = _v0.size;
-			var color = _v0.color;
-			return A2(
-				$mdgriffith$elm_ui$Element$el,
-				_List_Nil,
-				$mdgriffith$elm_ui$Element$html(
-					A2(
-						fun,
-						size,
-						wrapper(color))));
-		};
-	});
-var $author$project$Example$AppBar$view = F3(
-	function (msgMapper, style, model) {
-		var search = {
-			chips: _List_Nil,
-			label: 'Search',
-			onChange: A2($elm$core$Basics$composeR, $author$project$Example$AppBar$SetSearch, msgMapper),
-			placeholder: $elm$core$Maybe$Nothing,
-			text: model.search
-		};
-		var primaryActions = _List_fromArray(
-			[
-				{
-				icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$change_history),
-				onPress: $elm$core$Maybe$Just(
-					msgMapper(
-						$author$project$Example$AppBar$SetDesign(!model.isMenuBar))),
-				text: 'Action'
-			}
-			]);
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width(
-					A2($mdgriffith$elm_ui$Element$minimum, 400, $mdgriffith$elm_ui$Element$fill))
-				]),
-			model.isMenuBar ? A2(
-				$author$project$Widget$menuBar,
-				style.menuBar,
-				{
-					deviceClass: $mdgriffith$elm_ui$Element$Tablet,
-					openLeftSheet: $elm$core$Maybe$Just(
-						msgMapper(
-							$author$project$Example$AppBar$SetDesign(!model.isMenuBar))),
-					openRightSheet: $elm$core$Maybe$Just(
-						msgMapper(
-							$author$project$Example$AppBar$SetDesign(!model.isMenuBar))),
-					openTopSheet: $elm$core$Maybe$Just(
-						msgMapper(
-							$author$project$Example$AppBar$SetDesign(!model.isMenuBar))),
-					primaryActions: primaryActions,
-					search: $elm$core$Maybe$Just(search),
-					title: A2(
-						$mdgriffith$elm_ui$Element$el,
-						$author$project$Widget$Material$Typography$h6,
-						$mdgriffith$elm_ui$Element$text('Title'))
-				}) : A2(
-				$author$project$Widget$tabBar,
-				style.tabBar,
-				{
-					deviceClass: $mdgriffith$elm_ui$Element$Phone,
-					menu: {
-						onSelect: A2(
-							$elm$core$Basics$composeR,
-							$author$project$Example$AppBar$SetSelected,
-							A2($elm$core$Basics$composeR, msgMapper, $elm$core$Maybe$Just)),
-						options: A2(
-							$elm$core$List$map,
-							function (string) {
-								return {
-									icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-									text: string
-								};
-							},
+							_Utils_Tuple2(
+							'1 Column',
 							_List_fromArray(
-								['Home', 'About'])),
-						selected: $elm$core$Maybe$Just(model.selected)
-					},
-					openRightSheet: $elm$core$Maybe$Just(
-						msgMapper(
-							$author$project$Example$AppBar$SetDesign(!model.isMenuBar))),
-					openTopSheet: $elm$core$Maybe$Just(
-						msgMapper(
-							$author$project$Example$AppBar$SetDesign(!model.isMenuBar))),
-					primaryActions: primaryActions,
-					search: $elm$core$Maybe$Just(search),
-					title: A2(
-						$mdgriffith$elm_ui$Element$el,
-						$author$project$Widget$Material$Typography$h6,
-						$mdgriffith$elm_ui$Element$text('Title'))
-				}));
-	});
-var $author$project$Example$Button$Decrease = function (a) {
-	return {$: 'Decrease', a: a};
-};
-var $author$project$Example$Button$Increase = function (a) {
-	return {$: 'Increase', a: a};
-};
-var $author$project$Example$Button$Reset = {$: 'Reset'};
-var $icidasset$elm_material_icons$Material$Icons$add = A2(
-	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
-	_List_fromArray(
-		[
-			$elm$svg$Svg$Attributes$viewBox('0 0 24 24')
-		]),
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M0 0h24v24H0z'),
-					$elm$svg$Svg$Attributes$fill('none')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z')
-				]),
-			_List_Nil)
-		]));
-var $icidasset$elm_material_icons$Material$Icons$exposure_plus_2 = A2(
-	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
-	_List_fromArray(
-		[
-			$elm$svg$Svg$Attributes$viewBox('0 0 24 24')
-		]),
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M0 0h24v24H0zm0 0h24v24H0z'),
-					$elm$svg$Svg$Attributes$fill('none')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M16.05 16.29l2.86-3.07c.38-.39.72-.79 1.04-1.18.32-.39.59-.78.82-1.17.23-.39.41-.78.54-1.17.13-.39.19-.79.19-1.18 0-.53-.09-1.02-.27-1.46-.18-.44-.44-.81-.78-1.11-.34-.31-.77-.54-1.26-.71-.51-.16-1.08-.24-1.72-.24-.69 0-1.31.11-1.85.32-.54.21-1 .51-1.36.88-.37.37-.65.8-.84 1.3-.18.47-.27.97-.28 1.5h2.14c.01-.31.05-.6.13-.87.09-.29.23-.54.4-.75.18-.21.41-.37.68-.49.27-.12.6-.18.96-.18.31 0 .58.05.81.15.23.1.43.25.59.43.16.18.28.4.37.65.08.25.13.52.13.81 0 .22-.03.43-.08.65-.06.22-.15.45-.29.7-.14.25-.32.53-.56.83-.23.3-.52.65-.88 1.03l-4.17 4.55V18H22v-1.71h-5.95zM8 7H6v4H2v2h4v4h2v-4h4v-2H8V7z')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Widget$Material$Typography$h4 = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Font$size(34),
-		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.25)
-	]);
-var $icidasset$elm_material_icons$Material$Icons$remove = A2(
-	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
-	_List_fromArray(
-		[
-			$elm$svg$Svg$Attributes$viewBox('0 0 24 24')
-		]),
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M0 0h24v24H0z'),
-					$elm$svg$Svg$Attributes$fill('none')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M19 13H5v-2h14v2z')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Example$Button$view = F3(
-	function (msgMapper, style, model) {
-		return A2(
-			$author$project$Widget$column,
-			A2(
-				$author$project$Widget$Customize$mapContent,
-				$author$project$Widget$Customize$element(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+								[
+									$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
+									})
+								])),
+							_Utils_Tuple2('None', _List_Nil)
 						])),
 				A2(
-					$author$project$Widget$Customize$elementColumn,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-						]),
-					style.column)),
-			_List_fromArray(
-				[
-					A2(
-					$author$project$Widget$column,
-					A2(
-						$author$project$Widget$Customize$mapContent,
-						$author$project$Widget$Customize$element(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Content',
+						_Utils_Tuple2(
+							'Data',
 							_List_fromArray(
 								[
-									$mdgriffith$elm_ui$Element$width(
-									$mdgriffith$elm_ui$Element$px(128)),
-									$mdgriffith$elm_ui$Element$height(
-									$mdgriffith$elm_ui$Element$px(128)),
-									$mdgriffith$elm_ui$Element$Background$color(
-									$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$defaultPalette.secondary))
-								])),
-						A2(
-							$author$project$Widget$Customize$elementColumn,
-							_List_fromArray(
-								[
-									$mdgriffith$elm_ui$Element$centerX,
-									$mdgriffith$elm_ui$Element$width(
-									$mdgriffith$elm_ui$Element$px(128)),
-									$mdgriffith$elm_ui$Element$height(
-									$mdgriffith$elm_ui$Element$px(128)),
-									$mdgriffith$elm_ui$Element$inFront(
-									A2(
-										$mdgriffith$elm_ui$Element$el,
-										_List_fromArray(
-											[$mdgriffith$elm_ui$Element$alignRight]),
-										A2(
-											$author$project$Widget$iconButton,
-											style.iconButton,
-											{
-												icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$exposure_plus_2),
-												onPress: $elm$core$Maybe$Just(
-													msgMapper(
-														$author$project$Example$Button$Increase(2))),
-												text: '+2'
-											})))
-								]),
-							style.cardColumn)),
-					$elm$core$List$singleton(
-						A2(
-							$mdgriffith$elm_ui$Element$el,
-							_Utils_ap(
-								$author$project$Widget$Material$Typography$h4,
-								_List_fromArray(
-									[$mdgriffith$elm_ui$Element$centerX, $mdgriffith$elm_ui$Element$centerY])),
-							$mdgriffith$elm_ui$Element$text(
-								$elm$core$String$fromInt(model))))),
-					A2(
-					$author$project$Widget$row,
-					A2(
-						$author$project$Widget$Customize$mapContent,
-						$author$project$Widget$Customize$element(
-							_List_fromArray(
-								[
-									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-								])),
-						A2(
-							$author$project$Widget$Customize$elementRow,
-							_List_fromArray(
-								[
-									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-								]),
-							style.row)),
-					_List_fromArray(
-						[
-							A2(
-							$author$project$Widget$row,
-							A2(
-								$author$project$Widget$Customize$elementRow,
-								_List_fromArray(
-									[$mdgriffith$elm_ui$Element$alignRight]),
-								style.row),
-							_List_fromArray(
-								[
-									A2(
-									$author$project$Widget$textButton,
-									style.textButton,
+									{hash: $elm$core$Maybe$Nothing, id: 1, name: 'Antonio', rating: 2.456},
 									{
-										onPress: $elm$core$Maybe$Just(
-											msgMapper($author$project$Example$Button$Reset)),
-										text: 'Reset'
-									}),
-									A2(
-									$author$project$Widget$button,
-									style.outlinedButton,
+									hash: $elm$core$Maybe$Just('45jf'),
+									id: 2,
+									name: 'Ana',
+									rating: 1.34
+								},
 									{
-										icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$remove),
-										onPress: (model > 0) ? $elm$core$Maybe$Just(
-											msgMapper(
-												$author$project$Example$Button$Decrease(1))) : $elm$core$Maybe$Nothing,
-										text: 'Decrease'
-									})
-								])),
-							A2(
-							$author$project$Widget$row,
-							A2(
-								$author$project$Widget$Customize$elementRow,
-								_List_fromArray(
-									[$mdgriffith$elm_ui$Element$alignLeft]),
-								style.row),
-							_List_fromArray(
-								[
-									A2(
-									$author$project$Widget$button,
-									style.containedButton,
+									hash: $elm$core$Maybe$Just('6fs1'),
+									id: 3,
+									name: 'Alfred',
+									rating: 4.22
+								},
 									{
-										icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$add),
-										onPress: $elm$core$Maybe$Just(
-											msgMapper(
-												$author$project$Example$Button$Increase(1))),
-										text: 'Increase'
-									})
-								]))
-						]))
-				]));
-	});
-var $author$project$Example$Dialog$OpenDialog = function (a) {
-	return {$: 'OpenDialog', a: a};
-};
-var $author$project$Internal$Dialog$dialog = F2(
-	function (style, _v0) {
-		var title = _v0.title;
-		var text = _v0.text;
-		var accept = _v0.accept;
-		var dismiss = _v0.dismiss;
-		return {
-			content: A2(
-				$mdgriffith$elm_ui$Element$column,
-				_Utils_ap(
-					_List_fromArray(
-						[$mdgriffith$elm_ui$Element$centerX, $mdgriffith$elm_ui$Element$centerY]),
-					style.elementColumn),
-				_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.content.title.contentText)),
-							title)),
-						A2(
-						$mdgriffith$elm_ui$Element$paragraph,
-						style.content.text.contentText,
-						$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.content.buttons.elementRow),
-						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.content.buttons.content.accept, acceptButton));
-								} else {
-									var acceptButton = _v1.a.a;
-									var dismissButton = _v1.b.a;
-									return _List_fromArray(
-										[
-											A2($author$project$Internal$Button$textButton, style.content.buttons.content.dismiss, dismissButton),
-											A2($author$project$Internal$Button$textButton, style.content.buttons.content.accept, acceptButton)
-										]);
+									hash: $elm$core$Maybe$Just('k52f'),
+									id: 4,
+									name: 'Thomas',
+									rating: 3
 								}
-							} else {
-								return _List_Nil;
-							}
-						}())
-					])),
-			onDismiss: function () {
-				var _v3 = _Utils_Tuple2(accept, dismiss);
-				if (_v3.a.$ === 'Nothing') {
-					if (_v3.b.$ === 'Nothing') {
-						var _v4 = _v3.a;
-						var _v5 = _v3.b;
-						return $elm$core$Maybe$Nothing;
-					} else {
-						var _v6 = _v3.a;
-						var onPress = _v3.b.a.onPress;
-						return onPress;
-					}
-				} else {
-					return $elm$core$Maybe$Nothing;
-				}
-			}()
-		};
-	});
-var $author$project$Widget$dialog = function () {
-	var fun = $author$project$Internal$Dialog$dialog;
-	return fun;
-}();
-var $feathericons$elm_feather$FeatherIcons$eye = A2(
-	$feathericons$elm_feather$FeatherIcons$makeBuilder,
-	'eye',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$circle,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$cx('12'),
-					$elm$svg$Svg$Attributes$cy('12'),
-					$elm$svg$Svg$Attributes$r('3')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Example$Dialog$view = F3(
-	function (msgMapper, style, _v0) {
-		var isOpen = _v0.a;
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			_Utils_ap(
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height(
-						A2($mdgriffith$elm_ui$Element$minimum, 200, $mdgriffith$elm_ui$Element$fill)),
-						$mdgriffith$elm_ui$Element$width(
-						A2($mdgriffith$elm_ui$Element$minimum, 400, $mdgriffith$elm_ui$Element$fill))
-					]),
-				isOpen ? $author$project$Widget$singleModal(
-					$elm$core$List$singleton(
-						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($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$eye),
-					onPress: $elm$core$Maybe$Just(
-						msgMapper(
-							$author$project$Example$Dialog$OpenDialog(true))),
-					text: 'Show Dialog'
-				}));
-	});
-var $author$project$Widget$Icon$antDesignIconsElm = function (fun) {
-	return function (_v0) {
-		var size = _v0.size;
-		var color = _v0.color;
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			_List_Nil,
-			$mdgriffith$elm_ui$Element$html(
-				fun(
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$width(
-							$elm$core$String$fromInt(size)),
-							$elm$svg$Svg$Attributes$height(
-							$elm$core$String$fromInt(size)),
-							$elm$svg$Svg$Attributes$fill(
-							$avh4$elm_color$Color$toCssString(color))
-						]))));
-	};
-};
-var $elm$svg$Svg$Attributes$points = _VirtualDom_attribute('points');
-var $elm$svg$Svg$polyline = $elm$svg$Svg$trustedNode('polyline');
-var $feathericons$elm_feather$FeatherIcons$check = A2(
-	$feathericons$elm_feather$FeatherIcons$makeBuilder,
-	'check',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$polyline,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$points('20 6 9 17 4 12')
-				]),
-			_List_Nil)
-		]));
-var $lattyware$elm_fontawesome$FontAwesome$Icon$Icon = F5(
-	function (prefix, name, width, height, paths) {
-		return {height: height, name: name, paths: paths, prefix: prefix, width: width};
-	});
-var $lattyware$elm_fontawesome$FontAwesome$Solid$check = A5(
-	$lattyware$elm_fontawesome$FontAwesome$Icon$Icon,
-	'fas',
-	'check',
-	512,
-	512,
-	_List_fromArray(
-		['M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z']));
-var $elm$svg$Svg$Attributes$clipRule = _VirtualDom_attribute('clip-rule');
-var $elm$svg$Svg$Attributes$fillRule = _VirtualDom_attribute('fill-rule');
-var $jasonliang_dev$elm_heroicons$Heroicons$Solid$check = function (attrs) {
-	return A2(
-		$elm$svg$Svg$svg,
-		A2(
-			$elm$core$List$cons,
-			$elm$svg$Svg$Attributes$viewBox('0 0 20 20'),
-			A2(
-				$elm$core$List$cons,
-				$elm$svg$Svg$Attributes$fill('currentColor'),
-				attrs)),
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$fillRule('evenodd'),
-						$elm$svg$Svg$Attributes$d('M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'),
-						$elm$svg$Svg$Attributes$clipRule('evenodd')
-					]),
-				_List_Nil)
-			]));
-};
-var $capitalist$elm_octicons$Octicons$checkPolygon = '12 5 4 13 0 9 1.5 7.5 4 10 10.5 3.5';
-var $elm$svg$Svg$Attributes$style = _VirtualDom_attribute('style');
-var $elm$svg$Svg$Attributes$version = _VirtualDom_attribute('version');
-var $capitalist$elm_octicons$Octicons$Internal$iconSVG = F5(
-	function (viewBox, name, options, attributes, children) {
-		var style = function () {
-			var _v2 = options.style;
-			if (_v2.$ === 'Nothing') {
-				return _List_Nil;
-			} else {
-				var s = _v2.a;
-				return _List_fromArray(
-					[s]);
-			}
-		}();
-		var margin = function () {
-			var _v1 = options.margin;
-			if (_v1.$ === 'Nothing') {
-				return _List_Nil;
-			} else {
-				var m = _v1.a;
-				return _List_fromArray(
-					['margin: ' + m]);
-			}
-		}();
-		var styles = function () {
-			var _v0 = $elm$core$List$concat(
-				_List_fromArray(
-					[style, margin]));
-			if (!_v0.b) {
-				return _List_Nil;
-			} else {
-				var lst = _v0;
-				return _List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$style(
-						A2($elm$core$String$join, ';', lst))
-					]);
-			}
-		}();
-		return A2(
-			$elm$svg$Svg$svg,
-			$elm$core$List$concat(
-				_List_fromArray(
-					[
-						_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$version('1.1'),
-							$elm$svg$Svg$Attributes$class(
-							A2($elm$core$Maybe$withDefault, 'octicon ' + name, options._class)),
-							$elm$svg$Svg$Attributes$width(
-							$elm$core$String$fromInt(options.width)),
-							$elm$svg$Svg$Attributes$height(
-							$elm$core$String$fromInt(options.height)),
-							$elm$svg$Svg$Attributes$viewBox(viewBox)
-						]),
-						attributes,
-						styles
-					])),
-			children);
-	});
-var $elm$svg$Svg$polygon = $elm$svg$Svg$trustedNode('polygon');
-var $capitalist$elm_octicons$Octicons$polygonIconWithOptions = F4(
-	function (points, viewBox, octiconName, options) {
-		return A5(
-			$capitalist$elm_octicons$Octicons$Internal$iconSVG,
-			viewBox,
-			octiconName,
-			options,
-			_List_Nil,
-			_List_fromArray(
-				[
-					A2(
-					$elm$svg$Svg$polygon,
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$points(points),
-							$elm$svg$Svg$Attributes$fillRule(options.fillRule),
-							$elm$svg$Svg$Attributes$fill(options.color)
-						]),
-					_List_Nil)
-				]));
-	});
-var $capitalist$elm_octicons$Octicons$check = A3($capitalist$elm_octicons$Octicons$polygonIconWithOptions, $capitalist$elm_octicons$Octicons$checkPolygon, '0 0 12 16', 'check');
-var $lemol$ant_design_icons_elm$Ant$Icons$Svg$CheckOutlined$viewWithAttributes = function (attributes) {
-	return A2(
-		$elm$svg$Svg$svg,
-		_Utils_ap(
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$viewBox('64 64 896 896')
-				]),
-			attributes),
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$d('M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z')
-					]),
-				_List_Nil)
-			]));
-};
-var $lemol$ant_design_icons_elm$Ant$Icons$Svg$checkOutlined = $lemol$ant_design_icons_elm$Ant$Icons$Svg$CheckOutlined$viewWithAttributes;
-var $j_panasiuk$elm_ionicons$Ionicon$Internal$toAlphaString = function (value) {
-	return A2(
-		$elm$core$String$left,
-		5,
-		$elm$core$String$fromFloat(
-			A3($elm$core$Basics$clamp, 0, 1, value)));
-};
-var $j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString = function (value) {
-	return A2(
-		$elm$core$String$left,
-		5,
-		$elm$core$String$fromFloat(
-			A3($elm$core$Basics$clamp, 0, 255, 255 * value)));
-};
-var $j_panasiuk$elm_ionicons$Ionicon$Internal$fill = function (_v0) {
-	var red = _v0.red;
-	var green = _v0.green;
-	var blue = _v0.blue;
-	var alpha = _v0.alpha;
-	var _v1 = ((0 <= alpha) && (alpha < 1)) ? _Utils_Tuple2(
-		'rgba',
-		_List_fromArray(
-			[
-				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(red),
-				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(green),
-				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(blue),
-				$j_panasiuk$elm_ionicons$Ionicon$Internal$toAlphaString(alpha)
-			])) : _Utils_Tuple2(
-		'rgb',
-		_List_fromArray(
-			[
-				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(red),
-				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(green),
-				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(blue)
-			]));
-	var colorSpace = _v1.a;
-	var values = _v1.b;
-	return colorSpace + ('(' + (A2($elm$core$String$join, ',', values) + ')'));
-};
-var $elm$svg$Svg$Attributes$enableBackground = _VirtualDom_attribute('enable-background');
-var $elm$svg$Svg$Attributes$x = _VirtualDom_attribute('x');
-var $elm$svg$Svg$Attributes$y = _VirtualDom_attribute('y');
-var $j_panasiuk$elm_ionicons$Ionicon$Internal$svg = function (size) {
-	return $elm$svg$Svg$svg(
-		_List_fromArray(
-			[
-				$elm$svg$Svg$Attributes$version('1.1'),
-				$elm$svg$Svg$Attributes$x('0px'),
-				$elm$svg$Svg$Attributes$y('0px'),
-				$elm$svg$Svg$Attributes$width(
-				$elm$core$String$fromInt(size)),
-				$elm$svg$Svg$Attributes$height(
-				$elm$core$String$fromInt(size)),
-				$elm$svg$Svg$Attributes$viewBox('0 0 512 512'),
-				$elm$svg$Svg$Attributes$enableBackground('new 0 0 512 512')
-			]));
-};
-var $j_panasiuk$elm_ionicons$Ionicon$Internal$p = F3(
-	function (d, size, color) {
-		return A2(
-			$j_panasiuk$elm_ionicons$Ionicon$Internal$svg,
-			size,
-			_List_fromArray(
-				[
-					A2(
-					$elm$svg$Svg$path,
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$d(d),
-							$elm$svg$Svg$Attributes$fill(
-							$j_panasiuk$elm_ionicons$Ionicon$Internal$fill(color))
-						]),
-					_List_Nil)
-				]));
-	});
-var $j_panasiuk$elm_ionicons$Ionicon$checkmark = $j_panasiuk$elm_ionicons$Ionicon$Internal$p('M461.6,109.6l-54.9-43.3c-1.7-1.4-3.8-2.4-6.2-2.4c-2.4,0-4.6,1-6.3,2.5L194.5,323c0,0-78.5-75.5-80.7-77.7c-2.2-2.2-5.1-5.9-9.5-5.9c-4.4,0-6.4,3.1-8.7,5.4c-1.7,1.8-29.7,31.2-43.5,45.8c-0.8,0.9-1.3,1.4-2,2.1c-1.2,1.7-2,3.6-2,5.7c0,2.2,0.8,4,2,5.7l2.8,2.6c0,0,139.3,133.8,141.6,136.1c2.3,2.3,5.1,5.2,9.2,5.2c4,0,7.3-4.3,9.2-6.2L462,121.8c1.2-1.7,2-3.6,2-5.8C464,113.5,463,111.4,461.6,109.6z');
-var $pehota$elm_zondicons$Zondicons$checkmark = function (attributes) {
-	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'),
-				attributes)),
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$d('M0 11l2-2 5 5L18 3l2 2L7 18z')
-					]),
-				_List_Nil)
-			]));
-};
-var $capitalist$elm_octicons$Octicons$color = F2(
-	function (value, options) {
-		return _Utils_update(
-			options,
-			{color: value});
-	});
-var $capitalist$elm_octicons$Octicons$defaultOptions = {_class: $elm$core$Maybe$Nothing, color: 'black', fillRule: 'evenodd', height: 16, margin: $elm$core$Maybe$Nothing, style: $elm$core$Maybe$Nothing, width: 16};
-var $icidasset$elm_material_icons$Material$Icons$done = A2(
-	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
-	_List_fromArray(
-		[
-			$elm$svg$Svg$Attributes$viewBox('0 0 24 24')
-		]),
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M0 0h24v24H0z'),
-					$elm$svg$Svg$Attributes$fill('none')
-				]),
-			_List_Nil),
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z')
-				]),
-			_List_Nil)
-		]));
-var $danmarcab$material_icons$Material$Icons$Internal$toRgbaString = function (color) {
-	var _v0 = $avh4$elm_color$Color$toRgba(color);
-	var red = _v0.red;
-	var green = _v0.green;
-	var blue = _v0.blue;
-	var alpha = _v0.alpha;
-	return 'rgba(' + ($elm$core$String$fromInt(
-		$elm$core$Basics$round(255 * red)) + (',' + ($elm$core$String$fromInt(
-		$elm$core$Basics$round(255 * green)) + (',' + ($elm$core$String$fromInt(
-		$elm$core$Basics$round(255 * blue)) + (',' + ($elm$core$String$fromFloat(alpha) + ')')))))));
-};
-var $danmarcab$material_icons$Material$Icons$Internal$icon = F4(
-	function (viewBox, children, color, size) {
-		var stringSize = $elm$core$String$fromInt(size);
-		var stringColor = $danmarcab$material_icons$Material$Icons$Internal$toRgbaString(color);
-		return A2(
-			$elm$svg$Svg$svg,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$width(stringSize),
-					$elm$svg$Svg$Attributes$height(stringSize),
-					$elm$svg$Svg$Attributes$viewBox(viewBox)
-				]),
-			_List_fromArray(
-				[
-					A2(
-					$elm$svg$Svg$g,
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$fill(stringColor)
-						]),
-					children)
-				]));
-	});
-var $danmarcab$material_icons$Material$Icons$Action$done = A2(
-	$danmarcab$material_icons$Material$Icons$Internal$icon,
-	'0 0 48 48',
-	_List_fromArray(
-		[
-			A2(
-			$elm$svg$Svg$path,
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$d('M18 32.34L9.66 24l-2.83 2.83L18 38l24-24-2.83-2.83z')
-				]),
-			_List_Nil)
-		]));
-var $author$project$Widget$Icon$elmFontawesome = F2(
-	function (fun, icon) {
-		return function (_v0) {
-			var size = _v0.size;
-			var color = _v0.color;
-			return A2(
-				$mdgriffith$elm_ui$Element$el,
-				_List_Nil,
-				$mdgriffith$elm_ui$Element$html(
-					A2(
-						$elm$svg$Svg$svg,
-						_List_fromArray(
-							[
-								$elm$svg$Svg$Attributes$width(
-								$elm$core$String$fromInt(size)),
-								$elm$svg$Svg$Attributes$height(
-								$elm$core$String$fromInt(size)),
-								$elm$svg$Svg$Attributes$stroke(
-								$avh4$elm_color$Color$toCssString(color)),
-								$elm$svg$Svg$Attributes$viewBox(
-								'0 0 ' + ($elm$core$String$fromInt(512) + (' ' + $elm$core$String$fromInt(512))))
-							]),
-						$elm$core$List$singleton(
-							fun(icon)))));
-		};
-	});
-var $author$project$Widget$Icon$elmHeroicons = function (fun) {
-	return function (_v0) {
-		var size = _v0.size;
-		var color = _v0.color;
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			_List_Nil,
-			$mdgriffith$elm_ui$Element$html(
-				fun(
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$width(
-							$elm$core$String$fromInt(size)),
-							$elm$svg$Svg$Attributes$height(
-							$elm$core$String$fromInt(size)),
-							$elm$svg$Svg$Attributes$stroke(
-							$avh4$elm_color$Color$toCssString(color))
-						]))));
-	};
-};
-var $author$project$Widget$Icon$elmIonicons = function (fun) {
-	return function (_v0) {
-		var size = _v0.size;
-		var color = _v0.color;
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			_List_Nil,
-			$mdgriffith$elm_ui$Element$html(
-				A2(
-					fun,
-					size,
-					$avh4$elm_color$Color$toRgba(color))));
-	};
-};
-var $author$project$Widget$Icon$elmOcticons = F2(
-	function (_v0, fun) {
-		var withSize = _v0.withSize;
-		var withColor = _v0.withColor;
-		var defaultOptions = _v0.defaultOptions;
-		return function (_v1) {
-			var size = _v1.size;
-			var color = _v1.color;
-			return A2(
-				$mdgriffith$elm_ui$Element$el,
-				_List_Nil,
-				$mdgriffith$elm_ui$Element$html(
-					fun(
-						A2(
-							withColor,
-							$avh4$elm_color$Color$toCssString(color),
-							A2(withSize, size, defaultOptions)))));
-		};
-	});
-var $author$project$Widget$Icon$elmZondicons = function (fun) {
-	return function (_v0) {
-		var size = _v0.size;
-		var color = _v0.color;
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			_List_Nil,
-			$mdgriffith$elm_ui$Element$html(
-				fun(
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$width(
-							$elm$core$String$fromInt(size)),
-							$elm$svg$Svg$Attributes$height(
-							$elm$core$String$fromInt(size)),
-							$elm$svg$Svg$Attributes$stroke(
-							$avh4$elm_color$Color$toCssString(color))
-						]))));
-	};
-};
-var $author$project$Widget$Icon$materialIcons = function (fun) {
-	return function (_v0) {
-		var size = _v0.size;
-		var color = _v0.color;
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			_List_Nil,
-			$mdgriffith$elm_ui$Element$html(
-				A2(
-					$elm$svg$Svg$svg,
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$width(
-							$elm$core$String$fromInt(size)),
-							$elm$svg$Svg$Attributes$height(
-							$elm$core$String$fromInt(size))
-						]),
-					$elm$core$List$singleton(
-						A2(fun, color, size)))));
-	};
-};
-var $capitalist$elm_octicons$Octicons$size = F2(
-	function (value, options) {
-		return _Utils_update(
-			options,
-			{height: value, width: value});
-	});
-var $lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath = F2(
-	function (attrs, d) {
-		return A2(
-			$elm$svg$Svg$path,
-			A2(
-				$elm$core$List$cons,
-				$elm$svg$Svg$Attributes$fill('currentColor'),
-				A2(
-					$elm$core$List$cons,
-					$elm$svg$Svg$Attributes$d(d),
-					attrs)),
-			_List_Nil);
-	});
-var $lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePaths = F2(
-	function (attrs, icon) {
-		var _v0 = icon.paths;
-		if (!_v0.b) {
-			return A2($lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath, attrs, '');
-		} else {
-			if (!_v0.b.b) {
-				var only = _v0.a;
-				return A2($lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath, attrs, only);
-			} else {
-				var secondary = _v0.a;
-				var _v1 = _v0.b;
-				var primary = _v1.a;
-				return A2(
-					$elm$svg$Svg$g,
-					_List_fromArray(
-						[
-							$elm$svg$Svg$Attributes$class('fa-group')
-						]),
-					_List_fromArray(
-						[
-							A2(
-							$lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath,
-							A2(
-								$elm$core$List$cons,
-								$elm$svg$Svg$Attributes$class('fa-secondary'),
-								attrs),
-							secondary),
-							A2(
-							$lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath,
-							A2(
-								$elm$core$List$cons,
-								$elm$svg$Svg$Attributes$class('fa-primary'),
-								attrs),
-							primary)
-						]));
-			}
-		}
-	});
-var $lattyware$elm_fontawesome$FontAwesome$Svg$viewIcon = $lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePaths(_List_Nil);
-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;
-					if ((_Utils_cmp(r, x / 2) > -1) && (_Utils_cmp(b, y / 2) > -1)) {
-						var newTop = t - (y / 2);
-						var newRight = r - (x / 2);
-						var newLeft = l - (x / 2);
-						var newBottom = b - (y / 2);
-						return $elm$core$Maybe$Just(
-							A2(
-								$mdgriffith$elm_ui$Internal$Model$StyleClass,
-								$mdgriffith$elm_ui$Internal$Flag$padding,
-								A5(
-									$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-									A4($mdgriffith$elm_ui$Internal$Model$paddingNameFloat, newTop, newRight, newBottom, newLeft),
-									newTop,
-									newRight,
-									newBottom,
-									newLeft)));
-					} else {
-						return $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$Icon$view = F3(
-	function (msgMapper, style, _v0) {
-		return A2(
-			$mdgriffith$elm_ui$Element$column,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$spacing(10)
-				]),
-			_List_fromArray(
-				[
-					A2(
-					$mdgriffith$elm_ui$Element$paragraph,
-					_List_Nil,
-					$elm$core$List$singleton(
-						$mdgriffith$elm_ui$Element$text('Every icon package on elm-packages is supported.'))),
-					A2(
-					$mdgriffith$elm_ui$Element$wrappedRow,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$spacing(10)
-						]),
-					A2(
-						$elm$core$List$map,
-						function (_v1) {
-							var icon = _v1.a;
-							var text = _v1.b;
-							return A2(
-								$author$project$Widget$button,
-								style.primaryButton,
-								{
-									icon: icon,
-									onPress: $elm$core$Maybe$Just(
-										msgMapper(_Utils_Tuple0)),
-									text: text
-								});
-						},
-						_List_fromArray(
-							[
-								_Utils_Tuple2(
-								A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
-								'elm-material-icons'),
-								_Utils_Tuple2(
-								$author$project$Widget$Icon$materialIcons($danmarcab$material_icons$Material$Icons$Action$done),
-								'material-icons'),
-								_Utils_Tuple2(
-								A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$check),
-								'elm-feather'),
-								_Utils_Tuple2(
-								A2($author$project$Widget$Icon$elmFontawesome, $lattyware$elm_fontawesome$FontAwesome$Svg$viewIcon, $lattyware$elm_fontawesome$FontAwesome$Solid$check),
-								'elm-fontawesome'),
-								_Utils_Tuple2(
-								$author$project$Widget$Icon$elmIonicons($j_panasiuk$elm_ionicons$Ionicon$checkmark),
-								'elm-ionicons'),
-								_Utils_Tuple2(
-								A2(
-									$author$project$Widget$Icon$elmOcticons,
-									{defaultOptions: $capitalist$elm_octicons$Octicons$defaultOptions, withColor: $capitalist$elm_octicons$Octicons$color, withSize: $capitalist$elm_octicons$Octicons$size},
-									$capitalist$elm_octicons$Octicons$check),
-								'elm-octicons'),
-								_Utils_Tuple2(
-								$author$project$Widget$Icon$elmHeroicons($jasonliang_dev$elm_heroicons$Heroicons$Solid$check),
-								'elm-heroicons'),
-								_Utils_Tuple2(
-								$author$project$Widget$Icon$antDesignIconsElm($lemol$ant_design_icons_elm$Ant$Icons$Svg$checkOutlined),
-								'ant-design-icons-elm'),
-								_Utils_Tuple2(
-								$author$project$Widget$Icon$elmZondicons($pehota$elm_zondicons$Zondicons$checkmark),
-								'elm-zondicons')
-							])))
-				]));
-	});
-var $author$project$Example$Layout$AddSnackbar = {$: 'AddSnackbar'};
-var $author$project$Example$Layout$ChangedSidebar = function (a) {
-	return {$: 'ChangedSidebar', a: a};
-};
-var $author$project$Example$Layout$LeftSheet = {$: 'LeftSheet'};
-var $author$project$Example$Layout$Search = {$: 'Search'};
-var $author$project$Example$Layout$SetSearchText = function (a) {
-	return {$: 'SetSearchText', a: a};
-};
-var $author$project$Example$Layout$SetSelected = function (a) {
-	return {$: 'SetSelected', a: a};
-};
-var $author$project$Example$Layout$ShowDialog = function (a) {
-	return {$: 'ShowDialog', a: a};
-};
-var $author$project$Example$Layout$view = F3(
-	function (msgMapper, style, _v0) {
-		var snackbar = _v0.snackbar;
-		var searchText = _v0.searchText;
-		var selected = _v0.selected;
-		var showDialog = _v0.showDialog;
-		var active = _v0.active;
-		var title = A2(
-			$mdgriffith$elm_ui$Element$el,
-			_Utils_ap(
-				$author$project$Widget$Material$Typography$h6,
-				_List_fromArray(
-					[
-						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
-					])),
-			$mdgriffith$elm_ui$Element$text('Title'));
-		var snackbarElem = 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(8),
-							$mdgriffith$elm_ui$Element$alignBottom,
-							$mdgriffith$elm_ui$Element$alignRight
-						])),
-				A3(
-					$author$project$Widget$Snackbar$view,
-					style.snackbar,
-					function (text) {
-						return {button: $elm$core$Maybe$Nothing, text: text};
-					},
-					snackbar)));
-		var search = {
-			chips: _List_Nil,
-			label: 'Search',
-			onChange: A2($elm$core$Basics$composeR, $author$project$Example$Layout$SetSearchText, msgMapper),
-			placeholder: $elm$core$Maybe$Nothing,
-			text: searchText
-		};
-		var onDismiss = msgMapper(
-			$author$project$Example$Layout$ChangedSidebar($elm$core$Maybe$Nothing));
-		var onChangedSidebar = $author$project$Example$Layout$ChangedSidebar;
-		var menu = {
-			onSelect: A2(
-				$elm$core$Basics$composeR,
-				$author$project$Example$Layout$SetSelected,
-				A2($elm$core$Basics$composeR, msgMapper, $elm$core$Maybe$Just)),
-			options: A2(
-				$elm$core$List$map,
-				function (string) {
-					return {
-						icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-						text: string
-					};
-				},
-				_List_fromArray(
-					['Home', 'About'])),
-			selected: $elm$core$Maybe$Just(selected)
-		};
-		var dialog = showDialog ? $elm$core$Maybe$Just(
-			A2(
-				$author$project$Widget$dialog,
-				style.dialog,
-				{
-					accept: $elm$core$Maybe$Nothing,
-					dismiss: $elm$core$Maybe$Just(
-						{
-							onPress: $elm$core$Maybe$Just(
-								msgMapper(
-									$author$project$Example$Layout$ShowDialog(false))),
-							text: 'Accept'
-						}),
-					text: 'This is a dialog window',
-					title: $elm$core$Maybe$Just('Dialog')
-				})) : $elm$core$Maybe$Nothing;
-		var deviceClass = $mdgriffith$elm_ui$Element$Phone;
-		var actions = A2(
-			$elm$core$List$repeat,
-			5,
-			{
-				icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$change_history),
-				onPress: $elm$core$Maybe$Nothing,
-				text: 'Action'
-			});
-		var _v1 = $author$project$Widget$Layout$partitionActions(actions);
-		var primaryActions = _v1.primaryActions;
-		var moreActions = _v1.moreActions;
-		var modals = $author$project$Widget$Layout$orderModals(
-			{
-				bottomSheet: $elm$core$Maybe$Nothing,
-				dialog: dialog,
-				leftSheet: _Utils_eq(
-					active,
-					$elm$core$Maybe$Just($author$project$Example$Layout$LeftSheet)) ? $elm$core$Maybe$Just(
-					A2(
-						$author$project$Widget$Layout$leftSheet,
-						{button: style.sheetButton, sheet: style.sideSheet},
-						{menu: menu, onDismiss: onDismiss, title: title})) : $elm$core$Maybe$Nothing,
-				rightSheet: _Utils_eq(
-					active,
-					$elm$core$Maybe$Just($author$project$Example$Layout$RightSheet)) ? $elm$core$Maybe$Just(
-					A2(
-						$author$project$Widget$Layout$rightSheet,
-						{insetItem: style.insetItem, sheet: style.sideSheet},
-						{moreActions: moreActions, onDismiss: onDismiss})) : $elm$core$Maybe$Nothing,
-				topSheet: _Utils_eq(
-					active,
-					$elm$core$Maybe$Just($author$project$Example$Layout$Search)) ? $elm$core$Maybe$Just(
-					A2(
-						$author$project$Widget$Layout$searchSheet,
-						style.searchFill,
-						{onDismiss: onDismiss, search: search})) : $elm$core$Maybe$Nothing
-			});
-		var nav = (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) || (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Tablet) || ($elm$core$List$length(menu.options) > 5))) ? A2(
-			$author$project$Widget$menuBar,
-			style.menuBar,
-			{
-				deviceClass: deviceClass,
-				openLeftSheet: $elm$core$Maybe$Just(
-					msgMapper(
-						$author$project$Example$Layout$ChangedSidebar(
-							$elm$core$Maybe$Just($author$project$Example$Layout$LeftSheet)))),
-				openRightSheet: $elm$core$Maybe$Just(
-					msgMapper(
-						$author$project$Example$Layout$ChangedSidebar(
-							$elm$core$Maybe$Just($author$project$Example$Layout$RightSheet)))),
-				openTopSheet: $elm$core$Maybe$Just(
-					msgMapper(
-						$author$project$Example$Layout$ChangedSidebar(
-							$elm$core$Maybe$Just($author$project$Example$Layout$Search)))),
-				primaryActions: primaryActions,
-				search: $elm$core$Maybe$Just(search),
-				title: title
-			}) : A2(
-			$author$project$Widget$tabBar,
-			style.tabBar,
-			{
-				deviceClass: deviceClass,
-				menu: menu,
-				openRightSheet: $elm$core$Maybe$Just(
-					msgMapper(
-						$author$project$Example$Layout$ChangedSidebar(
-							$elm$core$Maybe$Just($author$project$Example$Layout$RightSheet)))),
-				openTopSheet: $elm$core$Maybe$Nothing,
-				primaryActions: primaryActions,
-				search: $elm$core$Maybe$Just(search),
-				title: title
-			});
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			$elm$core$List$concat(
-				_List_fromArray(
-					[
-						style.container,
-						_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$inFront(snackbarElem)
-						]),
-						$author$project$Widget$singleModal(modals),
-						_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))
-						])
-					])),
-			A2(
-				$mdgriffith$elm_ui$Element$column,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-						$mdgriffith$elm_ui$Element$spacing(8)
-					]),
-				_List_fromArray(
-					[
-						nav,
-						A2(
-						$author$project$Widget$button,
-						style.containedButton,
-						{
-							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-							onPress: $elm$core$Maybe$Just(
-								msgMapper($author$project$Example$Layout$AddSnackbar)),
-							text: 'Add Notification'
-						})
-					])));
-	});
-var $author$project$Example$List$ToggleCollapsable = function (a) {
-	return {$: 'ToggleCollapsable', a: a};
-};
-var $author$project$Internal$Item$fullBleedItem = F2(
-	function (s, _v0) {
-		var onPress = _v0.onPress;
-		var text = _v0.text;
-		var icon = _v0.icon;
-		return A2(
-			$author$project$Internal$Item$toItem,
-			s,
-			function (style) {
-				return A2(
-					$mdgriffith$elm_ui$Element$Input$button,
-					_Utils_ap(
-						style.elementButton,
-						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
-					{
-						label: A2(
-							$mdgriffith$elm_ui$Element$row,
-							style.content.elementRow,
-							_List_fromArray(
-								[
-									A2(
-									$mdgriffith$elm_ui$Element$el,
-									style.content.content.text.elementText,
-									A2(
-										$mdgriffith$elm_ui$Element$paragraph,
-										_List_Nil,
-										$elm$core$List$singleton(
-											$mdgriffith$elm_ui$Element$text(text)))),
-									icon(style.content.content.icon)
 								])),
-						onPress: onPress
-					});
-			});
-	});
-var $author$project$Widget$fullBleedItem = function () {
-	var fun = $author$project$Internal$Item$fullBleedItem;
-	return fun;
-}();
-var $author$project$Internal$Item$headerItem = F2(
-	function (style, title) {
-		return A2(
-			$author$project$Internal$Item$toItem,
-			style,
-			function (_v0) {
-				var elementColumn = _v0.elementColumn;
-				var content = _v0.content;
-				return A2(
-					$mdgriffith$elm_ui$Element$column,
-					elementColumn,
-					_List_fromArray(
-						[
-							A2($mdgriffith$elm_ui$Element$el, content.divider.element, $mdgriffith$elm_ui$Element$none),
-							A2(
-							$mdgriffith$elm_ui$Element$el,
-							content.title,
-							$mdgriffith$elm_ui$Element$text(title))
-						]));
-			});
-	});
-var $author$project$Widget$headerItem = $author$project$Internal$Item$headerItem;
-var $elm$html$Html$Attributes$alt = $elm$html$Html$Attributes$stringProperty('alt');
-var $elm$html$Html$Attributes$src = function (url) {
-	return A2(
-		$elm$html$Html$Attributes$stringProperty,
-		'src',
-		_VirtualDom_noJavaScriptOrHtmlUri(url));
+						_List_fromArray(
+							[
+								_Utils_Tuple2('None', _List_Nil)
+							])),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$optionListStory,
+							'Style',
+							_Utils_Tuple2('SortTable', $author$project$Widget$Material$sortTable),
+							_List_Nil),
+						A2(
+							$author$project$UIExplorer$Story$book,
+							$elm$core$Maybe$Just('Options'),
+							$author$project$Page$SortTable$viewFunctions)))))));
+var $author$project$Page$SortTable$init = _Utils_Tuple2(
+	{asc: true, title: 'Name'},
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$SortTable$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
 };
-var $mdgriffith$elm_ui$Element$image = F2(
-	function (attrs, _v0) {
-		var src = _v0.src;
-		var description = _v0.description;
-		var imageAttributes = A2(
-			$elm$core$List$filter,
-			function (a) {
-				switch (a.$) {
-					case 'Width':
-						return true;
-					case 'Height':
-						return true;
-					default:
-						return false;
-				}
+var $author$project$Page$SortTable$update = F2(
+	function (msg, model) {
+		var string = msg.a;
+		return _Utils_Tuple2(
+			{
+				asc: _Utils_eq(model.title, string) ? (!model.asc) : true,
+				title: string
 			},
-			attrs);
-		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$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.imageContainer),
-				attrs),
-			$mdgriffith$elm_ui$Internal$Model$Unkeyed(
-				_List_fromArray(
-					[
-						A4(
-						$mdgriffith$elm_ui$Internal$Model$element,
-						$mdgriffith$elm_ui$Internal$Model$asEl,
-						$mdgriffith$elm_ui$Internal$Model$NodeName('img'),
-						_Utils_ap(
-							_List_fromArray(
-								[
-									$mdgriffith$elm_ui$Internal$Model$Attr(
-									$elm$html$Html$Attributes$src(src)),
-									$mdgriffith$elm_ui$Internal$Model$Attr(
-									$elm$html$Html$Attributes$alt(description))
-								]),
-							imageAttributes),
-						$mdgriffith$elm_ui$Internal$Model$Unkeyed(_List_Nil))
-					])));
+			$elm$core$Platform$Cmd$none);
 	});
-var $author$project$Internal$Item$imageItem = F2(
-	function (s, _v0) {
-		var onPress = _v0.onPress;
-		var text = _v0.text;
-		var image = _v0.image;
-		var content = _v0.content;
-		return A2(
-			$author$project$Internal$Item$toItem,
-			s,
-			function (style) {
-				return A2(
-					$mdgriffith$elm_ui$Element$Input$button,
-					_Utils_ap(
-						style.elementButton,
-						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
-					{
-						label: A2(
-							$mdgriffith$elm_ui$Element$row,
-							style.content.elementRow,
-							_List_fromArray(
-								[
-									A2($mdgriffith$elm_ui$Element$el, style.content.content.image.element, image),
-									A2(
-									$mdgriffith$elm_ui$Element$el,
-									style.content.content.text.elementText,
-									A2(
-										$mdgriffith$elm_ui$Element$paragraph,
-										_List_Nil,
-										$elm$core$List$singleton(
-											$mdgriffith$elm_ui$Element$text(text)))),
-									content(style.content.content.content)
-								])),
-						onPress: onPress
-					});
-			});
-	});
-var $author$project$Widget$imageItem = function () {
-	var fun = $author$project$Internal$Item$imageItem;
-	return fun;
-}();
-var $author$project$Widget$insetItem = function () {
-	var fun = $author$project$Internal$Item$insetItem;
-	return fun;
-}();
-var $author$project$Internal$Item$multiLineItem = F2(
-	function (s, _v0) {
-		var onPress = _v0.onPress;
-		var title = _v0.title;
-		var text = _v0.text;
-		var icon = _v0.icon;
-		var content = _v0.content;
-		return A2(
-			$author$project$Internal$Item$toItem,
-			s,
-			function (style) {
-				return A2(
-					$mdgriffith$elm_ui$Element$Input$button,
-					_Utils_ap(
-						style.elementButton,
-						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
-					{
-						label: A2(
-							$mdgriffith$elm_ui$Element$row,
-							style.content.elementRow,
-							_List_fromArray(
-								[
-									A2(
-									$mdgriffith$elm_ui$Element$el,
-									style.content.content.icon.element,
-									icon(style.content.content.icon.content)),
-									A2(
-									$mdgriffith$elm_ui$Element$column,
-									style.content.content.description.elementColumn,
-									_List_fromArray(
-										[
-											A2(
-											$mdgriffith$elm_ui$Element$paragraph,
-											style.content.content.description.content.title.elementText,
-											$elm$core$List$singleton(
-												$mdgriffith$elm_ui$Element$text(title))),
-											A2(
-											$mdgriffith$elm_ui$Element$paragraph,
-											style.content.content.description.content.text.elementText,
-											$elm$core$List$singleton(
-												$mdgriffith$elm_ui$Element$text(text)))
-										])),
-									content(style.content.content.content)
-								])),
-						onPress: onPress
-					});
-			});
-	});
-var $author$project$Widget$multiLineItem = function () {
-	var fun = $author$project$Internal$Item$multiLineItem;
-	return fun;
-}();
-var $author$project$Widget$selectItem = $author$project$Internal$Item$selectItem;
-var $author$project$Example$List$view = F3(
-	function (msgMapper, style, _v0) {
-		var isExpanded = _v0.a;
-		return A2(
-			$author$project$Widget$itemList,
-			style.cardColumn,
-			_Utils_ap(
-				_List_fromArray(
-					[
-						A2($author$project$Widget$headerItem, style.fullBleedHeader, 'Section 1'),
-						$author$project$Widget$asItem(
-						$mdgriffith$elm_ui$Element$text('Custom Item')),
-						$author$project$Widget$divider(style.middleDivider),
-						A2(
-						$author$project$Widget$fullBleedItem,
-						style.fullBleedItem,
-						{
-							icon: function (_v1) {
-								return $mdgriffith$elm_ui$Element$none;
-							},
-							onPress: $elm$core$Maybe$Nothing,
-							text: 'Full Bleed Item'
-						}),
-						A2($author$project$Widget$headerItem, style.fullBleedHeader, 'Section 2'),
-						A2(
-						$author$project$Widget$insetItem,
-						style.insetItem,
-						{
-							content: function (_v2) {
-								return $mdgriffith$elm_ui$Element$none;
-							},
-							icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$triangle),
-							onPress: $elm$core$Maybe$Nothing,
-							text: 'Item with Icon'
-						}),
-						A2(
-						$author$project$Widget$imageItem,
-						style.imageItem,
-						{
-							content: function (_v3) {
-								var size = _v3.size;
-								var color = _v3.color;
-								return A2(
-									$mdgriffith$elm_ui$Element$el,
-									_List_fromArray(
-										[
-											$mdgriffith$elm_ui$Element$Font$color(
-											$author$project$Widget$Material$Color$fromColor(color)),
-											$mdgriffith$elm_ui$Element$Font$size(size)
-										]),
-									$mdgriffith$elm_ui$Element$text('1.'));
-							},
-							image: A2(
-								$mdgriffith$elm_ui$Element$image,
-								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$width(
-										$mdgriffith$elm_ui$Element$px(40)),
-										$mdgriffith$elm_ui$Element$height(
-										$mdgriffith$elm_ui$Element$px(40))
-									]),
-								{description: 'Elm logo', src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Elm_logo.svg/1024px-Elm_logo.svg.png'}),
-							onPress: $elm$core$Maybe$Nothing,
-							text: 'Item with Image'
-						}),
-						$author$project$Widget$divider(style.insetDivider),
-						A2(
-						$author$project$Widget$insetItem,
-						style.insetItem,
-						{
-							content: function (_v4) {
-								var size = _v4.size;
-								var color = _v4.color;
-								return A2(
-									$mdgriffith$elm_ui$Element$el,
-									_List_fromArray(
-										[
-											$mdgriffith$elm_ui$Element$Font$color(
-											$author$project$Widget$Material$Color$fromColor(color)),
-											$mdgriffith$elm_ui$Element$Font$size(size)
-										]),
-									$mdgriffith$elm_ui$Element$text('2.'));
-							},
-							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-							onPress: $elm$core$Maybe$Just(
-								msgMapper(
-									$author$project$Example$List$ToggleCollapsable(!isExpanded))),
-							text: 'Click Me'
-						}),
-						A2(
-						$author$project$Widget$multiLineItem,
-						style.multiLineItem,
-						{
-							content: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-							onPress: $elm$core$Maybe$Nothing,
-							text: 'Description. Description. Description. Description. Description. Description. Description. Description. Description. Description.',
-							title: 'Item'
-						}),
-						A2(
-						$author$project$Widget$imageItem,
-						style.imageItem,
-						{
-							content: function (_v5) {
-								return A2(
-									$author$project$Widget$switch,
-									style._switch,
-									{
-										active: isExpanded,
-										description: 'Click Me',
-										onPress: $elm$core$Maybe$Just(
-											msgMapper(
-												$author$project$Example$List$ToggleCollapsable(!isExpanded)))
-									});
-							},
-							image: $mdgriffith$elm_ui$Element$none,
-							onPress: $elm$core$Maybe$Just(
-								msgMapper(
-									$author$project$Example$List$ToggleCollapsable(!isExpanded))),
-							text: 'Clickable Item with Switch'
-						}),
-						$author$project$Widget$divider(style.fullBleedDivider)
-					]),
-				_Utils_ap(
-					A2(
-						$author$project$Widget$expansionItem,
-						style.expansionItem,
-						{
-							content: _List_fromArray(
-								[
-									A2($author$project$Widget$headerItem, style.insetHeader, 'Section 3'),
-									A2(
-									$author$project$Widget$insetItem,
-									style.insetItem,
-									{
-										content: function (_v6) {
-											var size = _v6.size;
-											var color = _v6.color;
-											return A2(
-												$mdgriffith$elm_ui$Element$el,
-												_List_fromArray(
-													[
-														$mdgriffith$elm_ui$Element$Font$color(
-														$author$project$Widget$Material$Color$fromColor(color)),
-														$mdgriffith$elm_ui$Element$Font$size(size)
-													]),
-												$mdgriffith$elm_ui$Element$text('3.'));
-										},
-										icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-										onPress: $elm$core$Maybe$Nothing,
-										text: 'Item'
-									})
-								]),
-							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-							isExpanded: isExpanded,
-							onToggle: A2($elm$core$Basics$composeR, $author$project$Example$List$ToggleCollapsable, msgMapper),
-							text: 'Expandable Item'
-						}),
-					_Utils_ap(
-						_List_fromArray(
-							[
-								A2($author$project$Widget$headerItem, style.fullBleedHeader, 'Menu')
-							]),
-						A2(
-							$author$project$Widget$selectItem,
-							style.selectItem,
-							{
-								onSelect: function (_int) {
-									return $elm$core$Maybe$Just(
-										msgMapper(
-											$author$project$Example$List$ToggleCollapsable(_int === 1)));
-								},
-								options: A2(
-									$elm$core$List$map,
-									function (bool) {
-										return {
-											icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-											text: bool ? 'Expanded' : 'Collapsed'
-										};
-									},
-									_List_fromArray(
-										[true, false])),
-								selected: isExpanded ? $elm$core$Maybe$Just(1) : $elm$core$Maybe$Just(0)
-							})))));
-	});
-var $author$project$Example$Modal$ToggleModal = function (a) {
-	return {$: 'ToggleModal', a: a};
-};
-var $author$project$Internal$Modal$multiModal = function (list) {
-	if (list.b) {
-		var head = list.a;
-		var tail = list.b;
-		return _Utils_ap(
-			A2(
-				$elm$core$List$map,
-				function (_v1) {
-					var content = _v1.content;
-					return $mdgriffith$elm_ui$Element$inFront(content);
-				},
-				$elm$core$List$reverse(tail)),
-			_Utils_ap(
-				$author$project$Internal$Modal$background(head.onDismiss),
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$inFront(head.content)
-					])));
-	} else {
-		return _List_Nil;
-	}
-};
-var $author$project$Widget$multiModal = $author$project$Internal$Modal$multiModal;
-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$multiModal(
-					_List_fromArray(
-						[
-							{
-							content: A2(
-								$mdgriffith$elm_ui$Element$el,
-								_List_fromArray(
-									[
-										$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)))
-						},
-							{
-							content: A2(
-								$mdgriffith$elm_ui$Element$el,
-								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$height(
-										$mdgriffith$elm_ui$Element$px(150)),
-										$mdgriffith$elm_ui$Element$width(
-										$mdgriffith$elm_ui$Element$px(200)),
-										$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('This card can not be selected.')))))),
-							onDismiss: $elm$core$Maybe$Nothing
-						},
-							{
-							content: A2(
-								$mdgriffith$elm_ui$Element$el,
-								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$height(
-										$mdgriffith$elm_ui$Element$px(300)),
-										$mdgriffith$elm_ui$Element$width(
-										$mdgriffith$elm_ui$Element$px(300)),
-										$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('This is message is behind the other two')))))),
-							onDismiss: $elm$core$Maybe$Nothing
-						}
-						])) : _List_Nil),
-			A2(
-				$author$project$Widget$button,
-				style.primaryButton,
-				{
-					icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $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,
-			{content: style.selectButton, elementRow: 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: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-								text: $elm$core$String$fromInt(_int)
-							};
-						},
-						_List_fromArray(
-							[1, 2, 42])),
-					selected: selected
-				}));
-	});
-var $author$project$Example$ProgressIndicator$view = F3(
-	function (msgMapper, style, _v0) {
-		var maybeProgress = _v0.a;
-		return A2($author$project$Widget$circularProgressIndicator, style.progressIndicator, maybeProgress);
-	});
-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,
-			{content: style.selectButton, elementRow: 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: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-								text: $elm$core$String$fromInt(_int)
-							};
-						},
-						_List_fromArray(
-							[1, 2, 42])),
-					selected: selected
-				}));
-	});
-var $author$project$Example$Sheet$ToggleModal = function (a) {
-	return {$: 'ToggleModal', a: a};
-};
-var $author$project$Example$Sheet$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$singleModal(
-					$elm$core$List$singleton(
-						{
-							content: A2(
-								$author$project$Widget$itemList,
-								style.sideSheet,
-								_List_fromArray(
-									[
-										$author$project$Widget$asItem(
-										A2(
-											$mdgriffith$elm_ui$Element$el,
-											$author$project$Widget$Material$Typography$h6,
-											$mdgriffith$elm_ui$Element$text('Menu'))),
-										A2(
-										$author$project$Widget$insetItem,
-										style.insetItem,
-										{
-											content: function (_v1) {
-												return $mdgriffith$elm_ui$Element$none;
-											},
-											icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$triangle),
-											onPress: $elm$core$Maybe$Just(
-												msgMapper(
-													$author$project$Example$Sheet$ToggleModal(false))),
-											text: 'Home'
-										}),
-										A2(
-										$author$project$Widget$insetItem,
-										style.insetItem,
-										{
-											content: function (_v2) {
-												return $mdgriffith$elm_ui$Element$none;
-											},
-											icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$triangle),
-											onPress: $elm$core$Maybe$Just(
-												msgMapper(
-													$author$project$Example$Sheet$ToggleModal(false))),
-											text: 'About'
-										})
-									])),
-							onDismiss: $elm$core$Maybe$Just(
-								msgMapper(
-									$author$project$Example$Sheet$ToggleModal(false)))
-						})) : _List_Nil),
-			A2(
-				$author$project$Widget$button,
-				style.primaryButton,
-				{
-					icon: A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$eye),
-					onPress: $elm$core$Maybe$Just(
-						msgMapper(
-							$author$project$Example$Sheet$ToggleModal(true))),
-					text: 'Show Sheet'
-				}));
-	});
-var $author$project$Example$Snackbar$AddSnackbar = function (a) {
-	return {$: 'AddSnackbar', a: a};
-};
-var $author$project$Example$Snackbar$view = F3(
-	function (msgMapper, style, model) {
-		return A2(
-			$mdgriffith$elm_ui$Element$el,
-			_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)),
-					$mdgriffith$elm_ui$Element$inFront(
-					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(8),
-										$mdgriffith$elm_ui$Element$alignBottom,
-										$mdgriffith$elm_ui$Element$alignRight
-									])),
-							A3(
-								$author$project$Widget$Snackbar$view,
-								style.snackbar,
-								function (_v0) {
-									var text = _v0.a;
-									var hasButton = _v0.b;
-									return {
-										button: hasButton ? $elm$core$Maybe$Just(
-											{
-												onPress: $elm$core$Maybe$Just(
-													msgMapper(
-														$author$project$Example$Snackbar$AddSnackbar(
-															_Utils_Tuple2('This is another message', false)))),
-												text: 'Add'
-											}) : $elm$core$Maybe$Nothing,
-										text: text
-									};
-								},
-								model))))
-				]),
-			A2(
-				$author$project$Widget$column,
-				style.column,
-				_List_fromArray(
-					[
-						A2(
-						$author$project$Widget$button,
-						style.button,
-						{
-							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-							onPress: $elm$core$Maybe$Just(
-								msgMapper(
-									$author$project$Example$Snackbar$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: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-							onPress: $elm$core$Maybe$Just(
-								msgMapper(
-									$author$project$Example$Snackbar$AddSnackbar(
-										_Utils_Tuple2('You can add another notification if you want.', true)))),
-							text: 'Add Notification with Action'
-						})
-					])));
-	});
-var $author$project$Example$SortTable$ChangedSorting = function (a) {
+var $author$project$Page$SortTable$ChangedSorting = function (a) {
 	return {$: 'ChangedSorting', a: a};
 };
-var $author$project$Example$SortTable$view = F3(
-	function (msgMapper, style, model) {
+var $author$project$Page$SortTable$view = F2(
+	function (_v0, model) {
+		var palette = _v0.palette;
 		return A2(
 			$author$project$Widget$sortTable,
-			style.sortTable,
+			$author$project$Widget$Material$sortTable(palette),
 			{
 				asc: model.asc,
 				columns: _List_fromArray(
@@ -23240,38 +26179,404 @@ var $author$project$Example$SortTable$view = F3(
 						rating: 3
 					}
 					]),
-				onChange: A2($elm$core$Basics$composeR, $author$project$Example$SortTable$ChangedSorting, msgMapper),
+				onChange: $author$project$Page$SortTable$ChangedSorting,
 				sortBy: model.title
 			});
 	});
-var $author$project$Example$Switch$ToggledButtonStatus = {$: 'ToggledButtonStatus'};
-var $author$project$Example$Switch$view = F3(
-	function (msgMapper, style, _v0) {
-		var isButtonEnabled = _v0.a;
+var $author$project$Page$SortTable$demo = {
+	init: $elm$core$Basics$always($author$project$Page$SortTable$init),
+	subscriptions: $author$project$Page$SortTable$subscriptions,
+	update: $author$project$Page$SortTable$update,
+	view: $author$project$Page$demo($author$project$Page$SortTable$view)
+};
+var $author$project$Page$SortTable$description = 'A simple sort table.';
+var $author$project$Page$SortTable$title = 'Sort Table';
+var $author$project$Page$SortTable$page = $author$project$Page$create(
+	{book: $author$project$Page$SortTable$book, demo: $author$project$Page$SortTable$demo, description: $author$project$Page$SortTable$description, title: $author$project$Page$SortTable$title});
+var $author$project$Page$Switch$viewFunctions = function () {
+	var viewSwitch = F6(
+		function (style, desc, active, onPress, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.switch',
+				A2(
+					$author$project$Widget$switch,
+					style(palette),
+					{active: active, description: desc, onPress: onPress}));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewSwitch]));
+}();
+var $author$project$Page$Switch$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'with event handler',
+			_Utils_Tuple2(
+				$elm$core$Maybe$Just(_Utils_Tuple0),
+				$elm$core$Maybe$Nothing),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'Active',
+				_Utils_Tuple2(true, false),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A2($author$project$UIExplorer$Story$textStory, 'Description', 'Be Awesome'),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('Switch', $author$project$Widget$Material$switch),
+						_List_Nil),
+					A2(
+						$author$project$UIExplorer$Story$book,
+						$elm$core$Maybe$Just('Options'),
+						$author$project$Page$Switch$viewFunctions))))));
+var $author$project$Page$Switch$IsButtonEnabled = function (a) {
+	return {$: 'IsButtonEnabled', a: a};
+};
+var $author$project$Page$Switch$init = _Utils_Tuple2(
+	$author$project$Page$Switch$IsButtonEnabled(false),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$Switch$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Switch$update = F2(
+	function (msg, _v0) {
+		var buttonEnabled = _v0.a;
+		return _Utils_Tuple2(
+			$author$project$Page$Switch$IsButtonEnabled(!buttonEnabled),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Page$Switch$ToggledButtonStatus = {$: 'ToggledButtonStatus'};
+var $author$project$Page$Switch$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var isButtonEnabled = _v1.a;
 		return A2(
 			$author$project$Widget$switch,
-			style._switch,
+			$author$project$Widget$Material$switch(palette),
 			{
 				active: isButtonEnabled,
 				description: 'click me',
-				onPress: $elm$core$Maybe$Just(
-					msgMapper($author$project$Example$Switch$ToggledButtonStatus))
+				onPress: $elm$core$Maybe$Just($author$project$Page$Switch$ToggledButtonStatus)
 			});
 	});
-var $author$project$Example$Tab$ChangedTab = function (a) {
+var $author$project$Page$Switch$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Switch$init),
+	subscriptions: $author$project$Page$Switch$subscriptions,
+	update: $author$project$Page$Switch$update,
+	view: $author$project$Page$demo($author$project$Page$Switch$view)
+};
+var $author$project$Page$Switch$description = 'Switches toggle the state of a single item on or off.';
+var $author$project$Page$Switch$title = 'Switch';
+var $author$project$Page$Switch$page = $author$project$Page$create(
+	{book: $author$project$Page$Switch$book, demo: $author$project$Page$Switch$demo, description: $author$project$Page$Switch$description, title: $author$project$Page$Switch$title});
+var $author$project$Internal$Material$Tab$tabButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {color: palette.primary, size: 18},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					otherwise: {color: palette.primary, size: 18}
+				},
+				text: {contentText: _List_Nil}
+			},
+			elementRow: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$spacing(8),
+					$mdgriffith$elm_ui$Element$centerY,
+					$mdgriffith$elm_ui$Element$centerX
+				])
+		},
+		elementButton: _Utils_ap(
+			$author$project$Widget$Material$Typography$button,
+			_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$Material$Color$fromColor(palette.primary)),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$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$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		otherwise: _List_Nil
+	};
+};
+var $author$project$Internal$Material$Tab$tab = function (palette) {
+	return {
+		content: {
+			content: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+				]),
+			tabs: {
+				content: $author$project$Internal$Material$Tab$tabButton(palette),
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spaceEvenly,
+						$mdgriffith$elm_ui$Element$Border$shadow(
+						$author$project$Widget$Material$Color$shadow(4)),
+						$mdgriffith$elm_ui$Element$spacing(8),
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+					])
+			}
+		},
+		elementColumn: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(8),
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+			])
+	};
+};
+var $author$project$Widget$Material$tab = $author$project$Internal$Material$Tab$tab;
+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.elementColumn,
+			_List_fromArray(
+				[
+					A2(
+					$mdgriffith$elm_ui$Element$row,
+					style.content.tabs.elementRow,
+					A2(
+						$elm$core$List$map,
+						$author$project$Internal$Select$selectButton(style.content.tabs.content),
+						$author$project$Internal$Select$select(tabs))),
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					style.content.content,
+					content(tabs.selected))
+				]));
+	});
+var $author$project$Widget$tab = function () {
+	var fun = $author$project$Internal$Tab$tab;
+	return fun;
+}();
+var $author$project$Page$Tab$viewFunctions = function () {
+	var viewTab = F6(
+		function (style, selected, options, onSelect, _v1, _v2) {
+			var palette = _v1.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.tab',
+				A2(
+					$author$project$Widget$tab,
+					style(palette),
+					{
+						content: function (s) {
+							return $mdgriffith$elm_ui$Element$text(
+								function () {
+									_v0$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 _v0$3;
+											}
+										} else {
+											break _v0$3;
+										}
+									}
+									return 'Please select a tab';
+								}());
+						},
+						tabs: {onSelect: onSelect, options: options, selected: selected}
+					}));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewTab]));
+}();
+var $author$project$Page$Tab$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With event handler',
+			_Utils_Tuple2(
+				$elm$core$Basics$always(
+					$elm$core$Maybe$Just(_Utils_Tuple0)),
+				$elm$core$Basics$always($elm$core$Maybe$Nothing)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$optionListStory,
+				'Options',
+				_Utils_Tuple2(
+					'3 Option',
+					_List_fromArray(
+						[
+							{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							text: '42'
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: ''
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: '42'
+						}
+						])),
+				_List_fromArray(
+					[
+						_Utils_Tuple2(
+						'2 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: '42'
+							},
+								{
+								icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+								text: ''
+							}
+							])),
+						_Utils_Tuple2(
+						'1 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: '42'
+							}
+							]))
+					])),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Selected',
+					_Utils_Tuple2(
+						'Third',
+						$elm$core$Maybe$Just(2)),
+					_List_fromArray(
+						[
+							_Utils_Tuple2(
+							'Second',
+							$elm$core$Maybe$Just(1)),
+							_Utils_Tuple2(
+							'First',
+							$elm$core$Maybe$Just(0)),
+							_Utils_Tuple2('Nothing or Invalid', $elm$core$Maybe$Nothing)
+						])),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('Tab', $author$project$Widget$Material$tab),
+						_List_Nil),
+					A2(
+						$author$project$UIExplorer$Story$book,
+						$elm$core$Maybe$Just('Options'),
+						$author$project$Page$Tab$viewFunctions))))));
+var $author$project$Page$Tab$Selected = function (a) {
+	return {$: 'Selected', a: a};
+};
+var $author$project$Page$Tab$init = _Utils_Tuple2(
+	$author$project$Page$Tab$Selected($elm$core$Maybe$Nothing),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$Tab$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Tab$update = F2(
+	function (msg, _v0) {
+		var _int = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Page$Tab$Selected(
+				$elm$core$Maybe$Just(_int)),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Page$Tab$ChangedTab = function (a) {
 	return {$: 'ChangedTab', a: a};
 };
-var $author$project$Example$Tab$view = F3(
-	function (msgMapper, style, _v0) {
-		var selected = _v0.a;
+var $author$project$Page$Tab$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var selected = _v1.a;
 		return A2(
 			$author$project$Widget$tab,
-			style.tab,
+			$author$project$Widget$Material$tab(palette),
 			{
 				content: function (s) {
 					return $mdgriffith$elm_ui$Element$text(
 						function () {
-							_v1$3:
+							_v2$3:
 							while (true) {
 								if (s.$ === 'Just') {
 									switch (s.a) {
@@ -23282,20 +26587,17 @@ var $author$project$Example$Tab$view = F3(
 										case 2:
 											return 'The thrid and last tab';
 										default:
-											break _v1$3;
+											break _v2$3;
 									}
 								} else {
-									break _v1$3;
+									break _v2$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)),
+					onSelect: A2($elm$core$Basics$composeR, $author$project$Page$Tab$ChangedTab, $elm$core$Maybe$Just),
 					options: A2(
 						$elm$core$List$map,
 						function (_int) {
@@ -23310,10 +26612,149 @@ var $author$project$Example$Tab$view = F3(
 				}
 			});
 	});
-var $author$project$Example$TextInput$SetTextInput = function (a) {
+var $author$project$Page$Tab$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Tab$init),
+	subscriptions: $author$project$Page$Tab$subscriptions,
+	update: $author$project$Page$Tab$update,
+	view: $author$project$Page$demo($author$project$Page$Tab$view)
+};
+var $author$project$Page$Tab$description = 'Tabs organize content across different screens, data sets, and other interactions.';
+var $author$project$Page$Tab$title = 'Tab';
+var $author$project$Page$Tab$page = $author$project$Page$create(
+	{book: $author$project$Page$Tab$book, demo: $author$project$Page$Tab$demo, description: $author$project$Page$Tab$description, title: $author$project$Page$Tab$title});
+var $author$project$Page$TextInput$viewFunctions = function () {
+	var viewInput = F6(
+		function (chips, text, placeholder, label, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.currentPasswordInput',
+				A2(
+					$author$project$Widget$textInput,
+					$author$project$Widget$Material$textInput(palette),
+					{
+						chips: chips,
+						label: label,
+						onChange: $elm$core$Basics$always(_Utils_Tuple0),
+						placeholder: placeholder,
+						text: text
+					}));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewInput]));
+}();
+var $author$project$Page$TextInput$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A2($author$project$UIExplorer$Story$textStory, 'Label', 'Name'),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'Placeholder',
+				_Utils_Tuple2(
+					$elm$core$Maybe$Just(
+						A2(
+							$mdgriffith$elm_ui$Element$Input$placeholder,
+							_List_Nil,
+							$mdgriffith$elm_ui$Element$text('password'))),
+					$elm$core$Maybe$Nothing),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A2($author$project$UIExplorer$Story$textStory, 'Text', '123456789'),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Chips',
+						_Utils_Tuple2(
+							'3 Chips',
+							_List_fromArray(
+								[
+									{
+									icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+									onPress: $elm$core$Maybe$Nothing,
+									text: 'Apples'
+								},
+									{
+									icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+									onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+									text: ''
+								},
+									{
+									icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+									onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+									text: 'Oranges'
+								}
+								])),
+						_List_fromArray(
+							[
+								_Utils_Tuple2(
+								'2 Chips',
+								_List_fromArray(
+									[
+										{
+										icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+										onPress: $elm$core$Maybe$Nothing,
+										text: 'Apples'
+									},
+										{
+										icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+										onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+										text: ''
+									}
+									])),
+								_Utils_Tuple2(
+								'1 Chips',
+								_List_fromArray(
+									[
+										{
+										icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+										onPress: $elm$core$Maybe$Nothing,
+										text: 'Apples'
+									}
+									])),
+								_Utils_Tuple2('None', _List_Nil)
+							])),
+					A2(
+						$author$project$UIExplorer$Story$book,
+						$elm$core$Maybe$Just('Options'),
+						$author$project$Page$TextInput$viewFunctions))))));
+var $author$project$Page$TextInput$init = _Utils_Tuple2(
+	{chipTextInput: $elm$core$Set$empty, textInput: ''},
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$TextInput$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$TextInput$update = F2(
+	function (msg, model) {
+		if (msg.$ === 'ToggleTextInputChip') {
+			var string = msg.a;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{
+						chipTextInput: (A2($elm$core$Set$member, string, model.chipTextInput) ? $elm$core$Set$remove(string) : $elm$core$Set$insert(string))(model.chipTextInput)
+					}),
+				$elm$core$Platform$Cmd$none);
+		} else {
+			var string = msg.a;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{textInput: string}),
+				$elm$core$Platform$Cmd$none);
+		}
+	});
+var $author$project$Page$TextInput$SetTextInput = function (a) {
 	return {$: 'SetTextInput', a: a};
 };
-var $author$project$Example$TextInput$ToggleTextInputChip = function (a) {
+var $author$project$Page$TextInput$ToggleTextInputChip = function (a) {
 	return {$: 'ToggleTextInputChip', a: a};
 };
 var $elm$core$Dict$diff = F2(
@@ -23334,16 +26775,17 @@ var $elm$core$Set$diff = F2(
 		return $elm$core$Set$Set_elm_builtin(
 			A2($elm$core$Dict$diff, dict1, dict2));
 	});
-var $author$project$Example$TextInput$view = F3(
-	function (msgMapper, style, model) {
+var $author$project$Page$TextInput$view = F2(
+	function (_v0, model) {
+		var palette = _v0.palette;
 		return A2(
 			$author$project$Widget$column,
-			style.column,
+			$author$project$Widget$Material$column,
 			_List_fromArray(
 				[
 					A2(
 					$author$project$Widget$textInput,
-					style.textInput,
+					$author$project$Widget$Material$textInput(palette),
 					{
 						chips: A2(
 							$elm$core$List$map,
@@ -23351,14 +26793,13 @@ var $author$project$Example$TextInput$view = F3(
 								return {
 									icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
 									onPress: $elm$core$Maybe$Just(
-										msgMapper(
-											$author$project$Example$TextInput$ToggleTextInputChip(string))),
+										$author$project$Page$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),
+						onChange: $author$project$Page$TextInput$SetTextInput,
 						placeholder: $elm$core$Maybe$Nothing,
 						text: model.textInput
 					}),
@@ -23373,12 +26814,11 @@ var $author$project$Example$TextInput$view = F3(
 						function (string) {
 							return A2(
 								$author$project$Widget$button,
-								style.textInput.content.chips.content,
+								$author$project$Widget$Material$textInput(palette).content.chips.content,
 								{
 									icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
 									onPress: $elm$core$Maybe$Just(
-										msgMapper(
-											$author$project$Example$TextInput$ToggleTextInputChip(string))),
+										$author$project$Page$TextInput$ToggleTextInputChip(string)),
 									text: string
 								});
 						},
@@ -23391,361 +26831,86 @@ var $author$project$Example$TextInput$view = F3(
 								model.chipTextInput))))
 				]));
 	});
-var $author$project$Data$Example$view = F3(
-	function (msgMapper, style, model) {
-		return {
-			appBar: A3(
-				$author$project$Example$AppBar$view,
-				A2($elm$core$Basics$composeR, $author$project$Data$Example$AppBar, msgMapper),
-				style,
-				function ($) {
-					return $.appBar;
-				}(model)),
-			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)),
-			icon: A3(
-				$author$project$Example$Icon$view,
-				A2($elm$core$Basics$composeR, $author$project$Data$Example$Icon, msgMapper),
-				style,
-				function ($) {
-					return $.icon;
-				}(model)),
-			layout: A3(
-				$author$project$Example$Layout$view,
-				A2($elm$core$Basics$composeR, $author$project$Data$Example$Layout, msgMapper),
-				style,
-				function ($) {
-					return $.layout;
-				}(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)),
-			progressIndicator: A3(
-				$author$project$Example$ProgressIndicator$view,
-				A2($elm$core$Basics$composeR, $author$project$Data$Example$ProgressIndicator, msgMapper),
-				style,
-				function ($) {
-					return $.progressIndicator;
-				}(model)),
-			select: A3(
-				$author$project$Example$Select$view,
-				A2($elm$core$Basics$composeR, $author$project$Data$Example$Select, msgMapper),
-				style,
-				function ($) {
-					return $.select;
-				}(model)),
-			sheet: A3(
-				$author$project$Example$Sheet$view,
-				A2($elm$core$Basics$composeR, $author$project$Data$Example$Sheet, msgMapper),
-				style,
-				function ($) {
-					return $.sheet;
-				}(model)),
-			snackbar: A3(
-				$author$project$Example$Snackbar$view,
-				A2($elm$core$Basics$composeR, $author$project$Data$Example$Snackbar, msgMapper),
-				style,
-				function ($) {
-					return $.snackbar;
-				}(model)),
-			sortTable: A3(
-				$author$project$Example$SortTable$view,
-				A2($elm$core$Basics$composeR, $author$project$Data$Example$SortTable, msgMapper),
-				style,
-				function ($) {
-					return $.sortTable;
-				}(model)),
-			_switch: A3(
-				$author$project$Example$Switch$view,
-				A2($elm$core$Basics$composeR, $author$project$Data$Example$Switch, msgMapper),
-				style,
-				function ($) {
-					return $._switch;
-				}(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(
-					$elm$core$List$map,
-					function (_v2) {
-						var name = _v2.a;
-						var elem = _v2.b;
-						return A2(
-							$mdgriffith$elm_ui$Element$row,
-							$Orasund$elm_ui_framework$Framework$Grid$spacedEvenly,
-							_List_fromArray(
-								[
-									A2(
-									$mdgriffith$elm_ui$Element$wrappedRow,
-									_List_fromArray(
-										[
-											$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
-										]),
-									$elm$core$List$singleton(
-										$mdgriffith$elm_ui$Element$text(name))),
-									A2(
-									$mdgriffith$elm_ui$Element$el,
-									_List_fromArray(
-										[
-											$mdgriffith$elm_ui$Element$paddingEach(
-											{bottom: 0, left: 8, right: 0, top: 0}),
-											$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
-										]),
-									elem)
-								]));
-					},
-					A2(test, idle, style)));
-		},
-		A2(
-			$elm$core$List$map,
-			function (example) {
-				return {
-					example: $author$project$Data$Example$get(example),
-					test: $author$project$Data$Example$toTests(example),
-					title: $author$project$Data$Example$toString(example)
-				};
-			},
-			$author$project$Data$Example$asList));
+var $author$project$Page$TextInput$demo = {
+	init: $elm$core$Basics$always($author$project$Page$TextInput$init),
+	subscriptions: $author$project$Page$TextInput$subscriptions,
+	update: $author$project$Page$TextInput$update,
+	view: $author$project$Page$demo($author$project$Page$TextInput$view)
 };
-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(
+var $author$project$Page$TextInput$description = 'Text fields let users enter and edit text.';
+var $author$project$Page$TextInput$title = 'Text Input';
+var $author$project$Page$TextInput$page = $author$project$Page$create(
+	{book: $author$project$Page$TextInput$book, demo: $author$project$Page$TextInput$demo, description: $author$project$Page$TextInput$description, title: $author$project$Page$TextInput$title});
+var $author$project$Main$pages = A3(
+	$author$project$UIExplorer$nextPage,
+	'Dialog',
+	$author$project$Page$Dialog$page,
+	A3(
+		$author$project$UIExplorer$nextPage,
+		'Icon',
+		$author$project$Page$Icon$page,
+		A3(
+			$author$project$UIExplorer$nextPage,
+			'App Bar',
+			$author$project$Page$AppBar$page,
+			A3(
+				$author$project$UIExplorer$nextPage,
+				'Modal',
+				$author$project$Page$Modal$page,
+				A3(
+					$author$project$UIExplorer$nextPage,
+					'ProgressIndicator',
+					$author$project$Page$ProgressIndicator$page,
+					A3(
+						$author$project$UIExplorer$nextPage,
+						'Item',
+						$author$project$Page$Item$page,
+						A3(
+							$author$project$UIExplorer$nextPage,
+							'Snackbar',
+							$author$project$Page$Snackbar$page,
+							A3(
+								$author$project$UIExplorer$nextPage,
+								'Sort Table',
+								$author$project$Page$SortTable$page,
+								A3(
+									$author$project$UIExplorer$nextPage,
+									'Text Input',
+									$author$project$Page$TextInput$page,
+									A3(
+										$author$project$UIExplorer$nextPage,
+										'Password Input',
+										$author$project$Page$PasswordInput$page,
+										A3(
+											$author$project$UIExplorer$nextPage,
+											'Tab',
+											$author$project$Page$Tab$page,
+											A3(
+												$author$project$UIExplorer$nextPage,
+												'Switch',
+												$author$project$Page$Switch$page,
+												A3(
+													$author$project$UIExplorer$nextPage,
+													'Multi Select',
+													$author$project$Page$MultiSelect$page,
+													A3(
+														$author$project$UIExplorer$nextPage,
+														'Select',
+														$author$project$Page$Select$page,
+														A2($author$project$UIExplorer$firstPage, 'Button', $author$project$Page$Button$page)))))))))))))));
+var $elm$json$Json$Decode$value = _Json_decodeValue;
+var $author$project$Main$main = function () {
+	var config = $author$project$UIExplorer$defaultConfig;
+	return A2(
+		$author$project$UIExplorer$application,
+		_Utils_update(
+			config,
 			{
-				idle: msgMapper($author$project$Stateless$Idle),
-				model: model.example,
-				msgMapper: A2($elm$core$Basics$composeR, $author$project$Stateless$ExampleSpecific, msgMapper),
-				style: style
+				sidebarTitle: $mdgriffith$elm_ui$Element$text('Elm UI Widgets')
 			}),
-		title: 'Stateless Views'
-	};
-};
-var $author$project$Main$viewLoaded = function (m) {
-	var style = $author$project$Data$Theme$toStyle(m.theme);
-	return A2(
-		$mdgriffith$elm_ui$Element$column,
-		$Orasund$elm_ui_framework$Framework$Grid$compact,
-		_List_fromArray(
-			[
-				A2(
-				$mdgriffith$elm_ui$Element$el,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height(
-						$mdgriffith$elm_ui$Element$px(42))
-					]),
-				$mdgriffith$elm_ui$Element$none),
-				A2(
-				$mdgriffith$elm_ui$Element$column,
-				_Utils_ap($Orasund$elm_ui_framework$Framework$container, style.container),
-				A2(
-					$elm$core$List$map,
-					function (section) {
-						return function (_v1) {
-							var title = _v1.title;
-							var description = _v1.description;
-							var items = _v1.items;
-							return A2(
-								$mdgriffith$elm_ui$Element$column,
-								_Utils_ap(
-									$Orasund$elm_ui_framework$Framework$Grid$section,
-									_List_fromArray(
-										[$mdgriffith$elm_ui$Element$centerX])),
-								_List_fromArray(
-									[
-										A2(
-										$mdgriffith$elm_ui$Element$el,
-										$Orasund$elm_ui_framework$Framework$Heading$h2,
-										$mdgriffith$elm_ui$Element$text(title)),
-										(m.search.current === '') ? A2(
-										$mdgriffith$elm_ui$Element$paragraph,
-										_List_Nil,
-										$elm$core$List$singleton(
-											$mdgriffith$elm_ui$Element$text(description))) : $mdgriffith$elm_ui$Element$none,
-										A2(
-										$mdgriffith$elm_ui$Element$wrappedRow,
-										_Utils_ap(
-											$Orasund$elm_ui_framework$Framework$Grid$simple,
-											_List_fromArray(
-												[
-													$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
-												])),
-										A2(
-											$elm$core$List$map,
-											function (_v3) {
-												var name = _v3.a;
-												var elem = _v3.b;
-												var more = _v3.c;
-												return A2(
-													$author$project$Widget$itemList,
-													style.cardColumn,
-													A2(
-														$elm$core$List$cons,
-														$author$project$Widget$asItem(
-															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
-																	]))),
-														$elm$core$List$isEmpty(more) ? _List_Nil : _Utils_ap(
-															_List_fromArray(
-																[
-																	$author$project$Widget$divider(style.fullBleedDivider)
-																]),
-															A2(
-																$author$project$Widget$expansionItem,
-																style.expansionItem,
-																{
-																	content: $elm$core$List$singleton(
-																		$author$project$Widget$asItem(
-																			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)
-																						])),
-																				more))),
-																	icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-																	isExpanded: A2(
-																		$elm$core$Maybe$withDefault,
-																		false,
-																		A2(
-																			$elm$core$Maybe$map,
-																			function (example) {
-																				return A2($turboMaCk$any_set$Set$Any$member, example, m.expanded);
-																			},
-																			$author$project$Data$Example$fromString(name))),
-																	onToggle: $elm$core$Basics$always(
-																		A2(
-																			$elm$core$Maybe$withDefault,
-																			$author$project$Main$Idle,
-																			A2(
-																				$elm$core$Maybe$map,
-																				$author$project$Main$ToggledExample,
-																				$author$project$Data$Example$fromString(name)))),
-																	text: 'States'
-																}))));
-											},
-											((m.search.current !== '') ? $elm$core$List$filter(
-												function (_v2) {
-													var a = _v2.a;
-													return A2(
-														$elm$core$String$contains,
-														$elm$core$String$toLower(m.search.current),
-														$elm$core$String$toLower(a));
-												}) : $elm$core$Basics$identity)(items)))
-									]));
-						}(
-							function () {
-								if (section.$ === 'ReusableViews') {
-									return $author$project$Reusable$view(
-										{addSnackbar: $author$project$Main$AddSnackbar, theme: m.theme});
-								} else {
-									return $author$project$Stateless$view(
-										{model: m.stateless, msgMapper: $author$project$Main$StatelessSpecific, theme: m.theme});
-								}
-							}());
-					},
-					_List_fromArray(
-						[$author$project$Data$Section$StatelessViews, $author$project$Data$Section$ReusableViews])))
-			]));
-};
-var $author$project$Main$view = function (model) {
-	if (model.$ === 'Loading') {
-		return A2($Orasund$elm_ui_framework$Framework$responsiveLayout, _List_Nil, $mdgriffith$elm_ui$Element$none);
-	} else {
-		var m = model.a;
-		var style = $author$project$Data$Theme$toStyle(m.theme);
-		return A2(
-			$elm$html$Html$map,
-			$author$project$Main$LoadedSpecific,
-			A2(
-				$mdgriffith$elm_ui$Element$layout,
-				A3($author$project$Main$viewLayout, $elm$core$Basics$identity, style, m),
-				$author$project$Main$viewLoaded(m)));
-	}
-};
-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));
+		$author$project$Main$pages);
+}();
+_Platform_export({'Main':{'init':$author$project$Main$main($elm$json$Json$Decode$value)(0)}});}(this));
 
   var app = Elm.Main.init({ node: document.getElementById("elm") });
 }
diff --git a/explorer/index.html b/explorer/index.html
index 7a29240..96473fc 100644
--- a/explorer/index.html
+++ b/explorer/index.html
@@ -4423,6 +4423,52 @@ var _Bitwise_shiftRightZfBy = F2(function(offset, a)
 {
 	return a >>> offset;
 });
+
+
+
+function _Time_now(millisToPosix)
+{
+	return _Scheduler_binding(function(callback)
+	{
+		callback(_Scheduler_succeed(millisToPosix(Date.now())));
+	});
+}
+
+var _Time_setInterval = F2(function(interval, task)
+{
+	return _Scheduler_binding(function(callback)
+	{
+		var id = setInterval(function() { _Scheduler_rawSpawn(task); }, interval);
+		return function() { clearInterval(id); };
+	});
+});
+
+function _Time_here()
+{
+	return _Scheduler_binding(function(callback)
+	{
+		callback(_Scheduler_succeed(
+			A2($elm$time$Time$customZone, -(new Date().getTimezoneOffset()), _List_Nil)
+		));
+	});
+}
+
+
+function _Time_getZoneName()
+{
+	return _Scheduler_binding(function(callback)
+	{
+		try
+		{
+			var name = $elm$time$Time$Name(Intl.DateTimeFormat().resolvedOptions().timeZone);
+		}
+		catch (e)
+		{
+			var name = $elm$time$Time$Offset(new Date().getTimezoneOffset());
+		}
+		callback(_Scheduler_succeed(name));
+	});
+}
 var $author$project$UIExplorer$LinkClicked = function (a) {
 	return {$: 'LinkClicked', a: a};
 };
@@ -6234,7 +6280,7 @@ var $author$project$UIExplorer$init = F5(
 				$author$project$UIExplorer$FlagsParsed(
 					{
 						colorBlindOption: $elm$core$Maybe$Nothing,
-						darkThemeEnabled: true,
+						darkThemeEnabled: false,
 						expandColorBlindOptions: false,
 						expandPageSizeOptions: false,
 						expandedGroups: A2($author$project$UIExplorer$expandPage, page, $elm$core$Set$empty),
@@ -6275,9 +6321,7 @@ var $author$project$UIExplorer$init = F5(
 			var error = _v2.a;
 			return _Utils_Tuple2(
 				$author$project$UIExplorer$FlagsDidNotParse(
-					{
-						errorMessage: $elm$json$Json$Decode$errorToString(error)
-					}),
+					$elm$json$Json$Decode$errorToString(error)),
 				$elm$core$Platform$Cmd$none);
 		}
 	});
@@ -12709,32 +12753,13 @@ var $mdgriffith$elm_ui$Element$layoutWith = F3(
 				_Utils_ap($mdgriffith$elm_ui$Internal$Model$rootStyle, attrs)),
 			child);
 	});
+var $mdgriffith$elm_ui$Element$Desktop = {$: 'Desktop'};
+var $author$project$UIExplorer$PressedToggleSidebar = {$: 'PressedToggleSidebar'};
 var $mdgriffith$elm_ui$Internal$Model$AlignY = function (a) {
 	return {$: 'AlignY', a: a};
 };
 var $mdgriffith$elm_ui$Internal$Model$Top = {$: 'Top'};
 var $mdgriffith$elm_ui$Element$alignTop = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$Top);
-var $mdgriffith$elm_ui$Internal$Model$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$Internal$Model$Behind = {$: 'Behind'};
 var $mdgriffith$elm_ui$Internal$Model$Nearby = F2(
 	function (a, b) {
@@ -12757,6 +12782,11 @@ var $mdgriffith$elm_ui$Element$rgb = F3(
 		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, r, g, b, 1);
 	});
 var $author$project$UIExplorer$black = A3($mdgriffith$elm_ui$Element$rgb, 0, 0, 0);
+var $mdgriffith$elm_ui$Internal$Model$AlignX = function (a) {
+	return {$: 'AlignX', a: 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 $author$project$UIExplorer$colorBlindOptionToCssClass = function (colorBlindOption) {
 	switch (colorBlindOption.$) {
 		case 'Protanopia':
@@ -13041,12 +13071,77 @@ var $author$project$UIExplorer$contentSize = function (model) {
 				$author$project$UIExplorer$pageSizeOptionWidth(model.pageSizeOption)))
 	};
 };
-var $mdgriffith$elm_ui$Element$fillPortion = $mdgriffith$elm_ui$Internal$Model$Fill;
-var $mdgriffith$elm_ui$Element$htmlAttribute = $mdgriffith$elm_ui$Internal$Model$Attr;
-var $mdgriffith$elm_ui$Internal$Model$InFront = {$: 'InFront'};
-var $mdgriffith$elm_ui$Element$inFront = function (element) {
-	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$InFront, element);
+var $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$Internal$Material$Palette$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$Material$darkPalette = $author$project$Internal$Material$Palette$darkPalette;
+var $author$project$Internal$Material$Palette$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 $author$project$Widget$Material$defaultPalette = $author$project$Internal$Material$Palette$defaultPalette;
+var $mdgriffith$elm_ui$Element$fillPortion = $mdgriffith$elm_ui$Internal$Model$Fill;
+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$Internal$Model$Class = F2(
+	function (a, b) {
+		return {$: 'Class', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Internal$Flag$fontWeight = $mdgriffith$elm_ui$Internal$Flag$flag(13);
+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$Material$Typography$h6 = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Font$size(20),
+		$mdgriffith$elm_ui$Element$Font$semiBold,
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.15)
+	]);
+var $mdgriffith$elm_ui$Element$htmlAttribute = $mdgriffith$elm_ui$Internal$Model$Attr;
 var $ianmackenzie$elm_units$Pixels$inPixels = function (_v0) {
 	var numPixels = _v0.a;
 	return numPixels;
@@ -13086,58 +13181,6 @@ var $mdgriffith$elm_ui$Internal$Model$map = F2(
 		}
 	});
 var $mdgriffith$elm_ui$Element$map = $mdgriffith$elm_ui$Internal$Model$map;
-var $mdgriffith$elm_ui$Element$none = $mdgriffith$elm_ui$Internal$Model$Empty;
-var $mdgriffith$elm_ui$Internal$Model$Px = function (a) {
-	return {$: 'Px', a: a};
-};
-var $mdgriffith$elm_ui$Element$px = $mdgriffith$elm_ui$Internal$Model$Px;
-var $mdgriffith$elm_ui$Internal$Model$AsRow = {$: 'AsRow'};
-var $mdgriffith$elm_ui$Internal$Model$asRow = $mdgriffith$elm_ui$Internal$Model$AsRow;
-var $mdgriffith$elm_ui$Element$row = F2(
-	function (attrs, children) {
-		return A4(
-			$mdgriffith$elm_ui$Internal$Model$element,
-			$mdgriffith$elm_ui$Internal$Model$asRow,
-			$mdgriffith$elm_ui$Internal$Model$div,
-			A2(
-				$elm$core$List$cons,
-				$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentLeft + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.contentCenterY)),
-				A2(
-					$elm$core$List$cons,
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
-					A2(
-						$elm$core$List$cons,
-						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
-						attrs))),
-			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
-	});
-var $elm$core$List$singleton = function (value) {
-	return _List_fromArray(
-		[value]);
-};
-var $author$project$UIExplorer$ChangeDarkTheme = function (a) {
-	return {$: 'ChangeDarkTheme', a: a};
-};
-var $author$project$UIExplorer$PressedToggleSidebar = {$: 'PressedToggleSidebar'};
-var $author$project$UIExplorer$TypingSearchText = function (a) {
-	return {$: 'TypingSearchText', a: a};
-};
-var $author$project$Internal$Item$toItem = F2(
-	function (style, element) {
-		return function (attr) {
-			return A2(
-				$mdgriffith$elm_ui$Element$el,
-				_Utils_ap(attr, style.element),
-				element(style.content));
-		};
-	});
-var $author$project$Internal$Item$asItem = function (element) {
-	return A2(
-		$author$project$Internal$Item$toItem,
-		{content: _Utils_Tuple0, element: _List_Nil},
-		$elm$core$Basics$always(element));
-};
-var $author$project$Widget$asItem = $author$project$Internal$Item$asItem;
 var $mdgriffith$elm_ui$Internal$Model$Button = {$: 'Button'};
 var $elm$json$Json$Encode$bool = _Json_wrap;
 var $elm$html$Html$Attributes$boolProperty = F2(
@@ -13215,10 +13258,6 @@ var $mdgriffith$elm_ui$Element$Input$onKey = F2(
 var $mdgriffith$elm_ui$Element$Input$onEnter = function (msg) {
 	return A2($mdgriffith$elm_ui$Element$Input$onKey, $mdgriffith$elm_ui$Element$Input$enter, msg);
 };
-var $mdgriffith$elm_ui$Internal$Model$Class = F2(
-	function (a, b) {
-		return {$: 'Class', a: a, b: b};
-	});
 var $mdgriffith$elm_ui$Internal$Flag$cursor = $mdgriffith$elm_ui$Internal$Flag$flag(21);
 var $mdgriffith$elm_ui$Element$pointer = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$cursor, $mdgriffith$elm_ui$Internal$Style$classes.cursorPointer);
 var $elm$html$Html$Attributes$tabindex = function (n) {
@@ -13279,1451 +13318,56 @@ var $mdgriffith$elm_ui$Element$Input$button = F2(
 				_List_fromArray(
 					[label])));
 	});
-var $mdgriffith$elm_ui$Internal$Model$AlignX = function (a) {
-	return {$: 'AlignX', a: 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 $mdgriffith$elm_ui$Internal$Model$CenterY = {$: 'CenterY'};
-var $mdgriffith$elm_ui$Element$centerY = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$CenterY);
-var $author$project$UIExplorer$PressedColorBlindOption = function (a) {
-	return {$: 'PressedColorBlindOption', a: a};
-};
-var $author$project$UIExplorer$ToggledColorBlindGroup = {$: 'ToggledColorBlindGroup'};
-var $author$project$UIExplorer$colorBlindOptionToString = function (colorBlindOption) {
-	switch (colorBlindOption.$) {
-		case 'Protanopia':
-			return 'Protanopia';
-		case 'Protanomaly':
-			return 'Protanomaly';
-		case 'Deuteranopia':
-			return 'Deuteranopia';
-		case 'Deuteranomaly':
-			return 'Deuteranomaly';
-		case 'Tritanopia':
-			return 'Tritanopia';
-		case 'Tritanomaly':
-			return 'Tritanomaly';
-		case 'Achromatopsia':
-			return 'Achromatopsia';
-		case 'Achromatomaly':
-			return 'Achromatomaly';
-		default:
-			return 'Blind';
-	}
-};
-var $elm$core$Basics$composeR = F3(
-	function (f, g, x) {
-		return g(
-			f(x));
-	});
-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$Internal$Material$Palette$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$Material$darkPalette = $author$project$Internal$Material$Palette$darkPalette;
-var $author$project$UIExplorer$darkerGray = A3($mdgriffith$elm_ui$Element$rgb255, 20, 30, 40);
-var $author$project$Internal$Material$Palette$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 $author$project$Widget$Material$defaultPalette = $author$project$Internal$Material$Palette$defaultPalette;
-var $mdgriffith$elm_ui$Internal$Model$Paragraph = {$: 'Paragraph'};
-var $mdgriffith$elm_ui$Element$paragraph = F2(
-	function (attrs, children) {
-		return A4(
-			$mdgriffith$elm_ui$Internal$Model$element,
-			$mdgriffith$elm_ui$Internal$Model$asParagraph,
-			$mdgriffith$elm_ui$Internal$Model$div,
-			A2(
-				$elm$core$List$cons,
-				$mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$Paragraph),
-				A2(
-					$elm$core$List$cons,
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					A2(
-						$elm$core$List$cons,
-						$mdgriffith$elm_ui$Element$spacing(5),
-						attrs))),
-			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
-	});
-var $author$project$Internal$Item$insetItem = F2(
-	function (s, _v0) {
-		var onPress = _v0.onPress;
-		var text = _v0.text;
-		var icon = _v0.icon;
-		var content = _v0.content;
-		return A2(
-			$author$project$Internal$Item$toItem,
-			s,
-			function (style) {
-				return A2(
-					$mdgriffith$elm_ui$Element$Input$button,
-					_Utils_ap(
-						style.elementButton,
-						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
-					{
-						label: A2(
-							$mdgriffith$elm_ui$Element$row,
-							style.content.elementRow,
-							_List_fromArray(
-								[
-									A2(
-									$mdgriffith$elm_ui$Element$el,
-									style.content.content.icon.element,
-									icon(style.content.content.icon.content)),
-									A2(
-									$mdgriffith$elm_ui$Element$el,
-									style.content.content.text.elementText,
-									A2(
-										$mdgriffith$elm_ui$Element$paragraph,
-										_List_Nil,
-										$elm$core$List$singleton(
-											$mdgriffith$elm_ui$Element$text(text)))),
-									content(style.content.content.content)
-								])),
-						onPress: onPress
-					});
-			});
-	});
-var $author$project$Internal$Item$expansionItem = F2(
-	function (s, _v0) {
-		var icon = _v0.icon;
-		var text = _v0.text;
-		var onToggle = _v0.onToggle;
-		var content = _v0.content;
-		var isExpanded = _v0.isExpanded;
-		return A2(
-			$elm$core$List$cons,
-			A2(
-				$author$project$Internal$Item$insetItem,
-				s.item,
-				{
-					content: isExpanded ? s.collapseIcon : s.expandIcon,
-					icon: icon,
-					onPress: $elm$core$Maybe$Just(
-						onToggle(!isExpanded)),
-					text: text
-				}),
-			isExpanded ? content : _List_Nil);
-	});
-var $author$project$Widget$expansionItem = function () {
-	var fun = $author$project$Internal$Item$expansionItem;
-	return fun;
-}();
-var $elm$svg$Svg$Attributes$d = _VirtualDom_attribute('d');
-var $elm$svg$Svg$Attributes$fill = _VirtualDom_attribute('fill');
-var $elm$svg$Svg$Attributes$height = _VirtualDom_attribute('height');
-var $elm$svg$Svg$Attributes$stroke = _VirtualDom_attribute('stroke');
-var $avh4$elm_color$Color$toCssString = function (_v0) {
-	var r = _v0.a;
-	var g = _v0.b;
-	var b = _v0.c;
-	var a = _v0.d;
-	var roundTo = function (x) {
-		return $elm$core$Basics$round(x * 1000) / 1000;
-	};
-	var pct = function (x) {
-		return $elm$core$Basics$round(x * 10000) / 100;
-	};
-	return $elm$core$String$concat(
-		_List_fromArray(
-			[
-				'rgba(',
-				$elm$core$String$fromFloat(
-				pct(r)),
-				'%,',
-				$elm$core$String$fromFloat(
-				pct(g)),
-				'%,',
-				$elm$core$String$fromFloat(
-				pct(b)),
-				'%,',
-				$elm$core$String$fromFloat(
-				roundTo(a)),
-				')'
-			]));
-};
-var $elm$svg$Svg$Attributes$viewBox = _VirtualDom_attribute('viewBox');
-var $elm$svg$Svg$Attributes$width = _VirtualDom_attribute('width');
-var $author$project$Internal$Material$Icon$icon = function (_v0) {
-	var viewBox = _v0.viewBox;
-	var size = _v0.size;
-	var color = _v0.color;
-	return A2(
-		$elm$core$Basics$composeR,
-		$elm$svg$Svg$svg(
-			_List_fromArray(
-				[
-					$elm$svg$Svg$Attributes$height(
-					$elm$core$String$fromInt(size)),
-					$elm$svg$Svg$Attributes$stroke(
-					$avh4$elm_color$Color$toCssString(color)),
-					$elm$svg$Svg$Attributes$fill(
-					$avh4$elm_color$Color$toCssString(color)),
-					$elm$svg$Svg$Attributes$viewBox(viewBox),
-					$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$svg$Svg$path = $elm$svg$Svg$trustedNode('path');
-var $author$project$Internal$Material$Icon$expand_less = function (_v0) {
-	var size = _v0.size;
-	var color = _v0.color;
-	return A2(
-		$author$project$Internal$Material$Icon$icon,
-		{color: color, size: size, viewBox: '0 0 48 48'},
-		_List_fromArray(
-			[
-				A2(
-				$elm$svg$Svg$path,
-				_List_fromArray(
-					[
-						$elm$svg$Svg$Attributes$d('M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z')
-					]),
-				_List_Nil)
-			]));
-};
-var $author$project$Internal$Material$Icon$expand_more = function (_v0) {
-	var size = _v0.size;
-	var color = _v0.color;
-	return A2(
-		$author$project$Internal$Material$Icon$icon,
-		{color: color, size: size, viewBox: '0 0 48 48'},
-		_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$Material$Color$buttonFocusOpacity = 0.24;
-var $author$project$Widget$Material$Color$buttonHoverOpacity = 0.08;
-var $author$project$Widget$Material$Color$buttonPressedOpacity = 0.32;
-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 $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$Material$Color$fromColor = A2($elm$core$Basics$composeR, $avh4$elm_color$Color$toRgba, $mdgriffith$elm_ui$Element$fromRgb);
-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 $elm$core$Basics$clamp = F3(
-	function (low, high, number) {
-		return (_Utils_cmp(number, low) < 0) ? low : ((_Utils_cmp(number, high) > 0) ? high : number);
-	});
-var $elm$core$Basics$pow = _Basics_pow;
-var $avh4$elm_color$Color$rgb = F3(
-	function (r, g, b) {
-		return A4($avh4$elm_color$Color$RgbaSpace, r, g, b, 1.0);
-	});
-var $noahzgordon$elm_color_extra$Color$Convert$xyzToColor = function (_v0) {
-	var x = _v0.x;
-	var y = _v0.y;
-	var z = _v0.z;
-	var z_ = z / 100;
-	var y_ = y / 100;
-	var x_ = x / 100;
-	var r = ((x_ * 3.2404542) + (y_ * (-1.5371385))) + (z_ * (-0.4986));
-	var g = ((x_ * (-0.969266)) + (y_ * 1.8760108)) + (z_ * 4.1556e-2);
-	var c = function (ch) {
-		var ch_ = (ch > 3.1308e-3) ? ((1.055 * A2($elm$core$Basics$pow, ch, 1 / 2.4)) - 5.5e-2) : (12.92 * ch);
-		return A3($elm$core$Basics$clamp, 0, 1, ch_);
-	};
-	var b = ((x_ * 5.56434e-2) + (y_ * (-0.2040259))) + (z_ * 1.0572252);
-	return A3(
-		$avh4$elm_color$Color$rgb,
-		c(r),
-		c(g),
-		c(b));
-};
-var $noahzgordon$elm_color_extra$Color$Convert$labToColor = A2($elm$core$Basics$composeR, $noahzgordon$elm_color_extra$Color$Convert$labToXyz, $noahzgordon$elm_color_extra$Color$Convert$xyzToColor);
-var $elm$core$Basics$sin = _Basics_sin;
-var $author$project$Widget$Material$Color$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 $avh4$elm_color$Color$fromRgba = function (components) {
-	return A4($avh4$elm_color$Color$RgbaSpace, components.red, components.green, components.blue, components.alpha);
-};
-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$Material$Color$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$Material$Color$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$Material$Color$fromCIELCH(
-						A2(
-							fun,
-							$author$project$Widget$Material$Color$toCIELCH(c1),
-							$author$project$Widget$Material$Color$toCIELCH(c2))))));
-	});
-var $author$project$Internal$Material$Palette$gray = function (palette) {
-	return A3($author$project$Widget$Material$Color$withShade, palette.on.surface, 0.5, palette.surface);
-};
-var $mdgriffith$elm_ui$Internal$Model$Active = {$: 'Active'};
-var $mdgriffith$elm_ui$Internal$Flag$active = $mdgriffith$elm_ui$Internal$Flag$flag(32);
-var $mdgriffith$elm_ui$Element$mouseDown = function (decs) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$active,
-		A2(
-			$mdgriffith$elm_ui$Internal$Model$PseudoSelector,
-			$mdgriffith$elm_ui$Internal$Model$Active,
-			$mdgriffith$elm_ui$Internal$Model$unwrapDecorations(decs)));
-};
-var $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 $author$project$Widget$Material$Color$scaleOpacity = function (opacity) {
-	return A2(
-		$elm$core$Basics$composeR,
-		$avh4$elm_color$Color$toRgba,
-		A2(
-			$elm$core$Basics$composeR,
-			function (color) {
-				return _Utils_update(
-					color,
-					{alpha: color.alpha * opacity});
-			},
-			$avh4$elm_color$Color$fromRgba));
-};
-var $author$project$Internal$Material$Item$insetItem = function (palette) {
-	return {
-		content: {
-			content: {
-				content: {
-					content: {
-						color: $author$project$Internal$Material$Palette$gray(palette),
-						size: 24
-					},
-					icon: {
-						content: {
-							color: $author$project$Internal$Material$Palette$gray(palette),
-							size: 24
-						},
-						element: _List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width(
-								$mdgriffith$elm_ui$Element$px(40)),
-								$mdgriffith$elm_ui$Element$height(
-								$mdgriffith$elm_ui$Element$px(24))
-							])
-					},
-					text: {
-						elementText: _List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-							])
-					}
-				},
-				elementRow: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$spacing(16),
-						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-					])
-			},
-			elementButton: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					$mdgriffith$elm_ui$Element$padding(16)
-				]),
-			ifDisabled: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$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', 'default'))
-				]),
-			otherwise: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2(
-									$author$project$Widget$Material$Color$scaleOpacity,
-									$author$project$Widget$Material$Color$buttonPressedOpacity,
-									$author$project$Internal$Material$Palette$gray(palette))))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2(
-									$author$project$Widget$Material$Color$scaleOpacity,
-									$author$project$Widget$Material$Color$buttonFocusOpacity,
-									$author$project$Internal$Material$Palette$gray(palette))))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2(
-									$author$project$Widget$Material$Color$scaleOpacity,
-									$author$project$Widget$Material$Color$buttonHoverOpacity,
-									$author$project$Internal$Material$Palette$gray(palette))))
-						]))
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$padding(0)
-			])
-	};
-};
-var $author$project$Internal$Material$Item$expansionItem = function (palette) {
-	return {
-		collapseIcon: $author$project$Internal$Material$Icon$expand_less,
-		expandIcon: $author$project$Internal$Material$Icon$expand_more,
-		item: $author$project$Internal$Material$Item$insetItem(palette)
-	};
-};
-var $author$project$Widget$Material$expansionItem = $author$project$Internal$Material$Item$expansionItem;
-var $author$project$Widget$insetItem = function () {
-	var fun = $author$project$Internal$Item$insetItem;
-	return fun;
-}();
-var $author$project$Widget$Material$insetItem = $author$project$Internal$Material$Item$insetItem;
-var $author$project$UIExplorer$lightBlue = A3($mdgriffith$elm_ui$Element$rgb255, 176, 208, 225);
-var $author$project$UIExplorer$optionGroupView = F7(
-	function (dark, isExpanded, selectedItem, items, itemToString, onPress, toggleExpand) {
-		var selectedColor = dark ? $author$project$UIExplorer$darkerGray : $author$project$UIExplorer$lightBlue;
-		var palette = dark ? $author$project$Widget$Material$darkPalette : $author$project$Widget$Material$defaultPalette;
-		return A2(
-			$author$project$Widget$expansionItem,
-			$author$project$Widget$Material$expansionItem(palette),
-			{
-				content: A2(
-					$elm$core$List$map,
-					function (option) {
-						return A2(
-							$author$project$Widget$insetItem,
-							$author$project$Widget$Material$insetItem(palette),
-							{
-								content: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-								onPress: $elm$core$Maybe$Just(
-									onPress(option)),
-								text: itemToString(option)
-							});
-					},
-					isExpanded ? items : _List_Nil),
-				icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-				isExpanded: isExpanded,
-				onToggle: $elm$core$Basics$always(toggleExpand),
-				text: itemToString(selectedItem)
-			});
-	});
-var $author$project$UIExplorer$colorBlindOptionView = F3(
-	function (dark, isExpanded, selectedColorBlindOption) {
-		return A7(
-			$author$project$UIExplorer$optionGroupView,
-			dark,
-			isExpanded,
-			selectedColorBlindOption,
-			A2(
-				$elm$core$List$cons,
-				$elm$core$Maybe$Nothing,
-				A2($elm$core$List$map, $elm$core$Maybe$Just, $author$project$UIExplorer$allColorBlindOptions)),
-			A2(
-				$elm$core$Basics$composeR,
-				$elm$core$Maybe$map($author$project$UIExplorer$colorBlindOptionToString),
-				$elm$core$Maybe$withDefault('No color blindness')),
-			$author$project$UIExplorer$PressedColorBlindOption,
-			$author$project$UIExplorer$ToggledColorBlindGroup);
-	});
-var $author$project$Internal$Item$divider = function (style) {
-	return A2(
-		$author$project$Internal$Item$toItem,
-		style,
-		function (_v0) {
-			var element = _v0.element;
-			return A2($mdgriffith$elm_ui$Element$el, element, $mdgriffith$elm_ui$Element$none);
-		});
-};
-var $author$project$Widget$divider = $author$project$Internal$Item$divider;
-var $author$project$Internal$Material$Palette$lightGray = function (palette) {
-	return A3($author$project$Widget$Material$Color$withShade, palette.on.surface, 0.14, palette.surface);
-};
-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 $author$project$Internal$Material$Item$fullBleedDivider = function (palette) {
-	return {
-		content: {
-			element: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					$mdgriffith$elm_ui$Element$height(
-					$mdgriffith$elm_ui$Element$px(1)),
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(
-						$author$project$Internal$Material$Palette$lightGray(palette)))
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-				$mdgriffith$elm_ui$Element$height(
-				$mdgriffith$elm_ui$Element$px(1)),
-				$mdgriffith$elm_ui$Element$padding(0),
-				$mdgriffith$elm_ui$Element$Border$width(0)
-			])
-	};
-};
-var $author$project$Widget$Material$fullBleedDivider = $author$project$Internal$Material$Item$fullBleedDivider;
-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 $mdgriffith$elm_ui$Element$paddingXY = F2(
-	function (x, y) {
-		if (_Utils_eq(x, y)) {
-			var f = x;
-			return A2(
-				$mdgriffith$elm_ui$Internal$Model$StyleClass,
-				$mdgriffith$elm_ui$Internal$Flag$padding,
-				A5(
-					$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-					'p-' + $elm$core$String$fromInt(x),
-					f,
-					f,
-					f,
-					f));
-		} else {
-			var yFloat = y;
-			var xFloat = x;
-			return A2(
-				$mdgriffith$elm_ui$Internal$Model$StyleClass,
-				$mdgriffith$elm_ui$Internal$Flag$padding,
-				A5(
-					$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-					'p-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y))),
-					yFloat,
-					xFloat,
-					yFloat,
-					xFloat));
-		}
-	});
-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$Internal$Flag$fontWeight = $mdgriffith$elm_ui$Internal$Flag$flag(13);
-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$Material$Typography$subtitle2 = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Font$size(14),
-		$mdgriffith$elm_ui$Element$Font$semiBold,
-		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.1)
-	]);
-var $author$project$Internal$Material$Palette$textGray = function (palette) {
-	return A3($author$project$Widget$Material$Color$withShade, palette.on.surface, 0.77, palette.surface);
-};
-var $mdgriffith$elm_ui$Element$Border$widthXY = F2(
-	function (x, y) {
-		return A2(
-			$mdgriffith$elm_ui$Internal$Model$StyleClass,
-			$mdgriffith$elm_ui$Internal$Flag$borderWidth,
-			A5(
-				$mdgriffith$elm_ui$Internal$Model$BorderWidth,
-				'b-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y))),
-				y,
-				x,
-				y,
-				x));
-	});
-var $mdgriffith$elm_ui$Element$Border$widthEach = function (_v0) {
-	var bottom = _v0.bottom;
-	var top = _v0.top;
-	var left = _v0.left;
-	var right = _v0.right;
-	return (_Utils_eq(top, bottom) && _Utils_eq(left, right)) ? (_Utils_eq(top, right) ? $mdgriffith$elm_ui$Element$Border$width(top) : A2($mdgriffith$elm_ui$Element$Border$widthXY, left, top)) : A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$borderWidth,
-		A5(
-			$mdgriffith$elm_ui$Internal$Model$BorderWidth,
-			'b-' + ($elm$core$String$fromInt(top) + ('-' + ($elm$core$String$fromInt(right) + ('-' + ($elm$core$String$fromInt(bottom) + ('-' + $elm$core$String$fromInt(left))))))),
-			top,
-			right,
-			bottom,
-			left));
-};
-var $author$project$Internal$Material$Item$fullBleedHeader = function (palette) {
-	return {
-		content: {
-			content: {
-				divider: {element: _List_Nil},
-				title: _Utils_ap(
-					$author$project$Widget$Material$Typography$subtitle2,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Font$color(
-							$author$project$Widget$Material$Color$fromColor(
-								$author$project$Internal$Material$Palette$textGray(palette))),
-							A2($mdgriffith$elm_ui$Element$paddingXY, 16, 8)
-						]))
-			},
-			elementColumn: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					$mdgriffith$elm_ui$Element$spacing(8)
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
-				$mdgriffith$elm_ui$Element$padding(0),
-				$mdgriffith$elm_ui$Element$Border$widthEach(
-				{bottom: 0, left: 0, right: 0, top: 1}),
-				$mdgriffith$elm_ui$Element$Border$color(
-				$author$project$Widget$Material$Color$fromColor(
-					$author$project$Internal$Material$Palette$lightGray(palette)))
-			])
-	};
-};
-var $author$project$Widget$Material$fullBleedHeader = $author$project$Internal$Material$Item$fullBleedHeader;
-var $author$project$Internal$Item$fullBleedItem = F2(
-	function (s, _v0) {
-		var onPress = _v0.onPress;
-		var text = _v0.text;
-		var icon = _v0.icon;
-		return A2(
-			$author$project$Internal$Item$toItem,
-			s,
-			function (style) {
-				return A2(
-					$mdgriffith$elm_ui$Element$Input$button,
-					_Utils_ap(
-						style.elementButton,
-						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
-					{
-						label: A2(
-							$mdgriffith$elm_ui$Element$row,
-							style.content.elementRow,
-							_List_fromArray(
-								[
-									A2(
-									$mdgriffith$elm_ui$Element$el,
-									style.content.content.text.elementText,
-									A2(
-										$mdgriffith$elm_ui$Element$paragraph,
-										_List_Nil,
-										$elm$core$List$singleton(
-											$mdgriffith$elm_ui$Element$text(text)))),
-									icon(style.content.content.icon)
-								])),
-						onPress: onPress
-					});
-			});
-	});
-var $author$project$Widget$fullBleedItem = function () {
-	var fun = $author$project$Internal$Item$fullBleedItem;
-	return fun;
-}();
-var $author$project$Internal$Material$Item$fullBleedItem = function (palette) {
-	var i = $author$project$Internal$Material$Item$insetItem(palette);
-	return {
-		content: {
-			content: {
-				content: {icon: i.content.content.content.content, text: i.content.content.content.text},
-				elementRow: i.content.content.elementRow
-			},
-			elementButton: i.content.elementButton,
-			ifDisabled: i.content.ifDisabled,
-			otherwise: i.content.otherwise
-		},
-		element: i.element
-	};
-};
-var $author$project$Widget$Material$fullBleedItem = $author$project$Internal$Material$Item$fullBleedItem;
-var $author$project$Widget$Material$Typography$h6 = _List_fromArray(
-	[
-		$mdgriffith$elm_ui$Element$Font$size(20),
-		$mdgriffith$elm_ui$Element$Font$semiBold,
-		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.15)
-	]);
-var $author$project$Internal$Item$headerItem = F2(
-	function (style, title) {
-		return A2(
-			$author$project$Internal$Item$toItem,
-			style,
-			function (_v0) {
-				var elementColumn = _v0.elementColumn;
-				var content = _v0.content;
-				return A2(
-					$mdgriffith$elm_ui$Element$column,
-					elementColumn,
-					_List_fromArray(
-						[
-							A2($mdgriffith$elm_ui$Element$el, content.divider.element, $mdgriffith$elm_ui$Element$none),
-							A2(
-							$mdgriffith$elm_ui$Element$el,
-							content.title,
-							$mdgriffith$elm_ui$Element$text(title))
-						]));
-			});
-	});
-var $author$project$Widget$headerItem = $author$project$Internal$Item$headerItem;
-var $mdgriffith$elm_ui$Internal$Model$paddingName = F4(
-	function (top, right, bottom, left) {
-		return 'pad-' + ($elm$core$String$fromInt(top) + ('-' + ($elm$core$String$fromInt(right) + ('-' + ($elm$core$String$fromInt(bottom) + ('-' + $elm$core$String$fromInt(left)))))));
-	});
-var $mdgriffith$elm_ui$Element$paddingEach = function (_v0) {
-	var top = _v0.top;
-	var right = _v0.right;
-	var bottom = _v0.bottom;
-	var left = _v0.left;
-	if (_Utils_eq(top, right) && (_Utils_eq(top, bottom) && _Utils_eq(top, left))) {
-		var topFloat = top;
-		return A2(
-			$mdgriffith$elm_ui$Internal$Model$StyleClass,
-			$mdgriffith$elm_ui$Internal$Flag$padding,
-			A5(
-				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-				'p-' + $elm$core$String$fromInt(top),
-				topFloat,
-				topFloat,
-				topFloat,
-				topFloat));
-	} else {
-		return A2(
-			$mdgriffith$elm_ui$Internal$Model$StyleClass,
-			$mdgriffith$elm_ui$Internal$Flag$padding,
-			A5(
-				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-				A4($mdgriffith$elm_ui$Internal$Model$paddingName, top, right, bottom, left),
-				top,
-				right,
-				bottom,
-				left));
-	}
-};
-var $author$project$Internal$Material$Item$insetDivider = function (palette) {
-	return {
-		content: {
-			element: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					$mdgriffith$elm_ui$Element$height(
-					$mdgriffith$elm_ui$Element$px(1)),
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(
-						$author$project$Internal$Material$Palette$lightGray(palette)))
-				])
-		},
-		element: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-				$mdgriffith$elm_ui$Element$height(
-				$mdgriffith$elm_ui$Element$px(1)),
-				$mdgriffith$elm_ui$Element$Border$width(0),
-				$mdgriffith$elm_ui$Element$paddingEach(
-				{bottom: 0, left: 72, right: 0, top: 0})
-			])
-	};
-};
-var $author$project$Widget$Material$insetDivider = $author$project$Internal$Material$Item$insetDivider;
-var $author$project$Internal$List$internal = F2(
-	function (style, list) {
-		return A2(
-			$elm$core$List$indexedMap,
-			F2(
-				function (i, fun) {
-					return fun(
-						_Utils_ap(
-							style.element,
-							($elm$core$List$length(list) === 1) ? style.ifSingleton : ((!i) ? style.ifFirst : (_Utils_eq(
-								i,
-								$elm$core$List$length(list) - 1) ? style.ifLast : style.otherwise))));
-				}),
-			list);
-	});
-var $author$project$Internal$List$itemList = function (style) {
-	return A2(
-		$elm$core$Basics$composeR,
-		$author$project$Internal$List$internal(style.content),
-		$mdgriffith$elm_ui$Element$column(style.elementColumn));
-};
-var $author$project$Widget$itemList = function () {
-	var fun = $author$project$Internal$List$itemList;
-	return fun;
-}();
-var $mdgriffith$elm_ui$Element$Lazy$embed = function (x) {
-	switch (x.$) {
-		case 'Unstyled':
-			var html = x.a;
-			return html;
-		case 'Styled':
-			var styled = x.a;
-			return styled.html(
-				A2(
-					$mdgriffith$elm_ui$Internal$Model$OnlyDynamic,
-					{
-						focus: {backgroundColor: $elm$core$Maybe$Nothing, borderColor: $elm$core$Maybe$Nothing, shadow: $elm$core$Maybe$Nothing},
-						hover: $mdgriffith$elm_ui$Internal$Model$AllowHover,
-						mode: $mdgriffith$elm_ui$Internal$Model$Layout
-					},
-					styled.styles));
-		case 'Text':
-			var text = x.a;
-			return $elm$core$Basics$always(
-				$elm$virtual_dom$VirtualDom$text(text));
-		default:
-			return $elm$core$Basics$always(
-				$elm$virtual_dom$VirtualDom$text(''));
-	}
-};
-var $mdgriffith$elm_ui$Element$Lazy$apply5 = F6(
-	function (fn, a, b, c, d, e) {
-		return $mdgriffith$elm_ui$Element$Lazy$embed(
-			A5(fn, a, b, c, d, e));
-	});
-var $elm$virtual_dom$VirtualDom$lazy7 = _VirtualDom_lazy7;
-var $mdgriffith$elm_ui$Element$Lazy$lazy5 = F6(
-	function (fn, a, b, c, d, e) {
-		return $mdgriffith$elm_ui$Internal$Model$Unstyled(
-			A7($elm$virtual_dom$VirtualDom$lazy7, $mdgriffith$elm_ui$Element$Lazy$apply5, fn, a, b, c, d, e));
-	});
-var $author$project$UIExplorer$lightGray = A3($mdgriffith$elm_ui$Element$rgb255, 228, 234, 241);
-var $mdgriffith$elm_ui$Internal$Model$MoveX = function (a) {
-	return {$: 'MoveX', a: a};
-};
-var $mdgriffith$elm_ui$Internal$Flag$moveX = $mdgriffith$elm_ui$Internal$Flag$flag(25);
-var $mdgriffith$elm_ui$Element$moveRight = function (x) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$TransformComponent,
-		$mdgriffith$elm_ui$Internal$Flag$moveX,
-		$mdgriffith$elm_ui$Internal$Model$MoveX(x));
-};
-var $author$project$UIExplorer$PressedPageSizeOption = function (a) {
-	return {$: 'PressedPageSizeOption', a: a};
-};
-var $author$project$UIExplorer$ToggledPageSizeGroup = {$: 'ToggledPageSizeGroup'};
-var $author$project$UIExplorer$IpadHorizontal = {$: 'IpadHorizontal'};
-var $author$project$UIExplorer$IpadVertical = {$: 'IpadVertical'};
-var $author$project$UIExplorer$Iphone5 = {$: 'Iphone5'};
-var $author$project$UIExplorer$Iphone6 = {$: 'Iphone6'};
-var $author$project$UIExplorer$allPageSizeOptions = _List_fromArray(
-	[$author$project$UIExplorer$Iphone5, $author$project$UIExplorer$Iphone6, $author$project$UIExplorer$IpadVertical, $author$project$UIExplorer$IpadHorizontal, $author$project$UIExplorer$Native]);
-var $author$project$UIExplorer$pageSizeOptionToString = function (pageSizeOption) {
-	switch (pageSizeOption.$) {
-		case 'Iphone5':
-			return 'iPhone 5/SE';
-		case 'Iphone6':
-			return 'iPhone 6/7/8';
-		case 'IpadVertical':
-			return 'iPad (vertical)';
-		case 'IpadHorizontal':
-			return 'iPad (horizontal)';
-		default:
-			return 'Native width';
-	}
-};
-var $author$project$UIExplorer$pageSizeOptionView = F3(
-	function (dark, isExpanded, selectedPageSize) {
-		return A7($author$project$UIExplorer$optionGroupView, dark, isExpanded, selectedPageSize, $author$project$UIExplorer$allPageSizeOptions, $author$project$UIExplorer$pageSizeOptionToString, $author$project$UIExplorer$PressedPageSizeOption, $author$project$UIExplorer$ToggledPageSizeGroup);
-	});
-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 $mdgriffith$elm_ui$Internal$Model$Max = F2(
-	function (a, b) {
-		return {$: 'Max', a: a, b: b};
-	});
-var $mdgriffith$elm_ui$Element$maximum = F2(
-	function (i, l) {
-		return A2($mdgriffith$elm_ui$Internal$Model$Max, i, l);
-	});
-var $noahzgordon$elm_color_extra$Color$Accessibility$luminance = function (cl) {
-	var f = function (intensity) {
-		return (intensity <= 0.03928) ? (intensity / 12.92) : A2($elm$core$Basics$pow, (intensity + 0.055) / 1.055, 2.4);
-	};
-	var _v0 = function (a) {
-		return _Utils_Tuple3(
-			f(a.red),
-			f(a.green),
-			f(a.blue));
-	}(
-		$avh4$elm_color$Color$toRgba(cl));
-	var r = _v0.a;
-	var g = _v0.b;
-	var b = _v0.c;
-	return ((0.2126 * r) + (0.7152 * g)) + (0.0722 * b);
-};
-var $author$project$Widget$Material$Color$accessibleTextColor = function (color) {
-	var l = 1 + ($avh4$elm_color$Color$toRgba(color).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(color) - 1));
-	var ratioBlack = 1.05 / (l + 0.05);
-	var ratioWhite = (l + 0.05) / 0.05;
-	return (_Utils_cmp(ratioBlack, ratioWhite) < 0) ? A3($avh4$elm_color$Color$rgb255, 0, 0, 0) : A3($avh4$elm_color$Color$rgb255, 255, 255, 255);
-};
-var $author$project$Widget$Material$Color$textAndBackground = function (color) {
-	return _List_fromArray(
-		[
-			$mdgriffith$elm_ui$Element$Background$color(
-			$author$project$Widget$Material$Color$fromColor(color)),
-			$mdgriffith$elm_ui$Element$Font$color(
-			$author$project$Widget$Material$Color$fromColor(
-				$author$project$Widget$Material$Color$accessibleTextColor(color)))
-		]);
-};
-var $author$project$Internal$Material$List$sideSheet = function (palette) {
-	return {
-		content: {
-			element: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-					$mdgriffith$elm_ui$Element$Border$color(
-					$author$project$Widget$Material$Color$fromColor(
-						$author$project$Internal$Material$Palette$gray(palette)))
-				]),
-			ifFirst: _List_Nil,
-			ifLast: _List_Nil,
-			ifSingleton: _List_Nil,
-			otherwise: _List_Nil
-		},
-		elementColumn: _Utils_ap(
-			$author$project$Widget$Material$Color$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$height($mdgriffith$elm_ui$Element$fill),
-					A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8),
-					$mdgriffith$elm_ui$Element$Border$color(
-					$author$project$Widget$Material$Color$fromColor(
-						$author$project$Internal$Material$Palette$gray(palette)))
-				]))
-	};
-};
-var $author$project$Widget$Material$sideSheet = $author$project$Internal$Material$List$sideSheet;
 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$Switch$switch = F2(
+var $author$project$Internal$Button$iconButton = F2(
 	function (style, _v0) {
 		var onPress = _v0.onPress;
-		var description = _v0.description;
-		var active = _v0.active;
+		var text = _v0.text;
+		var icon = _v0.icon;
 		return A2(
 			$mdgriffith$elm_ui$Element$Input$button,
 			_Utils_ap(
 				style.elementButton,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Region$description(description),
-						$mdgriffith$elm_ui$Element$inFront(
-						A2(
-							$mdgriffith$elm_ui$Element$el,
-							_Utils_ap(
-								style.contentInFront.element,
-								active ? style.contentInFront.ifActive : (_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.contentInFront.ifDisabled : style.contentInFront.otherwise)),
-							A2(
-								$mdgriffith$elm_ui$Element$el,
-								_Utils_ap(
-									style.contentInFront.content.element,
-									active ? style.contentInFront.content.ifActive : (_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.contentInFront.content.ifDisabled : style.contentInFront.content.otherwise)),
-								$mdgriffith$elm_ui$Element$none)))
-					])),
+				_Utils_ap(
+					_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Region$description(text)
+						]))),
 			{
 				label: A2(
 					$mdgriffith$elm_ui$Element$el,
-					_Utils_ap(
-						style.content.element,
-						active ? style.content.ifActive : (_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.content.ifDisabled : style.content.otherwise)),
-					$mdgriffith$elm_ui$Element$none),
+					style.content.elementRow,
+					icon(
+						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.content.content.icon.ifDisabled : style.content.content.icon.otherwise)),
 				onPress: onPress
 			});
 	});
-var $author$project$Widget$switch = function () {
-	var fun = $author$project$Internal$Switch$switch;
-	return fun;
-}();
-var $mdgriffith$elm_ui$Internal$Model$Left = {$: 'Left'};
-var $mdgriffith$elm_ui$Element$alignLeft = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$Left);
-var $mdgriffith$elm_ui$Internal$Model$Right = {$: 'Right'};
-var $mdgriffith$elm_ui$Element$alignRight = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$Right);
-var $author$project$Widget$Material$Color$buttonDisabledOpacity = 0.38;
-var $avh4$elm_color$Color$gray = A4($avh4$elm_color$Color$RgbaSpace, 211 / 255, 215 / 255, 207 / 255, 1.0);
-var $mdgriffith$elm_ui$Element$moveLeft = function (x) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$TransformComponent,
-		$mdgriffith$elm_ui$Internal$Flag$moveX,
-		$mdgriffith$elm_ui$Internal$Model$MoveX(-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 $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$rgba255 = F4(
-	function (red, green, blue, a) {
-		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, red / 255, green / 255, blue / 255, a);
+var $mdgriffith$elm_ui$Element$Phone = {$: 'Phone'};
+var $mdgriffith$elm_ui$Element$Tablet = {$: 'Tablet'};
+var $mdgriffith$elm_ui$Internal$Model$AsRow = {$: 'AsRow'};
+var $mdgriffith$elm_ui$Internal$Model$asRow = $mdgriffith$elm_ui$Internal$Model$AsRow;
+var $mdgriffith$elm_ui$Element$row = F2(
+	function (attrs, children) {
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asRow,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.contentLeft + (' ' + $mdgriffith$elm_ui$Internal$Style$classes.contentCenterY)),
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+						attrs))),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
 	});
-var $author$project$Widget$Material$Color$shadow = function (_float) {
-	return {
-		blur: _float,
-		color: A4($mdgriffith$elm_ui$Element$rgba255, 0, 0, 0, 0.2),
-		offset: _Utils_Tuple2(0, _float),
-		size: 0
-	};
-};
-var $author$project$Internal$Material$Switch$switch = function (palette) {
-	return {
-		content: {
-			element: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$height(
-					$mdgriffith$elm_ui$Element$px(14)),
-					$mdgriffith$elm_ui$Element$width(
-					$mdgriffith$elm_ui$Element$px(34)),
-					$mdgriffith$elm_ui$Element$centerY,
-					$mdgriffith$elm_ui$Element$centerX,
-					$mdgriffith$elm_ui$Element$Border$rounded(10)
-				]),
-			ifActive: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.5, palette.primary)))
-				]),
-			ifDisabled: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$htmlAttribute(
-					A2($elm$html$Html$Attributes$style, 'cursor', 'not-allowed')),
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A3(
-							$author$project$Widget$Material$Color$withShade,
-							$author$project$Internal$Material$Palette$gray(palette),
-							0.5 * $author$project$Widget$Material$Color$buttonDisabledOpacity,
-							palette.surface)))
-				]),
-			otherwise: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A2(
-							$author$project$Widget$Material$Color$scaleOpacity,
-							0.5,
-							$author$project$Internal$Material$Palette$gray(palette))))
-				])
-		},
-		contentInFront: {
-			content: {
-				element: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$height(
-						$mdgriffith$elm_ui$Element$px(20)),
-						$mdgriffith$elm_ui$Element$width(
-						$mdgriffith$elm_ui$Element$px(20)),
-						$mdgriffith$elm_ui$Element$centerY,
-						$mdgriffith$elm_ui$Element$centerX,
-						$mdgriffith$elm_ui$Element$Border$rounded(10),
-						$mdgriffith$elm_ui$Element$Border$shadow(
-						$author$project$Widget$Material$Color$shadow(2)),
-						$mdgriffith$elm_ui$Element$Background$color(
-						$author$project$Widget$Material$Color$fromColor(palette.surface))
-					]),
-				ifActive: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Background$color(
-						$author$project$Widget$Material$Color$fromColor(
-							A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
-					]),
-				ifDisabled: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Background$color(
-						$author$project$Widget$Material$Color$fromColor(
-							A3($author$project$Widget$Material$Color$withShade, $avh4$elm_color$Color$gray, $author$project$Widget$Material$Color$buttonDisabledOpacity, palette.surface))),
-						$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-						$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-						$mdgriffith$elm_ui$Element$focused(_List_Nil)
-					]),
-				otherwise: _List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$Background$color(
-						$author$project$Widget$Material$Color$fromColor(
-							A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface)))
-					])
-			},
-			element: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$height(
-					$mdgriffith$elm_ui$Element$px(38)),
-					$mdgriffith$elm_ui$Element$width(
-					$mdgriffith$elm_ui$Element$px(38)),
-					$mdgriffith$elm_ui$Element$Border$rounded(19)
-				]),
-			ifActive: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$alignRight,
-					$mdgriffith$elm_ui$Element$moveRight(8)
-				]),
-			ifDisabled: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$htmlAttribute(
-					A2($elm$html$Html$Attributes$style, 'cursor', 'not-allowed'))
-				]),
-			otherwise: _List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, $avh4$elm_color$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, $avh4$elm_color$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, $avh4$elm_color$Color$gray)))
-						])),
-					$mdgriffith$elm_ui$Element$alignLeft,
-					$mdgriffith$elm_ui$Element$moveLeft(8)
-				])
-		},
-		elementButton: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$height(
-				$mdgriffith$elm_ui$Element$px(38)),
-				$mdgriffith$elm_ui$Element$width(
-				$mdgriffith$elm_ui$Element$px(58 - 18)),
-				$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-				$mdgriffith$elm_ui$Element$focused(_List_Nil),
-				$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
-			])
-	};
-};
-var $author$project$Widget$Material$switch = $author$project$Internal$Material$Switch$switch;
 var $author$project$Internal$Button$button = F2(
 	function (style, _v0) {
 		var onPress = _v0.onPress;
@@ -14733,7 +13377,12 @@ var $author$project$Internal$Button$button = F2(
 			$mdgriffith$elm_ui$Element$Input$button,
 			_Utils_ap(
 				style.elementButton,
-				_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
+				_Utils_ap(
+					_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Region$description(text)
+						]))),
 			{
 				label: A2(
 					$mdgriffith$elm_ui$Element$row,
@@ -14750,6 +13399,29 @@ var $author$project$Internal$Button$button = F2(
 				onPress: onPress
 			});
 	});
+var $author$project$Widget$Customize$mapElementButton = F2(
+	function (fun, a) {
+		return _Utils_update(
+			a,
+			{
+				elementButton: fun(a.elementButton)
+			});
+	});
+var $author$project$Widget$Customize$elementButton = F2(
+	function (list, a) {
+		return A2(
+			$author$project$Widget$Customize$mapElementButton,
+			function (b) {
+				return _Utils_ap(b, list);
+			},
+			a);
+	});
+var $mdgriffith$elm_ui$Element$none = $mdgriffith$elm_ui$Internal$Model$Empty;
+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 $mdgriffith$elm_ui$Element$Input$HiddenLabel = function (a) {
 	return {$: 'HiddenLabel', a: a};
 };
@@ -14842,6 +13514,10 @@ var $mdgriffith$elm_ui$Element$Input$autofill = A2(
 var $mdgriffith$elm_ui$Internal$Model$MoveY = function (a) {
 	return {$: 'MoveY', a: a};
 };
+var $mdgriffith$elm_ui$Internal$Model$TransformComponent = F2(
+	function (a, b) {
+		return {$: 'TransformComponent', a: a, b: 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(
@@ -14876,9 +13552,76 @@ var $mdgriffith$elm_ui$Element$Input$calcMoveToCompensateForPadding = function (
 };
 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$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 $mdgriffith$elm_ui$Element$Input$darkGrey = A3($mdgriffith$elm_ui$Element$rgb, 186 / 255, 189 / 255, 182 / 255);
+var $mdgriffith$elm_ui$Element$paddingXY = F2(
+	function (x, y) {
+		if (_Utils_eq(x, y)) {
+			var f = x;
+			return A2(
+				$mdgriffith$elm_ui$Internal$Model$StyleClass,
+				$mdgriffith$elm_ui$Internal$Flag$padding,
+				A5(
+					$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+					'p-' + $elm$core$String$fromInt(x),
+					f,
+					f,
+					f,
+					f));
+		} else {
+			var yFloat = y;
+			var xFloat = x;
+			return A2(
+				$mdgriffith$elm_ui$Internal$Model$StyleClass,
+				$mdgriffith$elm_ui$Internal$Flag$padding,
+				A5(
+					$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+					'p-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y))),
+					yFloat,
+					xFloat,
+					yFloat,
+					xFloat));
+		}
+	});
 var $mdgriffith$elm_ui$Element$Input$defaultTextPadding = A2($mdgriffith$elm_ui$Element$paddingXY, 12, 12);
+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 $mdgriffith$elm_ui$Element$Input$white = A3($mdgriffith$elm_ui$Element$rgb, 1, 1, 1);
+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$Input$defaultTextBoxStyle = _List_fromArray(
 	[
 		$mdgriffith$elm_ui$Element$Input$defaultTextPadding,
@@ -14907,6 +13650,10 @@ var $mdgriffith$elm_ui$Element$Input$hiddenLabelAttribute = function (label) {
 		return $mdgriffith$elm_ui$Internal$Model$NoAttribute;
 	}
 };
+var $mdgriffith$elm_ui$Internal$Model$InFront = {$: 'InFront'};
+var $mdgriffith$elm_ui$Element$inFront = function (element) {
+	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$InFront, element);
+};
 var $mdgriffith$elm_ui$Element$Input$isConstrained = function (len) {
 	isConstrained:
 	while (true) {
@@ -14986,6 +13733,40 @@ var $elm$html$Html$Events$onInput = function (tagger) {
 			$elm$html$Html$Events$alwaysStop,
 			A2($elm$json$Json$Decode$map, tagger, $elm$html$Html$Events$targetValue)));
 };
+var $mdgriffith$elm_ui$Internal$Model$paddingName = F4(
+	function (top, right, bottom, left) {
+		return 'pad-' + ($elm$core$String$fromInt(top) + ('-' + ($elm$core$String$fromInt(right) + ('-' + ($elm$core$String$fromInt(bottom) + ('-' + $elm$core$String$fromInt(left)))))));
+	});
+var $mdgriffith$elm_ui$Element$paddingEach = function (_v0) {
+	var top = _v0.top;
+	var right = _v0.right;
+	var bottom = _v0.bottom;
+	var left = _v0.left;
+	if (_Utils_eq(top, right) && (_Utils_eq(top, bottom) && _Utils_eq(top, left))) {
+		var topFloat = top;
+		return A2(
+			$mdgriffith$elm_ui$Internal$Model$StyleClass,
+			$mdgriffith$elm_ui$Internal$Flag$padding,
+			A5(
+				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+				'p-' + $elm$core$String$fromInt(top),
+				topFloat,
+				topFloat,
+				topFloat,
+				topFloat));
+	} else {
+		return A2(
+			$mdgriffith$elm_ui$Internal$Model$StyleClass,
+			$mdgriffith$elm_ui$Internal$Flag$padding,
+			A5(
+				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+				A4($mdgriffith$elm_ui$Internal$Model$paddingName, top, right, bottom, left),
+				top,
+				right,
+				bottom,
+				left));
+	}
+};
 var $mdgriffith$elm_ui$Element$Input$isFill = function (len) {
 	isFill:
 	while (true) {
@@ -15248,6 +14029,27 @@ var $mdgriffith$elm_ui$Element$Input$renderBox = function (_v0) {
 	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$rgba = $mdgriffith$elm_ui$Internal$Model$Rgba;
 var $mdgriffith$elm_ui$Element$Input$renderPlaceholder = F3(
@@ -15564,10 +14366,166 @@ var $author$project$Internal$TextInput$textInput = F2(
 					})
 				]));
 	});
-var $author$project$Widget$textInput = function () {
-	var fun = $author$project$Internal$TextInput$textInput;
-	return fun;
-}();
+var $author$project$Internal$AppBar$internalNav = F3(
+	function (menuElements, style, _v0) {
+		var deviceClass = _v0.deviceClass;
+		var openRightSheet = _v0.openRightSheet;
+		var openTopSheet = _v0.openTopSheet;
+		var primaryActions = _v0.primaryActions;
+		var search = _v0.search;
+		return A2(
+			$mdgriffith$elm_ui$Element$row,
+			_Utils_ap(
+				style.elementRow,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$alignTop,
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+					])),
+			_List_fromArray(
+				[
+					A2($mdgriffith$elm_ui$Element$row, style.content.menu.elementRow, menuElements),
+					(_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 (_v1) {
+							var onChange = _v1.onChange;
+							var text = _v1.text;
+							var label = _v1.label;
+							return A2(
+								$author$project$Internal$TextInput$textInput,
+								style.content.search,
+								{
+									chips: _List_Nil,
+									label: 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,
+					style.content.actions.elementRow,
+					$elm$core$List$concat(
+						_List_fromArray(
+							[
+								A2(
+								$elm$core$Maybe$withDefault,
+								_List_Nil,
+								A2(
+									$elm$core$Maybe$map,
+									function (_v2) {
+										var label = _v2.label;
+										return _Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Tablet) ? _List_fromArray(
+											[
+												A2(
+												$author$project$Internal$Button$button,
+												A2(
+													$author$project$Widget$Customize$elementButton,
+													_List_fromArray(
+														[
+															$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
+														]),
+													style.content.actions.content.button),
+												{icon: style.content.actions.content.searchIcon, onPress: openTopSheet, text: label})
+											]) : (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) ? _List_fromArray(
+											[
+												A2(
+												$author$project$Internal$Button$iconButton,
+												style.content.actions.content.button,
+												{icon: style.content.actions.content.searchIcon, onPress: openTopSheet, text: label})
+											]) : _List_Nil);
+									},
+									search)),
+								A2(
+								$elm$core$List$map,
+								_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) ? $author$project$Internal$Button$iconButton(style.content.actions.content.button) : $author$project$Internal$Button$button(
+									A2(
+										$author$project$Widget$Customize$elementButton,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
+											]),
+										style.content.actions.content.button)),
+								primaryActions),
+								function () {
+								if (openRightSheet.$ === 'Nothing') {
+									return _List_Nil;
+								} else {
+									return _List_fromArray(
+										[
+											A2(
+											$author$project$Internal$Button$iconButton,
+											style.content.actions.content.button,
+											{icon: style.content.actions.content.moreVerticalIcon, onPress: openRightSheet, text: 'More'})
+										]);
+								}
+							}()
+							])))
+				]));
+	});
+var $author$project$Internal$AppBar$menuBar = F2(
+	function (style, m) {
+		return A3(
+			$author$project$Internal$AppBar$internalNav,
+			_List_fromArray(
+				[
+					A2(
+					$author$project$Internal$Button$iconButton,
+					style.content.actions.content.button,
+					{icon: style.content.menu.content.menuIcon, onPress: m.openLeftSheet, text: 'Menu'}),
+					A2($mdgriffith$elm_ui$Element$el, style.content.menu.content.title, m.title)
+				]),
+			{
+				content: {
+					actions: style.content.actions,
+					menu: {elementRow: style.content.menu.elementRow},
+					search: style.content.search
+				},
+				elementRow: style.elementRow
+			},
+			m);
+	});
+var $author$project$Widget$menuBar = $author$project$Internal$AppBar$menuBar;
+var $elm$core$Basics$pow = _Basics_pow;
+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 $noahzgordon$elm_color_extra$Color$Accessibility$luminance = function (cl) {
+	var f = function (intensity) {
+		return (intensity <= 0.03928) ? (intensity / 12.92) : A2($elm$core$Basics$pow, (intensity + 0.055) / 1.055, 2.4);
+	};
+	var _v0 = function (a) {
+		return _Utils_Tuple3(
+			f(a.red),
+			f(a.green),
+			f(a.blue));
+	}(
+		$avh4$elm_color$Color$toRgba(cl));
+	var r = _v0.a;
+	var g = _v0.b;
+	var b = _v0.c;
+	return ((0.2126 * r) + (0.7152 * g)) + (0.0722 * b);
+};
+var $author$project$Widget$Material$Color$accessibleTextColor = function (color) {
+	var l = 1 + ($avh4$elm_color$Color$toRgba(color).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(color) - 1));
+	var ratioBlack = 1.05 / (l + 0.05);
+	var ratioWhite = (l + 0.05) / 0.05;
+	return (_Utils_cmp(ratioBlack, ratioWhite) < 0) ? A3($avh4$elm_color$Color$rgb255, 0, 0, 0) : A3($avh4$elm_color$Color$rgb255, 255, 255, 255);
+};
+var $mdgriffith$elm_ui$Internal$Model$Right = {$: 'Right'};
+var $mdgriffith$elm_ui$Element$alignRight = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$Right);
 var $author$project$Widget$Material$Typography$button = _List_fromArray(
 	[
 		$mdgriffith$elm_ui$Element$htmlAttribute(
@@ -15576,6 +14534,140 @@ var $author$project$Widget$Material$Typography$button = _List_fromArray(
 		$mdgriffith$elm_ui$Element$Font$semiBold,
 		$mdgriffith$elm_ui$Element$Font$letterSpacing(1.25)
 	]);
+var $mdgriffith$elm_ui$Internal$Model$CenterY = {$: 'CenterY'};
+var $mdgriffith$elm_ui$Element$centerY = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$CenterY);
+var $elm$core$Basics$composeR = F3(
+	function (f, g, x) {
+		return g(
+			f(x));
+	});
+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 $elm$core$Basics$clamp = F3(
+	function (low, high, number) {
+		return (_Utils_cmp(number, low) < 0) ? low : ((_Utils_cmp(number, high) > 0) ? high : number);
+	});
+var $avh4$elm_color$Color$rgb = F3(
+	function (r, g, b) {
+		return A4($avh4$elm_color$Color$RgbaSpace, r, g, b, 1.0);
+	});
+var $noahzgordon$elm_color_extra$Color$Convert$xyzToColor = function (_v0) {
+	var x = _v0.x;
+	var y = _v0.y;
+	var z = _v0.z;
+	var z_ = z / 100;
+	var y_ = y / 100;
+	var x_ = x / 100;
+	var r = ((x_ * 3.2404542) + (y_ * (-1.5371385))) + (z_ * (-0.4986));
+	var g = ((x_ * (-0.969266)) + (y_ * 1.8760108)) + (z_ * 4.1556e-2);
+	var c = function (ch) {
+		var ch_ = (ch > 3.1308e-3) ? ((1.055 * A2($elm$core$Basics$pow, ch, 1 / 2.4)) - 5.5e-2) : (12.92 * ch);
+		return A3($elm$core$Basics$clamp, 0, 1, ch_);
+	};
+	var b = ((x_ * 5.56434e-2) + (y_ * (-0.2040259))) + (z_ * 1.0572252);
+	return A3(
+		$avh4$elm_color$Color$rgb,
+		c(r),
+		c(g),
+		c(b));
+};
+var $noahzgordon$elm_color_extra$Color$Convert$labToColor = A2($elm$core$Basics$composeR, $noahzgordon$elm_color_extra$Color$Convert$labToXyz, $noahzgordon$elm_color_extra$Color$Convert$xyzToColor);
+var $elm$core$Basics$sin = _Basics_sin;
+var $author$project$Widget$Material$Color$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 $avh4$elm_color$Color$fromRgba = function (components) {
+	return A4($avh4$elm_color$Color$RgbaSpace, components.red, components.green, components.blue, components.alpha);
+};
+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$Material$Color$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$Material$Color$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$Material$Color$fromCIELCH(
+						A2(
+							fun,
+							$author$project$Widget$Material$Color$toCIELCH(c1),
+							$author$project$Widget$Material$Color$toCIELCH(c2))))));
+	});
+var $author$project$Internal$Material$Palette$gray = function (palette) {
+	return A3($author$project$Widget$Material$Color$withShade, palette.on.surface, 0.5, palette.surface);
+};
 var $mdgriffith$elm_ui$Internal$Model$Min = F2(
 	function (a, b) {
 		return {$: 'Min', a: a, b: b};
@@ -15584,6 +14676,10 @@ 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$Model$Px = function (a) {
+	return {$: 'Px', a: a};
+};
+var $mdgriffith$elm_ui$Element$px = $mdgriffith$elm_ui$Internal$Model$Px;
 var $author$project$Internal$Material$Button$baseButton = function (palette) {
 	return {
 		content: {
@@ -15633,7 +14729,408 @@ var $author$project$Internal$Material$Button$baseButton = function (palette) {
 		otherwise: _List_Nil
 	};
 };
+var $author$project$Widget$Material$Color$buttonFocusOpacity = 0.24;
+var $author$project$Widget$Material$Color$buttonHoverOpacity = 0.08;
+var $author$project$Widget$Material$Color$buttonPressedOpacity = 0.32;
+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 $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 $mdgriffith$elm_ui$Element$fromRgb = function (clr) {
+	return A4($mdgriffith$elm_ui$Internal$Model$Rgba, clr.red, clr.green, clr.blue, clr.alpha);
+};
+var $author$project$Widget$Material$Color$fromColor = A2($elm$core$Basics$composeR, $avh4$elm_color$Color$toRgba, $mdgriffith$elm_ui$Element$fromRgb);
+var $mdgriffith$elm_ui$Internal$Model$Active = {$: 'Active'};
+var $mdgriffith$elm_ui$Internal$Flag$active = $mdgriffith$elm_ui$Internal$Flag$flag(32);
+var $mdgriffith$elm_ui$Element$mouseDown = function (decs) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$active,
+		A2(
+			$mdgriffith$elm_ui$Internal$Model$PseudoSelector,
+			$mdgriffith$elm_ui$Internal$Model$Active,
+			$mdgriffith$elm_ui$Internal$Model$unwrapDecorations(decs)));
+};
+var $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 $author$project$Widget$Material$Color$scaleOpacity = function (opacity) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$avh4$elm_color$Color$toRgba,
+		A2(
+			$elm$core$Basics$composeR,
+			function (color) {
+				return _Utils_update(
+					color,
+					{alpha: color.alpha * opacity});
+			},
+			$avh4$elm_color$Color$fromRgba));
+};
+var $author$project$Internal$Material$Button$iconButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {color: palette.primary, size: 18},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					otherwise: {color: palette.primary, size: 18}
+				},
+				text: {
+					contentText: _List_fromArray(
+						[$mdgriffith$elm_ui$Element$centerX])
+				}
+			},
+			elementRow: _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
+				])
+		},
+		elementButton: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(48)),
+					$mdgriffith$elm_ui$Element$width(
+					A2($mdgriffith$elm_ui$Element$minimum, 48, $mdgriffith$elm_ui$Element$shrink)),
+					$mdgriffith$elm_ui$Element$Border$rounded(24),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.surface)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.surface)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface)))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface)))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		otherwise: _List_Nil
+	};
+};
+var $author$project$Widget$Customize$mapContent = F2(
+	function (fun, a) {
+		return _Utils_update(
+			a,
+			{
+				content: fun(a.content)
+			});
+	});
+var $elm$svg$Svg$Attributes$d = _VirtualDom_attribute('d');
+var $elm$svg$Svg$Attributes$fill = _VirtualDom_attribute('fill');
+var $elm$svg$Svg$Attributes$height = _VirtualDom_attribute('height');
+var $elm$svg$Svg$Attributes$stroke = _VirtualDom_attribute('stroke');
+var $avh4$elm_color$Color$toCssString = function (_v0) {
+	var r = _v0.a;
+	var g = _v0.b;
+	var b = _v0.c;
+	var a = _v0.d;
+	var roundTo = function (x) {
+		return $elm$core$Basics$round(x * 1000) / 1000;
+	};
+	var pct = function (x) {
+		return $elm$core$Basics$round(x * 10000) / 100;
+	};
+	return $elm$core$String$concat(
+		_List_fromArray(
+			[
+				'rgba(',
+				$elm$core$String$fromFloat(
+				pct(r)),
+				'%,',
+				$elm$core$String$fromFloat(
+				pct(g)),
+				'%,',
+				$elm$core$String$fromFloat(
+				pct(b)),
+				'%,',
+				$elm$core$String$fromFloat(
+				roundTo(a)),
+				')'
+			]));
+};
+var $elm$svg$Svg$Attributes$viewBox = _VirtualDom_attribute('viewBox');
+var $elm$svg$Svg$Attributes$width = _VirtualDom_attribute('width');
+var $author$project$Internal$Material$Icon$icon = function (_v0) {
+	var viewBox = _v0.viewBox;
+	var size = _v0.size;
+	var color = _v0.color;
+	return A2(
+		$elm$core$Basics$composeR,
+		$elm$svg$Svg$svg(
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$height(
+					$elm$core$String$fromInt(size)),
+					$elm$svg$Svg$Attributes$stroke(
+					$avh4$elm_color$Color$toCssString(color)),
+					$elm$svg$Svg$Attributes$fill(
+					$avh4$elm_color$Color$toCssString(color)),
+					$elm$svg$Svg$Attributes$viewBox(viewBox),
+					$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$svg$Svg$path = $elm$svg$Svg$trustedNode('path');
+var $author$project$Internal$Material$Icon$more_vert = function (_v0) {
+	var size = _v0.size;
+	var color = _v0.color;
+	return A2(
+		$author$project$Internal$Material$Icon$icon,
+		{color: color, size: size, viewBox: '0 0 48 48'},
+		_List_fromArray(
+			[
+				A2(
+				$elm$svg$Svg$path,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$d('M24 16c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 4c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z')
+					]),
+				_List_Nil)
+			]));
+};
+var $author$project$Internal$Material$Icon$search = function (_v0) {
+	var size = _v0.size;
+	var color = _v0.color;
+	return A2(
+		$author$project$Internal$Material$Icon$icon,
+		{color: color, size: size, viewBox: '0 0 48 48'},
+		_List_fromArray(
+			[
+				A2(
+				$elm$svg$Svg$path,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$d('M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z')
+					]),
+				_List_Nil)
+			]));
+};
+var $author$project$Widget$Customize$mapElementTextInput = F2(
+	function (fun, a) {
+		return _Utils_update(
+			a,
+			{
+				elementTextInput: fun(a.elementTextInput)
+			});
+	});
+var $author$project$Widget$Customize$elementTextInput = F2(
+	function (list, a) {
+		return A2(
+			$author$project$Widget$Customize$mapElementTextInput,
+			function (b) {
+				return _Utils_ap(b, list);
+			},
+			a);
+	});
+var $author$project$Widget$Customize$mapElementRow = F2(
+	function (fun, a) {
+		return _Utils_update(
+			a,
+			{
+				elementRow: fun(a.elementRow)
+			});
+	});
+var $mdgriffith$elm_ui$Internal$Model$Max = F2(
+	function (a, b) {
+		return {$: 'Max', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Element$maximum = F2(
+	function (i, l) {
+		return A2($mdgriffith$elm_ui$Internal$Model$Max, i, l);
+	});
+var $author$project$Widget$Material$Color$buttonDisabledOpacity = 0.38;
 var $author$project$Widget$Material$Color$buttonSelectedOpacity = 0.16;
+var $author$project$Internal$Material$Palette$lightGray = function (palette) {
+	return A3($author$project$Widget$Material$Color$withShade, palette.on.surface, 0.14, palette.surface);
+};
+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$rgba255 = F4(
+	function (red, green, blue, a) {
+		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, red / 255, green / 255, blue / 255, a);
+	});
+var $author$project$Widget$Material$Color$shadow = function (_float) {
+	return {
+		blur: _float,
+		color: A4($mdgriffith$elm_ui$Element$rgba255, 0, 0, 0, 0.2),
+		offset: _Utils_Tuple2(0, _float),
+		size: 0
+	};
+};
+var $author$project$Widget$Material$Color$textAndBackground = function (color) {
+	return _List_fromArray(
+		[
+			$mdgriffith$elm_ui$Element$Background$color(
+			$author$project$Widget$Material$Color$fromColor(color)),
+			$mdgriffith$elm_ui$Element$Font$color(
+			$author$project$Widget$Material$Color$fromColor(
+				$author$project$Widget$Material$Color$accessibleTextColor(color)))
+		]);
+};
 var $author$project$Internal$Material$Chip$chip = function (palette) {
 	return {
 		content: {
@@ -15641,31 +15138,27 @@ var $author$project$Internal$Material$Chip$chip = function (palette) {
 				icon: {
 					ifActive: {
 						color: $author$project$Widget$Material$Color$accessibleTextColor(
-							A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface)),
+							$author$project$Internal$Material$Palette$lightGray(palette)),
 						size: 18
 					},
 					ifDisabled: {
 						color: $author$project$Widget$Material$Color$accessibleTextColor(
-							A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface)),
+							$author$project$Internal$Material$Palette$lightGray(palette)),
 						size: 18
 					},
 					otherwise: {
 						color: $author$project$Widget$Material$Color$accessibleTextColor(
-							A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface)),
+							$author$project$Internal$Material$Palette$lightGray(palette)),
 						size: 18
 					}
 				},
-				text: {
-					contentText: _List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$paddingEach(
-							{bottom: 0, left: 8, right: 0, top: 0})
-						])
-				}
+				text: {contentText: _List_Nil}
 			},
 			elementRow: _List_fromArray(
 				[
-					$mdgriffith$elm_ui$Element$spacing(0),
+					$mdgriffith$elm_ui$Element$spacing(8),
+					$mdgriffith$elm_ui$Element$paddingEach(
+					{bottom: 0, left: 8, right: 0, top: 0}),
 					$mdgriffith$elm_ui$Element$centerY
 				])
 		},
@@ -15685,7 +15178,7 @@ var $author$project$Internal$Material$Chip$chip = function (palette) {
 								$author$project$Widget$Material$Color$withShade,
 								palette.on.surface,
 								$author$project$Widget$Material$Color$buttonPressedOpacity,
-								A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface))))
+								$author$project$Internal$Material$Palette$lightGray(palette))))
 					])),
 				$mdgriffith$elm_ui$Element$focused(
 				_List_fromArray(
@@ -15696,7 +15189,7 @@ var $author$project$Internal$Material$Chip$chip = function (palette) {
 								$author$project$Widget$Material$Color$withShade,
 								palette.on.surface,
 								$author$project$Widget$Material$Color$buttonFocusOpacity,
-								A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface))))
+								$author$project$Internal$Material$Palette$lightGray(palette))))
 					])),
 				$mdgriffith$elm_ui$Element$mouseOver(
 				_List_fromArray(
@@ -15707,7 +15200,7 @@ var $author$project$Internal$Material$Chip$chip = function (palette) {
 								$author$project$Widget$Material$Color$withShade,
 								palette.on.surface,
 								$author$project$Widget$Material$Color$buttonHoverOpacity,
-								A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface))))
+								$author$project$Internal$Material$Palette$lightGray(palette))))
 					]))
 			]),
 		ifActive: _List_fromArray(
@@ -15718,11 +15211,11 @@ var $author$project$Internal$Material$Chip$chip = function (palette) {
 						$author$project$Widget$Material$Color$withShade,
 						palette.on.surface,
 						$author$project$Widget$Material$Color$buttonSelectedOpacity,
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface)))),
+						$author$project$Internal$Material$Palette$lightGray(palette)))),
 				$mdgriffith$elm_ui$Element$Font$color(
 				$author$project$Widget$Material$Color$fromColor(
 					$author$project$Widget$Material$Color$accessibleTextColor(
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface)))),
+						$author$project$Internal$Material$Palette$lightGray(palette)))),
 				$mdgriffith$elm_ui$Element$Border$shadow(
 				$author$project$Widget$Material$Color$shadow(4))
 			]),
@@ -15734,7 +15227,7 @@ var $author$project$Internal$Material$Chip$chip = function (palette) {
 						$author$project$Widget$Material$Color$withShade,
 						palette.on.surface,
 						$author$project$Widget$Material$Color$buttonDisabledOpacity,
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface))),
+						$author$project$Internal$Material$Palette$lightGray(palette))),
 				_List_fromArray(
 					[
 						$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
@@ -15745,14 +15238,879 @@ var $author$project$Internal$Material$Chip$chip = function (palette) {
 			[
 				$mdgriffith$elm_ui$Element$Background$color(
 				$author$project$Widget$Material$Color$fromColor(
-					A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface))),
+					$author$project$Internal$Material$Palette$lightGray(palette))),
 				$mdgriffith$elm_ui$Element$Font$color(
 				$author$project$Widget$Material$Color$fromColor(
 					$author$project$Widget$Material$Color$accessibleTextColor(
-						A2($author$project$Widget$Material$Color$scaleOpacity, 0.12, palette.on.surface))))
+						$author$project$Internal$Material$Palette$lightGray(palette))))
 			])
 	};
 };
+var $author$project$Internal$Material$TextInput$textInputBase = function (palette) {
+	return {
+		content: {
+			chips: {
+				content: $author$project$Internal$Material$Chip$chip(palette),
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spacing(8)
+					])
+			},
+			text: {
+				elementTextInput: _Utils_ap(
+					$author$project$Widget$Material$Color$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)
+						]))
+			}
+		},
+		elementRow: $author$project$Widget$Material$Color$textAndBackground(palette.surface)
+	};
+};
+var $author$project$Internal$Material$TextInput$searchInput = function (palette) {
+	return A2(
+		$author$project$Widget$Customize$mapContent,
+		function (record) {
+			return _Utils_update(
+				record,
+				{
+					text: A2(
+						$author$project$Widget$Customize$elementTextInput,
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Border$width(0),
+								A2($mdgriffith$elm_ui$Element$paddingXY, 8, 8),
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(32)),
+								$mdgriffith$elm_ui$Element$width(
+								A2($mdgriffith$elm_ui$Element$maximum, 360, $mdgriffith$elm_ui$Element$fill))
+							]),
+						record.text)
+				});
+		},
+		A2(
+			$author$project$Widget$Customize$mapElementRow,
+			$elm$core$Basics$always(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$alignRight,
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 8),
+						$mdgriffith$elm_ui$Element$Border$rounded(4)
+					])),
+			$author$project$Internal$Material$TextInput$textInputBase(palette)));
+};
+var $author$project$Internal$Material$AppBar$internalBar = F2(
+	function (content, palette) {
+		return {
+			content: {
+				actions: {
+					content: {
+						button: A2(
+							$author$project$Widget$Customize$mapContent,
+							$author$project$Widget$Customize$mapContent(
+								function (record) {
+									return _Utils_update(
+										record,
+										{
+											icon: {
+												ifActive: {
+													color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
+													size: record.icon.ifActive.size
+												},
+												ifDisabled: record.icon.ifDisabled,
+												otherwise: {
+													color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
+													size: record.icon.otherwise.size
+												}
+											}
+										});
+								}),
+							$author$project$Internal$Material$Button$iconButton(palette)),
+						moreVerticalIcon: $author$project$Internal$Material$Icon$more_vert,
+						searchIcon: $author$project$Internal$Material$Icon$search
+					},
+					elementRow: _List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$alignRight,
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
+						])
+				},
+				menu: {
+					content: content,
+					elementRow: _List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+							$mdgriffith$elm_ui$Element$spacing(8)
+						])
+				},
+				search: $author$project$Internal$Material$TextInput$searchInput(palette)
+			},
+			elementRow: _Utils_ap(
+				$author$project$Widget$Material$Color$textAndBackground(palette.primary),
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$padding(0),
+						$mdgriffith$elm_ui$Element$spacing(8),
+						$mdgriffith$elm_ui$Element$height(
+						$mdgriffith$elm_ui$Element$px(56)),
+						$mdgriffith$elm_ui$Element$width(
+						A2($mdgriffith$elm_ui$Element$minimum, 360, $mdgriffith$elm_ui$Element$fill))
+					]))
+		};
+	});
+var $author$project$Internal$Material$Icon$menu = function (_v0) {
+	var size = _v0.size;
+	var color = _v0.color;
+	return A2(
+		$author$project$Internal$Material$Icon$icon,
+		{color: color, size: size, viewBox: '0 0 48 48'},
+		_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$Internal$Material$AppBar$menuBar = $author$project$Internal$Material$AppBar$internalBar(
+	{
+		menuIcon: $author$project$Internal$Material$Icon$menu,
+		title: _Utils_ap(
+			$author$project$Widget$Material$Typography$h6,
+			_List_fromArray(
+				[
+					A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+				]))
+	});
+var $author$project$Widget$Material$menuBar = $author$project$Internal$Material$AppBar$menuBar;
+var $elm$core$List$singleton = function (value) {
+	return _List_fromArray(
+		[value]);
+};
+var $author$project$UIExplorer$ChangeDarkTheme = function (a) {
+	return {$: 'ChangeDarkTheme', a: a};
+};
+var $author$project$UIExplorer$TypingSearchText = function (a) {
+	return {$: 'TypingSearchText', a: a};
+};
+var $author$project$Internal$Item$toItem = F2(
+	function (style, element) {
+		return function (attr) {
+			return A2(
+				$mdgriffith$elm_ui$Element$el,
+				_Utils_ap(attr, style.element),
+				element(style.content));
+		};
+	});
+var $author$project$Internal$Item$asItem = function (element) {
+	return A2(
+		$author$project$Internal$Item$toItem,
+		{content: _Utils_Tuple0, element: _List_Nil},
+		$elm$core$Basics$always(element));
+};
+var $author$project$Widget$asItem = $author$project$Internal$Item$asItem;
+var $author$project$UIExplorer$PressedColorBlindOption = function (a) {
+	return {$: 'PressedColorBlindOption', a: a};
+};
+var $author$project$UIExplorer$ToggledColorBlindGroup = {$: 'ToggledColorBlindGroup'};
+var $author$project$UIExplorer$colorBlindOptionToString = function (colorBlindOption) {
+	switch (colorBlindOption.$) {
+		case 'Protanopia':
+			return 'Protanopia';
+		case 'Protanomaly':
+			return 'Protanomaly';
+		case 'Deuteranopia':
+			return 'Deuteranopia';
+		case 'Deuteranomaly':
+			return 'Deuteranomaly';
+		case 'Tritanopia':
+			return 'Tritanopia';
+		case 'Tritanomaly':
+			return 'Tritanomaly';
+		case 'Achromatopsia':
+			return 'Achromatopsia';
+		case 'Achromatomaly':
+			return 'Achromatomaly';
+		default:
+			return 'Blind';
+	}
+};
+var $author$project$UIExplorer$darkerGray = A3($mdgriffith$elm_ui$Element$rgb255, 20, 30, 40);
+var $mdgriffith$elm_ui$Internal$Model$Paragraph = {$: 'Paragraph'};
+var $mdgriffith$elm_ui$Element$paragraph = F2(
+	function (attrs, children) {
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asParagraph,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$Paragraph),
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$spacing(5),
+						attrs))),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
+	});
+var $author$project$Internal$Item$insetItem = F2(
+	function (s, _v0) {
+		var onPress = _v0.onPress;
+		var text = _v0.text;
+		var icon = _v0.icon;
+		var content = _v0.content;
+		return A2(
+			$author$project$Internal$Item$toItem,
+			s,
+			function (style) {
+				return A2(
+					$mdgriffith$elm_ui$Element$Input$button,
+					_Utils_ap(
+						style.elementButton,
+						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
+					{
+						label: A2(
+							$mdgriffith$elm_ui$Element$row,
+							style.content.elementRow,
+							_List_fromArray(
+								[
+									A2(
+									$mdgriffith$elm_ui$Element$el,
+									style.content.content.icon.element,
+									icon(style.content.content.icon.content)),
+									A2(
+									$mdgriffith$elm_ui$Element$el,
+									style.content.content.text.elementText,
+									A2(
+										$mdgriffith$elm_ui$Element$paragraph,
+										_List_Nil,
+										$elm$core$List$singleton(
+											$mdgriffith$elm_ui$Element$text(text)))),
+									content(style.content.content.content)
+								])),
+						onPress: onPress
+					});
+			});
+	});
+var $author$project$Internal$Item$expansionItem = F2(
+	function (s, _v0) {
+		var icon = _v0.icon;
+		var text = _v0.text;
+		var onToggle = _v0.onToggle;
+		var content = _v0.content;
+		var isExpanded = _v0.isExpanded;
+		return A2(
+			$elm$core$List$cons,
+			A2(
+				$author$project$Internal$Item$insetItem,
+				s.item,
+				{
+					content: isExpanded ? s.collapseIcon : s.expandIcon,
+					icon: icon,
+					onPress: $elm$core$Maybe$Just(
+						onToggle(!isExpanded)),
+					text: text
+				}),
+			isExpanded ? content : _List_Nil);
+	});
+var $author$project$Widget$expansionItem = function () {
+	var fun = $author$project$Internal$Item$expansionItem;
+	return fun;
+}();
+var $author$project$Internal$Material$Icon$expand_less = function (_v0) {
+	var size = _v0.size;
+	var color = _v0.color;
+	return A2(
+		$author$project$Internal$Material$Icon$icon,
+		{color: color, size: size, viewBox: '0 0 48 48'},
+		_List_fromArray(
+			[
+				A2(
+				$elm$svg$Svg$path,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$d('M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z')
+					]),
+				_List_Nil)
+			]));
+};
+var $author$project$Internal$Material$Icon$expand_more = function (_v0) {
+	var size = _v0.size;
+	var color = _v0.color;
+	return A2(
+		$author$project$Internal$Material$Icon$icon,
+		{color: color, size: size, viewBox: '0 0 48 48'},
+		_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$Internal$Material$Item$insetItem = function (palette) {
+	return {
+		content: {
+			content: {
+				content: {
+					content: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 24
+					},
+					icon: {
+						content: {
+							color: $author$project$Internal$Material$Palette$gray(palette),
+							size: 24
+						},
+						element: _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width(
+								$mdgriffith$elm_ui$Element$px(40)),
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(24))
+							])
+					},
+					text: {
+						elementText: _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+							])
+					}
+				},
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spacing(16),
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+					])
+			},
+			elementButton: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$padding(16)
+				]),
+			ifDisabled: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$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', 'default'))
+				]),
+			otherwise: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonPressedOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonFocusOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonHoverOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						]))
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$padding(0)
+			])
+	};
+};
+var $author$project$Internal$Material$Item$expansionItem = function (palette) {
+	return {
+		collapseIcon: $author$project$Internal$Material$Icon$expand_less,
+		expandIcon: $author$project$Internal$Material$Icon$expand_more,
+		item: $author$project$Internal$Material$Item$insetItem(palette)
+	};
+};
+var $author$project$Widget$Material$expansionItem = $author$project$Internal$Material$Item$expansionItem;
+var $author$project$Widget$insetItem = function () {
+	var fun = $author$project$Internal$Item$insetItem;
+	return fun;
+}();
+var $author$project$Widget$Material$insetItem = $author$project$Internal$Material$Item$insetItem;
+var $author$project$UIExplorer$lightBlue = A3($mdgriffith$elm_ui$Element$rgb255, 176, 208, 225);
+var $author$project$UIExplorer$optionGroupView = F7(
+	function (dark, isExpanded, selectedItem, items, itemToString, onPress, toggleExpand) {
+		var palette = dark ? $author$project$Widget$Material$darkPalette : $author$project$Widget$Material$defaultPalette;
+		var _v0 = dark ? $author$project$UIExplorer$darkerGray : $author$project$UIExplorer$lightBlue;
+		return A2(
+			$author$project$Widget$expansionItem,
+			$author$project$Widget$Material$expansionItem(palette),
+			{
+				content: A2(
+					$elm$core$List$map,
+					function (option) {
+						return A2(
+							$author$project$Widget$insetItem,
+							$author$project$Widget$Material$insetItem(palette),
+							{
+								content: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								onPress: $elm$core$Maybe$Just(
+									onPress(option)),
+								text: itemToString(option)
+							});
+					},
+					isExpanded ? items : _List_Nil),
+				icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+				isExpanded: isExpanded,
+				onToggle: $elm$core$Basics$always(toggleExpand),
+				text: itemToString(selectedItem)
+			});
+	});
+var $author$project$UIExplorer$colorBlindOptionView = F3(
+	function (dark, isExpanded, selectedColorBlindOption) {
+		return A7(
+			$author$project$UIExplorer$optionGroupView,
+			dark,
+			isExpanded,
+			selectedColorBlindOption,
+			A2(
+				$elm$core$List$cons,
+				$elm$core$Maybe$Nothing,
+				A2($elm$core$List$map, $elm$core$Maybe$Just, $author$project$UIExplorer$allColorBlindOptions)),
+			A2(
+				$elm$core$Basics$composeR,
+				$elm$core$Maybe$map($author$project$UIExplorer$colorBlindOptionToString),
+				$elm$core$Maybe$withDefault('No color blindness')),
+			$author$project$UIExplorer$PressedColorBlindOption,
+			$author$project$UIExplorer$ToggledColorBlindGroup);
+	});
+var $author$project$Widget$Material$Typography$subtitle2 = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Font$size(14),
+		$mdgriffith$elm_ui$Element$Font$semiBold,
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.1)
+	]);
+var $mdgriffith$elm_ui$Element$Border$widthXY = F2(
+	function (x, y) {
+		return A2(
+			$mdgriffith$elm_ui$Internal$Model$StyleClass,
+			$mdgriffith$elm_ui$Internal$Flag$borderWidth,
+			A5(
+				$mdgriffith$elm_ui$Internal$Model$BorderWidth,
+				'b-' + ($elm$core$String$fromInt(x) + ('-' + $elm$core$String$fromInt(y))),
+				y,
+				x,
+				y,
+				x));
+	});
+var $mdgriffith$elm_ui$Element$Border$widthEach = function (_v0) {
+	var bottom = _v0.bottom;
+	var top = _v0.top;
+	var left = _v0.left;
+	var right = _v0.right;
+	return (_Utils_eq(top, bottom) && _Utils_eq(left, right)) ? (_Utils_eq(top, right) ? $mdgriffith$elm_ui$Element$Border$width(top) : A2($mdgriffith$elm_ui$Element$Border$widthXY, left, top)) : A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$borderWidth,
+		A5(
+			$mdgriffith$elm_ui$Internal$Model$BorderWidth,
+			'b-' + ($elm$core$String$fromInt(top) + ('-' + ($elm$core$String$fromInt(right) + ('-' + ($elm$core$String$fromInt(bottom) + ('-' + $elm$core$String$fromInt(left))))))),
+			top,
+			right,
+			bottom,
+			left));
+};
+var $author$project$Internal$Material$Item$fullBleedHeader = function (palette) {
+	return {
+		content: {
+			content: {
+				divider: {element: _List_Nil},
+				title: _Utils_ap(
+					$author$project$Widget$Material$Typography$subtitle2,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Font$color(
+							$author$project$Widget$Material$Color$fromColor(
+								$author$project$Internal$Material$Palette$gray(palette))),
+							A2($mdgriffith$elm_ui$Element$paddingXY, 16, 8)
+						]))
+			},
+			elementColumn: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$spacing(8)
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+				$mdgriffith$elm_ui$Element$padding(0),
+				$mdgriffith$elm_ui$Element$Border$widthEach(
+				{bottom: 0, left: 0, right: 0, top: 1}),
+				$mdgriffith$elm_ui$Element$Border$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Internal$Material$Palette$lightGray(palette)))
+			])
+	};
+};
+var $author$project$Widget$Material$fullBleedHeader = $author$project$Internal$Material$Item$fullBleedHeader;
+var $author$project$Internal$Item$headerItem = F2(
+	function (style, title) {
+		return A2(
+			$author$project$Internal$Item$toItem,
+			style,
+			function (_v0) {
+				var elementColumn = _v0.elementColumn;
+				var content = _v0.content;
+				return A2(
+					$mdgriffith$elm_ui$Element$column,
+					elementColumn,
+					_List_fromArray(
+						[
+							A2($mdgriffith$elm_ui$Element$el, content.divider.element, $mdgriffith$elm_ui$Element$none),
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							content.title,
+							$mdgriffith$elm_ui$Element$text(title))
+						]));
+			});
+	});
+var $author$project$Widget$headerItem = $author$project$Internal$Item$headerItem;
+var $author$project$Internal$List$internal = F2(
+	function (style, list) {
+		return A2(
+			$elm$core$List$indexedMap,
+			F2(
+				function (i, fun) {
+					return fun(
+						_Utils_ap(
+							style.element,
+							($elm$core$List$length(list) === 1) ? style.ifSingleton : ((!i) ? style.ifFirst : (_Utils_eq(
+								i,
+								$elm$core$List$length(list) - 1) ? style.ifLast : style.otherwise))));
+				}),
+			list);
+	});
+var $author$project$Internal$List$itemList = function (style) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$author$project$Internal$List$internal(style.content),
+		$mdgriffith$elm_ui$Element$column(style.elementColumn));
+};
+var $author$project$Widget$itemList = function () {
+	var fun = $author$project$Internal$List$itemList;
+	return fun;
+}();
+var $mdgriffith$elm_ui$Element$Lazy$embed = function (x) {
+	switch (x.$) {
+		case 'Unstyled':
+			var html = x.a;
+			return html;
+		case 'Styled':
+			var styled = x.a;
+			return styled.html(
+				A2(
+					$mdgriffith$elm_ui$Internal$Model$OnlyDynamic,
+					{
+						focus: {backgroundColor: $elm$core$Maybe$Nothing, borderColor: $elm$core$Maybe$Nothing, shadow: $elm$core$Maybe$Nothing},
+						hover: $mdgriffith$elm_ui$Internal$Model$AllowHover,
+						mode: $mdgriffith$elm_ui$Internal$Model$Layout
+					},
+					styled.styles));
+		case 'Text':
+			var text = x.a;
+			return $elm$core$Basics$always(
+				$elm$virtual_dom$VirtualDom$text(text));
+		default:
+			return $elm$core$Basics$always(
+				$elm$virtual_dom$VirtualDom$text(''));
+	}
+};
+var $mdgriffith$elm_ui$Element$Lazy$apply5 = F6(
+	function (fn, a, b, c, d, e) {
+		return $mdgriffith$elm_ui$Element$Lazy$embed(
+			A5(fn, a, b, c, d, e));
+	});
+var $elm$virtual_dom$VirtualDom$lazy7 = _VirtualDom_lazy7;
+var $mdgriffith$elm_ui$Element$Lazy$lazy5 = F6(
+	function (fn, a, b, c, d, e) {
+		return $mdgriffith$elm_ui$Internal$Model$Unstyled(
+			A7($elm$virtual_dom$VirtualDom$lazy7, $mdgriffith$elm_ui$Element$Lazy$apply5, fn, a, b, c, d, e));
+	});
+var $author$project$Internal$Material$List$sideSheet = function (palette) {
+	return {
+		content: {
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette)))
+				]),
+			ifFirst: _List_Nil,
+			ifLast: _List_Nil,
+			ifSingleton: _List_Nil,
+			otherwise: _List_Nil
+		},
+		elementColumn: _Utils_ap(
+			$author$project$Widget$Material$Color$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$height($mdgriffith$elm_ui$Element$fill),
+					A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette)))
+				]))
+	};
+};
+var $author$project$Widget$Material$sideSheet = $author$project$Internal$Material$List$sideSheet;
+var $author$project$Internal$Switch$switch = F2(
+	function (style, _v0) {
+		var onPress = _v0.onPress;
+		var description = _v0.description;
+		var active = _v0.active;
+		return A2(
+			$mdgriffith$elm_ui$Element$Input$button,
+			_Utils_ap(
+				style.elementButton,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Region$description(description),
+						$mdgriffith$elm_ui$Element$inFront(
+						A2(
+							$mdgriffith$elm_ui$Element$el,
+							_Utils_ap(
+								style.contentInFront.element,
+								active ? style.contentInFront.ifActive : (_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.contentInFront.ifDisabled : style.contentInFront.otherwise)),
+							A2(
+								$mdgriffith$elm_ui$Element$el,
+								_Utils_ap(
+									style.contentInFront.content.element,
+									active ? style.contentInFront.content.ifActive : (_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.contentInFront.content.ifDisabled : style.contentInFront.content.otherwise)),
+								$mdgriffith$elm_ui$Element$none)))
+					])),
+			{
+				label: A2(
+					$mdgriffith$elm_ui$Element$el,
+					_Utils_ap(
+						style.content.element,
+						active ? style.content.ifActive : (_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.content.ifDisabled : style.content.otherwise)),
+					$mdgriffith$elm_ui$Element$none),
+				onPress: onPress
+			});
+	});
+var $author$project$Widget$switch = function () {
+	var fun = $author$project$Internal$Switch$switch;
+	return fun;
+}();
+var $mdgriffith$elm_ui$Internal$Model$Left = {$: 'Left'};
+var $mdgriffith$elm_ui$Element$alignLeft = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$Left);
+var $avh4$elm_color$Color$gray = A4($avh4$elm_color$Color$RgbaSpace, 211 / 255, 215 / 255, 207 / 255, 1.0);
+var $mdgriffith$elm_ui$Internal$Model$MoveX = function (a) {
+	return {$: 'MoveX', a: a};
+};
+var $mdgriffith$elm_ui$Internal$Flag$moveX = $mdgriffith$elm_ui$Internal$Flag$flag(25);
+var $mdgriffith$elm_ui$Element$moveLeft = function (x) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$TransformComponent,
+		$mdgriffith$elm_ui$Internal$Flag$moveX,
+		$mdgriffith$elm_ui$Internal$Model$MoveX(-x));
+};
+var $mdgriffith$elm_ui$Element$moveRight = function (x) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$TransformComponent,
+		$mdgriffith$elm_ui$Internal$Flag$moveX,
+		$mdgriffith$elm_ui$Internal$Model$MoveX(x));
+};
+var $author$project$Internal$Material$Switch$switch = function (palette) {
+	return {
+		content: {
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(14)),
+					$mdgriffith$elm_ui$Element$width(
+					$mdgriffith$elm_ui$Element$px(34)),
+					$mdgriffith$elm_ui$Element$centerY,
+					$mdgriffith$elm_ui$Element$centerX,
+					$mdgriffith$elm_ui$Element$Border$rounded(10)
+				]),
+			ifActive: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A2($author$project$Widget$Material$Color$scaleOpacity, 0.5, palette.primary)))
+				]),
+			ifDisabled: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$htmlAttribute(
+					A2($elm$html$Html$Attributes$style, 'cursor', 'not-allowed')),
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A3(
+							$author$project$Widget$Material$Color$withShade,
+							$author$project$Internal$Material$Palette$gray(palette),
+							0.5 * $author$project$Widget$Material$Color$buttonDisabledOpacity,
+							palette.surface)))
+				]),
+			otherwise: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A2(
+							$author$project$Widget$Material$Color$scaleOpacity,
+							0.5,
+							$author$project$Internal$Material$Palette$gray(palette))))
+				])
+		},
+		contentInFront: {
+			content: {
+				element: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$height(
+						$mdgriffith$elm_ui$Element$px(20)),
+						$mdgriffith$elm_ui$Element$width(
+						$mdgriffith$elm_ui$Element$px(20)),
+						$mdgriffith$elm_ui$Element$centerY,
+						$mdgriffith$elm_ui$Element$centerX,
+						$mdgriffith$elm_ui$Element$Border$rounded(10),
+						$mdgriffith$elm_ui$Element$Border$shadow(
+						$author$project$Widget$Material$Color$shadow(2)),
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Material$Color$fromColor(palette.surface))
+					]),
+				ifActive: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Material$Color$fromColor(
+							A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+					]),
+				ifDisabled: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Material$Color$fromColor(
+							A3($author$project$Widget$Material$Color$withShade, $avh4$elm_color$Color$gray, $author$project$Widget$Material$Color$buttonDisabledOpacity, palette.surface))),
+						$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+						$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+						$mdgriffith$elm_ui$Element$focused(_List_Nil)
+					]),
+				otherwise: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(
+						$author$project$Widget$Material$Color$fromColor(
+							A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface)))
+					])
+			},
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(38)),
+					$mdgriffith$elm_ui$Element$width(
+					$mdgriffith$elm_ui$Element$px(38)),
+					$mdgriffith$elm_ui$Element$Border$rounded(19)
+				]),
+			ifActive: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$alignRight,
+					$mdgriffith$elm_ui$Element$moveRight(8)
+				]),
+			ifDisabled: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$htmlAttribute(
+					A2($elm$html$Html$Attributes$style, 'cursor', 'not-allowed'))
+				]),
+			otherwise: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, $avh4$elm_color$Color$gray)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, $avh4$elm_color$Color$gray)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, $avh4$elm_color$Color$gray)))
+						])),
+					$mdgriffith$elm_ui$Element$alignLeft,
+					$mdgriffith$elm_ui$Element$moveLeft(8)
+				])
+		},
+		elementButton: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(38)),
+				$mdgriffith$elm_ui$Element$width(
+				$mdgriffith$elm_ui$Element$px(58 - 18)),
+				$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+				$mdgriffith$elm_ui$Element$focused(_List_Nil),
+				$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
+			])
+	};
+};
+var $author$project$Widget$Material$switch = $author$project$Internal$Material$Switch$switch;
+var $author$project$Widget$textInput = function () {
+	var fun = $author$project$Internal$TextInput$textInput;
+	return fun;
+}();
 var $author$project$Internal$Material$TextInput$textInput = function (palette) {
 	return {
 		content: {
@@ -16025,7 +16383,12 @@ var $author$project$Internal$Select$selectButton = F2(
 			$mdgriffith$elm_ui$Element$Input$button,
 			_Utils_ap(
 				style.elementButton,
-				_Utils_eq(b.onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : (selected ? style.ifActive : style.otherwise)),
+				_Utils_ap(
+					_Utils_eq(b.onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : (selected ? style.ifActive : style.otherwise),
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Region$description(b.text)
+						]))),
 			{
 				label: A2(
 					$mdgriffith$elm_ui$Element$row,
@@ -16456,33 +16819,7 @@ var $author$project$UIExplorer$viewSidebarLinks = F5(
 var $author$project$UIExplorer$viewSidebar = F3(
 	function (pages, config, model) {
 		var palette = model.darkThemeEnabled ? $author$project$Widget$Material$darkPalette : $author$project$Widget$Material$defaultPalette;
-		var bgColor = model.darkThemeEnabled ? $author$project$UIExplorer$darkerGray : $author$project$UIExplorer$lightGray;
-		return model.minimizeSidebar ? A2(
-			$mdgriffith$elm_ui$Element$el,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
-				]),
-			A2(
-				$mdgriffith$elm_ui$Element$Input$button,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$width(
-						$mdgriffith$elm_ui$Element$px(
-							$ianmackenzie$elm_units$Pixels$inPixels($author$project$UIExplorer$sidebarMinimizedWidth))),
-						$mdgriffith$elm_ui$Element$Background$color(bgColor),
-						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
-					]),
-				{
-					label: A2(
-						$mdgriffith$elm_ui$Element$el,
-						_List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$moveRight(3)
-							]),
-						$mdgriffith$elm_ui$Element$text('❯')),
-					onPress: $elm$core$Maybe$Just($author$project$UIExplorer$PressedToggleSidebar)
-				})) : A2(
+		return model.minimizeSidebar ? $mdgriffith$elm_ui$Element$none : A2(
 			$author$project$Widget$itemList,
 			$author$project$Widget$Material$sideSheet(palette),
 			$elm$core$List$concat(
@@ -16490,33 +16827,15 @@ var $author$project$UIExplorer$viewSidebar = F3(
 					[
 						_List_fromArray(
 						[
+							A2(
+							$author$project$Widget$headerItem,
+							$author$project$Widget$Material$fullBleedHeader(palette),
+							'Device Toolbar'),
 							A2(
 							$author$project$Widget$insetItem,
 							$author$project$Widget$Material$insetItem(palette),
 							{
 								content: function (_v0) {
-									var size = _v0.size;
-									return A2(
-										$mdgriffith$elm_ui$Element$el,
-										_List_fromArray(
-											[
-												$mdgriffith$elm_ui$Element$Font$size(size)
-											]),
-										$mdgriffith$elm_ui$Element$text('❮'));
-								},
-								icon: function (_v1) {
-									return A2($mdgriffith$elm_ui$Element$el, $author$project$Widget$Material$Typography$h6, config.sidebarTitle);
-								},
-								onPress: $elm$core$Maybe$Just($author$project$UIExplorer$PressedToggleSidebar),
-								text: ''
-							}),
-							$author$project$Widget$divider(
-							$author$project$Widget$Material$fullBleedDivider(palette)),
-							A2(
-							$author$project$Widget$fullBleedItem,
-							$author$project$Widget$Material$fullBleedItem(palette),
-							{
-								icon: function (_v2) {
 									return A2(
 										$author$project$Widget$switch,
 										$author$project$Widget$Material$switch(palette),
@@ -16527,10 +16846,19 @@ var $author$project$UIExplorer$viewSidebar = F3(
 												$author$project$UIExplorer$ChangeDarkTheme(!model.darkThemeEnabled))
 										});
 								},
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
 								onPress: $elm$core$Maybe$Just(
 									$author$project$UIExplorer$ChangeDarkTheme(!model.darkThemeEnabled)),
 								text: 'Dark Theme'
-							}),
+							})
+						]),
+						A3($author$project$UIExplorer$colorBlindOptionView, model.darkThemeEnabled, model.expandColorBlindOptions, model.colorBlindOption),
+						_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$headerItem,
+							$author$project$Widget$Material$fullBleedHeader(palette),
+							'Widgets'),
 							$author$project$Widget$asItem(
 							A2(
 								$mdgriffith$elm_ui$Element$el,
@@ -16543,7 +16871,9 @@ var $author$project$UIExplorer$viewSidebar = F3(
 								A2(
 									$mdgriffith$elm_ui$Element$el,
 									_List_fromArray(
-										[$mdgriffith$elm_ui$Element$centerX, $mdgriffith$elm_ui$Element$centerY]),
+										[
+											A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+										]),
 									A2(
 										$author$project$Widget$textInput,
 										$author$project$Widget$Material$textInput(palette),
@@ -16558,24 +16888,6 @@ var $author$project$UIExplorer$viewSidebar = F3(
 													$mdgriffith$elm_ui$Element$text('Search pages'))),
 											text: model.searchText
 										})))),
-							A2(
-							$author$project$Widget$headerItem,
-							$author$project$Widget$Material$fullBleedHeader(palette),
-							'Device Toolbar')
-						]),
-						A3($author$project$UIExplorer$pageSizeOptionView, model.darkThemeEnabled, model.expandPageSizeOptions, model.pageSizeOption),
-						_List_fromArray(
-						[
-							$author$project$Widget$divider(
-							$author$project$Widget$Material$insetDivider(palette))
-						]),
-						A3($author$project$UIExplorer$colorBlindOptionView, model.darkThemeEnabled, model.expandColorBlindOptions, model.colorBlindOption),
-						_List_fromArray(
-						[
-							A2(
-							$author$project$Widget$headerItem,
-							$author$project$Widget$Material$fullBleedHeader(palette),
-							'Widgets'),
 							$author$project$Widget$asItem(
 							$author$project$UIExplorer$showSearchResults(model.searchText) ? A6($mdgriffith$elm_ui$Element$Lazy$lazy5, $author$project$UIExplorer$viewSearchResults, model.darkThemeEnabled, pages, config, model.page, model.searchText) : A6($mdgriffith$elm_ui$Element$Lazy$lazy5, $author$project$UIExplorer$viewSidebarLinks, model.darkThemeEnabled, pages, config, model.page, model.expandedGroups))
 						])
@@ -16584,7 +16896,7 @@ var $author$project$UIExplorer$viewSidebar = F3(
 var $author$project$UIExplorer$viewSuccess = F3(
 	function (config, pages_, model) {
 		var pages = pages_.a;
-		var actualSidebarWidth = model.minimizeSidebar ? $author$project$UIExplorer$sidebarMinimizedWidth : $author$project$UIExplorer$sidebarWidth;
+		var palette = model.darkThemeEnabled ? $author$project$Widget$Material$darkPalette : $author$project$Widget$Material$defaultPalette;
 		return {
 			body: _List_fromArray(
 				[
@@ -16596,32 +16908,11 @@ var $author$project$UIExplorer$viewSuccess = F3(
 						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
 						A2(
 							$elm$core$List$cons,
-							$mdgriffith$elm_ui$Element$inFront(
-								A2(
-									$mdgriffith$elm_ui$Element$el,
-									_List_fromArray(
-										[
-											$mdgriffith$elm_ui$Element$height(
-											$mdgriffith$elm_ui$Element$px(
-												$ianmackenzie$elm_units$Pixels$inPixels(model.windowSize.height))),
-											$mdgriffith$elm_ui$Element$Font$size(16)
-										]),
-									A3($author$project$UIExplorer$viewSidebar, pages_, config, model))),
-							A2(
-								$elm$core$List$cons,
-								$mdgriffith$elm_ui$Element$behindContent(
-									$mdgriffith$elm_ui$Element$html($author$project$UIExplorer$colorblindnessSvg)),
-								A2(
-									$elm$core$List$cons,
-									$mdgriffith$elm_ui$Element$behindContent(
-										$mdgriffith$elm_ui$Element$html($author$project$UIExplorer$colorblindnessCss)),
-									A2(
-										$elm$core$List$cons,
-										$mdgriffith$elm_ui$Element$Font$color(
-											$author$project$UIExplorer$textColor(model.darkThemeEnabled)),
-										config.layoutAttributes))))),
+							$mdgriffith$elm_ui$Element$Background$color(
+								model.darkThemeEnabled ? $author$project$UIExplorer$black : $author$project$UIExplorer$gray),
+							config.layoutAttributes)),
 					A2(
-						$mdgriffith$elm_ui$Element$row,
+						$mdgriffith$elm_ui$Element$column,
 						_List_fromArray(
 							[
 								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
@@ -16630,75 +16921,87 @@ var $author$project$UIExplorer$viewSuccess = F3(
 						_List_fromArray(
 							[
 								A2(
-								$mdgriffith$elm_ui$Element$el,
+								$author$project$Widget$menuBar,
+								$author$project$Widget$Material$menuBar(palette),
+								{
+									deviceClass: $mdgriffith$elm_ui$Element$Desktop,
+									openLeftSheet: $elm$core$Maybe$Just($author$project$UIExplorer$PressedToggleSidebar),
+									openRightSheet: $elm$core$Maybe$Nothing,
+									openTopSheet: $elm$core$Maybe$Nothing,
+									primaryActions: _List_Nil,
+									search: $elm$core$Maybe$Nothing,
+									title: A2($mdgriffith$elm_ui$Element$el, $author$project$Widget$Material$Typography$h6, config.sidebarTitle)
+								}),
+								A2(
+								$mdgriffith$elm_ui$Element$row,
 								_List_fromArray(
 									[
-										$mdgriffith$elm_ui$Element$width(
-										$mdgriffith$elm_ui$Element$px(
-											$ianmackenzie$elm_units$Pixels$inPixels(actualSidebarWidth)))
+										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+										$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+										$mdgriffith$elm_ui$Element$behindContent(
+										$mdgriffith$elm_ui$Element$html($author$project$UIExplorer$colorblindnessSvg)),
+										$mdgriffith$elm_ui$Element$behindContent(
+										$mdgriffith$elm_ui$Element$html($author$project$UIExplorer$colorblindnessCss)),
+										$mdgriffith$elm_ui$Element$Font$color(
+										$author$project$UIExplorer$textColor(model.darkThemeEnabled))
 									]),
-								$mdgriffith$elm_ui$Element$none),
-								A2(
-								$mdgriffith$elm_ui$Element$el,
-								A2(
-									$elm$core$List$cons,
-									$mdgriffith$elm_ui$Element$alignTop,
-									A2(
-										$elm$core$List$cons,
-										$mdgriffith$elm_ui$Element$width(
+								_List_fromArray(
+									[
+										A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+												$mdgriffith$elm_ui$Element$Font$size(16)
+											]),
+										A3($author$project$UIExplorer$viewSidebar, pages_, config, model)),
+										A2(
+										$mdgriffith$elm_ui$Element$el,
+										_Utils_ap(
+											_List_fromArray(
+												[
+													$mdgriffith$elm_ui$Element$alignTop,
+													$mdgriffith$elm_ui$Element$width(
+													function () {
+														var _v0 = $author$project$UIExplorer$pageSizeOptionWidth(model.pageSizeOption);
+														if (_v0.$ === 'Just') {
+															var width = _v0.a;
+															return $mdgriffith$elm_ui$Element$px(
+																$ianmackenzie$elm_units$Pixels$inPixels(width));
+														} else {
+															return $mdgriffith$elm_ui$Element$fillPortion(999999999);
+														}
+													}()),
+													$mdgriffith$elm_ui$Element$centerX,
+													A2($mdgriffith$elm_ui$Element$paddingXY, 0, 56),
+													$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+													$mdgriffith$elm_ui$Element$Region$mainContent,
+													model.darkThemeEnabled ? $mdgriffith$elm_ui$Element$Background$color(
+													A3($mdgriffith$elm_ui$Element$rgb255, 30, 30, 30)) : $mdgriffith$elm_ui$Element$Background$color(
+													A3($mdgriffith$elm_ui$Element$rgb255, 225, 225, 225))
+												]),
 											function () {
-												var _v0 = $author$project$UIExplorer$pageSizeOptionWidth(model.pageSizeOption);
-												if (_v0.$ === 'Just') {
-													var width = _v0.a;
-													return $mdgriffith$elm_ui$Element$px(
-														$ianmackenzie$elm_units$Pixels$inPixels(width));
+												var _v1 = model.colorBlindOption;
+												if (_v1.$ === 'Nothing') {
+													return _List_Nil;
 												} else {
-													return $mdgriffith$elm_ui$Element$fillPortion(999999999);
+													var colorBlindOption = _v1.a;
+													return $elm$core$List$singleton(
+														$mdgriffith$elm_ui$Element$htmlAttribute(
+															$elm$html$Html$Attributes$class(
+																$author$project$UIExplorer$colorBlindOptionToCssClass(colorBlindOption))));
 												}
 											}()),
 										A2(
-											$elm$core$List$cons,
-											$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
-											A2(
-												$elm$core$List$cons,
-												$mdgriffith$elm_ui$Element$Region$mainContent,
-												A2(
-													$elm$core$List$cons,
-													model.darkThemeEnabled ? $mdgriffith$elm_ui$Element$Background$color(
-														A3($mdgriffith$elm_ui$Element$rgb255, 30, 30, 30)) : $mdgriffith$elm_ui$Element$Background$color(
-														A3($mdgriffith$elm_ui$Element$rgb255, 225, 225, 225)),
-													function () {
-														var _v1 = model.colorBlindOption;
-														if (_v1.$ === 'Nothing') {
-															return _List_Nil;
-														} else {
-															var colorBlindOption = _v1.a;
-															return $elm$core$List$singleton(
-																$mdgriffith$elm_ui$Element$htmlAttribute(
-																	$elm$html$Html$Attributes$class(
-																		$author$project$UIExplorer$colorBlindOptionToCssClass(colorBlindOption))));
-														}
-													}()))))),
-								A2(
-									$mdgriffith$elm_ui$Element$map,
-									$author$project$UIExplorer$PageMsg,
-									A4(
-										pages.view,
-										model.page,
-										$author$project$UIExplorer$contentSize(model),
-										model.darkThemeEnabled,
-										model.pageModel))),
-								A2(
-								$mdgriffith$elm_ui$Element$el,
-								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$Background$color(
-										model.darkThemeEnabled ? $author$project$UIExplorer$black : $author$project$UIExplorer$gray),
-										$mdgriffith$elm_ui$Element$alpha(0.9),
-										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-										$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
-									]),
-								$mdgriffith$elm_ui$Element$none)
+											$mdgriffith$elm_ui$Element$map,
+											$author$project$UIExplorer$PageMsg,
+											A4(
+												pages.view,
+												model.page,
+												$author$project$UIExplorer$contentSize(model),
+												model.darkThemeEnabled,
+												model.pageModel)))
+									]))
 							])))
 				]),
 			title: 'UI Explorer'
@@ -16710,7 +17013,7 @@ var $author$project$UIExplorer$view = F3(
 			var successModel = model.a;
 			return A3($author$project$UIExplorer$viewSuccess, config, pages, successModel);
 		} else {
-			var errorMessage = model.a.errorMessage;
+			var errorMessage = model.a;
 			return {
 				body: _List_fromArray(
 					[
@@ -16886,9 +17189,7 @@ var $author$project$UIExplorer$firstPage = F2(
 						})
 				}));
 	});
-var $icidasset$elm_material_icons$Material$Icons$Types$Color = function (a) {
-	return {$: 'Color', a: a};
-};
+var $mdgriffith$elm_ui$Element$BigDesktop = {$: 'BigDesktop'};
 var $author$project$UIExplorer$Story$addStoryToGroup = function (builder) {
 	return {
 		init: builder.init,
@@ -17295,7 +17596,6 @@ var $author$project$UIExplorer$Story$storySetValue = F2(
 				}
 			case 'TextStoryModel':
 				var storyLabel = model.a;
-				var oldValue = model.b;
 				return A2($author$project$UIExplorer$Story$TextStoryModel, storyLabel, value);
 			case 'OptionListStoryModel':
 				var storyLabel = model.a;
@@ -17371,62 +17671,12 @@ var $author$project$UIExplorer$Story$StorySelect = F2(
 	function (a, b) {
 		return {$: 'StorySelect', a: a, b: b};
 	});
-var $author$project$Widget$Customize$mapElementButton = F2(
-	function (fun, a) {
-		return _Utils_update(
-			a,
-			{
-				elementButton: fun(a.elementButton)
-			});
-	});
-var $author$project$Widget$Customize$elementButton = F2(
-	function (list, a) {
-		return A2(
-			$author$project$Widget$Customize$mapElementButton,
-			function (b) {
-				return _Utils_ap(b, list);
-			},
-			a);
-	});
-var $author$project$Internal$List$internalButton = F2(
-	function (style, list) {
-		return A2(
-			$elm$core$List$indexedMap,
-			function (i) {
-				return $author$project$Internal$Select$selectButton(
-					A2(
-						$author$project$Widget$Customize$elementButton,
-						_Utils_ap(
-							style.element,
-							($elm$core$List$length(list) === 1) ? style.ifSingleton : ((!i) ? style.ifFirst : (_Utils_eq(
-								i,
-								$elm$core$List$length(list) - 1) ? style.ifLast : style.otherwise))),
-						style.content));
-			},
-			list);
-	});
-var $author$project$Internal$List$buttonColumn = function (style) {
-	return A2(
-		$elm$core$Basics$composeR,
-		$author$project$Internal$List$internalButton(
-			{content: style.content, element: style.elementColumn.content.element, ifFirst: style.elementColumn.content.ifFirst, ifLast: style.elementColumn.content.ifLast, ifSingleton: style.elementColumn.content.ifSingleton, otherwise: style.elementColumn.content.otherwise}),
-		$mdgriffith$elm_ui$Element$column(style.elementColumn.elementColumn));
-};
-var $author$project$Widget$buttonColumn = $author$project$Internal$List$buttonColumn;
 var $author$project$Widget$Material$Typography$caption = _List_fromArray(
 	[
 		$mdgriffith$elm_ui$Element$Font$size(12),
 		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.4)
 	]);
-var $author$project$Internal$Material$List$column = {
-	content: {element: _List_Nil, ifFirst: _List_Nil, ifLast: _List_Nil, ifSingleton: _List_Nil, otherwise: _List_Nil},
-	elementColumn: _List_fromArray(
-		[
-			A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8),
-			$mdgriffith$elm_ui$Element$spacing(8)
-		])
-};
-var $author$project$Widget$Material$column = $author$project$Internal$Material$List$column;
+var $author$project$Widget$Material$chip = $author$project$Internal$Material$Chip$chip;
 var $mdgriffith$elm_ui$Element$Input$Thumb = function (a) {
 	return {$: 'Thumb', a: a};
 };
@@ -17450,6 +17700,15 @@ var $miyamoen$select_list$Query$beforeLength = function (_v0) {
 };
 var $miyamoen$select_list$SelectList$beforeLength = $miyamoen$select_list$Query$beforeLength;
 var $miyamoen$select_list$SelectList$index = $miyamoen$select_list$SelectList$beforeLength;
+var $author$project$Internal$Material$List$row = {
+	content: {element: _List_Nil, ifFirst: _List_Nil, ifLast: _List_Nil, ifSingleton: _List_Nil, otherwise: _List_Nil},
+	elementRow: _List_fromArray(
+		[
+			A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8),
+			$mdgriffith$elm_ui$Element$spacing(8)
+		])
+};
+var $author$project$Widget$Material$row = $author$project$Internal$Material$List$row;
 var $author$project$Widget$select = $author$project$Internal$Select$select;
 var $mdgriffith$elm_ui$Internal$Model$getHeight = function (attrs) {
 	return A3(
@@ -17842,79 +18101,6 @@ var $mdgriffith$elm_ui$Element$Input$slider = F2(
 					])));
 	});
 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 $author$project$Internal$Material$Button$textButton = function (palette) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {color: palette.primary, size: 18},
-					ifDisabled: {
-						color: $author$project$Internal$Material$Palette$gray(palette),
-						size: 18
-					},
-					otherwise: {color: palette.primary, size: 18}
-				},
-				text: {
-					contentText: function (b) {
-						return b.content.content.text.contentText;
-					}(
-						$author$project$Internal$Material$Button$baseButton(palette))
-				}
-			},
-			elementRow: function (b) {
-				return b.content.elementRow;
-			}(
-				$author$project$Internal$Material$Button$baseButton(palette))
-		},
-		elementButton: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor(palette.primary)),
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
-						]))
-				])),
-		ifActive: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
-			]),
-		ifDisabled: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor(
-						$author$project$Internal$Material$Palette$gray(palette))),
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-					$mdgriffith$elm_ui$Element$focused(_List_Nil)
-				])),
-		otherwise: _List_Nil
-	};
-};
-var $author$project$Widget$Material$textButton = $author$project$Internal$Material$Button$textButton;
 var $miyamoen$select_list$Types$reverseAppend = F2(
 	function (xs, ys) {
 		return A3($elm$core$List$foldl, $elm$core$List$cons, ys, xs);
@@ -17929,6 +18115,215 @@ var $miyamoen$select_list$Types$toList = function (_v0) {
 		A2($elm$core$List$cons, a, after));
 };
 var $miyamoen$select_list$SelectList$toList = $miyamoen$select_list$Types$toList;
+var $author$project$Internal$List$internalButton = F2(
+	function (style, list) {
+		return A2(
+			$elm$core$List$indexedMap,
+			function (i) {
+				return $author$project$Internal$Select$selectButton(
+					A2(
+						$author$project$Widget$Customize$elementButton,
+						_Utils_ap(
+							style.element,
+							($elm$core$List$length(list) === 1) ? style.ifSingleton : ((!i) ? style.ifFirst : (_Utils_eq(
+								i,
+								$elm$core$List$length(list) - 1) ? style.ifLast : style.otherwise))),
+						style.content));
+			},
+			list);
+	});
+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;
+					if ((_Utils_cmp(r, x / 2) > -1) && (_Utils_cmp(b, y / 2) > -1)) {
+						var newTop = t - (y / 2);
+						var newRight = r - (x / 2);
+						var newLeft = l - (x / 2);
+						var newBottom = b - (y / 2);
+						return $elm$core$Maybe$Just(
+							A2(
+								$mdgriffith$elm_ui$Internal$Model$StyleClass,
+								$mdgriffith$elm_ui$Internal$Flag$padding,
+								A5(
+									$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+									A4($mdgriffith$elm_ui$Internal$Model$paddingNameFloat, newTop, newRight, newBottom, newLeft),
+									newTop,
+									newRight,
+									newBottom,
+									newLeft)));
+					} else {
+						return $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$Internal$List$wrappedButtonRow = function (style) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$author$project$Internal$List$internalButton(
+			{content: style.content, element: style.elementRow.content.element, ifFirst: style.elementRow.content.ifFirst, ifLast: style.elementRow.content.ifLast, ifSingleton: style.elementRow.content.ifSingleton, otherwise: style.elementRow.content.otherwise}),
+		$mdgriffith$elm_ui$Element$wrappedRow(style.elementRow.elementRow));
+};
+var $author$project$Widget$wrappedButtonRow = $author$project$Internal$List$wrappedButtonRow;
 var $author$project$UIExplorer$Story$storyView = F2(
 	function (context, model) {
 		switch (model.$) {
@@ -17942,7 +18337,8 @@ var $author$project$UIExplorer$Story$storyView = F2(
 					$mdgriffith$elm_ui$Element$column,
 					_List_fromArray(
 						[
-							$mdgriffith$elm_ui$Element$spacing(8)
+							$mdgriffith$elm_ui$Element$spacing(8),
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
 						]),
 					_List_fromArray(
 						[
@@ -17977,7 +18373,8 @@ var $author$project$UIExplorer$Story$storyView = F2(
 					$mdgriffith$elm_ui$Element$column,
 					_List_fromArray(
 						[
-							$mdgriffith$elm_ui$Element$spacing(8)
+							$mdgriffith$elm_ui$Element$spacing(8),
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
 						]),
 					_List_fromArray(
 						[
@@ -18003,7 +18400,8 @@ var $author$project$UIExplorer$Story$storyView = F2(
 					$mdgriffith$elm_ui$Element$column,
 					_List_fromArray(
 						[
-							$mdgriffith$elm_ui$Element$spacing(8)
+							$mdgriffith$elm_ui$Element$spacing(8),
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
 						]),
 					_List_fromArray(
 						[
@@ -18012,10 +18410,10 @@ var $author$project$UIExplorer$Story$storyView = F2(
 							$author$project$Widget$Material$Typography$caption,
 							$mdgriffith$elm_ui$Element$text(label)),
 							A2(
-							$author$project$Widget$buttonColumn,
+							$author$project$Widget$wrappedButtonRow,
 							{
-								content: $author$project$Widget$Material$textButton(context.palette),
-								elementColumn: $author$project$Widget$Material$column
+								content: $author$project$Widget$Material$chip(context.palette),
+								elementRow: $author$project$Widget$Material$row
 							},
 							$author$project$Widget$select(
 								{
@@ -18031,7 +18429,6 @@ var $author$project$UIExplorer$Story$storyView = F2(
 													$elm$core$List$filter,
 													function (_v1) {
 														var i = _v1.a;
-														var opt = _v1.b;
 														return _Utils_eq(selected, i);
 													},
 													A2(
@@ -18087,9 +18484,9 @@ var $author$project$UIExplorer$Story$storyView = F2(
 		}
 	});
 var $author$project$UIExplorer$Story$storyTile = F3(
-	function (title, stories, storiesToValue) {
+	function (title, stories, _v0) {
 		return {
-			init: function (_v0) {
+			init: function (_v1) {
 				return _Utils_Tuple2(
 					A2(
 						$elm$core$List$filterMap,
@@ -18116,7 +18513,8 @@ var $author$project$UIExplorer$Story$storyTile = F3(
 								$mdgriffith$elm_ui$Element$column,
 								_List_fromArray(
 									[
-										$mdgriffith$elm_ui$Element$spacing(8)
+										$mdgriffith$elm_ui$Element$spacing(8),
+										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
 									]),
 								A2(
 									$elm$core$List$map,
@@ -18137,7 +18535,6 @@ var $author$project$UIExplorer$Story$build = function (builder) {
 			subscriptions: A2($elm$core$Basics$composeR, $elm$core$Tuple$second, builder.tilelist.subscriptions),
 			update: F2(
 				function (msg, _v0) {
-					var selectorModel = _v0.a;
 					var model = _v0.b;
 					return A2(builder.tilelist.update, msg, model);
 				}),
@@ -18158,111 +18555,91 @@ var $author$project$UIExplorer$Story$build = function (builder) {
 		},
 		A3($author$project$UIExplorer$Story$storyTile, builder.title, builder.stories, builder.storiesToValue));
 };
-var $author$project$Internal$Material$Button$containedButton = function (palette) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
-						size: 18
-					},
-					ifDisabled: {
-						color: $author$project$Internal$Material$Palette$gray(palette),
-						size: 18
-					},
-					otherwise: {
-						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
-						size: 18
-					}
-				},
-				text: {
-					contentText: function (b) {
-						return b.content.content.text.contentText;
-					}(
-						$author$project$Internal$Material$Button$baseButton(palette))
-				}
-			},
-			elementRow: _Utils_ap(
-				$author$project$Internal$Material$Button$baseButton(palette).content.elementRow,
-				_List_fromArray(
-					[
-						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
-					]))
-		},
-		elementButton: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Border$shadow(
-					$author$project$Widget$Material$Color$shadow(2)),
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary))),
-							$mdgriffith$elm_ui$Element$Border$shadow(
-							$author$project$Widget$Material$Color$shadow(12))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary))),
-							$mdgriffith$elm_ui$Element$Border$shadow(
-							$author$project$Widget$Material$Color$shadow(6))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary))),
-							$mdgriffith$elm_ui$Element$Border$shadow(
-							$author$project$Widget$Material$Color$shadow(6))
-						]))
-				])),
-		ifActive: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary))),
-				$mdgriffith$elm_ui$Element$Font$color(
-				$author$project$Widget$Material$Color$fromColor(
-					$author$project$Widget$Material$Color$accessibleTextColor(palette.primary)))
-			]),
-		ifDisabled: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Background$color(
-					$author$project$Widget$Material$Color$fromColor(
-						A2(
-							$author$project$Widget$Material$Color$scaleOpacity,
-							$author$project$Widget$Material$Color$buttonDisabledOpacity,
-							$author$project$Internal$Material$Palette$gray(palette)))),
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor(
-						$author$project$Internal$Material$Palette$gray(palette))),
-					$mdgriffith$elm_ui$Element$Border$shadow(
-					$author$project$Widget$Material$Color$shadow(0)),
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-					$mdgriffith$elm_ui$Element$focused(_List_Nil)
-				])),
-		otherwise: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(palette.primary)),
-				$mdgriffith$elm_ui$Element$Font$color(
-				$author$project$Widget$Material$Color$fromColor(
-					$author$project$Widget$Material$Color$accessibleTextColor(palette.primary)))
-			])
-	};
+var $author$project$UIExplorer$Story$OptionListStory = F2(
+	function (a, b) {
+		return {$: 'OptionListStory', a: a, b: b};
+	});
+var $author$project$UIExplorer$Story$optionListStory = F3(
+	function (label, first, options) {
+		return {
+			info: A2(
+				$author$project$UIExplorer$Story$OptionListStory,
+				label,
+				A2(
+					$elm$core$List$map,
+					$elm$core$Tuple$first,
+					A2($elm$core$List$cons, first, options))),
+			toValue: function (optLabel) {
+				return A2(
+					$elm$core$Maybe$withDefault,
+					first.b,
+					A3(
+						$elm$core$List$foldl,
+						F2(
+							function (_v0, res) {
+								var key = _v0.a;
+								var optvalue = _v0.b;
+								var _v1 = _Utils_Tuple2(
+									res,
+									_Utils_eq(optLabel, key));
+								if (_v1.a.$ === 'Just') {
+									var x = _v1.a.a;
+									return $elm$core$Maybe$Just(x);
+								} else {
+									if (_v1.b) {
+										var _v2 = _v1.a;
+										return $elm$core$Maybe$Just(optvalue);
+									} else {
+										var _v3 = _v1.a;
+										return $elm$core$Maybe$Nothing;
+									}
+								}
+							}),
+						$elm$core$Maybe$Nothing,
+						A2($elm$core$List$cons, first, options)));
+			}
+		};
+	});
+var $author$project$UIExplorer$Story$RangeStory = F2(
+	function (a, b) {
+		return {$: 'RangeStory', a: a, b: b};
+	});
+var $author$project$UIExplorer$Story$rangeStory = F2(
+	function (label, cfg) {
+		return {
+			info: A2($author$project$UIExplorer$Story$RangeStory, label, cfg),
+			toValue: A2(
+				$elm$core$Basics$composeR,
+				$elm$core$String$toInt,
+				$elm$core$Maybe$withDefault(cfg._default))
+		};
+	});
+var $author$project$UIExplorer$Story$TextStory = F2(
+	function (a, b) {
+		return {$: 'TextStory', a: a, b: b};
+	});
+var $author$project$UIExplorer$Story$textStory = F2(
+	function (label, _default) {
+		return {
+			info: A2($author$project$UIExplorer$Story$TextStory, label, _default),
+			toValue: $elm$core$Basics$identity
+		};
+	});
+var $icidasset$elm_material_icons$Material$Icons$Types$Color = function (a) {
+	return {$: 'Color', a: a};
 };
-var $author$project$Widget$Material$containedButton = $author$project$Internal$Material$Button$containedButton;
+var $author$project$UIExplorer$Story$addTile = F2(
+	function (view, tilelist) {
+		return _Utils_update(
+			tilelist,
+			{
+				views: A2(
+					$elm$core$List$append,
+					tilelist.views,
+					_List_fromArray(
+						[view]))
+			});
+	});
 var $icidasset$elm_material_icons$Material$Icons$Internal$f = $elm$svg$Svg$Attributes$fill;
 var $elm$svg$Svg$g = $elm$svg$Svg$trustedNode('g');
 var $icidasset$elm_material_icons$Material$Icons$Internal$icon = F4(
@@ -18298,7 +18675,7 @@ var $icidasset$elm_material_icons$Material$Icons$Internal$icon = F4(
 	});
 var $icidasset$elm_material_icons$Material$Icons$Internal$p = $elm$svg$Svg$path;
 var $icidasset$elm_material_icons$Material$Icons$Internal$v = $elm$svg$Svg$Attributes$viewBox;
-var $icidasset$elm_material_icons$Material$Icons$done = A2(
+var $icidasset$elm_material_icons$Material$Icons$change_history = A2(
 	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
 	_List_fromArray(
 		[
@@ -18310,7 +18687,7 @@ var $icidasset$elm_material_icons$Material$Icons$done = A2(
 			$icidasset$elm_material_icons$Material$Icons$Internal$p,
 			_List_fromArray(
 				[
-					$elm$svg$Svg$Attributes$d('M0 0h24v24H0z'),
+					$elm$svg$Svg$Attributes$d('M0 0h24v24H0V0z'),
 					$icidasset$elm_material_icons$Material$Icons$Internal$f('none')
 				]),
 			_List_Nil),
@@ -18318,7 +18695,7 @@ var $icidasset$elm_material_icons$Material$Icons$done = A2(
 			$icidasset$elm_material_icons$Material$Icons$Internal$p,
 			_List_fromArray(
 				[
-					$elm$svg$Svg$Attributes$d('M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z')
+					$elm$svg$Svg$Attributes$d('M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z')
 				]),
 			_List_Nil)
 		]));
@@ -18337,85 +18714,112 @@ var $author$project$Widget$Icon$elmMaterialIcons = F2(
 						wrapper(color))));
 		};
 	});
-var $author$project$UIExplorer$Story$OptionListStory = F2(
-	function (a, b) {
-		return {$: 'OptionListStory', a: a, b: b};
-	});
-var $author$project$UIExplorer$Story$optionListStory = F3(
-	function (label, _default, options) {
-		return {
-			info: A2(
-				$author$project$UIExplorer$Story$OptionListStory,
-				label,
-				A2($elm$core$List$map, $elm$core$Tuple$first, options)),
-			toValue: function (optLabel) {
-				return A2(
-					$elm$core$Maybe$withDefault,
-					_default,
-					A3(
-						$elm$core$List$foldl,
-						F2(
-							function (_v0, res) {
-								var key = _v0.a;
-								var optvalue = _v0.b;
-								var _v1 = _Utils_Tuple2(
-									res,
-									_Utils_eq(optLabel, key));
-								if (_v1.a.$ === 'Just') {
-									var x = _v1.a.a;
-									return $elm$core$Maybe$Just(x);
-								} else {
-									if (_v1.b) {
-										var _v2 = _v1.a;
-										return $elm$core$Maybe$Just(optvalue);
-									} else {
-										var _v3 = _v1.a;
-										return $elm$core$Maybe$Nothing;
-									}
-								}
-							}),
-						$elm$core$Maybe$Nothing,
-						options));
+var $author$project$UIExplorer$Story$initStaticTiles = {
+	init: $elm$core$Basics$always(
+		_Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none)),
+	subscriptions: $elm$core$Basics$always($elm$core$Platform$Sub$none),
+	update: F2(
+		function (_v0, _v1) {
+			return _Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none);
+		}),
+	views: _List_Nil
+};
+var $elm$core$List$repeatHelp = F3(
+	function (result, n, value) {
+		repeatHelp:
+		while (true) {
+			if (n <= 0) {
+				return result;
+			} else {
+				var $temp$result = A2($elm$core$List$cons, value, result),
+					$temp$n = n - 1,
+					$temp$value = value;
+				result = $temp$result;
+				n = $temp$n;
+				value = $temp$value;
+				continue repeatHelp;
 			}
-		};
+		}
 	});
-var $author$project$Internal$Material$Button$outlinedButton = function (palette) {
+var $elm$core$List$repeat = F2(
+	function (n, value) {
+		return A3($elm$core$List$repeatHelp, _List_Nil, n, value);
+	});
+var $mdgriffith$elm_ui$Element$scrollbarX = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$overflow, $mdgriffith$elm_ui$Internal$Style$classes.scrollbarsX);
+var $author$project$Internal$AppBar$tabBar = F2(
+	function (style, m) {
+		return A3(
+			$author$project$Internal$AppBar$internalNav,
+			_List_fromArray(
+				[
+					A2($mdgriffith$elm_ui$Element$el, style.content.menu.content.title, m.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$Internal$Select$selectButton(style.content.menu.content.menuTabButton),
+						$author$project$Internal$Select$select(m.menu)))
+				]),
+			{
+				content: {
+					actions: style.content.actions,
+					menu: {elementRow: style.content.menu.elementRow},
+					search: style.content.search
+				},
+				elementRow: style.elementRow
+			},
+			m);
+	});
+var $author$project$Widget$tabBar = $author$project$Internal$AppBar$tabBar;
+var $mdgriffith$elm_ui$Internal$Model$Bottom = {$: 'Bottom'};
+var $mdgriffith$elm_ui$Element$alignBottom = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$Bottom);
+var $author$project$Internal$Material$AppBar$menuTabButton = function (palette) {
 	return {
 		content: {
 			content: {
 				icon: {
-					ifActive: {color: palette.primary, size: 18},
+					ifActive: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
+						size: 18
+					},
 					ifDisabled: {
 						color: $author$project$Internal$Material$Palette$gray(palette),
 						size: 18
 					},
-					otherwise: {color: palette.primary, size: 18}
+					otherwise: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
+						size: 18
+					}
 				},
-				text: {
-					contentText: $author$project$Internal$Material$Button$baseButton(palette).content.content.text.contentText
-				}
+				text: {contentText: _List_Nil}
 			},
-			elementRow: _Utils_ap(
-				$author$project$Internal$Material$Button$baseButton(palette).content.elementRow,
-				_List_fromArray(
-					[
-						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
-					]))
+			elementRow: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$spacing(8),
+					$mdgriffith$elm_ui$Element$centerY,
+					$mdgriffith$elm_ui$Element$centerX
+				])
 		},
 		elementButton: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
+			$author$project$Widget$Material$Typography$button,
 			_List_fromArray(
 				[
-					$mdgriffith$elm_ui$Element$Border$width(1),
+					$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$Material$Color$fromColor(palette.primary)),
-					$mdgriffith$elm_ui$Element$Border$color(
 					$author$project$Widget$Material$Color$fromColor(
-						A3(
-							$author$project$Widget$Material$Color$withShade,
-							palette.primary,
-							$author$project$Widget$Material$Color$buttonHoverOpacity,
-							A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface)))),
+						$author$project$Widget$Material$Color$accessibleTextColor(palette.primary))),
+					$mdgriffith$elm_ui$Element$alignBottom,
 					$mdgriffith$elm_ui$Element$mouseDown(
 					_List_fromArray(
 						[
@@ -18440,9 +18844,8 @@ var $author$project$Internal$Material$Button$outlinedButton = function (palette)
 				])),
 		ifActive: _List_fromArray(
 			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+				$mdgriffith$elm_ui$Element$Border$widthEach(
+				{bottom: 2, left: 0, right: 0, top: 0})
 			]),
 		ifDisabled: _Utils_ap(
 			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
@@ -18458,95 +18861,21 @@ var $author$project$Internal$Material$Button$outlinedButton = function (palette)
 		otherwise: _List_Nil
 	};
 };
-var $author$project$Widget$Material$outlinedButton = $author$project$Internal$Material$Button$outlinedButton;
-var $author$project$UIExplorer$Story$TextStory = F2(
-	function (a, b) {
-		return {$: 'TextStory', a: a, b: b};
-	});
-var $author$project$UIExplorer$Story$textStory = F2(
-	function (label, _default) {
-		return {
-			info: A2($author$project$UIExplorer$Story$TextStory, label, _default),
-			toValue: $elm$core$Basics$identity
-		};
-	});
-var $author$project$UIExplorer$Story$addTile = F2(
-	function (view, tilelist) {
-		return _Utils_update(
-			tilelist,
-			{
-				views: A2(
-					$elm$core$List$append,
-					tilelist.views,
-					_List_fromArray(
-						[view]))
-			});
-	});
-var $author$project$Widget$button = function () {
-	var fun = $author$project$Internal$Button$button;
-	return fun;
-}();
-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.elementButton,
-				_Utils_ap(
-					_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Region$description(text)
-						]))),
-			{
-				label: A2(
-					$mdgriffith$elm_ui$Element$el,
-					style.content.elementRow,
-					icon(
-						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.content.content.icon.ifDisabled : style.content.content.icon.otherwise)),
-				onPress: onPress
-			});
-	});
-var $author$project$Widget$iconButton = function () {
-	var fun = $author$project$Internal$Button$iconButton;
-	return fun;
-}();
-var $author$project$UIExplorer$Story$initStaticTiles = {
-	init: $elm$core$Basics$always(
-		_Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none)),
-	subscriptions: $elm$core$Basics$always($elm$core$Platform$Sub$none),
-	update: F2(
-		function (_v0, _v1) {
-			return _Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none);
-		}),
-	views: _List_Nil
+var $author$project$Internal$Material$AppBar$tabBar = function (palette) {
+	return A2(
+		$author$project$Internal$Material$AppBar$internalBar,
+		{
+			menuTabButton: $author$project$Internal$Material$AppBar$menuTabButton(palette),
+			title: _Utils_ap(
+				$author$project$Widget$Material$Typography$h6,
+				_List_fromArray(
+					[
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+					]))
+		},
+		palette);
 };
-var $author$project$Internal$Button$textButton = F2(
-	function (style, _v0) {
-		var onPress = _v0.onPress;
-		var text = _v0.text;
-		return A2(
-			$author$project$Internal$Button$button,
-			style,
-			{
-				icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
-				onPress: onPress,
-				text: text
-			});
-	});
-var $author$project$Widget$textButton = F2(
-	function (style, _v0) {
-		var text = _v0.text;
-		var onPress = _v0.onPress;
-		var fun = $author$project$Internal$Button$textButton;
-		return A2(
-			fun,
-			style,
-			{onPress: onPress, text: text});
-	});
+var $author$project$Widget$Material$tabBar = $author$project$Internal$Material$AppBar$tabBar;
 var $author$project$UIExplorer$Tile$LeftColumnTile = {$: 'LeftColumnTile'};
 var $author$project$Page$viewTile = F2(
 	function (title, content) {
@@ -18571,96 +18900,171 @@ var $author$project$Page$viewTile = F2(
 			title: $elm$core$Maybe$Nothing
 		};
 	});
-var $author$project$Page$Button$viewFunctions = function () {
-	var viewTextButton = F6(
-		function (button, text, icon, onPress, _v4, _v5) {
-			var palette = _v4.palette;
+var $author$project$Page$AppBar$viewFunctions = function () {
+	var viewTabBar = F9(
+		function (titleString, deviceClass, _v2, openRightSheet, openTopSheet, primaryActions, search, _v3, _v4) {
+			var palette = _v3.palette;
 			return A2(
 				$author$project$Page$viewTile,
-				'Widget.textButton',
+				'Widget.button',
 				A2(
-					$author$project$Widget$textButton,
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width(
+							$mdgriffith$elm_ui$Element$px(400)),
+							$mdgriffith$elm_ui$Element$scrollbarX
+						]),
 					A2(
-						$author$project$Widget$Customize$elementButton,
-						_List_fromArray(
-							[$mdgriffith$elm_ui$Element$alignLeft, $mdgriffith$elm_ui$Element$centerY]),
-						button(palette)),
-					{onPress: onPress, text: text}));
+						$author$project$Widget$tabBar,
+						$author$project$Widget$Material$tabBar(palette),
+						{
+							deviceClass: deviceClass,
+							menu: {
+								onSelect: $elm$core$Basics$always(
+									$elm$core$Maybe$Just(_Utils_Tuple0)),
+								options: A2(
+									$elm$core$List$map,
+									function (string) {
+										return {
+											icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+											text: string
+										};
+									},
+									_List_fromArray(
+										['Home', 'About'])),
+								selected: $elm$core$Maybe$Just(0)
+							},
+							openRightSheet: openRightSheet,
+							openTopSheet: openTopSheet,
+							primaryActions: A2(
+								$elm$core$List$repeat,
+								primaryActions,
+								{
+									icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$change_history),
+									onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+									text: 'Action'
+								}),
+							search: search,
+							title: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_Nil,
+								$mdgriffith$elm_ui$Element$text(titleString))
+						})));
 		});
-	var viewIconButton = F6(
-		function (button, text, icon, onPress, _v2, _v3) {
-			var palette = _v2.palette;
-			return A2(
-				$author$project$Page$viewTile,
-				'Widget.itemButton',
-				A2(
-					$author$project$Widget$iconButton,
-					A2(
-						$author$project$Widget$Customize$elementButton,
-						_List_fromArray(
-							[$mdgriffith$elm_ui$Element$alignLeft, $mdgriffith$elm_ui$Element$centerY]),
-						button(palette)),
-					{icon: icon, onPress: onPress, text: text}));
-		});
-	var viewButton = F6(
-		function (button, text, icon, onPress, _v0, _v1) {
+	var viewMenuBar = F9(
+		function (titleString, deviceClass, openLeftSheet, openRightSheet, openTopSheet, primaryActions, search, _v0, _v1) {
 			var palette = _v0.palette;
 			return A2(
 				$author$project$Page$viewTile,
 				'Widget.button',
 				A2(
-					$author$project$Widget$button,
-					button(palette),
-					{icon: icon, onPress: onPress, text: text}));
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width(
+							$mdgriffith$elm_ui$Element$px(400)),
+							$mdgriffith$elm_ui$Element$scrollbarX
+						]),
+					A2(
+						$author$project$Widget$menuBar,
+						$author$project$Widget$Material$menuBar(palette),
+						{
+							deviceClass: deviceClass,
+							openLeftSheet: openLeftSheet,
+							openRightSheet: openRightSheet,
+							openTopSheet: openTopSheet,
+							primaryActions: A2(
+								$elm$core$List$repeat,
+								primaryActions,
+								{
+									icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$change_history),
+									onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+									text: 'Action'
+								}),
+							search: search,
+							title: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_Nil,
+								$mdgriffith$elm_ui$Element$text(titleString))
+						})));
 		});
 	return A3(
 		$elm$core$List$foldl,
 		$author$project$UIExplorer$Story$addTile,
 		$author$project$UIExplorer$Story$initStaticTiles,
 		_List_fromArray(
-			[viewButton, viewTextButton, viewIconButton]));
+			[viewMenuBar, viewTabBar]));
 }();
-var $author$project$Page$Button$book = $author$project$UIExplorer$Story$build(
+var $author$project$Page$AppBar$book = $author$project$UIExplorer$Story$build(
 	A2(
 		$author$project$UIExplorer$Story$addStory,
 		A3(
 			$author$project$UIExplorer$Story$boolStory,
-			'with event handler',
+			'With search',
 			_Utils_Tuple2(
-				$elm$core$Maybe$Just(_Utils_Tuple0),
+				$elm$core$Maybe$Just(
+					{
+						chips: _List_Nil,
+						label: 'Search',
+						onChange: $elm$core$Basics$always(_Utils_Tuple0),
+						placeholder: $elm$core$Maybe$Nothing,
+						text: 'Placeholder Text'
+					}),
 				$elm$core$Maybe$Nothing),
 			true),
 		A2(
 			$author$project$UIExplorer$Story$addStory,
-			A3(
-				$author$project$UIExplorer$Story$optionListStory,
-				'Icon',
-				A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
-				_List_fromArray(
-					[
-						_Utils_Tuple2(
-						'done',
-						A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done))
-					])),
+			A2(
+				$author$project$UIExplorer$Story$rangeStory,
+				'Primary Actions',
+				{_default: 3, max: 5, min: 0, unit: 'Buttons'}),
 			A2(
 				$author$project$UIExplorer$Story$addStory,
-				A2($author$project$UIExplorer$Story$textStory, 'Label', 'OK'),
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'With openTopSheet event handler',
+					_Utils_Tuple2(
+						$elm$core$Maybe$Just(_Utils_Tuple0),
+						$elm$core$Maybe$Nothing),
+					true),
 				A2(
 					$author$project$UIExplorer$Story$addStory,
 					A3(
-						$author$project$UIExplorer$Story$optionListStory,
-						'Style',
-						$author$project$Widget$Material$containedButton,
-						_List_fromArray(
-							[
-								_Utils_Tuple2('contained', $author$project$Widget$Material$containedButton),
-								_Utils_Tuple2('outlined', $author$project$Widget$Material$outlinedButton),
-								_Utils_Tuple2('text', $author$project$Widget$Material$textButton)
-							])),
+						$author$project$UIExplorer$Story$boolStory,
+						'With openRightSheet event handler',
+						_Utils_Tuple2(
+							$elm$core$Maybe$Just(_Utils_Tuple0),
+							$elm$core$Maybe$Nothing),
+						true),
 					A2(
-						$author$project$UIExplorer$Story$book,
-						$elm$core$Maybe$Just('Options'),
-						$author$project$Page$Button$viewFunctions))))));
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$boolStory,
+							'With openLeftSheet event handler',
+							_Utils_Tuple2(
+								$elm$core$Maybe$Just(_Utils_Tuple0),
+								$elm$core$Maybe$Nothing),
+							true),
+						A2(
+							$author$project$UIExplorer$Story$addStory,
+							A3(
+								$author$project$UIExplorer$Story$optionListStory,
+								'Device Class',
+								_Utils_Tuple2('Phone', $mdgriffith$elm_ui$Element$Phone),
+								_List_fromArray(
+									[
+										_Utils_Tuple2('Tablet', $mdgriffith$elm_ui$Element$Tablet),
+										_Utils_Tuple2('Desktop', $mdgriffith$elm_ui$Element$Desktop),
+										_Utils_Tuple2('BigDesktop', $mdgriffith$elm_ui$Element$BigDesktop)
+									])),
+							A2(
+								$author$project$UIExplorer$Story$addStory,
+								A2($author$project$UIExplorer$Story$textStory, 'Title', 'Title'),
+								A2(
+									$author$project$UIExplorer$Story$book,
+									$elm$core$Maybe$Just('Options'),
+									$author$project$Page$AppBar$viewFunctions)))))))));
 var $author$project$UIExplorer$Tile$Builder = function (a) {
 	return {$: 'Builder', a: a};
 };
@@ -18955,16 +19359,29 @@ var $author$project$UIExplorer$Tile$layoutView = F3(
 		if (_v1.$ === 'Just') {
 			var string = _v1.a;
 			return A2(
-				$author$project$Widget$itemList,
-				$author$project$Widget$Material$cardColumn(palette),
+				$mdgriffith$elm_ui$Element$el,
 				_List_fromArray(
 					[
-						A2(
-						$author$project$Widget$headerItem,
-						$author$project$Widget$Material$fullBleedHeader(palette),
-						string),
-						$author$project$Widget$asItem(view.body)
-					]));
+						$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink)
+					]),
+				A2(
+					$author$project$Widget$itemList,
+					$author$project$Widget$Material$cardColumn(palette),
+					_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$headerItem,
+							$author$project$Widget$Material$fullBleedHeader(palette),
+							string),
+							$author$project$Widget$asItem(
+							A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+									]),
+								view.body))
+						])));
 		} else {
 			return view.body;
 		}
@@ -19020,13 +19437,7 @@ var $author$project$UIExplorer$Tile$layoutRowView = F2(
 								]),
 							A2(
 								$elm$core$List$map,
-								A2(
-									$author$project$UIExplorer$Tile$layoutView,
-									palette,
-									_List_fromArray(
-										[
-											$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill)
-										])),
+								A2($author$project$UIExplorer$Tile$layoutView, palette, _List_Nil),
 								$elm$core$List$reverse(right)))
 						])));
 		}
@@ -19048,6 +19459,7 @@ var $author$project$UIExplorer$Tile$page = function (_v0) {
 						_List_fromArray(
 							[
 								$mdgriffith$elm_ui$Element$padding(16),
+								$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
 								$mdgriffith$elm_ui$Element$spacing(32),
 								$mdgriffith$elm_ui$Element$width(
 								$mdgriffith$elm_ui$Element$px(800)),
@@ -19102,24 +19514,20 @@ var $author$project$UIExplorer$Tile$static = F2(
 				})
 		};
 	});
-var $author$project$Page$create = function (_v0) {
-	var title = _v0.title;
-	var description = _v0.description;
-	var book = _v0.book;
-	var demo = _v0.demo;
+var $author$project$Page$create = function (config) {
 	return $author$project$UIExplorer$Tile$page(
 		A2(
-			$author$project$UIExplorer$Tile$next,
-			demo,
+			$author$project$UIExplorer$Tile$nextGroup,
+			config.book,
 			A2(
-				$author$project$UIExplorer$Tile$nextGroup,
-				book,
+				$author$project$UIExplorer$Tile$next,
+				config.demo,
 				$author$project$UIExplorer$Tile$first(
 					A2(
 						$author$project$UIExplorer$Tile$static,
 						_List_Nil,
 						F2(
-							function (_v1, _v2) {
+							function (_v0, _v1) {
 								return A2(
 									$mdgriffith$elm_ui$Element$column,
 									_List_fromArray(
@@ -19131,15 +19539,1589 @@ var $author$project$Page$create = function (_v0) {
 											A2(
 											$mdgriffith$elm_ui$Element$el,
 											$author$project$Widget$Material$Typography$h3,
-											$mdgriffith$elm_ui$Element$text(title)),
+											$mdgriffith$elm_ui$Element$text(config.title)),
 											A2(
 											$mdgriffith$elm_ui$Element$paragraph,
 											_List_Nil,
 											$elm$core$List$singleton(
-												$mdgriffith$elm_ui$Element$text(description)))
+												$mdgriffith$elm_ui$Element$text(config.description)))
 										]));
 							}))))));
 };
+var $author$project$Page$demo = F3(
+	function (fun, context, model) {
+		return function (body) {
+			return {
+				attributes: _List_Nil,
+				body: body,
+				position: $author$project$UIExplorer$Tile$FullWidthTile,
+				title: $elm$core$Maybe$Just('Interactive Demo')
+			};
+		}(
+			A2(fun, context, model));
+	});
+var $author$project$Page$AppBar$RightSheet = {$: 'RightSheet'};
+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$Page$AppBar$init = _Utils_Tuple2(
+	{
+		active: $elm$core$Maybe$Just($author$project$Page$AppBar$RightSheet),
+		searchText: '',
+		selected: 0,
+		showDialog: false,
+		snackbar: $author$project$Widget$Snackbar$init,
+		window: {height: 200, width: 400}
+	},
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$AppBar$Resized = function (a) {
+	return {$: 'Resized', a: a};
+};
+var $author$project$Page$AppBar$TimePassed = function (a) {
+	return {$: 'TimePassed', a: a};
+};
+var $elm$time$Time$Every = F2(
+	function (a, b) {
+		return {$: 'Every', a: a, b: b};
+	});
+var $elm$time$Time$State = F2(
+	function (taggers, processes) {
+		return {processes: processes, taggers: taggers};
+	});
+var $elm$time$Time$init = $elm$core$Task$succeed(
+	A2($elm$time$Time$State, $elm$core$Dict$empty, $elm$core$Dict$empty));
+var $elm$time$Time$addMySub = F2(
+	function (_v0, state) {
+		var interval = _v0.a;
+		var tagger = _v0.b;
+		var _v1 = A2($elm$core$Dict$get, interval, state);
+		if (_v1.$ === 'Nothing') {
+			return A3(
+				$elm$core$Dict$insert,
+				interval,
+				_List_fromArray(
+					[tagger]),
+				state);
+		} else {
+			var taggers = _v1.a;
+			return A3(
+				$elm$core$Dict$insert,
+				interval,
+				A2($elm$core$List$cons, tagger, taggers),
+				state);
+		}
+	});
+var $elm$time$Time$Name = function (a) {
+	return {$: 'Name', a: a};
+};
+var $elm$time$Time$Offset = function (a) {
+	return {$: 'Offset', a: a};
+};
+var $elm$time$Time$Zone = F2(
+	function (a, b) {
+		return {$: 'Zone', a: a, b: b};
+	});
+var $elm$time$Time$customZone = $elm$time$Time$Zone;
+var $elm$time$Time$setInterval = _Time_setInterval;
+var $elm$core$Process$spawn = _Scheduler_spawn;
+var $elm$time$Time$spawnHelp = F3(
+	function (router, intervals, processes) {
+		if (!intervals.b) {
+			return $elm$core$Task$succeed(processes);
+		} else {
+			var interval = intervals.a;
+			var rest = intervals.b;
+			var spawnTimer = $elm$core$Process$spawn(
+				A2(
+					$elm$time$Time$setInterval,
+					interval,
+					A2($elm$core$Platform$sendToSelf, router, interval)));
+			var spawnRest = function (id) {
+				return A3(
+					$elm$time$Time$spawnHelp,
+					router,
+					rest,
+					A3($elm$core$Dict$insert, interval, id, processes));
+			};
+			return A2($elm$core$Task$andThen, spawnRest, spawnTimer);
+		}
+	});
+var $elm$time$Time$onEffects = F3(
+	function (router, subs, _v0) {
+		var processes = _v0.processes;
+		var rightStep = F3(
+			function (_v6, id, _v7) {
+				var spawns = _v7.a;
+				var existing = _v7.b;
+				var kills = _v7.c;
+				return _Utils_Tuple3(
+					spawns,
+					existing,
+					A2(
+						$elm$core$Task$andThen,
+						function (_v5) {
+							return kills;
+						},
+						$elm$core$Process$kill(id)));
+			});
+		var newTaggers = A3($elm$core$List$foldl, $elm$time$Time$addMySub, $elm$core$Dict$empty, subs);
+		var leftStep = F3(
+			function (interval, taggers, _v4) {
+				var spawns = _v4.a;
+				var existing = _v4.b;
+				var kills = _v4.c;
+				return _Utils_Tuple3(
+					A2($elm$core$List$cons, interval, spawns),
+					existing,
+					kills);
+			});
+		var bothStep = F4(
+			function (interval, taggers, id, _v3) {
+				var spawns = _v3.a;
+				var existing = _v3.b;
+				var kills = _v3.c;
+				return _Utils_Tuple3(
+					spawns,
+					A3($elm$core$Dict$insert, interval, id, existing),
+					kills);
+			});
+		var _v1 = A6(
+			$elm$core$Dict$merge,
+			leftStep,
+			bothStep,
+			rightStep,
+			newTaggers,
+			processes,
+			_Utils_Tuple3(
+				_List_Nil,
+				$elm$core$Dict$empty,
+				$elm$core$Task$succeed(_Utils_Tuple0)));
+		var spawnList = _v1.a;
+		var existingDict = _v1.b;
+		var killTask = _v1.c;
+		return A2(
+			$elm$core$Task$andThen,
+			function (newProcesses) {
+				return $elm$core$Task$succeed(
+					A2($elm$time$Time$State, newTaggers, newProcesses));
+			},
+			A2(
+				$elm$core$Task$andThen,
+				function (_v2) {
+					return A3($elm$time$Time$spawnHelp, router, spawnList, existingDict);
+				},
+				killTask));
+	});
+var $elm$time$Time$Posix = function (a) {
+	return {$: 'Posix', a: a};
+};
+var $elm$time$Time$millisToPosix = $elm$time$Time$Posix;
+var $elm$time$Time$now = _Time_now($elm$time$Time$millisToPosix);
+var $elm$time$Time$onSelfMsg = F3(
+	function (router, interval, state) {
+		var _v0 = A2($elm$core$Dict$get, interval, state.taggers);
+		if (_v0.$ === 'Nothing') {
+			return $elm$core$Task$succeed(state);
+		} else {
+			var taggers = _v0.a;
+			var tellTaggers = function (time) {
+				return $elm$core$Task$sequence(
+					A2(
+						$elm$core$List$map,
+						function (tagger) {
+							return A2(
+								$elm$core$Platform$sendToApp,
+								router,
+								tagger(time));
+						},
+						taggers));
+			};
+			return A2(
+				$elm$core$Task$andThen,
+				function (_v1) {
+					return $elm$core$Task$succeed(state);
+				},
+				A2($elm$core$Task$andThen, tellTaggers, $elm$time$Time$now));
+		}
+	});
+var $elm$time$Time$subMap = F2(
+	function (f, _v0) {
+		var interval = _v0.a;
+		var tagger = _v0.b;
+		return A2(
+			$elm$time$Time$Every,
+			interval,
+			A2($elm$core$Basics$composeL, f, tagger));
+	});
+_Platform_effectManagers['Time'] = _Platform_createManager($elm$time$Time$init, $elm$time$Time$onEffects, $elm$time$Time$onSelfMsg, 0, $elm$time$Time$subMap);
+var $elm$time$Time$subscription = _Platform_leaf('Time');
+var $elm$time$Time$every = F2(
+	function (interval, tagger) {
+		return $elm$time$Time$subscription(
+			A2($elm$time$Time$Every, interval, tagger));
+	});
+var $author$project$Page$AppBar$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$batch(
+		_List_fromArray(
+			[
+				$elm$browser$Browser$Events$onResize(
+				F2(
+					function (h, w) {
+						return $author$project$Page$AppBar$Resized(
+							{height: h, width: w});
+					})),
+				A2(
+				$elm$time$Time$every,
+				50,
+				$elm$core$Basics$always(
+					$author$project$Page$AppBar$TimePassed(50)))
+			]));
+};
+var $turboMaCk$queue$Queue$queue = F2(
+	function (fl, rl) {
+		if (!fl.b) {
+			return A2(
+				$turboMaCk$queue$Queue$Queue,
+				$elm$core$List$reverse(rl),
+				_List_Nil);
+		} else {
+			return A2($turboMaCk$queue$Queue$Queue, fl, rl);
+		}
+	});
+var $turboMaCk$queue$Queue$enqueue = F2(
+	function (a, _v0) {
+		var fl = _v0.a;
+		var rl = _v0.b;
+		return A2(
+			$turboMaCk$queue$Queue$queue,
+			fl,
+			A2($elm$core$List$cons, a, rl));
+	});
+var $author$project$Widget$Snackbar$insertFor = F3(
+	function (removeIn, a, model) {
+		var _v0 = model.current;
+		if (_v0.$ === 'Nothing') {
+			return _Utils_update(
+				model,
+				{
+					current: $elm$core$Maybe$Just(
+						_Utils_Tuple2(a, removeIn))
+				});
+		} else {
+			return _Utils_update(
+				model,
+				{
+					queue: A2(
+						$turboMaCk$queue$Queue$enqueue,
+						_Utils_Tuple2(a, removeIn),
+						model.queue)
+				});
+		}
+	});
+var $author$project$Widget$Snackbar$insert = $author$project$Widget$Snackbar$insertFor(10000);
+var $turboMaCk$queue$Queue$dequeue = function (_v0) {
+	var fl = _v0.a;
+	var rl = _v0.b;
+	if (!fl.b) {
+		return _Utils_Tuple2(
+			$elm$core$Maybe$Nothing,
+			A2($turboMaCk$queue$Queue$Queue, _List_Nil, _List_Nil));
+	} else {
+		var head = fl.a;
+		var tail = fl.b;
+		return _Utils_Tuple2(
+			$elm$core$Maybe$Just(head),
+			A2($turboMaCk$queue$Queue$queue, tail, rl));
+	}
+};
+var $author$project$Widget$Snackbar$dismiss = function (model) {
+	return _Utils_update(
+		model,
+		{current: $elm$core$Maybe$Nothing});
+};
+var $author$project$Widget$Snackbar$timePassed = F2(
+	function (ms, model) {
+		var _v0 = model.current;
+		if (_v0.$ === 'Nothing') {
+			var _v1 = $turboMaCk$queue$Queue$dequeue(model.queue);
+			var c = _v1.a;
+			var queue = _v1.b;
+			return _Utils_update(
+				model,
+				{current: c, queue: queue});
+		} else {
+			var _v2 = _v0.a;
+			var removeIn = _v2.b;
+			return (_Utils_cmp(removeIn, ms) < 1) ? $author$project$Widget$Snackbar$dismiss(model) : _Utils_update(
+				model,
+				{
+					current: A2(
+						$elm$core$Maybe$map,
+						$elm$core$Tuple$mapSecond(
+							$elm$core$Basics$add(-ms)),
+						model.current)
+				});
+		}
+	});
+var $author$project$Page$AppBar$update = F2(
+	function (msg, model) {
+		switch (msg.$) {
+			case 'ChangedSidebar':
+				var maybePart = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{active: maybePart}),
+					$elm$core$Platform$Cmd$none);
+			case 'Resized':
+				var window = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{window: window}),
+					$elm$core$Platform$Cmd$none);
+			case 'SetSelected':
+				var _int = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{selected: _int}),
+					$elm$core$Platform$Cmd$none);
+			case 'AddSnackbar':
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{
+							snackbar: A2($author$project$Widget$Snackbar$insert, 'This is a message', model.snackbar)
+						}),
+					$elm$core$Platform$Cmd$none);
+			case 'ShowDialog':
+				var bool = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{showDialog: bool}),
+					$elm$core$Platform$Cmd$none);
+			case 'SetSearchText':
+				var maybeString = msg.a;
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{searchText: maybeString}),
+					$elm$core$Platform$Cmd$none);
+			default:
+				var sec = msg.a;
+				return _Utils_Tuple2(
+					function () {
+						var _v1 = model.active;
+						_v1$2:
+						while (true) {
+							if (_v1.$ === 'Just') {
+								switch (_v1.a.$) {
+									case 'LeftSheet':
+										var _v2 = _v1.a;
+										return model;
+									case 'RightSheet':
+										var _v3 = _v1.a;
+										return model;
+									default:
+										break _v1$2;
+								}
+							} else {
+								break _v1$2;
+							}
+						}
+						return _Utils_update(
+							model,
+							{
+								snackbar: A2($author$project$Widget$Snackbar$timePassed, sec, model.snackbar)
+							});
+					}(),
+					$elm$core$Platform$Cmd$none);
+		}
+	});
+var $author$project$Page$AppBar$AddSnackbar = {$: 'AddSnackbar'};
+var $author$project$Page$AppBar$ChangedSidebar = function (a) {
+	return {$: 'ChangedSidebar', a: a};
+};
+var $author$project$Page$AppBar$LeftSheet = {$: 'LeftSheet'};
+var $author$project$Page$AppBar$Search = {$: 'Search'};
+var $author$project$Page$AppBar$SetSearchText = function (a) {
+	return {$: 'SetSearchText', a: a};
+};
+var $author$project$Page$AppBar$SetSelected = function (a) {
+	return {$: 'SetSelected', a: a};
+};
+var $author$project$Page$AppBar$ShowDialog = function (a) {
+	return {$: 'ShowDialog', a: a};
+};
+var $author$project$Internal$Material$Button$containedButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
+						size: 18
+					},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					otherwise: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.primary),
+						size: 18
+					}
+				},
+				text: {
+					contentText: function (b) {
+						return b.content.content.text.contentText;
+					}(
+						$author$project$Internal$Material$Button$baseButton(palette))
+				}
+			},
+			elementRow: _Utils_ap(
+				$author$project$Internal$Material$Button$baseButton(palette).content.elementRow,
+				_List_fromArray(
+					[
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+					]))
+		},
+		elementButton: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$shadow(
+					$author$project$Widget$Material$Color$shadow(2)),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary))),
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Material$Color$shadow(12))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary))),
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Material$Color$shadow(6))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary))),
+							$mdgriffith$elm_ui$Element$Border$shadow(
+							$author$project$Widget$Material$Color$shadow(6))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A3($author$project$Widget$Material$Color$withShade, palette.on.primary, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary))),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Widget$Material$Color$accessibleTextColor(palette.primary)))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A2(
+							$author$project$Widget$Material$Color$scaleOpacity,
+							$author$project$Widget$Material$Color$buttonDisabledOpacity,
+							$author$project$Internal$Material$Palette$gray(palette)))),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$Border$shadow(
+					$author$project$Widget$Material$Color$shadow(0)),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		otherwise: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(palette.primary)),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Widget$Material$Color$accessibleTextColor(palette.primary)))
+			])
+	};
+};
+var $author$project$Internal$Material$Button$textButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {color: palette.primary, size: 18},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					otherwise: {color: palette.primary, size: 18}
+				},
+				text: {
+					contentText: function (b) {
+						return b.content.content.text.contentText;
+					}(
+						$author$project$Internal$Material$Button$baseButton(palette))
+				}
+			},
+			elementRow: function (b) {
+				return b.content.elementRow;
+			}(
+				$author$project$Internal$Material$Button$baseButton(palette))
+		},
+		elementButton: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(palette.primary)),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		otherwise: _List_Nil
+	};
+};
+var $author$project$Internal$Material$Dialog$alertDialog = function (palette) {
+	return {
+		content: {
+			buttons: {
+				content: {
+					accept: $author$project$Internal$Material$Button$containedButton(palette),
+					dismiss: $author$project$Internal$Material$Button$textButton(palette)
+				},
+				elementRow: _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
+					])
+			},
+			text: {
+				contentText: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$paddingEach(
+						{bottom: 0, left: 24, right: 24, top: 20})
+					])
+			},
+			title: {
+				contentText: _Utils_ap(
+					$author$project$Widget$Material$Typography$h6,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$paddingEach(
+							{bottom: 0, left: 24, right: 24, top: 20})
+						]))
+			}
+		},
+		elementColumn: _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$Material$Color$fromColor(palette.surface))
+			])
+	};
+};
+var $author$project$Widget$Material$alertDialog = $author$project$Internal$Material$Dialog$alertDialog;
+var $author$project$Widget$button = function () {
+	var fun = $author$project$Internal$Button$button;
+	return fun;
+}();
+var $author$project$Widget$Material$containedButton = $author$project$Internal$Material$Button$containedButton;
+var $author$project$Page$AppBar$container = function (palette) {
+	return _Utils_ap(
+		$author$project$Widget$Material$Color$textAndBackground(palette.background),
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Font$family(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Font$typeface('Roboto'),
+						$mdgriffith$elm_ui$Element$Font$sansSerif
+					])),
+				$mdgriffith$elm_ui$Element$Font$size(16),
+				$mdgriffith$elm_ui$Element$Font$letterSpacing(0.5)
+			]));
+};
+var $author$project$Internal$Button$textButton = F2(
+	function (style, _v0) {
+		var onPress = _v0.onPress;
+		var text = _v0.text;
+		return A2(
+			$author$project$Internal$Button$button,
+			style,
+			{
+				icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+				onPress: onPress,
+				text: text
+			});
+	});
+var $author$project$Internal$Dialog$dialog = F2(
+	function (style, _v0) {
+		var title = _v0.title;
+		var text = _v0.text;
+		var accept = _v0.accept;
+		var dismiss = _v0.dismiss;
+		return {
+			content: A2(
+				$mdgriffith$elm_ui$Element$column,
+				_Utils_ap(
+					_List_fromArray(
+						[$mdgriffith$elm_ui$Element$centerX, $mdgriffith$elm_ui$Element$centerY]),
+					style.elementColumn),
+				_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.content.title.contentText)),
+							title)),
+						A2(
+						$mdgriffith$elm_ui$Element$paragraph,
+						style.content.text.contentText,
+						$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.content.buttons.elementRow),
+						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.content.buttons.content.accept, acceptButton));
+								} else {
+									var acceptButton = _v1.a.a;
+									var dismissButton = _v1.b.a;
+									return _List_fromArray(
+										[
+											A2($author$project$Internal$Button$textButton, style.content.buttons.content.dismiss, dismissButton),
+											A2($author$project$Internal$Button$textButton, style.content.buttons.content.accept, acceptButton)
+										]);
+								}
+							} else {
+								return _List_Nil;
+							}
+						}())
+					])),
+			onDismiss: function () {
+				var _v3 = _Utils_Tuple2(accept, dismiss);
+				if (_v3.a.$ === 'Nothing') {
+					if (_v3.b.$ === 'Nothing') {
+						var _v4 = _v3.a;
+						var _v5 = _v3.b;
+						return $elm$core$Maybe$Nothing;
+					} else {
+						var _v6 = _v3.a;
+						var onPress = _v3.b.a.onPress;
+						return onPress;
+					}
+				} else {
+					return $elm$core$Maybe$Nothing;
+				}
+			}()
+		};
+	});
+var $author$project$Widget$dialog = function () {
+	var fun = $author$project$Internal$Dialog$dialog;
+	return fun;
+}();
+var $author$project$Widget$Customize$mapElementColumn = F2(
+	function (fun, a) {
+		return _Utils_update(
+			a,
+			{
+				elementColumn: fun(a.elementColumn)
+			});
+	});
+var $author$project$Widget$Customize$elementColumn = F2(
+	function (list, a) {
+		return A2(
+			$author$project$Widget$Customize$mapElementColumn,
+			function (b) {
+				return _Utils_ap(b, list);
+			},
+			a);
+	});
+var $author$project$Widget$Layout$leftSheet = F2(
+	function (style, _v0) {
+		var title = _v0.title;
+		var onDismiss = _v0.onDismiss;
+		var menu = _v0.menu;
+		return {
+			content: A2(
+				$author$project$Internal$List$itemList,
+				A2(
+					$author$project$Widget$Customize$elementColumn,
+					_List_fromArray(
+						[$mdgriffith$elm_ui$Element$alignLeft]),
+					style.sheet),
+				A2(
+					$elm$core$List$cons,
+					$author$project$Internal$Item$asItem(title),
+					A2($author$project$Internal$Item$selectItem, style.button, menu))),
+			onDismiss: $elm$core$Maybe$Just(onDismiss)
+		};
+	});
+var $author$project$Widget$Layout$orderModals = function (modals) {
+	return A2(
+		$elm$core$List$filterMap,
+		$elm$core$Basics$identity,
+		_List_fromArray(
+			[modals.dialog, modals.leftSheet, modals.rightSheet, modals.topSheet]));
+};
+var $elm$core$List$takeReverse = F3(
+	function (n, list, kept) {
+		takeReverse:
+		while (true) {
+			if (n <= 0) {
+				return kept;
+			} else {
+				if (!list.b) {
+					return kept;
+				} else {
+					var x = list.a;
+					var xs = list.b;
+					var $temp$n = n - 1,
+						$temp$list = xs,
+						$temp$kept = A2($elm$core$List$cons, x, kept);
+					n = $temp$n;
+					list = $temp$list;
+					kept = $temp$kept;
+					continue takeReverse;
+				}
+			}
+		}
+	});
+var $elm$core$List$takeTailRec = F2(
+	function (n, list) {
+		return $elm$core$List$reverse(
+			A3($elm$core$List$takeReverse, n, list, _List_Nil));
+	});
+var $elm$core$List$takeFast = F3(
+	function (ctr, n, list) {
+		if (n <= 0) {
+			return _List_Nil;
+		} else {
+			var _v0 = _Utils_Tuple2(n, list);
+			_v0$1:
+			while (true) {
+				_v0$5:
+				while (true) {
+					if (!_v0.b.b) {
+						return list;
+					} else {
+						if (_v0.b.b.b) {
+							switch (_v0.a) {
+								case 1:
+									break _v0$1;
+								case 2:
+									var _v2 = _v0.b;
+									var x = _v2.a;
+									var _v3 = _v2.b;
+									var y = _v3.a;
+									return _List_fromArray(
+										[x, y]);
+								case 3:
+									if (_v0.b.b.b.b) {
+										var _v4 = _v0.b;
+										var x = _v4.a;
+										var _v5 = _v4.b;
+										var y = _v5.a;
+										var _v6 = _v5.b;
+										var z = _v6.a;
+										return _List_fromArray(
+											[x, y, z]);
+									} else {
+										break _v0$5;
+									}
+								default:
+									if (_v0.b.b.b.b && _v0.b.b.b.b.b) {
+										var _v7 = _v0.b;
+										var x = _v7.a;
+										var _v8 = _v7.b;
+										var y = _v8.a;
+										var _v9 = _v8.b;
+										var z = _v9.a;
+										var _v10 = _v9.b;
+										var w = _v10.a;
+										var tl = _v10.b;
+										return (ctr > 1000) ? A2(
+											$elm$core$List$cons,
+											x,
+											A2(
+												$elm$core$List$cons,
+												y,
+												A2(
+													$elm$core$List$cons,
+													z,
+													A2(
+														$elm$core$List$cons,
+														w,
+														A2($elm$core$List$takeTailRec, n - 4, tl))))) : A2(
+											$elm$core$List$cons,
+											x,
+											A2(
+												$elm$core$List$cons,
+												y,
+												A2(
+													$elm$core$List$cons,
+													z,
+													A2(
+														$elm$core$List$cons,
+														w,
+														A3($elm$core$List$takeFast, ctr + 1, n - 4, tl)))));
+									} else {
+										break _v0$5;
+									}
+							}
+						} else {
+							if (_v0.a === 1) {
+								break _v0$1;
+							} else {
+								break _v0$5;
+							}
+						}
+					}
+				}
+				return list;
+			}
+			var _v1 = _v0.b;
+			var x = _v1.a;
+			return _List_fromArray(
+				[x]);
+		}
+	});
+var $elm$core$List$take = F2(
+	function (n, list) {
+		return A3($elm$core$List$takeFast, 0, n, list);
+	});
+var $author$project$Widget$Layout$partitionActions = function (actions) {
+	return {
+		moreActions: ($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))),
+		primaryActions: ($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)))
+	};
+};
+var $author$project$Widget$Layout$rightSheet = F2(
+	function (style, _v0) {
+		var onDismiss = _v0.onDismiss;
+		var moreActions = _v0.moreActions;
+		return {
+			content: A2(
+				$author$project$Internal$List$itemList,
+				A2(
+					$author$project$Widget$Customize$elementColumn,
+					_List_fromArray(
+						[$mdgriffith$elm_ui$Element$alignRight]),
+					style.sheet),
+				A2(
+					$elm$core$List$map,
+					function (_v1) {
+						var onPress = _v1.onPress;
+						var text = _v1.text;
+						var icon = _v1.icon;
+						return A2(
+							$author$project$Internal$Item$insetItem,
+							style.insetItem,
+							{
+								content: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								icon: icon,
+								onPress: onPress,
+								text: text
+							});
+					},
+					moreActions)),
+			onDismiss: $elm$core$Maybe$Just(onDismiss)
+		};
+	});
+var $author$project$Page$AppBar$searchFill = function (palette) {
+	return {
+		content: {
+			chips: {
+				content: $author$project$Widget$Material$chip(palette),
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spacing(8)
+					])
+			},
+			text: {
+				elementTextInput: _Utils_ap(
+					$author$project$Widget$Material$Color$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)
+						]))
+			}
+		},
+		elementRow: _Utils_ap(
+			$author$project$Widget$Material$Color$textAndBackground(palette.surface),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(56))
+				]))
+	};
+};
+var $author$project$Widget$Customize$elementRow = F2(
+	function (list, a) {
+		return A2(
+			$author$project$Widget$Customize$mapElementRow,
+			function (b) {
+				return _Utils_ap(b, list);
+			},
+			a);
+	});
+var $author$project$Widget$Layout$searchSheet = F2(
+	function (style, _v0) {
+		var onDismiss = _v0.onDismiss;
+		var search = _v0.search;
+		return {
+			content: A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$alignTop,
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+					]),
+				A2(
+					$author$project$Internal$TextInput$textInput,
+					A2(
+						$author$project$Widget$Customize$mapContent,
+						function (record) {
+							return _Utils_update(
+								record,
+								{text: record.text});
+						},
+						A2(
+							$author$project$Widget$Customize$elementRow,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+								]),
+							style)),
+					search)),
+			onDismiss: $elm$core$Maybe$Just(onDismiss)
+		};
+	});
+var $author$project$Internal$Modal$background = function (onDismiss) {
+	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$clip
+		]);
+};
+var $author$project$Internal$Modal$singleModal = A2(
+	$elm$core$Basics$composeR,
+	$elm$core$List$head,
+	A2(
+		$elm$core$Basics$composeR,
+		$elm$core$Maybe$map(
+			function (_v0) {
+				var onDismiss = _v0.onDismiss;
+				var content = _v0.content;
+				return _Utils_ap(
+					$author$project$Internal$Modal$background(onDismiss),
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$inFront(content)
+						]));
+			}),
+		$elm$core$Maybe$withDefault(_List_Nil)));
+var $author$project$Widget$singleModal = $author$project$Internal$Modal$singleModal;
+var $author$project$Widget$Material$Color$accessibleWithTextColor = F2(
+	function (c, color) {
+		var newConstrast = 7;
+		var l2 = 1 + ($avh4$elm_color$Color$toRgba(color).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(color) - 1));
+		var lighterLuminance = (newConstrast * (l2 + 0.05)) - 0.05;
+		var l1 = 1 + ($avh4$elm_color$Color$toRgba(c).alpha * ($noahzgordon$elm_color_extra$Color$Accessibility$luminance(c) - 1));
+		var darkerLuminance = (l2 + 0.05) - (0.05 / newConstrast);
+		return ((_Utils_cmp(l1, l2) > 0) ? ((((l1 + 0.05) / (l2 + 0.05)) < 7) ? A2(
+			$elm$core$Basics$composeR,
+			$noahzgordon$elm_color_extra$Color$Convert$colorToLab,
+			A2(
+				$elm$core$Basics$composeR,
+				function (col) {
+					return _Utils_update(
+						col,
+						{l: 100 * lighterLuminance});
+				},
+				$noahzgordon$elm_color_extra$Color$Convert$labToColor)) : $elm$core$Basics$identity) : ((((l2 + 0.05) / (l1 + 0.05)) < 7) ? A2(
+			$elm$core$Basics$composeR,
+			$noahzgordon$elm_color_extra$Color$Convert$colorToLab,
+			A2(
+				$elm$core$Basics$composeR,
+				function (col) {
+					return _Utils_update(
+						col,
+						{l: 100 * darkerLuminance});
+				},
+				$noahzgordon$elm_color_extra$Color$Convert$labToColor)) : $elm$core$Basics$identity))(c);
+	});
+var $author$project$Widget$Material$Color$dark = A3($avh4$elm_color$Color$rgb255, 50, 50, 50);
+var $author$project$Internal$Material$Snackbar$snackbar = function (palette) {
+	return {
+		content: {
+			button: A2(
+				$author$project$Widget$Customize$elementButton,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Font$color(
+						$author$project$Widget$Material$Color$fromColor(
+							A2($author$project$Widget$Material$Color$accessibleWithTextColor, palette.primary, $author$project$Widget$Material$Color$dark)))
+					]),
+				$author$project$Internal$Material$Button$textButton(palette)),
+			text: {
+				elementText: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$centerX,
+						A2($mdgriffith$elm_ui$Element$paddingXY, 10, 8)
+					])
+			}
+		},
+		elementRow: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$Color$dark)),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Widget$Material$Color$accessibleTextColor($author$project$Widget$Material$Color$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$Material$Color$shadow(2))
+			])
+	};
+};
+var $author$project$Widget$Material$snackbar = $author$project$Internal$Material$Snackbar$snackbar;
+var $author$project$Widget$Snackbar$current = function (model) {
+	return A2($elm$core$Maybe$map, $elm$core$Tuple$first, model.current);
+};
+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.elementRow,
+						_List_fromArray(
+							[
+								A2(
+								$mdgriffith$elm_ui$Element$paragraph,
+								style.content.text.elementText,
+								$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$Internal$Button$textButton(style.content.button),
+									button))
+							]));
+				}),
+			$author$project$Widget$Snackbar$current(model));
+	});
+var $author$project$Page$AppBar$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var snackbar = _v1.snackbar;
+		var searchText = _v1.searchText;
+		var selected = _v1.selected;
+		var showDialog = _v1.showDialog;
+		var active = _v1.active;
+		var titleEl = A2(
+			$mdgriffith$elm_ui$Element$el,
+			_Utils_ap(
+				$author$project$Widget$Material$Typography$h6,
+				_List_fromArray(
+					[
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+					])),
+			$mdgriffith$elm_ui$Element$text('Title'));
+		var snackbarElem = 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(8),
+							$mdgriffith$elm_ui$Element$alignBottom,
+							$mdgriffith$elm_ui$Element$alignRight
+						])),
+				A3(
+					$author$project$Widget$Snackbar$view,
+					$author$project$Widget$Material$snackbar(palette),
+					function (text) {
+						return {button: $elm$core$Maybe$Nothing, text: text};
+					},
+					snackbar)));
+		var search = {chips: _List_Nil, label: 'Search', onChange: $author$project$Page$AppBar$SetSearchText, placeholder: $elm$core$Maybe$Nothing, text: searchText};
+		var onDismiss = $author$project$Page$AppBar$ChangedSidebar($elm$core$Maybe$Nothing);
+		var menu = {
+			onSelect: A2($elm$core$Basics$composeR, $author$project$Page$AppBar$SetSelected, $elm$core$Maybe$Just),
+			options: A2(
+				$elm$core$List$map,
+				function (string) {
+					return {
+						icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+						text: string
+					};
+				},
+				_List_fromArray(
+					['Home', 'About'])),
+			selected: $elm$core$Maybe$Just(selected)
+		};
+		var dialog = showDialog ? $elm$core$Maybe$Just(
+			A2(
+				$author$project$Widget$dialog,
+				$author$project$Widget$Material$alertDialog(palette),
+				{
+					accept: $elm$core$Maybe$Nothing,
+					dismiss: $elm$core$Maybe$Just(
+						{
+							onPress: $elm$core$Maybe$Just(
+								$author$project$Page$AppBar$ShowDialog(false)),
+							text: 'Accept'
+						}),
+					text: 'This is a dialog window',
+					title: $elm$core$Maybe$Just('Dialog')
+				})) : $elm$core$Maybe$Nothing;
+		var deviceClass = $mdgriffith$elm_ui$Element$Phone;
+		var actions = A2(
+			$elm$core$List$repeat,
+			5,
+			{
+				icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$change_history),
+				onPress: $elm$core$Maybe$Nothing,
+				text: 'Action'
+			});
+		var _v2 = $author$project$Widget$Layout$partitionActions(actions);
+		var primaryActions = _v2.primaryActions;
+		var moreActions = _v2.moreActions;
+		var modals = $author$project$Widget$Layout$orderModals(
+			{
+				bottomSheet: $elm$core$Maybe$Nothing,
+				dialog: dialog,
+				leftSheet: _Utils_eq(
+					active,
+					$elm$core$Maybe$Just($author$project$Page$AppBar$LeftSheet)) ? $elm$core$Maybe$Just(
+					A2(
+						$author$project$Widget$Layout$leftSheet,
+						{
+							button: $author$project$Widget$Material$selectItem(palette),
+							sheet: $author$project$Widget$Material$sideSheet(palette)
+						},
+						{menu: menu, onDismiss: onDismiss, title: titleEl})) : $elm$core$Maybe$Nothing,
+				rightSheet: _Utils_eq(
+					active,
+					$elm$core$Maybe$Just($author$project$Page$AppBar$RightSheet)) ? $elm$core$Maybe$Just(
+					A2(
+						$author$project$Widget$Layout$rightSheet,
+						{
+							insetItem: $author$project$Widget$Material$insetItem(palette),
+							sheet: $author$project$Widget$Material$sideSheet(palette)
+						},
+						{moreActions: moreActions, onDismiss: onDismiss})) : $elm$core$Maybe$Nothing,
+				topSheet: _Utils_eq(
+					active,
+					$elm$core$Maybe$Just($author$project$Page$AppBar$Search)) ? $elm$core$Maybe$Just(
+					A2(
+						$author$project$Widget$Layout$searchSheet,
+						$author$project$Page$AppBar$searchFill(palette),
+						{onDismiss: onDismiss, search: search})) : $elm$core$Maybe$Nothing
+			});
+		var nav = (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Phone) || (_Utils_eq(deviceClass, $mdgriffith$elm_ui$Element$Tablet) || ($elm$core$List$length(menu.options) > 5))) ? A2(
+			$author$project$Widget$menuBar,
+			$author$project$Widget$Material$menuBar(palette),
+			{
+				deviceClass: deviceClass,
+				openLeftSheet: $elm$core$Maybe$Just(
+					$author$project$Page$AppBar$ChangedSidebar(
+						$elm$core$Maybe$Just($author$project$Page$AppBar$LeftSheet))),
+				openRightSheet: $elm$core$Maybe$Just(
+					$author$project$Page$AppBar$ChangedSidebar(
+						$elm$core$Maybe$Just($author$project$Page$AppBar$RightSheet))),
+				openTopSheet: $elm$core$Maybe$Just(
+					$author$project$Page$AppBar$ChangedSidebar(
+						$elm$core$Maybe$Just($author$project$Page$AppBar$Search))),
+				primaryActions: primaryActions,
+				search: $elm$core$Maybe$Just(search),
+				title: titleEl
+			}) : A2(
+			$author$project$Widget$tabBar,
+			$author$project$Widget$Material$tabBar(palette),
+			{
+				deviceClass: deviceClass,
+				menu: menu,
+				openRightSheet: $elm$core$Maybe$Just(
+					$author$project$Page$AppBar$ChangedSidebar(
+						$elm$core$Maybe$Just($author$project$Page$AppBar$RightSheet))),
+				openTopSheet: $elm$core$Maybe$Nothing,
+				primaryActions: primaryActions,
+				search: $elm$core$Maybe$Just(search),
+				title: titleEl
+			});
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			$elm$core$List$concat(
+				_List_fromArray(
+					[
+						$author$project$Page$AppBar$container(palette),
+						_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$inFront(snackbarElem)
+						]),
+						$author$project$Widget$singleModal(modals),
+						_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))
+						])
+					])),
+			A2(
+				$mdgriffith$elm_ui$Element$column,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+						$mdgriffith$elm_ui$Element$spacing(8)
+					]),
+				_List_fromArray(
+					[
+						nav,
+						A2(
+						$author$project$Widget$button,
+						$author$project$Widget$Material$containedButton(palette),
+						{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							onPress: $elm$core$Maybe$Just($author$project$Page$AppBar$AddSnackbar),
+							text: 'Add Notification'
+						})
+					])));
+	});
+var $author$project$Page$AppBar$demo = {
+	init: $elm$core$Basics$always($author$project$Page$AppBar$init),
+	subscriptions: $author$project$Page$AppBar$subscriptions,
+	update: $author$project$Page$AppBar$update,
+	view: $author$project$Page$demo($author$project$Page$AppBar$view)
+};
+var $author$project$Page$AppBar$description = 'The top app bar displays information and actions relating to the current screen.';
+var $author$project$Page$AppBar$title = 'App Bar';
+var $author$project$Page$AppBar$page = $author$project$Page$create(
+	{book: $author$project$Page$AppBar$book, demo: $author$project$Page$AppBar$demo, description: $author$project$Page$AppBar$description, title: $author$project$Page$AppBar$title});
+var $icidasset$elm_material_icons$Material$Icons$done = A2(
+	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
+	_List_fromArray(
+		[
+			$icidasset$elm_material_icons$Material$Icons$Internal$v('0 0 24 24')
+		]),
+	_List_fromArray(
+		[
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M0 0h24v24H0z'),
+					$icidasset$elm_material_icons$Material$Icons$Internal$f('none')
+				]),
+			_List_Nil),
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Widget$Material$iconButton = $author$project$Internal$Material$Button$iconButton;
+var $author$project$Internal$Material$Button$outlinedButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {color: palette.primary, size: 18},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					otherwise: {color: palette.primary, size: 18}
+				},
+				text: {
+					contentText: $author$project$Internal$Material$Button$baseButton(palette).content.content.text.contentText
+				}
+			},
+			elementRow: _Utils_ap(
+				$author$project$Internal$Material$Button$baseButton(palette).content.elementRow,
+				_List_fromArray(
+					[
+						A2($mdgriffith$elm_ui$Element$paddingXY, 8, 0)
+					]))
+		},
+		elementButton: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Border$width(1),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(palette.primary)),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A3(
+							$author$project$Widget$Material$Color$withShade,
+							palette.primary,
+							$author$project$Widget$Material$Color$buttonHoverOpacity,
+							A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface)))),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)))
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		otherwise: _List_Nil
+	};
+};
+var $author$project$Widget$Material$outlinedButton = $author$project$Internal$Material$Button$outlinedButton;
+var $author$project$Widget$Material$textButton = $author$project$Internal$Material$Button$textButton;
+var $author$project$Widget$iconButton = function () {
+	var fun = $author$project$Internal$Button$iconButton;
+	return fun;
+}();
+var $author$project$Widget$textButton = F2(
+	function (style, _v0) {
+		var text = _v0.text;
+		var onPress = _v0.onPress;
+		var fun = $author$project$Internal$Button$textButton;
+		return A2(
+			fun,
+			style,
+			{onPress: onPress, text: text});
+	});
+var $author$project$Page$Button$viewFunctions = function () {
+	var viewTextButton = F6(
+		function (style, text, _v4, onPress, _v5, _v6) {
+			var palette = _v5.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.textButton',
+				A2(
+					$author$project$Widget$textButton,
+					A2(
+						$author$project$Widget$Customize$elementButton,
+						_List_fromArray(
+							[$mdgriffith$elm_ui$Element$alignLeft, $mdgriffith$elm_ui$Element$centerY]),
+						style(palette)),
+					{onPress: onPress, text: text}));
+		});
+	var viewIconButton = F6(
+		function (style, text, icon, onPress, _v2, _v3) {
+			var palette = _v2.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.itemButton',
+				A2(
+					$author$project$Widget$iconButton,
+					A2(
+						$author$project$Widget$Customize$elementButton,
+						_List_fromArray(
+							[$mdgriffith$elm_ui$Element$alignLeft, $mdgriffith$elm_ui$Element$centerY]),
+						style(palette)),
+					{icon: icon, onPress: onPress, text: text}));
+		});
+	var viewButton = F6(
+		function (style, text, icon, onPress, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.button',
+				A2(
+					$author$project$Widget$button,
+					style(palette),
+					{icon: icon, onPress: onPress, text: text}));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewButton, viewTextButton, viewIconButton]));
+}();
+var $author$project$Page$Button$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With event handler',
+			_Utils_Tuple2(
+				$elm$core$Maybe$Just(_Utils_Tuple0),
+				$elm$core$Maybe$Nothing),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'With Icon',
+				_Utils_Tuple2(
+					A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+					$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A2($author$project$UIExplorer$Story$textStory, 'Label', 'OK'),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('Contained', $author$project$Widget$Material$containedButton),
+						_List_fromArray(
+							[
+								_Utils_Tuple2('Outlined', $author$project$Widget$Material$outlinedButton),
+								_Utils_Tuple2('Text', $author$project$Widget$Material$textButton),
+								_Utils_Tuple2('Chip', $author$project$Widget$Material$chip),
+								_Utils_Tuple2('IconButton', $author$project$Widget$Material$iconButton)
+							])),
+					A2(
+						$author$project$UIExplorer$Story$book,
+						$elm$core$Maybe$Just('Options'),
+						$author$project$Page$Button$viewFunctions))))));
 var $author$project$Page$Button$init = _Utils_Tuple2(0, $elm$core$Platform$Cmd$none);
 var $author$project$Page$Button$subscriptions = function (_v0) {
 	return $elm$core$Platform$Sub$none;
@@ -19208,6 +21190,15 @@ var $author$project$Widget$column = function () {
 	var fun = $author$project$Internal$List$column;
 	return fun;
 }();
+var $author$project$Internal$Material$List$column = {
+	content: {element: _List_Nil, ifFirst: _List_Nil, ifLast: _List_Nil, ifSingleton: _List_Nil, otherwise: _List_Nil},
+	elementColumn: _List_fromArray(
+		[
+			A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8),
+			$mdgriffith$elm_ui$Element$spacing(8)
+		])
+};
+var $author$project$Widget$Material$column = $author$project$Internal$Material$List$column;
 var $author$project$Widget$Customize$mapElement = F2(
 	function (fun, a) {
 		return _Utils_update(
@@ -19225,40 +21216,6 @@ var $author$project$Widget$Customize$element = F2(
 			},
 			a);
 	});
-var $author$project$Widget$Customize$mapElementColumn = F2(
-	function (fun, a) {
-		return _Utils_update(
-			a,
-			{
-				elementColumn: fun(a.elementColumn)
-			});
-	});
-var $author$project$Widget$Customize$elementColumn = F2(
-	function (list, a) {
-		return A2(
-			$author$project$Widget$Customize$mapElementColumn,
-			function (b) {
-				return _Utils_ap(b, list);
-			},
-			a);
-	});
-var $author$project$Widget$Customize$mapElementRow = F2(
-	function (fun, a) {
-		return _Utils_update(
-			a,
-			{
-				elementRow: fun(a.elementRow)
-			});
-	});
-var $author$project$Widget$Customize$elementRow = F2(
-	function (list, a) {
-		return A2(
-			$author$project$Widget$Customize$mapElementRow,
-			function (b) {
-				return _Utils_ap(b, list);
-			},
-			a);
-	});
 var $icidasset$elm_material_icons$Material$Icons$exposure_plus_2 = A2(
 	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
 	_List_fromArray(
@@ -19288,91 +21245,6 @@ var $author$project$Widget$Material$Typography$h4 = _List_fromArray(
 		$mdgriffith$elm_ui$Element$Font$size(34),
 		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.25)
 	]);
-var $author$project$Internal$Material$Button$iconButton = function (palette) {
-	return {
-		content: {
-			content: {
-				icon: {
-					ifActive: {color: palette.primary, size: 18},
-					ifDisabled: {
-						color: $author$project$Internal$Material$Palette$gray(palette),
-						size: 18
-					},
-					otherwise: {color: palette.primary, size: 18}
-				},
-				text: {
-					contentText: _List_fromArray(
-						[$mdgriffith$elm_ui$Element$centerX])
-				}
-			},
-			elementRow: _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
-				])
-		},
-		elementButton: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).elementButton,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$height(
-					$mdgriffith$elm_ui$Element$px(48)),
-					$mdgriffith$elm_ui$Element$width(
-					A2($mdgriffith$elm_ui$Element$minimum, 48, $mdgriffith$elm_ui$Element$shrink)),
-					$mdgriffith$elm_ui$Element$Border$rounded(24),
-					$mdgriffith$elm_ui$Element$mouseDown(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.surface)))
-						])),
-					$mdgriffith$elm_ui$Element$focused(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.surface)))
-						])),
-					$mdgriffith$elm_ui$Element$mouseOver(
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Background$color(
-							$author$project$Widget$Material$Color$fromColor(
-								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface)))
-						]))
-				])),
-		ifActive: _List_fromArray(
-			[
-				$mdgriffith$elm_ui$Element$Background$color(
-				$author$project$Widget$Material$Color$fromColor(
-					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface)))
-			]),
-		ifDisabled: _Utils_ap(
-			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
-			_List_fromArray(
-				[
-					$mdgriffith$elm_ui$Element$Font$color(
-					$author$project$Widget$Material$Color$fromColor(
-						$author$project$Internal$Material$Palette$gray(palette))),
-					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
-					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
-					$mdgriffith$elm_ui$Element$focused(_List_Nil)
-				])),
-		otherwise: _List_Nil
-	};
-};
-var $author$project$Widget$Material$iconButton = $author$project$Internal$Material$Button$iconButton;
-var $author$project$Widget$Customize$mapContent = F2(
-	function (fun, a) {
-		return _Utils_update(
-			a,
-			{
-				content: fun(a.content)
-			});
-	});
 var $icidasset$elm_material_icons$Material$Icons$remove = A2(
 	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
 	_List_fromArray(
@@ -19416,15 +21288,6 @@ var $author$project$Widget$row = function () {
 	var fun = $author$project$Internal$List$row;
 	return fun;
 }();
-var $author$project$Internal$Material$List$row = {
-	content: {element: _List_Nil, ifFirst: _List_Nil, ifLast: _List_Nil, ifSingleton: _List_Nil, otherwise: _List_Nil},
-	elementRow: _List_fromArray(
-		[
-			A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8),
-			$mdgriffith$elm_ui$Element$spacing(8)
-		])
-};
-var $author$project$Widget$Material$row = $author$project$Internal$Material$List$row;
 var $author$project$Page$Button$view = F2(
 	function (_v0, model) {
 		var palette = _v0.palette;
@@ -19437,153 +21300,3327 @@ var $author$project$Page$Button$view = F2(
 			row: $author$project$Widget$Material$row,
 			textButton: $author$project$Widget$Material$textButton(palette)
 		};
-		return {
-			attributes: _List_Nil,
-			body: A2(
-				$author$project$Widget$column,
+		return A2(
+			$author$project$Widget$column,
+			A2(
+				$author$project$Widget$Customize$mapContent,
+				$author$project$Widget$Customize$element(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+						])),
 				A2(
-					$author$project$Widget$Customize$mapContent,
-					$author$project$Widget$Customize$element(
-						_List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-							])),
+					$author$project$Widget$Customize$elementColumn,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+						]),
+					style.column)),
+			_List_fromArray(
+				[
 					A2(
-						$author$project$Widget$Customize$elementColumn,
-						_List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-							]),
-						style.column)),
-				_List_fromArray(
-					[
+					$author$project$Widget$column,
+					A2(
+						$author$project$Widget$Customize$mapContent,
+						$author$project$Widget$Customize$element(
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width(
+									$mdgriffith$elm_ui$Element$px(128)),
+									$mdgriffith$elm_ui$Element$height(
+									$mdgriffith$elm_ui$Element$px(128)),
+									$mdgriffith$elm_ui$Element$Background$color(
+									$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$defaultPalette.secondary))
+								])),
 						A2(
-						$author$project$Widget$column,
-						A2(
-							$author$project$Widget$Customize$mapContent,
-							$author$project$Widget$Customize$element(
-								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$width(
-										$mdgriffith$elm_ui$Element$px(128)),
-										$mdgriffith$elm_ui$Element$height(
-										$mdgriffith$elm_ui$Element$px(128)),
-										$mdgriffith$elm_ui$Element$Background$color(
-										$author$project$Widget$Material$Color$fromColor($author$project$Widget$Material$defaultPalette.secondary))
-									])),
-							A2(
-								$author$project$Widget$Customize$elementColumn,
-								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$centerX,
-										$mdgriffith$elm_ui$Element$width(
-										$mdgriffith$elm_ui$Element$px(128)),
-										$mdgriffith$elm_ui$Element$height(
-										$mdgriffith$elm_ui$Element$px(128)),
-										$mdgriffith$elm_ui$Element$inFront(
+							$author$project$Widget$Customize$elementColumn,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$centerX,
+									$mdgriffith$elm_ui$Element$width(
+									$mdgriffith$elm_ui$Element$px(128)),
+									$mdgriffith$elm_ui$Element$height(
+									$mdgriffith$elm_ui$Element$px(128)),
+									$mdgriffith$elm_ui$Element$inFront(
+									A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[$mdgriffith$elm_ui$Element$alignRight]),
 										A2(
-											$mdgriffith$elm_ui$Element$el,
-											_List_fromArray(
-												[$mdgriffith$elm_ui$Element$alignRight]),
-											A2(
-												$author$project$Widget$iconButton,
-												style.iconButton,
-												{
-													icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$exposure_plus_2),
-													onPress: $elm$core$Maybe$Just(
-														$author$project$Page$Button$Increase(2)),
-													text: '+2'
-												})))
-									]),
-								style.cardColumn)),
-						$elm$core$List$singleton(
-							A2(
-								$mdgriffith$elm_ui$Element$el,
-								_Utils_ap(
-									$author$project$Widget$Material$Typography$h4,
-									_List_fromArray(
-										[$mdgriffith$elm_ui$Element$centerX, $mdgriffith$elm_ui$Element$centerY])),
-								$mdgriffith$elm_ui$Element$text(
-									$elm$core$String$fromInt(model))))),
+											$author$project$Widget$iconButton,
+											style.iconButton,
+											{
+												icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$exposure_plus_2),
+												onPress: $elm$core$Maybe$Just(
+													$author$project$Page$Button$Increase(2)),
+												text: '+2'
+											})))
+								]),
+							style.cardColumn)),
+					$elm$core$List$singleton(
 						A2(
-						$author$project$Widget$row,
-						A2(
-							$author$project$Widget$Customize$mapContent,
-							$author$project$Widget$Customize$element(
+							$mdgriffith$elm_ui$Element$el,
+							_Utils_ap(
+								$author$project$Widget$Material$Typography$h4,
 								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-									])),
+									[$mdgriffith$elm_ui$Element$centerX, $mdgriffith$elm_ui$Element$centerY])),
+							$mdgriffith$elm_ui$Element$text(
+								$elm$core$String$fromInt(model))))),
+					A2(
+					$author$project$Widget$row,
+					A2(
+						$author$project$Widget$Customize$mapContent,
+						$author$project$Widget$Customize$element(
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+								])),
+						A2(
+							$author$project$Widget$Customize$elementRow,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+								]),
+							style.row)),
+					_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$row,
 							A2(
 								$author$project$Widget$Customize$elementRow,
 								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-									]),
-								style.row)),
-						_List_fromArray(
-							[
-								A2(
-								$author$project$Widget$row,
-								A2(
-									$author$project$Widget$Customize$elementRow,
-									_List_fromArray(
-										[$mdgriffith$elm_ui$Element$alignRight]),
-									style.row),
+									[$mdgriffith$elm_ui$Element$alignRight]),
+								style.row),
+							_List_fromArray(
+								[
+									A2(
+									$author$project$Widget$textButton,
+									style.textButton,
+									{
+										onPress: $elm$core$Maybe$Just($author$project$Page$Button$Reset),
+										text: 'Reset'
+									}),
+									A2(
+									$author$project$Widget$button,
+									style.outlinedButton,
+									{
+										icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$remove),
+										onPress: (model > 0) ? $elm$core$Maybe$Just(
+											$author$project$Page$Button$Decrease(1)) : $elm$core$Maybe$Nothing,
+										text: 'Decrease'
+									})
+								])),
+							A2(
+							$author$project$Widget$row,
+							A2(
+								$author$project$Widget$Customize$elementRow,
 								_List_fromArray(
-									[
-										A2(
-										$author$project$Widget$textButton,
-										style.textButton,
-										{
-											onPress: $elm$core$Maybe$Just($author$project$Page$Button$Reset),
-											text: 'Reset'
-										}),
-										A2(
-										$author$project$Widget$button,
-										style.outlinedButton,
-										{
-											icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$remove),
-											onPress: (model > 0) ? $elm$core$Maybe$Just(
-												$author$project$Page$Button$Decrease(1)) : $elm$core$Maybe$Nothing,
-											text: 'Decrease'
-										})
-									])),
-								A2(
-								$author$project$Widget$row,
-								A2(
-									$author$project$Widget$Customize$elementRow,
-									_List_fromArray(
-										[$mdgriffith$elm_ui$Element$alignLeft]),
-									style.row),
-								_List_fromArray(
-									[
-										A2(
-										$author$project$Widget$button,
-										style.containedButton,
-										{
-											icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$add),
-											onPress: $elm$core$Maybe$Just(
-												$author$project$Page$Button$Increase(1)),
-											text: 'Increase'
-										})
-									]))
-							]))
-					])),
-			position: $author$project$UIExplorer$Tile$FullWidthTile,
-			title: $elm$core$Maybe$Just('Interactive Demo')
-		};
+									[$mdgriffith$elm_ui$Element$alignLeft]),
+								style.row),
+							_List_fromArray(
+								[
+									A2(
+									$author$project$Widget$button,
+									style.containedButton,
+									{
+										icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$add),
+										onPress: $elm$core$Maybe$Just(
+											$author$project$Page$Button$Increase(1)),
+										text: 'Increase'
+									})
+								]))
+						]))
+				]));
 	});
 var $author$project$Page$Button$demo = {
 	init: $elm$core$Basics$always($author$project$Page$Button$init),
 	subscriptions: $author$project$Page$Button$subscriptions,
 	update: $author$project$Page$Button$update,
-	view: $author$project$Page$Button$view
+	view: $author$project$Page$demo($author$project$Page$Button$view)
 };
 var $author$project$Page$Button$description = 'Buttons allow users to take actions, and make choices, with a single tap.';
 var $author$project$Page$Button$title = 'Button';
 var $author$project$Page$Button$page = $author$project$Page$create(
 	{book: $author$project$Page$Button$book, demo: $author$project$Page$Button$demo, description: $author$project$Page$Button$description, title: $author$project$Page$Button$title});
+var $author$project$Page$Dialog$viewFunctions = function () {
+	var viewDialog = F7(
+		function (style, text, titleString, accept, dismiss, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.dialog',
+				A2(
+					$mdgriffith$elm_ui$Element$el,
+					_Utils_ap(
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(200)),
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+							]),
+						$author$project$Widget$singleModal(
+							$elm$core$List$singleton(
+								A2(
+									$author$project$Widget$dialog,
+									style(palette),
+									{accept: accept, dismiss: dismiss, text: text, title: titleString})))),
+					$mdgriffith$elm_ui$Element$text('Placeholder Text')));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewDialog]));
+}();
+var $author$project$Page$Dialog$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'Dismissible',
+			_Utils_Tuple2(
+				$elm$core$Maybe$Just(
+					{
+						onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+						text: 'Dismiss'
+					}),
+				$elm$core$Maybe$Nothing),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'With accept button',
+				_Utils_Tuple2(
+					$elm$core$Maybe$Just(
+						{
+							onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+							text: 'Ok'
+						}),
+					$elm$core$Maybe$Nothing),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'With title',
+					_Utils_Tuple2(
+						$elm$core$Maybe$Just('Title'),
+						$elm$core$Maybe$Nothing),
+					true),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A2($author$project$UIExplorer$Story$textStory, 'Text', 'If an accept button is given then the window can only be closed manually. Else it can be closed by pressing somewhere outside of it.'),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$optionListStory,
+							'Style',
+							_Utils_Tuple2('Alert Dialog', $author$project$Widget$Material$alertDialog),
+							_List_Nil),
+						A2(
+							$author$project$UIExplorer$Story$book,
+							$elm$core$Maybe$Just('Options'),
+							$author$project$Page$Dialog$viewFunctions)))))));
+var $author$project$Page$Dialog$IsOpen = function (a) {
+	return {$: 'IsOpen', a: a};
+};
+var $author$project$Page$Dialog$init = _Utils_Tuple2(
+	$author$project$Page$Dialog$IsOpen(true),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$Dialog$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Dialog$update = F2(
+	function (msg, _v0) {
+		var bool = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Page$Dialog$IsOpen(bool),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Page$Dialog$OpenDialog = function (a) {
+	return {$: 'OpenDialog', a: a};
+};
+var $icidasset$elm_material_icons$Material$Icons$visibility = A2(
+	$icidasset$elm_material_icons$Material$Icons$Internal$icon,
+	_List_fromArray(
+		[
+			$icidasset$elm_material_icons$Material$Icons$Internal$v('0 0 24 24')
+		]),
+	_List_fromArray(
+		[
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M0 0h24v24H0z'),
+					$icidasset$elm_material_icons$Material$Icons$Internal$f('none')
+				]),
+			_List_Nil),
+			A2(
+			$icidasset$elm_material_icons$Material$Icons$Internal$p,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Page$Dialog$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var isOpen = _v1.a;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_Utils_ap(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$height(
+						A2($mdgriffith$elm_ui$Element$minimum, 200, $mdgriffith$elm_ui$Element$fill)),
+						$mdgriffith$elm_ui$Element$width(
+						A2($mdgriffith$elm_ui$Element$minimum, 400, $mdgriffith$elm_ui$Element$fill))
+					]),
+				isOpen ? $author$project$Widget$singleModal(
+					$elm$core$List$singleton(
+						A2(
+							$author$project$Widget$dialog,
+							$author$project$Widget$Material$alertDialog(palette),
+							{
+								accept: $elm$core$Maybe$Just(
+									{
+										onPress: $elm$core$Maybe$Just(
+											$author$project$Page$Dialog$OpenDialog(false)),
+										text: 'Ok'
+									}),
+								dismiss: $elm$core$Maybe$Just(
+									{
+										onPress: $elm$core$Maybe$Just(
+											$author$project$Page$Dialog$OpenDialog(false)),
+										text: 'Dismiss'
+									}),
+								text: 'This is a dialog window',
+								title: $elm$core$Maybe$Just('Dialog')
+							}))) : _List_Nil),
+			A2(
+				$author$project$Widget$button,
+				$author$project$Widget$Material$containedButton(palette),
+				{
+					icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$visibility),
+					onPress: $elm$core$Maybe$Just(
+						$author$project$Page$Dialog$OpenDialog(true)),
+					text: 'Show Dialog'
+				}));
+	});
+var $author$project$Page$Dialog$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Dialog$init),
+	subscriptions: $author$project$Page$Dialog$subscriptions,
+	update: $author$project$Page$Dialog$update,
+	view: $author$project$Page$demo($author$project$Page$Dialog$view)
+};
+var $author$project$Page$Dialog$description = 'Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.';
+var $author$project$Page$Dialog$title = 'Dialog';
+var $author$project$Page$Dialog$page = $author$project$Page$create(
+	{book: $author$project$Page$Dialog$book, demo: $author$project$Page$Dialog$demo, description: $author$project$Page$Dialog$description, title: $author$project$Page$Dialog$title});
+var $author$project$Page$Icon$init = _Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none);
+var $author$project$Page$Icon$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Icon$update = F2(
+	function (msg, _v0) {
+		return _Utils_Tuple2(_Utils_Tuple0, $elm$core$Platform$Cmd$none);
+	});
+var $author$project$Widget$Icon$antDesignIconsElm = function (fun) {
+	return function (_v0) {
+		var size = _v0.size;
+		var color = _v0.color;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_Nil,
+			$mdgriffith$elm_ui$Element$html(
+				fun(
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$width(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$height(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$fill(
+							$avh4$elm_color$Color$toCssString(color))
+						]))));
+	};
+};
+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 $elm$svg$Svg$Attributes$points = _VirtualDom_attribute('points');
+var $elm$svg$Svg$polyline = $elm$svg$Svg$trustedNode('polyline');
+var $feathericons$elm_feather$FeatherIcons$check = A2(
+	$feathericons$elm_feather$FeatherIcons$makeBuilder,
+	'check',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$polyline,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$points('20 6 9 17 4 12')
+				]),
+			_List_Nil)
+		]));
+var $lattyware$elm_fontawesome$FontAwesome$Icon$Icon = F5(
+	function (prefix, name, width, height, paths) {
+		return {height: height, name: name, paths: paths, prefix: prefix, width: width};
+	});
+var $lattyware$elm_fontawesome$FontAwesome$Solid$check = A5(
+	$lattyware$elm_fontawesome$FontAwesome$Icon$Icon,
+	'fas',
+	'check',
+	512,
+	512,
+	_List_fromArray(
+		['M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z']));
+var $elm$svg$Svg$Attributes$clipRule = _VirtualDom_attribute('clip-rule');
+var $elm$svg$Svg$Attributes$fillRule = _VirtualDom_attribute('fill-rule');
+var $jasonliang_dev$elm_heroicons$Heroicons$Solid$check = function (attrs) {
+	return A2(
+		$elm$svg$Svg$svg,
+		A2(
+			$elm$core$List$cons,
+			$elm$svg$Svg$Attributes$viewBox('0 0 20 20'),
+			A2(
+				$elm$core$List$cons,
+				$elm$svg$Svg$Attributes$fill('currentColor'),
+				attrs)),
+		_List_fromArray(
+			[
+				A2(
+				$elm$svg$Svg$path,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$fillRule('evenodd'),
+						$elm$svg$Svg$Attributes$d('M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'),
+						$elm$svg$Svg$Attributes$clipRule('evenodd')
+					]),
+				_List_Nil)
+			]));
+};
+var $capitalist$elm_octicons$Octicons$checkPolygon = '12 5 4 13 0 9 1.5 7.5 4 10 10.5 3.5';
+var $elm$svg$Svg$Attributes$class = _VirtualDom_attribute('class');
+var $elm$svg$Svg$Attributes$style = _VirtualDom_attribute('style');
+var $elm$svg$Svg$Attributes$version = _VirtualDom_attribute('version');
+var $capitalist$elm_octicons$Octicons$Internal$iconSVG = F5(
+	function (viewBox, name, options, attributes, children) {
+		var style = function () {
+			var _v2 = options.style;
+			if (_v2.$ === 'Nothing') {
+				return _List_Nil;
+			} else {
+				var s = _v2.a;
+				return _List_fromArray(
+					[s]);
+			}
+		}();
+		var margin = function () {
+			var _v1 = options.margin;
+			if (_v1.$ === 'Nothing') {
+				return _List_Nil;
+			} else {
+				var m = _v1.a;
+				return _List_fromArray(
+					['margin: ' + m]);
+			}
+		}();
+		var styles = function () {
+			var _v0 = $elm$core$List$concat(
+				_List_fromArray(
+					[style, margin]));
+			if (!_v0.b) {
+				return _List_Nil;
+			} else {
+				var lst = _v0;
+				return _List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$style(
+						A2($elm$core$String$join, ';', lst))
+					]);
+			}
+		}();
+		return A2(
+			$elm$svg$Svg$svg,
+			$elm$core$List$concat(
+				_List_fromArray(
+					[
+						_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$version('1.1'),
+							$elm$svg$Svg$Attributes$class(
+							A2($elm$core$Maybe$withDefault, 'octicon ' + name, options._class)),
+							$elm$svg$Svg$Attributes$width(
+							$elm$core$String$fromInt(options.width)),
+							$elm$svg$Svg$Attributes$height(
+							$elm$core$String$fromInt(options.height)),
+							$elm$svg$Svg$Attributes$viewBox(viewBox)
+						]),
+						attributes,
+						styles
+					])),
+			children);
+	});
+var $elm$svg$Svg$polygon = $elm$svg$Svg$trustedNode('polygon');
+var $capitalist$elm_octicons$Octicons$polygonIconWithOptions = F4(
+	function (points, viewBox, octiconName, options) {
+		return A5(
+			$capitalist$elm_octicons$Octicons$Internal$iconSVG,
+			viewBox,
+			octiconName,
+			options,
+			_List_Nil,
+			_List_fromArray(
+				[
+					A2(
+					$elm$svg$Svg$polygon,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$points(points),
+							$elm$svg$Svg$Attributes$fillRule(options.fillRule),
+							$elm$svg$Svg$Attributes$fill(options.color)
+						]),
+					_List_Nil)
+				]));
+	});
+var $capitalist$elm_octicons$Octicons$check = A3($capitalist$elm_octicons$Octicons$polygonIconWithOptions, $capitalist$elm_octicons$Octicons$checkPolygon, '0 0 12 16', 'check');
+var $lemol$ant_design_icons_elm$Ant$Icons$Svg$CheckOutlined$viewWithAttributes = function (attributes) {
+	return A2(
+		$elm$svg$Svg$svg,
+		_Utils_ap(
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$viewBox('64 64 896 896')
+				]),
+			attributes),
+		_List_fromArray(
+			[
+				A2(
+				$elm$svg$Svg$path,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$d('M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z')
+					]),
+				_List_Nil)
+			]));
+};
+var $lemol$ant_design_icons_elm$Ant$Icons$Svg$checkOutlined = $lemol$ant_design_icons_elm$Ant$Icons$Svg$CheckOutlined$viewWithAttributes;
+var $j_panasiuk$elm_ionicons$Ionicon$Internal$toAlphaString = function (value) {
+	return A2(
+		$elm$core$String$left,
+		5,
+		$elm$core$String$fromFloat(
+			A3($elm$core$Basics$clamp, 0, 1, value)));
+};
+var $j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString = function (value) {
+	return A2(
+		$elm$core$String$left,
+		5,
+		$elm$core$String$fromFloat(
+			A3($elm$core$Basics$clamp, 0, 255, 255 * value)));
+};
+var $j_panasiuk$elm_ionicons$Ionicon$Internal$fill = function (_v0) {
+	var red = _v0.red;
+	var green = _v0.green;
+	var blue = _v0.blue;
+	var alpha = _v0.alpha;
+	var _v1 = ((0 <= alpha) && (alpha < 1)) ? _Utils_Tuple2(
+		'rgba',
+		_List_fromArray(
+			[
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(red),
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(green),
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(blue),
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toAlphaString(alpha)
+			])) : _Utils_Tuple2(
+		'rgb',
+		_List_fromArray(
+			[
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(red),
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(green),
+				$j_panasiuk$elm_ionicons$Ionicon$Internal$toColorString(blue)
+			]));
+	var colorSpace = _v1.a;
+	var values = _v1.b;
+	return colorSpace + ('(' + (A2($elm$core$String$join, ',', values) + ')'));
+};
+var $elm$svg$Svg$Attributes$enableBackground = _VirtualDom_attribute('enable-background');
+var $elm$svg$Svg$Attributes$x = _VirtualDom_attribute('x');
+var $elm$svg$Svg$Attributes$y = _VirtualDom_attribute('y');
+var $j_panasiuk$elm_ionicons$Ionicon$Internal$svg = function (size) {
+	return $elm$svg$Svg$svg(
+		_List_fromArray(
+			[
+				$elm$svg$Svg$Attributes$version('1.1'),
+				$elm$svg$Svg$Attributes$x('0px'),
+				$elm$svg$Svg$Attributes$y('0px'),
+				$elm$svg$Svg$Attributes$width(
+				$elm$core$String$fromInt(size)),
+				$elm$svg$Svg$Attributes$height(
+				$elm$core$String$fromInt(size)),
+				$elm$svg$Svg$Attributes$viewBox('0 0 512 512'),
+				$elm$svg$Svg$Attributes$enableBackground('new 0 0 512 512')
+			]));
+};
+var $j_panasiuk$elm_ionicons$Ionicon$Internal$p = F3(
+	function (d, size, color) {
+		return A2(
+			$j_panasiuk$elm_ionicons$Ionicon$Internal$svg,
+			size,
+			_List_fromArray(
+				[
+					A2(
+					$elm$svg$Svg$path,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$d(d),
+							$elm$svg$Svg$Attributes$fill(
+							$j_panasiuk$elm_ionicons$Ionicon$Internal$fill(color))
+						]),
+					_List_Nil)
+				]));
+	});
+var $j_panasiuk$elm_ionicons$Ionicon$checkmark = $j_panasiuk$elm_ionicons$Ionicon$Internal$p('M461.6,109.6l-54.9-43.3c-1.7-1.4-3.8-2.4-6.2-2.4c-2.4,0-4.6,1-6.3,2.5L194.5,323c0,0-78.5-75.5-80.7-77.7c-2.2-2.2-5.1-5.9-9.5-5.9c-4.4,0-6.4,3.1-8.7,5.4c-1.7,1.8-29.7,31.2-43.5,45.8c-0.8,0.9-1.3,1.4-2,2.1c-1.2,1.7-2,3.6-2,5.7c0,2.2,0.8,4,2,5.7l2.8,2.6c0,0,139.3,133.8,141.6,136.1c2.3,2.3,5.1,5.2,9.2,5.2c4,0,7.3-4.3,9.2-6.2L462,121.8c1.2-1.7,2-3.6,2-5.8C464,113.5,463,111.4,461.6,109.6z');
+var $pehota$elm_zondicons$Zondicons$checkmark = function (attributes) {
+	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'),
+				attributes)),
+		_List_fromArray(
+			[
+				A2(
+				$elm$svg$Svg$path,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$d('M0 11l2-2 5 5L18 3l2 2L7 18z')
+					]),
+				_List_Nil)
+			]));
+};
+var $capitalist$elm_octicons$Octicons$color = F2(
+	function (value, options) {
+		return _Utils_update(
+			options,
+			{color: value});
+	});
+var $capitalist$elm_octicons$Octicons$defaultOptions = {_class: $elm$core$Maybe$Nothing, color: 'black', fillRule: 'evenodd', height: 16, margin: $elm$core$Maybe$Nothing, style: $elm$core$Maybe$Nothing, width: 16};
+var $danmarcab$material_icons$Material$Icons$Internal$toRgbaString = function (color) {
+	var _v0 = $avh4$elm_color$Color$toRgba(color);
+	var red = _v0.red;
+	var green = _v0.green;
+	var blue = _v0.blue;
+	var alpha = _v0.alpha;
+	return 'rgba(' + ($elm$core$String$fromInt(
+		$elm$core$Basics$round(255 * red)) + (',' + ($elm$core$String$fromInt(
+		$elm$core$Basics$round(255 * green)) + (',' + ($elm$core$String$fromInt(
+		$elm$core$Basics$round(255 * blue)) + (',' + ($elm$core$String$fromFloat(alpha) + ')')))))));
+};
+var $danmarcab$material_icons$Material$Icons$Internal$icon = F4(
+	function (viewBox, children, color, size) {
+		var stringSize = $elm$core$String$fromInt(size);
+		var stringColor = $danmarcab$material_icons$Material$Icons$Internal$toRgbaString(color);
+		return A2(
+			$elm$svg$Svg$svg,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$width(stringSize),
+					$elm$svg$Svg$Attributes$height(stringSize),
+					$elm$svg$Svg$Attributes$viewBox(viewBox)
+				]),
+			_List_fromArray(
+				[
+					A2(
+					$elm$svg$Svg$g,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$fill(stringColor)
+						]),
+					children)
+				]));
+	});
+var $danmarcab$material_icons$Material$Icons$Action$done = A2(
+	$danmarcab$material_icons$Material$Icons$Internal$icon,
+	'0 0 48 48',
+	_List_fromArray(
+		[
+			A2(
+			$elm$svg$Svg$path,
+			_List_fromArray(
+				[
+					$elm$svg$Svg$Attributes$d('M18 32.34L9.66 24l-2.83 2.83L18 38l24-24-2.83-2.83z')
+				]),
+			_List_Nil)
+		]));
+var $author$project$Widget$Icon$elmFeather = F2(
+	function (fun, icon) {
+		return function (_v0) {
+			var size = _v0.size;
+			var color = _v0.color;
+			return A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_Nil,
+				$mdgriffith$elm_ui$Element$html(
+					A2(
+						fun,
+						_List_fromArray(
+							[
+								$elm$svg$Svg$Attributes$width(
+								$elm$core$String$fromInt(size)),
+								$elm$svg$Svg$Attributes$height(
+								$elm$core$String$fromInt(size)),
+								$elm$svg$Svg$Attributes$stroke(
+								$avh4$elm_color$Color$toCssString(color))
+							]),
+						icon)));
+		};
+	});
+var $author$project$Widget$Icon$elmFontawesome = F2(
+	function (fun, icon) {
+		return function (_v0) {
+			var size = _v0.size;
+			var color = _v0.color;
+			return A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_Nil,
+				$mdgriffith$elm_ui$Element$html(
+					A2(
+						$elm$svg$Svg$svg,
+						_List_fromArray(
+							[
+								$elm$svg$Svg$Attributes$width(
+								$elm$core$String$fromInt(size)),
+								$elm$svg$Svg$Attributes$height(
+								$elm$core$String$fromInt(size)),
+								$elm$svg$Svg$Attributes$stroke(
+								$avh4$elm_color$Color$toCssString(color)),
+								$elm$svg$Svg$Attributes$viewBox(
+								'0 0 ' + ($elm$core$String$fromInt(512) + (' ' + $elm$core$String$fromInt(512))))
+							]),
+						$elm$core$List$singleton(
+							fun(icon)))));
+		};
+	});
+var $author$project$Widget$Icon$elmHeroicons = function (fun) {
+	return function (_v0) {
+		var size = _v0.size;
+		var color = _v0.color;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_Nil,
+			$mdgriffith$elm_ui$Element$html(
+				fun(
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$width(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$height(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$stroke(
+							$avh4$elm_color$Color$toCssString(color))
+						]))));
+	};
+};
+var $author$project$Widget$Icon$elmIonicons = function (fun) {
+	return function (_v0) {
+		var size = _v0.size;
+		var color = _v0.color;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_Nil,
+			$mdgriffith$elm_ui$Element$html(
+				A2(
+					fun,
+					size,
+					$avh4$elm_color$Color$toRgba(color))));
+	};
+};
+var $author$project$Widget$Icon$elmOcticons = F2(
+	function (_v0, fun) {
+		var withSize = _v0.withSize;
+		var withColor = _v0.withColor;
+		var defaultOptions = _v0.defaultOptions;
+		return function (_v1) {
+			var size = _v1.size;
+			var color = _v1.color;
+			return A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_Nil,
+				$mdgriffith$elm_ui$Element$html(
+					fun(
+						A2(
+							withColor,
+							$avh4$elm_color$Color$toCssString(color),
+							A2(withSize, size, defaultOptions)))));
+		};
+	});
+var $author$project$Widget$Icon$elmZondicons = function (fun) {
+	return function (_v0) {
+		var size = _v0.size;
+		var color = _v0.color;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_Nil,
+			$mdgriffith$elm_ui$Element$html(
+				fun(
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$width(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$height(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$stroke(
+							$avh4$elm_color$Color$toCssString(color))
+						]))));
+	};
+};
+var $author$project$Widget$Icon$materialIcons = function (fun) {
+	return function (_v0) {
+		var size = _v0.size;
+		var color = _v0.color;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_Nil,
+			$mdgriffith$elm_ui$Element$html(
+				A2(
+					$elm$svg$Svg$svg,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$width(
+							$elm$core$String$fromInt(size)),
+							$elm$svg$Svg$Attributes$height(
+							$elm$core$String$fromInt(size))
+						]),
+					$elm$core$List$singleton(
+						A2(fun, color, size)))));
+	};
+};
+var $capitalist$elm_octicons$Octicons$size = F2(
+	function (value, options) {
+		return _Utils_update(
+			options,
+			{height: value, width: value});
+	});
+var $elm$svg$Svg$map = $elm$virtual_dom$VirtualDom$map;
+var $elm$svg$Svg$Attributes$strokeLinecap = _VirtualDom_attribute('stroke-linecap');
+var $elm$svg$Svg$Attributes$strokeLinejoin = _VirtualDom_attribute('stroke-linejoin');
+var $elm$svg$Svg$Attributes$strokeWidth = _VirtualDom_attribute('stroke-width');
+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 $lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath = F2(
+	function (attrs, d) {
+		return A2(
+			$elm$svg$Svg$path,
+			A2(
+				$elm$core$List$cons,
+				$elm$svg$Svg$Attributes$fill('currentColor'),
+				A2(
+					$elm$core$List$cons,
+					$elm$svg$Svg$Attributes$d(d),
+					attrs)),
+			_List_Nil);
+	});
+var $lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePaths = F2(
+	function (attrs, icon) {
+		var _v0 = icon.paths;
+		if (!_v0.b) {
+			return A2($lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath, attrs, '');
+		} else {
+			if (!_v0.b.b) {
+				var only = _v0.a;
+				return A2($lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath, attrs, only);
+			} else {
+				var secondary = _v0.a;
+				var _v1 = _v0.b;
+				var primary = _v1.a;
+				return A2(
+					$elm$svg$Svg$g,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$class('fa-group')
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath,
+							A2(
+								$elm$core$List$cons,
+								$elm$svg$Svg$Attributes$class('fa-secondary'),
+								attrs),
+							secondary),
+							A2(
+							$lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePath,
+							A2(
+								$elm$core$List$cons,
+								$elm$svg$Svg$Attributes$class('fa-primary'),
+								attrs),
+							primary)
+						]));
+			}
+		}
+	});
+var $lattyware$elm_fontawesome$FontAwesome$Svg$viewIcon = $lattyware$elm_fontawesome$FontAwesome$Svg$Internal$corePaths(_List_Nil);
+var $author$project$Page$Icon$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		return A2(
+			$mdgriffith$elm_ui$Element$wrappedRow,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$spacing(10)
+				]),
+			A2(
+				$elm$core$List$map,
+				function (_v2) {
+					var icon = _v2.a;
+					var text = _v2.b;
+					return A2(
+						$author$project$Widget$button,
+						$author$project$Widget$Material$containedButton(palette),
+						{
+							icon: icon,
+							onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+							text: text
+						});
+				},
+				_List_fromArray(
+					[
+						_Utils_Tuple2(
+						A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+						'elm-material-icons'),
+						_Utils_Tuple2(
+						$author$project$Widget$Icon$materialIcons($danmarcab$material_icons$Material$Icons$Action$done),
+						'material-icons'),
+						_Utils_Tuple2(
+						A2($author$project$Widget$Icon$elmFeather, $feathericons$elm_feather$FeatherIcons$toHtml, $feathericons$elm_feather$FeatherIcons$check),
+						'elm-feather'),
+						_Utils_Tuple2(
+						A2($author$project$Widget$Icon$elmFontawesome, $lattyware$elm_fontawesome$FontAwesome$Svg$viewIcon, $lattyware$elm_fontawesome$FontAwesome$Solid$check),
+						'elm-fontawesome'),
+						_Utils_Tuple2(
+						$author$project$Widget$Icon$elmIonicons($j_panasiuk$elm_ionicons$Ionicon$checkmark),
+						'elm-ionicons'),
+						_Utils_Tuple2(
+						A2(
+							$author$project$Widget$Icon$elmOcticons,
+							{defaultOptions: $capitalist$elm_octicons$Octicons$defaultOptions, withColor: $capitalist$elm_octicons$Octicons$color, withSize: $capitalist$elm_octicons$Octicons$size},
+							$capitalist$elm_octicons$Octicons$check),
+						'elm-octicons'),
+						_Utils_Tuple2(
+						$author$project$Widget$Icon$elmHeroicons($jasonliang_dev$elm_heroicons$Heroicons$Solid$check),
+						'elm-heroicons'),
+						_Utils_Tuple2(
+						$author$project$Widget$Icon$antDesignIconsElm($lemol$ant_design_icons_elm$Ant$Icons$Svg$checkOutlined),
+						'ant-design-icons-elm'),
+						_Utils_Tuple2(
+						$author$project$Widget$Icon$elmZondicons($pehota$elm_zondicons$Zondicons$checkmark),
+						'elm-zondicons')
+					])));
+	});
+var $author$project$Page$Icon$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Icon$init),
+	subscriptions: $author$project$Page$Icon$subscriptions,
+	update: $author$project$Page$Icon$update,
+	view: $author$project$Page$demo($author$project$Page$Icon$view)
+};
+var $author$project$Page$Icon$description = 'Every icon package on elm-packages is supported.';
+var $author$project$Page$Icon$title = 'Icon';
+var $author$project$Page$Icon$page = $author$project$UIExplorer$Tile$page(
+	A2(
+		$author$project$UIExplorer$Tile$next,
+		$author$project$Page$Icon$demo,
+		$author$project$UIExplorer$Tile$first(
+			A2(
+				$author$project$UIExplorer$Tile$static,
+				_List_Nil,
+				F2(
+					function (_v0, _v1) {
+						return A2(
+							$mdgriffith$elm_ui$Element$column,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$spacing(32)
+								]),
+							_List_fromArray(
+								[
+									A2(
+									$mdgriffith$elm_ui$Element$el,
+									$author$project$Widget$Material$Typography$h3,
+									$mdgriffith$elm_ui$Element$text($author$project$Page$Icon$title)),
+									A2(
+									$mdgriffith$elm_ui$Element$paragraph,
+									_List_Nil,
+									$elm$core$List$singleton(
+										$mdgriffith$elm_ui$Element$text($author$project$Page$Icon$description)))
+								]));
+					})))));
+var $author$project$Page$Item$init = _Utils_Tuple2(
+	{isEnabled: true, isExpanded: false},
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$Item$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Item$update = F2(
+	function (msg, model) {
+		if (msg.$ === 'ToggleModal') {
+			var bool = msg.a;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{isEnabled: bool}),
+				$elm$core$Platform$Cmd$none);
+		} else {
+			var bool = msg.a;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{isExpanded: bool}),
+				$elm$core$Platform$Cmd$none);
+		}
+	});
+var $author$project$Page$Item$ToggleModal = function (a) {
+	return {$: 'ToggleModal', a: a};
+};
+var $author$project$Page$Item$ToogleExpand = function (a) {
+	return {$: 'ToogleExpand', a: a};
+};
+var $author$project$Internal$Item$divider = function (style) {
+	return A2(
+		$author$project$Internal$Item$toItem,
+		style,
+		function (_v0) {
+			var element = _v0.element;
+			return A2($mdgriffith$elm_ui$Element$el, element, $mdgriffith$elm_ui$Element$none);
+		});
+};
+var $author$project$Widget$divider = $author$project$Internal$Item$divider;
+var $author$project$Internal$Material$Item$fullBleedDivider = function (palette) {
+	return {
+		content: {
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(1)),
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$lightGray(palette)))
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(1)),
+				$mdgriffith$elm_ui$Element$padding(0),
+				$mdgriffith$elm_ui$Element$Border$width(0)
+			])
+	};
+};
+var $author$project$Widget$Material$fullBleedDivider = $author$project$Internal$Material$Item$fullBleedDivider;
+var $author$project$Internal$Item$fullBleedItem = F2(
+	function (s, _v0) {
+		var onPress = _v0.onPress;
+		var text = _v0.text;
+		var icon = _v0.icon;
+		return A2(
+			$author$project$Internal$Item$toItem,
+			s,
+			function (style) {
+				return A2(
+					$mdgriffith$elm_ui$Element$Input$button,
+					_Utils_ap(
+						style.elementButton,
+						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
+					{
+						label: A2(
+							$mdgriffith$elm_ui$Element$row,
+							style.content.elementRow,
+							_List_fromArray(
+								[
+									A2(
+									$mdgriffith$elm_ui$Element$el,
+									style.content.content.text.elementText,
+									A2(
+										$mdgriffith$elm_ui$Element$paragraph,
+										_List_Nil,
+										$elm$core$List$singleton(
+											$mdgriffith$elm_ui$Element$text(text)))),
+									icon(style.content.content.icon)
+								])),
+						onPress: onPress
+					});
+			});
+	});
+var $author$project$Widget$fullBleedItem = function () {
+	var fun = $author$project$Internal$Item$fullBleedItem;
+	return fun;
+}();
+var $author$project$Internal$Material$Item$fullBleedItem = function (palette) {
+	var i = $author$project$Internal$Material$Item$insetItem(palette);
+	return {
+		content: {
+			content: {
+				content: {icon: i.content.content.content.content, text: i.content.content.content.text},
+				elementRow: i.content.content.elementRow
+			},
+			elementButton: i.content.elementButton,
+			ifDisabled: i.content.ifDisabled,
+			otherwise: i.content.otherwise
+		},
+		element: i.element
+	};
+};
+var $author$project$Widget$Material$fullBleedItem = $author$project$Internal$Material$Item$fullBleedItem;
+var $elm$html$Html$Attributes$alt = $elm$html$Html$Attributes$stringProperty('alt');
+var $elm$html$Html$Attributes$src = function (url) {
+	return A2(
+		$elm$html$Html$Attributes$stringProperty,
+		'src',
+		_VirtualDom_noJavaScriptOrHtmlUri(url));
+};
+var $mdgriffith$elm_ui$Element$image = F2(
+	function (attrs, _v0) {
+		var src = _v0.src;
+		var description = _v0.description;
+		var imageAttributes = A2(
+			$elm$core$List$filter,
+			function (a) {
+				switch (a.$) {
+					case 'Width':
+						return true;
+					case 'Height':
+						return true;
+					default:
+						return false;
+				}
+			},
+			attrs);
+		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$Internal$Model$htmlClass($mdgriffith$elm_ui$Internal$Style$classes.imageContainer),
+				attrs),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+				_List_fromArray(
+					[
+						A4(
+						$mdgriffith$elm_ui$Internal$Model$element,
+						$mdgriffith$elm_ui$Internal$Model$asEl,
+						$mdgriffith$elm_ui$Internal$Model$NodeName('img'),
+						_Utils_ap(
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Internal$Model$Attr(
+									$elm$html$Html$Attributes$src(src)),
+									$mdgriffith$elm_ui$Internal$Model$Attr(
+									$elm$html$Html$Attributes$alt(description))
+								]),
+							imageAttributes),
+						$mdgriffith$elm_ui$Internal$Model$Unkeyed(_List_Nil))
+					])));
+	});
+var $author$project$Internal$Item$imageItem = F2(
+	function (s, _v0) {
+		var onPress = _v0.onPress;
+		var text = _v0.text;
+		var image = _v0.image;
+		var content = _v0.content;
+		return A2(
+			$author$project$Internal$Item$toItem,
+			s,
+			function (style) {
+				return A2(
+					$mdgriffith$elm_ui$Element$Input$button,
+					_Utils_ap(
+						style.elementButton,
+						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
+					{
+						label: A2(
+							$mdgriffith$elm_ui$Element$row,
+							style.content.elementRow,
+							_List_fromArray(
+								[
+									A2($mdgriffith$elm_ui$Element$el, style.content.content.image.element, image),
+									A2(
+									$mdgriffith$elm_ui$Element$el,
+									style.content.content.text.elementText,
+									A2(
+										$mdgriffith$elm_ui$Element$paragraph,
+										_List_Nil,
+										$elm$core$List$singleton(
+											$mdgriffith$elm_ui$Element$text(text)))),
+									content(style.content.content.content)
+								])),
+						onPress: onPress
+					});
+			});
+	});
+var $author$project$Widget$imageItem = function () {
+	var fun = $author$project$Internal$Item$imageItem;
+	return fun;
+}();
+var $author$project$Internal$Material$Item$imageItem = function (palette) {
+	return {
+		content: {
+			content: {
+				content: {
+					content: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 24
+					},
+					image: {
+						element: _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width(
+								$mdgriffith$elm_ui$Element$px(40)),
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(40))
+							])
+					},
+					text: {
+						elementText: _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+							])
+					}
+				},
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spacing(16),
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+					])
+			},
+			elementButton: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					A2($mdgriffith$elm_ui$Element$paddingXY, 16, 8)
+				]),
+			ifDisabled: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$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', 'default'))
+				]),
+			otherwise: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonPressedOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonFocusOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonHoverOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						]))
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$padding(0)
+			])
+	};
+};
+var $author$project$Widget$Material$imageItem = $author$project$Internal$Material$Item$imageItem;
+var $author$project$Internal$Material$Item$insetDivider = function (palette) {
+	return {
+		content: {
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(1)),
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$lightGray(palette)))
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(1)),
+				$mdgriffith$elm_ui$Element$Border$width(0),
+				$mdgriffith$elm_ui$Element$paddingEach(
+				{bottom: 0, left: 72, right: 0, top: 0})
+			])
+	};
+};
+var $author$project$Widget$Material$insetDivider = $author$project$Internal$Material$Item$insetDivider;
+var $author$project$Internal$Material$Palette$textGray = function (palette) {
+	return A3($author$project$Widget$Material$Color$withShade, palette.on.surface, 0.77, palette.surface);
+};
+var $author$project$Internal$Material$Item$insetHeader = function (palette) {
+	return {
+		content: {
+			content: {
+				divider: $author$project$Internal$Material$Item$insetDivider(palette).content,
+				title: _Utils_ap(
+					$author$project$Widget$Material$Typography$caption,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Font$color(
+							$author$project$Widget$Material$Color$fromColor(
+								$author$project$Internal$Material$Palette$textGray(palette)))
+						]))
+			},
+			elementColumn: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$spacing(12)
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+				$mdgriffith$elm_ui$Element$Border$width(0),
+				$mdgriffith$elm_ui$Element$paddingEach(
+				{bottom: 0, left: 72, right: 0, top: 0})
+			])
+	};
+};
+var $author$project$Widget$Material$insetHeader = $author$project$Internal$Material$Item$insetHeader;
+var $author$project$Internal$Material$Item$middleDivider = function (palette) {
+	return {
+		content: {
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$height(
+					$mdgriffith$elm_ui$Element$px(1)),
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$lightGray(palette)))
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(1)),
+				$mdgriffith$elm_ui$Element$Border$width(0),
+				$mdgriffith$elm_ui$Element$paddingEach(
+				{bottom: 0, left: 16, right: 16, top: 0})
+			])
+	};
+};
+var $author$project$Widget$Material$middleDivider = $author$project$Internal$Material$Item$middleDivider;
+var $author$project$Internal$Item$multiLineItem = F2(
+	function (s, _v0) {
+		var onPress = _v0.onPress;
+		var title = _v0.title;
+		var text = _v0.text;
+		var icon = _v0.icon;
+		var content = _v0.content;
+		return A2(
+			$author$project$Internal$Item$toItem,
+			s,
+			function (style) {
+				return A2(
+					$mdgriffith$elm_ui$Element$Input$button,
+					_Utils_ap(
+						style.elementButton,
+						_Utils_eq(onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : style.otherwise),
+					{
+						label: A2(
+							$mdgriffith$elm_ui$Element$row,
+							style.content.elementRow,
+							_List_fromArray(
+								[
+									A2(
+									$mdgriffith$elm_ui$Element$el,
+									style.content.content.icon.element,
+									icon(style.content.content.icon.content)),
+									A2(
+									$mdgriffith$elm_ui$Element$column,
+									style.content.content.description.elementColumn,
+									_List_fromArray(
+										[
+											A2(
+											$mdgriffith$elm_ui$Element$paragraph,
+											style.content.content.description.content.title.elementText,
+											$elm$core$List$singleton(
+												$mdgriffith$elm_ui$Element$text(title))),
+											A2(
+											$mdgriffith$elm_ui$Element$paragraph,
+											style.content.content.description.content.text.elementText,
+											$elm$core$List$singleton(
+												$mdgriffith$elm_ui$Element$text(text)))
+										])),
+									content(style.content.content.content)
+								])),
+						onPress: onPress
+					});
+			});
+	});
+var $author$project$Widget$multiLineItem = function () {
+	var fun = $author$project$Internal$Item$multiLineItem;
+	return fun;
+}();
+var $author$project$Widget$Material$Typography$body1 = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Font$size(16),
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.5)
+	]);
+var $author$project$Widget$Material$Typography$body2 = _List_fromArray(
+	[
+		$mdgriffith$elm_ui$Element$Font$size(14),
+		$mdgriffith$elm_ui$Element$Font$letterSpacing(0.25)
+	]);
+var $author$project$Internal$Material$Item$multiLineItem = function (palette) {
+	return {
+		content: {
+			content: {
+				content: {
+					content: {
+						color: $author$project$Internal$Material$Palette$textGray(palette),
+						size: 24
+					},
+					description: {
+						content: {
+							text: {
+								elementText: _Utils_ap(
+									$author$project$Widget$Material$Typography$body2,
+									_List_fromArray(
+										[
+											$mdgriffith$elm_ui$Element$Font$color(
+											$author$project$Widget$Material$Color$fromColor(
+												$author$project$Internal$Material$Palette$gray(palette)))
+										]))
+							},
+							title: {elementText: $author$project$Widget$Material$Typography$body1}
+						},
+						elementColumn: _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+								$mdgriffith$elm_ui$Element$spacing(4)
+							])
+					},
+					icon: {
+						content: {
+							color: $author$project$Internal$Material$Palette$textGray(palette),
+							size: 24
+						},
+						element: _List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width(
+								$mdgriffith$elm_ui$Element$px(40)),
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(24))
+							])
+					}
+				},
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spacing(16),
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+					])
+			},
+			elementButton: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$padding(16)
+				]),
+			ifDisabled: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$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', 'default'))
+				]),
+			otherwise: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonPressedOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonFocusOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2(
+									$author$project$Widget$Material$Color$scaleOpacity,
+									$author$project$Widget$Material$Color$buttonHoverOpacity,
+									$author$project$Internal$Material$Palette$gray(palette))))
+						]))
+				])
+		},
+		element: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$padding(0)
+			])
+	};
+};
+var $author$project$Widget$Material$multiLineItem = $author$project$Internal$Material$Item$multiLineItem;
+var $author$project$Page$Item$view = F2(
+	function (_v0, model) {
+		var palette = _v0.palette;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_Utils_ap(
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$height(
+						A2($mdgriffith$elm_ui$Element$minimum, 800, $mdgriffith$elm_ui$Element$fill)),
+						$mdgriffith$elm_ui$Element$width(
+						A2($mdgriffith$elm_ui$Element$minimum, 400, $mdgriffith$elm_ui$Element$fill))
+					]),
+				model.isEnabled ? $author$project$Widget$singleModal(
+					$elm$core$List$singleton(
+						{
+							content: A2(
+								$author$project$Widget$itemList,
+								$author$project$Widget$Material$sideSheet(palette),
+								$elm$core$List$concat(
+									_List_fromArray(
+										[
+											_List_fromArray(
+											[
+												A2(
+												$author$project$Widget$headerItem,
+												$author$project$Widget$Material$fullBleedHeader(palette),
+												'Section 1'),
+												$author$project$Widget$asItem(
+												$mdgriffith$elm_ui$Element$text('Custom Item')),
+												$author$project$Widget$divider(
+												$author$project$Widget$Material$middleDivider(palette)),
+												A2(
+												$author$project$Widget$fullBleedItem,
+												$author$project$Widget$Material$fullBleedItem(palette),
+												{
+													icon: function (_v1) {
+														return $mdgriffith$elm_ui$Element$none;
+													},
+													onPress: $elm$core$Maybe$Nothing,
+													text: 'Full Bleed Item'
+												}),
+												A2(
+												$author$project$Widget$headerItem,
+												$author$project$Widget$Material$fullBleedHeader(palette),
+												'Section 2'),
+												A2(
+												$author$project$Widget$insetItem,
+												$author$project$Widget$Material$insetItem(palette),
+												{
+													content: function (_v2) {
+														return $mdgriffith$elm_ui$Element$none;
+													},
+													icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$change_history),
+													onPress: $elm$core$Maybe$Nothing,
+													text: 'Item with Icon'
+												}),
+												A2(
+												$author$project$Widget$imageItem,
+												$author$project$Widget$Material$imageItem(palette),
+												{
+													content: function (_v3) {
+														var size = _v3.size;
+														var color = _v3.color;
+														return A2(
+															$mdgriffith$elm_ui$Element$el,
+															_List_fromArray(
+																[
+																	$mdgriffith$elm_ui$Element$Font$color(
+																	$author$project$Widget$Material$Color$fromColor(color)),
+																	$mdgriffith$elm_ui$Element$Font$size(size)
+																]),
+															$mdgriffith$elm_ui$Element$text('1.'));
+													},
+													image: A2(
+														$mdgriffith$elm_ui$Element$image,
+														_List_fromArray(
+															[
+																$mdgriffith$elm_ui$Element$width(
+																$mdgriffith$elm_ui$Element$px(40)),
+																$mdgriffith$elm_ui$Element$height(
+																$mdgriffith$elm_ui$Element$px(40))
+															]),
+														{description: 'Elm logo', src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Elm_logo.svg/1024px-Elm_logo.svg.png'}),
+													onPress: $elm$core$Maybe$Nothing,
+													text: 'Item with Image'
+												}),
+												$author$project$Widget$divider(
+												$author$project$Widget$Material$insetDivider(palette)),
+												A2(
+												$author$project$Widget$insetItem,
+												$author$project$Widget$Material$insetItem(palette),
+												{
+													content: function (_v4) {
+														var size = _v4.size;
+														var color = _v4.color;
+														return A2(
+															$mdgriffith$elm_ui$Element$el,
+															_List_fromArray(
+																[
+																	$mdgriffith$elm_ui$Element$Font$color(
+																	$author$project$Widget$Material$Color$fromColor(color)),
+																	$mdgriffith$elm_ui$Element$Font$size(size)
+																]),
+															$mdgriffith$elm_ui$Element$text('2.'));
+													},
+													icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+													onPress: $elm$core$Maybe$Just(
+														$author$project$Page$Item$ToogleExpand(!model.isExpanded)),
+													text: 'Click Me'
+												}),
+												A2(
+												$author$project$Widget$multiLineItem,
+												$author$project$Widget$Material$multiLineItem(palette),
+												{
+													content: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+													icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+													onPress: $elm$core$Maybe$Nothing,
+													text: 'Description. Description. Description. Description. Description. Description. Description. Description. Description. Description.',
+													title: 'Item'
+												}),
+												A2(
+												$author$project$Widget$imageItem,
+												$author$project$Widget$Material$imageItem(palette),
+												{
+													content: function (_v5) {
+														return A2(
+															$author$project$Widget$switch,
+															$author$project$Widget$Material$switch(palette),
+															{
+																active: model.isExpanded,
+																description: 'Click Me',
+																onPress: $elm$core$Maybe$Just(
+																	$author$project$Page$Item$ToogleExpand(!model.isExpanded))
+															});
+													},
+													image: $mdgriffith$elm_ui$Element$none,
+													onPress: $elm$core$Maybe$Just(
+														$author$project$Page$Item$ToogleExpand(!model.isExpanded)),
+													text: 'Clickable Item with Switch'
+												}),
+												$author$project$Widget$divider(
+												$author$project$Widget$Material$fullBleedDivider(palette))
+											]),
+											A2(
+											$author$project$Widget$expansionItem,
+											$author$project$Widget$Material$expansionItem(palette),
+											{
+												content: _List_fromArray(
+													[
+														A2(
+														$author$project$Widget$headerItem,
+														$author$project$Widget$Material$insetHeader(palette),
+														'Section 3'),
+														A2(
+														$author$project$Widget$insetItem,
+														$author$project$Widget$Material$insetItem(palette),
+														{
+															content: function (_v6) {
+																var size = _v6.size;
+																var color = _v6.color;
+																return A2(
+																	$mdgriffith$elm_ui$Element$el,
+																	_List_fromArray(
+																		[
+																			$mdgriffith$elm_ui$Element$Font$color(
+																			$author$project$Widget$Material$Color$fromColor(color)),
+																			$mdgriffith$elm_ui$Element$Font$size(size)
+																		]),
+																	$mdgriffith$elm_ui$Element$text('3.'));
+															},
+															icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+															onPress: $elm$core$Maybe$Nothing,
+															text: 'Item'
+														})
+													]),
+												icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+												isExpanded: model.isExpanded,
+												onToggle: $author$project$Page$Item$ToogleExpand,
+												text: 'Expandable Item'
+											}),
+											_List_fromArray(
+											[
+												A2(
+												$author$project$Widget$headerItem,
+												$author$project$Widget$Material$fullBleedHeader(palette),
+												'Menu')
+											]),
+											A2(
+											$author$project$Widget$selectItem,
+											$author$project$Widget$Material$selectItem(palette),
+											{
+												onSelect: function (_int) {
+													return $elm$core$Maybe$Just(
+														$author$project$Page$Item$ToogleExpand(_int === 1));
+												},
+												options: A2(
+													$elm$core$List$map,
+													function (bool) {
+														return {
+															icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+															text: bool ? 'Expanded' : 'Collapsed'
+														};
+													},
+													_List_fromArray(
+														[true, false])),
+												selected: model.isExpanded ? $elm$core$Maybe$Just(1) : $elm$core$Maybe$Just(0)
+											})
+										]))),
+							onDismiss: $elm$core$Maybe$Just(
+								$author$project$Page$Item$ToggleModal(false))
+						})) : _List_Nil),
+			A2(
+				$author$project$Widget$button,
+				$author$project$Widget$Material$containedButton(palette),
+				{
+					icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$visibility),
+					onPress: $elm$core$Maybe$Just(
+						$author$project$Page$Item$ToggleModal(true)),
+					text: 'Show Sheet'
+				}));
+	});
+var $author$project$Page$Item$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Item$init),
+	subscriptions: $author$project$Page$Item$subscriptions,
+	update: $author$project$Page$Item$update,
+	view: $author$project$Page$demo($author$project$Page$Item$view)
+};
+var $author$project$Page$Item$description = 'Items can be composed into lists.';
+var $author$project$Internal$Material$List$bottomSheet = function (palette) {
+	return {
+		content: {
+			element: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+				]),
+			ifFirst: _List_Nil,
+			ifLast: _List_Nil,
+			ifSingleton: _List_Nil,
+			otherwise: _List_Nil
+		},
+		elementColumn: _Utils_ap(
+			$author$project$Widget$Material$Color$textAndBackground(palette.surface),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$width(
+					A2($mdgriffith$elm_ui$Element$maximum, 360, $mdgriffith$elm_ui$Element$fill)),
+					A2($mdgriffith$elm_ui$Element$paddingXY, 0, 8)
+				]))
+	};
+};
+var $author$project$Widget$Material$bottomSheet = $author$project$Internal$Material$List$bottomSheet;
+var $author$project$Page$Item$viewDividerFunctions = function () {
+	var viewButton = F4(
+		function (listStyle, style, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.divider',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					_List_fromArray(
+						[
+							$author$project$Widget$divider(
+							style(palette)),
+							A2(
+							$author$project$Widget$fullBleedItem,
+							$author$project$Widget$Material$fullBleedItem(palette),
+							{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								onPress: $elm$core$Maybe$Nothing,
+								text: 'Placeholder'
+							}),
+							$author$project$Widget$divider(
+							style(palette)),
+							A2(
+							$author$project$Widget$fullBleedItem,
+							$author$project$Widget$Material$fullBleedItem(palette),
+							{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								onPress: $elm$core$Maybe$Nothing,
+								text: 'Placeholder'
+							}),
+							$author$project$Widget$divider(
+							style(palette))
+						])));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewButton]));
+}();
+var $author$project$Page$Item$dividerBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$optionListStory,
+			'Style',
+			_Utils_Tuple2('FullBleedDivider', $author$project$Widget$Material$fullBleedDivider),
+			_List_fromArray(
+				[
+					_Utils_Tuple2('MiddleDivider', $author$project$Widget$Material$middleDivider),
+					_Utils_Tuple2('InsetDivider', $author$project$Widget$Material$insetDivider)
+				])),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$optionListStory,
+				'Column Style',
+				_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+				_List_fromArray(
+					[
+						_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+						_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+						_Utils_Tuple2(
+						'Column',
+						$elm$core$Basics$always($author$project$Widget$Material$column))
+					])),
+			A2(
+				$author$project$UIExplorer$Story$book,
+				$elm$core$Maybe$Just('Options'),
+				$author$project$Page$Item$viewDividerFunctions))));
+var $author$project$Page$Item$viewMExpansionItemFunctions = function () {
+	var viewMultiLineItem = F7(
+		function (listStyle, style, icon, text, isExpanded, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.multiLineItem',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					$elm$core$List$concat(
+						_List_fromArray(
+							[
+								A2(
+								$author$project$Widget$expansionItem,
+								style(palette),
+								{
+									content: _List_fromArray(
+										[
+											A2(
+											$author$project$Widget$fullBleedItem,
+											$author$project$Widget$Material$fullBleedItem(palette),
+											{
+												icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+												onPress: $elm$core$Maybe$Nothing,
+												text: 'Placeholder'
+											})
+										]),
+									icon: icon,
+									isExpanded: isExpanded,
+									onToggle: $elm$core$Basics$always(_Utils_Tuple0),
+									text: text
+								}),
+								A2(
+								$author$project$Widget$expansionItem,
+								style(palette),
+								{
+									content: _List_fromArray(
+										[
+											A2(
+											$author$project$Widget$fullBleedItem,
+											$author$project$Widget$Material$fullBleedItem(palette),
+											{
+												icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+												onPress: $elm$core$Maybe$Nothing,
+												text: 'Placeholder'
+											})
+										]),
+									icon: icon,
+									isExpanded: isExpanded,
+									onToggle: $elm$core$Basics$always(_Utils_Tuple0),
+									text: text
+								}),
+								A2(
+								$author$project$Widget$expansionItem,
+								style(palette),
+								{
+									content: _List_fromArray(
+										[
+											A2(
+											$author$project$Widget$fullBleedItem,
+											$author$project$Widget$Material$fullBleedItem(palette),
+											{
+												icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+												onPress: $elm$core$Maybe$Nothing,
+												text: 'Placeholder'
+											})
+										]),
+									icon: icon,
+									isExpanded: isExpanded,
+									onToggle: $elm$core$Basics$always(_Utils_Tuple0),
+									text: text
+								})
+							]))));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewMultiLineItem]));
+}();
+var $author$project$Page$Item$expansionItemBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'is Expanded',
+			_Utils_Tuple2(true, false),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A2($author$project$UIExplorer$Story$textStory, 'Text', 'Item text'),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'With Icon',
+					_Utils_Tuple2(
+						A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+						$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+					true),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('InsetItem', $author$project$Widget$Material$expansionItem),
+						_List_Nil),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$optionListStory,
+							'Column Style',
+							_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+							_List_fromArray(
+								[
+									_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+									_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+									_Utils_Tuple2(
+									'Column',
+									$elm$core$Basics$always($author$project$Widget$Material$column))
+								])),
+						A2(
+							$author$project$UIExplorer$Story$book,
+							$elm$core$Maybe$Just('Options'),
+							$author$project$Page$Item$viewMExpansionItemFunctions)))))));
+var $author$project$Page$Item$viewFullBleedItemFunctions = function () {
+	var viewFullBleedItem = F7(
+		function (listStyle, style, text, onPress, icon, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.fullBleedItem',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$fullBleedItem,
+							style(palette),
+							{icon: icon, onPress: onPress, text: text}),
+							A2(
+							$author$project$Widget$fullBleedItem,
+							style(palette),
+							{icon: icon, onPress: onPress, text: text}),
+							A2(
+							$author$project$Widget$fullBleedItem,
+							style(palette),
+							{icon: icon, onPress: onPress, text: text})
+						])));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewFullBleedItem]));
+}();
+var $author$project$Page$Item$fullBleedItemBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With Icon',
+			_Utils_Tuple2(
+				A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+				$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'With event handler',
+				_Utils_Tuple2(
+					$elm$core$Maybe$Just(_Utils_Tuple0),
+					$elm$core$Maybe$Nothing),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A2($author$project$UIExplorer$Story$textStory, 'Text', 'Item text'),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('FullBleedItem', $author$project$Widget$Material$fullBleedItem),
+						_List_Nil),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$optionListStory,
+							'Column Style',
+							_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+							_List_fromArray(
+								[
+									_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+									_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+									_Utils_Tuple2(
+									'Column',
+									$elm$core$Basics$always($author$project$Widget$Material$column))
+								])),
+						A2(
+							$author$project$UIExplorer$Story$book,
+							$elm$core$Maybe$Just('Options'),
+							$author$project$Page$Item$viewFullBleedItemFunctions)))))));
+var $author$project$Page$Item$viewHeaderFunctions = function () {
+	var viewButton = F5(
+		function (listStyle, style, text, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.divider',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$headerItem,
+							style(palette),
+							text),
+							A2(
+							$author$project$Widget$fullBleedItem,
+							$author$project$Widget$Material$fullBleedItem(palette),
+							{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								onPress: $elm$core$Maybe$Nothing,
+								text: 'Placeholder'
+							}),
+							A2(
+							$author$project$Widget$headerItem,
+							style(palette),
+							text),
+							A2(
+							$author$project$Widget$fullBleedItem,
+							$author$project$Widget$Material$fullBleedItem(palette),
+							{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								onPress: $elm$core$Maybe$Nothing,
+								text: 'Placeholder'
+							}),
+							A2(
+							$author$project$Widget$headerItem,
+							style(palette),
+							text)
+						])));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewButton]));
+}();
+var $author$project$Page$Item$headerBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A2($author$project$UIExplorer$Story$textStory, 'Text', 'Header'),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$optionListStory,
+				'Style',
+				_Utils_Tuple2('FullBleedHeader', $author$project$Widget$Material$fullBleedHeader),
+				_List_fromArray(
+					[
+						_Utils_Tuple2('InsetHeader', $author$project$Widget$Material$insetHeader)
+					])),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Column Style',
+					_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+					_List_fromArray(
+						[
+							_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+							_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+							_Utils_Tuple2(
+							'Column',
+							$elm$core$Basics$always($author$project$Widget$Material$column))
+						])),
+				A2(
+					$author$project$UIExplorer$Story$book,
+					$elm$core$Maybe$Just('Options'),
+					$author$project$Page$Item$viewHeaderFunctions)))));
+var $author$project$Page$Item$viewInsetItemFunctions = function () {
+	var viewFullBleedItem = F8(
+		function (listStyle, style, text, onPress, icon, content, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.insetItem',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$insetItem,
+							style(palette),
+							{content: content, icon: icon, onPress: onPress, text: text}),
+							A2(
+							$author$project$Widget$insetItem,
+							style(palette),
+							{content: content, icon: icon, onPress: onPress, text: text}),
+							A2(
+							$author$project$Widget$insetItem,
+							style(palette),
+							{content: content, icon: icon, onPress: onPress, text: text})
+						])));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewFullBleedItem]));
+}();
+var $author$project$Page$Item$insetItemBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With Content',
+			_Utils_Tuple2(
+				A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+				$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'With Icon',
+				_Utils_Tuple2(
+					A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+					$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'With event handler',
+					_Utils_Tuple2(
+						$elm$core$Maybe$Just(_Utils_Tuple0),
+						$elm$core$Maybe$Nothing),
+					true),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A2($author$project$UIExplorer$Story$textStory, 'Text', 'Item text'),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$optionListStory,
+							'Style',
+							_Utils_Tuple2('InsetItem', $author$project$Widget$Material$insetItem),
+							_List_Nil),
+						A2(
+							$author$project$UIExplorer$Story$addStory,
+							A3(
+								$author$project$UIExplorer$Story$optionListStory,
+								'Column Style',
+								_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+								_List_fromArray(
+									[
+										_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+										_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+										_Utils_Tuple2(
+										'Column',
+										$elm$core$Basics$always($author$project$Widget$Material$column))
+									])),
+							A2(
+								$author$project$UIExplorer$Story$book,
+								$elm$core$Maybe$Just('Options'),
+								$author$project$Page$Item$viewInsetItemFunctions))))))));
+var $author$project$Page$Item$viewMultiLineItemFunctions = function () {
+	var viewMultiLineItem = F9(
+		function (listStyle, style, titleText, text, onPress, icon, content, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.multiLineItem',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					_List_fromArray(
+						[
+							A2(
+							$author$project$Widget$multiLineItem,
+							style(palette),
+							{content: content, icon: icon, onPress: onPress, text: text, title: titleText}),
+							A2(
+							$author$project$Widget$multiLineItem,
+							style(palette),
+							{content: content, icon: icon, onPress: onPress, text: text, title: titleText}),
+							A2(
+							$author$project$Widget$multiLineItem,
+							style(palette),
+							{content: content, icon: icon, onPress: onPress, text: text, title: titleText})
+						])));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewMultiLineItem]));
+}();
+var $author$project$Page$Item$multiLineItemBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With Content',
+			_Utils_Tuple2(
+				A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+				$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'With Icon',
+				_Utils_Tuple2(
+					A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+					$elm$core$Basics$always($mdgriffith$elm_ui$Element$none)),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'With event handler',
+					_Utils_Tuple2(
+						$elm$core$Maybe$Just(_Utils_Tuple0),
+						$elm$core$Maybe$Nothing),
+					true),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A2($author$project$UIExplorer$Story$textStory, 'Text', 'This text may span over multiple lines. But more then three should be avoided.'),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A2($author$project$UIExplorer$Story$textStory, 'Title', 'Title'),
+						A2(
+							$author$project$UIExplorer$Story$addStory,
+							A3(
+								$author$project$UIExplorer$Story$optionListStory,
+								'Style',
+								_Utils_Tuple2('InsetItem', $author$project$Widget$Material$multiLineItem),
+								_List_Nil),
+							A2(
+								$author$project$UIExplorer$Story$addStory,
+								A3(
+									$author$project$UIExplorer$Story$optionListStory,
+									'Column Style',
+									_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+									_List_fromArray(
+										[
+											_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+											_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+											_Utils_Tuple2(
+											'Column',
+											$elm$core$Basics$always($author$project$Widget$Material$column))
+										])),
+								A2(
+									$author$project$UIExplorer$Story$book,
+									$elm$core$Maybe$Just('Options'),
+									$author$project$Page$Item$viewMultiLineItemFunctions)))))))));
+var $author$project$Page$Item$viewSelectItemFunctions = function () {
+	var viewMultiLineItem = F7(
+		function (listStyle, style, selected, options, onSelect, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.multiLineItem',
+				A2(
+					$author$project$Widget$itemList,
+					listStyle(palette),
+					$elm$core$List$concat(
+						_List_fromArray(
+							[
+								A2(
+								$author$project$Widget$selectItem,
+								style(palette),
+								{onSelect: onSelect, options: options, selected: selected})
+							]))));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewMultiLineItem]));
+}();
+var $author$project$Page$Item$selectItemBook = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With event handler',
+			_Utils_Tuple2(
+				$elm$core$Basics$always(
+					$elm$core$Maybe$Just(_Utils_Tuple0)),
+				$elm$core$Basics$always($elm$core$Maybe$Nothing)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$optionListStory,
+				'Options',
+				_Utils_Tuple2(
+					'3 Option',
+					_List_fromArray(
+						[
+							{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							text: 'Submit'
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: ''
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: 'Submit'
+						}
+						])),
+				_List_fromArray(
+					[
+						_Utils_Tuple2(
+						'2 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: 'Submit'
+							},
+								{
+								icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+								text: ''
+							}
+							])),
+						_Utils_Tuple2(
+						'1 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: 'Submit'
+							}
+							]))
+					])),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Selected',
+					_Utils_Tuple2(
+						'Third',
+						$elm$core$Maybe$Just(2)),
+					_List_fromArray(
+						[
+							_Utils_Tuple2(
+							'Second',
+							$elm$core$Maybe$Just(1)),
+							_Utils_Tuple2(
+							'First',
+							$elm$core$Maybe$Just(0)),
+							_Utils_Tuple2('Nothing or Invalid', $elm$core$Maybe$Nothing)
+						])),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('InsetItem', $author$project$Widget$Material$selectItem),
+						_List_Nil),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$optionListStory,
+							'Column Style',
+							_Utils_Tuple2('CardColumn', $author$project$Widget$Material$cardColumn),
+							_List_fromArray(
+								[
+									_Utils_Tuple2('sideSheet', $author$project$Widget$Material$sideSheet),
+									_Utils_Tuple2('bottomSheet', $author$project$Widget$Material$bottomSheet),
+									_Utils_Tuple2(
+									'Column',
+									$elm$core$Basics$always($author$project$Widget$Material$column))
+								])),
+						A2(
+							$author$project$UIExplorer$Story$book,
+							$elm$core$Maybe$Just('Options'),
+							$author$project$Page$Item$viewSelectItemFunctions)))))));
+var $author$project$Page$Item$title = 'Item';
+var $author$project$Page$Item$page = $author$project$UIExplorer$Tile$page(
+	A2(
+		$author$project$UIExplorer$Tile$nextGroup,
+		$author$project$Page$Item$selectItemBook,
+		A2(
+			$author$project$UIExplorer$Tile$nextGroup,
+			$author$project$Page$Item$expansionItemBook,
+			A2(
+				$author$project$UIExplorer$Tile$nextGroup,
+				$author$project$Page$Item$multiLineItemBook,
+				A2(
+					$author$project$UIExplorer$Tile$nextGroup,
+					$author$project$Page$Item$insetItemBook,
+					A2(
+						$author$project$UIExplorer$Tile$nextGroup,
+						$author$project$Page$Item$fullBleedItemBook,
+						A2(
+							$author$project$UIExplorer$Tile$nextGroup,
+							$author$project$Page$Item$headerBook,
+							A2(
+								$author$project$UIExplorer$Tile$nextGroup,
+								$author$project$Page$Item$dividerBook,
+								A2(
+									$author$project$UIExplorer$Tile$next,
+									$author$project$Page$Item$demo,
+									$author$project$UIExplorer$Tile$first(
+										A2(
+											$author$project$UIExplorer$Tile$static,
+											_List_Nil,
+											F2(
+												function (_v0, _v1) {
+													return A2(
+														$mdgriffith$elm_ui$Element$column,
+														_List_fromArray(
+															[
+																$mdgriffith$elm_ui$Element$spacing(32)
+															]),
+														_List_fromArray(
+															[
+																A2(
+																$mdgriffith$elm_ui$Element$el,
+																$author$project$Widget$Material$Typography$h3,
+																$mdgriffith$elm_ui$Element$text($author$project$Page$Item$title)),
+																A2(
+																$mdgriffith$elm_ui$Element$paragraph,
+																_List_Nil,
+																$elm$core$List$singleton(
+																	$mdgriffith$elm_ui$Element$text($author$project$Page$Item$description)))
+															]));
+												}))))))))))));
+var $mdgriffith$elm_ui$Element$moveDown = 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$Internal$Modal$multiModal = function (list) {
+	if (list.b) {
+		var head = list.a;
+		var tail = list.b;
+		return _Utils_ap(
+			A2(
+				$elm$core$List$map,
+				function (_v1) {
+					var content = _v1.content;
+					return $mdgriffith$elm_ui$Element$inFront(content);
+				},
+				$elm$core$List$reverse(tail)),
+			_Utils_ap(
+				$author$project$Internal$Modal$background(head.onDismiss),
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$inFront(head.content)
+					])));
+	} else {
+		return _List_Nil;
+	}
+};
+var $author$project$Widget$multiModal = $author$project$Internal$Modal$multiModal;
+var $author$project$Page$Modal$viewFunctions = function () {
+	var viewSingle = F4(
+		function (content, onDismiss, _v2, _v3) {
+			var palette = _v2.palette;
+			var contentEl = A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$padding(8)
+					]),
+				A2(
+					$author$project$Widget$column,
+					$author$project$Widget$Material$cardColumn(palette),
+					$elm$core$List$singleton(
+						A2(
+							$mdgriffith$elm_ui$Element$paragraph,
+							_List_Nil,
+							$elm$core$List$singleton(
+								$mdgriffith$elm_ui$Element$text(content))))));
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.singleModal',
+				A2(
+					$mdgriffith$elm_ui$Element$el,
+					_Utils_ap(
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(200)),
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+							]),
+						$author$project$Widget$singleModal(
+							_List_fromArray(
+								[
+									{content: contentEl, onDismiss: onDismiss},
+									{
+									content: A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$moveDown(10),
+												$mdgriffith$elm_ui$Element$moveRight(10)
+											]),
+										contentEl),
+									onDismiss: onDismiss
+								},
+									{
+									content: A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$moveDown(20),
+												$mdgriffith$elm_ui$Element$moveRight(20)
+											]),
+										contentEl),
+									onDismiss: onDismiss
+								}
+								]))),
+					$mdgriffith$elm_ui$Element$text('Placeholder Text')));
+		});
+	var viewMulti = F4(
+		function (content, onDismiss, _v0, _v1) {
+			var palette = _v0.palette;
+			var contentEl = A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$padding(8)
+					]),
+				A2(
+					$author$project$Widget$column,
+					$author$project$Widget$Material$cardColumn(palette),
+					$elm$core$List$singleton(
+						A2(
+							$mdgriffith$elm_ui$Element$paragraph,
+							_List_Nil,
+							$elm$core$List$singleton(
+								$mdgriffith$elm_ui$Element$text(content))))));
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.multiModal',
+				A2(
+					$mdgriffith$elm_ui$Element$el,
+					_Utils_ap(
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$height(
+								$mdgriffith$elm_ui$Element$px(200)),
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+							]),
+						$author$project$Widget$multiModal(
+							_List_fromArray(
+								[
+									{content: contentEl, onDismiss: onDismiss},
+									{
+									content: A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$moveDown(10),
+												$mdgriffith$elm_ui$Element$moveRight(10)
+											]),
+										contentEl),
+									onDismiss: onDismiss
+								},
+									{
+									content: A2(
+										$mdgriffith$elm_ui$Element$el,
+										_List_fromArray(
+											[
+												$mdgriffith$elm_ui$Element$moveDown(20),
+												$mdgriffith$elm_ui$Element$moveRight(20)
+											]),
+										contentEl),
+									onDismiss: onDismiss
+								}
+								]))),
+					$mdgriffith$elm_ui$Element$text('Placeholder Text')));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewSingle, viewMulti]));
+}();
+var $author$project$Page$Modal$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With event handler',
+			_Utils_Tuple2(
+				$elm$core$Maybe$Just(_Utils_Tuple0),
+				$elm$core$Maybe$Nothing),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A2($author$project$UIExplorer$Story$textStory, 'Content', 'This is a windows that is in front of everything else. You can allow the user to close it by pressing outside of it or disable this feature.'),
+			A2(
+				$author$project$UIExplorer$Story$book,
+				$elm$core$Maybe$Just('Options'),
+				$author$project$Page$Modal$viewFunctions))));
+var $author$project$Page$Modal$IsEnabled = function (a) {
+	return {$: 'IsEnabled', a: a};
+};
+var $author$project$Page$Modal$init = _Utils_Tuple2(
+	$author$project$Page$Modal$IsEnabled(true),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$Modal$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Modal$update = F2(
+	function (msg, _v0) {
+		var bool = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Page$Modal$IsEnabled(bool),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Page$Modal$ToggleModal = function (a) {
+	return {$: 'ToggleModal', a: a};
+};
+var $author$project$Page$Modal$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var isEnabled = _v1.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$multiModal(
+					_List_fromArray(
+						[
+							{
+							content: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_fromArray(
+									[
+										$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,
+									$author$project$Widget$Material$cardColumn(palette),
+									$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(
+								$author$project$Page$Modal$ToggleModal(false))
+						},
+							{
+							content: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$height(
+										$mdgriffith$elm_ui$Element$px(150)),
+										$mdgriffith$elm_ui$Element$width(
+										$mdgriffith$elm_ui$Element$px(200)),
+										$mdgriffith$elm_ui$Element$centerX,
+										$mdgriffith$elm_ui$Element$centerY
+									]),
+								A2(
+									$author$project$Widget$column,
+									$author$project$Widget$Material$cardColumn(palette),
+									$elm$core$List$singleton(
+										A2(
+											$mdgriffith$elm_ui$Element$paragraph,
+											_List_Nil,
+											$elm$core$List$singleton(
+												$mdgriffith$elm_ui$Element$text('This card can not be selected.')))))),
+							onDismiss: $elm$core$Maybe$Nothing
+						},
+							{
+							content: A2(
+								$mdgriffith$elm_ui$Element$el,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$height(
+										$mdgriffith$elm_ui$Element$px(300)),
+										$mdgriffith$elm_ui$Element$width(
+										$mdgriffith$elm_ui$Element$px(300)),
+										$mdgriffith$elm_ui$Element$centerX,
+										$mdgriffith$elm_ui$Element$centerY
+									]),
+								A2(
+									$author$project$Widget$column,
+									$author$project$Widget$Material$cardColumn(palette),
+									$elm$core$List$singleton(
+										A2(
+											$mdgriffith$elm_ui$Element$paragraph,
+											_List_Nil,
+											$elm$core$List$singleton(
+												$mdgriffith$elm_ui$Element$text('This is message is behind the other two')))))),
+							onDismiss: $elm$core$Maybe$Nothing
+						}
+						])) : _List_Nil),
+			A2(
+				$author$project$Widget$button,
+				$author$project$Widget$Material$containedButton(palette),
+				{
+					icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$visibility),
+					onPress: $elm$core$Maybe$Just(
+						$author$project$Page$Modal$ToggleModal(true)),
+					text: 'Show Modal'
+				}));
+	});
+var $author$project$Page$Modal$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Modal$init),
+	subscriptions: $author$project$Page$Modal$subscriptions,
+	update: $author$project$Page$Modal$update,
+	view: $author$project$Page$demo($author$project$Page$Modal$view)
+};
+var $author$project$Page$Modal$description = 'All modal surfaces are interruptive by design – their purpose is to have the user focus on content on a surface that appears in front of all other surfaces.';
+var $author$project$Page$Modal$title = 'Modal';
+var $author$project$Page$Modal$page = $author$project$Page$create(
+	{book: $author$project$Page$Modal$book, demo: $author$project$Page$Modal$demo, description: $author$project$Page$Modal$description, title: $author$project$Page$Modal$title});
+var $author$project$Internal$Material$Button$toggleButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.surface),
+						size: 24
+					},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 24
+					},
+					otherwise: {
+						color: $author$project$Widget$Material$Color$accessibleTextColor(palette.surface),
+						size: 24
+					}
+				},
+				text: {
+					contentText: _List_fromArray(
+						[$mdgriffith$elm_ui$Element$centerX])
+				}
+			},
+			elementRow: _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$Material$Color$textAndBackground(
+						A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.surface)))
+				])
+		},
+		elementButton: _Utils_ap(
+			$author$project$Widget$Material$Typography$button,
+			_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(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.surface))),
+							$mdgriffith$elm_ui$Element$Border$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3(
+									$author$project$Widget$Material$Color$withShade,
+									palette.on.surface,
+									$author$project$Widget$Material$Color$buttonPressedOpacity,
+									A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))))
+						])),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.surface))),
+							$mdgriffith$elm_ui$Element$Border$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A3(
+									$author$project$Widget$Material$Color$withShade,
+									palette.on.surface,
+									$author$project$Widget$Material$Color$buttonHoverOpacity,
+									A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))))
+						]))
+				])),
+		ifActive: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A3($author$project$Widget$Material$Color$withShade, palette.on.surface, $author$project$Widget$Material$Color$buttonSelectedOpacity, palette.surface))),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Widget$Material$Color$accessibleTextColor(palette.surface))),
+				$mdgriffith$elm_ui$Element$Border$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A3(
+						$author$project$Widget$Material$Color$withShade,
+						palette.on.surface,
+						$author$project$Widget$Material$Color$buttonSelectedOpacity,
+						A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface)))),
+				$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
+			]),
+		ifDisabled: _Utils_ap(
+			$author$project$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Background$color(
+					$author$project$Widget$Material$Color$fromColor(palette.surface)),
+					$mdgriffith$elm_ui$Element$Border$color(
+					$author$project$Widget$Material$Color$fromColor(
+						A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface))),
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil)
+				])),
+		otherwise: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(palette.surface)),
+				$mdgriffith$elm_ui$Element$Font$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Widget$Material$Color$accessibleTextColor(palette.surface))),
+				$mdgriffith$elm_ui$Element$Border$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A2($author$project$Widget$Material$Color$scaleOpacity, 0.14, palette.on.surface)))
+			])
+	};
+};
+var $author$project$Widget$Material$toggleButton = $author$project$Internal$Material$Button$toggleButton;
+var $author$project$Internal$List$buttonColumn = function (style) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$author$project$Internal$List$internalButton(
+			{content: style.content, element: style.elementColumn.content.element, ifFirst: style.elementColumn.content.ifFirst, ifLast: style.elementColumn.content.ifLast, ifSingleton: style.elementColumn.content.ifSingleton, otherwise: style.elementColumn.content.otherwise}),
+		$mdgriffith$elm_ui$Element$column(style.elementColumn.elementColumn));
+};
+var $author$project$Widget$buttonColumn = $author$project$Internal$List$buttonColumn;
+var $author$project$Internal$List$buttonRow = function (style) {
+	return A2(
+		$elm$core$Basics$composeR,
+		$author$project$Internal$List$internalButton(
+			{content: style.content, element: style.elementRow.content.element, ifFirst: style.elementRow.content.ifFirst, ifLast: style.elementRow.content.ifLast, ifSingleton: style.elementRow.content.ifSingleton, otherwise: style.elementRow.content.otherwise}),
+		$mdgriffith$elm_ui$Element$row(style.elementRow.elementRow));
+};
+var $author$project$Widget$buttonRow = $author$project$Internal$List$buttonRow;
+var $author$project$Internal$Select$multiSelect = function (_v0) {
+	var selected = _v0.selected;
+	var options = _v0.options;
+	var onSelect = _v0.onSelect;
+	return A2(
+		$elm$core$List$indexedMap,
+		F2(
+			function (i, a) {
+				return _Utils_Tuple2(
+					A2($elm$core$Set$member, i, selected),
+					{
+						icon: a.icon,
+						onPress: onSelect(i),
+						text: a.text
+					});
+			}),
+		options);
+};
+var $author$project$Widget$multiSelect = $author$project$Internal$Select$multiSelect;
+var $author$project$Internal$Select$toggleButton = F2(
+	function (style, _v0) {
+		var selected = _v0.a;
+		var b = _v0.b;
+		return A2(
+			$mdgriffith$elm_ui$Element$Input$button,
+			_Utils_ap(
+				style.elementButton,
+				_Utils_ap(
+					_Utils_eq(b.onPress, $elm$core$Maybe$Nothing) ? style.ifDisabled : (selected ? style.ifActive : style.otherwise),
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Region$description(b.text)
+						]))),
+			{
+				label: A2(
+					$mdgriffith$elm_ui$Element$el,
+					style.content.elementRow,
+					b.icon(
+						_Utils_eq(b.onPress, $elm$core$Maybe$Nothing) ? style.content.content.icon.ifDisabled : (selected ? style.content.content.icon.ifActive : style.content.content.icon.otherwise))),
+				onPress: b.onPress
+			});
+	});
+var $author$project$Internal$List$toggleRow = F2(
+	function (style, list) {
+		return A2(
+			$mdgriffith$elm_ui$Element$row,
+			style.elementRow.elementRow,
+			A2(
+				$elm$core$List$indexedMap,
+				function (i) {
+					return $author$project$Internal$Select$toggleButton(
+						A2(
+							$author$project$Widget$Customize$elementButton,
+							_Utils_ap(
+								style.elementRow.content.element,
+								($elm$core$List$length(list) === 1) ? style.elementRow.content.ifSingleton : ((!i) ? style.elementRow.content.ifFirst : (_Utils_eq(
+									i,
+									$elm$core$List$length(list) - 1) ? style.elementRow.content.ifLast : style.elementRow.content.otherwise))),
+							style.content));
+				},
+				list));
+	});
+var $author$project$Widget$toggleRow = $author$project$Internal$List$toggleRow;
+var $author$project$Internal$Material$List$toggleRow = {
+	content: {
+		element: _List_Nil,
+		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})
+			]),
+		ifSingleton: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$rounded(2)
+			]),
+		otherwise: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$rounded(0)
+			])
+	},
+	elementRow: _List_Nil
+};
+var $author$project$Widget$Material$toggleRow = $author$project$Internal$Material$List$toggleRow;
+var $author$project$Page$MultiSelect$viewFunctions = function () {
+	var viewWrappedRow = F8(
+		function (style, selected1, selected2, selected3, options, onSelect, _v6, _v7) {
+			var palette = _v6.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.wrappedButtonRow',
+				A2(
+					$author$project$Widget$wrappedButtonRow,
+					{
+						content: style(palette),
+						elementRow: $author$project$Widget$Material$row
+					},
+					$author$project$Widget$multiSelect(
+						{
+							onSelect: onSelect,
+							options: options,
+							selected: $elm$core$Set$fromList(
+								A2(
+									$elm$core$List$filterMap,
+									$elm$core$Basics$identity,
+									_List_fromArray(
+										[selected1, selected2, selected3])))
+						})));
+		});
+	var viewTogggleRow = F8(
+		function (style, selected1, selected2, selected3, options, onSelect, _v4, _v5) {
+			var palette = _v4.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.toggleRow',
+				A2(
+					$author$project$Widget$toggleRow,
+					{
+						content: style(palette),
+						elementRow: $author$project$Widget$Material$toggleRow
+					},
+					$author$project$Widget$multiSelect(
+						{
+							onSelect: onSelect,
+							options: options,
+							selected: $elm$core$Set$fromList(
+								A2(
+									$elm$core$List$filterMap,
+									$elm$core$Basics$identity,
+									_List_fromArray(
+										[selected1, selected2, selected3])))
+						})));
+		});
+	var viewSelectRow = F8(
+		function (style, selected1, selected2, selected3, options, onSelect, _v2, _v3) {
+			var palette = _v2.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.buttonRow ',
+				A2(
+					$author$project$Widget$buttonRow,
+					{
+						content: style(palette),
+						elementRow: $author$project$Widget$Material$row
+					},
+					$author$project$Widget$multiSelect(
+						{
+							onSelect: onSelect,
+							options: options,
+							selected: $elm$core$Set$fromList(
+								A2(
+									$elm$core$List$filterMap,
+									$elm$core$Basics$identity,
+									_List_fromArray(
+										[selected1, selected2, selected3])))
+						})));
+		});
+	var viewSelectColumn = F8(
+		function (style, selected1, selected2, selected3, options, onSelect, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.buttonColumn',
+				A2(
+					$author$project$Widget$buttonColumn,
+					{
+						content: style(palette),
+						elementColumn: $author$project$Widget$Material$column
+					},
+					$author$project$Widget$multiSelect(
+						{
+							onSelect: onSelect,
+							options: options,
+							selected: $elm$core$Set$fromList(
+								A2(
+									$elm$core$List$filterMap,
+									$elm$core$Basics$identity,
+									_List_fromArray(
+										[selected1, selected2, selected3])))
+						})));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewTogggleRow, viewSelectRow, viewSelectColumn, viewWrappedRow]));
+}();
+var $author$project$Page$MultiSelect$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With event handler',
+			_Utils_Tuple2(
+				$elm$core$Basics$always(
+					$elm$core$Maybe$Just(_Utils_Tuple0)),
+				$elm$core$Basics$always($elm$core$Maybe$Nothing)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$optionListStory,
+				'Options',
+				_Utils_Tuple2(
+					'3 Option',
+					_List_fromArray(
+						[
+							{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							text: 'Submit'
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: ''
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: 'Submit'
+						}
+						])),
+				_List_fromArray(
+					[
+						_Utils_Tuple2(
+						'2 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: 'Submit'
+							},
+								{
+								icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+								text: ''
+							}
+							])),
+						_Utils_Tuple2(
+						'1 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: 'Submit'
+							}
+							]))
+					])),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'Selected Third',
+					_Utils_Tuple2(
+						$elm$core$Maybe$Just(2),
+						$elm$core$Maybe$Nothing),
+					true),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$boolStory,
+						'Selected Second',
+						_Utils_Tuple2(
+							$elm$core$Maybe$Just(1),
+							$elm$core$Maybe$Nothing),
+						true),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$boolStory,
+							'Selected First',
+							_Utils_Tuple2(
+								$elm$core$Maybe$Just(0),
+								$elm$core$Maybe$Nothing),
+							false),
+						A2(
+							$author$project$UIExplorer$Story$addStory,
+							A3(
+								$author$project$UIExplorer$Story$optionListStory,
+								'Style',
+								_Utils_Tuple2('Contained', $author$project$Widget$Material$containedButton),
+								_List_fromArray(
+									[
+										_Utils_Tuple2('Outlined', $author$project$Widget$Material$outlinedButton),
+										_Utils_Tuple2('Text', $author$project$Widget$Material$textButton),
+										_Utils_Tuple2('Chip', $author$project$Widget$Material$chip),
+										_Utils_Tuple2('IconButton', $author$project$Widget$Material$iconButton),
+										_Utils_Tuple2('Toggle', $author$project$Widget$Material$toggleButton)
+									])),
+							A2(
+								$author$project$UIExplorer$Story$book,
+								$elm$core$Maybe$Just('Options'),
+								$author$project$Page$MultiSelect$viewFunctions))))))));
+var $author$project$Page$MultiSelect$Selected = function (a) {
+	return {$: 'Selected', a: a};
+};
+var $author$project$Page$MultiSelect$init = _Utils_Tuple2(
+	$author$project$Page$MultiSelect$Selected($elm$core$Set$empty),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$MultiSelect$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$MultiSelect$update = F2(
+	function (msg, _v0) {
+		var selected = _v0.a;
+		var _int = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Page$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$Page$MultiSelect$ChangedSelected = function (a) {
+	return {$: 'ChangedSelected', a: a};
+};
+var $author$project$Page$MultiSelect$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var selected = _v1.a;
+		return A2(
+			$author$project$Widget$buttonRow,
+			{
+				content: $author$project$Widget$Material$toggleButton(palette),
+				elementRow: $author$project$Widget$Material$toggleRow
+			},
+			$author$project$Widget$multiSelect(
+				{
+					onSelect: A2($elm$core$Basics$composeR, $author$project$Page$MultiSelect$ChangedSelected, $elm$core$Maybe$Just),
+					options: A2(
+						$elm$core$List$map,
+						function (_int) {
+							return {
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: $elm$core$String$fromInt(_int)
+							};
+						},
+						_List_fromArray(
+							[1, 2, 42])),
+					selected: selected
+				}));
+	});
+var $author$project$Page$MultiSelect$demo = {
+	init: $elm$core$Basics$always($author$project$Page$MultiSelect$init),
+	subscriptions: $author$project$Page$MultiSelect$subscriptions,
+	update: $author$project$Page$MultiSelect$update,
+	view: $author$project$Page$demo($author$project$Page$MultiSelect$view)
+};
+var $author$project$Page$MultiSelect$description = 'Select buttons group a set of actions using layout and spacing.';
+var $author$project$Page$MultiSelect$title = 'Multi Select';
+var $author$project$Page$MultiSelect$page = $author$project$Page$create(
+	{book: $author$project$Page$MultiSelect$book, demo: $author$project$Page$MultiSelect$demo, description: $author$project$Page$MultiSelect$description, title: $author$project$Page$MultiSelect$title});
 var $mdgriffith$elm_ui$Element$Input$currentPassword = F2(
 	function (attrs, pass) {
 		return A3(
@@ -19686,7 +24723,8 @@ var $author$project$Internal$Material$PasswordInput$passwordInput = function (pa
 var $author$project$Widget$Material$passwordInput = $author$project$Internal$Material$PasswordInput$passwordInput;
 var $author$project$Page$PasswordInput$viewFunctions = function () {
 	var viewNewPassword = F6(
-		function (palette, text, placeholder, label, _v2, _v3) {
+		function (text, placeholder, label, show, _v2, _v3) {
+			var palette = _v2.palette;
 			return A2(
 				$author$project$Page$viewTile,
 				'Widget.newPasswordInput',
@@ -19697,12 +24735,13 @@ var $author$project$Page$PasswordInput$viewFunctions = function () {
 						label: label,
 						onChange: $elm$core$Basics$always(_Utils_Tuple0),
 						placeholder: placeholder,
-						show: false,
+						show: show,
 						text: text
 					}));
 		});
 	var viewCurrentPassword = F6(
-		function (palette, text, placeholder, label, _v0, _v1) {
+		function (text, placeholder, label, show, _v0, _v1) {
+			var palette = _v0.palette;
 			return A2(
 				$author$project$Page$viewTile,
 				'Widget.currentPasswordInput',
@@ -19713,7 +24752,7 @@ var $author$project$Page$PasswordInput$viewFunctions = function () {
 						label: label,
 						onChange: $elm$core$Basics$always(_Utils_Tuple0),
 						placeholder: placeholder,
-						show: false,
+						show: show,
 						text: text
 					}));
 		});
@@ -19727,38 +24766,30 @@ var $author$project$Page$PasswordInput$viewFunctions = function () {
 var $author$project$Page$PasswordInput$book = $author$project$UIExplorer$Story$build(
 	A2(
 		$author$project$UIExplorer$Story$addStory,
-		A2($author$project$UIExplorer$Story$textStory, 'Label', 'Password'),
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'Show',
+			_Utils_Tuple2(true, false),
+			true),
 		A2(
 			$author$project$UIExplorer$Story$addStory,
-			A3(
-				$author$project$UIExplorer$Story$optionListStory,
-				'Placeholder',
-				$elm$core$Maybe$Nothing,
-				_List_fromArray(
-					[
-						_Utils_Tuple2(
-						'Yes',
+			A2($author$project$UIExplorer$Story$textStory, 'Label', 'Password'),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$boolStory,
+					'Placeholder',
+					_Utils_Tuple2(
 						$elm$core$Maybe$Just(
 							A2(
 								$mdgriffith$elm_ui$Element$Input$placeholder,
 								_List_Nil,
-								$mdgriffith$elm_ui$Element$text('password')))),
-						_Utils_Tuple2('No', $elm$core$Maybe$Nothing)
-					])),
-			A2(
-				$author$project$UIExplorer$Story$addStory,
-				A2($author$project$UIExplorer$Story$textStory, 'Text', '123456789'),
+								$mdgriffith$elm_ui$Element$text('password'))),
+						$elm$core$Maybe$Nothing),
+					true),
 				A2(
 					$author$project$UIExplorer$Story$addStory,
-					A3(
-						$author$project$UIExplorer$Story$optionListStory,
-						'Palette',
-						$author$project$Widget$Material$darkPalette,
-						_List_fromArray(
-							[
-								_Utils_Tuple2('dark', $author$project$Widget$Material$darkPalette),
-								_Utils_Tuple2('default', $author$project$Widget$Material$defaultPalette)
-							])),
+					A2($author$project$UIExplorer$Story$textStory, 'Text', '123456789'),
 					A2(
 						$author$project$UIExplorer$Story$book,
 						$elm$core$Maybe$Just('Options'),
@@ -19796,82 +24827,2052 @@ var $author$project$Page$PasswordInput$SetPasswordInput = function (a) {
 var $author$project$Page$PasswordInput$view = F2(
 	function (_v0, model) {
 		var palette = _v0.palette;
-		return {
-			attributes: _List_Nil,
-			body: A2(
-				$mdgriffith$elm_ui$Element$column,
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-						$mdgriffith$elm_ui$Element$spacing(8)
-					]),
-				_List_fromArray(
-					[
-						$mdgriffith$elm_ui$Element$text('Try  fill out these fields using autofill'),
-						A2(
-						$mdgriffith$elm_ui$Element$row,
-						_List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-								$mdgriffith$elm_ui$Element$spaceEvenly
-							]),
-						_List_fromArray(
-							[
-								A2(
-								$mdgriffith$elm_ui$Element$el,
-								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-									]),
-								$mdgriffith$elm_ui$Element$text('Current Password')),
-								A2(
-								$author$project$Widget$currentPasswordInput,
-								$author$project$Widget$Material$passwordInput(palette),
-								{label: 'Chips', onChange: $author$project$Page$PasswordInput$SetPasswordInput, placeholder: $elm$core$Maybe$Nothing, show: false, text: model.passwordInput})
-							])),
-						A2(
-						$mdgriffith$elm_ui$Element$row,
-						_List_fromArray(
-							[
-								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-								$mdgriffith$elm_ui$Element$spaceEvenly
-							]),
-						_List_fromArray(
-							[
-								A2(
-								$mdgriffith$elm_ui$Element$el,
-								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-									]),
-								$mdgriffith$elm_ui$Element$text('New Password')),
-								A2(
-								$author$project$Widget$newPasswordInput,
-								$author$project$Widget$Material$passwordInput(palette),
-								{label: 'Chips', onChange: $author$project$Page$PasswordInput$SetNewPasswordInput, placeholder: $elm$core$Maybe$Nothing, show: false, text: model.newInput})
-							])),
-						$mdgriffith$elm_ui$Element$text(
-						((model.newInput !== '') && _Utils_eq(model.newInput, model.passwordInput)) ? 'Yeay, the two passwords match!' : '')
-					])),
-			position: $author$project$UIExplorer$Tile$FullWidthTile,
-			title: $elm$core$Maybe$Just('Interactive Demo')
-		};
+		return A2(
+			$mdgriffith$elm_ui$Element$column,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					$mdgriffith$elm_ui$Element$spacing(8)
+				]),
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$text('Try  filling out these fields using autofill'),
+					A2(
+					$mdgriffith$elm_ui$Element$row,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+							$mdgriffith$elm_ui$Element$spaceEvenly
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+								]),
+							$mdgriffith$elm_ui$Element$text('Current Password')),
+							A2(
+							$author$project$Widget$currentPasswordInput,
+							$author$project$Widget$Material$passwordInput(palette),
+							{label: 'Chips', onChange: $author$project$Page$PasswordInput$SetPasswordInput, placeholder: $elm$core$Maybe$Nothing, show: false, text: model.passwordInput})
+						])),
+					A2(
+					$mdgriffith$elm_ui$Element$row,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+							$mdgriffith$elm_ui$Element$spaceEvenly
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Element$el,
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+								]),
+							$mdgriffith$elm_ui$Element$text('New Password')),
+							A2(
+							$author$project$Widget$newPasswordInput,
+							$author$project$Widget$Material$passwordInput(palette),
+							{label: 'Chips', onChange: $author$project$Page$PasswordInput$SetNewPasswordInput, placeholder: $elm$core$Maybe$Nothing, show: false, text: model.newInput})
+						])),
+					$mdgriffith$elm_ui$Element$text(
+					((model.newInput !== '') && _Utils_eq(model.newInput, model.passwordInput)) ? 'Yeay, the two passwords match!' : '')
+				]));
 	});
 var $author$project$Page$PasswordInput$demo = {
 	init: $elm$core$Basics$always($author$project$Page$PasswordInput$init),
 	subscriptions: $author$project$Page$PasswordInput$subscriptions,
 	update: $author$project$Page$PasswordInput$update,
-	view: $author$project$Page$PasswordInput$view
+	view: $author$project$Page$demo($author$project$Page$PasswordInput$view)
 };
 var $author$project$Page$PasswordInput$description = 'If we want to play nicely with a browser\'s ability to autofill a form, we need to be able to give it a hint about what we\'re expecting.\n    \nThe following inputs are very similar to Input.text, but they give the browser a hint to allow autofill to work correctly.';
 var $author$project$Page$PasswordInput$title = 'Password Input';
 var $author$project$Page$PasswordInput$page = $author$project$Page$create(
 	{book: $author$project$Page$PasswordInput$book, demo: $author$project$Page$PasswordInput$demo, description: $author$project$Page$PasswordInput$description, title: $author$project$Page$PasswordInput$title});
+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 $elm$svg$Svg$Attributes$strokeDasharray = _VirtualDom_attribute('stroke-dasharray');
+var $elm$svg$Svg$Attributes$strokeDashoffset = _VirtualDom_attribute('stroke-dashoffset');
+var $elm$svg$Svg$Attributes$transform = _VirtualDom_attribute('transform');
+var $elm$svg$Svg$Attributes$xmlSpace = A2(_VirtualDom_attributeNS, 'http://www.w3.org/XML/1998/namespace', 'xml:space');
+var $author$project$Internal$Material$ProgressIndicator$determinateCircularIcon = F3(
+	function (color, attribs, progress) {
+		var strokeDashoffset = function () {
+			var clampedProgress = A3($elm$core$Basics$clamp, 0, 1, progress);
+			return $elm$core$Basics$round(188 - (188 * clampedProgress));
+		}();
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			attribs,
+			$mdgriffith$elm_ui$Element$html(
+				A2(
+					$elm$svg$Svg$svg,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$height('48px'),
+							$elm$svg$Svg$Attributes$width('48px'),
+							$elm$svg$Svg$Attributes$viewBox('0 0 66 66'),
+							$elm$svg$Svg$Attributes$xmlSpace('http://www.w3.org/2000/svg')
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$g,
+							_List_Nil,
+							_List_fromArray(
+								[
+									A2(
+									$elm$svg$Svg$circle,
+									_List_fromArray(
+										[
+											$elm$svg$Svg$Attributes$fill('none'),
+											$elm$svg$Svg$Attributes$stroke(
+											$avh4$elm_color$Color$toCssString(color)),
+											$elm$svg$Svg$Attributes$strokeWidth('5'),
+											$elm$svg$Svg$Attributes$strokeLinecap('butt'),
+											$elm$svg$Svg$Attributes$cx('33'),
+											$elm$svg$Svg$Attributes$cy('33'),
+											$elm$svg$Svg$Attributes$r('30'),
+											$elm$svg$Svg$Attributes$strokeDasharray('188 188'),
+											$elm$svg$Svg$Attributes$strokeDashoffset(
+											$elm$core$String$fromInt(strokeDashoffset)),
+											$elm$svg$Svg$Attributes$transform('rotate(-90 33 33)')
+										]),
+									_List_Nil)
+								]))
+						]))));
+	});
+var $elm$svg$Svg$animate = $elm$svg$Svg$trustedNode('animate');
+var $elm$svg$Svg$animateTransform = $elm$svg$Svg$trustedNode('animateTransform');
+var $elm$svg$Svg$Attributes$attributeName = _VirtualDom_attribute('attributeName');
+var $elm$svg$Svg$Attributes$begin = _VirtualDom_attribute('begin');
+var $elm$svg$Svg$Attributes$dur = _VirtualDom_attribute('dur');
+var $elm$svg$Svg$Attributes$repeatCount = _VirtualDom_attribute('repeatCount');
+var $elm$svg$Svg$Attributes$type_ = _VirtualDom_attribute('type');
+var $author$project$Internal$Material$ProgressIndicator$indeterminateCircularIcon = F2(
+	function (color, attribs) {
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			attribs,
+			$mdgriffith$elm_ui$Element$html(
+				A2(
+					$elm$svg$Svg$svg,
+					_List_fromArray(
+						[
+							$elm$svg$Svg$Attributes$height('48px'),
+							$elm$svg$Svg$Attributes$width('48px'),
+							$elm$svg$Svg$Attributes$viewBox('0 0 66 66'),
+							$elm$svg$Svg$Attributes$xmlSpace('http://www.w3.org/2000/svg')
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$svg$Svg$g,
+							_List_Nil,
+							_List_fromArray(
+								[
+									A2(
+									$elm$svg$Svg$animateTransform,
+									_List_fromArray(
+										[
+											$elm$svg$Svg$Attributes$attributeName('transform'),
+											$elm$svg$Svg$Attributes$type_('rotate'),
+											$elm$svg$Svg$Attributes$values('0 33 33;270 33 33'),
+											$elm$svg$Svg$Attributes$begin('0s'),
+											$elm$svg$Svg$Attributes$dur('1.4s'),
+											$elm$svg$Svg$Attributes$fill('freeze'),
+											$elm$svg$Svg$Attributes$repeatCount('indefinite')
+										]),
+									_List_Nil),
+									A2(
+									$elm$svg$Svg$circle,
+									_List_fromArray(
+										[
+											$elm$svg$Svg$Attributes$fill('none'),
+											$elm$svg$Svg$Attributes$stroke(
+											$avh4$elm_color$Color$toCssString(color)),
+											$elm$svg$Svg$Attributes$strokeWidth('5'),
+											$elm$svg$Svg$Attributes$strokeLinecap('square'),
+											$elm$svg$Svg$Attributes$cx('33'),
+											$elm$svg$Svg$Attributes$cy('33'),
+											$elm$svg$Svg$Attributes$r('30'),
+											$elm$svg$Svg$Attributes$strokeDasharray('187'),
+											$elm$svg$Svg$Attributes$strokeDashoffset('610')
+										]),
+									_List_fromArray(
+										[
+											A2(
+											$elm$svg$Svg$animateTransform,
+											_List_fromArray(
+												[
+													$elm$svg$Svg$Attributes$attributeName('transform'),
+													$elm$svg$Svg$Attributes$type_('rotate'),
+													$elm$svg$Svg$Attributes$values('0 33 33;135 33 33;450 33 33'),
+													$elm$svg$Svg$Attributes$begin('0s'),
+													$elm$svg$Svg$Attributes$dur('1.4s'),
+													$elm$svg$Svg$Attributes$fill('freeze'),
+													$elm$svg$Svg$Attributes$repeatCount('indefinite')
+												]),
+											_List_Nil),
+											A2(
+											$elm$svg$Svg$animate,
+											_List_fromArray(
+												[
+													$elm$svg$Svg$Attributes$attributeName('stroke-dashoffset'),
+													$elm$svg$Svg$Attributes$values('187;46.75;187'),
+													$elm$svg$Svg$Attributes$begin('0s'),
+													$elm$svg$Svg$Attributes$dur('1.4s'),
+													$elm$svg$Svg$Attributes$fill('freeze'),
+													$elm$svg$Svg$Attributes$repeatCount('indefinite')
+												]),
+											_List_Nil)
+										]))
+								]))
+						]))));
+	});
+var $author$project$Internal$Material$ProgressIndicator$progressIndicator = function (palette) {
+	return {
+		elementFunction: function (maybeProgress) {
+			if (maybeProgress.$ === 'Nothing') {
+				return A2($author$project$Internal$Material$ProgressIndicator$indeterminateCircularIcon, palette.primary, _List_Nil);
+			} else {
+				var progress = maybeProgress.a;
+				return A3($author$project$Internal$Material$ProgressIndicator$determinateCircularIcon, palette.primary, _List_Nil, progress);
+			}
+		}
+	};
+};
+var $author$project$Widget$Material$progressIndicator = $author$project$Internal$Material$ProgressIndicator$progressIndicator;
+var $author$project$Internal$ProgressIndicator$circularProgressIndicator = F2(
+	function (style, maybeProgress) {
+		return style.elementFunction(maybeProgress);
+	});
+var $author$project$Widget$circularProgressIndicator = $author$project$Internal$ProgressIndicator$circularProgressIndicator;
+var $author$project$Page$ProgressIndicator$viewFunctions = function () {
+	var viewIndicator = F5(
+		function (style, progress, indeterminate, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.circularProgressIndicator',
+				A2(
+					$author$project$Widget$circularProgressIndicator,
+					style(palette),
+					indeterminate(progress / 100)));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewIndicator]));
+}();
+var $author$project$Page$ProgressIndicator$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'Indeterminate Indicator',
+			_Utils_Tuple2(
+				$elm$core$Basics$always($elm$core$Maybe$Nothing),
+				$elm$core$Maybe$Just),
+			false),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A2(
+				$author$project$UIExplorer$Story$rangeStory,
+				'Progress',
+				{_default: 50, max: 100, min: 0, unit: '%'}),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Style',
+					_Utils_Tuple2('ProgressIndicator', $author$project$Widget$Material$progressIndicator),
+					_List_Nil),
+				A2(
+					$author$project$UIExplorer$Story$book,
+					$elm$core$Maybe$Just('Options'),
+					$author$project$Page$ProgressIndicator$viewFunctions)))));
+var $author$project$Page$ProgressIndicator$MaybeProgress = function (a) {
+	return {$: 'MaybeProgress', a: a};
+};
+var $author$project$Page$ProgressIndicator$init = _Utils_Tuple2(
+	$author$project$Page$ProgressIndicator$MaybeProgress($elm$core$Maybe$Nothing),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$ProgressIndicator$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$ProgressIndicator$update = F2(
+	function (msg, _v0) {
+		var maybeFloat = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Page$ProgressIndicator$MaybeProgress(maybeFloat),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Page$ProgressIndicator$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var maybeProgress = _v1.a;
+		return A2(
+			$author$project$Widget$circularProgressIndicator,
+			$author$project$Widget$Material$progressIndicator(palette),
+			maybeProgress);
+	});
+var $author$project$Page$ProgressIndicator$demo = {
+	init: $elm$core$Basics$always($author$project$Page$ProgressIndicator$init),
+	subscriptions: $author$project$Page$ProgressIndicator$subscriptions,
+	update: $author$project$Page$ProgressIndicator$update,
+	view: $author$project$Page$demo($author$project$Page$ProgressIndicator$view)
+};
+var $author$project$Page$ProgressIndicator$description = 'Progress indicators express an unspecified wait time or display the length of a process.';
+var $author$project$Page$ProgressIndicator$title = 'Progress Indicator';
+var $author$project$Page$ProgressIndicator$page = $author$project$Page$create(
+	{book: $author$project$Page$ProgressIndicator$book, demo: $author$project$Page$ProgressIndicator$demo, description: $author$project$Page$ProgressIndicator$description, title: $author$project$Page$ProgressIndicator$title});
+var $author$project$Page$Select$viewFunctions = function () {
+	var viewWrappedRow = F6(
+		function (style, selected, options, onSelect, _v6, _v7) {
+			var palette = _v6.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.wrappedButtonRow',
+				A2(
+					$author$project$Widget$wrappedButtonRow,
+					{
+						content: style(palette),
+						elementRow: $author$project$Widget$Material$row
+					},
+					$author$project$Widget$select(
+						{onSelect: onSelect, options: options, selected: selected})));
+		});
+	var viewTogggleRow = F6(
+		function (style, selected, options, onSelect, _v4, _v5) {
+			var palette = _v4.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.toggleRow',
+				A2(
+					$author$project$Widget$toggleRow,
+					{
+						content: style(palette),
+						elementRow: $author$project$Widget$Material$toggleRow
+					},
+					$author$project$Widget$select(
+						{onSelect: onSelect, options: options, selected: selected})));
+		});
+	var viewSelectRow = F6(
+		function (style, selected, options, onSelect, _v2, _v3) {
+			var palette = _v2.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.buttonRow ',
+				A2(
+					$author$project$Widget$buttonRow,
+					{
+						content: style(palette),
+						elementRow: $author$project$Widget$Material$row
+					},
+					$author$project$Widget$select(
+						{onSelect: onSelect, options: options, selected: selected})));
+		});
+	var viewSelectColumn = F6(
+		function (style, selected, options, onSelect, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.buttonColumn',
+				A2(
+					$author$project$Widget$buttonColumn,
+					{
+						content: style(palette),
+						elementColumn: $author$project$Widget$Material$column
+					},
+					$author$project$Widget$select(
+						{onSelect: onSelect, options: options, selected: selected})));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewTogggleRow, viewSelectRow, viewSelectColumn, viewWrappedRow]));
+}();
+var $author$project$Page$Select$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With event handler',
+			_Utils_Tuple2(
+				$elm$core$Basics$always(
+					$elm$core$Maybe$Just(_Utils_Tuple0)),
+				$elm$core$Basics$always($elm$core$Maybe$Nothing)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$optionListStory,
+				'Options',
+				_Utils_Tuple2(
+					'3 Option',
+					_List_fromArray(
+						[
+							{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							text: 'Submit'
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: ''
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: 'Submit'
+						}
+						])),
+				_List_fromArray(
+					[
+						_Utils_Tuple2(
+						'2 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: 'Submit'
+							},
+								{
+								icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+								text: ''
+							}
+							])),
+						_Utils_Tuple2(
+						'1 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: 'Submit'
+							}
+							]))
+					])),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Selected',
+					_Utils_Tuple2(
+						'Third',
+						$elm$core$Maybe$Just(2)),
+					_List_fromArray(
+						[
+							_Utils_Tuple2(
+							'Second',
+							$elm$core$Maybe$Just(1)),
+							_Utils_Tuple2(
+							'First',
+							$elm$core$Maybe$Just(0)),
+							_Utils_Tuple2('Nothing or Invalid', $elm$core$Maybe$Nothing)
+						])),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('Contained', $author$project$Widget$Material$containedButton),
+						_List_fromArray(
+							[
+								_Utils_Tuple2('Outlined', $author$project$Widget$Material$outlinedButton),
+								_Utils_Tuple2('Text', $author$project$Widget$Material$textButton),
+								_Utils_Tuple2('Chip', $author$project$Widget$Material$chip),
+								_Utils_Tuple2('IconButton', $author$project$Widget$Material$iconButton),
+								_Utils_Tuple2('Toggle', $author$project$Widget$Material$toggleButton)
+							])),
+					A2(
+						$author$project$UIExplorer$Story$book,
+						$elm$core$Maybe$Just('Options'),
+						$author$project$Page$Select$viewFunctions))))));
+var $author$project$Page$Select$Selected = function (a) {
+	return {$: 'Selected', a: a};
+};
+var $author$project$Page$Select$init = _Utils_Tuple2(
+	$author$project$Page$Select$Selected($elm$core$Maybe$Nothing),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$Select$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Select$update = F2(
+	function (msg, _v0) {
+		var _int = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Page$Select$Selected(
+				$elm$core$Maybe$Just(_int)),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Page$Select$ChangedSelected = function (a) {
+	return {$: 'ChangedSelected', a: a};
+};
+var $author$project$Widget$Material$buttonRow = $author$project$Internal$Material$List$toggleRow;
+var $author$project$Page$Select$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var selected = _v1.a;
+		return A2(
+			$author$project$Widget$buttonRow,
+			{
+				content: $author$project$Widget$Material$toggleButton(palette),
+				elementRow: $author$project$Widget$Material$buttonRow
+			},
+			$author$project$Widget$select(
+				{
+					onSelect: A2($elm$core$Basics$composeR, $author$project$Page$Select$ChangedSelected, $elm$core$Maybe$Just),
+					options: A2(
+						$elm$core$List$map,
+						function (_int) {
+							return {
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: $elm$core$String$fromInt(_int)
+							};
+						},
+						_List_fromArray(
+							[1, 2, 42])),
+					selected: selected
+				}));
+	});
+var $author$project$Page$Select$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Select$init),
+	subscriptions: $author$project$Page$Select$subscriptions,
+	update: $author$project$Page$Select$update,
+	view: $author$project$Page$demo($author$project$Page$Select$view)
+};
+var $author$project$Page$Select$description = 'Select buttons group a set of actions using layout and spacing.';
+var $author$project$Page$Select$title = 'Select';
+var $author$project$Page$Select$page = $author$project$Page$create(
+	{book: $author$project$Page$Select$book, demo: $author$project$Page$Select$demo, description: $author$project$Page$Select$description, title: $author$project$Page$Select$title});
+var $author$project$Page$Snackbar$viewFunctions = function () {
+	var viewSnackbar = F5(
+		function (style, text, button, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Snackbar.view',
+				A2(
+					$elm$core$Maybe$withDefault,
+					$mdgriffith$elm_ui$Element$none,
+					A3(
+						$author$project$Widget$Snackbar$view,
+						style(palette),
+						$elm$core$Basics$identity,
+						A2(
+							$author$project$Widget$Snackbar$insert,
+							{button: button, text: text},
+							$author$project$Widget$Snackbar$init))));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewSnackbar]));
+}();
+var $author$project$Page$Snackbar$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$optionListStory,
+			'Button',
+			_Utils_Tuple2(
+				'Button with event handler',
+				$elm$core$Maybe$Just(
+					{
+						onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+						text: 'Close'
+					})),
+			_List_fromArray(
+				[
+					_Utils_Tuple2(
+					'Eventless Button',
+					$elm$core$Maybe$Just(
+						{onPress: $elm$core$Maybe$Nothing, text: 'Close'})),
+					_Utils_Tuple2('None', $elm$core$Maybe$Nothing)
+				])),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A2($author$project$UIExplorer$Story$textStory, 'Text', 'This is a notification that will close after 10 seconds. Additional notifications are being queued.'),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Style',
+					_Utils_Tuple2('Snackbar', $author$project$Widget$Material$snackbar),
+					_List_Nil),
+				A2(
+					$author$project$UIExplorer$Story$book,
+					$elm$core$Maybe$Just('Options'),
+					$author$project$Page$Snackbar$viewFunctions)))));
+var $author$project$Page$Snackbar$init = _Utils_Tuple2($author$project$Widget$Snackbar$init, $elm$core$Platform$Cmd$none);
+var $author$project$Page$Snackbar$TimePassed = function (a) {
+	return {$: 'TimePassed', a: a};
+};
+var $author$project$Page$Snackbar$subscriptions = function (_v0) {
+	return A2(
+		$elm$time$Time$every,
+		50,
+		$elm$core$Basics$always(
+			$author$project$Page$Snackbar$TimePassed(50)));
+};
+var $author$project$Page$Snackbar$update = F2(
+	function (msg, model) {
+		if (msg.$ === 'TimePassed') {
+			var _int = msg.a;
+			return _Utils_Tuple2(
+				A2($author$project$Widget$Snackbar$timePassed, _int, model),
+				$elm$core$Platform$Cmd$none);
+		} else {
+			var snack = msg.a;
+			return _Utils_Tuple2(
+				A2(
+					$author$project$Widget$Snackbar$insert,
+					snack,
+					$author$project$Widget$Snackbar$dismiss(model)),
+				$elm$core$Platform$Cmd$none);
+		}
+	});
+var $author$project$Page$Snackbar$AddSnackbar = function (a) {
+	return {$: 'AddSnackbar', a: a};
+};
+var $author$project$Page$Snackbar$view = F2(
+	function (_v0, model) {
+		var palette = _v0.palette;
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_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)),
+					$mdgriffith$elm_ui$Element$inFront(
+					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(8),
+										$mdgriffith$elm_ui$Element$alignBottom,
+										$mdgriffith$elm_ui$Element$alignRight
+									])),
+							A3(
+								$author$project$Widget$Snackbar$view,
+								$author$project$Widget$Material$snackbar(palette),
+								function (_v1) {
+									var text = _v1.a;
+									var hasButton = _v1.b;
+									return {
+										button: hasButton ? $elm$core$Maybe$Just(
+											{
+												onPress: $elm$core$Maybe$Just(
+													$author$project$Page$Snackbar$AddSnackbar(
+														_Utils_Tuple2('This is another message', false))),
+												text: 'Add'
+											}) : $elm$core$Maybe$Nothing,
+										text: text
+									};
+								},
+								model))))
+				]),
+			A2(
+				$author$project$Widget$column,
+				$author$project$Widget$Material$column,
+				_List_fromArray(
+					[
+						A2(
+						$author$project$Widget$button,
+						$author$project$Widget$Material$containedButton(palette),
+						{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							onPress: $elm$core$Maybe$Just(
+								$author$project$Page$Snackbar$AddSnackbar(
+									_Utils_Tuple2('This is a notification. It will disappear after 10 seconds.', false))),
+							text: 'Add Notification'
+						}),
+						A2(
+						$author$project$Widget$button,
+						$author$project$Widget$Material$containedButton(palette),
+						{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							onPress: $elm$core$Maybe$Just(
+								$author$project$Page$Snackbar$AddSnackbar(
+									_Utils_Tuple2('You can add another notification if you want.', true))),
+							text: 'Add Notification with Action'
+						})
+					])));
+	});
+var $author$project$Page$Snackbar$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Snackbar$init),
+	subscriptions: $author$project$Page$Snackbar$subscriptions,
+	update: $author$project$Page$Snackbar$update,
+	view: $author$project$Page$demo($author$project$Page$Snackbar$view)
+};
+var $author$project$Page$Snackbar$description = 'Buttons allow users to take actions, and make choices, with a single tap.';
+var $author$project$Page$Snackbar$title = 'Button';
+var $author$project$Page$Snackbar$page = $author$project$Page$create(
+	{book: $author$project$Page$Snackbar$book, demo: $author$project$Page$Snackbar$demo, description: $author$project$Page$Snackbar$description, title: $author$project$Page$Snackbar$title});
+var $author$project$Internal$SortTable$Column = function (a) {
+	return {$: 'Column', a: a};
+};
+var $author$project$Internal$SortTable$FloatColumn = function (a) {
+	return {$: 'FloatColumn', a: a};
+};
+var $author$project$Internal$SortTable$floatColumn = function (_v0) {
+	var title = _v0.title;
+	var value = _v0.value;
+	var toString = _v0.toString;
+	var width = _v0.width;
+	return $author$project$Internal$SortTable$Column(
+		{
+			content: $author$project$Internal$SortTable$FloatColumn(
+				{toString: toString, value: value}),
+			title: title,
+			width: width
+		});
+};
+var $author$project$Widget$floatColumn = $author$project$Internal$SortTable$floatColumn;
+var $author$project$Internal$SortTable$IntColumn = function (a) {
+	return {$: 'IntColumn', a: a};
+};
+var $author$project$Internal$SortTable$intColumn = function (_v0) {
+	var title = _v0.title;
+	var value = _v0.value;
+	var toString = _v0.toString;
+	var width = _v0.width;
+	return $author$project$Internal$SortTable$Column(
+		{
+			content: $author$project$Internal$SortTable$IntColumn(
+				{toString: toString, value: value}),
+			title: title,
+			width: width
+		});
+};
+var $author$project$Widget$intColumn = $author$project$Internal$SortTable$intColumn;
+var $author$project$Internal$Material$SortTable$sortTable = function (palette) {
+	return {
+		content: {
+			ascIcon: $author$project$Internal$Material$Icon$expand_less,
+			defaultIcon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+			descIcon: $author$project$Internal$Material$Icon$expand_more,
+			header: $author$project$Internal$Material$Button$textButton(palette)
+		},
+		elementTable: _List_Nil
+	};
+};
+var $author$project$Widget$Material$sortTable = $author$project$Internal$Material$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 $elm$core$Maybe$andThen = F2(
+	function (callback, maybeValue) {
+		if (maybeValue.$ === 'Just') {
+			var value = maybeValue.a;
+			return callback(value);
+		} else {
+			return $elm$core$Maybe$Nothing;
+		}
+	});
+var $mdgriffith$elm_ui$Element$InternalColumn = function (a) {
+	return {$: 'InternalColumn', a: a};
+};
+var $mdgriffith$elm_ui$Internal$Model$GridPosition = function (a) {
+	return {$: 'GridPosition', a: a};
+};
+var $mdgriffith$elm_ui$Internal$Model$GridTemplateStyle = function (a) {
+	return {$: 'GridTemplateStyle', a: a};
+};
+var $elm$core$List$all = F2(
+	function (isOkay, list) {
+		return !A2(
+			$elm$core$List$any,
+			A2($elm$core$Basics$composeL, $elm$core$Basics$not, isOkay),
+			list);
+	});
+var $mdgriffith$elm_ui$Internal$Model$AsGrid = {$: 'AsGrid'};
+var $mdgriffith$elm_ui$Internal$Model$asGrid = $mdgriffith$elm_ui$Internal$Model$AsGrid;
+var $mdgriffith$elm_ui$Internal$Flag$gridPosition = $mdgriffith$elm_ui$Internal$Flag$flag(35);
+var $mdgriffith$elm_ui$Internal$Flag$gridTemplate = $mdgriffith$elm_ui$Internal$Flag$flag(34);
+var $mdgriffith$elm_ui$Element$tableHelper = F2(
+	function (attrs, config) {
+		var onGrid = F3(
+			function (rowLevel, columnLevel, elem) {
+				return A4(
+					$mdgriffith$elm_ui$Internal$Model$element,
+					$mdgriffith$elm_ui$Internal$Model$asEl,
+					$mdgriffith$elm_ui$Internal$Model$div,
+					_List_fromArray(
+						[
+							A2(
+							$mdgriffith$elm_ui$Internal$Model$StyleClass,
+							$mdgriffith$elm_ui$Internal$Flag$gridPosition,
+							$mdgriffith$elm_ui$Internal$Model$GridPosition(
+								{col: columnLevel, height: 1, row: rowLevel, width: 1}))
+						]),
+					$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+						_List_fromArray(
+							[elem])));
+			});
+		var columnWidth = function (col) {
+			if (col.$ === 'InternalIndexedColumn') {
+				var colConfig = col.a;
+				return colConfig.width;
+			} else {
+				var colConfig = col.a;
+				return colConfig.width;
+			}
+		};
+		var columnHeader = function (col) {
+			if (col.$ === 'InternalIndexedColumn') {
+				var colConfig = col.a;
+				return colConfig.header;
+			} else {
+				var colConfig = col.a;
+				return colConfig.header;
+			}
+		};
+		var maybeHeaders = function (headers) {
+			return A2(
+				$elm$core$List$all,
+				$elm$core$Basics$eq($mdgriffith$elm_ui$Internal$Model$Empty),
+				headers) ? $elm$core$Maybe$Nothing : $elm$core$Maybe$Just(
+				A2(
+					$elm$core$List$indexedMap,
+					F2(
+						function (col, header) {
+							return A3(onGrid, 1, col + 1, header);
+						}),
+					headers));
+		}(
+			A2($elm$core$List$map, columnHeader, config.columns));
+		var add = F3(
+			function (cell, columnConfig, cursor) {
+				if (columnConfig.$ === 'InternalIndexedColumn') {
+					var col = columnConfig.a;
+					return _Utils_update(
+						cursor,
+						{
+							column: cursor.column + 1,
+							elements: A2(
+								$elm$core$List$cons,
+								A3(
+									onGrid,
+									cursor.row,
+									cursor.column,
+									A2(
+										col.view,
+										_Utils_eq(maybeHeaders, $elm$core$Maybe$Nothing) ? (cursor.row - 1) : (cursor.row - 2),
+										cell)),
+								cursor.elements)
+						});
+				} else {
+					var col = columnConfig.a;
+					return {
+						column: cursor.column + 1,
+						elements: A2(
+							$elm$core$List$cons,
+							A3(
+								onGrid,
+								cursor.row,
+								cursor.column,
+								col.view(cell)),
+							cursor.elements),
+						row: cursor.row
+					};
+				}
+			});
+		var build = F3(
+			function (columns, rowData, cursor) {
+				var newCursor = A3(
+					$elm$core$List$foldl,
+					add(rowData),
+					cursor,
+					columns);
+				return {column: 1, elements: newCursor.elements, row: cursor.row + 1};
+			});
+		var children = A3(
+			$elm$core$List$foldl,
+			build(config.columns),
+			{
+				column: 1,
+				elements: _List_Nil,
+				row: _Utils_eq(maybeHeaders, $elm$core$Maybe$Nothing) ? 1 : 2
+			},
+			config.data);
+		var _v0 = A2(
+			$mdgriffith$elm_ui$Internal$Model$getSpacing,
+			attrs,
+			_Utils_Tuple2(0, 0));
+		var sX = _v0.a;
+		var sY = _v0.b;
+		var template = A2(
+			$mdgriffith$elm_ui$Internal$Model$StyleClass,
+			$mdgriffith$elm_ui$Internal$Flag$gridTemplate,
+			$mdgriffith$elm_ui$Internal$Model$GridTemplateStyle(
+				{
+					columns: A2($elm$core$List$map, columnWidth, config.columns),
+					rows: A2(
+						$elm$core$List$repeat,
+						$elm$core$List$length(config.data),
+						$mdgriffith$elm_ui$Internal$Model$Content),
+					spacing: _Utils_Tuple2(
+						$mdgriffith$elm_ui$Element$px(sX),
+						$mdgriffith$elm_ui$Element$px(sY))
+				}));
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asGrid,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				A2($elm$core$List$cons, template, attrs)),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(
+				function () {
+					if (maybeHeaders.$ === 'Nothing') {
+						return children.elements;
+					} else {
+						var renderedHeaders = maybeHeaders.a;
+						return _Utils_ap(
+							renderedHeaders,
+							$elm$core$List$reverse(children.elements));
+					}
+				}()));
+	});
+var $mdgriffith$elm_ui$Element$table = F2(
+	function (attrs, config) {
+		return A2(
+			$mdgriffith$elm_ui$Element$tableHelper,
+			attrs,
+			{
+				columns: A2($elm$core$List$map, $mdgriffith$elm_ui$Element$InternalColumn, config.columns),
+				data: config.data
+			});
+	});
+var $author$project$Internal$SortTable$sortTable = F2(
+	function (style, model) {
+		var findTitle = function (list) {
+			findTitle:
+			while (true) {
+				if (!list.b) {
+					return $elm$core$Maybe$Nothing;
+				} else {
+					var head = list.a.a;
+					var tail = list.b;
+					if (_Utils_eq(head.title, model.sortBy)) {
+						return $elm$core$Maybe$Just(head.content);
+					} else {
+						var $temp$list = tail;
+						list = $temp$list;
+						continue findTitle;
+					}
+				}
+			}
+		};
+		return A2(
+			$mdgriffith$elm_ui$Element$table,
+			style.elementTable,
+			{
+				columns: A2(
+					$elm$core$List$map,
+					function (_v1) {
+						var column = _v1.a;
+						return {
+							header: A2(
+								$author$project$Internal$Button$button,
+								style.content.header,
+								{
+									icon: _Utils_eq(column.title, model.sortBy) ? (model.asc ? style.content.ascIcon : style.content.descIcon) : style.content.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 = function () {
+	var fun = $author$project$Internal$SortTable$sortTable;
+	return fun;
+}();
+var $author$project$Page$SortTable$viewFunctions = function () {
+	var viewTable = F7(
+		function (style, content, columns, asc, sortBy, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.sortTable',
+				A2(
+					$author$project$Widget$sortTable,
+					style(palette),
+					{
+						asc: asc,
+						columns: columns,
+						content: content,
+						onChange: $elm$core$Basics$always(_Utils_Tuple0),
+						sortBy: sortBy
+					}));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewTable]));
+}();
+var $author$project$Page$SortTable$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$optionListStory,
+			'Sort by',
+			_Utils_Tuple2('Id', 'Id'),
+			_List_fromArray(
+				[
+					_Utils_Tuple2('Name', 'Name'),
+					_Utils_Tuple2('Rating', 'Rating'),
+					_Utils_Tuple2('Hash', 'Hash'),
+					_Utils_Tuple2('None', '')
+				])),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'Sort ascendingly',
+				_Utils_Tuple2(true, false),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Columns',
+					_Utils_Tuple2(
+						'4 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
+								})
+							])),
+					_List_fromArray(
+						[
+							_Utils_Tuple2(
+							'1 Column',
+							_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
+									})
+								])),
+							_Utils_Tuple2('None', _List_Nil)
+						])),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Content',
+						_Utils_Tuple2(
+							'Data',
+							_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
+								}
+								])),
+						_List_fromArray(
+							[
+								_Utils_Tuple2('None', _List_Nil)
+							])),
+					A2(
+						$author$project$UIExplorer$Story$addStory,
+						A3(
+							$author$project$UIExplorer$Story$optionListStory,
+							'Style',
+							_Utils_Tuple2('SortTable', $author$project$Widget$Material$sortTable),
+							_List_Nil),
+						A2(
+							$author$project$UIExplorer$Story$book,
+							$elm$core$Maybe$Just('Options'),
+							$author$project$Page$SortTable$viewFunctions)))))));
+var $author$project$Page$SortTable$init = _Utils_Tuple2(
+	{asc: true, title: 'Name'},
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$SortTable$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$SortTable$update = F2(
+	function (msg, model) {
+		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$Page$SortTable$ChangedSorting = function (a) {
+	return {$: 'ChangedSorting', a: a};
+};
+var $author$project$Page$SortTable$view = F2(
+	function (_v0, model) {
+		var palette = _v0.palette;
+		return A2(
+			$author$project$Widget$sortTable,
+			$author$project$Widget$Material$sortTable(palette),
+			{
+				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: $author$project$Page$SortTable$ChangedSorting,
+				sortBy: model.title
+			});
+	});
+var $author$project$Page$SortTable$demo = {
+	init: $elm$core$Basics$always($author$project$Page$SortTable$init),
+	subscriptions: $author$project$Page$SortTable$subscriptions,
+	update: $author$project$Page$SortTable$update,
+	view: $author$project$Page$demo($author$project$Page$SortTable$view)
+};
+var $author$project$Page$SortTable$description = 'A simple sort table.';
+var $author$project$Page$SortTable$title = 'Sort Table';
+var $author$project$Page$SortTable$page = $author$project$Page$create(
+	{book: $author$project$Page$SortTable$book, demo: $author$project$Page$SortTable$demo, description: $author$project$Page$SortTable$description, title: $author$project$Page$SortTable$title});
+var $author$project$Page$Switch$viewFunctions = function () {
+	var viewSwitch = F6(
+		function (style, desc, active, onPress, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.switch',
+				A2(
+					$author$project$Widget$switch,
+					style(palette),
+					{active: active, description: desc, onPress: onPress}));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewSwitch]));
+}();
+var $author$project$Page$Switch$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'with event handler',
+			_Utils_Tuple2(
+				$elm$core$Maybe$Just(_Utils_Tuple0),
+				$elm$core$Maybe$Nothing),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'Active',
+				_Utils_Tuple2(true, false),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A2($author$project$UIExplorer$Story$textStory, 'Description', 'Be Awesome'),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('Switch', $author$project$Widget$Material$switch),
+						_List_Nil),
+					A2(
+						$author$project$UIExplorer$Story$book,
+						$elm$core$Maybe$Just('Options'),
+						$author$project$Page$Switch$viewFunctions))))));
+var $author$project$Page$Switch$IsButtonEnabled = function (a) {
+	return {$: 'IsButtonEnabled', a: a};
+};
+var $author$project$Page$Switch$init = _Utils_Tuple2(
+	$author$project$Page$Switch$IsButtonEnabled(false),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$Switch$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Switch$update = F2(
+	function (msg, _v0) {
+		var buttonEnabled = _v0.a;
+		return _Utils_Tuple2(
+			$author$project$Page$Switch$IsButtonEnabled(!buttonEnabled),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Page$Switch$ToggledButtonStatus = {$: 'ToggledButtonStatus'};
+var $author$project$Page$Switch$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var isButtonEnabled = _v1.a;
+		return A2(
+			$author$project$Widget$switch,
+			$author$project$Widget$Material$switch(palette),
+			{
+				active: isButtonEnabled,
+				description: 'click me',
+				onPress: $elm$core$Maybe$Just($author$project$Page$Switch$ToggledButtonStatus)
+			});
+	});
+var $author$project$Page$Switch$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Switch$init),
+	subscriptions: $author$project$Page$Switch$subscriptions,
+	update: $author$project$Page$Switch$update,
+	view: $author$project$Page$demo($author$project$Page$Switch$view)
+};
+var $author$project$Page$Switch$description = 'Switches toggle the state of a single item on or off.';
+var $author$project$Page$Switch$title = 'Switch';
+var $author$project$Page$Switch$page = $author$project$Page$create(
+	{book: $author$project$Page$Switch$book, demo: $author$project$Page$Switch$demo, description: $author$project$Page$Switch$description, title: $author$project$Page$Switch$title});
+var $author$project$Internal$Material$Tab$tabButton = function (palette) {
+	return {
+		content: {
+			content: {
+				icon: {
+					ifActive: {color: palette.primary, size: 18},
+					ifDisabled: {
+						color: $author$project$Internal$Material$Palette$gray(palette),
+						size: 18
+					},
+					otherwise: {color: palette.primary, size: 18}
+				},
+				text: {contentText: _List_Nil}
+			},
+			elementRow: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$spacing(8),
+					$mdgriffith$elm_ui$Element$centerY,
+					$mdgriffith$elm_ui$Element$centerX
+				])
+		},
+		elementButton: _Utils_ap(
+			$author$project$Widget$Material$Typography$button,
+			_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$Material$Color$fromColor(palette.primary)),
+					$mdgriffith$elm_ui$Element$mouseDown(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$focused(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)))
+						])),
+					$mdgriffith$elm_ui$Element$mouseOver(
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$Background$color(
+							$author$project$Widget$Material$Color$fromColor(
+								A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$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$Internal$Material$Button$baseButton(palette).ifDisabled,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$Font$color(
+					$author$project$Widget$Material$Color$fromColor(
+						$author$project$Internal$Material$Palette$gray(palette))),
+					$mdgriffith$elm_ui$Element$mouseDown(_List_Nil),
+					$mdgriffith$elm_ui$Element$mouseOver(_List_Nil),
+					$mdgriffith$elm_ui$Element$focused(_List_Nil)
+				])),
+		otherwise: _List_Nil
+	};
+};
+var $author$project$Internal$Material$Tab$tab = function (palette) {
+	return {
+		content: {
+			content: _List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+				]),
+			tabs: {
+				content: $author$project$Internal$Material$Tab$tabButton(palette),
+				elementRow: _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spaceEvenly,
+						$mdgriffith$elm_ui$Element$Border$shadow(
+						$author$project$Widget$Material$Color$shadow(4)),
+						$mdgriffith$elm_ui$Element$spacing(8),
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+					])
+			}
+		},
+		elementColumn: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$spacing(8),
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+			])
+	};
+};
+var $author$project$Widget$Material$tab = $author$project$Internal$Material$Tab$tab;
+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.elementColumn,
+			_List_fromArray(
+				[
+					A2(
+					$mdgriffith$elm_ui$Element$row,
+					style.content.tabs.elementRow,
+					A2(
+						$elm$core$List$map,
+						$author$project$Internal$Select$selectButton(style.content.tabs.content),
+						$author$project$Internal$Select$select(tabs))),
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					style.content.content,
+					content(tabs.selected))
+				]));
+	});
+var $author$project$Widget$tab = function () {
+	var fun = $author$project$Internal$Tab$tab;
+	return fun;
+}();
+var $author$project$Page$Tab$viewFunctions = function () {
+	var viewTab = F6(
+		function (style, selected, options, onSelect, _v1, _v2) {
+			var palette = _v1.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.tab',
+				A2(
+					$author$project$Widget$tab,
+					style(palette),
+					{
+						content: function (s) {
+							return $mdgriffith$elm_ui$Element$text(
+								function () {
+									_v0$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 _v0$3;
+											}
+										} else {
+											break _v0$3;
+										}
+									}
+									return 'Please select a tab';
+								}());
+						},
+						tabs: {onSelect: onSelect, options: options, selected: selected}
+					}));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewTab]));
+}();
+var $author$project$Page$Tab$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'With event handler',
+			_Utils_Tuple2(
+				$elm$core$Basics$always(
+					$elm$core$Maybe$Just(_Utils_Tuple0)),
+				$elm$core$Basics$always($elm$core$Maybe$Nothing)),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$optionListStory,
+				'Options',
+				_Utils_Tuple2(
+					'3 Option',
+					_List_fromArray(
+						[
+							{
+							icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+							text: '42'
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: ''
+						},
+							{
+							icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+							text: '42'
+						}
+						])),
+				_List_fromArray(
+					[
+						_Utils_Tuple2(
+						'2 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: '42'
+							},
+								{
+								icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+								text: ''
+							}
+							])),
+						_Utils_Tuple2(
+						'1 Option',
+						_List_fromArray(
+							[
+								{
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: '42'
+							}
+							]))
+					])),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A3(
+					$author$project$UIExplorer$Story$optionListStory,
+					'Selected',
+					_Utils_Tuple2(
+						'Third',
+						$elm$core$Maybe$Just(2)),
+					_List_fromArray(
+						[
+							_Utils_Tuple2(
+							'Second',
+							$elm$core$Maybe$Just(1)),
+							_Utils_Tuple2(
+							'First',
+							$elm$core$Maybe$Just(0)),
+							_Utils_Tuple2('Nothing or Invalid', $elm$core$Maybe$Nothing)
+						])),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('Tab', $author$project$Widget$Material$tab),
+						_List_Nil),
+					A2(
+						$author$project$UIExplorer$Story$book,
+						$elm$core$Maybe$Just('Options'),
+						$author$project$Page$Tab$viewFunctions))))));
+var $author$project$Page$Tab$Selected = function (a) {
+	return {$: 'Selected', a: a};
+};
+var $author$project$Page$Tab$init = _Utils_Tuple2(
+	$author$project$Page$Tab$Selected($elm$core$Maybe$Nothing),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$Tab$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Tab$update = F2(
+	function (msg, _v0) {
+		var _int = msg.a;
+		return _Utils_Tuple2(
+			$author$project$Page$Tab$Selected(
+				$elm$core$Maybe$Just(_int)),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Page$Tab$ChangedTab = function (a) {
+	return {$: 'ChangedTab', a: a};
+};
+var $author$project$Page$Tab$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var selected = _v1.a;
+		return A2(
+			$author$project$Widget$tab,
+			$author$project$Widget$Material$tab(palette),
+			{
+				content: function (s) {
+					return $mdgriffith$elm_ui$Element$text(
+						function () {
+							_v2$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 _v2$3;
+									}
+								} else {
+									break _v2$3;
+								}
+							}
+							return 'Please select a tab';
+						}());
+				},
+				tabs: {
+					onSelect: A2($elm$core$Basics$composeR, $author$project$Page$Tab$ChangedTab, $elm$core$Maybe$Just),
+					options: A2(
+						$elm$core$List$map,
+						function (_int) {
+							return {
+								icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+								text: 'Tab ' + $elm$core$String$fromInt(_int)
+							};
+						},
+						_List_fromArray(
+							[1, 2, 3])),
+					selected: selected
+				}
+			});
+	});
+var $author$project$Page$Tab$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Tab$init),
+	subscriptions: $author$project$Page$Tab$subscriptions,
+	update: $author$project$Page$Tab$update,
+	view: $author$project$Page$demo($author$project$Page$Tab$view)
+};
+var $author$project$Page$Tab$description = 'Tabs organize content across different screens, data sets, and other interactions.';
+var $author$project$Page$Tab$title = 'Tab';
+var $author$project$Page$Tab$page = $author$project$Page$create(
+	{book: $author$project$Page$Tab$book, demo: $author$project$Page$Tab$demo, description: $author$project$Page$Tab$description, title: $author$project$Page$Tab$title});
+var $author$project$Page$TextInput$viewFunctions = function () {
+	var viewInput = F6(
+		function (chips, text, placeholder, label, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.currentPasswordInput',
+				A2(
+					$author$project$Widget$textInput,
+					$author$project$Widget$Material$textInput(palette),
+					{
+						chips: chips,
+						label: label,
+						onChange: $elm$core$Basics$always(_Utils_Tuple0),
+						placeholder: placeholder,
+						text: text
+					}));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewInput]));
+}();
+var $author$project$Page$TextInput$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A2($author$project$UIExplorer$Story$textStory, 'Label', 'Name'),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'Placeholder',
+				_Utils_Tuple2(
+					$elm$core$Maybe$Just(
+						A2(
+							$mdgriffith$elm_ui$Element$Input$placeholder,
+							_List_Nil,
+							$mdgriffith$elm_ui$Element$text('password'))),
+					$elm$core$Maybe$Nothing),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A2($author$project$UIExplorer$Story$textStory, 'Text', '123456789'),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Chips',
+						_Utils_Tuple2(
+							'3 Chips',
+							_List_fromArray(
+								[
+									{
+									icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+									onPress: $elm$core$Maybe$Nothing,
+									text: 'Apples'
+								},
+									{
+									icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+									onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+									text: ''
+								},
+									{
+									icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+									onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+									text: 'Oranges'
+								}
+								])),
+						_List_fromArray(
+							[
+								_Utils_Tuple2(
+								'2 Chips',
+								_List_fromArray(
+									[
+										{
+										icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+										onPress: $elm$core$Maybe$Nothing,
+										text: 'Apples'
+									},
+										{
+										icon: A2($author$project$Widget$Icon$elmMaterialIcons, $icidasset$elm_material_icons$Material$Icons$Types$Color, $icidasset$elm_material_icons$Material$Icons$done),
+										onPress: $elm$core$Maybe$Just(_Utils_Tuple0),
+										text: ''
+									}
+									])),
+								_Utils_Tuple2(
+								'1 Chips',
+								_List_fromArray(
+									[
+										{
+										icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+										onPress: $elm$core$Maybe$Nothing,
+										text: 'Apples'
+									}
+									])),
+								_Utils_Tuple2('None', _List_Nil)
+							])),
+					A2(
+						$author$project$UIExplorer$Story$book,
+						$elm$core$Maybe$Just('Options'),
+						$author$project$Page$TextInput$viewFunctions))))));
+var $author$project$Page$TextInput$init = _Utils_Tuple2(
+	{chipTextInput: $elm$core$Set$empty, textInput: ''},
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$TextInput$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$TextInput$update = F2(
+	function (msg, model) {
+		if (msg.$ === 'ToggleTextInputChip') {
+			var string = msg.a;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{
+						chipTextInput: (A2($elm$core$Set$member, string, model.chipTextInput) ? $elm$core$Set$remove(string) : $elm$core$Set$insert(string))(model.chipTextInput)
+					}),
+				$elm$core$Platform$Cmd$none);
+		} else {
+			var string = msg.a;
+			return _Utils_Tuple2(
+				_Utils_update(
+					model,
+					{textInput: string}),
+				$elm$core$Platform$Cmd$none);
+		}
+	});
+var $author$project$Page$TextInput$SetTextInput = function (a) {
+	return {$: 'SetTextInput', a: a};
+};
+var $author$project$Page$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 $author$project$Page$TextInput$view = F2(
+	function (_v0, model) {
+		var palette = _v0.palette;
+		return A2(
+			$author$project$Widget$column,
+			$author$project$Widget$Material$column,
+			_List_fromArray(
+				[
+					A2(
+					$author$project$Widget$textInput,
+					$author$project$Widget$Material$textInput(palette),
+					{
+						chips: A2(
+							$elm$core$List$map,
+							function (string) {
+								return {
+									icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+									onPress: $elm$core$Maybe$Just(
+										$author$project$Page$TextInput$ToggleTextInputChip(string)),
+									text: string
+								};
+							},
+							$elm$core$Set$toList(model.chipTextInput)),
+						label: 'Chips',
+						onChange: $author$project$Page$TextInput$SetTextInput,
+						placeholder: $elm$core$Maybe$Nothing,
+						text: model.textInput
+					}),
+					A2(
+					$mdgriffith$elm_ui$Element$wrappedRow,
+					_List_fromArray(
+						[
+							$mdgriffith$elm_ui$Element$spacing(10)
+						]),
+					A2(
+						$elm$core$List$map,
+						function (string) {
+							return A2(
+								$author$project$Widget$button,
+								$author$project$Widget$Material$textInput(palette).content.chips.content,
+								{
+									icon: $elm$core$Basics$always($mdgriffith$elm_ui$Element$none),
+									onPress: $elm$core$Maybe$Just(
+										$author$project$Page$TextInput$ToggleTextInputChip(string)),
+									text: string
+								});
+						},
+						$elm$core$Set$toList(
+							A2(
+								$elm$core$Set$diff,
+								$elm$core$Set$fromList(
+									_List_fromArray(
+										['A', 'B', 'C'])),
+								model.chipTextInput))))
+				]));
+	});
+var $author$project$Page$TextInput$demo = {
+	init: $elm$core$Basics$always($author$project$Page$TextInput$init),
+	subscriptions: $author$project$Page$TextInput$subscriptions,
+	update: $author$project$Page$TextInput$update,
+	view: $author$project$Page$demo($author$project$Page$TextInput$view)
+};
+var $author$project$Page$TextInput$description = 'Text fields let users enter and edit text.';
+var $author$project$Page$TextInput$title = 'Text Input';
+var $author$project$Page$TextInput$page = $author$project$Page$create(
+	{book: $author$project$Page$TextInput$book, demo: $author$project$Page$TextInput$demo, description: $author$project$Page$TextInput$description, title: $author$project$Page$TextInput$title});
 var $author$project$Main$pages = A3(
 	$author$project$UIExplorer$nextPage,
-	'Password Input',
-	$author$project$Page$PasswordInput$page,
-	A2($author$project$UIExplorer$firstPage, 'Button', $author$project$Page$Button$page));
+	'Dialog',
+	$author$project$Page$Dialog$page,
+	A3(
+		$author$project$UIExplorer$nextPage,
+		'Icon',
+		$author$project$Page$Icon$page,
+		A3(
+			$author$project$UIExplorer$nextPage,
+			'App Bar',
+			$author$project$Page$AppBar$page,
+			A3(
+				$author$project$UIExplorer$nextPage,
+				'Modal',
+				$author$project$Page$Modal$page,
+				A3(
+					$author$project$UIExplorer$nextPage,
+					'ProgressIndicator',
+					$author$project$Page$ProgressIndicator$page,
+					A3(
+						$author$project$UIExplorer$nextPage,
+						'Item',
+						$author$project$Page$Item$page,
+						A3(
+							$author$project$UIExplorer$nextPage,
+							'Snackbar',
+							$author$project$Page$Snackbar$page,
+							A3(
+								$author$project$UIExplorer$nextPage,
+								'Sort Table',
+								$author$project$Page$SortTable$page,
+								A3(
+									$author$project$UIExplorer$nextPage,
+									'Text Input',
+									$author$project$Page$TextInput$page,
+									A3(
+										$author$project$UIExplorer$nextPage,
+										'Password Input',
+										$author$project$Page$PasswordInput$page,
+										A3(
+											$author$project$UIExplorer$nextPage,
+											'Tab',
+											$author$project$Page$Tab$page,
+											A3(
+												$author$project$UIExplorer$nextPage,
+												'Switch',
+												$author$project$Page$Switch$page,
+												A3(
+													$author$project$UIExplorer$nextPage,
+													'Multi Select',
+													$author$project$Page$MultiSelect$page,
+													A3(
+														$author$project$UIExplorer$nextPage,
+														'Select',
+														$author$project$Page$Select$page,
+														A2($author$project$UIExplorer$firstPage, 'Button', $author$project$Page$Button$page)))))))))))))));
 var $elm$json$Json$Decode$value = _Json_decodeValue;
 var $author$project$Main$main = function () {
 	var config = $author$project$UIExplorer$defaultConfig;
diff --git a/explorer/src/Main.elm b/explorer/src/Main.elm
index 36780f1..5ecee40 100644
--- a/explorer/src/Main.elm
+++ b/explorer/src/Main.elm
@@ -1,9 +1,11 @@
 module Main exposing (main)
 
 import Element
+import Page.AppBar
 import Page.Button
+import Page.Dialog
+import Page.Icon
 import Page.Item
-import Page.Layout
 import Page.Modal
 import Page.MultiSelect
 import Page.PasswordInput
@@ -14,7 +16,6 @@ import Page.SortTable
 import Page.Switch
 import Page.Tab
 import Page.TextInput
-import Page.Icon
 import UIExplorer
 
 
@@ -31,8 +32,9 @@ pages =
         |> UIExplorer.nextPage "Item" Page.Item.page
         |> UIExplorer.nextPage "ProgressIndicator" Page.ProgressIndicator.page
         |> UIExplorer.nextPage "Modal" Page.Modal.page
-        |> UIExplorer.nextPage "Layout" Page.Layout.page
+        |> UIExplorer.nextPage "App Bar" Page.AppBar.page
         |> UIExplorer.nextPage "Icon" Page.Icon.page
+        |> UIExplorer.nextPage "Dialog" Page.Dialog.page
 
 
 main =
diff --git a/explorer/src/Page.elm b/explorer/src/Page.elm
index 65cf080..ae69f41 100644
--- a/explorer/src/Page.elm
+++ b/explorer/src/Page.elm
@@ -19,7 +19,7 @@ create :
     , book : Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
     , demo : Tile model msg ()
     }
-    -> Page ( ( ( (), () ), ( StorySelectorModel, () ) ), model ) (TileMsg (TileMsg (TileMsg () msg1) (TileMsg StorySelectorMsg ())) msg) ()
+    -> Page ( ( ( (), () ), model ), ( StorySelectorModel, () ) ) (TileMsg (TileMsg (TileMsg () msg1) msg) (TileMsg StorySelectorMsg ())) ()
 create config =
     Tile.static []
         (\_ _ ->
@@ -29,8 +29,8 @@ create config =
                 |> Element.column [ Element.spacing 32 ]
         )
         |> Tile.first
-        |> Tile.nextGroup config.book
         |> Tile.next config.demo
+        |> Tile.nextGroup config.book
         |> Tile.page
 
 
diff --git a/explorer/src/Page/Layout.elm b/explorer/src/Page/AppBar.elm
similarity index 96%
rename from explorer/src/Page/Layout.elm
rename to explorer/src/Page/AppBar.elm
index 8a87c0c..b872b24 100644
--- a/explorer/src/Page/Layout.elm
+++ b/explorer/src/Page/AppBar.elm
@@ -1,12 +1,10 @@
-module Page.Layout exposing (page)
+module Page.AppBar exposing (page)
 
 {-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
 -}
 
-import Browser
 import Browser.Events as Events
-import Element exposing (Attribute, DeviceClass(..), Element)
-import Element.Background as Background
+import Element exposing (DeviceClass(..), Element)
 import Element.Border as Border
 import Element.Font as Font
 import Material.Icons as MaterialIcons
@@ -15,39 +13,27 @@ import Page
 import Time
 import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
 import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
-import Widget
-    exposing
-        ( AppBarStyle
-        , ButtonStyle
-        , ColumnStyle
-        , DialogStyle
-        , InsetItemStyle
-        , ItemStyle
-        , Modal
-        , TextInput
-        , TextInputStyle
-        )
-import Widget.Customize as Customize
-import Widget.Icon as Icon exposing (Icon)
+import Widget exposing (Modal, TextInput)
+import Widget.Icon as Icon
 import Widget.Layout as Layout
 import Widget.Material as Material
 import Widget.Material.Color as MaterialColor
 import Widget.Material.Typography as Typography
-import Widget.Snackbar as Snackbar exposing (Snackbar, SnackbarStyle)
+import Widget.Snackbar as Snackbar exposing (Snackbar)
 
 
 {-| The title of this page
 -}
 title : String
 title =
-    "Button"
+    "App Bar"
 
 
 {-| The description. I've taken this description directly from the [Material-UI-Specification](https://material.io/components/buttons)
 -}
 description : String
 description =
-    "Buttons allow users to take actions, and make choices, with a single tap."
+    "The top app bar displays information and actions relating to the current screen."
 
 
 {-| List of view functions. Essentially, anything that takes a Button as input.
diff --git a/explorer/src/Page/Button.elm b/explorer/src/Page/Button.elm
index 70d7a66..240afc9 100644
--- a/explorer/src/Page/Button.elm
+++ b/explorer/src/Page/Button.elm
@@ -92,7 +92,7 @@ book =
                 [ ( "Outlined", Material.outlinedButton )
                 , ( "Text", Material.textButton )
                 , ( "Chip", Material.chip )
-                , ( "IconButton", Material.iconButton)
+                , ( "IconButton", Material.iconButton )
                 ]
             )
         --Changing the text of the label
diff --git a/explorer/src/Page/Dialog.elm b/explorer/src/Page/Dialog.elm
new file mode 100644
index 0000000..3a3040b
--- /dev/null
+++ b/explorer/src/Page/Dialog.elm
@@ -0,0 +1,208 @@
+module Page.Dialog exposing (page)
+
+{-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
+-}
+
+import Element exposing (Element)
+import Material.Icons as MaterialIcons
+import Material.Icons.Types exposing (Coloring(..))
+import Page
+import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
+import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
+import Widget
+import Widget.Icon as Icon
+import Widget.Material as Material
+
+
+{-| The title of this page
+-}
+title : String
+title =
+    "Dialog"
+
+
+{-| The description. I've taken this description directly from the [Material-UI-Specification](https://material.io/components/buttons)
+-}
+description : String
+description =
+    "Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks."
+
+
+{-| List of view functions. Essentially, anything that takes a Button as input.
+-}
+viewFunctions =
+    let
+        viewDialog style text titleString accept dismiss { palette } () =
+            "Placeholder Text"
+                |> Element.text
+                |> Element.el
+                    ([ Element.height <| Element.px 200
+                     , Element.width <| Element.fill
+                     ]
+                        ++ (Widget.dialog (style palette)
+                                { text = text
+                                , title = titleString
+                                , accept = accept
+                                , dismiss = dismiss
+                                }
+                                |> List.singleton
+                                |> Widget.singleModal
+                           )
+                    )
+                |> Page.viewTile "Widget.dialog"
+    in
+    [ viewDialog ]
+        |> List.foldl Story.addTile
+            Story.initStaticTiles
+
+
+{-| Let's you play around with the options.
+Note that the order of these stories must follow the order of the arguments from the view functions.
+-}
+book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
+book =
+    Story.book (Just "Options")
+        viewFunctions
+        --Adding a option for different styles.
+        |> Story.addStory
+            (Story.optionListStory "Style"
+                ( "Alert Dialog", Material.alertDialog )
+                []
+            )
+        --Changing the text of the label
+        |> Story.addStory
+            (Story.textStory "Text"
+                "If an accept button is given then the window can only be closed manually. Else it can be closed by pressing somewhere outside of it."
+            )
+        |> Story.addStory
+            (Story.boolStory "With title"
+                ( Just "Title"
+                , Nothing
+                )
+                True
+            )
+        --Should an event be triggered when pressing the button?
+        |> Story.addStory
+            (Story.boolStory "With accept button"
+                ( Just
+                    { text = "Ok"
+                    , onPress = Just ()
+                    }
+                , Nothing
+                )
+                True
+            )
+        |> Story.addStory
+            (Story.boolStory "Dismissible"
+                ( Just
+                    { text = "Dismiss"
+                    , onPress = Just ()
+                    }
+                , Nothing
+                )
+                True
+            )
+        |> Story.build
+
+
+
+{- This next section is essentially just a normal Elm program. -}
+--------------------------------------------------------------------------------
+-- Interactive Demonstration
+--------------------------------------------------------------------------------
+
+
+type Model
+    = IsOpen Bool
+
+
+type Msg
+    = OpenDialog Bool
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( IsOpen True
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg _ =
+    case msg of
+        OpenDialog bool ->
+            ( IsOpen bool
+            , Cmd.none
+            )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
+-}
+view : Context -> Model -> Element Msg
+view { palette } (IsOpen isOpen) =
+    Widget.button (Material.containedButton palette)
+        { text = "Show Dialog"
+        , icon = MaterialIcons.visibility |> Icon.elmMaterialIcons Color
+        , onPress =
+            OpenDialog True
+                |> Just
+        }
+        |> Element.el
+            ([ Element.height <| Element.minimum 200 <| Element.fill
+             , Element.width <| Element.minimum 400 <| Element.fill
+             ]
+                ++ (if isOpen then
+                        { text = "This is a dialog window"
+                        , title = Just "Dialog"
+                        , accept =
+                            Just
+                                { text = "Ok"
+                                , onPress =
+                                    Just <|
+                                        OpenDialog False
+                                }
+                        , dismiss =
+                            Just
+                                { text = "Dismiss"
+                                , onPress =
+                                    Just <|
+                                        OpenDialog False
+                                }
+                        }
+                            |> Widget.dialog (Material.alertDialog palette)
+                            |> List.singleton
+                            |> Widget.singleModal
+
+                    else
+                        []
+                   )
+            )
+
+
+
+--------------------------------------------------------------------------------
+-- DO NOT MODIFY ANYTHING AFTER THIS LINE
+--------------------------------------------------------------------------------
+
+
+demo : Tile Model Msg ()
+demo =
+    { init = always init
+    , update = update
+    , view = Page.demo view
+    , subscriptions = subscriptions
+    }
+
+
+page =
+    Page.create
+        { title = title
+        , description = description
+        , book = book
+        , demo = demo
+        }
diff --git a/explorer/src/Page/Icon.elm b/explorer/src/Page/Icon.elm
index bf8edd9..8c794fd 100644
--- a/explorer/src/Page/Icon.elm
+++ b/explorer/src/Page/Icon.elm
@@ -4,9 +4,7 @@ module Page.Icon exposing (page)
 -}
 
 import Ant.Icons.Svg
-import Browser
 import Element exposing (Element)
-import Element.Background as Background
 import FeatherIcons
 import FontAwesome.Solid
 import FontAwesome.Svg
@@ -17,13 +15,10 @@ import Material.Icons.Action
 import Material.Icons.Types exposing (Coloring(..))
 import Octicons
 import Page
-import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
-import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
-import Widget exposing (ButtonStyle, RowStyle)
-import Widget.Customize as Customize
+import UIExplorer.Tile as Tile exposing (Context, Tile)
+import Widget
 import Widget.Icon
 import Widget.Material as Material
-import Widget.Material.Color as MaterialColor
 import Widget.Material.Typography as Typography
 import Zondicons
 
@@ -43,8 +38,6 @@ description =
 
 
 
-
-
 {- This next section is essentially just a normal Elm program. -}
 --------------------------------------------------------------------------------
 -- Interactive Demonstration
@@ -86,51 +79,51 @@ view : Context -> Model -> Element Msg
 view { palette } () =
     [ ( Material.Icons.done
             |> Widget.Icon.elmMaterialIcons Color
-        , "elm-material-icons"
-        )
-      , ( Material.Icons.Action.done
+      , "elm-material-icons"
+      )
+    , ( Material.Icons.Action.done
             |> Widget.Icon.materialIcons
-        , "material-icons"
-        )
-      , ( FeatherIcons.check
+      , "material-icons"
+      )
+    , ( FeatherIcons.check
             |> Widget.Icon.elmFeather FeatherIcons.toHtml
-        , "elm-feather"
-        )
-      , ( FontAwesome.Solid.check
+      , "elm-feather"
+      )
+    , ( FontAwesome.Solid.check
             |> Widget.Icon.elmFontawesome FontAwesome.Svg.viewIcon
-        , "elm-fontawesome"
-        )
-      , ( Ionicon.checkmark
+      , "elm-fontawesome"
+      )
+    , ( Ionicon.checkmark
             |> Widget.Icon.elmIonicons
-        , "elm-ionicons"
-        )
-      , ( Octicons.check
+      , "elm-ionicons"
+      )
+    , ( Octicons.check
             |> Widget.Icon.elmOcticons
                 { withSize = Octicons.size
                 , withColor = Octicons.color
                 , defaultOptions = Octicons.defaultOptions
                 }
-        , "elm-octicons"
-        )
-      , ( Heroicons.Solid.check
+      , "elm-octicons"
+      )
+    , ( Heroicons.Solid.check
             |> Widget.Icon.elmHeroicons
-        , "elm-heroicons"
-        )
-      , ( Ant.Icons.Svg.checkOutlined
+      , "elm-heroicons"
+      )
+    , ( Ant.Icons.Svg.checkOutlined
             |> Widget.Icon.antDesignIconsElm
-        , "ant-design-icons-elm"
-        )
-      , ( Zondicons.checkmark
+      , "ant-design-icons-elm"
+      )
+    , ( Zondicons.checkmark
             |> Widget.Icon.elmZondicons
-        , "elm-zondicons"
-        )
-      ]
+      , "elm-zondicons"
+      )
+    ]
         |> List.map
             (\( icon, text ) ->
                 Widget.button (Material.containedButton palette)
                     { text = text
                     , icon = icon
-                    , onPress = Just  ()
+                    , onPress = Just ()
                     }
             )
         |> Element.wrappedRow [ Element.spacing 10 ]
diff --git a/explorer/src/Page/Item.elm b/explorer/src/Page/Item.elm
index 0e85879..d2e1b0c 100644
--- a/explorer/src/Page/Item.elm
+++ b/explorer/src/Page/Item.elm
@@ -1,18 +1,16 @@
-module Page.Item exposing (page)
+module Page.Item exposing (page, update)
 
 {-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
 -}
 
-import Browser
 import Element exposing (Element)
-import Element.Background as Background
+import Element.Font as Font
 import Material.Icons as MaterialIcons
 import Material.Icons.Types exposing (Coloring(..))
 import Page
 import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
 import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
-import Widget exposing (ButtonStyle, ColumnStyle, HeaderStyle, InsetItemStyle, ItemStyle)
-import Widget.Customize as Customize
+import Widget
 import Widget.Icon as Icon
 import Widget.Material as Material
 import Widget.Material.Color as MaterialColor
@@ -540,26 +538,36 @@ selectItemBook =
 --------------------------------------------------------------------------------
 
 
-type Model
-    = IsEnabled Bool
+type alias Model =
+    { isEnabled : Bool
+    , isExpanded : Bool
+    }
 
 
 type Msg
     = ToggleModal Bool
+    | ToogleExpand Bool
 
 
 init : ( Model, Cmd Msg )
 init =
-    ( IsEnabled True
+    ( { isEnabled = True
+      , isExpanded = False
+      }
     , Cmd.none
     )
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
-update msg _ =
+update msg model =
     case msg of
         ToggleModal bool ->
-            ( IsEnabled bool
+            ( { model | isEnabled = bool }
+            , Cmd.none
+            )
+
+        ToogleExpand bool ->
+            ( { model | isExpanded = bool }
             , Cmd.none
             )
 
@@ -572,43 +580,148 @@ subscriptions _ =
 {-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
 -}
 view : Context -> Model -> Element Msg
-view { palette } (IsEnabled isEnabled) =
+view { palette } model =
     Widget.button (Material.containedButton palette)
         { text = "Show Sheet"
         , icon = MaterialIcons.visibility |> Icon.elmMaterialIcons Color
         , onPress = ToggleModal True |> Just
         }
         |> Element.el
-            ([ Element.height <| Element.minimum 200 <| Element.fill
+            ([ Element.height <| Element.minimum 800 <| Element.fill
              , Element.width <| Element.minimum 400 <| Element.fill
              ]
-                ++ (if isEnabled then
+                ++ (if model.isEnabled then
                         { content =
-                            [ "Menu"
-                                |> Element.text
-                                |> Element.el Typography.h6
-                                |> Widget.asItem
-                            , Widget.insetItem (Material.insetItem palette)
-                                { onPress = Just <| ToggleModal False
-                                , icon =
-                                    MaterialIcons.change_history
-                                        |> Icon.elmMaterialIcons Color
-                                , text = "Home"
+                            [ [ "Section 1"
+                                    |> Widget.headerItem (Material.fullBleedHeader palette)
+                              , Widget.asItem <| Element.text <| "Custom Item"
+                              , Widget.divider (Material.middleDivider palette)
+                              , Widget.fullBleedItem (Material.fullBleedItem palette)
+                                    { onPress = Nothing
+                                    , icon =
+                                        \_ ->
+                                            Element.none
+                                    , text = "Full Bleed Item"
+                                    }
+                              , "Section 2"
+                                    |> Widget.headerItem (Material.fullBleedHeader palette)
+                              , Widget.insetItem (Material.insetItem palette)
+                                    { onPress = Nothing
+                                    , icon =
+                                        MaterialIcons.change_history
+                                            |> Icon.elmMaterialIcons Color
+                                    , text = "Item with Icon"
+                                    , content =
+                                        \_ ->
+                                            Element.none
+                                    }
+                              , Widget.imageItem (Material.imageItem palette)
+                                    { onPress = Nothing
+                                    , image =
+                                        Element.image [ Element.width <| Element.px <| 40, Element.height <| Element.px <| 40 ]
+                                            { src = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Elm_logo.svg/1024px-Elm_logo.svg.png"
+                                            , description = "Elm logo"
+                                            }
+                                    , text = "Item with Image"
+                                    , content =
+                                        \{ size, color } ->
+                                            "1."
+                                                |> Element.text
+                                                |> Element.el
+                                                    [ Font.color <| MaterialColor.fromColor color
+                                                    , Font.size size
+                                                    ]
+                                    }
+                              , Widget.divider (Material.insetDivider palette)
+                              , Widget.insetItem (Material.insetItem palette)
+                                    { onPress = not model.isExpanded |> ToogleExpand |> Just
+                                    , icon = always Element.none
+                                    , text = "Click Me"
+                                    , content =
+                                        \{ size, color } ->
+                                            "2."
+                                                |> Element.text
+                                                |> Element.el
+                                                    [ Font.color <| MaterialColor.fromColor color
+                                                    , Font.size size
+                                                    ]
+                                    }
+                              , Widget.multiLineItem (Material.multiLineItem palette)
+                                    { title = "Item"
+                                    , text = "Description. Description. Description. Description. Description. Description. Description. Description. Description. Description."
+                                    , onPress = Nothing
+                                    , icon = always Element.none
+                                    , content = always Element.none
+                                    }
+                              , Widget.imageItem (Material.imageItem palette)
+                                    { onPress = not model.isExpanded |> ToogleExpand |> Just
+                                    , image = Element.none
+                                    , text = "Clickable Item with Switch"
+                                    , content =
+                                        \_ ->
+                                            Widget.switch (Material.switch palette)
+                                                { description = "Click Me"
+                                                , active = model.isExpanded
+                                                , onPress =
+                                                    not model.isExpanded
+                                                        |> ToogleExpand
+                                                        |> Just
+                                                }
+                                    }
+                              , Widget.divider (Material.fullBleedDivider palette)
+                              ]
+                            , Widget.expansionItem (Material.expansionItem palette)
+                                { onToggle = ToogleExpand
+                                , isExpanded = model.isExpanded
+                                , icon = always Element.none
+                                , text = "Expandable Item"
                                 , content =
-                                    \_ ->
-                                        Element.none
-                                }
-                            , Widget.insetItem (Material.insetItem palette)
-                                { onPress = Just <| ToggleModal False
-                                , icon =
-                                    MaterialIcons.change_history
-                                        |> Icon.elmMaterialIcons Color
-                                , text = "About"
-                                , content =
-                                    \_ ->
-                                        Element.none
+                                    [ "Section 3"
+                                        |> Widget.headerItem (Material.insetHeader palette)
+                                    , Widget.insetItem (Material.insetItem palette)
+                                        { onPress = Nothing
+                                        , icon = always Element.none
+                                        , text = "Item"
+                                        , content =
+                                            \{ size, color } ->
+                                                "3."
+                                                    |> Element.text
+                                                    |> Element.el
+                                                        [ Font.color <| MaterialColor.fromColor color
+                                                        , Font.size size
+                                                        ]
+                                        }
+                                    ]
                                 }
+                            , [ "Menu" |> Widget.headerItem (Material.fullBleedHeader palette) ]
+                            , { selected =
+                                    if model.isExpanded then
+                                        Just 1
+
+                                    else
+                                        Just 0
+                              , options =
+                                    [ True, False ]
+                                        |> List.map
+                                            (\bool ->
+                                                { text =
+                                                    if bool then
+                                                        "Expanded"
+
+                                                    else
+                                                        "Collapsed"
+                                                , icon = always Element.none
+                                                }
+                                            )
+                              , onSelect =
+                                    \int ->
+                                        (int == 1)
+                                            |> ToogleExpand
+                                            |> Just
+                              }
+                                |> Widget.selectItem (Material.selectItem palette)
                             ]
+                                |> List.concat
                                 |> Widget.itemList (Material.sideSheet palette)
                         , onDismiss = Just <| ToggleModal False
                         }
@@ -645,6 +758,7 @@ page =
                 |> Element.column [ Element.spacing 32 ]
         )
         |> Tile.first
+        |> Tile.next demo
         |> Tile.nextGroup dividerBook
         |> Tile.nextGroup headerBook
         |> Tile.nextGroup fullBleedItemBook
@@ -652,5 +766,4 @@ page =
         |> Tile.nextGroup multiLineItemBook
         |> Tile.nextGroup expansionItemBook
         |> Tile.nextGroup selectItemBook
-        |> Tile.next demo
         |> Tile.page
diff --git a/explorer/src/Page/Modal.elm b/explorer/src/Page/Modal.elm
index 328b3fb..a91fc79 100644
--- a/explorer/src/Page/Modal.elm
+++ b/explorer/src/Page/Modal.elm
@@ -3,20 +3,15 @@ module Page.Modal exposing (page)
 {-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
 -}
 
-import Browser
 import Element exposing (Element)
-import Element.Background as Background
 import Material.Icons as MaterialIcons
 import Material.Icons.Types exposing (Coloring(..))
 import Page
 import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
 import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
-import Widget exposing (ButtonStyle, ColumnStyle)
-import Widget.Customize as Customize
+import Widget
 import Widget.Icon as Icon
 import Widget.Material as Material
-import Widget.Material.Color as MaterialColor
-import Widget.Material.Typography as Typography
 
 
 {-| The title of this page
diff --git a/explorer/src/Page/MultiSelect.elm b/explorer/src/Page/MultiSelect.elm
index 01c20b4..02bbd10 100644
--- a/explorer/src/Page/MultiSelect.elm
+++ b/explorer/src/Page/MultiSelect.elm
@@ -2,24 +2,18 @@ module Page.MultiSelect exposing (page)
 
 {-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
 -}
-import Browser
+
 import Element exposing (Element)
-import Set exposing (Set)
-import Widget exposing (ButtonStyle, RowStyle)
-import Widget.Material as Material
-import Element exposing (Element)
-import Element.Background as Background
 import Material.Icons as MaterialIcons
 import Material.Icons.Types exposing (Coloring(..))
 import Page
+import Set exposing (Set)
 import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
 import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
 import Widget
-import Widget.Customize as Customize
 import Widget.Icon as Icon
 import Widget.Material as Material
-import Widget.Material.Color as MaterialColor
-import Widget.Material.Typography as Typography
+
 
 {-| The title of this page
 -}
@@ -41,9 +35,10 @@ viewFunctions =
     let
         viewSelectRow style selected1 selected2 selected3 options onSelect { palette } () =
             Widget.multiSelect
-                { selected =  
-                    [ selected1, selected2, selected3] |> List.filterMap identity
-                    |> Set.fromList
+                { selected =
+                    [ selected1, selected2, selected3 ]
+                        |> List.filterMap identity
+                        |> Set.fromList
                 , options = options
                 , onSelect = onSelect
                 }
@@ -54,10 +49,12 @@ viewFunctions =
                 --Don't forget to change the title
                 |> Page.viewTile "Widget.buttonRow "
 
-        viewTogggleRow style selected1 selected2 selected3  options onSelect { palette } () =
+        viewTogggleRow style selected1 selected2 selected3 options onSelect { palette } () =
             Widget.multiSelect
-                { selected = [ selected1, selected2, selected3] |> List.filterMap identity
-                    |> Set.fromList
+                { selected =
+                    [ selected1, selected2, selected3 ]
+                        |> List.filterMap identity
+                        |> Set.fromList
                 , options = options
                 , onSelect = onSelect
                 }
@@ -68,10 +65,12 @@ viewFunctions =
                 --Don't forget to change the title
                 |> Page.viewTile "Widget.toggleRow"
 
-        viewWrappedRow style selected1 selected2 selected3  options onSelect { palette } () =
+        viewWrappedRow style selected1 selected2 selected3 options onSelect { palette } () =
             Widget.multiSelect
-                { selected = [ selected1, selected2, selected3] |> List.filterMap identity
-                    |> Set.fromList
+                { selected =
+                    [ selected1, selected2, selected3 ]
+                        |> List.filterMap identity
+                        |> Set.fromList
                 , options = options
                 , onSelect = onSelect
                 }
@@ -82,10 +81,12 @@ viewFunctions =
                 --Don't forget to change the title
                 |> Page.viewTile "Widget.wrappedButtonRow"
 
-        viewSelectColumn style selected1 selected2 selected3  options onSelect { palette } () =
+        viewSelectColumn style selected1 selected2 selected3 options onSelect { palette } () =
             Widget.multiSelect
-                { selected = [ selected1, selected2, selected3] |> List.filterMap identity
-                    |> Set.fromList
+                { selected =
+                    [ selected1, selected2, selected3 ]
+                        |> List.filterMap identity
+                        |> Set.fromList
                 , options = options
                 , onSelect = onSelect
                 }
@@ -122,17 +123,17 @@ book =
         --Changing the text of the label
         |> Story.addStory
             (Story.boolStory "Selected First"
-                (Just 0,Nothing)
+                ( Just 0, Nothing )
                 False
             )
         |> Story.addStory
             (Story.boolStory "Selected Second"
-                (Just 1,Nothing)
+                ( Just 1, Nothing )
                 True
             )
-            |> Story.addStory
+        |> Story.addStory
             (Story.boolStory "Selected Third"
-                (Just 2,Nothing)
+                ( Just 2, Nothing )
                 True
             )
         --Change the Icon
@@ -161,6 +162,7 @@ book =
         |> Story.build
 
 
+
 {- This next section is essentially just a normal Elm program. -}
 --------------------------------------------------------------------------------
 -- Interactive Demonstration
@@ -206,7 +208,7 @@ subscriptions _ =
 {-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
 -}
 view : Context -> Model -> Element Msg
-view {palette} (Selected selected) =
+view { palette } (Selected selected) =
     { selected = selected
     , options =
         [ 1, 2, 42 ]
@@ -225,6 +227,7 @@ view {palette} (Selected selected) =
             }
 
 
+
 --------------------------------------------------------------------------------
 -- DO NOT MODIFY ANYTHING AFTER THIS LINE
 --------------------------------------------------------------------------------
@@ -246,4 +249,3 @@ page =
         , book = book
         , demo = demo
         }
-
diff --git a/explorer/src/Page/ProgressIndicator.elm b/explorer/src/Page/ProgressIndicator.elm
index d2c4518..168ab92 100644
--- a/explorer/src/Page/ProgressIndicator.elm
+++ b/explorer/src/Page/ProgressIndicator.elm
@@ -2,23 +2,14 @@ module Page.ProgressIndicator exposing (page)
 
 {-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
 -}
-import Browser
+
 import Element exposing (Element)
-import Widget exposing (ProgressIndicatorStyle)
-import Widget.Material as Material
-import Element exposing (Element)
-import Element.Background as Background
-import Material.Icons as MaterialIcons
 import Material.Icons.Types exposing (Coloring(..))
 import Page
 import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
 import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
 import Widget
-import Widget.Customize as Customize
-import Widget.Icon as Icon
 import Widget.Material as Material
-import Widget.Material.Color as MaterialColor
-import Widget.Material.Typography as Typography
 
 
 {-| The title of this page
@@ -41,10 +32,9 @@ viewFunctions =
     let
         viewIndicator style progress indeterminate { palette } () =
             Widget.circularProgressIndicator (style palette)
-                (indeterminate (toFloat progress/ 100 ))
+                (indeterminate (toFloat progress / 100))
                 --Don't forget to change the title
                 |> Page.viewTile "Widget.circularProgressIndicator"
-
     in
     [ viewIndicator ]
         |> List.foldl Story.addTile
@@ -62,13 +52,12 @@ book =
         |> Story.addStory
             (Story.optionListStory "Style"
                 ( "ProgressIndicator", Material.progressIndicator )
-                [ ]
+                []
             )
         --Changing the text of the label
         |> Story.addStory
             (Story.rangeStory "Progress"
                 { unit = "%", min = 0, max = 100, default = 50 }
-            
             )
         --Should an event be triggered when pressing the button?
         |> Story.addStory
@@ -118,9 +107,9 @@ subscriptions _ =
 {-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
 -}
 view : Context -> Model -> Element Msg
-view {palette} (MaybeProgress maybeProgress) =
-    Widget.circularProgressIndicator (Material.progressIndicator palette) 
-    maybeProgress
+view { palette } (MaybeProgress maybeProgress) =
+    Widget.circularProgressIndicator (Material.progressIndicator palette)
+        maybeProgress
 
 
 
@@ -145,5 +134,3 @@ page =
         , book = book
         , demo = demo
         }
-
-
diff --git a/explorer/src/UIExplorer.elm b/explorer/src/UIExplorer.elm
index 7a48c83..c5212c0 100644
--- a/explorer/src/UIExplorer.elm
+++ b/explorer/src/UIExplorer.elm
@@ -34,7 +34,7 @@ import Browser
 import Browser.Dom
 import Browser.Events
 import Browser.Navigation
-import Element exposing (Element)
+import Element exposing (DeviceClass(..), Element)
 import Element.Background
 import Element.Font
 import Element.Input
@@ -303,33 +303,37 @@ type PageSizeOption
     | Native
 
 
-allPageSizeOptions : List PageSizeOption
-allPageSizeOptions =
-    [ Iphone5
-    , Iphone6
-    , IpadVertical
-    , IpadHorizontal
-    , Native
-    ]
+
+{- }
+   allPageSizeOptions : List PageSizeOption
+   allPageSizeOptions =
+       [ Iphone5
+       , Iphone6
+       , IpadVertical
+       , IpadHorizontal
+       , Native
+       ]
 
 
-pageSizeOptionToString : PageSizeOption -> String
-pageSizeOptionToString pageSizeOption =
-    case pageSizeOption of
-        Iphone5 ->
-            "iPhone 5/SE"
+   pageSizeOptionToString : PageSizeOption -> String
+   pageSizeOptionToString pageSizeOption =
+       case pageSizeOption of
+           Iphone5 ->
+               "iPhone 5/SE"
 
-        Iphone6 ->
-            "iPhone 6/7/8"
+           Iphone6 ->
+               "iPhone 6/7/8"
 
-        IpadVertical ->
-            "iPad (vertical)"
+           IpadVertical ->
+               "iPad (vertical)"
 
-        IpadHorizontal ->
-            "iPad (horizontal)"
+           IpadHorizontal ->
+               "iPad (horizontal)"
 
-        Native ->
-            "Native width"
+           Native ->
+               "Native width"
+   -
+-}
 
 
 pageSizeOptionWidth : PageSizeOption -> Maybe (Quantity Int Pixels)
@@ -449,7 +453,7 @@ init config (PageBuilder pages) flagsJson url key =
                 , pageSizeOption = Native
                 , expandColorBlindOptions = False
                 , colorBlindOption = Nothing
-                , darkThemeEnabled = True
+                , darkThemeEnabled = False
                 }
             , Cmd.batch
                 [ navigationCmd
@@ -687,38 +691,60 @@ viewSuccess :
     -> Browser.Document (Msg pageMsg)
 viewSuccess config ((PageBuilder pages) as pages_) model =
     let
-        actualSidebarWidth =
+        {--actualSidebarWidth =
             if model.minimizeSidebar then
                 sidebarMinimizedWidth
 
             else
-                sidebarWidth
+                sidebarWidth--}
+        palette =
+            if model.darkThemeEnabled then
+                Material.darkPalette
+
+            else
+                Material.defaultPalette
     in
     { title = "UI Explorer"
     , body =
         [ Element.layoutWith { options = config.layoutOptions }
             (Element.width Element.fill
-                :: Element.inFront
-                    (Element.el
-                        [ Element.height <| Element.px (Pixels.inPixels model.windowSize.height)
-                        , Element.scrollbarY
+                :: (Element.Background.color <|
+                        if model.darkThemeEnabled then
+                            black
+
+                        else
+                            gray
+                   )
+                :: config.layoutAttributes
+            )
+            (Element.column [ Element.width Element.fill, Element.height Element.fill ]
+                [ Widget.menuBar (Material.menuBar palette)
+                    { title =
+                        config.sidebarTitle
+                            |> Element.el Typography.h6
+                    , deviceClass = Desktop
+                    , openLeftSheet = Just PressedToggleSidebar
+                    , openRightSheet = Nothing
+                    , openTopSheet = Nothing
+                    , primaryActions = []
+                    , search = Nothing
+                    }
+                , Element.row
+                    [ Element.width Element.fill
+                    , Element.height Element.fill
+                    , Element.behindContent (Element.html colorblindnessSvg)
+                    , Element.behindContent (Element.html colorblindnessCss)
+                    , Element.Font.color (textColor model.darkThemeEnabled)
+                    ]
+                    [ -- Element.el [ Element.width (Element.px (Pixels.inPixels actualSidebarWidth)) ] Element.none
+                      Element.el
+                        [ Element.height <| Element.fill --Element.px (Pixels.inPixels model.windowSize.height)
                         , Element.Font.size 16
                         ]
                         (viewSidebar pages_ config model)
-                    )
-                :: Element.behindContent (Element.html colorblindnessSvg)
-                :: Element.behindContent (Element.html colorblindnessCss)
-                :: Element.Font.color (textColor model.darkThemeEnabled)
-                :: config.layoutAttributes
-            )
-            (Element.row
-                [ Element.width Element.fill
-                , Element.height Element.fill
-                ]
-                [ Element.el [ Element.width (Element.px (Pixels.inPixels actualSidebarWidth)) ] Element.none
-                , Element.el
-                    (Element.alignTop
-                        :: Element.width
+                    , Element.el
+                        ([ Element.alignTop
+                         , Element.width
                             (case pageSizeOptionWidth model.pageSizeOption of
                                 Just width ->
                                     Element.px (Pixels.inPixels width)
@@ -726,40 +752,31 @@ viewSuccess config ((PageBuilder pages) as pages_) model =
                                 Nothing ->
                                     Element.fillPortion 999999999
                             )
-                        :: Element.height Element.fill
-                        :: Element.Region.mainContent
-                        :: (if model.darkThemeEnabled then
-                                Element.Background.color <| Element.rgb255 30 30 30
+                         , Element.centerX
+                         , Element.paddingXY 0 56
+                         , Element.height Element.fill
+                         , Element.Region.mainContent
+                         , if model.darkThemeEnabled then
+                            Element.Background.color <| Element.rgb255 30 30 30
 
-                            else
-                                Element.Background.color <| Element.rgb255 225 225 225
-                           )
-                        :: (case model.colorBlindOption of
-                                Nothing ->
-                                    []
+                           else
+                            Element.Background.color <| Element.rgb255 225 225 225
+                         ]
+                            ++ (case model.colorBlindOption of
+                                    Nothing ->
+                                        []
 
-                                Just colorBlindOption ->
-                                    colorBlindOptionToCssClass colorBlindOption
-                                        |> Html.Attributes.class
-                                        |> Element.htmlAttribute
-                                        |> List.singleton
-                           )
-                    )
-                    (pages.view model.page (contentSize model) model.darkThemeEnabled model.pageModel
-                        |> Element.map PageMsg
-                    )
-                , Element.el
-                    [ Element.Background.color <|
-                        if model.darkThemeEnabled then
-                            black
-
-                        else
-                            gray
-                    , Element.alpha 0.9
-                    , Element.width Element.fill
-                    , Element.height Element.fill
+                                    Just colorBlindOption ->
+                                        colorBlindOptionToCssClass colorBlindOption
+                                            |> Html.Attributes.class
+                                            |> Element.htmlAttribute
+                                            |> List.singleton
+                               )
+                        )
+                        (pages.view model.page (contentSize model) model.darkThemeEnabled model.pageModel
+                            |> Element.map PageMsg
+                        )
                     ]
-                    Element.none
                 ]
             )
         ]
@@ -783,13 +800,12 @@ viewSidebar :
     -> Element (Msg pageMsg)
 viewSidebar pages config model =
     let
-        bgColor =
+        {--bgColor =
             if model.darkThemeEnabled then
                 darkerGray
 
             else
-                lightGray
-
+                lightGray--}
         palette =
             if model.darkThemeEnabled then
                 Material.darkPalette
@@ -798,7 +814,8 @@ viewSidebar pages config model =
                 Material.defaultPalette
     in
     if model.minimizeSidebar then
-        Element.el
+        Element.none
+        {--Element.el
             [ Element.height Element.fill ]
             (Element.Input.button
                 [ Element.width (Element.px (Pixels.inPixels sidebarMinimizedWidth))
@@ -808,33 +825,29 @@ viewSidebar pages config model =
                 { onPress = Just PressedToggleSidebar
                 , label = Element.el [ Element.moveRight 3 ] (Element.text "❯")
                 }
-            )
+            )--}
 
     else
-        [ [ Widget.insetItem (Material.insetItem palette)
-                { text = ""
-                , onPress = Just PressedToggleSidebar
-                , icon =
-                    \_ ->
-                        config.sidebarTitle
-                            |> Element.el Typography.h6
-                , content =
-                    \{ size } ->
-                        Element.text "❮"
-                            |> Element.el [ Element.Font.size size ]
-                }
-          , Widget.divider (Material.fullBleedDivider palette)
-          , Widget.fullBleedItem (Material.fullBleedItem palette)
+        [ [ Widget.headerItem (Material.fullBleedHeader palette) "Device Toolbar"
+          , Widget.insetItem (Material.insetItem palette)
                 { text = "Dark Theme"
                 , onPress = Just <| ChangeDarkTheme <| not <| model.darkThemeEnabled
-                , icon =
+                , content =
                     \_ ->
                         Widget.switch (Material.switch palette)
                             { description = "Toggle Theme"
                             , onPress = Just <| ChangeDarkTheme <| not <| model.darkThemeEnabled
                             , active = model.darkThemeEnabled
                             }
+                , icon = always Element.none
                 }
+          ]
+
+        --Having different screen sized is nice, but not very useful in the current implementation.
+        --, pageSizeOptionView model.darkThemeEnabled model.expandPageSizeOptions model.pageSizeOption
+        --, [ Widget.divider (Material.insetDivider palette) ]
+        , colorBlindOptionView model.darkThemeEnabled model.expandColorBlindOptions model.colorBlindOption
+        , [ Widget.headerItem (Material.fullBleedHeader palette) "Widgets"
           , Widget.textInput (Material.textInput palette)
                 { chips = []
                 , text = model.searchText
@@ -842,15 +855,9 @@ viewSidebar pages config model =
                 , label = "Search pages"
                 , onChange = TypingSearchText
                 }
-                |> Element.el [ Element.centerX, Element.centerY ]
+                |> Element.el [ Element.paddingXY 8 0 ]
                 |> Element.el [ Element.height <| Element.px 70, Element.width <| Element.fill ]
                 |> Widget.asItem
-          , Widget.headerItem (Material.fullBleedHeader palette) "Device Toolbar"
-          ]
-        , pageSizeOptionView model.darkThemeEnabled model.expandPageSizeOptions model.pageSizeOption
-        , [ Widget.divider (Material.insetDivider palette) ]
-        , colorBlindOptionView model.darkThemeEnabled model.expandColorBlindOptions model.colorBlindOption
-        , [ Widget.headerItem (Material.fullBleedHeader palette) "Widgets"
           , Widget.asItem <|
                 if showSearchResults model.searchText then
                     Element.Lazy.lazy5 viewSearchResults model.darkThemeEnabled pages config model.page model.searchText
@@ -863,6 +870,10 @@ viewSidebar pages config model =
             |> Widget.itemList (Material.sideSheet palette)
 
 
+
+--|> Element.el [ Element.scrollbarY ]
+
+
 colorblindnessCss : Html msg
 colorblindnessCss =
     Html.node "style"
@@ -1052,6 +1063,8 @@ colorblindnessSvg =
         ]
 
 
+
+{--
 pageSizeOptionView : Bool -> Bool -> PageSizeOption -> List (Item (Msg pageMsg))
 pageSizeOptionView dark isExpanded selectedPageSize =
     optionGroupView dark
@@ -1061,6 +1074,7 @@ pageSizeOptionView dark isExpanded selectedPageSize =
         pageSizeOptionToString
         PressedPageSizeOption
         ToggledPageSizeGroup
+--}
 
 
 colorBlindOptionView : Bool -> Bool -> Maybe ColorBlindOption -> List (Item (Msg pageMsg))
@@ -1255,9 +1269,12 @@ lightBlue =
     Element.rgb255 176 208 225
 
 
+
+{--
 lightGray : Element.Color
 lightGray =
     Element.rgb255 228 234 241
+--}
 
 
 gray : Element.Color
diff --git a/explorer/src/UIExplorer/Tile.elm b/explorer/src/UIExplorer/Tile.elm
index c4b5ce3..b78bfb1 100644
--- a/explorer/src/UIExplorer/Tile.elm
+++ b/explorer/src/UIExplorer/Tile.elm
@@ -282,6 +282,7 @@ layoutView palette _ view =
             , view.body |> Element.el [ Element.width Element.fill ] |> Widget.asItem
             ]
                 |> Widget.itemList (Material.cardColumn palette)
+                |> Element.el [ Element.height Element.shrink ]
 
         Nothing ->
             view.body
@@ -319,7 +320,8 @@ layoutRowView palette row =
                     ]
                   <|
                     List.map
-                        (layoutView palette [ Element.height Element.fill ])
+                        (layoutView palette [])
+                    --[ Element.height Element.fill ])
                     <|
                         List.reverse right
                 ]
@@ -350,6 +352,7 @@ page (Builder config) =
                 |> List.concatMap (layoutRowView palette)
                 |> Element.column
                     ([ Element.padding 16
+                     , Element.height Element.fill
                      , Element.spacing 32
                      , Element.px 800 |> Element.width
                      , Element.centerX
diff --git a/src/Internal/Material/Dialog.elm b/src/Internal/Material/Dialog.elm
index 494b32a..59e9522 100644
--- a/src/Internal/Material/Dialog.elm
+++ b/src/Internal/Material/Dialog.elm
@@ -23,10 +23,25 @@ alertDialog palette =
         ]
     , content =
         { title =
-            { contentText = Typography.h6 ++ [ Element.paddingXY 24 20 ]
+            { contentText =
+                Typography.h6
+                    ++ [ Element.paddingEach
+                            { top = 20
+                            , right = 24
+                            , bottom = 0
+                            , left = 24
+                            }
+                       ]
             }
         , text =
-            { contentText = [ Element.paddingXY 24 0 ]
+            { contentText =
+                [ Element.paddingEach
+                    { top = 20
+                    , right = 24
+                    , bottom = 0
+                    , left = 24
+                    }
+                ]
             }
         , buttons =
             { elementRow =