react-miui 0.20.0 → 0.20.1

package/esm/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/esm/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/esm/components/form/input/Input.css.js

@@ -0,0 +1,48 @@
+import { dimensionsPxToRem, fontPxToRem, borderPxToRem } from "../../../theme.js";
+const input = {
+    "height": dimensionsPxToRem(103),
+    "fontSize": 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",
+    },
+};
+const wrapper = {
+    background: "white",
+    display: "inline-flex",
+    width: "100%",
+    borderRadius: "2px",
+    padding: `0 ${dimensionsPxToRem(36)}`,
+    border: `${borderPxToRem(1)} solid $border`,
+    alignItems: "center",
+    variants: {
+        disabled: {
+            true: {
+                background: "$inputDisabledBg",
+                color: "$inputDisabledText",
+            },
+        },
+        readOnly: {
+            true: {
+                color: "$inputDisabledText",
+            },
+        },
+        focused: {
+            true: {
+                borderColor: "$focusColor",
+            },
+        },
+    },
+};
+export { input, wrapper, };
+//# sourceMappingURL=Input.css.js.map

package/esm/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,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElF,MAAM,KAAK,GAAG;IACV,QAAQ,EAAE,iBAAiB,CAAC,GAAG,CAAC;IAChC,UAAU,EAAE,WAAW,CAAC,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;AAErB,MAAM,OAAO,GAAG;IACZ,UAAU,EAAE,OAAO;IACnB,OAAO,EAAE,aAAa;IACtB,KAAK,EAAE,MAAM;IACb,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,KAAK,iBAAiB,CAAC,EAAE,CAAC,EAAE;IACrC,MAAM,EAAE,GAAG,aAAa,CAAC,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;AAErB,OAAO,EACH,KAAK,EACL,OAAO,GACV,CAAC"}

package/esm/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/esm/components/form/input/Input.styled.js

@@ -1,52 +1,7 @@
-import { borderPxToRem, dimensionsPxToRem, fontPxToRem, styled } from "../../../theme.js";
-const StyledInput = styled("input", {
-    "height": dimensionsPxToRem(103),
-    "fontSize": fontPxToRem(34),
-    "color": "$text",
-    "border": "none",
-    "display": "block",
-    "width": "100%",
-    "background": "none",
-    "fontFamily": "inherit",
-    "padding": "1.2em 0",
-    "flex": 1,
-    "&::placeholder": {
-        color: "$sub",
-    },
-});
-const StyledWrapper = styled("div", {
-    background: "white",
-    display: "inline-flex",
-    width: "100%",
-    borderRadius: "2px",
-    padding: `0 ${dimensionsPxToRem(36)}`,
-    border: `${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",
-            },
-        },
-    },
-});
+import { dimensionsPxToRem, styled } from "../../../theme.js";
+import { input, wrapper } from "./Input.css.js";
+const StyledInput = styled("input", input);
+const StyledWrapper = styled("div", wrapper);
 const StyledPrefix = styled("div", {
     marginRight: dimensionsPxToRem(36),
     display: "flex",

package/esm/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,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE1F,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,EAAE;IAChC,QAAQ,EAAE,iBAAiB,CAAC,GAAG,CAAC;IAChC,UAAU,EAAE,WAAW,CAAC,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;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,EAAE;IAChC,UAAU,EAAE,OAAO;IACnB,OAAO,EAAE,aAAa;IACtB,KAAK,EAAE,MAAM;IACb,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,KAAK,iBAAiB,CAAC,EAAE,CAAC,EAAE;IACrC,MAAM,EAAE,GAAG,aAAa,CAAC,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;AAEH,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,EAAE;IAC/B,WAAW,EAAE,iBAAiB,CAAC,EAAE,CAAC;IAClC,OAAO,EAAE,MAAM;CAClB,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,EAAE;IAC/B,UAAU,EAAE,iBAAiB,CAAC,EAAE,CAAC;IACjC,OAAO,EAAE,MAAM;CAClB,CAAC,CAAC;AAEH,OAAO,EACH,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,GACf,CAAC"}
+{"version":3,"file":"Input.styled.js","sourceRoot":"","sources":["../../../../src/components/form/input/Input.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEhD,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAE3C,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAE7C,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,EAAE;IAC/B,WAAW,EAAE,iBAAiB,CAAC,EAAE,CAAC;IAClC,OAAO,EAAE,MAAM;CAClB,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,EAAE;IAC/B,UAAU,EAAE,iBAAiB,CAAC,EAAE,CAAC;IACjC,OAAO,EAAE,MAAM;CAClB,CAAC,CAAC;AAEH,OAAO,EACH,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,GACf,CAAC"}

package/esm/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/esm/components/form/textarea/TextArea.js

@@ -0,0 +1,16 @@
+import React, { useCallback, useState } from "react";
+import { StyledTextArea } from "./TextArea.styled";
+const TextArea = ({ children, onFocus, onBlur, ...props }) => {
+    const [focused, setFocused] = useState(false);
+    const handleFocus = useCallback((e) => {
+        setFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    }, [onFocus]);
+    const handleBlur = useCallback((e) => {
+        setFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    }, [onBlur]);
+    return (React.createElement(StyledTextArea, { ...props, disabled: Boolean(props.disabled), readOnly: Boolean(props.readOnly), focused: focused, onFocus: handleFocus, onBlur: handleBlur }));
+};
+export { TextArea, };
+//# sourceMappingURL=TextArea.js.map

package/esm/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,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAMnD,MAAM,QAAQ,GAAwE,CAAC,EACnF,QAAQ,EACR,OAAO,EAAE,MAAM,EACf,GAAG,KAAK,EACX,EAAE,EAAE;IACD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,WAAW,CAAC,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,WAAW,CAAC,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,oBAAC,cAAc,OACP,KAAK,EACT,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,GACpB,CACL,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EACH,QAAQ,GACX,CAAC"}

package/esm/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/esm/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/esm/components/form/textarea/TextArea.stories.js

@@ -0,0 +1,12 @@
+import { TextArea } from "./TextArea.js";
+const meta = {
+    title: "Components/Form/TextArea",
+    component: TextArea,
+    tags: ["autodocs", "form"],
+};
+const Primary = {
+    args: {},
+};
+export { Primary, };
+export default meta;
+//# sourceMappingURL=TextArea.stories.js.map

package/esm/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,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE,EAAE;CACX,CAAC;AAEF,OAAO,EACH,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/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/esm/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/esm/components/form/textarea/TextArea.styled.js

@@ -0,0 +1,14 @@
+import { dimensionsPxToRem, styled } from "../../../theme.js";
+import { input, wrapper } from "../input/Input.css";
+import { miuiScrollbars } from "../../../scrollbars.css";
+const StyledTextArea = styled("textarea", {
+    ...miuiScrollbars,
+    ...input,
+    ...wrapper,
+    padding: `1.2em ${dimensionsPxToRem(36)}`,
+    height: "unset",
+    resize: "vertical",
+    minHeight: dimensionsPxToRem(103),
+});
+export { StyledTextArea, };
+//# sourceMappingURL=TextArea.styled.js.map

package/esm/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,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzD,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,EAAE;IACtC,GAAG,cAAc;IACjB,GAAG,KAAK;IACR,GAAG,OAAO;IAEV,OAAO,EAAE,SAAS,iBAAiB,CAAC,EAAE,CAAC,EAAE;IACzC,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,UAAU;IAClB,SAAS,EAAE,iBAAiB,CAAC,GAAG,CAAC;CAEpC,CAAC,CAAC;AAEH,OAAO,EACH,cAAc,GACjB,CAAC"}

package/esm/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/esm/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/esm/index.js

@@ -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 { getCssText, styled } from "./theme.js";
 export { cssReset } from "./theme.css-reset.js";
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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;AAI7C,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","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;AAIpC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC"}

package/esm/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/esm/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/esm/scrollbars.css.js

@@ -0,0 +1,49 @@
+import { pxToRem } from "./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: pxToRem(7),
+        width: pxToRem(7),
+        backgroundColor: "transparent",
+        borderRadius: pxToRem(7),
+    },
+    "&::-webkit-scrollbar-thumb:vertical": {
+        ...thumbStyle,
+        "minHeight": pxToRem(10),
+        "marginRight": pxToRem(2),
+        "&:active": {
+            ...thumbActive,
+            minHeight: pxToRem(8),
+            marginRight: pxToRem(4),
+        },
+    },
+    "&::-webkit-scrollbar-thumb:horizontal": {
+        ...thumbStyle,
+        "minWidth": pxToRem(10),
+        "marginBottom": pxToRem(2),
+        "&:active": {
+            ...thumbActive,
+            minWidth: pxToRem(8),
+            marginBottom: pxToRem(4),
+        },
+    },
+    "&::-webkit-scrollbar-corner": {
+        backgroundColor: "transparent",
+    },
+};
+export { miuiScrollbars };
+//# sourceMappingURL=scrollbars.css.js.map

package/esm/scrollbars.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbars.css.js","sourceRoot":"","sources":["../src/scrollbars.css.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;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,OAAO,CAAC,CAAC,CAAC;QAClB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;QACjB,eAAe,EAAE,aAAa;QAC9B,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;KAC3B;IACD,qCAAqC,EAAE;QACnC,GAAG,UAAU;QACb,WAAW,EAAE,OAAO,CAAC,EAAE,CAAC;QACxB,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;QACzB,UAAU,EAAE;YACR,GAAG,WAAW;YACd,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;YACrB,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;SAC1B;KACJ;IACD,uCAAuC,EAAE;QACrC,GAAG,UAAU;QACb,UAAU,EAAE,OAAO,CAAC,EAAE,CAAC;QACvB,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC;QAC1B,UAAU,EAAE;YACR,GAAG,WAAW;YACd,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;YACpB,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;SAC3B;KACJ;IACD,6BAA6B,EAAE;QAC3B,eAAe,EAAE,aAAa;KACjC;CACJ,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/esm/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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {

package/src/components/form/input/Input.css.ts

@@ -0,0 +1,58 @@
+import type { ThemeCSS } from "../../../theme";
+
+import { dimensionsPxToRem, fontPxToRem, borderPxToRem } from "../../../theme.js";
+
+const input = {
+    "height": dimensionsPxToRem(103),
+    "fontSize": 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",
+    },
+} satisfies ThemeCSS;
+
+const wrapper = {
+    background: "white",
+    display: "inline-flex",
+    width: "100%",
+    borderRadius: "2px",
+    padding: `0 ${dimensionsPxToRem(36)}`,
+    border: `${borderPxToRem(1)} solid $border`,
+    alignItems: "center",
+
+    variants: {
+        disabled: {
+            true: {
+                background: "$inputDisabledBg",
+                color: "$inputDisabledText",
+            },
+        },
+        readOnly: {
+            true: {
+                color: "$inputDisabledText",
+            },
+        },
+        focused: {
+            true: {
+                borderColor: "$focusColor",
+            },
+        },
+    },
+} satisfies ThemeCSS;
+
+export {
+    input,
+    wrapper,
+};

package/src/components/form/input/Input.styled.ts

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

package/src/components/form/textarea/TextArea.stories.tsx

@@ -0,0 +1,21 @@
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { TextArea } from "./TextArea.js";
+
+const meta: Meta = {
+    title: "Components/Form/TextArea",
+    component: TextArea,
+    tags: ["autodocs", "form"],
+};
+
+type Story = StoryObj<typeof TextArea>;
+
+const Primary: Story = {
+    args: {},
+};
+
+export {
+    Primary,
+};
+
+export default meta;

package/src/components/form/textarea/TextArea.styled.ts

@@ -0,0 +1,19 @@
+import { dimensionsPxToRem, styled } from "../../../theme.js";
+import { input, wrapper } from "../input/Input.css";
+import { miuiScrollbars } from "../../../scrollbars.css";
+
+const StyledTextArea = styled("textarea", {
+    ...miuiScrollbars,
+    ...input,
+    ...wrapper,
+
+    padding: `1.2em ${dimensionsPxToRem(36)}`,
+    height: "unset",
+    resize: "vertical",
+    minHeight: dimensionsPxToRem(103),
+
+});
+
+export {
+    StyledTextArea,
+};