@koine/react 1.0.9 → 1.0.12

package/Editor/components.js

@@ -1,28 +1,10 @@
+import { __makeTemplateObject } from "tslib";
 import styled, { createGlobalStyle } from "styled-components";
 import { IconButton } from "../Buttons/IconButton";
 import { inputPadding, inputBorder, inputFocus } from "../Forms/styles";
 export { MdFormatBold as EditorIconBold, MdFormatItalic as EditorIconItalic, } from "react-icons/md";
-export const EditorRoot = styled.div `
-  ${inputBorder}
-  ${inputFocus}
-`;
-export const EditorBarRoot = styled.div `
-  display: flex;
-  justify-content: flex-end;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  /* background: var(--grey900); */
-`;
-export const EditorBarBtn = styled(IconButton) ``;
-export const EditorGlobalStyles = createGlobalStyle `
-  .ProseMirror {
-    ${inputPadding}
-    
-    &:focus {
-      outline:none;
-    }
-
-    > *:first-child {
-      margin-top: 0;
-    }
-  }
-`;
+export var EditorRoot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), inputBorder, inputFocus);
+export var EditorBarRoot = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  /* background: var(--grey900); */\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  /* background: var(--grey900); */\n"])));
+export var EditorBarBtn = styled(IconButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+export var EditorGlobalStyles = createGlobalStyle(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  .ProseMirror {\n    ", "\n    \n    &:focus {\n      outline:none;\n    }\n\n    > *:first-child {\n      margin-top: 0;\n    }\n  }\n"], ["\n  .ProseMirror {\n    ", "\n    \n    &:focus {\n      outline:none;\n    }\n\n    > *:first-child {\n      margin-top: 0;\n    }\n  }\n"])), inputPadding);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Favicon/FaviconTags.js

@@ -9,6 +9,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *
  * @see https://realfavicongenerator.net/
  */
-export const FaviconTags = ({ name, color, safariTabColor, tileColor, themeColor, }) => {
+export var FaviconTags = function (_a) {
+    var name = _a.name, color = _a.color, safariTabColor = _a.safariTabColor, tileColor = _a.tileColor, themeColor = _a.themeColor;
     return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" }), _jsx("link", { rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png" }), _jsx("link", { rel: "icon", type: "image/png", sizes: "16x16", href: "/favicon-16x16.png" }), _jsx("link", { rel: "manifest", href: "/site.webmanifest" }), _jsx("link", { rel: "mask-icon", href: "/safari-pinned-tab.svg", color: safariTabColor || color }), _jsx("meta", { name: "apple-mobile-web-app-title", content: name }), _jsx("meta", { name: "application-name", content: name }), _jsx("meta", { name: "msapplication-TileColor", content: tileColor || color }), _jsx("meta", { name: "theme-color", content: themeColor || color })] }));
 };

package/Form/Form.d.ts

@@ -0,0 +1,111 @@
+/// <reference types="react" />
+import { type WithComponents, type Simplify } from "../helpers";
+export declare type OwnProps = React.PropsWithChildren<{
+    action: string;
+    ok?: boolean;
+    okProps?: object;
+    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 declare type Components = {
+    Root: {
+        type: "form";
+        props: {};
+    };
+    Overlay: {
+        type: "div";
+        props: {};
+    };
+    Progress: {
+        type: "div";
+        props: {};
+    };
+    Collapsable: {
+        type: "div";
+        props: {
+            $open?: boolean;
+            recalc?: boolean;
+            body?: React.ReactNode;
+        };
+    };
+    Ok: {
+        type: "div";
+        props: React.PropsWithChildren<{}>;
+    };
+    Fail: {
+        type: "div";
+        props: React.PropsWithChildren<{}>;
+    };
+};
+export declare type ComponentsProps = {
+    [Name in keyof Components]: Components[Name]["props"];
+};
+export declare type Props = Simplify<WithComponents<OwnProps, Components>>;
+export declare type FormProps = Props;
+export declare type KoineFormProps = Props;
+export declare const Root: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "key" | keyof import("react").FormHTMLAttributes<HTMLFormElement>>>;
+export declare const Overlay: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>;
+export declare const Progress: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>;
+export declare const Collapsable: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    $open?: boolean | undefined;
+    recalc?: boolean | undefined;
+    body?: React.ReactNode;
+}>;
+export declare const Ok: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    children?: import("react").ReactNode;
+}>;
+export declare const Fail: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    children?: import("react").ReactNode;
+}>;
+export declare type FormFeedbackView = "" | "ok" | "fail";
+export declare const Form: ({ Root: _Root, Overlay: _Overlay, Progress: _Progress, Collapsable: _Collapsable, ok, fail, loading, Ok: _Ok, okProps, Fail: _Fail, failProps, collapseOnOk, collapseOnFail, okTimeout, failTimeout, children, ...props }: FormProps) => JSX.Element;
+export declare const KoineForm: ((props: Simplify<WithComponents<OwnProps, Components>>) => import("react").FunctionComponentElement<any>) & {
+    Root: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "key" | keyof import("react").FormHTMLAttributes<HTMLFormElement>>>;
+    Overlay: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>;
+    Progress: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>;
+    Collapsable: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+        $open?: boolean | undefined;
+        recalc?: boolean | undefined;
+        body?: React.ReactNode;
+    }>;
+    Ok: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+        children?: import("react").ReactNode;
+    }>;
+    Fail: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+        children?: import("react").ReactNode;
+    }>;
+} & {
+    defaultProps: {
+        Root: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "key" | keyof import("react").FormHTMLAttributes<HTMLFormElement>>>;
+        Overlay: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>;
+        Progress: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>;
+        Collapsable: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+            $open?: boolean | undefined;
+            recalc?: boolean | undefined;
+            body?: React.ReactNode;
+        }>;
+        Ok: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+            children?: import("react").ReactNode;
+        }>;
+        Fail: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+            children?: import("react").ReactNode;
+        }>;
+    };
+};

package/Form/Form.js

@@ -0,0 +1,61 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+// import { type MotionProps } from "framer-motion";
+import { extendComponent, } from "../helpers";
+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 = __rest(_a, ["Root", "Overlay", "Progress", "Collapsable", "ok", "fail", "loading", "Ok", "okProps", "Fail", "failProps", "collapseOnOk", "collapseOnFail", "okTimeout", "failTimeout", "children"]);
+    var _f = useState(""), open = _f[0], setOpen = _f[1];
+    var commonProps = {
+        head: null,
+        components: {
+            HeadIcon: null,
+        },
+    };
+    useEffect(function () {
+        if (!loading) {
+            if (ok)
+                setOpen("ok");
+            else if (fail)
+                setOpen("fail");
+        }
+    }, [ok, fail, loading]);
+    useEffect(function () {
+        var timeout;
+        if (open === "fail" && failTimeout) {
+            timeout = setTimeout(function () { return setOpen(""); }, failTimeout);
+        }
+        else if (open === "ok" && okTimeout) {
+            timeout = setTimeout(function () { return setOpen(""); }, okTimeout);
+        }
+        return function () {
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+        };
+    }, [open, failTimeout, okTimeout]);
+    var formExpanded = true;
+    if (collapseOnFail && fail)
+        formExpanded = false;
+    if (collapseOnOk && ok)
+        formExpanded = false;
+    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)) }))] })));
+};
+export var KoineForm = extendComponent(Form, {
+    Root: Root,
+    Overlay: Overlay,
+    Progress: Progress,
+    Collapsable: Collapsable,
+    Ok: Ok,
+    Fail: Fail,
+});

package/Form/package.json

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

package/Form/sc/bare.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import * as _ from "../Form";
+export type { KoineFormProps } from "../Form";
+export declare const Root: import("styled-components").StyledComponent<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<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 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/source/simplify").Simplify<import("../../helpers").WithComponents<_.OwnProps, _.Components>>) => import("react").FunctionComponentElement<any>) & {
+    Root: import("styled-components").StyledComponent<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<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>, import("styled-components").DefaultTheme, {}, never>;
+    Progress: ({ size, thickness, color, ...props }: {
+        [x: string]: any;
+        size?: string | undefined;
+        thickness?: number | undefined;
+        color?: string | undefined;
+    }) => JSX.Element;
+    Collapsable: null;
+    Ok: import("styled-components").StyledComponent<({ $danger, children, ...props }: import("../../Alert").AlertProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+    Fail: import("styled-components").StyledComponent<({ $danger, children, ...props }: import("../../Alert").AlertProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+} & {
+    defaultProps: {
+        Root: import("styled-components").StyledComponent<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<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>, import("styled-components").DefaultTheme, {}, never>;
+        Progress: ({ size, thickness, color, ...props }: {
+            [x: string]: any;
+            size?: string | undefined;
+            thickness?: number | undefined;
+            color?: string | undefined;
+        }) => JSX.Element;
+        Collapsable: null;
+        Ok: import("styled-components").StyledComponent<({ $danger, children, ...props }: import("../../Alert").AlertProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+        Fail: import("styled-components").StyledComponent<({ $danger, children, ...props }: import("../../Alert").AlertProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+    };
+};

package/Form/sc/bare.js

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

@@ -1,24 +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 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;
-`;
+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 const Checkbox = forwardRef(function Checkbox(props, ref) {
-    const { rootProps, Inputs, label } = useToggle(props, ref);
-    return (_jsxs(CheckboxRoot, { ...rootProps, children: [_jsxs(CheckboxToggle, { children: [Inputs, _jsx(CheckboxIndicator, {})] }), label && _jsx(CheckboxLabel, { children: label })] }));
+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/Feedback/Feedback.js

@@ -1,10 +1,9 @@
+import { __assign, __makeTemplateObject } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 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 (_jsx(Root, { role: "alert", "$danger": $danger, children: children }));
+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/Field/Field.js

@@ -1,26 +1,13 @@
+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 const field = css `
-  padding-bottom: 20px;
-`;
-export const FieldBase = styled.div `
-  ${field}
-`;
-export const FieldRoot = styled(FieldBase) `
-  ${(p) => {
+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 &&
-        `
-    color: var(--danger);
-    
-    textarea,
-    input,
-    select {
-      color: var(--danger);
-    }
-  `);
-}}
-`;
+        "\n    color: var(--danger);\n    \n    textarea,\n    input,\n    select {\n      color: var(--danger);\n    }\n  ");
+});
 /**
  * Yup's errors produce by these validations:
  *
@@ -33,17 +20,18 @@ export const FieldRoot = styled(FieldBase) `
  * We assume these as standard translations keys without needing to pass
  * a string into the validation, e.g. `required("mySpecialKey")`.
  */
-const YUP_ERROR_TYPES_AS_KEYS = {
+var YUP_ERROR_TYPES_AS_KEYS = {
     required: 1,
     email: 1,
 };
-export const Field = ({ name, t, error, errors, children, ...props }) => {
-    const err = errors && name ? errors[name] : error;
-    let msg = "";
+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") {
-            const translationKey = err.type && YUP_ERROR_TYPES_AS_KEYS[err.type] ? err.type : "";
-            msg = t(`errors.${name}.${translationKey || err.message}`);
+            var translationKey = err.type && YUP_ERROR_TYPES_AS_KEYS[err.type] ? err.type : "";
+            msg = t("errors.".concat(name, ".").concat(translationKey || err.message));
         }
         else {
             msg = err.message;
@@ -55,5 +43,6 @@ export const Field = ({ name, t, error, errors, children, ...props }) => {
     // useEffect(() => {
     //   i18n.addResourceBundle(locale, "core.Forms", null);
     // }, []);
-    return (_jsxs(FieldRoot, { "$danger": !!err, ...props, children: [children, msg && _jsx(Feedback, { "$danger": true, children: msg })] }));
+    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,3 +1,4 @@
+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";
@@ -15,20 +16,23 @@ import { InputHoneypot } from "../styles";
  * ```json
  * ```
  */
-export const FieldControl = ({ control, register, setValue, name: maybeEncodedName, label, placeholder, hint, t, showError = true, children, encode, ...props }) => {
-    const name = encode ? decode(maybeEncodedName) : maybeEncodedName;
-    const { errors } = useFormState({ name, control });
-    const error = showError && errors[name] ? errors[name] : null;
-    const FormFieldContent = useMemo(() => children({
-        control,
-        register,
-        setValue,
-        name: maybeEncodedName,
-        // @see https://github.com/vinissimus/next-translate/pull/461
-        // @see https://github.com/vinissimus/next-translate/issues/429
-        label: label || t(`labels.${name}`, undefined, { default: "" }),
-        placeholder: placeholder || t(`placeholders.${name}`, undefined, { fallback: "" }),
-    }), [
+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,
@@ -39,5 +43,5 @@ export const FieldControl = ({ control, register, setValue, name: maybeEncodedNa
         maybeEncodedName,
         placeholder,
     ]);
-    return (_jsxs(_Fragment, { children: [_jsxs(Field, { name: maybeEncodedName, t: t, error: error, ...props, children: [FormFieldContent, hint && _jsx(FieldHint, { children: hint })] }), encode && register && _jsx(InputHoneypot, { ...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)))] }));
 };

package/Forms/Field/FieldHint.js

@@ -1,6 +1,4 @@
+import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export const FieldHint = styled.div `
-  padding-top: 0.6em;
-  opacity: 0.7;
-  font-size: 75%;
-`;
+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/Input/Input.js

@@ -1,23 +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 const InputWrap = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-export const InputMain = styled.div `
-  flex: 1;
-`;
-export const InputPre = styled.div ``;
-export const InputPost = styled.div ``;
-export const InputNative = styled.input `
-  ${inputBase}
-  ${inputFocus}
-`;
-export const Input = forwardRef(function Input({ register, name, label, ...props }, ref) {
+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, { ...(register ? register(name) : { name, ref }), ...props })] }));
+    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/InputGroup/InputGroup.js

@@ -1,42 +1,15 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { KoineButton } from "../../Buttons";
 import { field } from "../Field";
 import { max, min } from "../../styles/media";
-export const InputGroupRoot = styled.div `
-  ${field}
-  display: flex;
-  ${max.sm} {
-    flex-direction: column;
-  }
-`;
-export const InputGroupMain = styled.div `
-  flex: 1;
-`;
-export const InputGroupButtonPre = styled(KoineButton) `
-  ${max.sm} {
-    border-bottom: 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  ${min.sm} {
-    border-right: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-`;
-export const InputGroupButtonPost = styled(KoineButton) `
-  ${max.sm} {
-    border-top: 0;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-  ${min.sm} {
-    border-left: 0;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-`;
-export const InputGroup = ({ pre, post, Button = KoineButton, btnProps = {}, children, ...props }) => {
-    return (_jsxs(InputGroupRoot, { ...props, children: [pre && _jsx(InputGroupButtonPre, { as: Button, ...btnProps }), _jsx(InputGroupMain, { children: children }), post && _jsx(InputGroupButtonPost, { as: Button, ...btnProps })] }));
+export var InputGroupRoot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  ", " {\n    flex-direction: column;\n  }\n"], ["\n  ", "\n  display: flex;\n  ", " {\n    flex-direction: column;\n  }\n"])), field, max.sm);
+export var InputGroupMain = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+export var InputGroupButtonPre = styled(KoineButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", " {\n    border-bottom: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  ", " {\n    border-right: 0;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n"], ["\n  ", " {\n    border-bottom: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  ", " {\n    border-right: 0;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n"])), max.sm, min.sm);
+export var InputGroupButtonPost = styled(KoineButton)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", " {\n    border-top: 0;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n  ", " {\n    border-left: 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n"], ["\n  ", " {\n    border-top: 0;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n  ", " {\n    border-left: 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n"])), max.sm, min.sm);
+export var InputGroup = function (_a) {
+    var pre = _a.pre, post = _a.post, _b = _a.Button, Button = _b === void 0 ? KoineButton : _b, _c = _a.btnProps, btnProps = _c === void 0 ? {} : _c, children = _a.children, props = __rest(_a, ["pre", "post", "Button", "btnProps", "children"]);
+    return (_jsxs(InputGroupRoot, __assign({}, props, { children: [pre && _jsx(InputGroupButtonPre, __assign({ as: Button }, btnProps)), _jsx(InputGroupMain, { children: children }), post && _jsx(InputGroupButtonPost, __assign({ as: Button }, btnProps))] })));
 };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Forms/Label/Label.js

@@ -1,24 +1,6 @@
+import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export const label = `
-  display: flex;
-  font-size: 13px;
-  cursor: pointer;
-`;
-export const labelMaterial = `
-  z-index: 2;
-  position: relative;
-  display: inline-block;
-  padding: 0 5px;
-  font-weight: 100;
-  font-size: 10px;
-  background: var(--bodyBg);
-  transform: translateY(-0.3em) translateX(1em);
-  cursor: pointer;
-
-  + * {
-    margin-top: -1em;
-  }
-`;
-export const Label = styled.label `
-  ${labelMaterial}
-`;
+export var label = "\n  display: flex;\n  font-size: 13px;\n  cursor: pointer;\n";
+export var labelMaterial = "\n  z-index: 2;\n  position: relative;\n  display: inline-block;\n  padding: 0 5px;\n  font-weight: 100;\n  font-size: 10px;\n  background: var(--bodyBg);\n  transform: translateY(-0.3em) translateX(1em);\n  cursor: pointer;\n\n  + * {\n    margin-top: -1em;\n  }\n";
+export var Label = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), labelMaterial);
+var templateObject_1;