@czi-sds/components 15.3.0 → 15.4.0

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

@@ -1,218 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __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 material_1 = require("@mui/material");
-var React = __importStar(require("react"));
-var react_1 = require("react");
-var _1 = __importDefault(require("."));
-var InputSlider_1 = __importDefault(require("../InputSlider"));
-var TabPanel = React.forwardRef(function (props, ref) {
-    var children = props.children, sdsDemoHeight = props.sdsDemoHeight, other = __rest(props, ["children", "sdsDemoHeight"]);
-    return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: ref, role: "tabpanel", style: {
-            alignItems: "center",
-            backgroundColor: "#f4f4f4",
-            color: "black",
-            display: "flex",
-            fontFamily: "Open Sans, sans-serif",
-            fontSize: "36px",
-            fontWeight: 100,
-            justifyContent: "center",
-            margin: "0px 22px 22px 6px",
-            minHeight: "".concat(sdsDemoHeight, "vh"),
-            textAlign: "center",
-        } }, other, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { p: 3 }, children: [children, (0, jsx_runtime_1.jsxs)("p", { style: { fontSize: 14, margin: "5px 0 0 0" }, children: ["height: ", sdsDemoHeight, " vh"] })] }) })));
-});
-var NavigationJumpTo = function (props) {
-    var _a = (0, react_1.useState)(100), navPanelHeight = _a[0], setNavPanelHeight = _a[1];
-    var sectionRef0 = React.useRef(null);
-    var sectionRef1 = React.useRef(null);
-    var sectionRef2 = React.useRef(null);
-    var sectionRef3 = React.useRef(null);
-    var sectionRef4 = React.useRef(null);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                    fontFamily: "Open Sans, sans-serif",
-                    margin: "0 0 30px 6px",
-                    width: 250,
-                }, children: [(0, jsx_runtime_1.jsx)("p", { id: "nav-item-height-slider", style: { marginBottom: "5px" }, children: "Section panel height:" }), (0, jsx_runtime_1.jsx)(InputSlider_1.default, { "aria-labelledby": "nav-item-height-slider", min: 20, max: 120, step: 1, onChange: function (_, value) {
-                            setNavPanelHeight(value);
-                        }, defaultValue: 100, marks: [
-                            { label: "20", value: 20 },
-                            { label: "40", value: 40 },
-                            { label: "60", value: 60 },
-                            { label: "80", value: 80 },
-                            { label: "100", value: 100 },
-                            { label: "120", value: 120 },
-                        ] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                    display: "flex",
-                    flexDirection: "row-reverse",
-                    position: "relative",
-                    width: "100%",
-                }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: 150 }, children: (0, jsx_runtime_1.jsx)(_1.default, __assign({}, props, { items: [
-                                { elementRef: sectionRef0, title: "Section 1" },
-                                { elementRef: sectionRef1, title: "Section 2" },
-                                { elementRef: sectionRef2, title: "Section 3" },
-                                { elementRef: sectionRef3, title: "Section 4" },
-                                { elementRef: sectionRef4, title: "Section 5" },
-                            ], onChange: function (value) {
-                                console.log(value);
-                            } })) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                            position: "relative",
-                            width: "100%",
-                        }, children: [(0, jsx_runtime_1.jsx)(TabPanel, { id: "navigation-panel-1", ref: sectionRef0, sdsDemoHeight: navPanelHeight, children: "Section #1" }), (0, jsx_runtime_1.jsx)(TabPanel, { id: "navigation-panel-2", ref: sectionRef1, sdsDemoHeight: navPanelHeight, children: "Section #2" }), (0, jsx_runtime_1.jsx)(TabPanel, { id: "navigation-panel-3", ref: sectionRef2, sdsDemoHeight: navPanelHeight, children: "Section #3" }), (0, jsx_runtime_1.jsx)(TabPanel, { id: "navigation-panel-4", ref: sectionRef3, sdsDemoHeight: navPanelHeight, children: "Section #4" }), (0, jsx_runtime_1.jsx)(TabPanel, { id: "navigation-panel-5", ref: sectionRef4, sdsDemoHeight: navPanelHeight, children: "Section #5" })] })] })] }));
-};
-var availableColorOptions = [
-    "beta",
-    "error",
-    "gray",
-    "info",
-    "primary",
-    "success",
-    "warning",
-];
-exports.default = {
-    argTypes: {
-        indicatorColor: {
-            control: {
-                labels: [
-                    "beta",
-                    "error",
-                    "gray",
-                    "info",
-                    "primary",
-                    "success",
-                    "warning",
-                ],
-                type: "select",
-            },
-            defaultValue: { summary: "primary" },
-            description: "Color of the tab indicator",
-            mapping: availableColorOptions,
-            options: Object.keys(availableColorOptions),
-        },
-        items: {
-            control: { require: true, type: "object" },
-            defaultValue: { summary: "-" },
-            description: "An array of object containing a title for the Navigation Tab and a ref to the section div.",
-        },
-        offsetTop: {
-            control: { description: "wew", type: "number" },
-            defaultValue: { summary: "0" },
-            description: "To apply the offsetTop to the component, please refresh the page.",
-        },
-    },
-    component: NavigationJumpTo,
-    title: "NavigationJumpTo",
-};
-// Default
-exports.Default = {
-    args: {
-        indicatorColor: "primary",
-        items: [],
-        offsetTop: 0,
-    },
-    parameters: {
-        controls: { expanded: true },
-    },
-};
-// Live Preview
-var LivePreviewDemo = function (props) {
-    var items = props.items, rest = __rest(props, ["items"]);
-    return (0, jsx_runtime_1.jsx)(_1.default, __assign({ items: items }, rest));
-};
-exports.LivePreview = {
-    args: {
-        items: [
-            { elementRef: { current: null }, title: "Item 1" },
-            { elementRef: { current: null }, title: "Item 2" },
-            { elementRef: { current: null }, title: "Item 3" },
-            { elementRef: { current: null }, title: "Item 4" },
-            { elementRef: { current: null }, title: "Item 5" },
-        ],
-    },
-    parameters: {
-        axe: {
-            disabledRules: ["aria-valid-attr-value"],
-        },
-        snapshot: {
-            skip: true,
-        },
-    },
-    render: function (args) { return (0, jsx_runtime_1.jsx)(LivePreviewDemo, __assign({}, args)); },
-};
-// Test
-var TestDemo = function (props) {
-    var items = props.items, rest = __rest(props, ["items"]);
-    return ((0, jsx_runtime_1.jsx)(_1.default, __assign({ "data-testid": "navigation-jump-to", items: items }, rest)));
-};
-exports.Test = {
-    args: {
-        items: [
-            { elementRef: { current: null }, title: "Item 1" },
-            { elementRef: { current: null }, title: "Item 2" },
-            { elementRef: { current: null }, title: "Item 3" },
-            { elementRef: { current: null }, title: "Item 4" },
-            { elementRef: { current: null }, title: "Item 5" },
-        ],
-    },
-    parameters: {
-        axe: {
-            disabledRules: ["aria-valid-attr-value"],
-        },
-        controls: {
-            exclude: ["indicatorColor", "items"],
-        },
-        snapshot: {
-            skip: true,
-        },
-    },
-    render: function (args) { return (0, jsx_runtime_1.jsx)(TestDemo, __assign({}, args)); },
-};

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

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

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

@@ -1,87 +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("<NavigationJumpTo />", function () {
-    (0, story_utils_1.generateSnapshots)(snapshotTestStoryFile);
-    it("renders navigation jump to component", function () {
-        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
-        var elements = react_2.screen.getAllByTestId("navigation-jump-to");
-        expect(elements).toBeTruthy();
-    });
-    it("renders the correct number of navigation items", function () {
-        var items = [
-            { elementRef: { current: null }, title: "Item 1" },
-            { elementRef: { current: null }, title: "Item 2" },
-            { elementRef: { current: null }, title: "Item 3" },
-        ];
-        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, { items: items }));
-        var navigationItems = react_2.screen.getAllByRole("tab");
-        expect(navigationItems).toHaveLength(items.length);
-    });
-    it("scrolls to the correct section when a navigation item is clicked", function () {
-        var items = [
-            {
-                elementRef: {
-                    current: {
-                        getAttribute: function () {
-                            return "test-item-1";
-                        },
-                        scrollIntoView: jest.fn(),
-                        setAttribute: jest.fn(),
-                    },
-                },
-                title: "Item 1",
-            },
-            {
-                elementRef: {
-                    current: {
-                        getAttribute: function () {
-                            return "test-item-1";
-                        },
-                        scrollIntoView: jest.fn(),
-                        setAttribute: jest.fn(),
-                    },
-                },
-                title: "Item 2",
-            },
-        ];
-        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, { items: items }));
-        var navigationItem = react_2.screen.getByText("Item 2");
-        react_2.fireEvent.click(navigationItem);
-        expect(items[1].elementRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
-        expect(items[1].elementRef.current.scrollIntoView).toHaveBeenCalledWith({
-            behavior: "smooth",
-            block: "start",
-        });
-    });
-});

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

@@ -1,106 +0,0 @@
-/// <reference types="react" />
-import { TabsProps } from "@mui/material";
-import { CommonThemeProps } from "../styles";
-export interface NavigationJumpToExtraProps extends Omit<TabsProps, "indicatorColor" | "nonce" | "rev" | "rel" | "autoFocus" | "content" | "onChange">, CommonThemeProps {
-    sdsIndicatorColor?: "primary" | "error" | "info" | "success" | "warning" | "gray" | "beta";
-}
-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> & NavigationJumpToExtraProps, {}, {}>;
-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> & CommonThemeProps, {}, {}>;

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

@@ -1,27 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledTab = exports.StyledTabs = void 0;
-var material_1 = require("@mui/material");
-var styles_1 = require("@mui/material/styles");
-var styles_2 = require("../styles");
-var doNotForwardProps = ["items", "sdsIndicatorColor"];
-exports.StyledTabs = (0, styles_1.styled)(material_1.Tabs, {
-    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var _a = props.sdsIndicatorColor, sdsIndicatorColor = _a === void 0 ? "primary" : _a;
-    var colors = (0, styles_2.getColors)(props);
-    var spaces = (0, styles_2.getSpaces)(props);
-    return "\n      &:before {\n        background-color: ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[200], ";\n        border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n        content: \"\";\n        height: 100%;\n        left: 0;\n        position: absolute;\n        top: 0;\n        width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      }\n      max-width: 180px;\n      top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n      margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      position: sticky;\n      .MuiTabs-indicator {\n        background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors[sdsIndicatorColor][400], " !important;\n        border-radius: 2px;\n        left: 0;\n        width: 2px;\n      }\n    ");
-});
-exports.StyledTab = (0, styles_1.styled)(material_1.Tab, {
-    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), styles_2.fontBodyXs, function (props) {
-    var spaces = (0, styles_2.getSpaces)(props);
-    var colors = (0, styles_2.getColors)(props);
-    return "\n      box-sizing: border-box;\n      max-width: 180px;\n      padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      align-items: start;\n      min-height: unset;\n      max-height: unset;\n      text-transform: none;\n      &:last-child {\n        margin-bottom: 0;\n      }\n      &:before {\n        content: \"\";\n        position: absolute;\n        left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n        width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n        height: 100%;\n        background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[400], ";\n        display: none;\n        border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      }\n      &:hover {\n        color: black;\n        &:before {\n          display: block;\n        }\n      }\n      &.Mui-selected {\n        color: black;\n        font-weight: 600;\n      }\n      &.MuiTabs-indicator {\n        backgroundColor: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[200], ";\n        width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      }\n      &.MuiButtonBase-root {\n        white-space: nowrap;\n        padding: 0;\n        overflow: visible;\n      }\n    ");
-});
-var templateObject_1, templateObject_2;

package/dist/src/core/NavigationJumpTo/useIntersection.d.ts

@@ -1,19 +0,0 @@
-import React from "react";
-/**
- * Custom hook that observes elements to determine if they are in the viewport.
- *
- * @param items - Array of items to observe.
- * @returns Object containing the visibility status of each observed item.
- */
-export default function useInView(items: Array<{
-    title: string;
-    elementRef: React.MutableRefObject<HTMLElement | null>;
-}>): {
-    el: React.MutableRefObject<HTMLElement | null>;
-    isInView: boolean;
-}[] | {
-    [key: string]: {
-        intersectionEntry: IntersectionObserverEntry;
-        isInView: boolean;
-    };
-};

package/dist/src/core/NavigationJumpTo/useIntersection.js

@@ -1,67 +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 react_1 = require("react");
-/**
- * Custom hook that observes elements to determine if they are in the viewport.
- *
- * @param items - Array of items to observe.
- * @returns Object containing the visibility status of each observed item.
- */
-function useInView(items) {
-    // If the window object is not available (e.g., in a node environment) or
-    // If the IntersectionObserver is not available (e.g., in a test environment),
-    // return a default result indicating that all elements are not in view
-    if (typeof window === "undefined" || !window.IntersectionObserver) {
-        return items.map(function (item) {
-            return {
-                el: item.elementRef,
-                isInView: false,
-            };
-        });
-    }
-    var _a = (0, react_1.useState)({}), elements = _a[0], setElements = _a[1];
-    (0, react_1.useEffect)(function () {
-        /**
-         * Callback function called by the IntersectionObserver.
-         * Updates the visibility status of observed elements.
-         *
-         * @param entries - IntersectionObserverEntry array containing information about each observed element.
-         */
-        var observerCallback = function (entries) {
-            entries.forEach(function (entry, index) {
-                var name = entry.target.getAttribute("id") || index;
-                setElements(function (prev) {
-                    var _a;
-                    return __assign(__assign({}, prev), (_a = {}, _a[name] = {
-                        intersectionEntry: entry,
-                        isInView: entry.isIntersecting,
-                    }, _a));
-                });
-            });
-        };
-        var observer = new IntersectionObserver(observerCallback);
-        // Observe each item's element
-        items.forEach(function (item) {
-            if (item.elementRef.current) {
-                observer.observe(item.elementRef.current);
-            }
-        });
-        // Cleanup function to disconnect the IntersectionObserver
-        return function () {
-            observer.disconnect();
-        };
-    }, []);
-    return elements;
-}
-exports.default = useInView;

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

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

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

@@ -1,8 +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 utils_1 = require("src/common/utils");
-var NotificationNameSpaceTest = function (props) {
-    return ((0, jsx_runtime_1.jsx)(components_1.Notification, { autoDismiss: true, dismissed: false, slideDirection: "left", intent: "info", onClose: utils_1.noop, buttonOnClick: utils_1.noop, buttonText: "Text", children: "This is a notification!" }));
-};

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

@@ -1,17 +0,0 @@
-import { AlertProps } from "@mui/lab";
-import React from "react";
-export interface NotificationProps {
-    autoDismiss?: boolean | number;
-    buttonOnClick?: (event: React.SyntheticEvent) => void;
-    buttonText?: string;
-    dismissed?: boolean;
-    slideDirection: "left" | "right";
-    extraContent?: boolean;
-    intent: "info" | "error" | "success" | "warning";
-}
-export type ExposedNotificationProps = Omit<AlertProps, "nonce" | "rev" | "rel" | "autoFocus" | "content"> & NotificationProps;
-/**
- * @see https://mui.com/material-ui/react-alert/
- */
-declare const Notification: ({ autoDismiss, children, dismissed, slideDirection, intent, onClose, buttonOnClick, buttonText, ...rest }: ExposedNotificationProps) => JSX.Element;
-export default Notification;

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

@@ -1,70 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var material_1 = require("@mui/material");
-var react_1 = require("react");
-var Button_1 = __importDefault(require("../Button"));
-var ButtonIcon_1 = __importDefault(require("../ButtonIcon"));
-var Icon_1 = __importDefault(require("../Icon"));
-var style_1 = require("./style");
-/**
- * @see https://mui.com/material-ui/react-alert/
- */
-var Notification = function (_a) {
-    var autoDismiss = _a.autoDismiss, children = _a.children, dismissed = _a.dismissed, _b = _a.slideDirection, slideDirection = _b === void 0 ? "left" : _b, intent = _a.intent, onClose = _a.onClose, buttonOnClick = _a.buttonOnClick, buttonText = _a.buttonText, rest = __rest(_a, ["autoDismiss", "children", "dismissed", "slideDirection", "intent", "onClose", "buttonOnClick", "buttonText"]);
-    var _c = (0, react_1.useState)(dismissed), hide = _c[0], setHide = _c[1];
-    // remove prop used only for stories
-    var passedProps = __assign({}, rest);
-    delete passedProps.extraContent;
-    (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 () {
-        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" }));
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Slide, { in: !hide, direction: slideDirection, mountOnEnter: true, unmountOnExit: true, timeout: 250, children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsxs)(style_1.StyledNotification, __assign({ onClose: onClose ? handleClose : undefined, action: onClose ? ((0, jsx_runtime_1.jsx)(ButtonIcon_1.default, { onClick: handleClose, sdsSize: "small", sdsType: "tertiary", "data-testid": "notificationCloseButton", sdsIcon: "xMark" })) : null, icon: getIcon(), className: "elevated", severity: intent }, passedProps, { children: [children, buttonOnClick && ((0, jsx_runtime_1.jsx)(Button_1.default, { sdsStyle: "minimal", sdsType: "secondary", onClick: buttonOnClick, children: buttonText }))] })) }) }) }));
-};
-exports.default = Notification;