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

package/Form/Form.js

@@ -1,113 +0,0 @@
-"use strict";
-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, {
-    Root: function() {
-        return Root;
-    },
-    Overlay: function() {
-        return Overlay;
-    },
-    Progress: function() {
-        return Progress;
-    },
-    Collapsable: function() {
-        return Collapsable;
-    },
-    Ok: function() {
-        return Ok;
-    },
-    Fail: function() {
-        return Fail;
-    },
-    Form: function() {
-        return Form;
-    },
-    KoineForm: function() {
-        return KoineForm;
-    }
-});
-const _react = require("react");
-const _helpers = require("../helpers");
-const Root = "form";
-const Overlay = "div";
-const Progress = "div";
-const Collapsable = "div";
-const Ok = null;
-const Fail = null;
-const Form = ({ Root: _Root, Overlay: _Overlay, Progress: _Progress, Collapsable: _Collapsable, ok, fail, loading, Ok: _Ok, okProps = {
-    children: "Sent!"
-}, Fail: _Fail, failProps = {
-    children: "Failed."
-}, collapseOnOk, collapseOnFail, okTimeout = 3000, failTimeout = 3000, children, ...props })=>{
-    const [open, setOpen] = (0, _react.useState)("");
-    const commonProps = {
-        head: null,
-        components: {
-            HeadIcon: null
-        }
-    };
-    (0, _react.useEffect)(()=>{
-        if (!loading) {
-            if (ok) setOpen("ok");
-            else if (fail) setOpen("fail");
-        }
-    }, [
-        ok,
-        fail,
-        loading
-    ]);
-    (0, _react.useEffect)(()=>{
-        let timeout;
-        if (open === "fail" && failTimeout) {
-            timeout = setTimeout(()=>setOpen(""), failTimeout);
-        } else if (open === "ok" && okTimeout) {
-            timeout = setTimeout(()=>setOpen(""), okTimeout);
-        }
-        return ()=>{
-            if (timeout) {
-                clearTimeout(timeout);
-            }
-        };
-    }, [
-        open,
-        failTimeout,
-        okTimeout
-    ]);
-    let formExpanded = true;
-    if (collapseOnFail && fail) formExpanded = false;
-    if (collapseOnOk && ok) formExpanded = false;
-    return /*#__PURE__*/ React.createElement(Root, {
-        method: "post",
-        noValidate: true,
-        ...props
-    }, /*#__PURE__*/ React.createElement(Collapsable, {
-        ...commonProps,
-        $open: formExpanded,
-        recalc: loading,
-        body: /*#__PURE__*/ React.createElement(React.Fragment, null, children, loading && /*#__PURE__*/ React.createElement(Overlay, null, /*#__PURE__*/ React.createElement(Progress, null)))
-    }), /*#__PURE__*/ React.createElement(Collapsable, {
-        ...commonProps,
-        $open: open === "ok" && !loading,
-        body: /*#__PURE__*/ React.createElement(Ok, okProps)
-    }), /*#__PURE__*/ React.createElement(Collapsable, {
-        ...commonProps,
-        $open: open === "fail" && !loading,
-        body: /*#__PURE__*/ React.createElement(Fail, failProps)
-    }));
-};
-const KoineForm = (0, _helpers.extendComponent)(Form, {
-    Root,
-    Overlay,
-    Progress,
-    Collapsable,
-    Ok,
-    Fail
-}); // export default Form;

package/Form/Form.mjs

@@ -1,78 +0,0 @@
-import { useEffect, useState } from "react";
-// import type { MotionProps } from "framer-motion";
-import { extendComponent } from "../helpers";
-export const Root = "form";
-export const Overlay = "div";
-export const Progress = "div";
-export const Collapsable = "div";
-export const Ok = null;
-export const Fail = null;
-export const Form = ({ Root: _Root, Overlay: _Overlay, Progress: _Progress, Collapsable: _Collapsable, ok, fail, loading, Ok: _Ok, okProps = {
-    children: "Sent!"
-}, Fail: _Fail, failProps = {
-    children: "Failed."
-}, collapseOnOk, collapseOnFail, okTimeout = 3000, failTimeout = 3000, children, ...props })=>{
-    const [open, setOpen] = useState("");
-    const commonProps = {
-        head: null,
-        components: {
-            HeadIcon: null
-        }
-    };
-    useEffect(()=>{
-        if (!loading) {
-            if (ok) setOpen("ok");
-            else if (fail) setOpen("fail");
-        }
-    }, [
-        ok,
-        fail,
-        loading
-    ]);
-    useEffect(()=>{
-        let timeout;
-        if (open === "fail" && failTimeout) {
-            timeout = setTimeout(()=>setOpen(""), failTimeout);
-        } else if (open === "ok" && okTimeout) {
-            timeout = setTimeout(()=>setOpen(""), okTimeout);
-        }
-        return ()=>{
-            if (timeout) {
-                clearTimeout(timeout);
-            }
-        };
-    }, [
-        open,
-        failTimeout,
-        okTimeout
-    ]);
-    let formExpanded = true;
-    if (collapseOnFail && fail) formExpanded = false;
-    if (collapseOnOk && ok) formExpanded = false;
-    return /*#__PURE__*/ React.createElement(Root, {
-        method: "post",
-        noValidate: true,
-        ...props
-    }, /*#__PURE__*/ React.createElement(Collapsable, {
-        ...commonProps,
-        $open: formExpanded,
-        recalc: loading,
-        body: /*#__PURE__*/ React.createElement(React.Fragment, null, children, loading && /*#__PURE__*/ React.createElement(Overlay, null, /*#__PURE__*/ React.createElement(Progress, null)))
-    }), /*#__PURE__*/ React.createElement(Collapsable, {
-        ...commonProps,
-        $open: open === "ok" && !loading,
-        body: /*#__PURE__*/ React.createElement(Ok, okProps)
-    }), /*#__PURE__*/ React.createElement(Collapsable, {
-        ...commonProps,
-        $open: open === "fail" && !loading,
-        body: /*#__PURE__*/ React.createElement(Fail, failProps)
-    }));
-};
-export const KoineForm = extendComponent(Form, {
-    Root,
-    Overlay,
-    Progress,
-    Collapsable,
-    Ok,
-    Fail
-}); // export default Form;

package/Form/index.d.ts

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

package/Form/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./Form"), exports);

package/Form/index.mjs

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

package/Form/sc/bare.d.ts

@@ -1,58 +0,0 @@
-/// <reference types="react" />
-export type { KoineFormProps } from "../Form";
-export declare const Root: import("styled-components").StyledComponent<NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref">>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const Overlay: import("styled-components").StyledComponent<NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const Feedback: import("styled-components").StyledComponent<({ $danger, children, ...props }: import("../../Alert").AlertProps) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
-export declare const 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;
-        thickness?: number | undefined;
-        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>;
-} & {
-    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>;
-        Progress: ({ size, thickness, color, ...props }: {
-            [x: string]: any;
-            size?: string | undefined;
-            thickness?: number | undefined;
-            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>;
-    };
-};

package/Form/sc/bare.js

@@ -1,55 +0,0 @@
-"use strict";
-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, {
-    Root: function() {
-        return Root;
-    },
-    Overlay: function() {
-        return Overlay;
-    },
-    Feedback: function() {
-        return Feedback;
-    },
-    KoineForm: function() {
-        return KoineForm;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const _Alert = require("../../Alert");
-const _Collapsable = require("../../Collapsable");
-const _Progress = require("../../Progress");
-const _helpers = require("../../helpers");
-const _styled = require("../../styles/styled");
-const _Form = /*#__PURE__*/ _interop_require_wildcard._(require("../Form"));
-const Root = (0, _styledcomponents.default)(_Form.Root)`
-  position: relative;
-`;
-const Overlay = (0, _styledcomponents.default)(_Form.Overlay)`
-  z-index: 4;
-  ${_styled.overlay}
-  ${_styled.centered}
-  background: rgba(var(--bodyBg--rgb),.8);
-  pointer-events: none;
-  backdrop-filter: blur(2px);
-`;
-const Feedback = (0, _styledcomponents.default)(_Alert.Alert)`
-  padding: 2em 0;
-`;
-const KoineForm = (0, _helpers.extendComponent)(_Form.KoineForm, {
-    Root,
-    Overlay,
-    Progress: _Progress.ProgressCircular,
-    Collapsable: _Collapsable.Collapsable,
-    Ok: Feedback,
-    Fail: Feedback
-});

package/Form/sc/bare.mjs

@@ -1,29 +0,0 @@
-import styled from "styled-components";
-import { Alert } from "../../Alert";
-import { Collapsable } from "../../Collapsable";
-import { ProgressCircular } from "../../Progress";
-import { extendComponent } from "../../helpers";
-import { centered, overlay } from "../../styles/styled";
-import * as _ from "../Form";
-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,
-    Ok: Feedback,
-    Fail: Feedback
-});

package/Forms/Checkbox/Checkbox.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { UseToggleProps } from "../Toggle/useToggle";
-export declare const CheckboxRoot: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
-export declare const CheckboxToggle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const CheckboxIndicator: import("styled-components").StyledComponent<(props: unknown) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
-export declare const CheckboxLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export 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,48 +0,0 @@
-"use strict";
-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));
-});

package/Forms/Checkbox/Checkbox.mjs

@@ -1,22 +0,0 @@
-import { forwardRef } from "react";
-import styled from "styled-components";
-import { Toggle, ToggleIndicatorSquared, ToggleLabel } from "../Toggle";
-import { useToggle } from "../Toggle/useToggle";
-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 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));
-});

package/Forms/Checkbox/index.d.ts

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

package/Forms/Checkbox/index.js

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

package/Forms/Checkbox/index.mjs

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

package/Forms/Feedback/Feedback.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export type FeedbackProps = React.ComponentPropsWithoutRef<"div"> & {
-    $danger?: boolean;
-};
-export declare const Feedback: ({ $danger, children }: FeedbackProps) => import("react/jsx-runtime").JSX.Element;

package/Forms/Feedback/Feedback.js

@@ -1,23 +0,0 @@
-"use strict";
-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);
-};

package/Forms/Feedback/Feedback.mjs

@@ -1,12 +0,0 @@
-import styled from "styled-components";
-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);
-};

package/Forms/Feedback/index.d.ts

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

package/Forms/Feedback/index.js

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

package/Forms/Feedback/index.mjs

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

package/Forms/Field/Field.d.ts

@@ -1,38 +0,0 @@
-/// <reference types="react" />
-import type { FieldError as RHF_FieldError, FieldErrors as RHF_FieldErrors } from "react-hook-form";
-import type { Translate } from "../../types";
-export declare const field: import("styled-components").FlattenSimpleInterpolation;
-export declare const FieldBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const FieldRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    $danger: boolean;
-}, never>;
-/**
- * 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")`.
- */
-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;
-};
-export type FieldProps = React.ComponentPropsWithoutRef<"div"> & {
-    name?: string;
-    t?: Translate;
-    error?: null | RHF_FieldError;
-    errors?: RHF_FieldErrors;
-};
-export declare const Field: ({ name, t, error, errors, children, ...props }: FieldProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/Forms/Field/Field.js

@@ -1,69 +0,0 @@
-"use strict";
-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, {
-    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.${name}.${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 /*#__PURE__*/ React.createElement(FieldRoot, {
-        $danger: !!err,
-        ...props
-    }, children, msg && /*#__PURE__*/ React.createElement(_Feedback.Feedback, {
-        $danger: true
-    }, msg));
-};

package/Forms/Field/Field.mjs

@@ -1,44 +0,0 @@
-import styled, { css } from "styled-components";
-import { Feedback } from "../Feedback";
-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.${name}.${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 /*#__PURE__*/ React.createElement(FieldRoot, {
-        $danger: !!err,
-        ...props
-    }, children, msg && /*#__PURE__*/ React.createElement(Feedback, {
-        $danger: true
-    }, msg));
-};