@czi-sds/components 15.3.0 → 15.4.1

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

@@ -1,154 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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

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

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

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

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

@@ -1,53 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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

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

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

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var components_1 = require("@czi-sds/components");
-var 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

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

@@ -1,27 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var style_1 = require("./style");
-/**
- * @see https://mui.com/material-ui/react-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

@@ -1,98 +0,0 @@
-import { Args } from "@storybook/react";
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Args>;
-export default _default;
-export declare const Default: {
-    args: {
-        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;
-};