@koine/react 2.0.0-beta.2 → 2.0.0-beta.5

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

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

package/Forms/Checkbox/Checkbox.mjs

@@ -1,18 +1,22 @@
-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__*/ React.createElement(CheckboxRoot, rootProps, /*#__PURE__*/ React.createElement(CheckboxToggle, null, Inputs, /*#__PURE__*/ React.createElement(CheckboxIndicator, null)), label && /*#__PURE__*/ React.createElement(CheckboxLabel, null, label));
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Forms/Checkbox/index.js

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

package/Forms/Feedback/Feedback.js

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

package/Forms/Feedback/Feedback.mjs

@@ -1,9 +1,12 @@
-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__*/ React.createElement(Root, {
+        role: "alert",
+        $danger: $danger
+    }, children);
 };
-var templateObject_1;

package/Forms/Feedback/index.js

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

package/Forms/Field/Field.js

@@ -1,25 +1,56 @@
 "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 _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 +60,10 @@ 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__*/ React.createElement(FieldRoot, {
+        $danger: !!err,
+        ...props
+    }, children, msg && /*#__PURE__*/ React.createElement(_Feedback.Feedback, {
+        $danger: true
+    }, msg));
 };
-exports.Field = Field;
-var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Field/Field.mjs

@@ -1,22 +1,31 @@
-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 +35,10 @@ 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__*/ React.createElement(FieldRoot, {
+        $danger: !!err,
+        ...props
+    }, children, msg && /*#__PURE__*/ React.createElement(Feedback, {
+        $danger: true
+    }, msg));
 };
-var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Field/FieldControl.js

@@ -1,41 +1,41 @@
 "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 _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 +44,12 @@ 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__*/ 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)));
 };
-exports.FieldControl = FieldControl;

package/Forms/Field/FieldControl.mjs

@@ -1,11 +1,9 @@
-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 +13,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 +42,12 @@ 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__*/ 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)));
 };

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);