@czi-sds/components 15.1.0 → 15.2.0

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

@@ -0,0 +1,154 @@
+"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;
+};
+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 __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;
+};
+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.LivePreview = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var react_1 = require("react");
+var utils_1 = require("src/common/utils");
+var Tag_1 = __importDefault(require("../Tag"));
+var index_1 = __importStar(require("./index"));
+var Tabs = function (props) {
+    var tabOneLabel = props.tabOneLabel, tabTwoLabel = props.tabTwoLabel, tabOneCount = props.tabOneCount, tabTwoCount = props.tabTwoCount, args = __rest(props, ["tabOneLabel", "tabTwoLabel", "tabOneCount", "tabTwoCount"]);
+    var _a = (0, react_1.useState)(0), value = _a[0], setValue = _a[1];
+    var handleTabsChange = function (_, tabsValue) {
+        setValue(tabsValue);
+    };
+    return ((0, jsx_runtime_1.jsxs)(index_1.default, __assign({}, args, { value: value, onChange: handleTabsChange, children: [(0, jsx_runtime_1.jsx)(index_1.Tab, { label: tabOneLabel, count: tabOneCount }), (0, jsx_runtime_1.jsx)(index_1.Tab, { label: tabTwoLabel, count: tabTwoCount })] })));
+};
+exports.default = {
+    argTypes: {
+        sdsSize: {
+            control: { type: "select" },
+            options: ["large", "small"],
+        },
+        tabOneLabel: {
+            control: {
+                type: "text",
+            },
+        },
+        tabTwoLabel: {
+            control: {
+                type: "text",
+            },
+        },
+        underlined: {
+            control: {
+                type: "boolean",
+            },
+        },
+    },
+    component: Tabs,
+    parameters: {
+        // tab indicator bug known by MUI where width for indicator updates once font is loaded in.
+        // delay allows for font to load and prevents chromatic from constantly creating new baselines
+        // https://github.com/mui/material-ui/blob/v4.x/packages/material-ui/src/Tabs/Tabs.js#L194
+        chromatic: { delay: 10000 },
+    },
+    title: "Tabs",
+};
+// Default
+exports.Default = {
+    args: {
+        sdsSize: "large",
+        tabOneLabel: "Upload from Your Computer",
+        tabTwoLabel: "Upload from Basespace",
+        underlined: true,
+    },
+    parameters: {
+        // tab indicator bug known by MUI where width for indicator updates once font is loaded in.
+        // delay allows for font to load and prevents chromatic from constantly creating new baselines
+        // https://github.cwom/mui/material-ui/blob/v4.x/packages/material-ui/src/Tabs/Tabs.js#L194
+        chromatic: { delay: 5000 },
+    },
+};
+// LivePreview
+var livePreviewWrapperStyle = {
+    alignItems: "center",
+    display: "flex",
+    gap: "40px",
+    width: "100%",
+};
+function LivePreviewDemo(props) {
+    var finalProps = __assign(__assign({}, props), { style: { width: "150px" } });
+    return ((0, jsx_runtime_1.jsxs)("div", { style: livePreviewWrapperStyle, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Tabs, __assign({ onChange: utils_1.noop, sdsSize: "large", tabOneLabel: "Label", tabTwoLabel: "Label", underlined: true }, finalProps)) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Tabs, __assign({ onChange: utils_1.noop, sdsSize: "large", tabOneLabel: "Label", tabTwoLabel: "Label", tabOneCount: 0, tabTwoCount: 0, underlined: true }, finalProps)) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Tabs, __assign({ sdsSize: "small", onChange: utils_1.noop, tabOneLabel: "Label", tabTwoLabel: "Label", underlined: true }, finalProps)) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Tabs, __assign({ sdsSize: "small", onChange: utils_1.noop, tabOneLabel: "Label", tabTwoLabel: "Label", tabOneCount: 0, tabTwoCount: 0, underlined: true }, finalProps)) })] }));
+}
+exports.LivePreview = {
+    parameters: {
+        chromatic: { delay: 5000 },
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(LivePreviewDemo, __assign({}, args)); },
+};
+// Test
+function TestDemo(props) {
+    var finalProps = __assign(__assign({}, props), { "data-testid": "tabs", style: { width: "400px" } });
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: livePreviewWrapperStyle, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { children: "Default" }), (0, jsx_runtime_1.jsx)(Tabs, __assign({ tabOneLabel: "Tab One", tabTwoLabel: "Tab Two", tabOneCount: 123, onChange: utils_1.noop }, finalProps))] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { children: "Small" }), (0, jsx_runtime_1.jsx)(Tabs, __assign({ tabOneLabel: "Tab One", tabTwoLabel: "Tab Two", tabOneCount: 123, onChange: utils_1.noop, sdsSize: "small" }, finalProps))] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { children: "Underlined" }), (0, jsx_runtime_1.jsx)(Tabs, __assign({ onChange: utils_1.noop, tabOneLabel: "Tab One", tabTwoLabel: "Tab Two", tabOneCount: 123, underlined: true }, finalProps))] })] }), (0, jsx_runtime_1.jsx)("div", { style: livePreviewWrapperStyle, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { children: "Label with count" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Tabs, __assign({ onChange: utils_1.noop, sdsSize: "large", tabOneLabel: "Label", tabTwoLabel: "Label", underlined: true, tabOneCount: (0, jsx_runtime_1.jsx)(BetaTagWithCount, {}) }, finalProps, { style: { width: "200px" } })) })] }) })] }));
+}
+exports.Test = {
+    parameters: {
+        chromatic: { delay: 5000 },
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(TestDemo, __assign({}, args)); },
+};
+var CountWrapper = (0, styled_1.default)("span")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: 5px;\n"], ["\n  margin-right: 5px;\n"])));
+function BetaTagWithCount() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CountWrapper, { children: "123" }), (0, jsx_runtime_1.jsx)(Tag_1.default, { label: "BETA", color: "beta", sdsStyle: "rounded", sdsType: "secondary" })] }));
+}
+var templateObject_1;

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

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

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

@@ -0,0 +1,48 @@
+"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("<Tabs />", function () {
+    (0, story_utils_1.generateSnapshots)(snapshotTestStoryFile);
+    it("renders Tabs component", function () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
+        var elements = react_2.screen.getAllByTestId("tabs");
+        expect(elements.length).toBeTruthy();
+    });
+    it("renders tab texts", function () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
+        var Label1 = react_2.screen.getAllByText(/Tab One/i);
+        var Label2 = react_2.screen.getAllByText(/Tab Two/i);
+        expect(Label1.length).toBeTruthy();
+        expect(Label2.length).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,115 @@
+/// <reference types="react" />
+import { TabsProps as RawTabsProps } from "@mui/material";
+import { CommonThemeProps } from "../styles/common/selectors/theme";
+import { SdsSize } from "./components/common";
+export type TabsProps = Omit<RawTabsProps, "nonce" | "rev" | "rel" | "autoFocus" | "content"> & {
+    underlined?: boolean;
+    sdsSize?: "small" | "large";
+};
+export declare const StyledTabs: import("@emotion/styled").StyledComponent<{
+    action?: import("react").Ref<import("@mui/material").TabsActions> | undefined;
+    allowScrollButtonsMobile?: boolean | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    centered?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TabsClasses> | undefined;
+    slots?: {
+        StartScrollButtonIcon?: import("react").ElementType<any> | undefined;
+        EndScrollButtonIcon?: import("react").ElementType<any> | undefined;
+    } | undefined;
+    slotProps?: {
+        startScrollButtonIcon?: import("@mui/base").SlotComponentProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        }, import("@mui/material").TabsStartScrollButtonIconSlotPropsOverrides, import("@mui/material").TabsOwnerState> | undefined;
+        endScrollButtonIcon?: import("@mui/base").SlotComponentProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        }, import("@mui/material").TabsEndScrollButtonIconSlotPropsOverrides, import("@mui/material").TabsOwnerState> | undefined;
+    } | undefined;
+    indicatorColor?: import("@mui/types").OverridableStringUnion<"primary" | "secondary", import("@mui/material").TabsPropsIndicatorColorOverrides> | undefined;
+    onChange?: ((event: import("react").SyntheticEvent<Element, Event>, value: any) => void) | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
+    ScrollButtonComponent?: import("react").ElementType<any> | undefined;
+    scrollButtons?: boolean | "auto" | undefined;
+    selectionFollowsFocus?: boolean | undefined;
+    TabIndicatorProps?: (import("react").HTMLAttributes<HTMLDivElement> & {
+        sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    }) | undefined;
+    TabScrollButtonProps?: Partial<import("@mui/material").TabScrollButtonProps> | undefined;
+    textColor?: "inherit" | "primary" | "secondary" | undefined;
+    value?: any;
+    variant?: "fullWidth" | "standard" | "scrollable" | undefined;
+    visibleScrollbar?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & 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;
+} & 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" | "disabled" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef">, keyof import("@mui/material/OverridableComponent").CommonProps | "onChange" | "children" | "sx" | "variant" | "aria-label" | "aria-labelledby" | "action" | "orientation" | "value" | "slotProps" | "slots" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & Omit<RawTabsProps, "content" | "autoFocus" | "nonce" | "rel" | "rev"> & {
+    underlined?: boolean | undefined;
+    sdsSize?: "small" | "large" | undefined;
+}, {}, {}>;
+interface TabProps extends CommonThemeProps {
+    sdsSize: SdsSize;
+}
+export declare const StyledTab: import("@emotion/styled").StyledComponent<{
+    children?: null | undefined;
+    classes?: Partial<import("@mui/material").TabClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    icon?: string | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    iconPosition?: "bottom" | "top" | "end" | "start" | undefined;
+    label?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    value?: any;
+    wrapped?: boolean | 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").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "disabled" | "label" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "value" | "icon" | "iconPosition" | "wrapped"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & TabProps, {}, {}>;
+export {};

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

@@ -0,0 +1,53 @@
+"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;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTab = exports.StyledTabs = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var styles_1 = require("@mui/material/styles");
+var styles_2 = require("../styles");
+var theme_1 = require("../styles/common/selectors/theme");
+var TempTabs = function (props) { return (0, jsx_runtime_1.jsx)(material_1.Tabs, __assign({}, props)); };
+var TABS_DO_NOT_FORWARD_PROPS = ["underlined", "sdsSize"];
+exports.StyledTabs = (0, styles_1.styled)(TempTabs, {
+    shouldForwardProp: function (prop) {
+        return !TABS_DO_NOT_FORWARD_PROPS.includes(String(prop));
+    },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 0px;\n  min-height: unset;\n  position: relative;\n  z-index: 1;\n  overflow: inherit;\n\n  & .MuiTabs-scroller {\n    overflow: inherit !important;\n  }\n\n  ", "\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 0px;\n  min-height: unset;\n  position: relative;\n  z-index: 1;\n  overflow: inherit;\n\n  & .MuiTabs-scroller {\n    overflow: inherit !important;\n  }\n\n  ", "\n"])), function (props) {
+    var underlined = props.underlined, _a = props.sdsSize, sdsSize = _a === void 0 ? "large" : _a;
+    var colors = (0, theme_1.getColors)(props);
+    var spaces = (0, theme_1.getSpaces)(props);
+    var isLarge = sdsSize === "large";
+    return "\n      margin-top: ".concat(isLarge ? spaces === null || spaces === void 0 ? void 0 : spaces.l : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      margin-bottom: ").concat(isLarge ? spaces === null || spaces === void 0 ? void 0 : spaces.xl : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      border-bottom: ").concat(underlined ? "2px solid ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[200], ";") : "none", ";\n    ");
+});
+var TAB_DO_NOT_FORWARD_PROPS = ["sdsSize"];
+exports.StyledTab = (0, styles_1.styled)(material_1.Tab, {
+    shouldForwardProp: function (prop) { return !TAB_DO_NOT_FORWARD_PROPS.includes(String(prop)); },
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-height: unset;\n  padding: 0;\n  min-width: 32px;\n  opacity: 1 !important;\n\n  ", "\n\n  ", "\n"], ["\n  min-height: unset;\n  padding: 0;\n  min-width: 32px;\n  opacity: 1 !important;\n\n  ", "\n\n  ", "\n"])), tabFontMixin, function (props) {
+    var colors = (0, theme_1.getColors)(props);
+    var spaces = (0, theme_1.getSpaces)(props);
+    var fontWeights = (0, theme_1.getFontWeights)(props);
+    var sdsSize = props.sdsSize;
+    var isLarge = sdsSize === "large";
+    return "\n      font-weight: ".concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n      margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0;\n\n      // (thuang): Large Tab height is 30px, the offset is 4px\n      height: ").concat(isLarge ? 26 : 22, "px;\n\n      color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n\n      &:hover, :focus {\n        color: black;\n      }\n\n      &.Mui-selected {\n        color: black;\n\n        &:hover {\n          color: black;\n        }\n      }\n\n      &:active {\n        color: black;\n      }\n\n      &:disabled {\n        color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[200], ";\n      }\n    ");
+});
+function tabFontMixin(props) {
+    var sdsSize = props.sdsSize;
+    var isLarge = sdsSize === "large";
+    return isLarge ? (0, styles_2.fontBodyS)(props) : (0, styles_2.fontBodyXs)(props);
+}
+var templateObject_1, templateObject_2;

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

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

package/dist/src/core/Tag/Tag.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 TagNameSpaceTest = function (props) {
+    return ((0, jsx_runtime_1.jsx)(components_1.Tag, { color: "beta", icon: (0, jsx_runtime_1.jsx)(components_1.Icon, { sdsIcon: "download", sdsSize: "l", sdsType: "button" }), label: "Label", sdsStyle: "rounded", sdsType: "primary" }));
+};

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

@@ -0,0 +1,17 @@
+import { ChipProps } from "@mui/material";
+import { ExtraTagProps, SdsTagColorType } from "./style";
+export interface SdsTagProps extends Omit<ChipProps, "color" | "nonce" | "rev" | "rel" | "autoFocus" | "content"> {
+    label: string;
+    color?: SdsTagColorType;
+}
+export type TagProps = SdsTagProps & ExtraTagProps;
+export type { SdsTagColorType };
+/**
+ * @see https://mui.com/material-ui/react-chip/
+ *
+ * @props color: {string}                   - applies color for tag based on default theme color values
+ *               [string, string]           - applies custom colors for [font, background]
+ *               [string, string, string]   - applies custom colors for [font, background, icon]
+ */
+declare const Tag: (props: TagProps) => JSX.Element;
+export default Tag;

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

@@ -0,0 +1,27 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("./style");
+/**
+ * @see https://mui.com/material-ui/react-chip/
+ *
+ * @props color: {string}                   - applies color for tag based on default theme color values
+ *               [string, string]           - applies custom colors for [font, background]
+ *               [string, string, string]   - applies custom colors for [font, background, icon]
+ */
+var Tag = function (props) {
+    var color = props.color;
+    return (0, jsx_runtime_1.jsx)(style_1.StyledTag, __assign({ tagColor: color }, props, { color: "primary" }));
+};
+exports.default = Tag;

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

@@ -0,0 +1,98 @@
+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: {
+        hover: boolean;
+        label: string;
+        sdsStyle: string;
+        sdsType: string;
+    };
+};
+export declare const LivePreview: {
+    args: {
+        label: string;
+    };
+    parameters: {
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};
+export declare const ScreenshotTest: {
+    args: {
+        color: import("./style").SdsTagColorType | undefined;
+        hover: boolean;
+        label: string;
+        sdsStyle: "square" | "rounded" | undefined;
+        sdsType: "primary" | "secondary" | undefined;
+    };
+    parameters: {
+        axe: {
+            timeout: number;
+        };
+        controls: {
+            exclude: string[];
+        };
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (props: Args) => JSX.Element;
+};
+export declare const GrayPrimaryScreenshotTest: {
+    args: {
+        color: import("./style").SdsTagColorType | undefined;
+        hover: boolean;
+        label: string;
+        sdsStyle: "square" | "rounded" | undefined;
+        sdsType: "primary" | "secondary" | undefined;
+    };
+    parameters: {
+        axe: {
+            disabledRules: string[];
+            timeout: number;
+        };
+        controls: {
+            exclude: string[];
+        };
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (props: Args) => JSX.Element;
+};
+export declare const SuccessWarningScreenshotTest: {
+    args: {
+        color: import("./style").SdsTagColorType | undefined;
+        hover: boolean;
+        label: string;
+        sdsStyle: "square" | "rounded" | undefined;
+        sdsType: "primary" | "secondary" | undefined;
+    };
+    parameters: {
+        axe: {
+            disabledRules: string[];
+            timeout: number;
+        };
+        controls: {
+            exclude: string[];
+        };
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (props: Args) => JSX.Element;
+};
+export declare const Test: {
+    args: {
+        label: string;
+    };
+    parameters: {
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};