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

package/Form/Form.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import type { Simplify } from "@koine/utils";
-import { type WithComponents } from "../helpers";
+import { type WithComponents } from "../extendComponent.js";
 export type OwnProps = React.PropsWithChildren<{
     action: string;
     ok?: boolean;
@@ -8,21 +7,9 @@ export type OwnProps = React.PropsWithChildren<{
     fail?: boolean;
     failProps?: object;
     loading?: boolean;
-    /** Whether the form should collapse on `ok` */
     collapseOnOk?: boolean;
-    /** Whether the form should collapse on `fail` */
     collapseOnFail?: boolean;
-    /**
-     * Determines the time (in ms) that the `Ok` component wait before collapsing
-     * When <= 0 the `Ok` component will persist
-     *
-     * @default 3000 */
     okTimeout?: number;
-    /**
-     * Determines the time (in ms) that the `Fail` component wait before collapsing
-     * When <= 0 the `Fail` component will persist
-     *
-     * @default 3000 */
     failTimeout?: number;
 }>;
 export type Components = {

package/Form/Form.js

@@ -1,31 +1,27 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineForm = exports.Form = exports.Fail = exports.Ok = exports.Collapsable = exports.Progress = exports.Overlay = exports.Root = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-// import type { MotionProps } from "framer-motion";
-var helpers_1 = require("../helpers");
-exports.Root = "form";
-exports.Overlay = "div";
-exports.Progress = "div";
-exports.Collapsable = "div";
-exports.Ok = null;
-exports.Fail = null;
-var Form = function (_a) {
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { extendComponent, } from "../extendComponent.js";
+export var Root = "form";
+export var Overlay = "div";
+export var Progress = "div";
+export var Collapsable = "div";
+export var Ok = null;
+export var Fail = null;
+export var Form = function (_a) {
     var _Root = _a.Root, _Overlay = _a.Overlay, _Progress = _a.Progress, _Collapsable = _a.Collapsable, ok = _a.ok, fail = _a.fail, loading = _a.loading, _Ok = _a.Ok, _b = _a.okProps, okProps = _b === void 0 ? {
         children: "Sent!",
     } : _b, _Fail = _a.Fail, _c = _a.failProps, failProps = _c === void 0 ? {
         children: "Failed.",
-    } : _c, collapseOnOk = _a.collapseOnOk, collapseOnFail = _a.collapseOnFail, _d = _a.okTimeout, okTimeout = _d === void 0 ? 3000 : _d, _e = _a.failTimeout, failTimeout = _e === void 0 ? 3000 : _e, children = _a.children, props = tslib_1.__rest(_a, ["Root", "Overlay", "Progress", "Collapsable", "ok", "fail", "loading", "Ok", "okProps", "Fail", "failProps", "collapseOnOk", "collapseOnFail", "okTimeout", "failTimeout", "children"]);
-    var _f = (0, react_1.useState)(""), open = _f[0], setOpen = _f[1];
+    } : _c, collapseOnOk = _a.collapseOnOk, collapseOnFail = _a.collapseOnFail, _d = _a.okTimeout, okTimeout = _d === void 0 ? 3000 : _d, _e = _a.failTimeout, failTimeout = _e === void 0 ? 3000 : _e, children = _a.children, props = __rest(_a, ["Root", "Overlay", "Progress", "Collapsable", "ok", "fail", "loading", "Ok", "okProps", "Fail", "failProps", "collapseOnOk", "collapseOnFail", "okTimeout", "failTimeout", "children"]);
+    var _f = __read(useState(""), 2), open = _f[0], setOpen = _f[1];
     var commonProps = {
         head: null,
         components: {
             HeadIcon: null,
         },
     };
-    (0, react_1.useEffect)(function () {
+    useEffect(function () {
         if (!loading) {
             if (ok)
                 setOpen("ok");
@@ -33,7 +29,7 @@ var Form = function (_a) {
                 setOpen("fail");
         }
     }, [ok, fail, loading]);
-    (0, react_1.useEffect)(function () {
+    useEffect(function () {
         var timeout;
         if (open === "fail" && failTimeout) {
             timeout = setTimeout(function () { return setOpen(""); }, failTimeout);
@@ -52,14 +48,13 @@ var Form = function (_a) {
         formExpanded = false;
     if (collapseOnOk && ok)
         formExpanded = false;
-    return ((0, jsx_runtime_1.jsxs)(exports.Root, tslib_1.__assign({ method: "post", noValidate: true }, props, { children: [(0, jsx_runtime_1.jsx)(exports.Collapsable, tslib_1.__assign({}, commonProps, { "$open": formExpanded, recalc: loading, body: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, loading && ((0, jsx_runtime_1.jsx)(exports.Overlay, { children: (0, jsx_runtime_1.jsx)(exports.Progress, {}) }))] }) })), (0, jsx_runtime_1.jsx)(exports.Collapsable, tslib_1.__assign({}, commonProps, { "$open": open === "ok" && !loading, body: (0, jsx_runtime_1.jsx)(exports.Ok, tslib_1.__assign({}, okProps)) })), (0, jsx_runtime_1.jsx)(exports.Collapsable, tslib_1.__assign({}, commonProps, { "$open": open === "fail" && !loading, body: (0, jsx_runtime_1.jsx)(exports.Fail, tslib_1.__assign({}, failProps)) }))] })));
+    return (_jsxs(Root, __assign({ method: "post", noValidate: true }, props, { children: [_jsx(Collapsable, __assign({}, commonProps, { "$open": formExpanded, recalc: loading, body: _jsxs(_Fragment, { children: [children, loading && (_jsx(Overlay, { children: _jsx(Progress, {}) }))] }) })), _jsx(Collapsable, __assign({}, commonProps, { "$open": open === "ok" && !loading, body: _jsx(Ok, __assign({}, okProps)) })), _jsx(Collapsable, __assign({}, commonProps, { "$open": open === "fail" && !loading, body: _jsx(Fail, __assign({}, failProps)) }))] })));
 };
-exports.Form = Form;
-exports.KoineForm = (0, helpers_1.extendComponent)(exports.Form, {
-    Root: exports.Root,
-    Overlay: exports.Overlay,
-    Progress: exports.Progress,
-    Collapsable: exports.Collapsable,
-    Ok: exports.Ok,
-    Fail: exports.Fail,
+export var KoineForm = extendComponent(Form, {
+    Root: Root,
+    Overlay: Overlay,
+    Progress: Progress,
+    Collapsable: Collapsable,
+    Ok: Ok,
+    Fail: Fail,
 });

package/Form/index.d.ts

@@ -1 +1 @@
-export * from "./Form";
+export * from "./Form.js";

package/Form/index.js

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

package/Form/sc/bare.d.ts

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

package/Form/sc/bare.js

@@ -1,23 +1,20 @@
-"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,
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+import { Alert } from "../../Alert/index.js";
+import { Collapsable } from "../../Collapsable/index.js";
+import { ProgressCircular } from "../../Progress/index.js";
+import { extendComponent } from "../../extendComponent.js";
+import { centered, overlay } from "../../styles/styled.js";
+import * as _ from "../Form.js";
+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

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

package/Forms/Checkbox/Checkbox.js

@@ -1,21 +1,15 @@
-"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 })] })));
+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, ToggleIndicatorSquared, ToggleLabel } from "../Toggle/index.js";
+import { useToggle } from "../Toggle/useToggle.js";
+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 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.d.ts

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

package/Forms/Checkbox/index.js

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

package/Forms/Feedback/Feedback.js

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

package/Forms/Feedback/index.d.ts

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

package/Forms/Feedback/index.js

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

package/Forms/Field/Field.d.ts

@@ -1,30 +1,10 @@
-/// <reference types="react" />
 import type { FieldError as RHF_FieldError, FieldErrors as RHF_FieldErrors } from "react-hook-form";
-import type { Translate } from "../../types";
+import type { Translate } from "../../types.js";
 export declare const field: import("styled-components").FlattenSimpleInterpolation;
-export declare const FieldBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const FieldRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    $danger: boolean;
-}, never>;
-/**
- * Yup's errors produce by these validations:
- *
- * ```
- * email: string().email().required(),
- * name: string().required()
- * ```
- *
- * determine the `error.type` of the `FieldError` to be "required" and "email".
- * We assume these as standard translations keys without needing to pass
- * a string into the validation, e.g. `required("mySpecialKey")`.
- */
+export declare const FieldBase: any;
+export declare const FieldRoot: any;
 type FieldErrorType = "required" | "email" | "plain" | string;
 export type FieldError = {
-    /**
-     * use `type: "plain"` when the error message should not act as a translation
-     * key, that is often the case with server side error messages from external
-     * APIs.
-     */
     type: FieldErrorType;
     message: string;
 };

package/Forms/Field/Field.js

@@ -1,18 +1,15 @@
-"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) {
+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/index.js";
+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  ");
 });
-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"]);
+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) {
@@ -23,13 +20,6 @@ var Field = function (_a) {
             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 ((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 (_jsxs(FieldRoot, __assign({ "$danger": !!err }, props, { children: [children, msg && _jsx(Feedback, { "$danger": true, children: msg })] })));
 };
-exports.Field = Field;
 var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Field/FieldControl.d.ts

@@ -1,9 +1,7 @@
-/// <reference types="react" />
-import type { Translate } from "../../types";
-import type { FormControl } from "../helpers";
+import type { Translate } from "../../types.js";
+import type { FormControl } from "../helpers.js";
 type FieldControlRenderProps = React.PropsWithChildren<Pick<FormControl, "control" | "register" | "setValue" | "name" | "label" | "placeholder">>;
 export type FieldControlProps = FieldControlRenderProps & {
-    /** Render props pattern */
     children: (props: FieldControlRenderProps) => React.ReactNode;
     t: Translate;
     showError?: boolean;
@@ -12,15 +10,5 @@ export type FieldControlProps = FieldControlRenderProps & {
     className?: string;
     style?: React.CSSProperties;
 };
-/**
- *
- * - 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 declare const FieldControl: ({ control, register, setValue, name: maybeEncodedName, label, placeholder, hint, t, showError, children, encode, ...props }: FieldControlProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/Forms/Field/FieldControl.js

@@ -1,37 +1,22 @@
-"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;
+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";
+import { InputHoneypot } from "../styles.js";
+import { Field } from "./Field.js";
+import { FieldHint } from "./FieldHint.js";
+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 = (0, react_1.useMemo)(function () {
+    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: "" }),
         });
@@ -46,6 +31,5 @@ var FieldControl = function (_a) {
         maybeEncodedName,
         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 (_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)))] }));
 };
-exports.FieldControl = FieldControl;

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

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

package/Forms/Field/index.js

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

package/Forms/Input/Input.d.ts

@@ -1,9 +1,8 @@
-/// <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>;
+import type { FormControl } from "../helpers.js";
+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,16 @@
-"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 ((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))] }));
+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.js";
+import { inputBase, inputFocus } from "../styles.js";
+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"]);
+    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.d.ts

@@ -1 +1 @@
-export * from "./Input";
+export * from "./Input.js";

package/Forms/Input/index.js

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