@czi-sds/components 15.1.1 → 15.3.0

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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.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

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

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

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