@koine/react 1.0.11 → 1.0.12

package/Forms/Checkbox/Checkbox.js

@@ -1,24 +1,18 @@
+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";
 import { Toggle, ToggleLabel, ToggleIndicatorSquared } from "../Toggle";
 import { useToggle } from "../Toggle/useToggle";
-export const CheckboxRoot = styled.label `
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-`;
-export const CheckboxToggle = styled(Toggle) `
-  pointer-events: none;
-`;
-export const CheckboxIndicator = styled(ToggleIndicatorSquared) ``;
-export const CheckboxLabel = styled(ToggleLabel) `
-  font-size: 0.8em;
-`;
+export var CheckboxRoot = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"])));
+export var CheckboxToggle = styled(Toggle)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  pointer-events: none;\n"], ["\n  pointer-events: none;\n"])));
+export var CheckboxIndicator = styled(ToggleIndicatorSquared)(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+export var CheckboxLabel = styled(ToggleLabel)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 0.8em;\n"], ["\n  font-size: 0.8em;\n"])));
 /**
  * All logic and invisible Inputs come from the `useToggle` hook
  */
-export const Checkbox = forwardRef(function Checkbox(props, ref) {
-    const { rootProps, Inputs, label } = useToggle(props, ref);
-    return (_jsxs(CheckboxRoot, { ...rootProps, children: [_jsxs(CheckboxToggle, { children: [Inputs, _jsx(CheckboxIndicator, {})] }), label && _jsx(CheckboxLabel, { children: label })] }));
+export var Checkbox = forwardRef(function Checkbox(props, ref) {
+    var _a = useToggle(props, ref), rootProps = _a.rootProps, Inputs = _a.Inputs, label = _a.label;
+    return (_jsxs(CheckboxRoot, __assign({}, rootProps, { children: [_jsxs(CheckboxToggle, { children: [Inputs, _jsx(CheckboxIndicator, {})] }), label && _jsx(CheckboxLabel, { children: label })] })));
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Forms/Feedback/Feedback.js

@@ -1,10 +1,9 @@
+import { __assign, __makeTemplateObject } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
-const Root = styled.div `
-  margin-top: 0.2em;
-  font-size: 12px;
-  ${(p) => (p.$danger ? `color: var(--danger);` : "")}
-`;
-export const Feedback = ({ $danger, children }) => {
-    return (_jsx(Root, { role: "alert", "$danger": $danger, children: children }));
+var Root = styled.div(templateObject_1 || (templateObject_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);" : ""); });
+export var Feedback = function (_a) {
+    var $danger = _a.$danger, children = _a.children;
+    return (_jsx(Root, __assign({ role: "alert", "$danger": $danger }, { children: children })));
 };
+var templateObject_1;

package/Forms/Field/Field.js

@@ -1,26 +1,13 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
 import { Feedback } from "../Feedback";
-export const field = css `
-  padding-bottom: 20px;
-`;
-export const FieldBase = styled.div `
-  ${field}
-`;
-export const FieldRoot = styled(FieldBase) `
-  ${(p) => {
+export var field = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-bottom: 20px;\n"], ["\n  padding-bottom: 20px;\n"])));
+export var FieldBase = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), field);
+export var FieldRoot = styled(FieldBase)(templateObject_3 || (templateObject_3 = __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:
  *
@@ -33,17 +20,18 @@ export const FieldRoot = styled(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,
 };
-export const Field = ({ name, t, error, errors, children, ...props }) => {
-    const err = errors && name ? errors[name] : error;
-    let msg = "";
+export var Field = function (_a) {
+    var name = _a.name, t = _a.t, error = _a.error, errors = _a.errors, children = _a.children, props = __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;
@@ -55,5 +43,6 @@ export const Field = ({ name, t, error, errors, children, ...props }) => {
     // useEffect(() => {
     //   i18n.addResourceBundle(locale, "core.Forms", null);
     // }, []);
-    return (_jsxs(FieldRoot, { "$danger": !!err, ...props, children: [children, msg && _jsx(Feedback, { "$danger": true, children: msg })] }));
+    return (_jsxs(FieldRoot, __assign({ "$danger": !!err }, props, { children: [children, msg && _jsx(Feedback, __assign({ "$danger": true }, { children: msg }))] })));
 };
+var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Field/FieldControl.js

@@ -1,3 +1,4 @@
+import { __assign, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useFormState } from "react-hook-form";
@@ -15,20 +16,23 @@ import { InputHoneypot } from "../styles";
  * ```json
  * ```
  */
-export const FieldControl = ({ control, register, setValue, name: maybeEncodedName, label, placeholder, hint, t, showError = true, children, encode, ...props }) => {
-    const name = encode ? decode(maybeEncodedName) : maybeEncodedName;
-    const { errors } = useFormState({ name, control });
-    const error = showError && errors[name] ? errors[name] : null;
-    const FormFieldContent = 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: "" }),
-    }), [
+export 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 = __rest(_a, ["control", "register", "setValue", "name", "label", "placeholder", "hint", "t", "showError", "children", "encode"]);
+    var name = encode ? decode(maybeEncodedName) : maybeEncodedName;
+    var errors = useFormState({ name: name, control: control }).errors;
+    var error = showError && errors[name] ? errors[name] : null;
+    var FormFieldContent = 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,
@@ -39,5 +43,5 @@ export const FieldControl = ({ control, register, setValue, name: maybeEncodedNa
         maybeEncodedName,
         placeholder,
     ]);
-    return (_jsxs(_Fragment, { children: [_jsxs(Field, { name: maybeEncodedName, t: t, error: error, ...props, children: [FormFieldContent, hint && _jsx(FieldHint, { children: hint })] }), encode && register && _jsx(InputHoneypot, { ...register(name) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Field, __assign({ name: maybeEncodedName, t: t, error: error }, props, { children: [FormFieldContent, hint && _jsx(FieldHint, { children: hint })] })), encode && register && _jsx(InputHoneypot, __assign({}, register(name)))] }));
 };

package/Forms/Field/FieldHint.js

@@ -1,6 +1,4 @@
+import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export const FieldHint = styled.div `
-  padding-top: 0.6em;
-  opacity: 0.7;
-  font-size: 75%;
-`;
+export var FieldHint = styled.div(templateObject_1 || (templateObject_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/Forms/Input/Input.js

@@ -1,23 +1,17 @@
+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 InputWrap = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-export const InputMain = styled.div `
-  flex: 1;
-`;
-export const InputPre = styled.div ``;
-export const InputPost = styled.div ``;
-export const InputNative = styled.input `
-  ${inputBase}
-  ${inputFocus}
-`;
-export const Input = forwardRef(function Input({ register, name, label, ...props }, ref) {
+export var InputWrap = styled.div(templateObject_1 || (templateObject_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"])));
+export var InputMain = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+export var InputPre = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+export var InputPost = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
+export var InputNative = styled.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), inputBase, inputFocus);
+export var Input = forwardRef(function Input(_a, ref) {
+    var register = _a.register, name = _a.name, label = _a.label, props = __rest(_a, ["register", "name", "label"]);
     // console.log("Input: render");
-    return (_jsxs(_Fragment, { children: [label && _jsx(Label, { children: label }), _jsx(InputNative, { ...(register ? register(name) : { name, ref }), ...props })] }));
+    return (_jsxs(_Fragment, { children: [label && _jsx(Label, { children: label }), _jsx(InputNative, __assign({}, (register ? register(name) : { name: name, ref: ref }), props))] }));
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Forms/InputGroup/InputGroup.js

@@ -1,42 +1,15 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { KoineButton } from "../../Buttons";
 import { field } from "../Field";
 import { max, min } from "../../styles/media";
-export const InputGroupRoot = styled.div `
-  ${field}
-  display: flex;
-  ${max.sm} {
-    flex-direction: column;
-  }
-`;
-export const InputGroupMain = styled.div `
-  flex: 1;
-`;
-export const InputGroupButtonPre = styled(KoineButton) `
-  ${max.sm} {
-    border-bottom: 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  ${min.sm} {
-    border-right: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-`;
-export const InputGroupButtonPost = styled(KoineButton) `
-  ${max.sm} {
-    border-top: 0;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-  ${min.sm} {
-    border-left: 0;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-`;
-export const InputGroup = ({ pre, post, Button = KoineButton, btnProps = {}, children, ...props }) => {
-    return (_jsxs(InputGroupRoot, { ...props, children: [pre && _jsx(InputGroupButtonPre, { as: Button, ...btnProps }), _jsx(InputGroupMain, { children: children }), post && _jsx(InputGroupButtonPost, { as: Button, ...btnProps })] }));
+export var InputGroupRoot = styled.div(templateObject_1 || (templateObject_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, max.sm);
+export var InputGroupMain = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+export var InputGroupButtonPre = styled(KoineButton)(templateObject_3 || (templateObject_3 = __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"])), max.sm, min.sm);
+export var InputGroupButtonPost = styled(KoineButton)(templateObject_4 || (templateObject_4 = __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"])), max.sm, min.sm);
+export var InputGroup = function (_a) {
+    var pre = _a.pre, post = _a.post, _b = _a.Button, Button = _b === void 0 ? KoineButton : _b, _c = _a.btnProps, btnProps = _c === void 0 ? {} : _c, children = _a.children, props = __rest(_a, ["pre", "post", "Button", "btnProps", "children"]);
+    return (_jsxs(InputGroupRoot, __assign({}, props, { children: [pre && _jsx(InputGroupButtonPre, __assign({ as: Button }, btnProps)), _jsx(InputGroupMain, { children: children }), post && _jsx(InputGroupButtonPost, __assign({ as: Button }, btnProps))] })));
 };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Forms/Label/Label.js

@@ -1,24 +1,6 @@
+import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export const label = `
-  display: flex;
-  font-size: 13px;
-  cursor: pointer;
-`;
-export const 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;
-  }
-`;
-export const Label = styled.label `
-  ${labelMaterial}
-`;
+export var label = "\n  display: flex;\n  font-size: 13px;\n  cursor: pointer;\n";
+export var 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";
+export var Label = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), labelMaterial);
+var templateObject_1;

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
@@ -9,72 +10,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { stateFocus } from "../../styles/styled";
 import { useId } from "../../hooks/useId";
-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" }) })] }));
+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;