react-miui 0.20.0 → 0.21.0

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Label.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAInC,QAAA,MAAM,IAAI,EAAE,IASX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,QAAA,MAAM,OAAO,EAAE,KAiBd,CAAC;AAEF,OAAO,EACH,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,35 @@
+"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 Label_js_1 = require("./Label.js");
+const List_js_1 = require("./List.js");
+const Item_js_1 = require("./Item.js");
+const meta = {
+    title: "Components/Layout/List/Label",
+    component: Label_js_1.Label,
+    tags: ["autodocs", "layout"],
+    argTypes: {
+        sub: {
+            type: "string",
+        },
+    },
+};
+const Primary = {
+    args: {
+        children: "I am a label",
+        sub: "Sub text",
+    },
+    render: (args) => {
+        return (react_1.default.createElement(List_js_1.List, null,
+            react_1.default.createElement(Item_js_1.Item, null,
+                react_1.default.createElement(Label_js_1.Label, Object.assign({}, args))),
+            react_1.default.createElement(Item_js_1.Item, null, "I am classic list item")));
+    },
+};
+exports.Primary = Primary;
+exports.default = meta;
+//# sourceMappingURL=Label.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.stories.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Label.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAI1B,yCAAmC;AACnC,uCAAiC;AACjC,uCAAiC;AAEjC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,gBAAK;IAChB,IAAI,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC;IAC5B,QAAQ,EAAE;QACN,GAAG,EAAE;YACD,IAAI,EAAE,QAAQ;SACjB;KACJ;CACJ,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE;QACF,QAAQ,EAAE,cAAc;QACxB,GAAG,EAAE,UAAU;KAClB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,OAAO,CACH,8BAAC,cAAI;YACD,8BAAC,cAAI;gBACD,8BAAC,gBAAK,oBAAK,IAAI,EAAI,CAChB;YACP,8BAAC,cAAI,iCAEE,CACJ,CACV,CAAC;IACN,CAAC;CACJ,CAAC;AAGE,0BAAO;AAGX,kBAAe,IAAI,CAAC"}

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

@@ -1,14 +1,93 @@
 import React from "react";
 import { Header } from "./Header.js";
-type Variant = "inset";
-interface Props {
-    className?: string;
-    variant?: Variant | Variant[];
-    children: React.ReactNode;
-}
+import { Item } from "./Item.js";
 interface SubComponents {
     Header: typeof Header;
+    Item: typeof Item;
 }
-declare const List: React.FC<Props> & SubComponents;
+declare const StyledList: import("@stitches/react/types/styled-component.js").StyledComponent<"ul", {
+    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 StyledListProps = React.ComponentProps<typeof StyledList>;
+declare const List: React.FC<StyledListProps> & SubComponents;
 export { List };
 //# sourceMappingURL=List.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAIrC,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,UAAU,aAAa;IACnB,MAAM,EAAE,OAAO,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aAoB7B,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/List.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,UAAU,aAAa;IACnB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,IAAI,EAAE,OAAO,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAYd,CAAC;AAEH,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAc/D,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,GAAG,aAavC,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC"}

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

@@ -5,26 +5,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = void 0;
 const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../../../utils/index.js");
+const theme_js_1 = require("../../../theme.js");
 const Header_js_1 = require("./Header.js");
 const Item_js_1 = require("./Item.js");
-const List_module_scss_1 = __importDefault(require("./List.module.scss"));
+const StyledList = (0, theme_js_1.styled)("ul", {
+    margin: `0 ${(0, theme_js_1.pxToRem)(23)}`,
+    padding: 0,
+    variants: {
+        inset: {
+            true: {
+                margin: 0,
+            },
+        },
+    },
+});
 const List = (props) => {
-    const v = (0, index_js_1.makeVariants)(props.variant);
     const chld = react_1.default.Children.map(props.children, (child) => {
         if (child && typeof child === "object" && "type" in child && (child.type === Item_js_1.Item || child.type === Header_js_1.Header)) {
             return react_1.default.cloneElement(child, {
-                variant: props.variant,
+                inset: props.inset,
             });
         }
         return child;
     });
-    const cls = (0, classnames_1.default)(props.className, List_module_scss_1.default.list, {
-        [List_module_scss_1.default.inset]: v.includes("inset"),
-    });
-    return (react_1.default.createElement("ul", { className: cls }, chld));
+    return (react_1.default.createElement(StyledList, Object.assign({}, props), chld));
 };
 exports.List = List;
 List.Header = Header_js_1.Header;
+List.Item = Item_js_1.Item;
 //# sourceMappingURL=List.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,4DAAoC;AAEpC,sDAAuD;AAEvD,2CAAqC;AACrC,uCAAiC;AACjC,0EAAwC;AAcxC,MAAM,IAAI,GAAoC,CAAC,KAAK,EAAE,EAAE;IACpD,MAAM,CAAC,GAAG,IAAA,uBAAY,EAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,IAAI,GAAG,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACtD,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,cAAI,IAAI,KAAK,CAAC,IAAI,KAAK,kBAAM,CAAC,EAAE;YACzG,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE;gBAE7B,OAAO,EAAE,KAAK,CAAC,OAAO;aACzB,CAAC,CAAC;SACN;QACD,OAAO,KAAK,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,IAAA,oBAAU,EAAC,KAAK,CAAC,SAAS,EAAE,0BAAM,CAAC,IAAI,EAAE;QACjD,CAAC,0BAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;KACtC,CAAC,CAAC;IAEH,OAAO,CACH,sCAAI,SAAS,EAAE,GAAG,IAAG,IAAI,CAAM,CAClC,CAAC;AACN,CAAC,CAAC;AAIO,oBAAI;AAFb,IAAI,CAAC,MAAM,GAAG,kBAAM,CAAC"}
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,gDAAoD;AAEpD,2CAAqC;AACrC,uCAAiC;AAOjC,MAAM,UAAU,GAAG,IAAA,iBAAM,EAAC,IAAI,EAAE;IAE5B,MAAM,EAAE,KAAK,IAAA,kBAAO,EAAC,EAAE,CAAC,EAAE;IAC1B,OAAO,EAAE,CAAC;IAEV,QAAQ,EAAE;QACN,KAAK,EAAE;YACH,IAAI,EAAE;gBACF,MAAM,EAAE,CAAC;aACZ;SACJ;KACJ;CACJ,CAAC,CAAC;AAgBH,MAAM,IAAI,GAA8C,CAAC,KAAK,EAAE,EAAE;IAC9D,MAAM,IAAI,GAAG,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACtD,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,cAAI,IAAI,KAAK,CAAC,IAAI,KAAK,kBAAM,CAAC,EAAE;YACzG,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE;gBAC7B,KAAK,EAAE,KAAK,CAAC,KAAK;aACrB,CAAC,CAAC;SACN;QACD,OAAO,KAAK,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,8BAAC,UAAU,oBAAK,KAAK,GAAG,IAAI,CAAc,CAC7C,CAAC;AACN,CAAC,CAAC;AAIO,oBAAI;AAHb,IAAI,CAAC,MAAM,GAAG,kBAAM,CAAC;AACrB,IAAI,CAAC,IAAI,GAAG,cAAI,CAAC"}

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

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

package/dist/components/layout/list/List.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/List.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IASX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,QAAA,MAAM,OAAO,EAAE,KAYd,CAAC;AAEF,QAAA,MAAM,mBAAmB,EAAE,KAyC1B,CAAC;AAEF,OAAO,EACH,OAAO,EACP,mBAAmB,GACtB,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullFeaturedExample = exports.Primary = void 0;
+const react_1 = __importDefault(require("react"));
+const Icon_js_1 = require("../../icons/Icon.js");
+const List_js_1 = require("./List.js");
+const meta = {
+    title: "Components/Layout/List/List",
+    component: List_js_1.List,
+    tags: ["autodocs", "layout"],
+    argTypes: {
+        inset: {
+            type: "boolean",
+        },
+    },
+};
+const Primary = {
+    args: {
+        inset: false,
+    },
+    render: (args) => {
+        return (react_1.default.createElement(List_js_1.List, Object.assign({}, args),
+            react_1.default.createElement(List_js_1.List.Item, null, "I am a list item"),
+            react_1.default.createElement(List_js_1.List.Item, null, "I am a list item")));
+    },
+};
+exports.Primary = Primary;
+const FullFeaturedExample = {
+    render: (args) => {
+        return (react_1.default.createElement(List_js_1.List, null,
+            react_1.default.createElement(List_js_1.List.Header, null, "GPS settings"),
+            react_1.default.createElement(List_js_1.List.Item, null,
+                react_1.default.createElement(List_js_1.List.Item.Label, { sub: "Higher precision means higher battery usage" }, "GPS precision"),
+                react_1.default.createElement(List_js_1.List.Item.Value, null, "Low"),
+                react_1.default.createElement(Icon_js_1.Icon, { name: Icon_js_1.ICON.forward })),
+            react_1.default.createElement(List_js_1.List.Item, null,
+                react_1.default.createElement(List_js_1.List.Item, null, "Something")),
+            react_1.default.createElement(List_js_1.List.Header, null, "Last trips"),
+            react_1.default.createElement(List_js_1.List.Item, null, "Portugal"),
+            react_1.default.createElement(List_js_1.List.Item, null,
+                react_1.default.createElement(List_js_1.List.Item.Label, { sub: "Visited 2 times in last year" }, "Poland")),
+            react_1.default.createElement(List_js_1.List.Item, null, "Sweden"),
+            react_1.default.createElement(List_js_1.List.Header, null, "Choose one option"),
+            react_1.default.createElement(List_js_1.List.Item, { selected: true }, "yes"),
+            react_1.default.createElement(List_js_1.List.Item, { selected: false }, "no")));
+    },
+};
+exports.FullFeaturedExample = FullFeaturedExample;
+exports.default = meta;
+//# sourceMappingURL=List.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.stories.js","sourceRoot":"","sources":["../../../../src/components/layout/list/List.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAI1B,iDAAiD;AAEjD,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;KACJ;CACJ,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE;QACF,KAAK,EAAE,KAAK;KACf;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,OAAO,CACH,8BAAC,cAAI,oBAAK,IAAI;YACV,8BAAC,cAAI,CAAC,IAAI,2BAA6B;YACvC,8BAAC,cAAI,CAAC,IAAI,2BAA6B,CACpC,CACV,CAAC;IACN,CAAC;CACJ,CAAC;AA8CE,0BAAO;AA5CX,MAAM,mBAAmB,GAAU;IAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,OAAO,CACH,8BAAC,cAAI;YACD,8BAAC,cAAI,CAAC,MAAM,uBAA2B;YACvC,8BAAC,cAAI,CAAC,IAAI;gBACN,8BAAC,cAAI,CAAC,IAAI,CAAC,KAAK,IAAC,GAAG,EAAE,6CAA6C,oBAEjD;gBAClB,8BAAC,cAAI,CAAC,IAAI,CAAC,KAAK,cAEE;gBAClB,8BAAC,cAAI,IAAC,IAAI,EAAE,cAAI,CAAC,OAAO,GAAI,CACpB;YACZ,8BAAC,cAAI,CAAC,IAAI;gBACN,8BAAC,cAAI,CAAC,IAAI,oBAEE,CACJ;YACZ,8BAAC,cAAI,CAAC,MAAM,qBAEE;YACd,8BAAC,cAAI,CAAC,IAAI,mBAEE;YACZ,8BAAC,cAAI,CAAC,IAAI;gBACN,8BAAC,cAAI,CAAC,IAAI,CAAC,KAAK,IAAC,GAAG,EAAE,8BAA8B,aAElC,CACV;YACZ,8BAAC,cAAI,CAAC,IAAI,iBAEE;YACZ,8BAAC,cAAI,CAAC,MAAM,4BAEE;YACd,8BAAC,cAAI,CAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,UAAiB;YAC1C,8BAAC,cAAI,CAAC,IAAI,IAAC,QAAQ,EAAE,KAAK,SAAgB,CACvC,CACV,CAAC;IACN,CAAC;CACJ,CAAC;AAIE,kDAAmB;AAGvB,kBAAe,IAAI,CAAC"}

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

@@ -1,2 +1,82 @@
-export { StyledValue as Value } from "./Value.styled.js";
+declare const Value: 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;
+    };
+}>>;
+export { Value };
 //# sourceMappingURL=Value.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,KAAK,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Value.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAOT,CAAC;AAEH,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -1,6 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Value = void 0;
-var Value_styled_js_1 = require("./Value.styled.js");
-Object.defineProperty(exports, "Value", { enumerable: true, get: function () { return Value_styled_js_1.StyledValue; } });
+const theme_js_1 = require("../../../theme.js");
+const Value = (0, theme_js_1.styled)("div", {
+    color: "$icon",
+    fontSize: (0, theme_js_1.fontPxToRem)(26),
+    display: "flex",
+    justifyContent: "flex-end",
+    flex: 1,
+});
+exports.Value = Value;
 //# sourceMappingURL=Value.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Value.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Value.tsx"],"names":[],"mappings":";;;AAAA,qDAAyD;AAAhD,wGAAA,WAAW,OAAS"}
+{"version":3,"file":"Value.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Value.tsx"],"names":[],"mappings":";;;AAAA,gDAAwD;AAKxD,MAAM,KAAK,GAAG,IAAA,iBAAM,EAAC,KAAK,EAAE;IACxB,KAAK,EAAE,OAAO;IAEd,QAAQ,EAAE,IAAA,sBAAW,EAAC,EAAE,CAAC;IACzB,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,UAAU;IAC1B,IAAI,EAAE,CAAC;CACV,CAAC,CAAC;AAEM,sBAAK"}

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

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

package/dist/components/layout/list/Value.stories.d.ts.map

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