@ahrowe/ui 0.34.0 → 0.35.0

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

@@ -1,2 +1,2 @@
-var e=`card_w-6Ki`,t=`card-clip_eZ8-1`,n=`card-padding_X2-q-`,r=`card-gaps_jhYkx`,i=`card-style-elevated_exvMB`,a=`card-style-outlined_PxZZA`,o=`card-style-filled_2nhAY`,s=`card-interactable_az2lE`,c=`card-hover_fdS-X`,l=`cardHeader_HfIlm`,u=`cardHeader-thumbnail_rFw-N`,d=`cardHeader-actions_awD46`,f=`cardHeader-titles_CAUU3`,p=`cardHeader-titles-main_Z834V`,m=`cardHeader-titles-main-container_1j-od`,h=`cardHeader-titles-sub_2X08b`,g=`cardMedia_GZJQF`,_=`cardActions_uYu-0`,v={card:e,"card-clip":`card-clip_eZ8-1`,cardClip:t,"card-padding":`card-padding_X2-q-`,cardPadding:n,"card-gaps":`card-gaps_jhYkx`,cardGaps:r,"card-style-elevated":`card-style-elevated_exvMB`,cardStyleElevated:i,"card-style-outlined":`card-style-outlined_PxZZA`,cardStyleOutlined:a,"card-style-filled":`card-style-filled_2nhAY`,cardStyleFilled:o,"card-interactable":`card-interactable_az2lE`,cardInteractable:s,"card-hover":`card-hover_fdS-X`,cardHover:c,cardHeader:l,"cardHeader-thumbnail":`cardHeader-thumbnail_rFw-N`,cardHeaderThumbnail:u,"cardHeader-actions":`cardHeader-actions_awD46`,cardHeaderActions:d,"cardHeader-titles":`cardHeader-titles_CAUU3`,cardHeaderTitles:f,"cardHeader-titles-main":`cardHeader-titles-main_Z834V`,cardHeaderTitlesMain:p,"cardHeader-titles-main-container":`cardHeader-titles-main-container_1j-od`,cardHeaderTitlesMainContainer:m,"cardHeader-titles-sub":`cardHeader-titles-sub_2X08b`,cardHeaderTitlesSub:h,cardMedia:g,cardActions:_};export{e as card,_ as cardActions,t as cardClip,r as cardGaps,l as cardHeader,d as cardHeaderActions,u as cardHeaderThumbnail,f as cardHeaderTitles,p as cardHeaderTitlesMain,m as cardHeaderTitlesMainContainer,h as cardHeaderTitlesSub,c as cardHover,s as cardInteractable,g as cardMedia,n as cardPadding,i as cardStyleElevated,o as cardStyleFilled,a as cardStyleOutlined,v as default};
+"use client";var e=`card_w-6Ki`,t=`card-clip_eZ8-1`,n=`card-padding_X2-q-`,r=`card-gaps_jhYkx`,i=`card-style-elevated_exvMB`,a=`card-style-outlined_PxZZA`,o=`card-style-filled_2nhAY`,s=`card-interactable_az2lE`,c=`card-hover_fdS-X`,l=`cardHeader_HfIlm`,u=`cardHeader-thumbnail_rFw-N`,d=`cardHeader-actions_awD46`,f=`cardHeader-titles_CAUU3`,p=`cardHeader-titles-main_Z834V`,m=`cardHeader-titles-main-container_1j-od`,h=`cardHeader-titles-sub_2X08b`,g=`cardMedia_GZJQF`,_=`cardActions_uYu-0`,v={card:e,"card-clip":`card-clip_eZ8-1`,cardClip:t,"card-padding":`card-padding_X2-q-`,cardPadding:n,"card-gaps":`card-gaps_jhYkx`,cardGaps:r,"card-style-elevated":`card-style-elevated_exvMB`,cardStyleElevated:i,"card-style-outlined":`card-style-outlined_PxZZA`,cardStyleOutlined:a,"card-style-filled":`card-style-filled_2nhAY`,cardStyleFilled:o,"card-interactable":`card-interactable_az2lE`,cardInteractable:s,"card-hover":`card-hover_fdS-X`,cardHover:c,cardHeader:l,"cardHeader-thumbnail":`cardHeader-thumbnail_rFw-N`,cardHeaderThumbnail:u,"cardHeader-actions":`cardHeader-actions_awD46`,cardHeaderActions:d,"cardHeader-titles":`cardHeader-titles_CAUU3`,cardHeaderTitles:f,"cardHeader-titles-main":`cardHeader-titles-main_Z834V`,cardHeaderTitlesMain:p,"cardHeader-titles-main-container":`cardHeader-titles-main-container_1j-od`,cardHeaderTitlesMainContainer:m,"cardHeader-titles-sub":`cardHeader-titles-sub_2X08b`,cardHeaderTitlesSub:h,cardMedia:g,cardActions:_};export{e as card,_ as cardActions,t as cardClip,r as cardGaps,l as cardHeader,d as cardHeaderActions,u as cardHeaderThumbnail,f as cardHeaderTitles,p as cardHeaderTitlesMain,m as cardHeaderTitlesMainContainer,h as cardHeaderTitlesSub,c as cardHover,s as cardInteractable,g as cardMedia,n as cardPadding,i as cardStyleElevated,o as cardStyleFilled,a as cardStyleOutlined,v as default};
 //# sourceMappingURL=card.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.module.mjs","names":[],"sources":["../../../../package/common/card/card.module.pcss"],"sourcesContent":[".card {\n  border-radius: var(--default-border-radius);\n  color: var(--text-color);\n  border: 1px solid transparent;\n  box-sizing: border-box;\n\n  &-clip {\n    overflow: hidden;\n  }\n\n  &-padding {\n    padding: 1em;\n  }\n\n  &-gaps {\n    display: flex;\n    flex-direction: column;\n    gap: var(--spacing-s);\n  }\n\n  &-style {\n    &-elevated {\n      background: var(--background-card-elevated, var(--background-accent-light));\n      box-shadow: var(--card-shadow);\n    }\n\n    &-outlined {\n      background: var(--background-card-outlined, transparent);\n      border-color: var(--border-color);\n    }\n\n    &-filled {\n      background: var(--background-card-filled, var(--background-accent));\n    }\n  }\n\n  &-interactable {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &-hover {\n    transition:\n      transform 0.15s ease,\n      box-shadow 0.15s ease,\n      filter 0.3s ease;\n\n    &:hover {\n      transform: translateY(-2px);\n      background: var(--background-accent);\n    }\n  }\n}\n\n.cardHeader {\n  display: flex;\n  gap: 1em;\n  align-items: center;\n\n  &-thumbnail {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 2.5em;\n    height: 2.5em;\n    background: rgb(0 0 0 / 8%);\n    border-radius: 50%;\n    overflow: hidden;\n    background-size: cover;\n    background-position: center;\n    flex-shrink: 0;\n  }\n\n  &-actions {\n    display: flex;\n    gap: var(--spacing-s);\n    flex-wrap: wrap;\n    flex-shrink: 1;\n    align-items: center;\n    justify-content: flex-end;\n  }\n\n  &-titles {\n    display: flex;\n    flex-flow: column;\n    flex: 1;\n    gap: 0.25em;\n    overflow: hidden;\n\n    &-main {\n      font-size: 1.125em;\n      font-weight: 600;\n      min-width: 3ch;\n      flex-shrink: 100000;\n      overflow: hidden;\n      text-overflow: ellipsis;\n\n      &-container {\n        display: flex;\n        align-items: center;\n        gap: var(--spacing-m);\n        justify-content: space-between;\n      }\n    }\n\n    &-sub {\n      font-weight: 300;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n}\n\n/* Pulled out to the card's own edges, so these must stay twice and once .card-padding above. */\n.cardMedia {\n  width: calc(100% + 2em);\n  margin: 0 -1em;\n}\n\n.cardActions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5em;\n}\n"],"mappings":""}
+{"version":3,"file":"card.module.mjs","names":[],"sources":["../../../../package/common/card/card.module.pcss"],"sourcesContent":[".card {\n  border-radius: var(--default-border-radius);\n  color: var(--text-color);\n  border: 1px solid transparent;\n  box-sizing: border-box;\n\n  &-clip {\n    overflow: hidden;\n  }\n\n  &-padding {\n    padding: 1em;\n  }\n\n  &-gaps {\n    display: flex;\n    flex-direction: column;\n    gap: var(--spacing-s);\n  }\n\n  &-style {\n    &-elevated {\n      background: var(--background-card-elevated, var(--background-accent-light));\n      box-shadow: var(--card-shadow);\n    }\n\n    &-outlined {\n      background: var(--background-card-outlined, transparent);\n      border-color: var(--border-color);\n    }\n\n    &-filled {\n      background: var(--background-card-filled, var(--background-accent));\n    }\n  }\n\n  &-interactable {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &-hover {\n    transition:\n      transform 0.15s ease,\n      box-shadow 0.15s ease,\n      filter 0.3s ease;\n\n    &:hover {\n      transform: translateY(-2px);\n      background: var(--background-accent);\n    }\n  }\n}\n\n.cardHeader {\n  display: flex;\n  gap: 1em;\n  align-items: center;\n\n  &-thumbnail {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 2.5em;\n    height: 2.5em;\n    background: rgb(0 0 0 / 8%);\n    border-radius: 50%;\n    overflow: hidden;\n    background-size: cover;\n    background-position: center;\n    flex-shrink: 0;\n  }\n\n  &-actions {\n    display: flex;\n    gap: var(--spacing-s);\n    flex-wrap: wrap;\n    flex-shrink: 1;\n    align-items: center;\n    justify-content: flex-end;\n  }\n\n  &-titles {\n    display: flex;\n    flex-flow: column;\n    flex: 1;\n    gap: 0.25em;\n    overflow: hidden;\n\n    &-main {\n      font-size: 1.125em;\n      font-weight: 600;\n      min-width: 3ch;\n      flex-shrink: 100000;\n      overflow: hidden;\n      text-overflow: ellipsis;\n\n      &-container {\n        display: flex;\n        align-items: center;\n        gap: var(--spacing-m);\n        justify-content: space-between;\n      }\n    }\n\n    &-sub {\n      font-weight: 300;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n}\n\n/* Pulled out to the card's own edges, so these must stay twice and once .card-padding above. */\n.cardMedia {\n  width: calc(100% + 2em);\n  margin: 0 -1em;\n}\n\n.cardActions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5em;\n}\n\n/* The lift on hover is the only motion here; the shadow and border it transitions alongside stay. */\n@media (prefers-reduced-motion: reduce) {\n  .card-hover:hover {\n    transform: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e=function(e){return e.Elevated=`elevated`,e.Outlined=`outlined`,e.Filled=`filled`,e}({});export{e as CardStyleType};
+"use client";var e=function(e){return e.Elevated=`elevated`,e.Outlined=`outlined`,e.Filled=`filled`,e}({});export{e as CardStyleType};
 //# sourceMappingURL=card.types.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.types.mjs","names":[],"sources":["../../../../package/common/card/card.types.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonStyleType } from '../button/button.types';\nimport type { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types';\nimport type { IconAction } from '../types/actions.types';\n\nexport enum CardStyleType {\n  Elevated = 'elevated',\n  Outlined = 'outlined',\n  Filled = 'filled',\n}\n\n// `tabIndex` is omitted only because this component's version also accepts `null`.\nexport type CardSlots = 'root' | 'content';\n\nexport interface CardProps extends Omit<HtmlProps, 'tabIndex'> {\n  className?: string | undefined;\n  children?: ReactNode;\n  styleType?: CardStyleType;\n  onClick?: () => void;\n  tabIndex?: number | null;\n  hoverEffect?: boolean;\n  style?: React.CSSProperties;\n  autoGap?: boolean;\n  clip?: boolean;\n  /** Classes for the inner elements. See `CardSlots`. */\n  classNames?: SlotClassNames<CardSlots>;\n  /** Inline styles for the inner elements. See `CardSlots`. */\n  styles?: SlotStyles<CardSlots>;\n}\n\nexport type CardHeaderAction = IconAction;\n\nexport interface CardHeaderProps {\n  className?: string;\n  title?: ReactNode;\n  subTitle?: ReactNode;\n  /** URL string → rendered as background-image. Any other ReactNode → rendered inside the thumbnail div. */\n  thumbnail?: string | ReactNode;\n  actions?: CardHeaderAction[] | ReactNode;\n}\n\nexport interface CardMediaProps {\n  src?: string;\n  alt?: string;\n}\n\nexport interface CardContentProps {\n  children?: ReactNode;\n}\n\nexport interface CardAction {\n  id?: string;\n  label?: string;\n  styleType?: ButtonStyleType;\n  onClick?: () => void;\n}\n\nexport interface CardActionsProps {\n  className?: string;\n  /** Renders a Button for each action object. Pass `children` for custom content instead. */\n  actions?: CardAction[];\n  children?: ReactNode;\n}\n"],"mappings":"AAKA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,SAAA,WACA,EAAA,SAAA,WACA,EAAA,OAAA,UACF,EAAA,CAAA,CAAA"}
+{"version":3,"file":"card.types.mjs","names":[],"sources":["../../../../package/common/card/card.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { ReactNode } from 'react';\nimport type { ButtonStyleType } from '../button/button.types';\nimport type { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types';\nimport type { IconAction } from '../types/actions.types';\n\nexport enum CardStyleType {\n  Elevated = 'elevated',\n  Outlined = 'outlined',\n  Filled = 'filled',\n}\n\n// `tabIndex` is omitted only because this component's version also accepts `null`.\nexport type CardSlots = 'root' | 'content';\n\nexport interface CardProps extends Omit<HtmlProps, 'tabIndex'> {\n  className?: string | undefined;\n  children?: ReactNode;\n  styleType?: CardStyleType;\n  onClick?: () => void;\n  tabIndex?: number | null;\n  hoverEffect?: boolean;\n  style?: React.CSSProperties;\n  autoGap?: boolean;\n  clip?: boolean;\n  /** Ref to the root element. */\n  ref?: React.Ref<HTMLDivElement>;\n  /** Classes for the inner elements. See `CardSlots`. */\n  classNames?: SlotClassNames<CardSlots>;\n  /** Inline styles for the inner elements. See `CardSlots`. */\n  styles?: SlotStyles<CardSlots>;\n}\n\nexport type CardHeaderAction = IconAction;\n\nexport interface CardHeaderProps {\n  className?: string;\n  title?: ReactNode;\n  subTitle?: ReactNode;\n  /** URL string → rendered as background-image. Any other ReactNode → rendered inside the thumbnail div. */\n  thumbnail?: string | ReactNode;\n  actions?: CardHeaderAction[] | ReactNode;\n}\n\nexport interface CardMediaProps {\n  src?: string;\n  alt?: string;\n}\n\nexport interface CardContentProps {\n  children?: ReactNode;\n}\n\nexport interface CardAction {\n  id?: string;\n  label?: string;\n  styleType?: ButtonStyleType;\n  onClick?: () => void;\n}\n\nexport interface CardActionsProps {\n  className?: string;\n  /** Renders a Button for each action object. Pass `children` for custom content instead. */\n  actions?: CardAction[];\n  children?: ReactNode;\n}\n"],"mappings":"aAMA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,SAAA,WACA,EAAA,SAAA,WACA,EAAA,OAAA,UACF,EAAA,CAAA,CAAA"}

package/dist/esm/common/carousel/carousel.mjs

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import n from"../interactableDiv/index.mjs";import r from"../actionIcon/actionIcon.mjs";import i from"./carousel.module.mjs";import a,{useEffect as o,useLayoutEffect as s,useRef as c,useState as l}from"react";import u from"classnames";import{faChevronLeft as ee,faChevronRight as te}from"@fortawesome/free-solid-svg-icons";import{Fragment as ne,jsx as d,jsxs as f}from"react/jsx-runtime";var p=10,re=.2,ie={previous:`Previous slide`,next:`Next slide`,slides:`Slides`,goToSlide:e=>`Go to slide ${e}`};function m(m){let{children:ae,currentIndex:_,defaultIndex:oe=0,onChange:se=()=>{},loop:ce=!0,autoPlay:v=!1,autoPlayInterval:y=4e3,pauseOnHover:le=!0,showArrows:ue=!0,showDots:de=!0,swipeable:fe=!0,lazyRender:pe=!1,adaptiveHeight:b=!1,className:me,style:he,classNames:x,styles:S,labels:ge,...C}=e(`Carousel`,m),w=t(`Carousel`,ge,ie),_e=a.useId(),T=a.Children.toArray(ae),E=T.length,D=ce&&E>1,O=+!!D,k=D?[T[E-1],...T,T[0]]:T,A=_!==void 0,[ve,ye]=l(()=>g(oe,E,D)),j=g(A?_:ve,E,D),[M,N]=l(j+O),[be,P]=l(!0),F=c(j),[xe,I]=l(!1),[Se,L]=l(!1),[Ce,R]=l(!1),z=c(null),B=c(null),V=c(null),H=k.length>0?100/k.length:100;s(()=>{let e=F.current;if(F.current=j,e===j)return;let t=k.length-1,n=M;D&&M===0?n=E:D&&M===t&&(n=1);let r=D&&e===E-1&&j===0,i=D&&e===0&&j===E-1,a;a=r?n+1:i?n-1:j+O;let o=B.current;n!==M&&o&&(o.style.transition=`none`,o.style.transform=h(n,0,H),o.offsetWidth,o.style.transition=``),P(!0),N(a)},[j]);let[U,we]=l(()=>({min:j+O-1,max:j+O+1})),Te=Math.min(U.min,M-1),Ee=Math.max(U.max,M+1),[De,Oe]=l(void 0);s(()=>{if(!b)return;let e=B.current?.children[M];if(!e)return;let t=()=>Oe(e.offsetHeight);t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[b,M,E]),s(()=>{let e=V.current,t=e?.children[j];e&&t&&(e.scrollLeft=t.offsetLeft-(e.clientWidth-t.offsetWidth)/2)},[j,E]);function W(e){let t=g(e,E,D);A||ye(t),se(t)}function G(){!D&&j>=E-1||W(j+1)}function K(){!D&&j<=0||W(j-1)}function ke(e){e.target===e.currentTarget&&(we({min:M-1,max:M+1}),D&&(M===0?(P(!1),N(E)):M===k.length-1&&(P(!1),N(1))))}let q=v&&le,J=xe||Se||Ce;o(()=>{if(!v||E<=1||J)return;let e=setInterval(G,y);return()=>clearInterval(e)},[v,y,J,j,E]);let Y=c(null);function Ae(e){!fe||E<=1||(Y.current={startX:e.clientX,startY:e.clientY,width:z.current?.getBoundingClientRect().width||1,axisLocked:!1,active:!0,offsetPercent:0})}function je(e){let t=Y.current;if(!t||!t.active)return;let n=e.clientX-t.startX,r=e.clientY-t.startY;if(!t.axisLocked){if(Math.abs(n)<p&&Math.abs(r)<p)return;if(Math.abs(r)>Math.abs(n)){t.active=!1;return}t.axisLocked=!0,e.currentTarget.setPointerCapture?.(e.pointerId),R(!0),P(!1)}t.offsetPercent=n/t.width*100,B.current&&(B.current.style.transform=h(M,t.offsetPercent,H))}function X(){let e=Y.current;if(Y.current=null,!e||!e.axisLocked){R(!1);return}P(!0),R(!1),B.current&&(B.current.style.transition=``,B.current.style.transform=h(M,0,H)),Math.abs(e.offsetPercent)>=re*100&&(e.offsetPercent<0?G():K())}function Me(e){e.defaultPrevented||B.current?.contains(e.target)||(e.key===`ArrowLeft`?(e.preventDefault(),K()):e.key===`ArrowRight`&&(e.preventDefault(),G()))}function Ne(e){let t=null;if(e.key===`ArrowLeft`?t=j-1:e.key===`ArrowRight`?t=j+1:e.key===`Home`?t=0:e.key===`End`&&(t=E-1),t===null)return;e.preventDefault();let n=g(t,E,D);W(n),(V.current?.children[n])?.focus()}let Pe=de&&E>1,Fe=e=>`${_e}-dot-${e}`,Z=e=>`${_e}-slide-${e}`,Ie=C[`aria-label`]!==void 0||C[`aria-labelledby`]!==void 0;function Le(e){return Pe?{id:Z(e),role:`tabpanel`,"aria-labelledby":Fe(e)}:{id:Z(e),role:`group`,"aria-roledescription":`slide`,"aria-label":`${e+1} of ${E}`}}let Q=!D&&j<=0,$=!D&&j>=E-1,Re=h(M,0,H);return f(`div`,{...C,ref:z,role:Ie?`region`:`group`,"aria-roledescription":`carousel`,className:u(i.carousel,b&&i.carouselAdaptive,x?.root,me),style:{height:b?De:void 0,...he,...S?.root},onMouseEnter:q?()=>I(!0):void 0,onMouseLeave:q?()=>I(!1):void 0,onFocus:q?()=>L(!0):void 0,onBlur:q?()=>L(!1):void 0,onKeyDown:Me,children:[d(`div`,{ref:B,className:u(i.carouselTrack,b&&i.carouselTrackAdaptive,x?.track),style:{width:`${k.length*100}%`,transform:Re,transition:be?void 0:`none`,...S?.track},"aria-live":v?`off`:`polite`,onTransitionEnd:ke,onPointerDown:Ae,onPointerMove:je,onPointerUp:X,onPointerCancel:X,children:k.map((e,t)=>{let n=D&&(t===0||t===k.length-1),r=t-O,a=!n&&r===j,o=!pe||t>=Te&&t<=Ee;return d(`div`,{...n?{}:Le(r),className:u(i.carouselSlide,x?.slide),style:{width:`${100/k.length}%`,...S?.slide},inert:!a||void 0,children:o?e:null},`carousel-slide-${t}`)})}),ue&&E>1&&f(ne,{children:[d(r,{icon:ee,title:w.previous,"aria-label":w.previous,"aria-disabled":Q||void 0,onClick:()=>!Q&&K(),className:u(i.carouselPrevButton,Q&&i.carouselButtonDisabled,x?.prevButton),style:S?.prevButton}),d(r,{icon:te,title:w.next,"aria-label":w.next,"aria-disabled":$||void 0,onClick:()=>!$&&G(),className:u(i.carouselNextButton,$&&i.carouselButtonDisabled,x?.nextButton),style:S?.nextButton})]}),Pe&&d(`div`,{ref:V,role:`tablist`,"aria-label":w.slides,className:u(i.carouselDots,x?.dots),style:S?.dots,onKeyDown:Ne,children:T.map((e,t)=>d(n,{id:Fe(t),role:`tab`,"aria-label":w.goToSlide(t+1),"aria-selected":t===j,"aria-controls":Z(t),tabIndex:t===j?0:-1,onClick:()=>W(t),className:u(i.carouselDot,t===j&&i.carouselDotActive,x?.dot),style:S?.dot},`carousel-dot-${t}`))})]})}function h(e,t,n){return`translateX(calc(${-e*n}% + ${n/100*t}%))`}function g(e,t,n){return t===0?0:n?(e%t+t)%t:Math.max(0,Math.min(t-1,e))}export{m as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import n from"../interactableDiv/index.mjs";import r from"../actionIcon/actionIcon.mjs";import i from"./carousel.module.mjs";import a,{useEffect as o,useLayoutEffect as s,useRef as c,useState as l}from"react";import u from"classnames";import{faChevronLeft as ee,faChevronRight as te}from"@fortawesome/free-solid-svg-icons";import{Fragment as ne,jsx as d,jsxs as f}from"react/jsx-runtime";var p=10,re=.2,ie={previous:`Previous slide`,next:`Next slide`,slides:`Slides`,goToSlide:e=>`Go to slide ${e}`};function m(m){let{children:ae,currentIndex:_,defaultIndex:oe=0,onChange:se=()=>{},loop:ce=!0,autoPlay:v=!1,autoPlayInterval:y=4e3,pauseOnHover:le=!0,showArrows:ue=!0,showDots:de=!0,swipeable:fe=!0,lazyRender:pe=!1,adaptiveHeight:b=!1,className:me,style:he,classNames:x,styles:S,labels:ge,...C}=e(`Carousel`,m),w=t(`Carousel`,ge,ie),_e=a.useId(),T=a.Children.toArray(ae),E=T.length,D=ce&&E>1,O=+!!D,k=D?[T[E-1],...T,T[0]]:T,A=_!==void 0,[ve,ye]=l(()=>g(oe,E,D)),j=g(A?_:ve,E,D),[M,N]=l(j+O),[be,P]=l(!0),F=c(j),[xe,I]=l(!1),[Se,L]=l(!1),[Ce,R]=l(!1),z=c(null),B=c(null),V=c(null),H=k.length>0?100/k.length:100;s(()=>{let e=F.current;if(F.current=j,e===j)return;let t=k.length-1,n=M;D&&M===0?n=E:D&&M===t&&(n=1);let r=D&&e===E-1&&j===0,i=D&&e===0&&j===E-1,a;a=r?n+1:i?n-1:j+O;let o=B.current;n!==M&&o&&(o.style.transition=`none`,o.style.transform=h(n,0,H),o.offsetWidth,o.style.transition=``),P(!0),N(a)},[j]);let[U,we]=l(()=>({min:j+O-1,max:j+O+1})),Te=Math.min(U.min,M-1),Ee=Math.max(U.max,M+1),[De,Oe]=l(void 0);s(()=>{if(!b)return;let e=B.current?.children[M];if(!e)return;let t=()=>Oe(e.offsetHeight);t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[b,M,E]),s(()=>{let e=V.current,t=e?.children[j];e&&t&&(e.scrollLeft=t.offsetLeft-(e.clientWidth-t.offsetWidth)/2)},[j,E]);function W(e){let t=g(e,E,D);A||ye(t),se(t)}function G(){!D&&j>=E-1||W(j+1)}function K(){!D&&j<=0||W(j-1)}function ke(e){e.target===e.currentTarget&&(we({min:M-1,max:M+1}),D&&(M===0?(P(!1),N(E)):M===k.length-1&&(P(!1),N(1))))}let q=v&&le,J=xe||Se||Ce;o(()=>{if(!v||E<=1||J)return;let e=setInterval(G,y);return()=>clearInterval(e)},[v,y,J,j,E]);let Y=c(null);function Ae(e){!fe||E<=1||(Y.current={startX:e.clientX,startY:e.clientY,width:z.current?.getBoundingClientRect().width||1,axisLocked:!1,active:!0,offsetPercent:0})}function je(e){let t=Y.current;if(!t||!t.active)return;let n=e.clientX-t.startX,r=e.clientY-t.startY;if(!t.axisLocked){if(Math.abs(n)<p&&Math.abs(r)<p)return;if(Math.abs(r)>Math.abs(n)){t.active=!1;return}t.axisLocked=!0,e.currentTarget.setPointerCapture?.(e.pointerId),R(!0),P(!1)}t.offsetPercent=n/t.width*100,B.current&&(B.current.style.transform=h(M,t.offsetPercent,H))}function X(){let e=Y.current;if(Y.current=null,!e||!e.axisLocked){R(!1);return}P(!0),R(!1),B.current&&(B.current.style.transition=``,B.current.style.transform=h(M,0,H)),Math.abs(e.offsetPercent)>=re*100&&(e.offsetPercent<0?G():K())}function Me(e){e.defaultPrevented||B.current?.contains(e.target)||(e.key===`ArrowLeft`?(e.preventDefault(),K()):e.key===`ArrowRight`&&(e.preventDefault(),G()))}function Ne(e){let t=null;if(e.key===`ArrowLeft`?t=j-1:e.key===`ArrowRight`?t=j+1:e.key===`Home`?t=0:e.key===`End`&&(t=E-1),t===null)return;e.preventDefault();let n=g(t,E,D);W(n),(V.current?.children[n])?.focus()}let Pe=de&&E>1,Fe=e=>`${_e}-dot-${e}`,Z=e=>`${_e}-slide-${e}`,Ie=C[`aria-label`]!==void 0||C[`aria-labelledby`]!==void 0;function Le(e){return Pe?{id:Z(e),role:`tabpanel`,"aria-labelledby":Fe(e)}:{id:Z(e),role:`group`,"aria-roledescription":`slide`,"aria-label":`${e+1} of ${E}`}}let Q=!D&&j<=0,$=!D&&j>=E-1,Re=h(M,0,H);return f(`div`,{...C,ref:z,role:Ie?`region`:`group`,"aria-roledescription":`carousel`,className:u(i.carousel,b&&i.carouselAdaptive,x?.root,me),style:{height:b?De:void 0,...he,...S?.root},onMouseEnter:q?()=>I(!0):void 0,onMouseLeave:q?()=>I(!1):void 0,onFocus:q?()=>L(!0):void 0,onBlur:q?()=>L(!1):void 0,onKeyDown:Me,children:[d(`div`,{ref:B,className:u(i.carouselTrack,b&&i.carouselTrackAdaptive,x?.track),style:{width:`${k.length*100}%`,transform:Re,transition:be?void 0:`none`,...S?.track},"aria-live":v?`off`:`polite`,onTransitionEnd:ke,onPointerDown:Ae,onPointerMove:je,onPointerUp:X,onPointerCancel:X,children:k.map((e,t)=>{let n=D&&(t===0||t===k.length-1),r=t-O,a=!n&&r===j,o=!pe||t>=Te&&t<=Ee;return d(`div`,{...n?{}:Le(r),className:u(i.carouselSlide,x?.slide),style:{width:`${100/k.length}%`,...S?.slide},inert:!a||void 0,children:o?e:null},`carousel-slide-${t}`)})}),ue&&E>1&&f(ne,{children:[d(r,{icon:ee,title:w.previous,"aria-label":w.previous,"aria-disabled":Q||void 0,onClick:()=>!Q&&K(),className:u(i.carouselPrevButton,Q&&i.carouselButtonDisabled,x?.prevButton),style:S?.prevButton}),d(r,{icon:te,title:w.next,"aria-label":w.next,"aria-disabled":$||void 0,onClick:()=>!$&&G(),className:u(i.carouselNextButton,$&&i.carouselButtonDisabled,x?.nextButton),style:S?.nextButton})]}),Pe&&d(`div`,{ref:V,role:`tablist`,"aria-label":w.slides,className:u(i.carouselDots,x?.dots),style:S?.dots,onKeyDown:Ne,children:T.map((e,t)=>d(n,{id:Fe(t),role:`tab`,"aria-label":w.goToSlide(t+1),"aria-selected":t===j,"aria-controls":Z(t),tabIndex:t===j?0:-1,onClick:()=>W(t),className:u(i.carouselDot,t===j&&i.carouselDotActive,x?.dot),style:S?.dot},`carousel-dot-${t}`))})]})}function h(e,t,n){return`translateX(calc(${-e*n}% + ${n/100*t}%))`}function g(e,t,n){return t===0?0:n?(e%t+t)%t:Math.max(0,Math.min(t-1,e))}export{m as default};
 //# sourceMappingURL=carousel.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"carousel.mjs","names":[],"sources":["../../../../package/common/carousel/carousel.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\nimport ActionIcon from '../actionIcon';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport type { CarouselLabels, CarouselProps } from './carousel.types';\n\nimport styles from './carousel.module.pcss';\n\nconst AXIS_LOCK_THRESHOLD = 10;\nconst DRAG_COMMIT_RATIO = 0.2;\n\nconst DEFAULT_LABELS: Required<CarouselLabels> = {\n  previous: 'Previous slide',\n  next: 'Next slide',\n  slides: 'Slides',\n  goToSlide: (slide) => `Go to slide ${slide}`,\n};\n\nfunction Carousel(props: CarouselProps) {\n  const {\n    children,\n    currentIndex,\n    defaultIndex = 0,\n    onChange = () => {},\n    loop = true,\n    autoPlay = false,\n    autoPlayInterval = 4000,\n    pauseOnHover = true,\n    showArrows = true,\n    showDots = true,\n    swipeable = true,\n    lazyRender = false,\n    adaptiveHeight = false,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    labels,\n    ...rest\n  } = useComponentDefaults('Carousel', props);\n  const text = useLabels('Carousel', labels, DEFAULT_LABELS);\n\n  const instanceId = React.useId();\n  const slides = React.Children.toArray(children);\n  const count = slides.length;\n  const canLoop = loop && count > 1;\n  const offset = canLoop ? 1 : 0;\n  const extendedSlides = canLoop ? [slides[count - 1], ...slides, slides[0]] : slides;\n\n  const isControlled = currentIndex !== undefined;\n  const [internalIndex, setInternalIndex] = useState(() => clampIndex(defaultIndex, count, canLoop));\n  const realIndex = clampIndex(isControlled ? currentIndex! : internalIndex, count, canLoop);\n\n  const [displayIndex, setDisplayIndex] = useState(realIndex + offset);\n  const [transitionEnabled, setTransitionEnabled] = useState(true);\n  const prevRealIndexRef = useRef(realIndex);\n\n  const [hovered, setHovered] = useState(false);\n  const [focused, setFocused] = useState(false);\n  const [dragging, setDragging] = useState(false);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const trackRef = useRef<HTMLDivElement>(null);\n  const dotsRef = useRef<HTMLDivElement>(null);\n\n  const slideWidthPercent = extendedSlides.length > 0 ? 100 / extendedSlides.length : 100;\n\n  useLayoutEffect(() => {\n    const prevReal = prevRealIndexRef.current;\n    prevRealIndexRef.current = realIndex;\n    if (prevReal === realIndex) return;\n\n    // A wrap parks the track on a clone until transitionEnd swaps it back, so a change arriving\n    // before that has to animate from the normalised position rather than the clone.\n    const lastExtendedIndex = extendedSlides.length - 1;\n    let fromIndex = displayIndex;\n    if (canLoop && displayIndex === 0) fromIndex = count;\n    else if (canLoop && displayIndex === lastExtendedIndex) fromIndex = 1;\n\n    const forwardWrap = canLoop && prevReal === count - 1 && realIndex === 0;\n    const backwardWrap = canLoop && prevReal === 0 && realIndex === count - 1;\n\n    let target: number;\n    if (forwardWrap) target = fromIndex + 1;\n    else if (backwardWrap) target = fromIndex - 1;\n    else target = realIndex + offset;\n\n    // Written straight to the node: the normalised position has to reach style recalculation on its\n    // own, or it and the animated position collapse into one jump with no transition.\n    const track = trackRef.current;\n    if (fromIndex !== displayIndex && track) {\n      track.style.transition = 'none';\n      track.style.transform = buildTrackTransform(fromIndex, 0, slideWidthPercent);\n      void track.offsetWidth;\n      track.style.transition = '';\n    }\n\n    setTransitionEnabled(true);\n    setDisplayIndex(target);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [realIndex]);\n\n  // The window of slides `lazyRender` keeps mounted, as of the last settled position. Slides are\n  // rendered for the union of this and the current window, so the ones a multi-step jump slides\n  // past stay mounted until the transform transition ends instead of blanking out mid-flight.\n  const [settledMountRange, setSettledMountRange] = useState(() => ({\n    min: realIndex + offset - 1,\n    max: realIndex + offset + 1,\n  }));\n  const mountMin = Math.min(settledMountRange.min, displayIndex - 1);\n  const mountMax = Math.max(settledMountRange.max, displayIndex + 1);\n\n  const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);\n\n  useLayoutEffect(() => {\n    if (!adaptiveHeight) return;\n    const slideElement = trackRef.current?.children[displayIndex] as HTMLElement | undefined;\n    if (!slideElement) return;\n\n    const update = () => setContentHeight(slideElement.offsetHeight);\n    update();\n\n    const observer = new ResizeObserver(update);\n    observer.observe(slideElement);\n    return () => observer.disconnect();\n  }, [adaptiveHeight, displayIndex, count]);\n\n  // Keeps the selected dot in view. Written as `scrollLeft` because `scrollIntoView` is free to\n  // scroll the page along with it.\n  useLayoutEffect(() => {\n    const strip = dotsRef.current;\n    const dot = strip?.children[realIndex] as HTMLElement | undefined;\n    if (!strip || !dot) return;\n    strip.scrollLeft = dot.offsetLeft - (strip.clientWidth - dot.offsetWidth) / 2;\n  }, [realIndex, count]);\n\n  function goToIndex(nextIndex: number) {\n    const clamped = clampIndex(nextIndex, count, canLoop);\n    if (!isControlled) setInternalIndex(clamped);\n    onChange(clamped);\n  }\n\n  function goNext() {\n    if (!canLoop && realIndex >= count - 1) return;\n    goToIndex(realIndex + 1);\n  }\n\n  function goPrev() {\n    if (!canLoop && realIndex <= 0) return;\n    goToIndex(realIndex - 1);\n  }\n\n  function handleTrackTransitionEnd(event: React.TransitionEvent<HTMLDivElement>) {\n    if (event.target !== event.currentTarget) return;\n    setSettledMountRange({ min: displayIndex - 1, max: displayIndex + 1 });\n\n    if (!canLoop) return;\n    if (displayIndex === 0) {\n      setTransitionEnabled(false);\n      setDisplayIndex(count);\n    } else if (displayIndex === extendedSlides.length - 1) {\n      setTransitionEnabled(false);\n      setDisplayIndex(1);\n    }\n  }\n\n  // Hover and focus only ever pause the timer, so without one they are not worth tracking.\n  const tracksPointerPause = autoPlay && pauseOnHover;\n  const isPaused = hovered || focused || dragging;\n  useEffect(() => {\n    if (!autoPlay || count <= 1 || isPaused) return;\n    const timer = setInterval(goNext, autoPlayInterval);\n    return () => clearInterval(timer);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [autoPlay, autoPlayInterval, isPaused, realIndex, count]);\n\n  // A drag follows the pointer through the node, not through state: a render per move event would\n  // rebuild every slide and dot for something only the track's transform sees.\n  const dragRef = useRef<{\n    startX: number;\n    startY: number;\n    width: number;\n    axisLocked: boolean;\n    active: boolean;\n    offsetPercent: number;\n  } | null>(null);\n\n  function handlePointerDown(event: React.PointerEvent<HTMLDivElement>) {\n    if (!swipeable || count <= 1) return;\n    dragRef.current = {\n      startX: event.clientX,\n      startY: event.clientY,\n      // Measured once: measuring per move would force a layout between the transform writes.\n      width: containerRef.current?.getBoundingClientRect().width || 1,\n      axisLocked: false,\n      active: true,\n      offsetPercent: 0,\n    };\n  }\n\n  function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {\n    const drag = dragRef.current;\n    if (!drag || !drag.active) return;\n\n    const deltaX = event.clientX - drag.startX;\n    const deltaY = event.clientY - drag.startY;\n\n    if (!drag.axisLocked) {\n      if (Math.abs(deltaX) < AXIS_LOCK_THRESHOLD && Math.abs(deltaY) < AXIS_LOCK_THRESHOLD) return;\n      if (Math.abs(deltaY) > Math.abs(deltaX)) {\n        drag.active = false;\n        return;\n      }\n      drag.axisLocked = true;\n      // Never on pointerdown: a captured pointer sends its `click` to the capture target too, so\n      // capturing earlier would swallow every click meant for a button inside a slide.\n      event.currentTarget.setPointerCapture?.(event.pointerId);\n      setDragging(true);\n      setTransitionEnabled(false);\n    }\n\n    drag.offsetPercent = (deltaX / drag.width) * 100;\n    if (trackRef.current) {\n      trackRef.current.style.transform = buildTrackTransform(displayIndex, drag.offsetPercent, slideWidthPercent);\n    }\n  }\n\n  function handlePointerUp() {\n    const drag = dragRef.current;\n    dragRef.current = null;\n    if (!drag || !drag.axisLocked) {\n      setDragging(false);\n      return;\n    }\n\n    setTransitionEnabled(true);\n    setDragging(false);\n\n    // React never saw the dragged transform, so it has to be handed back by hand, and always: a\n    // drag that changes no index would otherwise strand the track off-screen. One that does change\n    // it overwrites this in the same tick, and still animates on from where the pointer left off.\n    if (trackRef.current) {\n      trackRef.current.style.transition = '';\n      trackRef.current.style.transform = buildTrackTransform(displayIndex, 0, slideWidthPercent);\n    }\n\n    if (Math.abs(drag.offsetPercent) >= DRAG_COMMIT_RATIO * 100) {\n      if (drag.offsetPercent < 0) goNext();\n      else goPrev();\n    }\n  }\n\n  // Arrow keys belong to the carousel's own controls, never to the slides: a text field or a\n  // scrollable region in a slide has to keep its own. `defaultPrevented` leaves the dots to their\n  // own handling below.\n  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n    if (event.defaultPrevented || trackRef.current?.contains(event.target as Node)) return;\n\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      goPrev();\n    } else if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      goNext();\n    }\n  }\n\n  function handleDotsKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n    let next: number | null = null;\n    if (event.key === 'ArrowLeft') next = realIndex - 1;\n    else if (event.key === 'ArrowRight') next = realIndex + 1;\n    else if (event.key === 'Home') next = 0;\n    else if (event.key === 'End') next = count - 1;\n    if (next === null) return;\n\n    event.preventDefault();\n    const clamped = clampIndex(next, count, canLoop);\n    goToIndex(clamped);\n    // The selected dot is the one holding the tab stop, so focus has to travel with the selection.\n    (dotsRef.current?.children[clamped] as HTMLElement | undefined)?.focus();\n  }\n\n  // The dots are the APG tablist over the slides. Without them the slides describe themselves as\n  // plain slides rather than as panels.\n  const hasTabs = showDots && count > 1;\n  const dotId = (index: number) => `${instanceId}-dot-${index}`;\n  const slideId = (index: number) => `${instanceId}-slide-${index}`;\n\n  // An unnamed landmark is worse than none, so the carousel is only a region once it has a name.\n  const isNamed = rest['aria-label'] !== undefined || rest['aria-labelledby'] !== undefined;\n\n  function slideSemantics(index: number) {\n    if (hasTabs) {\n      return { id: slideId(index), role: 'tabpanel', 'aria-labelledby': dotId(index) };\n    }\n    return {\n      id: slideId(index),\n      role: 'group',\n      'aria-roledescription': 'slide',\n      'aria-label': `${index + 1} of ${count}`,\n    };\n  }\n\n  const isPrevDisabled = !canLoop && realIndex <= 0;\n  const isNextDisabled = !canLoop && realIndex >= count - 1;\n\n  const trackTransform = buildTrackTransform(displayIndex, 0, slideWidthPercent);\n\n  return (\n    <div\n      {...rest}\n      ref={containerRef}\n      role={isNamed ? 'region' : 'group'}\n      aria-roledescription='carousel'\n      className={cx(styles.carousel, adaptiveHeight && styles.carouselAdaptive, classNames?.root, className)}\n      style={{ height: adaptiveHeight ? contentHeight : undefined, ...style, ...slotStyles?.root }}\n      onMouseEnter={tracksPointerPause ? () => setHovered(true) : undefined}\n      onMouseLeave={tracksPointerPause ? () => setHovered(false) : undefined}\n      onFocus={tracksPointerPause ? () => setFocused(true) : undefined}\n      onBlur={tracksPointerPause ? () => setFocused(false) : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <div\n        ref={trackRef}\n        className={cx(styles.carouselTrack, adaptiveHeight && styles.carouselTrackAdaptive, classNames?.track)}\n        style={{\n          width: `${extendedSlides.length * 100}%`,\n          transform: trackTransform,\n          transition: transitionEnabled ? undefined : 'none',\n          ...slotStyles?.track,\n        }}\n        aria-live={autoPlay ? 'off' : 'polite'}\n        onTransitionEnd={handleTrackTransitionEnd}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={handlePointerUp}\n        onPointerCancel={handlePointerUp}\n      >\n        {extendedSlides.map((slide, idx) => {\n          const isClonePosition = canLoop && (idx === 0 || idx === extendedSlides.length - 1);\n          const logicalIndex = idx - offset;\n          const isActive = !isClonePosition && logicalIndex === realIndex;\n          const isRendered = !lazyRender || (idx >= mountMin && idx <= mountMax);\n\n          return (\n            <div\n              key={`carousel-slide-${idx}`}\n              {...(isClonePosition ? {} : slideSemantics(logicalIndex))}\n              className={cx(styles.carouselSlide, classNames?.slide)}\n              style={{ width: `${100 / extendedSlides.length}%`, ...slotStyles?.slide }}\n              inert={isActive ? undefined : true}\n            >\n              {isRendered ? slide : null}\n            </div>\n          );\n        })}\n      </div>\n\n      {showArrows && count > 1 && (\n        <>\n          <ActionIcon\n            icon={faChevronLeft}\n            title={text.previous}\n            aria-label={text.previous}\n            aria-disabled={isPrevDisabled || undefined}\n            onClick={() => !isPrevDisabled && goPrev()}\n            className={cx(\n              styles.carouselPrevButton,\n              isPrevDisabled && styles.carouselButtonDisabled,\n              classNames?.prevButton,\n            )}\n            style={slotStyles?.prevButton}\n          />\n          <ActionIcon\n            icon={faChevronRight}\n            title={text.next}\n            aria-label={text.next}\n            aria-disabled={isNextDisabled || undefined}\n            onClick={() => !isNextDisabled && goNext()}\n            className={cx(\n              styles.carouselNextButton,\n              isNextDisabled && styles.carouselButtonDisabled,\n              classNames?.nextButton,\n            )}\n            style={slotStyles?.nextButton}\n          />\n        </>\n      )}\n\n      {hasTabs && (\n        <div\n          ref={dotsRef}\n          role='tablist'\n          aria-label={text.slides}\n          className={cx(styles.carouselDots, classNames?.dots)}\n          style={slotStyles?.dots}\n          onKeyDown={handleDotsKeyDown}\n        >\n          {slides.map((_, index) => (\n            <InteractableDiv\n              key={`carousel-dot-${index}`}\n              id={dotId(index)}\n              role='tab'\n              aria-label={text.goToSlide(index + 1)}\n              aria-selected={index === realIndex}\n              aria-controls={slideId(index)}\n              // One tab stop for the whole set, arrow keys inside it.\n              tabIndex={index === realIndex ? 0 : -1}\n              onClick={() => goToIndex(index)}\n              className={cx(styles.carouselDot, index === realIndex && styles.carouselDotActive, classNames?.dot)}\n              style={slotStyles?.dot}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction buildTrackTransform(position: number, dragPercent: number, slideWidthPercent: number): string {\n  return `translateX(calc(${-position * slideWidthPercent}% + ${dragPercent * (slideWidthPercent / 100)}%))`;\n}\n\nfunction clampIndex(index: number, count: number, canLoop: boolean): number {\n  if (count === 0) return 0;\n  if (canLoop) return ((index % count) + count) % count;\n  return Math.max(0, Math.min(count - 1, index));\n}\n\nexport default Carousel;\n"],"mappings":"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"}
+{"version":3,"file":"carousel.mjs","names":[],"sources":["../../../../package/common/carousel/carousel.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\nimport ActionIcon from '../actionIcon';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport type { CarouselLabels, CarouselProps } from './carousel.types';\n\nimport styles from './carousel.module.pcss';\n\nconst AXIS_LOCK_THRESHOLD = 10;\nconst DRAG_COMMIT_RATIO = 0.2;\n\nconst DEFAULT_LABELS: Required<CarouselLabels> = {\n  previous: 'Previous slide',\n  next: 'Next slide',\n  slides: 'Slides',\n  goToSlide: (slide) => `Go to slide ${slide}`,\n};\n\nfunction Carousel(props: CarouselProps) {\n  const {\n    children,\n    currentIndex,\n    defaultIndex = 0,\n    onChange = () => {},\n    loop = true,\n    autoPlay = false,\n    autoPlayInterval = 4000,\n    pauseOnHover = true,\n    showArrows = true,\n    showDots = true,\n    swipeable = true,\n    lazyRender = false,\n    adaptiveHeight = false,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    labels,\n    ...rest\n  } = useComponentDefaults('Carousel', props);\n  const text = useLabels('Carousel', labels, DEFAULT_LABELS);\n\n  const instanceId = React.useId();\n  const slides = React.Children.toArray(children);\n  const count = slides.length;\n  const canLoop = loop && count > 1;\n  const offset = canLoop ? 1 : 0;\n  const extendedSlides = canLoop ? [slides[count - 1], ...slides, slides[0]] : slides;\n\n  const isControlled = currentIndex !== undefined;\n  const [internalIndex, setInternalIndex] = useState(() => clampIndex(defaultIndex, count, canLoop));\n  const realIndex = clampIndex(isControlled ? currentIndex! : internalIndex, count, canLoop);\n\n  const [displayIndex, setDisplayIndex] = useState(realIndex + offset);\n  const [transitionEnabled, setTransitionEnabled] = useState(true);\n  const prevRealIndexRef = useRef(realIndex);\n\n  const [hovered, setHovered] = useState(false);\n  const [focused, setFocused] = useState(false);\n  const [dragging, setDragging] = useState(false);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const trackRef = useRef<HTMLDivElement>(null);\n  const dotsRef = useRef<HTMLDivElement>(null);\n\n  const slideWidthPercent = extendedSlides.length > 0 ? 100 / extendedSlides.length : 100;\n\n  useLayoutEffect(() => {\n    const prevReal = prevRealIndexRef.current;\n    prevRealIndexRef.current = realIndex;\n    if (prevReal === realIndex) return;\n\n    // A wrap parks the track on a clone until transitionEnd swaps it back, so a change arriving\n    // before that has to animate from the normalised position rather than the clone.\n    const lastExtendedIndex = extendedSlides.length - 1;\n    let fromIndex = displayIndex;\n    if (canLoop && displayIndex === 0) fromIndex = count;\n    else if (canLoop && displayIndex === lastExtendedIndex) fromIndex = 1;\n\n    const forwardWrap = canLoop && prevReal === count - 1 && realIndex === 0;\n    const backwardWrap = canLoop && prevReal === 0 && realIndex === count - 1;\n\n    let target: number;\n    if (forwardWrap) target = fromIndex + 1;\n    else if (backwardWrap) target = fromIndex - 1;\n    else target = realIndex + offset;\n\n    // Written straight to the node: the normalised position has to reach style recalculation on its\n    // own, or it and the animated position collapse into one jump with no transition.\n    const track = trackRef.current;\n    if (fromIndex !== displayIndex && track) {\n      track.style.transition = 'none';\n      track.style.transform = buildTrackTransform(fromIndex, 0, slideWidthPercent);\n      void track.offsetWidth;\n      track.style.transition = '';\n    }\n\n    setTransitionEnabled(true);\n    setDisplayIndex(target);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [realIndex]);\n\n  // The window of slides `lazyRender` keeps mounted, as of the last settled position. Slides are\n  // rendered for the union of this and the current window, so the ones a multi-step jump slides\n  // past stay mounted until the transform transition ends instead of blanking out mid-flight.\n  const [settledMountRange, setSettledMountRange] = useState(() => ({\n    min: realIndex + offset - 1,\n    max: realIndex + offset + 1,\n  }));\n  const mountMin = Math.min(settledMountRange.min, displayIndex - 1);\n  const mountMax = Math.max(settledMountRange.max, displayIndex + 1);\n\n  const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);\n\n  useLayoutEffect(() => {\n    if (!adaptiveHeight) return;\n    const slideElement = trackRef.current?.children[displayIndex] as HTMLElement | undefined;\n    if (!slideElement) return;\n\n    const update = () => setContentHeight(slideElement.offsetHeight);\n    update();\n\n    const observer = new ResizeObserver(update);\n    observer.observe(slideElement);\n    return () => observer.disconnect();\n  }, [adaptiveHeight, displayIndex, count]);\n\n  // Keeps the selected dot in view. Written as `scrollLeft` because `scrollIntoView` is free to\n  // scroll the page along with it.\n  useLayoutEffect(() => {\n    const strip = dotsRef.current;\n    const dot = strip?.children[realIndex] as HTMLElement | undefined;\n    if (!strip || !dot) return;\n    strip.scrollLeft = dot.offsetLeft - (strip.clientWidth - dot.offsetWidth) / 2;\n  }, [realIndex, count]);\n\n  function goToIndex(nextIndex: number) {\n    const clamped = clampIndex(nextIndex, count, canLoop);\n    if (!isControlled) setInternalIndex(clamped);\n    onChange(clamped);\n  }\n\n  function goNext() {\n    if (!canLoop && realIndex >= count - 1) return;\n    goToIndex(realIndex + 1);\n  }\n\n  function goPrev() {\n    if (!canLoop && realIndex <= 0) return;\n    goToIndex(realIndex - 1);\n  }\n\n  function handleTrackTransitionEnd(event: React.TransitionEvent<HTMLDivElement>) {\n    if (event.target !== event.currentTarget) return;\n    setSettledMountRange({ min: displayIndex - 1, max: displayIndex + 1 });\n\n    if (!canLoop) return;\n    if (displayIndex === 0) {\n      setTransitionEnabled(false);\n      setDisplayIndex(count);\n    } else if (displayIndex === extendedSlides.length - 1) {\n      setTransitionEnabled(false);\n      setDisplayIndex(1);\n    }\n  }\n\n  // Hover and focus only ever pause the timer, so without one they are not worth tracking.\n  const tracksPointerPause = autoPlay && pauseOnHover;\n  const isPaused = hovered || focused || dragging;\n  useEffect(() => {\n    if (!autoPlay || count <= 1 || isPaused) return;\n    const timer = setInterval(goNext, autoPlayInterval);\n    return () => clearInterval(timer);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [autoPlay, autoPlayInterval, isPaused, realIndex, count]);\n\n  // A drag follows the pointer through the node, not through state: a render per move event would\n  // rebuild every slide and dot for something only the track's transform sees.\n  const dragRef = useRef<{\n    startX: number;\n    startY: number;\n    width: number;\n    axisLocked: boolean;\n    active: boolean;\n    offsetPercent: number;\n  } | null>(null);\n\n  function handlePointerDown(event: React.PointerEvent<HTMLDivElement>) {\n    if (!swipeable || count <= 1) return;\n    dragRef.current = {\n      startX: event.clientX,\n      startY: event.clientY,\n      // Measured once: measuring per move would force a layout between the transform writes.\n      width: containerRef.current?.getBoundingClientRect().width || 1,\n      axisLocked: false,\n      active: true,\n      offsetPercent: 0,\n    };\n  }\n\n  function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {\n    const drag = dragRef.current;\n    if (!drag || !drag.active) return;\n\n    const deltaX = event.clientX - drag.startX;\n    const deltaY = event.clientY - drag.startY;\n\n    if (!drag.axisLocked) {\n      if (Math.abs(deltaX) < AXIS_LOCK_THRESHOLD && Math.abs(deltaY) < AXIS_LOCK_THRESHOLD) return;\n      if (Math.abs(deltaY) > Math.abs(deltaX)) {\n        drag.active = false;\n        return;\n      }\n      drag.axisLocked = true;\n      // Never on pointerdown: a captured pointer sends its `click` to the capture target too, so\n      // capturing earlier would swallow every click meant for a button inside a slide.\n      event.currentTarget.setPointerCapture?.(event.pointerId);\n      setDragging(true);\n      setTransitionEnabled(false);\n    }\n\n    drag.offsetPercent = (deltaX / drag.width) * 100;\n    if (trackRef.current) {\n      trackRef.current.style.transform = buildTrackTransform(displayIndex, drag.offsetPercent, slideWidthPercent);\n    }\n  }\n\n  function handlePointerUp() {\n    const drag = dragRef.current;\n    dragRef.current = null;\n    if (!drag || !drag.axisLocked) {\n      setDragging(false);\n      return;\n    }\n\n    setTransitionEnabled(true);\n    setDragging(false);\n\n    // React never saw the dragged transform, so it has to be handed back by hand, and always: a\n    // drag that changes no index would otherwise strand the track off-screen. One that does change\n    // it overwrites this in the same tick, and still animates on from where the pointer left off.\n    if (trackRef.current) {\n      trackRef.current.style.transition = '';\n      trackRef.current.style.transform = buildTrackTransform(displayIndex, 0, slideWidthPercent);\n    }\n\n    if (Math.abs(drag.offsetPercent) >= DRAG_COMMIT_RATIO * 100) {\n      if (drag.offsetPercent < 0) goNext();\n      else goPrev();\n    }\n  }\n\n  // Arrow keys belong to the carousel's own controls, never to the slides: a text field or a\n  // scrollable region in a slide has to keep its own. `defaultPrevented` leaves the dots to their\n  // own handling below.\n  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n    if (event.defaultPrevented || trackRef.current?.contains(event.target as Node)) return;\n\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      goPrev();\n    } else if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      goNext();\n    }\n  }\n\n  function handleDotsKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n    let next: number | null = null;\n    if (event.key === 'ArrowLeft') next = realIndex - 1;\n    else if (event.key === 'ArrowRight') next = realIndex + 1;\n    else if (event.key === 'Home') next = 0;\n    else if (event.key === 'End') next = count - 1;\n    if (next === null) return;\n\n    event.preventDefault();\n    const clamped = clampIndex(next, count, canLoop);\n    goToIndex(clamped);\n    // The selected dot is the one holding the tab stop, so focus has to travel with the selection.\n    (dotsRef.current?.children[clamped] as HTMLElement | undefined)?.focus();\n  }\n\n  // The dots are the APG tablist over the slides. Without them the slides describe themselves as\n  // plain slides rather than as panels.\n  const hasTabs = showDots && count > 1;\n  const dotId = (index: number) => `${instanceId}-dot-${index}`;\n  const slideId = (index: number) => `${instanceId}-slide-${index}`;\n\n  // An unnamed landmark is worse than none, so the carousel is only a region once it has a name.\n  const isNamed = rest['aria-label'] !== undefined || rest['aria-labelledby'] !== undefined;\n\n  function slideSemantics(index: number) {\n    if (hasTabs) {\n      return { id: slideId(index), role: 'tabpanel', 'aria-labelledby': dotId(index) };\n    }\n    return {\n      id: slideId(index),\n      role: 'group',\n      'aria-roledescription': 'slide',\n      'aria-label': `${index + 1} of ${count}`,\n    };\n  }\n\n  const isPrevDisabled = !canLoop && realIndex <= 0;\n  const isNextDisabled = !canLoop && realIndex >= count - 1;\n\n  const trackTransform = buildTrackTransform(displayIndex, 0, slideWidthPercent);\n\n  return (\n    <div\n      {...rest}\n      ref={containerRef}\n      role={isNamed ? 'region' : 'group'}\n      aria-roledescription='carousel'\n      className={cx(styles.carousel, adaptiveHeight && styles.carouselAdaptive, classNames?.root, className)}\n      style={{ height: adaptiveHeight ? contentHeight : undefined, ...style, ...slotStyles?.root }}\n      onMouseEnter={tracksPointerPause ? () => setHovered(true) : undefined}\n      onMouseLeave={tracksPointerPause ? () => setHovered(false) : undefined}\n      onFocus={tracksPointerPause ? () => setFocused(true) : undefined}\n      onBlur={tracksPointerPause ? () => setFocused(false) : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <div\n        ref={trackRef}\n        className={cx(styles.carouselTrack, adaptiveHeight && styles.carouselTrackAdaptive, classNames?.track)}\n        style={{\n          width: `${extendedSlides.length * 100}%`,\n          transform: trackTransform,\n          transition: transitionEnabled ? undefined : 'none',\n          ...slotStyles?.track,\n        }}\n        aria-live={autoPlay ? 'off' : 'polite'}\n        onTransitionEnd={handleTrackTransitionEnd}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={handlePointerUp}\n        onPointerCancel={handlePointerUp}\n      >\n        {extendedSlides.map((slide, idx) => {\n          const isClonePosition = canLoop && (idx === 0 || idx === extendedSlides.length - 1);\n          const logicalIndex = idx - offset;\n          const isActive = !isClonePosition && logicalIndex === realIndex;\n          const isRendered = !lazyRender || (idx >= mountMin && idx <= mountMax);\n\n          return (\n            <div\n              key={`carousel-slide-${idx}`}\n              {...(isClonePosition ? {} : slideSemantics(logicalIndex))}\n              className={cx(styles.carouselSlide, classNames?.slide)}\n              style={{ width: `${100 / extendedSlides.length}%`, ...slotStyles?.slide }}\n              inert={isActive ? undefined : true}\n            >\n              {isRendered ? slide : null}\n            </div>\n          );\n        })}\n      </div>\n\n      {showArrows && count > 1 && (\n        <>\n          <ActionIcon\n            icon={faChevronLeft}\n            title={text.previous}\n            aria-label={text.previous}\n            aria-disabled={isPrevDisabled || undefined}\n            onClick={() => !isPrevDisabled && goPrev()}\n            className={cx(\n              styles.carouselPrevButton,\n              isPrevDisabled && styles.carouselButtonDisabled,\n              classNames?.prevButton,\n            )}\n            style={slotStyles?.prevButton}\n          />\n          <ActionIcon\n            icon={faChevronRight}\n            title={text.next}\n            aria-label={text.next}\n            aria-disabled={isNextDisabled || undefined}\n            onClick={() => !isNextDisabled && goNext()}\n            className={cx(\n              styles.carouselNextButton,\n              isNextDisabled && styles.carouselButtonDisabled,\n              classNames?.nextButton,\n            )}\n            style={slotStyles?.nextButton}\n          />\n        </>\n      )}\n\n      {hasTabs && (\n        <div\n          ref={dotsRef}\n          role='tablist'\n          aria-label={text.slides}\n          className={cx(styles.carouselDots, classNames?.dots)}\n          style={slotStyles?.dots}\n          onKeyDown={handleDotsKeyDown}\n        >\n          {slides.map((_, index) => (\n            <InteractableDiv\n              key={`carousel-dot-${index}`}\n              id={dotId(index)}\n              role='tab'\n              aria-label={text.goToSlide(index + 1)}\n              aria-selected={index === realIndex}\n              aria-controls={slideId(index)}\n              // One tab stop for the whole set, arrow keys inside it.\n              tabIndex={index === realIndex ? 0 : -1}\n              onClick={() => goToIndex(index)}\n              className={cx(styles.carouselDot, index === realIndex && styles.carouselDotActive, classNames?.dot)}\n              style={slotStyles?.dot}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction buildTrackTransform(position: number, dragPercent: number, slideWidthPercent: number): string {\n  return `translateX(calc(${-position * slideWidthPercent}% + ${dragPercent * (slideWidthPercent / 100)}%))`;\n}\n\nfunction clampIndex(index: number, count: number, canLoop: boolean): number {\n  if (count === 0) return 0;\n  if (canLoop) return ((index % count) + count) % count;\n  return Math.max(0, Math.min(count - 1, index));\n}\n\nexport default Carousel;\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e=`carousel_-oOBA`,t=`carousel-adaptive_i4I4U`,n=`carousel-track_tmtQz`,r=`carousel-trackAdaptive_Qzc0j`,i=`carousel-slide_Qpgjn`,a=`carousel-prevButton_P9QsH`,o=`carousel-nextButton_FgVo7`,s=`carousel-buttonDisabled_rGyW-`,c=`carousel-dots_xyfSx`,l=`carousel-dot_kPnww`,u=`carousel-dot-active_f9EJ1`,d={carousel:e,"carousel-adaptive":`carousel-adaptive_i4I4U`,carouselAdaptive:t,"carousel-track":`carousel-track_tmtQz`,carouselTrack:n,"carousel-trackAdaptive":`carousel-trackAdaptive_Qzc0j`,carouselTrackAdaptive:r,"carousel-slide":`carousel-slide_Qpgjn`,carouselSlide:i,"carousel-prevButton":`carousel-prevButton_P9QsH`,carouselPrevButton:a,"carousel-nextButton":`carousel-nextButton_FgVo7`,carouselNextButton:o,"carousel-buttonDisabled":`carousel-buttonDisabled_rGyW-`,carouselButtonDisabled:s,"carousel-dots":`carousel-dots_xyfSx`,carouselDots:c,"carousel-dot":`carousel-dot_kPnww`,carouselDot:l,"carousel-dot-active":`carousel-dot-active_f9EJ1`,carouselDotActive:u};export{e as carousel,t as carouselAdaptive,s as carouselButtonDisabled,l as carouselDot,u as carouselDotActive,c as carouselDots,o as carouselNextButton,a as carouselPrevButton,i as carouselSlide,n as carouselTrack,r as carouselTrackAdaptive,d as default};
+"use client";var e=`carousel_-oOBA`,t=`carousel-adaptive_i4I4U`,n=`carousel-track_tmtQz`,r=`carousel-trackAdaptive_Qzc0j`,i=`carousel-slide_Qpgjn`,a=`carousel-prevButton_P9QsH`,o=`carousel-nextButton_FgVo7`,s=`carousel-buttonDisabled_rGyW-`,c=`carousel-dots_xyfSx`,l=`carousel-dot_kPnww`,u=`carousel-dot-active_f9EJ1`,d={carousel:e,"carousel-adaptive":`carousel-adaptive_i4I4U`,carouselAdaptive:t,"carousel-track":`carousel-track_tmtQz`,carouselTrack:n,"carousel-trackAdaptive":`carousel-trackAdaptive_Qzc0j`,carouselTrackAdaptive:r,"carousel-slide":`carousel-slide_Qpgjn`,carouselSlide:i,"carousel-prevButton":`carousel-prevButton_P9QsH`,carouselPrevButton:a,"carousel-nextButton":`carousel-nextButton_FgVo7`,carouselNextButton:o,"carousel-buttonDisabled":`carousel-buttonDisabled_rGyW-`,carouselButtonDisabled:s,"carousel-dots":`carousel-dots_xyfSx`,carouselDots:c,"carousel-dot":`carousel-dot_kPnww`,carouselDot:l,"carousel-dot-active":`carousel-dot-active_f9EJ1`,carouselDotActive:u};export{e as carousel,t as carouselAdaptive,s as carouselButtonDisabled,l as carouselDot,u as carouselDotActive,c as carouselDots,o as carouselNextButton,a as carouselPrevButton,i as carouselSlide,n as carouselTrack,r as carouselTrackAdaptive,d as default};
 //# sourceMappingURL=carousel.module.mjs.map

package/dist/esm/common/checkbox/checkbox.mjs

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../loading/spinnerLoading/index.mjs";import n from"../ripple/ripple.mjs";import r from"./checkbox.module.mjs";import{useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u(u){let{label:d=``,selected:f=!1,onToggle:p=()=>{},className:m=``,style:h,disabled:g=!1,lineHeight:_=``,title:v=``,tabIndex:y=0,cursorDefault:b=!1,width:x,height:S,formValidator:C=null,children:w=null,background:T=null,isLoading:E=!1,classNames:D,styles:O,...k}=e(`Checkbox`,u),A=a(null),[,j]=o(0);i(()=>{if(!C)return;let e=()=>j(e=>e+1);return C.registerOnUpdateListener(e),()=>C.removeOnUpdateListener(e)},[C]);function M(e){g||E||(A.current?.addRipple(),C&&C.set(!C.value),p(!f,e))}let N=C?C.value:f;return l(`div`,{...k,className:s(r.checkbox,{[r.checkboxDisabled]:g,[r.checkboxPointer]:!b},m),style:{...x?{"--checkbox-size":x}:null,...h},onClick:M,onKeyPress:e=>{e.key===`Enter`&&M(e)},role:`checkbox`,"aria-checked":N,"aria-disabled":g||void 0,tabIndex:y,children:[c(`div`,{title:v,className:s(r.checkboxIcon,E?r.checkboxLoading:null,D?.icon),style:O?.icon,children:E?c(`div`,{className:r.checkboxLoadingBox,style:{width:x,height:S},children:c(t,{className:r.checkboxLoadingSpinner})}):l(`div`,{style:{width:x,height:S,...T?{"--checkbox-fill":T}:null,...O?.checkmark},className:s(r.checkboxCheckmark,N&&r.checkboxCheckmarkChecked,D?.checkmark),children:[c(n,{ref:A,manualOnly:!0,overflowHidden:!1,rippleAnimationLength:.3,rippleBackground:`radial-gradient(transparent, var(--primary-color))`}),c(`svg`,{strokeLinejoin:`round`,strokeLinecap:`round`,xmlns:`http://www.w3.org/2000/svg`,viewBox:`-0.5 -1.5 4 2.6`,children:c(`path`,{d:`M 0 0 l 1 1 l 2 -2`,strokeWidth:`0.4`,fill:`none`})})]})}),c(`div`,{className:D?.label,style:{lineHeight:_||`100%`,...O?.label},children:w||d})]})}export{u as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../loading/spinnerLoading/index.mjs";import n from"../ripple/ripple.mjs";import r from"./checkbox.module.mjs";import{useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u(u){let{label:d=``,selected:f=!1,onToggle:p=()=>{},className:m=``,style:h,disabled:g=!1,lineHeight:_=``,title:v=``,tabIndex:y=0,cursorDefault:b=!1,width:x,height:S,formValidator:C=null,children:w=null,background:T=null,isLoading:E=!1,classNames:D,styles:O,...k}=e(`Checkbox`,u),A=a(null),[,j]=o(0);i(()=>{if(!C)return;let e=()=>j(e=>e+1);return C.registerOnUpdateListener(e),()=>C.removeOnUpdateListener(e)},[C]);function M(e){g||E||(A.current?.addRipple(),C&&C.set(!C.value),p(!f,e))}let N=C?C.value:f;return l(`div`,{...k,className:s(r.checkbox,{[r.checkboxDisabled]:g,[r.checkboxPointer]:!b},m),style:{...x?{"--checkbox-size":x}:null,...h},onClick:M,onKeyPress:e=>{e.key===`Enter`&&M(e)},role:`checkbox`,"aria-checked":N,"aria-disabled":g||void 0,tabIndex:y,children:[c(`div`,{title:v,className:s(r.checkboxIcon,E?r.checkboxLoading:null,D?.icon),style:O?.icon,children:E?c(`div`,{className:r.checkboxLoadingBox,style:{width:x,height:S},children:c(t,{className:r.checkboxLoadingSpinner})}):l(`div`,{style:{width:x,height:S,...T?{"--checkbox-fill":T}:null,...O?.checkmark},className:s(r.checkboxCheckmark,N&&r.checkboxCheckmarkChecked,D?.checkmark),children:[c(n,{ref:A,manualOnly:!0,overflowHidden:!1,rippleAnimationLength:.3,rippleBackground:`radial-gradient(transparent, var(--primary-color))`}),c(`svg`,{strokeLinejoin:`round`,strokeLinecap:`round`,xmlns:`http://www.w3.org/2000/svg`,viewBox:`-0.5 -1.5 4 2.6`,children:c(`path`,{d:`M 0 0 l 1 1 l 2 -2`,strokeWidth:`0.4`,fill:`none`})})]})}),c(`div`,{className:D?.label,style:{lineHeight:_||`100%`,...O?.label},children:w||d})]})}export{u as default};
 //# sourceMappingURL=checkbox.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.tsx"],"sourcesContent":["import { useRef, useEffect, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Ripple from 'components/common/ripple';\nimport SpinnerLoading from '../loading/spinnerLoading';\nimport { useComponentDefaults } from '../configProvider';\n\nimport type { CheckboxProps } from './checkbox.types';\nimport styles from './checkbox.module.pcss';\n\nfunction Checkbox(props: CheckboxProps): ReactElement {\n  const {\n    label = '',\n    selected = false,\n    onToggle = () => {},\n    className = '',\n    style,\n    disabled = false,\n    lineHeight = '',\n    title = '',\n    tabIndex = 0,\n    cursorDefault = false,\n    width,\n    height,\n    formValidator = null,\n    children = null,\n    background = null,\n    isLoading = false,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Checkbox', props);\n  const rippleRef = useRef<{ addRipple: () => void }>(null);\n  const [, forceUpdate] = useState(0);\n\n  useEffect(() => {\n    if (!formValidator) return;\n    const listener = () => forceUpdate((n) => n + 1);\n    formValidator.registerOnUpdateListener(listener);\n    return () => formValidator.removeOnUpdateListener(listener);\n  }, [formValidator]);\n\n  function handleToggle(event?: React.MouseEvent | React.KeyboardEvent) {\n    if (disabled || isLoading) return;\n    rippleRef.current?.addRipple();\n    if (formValidator) {\n      formValidator.set(!formValidator.value);\n    }\n    onToggle(!selected, event);\n  }\n\n  const currSelected = (formValidator ? formValidator.value : selected) as boolean;\n\n  return (\n    <div\n      {...rest}\n      className={cx(\n        styles.checkbox,\n        {\n          [styles.checkboxDisabled]: disabled,\n          [styles.checkboxPointer]: !cursorDefault,\n        },\n        className,\n      )}\n      /* Through the variable, so the border and the spinner follow width too, not just the box. */\n      style={{ ...(width ? ({ '--checkbox-size': width } as React.CSSProperties) : null), ...style }}\n      onClick={handleToggle}\n      onKeyPress={(e) => {\n        if (e.key === 'Enter') handleToggle(e);\n      }}\n      role='checkbox'\n      aria-checked={currSelected}\n      aria-disabled={disabled || undefined}\n      tabIndex={tabIndex}\n    >\n      <div\n        title={title}\n        className={cx(styles.checkboxIcon, isLoading ? styles.checkboxLoading : null, classNames?.icon)}\n        style={slotStyles?.icon}\n      >\n        {isLoading ? (\n          <div className={styles.checkboxLoadingBox} style={{ width, height }}>\n            <SpinnerLoading className={styles.checkboxLoadingSpinner} />\n          </div>\n        ) : (\n          <div\n            style={{\n              width,\n              height,\n              ...(background ? ({ '--checkbox-fill': background } as React.CSSProperties) : null),\n              ...slotStyles?.checkmark,\n            }}\n            className={cx(\n              styles.checkboxCheckmark,\n              currSelected && styles.checkboxCheckmarkChecked,\n              classNames?.checkmark,\n            )}\n          >\n            <Ripple\n              ref={rippleRef}\n              manualOnly\n              overflowHidden={false}\n              rippleAnimationLength={0.3}\n              rippleBackground='radial-gradient(transparent, var(--primary-color))'\n            />\n            <svg\n              strokeLinejoin='round'\n              strokeLinecap='round'\n              xmlns='http://www.w3.org/2000/svg'\n              viewBox='-0.5 -1.5 4 2.6'\n            >\n              <path d='M 0 0 l 1 1 l 2 -2' strokeWidth='0.4' fill='none' />\n            </svg>\n          </div>\n        )}\n      </div>\n      <div className={classNames?.label} style={{ lineHeight: lineHeight || '100%', ...slotStyles?.label }}>\n        {children || label}\n      </div>\n    </div>\n  );\n}\n\nexport default Checkbox;\n"],"mappings":"sVASA,SAAS,EAAS,EAAoC,CACpD,GAAM,CACJ,QAAQ,GACR,WAAW,GACX,eAAiB,CAAC,EAClB,YAAY,GACZ,QACA,WAAW,GACX,aAAa,GACb,QAAQ,GACR,WAAW,EACX,gBAAgB,GAChB,QACA,SACA,gBAAgB,KAChB,WAAW,KACX,aAAa,KACb,YAAY,GACZ,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,WAAY,CAAK,EACpC,EAAY,EAAkC,IAAI,EAClD,EAAG,GAAe,EAAS,CAAC,EAElC,MAAgB,CACd,GAAI,CAAC,EAAe,OACpB,IAAM,MAAiB,EAAa,GAAM,EAAI,CAAC,EAE/C,OADA,EAAc,yBAAyB,CAAQ,MAClC,EAAc,uBAAuB,CAAQ,CAC5D,EAAG,CAAC,CAAa,CAAC,EAElB,SAAS,EAAa,EAAgD,CAChE,GAAY,IAChB,EAAU,SAAS,UAAU,EACzB,GACF,EAAc,IAAI,CAAC,EAAc,KAAK,EAExC,EAAS,CAAC,EAAU,CAAK,EAC3B,CAEA,IAAM,EAAgB,EAAgB,EAAc,MAAQ,EAE5D,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,SACP,EACG,EAAO,kBAAmB,GAC1B,EAAO,iBAAkB,CAAC,CAC7B,EACA,CACF,EAEA,MAAO,CAAE,GAAI,EAAS,CAAE,kBAAmB,CAAM,EAA4B,KAAO,GAAG,CAAM,EAC7F,QAAS,EACT,WAAa,GAAM,CACb,EAAE,MAAQ,SAAS,EAAa,CAAC,CACvC,EACA,KAAK,WACL,eAAc,EACd,gBAAe,GAAY,IAAA,GACjB,WAnBZ,SAAA,CAqBE,EAAC,MAAD,CACS,QACP,UAAW,EAAG,EAAO,aAAc,EAAY,EAAO,gBAAkB,KAAM,GAAY,IAAI,EAC9F,MAAO,GAAY,KAElB,SAAA,EACC,EAAC,MAAD,CAAK,UAAW,EAAO,mBAAoB,MAAO,CAAE,QAAO,QAAO,EAChE,SAAA,EAAC,EAAD,CAAgB,UAAW,EAAO,sBAAyB,CAAA,CACxD,CAAA,EAEL,EAAC,MAAD,CACE,MAAO,CACL,QACA,SACA,GAAI,EAAc,CAAE,kBAAmB,CAAW,EAA4B,KAC9E,GAAG,GAAY,SACjB,EACA,UAAW,EACT,EAAO,kBACP,GAAgB,EAAO,yBACvB,GAAY,SACd,EAXF,SAAA,CAaE,EAAC,EAAD,CACE,IAAK,EACL,WAAA,GACA,eAAgB,GAChB,sBAAuB,GACvB,iBAAiB,oDAClB,CAAA,EACD,EAAC,MAAD,CACE,eAAe,QACf,cAAc,QACd,MAAM,6BACN,QAAQ,kBAER,SAAA,EAAC,OAAD,CAAM,EAAE,qBAAqB,YAAY,MAAM,KAAK,MAAQ,CAAA,CACzD,CAAA,CACF,GAEJ,CAAA,EACL,EAAC,MAAD,CAAK,UAAW,GAAY,MAAO,MAAO,CAAE,WAAY,GAAc,OAAQ,GAAG,GAAY,KAAM,EAChG,SAAA,GAAY,CACV,CAAA,CACF,GAET"}
+{"version":3,"file":"checkbox.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.tsx"],"sourcesContent":["import { useRef, useEffect, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Ripple from 'components/common/ripple';\nimport SpinnerLoading from '../loading/spinnerLoading';\nimport { useComponentDefaults } from '../configProvider';\n\nimport type { CheckboxProps } from './checkbox.types';\nimport styles from './checkbox.module.pcss';\n\nfunction Checkbox(props: CheckboxProps): ReactElement {\n  const {\n    label = '',\n    selected = false,\n    onToggle = () => {},\n    className = '',\n    style,\n    disabled = false,\n    lineHeight = '',\n    title = '',\n    tabIndex = 0,\n    cursorDefault = false,\n    width,\n    height,\n    formValidator = null,\n    children = null,\n    background = null,\n    isLoading = false,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Checkbox', props);\n  const rippleRef = useRef<{ addRipple: () => void }>(null);\n  const [, forceUpdate] = useState(0);\n\n  useEffect(() => {\n    if (!formValidator) return;\n    const listener = () => forceUpdate((n) => n + 1);\n    formValidator.registerOnUpdateListener(listener);\n    return () => formValidator.removeOnUpdateListener(listener);\n  }, [formValidator]);\n\n  function handleToggle(event?: React.MouseEvent | React.KeyboardEvent) {\n    if (disabled || isLoading) return;\n    rippleRef.current?.addRipple();\n    if (formValidator) {\n      formValidator.set(!formValidator.value);\n    }\n    onToggle(!selected, event);\n  }\n\n  const currSelected = (formValidator ? formValidator.value : selected) as boolean;\n\n  return (\n    <div\n      {...rest}\n      className={cx(\n        styles.checkbox,\n        {\n          [styles.checkboxDisabled]: disabled,\n          [styles.checkboxPointer]: !cursorDefault,\n        },\n        className,\n      )}\n      /* Through the variable, so the border and the spinner follow width too, not just the box. */\n      style={{ ...(width ? ({ '--checkbox-size': width } as React.CSSProperties) : null), ...style }}\n      onClick={handleToggle}\n      onKeyPress={(e) => {\n        if (e.key === 'Enter') handleToggle(e);\n      }}\n      role='checkbox'\n      aria-checked={currSelected}\n      aria-disabled={disabled || undefined}\n      tabIndex={tabIndex}\n    >\n      <div\n        title={title}\n        className={cx(styles.checkboxIcon, isLoading ? styles.checkboxLoading : null, classNames?.icon)}\n        style={slotStyles?.icon}\n      >\n        {isLoading ? (\n          <div className={styles.checkboxLoadingBox} style={{ width, height }}>\n            <SpinnerLoading className={styles.checkboxLoadingSpinner} />\n          </div>\n        ) : (\n          <div\n            style={{\n              width,\n              height,\n              ...(background ? ({ '--checkbox-fill': background } as React.CSSProperties) : null),\n              ...slotStyles?.checkmark,\n            }}\n            className={cx(\n              styles.checkboxCheckmark,\n              currSelected && styles.checkboxCheckmarkChecked,\n              classNames?.checkmark,\n            )}\n          >\n            <Ripple\n              ref={rippleRef}\n              manualOnly\n              overflowHidden={false}\n              rippleAnimationLength={0.3}\n              rippleBackground='radial-gradient(transparent, var(--primary-color))'\n            />\n            <svg\n              strokeLinejoin='round'\n              strokeLinecap='round'\n              xmlns='http://www.w3.org/2000/svg'\n              viewBox='-0.5 -1.5 4 2.6'\n            >\n              <path d='M 0 0 l 1 1 l 2 -2' strokeWidth='0.4' fill='none' />\n            </svg>\n          </div>\n        )}\n      </div>\n      <div className={classNames?.label} style={{ lineHeight: lineHeight || '100%', ...slotStyles?.label }}>\n        {children || label}\n      </div>\n    </div>\n  );\n}\n\nexport default Checkbox;\n"],"mappings":"mWASA,SAAS,EAAS,EAAoC,CACpD,GAAM,CACJ,QAAQ,GACR,WAAW,GACX,eAAiB,CAAC,EAClB,YAAY,GACZ,QACA,WAAW,GACX,aAAa,GACb,QAAQ,GACR,WAAW,EACX,gBAAgB,GAChB,QACA,SACA,gBAAgB,KAChB,WAAW,KACX,aAAa,KACb,YAAY,GACZ,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,WAAY,CAAK,EACpC,EAAY,EAAkC,IAAI,EAClD,EAAG,GAAe,EAAS,CAAC,EAElC,MAAgB,CACd,GAAI,CAAC,EAAe,OACpB,IAAM,MAAiB,EAAa,GAAM,EAAI,CAAC,EAE/C,OADA,EAAc,yBAAyB,CAAQ,MAClC,EAAc,uBAAuB,CAAQ,CAC5D,EAAG,CAAC,CAAa,CAAC,EAElB,SAAS,EAAa,EAAgD,CAChE,GAAY,IAChB,EAAU,SAAS,UAAU,EACzB,GACF,EAAc,IAAI,CAAC,EAAc,KAAK,EAExC,EAAS,CAAC,EAAU,CAAK,EAC3B,CAEA,IAAM,EAAgB,EAAgB,EAAc,MAAQ,EAE5D,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,SACP,EACG,EAAO,kBAAmB,GAC1B,EAAO,iBAAkB,CAAC,CAC7B,EACA,CACF,EAEA,MAAO,CAAE,GAAI,EAAS,CAAE,kBAAmB,CAAM,EAA4B,KAAO,GAAG,CAAM,EAC7F,QAAS,EACT,WAAa,GAAM,CACb,EAAE,MAAQ,SAAS,EAAa,CAAC,CACvC,EACA,KAAK,WACL,eAAc,EACd,gBAAe,GAAY,IAAA,GACjB,WAnBZ,SAAA,CAqBE,EAAC,MAAD,CACS,QACP,UAAW,EAAG,EAAO,aAAc,EAAY,EAAO,gBAAkB,KAAM,GAAY,IAAI,EAC9F,MAAO,GAAY,KAElB,SAAA,EACC,EAAC,MAAD,CAAK,UAAW,EAAO,mBAAoB,MAAO,CAAE,QAAO,QAAO,EAChE,SAAA,EAAC,EAAD,CAAgB,UAAW,EAAO,sBAAyB,CAAA,CACxD,CAAA,EAEL,EAAC,MAAD,CACE,MAAO,CACL,QACA,SACA,GAAI,EAAc,CAAE,kBAAmB,CAAW,EAA4B,KAC9E,GAAG,GAAY,SACjB,EACA,UAAW,EACT,EAAO,kBACP,GAAgB,EAAO,yBACvB,GAAY,SACd,EAXF,SAAA,CAaE,EAAC,EAAD,CACE,IAAK,EACL,WAAA,GACA,eAAgB,GAChB,sBAAuB,GACvB,iBAAiB,oDAClB,CAAA,EACD,EAAC,MAAD,CACE,eAAe,QACf,cAAc,QACd,MAAM,6BACN,QAAQ,kBAER,SAAA,EAAC,OAAD,CAAM,EAAE,qBAAqB,YAAY,MAAM,KAAK,MAAQ,CAAA,CACzD,CAAA,CACF,GAEJ,CAAA,EACL,EAAC,MAAD,CAAK,UAAW,GAAY,MAAO,MAAO,CAAE,WAAY,GAAc,OAAQ,GAAG,GAAY,KAAM,EAChG,SAAA,GAAY,CACV,CAAA,CACF,GAET"}

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

@@ -1,2 +1,2 @@
-var e=`checkbox_VO3c2`,t=`checkbox-icon_7O0Hm`,n=`checkbox-loading_4t2-w`,r=`checkbox-loading-box_XBIHw`,i=`checkbox-loading-spinner_XzXt4`,a=`checkbox-pointer_XnO8e`,o=`checkbox-disabled_ML2rR`,s=`checkbox-checkmark_Xclv9`,c=`checkbox-checkmark-checked_mD4FI`,l={checkbox:e,"checkbox-icon":`checkbox-icon_7O0Hm`,checkboxIcon:t,"checkbox-loading":`checkbox-loading_4t2-w`,checkboxLoading:n,"checkbox-loading-box":`checkbox-loading-box_XBIHw`,checkboxLoadingBox:r,"checkbox-loading-spinner":`checkbox-loading-spinner_XzXt4`,checkboxLoadingSpinner:i,"checkbox-pointer":`checkbox-pointer_XnO8e`,checkboxPointer:a,"checkbox-disabled":`checkbox-disabled_ML2rR`,checkboxDisabled:o,"checkbox-checkmark":`checkbox-checkmark_Xclv9`,checkboxCheckmark:s,"checkbox-checkmark-checked":`checkbox-checkmark-checked_mD4FI`,checkboxCheckmarkChecked:c};export{e as checkbox,s as checkboxCheckmark,c as checkboxCheckmarkChecked,o as checkboxDisabled,t as checkboxIcon,n as checkboxLoading,r as checkboxLoadingBox,i as checkboxLoadingSpinner,a as checkboxPointer,l as default};
+"use client";var e=`checkbox_VO3c2`,t=`checkbox-icon_7O0Hm`,n=`checkbox-loading_4t2-w`,r=`checkbox-loading-box_XBIHw`,i=`checkbox-loading-spinner_XzXt4`,a=`checkbox-pointer_XnO8e`,o=`checkbox-disabled_ML2rR`,s=`checkbox-checkmark_Xclv9`,c=`checkbox-checkmark-checked_mD4FI`,l={checkbox:e,"checkbox-icon":`checkbox-icon_7O0Hm`,checkboxIcon:t,"checkbox-loading":`checkbox-loading_4t2-w`,checkboxLoading:n,"checkbox-loading-box":`checkbox-loading-box_XBIHw`,checkboxLoadingBox:r,"checkbox-loading-spinner":`checkbox-loading-spinner_XzXt4`,checkboxLoadingSpinner:i,"checkbox-pointer":`checkbox-pointer_XnO8e`,checkboxPointer:a,"checkbox-disabled":`checkbox-disabled_ML2rR`,checkboxDisabled:o,"checkbox-checkmark":`checkbox-checkmark_Xclv9`,checkboxCheckmark:s,"checkbox-checkmark-checked":`checkbox-checkmark-checked_mD4FI`,checkboxCheckmarkChecked:c};export{e as checkbox,s as checkboxCheckmark,c as checkboxCheckmarkChecked,o as checkboxDisabled,t as checkboxIcon,n as checkboxLoading,r as checkboxLoadingBox,i as checkboxLoadingSpinner,a as checkboxPointer,l as default};
 //# sourceMappingURL=checkbox.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.module.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.module.pcss"],"sourcesContent":[".checkbox {\n  --custom-checkbox-size: var(--checkbox-size, 1.375em);\n  --custom-checkbox-gap: var(--checkbox-gap, 0.5em);\n\n  user-select: none;\n  display: flex;\n  align-items: center;\n  column-gap: var(--custom-checkbox-gap);\n  margin: -1px;\n  border: 1px solid transparent;\n  width: fit-content;\n\n  /* The visible checkmark box (below) is nested inside this root, not directly on it — 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  --checkmark-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  &-icon {\n    color: var(--text-on-primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    background-color: var(--light-background-color);\n    width: fit-content;\n    height: fit-content;\n  }\n\n  &-loading {\n    background: transparent;\n\n    /* The spinner fills its box, so the box has to carry the checkmark's own size. */\n    &-box {\n      width: var(--custom-checkbox-size);\n      height: var(--custom-checkbox-size);\n    }\n\n    &-spinner {\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  &-pointer {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &:focus-visible {\n    outline: none;\n    border: 1px solid var(--focus-border-color, var(--primary-color));\n    border-radius: 6px;\n  }\n\n  &-disabled {\n    filter: brightness(0.8);\n    cursor: not-allowed;\n  }\n\n  &-checkmark {\n    width: var(--custom-checkbox-size);\n    height: var(--custom-checkbox-size);\n    border: 0.1125em solid var(--border-color);\n    border-radius: var(--checkmark-radius);\n    position: relative;\n\n    /* The tick only. The fill is the box's own background below, which is what keeps the\n       checked and empty states the same size: an svg sized to be the fill sat proud of it. */\n    svg {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      padding: 0.125em;\n      stroke: var(--text-on-primary);\n      stroke-dasharray: 5;\n      stroke-dashoffset: 5;\n      transition:\n        transform 0.1s,\n        stroke-dashoffset 0.4s;\n      transition-delay: 0s, 0.2s;\n      transform: scale(0);\n    }\n\n    &-checked {\n      background: var(--checkbox-fill, var(--primary-color));\n      border-color: var(--checkbox-fill, var(--primary-color));\n\n      svg {\n        stroke-dashoffset: 0;\n        transform: scale(1);\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"checkbox.module.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.module.pcss"],"sourcesContent":[".checkbox {\n  --custom-checkbox-size: var(--checkbox-size, 1.375em);\n  --custom-checkbox-gap: var(--checkbox-gap, 0.5em);\n\n  user-select: none;\n  display: flex;\n  align-items: center;\n  column-gap: var(--custom-checkbox-gap);\n  margin: -1px;\n  border: 1px solid transparent;\n  width: fit-content;\n\n  /* The visible checkmark box (below) is nested inside this root, not directly on it — 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  --checkmark-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  &-icon {\n    color: var(--text-on-primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    background-color: var(--light-background-color);\n    width: fit-content;\n    height: fit-content;\n  }\n\n  &-loading {\n    background: transparent;\n\n    /* The spinner fills its box, so the box has to carry the checkmark's own size. */\n    &-box {\n      width: var(--custom-checkbox-size);\n      height: var(--custom-checkbox-size);\n    }\n\n    &-spinner {\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  &-pointer {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &:focus-visible {\n    outline: none;\n    border: 1px solid var(--focus-border-color, var(--primary-color));\n    border-radius: 6px;\n  }\n\n  &-disabled {\n    filter: brightness(0.8);\n    cursor: not-allowed;\n  }\n\n  &-checkmark {\n    width: var(--custom-checkbox-size);\n    height: var(--custom-checkbox-size);\n    border: 0.1125em solid var(--border-color);\n    border-radius: var(--checkmark-radius);\n    position: relative;\n\n    /* The tick only. The fill is the box's own background below, which is what keeps the\n       checked and empty states the same size: an svg sized to be the fill sat proud of it. */\n    svg {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      padding: 0.125em;\n      stroke: var(--text-on-primary);\n      stroke-dasharray: 5;\n      stroke-dashoffset: 5;\n      transition:\n        transform 0.1s,\n        stroke-dashoffset 0.4s;\n      transition-delay: 0s, 0.2s;\n      transform: scale(0);\n    }\n\n    &-checked {\n      background: var(--checkbox-fill, var(--primary-color));\n      border-color: var(--checkbox-fill, var(--primary-color));\n\n      svg {\n        stroke-dashoffset: 0;\n        transform: scale(1);\n      }\n    }\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .checkbox-checkmark svg {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import n from"../ripple/ripple.mjs";import{isSelfActivation as r}from"../utils/activationKey.mjs";import i from"../interactableDiv/index.mjs";import a from"../actionIcon/actionIcon.mjs";import{ChipStyleType as o}from"./chip.types.mjs";import s from"./chip.module.mjs";import{useMemo as c,useRef as l}from"react";import u from"classnames";import{faXmarkCircle as d}from"@fortawesome/free-solid-svg-icons";import{jsx as f,jsxs as p}from"react/jsx-runtime";var m={default:s.chipStyleDefault,primary:s.chipStylePrimary,info:s.chipStyleInfo,warn:s.chipStyleWarn,error:s.chipStyleError},h={remove:`Remove`};function g(g){let{className:_=``,thumbnail:v=``,text:y=``,styleType:b=o.Default,showRemoveIcon:x=!1,labels:S,onClick:C,onRemove:w,style:T,classNames:E,styles:D,...O}=e(`Chip`,g),k=t(`Chip`,S,h),A=l(null);function j(e){C&&r(e)&&A.current?.addRipple()}let M=c(()=>{if(typeof v==`string`&&v.startsWith(`http`))return v},[v]);return f(i,{...O,className:u(s.chip,m[b],C&&s.chipClickable,_,E?.root),style:{...T,...D?.root},onClick:C,onKeyDown:j,children:f(n,{ref:A,disabled:!C,style:{borderRadius:`inherit`},children:p(`div`,{className:u(s.chipInner,E?.inner),style:D?.inner,children:[v&&f(`div`,{className:u(s.chipThumbnail,E?.thumbnail),style:{...M?{backgroundImage:`url(${M})`}:{},...D?.thumbnail},children:!M&&v}),f(`div`,{className:u(s.chipText,E?.text),style:D?.text,children:y}),x&&f(a,{icon:d,className:E?.removeIcon,style:D?.removeIcon,"aria-label":k.remove,onClick:e=>{e.stopPropagation(),w?.()}})]})})})}export{g as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{isSelfActivation as n}from"../utils/activationKey.mjs";import r from"../ripple/ripple.mjs";import i from"../interactableDiv/index.mjs";import a from"../actionIcon/actionIcon.mjs";import{ChipStyleType as o}from"./chip.types.mjs";import s from"./chip.module.mjs";import{useMemo as c,useRef as l}from"react";import u from"classnames";import{faXmarkCircle as d}from"@fortawesome/free-solid-svg-icons";import{jsx as f,jsxs as p}from"react/jsx-runtime";var m={default:s.chipStyleDefault,primary:s.chipStylePrimary,info:s.chipStyleInfo,warn:s.chipStyleWarn,error:s.chipStyleError},h={remove:`Remove`};function g(g){let{className:_=``,thumbnail:v=``,text:y=``,styleType:b=o.Default,showRemoveIcon:x=!1,labels:S,onClick:C,onRemove:w,style:T,classNames:E,styles:D,...O}=e(`Chip`,g),k=t(`Chip`,S,h),A=l(null);function j(e){C&&n(e)&&A.current?.addRipple()}let M=c(()=>{if(typeof v==`string`&&v.startsWith(`http`))return v},[v]);return f(i,{...O,className:u(s.chip,m[b],C&&s.chipClickable,_,E?.root),style:{...T,...D?.root},onClick:C,onKeyDown:j,children:f(r,{ref:A,disabled:!C,style:{borderRadius:`inherit`},children:p(`div`,{className:u(s.chipInner,E?.inner),style:D?.inner,children:[v&&f(`div`,{className:u(s.chipThumbnail,E?.thumbnail),style:{...M?{backgroundImage:`url(${M})`}:{},...D?.thumbnail},children:!M&&v}),f(`div`,{className:u(s.chipText,E?.text),style:D?.text,children:y}),x&&f(a,{icon:d,className:E?.removeIcon,style:D?.removeIcon,"aria-label":k.remove,onClick:e=>{e.stopPropagation(),w?.()}})]})})})}export{g as default};
 //# sourceMappingURL=chip.mjs.map

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"chip.types.mjs","names":[],"sources":["../../../../package/common/chip/chip.types.ts"],"sourcesContent":["import type { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types';\n\nexport enum ChipStyleType {\n  Default = 'default',\n  Primary = 'primary',\n  Info = 'info',\n  Warn = 'warn',\n  Error = 'error',\n}\n\n/** Text Chip renders of its own, for translating it. */\nexport interface ChipLabels {\n  /** The remove button, read out by screen readers (default `Remove`). */\n  remove?: string;\n}\n\nexport type ChipSlots = 'root' | 'inner' | 'thumbnail' | 'text' | 'removeIcon';\n\nexport interface ChipProps extends HtmlProps {\n  className?: string;\n  text?: string;\n  thumbnail?: React.ReactNode;\n  styleType?: ChipStyleType;\n  showRemoveIcon?: boolean;\n  /** Accessible name for the remove button. Default `'Remove'`. */\n  onClick?: () => void;\n  onRemove?: () => void;\n  /** Overrides the text Chip renders of its own. Merged per key. */\n  labels?: ChipLabels;\n  /** Classes for the inner elements. See `ChipSlots`. */\n  classNames?: SlotClassNames<ChipSlots>;\n  /** Inline styles for the inner elements. See `ChipSlots`. */\n  styles?: SlotStyles<ChipSlots>;\n}\n\nexport interface ChipContainerProps extends HtmlProps {\n  className?: string;\n  children?: React.ReactNode;\n  inline?: boolean;\n}\n"],"mappings":"AAEA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
+{"version":3,"file":"chip.types.mjs","names":[],"sources":["../../../../package/common/chip/chip.types.ts"],"sourcesContent":["import type { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types';\n\nexport enum ChipStyleType {\n  Default = 'default',\n  Primary = 'primary',\n  Info = 'info',\n  Warn = 'warn',\n  Error = 'error',\n}\n\n/** Text Chip renders of its own, for translating it. */\nexport interface ChipLabels {\n  /** The remove button, read out by screen readers (default `Remove`). */\n  remove?: string;\n}\n\nexport type ChipSlots = 'root' | 'inner' | 'thumbnail' | 'text' | 'removeIcon';\n\nexport interface ChipProps extends HtmlProps {\n  className?: string;\n  text?: string;\n  thumbnail?: React.ReactNode;\n  styleType?: ChipStyleType;\n  showRemoveIcon?: boolean;\n  /** Accessible name for the remove button. Default `'Remove'`. */\n  onClick?: () => void;\n  onRemove?: () => void;\n  /** Overrides the text Chip renders of its own. Merged per key. */\n  labels?: ChipLabels;\n  /** Classes for the inner elements. See `ChipSlots`. */\n  classNames?: SlotClassNames<ChipSlots>;\n  /** Inline styles for the inner elements. See `ChipSlots`. */\n  styles?: SlotStyles<ChipSlots>;\n}\n\nexport interface ChipContainerProps extends HtmlProps {\n  className?: string;\n  children?: React.ReactNode;\n  inline?: boolean;\n}\n"],"mappings":"aAEA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}

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

@@ -1,2 +1,2 @@
-import e from"./chip.module.mjs";import t from"classnames";import{jsx as n}from"react/jsx-runtime";function r({className:r=void 0,children:i=null,inline:a=!1,...o}){return n(`div`,{...o,className:t(e.chipContainer,a&&e.chipContainerInline,r),children:i})}export{r as default};
+"use client";import e from"./chip.module.mjs";import t from"classnames";import{jsx as n}from"react/jsx-runtime";function r({className:r=void 0,children:i=null,inline:a=!1,...o}){return n(`div`,{...o,className:t(e.chipContainer,a&&e.chipContainerInline,r),children:i})}export{r as default};
 //# sourceMappingURL=chipContainer.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"chipContainer.mjs","names":[],"sources":["../../../../package/common/chip/chipContainer.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport { ChipContainerProps } from './chip.types';\nimport styles from './chip.module.pcss';\n\nfunction ChipContainer({\n  className = undefined,\n  children = null,\n  inline = false,\n  ...rest\n}: ChipContainerProps): ReactElement {\n  return (\n    <div {...rest} className={cx(styles.chipContainer, inline && styles.chipContainerInline, className)}>\n      {children}\n    </div>\n  );\n}\n\nexport default ChipContainer;\n"],"mappings":"mGAMA,SAAS,EAAc,CACrB,YAAY,IAAA,GACZ,WAAW,KACX,SAAS,GACT,GAAG,GACgC,CACnC,OACE,EAAC,MAAD,CAAK,GAAI,EAAM,UAAW,EAAG,EAAO,cAAe,GAAU,EAAO,oBAAqB,CAAS,EAC/F,UACE,CAAA,CAET"}
+{"version":3,"file":"chipContainer.mjs","names":[],"sources":["../../../../package/common/chip/chipContainer.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport { ChipContainerProps } from './chip.types';\nimport styles from './chip.module.pcss';\n\nfunction ChipContainer({\n  className = undefined,\n  children = null,\n  inline = false,\n  ...rest\n}: ChipContainerProps): ReactElement {\n  return (\n    <div {...rest} className={cx(styles.chipContainer, inline && styles.chipContainerInline, className)}>\n      {children}\n    </div>\n  );\n}\n\nexport default ChipContainer;\n"],"mappings":"gHAMA,SAAS,EAAc,CACrB,YAAY,IAAA,GACZ,WAAW,KACX,SAAS,GACT,GAAG,GACgC,CACnC,OACE,EAAC,MAAD,CAAK,GAAI,EAAM,UAAW,EAAG,EAAO,cAAe,GAAU,EAAO,oBAAqB,CAAS,EAC/F,UACE,CAAA,CAET"}

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

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

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

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

@@ -1,2 +1,2 @@
-var e=`colorPicker_Ts3an`,t=`swatch_NW78g`,n=`swatchHex_j7-i5`,r=`swatchFill_oNtHf`,i=`panel_WXEvY`,a=`gradientArea_qEZim`,o=`gradientOverlay_ZQybe`,s=`cursor_m67Lm`,c=`hueSlider_k3Knb`,l=`alphaSlider_OT2sD`,u=`hexRow_L4bZU`,d=`hexInput_zQw4s`,f=`eyeDropperButton_dOyRX`,p={colorPicker:e,swatch:t,swatchHex:n,swatchFill:r,panel:i,gradientArea:a,gradientOverlay:o,cursor:s,hueSlider:c,alphaSlider:l,hexRow:u,hexInput:d,eyeDropperButton:f};export{l as alphaSlider,e as colorPicker,s as cursor,p as default,f as eyeDropperButton,a as gradientArea,o as gradientOverlay,d as hexInput,u as hexRow,c as hueSlider,i as panel,t as swatch,r as swatchFill,n as swatchHex};
+"use client";var e=`colorPicker_Ts3an`,t=`swatch_NW78g`,n=`swatchHex_j7-i5`,r=`swatchFill_oNtHf`,i=`panel_WXEvY`,a=`gradientArea_qEZim`,o=`gradientOverlay_ZQybe`,s=`cursor_m67Lm`,c=`hueSlider_k3Knb`,l=`alphaSlider_OT2sD`,u=`hexRow_L4bZU`,d=`hexInput_zQw4s`,f=`eyeDropperButton_dOyRX`,p={colorPicker:e,swatch:t,swatchHex:n,swatchFill:r,panel:i,gradientArea:a,gradientOverlay:o,cursor:s,hueSlider:c,alphaSlider:l,hexRow:u,hexInput:d,eyeDropperButton:f};export{l as alphaSlider,e as colorPicker,s as cursor,p as default,f as eyeDropperButton,a as gradientArea,o as gradientOverlay,d as hexInput,u as hexRow,c as hueSlider,i as panel,t as swatch,r as swatchFill,n as swatchHex};
 //# sourceMappingURL=colorPicker.module.mjs.map

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

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

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

@@ -1,2 +1,2 @@
-var e,t=/^#([0-9a-f]{6}|[0-9a-f]{8})$/i;function n(e){return Math.max(0,Math.min(255,Math.round(e))).toString(16).padStart(2,`0`)}function r(e,t,r,i){let a=Math.round(i);return`#${n(e)}${n(t)}${n(r)}${a===255?``:n(a)}`}function i(n){let i=n?.trim();if(!i)return;if(t.test(i))return i;if(e===void 0&&(e=document.createElement(`canvas`).getContext(`2d`)),!e)return;e.fillStyle=`#010203`,e.fillStyle=i;let a=e.fillStyle;if(e.fillStyle=`#040506`,e.fillStyle=i,e.fillStyle!==a)return;if(a.startsWith(`#`))return a;let o=/^rgba?\(([^)]+)\)$/i.exec(a);if(o){let[e,t,n,i=`1`]=o[1].split(`,`).map(e=>e.trim());return r(Number(e),Number(t),Number(n),Number(i)*255)}e.clearRect(0,0,1,1),e.fillRect(0,0,1,1);let[s,c,l,u]=e.getImageData(0,0,1,1).data;return r(s,c,l,u)}export{i as toHex};
+"use client";var e,t=/^#([0-9a-f]{6}|[0-9a-f]{8})$/i;function n(e){return Math.max(0,Math.min(255,Math.round(e))).toString(16).padStart(2,`0`)}function r(e,t,r,i){let a=Math.round(i);return`#${n(e)}${n(t)}${n(r)}${a===255?``:n(a)}`}function i(n){let i=n?.trim();if(!i)return;if(t.test(i))return i;if(e===void 0&&(e=document.createElement(`canvas`).getContext(`2d`)),!e)return;e.fillStyle=`#010203`,e.fillStyle=i;let a=e.fillStyle;if(e.fillStyle=`#040506`,e.fillStyle=i,e.fillStyle!==a)return;if(a.startsWith(`#`))return a;let o=/^rgba?\(([^)]+)\)$/i.exec(a);if(o){let[e,t,n,i=`1`]=o[1].split(`,`).map(e=>e.trim());return r(Number(e),Number(t),Number(n),Number(i)*255)}e.clearRect(0,0,1,1),e.fillRect(0,0,1,1);let[s,c,l,u]=e.getImageData(0,0,1,1).data;return r(s,c,l,u)}export{i as toHex};
 //# sourceMappingURL=toHex.mjs.map