@ahrowe/ui 0.33.0 → 0.34.0

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

@@ -1 +1 @@
-{"version":3,"file":"actionIcon.module.mjs","names":[],"sources":["../../../../package/common/actionIcon/actionIcon.module.pcss"],"sourcesContent":[".actionIcon {\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  padding: 4px;\n\n  &:hover {\n    filter: brightness(0.8);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"actionIcon.module.mjs","names":[],"sources":["../../../../package/common/actionIcon/actionIcon.module.pcss"],"sourcesContent":[".actionIcon {\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  padding: 4px;\n  width: fit-content;\n\n  &:hover {\n    filter: brightness(0.8);\n  }\n}\n"],"mappings":""}

package/dist/esm/common/breadcrumb/breadcrumb.mjs

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{renderIcon as n}from"../utils/renderIcon.mjs";import r from"../interactableDiv/index.mjs";import i from"../actionIcon/actionIcon.mjs";import a from"../floatingMenu/floatingMenu.mjs";import o from"./breadcrumb.module.mjs";import{useState as s}from"react";import c from"classnames";import{FontAwesomeIcon as l}from"@fortawesome/react-fontawesome";import{faChevronRight as u,faEllipsis as d}from"@fortawesome/free-solid-svg-icons";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";var h={showHidden:`Show hidden breadcrumbs`};function g(e,t){let n=e.map((e,t)=>({item:e,index:t}));if(!t||e.length<=t)return{leading:n,hidden:[],trailing:[]};let r=Math.max(1,t-2),i=e.length-1-r;return i<=0?{leading:n,hidden:[],trailing:[]}:{leading:n.slice(0,1),hidden:n.slice(1,1+i),trailing:n.slice(1+i)}}function _(n){let{items:r=[],separator:f,maxItems:_,"aria-label":y=`Breadcrumb`,className:b,style:x,classNames:S,styles:C,labels:w,...T}=e(`Breadcrumb`,n),E=t(`Breadcrumb`,w,h),[D,O]=s(!1),{leading:k,hidden:A,trailing:j}=g(r,_),M=r.length-1;function N(e){return e===M?null:p(`span`,{className:c(o.breadcrumbSeparator,S?.separator),style:C?.separator,children:f??p(l,{icon:u})})}function P({item:e,index:t}){return m(`li`,{className:c(o.breadcrumbItem,S?.item),style:C?.item,children:[v(e,t===M,o,S,C),N(t)]},e.id??t)}return p(`nav`,{...T,"aria-label":y,className:c(o.breadcrumb,S?.root,b),style:{...x,...C?.root},children:m(`ol`,{className:c(o.breadcrumbList,S?.list),style:C?.list,children:[k.map(P),A.length>0&&m(`li`,{className:c(o.breadcrumbItem,S?.item),style:C?.item,children:[p(a,{isOpen:D,onOpenChange:O,dontCloseOnChildClick:!0,content:p(`ul`,{className:c(o.breadcrumbHiddenList,S?.hiddenList),style:C?.hiddenList,children:A.map(({item:e,index:t})=>p(`li`,{className:c(o.breadcrumbHiddenItem,S?.hiddenItem),style:C?.hiddenItem,children:v({...e,onClick:t=>{e.onClick?.(t),O(!1)}},!1,o,S,C)},e.id??t))}),children:p(i,{icon:d,title:E.showHidden,"aria-label":E.showHidden,className:c(o.breadcrumbEllipsis,S?.ellipsis),style:C?.ellipsis})}),N(A[A.length-1].index)]}),j.map(P)]})})}function v(e,t,i,a,o){let s=m(f,{children:[e.icon?n(e.icon,{className:c(i.breadcrumbIcon,a?.icon),style:o?.icon}):null,e.label]});return t?p(`span`,{"aria-current":`page`,className:c(i.breadcrumbCurrent,a?.current),style:o?.current,children:s}):e.disabled?p(`span`,{className:c(i.breadcrumbLink,i.breadcrumbLinkDisabled,a?.link),style:o?.link,children:s}):e.href?p(`a`,{href:e.href,onClick:e.onClick,className:c(i.breadcrumbLink,a?.link),style:o?.link,children:s}):e.onClick?p(r,{onClick:e.onClick,className:c(i.breadcrumbLink,a?.link),style:o?.link,children:s}):p(`span`,{className:c(i.breadcrumbLink,i.breadcrumbLinkDisabled,a?.link),style:o?.link,children:s})}export{_ as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{renderIcon as n}from"../utils/renderIcon.mjs";import r from"../interactableDiv/index.mjs";import i from"../actionIcon/actionIcon.mjs";import{PopoverAlign as a,PopoverPlacement as o}from"../popover/popover.types.mjs";import s from"../popover/popover.mjs";import c from"./breadcrumb.module.mjs";import{useState as l}from"react";import u from"classnames";import{FontAwesomeIcon as d}from"@fortawesome/react-fontawesome";import{faChevronRight as f,faEllipsis as p}from"@fortawesome/free-solid-svg-icons";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";var _={showHidden:`Show hidden breadcrumbs`};function v(e,t){let n=e.map((e,t)=>({item:e,index:t}));if(!t||e.length<=t)return{leading:n,hidden:[],trailing:[]};let r=Math.max(1,t-2),i=e.length-1-r;return i<=0?{leading:n,hidden:[],trailing:[]}:{leading:n.slice(0,1),hidden:n.slice(1,1+i),trailing:n.slice(1+i)}}function y(n){let{items:r=[],separator:m,maxItems:y,"aria-label":x=`Breadcrumb`,className:S,style:C,classNames:w,styles:T,labels:E,...D}=e(`Breadcrumb`,n),O=t(`Breadcrumb`,E,_),[k,A]=l(!1),{leading:j,hidden:M,trailing:N}=v(r,y),P=r.length-1;function F(e){return e===P?null:h(`span`,{className:u(c.breadcrumbSeparator,w?.separator),style:T?.separator,children:m??h(d,{icon:f})})}function I({item:e,index:t}){return g(`li`,{className:u(c.breadcrumbItem,w?.item),style:T?.item,children:[b(e,t===P,c,w,T),F(t)]},e.id??t)}return h(`nav`,{...D,"aria-label":x,className:u(c.breadcrumb,w?.root,S),style:{...C,...T?.root},children:g(`ol`,{className:u(c.breadcrumbList,w?.list),style:T?.list,children:[j.map(I),M.length>0&&g(`li`,{className:u(c.breadcrumbItem,w?.item),style:T?.item,children:[h(s,{isOpen:k,onOpenChange:A,placement:o.Bottom,align:a.Start,constrainWidth:!1,classNames:{panel:c.breadcrumbHiddenPanel},content:h(`ul`,{className:u(c.breadcrumbHiddenList,w?.hiddenList),style:T?.hiddenList,children:M.map(({item:e,index:t})=>h(`li`,{className:u(c.breadcrumbHiddenItem,w?.hiddenItem),style:T?.hiddenItem,children:b({...e,onClick:t=>{e.onClick?.(t),A(!1)}},!1,c,w,T)},e.id??t))}),children:h(i,{icon:p,title:O.showHidden,"aria-label":O.showHidden,"aria-expanded":k,className:u(c.breadcrumbEllipsis,w?.ellipsis),style:T?.ellipsis})}),F(M[M.length-1].index)]}),N.map(I)]})})}function b(e,t,i,a,o){let s=g(m,{children:[e.icon?n(e.icon,{className:u(i.breadcrumbIcon,a?.icon),style:o?.icon}):null,e.label]});return t?h(`span`,{"aria-current":`page`,className:u(i.breadcrumbCurrent,a?.current),style:o?.current,children:s}):e.disabled?h(`span`,{className:u(i.breadcrumbLink,i.breadcrumbLinkDisabled,a?.link),style:o?.link,children:s}):e.href?h(`a`,{href:e.href,onClick:e.onClick,className:u(i.breadcrumbLink,a?.link),style:o?.link,children:s}):e.onClick?h(r,{onClick:e.onClick,className:u(i.breadcrumbLink,a?.link),style:o?.link,children:s}):h(`span`,{className:u(i.breadcrumbLink,i.breadcrumbLinkDisabled,a?.link),style:o?.link,children:s})}export{y as default};
 //# sourceMappingURL=breadcrumb.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.mjs","names":[],"sources":["../../../../package/common/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronRight, faEllipsis } from '@fortawesome/free-solid-svg-icons';\n\nimport InteractableDiv from '../interactableDiv';\nimport ActionIcon from '../actionIcon';\nimport FloatingMenu from '../floatingMenu';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport type { BreadcrumbItem, BreadcrumbLabels, BreadcrumbProps } from './breadcrumb.types';\n\nimport styles from './breadcrumb.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\n\ninterface IndexedItem {\n  item: BreadcrumbItem;\n  index: number;\n}\n\nconst DEFAULT_LABELS: Required<BreadcrumbLabels> = {\n  showHidden: 'Show hidden breadcrumbs',\n};\n\nfunction getGroups(items: BreadcrumbItem[], maxItems?: number) {\n  const indexed = items.map((item, index) => ({ item, index }));\n  if (!maxItems || items.length <= maxItems) {\n    return { leading: indexed, hidden: [] as IndexedItem[], trailing: [] as IndexedItem[] };\n  }\n\n  const trailingCount = Math.max(1, maxItems - 2);\n  const hiddenCount = items.length - 1 - trailingCount;\n  if (hiddenCount <= 0) {\n    return { leading: indexed, hidden: [] as IndexedItem[], trailing: [] as IndexedItem[] };\n  }\n\n  return {\n    leading: indexed.slice(0, 1),\n    hidden: indexed.slice(1, 1 + hiddenCount),\n    trailing: indexed.slice(1 + hiddenCount),\n  };\n}\n\nfunction Breadcrumb(props: BreadcrumbProps): ReactElement {\n  const {\n    items = [],\n    separator,\n    maxItems,\n    'aria-label': ariaLabel = 'Breadcrumb',\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    labels,\n    ...rest\n  } = useComponentDefaults('Breadcrumb', props);\n  const text = useLabels('Breadcrumb', labels, DEFAULT_LABELS);\n\n  const [isHiddenMenuOpen, setIsHiddenMenuOpen] = useState(false);\n  const { leading, hidden, trailing } = getGroups(items, maxItems);\n  const lastIndex = items.length - 1;\n\n  function renderSeparatorAfter(index: number) {\n    if (index === lastIndex) return null;\n    return (\n      <span className={cx(styles.breadcrumbSeparator, classNames?.separator)} style={slotStyles?.separator}>\n        {separator ?? <FontAwesomeIcon icon={faChevronRight} />}\n      </span>\n    );\n  }\n\n  function renderItem({ item, index }: IndexedItem) {\n    return (\n      <li key={item.id ?? index} className={cx(styles.breadcrumbItem, classNames?.item)} style={slotStyles?.item}>\n        {renderCrumb(item, index === lastIndex, styles, classNames, slotStyles)}\n        {renderSeparatorAfter(index)}\n      </li>\n    );\n  }\n\n  return (\n    <nav\n      {...rest}\n      aria-label={ariaLabel}\n      className={cx(styles.breadcrumb, classNames?.root, className)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      <ol className={cx(styles.breadcrumbList, classNames?.list)} style={slotStyles?.list}>\n        {leading.map(renderItem)}\n\n        {hidden.length > 0 && (\n          <li className={cx(styles.breadcrumbItem, classNames?.item)} style={slotStyles?.item}>\n            <FloatingMenu\n              isOpen={isHiddenMenuOpen}\n              onOpenChange={setIsHiddenMenuOpen}\n              dontCloseOnChildClick\n              content={\n                <ul className={cx(styles.breadcrumbHiddenList, classNames?.hiddenList)} style={slotStyles?.hiddenList}>\n                  {hidden.map(({ item, index }) => (\n                    <li\n                      key={item.id ?? index}\n                      className={cx(styles.breadcrumbHiddenItem, classNames?.hiddenItem)}\n                      style={slotStyles?.hiddenItem}\n                    >\n                      {renderCrumb(\n                        {\n                          ...item,\n                          onClick: (event) => {\n                            item.onClick?.(event);\n                            setIsHiddenMenuOpen(false);\n                          },\n                        },\n                        false,\n                        styles,\n                        classNames,\n                        slotStyles,\n                      )}\n                    </li>\n                  ))}\n                </ul>\n              }\n            >\n              <ActionIcon\n                icon={faEllipsis}\n                title={text.showHidden}\n                aria-label={text.showHidden}\n                className={cx(styles.breadcrumbEllipsis, classNames?.ellipsis)}\n                style={slotStyles?.ellipsis}\n              />\n            </FloatingMenu>\n            {renderSeparatorAfter(hidden[hidden.length - 1].index)}\n          </li>\n        )}\n\n        {trailing.map(renderItem)}\n      </ol>\n    </nav>\n  );\n}\n\nfunction renderCrumb(\n  item: BreadcrumbItem,\n  isCurrent: boolean,\n  styles: Record<string, string>,\n  classNames: BreadcrumbProps['classNames'],\n  slotStyles: BreadcrumbProps['styles'],\n) {\n  const content = (\n    <>\n      {item.icon\n        ? renderIcon(item.icon, {\n            className: cx(styles.breadcrumbIcon, classNames?.icon),\n            style: slotStyles?.icon,\n          })\n        : null}\n      {item.label}\n    </>\n  );\n\n  if (isCurrent) {\n    return (\n      <span\n        aria-current='page'\n        className={cx(styles.breadcrumbCurrent, classNames?.current)}\n        style={slotStyles?.current}\n      >\n        {content}\n      </span>\n    );\n  }\n\n  if (item.disabled) {\n    return (\n      <span\n        className={cx(styles.breadcrumbLink, styles.breadcrumbLinkDisabled, classNames?.link)}\n        style={slotStyles?.link}\n      >\n        {content}\n      </span>\n    );\n  }\n\n  if (item.href) {\n    return (\n      <a\n        href={item.href}\n        onClick={item.onClick}\n        className={cx(styles.breadcrumbLink, classNames?.link)}\n        style={slotStyles?.link}\n      >\n        {content}\n      </a>\n    );\n  }\n\n  if (item.onClick) {\n    return (\n      <InteractableDiv\n        onClick={item.onClick}\n        className={cx(styles.breadcrumbLink, classNames?.link)}\n        style={slotStyles?.link}\n      >\n        {content}\n      </InteractableDiv>\n    );\n  }\n\n  return (\n    <span\n      className={cx(styles.breadcrumbLink, styles.breadcrumbLinkDisabled, classNames?.link)}\n      style={slotStyles?.link}\n    >\n      {content}\n    </span>\n  );\n}\n\nexport default Breadcrumb;\n"],"mappings":"ioBAoBA,IAAM,EAA6C,CACjD,WAAY,yBACd,EAEA,SAAS,EAAU,EAAyB,EAAmB,CAC7D,IAAM,EAAU,EAAM,KAAK,EAAM,KAAW,CAAE,OAAM,OAAM,EAAE,EAC5D,GAAI,CAAC,GAAY,EAAM,QAAU,EAC/B,MAAO,CAAE,QAAS,EAAS,OAAQ,CAAC,EAAoB,SAAU,CAAC,CAAmB,EAGxF,IAAM,EAAgB,KAAK,IAAI,EAAG,EAAW,CAAC,EACxC,EAAc,EAAM,OAAS,EAAI,EAKvC,OAJI,GAAe,EACV,CAAE,QAAS,EAAS,OAAQ,CAAC,EAAoB,SAAU,CAAC,CAAmB,EAGjF,CACL,QAAS,EAAQ,MAAM,EAAG,CAAC,EAC3B,OAAQ,EAAQ,MAAM,EAAG,EAAI,CAAW,EACxC,SAAU,EAAQ,MAAM,EAAI,CAAW,CACzC,CACF,CAEA,SAAS,EAAW,EAAsC,CACxD,GAAM,CACJ,QAAQ,CAAC,EACT,YACA,WACA,aAAc,EAAY,aAC1B,YACA,QACA,aACA,OAAQ,EACR,SACA,GAAG,GACD,EAAqB,aAAc,CAAK,EACtC,EAAO,EAAU,aAAc,EAAQ,CAAc,EAErD,CAAC,EAAkB,GAAuB,EAAS,EAAK,EACxD,CAAE,UAAS,SAAQ,YAAa,EAAU,EAAO,CAAQ,EACzD,EAAY,EAAM,OAAS,EAEjC,SAAS,EAAqB,EAAe,CAE3C,OADI,IAAU,EAAkB,KAE9B,EAAC,OAAD,CAAM,UAAW,EAAG,EAAO,oBAAqB,GAAY,SAAS,EAAG,MAAO,GAAY,UACxF,SAAA,GAAa,EAAC,EAAD,CAAiB,KAAM,CAAiB,CAAA,CAClD,CAAA,CAEV,CAEA,SAAS,EAAW,CAAE,OAAM,SAAsB,CAChD,OACE,EAAC,KAAD,CAA2B,UAAW,EAAG,EAAO,eAAgB,GAAY,IAAI,EAAG,MAAO,GAAY,KAAtG,SAAA,CACG,EAAY,EAAM,IAAU,EAAW,EAAQ,EAAY,CAAU,EACrE,EAAqB,CAAK,CACzB,CAHK,EAAA,EAAK,IAAM,CAGhB,CAER,CAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,aAAY,EACZ,UAAW,EAAG,EAAO,WAAY,GAAY,KAAM,CAAS,EAC5D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAEvC,SAAA,EAAC,KAAD,CAAI,UAAW,EAAG,EAAO,eAAgB,GAAY,IAAI,EAAG,MAAO,GAAY,KAA/E,SAAA,CACG,EAAQ,IAAI,CAAU,EAEtB,EAAO,OAAS,GACf,EAAC,KAAD,CAAI,UAAW,EAAG,EAAO,eAAgB,GAAY,IAAI,EAAG,MAAO,GAAY,KAA/E,SAAA,CACE,EAAC,EAAD,CACE,OAAQ,EACR,aAAc,EACd,sBAAA,GACA,QACE,EAAC,KAAD,CAAI,UAAW,EAAG,EAAO,qBAAsB,GAAY,UAAU,EAAG,MAAO,GAAY,WACxF,SAAA,EAAO,KAAK,CAAE,OAAM,WACnB,EAAC,KAAD,CAEE,UAAW,EAAG,EAAO,qBAAsB,GAAY,UAAU,EACjE,MAAO,GAAY,WAElB,SAAA,EACC,CACE,GAAG,EACH,QAAU,GAAU,CAClB,EAAK,UAAU,CAAK,EACpB,EAAoB,EAAK,CAC3B,CACF,EACA,GACA,EACA,EACA,CACF,CACE,EAjBG,EAAK,IAAM,CAiBd,CACL,CACC,CAAA,EAGN,SAAA,EAAC,EAAD,CACE,KAAM,EACN,MAAO,EAAK,WACZ,aAAY,EAAK,WACjB,UAAW,EAAG,EAAO,mBAAoB,GAAY,QAAQ,EAC7D,MAAO,GAAY,QACpB,CAAA,CACW,CAAA,EACb,EAAqB,EAAO,EAAO,OAAS,EAAE,CAAC,KAAK,CACnD,IAGL,EAAS,IAAI,CAAU,CACtB,GACD,CAAA,CAET,CAEA,SAAS,EACP,EACA,EACA,EACA,EACA,EACA,CACA,IAAM,EACJ,EAAA,EAAA,CAAA,SAAA,CACG,EAAK,KACF,EAAW,EAAK,KAAM,CACpB,UAAW,EAAG,EAAO,eAAgB,GAAY,IAAI,EACrD,MAAO,GAAY,IACrB,CAAC,EACD,KACH,EAAK,KACN,CAAA,CAAA,EAmDJ,OAhDI,EAEA,EAAC,OAAD,CACE,eAAa,OACb,UAAW,EAAG,EAAO,kBAAmB,GAAY,OAAO,EAC3D,MAAO,GAAY,QAElB,SAAA,CACG,CAAA,EAIN,EAAK,SAEL,EAAC,OAAD,CACE,UAAW,EAAG,EAAO,eAAgB,EAAO,uBAAwB,GAAY,IAAI,EACpF,MAAO,GAAY,KAElB,SAAA,CACG,CAAA,EAIN,EAAK,KAEL,EAAC,IAAD,CACE,KAAM,EAAK,KACX,QAAS,EAAK,QACd,UAAW,EAAG,EAAO,eAAgB,GAAY,IAAI,EACrD,MAAO,GAAY,KAElB,SAAA,CACA,CAAA,EAIH,EAAK,QAEL,EAAC,EAAD,CACE,QAAS,EAAK,QACd,UAAW,EAAG,EAAO,eAAgB,GAAY,IAAI,EACrD,MAAO,GAAY,KAElB,SAAA,CACc,CAAA,EAKnB,EAAC,OAAD,CACE,UAAW,EAAG,EAAO,eAAgB,EAAO,uBAAwB,GAAY,IAAI,EACpF,MAAO,GAAY,KAElB,SAAA,CACG,CAAA,CAEV"}
+{"version":3,"file":"breadcrumb.mjs","names":[],"sources":["../../../../package/common/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronRight, faEllipsis } from '@fortawesome/free-solid-svg-icons';\n\nimport InteractableDiv from '../interactableDiv';\nimport ActionIcon from '../actionIcon';\nimport Popover from '../popover';\nimport { PopoverAlign, PopoverPlacement } from '../popover/popover.types';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport type { BreadcrumbItem, BreadcrumbLabels, BreadcrumbProps } from './breadcrumb.types';\n\nimport styles from './breadcrumb.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\n\ninterface IndexedItem {\n  item: BreadcrumbItem;\n  index: number;\n}\n\nconst DEFAULT_LABELS: Required<BreadcrumbLabels> = {\n  showHidden: 'Show hidden breadcrumbs',\n};\n\nfunction getGroups(items: BreadcrumbItem[], maxItems?: number) {\n  const indexed = items.map((item, index) => ({ item, index }));\n  if (!maxItems || items.length <= maxItems) {\n    return { leading: indexed, hidden: [] as IndexedItem[], trailing: [] as IndexedItem[] };\n  }\n\n  const trailingCount = Math.max(1, maxItems - 2);\n  const hiddenCount = items.length - 1 - trailingCount;\n  if (hiddenCount <= 0) {\n    return { leading: indexed, hidden: [] as IndexedItem[], trailing: [] as IndexedItem[] };\n  }\n\n  return {\n    leading: indexed.slice(0, 1),\n    hidden: indexed.slice(1, 1 + hiddenCount),\n    trailing: indexed.slice(1 + hiddenCount),\n  };\n}\n\nfunction Breadcrumb(props: BreadcrumbProps): ReactElement {\n  const {\n    items = [],\n    separator,\n    maxItems,\n    'aria-label': ariaLabel = 'Breadcrumb',\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    labels,\n    ...rest\n  } = useComponentDefaults('Breadcrumb', props);\n  const text = useLabels('Breadcrumb', labels, DEFAULT_LABELS);\n\n  const [isHiddenMenuOpen, setIsHiddenMenuOpen] = useState(false);\n  const { leading, hidden, trailing } = getGroups(items, maxItems);\n  const lastIndex = items.length - 1;\n\n  function renderSeparatorAfter(index: number) {\n    if (index === lastIndex) return null;\n    return (\n      <span className={cx(styles.breadcrumbSeparator, classNames?.separator)} style={slotStyles?.separator}>\n        {separator ?? <FontAwesomeIcon icon={faChevronRight} />}\n      </span>\n    );\n  }\n\n  function renderItem({ item, index }: IndexedItem) {\n    return (\n      <li key={item.id ?? index} className={cx(styles.breadcrumbItem, classNames?.item)} style={slotStyles?.item}>\n        {renderCrumb(item, index === lastIndex, styles, classNames, slotStyles)}\n        {renderSeparatorAfter(index)}\n      </li>\n    );\n  }\n\n  return (\n    <nav\n      {...rest}\n      aria-label={ariaLabel}\n      className={cx(styles.breadcrumb, classNames?.root, className)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      <ol className={cx(styles.breadcrumbList, classNames?.list)} style={slotStyles?.list}>\n        {leading.map(renderItem)}\n\n        {hidden.length > 0 && (\n          <li className={cx(styles.breadcrumbItem, classNames?.item)} style={slotStyles?.item}>\n            <Popover\n              isOpen={isHiddenMenuOpen}\n              onOpenChange={setIsHiddenMenuOpen}\n              placement={PopoverPlacement.Bottom}\n              align={PopoverAlign.Start}\n              // The list brings its own padding and width.\n              constrainWidth={false}\n              classNames={{ panel: styles.breadcrumbHiddenPanel }}\n              content={\n                <ul className={cx(styles.breadcrumbHiddenList, classNames?.hiddenList)} style={slotStyles?.hiddenList}>\n                  {hidden.map(({ item, index }) => (\n                    <li\n                      key={item.id ?? index}\n                      className={cx(styles.breadcrumbHiddenItem, classNames?.hiddenItem)}\n                      style={slotStyles?.hiddenItem}\n                    >\n                      {renderCrumb(\n                        {\n                          ...item,\n                          onClick: (event) => {\n                            item.onClick?.(event);\n                            setIsHiddenMenuOpen(false);\n                          },\n                        },\n                        false,\n                        styles,\n                        classNames,\n                        slotStyles,\n                      )}\n                    </li>\n                  ))}\n                </ul>\n              }\n            >\n              <ActionIcon\n                icon={faEllipsis}\n                title={text.showHidden}\n                aria-label={text.showHidden}\n                aria-expanded={isHiddenMenuOpen}\n                className={cx(styles.breadcrumbEllipsis, classNames?.ellipsis)}\n                style={slotStyles?.ellipsis}\n              />\n            </Popover>\n            {renderSeparatorAfter(hidden[hidden.length - 1].index)}\n          </li>\n        )}\n\n        {trailing.map(renderItem)}\n      </ol>\n    </nav>\n  );\n}\n\nfunction renderCrumb(\n  item: BreadcrumbItem,\n  isCurrent: boolean,\n  styles: Record<string, string>,\n  classNames: BreadcrumbProps['classNames'],\n  slotStyles: BreadcrumbProps['styles'],\n) {\n  const content = (\n    <>\n      {item.icon\n        ? renderIcon(item.icon, {\n            className: cx(styles.breadcrumbIcon, classNames?.icon),\n            style: slotStyles?.icon,\n          })\n        : null}\n      {item.label}\n    </>\n  );\n\n  if (isCurrent) {\n    return (\n      <span\n        aria-current='page'\n        className={cx(styles.breadcrumbCurrent, classNames?.current)}\n        style={slotStyles?.current}\n      >\n        {content}\n      </span>\n    );\n  }\n\n  if (item.disabled) {\n    return (\n      <span\n        className={cx(styles.breadcrumbLink, styles.breadcrumbLinkDisabled, classNames?.link)}\n        style={slotStyles?.link}\n      >\n        {content}\n      </span>\n    );\n  }\n\n  if (item.href) {\n    return (\n      <a\n        href={item.href}\n        onClick={item.onClick}\n        className={cx(styles.breadcrumbLink, classNames?.link)}\n        style={slotStyles?.link}\n      >\n        {content}\n      </a>\n    );\n  }\n\n  if (item.onClick) {\n    return (\n      <InteractableDiv\n        onClick={item.onClick}\n        className={cx(styles.breadcrumbLink, classNames?.link)}\n        style={slotStyles?.link}\n      >\n        {content}\n      </InteractableDiv>\n    );\n  }\n\n  return (\n    <span\n      className={cx(styles.breadcrumbLink, styles.breadcrumbLinkDisabled, classNames?.link)}\n      style={slotStyles?.link}\n    >\n      {content}\n    </span>\n  );\n}\n\nexport default Breadcrumb;\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e=`breadcrumb_yQM0Q`,t=`breadcrumb-list_2ah0w`,n=`breadcrumb-item_gBLc-`,r=`breadcrumb-icon_wFm8s`,i=`breadcrumb-link_eBWl3`,a=`breadcrumb-link-disabled_Ca-E6`,o=`breadcrumb-current_8tlun`,s=`breadcrumb-separator_akfqn`,c=`breadcrumb-ellipsis_6fvn8`,l=`breadcrumb-hiddenList_5reEH`,u=`breadcrumb-hiddenItem_ZGRnB`,d={breadcrumb:e,"breadcrumb-list":`breadcrumb-list_2ah0w`,breadcrumbList:t,"breadcrumb-item":`breadcrumb-item_gBLc-`,breadcrumbItem:n,"breadcrumb-icon":`breadcrumb-icon_wFm8s`,breadcrumbIcon:r,"breadcrumb-link":`breadcrumb-link_eBWl3`,breadcrumbLink:i,"breadcrumb-link-disabled":`breadcrumb-link-disabled_Ca-E6`,breadcrumbLinkDisabled:a,"breadcrumb-current":`breadcrumb-current_8tlun`,breadcrumbCurrent:o,"breadcrumb-separator":`breadcrumb-separator_akfqn`,breadcrumbSeparator:s,"breadcrumb-ellipsis":`breadcrumb-ellipsis_6fvn8`,breadcrumbEllipsis:c,"breadcrumb-hiddenList":`breadcrumb-hiddenList_5reEH`,breadcrumbHiddenList:l,"breadcrumb-hiddenItem":`breadcrumb-hiddenItem_ZGRnB`,breadcrumbHiddenItem:u};export{e as breadcrumb,o as breadcrumbCurrent,c as breadcrumbEllipsis,u as breadcrumbHiddenItem,l as breadcrumbHiddenList,r as breadcrumbIcon,n as breadcrumbItem,i as breadcrumbLink,a as breadcrumbLinkDisabled,t as breadcrumbList,s as breadcrumbSeparator,d as default};
+var e=`breadcrumb_yQM0Q`,t=`breadcrumb-list_2ah0w`,n=`breadcrumb-item_gBLc-`,r=`breadcrumb-icon_wFm8s`,i=`breadcrumb-link_eBWl3`,a=`breadcrumb-link-disabled_Ca-E6`,o=`breadcrumb-current_8tlun`,s=`breadcrumb-separator_akfqn`,c=`breadcrumb-ellipsis_6fvn8`,l=`breadcrumb-hiddenPanel_mb7xd`,u=`breadcrumb-hiddenList_5reEH`,d=`breadcrumb-hiddenItem_ZGRnB`,f={breadcrumb:e,"breadcrumb-list":`breadcrumb-list_2ah0w`,breadcrumbList:t,"breadcrumb-item":`breadcrumb-item_gBLc-`,breadcrumbItem:n,"breadcrumb-icon":`breadcrumb-icon_wFm8s`,breadcrumbIcon:r,"breadcrumb-link":`breadcrumb-link_eBWl3`,breadcrumbLink:i,"breadcrumb-link-disabled":`breadcrumb-link-disabled_Ca-E6`,breadcrumbLinkDisabled:a,"breadcrumb-current":`breadcrumb-current_8tlun`,breadcrumbCurrent:o,"breadcrumb-separator":`breadcrumb-separator_akfqn`,breadcrumbSeparator:s,"breadcrumb-ellipsis":`breadcrumb-ellipsis_6fvn8`,breadcrumbEllipsis:c,"breadcrumb-hiddenPanel":`breadcrumb-hiddenPanel_mb7xd`,breadcrumbHiddenPanel:l,"breadcrumb-hiddenList":`breadcrumb-hiddenList_5reEH`,breadcrumbHiddenList:u,"breadcrumb-hiddenItem":`breadcrumb-hiddenItem_ZGRnB`,breadcrumbHiddenItem:d};export{e as breadcrumb,o as breadcrumbCurrent,c as breadcrumbEllipsis,d as breadcrumbHiddenItem,u as breadcrumbHiddenList,l as breadcrumbHiddenPanel,r as breadcrumbIcon,n as breadcrumbItem,i as breadcrumbLink,a as breadcrumbLinkDisabled,t as breadcrumbList,s as breadcrumbSeparator,f as default};
 //# sourceMappingURL=breadcrumb.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.module.mjs","names":[],"sources":["../../../../package/common/breadcrumb/breadcrumb.module.pcss"],"sourcesContent":[".breadcrumb {\n  font-family: var(--default-font);\n  font-size: var(--default-font-size);\n\n  &-list {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 6px;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  &-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n\n  &-icon {\n    margin-right: 6px;\n    font-size: 0.9em;\n  }\n\n  &-link {\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    transition: color 0.15s;\n\n    /* Explicit :link/:visited beats the browser default a:visited { color: purple } on\n       specificity, otherwise every crumb using the same href (e.g. \"#\") turns purple as\n       soon as any one of them is clicked. */\n    &:link,\n    &:visited {\n      color: var(--text-dark);\n    }\n\n    &:hover {\n      color: var(--primary-color);\n    }\n\n    &-disabled {\n      color: var(--text-dark);\n      opacity: 0.5;\n      cursor: default;\n      pointer-events: none;\n    }\n  }\n\n  &-current {\n    display: flex;\n    align-items: center;\n    color: var(--text-color);\n    font-weight: var(--header-font-weight, 600);\n  }\n\n  &-separator {\n    display: flex;\n    align-items: center;\n    color: var(--text-dark);\n    font-size: 0.75em;\n    opacity: 0.7;\n  }\n\n  &-ellipsis {\n    width: 1.8em;\n    height: 1.8em;\n    font-size: 1em;\n    color: var(--text-dark);\n\n    &:hover {\n      color: var(--primary-color);\n    }\n  }\n\n  &-hiddenList {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    margin: 0;\n    padding: 6px;\n    list-style: none;\n    min-width: 160px;\n  }\n\n  &-hiddenItem {\n    display: flex;\n\n    .breadcrumb-link {\n      width: 100%;\n      padding: 6px 8px;\n      border-radius: var(--default-border-radius);\n\n      &:hover {\n        background: var(--background-accent-light);\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"breadcrumb.module.mjs","names":[],"sources":["../../../../package/common/breadcrumb/breadcrumb.module.pcss"],"sourcesContent":[".breadcrumb {\n  font-family: var(--default-font);\n  font-size: var(--default-font-size);\n\n  &-list {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 6px;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  &-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n\n  &-icon {\n    margin-right: 6px;\n    font-size: 0.9em;\n  }\n\n  &-link {\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    transition: color 0.15s;\n\n    /* Explicit :link/:visited beats the browser default a:visited { color: purple } on\n       specificity, otherwise every crumb using the same href (e.g. \"#\") turns purple as\n       soon as any one of them is clicked. */\n    &:link,\n    &:visited {\n      color: var(--text-dark);\n    }\n\n    &:hover {\n      color: var(--primary-color);\n    }\n\n    &-disabled {\n      color: var(--text-dark);\n      opacity: 0.5;\n      cursor: default;\n      pointer-events: none;\n    }\n  }\n\n  &-current {\n    display: flex;\n    align-items: center;\n    color: var(--text-color);\n    font-weight: var(--header-font-weight, 600);\n  }\n\n  &-separator {\n    display: flex;\n    align-items: center;\n    color: var(--text-dark);\n    font-size: 0.75em;\n    opacity: 0.7;\n  }\n\n  &-ellipsis {\n    width: 1.8em;\n    height: 1.8em;\n    font-size: 1em;\n    color: var(--text-dark);\n\n    &:hover {\n      color: var(--primary-color);\n    }\n  }\n\n  /* The popover panel pads free content; this list pads its own rows instead, so\n     that a row's hover highlight reaches the panel edge. */\n  &-hiddenPanel {\n    padding: 0;\n  }\n\n  &-hiddenList {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    margin: 0;\n    padding: 6px;\n    list-style: none;\n    min-width: 160px;\n  }\n\n  &-hiddenItem {\n    display: flex;\n\n    .breadcrumb-link {\n      width: 100%;\n      padding: 6px 8px;\n      border-radius: var(--default-border-radius);\n\n      /* `:focus` as well, because the panel takes the focus when the keyboard\n         opens it. Not `--background-accent-light`: it is the same colour as that\n         panel in the default theme. */\n      &:hover,\n      &:focus {\n        background: var(--background-accent);\n      }\n    }\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-import{useLabels as e}from"../configProvider/useLabels.mjs";import t from"../interactableDiv/index.mjs";import{Align as n}from"../floatingMenu/floatingMenu.types.mjs";import r from"../floatingMenu/floatingMenu.mjs";import i from"../input/input.mjs";import{toHex as a}from"./toHex.mjs";import o from"./colorPicker.module.mjs";import{useRef as s,useState as c}from"react";import l from"classnames";import{FontAwesomeIcon as u}from"@fortawesome/react-fontawesome";import{faEyeDropper as d}from"@fortawesome/free-solid-svg-icons";import{jsx as f,jsxs as p}from"react/jsx-runtime";var m=typeof window<`u`&&`EyeDropper`in window;async function h(){let e=window.EyeDropper;if(!e)return null;try{return(await new e().open()).sRGBHex}catch{return null}}function g(e){return/^#[0-9a-fA-F]{6}$/.test(e)||/^#[0-9a-fA-F]{8}$/.test(e)}function _(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 v(e,t,n){return!n||t>=100?e:`${e}${Math.round(t/100*255).toString(16).padStart(2,`0`)}`}function y(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 b(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 x(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 S({hex:e,onChange:t,useInputComponent:n=!1,className:r,style:a}){let[s,u]=c(e),[d,p]=c(e);e!==d&&(p(e),u(e));function m(e){u(e);let n=e.startsWith(`#`)?e:`#${e}`;g(n)&&t(n)}function h(){g(s.startsWith(`#`)?s:`#${s}`)||u(e)}return n?f(i,{value:s,onChange:e=>m(e),onBlur:h}):f(`input`,{type:`text`,value:s,onChange:e=>m(e.target.value),onBlur:h,className:l(o.hexInput,r),style:a,spellCheck:!1})}function C({hue:e,sat:t,val:n,alpha:r,onHueChange:i,onSVChange:a,onAlphaChange:c,showInput:g=!0,showAlpha:y=!1,labels:C,classNames:w,styles:T}){let E=s(null);function D(e){let t=E.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 O(e){e.currentTarget.setPointerCapture(e.pointerId);let{s:t,v:n}=D(e);a(t,n);let r=e=>{let{s:t,v:n}=D(e);a(t,n)},i=()=>{window.removeEventListener(`pointermove`,r),window.removeEventListener(`pointerup`,i)};window.addEventListener(`pointermove`,r),window.addEventListener(`pointerup`,i)}function k(e){let{hex6:t,alpha:n}=_(e),{h:r,s:o,v:s}=b(t);i(r),a(o,s),y&&c(n)}let A=x(e,t,n),j=y?v(A,r,!0):A;return p(`div`,{className:l(o.panel,w?.panel),style:T?.panel,children:[p(`div`,{ref:E,className:l(o.gradientArea,w?.gradient),style:{"--hue":e,...T?.gradient},onPointerDown:O,children:[f(`div`,{className:o.gradientOverlay}),f(`div`,{className:o.cursor,style:{left:`${t}%`,top:`${100-n}%`}})]}),f(`input`,{type:`range`,min:0,max:359,value:Math.round(e),onChange:e=>i(Number(e.target.value)),className:l(o.hueSlider,w?.hueSlider),style:T?.hueSlider}),y&&f(`input`,{type:`range`,min:0,max:100,value:Math.round(r),onChange:e=>c(Number(e.target.value)),className:l(o.alphaSlider,w?.alphaSlider),style:{"--alpha-color":A,...T?.alphaSlider}}),(g||m)&&p(`div`,{className:o.hexRow,children:[g&&f(S,{hex:j,onChange:k,className:w?.hexInput,style:T?.hexInput}),m&&f(`button`,{type:`button`,className:l(o.eyeDropperButton,w?.eyeDropper),style:T?.eyeDropper,onClick:async()=>{let e=await h();e&&k(e)},"aria-label":C.pickFromScreen,children:f(u,{icon:d})})]})]})}var w=`#3b82f6`,T={pickFromScreen:`Pick color from screen`};function E({className:i,value:u=w,onChange:d,showInput:m=!1,showAlpha:h=!1,inline:g=!1,labels:E,style:D,classNames:O,styles:k,...A}){let j=e(`ColorPicker`,E,T),[M,N]=c(!1),{hex6:P,alpha:F}=_(a(u)??w),I=b(P),[L,R]=c({h:I.h,s:I.s,v:I.v,a:F}),z=s(L),[B,V]=c(u);if(u!==B){V(u);let{hex6:e,alpha:t}=_(a(u)??w);if(e!==x(L.h,L.s,L.v)||t!==L.a){let n=b(e);R({h:n.h,s:n.s,v:n.v,a:t})}}let{h:H,s:U,v:W,a:G}=L;function K(e,t,n,r){d?.(v(x(e,t,n),r,h))}function q(e){z.current.h=e,R(t=>({...t,h:e})),K(e,z.current.s,z.current.v,z.current.a)}function J(e,t){z.current.s=e,z.current.v=t,R(n=>({...n,s:e,v:t})),K(z.current.h,e,t,z.current.a)}function Y(e){z.current.a=e,R(t=>({...t,a:e})),K(z.current.h,z.current.s,z.current.v,e)}let X=x(H,U,W),Z=h?y(X,G):X,Q=v(X,G,h),$={hue:H,sat:U,val:W,alpha:G,onHueChange:q,onSVChange:J,onAlphaChange:Y,showAlpha:h,labels:j,classNames:O,styles:k};return g?f(`div`,{...A,className:l(o.colorPicker,i,O?.root),style:{...D,...k?.root},children:f(C,{...$,showInput:m})}):p(`div`,{...A,className:l(o.colorPicker,i),children:[f(r,{isOpen:M,onOpenChange:N,dontCloseOnChildClick:!0,align:n.Left,content:f(C,{...$}),children:p(t,{className:l(o.swatch,O?.swatch),style:k?.swatch,children:[f(`div`,{className:o.swatchFill,style:{background:Z}}),f(`span`,{className:o.swatchHex,children:Q})]})}),m&&f(S,{hex:Q,onChange:e=>d?.(e),useInputComponent:!0})]})}export{E as default};
+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/^#[0-9a-fA-F]{6}$/.test(e)||/^#[0-9a-fA-F]{8}$/.test(e)}function v(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 y(e,t,n){return!n||t>=100?e:`${e}${Math.round(t/100*255).toString(16).padStart(2,`0`)}`}function b(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 x(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 S(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 C({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}`;_(n)&&t(n)}function h(){_(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 w({hue:e,sat:t,val:n,alpha:r,onHueChange:i,onSVChange:a,onAlphaChange:o,showInput:l=!0,showAlpha:_=!1,labels:b,classNames:w,styles:T}){let E=c(null);function D(e){let t=E.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 O(e){e.currentTarget.setPointerCapture(e.pointerId);let{s:t,v:n}=D(e);a(t,n);let r=e=>{let{s:t,v:n}=D(e);a(t,n)},i=()=>{window.removeEventListener(`pointermove`,r),window.removeEventListener(`pointerup`,i)};window.addEventListener(`pointermove`,r),window.addEventListener(`pointerup`,i)}function k(e){let{hex6:t,alpha:n}=v(e),{h:r,s,v:c}=x(t);i(r),a(s,c),_&&o(n)}let A=S(e,t,n),j=_?y(A,r,!0):A;return m(`div`,{className:u(s.panel,w?.panel),style:T?.panel,children:[m(`div`,{ref:E,className:u(s.gradientArea,w?.gradient),style:{"--hue":e,...T?.gradient},onPointerDown:O,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,w?.hueSlider),style:T?.hueSlider}),_&&p(`input`,{type:`range`,min:0,max:100,value:Math.round(r),onChange:e=>o(Number(e.target.value)),className:u(s.alphaSlider,w?.alphaSlider),style:{"--alpha-color":A,...T?.alphaSlider}}),(l||h)&&m(`div`,{className:s.hexRow,children:[l&&p(C,{hex:j,onChange:k,className:w?.hexInput,style:T?.hexInput}),h&&p(`button`,{type:`button`,className:u(s.eyeDropperButton,w?.eyeDropper),style:T?.eyeDropper,onClick:async()=>{let e=await g();e&&k(e)},"aria-label":b.pickFromScreen,children:p(d,{icon:f})})]})]})}var T=`#3b82f6`,E={pickFromScreen:`Pick color from screen`};function D({className:a,value:d=T,onChange:f,showInput:h=!1,showAlpha:g=!1,inline:_=!1,labels:D,style:O,classNames:k,styles:A,...j}){let M=e(`ColorPicker`,D,E),[N,P]=l(!1),{hex6:F,alpha:I}=v(o(d)??T),L=x(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}=v(o(d)??T);if(e!==S(R.h,R.s,R.v)||t!==R.a){let n=x(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?.(y(S(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=S(U,W,G),ee=g?b(Z,K):Z,Q=y(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(w,{...$,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(w,{...$}),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(C,{hex:Q,onChange:e=>f?.(e),useInputComponent:!0})]})}export{D 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 FloatingMenu from 'components/common/floatingMenu';\nimport Input from 'components/common/input';\nimport { Align } from 'components/common/floatingMenu/floatingMenu.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 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  // 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      <div\n        ref={gradientRef}\n        className={cx(styles.gradientArea, classNames?.gradient)}\n        style={{ '--hue': hue, ...slotStyles?.gradient } as React.CSSProperties}\n        onPointerDown={onGradientPointerDown}\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};\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      <FloatingMenu\n        isOpen={isOpen}\n        onOpenChange={setIsOpen}\n        dontCloseOnChildClick\n        align={Align.Left}\n        content={<PickerPanel {...pickerPanelProps} />}\n      >\n        <InteractableDiv className={cx(styles.swatch, classNames?.swatch)} style={slotStyles?.swatch}>\n          <div className={styles.swatchFill} style={{ background: swatchBackground }} />\n          <span className={styles.swatchHex}>{displayValue}</span>\n        </InteractableDiv>\n      </FloatingMenu>\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 { 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 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  // 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      <div\n        ref={gradientRef}\n        className={cx(styles.gradientArea, classNames?.gradient)}\n        style={{ '--hue': hue, ...slotStyles?.gradient } as React.CSSProperties}\n        onPointerDown={onGradientPointerDown}\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};\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 swatch is what opens the panel, but the click handler lives on\n            Popover's wrapper, so `InteractableDiv` gives it neither a tab stop nor\n            a role of its own and it had no way in from the keyboard. */}\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":"ykBAsBA,IAAM,EAAsB,OAAO,OAAW,KAAe,eAAgB,OAE7E,eAAe,GAA8C,CAC3D,IAAM,EAAkB,OAA6D,WACrF,GAAI,CAAC,EAAgB,OAAO,KAC5B,GAAI,CAEF,OAAO,MADc,IAAI,EAAe,CAAC,CAAC,KAAK,EAAA,CACjC,OAChB,MAAQ,CACN,OAAO,IACT,CACF,CAIA,SAAS,EAAW,EAAoB,CACtC,MAAO,oBAAoB,KAAK,CAAC,GAAK,oBAAoB,KAAK,CAAC,CAClE,CAGA,SAAS,EAAS,EAA8C,CAO9D,MANI,oBAAoB,KAAK,CAAG,EACvB,CACL,KAAM,EAAI,MAAM,EAAG,CAAC,EACpB,MAAQ,SAAS,EAAI,MAAM,EAAG,CAAC,EAAG,EAAE,EAAI,IAAO,GACjD,EAEK,CAAE,KAAM,EAAI,MAAM,EAAG,CAAC,EAAG,MAAO,GAAI,CAC7C,CAIA,SAAS,EAAW,EAAc,EAAe,EAA4B,CAK3E,MAJI,CAAC,GAAa,GAAS,IAAY,EAIhC,GAAG,IAHA,KAAK,MAAO,EAAQ,IAAO,GAAG,CAAC,CACtC,SAAS,EAAE,CAAC,CACZ,SAAS,EAAG,GACE,GACnB,CAEA,SAAS,EAAU,EAAc,EAAuB,CAItD,MAAO,QAHG,SAAS,EAAK,MAAM,EAAG,CAAC,EAAG,EAGtB,EAAE,IAFP,SAAS,EAAK,MAAM,EAAG,CAAC,EAAG,EAEhB,EAAE,IADb,SAAS,EAAK,MAAM,EAAG,CAAC,EAAG,EACV,EAAE,IAAI,EAAQ,IAAI,EAC/C,CAEA,SAAS,EAAS,EAAmD,CACnE,IAAM,EAAI,SAAS,EAAK,MAAM,EAAG,CAAC,EAAG,EAAE,EAAI,IACrC,EAAI,SAAS,EAAK,MAAM,EAAG,CAAC,EAAG,EAAE,EAAI,IACrC,EAAI,SAAS,EAAK,MAAM,EAAG,CAAC,EAAG,EAAE,EAAI,IAErC,EAAM,KAAK,IAAI,EAAG,EAAG,CAAC,EAEtB,EAAQ,EADF,KAAK,IAAI,EAAG,EAAG,CACP,EAEhB,EAAI,EACJ,IAAU,IACZ,AAEK,EAFD,IAAQ,GAAS,EAAI,GAAK,EAAS,EAC9B,IAAQ,GAAQ,EAAI,GAAK,EAAQ,GAChC,EAAI,GAAK,EAAQ,EAC3B,GAAK,GACD,EAAI,IAAG,GAAK,MAKlB,IAAM,EAAI,IAAQ,EAAI,EAAK,EAAQ,EAAO,IACpC,EAAI,EAAM,IAEhB,MAAO,CAAE,IAAG,EAAG,GAAE,CACnB,CAEA,SAAS,EAAS,EAAW,EAAW,EAAmB,CACzD,IAAM,EAAK,EAAI,IACT,EAAK,EAAI,IACT,EAAI,EAAK,EACT,EAAI,GAAK,EAAI,KAAK,IAAM,EAAI,GAAM,EAAK,CAAC,GACxC,EAAI,EAAK,EAEX,EAAI,EACN,EAAI,EACJ,EAAI,EACF,EAAI,IACN,EAAI,EACJ,EAAI,EACJ,EAAI,GACK,EAAI,KACb,EAAI,EACJ,EAAI,EACJ,EAAI,GACK,EAAI,KACb,EAAI,EACJ,EAAI,EACJ,EAAI,GACK,EAAI,KACb,EAAI,EACJ,EAAI,EACJ,EAAI,GACK,EAAI,KACb,EAAI,EACJ,EAAI,EACJ,EAAI,IAEJ,EAAI,EACJ,EAAI,EACJ,EAAI,GAGN,IAAM,EAAS,GACb,KAAK,OAAO,EAAI,GAAK,GAAG,CAAC,CACtB,SAAS,EAAE,CAAC,CACZ,SAAS,EAAG,GAAG,EACpB,MAAO,IAAI,EAAM,CAAC,IAAI,EAAM,CAAC,IAAI,EAAM,CAAC,GAC1C,CAYA,SAAS,EAAS,CAAE,MAAK,WAAU,oBAAoB,GAAO,YAAW,SAAsC,CAC7G,GAAM,CAAC,EAAO,GAAY,EAAS,CAAG,EAEhC,CAAC,EAAS,GAAc,EAAS,CAAG,EACtC,IAAQ,IACV,EAAW,CAAG,EACd,EAAS,CAAG,GAGd,SAAS,EAAa,EAAa,CACjC,EAAS,CAAG,EACZ,IAAM,EAAa,EAAI,WAAW,GAAG,EAAI,EAAM,IAAI,IAC/C,EAAW,CAAU,GAAG,EAAS,CAAU,CACjD,CAEA,SAAS,GAAa,CAEf,EADc,EAAM,WAAW,GAAG,EAAI,EAAQ,IAAI,GAC7B,GAAG,EAAS,CAAG,CAC3C,CAMA,OAJI,EACK,EAAC,EAAD,CAAO,MAAO,EAAO,SAAW,GAAkB,EAAa,CAAK,EAAG,OAAQ,CAAa,CAAA,EAInG,EAAC,QAAD,CACE,KAAK,OACL,MAAO,EACP,SAAW,GAAM,EAAa,EAAE,OAAO,KAAK,EAC5C,OAAQ,EACR,UAAW,EAAG,EAAO,SAAU,CAAS,EACjC,QACP,WAAY,EACb,CAAA,CAEL,CAmBA,SAAS,EAAY,CACnB,MACA,MACA,MACA,QACA,cACA,aACA,gBACA,YAAY,GACZ,YAAY,GACZ,SACA,aACA,OAAQ,GACyB,CACjC,IAAM,EAAc,EAAuB,IAAI,EAE/C,SAAS,EAAe,EAAmE,CACzF,IAAM,EAAO,EAAY,QAAS,sBAAsB,EAClD,EAAI,KAAK,IAAI,EAAG,KAAK,IAAI,GAAI,EAAE,QAAU,EAAK,MAAQ,EAAK,KAAK,CAAC,EACjE,EAAI,KAAK,IAAI,EAAG,KAAK,IAAI,GAAI,EAAE,QAAU,EAAK,KAAO,EAAK,MAAM,CAAC,EACvE,MAAO,CAAE,EAAG,EAAI,IAAK,GAAI,EAAI,GAAK,GAAI,CACxC,CAGA,SAAS,EAAsB,EAAuB,CACpD,EAAE,cAAc,kBAAkB,EAAE,SAAS,EAC7C,GAAM,CAAE,IAAG,KAAM,EAAe,CAAC,EACjC,EAAW,EAAG,CAAC,EAEf,IAAM,EAAU,GAAqB,CACnC,GAAM,CAAE,IAAG,KAAM,EAAe,CAAE,EAClC,EAAW,EAAG,CAAC,CACjB,EACM,MAAa,CACjB,OAAO,oBAAoB,cAAe,CAAM,EAChD,OAAO,oBAAoB,YAAa,CAAI,CAC9C,EACA,OAAO,iBAAiB,cAAe,CAAM,EAC7C,OAAO,iBAAiB,YAAa,CAAI,CAC3C,CAEA,SAAS,EAAY,EAAoB,CACvC,GAAM,CAAE,OAAM,MAAO,GAAgB,EAAS,CAAU,EAClD,CAAE,IAAG,EAAG,KAAM,EAAS,CAAI,EACjC,EAAY,CAAC,EACb,EAAW,EAAG,CAAC,EACX,GAAW,EAAc,CAAW,CAC1C,CAEA,IAAM,EAAO,EAAS,EAAK,EAAK,CAAG,EAC7B,EAAgB,EAAY,EAAW,EAAM,EAAO,EAAI,EAAI,EAElE,OACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,MAAO,GAAY,KAAK,EAAG,MAAO,GAAY,MAAxE,SAAA,CACE,EAAC,MAAD,CACE,IAAK,EACL,UAAW,EAAG,EAAO,aAAc,GAAY,QAAQ,EACvD,MAAO,CAAE,QAAS,EAAK,GAAG,GAAY,QAAS,EAC/C,cAAe,EAJjB,SAAA,CAME,EAAC,MAAD,CAAK,UAAW,EAAO,eAAkB,CAAA,EACzC,EAAC,MAAD,CAAK,UAAW,EAAO,OAAQ,MAAO,CAAE,KAAM,GAAG,EAAI,GAAI,IAAK,GAAG,IAAM,EAAI,EAAG,CAAI,CAAA,CAC/E,IAEL,EAAC,QAAD,CACE,KAAK,QACL,IAAK,EACL,IAAK,IACL,MAAO,KAAK,MAAM,CAAG,EACrB,SAAW,GAAM,EAAY,OAAO,EAAE,OAAO,KAAK,CAAC,EACnD,UAAW,EAAG,EAAO,UAAW,GAAY,SAAS,EACrD,MAAO,GAAY,SACpB,CAAA,EAEA,GACC,EAAC,QAAD,CACE,KAAK,QACL,IAAK,EACL,IAAK,IACL,MAAO,KAAK,MAAM,CAAK,EACvB,SAAW,GAAM,EAAc,OAAO,EAAE,OAAO,KAAK,CAAC,EACrD,UAAW,EAAG,EAAO,YAAa,GAAY,WAAW,EACzD,MAAO,CAAE,gBAAiB,EAAM,GAAG,GAAY,WAAY,CAC5D,CAAA,GAGD,GAAa,IACb,EAAC,MAAD,CAAK,UAAW,EAAO,OAAvB,SAAA,CACG,GACC,EAAC,EAAD,CACE,IAAK,EACL,SAAU,EACV,UAAW,GAAY,SACvB,MAAO,GAAY,QACpB,CAAA,EAEF,GACC,EAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAG,EAAO,iBAAkB,GAAY,UAAU,EAC7D,MAAO,GAAY,WACnB,QAAS,SAAY,CACnB,IAAM,EAAM,MAAM,EAAoB,EAClC,GAAK,EAAY,CAAG,CAC1B,EACA,aAAY,EAAO,eAEnB,SAAA,EAAC,EAAD,CAAiB,KAAM,CAAe,CAAA,CAChC,CAAA,CAEP,GAEJ,GAET,CAIA,IAAM,EAAgB,UAEhB,EAA8C,CAClD,eAAgB,wBAClB,EAEA,SAAS,EAAY,CACnB,YACA,QAAQ,EACR,WACA,YAAY,GACZ,YAAY,GACZ,SAAS,GACT,SACA,QACA,aACA,OAAQ,EACR,GAAG,GAC8B,CACjC,IAAM,EAAO,EAAU,cAAe,EAAQ,CAAc,EACtD,CAAC,EAAQ,GAAa,EAAS,EAAK,EAGpC,CAAE,KAAM,EAAU,MAAO,GAAc,EAD5B,EAAS,CAAK,GAAK,CAC0B,EACxD,EAAU,EAAS,CAAQ,EAI3B,CAAC,EAAM,GAAW,EAAS,CAAE,EAAG,EAAQ,EAAG,EAAG,EAAQ,EAAG,EAAG,EAAQ,EAAG,EAAG,CAAU,CAAC,EAGrF,EAAM,EAAO,CAAI,EAKjB,CAAC,EAAW,GAAgB,EAAS,CAAK,EAChD,GAAI,IAAU,EAAW,CACvB,EAAa,CAAK,EAElB,GAAM,CAAE,KAAM,EAAc,MAAO,GAAc,EADpC,EAAS,CAAK,GAAK,CAC8B,EAE9D,GAAI,IADgB,EAAS,EAAK,EAAG,EAAK,EAAG,EAAK,CAC7B,GAAe,IAAc,EAAK,EAAG,CACxD,IAAM,EAAM,EAAS,CAAY,EAEjC,EAAQ,CADO,EAAG,EAAI,EAAG,EAAG,EAAI,EAAG,EAAG,EAAI,EAAG,EAAG,CACxC,CAAI,CACd,CACF,CAEA,GAAM,CAAE,EAAG,EAAK,EAAG,EAAK,EAAG,EAAK,EAAG,GAAU,EAE7C,SAAS,EAAK,EAAW,EAAW,EAAW,EAAW,CACxD,IAAW,EAAW,EAAS,EAAG,EAAG,CAAC,EAAG,EAAG,CAAS,CAAC,CACxD,CAEA,SAAS,EAAgB,EAAW,CAClC,EAAI,QAAQ,EAAI,EAChB,EAAS,IAAU,CAAE,GAAG,EAAM,GAAE,EAAE,EAClC,EAAK,EAAG,EAAI,QAAQ,EAAG,EAAI,QAAQ,EAAG,EAAI,QAAQ,CAAC,CACrD,CAEA,SAAS,EAAe,EAAW,EAAW,CAC5C,EAAI,QAAQ,EAAI,EAChB,EAAI,QAAQ,EAAI,EAChB,EAAS,IAAU,CAAE,GAAG,EAAM,IAAG,GAAE,EAAE,EACrC,EAAK,EAAI,QAAQ,EAAG,EAAG,EAAG,EAAI,QAAQ,CAAC,CACzC,CAEA,SAAS,EAAkB,EAAW,CACpC,EAAI,QAAQ,EAAI,EAChB,EAAS,IAAU,CAAE,GAAG,EAAM,GAAE,EAAE,EAClC,EAAK,EAAI,QAAQ,EAAG,EAAI,QAAQ,EAAG,EAAI,QAAQ,EAAG,CAAC,CACrD,CAEA,IAAM,EAAO,EAAS,EAAK,EAAK,CAAG,EAC7B,GAAmB,EAAY,EAAU,EAAM,CAAK,EAAI,EACxD,EAAe,EAAW,EAAM,EAAO,CAAS,EAEhD,EAAqC,CACzC,MACA,MACA,MACA,QACA,YAAa,EACb,WAAY,EACZ,cAAe,EACf,YACA,OAAQ,EACR,aACA,OAAQ,CACV,EAcA,OAZI,EAEA,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,YAAa,EAAW,GAAY,IAAI,EAC7D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAEvC,SAAA,EAAC,EAAD,CAAa,GAAI,EAA6B,WAAY,CAAA,CACvD,CAAA,EAKP,EAAC,MAAD,CAAK,GAAI,EAAM,UAAW,EAAG,EAAO,YAAa,CAAS,EAA1D,SAAA,CACE,EAAC,EAAD,CACU,SACR,aAAc,EACd,UAAW,EAAiB,OAC5B,MAAO,EAAa,MAEpB,eAAgB,GAChB,QAAS,EAAC,EAAD,CAAa,GAAI,CAAmB,CAAA,EAK7C,SAAA,EAAC,EAAD,CACE,KAAK,SACL,SAAU,EACV,gBAAc,SACd,gBAAe,EACf,UAAW,EAAG,EAAO,OAAQ,GAAY,MAAM,EAC/C,MAAO,GAAY,OANrB,SAAA,CAQE,EAAC,MAAD,CAAK,UAAW,EAAO,WAAY,MAAO,CAAE,WAAY,EAAiB,CAAI,CAAA,EAC7E,EAAC,OAAD,CAAM,UAAW,EAAO,UAAY,SAAA,CAAmB,CAAA,CACxC,GACV,CAAA,EAER,GAAa,EAAC,EAAD,CAAU,IAAK,EAAc,SAAW,GAAM,IAAW,CAAC,EAAG,kBAAA,EAAmB,CAAA,CAC3F,GAET"}

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 FloatingMenu 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\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\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\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\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\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\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":""}

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

@@ -1 +1 @@
-{"version":3,"file":"configProvider.mjs","names":[],"sources":["../../../../package/common/configProvider/configProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from 'react';\nimport type { ComponentDefaults, ConfigProviderProps } from './configProvider.types';\nimport type { Presentation } from '../floatingMenu/floatingMenu.types';\n\nexport const ConfigContext = createContext<ComponentDefaults | null>(null);\n\n/**\n * One setting for every component that can present as a bottom sheet, kept separate from\n * `defaultProps` so that turning sheets on (or off) app-wide is a single switch rather than one\n * entry per component key — the components that can do it are unrelated to each other, and a\n * consumer who missed one would get sheets in half their app.\n */\nexport const PresentationContext = createContext<Presentation | undefined>(undefined);\n\n/**\n * Shallow-merge two default maps per component key, so nested ConfigProviders\n * compose: an inner provider's `Input` defaults extend (and override on\n * conflict) the outer provider's `Input` defaults rather than replacing them.\n */\nfunction mergeDefaults(parent: ComponentDefaults | null, own: ComponentDefaults | undefined): ComponentDefaults {\n  if (!parent) return own ?? {};\n  if (!own) return parent;\n\n  const merged: Record<string, object> = { ...parent };\n  for (const key in own) {\n    merged[key] = {\n      ...(parent as Record<string, object>)[key],\n      ...(own as Record<string, object>)[key],\n    };\n  }\n  return merged as ComponentDefaults;\n}\n\nfunction ConfigProvider({ children, defaultProps, presentation }: ConfigProviderProps) {\n  const parent = useContext(ConfigContext);\n  const value = useMemo(() => mergeDefaults(parent, defaultProps), [parent, defaultProps]);\n\n  // A nested provider that doesn't set `presentation` keeps the outer one's, the same way\n  // `defaultProps` compose.\n  const inheritedPresentation = useContext(PresentationContext);\n  const presentationValue = presentation ?? inheritedPresentation;\n\n  return (\n    <ConfigContext.Provider value={value}>\n      <PresentationContext.Provider value={presentationValue}>{children}</PresentationContext.Provider>\n    </ConfigContext.Provider>\n  );\n}\n\nexport default ConfigProvider;\n"],"mappings":"2GAIA,IAAa,EAAgB,EAAwC,IAAI,EAQ5D,EAAsB,EAAwC,IAAA,EAAS,EAOpF,SAAS,EAAc,EAAkC,EAAuD,CAC9G,GAAI,CAAC,EAAQ,OAAO,GAAO,CAAC,EAC5B,GAAI,CAAC,EAAK,OAAO,EAEjB,IAAM,EAAiC,CAAE,GAAG,CAAO,EACnD,IAAK,IAAM,KAAO,EAChB,EAAO,GAAO,CACZ,GAAI,EAAkC,GACtC,GAAI,EAA+B,EACrC,EAEF,OAAO,CACT,CAEA,SAAS,EAAe,CAAE,WAAU,eAAc,gBAAqC,CACrF,IAAM,EAAS,EAAW,CAAa,EACjC,EAAQ,MAAc,EAAc,EAAQ,CAAY,EAAG,CAAC,EAAQ,CAAY,CAAC,EAIjF,EAAwB,EAAW,CAAmB,EACtD,EAAoB,GAAgB,EAE1C,OACE,EAAC,EAAc,SAAf,CAA+B,QAC7B,SAAA,EAAC,EAAoB,SAArB,CAA8B,MAAO,EAAoB,UAAuC,CAAA,CAC1E,CAAA,CAE5B"}
+{"version":3,"file":"configProvider.mjs","names":[],"sources":["../../../../package/common/configProvider/configProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from 'react';\nimport type { ComponentDefaults, ConfigProviderProps } from './configProvider.types';\nimport type { Presentation } from '../configProvider/presentation.types';\n\nexport const ConfigContext = createContext<ComponentDefaults | null>(null);\n\n/**\n * One setting for every component that can present as a bottom sheet, kept separate from\n * `defaultProps` so that turning sheets on (or off) app-wide is a single switch rather than one\n * entry per component key — the components that can do it are unrelated to each other, and a\n * consumer who missed one would get sheets in half their app.\n */\nexport const PresentationContext = createContext<Presentation | undefined>(undefined);\n\n/**\n * Shallow-merge two default maps per component key, so nested ConfigProviders\n * compose: an inner provider's `Input` defaults extend (and override on\n * conflict) the outer provider's `Input` defaults rather than replacing them.\n */\nfunction mergeDefaults(parent: ComponentDefaults | null, own: ComponentDefaults | undefined): ComponentDefaults {\n  if (!parent) return own ?? {};\n  if (!own) return parent;\n\n  const merged: Record<string, object> = { ...parent };\n  for (const key in own) {\n    merged[key] = {\n      ...(parent as Record<string, object>)[key],\n      ...(own as Record<string, object>)[key],\n    };\n  }\n  return merged as ComponentDefaults;\n}\n\nfunction ConfigProvider({ children, defaultProps, presentation }: ConfigProviderProps) {\n  const parent = useContext(ConfigContext);\n  const value = useMemo(() => mergeDefaults(parent, defaultProps), [parent, defaultProps]);\n\n  // A nested provider that doesn't set `presentation` keeps the outer one's, the same way\n  // `defaultProps` compose.\n  const inheritedPresentation = useContext(PresentationContext);\n  const presentationValue = presentation ?? inheritedPresentation;\n\n  return (\n    <ConfigContext.Provider value={value}>\n      <PresentationContext.Provider value={presentationValue}>{children}</PresentationContext.Provider>\n    </ConfigContext.Provider>\n  );\n}\n\nexport default ConfigProvider;\n"],"mappings":"2GAIA,IAAa,EAAgB,EAAwC,IAAI,EAQ5D,EAAsB,EAAwC,IAAA,EAAS,EAOpF,SAAS,EAAc,EAAkC,EAAuD,CAC9G,GAAI,CAAC,EAAQ,OAAO,GAAO,CAAC,EAC5B,GAAI,CAAC,EAAK,OAAO,EAEjB,IAAM,EAAiC,CAAE,GAAG,CAAO,EACnD,IAAK,IAAM,KAAO,EAChB,EAAO,GAAO,CACZ,GAAI,EAAkC,GACtC,GAAI,EAA+B,EACrC,EAEF,OAAO,CACT,CAEA,SAAS,EAAe,CAAE,WAAU,eAAc,gBAAqC,CACrF,IAAM,EAAS,EAAW,CAAa,EACjC,EAAQ,MAAc,EAAc,EAAQ,CAAY,EAAG,CAAC,EAAQ,CAAY,CAAC,EAIjF,EAAwB,EAAW,CAAmB,EACtD,EAAoB,GAAgB,EAE1C,OACE,EAAC,EAAc,SAAf,CAA+B,QAC7B,SAAA,EAAC,EAAoB,SAArB,CAA8B,MAAO,EAAoB,UAAuC,CAAA,CAC1E,CAAA,CAE5B"}

package/dist/esm/common/configProvider/presentation.types.mjs

@@ -0,0 +1,2 @@
+var e=function(e){return e.Default=`default`,e.Sheet=`sheet`,e.Auto=`auto`,e}({});export{e as Presentation};
+//# sourceMappingURL=presentation.types.mjs.map

package/dist/esm/common/configProvider/presentation.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation.types.mjs","names":[],"sources":["../../../../package/common/configProvider/presentation.types.ts"],"sourcesContent":["/**\n * How a surface is presented on screen. Lives here rather than with any one of\n * the components that read it: `Modal`, `Popover`, `Dropdown` and `MultiSelect`\n * all take it, and `ConfigProvider` owns the app-wide switch that sets it for\n * every one of them at once.\n */\nexport enum Presentation {\n  /** Wherever the component normally puts it: anchored to its trigger, or centred for a Modal. */\n  Default = 'default',\n  /** Pinned to the bottom of the screen, full width up to a maximum. */\n  Sheet = 'sheet',\n  /** A sheet on touch devices with a small screen, anchored everywhere else. */\n  Auto = 'auto',\n}\n"],"mappings":"AAMA,IAAY,EAAL,SAAA,EAAA,OAEL,GAAA,QAAA,UAEA,EAAA,MAAA,QAEA,EAAA,KAAA,QACF,EAAA,CAAA,CAAA"}

package/dist/esm/common/configProvider/usePresentationDefault.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePresentationDefault.mjs","names":[],"sources":["../../../../package/common/configProvider/usePresentationDefault.ts"],"sourcesContent":["import { useContext } from 'react';\nimport { PresentationContext } from './configProvider';\nimport type { Presentation } from '../floatingMenu/floatingMenu.types';\n\n/**\n * The nearest `ConfigProvider`'s app-wide `presentation`, or `undefined` when none is set.\n *\n * Sits between a component-keyed global default and the component's own built-in default, so the\n * full order is: explicit prop → `defaultProps.<Component>.presentation` → this → built-in.\n */\nexport function usePresentationDefault(): Presentation | undefined {\n  return useContext(PresentationContext);\n}\n"],"mappings":"8FAUA,SAAgB,GAAmD,CACjE,OAAO,EAAW,CAAmB,CACvC"}
+{"version":3,"file":"usePresentationDefault.mjs","names":[],"sources":["../../../../package/common/configProvider/usePresentationDefault.ts"],"sourcesContent":["import { useContext } from 'react';\nimport { PresentationContext } from './configProvider';\nimport type { Presentation } from '../configProvider/presentation.types';\n\n/**\n * The nearest `ConfigProvider`'s app-wide `presentation`, or `undefined` when none is set.\n *\n * Sits between a component-keyed global default and the component's own built-in default, so the\n * full order is: explicit prop → `defaultProps.<Component>.presentation` → this → built-in.\n */\nexport function usePresentationDefault(): Presentation | undefined {\n  return useContext(PresentationContext);\n}\n"],"mappings":"8FAUA,SAAgB,GAAmD,CACjE,OAAO,EAAW,CAAmB,CACvC"}

package/dist/esm/common/datePicker/components/datePickerMonth/datePickerMonth.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"datePickerMonth.module.mjs","names":[],"sources":["../../../../../../package/common/datePicker/components/datePickerMonth/datePickerMonth.module.pcss"],"sourcesContent":[".datePickerMonth {\n  &-item {\n    aspect-ratio: 1;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 1px 0;\n  }\n\n  &-content {\n    display: grid;\n    text-align: center;\n    grid-template-columns: repeat(7, minmax(0, 1fr));\n    gap: 0;\n  }\n\n  &-day {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:hover {\n      /* background-color: var(--primary-color);\n      border-radius: 800px; */\n    }\n\n    &-today {\n      background-color: var(--background-accent-light);\n      border-radius: var(--default-border-radius);\n    }\n\n    &-selected {\n      background-color: var(--primary-color);\n      color: var(--text-on-primary);\n      border-radius: 0;\n\n      &-start {\n        border-top-left-radius: var(--default-border-radius);\n        border-bottom-left-radius: var(--default-border-radius);\n      }\n\n      &-end {\n        border-top-right-radius: var(--default-border-radius);\n        border-bottom-right-radius: var(--default-border-radius);\n      }\n    }\n\n    &-disabled {\n      filter: brightness(0.5);\n      cursor: not-allowed;\n    }\n  }\n\n  &-placeholder {\n    user-select: none;\n    pointer-events: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"datePickerMonth.module.mjs","names":[],"sources":["../../../../../../package/common/datePicker/components/datePickerMonth/datePickerMonth.module.pcss"],"sourcesContent":[".datePickerMonth {\n  &-item {\n    aspect-ratio: 1;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 1px 0;\n  }\n\n  &-content {\n    display: grid;\n    text-align: center;\n    grid-template-columns: repeat(7, minmax(0, 1fr));\n    gap: 0;\n  }\n\n  &-day {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:hover {\n      /* background-color: var(--primary-color);\n      border-radius: 800px; */\n    }\n\n    &-today {\n      /* Not `--background-accent-light`: it is the same colour as the calendar's\n         own panel in the default theme, which left today unmarked. */\n      background-color: var(--background-accent);\n      border-radius: var(--default-border-radius);\n    }\n\n    &-selected {\n      background-color: var(--primary-color);\n      color: var(--text-on-primary);\n      border-radius: 0;\n\n      &-start {\n        border-top-left-radius: var(--default-border-radius);\n        border-bottom-left-radius: var(--default-border-radius);\n      }\n\n      &-end {\n        border-top-right-radius: var(--default-border-radius);\n        border-bottom-right-radius: var(--default-border-radius);\n      }\n    }\n\n    &-disabled {\n      filter: brightness(0.5);\n      cursor: not-allowed;\n    }\n  }\n\n  &-placeholder {\n    user-select: none;\n    pointer-events: none;\n  }\n}\n"],"mappings":""}

package/dist/esm/common/datePicker/datePicker.mjs

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../button/button.mjs";import n from"../actionIcon/actionIcon.mjs";import{Align as r}from"../floatingMenu/floatingMenu.types.mjs";import i from"../floatingMenu/floatingMenu.mjs";import ee from"../tooltip/tooltip.mjs";import a from"../input/input.mjs";import o from"../modal/modal.mjs";import{getLocale as s}from"../../services/localization.mjs";import{correctDateMaskValue as te,getDateFromDayMonthAndYear as ne,getDateString as c,getMonthName as re,getMonthNames as ie}from"./dateFunctions.mjs";import ae from"./components/datePickerMonth/datePickerMonth.mjs";import l from"../dropdown/dropdown.mjs";import u from"./datePicker.module.mjs";import{useEffect as d,useRef as f,useState as p}from"react";import m from"classnames";import{faChevronLeft as oe,faChevronRight as se}from"@fortawesome/free-solid-svg-icons";import{Fragment as ce,jsx as h,jsxs as g}from"react/jsx-runtime";import le from"@mona-health/react-input-mask";function _(_){let{className:ue=``,selected:v,onSelect:y=()=>null,formValidator:b=null,noInput:x=!1,noHeader:de=!1,isModal:S=!1,isInline:C=!1,onChange:fe=()=>null,minDate:w=null,maxDate:T=null,children:pe=null,showClearButton:me=!1,label:he=``,isValid:ge=!0,errorMessage:E=``,isRequired:_e=!1,startDate:D,endDate:O,style:k,classNames:A,styles:j,...M}=e(`DatePicker`,_),N=()=>b?b.value:v,P=N()??new Date,[F,I]=p(P.getMonth()+1),[L,R]=p(P.getFullYear()),[z,B]=p(!1),[V,H]=p(()=>N()?c(P):``),[ve,U]=p(!1),[ye,W]=p(!1),[,be]=p(0),[xe,Se]=p(v),G=f(b);if(xe!==v){Se(v);let e=v??new Date;I(e.getMonth()+1),R(e.getFullYear()),H(v?c(v):``)}d(()=>{if(G.current=b,!b)return;let e=()=>{let e=b.value;e?(I(e.getMonth()+1),R(e.getFullYear()),H(c(e))):H(``),be(e=>e+1)};return b.registerOnUpdateListener(e),()=>b.removeOnUpdateListener(e)},[b]);let Ce=()=>b?b.touched&&b.hasError():!ge||!!E,we=()=>!!(_e||b?.validators.find(e=>e.validatorId===`required`)),K=e=>{H(e?c(e):``),b&&b.set(e),fe(e)},q=e=>{K(e),y(e),B(!1)},J=e=>{I(t=>{let n=t+e;return n<1?(n=12,R(e=>e-1)):n>12&&(n=1,R(e=>e+1)),n})},Y=e=>{if(e.match(/\d{2}\.\d{2}\.\d{4}/gi)){let[t,n,r]=e.split(`.`),i=ne(Number(t),Number(n),Number(r));if(i&&i.toString()!==`Invalid Date`&&(!T||i<=T)&&(!w||i>=w))return i}return null},Te=({previousState:e,nextState:t})=>{if(!e||t.value===e.value)return t;let n=te(t.value,e.value,t.selection??null),r=Y(n.value);return r&&K(r),n},Ee=()=>{let e=400,t=new Date().getFullYear()-200;return w&&(t=w.getFullYear()),T&&(e=T.getFullYear()-t+1),Array.from(Array(e).keys()).map(e=>({key:e+t,label:e+t}))},X=N(),Z=Ce(),De=de?null:g(`div`,{className:m(u.datePickerHeader,A?.header),style:j?.header,children:[h(n,{icon:oe,onClick:()=>J(-1)}),h(`div`,{className:u.datePickerHeaderMonthAndYearContainer,children:g(`div`,{className:u.datePickerHeaderMonthAndYear,children:[h(l,{plainStyle:!0,scrollToSelected:!0,onChange:e=>I(e),className:m(u.datePickerHeaderMonth,A?.monthDropdown),style:j?.monthDropdown,value:re(s(`-`),L,F,1),items:ie().map((e,t)=>({key:t+1,label:e}))}),h(l,{plainStyle:!0,scrollToSelected:!0,useMatLabelStyle:!1,className:m(u.datePickerHeaderYear,A?.yearDropdown),style:j?.yearDropdown,onChange:e=>R(e),value:L,items:Ee()})]})}),h(n,{icon:se,onClick:()=>J(1)})]}),Q=g(ce,{children:[De,h(ae,{className:m(u.datePickerMonth,A?.calendar),style:j?.calendar,month:F,year:L,onSelect:q,selectionStart:D??X,selectionEnd:O??X,minDate:w,maxDate:T,onNavigateMonth:J}),me&&h(t,{onClick:()=>q(null),className:A?.clearButton,style:j?.clearButton,children:`Clear`}),pe]}),$=x?null:h(a,{autoComplete:`off`,className:A?.input,style:j?.input,readOnly:S,classNames:S?{input:u.datePickerModalInput}:void 0,label:`${he}${we()?` *`:``}`,value:V,onChange:e=>H(e),onClick:()=>B(!0),customInput:h(le,{mask:`99.99.9999`,maskPlaceholder:`_`,beforeMaskedStateChange:Te}),onBlur:()=>{G.current&&(G.current.touched=!0),U(!1),K(Y(V))},onFocus:()=>U(!0),onMouseEnter:()=>W(!0),onMouseLeave:()=>W(!1),isValid:!Z}),Oe=C?Q:S?h(o,{hideHeader:!0,isOpen:z,onClose:()=>B(!1),children:Q}):h(i,{isOpen:z,onOpenChange:e=>B(e),content:Q,align:r.Left,dontCloseOnChildClick:!0,children:$});return g(`div`,{...M,className:m(u.datePicker,ue,A?.root),style:{...k,...j?.root},children:[(S||C)&&$,Oe,h(ee,{variant:`error`,message:b?b.getCurrentErrorMessage():E||``,isVisible:Z&&(ve||ye)})]})}export{_ as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../button/button.mjs";import n from"../actionIcon/actionIcon.mjs";import{PopoverAlign as r,PopoverPlacement as i}from"../popover/popover.types.mjs";import ee from"../popover/popover.mjs";import te from"../tooltip/tooltip.mjs";import ne from"../input/input.mjs";import a from"../modal/modal.mjs";import{getLocale as o}from"../../services/localization.mjs";import{correctDateMaskValue as re,getDateFromDayMonthAndYear as ie,getDateString as s,getMonthName as ae,getMonthNames as oe}from"./dateFunctions.mjs";import se from"./components/datePickerMonth/datePickerMonth.mjs";import c from"../dropdown/dropdown.mjs";import l from"./datePicker.module.mjs";import{useEffect as ce,useRef as le,useState as u}from"react";import d from"classnames";import{faChevronLeft as f,faChevronRight as p}from"@fortawesome/free-solid-svg-icons";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";import ue from"@mona-health/react-input-mask";function _(_){let{className:de=``,selected:v,onSelect:fe=()=>null,formValidator:y=null,noInput:pe=!1,noHeader:me=!1,isModal:b=!1,isInline:x=!1,onChange:he=()=>null,minDate:S=null,maxDate:C=null,children:ge=null,showClearButton:_e=!1,label:ve=``,isValid:ye=!0,errorMessage:w=``,isRequired:T=!1,startDate:E,endDate:D,style:O,classNames:k,styles:A,...j}=e(`DatePicker`,_),M=()=>y?y.value:v,N=M()??new Date,[P,F]=u(N.getMonth()+1),[I,L]=u(N.getFullYear()),[R,z]=u(!1),[B,V]=u(()=>M()?s(N):``),[be,H]=u(!1),[xe,U]=u(!1),[,Se]=u(0),[Ce,we]=u(v),W=le(y);if(Ce!==v){we(v);let e=v??new Date;F(e.getMonth()+1),L(e.getFullYear()),V(v?s(v):``)}ce(()=>{if(W.current=y,!y)return;let e=()=>{let e=y.value;e?(F(e.getMonth()+1),L(e.getFullYear()),V(s(e))):V(``),Se(e=>e+1)};return y.registerOnUpdateListener(e),()=>y.removeOnUpdateListener(e)},[y]);let Te=()=>y?y.touched&&y.hasError():!ye||!!w,Ee=()=>!!(T||y?.validators.find(e=>e.validatorId===`required`)),G=e=>{V(e?s(e):``),y&&y.set(e),he(e)},K=e=>{G(e),fe(e),z(!1)},q=e=>{F(t=>{let n=t+e;return n<1?(n=12,L(e=>e-1)):n>12&&(n=1,L(e=>e+1)),n})},J=e=>{if(e.match(/\d{2}\.\d{2}\.\d{4}/gi)){let[t,n,r]=e.split(`.`),i=ie(Number(t),Number(n),Number(r));if(i&&i.toString()!==`Invalid Date`&&(!C||i<=C)&&(!S||i>=S))return i}return null},De=({previousState:e,nextState:t})=>{if(!e||t.value===e.value)return t;let n=re(t.value,e.value,t.selection??null),r=J(n.value);return r&&G(r),n},Y=()=>{let e=400,t=new Date().getFullYear()-200;return S&&(t=S.getFullYear()),C&&(e=C.getFullYear()-t+1),Array.from(Array(e).keys()).map(e=>({key:e+t,label:e+t}))},X=M(),Z=Te(),Oe=me?null:g(`div`,{className:d(l.datePickerHeader,k?.header),style:A?.header,children:[h(n,{icon:f,onClick:()=>q(-1)}),h(`div`,{className:l.datePickerHeaderMonthAndYearContainer,children:g(`div`,{className:l.datePickerHeaderMonthAndYear,children:[h(c,{plainStyle:!0,scrollToSelected:!0,onChange:e=>F(e),className:d(l.datePickerHeaderMonth,k?.monthDropdown),style:A?.monthDropdown,value:ae(o(`-`),I,P,1),items:oe().map((e,t)=>({key:t+1,label:e}))}),h(c,{plainStyle:!0,scrollToSelected:!0,useMatLabelStyle:!1,className:d(l.datePickerHeaderYear,k?.yearDropdown),style:A?.yearDropdown,onChange:e=>L(e),value:I,items:Y()})]})}),h(n,{icon:p,onClick:()=>q(1)})]}),Q=g(m,{children:[Oe,h(se,{className:d(l.datePickerMonth,k?.calendar),style:A?.calendar,month:P,year:I,onSelect:K,selectionStart:E??X,selectionEnd:D??X,minDate:S,maxDate:C,onNavigateMonth:q}),_e&&h(t,{onClick:()=>K(null),className:k?.clearButton,style:A?.clearButton,children:`Clear`}),ge]}),$=pe?null:h(ne,{autoComplete:`off`,className:k?.input,style:A?.input,readOnly:b,classNames:b?{input:l.datePickerModalInput}:void 0,label:`${ve}${Ee()?` *`:``}`,value:B,onChange:e=>V(e),onClick:()=>z(!0),customInput:h(ue,{mask:`99.99.9999`,maskPlaceholder:`_`,beforeMaskedStateChange:De}),onBlur:()=>{W.current&&(W.current.touched=!0),H(!1),G(J(B))},onFocus:()=>H(!0),onMouseEnter:()=>U(!0),onMouseLeave:()=>U(!1),isValid:!Z}),ke=x?Q:b?h(a,{hideHeader:!0,isOpen:R,onClose:()=>z(!1),children:Q}):h(ee,{isOpen:R,onOpenChange:e=>z(e),content:Q,placement:i.Bottom,align:r.Start,closeOnTriggerClick:!1,constrainWidth:!1,children:$});return g(`div`,{...j,className:d(l.datePicker,de,k?.root),style:{...O,...A?.root},children:[(b||x)&&$,ke,h(te,{variant:`error`,message:y?y.getCurrentErrorMessage():w||``,isVisible:Z&&(be||xe)})]})}export{_ as default};
 //# sourceMappingURL=datePicker.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"datePicker.mjs","names":[],"sources":["../../../../package/common/datePicker/datePicker.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport cx from 'classnames';\nimport Input from '../input';\nimport { useComponentDefaults } from '../configProvider';\nimport DatePickerMonth from './components/datePickerMonth';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\nimport { getLocale } from 'services/localization';\nimport ActionIcon from '../actionIcon';\nimport Modal from '../modal';\nimport FloatingMenu from '../floatingMenu';\nimport Dropdown from '../dropdown';\nimport { Align } from '../floatingMenu/floatingMenu.types';\nimport InputMask, { InputState, BeforeMaskedStateChangeStates } from '@mona-health/react-input-mask';\nimport {\n  getDateFromDayMonthAndYear,\n  getMonthName,\n  getMonthNames,\n  getDateString,\n  correctDateMaskValue,\n} from './dateFunctions';\nimport Button from '../button';\nimport Tooltip from '../tooltip';\nimport type { DatePickerProps } from './datePicker.types';\n\nimport styles from './datePicker.module.pcss';\n\nexport default function DatePicker(props: DatePickerProps) {\n  const {\n    className = '',\n    selected,\n    onSelect = () => null,\n    formValidator = null,\n    noInput = false,\n    noHeader = false,\n    isModal = false,\n    isInline = false,\n    onChange = () => null,\n    minDate = null,\n    maxDate = null,\n    children = null,\n    showClearButton = false,\n    label = '',\n    isValid = true,\n    errorMessage = '',\n    isRequired = false,\n    startDate,\n    endDate,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('DatePicker', props);\n  const getCurrValue = (): Date | undefined => (formValidator ? (formValidator.value as Date) : selected);\n\n  const initialDate = getCurrValue() ?? new Date();\n\n  const [currentMonth, setCurrentMonth] = useState(initialDate.getMonth() + 1);\n  const [currentYear, setCurrentYear] = useState(initialDate.getFullYear());\n  const [isPickerOpen, setIsPickerOpen] = useState(false);\n  const [currentDateString, setCurrentDateString] = useState(() => (getCurrValue() ? getDateString(initialDate) : ''));\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [, forceUpdate] = useState(0);\n  const [prevSelected, setPrevSelected] = useState(selected);\n\n  const fvRef = useRef(formValidator);\n\n  // Sync navigation view when `selected` prop changes externally\n  if (prevSelected !== selected) {\n    setPrevSelected(selected);\n    const d = selected ?? new Date();\n    setCurrentMonth(d.getMonth() + 1);\n    setCurrentYear(d.getFullYear());\n    setCurrentDateString(selected ? getDateString(selected) : '');\n  }\n\n  // Subscribe to formValidator updates (external system → setState in callback)\n  useEffect(() => {\n    fvRef.current = formValidator;\n    if (!formValidator) return;\n    const listener = () => {\n      const val = formValidator.value as Date | undefined;\n      if (val) {\n        setCurrentMonth(val.getMonth() + 1);\n        setCurrentYear(val.getFullYear());\n        setCurrentDateString(getDateString(val));\n      } else {\n        setCurrentDateString('');\n      }\n      forceUpdate((n: number) => n + 1);\n    };\n    formValidator.registerOnUpdateListener(listener);\n    return () => formValidator.removeOnUpdateListener(listener);\n  }, [formValidator]);\n\n  const hasError = (): boolean => {\n    return formValidator ? formValidator.touched && formValidator.hasError() : !isValid || !!errorMessage;\n  };\n\n  const computedIsRequired = (): boolean => {\n    return !!(\n      isRequired || formValidator?.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required')\n    );\n  };\n\n  const handleChange = (date: Date | null) => {\n    setCurrentDateString(date ? getDateString(date) : '');\n    if (formValidator) formValidator.set(date);\n    onChange(date);\n  };\n\n  const handleSelect = (date: Date | null) => {\n    handleChange(date);\n    onSelect(date);\n    setIsPickerOpen(false);\n  };\n\n  const changeMonth = (delta: number) => {\n    setCurrentMonth((prev) => {\n      let next = prev + delta;\n      if (next < 1) {\n        next = 12;\n        setCurrentYear((y) => y - 1);\n      } else if (next > 12) {\n        next = 1;\n        setCurrentYear((y) => y + 1);\n      }\n      return next;\n    });\n  };\n\n  const tryParseDateString = (dateString: string): Date | null => {\n    if (dateString.match(/\\d{2}\\.\\d{2}\\.\\d{4}/gi)) {\n      const [day, month, year] = dateString.split('.');\n      const parsedDate = getDateFromDayMonthAndYear(Number(day), Number(month), Number(year));\n      if (parsedDate && parsedDate.toString() !== 'Invalid Date') {\n        const isSmallerThanMaxDate = !maxDate || parsedDate <= maxDate;\n        const isBiggerThanMinDate = !minDate || parsedDate >= minDate;\n        if (isSmallerThanMaxDate && isBiggerThanMinDate) return parsedDate;\n      }\n    }\n    return null;\n  };\n\n  const beforeMaskedStateChange = ({ previousState, nextState }: BeforeMaskedStateChangeStates): InputState => {\n    // previousState is only supplied on user-driven change events; on mount/focus/blur\n    // there is nothing to auto-correct, so the next state passes through unchanged.\n    if (!previousState || nextState.value === previousState.value) return nextState;\n\n    const corrected = correctDateMaskValue(nextState.value, previousState.value, nextState.selection ?? null);\n\n    const parsedDate = tryParseDateString(corrected.value);\n    if (parsedDate) handleChange(parsedDate);\n\n    return corrected;\n  };\n\n  const getYearDropdownOptions = () => {\n    let length = 400;\n    let zeroOffset = new Date().getFullYear() - 200;\n    if (minDate) zeroOffset = minDate.getFullYear();\n    if (maxDate) length = maxDate.getFullYear() - zeroOffset + 1;\n    return Array.from(Array(length).keys()).map((i) => ({ key: i + zeroOffset, label: i + zeroOffset }));\n  };\n\n  const currValue = getCurrValue();\n  const hasErr = hasError();\n\n  const header = noHeader ? null : (\n    <div className={cx(styles.datePickerHeader, classNames?.header)} style={slotStyles?.header}>\n      <ActionIcon icon={faChevronLeft} onClick={() => changeMonth(-1)} />\n      <div className={styles.datePickerHeaderMonthAndYearContainer}>\n        <div className={styles.datePickerHeaderMonthAndYear}>\n          <Dropdown\n            plainStyle\n            scrollToSelected\n            onChange={(v) => setCurrentMonth(v as number)}\n            className={cx(styles.datePickerHeaderMonth, classNames?.monthDropdown)}\n            style={slotStyles?.monthDropdown}\n            value={getMonthName(getLocale('-'), currentYear, currentMonth, 1)}\n            items={getMonthNames().map((month, index) => ({ key: index + 1, label: month }))}\n          />\n          <Dropdown\n            plainStyle\n            scrollToSelected\n            useMatLabelStyle={false}\n            className={cx(styles.datePickerHeaderYear, classNames?.yearDropdown)}\n            style={slotStyles?.yearDropdown}\n            onChange={(v) => setCurrentYear(v as number)}\n            value={currentYear}\n            items={getYearDropdownOptions()}\n          />\n        </div>\n      </div>\n      <ActionIcon icon={faChevronRight} onClick={() => changeMonth(1)} />\n    </div>\n  );\n\n  const pickerContent = (\n    <>\n      {header}\n      <DatePickerMonth\n        className={cx(styles.datePickerMonth, classNames?.calendar)}\n        style={slotStyles?.calendar}\n        month={currentMonth}\n        year={currentYear}\n        onSelect={handleSelect}\n        selectionStart={startDate ?? currValue}\n        selectionEnd={endDate ?? currValue}\n        minDate={minDate}\n        maxDate={maxDate}\n        onNavigateMonth={changeMonth}\n      />\n      {showClearButton && (\n        <Button onClick={() => handleSelect(null)} className={classNames?.clearButton} style={slotStyles?.clearButton}>\n          Clear\n        </Button>\n      )}\n      {children}\n    </>\n  );\n\n  const input = noInput ? null : (\n    <Input\n      autoComplete='off'\n      className={classNames?.input}\n      style={slotStyles?.input}\n      readOnly={isModal}\n      classNames={isModal ? { input: styles.datePickerModalInput } : undefined}\n      label={`${label}${computedIsRequired() ? ' *' : ''}`}\n      value={currentDateString}\n      onChange={(v) => setCurrentDateString(v as string)}\n      onClick={() => setIsPickerOpen(true)}\n      customInput={\n        <InputMask mask='99.99.9999' maskPlaceholder='_' beforeMaskedStateChange={beforeMaskedStateChange} />\n      }\n      onBlur={() => {\n        if (fvRef.current) fvRef.current.touched = true;\n        setIsFocused(false);\n        handleChange(tryParseDateString(currentDateString));\n      }}\n      onFocus={() => setIsFocused(true)}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      isValid={!hasErr}\n    />\n  );\n\n  const picker = (() => {\n    if (isInline) return pickerContent;\n    if (isModal) {\n      return (\n        <Modal hideHeader isOpen={isPickerOpen} onClose={() => setIsPickerOpen(false)}>\n          {pickerContent}\n        </Modal>\n      );\n    }\n    return (\n      <FloatingMenu\n        isOpen={isPickerOpen}\n        onOpenChange={(open: boolean) => setIsPickerOpen(open)}\n        content={pickerContent}\n        align={Align.Left}\n        dontCloseOnChildClick\n      >\n        {input}\n      </FloatingMenu>\n    );\n  })();\n\n  return (\n    <div\n      {...rest}\n      className={cx(styles.datePicker, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      {(isModal || isInline) && input}\n      {picker}\n      <Tooltip\n        variant='error'\n        message={formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || ''}\n        isVisible={hasErr && (isFocused || isHovered)}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"datePicker.mjs","names":[],"sources":["../../../../package/common/datePicker/datePicker.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport cx from 'classnames';\nimport Input from '../input';\nimport { useComponentDefaults } from '../configProvider';\nimport DatePickerMonth from './components/datePickerMonth';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\nimport { getLocale } from 'services/localization';\nimport ActionIcon from '../actionIcon';\nimport Modal from '../modal';\nimport Popover from '../popover';\nimport Dropdown from '../dropdown';\nimport { PopoverAlign, PopoverPlacement } from '../popover/popover.types';\nimport InputMask, { InputState, BeforeMaskedStateChangeStates } from '@mona-health/react-input-mask';\nimport {\n  getDateFromDayMonthAndYear,\n  getMonthName,\n  getMonthNames,\n  getDateString,\n  correctDateMaskValue,\n} from './dateFunctions';\nimport Button from '../button';\nimport Tooltip from '../tooltip';\nimport type { DatePickerProps } from './datePicker.types';\n\nimport styles from './datePicker.module.pcss';\n\nexport default function DatePicker(props: DatePickerProps) {\n  const {\n    className = '',\n    selected,\n    onSelect = () => null,\n    formValidator = null,\n    noInput = false,\n    noHeader = false,\n    isModal = false,\n    isInline = false,\n    onChange = () => null,\n    minDate = null,\n    maxDate = null,\n    children = null,\n    showClearButton = false,\n    label = '',\n    isValid = true,\n    errorMessage = '',\n    isRequired = false,\n    startDate,\n    endDate,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('DatePicker', props);\n  const getCurrValue = (): Date | undefined => (formValidator ? (formValidator.value as Date) : selected);\n\n  const initialDate = getCurrValue() ?? new Date();\n\n  const [currentMonth, setCurrentMonth] = useState(initialDate.getMonth() + 1);\n  const [currentYear, setCurrentYear] = useState(initialDate.getFullYear());\n  const [isPickerOpen, setIsPickerOpen] = useState(false);\n  const [currentDateString, setCurrentDateString] = useState(() => (getCurrValue() ? getDateString(initialDate) : ''));\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [, forceUpdate] = useState(0);\n  const [prevSelected, setPrevSelected] = useState(selected);\n\n  const fvRef = useRef(formValidator);\n\n  // Sync navigation view when `selected` prop changes externally\n  if (prevSelected !== selected) {\n    setPrevSelected(selected);\n    const d = selected ?? new Date();\n    setCurrentMonth(d.getMonth() + 1);\n    setCurrentYear(d.getFullYear());\n    setCurrentDateString(selected ? getDateString(selected) : '');\n  }\n\n  // Subscribe to formValidator updates (external system → setState in callback)\n  useEffect(() => {\n    fvRef.current = formValidator;\n    if (!formValidator) return;\n    const listener = () => {\n      const val = formValidator.value as Date | undefined;\n      if (val) {\n        setCurrentMonth(val.getMonth() + 1);\n        setCurrentYear(val.getFullYear());\n        setCurrentDateString(getDateString(val));\n      } else {\n        setCurrentDateString('');\n      }\n      forceUpdate((n: number) => n + 1);\n    };\n    formValidator.registerOnUpdateListener(listener);\n    return () => formValidator.removeOnUpdateListener(listener);\n  }, [formValidator]);\n\n  const hasError = (): boolean => {\n    return formValidator ? formValidator.touched && formValidator.hasError() : !isValid || !!errorMessage;\n  };\n\n  const computedIsRequired = (): boolean => {\n    return !!(\n      isRequired || formValidator?.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required')\n    );\n  };\n\n  const handleChange = (date: Date | null) => {\n    setCurrentDateString(date ? getDateString(date) : '');\n    if (formValidator) formValidator.set(date);\n    onChange(date);\n  };\n\n  const handleSelect = (date: Date | null) => {\n    handleChange(date);\n    onSelect(date);\n    setIsPickerOpen(false);\n  };\n\n  const changeMonth = (delta: number) => {\n    setCurrentMonth((prev) => {\n      let next = prev + delta;\n      if (next < 1) {\n        next = 12;\n        setCurrentYear((y) => y - 1);\n      } else if (next > 12) {\n        next = 1;\n        setCurrentYear((y) => y + 1);\n      }\n      return next;\n    });\n  };\n\n  const tryParseDateString = (dateString: string): Date | null => {\n    if (dateString.match(/\\d{2}\\.\\d{2}\\.\\d{4}/gi)) {\n      const [day, month, year] = dateString.split('.');\n      const parsedDate = getDateFromDayMonthAndYear(Number(day), Number(month), Number(year));\n      if (parsedDate && parsedDate.toString() !== 'Invalid Date') {\n        const isSmallerThanMaxDate = !maxDate || parsedDate <= maxDate;\n        const isBiggerThanMinDate = !minDate || parsedDate >= minDate;\n        if (isSmallerThanMaxDate && isBiggerThanMinDate) return parsedDate;\n      }\n    }\n    return null;\n  };\n\n  const beforeMaskedStateChange = ({ previousState, nextState }: BeforeMaskedStateChangeStates): InputState => {\n    // previousState is only supplied on user-driven change events; on mount/focus/blur\n    // there is nothing to auto-correct, so the next state passes through unchanged.\n    if (!previousState || nextState.value === previousState.value) return nextState;\n\n    const corrected = correctDateMaskValue(nextState.value, previousState.value, nextState.selection ?? null);\n\n    const parsedDate = tryParseDateString(corrected.value);\n    if (parsedDate) handleChange(parsedDate);\n\n    return corrected;\n  };\n\n  const getYearDropdownOptions = () => {\n    let length = 400;\n    let zeroOffset = new Date().getFullYear() - 200;\n    if (minDate) zeroOffset = minDate.getFullYear();\n    if (maxDate) length = maxDate.getFullYear() - zeroOffset + 1;\n    return Array.from(Array(length).keys()).map((i) => ({ key: i + zeroOffset, label: i + zeroOffset }));\n  };\n\n  const currValue = getCurrValue();\n  const hasErr = hasError();\n\n  const header = noHeader ? null : (\n    <div className={cx(styles.datePickerHeader, classNames?.header)} style={slotStyles?.header}>\n      <ActionIcon icon={faChevronLeft} onClick={() => changeMonth(-1)} />\n      <div className={styles.datePickerHeaderMonthAndYearContainer}>\n        <div className={styles.datePickerHeaderMonthAndYear}>\n          <Dropdown\n            plainStyle\n            scrollToSelected\n            onChange={(v) => setCurrentMonth(v as number)}\n            className={cx(styles.datePickerHeaderMonth, classNames?.monthDropdown)}\n            style={slotStyles?.monthDropdown}\n            value={getMonthName(getLocale('-'), currentYear, currentMonth, 1)}\n            items={getMonthNames().map((month, index) => ({ key: index + 1, label: month }))}\n          />\n          <Dropdown\n            plainStyle\n            scrollToSelected\n            useMatLabelStyle={false}\n            className={cx(styles.datePickerHeaderYear, classNames?.yearDropdown)}\n            style={slotStyles?.yearDropdown}\n            onChange={(v) => setCurrentYear(v as number)}\n            value={currentYear}\n            items={getYearDropdownOptions()}\n          />\n        </div>\n      </div>\n      <ActionIcon icon={faChevronRight} onClick={() => changeMonth(1)} />\n    </div>\n  );\n\n  const pickerContent = (\n    <>\n      {header}\n      <DatePickerMonth\n        className={cx(styles.datePickerMonth, classNames?.calendar)}\n        style={slotStyles?.calendar}\n        month={currentMonth}\n        year={currentYear}\n        onSelect={handleSelect}\n        selectionStart={startDate ?? currValue}\n        selectionEnd={endDate ?? currValue}\n        minDate={minDate}\n        maxDate={maxDate}\n        onNavigateMonth={changeMonth}\n      />\n      {showClearButton && (\n        <Button onClick={() => handleSelect(null)} className={classNames?.clearButton} style={slotStyles?.clearButton}>\n          Clear\n        </Button>\n      )}\n      {children}\n    </>\n  );\n\n  const input = noInput ? null : (\n    <Input\n      autoComplete='off'\n      className={classNames?.input}\n      style={slotStyles?.input}\n      readOnly={isModal}\n      classNames={isModal ? { input: styles.datePickerModalInput } : undefined}\n      label={`${label}${computedIsRequired() ? ' *' : ''}`}\n      value={currentDateString}\n      onChange={(v) => setCurrentDateString(v as string)}\n      onClick={() => setIsPickerOpen(true)}\n      customInput={\n        <InputMask mask='99.99.9999' maskPlaceholder='_' beforeMaskedStateChange={beforeMaskedStateChange} />\n      }\n      onBlur={() => {\n        if (fvRef.current) fvRef.current.touched = true;\n        setIsFocused(false);\n        handleChange(tryParseDateString(currentDateString));\n      }}\n      onFocus={() => setIsFocused(true)}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      isValid={!hasErr}\n    />\n  );\n\n  const picker = (() => {\n    if (isInline) return pickerContent;\n    if (isModal) {\n      return (\n        <Modal hideHeader isOpen={isPickerOpen} onClose={() => setIsPickerOpen(false)}>\n          {pickerContent}\n        </Modal>\n      );\n    }\n    return (\n      <Popover\n        isOpen={isPickerOpen}\n        onOpenChange={(open: boolean) => setIsPickerOpen(open)}\n        content={pickerContent}\n        placement={PopoverPlacement.Bottom}\n        align={PopoverAlign.Start}\n        // A click to place the caret in the field must not take the panel away.\n        // The focus stays there on its own: Popover only follows a keyboard open.\n        closeOnTriggerClick={false}\n        constrainWidth={false}\n      >\n        {input}\n      </Popover>\n    );\n  })();\n\n  return (\n    <div\n      {...rest}\n      className={cx(styles.datePicker, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      {(isModal || isInline) && input}\n      {picker}\n      <Tooltip\n        variant='error'\n        message={formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || ''}\n        isVisible={hasErr && (isFocused || isHovered)}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/esm/common/dropdown/dropdown.mjs

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{usePresentationDefault as t}from"../configProvider/usePresentationDefault.mjs";import n from"../bodyEnd/bodyEnd.mjs";import r from"../styles/sheet.module.mjs";import ee from"../sheetBackdrop/sheetBackdrop.mjs";import{useFloatingPosition as i}from"../floatingMenu/useFloatingPosition.mjs";import{Presentation as a}from"../floatingMenu/floatingMenu.types.mjs";import o from"../hooks/useSheet.mjs";import{useOverlay as s}from"../hooks/useOverlay.mjs";import c from"../tooltip/tooltip.mjs";import te from"../infiniteBlock/infiniteBlock.mjs";import l from"./dropdown.module.mjs";import{useEffect as u,useLayoutEffect as ne,useRef as d,useState as f}from"react";import p from"classnames";import{FontAwesomeIcon as re}from"@fortawesome/react-fontawesome";import{faChevronDown as ie}from"@fortawesome/free-solid-svg-icons";import{jsx as m,jsxs as h}from"react/jsx-runtime";import ae from"downshift";function g(g){let{errorMessage:_=``,className:v=``,style:oe,label:y=``,value:se=``,isValid:ce=!0,tabIndex:b=0,isRequired:le=!1,customProps:x={},isRow:ue=!1,disabled:S=!1,readOnly:C=!1,onScroll:de=()=>Promise.resolve(),onClick:w,onChange:T,onFocus:fe=null,onBlur:pe=null,onMouseEnter:me=null,onMouseLeave:he=null,dropdownLabel:ge,isDropdownListWider:E=!1,formValidator:D=null,classNames:O,styles:k,items:A=[],useMatLabelStyle:j=!0,alwaysFloatLabel:M=!1,placeholder:N=``,plainStyle:P=!1,scrollToSelected:F=!1,presentation:I,reactRef:L,..._e}=e(`Dropdown`,g),[R,z]=f(!1),[ve,B]=f(!1),[,ye]=f(0),V=d(D),H=d(null),U=d(null),[W,be]=f(!1),xe=t(),Se=I??xe??a.Default,{isSheet:G,sheetStyle:Ce}=o(Se);ne(()=>{let e=H.current,t=U.current;if(!W||G||!e||!t)return;let{width:n}=e.getBoundingClientRect(),{fontSize:r}=window.getComputedStyle(e);t.style.width=`${n}px`,t.style.fontSize=r},[W,G]),i({isOpen:W&&!G,triggerRef:H,anchorRef:U,panelRef:U,flipClassName:l.dropdownInputListAnimFlip}),s({isActive:W,containerRef:U,trapFocus:!1,lockScroll:G}),u(()=>{if(V.current=D,!V.current)return;V.current.label=y??``,V.current.validate();let e=()=>ye(e=>e+1);return V.current.registerOnUpdateListener(e),()=>V.current?.removeOnUpdateListener(e)},[D,y]);let we=e=>{B(!0),me?.(e)},Te=e=>{B(!1),he?.(e)},Ee=e=>{z(!0),fe?.(e)},De=e=>{V.current&&(V.current.touched=!0),z(!1),pe?.(e)},Oe=()=>D?D.touched&&D.hasError():!ce||!!_,K=()=>!!(le||D?.validators.find(e=>e.validatorId===`required`)),ke=e=>{D?(D.set(e),T?.(D.value,x)):T?.(e,x)},q=ge,J=D?D.value:se,Y=Oe();A.forEach(e=>{e.key===J&&(q=e.label)});let X=q||J,Z=X==null||typeof X==`string`&&X.trim()===``,Q=K()?m(`span`,{className:l.requiredMark,children:`*`}):null,Ae=y&&K()?`${y} *`:y,$=R&&!C;return h(`div`,{..._e,className:p(v,O?.root,l.dropdownLabel,l.dropdown,{[l.dropdownLabelColumn]:!ue}),style:{...oe,...k?.root},onMouseEnter:we,onMouseLeave:Te,children:[m(ae,{...C?{isOpen:!1}:{},onChange:e=>ke((e||{key:``}).key),itemToString:e=>e?String(e.key):``,selectedItem:A.find(e=>e.key===J)??null,onStateChange:e=>{typeof e.isOpen==`boolean`&&be(e.isOpen)},stateReducer:(e,t)=>F&&Object.prototype.hasOwnProperty.call(t,`isOpen`)?{...t,highlightedIndex:t.isOpen?A.indexOf(e.selectedItem):null}:t,children:({getItemProps:e,getMenuProps:t,getToggleButtonProps:i,closeMenu:a,isOpen:o,selectedItem:s,highlightedIndex:c,setHighlightedIndex:u})=>m(`div`,{children:h(`div`,{ref:H,onFocus:Ee,onBlur:De,className:p(l.dropdownInput,{[l.dropdownInputPlain]:P,[l.dropdownInputReadOnly]:C&&!S},O?.field),style:k?.field,children:[m(`button`,{tabIndex:b,type:`button`,disabled:S,"aria-readonly":C||void 0,className:p(l.dropdownInputButton,{[l.dropdownInputButtonDisabled]:S,[l.dropdownInputButtonReadOnly]:C&&!S},O?.control),style:{...E?{padding:`6px`,border:`none`}:{},...k?.control},...i(),onClick:e=>{i().onClick?.(e),w?.(e)},ref:L,children:Z?`\xA0`:X}),m(`button`,{type:`button`,tabIndex:-1,disabled:S,className:p(l.dropdownInputButtonIcon,O?.icon),style:k?.icon,...i(),onClick:e=>{i().onClick?.(e),w?.(e)},children:!S&&!C&&m(re,{icon:ie,className:p(l.dropdownInputButtonIconArrow,{[l.dropdownInputButtonIconArrowOpen]:o})})}),!S&&!C&&o?h(n,{children:[G&&m(ee,{onClose:a}),m(`div`,{...t({ref:e=>{U.current=e},"aria-label":y||N||void 0},{suppressRefError:!0}),style:G?Ce:void 0,className:p(l.dropdownInputListAnim,{[r.sheet]:G,[l.dropdownInputListAnimWider]:E&&!G}),children:m(te,{onScroll:de,className:p(l.dropdownInputList,G&&r.sheetScroll,O?.list),style:k?.list,setHighlightedIndex:u,children:A.map((t,n)=>m(`div`,{...e({index:n,item:t,disabled:!!t.disabled}),style:k?.option,className:p(l.dropdownInputListItem,O?.option,{[l.dropdownInputListItemActive]:c===n,[l.dropdownInputListItemSelected]:s===t,[l.dropdownInputListItemDisabled]:!!t.disabled}),children:t.label},t.key))})})]}):null,m(`fieldset`,{className:p(l.dropdownFieldset,{[l.dropdownBorderPlain]:P,[l.dropdownBorderFocused]:$,[l.dropdownBorderInvalid]:Y,[l.dropdownBorderError]:Y}),children:m(`legend`,{className:p(l.dropdownFieldsetLegend,{[l.dropdownFieldsetLegendActive]:j&&(M||$||!Z)}),children:m(`span`,{children:Ae})})}),j&&y&&h(`div`,{className:p(l.dropdownMatLabel,{[l.dropdownMatLabelFloating]:M||$||!Z},O?.label),style:k?.label,children:[y,Q]}),j&&N&&m(`div`,{className:p(l.dropdownPlaceholder,$&&!q&&l.dropdownPlaceholderShown),children:N})]})})}),y&&!j&&h(`div`,{className:p(l.dropdownLabelText,O?.label),style:k?.label,children:[y,Q]}),m(c,{variant:`error`,message:D?D.getCurrentErrorMessage():_||``,isVisible:Y&&(R||ve)})]})}export{g as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{usePresentationDefault as t}from"../configProvider/usePresentationDefault.mjs";import{Presentation as n}from"../configProvider/presentation.types.mjs";import ee from"../styles/sheet.module.mjs";import{PopoverAlign as te,PopoverPlacement as ne}from"../popover/popover.types.mjs";import r from"../hooks/useSheet.mjs";import re from"../popover/popover.mjs";import i from"../tooltip/tooltip.mjs";import ie from"../infiniteBlock/infiniteBlock.mjs";import a from"./dropdown.module.mjs";import{useEffect as o,useLayoutEffect as s,useRef as c,useState as l}from"react";import u from"classnames";import{FontAwesomeIcon as ae}from"@fortawesome/react-fontawesome";import{faChevronDown as oe}from"@fortawesome/free-solid-svg-icons";import{jsx as d,jsxs as f}from"react/jsx-runtime";import se from"downshift";function p(p){let{errorMessage:m=``,className:ce=``,style:le,label:h=``,value:ue=``,isValid:de=!0,tabIndex:g=0,isRequired:_=!1,customProps:v={},isRow:fe=!1,disabled:y=!1,readOnly:b=!1,onScroll:pe=()=>Promise.resolve(),onClick:x,onChange:S,onFocus:me=null,onBlur:he=null,onMouseEnter:ge=null,onMouseLeave:_e=null,dropdownLabel:ve,isDropdownListWider:C=!1,formValidator:w=null,classNames:T,styles:E,items:D=[],useMatLabelStyle:O=!0,alwaysFloatLabel:k=!1,placeholder:A=``,plainStyle:j=!1,scrollToSelected:M=!1,presentation:N,reactRef:P,...F}=e(`Dropdown`,p),[I,L]=l(!1),[ye,R]=l(!1),[,be]=l(0),z=c(w),B=c(null),V=c(null),[H,xe]=l(!1),Se=t(),U=N??Se??n.Default,{isSheet:W}=r(U);s(()=>{let e=B.current,t=V.current;H&&!W&&e&&t&&(t.style.fontSize=window.getComputedStyle(e).fontSize)},[H,W]),o(()=>{if(z.current=w,!z.current)return;z.current.label=h??``,z.current.validate();let e=()=>be(e=>e+1);return z.current.registerOnUpdateListener(e),()=>z.current?.removeOnUpdateListener(e)},[w,h]);let Ce=e=>{R(!0),ge?.(e)},we=e=>{R(!1),_e?.(e)},Te=e=>{L(!0),me?.(e)},Ee=e=>{z.current&&(z.current.touched=!0),L(!1),he?.(e)},De=()=>w?w.touched&&w.hasError():!de||!!m,G=()=>!!(_||w?.validators.find(e=>e.validatorId===`required`)),K=e=>{w?(w.set(e),S?.(w.value,v)):S?.(e,v)},q=ve,J=w?w.value:ue,Y=De();D.forEach(e=>{e.key===J&&(q=e.label)});let X=q||J,Z=X==null||typeof X==`string`&&X.trim()===``,Q=G()?d(`span`,{className:a.requiredMark,children:`*`}):null,Oe=h&&G()?`${h} *`:h,$=I&&!b;return f(`div`,{...F,className:u(ce,T?.root,a.dropdownLabel,a.dropdown,{[a.dropdownLabelColumn]:!fe}),style:{...le,...E?.root},onMouseEnter:Ce,onMouseLeave:we,children:[d(se,{...b?{isOpen:!1}:{},onChange:e=>K((e||{key:``}).key),itemToString:e=>e?String(e.key):``,selectedItem:D.find(e=>e.key===J)??null,onStateChange:e=>{typeof e.isOpen==`boolean`&&xe(e.isOpen)},stateReducer:(e,t)=>M&&Object.prototype.hasOwnProperty.call(t,`isOpen`)?{...t,highlightedIndex:t.isOpen?D.indexOf(e.selectedItem):null}:t,children:({getItemProps:e,getMenuProps:t,getToggleButtonProps:n,closeMenu:r,isOpen:i,selectedItem:o,highlightedIndex:s,setHighlightedIndex:c})=>d(`div`,{children:d(re,{isOpen:!y&&!b&&i,onOpenChange:e=>{e||r()},placement:ne.Bottom,align:te.Start,offset:0,withArrow:!1,constrainWidth:!1,width:`trigger`,closeOnTriggerClick:!1,focusOnOpen:!1,presentation:U,classNames:{panel:a.dropdownPanel},content:d(`div`,{...t({ref:e=>{V.current=e},"aria-label":h||A||void 0},{suppressRefError:!0}),className:u(!W&&a.dropdownInputListAnim,{[a.dropdownInputListAnimWider]:C&&!W}),children:d(ie,{onScroll:pe,className:u(a.dropdownInputList,W&&ee.sheetScroll,T?.list),style:E?.list,setHighlightedIndex:c,children:D.map((t,n)=>d(`div`,{...e({index:n,item:t,disabled:!!t.disabled}),style:E?.option,className:u(a.dropdownInputListItem,T?.option,{[a.dropdownInputListItemActive]:s===n,[a.dropdownInputListItemSelected]:o===t,[a.dropdownInputListItemDisabled]:!!t.disabled}),children:t.label},t.key))})}),children:f(`div`,{ref:B,onFocus:Te,onBlur:Ee,className:u(a.dropdownInput,{[a.dropdownInputPlain]:j,[a.dropdownInputReadOnly]:b&&!y},T?.field),style:E?.field,children:[d(`button`,{tabIndex:g,type:`button`,disabled:y,"aria-readonly":b||void 0,className:u(a.dropdownInputButton,{[a.dropdownInputButtonDisabled]:y,[a.dropdownInputButtonReadOnly]:b&&!y},T?.control),style:{...C?{padding:`6px`,border:`none`}:{},...E?.control},...n(),onClick:e=>{n().onClick?.(e),x?.(e)},ref:P,children:Z?`\xA0`:X}),d(`button`,{type:`button`,tabIndex:-1,disabled:y,className:u(a.dropdownInputButtonIcon,T?.icon),style:E?.icon,...n(),onMouseDown:e=>e.preventDefault(),onClick:e=>{n().onClick?.(e),x?.(e)},children:!y&&!b&&d(ae,{icon:oe,className:u(a.dropdownInputButtonIconArrow,{[a.dropdownInputButtonIconArrowOpen]:i})})}),d(`fieldset`,{className:u(a.dropdownFieldset,{[a.dropdownBorderPlain]:j,[a.dropdownBorderFocused]:$,[a.dropdownBorderInvalid]:Y,[a.dropdownBorderError]:Y}),children:d(`legend`,{className:u(a.dropdownFieldsetLegend,{[a.dropdownFieldsetLegendActive]:O&&(k||$||!Z)}),children:d(`span`,{children:Oe})})}),O&&h&&f(`div`,{className:u(a.dropdownMatLabel,{[a.dropdownMatLabelFloating]:k||$||!Z},T?.label),style:E?.label,children:[h,Q]}),O&&A&&d(`div`,{className:u(a.dropdownPlaceholder,$&&!q&&a.dropdownPlaceholderShown),children:A})]})})})}),h&&!O&&f(`div`,{className:u(a.dropdownLabelText,T?.label),style:E?.label,children:[h,Q]}),d(i,{variant:`error`,message:w?w.getCurrentErrorMessage():m||``,isVisible:Y&&(I||ye)})]})}export{p as default};
 //# sourceMappingURL=dropdown.mjs.map