@koine/react 1.0.9 → 1.0.12

package/node/Forms/Radio/Radio.js

@@ -1,32 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const Label_1 = require("../Label/Label");
-const Toggle_1 = require("../Toggle");
-const styles_1 = require("../styles");
-const RadioRoot = styled_components_1.default.div ``;
-const RadioLabel = styled_components_1.default.div `
-  ${Label_1.label}
-`;
-const RadioOptionRoot = styled_components_1.default.label `
-  display: flex;
-  align-items: center;
-  padding: 0.05em;
-  cursor: pointer;
-`;
-const RadioToggle = (0, styled_components_1.default)(Toggle_1.Toggle) ``;
-const RadioIndicator = (0, styled_components_1.default)(Toggle_1.ToggleIndicatorSquared) ``;
-const RadioOptionLabel = (0, styled_components_1.default)(Toggle_1.ToggleLabel) ``;
-const RadioOption = (0, react_1.forwardRef)(function RadioOption({ register, name, label, $ref, ...props }, ref) {
-    const inputProps = register ? register(name) : { name, ref: $ref || ref };
-    return ((0, jsx_runtime_1.jsxs)(RadioOptionRoot, { children: [(0, jsx_runtime_1.jsxs)(RadioToggle, { children: [(0, jsx_runtime_1.jsx)(styles_1.InputInvisible, { type: "radio", ...inputProps, ...props }), (0, jsx_runtime_1.jsx)(RadioIndicator, {})] }), (0, jsx_runtime_1.jsx)(RadioOptionLabel, { children: label })] }));
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var Label_1 = require("../Label/Label");
+var Toggle_1 = require("../Toggle");
+var styles_1 = require("../styles");
+var RadioRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
+var RadioLabel = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), Label_1.label);
+var RadioOptionRoot = styled_components_1.default.label(templateObject_3 || (templateObject_3 = tslib_1.__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 = (0, styled_components_1.default)(Toggle_1.Toggle)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject([""], [""])));
+var RadioIndicator = (0, styled_components_1.default)(Toggle_1.ToggleIndicatorSquared)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject([""], [""])));
+var RadioOptionLabel = (0, styled_components_1.default)(Toggle_1.ToggleLabel)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject([""], [""])));
+var RadioOption = (0, react_1.forwardRef)(function RadioOption(_a, ref) {
+    var register = _a.register, name = _a.name, label = _a.label, $ref = _a.$ref, props = tslib_1.__rest(_a, ["register", "name", "label", "$ref"]);
+    var inputProps = register ? register(name) : { name: name, ref: $ref || ref };
+    return ((0, jsx_runtime_1.jsxs)(RadioOptionRoot, { children: [(0, jsx_runtime_1.jsxs)(RadioToggle, { children: [(0, jsx_runtime_1.jsx)(styles_1.InputInvisible, tslib_1.__assign({ type: "radio" }, inputProps, props)), (0, jsx_runtime_1.jsx)(RadioIndicator, {})] }), (0, jsx_runtime_1.jsx)(RadioOptionLabel, { children: label })] }));
 });
-exports.Radio = (0, react_1.forwardRef)(function Radio({ label, options, ...props }, ref) {
+exports.Radio = (0, react_1.forwardRef)(function Radio(_a, ref) {
+    var label = _a.label, options = _a.options, props = tslib_1.__rest(_a, ["label", "options"]);
     if (!options)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(RadioRoot, { children: [label && (0, jsx_runtime_1.jsx)(RadioLabel, { children: label }), options.map((option, idx) => ((0, jsx_runtime_1.jsx)(RadioOption, { ...option, ...props, "$ref": ref }, idx)))] }));
+    return ((0, jsx_runtime_1.jsxs)(RadioRoot, { children: [label && (0, jsx_runtime_1.jsx)(RadioLabel, { children: label }), options.map(function (option, idx) { return ((0, jsx_runtime_1.jsx)(RadioOption, tslib_1.__assign({}, option, props, { "$ref": ref }), idx)); })] }));
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/node/Forms/Radio/index.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Radio"), exports);

package/node/Forms/Switch/Switch.js

@@ -1,54 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Switch = exports.SwitchHandle = exports.SwitchTrack = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const Checkbox_1 = require("../Checkbox");
-const Toggle_1 = require("../Toggle");
-const useToggle_1 = require("../Toggle/useToggle");
-const styled_1 = require("../../styles/styled");
-const SWITCH_GUTTER = 0.25;
-const SWITCH_HANDLE_SIZE = 1;
-exports.SwitchTrack = styled_components_1.default.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;
-  ${Toggle_1.toggleBase}
-
-  input:focus ~ & {
-    ${styled_1.stateFocus}
-  }
-
-  input:disabled ~ & {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;
-exports.SwitchHandle = styled_components_1.default.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 + ${exports.SwitchTrack} & {
-    opacity: 1;
-    left: calc(100% - ${SWITCH_HANDLE_SIZE}em - ${SWITCH_GUTTER}em);
-  }
-`;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var Checkbox_1 = require("../Checkbox");
+var Toggle_1 = require("../Toggle");
+var useToggle_1 = require("../Toggle/useToggle");
+var styled_1 = require("../../styles/styled");
+var SWITCH_GUTTER = 0.25;
+var SWITCH_HANDLE_SIZE = 1;
+exports.SwitchTrack = styled_components_1.default.span(templateObject_1 || (templateObject_1 = tslib_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, Toggle_1.toggleBase, styled_1.stateFocus);
+exports.SwitchHandle = styled_components_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__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, exports.SwitchTrack, SWITCH_HANDLE_SIZE, SWITCH_GUTTER);
 /**
  * All logic and invisible Inputs come from the `useToggle` hook
  */
 exports.Switch = (0, react_1.forwardRef)(function Switch(props, ref) {
-    const { rootProps, Inputs, label } = (0, useToggle_1.useToggle)(props, ref);
-    return ((0, jsx_runtime_1.jsxs)(Checkbox_1.CheckboxRoot, { ...rootProps, children: [Inputs, (0, jsx_runtime_1.jsx)(exports.SwitchTrack, { children: (0, jsx_runtime_1.jsx)(exports.SwitchHandle, {}) }), label && (0, jsx_runtime_1.jsx)(Checkbox_1.CheckboxLabel, { children: label })] }));
+    var _a = (0, useToggle_1.useToggle)(props, ref), rootProps = _a.rootProps, Inputs = _a.Inputs, label = _a.label;
+    return ((0, jsx_runtime_1.jsxs)(Checkbox_1.CheckboxRoot, tslib_1.__assign({}, rootProps, { children: [Inputs, (0, jsx_runtime_1.jsx)(exports.SwitchTrack, { children: (0, jsx_runtime_1.jsx)(exports.SwitchHandle, {}) }), label && (0, jsx_runtime_1.jsx)(Checkbox_1.CheckboxLabel, { children: label })] })));
 });
+var templateObject_1, templateObject_2;

package/node/Forms/Switch/index.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Switch"), exports);

package/node/Forms/Textarea/Textarea.js

@@ -1,17 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Textarea = exports.TextareaNative = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const Label_1 = require("../Label/Label");
-const styles_1 = require("../styles");
-exports.TextareaNative = styled_components_1.default.textarea `
-  ${styles_1.inputBase}
-  ${styles_1.inputFocus}
-  resize: vertical;
-`;
-exports.Textarea = (0, react_1.forwardRef)(function Textarea({ register, name, label, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { children: label }), (0, jsx_runtime_1.jsx)(exports.TextareaNative, { ...(register ? register(name) : { name, ref }), ...props })] }));
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var Label_1 = require("../Label/Label");
+var styles_1 = require("../styles");
+exports.TextareaNative = styled_components_1.default.textarea(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n  ", "\n  resize: vertical;\n"], ["\n  ", "\n  ", "\n  resize: vertical;\n"])), styles_1.inputBase, styles_1.inputFocus);
+exports.Textarea = (0, react_1.forwardRef)(function Textarea(_a, ref) {
+    var register = _a.register, name = _a.name, label = _a.label, props = tslib_1.__rest(_a, ["register", "name", "label"]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { children: label }), (0, jsx_runtime_1.jsx)(exports.TextareaNative, tslib_1.__assign({}, (register ? register(name) : { name: name, ref: ref }), props))] }));
 });
+var templateObject_1;

package/node/Forms/Textarea/TextareaRich.js

@@ -1,46 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextareaRich = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
 // import TextareaAutosize from "@mui/base/TextareaAutosize";
-const Label_1 = require("../Label/Label");
-const Editor_1 = require("../../Editor");
-const helpers_1 = require("../helpers");
-const Root = styled_components_1.default.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;
-    }
-  }
-`;
-exports.TextareaRich = (0, react_1.forwardRef)(function TextareaRich({ register, setValue, name, label, defaultValue = "", onChange, ...props }, ref) {
+var Label_1 = require("../Label/Label");
+var Editor_1 = require("../../Editor");
+var helpers_1 = require("../helpers");
+var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_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"])));
+exports.TextareaRich = (0, react_1.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 = tslib_1.__rest(_a, ["register", "setValue", "name", "label", "defaultValue", "onChange"]);
     if (register)
         register(name);
-    return ((0, jsx_runtime_1.jsxs)(Root, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { children: label }), (0, jsx_runtime_1.jsx)(Editor_1.Editor, { options: {
+    return ((0, jsx_runtime_1.jsxs)(Root, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { children: label }), (0, jsx_runtime_1.jsx)(Editor_1.Editor, tslib_1.__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);
                             (0, helpers_1.triggerOnChange)(onChange, name, value);
                         }
                         : undefined,
-                }, ...props })] }));
+                } }, props))] }));
 });
+var templateObject_1;

package/node/Forms/Textarea/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Textarea"), exports);
 tslib_1.__exportStar(require("./TextareaRich"), exports);

package/node/Forms/Toggle/Toggle.js

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

package/node/Forms/Toggle/index.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Toggle"), exports);

package/node/Forms/Toggle/useToggle.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useToggle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_hook_form_1 = require("react-hook-form");
-const styles_1 = require("../styles");
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_hook_form_1 = require("react-hook-form");
+var styles_1 = require("../styles");
 /**
  * This hook is meant to powere Checkboxes, Switches and checkbox-like Radios
  * components, it works in fact in two modes:
@@ -35,25 +36,25 @@ const styles_1 = require("../styles");
  * an array of options with the shape of `Option`
  */
 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 = tslib_1.__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 = tslib_1.__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
@@ -64,9 +65,9 @@ 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 = (0, react_hook_form_1.useWatch)({
-        name,
-        control,
+    var value = (0, react_hook_form_1.useWatch)({
+        name: name,
+        control: control,
         // defaultValue: isRadio ? defaultValue : defaultChecked,
     });
     if (propValue) {
@@ -76,14 +77,14 @@ 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 = (0, react_1.useMemo)(() => {
+    var inputProps = (0, react_1.useMemo)(function () {
         return register
             ? register(name)
             : control
                 ? control.register(name)
                 : {
-                    name,
-                    ref,
+                    name: name,
+                    ref: ref,
                 };
     }, [register, control, name, ref]);
     /**
@@ -92,15 +93,15 @@ 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 = (0, react_1.useCallback)((event) => {
+    var handleKeyDown = (0, react_1.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;
             }
@@ -116,7 +117,7 @@ function useToggle(props, ref) {
     }, [valueTrue]);
     // collect all the return values that are dependent on the current value
     // of the input
-    const valueDependentProps = (0, react_1.useMemo)(() => ({
+    var valueDependentProps = (0, react_1.useMemo)(function () { return ({
         rootProps: {
             htmlFor: isRadio
                 ? !value || value === valueFalse
@@ -125,9 +126,11 @@ function useToggle(props, ref) {
                 : id,
         },
         label: label ? label : value,
-        value,
-    }), [value, valueFalse, isRadio, id, idTrue, idFalse, label]);
-    const Inputs = (0, react_1.useMemo)(() => isRadio ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.InputInvisible, { id: idFalse, ...inputProps, ...remainingInputProps, onKeyDown: handleKeyDown, type: "radio", value: valueFalse }), (0, jsx_runtime_1.jsx)(styles_1.InputInvisible, { id: idTrue, ...inputProps, ...remainingInputProps, onKeyDown: handleKeyDown, type: "radio", value: valueTrue })] })) : ((0, jsx_runtime_1.jsx)(styles_1.InputInvisible, { id: id, type: "checkbox", ...inputProps, ...remainingInputProps })), [
+        value: value,
+    }); }, [value, valueFalse, isRadio, id, idTrue, idFalse, label]);
+    var Inputs = (0, react_1.useMemo)(function () {
+        return isRadio ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.InputInvisible, tslib_1.__assign({ id: idFalse }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueFalse })), (0, jsx_runtime_1.jsx)(styles_1.InputInvisible, tslib_1.__assign({ id: idTrue }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueTrue }))] })) : ((0, jsx_runtime_1.jsx)(styles_1.InputInvisible, tslib_1.__assign({ id: id, type: "checkbox" }, inputProps, remainingInputProps)));
+    }, [
         inputProps,
         remainingInputProps,
         handleKeyDown,
@@ -141,9 +144,6 @@ function useToggle(props, ref) {
         // defaultValue,
     ]);
     // console.log("useToggle: render", value);
-    return {
-        ...valueDependentProps,
-        Inputs,
-    };
+    return tslib_1.__assign(tslib_1.__assign({}, valueDependentProps), { Inputs: Inputs });
 }
 exports.useToggle = useToggle;

package/node/Forms/antispam.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.decodeForm = exports.encodeForm = void 0;
-const yup_1 = require("yup");
-const utils_1 = require("@koine/utils");
+var yup_1 = require("yup");
+var utils_1 = require("@koine/utils");
 /**
  * Encode form
  *
@@ -13,19 +13,19 @@ const utils_1 = require("@koine/utils");
  * form data not created by user input.
  */
 function encodeForm(validationRules) {
-    const encoded = {};
-    const encodedNames = {};
-    for (const name in validationRules) {
-        if (!name.startsWith("_")) {
-            const encodedName = (0, utils_1.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 = (0, utils_1.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 = (0, yup_1.object)(encoded).required();
-    return { encodedSchema, encodedNames };
+    var encodedSchema = (0, yup_1.object)(encoded).required();
+    return { encodedSchema: encodedSchema, encodedNames: encodedNames };
 }
 exports.encodeForm = encodeForm;
 /**
@@ -38,9 +38,9 @@ exports.encodeForm = encodeForm;
  * which are considered programmatic form data not created by user input.
  */
 function decodeForm(formData) {
-    const json = {};
-    for (const encodedName in formData) {
-        const decodedName = (0, utils_1.decode)(encodedName);
+    var json = {};
+    for (var encodedName in formData) {
+        var decodedName = (0, utils_1.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/node/Forms/helpers.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.triggerChange = exports.triggerOnChange = exports.defaultOptionsFilterFn = exports.normaliseOptions = void 0;
-const utils_1 = require("@koine/utils");
-const normaliseOptions = (options = []) => {
-    return options.map((option) => {
+var utils_1 = require("@koine/utils");
+var normaliseOptions = function (options) {
+    if (options === void 0) { options = []; }
+    return options.map(function (option) {
         return (0, utils_1.isString)(option)
             ? {
                 label: option,
@@ -26,7 +27,7 @@ exports.defaultOptionsFilterFn = defaultOptionsFilterFn;
 function triggerOnChange(onChange, name, value) {
     // @ts-expect-error nevermind
     if (onChange)
-        onChange({ target: { name, value } });
+        onChange({ target: { name: name, value: value } });
 }
 exports.triggerOnChange = triggerOnChange;
 /**
@@ -34,18 +35,18 @@ exports.triggerOnChange = triggerOnChange;
  * @deprecated
  */
 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);
 }
 exports.triggerChange = triggerChange;

package/node/Forms/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./antispam"), exports);
 tslib_1.__exportStar(require("./Checkbox"), exports);
 tslib_1.__exportStar(require("./Input"), exports);
@@ -8,7 +8,6 @@ tslib_1.__exportStar(require("./InputGroup"), exports);
 tslib_1.__exportStar(require("./Feedback"), exports);
 tslib_1.__exportStar(require("./Field"), exports);
 tslib_1.__exportStar(require("./InputGroup"), exports);
-tslib_1.__exportStar(require("./Form"), exports);
 tslib_1.__exportStar(require("./Label"), exports);
 tslib_1.__exportStar(require("./Password"), exports);
 tslib_1.__exportStar(require("./Radio"), exports);