@czi-sds/components 15.1.0 → 15.2.0

package/dist/src/core/Link/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var style_1 = require("./style");
+/**
+ * @see https://mui.com/material-ui/react-link/
+ */
+var Link = (0, react_1.forwardRef)(function (props, ref) {
+    var sdsStyle = props.sdsStyle;
+    var underline;
+    if (sdsStyle === "default") {
+        underline = "none";
+    }
+    return (0, jsx_runtime_1.jsx)(style_1.StyledLink, __assign({}, props, { underline: underline, ref: ref }));
+});
+exports.default = Link;

package/dist/src/core/Link/index.stories.d.ts

@@ -0,0 +1,27 @@
+import { Args } from "@storybook/react";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Args>;
+export default _default;
+export declare const Default: {
+    args: {
+        sdsStyle: string;
+    };
+};
+export declare const LivePreview: {
+    parameters: {
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};
+export declare const ScreenshotTest: {
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};

package/dist/src/core/Link/index.stories.js

@@ -0,0 +1,99 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScreenshotTest = exports.LivePreview = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var index_1 = __importDefault(require("./index"));
+var Link = function (props) {
+    var sdsStyle = props.sdsStyle;
+    return ((0, jsx_runtime_1.jsx)(index_1.default, __assign({ href: "/", sdsStyle: sdsStyle }, props, { children: "Test Link" })));
+};
+exports.default = {
+    argTypes: {
+        sdsStyle: {
+            control: { type: "select" },
+            options: ["default", "dashed"],
+        },
+    },
+    component: Link,
+    title: "Link",
+};
+// Default
+exports.Default = {
+    args: {
+        sdsStyle: "default",
+    },
+};
+// Live Preview
+var livePreviewStyles = {
+    display: "grid",
+    fontFamily: "Open Sans",
+    gridColumnGap: "24px",
+    gridTemplateColumns: "repeat(2, 250px)",
+};
+var LivePreviewDemo = function (props) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: livePreviewStyles, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { children: "Lorem ipsum, dolor sit amet consectetur adipisicing elit." }), (0, jsx_runtime_1.jsx)(index_1.default, __assign({ href: "/", sdsStyle: "default" }, props, { children: "Learn More" }))] }), (0, jsx_runtime_1.jsxs)("p", { style: { backgroundColor: "#EFF2FC", padding: "10px" }, children: ["Lorem ipsum", " ", (0, jsx_runtime_1.jsx)(index_1.default, __assign({ href: "/", sdsStyle: "dashed" }, props, { children: "dolor sit apsidy" })), " ", "consectetur, adipisicing elit."] }), (0, jsx_runtime_1.jsxs)("p", { style: { backgroundColor: "#EFF2FC", padding: "10px" }, children: ["Lorem ipsum", " ", (0, jsx_runtime_1.jsx)(index_1.default, __assign({ href: "/", sdsStyle: "dashed", component: "button" }, props, { children: "button element" })), " ", "consectetur, adipisicing elit."] })] }));
+};
+exports.LivePreview = {
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(LivePreviewDemo, __assign({}, args)); },
+};
+// Screenshot test
+var ScreenshotTestDemo = function () {
+    var SDS_STYLES = ["default", "dashed"];
+    var PSEUDO_STATES = ["default", "hover", "active", "focus"];
+    // loop through all SDS_STYLES
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: SDS_STYLES.map(function (sdsStyle) {
+            return (0, jsx_runtime_1.jsx)(LinkStyle, { sdsStyle: sdsStyle }, sdsStyle);
+        }) }));
+    // loop through all PSEUDO_STATES + create headers for SDS_STYLES, PSEUDO_STATES
+    function LinkStyle(_a) {
+        var sdsStyle = _a.sdsStyle;
+        var STYLE_LEVEL = {
+            columnGap: "20px",
+            display: "inline-grid",
+            fontFamily: "sans-serif",
+            marginRight: 50,
+        };
+        var STYLE_LABEL = {
+            fontSize: "2em",
+            gridColumn: "1 / 5",
+            marginBottom: 10,
+        };
+        var PSEUDO_STATE_LABEL = {
+            fontSize: "0.67em",
+            marginBottom: 15,
+        };
+        return ((0, jsx_runtime_1.jsxs)("div", { style: STYLE_LEVEL, children: [(0, jsx_runtime_1.jsxs)("p", { style: STYLE_LABEL, children: ["Style: ", (0, jsx_runtime_1.jsx)("b", { children: sdsStyle })] }), PSEUDO_STATES.map(function (state) {
+                    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("p", { style: PSEUDO_STATE_LABEL, children: ["State: ", (0, jsx_runtime_1.jsx)("b", { children: state })] }), (0, jsx_runtime_1.jsx)(index_1.default, { href: "/", sdsStyle: sdsStyle, className: "pseudo-".concat(state), children: "Link text" }, state)] }, "div-".concat(state)));
+                })] }));
+    }
+};
+exports.ScreenshotTest = {
+    parameters: {
+        controls: {
+            exclude: ["sdsStyle"],
+        },
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(ScreenshotTestDemo, __assign({}, args)); },
+};

package/dist/src/core/Link/style.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { LinkProps as RawLinkProps } from "@mui/material";
+import { CommonThemeProps as StyleProps } from "../styles";
+export type LinkProps<C extends React.ElementType = "a"> = RawLinkProps<C, {
+    component?: C;
+}> & StyleProps & {
+    sdsStyle?: "default" | "dashed";
+};
+export declare const StyledLink: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").LinkTypeMap<{}, "a">>;

package/dist/src/core/Link/style.js

@@ -0,0 +1,30 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledLink = void 0;
+var react_1 = require("@emotion/react");
+var material_1 = require("@mui/material");
+var styles_1 = require("@mui/material/styles");
+var styles_2 = require("../styles");
+var sdsPropNames = ["sdsStyle"];
+var defaultStyle = function (props) {
+    var _a, _b;
+    var theme = props.theme;
+    return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n\n    &:hover,\n    &:focus {\n      color: ", ";\n    }\n  "], ["\n    color: ", ";\n\n    &:hover,\n    &:focus {\n      color: ", ";\n    }\n  "])), (_a = theme === null || theme === void 0 ? void 0 : theme.app) === null || _a === void 0 ? void 0 : _a.colors.primary[400], (_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.colors.primary[500]);
+};
+var dashedStyle = function (props) {
+    var border = (0, styles_2.getBorders)(props);
+    return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: inherit;\n    border-bottom: ", ";\n\n    &:hover,\n    &:focus {\n      text-decoration: none;\n      border-bottom: ", ";\n    }\n  "], ["\n    color: inherit;\n    border-bottom: ", ";\n\n    &:hover,\n    &:focus {\n      text-decoration: none;\n      border-bottom: ", ";\n    }\n  "])), border === null || border === void 0 ? void 0 : border.link.dashed, border === null || border === void 0 ? void 0 : border.link.solid);
+};
+exports.StyledLink = (0, styles_1.styled)(material_1.Link, {
+    shouldForwardProp: function (prop) {
+        return !sdsPropNames.includes(prop.toString());
+    },
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    var sdsStyle = props.sdsStyle;
+    return (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), sdsStyle === "default" && defaultStyle(props), sdsStyle === "dashed" && dashedStyle(props));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/core/List/List.namespace-test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/core/List/List.namespace-test.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("@czi-sds/components");
+var ListSpaceTest = function (props) {
+    return ((0, jsx_runtime_1.jsx)(components_1.List, { subheader: (0, jsx_runtime_1.jsx)(components_1.ListSubheader, { disableSticky: true, children: "Font sizes and spacing for an unordered list" }), children: (0, jsx_runtime_1.jsx)(components_1.ListItem, { fontSize: "l", marginBottom: "s", children: "fontSize=l marginBottom=s" }) }));
+};

package/dist/src/core/List/index.d.ts

@@ -0,0 +1,8 @@
+import { ListProps as RawListProps } from "@mui/material";
+import { ListExtraProps } from "./style";
+export type ListProps = ListExtraProps & Omit<RawListProps, "nonce" | "rev" | "rel" | "autoFocus" | "content">;
+/**
+ * @see https://mui.com/material-ui/react-list/
+ */
+declare const List: (props: ListProps) => JSX.Element;
+export default List;

package/dist/src/core/List/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("./style");
+/**
+ * @see https://mui.com/material-ui/react-list/
+ */
+var List = function (props) {
+    var ordered = props.ordered;
+    return ((0, jsx_runtime_1.jsx)(style_1.StyledList, __assign({ component: ordered ? "ol" : "ul", disablePadding: true }, props)));
+};
+exports.default = List;

package/dist/src/core/List/index.stories.d.ts

@@ -0,0 +1,4 @@
+import { Args } from "@storybook/react";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Args>;
+export default _default;
+export declare const Default: {};

package/dist/src/core/List/index.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ListItem_1 = __importDefault(require("../ListItem"));
+var ListSubheader_1 = __importDefault(require("../ListSubheader"));
+var index_1 = __importDefault(require("./index"));
+var List = function (props) {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(index_1.default, __assign({ subheader: (0, jsx_runtime_1.jsx)(ListSubheader_1.default, { disableSticky: true, children: "Font sizes and spacing for an unordered list" }) }, props, { children: [(0, jsx_runtime_1.jsx)(ListItem_1.default, { fontSize: "l", marginBottom: "s", children: "fontSize=l marginBottom=s" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { fontSize: "m", marginBottom: "s", children: "fontSize=m marginBottom=s" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { fontSize: "s", marginBottom: "xs", children: "fontSize=s marginBottom=xs" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { fontSize: "xs", marginBottom: "xs", children: "fontSize=xs marginBottom=xs" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { fontSize: "xxs", marginBottom: "xs", children: "fontSize=xxs marginBottom=xs" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { fontSize: "xxxs", marginBottom: "xxs", children: "fontSize=xxxs marginBottom=xxs" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { fontSize: "m", children: (0, jsx_runtime_1.jsx)("div", { style: { width: "200px" }, children: "Really long list item here to make it wrap, so we can see if the bullet is top aligned" }) })] })), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(index_1.default, __assign({ ordered: true, subheader: (0, jsx_runtime_1.jsx)(ListSubheader_1.default, { disableSticky: true, children: "Font sizes and spacing for a nested ordered list" }) }, props, { children: [(0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: (0, jsx_runtime_1.jsxs)("span", { children: ["Nested List 1", (0, jsx_runtime_1.jsxs)(index_1.default, { ordered: true, children: [(0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, fontSize: "l", marginBottom: "s", children: "fontSize=l marginBottom=s" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, fontSize: "m", marginBottom: "s", children: "fontSize=m marginBottom=s" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, fontSize: "s", marginBottom: "xs", children: "fontSize=s marginBottom=xs" })] })] }) }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: (0, jsx_runtime_1.jsxs)("span", { children: ["Nested List 2", (0, jsx_runtime_1.jsxs)(index_1.default, { ordered: true, children: [(0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, fontSize: "l", children: (0, jsx_runtime_1.jsxs)("span", { children: ["Nested List 2", (0, jsx_runtime_1.jsxs)(index_1.default, { ordered: true, children: [(0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, fontSize: "l", marginBottom: "s", children: "fontSize=l marginBottom=s" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, fontSize: "m", marginBottom: "s", children: "fontSize=m marginBottom=s" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, fontSize: "s", marginBottom: "xs", children: "fontSize=s marginBottom=xs" })] })] }) }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, fontSize: "m", marginBottom: "s", children: "fontSize=m marginBottom=s" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, fontSize: "s", marginBottom: "xs", children: "fontSize=s marginBottom=xs" })] })] }) }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: (0, jsx_runtime_1.jsxs)("span", { children: ["Nested List 3", (0, jsx_runtime_1.jsxs)(index_1.default, { ordered: true, children: [(0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, fontSize: "l", marginBottom: "s", children: "fontSize=l marginBottom=s" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, fontSize: "m", marginBottom: "s", children: "fontSize=m marginBottom=s" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, fontSize: "s", marginBottom: "xs", children: "fontSize=s marginBottom=xs" })] })] }) })] })), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(index_1.default, __assign({ ordered: true, subheader: (0, jsx_runtime_1.jsx)(ListSubheader_1.default, { disableSticky: true, children: "This is an ordered list" }) }, props, { children: [(0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "This is an ordered list item 1." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "This is an ordered list item 2." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "This is an ordered list item 3." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "This is an ordered list item 4." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "This is an ordered list item 5." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "This is an ordered list item 6." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "This is an ordered list item 7." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "This is an ordered list item 8." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "This is an ordered list item 9." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "This is an ordered list item 10." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "This is an ordered list item 11." })] })), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(index_1.default, __assign({ ordered: true, subheader: (0, jsx_runtime_1.jsx)(ListSubheader_1.default, { disableSticky: true, children: "This is an unordered list" }) }, props, { children: [(0, jsx_runtime_1.jsx)(ListItem_1.default, { children: "This is an unordered list item 1." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { children: "This is an unordered list item 2." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { children: "This is an unordered list item 3." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { children: "This is an unordered list item 4." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { children: "This is an unordered list item 5." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { children: "This is an unordered list item 6." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { children: "This is an unordered list item 7." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { children: "This is an unordered list item 8." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { children: "This is an unordered list item 9." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { children: "This is an unordered list item 10." }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { children: "This is an unordered list item 11." })] })), (0, jsx_runtime_1.jsxs)(index_1.default, __assign({ ordered: true, subheader: (0, jsx_runtime_1.jsx)(ListSubheader_1.default, { disableSticky: true, children: "Font sizes and spacing for a nested ordered list" }) }, props, { children: [(0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: (0, jsx_runtime_1.jsxs)("span", { children: ["Nested List 1", (0, jsx_runtime_1.jsxs)(index_1.default, { ordered: true, children: [(0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "Nested List item" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "Nested List item" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "Nested List item" })] })] }) }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: (0, jsx_runtime_1.jsxs)("span", { children: ["Nested List 2", (0, jsx_runtime_1.jsxs)(index_1.default, { ordered: true, children: [(0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: (0, jsx_runtime_1.jsxs)("span", { children: ["Nested List 2", (0, jsx_runtime_1.jsxs)(index_1.default, { ordered: true, children: [(0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "Nested List item" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "Nested List item" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "Nested List item" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "Nested List item" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "Nested List item" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "Nested List item" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "Nested List item" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "Nested List item" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "Nested List item" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "Nested List item" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "Nested List item" })] })] }) }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "Nested List item" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "Nested List item" })] })] }) }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: (0, jsx_runtime_1.jsxs)("span", { children: ["Nested List 3", (0, jsx_runtime_1.jsxs)(index_1.default, { ordered: true, children: [(0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "Nested List item" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "Nested List item" }), (0, jsx_runtime_1.jsx)(ListItem_1.default, { ordered: true, children: "Nested List item" })] })] }) })] }))] }));
+};
+exports.default = {
+    component: List,
+    title: "List",
+};
+// Default
+exports.Default = {};

package/dist/src/core/List/style.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { CommonThemeProps } from "../styles";
+export interface ListExtraProps extends CommonThemeProps {
+    component?: unknown;
+    marginBottom?: "xxxs" | "xxs" | "xs" | "s" | "m" | "l";
+    ordered?: boolean;
+}
+export declare const StyledList: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ListClasses> | undefined;
+    dense?: boolean | undefined;
+    disablePadding?: boolean | undefined;
+    subheader?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof import("react").HTMLAttributes<HTMLUListElement>> & {
+    ref?: ((instance: HTMLUListElement | null) => void) | import("react").RefObject<HTMLUListElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "dense" | "disablePadding" | "subheader"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ListExtraProps, {}, {}>;

package/dist/src/core/List/style.js

@@ -0,0 +1,33 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledList = void 0;
+var material_1 = require("@mui/material");
+var styles_1 = require("@mui/material/styles");
+var styles_2 = require("../styles");
+// (thuang): Please keep this in sync with the props used in `ListExtraProps`
+var doNotForwardProps = ["marginBotton", "ordered"];
+exports.StyledList = (0, styles_1.styled)(material_1.List, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .MuiListSubheader-root {\n    ", "\n  }\n\n  ", "\n"], ["\n  .MuiListSubheader-root {\n    ", "\n  }\n\n  ", "\n"])), propsToMarginBottom, function (props) {
+    if (!props.ordered)
+        return "";
+    return "\n      counter-reset: section;\n    ";
+});
+function propsToMarginBottom(props) {
+    var spacings = (0, styles_2.getSpaces)(props);
+    var propsToMarginBottomMap = {
+        l: spacings === null || spacings === void 0 ? void 0 : spacings.l,
+        m: spacings === null || spacings === void 0 ? void 0 : spacings.l,
+        s: spacings === null || spacings === void 0 ? void 0 : spacings.m,
+        xs: spacings === null || spacings === void 0 ? void 0 : spacings.m,
+        xxs: spacings === null || spacings === void 0 ? void 0 : spacings.m,
+        xxxs: spacings === null || spacings === void 0 ? void 0 : spacings.s,
+    };
+    var marginBottom = props.marginBottom;
+    return "\n    margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "s"], "px;\n  ");
+}
+var templateObject_1;

package/dist/src/core/ListItem/ListItem.namespace-test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/core/ListItem/ListItem.namespace-test.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("@czi-sds/components");
+var ListItemSpaceTest = function (props) {
+    return ((0, jsx_runtime_1.jsx)(components_1.ListItem, { fontSize: "l", marginBottom: "s", children: "fontSize=l marginBottom=s" }));
+};

package/dist/src/core/ListItem/index.d.ts

@@ -0,0 +1,9 @@
+import { ListItemProps as RawListItemProps } from "@mui/material";
+import { ListItemExtraProps, ListItemLabel } from "./style";
+export { ListItemLabel };
+export type ListItemProps = Omit<RawListItemProps, "nonce" | "rev" | "rel" | "autoFocus" | "content"> & ListItemExtraProps;
+/**
+ * @see https://mui.com/material-ui/react-list/
+ */
+declare const ListItem: (props: ListItemProps) => JSX.Element;
+export default ListItem;

package/dist/src/core/ListItem/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItemLabel = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("./style");
+Object.defineProperty(exports, "ListItemLabel", { enumerable: true, get: function () { return style_1.ListItemLabel; } });
+/**
+ * @see https://mui.com/material-ui/react-list/
+ */
+var ListItem = function (props) {
+    return (0, jsx_runtime_1.jsx)(style_1.StyledListItem, __assign({ disableGutters: true }, props));
+};
+exports.default = ListItem;

package/dist/src/core/ListItem/style.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { CommonThemeProps } from "../styles";
+export interface ListItemExtraProps extends CommonThemeProps {
+    marginBottom?: "s" | "xs" | "xxs";
+    fontSize?: "xxxs" | "xxs" | "xs" | "s" | "m" | "l";
+    ordered?: boolean;
+}
+export declare const StyledListItem: import("@emotion/styled").StyledComponent<{
+    button?: false | undefined;
+} & import("@mui/material").ListItemBaseProps & {
+    components?: {
+        Root?: import("react").ElementType<any> | undefined;
+    } | undefined;
+    componentsProps?: {
+        root?: (import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides) | undefined;
+    } | undefined;
+    slotProps?: {
+        root?: (import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides) | undefined;
+    } | undefined;
+    slots?: {
+        root?: import("react").ElementType<any> | undefined;
+    } | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
+}, "className" | "style" | "classes" | "children" | "sx" | "alignItems" | "disabled" | "disableGutters" | "button" | "autoFocus" | "selected" | "components" | "componentsProps" | "slotProps" | "slots" | "dense" | "disablePadding" | "ContainerComponent" | "ContainerProps" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ListItemExtraProps, {}, {}>;
+export declare const ListItemLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/src/core/ListItem/style.js

@@ -0,0 +1,56 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItemLabel = exports.StyledListItem = void 0;
+var material_1 = require("@mui/material");
+var styles_1 = require("@mui/material/styles");
+var styles_2 = require("../styles");
+var fontBodyL = (0, styles_2.fontBody)("l");
+var fontBodyM = (0, styles_2.fontBody)("m");
+var fontBodyS = (0, styles_2.fontBody)("s");
+var fontBodyXs = (0, styles_2.fontBody)("xs");
+var fontBodyXxs = (0, styles_2.fontBody)("xxs");
+var fontBodyXxxs = (0, styles_2.fontBody)("xxxs");
+// (thuang): Please keep this in sync with the props used in `ListItemExtraProps`
+var doNotForwardProps = ["marginBottom", "fontSize", "ordered"];
+exports.StyledListItem = (0, styles_1.styled)(material_1.ListItem, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n\n  padding: 0;\n\n  ", "\n\n  &:before {\n    display: inline-block;\n    font-weight: 600;\n\n    ", "\n  }\n"], ["\n  ", "\n  ", "\n\n  padding: 0;\n\n  ", "\n\n  &:before {\n    display: inline-block;\n    font-weight: 600;\n\n    ", "\n  }\n"])), propsToMarginBottom, propsToFontBody, function (props) {
+    var ordered = props.ordered;
+    var typography = props.theme.typography;
+    return "\n      align-items: flex-start;\n      font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n      ").concat(ordered ? "counter-increment: section;" : "", "\n    ");
+}, function (props) {
+    var spacings = (0, styles_2.getSpaces)(props);
+    var ordered = props.ordered;
+    return "\n        content: ".concat(ordered ? "counters(section, \".\")\".\"" : "\"\u2022\"", ";\n        margin-right: ").concat(ordered ? spacings === null || spacings === void 0 ? void 0 : spacings.xs : spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n      ");
+});
+function propsToFontBody(props) {
+    var propsToFontBodyMap = {
+        l: fontBodyL,
+        m: fontBodyM,
+        s: fontBodyS,
+        xs: fontBodyXs,
+        xxs: fontBodyXxs,
+        xxxs: fontBodyXxxs,
+    };
+    var fontSize = props.fontSize;
+    return propsToFontBodyMap[fontSize || "s"];
+}
+function propsToMarginBottom(props) {
+    var spacings = (0, styles_2.getSpaces)(props);
+    var propsToMarginBottomMap = {
+        s: spacings === null || spacings === void 0 ? void 0 : spacings.s,
+        xs: spacings === null || spacings === void 0 ? void 0 : spacings.xs,
+        xxs: spacings === null || spacings === void 0 ? void 0 : spacings.xxs,
+    };
+    var marginBottom = props.marginBottom;
+    return "\n    margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "xs"], "px;\n  ");
+}
+exports.ListItemLabel = (0, styles_1.styled)("span")(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-right: 5px;\n\n  ", "\n"], ["\n  margin-right: 5px;\n\n  ", "\n"])), function (props) {
+    var fontWeights = (0, styles_2.getFontWeights)(props);
+    return "\n      font-weight: ".concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n    ");
+});
+var templateObject_1, templateObject_2;

package/dist/src/core/ListSubheader/ListSubheader.namespace-test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/core/ListSubheader/ListSubheader.namespace-test.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("@czi-sds/components");
+var ListSubheaderNameSpaceTest = function (props) {
+    return ((0, jsx_runtime_1.jsx)(components_1.ListSubheader, { disableSticky: true, children: "Font sizes and spacing for an unordered list" }));
+};

package/dist/src/core/ListSubheader/index.d.ts

@@ -0,0 +1,7 @@
+import { ListSubheaderProps as RawListSubheaderProps } from "@mui/material";
+export type ListSubheaderProps = Omit<RawListSubheaderProps, "nonce" | "rev" | "rel" | "autoFocus" | "content">;
+/**
+ * @see https://mui.com/material-ui/react-list/
+ */
+declare const ListSubheader: (props: ListSubheaderProps) => JSX.Element;
+export default ListSubheader;

package/dist/src/core/ListSubheader/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("./style");
+/**
+ * @see https://mui.com/material-ui/react-list/
+ */
+var ListSubheader = function (props) {
+    return (0, jsx_runtime_1.jsx)(style_1.StyledListSubheader, __assign({ disableGutters: true }, props));
+};
+exports.default = ListSubheader;

package/dist/src/core/ListSubheader/style.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const StyledListSubheader: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ListSubheaderClasses> | undefined;
+    color?: "inherit" | "primary" | "default" | undefined;
+    disableGutters?: boolean | undefined;
+    disableSticky?: boolean | undefined;
+    inset?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "color" | "inset" | "disableGutters" | "disableSticky"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & import("../styles").CommonThemeProps, {}, {}>;

package/dist/src/core/ListSubheader/style.js

@@ -0,0 +1,16 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledListSubheader = void 0;
+var material_1 = require("@mui/material");
+var styles_1 = require("@mui/material/styles");
+var styles_2 = require("../styles");
+var fontHeaderM = (0, styles_2.fontHeader)("m");
+exports.StyledListSubheader = (0, styles_1.styled)(material_1.ListSubheader)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.MuiListSubheader-root {\n    ", "\n\n    line-height: unset;\n    color: unset;\n\n    ", "\n  }\n"], ["\n  &.MuiListSubheader-root {\n    ", "\n\n    line-height: unset;\n    color: unset;\n\n    ", "\n  }\n"])), fontHeaderM, function (props) {
+    var spacings = (0, styles_2.getSpaces)(props);
+    return "\n        margin-bottom: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n      ");
+});
+var templateObject_1;

package/dist/src/core/LoadingIndicator/LoadingIndicator.namespace-test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/core/LoadingIndicator/LoadingIndicator.namespace-test.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("@czi-sds/components");
+var LoadingIndicatorNameSpaceTest = function (props) {
+    return (0, jsx_runtime_1.jsx)(components_1.LoadingIndicator, { sdsStyle: "minimal" });
+};

package/dist/src/core/LoadingIndicator/index.d.ts

@@ -0,0 +1,4 @@
+import { LoadingIndicatorProps as RawLoadingIndicatorProps } from "./style";
+export type LoadingIndicatorProps = Omit<RawLoadingIndicatorProps, "nonce" | "rev" | "rel" | "autoFocus" | "content">;
+declare const LoadingIndicator: ({ sdsStyle }: LoadingIndicatorProps) => JSX.Element;
+export default LoadingIndicator;

package/dist/src/core/LoadingIndicator/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Icon_1 = __importDefault(require("../Icon"));
+var style_1 = require("./style");
+var LoadingIndicator = function (_a) {
+    var sdsStyle = _a.sdsStyle;
+    return ((0, jsx_runtime_1.jsxs)(style_1.StyledLoadingIndicator, { sdsStyle: sdsStyle, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { sdsIcon: "loading", sdsSize: "l", sdsType: "static" }), (0, jsx_runtime_1.jsx)(style_1.StyledText, { children: "Loading" })] }));
+};
+exports.default = LoadingIndicator;

package/dist/src/core/LoadingIndicator/index.stories.d.ts

@@ -0,0 +1,24 @@
+import { Args } from "@storybook/react";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Args>;
+export default _default;
+export declare const Default: {
+    args: {
+        sdsStyle: string;
+    };
+};
+export declare const LivePreview: {
+    parameters: {
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};
+export declare const Test: {
+    parameters: {
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};