@czi-sds/components 15.1.1 → 15.2.0

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;
+};

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

@@ -0,0 +1,80 @@
+"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.LivePreview = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var addon_actions_1 = require("@storybook/addon-actions");
+var react_1 = __importDefault(require("react"));
+var Button_1 = __importDefault(require("../Button"));
+var CalloutTitle_1 = __importDefault(require("./components/CalloutTitle"));
+var index_1 = __importDefault(require("./index"));
+var Callout = function (props) {
+    var intent = props.intent, onClose = props.onClose, calloutTitle = props.calloutTitle, autoDismiss = props.autoDismiss;
+    var _a = react_1.default.useState(false), dismissed = _a[0], setDismissed = _a[1];
+    var handleChange = function () {
+        setDismissed(function (prev) { return !prev; });
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!autoDismiss && ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Switch, { checked: dismissed, onChange: handleChange }), label: "Hide" })), (0, jsx_runtime_1.jsxs)(index_1.default, __assign({ autoDismiss: autoDismiss, intent: intent, dismissed: dismissed, onClose: onClose }, props, { children: [calloutTitle && (0, jsx_runtime_1.jsx)(CalloutTitle_1.default, { children: calloutTitle }), "This is a callout!"] })), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: handleChange, sdsType: "primary", sdsStyle: "rounded", children: "Reset Callout" })] }));
+};
+exports.default = {
+    argTypes: {
+        autoDismiss: {
+            control: { type: "select" },
+            options: [true, false, 4000, 12000, 20000],
+        },
+        intent: {
+            control: { type: "radio" },
+            options: ["info", "error", "success", "warning"],
+        },
+        onClose: {
+            control: {
+                labels: {
+                    "() => {}": true,
+                    undefined: undefined,
+                },
+                type: "select",
+            },
+            options: [(0, addon_actions_1.action)("onClick"), undefined],
+        },
+    },
+    component: Callout,
+    title: "Callout",
+};
+// Default
+exports.Default = {
+    args: {
+        autoDismiss: false,
+        calloutTitle: "this is a title",
+        intent: "success",
+        onClose: false,
+    },
+};
+// Live Preview
+var storyRow = {
+    alignItems: "flex-start",
+    display: "flex",
+    flexDirection: "row",
+    gap: "20px",
+};
+var LivePreviewDemo = function (props) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: storyRow, children: [(0, jsx_runtime_1.jsx)(index_1.default, __assign({ intent: "info" }, props, { style: { width: "180px" }, children: "Title" })), (0, jsx_runtime_1.jsxs)(index_1.default, __assign({ intent: "info" }, props, { style: { width: "180px" }, children: [(0, jsx_runtime_1.jsx)(CalloutTitle_1.default, { children: "Title" }), "Lorem ipsum dolor sit amet, consectetur adipiscing elit"] })), (0, jsx_runtime_1.jsxs)(index_1.default, __assign({ intent: "info", expandable: true, sdsStage: "closed" }, props, { style: { width: "180px" }, children: [(0, jsx_runtime_1.jsx)(CalloutTitle_1.default, { children: "Title" }), "Lorem ipsum dolor sit amet, consectetur adipiscing elit"] })), (0, jsx_runtime_1.jsxs)(index_1.default, __assign({ intent: "info" }, props, { 
+                // eslint-disable-next-line no-alert
+                onClose: function () { return alert("callout closed"); }, style: { width: "180px" }, children: [(0, jsx_runtime_1.jsx)(CalloutTitle_1.default, { children: "Title" }), "Lorem ipsum dolor sit amet, consectetur adipiscing elit"] }))] }));
+};
+exports.LivePreview = {
+    render: function (args) { return (0, jsx_runtime_1.jsx)(LivePreviewDemo, __assign({}, args)); },
+};

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

@@ -0,0 +1,7 @@
+import { AlertProps } from "@mui/material";
+import { CommonThemeProps } from "../styles";
+interface CalloutExtraProps extends CommonThemeProps {
+    collapsed?: boolean;
+}
+export declare const StyledCallout: import("@emotion/styled").StyledComponent<AlertProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CalloutExtraProps, {}, {}>;
+export {};

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

@@ -0,0 +1,31 @@
+"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.StyledCallout = void 0;
+var material_1 = require("@mui/material");
+var styles_1 = require("@mui/material/styles");
+var styles_2 = require("../styles");
+var defaultTheme_1 = require("../styles/common/defaultTheme");
+var fontBodyXs = (0, styles_2.fontBody)("xs");
+var doNotForwardProps = ["calloutTitle", "collapsed"];
+exports.StyledCallout = (0, styles_1.styled)(material_1.Alert, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontBodyXs, function (props) {
+    var colors = (0, styles_2.getColors)(props);
+    var spacings = (0, styles_2.getSpaces)(props);
+    var _a = props.severity, severity = _a === void 0 ? "success" : _a;
+    var corners = (0, styles_2.getCorners)(props);
+    var iconSizes = (0, styles_2.getIconSizes)(props);
+    var iconColor = (colors && colors[severity][400]) || "black";
+    var calloutColor = (colors && colors[severity][100]) || "white";
+    var backgroundColor = colors && colors[severity][100];
+    // when a title is present Mui's default styling has vertical margin,
+    // but for an expandable callout that is collapsed, we do not want
+    // any buttom margin
+    var titleBottomMargin = props.collapsed ? "margin-bottom: 0;" : "";
+    return "\n      background-color: ".concat(backgroundColor, ";\n      width: 360px;\n      margin: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px 0;\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n      color: ").concat(defaultTheme_1.defaultTheme.palette.text.primary, ";\n      padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n      background-color: ").concat(calloutColor, ";\n\n      .MuiAlert-icon {\n        height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, "px;\n        width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, "px;\n        margin-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n        padding: 0;\n        path {\n          fill: ").concat(iconColor, ";\n        }\n      }\n\n      .MuiAlert-message {\n        padding: 0;\n        margin-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n\n        .MuiAlertTitle-root{\n          margin-top: 0;\n          ").concat(titleBottomMargin, "\n        }\n      }\n\n      .MuiAlert-action {\n        margin-right: 0;\n        padding: 0;\n        align-items: flex-start;\n        margin-top: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n\n        > button {\n          padding: 0;\n        }\n      }\n    ");
+});
+var templateObject_1;

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("@czi-sds/components");
+var CellBasicNameSpaceTest = function (props) {
+    return ((0, jsx_runtime_1.jsx)("table", { children: (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)(components_1.CellBasic, { horizontalAlign: "center", verticalAlign: "center", icon: (0, jsx_runtime_1.jsx)(components_1.Icon, { sdsIcon: "download", sdsSize: "l", sdsType: "button" }), iconVerticalAlign: "center", primaryText: "Primary Text", primaryTextWrapLineCount: 2, secondaryText: "Secondary Text", secondaryTextWrapLineCount: 1, tertiaryText: "Tertiary Text", tertiaryTextWrapLineCount: 1, shouldShowTooltipOnHover: true, tooltipProps: { sdsStyle: "light" }, shouldTextWrap: true }) }) }) }));
+};

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { TooltipProps } from "../Tooltip";
+import { CellBasicExtraProps } from "./style";
+interface CellBasicContentProps extends Omit<React.HTMLProps<HTMLTableCellElement>, "as" | "nonce" | "rev" | "rel" | "autoFocus" | "content"> {
+    primaryText: string;
+    primaryTextWrapLineCount?: number;
+    secondaryText?: string;
+    secondaryTextWrapLineCount?: number;
+    tertiaryText?: string;
+    tertiaryTextWrapLineCount?: number;
+    shouldTextWrap?: boolean;
+    icon?: JSX.Element;
+    iconVerticalAlign?: "top" | "center" | "bottom";
+}
+export interface CellBasicRawProps {
+    shouldShowTooltipOnHover?: boolean;
+    tooltipProps?: Partial<TooltipProps>;
+}
+export type CellBasicProps = CellBasicRawProps & CellBasicExtraProps & CellBasicContentProps;
+declare const CellBasic: React.ForwardRefExoticComponent<Pick<CellBasicProps, "className" | "style" | "onChange" | "children" | "color" | "height" | "translate" | "verticalAlign" | "width" | "disabled" | "cite" | "data" | "form" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "theme" | "list" | "step" | "action" | "href" | "size" | "max" | "media" | "method" | "min" | "name" | "target" | "type" | "crossOrigin" | "classID" | "useMap" | "wmode" | "scoped" | "download" | "hrefLang" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dateTime" | "open" | "acceptCharset" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "sizes" | "srcSet" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "integrity" | "charSet" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "start" | "selected" | "async" | "defer" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "wrap" | "default" | "kind" | "srcLang" | "poster" | "icon" | "horizontalAlign" | "iconVerticalAlign" | "shouldTextWrap" | "primaryTextWrapLineCount" | "secondaryTextWrapLineCount" | "tertiaryTextWrapLineCount" | "primaryText" | "secondaryText" | "tertiaryText" | "shouldShowTooltipOnHover" | "tooltipProps"> & React.RefAttributes<HTMLTableCellElement>>;
+export default CellBasic;

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

@@ -0,0 +1,32 @@
+"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 });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Tooltip_1 = __importDefault(require("../Tooltip"));
+var style_1 = require("./style");
+var CellBasicContent = function (props) {
+    var primaryText = props.primaryText, primaryTextWrapLineCount = props.primaryTextWrapLineCount, secondaryText = props.secondaryText, secondaryTextWrapLineCount = props.secondaryTextWrapLineCount, tertiaryText = props.tertiaryText, tertiaryTextWrapLineCount = props.tertiaryTextWrapLineCount, _a = props.shouldTextWrap, shouldTextWrap = _a === void 0 ? true : _a, icon = props.icon, iconVerticalAlign = props.iconVerticalAlign;
+    return ((0, jsx_runtime_1.jsxs)(style_1.StyledCellContent, { children: [icon && ((0, jsx_runtime_1.jsx)(style_1.StyledCellIconWrapper, { iconVerticalAlign: iconVerticalAlign, children: icon })), (0, jsx_runtime_1.jsxs)(style_1.StyledCellContentWrapper, { children: [(0, jsx_runtime_1.jsx)(style_1.PrimaryText, { shouldTextWrap: shouldTextWrap, primaryTextWrapLineCount: primaryTextWrapLineCount, children: primaryText }), secondaryText && ((0, jsx_runtime_1.jsx)(style_1.SecondaryText, { shouldTextWrap: shouldTextWrap, secondaryTextWrapLineCount: secondaryTextWrapLineCount, children: secondaryText })), tertiaryText && ((0, jsx_runtime_1.jsx)(style_1.TertiaryText, { shouldTextWrap: shouldTextWrap, tertiaryTextWrapLineCount: tertiaryTextWrapLineCount, children: tertiaryText }))] })] }));
+};
+var CellBasic = (0, react_1.forwardRef)(function (props, ref) {
+    var primaryText = props.primaryText, secondaryText = props.secondaryText, _a = props.shouldShowTooltipOnHover, shouldShowTooltipOnHover = _a === void 0 ? true : _a, tooltipProps = props.tooltipProps;
+    if (shouldShowTooltipOnHover) {
+        return ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ title: primaryText, subtitle: secondaryText, arrow: true, leaveDelay: 0, leaveTouchDelay: 0, sdsStyle: "dark" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(style_1.StyledTableData, __assign({ ref: ref }, props, { children: (0, jsx_runtime_1.jsx)(CellBasicContent, __assign({}, props)) })) })));
+    }
+    return ((0, jsx_runtime_1.jsx)(style_1.StyledTableData, __assign({ ref: ref }, props, { children: (0, jsx_runtime_1.jsx)(CellBasicContent, __assign({}, props)) })));
+});
+exports.default = CellBasic;

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

@@ -0,0 +1,33 @@
+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: {
+        primaryText: string;
+        primaryTextWrapLineCount: number;
+        secondaryText: string;
+        secondaryTextWrapLineCount: number;
+        shouldShowTooltipOnHover: boolean;
+        shouldTextWrap: boolean;
+        tertiaryText: string;
+        tertiaryTextWrapLineCount: number;
+        tooltipProps: {
+            sdsStyle: string;
+        };
+    };
+};
+export declare const Test: {
+    args: {
+        primaryText: string;
+        secondaryText: string;
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};