@ahrowe/ui 0.42.0 → 0.44.0

package/dist/cjs-types/common/card/card.types.d.ts

@@ -1,17 +1,30 @@
 import { default as React, ReactNode } from 'react';
-import { ButtonStyleType } from '../button/button.types.js';
+import { ButtonProps, ButtonStyleType } from '../button/button.types.js';
 import { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types.js';
 import { IconAction } from '../types/actions.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
+/**
+ * The card's surface. `Outlined` and `Light` mean what they do on Button, Badge and Chip; `Elevated`
+ * is a card's own. There is no `Filled`: body text on a solid colour reads badly.
+ */
 export declare enum CardStyleType {
+    /** A raised surface with a shadow, always neutral. The default. */
     Elevated = "elevated",
+    /** A border in the colour, no fill. */
     Outlined = "outlined",
-    Filled = "filled"
+    /** A flat tint of the colour, no border. */
+    Light = "light"
 }
 export type CardSlots = 'root' | 'content';
 export interface CardProps extends Omit<HtmlProps, 'tabIndex'> {
     className?: string | undefined;
     children?: ReactNode;
     styleType?: CardStyleType;
+    /**
+     * The border of an `Outlined` card and the tint of a `Light` one: a `ThemeColor` (default
+     * `Neutral`) or any CSS colour. An `Elevated` card stays neutral.
+     */
+    color?: ColorValue;
     onClick?: () => void;
     tabIndex?: number | null;
     hoverEffect?: boolean;
@@ -45,6 +58,7 @@ export interface CardAction {
     id?: string;
     label?: string;
     styleType?: ButtonStyleType;
+    color?: ButtonProps['color'];
     onClick?: () => void;
 }
 export interface CardActionsProps {

package/dist/cjs-types/common/chip/chip.types.d.ts

@@ -1,10 +1,13 @@
 import { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
+/** How much the chip stands out. Independent of its colour. */
 export declare enum ChipStyleType {
-    Default = "default",
-    Primary = "primary",
-    Info = "info",
-    Warn = "warn",
-    Error = "error"
+    /** Solid fill. */
+    Filled = "filled",
+    /** A light tint of the colour behind text in the colour. The default. */
+    Light = "light",
+    /** Border and text in the colour, no fill. */
+    Outlined = "outlined"
 }
 /** Text Chip renders of its own, for translating it. */
 export interface ChipLabels {
@@ -17,6 +20,8 @@ export interface ChipProps extends HtmlProps {
     text?: string;
     thumbnail?: React.ReactNode;
     styleType?: ChipStyleType;
+    /** A `ThemeColor` (default `Neutral`) or any CSS colour, such as `'var(--brand)'`. */
+    color?: ColorValue;
     showRemoveIcon?: boolean;
     /** Accessible name for the remove button. Default `'Remove'`. */
     onClick?: () => void;

package/dist/cjs-types/common/configProvider/configProvider.types.d.ts

@@ -26,6 +26,8 @@ import { ChipProps } from '../chip/chip.types.js';
 import { CardProps } from '../card/card.types.js';
 import { SectionHeaderProps } from '../sectionHeader/sectionHeader.types.js';
 import { SkeletonProps } from '../skeleton/skeleton.types.js';
+import { LoaderProps } from '../loader/loader.types.js';
+import { LoadingOverlayProps } from '../loadingOverlay/loadingOverlay.types.js';
 import { AccordionProps } from '../accordion/accordion.types.js';
 import { DividerProps } from '../divider/divider.types.js';
 import { AlertProps } from '../alert/alert.types.js';
@@ -105,6 +107,8 @@ export interface ComponentDefaults {
     Card?: Partial<CardProps>;
     SectionHeader?: Partial<SectionHeaderProps>;
     Skeleton?: Partial<SkeletonProps>;
+    Loader?: Partial<LoaderProps>;
+    LoadingOverlay?: Partial<LoadingOverlayProps>;
     Accordion?: Partial<AccordionProps>;
     Divider?: Partial<DividerProps>;
     Alert?: Partial<AlertProps>;

package/dist/cjs-types/common/copyButton/copyButton.types.d.ts

@@ -1,6 +1,7 @@
 import { CSSProperties, MouseEvent, Ref } from 'react';
 import { IconContent } from '../types/icon.types.js';
-import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+import { SlotClassNames, SlotStyles } from '../types/slots.types.js';
+import { ActionIconProps } from '../actionIcon/actionIcon.types.js';
 export type CopyButtonSlots = 'root' | 'icon';
 export interface CopyButtonLabels {
     /** Accessible name and tooltip before copying. Default: "Copy". */
@@ -10,7 +11,7 @@ export interface CopyButtonLabels {
     /** Announced when the copy fails. Default: "Could not copy". */
     failed?: string;
 }
-export interface CopyButtonProps extends Omit<HtmlProps<HTMLDivElement>, 'onCopy' | 'onError'> {
+export interface CopyButtonProps extends Omit<ActionIconProps, 'icon' | 'onCopy' | 'onError' | 'onClick' | 'ref' | 'classNames' | 'styles'> {
     /** Text written to the clipboard on click. */
     value: string;
     /** How long the copied state shows, in ms. Default: 2000. */
@@ -24,11 +25,11 @@ export interface CopyButtonProps extends Omit<HtmlProps<HTMLDivElement>, 'onCopy
     /** Called when the clipboard refuses the write, e.g. outside a secure context. */
     onError?: () => void;
     /** Called on every click, before the copy. */
-    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     /** Text this component renders of its own. */
     labels?: CopyButtonLabels;
     /** Ref to the root element. */
-    ref?: Ref<HTMLDivElement>;
+    ref?: Ref<HTMLButtonElement>;
     className?: string;
     style?: CSSProperties;
     classNames?: SlotClassNames<CopyButtonSlots>;

package/dist/cjs-types/common/fab/components/fabBase/fabBase.d.ts

@@ -1,3 +1,3 @@
 import { FabBaseProps } from './fabBase.types.js';
-declare function FabBase({ style, children, size, className, styleType, onClick, }: FabBaseProps): import("react").JSX.Element;
+declare function FabBase({ style, children, size, className, styleType, color, onClick, }: FabBaseProps): import("react").JSX.Element;
 export default FabBase;

package/dist/cjs-types/common/fab/components/fabBase/fabBase.types.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { ButtonStyleType } from '../../../button/button.types.js';
+import { ButtonProps, ButtonStyleType } from '../../../button/button.types.js';
 export type FabBaseSize = 'default' | 'mini';
 export interface FabBaseProps {
     children?: ReactNode;
@@ -8,5 +8,6 @@ export interface FabBaseProps {
     /** Forwarded from Fab's `button` slot. */
     style?: CSSProperties;
     styleType?: ButtonStyleType;
+    color?: ButtonProps['color'];
     onClick?: () => void;
 }

package/dist/cjs-types/common/loader/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './loader.js';
+export * from './loader.types.js';

package/dist/cjs-types/common/loader/loader.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { LoaderProps } from './loader.types.js';
+declare function Loader(props: LoaderProps): ReactElement;
+export default Loader;

package/dist/cjs-types/common/loader/loader.types.d.ts

@@ -0,0 +1,31 @@
+import { CSSProperties } from 'react';
+import { HtmlProps } from '../types/slots.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
+export declare enum LoaderType {
+    /** An arc that grows and shrinks on a faint track. The default, and the one that reads at any size. */
+    Spinner = "spinner",
+    /** A glowing head trailing a fading tail round a ring. For a hero spot: a page, a panel, an overlay. */
+    Comet = "comet",
+    /** Three dots in a wave. For a line of text or a chat reply being written. */
+    Dots = "dots",
+    /** Bars rising and falling like an equaliser. For media, uploads and data being processed. */
+    Bars = "bars",
+    /** Rings rippling out from a core. For waiting on something outside the app: a device, a connection, a search. */
+    Pulse = "pulse"
+}
+export interface LoaderLabels {
+    /** The loader's accessible name. */
+    loading?: string;
+}
+export interface LoaderProps extends HtmlProps<HTMLSpanElement> {
+    /** The animation. Defaults to `LoaderType.Spinner`. */
+    type?: LoaderType;
+    /** Width and height: any CSS length, or a number of pixels. Defaults to `'2.5em'`, so it follows the font size around it. */
+    size?: number | string;
+    /** A `ThemeColor` or any CSS colour. Defaults to `ThemeColor.Primary`; `ThemeColor.Neutral` takes the colour of the text around it. */
+    color?: ColorValue;
+    /** Text the loader produces itself. See `LoaderLabels`. */
+    labels?: LoaderLabels;
+    className?: string;
+    style?: CSSProperties;
+}

package/dist/cjs-types/common/loadingOverlay/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './loadingOverlay.js';
+export * from './loadingOverlay.types.js';

package/dist/cjs-types/common/loadingOverlay/loadingOverlay.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { LoadingOverlayProps } from './loadingOverlay.types.js';
+declare function LoadingOverlay(props: LoadingOverlayProps): ReactElement;
+export default LoadingOverlay;

package/dist/cjs-types/common/loadingOverlay/loadingOverlay.types.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties, ReactNode } from 'react';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export type LoadingOverlaySlots = 'content' | 'backdrop' | 'panel' | 'message';
+export interface LoadingOverlayProps extends HtmlProps<HTMLDivElement> {
+    /** Covers the content, blocks the pointer and marks it `aria-busy`. Defaults to `false`. */
+    isLoading?: boolean;
+    /** What the overlay covers. */
+    children?: ReactNode;
+    /** Shown in place of the default `Loader`: a `Loader` of another type, an `AnimatedLogo`, anything. */
+    loader?: ReactNode;
+    /** Text under the loader, with a highlight sweeping across it. Also the default loader's accessible name. */
+    message?: ReactNode;
+    /** Milliseconds `isLoading` has to stay true before the overlay shows, so a fast load never flashes it. Once shown, it stays at least 400ms. Defaults to `200`. */
+    delay?: number;
+    className?: string;
+    style?: CSSProperties;
+    /** Classes for the inner elements. See `LoadingOverlaySlots`. */
+    classNames?: SlotClassNames<LoadingOverlaySlots>;
+    /** Inline styles for the inner elements. See `LoadingOverlaySlots`. */
+    styles?: SlotStyles<LoadingOverlaySlots>;
+}

package/dist/cjs-types/common/progressBar/progressBar.d.ts

@@ -1,5 +1,4 @@
 import { ReactElement } from 'react';
 import { ProgressBarProps } from './progressBar.types.js';
-export declare function getContrastColor(hexColor: string): string;
 declare function ProgressBar({ className, total, progress, style, classNames, styles: slotStyles, ...rest }: ProgressBarProps): ReactElement;
 export default ProgressBar;

package/dist/cjs-types/common/progressBar/progressBar.types.d.ts

@@ -1,8 +1,10 @@
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
 export interface Progress {
     amount: number;
     label?: string;
-    color?: string;
+    /** A `ThemeColor` or any CSS colour; its label is black or white, whichever reads. Default `--primary-color`. */
+    color?: ColorValue;
     class?: string;
 }
 export type ProgressBarSlots = 'root' | 'fill' | 'label';

package/dist/cjs-types/common/splitButton/splitButton.types.d.ts

@@ -1,7 +1,7 @@
 import { PopoverAlign } from '../popover/popover.types.js';
 import { CSSProperties, ReactNode } from 'react';
 import { IconContent } from '../types/icon.types.js';
-import { ButtonStyleType, ButtonSize } from '../button/button.types.js';
+import { ButtonProps, ButtonStyleType, ButtonSize } from '../button/button.types.js';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
 export interface SplitButtonAction {
     id: string;
@@ -20,7 +20,10 @@ export interface SplitButtonProps extends HtmlProps {
     children?: ReactNode;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;
     actions: SplitButtonAction[];
+    /** Default `Filled`. */
     styleType?: ButtonStyleType;
+    /** A `ThemeColor` or any CSS colour, shared by both buttons (default `Primary`). */
+    color?: ButtonProps['color'];
     size?: ButtonSize;
     disabled?: boolean;
     isLoading?: boolean;

package/dist/cjs-types/common/styles/tone.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+import { ColorValue } from '../themeProvider/color.types.js';
+/** The class, and for a colour of the caller's own the inline style, that set the --tone properties. */
+export declare function toneProps(color: ColorValue): {
+    className: string;
+    style?: CSSProperties;
+};
+/** A colour as a CSS value, for a component that paints it itself rather than through --tone. */
+export declare function cssColor(color: ColorValue): string;
+/** Warns in development about a value that can never be a colour. A var() passes: it only resolves on screen. */
+export declare function useToneCheck(component: string, colors: (ColorValue | undefined)[]): void;

package/dist/cjs-types/common/themeProvider/color.types.d.ts

@@ -0,0 +1,20 @@
+/** The theme's named colours, shared by every component that takes a `color`. */
+export declare enum ThemeColor {
+    /** `--primary-color`. */
+    Primary = "primary",
+    /** The surrounding text colour, with `--border-color` for an outline. */
+    Neutral = "neutral",
+    /** `--success-color`. */
+    Success = "success",
+    /** `--info-color`. */
+    Info = "info",
+    /** `--warn-color`. */
+    Warn = "warn",
+    /** `--error-color`. */
+    Error = "error"
+}
+/**
+ * A `ThemeColor`, or any CSS colour such as `'var(--brand)'` or `'#7c3aed'`.
+ * `string & {}` rather than `string`, which would swallow the enum into one plain string type.
+ */
+export type ColorValue = ThemeColor | (string & {});

package/dist/cjs-types/common/themeProvider/index.d.ts

@@ -1,4 +1,6 @@
 export { default } from './themeProvider.js';
 export { defaultTheme } from './defaultTheme.js';
 export { lightTheme } from './lightTheme.js';
+export { ThemeColor } from './color.types.js';
+export type { ColorValue } from './color.types.js';
 export type { Theme, ThemeProviderProps, ThemeVariables } from './theme.types.js';

package/dist/cjs-types/common/themeProvider/theme.types.d.ts

@@ -106,15 +106,10 @@ export interface ThemeVariables {
      * the device's own safe-area inset where that is larger. Modal sets --modal-padding on its own
      * panel, so this does not reach a Modal sheet. */
     '--sheet-safe-padding'?: string;
-    /** Default-style button background. Falls back to transparent when unset. */
-    '--button-default-background'?: string;
-    /** Default-style button text colour. Falls back to --text-color when unset. */
-    '--button-default-color'?: string;
-    /** Default-style button border (full `border` shorthand, e.g. `1px solid var(--border-color)`). Falls back to a transparent 1px border when unset. */
-    '--button-default-border'?: string;
     '--card-shadow'?: string;
     '--background-card-elevated'?: string;
     '--background-card-outlined'?: string;
+    /** Surface of a Neutral Light card, named after the old Filled style. Unset, it is the text-colour tint every Light uses; defaultTheme sets --background-accent. */
     '--background-card-filled'?: string;
     /** Slider track (unfilled) colour. Falls back to --background-accent-light. */
     '--slider-track-color'?: string;
@@ -214,6 +209,8 @@ export interface ThemeVariables {
     '--calendar-now-color'?: string;
     /** Corner radius of an event. Falls back to 6px. */
     '--calendar-event-radius'?: string;
+    /** The hours outside `workingHours` in the week and day views. Falls back to --background-accent. */
+    '--calendar-off-hours-color'?: string;
     /** Page button size. Falls back to 36px. */
     '--pagination-size'?: string;
     /** Gap between page buttons. Falls back to 4px. */
@@ -235,6 +232,10 @@ export interface ThemeVariables {
     /** Width a column collapses to once it has no cards (see `collapseEmptyColumns`). Falls back to 140px. */
     '--kanban-empty-column-width'?: string;
     '--option-picker-padding'?: string;
+    /** Veil over the content while it loads. Falls back to --background at 50%. */
+    '--loading-overlay-background'?: string;
+    /** How far the content under the veil is blurred. Falls back to 4px; 0px turns the blur off. */
+    '--loading-overlay-blur'?: string;
     /** Track (unfilled) background colour. Falls back to --background-accent. */
     '--progress-bar-track-color'?: string;
     /** Canvas behind the plan. Falls back to --background. */

package/dist/cjs-types/common/timeline/timeline.types.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { IconContent } from '../types/icon.types.js';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
 /** Layout of entries relative to the connecting line. */
 export declare enum TimelineAlignment {
     /** Line and markers on the left, content to the right (the default). */
@@ -10,14 +11,6 @@ export declare enum TimelineAlignment {
     /** Line down the center, entries alternating left/right. */
     Alternate = "alternate"
 }
-/** Semantic colour for an entry's marker, matching the theme's status colours. */
-export declare enum TimelineItemStatus {
-    Default = "default",
-    Primary = "primary",
-    Success = "success",
-    Warn = "warn",
-    Error = "error"
-}
 export type TimelineSlots = 'root' | 'item' | 'marker' | 'dot' | 'connector' | 'content' | 'title' | 'description' | 'timestamp';
 export interface TimelineItem {
     /** Stable identity for the entry, used as its React key. Falls back to its array index when omitted; pass one whenever `items` can be reordered or have entries prepended (e.g. a live "newest first" audit log), so React doesn't misattribute row state across the shift. */
@@ -30,8 +23,8 @@ export interface TimelineItem {
     timestamp?: React.ReactNode;
     /** Icon shown in the marker instead of a plain dot — a FontAwesome icon or any node. */
     icon?: IconContent;
-    /** Semantic marker colour (default `Default`). */
-    status?: TimelineItemStatus;
+    /** The marker's colour: a `ThemeColor` or any CSS colour. Unset, it is `--timeline-dot-color`. */
+    color?: ColorValue;
     /** Extra content rendered under the description, e.g. a diff, an attachment, an actor avatar. */
     content?: React.ReactNode;
     /** Makes the whole entry clickable (e.g. to open the full record), rendering it as an accessible button. */

package/dist/cjs-types/common/toast/index.d.ts

@@ -1,2 +1,2 @@
 export { showToast } from './toastService.js';
-export type { ToastContextConfig, ToastLabels, ToastOptions, ToastType, ToastPosition, ToastSlots, } from './toast.types.js';
+export type { ToastContextConfig, ToastLabels, ToastOptions, ToastPosition, ToastSlots } from './toast.types.js';

package/dist/cjs-types/common/toast/toast.types.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { SlotClassNames, SlotStyles } from '../types/slots.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
 export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-export type ToastType = 'default' | 'info' | 'success' | 'error' | 'warn';
 export type ToastSlots = 'root' | 'icon' | 'content' | 'closeButton' | 'progressBar';
 /** Text Toast renders of its own, for translating it. */
 export interface ToastLabels {
@@ -25,7 +25,11 @@ export interface ToastContextConfig {
     labels?: ToastLabels;
 }
 export interface ToastOptions extends Omit<ToastContextConfig, 'allowStacking'> {
-    type?: ToastType;
+    /**
+     * A `ThemeColor` (default `Primary`) or any CSS colour. A ThemeColor also picks the icon; any
+     * other colour shows a bell.
+     */
+    color?: ColorValue;
     classNames?: SlotClassNames<ToastSlots>;
     styles?: SlotStyles<ToastSlots>;
 }
@@ -44,7 +48,7 @@ export interface ResolvedToastOptions {
     showRemainingTime: boolean;
     showCloseButton: boolean;
     pauseOnHover: boolean;
-    type: ToastType;
+    color: ColorValue;
     classNames?: SlotClassNames<ToastSlots>;
     styles?: SlotStyles<ToastSlots>;
 }

package/dist/cjs-types/common/types/actions.types.d.ts

@@ -2,6 +2,6 @@ import { IconContent } from './icon.types.js';
 /** A single icon-triggered action, rendered as an `ActionIcon` */
 export interface IconAction {
     title?: string;
-    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     icon: IconContent;
 }

package/dist/cjs-types/common/utils/dismissClick.d.ts

@@ -0,0 +1,4 @@
+/** Records that the release just dispatched closed an overlay, which marks the click it raises. */
+export declare function markDismiss(): void;
+/** Whether the click `event` ends a press that closed an overlay. */
+export declare function isDismissClick(event: Event): boolean;

package/dist/cjs-types/common/utils/isDev.d.ts

@@ -0,0 +1 @@
+export declare function isDev(): boolean;

package/dist/cjs-types/index.d.ts

@@ -76,7 +76,10 @@ export { default as KanbanBoard } from './common/kanbanBoard/index.js';
 export * from './common/kanbanBoard/index.js';
 export { default as KlipyPicker } from './common/klipyPicker/index.js';
 export * from './common/klipyPicker/index.js';
-export * from './common/loading/index.js';
+export { default as Loader } from './common/loader/index.js';
+export * from './common/loader/index.js';
+export { default as LoadingOverlay } from './common/loadingOverlay/index.js';
+export * from './common/loadingOverlay/index.js';
 export { default as Menu } from './common/menu/index.js';
 export * from './common/menu/index.js';
 export { default as Modal } from './common/modal/index.js';

package/dist/esm/common/accordion/accordion.mjs

@@ -1,2 +1,2 @@
-"use client";import{AccordionStyleType as e}from"./accordion.types.mjs";import t from"./accordion.module.mjs";import n from"./accordion.primary.module.mjs";import r from"./accordion.plain.module.mjs";import{useComponentDefaults as i}from"../configProvider/useComponentDefaults.mjs";import{isSelfActivation as a}from"../utils/activationKey.mjs";import{useEffect as o,useId as s,useRef as c,useState as l}from"react";import u from"classnames";import{FontAwesomeIcon as d}from"@fortawesome/react-fontawesome";import{faChevronDown as f}from"@fortawesome/free-solid-svg-icons";import{jsx as p,jsxs as m}from"react/jsx-runtime";var h={[e.Default]:t,[e.Primary]:n,[e.Plain]:r};function g(t){let{id:n=``,title:r=``,children:g=null,expanded:_=null,onHeaderClicked:v=()=>{},styleType:y=e.Default,startOpen:b=!1,hideHeader:x=!1,className:S,style:C,classNames:w,styles:T,...E}=i(`Accordion`,t),D=h[y],O=s(),k=`${O}-header`,A=`${O}-body`,j=c(null),M=c(null),[N,P]=l(_??b),[F,I]=l(null);o(()=>{_!==null&&P(_)},[_]),o(()=>{let e=j.current;e&&(e.inert=!N)},[N]),o(()=>{let e=M.current;if(!e)return;let t=new ResizeObserver(()=>I(e.offsetHeight));return t.observe(e),()=>t.unobserve(e)},[]);function L(){let e=!N;v(n,e),_===null&&P(e)}let R={height:N?F??`auto`:`0px`};return m(`div`,{...E,id:n||void 0,className:u(D.accordion,N&&D.accordionActive,S,w?.root),style:{...C,...T?.root},children:[!x&&m(`div`,{className:u(D.accordionHeader,N&&D.accordionHeaderActive,w?.header),style:T?.header,onClick:L,role:`button`,tabIndex:0,id:k,"aria-expanded":N,"aria-controls":A,onKeyDown:e=>{a(e)&&(e.preventDefault(),L())},children:[p(`div`,{className:u(D.accordionTitle,w?.title),style:T?.title,children:r}),p(d,{icon:f,className:u(D.accordionIcon,N&&D.accordionIconActive,w?.icon),style:T?.icon})]}),p(`div`,{ref:j,id:A,role:`region`,"aria-labelledby":x?void 0:k,className:u(D.accordionBody,N&&D.accordionBodyActive,w?.body),style:{...R,...T?.body},children:p(`div`,{className:u(D.accordionBodyInner,w?.bodyInner),style:T?.bodyInner,ref:M,children:g})})]})}export{g as default};
+"use client";import{AccordionStyleType as e}from"./accordion.types.mjs";import t from"./accordion.module.mjs";import{useComponentDefaults as n}from"../configProvider/useComponentDefaults.mjs";import{isSelfActivation as r}from"../utils/activationKey.mjs";import{ThemeColor as i}from"../themeProvider/color.types.mjs";import{toneProps as a,useToneCheck as o}from"../styles/tone.mjs";import{useEffect as s,useId as c,useRef as l,useState as u}from"react";import d from"classnames";import{FontAwesomeIcon as f}from"@fortawesome/react-fontawesome";import{faChevronDown as p}from"@fortawesome/free-solid-svg-icons";import{jsx as m,jsxs as h}from"react/jsx-runtime";var g={[e.Light]:t.accordionStyleLight,[e.Outlined]:t.accordionStyleOutlined,[e.Plain]:t.accordionStylePlain},_=new Set([`ArrowDown`,`ArrowUp`,`Home`,`End`]);function v(e){return[...e.parentElement?.children??[]].flatMap(e=>{if(!e.classList.contains(t.accordion))return[];let n=e.querySelector(`:scope > [role="button"][aria-expanded]`);return n?[n]:[]})}function y(e,t){let n=e.parentElement?v(e.parentElement):[],r=n.indexOf(e);if(r<0)return;let i=n.length-1;n[t===`Home`?0:t===`End`?i:t===`ArrowDown`?(r+1)%n.length:(r-1+n.length)%n.length].focus()}function b(v){let{id:b=``,title:x=``,children:S=null,expanded:C=null,onHeaderClicked:w=()=>{},styleType:T=e.Outlined,color:E=i.Neutral,joined:D=!1,startOpen:O=!1,hideHeader:k=!1,className:A,style:j,classNames:M,styles:N,...P}=n(`Accordion`,v),F=c(),I=`${F}-header`,L=`${F}-body`,R=l(null),z=l(null),[B,V]=u(C??O),[H,U]=u(null);s(()=>{C!==null&&V(C)},[C]),s(()=>{let e=R.current;e&&(e.inert=!B)},[B]),s(()=>{let e=z.current;if(!e)return;let t=new ResizeObserver(()=>U(e.offsetHeight));return t.observe(e),()=>t.unobserve(e)},[]);function W(){let e=!B;w(b,e),C===null&&V(e)}let G={height:B?H??`auto`:`0px`},K=a(E);return o(`Accordion`,[E]),h(`div`,{...P,id:b||void 0,className:d(t.accordion,K.className,g[T],D&&t.accordionJoined,A,M?.root),style:{...K.style,...j,...N?.root},children:[!k&&h(`div`,{className:d(t.accordionHeader,M?.header),style:N?.header,onClick:W,role:`button`,tabIndex:0,id:I,"aria-expanded":B,"aria-controls":L,onKeyDown:e=>{if(_.has(e.key)&&e.target===e.currentTarget){e.preventDefault(),y(e.currentTarget,e.key);return}r(e)&&(e.preventDefault(),W())},children:[m(`div`,{className:d(t.accordionTitle,M?.title),style:N?.title,children:x}),m(f,{icon:p,className:d(t.accordionIcon,B&&t.accordionIconActive,M?.icon),style:N?.icon})]}),m(`div`,{ref:R,id:L,role:`region`,"aria-labelledby":k?void 0:I,className:d(t.accordionBody,M?.body),style:{...G,...N?.body},children:m(`div`,{className:d(t.accordionBodyInner,M?.bodyInner),style:N?.bodyInner,ref:z,children:S})})]})}export{b as default};
 //# sourceMappingURL=accordion.mjs.map

package/dist/esm/common/accordion/accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.tsx"],"sourcesContent":["import React, { useState, useEffect, useId, useRef, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown as arrowIcon } from '@fortawesome/free-solid-svg-icons';\n\nimport { AccordionStyleType, type AccordionProps } from './accordion.types';\n\nimport defaultStyles from './accordion.module.pcss';\nimport primaryStyles from './accordion.primary.module.pcss';\nimport plainStyles from './accordion.plain.module.pcss';\nimport { useComponentDefaults } from '../configProvider';\nimport { isSelfActivation } from '../utils/activationKey';\n\nconst STYLES_BY_TYPE: Record<AccordionStyleType, typeof defaultStyles> = {\n  [AccordionStyleType.Default]: defaultStyles,\n  [AccordionStyleType.Primary]: primaryStyles,\n  [AccordionStyleType.Plain]: plainStyles,\n};\n\nfunction Accordion(props: AccordionProps): ReactElement {\n  const {\n    id = '',\n    title = '',\n    children = null,\n    expanded = null,\n    onHeaderClicked = () => {},\n    styleType = AccordionStyleType.Default,\n    startOpen = false,\n    hideHeader = false,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Accordion', props);\n  const s = STYLES_BY_TYPE[styleType];\n  // The header and the body name each other through aria-controls/aria-labelledby, so both need\n  // an id that is stable across renders and unique even with several accordions on the page.\n  const generatedId = useId();\n  const headerId = `${generatedId}-header`;\n  const bodyId = `${generatedId}-body`;\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const bodyInnerRef = useRef<HTMLDivElement>(null);\n\n  const [isExpanded, setIsExpanded] = useState(expanded ?? startOpen);\n  const [bodyHeight, setBodyHeight] = useState<number | null>(null);\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect\n    if (expanded !== null) setIsExpanded(expanded);\n  }, [expanded]);\n\n  useEffect(() => {\n    const el = bodyRef.current;\n    if (el) el.inert = !isExpanded;\n  }, [isExpanded]);\n\n  useEffect(() => {\n    const el = bodyInnerRef.current;\n    if (!el) return;\n    const observer = new ResizeObserver(() => setBodyHeight(el.offsetHeight));\n    observer.observe(el);\n    return () => observer.unobserve(el);\n  }, []);\n\n  function toggleExpanded() {\n    const next = !isExpanded;\n    onHeaderClicked(id, next);\n    if (expanded === null) setIsExpanded(next);\n  }\n\n  const bodyStyle = { height: isExpanded ? (bodyHeight ?? 'auto') : '0px' };\n\n  return (\n    <div\n      {...rest}\n      id={id || undefined}\n      className={cx(s.accordion, isExpanded && s.accordionActive, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      {!hideHeader && (\n        <div\n          className={cx(s.accordionHeader, isExpanded && s.accordionHeaderActive, classNames?.header)}\n          style={slotStyles?.header}\n          onClick={toggleExpanded}\n          role='button'\n          tabIndex={0}\n          id={headerId}\n          aria-expanded={isExpanded}\n          aria-controls={bodyId}\n          onKeyDown={(event) => {\n            if (!isSelfActivation(event)) return;\n            // Space scrolls the page otherwise, which is what a real <button> suppresses too.\n            event.preventDefault();\n            toggleExpanded();\n          }}\n        >\n          <div className={cx(s.accordionTitle, classNames?.title)} style={slotStyles?.title}>\n            {title}\n          </div>\n          <FontAwesomeIcon\n            icon={arrowIcon}\n            className={cx(s.accordionIcon, isExpanded && s.accordionIconActive, classNames?.icon)}\n            style={slotStyles?.icon as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n          />\n        </div>\n      )}\n      <div\n        ref={bodyRef}\n        id={bodyId}\n        role='region'\n        aria-labelledby={hideHeader ? undefined : headerId}\n        className={cx(s.accordionBody, isExpanded && s.accordionBodyActive, classNames?.body)}\n        style={{ ...bodyStyle, ...slotStyles?.body }}\n      >\n        <div\n          className={cx(s.accordionBodyInner, classNames?.bodyInner)}\n          style={slotStyles?.bodyInner}\n          ref={bodyInnerRef}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Accordion;\n"],"mappings":"8mBAaA,IAAM,EAAmE,EACtE,EAAmB,SAAU,GAC7B,EAAmB,SAAU,GAC7B,EAAmB,OAAQ,CAC9B,EAEA,SAAS,EAAU,EAAqC,CACtD,GAAM,CACJ,KAAK,GACL,QAAQ,GACR,WAAW,KACX,WAAW,KACX,sBAAwB,CAAC,EACzB,YAAY,EAAmB,QAC/B,YAAY,GACZ,aAAa,GACb,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,YAAa,CAAK,EACrC,EAAI,EAAe,GAGnB,EAAc,EAAM,EACpB,EAAW,GAAG,EAAY,SAC1B,EAAS,GAAG,EAAY,OACxB,EAAU,EAAuB,IAAI,EACrC,EAAe,EAAuB,IAAI,EAE1C,CAAC,EAAY,GAAiB,EAAS,GAAY,CAAS,EAC5D,CAAC,EAAY,GAAiB,EAAwB,IAAI,EAEhE,MAAgB,CAEV,IAAa,MAAM,EAAc,CAAQ,CAC/C,EAAG,CAAC,CAAQ,CAAC,EAEb,MAAgB,CACd,IAAM,EAAK,EAAQ,QACf,IAAI,EAAG,MAAQ,CAAC,EACtB,EAAG,CAAC,CAAU,CAAC,EAEf,MAAgB,CACd,IAAM,EAAK,EAAa,QACxB,GAAI,CAAC,EAAI,OACT,IAAM,EAAW,IAAI,mBAAqB,EAAc,EAAG,YAAY,CAAC,EAExE,OADA,EAAS,QAAQ,CAAE,MACN,EAAS,UAAU,CAAE,CACpC,EAAG,CAAC,CAAC,EAEL,SAAS,GAAiB,CACxB,IAAM,EAAO,CAAC,EACd,EAAgB,EAAI,CAAI,EACpB,IAAa,MAAM,EAAc,CAAI,CAC3C,CAEA,IAAM,EAAY,CAAE,OAAQ,EAAc,GAAc,OAAU,KAAM,EAExE,OACE,EAAC,MAAD,CACE,GAAI,EACJ,GAAI,GAAM,IAAA,GACV,UAAW,EAAG,EAAE,UAAW,GAAc,EAAE,gBAAiB,EAAW,GAAY,IAAI,EACvF,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAJzC,SAAA,CAMG,CAAC,GACA,EAAC,MAAD,CACE,UAAW,EAAG,EAAE,gBAAiB,GAAc,EAAE,sBAAuB,GAAY,MAAM,EAC1F,MAAO,GAAY,OACnB,QAAS,EACT,KAAK,SACL,SAAU,EACV,GAAI,EACJ,gBAAe,EACf,gBAAe,EACf,UAAY,GAAU,CACf,EAAiB,CAAK,IAE3B,EAAM,eAAe,EACrB,EAAe,EACjB,EAdF,SAAA,CAgBE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAE,eAAgB,GAAY,KAAK,EAAG,MAAO,GAAY,MACzE,SAAA,CACE,CAAA,EACL,EAAC,EAAD,CACE,KAAM,EACN,UAAW,EAAG,EAAE,cAAe,GAAc,EAAE,oBAAqB,GAAY,IAAI,EACpF,MAAO,GAAY,IACpB,CAAA,CACE,CAEP,CAAA,EAAA,EAAC,MAAD,CACE,IAAK,EACL,GAAI,EACJ,KAAK,SACL,kBAAiB,EAAa,IAAA,GAAY,EAC1C,UAAW,EAAG,EAAE,cAAe,GAAc,EAAE,oBAAqB,GAAY,IAAI,EACpF,MAAO,CAAE,GAAG,EAAW,GAAG,GAAY,IAAK,EAE3C,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAE,mBAAoB,GAAY,SAAS,EACzD,MAAO,GAAY,UACnB,IAAK,EAEJ,UACE,CAAA,CACF,CAAA,CACF,GAET"}
+{"version":3,"file":"accordion.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.tsx"],"sourcesContent":["import React, { useState, useEffect, useId, useRef, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown as arrowIcon } from '@fortawesome/free-solid-svg-icons';\n\nimport { AccordionStyleType, type AccordionProps } from './accordion.types';\n\nimport s from './accordion.module.pcss';\nimport { useComponentDefaults } from '../configProvider';\nimport { isSelfActivation } from '../utils/activationKey';\nimport { ThemeColor } from '../themeProvider/color.types';\nimport { toneProps, useToneCheck } from '../styles/tone';\n\nconst CLASS_BY_STYLE: Record<AccordionStyleType, string> = {\n  [AccordionStyleType.Light]: s.accordionStyleLight,\n  [AccordionStyleType.Outlined]: s.accordionStyleOutlined,\n  [AccordionStyleType.Plain]: s.accordionStylePlain,\n};\n\nconst NAVIGATION_KEYS = new Set(['ArrowDown', 'ArrowUp', 'Home', 'End']);\n\n/** Same parent only, so a list nested in a body is a set of its own. */\nfunction siblingHeaders(root: HTMLElement): HTMLElement[] {\n  return [...(root.parentElement?.children ?? [])].flatMap((sibling) => {\n    if (!sibling.classList.contains(s.accordion)) return [];\n    const header = sibling.querySelector<HTMLElement>(':scope > [role=\"button\"][aria-expanded]');\n    return header ? [header] : [];\n  });\n}\n\nfunction focusSiblingHeader(header: HTMLElement, key: string) {\n  const headers = header.parentElement ? siblingHeaders(header.parentElement) : [];\n  const index = headers.indexOf(header);\n  if (index < 0) return;\n  const last = headers.length - 1;\n  const next =\n    key === 'Home'\n      ? 0\n      : key === 'End'\n        ? last\n        : key === 'ArrowDown'\n          ? (index + 1) % headers.length\n          : (index - 1 + headers.length) % headers.length;\n  headers[next].focus();\n}\n\nfunction Accordion(props: AccordionProps): ReactElement {\n  const {\n    id = '',\n    title = '',\n    children = null,\n    expanded = null,\n    onHeaderClicked = () => {},\n    styleType = AccordionStyleType.Outlined,\n    color = ThemeColor.Neutral,\n    joined = false,\n    startOpen = false,\n    hideHeader = false,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Accordion', props);\n  // The header and the body name each other through aria-controls/aria-labelledby, so both need\n  // an id that is stable across renders and unique even with several accordions on the page.\n  const generatedId = useId();\n  const headerId = `${generatedId}-header`;\n  const bodyId = `${generatedId}-body`;\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const bodyInnerRef = useRef<HTMLDivElement>(null);\n\n  const [isExpanded, setIsExpanded] = useState(expanded ?? startOpen);\n  const [bodyHeight, setBodyHeight] = useState<number | null>(null);\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect\n    if (expanded !== null) setIsExpanded(expanded);\n  }, [expanded]);\n\n  useEffect(() => {\n    const el = bodyRef.current;\n    if (el) el.inert = !isExpanded;\n  }, [isExpanded]);\n\n  useEffect(() => {\n    const el = bodyInnerRef.current;\n    if (!el) return;\n    const observer = new ResizeObserver(() => setBodyHeight(el.offsetHeight));\n    observer.observe(el);\n    return () => observer.unobserve(el);\n  }, []);\n\n  function toggleExpanded() {\n    const next = !isExpanded;\n    onHeaderClicked(id, next);\n    if (expanded === null) setIsExpanded(next);\n  }\n\n  const bodyStyle = { height: isExpanded ? (bodyHeight ?? 'auto') : '0px' };\n  const tone = toneProps(color);\n  useToneCheck('Accordion', [color]);\n\n  return (\n    <div\n      {...rest}\n      id={id || undefined}\n      className={cx(\n        s.accordion,\n        tone.className,\n        CLASS_BY_STYLE[styleType],\n        joined && s.accordionJoined,\n        className,\n        classNames?.root,\n      )}\n      style={{ ...tone.style, ...style, ...slotStyles?.root }}\n    >\n      {!hideHeader && (\n        <div\n          className={cx(s.accordionHeader, classNames?.header)}\n          style={slotStyles?.header}\n          onClick={toggleExpanded}\n          role='button'\n          tabIndex={0}\n          id={headerId}\n          aria-expanded={isExpanded}\n          aria-controls={bodyId}\n          onKeyDown={(event) => {\n            if (NAVIGATION_KEYS.has(event.key) && event.target === event.currentTarget) {\n              event.preventDefault();\n              focusSiblingHeader(event.currentTarget, event.key);\n              return;\n            }\n            if (!isSelfActivation(event)) return;\n            // Space scrolls the page otherwise, which is what a real <button> suppresses too.\n            event.preventDefault();\n            toggleExpanded();\n          }}\n        >\n          <div className={cx(s.accordionTitle, classNames?.title)} style={slotStyles?.title}>\n            {title}\n          </div>\n          <FontAwesomeIcon\n            icon={arrowIcon}\n            className={cx(s.accordionIcon, isExpanded && s.accordionIconActive, classNames?.icon)}\n            style={slotStyles?.icon as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n          />\n        </div>\n      )}\n      <div\n        ref={bodyRef}\n        id={bodyId}\n        role='region'\n        aria-labelledby={hideHeader ? undefined : headerId}\n        className={cx(s.accordionBody, classNames?.body)}\n        style={{ ...bodyStyle, ...slotStyles?.body }}\n      >\n        <div\n          className={cx(s.accordionBodyInner, classNames?.bodyInner)}\n          style={slotStyles?.bodyInner}\n          ref={bodyInnerRef}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Accordion;\n"],"mappings":"mpBAaA,IAAM,EAAqD,EACxD,EAAmB,OAAQ,EAAE,qBAC7B,EAAmB,UAAW,EAAE,wBAChC,EAAmB,OAAQ,EAAE,mBAChC,EAEM,EAAkB,IAAI,IAAI,CAAC,YAAa,UAAW,OAAQ,KAAK,CAAC,EAGvE,SAAS,EAAe,EAAkC,CACxD,MAAO,CAAC,GAAI,EAAK,eAAe,UAAY,CAAC,CAAE,CAAC,CAAC,QAAS,GAAY,CACpE,GAAI,CAAC,EAAQ,UAAU,SAAS,EAAE,SAAS,EAAG,MAAO,CAAC,EACtD,IAAM,EAAS,EAAQ,cAA2B,yCAAyC,EAC3F,OAAO,EAAS,CAAC,CAAM,EAAI,CAAC,CAC9B,CAAC,CACH,CAEA,SAAS,EAAmB,EAAqB,EAAa,CAC5D,IAAM,EAAU,EAAO,cAAgB,EAAe,EAAO,aAAa,EAAI,CAAC,EACzE,EAAQ,EAAQ,QAAQ,CAAM,EACpC,GAAI,EAAQ,EAAG,OACf,IAAM,EAAO,EAAQ,OAAS,EAS9B,EAPE,IAAQ,OACJ,EACA,IAAQ,MACN,EACA,IAAQ,aACL,EAAQ,GAAK,EAAQ,QACrB,EAAQ,EAAI,EAAQ,QAAU,EAAQ,OACpC,CAAC,MAAM,CACtB,CAEA,SAAS,EAAU,EAAqC,CACtD,GAAM,CACJ,KAAK,GACL,QAAQ,GACR,WAAW,KACX,WAAW,KACX,sBAAwB,CAAC,EACzB,YAAY,EAAmB,SAC/B,QAAQ,EAAW,QACnB,SAAS,GACT,YAAY,GACZ,aAAa,GACb,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,YAAa,CAAK,EAGrC,EAAc,EAAM,EACpB,EAAW,GAAG,EAAY,SAC1B,EAAS,GAAG,EAAY,OACxB,EAAU,EAAuB,IAAI,EACrC,EAAe,EAAuB,IAAI,EAE1C,CAAC,EAAY,GAAiB,EAAS,GAAY,CAAS,EAC5D,CAAC,EAAY,GAAiB,EAAwB,IAAI,EAEhE,MAAgB,CAEV,IAAa,MAAM,EAAc,CAAQ,CAC/C,EAAG,CAAC,CAAQ,CAAC,EAEb,MAAgB,CACd,IAAM,EAAK,EAAQ,QACf,IAAI,EAAG,MAAQ,CAAC,EACtB,EAAG,CAAC,CAAU,CAAC,EAEf,MAAgB,CACd,IAAM,EAAK,EAAa,QACxB,GAAI,CAAC,EAAI,OACT,IAAM,EAAW,IAAI,mBAAqB,EAAc,EAAG,YAAY,CAAC,EAExE,OADA,EAAS,QAAQ,CAAE,MACN,EAAS,UAAU,CAAE,CACpC,EAAG,CAAC,CAAC,EAEL,SAAS,GAAiB,CACxB,IAAM,EAAO,CAAC,EACd,EAAgB,EAAI,CAAI,EACpB,IAAa,MAAM,EAAc,CAAI,CAC3C,CAEA,IAAM,EAAY,CAAE,OAAQ,EAAc,GAAc,OAAU,KAAM,EAClE,EAAO,EAAU,CAAK,EAG5B,OAFA,EAAa,YAAa,CAAC,CAAK,CAAC,EAG/B,EAAC,MAAD,CACE,GAAI,EACJ,GAAI,GAAM,IAAA,GACV,UAAW,EACT,EAAE,UACF,EAAK,UACL,EAAe,GACf,GAAU,EAAE,gBACZ,EACA,GAAY,IACd,EACA,MAAO,CAAE,GAAG,EAAK,MAAO,GAAG,EAAO,GAAG,GAAY,IAAK,EAXxD,SAAA,CAaG,CAAC,GACA,EAAC,MAAD,CACE,UAAW,EAAG,EAAE,gBAAiB,GAAY,MAAM,EACnD,MAAO,GAAY,OACnB,QAAS,EACT,KAAK,SACL,SAAU,EACV,GAAI,EACJ,gBAAe,EACf,gBAAe,EACf,UAAY,GAAU,CACpB,GAAI,EAAgB,IAAI,EAAM,GAAG,GAAK,EAAM,SAAW,EAAM,cAAe,CAC1E,EAAM,eAAe,EACrB,EAAmB,EAAM,cAAe,EAAM,GAAG,EACjD,MACF,CACK,EAAiB,CAAK,IAE3B,EAAM,eAAe,EACrB,EAAe,EACjB,EAnBF,SAAA,CAqBE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAE,eAAgB,GAAY,KAAK,EAAG,MAAO,GAAY,MACzE,SAAA,CACE,CAAA,EACL,EAAC,EAAD,CACE,KAAM,EACN,UAAW,EAAG,EAAE,cAAe,GAAc,EAAE,oBAAqB,GAAY,IAAI,EACpF,MAAO,GAAY,IACpB,CAAA,CACE,CAEP,CAAA,EAAA,EAAC,MAAD,CACE,IAAK,EACL,GAAI,EACJ,KAAK,SACL,kBAAiB,EAAa,IAAA,GAAY,EAC1C,UAAW,EAAG,EAAE,cAAe,GAAY,IAAI,EAC/C,MAAO,CAAE,GAAG,EAAW,GAAG,GAAY,IAAK,EAE3C,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAE,mBAAoB,GAAY,SAAS,EACzD,MAAO,GAAY,UACnB,IAAK,EAEJ,UACE,CAAA,CACF,CAAA,CACF,GAET"}

package/dist/esm/common/accordion/accordion.module.mjs

@@ -1,2 +1,2 @@
-"use client";var e=`accordion_YZt8B`,t=`accordion-title_CGYKY`,n=`accordion-active_mocpj`,r=`accordion-header_OEjXM`,i=`accordion-header-active_6KvnM`,a=`accordion-body_2o-mY`,o=`accordion-body-inner_JI9nJ`,s=`accordion-body-active_sb2-U`,c=`accordion-icon_kLqp-`,l=`accordion-icon-active_lJwG8`,u={accordion:e,"accordion-title":`accordion-title_CGYKY`,accordionTitle:t,"accordion-active":`accordion-active_mocpj`,accordionActive:n,"accordion-header":`accordion-header_OEjXM`,accordionHeader:r,"accordion-header-active":`accordion-header-active_6KvnM`,accordionHeaderActive:i,"accordion-body":`accordion-body_2o-mY`,accordionBody:a,"accordion-body-inner":`accordion-body-inner_JI9nJ`,accordionBodyInner:o,"accordion-body-active":`accordion-body-active_sb2-U`,accordionBodyActive:s,"accordion-icon":`accordion-icon_kLqp-`,accordionIcon:c,"accordion-icon-active":`accordion-icon-active_lJwG8`,accordionIconActive:l};export{e as accordion,n as accordionActive,a as accordionBody,s as accordionBodyActive,o as accordionBodyInner,r as accordionHeader,i as accordionHeaderActive,c as accordionIcon,l as accordionIconActive,t as accordionTitle,u as default};
+"use client";var e=`accordion_YZt8B`,t=`accordion-header_OEjXM`,n=`accordion-title_CGYKY`,r=`accordion-icon_kLqp-`,i=`accordion-icon-active_lJwG8`,a=`accordion-body_2o-mY`,o=`accordion-body-inner_JI9nJ`,s=`accordion-style-light_YY5Zn`,c=`accordion-style-outlined_XEtCe`,l=`accordion-style-plain_N2Diz`,u=`accordion-joined_hlHQx`,d={accordion:e,"accordion-header":`accordion-header_OEjXM`,accordionHeader:t,"accordion-title":`accordion-title_CGYKY`,accordionTitle:n,"accordion-icon":`accordion-icon_kLqp-`,accordionIcon:r,"accordion-icon-active":`accordion-icon-active_lJwG8`,accordionIconActive:i,"accordion-body":`accordion-body_2o-mY`,accordionBody:a,"accordion-body-inner":`accordion-body-inner_JI9nJ`,accordionBodyInner:o,"accordion-style-light":`accordion-style-light_YY5Zn`,accordionStyleLight:s,"accordion-style-outlined":`accordion-style-outlined_XEtCe`,accordionStyleOutlined:c,"accordion-style-plain":`accordion-style-plain_N2Diz`,accordionStylePlain:l,"accordion-joined":`accordion-joined_hlHQx`,accordionJoined:u};export{e as accordion,a as accordionBody,o as accordionBodyInner,t as accordionHeader,r as accordionIcon,i as accordionIconActive,u as accordionJoined,s as accordionStyleLight,c as accordionStyleOutlined,l as accordionStylePlain,n as accordionTitle,d as default};
 //# sourceMappingURL=accordion.module.mjs.map

package/dist/esm/common/accordion/accordion.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.module.pcss"],"sourcesContent":[".accordion {\n  transition: margin 0.2s;\n  margin: -1px;\n  color: var(--text-color);\n\n  &-title {\n    width: 100%;\n  }\n\n  &-active {\n    margin: 0.625em 0;\n  }\n\n  &-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    /* There is no fixed height any more: the header is this padding plus the title's line. */\n    padding: 0.75em 1em;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    background: var(--background);\n    border-radius: var(--default-border-radius);\n    border: 1px solid var(--border-color);\n\n    /* The rest of the accordion measures from the header, so the base is set here. */\n    font-size: var(--default-font-size);\n    font-weight: 400;\n    transition: all 0.2s;\n\n    &-active {\n      border: 1px solid var(--primary-color);\n      background: var(--background-accent);\n      border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n    }\n  }\n\n  &-body {\n    overflow: hidden;\n    transition: all 0.2s ease;\n    position: relative;\n    border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);\n    border: 1px solid var(--border-color);\n    border-top: none;\n    border-bottom: none;\n\n    &-inner {\n      padding: 1em;\n    }\n\n    &-active {\n      border: 1px solid var(--primary-color);\n      border-top: none;\n    }\n  }\n\n  &-icon {\n    transition: transform 0.2s;\n    transform: rotate(0deg);\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    color: var(--border-color);\n\n    &-active {\n      transform: rotate(180deg);\n    }\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .accordion,\n  .accordion-header,\n  .accordion-body,\n  .accordion-icon {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"accordion.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.module.pcss"],"sourcesContent":[".accordion {\n  color: var(--text-color);\n\n  /* Clips the header's fill and hover layer to the corners; the body clips anyway, for its height\n     transition. */\n  overflow: hidden;\n\n  /* Positioned, so a joined section paints over the one above, whose positioned header would\n     otherwise cover the seam where WebKit draws it thinner than the 1px overlap. */\n  position: relative;\n\n  &-header {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 0.75em;\n    padding: 0.75em 1em;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    /* The rest of the accordion measures from the header, so the base is set here. */\n    font-size: var(--default-font-size);\n\n    /* A layer in currentcolor, so it shows on a fill as on nothing: a Light header already uses\n       the background. */\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: currentcolor;\n      opacity: 0;\n      transition: opacity 0.15s;\n      pointer-events: none;\n    }\n\n    /* (hover: hover) because on touch a tap latches :hover until the next tap elsewhere. */\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 0.06;\n      }\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--focus-border-color, var(--primary-color));\n      outline-offset: -2px;\n    }\n  }\n\n  /* Positioned, so they paint above the hover layer, which is positioned too and comes first. */\n  &-title {\n    position: relative;\n    flex: 1;\n    min-width: 0;\n  }\n\n  &-icon {\n    position: relative;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    transition: transform 0.2s;\n\n    &-active {\n      transform: rotate(180deg);\n    }\n  }\n\n  &-body {\n    overflow: hidden;\n    position: relative;\n    transition: height 0.2s ease;\n\n    &-inner {\n      padding: 1em;\n    }\n  }\n\n  /* --accordion-seam is the line a joined section draws where it meets the one above. */\n  &-style {\n    &-light {\n      /* The page colour: the border is the tint itself, so a seam in it would merge two tinted\n         headers into one block. */\n      --accordion-seam: var(--background);\n\n      border: 1px solid var(--tone-light);\n      border-radius: var(--default-border-radius);\n    }\n\n    &-outlined {\n      --accordion-seam: var(--tone-outline);\n\n      border: 1px solid var(--tone-outline);\n      border-radius: var(--default-border-radius);\n    }\n  }\n\n  &-style-light &-header {\n    background: var(--tone-light);\n    color: var(--tone-text);\n  }\n\n  &-style-outlined &-header,\n  &-style-plain &-header {\n    color: var(--tone-text);\n  }\n\n  /* Plain sits inside other content: no padding, so no hover layer, and the focus ring goes\n     outside the text rather than over it. */\n  &-style-plain &-header {\n    padding: 0;\n\n    &::before {\n      display: none;\n    }\n\n    &:focus-visible {\n      outline-offset: 2px;\n    }\n  }\n\n  &-style-plain &-body-inner {\n    padding: 0.375em 0 0;\n  }\n\n  & + & {\n    margin-top: 0.5em;\n  }\n\n  /* Each joined section overlaps the one above by its 1px border, and that one hides (not removes)\n     its bottom border: a 1px gap or two borders snap to different device pixels at fractional zoom.\n     Ties `& + &` on specificity, so it stays after it. Firefox before 121 lacks :has(). */\n  &-joined + &-joined {\n    margin-top: -1px;\n    border-top-color: var(--accordion-seam);\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  &-style-plain&-joined + &-style-plain&-joined {\n    margin-top: 0;\n  }\n\n  &-joined:has(+ &-joined) {\n    border-bottom-color: transparent;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .accordion-body,\n  .accordion-icon {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/esm/common/accordion/accordion.types.mjs

@@ -1,2 +1,2 @@
-"use client";var e=function(e){return e.Default=`default`,e.Primary=`primary`,e.Plain=`plain`,e}({});export{e as AccordionStyleType};
+"use client";var e=function(e){return e.Light=`light`,e.Outlined=`outlined`,e.Plain=`plain`,e}({});export{e as AccordionStyleType};
 //# sourceMappingURL=accordion.types.mjs.map

package/dist/esm/common/accordion/accordion.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.types.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\nexport enum AccordionStyleType {\n  Default = 'default',\n  Primary = 'primary',\n  Plain = 'plain',\n}\n\nexport type AccordionSlots = 'root' | 'header' | 'title' | 'icon' | 'body' | 'bodyInner';\n\nexport interface AccordionProps extends HtmlProps {\n  title?: string;\n  children?: ReactNode;\n  expanded?: boolean | null;\n  onHeaderClicked?: (id: string, isExpanded: boolean) => void;\n  styleType?: AccordionStyleType;\n  startOpen?: boolean;\n  hideHeader?: boolean;\n  className?: string;\n  style?: CSSProperties;\n  classNames?: SlotClassNames<AccordionSlots>;\n  styles?: SlotStyles<AccordionSlots>;\n}\n"],"mappings":"aAGA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,QAAA,UACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
+{"version":3,"file":"accordion.types.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\nimport type { ColorValue } from '../themeProvider/color.types';\n\n/**\n * How much the header stands out, as on Button, Badge and Chip. No `Filled`: a section of content\n * should not compete with the page's main action.\n */\nexport enum AccordionStyleType {\n  /** The header in a light tint of the colour, its text in the colour. */\n  Light = 'light',\n  /** A border in the colour, the header's text in the colour. The default. */\n  Outlined = 'outlined',\n  /** The header's text in the colour, no chrome and no padding, for a disclosure inside other content. */\n  Plain = 'plain',\n}\n\nexport type AccordionSlots = 'root' | 'header' | 'title' | 'icon' | 'body' | 'bodyInner';\n\nexport interface AccordionProps extends HtmlProps {\n  title?: string;\n  children?: ReactNode;\n  expanded?: boolean | null;\n  onHeaderClicked?: (id: string, isExpanded: boolean) => void;\n  styleType?: AccordionStyleType;\n  /** A `ThemeColor` (default `Neutral`) or any CSS colour. */\n  color?: ColorValue;\n  /**\n   * Joins this accordion to the joined ones beside it into one block; otherwise neighbours keep a\n   * small gap. Default `false`.\n   */\n  joined?: boolean;\n  startOpen?: boolean;\n  hideHeader?: boolean;\n  className?: string;\n  style?: CSSProperties;\n  classNames?: SlotClassNames<AccordionSlots>;\n  styles?: SlotStyles<AccordionSlots>;\n}\n"],"mappings":"aAQA,IAAY,EAAL,SAAA,EAAA,OAEL,GAAA,MAAA,QAEA,EAAA,SAAA,WAEA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}

package/dist/esm/common/actionButtons/actionButtons.mjs

@@ -1,2 +1,2 @@
-"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import n from"./actionButtons.module.mjs";import{ButtonStyleType as r,ButtonType as i}from"../button/button.types.mjs";import a from"../button/button.mjs";import o from"classnames";import{jsx as s,jsxs as c}from"react/jsx-runtime";var l={submit:`Save`,cancel:`Cancel`};function u(u){let{onSubmit:d=()=>null,onClose:f=()=>null,labels:p,submitButtonStyle:m=r.Primary,isSubmitButtonLoading:h=!1,isSubmitButtonDisabled:g=!1,submitButtonIcon:_=void 0,cancelButtonStyle:v=r.Default,isCancelButtonLoading:y=!1,isCancelButtonDisabled:b=!1,cancelButtonIcon:x=void 0,hidePrimaryButton:S=!1,hideSecondaryButton:C=!1,noMargin:w=!1,stackButtons:T=!1,className:E,style:D,classNames:O,styles:k,...A}=e(`ActionButtons`,u),j=t(`ActionButtons`,p,l);return c(`div`,{...A,className:o(n.actionButtons,!w&&n.actionButtonsMargin,T&&n.actionButtonsStacked,E,O?.root),style:{...D,...k?.root},children:[!S&&s(a,{isLoading:h,disabled:g,styleType:m,type:i.Submit,onClick:d,className:O?.submitButton,style:k?.submitButton,icon:_,children:j.submit}),!C&&s(a,{isLoading:y,disabled:b,onClick:f,styleType:v,className:O?.cancelButton,style:k?.cancelButton,icon:x,children:j.cancel})]})}export{u as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{ThemeColor as n}from"../themeProvider/color.types.mjs";import r from"./actionButtons.module.mjs";import{ButtonStyleType as i,ButtonType as a}from"../button/button.types.mjs";import o from"../button/button.mjs";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";var u={submit:`Save`,cancel:`Cancel`};function d(d){let{onSubmit:f=()=>null,onClose:p=()=>null,labels:m,submitButtonStyle:h=i.Filled,submitButtonColor:g=n.Primary,isSubmitButtonLoading:_=!1,isSubmitButtonDisabled:v=!1,submitButtonIcon:y=void 0,cancelButtonStyle:b=i.Outlined,cancelButtonColor:x=n.Primary,isCancelButtonLoading:S=!1,isCancelButtonDisabled:C=!1,cancelButtonIcon:w=void 0,hidePrimaryButton:T=!1,hideSecondaryButton:E=!1,noMargin:D=!1,stackButtons:O=!1,className:k,style:A,classNames:j,styles:M,...N}=e(`ActionButtons`,d),P=t(`ActionButtons`,m,u);return l(`div`,{...N,className:s(r.actionButtons,!D&&r.actionButtonsMargin,O&&r.actionButtonsStacked,k,j?.root),style:{...A,...M?.root},children:[!T&&c(o,{isLoading:_,disabled:v,styleType:h,color:g,type:a.Submit,onClick:f,className:j?.submitButton,style:M?.submitButton,icon:y,children:P.submit}),!E&&c(o,{isLoading:S,disabled:C,onClick:p,styleType:b,color:x,className:j?.cancelButton,style:M?.cancelButton,icon:w,children:P.cancel})]})}export{d as default};
 //# sourceMappingURL=actionButtons.mjs.map

package/dist/esm/common/actionButtons/actionButtons.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"actionButtons.mjs","names":[],"sources":["../../../../package/common/actionButtons/actionButtons.tsx"],"sourcesContent":["import cx from 'classnames';\n\nimport styles from './actionButtons.module.pcss';\nimport Button, { ButtonStyleType, ButtonType } from '../button';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { ActionButtonsProps } from './actionButtons.types';\nimport type { ActionButtonsLabels } from './actionButtons.types';\n\nconst DEFAULT_LABELS: Required<ActionButtonsLabels> = {\n  submit: 'Save',\n  cancel: 'Cancel',\n};\n\nexport default function ActionButtons(props: ActionButtonsProps) {\n  const {\n    onSubmit = () => null,\n    onClose = () => null,\n    labels,\n    submitButtonStyle = ButtonStyleType.Primary,\n    isSubmitButtonLoading = false,\n    isSubmitButtonDisabled = false,\n    submitButtonIcon = undefined,\n    cancelButtonStyle = ButtonStyleType.Default,\n    isCancelButtonLoading = false,\n    isCancelButtonDisabled = false,\n    cancelButtonIcon = undefined,\n    hidePrimaryButton = false,\n    hideSecondaryButton = false,\n    noMargin = false,\n    stackButtons = false,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('ActionButtons', props);\n  const text = useLabels('ActionButtons', labels, DEFAULT_LABELS);\n  return (\n    <div\n      {...rest}\n      className={cx(\n        styles.actionButtons,\n        !noMargin && styles.actionButtonsMargin,\n        stackButtons && styles.actionButtonsStacked,\n        className,\n        classNames?.root,\n      )}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      {!hidePrimaryButton && (\n        <Button\n          isLoading={isSubmitButtonLoading}\n          disabled={isSubmitButtonDisabled}\n          styleType={submitButtonStyle}\n          type={ButtonType.Submit}\n          onClick={onSubmit}\n          className={classNames?.submitButton}\n          style={slotStyles?.submitButton}\n          icon={submitButtonIcon}\n        >\n          {text.submit}\n        </Button>\n      )}\n      {!hideSecondaryButton && (\n        <Button\n          isLoading={isCancelButtonLoading}\n          disabled={isCancelButtonDisabled}\n          onClick={onClose}\n          styleType={cancelButtonStyle}\n          className={classNames?.cancelButton}\n          style={slotStyles?.cancelButton}\n          icon={cancelButtonIcon}\n        >\n          {text.cancel}\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"mappings":"kYAQA,IAAM,EAAgD,CACpD,OAAQ,OACR,OAAQ,QACV,EAEA,SAAwB,EAAc,EAA2B,CAC/D,GAAM,CACJ,eAAiB,KACjB,cAAgB,KAChB,SACA,oBAAoB,EAAgB,QACpC,wBAAwB,GACxB,yBAAyB,GACzB,mBAAmB,IAAA,GACnB,oBAAoB,EAAgB,QACpC,wBAAwB,GACxB,yBAAyB,GACzB,mBAAmB,IAAA,GACnB,oBAAoB,GACpB,sBAAsB,GACtB,WAAW,GACX,eAAe,GACf,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,gBAAiB,CAAK,EACzC,EAAO,EAAU,gBAAiB,EAAQ,CAAc,EAC9D,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,cACP,CAAC,GAAY,EAAO,oBACpB,GAAgB,EAAO,qBACvB,EACA,GAAY,IACd,EACA,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EATzC,SAAA,CAWG,CAAC,GACA,EAAC,EAAD,CACE,UAAW,EACX,SAAU,EACV,UAAW,EACX,KAAM,EAAW,OACjB,QAAS,EACT,UAAW,GAAY,aACvB,MAAO,GAAY,aACnB,KAAM,EAEL,SAAA,EAAK,MACA,CAAA,EAET,CAAC,GACA,EAAC,EAAD,CACE,UAAW,EACX,SAAU,EACV,QAAS,EACT,UAAW,EACX,UAAW,GAAY,aACvB,MAAO,GAAY,aACnB,KAAM,EAEL,SAAA,EAAK,MACA,CAAA,CAEP,GAET"}
+{"version":3,"file":"actionButtons.mjs","names":[],"sources":["../../../../package/common/actionButtons/actionButtons.tsx"],"sourcesContent":["import cx from 'classnames';\n\nimport styles from './actionButtons.module.pcss';\nimport Button, { ButtonStyleType, ButtonType } from '../button';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { ActionButtonsProps } from './actionButtons.types';\nimport type { ActionButtonsLabels } from './actionButtons.types';\nimport { ThemeColor } from '../themeProvider/color.types';\n\nconst DEFAULT_LABELS: Required<ActionButtonsLabels> = {\n  submit: 'Save',\n  cancel: 'Cancel',\n};\n\nexport default function ActionButtons(props: ActionButtonsProps) {\n  const {\n    onSubmit = () => null,\n    onClose = () => null,\n    labels,\n    submitButtonStyle = ButtonStyleType.Filled,\n    submitButtonColor = ThemeColor.Primary,\n    isSubmitButtonLoading = false,\n    isSubmitButtonDisabled = false,\n    submitButtonIcon = undefined,\n    cancelButtonStyle = ButtonStyleType.Outlined,\n    cancelButtonColor = ThemeColor.Primary,\n    isCancelButtonLoading = false,\n    isCancelButtonDisabled = false,\n    cancelButtonIcon = undefined,\n    hidePrimaryButton = false,\n    hideSecondaryButton = false,\n    noMargin = false,\n    stackButtons = false,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('ActionButtons', props);\n  const text = useLabels('ActionButtons', labels, DEFAULT_LABELS);\n  return (\n    <div\n      {...rest}\n      className={cx(\n        styles.actionButtons,\n        !noMargin && styles.actionButtonsMargin,\n        stackButtons && styles.actionButtonsStacked,\n        className,\n        classNames?.root,\n      )}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      {!hidePrimaryButton && (\n        <Button\n          isLoading={isSubmitButtonLoading}\n          disabled={isSubmitButtonDisabled}\n          styleType={submitButtonStyle}\n          color={submitButtonColor}\n          type={ButtonType.Submit}\n          onClick={onSubmit}\n          className={classNames?.submitButton}\n          style={slotStyles?.submitButton}\n          icon={submitButtonIcon}\n        >\n          {text.submit}\n        </Button>\n      )}\n      {!hideSecondaryButton && (\n        <Button\n          isLoading={isCancelButtonLoading}\n          disabled={isCancelButtonDisabled}\n          onClick={onClose}\n          styleType={cancelButtonStyle}\n          color={cancelButtonColor}\n          className={classNames?.cancelButton}\n          style={slotStyles?.cancelButton}\n          icon={cancelButtonIcon}\n        >\n          {text.cancel}\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"mappings":"gcASA,IAAM,EAAgD,CACpD,OAAQ,OACR,OAAQ,QACV,EAEA,SAAwB,EAAc,EAA2B,CAC/D,GAAM,CACJ,eAAiB,KACjB,cAAgB,KAChB,SACA,oBAAoB,EAAgB,OACpC,oBAAoB,EAAW,QAC/B,wBAAwB,GACxB,yBAAyB,GACzB,mBAAmB,IAAA,GACnB,oBAAoB,EAAgB,SACpC,oBAAoB,EAAW,QAC/B,wBAAwB,GACxB,yBAAyB,GACzB,mBAAmB,IAAA,GACnB,oBAAoB,GACpB,sBAAsB,GACtB,WAAW,GACX,eAAe,GACf,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,gBAAiB,CAAK,EACzC,EAAO,EAAU,gBAAiB,EAAQ,CAAc,EAC9D,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,cACP,CAAC,GAAY,EAAO,oBACpB,GAAgB,EAAO,qBACvB,EACA,GAAY,IACd,EACA,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EATzC,SAAA,CAWG,CAAC,GACA,EAAC,EAAD,CACE,UAAW,EACX,SAAU,EACV,UAAW,EACX,MAAO,EACP,KAAM,EAAW,OACjB,QAAS,EACT,UAAW,GAAY,aACvB,MAAO,GAAY,aACnB,KAAM,EAEL,SAAA,EAAK,MACA,CAAA,EAET,CAAC,GACA,EAAC,EAAD,CACE,UAAW,EACX,SAAU,EACV,QAAS,EACT,UAAW,EACX,MAAO,EACP,UAAW,GAAY,aACvB,MAAO,GAAY,aACnB,KAAM,EAEL,SAAA,EAAK,MACA,CAAA,CAEP,GAET"}

package/dist/esm/common/actionIcon/actionIcon.mjs

@@ -1,2 +1,2 @@
-"use client";import{renderIcon as e}from"../utils/renderIcon.mjs";import t from"../interactableDiv/index.mjs";import n from"./actionIcon.module.mjs";import"react";import r from"classnames";import{jsx as i}from"react/jsx-runtime";function a({icon:a,className:o=``,style:s,title:c=``,onClick:l=()=>{},classNames:u,styles:d,...f}){return i(t,{...f,className:r(n.actionIcon,o,u?.root),style:{...s,...d?.root},title:c,onClick:l,children:e(a,{className:u?.icon,style:d?.icon})})}export{a as default};
+"use client";import{ThemeColor as e}from"../themeProvider/color.types.mjs";import{ButtonSize as t,ButtonStyleType as n}from"../button/button.types.mjs";import{renderIcon as r}from"../utils/renderIcon.mjs";import i from"../button/button.mjs";import a from"./actionIcon.module.mjs";import o from"classnames";import{jsx as s}from"react/jsx-runtime";function c({icon:c,styleType:l=n.Plain,color:u=e.Neutral,className:d,style:f,classNames:p,styles:m,...h}){return s(i,{...h,styleType:l,color:u,size:t.Icon,className:o(a.actionIcon,d,p?.root),style:{...f,...m?.root},classNames:{label:a.actionIconLabel},children:r(c,{className:p?.icon,style:m?.icon})})}export{c as default};
 //# sourceMappingURL=actionIcon.mjs.map