@koine/react 1.1.10 → 1.1.12

package/Form/sc/bare.d.ts

@@ -1,12 +1,37 @@
 /// <reference types="react" />
-import * as _ from "../Form";
 export type { KoineFormProps } from "../Form";
-export declare const Root: import("styled-components").StyledComponent<NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "key" | keyof import("react").FormHTMLAttributes<HTMLFormElement>>>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const Overlay: import("styled-components").StyledComponent<NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>>, import("styled-components").DefaultTheme, {}, never>;
+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) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
-export declare const KoineForm: ((props: import("type-fest").Simplify<import("../../helpers").WithComponents<_.OwnProps, _.Components>>) => import("react").FunctionComponentElement<any>) & {
-    Root: import("styled-components").StyledComponent<NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "key" | keyof import("react").FormHTMLAttributes<HTMLFormElement>>>>, import("styled-components").DefaultTheme, {}, never>;
-    Overlay: import("styled-components").StyledComponent<NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const KoineForm: ((props: {
+    action: string;
+    ok?: boolean | undefined;
+    okProps?: object | undefined;
+    fail?: boolean | undefined;
+    failProps?: object | undefined;
+    loading?: boolean | undefined;
+    collapseOnOk?: boolean | undefined;
+    collapseOnFail?: boolean | undefined;
+    okTimeout?: number | undefined;
+    failTimeout?: number | undefined;
+    children?: import("react").ReactNode;
+    Root: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref">>>;
+    Overlay: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>>;
+    Progress: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>>;
+    Collapsable: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        $open?: boolean | undefined;
+        recalc?: boolean | undefined;
+        body?: import("react").ReactNode;
+    }>>;
+    Ok: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        children?: import("react").ReactNode;
+    }>>;
+    Fail: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        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>;
     Progress: ({ size, thickness, color, ...props }: {
         [x: string]: any;
         size?: string | undefined;
@@ -18,8 +43,8 @@ export declare const KoineForm: ((props: import("type-fest").Simplify<import("..
     Fail: import("styled-components").StyledComponent<({ $danger, children, ...props }: import("../../Alert").AlertProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 } & {
     defaultProps: {
-        Root: import("styled-components").StyledComponent<NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "key" | keyof import("react").FormHTMLAttributes<HTMLFormElement>>>>, import("styled-components").DefaultTheme, {}, never>;
-        Overlay: import("styled-components").StyledComponent<NonNullable<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>>, import("styled-components").DefaultTheme, {}, never>;
+        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>;
         Progress: ({ size, thickness, color, ...props }: {
             [x: string]: any;
             size?: string | undefined;

package/Form/sc/bare.js

@@ -1,20 +1,23 @@
-import { __makeTemplateObject } from "tslib";
-import styled from "styled-components";
-import { overlay, centered } from "../../styles/styled";
-import { Collapsable } from "../../Collapsable";
-import { ProgressCircular } from "../../Progress";
-import { Alert } from "../../Alert";
-import { extendComponent } from "../../helpers";
-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,
-    Progress: ProgressCircular,
-    Collapsable: Collapsable,
-    Ok: Feedback,
-    Fail: Feedback,
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineForm = exports.Feedback = exports.Overlay = exports.Root = void 0;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var styled_1 = require("../../styles/styled");
+var Collapsable_1 = require("../../Collapsable");
+var Progress_1 = require("../../Progress");
+var Alert_1 = require("../../Alert");
+var helpers_1 = require("../../helpers");
+var _ = tslib_1.__importStar(require("../Form"));
+exports.Root = (0, styled_components_1.default)(_.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+exports.Overlay = (0, styled_components_1.default)(_.Overlay)(templateObject_2 || (templateObject_2 = tslib_1.__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"])), styled_1.overlay, styled_1.centered);
+exports.Feedback = (0, styled_components_1.default)(Alert_1.Alert)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  padding: 2em 0;\n"], ["\n  padding: 2em 0;\n"])));
+exports.KoineForm = (0, helpers_1.extendComponent)(_.KoineForm, {
+    Root: exports.Root,
+    Overlay: exports.Overlay,
+    Progress: Progress_1.ProgressCircular,
+    Collapsable: Collapsable_1.Collapsable,
+    Ok: exports.Feedback,
+    Fail: exports.Feedback,
 });
 var templateObject_1, templateObject_2, templateObject_3;

package/Form/sc/bare.mjs

@@ -0,0 +1,20 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+import { overlay, centered } from "../../styles/styled";
+import { Collapsable } from "../../Collapsable";
+import { ProgressCircular } from "../../Progress";
+import { Alert } from "../../Alert";
+import { extendComponent } from "../../helpers";
+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,
+    Progress: ProgressCircular,
+    Collapsable: Collapsable,
+    Ok: Feedback,
+    Fail: Feedback,
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Checkbox/Checkbox.d.ts

@@ -8,4 +8,4 @@ export type CheckboxProps = UseToggleProps;
 /**
  * All logic and invisible Inputs come from the `useToggle` hook
  */
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Pick<UseToggleProps, "key" | "value" | "id" | "width" | "title" | "color" | "form" | "slot" | "style" | "pattern" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "disabled" | "type" | "capture" | "height" | "options" | "min" | "max" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "crossOrigin" | "alt" | "src" | "autoComplete" | "accept" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "size" | keyof import("..").FormControlProps<any> | "valueTrue" | "valueFalse"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<UseToggleProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/Forms/Checkbox/Checkbox.js

@@ -1,18 +1,21 @@
-import { __assign, __makeTemplateObject } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import styled from "styled-components";
-import { Toggle, ToggleLabel, ToggleIndicatorSquared } from "../Toggle";
-import { useToggle } from "../Toggle/useToggle";
-export 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"])));
+"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
  */
-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 })] })));
+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 })] })));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Forms/Checkbox/Checkbox.mjs

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

package/Forms/Checkbox/index.js

@@ -1 +1,4 @@
-export * from "./Checkbox";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Checkbox"), exports);

package/Forms/Checkbox/index.mjs

@@ -0,0 +1 @@
+export * from "./Checkbox";

package/Forms/Checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../../node/Forms/Checkbox/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Forms/Feedback/Feedback.js

@@ -1,9 +1,13 @@
-import { __assign, __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) {
+"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 (_jsx(Root, __assign({ role: "alert", "$danger": $danger }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ role: "alert", "$danger": $danger }, { children: children })));
 };
+exports.Feedback = Feedback;
 var templateObject_1;

package/Forms/Feedback/Feedback.mjs

@@ -0,0 +1,9 @@
+import { __assign, __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, __assign({ role: "alert", "$danger": $danger }, { children: children })));
+};
+var templateObject_1;

package/Forms/Feedback/index.js

@@ -1 +1,4 @@
-export * from "./Feedback";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Feedback"), exports);

package/Forms/Feedback/index.mjs

@@ -0,0 +1 @@
+export * from "./Feedback";

package/Forms/Feedback/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../../node/Forms/Feedback/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Forms/Field/Field.js

@@ -1,15 +1,18 @@
-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) {
+"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  ");
 });
-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 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 = "";
     if (err) {
@@ -26,6 +29,7 @@ export var Field = function (_a) {
     // useEffect(() => {
     //   i18n.addResourceBundle(locale, "core.Forms", null);
     // }, []);
-    return (_jsxs(FieldRoot, __assign({ "$danger": !!err }, props, { children: [children, msg && _jsx(Feedback, __assign({ "$danger": true }, { children: msg }))] })));
+    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, tslib_1.__assign({ "$danger": true }, { children: msg }))] })));
 };
+exports.Field = Field;
 var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Field/Field.mjs

@@ -0,0 +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 = "";
+    if (err) {
+        if (name && t && err.type !== "plain") {
+            msg = t("errors.".concat(name, ".").concat(err.type || err.message));
+        }
+        else {
+            msg = err.message;
+        }
+    }
+    // dynamic i18n namespace loading does not seem to work yet
+    // const t = useT("core.Forms");
+    // const { locale } = useRouter();
+    // useEffect(() => {
+    //   i18n.addResourceBundle(locale, "core.Forms", null);
+    // }, []);
+    return (_jsxs(FieldRoot, __assign({ "$danger": !!err }, props, { children: [children, msg && _jsx(Feedback, __assign({ "$danger": true }, { children: msg }))] })));
+};
+var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Field/FieldControl.js

@@ -1,11 +1,14 @@
-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 { Field } from "./Field";
-import { FieldHint } from "./FieldHint";
-import { InputHoneypot } from "../styles";
+"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
@@ -16,12 +19,12 @@ 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 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 = useMemo(function () {
+    var FormFieldContent = (0, react_1.useMemo)(function () {
         return children({
             control: control,
             register: register,
@@ -43,5 +46,6 @@ export var FieldControl = function (_a) {
         maybeEncodedName,
         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 ((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)))] }));
 };
+exports.FieldControl = FieldControl;

package/Forms/Field/FieldControl.mjs

@@ -0,0 +1,47 @@
+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 { Field } from "./Field";
+import { FieldHint } from "./FieldHint";
+import { InputHoneypot } from "../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
+ * ```
+ */
+export var FieldControl = function (_a) {
+    var control = _a.control, register = _a.register, setValue = _a.setValue, maybeEncodedName = _a.name, label = _a.label, placeholder = _a.placeholder, hint = _a.hint, t = _a.t, _b = _a.showError, showError = _b === void 0 ? true : _b, children = _a.children, encode = _a.encode, props = __rest(_a, ["control", "register", "setValue", "name", "label", "placeholder", "hint", "t", "showError", "children", "encode"]);
+    var name = encode ? decode(maybeEncodedName) : maybeEncodedName;
+    var errors = useFormState({ name: name, control: control }).errors;
+    var error = showError && errors[name] ? errors[name] : null;
+    var FormFieldContent = useMemo(function () {
+        return children({
+            control: control,
+            register: register,
+            setValue: setValue,
+            name: maybeEncodedName,
+            // @see https://github.com/vinissimus/next-translate/pull/461
+            // @see https://github.com/vinissimus/next-translate/issues/429
+            label: label || t("labels.".concat(name), undefined, { default: "" }),
+            placeholder: placeholder || t("placeholders.".concat(name), undefined, { fallback: "" }),
+        });
+    }, [
+        children,
+        control,
+        register,
+        setValue,
+        name,
+        label,
+        t,
+        maybeEncodedName,
+        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)))] }));
+};

package/Forms/Field/FieldHint.js

@@ -1,4 +1,7 @@
-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"])));
+"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;

package/Forms/Field/FieldHint.mjs

@@ -0,0 +1,4 @@
+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;

package/Forms/Field/index.js

@@ -1,2 +1,5 @@
-export * from "./Field";
-export * from "./FieldControl";
+"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);

package/Forms/Field/index.mjs

@@ -0,0 +1,2 @@
+export * from "./Field";
+export * from "./FieldControl";

package/Forms/Field/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../../node/Forms/Field/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Forms/Input/Input.d.ts

@@ -6,4 +6,4 @@ export declare const InputPre: import("styled-components").StyledComponent<"div"
 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 type InputProps = FormControl;
-export declare const Input: import("react").ForwardRefExoticComponent<Pick<InputProps, "key" | "value" | "id" | "width" | "title" | "color" | "form" | "slot" | "style" | "pattern" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "disabled" | "type" | "capture" | "height" | "min" | "max" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "crossOrigin" | "alt" | "src" | "autoComplete" | "accept" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "size" | keyof import("../helpers").FormControlProps<any>> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/Forms/Input/Input.js

@@ -1,17 +1,20 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import styled from "styled-components";
-import { Label } from "../Label/Label";
-import { inputBase, inputFocus } from "../styles";
-export 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"]);
+"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"]);
     // 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 ((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))] }));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Forms/Input/Input.mjs

@@ -0,0 +1,17 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled from "styled-components";
+import { Label } from "../Label/Label";
+import { inputBase, inputFocus } from "../styles";
+export var InputWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
+export var InputMain = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+export var InputPre = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+export var InputPost = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
+export var InputNative = styled.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), inputBase, inputFocus);
+export var Input = forwardRef(function Input(_a, ref) {
+    var register = _a.register, name = _a.name, label = _a.label, props = __rest(_a, ["register", "name", "label"]);
+    // console.log("Input: render");
+    return (_jsxs(_Fragment, { children: [label && _jsx(Label, { children: label }), _jsx(InputNative, __assign({}, (register ? register(name) : { name: name, ref: ref }), props))] }));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Forms/Input/index.js

@@ -1 +1,4 @@
-export * from "./Input";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Input"), exports);