react-miui 0.23.7-beta.2 → 0.24.0

package/esm/components/ui/pop/Pop.styled.d.ts

@@ -0,0 +1,494 @@
+declare const Overlay: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {}, import("@stitches/react/types/css-util").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;
+        blue4: string;
+        blue5: 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").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 List: import("@stitches/react/types/styled-component").StyledComponent<"ul", {}, {}, import("@stitches/react/types/css-util").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;
+        blue4: string;
+        blue5: 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").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 ListItem: import("@stitches/react/types/styled-component").StyledComponent<"li", {}, {}, import("@stitches/react/types/css-util").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;
+        blue4: string;
+        blue5: 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").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 Button: import("@stitches/react/types/styled-component").StyledComponent<"button", {}, {}, import("@stitches/react/types/css-util").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;
+        blue4: string;
+        blue5: 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").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 Icon: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {}, import("@stitches/react/types/css-util").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;
+        blue4: string;
+        blue5: 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").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 FakeIcon: import("@stitches/react/types/styled-component").StyledComponent<"span", {}, {}, import("@stitches/react/types/css-util").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;
+        blue4: string;
+        blue5: 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").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 { Overlay, List, ListItem, Button, Icon, FakeIcon, };
+//# sourceMappingURL=Pop.styled.d.ts.map

package/esm/components/ui/pop/Pop.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pop.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/pop/Pop.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAKX,CAAC;AAEH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAOR,CAAC;AAEH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAQZ,CAAC;AAEH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkBV,CAAC;AAEH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGR,CAAC;AAEH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAKZ,CAAC;AAEH,OAAO,EACH,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,GACX,CAAC"}

package/esm/components/ui/pop/Pop.styled.js

@@ -0,0 +1,53 @@
+import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme.js";
+const Overlay = styled("div", {
+    position: "fixed",
+    background: "#0000004c",
+    inset: 0,
+    zIndex: 4,
+});
+const List = styled("ul", {
+    zIndex: 5,
+    position: "absolute",
+    background: "white",
+    margin: 0,
+    padding: 0,
+    listStyleType: "none",
+});
+const ListItem = styled("li", {
+    "margin": 0,
+    "padding": 0,
+    "listStyleType": "none",
+    "& + &": {
+        borderTop: "1px solid var(--border)",
+    },
+});
+const Button = styled("button", {
+    "border": "none",
+    "background": "white",
+    "height": dimensionsPxToRem(116),
+    "padding": `0 ${dimensionsPxToRem(42)}`,
+    "boxSizing": "border-box",
+    "width": "100%",
+    "minWidth": dimensionsPxToRem(460),
+    "textAlign": "left",
+    "color": "$popText",
+    "fontSize": fontPxToRem(26),
+    "fontWeight": "revert",
+    "display": "flex",
+    "alignItems": "center",
+    "&:hover": {
+        background: "$activeBg",
+    },
+});
+const Icon = styled("div", {
+    fill: "currentColor",
+    marginRight: dimensionsPxToRem(42),
+});
+const FakeIcon = styled("span", {
+    display: "inline-block",
+    width: 16,
+    height: 16,
+    marginRight: dimensionsPxToRem(42),
+});
+export { Overlay, List, ListItem, Button, Icon, FakeIcon, };
+//# sourceMappingURL=Pop.styled.js.map

package/esm/components/ui/pop/Pop.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pop.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/Pop.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExE,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,EAAE;IAC1B,QAAQ,EAAE,OAAO;IACjB,UAAU,EAAE,WAAW;IACvB,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;CACZ,CAAC,CAAC;AAEH,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,EAAE;IACtB,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,UAAU;IACpB,UAAU,EAAE,OAAO;IACnB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;IACV,aAAa,EAAE,MAAM;CACxB,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,EAAE;IAC1B,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,CAAC;IACZ,eAAe,EAAE,MAAM;IAEvB,OAAO,EAAE;QACL,SAAS,EAAE,yBAAyB;KACvC;CACJ,CAAC,CAAC;AAEH,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,EAAE;IAC5B,QAAQ,EAAE,MAAM;IAChB,YAAY,EAAE,OAAO;IACrB,QAAQ,EAAE,iBAAiB,CAAC,GAAG,CAAC;IAChC,SAAS,EAAE,KAAK,iBAAiB,CAAC,EAAE,CAAC,EAAE;IACvC,WAAW,EAAE,YAAY;IACzB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,iBAAiB,CAAC,GAAG,CAAC;IAClC,WAAW,EAAE,MAAM;IACnB,OAAO,EAAE,UAAU;IACnB,UAAU,EAAE,WAAW,CAAC,EAAE,CAAC;IAC3B,YAAY,EAAE,QAAQ;IACtB,SAAS,EAAE,MAAM;IACjB,YAAY,EAAE,QAAQ;IAEtB,SAAS,EAAE;QACP,UAAU,EAAE,WAAW;KAC1B;CACJ,CAAC,CAAC;AAEH,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,EAAE;IACvB,IAAI,EAAE,cAAc;IACpB,WAAW,EAAE,iBAAiB,CAAC,EAAE,CAAC;CACrC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE;IAC5B,OAAO,EAAE,cAAc;IACvB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,WAAW,EAAE,iBAAiB,CAAC,EAAE,CAAC;CACrC,CAAC,CAAC;AAEH,OAAO,EACH,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,GACX,CAAC"}

package/esm/components/ui/pop/PopOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopOption.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAU9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"PopOption.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAU9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/esm/components/ui/pop/PopOption.js

@@ -1,13 +1,12 @@
 import React from "react";
-import classnames from "classnames";
-import styles from "./Pop.module.scss";
+import { Button, FakeIcon, Icon, ListItem } from "./Pop.styled.js";
 const PopOption = (props) => {
     var _a;
     const ic = props.icon
-        ? React.createElement("div", { className: styles.icon }, props.icon)
-        : (((_a = props.forceEmptyIcon) !== null && _a !== void 0 ? _a : true) ? React.createElement("span", { className: styles.fakeIcon }) : null);
-    return (React.createElement("li", { className: classnames(props.className, styles.li) },
-        React.createElement("button", { onClick: props.onClick, className: styles.button },
+        ? React.createElement(Icon, null, props.icon)
+        : (((_a = props.forceEmptyIcon) !== null && _a !== void 0 ? _a : true) ? React.createElement(FakeIcon, null) : null);
+    return (React.createElement(ListItem, { className: props.className },
+        React.createElement(Button, { onClick: props.onClick },
             ic,
             props.children)));
 };

package/esm/components/ui/pop/PopOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopOption.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAUvC,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;;IACzC,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI;QACjB,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,KAAK,CAAC,IAAI,CAAO;QACjD,CAAC,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,cAAc,mCAAI,IAAI,CAAC,CAAC,CAAC,CAAC,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAErF,OAAO,CACH,4BAAI,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,CAAC;QACjD,gCAAQ,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM;YAAG,EAAE;YAAE,KAAK,CAAC,QAAQ,CAAU,CACtF,CACR,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"PopOption.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAUhE,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;;IACzC,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI;QACjB,CAAC,CAAC,oBAAC,IAAI,QAAE,KAAK,CAAC,IAAI,CAAQ;QAC3B,CAAC,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,cAAc,mCAAI,IAAI,CAAC,CAAC,CAAC,CAAC,oBAAC,QAAQ,OAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE7D,OAAO,CACH,oBAAC,QAAQ,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS;QAChC,oBAAC,MAAM,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO;YAAG,EAAE;YAAE,KAAK,CAAC,QAAQ,CAAU,CACtD,CACd,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/esm/components/ui/progress/Progress.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { Container } from "./Progress.styled";
+interface Props extends React.ComponentProps<typeof Container> {
+    value?: number | undefined;
+    valueFrom?: number;
+    scaleFrom?: number;
+    scaleTo?: number;
+}
+declare const Progress: React.FC<Props>;
+declare const BackgroundClassName: string;
+declare const ValueClassName: string;
+export { Progress, BackgroundClassName, ValueClassName };
+//# sourceMappingURL=Progress.d.ts.map

package/esm/components/ui/progress/Progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAc,SAAS,EAAS,MAAM,mBAAmB,CAAC;AAEjE,UAAU,KAAM,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC;IAI1D,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAI3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAInB,SAAS,CAAC,EAAE,MAAM,CAAC;IAInB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6B7B,CAAC;AAEF,QAAA,MAAM,mBAAmB,QAAwB,CAAC;AAClD,QAAA,MAAM,cAAc,QAAmB,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAC"}

package/esm/components/ui/progress/Progress.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { cap, scale } from "@ezez/utils";
+import { Background, Container, Value } from "./Progress.styled.js";
+const Progress = (props) => {
+    const { value, valueFrom, scaleFrom = 0, scaleTo = 100, ...rest } = props;
+    const from = cap(valueFrom !== null && valueFrom !== void 0 ? valueFrom : scaleFrom, scaleTo, scaleFrom);
+    const to = cap(value !== null && value !== void 0 ? value : scaleFrom, scaleTo, scaleFrom);
+    const scaledFrom = valueFrom != null ? scale(scaleFrom, scaleTo, 0, 100, from) : 0;
+    const percFrom = Math.max(scaledFrom, 0);
+    const scaledTo = value != null ? scale(scaleTo, scaleFrom, 0, 100, to) : 100;
+    const percTo = Math.max(scaledTo, 0);
+    const isZeroWidth = from >= to || percFrom === 100 || percTo === 100;
+    const css = {
+        right: `${percTo}%`,
+        left: `${percFrom}%`,
+    };
+    return (React.createElement(Container, { ...rest },
+        React.createElement(Background, null),
+        React.createElement(Value, { css: css, zero: isZeroWidth })));
+};
+const BackgroundClassName = Background.toString();
+const ValueClassName = Value.toString();
+export { Progress, BackgroundClassName, ValueClassName };
+//# sourceMappingURL=Progress.js.map

package/esm/components/ui/progress/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../../src/components/ui/progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIzC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AA0BjE,MAAM,QAAQ,GAAoB,CAAC,KAAK,EAAE,EAAE;IAExC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAG,CAAC,EAAE,OAAO,GAAG,GAAG,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAE1E,MAAM,IAAI,GAAG,GAAG,CAAC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;IAC7D,MAAM,EAAE,GAAG,GAAG,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;IAGvD,MAAM,UAAU,GAAG,SAAS,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACnF,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;IAGzC,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC7E,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IAGrC,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE,IAAI,QAAQ,KAAK,GAAG,IAAI,MAAM,KAAK,GAAG,CAAC;IAErE,MAAM,GAAG,GAAa;QAClB,KAAK,EAAE,GAAG,MAAM,GAAG;QACnB,IAAI,EAAE,GAAG,QAAQ,GAAG;KACvB,CAAC;IAEF,OAAO,CACH,oBAAC,SAAS,OAAK,IAAI;QACf,oBAAC,UAAU,OAAG;QACd,oBAAC,KAAK,IAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,GAAI,CAC9B,CACf,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAC;AAClD,MAAM,cAAc,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAC"}

package/esm/components/ui/progress/Progress.stories.d.ts

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

package/esm/components/ui/progress/Progress.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/progress/Progress.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,QAAQ,EAAkB,MAAM,YAAY,CAAC;AAEtD,QAAA,MAAM,IAAI,EAAE,IAUX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,QAAA,MAAM,OAAO,EAAE,KAAU,CAAC;AAW1B,QAAA,MAAM,gBAAgB,EAAE,KAMvB,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,OAAO,EACH,OAAO,EACP,gBAAgB,GACnB,CAAC"}

package/esm/components/ui/progress/Progress.stories.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { styled } from "../../../theme.js";
+import { Progress, ValueClassName } from "./Progress.js";
+const meta = {
+    title: "Components/UI/Progress",
+    component: Progress,
+    tags: ["autodocs", "layout"],
+    args: {
+        value: 25,
+        valueFrom: 15,
+        scaleFrom: 10,
+        scaleTo: 30,
+    },
+};
+const Primary = {};
+const CustomProgress = styled(Progress, {
+    "--value-background-color": "linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff)",
+    [`& ${ValueClassName}`]: {
+        borderWidth: 0,
+    },
+});
+const CustomizedColors = {
+    render: (args) => {
+        return (React.createElement(CustomProgress, { ...args }));
+    },
+};
+export default meta;
+export { Primary, CustomizedColors, };
+//# sourceMappingURL=Progress.stories.js.map

package/esm/components/ui/progress/Progress.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.stories.js","sourceRoot":"","sources":["../../../../src/components/ui/progress/Progress.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEtD,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC;IAC5B,IAAI,EAAE;QACF,KAAK,EAAE,EAAE;QACT,SAAS,EAAE,EAAE;QACb,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,EAAE;KACd;CACJ,CAAC;AAIF,MAAM,OAAO,GAAU,EAAE,CAAC;AAE1B,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,EAAE;IACpC,0BAA0B,EACtB,0FAA0F;IAE9F,CAAC,KAAK,cAAc,EAAE,CAAC,EAAE;QACrB,WAAW,EAAE,CAAC;KACjB;CACJ,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAAU;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,OAAO,CACH,oBAAC,cAAc,OAAK,IAAI,GAAI,CAC/B,CAAC;IACN,CAAC;CACJ,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,OAAO,EACH,OAAO,EACP,gBAAgB,GACnB,CAAC"}