@unisane/ui 0.1.0-next.b67ebfd0

package/dist/components/fab-menu.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { cn } from '../lib/utils.js';
+import { Fab } from './fab.js';
+import { Icon } from './icon.js';
+import { useControllableState } from '../lib/use-controllable-state.js';
+import { useOverlayBehavior } from '../lib/use-overlay-behavior.js';
+export const FabMenu = ({ mainIcon = _jsx(Icon, { symbol: "add" }), activeIcon = _jsx(Icon, { symbol: "close" }), actions, className, open, defaultOpen = false, onOpenChange, 'aria-label': ariaLabel = 'Actions menu', }) => {
+    const [openState, setOpenState] = useControllableState({
+        value: open,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const isOpen = openState ?? false;
+    const containerRef = useRef(null);
+    const contentRef = useRef(null);
+    const triggerRef = useRef(null);
+    useOverlayBehavior({
+        open: isOpen,
+        contentRef,
+        rootRef: containerRef,
+        triggerRef,
+        onDismiss: () => setOpenState(false),
+        modal: false,
+        dismissOnEscape: true,
+        dismissOnInteractOutside: true,
+        initialFocus: true,
+        restoreFocus: true,
+    });
+    const handleMenuKeyDown = (event) => {
+        if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key))
+            return;
+        const items = Array.from(event.currentTarget.querySelectorAll('[role="menuitem"]')).filter((item) => !item.disabled);
+        if (items.length === 0)
+            return;
+        event.preventDefault();
+        const currentIndex = items.indexOf(document.activeElement);
+        const nextIndex = event.key === 'Home'
+            ? 0
+            : event.key === 'End'
+                ? items.length - 1
+                : event.key === 'ArrowUp'
+                    ? (currentIndex - 1 + items.length) % items.length
+                    : (currentIndex + 1) % items.length;
+        items[nextIndex]?.focus();
+    };
+    return (_jsxs("div", { ref: containerRef, className: cn('relative z-50 flex flex-col items-end gap-4', className), children: [_jsx("div", { ref: contentRef, className: cn('duration-medium ease-emphasized flex flex-col items-end gap-3 transition-all', isOpen
+                    ? 'visible translate-y-0 opacity-100'
+                    : 'pointer-events-none invisible translate-y-10 opacity-0'), role: "menu", "aria-label": ariaLabel, "aria-hidden": !isOpen, onKeyDown: handleMenuKeyDown, children: actions.map((action, index) => (_jsxs("div", { className: "group flex items-center gap-3", role: "none", children: [_jsx("span", { className: "bg-inverse-surface text-inverse-on-surface text-label-small shadow-1 rounded-sm px-2 py-1 font-medium whitespace-nowrap opacity-0 transition-opacity group-hover:opacity-100", "aria-hidden": "true", children: action.label }), _jsx(Fab, { size: "sm", variant: "secondary", icon: action.icon, onClick: (e) => {
+                                e.stopPropagation();
+                                action.onClick();
+                                setOpenState(false);
+                            }, "aria-label": action.label, role: "menuitem", tabIndex: isOpen ? 0 : -1 })] }, index))) }), _jsx(Fab, { ref: triggerRef, variant: isOpen ? 'tertiary' : 'primary', size: "md", className: cn('duration-emphasized transition-transform', isOpen ? 'rotate-90' : 'rotate-0'), onClick: () => setOpenState(!isOpen), icon: isOpen ? activeIcon : mainIcon, "aria-label": isOpen ? 'Close menu' : ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "menu" })] }));
+};
+//# sourceMappingURL=fab-menu.js.map

package/dist/components/fab-menu.js.map

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

package/dist/components/fab.d.ts

@@ -0,0 +1,25 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const fabVariants: (props?: ({
+    variant?: "primary" | "secondary" | "tertiary" | "surface" | null | undefined;
+    elevation?: "flat" | "raised" | null | undefined;
+    size?: "sm" | "md" | "lg" | "extended" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type FabProps = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof fabVariants> & {
+    icon?: ReactNode;
+    label?: string;
+    loading?: boolean;
+    asChild?: boolean;
+};
+export declare const Fab: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
+    variant?: "primary" | "secondary" | "tertiary" | "surface" | null | undefined;
+    elevation?: "flat" | "raised" | null | undefined;
+    size?: "sm" | "md" | "lg" | "extended" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    icon?: ReactNode;
+    label?: string;
+    loading?: boolean;
+    asChild?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=fab.d.ts.map

package/dist/components/fab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab.d.ts","sourceRoot":"","sources":["../../src/components/fab.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,oBAAoB,EAEzB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAalE,QAAA,MAAM,WAAW;;;;8EAiDhB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAC5D,YAAY,CAAC,OAAO,WAAW,CAAC,GAAG;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,eAAO,MAAM,GAAG;;;;;WANL,SAAS;YACR,MAAM;cACJ,OAAO;cACP,OAAO;qDAuGpB,CAAC"}

package/dist/components/fab.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, forwardRef, isValidElement, } from 'react';
+import { cva } from 'class-variance-authority';
+import { cn, Slot } from '../lib/utils.js';
+import { fabSizeClasses } from '../lib/action-size.js';
+import { Ripple } from './ripple.js';
+import { ActionSpinner, ActionStateLayer, actionInteractiveClass, getActionAsChildAttributes, getActionDisabledState, getActionStateAttributes, } from '../lib/action-control.js';
+const fabVariants = cva(`relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-fab transition-all duration-medium ease-emphasized z-30 ${actionInteractiveClass}`, {
+    variants: {
+        variant: {
+            primary: 'bg-primary-container text-on-primary-container',
+            surface: 'bg-surface text-primary border border-outline-soft',
+            secondary: 'bg-secondary-container text-on-secondary-container',
+            tertiary: 'bg-tertiary-container text-on-tertiary-container',
+        },
+        elevation: {
+            raised: '',
+            flat: 'shadow-none hover:shadow-none [box-shadow:none] hover:[box-shadow:none]',
+        },
+        size: {
+            sm: fabSizeClasses.sm,
+            md: fabSizeClasses.md,
+            lg: fabSizeClasses.lg,
+            extended: fabSizeClasses.extended,
+        },
+    },
+    compoundVariants: [
+        {
+            variant: 'surface',
+            elevation: 'raised',
+            className: 'shadow-1 hover:shadow-2',
+        },
+        {
+            variant: 'primary',
+            elevation: 'raised',
+            className: 'shadow-3 hover:shadow-4',
+        },
+        {
+            variant: 'secondary',
+            elevation: 'raised',
+            className: 'shadow-3 hover:shadow-4',
+        },
+        {
+            variant: 'tertiary',
+            elevation: 'raised',
+            className: 'shadow-3 hover:shadow-4',
+        },
+    ],
+    defaultVariants: {
+        variant: 'primary',
+        elevation: 'raised',
+        size: 'md',
+    },
+});
+export const Fab = forwardRef(({ variant, elevation, size, className, icon, label, loading = false, asChild = false, children, disabled = false, type = 'button', ...props }, ref) => {
+    const isDisabled = getActionDisabledState(disabled, loading);
+    const canRenderAsChild = asChild && isValidElement(children);
+    const finalSize = label && (size === 'md' || size === undefined) ? 'extended' : (size ?? 'md');
+    const iconSizeClasses = {
+        sm: 'size-icon-sm',
+        md: 'size-icon-md',
+        lg: 'size-icon-lg',
+        extended: 'size-icon-md',
+    };
+    const renderContent = (labelContent, extraContent) => (_jsxs(_Fragment, { children: [_jsx(ActionStateLayer, { className: "duration-medium ease-emphasized" }), _jsx(Ripple, { disabled: isDisabled }), _jsx("div", { className: "pointer-events-none relative z-10 flex items-center justify-center gap-3", children: loading ? (_jsx(ActionSpinner, { className: iconSizeClasses[finalSize] })) : (_jsxs(_Fragment, { children: [icon ? (_jsx("span", { className: cn('flex items-center justify-center transition-transform', iconSizeClasses[finalSize]), children: icon })) : null, labelContent ? (_jsx("span", { className: "text-label-large leading-none font-medium", children: labelContent })) : null, extraContent] })) })] }));
+    if (canRenderAsChild) {
+        const childElement = children;
+        const childProps = childElement.props;
+        const forwardedChildProps = getActionAsChildAttributes(isDisabled, loading, props, childProps);
+        return (_jsx(Slot, { ref: ref, className: cn(fabVariants({ variant, elevation, size: finalSize }), className), children: cloneElement(childElement, forwardedChildProps, renderContent(label ?? childProps.children, label ? childProps.children : null)) }));
+    }
+    return (_jsx("button", { ref: ref, type: type, className: cn(fabVariants({ variant, elevation, size: finalSize }), className), disabled: isDisabled, ...getActionStateAttributes(isDisabled, loading), ...props, children: renderContent(label, children) }));
+});
+Fab.displayName = 'Fab';
+//# sourceMappingURL=fab.js.map

package/dist/components/fab.js.map

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

package/dist/components/field.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Label } from '../primitives/label.js';
+export interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
+    invalid?: boolean;
+}
+export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;
+export type FieldLabelProps = React.ComponentPropsWithoutRef<typeof Label>;
+export declare const FieldLabel: React.ForwardRefExoticComponent<Omit<React.LabelHTMLAttributes<HTMLLabelElement> & {
+    required?: boolean;
+} & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+export type FieldDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+export declare const FieldDescription: React.ForwardRefExoticComponent<FieldDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export type FieldErrorProps = React.HTMLAttributes<HTMLParagraphElement>;
+export declare const FieldError: React.ForwardRefExoticComponent<FieldErrorProps & React.RefAttributes<HTMLParagraphElement>>;
+//# sourceMappingURL=field.d.ts.map

package/dist/components/field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/components/field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAG5C,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,KAAK,mFASjB,CAAC;AAGF,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,KAAK,CAAC,CAAC;AAE3E,eAAO,MAAM,UAAU;;0FAItB,CAAC;AAGF,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;AAE/E,eAAO,MAAM,gBAAgB,oGAI5B,CAAC;AAGF,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;AAEzE,eAAO,MAAM,UAAU,8FAItB,CAAC"}

package/dist/components/field.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Label } from '../primitives/label.js';
+import { cn } from '../lib/utils.js';
+export const Field = React.forwardRef(({ className, invalid = false, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('relative inline-flex w-full flex-col', className), "data-invalid": invalid || undefined, ...props })));
+Field.displayName = 'Field';
+export const FieldLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(Label, { ref: ref, className: cn('text-on-surface', className), ...props })));
+FieldLabel.displayName = 'FieldLabel';
+export const FieldDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("p", { ref: ref, className: cn('text-label-small text-on-surface-variant', className), ...props })));
+FieldDescription.displayName = 'FieldDescription';
+export const FieldError = React.forwardRef(({ className, role = 'alert', ...props }, ref) => (_jsx("p", { ref: ref, role: role, className: cn('text-label-small text-error', className), ...props })));
+FieldError.displayName = 'FieldError';
+//# sourceMappingURL=field.js.map

package/dist/components/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../../src/components/field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAMlC,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CACnC,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACjD,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,sCAAsC,EAAE,SAAS,CAAC,kBAClD,OAAO,IAAI,SAAS,KAC9B,KAAK,GACT,CACH,CACF,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAI5B,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,KAAC,KAAK,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAC5E,CACF,CAAC;AACF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAItC,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAC9C,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,YAAG,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CACjG,CACF,CAAC;AACF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAIlD,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,CAAC,EAAE,SAAS,EAAE,IAAI,GAAG,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAChD,YAAG,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAChG,CACF,CAAC;AACF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/components/icon-button.d.ts

@@ -0,0 +1,27 @@
+import { type ButtonHTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type IconProps } from './icon.js';
+declare const iconButtonVariants: (props?: ({
+    variant?: "standard" | "filled" | "tonal" | "outlined" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    selected?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type IconButtonBaseProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'children'> & VariantProps<typeof iconButtonVariants> & {
+    'aria-label': string;
+    loading?: boolean;
+    iconSize?: NonNullable<IconProps['size']>;
+};
+type NativeIconButtonProps = IconButtonBaseProps & {
+    asChild?: false;
+    icon: ReactNode;
+    children?: never;
+};
+type SlottedIconButtonProps = IconButtonBaseProps & {
+    asChild: true;
+    children: ReactElement;
+    icon?: ReactNode;
+};
+export type IconButtonProps = NativeIconButtonProps | SlottedIconButtonProps;
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=icon-button.d.ts.map

package/dist/components/icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../src/components/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,oBAAoB,EAEzB,KAAK,YAAY,EACjB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AA4B9C,QAAA,MAAM,kBAAkB;;;;8EAuCvB,CAAC;AAEF,KAAK,mBAAmB,GAAG,IAAI,CAC7B,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,YAAY,GAAG,UAAU,CAC1B,GACC,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACxC,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC;CAC3C,CAAC;AAEJ,KAAK,qBAAqB,GAAG,mBAAmB,GAAG;IACjD,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC;AAEF,KAAK,sBAAsB,GAAG,mBAAmB,GAAG;IAClD,OAAO,EAAE,IAAI,CAAC;IACd,QAAQ,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG,sBAAsB,CAAC;AAE7E,eAAO,MAAM,UAAU,+GAmGtB,CAAC"}

package/dist/components/icon-button.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, forwardRef, isValidElement, } from 'react';
+import { cva } from 'class-variance-authority';
+import { Ripple } from './ripple.js';
+import { cn, Slot } from '../lib/utils.js';
+import { getIconFrameSizeClass, iconButtonSizeClasses } from '../lib/action-size.js';
+import { Icon } from './icon.js';
+import { ActionSpinner, ActionStateLayer, actionInteractiveClass, getActionAsChildAttributes, getActionDisabledState, getActionStateAttributes, } from '../lib/action-control.js';
+function isIconElement(node) {
+    return isValidElement(node) && node.type === Icon;
+}
+function normalizeIconNode(node, size) {
+    if (!isIconElement(node) || node.props.size !== undefined) {
+        return node;
+    }
+    return cloneElement(node, { size });
+}
+function shouldOpticallyAlignIcon(node) {
+    return (isIconElement(node) &&
+        (node.props.symbol !== undefined || typeof node.props.children === 'string'));
+}
+const iconButtonVariants = cva(`relative inline-flex items-center justify-center rounded-icon-button transition-all duration-snappy ease-emphasized ${actionInteractiveClass}`, {
+    variants: {
+        variant: {
+            filled: 'bg-primary text-on-primary',
+            tonal: 'bg-secondary-container text-on-secondary-container',
+            outlined: 'bg-transparent border border-outline-subtle text-on-surface-variant',
+            standard: 'bg-transparent text-on-surface-variant',
+        },
+        size: {
+            sm: iconButtonSizeClasses.sm,
+            md: iconButtonSizeClasses.md,
+            lg: iconButtonSizeClasses.lg,
+        },
+        selected: {
+            true: '',
+            false: '',
+        },
+    },
+    compoundVariants: [
+        {
+            variant: 'tonal',
+            selected: true,
+            className: 'bg-secondary-container text-on-secondary-container',
+        },
+        {
+            variant: 'outlined',
+            selected: true,
+            className: 'bg-state-selected border-primary text-primary',
+        },
+        { variant: 'standard', selected: true, className: 'text-primary' },
+    ],
+    defaultVariants: {
+        variant: 'standard',
+        size: 'md',
+        selected: false,
+    },
+});
+export const IconButton = forwardRef(({ icon, children, variant = 'standard', size = 'md', selected, disabled = false, loading = false, iconSize, asChild = false, 'aria-label': ariaLabel, className = '', type = 'button', ...props }, ref) => {
+    const isSelected = selected ?? false;
+    const isDisabled = getActionDisabledState(disabled, loading);
+    const canRenderAsChild = asChild && isValidElement(children);
+    const resolvedIconSize = iconSize ?? (size === 'sm' ? 'sm' : 'md');
+    const resolvedContent = normalizeIconNode(icon, resolvedIconSize);
+    const renderContent = (content) => {
+        const sizeClass = getIconFrameSizeClass(resolvedIconSize);
+        const normalizedContent = normalizeIconNode(content, resolvedIconSize);
+        const iconOpticalClass = shouldOpticallyAlignIcon(normalizedContent) ? '-translate-y-px' : '';
+        return (_jsxs(_Fragment, { children: [_jsx(ActionStateLayer, { className: "z-0" }), _jsx(Ripple, { center: true, disabled: isDisabled }), loading ? (_jsx(ActionSpinner, { className: cn('relative z-10', sizeClass) })) : (_jsx("span", { className: cn('relative z-10 flex items-center justify-center', sizeClass, iconOpticalClass), children: normalizedContent }))] }));
+    };
+    if (canRenderAsChild) {
+        const childElement = children;
+        const childProps = childElement.props;
+        const forwardedChildProps = getActionAsChildAttributes(isDisabled, loading, props, childProps);
+        return (_jsx(Slot, { ref: ref, className: cn(iconButtonVariants({ variant, size, selected: isSelected }), className), "aria-label": ariaLabel, "aria-pressed": selected === undefined ? undefined : isSelected, children: cloneElement(childElement, forwardedChildProps, renderContent(childProps.children ?? icon)) }));
+    }
+    return (_jsx("button", { ref: ref, type: type, className: cn(iconButtonVariants({ variant, size, selected: isSelected }), className), disabled: isDisabled, "aria-label": ariaLabel, "aria-pressed": selected === undefined ? undefined : isSelected, ...getActionStateAttributes(isDisabled, loading), ...props, children: renderContent(resolvedContent) }));
+});
+IconButton.displayName = 'IconButton';
+//# sourceMappingURL=icon-button.js.map

package/dist/components/icon-button.js.map

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

package/dist/components/icon.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface IconProps extends React.HTMLAttributes<HTMLElement> {
+    size?: number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    filled?: boolean;
+    symbol?: string;
+    viewBox?: string;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: string | number;
+    strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';
+    strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit';
+}
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLElement>>;
+export declare const CheckIcon: (props: Omit<IconProps, "symbol">) => React.JSX.Element;
+export declare const ChevronRightIcon: (props: Omit<IconProps, "symbol">) => React.JSX.Element;
+export declare const CloseIcon: (props: Omit<IconProps, "symbol">) => React.JSX.Element;
+export declare const MenuIcon: (props: Omit<IconProps, "symbol">) => React.JSX.Element;
+//# sourceMappingURL=icon.d.ts.map

package/dist/components/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/components/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAClE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;IACxD,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;CAC1D;AAED,eAAO,MAAM,IAAI,+EA6FhB,CAAC;AAIF,eAAO,MAAM,SAAS,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,sBAAuC,CAAC;AAClG,eAAO,MAAM,gBAAgB,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,sBAEhE,CAAC;AACF,eAAO,MAAM,SAAS,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,sBAAuC,CAAC;AAClG,eAAO,MAAM,QAAQ,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,sBAAsC,CAAC"}

package/dist/components/icon.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../lib/utils.js';
+export const Icon = forwardRef(({ size = 'md', filled = false, symbol, className, children, style, viewBox = '0 0 24 24', ...props }, ref) => {
+    const isScale = typeof size === 'string' && ['xs', 'sm', 'md', 'lg', 'xl'].includes(size);
+    const hasExplicitAccessibility = props['aria-hidden'] !== undefined ||
+        props['aria-label'] !== undefined ||
+        props.role !== undefined;
+    const accessibilityProps = hasExplicitAccessibility ? {} : { 'aria-hidden': 'true' };
+    const isSymbol = symbol ||
+        (typeof children === 'string' && children.trim().length > 0 && !children.includes('<'));
+    const iconSize = isScale ? size : undefined;
+    const sizeClasses = iconSize
+        ? {
+            xs: 'size-icon-xs text-[var(--icon-xs)]',
+            sm: 'size-icon-sm text-[var(--icon-sm)]',
+            md: 'size-icon-md text-[var(--icon-md)]',
+            lg: 'size-icon-lg text-[var(--icon-lg)]',
+            xl: 'size-icon-xl text-[var(--icon-xl)]',
+        }[iconSize]
+        : '';
+    const opticalSize = iconSize
+        ? {
+            xs: 20,
+            sm: 20,
+            md: 24,
+            lg: 32,
+            xl: 48,
+        }[iconSize]
+        : 24;
+    const resolvedFontSize = isScale ? `var(--icon-${iconSize})` : size;
+    if (isSymbol) {
+        const iconName = symbol || children;
+        return (_jsx("span", { ref: ref, className: cn('material-symbols-outlined inline-flex shrink-0 items-center justify-center align-middle leading-none select-none', isScale && sizeClasses, className), style: {
+                fontSize: resolvedFontSize,
+                lineHeight: 1,
+                width: !isScale ? size : undefined,
+                height: !isScale ? size : undefined,
+                fontVariationSettings: `'FILL' ${filled ? 1 : 0}, 'wght' 400, 'GRAD' 0, 'opsz' ${opticalSize}`,
+                ...style,
+            }, ...accessibilityProps, ...props, children: iconName }));
+    }
+    return (_jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", width: !isScale ? size : undefined, height: !isScale ? size : undefined, viewBox: viewBox, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn('inline-block shrink-0', isScale && sizeClasses, className), style: style, ...accessibilityProps, ...props, children: children }));
+});
+Icon.displayName = 'Icon';
+export const CheckIcon = (props) => _jsx(Icon, { symbol: "check", ...props });
+export const ChevronRightIcon = (props) => (_jsx(Icon, { symbol: "chevron_right", ...props }));
+export const CloseIcon = (props) => _jsx(Icon, { symbol: "close", ...props });
+export const MenuIcon = (props) => _jsx(Icon, { symbol: "menu", ...props });
+//# sourceMappingURL=icon.js.map

package/dist/components/icon.js.map

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

package/dist/components/list.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { type DividerProps } from './divider.js';
+export type ListProps = React.HTMLAttributes<HTMLUListElement>;
+export declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLUListElement>>;
+export interface ListSubheaderProps extends React.HTMLAttributes<HTMLLIElement> {
+    children: React.ReactNode;
+}
+export declare const ListSubheader: React.ForwardRefExoticComponent<ListSubheaderProps & React.RefAttributes<HTMLLIElement>>;
+export type ListDividerProps = DividerProps;
+export declare const ListDivider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;
+type ListItemCommonProps = {
+    headline: React.ReactNode;
+    supportingText?: React.ReactNode;
+    leading?: React.ReactNode;
+    trailingText?: React.ReactNode;
+    trailing?: React.ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+export type ListItemStaticProps = ListItemCommonProps & Omit<React.HTMLAttributes<HTMLLIElement>, keyof ListItemCommonProps | 'children' | 'onClick'> & {
+    href?: never;
+    onClick?: never;
+    renderLink?: never;
+};
+export type ListItemButtonProps = ListItemCommonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof ListItemCommonProps | 'children' | 'href'> & {
+    href?: never;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    renderLink?: never;
+};
+export type ListItemRenderLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+    children: React.ReactNode;
+};
+export type ListItemRenderLink = (props: ListItemRenderLinkProps) => React.ReactElement;
+export type ListItemLinkProps = ListItemCommonProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof ListItemCommonProps | 'children' | 'href'> & {
+    href: string;
+    renderLink?: ListItemRenderLink;
+};
+export type ListItemProps = ListItemStaticProps | ListItemButtonProps | ListItemLinkProps;
+export declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLLIElement>>;
+export {};
+//# sourceMappingURL=list.d.ts.map

package/dist/components/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/components/list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAIvD,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAE/D,eAAO,MAAM,IAAI,oFAYhB,CAAC;AAIF,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IAC7E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,0FAWzB,CAAC;AAIF,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC;AAE5C,eAAO,MAAM,WAAW,qFAItB,CAAC;AA6BH,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,GACnD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,MAAM,mBAAmB,GAAG,UAAU,GAAG,SAAS,CAAC,GAAG;IAC9F,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,GACnD,IAAI,CACF,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,MAAM,mBAAmB,GAAG,UAAU,GAAG,MAAM,CAChD,GAAG;IACF,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IACpF,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,YAAY,CAAC;AAExF,MAAM,MAAM,iBAAiB,GAAG,mBAAmB,GACjD,IAAI,CACF,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,MAAM,mBAAmB,GAAG,UAAU,GAAG,MAAM,CAChD,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,kBAAkB,CAAC;CACjC,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AAkE1F,eAAO,MAAM,QAAQ,qFA8HnB,CAAC"}

package/dist/components/list.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cva } from 'class-variance-authority';
+import { cn, focusRing } from '../lib/utils.js';
+import { Divider } from './divider.js';
+import { Typography } from './typography.js';
+import { Ripple } from './ripple.js';
+export const List = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("ul", { ref: ref, className: cn('bg-surface m-0 flex list-none flex-col py-2', className), ...props, children: children }));
+});
+List.displayName = 'List';
+export const ListSubheader = forwardRef(({ children, className, role = 'presentation', ...props }, ref) => (_jsx("li", { ref: ref, role: role, className: cn('text-label-medium text-on-surface-variant px-4 py-2 font-medium', className), ...props, children: children })));
+ListSubheader.displayName = 'ListSubheader';
+export const ListDivider = forwardRef((props, ref) => (_jsx("li", { role: "presentation", children: _jsx(Divider, { ref: ref, ...props }) })));
+ListDivider.displayName = 'ListDivider';
+const listItemVariants = cva('relative flex min-h-10 w-full items-center gap-3 overflow-hidden px-4 py-2 text-left transition-colors duration-snappy ease-emphasized select-none', {
+    variants: {
+        interactive: {
+            true: cn('cursor-pointer hover:bg-state-hover', focusRing),
+            false: '',
+        },
+        selected: {
+            true: 'bg-state-selected text-on-surface',
+            false: 'text-on-surface',
+        },
+        disabled: {
+            true: 'pointer-events-none opacity-38 grayscale',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        interactive: false,
+        selected: false,
+        disabled: false,
+    },
+});
+function hasContent(value) {
+    return value !== null && value !== undefined && value !== false;
+}
+function ListItemBody({ headline, supportingText, leading, trailingText, trailing, interactive, disabled, }) {
+    return (_jsxs(_Fragment, { children: [interactive ? _jsx(Ripple, { disabled: disabled }) : null, hasContent(leading) ? (_jsx("span", { className: "size-icon-sm relative z-10 flex shrink-0 items-center justify-center text-inherit", children: leading })) : null, _jsxs("span", { className: "relative z-10 flex min-w-0 flex-1 flex-col justify-center", children: [_jsx(Typography, { component: "span", variant: "bodyLarge", className: "truncate leading-none font-medium text-inherit", children: headline }), hasContent(supportingText) ? (_jsx(Typography, { component: "span", variant: "labelSmall", className: "text-on-surface-variant mt-1.5 truncate leading-none opacity-60", children: supportingText })) : null] }), hasContent(trailingText) || hasContent(trailing) ? (_jsxs("span", { className: "text-on-surface-variant relative z-10 flex shrink-0 items-center gap-2", children: [hasContent(trailingText) ? (_jsx(Typography, { component: "span", variant: "labelSmall", className: "font-medium tabular-nums", children: trailingText })) : null, hasContent(trailing) ? (_jsx("span", { className: "size-icon-sm flex items-center justify-center", children: trailing })) : null] })) : null] }));
+}
+/* eslint-disable @typescript-eslint/no-unused-vars -- Component-only props must be omitted before forwarding intrinsic element props. */
+export const ListItem = forwardRef((props, ref) => {
+    const { headline, supportingText, leading, trailingText, trailing, selected = false, disabled = false, className, } = props;
+    if ('href' in props && typeof props.href === 'string') {
+        const { href, renderLink, onClick, headline: _headline, supportingText: _supportingText, leading: _leading, trailingText: _trailingText, trailing: _trailing, selected: _selected, disabled: _disabled, className: _className, tabIndex, ...anchorProps } = props;
+        const linkProps = {
+            ...anchorProps,
+            href,
+            tabIndex: disabled ? -1 : tabIndex,
+            'aria-disabled': disabled || undefined,
+            onClick: (event) => {
+                if (disabled) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return;
+                }
+                onClick?.(event);
+            },
+            className: cn(listItemVariants({ interactive: true, selected, disabled }), className),
+            children: (_jsx(ListItemBody, { headline: headline, supportingText: supportingText, leading: leading, trailingText: trailingText, trailing: trailing, interactive: true, disabled: disabled })),
+        };
+        return _jsx("li", { ref: ref, children: renderLink ? renderLink(linkProps) : _jsx("a", { ...linkProps }) });
+    }
+    if ('onClick' in props && typeof props.onClick === 'function') {
+        const { onClick, type = 'button', headline: _headline, supportingText: _supportingText, leading: _leading, trailingText: _trailingText, trailing: _trailing, selected: _selected, disabled: _disabled, className: _className, ...buttonProps } = props;
+        return (_jsx("li", { ref: ref, children: _jsx("button", { type: type, disabled: disabled, onClick: onClick, className: cn(listItemVariants({ interactive: true, selected, disabled }), className), ...buttonProps, children: _jsx(ListItemBody, { headline: headline, supportingText: supportingText, leading: leading, trailingText: trailingText, trailing: trailing, interactive: true, disabled: disabled }) }) }));
+    }
+    const { headline: _headline, supportingText: _supportingText, leading: _leading, trailingText: _trailingText, trailing: _trailing, selected: _selected, disabled: _disabled, className: _className, ...itemProps } = props;
+    return (_jsx("li", { ...itemProps, ref: ref, "aria-disabled": disabled || undefined, className: cn(listItemVariants({ interactive: false, selected, disabled }), className), children: _jsx(ListItemBody, { headline: headline, supportingText: supportingText, leading: leading, trailingText: trailingText, trailing: trailing, interactive: false, disabled: disabled }) }));
+});
+ListItem.displayName = 'ListItem';
+//# sourceMappingURL=list.js.map

package/dist/components/list.js.map

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

package/dist/components/mode-switcher.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type FieldSize } from '../lib/field-size.js';
+export interface ModeSwitcherProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'aria-label' | 'aria-labelledby' | 'defaultValue' | 'onChange' | 'onSelect' | 'role'> {
+    size?: FieldSize;
+    showLabels?: boolean;
+    showIcons?: boolean;
+}
+export declare const ModeSwitcher: React.ForwardRefExoticComponent<ModeSwitcherProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=mode-switcher.d.ts.map

package/dist/components/mode-switcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-switcher.d.ts","sourceRoot":"","sources":["../../src/components/mode-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAInD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,YAAY,GAAG,iBAAiB,GAAG,cAAc,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CACrF;IACC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAQD,eAAO,MAAM,YAAY,0FAsBxB,CAAC"}

package/dist/components/mode-switcher.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useMode } from '../layout/appearance-provider.js';
+import { Icon } from './icon.js';
+import { SegmentedButton } from './segmented-button.js';
+const modes = [
+    { value: 'light', label: 'Light', icon: 'light_mode' },
+    { value: 'dark', label: 'Dark', icon: 'dark_mode' },
+    { value: 'system', label: 'System', icon: 'contrast' },
+];
+export const ModeSwitcher = React.forwardRef(({ className, size = 'md', showLabels = true, showIcons = true, ...props }, ref) => {
+    const { mode, setMode } = useMode();
+    const options = modes.map((item) => ({
+        value: item.value,
+        label: showLabels ? item.label : _jsx("span", { className: "sr-only", children: item.label }),
+        icon: showIcons ? _jsx(Icon, { symbol: item.icon }) : undefined,
+    }));
+    return (_jsx(SegmentedButton, { ...props, ref: ref, "aria-label": "Appearance mode", options: options, value: mode, onValueChange: setMode, size: size, className: className }));
+});
+ModeSwitcher.displayName = 'ModeSwitcher';
+//# sourceMappingURL=mode-switcher.js.map