@koine/react 2.0.0-beta.4 → 2.0.0-beta.6

package/FaviconTags.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Favicon tags.
  *
@@ -8,43 +9,56 @@
  *
  * @see https://realfavicongenerator.net/
  */ export const FaviconTags = ({ name, color, safariTabColor, tileColor, themeColor })=>{
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("link", {
-        rel: "shortcut icon",
-        href: "/favicon.ico",
-        type: "image/x-icon"
-    }), /*#__PURE__*/ React.createElement("link", {
-        rel: "apple-touch-icon",
-        sizes: "180x180",
-        href: "/apple-touch-icon.png"
-    }), /*#__PURE__*/ React.createElement("link", {
-        rel: "icon",
-        type: "image/png",
-        sizes: "32x32",
-        href: "/favicon-32x32.png"
-    }), /*#__PURE__*/ React.createElement("link", {
-        rel: "icon",
-        type: "image/png",
-        sizes: "16x16",
-        href: "/favicon-16x16.png"
-    }), /*#__PURE__*/ React.createElement("link", {
-        rel: "manifest",
-        href: "/site.webmanifest"
-    }), /*#__PURE__*/ React.createElement("link", {
-        rel: "mask-icon",
-        href: "/safari-pinned-tab.svg",
-        color: safariTabColor || color
-    }), /*#__PURE__*/ React.createElement("meta", {
-        name: "apple-mobile-web-app-title",
-        content: name
-    }), /*#__PURE__*/ React.createElement("meta", {
-        name: "application-name",
-        content: name
-    }), /*#__PURE__*/ React.createElement("meta", {
-        name: "msapplication-TileColor",
-        content: tileColor || color
-    }), /*#__PURE__*/ React.createElement("meta", {
-        name: "theme-color",
-        content: themeColor || color
-    }));
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("link", {
+                rel: "shortcut icon",
+                href: "/favicon.ico",
+                type: "image/x-icon"
+            }),
+            /*#__PURE__*/ _jsx("link", {
+                rel: "apple-touch-icon",
+                sizes: "180x180",
+                href: "/apple-touch-icon.png"
+            }),
+            /*#__PURE__*/ _jsx("link", {
+                rel: "icon",
+                type: "image/png",
+                sizes: "32x32",
+                href: "/favicon-32x32.png"
+            }),
+            /*#__PURE__*/ _jsx("link", {
+                rel: "icon",
+                type: "image/png",
+                sizes: "16x16",
+                href: "/favicon-16x16.png"
+            }),
+            /*#__PURE__*/ _jsx("link", {
+                rel: "manifest",
+                href: "/site.webmanifest"
+            }),
+            /*#__PURE__*/ _jsx("link", {
+                rel: "mask-icon",
+                href: "/safari-pinned-tab.svg",
+                color: safariTabColor || color
+            }),
+            /*#__PURE__*/ _jsx("meta", {
+                name: "apple-mobile-web-app-title",
+                content: name
+            }),
+            /*#__PURE__*/ _jsx("meta", {
+                name: "application-name",
+                content: name
+            }),
+            /*#__PURE__*/ _jsx("meta", {
+                name: "msapplication-TileColor",
+                content: tileColor || color
+            }),
+            /*#__PURE__*/ _jsx("meta", {
+                name: "theme-color",
+                content: themeColor || color
+            })
+        ]
+    });
 };
 export default FaviconTags;

package/Form/Form.js

@@ -34,6 +34,7 @@ _export(exports, {
         return KoineForm;
     }
 });
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _helpers = require("../helpers");
 const Root = "form";
@@ -84,24 +85,40 @@ const Form = ({ Root: _Root, Overlay: _Overlay, Progress: _Progress, Collapsable
     let formExpanded = true;
     if (collapseOnFail && fail) formExpanded = false;
     if (collapseOnOk && ok) formExpanded = false;
-    return /*#__PURE__*/ React.createElement(Root, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(Root, {
         method: "post",
         noValidate: true,
-        ...props
-    }, /*#__PURE__*/ React.createElement(Collapsable, {
-        ...commonProps,
-        $open: formExpanded,
-        recalc: loading,
-        body: /*#__PURE__*/ React.createElement(React.Fragment, null, children, loading && /*#__PURE__*/ React.createElement(Overlay, null, /*#__PURE__*/ React.createElement(Progress, null)))
-    }), /*#__PURE__*/ React.createElement(Collapsable, {
-        ...commonProps,
-        $open: open === "ok" && !loading,
-        body: /*#__PURE__*/ React.createElement(Ok, okProps)
-    }), /*#__PURE__*/ React.createElement(Collapsable, {
-        ...commonProps,
-        $open: open === "fail" && !loading,
-        body: /*#__PURE__*/ React.createElement(Fail, failProps)
-    }));
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(Collapsable, {
+                ...commonProps,
+                $open: formExpanded,
+                recalc: loading,
+                body: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                    children: [
+                        children,
+                        loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(Overlay, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Progress, {})
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(Collapsable, {
+                ...commonProps,
+                $open: open === "ok" && !loading,
+                body: /*#__PURE__*/ (0, _jsxruntime.jsx)(Ok, {
+                    ...okProps
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(Collapsable, {
+                ...commonProps,
+                $open: open === "fail" && !loading,
+                body: /*#__PURE__*/ (0, _jsxruntime.jsx)(Fail, {
+                    ...failProps
+                })
+            })
+        ]
+    });
 };
 const KoineForm = (0, _helpers.extendComponent)(Form, {
     Root,

package/Form/Form.mjs

@@ -1,3 +1,4 @@
+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";
@@ -49,24 +50,40 @@ export const Form = ({ Root: _Root, Overlay: _Overlay, Progress: _Progress, Coll
     let formExpanded = true;
     if (collapseOnFail && fail) formExpanded = false;
     if (collapseOnOk && ok) formExpanded = false;
-    return /*#__PURE__*/ React.createElement(Root, {
+    return /*#__PURE__*/ _jsxs(Root, {
         method: "post",
         noValidate: true,
-        ...props
-    }, /*#__PURE__*/ React.createElement(Collapsable, {
-        ...commonProps,
-        $open: formExpanded,
-        recalc: loading,
-        body: /*#__PURE__*/ React.createElement(React.Fragment, null, children, loading && /*#__PURE__*/ React.createElement(Overlay, null, /*#__PURE__*/ React.createElement(Progress, null)))
-    }), /*#__PURE__*/ React.createElement(Collapsable, {
-        ...commonProps,
-        $open: open === "ok" && !loading,
-        body: /*#__PURE__*/ React.createElement(Ok, okProps)
-    }), /*#__PURE__*/ React.createElement(Collapsable, {
-        ...commonProps,
-        $open: open === "fail" && !loading,
-        body: /*#__PURE__*/ React.createElement(Fail, failProps)
-    }));
+        ...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 const KoineForm = extendComponent(Form, {
     Root,

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/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.js

@@ -26,6 +26,7 @@ _export(exports, {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
 const _Toggle = require("../Toggle");
@@ -44,5 +45,18 @@ const CheckboxLabel = (0, _styledcomponents.default)(_Toggle.ToggleLabel)`
 `;
 const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)(function Checkbox(props, ref) {
     const { rootProps, Inputs, label } = (0, _useToggle.useToggle)(props, ref);
-    return /*#__PURE__*/ React.createElement(CheckboxRoot, rootProps, /*#__PURE__*/ React.createElement(CheckboxToggle, null, Inputs, /*#__PURE__*/ React.createElement(CheckboxIndicator, null)), label && /*#__PURE__*/ React.createElement(CheckboxLabel, null, label));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(CheckboxRoot, {
+        ...rootProps,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(CheckboxToggle, {
+                children: [
+                    Inputs,
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(CheckboxIndicator, {})
+                ]
+            }),
+            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(CheckboxLabel, {
+                children: label
+            })
+        ]
+    });
 });

package/Forms/Checkbox/Checkbox.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
 import { Toggle, ToggleIndicatorSquared, ToggleLabel } from "../Toggle";
@@ -18,5 +19,18 @@ export const CheckboxLabel = styled(ToggleLabel)`
  * All logic and invisible Inputs come from the `useToggle` hook
  */ export const Checkbox = /*#__PURE__*/ forwardRef(function Checkbox(props, ref) {
     const { rootProps, Inputs, label } = useToggle(props, ref);
-    return /*#__PURE__*/ React.createElement(CheckboxRoot, rootProps, /*#__PURE__*/ React.createElement(CheckboxToggle, null, Inputs, /*#__PURE__*/ React.createElement(CheckboxIndicator, null)), label && /*#__PURE__*/ React.createElement(CheckboxLabel, null, label));
+    return /*#__PURE__*/ _jsxs(CheckboxRoot, {
+        ...rootProps,
+        children: [
+            /*#__PURE__*/ _jsxs(CheckboxToggle, {
+                children: [
+                    Inputs,
+                    /*#__PURE__*/ _jsx(CheckboxIndicator, {})
+                ]
+            }),
+            label && /*#__PURE__*/ _jsx(CheckboxLabel, {
+                children: label
+            })
+        ]
+    });
 });

package/Forms/Feedback/Feedback.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "Feedback", {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
 const Root = _styledcomponents.default.div`
   margin-top: 0.2em;
@@ -16,8 +17,9 @@ const Root = _styledcomponents.default.div`
   ${(p)=>p.$danger ? `color: var(--danger);` : ""}
 `;
 const Feedback = ({ $danger, children })=>{
-    return /*#__PURE__*/ React.createElement(Root, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Root, {
         role: "alert",
-        $danger: $danger
-    }, children);
+        $danger: $danger,
+        children: children
+    });
 };

package/Forms/Feedback/Feedback.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 const Root = styled.div`
   margin-top: 0.2em;
@@ -5,8 +6,9 @@ const Root = styled.div`
   ${(p)=>p.$danger ? `color: var(--danger);` : ""}
 `;
 export const Feedback = ({ $danger, children })=>{
-    return /*#__PURE__*/ React.createElement(Root, {
+    return /*#__PURE__*/ _jsx(Root, {
         role: "alert",
-        $danger: $danger
-    }, children);
+        $danger: $danger,
+        children: children
+    });
 };

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.js

@@ -23,6 +23,7 @@ _export(exports, {
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _jsxruntime = require("react/jsx-runtime");
 const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard._(require("styled-components"));
 const _Feedback = require("../Feedback");
 const field = (0, _styledcomponents.css)`
@@ -60,10 +61,15 @@ const Field = ({ name, t, error, errors, children, ...props })=>{
     // useEffect(() => {
     //   i18n.addResourceBundle(locale, "core.Forms", null);
     // }, []);
-    return /*#__PURE__*/ React.createElement(FieldRoot, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(FieldRoot, {
         $danger: !!err,
-        ...props
-    }, children, msg && /*#__PURE__*/ React.createElement(_Feedback.Feedback, {
-        $danger: true
-    }, msg));
+        ...props,
+        children: [
+            children,
+            msg && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Feedback.Feedback, {
+                $danger: true,
+                children: msg
+            })
+        ]
+    });
 };

package/Forms/Field/Field.mjs

@@ -1,3 +1,4 @@
+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`
@@ -35,10 +36,15 @@ export const Field = ({ name, t, error, errors, children, ...props })=>{
     // useEffect(() => {
     //   i18n.addResourceBundle(locale, "core.Forms", null);
     // }, []);
-    return /*#__PURE__*/ React.createElement(FieldRoot, {
+    return /*#__PURE__*/ _jsxs(FieldRoot, {
         $danger: !!err,
-        ...props
-    }, children, msg && /*#__PURE__*/ React.createElement(Feedback, {
-        $danger: true
-    }, msg));
+        ...props,
+        children: [
+            children,
+            msg && /*#__PURE__*/ _jsx(Feedback, {
+                $danger: true,
+                children: msg
+            })
+        ]
+    });
 };

package/Forms/Field/FieldControl.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "FieldControl", {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _reacthookform = require("react-hook-form");
 const _decode = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/decode"));
@@ -46,10 +47,23 @@ const FieldControl = ({ control, register, setValue, name: maybeEncodedName, lab
         maybeEncodedName,
         placeholder
     ]);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(_Field.Field, {
-        name: maybeEncodedName,
-        t: t,
-        error: error,
-        ...props
-    }, FormFieldContent, hint && /*#__PURE__*/ React.createElement(_FieldHint.FieldHint, null, hint)), encode && register && /*#__PURE__*/ React.createElement(_styles.InputHoneypot, register(name)));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Field.Field, {
+                name: maybeEncodedName,
+                t: t,
+                error: error,
+                ...props,
+                children: [
+                    FormFieldContent,
+                    hint && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FieldHint.FieldHint, {
+                        children: hint
+                    })
+                ]
+            }),
+            encode && register && /*#__PURE__*/ (0, _jsxruntime.jsx)(_styles.InputHoneypot, {
+                ...register(name)
+            })
+        ]
+    });
 };

package/Forms/Field/FieldControl.mjs

@@ -1,3 +1,4 @@
+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";
@@ -44,10 +45,23 @@ import { FieldHint } from "./FieldHint";
         maybeEncodedName,
         placeholder
     ]);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Field, {
-        name: maybeEncodedName,
-        t: t,
-        error: error,
-        ...props
-    }, FormFieldContent, hint && /*#__PURE__*/ React.createElement(FieldHint, null, hint)), encode && register && /*#__PURE__*/ React.createElement(InputHoneypot, 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/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.js

@@ -29,6 +29,7 @@ _export(exports, {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
 const _Label = require("../Label/Label");
@@ -49,11 +50,18 @@ const InputNative = _styledcomponents.default.input`
 `;
 const Input = /*#__PURE__*/ (0, _react.forwardRef)(function Input({ register, name, label, ...props }, ref) {
     // console.log("Input: render");
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, label && /*#__PURE__*/ React.createElement(_Label.Label, null, label), /*#__PURE__*/ React.createElement(InputNative, {
-        ...register ? register(name) : {
-            name,
-            ref
-        },
-        ...props
-    }));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(InputNative, {
+                ...register ? register(name) : {
+                    name,
+                    ref
+                },
+                ...props
+            })
+        ]
+    });
 });

package/Forms/Input/Input.mjs

@@ -1,3 +1,4 @@
+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";
@@ -18,11 +19,18 @@ export const InputNative = styled.input`
 `;
 export const Input = /*#__PURE__*/ forwardRef(function Input({ register, name, label, ...props }, ref) {
     // console.log("Input: render");
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, label && /*#__PURE__*/ React.createElement(Label, null, label), /*#__PURE__*/ React.createElement(InputNative, {
-        ...register ? register(name) : {
-            name,
-            ref
-        },
-        ...props
-    }));
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            label && /*#__PURE__*/ _jsx(Label, {
+                children: label
+            }),
+            /*#__PURE__*/ _jsx(InputNative, {
+                ...register ? register(name) : {
+                    name,
+                    ref
+                },
+                ...props
+            })
+        ]
+    });
 });

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;