react-miui 0.20.1 → 0.22.0

package/esm/components/form/textarea/TextArea.styled.d.ts

@@ -61,17 +61,25 @@ declare const StyledTextArea: import("@stitches/react/types/styled-component.js"
         tableStripedBg: string;
     };
 }, import("@stitches/react/types/config.js").DefaultThemeMap, {
-    mx: (value: string) => {
-        marginLeft: string;
-        marginRight: string;
+    mx: (value: string | number) => {
+        marginLeft: string | number;
+        marginRight: string | number;
     };
-    my: (value: string) => {
-        marginTop: string;
-        marginBottom: string;
+    my: (value: string | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
     };
-    size: (value: string) => {
-        width: string;
-        height: string;
+    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 { StyledTextArea, };

package/esm/components/form/textarea/TextArea.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/form/textarea/TextArea.styled.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUlB,CAAC;AAEH,OAAO,EACH,cAAc,GACjB,CAAC"}
+{"version":3,"file":"TextArea.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/form/textarea/TextArea.styled.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUlB,CAAC;AAEH,OAAO,EACH,cAAc,GACjB,CAAC"}

package/esm/components/layout/list/Header.d.ts

@@ -1,10 +1,177 @@
 import React from "react";
-type Variant = "inset";
-interface Props {
-    className?: string;
-    variant?: Variant | Variant[];
-    children: React.ReactNode;
-}
-declare const Header: React.FC<Props>;
+import type { VariantProps } from "@stitches/react";
+declare const StyledHeader: import("@stitches/react/types/styled-component.js").StyledComponent<React.FC<Omit<Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof React.LiHTMLAttributes<HTMLLIElement>> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
+}, "inset" | "css" | "selected"> & import("@stitches/react/types/styled-component.js").TransformProps<{
+    inset?: boolean | "true";
+    selected?: boolean | "true";
+}, {}> & {
+    css?: 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 | 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;
+        };
+    }>;
+} & import("./Item.js").ItemProps> & import("./Item.js").ItemSubComponents, {
+    inset?: 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 | 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;
+    };
+}>>;
+type StyledHeaderProps = React.ComponentProps<typeof StyledHeader>;
+type Variants = VariantProps<typeof StyledHeader>;
+declare const Header: React.FC<StyledHeaderProps & Variants & {
+    as?: string;
+}>;
 export { Header };
 //# sourceMappingURL=Header.d.ts.map

package/esm/components/layout/list/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,KAAK,OAAO,GAAG,OAAO,CAAC;AAEvB,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAa3B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAQpD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsBhB,CAAC;AAEH,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AACnE,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAMlD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,GAAG,QAAQ,GAAG;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAMpE,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/components/layout/list/Header.js

@@ -1,15 +1,28 @@
 import React from "react";
-import classnames from "classnames";
-import { makeVariants } from "../../../utils/index.js";
-import styles from "./Item.module.scss";
-import headerStyles from "./Header.module.scss";
-const Header = (props) => {
-    const v = makeVariants(props.variant);
-    const cls = classnames(props.className, styles.item, headerStyles.header, {
-        [styles.inset]: v.includes("inset"),
-    });
-    return (React.createElement("li", { className: cls },
-        React.createElement("div", null, props.children)));
+import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme.js";
+import { Item, ItemInnerContainerClassName } from "./Item.js";
+const StyledContent = styled("div", {});
+const StyledHeader = styled(Item, {
+    paddingTop: dimensionsPxToRem(80),
+    paddingBottom: dimensionsPxToRem(40),
+    fontSize: fontPxToRem(26),
+    color: "$sub",
+    textTransform: "uppercase",
+    [`& ${ItemInnerContainerClassName}`]: {
+        minHeight: 0,
+    },
+    variants: {
+        inset: {
+            true: {
+                paddingLeft: 0,
+                paddingRight: 0,
+            },
+        },
+    },
+});
+const Header = ({ as, ...props }) => {
+    return (React.createElement(StyledHeader, { ...props },
+        React.createElement(StyledContent, { ...(as ? { as } : undefined) }, props.children)));
 };
 export { Header };
 //# sourceMappingURL=Header.js.map

package/esm/components/layout/list/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,YAAY,MAAM,sBAAsB,CAAC;AAUhD,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,GAAG,GAAG,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,YAAY,CAAC,MAAM,EAAE;QACtE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;KACtC,CAAC,CAAC;IAGH,OAAO,CACH,4BAAI,SAAS,EAAE,GAAG;QACd,iCAAM,KAAK,CAAC,QAAQ,CAAO,CAC1B,CACR,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3E,OAAO,EAAE,IAAI,EAAE,2BAA2B,EAAE,MAAM,WAAW,CAAC;AAE9D,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AAExC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,EAAE;IAE9B,UAAU,EAAE,iBAAiB,CAAC,EAAE,CAAC;IAEjC,aAAa,EAAE,iBAAiB,CAAC,EAAE,CAAC;IAEpC,QAAQ,EAAE,WAAW,CAAC,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM;IACb,aAAa,EAAE,WAAW;IAE1B,CAAC,KAAK,2BAA2B,EAAE,CAAC,EAAE;QAClC,SAAS,EAAE,CAAC;KACf;IAED,QAAQ,EAAE;QACN,KAAK,EAAE;YACH,IAAI,EAAE;gBACF,WAAW,EAAE,CAAC;gBACd,YAAY,EAAE,CAAC;aAClB;SACJ;KACJ;CACJ,CAAC,CAAC;AASH,MAAM,MAAM,GAA6D,CAAC,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC1F,OAAO,CACH,oBAAC,YAAY,OAAK,KAAK;QACnB,oBAAC,aAAa,OAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,IAAG,KAAK,CAAC,QAAQ,CAAiB,CACnE,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/components/layout/list/Header.stories.d.ts

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

package/esm/components/layout/list/Header.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,QAAA,MAAM,OAAO,EAAE,KAkBd,CAAC;AAEF,OAAO,EACH,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/components/layout/list/Header.stories.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { Header } from "./Header.js";
+import { List } from "./List.js";
+const meta = {
+    title: "Components/Layout/List/Header",
+    component: Header,
+    tags: ["autodocs", "layout"],
+};
+const Primary = {
+    args: {
+        children: "Section name",
+    },
+    render: (args) => {
+        return (React.createElement(List, null,
+            React.createElement(Header, { ...args }),
+            React.createElement(List.Item, null, "Item 1"),
+            React.createElement(List.Item, null, "Item 2"),
+            React.createElement(List.Item, null, "Item 3"),
+            React.createElement(Header, { ...args }),
+            React.createElement(List.Item, null, "Item 1"),
+            React.createElement(List.Item, null, "Item 2"),
+            React.createElement(List.Item, null, "Item 3")));
+    },
+};
+export { Primary, };
+export default meta;
+//# sourceMappingURL=Header.stories.js.map

package/esm/components/layout/list/Header.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.stories.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,+BAA+B;IACtC,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC;CAC/B,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE;QACF,QAAQ,EAAE,cAAc;KAC3B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,OAAO,CACH,oBAAC,IAAI;YACD,oBAAC,MAAM,OAAK,IAAI,GAAI;YACpB,oBAAC,IAAI,CAAC,IAAI,iBAAmB;YAC7B,oBAAC,IAAI,CAAC,IAAI,iBAAmB;YAC7B,oBAAC,IAAI,CAAC,IAAI,iBAAmB;YAC7B,oBAAC,MAAM,OAAK,IAAI,GAAI;YACpB,oBAAC,IAAI,CAAC,IAAI,iBAAmB;YAC7B,oBAAC,IAAI,CAAC,IAAI,iBAAmB;YAC7B,oBAAC,IAAI,CAAC,IAAI,iBAAmB,CAC1B,CACV,CAAC;IACN,CAAC;CACJ,CAAC;AAEF,OAAO,EACH,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/components/layout/list/Item.d.ts

@@ -5,22 +5,103 @@ interface LinkProps {
     href: string;
     children: React.ReactNode;
 }
-type Variant = "inset";
 interface Props {
     href?: string;
     to?: string;
     onClick?: () => void;
-    className?: string;
     Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
     ratio?: string;
-    variant?: Variant | Variant[];
-    selected?: boolean | undefined;
-    children: React.ReactNode;
 }
 interface SubComponents {
     Label: typeof Label;
     Value: typeof Value;
 }
-declare const Item: React.FC<Props> & SubComponents;
-export { Item };
+declare const ItemInnerContainerClassName: string;
+declare const StyledItem: import("@stitches/react/types/styled-component.js").StyledComponent<"li", {
+    inset?: boolean | "true";
+    selected?: 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 | 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;
+    };
+}>>;
+type StyledItemProps = React.ComponentProps<typeof StyledItem>;
+declare const Item: React.FC<StyledItemProps & Props> & SubComponents;
+export { Item, ItemInnerContainerClassName };
+export type { Props as ItemProps, SubComponents as ItemSubComponents, };
 //# sourceMappingURL=Item.d.ts.map

package/esm/components/layout/list/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,KAAK,OAAO,GAAG,OAAO,CAAC;AAEvB,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,UAAU,aAAa;IACnB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,KAAK,EAAE,OAAO,KAAK,CAAC;CACvB;AAMD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aAyD7B,CAAC;AAKF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,aAAa;IACnB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,KAAK,EAAE,OAAO,KAAK,CAAC;CACvB;AA+BD,QAAA,MAAM,2BAA2B,QAAkC,CAAC;AAEpE,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCd,CAAC;AAEH,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAuB/D,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,GAAG,KAAK,CAAC,GAAG,aAiD/C,CAAC;AAKF,OAAO,EAAE,IAAI,EAAE,2BAA2B,EAAE,CAAC;AAE7C,YAAY,EACR,KAAK,IAAI,SAAS,EAClB,aAAa,IAAI,iBAAiB,GACrC,CAAC"}

package/esm/components/layout/list/Item.js

@@ -1,27 +1,62 @@
 import React from "react";
-import classnames from "classnames";
-import { makeVariants } from "../../../utils/index.js";
 import { ICON, Icon } from "../../icons/Icon.js";
-import styles from "./Item.module.scss";
+import { dimensionsPxToRem, fontPxToRem, pxToRem, styled } from "../../../theme.js";
 import { Value } from "./Value.js";
 import { Label } from "./Label.js";
-const icon = React.createElement(Icon, { className: styles.icon, name: ICON.forward });
-const noIcon = React.createElement("span", { className: styles.icon });
-const Item = (props) => {
-    const { className, children, href, to, onClick, Link, ratio, variant, selected, ...restProps } = props;
-    const v = makeVariants(variant);
-    const cls = classnames(styles.item, className);
-    const innerCls = classnames(styles.content, {
-        [styles.inset]: v.includes("inset"),
-        [styles.selected]: selected,
-    });
-    const pre = typeof selected === "boolean"
-        ? (selected ? icon : noIcon)
-        : null;
-    const liProps = {
-        className: cls,
-    };
+const iconStyles = {
+    width: pxToRem(7),
+    marginRight: pxToRem(10),
+    display: "inline-block",
+};
+const StyledIcon = styled(Icon, iconStyles);
+const StyledNoIcon = styled("span", iconStyles);
+const icon = React.createElement(StyledIcon, { name: ICON.forward });
+const noIcon = React.createElement(StyledNoIcon, null);
+const StyledInnerContainer = styled("div", {
+    display: "flex",
+    minHeight: dimensionsPxToRem(174),
+    alignItems: "center",
+    gap: "1rem",
+    border: "none",
+    background: "none",
+    width: "100%",
+    textAlign: "left",
+    fontFamily: "inherit",
+    fontSize: "inherit",
+});
+const ItemInnerContainerClassName = StyledInnerContainer.toString();
+const StyledItem = styled("li", {
+    "listStyleType": "none",
+    "margin": 0,
+    "padding": 0,
+    "fontSize": fontPxToRem(34),
+    "&:not(:first-child)": {
+        borderTop: "0.37px solid $headerBorder",
+    },
+    "> *": {
+        display: "block",
+        padding: 0,
+        textDecoration: "none",
+    },
+    "variants": {
+        inset: {
+            true: {
+                paddingLeft: dimensionsPxToRem(37),
+                paddingRight: dimensionsPxToRem(37),
+            },
+        },
+        selected: {
+            true: {
+                color: "$mainColor",
+            },
+        },
+    },
+});
+const Item = ({ href, to, onClick, Link, ratio, ...props }) => {
     const r = ratio ? ratio.split("/") : [];
+    const pre = typeof props.selected === "boolean"
+        ? (props.selected ? icon : noIcon)
+        : null;
     const ren = React.Children.map(props.children, (child, index) => {
         let flex = undefined;
         if (!r.length && child && typeof child === "object" && "type" in child && child.type === Value) {
@@ -38,26 +73,22 @@ const Item = (props) => {
         if (!Link) {
             throw new TypeError("`to` prop given without `Link` component");
         }
-        return React.createElement("li", { ...liProps },
-            React.createElement(Link, { href: to, ...restProps },
-                React.createElement("a", { className: innerCls }, ren)));
+        return (React.createElement(StyledItem, { ...props },
+            React.createElement(Link, { href: to },
+                React.createElement(StyledInnerContainer, { as: "a", href: to }, ren))));
     }
     if (href) {
-        const aProps = { ...restProps };
-        if (onClick) {
-            aProps.onClick = onClick;
-        }
-        return React.createElement("li", { ...liProps },
-            React.createElement("a", { href: href, ...aProps, className: innerCls }, ren));
+        return (React.createElement(StyledItem, { ...props },
+            React.createElement(StyledInnerContainer, { as: "a", href: href, onClick: onClick }, ren)));
     }
     if (onClick) {
-        return (React.createElement("li", { ...liProps },
-            React.createElement("button", { className: classnames(styles.button, innerCls), onClick: props.onClick, ...restProps }, ren)));
+        return (React.createElement(StyledItem, { ...props },
+            React.createElement(StyledInnerContainer, { as: "button", onClick: onClick }, ren)));
     }
-    return React.createElement("li", { ...liProps },
-        React.createElement("div", { ...restProps, className: innerCls }, ren));
+    return React.createElement(StyledItem, { ...props },
+        React.createElement(StyledInnerContainer, null, ren));
 };
 Item.Label = Label;
 Item.Value = Value;
-export { Item };
+export { Item, ItemInnerContainerClassName };
 //# sourceMappingURL=Item.js.map

package/esm/components/layout/list/Item.js.map

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

package/esm/components/layout/list/Item.stories.d.ts

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

package/esm/components/layout/list/Item.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAGjC,QAAA,MAAM,IAAI,EAAE,IAYX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,QAAA,MAAM,OAAO,EAAE,KASd,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,KAYhB,CAAC;AAEF,QAAA,MAAM,OAAO,EAAE,KAUd,CAAC;AAEF,OAAO,EACH,OAAO,EACP,SAAS,EACT,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}