react-miui 0.18.1 → 0.20.0

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,15 +3,39 @@ 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.18.1]
+## [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
+### Fixed
+- incorrectly sized icons in headers
+- header with buttons demo page crashing
+### Breaking
+- `PopOption` expects ReactElement as icon now
+- you have to consume exported `getCssText` function to have proper styles with SSR
+### Dev
+- deps bump
+
+## [0.18.1] - 2021-02-09
 ### Fixed
 - importing the library
 
-## [0.18.0]
+## [0.18.0] - 2021-02-09
 ### Breaking
 - react 18.2 is now required
 
-## [0.17.3]
+## [0.17.3] - 2023-01-19
 ### Changed
 - all elements accepts `className` prop now
 ### Dev

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/TextArea.js

@@ -40,7 +40,7 @@ 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.module.scss"));
+const Input_module_scss_1 = __importDefault(require("./input/Input.module.scss"));
 const TextArea = (_a) => {
     var { className, children, onFocus, onBlur } = _a, props = __rest(_a, ["className", "children", "onFocus", "onBlur"]);
     const [focused, setFocused] = (0, react_1.useState)(false);

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/form/TextArea.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AAErD,4DAAoC;AAEpC,4EAAyC;AAMzC,MAAM,QAAQ,GAAwE,CAAC,EAItF,EAAE,EAAE;QAJkF,EACnF,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,MAAM,OAElB,EADM,KAAK,cAH2E,8CAItF,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,MAAM,GAAG,GAAG,IAAA,oBAAU,EAAC,2BAAM,CAAC,OAAO,EAAE;QACnC,CAAC,2BAAM,CAAC,cAAc,CAAC,EAAE,OAAO;KACnC,EAAE,2BAAM,CAAC,KAAK,EAAE,2BAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAE7C,OAAO,CACH,4DAAc,KAAK,IAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAI,CACpF,CAAC;AACN,CAAC,CAAC;AAGE,4BAAQ"}
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/form/TextArea.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AAErD,4DAAoC;AAEpC,kFAA+C;AAM/C,MAAM,QAAQ,GAAwE,CAAC,EAItF,EAAE,EAAE;QAJkF,EACnF,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,MAAM,OAElB,EADM,KAAK,cAH2E,8CAItF,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,MAAM,GAAG,GAAG,IAAA,oBAAU,EAAC,2BAAM,CAAC,OAAO,EAAE;QACnC,CAAC,2BAAM,CAAC,cAAc,CAAC,EAAE,OAAO;KACnC,EAAE,2BAAM,CAAC,KAAK,EAAE,2BAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAE7C,OAAO,CACH,4DAAc,KAAK,IAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAI,CACpF,CAAC;AACN,CAAC,CAAC;AAGE,4BAAQ"}

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

@@ -0,0 +1,2 @@
+export * from "./input/Input.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/components/form/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./input/Input.js"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/form/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,mDAAiC"}

package/dist/components/form/{Input.d.ts → input/Input.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ObjectValue, Value } from "../../types/form";
+import type { ObjectValue, Value } from "../../../types/form";
 interface CustomProps<T extends string> {
     children?: never;
     prefix?: React.ReactNode;

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

@@ -0,0 +1 @@
+{"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.js → input/Input.js}

@@ -39,14 +39,13 @@ 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 index_js_1 = require("../../utils/index.js");
-const Suggestions_js_1 = require("./Suggestions.js");
+const Suggestions_js_1 = require("../Suggestions.js");
 const Input_module_scss_1 = __importDefault(require("./Input.module.scss"));
+const Input_styled_1 = require("./Input.styled");
 const Input = (_a) => {
     var { className, children, prefix, suffix, onFocus, onBlur, onKeyDown, onChange, suggestions, onSuggestionMatch } = _a, props = __rest(_a, ["className", "children", "prefix", "suffix", "onFocus", "onBlur", "onKeyDown", "onChange", "suggestions", "onSuggestionMatch"]);
     const [focused, setFocused] = (0, react_1.useState)(false);
-    const suggestionsId = (0, index_js_1.useRandomId)();
+    const suggestionsId = (0, react_1.useId)();
     const [info] = (0, react_1.useState)({});
     const handleFocus = (0, react_1.useCallback)((e) => {
         setFocused(true);
@@ -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", 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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,7 @@
+.textarea {
+    padding: 1.2em calc(36px / var(--ratio-dimensions));
+    height: unset;
+    resize: vertical;
+    min-height: calc(103px * 3 / var(--ratio-dimensions))
+}
+

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

@@ -0,0 +1,294 @@
+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;
+        marginRight: string;
+    };
+    my: (value: string) => {
+        marginTop: string;
+        marginBottom: string;
+    };
+    size: (value: string) => {
+        width: string;
+        height: string;
+    };
+}>>;
+export { StyledInput, StyledWrapper, StyledPrefix, StyledSuffix, };
+//# sourceMappingURL=Input.styled.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,65 @@
+"use strict";
+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",
+    },
+});
+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",
+            },
+        },
+    },
+});
+exports.StyledWrapper = StyledWrapper;
+const StyledPrefix = (0, theme_js_1.styled)("div", {
+    marginRight: (0, theme_js_1.dimensionsPxToRem)(36),
+    display: "flex",
+});
+exports.StyledPrefix = StyledPrefix;
+const StyledSuffix = (0, theme_js_1.styled)("div", {
+    marginLeft: (0, theme_js_1.dimensionsPxToRem)(36),
+    display: "flex",
+});
+exports.StyledSuffix = StyledSuffix;
+//# sourceMappingURL=Input.styled.js.map

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

@@ -0,0 +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"}