@koine/react 1.0.9 → 1.0.12

package/node/Form/Form.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineForm = exports.Form = exports.Fail = exports.Ok = exports.Collapsable = exports.Progress = exports.Overlay = exports.Root = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+// import { type MotionProps } from "framer-motion";
+var helpers_1 = require("../helpers");
+exports.Root = "form";
+exports.Overlay = "div";
+exports.Progress = "div";
+exports.Collapsable = "div";
+exports.Ok = null;
+exports.Fail = null;
+var Form = function (_a) {
+    var _Root = _a.Root, _Overlay = _a.Overlay, _Progress = _a.Progress, _Collapsable = _a.Collapsable, ok = _a.ok, fail = _a.fail, loading = _a.loading, _Ok = _a.Ok, _b = _a.okProps, okProps = _b === void 0 ? {
+        children: "Sent!",
+    } : _b, _Fail = _a.Fail, _c = _a.failProps, failProps = _c === void 0 ? {
+        children: "Failed.",
+    } : _c, collapseOnOk = _a.collapseOnOk, collapseOnFail = _a.collapseOnFail, _d = _a.okTimeout, okTimeout = _d === void 0 ? 3000 : _d, _e = _a.failTimeout, failTimeout = _e === void 0 ? 3000 : _e, children = _a.children, props = tslib_1.__rest(_a, ["Root", "Overlay", "Progress", "Collapsable", "ok", "fail", "loading", "Ok", "okProps", "Fail", "failProps", "collapseOnOk", "collapseOnFail", "okTimeout", "failTimeout", "children"]);
+    var _f = (0, react_1.useState)(""), open = _f[0], setOpen = _f[1];
+    var commonProps = {
+        head: null,
+        components: {
+            HeadIcon: null,
+        },
+    };
+    (0, react_1.useEffect)(function () {
+        if (!loading) {
+            if (ok)
+                setOpen("ok");
+            else if (fail)
+                setOpen("fail");
+        }
+    }, [ok, fail, loading]);
+    (0, react_1.useEffect)(function () {
+        var timeout;
+        if (open === "fail" && failTimeout) {
+            timeout = setTimeout(function () { return setOpen(""); }, failTimeout);
+        }
+        else if (open === "ok" && okTimeout) {
+            timeout = setTimeout(function () { return setOpen(""); }, okTimeout);
+        }
+        return function () {
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+        };
+    }, [open, failTimeout, okTimeout]);
+    var formExpanded = true;
+    if (collapseOnFail && fail)
+        formExpanded = false;
+    if (collapseOnOk && ok)
+        formExpanded = false;
+    return ((0, jsx_runtime_1.jsxs)(exports.Root, tslib_1.__assign({ method: "post", noValidate: true }, props, { children: [(0, jsx_runtime_1.jsx)(exports.Collapsable, tslib_1.__assign({}, commonProps, { "$open": formExpanded, recalc: loading, body: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, loading && ((0, jsx_runtime_1.jsx)(exports.Overlay, { children: (0, jsx_runtime_1.jsx)(exports.Progress, {}) }))] }) })), (0, jsx_runtime_1.jsx)(exports.Collapsable, tslib_1.__assign({}, commonProps, { "$open": open === "ok" && !loading, body: (0, jsx_runtime_1.jsx)(exports.Ok, tslib_1.__assign({}, okProps)) })), (0, jsx_runtime_1.jsx)(exports.Collapsable, tslib_1.__assign({}, commonProps, { "$open": open === "fail" && !loading, body: (0, jsx_runtime_1.jsx)(exports.Fail, tslib_1.__assign({}, failProps)) }))] })));
+};
+exports.Form = Form;
+exports.KoineForm = (0, helpers_1.extendComponent)(exports.Form, {
+    Root: exports.Root,
+    Overlay: exports.Overlay,
+    Progress: exports.Progress,
+    Collapsable: exports.Collapsable,
+    Ok: exports.Ok,
+    Fail: exports.Fail,
+});

package/node/{Forms/Form → Form}/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("./Form"), exports);

package/node/Form/sc/bare.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineForm = exports.Feedback = exports.Overlay = exports.Root = void 0;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var styled_1 = require("../../styles/styled");
+var Collapsable_1 = require("../../Collapsable");
+var Progress_1 = require("../../Progress");
+var Alert_1 = require("../../Alert");
+var helpers_1 = require("../../helpers");
+var _ = tslib_1.__importStar(require("../Form"));
+exports.Root = (0, styled_components_1.default)(_.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+exports.Overlay = (0, styled_components_1.default)(_.Overlay)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  z-index: 4;\n  ", "\n  ", "\n  background: rgba(var(--bodyBg--rgb),.8);\n  pointer-events: none;\n  backdrop-filter: blur(2px);\n"], ["\n  z-index: 4;\n  ", "\n  ", "\n  background: rgba(var(--bodyBg--rgb),.8);\n  pointer-events: none;\n  backdrop-filter: blur(2px);\n"])), styled_1.overlay, styled_1.centered);
+exports.Feedback = (0, styled_components_1.default)(Alert_1.Alert)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  padding: 2em 0;\n"], ["\n  padding: 2em 0;\n"])));
+exports.KoineForm = (0, helpers_1.extendComponent)(_.KoineForm, {
+    Root: exports.Root,
+    Overlay: exports.Overlay,
+    Progress: Progress_1.ProgressCircular,
+    Collapsable: Collapsable_1.Collapsable,
+    Ok: exports.Feedback,
+    Fail: exports.Feedback,
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/node/Forms/Checkbox/Checkbox.js

@@ -1,28 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = exports.CheckboxLabel = exports.CheckboxIndicator = exports.CheckboxToggle = exports.CheckboxRoot = 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 Toggle_1 = require("../Toggle");
-const useToggle_1 = require("../Toggle/useToggle");
-exports.CheckboxRoot = styled_components_1.default.label `
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-`;
-exports.CheckboxToggle = (0, styled_components_1.default)(Toggle_1.Toggle) `
-  pointer-events: none;
-`;
-exports.CheckboxIndicator = (0, styled_components_1.default)(Toggle_1.ToggleIndicatorSquared) ``;
-exports.CheckboxLabel = (0, styled_components_1.default)(Toggle_1.ToggleLabel) `
-  font-size: 0.8em;
-`;
+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 Toggle_1 = require("../Toggle");
+var useToggle_1 = require("../Toggle/useToggle");
+exports.CheckboxRoot = styled_components_1.default.label(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"])));
+exports.CheckboxToggle = (0, styled_components_1.default)(Toggle_1.Toggle)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  pointer-events: none;\n"], ["\n  pointer-events: none;\n"])));
+exports.CheckboxIndicator = (0, styled_components_1.default)(Toggle_1.ToggleIndicatorSquared)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject([""], [""])));
+exports.CheckboxLabel = (0, styled_components_1.default)(Toggle_1.ToggleLabel)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  font-size: 0.8em;\n"], ["\n  font-size: 0.8em;\n"])));
 /**
  * All logic and invisible Inputs come from the `useToggle` hook
  */
 exports.Checkbox = (0, react_1.forwardRef)(function Checkbox(props, ref) {
-    const { rootProps, Inputs, label } = (0, useToggle_1.useToggle)(props, ref);
-    return ((0, jsx_runtime_1.jsxs)(exports.CheckboxRoot, { ...rootProps, children: [(0, jsx_runtime_1.jsxs)(exports.CheckboxToggle, { children: [Inputs, (0, jsx_runtime_1.jsx)(exports.CheckboxIndicator, {})] }), label && (0, jsx_runtime_1.jsx)(exports.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)(exports.CheckboxRoot, tslib_1.__assign({}, rootProps, { children: [(0, jsx_runtime_1.jsxs)(exports.CheckboxToggle, { children: [Inputs, (0, jsx_runtime_1.jsx)(exports.CheckboxIndicator, {})] }), label && (0, jsx_runtime_1.jsx)(exports.CheckboxLabel, { children: label })] })));
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/node/Forms/Checkbox/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("./Checkbox"), exports);

package/node/Forms/Feedback/Feedback.js

@@ -1,15 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Feedback = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const Root = styled_components_1.default.div `
-  margin-top: 0.2em;
-  font-size: 12px;
-  ${(p) => (p.$danger ? `color: var(--danger);` : "")}
-`;
-const Feedback = ({ $danger, children }) => {
-    return ((0, jsx_runtime_1.jsx)(Root, { role: "alert", "$danger": $danger, children: children }));
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  margin-top: 0.2em;\n  font-size: 12px;\n  ", "\n"], ["\n  margin-top: 0.2em;\n  font-size: 12px;\n  ", "\n"])), function (p) { return (p.$danger ? "color: var(--danger);" : ""); });
+var Feedback = function (_a) {
+    var $danger = _a.$danger, children = _a.children;
+    return ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ role: "alert", "$danger": $danger }, { children: children })));
 };
 exports.Feedback = Feedback;
+var templateObject_1;

package/node/Forms/Feedback/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("./Feedback"), exports);

package/node/Forms/Field/Field.js

@@ -1,30 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Field = exports.FieldRoot = exports.FieldBase = exports.field = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = tslib_1.__importStar(require("styled-components"));
-const Feedback_1 = require("../Feedback");
-exports.field = (0, styled_components_1.css) `
-  padding-bottom: 20px;
-`;
-exports.FieldBase = styled_components_1.default.div `
-  ${exports.field}
-`;
-exports.FieldRoot = (0, styled_components_1.default)(exports.FieldBase) `
-  ${(p) => {
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = tslib_1.__importStar(require("styled-components"));
+var Feedback_1 = require("../Feedback");
+exports.field = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  padding-bottom: 20px;\n"], ["\n  padding-bottom: 20px;\n"])));
+exports.FieldBase = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.field);
+exports.FieldRoot = (0, styled_components_1.default)(exports.FieldBase)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
     return (p.$danger &&
-        `
-    color: var(--danger);
-    
-    textarea,
-    input,
-    select {
-      color: var(--danger);
-    }
-  `);
-}}
-`;
+        "\n    color: var(--danger);\n    \n    textarea,\n    input,\n    select {\n      color: var(--danger);\n    }\n  ");
+});
 /**
  * Yup's errors produce by these validations:
  *
@@ -37,17 +23,18 @@ exports.FieldRoot = (0, styled_components_1.default)(exports.FieldBase) `
  * We assume these as standard translations keys without needing to pass
  * a string into the validation, e.g. `required("mySpecialKey")`.
  */
-const YUP_ERROR_TYPES_AS_KEYS = {
+var YUP_ERROR_TYPES_AS_KEYS = {
     required: 1,
     email: 1,
 };
-const Field = ({ name, t, error, errors, children, ...props }) => {
-    const err = errors && name ? errors[name] : error;
-    let msg = "";
+var Field = function (_a) {
+    var name = _a.name, t = _a.t, error = _a.error, errors = _a.errors, children = _a.children, props = tslib_1.__rest(_a, ["name", "t", "error", "errors", "children"]);
+    var err = errors && name ? errors[name] : error;
+    var msg = "";
     if (err) {
         if (name && t && err.type !== "plain") {
-            const translationKey = err.type && YUP_ERROR_TYPES_AS_KEYS[err.type] ? err.type : "";
-            msg = t(`errors.${name}.${translationKey || err.message}`);
+            var translationKey = err.type && YUP_ERROR_TYPES_AS_KEYS[err.type] ? err.type : "";
+            msg = t("errors.".concat(name, ".").concat(translationKey || err.message));
         }
         else {
             msg = err.message;
@@ -59,6 +46,7 @@ const Field = ({ name, t, error, errors, children, ...props }) => {
     // useEffect(() => {
     //   i18n.addResourceBundle(locale, "core.Forms", null);
     // }, []);
-    return ((0, jsx_runtime_1.jsxs)(exports.FieldRoot, { "$danger": !!err, ...props, children: [children, msg && (0, jsx_runtime_1.jsx)(Feedback_1.Feedback, { "$danger": true, children: msg })] }));
+    return ((0, jsx_runtime_1.jsxs)(exports.FieldRoot, tslib_1.__assign({ "$danger": !!err }, props, { children: [children, msg && (0, jsx_runtime_1.jsx)(Feedback_1.Feedback, tslib_1.__assign({ "$danger": true }, { children: msg }))] })));
 };
 exports.Field = Field;
+var templateObject_1, templateObject_2, templateObject_3;

package/node/Forms/Field/FieldControl.js

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldControl = 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 utils_1 = require("@koine/utils");
-const Field_1 = require("./Field");
-const FieldHint_1 = require("./FieldHint");
-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 utils_1 = require("@koine/utils");
+var Field_1 = require("./Field");
+var FieldHint_1 = require("./FieldHint");
+var styles_1 = require("../styles");
 /**
  *
  * - it expects the `field` object from our `useForm` wrapper around react-hook-form
@@ -18,20 +19,23 @@ const styles_1 = require("../styles");
  * ```json
  * ```
  */
-const FieldControl = ({ control, register, setValue, name: maybeEncodedName, label, placeholder, hint, t, showError = true, children, encode, ...props }) => {
-    const name = encode ? (0, utils_1.decode)(maybeEncodedName) : maybeEncodedName;
-    const { errors } = (0, react_hook_form_1.useFormState)({ name, control });
-    const error = showError && errors[name] ? errors[name] : null;
-    const FormFieldContent = (0, react_1.useMemo)(() => children({
-        control,
-        register,
-        setValue,
-        name: maybeEncodedName,
-        // @see https://github.com/vinissimus/next-translate/pull/461
-        // @see https://github.com/vinissimus/next-translate/issues/429
-        label: label || t(`labels.${name}`, undefined, { default: "" }),
-        placeholder: placeholder || t(`placeholders.${name}`, undefined, { fallback: "" }),
-    }), [
+var FieldControl = function (_a) {
+    var control = _a.control, register = _a.register, setValue = _a.setValue, maybeEncodedName = _a.name, label = _a.label, placeholder = _a.placeholder, hint = _a.hint, t = _a.t, _b = _a.showError, showError = _b === void 0 ? true : _b, children = _a.children, encode = _a.encode, props = tslib_1.__rest(_a, ["control", "register", "setValue", "name", "label", "placeholder", "hint", "t", "showError", "children", "encode"]);
+    var name = encode ? (0, utils_1.decode)(maybeEncodedName) : maybeEncodedName;
+    var errors = (0, react_hook_form_1.useFormState)({ name: name, control: control }).errors;
+    var error = showError && errors[name] ? errors[name] : null;
+    var FormFieldContent = (0, react_1.useMemo)(function () {
+        return children({
+            control: control,
+            register: register,
+            setValue: setValue,
+            name: maybeEncodedName,
+            // @see https://github.com/vinissimus/next-translate/pull/461
+            // @see https://github.com/vinissimus/next-translate/issues/429
+            label: label || t("labels.".concat(name), undefined, { default: "" }),
+            placeholder: placeholder || t("placeholders.".concat(name), undefined, { fallback: "" }),
+        });
+    }, [
         children,
         control,
         register,
@@ -42,6 +46,6 @@ const FieldControl = ({ control, register, setValue, name: maybeEncodedName, lab
         maybeEncodedName,
         placeholder,
     ]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Field_1.Field, { name: maybeEncodedName, t: t, error: error, ...props, children: [FormFieldContent, hint && (0, jsx_runtime_1.jsx)(FieldHint_1.FieldHint, { children: hint })] }), encode && register && (0, jsx_runtime_1.jsx)(styles_1.InputHoneypot, { ...register(name) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Field_1.Field, tslib_1.__assign({ name: maybeEncodedName, t: t, error: error }, props, { children: [FormFieldContent, hint && (0, jsx_runtime_1.jsx)(FieldHint_1.FieldHint, { children: hint })] })), encode && register && (0, jsx_runtime_1.jsx)(styles_1.InputHoneypot, tslib_1.__assign({}, register(name)))] }));
 };
 exports.FieldControl = FieldControl;

package/node/Forms/Field/FieldHint.js

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldHint = void 0;
-const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-exports.FieldHint = styled_components_1.default.div `
-  padding-top: 0.6em;
-  opacity: 0.7;
-  font-size: 75%;
-`;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.FieldHint = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  padding-top: 0.6em;\n  opacity: 0.7;\n  font-size: 75%;\n"], ["\n  padding-top: 0.6em;\n  opacity: 0.7;\n  font-size: 75%;\n"])));
+var templateObject_1;

package/node/Forms/Field/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("./Field"), exports);
 tslib_1.__exportStar(require("./FieldControl"), exports);

package/node/Forms/Input/Input.js

@@ -1,27 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = exports.InputNative = exports.InputPost = exports.InputPre = exports.InputMain = exports.InputWrap = 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.InputWrap = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-exports.InputMain = styled_components_1.default.div `
-  flex: 1;
-`;
-exports.InputPre = styled_components_1.default.div ``;
-exports.InputPost = styled_components_1.default.div ``;
-exports.InputNative = styled_components_1.default.input `
-  ${styles_1.inputBase}
-  ${styles_1.inputFocus}
-`;
-exports.Input = (0, react_1.forwardRef)(function Input({ register, name, label, ...props }, ref) {
+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.InputWrap = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
+exports.InputMain = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+exports.InputPre = styled_components_1.default.div(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject([""], [""])));
+exports.InputPost = styled_components_1.default.div(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject([""], [""])));
+exports.InputNative = styled_components_1.default.input(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), styles_1.inputBase, styles_1.inputFocus);
+exports.Input = (0, react_1.forwardRef)(function Input(_a, ref) {
+    var register = _a.register, name = _a.name, label = _a.label, props = tslib_1.__rest(_a, ["register", "name", "label"]);
     // console.log("Input: render");
-    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.InputNative, { ...(register ? register(name) : { name, ref }), ...props })] }));
+    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.InputNative, tslib_1.__assign({}, (register ? register(name) : { name: name, ref: ref }), props))] }));
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/node/Forms/Input/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("./Input"), exports);

package/node/Forms/InputGroup/InputGroup.js

@@ -1,47 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputGroup = exports.InputGroupButtonPost = exports.InputGroupButtonPre = exports.InputGroupMain = exports.InputGroupRoot = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const Buttons_1 = require("../../Buttons");
-const Field_1 = require("../Field");
-const media_1 = require("../../styles/media");
-exports.InputGroupRoot = styled_components_1.default.div `
-  ${Field_1.field}
-  display: flex;
-  ${media_1.max.sm} {
-    flex-direction: column;
-  }
-`;
-exports.InputGroupMain = styled_components_1.default.div `
-  flex: 1;
-`;
-exports.InputGroupButtonPre = (0, styled_components_1.default)(Buttons_1.KoineButton) `
-  ${media_1.max.sm} {
-    border-bottom: 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  ${media_1.min.sm} {
-    border-right: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-`;
-exports.InputGroupButtonPost = (0, styled_components_1.default)(Buttons_1.KoineButton) `
-  ${media_1.max.sm} {
-    border-top: 0;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-  ${media_1.min.sm} {
-    border-left: 0;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-`;
-const InputGroup = ({ pre, post, Button = Buttons_1.KoineButton, btnProps = {}, children, ...props }) => {
-    return ((0, jsx_runtime_1.jsxs)(exports.InputGroupRoot, { ...props, children: [pre && (0, jsx_runtime_1.jsx)(exports.InputGroupButtonPre, { as: Button, ...btnProps }), (0, jsx_runtime_1.jsx)(exports.InputGroupMain, { children: children }), post && (0, jsx_runtime_1.jsx)(exports.InputGroupButtonPost, { as: Button, ...btnProps })] }));
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var Buttons_1 = require("../../Buttons");
+var Field_1 = require("../Field");
+var media_1 = require("../../styles/media");
+exports.InputGroupRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n  display: flex;\n  ", " {\n    flex-direction: column;\n  }\n"], ["\n  ", "\n  display: flex;\n  ", " {\n    flex-direction: column;\n  }\n"])), Field_1.field, media_1.max.sm);
+exports.InputGroupMain = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+exports.InputGroupButtonPre = (0, styled_components_1.default)(Buttons_1.KoineButton)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  ", " {\n    border-bottom: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  ", " {\n    border-right: 0;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n"], ["\n  ", " {\n    border-bottom: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  ", " {\n    border-right: 0;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n"])), media_1.max.sm, media_1.min.sm);
+exports.InputGroupButtonPost = (0, styled_components_1.default)(Buttons_1.KoineButton)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  ", " {\n    border-top: 0;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n  ", " {\n    border-left: 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n"], ["\n  ", " {\n    border-top: 0;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n  ", " {\n    border-left: 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n"])), media_1.max.sm, media_1.min.sm);
+var InputGroup = function (_a) {
+    var pre = _a.pre, post = _a.post, _b = _a.Button, Button = _b === void 0 ? Buttons_1.KoineButton : _b, _c = _a.btnProps, btnProps = _c === void 0 ? {} : _c, children = _a.children, props = tslib_1.__rest(_a, ["pre", "post", "Button", "btnProps", "children"]);
+    return ((0, jsx_runtime_1.jsxs)(exports.InputGroupRoot, tslib_1.__assign({}, props, { children: [pre && (0, jsx_runtime_1.jsx)(exports.InputGroupButtonPre, tslib_1.__assign({ as: Button }, btnProps)), (0, jsx_runtime_1.jsx)(exports.InputGroupMain, { children: children }), post && (0, jsx_runtime_1.jsx)(exports.InputGroupButtonPost, tslib_1.__assign({ as: Button }, btnProps))] })));
 };
 exports.InputGroup = InputGroup;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/node/Forms/InputGroup/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("./InputGroup"), exports);

package/node/Forms/Label/Label.js

@@ -1,28 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Label = exports.labelMaterial = exports.label = void 0;
-const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-exports.label = `
-  display: flex;
-  font-size: 13px;
-  cursor: pointer;
-`;
-exports.labelMaterial = `
-  z-index: 2;
-  position: relative;
-  display: inline-block;
-  padding: 0 5px;
-  font-weight: 100;
-  font-size: 10px;
-  background: var(--bodyBg);
-  transform: translateY(-0.3em) translateX(1em);
-  cursor: pointer;
-
-  + * {
-    margin-top: -1em;
-  }
-`;
-exports.Label = styled_components_1.default.label `
-  ${exports.labelMaterial}
-`;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.label = "\n  display: flex;\n  font-size: 13px;\n  cursor: pointer;\n";
+exports.labelMaterial = "\n  z-index: 2;\n  position: relative;\n  display: inline-block;\n  padding: 0 5px;\n  font-weight: 100;\n  font-size: 10px;\n  background: var(--bodyBg);\n  transform: translateY(-0.3em) translateX(1em);\n  cursor: pointer;\n\n  + * {\n    margin-top: -1em;\n  }\n";
+exports.Label = styled_components_1.default.label(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.labelMaterial);
+var templateObject_1;

package/node/Forms/Label/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("./Label"), exports);

package/node/Forms/Password/Password.js

@@ -1,34 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Password = exports.PasswordInputNative = 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 im_1 = require("react-icons/im");
-const Label_1 = require("../Label/Label");
-const Input_1 = require("../Input/Input");
-const ICON_WIDTH = "2em";
-const PasswordInputWrap = styled_components_1.default.div `
-  position: relative;
-`;
-exports.PasswordInputNative = (0, styled_components_1.default)(Input_1.InputNative) `
-  position: relative;
-  padding-right: ${ICON_WIDTH};
-`;
-const PasswordIcon = styled_components_1.default.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;
-`;
-exports.Password = (0, react_1.forwardRef)(function Password({ register, name, label, ...props }, ref) {
-    const [visible, setVisible] = (0, react_1.useState)(false);
-    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.jsxs)(PasswordInputWrap, { children: [(0, jsx_runtime_1.jsx)(exports.PasswordInputNative, { type: visible ? "text" : "password", autoComplete: "new-password", ...(register ? register(name) : { name, ref }), ...props }), (0, jsx_runtime_1.jsx)(PasswordIcon, { onClick: () => setVisible((prev) => !prev), children: visible ? (0, jsx_runtime_1.jsx)(im_1.ImEyeBlocked, {}) : (0, jsx_runtime_1.jsx)(im_1.ImEye, {}) })] })] }));
+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 im_1 = require("react-icons/im");
+var Label_1 = require("../Label/Label");
+var Input_1 = require("../Input/Input");
+var ICON_WIDTH = "2em";
+var PasswordInputWrap = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+exports.PasswordInputNative = (0, styled_components_1.default)(Input_1.InputNative)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  position: relative;\n  padding-right: ", ";\n"], ["\n  position: relative;\n  padding-right: ", ";\n"])), ICON_WIDTH);
+var PasswordIcon = styled_components_1.default.span(templateObject_3 || (templateObject_3 = tslib_1.__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);
+exports.Password = (0, react_1.forwardRef)(function Password(_a, ref) {
+    var register = _a.register, name = _a.name, label = _a.label, props = tslib_1.__rest(_a, ["register", "name", "label"]);
+    var _b = (0, react_1.useState)(false), visible = _b[0], setVisible = _b[1];
+    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.jsxs)(PasswordInputWrap, { children: [(0, jsx_runtime_1.jsx)(exports.PasswordInputNative, tslib_1.__assign({ type: visible ? "text" : "password", autoComplete: "new-password" }, (register ? register(name) : { name: name, ref: ref }), props)), (0, jsx_runtime_1.jsx)(PasswordIcon, tslib_1.__assign({ onClick: function () { return setVisible(function (prev) { return !prev; }); } }, { children: visible ? (0, jsx_runtime_1.jsx)(im_1.ImEyeBlocked, {}) : (0, jsx_runtime_1.jsx)(im_1.ImEye, {}) }))] })] }));
 });
+var templateObject_1, templateObject_2, templateObject_3;

package/node/Forms/Password/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("./Password"), exports);