@arbor-education/design-system.components 0.0.3 → 0.0.5

package/dist/components/slideover/Slideover.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slideover.test.js","sourceRoot":"","sources":["../../../src/components/slideover/Slideover.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAAG,EAAE,CAAC,CAAC;IACrC,cAAc,EAAE;QACd,eAAe,EAAE,EAAE,CAAC,EAAE,EAAE;KACzB;CACF,CAAC,CAAC,CAAC;AAEJ,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,IAAI,CAAC,gCAAgC,EAAE,GAAG,EAAE;QAC1C,MAAM,CAAC,KAAC,SAAS,IAAC,KAAK,EAAC,mBAAmB,YAAC,uCAAqB,GAAY,CAAC,CAAC;QAC/E,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAClE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,uCAAuC,EAAE,GAAG,EAAE;QACjD,MAAM,CAAC,KAAC,SAAS,IAAC,cAAc,EAAE,yCAAuB,GAAI,CAAC,CAAC;QAC/D,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,4DAA4D,EAAE,GAAG,EAAE;QACtE,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC;QAC5C,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;IACnF,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,uDAAuD,EAAE,GAAG,EAAE;QACjE,MAAM,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC;QACtB,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;QACjE,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAC5B,MAAM,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC5D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/components/slideoverManager/SlideoverManager.d.ts

@@ -0,0 +1,7 @@
+import { type SlideoverProps } from '../slideover/Slideover';
+type SlideoverManagerProps = {
+    slideovers: SlideoverProps[];
+};
+export declare const SlideoverManager: (props: SlideoverManagerProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SlideoverManager.d.ts.map

package/dist/components/slideoverManager/SlideoverManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideoverManager.d.ts","sourceRoot":"","sources":["../../../src/components/slideoverManager/SlideoverManager.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAMhF,KAAK,qBAAqB,GAAG;IAC3B,UAAU,EAAE,cAAc,EAAE,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CAuC5D,CAAC"}

package/dist/components/slideoverManager/SlideoverManager.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Slideover } from '../slideover/Slideover';
+import { useEffect, useRef, useState } from 'react';
+import { SLIDEOVER } from '../../utils/Constants';
+import { usePubSub } from '../../utils/hooks/usePubSub';
+import { PopupParentContext } from '../../utils/PopupParentContext';
+export const SlideoverManager = (props) => {
+    const { slideovers: initialSlideovers } = props;
+    const [slideovers, setSlideovers] = useState(() => initialSlideovers);
+    const popupParentContainerRef = useRef(null);
+    useEffect(() => {
+        setSlideovers(initialSlideovers);
+    }, [initialSlideovers]);
+    const hasSlideovers = slideovers.length > 0;
+    usePubSub(SLIDEOVER.ADD_SLIDEOVER, (slideover) => {
+        setSlideovers(currentSlideovers => [...currentSlideovers, slideover]);
+    });
+    usePubSub(SLIDEOVER.REMOVE_SLIDEOVER, () => {
+        setSlideovers(currentSlideovers => currentSlideovers.slice(0, currentSlideovers.length - 1));
+    });
+    usePubSub(SLIDEOVER.REMOVE_ALL_SLIDEOVERS, () => {
+        setSlideovers([]);
+    });
+    return (_jsx(PopupParentContext.Provider, { value: popupParentContainerRef, children: _jsx("div", { className: classNames('ds-slideover-manager', {
+                'ds-slideover-manager--active': hasSlideovers,
+            }), ref: popupParentContainerRef, children: slideovers.map((slideoverProps, index) => _jsx(Slideover, { ...slideoverProps }, index)) }) }));
+};
+//# sourceMappingURL=SlideoverManager.js.map

package/dist/components/slideoverManager/SlideoverManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideoverManager.js","sourceRoot":"","sources":["../../../src/components/slideoverManager/SlideoverManager.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,SAAS,EAAuB,MAAM,gCAAgC,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAM9D,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;IAC/D,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC;IAChD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,CAAC;IAEtE,MAAM,uBAAuB,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEpE,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,MAAM,aAAa,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;IAE5C,SAAS,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC,SAAyB,EAAE,EAAE;QAC/D,aAAa,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC,GAAG,iBAAiB,EAAE,SAAS,CAAC,CAAC,CAAC;IACxE,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,SAAS,CAAC,gBAAgB,EAAE,GAAG,EAAE;QACzC,aAAa,CAAC,iBAAiB,CAAC,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;IAC/F,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,SAAS,CAAC,qBAAqB,EAAE,GAAG,EAAE;QAC9C,aAAa,CAAC,EAAE,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,uBAAuB,YACzD,cACE,SAAS,EAAE,UAAU,CACnB,sBAAsB,EACtB;gBACE,8BAA8B,EAAE,aAAa;aAC9C,CACF,EACD,GAAG,EAAE,uBAAuB,YAE3B,UAAU,CAAC,GAAG,CAAC,CAAC,cAAc,EAAE,KAAK,EAAE,EAAE,CAAC,KAAC,SAAS,OAAiB,cAAc,IAAzB,KAAK,CAAwB,CAAC,GACrF,GACsB,CAC/B,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/slideoverManager/SlideoverManager.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { type IconName } from '../icon/allowedIcons';
+type SlideoverStoryArgs = {
+    headerIcon?: IconName;
+    centerHeaderText?: boolean;
+};
+declare const meta: Meta<SlideoverStoryArgs>;
+export default meta;
+type Story = StoryObj<SlideoverStoryArgs>;
+export declare const Default: Story;
+export declare const WithSections: Story;
+export declare const WithFormFields: Story;
+export declare const WithFooterContent: Story;
+export declare const WithScrollableContent: Story;
+//# sourceMappingURL=SlideoverManager.stories.d.ts.map

package/dist/components/slideoverManager/SlideoverManager.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideoverManager.stories.d.ts","sourceRoot":"","sources":["../../../src/components/slideoverManager/SlideoverManager.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOvD,OAAO,EAAgB,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEnE,KAAK,kBAAkB,GAAG;IACxB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAkClC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AA0B1C,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA+B1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAmC5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAmE/B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAsInC,CAAC"}

package/dist/components/slideoverManager/SlideoverManager.stories.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SlideoverManager } from './SlideoverManager';
+import { SlideoverUtils } from '../../utils/SlideoverUtils';
+import { Button } from '../button/Button';
+import { Section } from '../section/Section';
+import { FormField } from '../formField/FormField';
+import { generateUuid } from '../../utils/generateUuid';
+import { allowedIcons } from '../icon/allowedIcons';
+const meta = {
+    title: 'Components/SlideoverManager',
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        headerIcon: {
+            control: { type: 'select' },
+            options: Object.keys(allowedIcons),
+            description: 'Icon to display in the slideover header',
+        },
+        centerHeaderText: {
+            control: { type: 'boolean' },
+            description: 'Whether to center the header text',
+        },
+    },
+    args: {
+        centerHeaderText: true,
+    },
+    decorators: [
+        Story => (_jsxs("div", { children: [_jsx(Story, {}), _jsxs("div", { style: { padding: '1rem' }, children: [_jsx("p", { children: "The SlideoverManager is a container that manages the display of slideovers. It listens for events to add or remove slideovers." }), _jsx("p", { children: "Use the buttons below to add slideovers with different content." })] })] })),
+    ],
+};
+export default meta;
+let slideoverCount = 0;
+const addSlideoverWithContent = (content, headerIcon, centerHeaderText) => {
+    slideoverCount++;
+    SlideoverUtils.addSlideover({
+        title: `Slideover ${slideoverCount}`,
+        children: content,
+        headerIcon,
+        centerHeaderText,
+    });
+};
+const removeSlideover = () => {
+    if (slideoverCount > 0) {
+        slideoverCount--;
+    }
+    SlideoverUtils.removeSlideover();
+};
+const removeAllSlideovers = () => {
+    slideoverCount = 0;
+    SlideoverUtils.removeAllSlideovers();
+};
+export const Default = {
+    render: args => (_jsxs(_Fragment, { children: [_jsx(SlideoverManager, { slideovers: [] }), _jsxs("div", { style: { padding: '1rem', display: 'flex', gap: '1rem' }, children: [_jsx(Button, { onClick: () => addSlideoverWithContent(_jsx("p", { children: "This is a simple slideover." }), args.headerIcon, args.centerHeaderText), children: "Add Simple Slideover" }), _jsx(Button, { onClick: removeSlideover, type: "secondary", children: "Remove Last Slideover" }), _jsx(Button, { onClick: removeAllSlideovers, type: "primary-destructive", children: "Remove All" })] })] })),
+};
+export const WithSections = {
+    render: args => (_jsxs(_Fragment, { children: [_jsx(SlideoverManager, { slideovers: [] }), _jsxs("div", { style: { padding: '1rem', display: 'flex', gap: '1rem' }, children: [_jsx(Button, { onClick: () => addSlideoverWithContent(_jsxs(_Fragment, { children: [_jsx(Section, { title: "Section 1", collapsible: true, children: _jsx("p", { children: "Aliquip ea tempor officia irure do qui culpa. Laborum proident laboris aliqua ad Lorem eiusmod fugiat dolore qui occaecat adipisicing. Dolore quis nisi occaecat commodo labore ad nulla aliquip in. Enim labore nisi laborum nostrud officia ad nulla ut quis. Aute excepteur quis amet aliquip. Excepteur Lorem cupidatat adipisicing consectetur ipsum Lorem. Deserunt dolor veniam sit mollit elit aliquip duis." }) }), _jsx(Section, { title: "Section 2", collapsible: true, collapsed: true, children: _jsx("p", { children: "Veniam adipisicing culpa id esse duis in officia consequat veniam ad ullamco sint sunt anim. Incididunt exercitation dolor Lorem anim aute ad deserunt. Nulla culpa sint aliqua ea Lorem sint. Elit sit consectetur minim cillum consectetur pariatur Lorem labore consectetur nisi consectetur officia exercitation. Est consectetur commodo deserunt ipsum aliqua occaecat qui sunt consectetur." }) })] }), args.headerIcon, args.centerHeaderText), children: "Add Slideover with Sections" }), _jsx(Button, { onClick: removeSlideover, type: "secondary", children: "Remove Last Slideover" }), _jsx(Button, { onClick: removeAllSlideovers, type: "primary-destructive", children: "Remove All" })] })] })),
+};
+export const WithFormFields = {
+    render: (args) => {
+        const formFieldId = generateUuid();
+        return (_jsxs(_Fragment, { children: [_jsx(SlideoverManager, { slideovers: [] }), _jsxs("div", { style: { padding: '1rem', display: 'flex', gap: '1rem' }, children: [_jsx(Button, { onClick: () => addSlideoverWithContent(_jsx(_Fragment, { children: _jsx(FormField, { id: formFieldId, label: "Your Name", inputType: "text", inputProps: { placeholder: 'e.g. Jane Doe' }, fieldDescription: "Please enter your full name." }) }), args.headerIcon, args.centerHeaderText), children: "Add Slideover with Form" }), _jsx(Button, { onClick: removeSlideover, type: "secondary", children: "Remove Last Slideover" }), _jsx(Button, { onClick: removeAllSlideovers, type: "primary-destructive", children: "Remove All" })] })] }));
+    },
+};
+export const WithFooterContent = {
+    render: (args) => {
+        const handleSave = () => {
+            alert('Save clicked!');
+            SlideoverUtils.removeSlideover();
+        };
+        const handleCancel = () => {
+            SlideoverUtils.removeSlideover();
+        };
+        const footerContent = (_jsxs("div", { style: { display: 'flex', gap: '1rem', justifyContent: 'flex-end' }, children: [_jsx(Button, { type: "secondary", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { type: "primary", onClick: handleSave, children: "Save Changes" })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(SlideoverManager, { slideovers: [] }), _jsxs("div", { style: { padding: '1rem', display: 'flex', gap: '1rem' }, children: [_jsx(Button, { onClick: () => {
+                                slideoverCount++;
+                                SlideoverUtils.addSlideover({
+                                    title: `Slideover ${slideoverCount}`,
+                                    children: (_jsx(_Fragment, { children: _jsxs(Section, { title: "Edit Settings", children: [_jsx(FormField, { id: generateUuid(), label: "Setting Name", inputType: "text", inputProps: { placeholder: 'Enter setting name' } }), _jsx(FormField, { id: generateUuid(), label: "Description", inputType: "textarea", inputProps: { placeholder: 'Enter description', rows: 4 } })] }) })),
+                                    footerContents: footerContent,
+                                    headerIcon: args.headerIcon,
+                                    centerHeaderText: args.centerHeaderText,
+                                });
+                            }, children: "Add Slideover with Footer" }), _jsx(Button, { onClick: removeSlideover, type: "secondary", children: "Remove Last Slideover" }), _jsx(Button, { onClick: removeAllSlideovers, type: "primary-destructive", children: "Remove All" })] })] }));
+    },
+};
+export const WithScrollableContent = {
+    render: (args) => {
+        const footerContent = (_jsxs("div", { style: { display: 'flex', gap: '1rem', justifyContent: 'flex-end' }, children: [_jsx(Button, { type: "secondary", onClick: SlideoverUtils.removeSlideover, children: "Cancel" }), _jsx(Button, { type: "primary", onClick: SlideoverUtils.removeSlideover, children: "Save" })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(SlideoverManager, { slideovers: [] }), _jsxs("div", { style: { padding: '1rem', display: 'flex', gap: '1rem' }, children: [_jsx(Button, { onClick: () => {
+                                slideoverCount++;
+                                SlideoverUtils.addSlideover({
+                                    title: `Slideover ${slideoverCount}`,
+                                    children: (_jsxs(_Fragment, { children: [_jsxs(Section, { title: "Section 1", collapsible: true, children: [_jsx("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }), _jsx(FormField, { id: generateUuid(), label: "Field 1", inputType: "text", inputProps: { placeholder: 'Enter value' } }), _jsx(FormField, { id: generateUuid(), label: "Field 2", inputType: "text", inputProps: { placeholder: 'Enter value' } })] }), _jsxs(Section, { title: "Section 2", collapsible: true, children: [_jsx("p", { children: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }), _jsx(FormField, { id: generateUuid(), label: "Field 3", inputType: "textarea", inputProps: { placeholder: 'Enter long text', rows: 6 } })] }), _jsxs(Section, { title: "Section 3", collapsible: true, children: [_jsx("p", { children: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo." }), _jsx(FormField, { id: generateUuid(), label: "Field 4", inputType: "number", inputProps: { placeholder: 'Enter number' } }), _jsx(FormField, { id: generateUuid(), label: "Field 5", inputType: "text", inputProps: { placeholder: 'Enter value' } })] }), _jsxs(Section, { title: "Section 4", collapsible: true, children: [_jsx("p", { children: "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet." }), _jsx(FormField, { id: generateUuid(), label: "Field 6", inputType: "text", inputProps: { placeholder: 'Enter value' } })] }), _jsxs(Section, { title: "Section 5", collapsible: true, children: [_jsx("p", { children: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident." }), _jsx(FormField, { id: generateUuid(), label: "Field 7", inputType: "textarea", inputProps: { placeholder: 'Enter description', rows: 4 } }), _jsx(FormField, { id: generateUuid(), label: "Field 8", inputType: "text", inputProps: { placeholder: 'Enter value' } })] }), _jsxs(Section, { title: "Section 6", collapsible: true, collapsed: true, children: [_jsx("p", { children: "Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio." }), _jsx(FormField, { id: generateUuid(), label: "Field 9", inputType: "text", inputProps: { placeholder: 'Enter value' } })] })] })),
+                                    footerContents: footerContent,
+                                    headerIcon: args.headerIcon,
+                                    centerHeaderText: args.centerHeaderText,
+                                });
+                            }, children: "Add Slideover with Scrollable Content" }), _jsx(Button, { onClick: removeSlideover, type: "secondary", children: "Remove Last Slideover" }), _jsx(Button, { onClick: removeAllSlideovers, type: "primary-destructive", children: "Remove All" })] })] }));
+    },
+};
+//# sourceMappingURL=SlideoverManager.stories.js.map

package/dist/components/slideoverManager/SlideoverManager.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideoverManager.stories.js","sourceRoot":"","sources":["../../../src/components/slideoverManager/SlideoverManager.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/slideoverManager/SlideoverManager.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=SlideoverManager.test.d.ts.map

package/dist/components/slideoverManager/SlideoverManager.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideoverManager.test.d.ts","sourceRoot":"","sources":["../../../src/components/slideoverManager/SlideoverManager.test.tsx"],"names":[],"mappings":"AAGA,OAAO,kCAAkC,CAAC"}

package/dist/components/slideoverManager/SlideoverManager.test.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { expect, test, describe } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import { SlideoverManager } from './SlideoverManager';
+import '@testing-library/jest-dom/vitest';
+import { SlideoverUtils } from '../../utils/SlideoverUtils';
+const slideover1 = {
+    title: 'Slideover 1',
+    children: 'Content 1',
+};
+const slideover2 = {
+    title: 'Slideover 2',
+    children: 'Content 2',
+};
+describe('SlideoverManager', () => {
+    test('updates slideovers when the slideovers prop changes', () => {
+        const { rerender } = render(_jsx(SlideoverManager, { slideovers: [] }));
+        expect(screen.queryByText('Slideover 1')).not.toBeInTheDocument();
+        rerender(_jsx(SlideoverManager, { slideovers: [slideover1] }));
+        expect(screen.getByText('Slideover 1')).toBeInTheDocument();
+        rerender(_jsx(SlideoverManager, { slideovers: [slideover1, slideover2] }));
+        expect(screen.getByText('Slideover 1')).toBeInTheDocument();
+        expect(screen.getByText('Slideover 2')).toBeInTheDocument();
+        rerender(_jsx(SlideoverManager, { slideovers: [slideover2] }));
+        expect(screen.queryByText('Slideover 1')).not.toBeInTheDocument();
+        expect(screen.getByText('Slideover 2')).toBeInTheDocument();
+        rerender(_jsx(SlideoverManager, { slideovers: [] }));
+        expect(screen.queryByText('Slideover 1')).not.toBeInTheDocument();
+        expect(screen.queryByText('Slideover 2')).not.toBeInTheDocument();
+    });
+    test('adds and removes slideovers using SlideoverUtils', () => {
+        render(_jsx(SlideoverManager, { slideovers: [] }));
+        act(() => {
+            SlideoverUtils.addSlideover({ title: 'First Slideover', children: '' });
+        });
+        expect(screen.getByText('First Slideover')).toBeInTheDocument();
+        act(() => {
+            SlideoverUtils.addSlideover({ title: 'Second Slideover', children: '' });
+        });
+        expect(screen.getByText('First Slideover')).toBeInTheDocument();
+        expect(screen.getByText('Second Slideover')).toBeInTheDocument();
+        act(() => {
+            SlideoverUtils.removeSlideover();
+        });
+        expect(screen.getByText('First Slideover')).toBeInTheDocument();
+        expect(screen.queryByText('Second Slideover')).not.toBeInTheDocument();
+        act(() => {
+            SlideoverUtils.removeAllSlideovers();
+        });
+        expect(screen.queryByText('First Slideover')).not.toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=SlideoverManager.test.js.map

package/dist/components/slideoverManager/SlideoverManager.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideoverManager.test.js","sourceRoot":"","sources":["../../../src/components/slideoverManager/SlideoverManager.test.tsx"],"names":[],"mappings":"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"}

package/dist/components/tabs/Tabs.d.ts

@@ -1,21 +1,17 @@
-import { type ReactNode } from 'react';
-type TabsProps = {
-    children: ReactNode;
-    defaultActiveTab?: string;
-    className?: string;
-    onTabChange?: (tabId: string) => void;
-};
+import { type HTMLAttributes } from 'react';
 export declare const Tabs: {
-    ({ children, defaultActiveTab, className, onTabChange, }: TabsProps): import("react/jsx-runtime").JSX.Element;
-    Item: ({ children, tabId, label, disabled, className, }: TabsItemProps) => import("react/jsx-runtime").JSX.Element;
-};
-type TabsItemProps = {
-    children: ReactNode;
-    tabId: string;
-    label: string;
-    disabled?: boolean;
-    className?: string;
+    (props: HTMLAttributes<HTMLUListElement> & {
+        children: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    Item: (props: {
+        active?: boolean;
+        iconName?: keyof typeof import("../icon/allowedIcons").allowedIcons;
+    } & (({
+        tabElement?: "button";
+        tabElementProps?: import("react").ButtonHTMLAttributes<HTMLButtonElement>;
+    } | {
+        tabElement?: "link";
+        tabElementProps?: import("react").AnchorHTMLAttributes<HTMLAnchorElement>;
+    }) & HTMLAttributes<HTMLLIElement>)) => import("react/jsx-runtime").JSX.Element;
 };
-export declare const TabsItem: ({ children, tabId, label, disabled, className, }: TabsItemProps) => import("react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=Tabs.d.ts.map

package/dist/components/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAc,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBnF,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,IAAI;8DAKd,SAAS;6DA+BT,aAAa;CAhBf,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,kDAMtB,aAAa,4CAiDf,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,eAAO,MAAM,IAAI;YAAW,cAAc,CAAC,gBAAgB,CAAC,GAAG;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;;;;;;;;CAO3F,CAAC"}

package/dist/components/tabs/Tabs.js

@@ -1,43 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import React, { createContext, useContext, useState } from 'react';
-const TabsContext = createContext(undefined);
-const useTabsContext = () => {
-    const context = useContext(TabsContext);
-    if (!context) {
-        throw new Error('Tabs.Item must be used within a Tabs component');
-    }
-    return context;
+import {} from 'react';
+import { TabsItem } from './TabsItem';
+export const Tabs = (props) => {
+    const { children, className, ...rest } = props;
+    return (_jsx("ul", { role: "tablist", className: classNames('ds-tabs', className), ...rest, children: children }));
 };
-export const Tabs = ({ children, defaultActiveTab, className = '', onTabChange, }) => {
-    const [activeTab, setActiveTab] = useState(defaultActiveTab || '');
-    const handleTabChange = (tabId) => {
-        setActiveTab(tabId);
-        onTabChange?.(tabId);
-    };
-    return (_jsx(TabsContext.Provider, { value: { activeTab, setActiveTab: handleTabChange }, children: _jsx("div", { className: classNames('ds-tabs', className), children: children }) }));
-};
-export const TabsItem = ({ children, tabId, label, disabled = false, className = '', }) => {
-    const { activeTab, setActiveTab } = useTabsContext();
-    const isActive = activeTab === tabId;
-    const handleClick = () => {
-        if (!disabled) {
-            setActiveTab(tabId);
-        }
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            if (!disabled) {
-                setActiveTab(tabId);
-            }
-        }
-    };
-    return (_jsxs("div", { className: classNames('ds-tabs__item', className), children: [_jsx("button", { className: classNames('ds-tabs__tab', {
-                    'ds-tabs__tab--active': isActive,
-                    'ds-tabs__tab--disabled': disabled,
-                }), onClick: handleClick, onKeyDown: handleKeyDown, disabled: disabled, role: "tab", "aria-selected": isActive, "aria-controls": `tabpanel-${tabId}`, id: `tab-${tabId}`, tabIndex: isActive ? 0 : -1, children: label }), isActive && (_jsx("div", { className: "ds-tabs__content", role: "tabpanel", id: `tabpanel-${tabId}`, "aria-labelledby": `tab-${tabId}`, children: children }))] }));
-};
-// Compound component pattern
 Tabs.Item = TabsItem;
 //# sourceMappingURL=Tabs.js.map

package/dist/components/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAuE,EAAE,EAAE;IAC9F,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC/C,OAAO,CACL,aAAI,IAAI,EAAC,SAAS,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,KAAM,IAAI,YACrE,QAAQ,GACN,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC"}

package/dist/components/tabs/Tabs.stories.d.ts

@@ -1,11 +1,40 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Tabs } from './Tabs';
-declare const meta: Meta<typeof Tabs>;
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: {
+        (props: import("react").HTMLAttributes<HTMLUListElement> & {
+            children: React.ReactNode;
+        }): import("react/jsx-runtime").JSX.Element;
+        Item: (props: {
+            active?: boolean;
+            iconName?: keyof typeof import("../icon/allowedIcons").allowedIcons;
+        } & (({
+            tabElement?: "button";
+            tabElementProps?: import("react").ButtonHTMLAttributes<HTMLButtonElement>;
+        } | {
+            tabElement?: "link";
+            tabElementProps?: import("react").AnchorHTMLAttributes<HTMLAnchorElement>;
+        }) & import("react").HTMLAttributes<HTMLLIElement>)) => import("react/jsx-runtime").JSX.Element;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        children: {
+            control: false;
+            description: string;
+        };
+        className: {
+            control: "text";
+            description: string;
+        };
+    };
+};
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const WithDisabledTab: Story;
+export declare const WithLinks: Story;
+export declare const Mixed: Story;
 export declare const ManyTabs: Story;
-export declare const WithRichContent: Story;
-export declare const CustomStyling: Story;
 //# sourceMappingURL=Tabs.stories.d.ts.map

package/dist/components/tabs/Tabs.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAyB3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA0B7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA4CtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA2D7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAqC3B,CAAC"}
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,KAenB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC"}

package/dist/components/tabs/Tabs.stories.js

@@ -1,74 +1,46 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tabs } from './Tabs';
 const meta = {
     title: 'Components/Tabs',
     component: Tabs,
     parameters: {
         layout: 'padded',
-        docs: {
-            description: {
-                component: 'A flexible tabs component with compound component pattern. Use Tabs.Item to create individual tab items.',
-            },
-        },
     },
+    tags: ['autodocs'],
     argTypes: {
-        defaultActiveTab: {
-            control: 'text',
-            description: 'The ID of the tab that should be active by default',
-        },
-        onTabChange: {
-            action: 'tab changed',
-            description: 'Callback function called when the active tab changes',
+        children: {
+            control: false,
+            description: 'Tab items to display',
         },
         className: {
             control: 'text',
-            description: 'Additional CSS class name for the tabs container',
+            description: 'Additional CSS classes',
         },
     },
 };
 export default meta;
+// Basic tabs with buttons
 export const Default = {
     args: {
-        defaultActiveTab: 'tab1',
-    },
-    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Overview", children: _jsxs("div", { children: [_jsx("h3", { children: "Overview" }), _jsx("p", { children: "This is the overview tab content. It contains general information about the topic." })] }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Details", children: _jsxs("div", { children: [_jsx("h3", { children: "Details" }), _jsx("p", { children: "This is the details tab content. It provides more specific information and data." })] }) }), _jsx(Tabs.Item, { tabId: "tab3", label: "Settings", children: _jsxs("div", { children: [_jsx("h3", { children: "Settings" }), _jsx("p", { children: "This is the settings tab content. It contains configuration options and preferences." })] }) })] })),
-};
-export const WithDisabledTab = {
-    args: {
-        defaultActiveTab: 'tab1',
+        children: (_jsxs(_Fragment, { children: [_jsx(Tabs.Item, { active: true, children: "Overview" }), _jsx(Tabs.Item, { children: "Details" }), _jsx(Tabs.Item, { children: "Settings" })] })),
     },
-    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Available", children: _jsxs("div", { children: [_jsx("h3", { children: "Available" }), _jsx("p", { children: "This tab is available and can be clicked." })] }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Disabled", disabled: true, children: _jsxs("div", { children: [_jsx("h3", { children: "Disabled" }), _jsx("p", { children: "This tab is disabled and cannot be clicked." })] }) }), _jsx(Tabs.Item, { tabId: "tab3", label: "Another Available", children: _jsxs("div", { children: [_jsx("h3", { children: "Another Available" }), _jsx("p", { children: "This tab is also available and can be clicked." })] }) })] })),
 };
-export const ManyTabs = {
+// Tabs with links
+export const WithLinks = {
     args: {
-        defaultActiveTab: 'tab3',
+        children: (_jsxs(_Fragment, { children: [_jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#overview' }, active: true, children: "Overview" }), _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#details' }, children: "Details" }), _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#settings' }, children: "Settings" })] })),
     },
-    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "First", children: _jsxs("div", { children: [_jsx("h3", { children: "First Tab" }), _jsx("p", { children: "Content for the first tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Second", children: _jsxs("div", { children: [_jsx("h3", { children: "Second Tab" }), _jsx("p", { children: "Content for the second tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab3", label: "Third", children: _jsxs("div", { children: [_jsx("h3", { children: "Third Tab" }), _jsx("p", { children: "Content for the third tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab4", label: "Fourth", children: _jsxs("div", { children: [_jsx("h3", { children: "Fourth Tab" }), _jsx("p", { children: "Content for the fourth tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab5", label: "Fifth", children: _jsxs("div", { children: [_jsx("h3", { children: "Fifth Tab" }), _jsx("p", { children: "Content for the fifth tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab6", label: "Sixth", children: _jsxs("div", { children: [_jsx("h3", { children: "Sixth Tab" }), _jsx("p", { children: "Content for the sixth tab." })] }) })] })),
 };
-export const WithRichContent = {
+// Mixed tabs (buttons and links)
+export const Mixed = {
     args: {
-        defaultActiveTab: 'dashboard',
+        children: (_jsxs(_Fragment, { children: [_jsx(Tabs.Item, { active: true, children: "Home" }), _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#about' }, children: "About" }), _jsx(Tabs.Item, { children: "Contact" }), _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#help' }, children: "Help" })] })),
     },
-    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "dashboard", label: "Dashboard", children: _jsxs("div", { children: [_jsx("h3", { children: "Dashboard" }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginTop: '16px' }, children: [_jsxs("div", { style: { padding: '16px', backgroundColor: '#f5f5f5', borderRadius: '8px' }, children: [_jsx("h4", { children: "Total Users" }), _jsx("p", { style: { fontSize: '24px', fontWeight: 'bold', margin: '8px 0' }, children: "1,234" })] }), _jsxs("div", { style: { padding: '16px', backgroundColor: '#f5f5f5', borderRadius: '8px' }, children: [_jsx("h4", { children: "Active Sessions" }), _jsx("p", { style: { fontSize: '24px', fontWeight: 'bold', margin: '8px 0' }, children: "567" })] })] })] }) }), _jsx(Tabs.Item, { tabId: "analytics", label: "Analytics", children: _jsxs("div", { children: [_jsx("h3", { children: "Analytics" }), _jsx("p", { children: "View detailed analytics and reports for your application." }), _jsxs("ul", { style: { marginTop: '16px' }, children: [_jsx("li", { children: "Page views" }), _jsx("li", { children: "User engagement" }), _jsx("li", { children: "Conversion rates" }), _jsx("li", { children: "Performance metrics" })] })] }) }), _jsx(Tabs.Item, { tabId: "settings", label: "Settings", children: _jsxs("div", { children: [_jsx("h3", { children: "Settings" }), _jsxs("form", { style: { marginTop: '16px' }, children: [_jsxs("div", { style: { marginBottom: '16px' }, children: [_jsx("label", { htmlFor: "theme", children: "Theme:" }), _jsxs("select", { id: "theme", style: { marginLeft: '8px', padding: '4px 8px' }, children: [_jsx("option", { children: "Light" }), _jsx("option", { children: "Dark" }), _jsx("option", { children: "Auto" })] })] }), _jsx("div", { style: { marginBottom: '16px' }, children: _jsxs("label", { children: [_jsx("input", { type: "checkbox", style: { marginRight: '8px' } }), "Enable notifications"] }) }), _jsx("button", { type: "submit", style: { padding: '8px 16px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px' }, children: "Save Settings" })] })] }) })] })),
 };
-export const CustomStyling = {
+// Many tabs
+export const ManyTabs = {
     args: {
-        defaultActiveTab: 'tab1',
-        className: 'custom-tabs-container',
+        children: (_jsxs(_Fragment, { children: [_jsx(Tabs.Item, { active: true, iconName: "list", children: "Tab 1" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 2" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 3" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 4" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 5" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 6" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 7" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 8" })] })),
     },
-    render: (args) => (_jsxs("div", { children: [_jsx("style", { children: `
-        .custom-tabs-container {
-          border: 2px solid #e0e0e0;
-          border-radius: 8px;
-          padding: 16px;
-        }
-        .custom-tabs-container .ds-tabs__tab {
-          border-radius: 4px;
-          margin-right: 4px;
-        }
-        .custom-tabs-container .ds-tabs__tab--active {
-          background-color: #f0f8ff;
-        }
-      ` }), _jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Styled Tab 1", children: _jsxs("div", { children: [_jsx("h3", { children: "Custom Styled Tab" }), _jsx("p", { children: "This tab has custom styling applied to the container." })] }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Styled Tab 2", children: _jsxs("div", { children: [_jsx("h3", { children: "Another Custom Tab" }), _jsx("p", { children: "Notice the custom border and styling around the tabs container." })] }) })] })] })),
 };
 //# sourceMappingURL=Tabs.stories.js.map

package/dist/components/tabs/Tabs.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tabs.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;KACjB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,sBAAsB;SACpC;QACD,SAAS,EAAE;YACT,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,wBAAwB;SACtC;KACF;CAC0B,CAAC;AAE9B,eAAe,IAAI,CAAC;AAGpB,0BAA0B;AAC1B,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,QAAQ,EAAE,CACR,8BACE,KAAC,IAAI,CAAC,IAAI,IAAC,MAAM,+BAAqB,EACtC,KAAC,IAAI,CAAC,IAAI,0BAAoB,EAC9B,KAAC,IAAI,CAAC,IAAI,2BAAqB,IAC9B,CACJ;KACF;CACF,CAAC;AAEF,kBAAkB;AAClB,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,QAAQ,EAAE,CACR,8BACE,KAAC,IAAI,CAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,eAAe,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,MAAM,+BAE/D,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,eAAe,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,wBAEtD,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,eAAe,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,yBAEvD,IACX,CACJ;KACF;CACF,CAAC;AAEF,iCAAiC;AACjC,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,QAAQ,EAAE,CACR,8BACE,KAAC,IAAI,CAAC,IAAI,IAAC,MAAM,2BAAiB,EAClC,KAAC,IAAI,CAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,eAAe,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,sBAEpD,EACZ,KAAC,IAAI,CAAC,IAAI,0BAAoB,EAC9B,KAAC,IAAI,CAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,eAAe,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,qBAEnD,IACX,CACJ;KACF;CACF,CAAC;AAEF,YAAY;AACZ,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,QAAQ,EAAE,CACR,8BACE,KAAC,IAAI,CAAC,IAAI,IAAC,MAAM,QAAC,QAAQ,EAAC,MAAM,sBAAkB,EACnD,KAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,sBAAkB,EAC5C,KAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,sBAAkB,EAC5C,KAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,sBAAkB,EAC5C,KAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,sBAAkB,EAC5C,KAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,sBAAkB,EAC5C,KAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,sBAAkB,EAC5C,KAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,sBAAkB,IAC3C,CACJ;KACF;CACF,CAAC"}

package/dist/components/tabs/Tabs.test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.test.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.test.tsx"],"names":[],"mappings":"AAIA,OAAO,kCAAkC,CAAC"}
+{"version":3,"file":"Tabs.test.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.test.tsx"],"names":[],"mappings":"AAGA,OAAO,kCAAkC,CAAC"}