@digdir/designsystemet-react 1.0.0-next.32 → 1.0.0-next.34

package/dist/cjs/components/DropdownMenu/DropdownMenuRoot.js

@@ -1,49 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-
-/**
- * DropdownMenuRoot is the root component for the DropdownMenu component.
- * @example
- * <DropdownMenu.Root>
- *  <DropdownMenu.Trigger>Dropdown</DropdownMenu.Trigger>
- *  <DropdownMenu.Content>
- *    <DropdownMenu.Group heading='Heading'>
- *      <DropdownMenu.Item>Button 1</DropdownMenu.Item>
- *    </DropdownMenu.Group>
- *  </DropdownMenu.Content>
- * </DropdownMenu.Root>
- */
-const DropdownMenuRoot = ({ open, onClose, placement = 'bottom-end', portal, size = 'md', children, }) => {
-    const triggerRef = React.useRef(null);
-    const [internalOpen, setInternalOpen] = React.useState(open ?? false);
-    const anchorEl = triggerRef.current;
-    const isControlled = typeof open === 'boolean';
-    React.useEffect(() => {
-        setInternalOpen(open ?? false);
-    }, [open]);
-    return (jsxRuntime.jsx(DropdownMenuContext.Provider, { value: {
-            anchorEl,
-            triggerRef,
-            size,
-            portal,
-            placement,
-            internalOpen,
-            isControlled,
-            onClose,
-            setInternalOpen,
-        }, children: children }));
-};
-const DropdownMenuContext = React.createContext({
-    triggerRef: { current: null },
-    size: 'md',
-    anchorEl: null,
-    internalOpen: false,
-    setInternalOpen: () => { },
-});
-DropdownMenuRoot.displayName = 'DropdownMenuRoot';
-
-exports.DropdownMenuContext = DropdownMenuContext;
-exports.DropdownMenuRoot = DropdownMenuRoot;

package/dist/cjs/components/DropdownMenu/DropdownMenuTrigger.js

@@ -1,22 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var React = require('react');
-var DropdownMenuRoot = require('./DropdownMenuRoot.js');
-var Button = require('../Button/Button.js');
-
-const DropdownMenuTrigger = React.forwardRef(({ asChild, ...rest }, ref) => {
-    const { triggerRef, internalOpen, setInternalOpen, isControlled } = React.useContext(DropdownMenuRoot.DropdownMenuContext);
-    const mergedRefs = floatingUi_react.useMergeRefs([ref, triggerRef]);
-    const Component = asChild ? index.Slot : Button.Button;
-    return (jsxRuntime.jsx(Component, { ref: mergedRefs, onClick: () => {
-            if (!isControlled)
-                setInternalOpen(!internalOpen);
-        }, "aria-haspopup": 'menu', "aria-expanded": internalOpen, ...rest }));
-});
-DropdownMenuTrigger.displayName = 'DropdownMenuTrigger';
-
-exports.DropdownMenuTrigger = DropdownMenuTrigger;

package/dist/cjs/components/DropdownMenu/index.js

@@ -1,38 +0,0 @@
-'use client';
-'use strict';
-
-var DropdownMenuContent = require('./DropdownMenuContent.js');
-var DropdownMenuGroup = require('./DropdownMenuGroup.js');
-var DropdownMenuItem = require('./DropdownMenuItem.js');
-var DropdownMenuRoot = require('./DropdownMenuRoot.js');
-var DropdownMenuTrigger = require('./DropdownMenuTrigger.js');
-
-/**
- * @example
- * <DropdownMenu.Root>
- *  <DropdownMenu.Trigger>Dropdown</DropdownMenu.Trigger>
- *  <DropdownMenu.Content>
- *    <DropdownMenu.Group heading='Heading'>
- *      <DropdownMenu.Item>Button 1</DropdownMenu.Item>
- *    </DropdownMenu.Group>
- *  </DropdownMenu.Content>
- * </DropdownMenu.Root>
- */
-const DropdownMenu = {};
-DropdownMenu.Root = DropdownMenuRoot.DropdownMenuRoot;
-DropdownMenu.Content = DropdownMenuContent.DropdownMenuContent;
-DropdownMenu.Group = DropdownMenuGroup.DropdownMenuGroup;
-DropdownMenu.Item = DropdownMenuItem.DropdownMenuItem;
-DropdownMenu.Trigger = DropdownMenuTrigger.DropdownMenuTrigger;
-DropdownMenu.Root.displayName = 'DropdownMenu.Root';
-DropdownMenu.Content.displayName = 'DropdownMenu.Content';
-DropdownMenu.Group.displayName = 'DropdownMenu.Group';
-DropdownMenu.Item.displayName = 'DropdownMenu.Item';
-DropdownMenu.Trigger.displayName = 'DropdownMenu.Trigger';
-
-exports.DropdownMenuContent = DropdownMenuContent.DropdownMenuContent;
-exports.DropdownMenuGroup = DropdownMenuGroup.DropdownMenuGroup;
-exports.DropdownMenuItem = DropdownMenuItem.DropdownMenuItem;
-exports.DropdownMenuRoot = DropdownMenuRoot.DropdownMenuRoot;
-exports.DropdownMenuTrigger = DropdownMenuTrigger.DropdownMenuTrigger;
-exports.DropdownMenu = DropdownMenu;

package/dist/cjs/components/ErrorSummary/ErrorSummaryRoot.js

@@ -1,21 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var React = require('react');
-var index$1 = require('../List/index.js');
-
-const ErrorSummaryContext = React.createContext({
-    headingId: 'heading',
-    setHeadingId: () => { },
-});
-const ErrorSummaryRoot = React.forwardRef(({ size, role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', children, ...rest }, ref) => {
-    const randomId = React.useId();
-    const [headingId, setHeadingId] = React.useState(randomId);
-    return (jsxRuntime.jsx(ErrorSummaryContext.Provider, { value: { headingId, setHeadingId }, children: jsxRuntime.jsx(index.Slot, { className: 'ds-error-summary', ref: ref, role: role, "aria-live": ariaLive, "aria-relevant": ariaRelevant, "aria-labelledby": headingId, ...rest, children: jsxRuntime.jsx(index$1.List.Root, { size: size, children: children }) }) }));
-});
-ErrorSummaryRoot.displayName = 'ErrorSummaryRoot';
-
-exports.ErrorSummaryContext = ErrorSummaryContext;
-exports.ErrorSummaryRoot = ErrorSummaryRoot;

package/dist/cjs/components/HelpText/HelpTextIcon.js

@@ -1,14 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-
-const HelpTextIcon = ({ className, filled = false, openState, }) => {
-    const d = filled
-        ? 'M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 16a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-11c2.205 0 4 1.657 4 3.693 0 .986-.416 1.914-1.172 2.612l-.593.54-.294.28c-.477.466-.869.94-.936 1.417l-.01.144v.814h-1.991v-.814c0-1.254.84-2.214 1.675-3.002l.74-.68c.38-.35.59-.816.59-1.31 0-1.024-.901-1.856-2.01-1.856-1.054 0-1.922.755-2.002 1.71l-.006.145H8C8 6.657 9.794 5 12 5Z'
-        : 'M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 14a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-11c2.205 0 4 1.657 4 3.693 0 .986-.416 1.914-1.172 2.612l-.593.54-.294.28c-.477.466-.869.94-.936 1.417l-.01.144v.814h-1.991v-.814c0-1.254.84-2.214 1.675-3.002l.74-.68c.38-.35.59-.816.59-1.31 0-1.024-.901-1.856-2.01-1.856-1.054 0-1.922.755-2.002 1.71l-.006.145H8C8 6.657 9.794 5 12 5Z';
-    return (jsxRuntime.jsx("svg", { "aria-hidden": true, className: className, "data-state": openState ? 'open' : 'closed', fill: 'none', role: 'img', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', children: jsxRuntime.jsx("path", { clipRule: 'evenodd', d: d, fill: 'currentColor', fillRule: 'evenodd' }) }));
-};
-HelpTextIcon.displayName = 'HelpText.Icon';
-
-exports.HelpTextIcon = HelpTextIcon;

package/dist/cjs/components/List/ListHeading.js

@@ -1,28 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var ListRoot = require('./ListRoot.js');
-var Heading = require('../Typography/Heading/Heading.js');
-
-const HEADING_SIZE_MAP = {
-    sm: '2xs',
-    md: 'xs',
-    lg: 'sm',
-};
-const ListHeading = React.forwardRef(({ level = 2, id, ...rest }, ref) => {
-    const { size, headingId, setHeadingId } = React.useContext(ListRoot.ListContext);
-    const randomId = React.useId();
-    const headingId_ = id ?? randomId;
-    const headingSize = React.useMemo(() => HEADING_SIZE_MAP[size], [size]);
-    React.useEffect(() => {
-        if (headingId !== headingId_) {
-            setHeadingId(headingId_);
-        }
-    }, [headingId, id, setHeadingId, headingId_]);
-    return (jsxRuntime.jsx(Heading.Heading, { ref: ref, size: headingSize, id: headingId, level: level, spacing: true, ...rest }));
-});
-ListHeading.displayName = 'ListHeading';
-
-exports.ListHeading = ListHeading;

package/dist/cjs/components/List/ListRoot.js

@@ -1,21 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var React = require('react');
-
-const ListContext = React.createContext({
-    size: 'md',
-    headingId: 'heading',
-    setHeadingId: () => { },
-});
-const ListRoot = React.forwardRef(({ size = 'md', asChild, ...rest }, ref) => {
-    const [headingId, setHeadingId] = React.useState();
-    const Component = asChild ? index.Slot : 'div';
-    return (jsxRuntime.jsx(ListContext.Provider, { value: { size, headingId, setHeadingId }, children: jsxRuntime.jsx(Component, { ref: ref, ...rest }) }));
-});
-ListRoot.displayName = 'ListRoot';
-
-exports.ListContext = ListContext;
-exports.ListRoot = ListRoot;

package/dist/cjs/components/Pagination/PaginationContent.js

@@ -1,17 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var React = require('react');
-var PaginationRoot = require('./PaginationRoot.js');
-
-const PaginationContent = React.forwardRef(({ asChild, className, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : 'ul';
-    const { size } = React.useContext(PaginationRoot.PaginationContext);
-    return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx('ds-pagination', `ds-pagination--${size}`, className), ...rest }));
-});
-PaginationContent.displayName = 'PaginationContent';
-
-exports.PaginationContent = PaginationContent;

package/dist/cjs/components/Popover/PopoverContent.js

@@ -1,105 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var React = require('react');
-var PopoverRoot = require('./PopoverRoot.js');
-var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
-var floatingUi_reactDom = require('../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
-var useIsomorphicLayoutEffect = require('../../utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
-var Paragraph = require('../Typography/Paragraph/Paragraph.js');
-
-function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-const ARROW_HEIGHT = 7;
-const ARROW_GAP = 4;
-const ARROW_PLACEMENT = {
-    top: 'bottom',
-    right: 'left',
-    bottom: 'top',
-    left: 'right',
-};
-const PopoverContent = React.forwardRef(({ className, children, style, id, ...rest }, ref) => {
-    const { portal, internalOpen, size, isControlled, variant, placement, setInternalOpen, onClose, onOpenChange, anchorEl, popoverId, setPopoverId, triggerId, } = React.useContext(PopoverRoot.PopoverContext);
-    const Container = portal ? floatingUi_react.FloatingPortal : React__namespace.Fragment;
-    const floatingEl = React.useRef(null);
-    const arrowRef = React.useRef(null);
-    React.useEffect(() => {
-        id && setPopoverId?.(id);
-    }, [id, setPopoverId]);
-    const { context, update, refs, floatingStyles, placement: flPlacement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, }, } = floatingUi_react.useFloating({
-        placement,
-        open: internalOpen,
-        onOpenChange: (localOpen) => {
-            onOpenChange?.(localOpen);
-            if (!localOpen)
-                onClose?.();
-            if (!isControlled)
-                setInternalOpen(localOpen);
-        },
-        whileElementsMounted: floatingUi_dom.autoUpdate,
-        elements: {
-            reference: anchorEl ?? undefined,
-            floating: floatingEl.current,
-        },
-        middleware: [
-            floatingUi_reactDom.offset(ARROW_HEIGHT + ARROW_GAP),
-            floatingUi_reactDom.flip({
-                fallbackAxisSideDirection: 'start',
-            }),
-            floatingUi_reactDom.shift(),
-            floatingUi_reactDom.arrow({
-                element: arrowRef,
-            }),
-        ],
-    });
-    const { getFloatingProps } = floatingUi_react.useInteractions([
-        floatingUi_react.useFocus(context),
-        floatingUi_react.useClick(context),
-        floatingUi_react.useDismiss(context),
-        floatingUi_react.useRole(context),
-    ]);
-    const floatingRef = floatingUi_react.useMergeRefs([refs.setFloating, ref]);
-    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-        refs.setReference(anchorEl);
-        if (!refs.reference.current || !refs.floating.current || !internalOpen)
-            return;
-        const cleanup = floatingUi_dom.autoUpdate(refs.reference.current, refs.floating.current, update);
-        return () => cleanup();
-    }, [refs.floating, refs.reference, update, anchorEl, refs, internalOpen]);
-    const arrowPlacement = React.useMemo(() => {
-        return ARROW_PLACEMENT[flPlacement.split('-')[0]];
-    }, [flPlacement]);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: internalOpen && (jsxRuntime.jsx(Container, { children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { ref: floatingEl, className: lite.clsx('ds-popover', `ds-popover--${variant}`, `ds-popover--${size}`, className), "data-placement": flPlacement, ...getFloatingProps({
-                        ref: floatingRef,
-                        tabIndex: undefined,
-                    }), style: { ...floatingStyles, ...style }, id: popoverId, "aria-labelledby": triggerId, ...rest, children: [children, jsxRuntime.jsx("div", { ref: arrowRef, className: lite.clsx('ds-popover__arrow', `ds-popover__arrow--${arrowPlacement}`), style: {
-                                height: ARROW_HEIGHT,
-                                width: ARROW_HEIGHT,
-                                ...(arrowX != null ? { left: arrowX } : {}),
-                                ...(arrowY != null ? { top: arrowY } : {}),
-                                ...(arrowPlacement ? { [arrowPlacement]: -4.5 } : {}),
-                            } })] }) }) })) }));
-});
-PopoverContent.displayName = 'Popover.Content';
-
-exports.PopoverContent = PopoverContent;

package/dist/cjs/components/Popover/PopoverRoot.js

@@ -1,68 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-
-function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-const PopoverRoot = ({ children, placement = 'top', open, variant = 'default', portal, size = 'md', onOpenChange, onClose, }) => {
-    const triggerRef = React.useRef(null);
-    const [internalOpen, setInternalOpen] = React.useState(open ?? false);
-    const randomPopoverId = React.useId();
-    const [popoverId, setPopoverId] = React.useState(randomPopoverId);
-    const randomTriggerId = React.useId();
-    const [triggerId, setTriggerId] = React.useState(randomTriggerId);
-    const isControlled = typeof open === 'boolean';
-    React__namespace.useEffect(() => {
-        setInternalOpen(open ?? false);
-    }, [open]);
-    const anchorEl = triggerRef.current;
-    return (jsxRuntime.jsx(PopoverContext.Provider, { value: {
-            triggerRef,
-            anchorEl,
-            portal,
-            internalOpen,
-            isControlled,
-            setInternalOpen,
-            size,
-            variant,
-            placement,
-            onOpenChange,
-            onClose,
-            popoverId,
-            setPopoverId,
-            triggerId,
-            setTriggerId,
-        }, children: children }));
-};
-const PopoverContext = React__namespace.createContext({
-    size: 'sm',
-    variant: 'default',
-    anchorEl: null,
-    placement: 'top',
-    triggerRef: { current: null },
-    internalOpen: false,
-    setInternalOpen: () => { },
-});
-PopoverRoot.displayName = 'PopoverRoot';
-
-exports.PopoverContext = PopoverContext;
-exports.PopoverRoot = PopoverRoot;

package/dist/cjs/components/Skeleton/Circle/Circle.js

@@ -1,15 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
-var useSynchronizedAnimation = require('../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
-
-/**  Skeleton component used for indicating loading elements of circular shape */
-const Circle = ({ width, height, className, children, style, ...rest }) => {
-    const ref = useSynchronizedAnimation.useSynchronizedAnimation('ds-skeleton-opacity-fade');
-    return (jsxRuntime.jsx("div", { ref: ref, className: lite.clsx('ds-skeleton', 'ds-skeleton--circle', Boolean(children) && 'ds-skeleton--has-children', className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
-};
-Circle.displayName = 'SkeletonCircle';
-
-exports.Circle = Circle;

package/dist/cjs/components/Skeleton/Rectangle/Rectangle.js

@@ -1,15 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
-var useSynchronizedAnimation = require('../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
-
-/**  Skeleton component used for indicating loading elements of rectangle shape */
-const Rectangle = ({ width, height, className, children, style, ...rest }) => {
-    const ref = useSynchronizedAnimation.useSynchronizedAnimation('ds-skeleton-opacity-fade');
-    return (jsxRuntime.jsx("div", { ref: ref, className: lite.clsx('ds-skeleton', 'ds-skeleton--rectangle', Boolean(children) && 'ds-skeleton--has-children', className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
-};
-Rectangle.displayName = 'SkeletonRectangle';
-
-exports.Rectangle = Rectangle;

package/dist/cjs/components/Skeleton/Text/Text.js

@@ -1,15 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
-var useSynchronizedAnimation = require('../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
-
-/**  Skeleton component used for indicating loading elements of text */
-const Text = ({ width, height, className, style, children, ...rest }) => {
-    const ref = useSynchronizedAnimation.useSynchronizedAnimation('ds-skeleton-opacity-fade');
-    return (jsxRuntime.jsx("div", { ref: ref, className: lite.clsx('ds-skeleton', 'ds-skeleton--text', Boolean(children) && 'ds-skeleton--has-children', className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
-};
-Text.displayName = 'SkeletonText';
-
-exports.Text = Text;

package/dist/cjs/components/Skeleton/index.js

@@ -1,20 +0,0 @@
-'use client';
-'use strict';
-
-var Circle = require('./Circle/Circle.js');
-var Rectangle = require('./Rectangle/Rectangle.js');
-var Text = require('./Text/Text.js');
-
-const Skeleton = {
-    Circle: Circle.Circle,
-    Rectangle: Rectangle.Rectangle,
-    Text: Text.Text,
-};
-Skeleton.Circle.displayName = 'Skeleton.Circle';
-Skeleton.Rectangle.displayName = 'Skeleton.Rectangle';
-Skeleton.Text.displayName = 'Skeleton.Text';
-
-exports.SkeletonCircle = Circle.Circle;
-exports.SkeletonRectangle = Rectangle.Rectangle;
-exports.SkeletonText = Text.Text;
-exports.Skeleton = Skeleton;

package/dist/cjs/components/Spinner/Spinner.js

@@ -1,24 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var useSynchronizedAnimation = require('../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
-
-const sizeMap = {
-    '2xs': 13,
-    xs: 20,
-    sm: 27,
-    md: 40,
-    lg: 56,
-    xl: 79,
-};
-/**  Spinner component used for indicating busy or indeterminate loading */
-const Spinner = ({ title, color = 'neutral', size = 'md', className, style, ...rest }) => {
-    const svgRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-spinner-rotate-animation');
-    const strokeRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-spinner-stroke-animation');
-    return (jsxRuntime.jsxs("svg", { className: lite.clsx('ds-spinner', `ds-spinner--${color}`, className), style: { width: sizeMap[size], height: sizeMap[size], ...style }, viewBox: '0 0 50 50', ref: svgRef, ...rest, children: [jsxRuntime.jsx("title", { children: title }), jsxRuntime.jsx("circle", { className: lite.clsx('ds-spinner__background'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsxRuntime.jsx("circle", { className: lite.clsx(`ds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
-};
-Spinner.displayName = 'Spinner';
-
-exports.Spinner = Spinner;

package/dist/cjs/components/Tabs/Tab.js

@@ -1,23 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var React = require('react');
-var RovingFocusItem = require('../../utilities/RovingFocus/RovingFocusItem.js');
-var useTab = require('./useTab.js');
-var Paragraph = require('../Typography/Paragraph/Paragraph.js');
-
-/**
- * A single item in a Tabs component.
- * @example
- * <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
- */
-const Tab = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    const { size, ...useTabRest } = useTab.useTabItem(props);
-    return (jsxRuntime.jsx(RovingFocusItem.RovingFocusItem, { ...rest, asChild: true, children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, variant: 'short', size: size, children: jsxRuntime.jsx("button", { ...useTabRest, type: 'button', className: lite.clsx('ds-tabs__tab', 'ds-focus', className), ref: ref, children: children }) }) }));
-});
-Tab.displayName = 'Tab';
-
-exports.Tab = Tab;

package/dist/cjs/components/Tabs/TabContent.js

@@ -1,24 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var React = require('react');
-var TabsRoot = require('./TabsRoot.js');
-var Paragraph = require('../Typography/Paragraph/Paragraph.js');
-
-/**
- * A single content item in a Tabs component.
- * @example
- * ```tsx
- * <Tabs.Content value='1'>content 1</Tabs.Content>
- * ```
- */
-const TabContent = React.forwardRef(({ children, value, className, ...rest }, ref) => {
-    const { value: tabsValue, size } = React.useContext(TabsRoot.TabsContext);
-    const active = value === tabsValue;
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: active && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, variant: 'short', size: size, children: jsxRuntime.jsx("div", { className: lite.clsx('ds-tabs__content', className), ref: ref, ...rest, children: children }) })) }));
-});
-TabContent.displayName = 'TabContent';
-
-exports.TabContent = TabContent;

package/dist/cjs/components/Tabs/TabList.js

@@ -1,26 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var React = require('react');
-var TabsRoot = require('./TabsRoot.js');
-var RovingFocusRoot = require('../../utilities/RovingFocus/RovingFocusRoot.js');
-
-/**
- * The container for all `Tab` components.
- * @example
- * ```tsx
- * <Tabs.List>
- *  <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
- *  <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
- * </Tabs.List>
- * ```
- */
-const TabList = React.forwardRef(({ children, className, ...rest }, ref) => {
-    const { value } = React.useContext(TabsRoot.TabsContext);
-    return (jsxRuntime.jsx(RovingFocusRoot.RovingFocusRoot, { role: 'tablist', activeValue: value, className: lite.clsx('ds-tabs__tablist', className), orientation: 'ambiguous', ref: ref, ...rest, children: children }));
-});
-TabList.displayName = 'TabList';
-
-exports.TabList = TabList;

package/dist/cjs/components/Tabs/TabsRoot.js

@@ -1,46 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var React = require('react');
-
-const TabsContext = React.createContext({});
-/**
- * Display a group of tabs that can be toggled between.
- * @example
- * ```tsx
- * <Tabs.Root onChange={(value) => console.log(value)}>
- *   <Tabs.List>
- *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
- *     <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
- *     <Tabs.Tab value='3'>Tab 3</Tabs.Tab>
- *   </Tabs.List>
- *   <Tabs.Content value='1'>content 1</Tabs.Content>
- *   <Tabs.Content value='2'>content 2</Tabs.Content>
- *   <Tabs.Content value='3'>content 3</Tabs.Content>
- * </Tabs.Root>
- * ```
- */
-const TabsRoot = React.forwardRef(({ size = 'md', children, value, defaultValue, className, onChange, ...rest }, ref) => {
-    const isControlled = value !== undefined;
-    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
-    let onValueChange = onChange;
-    if (!isControlled) {
-        onValueChange = (newValue) => {
-            setUncontrolledValue(newValue);
-            onChange?.(newValue);
-        };
-        value = uncontrolledValue;
-    }
-    return (jsxRuntime.jsx(TabsContext.Provider, { value: {
-            value,
-            defaultValue,
-            onChange: onValueChange,
-            size,
-        }, children: jsxRuntime.jsx("div", { className: lite.clsx('ds-tabs', `ds-tabs--${size}`, className), ref: ref, ...rest, children: children }) }));
-});
-TabsRoot.displayName = 'TabsRoot';
-
-exports.TabsContext = TabsContext;
-exports.TabsRoot = TabsRoot;

package/dist/cjs/components/Tabs/useTab.js

@@ -1,24 +0,0 @@
-'use client';
-'use strict';
-
-var React = require('react');
-var TabsRoot = require('./TabsRoot.js');
-
-/** Handles props for `Tab` in context with `Tabs` */
-const useTabItem = (props) => {
-    const { value, ...rest } = props;
-    const tabs = React.useContext(TabsRoot.TabsContext);
-    const buttonId = `tab-${React.useId()}`;
-    return {
-        ...rest,
-        id: buttonId,
-        'aria-selected': tabs.value === value,
-        role: 'tab',
-        size: tabs.size,
-        onClick: () => {
-            tabs.onChange?.(value);
-        },
-    };
-};
-
-exports.useTabItem = useTabItem;