react-miui 0.19.0 → 0.20.1

package/.storybook/main.ts

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

package/.storybook/preview.tsx

@@ -0,0 +1,28 @@
+import type { Preview } from "@storybook/react";
+import { cssReset } from "../src";
+
+const preview: Preview = {
+    parameters: {
+        actions: {argTypesRegex: "^on[A-Z].*"},
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/,
+            },
+        },
+    },
+    decorators: [
+        (Story) => (
+            <>
+                <style id={"miui-css-reset"} dangerouslySetInnerHTML={{__html: cssReset}}/>
+                <style>
+                    {`.docblock-argstable textarea[id] { box-sizing: content-box; }`}
+                </style>
+                <Story/>
+            </>
+        ),
+    ]
+
+};
+
+export default preview;

package/CHANGELOG.md

@@ -3,6 +3,27 @@ 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
+### Fixed
+- exported `ThemeCSS` type (Stitches CSS type)
+### Dev
+- nodemon moved to dev deps
+- added storybook
+- added `Message` storybook
+- added `Input` storybook
+- `Input` converted to stitches
+
 ## [0.19.0] - 2022-05-09
 ### Added
 - exported `styled` stitches library function, use this to properly style future components outside this lib

package/README.md

@@ -4,6 +4,8 @@ Old MIUI inspired design components for React. Breaking changes may happen until
 
 Usage:
 - Import `global.scss`
+- Import `cssReset` named export and include it in `<style>` tag
+- Import `getCssText` named export, call it and include result in `<style>` tag
 - Import any needed component from named exports
 
 Your bundler needs to handle scss files, including scss modules.

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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAI5D,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAO9D,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IACzB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,EAAE,wBAAwB,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1G;AAED,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;AAG5G,QAAA,MAAM,KAAK,8LA+EV,CAAC;AAEF,OAAO,EACH,KAAK,GACR,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAO9D,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IACzB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,EAAE,wBAAwB,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1G;AAED,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;AAK5G,QAAA,MAAM,KAAK,8LA8EV,CAAC;AAEF,OAAO,EACH,KAAK,GACR,CAAC"}

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

@@ -39,7 +39,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 const Suggestions_js_1 = require("../Suggestions.js");
 const Input_module_scss_1 = __importDefault(require("./Input.module.scss"));
 const Input_styled_1 = require("./Input.styled");
@@ -80,20 +79,15 @@ const Input = (_a) => {
         info.picked = false;
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
     }, [suggestions]);
-    const wrapperCls = (0, classnames_1.default)(Input_module_scss_1.default.wrapper, {
-        [Input_module_scss_1.default.wrapperFocused]: focused,
-        [Input_module_scss_1.default.disabled]: props.disabled,
-        [Input_module_scss_1.default.readOnly]: props.readOnly,
-    }, className);
-    const prefixElem = prefix ? react_1.default.createElement("div", { className: Input_module_scss_1.default.prefix }, prefix) : null;
-    const suffixElem = suffix ? react_1.default.createElement("div", { className: Input_module_scss_1.default.suffix }, suffix) : null;
+    const prefixElem = prefix ? react_1.default.createElement(Input_styled_1.StyledPrefix, null, prefix) : null;
+    const suffixElem = suffix ? react_1.default.createElement(Input_styled_1.StyledSuffix, null, suffix) : null;
     const extraProps = {};
     if (suggestions) {
         extraProps.list = suggestionsId;
     }
-    return (react_1.default.createElement("div", { className: wrapperCls },
+    return (react_1.default.createElement(Input_styled_1.StyledWrapper, { className: className, focused: Boolean(focused), disabled: Boolean(props.disabled), readOnly: Boolean(props.readOnly) },
         prefixElem,
-        react_1.default.createElement(Input_styled_1.InputStyled, Object.assign({}, props, extraProps, { onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, className: Input_module_scss_1.default.input })),
+        react_1.default.createElement(Input_styled_1.StyledInput, Object.assign({}, props, extraProps, { onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, className: Input_module_scss_1.default.input })),
         react_1.default.createElement(Suggestions_js_1.Suggestions, { id: suggestionsId, suggestions: suggestions }),
         suffixElem));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/form/input/Input.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/form/input/Input.tsx"],"names":[],"mappings":"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"}

package/dist/components/form/input/Input.module.scss

@@ -1,52 +1,3 @@
-.input {
-    box-sizing: border-box;
-    height: calc(103px / var(--ratio-dimensions));
-    font-size: calc(34 / var(--ratio-font));
-    color: var(--text);
-    border: none;
-    display: block;
-    width: 100%;
-    background: none;
-    font-family: inherit;
-    padding: 1.2em 0;
-
-    &::placeholder {
-        color: var(--sub);
-    }
-}
-
-.wrapper {
-    background: white;
-    display: inline-flex;
-    width: 100%;
-    box-sizing: border-box;
-    border-radius: 2px;
-    padding: 0 calc(36px / var(--ratio-dimensions));
-    border: calc(1px / var(--ratio-border)) solid var(--border);
-    align-items: center;
-
-    .input {
-        flex: 1;
-    }
-
-    &.disabled {
-        background: var(--input-disabled-bg);
-        color: var(--input-disabled-text);
-
-        .input {
-            color: var(--input-disabled-text);
-        }
-    }
-
-    &.readOnly {
-        color: var(--input-disabled-text);
-
-        .input {
-            color: var(--input-disabled-text);
-        }
-    }
-}
-
 .textarea {
     padding: 1.2em calc(36px / var(--ratio-dimensions));
     height: unset;
@@ -54,16 +5,3 @@
     min-height: calc(103px * 3 / var(--ratio-dimensions))
 }
 
-.prefix {
-    margin-right: calc(36px / var(--ratio-dimensions));
-    display: flex;
-}
-
-.suffix {
-    margin-left: calc(36px / var(--ratio-dimensions));
-    display: flex;
-}
-
-.wrapperFocused {
-    border-color: var(--focus-color);
-}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input/Input.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAY5B,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,QAAA,MAAM,OAAO,EAAE,KAMd,CAAC;AAMF,QAAA,MAAM,KAAK,EAAE,KAeZ,CAAC;AAEF,OAAO,EACH,OAAO,EAAE,KAAK,GACjB,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mixed = exports.Primary = void 0;
+const react_1 = __importDefault(require("react"));
+const Icon_js_1 = require("../../icons/Icon.js");
+const countries_const_1 = require("../../../demo/components/form/countries.const");
+const Input_js_1 = require("./Input.js");
+const meta = {
+    title: "Components/Form/Input",
+    component: Input_js_1.Input,
+    tags: ["autodocs", "form"],
+    argTypes: {
+        prefix: {
+            type: "string",
+        },
+        suffix: {
+            type: "string",
+        },
+    },
+};
+const Primary = {
+    args: {
+        placeholder: "Capacity",
+        prefix: react_1.default.createElement(Icon_js_1.Icon, { name: Icon_js_1.ICON.battery }),
+        suffix: "kWh",
+    },
+};
+exports.Primary = Primary;
+const handleSuggestionMatch = (s, picked) => {
+    alert("Suggestion " + (picked ? "picked" : "matched") + " : " + s);
+};
+const Mixed = {
+    render: () => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Input_js_1.Input, { placeholder: "Capacity", prefix: react_1.default.createElement(Icon_js_1.Icon, { name: Icon_js_1.ICON.battery }), suffix: "kWh" }),
+        react_1.default.createElement(Input_js_1.Input, { value: "William J. Welter" }),
+        react_1.default.createElement(Input_js_1.Input, { prefix: "Text prefix", value: "Polly W. Wilson" }),
+        react_1.default.createElement(Input_js_1.Input, { prefix: "Disabled", value: "Clayton J. Foster", disabled: true }),
+        react_1.default.createElement(Input_js_1.Input, { prefix: "Read only", value: "Norma J. Gomez", readOnly: true }),
+        react_1.default.createElement(Input_js_1.Input, { placeholder: "With suggestions, try country name", suggestions: countries_const_1.countries, onSuggestionMatch: handleSuggestionMatch }))),
+};
+exports.Mixed = Mixed;
+exports.default = meta;
+//# sourceMappingURL=Input.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../../src/components/form/input/Input.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAI1B,iDAAiD;AACjD,mFAA0E;AAE1E,yCAAmC;AAEnC,MAAM,IAAI,GAAuB;IAC7B,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAK;IAChB,IAAI,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE;QACN,MAAM,EAAE;YACJ,IAAI,EAAE,QAAQ;SACjB;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,QAAQ;SACjB;KACJ;CACJ,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE;QACF,WAAW,EAAE,UAAU;QACvB,MAAM,EAAE,8BAAC,cAAI,IAAC,IAAI,EAAE,cAAI,CAAC,OAAO,GAAI;QACpC,MAAM,EAAE,KAAK;KAChB;CACJ,CAAC;AAwBE,0BAAO;AAtBX,MAAM,qBAAqB,GAAG,CAAC,CAAS,EAAE,MAAe,EAAE,EAAE;IACzD,KAAK,CAAC,aAAa,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC;AACvE,CAAC,CAAC;AAEF,MAAM,KAAK,GAAU;IACjB,MAAM,EAAE,GAAG,EAAE,CAAC,CACV;QACI,8BAAC,gBAAK,IAAC,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,8BAAC,cAAI,IAAC,IAAI,EAAE,cAAI,CAAC,OAAO,GAAI,EAAE,MAAM,EAAE,KAAK,GAAI;QACvF,8BAAC,gBAAK,IAAC,KAAK,EAAE,mBAAmB,GAAI;QACrC,8BAAC,gBAAK,IAAC,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,iBAAiB,GAAI;QAC1D,8BAAC,gBAAK,IAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,IAAI,GAAI;QACzE,8BAAC,gBAAK,IAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,IAAI,GAAI;QACvE,8BAAC,gBAAK,IACF,WAAW,EAAE,oCAAoC,EACjD,WAAW,EAAE,2BAAS,EACtB,iBAAiB,EAAE,qBAAqB,GAC1C,CACH,CACN;CACJ,CAAC;AAGW,sBAAK;AAGlB,kBAAe,IAAI,CAAC"}

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

@@ -1,5 +1,281 @@
-declare const InputStyled: import("@stitches/react/types/styled-component.js").StyledComponent<"input", {}, {}, import("@stitches/react/types/css-util.js").CSS<{}, {
-    colors: unknown;
+declare const StyledInput: import("@stitches/react/types/styled-component.js").StyledComponent<"input", {}, {}, 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;
+    };
+}>>;
+declare const StyledWrapper: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {
+    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;
+    };
+}>>;
+declare const StyledPrefix: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {}, {}, 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;
+    };
+}>>;
+declare const StyledSuffix: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {}, {}, 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;
@@ -14,5 +290,5 @@ declare const InputStyled: import("@stitches/react/types/styled-component.js").S
         height: string;
     };
 }>>;
-export { InputStyled, };
+export { StyledInput, StyledWrapper, StyledPrefix, StyledSuffix, };
 //# sourceMappingURL=Input.styled.d.ts.map