@koine/react 1.0.3 → 1.0.8

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('styled-components'), require('framer-motion'), require('react'), require('@mui/base/AutocompleteUnstyled'), require('@koine/utils'), require('@react-icons/all-files/bs/BsBoxArrowInDown'), require('react-use'), require('@react-icons/all-files/md/MdKeyboardArrowRight'), require('@react-icons/all-files/md/MdAdd'), require('date-fns/isWithinInterval'), require('date-fns/endOfMonth'), require('date-fns/startOfWeek'), require('date-fns/endOfWeek'), require('date-fns/subMonths'), require('date-fns/addMonths'), require('date-fns/subWeeks'), require('date-fns/addWeeks'), require('date-fns/addDays'), require('date-fns/format'), require('date-fns/eachWeekOfInterval'), require('react-swipeable'), require('date-fns/differenceInDays'), require('date-fns/subDays'), require('@reach/disclosure'), require('@react-icons/all-files/md/MdClear'), require('@reach/dialog'), require('yup'), require('react-hook-form'), require('@n8tb1t/use-scroll-position'), require('@react-icons/all-files/im/ImEye'), require('@react-icons/all-files/im/ImEyeBlocked'), require('@tiptap/react'), require('@tiptap/starter-kit'), require('@react-icons/all-files/md/MdFormatBold'), require('@react-icons/all-files/md/MdFormatItalic'), require('@react-icons/all-files/md/MdLaunch'), require('@react-icons/all-files/cg/CgArrowRightR'), require('@react-icons/all-files/cg/CgArrowLeftR'), require('@react-icons/all-files/gr/GrFolderOpen'), require('@react-icons/all-files/cg/CgCloseR'), require('@reach/tabs')) :
-	typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'styled-components', 'framer-motion', 'react', '@mui/base/AutocompleteUnstyled', '@koine/utils', '@react-icons/all-files/bs/BsBoxArrowInDown', 'react-use', '@react-icons/all-files/md/MdKeyboardArrowRight', '@react-icons/all-files/md/MdAdd', 'date-fns/isWithinInterval', 'date-fns/endOfMonth', 'date-fns/startOfWeek', 'date-fns/endOfWeek', 'date-fns/subMonths', 'date-fns/addMonths', 'date-fns/subWeeks', 'date-fns/addWeeks', 'date-fns/addDays', 'date-fns/format', 'date-fns/eachWeekOfInterval', 'react-swipeable', 'date-fns/differenceInDays', 'date-fns/subDays', '@reach/disclosure', '@react-icons/all-files/md/MdClear', '@reach/dialog', 'yup', 'react-hook-form', '@n8tb1t/use-scroll-position', '@react-icons/all-files/im/ImEye', '@react-icons/all-files/im/ImEyeBlocked', '@tiptap/react', '@tiptap/starter-kit', '@react-icons/all-files/md/MdFormatBold', '@react-icons/all-files/md/MdFormatItalic', '@react-icons/all-files/md/MdLaunch', '@react-icons/all-files/cg/CgArrowRightR', '@react-icons/all-files/cg/CgArrowLeftR', '@react-icons/all-files/gr/GrFolderOpen', '@react-icons/all-files/cg/CgCloseR', '@reach/tabs'], factory) :
-	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.jsxRuntime, global.styled, global.framerMotion, global.React, global.AutocompleteUnstyled, global.utils, global.BsBoxArrowInDown, global.reactUse, global.MdKeyboardArrowRight, global.MdAdd, global.isWithinInterval, global.endOfMonth, global.startOfWeek, global.endOfWeek, global.subMonths, global.addMonths, global.subWeeks, global.addWeeks, global.addDays, global.format, global.eachWeekOfInterval, global.reactSwipeable, global.differenceInDays, global.subDays, global.disclosure, global.MdClear, global.dialog, global.yup, global.reactHookForm, global.useScrollPosition, global.ImEye, global.ImEyeBlocked, global.react$1, global.StarterKit, global.MdFormatBold, global.MdFormatItalic, global.MdLaunch, global.CgArrowRightR, global.CgArrowLeftR, global.GrFolderOpen, global.CgCloseR, global.tabs));
-})(this, (function (exports, jsxRuntime, styled, framerMotion, react, AutocompleteUnstyled, utils, BsBoxArrowInDown, reactUse, MdKeyboardArrowRight, MdAdd, isWithinInterval, endOfMonth, startOfWeek, endOfWeek, subMonths, addMonths, subWeeks, addWeeks, addDays, format, eachWeekOfInterval, reactSwipeable, differenceInDays, subDays, disclosure, MdClear, dialog, yup, reactHookForm, useScrollPosition, ImEye, ImEyeBlocked, react$1, StarterKit, MdFormatBold, MdFormatItalic, MdLaunch, CgArrowRightR, CgArrowLeftR, GrFolderOpen, CgCloseR, tabs) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('styled-components'), require('framer-motion'), require('react'), require('@mui/base/AutocompleteUnstyled'), require('@koine/utils'), require('react-icons/bs'), require('react-use'), require('react-icons/md'), require('date-fns/isWithinInterval'), require('date-fns/endOfMonth'), require('date-fns/startOfWeek'), require('date-fns/endOfWeek'), require('date-fns/subMonths'), require('date-fns/addMonths'), require('date-fns/subWeeks'), require('date-fns/addWeeks'), require('date-fns/addDays'), require('date-fns/format'), require('date-fns/eachWeekOfInterval'), require('react-swipeable'), require('date-fns/differenceInDays'), require('date-fns/subDays'), require('@reach/disclosure'), require('@reach/dialog'), require('yup'), require('react-hook-form'), require('@n8tb1t/use-scroll-position'), require('react-icons/im'), require('@tiptap/react'), require('@tiptap/starter-kit'), require('react-icons/cg'), require('react-icons/gr'), require('@reach/tabs')) :
+	typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'styled-components', 'framer-motion', 'react', '@mui/base/AutocompleteUnstyled', '@koine/utils', 'react-icons/bs', 'react-use', 'react-icons/md', 'date-fns/isWithinInterval', 'date-fns/endOfMonth', 'date-fns/startOfWeek', 'date-fns/endOfWeek', 'date-fns/subMonths', 'date-fns/addMonths', 'date-fns/subWeeks', 'date-fns/addWeeks', 'date-fns/addDays', 'date-fns/format', 'date-fns/eachWeekOfInterval', 'react-swipeable', 'date-fns/differenceInDays', 'date-fns/subDays', '@reach/disclosure', '@reach/dialog', 'yup', 'react-hook-form', '@n8tb1t/use-scroll-position', 'react-icons/im', '@tiptap/react', '@tiptap/starter-kit', 'react-icons/cg', 'react-icons/gr', '@reach/tabs'], factory) :
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.jsxRuntime, global.styled, global.framerMotion, global.React, global.AutocompleteUnstyled, global.utils, global.bs, global.reactUse, global.md, global.isWithinInterval, global.endOfMonth, global.startOfWeek, global.endOfWeek, global.subMonths, global.addMonths, global.subWeeks, global.addWeeks, global.addDays, global.format, global.eachWeekOfInterval, global.reactSwipeable, global.differenceInDays, global.subDays, global.disclosure, global.dialog, global.yup, global.reactHookForm, global.useScrollPosition, global.im, global.react$1, global.StarterKit, global.cg, global.gr, global.tabs));
+})(this, (function (exports, jsxRuntime, styled, framerMotion, react, AutocompleteUnstyled, utils, bs, reactUse, md, isWithinInterval, endOfMonth, startOfWeek, endOfWeek, subMonths, addMonths, subWeeks, addWeeks, addDays, format, eachWeekOfInterval, reactSwipeable, differenceInDays, subDays, disclosure, dialog, yup, reactHookForm, useScrollPosition, im, react$1, StarterKit, cg, gr, tabs) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1089,11 +1089,11 @@
 
 	const AlertRoot = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Alert__AlertRoot",
-	  componentId: "lcej9m-0"
+	  componentId: "sc-1pmh9cg-0"
 	})(["font-size:12px;", ""], p => p.$danger ? `color: var(--danger)` : "");
 	const AlertInner = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Alert__AlertInner",
-	  componentId: "lcej9m-1"
+	  componentId: "sc-1pmh9cg-1"
 	})(["padding:1em;background-color:rgba(0,0,0,0.05);"]);
 	const Alert = _a => {
 	  var {
@@ -1749,7 +1749,7 @@
 
 	const UnderlineSkewed = /*#__PURE__*/styled__default["default"](framerMotion.m.i).withConfig({
 	  displayName: "Underline__UnderlineSkewed",
-	  componentId: "sc-1qc0dqa-0"
+	  componentId: "sc-3x4kwb-0"
 	})(["display:block;position:absolute;top:50%;left:15%;right:15%;height:20px;margin-top:-10px;z-index:0;pointer-events:none;background:var(--accent400);transform:skewY(-5deg);"]);
 
 	const normaliseOptions = (options = []) => {
@@ -1860,12 +1860,10 @@
 `;
 	const Label = /*#__PURE__*/styled__default["default"].label.withConfig({
 	  displayName: "Label",
-	  componentId: "sc-1ho7rk3-0"
+	  componentId: "sc-35culb-0"
 	})(["", ""], labelMaterial);
 
-	function colStretch(direction, color) {
-	  // @ts-expect-error nevermind
-	  const bg = (this === null || this === void 0 ? void 0 : this[color]) ? this[color] : color;
+	function colStretch(direction, bg) {
 	  return `
     background: ${bg};
     position: relative;
@@ -1897,11 +1895,11 @@
 
 	const ProgressLinearBg = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "ProgressLinear__ProgressLinearBg",
-	  componentId: "sc-1761h3k-0"
+	  componentId: "sc-iyv4k0-0"
 	})(["position:relative;overflow:hidden;display:block;height:4px;"]);
 	const ProgressLinearFg = /*#__PURE__*/styled__default["default"](framerMotion.m.span).withConfig({
 	  displayName: "ProgressLinear__ProgressLinearFg",
-	  componentId: "sc-1761h3k-1"
+	  componentId: "sc-iyv4k0-1"
 	})(["position:absolute;top:0;bottom:0;left:0;width:100%;"]);
 	/**
 	 * @see https://mui.com/components/progress/#linear
@@ -1944,7 +1942,7 @@
 
 	const InputInvisible = /*#__PURE__*/styled__default["default"].input.withConfig({
 	  displayName: "styles__InputInvisible",
-	  componentId: "a7tlb4-0"
+	  componentId: "sc-1fa7hx3-0"
 	})(["", ""], invisible);
 	const InputHoneypot = /*#__PURE__*/styled__default["default"](InputInvisible).attrs({
 	  type: "text",
@@ -1952,14 +1950,14 @@
 	  tabIndex: -1
 	}).withConfig({
 	  displayName: "styles__InputHoneypot",
-	  componentId: "a7tlb4-1"
+	  componentId: "sc-1fa7hx3-1"
 	})([""]);
 	const InputProgress = /*#__PURE__*/styled__default["default"](p => jsxRuntime.jsx(ProgressLinear, Object.assign({
 	  fg: "var(--accent300)",
 	  bg: "var(--accent400)"
 	}, p))).withConfig({
 	  displayName: "styles__InputProgress",
-	  componentId: "a7tlb4-2"
+	  componentId: "sc-1fa7hx3-2"
 	})(["position:absolute;bottom:0;left:0;width:100%;"]);
 	/**
 	 * Remove the default light blue background on autofilled inputs. To be used as
@@ -2007,23 +2005,23 @@
 
 	const InputWrap = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Input__InputWrap",
-	  componentId: "sc-1y6tzhg-0"
+	  componentId: "sc-1lb5lyl-0"
 	})(["display:flex;align-items:center;justify-content:space-between;"]);
 	const InputMain = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Input__InputMain",
-	  componentId: "sc-1y6tzhg-1"
+	  componentId: "sc-1lb5lyl-1"
 	})(["flex:1;"]);
 	const InputPre = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Input__InputPre",
-	  componentId: "sc-1y6tzhg-2"
+	  componentId: "sc-1lb5lyl-2"
 	})([""]);
 	const InputPost = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Input__InputPost",
-	  componentId: "sc-1y6tzhg-3"
+	  componentId: "sc-1lb5lyl-3"
 	})([""]);
 	const InputNative = /*#__PURE__*/styled__default["default"].input.withConfig({
 	  displayName: "Input__InputNative",
-	  componentId: "sc-1y6tzhg-4"
+	  componentId: "sc-1lb5lyl-4"
 	})(["", " ", ""], inputBase, inputFocus);
 	const Input = /*#__PURE__*/react.forwardRef(function Input(_a, ref) {
 	  var {
@@ -2046,7 +2044,7 @@
 
 	const SelectArrowStyled = /*#__PURE__*/styled__default["default"](framerMotion.m.span).withConfig({
 	  displayName: "components__SelectArrowStyled",
-	  componentId: "sc-13e99zv-0"
+	  componentId: "sc-vc7xks-0"
 	})(["display:inline-flex;align-items:center;justify-content:center;width:2em;&:not([disabled]){cursor:pointer;}"]);
 	const SelectArrow = /*#__PURE__*/react.forwardRef(function SelectArrow(_a, ref) {
 	  var {
@@ -2060,18 +2058,18 @@
 	    },
 	    ref: ref
 	  }, props, {
-	    children: jsxRuntime.jsx(BsBoxArrowInDown.BsBoxArrowInDown, {})
+	    children: jsxRuntime.jsx(bs.BsBoxArrowInDown, {})
 	  }));
 	});
 
 	const Menu = /*#__PURE__*/styled__default["default"].ul.withConfig({
 	  displayName: "Menu",
-	  componentId: "v1thyt-0"
+	  componentId: "sc-1mto20q-0"
 	})(["z-index:3;position:absolute;list-style-type:none;margin:0;padding:0;background:#fff;width:100%;box-shadow:var(--shadow);"]);
 
 	const MenuItem = /*#__PURE__*/styled__default["default"].li.withConfig({
 	  displayName: "MenuItem",
-	  componentId: "sc-11z29ly-0"
+	  componentId: "sc-1fnd9p6-0"
 	})(["padding:8px 16px;&[aria-selected=\"true\"]{background:var(--accent400);}&.Mui-focused,&[data-focus=\"true\"]{background:var(--accent300);color:white;}&:not([disabled]):hover{cursor:pointer;background:var(--accent300);}"]);
 
 	/**
@@ -2086,32 +2084,32 @@
 	const btnStyleOutlined = /*#__PURE__*/styled.css(["color:var(--accent200);border-color:var(--accent200);&:hover:not([disabled]){background:var(--accent300);border-color:var(--accent300);color:white;}"]);
 	const KoineButton = /*#__PURE__*/styled__default["default"].button.withConfig({
 	  displayName: "Button__KoineButton",
-	  componentId: "sc-1hkjy46-0"
+	  componentId: "sc-rk2lui-0"
 	})(["", " ", " ", ""], btnStyleBase, p => p.$variant === "outlined" && btnStyleOutlined, p => p.$variant === "contained" && btnStyleContained);
 
 	const Root$a = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "ButtonComposite__Root",
-	  componentId: "mrn633-0"
+	  componentId: "sc-76f2w8-0"
 	})(["", " padding:0;min-width:0;& svg{font-size:2em !important;margin:0 0.33em 0 0 !important;}"], p => p.$icon ? `display: flex;` : `display: inline-block; text-align: left;`);
 	const ButtonCompositeIcon = /*#__PURE__*/styled__default["default"].svg.withConfig({
 	  displayName: "ButtonComposite__ButtonCompositeIcon",
-	  componentId: "mrn633-1"
+	  componentId: "sc-76f2w8-1"
 	})(["float:left;"]);
 	const BesidesIcon = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "ButtonComposite__BesidesIcon",
-	  componentId: "mrn633-2"
+	  componentId: "sc-76f2w8-2"
 	})(["text-align:left;line-height:1.2;"]);
 	const Main = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "ButtonComposite__Main",
-	  componentId: "mrn633-3"
+	  componentId: "sc-76f2w8-3"
 	})(["display:block;font-size:0.9em;&:last-child{margin-top:", ";}"], p => p.$reverse && !p.$icon ? "0.5em" : "0");
 	const Sub = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "ButtonComposite__Sub",
-	  componentId: "mrn633-4"
+	  componentId: "sc-76f2w8-4"
 	})(["display:block;text-transform:none;font-size:0.7em;font-weight:500;", " + &{margin-top:", ";}"], Main, p => p.$reverse && !p.$icon ? "0.5em" : "0");
 	const Text = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "ButtonComposite__Text",
-	  componentId: "mrn633-5"
+	  componentId: "sc-76f2w8-5"
 	})([""]);
 	const Inner$2 = /*#__PURE__*/react.memo(({
 	  textMain,
@@ -2193,13 +2191,13 @@
 	const iconBtnStyleBase = /*#__PURE__*/styled.css(["", ""], iconBtnStyleReset);
 	const IconButton = /*#__PURE__*/styled__default["default"].button.withConfig({
 	  displayName: "IconButton",
-	  componentId: "sc-1n0qrhr-0"
+	  componentId: "sc-1a99sq0-0"
 	})(["", " ", " ", ""], iconBtnStyleBase, p => p.$variant === "outlined" && btnStyleOutlined, p => p.$variant === "contained" && btnStyleContained);
 
 	const buttonFab = /*#__PURE__*/styled.css(["box-shadow:3px 3px 6px -4px rgb(0,0,0,0.5);"]);
 	const IconButtonFab = /*#__PURE__*/styled__default["default"](IconButton).withConfig({
 	  displayName: "ButtonFab__IconButtonFab",
-	  componentId: "sc-1lpxpwz-0"
+	  componentId: "sc-9hoaw7-0"
 	})(["", ""], buttonFab);
 
 	var wellKnownSymbol$d = wellKnownSymbol$k;
@@ -2329,7 +2327,7 @@
 
 	const Root$9 = /*#__PURE__*/styled__default["default"](KoineButton).withConfig({
 	  displayName: "ButtonLink__Root",
-	  componentId: "lp3x1u-0"
+	  componentId: "sc-mqyfxp-0"
 	})(["text-decoration:none;"]); // export const KoineButtonLink: FC<ButtonLinkProps> = ({ Koine, ...props }) => {
 	//   return <Root {...props} as={Koine.Link} />;
 	// }
@@ -2367,35 +2365,35 @@
 	const AUTOCOMPLETE_ITEM_REMOVE_WIDTH = 20;
 	const AutocompleteRoot = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "components__AutocompleteRoot",
-	  componentId: "sc-1wqgqxl-0"
+	  componentId: "sc-i8zffk-0"
 	})(["position:relative;"]);
 	const AutocompleteLabel = /*#__PURE__*/styled__default["default"](Label).withConfig({
 	  displayName: "components__AutocompleteLabel",
-	  componentId: "sc-1wqgqxl-1"
+	  componentId: "sc-i8zffk-1"
 	})([""]);
 	const AutocompleteWrap = /*#__PURE__*/styled__default["default"](InputWrap).withConfig({
 	  displayName: "components__AutocompleteWrap",
-	  componentId: "sc-1wqgqxl-2"
+	  componentId: "sc-i8zffk-2"
 	})(["", ""], inputReset);
 	const AutocompleteInner = /*#__PURE__*/styled__default["default"](InputMain).withConfig({
 	  displayName: "components__AutocompleteInner",
-	  componentId: "sc-1wqgqxl-3"
+	  componentId: "sc-i8zffk-3"
 	})(["display:inline-flex;flex-wrap:wrap;margin:-", "px;margin-right:0;"], AUTOCOMPLETE_ITEM_SPACER);
 	const AutocompleteItem = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "components__AutocompleteItem",
-	  componentId: "sc-1wqgqxl-4"
+	  componentId: "sc-i8zffk-4"
 	})(["position:relative;display:inline-flex;margin:", "px;max-width:calc(100% - 6px);user-select:none;align-items:center;padding:0 ", "px 0 ", "px;font-size:80%;background:var(--accent400);&:hover{background:var(--accent300);color:white;}&:focus{outline:0px;background:var(--grey700);}"], AUTOCOMPLETE_ITEM_GUTTER, AUTOCOMPLETE_ITEM_REMOVE_WIDTH, AUTOCOMPLETE_ITEM_GUTTER);
 	const AutocompleteItemLabel = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "components__AutocompleteItemLabel",
-	  componentId: "sc-1wqgqxl-5"
+	  componentId: "sc-i8zffk-5"
 	})(["padding:0 ", "px;", ""], AUTOCOMPLETE_ITEM_GUTTER, ellipsis);
 	const AutocompleteItemRemove = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "components__AutocompleteItemRemove",
-	  componentId: "sc-1wqgqxl-6"
+	  componentId: "sc-i8zffk-6"
 	})(["", " position:absolute;top:0;right:0;width:", "px;border:0;height:100%;color:inherit;line-height:1;"], btnStyleReset, AUTOCOMPLETE_ITEM_REMOVE_WIDTH);
 	const AutocompleteInput = /*#__PURE__*/styled__default["default"].input.withConfig({
 	  displayName: "components__AutocompleteInput",
-	  componentId: "sc-1wqgqxl-8"
+	  componentId: "sc-i8zffk-8"
 	})(["flex-grow:1;width:0;min-width:30px;border:0;padding:0 ", "px;text-overflow:ellipsis;background:transparent;&:focus{outline:none;}"], AUTOCOMPLETE_ITEM_SPACER);
 	/**
 	 * This cannot be a button otherwise on `Enter` the form would submit instead
@@ -2405,15 +2403,15 @@
 
 	const AutocompleteInputArrow = /*#__PURE__*/styled__default["default"](SelectArrow).withConfig({
 	  displayName: "components__AutocompleteInputArrow",
-	  componentId: "sc-1wqgqxl-9"
+	  componentId: "sc-i8zffk-9"
 	})([""]);
 	const AutocompleteMenu = /*#__PURE__*/styled__default["default"](Menu).withConfig({
 	  displayName: "components__AutocompleteMenu",
-	  componentId: "sc-1wqgqxl-10"
+	  componentId: "sc-i8zffk-10"
 	})([""]);
 	const AutocompleteMenuItem = /*#__PURE__*/styled__default["default"](MenuItem).withConfig({
 	  displayName: "components__AutocompleteMenuItem",
-	  componentId: "sc-1wqgqxl-11"
+	  componentId: "sc-i8zffk-11"
 	})([""]);
 
 	/**
@@ -2640,7 +2638,7 @@
 
 	const BodyRoot = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Body__BodyRoot",
-	  componentId: "sc-1308qu1-0"
+	  componentId: "sc-1fva3zb-0"
 	})(["display:flex;flex-direction:column;min-height:100vh;"]);
 	/**
 	 * If you have background graphics to overlap you might need to add:
@@ -2653,11 +2651,9 @@
 
 	const BodyMain = /*#__PURE__*/styled__default["default"].main.withConfig({
 	  displayName: "Body__BodyMain",
-	  componentId: "sc-1308qu1-1"
+	  componentId: "sc-1fva3zb-1"
 	})(["flex:1;"]);
 
-	let _$1 = t => t,
-	    _t$1;
 	/**
 	 * App global style
 	 *
@@ -2707,7 +2703,7 @@
     -webkit-tap-highlight-color: transparent;
   }
 `;
-	const StylesGlobal = /*#__PURE__*/styled.createGlobalStyle(_t$1 || (_t$1 = _$1`${0}`), stylesGlobal);
+	const StylesGlobal = /*#__PURE__*/styled.createGlobalStyle(["", ""], stylesGlobal);
 
 	var anObject$b = anObject$h;
 
@@ -3633,57 +3629,6 @@
 	  parseFloat: $parseFloat
 	});
 
-	function _spacing(theme, size = "md", factor = 1, property = "padding", direction = "top", devices = ["mobile", "tablet", "desktop"]) {
-	  const {
-	    breakpoints,
-	    devices: DEVICES,
-	    spaces: SPACES
-	  } = theme;
-	  let css = "";
-	  const prop = `${property}-${direction}`;
-
-	  if (devices === ["mobile"]) {
-	    css += `@media(max-width: ${breakpoints[DEVICES.mobile]}px){
-        ${prop}: ${SPACES["mobile"][size] * factor}px;
-      }`;
-	  } else {
-	    for (let index = 0; index < devices.length; index++) {
-	      const device = devices[index];
-
-	      if (device === "mobile") {
-	        css += `${prop}: ${SPACES[device][size] * factor}px;`;
-	      } else if (device === "tablet") {
-	        css += `@media(min-width: ${breakpoints[DEVICES.tablet]}px){
-          ${prop}: ${SPACES["tablet"][size] * factor}px;
-        }`;
-	      } else if (device === "desktop") {
-	        css += `@media(min-width: ${breakpoints[DEVICES.desktop]}px){
-          ${prop}: ${SPACES["desktop"][size] * factor}px;
-        }`;
-	      }
-	    }
-	  }
-
-	  return css;
-	}
-
-	function spacing(size, factor, property, direction, devices) {
-	  if (direction === "vertical") {
-	    return _spacing(this, size, factor, property, "top", devices) + _spacing(this, size, factor, property, "bottom", devices);
-	  }
-
-	  return _spacing(this, size, factor, property, direction, devices);
-	}
-	function spacingTop(size, factor, property, devices) {
-	  return _spacing(this, size, factor, property, "top", devices);
-	}
-	function spacingBottom(size, factor, property, devices) {
-	  return _spacing(this, size, factor, property, "bottom", devices);
-	}
-	function spacingVertical(size, factor, property, devices) {
-	  return _spacing(this, size, factor, property, "top", devices) + _spacing(this, size, factor, property, "bottom", devices);
-	}
-
 	const DEFAULT_BREAKPOINTS = {
 	  xs: 0,
 	  sm: 440,
@@ -3716,12 +3661,7 @@
 	    mobile: "sm",
 	    tablet: "md",
 	    desktop: "lg"
-	  },
-	  spacing,
-	  spacingTop,
-	  spacingBottom,
-	  spacingVertical,
-	  colStretch
+	  }
 	};
 	const createTheme = options => Object.assign(Object.assign({}, themeDefault), options);
 	const useTheme = styled.useTheme;
@@ -3906,6 +3846,57 @@
 	  };
 	}
 
+	function _spacing(theme, size = "md", factor = 1, property = "padding", direction = "top", devices = ["mobile", "tablet", "desktop"]) {
+	  const {
+	    breakpoints,
+	    devices: DEVICES,
+	    spaces: SPACES
+	  } = theme;
+	  let css = "";
+	  const prop = `${property}-${direction}`;
+
+	  if (devices === ["mobile"]) {
+	    css += `@media(max-width: ${breakpoints[DEVICES.mobile]}px){
+        ${prop}: ${SPACES["mobile"][size] * factor}px;
+      }`;
+	  } else {
+	    for (let index = 0; index < devices.length; index++) {
+	      const device = devices[index];
+
+	      if (device === "mobile") {
+	        css += `${prop}: ${SPACES[device][size] * factor}px;`;
+	      } else if (device === "tablet") {
+	        css += `@media(min-width: ${breakpoints[DEVICES.tablet]}px){
+          ${prop}: ${SPACES["tablet"][size] * factor}px;
+        }`;
+	      } else if (device === "desktop") {
+	        css += `@media(min-width: ${breakpoints[DEVICES.desktop]}px){
+          ${prop}: ${SPACES["desktop"][size] * factor}px;
+        }`;
+	      }
+	    }
+	  }
+
+	  return css;
+	}
+
+	function spacing(size, factor, property, direction, devices) {
+	  if (direction === "vertical") {
+	    return _spacing(this, size, factor, property, "top", devices) + _spacing(this, size, factor, property, "bottom", devices);
+	  }
+
+	  return _spacing(this, size, factor, property, direction, devices);
+	}
+	function spacingTop(size, factor, property, devices) {
+	  return _spacing(this, size, factor, property, "top", devices);
+	}
+	function spacingBottom(size, factor, property, devices) {
+	  return _spacing(this, size, factor, property, "bottom", devices);
+	}
+	function spacingVertical(size, factor, property, devices) {
+	  return _spacing(this, size, factor, property, "top", devices) + _spacing(this, size, factor, property, "bottom", devices);
+	}
+
 	const THEME_KEY = "theme";
 	const THEME_DEFAULT = "light";
 	const getInitialThemeFromRequest = cookie => {
@@ -3978,21 +3969,21 @@
 	const GRID_GUTTER_DEFAULT = "half";
 	const Container = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Grid__Container",
-	  componentId: "sc-16qh9g2-0"
+	  componentId: "sc-ppsqbu-0"
 	})(["max-width:", "px;margin:0 auto;padding:0 ", "px;", ""], p => p.theme.breakpoints[p.size], p => p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT], p => p.clamp ? "overflow: hidden;" : "");
 	const ContainerFluid = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Grid__ContainerFluid",
-	  componentId: "sc-16qh9g2-1"
+	  componentId: "sc-ppsqbu-1"
 	})(["padding:0 ", "px;"], p => p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]);
 	const Row = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Grid__Row",
-	  componentId: "sc-16qh9g2-2"
+	  componentId: "sc-ppsqbu-2"
 	})(["margin:0 -", "px;display:flex;", " ", ";", ""], p => p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT], p => p.$noWrap ? "overflow: auto;" : "flex-wrap: wrap;", p => p.$valign ? `align-items: ${p.$valign}` : "", p => p.$reverse && `@media (${p.$reverse.split(":")[0]}-width: ${p.$reverse.split(":")[1]}px) {
       flex-direction: row-reverse;
     }`);
 	const Col = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Grid__Col",
-	  componentId: "sc-16qh9g2-3"
+	  componentId: "sc-ppsqbu-3"
 	})(["padding:0 ", "px;display:", ";", ";", ";"], p => p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT], p => p.$flex ? "flex" : "block", p => p.$valign ? "align-items: " + p.$valign : "", p => getColCss(p));
 
 	function getColWidth(breakpoints, breakpoint, value) {
@@ -4058,11 +4049,11 @@
 
 	const BgColor = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "BgColor",
-	  componentId: "sc-1x55f2d-0"
+	  componentId: "sc-1ky8mxk-0"
 	})(["background:", ";"], p => p.$bg);
 	const BgColorSkewed = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "BgColor__BgColorSkewed",
-	  componentId: "sc-1x55f2d-1"
+	  componentId: "sc-1ky8mxk-1"
 	})(["position:relative;&:before{z-index:-1;content:\"\";", "}"], p => `
       ${overlay}
       transform: ${p.$transform};
@@ -4106,7 +4097,7 @@
 
 	const Hidden = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Hidden",
-	  componentId: "sc-1664qq8-0"
+	  componentId: "sc-q5gqyj-0"
 	})(["", ""], p => `${p.$min ? `
   @media (min-width: ${p.theme.breakpoints[p.$min]}px) {
     display: none;
@@ -4117,11 +4108,11 @@
 
 	const BgPhotoWrap = /*#__PURE__*/styled__default["default"](Hidden).withConfig({
 	  displayName: "BgPhoto__BgPhotoWrap",
-	  componentId: "rpv8r9-0"
+	  componentId: "sc-buye6b-0"
 	})(["z-index:-10;position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;background-repeat:no-repeat;background-position:top left;background-size:contain;filter:hue-rotate(-36deg);opacity:0.8;"]);
 	const BgPhotoMask = /*#__PURE__*/styled__default["default"](Container).withConfig({
 	  displayName: "BgPhoto__BgPhotoMask",
-	  componentId: "rpv8r9-1"
+	  componentId: "sc-buye6b-1"
 	})(["position:relative;min-height:100%;&:before{content:\"\";position:absolute;top:0;height:100%;right:calc(100% - ", "px);width:", ";background:linear-gradient( 90deg,rgba(var(--bodyBg-rgb,0)) 0%,rgba(var(--bodyBg-rgb,1)) 100% ),linear-gradient( 60deg,rgba(var(--bodyBg-rgb,0)) 0%,rgba(var(--bodyBg-rgb,1)) 70% );}&:after{content:\"\";position:absolute;top:0;height:100%;left:", "px;width:100vw;background:var(--bodyBg);}"], p => p.$overlap + 2, p => {
 	  const containerSizePx = p.theme.breakpoints[p.containerSize];
 	  return `calc(((100vw - ${containerSizePx}px) / 2) + ${p.$overlap + 2}px)`;
@@ -4149,7 +4140,7 @@
 
 	const Root$8 = /*#__PURE__*/styled__default["default"].svg.withConfig({
 	  displayName: "BgSvg__Root",
-	  componentId: "qvklmn-0"
+	  componentId: "sc-uhj1yp-0"
 	})(["position:fixed;z-index:-2;bottom:0;transform:rotate(180deg);opacity:0.9;"]);
 	/**
 	 * Centered triangle shape
@@ -4173,28 +4164,28 @@
 	const LINK_GUTTER_X = 10;
 	const Root$7 = /*#__PURE__*/styled__default["default"].nav.withConfig({
 	  displayName: "Breadcrumbs__Root",
-	  componentId: "sc-1uxyqsf-0"
+	  componentId: "sc-110rq3t-0"
 	})(["display:flex;position:relative;"]);
 	const Inner$1 = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Breadcrumbs__Inner",
-	  componentId: "sc-1uxyqsf-1"
+	  componentId: "sc-110rq3t-1"
 	})(["display:flex;font-size:11px;color:var(--grey100);", "{font-size:12px;}", "{max-width:100%;overflow:hidden;white-space:nowrap;}"], min$1.sm, max$1.lg);
 	const Item = /*#__PURE__*/styled__default["default"](framerMotion.m.div).withConfig({
 	  displayName: "Breadcrumbs__Item",
-	  componentId: "sc-1uxyqsf-2"
+	  componentId: "sc-110rq3t-2"
 	})(["display:flex;align-items:center;&:first-child{margin-left:-", "px;}", "{&:first-child{margin-left:-", "px;}}"], LINK_GUTTER_X / 2, min$1.sm, LINK_GUTTER_X);
 	const itemChild = /*#__PURE__*/styled.css(["display:block;padding:10px ", "px;", "{padding:10px ", "px;}"], LINK_GUTTER_X / 2, min$1.sm, LINK_GUTTER_X);
 	const ItemLink$1 = /*#__PURE__*/styled__default["default"].a.withConfig({
 	  displayName: "Breadcrumbs__ItemLink",
-	  componentId: "sc-1uxyqsf-3"
+	  componentId: "sc-110rq3t-3"
 	})(["", " text-decoration:none;&:hover{text-decoration:underline;}"], itemChild);
 	const ItemCurrent$1 = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "Breadcrumbs__ItemCurrent",
-	  componentId: "sc-1uxyqsf-4"
+	  componentId: "sc-110rq3t-4"
 	})(["", ""], itemChild);
-	const ItemSeparator = /*#__PURE__*/styled__default["default"](MdKeyboardArrowRight.MdKeyboardArrowRight).withConfig({
+	const ItemSeparator = /*#__PURE__*/styled__default["default"](md.MdKeyboardArrowRight).withConfig({
 	  displayName: "Breadcrumbs__ItemSeparator",
-	  componentId: "sc-1uxyqsf-5"
+	  componentId: "sc-110rq3t-5"
 	})([""]);
 	const KoineBreadcrumbs = _a => {
 	  var {
@@ -5168,7 +5159,7 @@
 
 	const CarouselCssRow = /*#__PURE__*/styled__default["default"](Row).withConfig({
 	  displayName: "CarouselCss__CarouselCssRow",
-	  componentId: "sc-1i4c0ab-0"
+	  componentId: "sc-17zho30-0"
 	})(["", " scroll-behavior:smooth;scroll-snap-type:x;-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none;}"], ({
 	  $gutter: cs,
 	  theme: {
@@ -5182,7 +5173,7 @@
   `);
 	const CarouselCssCol = /*#__PURE__*/styled__default["default"](Col).withConfig({
 	  displayName: "CarouselCss__CarouselCssCol",
-	  componentId: "sc-1i4c0ab-1"
+	  componentId: "sc-17zho30-1"
 	})(["", " position:relative;scroll-snap-align:", ";"], p => p.$width && `flex-basis: ${p.$width}px; min-width: ${p.$width}px;`, p => p.$snap);
 	/**
 	 * For programmatic usage an example here @see https://stackoverflow.com/a/65902068/9122820
@@ -5509,7 +5500,7 @@
 	        return jsxRuntime.jsxs(CellOverflow, Object.assign({
 	          onClick: () => expand(true)
 	        }, {
-	          children: [jsxRuntime.jsx(MdAdd.MdAdd, {}), eventsWithoutPlaceholders.length - maxEvents]
+	          children: [jsxRuntime.jsx(md.MdAdd, {}), eventsWithoutPlaceholders.length - maxEvents]
 	        }), "overflowMessage" + i);
 	      }
 
@@ -6882,19 +6873,19 @@
 	  htmlFor: `${props.id}-input`
 	})).withConfig({
 	  displayName: "Collapsable__CollapsableHeadRoot",
-	  componentId: "e584ub-0"
+	  componentId: "sc-avx7zd-0"
 	})(["", " width:100%;padding:0;text-align:left;display:flex;justify-content:space-between;align-items:center;cursor:pointer;"], btnStyleReset);
 	const CollapsableHeadSpace = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Collapsable__CollapsableHeadSpace",
-	  componentId: "e584ub-1"
+	  componentId: "sc-avx7zd-1"
 	})(["flex:1;padding-left:20px;"]);
 	const CollapsableHeadAction = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Collapsable__CollapsableHeadAction",
-	  componentId: "e584ub-2"
+	  componentId: "sc-avx7zd-2"
 	})(["padding-left:20px;"]);
 	const CollaspableHeadLine = /*#__PURE__*/styled__default["default"](framerMotion.m.div).withConfig({
 	  displayName: "Collapsable__CollaspableHeadLine",
-	  componentId: "e584ub-3"
+	  componentId: "sc-avx7zd-3"
 	})(["width:0%;height:1px;background:#bbb;"]);
 	const collapsableHeadLineMotion = {
 	  hover: {
@@ -6906,11 +6897,11 @@
 	};
 	const CollapsableHeadText = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Collapsable__CollapsableHeadText",
-	  componentId: "e584ub-4"
+	  componentId: "sc-avx7zd-4"
 	})([""]);
 	const CollapsableHeadIcon = /*#__PURE__*/styled__default["default"](framerMotion.m.div).withConfig({
 	  displayName: "Collapsable__CollapsableHeadIcon",
-	  componentId: "e584ub-5"
+	  componentId: "sc-avx7zd-5"
 	})([""]);
 	const CollapsableHead = ({
 	  $expanded,
@@ -6944,7 +6935,7 @@
 	          rotate: $expanded ? 180 : 0
 	        }
 	      }, {
-	        children: jsxRuntime.jsx(BsBoxArrowInDown.BsBoxArrowInDown, {})
+	        children: jsxRuntime.jsx(bs.BsBoxArrowInDown, {})
 	      }))
 	    })]
 	  }));
@@ -6953,15 +6944,15 @@
 	  type: "checkbox"
 	}).withConfig({
 	  displayName: "Collapsable__CollapsableInput",
-	  componentId: "e584ub-6"
+	  componentId: "sc-avx7zd-6"
 	})([""]);
 	const CollasableBodyWrap = /*#__PURE__*/styled__default["default"](disclosure.DisclosurePanel).withConfig({
 	  displayName: "Collapsable__CollasableBodyWrap",
-	  componentId: "e584ub-7"
+	  componentId: "sc-avx7zd-7"
 	})(["&[hidden]{display:block;}"]);
 	const CollapsableBodyRoot = /*#__PURE__*/styled__default["default"](framerMotion.m.div).withConfig({
 	  displayName: "Collapsable__CollapsableBodyRoot",
-	  componentId: "e584ub-8"
+	  componentId: "sc-avx7zd-8"
 	})([".no-js &{transition:margin-top 0.2s ease;}.no-js ", ":checked + ", " &{margin-top:0 !important;opacity:1 !important;}"], CollapsableInput, CollasableBodyWrap);
 	const CollapsableBody = /*#__PURE__*/react.forwardRef(function CollapsableBody(props, ref) {
 	  return jsxRuntime.jsx(CollapsableBodyRoot, Object.assign({
@@ -7065,7 +7056,7 @@
 
 	const Root$6 = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Debug__Root",
-	  componentId: "a3cz4-0"
+	  componentId: "sc-1dz7kfz-0"
 	})(["background:#f4f4f4;border:1px solid #ddd;border-left:3px solid #f36d33;color:#666;page-break-inside:avoid;font-family:monospace;font-size:small;line-height:1.6;margin-bottom:1.6em;max-width:100%;overflow:auto;padding:1em 1.5em;display:block;word-wrap:break-word;"]);
 	const Debug = ({
 	  data
@@ -7106,15 +7097,15 @@
 	};
 	const KoineDialogOverlay = /*#__PURE__*/styled__default["default"](dialog.DialogOverlay).withConfig({
 	  displayName: "Dialog__KoineDialogOverlay",
-	  componentId: "sc-1mzpnts-0"
+	  componentId: "sc-xnwsgw-0"
 	})(["z-index:100;position:fixed;", ""], inset0);
 	const KoineDialogBackdrop = /*#__PURE__*/styled__default["default"](framerMotion.m.div).withConfig({
 	  displayName: "Dialog__KoineDialogBackdrop",
-	  componentId: "sc-1mzpnts-1"
+	  componentId: "sc-xnwsgw-1"
 	})(["z-index:2;position:fixed;", " backdrop-filter:blur(0px);"], inset0);
 	const KoineDialogInner = /*#__PURE__*/styled__default["default"](framerMotion.m.div).withConfig({
 	  displayName: "Dialog__KoineDialogInner",
-	  componentId: "sc-1mzpnts-2"
+	  componentId: "sc-xnwsgw-2"
 	})(["z-index:3;position:absolute;", " overflow:hidden scroll;", ";"], inset0, p => p.$centered && `${min$1.sm} {
       display: flex;
       justify-content: center;
@@ -7123,23 +7114,23 @@
 
 	const KoineDialogContent = /*#__PURE__*/styled__default["default"](dialog.DialogContent).withConfig({
 	  displayName: "Dialog__KoineDialogContent",
-	  componentId: "sc-1mzpnts-3"
+	  componentId: "sc-xnwsgw-3"
 	})(["position:relative;outline:0px;width:100%;margin:0 auto;"]);
 	const KoineDialogCloseButton = /*#__PURE__*/styled__default["default"](IconButton).withConfig({
 	  displayName: "Dialog__KoineDialogCloseButton",
-	  componentId: "sc-1mzpnts-4"
+	  componentId: "sc-xnwsgw-4"
 	})(["position:absolute;padding:0;"]);
 	const KoineDialogHeader = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Dialog__KoineDialogHeader",
-	  componentId: "sc-1mzpnts-5"
+	  componentId: "sc-xnwsgw-5"
 	})(["z-index:2;position:relative;"]);
 	const KoineDialogBody = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Dialog__KoineDialogBody",
-	  componentId: "sc-1mzpnts-6"
+	  componentId: "sc-xnwsgw-6"
 	})(["position:relative;&:hover ", "{}"], KoineDialogCloseButton);
 	const KoineDialogBodyChildren = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Dialog__KoineDialogBodyChildren",
-	  componentId: "sc-1mzpnts-7"
+	  componentId: "sc-xnwsgw-7"
 	})(["position:relative;overflow:auto;"]);
 	const KoineDialog = _a => {
 	  var {
@@ -7169,7 +7160,7 @@
 	            children: [jsxRuntime.jsx(KoineDialogCloseButton, Object.assign({
 	              onClick: onDismiss
 	            }, {
-	              children: jsxRuntime.jsx(MdClear.MdClear, {})
+	              children: jsxRuntime.jsx(md.MdClear, {})
 	            })), jsxRuntime.jsx(KoineDialogBodyChildren, {
 	              children: children
 	            })]
@@ -7322,31 +7313,31 @@
 `;
 	const Toggle = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "Toggle",
-	  componentId: "sc-1nsx6c9-0"
+	  componentId: "sc-1oq6hcj-0"
 	})(["position:relative;display:inline-flex;align-items:center;justify-content:center;width:2em;height:2em;margin:0 -0.3em;padding:0.3em;"]);
 	const ToggleLabel = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "Toggle__ToggleLabel",
-	  componentId: "sc-1nsx6c9-1"
+	  componentId: "sc-1oq6hcj-1"
 	})(["margin-left:0.6em;"]);
 	const ToggleLabelSub = /*#__PURE__*/styled__default["default"].small.withConfig({
 	  displayName: "Toggle__ToggleLabelSub",
-	  componentId: "sc-1nsx6c9-2"
+	  componentId: "sc-1oq6hcj-2"
 	})(["opacity:0.7;font-size:0.7em;;"]);
 	const ToggleIndicatorHolder = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "Toggle__ToggleIndicatorHolder",
-	  componentId: "sc-1nsx6c9-3"
+	  componentId: "sc-1oq6hcj-3"
 	})(["position:relative;display:flex;input:focus ~ &{", "}"], stateFocus);
 	const ToggleIndicatorBgSquare = /*#__PURE__*/styled__default["default"].svg.withConfig({
 	  displayName: "Toggle__ToggleIndicatorBgSquare",
-	  componentId: "sc-1nsx6c9-4"
+	  componentId: "sc-1oq6hcj-4"
 	})(["", ""], toggleIndicatorBgShape);
 	const ToggleIndicatorBgCircle = /*#__PURE__*/styled__default["default"].svg.withConfig({
 	  displayName: "Toggle__ToggleIndicatorBgCircle",
-	  componentId: "sc-1nsx6c9-5"
+	  componentId: "sc-1oq6hcj-5"
 	})(["", ""], toggleIndicatorBgShape);
 	const ToggleIndicatorFg = /*#__PURE__*/styled__default["default"].svg.withConfig({
 	  displayName: "Toggle__ToggleIndicatorFg",
-	  componentId: "sc-1nsx6c9-6"
+	  componentId: "sc-1oq6hcj-6"
 	})(["", " transform:scale(0);transition:transform 0.18s ease;input:checked + ", " &{transform:scale(1);}"], toggleIndicatorFg, ToggleIndicatorHolder);
 	const ToggleIndicatorSquared = props => {
 	  return jsxRuntime.jsxs(ToggleIndicatorHolder, {
@@ -7555,19 +7546,19 @@
 
 	const CheckboxRoot = /*#__PURE__*/styled__default["default"].label.withConfig({
 	  displayName: "Checkbox__CheckboxRoot",
-	  componentId: "zwkhrm-0"
+	  componentId: "sc-16l2cmd-0"
 	})(["display:flex;align-items:center;cursor:pointer;"]);
 	const CheckboxToggle = /*#__PURE__*/styled__default["default"](Toggle).withConfig({
 	  displayName: "Checkbox__CheckboxToggle",
-	  componentId: "zwkhrm-1"
+	  componentId: "sc-16l2cmd-1"
 	})(["pointer-events:none;"]);
 	const CheckboxIndicator = /*#__PURE__*/styled__default["default"](ToggleIndicatorSquared).withConfig({
 	  displayName: "Checkbox__CheckboxIndicator",
-	  componentId: "zwkhrm-2"
+	  componentId: "sc-16l2cmd-2"
 	})([""]);
 	const CheckboxLabel = /*#__PURE__*/styled__default["default"](ToggleLabel).withConfig({
 	  displayName: "Checkbox__CheckboxLabel",
-	  componentId: "zwkhrm-3"
+	  componentId: "sc-16l2cmd-3"
 	})(["font-size:0.8em;"]);
 	/**
 	 * All logic and invisible Inputs come from the `useToggle` hook
@@ -7590,7 +7581,7 @@
 
 	const Root$5 = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Feedback__Root",
-	  componentId: "ibaaij-0"
+	  componentId: "sc-1qnnzkg-0"
 	})(["margin-top:0.2em;font-size:12px;", ""], p => p.$danger ? `color: var(--danger);` : "");
 	const Feedback = ({
 	  $danger,
@@ -7607,11 +7598,11 @@
 	const field = /*#__PURE__*/styled.css(["padding-bottom:20px;"]);
 	const FieldBase = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Field__FieldBase",
-	  componentId: "sc-3v73wg-0"
+	  componentId: "sc-1eheucu-0"
 	})(["", ""], field);
 	const FieldRoot = /*#__PURE__*/styled__default["default"](FieldBase).withConfig({
 	  displayName: "Field__FieldRoot",
-	  componentId: "sc-3v73wg-1"
+	  componentId: "sc-1eheucu-1"
 	})(["", ""], p => {
 	  return p.$danger && `
     color: var(--danger);
@@ -7681,7 +7672,7 @@
 
 	const FieldHint = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "FieldHint",
-	  componentId: "sc-3pzv4y-0"
+	  componentId: "sc-1knmi2e-0"
 	})(["padding-top:0.6em;opacity:0.7;font-size:75%;"]);
 
 	/**
@@ -7748,19 +7739,19 @@
 
 	const InputGroupRoot = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "InputGroup__InputGroupRoot",
-	  componentId: "sc-1nm9i6a-0"
+	  componentId: "sc-11syh3s-0"
 	})(["", " display:flex;", "{flex-direction:column;}"], field, max$1.sm);
 	const InputGroupMain = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "InputGroup__InputGroupMain",
-	  componentId: "sc-1nm9i6a-1"
+	  componentId: "sc-11syh3s-1"
 	})(["flex:1;"]);
 	const InputGroupButtonPre = /*#__PURE__*/styled__default["default"](KoineButton).withConfig({
 	  displayName: "InputGroup__InputGroupButtonPre",
-	  componentId: "sc-1nm9i6a-2"
+	  componentId: "sc-11syh3s-2"
 	})(["", "{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;}", "{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;}"], max$1.sm, min$1.sm);
 	const InputGroupButtonPost = /*#__PURE__*/styled__default["default"](KoineButton).withConfig({
 	  displayName: "InputGroup__InputGroupButtonPost",
-	  componentId: "sc-1nm9i6a-3"
+	  componentId: "sc-11syh3s-3"
 	})(["", "{border-top:0;border-top-left-radius:0;border-top-right-radius:0;}", "{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;}"], max$1.sm, min$1.sm);
 	const InputGroup = ({
 	  pre,
@@ -7784,11 +7775,11 @@
 	const animationCircle = /*#__PURE__*/styled.keyframes(["0%{stroke-dasharray:1px,200px;stroke-dashoffset:0;}50%{stroke-dasharray:100px,200px;stroke-dashoffset:-15px;}100%{stroke-dasharray:100px,200px;stroke-dashoffset:-125px;}"]);
 	const ProgressCircularSvg = /*#__PURE__*/styled__default["default"].svg.withConfig({
 	  displayName: "ProgressCircular__ProgressCircularSvg",
-	  componentId: "hfo1yr-0"
+	  componentId: "sc-mm1llp-0"
 	})(["animation:", " 1.5s linear infinite;"], animationRotation);
 	const ProgressCircularCircle = /*#__PURE__*/styled__default["default"].circle.withConfig({
 	  displayName: "ProgressCircular__ProgressCircularCircle",
-	  componentId: "hfo1yr-1"
+	  componentId: "sc-mm1llp-1"
 	})(["animation:", " 1.5s linear infinite;"], animationCircle);
 	/**
 	 * @see https://mui.com/components/progress/
@@ -7850,11 +7841,11 @@
 
 	const ProgressOverlayWrap = /*#__PURE__*/styled__default["default"](framerMotion.m.div).withConfig({
 	  displayName: "ProgressOverlay__ProgressOverlayWrap",
-	  componentId: "umgj5t-0"
+	  componentId: "sc-19rm0co-0"
 	})(["z-index:10000;position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;cursor:wait;"]);
 	const ProgressOverlayCenterer = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "ProgressOverlay__ProgressOverlayCenterer",
-	  componentId: "umgj5t-1"
+	  componentId: "sc-19rm0co-1"
 	})(["position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:var(--progress-overlay-bg);"]);
 	const ProgressOverlay = ({
 	  running
@@ -7894,15 +7885,15 @@
 
 	const FormRoot = /*#__PURE__*/styled__default["default"].form.withConfig({
 	  displayName: "Form__FormRoot",
-	  componentId: "sc-1c6uqfh-0"
+	  componentId: "sc-1lzx9vu-0"
 	})(["position:relative;"]);
 	const FormOverlay = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Form__FormOverlay",
-	  componentId: "sc-1c6uqfh-1"
+	  componentId: "sc-1lzx9vu-1"
 	})(["z-index:4;", " ", " background:rgba(var(--bodyBg--rgb),.8);pointer-events:none;backdrop-filter:blur(2px);"], overlay, centered);
 	const FormFeedback = /*#__PURE__*/styled__default["default"](Alert).withConfig({
 	  displayName: "Form__FormFeedback",
-	  componentId: "sc-1c6uqfh-2"
+	  componentId: "sc-1lzx9vu-2"
 	})(["padding:2em 0;"]);
 	const Form = _a => {
 	  var {
@@ -7983,15 +7974,15 @@
 	const ICON_WIDTH = "2em";
 	const PasswordInputWrap = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Password__PasswordInputWrap",
-	  componentId: "sc-2us5e0-0"
+	  componentId: "sc-qcy15i-0"
 	})(["position:relative;"]);
 	const PasswordInputNative = /*#__PURE__*/styled__default["default"](InputNative).withConfig({
 	  displayName: "Password__PasswordInputNative",
-	  componentId: "sc-2us5e0-1"
+	  componentId: "sc-qcy15i-1"
 	})(["position:relative;padding-right:", ";"], ICON_WIDTH);
 	const PasswordIcon = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "Password__PasswordIcon",
-	  componentId: "sc-2us5e0-2"
+	  componentId: "sc-qcy15i-2"
 	})(["position:absolute;top:0;right:0;bottom:0;width:", ";display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0.5;"], ICON_WIDTH);
 	const Password = /*#__PURE__*/react.forwardRef(function Password(_a, ref) {
 	  var {
@@ -8015,7 +8006,7 @@
 	      }, props)), jsxRuntime.jsx(PasswordIcon, Object.assign({
 	        onClick: () => setVisible(prev => !prev)
 	      }, {
-	        children: visible ? jsxRuntime.jsx(ImEyeBlocked.ImEyeBlocked, {}) : jsxRuntime.jsx(ImEye.ImEye, {})
+	        children: visible ? jsxRuntime.jsx(im.ImEyeBlocked, {}) : jsxRuntime.jsx(im.ImEye, {})
 	      }))]
 	    })]
 	  });
@@ -8023,27 +8014,27 @@
 
 	const RadioRoot = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Radio__RadioRoot",
-	  componentId: "gv6b7r-0"
+	  componentId: "sc-8t3f4x-0"
 	})([""]);
 	const RadioLabel = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Radio__RadioLabel",
-	  componentId: "gv6b7r-1"
+	  componentId: "sc-8t3f4x-1"
 	})(["", ""], label);
 	const RadioOptionRoot = /*#__PURE__*/styled__default["default"].label.withConfig({
 	  displayName: "Radio__RadioOptionRoot",
-	  componentId: "gv6b7r-2"
+	  componentId: "sc-8t3f4x-2"
 	})(["display:flex;align-items:center;padding:0.05em;cursor:pointer;"]);
 	const RadioToggle = /*#__PURE__*/styled__default["default"](Toggle).withConfig({
 	  displayName: "Radio__RadioToggle",
-	  componentId: "gv6b7r-3"
+	  componentId: "sc-8t3f4x-3"
 	})([""]);
 	const RadioIndicator = /*#__PURE__*/styled__default["default"](ToggleIndicatorSquared).withConfig({
 	  displayName: "Radio__RadioIndicator",
-	  componentId: "gv6b7r-4"
+	  componentId: "sc-8t3f4x-4"
 	})([""]);
 	const RadioOptionLabel = /*#__PURE__*/styled__default["default"](ToggleLabel).withConfig({
 	  displayName: "Radio__RadioOptionLabel",
-	  componentId: "gv6b7r-5"
+	  componentId: "sc-8t3f4x-5"
 	})([""]);
 	const RadioOption = /*#__PURE__*/react.forwardRef(function RadioOption(_a, ref) {
 	  var {
@@ -8089,11 +8080,11 @@
 	const SWITCH_HANDLE_SIZE = 1;
 	const SwitchTrack = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "Switch__SwitchTrack",
-	  componentId: "dstl69-0"
+	  componentId: "sc-1ep4r76-0"
 	})(["position:relative;width:", "em;height:", "em;padding:", "em;border-radius:", "em;", " input:focus ~ &{", "}input:disabled ~ &{opacity:0.5;cursor:not-allowed;}"], SWITCH_HANDLE_SIZE * 3, SWITCH_HANDLE_SIZE * 1.5, SWITCH_GUTTER, SWITCH_HANDLE_SIZE, toggleBase, stateFocus);
 	const SwitchHandle = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "Switch__SwitchHandle",
-	  componentId: "dstl69-1"
+	  componentId: "sc-1ep4r76-1"
 	})(["position:absolute;width:", "em;height:", "em;left:", "em;margin-top:-1px;background:currentColor;opacity:0.5;border-radius:100%;transition:all 0.18s ease-in-out;input:checked + ", " &{opacity:1;left:calc(100% - ", "em - ", "em);}"], SWITCH_HANDLE_SIZE, SWITCH_HANDLE_SIZE, SWITCH_GUTTER, SwitchTrack, SWITCH_HANDLE_SIZE, SWITCH_GUTTER);
 	/**
 	 * All logic and invisible Inputs come from the `useToggle` hook
@@ -8116,7 +8107,7 @@
 
 	const TextareaNative = /*#__PURE__*/styled__default["default"].textarea.withConfig({
 	  displayName: "Textarea__TextareaNative",
-	  componentId: "xvks9s-0"
+	  componentId: "sc-1ht2bik-0"
 	})(["", " ", " resize:vertical;"], inputBase, inputFocus);
 	const Textarea = /*#__PURE__*/react.forwardRef(function Textarea(_a, ref) {
 	  var {
@@ -8136,33 +8127,19 @@
 	  });
 	});
 
-	let _ = t => t,
-	    _t;
 	const EditorRoot = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "components__EditorRoot",
-	  componentId: "yit760-0"
+	  componentId: "sc-l5s3z3-0"
 	})(["", " ", ""], inputBorder, inputFocus);
 	const EditorBarRoot = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "components__EditorBarRoot",
-	  componentId: "yit760-1"
+	  componentId: "sc-l5s3z3-1"
 	})(["display:flex;justify-content:flex-end;border-bottom:1px solid rgba(0,0,0,0.1);"]);
 	const EditorBarBtn = /*#__PURE__*/styled__default["default"](IconButton).withConfig({
 	  displayName: "components__EditorBarBtn",
-	  componentId: "yit760-2"
+	  componentId: "sc-l5s3z3-2"
 	})([""]);
-	const EditorGlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_t || (_t = _`
-  .ProseMirror {
-    ${0}
-    
-    &:focus {
-      outline:none;
-    }
-
-    > *:first-child {
-      margin-top: 0;
-    }
-  }
-`), inputPadding);
+	const EditorGlobalStyles = /*#__PURE__*/styled.createGlobalStyle([".ProseMirror{", " &:focus{outline:none;}> *:first-child{margin-top:0;}}"], inputPadding);
 
 	const EditorBar = ({
 	  editor
@@ -8181,12 +8158,12 @@
 	      onClick: e => handleClick(e, "Bold"),
 	      className: editor.isActive("bold") ? "is-active" : ""
 	    }, {
-	      children: jsxRuntime.jsx(MdFormatBold.MdFormatBold, {})
+	      children: jsxRuntime.jsx(md.MdFormatBold, {})
 	    })), jsxRuntime.jsx(EditorBarBtn, Object.assign({
 	      onClick: e => handleClick(e, "Italic"),
 	      className: editor.isActive("bold") ? "is-active" : ""
 	    }, {
-	      children: jsxRuntime.jsx(MdFormatItalic.MdFormatItalic, {})
+	      children: jsxRuntime.jsx(md.MdFormatItalic, {})
 	    }))]
 	  });
 	};
@@ -8212,7 +8189,7 @@
 
 	const Root$4 = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "TextareaRich__Root",
-	  componentId: "viqw1n-0"
+	  componentId: "sc-o5bcek-0"
 	})([".ProseMirror{max-height:160px;overflow:auto;}.EditorContent{position:relative;&:after{position:absolute;content:\"\";bottom:0;left:0;right:16px;height:3em;background:linear-gradient(0deg,white,white 33%,transparent);pointer-events:none;}}"]);
 	const TextareaRich = /*#__PURE__*/react.forwardRef(function TextareaRich(_a, ref) {
 	  var {
@@ -8403,7 +8380,7 @@
 
 	const HamburgerLabel = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Hamburger__HamburgerLabel",
-	  componentId: "sc-13f3yed-0"
+	  componentId: "sc-jjvtrk-0"
 	})(["position:absolute;top:30px;font-size:", ";text-transform:uppercase;left:7px;letter-spacing:3px;"], ({
 	  $toggled
 	}) => $toggled ? "0" : "9px");
@@ -8500,7 +8477,7 @@
 
 	const KoineImg = /*#__PURE__*/styled__default["default"].img.withConfig({
 	  displayName: "Img__KoineImg",
-	  componentId: "sc-17ygzli-0"
+	  componentId: "sc-xk4cex-0"
 	})([""]); // /**
 	//  * Replacement core component for native `<img />`
 	//  *
@@ -8532,7 +8509,7 @@
 
 	const KoineLink = /*#__PURE__*/styled__default["default"].a.withConfig({
 	  displayName: "Link__KoineLink",
-	  componentId: "sc-1l7zv6f-0"
+	  componentId: "sc-ia8uk7-0"
 	})([""]);
 
 	const LinkBlankA = /*#__PURE__*/styled__default["default"].a.attrs({
@@ -8540,13 +8517,13 @@
 	  rel: "noopener"
 	}).withConfig({
 	  displayName: "LinkBlank__LinkBlankA",
-	  componentId: "sc-1ke7vmk-0"
+	  componentId: "sc-13mh7z7-0"
 	})([""]); // TODO: use `touch` class on <html> instead of relying on screenwidth,
 	// probably implement a lean Modernizr like thing with react-helmet
 
-	const LinkBlankIcon = /*#__PURE__*/styled__default["default"](MdLaunch.MdLaunch).withConfig({
+	const LinkBlankIcon = /*#__PURE__*/styled__default["default"](md.MdLaunch).withConfig({
 	  displayName: "LinkBlank__LinkBlankIcon",
-	  componentId: "sc-1ke7vmk-1"
+	  componentId: "sc-13mh7z7-1"
 	})(["color:var(---grey100);font-size:inherit;margin-left:3px;line-height:inherit;vertical-align:middle;width:0px;transition:width 0.1s ease-in-out;", "{width:20px;opacity:0.8;}"], max$1.sm);
 	const LinkBlank = _a => {
 	  var {
@@ -8581,7 +8558,7 @@
 
 	const Root$3 = /*#__PURE__*/styled__default["default"].nav.withConfig({
 	  displayName: "PaginationNav__Root",
-	  componentId: "ydvvbf-0"
+	  componentId: "sc-yp3m0g-0"
 	})(["display:flex;align-items:center;justify-content:center;padding:20px 0 40px;font-weight:600;& a{text-decoration:none;}"]);
 	const item = `
   display: block;
@@ -8589,24 +8566,24 @@
 `;
 	const ItemCurrent = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "PaginationNav__ItemCurrent",
-	  componentId: "ydvvbf-1"
+	  componentId: "sc-yp3m0g-1"
 	})(["", " background:var(--accent400);border-radius:2px;"], item);
 	const ItemLink = /*#__PURE__*/styled__default["default"].a.withConfig({
 	  displayName: "PaginationNav__ItemLink",
-	  componentId: "ydvvbf-2"
+	  componentId: "sc-yp3m0g-2"
 	})(["", " ", ""], item, props => props.prev ? "color: var(--grey100);" : "");
 	const DotsSeparator = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "PaginationNav__DotsSeparator",
-	  componentId: "ydvvbf-3"
+	  componentId: "sc-yp3m0g-3"
 	})(["color:var(--grey100);"]);
 	const arrow = `display: flex; font-size: 20px;`;
 	const ItemPrev = /*#__PURE__*/styled__default["default"].a.withConfig({
 	  displayName: "PaginationNav__ItemPrev",
-	  componentId: "ydvvbf-4"
+	  componentId: "sc-yp3m0g-4"
 	})(["", ""], arrow);
 	const ItemNext = /*#__PURE__*/styled__default["default"].a.withConfig({
 	  displayName: "PaginationNav__ItemNext",
-	  componentId: "ydvvbf-5"
+	  componentId: "sc-yp3m0g-5"
 	})(["", ""], arrow);
 	/*
 	 * Possible outcomes:
@@ -8673,7 +8650,7 @@
 	      as: Link,
 	      href: `${baseUrl}/${prevPage}`
 	    }, {
-	      children: jsxRuntime.jsx(CgArrowLeftR.CgArrowLeftR, {})
+	      children: jsxRuntime.jsx(cg.CgArrowLeftR, {})
 	    })), firstPage !== currentPage && jsxRuntime.jsx(ItemLink, Object.assign({
 	      as: Link,
 	      href: `${baseUrl}`,
@@ -8703,18 +8680,18 @@
 	      as: Link,
 	      href: `${baseUrl}/${nextPage}`
 	    }, {
-	      children: jsxRuntime.jsx(CgArrowRightR.CgArrowRightR, {})
+	      children: jsxRuntime.jsx(cg.CgArrowRightR, {})
 	    }))]
 	  });
 	};
 
 	const Root$2 = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "PaginationResults__Root",
-	  componentId: "sg84c7-0"
+	  componentId: "sc-1q72gw8-0"
 	})([""]);
 	const Inner = /*#__PURE__*/styled__default["default"](framerMotion.m.div).withConfig({
 	  displayName: "PaginationResults__Inner",
-	  componentId: "sg84c7-1"
+	  componentId: "sc-1q72gw8-1"
 	})([""]);
 	const PaginationResults = ({
 	  children
@@ -8750,24 +8727,24 @@
 
 	const Pill = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Pill",
-	  componentId: "lqlli5-0"
+	  componentId: "sc-1lkc0vs-0"
 	})(["display:inline-block;padding:5px 10px;margin:0 0.5em 0.5em 0;border-radius:2px;text-decoration:none;font-size:13px;font-weight:600;"]);
 	const PillGreyLight = /*#__PURE__*/styled__default["default"](Pill).withConfig({
 	  displayName: "Pill__PillGreyLight",
-	  componentId: "lqlli5-1"
+	  componentId: "sc-1lkc0vs-1"
 	})(["background:var(--grey800);color:var(--grey100);&:hover{color:white;background:var(--grey300);}"]);
 	const PillAccentLight = /*#__PURE__*/styled__default["default"](Pill).withConfig({
 	  displayName: "Pill__PillAccentLight",
-	  componentId: "lqlli5-2"
+	  componentId: "sc-1lkc0vs-2"
 	})(["background:var(--accent400);color:var(--grey100);&:hover{color:#fff;background:var(--accent300);}"]);
 	const PillAccentLightOutlined = /*#__PURE__*/styled__default["default"](Pill).withConfig({
 	  displayName: "Pill__PillAccentLightOutlined",
-	  componentId: "lqlli5-3"
+	  componentId: "sc-1lkc0vs-3"
 	})(["border:1px solid var(--accent300);color:var(--accent200);&:hover{color:#fff;background:var(--accent300);}"]);
 
 	const RatingStarRoot = /*#__PURE__*/styled__default["default"].svg.withConfig({
 	  displayName: "Rating__RatingStarRoot",
-	  componentId: "crwndz-0"
+	  componentId: "sc-1bacl73-0"
 	})(["display:inline-block;vertical-align:middle;margin-right:1px;"]);
 	const RatingStar = _a => {
 	  var {
@@ -8814,19 +8791,19 @@
 	};
 	const RatingDetails = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "Rating__RatingDetails",
-	  componentId: "crwndz-1"
+	  componentId: "sc-1bacl73-1"
 	})(["padding-left:0.5em;font-size:12px;color:var(--grey100);&:before{content:\"(\";}&:after{content:\")\";}"]);
 	const RatingCount = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "Rating__RatingCount",
-	  componentId: "crwndz-2"
+	  componentId: "sc-1bacl73-2"
 	})([""]);
 	const RatingValue = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "Rating__RatingValue",
-	  componentId: "crwndz-3"
+	  componentId: "sc-1bacl73-3"
 	})(["display:none;"]);
 	const RatingRoot = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Rating__RatingRoot",
-	  componentId: "crwndz-4"
+	  componentId: "sc-1bacl73-4"
 	})(["display:flex;align-items:center;&:hover ", "{display:inline-block;}"], RatingValue);
 	const Rating = ({
 	  value: _value = 0,
@@ -8963,7 +8940,7 @@
 
 	const SidebarWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Sidebar__SidebarWrapper",
-	  componentId: "sc-1ouq5nf-0"
+	  componentId: "sc-1uyprzh-0"
 	})(["", ""], p => `${max$1.md} {
       z-index: 20;
       display: flex;
@@ -8983,7 +8960,7 @@
     }`);
 	const SidebarToggle = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "Sidebar__SidebarToggle",
-	  componentId: "sc-1ouq5nf-1"
+	  componentId: "sc-1uyprzh-1"
 	})(["z-index:21;position:fixed;right:var(--gutter-half);bottom:var(--gutter-half);", "{display:none;}path{stroke:currentColor;}"], min$1.md);
 	const Sidebar = ({
 	  children
@@ -9000,7 +8977,7 @@
 	      children: jsxRuntime.jsx(IconButtonFab, Object.assign({
 	        "$variant": "contained"
 	      }, {
-	        children: open ? jsxRuntime.jsx(CgCloseR.CgCloseR, {}) : jsxRuntime.jsx(GrFolderOpen.GrFolderOpen, {})
+	        children: open ? jsxRuntime.jsx(cg.CgCloseR, {}) : jsxRuntime.jsx(gr.GrFolderOpen, {})
 	      }))
 	    })), jsxRuntime.jsx(SidebarWrapper, Object.assign({
 	      "$open": open,
@@ -9013,8 +8990,8 @@
 
 	const Root$1 = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Spacing__Root",
-	  componentId: "sc-1va4yn4-0"
-	})(["", " ", ""], p => p.$top && p.theme.spacingTop(...p.$top), p => p.$bottom && p.theme.spacingBottom(...p.$bottom));
+	  componentId: "sc-12si043-0"
+	})(["", " ", ""], p => p.$top && spacingTop.call(p.theme, ...p.$top), p => p.$bottom && spacingBottom.call(p.theme, ...p.$bottom));
 
 	const extractDirectionArgs = raw => {
 	  const [size, factor, property, devices] = raw.split(":");
@@ -9086,7 +9063,7 @@
 
 	const TabsStyled = /*#__PURE__*/styled__default["default"](tabs.Tabs).withConfig({
 	  displayName: "Tabs__TabsStyled",
-	  componentId: "sc-6cl9w0-0"
+	  componentId: "sc-16y06a0-0"
 	})(["", "{display:flex;", "}"], min$1.sm, p => p.$vertical && "flex-direction: column;");
 	const Tabs = props => {
 	  return jsxRuntime.jsx(framerMotion.AnimateSharedLayout, {
@@ -9095,19 +9072,19 @@
 	};
 	const TabList = /*#__PURE__*/styled__default["default"](tabs.TabList).withConfig({
 	  displayName: "Tabs__TabList",
-	  componentId: "sc-6cl9w0-1"
+	  componentId: "sc-16y06a0-1"
 	})(["display:flex;flex-direction:column;", "{border-right:1px solid var(--grey800);}"], min$1.sm);
 	const TabWrap = /*#__PURE__*/styled__default["default"](tabs.Tab).withConfig({
 	  displayName: "Tabs__TabWrap",
-	  componentId: "sc-6cl9w0-2"
+	  componentId: "sc-16y06a0-2"
 	})(["", " position:relative;justify-content:flex-end;padding:0.7em;margin-bottom:1em;font-weight:bold;color:", ";", "{padding-right:var(--gutter-half);}&:hover{color:", ";}"], btnStyleReset, p => p.$active ? "var(--accent200)" : "var(--grey300)", min$1.sm, p => p.$active ? "var(--accent200)" : "var(--accent300)");
 	const TabText = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "Tabs__TabText",
-	  componentId: "sc-6cl9w0-3"
+	  componentId: "sc-16y06a0-3"
 	})(["position:relative;z-index:1;"]);
 	const TabUnderline = /*#__PURE__*/styled__default["default"](UnderlineSkewed).withConfig({
 	  displayName: "Tabs__TabUnderline",
-	  componentId: "sc-6cl9w0-4"
+	  componentId: "sc-16y06a0-4"
 	})([""]);
 	const Tab = _a => {
 	  var {
@@ -9133,16 +9110,16 @@
 	};
 	const TabPanels = /*#__PURE__*/styled__default["default"](tabs.TabPanels).withConfig({
 	  displayName: "Tabs__TabPanels",
-	  componentId: "sc-6cl9w0-5"
+	  componentId: "sc-16y06a0-5"
 	})(["flex:1;"]);
 	const TabPanel = /*#__PURE__*/styled__default["default"](tabs.TabPanel).withConfig({
 	  displayName: "Tabs__TabPanel",
-	  componentId: "sc-6cl9w0-6"
+	  componentId: "sc-16y06a0-6"
 	})(["", "{padding-left:var(--gutter-half);}"], min$1.sm);
 
 	const CopyPasteVisible = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "CopyPasteVisible",
-	  componentId: "sc-1o5i7oc-0"
+	  componentId: "sc-1r2c256-0"
 	})(["color:transparent;opacity:0;font-size:0;"]);
 
 	const p = `
@@ -9177,48 +9154,48 @@
 `;
 	const P = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Native__P",
-	  componentId: "sc-197h14l-0"
+	  componentId: "sc-1nx3nmy-0"
 	})(["", ""], p);
 	const H1 = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Native__H1",
-	  componentId: "sc-197h14l-1"
+	  componentId: "sc-1nx3nmy-1"
 	})(["", ""], h1);
 	const H2 = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Native__H2",
-	  componentId: "sc-197h14l-2"
+	  componentId: "sc-1nx3nmy-2"
 	})(["", ""], h2);
 	const H3 = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Native__H3",
-	  componentId: "sc-197h14l-3"
+	  componentId: "sc-1nx3nmy-3"
 	})(["", ""], h3);
 	const H4 = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Native__H4",
-	  componentId: "sc-197h14l-4"
+	  componentId: "sc-1nx3nmy-4"
 	})(["", ""], h4);
 
 	const Root = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "ReadMore__Root",
-	  componentId: "sc-1klncrk-0"
+	  componentId: "sc-wgc8of-0"
 	})([""]);
 	const Content = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "ReadMore__Content",
-	  componentId: "sc-1klncrk-1"
+	  componentId: "sc-wgc8of-1"
 	})(["& p:first-child{margin-top:0;}"]);
 	const BtnWrap = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "ReadMore__BtnWrap",
-	  componentId: "sc-1klncrk-2"
+	  componentId: "sc-wgc8of-2"
 	})(["display:flex;justify-content:flex-end;transition:transform 0.18s ease-in-out;text-align:right;transform:translateY(", ");opacity:", ";"], p => p.$expanded ? "0" : "-100%", p => p.$expanded ? 0 : 1);
 	const BtnFader = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "ReadMore__BtnFader",
-	  componentId: "sc-1klncrk-3"
+	  componentId: "sc-wgc8of-3"
 	})(["width:30%;transition:transform 0.18s ease-in-out;background:linear-gradient(45deg,transparent 50%,", " 70%);"], p => p.$bg);
 	const Btn = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "ReadMore__Btn",
-	  componentId: "sc-1klncrk-4"
+	  componentId: "sc-wgc8of-4"
 	})(["padding:0 10px 0 10px;line-height:", ";background:var(--bodyBg);color:var(--grey600);white-space:nowrap;font-size:", "px;cursor:pointer;"], p => p.$lineHeight ? p.$lineHeight : "inherit", p => p.$fontSize);
 	const BtnIcon = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "ReadMore__BtnIcon",
-	  componentId: "sc-1klncrk-5"
+	  componentId: "sc-wgc8of-5"
 	})(["display:inline-block;margin:0 0 0 4px;transition:transform 0.18s ease-in-out;", ";font-size:", "px;"], p => p.$expanded ? "transform: rotate(180deg);" : "", p => p.$fontSize);
 	const ReadMore = _a => {
 	  var {