react-miui 0.28.0 → 0.28.2

package/esm/components/utils/Spacer.d.ts

@@ -1,6 +1,85 @@
-import React from "react";
-interface Props {
-}
-declare const Spacer: React.FC<Props>;
+declare const Spacer: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    colors: {
+        background: "white";
+        mainColor: "#008ad2";
+        mainColorAlt: "#006AA9";
+        activeBg: "#e7e7e7";
+        inactiveBg: "#d3d3de";
+        inactiveDarkBg: "#999";
+        toggleHandleBg: "#e0e0e0";
+        toggleHandleBorder: "#cdcdcd";
+        toggleBgDisabled: "#f0f0f0";
+        toggleHandleBorderDisabled: "#c29f7d";
+        toggleHandleBgDisabled: "#deae84";
+        icon: "#636363";
+        border: "#d5d5d5";
+        buttonBorder: "#bababa";
+        headerBorder: "#c8c8c9";
+        headerBg: "#efeff0";
+        headerText: "#484848";
+        text: "#323232";
+        sub: "#959595";
+        popText: "#666";
+        toolbarBorder: "#ababab";
+        toolbarBg: "#f8f8f8";
+        modalBg: "#f7f7f7";
+        modalButtonBg: "#f8f8f8";
+        modalButtonBorder: "#c2c2c2";
+        inputDisabledBg: "#f3f3f3";
+        inputDisabledText: "#959595";
+        choiceBg: "#ffffff";
+        choiceText: "#999999";
+        choiceActiveBg: "#f3f3f3";
+        choiceActiveText: "#313131";
+        choiceBorder: "#cfcfcf";
+        selectorText: "#606060";
+        selectorActive: "#008ad2";
+        blue1: "#038bf4";
+        blue2: "#b7d6f5";
+        blue3: "#dbe6ff";
+        blue4: "#33b4ff";
+        blue5: "#30a2e6";
+        orange1: "#ff7200";
+        orange1Darker: "#cc5b00";
+        purple1: "#7357e8";
+        green1: "#3ec234";
+        green1Darker: "#38af2f";
+        pink1: "#ff388f";
+        red1: "#ea2700";
+        yellow1: "#ffde9d";
+        yellow2: "#e4a429";
+        yellow3: "#fff5db";
+        pinky1: "#f5c0b7";
+        pinky2: "#e07b67";
+        pinky3: "#ffe1db";
+        grey1: "#737373";
+        focusColor: "#dcaf00";
+        scrollbarsThumb: "#737373";
+        scrollbarsBg: "transparent";
+        tableStripedBg: "#fafafa";
+        toolButtonText: "#666e80";
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    mx: (value: string | number) => {
+        marginLeft: string | number;
+        marginRight: string | number;
+    };
+    my: (value: string | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
+    };
+    px: (value: string | number) => {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    py: (value: string | number) => {
+        paddingTop: string | number;
+        paddingBottom: string | number;
+    };
+    size: (value: string | number) => {
+        width: string | number;
+        height: string | number;
+    };
+}>>;
 export { Spacer };
 //# sourceMappingURL=Spacer.d.ts.map

package/esm/components/utils/Spacer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,KAAK;CAAG;AAElB,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAE3B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Spacer.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Spacer.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAA6B,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/components/utils/Spacer.js

@@ -1,7 +1,4 @@
-import React from "react";
-import styles from "./Spacer.module.scss";
-const Spacer = (props) => {
-    return React.createElement("div", { className: styles.spacer });
-};
+import { styled } from "../../theme.js";
+const Spacer = styled("div", { flex: 1 });
 export { Spacer };
 //# sourceMappingURL=Spacer.js.map

package/esm/components/utils/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../../src/components/utils/Spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAI1C,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,OAAO,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,GAAI,CAAC;AAC7C,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../../src/components/utils/Spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/components/utils/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/components/utils/colors.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,aAAa,GAAI,KAAK,MAAM,0BAOjC,CAAC;AAEF,QAAA,MAAM,WAAW,GAAI,KAAK,MAAM,WAK/B,CAAC;AAEF,OAAO,EACH,aAAa,EACb,WAAW,GACd,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/components/utils/colors.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,aAAa,GAAI,KAAK,MAAM,0BAOjC,CAAC;AAEF,QAAA,MAAM,WAAW,GAAI,KAAK,MAAM,WAK/B,CAAC;AAEF,OAAO,EACH,aAAa,EACb,WAAW,GACd,CAAC"}

package/esm/components/utils/colors.js

@@ -2,7 +2,7 @@ const contrastColor = (hex) => {
     const r = parseInt(hex.substring(1, 3), 16);
     const g = parseInt(hex.substring(3, 5), 16);
     const b = parseInt(hex.substring(5, 7), 16);
-    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+    const brightness = ((r * 299) + (g * 587) + (b * 114)) / 1000;
     return brightness > 128 ? "#000000" : "#FFFFFF";
 };
 const invertColor = (hex) => {

package/esm/components/utils/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/components/utils/colors.ts"],"names":[],"mappings":"AAEA,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE;IAClC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC5C,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC5C,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAE5C,MAAM,UAAU,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;IACxD,OAAO,UAAU,GAAG,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;AACpD,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE;IAChC,MAAM,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAClD,OAAO,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9E,CAAC,CAAC;AAEF,OAAO,EACH,aAAa,EACb,WAAW,GACd,CAAC"}
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/components/utils/colors.ts"],"names":[],"mappings":"AAIA,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE;IAClC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC5C,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC5C,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAE5C,MAAM,UAAU,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9D,OAAO,UAAU,GAAG,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;AACpD,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE;IAChC,MAAM,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAClD,OAAO,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9E,CAAC,CAAC;AAEF,OAAO,EACH,aAAa,EACb,WAAW,GACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.28.0",
+  "version": "0.28.2",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "exports": {

package/src/components/form/ColorPicker.tsx

@@ -39,9 +39,9 @@ const ColorPicker: React.FC<Props> = ({
         ...(value.startsWith("#") ? { color: contrastColor(value) } : {}),
     };
 
-    const wrapperProps: { css?: NonNullable<typeof css>; className?: typeof className } = {
-        className: className,
-    };
+    const wrapperProps: {
+        css?: NonNullable<typeof css>; className?: typeof className;
+    } = { className };
     if (css) {
         wrapperProps.css = css;
     }

package/src/components/form/Label.styled.ts

@@ -24,4 +24,4 @@ const StyledText = styled("div", {
 export {
     StyledLabel,
     StyledText,
-}; 
+};

package/src/components/form/choice/Choice.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import type { ObjectValue, Value } from "../../../types/form";
 
-import { makeVariants, toObjectValue } from "../../../utils/index";
+import { toObjectValue } from "../../../utils/index";
 
 import { ChoiceItem } from "./ChoiceItem";
 import { StyledChoice } from "./Choice.styled";
@@ -11,20 +11,20 @@ type Variant = "wide" | "left";
 
 type StyledProps = React.ComponentProps<typeof StyledChoice>;
 
-type Props<T extends string> = Omit<StyledProps, "onChange"> & {
-    values: Value<T>[];
+type Props = Omit<StyledProps, "onChange"> & {
+    values: Value<string>[];
     value: string;
     name: string;
-    onChange: (value: Exclude<Value<T>, ObjectValue>) => void;
+    onChange: (value: Exclude<Value<string>, ObjectValue>) => void;
     variant?: Variant | Variant[];
 };
 
 // @TODO handle disabled / readonly!
 
-const Choice = <T extends string>({
+const Choice: React.FC<Props> = ({
     // eslint-disable-next-line @typescript-eslint/no-shadow
     value, values, name, onChange, ...props
-}: Props<T>): ReturnType<React.FC<Props<T>>> => {
+}) => {
     const opts = values.map(option => {
         const opt = toObjectValue(option);
         return (

package/src/components/form/input/Input.stories.tsx

@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useCallback } from "react";
 
 import type { StoryObj, Meta } from "@storybook/react";
 
 import { Icon, ICON } from "../../icons/Icon";
 import { countries } from "../../../demo/components/form/countries.const";
+import { Button } from "../../ui/button/Button";
 
 import { Input } from "./Input";
 
@@ -52,8 +53,27 @@ const Mixed: Story = {
     ),
 };
 
+const InputRef: Story = {
+    render: () => {
+        const ref = React.useRef<HTMLInputElement>(null);
+
+        const handleRandomValue = useCallback(() => {
+            if (ref.current) {
+                ref.current.value = (Math.random() * 100).toFixed(2);
+            }
+        }, []);
+
+        return (
+            <>
+                <Input ref={ref} placeholder={"Capacity"} prefix={<Icon name={ICON.battery} />} suffix={"kWh"} />
+                <Button onClick={handleRandomValue}>Set random value</Button>
+            </>
+        );
+    },
+};
+
 export {
-    Primary, Mixed,
+    Primary, Mixed, InputRef,
 };
 
 export default meta;

package/src/components/form/input/Input.tsx

@@ -20,7 +20,7 @@ type Props<T extends string> = Omit<React.InputHTMLAttributes<HTMLInputElement>,
 /**
  * Input component.
  */
-const Input = <T extends string>({ // eslint-disable-line max-lines-per-function
+const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-function
     className, children,
     prefix, suffix,
     onFocus, onBlur, onKeyDown, onChange,
@@ -28,7 +28,7 @@ const Input = <T extends string>({ // eslint-disable-line max-lines-per-function
     onSuggestionMatch,
     error,
     ...props
-}: Props<T>): ReturnType<React.FC<Props<T>>> => {
+}: Props<T>, ref: React.Ref<HTMLInputElement>) => {
     const [focused, setFocused] = useState(false);
     const suggestionsId = useId();
     const [info] = useState<{ picked?: boolean }>({});
@@ -88,6 +88,7 @@ const Input = <T extends string>({ // eslint-disable-line max-lines-per-function
         >
             {prefixElem}
             <StyledInput
+                ref={ref}
                 {...props}
                 {...extraProps}
                 onChange={handleChange}
@@ -102,6 +103,11 @@ const Input = <T extends string>({ // eslint-disable-line max-lines-per-function
     );
 };
 
+// Forward ref wrapper for Input
+const Input = React.forwardRef(InputInner) as <T extends string>(
+    props: Props<T> & React.RefAttributes<HTMLInputElement>
+) => JSX.Element;
+
 export {
     Input,
 };

package/src/components/ui/pop/Pop.stories.tsx

@@ -31,7 +31,6 @@ const handleClick = () => {
 };
 
 const Primary: Story = {
-    // eslint-disable-next-line max-lines-per-function
     render: (args) => {
         // eslint-disable-next-line @typescript-eslint/no-shadow
         const [open, setOpen] = useState(false);

package/src/components/utils/Spacer.tsx

@@ -1,11 +1,5 @@
-import React from "react";
+import { styled } from "../../theme";
 
-import styles from "./Spacer.module.scss";
-
-interface Props {}
-
-const Spacer: React.FC<Props> = (props) => {
-    return <div className={styles.spacer} />;
-};
+const Spacer = styled("div", { flex: 1 });
 
 export { Spacer };

package/src/components/utils/colors.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+
 // TODO move to some ezez lib
 
 const contrastColor = (hex: string) => {
@@ -5,7 +7,7 @@ const contrastColor = (hex: string) => {
     const g = parseInt(hex.substring(3, 5), 16);
     const b = parseInt(hex.substring(5, 7), 16);
     // Perceived brightness
-    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+    const brightness = ((r * 299) + (g * 587) + (b * 114)) / 1000;
     return brightness > 128 ? "#000000" : "#FFFFFF";
 };
 

package/src/demo/Main.tsx

@@ -47,7 +47,7 @@ const getComponentByHash = (hash: string): ComponentInfo | null => {
 const values: BG[] = ["white", "transparent", "mobile"];
 
 const Main: React.FC = (props) => {
-    const [bg, handleBgChange] = useState<BG>("white");
+    const [bg, handleBgChange] = useState<string>("white");
 
     const hash = safeUseHash();
     const hashWithoutHash = hash.substr(1);

package/dist/components/utils/Spacer.module.scss

@@ -1,3 +0,0 @@
-.spacer {
-    flex: 1;
-}

package/esm/components/utils/Spacer.module.scss

@@ -1,3 +0,0 @@
-.spacer {
-    flex: 1;
-}

package/src/components/form/choice/Choice.js

@@ -1,32 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Choice = void 0;
-var react_1 = require("react");
-var index_1 = require("../../../utils/index");
-var ChoiceItem_1 = require("./ChoiceItem");
-var Choice_styled_1 = require("./Choice.styled");
-// @TODO handle disabled / readonly!
-var Choice = function (_a) {
-    var 
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    value = _a.value, values = _a.values, name = _a.name, onChange = _a.onChange, props = __rest(_a, ["value", "values", "name", "onChange"]);
-    var opts = values.map(function (option) {
-        var opt = (0, index_1.toObjectValue)(option);
-        return (<ChoiceItem_1.ChoiceItem key={opt.value} name={name} value={opt} onChange={onChange} active={value === opt.value}/>);
-    });
-    return (<Choice_styled_1.StyledChoice {...props}>
-            {opts}
-        </Choice_styled_1.StyledChoice>);
-};
-exports.Choice = Choice;

package/src/components/form/choice/Choice.styled.js

@@ -1,65 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledChoice = void 0;
-var theme_1 = require("../../../theme");
-var StyledChoice = (0, theme_1.styled)("div", {
-    "--choice-bg": "$colors$choiceBg",
-    "--choice-text": "$colors$choiceText",
-    "--choice-active-bg": "$colors$choiceActiveBg",
-    "--choice-active-text": "$colors$choiceActiveText",
-    "--choice-border": "$colors$choiceBorder",
-    "input": {
-        "width": 0,
-        "height": 0,
-        "overflow": "hidden",
-        "opacity": 0,
-        "margin": 0,
-        "position": "absolute",
-        "&:checked + span": {
-            color: "var(--choice-active-text)",
-            background: "var(--choice-active-bg)",
-        },
-    },
-    "span": {
-        display: "flex",
-        padding: "0 1em",
-        flex: 1,
-        height: "100%",
-        alignItems: "center",
-        justifyContent: "center",
-        fontSize: (0, theme_1.fontPxToRem)(24),
-        color: "var(--choice-text)",
-        background: "var(--choice-bg)",
-        whiteSpace: "nowrap",
-    },
-    "display": "flex",
-    "border": "1px solid var(--choice-border)",
-    "position": "relative",
-    "borderRadius": "8px",
-    "overflow": "hidden",
-    "width": "max-content",
-    "marginLeft": "auto",
-    "marginRight": "auto",
-    "label": {
-        "flex": 1,
-        "height": (0, theme_1.dimensionsPxToRem)(89),
-        "display": "flex",
-        "+ label": {
-            borderLeft: "1px solid var(--choice-border)",
-        },
-    },
-    "variants": {
-        wide: {
-            true: {
-                width: "100%",
-            },
-        },
-        unaligned: {
-            true: {
-                marginLeft: "unset",
-                marginRight: "unset",
-            },
-        },
-    },
-});
-exports.StyledChoice = StyledChoice;

package/src/components/utils/Spacer.module.scss

@@ -1,3 +0,0 @@
-.spacer {
-    flex: 1;
-}

package/src/theme.js

@@ -1,98 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.fontPxToRem = exports.borderPxToRem = exports.dimensionsPxToRem = exports.pxToRem = exports.config = exports.createTheme = exports.theme = exports.getCssText = exports.keyframes = exports.globalCss = exports.css = exports.styled = void 0;
-var react_1 = require("@stitches/react");
-var RATIOS = {
-    dimensions: 3,
-    border: 1,
-    font: 1.666666,
-};
-// eslint-disable-next-line @typescript-eslint/no-magic-numbers
-var pxToRem = function (px) { return "".concat(px / 16, "rem"); };
-exports.pxToRem = pxToRem;
-var dimensionsPxToRem = function (px) { return pxToRem(px / RATIOS.dimensions); };
-exports.dimensionsPxToRem = dimensionsPxToRem;
-var borderPxToRem = function (px) { return pxToRem(px / RATIOS.border); };
-exports.borderPxToRem = borderPxToRem;
-var fontPxToRem = function (px) { return pxToRem(px / RATIOS.font); };
-exports.fontPxToRem = fontPxToRem;
-var _a = (0, react_1.createStitches)({
-    theme: {
-        colors: {
-            background: "white",
-            mainColor: "#008ad2",
-            mainColorAlt: "#006AA9",
-            activeBg: "#e7e7e7",
-            inactiveBg: "#d3d3de",
-            inactiveDarkBg: "#999",
-            toggleHandleBg: "#e0e0e0",
-            toggleHandleBorder: "#cdcdcd",
-            toggleBgDisabled: "#f0f0f0",
-            toggleHandleBorderDisabled: "#c29f7d",
-            toggleHandleBgDisabled: "#deae84",
-            icon: "#636363",
-            border: "#d5d5d5",
-            buttonBorder: "#bababa",
-            headerBorder: "#c8c8c9",
-            headerBg: "#efeff0",
-            headerText: "#484848",
-            text: "#323232",
-            sub: "#959595",
-            popText: "#666",
-            toolbarBorder: "#ababab",
-            toolbarBg: "#f8f8f8",
-            modalBg: "#f7f7f7",
-            modalButtonBg: "#f8f8f8",
-            modalButtonBorder: "#c2c2c2",
-            inputDisabledBg: "#f3f3f3",
-            inputDisabledText: "#959595",
-            choiceBg: "#ffffff",
-            choiceText: "#999999",
-            choiceActiveBg: "#f3f3f3",
-            choiceActiveText: "#313131",
-            choiceBorder: "#cfcfcf",
-            selectorText: "#606060",
-            selectorActive: "#008ad2",
-            // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
-            blue1: "#038bf4",
-            blue2: "#b7d6f5",
-            blue3: "#dbe6ff",
-            blue4: "#33b4ff",
-            blue5: "#30a2e6",
-            orange1: "#ff7200",
-            orange1Darker: "#cc5b00",
-            purple1: "#7357e8",
-            green1: "#3ec234",
-            green1Darker: "#38af2f",
-            pink1: "#ff388f",
-            red1: "#ea2700",
-            yellow1: "#ffde9d",
-            yellow2: "#e4a429",
-            yellow3: "#fff5db",
-            pinky1: "#f5c0b7",
-            pinky2: "#e07b67",
-            pinky3: "#ffe1db",
-            grey1: "#737373",
-            focusColor: "#dcaf00",
-            scrollbarsThumb: "#737373",
-            scrollbarsBg: "transparent",
-            tableStripedBg: "#fafafa",
-            toolButtonText: "#666e80",
-        },
-    },
-    utils: {
-        mx: function (value) { return ({ marginLeft: value, marginRight: value }); },
-        my: function (value) { return ({ marginTop: value, marginBottom: value }); },
-        px: function (value) { return ({ paddingLeft: value, paddingRight: value }); },
-        py: function (value) { return ({ paddingTop: value, paddingBottom: value }); },
-        size: function (value) { return ({ width: value, height: value }); },
-    },
-}), styled = _a.styled, css = _a.css, globalCss = _a.globalCss, keyframes = _a.keyframes, getCssText = _a.getCssText, theme = _a.theme, createTheme = _a.createTheme, config = _a.config;
-exports.styled = styled;
-exports.css = css;
-exports.globalCss = globalCss;
-exports.keyframes = keyframes;
-exports.getCssText = getCssText;
-exports.theme = theme;
-exports.createTheme = createTheme;
-exports.config = config;

package/src/types/form.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/src/utils/index.js

@@ -1,19 +0,0 @@
-"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("./makeVariants"), exports);
-__exportStar(require("./toObjectValue"), exports);
-__exportStar(require("./useKeyPress"), exports);

package/src/utils/makeVariants.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeVariants = void 0;
-var makeVariants = function (variants) {
-    if (!variants) {
-        return [];
-    }
-    if (typeof variants === "string") {
-        return variants.split(" ").filter(Boolean);
-    }
-    return variants;
-};
-exports.makeVariants = makeVariants;

package/src/utils/toObjectValue.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toObjectValue = void 0;
-var toObjectValue = function (s) {
-    return typeof s === "string" ? { value: s, label: s } : s;
-};
-exports.toObjectValue = toObjectValue;

package/src/utils/useKeyPress.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useKeyPress = void 0;
-var react_1 = require("react");
-var useKeyPress = function (targetKey) {
-    var _a = (0, react_1.useState)(false), keyPressed = _a[0], setKeyPressed = _a[1];
-    (0, react_1.useEffect)(function () {
-        var handleKeyDown = function (_a) {
-            var key = _a.key;
-            if (key === targetKey) {
-                setKeyPressed(true);
-            }
-        };
-        var handleKeyUp = function (_a) {
-            var key = _a.key;
-            if (key === targetKey) {
-                setKeyPressed(false);
-            }
-        };
-        window.addEventListener("keydown", handleKeyDown);
-        window.addEventListener("keyup", handleKeyUp);
-        return function () {
-            window.removeEventListener("keydown", handleKeyDown);
-            window.removeEventListener("keyup", handleKeyUp);
-        };
-    }, [targetKey]);
-    return keyPressed;
-};
-exports.useKeyPress = useKeyPress;