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

package/Forms/InputGroup/InputGroup.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { KoineButton, KoineButtonProps } from "../../Buttons";
-export declare const InputGroupRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const InputGroupMain: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const InputGroupButtonPre: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../../Buttons").KoineButtonUiProps, never>;
-export declare const InputGroupButtonPost: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../../Buttons").KoineButtonUiProps, never>;
+import { KoineButton, KoineButtonProps } from "../../Buttons/index.js";
+export declare const InputGroupRoot: any;
+export declare const InputGroupMain: any;
+export declare const InputGroupButtonPre: any;
+export declare const InputGroupButtonPost: any;
 export type InputGroupProps = React.ComponentPropsWithoutRef<"div"> & {
     pre?: boolean;
     post?: boolean;

package/Forms/InputGroup/InputGroup.js

@@ -1,19 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputGroup = exports.InputGroupButtonPost = exports.InputGroupButtonPre = exports.InputGroupMain = exports.InputGroupRoot = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var Buttons_1 = require("../../Buttons");
-var Field_1 = require("../Field");
-var media_1 = require("../../styles/media");
-exports.InputGroupRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_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_1.field, media_1.max.sm);
-exports.InputGroupMain = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-exports.InputGroupButtonPre = (0, styled_components_1.default)(Buttons_1.KoineButton)(templateObject_3 || (templateObject_3 = tslib_1.__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"])), media_1.max.sm, media_1.min.sm);
-exports.InputGroupButtonPost = (0, styled_components_1.default)(Buttons_1.KoineButton)(templateObject_4 || (templateObject_4 = tslib_1.__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"])), media_1.max.sm, media_1.min.sm);
-var InputGroup = function (_a) {
-    var pre = _a.pre, post = _a.post, _b = _a.Button, Button = _b === void 0 ? Buttons_1.KoineButton : _b, _c = _a.btnProps, btnProps = _c === void 0 ? {} : _c, children = _a.children, props = tslib_1.__rest(_a, ["pre", "post", "Button", "btnProps", "children"]);
-    return ((0, jsx_runtime_1.jsxs)(exports.InputGroupRoot, tslib_1.__assign({}, props, { children: [pre && (0, jsx_runtime_1.jsx)(exports.InputGroupButtonPre, tslib_1.__assign({ as: Button }, btnProps)), (0, jsx_runtime_1.jsx)(exports.InputGroupMain, { children: children }), post && (0, jsx_runtime_1.jsx)(exports.InputGroupButtonPost, tslib_1.__assign({ as: Button }, btnProps))] })));
+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/index.js";
+import { max, min } from "../../styles/media.js";
+import { field } from "../Field/index.js";
+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))] })));
 };
-exports.InputGroup = InputGroup;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Forms/InputGroup/index.d.ts

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

package/Forms/InputGroup/index.js

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

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

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Label = exports.labelMaterial = exports.label = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-exports.label = "\n  display: flex;\n  font-size: 13px;\n  cursor: pointer;\n";
-exports.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";
-exports.Label = styled_components_1.default.label(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.labelMaterial);
+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;

package/Forms/Label/index.d.ts

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

package/Forms/Label/index.js

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

package/Forms/Password/Password.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { FormControl } from "../helpers";
-export declare const PasswordInputNative: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+import type { FormControl } from "../helpers.js";
+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.js

@@ -1,20 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Password = exports.PasswordInputNative = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var im_1 = require("react-icons/im");
-var Label_1 = require("../Label/Label");
-var Input_1 = require("../Input/Input");
+import { __assign, __makeTemplateObject, __read, __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 { InputNative } from "../Input/Input.js";
+import { Label } from "../Label/Label.js";
 var ICON_WIDTH = "2em";
-var PasswordInputWrap = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-exports.PasswordInputNative = (0, styled_components_1.default)(Input_1.InputNative)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  position: relative;\n  padding-right: ", ";\n"], ["\n  position: relative;\n  padding-right: ", ";\n"])), ICON_WIDTH);
-var PasswordIcon = styled_components_1.default.span(templateObject_3 || (templateObject_3 = tslib_1.__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);
-exports.Password = (0, react_1.forwardRef)(function Password(_a, ref) {
-    var register = _a.register, name = _a.name, label = _a.label, props = tslib_1.__rest(_a, ["register", "name", "label"]);
-    var _b = (0, react_1.useState)(false), visible = _b[0], setVisible = _b[1];
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { children: label }), (0, jsx_runtime_1.jsxs)(PasswordInputWrap, { children: [(0, jsx_runtime_1.jsx)(exports.PasswordInputNative, tslib_1.__assign({ type: visible ? "text" : "password", autoComplete: "new-password" }, (register ? register(name) : { name: name, ref: ref }), props)), (0, jsx_runtime_1.jsx)(PasswordIcon, { onClick: function () { return setVisible(function (prev) { return !prev; }); }, children: visible ? (0, jsx_runtime_1.jsx)(im_1.ImEyeBlocked, {}) : (0, jsx_runtime_1.jsx)(im_1.ImEye, {}) })] })] }));
+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 = __read(useState(false), 2), 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, {}) })] })] }));
 });
 var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Password/index.d.ts

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

package/Forms/Password/index.js

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

package/Forms/Radio/Radio.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { Option } from "../../types";
+import type { Option } from "../../types.js";
 import { FormControl } from "../helpers";
 type RadioOptionProps = Omit<FormControl, "value"> & Option & {
     $ref: React.ForwardedRef<HTMLInputElement>;

package/Forms/Radio/Radio.js

@@ -1,28 +1,25 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Radio = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var Label_1 = require("../Label/Label");
-var Toggle_1 = require("../Toggle");
-var styles_1 = require("../styles");
-var RadioRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
-var RadioLabel = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), Label_1.label);
-var RadioOptionRoot = styled_components_1.default.label(templateObject_3 || (templateObject_3 = tslib_1.__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 = (0, styled_components_1.default)(Toggle_1.Toggle)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject([""], [""])));
-var RadioIndicator = (0, styled_components_1.default)(Toggle_1.ToggleIndicatorSquared)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject([""], [""])));
-var RadioOptionLabel = (0, styled_components_1.default)(Toggle_1.ToggleLabel)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject([""], [""])));
-var RadioOption = (0, react_1.forwardRef)(function RadioOption(_a, ref) {
-    var register = _a.register, name = _a.name, label = _a.label, $ref = _a.$ref, props = tslib_1.__rest(_a, ["register", "name", "label", "$ref"]);
+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.js";
+import { Toggle, ToggleIndicatorSquared, ToggleLabel } from "../Toggle/index.js";
+import { InputInvisible } from "../styles.js";
+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 ((0, jsx_runtime_1.jsxs)(RadioOptionRoot, { children: [(0, jsx_runtime_1.jsxs)(RadioToggle, { children: [(0, jsx_runtime_1.jsx)(styles_1.InputInvisible, tslib_1.__assign({ type: "radio" }, inputProps, props)), (0, jsx_runtime_1.jsx)(RadioIndicator, {})] }), (0, jsx_runtime_1.jsx)(RadioOptionLabel, { children: label })] }));
+    return (_jsxs(RadioOptionRoot, { children: [_jsxs(RadioToggle, { children: [_jsx(InputInvisible, __assign({ type: "radio" }, inputProps, props)), _jsx(RadioIndicator, {})] }), _jsx(RadioOptionLabel, { children: label })] }));
 });
-exports.Radio = (0, react_1.forwardRef)(function Radio(_a, ref) {
-    var label = _a.label, options = _a.options, props = tslib_1.__rest(_a, ["label", "options"]);
+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 ((0, jsx_runtime_1.jsxs)(RadioRoot, { children: [label && (0, jsx_runtime_1.jsx)(RadioLabel, { children: label }), options.map(function (option, idx) { return ((0, jsx_runtime_1.jsx)(RadioOption, tslib_1.__assign({}, option, props, { "$ref": ref }), idx)); })] }));
+    return (_jsxs(RadioRoot, { children: [label && _jsx(RadioLabel, { children: label }), options.map(function (option, idx) { return (_jsx(RadioOption, __assign({}, option, props, { "$ref": ref }), idx)); })] }));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Forms/Radio/index.d.ts

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

package/Forms/Radio/index.js

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

package/Forms/Switch/Switch.d.ts

@@ -1,9 +1,5 @@
-/// <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>;
+import { UseToggleProps } from "../Toggle/useToggle.js";
+export declare const SwitchTrack: any;
+export declare const SwitchHandle: any;
 export type SwitchProps = UseToggleProps;
-/**
- * All logic and invisible Inputs come from the `useToggle` hook
- */
 export declare const Switch: import("react").ForwardRefExoticComponent<Omit<UseToggleProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/Forms/Switch/Switch.js

@@ -1,23 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Switch = exports.SwitchHandle = exports.SwitchTrack = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var Checkbox_1 = require("../Checkbox");
-var Toggle_1 = require("../Toggle");
-var useToggle_1 = require("../Toggle/useToggle");
-var styled_1 = require("../../styles/styled");
+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 { stateFocus } from "../../styles/styled.js";
+import { CheckboxLabel, CheckboxRoot } from "../Checkbox/index.js";
+import { toggleBase } from "../Toggle/index.js";
+import { useToggle } from "../Toggle/useToggle.js";
 var SWITCH_GUTTER = 0.25;
 var SWITCH_HANDLE_SIZE = 1;
-exports.SwitchTrack = styled_components_1.default.span(templateObject_1 || (templateObject_1 = tslib_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, Toggle_1.toggleBase, styled_1.stateFocus);
-exports.SwitchHandle = styled_components_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__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, exports.SwitchTrack, SWITCH_HANDLE_SIZE, SWITCH_GUTTER);
-/**
- * All logic and invisible Inputs come from the `useToggle` hook
- */
-exports.Switch = (0, react_1.forwardRef)(function Switch(props, ref) {
-    var _a = (0, useToggle_1.useToggle)(props, ref), rootProps = _a.rootProps, Inputs = _a.Inputs, label = _a.label;
-    return ((0, jsx_runtime_1.jsxs)(Checkbox_1.CheckboxRoot, tslib_1.__assign({}, rootProps, { children: [Inputs, (0, jsx_runtime_1.jsx)(exports.SwitchTrack, { children: (0, jsx_runtime_1.jsx)(exports.SwitchHandle, {}) }), label && (0, jsx_runtime_1.jsx)(Checkbox_1.CheckboxLabel, { children: label })] })));
+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);
+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 })] })));
 });
 var templateObject_1, templateObject_2;

package/Forms/Switch/index.d.ts

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

package/Forms/Switch/index.js

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

package/Forms/Textarea/Textarea.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { FormControl } from "../helpers";
-export declare const TextareaNative: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, {}, never>;
+import { FormControl } from "../helpers.js";
+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.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Textarea = exports.TextareaNative = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var Label_1 = require("../Label/Label");
-var styles_1 = require("../styles");
-exports.TextareaNative = styled_components_1.default.textarea(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n  ", "\n  resize: vertical;\n"], ["\n  ", "\n  ", "\n  resize: vertical;\n"])), styles_1.inputBase, styles_1.inputFocus);
-exports.Textarea = (0, react_1.forwardRef)(function Textarea(_a, ref) {
-    var register = _a.register, name = _a.name, label = _a.label, props = tslib_1.__rest(_a, ["register", "name", "label"]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { children: label }), (0, jsx_runtime_1.jsx)(exports.TextareaNative, tslib_1.__assign({}, (register ? register(name) : { name: name, ref: ref }), props))] }));
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled from "styled-components";
+import { Label } from "../Label/Label.js";
+import { inputBase, inputFocus } from "../styles.js";
+export var 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))] }));
 });
 var templateObject_1;

package/Forms/Textarea/TextareaRich.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { FormControl } from "../helpers";
+import { FormControl } from "../helpers.js";
 export type TextareaRichProps = FormControl<"textarea"> & {
     defaultValue?: string;
 };

package/Forms/Textarea/TextareaRich.js

@@ -1,21 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextareaRich = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-// import TextareaAutosize from "@mui/base/TextareaAutosize";
-var Label_1 = require("../Label/Label");
-var Editor_1 = require("../../Editor");
-var helpers_1 = require("../helpers");
-var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_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"])));
-exports.TextareaRich = (0, react_1.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 = tslib_1.__rest(_a, ["register", "setValue", "name", "label", "defaultValue", "onChange"]);
+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/index.js";
+import { Label } from "../Label/Label.js";
+import { triggerOnChange } from "../helpers.js";
+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 ((0, jsx_runtime_1.jsxs)(Root, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { children: label }), (0, jsx_runtime_1.jsx)(Editor_1.Editor, tslib_1.__assign({ options: {
-                    // element: <TextareaAutosize />,
+    return (_jsxs(Root, { children: [label && _jsx(Label, { children: label }), _jsx(Editor, __assign({ options: {
                     content: defaultValue,
                     onUpdate: (onChange || setValue) && name
                         ? function (_a) {
@@ -23,7 +18,7 @@ exports.TextareaRich = (0, react_1.forwardRef)(function TextareaRich(_a, ref) {
                             var value = editor.getHTML();
                             if (setValue)
                                 setValue(name, value);
-                            (0, helpers_1.triggerOnChange)(onChange, name, value);
+                            triggerOnChange(onChange, name, value);
                         }
                         : undefined,
                 } }, props))] }));

package/Forms/Textarea/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./Textarea";
-export * from "./TextareaRich";
+export * from "./Textarea.js";
+export * from "./TextareaRich.js";

package/Forms/Textarea/index.js

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

package/Forms/Toggle/Toggle-tailwind.js

@@ -1,99 +1 @@
 "use strict";
-// /**
-//  * @file
-//  *
-//  * About accessibility:
-//  * - minimum target size of 44px https://www.w3.org/TR/WCAG21/#target-size
-//  *
-//  * @see tests on tailwind playground:
-//  * - https://play.tailwindcss.com/RVldIcmZa5
-//  */
-//  import { type FormControlState } from "../FormControl";
-//  import { FormControlStatefulElement } from "../FormControlStatefulElement";
-//  export type ToggleProps = React.ComponentProps<"span">;
-//  export const Toggle = ({ className = "", ...props }: ToggleProps) => {
-//    return (
-//      <span
-//        className={`relative my-0 -mx-1 inline-flex h-8 w-8 items-center justify-center p-1 ${className}`}
-//        {...props}
-//      />
-//    );
-//  };
-//  export type ToggleLabelProps = React.ComponentProps<"span">;
-//  export const ToggleLabel = ({ className = "", ...props }: ToggleLabelProps) => {
-//    return (
-//      <span
-//        className={`text-grey-200 ml-3 select-none ${className}`}
-//        {...props}
-//      />
-//    );
-//  };
-//  export type ToggleLabelSubProps = React.ComponentProps<"small">;
-//  export const ToggleLabelSub = ({
-//    className = "",
-//    ...props
-//  }: ToggleLabelSubProps) => {
-//    return (
-//      <span
-//        className={`text-xs opacity-70 ${className}`}
-//        {...props}
-//      />
-//    );
-//  };
-//  export type ToggleIndicatorProps = FormControlState & {
-//    className?: string;
-//  };
-//  export const ToggleIndicator = ({
-//    className,
-//    ...props
-//  }: ToggleIndicatorProps) => {
-//    return (
-//      <FormControlStatefulElement
-//        as="span"
-//        className={`relative flex h-[24px] w-[24px] rounded-md border border-solid ${className}`}
-//        {...props}
-//      />
-//    );
-//  };
-//  export type ToggleIndicatorFgProps = React.ComponentProps<"svg">;
-//  export const ToggleIndicatorFg = ({
-//    className = "",
-//    ...props
-//  }: ToggleIndicatorFgProps) => {
-//    return (
-//      <svg
-//        className={`on-toggle-checked:scale-100 absolute left-0 h-full w-full scale-0 transition-transform ${className}`}
-//        {...props}
-//      />
-//    );
-//  };
-//  export type ToggleIndicatorSquaredProps = ToggleIndicatorProps;
-//  export const ToggleIndicatorSquared = (props: ToggleIndicatorSquaredProps) => {
-//    return (
-//      <ToggleIndicator {...props}>
-//        <ToggleIndicatorFg viewBox="0 0 24 24">
-//          <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
-//        </ToggleIndicatorFg>
-//      </ToggleIndicator>
-//    );
-//  };
-//  export type ToggleIndicatorRoundedProps = ToggleIndicatorProps & {
-//    /** @default 6 */
-//    r?: number;
-//  };
-//  export const ToggleIndicatorRounded = ({
-//    r = 6,
-//    ...props
-//  }: ToggleIndicatorRoundedProps) => {
-//    return (
-//      <ToggleIndicator {...props}>
-//        <ToggleIndicatorFg viewBox="0 0 24 24">
-//          <circle
-//            r={r}
-//            cx="12"
-//            cy="12"
-//          />
-//        </ToggleIndicatorFg>
-//      </ToggleIndicator>
-//    );
-//  };

package/Forms/Toggle/Toggle.d.ts

@@ -2,18 +2,17 @@ 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;
 export type ToggleIndicatorRoundedProps = ToggleIndicatorProps & {
-    /** @default 6 */
     r?: number;
 };
 export declare const ToggleIndicatorRounded: ({ r, }: ToggleIndicatorRoundedProps) => import("react/jsx-runtime").JSX.Element;