react-miui 0.20.0 → 0.20.1

package/CHANGELOG.md

@@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [0.20.1] - 2022-06-08
+### Fixed
+- broken input styles
+- broken textarea styles
+### Dev
+- added textarea storybook
+### Added
+- exported custom scrollbars as stitches styles
+
 ## [0.20.0] - 2022-06-08
 ### Added
 - loader components: CoveringLoader, FullLoader, Loader, Loading, PopLoader

package/dist/components/form/input/Input.css.d.ts

@@ -0,0 +1,47 @@
+declare const input: {
+    height: string;
+    fontSize: string;
+    color: "$text";
+    border: "none";
+    display: "block";
+    width: "100%";
+    background: "none";
+    fontFamily: "inherit";
+    padding: "1.2em 0";
+    flex: number;
+    "&::placeholder": {
+        color: "$sub";
+    };
+    "&:read-only, &:disabled": {
+        color: "inherit";
+    };
+};
+declare const wrapper: {
+    background: "white";
+    display: "inline-flex";
+    width: "100%";
+    borderRadius: "2px";
+    padding: `0 ${string}`;
+    border: `${string} solid $border`;
+    alignItems: "center";
+    variants: {
+        disabled: {
+            true: {
+                background: string;
+                color: string;
+            };
+        };
+        readOnly: {
+            true: {
+                color: string;
+            };
+        };
+        focused: {
+            true: {
+                borderColor: string;
+            };
+        };
+    };
+};
+export { input, wrapper, };
+//# sourceMappingURL=Input.css.d.ts.map

package/dist/components/form/input/Input.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input/Input.css.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;CAmBS,CAAC;AAErB,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BO,CAAC;AAErB,OAAO,EACH,KAAK,EACL,OAAO,GACV,CAAC"}

package/dist/components/form/input/Input.css.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrapper = exports.input = void 0;
+const theme_js_1 = require("../../../theme.js");
+const input = {
+    "height": (0, theme_js_1.dimensionsPxToRem)(103),
+    "fontSize": (0, theme_js_1.fontPxToRem)(25),
+    "color": "$text",
+    "border": "none",
+    "display": "block",
+    "width": "100%",
+    "background": "none",
+    "fontFamily": "inherit",
+    "padding": "1.2em 0",
+    "flex": 1,
+    "&::placeholder": {
+        color: "$sub",
+    },
+    "&:read-only, &:disabled": {
+        color: "inherit",
+    },
+};
+exports.input = input;
+const wrapper = {
+    background: "white",
+    display: "inline-flex",
+    width: "100%",
+    borderRadius: "2px",
+    padding: `0 ${(0, theme_js_1.dimensionsPxToRem)(36)}`,
+    border: `${(0, theme_js_1.borderPxToRem)(1)} solid $border`,
+    alignItems: "center",
+    variants: {
+        disabled: {
+            true: {
+                background: "$inputDisabledBg",
+                color: "$inputDisabledText",
+            },
+        },
+        readOnly: {
+            true: {
+                color: "$inputDisabledText",
+            },
+        },
+        focused: {
+            true: {
+                borderColor: "$focusColor",
+            },
+        },
+    },
+};
+exports.wrapper = wrapper;
+//# sourceMappingURL=Input.css.js.map

package/dist/components/form/input/Input.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.css.js","sourceRoot":"","sources":["../../../../src/components/form/input/Input.css.ts"],"names":[],"mappings":";;;AAEA,gDAAkF;AAElF,MAAM,KAAK,GAAG;IACV,QAAQ,EAAE,IAAA,4BAAiB,EAAC,GAAG,CAAC;IAChC,UAAU,EAAE,IAAA,sBAAW,EAAC,EAAE,CAAC;IAC3B,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,OAAO;IAClB,OAAO,EAAE,MAAM;IACf,YAAY,EAAE,MAAM;IACpB,YAAY,EAAE,SAAS;IACvB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,CAAC;IAET,gBAAgB,EAAE;QACd,KAAK,EAAE,MAAM;KAChB;IAED,yBAAyB,EAAE;QACvB,KAAK,EAAE,SAAS;KACnB;CACe,CAAC;AAgCjB,sBAAK;AA9BT,MAAM,OAAO,GAAG;IACZ,UAAU,EAAE,OAAO;IACnB,OAAO,EAAE,aAAa;IACtB,KAAK,EAAE,MAAM;IACb,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,KAAK,IAAA,4BAAiB,EAAC,EAAE,CAAC,EAAE;IACrC,MAAM,EAAE,GAAG,IAAA,wBAAa,EAAC,CAAC,CAAC,gBAAgB;IAC3C,UAAU,EAAE,QAAQ;IAEpB,QAAQ,EAAE;QACN,QAAQ,EAAE;YACN,IAAI,EAAE;gBACF,UAAU,EAAE,kBAAkB;gBAC9B,KAAK,EAAE,oBAAoB;aAC9B;SACJ;QACD,QAAQ,EAAE;YACN,IAAI,EAAE;gBACF,KAAK,EAAE,oBAAoB;aAC9B;SACJ;QACD,OAAO,EAAE;YACL,IAAI,EAAE;gBACF,WAAW,EAAE,aAAa;aAC7B;SACJ;KACJ;CACe,CAAC;AAIjB,0BAAO"}

package/dist/components/form/input/Input.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input/Input.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAef,CAAC;AAEH,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCjB,CAAC;AAEH,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGhB,CAAC;AAEH,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGhB,CAAC;AAEH,OAAO,EACH,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,GACf,CAAC"}
+{"version":3,"file":"Input.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input/Input.styled.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAyB,CAAC;AAE3C,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAyB,CAAC;AAE7C,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGhB,CAAC;AAEH,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGhB,CAAC;AAEH,OAAO,EACH,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,GACf,CAAC"}

package/dist/components/form/input/Input.styled.js

@@ -2,55 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledSuffix = exports.StyledPrefix = exports.StyledWrapper = exports.StyledInput = void 0;
 const theme_js_1 = require("../../../theme.js");
-const StyledInput = (0, theme_js_1.styled)("input", {
-    "height": (0, theme_js_1.dimensionsPxToRem)(103),
-    "fontSize": (0, theme_js_1.fontPxToRem)(34),
-    "color": "$text",
-    "border": "none",
-    "display": "block",
-    "width": "100%",
-    "background": "none",
-    "fontFamily": "inherit",
-    "padding": "1.2em 0",
-    "flex": 1,
-    "&::placeholder": {
-        color: "$sub",
-    },
-});
+const Input_css_js_1 = require("./Input.css.js");
+const StyledInput = (0, theme_js_1.styled)("input", Input_css_js_1.input);
 exports.StyledInput = StyledInput;
-const StyledWrapper = (0, theme_js_1.styled)("div", {
-    background: "white",
-    display: "inline-flex",
-    width: "100%",
-    borderRadius: "2px",
-    padding: `0 ${(0, theme_js_1.dimensionsPxToRem)(36)}`,
-    border: `${(0, theme_js_1.borderPxToRem)(1)} solid $border`,
-    alignItems: "center",
-    variants: {
-        disabled: {
-            true: {
-                background: "$inputDisabledBg",
-                color: "$inputDisabledText",
-                [StyledInput.toString()]: {
-                    color: "$inputDisabledText",
-                },
-            },
-        },
-        readOnly: {
-            true: {
-                color: "$inputDisabledText",
-                [StyledInput.toString()]: {
-                    color: "$inputDisabledText",
-                },
-            },
-        },
-        focused: {
-            true: {
-                borderColor: "$focusColor",
-            },
-        },
-    },
-});
+const StyledWrapper = (0, theme_js_1.styled)("div", Input_css_js_1.wrapper);
 exports.StyledWrapper = StyledWrapper;
 const StyledPrefix = (0, theme_js_1.styled)("div", {
     marginRight: (0, theme_js_1.dimensionsPxToRem)(36),

package/dist/components/form/input/Input.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.styled.js","sourceRoot":"","sources":["../../../../src/components/form/input/Input.styled.ts"],"names":[],"mappings":";;;AAAA,gDAA0F;AAE1F,MAAM,WAAW,GAAG,IAAA,iBAAM,EAAC,OAAO,EAAE;IAChC,QAAQ,EAAE,IAAA,4BAAiB,EAAC,GAAG,CAAC;IAChC,UAAU,EAAE,IAAA,sBAAW,EAAC,EAAE,CAAC;IAC3B,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,OAAO;IAClB,OAAO,EAAE,MAAM;IACf,YAAY,EAAE,MAAM;IACpB,YAAY,EAAE,SAAS;IACvB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,CAAC;IAET,gBAAgB,EAAE;QACd,KAAK,EAAE,MAAM;KAChB;CACJ,CAAC,CAAC;AAkDC,kCAAW;AAhDf,MAAM,aAAa,GAAG,IAAA,iBAAM,EAAC,KAAK,EAAE;IAChC,UAAU,EAAE,OAAO;IACnB,OAAO,EAAE,aAAa;IACtB,KAAK,EAAE,MAAM;IACb,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,KAAK,IAAA,4BAAiB,EAAC,EAAE,CAAC,EAAE;IACrC,MAAM,EAAE,GAAG,IAAA,wBAAa,EAAC,CAAC,CAAC,gBAAgB;IAC3C,UAAU,EAAE,QAAQ;IAEpB,QAAQ,EAAE;QACN,QAAQ,EAAE;YACN,IAAI,EAAE;gBACF,UAAU,EAAE,kBAAkB;gBAC9B,KAAK,EAAE,oBAAoB;gBAE3B,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC,EAAE;oBACtB,KAAK,EAAE,oBAAoB;iBAC9B;aACJ;SACJ;QACD,QAAQ,EAAE;YACN,IAAI,EAAE;gBACF,KAAK,EAAE,oBAAoB;gBAE3B,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC,EAAE;oBACtB,KAAK,EAAE,oBAAoB;iBAC9B;aACJ;SACJ;QACD,OAAO,EAAE;YACL,IAAI,EAAE;gBACF,WAAW,EAAE,aAAa;aAC7B;SACJ;KACJ;CACJ,CAAC,CAAC;AAcC,sCAAa;AAZjB,MAAM,YAAY,GAAG,IAAA,iBAAM,EAAC,KAAK,EAAE;IAC/B,WAAW,EAAE,IAAA,4BAAiB,EAAC,EAAE,CAAC;IAClC,OAAO,EAAE,MAAM;CAClB,CAAC,CAAC;AAUC,oCAAY;AARhB,MAAM,YAAY,GAAG,IAAA,iBAAM,EAAC,KAAK,EAAE;IAC/B,UAAU,EAAE,IAAA,4BAAiB,EAAC,EAAE,CAAC;IACjC,OAAO,EAAE,MAAM;CAClB,CAAC,CAAC;AAMC,oCAAY"}
+{"version":3,"file":"Input.styled.js","sourceRoot":"","sources":["../../../../src/components/form/input/Input.styled.ts"],"names":[],"mappings":";;;AAAA,gDAA8D;AAE9D,iDAAgD;AAEhD,MAAM,WAAW,GAAG,IAAA,iBAAM,EAAC,OAAO,EAAE,oBAAK,CAAC,CAAC;AAevC,kCAAW;AAbf,MAAM,aAAa,GAAG,IAAA,iBAAM,EAAC,KAAK,EAAE,sBAAO,CAAC,CAAC;AAczC,sCAAa;AAZjB,MAAM,YAAY,GAAG,IAAA,iBAAM,EAAC,KAAK,EAAE;IAC/B,WAAW,EAAE,IAAA,4BAAiB,EAAC,EAAE,CAAC;IAClC,OAAO,EAAE,MAAM;CAClB,CAAC,CAAC;AAUC,oCAAY;AARhB,MAAM,YAAY,GAAG,IAAA,iBAAM,EAAC,KAAK,EAAE;IAC/B,UAAU,EAAE,IAAA,4BAAiB,EAAC,EAAE,CAAC;IACjC,OAAO,EAAE,MAAM;CAClB,CAAC,CAAC;AAMC,oCAAY"}

package/dist/components/form/textarea/TextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/components/form/textarea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAIrD,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,GAAG,KAAK,CA2BjF,CAAC;AAEF,OAAO,EACH,QAAQ,GACX,CAAC"}

package/dist/components/form/{TextArea.js → textarea/TextArea.js}

@@ -33,16 +33,12 @@ 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.TextArea = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const Input_module_scss_1 = __importDefault(require("./input/Input.module.scss"));
+const TextArea_styled_1 = require("./TextArea.styled");
 const TextArea = (_a) => {
-    var { className, children, onFocus, onBlur } = _a, props = __rest(_a, ["className", "children", "onFocus", "onBlur"]);
+    var { children, onFocus, onBlur } = _a, props = __rest(_a, ["children", "onFocus", "onBlur"]);
     const [focused, setFocused] = (0, react_1.useState)(false);
     const handleFocus = (0, react_1.useCallback)((e) => {
         setFocused(true);
@@ -52,10 +48,7 @@ const TextArea = (_a) => {
         setFocused(false);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
     }, [onBlur]);
-    const cls = (0, classnames_1.default)(Input_module_scss_1.default.wrapper, {
-        [Input_module_scss_1.default.wrapperFocused]: focused,
-    }, Input_module_scss_1.default.input, Input_module_scss_1.default.textarea, className);
-    return (react_1.default.createElement("textarea", Object.assign({}, props, { onFocus: handleFocus, onBlur: handleBlur, className: cls })));
+    return (react_1.default.createElement(TextArea_styled_1.StyledTextArea, Object.assign({}, props, { disabled: Boolean(props.disabled), readOnly: Boolean(props.readOnly), focused: focused, onFocus: handleFocus, onBlur: handleBlur })));
 };
 exports.TextArea = TextArea;
 //# sourceMappingURL=TextArea.js.map

package/dist/components/form/textarea/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/form/textarea/TextArea.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AAErD,uDAAmD;AAMnD,MAAM,QAAQ,GAAwE,CAAC,EAItF,EAAE,EAAE;QAJkF,EACnF,QAAQ,EACR,OAAO,EAAE,MAAM,OAElB,EADM,KAAK,cAH2E,iCAItF,CADW;IAER,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAC,CAAC,CAAwC,EAAE,EAAE;QACzE,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;IACjB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,UAAU,GAAG,IAAA,mBAAW,EAAC,CAAC,CAAwC,EAAE,EAAE;QACxE,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,CAAC,CAAC;IAChB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACH,8BAAC,gCAAc,oBACP,KAAK,IACT,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,EACjC,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,EACjC,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,IACpB,CACL,CAAC;AACN,CAAC,CAAC;AAGE,4BAAQ"}

package/dist/components/form/textarea/TextArea.stories.d.ts

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

package/dist/components/form/textarea/TextArea.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/form/textarea/TextArea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,QAAA,MAAM,OAAO,EAAE,KAEd,CAAC;AAEF,OAAO,EACH,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/form/textarea/TextArea.stories.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+const TextArea_js_1 = require("./TextArea.js");
+const meta = {
+    title: "Components/Form/TextArea",
+    component: TextArea_js_1.TextArea,
+    tags: ["autodocs", "form"],
+};
+const Primary = {
+    args: {},
+};
+exports.Primary = Primary;
+exports.default = meta;
+//# sourceMappingURL=TextArea.stories.js.map

package/dist/components/form/textarea/TextArea.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../../src/components/form/textarea/TextArea.stories.tsx"],"names":[],"mappings":";;;AAEA,+CAAyC;AAEzC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,sBAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE,EAAE;CACX,CAAC;AAGE,0BAAO;AAGX,kBAAe,IAAI,CAAC"}

package/dist/components/form/textarea/TextArea.styled.d.ts

@@ -0,0 +1,78 @@
+declare const StyledTextArea: import("@stitches/react/types/styled-component.js").StyledComponent<"textarea", {
+    disabled?: boolean | "true";
+    readOnly?: boolean | "true";
+    focused?: boolean | "true";
+}, {}, import("@stitches/react/types/css-util.js").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;
+        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.js").DefaultThemeMap, {
+    mx: (value: string) => {
+        marginLeft: string;
+        marginRight: string;
+    };
+    my: (value: string) => {
+        marginTop: string;
+        marginBottom: string;
+    };
+    size: (value: string) => {
+        width: string;
+        height: string;
+    };
+}>>;
+export { StyledTextArea, };
+//# sourceMappingURL=TextArea.styled.d.ts.map

package/dist/components/form/textarea/TextArea.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/form/textarea/TextArea.styled.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUlB,CAAC;AAEH,OAAO,EACH,cAAc,GACjB,CAAC"}

package/dist/components/form/textarea/TextArea.styled.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTextArea = void 0;
+const theme_js_1 = require("../../../theme.js");
+const Input_css_1 = require("../input/Input.css");
+const scrollbars_css_1 = require("../../../scrollbars.css");
+const StyledTextArea = (0, theme_js_1.styled)("textarea", Object.assign(Object.assign(Object.assign(Object.assign({}, scrollbars_css_1.miuiScrollbars), Input_css_1.input), Input_css_1.wrapper), { padding: `1.2em ${(0, theme_js_1.dimensionsPxToRem)(36)}`, height: "unset", resize: "vertical", minHeight: (0, theme_js_1.dimensionsPxToRem)(103) }));
+exports.StyledTextArea = StyledTextArea;
+//# sourceMappingURL=TextArea.styled.js.map

package/dist/components/form/textarea/TextArea.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.styled.js","sourceRoot":"","sources":["../../../../src/components/form/textarea/TextArea.styled.ts"],"names":[],"mappings":";;;AAAA,gDAA8D;AAC9D,kDAAoD;AACpD,4DAAyD;AAEzD,MAAM,cAAc,GAAG,IAAA,iBAAM,EAAC,UAAU,8DACjC,+BAAc,GACd,iBAAK,GACL,mBAAO,KAEV,OAAO,EAAE,SAAS,IAAA,4BAAiB,EAAC,EAAE,CAAC,EAAE,EACzC,MAAM,EAAE,OAAO,EACf,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,IAAA,4BAAiB,EAAC,GAAG,CAAC,IAEnC,CAAC;AAGC,wCAAc"}

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export * from "./components/form/choice/Choice.js";
 export * from "./components/form/Checkbox.js";
 export * from "./components/form/Label.js";
 export * from "./components/form/Select.js";
-export * from "./components/form/TextArea.js";
+export * from "./components/form/textarea/TextArea.js";
 export * from "./components/form/Toggle.js";
 export * from "./components/form/index.js";
 export * from "./components/icons/Icon.js";
@@ -37,6 +37,7 @@ export * from "./components/ui/toaster/Toaster.js";
 export * from "./components/utils/HandleEsc.js";
 export * from "./components/utils/If.js";
 export * from "./components/utils/Spacer.js";
+export * from "./scrollbars.css.js";
 export type { ThemeCSS } from "./theme.js";
 export { getCssText, styled } from "./theme.js";
 export { cssReset } from "./theme.css-reset.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,wCAAwC,CAAC;AACvD,cAAc,oCAAoC,CAAC;AAEnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,0CAA0C,CAAC;AACzD,cAAc,sCAAsC,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAE/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AAEnD,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAE7C,YAAY,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wCAAwC,CAAC;AACvD,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,wCAAwC,CAAC;AACvD,cAAc,oCAAoC,CAAC;AAEnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,0CAA0C,CAAC;AACzD,cAAc,sCAAsC,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAE/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AAEnD,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAE7C,cAAc,qBAAqB,CAAC;AAEpC,YAAY,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/index.js

@@ -19,7 +19,7 @@ __exportStar(require("./components/form/choice/Choice.js"), exports);
 __exportStar(require("./components/form/Checkbox.js"), exports);
 __exportStar(require("./components/form/Label.js"), exports);
 __exportStar(require("./components/form/Select.js"), exports);
-__exportStar(require("./components/form/TextArea.js"), exports);
+__exportStar(require("./components/form/textarea/TextArea.js"), exports);
 __exportStar(require("./components/form/Toggle.js"), exports);
 __exportStar(require("./components/form/index.js"), exports);
 __exportStar(require("./components/icons/Icon.js"), exports);
@@ -54,6 +54,7 @@ __exportStar(require("./components/ui/toaster/Toaster.js"), exports);
 __exportStar(require("./components/utils/HandleEsc.js"), exports);
 __exportStar(require("./components/utils/If.js"), exports);
 __exportStar(require("./components/utils/Spacer.js"), exports);
+__exportStar(require("./scrollbars.css.js"), exports);
 var theme_js_1 = require("./theme.js");
 Object.defineProperty(exports, "getCssText", { enumerable: true, get: function () { return theme_js_1.getCssText; } });
 Object.defineProperty(exports, "styled", { enumerable: true, get: function () { return theme_js_1.styled; } });

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AACA,qEAAmD;AACnD,gEAA8C;AAC9C,6DAA2C;AAC3C,8DAA4C;AAC5C,gEAA8C;AAC9C,8DAA4C;AAE5C,6DAA2C;AAE3C,6DAA2C;AAE3C,mEAAiD;AACjD,uEAAqD;AACrD,iFAA+D;AAC/D,6EAA2D;AAC3D,mEAAiD;AACjD,mEAAiD;AACjD,iFAA+D;AAC/D,yEAAuD;AACvD,qEAAmD;AAEnD,mEAAiD;AACjD,yEAAuD;AACvD,mEAAiD;AACjD,sEAAoD;AACpD,mEAAiD;AACjD,uEAAqD;AACrD,2EAAyD;AACzD,uEAAqD;AACrD,mEAAiD;AACjD,oEAAkD;AAClD,sEAAoD;AACpD,qEAAmD;AACnD,iEAA+C;AAC/C,wEAAsD;AACtD,6DAA2C;AAC3C,mEAAiD;AACjD,iEAA+C;AAE/C,mEAAiD;AACjD,qEAAmD;AAEnD,kEAAgD;AAChD,2DAAyC;AACzC,+DAA6C;AAI7C,uCAAgD;AAAvC,sGAAA,UAAU,OAAA;AAAE,kGAAA,MAAM,OAAA;AAC3B,2DAAgD;AAAvC,8GAAA,QAAQ,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AACA,qEAAmD;AACnD,gEAA8C;AAC9C,6DAA2C;AAC3C,8DAA4C;AAC5C,yEAAuD;AACvD,8DAA4C;AAE5C,6DAA2C;AAE3C,6DAA2C;AAE3C,mEAAiD;AACjD,uEAAqD;AACrD,iFAA+D;AAC/D,6EAA2D;AAC3D,mEAAiD;AACjD,mEAAiD;AACjD,iFAA+D;AAC/D,yEAAuD;AACvD,qEAAmD;AAEnD,mEAAiD;AACjD,yEAAuD;AACvD,mEAAiD;AACjD,sEAAoD;AACpD,mEAAiD;AACjD,uEAAqD;AACrD,2EAAyD;AACzD,uEAAqD;AACrD,mEAAiD;AACjD,oEAAkD;AAClD,sEAAoD;AACpD,qEAAmD;AACnD,iEAA+C;AAC/C,wEAAsD;AACtD,6DAA2C;AAC3C,mEAAiD;AACjD,iEAA+C;AAE/C,mEAAiD;AACjD,qEAAmD;AAEnD,kEAAgD;AAChD,2DAAyC;AACzC,+DAA6C;AAE7C,sDAAoC;AAIpC,uCAAgD;AAAvC,sGAAA,UAAU,OAAA;AAAE,kGAAA,MAAM,OAAA;AAC3B,2DAAgD;AAAvC,8GAAA,QAAQ,OAAA"}

package/dist/scrollbars.css.d.ts

@@ -0,0 +1,4 @@
+import type { ThemeCSS } from "./theme";
+declare const miuiScrollbars: ThemeCSS;
+export { miuiScrollbars };
+//# sourceMappingURL=scrollbars.css.d.ts.map

package/dist/scrollbars.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbars.css.d.ts","sourceRoot":"","sources":["../src/scrollbars.css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAiBxC,QAAA,MAAM,cAAc,EAAE,QAoCrB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/scrollbars.css.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.miuiScrollbars = void 0;
+const theme_js_1 = require("./theme.js");
+const thumbStyle = {
+    background: "var(--scrollbars-thumb)",
+    backgroundClip: "padding-box",
+    border: "2px solid var(--scrollbars-bg)",
+    borderRadius: "$1",
+};
+const thumbActive = {
+    background: "var(--scrollbars-thumb-active)",
+    border: "2px solid var(--scrollbars-bg)",
+};
+const miuiScrollbars = {
+    "--scrollbars-thumb": "#737373",
+    "--scrollbars-thumb-active": "#737373",
+    "--scrollbars-bg": "transparent",
+    "scrollbar-color": "var(--scrollbars-thumb) var(--scrollbars-bg)",
+    "scrollbar-width": "thin !important",
+    "&::-webkit-scrollbar": {
+        height: (0, theme_js_1.pxToRem)(7),
+        width: (0, theme_js_1.pxToRem)(7),
+        backgroundColor: "transparent",
+        borderRadius: (0, theme_js_1.pxToRem)(7),
+    },
+    "&::-webkit-scrollbar-thumb:vertical": Object.assign(Object.assign({}, thumbStyle), { "minHeight": (0, theme_js_1.pxToRem)(10), "marginRight": (0, theme_js_1.pxToRem)(2), "&:active": Object.assign(Object.assign({}, thumbActive), { minHeight: (0, theme_js_1.pxToRem)(8), marginRight: (0, theme_js_1.pxToRem)(4) }) }),
+    "&::-webkit-scrollbar-thumb:horizontal": Object.assign(Object.assign({}, thumbStyle), { "minWidth": (0, theme_js_1.pxToRem)(10), "marginBottom": (0, theme_js_1.pxToRem)(2), "&:active": Object.assign(Object.assign({}, thumbActive), { minWidth: (0, theme_js_1.pxToRem)(8), marginBottom: (0, theme_js_1.pxToRem)(4) }) }),
+    "&::-webkit-scrollbar-corner": {
+        backgroundColor: "transparent",
+    },
+};
+exports.miuiScrollbars = miuiScrollbars;
+//# sourceMappingURL=scrollbars.css.js.map

package/dist/scrollbars.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbars.css.js","sourceRoot":"","sources":["../src/scrollbars.css.ts"],"names":[],"mappings":";;;AAEA,yCAAqC;AAErC,MAAM,UAAU,GAAG;IACf,UAAU,EAAE,yBAAyB;IACrC,cAAc,EAAE,aAAa;IAC7B,MAAM,EAAE,gCAAgC;IACxC,YAAY,EAAE,IAAI;CACrB,CAAC;AAEF,MAAM,WAAW,GAAa;IAC1B,UAAU,EAAE,gCAAgC;IAC5C,MAAM,EAAE,gCAAgC;CAC3C,CAAC;AAGF,MAAM,cAAc,GAAa;IAC7B,oBAAoB,EAAE,SAAS;IAC/B,2BAA2B,EAAE,SAAS;IACtC,iBAAiB,EAAE,aAAa;IAChC,iBAAiB,EAAE,8CAA8C;IACjE,iBAAiB,EAAE,iBAAiB;IAEpC,sBAAsB,EAAE;QACpB,MAAM,EAAE,IAAA,kBAAO,EAAC,CAAC,CAAC;QAClB,KAAK,EAAE,IAAA,kBAAO,EAAC,CAAC,CAAC;QACjB,eAAe,EAAE,aAAa;QAC9B,YAAY,EAAE,IAAA,kBAAO,EAAC,CAAC,CAAC;KAC3B;IACD,qCAAqC,kCAC9B,UAAU,KACb,WAAW,EAAE,IAAA,kBAAO,EAAC,EAAE,CAAC,EACxB,aAAa,EAAE,IAAA,kBAAO,EAAC,CAAC,CAAC,EACzB,UAAU,kCACH,WAAW,KACd,SAAS,EAAE,IAAA,kBAAO,EAAC,CAAC,CAAC,EACrB,WAAW,EAAE,IAAA,kBAAO,EAAC,CAAC,CAAC,MAE9B;IACD,uCAAuC,kCAChC,UAAU,KACb,UAAU,EAAE,IAAA,kBAAO,EAAC,EAAE,CAAC,EACvB,cAAc,EAAE,IAAA,kBAAO,EAAC,CAAC,CAAC,EAC1B,UAAU,kCACH,WAAW,KACd,QAAQ,EAAE,IAAA,kBAAO,EAAC,CAAC,CAAC,EACpB,YAAY,EAAE,IAAA,kBAAO,EAAC,CAAC,CAAC,MAE/B;IACD,6BAA6B,EAAE;QAC3B,eAAe,EAAE,aAAa;KACjC;CACJ,CAAC;AAEO,wCAAc"}

package/dist/theme.d.ts

@@ -89,7 +89,7 @@ declare const styled: <Type extends import("react").ComponentType<any> | keyof J
         css: CSS;
     })[];
     defaultVariants?: "variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T_1 ? { [Name_1 in keyof T_1]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]>; } : never : import("@stitches/react/types/util").WideObject;
-} & CSS & (Composers[K] extends infer T_2 ? { [K2 in keyof T_2]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS ? CSS[K2] : unknown; } : never); }) => StyledComponent<Type, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {}, import("@stitches/react/types/css-util").CSS<{}, {
+} & CSS & (Composers[K] extends infer T_2 ? { [K2 in keyof T_2]: K2 extends "variants" | "compoundVariants" | "defaultVariants" ? unknown : K2 extends keyof CSS ? CSS[K2] : unknown; } : never); }) => StyledComponent<Type, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {}, import("@stitches/react/types/css-util").CSS<{}, {
     colors: {
         background: string;
         mainColor: string;
@@ -244,7 +244,7 @@ declare const styled: <Type extends import("react").ComponentType<any> | keyof J
         css: CSS;
     })[];
     defaultVariants?: "variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T_1 ? { [Name_1 in keyof T_1]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]>; } : never : import("@stitches/react/types/util").WideObject;
-} & CSS & (Composers[K] extends infer T_2 ? { [K2 in keyof T_2]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS ? CSS[K2] : unknown; } : never); }) => import("@stitches/react/types/styled-component").CssComponent<import("@stitches/react/types/styled-component").StyledComponentType<Composers>, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {}, CSS>, globalCss: <Styles extends {
+} & CSS & (Composers[K] extends infer T_2 ? { [K2 in keyof T_2]: K2 extends "variants" | "compoundVariants" | "defaultVariants" ? unknown : K2 extends keyof CSS ? CSS[K2] : unknown; } : never); }) => import("@stitches/react/types/styled-component").CssComponent<import("@stitches/react/types/styled-component").StyledComponentType<Composers>, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {}, CSS>, globalCss: <Styles extends {
     [K: string]: any;
 }>(...styles: ({
     '@import'?: unknown;