@ahrowe/ui 0.41.2 → 0.43.0

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

@@ -1 +1 @@
-{"version":3,"file":"chip.mjs","names":[],"sources":["../../../../package/common/chip/chip.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { faXmarkCircle } from '@fortawesome/free-solid-svg-icons';\nimport cx from 'classnames';\n\nimport Ripple from '../ripple';\nimport type { RippleHandle } from '../ripple';\nimport InteractableDiv from '../interactableDiv';\nimport ActionIcon from '../actionIcon';\nimport { ChipStyleType, ChipProps } from './chip.types';\nimport type { ChipLabels } from './chip.types';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { isSelfActivation } from '../utils/activationKey';\n\nimport styles from './chip.module.pcss';\n\nconst CLASS_BY_STYLE: Record<ChipStyleType, string> = {\n  default: styles.chipStyleDefault,\n  primary: styles.chipStylePrimary,\n  info: styles.chipStyleInfo,\n  warn: styles.chipStyleWarn,\n  error: styles.chipStyleError,\n};\n\nconst DEFAULT_LABELS: Required<ChipLabels> = {\n  remove: 'Remove',\n};\n\nfunction Chip(props: ChipProps) {\n  const {\n    className = '',\n    thumbnail = '',\n    text = '',\n    styleType = ChipStyleType.Default,\n    showRemoveIcon = false,\n    labels,\n    onClick,\n    onRemove,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Chip', props);\n  const resolvedLabels = useLabels('Chip', labels, DEFAULT_LABELS);\n  const rippleRef = useRef<RippleHandle>(null);\n\n  // Keyboard activation calls onClick directly without dispatching a DOM click, so Ripple's own\n  // listener never sees it.\n  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n    if (onClick && isSelfActivation(event)) rippleRef.current?.addRipple();\n  }\n\n  const thumbnailUrl = useMemo(() => {\n    if (typeof thumbnail === 'string' && thumbnail.startsWith('http')) return thumbnail;\n    return undefined;\n  }, [thumbnail]);\n\n  return (\n    <InteractableDiv\n      {...rest}\n      className={cx(\n        styles.chip,\n        CLASS_BY_STYLE[styleType],\n        onClick && styles.chipClickable,\n        className,\n        classNames?.root,\n      )}\n      style={{ ...style, ...slotStyles?.root }}\n      onClick={onClick}\n      onKeyDown={handleKeyDown}\n    >\n      <Ripple ref={rippleRef} disabled={!onClick} style={{ borderRadius: 'inherit' }}>\n        <div className={cx(styles.chipInner, classNames?.inner)} style={slotStyles?.inner}>\n          {thumbnail && (\n            <div\n              className={cx(styles.chipThumbnail, classNames?.thumbnail)}\n              style={{\n                ...(thumbnailUrl ? { backgroundImage: `url(${thumbnailUrl})` } : {}),\n                ...slotStyles?.thumbnail,\n              }}\n            >\n              {!thumbnailUrl && thumbnail}\n            </div>\n          )}\n          <div className={cx(styles.chipText, classNames?.text)} style={slotStyles?.text}>\n            {text}\n          </div>\n          {showRemoveIcon && (\n            <ActionIcon\n              icon={faXmarkCircle}\n              className={classNames?.removeIcon}\n              style={slotStyles?.removeIcon}\n              aria-label={resolvedLabels.remove}\n              onClick={(e) => {\n                e.stopPropagation();\n                onRemove?.();\n              }}\n            />\n          )}\n        </div>\n      </Ripple>\n    </InteractableDiv>\n  );\n}\n\nexport default Chip;\n"],"mappings":"imBAeA,IAAM,EAAgD,CACpD,QAAS,EAAO,iBAChB,QAAS,EAAO,iBAChB,KAAM,EAAO,cACb,KAAM,EAAO,cACb,MAAO,EAAO,cAChB,EAEM,EAAuC,CAC3C,OAAQ,QACV,EAEA,SAAS,EAAK,EAAkB,CAC9B,GAAM,CACJ,YAAY,GACZ,YAAY,GACZ,OAAO,GACP,YAAY,EAAc,QAC1B,iBAAiB,GACjB,SACA,UACA,WACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,OAAQ,CAAK,EAChC,EAAiB,EAAU,OAAQ,EAAQ,CAAc,EACzD,EAAY,EAAqB,IAAI,EAI3C,SAAS,EAAc,EAA4C,CAC7D,GAAW,EAAiB,CAAK,GAAG,EAAU,SAAS,UAAU,CACvE,CAEA,IAAM,EAAe,MAAc,CACjC,GAAI,OAAO,GAAc,UAAY,EAAU,WAAW,MAAM,EAAG,OAAO,CAE5E,EAAG,CAAC,CAAS,CAAC,EAEd,OACE,EAAC,EAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,KACP,EAAe,GACf,GAAW,EAAO,cAClB,EACA,GAAY,IACd,EACA,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAC9B,UACT,UAAW,EAEX,SAAA,EAAC,EAAD,CAAQ,IAAK,EAAW,SAAU,CAAC,EAAS,MAAO,CAAE,aAAc,SAAU,EAC3E,SAAA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,UAAW,GAAY,KAAK,EAAG,MAAO,GAAY,MAA5E,SAAA,CACG,GACC,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,cAAe,GAAY,SAAS,EACzD,MAAO,CACL,GAAI,EAAe,CAAE,gBAAiB,OAAO,EAAa,EAAG,EAAI,CAAC,EAClE,GAAG,GAAY,SACjB,EAEC,SAAA,CAAC,GAAgB,CACf,CAAA,EAEP,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,SAAU,GAAY,IAAI,EAAG,MAAO,GAAY,KACvE,SAAA,CACE,CAAA,EACJ,GACC,EAAC,EAAD,CACE,KAAM,EACN,UAAW,GAAY,WACvB,MAAO,GAAY,WACnB,aAAY,EAAe,OAC3B,QAAU,GAAM,CACd,EAAE,gBAAgB,EAClB,IAAW,CACb,CACD,CAAA,CAEA,GACC,CAAA,CACO,CAAA,CAErB"}
+{"version":3,"file":"chip.mjs","names":[],"sources":["../../../../package/common/chip/chip.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { faXmarkCircle } from '@fortawesome/free-solid-svg-icons';\nimport cx from 'classnames';\n\nimport Ripple from '../ripple';\nimport type { RippleHandle } from '../ripple';\nimport InteractableDiv from '../interactableDiv';\nimport ActionIcon from '../actionIcon';\nimport { ChipStyleType, ChipProps } from './chip.types';\nimport type { ChipLabels } from './chip.types';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { isSelfActivation } from '../utils/activationKey';\nimport { ThemeColor } from '../themeProvider/color.types';\nimport { toneProps, useToneCheck } from '../styles/tone';\n\nimport styles from './chip.module.pcss';\n\nconst CLASS_BY_STYLE: Record<ChipStyleType, string> = {\n  filled: styles.chipStyleFilled,\n  light: styles.chipStyleLight,\n  outlined: styles.chipStyleOutlined,\n};\n\nconst DEFAULT_LABELS: Required<ChipLabels> = {\n  remove: 'Remove',\n};\n\nfunction Chip(props: ChipProps) {\n  const {\n    className = '',\n    thumbnail = '',\n    text = '',\n    styleType = ChipStyleType.Light,\n    color = ThemeColor.Neutral,\n    showRemoveIcon = false,\n    labels,\n    onClick,\n    onRemove,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Chip', props);\n  const resolvedLabels = useLabels('Chip', labels, DEFAULT_LABELS);\n  const rippleRef = useRef<RippleHandle>(null);\n  const tone = toneProps(color);\n  useToneCheck('Chip', [color]);\n\n  // Keyboard activation calls onClick directly without dispatching a DOM click, so Ripple's own\n  // listener never sees it.\n  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n    if (onClick && isSelfActivation(event)) rippleRef.current?.addRipple();\n  }\n\n  const thumbnailUrl = useMemo(() => {\n    if (typeof thumbnail === 'string' && thumbnail.startsWith('http')) return thumbnail;\n    return undefined;\n  }, [thumbnail]);\n\n  return (\n    <InteractableDiv\n      {...rest}\n      className={cx(\n        styles.chip,\n        tone.className,\n        CLASS_BY_STYLE[styleType],\n        onClick && styles.chipClickable,\n        className,\n        classNames?.root,\n      )}\n      style={{ ...tone.style, ...style, ...slotStyles?.root }}\n      onClick={onClick}\n      onKeyDown={handleKeyDown}\n    >\n      <Ripple ref={rippleRef} disabled={!onClick} style={{ borderRadius: 'inherit' }}>\n        <div className={cx(styles.chipInner, classNames?.inner)} style={slotStyles?.inner}>\n          {thumbnail && (\n            <div\n              className={cx(styles.chipThumbnail, classNames?.thumbnail)}\n              style={{\n                ...(thumbnailUrl ? { backgroundImage: `url(${thumbnailUrl})` } : {}),\n                ...slotStyles?.thumbnail,\n              }}\n            >\n              {!thumbnailUrl && thumbnail}\n            </div>\n          )}\n          <div className={cx(styles.chipText, classNames?.text)} style={slotStyles?.text}>\n            {text}\n          </div>\n          {showRemoveIcon && (\n            <ActionIcon\n              icon={faXmarkCircle}\n              className={classNames?.removeIcon}\n              style={slotStyles?.removeIcon}\n              aria-label={resolvedLabels.remove}\n              onClick={(e) => {\n                e.stopPropagation();\n                onRemove?.();\n              }}\n            />\n          )}\n        </div>\n      </Ripple>\n    </InteractableDiv>\n  );\n}\n\nexport default Chip;\n"],"mappings":"guBAiBA,IAAM,EAAgD,CACpD,OAAQ,EAAO,gBACf,MAAO,EAAO,eACd,SAAU,EAAO,iBACnB,EAEM,EAAuC,CAC3C,OAAQ,QACV,EAEA,SAAS,EAAK,EAAkB,CAC9B,GAAM,CACJ,YAAY,GACZ,YAAY,GACZ,OAAO,GACP,YAAY,EAAc,MAC1B,QAAQ,EAAW,QACnB,iBAAiB,GACjB,SACA,UACA,WACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,OAAQ,CAAK,EAChC,EAAiB,EAAU,OAAQ,EAAQ,CAAc,EACzD,EAAY,EAAqB,IAAI,EACrC,EAAO,EAAU,CAAK,EAC5B,EAAa,OAAQ,CAAC,CAAK,CAAC,EAI5B,SAAS,EAAc,EAA4C,CAC7D,GAAW,EAAiB,CAAK,GAAG,EAAU,SAAS,UAAU,CACvE,CAEA,IAAM,EAAe,MAAc,CACjC,GAAI,OAAO,GAAc,UAAY,EAAU,WAAW,MAAM,EAAG,OAAO,CAE5E,EAAG,CAAC,CAAS,CAAC,EAEd,OACE,EAAC,EAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,KACP,EAAK,UACL,EAAe,GACf,GAAW,EAAO,cAClB,EACA,GAAY,IACd,EACA,MAAO,CAAE,GAAG,EAAK,MAAO,GAAG,EAAO,GAAG,GAAY,IAAK,EAC7C,UACT,UAAW,EAEX,SAAA,EAAC,EAAD,CAAQ,IAAK,EAAW,SAAU,CAAC,EAAS,MAAO,CAAE,aAAc,SAAU,EAC3E,SAAA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,UAAW,GAAY,KAAK,EAAG,MAAO,GAAY,MAA5E,SAAA,CACG,GACC,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,cAAe,GAAY,SAAS,EACzD,MAAO,CACL,GAAI,EAAe,CAAE,gBAAiB,OAAO,EAAa,EAAG,EAAI,CAAC,EAClE,GAAG,GAAY,SACjB,EAEC,SAAA,CAAC,GAAgB,CACf,CAAA,EAEP,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,SAAU,GAAY,IAAI,EAAG,MAAO,GAAY,KACvE,SAAA,CACE,CAAA,EACJ,GACC,EAAC,EAAD,CACE,KAAM,EACN,UAAW,GAAY,WACvB,MAAO,GAAY,WACnB,aAAY,EAAe,OAC3B,QAAU,GAAM,CACd,EAAE,gBAAgB,EAClB,IAAW,CACb,CACD,CAAA,CAEA,GACC,CAAA,CACO,CAAA,CAErB"}

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

@@ -1,2 +1,2 @@
-"use client";var e=`chip_rCTMl`,t=`chip-clickable_WTVjG`,n=`chip-style-default_ppCDx`,r=`chip-style-primary_oyE85`,i=`chip-style-info_GNJrm`,a=`chip-style-warn_Jx3LU`,o=`chip-style-error_-Npvg`,s=`chip-inner_mfo-w`,c=`chip-text_d1juf`,l=`chip-thumbnail_-A7eU`,u=`chip-container_oNNmF`,d=`chip-container-inline_11QHw`,f={chip:e,"chip-clickable":`chip-clickable_WTVjG`,chipClickable:t,"chip-style-default":`chip-style-default_ppCDx`,chipStyleDefault:n,"chip-style-primary":`chip-style-primary_oyE85`,chipStylePrimary:r,"chip-style-info":`chip-style-info_GNJrm`,chipStyleInfo:i,"chip-style-warn":`chip-style-warn_Jx3LU`,chipStyleWarn:a,"chip-style-error":`chip-style-error_-Npvg`,chipStyleError:o,"chip-inner":`chip-inner_mfo-w`,chipInner:s,"chip-text":`chip-text_d1juf`,chipText:c,"chip-thumbnail":`chip-thumbnail_-A7eU`,chipThumbnail:l,"chip-container":`chip-container_oNNmF`,chipContainer:u,"chip-container-inline":`chip-container-inline_11QHw`,chipContainerInline:d};export{e as chip,t as chipClickable,u as chipContainer,d as chipContainerInline,s as chipInner,n as chipStyleDefault,o as chipStyleError,i as chipStyleInfo,r as chipStylePrimary,a as chipStyleWarn,c as chipText,l as chipThumbnail,f as default};
+"use client";var e=`chip_rCTMl`,t=`chip-clickable_WTVjG`,n=`chip-style-filled_gYANL`,r=`chip-style-light_5J4XG`,i=`chip-style-outlined_JFI-K`,a=`chip-inner_mfo-w`,o=`chip-text_d1juf`,s=`chip-thumbnail_-A7eU`,c=`chip-container_oNNmF`,l=`chip-container-inline_11QHw`,u={chip:e,"chip-clickable":`chip-clickable_WTVjG`,chipClickable:t,"chip-style-filled":`chip-style-filled_gYANL`,chipStyleFilled:n,"chip-style-light":`chip-style-light_5J4XG`,chipStyleLight:r,"chip-style-outlined":`chip-style-outlined_JFI-K`,chipStyleOutlined:i,"chip-inner":`chip-inner_mfo-w`,chipInner:a,"chip-text":`chip-text_d1juf`,chipText:o,"chip-thumbnail":`chip-thumbnail_-A7eU`,chipThumbnail:s,"chip-container":`chip-container_oNNmF`,chipContainer:c,"chip-container-inline":`chip-container-inline_11QHw`,chipContainerInline:l};export{e as chip,t as chipClickable,c as chipContainer,l as chipContainerInline,a as chipInner,n as chipStyleFilled,r as chipStyleLight,i as chipStyleOutlined,o as chipText,s as chipThumbnail,u as default};
 //# sourceMappingURL=chip.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"chip.module.mjs","names":[],"sources":["../../../../package/common/chip/chip.module.pcss"],"sourcesContent":[".chip {\n  background: rgb(0 0 0 / 8%);\n  border-radius: 99999px;\n  width: fit-content;\n  position: relative;\n  box-sizing: border-box;\n  max-width: 100%;\n\n  &-clickable {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &-style {\n    &-default {\n      background: rgb(0 0 0 / 8%);\n      color: var(--text-color);\n    }\n\n    &-primary {\n      background: var(--primary-color);\n\n      /* Must follow the shorthand above, which resets background-image. */\n      background-image: var(--primary-gradient, none);\n      color: var(--text-on-primary);\n    }\n\n    &-info {\n      background: var(--info-lighter);\n      color: var(--info-color);\n    }\n\n    &-warn {\n      background: var(--warn-lighter);\n      color: var(--warn-color);\n    }\n\n    &-error {\n      background: var(--error-lighter);\n      color: var(--error-color);\n    }\n  }\n\n  &-inner {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    padding: 4px 8px;\n\n    & > * {\n      white-space: nowrap;\n    }\n  }\n\n  &-text {\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n\n  &-thumbnail {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 18px;\n    height: 18px;\n    background: rgb(0 0 0 / 8%);\n    border-radius: 18px;\n    overflow: hidden;\n    background-size: cover;\n  }\n\n  &-container {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n\n    &-inline {\n      flex-wrap: nowrap;\n      overflow: auto;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"chip.module.mjs","names":[],"sources":["../../../../package/common/chip/chip.module.pcss"],"sourcesContent":[".chip {\n  border-radius: 99999px;\n  width: fit-content;\n  position: relative;\n  box-sizing: border-box;\n  max-width: 100%;\n\n  &-clickable {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &-style {\n    &-filled {\n      background: var(--tone-fill);\n\n      /* Must follow the shorthand above, which resets background-image. */\n      background-image: var(--tone-gradient);\n      color: var(--tone-contrast);\n    }\n\n    &-light {\n      background: var(--tone-light);\n      color: var(--tone-text);\n    }\n\n    /* An inset shadow rather than a border, so an outlined chip is exactly as big as the rest. */\n    &-outlined {\n      box-shadow: inset 0 0 0 1px var(--tone-outline);\n      color: var(--tone-text);\n    }\n  }\n\n  &-inner {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    padding: 4px 8px;\n\n    & > * {\n      white-space: nowrap;\n    }\n  }\n\n  &-text {\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n\n  &-thumbnail {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 18px;\n    height: 18px;\n    background: rgb(0 0 0 / 8%);\n    border-radius: 18px;\n    overflow: hidden;\n    background-size: cover;\n  }\n\n  &-container {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n\n    &-inline {\n      flex-wrap: nowrap;\n      overflow: auto;\n    }\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-"use client";var e=function(e){return e.Default=`default`,e.Primary=`primary`,e.Info=`info`,e.Warn=`warn`,e.Error=`error`,e}({});export{e as ChipStyleType};
+"use client";var e=function(e){return e.Filled=`filled`,e.Light=`light`,e.Outlined=`outlined`,e}({});export{e as ChipStyleType};
 //# sourceMappingURL=chip.types.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"chip.types.mjs","names":[],"sources":["../../../../package/common/chip/chip.types.ts"],"sourcesContent":["import type { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types';\n\nexport enum ChipStyleType {\n  Default = 'default',\n  Primary = 'primary',\n  Info = 'info',\n  Warn = 'warn',\n  Error = 'error',\n}\n\n/** Text Chip renders of its own, for translating it. */\nexport interface ChipLabels {\n  /** The remove button, read out by screen readers (default `Remove`). */\n  remove?: string;\n}\n\nexport type ChipSlots = 'root' | 'inner' | 'thumbnail' | 'text' | 'removeIcon';\n\nexport interface ChipProps extends HtmlProps {\n  className?: string;\n  text?: string;\n  thumbnail?: React.ReactNode;\n  styleType?: ChipStyleType;\n  showRemoveIcon?: boolean;\n  /** Accessible name for the remove button. Default `'Remove'`. */\n  onClick?: () => void;\n  onRemove?: () => void;\n  /** Overrides the text Chip renders of its own. Merged per key. */\n  labels?: ChipLabels;\n  /** Classes for the inner elements. See `ChipSlots`. */\n  classNames?: SlotClassNames<ChipSlots>;\n  /** Inline styles for the inner elements. See `ChipSlots`. */\n  styles?: SlotStyles<ChipSlots>;\n}\n\nexport interface ChipContainerProps extends HtmlProps {\n  className?: string;\n  children?: React.ReactNode;\n  inline?: boolean;\n}\n"],"mappings":"aAEA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
+{"version":3,"file":"chip.types.mjs","names":[],"sources":["../../../../package/common/chip/chip.types.ts"],"sourcesContent":["import type { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types';\nimport type { ColorValue } from '../themeProvider/color.types';\n\n/** How much the chip stands out. Independent of its colour. */\nexport enum ChipStyleType {\n  /** Solid fill. */\n  Filled = 'filled',\n  /** A light tint of the colour behind text in the colour. The default. */\n  Light = 'light',\n  /** Border and text in the colour, no fill. */\n  Outlined = 'outlined',\n}\n\n/** Text Chip renders of its own, for translating it. */\nexport interface ChipLabels {\n  /** The remove button, read out by screen readers (default `Remove`). */\n  remove?: string;\n}\n\nexport type ChipSlots = 'root' | 'inner' | 'thumbnail' | 'text' | 'removeIcon';\n\nexport interface ChipProps extends HtmlProps {\n  className?: string;\n  text?: string;\n  thumbnail?: React.ReactNode;\n  styleType?: ChipStyleType;\n  /** A `ThemeColor` (default `Neutral`) or any CSS colour, such as `'var(--brand)'`. */\n  color?: ColorValue;\n  showRemoveIcon?: boolean;\n  /** Accessible name for the remove button. Default `'Remove'`. */\n  onClick?: () => void;\n  onRemove?: () => void;\n  /** Overrides the text Chip renders of its own. Merged per key. */\n  labels?: ChipLabels;\n  /** Classes for the inner elements. See `ChipSlots`. */\n  classNames?: SlotClassNames<ChipSlots>;\n  /** Inline styles for the inner elements. See `ChipSlots`. */\n  styles?: SlotStyles<ChipSlots>;\n}\n\nexport interface ChipContainerProps extends HtmlProps {\n  className?: string;\n  children?: React.ReactNode;\n  inline?: boolean;\n}\n"],"mappings":"aAIA,IAAY,EAAL,SAAA,EAAA,OAEL,GAAA,OAAA,SAEA,EAAA,MAAA,QAEA,EAAA,SAAA,YACF,EAAA,CAAA,CAAA"}

package/dist/esm/common/colorPicker/colorPicker.mjs

@@ -1,2 +1,2 @@
-"use client";import{useLabels as e}from"../configProvider/useLabels.mjs";import t from"../interactableDiv/index.mjs";import{PopoverAlign as n,PopoverPlacement as r}from"../popover/popover.types.mjs";import i from"../popover/popover.mjs";import a from"../input/input.mjs";import{toHex as o}from"./toHex.mjs";import s from"./colorPicker.module.mjs";import{useRef as c,useState as l}from"react";import u from"classnames";import{FontAwesomeIcon as d}from"@fortawesome/react-fontawesome";import{faEyeDropper as f}from"@fortawesome/free-solid-svg-icons";import{jsx as p,jsxs as m}from"react/jsx-runtime";var h=typeof window<`u`&&`EyeDropper`in window;async function g(){let e=window.EyeDropper;if(!e)return null;try{return(await new e().open()).sRGBHex}catch{return null}}function _(e){return Math.max(0,Math.min(100,e))}function v(e){return/^#[0-9a-fA-F]{6}$/.test(e)||/^#[0-9a-fA-F]{8}$/.test(e)}function y(e){return/^#[0-9a-fA-F]{8}$/.test(e)?{hex6:e.slice(0,7),alpha:parseInt(e.slice(7,9),16)/255*100}:{hex6:e.slice(0,7),alpha:100}}function b(e,t,n){return!n||t>=100?e:`${e}${Math.round(t/100*255).toString(16).padStart(2,`0`)}`}function x(e,t){return`rgba(${parseInt(e.slice(1,3),16)}, ${parseInt(e.slice(3,5),16)}, ${parseInt(e.slice(5,7),16)}, ${t/100})`}function S(e){let t=parseInt(e.slice(1,3),16)/255,n=parseInt(e.slice(3,5),16)/255,r=parseInt(e.slice(5,7),16)/255,i=Math.max(t,n,r),a=i-Math.min(t,n,r),o=0;a!==0&&(o=i===t?(n-r)/a%6:i===n?(r-t)/a+2:(t-n)/a+4,o*=60,o<0&&(o+=360));let s=i===0?0:a/i*100,c=i*100;return{h:o,s,v:c}}function C(e,t,n){let r=t/100,i=n/100,a=i*r,o=a*(1-Math.abs(e/60%2-1)),s=i-a,c=0,l=0,u=0;e<60?(c=a,l=o,u=0):e<120?(c=o,l=a,u=0):e<180?(c=0,l=a,u=o):e<240?(c=0,l=o,u=a):e<300?(c=o,l=0,u=a):(c=a,l=0,u=o);let d=e=>Math.round((e+s)*255).toString(16).padStart(2,`0`);return`#${d(c)}${d(l)}${d(u)}`}function w({hex:e,onChange:t,useInputComponent:n=!1,className:r,style:i}){let[o,c]=l(e),[d,f]=l(e);e!==d&&(f(e),c(e));function m(e){c(e);let n=e.startsWith(`#`)?e:`#${e}`;v(n)&&t(n)}function h(){v(o.startsWith(`#`)?o:`#${o}`)||c(e)}return n?p(a,{value:o,onChange:e=>m(e),onBlur:h}):p(`input`,{type:`text`,value:o,onChange:e=>m(e.target.value),onBlur:h,className:u(s.hexInput,r),style:i,spellCheck:!1})}function T({hue:e,sat:t,val:n,alpha:r,onHueChange:i,onSVChange:a,onAlphaChange:o,showInput:l=!0,showAlpha:v=!1,labels:x,classNames:T,styles:E}){let D=c(null);function O(e){let t=D.current.getBoundingClientRect(),n=Math.max(0,Math.min(1,(e.clientX-t.left)/t.width)),r=Math.max(0,Math.min(1,(e.clientY-t.top)/t.height));return{s:n*100,v:(1-r)*100}}function k(e){let r=e.shiftKey?10:1,i=t,o=n;switch(e.key){case`ArrowLeft`:i-=r;break;case`ArrowRight`:i+=r;break;case`ArrowUp`:o+=r;break;case`ArrowDown`:o-=r;break;case`Home`:i=0;break;case`End`:i=100;break;case`PageUp`:o=100;break;case`PageDown`:o=0;break;default:return}e.preventDefault(),a(_(i),_(o))}function A(e){e.currentTarget.setPointerCapture(e.pointerId);let{s:t,v:n}=O(e);a(t,n);let r=e=>{let{s:t,v:n}=O(e);a(t,n)},i=()=>{window.removeEventListener(`pointermove`,r),window.removeEventListener(`pointerup`,i)};window.addEventListener(`pointermove`,r),window.addEventListener(`pointerup`,i)}function j(e){let{hex6:t,alpha:n}=y(e),{h:r,s,v:c}=S(t);i(r),a(s,c),v&&o(n)}let M=C(e,t,n),N=v?b(M,r,!0):M;return m(`div`,{className:u(s.panel,T?.panel),style:E?.panel,children:[m(`div`,{ref:D,role:`slider`,tabIndex:0,"aria-label":x.saturationAndBrightness,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(t),"aria-valuetext":x.saturationAndBrightnessValue(Math.round(t),Math.round(n)),className:u(s.gradientArea,T?.gradient),style:{"--hue":e,...E?.gradient},onPointerDown:A,onKeyDown:k,children:[p(`div`,{className:s.gradientOverlay}),p(`div`,{className:s.cursor,style:{left:`${t}%`,top:`${100-n}%`}})]}),p(`input`,{type:`range`,min:0,max:359,value:Math.round(e),onChange:e=>i(Number(e.target.value)),className:u(s.hueSlider,T?.hueSlider),style:E?.hueSlider}),v&&p(`input`,{type:`range`,min:0,max:100,value:Math.round(r),onChange:e=>o(Number(e.target.value)),className:u(s.alphaSlider,T?.alphaSlider),style:{"--alpha-color":M,...E?.alphaSlider}}),(l||h)&&m(`div`,{className:s.hexRow,children:[l&&p(w,{hex:N,onChange:j,className:T?.hexInput,style:E?.hexInput}),h&&p(`button`,{type:`button`,className:u(s.eyeDropperButton,T?.eyeDropper),style:E?.eyeDropper,onClick:async()=>{let e=await g();e&&j(e)},"aria-label":x.pickFromScreen,children:p(d,{icon:f})})]})]})}var E=`#3b82f6`,D={pickFromScreen:`Pick color from screen`,saturationAndBrightness:`Saturation and brightness`,saturationAndBrightnessValue:(e,t)=>`${e}% saturation, ${t}% brightness`};function O({className:a,value:d=E,onChange:f,showInput:h=!1,showAlpha:g=!1,inline:_=!1,labels:v,style:O,classNames:k,styles:A,...j}){let M=e(`ColorPicker`,v,D),[N,P]=l(!1),{hex6:F,alpha:I}=y(o(d)??E),L=S(F),[R,z]=l({h:L.h,s:L.s,v:L.v,a:I}),B=c(R),[V,H]=l(d);if(d!==V){H(d);let{hex6:e,alpha:t}=y(o(d)??E);if(e!==C(R.h,R.s,R.v)||t!==R.a){let n=S(e);z({h:n.h,s:n.s,v:n.v,a:t})}}let{h:U,s:W,v:G,a:K}=R;function q(e,t,n,r){f?.(b(C(e,t,n),r,g))}function J(e){B.current.h=e,z(t=>({...t,h:e})),q(e,B.current.s,B.current.v,B.current.a)}function Y(e,t){B.current.s=e,B.current.v=t,z(n=>({...n,s:e,v:t})),q(B.current.h,e,t,B.current.a)}function X(e){B.current.a=e,z(t=>({...t,a:e})),q(B.current.h,B.current.s,B.current.v,e)}let Z=C(U,W,G),ee=g?x(Z,K):Z,Q=b(Z,K,g),$={hue:U,sat:W,val:G,alpha:K,onHueChange:J,onSVChange:Y,onAlphaChange:X,showAlpha:g,labels:M,classNames:k,styles:A};return _?p(`div`,{...j,className:u(s.colorPicker,a,k?.root),style:{...O,...A?.root},children:p(T,{...$,showInput:h})}):m(`div`,{...j,className:u(s.colorPicker,a),children:[p(i,{isOpen:N,onOpenChange:P,placement:r.Bottom,align:n.Start,constrainWidth:!1,content:p(T,{...$}),children:m(t,{role:`button`,tabIndex:0,"aria-haspopup":`dialog`,"aria-expanded":N,className:u(s.swatch,k?.swatch),style:A?.swatch,children:[p(`div`,{className:s.swatchFill,style:{background:ee}}),p(`span`,{className:s.swatchHex,children:Q})]})}),h&&p(w,{hex:Q,onChange:e=>f?.(e),useInputComponent:!0})]})}export{O as default};
+"use client";import{useLabels as e}from"../configProvider/useLabels.mjs";import{ButtonStyleType as t}from"../button/button.types.mjs";import n from"../actionIcon/actionIcon.mjs";import r from"../interactableDiv/index.mjs";import{PopoverAlign as i,PopoverPlacement as a}from"../popover/popover.types.mjs";import o from"../popover/popover.mjs";import s from"../input/input.mjs";import{toHex as c}from"./toHex.mjs";import l from"./colorPicker.module.mjs";import{useRef as u,useState as d}from"react";import f from"classnames";import{faEyeDropper as p}from"@fortawesome/free-solid-svg-icons";import{jsx as m,jsxs as h}from"react/jsx-runtime";var g=typeof window<`u`&&`EyeDropper`in window;async function _(){let e=window.EyeDropper;if(!e)return null;try{return(await new e().open()).sRGBHex}catch{return null}}function v(e){return Math.max(0,Math.min(100,e))}function y(e){return/^#[0-9a-fA-F]{6}$/.test(e)||/^#[0-9a-fA-F]{8}$/.test(e)}function b(e){return/^#[0-9a-fA-F]{8}$/.test(e)?{hex6:e.slice(0,7),alpha:parseInt(e.slice(7,9),16)/255*100}:{hex6:e.slice(0,7),alpha:100}}function x(e,t,n){return!n||t>=100?e:`${e}${Math.round(t/100*255).toString(16).padStart(2,`0`)}`}function S(e,t){return`rgba(${parseInt(e.slice(1,3),16)}, ${parseInt(e.slice(3,5),16)}, ${parseInt(e.slice(5,7),16)}, ${t/100})`}function C(e){let t=parseInt(e.slice(1,3),16)/255,n=parseInt(e.slice(3,5),16)/255,r=parseInt(e.slice(5,7),16)/255,i=Math.max(t,n,r),a=i-Math.min(t,n,r),o=0;a!==0&&(o=i===t?(n-r)/a%6:i===n?(r-t)/a+2:(t-n)/a+4,o*=60,o<0&&(o+=360));let s=i===0?0:a/i*100,c=i*100;return{h:o,s,v:c}}function w(e,t,n){let r=t/100,i=n/100,a=i*r,o=a*(1-Math.abs(e/60%2-1)),s=i-a,c=0,l=0,u=0;e<60?(c=a,l=o,u=0):e<120?(c=o,l=a,u=0):e<180?(c=0,l=a,u=o):e<240?(c=0,l=o,u=a):e<300?(c=o,l=0,u=a):(c=a,l=0,u=o);let d=e=>Math.round((e+s)*255).toString(16).padStart(2,`0`);return`#${d(c)}${d(l)}${d(u)}`}function T({hex:e,onChange:t,useInputComponent:n=!1,className:r,style:i}){let[a,o]=d(e),[c,u]=d(e);e!==c&&(u(e),o(e));function p(e){o(e);let n=e.startsWith(`#`)?e:`#${e}`;y(n)&&t(n)}function h(){y(a.startsWith(`#`)?a:`#${a}`)||o(e)}return n?m(s,{value:a,onChange:e=>p(e),onBlur:h}):m(`input`,{type:`text`,value:a,onChange:e=>p(e.target.value),onBlur:h,className:f(l.hexInput,r),style:i,spellCheck:!1})}function E({hue:e,sat:r,val:i,alpha:a,onHueChange:o,onSVChange:s,onAlphaChange:c,showInput:d=!0,showAlpha:y=!1,labels:S,classNames:E,styles:D}){let O=u(null);function k(e){let t=O.current.getBoundingClientRect(),n=Math.max(0,Math.min(1,(e.clientX-t.left)/t.width)),r=Math.max(0,Math.min(1,(e.clientY-t.top)/t.height));return{s:n*100,v:(1-r)*100}}function A(e){let t=e.shiftKey?10:1,n=r,a=i;switch(e.key){case`ArrowLeft`:n-=t;break;case`ArrowRight`:n+=t;break;case`ArrowUp`:a+=t;break;case`ArrowDown`:a-=t;break;case`Home`:n=0;break;case`End`:n=100;break;case`PageUp`:a=100;break;case`PageDown`:a=0;break;default:return}e.preventDefault(),s(v(n),v(a))}function j(e){e.currentTarget.setPointerCapture(e.pointerId);let{s:t,v:n}=k(e);s(t,n);let r=e=>{let{s:t,v:n}=k(e);s(t,n)},i=()=>{window.removeEventListener(`pointermove`,r),window.removeEventListener(`pointerup`,i)};window.addEventListener(`pointermove`,r),window.addEventListener(`pointerup`,i)}function M(e){let{hex6:t,alpha:n}=b(e),{h:r,s:i,v:a}=C(t);o(r),s(i,a),y&&c(n)}let N=w(e,r,i),P=y?x(N,a,!0):N;return h(`div`,{className:f(l.panel,E?.panel),style:D?.panel,children:[h(`div`,{ref:O,role:`slider`,tabIndex:0,"aria-label":S.saturationAndBrightness,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(r),"aria-valuetext":S.saturationAndBrightnessValue(Math.round(r),Math.round(i)),className:f(l.gradientArea,E?.gradient),style:{"--hue":e,...D?.gradient},onPointerDown:j,onKeyDown:A,children:[m(`div`,{className:l.gradientOverlay}),m(`div`,{className:l.cursor,style:{left:`${r}%`,top:`${100-i}%`}})]}),m(`input`,{type:`range`,min:0,max:359,value:Math.round(e),onChange:e=>o(Number(e.target.value)),className:f(l.hueSlider,E?.hueSlider),style:D?.hueSlider}),y&&m(`input`,{type:`range`,min:0,max:100,value:Math.round(a),onChange:e=>c(Number(e.target.value)),className:f(l.alphaSlider,E?.alphaSlider),style:{"--alpha-color":N,...D?.alphaSlider}}),(d||g)&&h(`div`,{className:l.hexRow,children:[d&&m(T,{hex:P,onChange:M,className:E?.hexInput,style:D?.hexInput}),g&&m(n,{icon:p,styleType:t.Outlined,className:f(l.eyeDropperButton,E?.eyeDropper),style:D?.eyeDropper,onClick:async()=>{let e=await _();e&&M(e)},"aria-label":S.pickFromScreen})]})]})}var D=`#3b82f6`,O={pickFromScreen:`Pick color from screen`,saturationAndBrightness:`Saturation and brightness`,saturationAndBrightnessValue:(e,t)=>`${e}% saturation, ${t}% brightness`};function k({className:t,value:n=D,onChange:s,showInput:p=!1,showAlpha:g=!1,inline:_=!1,labels:v,style:y,classNames:k,styles:A,...j}){let M=e(`ColorPicker`,v,O),[N,P]=d(!1),{hex6:F,alpha:I}=b(c(n)??D),L=C(F),[R,z]=d({h:L.h,s:L.s,v:L.v,a:I}),B=u(R),[V,H]=d(n);if(n!==V){H(n);let{hex6:e,alpha:t}=b(c(n)??D);if(e!==w(R.h,R.s,R.v)||t!==R.a){let n=C(e);z({h:n.h,s:n.s,v:n.v,a:t})}}let{h:U,s:W,v:G,a:K}=R;function q(e,t,n,r){s?.(x(w(e,t,n),r,g))}function J(e){B.current.h=e,z(t=>({...t,h:e})),q(e,B.current.s,B.current.v,B.current.a)}function Y(e,t){B.current.s=e,B.current.v=t,z(n=>({...n,s:e,v:t})),q(B.current.h,e,t,B.current.a)}function X(e){B.current.a=e,z(t=>({...t,a:e})),q(B.current.h,B.current.s,B.current.v,e)}let Z=w(U,W,G),ee=g?S(Z,K):Z,Q=x(Z,K,g),$={hue:U,sat:W,val:G,alpha:K,onHueChange:J,onSVChange:Y,onAlphaChange:X,showAlpha:g,labels:M,classNames:k,styles:A};return _?m(`div`,{...j,className:f(l.colorPicker,t,k?.root),style:{...y,...A?.root},children:m(E,{...$,showInput:p})}):h(`div`,{...j,className:f(l.colorPicker,t),children:[m(o,{isOpen:N,onOpenChange:P,placement:a.Bottom,align:i.Start,constrainWidth:!1,content:m(E,{...$}),children:h(r,{role:`button`,tabIndex:0,"aria-haspopup":`dialog`,"aria-expanded":N,className:f(l.swatch,k?.swatch),style:A?.swatch,children:[m(`div`,{className:l.swatchFill,style:{background:ee}}),m(`span`,{className:l.swatchHex,children:Q})]})}),p&&m(T,{hex:Q,onChange:e=>s?.(e),useInputComponent:!0})]})}export{k as default};
 //# sourceMappingURL=colorPicker.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"colorPicker.mjs","names":[],"sources":["../../../../package/common/colorPicker/colorPicker.tsx"],"sourcesContent":["import { useState, useRef, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faEyeDropper } from '@fortawesome/free-solid-svg-icons';\n\nimport InteractableDiv from 'components/common/interactableDiv';\nimport Popover from 'components/common/popover';\nimport Input from 'components/common/input';\nimport { PopoverAlign, PopoverPlacement } from 'components/common/popover/popover.types';\nimport type { ColorPickerLabels, ColorPickerProps, ColorPickerSlots } from './colorPicker.types';\nimport type { SlotClassNames, SlotStyles } from '../types/slots.types';\nimport { useLabels } from '../configProvider';\n// Aliased: `hsvToHex` has a local `toHex` that formats one channel byte, which is a\n// different job from normalising a whole CSS colour.\nimport { toHex as cssToHex } from './toHex';\n\nimport styles from './colorPicker.module.pcss';\n\ninterface EyeDropperConstructor {\n  new (): { open: (options?: { signal?: AbortSignal }) => Promise<{ sRGBHex: string }> };\n}\n\nconst eyeDropperSupported = typeof window !== 'undefined' && 'EyeDropper' in window;\n\nasync function pickColorFromScreen(): Promise<string | null> {\n  const EyeDropperCtor = (window as unknown as { EyeDropper?: EyeDropperConstructor }).EyeDropper;\n  if (!EyeDropperCtor) return null;\n  try {\n    const result = await new EyeDropperCtor().open();\n    return result.sRGBHex;\n  } catch {\n    return null; // user cancelled or picker failed\n  }\n}\n\n// ── Color utilities ──────────────────────────────────────────────────────────\n\nfunction clampPercent(n: number): number {\n  return Math.max(0, Math.min(100, n));\n}\n\nfunction isValidHex(s: string): boolean {\n  return /^#[0-9a-fA-F]{6}$/.test(s) || /^#[0-9a-fA-F]{8}$/.test(s);\n}\n\n/** Split any valid hex into its 6-digit base and 0-100 alpha. */\nfunction parseHex(hex: string): { hex6: string; alpha: number } {\n  if (/^#[0-9a-fA-F]{8}$/.test(hex)) {\n    return {\n      hex6: hex.slice(0, 7),\n      alpha: (parseInt(hex.slice(7, 9), 16) / 255) * 100,\n    };\n  }\n  return { hex6: hex.slice(0, 7), alpha: 100 };\n}\n\n/** Combine a 6-digit hex + 0-100 alpha into the right output format.\n *  Full opacity (alpha === 100) is omitted — 6-digit hex implies opaque. */\nfunction buildValue(hex6: string, alpha: number, showAlpha: boolean): string {\n  if (!showAlpha || alpha >= 100) return hex6;\n  const a = Math.round((alpha / 100) * 255)\n    .toString(16)\n    .padStart(2, '0');\n  return `${hex6}${a}`;\n}\n\nfunction hexToRgba(hex6: string, alpha: number): string {\n  const r = parseInt(hex6.slice(1, 3), 16);\n  const g = parseInt(hex6.slice(3, 5), 16);\n  const b = parseInt(hex6.slice(5, 7), 16);\n  return `rgba(${r}, ${g}, ${b}, ${alpha / 100})`;\n}\n\nfunction hexToHsv(hex6: string): { h: number; s: number; v: number } {\n  const r = parseInt(hex6.slice(1, 3), 16) / 255;\n  const g = parseInt(hex6.slice(3, 5), 16) / 255;\n  const b = parseInt(hex6.slice(5, 7), 16) / 255;\n\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  const delta = max - min;\n\n  let h = 0;\n  if (delta !== 0) {\n    if (max === r) h = ((g - b) / delta) % 6;\n    else if (max === g) h = (b - r) / delta + 2;\n    else h = (r - g) / delta + 4;\n    h *= 60;\n    if (h < 0) h += 360;\n  }\n\n  // Deliberately unrounded: hsvToHex rounds once, at the byte. Rounding here too costs up to a\n  // unit per channel, so a value handed in would come back out changed (#3b82f6 -> #3b82f5).\n  const s = max === 0 ? 0 : (delta / max) * 100;\n  const v = max * 100;\n\n  return { h, s, v };\n}\n\nfunction hsvToHex(h: number, s: number, v: number): string {\n  const sv = s / 100;\n  const vv = v / 100;\n  const c = vv * sv;\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n  const m = vv - c;\n\n  let r = 0,\n    g = 0,\n    b = 0;\n  if (h < 60) {\n    r = c;\n    g = x;\n    b = 0;\n  } else if (h < 120) {\n    r = x;\n    g = c;\n    b = 0;\n  } else if (h < 180) {\n    r = 0;\n    g = c;\n    b = x;\n  } else if (h < 240) {\n    r = 0;\n    g = x;\n    b = c;\n  } else if (h < 300) {\n    r = x;\n    g = 0;\n    b = c;\n  } else {\n    r = c;\n    g = 0;\n    b = x;\n  }\n\n  const toHex = (n: number) =>\n    Math.round((n + m) * 255)\n      .toString(16)\n      .padStart(2, '0');\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\n// ── HexInput ─────────────────────────────────────────────────────────────────\n\ninterface HexInputProps {\n  className?: string;\n  style?: React.CSSProperties;\n  hex: string;\n  onChange: (hex: string) => void;\n  useInputComponent?: boolean;\n}\n\nfunction HexInput({ hex, onChange, useInputComponent = false, className, style }: HexInputProps): ReactElement {\n  const [draft, setDraft] = useState(hex);\n\n  const [prevHex, setPrevHex] = useState(hex);\n  if (hex !== prevHex) {\n    setPrevHex(hex);\n    setDraft(hex);\n  }\n\n  function handleChange(raw: string) {\n    setDraft(raw);\n    const normalized = raw.startsWith('#') ? raw : `#${raw}`;\n    if (isValidHex(normalized)) onChange(normalized);\n  }\n\n  function handleBlur() {\n    const normalized = draft.startsWith('#') ? draft : `#${draft}`;\n    if (!isValidHex(normalized)) setDraft(hex);\n  }\n\n  if (useInputComponent) {\n    return <Input value={draft} onChange={(value: string) => handleChange(value)} onBlur={handleBlur} />;\n  }\n\n  return (\n    <input\n      type='text'\n      value={draft}\n      onChange={(e) => handleChange(e.target.value)}\n      onBlur={handleBlur}\n      className={cx(styles.hexInput, className)}\n      style={style}\n      spellCheck={false}\n    />\n  );\n}\n\n// ── Picker panel ─────────────────────────────────────────────────────────────\n\ninterface PickerPanelProps {\n  hue: number;\n  sat: number;\n  val: number;\n  alpha: number;\n  onHueChange: (h: number) => void;\n  onSVChange: (s: number, v: number) => void;\n  onAlphaChange: (a: number) => void;\n  showInput?: boolean;\n  showAlpha?: boolean;\n  labels: Required<ColorPickerLabels>;\n  classNames?: SlotClassNames<ColorPickerSlots>;\n  styles?: SlotStyles<ColorPickerSlots>;\n}\n\nfunction PickerPanel({\n  hue,\n  sat,\n  val,\n  alpha,\n  onHueChange,\n  onSVChange,\n  onAlphaChange,\n  showInput = true,\n  showAlpha = false,\n  labels,\n  classNames,\n  styles: slotStyles,\n}: PickerPanelProps): ReactElement {\n  const gradientRef = useRef<HTMLDivElement>(null);\n\n  function getSVFromEvent(e: { clientX: number; clientY: number }): { s: number; v: number } {\n    const rect = gradientRef.current!.getBoundingClientRect();\n    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n    const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));\n    return { s: x * 100, v: (1 - y) * 100 };\n  }\n\n  function onGradientKeyDown(e: React.KeyboardEvent) {\n    const step = e.shiftKey ? 10 : 1;\n    let s = sat;\n    let v = val;\n    switch (e.key) {\n      case 'ArrowLeft':\n        s -= step;\n        break;\n      case 'ArrowRight':\n        s += step;\n        break;\n      case 'ArrowUp':\n        v += step;\n        break;\n      case 'ArrowDown':\n        v -= step;\n        break;\n      case 'Home':\n        s = 0;\n        break;\n      case 'End':\n        s = 100;\n        break;\n      case 'PageUp':\n        v = 100;\n        break;\n      case 'PageDown':\n        v = 0;\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    onSVChange(clampPercent(s), clampPercent(v));\n  }\n\n  // Pointer Events (not mouse events) so dragging works for touch/pen too.\n  function onGradientPointerDown(e: React.PointerEvent) {\n    e.currentTarget.setPointerCapture(e.pointerId);\n    const { s, v } = getSVFromEvent(e);\n    onSVChange(s, v);\n\n    const onMove = (ev: PointerEvent) => {\n      const { s, v } = getSVFromEvent(ev);\n      onSVChange(s, v);\n    };\n    const onUp = () => {\n      window.removeEventListener('pointermove', onMove);\n      window.removeEventListener('pointerup', onUp);\n    };\n    window.addEventListener('pointermove', onMove);\n    window.addEventListener('pointerup', onUp);\n  }\n\n  function onHexChange(normalized: string) {\n    const { hex6, alpha: parsedAlpha } = parseHex(normalized);\n    const { h, s, v } = hexToHsv(hex6);\n    onHueChange(h);\n    onSVChange(s, v);\n    if (showAlpha) onAlphaChange(parsedAlpha);\n  }\n\n  const hex6 = hsvToHex(hue, sat, val);\n  const hexInputValue = showAlpha ? buildValue(hex6, alpha, true) : hex6;\n\n  return (\n    <div className={cx(styles.panel, classNames?.panel)} style={slotStyles?.panel}>\n      {/* Two axes on one control, which ARIA has no role for. `slider` on the\n          horizontal axis is the closest fit, with both numbers in `aria-valuetext`. */}\n      <div\n        ref={gradientRef}\n        role='slider'\n        tabIndex={0}\n        aria-label={labels.saturationAndBrightness}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-valuenow={Math.round(sat)}\n        aria-valuetext={labels.saturationAndBrightnessValue(Math.round(sat), Math.round(val))}\n        className={cx(styles.gradientArea, classNames?.gradient)}\n        style={{ '--hue': hue, ...slotStyles?.gradient } as React.CSSProperties}\n        onPointerDown={onGradientPointerDown}\n        onKeyDown={onGradientKeyDown}\n      >\n        <div className={styles.gradientOverlay} />\n        <div className={styles.cursor} style={{ left: `${sat}%`, top: `${100 - val}%` }} />\n      </div>\n\n      <input\n        type='range'\n        min={0}\n        max={359}\n        value={Math.round(hue)}\n        onChange={(e) => onHueChange(Number(e.target.value))}\n        className={cx(styles.hueSlider, classNames?.hueSlider)}\n        style={slotStyles?.hueSlider}\n      />\n\n      {showAlpha && (\n        <input\n          type='range'\n          min={0}\n          max={100}\n          value={Math.round(alpha)}\n          onChange={(e) => onAlphaChange(Number(e.target.value))}\n          className={cx(styles.alphaSlider, classNames?.alphaSlider)}\n          style={{ '--alpha-color': hex6, ...slotStyles?.alphaSlider } as React.CSSProperties}\n        />\n      )}\n\n      {(showInput || eyeDropperSupported) && (\n        <div className={styles.hexRow}>\n          {showInput && (\n            <HexInput\n              hex={hexInputValue}\n              onChange={onHexChange}\n              className={classNames?.hexInput}\n              style={slotStyles?.hexInput}\n            />\n          )}\n          {eyeDropperSupported && (\n            <button\n              type='button'\n              className={cx(styles.eyeDropperButton, classNames?.eyeDropper)}\n              style={slotStyles?.eyeDropper}\n              onClick={async () => {\n                const hex = await pickColorFromScreen();\n                if (hex) onHexChange(hex);\n              }}\n              aria-label={labels.pickFromScreen}\n            >\n              <FontAwesomeIcon icon={faEyeDropper} />\n            </button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ── ColorPicker ───────────────────────────────────────────────────────────────\n\nconst DEFAULT_COLOR = '#3b82f6';\n\nconst DEFAULT_LABELS: Required<ColorPickerLabels> = {\n  pickFromScreen: 'Pick color from screen',\n  saturationAndBrightness: 'Saturation and brightness',\n  saturationAndBrightnessValue: (saturation, brightness) => `${saturation}% saturation, ${brightness}% brightness`,\n};\n\nfunction ColorPicker({\n  className,\n  value = DEFAULT_COLOR,\n  onChange,\n  showInput = false,\n  showAlpha = false,\n  inline = false,\n  labels,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: ColorPickerProps): ReactElement {\n  const text = useLabels('ColorPicker', labels, DEFAULT_LABELS);\n  const [isOpen, setIsOpen] = useState(false);\n\n  const initSafe = cssToHex(value) ?? DEFAULT_COLOR;\n  const { hex6: initHex6, alpha: initAlpha } = parseHex(initSafe);\n  const initHsv = hexToHsv(initHex6);\n\n  // Single state object so hue survives when saturation/value hit 0\n  // (hexToHsv of any grey returns h=0, which would corrupt hue if derived from props).\n  const [hsva, setHsva] = useState({ h: initHsv.h, s: initHsv.s, v: initHsv.v, a: initAlpha });\n\n  // Ref mirrors state so drag callbacks never read stale closure values.\n  const cur = useRef(hsva);\n\n  // Sync from external prop changes: \"derive state during render\" pattern\n  // avoids setState-in-effect. We compare the incoming hex against what our\n  // current state produces — if they match, the change came from us and we skip.\n  const [prevValue, setPrevValue] = useState(value);\n  if (value !== prevValue) {\n    setPrevValue(value);\n    const safe = cssToHex(value) ?? DEFAULT_COLOR;\n    const { hex6: incomingHex6, alpha: incomingA } = parseHex(safe);\n    const currentHex6 = hsvToHex(hsva.h, hsva.s, hsva.v);\n    if (incomingHex6 !== currentHex6 || incomingA !== hsva.a) {\n      const hsv = hexToHsv(incomingHex6);\n      const next = { h: hsv.h, s: hsv.s, v: hsv.v, a: incomingA };\n      setHsva(next);\n    }\n  }\n\n  const { h: hue, s: sat, v: val, a: alpha } = hsva;\n\n  function emit(h: number, s: number, v: number, a: number) {\n    onChange?.(buildValue(hsvToHex(h, s, v), a, showAlpha));\n  }\n\n  function handleHueChange(h: number) {\n    cur.current.h = h;\n    setHsva((prev) => ({ ...prev, h }));\n    emit(h, cur.current.s, cur.current.v, cur.current.a);\n  }\n\n  function handleSVChange(s: number, v: number) {\n    cur.current.s = s;\n    cur.current.v = v;\n    setHsva((prev) => ({ ...prev, s, v }));\n    emit(cur.current.h, s, v, cur.current.a);\n  }\n\n  function handleAlphaChange(a: number) {\n    cur.current.a = a;\n    setHsva((prev) => ({ ...prev, a }));\n    emit(cur.current.h, cur.current.s, cur.current.v, a);\n  }\n\n  const hex6 = hsvToHex(hue, sat, val);\n  const swatchBackground = showAlpha ? hexToRgba(hex6, alpha) : hex6;\n  const displayValue = buildValue(hex6, alpha, showAlpha);\n\n  const pickerPanelProps: PickerPanelProps = {\n    hue,\n    sat,\n    val,\n    alpha,\n    onHueChange: handleHueChange,\n    onSVChange: handleSVChange,\n    onAlphaChange: handleAlphaChange,\n    showAlpha,\n    labels: text,\n    classNames,\n    styles: slotStyles,\n  };\n\n  if (inline) {\n    return (\n      <div\n        {...rest}\n        className={cx(styles.colorPicker, className, classNames?.root)}\n        style={{ ...style, ...slotStyles?.root }}\n      >\n        <PickerPanel {...pickerPanelProps} showInput={showInput} />\n      </div>\n    );\n  }\n\n  return (\n    <div {...rest} className={cx(styles.colorPicker, className)}>\n      <Popover\n        isOpen={isOpen}\n        onOpenChange={setIsOpen}\n        placement={PopoverPlacement.Bottom}\n        align={PopoverAlign.Start}\n        // The panel sets its own 224px width.\n        constrainWidth={false}\n        content={<PickerPanel {...pickerPanelProps} />}\n      >\n        {/* The click handler is on Popover's wrapper, so `InteractableDiv` would\n            give the swatch neither a tab stop nor a role of its own. */}\n        <InteractableDiv\n          role='button'\n          tabIndex={0}\n          aria-haspopup='dialog'\n          aria-expanded={isOpen}\n          className={cx(styles.swatch, classNames?.swatch)}\n          style={slotStyles?.swatch}\n        >\n          <div className={styles.swatchFill} style={{ background: swatchBackground }} />\n          <span className={styles.swatchHex}>{displayValue}</span>\n        </InteractableDiv>\n      </Popover>\n\n      {showInput && <HexInput hex={displayValue} onChange={(v) => onChange?.(v)} useInputComponent />}\n    </div>\n  );\n}\n\nexport default ColorPicker;\n"],"mappings":"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"}
+{"version":3,"file":"colorPicker.mjs","names":[],"sources":["../../../../package/common/colorPicker/colorPicker.tsx"],"sourcesContent":["import { useState, useRef, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport { faEyeDropper } from '@fortawesome/free-solid-svg-icons';\n\nimport InteractableDiv from 'components/common/interactableDiv';\nimport Popover from 'components/common/popover';\nimport Input from 'components/common/input';\nimport { PopoverAlign, PopoverPlacement } from 'components/common/popover/popover.types';\nimport type { ColorPickerLabels, ColorPickerProps, ColorPickerSlots } from './colorPicker.types';\nimport type { SlotClassNames, SlotStyles } from '../types/slots.types';\nimport { useLabels } from '../configProvider';\n// Aliased: `hsvToHex` has a local `toHex` that formats one channel byte, which is a\n// different job from normalising a whole CSS colour.\nimport { toHex as cssToHex } from './toHex';\n\nimport styles from './colorPicker.module.pcss';\nimport ActionIcon from 'components/common/actionIcon';\nimport { ButtonStyleType } from 'components/common/button/button.types';\n\ninterface EyeDropperConstructor {\n  new (): { open: (options?: { signal?: AbortSignal }) => Promise<{ sRGBHex: string }> };\n}\n\nconst eyeDropperSupported = typeof window !== 'undefined' && 'EyeDropper' in window;\n\nasync function pickColorFromScreen(): Promise<string | null> {\n  const EyeDropperCtor = (window as unknown as { EyeDropper?: EyeDropperConstructor }).EyeDropper;\n  if (!EyeDropperCtor) return null;\n  try {\n    const result = await new EyeDropperCtor().open();\n    return result.sRGBHex;\n  } catch {\n    return null; // user cancelled or picker failed\n  }\n}\n\n// ── Color utilities ──────────────────────────────────────────────────────────\n\nfunction clampPercent(n: number): number {\n  return Math.max(0, Math.min(100, n));\n}\n\nfunction isValidHex(s: string): boolean {\n  return /^#[0-9a-fA-F]{6}$/.test(s) || /^#[0-9a-fA-F]{8}$/.test(s);\n}\n\n/** Split any valid hex into its 6-digit base and 0-100 alpha. */\nfunction parseHex(hex: string): { hex6: string; alpha: number } {\n  if (/^#[0-9a-fA-F]{8}$/.test(hex)) {\n    return {\n      hex6: hex.slice(0, 7),\n      alpha: (parseInt(hex.slice(7, 9), 16) / 255) * 100,\n    };\n  }\n  return { hex6: hex.slice(0, 7), alpha: 100 };\n}\n\n/** Combine a 6-digit hex + 0-100 alpha into the right output format.\n *  Full opacity (alpha === 100) is omitted — 6-digit hex implies opaque. */\nfunction buildValue(hex6: string, alpha: number, showAlpha: boolean): string {\n  if (!showAlpha || alpha >= 100) return hex6;\n  const a = Math.round((alpha / 100) * 255)\n    .toString(16)\n    .padStart(2, '0');\n  return `${hex6}${a}`;\n}\n\nfunction hexToRgba(hex6: string, alpha: number): string {\n  const r = parseInt(hex6.slice(1, 3), 16);\n  const g = parseInt(hex6.slice(3, 5), 16);\n  const b = parseInt(hex6.slice(5, 7), 16);\n  return `rgba(${r}, ${g}, ${b}, ${alpha / 100})`;\n}\n\nfunction hexToHsv(hex6: string): { h: number; s: number; v: number } {\n  const r = parseInt(hex6.slice(1, 3), 16) / 255;\n  const g = parseInt(hex6.slice(3, 5), 16) / 255;\n  const b = parseInt(hex6.slice(5, 7), 16) / 255;\n\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  const delta = max - min;\n\n  let h = 0;\n  if (delta !== 0) {\n    if (max === r) h = ((g - b) / delta) % 6;\n    else if (max === g) h = (b - r) / delta + 2;\n    else h = (r - g) / delta + 4;\n    h *= 60;\n    if (h < 0) h += 360;\n  }\n\n  // Deliberately unrounded: hsvToHex rounds once, at the byte. Rounding here too costs up to a\n  // unit per channel, so a value handed in would come back out changed (#3b82f6 -> #3b82f5).\n  const s = max === 0 ? 0 : (delta / max) * 100;\n  const v = max * 100;\n\n  return { h, s, v };\n}\n\nfunction hsvToHex(h: number, s: number, v: number): string {\n  const sv = s / 100;\n  const vv = v / 100;\n  const c = vv * sv;\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n  const m = vv - c;\n\n  let r = 0,\n    g = 0,\n    b = 0;\n  if (h < 60) {\n    r = c;\n    g = x;\n    b = 0;\n  } else if (h < 120) {\n    r = x;\n    g = c;\n    b = 0;\n  } else if (h < 180) {\n    r = 0;\n    g = c;\n    b = x;\n  } else if (h < 240) {\n    r = 0;\n    g = x;\n    b = c;\n  } else if (h < 300) {\n    r = x;\n    g = 0;\n    b = c;\n  } else {\n    r = c;\n    g = 0;\n    b = x;\n  }\n\n  const toHex = (n: number) =>\n    Math.round((n + m) * 255)\n      .toString(16)\n      .padStart(2, '0');\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\n// ── HexInput ─────────────────────────────────────────────────────────────────\n\ninterface HexInputProps {\n  className?: string;\n  style?: React.CSSProperties;\n  hex: string;\n  onChange: (hex: string) => void;\n  useInputComponent?: boolean;\n}\n\nfunction HexInput({ hex, onChange, useInputComponent = false, className, style }: HexInputProps): ReactElement {\n  const [draft, setDraft] = useState(hex);\n\n  const [prevHex, setPrevHex] = useState(hex);\n  if (hex !== prevHex) {\n    setPrevHex(hex);\n    setDraft(hex);\n  }\n\n  function handleChange(raw: string) {\n    setDraft(raw);\n    const normalized = raw.startsWith('#') ? raw : `#${raw}`;\n    if (isValidHex(normalized)) onChange(normalized);\n  }\n\n  function handleBlur() {\n    const normalized = draft.startsWith('#') ? draft : `#${draft}`;\n    if (!isValidHex(normalized)) setDraft(hex);\n  }\n\n  if (useInputComponent) {\n    return <Input value={draft} onChange={(value: string) => handleChange(value)} onBlur={handleBlur} />;\n  }\n\n  return (\n    <input\n      type='text'\n      value={draft}\n      onChange={(e) => handleChange(e.target.value)}\n      onBlur={handleBlur}\n      className={cx(styles.hexInput, className)}\n      style={style}\n      spellCheck={false}\n    />\n  );\n}\n\n// ── Picker panel ─────────────────────────────────────────────────────────────\n\ninterface PickerPanelProps {\n  hue: number;\n  sat: number;\n  val: number;\n  alpha: number;\n  onHueChange: (h: number) => void;\n  onSVChange: (s: number, v: number) => void;\n  onAlphaChange: (a: number) => void;\n  showInput?: boolean;\n  showAlpha?: boolean;\n  labels: Required<ColorPickerLabels>;\n  classNames?: SlotClassNames<ColorPickerSlots>;\n  styles?: SlotStyles<ColorPickerSlots>;\n}\n\nfunction PickerPanel({\n  hue,\n  sat,\n  val,\n  alpha,\n  onHueChange,\n  onSVChange,\n  onAlphaChange,\n  showInput = true,\n  showAlpha = false,\n  labels,\n  classNames,\n  styles: slotStyles,\n}: PickerPanelProps): ReactElement {\n  const gradientRef = useRef<HTMLDivElement>(null);\n\n  function getSVFromEvent(e: { clientX: number; clientY: number }): { s: number; v: number } {\n    const rect = gradientRef.current!.getBoundingClientRect();\n    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n    const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));\n    return { s: x * 100, v: (1 - y) * 100 };\n  }\n\n  function onGradientKeyDown(e: React.KeyboardEvent) {\n    const step = e.shiftKey ? 10 : 1;\n    let s = sat;\n    let v = val;\n    switch (e.key) {\n      case 'ArrowLeft':\n        s -= step;\n        break;\n      case 'ArrowRight':\n        s += step;\n        break;\n      case 'ArrowUp':\n        v += step;\n        break;\n      case 'ArrowDown':\n        v -= step;\n        break;\n      case 'Home':\n        s = 0;\n        break;\n      case 'End':\n        s = 100;\n        break;\n      case 'PageUp':\n        v = 100;\n        break;\n      case 'PageDown':\n        v = 0;\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    onSVChange(clampPercent(s), clampPercent(v));\n  }\n\n  // Pointer Events (not mouse events) so dragging works for touch/pen too.\n  function onGradientPointerDown(e: React.PointerEvent) {\n    e.currentTarget.setPointerCapture(e.pointerId);\n    const { s, v } = getSVFromEvent(e);\n    onSVChange(s, v);\n\n    const onMove = (ev: PointerEvent) => {\n      const { s, v } = getSVFromEvent(ev);\n      onSVChange(s, v);\n    };\n    const onUp = () => {\n      window.removeEventListener('pointermove', onMove);\n      window.removeEventListener('pointerup', onUp);\n    };\n    window.addEventListener('pointermove', onMove);\n    window.addEventListener('pointerup', onUp);\n  }\n\n  function onHexChange(normalized: string) {\n    const { hex6, alpha: parsedAlpha } = parseHex(normalized);\n    const { h, s, v } = hexToHsv(hex6);\n    onHueChange(h);\n    onSVChange(s, v);\n    if (showAlpha) onAlphaChange(parsedAlpha);\n  }\n\n  const hex6 = hsvToHex(hue, sat, val);\n  const hexInputValue = showAlpha ? buildValue(hex6, alpha, true) : hex6;\n\n  return (\n    <div className={cx(styles.panel, classNames?.panel)} style={slotStyles?.panel}>\n      {/* Two axes on one control, which ARIA has no role for. `slider` on the\n          horizontal axis is the closest fit, with both numbers in `aria-valuetext`. */}\n      <div\n        ref={gradientRef}\n        role='slider'\n        tabIndex={0}\n        aria-label={labels.saturationAndBrightness}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-valuenow={Math.round(sat)}\n        aria-valuetext={labels.saturationAndBrightnessValue(Math.round(sat), Math.round(val))}\n        className={cx(styles.gradientArea, classNames?.gradient)}\n        style={{ '--hue': hue, ...slotStyles?.gradient } as React.CSSProperties}\n        onPointerDown={onGradientPointerDown}\n        onKeyDown={onGradientKeyDown}\n      >\n        <div className={styles.gradientOverlay} />\n        <div className={styles.cursor} style={{ left: `${sat}%`, top: `${100 - val}%` }} />\n      </div>\n\n      <input\n        type='range'\n        min={0}\n        max={359}\n        value={Math.round(hue)}\n        onChange={(e) => onHueChange(Number(e.target.value))}\n        className={cx(styles.hueSlider, classNames?.hueSlider)}\n        style={slotStyles?.hueSlider}\n      />\n\n      {showAlpha && (\n        <input\n          type='range'\n          min={0}\n          max={100}\n          value={Math.round(alpha)}\n          onChange={(e) => onAlphaChange(Number(e.target.value))}\n          className={cx(styles.alphaSlider, classNames?.alphaSlider)}\n          style={{ '--alpha-color': hex6, ...slotStyles?.alphaSlider } as React.CSSProperties}\n        />\n      )}\n\n      {(showInput || eyeDropperSupported) && (\n        <div className={styles.hexRow}>\n          {showInput && (\n            <HexInput\n              hex={hexInputValue}\n              onChange={onHexChange}\n              className={classNames?.hexInput}\n              style={slotStyles?.hexInput}\n            />\n          )}\n          {eyeDropperSupported && (\n            <ActionIcon\n              icon={faEyeDropper}\n              styleType={ButtonStyleType.Outlined}\n              className={cx(styles.eyeDropperButton, classNames?.eyeDropper)}\n              style={slotStyles?.eyeDropper}\n              onClick={async () => {\n                const hex = await pickColorFromScreen();\n                if (hex) onHexChange(hex);\n              }}\n              aria-label={labels.pickFromScreen}\n            />\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ── ColorPicker ───────────────────────────────────────────────────────────────\n\nconst DEFAULT_COLOR = '#3b82f6';\n\nconst DEFAULT_LABELS: Required<ColorPickerLabels> = {\n  pickFromScreen: 'Pick color from screen',\n  saturationAndBrightness: 'Saturation and brightness',\n  saturationAndBrightnessValue: (saturation, brightness) => `${saturation}% saturation, ${brightness}% brightness`,\n};\n\nfunction ColorPicker({\n  className,\n  value = DEFAULT_COLOR,\n  onChange,\n  showInput = false,\n  showAlpha = false,\n  inline = false,\n  labels,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: ColorPickerProps): ReactElement {\n  const text = useLabels('ColorPicker', labels, DEFAULT_LABELS);\n  const [isOpen, setIsOpen] = useState(false);\n\n  const initSafe = cssToHex(value) ?? DEFAULT_COLOR;\n  const { hex6: initHex6, alpha: initAlpha } = parseHex(initSafe);\n  const initHsv = hexToHsv(initHex6);\n\n  // Single state object so hue survives when saturation/value hit 0\n  // (hexToHsv of any grey returns h=0, which would corrupt hue if derived from props).\n  const [hsva, setHsva] = useState({ h: initHsv.h, s: initHsv.s, v: initHsv.v, a: initAlpha });\n\n  // Ref mirrors state so drag callbacks never read stale closure values.\n  const cur = useRef(hsva);\n\n  // Sync from external prop changes: \"derive state during render\" pattern\n  // avoids setState-in-effect. We compare the incoming hex against what our\n  // current state produces — if they match, the change came from us and we skip.\n  const [prevValue, setPrevValue] = useState(value);\n  if (value !== prevValue) {\n    setPrevValue(value);\n    const safe = cssToHex(value) ?? DEFAULT_COLOR;\n    const { hex6: incomingHex6, alpha: incomingA } = parseHex(safe);\n    const currentHex6 = hsvToHex(hsva.h, hsva.s, hsva.v);\n    if (incomingHex6 !== currentHex6 || incomingA !== hsva.a) {\n      const hsv = hexToHsv(incomingHex6);\n      const next = { h: hsv.h, s: hsv.s, v: hsv.v, a: incomingA };\n      setHsva(next);\n    }\n  }\n\n  const { h: hue, s: sat, v: val, a: alpha } = hsva;\n\n  function emit(h: number, s: number, v: number, a: number) {\n    onChange?.(buildValue(hsvToHex(h, s, v), a, showAlpha));\n  }\n\n  function handleHueChange(h: number) {\n    cur.current.h = h;\n    setHsva((prev) => ({ ...prev, h }));\n    emit(h, cur.current.s, cur.current.v, cur.current.a);\n  }\n\n  function handleSVChange(s: number, v: number) {\n    cur.current.s = s;\n    cur.current.v = v;\n    setHsva((prev) => ({ ...prev, s, v }));\n    emit(cur.current.h, s, v, cur.current.a);\n  }\n\n  function handleAlphaChange(a: number) {\n    cur.current.a = a;\n    setHsva((prev) => ({ ...prev, a }));\n    emit(cur.current.h, cur.current.s, cur.current.v, a);\n  }\n\n  const hex6 = hsvToHex(hue, sat, val);\n  const swatchBackground = showAlpha ? hexToRgba(hex6, alpha) : hex6;\n  const displayValue = buildValue(hex6, alpha, showAlpha);\n\n  const pickerPanelProps: PickerPanelProps = {\n    hue,\n    sat,\n    val,\n    alpha,\n    onHueChange: handleHueChange,\n    onSVChange: handleSVChange,\n    onAlphaChange: handleAlphaChange,\n    showAlpha,\n    labels: text,\n    classNames,\n    styles: slotStyles,\n  };\n\n  if (inline) {\n    return (\n      <div\n        {...rest}\n        className={cx(styles.colorPicker, className, classNames?.root)}\n        style={{ ...style, ...slotStyles?.root }}\n      >\n        <PickerPanel {...pickerPanelProps} showInput={showInput} />\n      </div>\n    );\n  }\n\n  return (\n    <div {...rest} className={cx(styles.colorPicker, className)}>\n      <Popover\n        isOpen={isOpen}\n        onOpenChange={setIsOpen}\n        placement={PopoverPlacement.Bottom}\n        align={PopoverAlign.Start}\n        // The panel sets its own 224px width.\n        constrainWidth={false}\n        content={<PickerPanel {...pickerPanelProps} />}\n      >\n        {/* The click handler is on Popover's wrapper, so `InteractableDiv` would\n            give the swatch neither a tab stop nor a role of its own. */}\n        <InteractableDiv\n          role='button'\n          tabIndex={0}\n          aria-haspopup='dialog'\n          aria-expanded={isOpen}\n          className={cx(styles.swatch, classNames?.swatch)}\n          style={slotStyles?.swatch}\n        >\n          <div className={styles.swatchFill} style={{ background: swatchBackground }} />\n          <span className={styles.swatchHex}>{displayValue}</span>\n        </InteractableDiv>\n      </Popover>\n\n      {showInput && <HexInput hex={displayValue} onChange={(v) => onChange?.(v)} useInputComponent />}\n    </div>\n  );\n}\n\nexport default ColorPicker;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"colorPicker.module.mjs","names":[],"sources":["../../../../package/common/colorPicker/colorPicker.module.pcss"],"sourcesContent":[".colorPicker {\n  /* The swatch sits inline beside a label, so it tracks the text. The panel below deliberately\n     does not: its layout is fixed and it holds up fine at a large base font. */\n  --custom-swatch-size: var(--swatch-size, 2em);\n\n  display: flex;\n  align-items: center;\n  gap: 0.5em;\n\n  /* The visible swatch (below) is nested inside a Popover trigger, not this root — see\n     input.module.pcss for why this variable exists: a wrapping ButtonGroup sets --group-radius-*\n     per corner on the position this occupies, and unlike border-radius itself, custom properties\n     inherit through any nesting depth, reaching descendants a plain ancestor selector can't. */\n  --swatch-radius: var(--group-radius-tl, var(--default-border-radius))\n    var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n    var(--group-radius-bl, var(--default-border-radius));\n}\n\n.swatch {\n  width: var(--custom-swatch-size);\n  height: var(--custom-swatch-size);\n  border-radius: var(--swatch-radius);\n  position: relative;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  flex-shrink: 0;\n  box-shadow: 0 0 0 1px rgb(0 0 0 / 15%);\n\n  /* checkerboard so transparency is visible */\n  background-image:\n    linear-gradient(45deg, #bbb 25%, transparent 25%), linear-gradient(-45deg, #bbb 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #bbb 75%), linear-gradient(-45deg, transparent 75%, #bbb 75%);\n  background-size: 0.5em 0.5em;\n  background-position:\n    0 0,\n    0 0.25em,\n    0.25em -0.25em,\n    -0.25em 0;\n\n  /* Deliberately not a theme colour: this is the transparency checkerboard, and alpha can\n     only be judged against a fixed neutral. Theming it would make a swatch read differently\n     in every theme. */\n  background-color: white;\n\n  &:hover {\n    & .swatchHex {\n      opacity: 1;\n    }\n  }\n}\n\n.swatchFill {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n}\n\n.swatchHex {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.5em;\n  font-family: var(--monospace-font, monospace);\n\n  /* White on a fixed scrim, not on the theme: the label sits over the swatch's own colour,\n     which the theme does not control. */\n  background: rgb(0 0 0 / 55%);\n  color: white;\n  border-radius: inherit;\n  opacity: 0;\n  transition: opacity 0.15s;\n  user-select: none;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.panel {\n  padding: 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: 224px;\n}\n\n.gradientArea {\n  width: 200px;\n  height: 160px;\n  position: relative;\n  cursor: crosshair;\n  border-radius: 4px;\n  overflow: hidden;\n  touch-action: none;\n  background: linear-gradient(to right, white, hsl(calc(var(--hue) * 1deg) 100% 50%));\n\n  /* Outside the box: a ring drawn inside would sit on the colours being picked. */\n  &:focus-visible {\n    outline: 2px solid var(--focus-border-color, var(--primary-color));\n    outline-offset: 2px;\n  }\n}\n\n.gradientOverlay {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to bottom, transparent, black);\n}\n\n.cursor {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  border: 2px solid white;\n  box-shadow: 0 0 3px rgb(0 0 0 / 50%);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  z-index: 1;\n}\n\n.hueSlider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 10px;\n  border-radius: var(--default-border-radius);\n  outline: none;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  background: linear-gradient(\n    to right,\n    hsl(0deg 100% 50%),\n    hsl(60deg 100% 50%),\n    hsl(120deg 100% 50%),\n    hsl(180deg 100% 50%),\n    hsl(240deg 100% 50%),\n    hsl(300deg 100% 50%),\n    hsl(360deg 100% 50%)\n  );\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &::-moz-range-thumb {\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  /* The thumb, not the track, which `outline: none` above dropped the default ring\n     from. Two rules rather than one list: an engine that does not know one of these\n     pseudo-elements throws out the whole selector, which is why the thumb rules\n     above are split too. */\n  &:focus-visible::-webkit-slider-thumb {\n    box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 35%, transparent);\n  }\n\n  &:focus-visible::-moz-range-thumb {\n    box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 35%, transparent);\n  }\n}\n\n.alphaSlider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 10px;\n  border-radius: var(--default-border-radius);\n  outline: none;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n\n  /* checkerboard base so transparency is visible under the gradient */\n  background-image:\n    linear-gradient(to right, transparent, var(--alpha-color)), linear-gradient(45deg, #bbb 25%, transparent 25%),\n    linear-gradient(-45deg, #bbb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bbb 75%),\n    linear-gradient(-45deg, transparent 75%, #bbb 75%);\n  background-size:\n    100% 100%,\n    8px 8px,\n    8px 8px,\n    8px 8px,\n    8px 8px;\n  background-position:\n    0 0,\n    0 0,\n    0 4px,\n    4px -4px,\n    -4px 0;\n\n  /* Deliberately not a theme colour: this is the transparency checkerboard, and alpha can\n     only be judged against a fixed neutral. Theming it would make a swatch read differently\n     in every theme. */\n  background-color: white;\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &::-moz-range-thumb {\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  /* The thumb, not the track, which `outline: none` above dropped the default ring\n     from. Two rules rather than one list: an engine that does not know one of these\n     pseudo-elements throws out the whole selector, which is why the thumb rules\n     above are split too. */\n  &:focus-visible::-webkit-slider-thumb {\n    box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 35%, transparent);\n  }\n\n  &:focus-visible::-moz-range-thumb {\n    box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 35%, transparent);\n  }\n}\n\n.hexRow {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.hexInput {\n  width: 100%;\n  padding: 5px 8px;\n  border-radius: var(--default-border-radius);\n  border: 1px solid var(--border-color);\n  background: var(--input-background);\n  color: var(--text-color);\n  font-size: var(--default-font-size);\n  font-family: monospace;\n  box-sizing: border-box;\n  outline: none;\n\n  &:focus {\n    border-color: var(--focus-border-color, var(--primary-color));\n  }\n}\n\n.eyeDropperButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border-radius: var(--default-border-radius);\n  border: 1px solid var(--border-color);\n  background: var(--input-background);\n  color: var(--text-color);\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n\n  &:hover {\n    border-color: var(--primary-color);\n    color: var(--primary-color);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"colorPicker.module.mjs","names":[],"sources":["../../../../package/common/colorPicker/colorPicker.module.pcss"],"sourcesContent":[".colorPicker {\n  /* The swatch sits inline beside a label, so it tracks the text. The panel below deliberately\n     does not: its layout is fixed and it holds up fine at a large base font. */\n  --custom-swatch-size: var(--swatch-size, 2em);\n\n  display: flex;\n  align-items: center;\n  gap: 0.5em;\n\n  /* The visible swatch (below) is nested inside a Popover trigger, not this root — see\n     input.module.pcss for why this variable exists: a wrapping ButtonGroup sets --group-radius-*\n     per corner on the position this occupies, and unlike border-radius itself, custom properties\n     inherit through any nesting depth, reaching descendants a plain ancestor selector can't. */\n  --swatch-radius: var(--group-radius-tl, var(--default-border-radius))\n    var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n    var(--group-radius-bl, var(--default-border-radius));\n}\n\n.swatch {\n  width: var(--custom-swatch-size);\n  height: var(--custom-swatch-size);\n  border-radius: var(--swatch-radius);\n  position: relative;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  flex-shrink: 0;\n  box-shadow: 0 0 0 1px rgb(0 0 0 / 15%);\n\n  /* checkerboard so transparency is visible */\n  background-image:\n    linear-gradient(45deg, #bbb 25%, transparent 25%), linear-gradient(-45deg, #bbb 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #bbb 75%), linear-gradient(-45deg, transparent 75%, #bbb 75%);\n  background-size: 0.5em 0.5em;\n  background-position:\n    0 0,\n    0 0.25em,\n    0.25em -0.25em,\n    -0.25em 0;\n\n  /* Deliberately not a theme colour: this is the transparency checkerboard, and alpha can\n     only be judged against a fixed neutral. Theming it would make a swatch read differently\n     in every theme. */\n  background-color: white;\n\n  &:hover {\n    & .swatchHex {\n      opacity: 1;\n    }\n  }\n}\n\n.swatchFill {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n}\n\n.swatchHex {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.5em;\n  font-family: var(--monospace-font, monospace);\n\n  /* White on a fixed scrim, not on the theme: the label sits over the swatch's own colour,\n     which the theme does not control. */\n  background: rgb(0 0 0 / 55%);\n  color: white;\n  border-radius: inherit;\n  opacity: 0;\n  transition: opacity 0.15s;\n  user-select: none;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.panel {\n  padding: 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: 224px;\n}\n\n.gradientArea {\n  width: 200px;\n  height: 160px;\n  position: relative;\n  cursor: crosshair;\n  border-radius: 4px;\n  overflow: hidden;\n  touch-action: none;\n  background: linear-gradient(to right, white, hsl(calc(var(--hue) * 1deg) 100% 50%));\n\n  /* Outside the box: a ring drawn inside would sit on the colours being picked. */\n  &:focus-visible {\n    outline: 2px solid var(--focus-border-color, var(--primary-color));\n    outline-offset: 2px;\n  }\n}\n\n.gradientOverlay {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to bottom, transparent, black);\n}\n\n.cursor {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  border: 2px solid white;\n  box-shadow: 0 0 3px rgb(0 0 0 / 50%);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  z-index: 1;\n}\n\n.hueSlider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 10px;\n  border-radius: var(--default-border-radius);\n  outline: none;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  background: linear-gradient(\n    to right,\n    hsl(0deg 100% 50%),\n    hsl(60deg 100% 50%),\n    hsl(120deg 100% 50%),\n    hsl(180deg 100% 50%),\n    hsl(240deg 100% 50%),\n    hsl(300deg 100% 50%),\n    hsl(360deg 100% 50%)\n  );\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &::-moz-range-thumb {\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  /* The thumb, not the track, which `outline: none` above dropped the default ring\n     from. Two rules rather than one list: an engine that does not know one of these\n     pseudo-elements throws out the whole selector, which is why the thumb rules\n     above are split too. */\n  &:focus-visible::-webkit-slider-thumb {\n    box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 35%, transparent);\n  }\n\n  &:focus-visible::-moz-range-thumb {\n    box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 35%, transparent);\n  }\n}\n\n.alphaSlider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 10px;\n  border-radius: var(--default-border-radius);\n  outline: none;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n\n  /* checkerboard base so transparency is visible under the gradient */\n  background-image:\n    linear-gradient(to right, transparent, var(--alpha-color)), linear-gradient(45deg, #bbb 25%, transparent 25%),\n    linear-gradient(-45deg, #bbb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bbb 75%),\n    linear-gradient(-45deg, transparent 75%, #bbb 75%);\n  background-size:\n    100% 100%,\n    8px 8px,\n    8px 8px,\n    8px 8px,\n    8px 8px;\n  background-position:\n    0 0,\n    0 0,\n    0 4px,\n    4px -4px,\n    -4px 0;\n\n  /* Deliberately not a theme colour: this is the transparency checkerboard, and alpha can\n     only be judged against a fixed neutral. Theming it would make a swatch read differently\n     in every theme. */\n  background-color: white;\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &::-moz-range-thumb {\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  /* The thumb, not the track, which `outline: none` above dropped the default ring\n     from. Two rules rather than one list: an engine that does not know one of these\n     pseudo-elements throws out the whole selector, which is why the thumb rules\n     above are split too. */\n  &:focus-visible::-webkit-slider-thumb {\n    box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 35%, transparent);\n  }\n\n  &:focus-visible::-moz-range-thumb {\n    box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 35%, transparent);\n  }\n}\n\n.hexRow {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.hexInput {\n  width: 100%;\n  padding: 5px 8px;\n  border-radius: var(--default-border-radius);\n  border: 1px solid var(--border-color);\n  background: var(--input-background);\n  color: var(--text-color);\n  font-size: var(--default-font-size);\n  font-family: monospace;\n  box-sizing: border-box;\n  outline: none;\n\n  &:focus {\n    border-color: var(--focus-border-color, var(--primary-color));\n  }\n}\n\n/* Two classes, to outrank ActionIcon's own box whichever stylesheet loads first. */\n.hexRow .eyeDropperButton {\n  flex-shrink: 0;\n  width: 28px;\n  height: 28px;\n}\n"],"mappings":""}

package/dist/esm/common/confirmModal/confirmModal.mjs

@@ -1,2 +1,2 @@
-"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{ButtonStyleType as n}from"../button/button.types.mjs";import r from"../actionButtons/actionButtons.mjs";import i from"../modal/modal.mjs";import{useState as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";var c={submit:`Confirm`,cancel:`Cancel`};function l(l){let{children:u=null,className:d=``,onClose:f=()=>{},onConfirm:p=()=>{},title:m,content:h=null,isOpen:g=void 0,labels:_,isDelete:v=!1,actionButtonsProps:y={},style:b,...x}=e(`ConfirmModal`,l),S=t(`ConfirmModal`,_,c),[C,w]=a(!1),[T,E]=a(!1);function D(e=!1){w(!1),f(e)}async function O(){E(!0);try{await p(),D(!0)}catch{}finally{E(!1)}}let k=o(i,{title:m,isOpen:g===void 0?C:g,onClose:()=>D(),className:u?void 0:d,footer:o(r,{onClose:()=>D(),onSubmit:O,labels:{submit:S.submit,cancel:S.cancel},submitButtonStyle:v?n.Delete:void 0,isSubmitButtonLoading:T,noMargin:!0,...y}),children:h});return u?s(`div`,{...x,className:d,style:b,children:[o(`span`,{onClick:()=>w(!0),children:u}),k]}):k}export{l 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/actionButtons.mjs";import i from"../modal/modal.mjs";import{useState as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";var c={submit:`Confirm`,cancel:`Cancel`};function l(l){let{children:u=null,className:d=``,onClose:f=()=>{},onConfirm:p=()=>{},title:m,content:h=null,isOpen:g=void 0,labels:_,isDelete:v=!1,actionButtonsProps:y={},style:b,...x}=e(`ConfirmModal`,l),S=t(`ConfirmModal`,_,c),[C,w]=a(!1),[T,E]=a(!1);function D(e=!1){w(!1),f(e)}async function O(){E(!0);try{await p(),D(!0)}catch{}finally{E(!1)}}let k=o(i,{title:m,isOpen:g===void 0?C:g,onClose:()=>D(),className:u?void 0:d,footer:o(r,{onClose:()=>D(),onSubmit:O,labels:{submit:S.submit,cancel:S.cancel},submitButtonColor:v?n.Error:void 0,isSubmitButtonLoading:T,noMargin:!0,...y}),children:h});return u?s(`div`,{...x,className:d,style:b,children:[o(`span`,{onClick:()=>w(!0),children:u}),k]}):k}export{l as default};
 //# sourceMappingURL=confirmModal.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"confirmModal.mjs","names":[],"sources":["../../../../package/common/confirmModal/confirmModal.tsx"],"sourcesContent":["import { useState, type ReactElement } from 'react';\n\nimport Modal from '../modal';\nimport { ActionButtons } from '../actionButtons';\nimport { ButtonStyleType } from '../button';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport type { ConfirmModalLabels, ConfirmModalProps } from './confirmModal.types';\n\nconst DEFAULT_LABELS: Required<ConfirmModalLabels> = {\n  submit: 'Confirm',\n  cancel: 'Cancel',\n};\n\nfunction ConfirmModal(props: ConfirmModalProps): ReactElement {\n  const {\n    children = null,\n    className = '',\n    onClose = () => {},\n    onConfirm = () => {},\n    title,\n    content = null,\n    isOpen: propIsOpen = undefined,\n    labels,\n    isDelete = false,\n    actionButtonsProps = {},\n    style,\n    ...rest\n  } = useComponentDefaults('ConfirmModal', props);\n  const text = useLabels('ConfirmModal', labels, DEFAULT_LABELS);\n  const [internalOpen, setInternalOpen] = useState(false);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  function handleClose(didSubmit = false) {\n    setInternalOpen(false);\n    onClose(didSubmit);\n  }\n\n  async function handleConfirm() {\n    setIsSubmitting(true);\n    try {\n      await onConfirm();\n      handleClose(true);\n    } catch {\n      // Nothing is awaiting this handler, so a rejection would surface as an unhandled one.\n      // The dialog staying open is the signal that the action did not go through; reporting\n      // the failure itself belongs to whoever wrote `onConfirm`.\n    } finally {\n      setIsSubmitting(false);\n    }\n  }\n\n  const isOpen = propIsOpen === undefined ? internalOpen : propIsOpen;\n\n  const modal = (\n    <Modal\n      title={title}\n      isOpen={isOpen}\n      onClose={() => handleClose()}\n      className={children ? undefined : className}\n      footer={\n        <ActionButtons\n          onClose={() => handleClose()}\n          onSubmit={handleConfirm}\n          labels={{ submit: text.submit, cancel: text.cancel }}\n          submitButtonStyle={isDelete ? ButtonStyleType.Delete : undefined}\n          isSubmitButtonLoading={isSubmitting}\n          // The footer slot already supplies the gap above the buttons.\n          noMargin\n          {...actionButtonsProps}\n        />\n      }\n    >\n      {content}\n    </Modal>\n  );\n\n  if (!children) return modal;\n\n  return (\n    <div {...rest} className={className} style={style}>\n      <span onClick={() => setInternalOpen(true)}>{children}</span>\n      {modal}\n    </div>\n  );\n}\n\nexport default ConfirmModal;\n"],"mappings":"+XAQA,IAAM,EAA+C,CACnD,OAAQ,UACR,OAAQ,QACV,EAEA,SAAS,EAAa,EAAwC,CAC5D,GAAM,CACJ,WAAW,KACX,YAAY,GACZ,cAAgB,CAAC,EACjB,gBAAkB,CAAC,EACnB,QACA,UAAU,KACV,OAAQ,EAAa,IAAA,GACrB,SACA,WAAW,GACX,qBAAqB,CAAC,EACtB,QACA,GAAG,GACD,EAAqB,eAAgB,CAAK,EACxC,EAAO,EAAU,eAAgB,EAAQ,CAAc,EACvD,CAAC,EAAc,GAAmB,EAAS,EAAK,EAChD,CAAC,EAAc,GAAmB,EAAS,EAAK,EAEtD,SAAS,EAAY,EAAY,GAAO,CACtC,EAAgB,EAAK,EACrB,EAAQ,CAAS,CACnB,CAEA,eAAe,GAAgB,CAC7B,EAAgB,EAAI,EACpB,GAAI,CACF,MAAM,EAAU,EAChB,EAAY,EAAI,CAClB,MAAQ,CAIR,QAAU,CACR,EAAgB,EAAK,CACvB,CACF,CAIA,IAAM,EACJ,EAAC,EAAD,CACS,QACC,OALG,IAAe,IAAA,GAAY,EAAe,EAMrD,YAAe,EAAY,EAC3B,UAAW,EAAW,IAAA,GAAY,EAClC,OACE,EAAC,EAAD,CACE,YAAe,EAAY,EAC3B,SAAU,EACV,OAAQ,CAAE,OAAQ,EAAK,OAAQ,OAAQ,EAAK,MAAO,EACnD,kBAAmB,EAAW,EAAgB,OAAS,IAAA,GACvD,sBAAuB,EAEvB,SAAA,GACA,GAAI,CACL,CAAA,EAGF,SAAA,CACI,CAAA,EAKT,OAFK,EAGH,EAAC,MAAD,CAAK,GAAI,EAAiB,YAAkB,QAA5C,SAAA,CACE,EAAC,OAAD,CAAM,YAAe,EAAgB,EAAI,EAAI,UAAe,CAAA,EAC3D,CACE,IANe,CAQxB"}
+{"version":3,"file":"confirmModal.mjs","names":[],"sources":["../../../../package/common/confirmModal/confirmModal.tsx"],"sourcesContent":["import { useState, type ReactElement } from 'react';\n\nimport Modal from '../modal';\nimport { ActionButtons } from '../actionButtons';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport type { ConfirmModalLabels, ConfirmModalProps } from './confirmModal.types';\nimport { ThemeColor } from '../themeProvider/color.types';\n\nconst DEFAULT_LABELS: Required<ConfirmModalLabels> = {\n  submit: 'Confirm',\n  cancel: 'Cancel',\n};\n\nfunction ConfirmModal(props: ConfirmModalProps): ReactElement {\n  const {\n    children = null,\n    className = '',\n    onClose = () => {},\n    onConfirm = () => {},\n    title,\n    content = null,\n    isOpen: propIsOpen = undefined,\n    labels,\n    isDelete = false,\n    actionButtonsProps = {},\n    style,\n    ...rest\n  } = useComponentDefaults('ConfirmModal', props);\n  const text = useLabels('ConfirmModal', labels, DEFAULT_LABELS);\n  const [internalOpen, setInternalOpen] = useState(false);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  function handleClose(didSubmit = false) {\n    setInternalOpen(false);\n    onClose(didSubmit);\n  }\n\n  async function handleConfirm() {\n    setIsSubmitting(true);\n    try {\n      await onConfirm();\n      handleClose(true);\n    } catch {\n      // Nothing is awaiting this handler, so a rejection would surface as an unhandled one.\n      // The dialog staying open is the signal that the action did not go through; reporting\n      // the failure itself belongs to whoever wrote `onConfirm`.\n    } finally {\n      setIsSubmitting(false);\n    }\n  }\n\n  const isOpen = propIsOpen === undefined ? internalOpen : propIsOpen;\n\n  const modal = (\n    <Modal\n      title={title}\n      isOpen={isOpen}\n      onClose={() => handleClose()}\n      className={children ? undefined : className}\n      footer={\n        <ActionButtons\n          onClose={() => handleClose()}\n          onSubmit={handleConfirm}\n          labels={{ submit: text.submit, cancel: text.cancel }}\n          submitButtonColor={isDelete ? ThemeColor.Error : undefined}\n          isSubmitButtonLoading={isSubmitting}\n          // The footer slot already supplies the gap above the buttons.\n          noMargin\n          {...actionButtonsProps}\n        />\n      }\n    >\n      {content}\n    </Modal>\n  );\n\n  if (!children) return modal;\n\n  return (\n    <div {...rest} className={className} style={style}>\n      <span onClick={() => setInternalOpen(true)}>{children}</span>\n      {modal}\n    </div>\n  );\n}\n\nexport default ConfirmModal;\n"],"mappings":"gYAQA,IAAM,EAA+C,CACnD,OAAQ,UACR,OAAQ,QACV,EAEA,SAAS,EAAa,EAAwC,CAC5D,GAAM,CACJ,WAAW,KACX,YAAY,GACZ,cAAgB,CAAC,EACjB,gBAAkB,CAAC,EACnB,QACA,UAAU,KACV,OAAQ,EAAa,IAAA,GACrB,SACA,WAAW,GACX,qBAAqB,CAAC,EACtB,QACA,GAAG,GACD,EAAqB,eAAgB,CAAK,EACxC,EAAO,EAAU,eAAgB,EAAQ,CAAc,EACvD,CAAC,EAAc,GAAmB,EAAS,EAAK,EAChD,CAAC,EAAc,GAAmB,EAAS,EAAK,EAEtD,SAAS,EAAY,EAAY,GAAO,CACtC,EAAgB,EAAK,EACrB,EAAQ,CAAS,CACnB,CAEA,eAAe,GAAgB,CAC7B,EAAgB,EAAI,EACpB,GAAI,CACF,MAAM,EAAU,EAChB,EAAY,EAAI,CAClB,MAAQ,CAIR,QAAU,CACR,EAAgB,EAAK,CACvB,CACF,CAIA,IAAM,EACJ,EAAC,EAAD,CACS,QACC,OALG,IAAe,IAAA,GAAY,EAAe,EAMrD,YAAe,EAAY,EAC3B,UAAW,EAAW,IAAA,GAAY,EAClC,OACE,EAAC,EAAD,CACE,YAAe,EAAY,EAC3B,SAAU,EACV,OAAQ,CAAE,OAAQ,EAAK,OAAQ,OAAQ,EAAK,MAAO,EACnD,kBAAmB,EAAW,EAAW,MAAQ,IAAA,GACjD,sBAAuB,EAEvB,SAAA,GACA,GAAI,CACL,CAAA,EAGF,SAAA,CACI,CAAA,EAKT,OAFK,EAGH,EAAC,MAAD,CAAK,GAAI,EAAiB,YAAkB,QAA5C,SAAA,CACE,EAAC,OAAD,CAAM,YAAe,EAAgB,EAAI,EAAI,UAAe,CAAA,EAC3D,CACE,IANe,CAQxB"}

package/dist/esm/common/copyButton/copyButton.mjs

@@ -1,2 +1,2 @@
-"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{isIconDefinition as n,renderIcon as r}from"../utils/renderIcon.mjs";import i from"../actionIcon/actionIcon.mjs";import a from"../animatedIcon/animatedIcon.mjs";import o from"../hooks/useClipboard.mjs";import s from"./copyButton.module.mjs";import c from"classnames";import{faCheck as l,faCopy as u}from"@fortawesome/free-solid-svg-icons";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";var m={copy:`Copy`,copied:`Copied`,failed:`Could not copy`};function h(h){let{value:g,timeout:_=2e3,icon:v=u,copiedIcon:y=l,onCopy:b,onError:x,onClick:S,labels:C,className:w,style:T,classNames:E,styles:D,...O}=e(`CopyButton`,h),k=t(`CopyButton`,C,m),{copy:A,copied:j,error:M}=o({timeout:_}),N=j?k.copied:k.copy,P=j?y:v,F=n(v)&&n(y)?f(a,{icon:j?y:v,classNames:{icon:E?.icon},styles:{icon:D?.icon}}):r(P,{className:E?.icon,style:D?.icon});return p(d,{children:[f(i,{...O,icon:f(d,{children:F}),title:N,"aria-label":N,className:c(s.copyButton,j&&s.copyButtonCopied,w),style:T,classNames:{root:E?.root},styles:{root:D?.root},onClick:async e=>{S?.(e),await A(g)?b?.(g):x?.()}}),f(`span`,{className:s.copyButtonStatus,role:`status`,"aria-live":`polite`,children:j?k.copied:M?k.failed:``})]})}export{h 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{isIconDefinition as r,renderIcon as i}from"../utils/renderIcon.mjs";import a from"../actionIcon/actionIcon.mjs";import o from"../animatedIcon/animatedIcon.mjs";import s from"../hooks/useClipboard.mjs";import c from"./copyButton.module.mjs";import{faCheck as l,faCopy as u}from"@fortawesome/free-solid-svg-icons";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";var m={copy:`Copy`,copied:`Copied`,failed:`Could not copy`};function h(h){let{value:g,timeout:_=2e3,icon:v=u,copiedIcon:y=l,onCopy:b,onError:x,onClick:S,color:C,labels:w,className:T,style:E,classNames:D,styles:O,...k}=e(`CopyButton`,h),A=t(`CopyButton`,w,m),{copy:j,copied:M,error:N}=s({timeout:_}),P=M?A.copied:A.copy,F=M?y:v,I=r(v)&&r(y)?f(o,{icon:M?y:v,classNames:{icon:D?.icon},styles:{icon:O?.icon}}):i(F,{className:D?.icon,style:O?.icon});return p(d,{children:[f(a,{...k,icon:f(d,{children:I}),title:P,"aria-label":P,color:M?n.Success:C,className:T,style:E,classNames:{root:D?.root},styles:{root:O?.root},onClick:async e=>{S?.(e),await j(g)?b?.(g):x?.()}}),f(`span`,{className:c.copyButtonStatus,role:`status`,"aria-live":`polite`,children:M?A.copied:N?A.failed:``})]})}export{h as default};
 //# sourceMappingURL=copyButton.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"copyButton.mjs","names":[],"sources":["../../../../package/common/copyButton/copyButton.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport cx from 'classnames';\nimport { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';\n\nimport ActionIcon from '../actionIcon';\nimport AnimatedIcon from '../animatedIcon';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { useClipboard } from '../hooks/useClipboard';\nimport { isIconDefinition, renderIcon } from '../utils/renderIcon';\nimport type { CopyButtonLabels, CopyButtonProps } from './copyButton.types';\nimport styles from './copyButton.module.pcss';\n\nconst DEFAULT_LABELS: Required<CopyButtonLabels> = {\n  copy: 'Copy',\n  copied: 'Copied',\n  failed: 'Could not copy',\n};\n\nfunction CopyButton(props: CopyButtonProps): ReactElement {\n  const {\n    value,\n    timeout = 2000,\n    icon = faCopy,\n    copiedIcon = faCheck,\n    onCopy,\n    onError,\n    onClick,\n    labels,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('CopyButton', props);\n  const text = useLabels('CopyButton', labels, DEFAULT_LABELS);\n  const { copy, copied, error } = useClipboard({ timeout });\n\n  const label = copied ? text.copied : text.copy;\n  const current = copied ? copiedIcon : icon;\n  const iconElement =\n    isIconDefinition(icon) && isIconDefinition(copiedIcon) ? (\n      <AnimatedIcon\n        icon={copied ? copiedIcon : icon}\n        classNames={{ icon: classNames?.icon }}\n        styles={{ icon: slotStyles?.icon }}\n      />\n    ) : (\n      renderIcon(current, { className: classNames?.icon, style: slotStyles?.icon })\n    );\n\n  return (\n    <>\n      <ActionIcon\n        {...rest}\n        icon={<>{iconElement}</>}\n        title={label}\n        aria-label={label}\n        className={cx(styles.copyButton, copied && styles.copyButtonCopied, className)}\n        style={style}\n        classNames={{ root: classNames?.root }}\n        styles={{ root: slotStyles?.root }}\n        onClick={async (event) => {\n          onClick?.(event);\n          if (await copy(value)) onCopy?.(value);\n          else onError?.();\n        }}\n      />\n      {/* Beside the button, not in it: a live region inside role=\"button\" is not reliably announced. */}\n      <span className={styles.copyButtonStatus} role='status' aria-live='polite'>\n        {copied ? text.copied : error ? text.failed : ''}\n      </span>\n    </>\n  );\n}\n\nexport default CopyButton;\n"],"mappings":"ojBAYA,IAAM,EAA6C,CACjD,KAAM,OACN,OAAQ,SACR,OAAQ,gBACV,EAEA,SAAS,EAAW,EAAsC,CACxD,GAAM,CACJ,QACA,UAAU,IACV,OAAO,EACP,aAAa,EACb,SACA,UACA,UACA,SACA,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,aAAc,CAAK,EACtC,EAAO,EAAU,aAAc,EAAQ,CAAc,EACrD,CAAE,OAAM,SAAQ,SAAU,EAAa,CAAE,SAAQ,CAAC,EAElD,EAAQ,EAAS,EAAK,OAAS,EAAK,KACpC,EAAU,EAAS,EAAa,EAChC,EACJ,EAAiB,CAAI,GAAK,EAAiB,CAAU,EACnD,EAAC,EAAD,CACE,KAAM,EAAS,EAAa,EAC5B,WAAY,CAAE,KAAM,GAAY,IAAK,EACrC,OAAQ,CAAE,KAAM,GAAY,IAAK,CAClC,CAAA,EAED,EAAW,EAAS,CAAE,UAAW,GAAY,KAAM,MAAO,GAAY,IAAK,CAAC,EAGhF,OACE,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAD,CACE,GAAI,EACJ,KAAM,EAAA,EAAA,CAAA,SAAG,CAAc,CAAA,EACvB,MAAO,EACP,aAAY,EACZ,UAAW,EAAG,EAAO,WAAY,GAAU,EAAO,iBAAkB,CAAS,EACtE,QACP,WAAY,CAAE,KAAM,GAAY,IAAK,EACrC,OAAQ,CAAE,KAAM,GAAY,IAAK,EACjC,QAAS,KAAO,IAAU,CACxB,IAAU,CAAK,EACX,MAAM,EAAK,CAAK,EAAG,IAAS,CAAK,EAChC,IAAU,CACjB,CACD,CAAA,EAED,EAAC,OAAD,CAAM,UAAW,EAAO,iBAAkB,KAAK,SAAS,YAAU,SAC/D,SAAA,EAAS,EAAK,OAAS,EAAQ,EAAK,OAAS,EAC1C,CAAA,CACN,CAAA,CAAA,CAEN"}
+{"version":3,"file":"copyButton.mjs","names":[],"sources":["../../../../package/common/copyButton/copyButton.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';\n\nimport ActionIcon from '../actionIcon';\nimport AnimatedIcon from '../animatedIcon';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { useClipboard } from '../hooks/useClipboard';\nimport { isIconDefinition, renderIcon } from '../utils/renderIcon';\nimport type { CopyButtonLabels, CopyButtonProps } from './copyButton.types';\nimport styles from './copyButton.module.pcss';\nimport { ThemeColor } from '../themeProvider/color.types';\n\nconst DEFAULT_LABELS: Required<CopyButtonLabels> = {\n  copy: 'Copy',\n  copied: 'Copied',\n  failed: 'Could not copy',\n};\n\nfunction CopyButton(props: CopyButtonProps): ReactElement {\n  const {\n    value,\n    timeout = 2000,\n    icon = faCopy,\n    copiedIcon = faCheck,\n    onCopy,\n    onError,\n    onClick,\n    color,\n    labels,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('CopyButton', props);\n  const text = useLabels('CopyButton', labels, DEFAULT_LABELS);\n  const { copy, copied, error } = useClipboard({ timeout });\n\n  const label = copied ? text.copied : text.copy;\n  const current = copied ? copiedIcon : icon;\n  const iconElement =\n    isIconDefinition(icon) && isIconDefinition(copiedIcon) ? (\n      <AnimatedIcon\n        icon={copied ? copiedIcon : icon}\n        classNames={{ icon: classNames?.icon }}\n        styles={{ icon: slotStyles?.icon }}\n      />\n    ) : (\n      renderIcon(current, { className: classNames?.icon, style: slotStyles?.icon })\n    );\n\n  return (\n    <>\n      <ActionIcon\n        {...rest}\n        icon={<>{iconElement}</>}\n        title={label}\n        aria-label={label}\n        color={copied ? ThemeColor.Success : color}\n        className={className}\n        style={style}\n        classNames={{ root: classNames?.root }}\n        styles={{ root: slotStyles?.root }}\n        onClick={async (event) => {\n          onClick?.(event);\n          if (await copy(value)) onCopy?.(value);\n          else onError?.();\n        }}\n      />\n      {/* Beside the button, not in it: a live region inside a button is not reliably announced. */}\n      <span className={styles.copyButtonStatus} role='status' aria-live='polite'>\n        {copied ? text.copied : error ? text.failed : ''}\n      </span>\n    </>\n  );\n}\n\nexport default CopyButton;\n"],"mappings":"wlBAYA,IAAM,EAA6C,CACjD,KAAM,OACN,OAAQ,SACR,OAAQ,gBACV,EAEA,SAAS,EAAW,EAAsC,CACxD,GAAM,CACJ,QACA,UAAU,IACV,OAAO,EACP,aAAa,EACb,SACA,UACA,UACA,QACA,SACA,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,aAAc,CAAK,EACtC,EAAO,EAAU,aAAc,EAAQ,CAAc,EACrD,CAAE,OAAM,SAAQ,SAAU,EAAa,CAAE,SAAQ,CAAC,EAElD,EAAQ,EAAS,EAAK,OAAS,EAAK,KACpC,EAAU,EAAS,EAAa,EAChC,EACJ,EAAiB,CAAI,GAAK,EAAiB,CAAU,EACnD,EAAC,EAAD,CACE,KAAM,EAAS,EAAa,EAC5B,WAAY,CAAE,KAAM,GAAY,IAAK,EACrC,OAAQ,CAAE,KAAM,GAAY,IAAK,CAClC,CAAA,EAED,EAAW,EAAS,CAAE,UAAW,GAAY,KAAM,MAAO,GAAY,IAAK,CAAC,EAGhF,OACE,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAD,CACE,GAAI,EACJ,KAAM,EAAA,EAAA,CAAA,SAAG,CAAc,CAAA,EACvB,MAAO,EACP,aAAY,EACZ,MAAO,EAAS,EAAW,QAAU,EAC1B,YACJ,QACP,WAAY,CAAE,KAAM,GAAY,IAAK,EACrC,OAAQ,CAAE,KAAM,GAAY,IAAK,EACjC,QAAS,KAAO,IAAU,CACxB,IAAU,CAAK,EACX,MAAM,EAAK,CAAK,EAAG,IAAS,CAAK,EAChC,IAAU,CACjB,CACD,CAAA,EAED,EAAC,OAAD,CAAM,UAAW,EAAO,iBAAkB,KAAK,SAAS,YAAU,SAC/D,SAAA,EAAS,EAAK,OAAS,EAAQ,EAAK,OAAS,EAC1C,CAAA,CACN,CAAA,CAAA,CAEN"}

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

@@ -1,2 +1,2 @@
-"use client";var e=`copyButton_HEd1K`,t=`copyButton-copied_HL1zN`,n=`copyButton-status_QdwYf`,r={copyButton:e,"copyButton-copied":`copyButton-copied_HL1zN`,copyButtonCopied:t,"copyButton-status":`copyButton-status_QdwYf`,copyButtonStatus:n};export{e as copyButton,t as copyButtonCopied,n as copyButtonStatus,r as default};
+"use client";var e=`copyButton-status_QdwYf`,t={"copyButton-status":`copyButton-status_QdwYf`,copyButtonStatus:e};export{e as copyButtonStatus,t as default};
 //# sourceMappingURL=copyButton.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"copyButton.module.mjs","names":[],"sources":["../../../../package/common/copyButton/copyButton.module.pcss"],"sourcesContent":[".copyButton {\n  /* As a block, AnimatedIcon's inline-block box sits on a text baseline and rides high. */\n  display: inline-flex;\n\n  &-copied {\n    color: var(--success-color);\n  }\n\n  &-status {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    border: 0;\n    clip-path: inset(50%);\n    overflow: hidden;\n    white-space: nowrap;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"copyButton.module.mjs","names":[],"sources":["../../../../package/common/copyButton/copyButton.module.pcss"],"sourcesContent":[".copyButton-status {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip-path: inset(50%);\n  overflow: hidden;\n  white-space: nowrap;\n}\n"],"mappings":""}

package/dist/esm/common/errorBoundary/errorBoundary.mjs

@@ -1,4 +1,4 @@
-"use client";import e from"../accordion/accordion.mjs";import t from"../button/button.mjs";import{showToast as n}from"../toast/toastService.mjs";import r from"../copyButton/copyButton.mjs";import i from"./errorBoundary.module.mjs";import a from"react";import o from"classnames";import{FontAwesomeIcon as s}from"@fortawesome/react-fontawesome";import{faArrowRotateRight as c,faTriangleExclamation as l}from"@fortawesome/free-solid-svg-icons";import{jsx as u,jsxs as d}from"react/jsx-runtime";var f={stackTrace:`Stack trace`,copy:`Copy`,copied:`Copied`,reset:`Try again`,copySuccessToast:`Stack trace copied to clipboard`,copyErrorToast:`Could not copy stack trace`};function p(e,t){let n=[e.stack??`${e.name}: ${e.message}`];return t?.componentStack&&n.push(`Component stack:${t.componentStack}`),n.join(`
+"use client";import{ThemeColor as e}from"../themeProvider/color.types.mjs";import t from"../accordion/accordion.mjs";import n from"../button/button.mjs";import{showToast as r}from"../toast/toastService.mjs";import i from"../copyButton/copyButton.mjs";import a from"./errorBoundary.module.mjs";import o from"react";import s from"classnames";import{FontAwesomeIcon as c}from"@fortawesome/react-fontawesome";import{faArrowRotateRight as l,faTriangleExclamation as u}from"@fortawesome/free-solid-svg-icons";import{jsx as d,jsxs as f}from"react/jsx-runtime";var p={stackTrace:`Stack trace`,copy:`Copy`,copied:`Copied`,reset:`Try again`,copySuccessToast:`Stack trace copied to clipboard`,copyErrorToast:`Could not copy stack trace`};function m(e,t){let n=[e.stack??`${e.name}: ${e.message}`];return t?.componentStack&&n.push(`Component stack:${t.componentStack}`),n.join(`
 
-`)}var m=class extends a.Component{constructor(...e){super(...e),this.state={error:null,errorInfo:null},this.reset=()=>{this.setState({error:null,errorInfo:null}),this.props.onReset?.()}}static getDerivedStateFromError(e){return{error:e}}componentDidCatch(e,t){this.setState({errorInfo:t}),this.props.onError?.(e,t)}componentDidUpdate(e){if(!this.state.error)return;let t=e.resetKeys??[],n=this.props.resetKeys??[];(n.length!==t.length||n.some((e,n)=>e!==t[n]))&&this.reset()}render(){let{error:a,errorInfo:m}=this.state,{children:h=null,title:g=`Something went wrong`,description:_,labels:v,fallback:y,hideStack:b=!1,className:x,style:S,classNames:C,styles:w,onError:T,onReset:E,resetKeys:D,role:O=`alert`,...k}=this.props;if(!a)return h;let A={...f,...v};return y?typeof y==`function`?y({error:a,errorInfo:m,resetErrorBoundary:this.reset}):y:d(`div`,{...k,role:O,className:o(i.errorBoundary,x,C?.root),style:{...S,...w?.root},children:[d(`div`,{className:o(i.errorBoundaryHeader,C?.header),style:w?.header,children:[u(`div`,{className:o(i.errorBoundaryBadge,C?.badge),style:w?.badge,children:u(s,{icon:l,className:o(i.errorBoundaryIcon,C?.icon),style:w?.icon})}),u(`div`,{className:o(i.errorBoundaryTitle,C?.title),style:w?.title,children:g}),u(`div`,{className:o(i.errorBoundaryDescription,C?.description),style:w?.description,children:_??a.message})]}),!b&&d(e,{title:A.stackTrace,className:o(i.errorBoundaryStack,C?.stack),style:w?.stack,children:[d(`div`,{className:o(i.errorBoundaryStackHeader,C?.stackHeader),style:w?.stackHeader,children:[u(`span`,{className:o(i.errorBoundaryStackLabel,C?.stackLabel),style:w?.stackLabel,children:a.name||`Error`}),u(r,{value:p(a,m),labels:{copy:A.copy,copied:A.copied},onCopy:()=>n(A.copySuccessToast,{type:`success`}),onError:()=>n(A.copyErrorToast,{type:`error`}),className:o(i.errorBoundaryCopyButton,C?.copyButton),style:w?.copyButton})]}),u(`pre`,{className:o(i.errorBoundaryStackTrace,C?.stackTrace),style:w?.stackTrace,children:p(a,m)})]}),u(`div`,{className:o(i.errorBoundaryActions,C?.actions),style:w?.actions,children:u(t,{onClick:this.reset,icon:c,className:o(i.errorBoundaryResetButton,C?.resetButton),style:w?.resetButton,children:A.reset})})]})}};export{m as default};
+`)}var h=class extends o.Component{constructor(...e){super(...e),this.state={error:null,errorInfo:null},this.reset=()=>{this.setState({error:null,errorInfo:null}),this.props.onReset?.()}}static getDerivedStateFromError(e){return{error:e}}componentDidCatch(e,t){this.setState({errorInfo:t}),this.props.onError?.(e,t)}componentDidUpdate(e){if(!this.state.error)return;let t=e.resetKeys??[],n=this.props.resetKeys??[];(n.length!==t.length||n.some((e,n)=>e!==t[n]))&&this.reset()}render(){let{error:o,errorInfo:h}=this.state,{children:g=null,title:_=`Something went wrong`,description:v,labels:y,fallback:b,hideStack:x=!1,className:S,style:C,classNames:w,styles:T,onError:E,onReset:D,resetKeys:O,role:k=`alert`,...A}=this.props;if(!o)return g;let j={...p,...y};return b?typeof b==`function`?b({error:o,errorInfo:h,resetErrorBoundary:this.reset}):b:f(`div`,{...A,role:k,className:s(a.errorBoundary,S,w?.root),style:{...C,...T?.root},children:[f(`div`,{className:s(a.errorBoundaryHeader,w?.header),style:T?.header,children:[d(`div`,{className:s(a.errorBoundaryBadge,w?.badge),style:T?.badge,children:d(c,{icon:u,className:s(a.errorBoundaryIcon,w?.icon),style:T?.icon})}),d(`div`,{className:s(a.errorBoundaryTitle,w?.title),style:T?.title,children:_}),d(`div`,{className:s(a.errorBoundaryDescription,w?.description),style:T?.description,children:v??o.message})]}),!x&&f(t,{title:j.stackTrace,className:s(a.errorBoundaryStack,w?.stack),style:T?.stack,children:[f(`div`,{className:s(a.errorBoundaryStackHeader,w?.stackHeader),style:T?.stackHeader,children:[d(`span`,{className:s(a.errorBoundaryStackLabel,w?.stackLabel),style:T?.stackLabel,children:o.name||`Error`}),d(i,{value:m(o,h),labels:{copy:j.copy,copied:j.copied},onCopy:()=>r(j.copySuccessToast,{color:e.Success}),onError:()=>r(j.copyErrorToast,{color:e.Error}),className:s(a.errorBoundaryCopyButton,w?.copyButton),style:T?.copyButton})]}),d(`pre`,{className:s(a.errorBoundaryStackTrace,w?.stackTrace),style:T?.stackTrace,children:m(o,h)})]}),d(`div`,{className:s(a.errorBoundaryActions,w?.actions),style:T?.actions,children:d(n,{onClick:this.reset,icon:l,className:s(a.errorBoundaryResetButton,w?.resetButton),style:T?.resetButton,children:j.reset})})]})}};export{h as default};
 //# sourceMappingURL=errorBoundary.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"errorBoundary.mjs","names":[],"sources":["../../../../package/common/errorBoundary/errorBoundary.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faTriangleExclamation, faArrowRotateRight } from '@fortawesome/free-solid-svg-icons';\n\nimport Button from '../button';\nimport Accordion from '../accordion';\nimport { showToast } from '../toast';\nimport CopyButton from '../copyButton';\nimport type { ErrorBoundaryLabels, ErrorBoundaryProps, ErrorBoundaryState } from './errorBoundary.types';\nimport styles from './errorBoundary.module.pcss';\n\nconst DEFAULT_LABELS: Required<ErrorBoundaryLabels> = {\n  stackTrace: 'Stack trace',\n  copy: 'Copy',\n  copied: 'Copied',\n  reset: 'Try again',\n  copySuccessToast: 'Stack trace copied to clipboard',\n  copyErrorToast: 'Could not copy stack trace',\n};\n\nfunction formatStackTrace(error: Error, errorInfo: React.ErrorInfo | null): string {\n  const parts = [error.stack ?? `${error.name}: ${error.message}`];\n  if (errorInfo?.componentStack) parts.push(`Component stack:${errorInfo.componentStack}`);\n  return parts.join('\\n\\n');\n}\n\nclass ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  state: ErrorBoundaryState = { error: null, errorInfo: null };\n\n  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {\n    return { error };\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {\n    this.setState({ errorInfo });\n    this.props.onError?.(error, errorInfo);\n  }\n\n  componentDidUpdate(prevProps: ErrorBoundaryProps): void {\n    if (!this.state.error) return;\n    const prevKeys = prevProps.resetKeys ?? [];\n    const nextKeys = this.props.resetKeys ?? [];\n    const changed = nextKeys.length !== prevKeys.length || nextKeys.some((key, i) => key !== prevKeys[i]);\n    if (changed) this.reset();\n  }\n\n  private reset = (): void => {\n    this.setState({ error: null, errorInfo: null });\n    this.props.onReset?.();\n  };\n\n  render(): React.ReactNode {\n    const { error, errorInfo } = this.state;\n    // onError/onReset/resetKeys are consumed elsewhere (getDerivedStateFromError,\n    // componentDidCatch, componentDidUpdate) and must not land on the root element via `rest`.\n    /* eslint-disable @typescript-eslint/no-unused-vars */\n    const {\n      children = null,\n      title = 'Something went wrong',\n      description,\n      labels: labelOverrides,\n      fallback,\n      hideStack = false,\n      className,\n      style,\n      classNames,\n      styles: slotStyles,\n      onError,\n      onReset,\n      resetKeys,\n      role = 'alert',\n      ...rest\n    } = this.props;\n\n    if (!error) return children;\n\n    const labels = { ...DEFAULT_LABELS, ...labelOverrides };\n\n    if (fallback) {\n      return typeof fallback === 'function' ? fallback({ error, errorInfo, resetErrorBoundary: this.reset }) : fallback;\n    }\n\n    return (\n      <div\n        {...rest}\n        role={role}\n        className={cx(styles.errorBoundary, className, classNames?.root)}\n        style={{ ...style, ...slotStyles?.root }}\n      >\n        <div className={cx(styles.errorBoundaryHeader, classNames?.header)} style={slotStyles?.header}>\n          <div className={cx(styles.errorBoundaryBadge, classNames?.badge)} style={slotStyles?.badge}>\n            <FontAwesomeIcon\n              icon={faTriangleExclamation}\n              className={cx(styles.errorBoundaryIcon, classNames?.icon)}\n              style={slotStyles?.icon as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n            />\n          </div>\n          <div className={cx(styles.errorBoundaryTitle, classNames?.title)} style={slotStyles?.title}>\n            {title}\n          </div>\n          <div className={cx(styles.errorBoundaryDescription, classNames?.description)} style={slotStyles?.description}>\n            {description ?? error.message}\n          </div>\n        </div>\n\n        {!hideStack && (\n          <Accordion\n            title={labels.stackTrace}\n            className={cx(styles.errorBoundaryStack, classNames?.stack)}\n            style={slotStyles?.stack}\n          >\n            <div\n              className={cx(styles.errorBoundaryStackHeader, classNames?.stackHeader)}\n              style={slotStyles?.stackHeader}\n            >\n              <span\n                className={cx(styles.errorBoundaryStackLabel, classNames?.stackLabel)}\n                style={slotStyles?.stackLabel}\n              >\n                {error.name || 'Error'}\n              </span>\n              <CopyButton\n                value={formatStackTrace(error, errorInfo)}\n                labels={{ copy: labels.copy, copied: labels.copied }}\n                onCopy={() => showToast(labels.copySuccessToast, { type: 'success' })}\n                onError={() => showToast(labels.copyErrorToast, { type: 'error' })}\n                className={cx(styles.errorBoundaryCopyButton, classNames?.copyButton)}\n                style={slotStyles?.copyButton}\n              />\n            </div>\n            <pre className={cx(styles.errorBoundaryStackTrace, classNames?.stackTrace)} style={slotStyles?.stackTrace}>\n              {formatStackTrace(error, errorInfo)}\n            </pre>\n          </Accordion>\n        )}\n\n        <div className={cx(styles.errorBoundaryActions, classNames?.actions)} style={slotStyles?.actions}>\n          <Button\n            onClick={this.reset}\n            icon={faArrowRotateRight}\n            className={cx(styles.errorBoundaryResetButton, classNames?.resetButton)}\n            style={slotStyles?.resetButton}\n          >\n            {labels.reset}\n          </Button>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default ErrorBoundary;\n"],"mappings":"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"}
+{"version":3,"file":"errorBoundary.mjs","names":[],"sources":["../../../../package/common/errorBoundary/errorBoundary.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faTriangleExclamation, faArrowRotateRight } from '@fortawesome/free-solid-svg-icons';\n\nimport Button from '../button';\nimport Accordion from '../accordion';\nimport { showToast } from '../toast';\nimport CopyButton from '../copyButton';\nimport type { ErrorBoundaryLabels, ErrorBoundaryProps, ErrorBoundaryState } from './errorBoundary.types';\nimport styles from './errorBoundary.module.pcss';\nimport { ThemeColor } from '../themeProvider/color.types';\n\nconst DEFAULT_LABELS: Required<ErrorBoundaryLabels> = {\n  stackTrace: 'Stack trace',\n  copy: 'Copy',\n  copied: 'Copied',\n  reset: 'Try again',\n  copySuccessToast: 'Stack trace copied to clipboard',\n  copyErrorToast: 'Could not copy stack trace',\n};\n\nfunction formatStackTrace(error: Error, errorInfo: React.ErrorInfo | null): string {\n  const parts = [error.stack ?? `${error.name}: ${error.message}`];\n  if (errorInfo?.componentStack) parts.push(`Component stack:${errorInfo.componentStack}`);\n  return parts.join('\\n\\n');\n}\n\nclass ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  state: ErrorBoundaryState = { error: null, errorInfo: null };\n\n  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {\n    return { error };\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {\n    this.setState({ errorInfo });\n    this.props.onError?.(error, errorInfo);\n  }\n\n  componentDidUpdate(prevProps: ErrorBoundaryProps): void {\n    if (!this.state.error) return;\n    const prevKeys = prevProps.resetKeys ?? [];\n    const nextKeys = this.props.resetKeys ?? [];\n    const changed = nextKeys.length !== prevKeys.length || nextKeys.some((key, i) => key !== prevKeys[i]);\n    if (changed) this.reset();\n  }\n\n  private reset = (): void => {\n    this.setState({ error: null, errorInfo: null });\n    this.props.onReset?.();\n  };\n\n  render(): React.ReactNode {\n    const { error, errorInfo } = this.state;\n    // onError/onReset/resetKeys are consumed elsewhere (getDerivedStateFromError,\n    // componentDidCatch, componentDidUpdate) and must not land on the root element via `rest`.\n    /* eslint-disable @typescript-eslint/no-unused-vars */\n    const {\n      children = null,\n      title = 'Something went wrong',\n      description,\n      labels: labelOverrides,\n      fallback,\n      hideStack = false,\n      className,\n      style,\n      classNames,\n      styles: slotStyles,\n      onError,\n      onReset,\n      resetKeys,\n      role = 'alert',\n      ...rest\n    } = this.props;\n\n    if (!error) return children;\n\n    const labels = { ...DEFAULT_LABELS, ...labelOverrides };\n\n    if (fallback) {\n      return typeof fallback === 'function' ? fallback({ error, errorInfo, resetErrorBoundary: this.reset }) : fallback;\n    }\n\n    return (\n      <div\n        {...rest}\n        role={role}\n        className={cx(styles.errorBoundary, className, classNames?.root)}\n        style={{ ...style, ...slotStyles?.root }}\n      >\n        <div className={cx(styles.errorBoundaryHeader, classNames?.header)} style={slotStyles?.header}>\n          <div className={cx(styles.errorBoundaryBadge, classNames?.badge)} style={slotStyles?.badge}>\n            <FontAwesomeIcon\n              icon={faTriangleExclamation}\n              className={cx(styles.errorBoundaryIcon, classNames?.icon)}\n              style={slotStyles?.icon as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n            />\n          </div>\n          <div className={cx(styles.errorBoundaryTitle, classNames?.title)} style={slotStyles?.title}>\n            {title}\n          </div>\n          <div className={cx(styles.errorBoundaryDescription, classNames?.description)} style={slotStyles?.description}>\n            {description ?? error.message}\n          </div>\n        </div>\n\n        {!hideStack && (\n          <Accordion\n            title={labels.stackTrace}\n            className={cx(styles.errorBoundaryStack, classNames?.stack)}\n            style={slotStyles?.stack}\n          >\n            <div\n              className={cx(styles.errorBoundaryStackHeader, classNames?.stackHeader)}\n              style={slotStyles?.stackHeader}\n            >\n              <span\n                className={cx(styles.errorBoundaryStackLabel, classNames?.stackLabel)}\n                style={slotStyles?.stackLabel}\n              >\n                {error.name || 'Error'}\n              </span>\n              <CopyButton\n                value={formatStackTrace(error, errorInfo)}\n                labels={{ copy: labels.copy, copied: labels.copied }}\n                onCopy={() => showToast(labels.copySuccessToast, { color: ThemeColor.Success })}\n                onError={() => showToast(labels.copyErrorToast, { color: ThemeColor.Error })}\n                className={cx(styles.errorBoundaryCopyButton, classNames?.copyButton)}\n                style={slotStyles?.copyButton}\n              />\n            </div>\n            <pre className={cx(styles.errorBoundaryStackTrace, classNames?.stackTrace)} style={slotStyles?.stackTrace}>\n              {formatStackTrace(error, errorInfo)}\n            </pre>\n          </Accordion>\n        )}\n\n        <div className={cx(styles.errorBoundaryActions, classNames?.actions)} style={slotStyles?.actions}>\n          <Button\n            onClick={this.reset}\n            icon={faArrowRotateRight}\n            className={cx(styles.errorBoundaryResetButton, classNames?.resetButton)}\n            style={slotStyles?.resetButton}\n          >\n            {labels.reset}\n          </Button>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default ErrorBoundary;\n"],"mappings":"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"}

package/dist/esm/common/fab/components/fabBase/fabBase.mjs

@@ -1,2 +1,2 @@
-"use client";import{ButtonSize as e,ButtonStyleType as t}from"../../../button/button.types.mjs";import n from"../../../button/button.mjs";import r from"./fabBase.module.mjs";import i from"classnames";import{jsx as a}from"react/jsx-runtime";var o={default:null,mini:r.fabSizeMini};function s({style:s,children:c=null,size:l=`default`,className:u=``,styleType:d=t.Primary,onClick:f=()=>{}}){return a(n,{styleType:d,size:e.Icon,className:i(r.fab,o[l],u),style:s,onClick:f,children:a(`div`,{className:r.fabContentContainer,children:a(`div`,{className:r.fabContent,children:c})})})}export{s 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 r from"../../../button/button.mjs";import i from"./fabBase.module.mjs";import a from"classnames";import{jsx as o}from"react/jsx-runtime";var s={default:null,mini:i.fabSizeMini};function c({style:c,children:l=null,size:u=`default`,className:d=``,styleType:f=n.Filled,color:p=e.Primary,onClick:m=()=>{}}){return o(r,{styleType:f,color:p,size:t.Icon,className:a(i.fab,s[u],d),style:c,onClick:m,children:o(`div`,{className:i.fabContentContainer,children:o(`div`,{className:i.fabContent,children:l})})})}export{c as default};
 //# sourceMappingURL=fabBase.mjs.map

package/dist/esm/common/fab/components/fabBase/fabBase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fabBase.mjs","names":[],"sources":["../../../../../../package/common/fab/components/fabBase/fabBase.tsx"],"sourcesContent":["import cx from 'classnames';\n\nimport Button from 'components/common/button';\nimport { ButtonSize, ButtonStyleType } from 'components/common/button/button.types';\nimport type { FabBaseProps, FabBaseSize } from './fabBase.types';\n\nimport styles from './fabBase.module.pcss';\n\nconst sizeClass: Record<FabBaseSize, string | null> = {\n  default: null,\n  mini: styles.fabSizeMini,\n};\n\nfunction FabBase({\n  style,\n  children = null,\n  size = 'default',\n  className = '',\n  styleType = ButtonStyleType.Primary,\n  onClick = () => {},\n}: FabBaseProps) {\n  return (\n    /* Icon is the only size that adds no padding. Any other one pushes past the width set\n       below through Button's `min-width: min-content`, and the circle becomes an ellipse. */\n    <Button\n      styleType={styleType}\n      size={ButtonSize.Icon}\n      className={cx(styles.fab, sizeClass[size], className)}\n      style={style}\n      onClick={onClick}\n    >\n      <div className={styles.fabContentContainer}>\n        <div className={styles.fabContent}>{children}</div>\n      </div>\n    </Button>\n  );\n}\n\nexport default FabBase;\n"],"mappings":"gPAQA,IAAM,EAAgD,CACpD,QAAS,KACT,KAAM,EAAO,WACf,EAEA,SAAS,EAAQ,CACf,QACA,WAAW,KACX,OAAO,UACP,YAAY,GACZ,YAAY,EAAgB,QAC5B,cAAgB,CAAC,GACF,CACf,OAGE,EAAC,EAAD,CACa,YACX,KAAM,EAAW,KACjB,UAAW,EAAG,EAAO,IAAK,EAAU,GAAO,CAAS,EAC7C,QACE,UAET,SAAA,EAAC,MAAD,CAAK,UAAW,EAAO,oBACrB,SAAA,EAAC,MAAD,CAAK,UAAW,EAAO,WAAa,UAAc,CAAA,CAC/C,CAAA,CACC,CAAA,CAEZ"}
+{"version":3,"file":"fabBase.mjs","names":[],"sources":["../../../../../../package/common/fab/components/fabBase/fabBase.tsx"],"sourcesContent":["import cx from 'classnames';\n\nimport Button from 'components/common/button';\nimport { ButtonSize, ButtonStyleType } from 'components/common/button/button.types';\nimport type { FabBaseProps, FabBaseSize } from './fabBase.types';\n\nimport styles from './fabBase.module.pcss';\nimport { ThemeColor } from '../../../themeProvider/color.types';\n\nconst sizeClass: Record<FabBaseSize, string | null> = {\n  default: null,\n  mini: styles.fabSizeMini,\n};\n\nfunction FabBase({\n  style,\n  children = null,\n  size = 'default',\n  className = '',\n  styleType = ButtonStyleType.Filled,\n  color = ThemeColor.Primary,\n  onClick = () => {},\n}: FabBaseProps) {\n  return (\n    /* Icon is the only size that adds no padding. Any other one pushes past the width set\n       below through Button's `min-width: min-content`, and the circle becomes an ellipse. */\n    <Button\n      styleType={styleType}\n      color={color}\n      size={ButtonSize.Icon}\n      className={cx(styles.fab, sizeClass[size], className)}\n      style={style}\n      onClick={onClick}\n    >\n      <div className={styles.fabContentContainer}>\n        <div className={styles.fabContent}>{children}</div>\n      </div>\n    </Button>\n  );\n}\n\nexport default FabBase;\n"],"mappings":"oTASA,IAAM,EAAgD,CACpD,QAAS,KACT,KAAM,EAAO,WACf,EAEA,SAAS,EAAQ,CACf,QACA,WAAW,KACX,OAAO,UACP,YAAY,GACZ,YAAY,EAAgB,OAC5B,QAAQ,EAAW,QACnB,cAAgB,CAAC,GACF,CACf,OAGE,EAAC,EAAD,CACa,YACJ,QACP,KAAM,EAAW,KACjB,UAAW,EAAG,EAAO,IAAK,EAAU,GAAO,CAAS,EAC7C,QACE,UAET,SAAA,EAAC,MAAD,CAAK,UAAW,EAAO,oBACrB,SAAA,EAAC,MAAD,CAAK,UAAW,EAAO,WAAa,UAAc,CAAA,CAC/C,CAAA,CACC,CAAA,CAEZ"}

package/dist/esm/common/fab/fab.mjs

@@ -1,2 +1,2 @@
-"use client";import{ButtonStyleType as e}from"../button/button.types.mjs";import{renderIcon as t}from"../utils/renderIcon.mjs";import n from"./components/fabBase/fabBase.mjs";import r from"./fab.module.mjs";import{useState as i}from"react";import a from"classnames";import{FontAwesomeIcon as o}from"@fortawesome/react-fontawesome";import{faPlus as s}from"@fortawesome/free-solid-svg-icons";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u({children:u=null,size:d=`default`,menuEntries:f=[],onMenuEntryClicked:p=()=>{},onClick:m=()=>{},closeMenuOnEntryClicked:h=!0,className:g,style:_,classNames:v,styles:y,...b}){let[x,S]=i(!1);function C(){f.length>0&&S(e=>!e),m()}function w(e,t){e.stopPropagation(),h&&S(!1),p(t)}return l(`div`,{...b,className:a(r.fabContainer,g,v?.root),style:{..._,...y?.root},children:[c(`div`,{className:a(r.fabMenuBackdrop,x&&r.fabMenuBackdropOpen,v?.backdrop),style:y?.backdrop,onClick:e=>{e.stopPropagation(),S(!1)}}),c(`div`,{onClick:e=>e.stopPropagation(),children:c(n,{className:a(r.fab,v?.button),style:y?.button,size:d,onClick:C,children:l(`div`,{className:a(r.fabIcon,x&&r.fabIconMenuOpen,v?.icon),style:y?.icon,children:[c(`div`,{className:a(r.fabIconContent,!x&&r.fabIconContentShown),children:u}),c(`div`,{className:a(r.fabIconContent,x&&r.fabIconContentShown),children:c(o,{icon:s})})]})})}),c(`div`,{className:a(r.fabMenu,v?.menu),style:y?.menu,children:f.map(({id:i,label:o,icon:s})=>l(`div`,{className:a(r.fabMenuEntry,x&&r.fabMenuEntryShown,v?.menuEntry),style:y?.menuEntry,onClick:e=>w(e,i),children:[o&&c(`div`,{className:r.fabMenuEntryLabelContainer,children:c(`div`,{className:a(r.fabMenuEntryLabel,v?.menuEntryLabel),style:y?.menuEntryLabel,children:o})}),c(n,{size:`mini`,styleType:e.Default,children:t(s)})]},i))})]})}export{u as default};
+"use client";import{ThemeColor as e}from"../themeProvider/color.types.mjs";import{ButtonStyleType as t}from"../button/button.types.mjs";import{renderIcon as n}from"../utils/renderIcon.mjs";import r from"./components/fabBase/fabBase.mjs";import i from"./fab.module.mjs";import{useState as a}from"react";import o from"classnames";import{FontAwesomeIcon as s}from"@fortawesome/react-fontawesome";import{faPlus as c}from"@fortawesome/free-solid-svg-icons";import{jsx as l,jsxs as u}from"react/jsx-runtime";function d({children:d=null,size:f=`default`,menuEntries:p=[],onMenuEntryClicked:m=()=>{},onClick:h=()=>{},closeMenuOnEntryClicked:g=!0,className:_,style:v,classNames:y,styles:b,...x}){let[S,C]=a(!1);function w(){p.length>0&&C(e=>!e),h()}function T(e,t){e.stopPropagation(),g&&C(!1),m(t)}return u(`div`,{...x,className:o(i.fabContainer,_,y?.root),style:{...v,...b?.root},children:[l(`div`,{className:o(i.fabMenuBackdrop,S&&i.fabMenuBackdropOpen,y?.backdrop),style:b?.backdrop,onClick:e=>{e.stopPropagation(),C(!1)}}),l(`div`,{onClick:e=>e.stopPropagation(),children:l(r,{className:o(i.fab,y?.button),style:b?.button,size:f,onClick:w,children:u(`div`,{className:o(i.fabIcon,S&&i.fabIconMenuOpen,y?.icon),style:b?.icon,children:[l(`div`,{className:o(i.fabIconContent,!S&&i.fabIconContentShown),children:d}),l(`div`,{className:o(i.fabIconContent,S&&i.fabIconContentShown),children:l(s,{icon:c})})]})})}),l(`div`,{className:o(i.fabMenu,y?.menu),style:b?.menu,children:p.map(({id:a,label:s,icon:c})=>u(`div`,{className:o(i.fabMenuEntry,S&&i.fabMenuEntryShown,y?.menuEntry),style:b?.menuEntry,onClick:e=>T(e,a),children:[s&&l(`div`,{className:i.fabMenuEntryLabelContainer,children:l(`div`,{className:o(i.fabMenuEntryLabel,y?.menuEntryLabel),style:b?.menuEntryLabel,children:s})}),l(r,{size:`mini`,styleType:t.Plain,color:e.Neutral,children:n(c)})]},a))})]})}export{d as default};
 //# sourceMappingURL=fab.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"fab.mjs","names":[],"sources":["../../../../package/common/fab/fab.tsx"],"sourcesContent":["import { useState } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPlus as addIcon } from '@fortawesome/free-solid-svg-icons';\nimport { ButtonStyleType } from '../button/button.types';\n\nimport FabBase from './components/fabBase';\nimport type { FabProps } from './fab.types';\n\nimport styles from './fab.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\n\nfunction Fab({\n  children = null,\n  size = 'default',\n  menuEntries = [],\n  onMenuEntryClicked = () => {},\n  onClick = () => {},\n  closeMenuOnEntryClicked = true,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: FabProps) {\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  function handleFabClick() {\n    if (menuEntries.length > 0) setMenuOpen((prev) => !prev);\n    onClick();\n  }\n\n  function handleEntryClick(e: React.MouseEvent, id: string) {\n    e.stopPropagation();\n    if (closeMenuOnEntryClicked) setMenuOpen(false);\n    onMenuEntryClicked(id);\n  }\n\n  return (\n    <div\n      {...rest}\n      className={cx(styles.fabContainer, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      <div\n        className={cx(styles.fabMenuBackdrop, menuOpen && styles.fabMenuBackdropOpen, classNames?.backdrop)}\n        style={slotStyles?.backdrop}\n        onClick={(e) => {\n          e.stopPropagation();\n          setMenuOpen(false);\n        }}\n      />\n      <div onClick={(e) => e.stopPropagation()}>\n        <FabBase\n          className={cx(styles.fab, classNames?.button)}\n          style={slotStyles?.button}\n          size={size}\n          onClick={handleFabClick}\n        >\n          <div\n            className={cx(styles.fabIcon, menuOpen && styles.fabIconMenuOpen, classNames?.icon)}\n            style={slotStyles?.icon}\n          >\n            <div className={cx(styles.fabIconContent, !menuOpen && styles.fabIconContentShown)}>{children}</div>\n            <div className={cx(styles.fabIconContent, menuOpen && styles.fabIconContentShown)}>\n              <FontAwesomeIcon icon={addIcon} />\n            </div>\n          </div>\n        </FabBase>\n      </div>\n      <div className={cx(styles.fabMenu, classNames?.menu)} style={slotStyles?.menu}>\n        {menuEntries.map(({ id, label, icon }) => (\n          <div\n            key={id}\n            className={cx(styles.fabMenuEntry, menuOpen && styles.fabMenuEntryShown, classNames?.menuEntry)}\n            style={slotStyles?.menuEntry}\n            onClick={(e) => handleEntryClick(e, id)}\n          >\n            {label && (\n              <div className={styles.fabMenuEntryLabelContainer}>\n                <div\n                  className={cx(styles.fabMenuEntryLabel, classNames?.menuEntryLabel)}\n                  style={slotStyles?.menuEntryLabel}\n                >\n                  {label}\n                </div>\n              </div>\n            )}\n            <FabBase size='mini' styleType={ButtonStyleType.Default}>\n              {renderIcon(icon)}\n            </FabBase>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport default Fab;\n"],"mappings":"wbAYA,SAAS,EAAI,CACX,WAAW,KACX,OAAO,UACP,cAAc,CAAC,EACf,yBAA2B,CAAC,EAC5B,cAAgB,CAAC,EACjB,0BAA0B,GAC1B,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACQ,CACX,GAAM,CAAC,EAAU,GAAe,EAAS,EAAK,EAE9C,SAAS,GAAiB,CACpB,EAAY,OAAS,GAAG,EAAa,GAAS,CAAC,CAAI,EACvD,EAAQ,CACV,CAEA,SAAS,EAAiB,EAAqB,EAAY,CACzD,EAAE,gBAAgB,EACd,GAAyB,EAAY,EAAK,EAC9C,EAAmB,CAAE,CACvB,CAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,aAAc,EAAW,GAAY,IAAI,EAC9D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAHzC,SAAA,CAKE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,gBAAiB,GAAY,EAAO,oBAAqB,GAAY,QAAQ,EAClG,MAAO,GAAY,SACnB,QAAU,GAAM,CACd,EAAE,gBAAgB,EAClB,EAAY,EAAK,CACnB,CACD,CAAA,EACD,EAAC,MAAD,CAAK,QAAU,GAAM,EAAE,gBAAgB,EACrC,SAAA,EAAC,EAAD,CACE,UAAW,EAAG,EAAO,IAAK,GAAY,MAAM,EAC5C,MAAO,GAAY,OACb,OACN,QAAS,EAET,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,QAAS,GAAY,EAAO,gBAAiB,GAAY,IAAI,EAClF,MAAO,GAAY,KAFrB,SAAA,CAIE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,CAAC,GAAY,EAAO,mBAAmB,EAAI,UAAc,CAAA,EACnG,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,GAAY,EAAO,mBAAmB,EAC9E,SAAA,EAAC,EAAD,CAAiB,KAAM,CAAU,CAAA,CAC9B,CAAA,CACF,GACE,CAAA,CACN,CAAA,EACL,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,QAAS,GAAY,IAAI,EAAG,MAAO,GAAY,KACtE,SAAA,EAAY,KAAK,CAAE,KAAI,QAAO,UAC7B,EAAC,MAAD,CAEE,UAAW,EAAG,EAAO,aAAc,GAAY,EAAO,kBAAmB,GAAY,SAAS,EAC9F,MAAO,GAAY,UACnB,QAAU,GAAM,EAAiB,EAAG,CAAE,EAJxC,SAAA,CAMG,GACC,EAAC,MAAD,CAAK,UAAW,EAAO,2BACrB,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,kBAAmB,GAAY,cAAc,EAClE,MAAO,GAAY,eAElB,SAAA,CACE,CAAA,CACF,CAAA,EAEP,EAAC,EAAD,CAAS,KAAK,OAAO,UAAW,EAAgB,QAC7C,SAAA,EAAW,CAAI,CACT,CAAA,CACN,CAlBE,EAAA,CAkBF,CACN,CACE,CAAA,CACF,GAET"}
+{"version":3,"file":"fab.mjs","names":[],"sources":["../../../../package/common/fab/fab.tsx"],"sourcesContent":["import { useState } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPlus as addIcon } from '@fortawesome/free-solid-svg-icons';\nimport { ButtonStyleType } from '../button/button.types';\n\nimport FabBase from './components/fabBase';\nimport type { FabProps } from './fab.types';\n\nimport styles from './fab.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\nimport { ThemeColor } from '../themeProvider/color.types';\n\nfunction Fab({\n  children = null,\n  size = 'default',\n  menuEntries = [],\n  onMenuEntryClicked = () => {},\n  onClick = () => {},\n  closeMenuOnEntryClicked = true,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: FabProps) {\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  function handleFabClick() {\n    if (menuEntries.length > 0) setMenuOpen((prev) => !prev);\n    onClick();\n  }\n\n  function handleEntryClick(e: React.MouseEvent, id: string) {\n    e.stopPropagation();\n    if (closeMenuOnEntryClicked) setMenuOpen(false);\n    onMenuEntryClicked(id);\n  }\n\n  return (\n    <div\n      {...rest}\n      className={cx(styles.fabContainer, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      <div\n        className={cx(styles.fabMenuBackdrop, menuOpen && styles.fabMenuBackdropOpen, classNames?.backdrop)}\n        style={slotStyles?.backdrop}\n        onClick={(e) => {\n          e.stopPropagation();\n          setMenuOpen(false);\n        }}\n      />\n      <div onClick={(e) => e.stopPropagation()}>\n        <FabBase\n          className={cx(styles.fab, classNames?.button)}\n          style={slotStyles?.button}\n          size={size}\n          onClick={handleFabClick}\n        >\n          <div\n            className={cx(styles.fabIcon, menuOpen && styles.fabIconMenuOpen, classNames?.icon)}\n            style={slotStyles?.icon}\n          >\n            <div className={cx(styles.fabIconContent, !menuOpen && styles.fabIconContentShown)}>{children}</div>\n            <div className={cx(styles.fabIconContent, menuOpen && styles.fabIconContentShown)}>\n              <FontAwesomeIcon icon={addIcon} />\n            </div>\n          </div>\n        </FabBase>\n      </div>\n      <div className={cx(styles.fabMenu, classNames?.menu)} style={slotStyles?.menu}>\n        {menuEntries.map(({ id, label, icon }) => (\n          <div\n            key={id}\n            className={cx(styles.fabMenuEntry, menuOpen && styles.fabMenuEntryShown, classNames?.menuEntry)}\n            style={slotStyles?.menuEntry}\n            onClick={(e) => handleEntryClick(e, id)}\n          >\n            {label && (\n              <div className={styles.fabMenuEntryLabelContainer}>\n                <div\n                  className={cx(styles.fabMenuEntryLabel, classNames?.menuEntryLabel)}\n                  style={slotStyles?.menuEntryLabel}\n                >\n                  {label}\n                </div>\n              </div>\n            )}\n            <FabBase size='mini' styleType={ButtonStyleType.Plain} color={ThemeColor.Neutral}>\n              {renderIcon(icon)}\n            </FabBase>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport default Fab;\n"],"mappings":"sfAaA,SAAS,EAAI,CACX,WAAW,KACX,OAAO,UACP,cAAc,CAAC,EACf,yBAA2B,CAAC,EAC5B,cAAgB,CAAC,EACjB,0BAA0B,GAC1B,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACQ,CACX,GAAM,CAAC,EAAU,GAAe,EAAS,EAAK,EAE9C,SAAS,GAAiB,CACpB,EAAY,OAAS,GAAG,EAAa,GAAS,CAAC,CAAI,EACvD,EAAQ,CACV,CAEA,SAAS,EAAiB,EAAqB,EAAY,CACzD,EAAE,gBAAgB,EACd,GAAyB,EAAY,EAAK,EAC9C,EAAmB,CAAE,CACvB,CAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,aAAc,EAAW,GAAY,IAAI,EAC9D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAHzC,SAAA,CAKE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,gBAAiB,GAAY,EAAO,oBAAqB,GAAY,QAAQ,EAClG,MAAO,GAAY,SACnB,QAAU,GAAM,CACd,EAAE,gBAAgB,EAClB,EAAY,EAAK,CACnB,CACD,CAAA,EACD,EAAC,MAAD,CAAK,QAAU,GAAM,EAAE,gBAAgB,EACrC,SAAA,EAAC,EAAD,CACE,UAAW,EAAG,EAAO,IAAK,GAAY,MAAM,EAC5C,MAAO,GAAY,OACb,OACN,QAAS,EAET,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,QAAS,GAAY,EAAO,gBAAiB,GAAY,IAAI,EAClF,MAAO,GAAY,KAFrB,SAAA,CAIE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,CAAC,GAAY,EAAO,mBAAmB,EAAI,UAAc,CAAA,EACnG,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,GAAY,EAAO,mBAAmB,EAC9E,SAAA,EAAC,EAAD,CAAiB,KAAM,CAAU,CAAA,CAC9B,CAAA,CACF,GACE,CAAA,CACN,CAAA,EACL,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,QAAS,GAAY,IAAI,EAAG,MAAO,GAAY,KACtE,SAAA,EAAY,KAAK,CAAE,KAAI,QAAO,UAC7B,EAAC,MAAD,CAEE,UAAW,EAAG,EAAO,aAAc,GAAY,EAAO,kBAAmB,GAAY,SAAS,EAC9F,MAAO,GAAY,UACnB,QAAU,GAAM,EAAiB,EAAG,CAAE,EAJxC,SAAA,CAMG,GACC,EAAC,MAAD,CAAK,UAAW,EAAO,2BACrB,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,kBAAmB,GAAY,cAAc,EAClE,MAAO,GAAY,eAElB,SAAA,CACE,CAAA,CACF,CAAA,EAEP,EAAC,EAAD,CAAS,KAAK,OAAO,UAAW,EAAgB,MAAO,MAAO,EAAW,QACtE,SAAA,EAAW,CAAI,CACT,CAAA,CACN,CAlBE,EAAA,CAkBF,CACN,CACE,CAAA,CACF,GAET"}

package/dist/esm/common/flip/flip.mjs

@@ -1,2 +1,2 @@
-"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{isSelfActivation as t}from"../utils/activationKey.mjs";import n from"./flip.module.mjs";import{useEffect as r,useImperativeHandle as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u(){return typeof process<`u`&&!1}function d(){return typeof window<`u`&&window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches===!0}function f(f){let{ref:p,front:m,back:h,flipped:g,defaultFlipped:_=!1,flipOnClick:v=!1,flipAxis:y=`y`,reverse:b=!1,flipDuration:x=600,perspective:S=800,disabled:C=!1,onFlip:w,onFlipEnd:T,className:E,style:D,classNames:O,styles:k,...A}=e(`Flip`,f),j=g!==void 0,[M,N]=o(_),P=j?g:M;function F(e){j||N(e),w?.(e)}let I=()=>{v&&!C&&F(!P)},L=e=>{v&&!C&&t(e)&&(e.preventDefault(),F(!P))},R=a(!1);r(()=>{if(!R.current){R.current=!0;return}d()&&T?.(P)},[P]);let z=e=>{e.target===e.currentTarget&&e.propertyName===`transform`&&T?.(P)};i(p,()=>({flip(){if(j){u()&&console.warn("Flip: flip() called on a controlled instance, update the `flipped` prop instead.");return}F(!P)},setFlipped(e){if(j){u()&&console.warn("Flip: setFlipped() called on a controlled instance, update the `flipped` prop instead.");return}F(e)},reset(){j||N(!1)}}));let B=b?-180:180,V=y===`x`&&P?B:0,H=y===`y`&&P?B:0,U=y===`x`?B:0,W=y===`y`?B:0;return c(`div`,{...A,className:s(n.flip,v&&n.flipClickable,E,O?.root),style:{...D,...k?.root},onClick:I,onKeyDown:v?L:void 0,role:v?`button`:void 0,tabIndex:v?0:void 0,"aria-pressed":v?P:void 0,children:c(`div`,{className:s(n.flipPerspective,O?.perspective),style:{perspective:S===`none`?`none`:`${S}px`,...k?.perspective},children:l(`div`,{className:s(n.flipSurface,O?.surface),style:{transform:`rotateX(${V}deg) rotateY(${H}deg)`,"--flip-duration":`${x}ms`,...k?.surface},"data-flipped":P,onTransitionEnd:z,children:[c(`div`,{className:s(n.flipFront,O?.front),style:k?.front,children:m}),c(`div`,{className:s(n.flipBack,O?.back),style:{transform:`rotateX(${U}deg) rotateY(${W}deg)`,...k?.back},children:h})]})})})}export{f as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{isSelfActivation as t}from"../utils/activationKey.mjs";import{isDev as n}from"../utils/isDev.mjs";import r from"./flip.module.mjs";import{useEffect as i,useImperativeHandle as a,useRef as o,useState as s}from"react";import c from"classnames";import{jsx as l,jsxs as u}from"react/jsx-runtime";function d(){return typeof window<`u`&&window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches===!0}function f(f){let{ref:p,front:m,back:h,flipped:g,defaultFlipped:_=!1,flipOnClick:v=!1,flipAxis:y=`y`,reverse:b=!1,flipDuration:x=600,perspective:S=800,disabled:C=!1,onFlip:w,onFlipEnd:T,className:E,style:D,classNames:O,styles:k,...A}=e(`Flip`,f),j=g!==void 0,[M,N]=s(_),P=j?g:M;function F(e){j||N(e),w?.(e)}let I=()=>{v&&!C&&F(!P)},L=e=>{v&&!C&&t(e)&&(e.preventDefault(),F(!P))},R=o(!1);i(()=>{if(!R.current){R.current=!0;return}d()&&T?.(P)},[P]);let z=e=>{e.target===e.currentTarget&&e.propertyName===`transform`&&T?.(P)};a(p,()=>({flip(){if(j){n()&&console.warn("Flip: flip() called on a controlled instance, update the `flipped` prop instead.");return}F(!P)},setFlipped(e){if(j){n()&&console.warn("Flip: setFlipped() called on a controlled instance, update the `flipped` prop instead.");return}F(e)},reset(){j||N(!1)}}));let B=b?-180:180,V=y===`x`&&P?B:0,H=y===`y`&&P?B:0,U=y===`x`?B:0,W=y===`y`?B:0;return l(`div`,{...A,className:c(r.flip,v&&r.flipClickable,E,O?.root),style:{...D,...k?.root},onClick:I,onKeyDown:v?L:void 0,role:v?`button`:void 0,tabIndex:v?0:void 0,"aria-pressed":v?P:void 0,children:l(`div`,{className:c(r.flipPerspective,O?.perspective),style:{perspective:S===`none`?`none`:`${S}px`,...k?.perspective},children:u(`div`,{className:c(r.flipSurface,O?.surface),style:{transform:`rotateX(${V}deg) rotateY(${H}deg)`,"--flip-duration":`${x}ms`,...k?.surface},"data-flipped":P,onTransitionEnd:z,children:[l(`div`,{className:c(r.flipFront,O?.front),style:k?.front,children:m}),l(`div`,{className:c(r.flipBack,O?.back),style:{transform:`rotateX(${U}deg) rotateY(${W}deg)`,...k?.back},children:h})]})})})}export{f as default};
 //# sourceMappingURL=flip.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"flip.mjs","names":[],"sources":["../../../../package/common/flip/flip.tsx"],"sourcesContent":["import { useEffect, useImperativeHandle, useRef, useState, type CSSProperties, type KeyboardEvent } from 'react';\nimport cx from 'classnames';\n\nimport { useComponentDefaults } from '../configProvider';\nimport type { FlipProps } from './flip.types';\nimport styles from './flip.module.pcss';\nimport { isSelfActivation } from '../utils/activationKey';\n\n// Module-scoped ambient typing for the bundler-replaced NODE_ENV guard below. See bodyEnd.tsx.\ndeclare const process: { env: { NODE_ENV?: string } };\n\nfunction isDev(): boolean {\n  return typeof process !== 'undefined' && process.env.NODE_ENV !== 'production';\n}\n\nfunction prefersReducedMotion(): boolean {\n  return typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;\n}\n\nfunction Flip(props: FlipProps) {\n  const {\n    ref,\n    front,\n    back,\n    flipped,\n    defaultFlipped = false,\n    flipOnClick = false,\n    flipAxis = 'y',\n    reverse = false,\n    flipDuration = 600,\n    perspective = 800,\n    disabled = false,\n    onFlip,\n    onFlipEnd,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Flip', props);\n\n  const isControlled = flipped !== undefined;\n  const [internalFlipped, setInternalFlipped] = useState(defaultFlipped);\n  const effectiveFlipped = isControlled ? flipped : internalFlipped;\n\n  function doFlip(nextFlipped: boolean) {\n    if (!isControlled) setInternalFlipped(nextFlipped);\n    onFlip?.(nextFlipped);\n  }\n\n  const handleClick = () => {\n    if (!flipOnClick || disabled) return;\n    doFlip(!effectiveFlipped);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!flipOnClick || disabled) return;\n    if (!isSelfActivation(event)) return;\n    event.preventDefault();\n    doFlip(!effectiveFlipped);\n  };\n\n  const mountedRef = useRef(false);\n  useEffect(() => {\n    if (!mountedRef.current) {\n      mountedRef.current = true;\n      return;\n    }\n    if (prefersReducedMotion()) onFlipEnd?.(effectiveFlipped);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [effectiveFlipped]);\n\n  const handleTransitionEnd = (event: React.TransitionEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget || event.propertyName !== 'transform') return;\n    onFlipEnd?.(effectiveFlipped);\n  };\n\n  useImperativeHandle(ref, () => ({\n    flip() {\n      if (isControlled) {\n        if (isDev()) {\n          console.warn('Flip: flip() called on a controlled instance, update the `flipped` prop instead.');\n        }\n        return;\n      }\n      doFlip(!effectiveFlipped);\n    },\n    setFlipped(value: boolean) {\n      if (isControlled) {\n        if (isDev()) {\n          console.warn('Flip: setFlipped() called on a controlled instance, update the `flipped` prop instead.');\n        }\n        return;\n      }\n      doFlip(value);\n    },\n    reset() {\n      if (!isControlled) setInternalFlipped(false);\n    },\n  }));\n\n  // `reverse` flips the rotation sign on the same hinge axis (+180deg vs -180deg), so adjacent\n  // flips can sweep opposite ways without changing which edge they hinge on. The back face's\n  // own static rotation (below) always uses this same sign, unconditionally: two rotations of\n  // the same sign about the same axis (surface's + back's own) sum to +/-360deg, which is a full\n  // turn back to a right-reading, forward-facing back, regardless of whether `reverse` is set.\n  const turn = reverse ? -180 : 180;\n  const flipOffsetX = flipAxis === 'x' && effectiveFlipped ? turn : 0;\n  const flipOffsetY = flipAxis === 'y' && effectiveFlipped ? turn : 0;\n  const backOffsetX = flipAxis === 'x' ? turn : 0;\n  const backOffsetY = flipAxis === 'y' ? turn : 0;\n\n  return (\n    <div\n      {...rest}\n      className={cx(styles.flip, flipOnClick && styles.flipClickable, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n      onClick={handleClick}\n      onKeyDown={flipOnClick ? handleKeyDown : undefined}\n      role={flipOnClick ? 'button' : undefined}\n      tabIndex={flipOnClick ? 0 : undefined}\n      aria-pressed={flipOnClick ? effectiveFlipped : undefined}\n    >\n      <div\n        className={cx(styles.flipPerspective, classNames?.perspective)}\n        style={{\n          perspective: perspective === 'none' ? 'none' : `${perspective}px`,\n          ...slotStyles?.perspective,\n        }}\n      >\n        <div\n          className={cx(styles.flipSurface, classNames?.surface)}\n          style={\n            {\n              transform: `rotateX(${flipOffsetX}deg) rotateY(${flipOffsetY}deg)`,\n              '--flip-duration': `${flipDuration}ms`,\n              ...slotStyles?.surface,\n            } as CSSProperties & Record<'--flip-duration', string>\n          }\n          data-flipped={effectiveFlipped}\n          onTransitionEnd={handleTransitionEnd}\n        >\n          <div className={cx(styles.flipFront, classNames?.front)} style={slotStyles?.front}>\n            {front}\n          </div>\n          <div\n            className={cx(styles.flipBack, classNames?.back)}\n            style={{\n              transform: `rotateX(${backOffsetX}deg) rotateY(${backOffsetY}deg)`,\n              ...slotStyles?.back,\n            }}\n          >\n            {back}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Flip;\n"],"mappings":"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"}
+{"version":3,"file":"flip.mjs","names":[],"sources":["../../../../package/common/flip/flip.tsx"],"sourcesContent":["import { useEffect, useImperativeHandle, useRef, useState, type CSSProperties, type KeyboardEvent } from 'react';\nimport cx from 'classnames';\n\nimport { useComponentDefaults } from '../configProvider';\nimport type { FlipProps } from './flip.types';\nimport styles from './flip.module.pcss';\nimport { isSelfActivation } from '../utils/activationKey';\nimport { isDev } from '../utils/isDev';\n\nfunction prefersReducedMotion(): boolean {\n  return typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;\n}\n\nfunction Flip(props: FlipProps) {\n  const {\n    ref,\n    front,\n    back,\n    flipped,\n    defaultFlipped = false,\n    flipOnClick = false,\n    flipAxis = 'y',\n    reverse = false,\n    flipDuration = 600,\n    perspective = 800,\n    disabled = false,\n    onFlip,\n    onFlipEnd,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Flip', props);\n\n  const isControlled = flipped !== undefined;\n  const [internalFlipped, setInternalFlipped] = useState(defaultFlipped);\n  const effectiveFlipped = isControlled ? flipped : internalFlipped;\n\n  function doFlip(nextFlipped: boolean) {\n    if (!isControlled) setInternalFlipped(nextFlipped);\n    onFlip?.(nextFlipped);\n  }\n\n  const handleClick = () => {\n    if (!flipOnClick || disabled) return;\n    doFlip(!effectiveFlipped);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!flipOnClick || disabled) return;\n    if (!isSelfActivation(event)) return;\n    event.preventDefault();\n    doFlip(!effectiveFlipped);\n  };\n\n  const mountedRef = useRef(false);\n  useEffect(() => {\n    if (!mountedRef.current) {\n      mountedRef.current = true;\n      return;\n    }\n    if (prefersReducedMotion()) onFlipEnd?.(effectiveFlipped);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [effectiveFlipped]);\n\n  const handleTransitionEnd = (event: React.TransitionEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget || event.propertyName !== 'transform') return;\n    onFlipEnd?.(effectiveFlipped);\n  };\n\n  useImperativeHandle(ref, () => ({\n    flip() {\n      if (isControlled) {\n        if (isDev()) {\n          console.warn('Flip: flip() called on a controlled instance, update the `flipped` prop instead.');\n        }\n        return;\n      }\n      doFlip(!effectiveFlipped);\n    },\n    setFlipped(value: boolean) {\n      if (isControlled) {\n        if (isDev()) {\n          console.warn('Flip: setFlipped() called on a controlled instance, update the `flipped` prop instead.');\n        }\n        return;\n      }\n      doFlip(value);\n    },\n    reset() {\n      if (!isControlled) setInternalFlipped(false);\n    },\n  }));\n\n  // `reverse` flips the rotation sign on the same hinge axis (+180deg vs -180deg), so adjacent\n  // flips can sweep opposite ways without changing which edge they hinge on. The back face's\n  // own static rotation (below) always uses this same sign, unconditionally: two rotations of\n  // the same sign about the same axis (surface's + back's own) sum to +/-360deg, which is a full\n  // turn back to a right-reading, forward-facing back, regardless of whether `reverse` is set.\n  const turn = reverse ? -180 : 180;\n  const flipOffsetX = flipAxis === 'x' && effectiveFlipped ? turn : 0;\n  const flipOffsetY = flipAxis === 'y' && effectiveFlipped ? turn : 0;\n  const backOffsetX = flipAxis === 'x' ? turn : 0;\n  const backOffsetY = flipAxis === 'y' ? turn : 0;\n\n  return (\n    <div\n      {...rest}\n      className={cx(styles.flip, flipOnClick && styles.flipClickable, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n      onClick={handleClick}\n      onKeyDown={flipOnClick ? handleKeyDown : undefined}\n      role={flipOnClick ? 'button' : undefined}\n      tabIndex={flipOnClick ? 0 : undefined}\n      aria-pressed={flipOnClick ? effectiveFlipped : undefined}\n    >\n      <div\n        className={cx(styles.flipPerspective, classNames?.perspective)}\n        style={{\n          perspective: perspective === 'none' ? 'none' : `${perspective}px`,\n          ...slotStyles?.perspective,\n        }}\n      >\n        <div\n          className={cx(styles.flipSurface, classNames?.surface)}\n          style={\n            {\n              transform: `rotateX(${flipOffsetX}deg) rotateY(${flipOffsetY}deg)`,\n              '--flip-duration': `${flipDuration}ms`,\n              ...slotStyles?.surface,\n            } as CSSProperties & Record<'--flip-duration', string>\n          }\n          data-flipped={effectiveFlipped}\n          onTransitionEnd={handleTransitionEnd}\n        >\n          <div className={cx(styles.flipFront, classNames?.front)} style={slotStyles?.front}>\n            {front}\n          </div>\n          <div\n            className={cx(styles.flipBack, classNames?.back)}\n            style={{\n              transform: `rotateX(${backOffsetX}deg) rotateY(${backOffsetY}deg)`,\n              ...slotStyles?.back,\n            }}\n          >\n            {back}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Flip;\n"],"mappings":"0YASA,SAAS,GAAgC,CACvC,OAAO,OAAO,OAAW,KAAe,OAAO,aAAa,kCAAkC,CAAC,CAAC,UAAY,EAC9G,CAEA,SAAS,EAAK,EAAkB,CAC9B,GAAM,CACJ,MACA,QACA,OACA,UACA,iBAAiB,GACjB,cAAc,GACd,WAAW,IACX,UAAU,GACV,eAAe,IACf,cAAc,IACd,WAAW,GACX,SACA,YACA,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,OAAQ,CAAK,EAEhC,EAAe,IAAY,IAAA,GAC3B,CAAC,EAAiB,GAAsB,EAAS,CAAc,EAC/D,EAAmB,EAAe,EAAU,EAElD,SAAS,EAAO,EAAsB,CAC/B,GAAc,EAAmB,CAAW,EACjD,IAAS,CAAW,CACtB,CAEA,IAAM,MAAoB,CACnB,GAAe,IACpB,EAAO,CAAC,CAAgB,CAC1B,EAEM,EAAiB,GAAyC,CACzD,GAAe,IACf,EAAiB,CAAK,IAC3B,EAAM,eAAe,EACrB,EAAO,CAAC,CAAgB,EAC1B,EAEM,EAAa,EAAO,EAAK,EAC/B,MAAgB,CACd,GAAI,CAAC,EAAW,QAAS,CACvB,EAAW,QAAU,GACrB,MACF,CACI,EAAqB,GAAG,IAAY,CAAgB,CAE1D,EAAG,CAAC,CAAgB,CAAC,EAErB,IAAM,EAAuB,GAAiD,CACxE,EAAM,SAAW,EAAM,eAAiB,EAAM,eAAiB,aACnE,IAAY,CAAgB,CAC9B,EAEA,EAAoB,OAAY,CAC9B,MAAO,CACL,GAAI,EAAc,CACZ,EAAM,GACR,QAAQ,KAAK,kFAAkF,EAEjG,MACF,CACA,EAAO,CAAC,CAAgB,CAC1B,EACA,WAAW,EAAgB,CACzB,GAAI,EAAc,CACZ,EAAM,GACR,QAAQ,KAAK,wFAAwF,EAEvG,MACF,CACA,EAAO,CAAK,CACd,EACA,OAAQ,CACD,GAAc,EAAmB,EAAK,CAC7C,CACF,EAAE,EAOF,IAAM,EAAO,EAAU,KAAO,IACxB,EAAc,IAAa,KAAO,EAAmB,EAAO,EAC5D,EAAc,IAAa,KAAO,EAAmB,EAAO,EAC5D,EAAc,IAAa,IAAM,EAAO,EACxC,EAAc,IAAa,IAAM,EAAO,EAE9C,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,KAAM,GAAe,EAAO,cAAe,EAAW,GAAY,IAAI,EAC3F,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EACvC,QAAS,EACT,UAAW,EAAc,EAAgB,IAAA,GACzC,KAAM,EAAc,SAAW,IAAA,GAC/B,SAAU,EAAc,EAAI,IAAA,GAC5B,eAAc,EAAc,EAAmB,IAAA,GAE/C,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,gBAAiB,GAAY,WAAW,EAC7D,MAAO,CACL,YAAa,IAAgB,OAAS,OAAS,GAAG,EAAY,IAC9D,GAAG,GAAY,WACjB,EAEA,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,YAAa,GAAY,OAAO,EACrD,MACE,CACE,UAAW,WAAW,EAAY,eAAe,EAAY,MAC7D,kBAAmB,GAAG,EAAa,IACnC,GAAG,GAAY,OACjB,EAEF,eAAc,EACd,gBAAiB,EAVnB,SAAA,CAYE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,UAAW,GAAY,KAAK,EAAG,MAAO,GAAY,MACzE,SAAA,CACE,CAAA,EACL,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,SAAU,GAAY,IAAI,EAC/C,MAAO,CACL,UAAW,WAAW,EAAY,eAAe,EAAY,MAC7D,GAAG,GAAY,IACjB,EAEC,SAAA,CACE,CAAA,CACF,GACF,CAAA,CACF,CAAA,CAET"}