@ahrowe/ui 0.29.0 → 0.30.0

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

@@ -1,2 +1,2 @@
-import{AccordionStyleType as e}from"./accordion.types.mjs";import t from"./accordion.module.mjs";import n from"./accordion.primary.module.mjs";import r from"./accordion.plain.module.mjs";import{useComponentDefaults as i}from"../configProvider/useComponentDefaults.mjs";import{useEffect as a,useRef as o,useState as s}from"react";import c from"classnames";import{FontAwesomeIcon as l}from"@fortawesome/react-fontawesome";import{faChevronDown as u}from"@fortawesome/free-solid-svg-icons";import{jsx as d,jsxs as f}from"react/jsx-runtime";var p={[e.Default]:t,[e.Primary]:n,[e.Plain]:r};function m(t){let{id:n=``,title:r=``,children:m=null,expanded:h=null,onHeaderClicked:g=()=>{},styleType:_=e.Default,startOpen:v=!1,hideHeader:y=!1,className:b,style:x,classNames:S,styles:C,...w}=i(`Accordion`,t),T=p[_],E=o(null),D=o(null),[O,k]=s(h??v),[A,j]=s(null);a(()=>{h!==null&&k(h)},[h]),a(()=>{let e=E.current;e&&(e.inert=!O)},[O]),a(()=>{let e=D.current;if(!e)return;let t=new ResizeObserver(()=>j(e.offsetHeight));return t.observe(e),()=>t.unobserve(e)},[]);function M(){let e=!O;g(n,e),h===null&&k(e)}let N={height:`${O?32:24}px`},P={height:O?A??`auto`:`0px`};return f(`div`,{...w,id:n||void 0,className:c(T.accordion,O&&T.accordionActive,b,S?.root),style:{...x,...C?.root},children:[!y&&f(`div`,{className:c(T.accordionHeader,O&&T.accordionHeaderActive,S?.header),style:{...N,...C?.header},onClick:M,role:`button`,tabIndex:0,onKeyDown:({key:e})=>{e===`Enter`&&M()},children:[d(`div`,{className:c(T.accordionTitle,S?.title),style:C?.title,children:r}),d(l,{icon:u,className:c(T.accordionIcon,O&&T.accordionIconActive,S?.icon),style:C?.icon})]}),d(`div`,{ref:E,className:c(T.accordionBody,O&&T.accordionBodyActive,S?.body),style:{...P,...C?.body},children:d(`div`,{className:c(T.accordionBodyInner,S?.bodyInner),style:C?.bodyInner,ref:D,children:m})})]})}export{m as default};
+import{AccordionStyleType as e}from"./accordion.types.mjs";import t from"./accordion.module.mjs";import n from"./accordion.primary.module.mjs";import r from"./accordion.plain.module.mjs";import{useComponentDefaults as i}from"../configProvider/useComponentDefaults.mjs";import{useEffect as a,useRef as o,useState as s}from"react";import c from"classnames";import{FontAwesomeIcon as l}from"@fortawesome/react-fontawesome";import{faChevronDown as u}from"@fortawesome/free-solid-svg-icons";import{jsx as d,jsxs as f}from"react/jsx-runtime";var p={[e.Default]:t,[e.Primary]:n,[e.Plain]:r};function m(t){let{id:n=``,title:r=``,children:m=null,expanded:h=null,onHeaderClicked:g=()=>{},styleType:_=e.Default,startOpen:v=!1,hideHeader:y=!1,className:b,style:x,classNames:S,styles:C,...w}=i(`Accordion`,t),T=p[_],E=o(null),D=o(null),[O,k]=s(h??v),[A,j]=s(null);a(()=>{h!==null&&k(h)},[h]),a(()=>{let e=E.current;e&&(e.inert=!O)},[O]),a(()=>{let e=D.current;if(!e)return;let t=new ResizeObserver(()=>j(e.offsetHeight));return t.observe(e),()=>t.unobserve(e)},[]);function M(){let e=!O;g(n,e),h===null&&k(e)}let N={height:O?A??`auto`:`0px`};return f(`div`,{...w,id:n||void 0,className:c(T.accordion,O&&T.accordionActive,b,S?.root),style:{...x,...C?.root},children:[!y&&f(`div`,{className:c(T.accordionHeader,O&&T.accordionHeaderActive,S?.header),style:C?.header,onClick:M,role:`button`,tabIndex:0,onKeyDown:({key:e})=>{e===`Enter`&&M()},children:[d(`div`,{className:c(T.accordionTitle,S?.title),style:C?.title,children:r}),d(l,{icon:u,className:c(T.accordionIcon,O&&T.accordionIconActive,S?.icon),style:C?.icon})]}),d(`div`,{ref:E,className:c(T.accordionBody,O&&T.accordionBodyActive,S?.body),style:{...N,...C?.body},children:d(`div`,{className:c(T.accordionBodyInner,S?.bodyInner),style:C?.bodyInner,ref:D,children:m})})]})}export{m as default};
 //# sourceMappingURL=accordion.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown as arrowIcon } from '@fortawesome/free-solid-svg-icons';\n\nimport { AccordionStyleType, type AccordionProps } from './accordion.types';\n\nimport defaultStyles from './accordion.module.pcss';\nimport primaryStyles from './accordion.primary.module.pcss';\nimport plainStyles from './accordion.plain.module.pcss';\nimport { useComponentDefaults } from '../configProvider';\n\nconst STYLES_BY_TYPE: Record<AccordionStyleType, typeof defaultStyles> = {\n  [AccordionStyleType.Default]: defaultStyles,\n  [AccordionStyleType.Primary]: primaryStyles,\n  [AccordionStyleType.Plain]: plainStyles,\n};\n\nfunction Accordion(props: AccordionProps): ReactElement {\n  const {\n    id = '',\n    title = '',\n    children = null,\n    expanded = null,\n    onHeaderClicked = () => {},\n    styleType = AccordionStyleType.Default,\n    startOpen = false,\n    hideHeader = false,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Accordion', props);\n  const s = STYLES_BY_TYPE[styleType];\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const bodyInnerRef = useRef<HTMLDivElement>(null);\n\n  const [isExpanded, setIsExpanded] = useState(expanded ?? startOpen);\n  const [bodyHeight, setBodyHeight] = useState<number | null>(null);\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect\n    if (expanded !== null) setIsExpanded(expanded);\n  }, [expanded]);\n\n  useEffect(() => {\n    const el = bodyRef.current;\n    if (el) el.inert = !isExpanded;\n  }, [isExpanded]);\n\n  useEffect(() => {\n    const el = bodyInnerRef.current;\n    if (!el) return;\n    const observer = new ResizeObserver(() => setBodyHeight(el.offsetHeight));\n    observer.observe(el);\n    return () => observer.unobserve(el);\n  }, []);\n\n  function toggleExpanded() {\n    const next = !isExpanded;\n    onHeaderClicked(id, next);\n    if (expanded === null) setIsExpanded(next);\n  }\n\n  const headerHeight = 24;\n  const headerStyle = { height: `${isExpanded ? headerHeight + headerHeight / 3 : headerHeight}px` };\n  const bodyStyle = { height: isExpanded ? (bodyHeight ?? 'auto') : '0px' };\n\n  return (\n    <div\n      {...rest}\n      id={id || undefined}\n      className={cx(s.accordion, isExpanded && s.accordionActive, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      {!hideHeader && (\n        <div\n          className={cx(s.accordionHeader, isExpanded && s.accordionHeaderActive, classNames?.header)}\n          style={{ ...headerStyle, ...slotStyles?.header }}\n          onClick={toggleExpanded}\n          role='button'\n          tabIndex={0}\n          onKeyDown={({ key }) => {\n            if (key === 'Enter') toggleExpanded();\n          }}\n        >\n          <div className={cx(s.accordionTitle, classNames?.title)} style={slotStyles?.title}>\n            {title}\n          </div>\n          <FontAwesomeIcon\n            icon={arrowIcon}\n            className={cx(s.accordionIcon, isExpanded && s.accordionIconActive, classNames?.icon)}\n            style={slotStyles?.icon as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n          />\n        </div>\n      )}\n      <div\n        ref={bodyRef}\n        className={cx(s.accordionBody, isExpanded && s.accordionBodyActive, classNames?.body)}\n        style={{ ...bodyStyle, ...slotStyles?.body }}\n      >\n        <div\n          className={cx(s.accordionBodyInner, classNames?.bodyInner)}\n          style={slotStyles?.bodyInner}\n          ref={bodyInnerRef}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Accordion;\n"],"mappings":"whBAYA,IAAM,EAAmE,EACtE,EAAmB,SAAU,GAC7B,EAAmB,SAAU,GAC7B,EAAmB,OAAQ,CAC9B,EAEA,SAAS,EAAU,EAAqC,CACtD,GAAM,CACJ,KAAK,GACL,QAAQ,GACR,WAAW,KACX,WAAW,KACX,sBAAwB,CAAC,EACzB,YAAY,EAAmB,QAC/B,YAAY,GACZ,aAAa,GACb,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,YAAa,CAAK,EACrC,EAAI,EAAe,GACnB,EAAU,EAAuB,IAAI,EACrC,EAAe,EAAuB,IAAI,EAE1C,CAAC,EAAY,GAAiB,EAAS,GAAY,CAAS,EAC5D,CAAC,EAAY,GAAiB,EAAwB,IAAI,EAEhE,MAAgB,CAEV,IAAa,MAAM,EAAc,CAAQ,CAC/C,EAAG,CAAC,CAAQ,CAAC,EAEb,MAAgB,CACd,IAAM,EAAK,EAAQ,QACf,IAAI,EAAG,MAAQ,CAAC,EACtB,EAAG,CAAC,CAAU,CAAC,EAEf,MAAgB,CACd,IAAM,EAAK,EAAa,QACxB,GAAI,CAAC,EAAI,OACT,IAAM,EAAW,IAAI,mBAAqB,EAAc,EAAG,YAAY,CAAC,EAExE,OADA,EAAS,QAAQ,CAAE,MACN,EAAS,UAAU,CAAE,CACpC,EAAG,CAAC,CAAC,EAEL,SAAS,GAAiB,CACxB,IAAM,EAAO,CAAC,EACd,EAAgB,EAAI,CAAI,EACpB,IAAa,MAAM,EAAc,CAAI,CAC3C,CAGA,IAAM,EAAc,CAAE,OAAQ,GAAG,EAAa,GAAkC,GAAa,GAAI,EAC3F,EAAY,CAAE,OAAQ,EAAc,GAAc,OAAU,KAAM,EAExE,OACE,EAAC,MAAD,CACE,GAAI,EACJ,GAAI,GAAM,IAAA,GACV,UAAW,EAAG,EAAE,UAAW,GAAc,EAAE,gBAAiB,EAAW,GAAY,IAAI,EACvF,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAJzC,SAAA,CAMG,CAAC,GACA,EAAC,MAAD,CACE,UAAW,EAAG,EAAE,gBAAiB,GAAc,EAAE,sBAAuB,GAAY,MAAM,EAC1F,MAAO,CAAE,GAAG,EAAa,GAAG,GAAY,MAAO,EAC/C,QAAS,EACT,KAAK,SACL,SAAU,EACV,WAAY,CAAE,SAAU,CAClB,IAAQ,SAAS,EAAe,CACtC,EARF,SAAA,CAUE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAE,eAAgB,GAAY,KAAK,EAAG,MAAO,GAAY,MACzE,SAAA,CACE,CAAA,EACL,EAAC,EAAD,CACE,KAAM,EACN,UAAW,EAAG,EAAE,cAAe,GAAc,EAAE,oBAAqB,GAAY,IAAI,EACpF,MAAO,GAAY,IACpB,CAAA,CACE,CAEP,CAAA,EAAA,EAAC,MAAD,CACE,IAAK,EACL,UAAW,EAAG,EAAE,cAAe,GAAc,EAAE,oBAAqB,GAAY,IAAI,EACpF,MAAO,CAAE,GAAG,EAAW,GAAG,GAAY,IAAK,EAE3C,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAE,mBAAoB,GAAY,SAAS,EACzD,MAAO,GAAY,UACnB,IAAK,EAEJ,UACE,CAAA,CACF,CAAA,CACF,GAET"}
+{"version":3,"file":"accordion.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown as arrowIcon } from '@fortawesome/free-solid-svg-icons';\n\nimport { AccordionStyleType, type AccordionProps } from './accordion.types';\n\nimport defaultStyles from './accordion.module.pcss';\nimport primaryStyles from './accordion.primary.module.pcss';\nimport plainStyles from './accordion.plain.module.pcss';\nimport { useComponentDefaults } from '../configProvider';\n\nconst STYLES_BY_TYPE: Record<AccordionStyleType, typeof defaultStyles> = {\n  [AccordionStyleType.Default]: defaultStyles,\n  [AccordionStyleType.Primary]: primaryStyles,\n  [AccordionStyleType.Plain]: plainStyles,\n};\n\nfunction Accordion(props: AccordionProps): ReactElement {\n  const {\n    id = '',\n    title = '',\n    children = null,\n    expanded = null,\n    onHeaderClicked = () => {},\n    styleType = AccordionStyleType.Default,\n    startOpen = false,\n    hideHeader = false,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Accordion', props);\n  const s = STYLES_BY_TYPE[styleType];\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const bodyInnerRef = useRef<HTMLDivElement>(null);\n\n  const [isExpanded, setIsExpanded] = useState(expanded ?? startOpen);\n  const [bodyHeight, setBodyHeight] = useState<number | null>(null);\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect\n    if (expanded !== null) setIsExpanded(expanded);\n  }, [expanded]);\n\n  useEffect(() => {\n    const el = bodyRef.current;\n    if (el) el.inert = !isExpanded;\n  }, [isExpanded]);\n\n  useEffect(() => {\n    const el = bodyInnerRef.current;\n    if (!el) return;\n    const observer = new ResizeObserver(() => setBodyHeight(el.offsetHeight));\n    observer.observe(el);\n    return () => observer.unobserve(el);\n  }, []);\n\n  function toggleExpanded() {\n    const next = !isExpanded;\n    onHeaderClicked(id, next);\n    if (expanded === null) setIsExpanded(next);\n  }\n\n  const bodyStyle = { height: isExpanded ? (bodyHeight ?? 'auto') : '0px' };\n\n  return (\n    <div\n      {...rest}\n      id={id || undefined}\n      className={cx(s.accordion, isExpanded && s.accordionActive, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      {!hideHeader && (\n        <div\n          className={cx(s.accordionHeader, isExpanded && s.accordionHeaderActive, classNames?.header)}\n          style={slotStyles?.header}\n          onClick={toggleExpanded}\n          role='button'\n          tabIndex={0}\n          onKeyDown={({ key }) => {\n            if (key === 'Enter') toggleExpanded();\n          }}\n        >\n          <div className={cx(s.accordionTitle, classNames?.title)} style={slotStyles?.title}>\n            {title}\n          </div>\n          <FontAwesomeIcon\n            icon={arrowIcon}\n            className={cx(s.accordionIcon, isExpanded && s.accordionIconActive, classNames?.icon)}\n            style={slotStyles?.icon as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n          />\n        </div>\n      )}\n      <div\n        ref={bodyRef}\n        className={cx(s.accordionBody, isExpanded && s.accordionBodyActive, classNames?.body)}\n        style={{ ...bodyStyle, ...slotStyles?.body }}\n      >\n        <div\n          className={cx(s.accordionBodyInner, classNames?.bodyInner)}\n          style={slotStyles?.bodyInner}\n          ref={bodyInnerRef}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Accordion;\n"],"mappings":"whBAYA,IAAM,EAAmE,EACtE,EAAmB,SAAU,GAC7B,EAAmB,SAAU,GAC7B,EAAmB,OAAQ,CAC9B,EAEA,SAAS,EAAU,EAAqC,CACtD,GAAM,CACJ,KAAK,GACL,QAAQ,GACR,WAAW,KACX,WAAW,KACX,sBAAwB,CAAC,EACzB,YAAY,EAAmB,QAC/B,YAAY,GACZ,aAAa,GACb,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,YAAa,CAAK,EACrC,EAAI,EAAe,GACnB,EAAU,EAAuB,IAAI,EACrC,EAAe,EAAuB,IAAI,EAE1C,CAAC,EAAY,GAAiB,EAAS,GAAY,CAAS,EAC5D,CAAC,EAAY,GAAiB,EAAwB,IAAI,EAEhE,MAAgB,CAEV,IAAa,MAAM,EAAc,CAAQ,CAC/C,EAAG,CAAC,CAAQ,CAAC,EAEb,MAAgB,CACd,IAAM,EAAK,EAAQ,QACf,IAAI,EAAG,MAAQ,CAAC,EACtB,EAAG,CAAC,CAAU,CAAC,EAEf,MAAgB,CACd,IAAM,EAAK,EAAa,QACxB,GAAI,CAAC,EAAI,OACT,IAAM,EAAW,IAAI,mBAAqB,EAAc,EAAG,YAAY,CAAC,EAExE,OADA,EAAS,QAAQ,CAAE,MACN,EAAS,UAAU,CAAE,CACpC,EAAG,CAAC,CAAC,EAEL,SAAS,GAAiB,CACxB,IAAM,EAAO,CAAC,EACd,EAAgB,EAAI,CAAI,EACpB,IAAa,MAAM,EAAc,CAAI,CAC3C,CAEA,IAAM,EAAY,CAAE,OAAQ,EAAc,GAAc,OAAU,KAAM,EAExE,OACE,EAAC,MAAD,CACE,GAAI,EACJ,GAAI,GAAM,IAAA,GACV,UAAW,EAAG,EAAE,UAAW,GAAc,EAAE,gBAAiB,EAAW,GAAY,IAAI,EACvF,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAJzC,SAAA,CAMG,CAAC,GACA,EAAC,MAAD,CACE,UAAW,EAAG,EAAE,gBAAiB,GAAc,EAAE,sBAAuB,GAAY,MAAM,EAC1F,MAAO,GAAY,OACnB,QAAS,EACT,KAAK,SACL,SAAU,EACV,WAAY,CAAE,SAAU,CAClB,IAAQ,SAAS,EAAe,CACtC,EARF,SAAA,CAUE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAE,eAAgB,GAAY,KAAK,EAAG,MAAO,GAAY,MACzE,SAAA,CACE,CAAA,EACL,EAAC,EAAD,CACE,KAAM,EACN,UAAW,EAAG,EAAE,cAAe,GAAc,EAAE,oBAAqB,GAAY,IAAI,EACpF,MAAO,GAAY,IACpB,CAAA,CACE,CAEP,CAAA,EAAA,EAAC,MAAD,CACE,IAAK,EACL,UAAW,EAAG,EAAE,cAAe,GAAc,EAAE,oBAAqB,GAAY,IAAI,EACpF,MAAO,CAAE,GAAG,EAAW,GAAG,GAAY,IAAK,EAE3C,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAE,mBAAoB,GAAY,SAAS,EACzD,MAAO,GAAY,UACnB,IAAK,EAEJ,UACE,CAAA,CACF,CAAA,CACF,GAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.module.pcss"],"sourcesContent":[".accordion {\n  transition: margin 0.2s;\n  margin: -1px;\n  color: var(--text-color);\n\n  &-title {\n    width: 100%;\n  }\n\n  &-active {\n    margin: 10px 0;\n  }\n\n  &-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    background: var(--background);\n    border-radius: var(--default-border-radius);\n    border: 1px solid var(--border-color);\n    font-size: 16px;\n    font-weight: 400;\n    transition: all 0.2s;\n\n    &-active {\n      border: 1px solid var(--primary-color);\n      background: var(--background-accent);\n      border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n    }\n  }\n\n  &-body {\n    overflow: hidden;\n    transition: all 0.2s ease;\n    position: relative;\n    border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);\n    border: 1px solid var(--border-color);\n    border-top: none;\n    border-bottom: none;\n\n    &-inner {\n      padding: 16px;\n    }\n\n    &-active {\n      border: 1px solid var(--primary-color);\n      border-top: none;\n    }\n  }\n\n  &-icon {\n    transition: transform 0.2s;\n    transform: rotate(0deg);\n    flex-shrink: 0;\n    width: 16px;\n    height: 16px;\n    color: var(--border-color);\n\n    &-active {\n      transform: rotate(180deg);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"accordion.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.module.pcss"],"sourcesContent":[".accordion {\n  transition: margin 0.2s;\n  margin: -1px;\n  color: var(--text-color);\n\n  &-title {\n    width: 100%;\n  }\n\n  &-active {\n    margin: 0.625em 0;\n  }\n\n  &-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    /* There is no fixed height any more: the header is this padding plus the title's line. */\n    padding: 0.75em 1em;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    background: var(--background);\n    border-radius: var(--default-border-radius);\n    border: 1px solid var(--border-color);\n\n    /* The rest of the accordion measures from the header, so the base is set here. */\n    font-size: var(--default-font-size);\n    font-weight: 400;\n    transition: all 0.2s;\n\n    &-active {\n      border: 1px solid var(--primary-color);\n      background: var(--background-accent);\n      border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n    }\n  }\n\n  &-body {\n    overflow: hidden;\n    transition: all 0.2s ease;\n    position: relative;\n    border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);\n    border: 1px solid var(--border-color);\n    border-top: none;\n    border-bottom: none;\n\n    &-inner {\n      padding: 1em;\n    }\n\n    &-active {\n      border: 1px solid var(--primary-color);\n      border-top: none;\n    }\n  }\n\n  &-icon {\n    transition: transform 0.2s;\n    transform: rotate(0deg);\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    color: var(--border-color);\n\n    &-active {\n      transform: rotate(180deg);\n    }\n  }\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.plain.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.plain.module.pcss"],"sourcesContent":[".accordion {\n  transition: margin 0.2s;\n  margin: -1px;\n\n  &-title {\n    width: 100%;\n  }\n\n  &-active {\n    margin: 10px 0;\n  }\n\n  &-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    border-radius: var(--default-border-radius);\n    font-size: 16px;\n    font-weight: 400;\n    transition: all 0.2s;\n\n    &-active {\n      border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n    }\n  }\n\n  &-body {\n    overflow: hidden;\n    transition: all 0.2s ease;\n    position: relative;\n    border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);\n\n    &-inner {\n      padding: 0;\n    }\n  }\n\n  &-icon {\n    transition: transform 0.2s;\n    transform: rotate(0deg);\n    flex-shrink: 0;\n    width: 16px;\n    height: 16px;\n    color: var(--primary-color);\n\n    &-active {\n      transform: rotate(180deg);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"accordion.plain.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.plain.module.pcss"],"sourcesContent":[".accordion {\n  transition: margin 0.2s;\n  margin: -1px;\n\n  &-title {\n    width: 100%;\n  }\n\n  &-active {\n    margin: 0.625em 0;\n  }\n\n  &-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    border-radius: var(--default-border-radius);\n    font-size: var(--default-font-size);\n    font-weight: 400;\n    transition: all 0.2s;\n\n    &-active {\n      border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n    }\n  }\n\n  &-body {\n    overflow: hidden;\n    transition: all 0.2s ease;\n    position: relative;\n    border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);\n\n    &-inner {\n      padding: 0;\n    }\n  }\n\n  &-icon {\n    transition: transform 0.2s;\n    transform: rotate(0deg);\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    color: var(--primary-color);\n\n    &-active {\n      transform: rotate(180deg);\n    }\n  }\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.primary.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.primary.module.pcss"],"sourcesContent":[".accordion {\n  transition: margin 0.2s;\n  margin: -1px;\n\n  &-title {\n    width: 100%;\n  }\n\n  &-active {\n    margin: 10px 0;\n    border: 2px solid var(--primary-color);\n    border-radius: var(--default-border-radius);\n  }\n\n  &-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    background: var(--background);\n    border-radius: var(--default-border-radius);\n    font-size: 16px;\n    font-weight: 400;\n    transition: all 0.2s;\n\n    &-active {\n      background: var(--background-accent);\n      border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n    }\n  }\n\n  &-body {\n    overflow: hidden;\n    transition: all 0.2s ease;\n    position: relative;\n    border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);\n    border-top: none;\n    border-bottom: none;\n\n    &-inner {\n      padding: 16px;\n    }\n\n    &-active {\n      border-top: none;\n    }\n  }\n\n  &-icon {\n    transition: transform 0.2s;\n    transform: rotate(0deg);\n    flex-shrink: 0;\n    width: 16px;\n    height: 16px;\n    color: var(--primary-color);\n\n    &-active {\n      transform: rotate(180deg);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"accordion.primary.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.primary.module.pcss"],"sourcesContent":[".accordion {\n  transition: margin 0.2s;\n  margin: -1px;\n\n  &-title {\n    width: 100%;\n  }\n\n  &-active {\n    margin: 0.625em 0;\n    border: 2px solid var(--primary-color);\n    border-radius: var(--default-border-radius);\n  }\n\n  &-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    /* There is no fixed height any more: the header is this padding plus the title's line. */\n    padding: 0.75em 1em;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    background: var(--background);\n    border-radius: var(--default-border-radius);\n    font-size: var(--default-font-size);\n    font-weight: 400;\n    transition: all 0.2s;\n\n    &-active {\n      background: var(--background-accent);\n      border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n    }\n  }\n\n  &-body {\n    overflow: hidden;\n    transition: all 0.2s ease;\n    position: relative;\n    border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);\n    border-top: none;\n    border-bottom: none;\n\n    &-inner {\n      padding: 1em;\n    }\n\n    &-active {\n      border-top: none;\n    }\n  }\n\n  &-icon {\n    transition: transform 0.2s;\n    transform: rotate(0deg);\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    color: var(--primary-color);\n\n    &-active {\n      transform: rotate(180deg);\n    }\n  }\n}\n"],"mappings":""}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"badge.module.mjs","names":[],"sources":["../../../../package/common/badge/badge.module.pcss"],"sourcesContent":[".wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  isolation: isolate;\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 1.5em;\n  height: 1.5em;\n  padding: 0 0.375em;\n  border-radius: var(--default-border-radius);\n  font-size: 0.75em;\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  background: var(--badge-bg);\n  color: var(--badge-fg);\n\n  &-dot {\n    min-width: 0.8em;\n    width: 0.8em;\n    height: 0.8em;\n    padding: 0;\n    border-radius: 100%;\n    background: var(--badge-solid);\n\n    &.badge-position-top-right {\n      transform: translate(20%, -20%);\n    }\n\n    &.badge-position-top-left {\n      transform: translate(-20%, -20%);\n    }\n\n    &.badge-position-bottom-right {\n      transform: translate(20%, 20%);\n    }\n\n    &.badge-position-bottom-left {\n      transform: translate(-20%, 20%);\n    }\n  }\n\n  &-overlay {\n    position: absolute;\n    z-index: 1;\n  }\n\n  &-position {\n    &-top-right {\n      top: 0;\n      right: 0;\n      transform: translate(50%, -50%);\n    }\n\n    &-top-left {\n      top: 0;\n      left: 0;\n      transform: translate(-50%, -50%);\n    }\n\n    &-bottom-right {\n      bottom: 0;\n      right: 0;\n      transform: translate(50%, 50%);\n    }\n\n    &-bottom-left {\n      bottom: 0;\n      left: 0;\n      transform: translate(-50%, 50%);\n    }\n  }\n\n  &-style {\n    &-default {\n      --badge-bg: rgb(0 0 0 / 8%);\n      --badge-fg: var(--text-color);\n      --badge-solid: var(--text-dark);\n    }\n\n    &-primary {\n      --badge-bg: var(--primary-color);\n      --badge-fg: var(--text-on-primary);\n      --badge-solid: var(--primary-color);\n    }\n\n    &-success {\n      --badge-bg: var(--success-lighter);\n      --badge-fg: var(--success-color);\n      --badge-solid: var(--success-color);\n    }\n\n    &-info {\n      --badge-bg: var(--info-lighter);\n      --badge-fg: var(--info-color);\n      --badge-solid: var(--info-color);\n    }\n\n    &-warn {\n      --badge-bg: var(--warn-lighter);\n      --badge-fg: var(--warn-color);\n      --badge-solid: var(--warn-color);\n    }\n\n    &-error {\n      --badge-bg: var(--error-lighter);\n      --badge-fg: var(--error-color);\n      --badge-solid: var(--error-color);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"badge.module.mjs","names":[],"sources":["../../../../package/common/badge/badge.module.pcss"],"sourcesContent":[".wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  isolation: isolate;\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 1.5em;\n  height: 1.5em;\n  padding: 0 0.375em;\n  border-radius: var(--default-border-radius);\n  font-size: 0.75em;\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  background: var(--badge-bg);\n\n  /* Must follow the shorthand above, which resets background-image. */\n  background-image: var(--badge-image, none);\n  color: var(--badge-fg);\n\n  &-dot {\n    min-width: 0.8em;\n    width: 0.8em;\n    height: 0.8em;\n    padding: 0;\n    border-radius: 100%;\n    background: var(--badge-solid);\n\n    &.badge-position-top-right {\n      transform: translate(20%, -20%);\n    }\n\n    &.badge-position-top-left {\n      transform: translate(-20%, -20%);\n    }\n\n    &.badge-position-bottom-right {\n      transform: translate(20%, 20%);\n    }\n\n    &.badge-position-bottom-left {\n      transform: translate(-20%, 20%);\n    }\n  }\n\n  &-overlay {\n    position: absolute;\n    z-index: 1;\n  }\n\n  &-position {\n    &-top-right {\n      top: 0;\n      right: 0;\n      transform: translate(50%, -50%);\n    }\n\n    &-top-left {\n      top: 0;\n      left: 0;\n      transform: translate(-50%, -50%);\n    }\n\n    &-bottom-right {\n      bottom: 0;\n      right: 0;\n      transform: translate(50%, 50%);\n    }\n\n    &-bottom-left {\n      bottom: 0;\n      left: 0;\n      transform: translate(-50%, 50%);\n    }\n  }\n\n  &-style {\n    &-default {\n      --badge-bg: rgb(0 0 0 / 8%);\n      --badge-fg: var(--text-color);\n      --badge-solid: var(--text-dark);\n    }\n\n    &-primary {\n      --badge-bg: var(--primary-color);\n      --badge-fg: var(--text-on-primary);\n      --badge-solid: var(--primary-color);\n\n      /* Set per variant, not on .badge: the other variants paint their own colours, and the dot\n         (0.8em) is too small to show a ramp, so it keeps --badge-solid on its own. */\n      --badge-image: var(--primary-gradient, none);\n    }\n\n    &-success {\n      --badge-bg: var(--success-lighter);\n      --badge-fg: var(--success-color);\n      --badge-solid: var(--success-color);\n    }\n\n    &-info {\n      --badge-bg: var(--info-lighter);\n      --badge-fg: var(--info-color);\n      --badge-solid: var(--info-color);\n    }\n\n    &-warn {\n      --badge-bg: var(--warn-lighter);\n      --badge-fg: var(--warn-color);\n      --badge-solid: var(--warn-color);\n    }\n\n    &-error {\n      --badge-bg: var(--error-lighter);\n      --badge-fg: var(--error-color);\n      --badge-solid: var(--error-color);\n    }\n  }\n}\n"],"mappings":""}

package/dist/esm/common/bodyEnd/bodyEnd.mjs

@@ -1,2 +1,2 @@
-import{createPortal as e}from"react-dom";function t({children:t=null}){let n=document.getElementById(`bodyEnd`);return n?e(t,n):null}export{t as default};
+import{ThemeVariablesContext as e}from"../themeProvider/themeVariablesContext.mjs";import{useContext as t}from"react";import{jsx as n}from"react/jsx-runtime";import{createPortal as r}from"react-dom";function i({children:i=null}){let a=t(e),o=document.getElementById(`bodyEnd`);return o?r(a?n(`div`,{style:{display:`contents`,...a},children:i}):i,o):null}export{i as default};
 //# sourceMappingURL=bodyEnd.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"bodyEnd.mjs","names":[],"sources":["../../../../package/common/bodyEnd/bodyEnd.tsx"],"sourcesContent":["import { createPortal } from 'react-dom';\nimport type { ReactElement } from 'react';\n\nimport type { BodyEndProps } from './bodyEnd.types';\n\n// Module-scoped ambient typing for the bundler-replaced NODE_ENV guard below.\n// Browsers don't define `process`, so the value is read defensively at runtime;\n// bundlers (Vite/webpack) still statically replace the `process.env.NODE_ENV`\n// token. Declared at module scope (not globally), it isn't emitted into the\n// .d.ts and can't clash with a consumer's @types/node.\ndeclare const process: { env: { NODE_ENV?: string } };\n\nfunction BodyEnd({ children = null }: BodyEndProps): ReactElement | null {\n  const target = document.getElementById('bodyEnd');\n  if (!target) {\n    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {\n      console.error('[BodyEnd] No element with id=\"bodyEnd\" found. Add <div id=\"bodyEnd\"></div> to your app root.');\n    }\n    return null;\n  }\n  return createPortal(children, target);\n}\n\nexport default BodyEnd;\n"],"mappings":"yCAYA,SAAS,EAAQ,CAAE,WAAW,MAA2C,CACvE,IAAM,EAAS,SAAS,eAAe,SAAS,EAOhD,OANK,EAME,EAAa,EAAU,CAAM,EAF3B,IAGX"}
+{"version":3,"file":"bodyEnd.mjs","names":[],"sources":["../../../../package/common/bodyEnd/bodyEnd.tsx"],"sourcesContent":["import { createPortal } from 'react-dom';\nimport { useContext, type CSSProperties, type ReactElement } from 'react';\n\nimport { ThemeVariablesContext } from '../themeProvider/themeVariablesContext';\nimport type { BodyEndProps } from './bodyEnd.types';\n\n// Module-scoped ambient typing for the bundler-replaced NODE_ENV guard below.\n// Browsers don't define `process`, so the value is read defensively at runtime;\n// bundlers (Vite/webpack) still statically replace the `process.env.NODE_ENV`\n// token. Declared at module scope (not globally), it isn't emitted into the\n// .d.ts and can't clash with a consumer's @types/node.\ndeclare const process: { env: { NODE_ENV?: string } };\n\nfunction BodyEnd({ children = null }: BodyEndProps): ReactElement | null {\n  const themeVariables = useContext(ThemeVariablesContext);\n  const target = document.getElementById('bodyEnd');\n  if (!target) {\n    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {\n      console.error('[BodyEnd] No element with id=\"bodyEnd\" found. Add <div id=\"bodyEnd\"></div> to your app root.');\n    }\n    return null;\n  }\n  /*\n   * Carry the nearest theme through the portal. `display: contents` is what makes this safe:\n   * the wrapper generates no box, so positioning, stacking and clipping are untouched —\n   * escaping clipping ancestors is the whole point of this component — while custom\n   * properties still inherit, because inheritance follows the element tree, not the box tree.\n   *\n   * Variables this theme leaves unset still fall through to whatever wraps #bodyEnd, which\n   * is the same cascade the children would have seen rendered in place.\n   */\n  if (!themeVariables) return createPortal(children, target);\n  return createPortal(\n    <div style={{ display: 'contents', ...themeVariables } as CSSProperties}>{children}</div>,\n    target,\n  );\n}\n\nexport default BodyEnd;\n"],"mappings":"uMAaA,SAAS,EAAQ,CAAE,WAAW,MAA2C,CACvE,IAAM,EAAiB,EAAW,CAAqB,EACjD,EAAS,SAAS,eAAe,SAAS,EAiBhD,OAhBK,EAgBE,EADF,EAEH,EAAC,MAAD,CAAK,MAAO,CAAE,QAAS,WAAY,GAAG,CAAe,EAAqB,UAAc,CAAA,EAFjD,EAGvC,CAHuD,EAXhD,IAgBX"}

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

@@ -1,2 +1,2 @@
-var e=`button_wYLPJ`,t=`button-notAllowed_xGT-E`,n=`button-loading-icon_1pTTz`,r=`button-content_Q-0-4`,i=`button-loading_TY6y7`,a=`button-loading-container_pMSta`,o=`button-withIcon_IXEKA`,s=`button-style-default_JmAqD`,c=`button-style-primary_Ra5i-`,l=`button-style-delete_jpTCf`,u=`button-background_9Vfo5`,d=`button-size-default_N4HG9`,f=`button-size-small_mn6jE`,p=`button-size-small-background_KILXc`,m=`button-size-medium_gNVDM`,h=`button-size-large_xSIcS`,g=`button-size-icon_pkqwl`,_=`button-ripple_UGtt8`,v={button:e,"button-notAllowed":`button-notAllowed_xGT-E`,buttonNotAllowed:t,"button-loading-icon":`button-loading-icon_1pTTz`,buttonLoadingIcon:n,"button-content":`button-content_Q-0-4`,buttonContent:r,"button-loading":`button-loading_TY6y7`,buttonLoading:i,"button-loading-container":`button-loading-container_pMSta`,buttonLoadingContainer:a,"button-withIcon":`button-withIcon_IXEKA`,buttonWithIcon:o,"button-style-default":`button-style-default_JmAqD`,buttonStyleDefault:s,"button-style-primary":`button-style-primary_Ra5i-`,buttonStylePrimary:c,"button-style-delete":`button-style-delete_jpTCf`,buttonStyleDelete:l,"button-background":`button-background_9Vfo5`,buttonBackground:u,"button-size-default":`button-size-default_N4HG9`,buttonSizeDefault:d,"button-size-small":`button-size-small_mn6jE`,buttonSizeSmall:f,"button-size-small-background":`button-size-small-background_KILXc`,buttonSizeSmallBackground:p,"button-size-medium":`button-size-medium_gNVDM`,buttonSizeMedium:m,"button-size-large":`button-size-large_xSIcS`,buttonSizeLarge:h,"button-size-icon":`button-size-icon_pkqwl`,buttonSizeIcon:g,"button-ripple":`button-ripple_UGtt8`,buttonRipple:_};export{e as button,u as buttonBackground,r as buttonContent,i as buttonLoading,a as buttonLoadingContainer,n as buttonLoadingIcon,t as buttonNotAllowed,_ as buttonRipple,d as buttonSizeDefault,g as buttonSizeIcon,h as buttonSizeLarge,m as buttonSizeMedium,f as buttonSizeSmall,p as buttonSizeSmallBackground,s as buttonStyleDefault,l as buttonStyleDelete,c as buttonStylePrimary,o as buttonWithIcon,v as default};
+var e=`button_wYLPJ`,t=`button-notAllowed_xGT-E`,n=`button-loading-icon_1pTTz`,r=`button-content_Q-0-4`,i=`button-loading_TY6y7`,a=`button-loading-container_pMSta`,o=`button-withIcon_IXEKA`,s=`button-style-default_JmAqD`,c=`button-style-primary_Ra5i-`,l=`button-style-delete_jpTCf`,u=`button-background_9Vfo5`,d=`button-size-default_N4HG9`,f=`button-size-small_mn6jE`,p=`button-size-medium_gNVDM`,m=`button-size-large_xSIcS`,h=`button-size-icon_pkqwl`,g=`button-ripple_UGtt8`,_={button:e,"button-notAllowed":`button-notAllowed_xGT-E`,buttonNotAllowed:t,"button-loading-icon":`button-loading-icon_1pTTz`,buttonLoadingIcon:n,"button-content":`button-content_Q-0-4`,buttonContent:r,"button-loading":`button-loading_TY6y7`,buttonLoading:i,"button-loading-container":`button-loading-container_pMSta`,buttonLoadingContainer:a,"button-withIcon":`button-withIcon_IXEKA`,buttonWithIcon:o,"button-style-default":`button-style-default_JmAqD`,buttonStyleDefault:s,"button-style-primary":`button-style-primary_Ra5i-`,buttonStylePrimary:c,"button-style-delete":`button-style-delete_jpTCf`,buttonStyleDelete:l,"button-background":`button-background_9Vfo5`,buttonBackground:u,"button-size-default":`button-size-default_N4HG9`,buttonSizeDefault:d,"button-size-small":`button-size-small_mn6jE`,buttonSizeSmall:f,"button-size-medium":`button-size-medium_gNVDM`,buttonSizeMedium:p,"button-size-large":`button-size-large_xSIcS`,buttonSizeLarge:m,"button-size-icon":`button-size-icon_pkqwl`,buttonSizeIcon:h,"button-ripple":`button-ripple_UGtt8`,buttonRipple:g};export{e as button,u as buttonBackground,r as buttonContent,i as buttonLoading,a as buttonLoadingContainer,n as buttonLoadingIcon,t as buttonNotAllowed,g as buttonRipple,d as buttonSizeDefault,h as buttonSizeIcon,m as buttonSizeLarge,p as buttonSizeMedium,f as buttonSizeSmall,s as buttonStyleDefault,l as buttonStyleDelete,c as buttonStylePrimary,o as buttonWithIcon,_ as default};
 //# sourceMappingURL=button.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.module.mjs","names":[],"sources":["../../../../package/common/button/button.module.pcss"],"sourcesContent":[".button {\n  appearance: none;\n  -webkit-appearance: none;\n  box-sizing: border-box;\n  font-size: 16px;\n  background: transparent;\n  color: var(--text-color);\n  border: 1px solid transparent;\n  padding: 0;\n  font-family: var(--default-font);\n  border-radius: var(--default-border-radius);\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  position: relative;\n  overflow: hidden;\n  min-width: min-content;\n\n  &-notAllowed {\n    cursor: not-allowed;\n    filter: opacity(0.8);\n  }\n\n  &-loading-icon {\n    width: 100% !important;\n    height: 100% !important;\n  }\n\n  &-content {\n    position: relative;\n    white-space: break-spaces;\n\n    div {\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n  }\n\n  &-loading {\n    visibility: hidden;\n\n    &-container {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n\n  &-withIcon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--spacing-s);\n  }\n\n  &-style {\n    &-default {\n      background: var(--button-default-background, transparent);\n      color: var(--button-default-color, var(--text-color));\n      border: var(--button-default-border, 1px solid transparent);\n    }\n\n    &-primary {\n      background: var(--primary-color);\n      color: var(--text-color);\n      color: var(--text-on-primary);\n\n      .button-loading-icon {\n        stroke: var(--text-on-primary);\n      }\n    }\n\n    &-delete {\n      background: var(--error-color);\n      color: var(--text-on-delete);\n\n      .button-loading-icon {\n        stroke: var(--text-on-delete);\n      }\n    }\n  }\n\n  &-background {\n    display: block;\n    padding: 8px 12px;\n  }\n\n  &-size {\n    &-default {\n      font-size: 16px;\n    }\n\n    &-small {\n      /* Small button is same as default for now */\n      font-size: 12px;\n\n      &-background {\n        display: block;\n        padding: 0;\n      }\n    }\n\n    &-medium {\n      /* Medium button is same as default for now */\n      font-size: 16px;\n    }\n\n    &-large {\n      /* Large button is same as default for now */\n      font-size: 20px;\n    }\n\n    /* Square, padding-free button for a lone icon; the caller sets the box size. */\n    &-icon {\n      display: inline-flex;\n\n      /* Inherits, unlike the other sizes: a hardcoded px value would have to be out-specified\n         from another stylesheet, a specificity tie decided only by bundle order. */\n      font-size: inherit;\n\n      .button-ripple,\n      .button-background,\n      .button-content {\n        display: flex;\n        flex: 1;\n        align-items: center;\n        justify-content: center;\n        padding: 0;\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"button.module.mjs","names":[],"sources":["../../../../package/common/button/button.module.pcss"],"sourcesContent":[".button {\n  appearance: none;\n  -webkit-appearance: none;\n  box-sizing: border-box;\n  font-size: var(--default-font-size);\n  background: transparent;\n  color: var(--text-color);\n  border: 1px solid transparent;\n  padding: 0;\n  font-family: var(--default-font);\n  border-radius: var(--default-border-radius);\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  position: relative;\n  overflow: hidden;\n  min-width: min-content;\n\n  &-notAllowed {\n    cursor: not-allowed;\n    filter: opacity(0.8);\n  }\n\n  &-loading-icon {\n    width: 100% !important;\n    height: 100% !important;\n  }\n\n  &-content {\n    position: relative;\n    white-space: break-spaces;\n\n    div {\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n  }\n\n  &-loading {\n    visibility: hidden;\n\n    &-container {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n\n  &-withIcon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5em;\n  }\n\n  &-style {\n    &-default {\n      background: var(--button-default-background, transparent);\n      color: var(--button-default-color, var(--text-color));\n      border: var(--button-default-border, 1px solid transparent);\n    }\n\n    &-primary {\n      background: var(--primary-color);\n\n      /* Must follow the shorthand above, which resets background-image. */\n      background-image: var(--primary-gradient, none);\n      color: var(--text-color);\n      color: var(--text-on-primary);\n\n      .button-loading-icon {\n        stroke: var(--text-on-primary);\n      }\n    }\n\n    &-delete {\n      background: var(--error-color);\n      color: var(--text-on-delete);\n\n      .button-loading-icon {\n        stroke: var(--text-on-delete);\n      }\n    }\n  }\n\n  &-background {\n    display: block;\n    padding: 0.5em 0.75em;\n  }\n\n  /* Multiples of the theme's base, not em: an em on font-size resolves against the parent,\n     so these would follow whatever the button sits in rather than the theme. */\n  &-size {\n    &-default {\n      font-size: var(--default-font-size);\n    }\n\n    &-small {\n      font-size: calc(var(--default-font-size) * 0.75);\n    }\n\n    &-medium {\n      /* Medium button is same as default for now */\n      font-size: var(--default-font-size);\n    }\n\n    &-large {\n      font-size: calc(var(--default-font-size) * 1.25);\n    }\n\n    /* Square, padding-free button for a lone icon; the caller sets the box size. */\n    &-icon {\n      display: inline-flex;\n\n      /* Inherits, unlike the other sizes: a hardcoded px value would have to be out-specified\n         from another stylesheet, a specificity tie decided only by bundle order. */\n      font-size: inherit;\n\n      .button-ripple,\n      .button-background,\n      .button-content {\n        display: flex;\n        flex: 1;\n        align-items: center;\n        justify-content: center;\n        padding: 0;\n      }\n    }\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../ripple/ripple.mjs";import n from"../interactableDiv/index.mjs";import{CardStyleType as r}from"./card.types.mjs";import i from"./card.module.mjs";import{useRef as a}from"react";import o from"classnames";import{jsx as s}from"react/jsx-runtime";var c={elevated:i.cardStyleElevated,outlined:i.cardStyleOutlined,filled:i.cardStyleFilled};function l(l){let{className:u=void 0,children:d=null,styleType:f=r.Elevated,onClick:p=void 0,tabIndex:m=null,hoverEffect:h=void 0,style:g=void 0,autoGap:_=!0,clip:v=!1,onKeyDown:y,...b}=e(`Card`,l),x=!!p,S=a(null);function C(e){x&&(e.key===`Enter`||e.key===` `)&&S.current?.addRipple(),y?.(e)}return s(n,{...b,className:o(i.card,c[f],v&&i.cardClip,x&&i.cardInteractable,(x&&h!==!1||h)&&i.cardHover,u),onClick:p,onKeyDown:C,tabIndex:m??(x?0:null),style:g,children:s(t,{ref:S,disabled:!x,className:o(i.cardPadding,_&&i.cardGaps),style:{borderRadius:`inherit`},children:d})})}export{l as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../ripple/ripple.mjs";import{isSelfActivation as n}from"../utils/activationKey.mjs";import r from"../interactableDiv/index.mjs";import{CardStyleType as i}from"./card.types.mjs";import a from"./card.module.mjs";import{useRef as o}from"react";import s from"classnames";import{jsx as c}from"react/jsx-runtime";var l={elevated:a.cardStyleElevated,outlined:a.cardStyleOutlined,filled:a.cardStyleFilled};function u(u){let{className:d=void 0,children:f=null,styleType:p=i.Elevated,onClick:m=void 0,tabIndex:h=null,hoverEffect:g=void 0,style:_=void 0,autoGap:v=!0,clip:y=!1,onKeyDown:b,...x}=e(`Card`,u),S=!!m,C=o(null);function w(e){S&&n(e)&&C.current?.addRipple(),b?.(e)}return c(r,{...x,className:s(a.card,l[p],y&&a.cardClip,S&&a.cardInteractable,(S&&g!==!1||g)&&a.cardHover,d),onClick:m,onKeyDown:w,tabIndex:h??(S?0:null),style:_,children:c(t,{ref:C,disabled:!S,className:s(a.cardPadding,v&&a.cardGaps),style:{borderRadius:`inherit`},children:f})})}export{u as default};
 //# sourceMappingURL=Card.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.mjs","names":[],"sources":["../../../../package/common/card/Card.tsx"],"sourcesContent":["import cx from 'classnames';\nimport React, { useRef } from 'react';\n\nimport { CardStyleType, type CardProps } from './card.types';\nimport styles from './card.module.pcss';\nimport InteractableDiv from '../interactableDiv';\nimport Ripple from '../ripple';\nimport type { RippleHandle } from '../ripple';\nimport { useComponentDefaults } from '../configProvider';\n\nconst CLASS_BY_STYLE: Record<CardStyleType, string> = {\n  elevated: styles.cardStyleElevated,\n  outlined: styles.cardStyleOutlined,\n  filled: styles.cardStyleFilled,\n};\n\nfunction Card(props: CardProps) {\n  const {\n    className = undefined,\n    children = null,\n    styleType = CardStyleType.Elevated,\n    onClick = undefined,\n    tabIndex = null,\n    hoverEffect = undefined,\n    style = undefined,\n    autoGap = true,\n    clip = false,\n    onKeyDown: onKeyDownProp,\n    ...rest\n  } = useComponentDefaults('Card', props);\n  const isInteractable = !!onClick;\n\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 (isInteractable && (event.key === 'Enter' || event.key === ' ')) rippleRef.current?.addRipple();\n    onKeyDownProp?.(event);\n  }\n\n  return (\n    <InteractableDiv\n      {...rest}\n      className={cx(\n        styles.card,\n        CLASS_BY_STYLE[styleType],\n        clip && styles.cardClip,\n        isInteractable && styles.cardInteractable,\n        ((isInteractable && hoverEffect !== false) || hoverEffect) && styles.cardHover,\n        className,\n      )}\n      onClick={onClick}\n      onKeyDown={handleKeyDown}\n      tabIndex={tabIndex ?? (isInteractable ? 0 : null)}\n      style={style}\n    >\n      <Ripple\n        ref={rippleRef}\n        disabled={!isInteractable}\n        className={cx(styles.cardPadding, autoGap && styles.cardGaps)}\n        style={{ borderRadius: 'inherit' }}\n      >\n        {children}\n      </Ripple>\n    </InteractableDiv>\n  );\n}\n\nexport default Card;\n"],"mappings":"qVAUA,IAAM,EAAgD,CACpD,SAAU,EAAO,kBACjB,SAAU,EAAO,kBACjB,OAAQ,EAAO,eACjB,EAEA,SAAS,EAAK,EAAkB,CAC9B,GAAM,CACJ,YAAY,IAAA,GACZ,WAAW,KACX,YAAY,EAAc,SAC1B,UAAU,IAAA,GACV,WAAW,KACX,cAAc,IAAA,GACd,QAAQ,IAAA,GACR,UAAU,GACV,OAAO,GACP,UAAW,EACX,GAAG,GACD,EAAqB,OAAQ,CAAK,EAChC,EAAiB,CAAC,CAAC,EAEnB,EAAY,EAAqB,IAAI,EAI3C,SAAS,EAAc,EAA4C,CAC7D,IAAmB,EAAM,MAAQ,SAAW,EAAM,MAAQ,MAAM,EAAU,SAAS,UAAU,EACjG,IAAgB,CAAK,CACvB,CAEA,OACE,EAAC,EAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,KACP,EAAe,GACf,GAAQ,EAAO,SACf,GAAkB,EAAO,kBACvB,GAAkB,IAAgB,IAAU,IAAgB,EAAO,UACrE,CACF,EACS,UACT,UAAW,EACX,SAAU,IAAa,EAAiB,EAAI,MACrC,QAEP,SAAA,EAAC,EAAD,CACE,IAAK,EACL,SAAU,CAAC,EACX,UAAW,EAAG,EAAO,YAAa,GAAW,EAAO,QAAQ,EAC5D,MAAO,CAAE,aAAc,SAAU,EAEhC,UACK,CAAA,CACO,CAAA,CAErB"}
+{"version":3,"file":"Card.mjs","names":[],"sources":["../../../../package/common/card/Card.tsx"],"sourcesContent":["import cx from 'classnames';\nimport React, { useRef } from 'react';\n\nimport { CardStyleType, type CardProps } from './card.types';\nimport styles from './card.module.pcss';\nimport InteractableDiv from '../interactableDiv';\nimport Ripple from '../ripple';\nimport type { RippleHandle } from '../ripple';\nimport { useComponentDefaults } from '../configProvider';\nimport { isSelfActivation } from '../utils/activationKey';\n\nconst CLASS_BY_STYLE: Record<CardStyleType, string> = {\n  elevated: styles.cardStyleElevated,\n  outlined: styles.cardStyleOutlined,\n  filled: styles.cardStyleFilled,\n};\n\nfunction Card(props: CardProps) {\n  const {\n    className = undefined,\n    children = null,\n    styleType = CardStyleType.Elevated,\n    onClick = undefined,\n    tabIndex = null,\n    hoverEffect = undefined,\n    style = undefined,\n    autoGap = true,\n    clip = false,\n    onKeyDown: onKeyDownProp,\n    ...rest\n  } = useComponentDefaults('Card', props);\n  const isInteractable = !!onClick;\n\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 (isInteractable && isSelfActivation(event)) rippleRef.current?.addRipple();\n    onKeyDownProp?.(event);\n  }\n\n  return (\n    <InteractableDiv\n      {...rest}\n      className={cx(\n        styles.card,\n        CLASS_BY_STYLE[styleType],\n        clip && styles.cardClip,\n        isInteractable && styles.cardInteractable,\n        ((isInteractable && hoverEffect !== false) || hoverEffect) && styles.cardHover,\n        className,\n      )}\n      onClick={onClick}\n      onKeyDown={handleKeyDown}\n      tabIndex={tabIndex ?? (isInteractable ? 0 : null)}\n      style={style}\n    >\n      <Ripple\n        ref={rippleRef}\n        disabled={!isInteractable}\n        className={cx(styles.cardPadding, autoGap && styles.cardGaps)}\n        style={{ borderRadius: 'inherit' }}\n      >\n        {children}\n      </Ripple>\n    </InteractableDiv>\n  );\n}\n\nexport default Card;\n"],"mappings":"mZAWA,IAAM,EAAgD,CACpD,SAAU,EAAO,kBACjB,SAAU,EAAO,kBACjB,OAAQ,EAAO,eACjB,EAEA,SAAS,EAAK,EAAkB,CAC9B,GAAM,CACJ,YAAY,IAAA,GACZ,WAAW,KACX,YAAY,EAAc,SAC1B,UAAU,IAAA,GACV,WAAW,KACX,cAAc,IAAA,GACd,QAAQ,IAAA,GACR,UAAU,GACV,OAAO,GACP,UAAW,EACX,GAAG,GACD,EAAqB,OAAQ,CAAK,EAChC,EAAiB,CAAC,CAAC,EAEnB,EAAY,EAAqB,IAAI,EAI3C,SAAS,EAAc,EAA4C,CAC7D,GAAkB,EAAiB,CAAK,GAAG,EAAU,SAAS,UAAU,EAC5E,IAAgB,CAAK,CACvB,CAEA,OACE,EAAC,EAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,KACP,EAAe,GACf,GAAQ,EAAO,SACf,GAAkB,EAAO,kBACvB,GAAkB,IAAgB,IAAU,IAAgB,EAAO,UACrE,CACF,EACS,UACT,UAAW,EACX,SAAU,IAAa,EAAiB,EAAI,MACrC,QAEP,SAAA,EAAC,EAAD,CACE,IAAK,EACL,SAAU,CAAC,EACX,UAAW,EAAG,EAAO,YAAa,GAAW,EAAO,QAAQ,EAC5D,MAAO,CAAE,aAAc,SAAU,EAEhC,UACK,CAAA,CACO,CAAA,CAErB"}

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: 16px;\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: 16px;\n  align-items: center;\n\n  &-thumbnail {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 40px;\n    height: 40px;\n    background: rgb(0 0 0 / 8%);\n    border-radius: 40px;\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: 4px;\n    overflow: hidden;\n\n    &-main {\n      font-size: 18px;\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.cardMedia {\n  width: calc(100% + 32px);\n  margin: 0 -16px;\n}\n\n.cardActions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\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"],"mappings":""}

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=`17px`,height:S=`17px`,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: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`,{style:{width:x,height:S},children:c(t,{className:r.checkboxLoadingSpinner})}):l(`div`,{style:{width:x,height:S,...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`,width:`calc(${x} + 1px)`,height:`calc(${S} + 1px)`,...T?{style:{background:T}}:{},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};
+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 = '17px',\n    height = '17px',\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      style={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 style={{ width, height }}>\n            <SpinnerLoading className={styles.checkboxLoadingSpinner} />\n          </div>\n        ) : (\n          <div\n            style={{ width, height, ...slotStyles?.checkmark }}\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              width={`calc(${width} + 1px)`}\n              height={`calc(${height} + 1px)`}\n              {...(background ? { style: { background } } : {})}\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,QAAQ,OACR,SAAS,OACT,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,EACO,QACP,QAAS,EACT,WAAa,GAAM,CACb,EAAE,MAAQ,SAAS,EAAa,CAAC,CACvC,EACA,KAAK,WACL,eAAc,EACd,gBAAe,GAAY,IAAA,GACjB,WAlBZ,SAAA,CAoBE,EAAC,MAAD,CACS,QACP,UAAW,EAAG,EAAO,aAAc,EAAY,EAAO,gBAAkB,KAAM,GAAY,IAAI,EAC9F,MAAO,GAAY,KAElB,SAAA,EACC,EAAC,MAAD,CAAK,MAAO,CAAE,QAAO,QAAO,EAC1B,SAAA,EAAC,EAAD,CAAgB,UAAW,EAAO,sBAAyB,CAAA,CACxD,CAAA,EAEL,EAAC,MAAD,CACE,MAAO,CAAE,QAAO,SAAQ,GAAG,GAAY,SAAU,EACjD,UAAW,EACT,EAAO,kBACP,GAAgB,EAAO,yBACvB,GAAY,SACd,EANF,SAAA,CAQE,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,kBACR,MAAO,QAAQ,EAAM,SACrB,OAAQ,QAAQ,EAAO,SACvB,GAAK,EAAa,CAAE,MAAO,CAAE,YAAW,CAAE,EAAI,CAAC,EAE/C,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":"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"}

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-spinner_XzXt4`,i=`checkbox-pointer_XnO8e`,a=`checkbox-disabled_ML2rR`,o=`checkbox-checkmark_Xclv9`,s=`checkbox-checkmark-checked_mD4FI`,c={checkbox:e,"checkbox-icon":`checkbox-icon_7O0Hm`,checkboxIcon:t,"checkbox-loading":`checkbox-loading_4t2-w`,checkboxLoading:n,"checkbox-loading-spinner":`checkbox-loading-spinner_XzXt4`,checkboxLoadingSpinner:r,"checkbox-pointer":`checkbox-pointer_XnO8e`,checkboxPointer:i,"checkbox-disabled":`checkbox-disabled_ML2rR`,checkboxDisabled:a,"checkbox-checkmark":`checkbox-checkmark_Xclv9`,checkboxCheckmark:o,"checkbox-checkmark-checked":`checkbox-checkmark-checked_mD4FI`,checkboxCheckmarkChecked:s};export{e as checkbox,o as checkboxCheckmark,s as checkboxCheckmarkChecked,a as checkboxDisabled,t as checkboxIcon,n as checkboxLoading,r as checkboxLoadingSpinner,i as checkboxPointer,c as default};
+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  user-select: none;\n  display: flex;\n  align-items: center;\n  column-gap: 10px;\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: #a3a9b9;\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    /* width: 16px;\n        height: 16px; */\n  }\n\n  &-loading {\n    background: transparent;\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    border: 1.8px solid var(--border-color);\n    border-radius: var(--checkmark-radius);\n    position: relative;\n\n    svg {\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      background: var(--primary-color);\n      transform: scale(0);\n      box-sizing: content-box;\n      padding: 2px;\n      border-radius: var(--default-border-radius);\n    }\n\n    &-checked {\n      svg {\n        stroke-dashoffset: 0;\n        transform: scale(1) translate(-3px, -3px);\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"],"mappings":""}

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

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../ripple/ripple.mjs";import n from"../interactableDiv/index.mjs";import r from"../actionIcon/actionIcon.mjs";import{ChipStyleType as i}from"./chip.types.mjs";import a from"./chip.module.mjs";import{useMemo as o,useRef as s}from"react";import c from"classnames";import{faXmarkCircle as l}from"@fortawesome/free-solid-svg-icons";import{jsx as u,jsxs as d}from"react/jsx-runtime";var f={default:a.chipStyleDefault,primary:a.chipStylePrimary,info:a.chipStyleInfo,warn:a.chipStyleWarn,error:a.chipStyleError};function p(p){let{className:m=``,thumbnail:h=``,text:g=``,styleType:_=i.Default,showRemoveIcon:v=!1,removeLabel:y=`Remove`,onClick:b,onRemove:x,...S}=e(`Chip`,p),C=s(null);function w(e){b&&(e.key===`Enter`||e.key===` `)&&C.current?.addRipple()}let T=o(()=>{if(typeof h==`string`&&h.startsWith(`http`))return h},[h]);return u(n,{...S,className:c(a.chip,f[_],b&&a.chipClickable,m),onClick:b,onKeyDown:w,children:u(t,{ref:C,disabled:!b,style:{borderRadius:`inherit`},children:d(`div`,{className:a.chipInner,children:[h&&u(`div`,{className:a.chipThumbnail,style:T?{backgroundImage:`url(${T})`}:{},children:!T&&h}),u(`div`,{className:a.chipText,children:g}),v&&u(r,{icon:l,"aria-label":y,onClick:e=>{e.stopPropagation(),x?.()}})]})})})}export{p as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../ripple/ripple.mjs";import{isSelfActivation as n}from"../utils/activationKey.mjs";import r from"../interactableDiv/index.mjs";import i from"../actionIcon/actionIcon.mjs";import{ChipStyleType as a}from"./chip.types.mjs";import o from"./chip.module.mjs";import{useMemo as s,useRef as c}from"react";import l from"classnames";import{faXmarkCircle as u}from"@fortawesome/free-solid-svg-icons";import{jsx as d,jsxs as f}from"react/jsx-runtime";var p={default:o.chipStyleDefault,primary:o.chipStylePrimary,info:o.chipStyleInfo,warn:o.chipStyleWarn,error:o.chipStyleError};function m(m){let{className:h=``,thumbnail:g=``,text:_=``,styleType:v=a.Default,showRemoveIcon:y=!1,removeLabel:b=`Remove`,onClick:x,onRemove:S,...C}=e(`Chip`,m),w=c(null);function T(e){x&&n(e)&&w.current?.addRipple()}let E=s(()=>{if(typeof g==`string`&&g.startsWith(`http`))return g},[g]);return d(r,{...C,className:l(o.chip,p[v],x&&o.chipClickable,h),onClick:x,onKeyDown:T,children:d(t,{ref:w,disabled:!x,style:{borderRadius:`inherit`},children:f(`div`,{className:o.chipInner,children:[g&&d(`div`,{className:o.chipThumbnail,style:E?{backgroundImage:`url(${E})`}:{},children:!E&&g}),d(`div`,{className:o.chipText,children:_}),y&&d(i,{icon:u,"aria-label":b,onClick:e=>{e.stopPropagation(),S?.()}})]})})})}export{m 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 { useComponentDefaults } from '../configProvider';\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\nfunction Chip(props: ChipProps) {\n  const {\n    className = '',\n    thumbnail = '',\n    text = '',\n    styleType = ChipStyleType.Default,\n    showRemoveIcon = false,\n    removeLabel = 'Remove',\n    onClick,\n    onRemove,\n    ...rest\n  } = useComponentDefaults('Chip', props);\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 && (event.key === 'Enter' || event.key === ' ')) 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(styles.chip, CLASS_BY_STYLE[styleType], onClick && styles.chipClickable, className)}\n      onClick={onClick}\n      onKeyDown={handleKeyDown}\n    >\n      <Ripple ref={rippleRef} disabled={!onClick} style={{ borderRadius: 'inherit' }}>\n        <div className={styles.chipInner}>\n          {thumbnail && (\n            <div\n              className={styles.chipThumbnail}\n              style={thumbnailUrl ? { backgroundImage: `url(${thumbnailUrl})` } : {}}\n            >\n              {!thumbnailUrl && thumbnail}\n            </div>\n          )}\n          <div className={styles.chipText}>{text}</div>\n          {showRemoveIcon && (\n            <ActionIcon\n              icon={faXmarkCircle}\n              aria-label={removeLabel}\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":"0dAaA,IAAM,EAAgD,CACpD,QAAS,EAAO,iBAChB,QAAS,EAAO,iBAChB,KAAM,EAAO,cACb,KAAM,EAAO,cACb,MAAO,EAAO,cAChB,EAEA,SAAS,EAAK,EAAkB,CAC9B,GAAM,CACJ,YAAY,GACZ,YAAY,GACZ,OAAO,GACP,YAAY,EAAc,QAC1B,iBAAiB,GACjB,cAAc,SACd,UACA,WACA,GAAG,GACD,EAAqB,OAAQ,CAAK,EAChC,EAAY,EAAqB,IAAI,EAI3C,SAAS,EAAc,EAA4C,CAC7D,IAAY,EAAM,MAAQ,SAAW,EAAM,MAAQ,MAAM,EAAU,SAAS,UAAU,CAC5F,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,EAAG,EAAO,KAAM,EAAe,GAAY,GAAW,EAAO,cAAe,CAAS,EACvF,UACT,UAAW,EAEX,SAAA,EAAC,EAAD,CAAQ,IAAK,EAAW,SAAU,CAAC,EAAS,MAAO,CAAE,aAAc,SAAU,EAC3E,SAAA,EAAC,MAAD,CAAK,UAAW,EAAO,UAAvB,SAAA,CACG,GACC,EAAC,MAAD,CACE,UAAW,EAAO,cAClB,MAAO,EAAe,CAAE,gBAAiB,OAAO,EAAa,EAAG,EAAI,CAAC,EAEpE,SAAA,CAAC,GAAgB,CACf,CAAA,EAEP,EAAC,MAAD,CAAK,UAAW,EAAO,SAAW,SAAA,CAAU,CAAA,EAC3C,GACC,EAAC,EAAD,CACE,KAAM,EACN,aAAY,EACZ,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 { useComponentDefaults } 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\nfunction Chip(props: ChipProps) {\n  const {\n    className = '',\n    thumbnail = '',\n    text = '',\n    styleType = ChipStyleType.Default,\n    showRemoveIcon = false,\n    removeLabel = 'Remove',\n    onClick,\n    onRemove,\n    ...rest\n  } = useComponentDefaults('Chip', props);\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(styles.chip, CLASS_BY_STYLE[styleType], onClick && styles.chipClickable, className)}\n      onClick={onClick}\n      onKeyDown={handleKeyDown}\n    >\n      <Ripple ref={rippleRef} disabled={!onClick} style={{ borderRadius: 'inherit' }}>\n        <div className={styles.chipInner}>\n          {thumbnail && (\n            <div\n              className={styles.chipThumbnail}\n              style={thumbnailUrl ? { backgroundImage: `url(${thumbnailUrl})` } : {}}\n            >\n              {!thumbnailUrl && thumbnail}\n            </div>\n          )}\n          <div className={styles.chipText}>{text}</div>\n          {showRemoveIcon && (\n            <ActionIcon\n              icon={faXmarkCircle}\n              aria-label={removeLabel}\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":"whBAcA,IAAM,EAAgD,CACpD,QAAS,EAAO,iBAChB,QAAS,EAAO,iBAChB,KAAM,EAAO,cACb,KAAM,EAAO,cACb,MAAO,EAAO,cAChB,EAEA,SAAS,EAAK,EAAkB,CAC9B,GAAM,CACJ,YAAY,GACZ,YAAY,GACZ,OAAO,GACP,YAAY,EAAc,QAC1B,iBAAiB,GACjB,cAAc,SACd,UACA,WACA,GAAG,GACD,EAAqB,OAAQ,CAAK,EAChC,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,EAAG,EAAO,KAAM,EAAe,GAAY,GAAW,EAAO,cAAe,CAAS,EACvF,UACT,UAAW,EAEX,SAAA,EAAC,EAAD,CAAQ,IAAK,EAAW,SAAU,CAAC,EAAS,MAAO,CAAE,aAAc,SAAU,EAC3E,SAAA,EAAC,MAAD,CAAK,UAAW,EAAO,UAAvB,SAAA,CACG,GACC,EAAC,MAAD,CACE,UAAW,EAAO,cAClB,MAAO,EAAe,CAAE,gBAAiB,OAAO,EAAa,EAAG,EAAI,CAAC,EAEpE,SAAA,CAAC,GAAgB,CACf,CAAA,EAEP,EAAC,MAAD,CAAK,UAAW,EAAO,SAAW,SAAA,CAAU,CAAA,EAC3C,GACC,EAAC,EAAD,CACE,KAAM,EACN,aAAY,EACZ,QAAU,GAAM,CACd,EAAE,gBAAgB,EAClB,IAAW,CACb,CACD,CAAA,CAEA,GACC,CAAA,CACO,CAAA,CAErB"}

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

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

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

@@ -1,2 +1,2 @@
-import e from"../interactableDiv/index.mjs";import{Align as t}from"../floatingMenu/floatingMenu.types.mjs";import n from"../floatingMenu/floatingMenu.mjs";import r from"../input/input.mjs";import i from"./colorPicker.module.mjs";import{useRef as a,useState as o}from"react";import s from"classnames";import{FontAwesomeIcon as c}from"@fortawesome/react-fontawesome";import{faEyeDropper as l}from"@fortawesome/free-solid-svg-icons";import{jsx as u,jsxs as d}from"react/jsx-runtime";var f=typeof window<`u`&&`EyeDropper`in window;async function p(){let e=window.EyeDropper;if(!e)return null;try{return(await new e().open()).sRGBHex}catch{return null}}function m(e){return/^#[0-9a-fA-F]{6}$/.test(e)||/^#[0-9a-fA-F]{8}$/.test(e)}function h(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 g(e,t,n){return!n||t>=100?e:`${e}${Math.round(t/100*255).toString(16).padStart(2,`0`)}`}function _(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 v(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 y(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 b({hex:e,onChange:t,useInputComponent:n=!1}){let[a,s]=o(e),[c,l]=o(e);e!==c&&(l(e),s(e));function d(e){s(e);let n=e.startsWith(`#`)?e:`#${e}`;m(n)&&t(n)}function f(){m(a.startsWith(`#`)?a:`#${a}`)||s(e)}return n?u(r,{value:a,onChange:e=>d(e),onBlur:f}):u(`input`,{type:`text`,value:a,onChange:e=>d(e.target.value),onBlur:f,className:i.hexInput,spellCheck:!1})}function x({hue:e,sat:t,val:n,alpha:r,onHueChange:o,onSVChange:s,onAlphaChange:m,showInput:_=!0,showAlpha:x=!1}){let S=a(null);function C(e){let t=S.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 w(e){e.currentTarget.setPointerCapture(e.pointerId);let{s:t,v:n}=C(e);s(t,n);let r=e=>{let{s:t,v:n}=C(e);s(t,n)},i=()=>{window.removeEventListener(`pointermove`,r),window.removeEventListener(`pointerup`,i)};window.addEventListener(`pointermove`,r),window.addEventListener(`pointerup`,i)}function T(e){let{hex6:t,alpha:n}=h(e),{h:r,s:i,v:a}=v(t);o(r),s(i,a),x&&m(n)}let E=y(e,t,n),D=x?g(E,r,!0):E;return d(`div`,{className:i.panel,children:[d(`div`,{ref:S,className:i.gradientArea,style:{"--hue":e},onPointerDown:w,children:[u(`div`,{className:i.gradientOverlay}),u(`div`,{className:i.cursor,style:{left:`${t}%`,top:`${100-n}%`}})]}),u(`input`,{type:`range`,min:0,max:359,value:Math.round(e),onChange:e=>o(Number(e.target.value)),className:i.hueSlider}),x&&u(`input`,{type:`range`,min:0,max:100,value:Math.round(r),onChange:e=>m(Number(e.target.value)),className:i.alphaSlider,style:{"--alpha-color":E}}),(_||f)&&d(`div`,{className:i.hexRow,children:[_&&u(b,{hex:D,onChange:T}),f&&u(`button`,{type:`button`,className:i.eyeDropperButton,onClick:async()=>{let e=await p();e&&T(e)},"aria-label":`Pick color from screen`,children:u(c,{icon:l})})]})]})}var S=`#3b82f6`;function C({className:r,value:c=S,onChange:l,showInput:f=!1,showAlpha:p=!1,inline:C=!1,...w}){let[T,E]=o(!1),{hex6:D,alpha:O}=h(m(c)?c:S),k=v(D),[A,j]=o({h:k.h,s:k.s,v:k.v,a:O}),M=a(A),[N,P]=o(c);if(c!==N){P(c);let{hex6:e,alpha:t}=h(m(c)?c:S);if(e!==y(A.h,A.s,A.v)||t!==A.a){let n=v(e);j({h:n.h,s:n.s,v:n.v,a:t})}}let{h:F,s:I,v:L,a:R}=A;function z(e,t,n,r){l?.(g(y(e,t,n),r,p))}function B(e){M.current.h=e,j(t=>({...t,h:e})),z(e,M.current.s,M.current.v,M.current.a)}function V(e,t){M.current.s=e,M.current.v=t,j(n=>({...n,s:e,v:t})),z(M.current.h,e,t,M.current.a)}function H(e){M.current.a=e,j(t=>({...t,a:e})),z(M.current.h,M.current.s,M.current.v,e)}let U=y(F,I,L),W=p?_(U,R):U,G=g(U,R,p),K={hue:F,sat:I,val:L,alpha:R,onHueChange:B,onSVChange:V,onAlphaChange:H,showAlpha:p};return C?u(`div`,{...w,className:s(i.colorPicker,r),children:u(x,{...K,showInput:f})}):d(`div`,{...w,className:s(i.colorPicker,r),children:[u(n,{isOpen:T,onOpenChange:E,dontCloseOnChildClick:!0,align:t.Left,content:u(x,{...K}),children:d(e,{className:i.swatch,children:[u(`div`,{className:i.swatchFill,style:{background:W}}),u(`span`,{className:i.swatchHex,children:G})]})}),f&&u(b,{hex:G,onChange:e=>l?.(e),useInputComponent:!0})]})}export{C as default};
+import e from"../interactableDiv/index.mjs";import{Align as t}from"../floatingMenu/floatingMenu.types.mjs";import n from"../floatingMenu/floatingMenu.mjs";import r from"../input/input.mjs";import{toHex as i}from"./toHex.mjs";import a from"./colorPicker.module.mjs";import{useRef as o,useState as s}from"react";import c from"classnames";import{FontAwesomeIcon as l}from"@fortawesome/react-fontawesome";import{faEyeDropper as u}from"@fortawesome/free-solid-svg-icons";import{jsx as d,jsxs as f}from"react/jsx-runtime";var p=typeof window<`u`&&`EyeDropper`in window;async function m(){let e=window.EyeDropper;if(!e)return null;try{return(await new e().open()).sRGBHex}catch{return null}}function h(e){return/^#[0-9a-fA-F]{6}$/.test(e)||/^#[0-9a-fA-F]{8}$/.test(e)}function g(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 _(e,t,n){return!n||t>=100?e:`${e}${Math.round(t/100*255).toString(16).padStart(2,`0`)}`}function v(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 y(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 b(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 x({hex:e,onChange:t,useInputComponent:n=!1}){let[i,o]=s(e),[c,l]=s(e);e!==c&&(l(e),o(e));function u(e){o(e);let n=e.startsWith(`#`)?e:`#${e}`;h(n)&&t(n)}function f(){h(i.startsWith(`#`)?i:`#${i}`)||o(e)}return n?d(r,{value:i,onChange:e=>u(e),onBlur:f}):d(`input`,{type:`text`,value:i,onChange:e=>u(e.target.value),onBlur:f,className:a.hexInput,spellCheck:!1})}function S({hue:e,sat:t,val:n,alpha:r,onHueChange:i,onSVChange:s,onAlphaChange:c,showInput:h=!0,showAlpha:v=!1}){let S=o(null);function C(e){let t=S.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 w(e){e.currentTarget.setPointerCapture(e.pointerId);let{s:t,v:n}=C(e);s(t,n);let r=e=>{let{s:t,v:n}=C(e);s(t,n)},i=()=>{window.removeEventListener(`pointermove`,r),window.removeEventListener(`pointerup`,i)};window.addEventListener(`pointermove`,r),window.addEventListener(`pointerup`,i)}function T(e){let{hex6:t,alpha:n}=g(e),{h:r,s:a,v:o}=y(t);i(r),s(a,o),v&&c(n)}let E=b(e,t,n),D=v?_(E,r,!0):E;return f(`div`,{className:a.panel,children:[f(`div`,{ref:S,className:a.gradientArea,style:{"--hue":e},onPointerDown:w,children:[d(`div`,{className:a.gradientOverlay}),d(`div`,{className:a.cursor,style:{left:`${t}%`,top:`${100-n}%`}})]}),d(`input`,{type:`range`,min:0,max:359,value:Math.round(e),onChange:e=>i(Number(e.target.value)),className:a.hueSlider}),v&&d(`input`,{type:`range`,min:0,max:100,value:Math.round(r),onChange:e=>c(Number(e.target.value)),className:a.alphaSlider,style:{"--alpha-color":E}}),(h||p)&&f(`div`,{className:a.hexRow,children:[h&&d(x,{hex:D,onChange:T}),p&&d(`button`,{type:`button`,className:a.eyeDropperButton,onClick:async()=>{let e=await m();e&&T(e)},"aria-label":`Pick color from screen`,children:d(l,{icon:u})})]})]})}var C=`#3b82f6`;function w({className:r,value:l=C,onChange:u,showInput:p=!1,showAlpha:m=!1,inline:h=!1,...w}){let[T,E]=s(!1),{hex6:D,alpha:O}=g(i(l)??C),k=y(D),[A,j]=s({h:k.h,s:k.s,v:k.v,a:O}),M=o(A),[N,P]=s(l);if(l!==N){P(l);let{hex6:e,alpha:t}=g(i(l)??C);if(e!==b(A.h,A.s,A.v)||t!==A.a){let n=y(e);j({h:n.h,s:n.s,v:n.v,a:t})}}let{h:F,s:I,v:L,a:R}=A;function z(e,t,n,r){u?.(_(b(e,t,n),r,m))}function B(e){M.current.h=e,j(t=>({...t,h:e})),z(e,M.current.s,M.current.v,M.current.a)}function V(e,t){M.current.s=e,M.current.v=t,j(n=>({...n,s:e,v:t})),z(M.current.h,e,t,M.current.a)}function H(e){M.current.a=e,j(t=>({...t,a:e})),z(M.current.h,M.current.s,M.current.v,e)}let U=b(F,I,L),W=m?v(U,R):U,G=_(U,R,m),K={hue:F,sat:I,val:L,alpha:R,onHueChange:B,onSVChange:V,onAlphaChange:H,showAlpha:m};return h?d(`div`,{...w,className:c(a.colorPicker,r),children:d(S,{...K,showInput:p})}):f(`div`,{...w,className:c(a.colorPicker,r),children:[d(n,{isOpen:T,onOpenChange:E,dontCloseOnChildClick:!0,align:t.Left,content:d(S,{...K}),children:f(e,{className:a.swatch,children:[d(`div`,{className:a.swatchFill,style:{background:W}}),d(`span`,{className:a.swatchHex,children:G})]})}),p&&d(x,{hex:G,onChange:e=>u?.(e),useInputComponent:!0})]})}export{w as default};
 //# sourceMappingURL=colorPicker.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"colorPicker.mjs","names":[],"sources":["../../../../package/common/colorPicker/colorPicker.tsx"],"sourcesContent":["import { useState, useRef, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faEyeDropper } from '@fortawesome/free-solid-svg-icons';\n\nimport InteractableDiv from 'components/common/interactableDiv';\nimport FloatingMenu from 'components/common/floatingMenu';\nimport Input from 'components/common/input';\nimport { Align } from 'components/common/floatingMenu/floatingMenu.types';\nimport type { ColorPickerProps } from './colorPicker.types';\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  hex: string;\n  onChange: (hex: string) => void;\n  useInputComponent?: boolean;\n}\n\nfunction HexInput({ hex, onChange, useInputComponent = false }: 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={styles.hexInput}\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}\n\nfunction PickerPanel({\n  hue,\n  sat,\n  val,\n  alpha,\n  onHueChange,\n  onSVChange,\n  onAlphaChange,\n  showInput = true,\n  showAlpha = false,\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={styles.panel}>\n      <div\n        ref={gradientRef}\n        className={styles.gradientArea}\n        style={{ '--hue': hue } 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={styles.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={styles.alphaSlider}\n          style={{ '--alpha-color': hex6 } as React.CSSProperties}\n        />\n      )}\n\n      {(showInput || eyeDropperSupported) && (\n        <div className={styles.hexRow}>\n          {showInput && <HexInput hex={hexInputValue} onChange={onHexChange} />}\n          {eyeDropperSupported && (\n            <button\n              type='button'\n              className={styles.eyeDropperButton}\n              onClick={async () => {\n                const hex = await pickColorFromScreen();\n                if (hex) onHexChange(hex);\n              }}\n              aria-label='Pick color from screen'\n            >\n              <FontAwesomeIcon icon={faEyeDropper} />\n            </button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ── ColorPicker ───────────────────────────────────────────────────────────────\n\nconst DEFAULT_COLOR = '#3b82f6';\n\nfunction ColorPicker({\n  className,\n  value = DEFAULT_COLOR,\n  onChange,\n  showInput = false,\n  showAlpha = false,\n  inline = false,\n  ...rest\n}: ColorPickerProps): ReactElement {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const initSafe = isValidHex(value) ? 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 = isValidHex(value) ? 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  };\n\n  if (inline) {\n    return (\n      <div {...rest} className={cx(styles.colorPicker, className)}>\n        <PickerPanel {...pickerPanelProps} showInput={showInput} />\n      </div>\n    );\n  }\n\n  return (\n    <div {...rest} className={cx(styles.colorPicker, className)}>\n      <FloatingMenu\n        isOpen={isOpen}\n        onOpenChange={setIsOpen}\n        dontCloseOnChildClick\n        align={Align.Left}\n        content={<PickerPanel {...pickerPanelProps} />}\n      >\n        <InteractableDiv className={styles.swatch}>\n          <div className={styles.swatchFill} style={{ background: swatchBackground }} />\n          <span className={styles.swatchHex}>{displayValue}</span>\n        </InteractableDiv>\n      </FloatingMenu>\n\n      {showInput && <HexInput hex={displayValue} onChange={(v) => onChange?.(v)} useInputComponent />}\n    </div>\n  );\n}\n\nexport default ColorPicker;\n"],"mappings":"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"}
+{"version":3,"file":"colorPicker.mjs","names":[],"sources":["../../../../package/common/colorPicker/colorPicker.tsx"],"sourcesContent":["import { useState, useRef, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faEyeDropper } from '@fortawesome/free-solid-svg-icons';\n\nimport InteractableDiv from 'components/common/interactableDiv';\nimport FloatingMenu from 'components/common/floatingMenu';\nimport Input from 'components/common/input';\nimport { Align } from 'components/common/floatingMenu/floatingMenu.types';\nimport type { ColorPickerProps } from './colorPicker.types';\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  hex: string;\n  onChange: (hex: string) => void;\n  useInputComponent?: boolean;\n}\n\nfunction HexInput({ hex, onChange, useInputComponent = false }: 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={styles.hexInput}\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}\n\nfunction PickerPanel({\n  hue,\n  sat,\n  val,\n  alpha,\n  onHueChange,\n  onSVChange,\n  onAlphaChange,\n  showInput = true,\n  showAlpha = false,\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={styles.panel}>\n      <div\n        ref={gradientRef}\n        className={styles.gradientArea}\n        style={{ '--hue': hue } 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={styles.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={styles.alphaSlider}\n          style={{ '--alpha-color': hex6 } as React.CSSProperties}\n        />\n      )}\n\n      {(showInput || eyeDropperSupported) && (\n        <div className={styles.hexRow}>\n          {showInput && <HexInput hex={hexInputValue} onChange={onHexChange} />}\n          {eyeDropperSupported && (\n            <button\n              type='button'\n              className={styles.eyeDropperButton}\n              onClick={async () => {\n                const hex = await pickColorFromScreen();\n                if (hex) onHexChange(hex);\n              }}\n              aria-label='Pick color from screen'\n            >\n              <FontAwesomeIcon icon={faEyeDropper} />\n            </button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ── ColorPicker ───────────────────────────────────────────────────────────────\n\nconst DEFAULT_COLOR = '#3b82f6';\n\nfunction ColorPicker({\n  className,\n  value = DEFAULT_COLOR,\n  onChange,\n  showInput = false,\n  showAlpha = false,\n  inline = false,\n  ...rest\n}: ColorPickerProps): ReactElement {\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  };\n\n  if (inline) {\n    return (\n      <div {...rest} className={cx(styles.colorPicker, className)}>\n        <PickerPanel {...pickerPanelProps} showInput={showInput} />\n      </div>\n    );\n  }\n\n  return (\n    <div {...rest} className={cx(styles.colorPicker, className)}>\n      <FloatingMenu\n        isOpen={isOpen}\n        onOpenChange={setIsOpen}\n        dontCloseOnChildClick\n        align={Align.Left}\n        content={<PickerPanel {...pickerPanelProps} />}\n      >\n        <InteractableDiv className={styles.swatch}>\n          <div className={styles.swatchFill} style={{ background: swatchBackground }} />\n          <span className={styles.swatchHex}>{displayValue}</span>\n        </InteractableDiv>\n      </FloatingMenu>\n\n      {showInput && <HexInput hex={displayValue} onChange={(v) => onChange?.(v)} useInputComponent />}\n    </div>\n  );\n}\n\nexport default ColorPicker;\n"],"mappings":"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"}

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  display: flex;\n  align-items: center;\n  gap: 8px;\n\n  /* The visible swatch (below) is nested inside a FloatingMenu trigger, not this root — see\n     input.module.pcss for why this variable exists: a wrapping ButtonGroup sets --group-radius-*\n     per corner on the position this occupies, and unlike border-radius itself, custom properties\n     inherit through any nesting depth, reaching descendants a plain ancestor selector can't. */\n  --swatch-radius: var(--group-radius-tl, var(--default-border-radius))\n    var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n    var(--group-radius-bl, var(--default-border-radius));\n}\n\n.swatch {\n  width: 32px;\n  height: 32px;\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: 8px 8px;\n  background-position:\n    0 0,\n    0 4px,\n    4px -4px,\n    -4px 0;\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: 8px;\n  font-family: monospace;\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  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 FloatingMenu trigger, not this root — see\n     input.module.pcss for why this variable exists: a wrapping ButtonGroup sets --group-radius-*\n     per corner on the position this occupies, and unlike border-radius itself, custom properties\n     inherit through any nesting depth, reaching descendants a plain ancestor selector can't. */\n  --swatch-radius: var(--group-radius-tl, var(--default-border-radius))\n    var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n    var(--group-radius-bl, var(--default-border-radius));\n}\n\n.swatch {\n  width: var(--custom-swatch-size);\n  height: var(--custom-swatch-size);\n  border-radius: var(--swatch-radius);\n  position: relative;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  flex-shrink: 0;\n  box-shadow: 0 0 0 1px rgb(0 0 0 / 15%);\n\n  /* checkerboard so transparency is visible */\n  background-image:\n    linear-gradient(45deg, #bbb 25%, transparent 25%), linear-gradient(-45deg, #bbb 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #bbb 75%), linear-gradient(-45deg, transparent 75%, #bbb 75%);\n  background-size: 0.5em 0.5em;\n  background-position:\n    0 0,\n    0 0.25em,\n    0.25em -0.25em,\n    -0.25em 0;\n\n  /* Deliberately not a theme colour: this is the transparency checkerboard, and alpha can\n     only be judged against a fixed neutral. Theming it would make a swatch read differently\n     in every theme. */\n  background-color: white;\n\n  &:hover {\n    & .swatchHex {\n      opacity: 1;\n    }\n  }\n}\n\n.swatchFill {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n}\n\n.swatchHex {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.5em;\n  font-family: var(--monospace-font, monospace);\n\n  /* White on a fixed scrim, not on the theme: the label sits over the swatch's own colour,\n     which the theme does not control. */\n  background: rgb(0 0 0 / 55%);\n  color: white;\n  border-radius: inherit;\n  opacity: 0;\n  transition: opacity 0.15s;\n  user-select: none;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.panel {\n  padding: 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: 224px;\n}\n\n.gradientArea {\n  width: 200px;\n  height: 160px;\n  position: relative;\n  cursor: crosshair;\n  border-radius: 4px;\n  overflow: hidden;\n  touch-action: none;\n  background: linear-gradient(to right, white, hsl(calc(var(--hue) * 1deg) 100% 50%));\n}\n\n.gradientOverlay {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to bottom, transparent, black);\n}\n\n.cursor {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  border: 2px solid white;\n  box-shadow: 0 0 3px rgb(0 0 0 / 50%);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  z-index: 1;\n}\n\n.hueSlider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 10px;\n  border-radius: var(--default-border-radius);\n  outline: none;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  background: linear-gradient(\n    to right,\n    hsl(0deg 100% 50%),\n    hsl(60deg 100% 50%),\n    hsl(120deg 100% 50%),\n    hsl(180deg 100% 50%),\n    hsl(240deg 100% 50%),\n    hsl(300deg 100% 50%),\n    hsl(360deg 100% 50%)\n  );\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &::-moz-range-thumb {\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n}\n\n.alphaSlider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 10px;\n  border-radius: var(--default-border-radius);\n  outline: none;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n\n  /* checkerboard base so transparency is visible under the gradient */\n  background-image:\n    linear-gradient(to right, transparent, var(--alpha-color)), linear-gradient(45deg, #bbb 25%, transparent 25%),\n    linear-gradient(-45deg, #bbb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bbb 75%),\n    linear-gradient(-45deg, transparent 75%, #bbb 75%);\n  background-size:\n    100% 100%,\n    8px 8px,\n    8px 8px,\n    8px 8px,\n    8px 8px;\n  background-position:\n    0 0,\n    0 0,\n    0 4px,\n    4px -4px,\n    -4px 0;\n\n  /* Deliberately not a theme colour: this is the transparency checkerboard, and alpha can\n     only be judged against a fixed neutral. Theming it would make a swatch read differently\n     in every theme. */\n  background-color: white;\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &::-moz-range-thumb {\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n}\n\n.hexRow {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.hexInput {\n  width: 100%;\n  padding: 5px 8px;\n  border-radius: var(--default-border-radius);\n  border: 1px solid var(--border-color);\n  background: var(--input-background);\n  color: var(--text-color);\n  font-size: var(--default-font-size);\n  font-family: monospace;\n  box-sizing: border-box;\n  outline: none;\n\n  &:focus {\n    border-color: var(--focus-border-color, var(--primary-color));\n  }\n}\n\n.eyeDropperButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border-radius: var(--default-border-radius);\n  border: 1px solid var(--border-color);\n  background: var(--input-background);\n  color: var(--text-color);\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n\n  &:hover {\n    border-color: var(--primary-color);\n    color: var(--primary-color);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +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};
+//# sourceMappingURL=toHex.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toHex.mjs","names":[],"sources":["../../../../package/common/colorPicker/toHex.ts"],"sourcesContent":["/**\n * Normalises any CSS colour the browser understands into hex, which is the only form\n * ColorPicker's own arithmetic can take. Without it every non-hex value — `transparent`,\n * `rgba(...)`, and above all `oklch(...)`, which a whole theme may be written in — silently\n * became the picker's default blue: a swatch confidently showing a colour nothing asked for.\n *\n * The canvas 2D context is the browser's own colour parser. Under jsdom there is none, so\n * this returns `undefined` and callers keep their previous fallback — meaning the widened\n * behaviour is only observable in a real browser, and only `*.browser.test.ts` can cover it.\n */\n\n/** `undefined` until first use, `null` once we know there is no 2D context (jsdom). */\nlet ctx: CanvasRenderingContext2D | null | undefined;\n\n/*\n * Six or eight digits only. Shorthand is deliberately NOT short-circuited: ColorPicker's own\n * isValidHex accepts those two lengths and nothing else, so handing it `#abc` untouched would\n * have produced exactly the default-blue swatch this helper exists to prevent. Letting it fall\n * through to the canvas expands it.\n */\nconst HEX = /^#([0-9a-f]{6}|[0-9a-f]{8})$/i;\n/*\n * Two of them, because an unparseable value leaves fillStyle at whatever preceded it: seed\n * with each in turn and a real colour resolves the same way twice, while a rejected one\n * comes back as the two different seeds. One sentinel could not tell a rejected value from\n * a value that happens to BE the sentinel — `rgb(1, 2, 3)` normalises to exactly `#010203`.\n */\nconst SEED_A = '#010203';\nconst SEED_B = '#040506';\n\nfunction byteToHex(n: number): string {\n  return Math.max(0, Math.min(255, Math.round(n)))\n    .toString(16)\n    .padStart(2, '0');\n}\n\n/** `#rrggbb`, widened to `#rrggbbaa` only when the colour is not fully opaque. */\nfunction pack(r: number, g: number, b: number, a: number): string {\n  const alpha = Math.round(a);\n  return `#${byteToHex(r)}${byteToHex(g)}${byteToHex(b)}${alpha === 255 ? '' : byteToHex(alpha)}`;\n}\n\nexport function toHex(value: string | undefined): string | undefined {\n  const raw = value?.trim();\n  if (!raw) return undefined;\n  if (HEX.test(raw)) return raw;\n\n  if (ctx === undefined) ctx = document.createElement('canvas').getContext('2d');\n  if (!ctx) return undefined;\n\n  ctx.fillStyle = SEED_A;\n  ctx.fillStyle = raw;\n  const resolved = ctx.fillStyle;\n  ctx.fillStyle = SEED_B;\n  ctx.fillStyle = raw;\n  if (ctx.fillStyle !== resolved) return undefined;\n\n  // fillStyle normalises sRGB inputs to `#rrggbb` or `rgba(r, g, b, a)`, which are exact.\n  if (resolved.startsWith('#')) return resolved;\n  const parts = /^rgba?\\(([^)]+)\\)$/i.exec(resolved);\n  if (parts) {\n    const [r, g, b, a = '1'] = parts[1].split(',').map((part) => part.trim());\n    return pack(Number(r), Number(g), Number(b), Number(a) * 255);\n  }\n\n  /*\n   * Anything in a wide-gamut syntax — oklch(), oklab(), color-mix() — comes back verbatim\n   * rather than as sRGB, so the browser is asked to paint it and the pixel is read instead.\n   * Only reached for those: canvas un-premultiplies alpha on the way out, which costs a\n   * little precision on a very transparent colour, and the exact paths above avoid it.\n   */\n  ctx.clearRect(0, 0, 1, 1);\n  ctx.fillRect(0, 0, 1, 1);\n  const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;\n  return pack(r, g, b, a);\n}\n"],"mappings":"AAYA,IAAI,EAQE,EAAM,gCAUZ,SAAS,EAAU,EAAmB,CACpC,OAAO,KAAK,IAAI,EAAG,KAAK,IAAI,IAAK,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAC7C,SAAS,EAAE,CAAC,CACZ,SAAS,EAAG,GAAG,CACpB,CAGA,SAAS,EAAK,EAAW,EAAW,EAAW,EAAmB,CAChE,IAAM,EAAQ,KAAK,MAAM,CAAC,EAC1B,MAAO,IAAI,EAAU,CAAC,IAAI,EAAU,CAAC,IAAI,EAAU,CAAC,IAAI,IAAU,IAAM,GAAK,EAAU,CAAK,GAC9F,CAEA,SAAgB,EAAM,EAA+C,CACnE,IAAM,EAAM,GAAO,KAAK,EACxB,GAAI,CAAC,EAAK,OACV,GAAI,EAAI,KAAK,CAAG,EAAG,OAAO,EAG1B,GADI,IAAQ,IAAA,KAAW,EAAM,SAAS,cAAc,QAAQ,CAAC,CAAC,WAAW,IAAI,GACzE,CAAC,EAAK,OAEV,EAAI,UAAY,UAChB,EAAI,UAAY,EAChB,IAAM,EAAW,EAAI,UAGrB,GAFA,EAAI,UAAY,UAChB,EAAI,UAAY,EACZ,EAAI,YAAc,EAAU,OAGhC,GAAI,EAAS,WAAW,GAAG,EAAG,OAAO,EACrC,IAAM,EAAQ,sBAAsB,KAAK,CAAQ,EACjD,GAAI,EAAO,CACT,GAAM,CAAC,EAAG,EAAG,EAAG,EAAI,KAAO,EAAM,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,IAAK,GAAS,EAAK,KAAK,CAAC,EACxE,OAAO,EAAK,OAAO,CAAC,EAAG,OAAO,CAAC,EAAG,OAAO,CAAC,EAAG,OAAO,CAAC,EAAI,GAAG,CAC9D,CAQA,EAAI,UAAU,EAAG,EAAG,EAAG,CAAC,EACxB,EAAI,SAAS,EAAG,EAAG,EAAG,CAAC,EACvB,GAAM,CAAC,EAAG,EAAG,EAAG,GAAK,EAAI,aAAa,EAAG,EAAG,EAAG,CAAC,CAAC,CAAC,KAClD,OAAO,EAAK,EAAG,EAAG,EAAG,CAAC,CACxB"}

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

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