@koine/react 2.0.0-beta.1 → 2.0.0-beta.11

package/Forms/InputGroup/InputGroup.mjs

@@ -1,15 +1,57 @@
-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 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))] })));
+import { field } from "../Field";
+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 /*#__PURE__*/ _jsxs(InputGroupRoot, {
+        ...props,
+        children: [
+            pre && /*#__PURE__*/ _jsx(InputGroupButtonPre, {
+                as: Button,
+                ...btnProps
+            }),
+            /*#__PURE__*/ _jsx(InputGroupMain, {
+                children: children
+            }),
+            post && /*#__PURE__*/ _jsx(InputGroupButtonPost, {
+                as: Button,
+                ...btnProps
+            })
+        ]
+    });
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Forms/Label/Label.d.ts

@@ -1,3 +1,3 @@
 export declare const label = "\n  display: flex;\n  font-size: 13px;\n  cursor: pointer;\n";
 export declare const 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 declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
+export declare const Label: any;

package/Forms/Label/Label.mjs

@@ -1,6 +1,24 @@
-import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-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;
+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}
+`;

package/Forms/Password/Password.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { FormControl } from "../helpers";
-export declare const PasswordInputNative: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export declare const PasswordInputNative: any;
 export type PasswordProps = FormControl;
 export declare const Password: import("react").ForwardRefExoticComponent<Omit<PasswordProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/Forms/Password/Password.mjs

@@ -1,17 +1,53 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
+import { ImEyeBlocked as IconInvisible, ImEye as IconVisible } from "react-icons/im";
 import styled from "styled-components";
-import { ImEye as IconVisible, ImEyeBlocked as IconInvisible, } from "react-icons/im";
-import { Label } from "../Label/Label";
 import { InputNative } from "../Input/Input";
-var ICON_WIDTH = "2em";
-var PasswordInputWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-export var PasswordInputNative = styled(InputNative)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  padding-right: ", ";\n"], ["\n  position: relative;\n  padding-right: ", ";\n"])), ICON_WIDTH);
-var PasswordIcon = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.5;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.5;\n"])), ICON_WIDTH);
-export var Password = forwardRef(function Password(_a, ref) {
-    var register = _a.register, name = _a.name, label = _a.label, props = __rest(_a, ["register", "name", "label"]);
-    var _b = useState(false), visible = _b[0], setVisible = _b[1];
-    return (_jsxs(_Fragment, { children: [label && _jsx(Label, { children: label }), _jsxs(PasswordInputWrap, { children: [_jsx(PasswordInputNative, __assign({ type: visible ? "text" : "password", autoComplete: "new-password" }, (register ? register(name) : { name: name, ref: ref }), props)), _jsx(PasswordIcon, { onClick: function () { return setVisible(function (prev) { return !prev; }); }, children: visible ? _jsx(IconInvisible, {}) : _jsx(IconVisible, {}) })] })] }));
+import { Label } from "../Label/Label";
+const ICON_WIDTH = "2em";
+const PasswordInputWrap = styled.div`
+  position: relative;
+`;
+export const PasswordInputNative = styled(InputNative)`
+  position: relative;
+  padding-right: ${ICON_WIDTH};
+`;
+const PasswordIcon = styled.span`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: ${ICON_WIDTH};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0.5;
+`;
+export const Password = /*#__PURE__*/ forwardRef(function Password({ register, name, label, ...props }, ref) {
+    const [visible, setVisible] = useState(false);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            label && /*#__PURE__*/ _jsx(Label, {
+                children: label
+            }),
+            /*#__PURE__*/ _jsxs(PasswordInputWrap, {
+                children: [
+                    /*#__PURE__*/ _jsx(PasswordInputNative, {
+                        type: visible ? "text" : "password",
+                        autoComplete: "new-password",
+                        ...register ? register(name) : {
+                            name,
+                            ref
+                        },
+                        ...props
+                    }),
+                    /*#__PURE__*/ _jsx(PasswordIcon, {
+                        onClick: ()=>setVisible((prev)=>!prev),
+                        children: visible ? /*#__PURE__*/ _jsx(IconInvisible, {}) : /*#__PURE__*/ _jsx(IconVisible, {})
+                    })
+                ]
+            })
+        ]
+    });
 });
-var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Radio/Radio.mjs

@@ -1,25 +1,57 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
 import { label } from "../Label/Label";
-import { Toggle, ToggleLabel, ToggleIndicatorSquared } from "../Toggle";
+import { Toggle, ToggleIndicatorSquared, ToggleLabel } from "../Toggle";
 import { InputInvisible } from "../styles";
-var RadioRoot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-var RadioLabel = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), label);
-var RadioOptionRoot = styled.label(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.05em;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.05em;\n  cursor: pointer;\n"])));
-var RadioToggle = styled(Toggle)(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
-var RadioIndicator = styled(ToggleIndicatorSquared)(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
-var RadioOptionLabel = styled(ToggleLabel)(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
-var RadioOption = forwardRef(function RadioOption(_a, ref) {
-    var register = _a.register, name = _a.name, label = _a.label, $ref = _a.$ref, props = __rest(_a, ["register", "name", "label", "$ref"]);
-    var inputProps = register ? register(name) : { name: name, ref: $ref || ref };
-    return (_jsxs(RadioOptionRoot, { children: [_jsxs(RadioToggle, { children: [_jsx(InputInvisible, __assign({ type: "radio" }, inputProps, props)), _jsx(RadioIndicator, {})] }), _jsx(RadioOptionLabel, { children: label })] }));
+const RadioRoot = styled.div``;
+const RadioLabel = styled.div`
+  ${label}
+`;
+const RadioOptionRoot = styled.label`
+  display: flex;
+  align-items: center;
+  padding: 0.05em;
+  cursor: pointer;
+`;
+const RadioToggle = styled(Toggle)``;
+const RadioIndicator = styled(ToggleIndicatorSquared)``;
+const RadioOptionLabel = styled(ToggleLabel)``;
+const RadioOption = /*#__PURE__*/ forwardRef(function RadioOption({ register, name, label, $ref, ...props }, ref) {
+    const inputProps = register ? register(name) : {
+        name,
+        ref: $ref || ref
+    };
+    return /*#__PURE__*/ _jsxs(RadioOptionRoot, {
+        children: [
+            /*#__PURE__*/ _jsxs(RadioToggle, {
+                children: [
+                    /*#__PURE__*/ _jsx(InputInvisible, {
+                        type: "radio",
+                        ...inputProps,
+                        ...props
+                    }),
+                    /*#__PURE__*/ _jsx(RadioIndicator, {})
+                ]
+            }),
+            /*#__PURE__*/ _jsx(RadioOptionLabel, {
+                children: label
+            })
+        ]
+    });
 });
-export var Radio = forwardRef(function Radio(_a, ref) {
-    var label = _a.label, options = _a.options, props = __rest(_a, ["label", "options"]);
-    if (!options)
-        return null;
-    return (_jsxs(RadioRoot, { children: [label && _jsx(RadioLabel, { children: label }), options.map(function (option, idx) { return (_jsx(RadioOption, __assign({}, option, props, { "$ref": ref }), idx)); })] }));
+export const Radio = /*#__PURE__*/ forwardRef(function Radio({ label, options, ...props }, ref) {
+    if (!options) return null;
+    return /*#__PURE__*/ _jsxs(RadioRoot, {
+        children: [
+            label && /*#__PURE__*/ _jsx(RadioLabel, {
+                children: label
+            }),
+            options.map((option, idx)=>/*#__PURE__*/ _jsx(RadioOption, {
+                    ...option,
+                    ...props,
+                    $ref: ref
+                }, idx))
+        ]
+    });
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Forms/Switch/Switch.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { UseToggleProps } from "../Toggle/useToggle";
-export declare const SwitchTrack: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const SwitchHandle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const SwitchTrack: any;
+export declare const SwitchHandle: any;
 export type SwitchProps = UseToggleProps;
 /**
  * All logic and invisible Inputs come from the `useToggle` hook

package/Forms/Switch/Switch.mjs

@@ -1,20 +1,60 @@
-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 { CheckboxRoot, CheckboxLabel } from "../Checkbox";
+import { stateFocus } from "../../styles/styled";
+import { CheckboxLabel, CheckboxRoot } from "../Checkbox";
 import { toggleBase } from "../Toggle";
 import { useToggle } from "../Toggle/useToggle";
-import { stateFocus } from "../../styles/styled";
-var SWITCH_GUTTER = 0.25;
-var SWITCH_HANDLE_SIZE = 1;
-export var SwitchTrack = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: ", "em;\n  height: ", "em;\n  padding: ", "em;\n  border-radius: ", "em;\n  ", "\n\n  input:focus ~ & {\n    ", "\n  }\n\n  input:disabled ~ & {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"], ["\n  position: relative;\n  width: ", "em;\n  height: ", "em;\n  padding: ", "em;\n  border-radius: ", "em;\n  ", "\n\n  input:focus ~ & {\n    ", "\n  }\n\n  input:disabled ~ & {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])), SWITCH_HANDLE_SIZE * 3, SWITCH_HANDLE_SIZE * 1.5, SWITCH_GUTTER, SWITCH_HANDLE_SIZE, toggleBase, stateFocus);
-export var SwitchHandle = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  width: ", "em;\n  height: ", "em;\n  left: ", "em;\n  margin-top: -1px;\n  /* border: 1px solid currentColor; */\n  background: currentColor;\n  opacity: 0.5;\n  border-radius: 100%;\n  transition: all 0.18s ease-in-out;\n\n  input:checked + ", " & {\n    opacity: 1;\n    left: calc(100% - ", "em - ", "em);\n  }\n"], ["\n  position: absolute;\n  width: ", "em;\n  height: ", "em;\n  left: ", "em;\n  margin-top: -1px;\n  /* border: 1px solid currentColor; */\n  background: currentColor;\n  opacity: 0.5;\n  border-radius: 100%;\n  transition: all 0.18s ease-in-out;\n\n  input:checked + ", " & {\n    opacity: 1;\n    left: calc(100% - ", "em - ", "em);\n  }\n"])), SWITCH_HANDLE_SIZE, SWITCH_HANDLE_SIZE, SWITCH_GUTTER, SwitchTrack, SWITCH_HANDLE_SIZE, SWITCH_GUTTER);
+const SWITCH_GUTTER = 0.25;
+const SWITCH_HANDLE_SIZE = 1;
+export const SwitchTrack = styled.span`
+  position: relative;
+  width: ${SWITCH_HANDLE_SIZE * 3}em;
+  height: ${SWITCH_HANDLE_SIZE * 1.5}em;
+  padding: ${SWITCH_GUTTER}em;
+  border-radius: ${SWITCH_HANDLE_SIZE}em;
+  ${toggleBase}
+
+  input:focus ~ & {
+    ${stateFocus}
+  }
+
+  input:disabled ~ & {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+export const SwitchHandle = styled.span`
+  position: absolute;
+  width: ${SWITCH_HANDLE_SIZE}em;
+  height: ${SWITCH_HANDLE_SIZE}em;
+  left: ${SWITCH_GUTTER}em;
+  margin-top: -1px;
+  /* border: 1px solid currentColor; */
+  background: currentColor;
+  opacity: 0.5;
+  border-radius: 100%;
+  transition: all 0.18s ease-in-out;
+
+  input:checked + ${SwitchTrack} & {
+    opacity: 1;
+    left: calc(100% - ${SWITCH_HANDLE_SIZE}em - ${SWITCH_GUTTER}em);
+  }
+`;
 /**
  * All logic and invisible Inputs come from the `useToggle` hook
- */
-export var Switch = forwardRef(function Switch(props, ref) {
-    var _a = useToggle(props, ref), rootProps = _a.rootProps, Inputs = _a.Inputs, label = _a.label;
-    return (_jsxs(CheckboxRoot, __assign({}, rootProps, { children: [Inputs, _jsx(SwitchTrack, { children: _jsx(SwitchHandle, {}) }), label && _jsx(CheckboxLabel, { children: label })] })));
+ */ export const Switch = /*#__PURE__*/ forwardRef(function Switch(props, ref) {
+    const { rootProps, Inputs, label } = useToggle(props, ref);
+    return /*#__PURE__*/ _jsxs(CheckboxRoot, {
+        ...rootProps,
+        children: [
+            Inputs,
+            /*#__PURE__*/ _jsx(SwitchTrack, {
+                children: /*#__PURE__*/ _jsx(SwitchHandle, {})
+            }),
+            label && /*#__PURE__*/ _jsx(CheckboxLabel, {
+                children: label
+            })
+        ]
+    });
 });
-var templateObject_1, templateObject_2;

package/Forms/Textarea/Textarea.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { FormControl } from "../helpers";
-export declare const TextareaNative: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, {}, never>;
+export declare const TextareaNative: any;
 export type TextareaProps = FormControl<"textarea">;
 export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/Forms/Textarea/Textarea.mjs

@@ -1,12 +1,26 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
 import { Label } from "../Label/Label";
 import { inputBase, inputFocus } from "../styles";
-export var TextareaNative = styled.textarea(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  resize: vertical;\n"], ["\n  ", "\n  ", "\n  resize: vertical;\n"])), inputBase, inputFocus);
-export var Textarea = forwardRef(function Textarea(_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(TextareaNative, __assign({}, (register ? register(name) : { name: name, ref: ref }), props))] }));
+export const TextareaNative = styled.textarea`
+  ${inputBase}
+  ${inputFocus}
+  resize: vertical;
+`;
+export const Textarea = /*#__PURE__*/ forwardRef(function Textarea({ register, name, label, ...props }, ref) {
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            label && /*#__PURE__*/ _jsx(Label, {
+                children: label
+            }),
+            /*#__PURE__*/ _jsx(TextareaNative, {
+                ...register ? register(name) : {
+                    name,
+                    ref
+                },
+                ...props
+            })
+        ]
+    });
 });
-var templateObject_1;

package/Forms/Textarea/TextareaRich.mjs

@@ -1,28 +1,48 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
+import { Editor } from "../../Editor";
 // import TextareaAutosize from "@mui/base/TextareaAutosize";
 import { Label } from "../Label/Label";
-import { Editor } from "../../Editor";
 import { triggerOnChange } from "../helpers";
-var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .ProseMirror {\n    max-height: 160px;\n    overflow: auto;\n  }\n  .EditorContent {\n    position: relative;\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: 0;\n      left: 0;\n      right: 16px; /* scrollbar width? */\n      height: 3em;\n      background: linear-gradient(0deg, white, white 33%, transparent);\n      pointer-events: none;\n    }\n  }\n"], ["\n  .ProseMirror {\n    max-height: 160px;\n    overflow: auto;\n  }\n  .EditorContent {\n    position: relative;\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: 0;\n      left: 0;\n      right: 16px; /* scrollbar width? */\n      height: 3em;\n      background: linear-gradient(0deg, white, white 33%, transparent);\n      pointer-events: none;\n    }\n  }\n"])));
-export var TextareaRich = forwardRef(function TextareaRich(_a, ref) {
-    var register = _a.register, setValue = _a.setValue, name = _a.name, label = _a.label, _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, onChange = _a.onChange, props = __rest(_a, ["register", "setValue", "name", "label", "defaultValue", "onChange"]);
-    if (register)
-        register(name);
-    return (_jsxs(Root, { children: [label && _jsx(Label, { children: label }), _jsx(Editor, __assign({ options: {
+const Root = styled.div`
+  .ProseMirror {
+    max-height: 160px;
+    overflow: auto;
+  }
+  .EditorContent {
+    position: relative;
+    &:after {
+      position: absolute;
+      content: "";
+      bottom: 0;
+      left: 0;
+      right: 16px; /* scrollbar width? */
+      height: 3em;
+      background: linear-gradient(0deg, white, white 33%, transparent);
+      pointer-events: none;
+    }
+  }
+`;
+export const TextareaRich = /*#__PURE__*/ forwardRef(function TextareaRich({ register, setValue, name, label, defaultValue = "", onChange, ...props }, ref) {
+    if (register) register(name);
+    return /*#__PURE__*/ _jsxs(Root, {
+        children: [
+            label && /*#__PURE__*/ _jsx(Label, {
+                children: label
+            }),
+            /*#__PURE__*/ _jsx(Editor, {
+                options: {
                     // element: <TextareaAutosize />,
                     content: defaultValue,
-                    onUpdate: (onChange || setValue) && name
-                        ? function (_a) {
-                            var editor = _a.editor;
-                            var value = editor.getHTML();
-                            if (setValue)
-                                setValue(name, value);
-                            triggerOnChange(onChange, name, value);
-                        }
-                        : undefined,
-                } }, props))] }));
+                    onUpdate: (onChange || setValue) && name ? ({ editor })=>{
+                        const value = editor.getHTML();
+                        if (setValue) setValue(name, value);
+                        triggerOnChange(onChange, name, value);
+                    } : undefined
+                },
+                ...props
+            })
+        ]
+    });
 });
-var templateObject_1;

package/Forms/Toggle/Toggle-tailwind.mjs

@@ -1,4 +1,3 @@
-"use strict";
 // /**
 //  * @file
 //  *

package/Forms/Toggle/Toggle.d.ts

@@ -2,13 +2,13 @@ export declare const toggleBase = "\n  border: 1px solid var(--forms-border-colo
 export declare const toggleIndicatorBg = "\n  display: inline-block;\n  flex-shrink: 0;\n  width: 100%;\n  height: 100%;\n";
 export declare const toggleIndicatorBgShape: string;
 export declare const toggleIndicatorFg = "\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  fill: currentcolor;\n";
-export declare const Toggle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const ToggleLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const ToggleLabelSub: import("styled-components").StyledComponent<"small", import("styled-components").DefaultTheme, {}, never>;
-export declare const ToggleIndicatorHolder: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const ToggleIndicatorBgSquare: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
-export declare const ToggleIndicatorBgCircle: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
-export declare const ToggleIndicatorFg: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
+export declare const Toggle: any;
+export declare const ToggleLabel: any;
+export declare const ToggleLabelSub: any;
+export declare const ToggleIndicatorHolder: any;
+export declare const ToggleIndicatorBgSquare: any;
+export declare const ToggleIndicatorBgCircle: any;
+export declare const ToggleIndicatorFg: any;
 export type ToggleIndicatorProps = unknown;
 export type ToggleIndicatorSquaredProps = ToggleIndicatorProps;
 export declare const ToggleIndicatorSquared: (props: ToggleIndicatorSquaredProps) => import("react/jsx-runtime").JSX.Element;

package/Forms/Toggle/Toggle.mjs

@@ -1,31 +1,123 @@
-import { __makeTemplateObject } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @file
  *
  * About accessibility:
  * - minimum target size of 44px https://www.w3.org/TR/WCAG21/#target-size
- */
+ */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import styled from "styled-components";
 import { stateFocus } from "../../styles/styled";
-export var toggleBase = "\n  border: 1px solid var(--forms-border-color);\n";
-export var toggleIndicatorBg = "\n  display: inline-block;\n  flex-shrink: 0;\n  width: 100%;\n  height: 100%;\n";
-export var toggleIndicatorBgShape = "\n  ".concat(toggleIndicatorBg, "\n  fill: none;\n  stroke-width: 2px;\n  stroke: var(--forms-border-color);\n");
-export var toggleIndicatorFg = "\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  fill: currentcolor;\n";
-export var Toggle = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n  height: 2em;\n  margin: 0 -0.3em; /* rtl */\n  padding: 0.3em;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n  height: 2em;\n  margin: 0 -0.3em; /* rtl */\n  padding: 0.3em;\n"])));
-export var ToggleLabel = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-left: 0.6em; /* rtl */\n"], ["\n  margin-left: 0.6em; /* rtl */\n"])));
-export var ToggleLabelSub = styled.small(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  opacity: 0.7;\n  font-size: 0.7em; ;\n"], ["\n  opacity: 0.7;\n  font-size: 0.7em; ;\n"])));
-export var ToggleIndicatorHolder = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n\n  input:focus ~ & {\n    ", "\n  }\n"], ["\n  position: relative;\n  display: flex;\n\n  input:focus ~ & {\n    ", "\n  }\n"])), stateFocus);
-export var ToggleIndicatorBgSquare = styled.svg(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), toggleIndicatorBgShape);
-export var ToggleIndicatorBgCircle = styled.svg(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), toggleIndicatorBgShape);
-export var ToggleIndicatorFg = styled.svg(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  transform: scale(0);\n  transition: transform 0.18s ease;\n\n  input:checked + ", " & {\n    transform: scale(1);\n  }\n"], ["\n  ", "\n  transform: scale(0);\n  transition: transform 0.18s ease;\n\n  input:checked + ", " & {\n    transform: scale(1);\n  }\n"])), toggleIndicatorFg, ToggleIndicatorHolder);
-export var ToggleIndicatorSquared = function (props) {
-    return (_jsxs(ToggleIndicatorHolder, { children: [_jsx(ToggleIndicatorBgSquare, { viewBox: "0 0 24 24", children: _jsx("rect", { width: "24", height: "24" }) }), _jsx(ToggleIndicatorFg, { viewBox: "0 0 24 24", children: _jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) })] }));
+export const toggleBase = `
+  border: 1px solid var(--forms-border-color);
+`;
+export const toggleIndicatorBg = `
+  display: inline-block;
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+`;
+export const toggleIndicatorBgShape = `
+  ${toggleIndicatorBg}
+  fill: none;
+  stroke-width: 2px;
+  stroke: var(--forms-border-color);
+`;
+export const toggleIndicatorFg = `
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  fill: currentcolor;
+`;
+export const Toggle = styled.span`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2em;
+  height: 2em;
+  margin: 0 -0.3em; /* rtl */
+  padding: 0.3em;
+`;
+export const ToggleLabel = styled.span`
+  margin-left: 0.6em; /* rtl */
+`;
+export const ToggleLabelSub = styled.small`
+  opacity: 0.7;
+  font-size: 0.7em;
+`;
+export const ToggleIndicatorHolder = styled.span`
+  position: relative;
+  display: flex;
+
+  input:focus ~ & {
+    ${stateFocus}
+  }
+`;
+export const ToggleIndicatorBgSquare = styled.svg`
+  ${toggleIndicatorBgShape}
+`;
+export const ToggleIndicatorBgCircle = styled.svg`
+  ${toggleIndicatorBgShape}
+`;
+export const ToggleIndicatorFg = styled.svg`
+  ${toggleIndicatorFg}
+  transform: scale(0);
+  transition: transform 0.18s ease;
+
+  input:checked + ${ToggleIndicatorHolder} & {
+    transform: scale(1);
+  }
+`;
+export const ToggleIndicatorSquared = (props)=>{
+    return /*#__PURE__*/ _jsxs(ToggleIndicatorHolder, {
+        children: [
+            /*#__PURE__*/ _jsx(ToggleIndicatorBgSquare, {
+                viewBox: "0 0 24 24",
+                children: /*#__PURE__*/ _jsx("rect", {
+                    width: "24",
+                    height: "24"
+                })
+            }),
+            /*#__PURE__*/ _jsx(ToggleIndicatorFg, {
+                viewBox: "0 0 24 24",
+                children: /*#__PURE__*/ _jsx("path", {
+                    d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+                })
+            })
+        ]
+    });
 };
-export var ToggleIndicatorRounded = function (_a) {
-    var _b = _a.r, r = _b === void 0 ? 6 : _b;
-    var id = useId();
-    return (_jsxs(ToggleIndicatorHolder, { children: [_jsxs(ToggleIndicatorBgCircle, { viewBox: "0 0 24 24", children: [_jsx("circle", { cy: "12", cx: "12", r: "12", id: "r_".concat(id), clipPath: "url(#c_".concat(id, ")") }), _jsx("clipPath", { id: "c_".concat(id), children: _jsx("use", { xlinkHref: "#r_".concat(id) }) })] }), _jsx(ToggleIndicatorFg, { viewBox: "0 0 24 24", children: _jsx("circle", { r: r, cx: "12", cy: "12" }) })] }));
+export const ToggleIndicatorRounded = ({ r = 6 })=>{
+    const id = useId();
+    return /*#__PURE__*/ _jsxs(ToggleIndicatorHolder, {
+        children: [
+            /*#__PURE__*/ _jsxs(ToggleIndicatorBgCircle, {
+                viewBox: "0 0 24 24",
+                children: [
+                    /*#__PURE__*/ _jsx("circle", {
+                        cy: "12",
+                        cx: "12",
+                        r: "12",
+                        id: `r_${id}`,
+                        clipPath: `url(#c_${id})`
+                    }),
+                    /*#__PURE__*/ _jsx("clipPath", {
+                        id: `c_${id}`,
+                        children: /*#__PURE__*/ _jsx("use", {
+                            xlinkHref: `#r_${id}`
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(ToggleIndicatorFg, {
+                viewBox: "0 0 24 24",
+                children: /*#__PURE__*/ _jsx("circle", {
+                    r: r,
+                    cx: "12",
+                    cy: "12"
+                })
+            })
+        ]
+    });
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Forms/Toggle/useToggle-tailwind.mjs

@@ -1,4 +1,3 @@
-"use strict";
 // import React, { useCallback, useId, useMemo } from "react";
 // import type { Option } from "@koine/react";
 // import type { FormControlElementProps } from "../FormControl";