react-miui 0.32.1 → 0.32.3

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

@@ -1,6 +1,5 @@
 import React from "react";
-import type { VariantProps } from "@stitches/react";
-declare const StyledHeader: import("@stitches/react/types/styled-component").StyledComponent<React.FC<Omit<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+declare const Header: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLLIElement> | null | undefined;
 }, "inset" | "css" | "selected"> & import("@stitches/react/types/styled-component").TransformProps<{
     inset?: boolean | "true";
@@ -91,97 +90,101 @@ declare const StyledHeader: import("@stitches/react/types/styled-component").Sty
             height: string | number;
         };
     }>;
-} & import("./Item").ItemProps> & import("./Item").ItemSubComponents, {
+} & import("./Item").ItemProps, "ref"> & React.RefAttributes<HTMLLIElement>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLLIElement> | null | undefined;
+}, "inset" | "css"> & import("@stitches/react/types/styled-component").TransformProps<{
     inset?: 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";
-        text2: "#181818";
-        text3: "#000000";
-        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;
-    };
-}>>;
-type StyledHeaderProps = React.ComponentProps<typeof StyledHeader>;
-type Variants = VariantProps<typeof StyledHeader>;
-declare const Header: React.FC<StyledHeaderProps & Variants & {
+}, {}> & {
+    css?: 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";
+            text2: "#181818";
+            text3: "#000000";
+            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;
+        };
+    }>;
+} & import("@stitches/react/types/styled-component").TransformProps<{
+    inset?: boolean | "true";
+}, {}> & {
     as?: string;
-}>;
-export { Header };
+}, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const ListHeaderContentSelector: string;
+export { Header, ListHeaderContentSelector };
 //# 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;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAUpD,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"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AA0C1C,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAAmE,MAAM;+CAMnF,CAAC;AAKH,QAAA,MAAM,yBAAyB,QAA2B,CAAC;AAE3D,OAAO,EAAE,MAAM,EAAE,yBAAyB,EAAE,CAAC"}

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

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme.js";
-import { Item, ItemInnerContainerClassName } from "./Item.js";
+import { Item, ListItemInnerContainerClassNameSelector } from "./Item.js";
 const StyledContent = styled("div", {
     flex: 1,
 });
@@ -10,7 +10,7 @@ const StyledHeader = styled(Item, {
     fontSize: fontPxToRem(26),
     color: "$sub",
     textTransform: "uppercase",
-    [`& ${ItemInnerContainerClassName}`]: {
+    [`& ${ListItemInnerContainerClassNameSelector}`]: {
         minHeight: 0,
     },
     variants: {
@@ -22,9 +22,12 @@ const StyledHeader = styled(Item, {
         },
     },
 });
-const Header = ({ as, ...props }) => {
-    return (React.createElement(StyledHeader, { ...props },
+const Header = forwardRef(({ as, ...props }, ref) => {
+    return (React.createElement(StyledHeader, { ...props, ref: ref },
         React.createElement(StyledContent, { ...(as ? { as } : undefined) }, props.children)));
-};
-export { Header };
+});
+Header.displayName = "List.Header";
+Header.toString = () => StyledHeader.toString();
+const ListHeaderContentSelector = StyledContent.toString();
+export { Header, ListHeaderContentSelector };
 //# 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;AAI1B,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExE,OAAO,EAAE,IAAI,EAAE,2BAA2B,EAAE,MAAM,QAAQ,CAAC;AAE3D,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,EAAE;IAChC,IAAI,EAAE,CAAC;CACV,CAAC,CAAC;AAEH,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"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,uCAAuC,EAAE,MAAM,QAAQ,CAAC;AAEvE,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,EAAE;IAChC,IAAI,EAAE,CAAC;CACV,CAAC,CAAC;AAEH,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,uCAAuC,EAAE,CAAC,EAAE;QAC9C,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,GAAG,UAAU,CAAgE,CAAC,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/G,OAAO,CACH,oBAAC,YAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG;QAC7B,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,CAAC;AAEH,MAAM,CAAC,WAAW,GAAG,aAAa,CAAC;AACnC,MAAM,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;AAEhD,MAAM,yBAAyB,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC;AAE3D,OAAO,EAAE,MAAM,EAAE,yBAAyB,EAAE,CAAC"}

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

@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Header } from "./Header";
 declare const meta: Meta;
 type Story = StoryObj<typeof Header>;

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

@@ -1 +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,uBAAuB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,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"}
+{"version":3,"file":"Header.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,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/Item.d.ts

@@ -1,12 +1,11 @@
 import React from "react";
-import { Value } from "./Value";
 import { Label } from "./Label";
-import { StyledItem } from "./Item.styled";
+import { Value } from "./Value";
 interface LinkProps {
     href: string;
     children: React.ReactNode;
 }
-type Ratio = `${number}` | ``;
+type Ratio = `${number}` | "";
 type SlashSeparatedNumbers = Ratio | `${Ratio}/${Ratio}` | `${Ratio}/${Ratio}/${Ratio}` | `${Ratio}/${Ratio}/${Ratio}/${Ratio}` | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}` | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}` | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}` | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}` | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}` | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`;
 interface Props {
     href?: string;
@@ -19,9 +18,276 @@ interface SubComponents {
     Label: typeof Label;
     Value: typeof Value;
 }
-declare const ItemInnerContainerClassName: string;
-type StyledItemProps = React.ComponentProps<typeof StyledItem>;
-declare const Item: React.FC<StyledItemProps & Props> & SubComponents;
-export { Item, ItemInnerContainerClassName };
+declare const ListItemInnerContainerClassNameSelector: string;
+declare const Item: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLLIElement> | null | undefined;
+}, "inset" | "css" | "selected"> & import("@stitches/react/types/styled-component").TransformProps<{
+    inset?: boolean | "true";
+    selected?: boolean | "true";
+}, {}> & {
+    css?: 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";
+            text2: "#181818";
+            text3: "#000000";
+            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;
+        };
+    }>;
+} & Props, "ref"> & React.RefAttributes<HTMLLIElement>> & {
+    Label: React.FC<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    }, "css"> & import("@stitches/react/types/styled-component").TransformProps<{}, {}> & {
+        css?: 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";
+                text2: "#181818";
+                text3: "#000000";
+                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;
+            };
+        }>;
+    } & {
+        sub?: React.ReactNode;
+    }>;
+    Value: 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";
+            text2: "#181818";
+            text3: "#000000";
+            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 { Item, ListItemInnerContainerClassNameSelector };
 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;AAI1B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAoC,UAAU,EAAgB,MAAM,eAAe,CAAC;AAE3F,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,KAAK,KAAK,GAAG,GAAG,MAAM,EAAE,GAAG,EAAE,CAAC;AAE9B,KAAK,qBAAqB,GACpB,KAAK,GACL,GAAG,KAAK,IAAI,KAAK,EAAE,GACnB,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAC5B,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GACrC,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAC9C,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GACvD,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAChE,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GACzE,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAClF,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,CAAC;AAElG,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,qBAAqB,CAAC;CACjC;AAED,UAAU,aAAa;IACnB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,KAAK,EAAE,OAAO,KAAK,CAAC;CACvB;AAKD,QAAA,MAAM,2BAA2B,QAAkC,CAAC;AACpE,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAwB/D,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,GAAG,KAAK,CAAC,GAAG,aAqD/C,CAAC;AAKF,OAAO,EAAE,IAAI,EAAE,2BAA2B,EAAE,CAAC;AAE7C,YAAY,EACR,KAAK,IAAI,SAAS,EAClB,aAAa,IAAI,iBAAiB,GACrC,CAAC"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,KAAK,KAAK,GAAG,GAAG,MAAM,EAAE,GAAG,EAAE,CAAC;AAE9B,KAAK,qBAAqB,GAClB,KAAK,GACH,GAAG,KAAK,IAAI,KAAK,EAAE,GACnB,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAC5B,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GACrC,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAC9C,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GACvD,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAChE,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GACzE,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAClF,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,CAAC;AAEtG,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,qBAAqB,CAAC;CACjC;AAED,UAAU,aAAa;IACnB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,KAAK,EAAE,OAAO,KAAK,CAAC;CACvB;AAKD,QAAA,MAAM,uCAAuC,QAAkC,CAAC;AAoFhF,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGR,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,uCAAuC,EAAE,CAAC;AAEzD,YAAY,EACR,KAAK,IAAI,SAAS,EAClB,aAAa,IAAI,iBAAiB,GACrC,CAAC"}

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

@@ -1,12 +1,13 @@
-import React from "react";
+import React, { forwardRef } from "react";
+import { fnWithProps } from "../../../types/fnWithProps.js";
 import { ICON } from "../../icons/Icon.js";
-import { Value } from "./Value.js";
-import { Label } from "./Label.js";
 import { StyledIcon, StyledInnerContainer, StyledItem, StyledNoIcon } from "./Item.styled.js";
+import { Label } from "./Label.js";
+import { Value } from "./Value.js";
 const icon = React.createElement(StyledIcon, { name: ICON.forward });
 const noIcon = React.createElement(StyledNoIcon, null);
-const ItemInnerContainerClassName = StyledInnerContainer.toString();
-const Item = ({ href, to, onClick, Link, ratio, ...props }) => {
+const ListItemInnerContainerClassNameSelector = StyledInnerContainer.toString();
+const ItemBase = forwardRef(({ href, to, onClick, Link, ratio, ...props }, ref) => {
     var _a;
     const r = ratio ? ratio.split("/") : [];
     const pre = typeof props.selected === "boolean"
@@ -32,30 +33,34 @@ const Item = ({ href, to, onClick, Link, ratio, ...props }) => {
         if (!Link) {
             throw new TypeError("`to` prop given without `Link` component");
         }
-        return (React.createElement(StyledItem, { ...props },
+        return (React.createElement(StyledItem, { ...props, ref: ref },
             React.createElement(Link, { href: to },
                 React.createElement(StyledInnerContainer, { as: "a", href: to },
                     pre,
                     ren))));
     }
     if (href) {
-        return (React.createElement(StyledItem, { ...props },
+        return (React.createElement(StyledItem, { ...props, ref: ref },
             React.createElement(StyledInnerContainer, { as: "a", href: href, onClick: onClick },
                 pre,
                 ren)));
     }
     if (onClick) {
-        return (React.createElement(StyledItem, { ...props },
+        return (React.createElement(StyledItem, { ...props, ref: ref },
             React.createElement(StyledInnerContainer, { as: "button", onClick: onClick },
                 pre,
                 ren)));
     }
-    return React.createElement(StyledItem, { ...props },
+    return React.createElement(StyledItem, { ...props, ref: ref },
         React.createElement(StyledInnerContainer, null,
             pre,
             ren));
-};
-Item.Label = Label;
-Item.Value = Value;
-export { Item, ItemInnerContainerClassName };
+});
+ItemBase.displayName = "List.Item";
+const Item = fnWithProps(ItemBase, {
+    Label,
+    Value,
+});
+Item.toString = () => StyledItem.toString();
+export { Item, ListItemInnerContainerClassNameSelector };
 //# sourceMappingURL=Item.js.map