@koine/react 2.0.0-beta.1 → 2.0.0-beta.11

package/Form/Form.mjs

@@ -1,61 +1,95 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 // import type { MotionProps } from "framer-motion";
-import { extendComponent, } from "../helpers";
-export var Root = "form";
-export var Overlay = "div";
-export var Progress = "div";
-export var Collapsable = "div";
-export var Ok = null;
-export var Fail = null;
-export 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 = __rest(_a, ["Root", "Overlay", "Progress", "Collapsable", "ok", "fail", "loading", "Ok", "okProps", "Fail", "failProps", "collapseOnOk", "collapseOnFail", "okTimeout", "failTimeout", "children"]);
-    var _f = useState(""), open = _f[0], setOpen = _f[1];
-    var commonProps = {
+import { extendComponent } from "../helpers";
+export const Root = "form";
+export const Overlay = "div";
+export const Progress = "div";
+export const Collapsable = "div";
+export const Ok = null;
+export const Fail = null;
+export const Form = ({ Root: _Root, Overlay: _Overlay, Progress: _Progress, Collapsable: _Collapsable, ok, fail, loading, Ok: _Ok, okProps = {
+    children: "Sent!"
+}, Fail: _Fail, failProps = {
+    children: "Failed."
+}, collapseOnOk, collapseOnFail, okTimeout = 3000, failTimeout = 3000, children, ...props })=>{
+    const [open, setOpen] = useState("");
+    const commonProps = {
         head: null,
         components: {
-            HeadIcon: null,
-        },
+            HeadIcon: null
+        }
     };
-    useEffect(function () {
+    useEffect(()=>{
         if (!loading) {
-            if (ok)
-                setOpen("ok");
-            else if (fail)
-                setOpen("fail");
+            if (ok) setOpen("ok");
+            else if (fail) setOpen("fail");
         }
-    }, [ok, fail, loading]);
-    useEffect(function () {
-        var timeout;
+    }, [
+        ok,
+        fail,
+        loading
+    ]);
+    useEffect(()=>{
+        let timeout;
         if (open === "fail" && failTimeout) {
-            timeout = setTimeout(function () { return setOpen(""); }, failTimeout);
-        }
-        else if (open === "ok" && okTimeout) {
-            timeout = setTimeout(function () { return setOpen(""); }, okTimeout);
+            timeout = setTimeout(()=>setOpen(""), failTimeout);
+        } else if (open === "ok" && okTimeout) {
+            timeout = setTimeout(()=>setOpen(""), okTimeout);
         }
-        return function () {
+        return ()=>{
             if (timeout) {
                 clearTimeout(timeout);
             }
         };
-    }, [open, failTimeout, okTimeout]);
-    var formExpanded = true;
-    if (collapseOnFail && fail)
-        formExpanded = false;
-    if (collapseOnOk && ok)
-        formExpanded = false;
-    return (_jsxs(Root, __assign({ method: "post", noValidate: true }, props, { children: [_jsx(Collapsable, __assign({}, commonProps, { "$open": formExpanded, recalc: loading, body: _jsxs(_Fragment, { children: [children, loading && (_jsx(Overlay, { children: _jsx(Progress, {}) }))] }) })), _jsx(Collapsable, __assign({}, commonProps, { "$open": open === "ok" && !loading, body: _jsx(Ok, __assign({}, okProps)) })), _jsx(Collapsable, __assign({}, commonProps, { "$open": open === "fail" && !loading, body: _jsx(Fail, __assign({}, failProps)) }))] })));
+    }, [
+        open,
+        failTimeout,
+        okTimeout
+    ]);
+    let formExpanded = true;
+    if (collapseOnFail && fail) formExpanded = false;
+    if (collapseOnOk && ok) formExpanded = false;
+    return /*#__PURE__*/ _jsxs(Root, {
+        method: "post",
+        noValidate: true,
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx(Collapsable, {
+                ...commonProps,
+                $open: formExpanded,
+                recalc: loading,
+                body: /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        children,
+                        loading && /*#__PURE__*/ _jsx(Overlay, {
+                            children: /*#__PURE__*/ _jsx(Progress, {})
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(Collapsable, {
+                ...commonProps,
+                $open: open === "ok" && !loading,
+                body: /*#__PURE__*/ _jsx(Ok, {
+                    ...okProps
+                })
+            }),
+            /*#__PURE__*/ _jsx(Collapsable, {
+                ...commonProps,
+                $open: open === "fail" && !loading,
+                body: /*#__PURE__*/ _jsx(Fail, {
+                    ...failProps
+                })
+            })
+        ]
+    });
 };
-export var KoineForm = extendComponent(Form, {
-    Root: Root,
-    Overlay: Overlay,
-    Progress: Progress,
-    Collapsable: Collapsable,
-    Ok: Ok,
-    Fail: Fail,
-});
+export const KoineForm = extendComponent(Form, {
+    Root,
+    Overlay,
+    Progress,
+    Collapsable,
+    Ok,
+    Fail
+}); // export default Form;

package/Form/sc/bare.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 export type { KoineFormProps } from "../Form";
-export declare const Root: import("styled-components").StyledComponent<NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref">>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const Overlay: import("styled-components").StyledComponent<NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const Feedback: import("styled-components").StyledComponent<({ $danger, children, ...props }: import("../../Alert").AlertProps) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const Root: any;
+export declare const Overlay: any;
+export declare const Feedback: any;
 export declare const KoineForm: ((props: {
     action: string;
     ok?: boolean | undefined;
@@ -30,8 +30,8 @@ export declare const KoineForm: ((props: {
         children?: import("react").ReactNode;
     }>>;
 }) => import("react").FunctionComponentElement<any>) & {
-    Root: import("styled-components").StyledComponent<NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref">>>, import("styled-components").DefaultTheme, {}, never>;
-    Overlay: import("styled-components").StyledComponent<NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>>, import("styled-components").DefaultTheme, {}, never>;
+    Root: any;
+    Overlay: any;
     Progress: ({ size, thickness, color, ...props }: {
         [x: string]: any;
         size?: string | undefined;
@@ -39,12 +39,12 @@ export declare const KoineForm: ((props: {
         color?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     Collapsable: null;
-    Ok: import("styled-components").StyledComponent<({ $danger, children, ...props }: import("../../Alert").AlertProps) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
-    Fail: import("styled-components").StyledComponent<({ $danger, children, ...props }: import("../../Alert").AlertProps) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+    Ok: any;
+    Fail: any;
 } & {
     defaultProps: {
-        Root: import("styled-components").StyledComponent<NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref">>>, import("styled-components").DefaultTheme, {}, never>;
-        Overlay: import("styled-components").StyledComponent<NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>>, import("styled-components").DefaultTheme, {}, never>;
+        Root: any;
+        Overlay: any;
         Progress: ({ size, thickness, color, ...props }: {
             [x: string]: any;
             size?: string | undefined;
@@ -52,7 +52,7 @@ export declare const KoineForm: ((props: {
             color?: string | undefined;
         }) => import("react/jsx-runtime").JSX.Element;
         Collapsable: null;
-        Ok: import("styled-components").StyledComponent<({ $danger, children, ...props }: import("../../Alert").AlertProps) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
-        Fail: import("styled-components").StyledComponent<({ $danger, children, ...props }: import("../../Alert").AlertProps) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+        Ok: any;
+        Fail: any;
     };
 };

package/Form/sc/bare.mjs

@@ -1,20 +1,29 @@
-import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-import { overlay, centered } from "../../styles/styled";
+import { Alert } from "../../Alert";
 import { Collapsable } from "../../Collapsable";
 import { ProgressCircular } from "../../Progress";
-import { Alert } from "../../Alert";
 import { extendComponent } from "../../helpers";
+import { centered, overlay } from "../../styles/styled";
 import * as _ from "../Form";
-export var Root = styled(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-export var Overlay = styled(_.Overlay)(templateObject_2 || (templateObject_2 = __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"])), overlay, centered);
-export var Feedback = styled(Alert)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 2em 0;\n"], ["\n  padding: 2em 0;\n"])));
-export var KoineForm = extendComponent(_.KoineForm, {
-    Root: Root,
-    Overlay: Overlay,
+export const Root = styled(_.Root)`
+  position: relative;
+`;
+export const Overlay = styled(_.Overlay)`
+  z-index: 4;
+  ${overlay}
+  ${centered}
+  background: rgba(var(--bodyBg--rgb),.8);
+  pointer-events: none;
+  backdrop-filter: blur(2px);
+`;
+export const Feedback = styled(Alert)`
+  padding: 2em 0;
+`;
+export const KoineForm = extendComponent(_.KoineForm, {
+    Root,
+    Overlay,
     Progress: ProgressCircular,
-    Collapsable: Collapsable,
+    Collapsable,
     Ok: Feedback,
-    Fail: Feedback,
+    Fail: Feedback
 });
-var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Checkbox/Checkbox.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { UseToggleProps } from "../Toggle/useToggle";
-export declare const CheckboxRoot: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
-export declare const CheckboxToggle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const CheckboxIndicator: import("styled-components").StyledComponent<(props: unknown) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
-export declare const CheckboxLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const CheckboxRoot: any;
+export declare const CheckboxToggle: any;
+export declare const CheckboxIndicator: any;
+export declare const CheckboxLabel: any;
 export type CheckboxProps = UseToggleProps;
 /**
  * All logic and invisible Inputs come from the `useToggle` hook

package/Forms/Checkbox/Checkbox.mjs

@@ -1,18 +1,36 @@
-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 { Toggle, ToggleIndicatorSquared, ToggleLabel } from "../Toggle";
 import { useToggle } from "../Toggle/useToggle";
-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"])));
+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;
+`;
 /**
  * All logic and invisible Inputs come from the `useToggle` hook
- */
-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 })] })));
+ */ export const Checkbox = /*#__PURE__*/ forwardRef(function Checkbox(props, ref) {
+    const { rootProps, Inputs, label } = useToggle(props, ref);
+    return /*#__PURE__*/ _jsxs(CheckboxRoot, {
+        ...rootProps,
+        children: [
+            /*#__PURE__*/ _jsxs(CheckboxToggle, {
+                children: [
+                    Inputs,
+                    /*#__PURE__*/ _jsx(CheckboxIndicator, {})
+                ]
+            }),
+            label && /*#__PURE__*/ _jsx(CheckboxLabel, {
+                children: label
+            })
+        ]
+    });
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Forms/Feedback/Feedback.mjs

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

package/Forms/Field/Field.d.ts

@@ -2,10 +2,8 @@
 import type { FieldError as RHF_FieldError, FieldErrors as RHF_FieldErrors } from "react-hook-form";
 import type { Translate } from "../../types";
 export declare const field: import("styled-components").FlattenSimpleInterpolation;
-export declare const FieldBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const FieldRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    $danger: boolean;
-}, never>;
+export declare const FieldBase: any;
+export declare const FieldRoot: any;
 /**
  * Yup's errors produce by these validations:
  *

package/Forms/Field/Field.mjs

@@ -1,22 +1,32 @@
-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 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 &&
-        "\n    color: var(--danger);\n    \n    textarea,\n    input,\n    select {\n      color: var(--danger);\n    }\n  ");
-});
-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 = "";
+export const field = css`
+  padding-bottom: 20px;
+`;
+export const FieldBase = styled.div`
+  ${field}
+`;
+export const FieldRoot = styled(FieldBase)`
+  ${(p)=>{
+    return p.$danger && `
+    color: var(--danger);
+    
+    textarea,
+    input,
+    select {
+      color: var(--danger);
+    }
+  `;
+}}
+`;
+export const Field = ({ name, t, error, errors, children, ...props })=>{
+    const err = errors && name ? errors[name] : error;
+    let msg = "";
     if (err) {
         if (name && t && err.type !== "plain") {
-            msg = t("errors.".concat(name, ".").concat(err.type || err.message));
-        }
-        else {
+            msg = t(`errors.${name}.${err.type || err.message}`);
+        } else {
             msg = err.message;
         }
     }
@@ -26,6 +36,15 @@ export var Field = function (_a) {
     // useEffect(() => {
     //   i18n.addResourceBundle(locale, "core.Forms", null);
     // }, []);
-    return (_jsxs(FieldRoot, __assign({ "$danger": !!err }, props, { children: [children, msg && _jsx(Feedback, { "$danger": true, children: msg })] })));
+    return /*#__PURE__*/ _jsxs(FieldRoot, {
+        $danger: !!err,
+        ...props,
+        children: [
+            children,
+            msg && /*#__PURE__*/ _jsx(Feedback, {
+                $danger: true,
+                children: msg
+            })
+        ]
+    });
 };
-var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Field/FieldControl.mjs

@@ -1,11 +1,10 @@
-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";
 import decode from "@koine/utils/decode";
+import { InputHoneypot } from "../styles";
 import { Field } from "./Field";
 import { FieldHint } from "./FieldHint";
-import { InputHoneypot } from "../styles";
 /**
  *
  * - it expects the `field` object from our `useForm` wrapper around react-hook-form
@@ -15,24 +14,27 @@ import { InputHoneypot } from "../styles";
  *
  * ```json
  * ```
- */
-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,
+ */ 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.".concat(name), undefined, { default: "" }),
-            placeholder: placeholder || t("placeholders.".concat(name), undefined, { fallback: "" }),
-        });
-    }, [
+            label: label || t(`labels.${name}`, undefined, {
+                default: ""
+            }),
+            placeholder: placeholder || t(`placeholders.${name}`, undefined, {
+                fallback: ""
+            })
+        }), [
         children,
         control,
         register,
@@ -41,7 +43,25 @@ export var FieldControl = function (_a) {
         label,
         t,
         maybeEncodedName,
-        placeholder,
+        placeholder
     ]);
-    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)))] }));
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs(Field, {
+                name: maybeEncodedName,
+                t: t,
+                error: error,
+                ...props,
+                children: [
+                    FormFieldContent,
+                    hint && /*#__PURE__*/ _jsx(FieldHint, {
+                        children: hint
+                    })
+                ]
+            }),
+            encode && register && /*#__PURE__*/ _jsx(InputHoneypot, {
+                ...register(name)
+            })
+        ]
+    });
 };

package/Forms/Field/FieldHint.d.ts

@@ -1 +1 @@
-export declare const FieldHint: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FieldHint: any;

package/Forms/Field/FieldHint.mjs

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

package/Forms/Input/Input.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import type { FormControl } from "../helpers";
-export declare const InputWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const InputMain: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const InputPre: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const InputPost: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const InputNative: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export declare const InputWrap: any;
+export declare const InputMain: any;
+export declare const InputPre: any;
+export declare const InputPost: any;
+export declare const InputNative: any;
 export type InputProps = FormControl;
 export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/Forms/Input/Input.mjs

@@ -1,17 +1,36 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
 import { Label } from "../Label/Label";
 import { inputBase, inputFocus } from "../styles";
-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"]);
+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 = /*#__PURE__*/ forwardRef(function Input({ register, name, label, ...props }, ref) {
     // console.log("Input: render");
-    return (_jsxs(_Fragment, { children: [label && _jsx(Label, { children: label }), _jsx(InputNative, __assign({}, (register ? register(name) : { name: name, ref: ref }), props))] }));
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            label && /*#__PURE__*/ _jsx(Label, {
+                children: label
+            }),
+            /*#__PURE__*/ _jsx(InputNative, {
+                ...register ? register(name) : {
+                    name,
+                    ref
+                },
+                ...props
+            })
+        ]
+    });
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Forms/InputGroup/InputGroup.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { KoineButton, KoineButtonProps } from "../../Buttons";
-export declare const InputGroupRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const InputGroupMain: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const InputGroupButtonPre: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../../Buttons").KoineButtonUiProps, never>;
-export declare const InputGroupButtonPost: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../../Buttons").KoineButtonUiProps, never>;
+export declare const InputGroupRoot: any;
+export declare const InputGroupMain: any;
+export declare const InputGroupButtonPre: any;
+export declare const InputGroupButtonPost: any;
 export type InputGroupProps = React.ComponentPropsWithoutRef<"div"> & {
     pre?: boolean;
     post?: boolean;