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

package/Forms/Field/Field.js

@@ -1,25 +1,57 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Field = exports.FieldRoot = exports.FieldBase = exports.field = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = tslib_1.__importStar(require("styled-components"));
-var Feedback_1 = require("../Feedback");
-exports.field = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  padding-bottom: 20px;\n"], ["\n  padding-bottom: 20px;\n"])));
-exports.FieldBase = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.field);
-exports.FieldRoot = (0, styled_components_1.default)(exports.FieldBase)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
-    return (p.$danger &&
-        "\n    color: var(--danger);\n    \n    textarea,\n    input,\n    select {\n      color: var(--danger);\n    }\n  ");
+Object.defineProperty(exports, "__esModule", {
+    value: true
 });
-var Field = function (_a) {
-    var name = _a.name, t = _a.t, error = _a.error, errors = _a.errors, children = _a.children, props = tslib_1.__rest(_a, ["name", "t", "error", "errors", "children"]);
-    var err = (errors && name ? errors[name] : error);
-    var msg = "";
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    field: function() {
+        return field;
+    },
+    FieldBase: function() {
+        return FieldBase;
+    },
+    FieldRoot: function() {
+        return FieldRoot;
+    },
+    Field: function() {
+        return Field;
+    }
+});
+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)`
+  padding-bottom: 20px;
+`;
+const FieldBase = _styledcomponents.default.div`
+  ${field}
+`;
+const FieldRoot = (0, _styledcomponents.default)(FieldBase)`
+  ${(p)=>{
+    return p.$danger && `
+    color: var(--danger);
+    
+    textarea,
+    input,
+    select {
+      color: var(--danger);
+    }
+  `;
+}}
+`;
+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;
         }
     }
@@ -29,7 +61,15 @@ var Field = function (_a) {
     // useEffect(() => {
     //   i18n.addResourceBundle(locale, "core.Forms", null);
     // }, []);
-    return ((0, jsx_runtime_1.jsxs)(exports.FieldRoot, tslib_1.__assign({ "$danger": !!err }, props, { children: [children, msg && (0, jsx_runtime_1.jsx)(Feedback_1.Feedback, { "$danger": true, children: msg })] })));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(FieldRoot, {
+        $danger: !!err,
+        ...props,
+        children: [
+            children,
+            msg && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Feedback.Feedback, {
+                $danger: true,
+                children: msg
+            })
+        ]
+    });
 };
-exports.Field = Field;
-var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,41 +1,42 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldControl = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_hook_form_1 = require("react-hook-form");
-var decode_1 = tslib_1.__importDefault(require("@koine/utils/decode"));
-var Field_1 = require("./Field");
-var FieldHint_1 = require("./FieldHint");
-var styles_1 = require("../styles");
-/**
- *
- * - it expects the `field` object from our `useForm` wrapper around react-hook-form
- * - automatically get translated strings from the given `t` function` for the
- * field `label`, `placeholder` and `errors`. The .json expected by the `t` function
- * look like this:
- *
- * ```json
- * ```
- */
-var FieldControl = function (_a) {
-    var control = _a.control, register = _a.register, setValue = _a.setValue, maybeEncodedName = _a.name, label = _a.label, placeholder = _a.placeholder, hint = _a.hint, t = _a.t, _b = _a.showError, showError = _b === void 0 ? true : _b, children = _a.children, encode = _a.encode, props = tslib_1.__rest(_a, ["control", "register", "setValue", "name", "label", "placeholder", "hint", "t", "showError", "children", "encode"]);
-    var name = encode ? (0, decode_1.default)(maybeEncodedName) : maybeEncodedName;
-    var errors = (0, react_hook_form_1.useFormState)({ name: name, control: control }).errors;
-    var error = showError && errors[name] ? errors[name] : null;
-    var FormFieldContent = (0, react_1.useMemo)(function () {
-        return children({
-            control: control,
-            register: register,
-            setValue: setValue,
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FieldControl", {
+    enumerable: true,
+    get: function() {
+        return 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"));
+const _styles = require("../styles");
+const _Field = require("./Field");
+const _FieldHint = require("./FieldHint");
+const FieldControl = ({ control, register, setValue, name: maybeEncodedName, label, placeholder, hint, t, showError = true, children, encode, ...props })=>{
+    const name = encode ? (0, _decode.default)(maybeEncodedName) : maybeEncodedName;
+    const { errors } = (0, _reacthookform.useFormState)({
+        name,
+        control
+    });
+    const error = showError && errors[name] ? errors[name] : null;
+    const FormFieldContent = (0, _react.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,
@@ -44,8 +45,25 @@ var FieldControl = function (_a) {
         label,
         t,
         maybeEncodedName,
-        placeholder,
+        placeholder
     ]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Field_1.Field, tslib_1.__assign({ name: maybeEncodedName, t: t, error: error }, props, { children: [FormFieldContent, hint && (0, jsx_runtime_1.jsx)(FieldHint_1.FieldHint, { children: hint })] })), encode && register && (0, jsx_runtime_1.jsx)(styles_1.InputHoneypot, tslib_1.__assign({}, register(name)))] }));
+    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)
+            })
+        ]
+    });
 };
-exports.FieldControl = FieldControl;

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

@@ -1,7 +1,17 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldHint = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-exports.FieldHint = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  padding-top: 0.6em;\n  opacity: 0.7;\n  font-size: 75%;\n"], ["\n  padding-top: 0.6em;\n  opacity: 0.7;\n  font-size: 75%;\n"])));
-var templateObject_1;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FieldHint", {
+    enumerable: true,
+    get: function() {
+        return FieldHint;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const FieldHint = _styledcomponents.default.div`
+  padding-top: 0.6em;
+  opacity: 0.7;
+  font-size: 75%;
+`;

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

@@ -1,5 +1,7 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Field"), exports);
-tslib_1.__exportStar(require("./FieldControl"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Field"), exports);
+_export_star._(require("./FieldControl"), exports);

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

@@ -1,20 +1,67 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = exports.InputNative = exports.InputPost = exports.InputPre = exports.InputMain = exports.InputWrap = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var Label_1 = require("../Label/Label");
-var styles_1 = require("../styles");
-exports.InputWrap = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
-exports.InputMain = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-exports.InputPre = styled_components_1.default.div(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject([""], [""])));
-exports.InputPost = styled_components_1.default.div(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject([""], [""])));
-exports.InputNative = styled_components_1.default.input(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), styles_1.inputBase, styles_1.inputFocus);
-exports.Input = (0, react_1.forwardRef)(function Input(_a, ref) {
-    var register = _a.register, name = _a.name, label = _a.label, props = tslib_1.__rest(_a, ["register", "name", "label"]);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    InputWrap: function() {
+        return InputWrap;
+    },
+    InputMain: function() {
+        return InputMain;
+    },
+    InputPre: function() {
+        return InputPre;
+    },
+    InputPost: function() {
+        return InputPost;
+    },
+    InputNative: function() {
+        return InputNative;
+    },
+    Input: function() {
+        return Input;
+    }
+});
+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");
+const _styles = require("../styles");
+const InputWrap = _styledcomponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const InputMain = _styledcomponents.default.div`
+  flex: 1;
+`;
+const InputPre = _styledcomponents.default.div``;
+const InputPost = _styledcomponents.default.div``;
+const InputNative = _styledcomponents.default.input`
+  ${_styles.inputBase}
+  ${_styles.inputFocus}
+`;
+const Input = /*#__PURE__*/ (0, _react.forwardRef)(function Input({ register, name, label, ...props }, ref) {
     // console.log("Input: render");
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { children: label }), (0, jsx_runtime_1.jsx)(exports.InputNative, tslib_1.__assign({}, (register ? register(name) : { name: name, ref: 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
+            })
+        ]
+    });
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

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

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;