@czi-sds/components 15.3.0 → 15.4.0

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

@@ -1,28 +0,0 @@
-"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

@@ -1,27 +0,0 @@
-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

@@ -1,99 +0,0 @@
-"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

@@ -1,9 +0,0 @@
-/// <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

@@ -1,30 +0,0 @@
-"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

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

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

@@ -1,7 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-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

@@ -1,23 +0,0 @@
-"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

@@ -1,4 +0,0 @@
-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

@@ -1,30 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-/// <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

@@ -1,33 +0,0 @@
-"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

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

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

@@ -1,7 +0,0 @@
-"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

@@ -1,9 +0,0 @@
-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

@@ -1,24 +0,0 @@
-"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

@@ -1,26 +0,0 @@
-/// <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

@@ -1,56 +0,0 @@
-"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

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

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

@@ -1,7 +0,0 @@
-"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

@@ -1,7 +0,0 @@
-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

@@ -1,22 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-/// <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

@@ -1,16 +0,0 @@
-"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

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

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

@@ -1,7 +0,0 @@
-"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

@@ -1,4 +0,0 @@
-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

@@ -1,13 +0,0 @@
-"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

@@ -1,24 +0,0 @@
-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;
-};