react-miui 0.27.10 → 0.28.0

package/esm/components/form/Toggle.styled.d.ts

@@ -0,0 +1,170 @@
+declare const StyledToggle: 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;
+    };
+}>>;
+declare const StyledContainer: import("@stitches/react/types/styled-component").StyledComponent<"label", {
+    disabled?: boolean | "true";
+}, {}, 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 { StyledContainer, StyledToggle, };
+//# sourceMappingURL=Toggle.styled.d.ts.map

package/esm/components/form/Toggle.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.styled.d.ts","sourceRoot":"","sources":["../../../src/components/form/Toggle.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUhB,CAAC;AAEH,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CnB,CAAC;AAEH,OAAO,EACH,eAAe,EACf,YAAY,GACf,CAAC"}

package/esm/components/form/Toggle.styled.js

@@ -0,0 +1,54 @@
+import { styled, dimensionsPxToRem, borderPxToRem } from "../../theme.js";
+const StyledToggle = styled("div", {
+    boxSizing: "border-box",
+    borderRadius: "100px",
+    display: "inline-block",
+    width: dimensionsPxToRem(44),
+    height: dimensionsPxToRem(44),
+    border: `${borderPxToRem(1)} solid $orange1Darker`,
+    background: "$orange1",
+    transition: "transform 200ms, background-color 200ms, border-color 200ms",
+    transform: `translateX(${dimensionsPxToRem(48)})`,
+});
+const StyledContainer = styled("label", {
+    "display": "inline-flex",
+    "alignItems": "center",
+    "border": "1px solid #ccc",
+    "borderRadius": "100px",
+    "position": "relative",
+    "lineHeight": 0,
+    "width": dimensionsPxToRem(110),
+    "height": dimensionsPxToRem(62),
+    "paddingLeft": dimensionsPxToRem(8),
+    "boxSizing": "border-box",
+    "& input": {
+        position: "absolute",
+        width: 0,
+        height: 0,
+        overflow: "hidden",
+        visibility: "hidden",
+        [`&:not(:checked) + ${StyledToggle.toString()}`]: {
+            transform: "translateX(0)",
+            background: "$toggleHandleBg",
+            borderColor: "$toggleHandleBorder",
+        },
+        [`&[data-undetermined=true] + ${StyledToggle.toString()}`]: {
+            transform: `translateX(${dimensionsPxToRem(24)})`,
+            background: "$toggleHandleBorder",
+            borderColor: "$toggleHandleBorder",
+        },
+        [`&:disabled:checked + ${StyledToggle.toString()}`]: {
+            borderColor: "$toggleHandleBorderDisabled",
+            background: "$toggleHandleBgDisabled",
+        },
+    },
+    "variants": {
+        disabled: {
+            true: {
+                background: "$toggleBgDisabled",
+            },
+        },
+    },
+});
+export { StyledContainer, StyledToggle, };
+//# sourceMappingURL=Toggle.styled.js.map

package/esm/components/form/Toggle.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.styled.js","sourceRoot":"","sources":["../../../src/components/form/Toggle.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEvE,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,EAAE;IAC/B,SAAS,EAAE,YAAY;IACvB,YAAY,EAAE,OAAO;IACrB,OAAO,EAAE,cAAc;IACvB,KAAK,EAAE,iBAAiB,CAAC,EAAE,CAAC;IAC5B,MAAM,EAAE,iBAAiB,CAAC,EAAE,CAAC;IAC7B,MAAM,EAAE,GAAG,aAAa,CAAC,CAAC,CAAC,uBAAuB;IAClD,UAAU,EAAE,UAAU;IACtB,UAAU,EAAE,6DAA6D;IACzE,SAAS,EAAE,cAAc,iBAAiB,CAAC,EAAE,CAAC,GAAG;CACpD,CAAC,CAAC;AAEH,MAAM,eAAe,GAAG,MAAM,CAAC,OAAO,EAAE;IACpC,SAAS,EAAE,aAAa;IACxB,YAAY,EAAE,QAAQ;IACtB,QAAQ,EAAE,gBAAgB;IAC1B,cAAc,EAAE,OAAO;IACvB,UAAU,EAAE,UAAU;IACtB,YAAY,EAAE,CAAC;IACf,OAAO,EAAE,iBAAiB,CAAC,GAAG,CAAC;IAC/B,QAAQ,EAAE,iBAAiB,CAAC,EAAE,CAAC;IAC/B,aAAa,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACnC,WAAW,EAAE,YAAY;IAEzB,SAAS,EAAE;QACP,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,QAAQ;QAClB,UAAU,EAAE,QAAQ;QAEpB,CAAC,qBAAqB,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE;YAC9C,SAAS,EAAE,eAAe;YAC1B,UAAU,EAAE,iBAAiB;YAC7B,WAAW,EAAE,qBAAqB;SACrC;QAED,CAAC,+BAA+B,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE;YACxD,SAAS,EAAE,cAAc,iBAAiB,CAAC,EAAE,CAAC,GAAG;YACjD,UAAU,EAAE,qBAAqB;YACjC,WAAW,EAAE,qBAAqB;SACrC;QAED,CAAC,wBAAwB,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE;YACjD,WAAW,EAAE,6BAA6B;YAC1C,UAAU,EAAE,yBAAyB;SACxC;KACJ;IAED,UAAU,EAAE;QACR,QAAQ,EAAE;YACN,IAAI,EAAE;gBACF,UAAU,EAAE,mBAAmB;aAClC;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,OAAO,EACH,eAAe,EACf,YAAY,GACf,CAAC"}

package/esm/components/form/choice/Choice.d.ts

@@ -1,15 +1,16 @@
 import React from "react";
 import type { ObjectValue, Value } from "../../../types/form";
+import { StyledChoice } from "./Choice.styled";
 type Variant = "wide" | "left";
-interface Props<T extends string> {
+type StyledProps = React.ComponentProps<typeof StyledChoice>;
+type Props<T extends string> = Omit<StyledProps, "onChange"> & {
     values: Value<T>[];
     value: string;
     name: string;
     onChange: (value: Exclude<Value<T>, ObjectValue>) => void;
-    className?: string;
     variant?: Variant | Variant[];
-}
-declare const Choice: <T extends string>(props: Props<T>) => ReturnType<React.FC<Props<T>>>;
+};
+declare const Choice: <T extends string>({ value, values, name, onChange, ...props }: Props<T>) => ReturnType<React.FC<Props<T>>>;
 export { Choice };
 export type { Props as ChoiceProps, };
 //# sourceMappingURL=Choice.d.ts.map

package/esm/components/form/choice/Choice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Choice.d.ts","sourceRoot":"","sources":["../../../../src/components/form/choice/Choice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAQ9D,KAAK,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAE/B,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC5B,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC;AAKD,QAAA,MAAM,MAAM,GAAI,CAAC,SAAS,MAAM,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,KAAG,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAuBhF,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB,YAAY,EACR,KAAK,IAAI,WAAW,GACvB,CAAC"}
+{"version":3,"file":"Choice.d.ts","sourceRoot":"","sources":["../../../../src/components/form/choice/Choice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAK9D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,KAAK,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAE/B,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAE7D,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG;IAC3D,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC,CAAC;AAIF,QAAA,MAAM,MAAM,GAAI,CAAC,SAAS,MAAM,EAAE,6CAG/B,KAAK,CAAC,CAAC,CAAC,KAAG,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAmB1C,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB,YAAY,EACR,KAAK,IAAI,WAAW,GACvB,CAAC"}

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

@@ -1,16 +1,13 @@
 import React from "react";
-import classnames from "classnames";
-import { makeVariants, toObjectValue } from "../../../utils/index.js";
+import { toObjectValue } from "../../../utils/index.js";
 import { ChoiceItem } from "./ChoiceItem.js";
-import styles from "./Choice.module.scss";
-const Choice = (props) => {
-    const opts = props.values.map(option => {
+import { StyledChoice } from "./Choice.styled.js";
+const Choice = ({ value, values, name, onChange, ...props }) => {
+    const opts = values.map(option => {
         const opt = toObjectValue(option);
-        return (React.createElement(ChoiceItem, { key: opt.value, name: props.name, value: opt, onChange: props.onChange, active: props.value === opt.value }));
+        return (React.createElement(ChoiceItem, { key: opt.value, name: name, value: opt, onChange: onChange, active: value === opt.value }));
     });
-    const v = makeVariants(props.variant);
-    const cls = classnames(styles.choice, props.className, { [styles.wide]: v.includes("wide") }, { [styles.left]: v.includes("left") });
-    return React.createElement("div", { className: cls }, opts);
+    return (React.createElement(StyledChoice, { ...props }, opts));
 };
 export { Choice };
 //# sourceMappingURL=Choice.js.map

package/esm/components/form/choice/Choice.js.map

@@ -1 +1 @@
-{"version":3,"file":"Choice.js","sourceRoot":"","sources":["../../../../src/components/form/choice/Choice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAgB1C,MAAM,MAAM,GAAG,CAAmB,KAAe,EAAkC,EAAE;IACjF,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QACnC,MAAM,GAAG,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;QAClC,OAAO,CACH,oBAAC,UAAU,IACP,GAAG,EAAE,GAAG,CAAC,KAAK,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,KAAK,KAAK,GAAG,CAAC,KAAK,GACnC,CACL,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,GAAG,GAAG,UAAU,CAClB,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,EAC9B,EAAE,CAAC,MAAM,CAAC,IAAc,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,EAC/C,EAAE,CAAC,MAAM,CAAC,IAAc,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAClD,CAAC;IAEF,OAAO,6BAAK,SAAS,EAAE,GAAG,IAAG,IAAI,CAAO,CAAC;AAC7C,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Choice.js","sourceRoot":"","sources":["../../../../src/components/form/choice/Choice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAgB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAgB/C,MAAM,MAAM,GAAG,CAAmB,EAE9B,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAChC,EAAkC,EAAE;IAC3C,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QAC7B,MAAM,GAAG,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;QAClC,OAAO,CACH,oBAAC,UAAU,IACP,GAAG,EAAE,GAAG,CAAC,KAAK,EACd,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,KAAK,KAAK,GAAG,CAAC,KAAK,GAC7B,CACL,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,oBAAC,YAAY,OAAK,KAAK,IAClB,IAAI,CACM,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/components/form/choice/Choice.styled.d.ts

@@ -0,0 +1,88 @@
+declare const StyledChoice: import("@stitches/react/types/styled-component").StyledComponent<"div", {
+    wide?: boolean | "true";
+    unaligned?: boolean | "true";
+}, {}, 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 { StyledChoice, };
+//# sourceMappingURL=Choice.styled.d.ts.map

package/esm/components/form/choice/Choice.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Choice.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/form/choice/Choice.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEhB,CAAC;AAEH,OAAO,EACH,YAAY,GACf,CAAC"}

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

@@ -0,0 +1,63 @@
+import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme.js";
+const StyledChoice = 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: 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": dimensionsPxToRem(89),
+        "display": "flex",
+        "+ label": {
+            borderLeft: "1px solid var(--choice-border)",
+        },
+    },
+    "variants": {
+        wide: {
+            true: {
+                width: "100%",
+            },
+        },
+        unaligned: {
+            true: {
+                marginLeft: "unset",
+                marginRight: "unset",
+            },
+        },
+    },
+});
+export { StyledChoice, };
+//# sourceMappingURL=Choice.styled.js.map

package/esm/components/form/choice/Choice.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Choice.styled.js","sourceRoot":"","sources":["../../../../src/components/form/choice/Choice.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExE,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,EAAE;IAC/B,aAAa,EAAE,kBAAkB;IACjC,eAAe,EAAE,oBAAoB;IACrC,oBAAoB,EAAE,wBAAwB;IAC9C,sBAAsB,EAAE,0BAA0B;IAClD,iBAAiB,EAAE,sBAAsB;IAEzC,OAAO,EAAE;QACL,OAAO,EAAE,CAAC;QACV,QAAQ,EAAE,CAAC;QACX,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,CAAC;QACX,UAAU,EAAE,UAAU;QAEtB,kBAAkB,EAAE;YAChB,KAAK,EAAE,2BAA2B;YAClC,UAAU,EAAE,yBAAyB;SACxC;KACJ;IAED,MAAM,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,QAAQ,EAAE,WAAW,CAAC,EAAE,CAAC;QACzB,KAAK,EAAE,oBAAoB;QAC3B,UAAU,EAAE,kBAAkB;QAC9B,UAAU,EAAE,QAAQ;KACvB;IAED,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,gCAAgC;IAC1C,UAAU,EAAE,UAAU;IACtB,cAAc,EAAE,KAAK;IACrB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,MAAM;IACpB,aAAa,EAAE,MAAM;IAErB,OAAO,EAAE;QACL,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,iBAAiB,CAAC,EAAE,CAAC;QAC/B,SAAS,EAAE,MAAM;QAEjB,SAAS,EAAE;YACP,UAAU,EAAE,gCAAgC;SAC/C;KACJ;IAED,UAAU,EAAE;QACR,IAAI,EAAE;YACF,IAAI,EAAE;gBACF,KAAK,EAAE,MAAM;aAChB;SACJ;QACD,SAAS,EAAE;YACP,IAAI,EAAE;gBACF,UAAU,EAAE,OAAO;gBACnB,WAAW,EAAE,OAAO;aACvB;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,OAAO,EACH,YAAY,GACf,CAAC"}

package/esm/components/layout/header/Header.styled.d.ts

@@ -249,7 +249,7 @@ declare const After: import("@stitches/react/types/styled-component").StyledComp
 }>>;
 declare const StyledHeader: import("@stitches/react/types/styled-component").StyledComponent<"div", {
     variant?: "toolbar" | "colored";
-    position?: "left" | "bottom" | "right" | "top";
+    position?: "bottom" | "left" | "right" | "top";
     center?: boolean | "true";
 }, {}, import("@stitches/react/types/css-util").CSS<{}, {
     colors: {

package/esm/components/layout/header/StickyHeader.d.ts

@@ -1,16 +1,101 @@
 import React from "react";
-import { Content } from "./StickyHeader.styled";
-interface ContentComponent {
-    Content: typeof Content;
-}
 interface Props {
     position?: "top" | "left" | "right" | "bottom";
     className?: string;
     __dangerouslyDisableChildrenGuard?: boolean;
     children: React.ReactNode;
 }
-type StickyHeaderType = React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>> & ContentComponent;
-declare const StickyHeader: StickyHeaderType;
-export { StickyHeader };
+declare const StickyHeader: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>> & {
+    displayName: string;
+    Content: import("@stitches/react/types/styled-component").StyledComponent<"div", {
+        position?: "bottom" | "left" | "right" | "top";
+    }, {}, 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;
+        };
+    }>>;
+    selectors: {
+        root: string;
+    };
+};
+export { StickyHeader, };
 export type { Props as StickyHeaderProps };
 //# sourceMappingURL=StickyHeader.d.ts.map

package/esm/components/layout/header/StickyHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StickyHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,OAAO,EAAsB,MAAM,uBAAuB,CAAC;AAIpE,UAAU,gBAAgB;IACtB,OAAO,EAAE,OAAO,OAAO,CAAC;CAC3B;AAED,UAAU,KAAK;IAIX,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAI/C,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,iCAAiC,CAAC,EAAE,OAAO,CAAC;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAuCD,KAAK,gBAAgB,GAAG,KAAK,CAAC,yBAAyB,CAAC,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,GAAG,gBAAgB,CAAC;AAExH,QAAA,MAAM,YAAY,EAAsB,gBAAgB,CAAC;AAGzD,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,KAAK,IAAI,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"StickyHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAS1C,UAAU,KAAK;IAIX,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAI/C,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,iCAAiC,CAAC,EAAE,OAAO,CAAC;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwChB,CAAC;AAGH,OAAO,EACH,YAAY,GACf,CAAC;AAEF,YAAY,EAAE,KAAK,IAAI,iBAAiB,EAAE,CAAC"}

package/esm/components/layout/header/StickyHeader.js

@@ -1,8 +1,9 @@
 import React, { forwardRef } from "react";
+import { fnWithProps } from "../../../types/fnWithProps.js";
 import { Header } from "./Header.js";
 import { Content, StyledStickyHeader } from "./StickyHeader.styled.js";
 const err = new TypeError("StickyHeader needs two children - Header and StickyHeader.Content");
-const StickyHeaderRaw = forwardRef((props, ref) => {
+const StickyHeader = fnWithProps(forwardRef((props, ref) => {
     const { children: _children, position = "top", __dangerouslyDisableChildrenGuard, ...rest } = props;
     if (__dangerouslyDisableChildrenGuard) {
         return (React.createElement(StyledStickyHeader, { ref: ref, ...rest, position: position }, _children));
@@ -20,9 +21,13 @@ const StickyHeaderRaw = forwardRef((props, ref) => {
     return (React.createElement(StyledStickyHeader, { ref: ref, ...rest, position: position },
         React.cloneElement(header, { position }),
         React.cloneElement(content, { position })));
+}), {
+    displayName: "StickyHeader",
+    Content: Content,
+    selectors: {
+        root: StyledStickyHeader.toString(),
+    },
 });
-StickyHeaderRaw.displayName = "StickyHeader";
-const StickyHeader = StickyHeaderRaw;
-StickyHeader.Content = Content;
-export { StickyHeader };
+StickyHeader.displayName = "StickyHeader";
+export { StickyHeader, };
 //# sourceMappingURL=StickyHeader.js.map

package/esm/components/layout/header/StickyHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"StickyHeader.js","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEpE,MAAM,GAAG,GAAG,IAAI,SAAS,CAAC,mEAAmE,CAAC,CAAC;AAuB/F,MAAM,eAAe,GAAG,UAAU,CAAwB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACrE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAE,iCAAiC,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEpG,IAAI,iCAAiC,EAAE,CAAC;QACpC,OAAO,CACH,oBAAC,kBAAkB,IAAC,GAAG,EAAE,GAAG,KAAM,IAAI,EAAE,QAAQ,EAAE,QAAQ,IACrD,SAAS,CACO,CACxB,CAAC;IACN,CAAC;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAGnD,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACxB,MAAM,GAAG,CAAC;IACd,CAAC;IAED,IAAI,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,EACtF,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC;IAE7F,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC;QACtB,MAAM,GAAG,CAAC;IACd,CAAC;IAED,MAAM,GAAG,MAAe,CAAC;IACzB,OAAO,GAAG,OAAgB,CAAC;IAE3B,OAAO,CACH,oBAAC,kBAAkB,IAAC,GAAG,EAAE,GAAG,KAAM,IAAI,EAAE,QAAQ,EAAE,QAAQ;QACrD,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC;QACxC,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,CAAC,CACzB,CACxB,CAAC;AACN,CAAC,CAAC,CAAC;AACH,eAAe,CAAC,WAAW,GAAG,cAAc,CAAC;AAI7C,MAAM,YAAY,GAAG,eAAmC,CAAC;AACzD,YAAY,CAAC,OAAO,GAAG,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"StickyHeader.js","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEpE,MAAM,GAAG,GAAG,IAAI,SAAS,CAAC,mEAAmE,CAAC,CAAC;AAmB/F,MAAM,YAAY,GAAG,WAAW,CAAC,UAAU,CAAwB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC9E,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAE,iCAAiC,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEpG,IAAI,iCAAiC,EAAE,CAAC;QACpC,OAAO,CACH,oBAAC,kBAAkB,IAAC,GAAG,EAAE,GAAG,KAAM,IAAI,EAAE,QAAQ,EAAE,QAAQ,IACrD,SAAS,CACO,CACxB,CAAC;IACN,CAAC;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAGnD,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACxB,MAAM,GAAG,CAAC;IACd,CAAC;IAED,IAAI,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,EACtF,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC;IAE7F,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC;QACtB,MAAM,GAAG,CAAC;IACd,CAAC;IAED,MAAM,GAAG,MAAe,CAAC;IACzB,OAAO,GAAG,OAAgB,CAAC;IAE3B,OAAO,CACH,oBAAC,kBAAkB,IAAC,GAAG,EAAE,GAAG,KAAM,IAAI,EAAE,QAAQ,EAAE,QAAQ;QACrD,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC;QACxC,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,CAAC,CACzB,CACxB,CAAC;AACN,CAAC,CAAC,EAAE;IACA,WAAW,EAAE,cAAc;IAC3B,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE;QACP,IAAI,EAAE,kBAAkB,CAAC,QAAQ,EAAE;KACtC;CACJ,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAE1C,OAAO,EACH,YAAY,GACf,CAAC"}

package/esm/components/layout/header/StickyHeader.styled.d.ts

@@ -1,5 +1,5 @@
 declare const StyledStickyHeader: import("@stitches/react/types/styled-component").StyledComponent<"div", {
-    position?: "left" | "bottom" | "right" | "top";
+    position?: "bottom" | "left" | "right" | "top";
 }, {}, import("@stitches/react/types/css-util").CSS<{}, {
     colors: {
         background: "white";
@@ -84,7 +84,7 @@ declare const StyledStickyHeader: import("@stitches/react/types/styled-component
     };
 }>>;
 declare const Content: import("@stitches/react/types/styled-component").StyledComponent<"div", {
-    position?: "left" | "bottom" | "right" | "top";
+    position?: "bottom" | "left" | "right" | "top";
 }, {}, import("@stitches/react/types/css-util").CSS<{}, {
     colors: {
         background: "white";