react-miui 0.28.3 → 0.30.0

package/.storybook/main.ts

@@ -1,17 +1,17 @@
-import type { StorybookConfig } from "@storybook/nextjs";
+import type { StorybookConfig } from '@storybook/react-vite';
+
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
   ],
-  framework: {
-    name: "@storybook/nextjs",
-    options: {},
-  },
-  docs: {
-    autodocs: "tag",
-  },
+  "addons": [
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding"
+  ],
+  "framework": {
+    "name": "@storybook/react-vite",
+    "options": {}
+  }
 };
-export default config;
+export default config;

package/.storybook/preview.tsx

@@ -1,9 +1,9 @@
+import React from "react";
 import type { Preview } from "@storybook/react";
-import {cssReset, ToasterProvider} from "../src";
+import {cssReset, injectGlobalStyles, ToasterProvider} from "../src";
 
 const preview: Preview = {
     parameters: {
-        actions: {argTypesRegex: "^on[A-Z].*"},
         controls: {
             matchers: {
                 color: /(background|color)$/i,
@@ -12,18 +12,21 @@ const preview: Preview = {
         },
     },
     decorators: [
-        (Story) => (
-            <>
-                <style id={"miui-css-reset"} dangerouslySetInnerHTML={{__html: cssReset}}/>
-                <style>
-                    {`.docblock-argstable textarea[id] { box-sizing: content-box; }`}
-                    {`#storybook-root { height: 100%; }`}
-                </style>
-                <ToasterProvider>
-                <Story/>
-                </ToasterProvider>
-            </>
-        ),
+        (Story) =>{
+            injectGlobalStyles();
+            return (
+                <>
+                    <style id={"miui-css-reset"} dangerouslySetInnerHTML={{__html: cssReset}}/>
+                    <style>
+                        {`.docblock-argstable textarea[id] { box-sizing: content-box; }`}
+                        {`#storybook-root { height: 100%; }`}
+                    </style>
+                    <ToasterProvider>
+                        <Story/>
+                    </ToasterProvider>
+                </>
+            );
+        },
     ]
 
 };

package/CHANGELOG.md

@@ -3,6 +3,33 @@ 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.30.0] - 2025-12-06;
+### Breaking
+- loader spinner is no longer rendered as svg, but a div with background image (same looks)
+- loader spinner no longer accepts className
+- `CoveringLoader` rewritten with different logic, please refer to Storybook documentation
+
+## [0.29.0] - 2025-10-05
+### Added
+- `Gap` util component
+### Breaking
+- all scss styles AND SETUP replaced with stitches
+### Changed
+- `Choice`, `TextArea`, `Checkbox`, `ColorPicker`, `Label`, `Select`, `Toggle`, `DirectionPad`, `KeyValue`, `Card`,
+  `Drawer`, `Stats`, `Selector`, `SearchContainer` and `Progress` now forward refs, can be composed upon, has own
+  selector as `toString()` and exports sub-components selectors
+- `EqualActions`, `DirectionPad`, `KeyValue`, `Card`, `Drawer`, `Stats`, `Selector` and `SearchContainer` converted to stitches
+- ensure unique class name for generic Div component
+- deprecated `.selectors` property on some components in favor of new `ComponentSubSelector` exports
+### Dev
+- upgraded storybook
+- `EqualActions`, `DirectionPad`, `KeyValue`, `Card`, `Drawer`, `Icons`, `Stats`, and `Selector` demo converted to storybook
+- removed some old or unused demos
+- deps bump
+### Fixed
+- `Battery`, `Checkmark`, `Config`, `Dots`, `Heart`, `Trash` icons did not follow current color
+- exported `Header` selectors should be strings, not functions
+
 ## [0.28.3] - 2025-09-15
 ### Fixed
 - `Header` now has `toString()` on it, so it allows to target it with stitches

package/README.md

@@ -3,8 +3,8 @@ WIP.
 Old MIUI inspired design components for React. Breaking changes may happen until `1.0.0`.
 
 Usage:
-- Import `global.scss`
 - Import `cssReset` named export and include it in `<style>` tag
+- Import `injectGlobalStyles` function, call it from your root component
 - Import `getCssText` named export, call it and include result in `<style>` tag
 - Import any needed component from named exports
 

package/assets/tailspin.svg

@@ -0,0 +1,32 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
+            <stop stop-color="#fff" stop-opacity="0" offset="0%"/>
+            <stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>
+            <stop stop-color="#fff" offset="100%"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)">
+            <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="0.9s"
+                    repeatCount="indefinite" />
+            </path>
+            <circle fill="#fff" cx="36" cy="18" r="1">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="0.9s"
+                    repeatCount="indefinite" />
+            </circle>
+        </g>
+    </g>
+</svg>

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

@@ -1,12 +1,15 @@
 import React from "react";
 import { LabelWrapper } from "./Checkbox.styled";
-type WrapperProps = React.ComponentProps<typeof LabelWrapper>;
+type LabelWrapperProps = React.ComponentProps<typeof LabelWrapper>;
 type InputProps = React.ComponentProps<"input">;
-interface Props extends Partial<Pick<WrapperProps, "css" | "className">>, Omit<InputProps, "className"> {
+type CheckboxProps = Partial<Pick<LabelWrapperProps, "css" | "className">> & Omit<InputProps, "className"> & {
     color?: string;
     children: React.ReactNode;
     error?: boolean;
-}
-declare const Checkbox: React.FC<Props>;
-export { Checkbox };
+};
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const CheckboxCheckmarkWrapperSelector: string;
+declare const CheckboxTextLabelSelector: string;
+export { Checkbox, CheckboxCheckmarkWrapperSelector, CheckboxTextLabelSelector };
+export type { CheckboxProps };
 //# sourceMappingURL=Checkbox.d.ts.map

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,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,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,KAAK,GAAG,WAAW,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC;IAInG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAKD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkC7B,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAMvD,OAAO,EAAoB,YAAY,EAAa,MAAM,mBAAmB,CAAC;AAE9E,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AACnE,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAEhD,KAAK,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,KAAK,GAAG,WAAW,CAAC,CAAC,GACpE,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG;IAI9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAKN,QAAA,MAAM,QAAQ,qGAmCZ,CAAC;AAKH,QAAA,MAAM,gCAAgC,QAA8B,CAAC;AACrE,QAAA,MAAM,yBAAyB,QAAuB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,gCAAgC,EAAE,yBAAyB,EAAE,CAAC;AACjF,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/form/Checkbox.js

@@ -44,11 +44,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = void 0;
+exports.CheckboxTextLabelSelector = exports.CheckboxCheckmarkWrapperSelector = exports.Checkbox = void 0;
 const react_1 = __importStar(require("react"));
 const Checkmark_1 = require("../icons/Checkmark");
 const Checkbox_styled_1 = require("./Checkbox.styled");
-const Checkbox = (_a) => {
+const Checkbox = (0, react_1.forwardRef)((_a, ref) => {
     var { color, error, name, onChange, children, css, className } = _a, inputProps = __rest(_a, ["color", "error", "name", "onChange", "children", "css", "className"]);
     const style = {};
     color && (style["--color"] = color);
@@ -64,10 +64,16 @@ const Checkbox = (_a) => {
         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, "data-error": error }, inputProps)),
+        react_1.default.createElement("input", Object.assign({ type: "checkbox", name: name, onChange: handleChange, "data-error": error, ref: ref }, inputProps)),
         react_1.default.createElement(Checkbox_styled_1.CheckmarkWrapper, { css: style },
             react_1.default.createElement(Checkmark_1.Checkmark, null)),
         react_1.default.createElement(Checkbox_styled_1.TextLabel, null, children)));
-};
+});
 exports.Checkbox = Checkbox;
+Checkbox.displayName = "Checkbox";
+Checkbox.toString = () => Checkbox_styled_1.LabelWrapper.toString();
+const CheckboxCheckmarkWrapperSelector = Checkbox_styled_1.CheckmarkWrapper.toString();
+exports.CheckboxCheckmarkWrapperSelector = CheckboxCheckmarkWrapperSelector;
+const CheckboxTextLabelSelector = Checkbox_styled_1.TextLabel.toString();
+exports.CheckboxTextLabelSelector = CheckboxTextLabelSelector;
 //# 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,+CAA2C;AAI3C,kDAA+C;AAE/C,uDAA8E;AAiB9E,MAAM,QAAQ,GAAoB,CAAC,EAGlC,EAAE,EAAE;QAH8B,EAE/B,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,OACzD,EAD8D,UAAU,cAFtC,sEAGlC,CADwE;IAErE,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,gBACV,KAAK,IACb,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"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/form/Checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuD;AAIvD,kDAA+C;AAE/C,uDAA8E;AAkB9E,MAAM,QAAQ,GAAG,IAAA,kBAAU,EAAkC,CAAC,EAG7D,EAAE,GAAG,EAAE,EAAE;QAHoD,EAE1D,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,OACzD,EAD8D,UAAU,cAFX,sEAG7D,CADwE;IAErE,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,gBACV,KAAK,EACjB,GAAG,EAAE,GAAG,IACJ,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,CAAC;AAQM,4BAAQ;AANjB,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAClC,QAAQ,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,8BAAY,CAAC,QAAQ,EAAE,CAAC;AAElD,MAAM,gCAAgC,GAAG,kCAAgB,CAAC,QAAQ,EAAE,CAAC;AAGlD,4EAAgC;AAFnD,MAAM,yBAAyB,GAAG,2BAAS,CAAC,QAAQ,EAAE,CAAC;AAEF,8DAAyB"}

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

@@ -19,7 +19,7 @@ const CheckmarkWrapper = (0, theme_1.styled)("div", {
         display: "none",
         width: "9px",
         height: "9px",
-        fill: "white",
+        color: "white",
     },
     [`+ ${TextLabel.toString()}`]: {
         verticalAlign: "middle",

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

@@ -1 +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;AAkF7B,8BAAS;AAhFb,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,gBAAgB,EAAE;QACd,CAAC,KAAK,SAAS,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE;YAC3B,KAAK,EAAE,oBAAoB;SAC9B;KACJ;IAED,uBAAuB,EAAE;QACrB,WAAW,EAAE,SAAS;QACtB,CAAC,KAAK,SAAS,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE;YAC3B,KAAK,EAAE,OAAO;SACjB;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"}
+{"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;AAkF7B,8BAAS;AAhFb,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,KAAK,EAAE,OAAO;KACjB;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,gBAAgB,EAAE;QACd,CAAC,KAAK,SAAS,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE;YAC3B,KAAK,EAAE,oBAAoB;SAC9B;KACJ;IAED,uBAAuB,EAAE;QACrB,WAAW,EAAE,SAAS;QACtB,CAAC,KAAK,SAAS,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE;YAC3B,KAAK,EAAE,OAAO;SACjB;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/ColorPicker.d.ts

@@ -3,12 +3,14 @@ import { ColorDisplay, LabelWrapper } from "./ColorPicker.styled";
 type WrapperProps = React.ComponentProps<typeof LabelWrapper>;
 type ColorDisplayProps = React.ComponentProps<typeof ColorDisplay>;
 type InputProps = React.ComponentProps<"input">;
-type Props = Partial<Pick<WrapperProps, "css" | "className">> & Omit<InputProps, "className" | "type" | "value"> & Pick<ColorDisplayProps, "variant"> & {
+type ColorPickerProps = Partial<Pick<WrapperProps, "css" | "className">> & Omit<InputProps, "className" | "type" | "value"> & Pick<ColorDisplayProps, "variant"> & {
     children?: never;
     error?: boolean;
     label?: string;
     value?: string;
 };
-declare const ColorPicker: React.FC<Props>;
-export { ColorPicker };
+declare const ColorPicker: React.ForwardRefExoticComponent<Omit<ColorPickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const ColorPickerColorDisplaySelector: string;
+export { ColorPicker, ColorPickerColorDisplaySelector };
+export type { ColorPickerProps };
 //# sourceMappingURL=ColorPicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/form/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAElE,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAC9D,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AACnE,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAEhD,KAAK,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,KAAK,GAAG,WAAW,CAAC,CAAC,GAC3D,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC,GAChD,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,GAClC;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAKF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2ChC,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/form/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAMvD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAElE,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAC9D,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AACnE,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAEhD,KAAK,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,KAAK,GAAG,WAAW,CAAC,CAAC,GAClE,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC,GAChD,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,GAClC;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAKN,QAAA,MAAM,WAAW,wGA4Cf,CAAC;AAKH,QAAA,MAAM,+BAA+B,QAA0B,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,+BAA+B,EAAE,CAAC;AACxD,YAAY,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/form/ColorPicker.js

@@ -44,11 +44,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPicker = void 0;
+exports.ColorPickerColorDisplaySelector = exports.ColorPicker = void 0;
 const react_1 = __importStar(require("react"));
 const colors_1 = require("../utils/colors");
 const ColorPicker_styled_1 = require("./ColorPicker.styled");
-const ColorPicker = (_a) => {
+const ColorPicker = (0, react_1.forwardRef)((_a, ref) => {
     var { error, css, className, variant, label, value = "transparent", children, onChange } = _a, inputProps = __rest(_a, ["error", "css", "className", "variant", "label", "value", "children", "onChange"]);
     const style = Object.assign({ "--selected-color": value }, (value.startsWith("#") ? { color: (0, colors_1.contrastColor)(value) } : {}));
     const wrapperProps = { className };
@@ -62,8 +62,12 @@ const ColorPicker = (_a) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
     }, [inputProps.readOnly, onChange]);
     return (react_1.default.createElement(ColorPicker_styled_1.LabelWrapper, Object.assign({}, wrapperProps, { "data-error": error }),
-        react_1.default.createElement("input", Object.assign({ type: "color", value: value, onChange: handleChange }, inputProps)),
+        react_1.default.createElement("input", Object.assign({ type: "color", value: value, onChange: handleChange, ref: ref }, inputProps)),
         react_1.default.createElement(ColorPicker_styled_1.ColorDisplay, { css: style, variant: variant }, label)));
-};
+});
 exports.ColorPicker = ColorPicker;
+ColorPicker.displayName = "ColorPicker";
+ColorPicker.toString = () => ColorPicker_styled_1.LabelWrapper.toString();
+const ColorPickerColorDisplaySelector = ColorPicker_styled_1.ColorDisplay.toString();
+exports.ColorPickerColorDisplaySelector = ColorPickerColorDisplaySelector;
 //# sourceMappingURL=ColorPicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/form/ColorPicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAI3C,4CAAgD;AAEhD,6DAAkE;AAmBlE,MAAM,WAAW,GAAoB,CAAC,EAUrC,EAAE,EAAE;QAViC,EAClC,KAAK,EACL,GAAG,EACH,SAAS,EACT,OAAO,EACP,KAAK,EACL,KAAK,GAAG,aAAa,EACrB,QAAQ,EACR,QAAQ,OAEX,EADM,UAAU,cATqB,kFAUrC,CADgB;IAEb,MAAM,KAAK,mBACP,kBAAkB,EAAE,KAAK,IACtB,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAA,sBAAa,EAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CACpE,CAAC;IAEF,MAAM,YAAY,GAEd,EAAE,SAAS,EAAE,CAAC;IAClB,IAAI,GAAG,EAAE,CAAC;QACN,YAAY,CAAC,GAAG,GAAG,GAAG,CAAC;IAC3B,CAAC;IAED,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,CAAC,CAAsC,EAAE,EAAE;QACxE,IAAI,UAAU,CAAC,QAAQ,EAAE,CAAC;YACtB,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,iCAAY,oBAAK,YAAY,kBAAc,KAAK;QAC7C,uDACI,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,IAClB,UAAU,EAChB;QACF,8BAAC,iCAAY,IAAC,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,OAAQ,IACtC,KAAK,CACK,CACJ,CAClB,CAAC;AACN,CAAC,CAAC;AAEO,kCAAW"}
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/form/ColorPicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuD;AAIvD,4CAAgD;AAEhD,6DAAkE;AAmBlE,MAAM,WAAW,GAAG,IAAA,kBAAU,EAAqC,CAAC,EAUnE,EAAE,GAAG,EAAE,EAAE;QAV0D,EAChE,KAAK,EACL,GAAG,EACH,SAAS,EACT,OAAO,EACP,KAAK,EACL,KAAK,GAAG,aAAa,EACrB,QAAQ,EACR,QAAQ,OAEX,EADM,UAAU,cATmD,kFAUnE,CADgB;IAEb,MAAM,KAAK,mBACP,kBAAkB,EAAE,KAAK,IACtB,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAA,sBAAa,EAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CACpE,CAAC;IAEF,MAAM,YAAY,GAEd,EAAE,SAAS,EAAE,CAAC;IAClB,IAAI,GAAG,EAAE,CAAC;QACN,YAAY,CAAC,GAAG,GAAG,GAAG,CAAC;IAC3B,CAAC;IAED,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,CAAC,CAAsC,EAAE,EAAE;QACxE,IAAI,UAAU,CAAC,QAAQ,EAAE,CAAC;YACtB,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,iCAAY,oBAAK,YAAY,kBAAc,KAAK;QAC7C,uDACI,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,IACJ,UAAU,EAChB;QACF,8BAAC,iCAAY,IAAC,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,OAAQ,IACtC,KAAK,CACK,CACJ,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAOM,kCAAW;AALpB,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AACxC,WAAW,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,iCAAY,CAAC,QAAQ,EAAE,CAAC;AAErD,MAAM,+BAA+B,GAAG,iCAAY,CAAC,QAAQ,EAAE,CAAC;AAE1C,0EAA+B"}

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

@@ -50,7 +50,7 @@ const LabelWrapper = (0, theme_1.styled)("label", {
     },
     "&:has(input:disabled)": {
         cursor: "not-allowed",
-        [`${ColorDisplay.toString()}`]: {
+        [ColorDisplay.toString()]: {
             opacity: 0.5,
         },
     },

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.styled.js","sourceRoot":"","sources":["../../../src/components/form/ColorPicker.styled.ts"],"names":[],"mappings":";;;AAAA,uCAAqC;AAGrC,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,KAAK,EAAE;IAC/B,YAAY,EAAE,KAAK;IACnB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,aAAa;IACtB,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;IACpB,aAAa,EAAE,QAAQ;IACvB,SAAS,EAAE,YAAY;IACvB,eAAe,EAAE,gCAAgC;IACjD,MAAM,EAAE,uBAAuB;IAE/B,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,IAAI,EAAE;gBACF,YAAY,EAAE,KAAK;gBACnB,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,OAAO;gBAChB,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,QAAQ,EAAE,MAAM;gBAChB,KAAK,EAAE,OAAO;gBACd,UAAU,EAAE,KAAK;aACpB;SACJ;KACJ;CACJ,CAAC,CAAC;AAqCC,oCAAY;AAnChB,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,OAAO,EAAE;IACjC,kBAAkB,EAAE,SAAS;IAC7B,SAAS,EAAE,aAAa;IACxB,YAAY,EAAE,QAAQ;IAEtB,SAAS,EAAE;QACP,OAAO,EAAE,CAAC;QACV,QAAQ,EAAE,CAAC;QACX,WAAW,EAAE,UAAU;QACvB,QAAQ,EAAE,CAAC;QACX,UAAU,EAAE,UAAU;QACtB,SAAS,EAAE,CAAC;QACZ,iBAAiB,EAAE;YACf,CAAC,KAAK,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE;gBAC9B,OAAO,EAAE,uBAAuB;gBAChC,aAAa,EAAE,KAAK;aACvB;SACJ;KACJ;IAED,uBAAuB,EAAE;QACrB,MAAM,EAAE,aAAa;QACrB,CAAC,GAAG,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE;YAC5B,OAAO,EAAE,GAAG;SACf;KACJ;IAED,CAAC,wBAAwB,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE;QACjD,WAAW,EAAE,KAAK;KACrB;CAEJ,CAAC,CAAC;AAGC,oCAAY"}
+{"version":3,"file":"ColorPicker.styled.js","sourceRoot":"","sources":["../../../src/components/form/ColorPicker.styled.ts"],"names":[],"mappings":";;;AAAA,uCAAqC;AAGrC,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,KAAK,EAAE;IAC/B,YAAY,EAAE,KAAK;IACnB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,aAAa;IACtB,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;IACpB,aAAa,EAAE,QAAQ;IACvB,SAAS,EAAE,YAAY;IACvB,eAAe,EAAE,gCAAgC;IACjD,MAAM,EAAE,uBAAuB;IAE/B,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,IAAI,EAAE;gBACF,YAAY,EAAE,KAAK;gBACnB,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,OAAO;gBAChB,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,QAAQ,EAAE,MAAM;gBAChB,KAAK,EAAE,OAAO;gBACd,UAAU,EAAE,KAAK;aACpB;SACJ;KACJ;CACJ,CAAC,CAAC;AAqCC,oCAAY;AAnChB,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,OAAO,EAAE;IACjC,kBAAkB,EAAE,SAAS;IAC7B,SAAS,EAAE,aAAa;IACxB,YAAY,EAAE,QAAQ;IAEtB,SAAS,EAAE;QACP,OAAO,EAAE,CAAC;QACV,QAAQ,EAAE,CAAC;QACX,WAAW,EAAE,UAAU;QACvB,QAAQ,EAAE,CAAC;QACX,UAAU,EAAE,UAAU;QACtB,SAAS,EAAE,CAAC;QACZ,iBAAiB,EAAE;YACf,CAAC,KAAK,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE;gBAC9B,OAAO,EAAE,uBAAuB;gBAChC,aAAa,EAAE,KAAK;aACvB;SACJ;KACJ;IAED,uBAAuB,EAAE;QACrB,MAAM,EAAE,aAAa;QACrB,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,EAAE;YACvB,OAAO,EAAE,GAAG;SACf;KACJ;IAED,CAAC,wBAAwB,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE;QACjD,WAAW,EAAE,KAAK;KACrB;CAEJ,CAAC,CAAC;AAGC,oCAAY"}

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

@@ -1,12 +1,103 @@
 import React from "react";
 import { StyledLabel } from "./Label.styled";
-type LabelProps = React.ComponentProps<typeof StyledLabel>;
-interface Props extends Partial<Pick<LabelProps, "css" | "className">> {
+type StyledLabelProps = React.ComponentProps<typeof StyledLabel>;
+type LabelProps = Partial<Pick<StyledLabelProps, "css" | "className">> & {
     label?: React.ReactNode;
     variant?: "big";
     children: React.ReactNode;
-}
-declare const Label: React.FC<Props>;
-export { Label };
-export type { Props as LabelProps, };
+};
+declare const Label: React.ForwardRefExoticComponent<Partial<Pick<Omit<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+    ref?: ((instance: HTMLLabelElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLLabelElement> | null | undefined;
+}, "css"> & import("@stitches/react/types/styled-component").TransformProps<{}, {}> & {
+    css?: import("@stitches/react/types/css-util").CSS<{}, {
+        colors: {
+            background: "white";
+            mainColor: "#008ad2";
+            mainColorAlt: "#006AA9";
+            activeBg: "#e7e7e7";
+            inactiveBg: "#d3d3de";
+            inactiveDarkBg: "#999";
+            toggleHandleBg: "#e0e0e0";
+            toggleHandleBorder: "#cdcdcd";
+            toggleBgDisabled: "#f0f0f0";
+            toggleHandleBorderDisabled: "#c29f7d";
+            toggleHandleBgDisabled: "#deae84";
+            icon: "#636363";
+            border: "#d5d5d5";
+            buttonBorder: "#bababa";
+            headerBorder: "#c8c8c9";
+            headerBg: "#efeff0";
+            headerText: "#484848";
+            text: "#323232";
+            sub: "#959595";
+            popText: "#666";
+            toolbarBorder: "#ababab";
+            toolbarBg: "#f8f8f8";
+            modalBg: "#f7f7f7";
+            modalButtonBg: "#f8f8f8";
+            modalButtonBorder: "#c2c2c2";
+            inputDisabledBg: "#f3f3f3";
+            inputDisabledText: "#959595";
+            choiceBg: "#ffffff";
+            choiceText: "#999999";
+            choiceActiveBg: "#f3f3f3";
+            choiceActiveText: "#313131";
+            choiceBorder: "#cfcfcf";
+            selectorText: "#606060";
+            selectorActive: "#008ad2";
+            blue1: "#038bf4";
+            blue2: "#b7d6f5";
+            blue3: "#dbe6ff";
+            blue4: "#33b4ff";
+            blue5: "#30a2e6";
+            orange1: "#ff7200";
+            orange1Darker: "#cc5b00";
+            purple1: "#7357e8";
+            green1: "#3ec234";
+            green1Darker: "#38af2f";
+            pink1: "#ff388f";
+            red1: "#ea2700";
+            yellow1: "#ffde9d";
+            yellow2: "#e4a429";
+            yellow3: "#fff5db";
+            pinky1: "#f5c0b7";
+            pinky2: "#e07b67";
+            pinky3: "#ffe1db";
+            grey1: "#737373";
+            focusColor: "#dcaf00";
+            scrollbarsThumb: "#737373";
+            scrollbarsBg: "transparent";
+            tableStripedBg: "#fafafa";
+            toolButtonText: "#666e80";
+        };
+    }, 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;
+        };
+    }>;
+}, "css" | "className">> & {
+    label?: React.ReactNode;
+    variant?: "big";
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLLabelElement>>;
+declare const LabelTextSelector: string;
+export { Label, LabelTextSelector };
+export type { LabelProps };
 //# sourceMappingURL=Label.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/components/form/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAc,MAAM,gBAAgB,CAAC;AAEzD,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC;AAE3D,UAAU,KAAM,SAAQ,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,GAAG,WAAW,CAAC,CAAC;IAClE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiB1B,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC;AAEjB,YAAY,EACR,KAAK,IAAI,UAAU,GACtB,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/components/form/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAc,MAAM,gBAAgB,CAAC;AAEzD,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC;AAEjE,KAAK,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,KAAK,GAAG,WAAW,CAAC,CAAC,GAAG;IACrE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEF,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YALC,KAAK,CAAC,SAAS;cACb,KAAK;cACL,KAAK,CAAC,SAAS;0CAoB3B,CAAC;AAKH,QAAA,MAAM,iBAAiB,QAAwB,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC;AACpC,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/form/Label.js

@@ -1,4 +1,37 @@
 "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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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)
@@ -10,21 +43,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Label = void 0;
-const react_1 = __importDefault(require("react"));
+exports.LabelTextSelector = exports.Label = void 0;
+const react_1 = __importStar(require("react"));
 const Label_styled_1 = require("./Label.styled");
-const Label = (props) => {
+const Label = (0, react_1.forwardRef)((props, ref) => {
     const { label, variant, children } = props, rest = __rest(props, ["label", "variant", "children"]);
     const labelElement = label
         ? (react_1.default.createElement(Label_styled_1.StyledText, Object.assign({}, (variant ? { variant } : undefined)), label))
         : null;
-    return (react_1.default.createElement(Label_styled_1.StyledLabel, Object.assign({}, rest),
+    return (react_1.default.createElement(Label_styled_1.StyledLabel, Object.assign({}, rest, { ref: ref }),
         labelElement,
         children));
-};
+});
 exports.Label = Label;
+Label.displayName = "Label";
+Label.toString = () => Label_styled_1.StyledLabel.toString();
+const LabelTextSelector = Label_styled_1.StyledText.toString();
+exports.LabelTextSelector = LabelTextSelector;
 //# sourceMappingURL=Label.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../src/components/form/Label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAE1B,iDAAyD;AAUzD,MAAM,KAAK,GAAoB,CAAC,KAAK,EAAE,EAAE;IACrC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA7C,gCAAqC,CAAQ,CAAC;IAEpD,MAAM,YAAY,GAAG,KAAK;QACtB,CAAC,CAAC,CACE,8BAAC,yBAAU,oBAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,GAC9C,KAAK,CACG,CAChB;QACD,CAAC,CAAC,IAAI,CAAC;IAEX,OAAO,CACH,8BAAC,0BAAW,oBAAK,IAAI;QAChB,YAAY;QACZ,QAAQ,CACC,CACjB,CAAC;AACN,CAAC,CAAC;AAEO,sBAAK"}
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../src/components/form/Label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,iDAAyD;AAUzD,MAAM,KAAK,GAAG,IAAA,kBAAU,EAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAClE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA7C,gCAAqC,CAAQ,CAAC;IAEpD,MAAM,YAAY,GAAG,KAAK;QACtB,CAAC,CAAC,CACE,8BAAC,yBAAU,oBAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,GAC9C,KAAK,CACG,CAChB;QACD,CAAC,CAAC,IAAI,CAAC;IAEX,OAAO,CACH,8BAAC,0BAAW,oBAAK,IAAI,IAAE,GAAG,EAAE,GAAG;QAC1B,YAAY;QACZ,QAAQ,CACC,CACjB,CAAC;AACN,CAAC,CAAC,CAAC;AAOM,sBAAK;AALd,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAC5B,KAAK,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,0BAAW,CAAC,QAAQ,EAAE,CAAC;AAE9C,MAAM,iBAAiB,GAAG,yBAAU,CAAC,QAAQ,EAAE,CAAC;AAEhC,8CAAiB"}

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

@@ -1,2 +1,6 @@
-export { Select } from "./Select.styled";
+import type { ComponentProps } from "react";
+import { Select } from "./Select.styled";
+type SelectProps = ComponentProps<typeof Select>;
+export type { SelectProps };
+export { Select };
 //# sourceMappingURL=Select.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/form/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/form/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,KAAK,WAAW,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAEjD,YAAY,EAAE,WAAW,EAAE,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/form/Select.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
-var Select_styled_1 = require("./Select.styled");
+const Select_styled_1 = require("./Select.styled");
 Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_styled_1.Select; } });
 //# sourceMappingURL=Select.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/form/Select.tsx"],"names":[],"mappings":";;;AAAA,iDAAyC;AAAhC,uGAAA,MAAM,OAAA"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/form/Select.tsx"],"names":[],"mappings":";;;AAEA,mDAAyC;AAKhC,uFALA,sBAAM,OAKA"}