@ahrowe/ui 0.42.0 → 0.43.0

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/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/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. */

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/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

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

@@ -1 +1 @@
-{"version":3,"file":"actionIcon.mjs","names":[],"sources":["../../../../package/common/actionIcon/actionIcon.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\nimport type { ReactElement } from 'react';\n\nimport InteractableDiv from '../interactableDiv';\nimport type { ActionIconProps } from './actionIcon.types';\nimport styles from './actionIcon.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\n\nfunction ActionIcon({\n  icon,\n  className = '',\n  style,\n  title = '',\n  onClick = () => {},\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: ActionIconProps): ReactElement {\n  return (\n    <InteractableDiv\n      {...rest}\n      className={cx(styles.actionIcon, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n      title={title}\n      onClick={onClick}\n    >\n      {renderIcon(icon, { className: classNames?.icon, style: slotStyles?.icon })}\n    </InteractableDiv>\n  );\n}\n\nexport default ActionIcon;\n"],"mappings":"qOASA,SAAS,EAAW,CAClB,OACA,YAAY,GACZ,QACA,QAAQ,GACR,cAAgB,CAAC,EACjB,aACA,OAAQ,EACR,GAAG,GAC6B,CAChC,OACE,EAAC,EAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,WAAY,EAAW,GAAY,IAAI,EAC5D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAChC,QACE,UAER,SAAA,EAAW,EAAM,CAAE,UAAW,GAAY,KAAM,MAAO,GAAY,IAAK,CAAC,CAC3D,CAAA,CAErB"}
+{"version":3,"file":"actionIcon.mjs","names":[],"sources":["../../../../package/common/actionIcon/actionIcon.tsx"],"sourcesContent":["import cx from 'classnames';\nimport type { ReactElement } from 'react';\n\nimport Button from '../button';\nimport { ButtonSize, ButtonStyleType } from '../button/button.types';\nimport { ThemeColor } from '../themeProvider/color.types';\nimport type { ActionIconProps } from './actionIcon.types';\nimport styles from './actionIcon.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\n\nfunction ActionIcon({\n  icon,\n  styleType = ButtonStyleType.Plain,\n  color = ThemeColor.Neutral,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: ActionIconProps): ReactElement {\n  return (\n    <Button\n      {...rest}\n      styleType={styleType}\n      color={color}\n      size={ButtonSize.Icon}\n      className={cx(styles.actionIcon, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n      classNames={{ label: styles.actionIconLabel }}\n    >\n      {renderIcon(icon, { className: classNames?.icon, style: slotStyles?.icon })}\n    </Button>\n  );\n}\n\nexport default ActionIcon;\n"],"mappings":"0VAUA,SAAS,EAAW,CAClB,OACA,YAAY,EAAgB,MAC5B,QAAQ,EAAW,QACnB,YACA,QACA,aACA,OAAQ,EACR,GAAG,GAC6B,CAChC,OACE,EAAC,EAAD,CACE,GAAI,EACO,YACJ,QACP,KAAM,EAAW,KACjB,UAAW,EAAG,EAAO,WAAY,EAAW,GAAY,IAAI,EAC5D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EACvC,WAAY,CAAE,MAAO,EAAO,eAAgB,EAE3C,SAAA,EAAW,EAAM,CAAE,UAAW,GAAY,KAAM,MAAO,GAAY,IAAK,CAAC,CACpE,CAAA,CAEZ"}

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

@@ -1,2 +1,2 @@
-"use client";var e=`actionIcon_ganSq`,t={actionIcon:e};export{e as actionIcon,t as default};
+"use client";var e=`actionIcon_ganSq`,t=`actionIcon-label_fR4BE`,n={actionIcon:e,"actionIcon-label":`actionIcon-label_fR4BE`,actionIconLabel:t};export{e as actionIcon,t as actionIconLabel,n as default};
 //# sourceMappingURL=actionIcon.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"actionIcon.module.mjs","names":[],"sources":["../../../../package/common/actionIcon/actionIcon.module.pcss"],"sourcesContent":[".actionIcon {\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  padding: 4px;\n  width: fit-content;\n\n  &:hover {\n    filter: brightness(0.8);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"actionIcon.module.mjs","names":[],"sources":["../../../../package/common/actionIcon/actionIcon.module.pcss"],"sourcesContent":["/* Sized by its icon, where an Icon-size Button leaves the box to the caller. */\n.actionIcon {\n  width: calc(1em + 8px);\n  height: calc(1em + 8px);\n\n  /* A flex box, so the icon centres in it rather than riding on a text baseline. */\n  &-label {\n    display: flex;\n  }\n}\n"],"mappings":""}

package/dist/esm/common/alert/alert.mjs

@@ -1,2 +1,2 @@
-"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{renderIcon as n}from"../utils/renderIcon.mjs";import r from"../actionIcon/actionIcon.mjs";import{AlertStyleType as i}from"./alert.types.mjs";import a from"./alert.module.mjs";import o from"classnames";import{faBell as s,faCircleCheck as c,faCircleInfo as l,faCircleXmark as u,faTriangleExclamation as d,faXmark as f}from"@fortawesome/free-solid-svg-icons";import{jsx as p,jsxs as m}from"react/jsx-runtime";var h={[i.Default]:s,[i.Info]:l,[i.Success]:c,[i.Warn]:d,[i.Error]:u},g={[i.Default]:a.alertStyleDefault,[i.Info]:a.alertStyleInfo,[i.Success]:a.alertStyleSuccess,[i.Warn]:a.alertStyleWarn,[i.Error]:a.alertStyleError},_={dismiss:`Dismiss`};function v(s){let{title:c,children:l=null,styleType:u=i.Default,icon:d,hideIcon:v=!1,onClose:y,className:b,style:x,classNames:S,styles:C,labels:w,...T}=e(`Alert`,s),E=t(`Alert`,w,_);return m(`div`,{...T,role:`alert`,className:o(a.alert,g[u],S?.root,b),style:{...x,...C?.root},children:[!v&&n(d??h[u],{className:o(a.alertIcon,S?.icon),style:C?.icon}),m(`div`,{className:o(a.alertContent,S?.content),style:C?.content,children:[c&&p(`div`,{className:o(a.alertTitle,S?.title),style:C?.title,children:c}),l&&p(`div`,{className:o(a.alertDescription,S?.description),style:C?.description,children:l})]}),y&&p(r,{icon:f,onClick:y,className:o(a.alertCloseButton,S?.closeButton),style:C?.closeButton,"aria-label":E.dismiss})]})}export{v 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{toneProps as r,useToneCheck as i}from"../styles/tone.mjs";import{renderIcon as a}from"../utils/renderIcon.mjs";import o from"../actionIcon/actionIcon.mjs";import s from"./alert.module.mjs";import c from"classnames";import{faBell as l,faCircleCheck as u,faCircleInfo as d,faCircleXmark as f,faTriangleExclamation as p,faXmark as m}from"@fortawesome/free-solid-svg-icons";import{jsx as h,jsxs as g}from"react/jsx-runtime";var _=new Map([[n.Info,d],[n.Success,u],[n.Warn,p],[n.Error,f]]),v={dismiss:`Dismiss`};function y(u){let{title:d,children:f=null,color:p=n.Primary,icon:y,hideIcon:b=!1,onClose:x,className:S,style:C,classNames:w,styles:T,labels:E,...D}=e(`Alert`,u),O=t(`Alert`,E,v),k=r(p);return i(`Alert`,[p]),g(`div`,{...D,role:`alert`,className:c(s.alert,k.className,w?.root,S),style:{...k.style,...C,...T?.root},children:[!b&&a(y??_.get(p)??l,{className:c(s.alertIcon,w?.icon),style:T?.icon}),g(`div`,{className:c(s.alertContent,w?.content),style:T?.content,children:[d&&h(`div`,{className:c(s.alertTitle,w?.title),style:T?.title,children:d}),f&&h(`div`,{className:c(s.alertDescription,w?.description),style:T?.description,children:f})]}),x&&h(o,{icon:m,color:`var(--text-dark)`,onClick:x,className:c(s.alertCloseButton,w?.closeButton),style:T?.closeButton,"aria-label":O.dismiss})]})}export{y as default};
 //# sourceMappingURL=alert.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"alert.mjs","names":[],"sources":["../../../../package/common/alert/alert.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport cx from 'classnames';\nimport {\n  faCircleInfo,\n  faCircleCheck,\n  faCircleXmark,\n  faTriangleExclamation,\n  faBell,\n  faXmark,\n} from '@fortawesome/free-solid-svg-icons';\n\nimport { AlertStyleType } from './alert.types';\nimport type { AlertLabels, AlertProps } from './alert.types';\nimport styles from './alert.module.pcss';\nimport ActionIcon from '../actionIcon';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { renderIcon } from '../utils/renderIcon';\n\nconst ICON_BY_STYLE: Record<AlertStyleType, typeof faBell> = {\n  [AlertStyleType.Default]: faBell,\n  [AlertStyleType.Info]: faCircleInfo,\n  [AlertStyleType.Success]: faCircleCheck,\n  [AlertStyleType.Warn]: faTriangleExclamation,\n  [AlertStyleType.Error]: faCircleXmark,\n};\n\nconst CLASS_BY_STYLE: Record<AlertStyleType, string> = {\n  [AlertStyleType.Default]: styles.alertStyleDefault,\n  [AlertStyleType.Info]: styles.alertStyleInfo,\n  [AlertStyleType.Success]: styles.alertStyleSuccess,\n  [AlertStyleType.Warn]: styles.alertStyleWarn,\n  [AlertStyleType.Error]: styles.alertStyleError,\n};\n\nconst DEFAULT_LABELS: Required<AlertLabels> = {\n  dismiss: 'Dismiss',\n};\n\nfunction Alert(props: AlertProps): ReactElement {\n  const {\n    title,\n    children = null,\n    styleType = AlertStyleType.Default,\n    icon,\n    hideIcon = false,\n    onClose,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    labels,\n    ...rest\n  } = useComponentDefaults('Alert', props);\n  const text = useLabels('Alert', labels, DEFAULT_LABELS);\n\n  return (\n    <div\n      {...rest}\n      role='alert'\n      className={cx(styles.alert, CLASS_BY_STYLE[styleType], classNames?.root, className)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      {!hideIcon &&\n        renderIcon(icon ?? ICON_BY_STYLE[styleType], {\n          className: cx(styles.alertIcon, classNames?.icon),\n          style: slotStyles?.icon,\n        })}\n\n      <div className={cx(styles.alertContent, classNames?.content)} style={slotStyles?.content}>\n        {title && (\n          <div className={cx(styles.alertTitle, classNames?.title)} style={slotStyles?.title}>\n            {title}\n          </div>\n        )}\n        {children && (\n          <div className={cx(styles.alertDescription, classNames?.description)} style={slotStyles?.description}>\n            {children}\n          </div>\n        )}\n      </div>\n\n      {onClose && (\n        <ActionIcon\n          icon={faXmark}\n          onClick={onClose}\n          className={cx(styles.alertCloseButton, classNames?.closeButton)}\n          style={slotStyles?.closeButton}\n          aria-label={text.dismiss}\n        />\n      )}\n    </div>\n  );\n}\n\nexport default Alert;\n"],"mappings":"wjBAkBA,IAAM,EAAuD,EAC1D,EAAe,SAAU,GACzB,EAAe,MAAO,GACtB,EAAe,SAAU,GACzB,EAAe,MAAO,GACtB,EAAe,OAAQ,CAC1B,EAEM,EAAiD,EACpD,EAAe,SAAU,EAAO,mBAChC,EAAe,MAAO,EAAO,gBAC7B,EAAe,SAAU,EAAO,mBAChC,EAAe,MAAO,EAAO,gBAC7B,EAAe,OAAQ,EAAO,eACjC,EAEM,EAAwC,CAC5C,QAAS,SACX,EAEA,SAAS,EAAM,EAAiC,CAC9C,GAAM,CACJ,QACA,WAAW,KACX,YAAY,EAAe,QAC3B,OACA,WAAW,GACX,UACA,YACA,QACA,aACA,OAAQ,EACR,SACA,GAAG,GACD,EAAqB,QAAS,CAAK,EACjC,EAAO,EAAU,QAAS,EAAQ,CAAc,EAEtD,OACE,EAAC,MAAD,CACE,GAAI,EACJ,KAAK,QACL,UAAW,EAAG,EAAO,MAAO,EAAe,GAAY,GAAY,KAAM,CAAS,EAClF,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAJzC,SAAA,CAMG,CAAC,GACA,EAAW,GAAQ,EAAc,GAAY,CAC3C,UAAW,EAAG,EAAO,UAAW,GAAY,IAAI,EAChD,MAAO,GAAY,IACrB,CAAC,EAEH,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,aAAc,GAAY,OAAO,EAAG,MAAO,GAAY,QAAjF,SAAA,CACG,GACC,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,WAAY,GAAY,KAAK,EAAG,MAAO,GAAY,MAC1E,SAAA,CACE,CAAA,EAEN,GACC,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,iBAAkB,GAAY,WAAW,EAAG,MAAO,GAAY,YACtF,UACE,CAAA,CAEJ,IAEJ,GACC,EAAC,EAAD,CACE,KAAM,EACN,QAAS,EACT,UAAW,EAAG,EAAO,iBAAkB,GAAY,WAAW,EAC9D,MAAO,GAAY,YACnB,aAAY,EAAK,OAClB,CAAA,CAEA,GAET"}
+{"version":3,"file":"alert.mjs","names":[],"sources":["../../../../package/common/alert/alert.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport cx from 'classnames';\nimport {\n  faCircleInfo,\n  faCircleCheck,\n  faCircleXmark,\n  faTriangleExclamation,\n  faBell,\n  faXmark,\n} from '@fortawesome/free-solid-svg-icons';\n\nimport type { AlertLabels, AlertProps } from './alert.types';\nimport styles from './alert.module.pcss';\nimport ActionIcon from '../actionIcon';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { renderIcon } from '../utils/renderIcon';\nimport { ThemeColor } from '../themeProvider/color.types';\nimport { toneProps, useToneCheck } from '../styles/tone';\n\n// A Map, so a CSS colour can never hit an Object.prototype key.\nconst ICON_BY_COLOR = new Map<string, typeof faBell>([\n  [ThemeColor.Info, faCircleInfo],\n  [ThemeColor.Success, faCircleCheck],\n  [ThemeColor.Warn, faTriangleExclamation],\n  [ThemeColor.Error, faCircleXmark],\n]);\n\nconst DEFAULT_LABELS: Required<AlertLabels> = {\n  dismiss: 'Dismiss',\n};\n\nfunction Alert(props: AlertProps): ReactElement {\n  const {\n    title,\n    children = null,\n    color = ThemeColor.Primary,\n    icon,\n    hideIcon = false,\n    onClose,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    labels,\n    ...rest\n  } = useComponentDefaults('Alert', props);\n  const text = useLabels('Alert', labels, DEFAULT_LABELS);\n  const tone = toneProps(color);\n  useToneCheck('Alert', [color]);\n\n  return (\n    <div\n      {...rest}\n      role='alert'\n      className={cx(styles.alert, tone.className, classNames?.root, className)}\n      style={{ ...tone.style, ...style, ...slotStyles?.root }}\n    >\n      {!hideIcon &&\n        renderIcon(icon ?? ICON_BY_COLOR.get(color) ?? faBell, {\n          className: cx(styles.alertIcon, classNames?.icon),\n          style: slotStyles?.icon,\n        })}\n\n      <div className={cx(styles.alertContent, classNames?.content)} style={slotStyles?.content}>\n        {title && (\n          <div className={cx(styles.alertTitle, classNames?.title)} style={slotStyles?.title}>\n            {title}\n          </div>\n        )}\n        {children && (\n          <div className={cx(styles.alertDescription, classNames?.description)} style={slotStyles?.description}>\n            {children}\n          </div>\n        )}\n      </div>\n\n      {onClose && (\n        <ActionIcon\n          icon={faXmark}\n          color='var(--text-dark)'\n          onClick={onClose}\n          className={cx(styles.alertCloseButton, classNames?.closeButton)}\n          style={slotStyles?.closeButton}\n          aria-label={text.dismiss}\n        />\n      )}\n    </div>\n  );\n}\n\nexport default Alert;\n"],"mappings":"ooBAoBA,IAAM,EAAgB,IAAI,IAA2B,CACnD,CAAC,EAAW,KAAM,CAAY,EAC9B,CAAC,EAAW,QAAS,CAAa,EAClC,CAAC,EAAW,KAAM,CAAqB,EACvC,CAAC,EAAW,MAAO,CAAa,CAClC,CAAC,EAEK,EAAwC,CAC5C,QAAS,SACX,EAEA,SAAS,EAAM,EAAiC,CAC9C,GAAM,CACJ,QACA,WAAW,KACX,QAAQ,EAAW,QACnB,OACA,WAAW,GACX,UACA,YACA,QACA,aACA,OAAQ,EACR,SACA,GAAG,GACD,EAAqB,QAAS,CAAK,EACjC,EAAO,EAAU,QAAS,EAAQ,CAAc,EAChD,EAAO,EAAU,CAAK,EAG5B,OAFA,EAAa,QAAS,CAAC,CAAK,CAAC,EAG3B,EAAC,MAAD,CACE,GAAI,EACJ,KAAK,QACL,UAAW,EAAG,EAAO,MAAO,EAAK,UAAW,GAAY,KAAM,CAAS,EACvE,MAAO,CAAE,GAAG,EAAK,MAAO,GAAG,EAAO,GAAG,GAAY,IAAK,EAJxD,SAAA,CAMG,CAAC,GACA,EAAW,GAAQ,EAAc,IAAI,CAAK,GAAK,EAAQ,CACrD,UAAW,EAAG,EAAO,UAAW,GAAY,IAAI,EAChD,MAAO,GAAY,IACrB,CAAC,EAEH,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,aAAc,GAAY,OAAO,EAAG,MAAO,GAAY,QAAjF,SAAA,CACG,GACC,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,WAAY,GAAY,KAAK,EAAG,MAAO,GAAY,MAC1E,SAAA,CACE,CAAA,EAEN,GACC,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,iBAAkB,GAAY,WAAW,EAAG,MAAO,GAAY,YACtF,UACE,CAAA,CAEJ,IAEJ,GACC,EAAC,EAAD,CACE,KAAM,EACN,MAAM,mBACN,QAAS,EACT,UAAW,EAAG,EAAO,iBAAkB,GAAY,WAAW,EAC9D,MAAO,GAAY,YACnB,aAAY,EAAK,OAClB,CAAA,CAEA,GAET"}

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

@@ -1,2 +1,2 @@
-"use client";var e=`alert_nX-Fv`,t=`alert-icon_mzjuj`,n=`alert-content_-94Ey`,r=`alert-title_TqdRL`,i=`alert-description_N5LkS`,a=`alert-closeButton_RQvYS`,o=`alert-style-default_KFyzb`,s=`alert-style-info_P-XG-`,c=`alert-style-success_zomWm`,l=`alert-style-warn_jRYe5`,u=`alert-style-error_Nk4As`,d={alert:e,"alert-icon":`alert-icon_mzjuj`,alertIcon:t,"alert-content":`alert-content_-94Ey`,alertContent:n,"alert-title":`alert-title_TqdRL`,alertTitle:r,"alert-description":`alert-description_N5LkS`,alertDescription:i,"alert-closeButton":`alert-closeButton_RQvYS`,alertCloseButton:a,"alert-style-default":`alert-style-default_KFyzb`,alertStyleDefault:o,"alert-style-info":`alert-style-info_P-XG-`,alertStyleInfo:s,"alert-style-success":`alert-style-success_zomWm`,alertStyleSuccess:c,"alert-style-warn":`alert-style-warn_jRYe5`,alertStyleWarn:l,"alert-style-error":`alert-style-error_Nk4As`,alertStyleError:u};export{e as alert,a as alertCloseButton,n as alertContent,i as alertDescription,t as alertIcon,o as alertStyleDefault,u as alertStyleError,s as alertStyleInfo,c as alertStyleSuccess,l as alertStyleWarn,r as alertTitle,d as default};
+"use client";var e=`alert_nX-Fv`,t=`alert-icon_mzjuj`,n=`alert-content_-94Ey`,r=`alert-title_TqdRL`,i=`alert-description_N5LkS`,a=`alert-closeButton_RQvYS`,o={alert:e,"alert-icon":`alert-icon_mzjuj`,alertIcon:t,"alert-content":`alert-content_-94Ey`,alertContent:n,"alert-title":`alert-title_TqdRL`,alertTitle:r,"alert-description":`alert-description_N5LkS`,alertDescription:i,"alert-closeButton":`alert-closeButton_RQvYS`,alertCloseButton:a};export{e as alert,a as alertCloseButton,n as alertContent,i as alertDescription,t as alertIcon,r as alertTitle,o as default};
 //# sourceMappingURL=alert.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"alert.module.mjs","names":[],"sources":["../../../../package/common/alert/alert.module.pcss"],"sourcesContent":[".alert {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.625em;\n  padding: 0.75em 0.875em;\n  border-radius: var(--default-border-radius);\n  background: var(--background-accent);\n  color: var(--text-color);\n  font-family: var(--default-font);\n  box-sizing: border-box;\n\n  &-icon {\n    flex-shrink: 0;\n    margin-top: 0.1333em; /* 2px against this element's own 0.9375em */\n    font-size: 0.9375em;\n  }\n\n  &-content {\n    flex: 1;\n    font-size: 0.875em;\n    line-height: 1.4;\n  }\n\n  &-title {\n    font-weight: var(--header-font-weight, 600);\n\n    &:not(:only-child) {\n      margin-bottom: 0.143em;\n    }\n  }\n\n  &-description {\n    color: var(--text-dark);\n  }\n\n  &-closeButton {\n    flex-shrink: 0;\n    background: none;\n    border: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    padding: 0;\n    color: var(--text-dark);\n    font-size: 0.8125em;\n    opacity: 0.6;\n    transition: opacity 0.15s;\n    margin-top: 0.1538em; /* 2px against this element's own 0.8125em */\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n\n  &-style {\n    &-default {\n      border-left: 0.1875em solid var(--primary-color);\n\n      /* Paints the gradient exactly over border-left, which a background layer only reaches\n         because its origin is the border box. The border stays as the no-gradient fallback. */\n      background-image: var(--primary-gradient, none);\n      background-repeat: no-repeat;\n      background-size: 0.1875em 100%;\n      background-origin: border-box;\n\n      .alert-icon {\n        color: var(--primary-color);\n      }\n    }\n\n    &-info {\n      border-left: 0.1875em solid var(--info-color, #3b82f6);\n\n      .alert-icon {\n        color: var(--info-color, #3b82f6);\n      }\n    }\n\n    &-success {\n      border-left: 0.1875em solid var(--success-color);\n\n      .alert-icon {\n        color: var(--success-color);\n      }\n    }\n\n    &-warn {\n      border-left: 0.1875em solid var(--warn-color);\n\n      .alert-icon {\n        color: var(--warn-color);\n      }\n    }\n\n    &-error {\n      border-left: 0.1875em solid var(--error-color, #ef4444);\n\n      .alert-icon {\n        color: var(--error-color, #ef4444);\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"alert.module.mjs","names":[],"sources":["../../../../package/common/alert/alert.module.pcss"],"sourcesContent":[".alert {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.625em;\n  padding: 0.75em 0.875em;\n  border-radius: var(--default-border-radius);\n  border-left: 0.1875em solid var(--tone);\n  background: var(--background-accent);\n\n  /* Must follow the shorthand above, which resets it. The gradient reaches over border-left only\n     because its origin is the border box; the border is the fallback. */\n  background-image: var(--tone-gradient);\n  background-repeat: no-repeat;\n  background-size: 0.1875em 100%;\n  background-origin: border-box;\n  color: var(--text-color);\n  font-family: var(--default-font);\n  box-sizing: border-box;\n\n  &-icon {\n    flex-shrink: 0;\n    color: var(--tone);\n    margin-top: 0.1333em; /* 2px against this element's own 0.9375em */\n    font-size: 0.9375em;\n  }\n\n  &-content {\n    flex: 1;\n    font-size: 0.875em;\n    line-height: 1.4;\n  }\n\n  &-title {\n    font-weight: var(--header-font-weight, 600);\n\n    &:not(:only-child) {\n      margin-bottom: 0.143em;\n    }\n  }\n\n  &-description {\n    color: var(--text-dark);\n  }\n\n  /* Two classes, to outrank Button's font-size and ActionIcon's box whichever stylesheet loads\n     first. */\n  & &-closeButton {\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    font-size: 0.8125em;\n    opacity: 0.6;\n    transition: opacity 0.15s;\n    margin-top: 0.1538em; /* 2px against this element's own 0.8125em */\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n"],"mappings":""}

package/dist/esm/common/animatedLogo/animatedLogo.mjs

@@ -1,2 +1,2 @@
-"use client";import e from"./animatedLogo.module.mjs";import{useEffect as t,useRef as n,useState as r}from"react";import i from"classnames";import{jsx as a}from"react/jsx-runtime";var o=`M 1.292 0.278 C -0.41 4.855 3.185 6.433 0.344 8.916 Q 3.923 10.712 5.361 14.001 Q 6.128 14.398 6.876 14.003 Q 8.439 10.632 11.86 8.912 C 8.893 6.387 12.578 5.159 10.86 0.255 Q 8.655 1.166 7.391 3.377 Q 6.092 2.93 4.843 3.38 Q 3.246 0.883 1.292 0.278 Z M 1.663 1.28 Q 2.413 1.635 3.195 2.718 Q 2.083 2.778 1.595 3.884 Q 1.309 2.7 1.663 1.28 M 3.802 7.908 Q 4.426 8.069 3.284 9.003 Q 3.824 9.32 4.557 10.141 Q 4.812 10.869 4.849 11.671 Q 4.371 10.09 2.642 9.144 Q 2.438 9.033 2.609 8.922 Q 3.229 8.537 3.802 7.908 M 8.469 7.927 Q 8.955 8.469 9.646 8.926 Q 9.791 9.032 9.647 9.136 Q 7.821 10.157 7.389 11.702 Q 7.464 10.869 7.709 10.119 Q 8.219 9.53 8.956 9.025 Q 7.81 7.927 8.469 7.927`,s=`0.244 0.155 11.72 14.25`;function c(c){let{path:l=o,viewBox:u=s,size:d=96,color:f,duration:p=4.2,loop:m=!0,fill:h=!0,spin:g=!1,scale:_=!1,className:v,style:y,classNames:b,styles:x,...S}=c,C=n(null),[w,T]=r(!1);t(()=>{let e=C.current;if(!e)return;T(!1);let t=e.getTotalLength();e.style.setProperty(`--animated-logo-length`,String(t)),e.style.strokeDasharray=String(t),e.style.strokeDashoffset=String(t);let n=requestAnimationFrame(()=>T(!0));return()=>cancelAnimationFrame(n)},[l]);let E={animationDuration:`${p}s`,...f?{stroke:f,fill:f}:void 0,...x?.path};return a(`svg`,{...S,className:i(e.animatedLogo,v),style:{width:d,height:d,...y},viewBox:u,xmlns:`http://www.w3.org/2000/svg`,children:a(`g`,{className:i(w&&_&&(m?e.animatedLogoScaleLoop:e.animatedLogoScaleOnce)),style:{animationDuration:`${p}s`},children:a(`g`,{className:i(w&&g&&(m?e.animatedLogoSpinLoop:e.animatedLogoSpinOnce)),style:{animationDuration:`${p}s`},children:a(`path`,{ref:C,className:i(e.animatedLogoPath,w&&(m?h?e.animatedLogoPathLoop:e.animatedLogoPathLoopNoFill:h?e.animatedLogoPathOnce:e.animatedLogoPathOnceNoFill),b?.path),style:E,strokeWidth:.1,strokeLinejoin:`round`,strokeLinecap:`round`,d:l})})})})}export{c as default};
+"use client";import{cssColor as e,useToneCheck as t}from"../styles/tone.mjs";import n from"./animatedLogo.module.mjs";import{useEffect as r,useRef as i,useState as a}from"react";import o from"classnames";import{jsx as s}from"react/jsx-runtime";var c=`M 1.292 0.278 C -0.41 4.855 3.185 6.433 0.344 8.916 Q 3.923 10.712 5.361 14.001 Q 6.128 14.398 6.876 14.003 Q 8.439 10.632 11.86 8.912 C 8.893 6.387 12.578 5.159 10.86 0.255 Q 8.655 1.166 7.391 3.377 Q 6.092 2.93 4.843 3.38 Q 3.246 0.883 1.292 0.278 Z M 1.663 1.28 Q 2.413 1.635 3.195 2.718 Q 2.083 2.778 1.595 3.884 Q 1.309 2.7 1.663 1.28 M 3.802 7.908 Q 4.426 8.069 3.284 9.003 Q 3.824 9.32 4.557 10.141 Q 4.812 10.869 4.849 11.671 Q 4.371 10.09 2.642 9.144 Q 2.438 9.033 2.609 8.922 Q 3.229 8.537 3.802 7.908 M 8.469 7.927 Q 8.955 8.469 9.646 8.926 Q 9.791 9.032 9.647 9.136 Q 7.821 10.157 7.389 11.702 Q 7.464 10.869 7.709 10.119 Q 8.219 9.53 8.956 9.025 Q 7.81 7.927 8.469 7.927`,l=`0.244 0.155 11.72 14.25`;function u(u){let{path:d=c,viewBox:f=l,size:p=96,color:m,duration:h=4.2,loop:g=!0,fill:_=!0,spin:v=!1,scale:y=!1,className:b,style:x,classNames:S,styles:C,...w}=u;t(`AnimatedLogo`,[m]);let T=i(null),[E,D]=a(!1);r(()=>{let e=T.current;if(!e)return;D(!1);let t=e.getTotalLength();e.style.setProperty(`--animated-logo-length`,String(t)),e.style.strokeDasharray=String(t),e.style.strokeDashoffset=String(t);let n=requestAnimationFrame(()=>D(!0));return()=>cancelAnimationFrame(n)},[d]);let O={animationDuration:`${h}s`,...m?{stroke:e(m),fill:e(m)}:void 0,...C?.path};return s(`svg`,{...w,className:o(n.animatedLogo,b),style:{width:p,height:p,...x},viewBox:f,xmlns:`http://www.w3.org/2000/svg`,children:s(`g`,{className:o(E&&y&&(g?n.animatedLogoScaleLoop:n.animatedLogoScaleOnce)),style:{animationDuration:`${h}s`},children:s(`g`,{className:o(E&&v&&(g?n.animatedLogoSpinLoop:n.animatedLogoSpinOnce)),style:{animationDuration:`${h}s`},children:s(`path`,{ref:T,className:o(n.animatedLogoPath,E&&(g?_?n.animatedLogoPathLoop:n.animatedLogoPathLoopNoFill:_?n.animatedLogoPathOnce:n.animatedLogoPathOnceNoFill),S?.path),style:O,strokeWidth:.1,strokeLinejoin:`round`,strokeLinecap:`round`,d})})})})}export{u as default};
 //# sourceMappingURL=animatedLogo.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"animatedLogo.mjs","names":[],"sources":["../../../../package/common/animatedLogo/animatedLogo.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { CSSProperties, ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport type { AnimatedLogoProps } from './animatedLogo.types';\nimport styles from './animatedLogo.module.pcss';\n\nconst DEFAULT_PATH =\n  'M 1.292 0.278 C -0.41 4.855 3.185 6.433 0.344 8.916 Q 3.923 10.712 5.361 14.001 Q 6.128 14.398 6.876 14.003 Q 8.439 10.632 11.86 8.912 C 8.893 6.387 12.578 5.159 10.86 0.255 Q 8.655 1.166 7.391 3.377 Q 6.092 2.93 4.843 3.38 Q 3.246 0.883 1.292 0.278 Z M 1.663 1.28 Q 2.413 1.635 3.195 2.718 Q 2.083 2.778 1.595 3.884 Q 1.309 2.7 1.663 1.28 M 3.802 7.908 Q 4.426 8.069 3.284 9.003 Q 3.824 9.32 4.557 10.141 Q 4.812 10.869 4.849 11.671 Q 4.371 10.09 2.642 9.144 Q 2.438 9.033 2.609 8.922 Q 3.229 8.537 3.802 7.908 M 8.469 7.927 Q 8.955 8.469 9.646 8.926 Q 9.791 9.032 9.647 9.136 Q 7.821 10.157 7.389 11.702 Q 7.464 10.869 7.709 10.119 Q 8.219 9.53 8.956 9.025 Q 7.81 7.927 8.469 7.927';\n\nconst DEFAULT_VIEW_BOX = '0.244 0.155 11.72 14.25';\n\nfunction AnimatedLogo(props: AnimatedLogoProps): ReactElement {\n  const {\n    path = DEFAULT_PATH,\n    viewBox = DEFAULT_VIEW_BOX,\n    size = 96,\n    color,\n    duration = 4.2,\n    loop = true,\n    fill = true,\n    spin = false,\n    scale = false,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = props;\n\n  const pathRef = useRef<SVGPathElement>(null);\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const pathEl = pathRef.current;\n    if (!pathEl) return;\n\n    setReady(false);\n    const length = pathEl.getTotalLength();\n    pathEl.style.setProperty('--animated-logo-length', String(length));\n    pathEl.style.strokeDasharray = String(length);\n    pathEl.style.strokeDashoffset = String(length);\n\n    const frame = requestAnimationFrame(() => setReady(true));\n    return () => cancelAnimationFrame(frame);\n  }, [path]);\n\n  const pathStyle: CSSProperties = {\n    animationDuration: `${duration}s`,\n    ...(color ? { stroke: color, fill: color } : undefined),\n    ...slotStyles?.path,\n  };\n\n  return (\n    <svg\n      {...rest}\n      className={cx(styles.animatedLogo, className)}\n      style={{ width: size, height: size, ...style }}\n      viewBox={viewBox}\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      <g\n        className={cx(ready && scale && (loop ? styles.animatedLogoScaleLoop : styles.animatedLogoScaleOnce))}\n        style={{ animationDuration: `${duration}s` }}\n      >\n        <g\n          className={cx(ready && spin && (loop ? styles.animatedLogoSpinLoop : styles.animatedLogoSpinOnce))}\n          style={{ animationDuration: `${duration}s` }}\n        >\n          <path\n            ref={pathRef}\n            className={cx(\n              styles.animatedLogoPath,\n              ready &&\n                (loop\n                  ? fill\n                    ? styles.animatedLogoPathLoop\n                    : styles.animatedLogoPathLoopNoFill\n                  : fill\n                    ? styles.animatedLogoPathOnce\n                    : styles.animatedLogoPathOnceNoFill),\n              classNames?.path,\n            )}\n            style={pathStyle}\n            strokeWidth={0.1}\n            strokeLinejoin='round'\n            strokeLinecap='round'\n            d={path}\n          />\n        </g>\n      </g>\n    </svg>\n  );\n}\n\nexport default AnimatedLogo;\n"],"mappings":"oLAOA,IAAM,EACJ,8qBAEI,EAAmB,0BAEzB,SAAS,EAAa,EAAwC,CAC5D,GAAM,CACJ,OAAO,EACP,UAAU,EACV,OAAO,GACP,QACA,WAAW,IACX,OAAO,GACP,OAAO,GACP,OAAO,GACP,QAAQ,GACR,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAEE,EAAU,EAAuB,IAAI,EACrC,CAAC,EAAO,GAAY,EAAS,EAAK,EAExC,MAAgB,CACd,IAAM,EAAS,EAAQ,QACvB,GAAI,CAAC,EAAQ,OAEb,EAAS,EAAK,EACd,IAAM,EAAS,EAAO,eAAe,EACrC,EAAO,MAAM,YAAY,yBAA0B,OAAO,CAAM,CAAC,EACjE,EAAO,MAAM,gBAAkB,OAAO,CAAM,EAC5C,EAAO,MAAM,iBAAmB,OAAO,CAAM,EAE7C,IAAM,EAAQ,0BAA4B,EAAS,EAAI,CAAC,EACxD,UAAa,qBAAqB,CAAK,CACzC,EAAG,CAAC,CAAI,CAAC,EAET,IAAM,EAA2B,CAC/B,kBAAmB,GAAG,EAAS,GAC/B,GAAI,EAAQ,CAAE,OAAQ,EAAO,KAAM,CAAM,EAAI,IAAA,GAC7C,GAAG,GAAY,IACjB,EAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,aAAc,CAAS,EAC5C,MAAO,CAAE,MAAO,EAAM,OAAQ,EAAM,GAAG,CAAM,EACpC,UACT,MAAM,6BAEN,SAAA,EAAC,IAAD,CACE,UAAW,EAAG,GAAS,IAAU,EAAO,EAAO,sBAAwB,EAAO,sBAAsB,EACpG,MAAO,CAAE,kBAAmB,GAAG,EAAS,EAAG,EAE3C,SAAA,EAAC,IAAD,CACE,UAAW,EAAG,GAAS,IAAS,EAAO,EAAO,qBAAuB,EAAO,qBAAqB,EACjG,MAAO,CAAE,kBAAmB,GAAG,EAAS,EAAG,EAE3C,SAAA,EAAC,OAAD,CACE,IAAK,EACL,UAAW,EACT,EAAO,iBACP,IACG,EACG,EACE,EAAO,qBACP,EAAO,2BACT,EACE,EAAO,qBACP,EAAO,4BACf,GAAY,IACd,EACA,MAAO,EACP,YAAa,GACb,eAAe,QACf,cAAc,QACd,EAAG,CACJ,CAAA,CACA,CAAA,CACF,CAAA,CACA,CAAA,CAET"}
+{"version":3,"file":"animatedLogo.mjs","names":[],"sources":["../../../../package/common/animatedLogo/animatedLogo.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { CSSProperties, ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport type { AnimatedLogoProps } from './animatedLogo.types';\nimport styles from './animatedLogo.module.pcss';\nimport { cssColor, useToneCheck } from '../styles/tone';\n\nconst DEFAULT_PATH =\n  'M 1.292 0.278 C -0.41 4.855 3.185 6.433 0.344 8.916 Q 3.923 10.712 5.361 14.001 Q 6.128 14.398 6.876 14.003 Q 8.439 10.632 11.86 8.912 C 8.893 6.387 12.578 5.159 10.86 0.255 Q 8.655 1.166 7.391 3.377 Q 6.092 2.93 4.843 3.38 Q 3.246 0.883 1.292 0.278 Z M 1.663 1.28 Q 2.413 1.635 3.195 2.718 Q 2.083 2.778 1.595 3.884 Q 1.309 2.7 1.663 1.28 M 3.802 7.908 Q 4.426 8.069 3.284 9.003 Q 3.824 9.32 4.557 10.141 Q 4.812 10.869 4.849 11.671 Q 4.371 10.09 2.642 9.144 Q 2.438 9.033 2.609 8.922 Q 3.229 8.537 3.802 7.908 M 8.469 7.927 Q 8.955 8.469 9.646 8.926 Q 9.791 9.032 9.647 9.136 Q 7.821 10.157 7.389 11.702 Q 7.464 10.869 7.709 10.119 Q 8.219 9.53 8.956 9.025 Q 7.81 7.927 8.469 7.927';\n\nconst DEFAULT_VIEW_BOX = '0.244 0.155 11.72 14.25';\n\nfunction AnimatedLogo(props: AnimatedLogoProps): ReactElement {\n  const {\n    path = DEFAULT_PATH,\n    viewBox = DEFAULT_VIEW_BOX,\n    size = 96,\n    color,\n    duration = 4.2,\n    loop = true,\n    fill = true,\n    spin = false,\n    scale = false,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = props;\n  useToneCheck('AnimatedLogo', [color]);\n\n  const pathRef = useRef<SVGPathElement>(null);\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const pathEl = pathRef.current;\n    if (!pathEl) return;\n\n    setReady(false);\n    const length = pathEl.getTotalLength();\n    pathEl.style.setProperty('--animated-logo-length', String(length));\n    pathEl.style.strokeDasharray = String(length);\n    pathEl.style.strokeDashoffset = String(length);\n\n    const frame = requestAnimationFrame(() => setReady(true));\n    return () => cancelAnimationFrame(frame);\n  }, [path]);\n\n  const pathStyle: CSSProperties = {\n    animationDuration: `${duration}s`,\n    ...(color ? { stroke: cssColor(color), fill: cssColor(color) } : undefined),\n    ...slotStyles?.path,\n  };\n\n  return (\n    <svg\n      {...rest}\n      className={cx(styles.animatedLogo, className)}\n      style={{ width: size, height: size, ...style }}\n      viewBox={viewBox}\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      <g\n        className={cx(ready && scale && (loop ? styles.animatedLogoScaleLoop : styles.animatedLogoScaleOnce))}\n        style={{ animationDuration: `${duration}s` }}\n      >\n        <g\n          className={cx(ready && spin && (loop ? styles.animatedLogoSpinLoop : styles.animatedLogoSpinOnce))}\n          style={{ animationDuration: `${duration}s` }}\n        >\n          <path\n            ref={pathRef}\n            className={cx(\n              styles.animatedLogoPath,\n              ready &&\n                (loop\n                  ? fill\n                    ? styles.animatedLogoPathLoop\n                    : styles.animatedLogoPathLoopNoFill\n                  : fill\n                    ? styles.animatedLogoPathOnce\n                    : styles.animatedLogoPathOnceNoFill),\n              classNames?.path,\n            )}\n            style={pathStyle}\n            strokeWidth={0.1}\n            strokeLinejoin='round'\n            strokeLinecap='round'\n            d={path}\n          />\n        </g>\n      </g>\n    </svg>\n  );\n}\n\nexport default AnimatedLogo;\n"],"mappings":"oPAQA,IAAM,EACJ,8qBAEI,EAAmB,0BAEzB,SAAS,EAAa,EAAwC,CAC5D,GAAM,CACJ,OAAO,EACP,UAAU,EACV,OAAO,GACP,QACA,WAAW,IACX,OAAO,GACP,OAAO,GACP,OAAO,GACP,QAAQ,GACR,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EACJ,EAAa,eAAgB,CAAC,CAAK,CAAC,EAEpC,IAAM,EAAU,EAAuB,IAAI,EACrC,CAAC,EAAO,GAAY,EAAS,EAAK,EAExC,MAAgB,CACd,IAAM,EAAS,EAAQ,QACvB,GAAI,CAAC,EAAQ,OAEb,EAAS,EAAK,EACd,IAAM,EAAS,EAAO,eAAe,EACrC,EAAO,MAAM,YAAY,yBAA0B,OAAO,CAAM,CAAC,EACjE,EAAO,MAAM,gBAAkB,OAAO,CAAM,EAC5C,EAAO,MAAM,iBAAmB,OAAO,CAAM,EAE7C,IAAM,EAAQ,0BAA4B,EAAS,EAAI,CAAC,EACxD,UAAa,qBAAqB,CAAK,CACzC,EAAG,CAAC,CAAI,CAAC,EAET,IAAM,EAA2B,CAC/B,kBAAmB,GAAG,EAAS,GAC/B,GAAI,EAAQ,CAAE,OAAQ,EAAS,CAAK,EAAG,KAAM,EAAS,CAAK,CAAE,EAAI,IAAA,GACjE,GAAG,GAAY,IACjB,EAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,aAAc,CAAS,EAC5C,MAAO,CAAE,MAAO,EAAM,OAAQ,EAAM,GAAG,CAAM,EACpC,UACT,MAAM,6BAEN,SAAA,EAAC,IAAD,CACE,UAAW,EAAG,GAAS,IAAU,EAAO,EAAO,sBAAwB,EAAO,sBAAsB,EACpG,MAAO,CAAE,kBAAmB,GAAG,EAAS,EAAG,EAE3C,SAAA,EAAC,IAAD,CACE,UAAW,EAAG,GAAS,IAAS,EAAO,EAAO,qBAAuB,EAAO,qBAAqB,EACjG,MAAO,CAAE,kBAAmB,GAAG,EAAS,EAAG,EAE3C,SAAA,EAAC,OAAD,CACE,IAAK,EACL,UAAW,EACT,EAAO,iBACP,IACG,EACG,EACE,EAAO,qBACP,EAAO,2BACT,EACE,EAAO,qBACP,EAAO,4BACf,GAAY,IACd,EACA,MAAO,EACP,YAAa,GACb,eAAe,QACf,cAAc,QACX,CACJ,CAAA,CACA,CAAA,CACF,CAAA,CACA,CAAA,CAET"}