@koine/react 1.0.9 → 1.0.12

package/Forms/Password/Password.js

@@ -1,30 +1,17 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
 import styled from "styled-components";
 import { ImEye as IconVisible, ImEyeBlocked as IconInvisible, } from "react-icons/im";
 import { Label } from "../Label/Label";
 import { InputNative } from "../Input/Input";
-const ICON_WIDTH = "2em";
-const PasswordInputWrap = styled.div `
-  position: relative;
-`;
-export const PasswordInputNative = styled(InputNative) `
-  position: relative;
-  padding-right: ${ICON_WIDTH};
-`;
-const PasswordIcon = styled.span `
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: ${ICON_WIDTH};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  opacity: 0.5;
-`;
-export const Password = forwardRef(function Password({ register, name, label, ...props }, ref) {
-    const [visible, setVisible] = useState(false);
-    return (_jsxs(_Fragment, { children: [label && _jsx(Label, { children: label }), _jsxs(PasswordInputWrap, { children: [_jsx(PasswordInputNative, { type: visible ? "text" : "password", autoComplete: "new-password", ...(register ? register(name) : { name, ref }), ...props }), _jsx(PasswordIcon, { onClick: () => setVisible((prev) => !prev), children: visible ? _jsx(IconInvisible, {}) : _jsx(IconVisible, {}) })] })] }));
+var ICON_WIDTH = "2em";
+var PasswordInputWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+export var PasswordInputNative = styled(InputNative)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  padding-right: ", ";\n"], ["\n  position: relative;\n  padding-right: ", ";\n"])), ICON_WIDTH);
+var PasswordIcon = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.5;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.5;\n"])), ICON_WIDTH);
+export var Password = forwardRef(function Password(_a, ref) {
+    var register = _a.register, name = _a.name, label = _a.label, props = __rest(_a, ["register", "name", "label"]);
+    var _b = useState(false), visible = _b[0], setVisible = _b[1];
+    return (_jsxs(_Fragment, { children: [label && _jsx(Label, { children: label }), _jsxs(PasswordInputWrap, { children: [_jsx(PasswordInputNative, __assign({ type: visible ? "text" : "password", autoComplete: "new-password" }, (register ? register(name) : { name: name, ref: ref }), props)), _jsx(PasswordIcon, __assign({ onClick: function () { return setVisible(function (prev) { return !prev; }); } }, { children: visible ? _jsx(IconInvisible, {}) : _jsx(IconVisible, {}) }))] })] }));
 });
+var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Radio/Radio.js

@@ -1,28 +1,25 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
 import { label } from "../Label/Label";
 import { Toggle, ToggleLabel, ToggleIndicatorSquared } from "../Toggle";
 import { InputInvisible } from "../styles";
-const RadioRoot = styled.div ``;
-const RadioLabel = styled.div `
-  ${label}
-`;
-const RadioOptionRoot = styled.label `
-  display: flex;
-  align-items: center;
-  padding: 0.05em;
-  cursor: pointer;
-`;
-const RadioToggle = styled(Toggle) ``;
-const RadioIndicator = styled(ToggleIndicatorSquared) ``;
-const RadioOptionLabel = styled(ToggleLabel) ``;
-const RadioOption = forwardRef(function RadioOption({ register, name, label, $ref, ...props }, ref) {
-    const inputProps = register ? register(name) : { name, ref: $ref || ref };
-    return (_jsxs(RadioOptionRoot, { children: [_jsxs(RadioToggle, { children: [_jsx(InputInvisible, { type: "radio", ...inputProps, ...props }), _jsx(RadioIndicator, {})] }), _jsx(RadioOptionLabel, { children: label })] }));
+var RadioRoot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var RadioLabel = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), label);
+var RadioOptionRoot = styled.label(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.05em;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.05em;\n  cursor: pointer;\n"])));
+var RadioToggle = styled(Toggle)(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
+var RadioIndicator = styled(ToggleIndicatorSquared)(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
+var RadioOptionLabel = styled(ToggleLabel)(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
+var RadioOption = forwardRef(function RadioOption(_a, ref) {
+    var register = _a.register, name = _a.name, label = _a.label, $ref = _a.$ref, props = __rest(_a, ["register", "name", "label", "$ref"]);
+    var inputProps = register ? register(name) : { name: name, ref: $ref || ref };
+    return (_jsxs(RadioOptionRoot, { children: [_jsxs(RadioToggle, { children: [_jsx(InputInvisible, __assign({ type: "radio" }, inputProps, props)), _jsx(RadioIndicator, {})] }), _jsx(RadioOptionLabel, { children: label })] }));
 });
-export const Radio = forwardRef(function Radio({ label, options, ...props }, ref) {
+export var Radio = forwardRef(function Radio(_a, ref) {
+    var label = _a.label, options = _a.options, props = __rest(_a, ["label", "options"]);
     if (!options)
         return null;
-    return (_jsxs(RadioRoot, { children: [label && _jsx(RadioLabel, { children: label }), options.map((option, idx) => (_jsx(RadioOption, { ...option, ...props, "$ref": ref }, idx)))] }));
+    return (_jsxs(RadioRoot, { children: [label && _jsx(RadioLabel, { children: label }), options.map(function (option, idx) { return (_jsx(RadioOption, __assign({}, option, props, { "$ref": ref }), idx)); })] }));
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Forms/Switch/Switch.js

@@ -1,3 +1,4 @@
+import { __assign, __makeTemplateObject } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
@@ -5,46 +6,15 @@ import { CheckboxRoot, CheckboxLabel } from "../Checkbox";
 import { toggleBase } from "../Toggle";
 import { useToggle } from "../Toggle/useToggle";
 import { stateFocus } from "../../styles/styled";
-const SWITCH_GUTTER = 0.25;
-const SWITCH_HANDLE_SIZE = 1;
-export const SwitchTrack = styled.span `
-  position: relative;
-  width: ${SWITCH_HANDLE_SIZE * 3}em;
-  height: ${SWITCH_HANDLE_SIZE * 1.5}em;
-  padding: ${SWITCH_GUTTER}em;
-  border-radius: ${SWITCH_HANDLE_SIZE}em;
-  ${toggleBase}
-
-  input:focus ~ & {
-    ${stateFocus}
-  }
-
-  input:disabled ~ & {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;
-export const SwitchHandle = styled.span `
-  position: absolute;
-  width: ${SWITCH_HANDLE_SIZE}em;
-  height: ${SWITCH_HANDLE_SIZE}em;
-  left: ${SWITCH_GUTTER}em;
-  margin-top: -1px;
-  /* border: 1px solid currentColor; */
-  background: currentColor;
-  opacity: 0.5;
-  border-radius: 100%;
-  transition: all 0.18s ease-in-out;
-
-  input:checked + ${SwitchTrack} & {
-    opacity: 1;
-    left: calc(100% - ${SWITCH_HANDLE_SIZE}em - ${SWITCH_GUTTER}em);
-  }
-`;
+var SWITCH_GUTTER = 0.25;
+var SWITCH_HANDLE_SIZE = 1;
+export var SwitchTrack = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: ", "em;\n  height: ", "em;\n  padding: ", "em;\n  border-radius: ", "em;\n  ", "\n\n  input:focus ~ & {\n    ", "\n  }\n\n  input:disabled ~ & {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"], ["\n  position: relative;\n  width: ", "em;\n  height: ", "em;\n  padding: ", "em;\n  border-radius: ", "em;\n  ", "\n\n  input:focus ~ & {\n    ", "\n  }\n\n  input:disabled ~ & {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])), SWITCH_HANDLE_SIZE * 3, SWITCH_HANDLE_SIZE * 1.5, SWITCH_GUTTER, SWITCH_HANDLE_SIZE, toggleBase, stateFocus);
+export var SwitchHandle = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  width: ", "em;\n  height: ", "em;\n  left: ", "em;\n  margin-top: -1px;\n  /* border: 1px solid currentColor; */\n  background: currentColor;\n  opacity: 0.5;\n  border-radius: 100%;\n  transition: all 0.18s ease-in-out;\n\n  input:checked + ", " & {\n    opacity: 1;\n    left: calc(100% - ", "em - ", "em);\n  }\n"], ["\n  position: absolute;\n  width: ", "em;\n  height: ", "em;\n  left: ", "em;\n  margin-top: -1px;\n  /* border: 1px solid currentColor; */\n  background: currentColor;\n  opacity: 0.5;\n  border-radius: 100%;\n  transition: all 0.18s ease-in-out;\n\n  input:checked + ", " & {\n    opacity: 1;\n    left: calc(100% - ", "em - ", "em);\n  }\n"])), SWITCH_HANDLE_SIZE, SWITCH_HANDLE_SIZE, SWITCH_GUTTER, SwitchTrack, SWITCH_HANDLE_SIZE, SWITCH_GUTTER);
 /**
  * All logic and invisible Inputs come from the `useToggle` hook
  */
-export const Switch = forwardRef(function Switch(props, ref) {
-    const { rootProps, Inputs, label } = useToggle(props, ref);
-    return (_jsxs(CheckboxRoot, { ...rootProps, children: [Inputs, _jsx(SwitchTrack, { children: _jsx(SwitchHandle, {}) }), label && _jsx(CheckboxLabel, { children: label })] }));
+export var Switch = forwardRef(function Switch(props, ref) {
+    var _a = useToggle(props, ref), rootProps = _a.rootProps, Inputs = _a.Inputs, label = _a.label;
+    return (_jsxs(CheckboxRoot, __assign({}, rootProps, { children: [Inputs, _jsx(SwitchTrack, { children: _jsx(SwitchHandle, {}) }), label && _jsx(CheckboxLabel, { children: label })] })));
 });
+var templateObject_1, templateObject_2;

package/Forms/Textarea/Textarea.js

@@ -1,13 +1,12 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
 import { Label } from "../Label/Label";
 import { inputBase, inputFocus } from "../styles";
-export const TextareaNative = styled.textarea `
-  ${inputBase}
-  ${inputFocus}
-  resize: vertical;
-`;
-export const Textarea = forwardRef(function Textarea({ register, name, label, ...props }, ref) {
-    return (_jsxs(_Fragment, { children: [label && _jsx(Label, { children: label }), _jsx(TextareaNative, { ...(register ? register(name) : { name, ref }), ...props })] }));
+export var TextareaNative = styled.textarea(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  resize: vertical;\n"], ["\n  ", "\n  ", "\n  resize: vertical;\n"])), inputBase, inputFocus);
+export var Textarea = forwardRef(function Textarea(_a, ref) {
+    var register = _a.register, name = _a.name, label = _a.label, props = __rest(_a, ["register", "name", "label"]);
+    return (_jsxs(_Fragment, { children: [label && _jsx(Label, { children: label }), _jsx(TextareaNative, __assign({}, (register ? register(name) : { name: name, ref: ref }), props))] }));
 });
+var templateObject_1;

package/Forms/Textarea/TextareaRich.js

@@ -1,3 +1,4 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
@@ -5,38 +6,23 @@ import styled from "styled-components";
 import { Label } from "../Label/Label";
 import { Editor } from "../../Editor";
 import { triggerOnChange } from "../helpers";
-const Root = styled.div `
-  .ProseMirror {
-    max-height: 160px;
-    overflow: auto;
-  }
-  .EditorContent {
-    position: relative;
-    &:after {
-      position: absolute;
-      content: "";
-      bottom: 0;
-      left: 0;
-      right: 16px; /* scrollbar width? */
-      height: 3em;
-      background: linear-gradient(0deg, white, white 33%, transparent);
-      pointer-events: none;
-    }
-  }
-`;
-export const TextareaRich = forwardRef(function TextareaRich({ register, setValue, name, label, defaultValue = "", onChange, ...props }, ref) {
+var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .ProseMirror {\n    max-height: 160px;\n    overflow: auto;\n  }\n  .EditorContent {\n    position: relative;\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: 0;\n      left: 0;\n      right: 16px; /* scrollbar width? */\n      height: 3em;\n      background: linear-gradient(0deg, white, white 33%, transparent);\n      pointer-events: none;\n    }\n  }\n"], ["\n  .ProseMirror {\n    max-height: 160px;\n    overflow: auto;\n  }\n  .EditorContent {\n    position: relative;\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: 0;\n      left: 0;\n      right: 16px; /* scrollbar width? */\n      height: 3em;\n      background: linear-gradient(0deg, white, white 33%, transparent);\n      pointer-events: none;\n    }\n  }\n"])));
+export var TextareaRich = forwardRef(function TextareaRich(_a, ref) {
+    var register = _a.register, setValue = _a.setValue, name = _a.name, label = _a.label, _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, onChange = _a.onChange, props = __rest(_a, ["register", "setValue", "name", "label", "defaultValue", "onChange"]);
     if (register)
         register(name);
-    return (_jsxs(Root, { children: [label && _jsx(Label, { children: label }), _jsx(Editor, { options: {
+    return (_jsxs(Root, { children: [label && _jsx(Label, { children: label }), _jsx(Editor, __assign({ options: {
                     // element: <TextareaAutosize />,
                     content: defaultValue,
                     onUpdate: (onChange || setValue) && name
-                        ? ({ editor }) => {
-                            const value = editor.getHTML();
+                        ? function (_a) {
+                            var editor = _a.editor;
+                            var value = editor.getHTML();
                             if (setValue)
                                 setValue(name, value);
                             triggerOnChange(onChange, name, value);
                         }
                         : undefined,
-                }, ...props })] }));
+                } }, props))] }));
 });
+var templateObject_1;

package/Forms/Toggle/Toggle.js

@@ -1,3 +1,4 @@
+import { __assign, __makeTemplateObject } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @file
@@ -5,75 +6,27 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * About accessibility:
  * - minimum target size of 44px https://www.w3.org/TR/WCAG21/#target-size
  */
-import { useId } from "react";
+// import { useId } from "react";
 import styled from "styled-components";
 import { stateFocus } from "../../styles/styled";
-export const toggleBase = `
-  border: 1px solid var(--forms-border-color);
-`;
-export const toggleIndicatorBg = `
-  display: inline-block;
-  flex-shrink: 0;
-  width: 100%;
-  height: 100%;
-`;
-export const toggleIndicatorBgShape = `
-  ${toggleIndicatorBg}
-  fill: none;
-  stroke-width: 2px;
-  stroke: var(--forms-border-color);
-`;
-export const toggleIndicatorFg = `
-  position: absolute;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  fill: currentcolor;
-`;
-export const Toggle = styled.span `
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2em;
-  height: 2em;
-  margin: 0 -0.3em; /* rtl */
-  padding: 0.3em;
-`;
-export const ToggleLabel = styled.span `
-  margin-left: 0.6em; /* rtl */
-`;
-export const ToggleLabelSub = styled.small `
-  opacity: 0.7;
-  font-size: 0.7em; ;
-`;
-export const ToggleIndicatorHolder = styled.span `
-  position: relative;
-  display: flex;
-
-  input:focus ~ & {
-    ${stateFocus}
-  }
-`;
-export const ToggleIndicatorBgSquare = styled.svg `
-  ${toggleIndicatorBgShape}
-`;
-export const ToggleIndicatorBgCircle = styled.svg `
-  ${toggleIndicatorBgShape}
-`;
-export const ToggleIndicatorFg = styled.svg `
-  ${toggleIndicatorFg}
-  transform: scale(0);
-  transition: transform 0.18s ease;
-
-  input:checked + ${ToggleIndicatorHolder} & {
-    transform: scale(1);
-  }
-`;
-export const ToggleIndicatorSquared = (props) => {
-    return (_jsxs(ToggleIndicatorHolder, { children: [_jsx(ToggleIndicatorBgSquare, { viewBox: "0 0 24 24", children: _jsx("rect", { width: "24", height: "24" }) }), _jsx(ToggleIndicatorFg, { viewBox: "0 0 24 24", children: _jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) })] }));
+import { useId } from "../../hooks/useId";
+export var toggleBase = "\n  border: 1px solid var(--forms-border-color);\n";
+export var toggleIndicatorBg = "\n  display: inline-block;\n  flex-shrink: 0;\n  width: 100%;\n  height: 100%;\n";
+export var toggleIndicatorBgShape = "\n  ".concat(toggleIndicatorBg, "\n  fill: none;\n  stroke-width: 2px;\n  stroke: var(--forms-border-color);\n");
+export var toggleIndicatorFg = "\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  fill: currentcolor;\n";
+export var Toggle = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n  height: 2em;\n  margin: 0 -0.3em; /* rtl */\n  padding: 0.3em;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n  height: 2em;\n  margin: 0 -0.3em; /* rtl */\n  padding: 0.3em;\n"])));
+export var ToggleLabel = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-left: 0.6em; /* rtl */\n"], ["\n  margin-left: 0.6em; /* rtl */\n"])));
+export var ToggleLabelSub = styled.small(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  opacity: 0.7;\n  font-size: 0.7em; ;\n"], ["\n  opacity: 0.7;\n  font-size: 0.7em; ;\n"])));
+export var ToggleIndicatorHolder = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n\n  input:focus ~ & {\n    ", "\n  }\n"], ["\n  position: relative;\n  display: flex;\n\n  input:focus ~ & {\n    ", "\n  }\n"])), stateFocus);
+export var ToggleIndicatorBgSquare = styled.svg(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), toggleIndicatorBgShape);
+export var ToggleIndicatorBgCircle = styled.svg(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), toggleIndicatorBgShape);
+export var ToggleIndicatorFg = styled.svg(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  transform: scale(0);\n  transition: transform 0.18s ease;\n\n  input:checked + ", " & {\n    transform: scale(1);\n  }\n"], ["\n  ", "\n  transform: scale(0);\n  transition: transform 0.18s ease;\n\n  input:checked + ", " & {\n    transform: scale(1);\n  }\n"])), toggleIndicatorFg, ToggleIndicatorHolder);
+export var ToggleIndicatorSquared = function (props) {
+    return (_jsxs(ToggleIndicatorHolder, { children: [_jsx(ToggleIndicatorBgSquare, __assign({ viewBox: "0 0 24 24" }, { children: _jsx("rect", { width: "24", height: "24" }) })), _jsx(ToggleIndicatorFg, __assign({ viewBox: "0 0 24 24" }, { children: _jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) }))] }));
 };
-export const ToggleIndicatorRounded = ({ r = 6, }) => {
-    const id = useId();
-    return (_jsxs(ToggleIndicatorHolder, { children: [_jsxs(ToggleIndicatorBgCircle, { viewBox: "0 0 24 24", children: [_jsx("circle", { cy: "12", cx: "12", r: "12", id: `r_${id}`, clipPath: `url(#c_${id})` }), _jsx("clipPath", { id: `c_${id}`, children: _jsx("use", { xlinkHref: `#r_${id}` }) })] }), _jsx(ToggleIndicatorFg, { viewBox: "0 0 24 24", children: _jsx("circle", { r: r, cx: "12", cy: "12" }) })] }));
+export var ToggleIndicatorRounded = function (_a) {
+    var _b = _a.r, r = _b === void 0 ? 6 : _b;
+    var id = useId();
+    return (_jsxs(ToggleIndicatorHolder, { children: [_jsxs(ToggleIndicatorBgCircle, __assign({ viewBox: "0 0 24 24" }, { children: [_jsx("circle", { cy: "12", cx: "12", r: "12", id: "r_".concat(id), clipPath: "url(#c_".concat(id, ")") }), _jsx("clipPath", __assign({ id: "c_".concat(id) }, { children: _jsx("use", { xlinkHref: "#r_".concat(id) }) }))] })), _jsx(ToggleIndicatorFg, __assign({ viewBox: "0 0 24 24" }, { children: _jsx("circle", { r: r, cx: "12", cy: "12" }) }))] }));
 };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Forms/Toggle/useToggle.js

@@ -1,3 +1,4 @@
+import { __assign, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
 import { useWatch } from "react-hook-form";
@@ -32,25 +33,25 @@ import { InputInvisible } from "../styles";
  * an array of options with the shape of `Option`
  */
 export function useToggle(props, ref) {
-    const { name, control, register, label, options, value: propValue, ...restProps } = props;
-    let { id, valueTrue, valueFalse, 
+    var name = props.name, control = props.control, register = props.register, label = props.label, options = props.options, propValue = props.value, restProps = __rest(props, ["name", "control", "register", "label", "options", "value"]);
+    var id = restProps.id, valueTrue = restProps.valueTrue, valueFalse = restProps.valueFalse, 
     // defaultChecked,
     // defaultValue,
     // eslint-disable-next-line prefer-const
-    ...remainingInputProps } = restProps;
+    remainingInputProps = __rest(restProps, ["id", "valueTrue", "valueFalse"]);
     // use options data convention to pass on the true/false values
     if (options) {
         valueTrue = options
-            .filter((opt) => opt.value === "true")[0]
+            .filter(function (opt) { return opt.value === "true"; })[0]
             .label.toString();
         valueFalse = options
-            .filter((opt) => opt.value === "false")[0]
+            .filter(function (opt) { return opt.value === "false"; })[0]
             .label.toString();
     }
-    id = `switch-${name}`;
-    const idTrue = `${id}-true`;
-    const idFalse = `${id}-false`;
-    const isRadio = !!(valueTrue && valueFalse);
+    id = "switch-".concat(name);
+    var idTrue = "".concat(id, "-true");
+    var idFalse = "".concat(id, "-false");
+    var isRadio = !!(valueTrue && valueFalse);
     // // manage default values for both toggle modes
     // defaultChecked = isUndefined(defaultChecked) ? false : defaultChecked;
     // // TODO: maybe throw an error if the defaultValue that arrives here is not
@@ -61,9 +62,9 @@ export function useToggle(props, ref) {
     //     : valueFalse;
     // get the value either from the uncontrolled watched input or from the given
     // prop to control the component
-    let value = useWatch({
-        name,
-        control,
+    var value = useWatch({
+        name: name,
+        control: control,
         // defaultValue: isRadio ? defaultValue : defaultChecked,
     });
     if (propValue) {
@@ -73,14 +74,14 @@ export function useToggle(props, ref) {
     // a `register` function, then check if we have a `control` object or just
     // rely on the `name` prop and `ref`, they probably would be passed alongside
     // an `onChange` prop that is spreaded on the inputs
-    const inputProps = useMemo(() => {
+    var inputProps = useMemo(function () {
         return register
             ? register(name)
             : control
                 ? control.register(name)
                 : {
-                    name,
-                    ref,
+                    name: name,
+                    ref: ref,
                 };
     }, [register, control, name, ref]);
     /**
@@ -89,15 +90,15 @@ export function useToggle(props, ref) {
      * Fake the spacebar keyboard behaviour on the radio mode of the checkbox.
      * Without this *only* the arrow keys would change the checkbox state
      */
-    const handleKeyDown = useCallback((event) => {
+    var handleKeyDown = useCallback(function (event) {
         if (event.key === " ") {
             event.preventDefault();
             event.stopPropagation();
-            const firstInput = event.target;
-            const next = firstInput.nextElementSibling;
-            const prev = firstInput.previousElementSibling;
-            const secondInput = next?.tagName === "INPUT" ? next : prev;
-            let target = firstInput;
+            var firstInput = event.target;
+            var next = firstInput.nextElementSibling;
+            var prev = firstInput.previousElementSibling;
+            var secondInput = (next === null || next === void 0 ? void 0 : next.tagName) === "INPUT" ? next : prev;
+            var target = firstInput;
             if (firstInput.checked) {
                 target = secondInput;
             }
@@ -113,7 +114,7 @@ export function useToggle(props, ref) {
     }, [valueTrue]);
     // collect all the return values that are dependent on the current value
     // of the input
-    const valueDependentProps = useMemo(() => ({
+    var valueDependentProps = useMemo(function () { return ({
         rootProps: {
             htmlFor: isRadio
                 ? !value || value === valueFalse
@@ -122,9 +123,11 @@ export function useToggle(props, ref) {
                 : id,
         },
         label: label ? label : value,
-        value,
-    }), [value, valueFalse, isRadio, id, idTrue, idFalse, label]);
-    const Inputs = useMemo(() => isRadio ? (_jsxs(_Fragment, { children: [_jsx(InputInvisible, { id: idFalse, ...inputProps, ...remainingInputProps, onKeyDown: handleKeyDown, type: "radio", value: valueFalse }), _jsx(InputInvisible, { id: idTrue, ...inputProps, ...remainingInputProps, onKeyDown: handleKeyDown, type: "radio", value: valueTrue })] })) : (_jsx(InputInvisible, { id: id, type: "checkbox", ...inputProps, ...remainingInputProps })), [
+        value: value,
+    }); }, [value, valueFalse, isRadio, id, idTrue, idFalse, label]);
+    var Inputs = useMemo(function () {
+        return isRadio ? (_jsxs(_Fragment, { children: [_jsx(InputInvisible, __assign({ id: idFalse }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueFalse })), _jsx(InputInvisible, __assign({ id: idTrue }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueTrue }))] })) : (_jsx(InputInvisible, __assign({ id: id, type: "checkbox" }, inputProps, remainingInputProps)));
+    }, [
         inputProps,
         remainingInputProps,
         handleKeyDown,
@@ -138,8 +141,5 @@ export function useToggle(props, ref) {
         // defaultValue,
     ]);
     // console.log("useToggle: render", value);
-    return {
-        ...valueDependentProps,
-        Inputs,
-    };
+    return __assign(__assign({}, valueDependentProps), { Inputs: Inputs });
 }

package/Forms/antispam.js

@@ -10,19 +10,19 @@ import { encode, decode, isUndefined } from "@koine/utils";
  * form data not created by user input.
  */
 export function encodeForm(validationRules) {
-    const encoded = {};
-    const encodedNames = {};
-    for (const name in validationRules) {
-        if (!name.startsWith("_")) {
-            const encodedName = encode(name);
-            encoded[encodedName] = validationRules[name];
-            encodedNames[name] = encodedName;
+    var encoded = {};
+    var encodedNames = {};
+    for (var name_1 in validationRules) {
+        if (!name_1.startsWith("_")) {
+            var encodedName = encode(name_1);
+            encoded[encodedName] = validationRules[name_1];
+            encodedNames[name_1] = encodedName;
         }
     }
     // we need `.required()` to correctly infer the type @see
     // https://github.com/jquense/yup/issues/946
-    const encodedSchema = object(encoded).required();
-    return { encodedSchema, encodedNames };
+    var encodedSchema = object(encoded).required();
+    return { encodedSchema: encodedSchema, encodedNames: encodedNames };
 }
 /**
  * Decode form data
@@ -34,9 +34,9 @@ export function encodeForm(validationRules) {
  * which are considered programmatic form data not created by user input.
  */
 export function decodeForm(formData) {
-    const json = {};
-    for (const encodedName in formData) {
-        const decodedName = decode(encodedName);
+    var json = {};
+    for (var encodedName in formData) {
+        var decodedName = decode(encodedName);
         // always add underscore prefixed names as they are treated as internal
         // private inputs outside of the honeypot system, normalise them here removing
         // the underscore prefix

package/Forms/helpers.js

@@ -1,6 +1,7 @@
 import { isString, matchSorter } from "@koine/utils";
-export const normaliseOptions = (options = []) => {
-    return options.map((option) => {
+export var normaliseOptions = function (options) {
+    if (options === void 0) { options = []; }
+    return options.map(function (option) {
         return isString(option)
             ? {
                 label: option,
@@ -21,24 +22,24 @@ export function defaultOptionsFilterFn(options, inputValue) {
 export function triggerOnChange(onChange, name, value) {
     // @ts-expect-error nevermind
     if (onChange)
-        onChange({ target: { name, value } });
+        onChange({ target: { name: name, value: value } });
 }
 /**
  * @see https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
  * @deprecated
  */
 export function triggerChange(input, value) {
-    const obj = window.Object;
+    var obj = window.Object;
     if (!obj) {
-        // if (__DEV__) {
+        // if (process.env["NODE_ENV"] !== "production") {
         //   console.warn("triggerChange: window.Object does not exists, bailing.");
         // }
         return;
     }
     // @ts-expect-error nevermind
-    const nativeInputValueSetter = obj.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
+    var nativeInputValueSetter = obj.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
     // @ts-expect-error nevermind
     nativeInputValueSetter.call(input, value);
-    const inputEvent = new Event("input", { bubbles: true });
+    var inputEvent = new Event("input", { bubbles: true });
     input.dispatchEvent(inputEvent);
 }

package/Forms/index.d.ts

@@ -5,7 +5,6 @@ export * from "./InputGroup";
 export * from "./Feedback";
 export * from "./Field";
 export * from "./InputGroup";
-export * from "./Form";
 export * from "./Label";
 export * from "./Password";
 export * from "./Radio";

package/Forms/index.js

@@ -5,7 +5,6 @@ export * from "./InputGroup";
 export * from "./Feedback";
 export * from "./Field";
 export * from "./InputGroup";
-export * from "./Form";
 export * from "./Label";
 export * from "./Password";
 export * from "./Radio";

package/Forms/styles.js

@@ -1,60 +1,29 @@
+import { __assign, __makeTemplateObject } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { stateFocus } from "../styles/styled";
 import { ProgressLinear } from "../Progress/ProgressLinear";
 import { invisible } from "../styles/styled";
-export const InputInvisible = styled.input `
-  ${invisible}
-`;
-export const InputHoneypot = styled(InputInvisible).attrs({
+export var InputInvisible = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), invisible);
+export var InputHoneypot = styled(InputInvisible).attrs({
     type: "text",
     autoComplete: "new-password",
     tabIndex: -1,
-}) ``;
-export const InputProgress = styled((p) => (_jsx(ProgressLinear, { fg: "var(--accent300)", bg: "var(--accent400)", ...p }))) `
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-`;
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+export var InputProgress = styled(function (p) { return (_jsx(ProgressLinear, __assign({ fg: "var(--accent300)", bg: "var(--accent400)" }, p))); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"], ["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"])));
 /**
  * Remove the default light blue background on autofilled inputs. To be used as
  * a function that outputs a CSS string.
  *
  * @see https://stackoverflow.com/a/62624824/1938970
  */
-export const inputResetAutofill = `
-  &:-webkit-autofill,
-  &:-webkit-autofill:hover,
-  &:-webkit-autofill:focus,
-  &:-webkit-autofill:active {
-    -webkit-background-clip: text;
-  }
-`;
+export var inputResetAutofill = "\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-background-clip: text;\n  }\n";
 /* FIXME: find a nice way to override this styling from implementation */
 // border-bottom: 1px solid var(--forms-border-color);
 // border: 0;
-export const inputBorder = `
-  border: 1px solid var(--forms-border-color);
-`;
-export const inputPadding = `
-  padding: var(--forms-gutter-y) var(--forms-gutter-x);
-`;
-export const inputReset = `
-  width: 100%;
-  min-height: 44px;
-  ${inputBorder}
-  ${inputPadding}
-`;
-export const inputBase = `
-  ${inputReset}
-  ${inputResetAutofill}
-  background: transparent;
-`;
-export const inputFocus = `
-  &:focus {
-    outline: 0px;
-    appearance: none;
-    ${stateFocus}
-  }
-`;
+export var inputBorder = "\n  border: 1px solid var(--forms-border-color);\n";
+export var inputPadding = "\n  padding: var(--forms-gutter-y) var(--forms-gutter-x);\n";
+export var inputReset = "\n  width: 100%;\n  min-height: 44px;\n  ".concat(inputBorder, "\n  ").concat(inputPadding, "\n");
+export var inputBase = "\n  ".concat(inputReset, "\n  ").concat(inputResetAutofill, "\n  background: transparent;\n");
+export var inputFocus = "\n  &:focus {\n    outline: 0px;\n    appearance: none;\n    ".concat(stateFocus, "\n  }\n");
+var templateObject_1, templateObject_2, templateObject_3;