react-miui 0.20.1 → 0.22.0

package/dist/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/dist/components/layout/list/Header.js

@@ -1,21 +1,46 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = void 0;
 const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../../../utils/index.js");
-const Item_module_scss_1 = __importDefault(require("./Item.module.scss"));
-const Header_module_scss_1 = __importDefault(require("./Header.module.scss"));
-const Header = (props) => {
-    const v = (0, index_js_1.makeVariants)(props.variant);
-    const cls = (0, classnames_1.default)(props.className, Item_module_scss_1.default.item, Header_module_scss_1.default.header, {
-        [Item_module_scss_1.default.inset]: v.includes("inset"),
-    });
-    return (react_1.default.createElement("li", { className: cls },
-        react_1.default.createElement("div", null, props.children)));
+const theme_js_1 = require("../../../theme.js");
+const Item_js_1 = require("./Item.js");
+const StyledContent = (0, theme_js_1.styled)("div", {});
+const StyledHeader = (0, theme_js_1.styled)(Item_js_1.Item, {
+    paddingTop: (0, theme_js_1.dimensionsPxToRem)(80),
+    paddingBottom: (0, theme_js_1.dimensionsPxToRem)(40),
+    fontSize: (0, theme_js_1.fontPxToRem)(26),
+    color: "$sub",
+    textTransform: "uppercase",
+    [`& ${Item_js_1.ItemInnerContainerClassName}`]: {
+        minHeight: 0,
+    },
+    variants: {
+        inset: {
+            true: {
+                paddingLeft: 0,
+                paddingRight: 0,
+            },
+        },
+    },
+});
+const Header = (_a) => {
+    var { as } = _a, props = __rest(_a, ["as"]);
+    return (react_1.default.createElement(StyledHeader, Object.assign({}, props),
+        react_1.default.createElement(StyledContent, Object.assign({}, (as ? { as } : undefined)), props.children)));
 };
 exports.Header = Header;
 //# sourceMappingURL=Header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,4DAAoC;AAEpC,sDAAuD;AAEvD,0EAAwC;AACxC,8EAAgD;AAUhD,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,CAAC,GAAG,IAAA,uBAAY,EAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,GAAG,GAAG,IAAA,oBAAU,EAAC,KAAK,CAAC,SAAS,EAAE,0BAAM,CAAC,IAAI,EAAE,4BAAY,CAAC,MAAM,EAAE;QACtE,CAAC,0BAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;KACtC,CAAC,CAAC;IAGH,OAAO,CACH,sCAAI,SAAS,EAAE,GAAG;QACd,2CAAM,KAAK,CAAC,QAAQ,CAAO,CAC1B,CACR,CAAC;AACN,CAAC,CAAC;AAEO,wBAAM"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAI1B,gDAA2E;AAE3E,uCAA8D;AAE9D,MAAM,aAAa,GAAG,IAAA,iBAAM,EAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AAExC,MAAM,YAAY,GAAG,IAAA,iBAAM,EAAC,cAAI,EAAE;IAE9B,UAAU,EAAE,IAAA,4BAAiB,EAAC,EAAE,CAAC;IAEjC,aAAa,EAAE,IAAA,4BAAiB,EAAC,EAAE,CAAC;IAEpC,QAAQ,EAAE,IAAA,sBAAW,EAAC,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM;IACb,aAAa,EAAE,WAAW;IAE1B,CAAC,KAAK,qCAA2B,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,EAAgB,EAAE,EAAE;QAApB,EAAE,EAAE,OAAY,EAAP,KAAK,cAAd,MAAgB,CAAF;IACpF,OAAO,CACH,8BAAC,YAAY,oBAAK,KAAK;QACnB,8BAAC,aAAa,oBAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAiB,CACnE,CAClB,CAAC;AACN,CAAC,CAAC;AAEO,wBAAM"}

package/dist/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/dist/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/dist/components/layout/list/Header.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+const react_1 = __importDefault(require("react"));
+const Header_js_1 = require("./Header.js");
+const List_js_1 = require("./List.js");
+const meta = {
+    title: "Components/Layout/List/Header",
+    component: Header_js_1.Header,
+    tags: ["autodocs", "layout"],
+};
+const Primary = {
+    args: {
+        children: "Section name",
+    },
+    render: (args) => {
+        return (react_1.default.createElement(List_js_1.List, null,
+            react_1.default.createElement(Header_js_1.Header, Object.assign({}, args)),
+            react_1.default.createElement(List_js_1.List.Item, null, "Item 1"),
+            react_1.default.createElement(List_js_1.List.Item, null, "Item 2"),
+            react_1.default.createElement(List_js_1.List.Item, null, "Item 3"),
+            react_1.default.createElement(Header_js_1.Header, Object.assign({}, args)),
+            react_1.default.createElement(List_js_1.List.Item, null, "Item 1"),
+            react_1.default.createElement(List_js_1.List.Item, null, "Item 2"),
+            react_1.default.createElement(List_js_1.List.Item, null, "Item 3")));
+    },
+};
+exports.Primary = Primary;
+exports.default = meta;
+//# sourceMappingURL=Header.stories.js.map

package/dist/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,kDAA0B;AAI1B,2CAAqC;AACrC,uCAAiC;AAEjC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,+BAA+B;IACtC,SAAS,EAAE,kBAAM;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,8BAAC,cAAI;YACD,8BAAC,kBAAM,oBAAK,IAAI,EAAI;YACpB,8BAAC,cAAI,CAAC,IAAI,iBAAmB;YAC7B,8BAAC,cAAI,CAAC,IAAI,iBAAmB;YAC7B,8BAAC,cAAI,CAAC,IAAI,iBAAmB;YAC7B,8BAAC,kBAAM,oBAAK,IAAI,EAAI;YACpB,8BAAC,cAAI,CAAC,IAAI,iBAAmB;YAC7B,8BAAC,cAAI,CAAC,IAAI,iBAAmB;YAC7B,8BAAC,cAAI,CAAC,IAAI,iBAAmB,CAC1B,CACV,CAAC;IACN,CAAC;CACJ,CAAC;AAGE,0BAAO;AAGX,kBAAe,IAAI,CAAC"}

package/dist/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/dist/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/dist/components/layout/list/Item.js

@@ -14,31 +14,68 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Item = void 0;
+exports.ItemInnerContainerClassName = exports.Item = void 0;
 const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../../../utils/index.js");
 const Icon_js_1 = require("../../icons/Icon.js");
-const Item_module_scss_1 = __importDefault(require("./Item.module.scss"));
+const theme_js_1 = require("../../../theme.js");
 const Value_js_1 = require("./Value.js");
 const Label_js_1 = require("./Label.js");
-const icon = react_1.default.createElement(Icon_js_1.Icon, { className: Item_module_scss_1.default.icon, name: Icon_js_1.ICON.forward });
-const noIcon = react_1.default.createElement("span", { className: Item_module_scss_1.default.icon });
-const Item = (props) => {
-    const { className, children, href, to, onClick, Link, ratio, variant, selected } = props, restProps = __rest(props, ["className", "children", "href", "to", "onClick", "Link", "ratio", "variant", "selected"]);
-    const v = (0, index_js_1.makeVariants)(variant);
-    const cls = (0, classnames_1.default)(Item_module_scss_1.default.item, className);
-    const innerCls = (0, classnames_1.default)(Item_module_scss_1.default.content, {
-        [Item_module_scss_1.default.inset]: v.includes("inset"),
-        [Item_module_scss_1.default.selected]: selected,
-    });
-    const pre = typeof selected === "boolean"
-        ? (selected ? icon : noIcon)
-        : null;
-    const liProps = {
-        className: cls,
-    };
+const iconStyles = {
+    width: (0, theme_js_1.pxToRem)(7),
+    marginRight: (0, theme_js_1.pxToRem)(10),
+    display: "inline-block",
+};
+const StyledIcon = (0, theme_js_1.styled)(Icon_js_1.Icon, iconStyles);
+const StyledNoIcon = (0, theme_js_1.styled)("span", iconStyles);
+const icon = react_1.default.createElement(StyledIcon, { name: Icon_js_1.ICON.forward });
+const noIcon = react_1.default.createElement(StyledNoIcon, null);
+const StyledInnerContainer = (0, theme_js_1.styled)("div", {
+    display: "flex",
+    minHeight: (0, theme_js_1.dimensionsPxToRem)(174),
+    alignItems: "center",
+    gap: "1rem",
+    border: "none",
+    background: "none",
+    width: "100%",
+    textAlign: "left",
+    fontFamily: "inherit",
+    fontSize: "inherit",
+});
+const ItemInnerContainerClassName = StyledInnerContainer.toString();
+exports.ItemInnerContainerClassName = ItemInnerContainerClassName;
+const StyledItem = (0, theme_js_1.styled)("li", {
+    "listStyleType": "none",
+    "margin": 0,
+    "padding": 0,
+    "fontSize": (0, theme_js_1.fontPxToRem)(34),
+    "&:not(:first-child)": {
+        borderTop: "0.37px solid $headerBorder",
+    },
+    "> *": {
+        display: "block",
+        padding: 0,
+        textDecoration: "none",
+    },
+    "variants": {
+        inset: {
+            true: {
+                paddingLeft: (0, theme_js_1.dimensionsPxToRem)(37),
+                paddingRight: (0, theme_js_1.dimensionsPxToRem)(37),
+            },
+        },
+        selected: {
+            true: {
+                color: "$mainColor",
+            },
+        },
+    },
+});
+const Item = (_a) => {
+    var { href, to, onClick, Link, ratio } = _a, props = __rest(_a, ["href", "to", "onClick", "Link", "ratio"]);
     const r = ratio ? ratio.split("/") : [];
+    const pre = typeof props.selected === "boolean"
+        ? (props.selected ? icon : noIcon)
+        : null;
     const ren = react_1.default.Children.map(props.children, (child, index) => {
         let flex = undefined;
         if (!r.length && child && typeof child === "object" && "type" in child && child.type === Value_js_1.Value) {
@@ -55,24 +92,20 @@ const Item = (props) => {
         if (!Link) {
             throw new TypeError("`to` prop given without `Link` component");
         }
-        return react_1.default.createElement("li", Object.assign({}, liProps),
-            react_1.default.createElement(Link, Object.assign({ href: to }, restProps),
-                react_1.default.createElement("a", { className: innerCls }, ren)));
+        return (react_1.default.createElement(StyledItem, Object.assign({}, props),
+            react_1.default.createElement(Link, { href: to },
+                react_1.default.createElement(StyledInnerContainer, { as: "a", href: to }, ren))));
     }
     if (href) {
-        const aProps = Object.assign({}, restProps);
-        if (onClick) {
-            aProps.onClick = onClick;
-        }
-        return react_1.default.createElement("li", Object.assign({}, liProps),
-            react_1.default.createElement("a", Object.assign({ href: href }, aProps, { className: innerCls }), ren));
+        return (react_1.default.createElement(StyledItem, Object.assign({}, props),
+            react_1.default.createElement(StyledInnerContainer, { as: "a", href: href, onClick: onClick }, ren)));
     }
     if (onClick) {
-        return (react_1.default.createElement("li", Object.assign({}, liProps),
-            react_1.default.createElement("button", Object.assign({ className: (0, classnames_1.default)(Item_module_scss_1.default.button, innerCls), onClick: props.onClick }, restProps), ren)));
+        return (react_1.default.createElement(StyledItem, Object.assign({}, props),
+            react_1.default.createElement(StyledInnerContainer, { as: "button", onClick: onClick }, ren)));
     }
-    return react_1.default.createElement("li", Object.assign({}, liProps),
-        react_1.default.createElement("div", Object.assign({}, restProps, { className: innerCls }), ren));
+    return react_1.default.createElement(StyledItem, Object.assign({}, props),
+        react_1.default.createElement(StyledInnerContainer, null, ren));
 };
 exports.Item = Item;
 Item.Label = Label_js_1.Label;

package/dist/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/dist/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/dist/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"}

package/dist/components/layout/list/Item.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnClick = exports.Alignment = exports.Primary = void 0;
+const react_1 = __importDefault(require("react"));
+const NextLink_js_1 = require("../../../demo/NextLink.js");
+const Item_js_1 = require("./Item.js");
+const List_js_1 = require("./List.js");
+const meta = {
+    title: "Components/Layout/List/Item",
+    component: Item_js_1.Item,
+    tags: ["autodocs", "layout"],
+    argTypes: {
+        inset: {
+            type: "boolean",
+        },
+        Link: {
+            controls: "none",
+        },
+    },
+};
+const Primary = {
+    args: {
+        children: "I am a list item",
+        inset: false,
+        Link: NextLink_js_1.NextLink,
+    },
+    render: (args) => {
+        return react_1.default.createElement(List_js_1.List, null,
+            react_1.default.createElement(Item_js_1.Item, Object.assign({}, args)));
+    },
+};
+exports.Primary = Primary;
+const Alignment = {
+    args: {
+        children: [
+            react_1.default.createElement("div", { key: "1st" }, "first"),
+            react_1.default.createElement("div", { key: "2nd" }, "2nd"),
+            react_1.default.createElement("div", { key: "3rd" }, "last"),
+        ],
+        ratio: "1/2/1",
+    },
+    render: (args) => {
+        return react_1.default.createElement(List_js_1.List, null,
+            react_1.default.createElement(Item_js_1.Item, Object.assign({}, args)));
+    },
+};
+exports.Alignment = Alignment;
+const OnClick = {
+    args: {
+        children: "I am a list item, but I will render a button, click me",
+        onClick: () => {
+            alert("Clicked!");
+        },
+    },
+    render: (args) => {
+        return react_1.default.createElement(List_js_1.List, null,
+            react_1.default.createElement(Item_js_1.Item, Object.assign({}, args)));
+    },
+};
+exports.OnClick = OnClick;
+exports.default = meta;
+//# sourceMappingURL=Item.stories.js.map

package/dist/components/layout/list/Item.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.stories.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAI1B,2DAAqD;AAErD,uCAAiC;AACjC,uCAAiC;AAEjC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,cAAI;IACf,IAAI,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC;IAC5B,QAAQ,EAAE;QACN,KAAK,EAAE;YACH,IAAI,EAAE,SAAS;SAClB;QACD,IAAI,EAAE;YACF,QAAQ,EAAE,MAAM;SACnB;KACJ;CACJ,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE;QACF,QAAQ,EAAE,kBAAkB;QAC5B,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,sBAAQ;KACjB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,OAAO,8BAAC,cAAI;YAAC,8BAAC,cAAI,oBAAK,IAAI,EAAI,CAAO,CAAC;IAC3C,CAAC;CACJ,CAAC;AA6BE,0BAAO;AA3BX,MAAM,SAAS,GAAU;IACrB,IAAI,EAAE;QACF,QAAQ,EAAE;YACN,uCAAK,GAAG,EAAE,KAAK,YAAa;YAC5B,uCAAK,GAAG,EAAE,KAAK,UAAW;YAC1B,uCAAK,GAAG,EAAE,KAAK,WAAY;SAC9B;QACD,KAAK,EAAE,OAAO;KACjB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,OAAO,8BAAC,cAAI;YAAC,8BAAC,cAAI,oBAAK,IAAI,EAAI,CAAO,CAAC;IAC3C,CAAC;CACJ,CAAC;AAgBE,8BAAS;AAdb,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE;QACF,QAAQ,EAAE,wDAAwD;QAClE,OAAO,EAAE,GAAG,EAAE;YACV,KAAK,CAAC,UAAU,CAAC,CAAC;QACtB,CAAC;KACJ;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,OAAO,8BAAC,cAAI;YAAC,8BAAC,cAAI,oBAAK,IAAI,EAAI,CAAO,CAAC;IAC3C,CAAC;CACJ,CAAC;AAKE,0BAAO;AAGX,kBAAe,IAAI,CAAC"}

package/dist/components/layout/list/Label.d.ts

@@ -1,10 +1,88 @@
 import React from "react";
 import type { ReactNode } from "react";
-interface Props {
+declare const StyledLabel: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {}, {}, 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 StyledLabelProps = React.ComponentProps<typeof StyledLabel>;
+declare const Label: React.FC<StyledLabelProps & {
     sub?: ReactNode;
-    className?: string;
-    children: React.ReactNode;
-}
-declare const Label: React.FC<Props>;
+}>;
 export { Label };
 //# sourceMappingURL=Label.d.ts.map

package/dist/components/layout/list/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,UAAU,KAAK;IACX,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAS1B,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvC,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGf,CAAC;AAEH,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC;AAMjE,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,GAAG;IAAE,GAAG,CAAC,EAAE,SAAS,CAAA;CAAE,CAO3D,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/layout/list/Label.js

@@ -1,17 +1,35 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Label = void 0;
 const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const Label_module_scss_1 = __importDefault(require("./Label.module.scss"));
-const Label = (props) => {
-    const sub = props.sub ? react_1.default.createElement("div", { className: Label_module_scss_1.default.sub }, props.sub) : null;
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(Label_module_scss_1.default.root, props.className) },
+const theme_js_1 = require("../../../theme.js");
+const SubLabel = (0, theme_js_1.styled)("div", {
+    fontSize: (0, theme_js_1.fontPxToRem)(27),
+    color: "$sub",
+    marginTop: (0, theme_js_1.fontPxToRem)(27 / 3),
+});
+const StyledLabel = (0, theme_js_1.styled)("div", {
+    padding: `${(0, theme_js_1.dimensionsPxToRem)(54)} 0`,
+});
+const Label = (_a) => {
+    var { sub } = _a, props = __rest(_a, ["sub"]);
+    return (react_1.default.createElement(StyledLabel, Object.assign({}, props),
         react_1.default.createElement("div", null, props.children),
-        sub));
+        sub && react_1.default.createElement(SubLabel, null, sub)));
 };
 exports.Label = Label;
 //# sourceMappingURL=Label.js.map

package/dist/components/layout/list/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Label.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAG1B,4DAAoC;AAEpC,4EAAyC;AAQzC,MAAM,KAAK,GAAoB,CAAC,KAAK,EAAE,EAAE;IACrC,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,uCAAK,SAAS,EAAE,2BAAM,CAAC,GAAG,IAAG,KAAK,CAAC,GAAG,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,OAAO,CACH,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,2BAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;QACpD,2CAAM,KAAK,CAAC,QAAQ,CAAO;QAC1B,GAAG,CACF,CACT,CAAC;AACN,CAAC,CAAC;AAEO,sBAAK"}
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAG1B,gDAA2E;AAE3E,MAAM,QAAQ,GAAG,IAAA,iBAAM,EAAC,KAAK,EAAE;IAE3B,QAAQ,EAAE,IAAA,sBAAW,EAAC,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM;IAEb,SAAS,EAAE,IAAA,sBAAW,EAAC,EAAE,GAAG,CAAC,CAAC;CACjC,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,IAAA,iBAAM,EAAC,KAAK,EAAE;IAE9B,OAAO,EAAE,GAAG,IAAA,4BAAiB,EAAC,EAAE,CAAC,IAAI;CACxC,CAAC,CAAC;AAQH,MAAM,KAAK,GAAqD,CAAC,EAAiB,EAAE,EAAE;QAArB,EAAE,GAAG,OAAY,EAAP,KAAK,cAAf,OAAiB,CAAF;IAC5E,OAAO,CACH,8BAAC,WAAW,oBAAK,KAAK;QAClB,2CAAM,KAAK,CAAC,QAAQ,CAAO;QAC1B,GAAG,IAAI,8BAAC,QAAQ,QAAE,GAAG,CAAY,CACxB,CACjB,CAAC;AACN,CAAC,CAAC;AAEO,sBAAK"}

package/dist/components/layout/list/Label.stories.d.ts

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