@czi-sds/components 15.2.0 → 15.4.0

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

@@ -1,239 +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 __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.Test = exports.ScreenshotTest = exports.LivePreview = exports.Default = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var styles_1 = require("../styles");
-var index_1 = __importDefault(require("./index"));
-var SDS_TYPES = ["primary", "secondary", "tertiary"];
-var SDS_SIZES = ["large", "medium", "small"];
-var ON_OPTIONS = [false, true];
-var DISABLED_OPTIONS = [false, true];
-var PSEUDO_STATES = ["default", "hover", "active", "focus"];
-var ButtonIcon = function (props) {
-    var sdsIcon = props.sdsIcon, rest = __rest(props, ["sdsIcon"]);
-    var _a = react_1.default.useState(false), on = _a[0], setOn = _a[1];
-    var handleButtonClick = function () { return setOn(!on); };
-    return ((0, jsx_runtime_1.jsx)(index_1.default, __assign({ onClick: handleButtonClick, on: on, sdsIcon: sdsIcon, sdsSize: "medium", sdsType: "primary" }, rest)));
-};
-exports.default = {
-    argTypes: {
-        disabled: {
-            control: {
-                type: "boolean",
-            },
-        },
-        on: {
-            control: {
-                type: "boolean",
-            },
-        },
-        sdsIcon: {
-            control: {
-                type: "select",
-            },
-            options: [
-                "dotsHorizontal",
-                "copy",
-                "download",
-                "people",
-                "treeHorizontal",
-                "grid",
-                "virus",
-                "xMark",
-            ],
-        },
-        sdsSize: {
-            control: {
-                type: "select",
-            },
-            options: ["small", "medium", "large"],
-        },
-        sdsType: {
-            control: {
-                type: "select",
-            },
-            options: ["primary", "secondary", "tertiary"],
-        },
-    },
-    component: ButtonIcon,
-    title: "ButtonIcon",
-};
-// Default
-exports.Default = {
-    args: {
-        "aria-label": "info",
-        disabled: false,
-        sdsIcon: "dotsHorizontal",
-        sdsSize: "large",
-        sdsType: "primary",
-    },
-};
-// Live Preview
-var LivePreviewDemo = function () {
-    var spacings = styles_1.defaultAppTheme === null || styles_1.defaultAppTheme === void 0 ? void 0 : styles_1.defaultAppTheme.spacing;
-    var livePreviewStyles = {
-        alignItems: "center",
-        display: "grid",
-        gridColumnGap: "24px",
-        gridTemplateColumns: "repeat(7, min-content)",
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: livePreviewStyles, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: "flex" }, children: [(0, jsx_runtime_1.jsx)(ButtonIcon, { "aria-label": "grid", style: { marginRight: spacings === null || spacings === void 0 ? void 0 : spacings.xxs }, sdsIcon: "grid", sdsSize: "large", sdsType: "primary" }), (0, jsx_runtime_1.jsx)(ButtonIcon, { "aria-label": "grid", style: { marginRight: spacings === null || spacings === void 0 ? void 0 : spacings.xxs }, sdsIcon: "grid", sdsSize: "large", sdsType: "primary" })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex" }, children: [(0, jsx_runtime_1.jsx)(ButtonIcon, { "aria-label": "infoSpeechBubble", style: { marginRight: spacings === null || spacings === void 0 ? void 0 : spacings.m }, sdsIcon: "infoSpeechBubble", sdsSize: "large", sdsType: "secondary" }), (0, jsx_runtime_1.jsx)(ButtonIcon, { "aria-label": "infoSpeechBubble", style: { marginRight: spacings === null || spacings === void 0 ? void 0 : spacings.m }, sdsIcon: "infoSpeechBubble", sdsSize: "large", sdsType: "secondary" })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ButtonIcon, { "aria-label": "xMark", style: { marginRight: spacings === null || spacings === void 0 ? void 0 : spacings.m }, sdsIcon: "xMark", sdsSize: "large", sdsType: "tertiary" }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ButtonIcon, { "aria-label": "xMark", style: { marginRight: spacings === null || spacings === void 0 ? void 0 : spacings.m }, sdsIcon: "xMark", sdsSize: "medium", sdsType: "tertiary" }) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex" }, children: [(0, jsx_runtime_1.jsx)(ButtonIcon, { "aria-label": "barChartVertical3", style: { marginRight: spacings === null || spacings === void 0 ? void 0 : spacings.s }, sdsIcon: "barChartVertical3", sdsSize: "small", sdsType: "primary" }), (0, jsx_runtime_1.jsx)(ButtonIcon, { "aria-label": "barChartVertical3", style: { marginRight: spacings === null || spacings === void 0 ? void 0 : spacings.s }, sdsIcon: "barChartVertical3", sdsSize: "small", sdsType: "primary" })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex" }, children: [(0, jsx_runtime_1.jsx)(ButtonIcon, { "aria-label": "plusCircle", style: { marginRight: spacings === null || spacings === void 0 ? void 0 : spacings.s }, sdsIcon: "plusCircle", sdsSize: "small", sdsType: "secondary" }), (0, jsx_runtime_1.jsx)(ButtonIcon, { "aria-label": "plusCircle", style: { marginRight: spacings === null || spacings === void 0 ? void 0 : spacings.s }, sdsIcon: "plusCircle", sdsSize: "small", sdsType: "secondary" })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ButtonIcon, { "aria-label": "xMark", style: { marginRight: spacings === null || spacings === void 0 ? void 0 : spacings.s }, sdsIcon: "xMark", sdsSize: "small", sdsType: "tertiary" }) })] }));
-};
-exports.LivePreview = {
-    parameters: {
-        snapshot: {
-            skip: true,
-        },
-    },
-    render: function (args) { return (0, jsx_runtime_1.jsx)(LivePreviewDemo, __assign({}, args)); },
-};
-// Screenshot test
-var ScreenshotTestDemo = function () {
-    var DISPLAY_CONTENTS = {
-        display: "contents",
-    };
-    var MID_LABEL = {
-        borderStyle: "solid none none none",
-        gridColumn: "1 / 6",
-        justifySelf: "stretch",
-        paddingTop: 10,
-    };
-    // loop through all SDS_TYPES
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: SDS_TYPES.map(function (sdsType) {
-            return (0, jsx_runtime_1.jsx)(ButtonIconTypeOption, { sdsType: sdsType }, sdsType);
-        }) }));
-    // loop through all SDS_SIZES + create headers for SDS_TYPES
-    function ButtonIconTypeOption(_a) {
-        var sdsType = _a.sdsType;
-        var LEVEL_STYLE = {
-            columnGap: "20px",
-            display: "inline-grid",
-            fontFamily: "sans-serif",
-            marginRight: "50px",
-        };
-        var LABEL_STYLE = {
-            fontSize: "2em",
-            gridColumn: "1 / 6",
-            marginBottom: 0,
-        };
-        return ((0, jsx_runtime_1.jsxs)("div", { style: LEVEL_STYLE, children: [(0, jsx_runtime_1.jsxs)("p", { style: LABEL_STYLE, children: ["Type: ", (0, jsx_runtime_1.jsx)("b", { children: sdsType })] }), SDS_SIZES.map(function (sdsSize) {
-                    // primary and secondary types don't have medium size
-                    if ((sdsType === "primary" || sdsType === "secondary") &&
-                        sdsSize === "medium") {
-                        return null;
-                    }
-                    return ((0, jsx_runtime_1.jsx)(ButtonIconSizeOption, { sdsType: sdsType, sdsSize: sdsSize }, sdsSize));
-                })] }));
-    }
-    // loop through all ON_OPTIONS + create headers for SDS_SIZES
-    function ButtonIconSizeOption(_a) {
-        var sdsType = _a.sdsType, sdsSize = _a.sdsSize;
-        // establish which combinations have `on` as a prop (used below and passed to next loop)
-        var ON_LABEL_NEEDED = (sdsType === "primary" && sdsSize === "large") ||
-            (sdsType === "secondary" && sdsSize === "small");
-        var LABEL_STYLE = __assign(__assign({}, MID_LABEL), { borderWidth: "2px", fontSize: "1.17em", margin: "20px 0" });
-        return ((0, jsx_runtime_1.jsxs)("div", { style: DISPLAY_CONTENTS, children: [(0, jsx_runtime_1.jsxs)("p", { style: LABEL_STYLE, children: ["Size: ", (0, jsx_runtime_1.jsx)("b", { children: sdsSize })] }), ON_OPTIONS.map(function (on) {
-                    return (
-                    // for the combinations with `on` as a prop, loop through all values for `on`(true, false)
-                    // for the combinations without `on` as a prop, loop through only once
-                    (ON_LABEL_NEEDED ||
-                        ((sdsType === "tertiary" ||
-                            (sdsType === "primary" && sdsSize === "small") ||
-                            (sdsType === "secondary" && sdsSize === "large")) &&
-                            on === false)) && ((0, jsx_runtime_1.jsx)(ButtonIconOnOption, { sdsType: sdsType, sdsSize: sdsSize, on: on, onLabelNeeded: ON_LABEL_NEEDED }, String(on))));
-                })] }));
-    }
-    // loop through all DISABLED_OPTIONS + create headers for ON_OPTIONS
-    function ButtonIconOnOption(_a) {
-        var sdsType = _a.sdsType, sdsSize = _a.sdsSize, on = _a.on, onLabelNeeded = _a.onLabelNeeded;
-        var LABEL_STYLE = __assign(__assign({}, MID_LABEL), { alignSelf: "end", borderWidth: "1px", fontSize: "0.83em", fontWeight: "normal", margin: "0 0 5px 0" });
-        return ((0, jsx_runtime_1.jsxs)("div", { style: DISPLAY_CONTENTS, children: [onLabelNeeded && ((0, jsx_runtime_1.jsxs)("p", { style: LABEL_STYLE, children: ["On: ", (0, jsx_runtime_1.jsx)("b", { children: on ? "true" : "false" })] })), DISABLED_OPTIONS.map(function (disabled) {
-                    return ((0, jsx_runtime_1.jsx)(ButtonIconDisabledOption, { sdsType: sdsType, sdsSize: sdsSize, on: on, disabled: disabled }, String(disabled)));
-                })] }));
-    }
-    // loop through all PSEUDO_STATES + create headers for DISABLED_OPTIONS, PSEUDO_STATES
-    function ButtonIconDisabledOption(_a) {
-        var sdsType = _a.sdsType, sdsSize = _a.sdsSize, on = _a.on, disabled = _a.disabled;
-        var SDS_ICONS = {
-            primary: {
-                large: "grid",
-                small: "barChartVertical3",
-            },
-            secondary: {
-                large: "infoSpeechBubble",
-                small: "plusCircle",
-            },
-            tertiary: {
-                large: "xMark",
-                medium: "xMark",
-                small: "xMark",
-            },
-        };
-        var DISABLED_LEVEL = {
-            display: "contents",
-        };
-        var PSEUDO_STATE_LEVEL = {
-            marginBottom: 10,
-        };
-        var PSEUDO_STATE_LABEL = {
-            fontSize: "0.67em",
-            margin: "10px 0",
-        };
-        return ((0, jsx_runtime_1.jsx)("div", { style: DISABLED_LEVEL, children: PSEUDO_STATES.map(function (state) {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore: invalid `sdsIcon` is skipped in <ButtonIconTypeOption />
-                var sdsIcon = SDS_ICONS[sdsType][sdsSize];
-                return ((0, jsx_runtime_1.jsx)("div", { style: PSEUDO_STATE_LEVEL, children: (disabled === false ||
-                        (disabled === true && state === "default")) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("p", { style: PSEUDO_STATE_LABEL, children: [disabled === false ? "State: " : "Disabled: ", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("b", { children: disabled === false ? state : "true" })] }), (0, jsx_runtime_1.jsx)(ButtonIcon, { "aria-label": sdsIcon, sdsIcon: sdsIcon, "data-testid": "button-icon", sdsType: sdsType, sdsSize: sdsSize, on: on, disabled: disabled, className: "pseudo-".concat(state) }, state)] })) }, "div-".concat(state)));
-            }) }));
-    }
-    // }, // close render
-}; // close ScreenshotTest
-exports.ScreenshotTest = {
-    parameters: {
-        controls: {
-            exclude: ["disabled", "on", "sdsIcon", "sdsSize", "sdsType"],
-        },
-        snapshot: {
-            skip: true,
-        },
-    },
-    render: function (args) { return (0, jsx_runtime_1.jsx)(ScreenshotTestDemo, __assign({}, args)); },
-};
-// Test
-exports.Test = {
-    parameters: {
-        snapshot: {
-            skip: true,
-        },
-    },
-    render: function () {
-        return ((0, jsx_runtime_1.jsx)(index_1.default, { "aria-label": "dotsHorizontal", "data-testid": "iconButton", on: true, sdsIcon: "dotsHorizontal", sdsSize: "medium", sdsType: "primary" }));
-    },
-};

package/dist/src/core/ButtonIcon/index.test.d.ts

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

package/dist/src/core/ButtonIcon/index.test.js

@@ -1,41 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var story_utils_1 = require("@chanzuckerberg/story-utils");
-var react_1 = require("@storybook/react");
-var react_2 = require("@testing-library/react");
-var snapshotTestStoryFile = __importStar(require("./index.stories"));
-var index_stories_1 = __importStar(require("./index.stories"));
-// Returns a component that already contain all decorators from story level, meta level and global level.
-var Test = (0, react_1.composeStory)(index_stories_1.Test, index_stories_1.default);
-describe("<ButtonIcon />", function () {
-    (0, story_utils_1.generateSnapshots)(snapshotTestStoryFile);
-    it("renders ButtonIcon component", function () {
-        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
-        var elements = react_2.screen.getAllByTestId("iconButton");
-        expect(elements.length).toBeTruthy();
-    });
-});

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

@@ -1,41 +0,0 @@
-/// <reference types="react" />
-import { CommonThemeProps } from "../styles";
-export interface ButtonIconSizeToTypes {
-    small: "primary" | "secondary" | "tertiary";
-    medium: "tertiary";
-    large: "primary" | "secondary" | "tertiary";
-}
-export interface ButtonIconExtraProps<ButtonIconSize extends keyof ButtonIconSizeToTypes> extends CommonThemeProps {
-    on?: boolean;
-    disabled?: boolean;
-    sdsSize?: ButtonIconSize;
-    sdsType?: ButtonIconSizeToTypes[ButtonIconSize];
-}
-export declare const StyledButtonIcon: import("@emotion/styled").StyledComponent<{
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: import("@mui/types").OverridableStringUnion<"inherit" | "primary" | "secondary" | "default" | "error" | "info" | "success" | "warning", import("@mui/material").IconButtonPropsColorOverrides> | undefined;
-    disabled?: boolean | undefined;
-    disableFocusRipple?: boolean | undefined;
-    edge?: false | "end" | "start" | undefined;
-    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").IconButtonPropsSizeOverrides> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "color" | "disabled" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ButtonIconExtraProps<keyof ButtonIconSizeToTypes>, {}, {}>;

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

@@ -1,68 +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.StyledButtonIcon = void 0;
-var react_1 = require("@emotion/react");
-var material_1 = require("@mui/material");
-var styles_1 = require("@mui/material/styles");
-var warnings_1 = require("src/common/warnings");
-var styles_2 = require("../styles");
-var isOn = function (props) {
-    var sdsType = props.sdsType;
-    var colors = (0, styles_2.getColors)(props);
-    return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), sdsType !== "tertiary" &&
-        "\n      color: ".concat(sdsType === "primary" ? colors === null || colors === void 0 ? void 0 : colors.primary[600] : colors === null || colors === void 0 ? void 0 : colors.primary[400], ";\n\n      &:hover {\n        color: ").concat(colors === null || colors === void 0 ? void 0 : colors.primary[600], ";\n      }\n    "));
-};
-var isDisabled = function (props) {
-    var colors = (0, styles_2.getColors)(props);
-    return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), colors === null || colors === void 0 ? void 0 : colors.gray[300]);
-};
-var primary = function (props) {
-    var colors = (0, styles_2.getColors)(props);
-    var sdsSize = props.sdsSize;
-    return (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n    }\n  "], ["\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n    }\n  "])), colors === null || colors === void 0 ? void 0 : colors.primary[400], colors === null || colors === void 0 ? void 0 : colors.gray[200], sdsSize === "small"
-        ? colors === null || colors === void 0 ? void 0 : colors.primary[600]
-        : colors === null || colors === void 0 ? void 0 : colors.primary[400], colors === null || colors === void 0 ? void 0 : colors.primary[600]);
-};
-var secondary = function (props) {
-    var colors = (0, styles_2.getColors)(props);
-    return (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n\n    &:hover,\n    &:active {\n      background: none;\n      color: ", ";\n    }\n  "], ["\n    color: ", ";\n\n    &:hover,\n    &:active {\n      background: none;\n      color: ", ";\n    }\n  "])), colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.primary[400]);
-};
-var tertiary = function (props) {
-    var colors = (0, styles_2.getColors)(props);
-    return (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n\n    &:hover {\n      background: none;\n      color: black;\n    }\n\n    &:active {\n      color: black;\n    }\n  "], ["\n    color: ", ";\n\n    &:hover {\n      background: none;\n      color: black;\n    }\n\n    &:active {\n      color: black;\n    }\n  "])), colors === null || colors === void 0 ? void 0 : colors.gray[500]);
-};
-var small = function (props) {
-    var iconSizes = (0, styles_2.getIconSizes)(props);
-    return (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    &:hover {\n      background: none;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n    }\n  "], ["\n    &:hover {\n      background: none;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n    }\n  "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
-};
-var medium = function (props) {
-    var sdsType = props.sdsType;
-    var iconSizes = (0, styles_2.getIconSizes)(props);
-    if (sdsType === "primary" || sdsType === "secondary") {
-        (0, warnings_1.showWarningIfFirstOccurence)(warnings_1.SDSWarningTypes.ButtonIconMediumSize);
-    }
-    return (0, react_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    &:hover {\n      background: none;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n    }\n  "], ["\n    &:hover {\n      background: none;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n    }\n  "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width);
-};
-var large = function (props) {
-    var sdsType = props.sdsType;
-    var iconSizes = (0, styles_2.getIconSizes)(props);
-    return (0, react_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      ", "\n    }\n  "], ["\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      ", "\n    }\n  "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, sdsType === "primary" ? "margin: 5px;" : "");
-};
-var doNotForwardProps = [
-    "on",
-    "sdsSize",
-    "sdsType",
-    "sdsIcon",
-    "sdsIconProps",
-];
-exports.StyledButtonIcon = (0, styles_1.styled)(material_1.IconButton, {
-    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
-})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  padding: 0;\n\n  :focus-visible {\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  ", "\n"], ["\n  padding: 0;\n\n  :focus-visible {\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  ", "\n"])), function (props) {
-    var on = props.on, disabled = props.disabled, sdsSize = props.sdsSize, sdsType = props.sdsType;
-    return (0, react_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), sdsType === "primary" && primary(props), sdsType === "secondary" && secondary(props), sdsType === "tertiary" && tertiary(props), on && isOn(props), disabled && isDisabled(props), sdsSize === "small" && small(props), sdsSize === "medium" && medium(props), sdsSize === "large" && large(props));
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

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

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

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

@@ -1,18 +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 components_1 = require("@czi-sds/components");
-var CalloutNameSpaceTest = function (props) {
-    return ((0, jsx_runtime_1.jsxs)(components_1.Callout, __assign({}, props, { autoDismiss: true, intent: "info", dismissed: true, children: [(0, jsx_runtime_1.jsx)(components_1.CalloutTitle, { children: "Title" }), "This is a callout!"] })));
-};

package/dist/src/core/Callout/components/CalloutTitle/index.d.ts

@@ -1,3 +0,0 @@
-import { AlertTitleProps } from "@mui/material/AlertTitle";
-declare const CalloutTitle: ({ children }: AlertTitleProps) => JSX.Element;
-export default CalloutTitle;

package/dist/src/core/Callout/components/CalloutTitle/index.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var style_1 = require("./style");
-var CalloutTitle = function (_a) {
-    var children = _a.children;
-    return (0, jsx_runtime_1.jsx)(style_1.StyledCalloutTitle, { children: children });
-};
-exports.default = CalloutTitle;

package/dist/src/core/Callout/components/CalloutTitle/style.d.ts

@@ -1 +0,0 @@
-export declare const StyledCalloutTitle: import("@emotion/styled").StyledComponent<import("@mui/material").AlertTitleProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & import("src/core/styles").CommonThemeProps, {}, {}>;

package/dist/src/core/Callout/components/CalloutTitle/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.StyledCalloutTitle = void 0;
-var material_1 = require("@mui/material");
-var styles_1 = require("@mui/material/styles");
-var styles_2 = require("src/core/styles");
-var fontBodyXs = (0, styles_2.fontBody)("xs");
-exports.StyledCalloutTitle = (0, styles_1.styled)(material_1.AlertTitle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXs, function (props) {
-    var spacings = (0, styles_2.getSpaces)(props);
-    return "\n    margin: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxxs, "px 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;\n  ");
-});
-var templateObject_1;

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

@@ -1,18 +0,0 @@
-import { AlertProps } from "@mui/lab";
-import React from "react";
-declare const SDS_STAGE_OPEN = "open";
-declare const SDS_STAGE_CLOSED = "closed";
-export interface CalloutProps {
-    autoDismiss?: boolean | number;
-    dismissed?: boolean;
-    expandable?: boolean;
-    icon?: React.ReactNode;
-    intent: "info" | "error" | "success" | "warning";
-    sdsStage?: typeof SDS_STAGE_CLOSED | typeof SDS_STAGE_OPEN;
-}
-export type ExposedCalloutProps = Omit<AlertProps, "nonce" | "rev" | "rel" | "autoFocus" | "content"> & CalloutProps;
-/**
- * @see https://mui.com/material-ui/react-alert/
- */
-declare const Callout: ({ autoDismiss, children, dismissed, expandable, onClose, icon, intent, sdsStage, ...rest }: ExposedCalloutProps) => JSX.Element;
-export default Callout;

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

@@ -1,89 +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 __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 });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var material_1 = require("@mui/material");
-var react_1 = require("react");
-var ButtonIcon_1 = __importDefault(require("../ButtonIcon"));
-var Icon_1 = __importDefault(require("../Icon"));
-var style_1 = require("./style");
-var SDS_STAGE_OPEN = "open";
-var SDS_STAGE_CLOSED = "closed";
-/**
- * @see https://mui.com/material-ui/react-alert/
- */
-var Callout = function (_a) {
-    var _b, _c;
-    var autoDismiss = _a.autoDismiss, children = _a.children, dismissed = _a.dismissed, expandable = _a.expandable, onClose = _a.onClose, icon = _a.icon, intent = _a.intent, sdsStage = _a.sdsStage, rest = __rest(_a, ["autoDismiss", "children", "dismissed", "expandable", "onClose", "icon", "intent", "sdsStage"]);
-    var _d = (0, react_1.useState)(dismissed), hide = _d[0], setHide = _d[1];
-    var _e = (0, react_1.useState)(sdsStage || SDS_STAGE_CLOSED), stage = _e[0], setStage = _e[1];
-    (0, react_1.useEffect)(function () {
-        setHide(dismissed);
-        if (autoDismiss) {
-            var timeout = typeof autoDismiss === "boolean" ? 8000 : autoDismiss;
-            setTimeout(function () {
-                setHide(true);
-            }, timeout);
-        }
-    }, [dismissed, autoDismiss]);
-    var handleClose = function (event) {
-        setHide(true);
-        if (onClose)
-            onClose(event);
-    };
-    var getIcon = function () {
-        if (icon)
-            return icon;
-        switch (intent) {
-            case "success":
-                return (0, jsx_runtime_1.jsx)(Icon_1.default, { sdsSize: "l", sdsIcon: "checkCircle", sdsType: "static" });
-            case "info":
-                return (0, jsx_runtime_1.jsx)(Icon_1.default, { sdsSize: "l", sdsIcon: "infoCircle", sdsType: "static" });
-            default:
-                return ((0, jsx_runtime_1.jsx)(Icon_1.default, { sdsSize: "l", sdsIcon: "exclamationMarkCircle", sdsType: "static" }));
-        }
-    };
-    var getAction = function (collapsed) {
-        if (expandable) {
-            return ((0, jsx_runtime_1.jsx)(ButtonIcon_1.default, { "aria-label": collapsed ? "open" : "close", onClick: function () {
-                    setStage(collapsed ? SDS_STAGE_OPEN : SDS_STAGE_CLOSED);
-                }, sdsSize: "small", sdsType: "tertiary", sdsIcon: collapsed ? "chevronDown" : "chevronUp" }));
-        }
-        return onClose ? ((0, jsx_runtime_1.jsx)(ButtonIcon_1.default, { "aria-label": "Dismiss", onClick: handleClose, sdsSize: "small", sdsType: "tertiary", size: "large", sdsIcon: "xMark" })) : null;
-    };
-    var collapsed = (expandable && stage === SDS_STAGE_CLOSED) || false;
-    // when there is no CalloutTitlecomponent, or there is a single child element
-    // the contents of children will be used as the title
-    var calloutTitle = children;
-    var calloutContent;
-    var firstChildIsCalloutTitle = Array.isArray(children) && ((_c = (_b = children[0]) === null || _b === void 0 ? void 0 : _b.type) === null || _c === void 0 ? void 0 : _c.name) === "CalloutTitle";
-    if (firstChildIsCalloutTitle) {
-        calloutTitle = children[0], calloutContent = children.slice(1);
-    }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Grow, { in: !hide, children: (0, jsx_runtime_1.jsxs)(style_1.StyledCallout, __assign({ onClose: onClose ? handleClose : undefined, action: getAction(collapsed), icon: getIcon(), severity: intent, collapsed: collapsed || false }, rest, { children: [calloutTitle, !collapsed && calloutContent] })) }) }));
-};
-exports.default = Callout;

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

@@ -1,14 +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: {
-        autoDismiss: boolean;
-        calloutTitle: string;
-        intent: string;
-        onClose: boolean;
-    };
-};
-export declare const LivePreview: {
-    render: (args: Args) => JSX.Element;
-};