@koine/react 1.0.2 → 1.0.5

package/index.esm.js

@@ -1108,11 +1108,11 @@ function __awaiter(thisArg, _arguments, P, generator) {
 
 const AlertRoot = /*#__PURE__*/styled.div.withConfig({
   displayName: "Alert__AlertRoot",
-  componentId: "lcej9m-0"
+  componentId: "sc-lcej9m-0"
 })(["font-size:12px;", ""], p => p.$danger ? `color: var(--danger)` : "");
 const AlertInner = /*#__PURE__*/styled.div.withConfig({
   displayName: "Alert__AlertInner",
-  componentId: "lcej9m-1"
+  componentId: "sc-lcej9m-1"
 })(["padding:1em;background-color:rgba(0,0,0,0.05);"]);
 const Alert = _a => {
   var {
@@ -1963,7 +1963,7 @@ const ProgressLinear = _a => {
 
 const InputInvisible = /*#__PURE__*/styled.input.withConfig({
   displayName: "styles__InputInvisible",
-  componentId: "a7tlb4-0"
+  componentId: "sc-a7tlb4-0"
 })(["", ""], invisible);
 const InputHoneypot = /*#__PURE__*/styled(InputInvisible).attrs({
   type: "text",
@@ -1971,14 +1971,14 @@ const InputHoneypot = /*#__PURE__*/styled(InputInvisible).attrs({
   tabIndex: -1
 }).withConfig({
   displayName: "styles__InputHoneypot",
-  componentId: "a7tlb4-1"
+  componentId: "sc-a7tlb4-1"
 })([""]);
 const InputProgress = /*#__PURE__*/styled(p => jsx(ProgressLinear, Object.assign({
   fg: "var(--accent300)",
   bg: "var(--accent400)"
 }, p))).withConfig({
   displayName: "styles__InputProgress",
-  componentId: "a7tlb4-2"
+  componentId: "sc-a7tlb4-2"
 })(["position:absolute;bottom:0;left:0;width:100%;"]);
 /**
  * Remove the default light blue background on autofilled inputs. To be used as
@@ -2085,7 +2085,7 @@ const SelectArrow = /*#__PURE__*/forwardRef(function SelectArrow(_a, ref) {
 
 const Menu = /*#__PURE__*/styled.ul.withConfig({
   displayName: "Menu",
-  componentId: "v1thyt-0"
+  componentId: "sc-v1thyt-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.li.withConfig({
@@ -2110,27 +2110,27 @@ const KoineButton = /*#__PURE__*/styled.button.withConfig({
 
 const Root$a = /*#__PURE__*/styled.span.withConfig({
   displayName: "ButtonComposite__Root",
-  componentId: "mrn633-0"
+  componentId: "sc-mrn633-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.svg.withConfig({
   displayName: "ButtonComposite__ButtonCompositeIcon",
-  componentId: "mrn633-1"
+  componentId: "sc-mrn633-1"
 })(["float:left;"]);
 const BesidesIcon = /*#__PURE__*/styled.span.withConfig({
   displayName: "ButtonComposite__BesidesIcon",
-  componentId: "mrn633-2"
+  componentId: "sc-mrn633-2"
 })(["text-align:left;line-height:1.2;"]);
 const Main = /*#__PURE__*/styled.span.withConfig({
   displayName: "ButtonComposite__Main",
-  componentId: "mrn633-3"
+  componentId: "sc-mrn633-3"
 })(["display:block;font-size:0.9em;&:last-child{margin-top:", ";}"], p => p.$reverse && !p.$icon ? "0.5em" : "0");
 const Sub = /*#__PURE__*/styled.span.withConfig({
   displayName: "ButtonComposite__Sub",
-  componentId: "mrn633-4"
+  componentId: "sc-mrn633-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.span.withConfig({
   displayName: "ButtonComposite__Text",
-  componentId: "mrn633-5"
+  componentId: "sc-mrn633-5"
 })([""]);
 const Inner$2 = /*#__PURE__*/memo(({
   textMain,
@@ -2348,7 +2348,7 @@ $$8({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_RE
 
 const Root$9 = /*#__PURE__*/styled(KoineButton).withConfig({
   displayName: "ButtonLink__Root",
-  componentId: "lp3x1u-0"
+  componentId: "sc-lp3x1u-0"
 })(["text-decoration:none;"]); // export const KoineButtonLink: FC<ButtonLinkProps> = ({ Koine, ...props }) => {
 //   return <Root {...props} as={Koine.Link} />;
 // }
@@ -2675,8 +2675,6 @@ const BodyMain = /*#__PURE__*/styled.main.withConfig({
   componentId: "sc-1308qu1-1"
 })(["flex:1;"]);
 
-let _$1 = t => t,
-    _t$1;
 /**
  * App global style
  *
@@ -2726,7 +2724,7 @@ const stylesGlobal = `
     -webkit-tap-highlight-color: transparent;
   }
 `;
-const StylesGlobal = /*#__PURE__*/createGlobalStyle(_t$1 || (_t$1 = _$1`${0}`), stylesGlobal);
+const StylesGlobal = /*#__PURE__*/createGlobalStyle(["", ""], stylesGlobal);
 
 var anObject$b = anObject$h;
 
@@ -4136,11 +4134,11 @@ const Hidden = /*#__PURE__*/styled.div.withConfig({
 
 const BgPhotoWrap = /*#__PURE__*/styled(Hidden).withConfig({
   displayName: "BgPhoto__BgPhotoWrap",
-  componentId: "rpv8r9-0"
+  componentId: "sc-rpv8r9-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(Container).withConfig({
   displayName: "BgPhoto__BgPhotoMask",
-  componentId: "rpv8r9-1"
+  componentId: "sc-rpv8r9-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)`;
@@ -4168,7 +4166,7 @@ const BgPhoto = ({
 
 const Root$8 = /*#__PURE__*/styled.svg.withConfig({
   displayName: "BgSvg__Root",
-  componentId: "qvklmn-0"
+  componentId: "sc-qvklmn-0"
 })(["position:fixed;z-index:-2;bottom:0;transform:rotate(180deg);opacity:0.9;"]);
 /**
  * Centered triangle shape
@@ -6901,19 +6899,19 @@ const CollapsableHeadRoot = /*#__PURE__*/styled(m.label).attrs(props => ({
   htmlFor: `${props.id}-input`
 })).withConfig({
   displayName: "Collapsable__CollapsableHeadRoot",
-  componentId: "e584ub-0"
+  componentId: "sc-e584ub-0"
 })(["", " width:100%;padding:0;text-align:left;display:flex;justify-content:space-between;align-items:center;cursor:pointer;"], btnStyleReset);
 const CollapsableHeadSpace = /*#__PURE__*/styled.div.withConfig({
   displayName: "Collapsable__CollapsableHeadSpace",
-  componentId: "e584ub-1"
+  componentId: "sc-e584ub-1"
 })(["flex:1;padding-left:20px;"]);
 const CollapsableHeadAction = /*#__PURE__*/styled.div.withConfig({
   displayName: "Collapsable__CollapsableHeadAction",
-  componentId: "e584ub-2"
+  componentId: "sc-e584ub-2"
 })(["padding-left:20px;"]);
 const CollaspableHeadLine = /*#__PURE__*/styled(m.div).withConfig({
   displayName: "Collapsable__CollaspableHeadLine",
-  componentId: "e584ub-3"
+  componentId: "sc-e584ub-3"
 })(["width:0%;height:1px;background:#bbb;"]);
 const collapsableHeadLineMotion = {
   hover: {
@@ -6925,11 +6923,11 @@ const collapsableHeadLineMotion = {
 };
 const CollapsableHeadText = /*#__PURE__*/styled.div.withConfig({
   displayName: "Collapsable__CollapsableHeadText",
-  componentId: "e584ub-4"
+  componentId: "sc-e584ub-4"
 })([""]);
 const CollapsableHeadIcon = /*#__PURE__*/styled(m.div).withConfig({
   displayName: "Collapsable__CollapsableHeadIcon",
-  componentId: "e584ub-5"
+  componentId: "sc-e584ub-5"
 })([""]);
 const CollapsableHead = ({
   $expanded,
@@ -6972,15 +6970,15 @@ const CollapsableInput = /*#__PURE__*/styled(InputInvisible).attrs({
   type: "checkbox"
 }).withConfig({
   displayName: "Collapsable__CollapsableInput",
-  componentId: "e584ub-6"
+  componentId: "sc-e584ub-6"
 })([""]);
 const CollasableBodyWrap = /*#__PURE__*/styled(DisclosurePanel).withConfig({
   displayName: "Collapsable__CollasableBodyWrap",
-  componentId: "e584ub-7"
+  componentId: "sc-e584ub-7"
 })(["&[hidden]{display:block;}"]);
 const CollapsableBodyRoot = /*#__PURE__*/styled(m.div).withConfig({
   displayName: "Collapsable__CollapsableBodyRoot",
-  componentId: "e584ub-8"
+  componentId: "sc-e584ub-8"
 })([".no-js &{transition:margin-top 0.2s ease;}.no-js ", ":checked + ", " &{margin-top:0 !important;opacity:1 !important;}"], CollapsableInput, CollasableBodyWrap);
 const CollapsableBody = /*#__PURE__*/forwardRef(function CollapsableBody(props, ref) {
   return jsx(CollapsableBodyRoot, Object.assign({
@@ -7084,7 +7082,7 @@ const Collapsable = _a => {
 
 const Root$6 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Debug__Root",
-  componentId: "a3cz4-0"
+  componentId: "sc-a3cz4-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
@@ -7574,19 +7572,19 @@ function useToggle(props, ref) {
 
 const CheckboxRoot = /*#__PURE__*/styled.label.withConfig({
   displayName: "Checkbox__CheckboxRoot",
-  componentId: "zwkhrm-0"
+  componentId: "sc-zwkhrm-0"
 })(["display:flex;align-items:center;cursor:pointer;"]);
 const CheckboxToggle = /*#__PURE__*/styled(Toggle).withConfig({
   displayName: "Checkbox__CheckboxToggle",
-  componentId: "zwkhrm-1"
+  componentId: "sc-zwkhrm-1"
 })(["pointer-events:none;"]);
 const CheckboxIndicator = /*#__PURE__*/styled(ToggleIndicatorSquared).withConfig({
   displayName: "Checkbox__CheckboxIndicator",
-  componentId: "zwkhrm-2"
+  componentId: "sc-zwkhrm-2"
 })([""]);
 const CheckboxLabel = /*#__PURE__*/styled(ToggleLabel).withConfig({
   displayName: "Checkbox__CheckboxLabel",
-  componentId: "zwkhrm-3"
+  componentId: "sc-zwkhrm-3"
 })(["font-size:0.8em;"]);
 /**
  * All logic and invisible Inputs come from the `useToggle` hook
@@ -7609,7 +7607,7 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
 
 const Root$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Feedback__Root",
-  componentId: "ibaaij-0"
+  componentId: "sc-ibaaij-0"
 })(["margin-top:0.2em;font-size:12px;", ""], p => p.$danger ? `color: var(--danger);` : "");
 const Feedback = ({
   $danger,
@@ -7803,11 +7801,11 @@ const animationRotation = /*#__PURE__*/keyframes(["0%{transform:rotate(0deg);}10
 const animationCircle = /*#__PURE__*/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.svg.withConfig({
   displayName: "ProgressCircular__ProgressCircularSvg",
-  componentId: "hfo1yr-0"
+  componentId: "sc-hfo1yr-0"
 })(["animation:", " 1.5s linear infinite;"], animationRotation);
 const ProgressCircularCircle = /*#__PURE__*/styled.circle.withConfig({
   displayName: "ProgressCircular__ProgressCircularCircle",
-  componentId: "hfo1yr-1"
+  componentId: "sc-hfo1yr-1"
 })(["animation:", " 1.5s linear infinite;"], animationCircle);
 /**
  * @see https://mui.com/components/progress/
@@ -7869,11 +7867,11 @@ const useHeader = () => {
 
 const ProgressOverlayWrap = /*#__PURE__*/styled(m.div).withConfig({
   displayName: "ProgressOverlay__ProgressOverlayWrap",
-  componentId: "umgj5t-0"
+  componentId: "sc-umgj5t-0"
 })(["z-index:10000;position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;cursor:wait;"]);
 const ProgressOverlayCenterer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressOverlay__ProgressOverlayCenterer",
-  componentId: "umgj5t-1"
+  componentId: "sc-umgj5t-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
@@ -8042,27 +8040,27 @@ const Password = /*#__PURE__*/forwardRef(function Password(_a, ref) {
 
 const RadioRoot = /*#__PURE__*/styled.div.withConfig({
   displayName: "Radio__RadioRoot",
-  componentId: "gv6b7r-0"
+  componentId: "sc-gv6b7r-0"
 })([""]);
 const RadioLabel = /*#__PURE__*/styled.div.withConfig({
   displayName: "Radio__RadioLabel",
-  componentId: "gv6b7r-1"
+  componentId: "sc-gv6b7r-1"
 })(["", ""], label);
 const RadioOptionRoot = /*#__PURE__*/styled.label.withConfig({
   displayName: "Radio__RadioOptionRoot",
-  componentId: "gv6b7r-2"
+  componentId: "sc-gv6b7r-2"
 })(["display:flex;align-items:center;padding:0.05em;cursor:pointer;"]);
 const RadioToggle = /*#__PURE__*/styled(Toggle).withConfig({
   displayName: "Radio__RadioToggle",
-  componentId: "gv6b7r-3"
+  componentId: "sc-gv6b7r-3"
 })([""]);
 const RadioIndicator = /*#__PURE__*/styled(ToggleIndicatorSquared).withConfig({
   displayName: "Radio__RadioIndicator",
-  componentId: "gv6b7r-4"
+  componentId: "sc-gv6b7r-4"
 })([""]);
 const RadioOptionLabel = /*#__PURE__*/styled(ToggleLabel).withConfig({
   displayName: "Radio__RadioOptionLabel",
-  componentId: "gv6b7r-5"
+  componentId: "sc-gv6b7r-5"
 })([""]);
 const RadioOption = /*#__PURE__*/forwardRef(function RadioOption(_a, ref) {
   var {
@@ -8108,11 +8106,11 @@ const SWITCH_GUTTER = 0.25;
 const SWITCH_HANDLE_SIZE = 1;
 const SwitchTrack = /*#__PURE__*/styled.span.withConfig({
   displayName: "Switch__SwitchTrack",
-  componentId: "dstl69-0"
+  componentId: "sc-dstl69-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.span.withConfig({
   displayName: "Switch__SwitchHandle",
-  componentId: "dstl69-1"
+  componentId: "sc-dstl69-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
@@ -8135,7 +8133,7 @@ const Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
 
 const TextareaNative = /*#__PURE__*/styled.textarea.withConfig({
   displayName: "Textarea__TextareaNative",
-  componentId: "xvks9s-0"
+  componentId: "sc-xvks9s-0"
 })(["", " ", " resize:vertical;"], inputBase, inputFocus);
 const Textarea = /*#__PURE__*/forwardRef(function Textarea(_a, ref) {
   var {
@@ -8155,33 +8153,19 @@ const Textarea = /*#__PURE__*/forwardRef(function Textarea(_a, ref) {
   });
 });
 
-let _ = t => t,
-    _t;
 const EditorRoot = /*#__PURE__*/styled.div.withConfig({
   displayName: "components__EditorRoot",
-  componentId: "yit760-0"
+  componentId: "sc-yit760-0"
 })(["", " ", ""], inputBorder, inputFocus);
 const EditorBarRoot = /*#__PURE__*/styled.div.withConfig({
   displayName: "components__EditorBarRoot",
-  componentId: "yit760-1"
+  componentId: "sc-yit760-1"
 })(["display:flex;justify-content:flex-end;border-bottom:1px solid rgba(0,0,0,0.1);"]);
 const EditorBarBtn = /*#__PURE__*/styled(IconButton).withConfig({
   displayName: "components__EditorBarBtn",
-  componentId: "yit760-2"
+  componentId: "sc-yit760-2"
 })([""]);
-const EditorGlobalStyles = /*#__PURE__*/createGlobalStyle(_t || (_t = _`
-  .ProseMirror {
-    ${0}
-    
-    &:focus {
-      outline:none;
-    }
-
-    > *:first-child {
-      margin-top: 0;
-    }
-  }
-`), inputPadding);
+const EditorGlobalStyles = /*#__PURE__*/createGlobalStyle([".ProseMirror{", " &:focus{outline:none;}> *:first-child{margin-top:0;}}"], inputPadding);
 
 const EditorBar = ({
   editor
@@ -8231,7 +8215,7 @@ const Editor = _a => {
 
 const Root$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TextareaRich__Root",
-  componentId: "viqw1n-0"
+  componentId: "sc-viqw1n-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__*/forwardRef(function TextareaRich(_a, ref) {
   var {
@@ -8600,7 +8584,7 @@ const NoJs = _props => {
 
 const Root$3 = /*#__PURE__*/styled.nav.withConfig({
   displayName: "PaginationNav__Root",
-  componentId: "ydvvbf-0"
+  componentId: "sc-ydvvbf-0"
 })(["display:flex;align-items:center;justify-content:center;padding:20px 0 40px;font-weight:600;& a{text-decoration:none;}"]);
 const item = `
   display: block;
@@ -8608,24 +8592,24 @@ const item = `
 `;
 const ItemCurrent = /*#__PURE__*/styled.span.withConfig({
   displayName: "PaginationNav__ItemCurrent",
-  componentId: "ydvvbf-1"
+  componentId: "sc-ydvvbf-1"
 })(["", " background:var(--accent400);border-radius:2px;"], item);
 const ItemLink = /*#__PURE__*/styled.a.withConfig({
   displayName: "PaginationNav__ItemLink",
-  componentId: "ydvvbf-2"
+  componentId: "sc-ydvvbf-2"
 })(["", " ", ""], item, props => props.prev ? "color: var(--grey100);" : "");
 const DotsSeparator = /*#__PURE__*/styled.span.withConfig({
   displayName: "PaginationNav__DotsSeparator",
-  componentId: "ydvvbf-3"
+  componentId: "sc-ydvvbf-3"
 })(["color:var(--grey100);"]);
 const arrow = `display: flex; font-size: 20px;`;
 const ItemPrev = /*#__PURE__*/styled.a.withConfig({
   displayName: "PaginationNav__ItemPrev",
-  componentId: "ydvvbf-4"
+  componentId: "sc-ydvvbf-4"
 })(["", ""], arrow);
 const ItemNext = /*#__PURE__*/styled.a.withConfig({
   displayName: "PaginationNav__ItemNext",
-  componentId: "ydvvbf-5"
+  componentId: "sc-ydvvbf-5"
 })(["", ""], arrow);
 /*
  * Possible outcomes:
@@ -8729,11 +8713,11 @@ const KoinePaginationNav = ({
 
 const Root$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaginationResults__Root",
-  componentId: "sg84c7-0"
+  componentId: "sc-sg84c7-0"
 })([""]);
 const Inner = /*#__PURE__*/styled(m.div).withConfig({
   displayName: "PaginationResults__Inner",
-  componentId: "sg84c7-1"
+  componentId: "sc-sg84c7-1"
 })([""]);
 const PaginationResults = ({
   children
@@ -8769,24 +8753,24 @@ const PaginationResults = ({
 
 const Pill = /*#__PURE__*/styled.div.withConfig({
   displayName: "Pill",
-  componentId: "lqlli5-0"
+  componentId: "sc-lqlli5-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(Pill).withConfig({
   displayName: "Pill__PillGreyLight",
-  componentId: "lqlli5-1"
+  componentId: "sc-lqlli5-1"
 })(["background:var(--grey800);color:var(--grey100);&:hover{color:white;background:var(--grey300);}"]);
 const PillAccentLight = /*#__PURE__*/styled(Pill).withConfig({
   displayName: "Pill__PillAccentLight",
-  componentId: "lqlli5-2"
+  componentId: "sc-lqlli5-2"
 })(["background:var(--accent400);color:var(--grey100);&:hover{color:#fff;background:var(--accent300);}"]);
 const PillAccentLightOutlined = /*#__PURE__*/styled(Pill).withConfig({
   displayName: "Pill__PillAccentLightOutlined",
-  componentId: "lqlli5-3"
+  componentId: "sc-lqlli5-3"
 })(["border:1px solid var(--accent300);color:var(--accent200);&:hover{color:#fff;background:var(--accent300);}"]);
 
 const RatingStarRoot = /*#__PURE__*/styled.svg.withConfig({
   displayName: "Rating__RatingStarRoot",
-  componentId: "crwndz-0"
+  componentId: "sc-crwndz-0"
 })(["display:inline-block;vertical-align:middle;margin-right:1px;"]);
 const RatingStar = _a => {
   var {
@@ -8833,19 +8817,19 @@ const RatingStar = _a => {
 };
 const RatingDetails = /*#__PURE__*/styled.span.withConfig({
   displayName: "Rating__RatingDetails",
-  componentId: "crwndz-1"
+  componentId: "sc-crwndz-1"
 })(["padding-left:0.5em;font-size:12px;color:var(--grey100);&:before{content:\"(\";}&:after{content:\")\";}"]);
 const RatingCount = /*#__PURE__*/styled.span.withConfig({
   displayName: "Rating__RatingCount",
-  componentId: "crwndz-2"
+  componentId: "sc-crwndz-2"
 })([""]);
 const RatingValue = /*#__PURE__*/styled.span.withConfig({
   displayName: "Rating__RatingValue",
-  componentId: "crwndz-3"
+  componentId: "sc-crwndz-3"
 })(["display:none;"]);
 const RatingRoot = /*#__PURE__*/styled.div.withConfig({
   displayName: "Rating__RatingRoot",
-  componentId: "crwndz-4"
+  componentId: "sc-crwndz-4"
 })(["display:flex;align-items:center;&:hover ", "{display:inline-block;}"], RatingValue);
 const Rating = ({
   value: _value = 0,

package/index.umd.js

@@ -1089,11 +1089,11 @@
 
 	const AlertRoot = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Alert__AlertRoot",
-	  componentId: "lcej9m-0"
+	  componentId: "sc-lcej9m-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-lcej9m-1"
 	})(["padding:1em;background-color:rgba(0,0,0,0.05);"]);
 	const Alert = _a => {
 	  var {
@@ -1944,7 +1944,7 @@
 
 	const InputInvisible = /*#__PURE__*/styled__default["default"].input.withConfig({
 	  displayName: "styles__InputInvisible",
-	  componentId: "a7tlb4-0"
+	  componentId: "sc-a7tlb4-0"
 	})(["", ""], invisible);
 	const InputHoneypot = /*#__PURE__*/styled__default["default"](InputInvisible).attrs({
 	  type: "text",
@@ -1952,14 +1952,14 @@
 	  tabIndex: -1
 	}).withConfig({
 	  displayName: "styles__InputHoneypot",
-	  componentId: "a7tlb4-1"
+	  componentId: "sc-a7tlb4-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-a7tlb4-2"
 	})(["position:absolute;bottom:0;left:0;width:100%;"]);
 	/**
 	 * Remove the default light blue background on autofilled inputs. To be used as
@@ -2066,7 +2066,7 @@
 
 	const Menu = /*#__PURE__*/styled__default["default"].ul.withConfig({
 	  displayName: "Menu",
-	  componentId: "v1thyt-0"
+	  componentId: "sc-v1thyt-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({
@@ -2091,27 +2091,27 @@
 
 	const Root$a = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "ButtonComposite__Root",
-	  componentId: "mrn633-0"
+	  componentId: "sc-mrn633-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-mrn633-1"
 	})(["float:left;"]);
 	const BesidesIcon = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "ButtonComposite__BesidesIcon",
-	  componentId: "mrn633-2"
+	  componentId: "sc-mrn633-2"
 	})(["text-align:left;line-height:1.2;"]);
 	const Main = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "ButtonComposite__Main",
-	  componentId: "mrn633-3"
+	  componentId: "sc-mrn633-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-mrn633-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-mrn633-5"
 	})([""]);
 	const Inner$2 = /*#__PURE__*/react.memo(({
 	  textMain,
@@ -2329,7 +2329,7 @@
 
 	const Root$9 = /*#__PURE__*/styled__default["default"](KoineButton).withConfig({
 	  displayName: "ButtonLink__Root",
-	  componentId: "lp3x1u-0"
+	  componentId: "sc-lp3x1u-0"
 	})(["text-decoration:none;"]); // export const KoineButtonLink: FC<ButtonLinkProps> = ({ Koine, ...props }) => {
 	//   return <Root {...props} as={Koine.Link} />;
 	// }
@@ -2656,8 +2656,6 @@
 	  componentId: "sc-1308qu1-1"
 	})(["flex:1;"]);
 
-	let _$1 = t => t,
-	    _t$1;
 	/**
 	 * App global style
 	 *
@@ -2707,7 +2705,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;
 
@@ -4117,11 +4115,11 @@
 
 	const BgPhotoWrap = /*#__PURE__*/styled__default["default"](Hidden).withConfig({
 	  displayName: "BgPhoto__BgPhotoWrap",
-	  componentId: "rpv8r9-0"
+	  componentId: "sc-rpv8r9-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-rpv8r9-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 +4147,7 @@
 
 	const Root$8 = /*#__PURE__*/styled__default["default"].svg.withConfig({
 	  displayName: "BgSvg__Root",
-	  componentId: "qvklmn-0"
+	  componentId: "sc-qvklmn-0"
 	})(["position:fixed;z-index:-2;bottom:0;transform:rotate(180deg);opacity:0.9;"]);
 	/**
 	 * Centered triangle shape
@@ -6882,19 +6880,19 @@
 	  htmlFor: `${props.id}-input`
 	})).withConfig({
 	  displayName: "Collapsable__CollapsableHeadRoot",
-	  componentId: "e584ub-0"
+	  componentId: "sc-e584ub-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-e584ub-1"
 	})(["flex:1;padding-left:20px;"]);
 	const CollapsableHeadAction = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Collapsable__CollapsableHeadAction",
-	  componentId: "e584ub-2"
+	  componentId: "sc-e584ub-2"
 	})(["padding-left:20px;"]);
 	const CollaspableHeadLine = /*#__PURE__*/styled__default["default"](framerMotion.m.div).withConfig({
 	  displayName: "Collapsable__CollaspableHeadLine",
-	  componentId: "e584ub-3"
+	  componentId: "sc-e584ub-3"
 	})(["width:0%;height:1px;background:#bbb;"]);
 	const collapsableHeadLineMotion = {
 	  hover: {
@@ -6906,11 +6904,11 @@
 	};
 	const CollapsableHeadText = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Collapsable__CollapsableHeadText",
-	  componentId: "e584ub-4"
+	  componentId: "sc-e584ub-4"
 	})([""]);
 	const CollapsableHeadIcon = /*#__PURE__*/styled__default["default"](framerMotion.m.div).withConfig({
 	  displayName: "Collapsable__CollapsableHeadIcon",
-	  componentId: "e584ub-5"
+	  componentId: "sc-e584ub-5"
 	})([""]);
 	const CollapsableHead = ({
 	  $expanded,
@@ -6953,15 +6951,15 @@
 	  type: "checkbox"
 	}).withConfig({
 	  displayName: "Collapsable__CollapsableInput",
-	  componentId: "e584ub-6"
+	  componentId: "sc-e584ub-6"
 	})([""]);
 	const CollasableBodyWrap = /*#__PURE__*/styled__default["default"](disclosure.DisclosurePanel).withConfig({
 	  displayName: "Collapsable__CollasableBodyWrap",
-	  componentId: "e584ub-7"
+	  componentId: "sc-e584ub-7"
 	})(["&[hidden]{display:block;}"]);
 	const CollapsableBodyRoot = /*#__PURE__*/styled__default["default"](framerMotion.m.div).withConfig({
 	  displayName: "Collapsable__CollapsableBodyRoot",
-	  componentId: "e584ub-8"
+	  componentId: "sc-e584ub-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 +7063,7 @@
 
 	const Root$6 = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Debug__Root",
-	  componentId: "a3cz4-0"
+	  componentId: "sc-a3cz4-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
@@ -7555,19 +7553,19 @@
 
 	const CheckboxRoot = /*#__PURE__*/styled__default["default"].label.withConfig({
 	  displayName: "Checkbox__CheckboxRoot",
-	  componentId: "zwkhrm-0"
+	  componentId: "sc-zwkhrm-0"
 	})(["display:flex;align-items:center;cursor:pointer;"]);
 	const CheckboxToggle = /*#__PURE__*/styled__default["default"](Toggle).withConfig({
 	  displayName: "Checkbox__CheckboxToggle",
-	  componentId: "zwkhrm-1"
+	  componentId: "sc-zwkhrm-1"
 	})(["pointer-events:none;"]);
 	const CheckboxIndicator = /*#__PURE__*/styled__default["default"](ToggleIndicatorSquared).withConfig({
 	  displayName: "Checkbox__CheckboxIndicator",
-	  componentId: "zwkhrm-2"
+	  componentId: "sc-zwkhrm-2"
 	})([""]);
 	const CheckboxLabel = /*#__PURE__*/styled__default["default"](ToggleLabel).withConfig({
 	  displayName: "Checkbox__CheckboxLabel",
-	  componentId: "zwkhrm-3"
+	  componentId: "sc-zwkhrm-3"
 	})(["font-size:0.8em;"]);
 	/**
 	 * All logic and invisible Inputs come from the `useToggle` hook
@@ -7590,7 +7588,7 @@
 
 	const Root$5 = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Feedback__Root",
-	  componentId: "ibaaij-0"
+	  componentId: "sc-ibaaij-0"
 	})(["margin-top:0.2em;font-size:12px;", ""], p => p.$danger ? `color: var(--danger);` : "");
 	const Feedback = ({
 	  $danger,
@@ -7784,11 +7782,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-hfo1yr-0"
 	})(["animation:", " 1.5s linear infinite;"], animationRotation);
 	const ProgressCircularCircle = /*#__PURE__*/styled__default["default"].circle.withConfig({
 	  displayName: "ProgressCircular__ProgressCircularCircle",
-	  componentId: "hfo1yr-1"
+	  componentId: "sc-hfo1yr-1"
 	})(["animation:", " 1.5s linear infinite;"], animationCircle);
 	/**
 	 * @see https://mui.com/components/progress/
@@ -7850,11 +7848,11 @@
 
 	const ProgressOverlayWrap = /*#__PURE__*/styled__default["default"](framerMotion.m.div).withConfig({
 	  displayName: "ProgressOverlay__ProgressOverlayWrap",
-	  componentId: "umgj5t-0"
+	  componentId: "sc-umgj5t-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-umgj5t-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
@@ -8023,27 +8021,27 @@
 
 	const RadioRoot = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Radio__RadioRoot",
-	  componentId: "gv6b7r-0"
+	  componentId: "sc-gv6b7r-0"
 	})([""]);
 	const RadioLabel = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Radio__RadioLabel",
-	  componentId: "gv6b7r-1"
+	  componentId: "sc-gv6b7r-1"
 	})(["", ""], label);
 	const RadioOptionRoot = /*#__PURE__*/styled__default["default"].label.withConfig({
 	  displayName: "Radio__RadioOptionRoot",
-	  componentId: "gv6b7r-2"
+	  componentId: "sc-gv6b7r-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-gv6b7r-3"
 	})([""]);
 	const RadioIndicator = /*#__PURE__*/styled__default["default"](ToggleIndicatorSquared).withConfig({
 	  displayName: "Radio__RadioIndicator",
-	  componentId: "gv6b7r-4"
+	  componentId: "sc-gv6b7r-4"
 	})([""]);
 	const RadioOptionLabel = /*#__PURE__*/styled__default["default"](ToggleLabel).withConfig({
 	  displayName: "Radio__RadioOptionLabel",
-	  componentId: "gv6b7r-5"
+	  componentId: "sc-gv6b7r-5"
 	})([""]);
 	const RadioOption = /*#__PURE__*/react.forwardRef(function RadioOption(_a, ref) {
 	  var {
@@ -8089,11 +8087,11 @@
 	const SWITCH_HANDLE_SIZE = 1;
 	const SwitchTrack = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "Switch__SwitchTrack",
-	  componentId: "dstl69-0"
+	  componentId: "sc-dstl69-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-dstl69-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 +8114,7 @@
 
 	const TextareaNative = /*#__PURE__*/styled__default["default"].textarea.withConfig({
 	  displayName: "Textarea__TextareaNative",
-	  componentId: "xvks9s-0"
+	  componentId: "sc-xvks9s-0"
 	})(["", " ", " resize:vertical;"], inputBase, inputFocus);
 	const Textarea = /*#__PURE__*/react.forwardRef(function Textarea(_a, ref) {
 	  var {
@@ -8136,33 +8134,19 @@
 	  });
 	});
 
-	let _ = t => t,
-	    _t;
 	const EditorRoot = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "components__EditorRoot",
-	  componentId: "yit760-0"
+	  componentId: "sc-yit760-0"
 	})(["", " ", ""], inputBorder, inputFocus);
 	const EditorBarRoot = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "components__EditorBarRoot",
-	  componentId: "yit760-1"
+	  componentId: "sc-yit760-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-yit760-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
@@ -8212,7 +8196,7 @@
 
 	const Root$4 = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "TextareaRich__Root",
-	  componentId: "viqw1n-0"
+	  componentId: "sc-viqw1n-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 {
@@ -8581,7 +8565,7 @@
 
 	const Root$3 = /*#__PURE__*/styled__default["default"].nav.withConfig({
 	  displayName: "PaginationNav__Root",
-	  componentId: "ydvvbf-0"
+	  componentId: "sc-ydvvbf-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 +8573,24 @@
 `;
 	const ItemCurrent = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "PaginationNav__ItemCurrent",
-	  componentId: "ydvvbf-1"
+	  componentId: "sc-ydvvbf-1"
 	})(["", " background:var(--accent400);border-radius:2px;"], item);
 	const ItemLink = /*#__PURE__*/styled__default["default"].a.withConfig({
 	  displayName: "PaginationNav__ItemLink",
-	  componentId: "ydvvbf-2"
+	  componentId: "sc-ydvvbf-2"
 	})(["", " ", ""], item, props => props.prev ? "color: var(--grey100);" : "");
 	const DotsSeparator = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "PaginationNav__DotsSeparator",
-	  componentId: "ydvvbf-3"
+	  componentId: "sc-ydvvbf-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-ydvvbf-4"
 	})(["", ""], arrow);
 	const ItemNext = /*#__PURE__*/styled__default["default"].a.withConfig({
 	  displayName: "PaginationNav__ItemNext",
-	  componentId: "ydvvbf-5"
+	  componentId: "sc-ydvvbf-5"
 	})(["", ""], arrow);
 	/*
 	 * Possible outcomes:
@@ -8710,11 +8694,11 @@
 
 	const Root$2 = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "PaginationResults__Root",
-	  componentId: "sg84c7-0"
+	  componentId: "sc-sg84c7-0"
 	})([""]);
 	const Inner = /*#__PURE__*/styled__default["default"](framerMotion.m.div).withConfig({
 	  displayName: "PaginationResults__Inner",
-	  componentId: "sg84c7-1"
+	  componentId: "sc-sg84c7-1"
 	})([""]);
 	const PaginationResults = ({
 	  children
@@ -8750,24 +8734,24 @@
 
 	const Pill = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Pill",
-	  componentId: "lqlli5-0"
+	  componentId: "sc-lqlli5-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-lqlli5-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-lqlli5-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-lqlli5-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-crwndz-0"
 	})(["display:inline-block;vertical-align:middle;margin-right:1px;"]);
 	const RatingStar = _a => {
 	  var {
@@ -8814,19 +8798,19 @@
 	};
 	const RatingDetails = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "Rating__RatingDetails",
-	  componentId: "crwndz-1"
+	  componentId: "sc-crwndz-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-crwndz-2"
 	})([""]);
 	const RatingValue = /*#__PURE__*/styled__default["default"].span.withConfig({
 	  displayName: "Rating__RatingValue",
-	  componentId: "crwndz-3"
+	  componentId: "sc-crwndz-3"
 	})(["display:none;"]);
 	const RatingRoot = /*#__PURE__*/styled__default["default"].div.withConfig({
 	  displayName: "Rating__RatingRoot",
-	  componentId: "crwndz-4"
+	  componentId: "sc-crwndz-4"
 	})(["display:flex;align-items:center;&:hover ", "{display:inline-block;}"], RatingValue);
 	const Rating = ({
 	  value: _value = 0,

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@koine/react",
   "sideEffects": false,
-  "version": "1.0.2",
+  "version": "1.0.5",
   "main": "./index.umd.js",
   "module": "./index.esm.js",
   "typings": "./index.d.ts",
   "dependencies": {
     "styled-components": "^5.3.5",
     "framer-motion": "^6.2.9",
-    "react": "^17.0.2",
+    "react": ">=17.0.2",
     "@mui/base": "^5.0.0-alpha.75",
-    "@koine/utils": "1.0.2",
+    "@koine/utils": "1.0.5",
     "@react-icons/all-files": "^4.1.0",
     "date-fns": "^2.28.0",
     "react-swipeable": "^6.2.1",