react-miui 0.23.7 → 0.25.0

package/.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import type { Preview } from "@storybook/react";
-import { cssReset } from "../src";
+import {cssReset, ToasterProvider} from "../src";
 
 const preview: Preview = {
     parameters: {
@@ -19,7 +19,9 @@ const preview: Preview = {
                     {`.docblock-argstable textarea[id] { box-sizing: content-box; }`}
                     {`#storybook-root { height: 100%; }`}
                 </style>
+                <ToasterProvider>
                 <Story/>
+                </ToasterProvider>
             </>
         ),
     ]

package/CHANGELOG.md

@@ -3,6 +3,30 @@ All notable changes to this project will be documented in this file.
 The format is based on [EZEZ Changelog](https://ezez.dev/guidelines/changelog/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [0.25.0] - 2024-05-03
+### Breaking
+- `Table` variants are now separated boolean props
+### Removed
+- `Table` `raw` variant, use standard `<table>` instead
+### Changed
+- `Checkbox` converted to stitches
+- `Table` converted to stitches
+- `Toaster` converted to stitches
+- `Checkbox` readOnly works as expected now
+- `Checkbox` color prop deprecated
+- `Checkbox` all input props are exposed now
+### Added
+- timeout support for `Toaster`
+- exports of all `stitches` stuff like `css` and `pxToRem`
+
+## [0.24.0] - 2024-04-24
+### Added
+- `Progress` component
+### Changed
+- `Pop` converted to stitches
+### Dev
+- storybook version bump
+
 ## [0.23.7] - 2024-02-29
 ### Changed
 - `Header`, `StickyHeader` and `HeaderIconAction` converted to stitches

package/b.mjs

@@ -0,0 +1,2 @@
+const x = Buffer.from("xd");
+console.log(x.type)

package/dist/components/form/Checkbox.d.ts

@@ -1,12 +1,9 @@
 import React from "react";
-interface Props {
+import { LabelWrapper } from "./Checkbox.styled";
+type WrapperProps = React.ComponentProps<typeof LabelWrapper>;
+type InputProps = React.ComponentProps<"input">;
+interface Props extends Pick<WrapperProps, "css" | "className">, Omit<InputProps, "className"> {
     color?: string;
-    name?: string;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    checked?: boolean;
-    disabled?: boolean;
-    readOnly?: boolean;
-    className?: string;
     children: React.ReactNode;
 }
 declare const Checkbox: React.FC<Props>;

package/dist/components/form/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6B7B,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,OAAO,EAAoB,YAAY,EAAa,MAAM,mBAAmB,CAAC;AAE9E,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAC9D,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAEhD,UAAU,KAAM,SAAQ,IAAI,CAAC,YAAY,EAAE,KAAK,GAAG,WAAW,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC;IAI1F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAKD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiC7B,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/form/Checkbox.js

@@ -1,30 +1,63 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
-const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
 const Checkmark_1 = require("../icons/Checkmark");
-const Checkbox_module_scss_1 = __importDefault(require("./Checkbox.module.scss"));
-const Checkbox = (props) => {
+const Checkbox_styled_1 = require("./Checkbox.styled");
+const Checkbox = (_a) => {
+    var { color, name, onChange, children, css, className } = _a, inputProps = __rest(_a, ["color", "name", "onChange", "children", "css", "className"]);
     const style = {};
-    props.color && (style.color = props.color);
-    const cls = (0, classnames_1.default)(props.className, Checkbox_module_scss_1.default.checkbox, {
-        [Checkbox_module_scss_1.default.disabled]: props.disabled,
-        [Checkbox_module_scss_1.default.readOnly]: props.readOnly,
-    });
-    const checkmarkCls = (0, classnames_1.default)(Checkbox_module_scss_1.default.checkmark, {
-        [Checkbox_module_scss_1.default.checkmarkDisabled]: props.disabled,
-        [Checkbox_module_scss_1.default.checkmarkChecked]: props.checked,
-        [Checkbox_module_scss_1.default.checkmarkReadOnly]: props.readOnly,
-    });
-    return (react_1.default.createElement("label", { className: cls },
-        react_1.default.createElement("input", { type: "checkbox", name: props.name, onChange: props.onChange, checked: props.checked, disabled: props.disabled, readOnly: props.readOnly }),
-        react_1.default.createElement("span", { style: style, className: checkmarkCls },
+    color && (style["--color"] = color);
+    const wrapperProps = { className };
+    if (css) {
+        wrapperProps.css = css;
+    }
+    const handleChange = (0, react_1.useCallback)((e) => {
+        if (inputProps.readOnly) {
+            e.currentTarget.checked = !e.currentTarget.checked;
+            return;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    }, [inputProps.readOnly, onChange]);
+    return (react_1.default.createElement(Checkbox_styled_1.LabelWrapper, Object.assign({}, wrapperProps),
+        react_1.default.createElement("input", Object.assign({ type: "checkbox", name: name, onChange: handleChange }, inputProps)),
+        react_1.default.createElement(Checkbox_styled_1.CheckmarkWrapper, { css: style },
             react_1.default.createElement(Checkmark_1.Checkmark, null)),
-        react_1.default.createElement("span", { className: Checkbox_module_scss_1.default.label }, props.children)));
+        react_1.default.createElement(Checkbox_styled_1.TextLabel, null, children)));
 };
 exports.Checkbox = Checkbox;
 //# sourceMappingURL=Checkbox.js.map

package/dist/components/form/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/form/Checkbox.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,4DAAoC;AAEpC,kDAA+C;AAE/C,kFAA4C;AAa5C,MAAM,QAAQ,GAAoB,CAAC,KAAK,EAAE,EAAE;IACxC,MAAM,KAAK,GAAwB,EAAE,CAAC;IACtC,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;IAE3C,MAAM,GAAG,GAAG,IAAA,oBAAU,EAAC,KAAK,CAAC,SAAS,EAAE,8BAAM,CAAC,QAAQ,EAAE;QACrD,CAAC,8BAAM,CAAC,QAAkB,CAAC,EAAE,KAAK,CAAC,QAAQ;QAC3C,CAAC,8BAAM,CAAC,QAAkB,CAAC,EAAE,KAAK,CAAC,QAAQ;KAC9C,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,IAAA,oBAAU,EAAC,8BAAM,CAAC,SAAS,EAAE;QAC9C,CAAC,8BAAM,CAAC,iBAA2B,CAAC,EAAE,KAAK,CAAC,QAAQ;QACpD,CAAC,8BAAM,CAAC,gBAA0B,CAAC,EAAE,KAAK,CAAC,OAAO;QAClD,CAAC,8BAAM,CAAC,iBAA2B,CAAC,EAAE,KAAK,CAAC,QAAQ;KACvD,CAAC,CAAC;IAEH,OAAO,CACH,yCAAO,SAAS,EAAE,GAAG;QACjB,yCACI,IAAI,EAAE,UAAU,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B;QACF,wCAAM,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,YAAY;YAAE,8BAAC,qBAAS,OAAG,CAAO;QACjE,wCAAM,SAAS,EAAE,8BAAM,CAAC,KAAK,IAAG,KAAK,CAAC,QAAQ,CAAQ,CAClD,CACX,CAAC;AACN,CAAC,CAAC;AAEO,4BAAQ"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/form/Checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAI3C,kDAA+C;AAE/C,uDAA8E;AAgB9E,MAAM,QAAQ,GAAoB,CAAC,EAGlC,EAAE,EAAE;QAH8B,EAE/B,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,OAClD,EADuD,UAAU,cAF/B,6DAGlC,CADiE;IAE9D,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,KAAK,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,CAAC;IAEpC,MAAM,YAAY,GAAoE,EAAE,SAAS,EAAE,CAAC;IACpG,IAAI,GAAG,EAAE,CAAC;QACN,YAAY,CAAC,GAAG,GAAG,GAAG,CAAC;IAC3B,CAAC;IAED,MAAM,YAAY,GAA+C,IAAA,mBAAW,EAAC,CAAC,CAAC,EAAE,EAAE;QAC/E,IAAI,UAAU,CAAC,QAAQ,EAAE,CAAC;YAEtB,CAAC,CAAC,aAAa,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC;YACnD,OAAO;QACX,CAAC;QACD,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpC,OAAO,CACH,8BAAC,8BAAY,oBAAK,YAAY;QAC1B,uDACI,IAAI,EAAE,UAAU,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,YAAY,IAClB,UAAU,EAChB;QACF,8BAAC,kCAAgB,IAAC,GAAG,EAAE,KAAK;YAAE,8BAAC,qBAAS,OAAG,CAAmB;QAC9D,8BAAC,2BAAS,QAAE,QAAQ,CAAa,CACtB,CAClB,CAAC;AACN,CAAC,CAAC;AAEO,4BAAQ"}

package/dist/components/form/Checkbox.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryObj, Meta } from "@storybook/react";
+import { Checkbox } from "./Checkbox";
+declare const meta: Meta;
+type Story = StoryObj<typeof Checkbox>;
+declare const Primary: Story;
+declare const AllAtOnce: Story;
+export { Primary, AllAtOnce, };
+export default meta;
+//# sourceMappingURL=Checkbox.stories.d.ts.map

package/dist/components/form/Checkbox.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/form/Checkbox.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IAqCX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,QAAA,MAAM,OAAO,EAAE,KAAU,CAAC;AAM1B,QAAA,MAAM,SAAS,EAAE,KAyBhB,CAAC;AAEF,OAAO,EACH,OAAO,EACP,SAAS,GACZ,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/form/Checkbox.stories.js

@@ -0,0 +1,102 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AllAtOnce = exports.Primary = void 0;
+const react_1 = __importStar(require("react"));
+const utils_1 = require("@ezez/utils");
+const native_1 = require("../native");
+const theme_1 = require("../../theme");
+const Checkbox_1 = require("./Checkbox");
+const meta = {
+    title: "Components/Form/Checkbox",
+    component: Checkbox_1.Checkbox,
+    tags: ["autodocs", "form"],
+    argTypes: {
+        color: {
+            control: {
+                type: "color",
+            },
+        },
+        defaultChecked: {
+            control: {
+                type: "boolean",
+            },
+        },
+        checked: {
+            control: {
+                type: "boolean",
+            },
+        },
+        disabled: {
+            control: {
+                type: "boolean",
+            },
+        },
+        readOnly: {
+            control: {
+                type: "boolean",
+            },
+        },
+        onChange: {
+            action: "onChange",
+        },
+    },
+    args: {
+        children: "Check me",
+    },
+};
+const Primary = {};
+exports.Primary = Primary;
+const Green = (0, theme_1.styled)(Checkbox_1.Checkbox, {
+    "--color": "$colors$green1",
+});
+const AllAtOnce = {
+    render: (args) => {
+        const [v, setV] = (0, react_1.useState)(false);
+        const handleToggle = (0, react_1.useCallback)(() => { setV((prevV) => !prevV); }, []);
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(native_1.Div, null, "Red (deprecated prop):"),
+            react_1.default.createElement(Checkbox_1.Checkbox, Object.assign({}, args, { color: "red" })),
+            react_1.default.createElement(native_1.Div, null, "Blue (css):"),
+            react_1.default.createElement(Checkbox_1.Checkbox, Object.assign({}, args, { css: { "--color": "$blue5" } })),
+            react_1.default.createElement(native_1.Div, null, "Green (composed):"),
+            react_1.default.createElement(Green, Object.assign({}, (0, utils_1.omit)(args, ["ref"]))),
+            react_1.default.createElement(native_1.Div, null,
+                "Always controlled: (checked: ",
+                String(v),
+                ")"),
+            react_1.default.createElement(Checkbox_1.Checkbox, Object.assign({}, args, { checked: v, onChange: handleToggle })),
+            react_1.default.createElement(native_1.Div, null, "Always disabled:"),
+            react_1.default.createElement(Checkbox_1.Checkbox, Object.assign({}, args, { disabled: true })),
+            react_1.default.createElement(native_1.Div, null, "Always read-only:"),
+            react_1.default.createElement(Checkbox_1.Checkbox, Object.assign({}, args, { readOnly: true }))));
+    },
+    args: {
+        defaultChecked: true,
+    },
+};
+exports.AllAtOnce = AllAtOnce;
+exports.default = meta;
+//# sourceMappingURL=Checkbox.stories.js.map

package/dist/components/form/Checkbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/form/Checkbox.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AAErD,uCAAmC;AAInC,sCAAgC;AAChC,uCAAqC;AAErC,yCAAsC;AAEtC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,mBAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE;QACN,KAAK,EAAE;YACH,OAAO,EAAE;gBACL,IAAI,EAAE,OAAO;aAChB;SACJ;QACD,cAAc,EAAE;YACZ,OAAO,EAAE;gBACL,IAAI,EAAE,SAAS;aAClB;SACJ;QACD,OAAO,EAAE;YACL,OAAO,EAAE;gBACL,IAAI,EAAE,SAAS;aAClB;SACJ;QACD,QAAQ,EAAE;YACN,OAAO,EAAE;gBACL,IAAI,EAAE,SAAS;aAClB;SACJ;QACD,QAAQ,EAAE;YACN,OAAO,EAAE;gBACL,IAAI,EAAE,SAAS;aAClB;SACJ;QACD,QAAQ,EAAE;YACN,MAAM,EAAE,UAAU;SACrB;KACJ;IACD,IAAI,EAAE;QACF,QAAQ,EAAE,UAAU;KACvB;CACJ,CAAC;AAIF,MAAM,OAAO,GAAU,EAAE,CAAC;AAkCtB,0BAAO;AAhCX,MAAM,KAAK,GAAG,IAAA,cAAM,EAAC,mBAAQ,EAAE;IAC3B,SAAS,EAAE,gBAAgB;CAC9B,CAAC,CAAC;AAEH,MAAM,SAAS,GAAU;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;QAClC,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;QAEzE,OAAO,CACH;YACI,8BAAC,YAAG,iCAA6B;YACjC,8BAAC,mBAAQ,oBAAK,IAAI,IAAE,KAAK,EAAE,KAAK,IAAI;YACpC,8BAAC,YAAG,sBAAkB;YACtB,8BAAC,mBAAQ,oBAAK,IAAI,IAAE,GAAG,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI;YACpD,8BAAC,YAAG,4BAAwB;YAC5B,8BAAC,KAAK,oBAAK,IAAA,YAAI,EAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,EAAI;YAClC,8BAAC,YAAG;;gBAA+B,MAAM,CAAC,CAAC,CAAC;oBAAQ;YACpD,8BAAC,mBAAQ,oBAAK,IAAI,IAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,YAAY,IAAI;YAC1D,8BAAC,YAAG,2BAAuB;YAC3B,8BAAC,mBAAQ,oBAAK,IAAI,IAAE,QAAQ,EAAE,IAAI,IAAI;YACtC,8BAAC,YAAG,4BAAwB;YAC5B,8BAAC,mBAAQ,oBAAK,IAAI,IAAE,QAAQ,EAAE,IAAI,IAAI,CACvC,CACN,CAAC;IACN,CAAC;IACD,IAAI,EAAE;QACF,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC;AAIE,8BAAS;AAGb,kBAAe,IAAI,CAAC"}

package/dist/components/form/Checkbox.styled.d.ts

@@ -0,0 +1,248 @@
+declare const TextLabel: import("@stitches/react/types/styled-component").StyledComponent<"span", {}, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    colors: {
+        background: string;
+        mainColor: string;
+        mainColorAlt: string;
+        activeBg: string;
+        inactiveBg: string;
+        inactiveDarkBg: string;
+        toggleHandleBg: string;
+        toggleHandleBorder: string;
+        toggleBgDisabled: string;
+        toggleHandleBorderDisabled: string;
+        toggleHandleBgDisabled: string;
+        icon: string;
+        border: string;
+        buttonBorder: string;
+        headerBorder: string;
+        headerBg: string;
+        headerText: string;
+        text: string;
+        sub: string;
+        popText: string;
+        toolbarBorder: string;
+        toolbarBg: string;
+        modalBg: string;
+        modalButtonBg: string;
+        modalButtonBorder: string;
+        inputDisabledBg: string;
+        inputDisabledText: string;
+        choiceBg: string;
+        choiceText: string;
+        choiceActiveBg: string;
+        choiceActiveText: string;
+        choiceBorder: string;
+        selectorText: string;
+        selectorActive: string;
+        blue1: string;
+        blue2: string;
+        blue3: string;
+        blue4: string;
+        blue5: string;
+        orange1: string;
+        orange1Darker: string;
+        purple1: string;
+        green1: string;
+        green1Darker: string;
+        pink1: string;
+        red1: string;
+        yellow1: string;
+        yellow2: string;
+        yellow3: string;
+        pinky1: string;
+        pinky2: string;
+        pinky3: string;
+        grey1: string;
+        focusColor: string;
+        scrollbarsThumb: string;
+        scrollbarsBg: string;
+        tableStripedBg: string;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    mx: (value: string | number) => {
+        marginLeft: string | number;
+        marginRight: string | number;
+    };
+    my: (value: string | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
+    };
+    px: (value: string | number) => {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    py: (value: string | number) => {
+        paddingTop: string | number;
+        paddingBottom: string | number;
+    };
+    size: (value: string | number) => {
+        width: string | number;
+        height: string | number;
+    };
+}>>;
+declare const CheckmarkWrapper: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    colors: {
+        background: string;
+        mainColor: string;
+        mainColorAlt: string;
+        activeBg: string;
+        inactiveBg: string;
+        inactiveDarkBg: string;
+        toggleHandleBg: string;
+        toggleHandleBorder: string;
+        toggleBgDisabled: string;
+        toggleHandleBorderDisabled: string;
+        toggleHandleBgDisabled: string;
+        icon: string;
+        border: string;
+        buttonBorder: string;
+        headerBorder: string;
+        headerBg: string;
+        headerText: string;
+        text: string;
+        sub: string;
+        popText: string;
+        toolbarBorder: string;
+        toolbarBg: string;
+        modalBg: string;
+        modalButtonBg: string;
+        modalButtonBorder: string;
+        inputDisabledBg: string;
+        inputDisabledText: string;
+        choiceBg: string;
+        choiceText: string;
+        choiceActiveBg: string;
+        choiceActiveText: string;
+        choiceBorder: string;
+        selectorText: string;
+        selectorActive: string;
+        blue1: string;
+        blue2: string;
+        blue3: string;
+        blue4: string;
+        blue5: string;
+        orange1: string;
+        orange1Darker: string;
+        purple1: string;
+        green1: string;
+        green1Darker: string;
+        pink1: string;
+        red1: string;
+        yellow1: string;
+        yellow2: string;
+        yellow3: string;
+        pinky1: string;
+        pinky2: string;
+        pinky3: string;
+        grey1: string;
+        focusColor: string;
+        scrollbarsThumb: string;
+        scrollbarsBg: string;
+        tableStripedBg: string;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    mx: (value: string | number) => {
+        marginLeft: string | number;
+        marginRight: string | number;
+    };
+    my: (value: string | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
+    };
+    px: (value: string | number) => {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    py: (value: string | number) => {
+        paddingTop: string | number;
+        paddingBottom: string | number;
+    };
+    size: (value: string | number) => {
+        width: string | number;
+        height: string | number;
+    };
+}>>;
+declare const LabelWrapper: import("@stitches/react/types/styled-component").StyledComponent<"label", {}, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    colors: {
+        background: string;
+        mainColor: string;
+        mainColorAlt: string;
+        activeBg: string;
+        inactiveBg: string;
+        inactiveDarkBg: string;
+        toggleHandleBg: string;
+        toggleHandleBorder: string;
+        toggleBgDisabled: string;
+        toggleHandleBorderDisabled: string;
+        toggleHandleBgDisabled: string;
+        icon: string;
+        border: string;
+        buttonBorder: string;
+        headerBorder: string;
+        headerBg: string;
+        headerText: string;
+        text: string;
+        sub: string;
+        popText: string;
+        toolbarBorder: string;
+        toolbarBg: string;
+        modalBg: string;
+        modalButtonBg: string;
+        modalButtonBorder: string;
+        inputDisabledBg: string;
+        inputDisabledText: string;
+        choiceBg: string;
+        choiceText: string;
+        choiceActiveBg: string;
+        choiceActiveText: string;
+        choiceBorder: string;
+        selectorText: string;
+        selectorActive: string;
+        blue1: string;
+        blue2: string;
+        blue3: string;
+        blue4: string;
+        blue5: string;
+        orange1: string;
+        orange1Darker: string;
+        purple1: string;
+        green1: string;
+        green1Darker: string;
+        pink1: string;
+        red1: string;
+        yellow1: string;
+        yellow2: string;
+        yellow3: string;
+        pinky1: string;
+        pinky2: string;
+        pinky3: string;
+        grey1: string;
+        focusColor: string;
+        scrollbarsThumb: string;
+        scrollbarsBg: string;
+        tableStripedBg: string;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    mx: (value: string | number) => {
+        marginLeft: string | number;
+        marginRight: string | number;
+    };
+    my: (value: string | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
+    };
+    px: (value: string | number) => {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    py: (value: string | number) => {
+        paddingTop: string | number;
+        paddingBottom: string | number;
+    };
+    size: (value: string | number) => {
+        width: string | number;
+        height: string | number;
+    };
+}>>;
+export { LabelWrapper, CheckmarkWrapper, TextLabel, };
+//# sourceMappingURL=Checkbox.styled.d.ts.map

package/dist/components/form/Checkbox.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.styled.d.ts","sourceRoot":"","sources":["../../../src/components/form/Checkbox.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAiB,CAAC;AAEjC,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDpB,CAAC;AAEH,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkBhB,CAAC;AAEH,OAAO,EACH,YAAY,EACZ,gBAAgB,EAChB,SAAS,GACZ,CAAC"}

package/dist/components/form/Checkbox.styled.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextLabel = exports.CheckmarkWrapper = exports.LabelWrapper = void 0;
+const theme_1 = require("../../theme");
+const TextLabel = (0, theme_1.styled)("span");
+exports.TextLabel = TextLabel;
+const CheckmarkWrapper = (0, theme_1.styled)("div", {
+    "borderRadius": "100px",
+    "background": "none",
+    "border": "1px solid $inactiveBg",
+    "width": "18px",
+    "height": "18px",
+    "display": "inline-flex",
+    "justifyContent": "center",
+    "alignItems": "center",
+    "verticalAlign": "middle",
+    "boxSizing": "border-box",
+    "& svg": {
+        display: "none",
+        width: "9px",
+        height: "9px",
+        fill: "white",
+    },
+    [`+ ${TextLabel.toString()}`]: {
+        verticalAlign: "middle",
+    },
+    ":checked + &": {
+        "borderWidth": 0,
+        "color": "var(--color)",
+        "background": "currentColor",
+        "& svg": {
+            display: "inline-block",
+        },
+    },
+    ":checked:disabled": {
+        background: "$inactiveDarkBg",
+    },
+    ":disabled + &": {
+        background: "$activeBg",
+        [`+ ${TextLabel.toString()}`]: {
+            color: "$inputDisabledText",
+        },
+    },
+    ":readonly + &": {
+        [`+ ${TextLabel.toString()}`]: {
+            color: "$inputDisabledText",
+        },
+    },
+});
+exports.CheckmarkWrapper = CheckmarkWrapper;
+const LabelWrapper = (0, theme_1.styled)("label", {
+    "--color": "$colors$mainColor",
+    "& input": {
+        "width": 0,
+        "height": 0,
+        "transform": "scale(0)",
+        "margin": 0,
+        "verticalAlign": "middle",
+        "&:focus-visible": {
+            [`+ ${CheckmarkWrapper.toString()}`]: {
+                boxShadow: "0 0 5px black",
+            },
+        },
+        [`+ ${CheckmarkWrapper.toString()} + ${TextLabel.toString()}:not(:empty)`]: {
+            marginLeft: "0.75em",
+        },
+    },
+});
+exports.LabelWrapper = LabelWrapper;
+//# sourceMappingURL=Checkbox.styled.js.map

package/dist/components/form/Checkbox.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.styled.js","sourceRoot":"","sources":["../../../src/components/form/Checkbox.styled.ts"],"names":[],"mappings":";;;AAAA,uCAAqC;AAErC,MAAM,SAAS,GAAG,IAAA,cAAM,EAAC,MAAM,CAAC,CAAC;AA2E7B,8BAAS;AAzEb,MAAM,gBAAgB,GAAG,IAAA,cAAM,EAAC,KAAK,EAAE;IACnC,cAAc,EAAE,OAAO;IACvB,YAAY,EAAE,MAAM;IACpB,QAAQ,EAAE,uBAAuB;IACjC,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,aAAa;IACxB,gBAAgB,EAAE,QAAQ;IAC1B,YAAY,EAAE,QAAQ;IACtB,eAAe,EAAE,QAAQ;IACzB,WAAW,EAAE,YAAY;IAEzB,OAAO,EAAE;QACL,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,IAAI,EAAE,OAAO;KAChB;IAED,CAAC,KAAK,SAAS,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE;QAC3B,aAAa,EAAE,QAAQ;KAC1B;IAED,cAAc,EAAE;QACZ,aAAa,EAAE,CAAC;QAChB,OAAO,EAAE,cAAc;QACvB,YAAY,EAAE,cAAc;QAC5B,OAAO,EAAE;YACL,OAAO,EAAE,cAAc;SAC1B;KACJ;IAED,mBAAmB,EAAE;QACjB,UAAU,EAAE,iBAAiB;KAChC;IAED,eAAe,EAAE;QACb,UAAU,EAAE,WAAW;QACvB,CAAC,KAAK,SAAS,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE;YAC3B,KAAK,EAAE,oBAAoB;SAC9B;KACJ;IAED,eAAe,EAAE;QACb,CAAC,KAAK,SAAS,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE;YAC3B,KAAK,EAAE,oBAAoB;SAC9B;KACJ;CACJ,CAAC,CAAC;AAwBC,4CAAgB;AAtBpB,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,OAAO,EAAE;IACjC,SAAS,EAAE,mBAAmB;IAE9B,SAAS,EAAE;QACP,OAAO,EAAE,CAAC;QACV,QAAQ,EAAE,CAAC;QACX,WAAW,EAAE,UAAU;QACvB,QAAQ,EAAE,CAAC;QACX,eAAe,EAAE,QAAQ;QACzB,iBAAiB,EAAE;YACf,CAAC,KAAK,gBAAgB,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE;gBAClC,SAAS,EAAE,eAAe;aAC7B;SACJ;QACD,CAAC,KAAK,gBAAgB,CAAC,QAAQ,EAAE,MAAM,SAAS,CAAC,QAAQ,EAAE,cAAc,CAAC,EAAE;YACxE,UAAU,EAAE,QAAQ;SACvB;KACJ;CACJ,CAAC,CAAC;AAGC,oCAAY"}

package/dist/components/form/Select.styled.d.ts

@@ -37,6 +37,8 @@ declare const Select: import("@stitches/react/types/styled-component").StyledCom
         blue1: string;
         blue2: string;
         blue3: string;
+        blue4: string;
+        blue5: string;
         orange1: string;
         orange1Darker: string;
         purple1: string;

package/dist/components/form/Select.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styled.d.ts","sourceRoot":"","sources":["../../../src/components/form/Select.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkBV,CAAC;AAEH,OAAO,EACH,MAAM,GACT,CAAC"}
+{"version":3,"file":"Select.styled.d.ts","sourceRoot":"","sources":["../../../src/components/form/Select.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkBV,CAAC;AAEH,OAAO,EACH,MAAM,GACT,CAAC"}