mosuk-ui 1.0.2 → 1.0.3

package/components/actions/button/(status)/component/component.interface.d.ts

@@ -1,4 +1,4 @@
-import { Popover } from '@base-ui-components/react';
+import { Popover } from '@base-ui/react';
 import { ComponentType, ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react';
 import { ButtonProps } from '../../component/component.interface';
 export interface StatusOption {

package/components/actions/button/component/component.module.css

@@ -22,7 +22,7 @@
             padding-right: calc(var(--spacing, .25rem) * 4);
 
             border-radius: calc(infinity * 1px);
-            border: 1px solid transparent;
+            border: none;
             outline: none;
 
             user-select: none;

package/components/actions/button/skeleton/component.module.css

@@ -11,19 +11,25 @@
             justify-content: center;
             gap: calc(var(--spacing, .25rem) * 2);
 
-            background-color: var(--color-gray-100, oklch(.967 .003 264.542));
+            background-color: transparent;
             color: var(--color-black, #000);
+
             font-size: var(--text-xs, .75rem);
             text-wrap: nowrap;
+            text-overflow: ellipsis;
 
             padding-left: calc(var(--spacing, .25rem) * 4);
             padding-right: calc(var(--spacing, .25rem) * 4);
+
             border-radius: calc(infinity * 1px);
+            border: 1px solid transparent;
             outline: none;
 
             user-select: none;
             transition: all 200ms ease-in-out;
 
+            cursor: pointer;
+
             svg {
                 width: calc(var(--spacing, .25rem) * 3.5);
                 height: calc(var(--spacing, .25rem) * 3.5);
@@ -35,15 +41,6 @@
                 transition: all 200ms ease-in-out;
             }
 
-            &:hover {
-                background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
-                color: var(--color-primary-500, #0074e7);
-
-                svg {
-                    color: var(--color-primary-500, #0074e7);
-                }
-            }
-
             &:not(:hover) {
                 transition: all 600ms ease-in-out;
 
@@ -51,7 +48,6 @@
                     transition: all 600ms ease-in-out;
                 }
             }
-
         }
     }
 }

package/components/actions/input/(mask)/(phone)/component/component.interface.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+import { IMaskInputProps } from 'react-imask';
+export type InputMaskPhoneProps<C extends ElementType = 'input'> = IMaskInputProps<HTMLInputElement> & {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref' | 'type' | 'mask' | 'definitions' | 'prepare'>;

package/components/actions/input/(mask)/(phone)/component/index.d.ts

@@ -1,5 +1,5 @@
-import { InputMaskProps as ParentComponentProps } from '../../component/component.interface';
+import { InputMaskPhoneProps, InputMaskPhoneProps as ParentComponentProps } from './component.interface';
 export declare const InputMaskPhone: (props: ParentComponentProps) => import("react").JSX.Element;
 export declare namespace InputMaskPhone {
-    type Props = ParentComponentProps;
+    type Props = InputMaskPhoneProps;
 }

package/components/actions/input/(mask)/(phone)/component/index.js

@@ -1,5 +1,3 @@
-import { InputMask as ParentComponent } from '../../component';
-var Component = function (props) {
-    return ParentComponent(props);
-};
+import { InputMaskPhone as ParentComponent } from './component';
+var Component = function (props) { return ParentComponent(props); };
 export var InputMaskPhone = Object.assign(Component, {});

package/components/actions/input/(mask)/component/component.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React, { ElementType } from 'react';
 import { InputMaskProps } from './component.interface';
-export declare function InputMask({ ...rest }: InputMaskProps): React.JSX.Element;
+export declare function InputMask<C extends ElementType = 'input'>({ as, ...rest }: InputMaskProps<C>): React.JSX.Element;

package/components/actions/input/(mask)/component/component.interface.d.ts

@@ -1,6 +1,6 @@
-import { RefObject } from 'react';
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
 import { IMaskInputProps } from 'react-imask';
-export type InputMaskProps = IMaskInputProps<HTMLInputElement> & {
-    ref?: RefObject<HTMLInputElement | null>;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-};
+export type InputMaskProps<C extends ElementType = 'input'> = IMaskInputProps<HTMLInputElement> & {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/actions/input/(mask)/component/component.js

@@ -25,6 +25,7 @@ import React from 'react';
 import { IMaskInput } from 'react-imask';
 import { Input } from '../../component/component';
 export function InputMask(_a) {
-    var rest = __rest(_a, []);
-    return (React.createElement(Input, __assign({}, rest, { as: IMaskInput, onChange: rest === null || rest === void 0 ? void 0 : rest.onChange, className: classNames('mosuk-input-mask', rest === null || rest === void 0 ? void 0 : rest.className) })));
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || IMaskInput);
+    return (React.createElement(Input, __assign({}, rest, { as: Component, ref: rest === null || rest === void 0 ? void 0 : rest.ref, className: classNames('mosuk-input-mask', rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }

package/components/actions/toggle/component/button/component.props.d.ts

@@ -2,5 +2,5 @@ import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
 export type ToggleButtonProps<C extends ElementType = 'button'> = {
     as?: C;
     ref?: Ref<any>;
-    value: any;
+    value?: any;
 } & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref' | 'value'>;

package/components/actions/toggle/component/component.js

@@ -84,6 +84,6 @@ export function Toggle(_a) {
             el.style.setProperty('--toggle-padding', getComputedStyle(el).paddingTop);
         }
     }, [className]);
-    return (React.createElement(ToggleProvider, { value: value, onChange: onChange },
+    return (React.createElement(ToggleProvider, { value: value, onChange: onChange, containerRef: containerRef },
         React.createElement(Component, __assign({}, rest, { ref: setRef, onClickCapture: handleClickCapture, className: classNames('mosuk-toggle', styles.toggle, className) }), rest === null || rest === void 0 ? void 0 : rest.children)));
 }

package/components/actions/toggle/component/component.module.css

@@ -20,8 +20,7 @@
             align-items: center;
             gap: calc(var(--spacing, .25rem) * 1);
 
-            background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
-            backdrop-filter: blur(18px);
+            background-color: var(--color-white, #ffffff);
 
             padding: var(--toggle-padding);
 
@@ -43,6 +42,8 @@
                 height: 100%;
                 max-height: 100%;
 
+                z-index: 1;
+
                 scroll-margin-inline: calc(var(--spacing, .25rem) * 48);
 
                 &:hover,
@@ -59,7 +60,7 @@
             .indicator {
                 position: absolute;
                 left: 0;
-                z-index: -1;
+                z-index: 0;
 
                 width: var(--toggle-indicator-width);
                 height: calc(100% - var(--toggle-padding) * 2);
@@ -70,7 +71,7 @@
                 border-radius: calc(infinity * 1px);
 
                 transform: translateX(var(--toggle-indicator-translate-x));
-                transition: all 400ms ease-in-out;
+                transition: all 200ms ease-in-out;
 
                 &.loading {
                     transition: all 0ms ease-in-out;

package/components/actions/toggle/component/indicator/component.js

@@ -28,7 +28,7 @@ export function ToggleIndicator(_a) {
     var _b;
     var as = _a.as, rest = __rest(_a, ["as"]);
     var Component = (as || 'div');
-    var _c = useToggle(), value = _c.value, optionRefs = _c.optionRefs;
+    var _c = useToggle(), value = _c.value, containerRef = _c.containerRef, optionRefs = _c.optionRefs;
     var _d = useState(null), style = _d[0], setStyle = _d[1];
     useEffect(function () {
         if (!value) {
@@ -51,14 +51,27 @@ export function ToggleIndicator(_a) {
         if (!el) {
             return;
         }
-        var observer = new ResizeObserver(updatePosition);
-        observer.observe(el);
+        var resizeObserver = new ResizeObserver(updatePosition);
+        resizeObserver.observe(el);
         var parent = el.offsetParent;
         if (parent) {
-            observer.observe(parent);
+            resizeObserver.observe(parent);
         }
-        return function () { return observer.disconnect(); };
-    }, [value, optionRefs]);
+        var container = containerRef.current;
+        var mutationObserver = container
+            ? new MutationObserver(updatePosition)
+            : null;
+        if (container && mutationObserver) {
+            mutationObserver.observe(container, {
+                childList: true,
+                subtree: false,
+            });
+        }
+        return function () {
+            resizeObserver.disconnect();
+            mutationObserver === null || mutationObserver === void 0 ? void 0 : mutationObserver.disconnect();
+        };
+    }, [value, containerRef, optionRefs]);
     return (React.createElement(Component, __assign({}, rest, { style: __assign(__assign({}, rest === null || rest === void 0 ? void 0 : rest.style), (style && {
             '--toggle-indicator-width': "".concat(style.width, "px"),
             '--toggle-indicator-translate-x': "".concat(style.left, "px"),

package/components/actions/toggle/component/providers/context/context.interface.d.ts

@@ -1,6 +1,7 @@
 export interface ToggleContextProps {
     value: any | null;
     onChange: (value: any) => void;
+    containerRef: React.RefObject<HTMLElement | null>;
     optionRefs: React.RefObject<Map<any, HTMLElement>>;
     registerOption: (value: any, el: HTMLElement | null) => void;
 }

package/components/actions/toggle/component/providers/provider.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { ToggleProviderProps } from './provider.interface';
-export declare function ToggleProvider({ value: controlledValue, onChange: controlledOnChange, children, }: ToggleProviderProps): React.JSX.Element;
+export declare function ToggleProvider({ value: controlledValue, onChange: controlledOnChange, containerRef, children, }: ToggleProviderProps): React.JSX.Element;

package/components/actions/toggle/component/providers/provider.interface.d.ts

@@ -1,6 +1,7 @@
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 export interface ToggleProviderProps {
     value?: any | null;
     onChange?: (value: any) => void;
+    containerRef?: RefObject<HTMLElement | null>;
     children?: ReactNode;
 }

package/components/actions/toggle/component/providers/provider.js

@@ -2,9 +2,10 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { ToggleContext } from './context/context';
 export function ToggleProvider(_a) {
-    var controlledValue = _a.value, controlledOnChange = _a.onChange, children = _a.children;
+    var controlledValue = _a.value, controlledOnChange = _a.onChange, containerRef = _a.containerRef, children = _a.children;
     var _b = useState(null), uncontrolledValue = _b[0], setUncontrolledValue = _b[1];
     var optionRefs = useRef(new Map());
+    var fallbackContainerRef = useRef(null);
     var value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
     var onChange = useCallback(function (nextValue) {
         if (controlledOnChange) {
@@ -22,6 +23,12 @@ export function ToggleProvider(_a) {
             optionRefs.current.delete(val);
         }
     }, []);
-    var contextValue = useMemo(function () { return ({ value: value, onChange: onChange, optionRefs: optionRefs, registerOption: registerOption }); }, [value, onChange]);
+    var contextValue = useMemo(function () { return ({
+        value: value,
+        onChange: onChange,
+        containerRef: containerRef !== null && containerRef !== void 0 ? containerRef : fallbackContainerRef,
+        optionRefs: optionRefs,
+        registerOption: registerOption,
+    }); }, [value, onChange, containerRef]);
     return (React.createElement(ToggleContext.Provider, { value: contextValue }, children));
 }

package/components/actions/toggle/skeleton/button/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { ToggleButtonSkeletonProps } from './component.props';
+export declare function ToggleButtonSkeleton<C extends ElementType = 'div'>({ as, ...rest }: ToggleButtonSkeletonProps<C>): React.JSX.Element;

package/components/actions/toggle/skeleton/button/component.js

@@ -0,0 +1,31 @@
+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;
+};
+import classNames from 'classnames';
+import React from 'react';
+import { ButtonSkeleton } from '../../../button/skeleton/component';
+import styles from '../component.module.css';
+export function ToggleButtonSkeleton(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'div');
+    return (React.createElement(ButtonSkeleton, __assign({}, rest, { as: Component, className: classNames('mosuk-toggle-button', styles.button, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/{overlays/dialogs/dialog/component/dialog/body/component.interface.d.ts → actions/toggle/skeleton/button/component.props.d.ts}

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
-export type DialogDialogBodyProps<C extends ElementType = 'div'> = {
+export type ToggleButtonSkeletonProps<C extends ElementType = 'div'> = {
     as?: C;
     ref?: Ref<any>;
 } & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/actions/toggle/skeleton/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { ToggleSkeletonProps } from './component.props';
+export declare function ToggleSkeleton<C extends ElementType = 'div'>({ as, ...rest }: ToggleSkeletonProps<C>): React.JSX.Element;

package/components/{texts/h2/component/text → actions/toggle/skeleton}/component.js

@@ -21,10 +21,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import classNames from 'classnames';
-import styles from '../component.module.css';
 import React from 'react';
-export function H2Text(_a) {
+import styles from './component.module.css';
+export function ToggleSkeleton(_a) {
     var as = _a.as, rest = __rest(_a, ["as"]);
-    var Component = (as || 'span');
-    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-h2-text', styles.text, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+    var Component = (as || 'div');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-toggle', styles.toggle, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }

package/components/actions/toggle/skeleton/component.module.css

@@ -0,0 +1,51 @@
+@layer mosuk-ui {
+    @layer index-21 {
+        :where(.toggle) {
+            --toggle-padding: 2px;
+        }
+
+        .toggle {
+            overflow-x: auto;
+
+            position: relative;
+
+            width: 100%;
+            height: calc(var(--spacing, .25rem) * 8);
+            max-width: 100%;
+
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: calc(var(--spacing, .25rem) * 1);
+
+            background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
+            backdrop-filter: blur(18px);
+
+            padding: var(--toggle-padding);
+
+            border-radius: calc(infinity * 1px);
+            border: 1px solid color-mix(in oklab, var(--color-gray-200, oklch(0.928 0.006 264.531)) 50%, transparent);
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            &:disabled {
+                opacity: 50%;
+                pointer-events: none;
+            }
+
+            .button {
+                width: fit-content;
+                min-width: fit-content;
+                height: 100%;
+                max-height: 100%;
+
+                background-color: transparent;
+
+                scroll-margin-inline: calc(var(--spacing, .25rem) * 48);
+            }
+
+        }
+    }
+}

package/components/{texts/h2/component/text/component.interface.d.ts → actions/toggle/skeleton/component.props.d.ts}

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
-export type H2TextProps<C extends ElementType = 'span'> = {
+export type ToggleSkeletonProps<C extends ElementType = 'div'> = {
     as?: C;
     ref?: Ref<any>;
 } & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/actions/toggle/skeleton/index.d.ts

@@ -0,0 +1,13 @@
+import { ToggleButtonSkeleton } from './button/component';
+import { ToggleButtonSkeletonProps } from './button/component.props';
+import { ToggleSkeleton as Component } from './component';
+import type { ToggleSkeletonProps } from './component.props';
+export declare const ToggleSkeleton: typeof Component & {
+    Button: typeof ToggleButtonSkeleton;
+};
+export declare namespace ToggleSkeleton {
+    type Props = ToggleSkeletonProps;
+    namespace Button {
+        type Props = ToggleButtonSkeletonProps;
+    }
+}

package/components/actions/toggle/skeleton/index.js

@@ -0,0 +1,5 @@
+import { ToggleButtonSkeleton } from './button/component';
+import { ToggleSkeleton as Component } from './component';
+export var ToggleSkeleton = Object.assign(Component, {
+    Button: ToggleButtonSkeleton,
+});

package/components/collections/accordion/component/component.interface.d.ts

@@ -1,3 +1,3 @@
-import { Accordion } from '@base-ui-components/react/accordion';
+import { Accordion } from '@base-ui/react/accordion';
 export interface AccordionProps extends Accordion.Root.Props {
 }

package/components/collections/accordion/component/component.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Accordion as BaseAccordion } from '@base-ui-components/react/accordion';
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
 import classNames from 'classnames';
 import React from 'react';
 import styles from './component.module.css';

package/components/collections/accordion/component/component.module.css

@@ -2,16 +2,6 @@
   @layer index-14 {
     .accordion {
       .item {
-        padding-bottom: calc(var(--spacing, .25rem) * 4);
-        margin-bottom: calc(var(--spacing, .25rem) * 4);
-        border-bottom: 1px solid var(--color-gray-100, oklch(0.967 0.003 264.542));
-
-        &:last-child {
-          padding-bottom: 0;
-          margin-bottom: 0;
-          border-bottom: none;
-        }
-
         .header {
           width: 100%;
 
@@ -27,17 +17,6 @@
 
             cursor: pointer;
           }
-
-          .icon {
-            &[data-panel-open] {
-              background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
-              color: var(--color-gray-500, oklch(0.551 0.027 264.364));
-
-              svg {
-                transform: rotate(45deg);
-              }
-            }
-          }
         }
       }
 

package/components/collections/accordion/component/index.d.ts

@@ -8,12 +8,9 @@ import { AccordionHeader as BaseAccordionHeader } from './item/header/component'
 import { AccordionHeaderProps } from './item/header/component.interface';
 import { AccordionHeaderContent as BaseAccordionHeaderContent } from './item/header/content/component';
 import { AccordionHeaderContentProps } from './item/header/content/component.interface';
-import { AccordionHeaderIcon as BaseAccordionHeaderIcon } from './item/header/icon/component';
-import { AccordionHeaderIconProps } from './item/header/icon/component.interface';
 export declare const Accordion: typeof BaseAccordion & {
     Item: typeof BaseAccordionItem;
     Header: typeof BaseAccordionHeader & {
-        Icon: typeof BaseAccordionHeaderIcon;
         Content: typeof BaseAccordionHeaderContent;
     };
     Content: typeof BaseAccordionContent;
@@ -25,9 +22,6 @@ export declare namespace Accordion {
     }
     namespace Header {
         type Props = AccordionHeaderProps;
-        namespace Icon {
-            type Props = AccordionHeaderIconProps;
-        }
         namespace Content {
             type Props = AccordionHeaderContentProps;
         }

package/components/collections/accordion/component/index.js

@@ -3,12 +3,10 @@ import { AccordionItem as BaseAccordionItem } from './item/component';
 import { AccordionContent as BaseAccordionContent } from './item/content/component';
 import { AccordionHeader as BaseAccordionHeader } from './item/header/component';
 import { AccordionHeaderContent as BaseAccordionHeaderContent } from './item/header/content/component';
-import { AccordionHeaderIcon as BaseAccordionHeaderIcon } from './item/header/icon/component';
 export var Accordion = Object.assign(BaseAccordion, {
     Item: BaseAccordionItem,
     Header: Object.assign(BaseAccordionHeader, {
         Content: BaseAccordionHeaderContent,
-        Icon: BaseAccordionHeaderIcon,
     }),
     Content: BaseAccordionContent,
 });

package/components/collections/accordion/component/item/component.interface.d.ts

@@ -1,3 +1,3 @@
-import { Accordion } from '@base-ui-components/react/accordion';
+import { Accordion } from '@base-ui/react/accordion';
 export interface AccordionItemProps extends Accordion.Item.Props {
 }

package/components/collections/accordion/component/item/component.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Accordion as BaseAccordion } from '@base-ui-components/react/accordion';
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
 import classNames from 'classnames';
 import React from 'react';
 import styles from '../component.module.css';

package/components/collections/accordion/component/item/content/component.interface.d.ts

@@ -1,3 +1,3 @@
-import { Accordion } from '@base-ui-components/react/accordion';
+import { Accordion } from '@base-ui/react/accordion';
 export interface AccordionContentProps extends Accordion.Panel.Props {
 }

package/components/collections/accordion/component/item/content/component.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Accordion as BaseAccordion } from '@base-ui-components/react/accordion';
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
 import classNames from 'classnames';
 import React from 'react';
 import styles from '../../component.module.css';

package/components/collections/accordion/component/item/header/component.interface.d.ts

@@ -1,3 +1,3 @@
-import { Accordion } from '@base-ui-components/react/accordion';
+import { Accordion } from '@base-ui/react/accordion';
 export interface AccordionHeaderProps extends Accordion.Header.Props {
 }

package/components/collections/accordion/component/item/header/component.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Accordion as BaseAccordion } from '@base-ui-components/react/accordion';
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
 import classNames from 'classnames';
 import React from 'react';
 import styles from '../../component.module.css';

package/components/collections/accordion/component/item/header/content/component.interface.d.ts

@@ -1,3 +1,3 @@
-import { Accordion } from '@base-ui-components/react/accordion';
+import { Accordion } from '@base-ui/react/accordion';
 export interface AccordionHeaderContentProps extends Accordion.Trigger.Props {
 }

package/components/collections/accordion/component/item/header/content/component.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Accordion as BaseAccordion } from '@base-ui-components/react/accordion';
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
 import classNames from 'classnames';
 import React from 'react';
 export function AccordionHeaderContent(_a) {

package/components/collections/accordion/skeleton/component.js

@@ -23,7 +23,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { IconSkeleton } from '../../../actions/icon/skeleton/component';
 import { H3Skeleton } from '../../../texts/h3/skeleton/component';
-import { H3TextSkeleton } from '../../../texts/h3/skeleton/text/component';
 import styles from './component.module.css';
 export function AccordionSkeleton(_a) {
     var _b;
@@ -42,8 +41,7 @@ export function AccordionSkeletonHeader(_a) {
 }
 export function AccordionSkeletonHeaderContent(_a) {
     var props = __rest(_a, []);
-    return (React.createElement(H3Skeleton, __assign({}, props),
-        React.createElement(H3TextSkeleton, null)));
+    return React.createElement(H3Skeleton, __assign({}, props));
 }
 export function AccordionSkeletonHeaderIcon(_a) {
     var props = __rest(_a, []);

package/components/collections/breadcrumbs/component/component.js

@@ -21,6 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { Children, isValidElement } from 'react';
+import { FreeMode, Mousewheel } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { BreadcrumbsButtonSkeleton } from '../skeleton/button/component';
 import { BreadcrumbsIconSkeleton } from '../skeleton/icon/component';
@@ -28,10 +29,24 @@ import { BreadcrumbsButton } from './button/component';
 import styles from './component.module.css';
 import { BreadcrumbsIcon } from './icon/component';
 export function Breadcrumbs(_a) {
-    var _b, _c, _d, _e;
+    var _b, _c, _d, _e, _f;
     var children = _a.children, rest = __rest(_a, ["children"]);
-    return (React.createElement(Swiper, __assign({}, rest, { modules: [], freeMode: (_b = rest === null || rest === void 0 ? void 0 : rest.freeMode) !== null && _b !== void 0 ? _b : true, slidesPerView: (_c = rest === null || rest === void 0 ? void 0 : rest.slidesPerView) !== null && _c !== void 0 ? _c : 'auto', spaceBetween: (_d = rest === null || rest === void 0 ? void 0 : rest.spaceBetween) !== null && _d !== void 0 ? _d : 4, className: "mosuk-breadcrumbs ".concat(styles.breadcrumbs, " ").concat((_e = rest.className) !== null && _e !== void 0 ? _e : '') }), Children.map(children, function (child, index) {
-        if (isValidElement(child) && (child.type === BreadcrumbsIcon || child.type === BreadcrumbsButton || child.type === BreadcrumbsIconSkeleton || child.type === BreadcrumbsButtonSkeleton)) {
+    return (React.createElement(Swiper, __assign({}, rest, { modules: [FreeMode, Mousewheel], freeMode: (_b = rest === null || rest === void 0 ? void 0 : rest.freeMode) !== null && _b !== void 0 ? _b : {
+            enabled: true,
+            momentum: true,
+            momentumRatio: 0.8,
+            minimumVelocity: 0.05,
+        }, mousewheel: (_c = rest === null || rest === void 0 ? void 0 : rest.mousewheel) !== null && _c !== void 0 ? _c : {
+            enabled: true,
+            forceToAxis: true,
+            sensitivity: 1,
+            releaseOnEdges: false,
+        }, slidesPerView: (_d = rest === null || rest === void 0 ? void 0 : rest.slidesPerView) !== null && _d !== void 0 ? _d : 'auto', spaceBetween: (_e = rest === null || rest === void 0 ? void 0 : rest.spaceBetween) !== null && _e !== void 0 ? _e : 4, className: "mosuk-breadcrumbs ".concat(styles.breadcrumbs, " ").concat((_f = rest.className) !== null && _f !== void 0 ? _f : '') }), Children.map(children, function (child, index) {
+        if (isValidElement(child) &&
+            (child.type === BreadcrumbsIcon ||
+                child.type === BreadcrumbsButton ||
+                child.type === BreadcrumbsIconSkeleton ||
+                child.type === BreadcrumbsButtonSkeleton)) {
             return (React.createElement(SwiperSlide, { key: index, className: styles.slide }, child));
         }
         return child;