@ahrowe/ui 0.18.1 → 0.19.1

package/dist/esm/common/actionButtons/actionButtons.mjs

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"./actionButtons.module.mjs";import{ButtonStyleType as n,ButtonType as r}from"../button/button.types.mjs";import i from"../button/button.mjs";import a from"classnames";import{jsx as o,jsxs as s}from"react/jsx-runtime";function c(c){let{onSubmit:l=()=>null,onClose:u=()=>null,submitLabel:d=`Save`,cancelLabel:f=`Cancel`,submitButtonStyle:p=n.Primary,isSubmitButtonLoading:m=!1,isSubmitButtonDisabled:h=!1,submitButtonIcon:g=void 0,cancelButtonStyle:_=n.Default,isCancelButtonLoading:v=!1,isCancelButtonDisabled:y=!1,cancelButtonIcon:b=void 0,hidePrimaryButton:x=!1,hideSecondaryButton:S=!1,noMargin:C=!1,className:w,style:T,classNames:E,styles:D,...O}=e(`ActionButtons`,c);return s(`div`,{...O,className:a(t.actionButtons,!C&&t.actionButtonsMargin,w,E?.root),style:{...T,...D?.root},children:[!x&&o(i,{isLoading:m,disabled:h,styleType:p,type:r.Submit,onClick:l,className:E?.submitButton,style:D?.submitButton,icon:g,children:d}),!S&&o(i,{isLoading:v,disabled:y,onClick:u,styleType:_,className:E?.cancelButton,style:D?.cancelButton,icon:b,children:f})]})}export{c as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"./actionButtons.module.mjs";import{ButtonStyleType as n,ButtonType as r}from"../button/button.types.mjs";import i from"../button/button.mjs";import a from"classnames";import{jsx as o,jsxs as s}from"react/jsx-runtime";function c(c){let{onSubmit:l=()=>null,onClose:u=()=>null,submitLabel:d=`Save`,cancelLabel:f=`Cancel`,submitButtonStyle:p=n.Primary,isSubmitButtonLoading:m=!1,isSubmitButtonDisabled:h=!1,submitButtonIcon:g=void 0,cancelButtonStyle:_=n.Default,isCancelButtonLoading:v=!1,isCancelButtonDisabled:y=!1,cancelButtonIcon:b=void 0,hidePrimaryButton:x=!1,hideSecondaryButton:S=!1,noMargin:C=!1,stackButtons:w=!1,className:T,style:E,classNames:D,styles:O,...k}=e(`ActionButtons`,c);return s(`div`,{...k,className:a(t.actionButtons,!C&&t.actionButtonsMargin,w&&t.actionButtonsStacked,T,D?.root),style:{...E,...O?.root},children:[!x&&o(i,{isLoading:m,disabled:h,styleType:p,type:r.Submit,onClick:l,className:D?.submitButton,style:O?.submitButton,icon:g,children:d}),!S&&o(i,{isLoading:v,disabled:y,onClick:u,styleType:_,className:D?.cancelButton,style:O?.cancelButton,icon:b,children:f})]})}export{c as default};
 //# sourceMappingURL=actionButtons.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"actionButtons.mjs","names":[],"sources":["../../../../package/common/actionButtons/actionButtons.tsx"],"sourcesContent":["import cx from 'classnames';\n\nimport styles from './actionButtons.module.pcss';\nimport Button, { ButtonStyleType, ButtonType } from '../button';\nimport { useComponentDefaults } from '../configProvider';\nimport { ActionButtonsProps } from './actionButtons.types';\n\nexport default function ActionButtons(props: ActionButtonsProps) {\n  const {\n  onSubmit = () => null,\n  onClose = () => null,\n  submitLabel = 'Save',\n  cancelLabel = 'Cancel',\n  submitButtonStyle = ButtonStyleType.Primary,\n  isSubmitButtonLoading = false,\n  isSubmitButtonDisabled = false,\n  submitButtonIcon = undefined,\n  cancelButtonStyle = ButtonStyleType.Default,\n  isCancelButtonLoading = false,\n  isCancelButtonDisabled = false,\n  cancelButtonIcon = undefined,\n  hidePrimaryButton = false,\n  hideSecondaryButton = false,\n  noMargin = false,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n  } = useComponentDefaults('ActionButtons', props);\n  return (\n    <div\n      {...rest}\n      className={cx(styles.actionButtons, !noMargin && styles.actionButtonsMargin, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      {!hidePrimaryButton && (\n      <Button\n        isLoading={isSubmitButtonLoading}\n        disabled={isSubmitButtonDisabled}\n        styleType={submitButtonStyle}\n        type={ButtonType.Submit}\n        onClick={onSubmit}\n        className={classNames?.submitButton}\n        style={slotStyles?.submitButton}\n        icon={submitButtonIcon}\n      >\n        {submitLabel}\n      </Button>\n      )}\n      {!hideSecondaryButton && (\n        <Button\n          isLoading={isCancelButtonLoading}\n          disabled={isCancelButtonDisabled}\n          onClick={onClose}\n          styleType={cancelButtonStyle}\n          className={classNames?.cancelButton}\n          style={slotStyles?.cancelButton}\n          icon={cancelButtonIcon}\n        >\n          {cancelLabel}\n        </Button>\n      )}\n    </div>\n  );\n}"],"mappings":"yTAOA,SAAwB,EAAc,EAA2B,CAC/D,GAAM,CACN,eAAiB,KACjB,cAAgB,KAChB,cAAc,OACd,cAAc,SACd,oBAAoB,EAAgB,QACpC,wBAAwB,GACxB,yBAAyB,GACzB,mBAAmB,IAAA,GACnB,oBAAoB,EAAgB,QACpC,wBAAwB,GACxB,yBAAyB,GACzB,mBAAmB,IAAA,GACnB,oBAAoB,GACpB,sBAAsB,GACtB,WAAW,GACX,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACC,EAAqB,gBAAiB,CAAK,EAC/C,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,cAAe,CAAC,GAAY,EAAO,oBAAqB,EAAW,GAAY,IAAI,EACxG,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,WAHzC,CAKG,CAAC,GACF,EAAC,EAAD,CACE,UAAW,EACX,SAAU,EACV,UAAW,EACX,KAAM,EAAW,OACjB,QAAS,EACT,UAAW,GAAY,aACvB,MAAO,GAAY,aACnB,KAAM,WAEL,CACK,CAAA,EAEP,CAAC,GACA,EAAC,EAAD,CACE,UAAW,EACX,SAAU,EACV,QAAS,EACT,UAAW,EACX,UAAW,GAAY,aACvB,MAAO,GAAY,aACnB,KAAM,WAEL,CACK,CAAA,CAEP,GAET"}
+{"version":3,"file":"actionButtons.mjs","names":[],"sources":["../../../../package/common/actionButtons/actionButtons.tsx"],"sourcesContent":["import cx from 'classnames';\n\nimport styles from './actionButtons.module.pcss';\nimport Button, { ButtonStyleType, ButtonType } from '../button';\nimport { useComponentDefaults } from '../configProvider';\nimport { ActionButtonsProps } from './actionButtons.types';\n\nexport default function ActionButtons(props: ActionButtonsProps) {\n  const {\n  onSubmit = () => null,\n  onClose = () => null,\n  submitLabel = 'Save',\n  cancelLabel = 'Cancel',\n  submitButtonStyle = ButtonStyleType.Primary,\n  isSubmitButtonLoading = false,\n  isSubmitButtonDisabled = false,\n  submitButtonIcon = undefined,\n  cancelButtonStyle = ButtonStyleType.Default,\n  isCancelButtonLoading = false,\n  isCancelButtonDisabled = false,\n  cancelButtonIcon = undefined,\n  hidePrimaryButton = false,\n  hideSecondaryButton = false,\n  noMargin = false,\n  stackButtons = false,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n  } = useComponentDefaults('ActionButtons', props);\n  return (\n    <div\n      {...rest}\n      className={cx(styles.actionButtons, !noMargin && styles.actionButtonsMargin, stackButtons && styles.actionButtonsStacked, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      {!hidePrimaryButton && (\n      <Button\n        isLoading={isSubmitButtonLoading}\n        disabled={isSubmitButtonDisabled}\n        styleType={submitButtonStyle}\n        type={ButtonType.Submit}\n        onClick={onSubmit}\n        className={classNames?.submitButton}\n        style={slotStyles?.submitButton}\n        icon={submitButtonIcon}\n      >\n        {submitLabel}\n      </Button>\n      )}\n      {!hideSecondaryButton && (\n        <Button\n          isLoading={isCancelButtonLoading}\n          disabled={isCancelButtonDisabled}\n          onClick={onClose}\n          styleType={cancelButtonStyle}\n          className={classNames?.cancelButton}\n          style={slotStyles?.cancelButton}\n          icon={cancelButtonIcon}\n        >\n          {cancelLabel}\n        </Button>\n      )}\n    </div>\n  );\n}"],"mappings":"yTAOA,SAAwB,EAAc,EAA2B,CAC/D,GAAM,CACN,eAAiB,KACjB,cAAgB,KAChB,cAAc,OACd,cAAc,SACd,oBAAoB,EAAgB,QACpC,wBAAwB,GACxB,yBAAyB,GACzB,mBAAmB,IAAA,GACnB,oBAAoB,EAAgB,QACpC,wBAAwB,GACxB,yBAAyB,GACzB,mBAAmB,IAAA,GACnB,oBAAoB,GACpB,sBAAsB,GACtB,WAAW,GACX,eAAe,GACf,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACC,EAAqB,gBAAiB,CAAK,EAC/C,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,cAAe,CAAC,GAAY,EAAO,oBAAqB,GAAgB,EAAO,qBAAsB,EAAW,GAAY,IAAI,EACrJ,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,WAHzC,CAKG,CAAC,GACF,EAAC,EAAD,CACE,UAAW,EACX,SAAU,EACV,UAAW,EACX,KAAM,EAAW,OACjB,QAAS,EACT,UAAW,GAAY,aACvB,MAAO,GAAY,aACnB,KAAM,WAEL,CACK,CAAA,EAEP,CAAC,GACA,EAAC,EAAD,CACE,UAAW,EACX,SAAU,EACV,QAAS,EACT,UAAW,EACX,UAAW,GAAY,aACvB,MAAO,GAAY,aACnB,KAAM,WAEL,CACK,CAAA,CAEP,GAET"}

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

@@ -1,2 +1,2 @@
-var e={actionButtons:`actionButtons_7GybR`,"actionButtons-margin":`actionButtons-margin_-XoFP`,actionButtonsMargin:`actionButtons-margin_-XoFP`};export{e as default};
+var e={actionButtons:`actionButtons_7GybR`,"actionButtons-margin":`actionButtons-margin_-XoFP`,actionButtonsMargin:`actionButtons-margin_-XoFP`,"actionButtons-stacked":`actionButtons-stacked_ZGpUN`,actionButtonsStacked:`actionButtons-stacked_ZGpUN`};export{e as default};
 //# sourceMappingURL=actionButtons.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"actionButtons.module.mjs","names":[],"sources":["../../../../package/common/actionButtons/actionButtons.module.pcss"],"sourcesContent":["\n.actionButtons {\n  display: flex;\n  gap: var(--spacing-m);\n\n  @media (--mq-mobile) {\n    flex-direction: column;\n  }\n\n  &-margin {\n    margin-top: var(--spacing-l);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"actionButtons.module.mjs","names":[],"sources":["../../../../package/common/actionButtons/actionButtons.module.pcss"],"sourcesContent":["\n.actionButtons {\n  display: flex;\n  gap: var(--spacing-m);\n\n  @media (--mq-mobile) {\n    flex-direction: column;\n  }\n\n  &-margin {\n    margin-top: var(--spacing-l);\n  }\n\n  &-stacked {\n    flex-direction: column;\n\n    & > * {\n      width: 100%;\n    }\n  }\n}\n"],"mappings":""}

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":["\n.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  /* 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)) var(--group-radius-tr, var(--default-border-radius))\n    var(--group-radius-br, var(--default-border-radius)) 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    /* 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(--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":["\n.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  /* 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)) var(--group-radius-tr, var(--default-border-radius))\n    var(--group-radius-br, var(--default-border-radius)) 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    /* 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":""}

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  /* 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)) var(--group-radius-tr, var(--default-border-radius))\n    var(--group-radius-br, var(--default-border-radius)) 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 rgba(0, 0, 0, 0.15);\n  /* checkerboard so transparency is visible */\n  background-image:\n    linear-gradient(45deg, #bbb 25%, transparent 25%),\n    linear-gradient(-45deg, #bbb 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #bbb 75%),\n    linear-gradient(-45deg, transparent 75%, #bbb 75%);\n  background-size: 8px 8px;\n  background-position: 0 0, 0 4px, 4px -4px, -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: rgba(0, 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 rgba(0, 0, 0, 0.5);\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(0, 100%, 50%),\n    hsl(60, 100%, 50%),\n    hsl(120, 100%, 50%),\n    hsl(180, 100%, 50%),\n    hsl(240, 100%, 50%),\n    hsl(300, 100%, 50%),\n    hsl(360, 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  /* checkerboard base so transparency is visible under the gradient */\n  background-image:\n    linear-gradient(to right, transparent, var(--alpha-color)),\n    linear-gradient(45deg, #bbb 25%, transparent 25%),\n    linear-gradient(-45deg, #bbb 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #bbb 75%),\n    linear-gradient(-45deg, transparent 75%, #bbb 75%);\n  background-size: 100% 100%, 8px 8px, 8px 8px, 8px 8px, 8px 8px;\n  background-position: 0 0, 0 0, 0 4px, 4px -4px, -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: 13px;\n  font-family: monospace;\n  box-sizing: border-box;\n  outline: none;\n\n  &:focus {\n    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  display: flex;\n  align-items: center;\n  gap: 8px;\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)) var(--group-radius-tr, var(--default-border-radius))\n    var(--group-radius-br, var(--default-border-radius)) 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 rgba(0, 0, 0, 0.15);\n  /* checkerboard so transparency is visible */\n  background-image:\n    linear-gradient(45deg, #bbb 25%, transparent 25%),\n    linear-gradient(-45deg, #bbb 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #bbb 75%),\n    linear-gradient(-45deg, transparent 75%, #bbb 75%);\n  background-size: 8px 8px;\n  background-position: 0 0, 0 4px, 4px -4px, -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: rgba(0, 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 rgba(0, 0, 0, 0.5);\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(0, 100%, 50%),\n    hsl(60, 100%, 50%),\n    hsl(120, 100%, 50%),\n    hsl(180, 100%, 50%),\n    hsl(240, 100%, 50%),\n    hsl(300, 100%, 50%),\n    hsl(360, 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  /* checkerboard base so transparency is visible under the gradient */\n  background-image:\n    linear-gradient(to right, transparent, var(--alpha-color)),\n    linear-gradient(45deg, #bbb 25%, transparent 25%),\n    linear-gradient(-45deg, #bbb 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #bbb 75%),\n    linear-gradient(-45deg, transparent 75%, #bbb 75%);\n  background-size: 100% 100%, 8px 8px, 8px 8px, 8px 8px, 8px 8px;\n  background-position: 0 0, 0 0, 0 4px, 4px -4px, -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: 13px;\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/dropdown/dropdown.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.module.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.module.pcss"],"sourcesContent":["\n.required-mark {\n  padding: 0px 0px 0px 4px;\n  color: var(--required-mark-color, var(--error-color));\n}\n\n.dropdown {\n  position: relative;\n  /* See input.module.pcss for why this exists: the visible border lives on `-input`/`-fieldset`\n     below, not this root, so a wrapping ButtonGroup's --group-radius-* custom properties (which\n     inherit through any nesting depth, unlike border-radius itself) are what let this component\n     flatten correctly when it sits inside a ButtonGroup. */\n  --dropdown-radius: var(--group-radius-tl, var(--default-border-radius)) var(--group-radius-tr, var(--default-border-radius))\n    var(--group-radius-br, var(--default-border-radius)) var(--group-radius-bl, var(--default-border-radius));\n\n  &-label {\n    display: flex;\n\n    &-column {\n      flex-direction: column;\n    }\n\n    &-text {\n      white-space: nowrap;\n      margin-right: 5px;\n      margin-bottom: 5px;\n      display: flex;\n      align-items: center;\n      color: var(--text-color);\n      font-size: 12px;\n      position: absolute;\n      top: -15px;\n    }\n  }\n\n  &-input {\n    position: relative;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    background-color: var(--input-background);\n    border-radius: var(--dropdown-radius);\n\n    &-plain {\n      background: transparent;\n    }\n\n    &-readOnly {\n      cursor: default;\n    }\n\n    &:focus-within {\n      outline: none;\n    }\n\n    &-button {\n      padding: 7px 20% 7px 7.5px !important;\n      background-color: transparent;\n      border: none;\n      font-family: inherit;\n      font-size: inherit;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      text-align: left;\n      width: 100%;\n      line-height: 1.25;\n      color: var(--text-color);\n\n      &-disabled {\n        background-color: var(--disabled-input-color);\n        color: var(--disabled-font-color);\n        border-radius: var(--dropdown-radius);\n      }\n\n      &-readOnly {\n        cursor: default;\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &-icon {\n        float: right;\n        background-color: transparent;\n        border: none;\n        position: absolute;\n        outline: none;\n        right: var(--spacing-s);\n        top: 50%;\n        transform: translateY(-50%);\n        color: var(--text-color);\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n\n        &-arrow {\n          transition: transform 0.25s;\n          pointer-events: none;\n\n          &-open {\n            transform: rotate(180deg);\n          }\n        }\n      }\n    }\n\n    &-list-anim {\n      position: fixed;\n      z-index: 1;\n      color: var(--text-color);\n      background: var(--background-modal);\n      box-shadow: var(--card-shadow);\n      border-radius: var(--default-border-radius);\n      overflow: hidden;\n      transform: scaleY(1);\n      transition: transform 0.25s;\n      transform-origin: right top;\n\n      &-flip {\n        transform-origin: right bottom;\n      }\n\n      &-wider {\n        width: max-content !important;\n      }\n    }\n\n    &-list {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow-y: auto;\n      max-height: 160px;\n      list-style-type: none;\n\n      &-item {\n        border: none;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n        background-color: var(--background-modal);\n        padding: 8px;\n        text-align: left;\n        border-radius: 0;\n        transition: all 0.3s;\n\n        &-active {\n          background-color: var(--background-accent);\n        }\n\n        &-selected {\n          font-weight: 500;\n        }\n\n        &:focus {\n          outline: none;\n        }\n\n        &:hover {\n          background-color: var(--background-accent);\n        }\n\n        &-disabled {\n          background-color: var(--disabled-input-color);\n          color: var(--disabled-font-color);\n          cursor: not-allowed;\n\n          &:hover {\n            background-color: var(--disabled-input-color);\n          }\n        }\n      }\n    }\n  }\n\n  &-fieldset {\n    position: absolute;\n    width: 100%;\n    margin: 0;\n    box-sizing: border-box;\n    border-radius: var(--dropdown-radius);\n    inset: -10px 0 0 0;\n    padding-left: 8px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--border-color);\n    pointer-events: none;\n    user-select: none;\n\n    &-legend {\n      display: block;\n      max-width: 0;\n      transition: max-width 0.2s;\n      white-space: nowrap;\n      padding: 0;\n\n      &-active {\n        max-width: 300px;\n      }\n\n      span {\n        font-size: 13px;\n        padding: 5px;\n        opacity: 0;\n      }\n\n      /* With an empty label the span would still reserve its padding, leaving a gap in\n         the fieldset's top border. Collapse it so the notch closes when there's no label. */\n      span:empty {\n        padding: 0.000001px;\n      }\n    }\n  }\n\n  &-placeholder {\n    position: absolute;\n    top: 8px;\n    left: 7px;\n    transition: all 0.2s;\n    opacity: 0;\n\n    &-shown {\n      animation: 0.2s fadeIn 0.3s forwards;\n    }\n  }\n\n  &-matLabel {\n    position: absolute;\n    transition: all 0.3s;\n    inset: 9px 0 0 7px;\n    font-size: 16px;\n    color: var(--input-label-resting-color, var(--text-light));\n    pointer-events: none;\n    user-select: none;\n\n    &-floating {\n      inset: -9px 0 0 14px;\n      font-size: 13px;\n      color: var(--input-label-floating-color, var(--text-color));\n    }\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 0.5;\n    }\n  }\n\n  &-border {\n    &-focused {\n      outline-color: var(--primary-color);\n      border-color: var(--primary-color);\n    }\n\n    &-plain {\n      border-color: transparent;\n      outline-color: transparent;\n    }\n\n    &-invalid {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n\n    &-invalid:hover {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n\n    &-error {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"dropdown.module.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.module.pcss"],"sourcesContent":["\n.required-mark {\n  padding: 0px 0px 0px 4px;\n  color: var(--required-mark-color, var(--error-color));\n}\n\n.dropdown {\n  position: relative;\n  /* See input.module.pcss for why this exists: the visible border lives on `-input`/`-fieldset`\n     below, not this root, so a wrapping ButtonGroup's --group-radius-* custom properties (which\n     inherit through any nesting depth, unlike border-radius itself) are what let this component\n     flatten correctly when it sits inside a ButtonGroup. */\n  --dropdown-radius: var(--group-radius-tl, var(--default-border-radius)) var(--group-radius-tr, var(--default-border-radius))\n    var(--group-radius-br, var(--default-border-radius)) var(--group-radius-bl, var(--default-border-radius));\n\n  &-label {\n    display: flex;\n\n    &-column {\n      flex-direction: column;\n    }\n\n    &-text {\n      white-space: nowrap;\n      margin-right: 5px;\n      margin-bottom: 5px;\n      display: flex;\n      align-items: center;\n      color: var(--text-color);\n      font-size: 12px;\n      position: absolute;\n      top: -15px;\n    }\n  }\n\n  &-input {\n    position: relative;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    background-color: var(--input-background);\n    border-radius: var(--dropdown-radius);\n\n    &-plain {\n      background: transparent;\n    }\n\n    &-readOnly {\n      cursor: default;\n    }\n\n    &:focus-within {\n      outline: none;\n    }\n\n    &-button {\n      padding: 7px 20% 7px 7.5px !important;\n      background-color: transparent;\n      border: none;\n      font-family: inherit;\n      font-size: inherit;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      text-align: left;\n      width: 100%;\n      line-height: 1.25;\n      color: var(--text-color);\n\n      &-disabled {\n        background-color: var(--disabled-input-color);\n        color: var(--disabled-font-color);\n        border-radius: var(--dropdown-radius);\n      }\n\n      &-readOnly {\n        cursor: default;\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &-icon {\n        float: right;\n        background-color: transparent;\n        border: none;\n        position: absolute;\n        outline: none;\n        right: var(--spacing-s);\n        top: 50%;\n        transform: translateY(-50%);\n        color: var(--text-color);\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n\n        &-arrow {\n          transition: transform 0.25s;\n          pointer-events: none;\n\n          &-open {\n            transform: rotate(180deg);\n          }\n        }\n      }\n    }\n\n    &-list-anim {\n      position: fixed;\n      z-index: 1;\n      color: var(--text-color);\n      background: var(--background-modal);\n      box-shadow: var(--card-shadow);\n      border-radius: var(--default-border-radius);\n      overflow: hidden;\n      transform: scaleY(1);\n      transition: transform 0.25s;\n      transform-origin: right top;\n\n      &-flip {\n        transform-origin: right bottom;\n      }\n\n      &-wider {\n        width: max-content !important;\n      }\n    }\n\n    &-list {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow-y: auto;\n      max-height: 160px;\n      list-style-type: none;\n\n      &-item {\n        border: none;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n        background-color: var(--background-modal);\n        padding: 8px;\n        text-align: left;\n        border-radius: 0;\n        transition: all 0.3s;\n\n        &-active {\n          background-color: var(--background-accent);\n        }\n\n        &-selected {\n          font-weight: 500;\n        }\n\n        &:focus {\n          outline: none;\n        }\n\n        &:hover {\n          background-color: var(--background-accent);\n        }\n\n        &-disabled {\n          background-color: var(--disabled-input-color);\n          color: var(--disabled-font-color);\n          cursor: not-allowed;\n\n          &:hover {\n            background-color: var(--disabled-input-color);\n          }\n        }\n      }\n    }\n  }\n\n  &-fieldset {\n    position: absolute;\n    width: 100%;\n    margin: 0;\n    box-sizing: border-box;\n    border-radius: var(--dropdown-radius);\n    inset: -10px 0 0 0;\n    padding-left: 8px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--border-color);\n    pointer-events: none;\n    user-select: none;\n\n    &-legend {\n      display: block;\n      max-width: 0;\n      transition: max-width 0.2s;\n      white-space: nowrap;\n      padding: 0;\n\n      &-active {\n        max-width: 300px;\n      }\n\n      span {\n        font-size: 13px;\n        padding: 5px;\n        opacity: 0;\n      }\n\n      /* With an empty label the span would still reserve its padding, leaving a gap in\n         the fieldset's top border. Collapse it so the notch closes when there's no label. */\n      span:empty {\n        padding: 0.000001px;\n      }\n    }\n  }\n\n  &-placeholder {\n    position: absolute;\n    top: 8px;\n    left: 7px;\n    transition: all 0.2s;\n    opacity: 0;\n\n    &-shown {\n      animation: 0.2s fadeIn 0.3s forwards;\n    }\n  }\n\n  &-matLabel {\n    position: absolute;\n    transition: all 0.3s;\n    inset: 9px 0 0 7px;\n    font-size: 16px;\n    color: var(--input-label-resting-color, var(--text-light));\n    pointer-events: none;\n    user-select: none;\n\n    &-floating {\n      inset: -9px 0 0 14px;\n      font-size: 13px;\n      color: var(--input-label-floating-color, var(--text-color));\n    }\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 0.5;\n    }\n  }\n\n  &-border {\n    &-focused {\n      outline-color: var(--focus-border-color, var(--primary-color));\n      border-color: var(--focus-border-color, var(--primary-color));\n    }\n\n    &-plain {\n      border-color: transparent;\n      outline-color: transparent;\n    }\n\n    &-invalid {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n\n    &-invalid:hover {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n\n    &-error {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n  }\n}\n"],"mappings":""}

package/dist/esm/common/iconPicker/iconPicker.mjs

@@ -1,2 +1,2 @@
-import e from"../ripple/ripple.mjs";import t from"./iconPicker.module.mjs";import"react";import n from"classnames";import{FontAwesomeIcon as r}from"@fortawesome/react-fontawesome";import{jsx as i,jsxs as a}from"react/jsx-runtime";function o(e){let{formValidator:t}=e;return t?t.touched&&t.hasError():!1}function s(e){let{isRequired:t,formValidator:n}=e;return!!(t||n?.validators.find(e=>e.validatorId===`required`))}function c({data:c=[],selectedId:l=null,label:u=``,onChange:d,formValidator:f=null,isRequired:p,className:m,style:h,classNames:g,styles:_,...v}){let y=f?f.value??null:l,b=o({formValidator:f,isRequired:p}),x=s({formValidator:f,isRequired:p});function S(e){f&&f.set(e),d?.(e)}return a(`div`,{...v,className:n(t.iconPicker,{[t.iconPickerError]:b},g?.root,m),style:{..._?.root,...h},children:[u&&a(`div`,{className:n(t.iconPickerLabel,g?.label),style:_?.label,children:[u,x&&` *`]}),i(`div`,{className:n(t.iconPickerItemContainer,g?.itemContainer),style:_?.itemContainer,children:c.map(({id:o,label:s,icon:c,customIcon:l})=>a(`div`,{className:n(t.iconPickerItem,{[t.iconPickerItemSelected]:y===o},g?.item),style:_?.item,title:s,tabIndex:0,role:`button`,onClick:()=>S(o),onKeyDown:({key:e})=>{e===`Enter`&&S(o)},children:[c&&i(r,{icon:c}),l??null,i(e,{})]},o))})]})}export{c as default};
+import e from"../ripple/ripple.mjs";import t from"./iconPicker.module.mjs";import{useRef as n}from"react";import r from"classnames";import{FontAwesomeIcon as i}from"@fortawesome/react-fontawesome";import{jsx as a,jsxs as o}from"react/jsx-runtime";function s(e){let{formValidator:t}=e;return t?t.touched&&t.hasError():!1}function c(e){let{isRequired:t,formValidator:n}=e;return!!(t||n?.validators.find(e=>e.validatorId===`required`))}function l({data:l=[],selectedId:u=null,label:d=``,onChange:f,formValidator:p=null,isRequired:m,className:h,style:g,classNames:_,styles:v,...y}){let b=p?p.value??null:u,x=s({formValidator:p,isRequired:m}),S=c({formValidator:p,isRequired:m}),C=n([]),w=l.findIndex(e=>e.id===b),T=w>=0?w:0;function E(e){p&&p.set(e),f?.(e)}function D(e,t){if(l.length===0)return;let n=(t+e+l.length)%l.length;C.current[n]?.focus(),E(l[n].id)}function O(e,t,n){switch(e.key){case`ArrowDown`:case`ArrowRight`:e.preventDefault(),D(1,t);break;case`ArrowUp`:case`ArrowLeft`:e.preventDefault(),D(-1,t);break;case` `:case`Enter`:e.preventDefault(),E(n);break;default:break}}return o(`div`,{...y,className:r(t.iconPicker,{[t.iconPickerError]:x},_?.root,h),style:{...v?.root,...g},children:[d&&o(`div`,{className:r(t.iconPickerLabel,_?.label),style:v?.label,children:[d,S&&` *`]}),a(`div`,{role:`radiogroup`,"aria-label":d||void 0,className:r(t.iconPickerItemContainer,_?.itemContainer),style:v?.itemContainer,children:l.map(({id:n,label:s,icon:c,customIcon:l},u)=>{let d=b===n;return o(`div`,{ref:e=>{C.current[u]=e},className:r(t.iconPickerItem,{[t.iconPickerItemSelected]:d},_?.item),style:v?.item,title:s,tabIndex:u===T?0:-1,role:`radio`,"aria-checked":d,onClick:()=>E(n),onKeyDown:e=>O(e,u,n),children:[c&&a(i,{icon:c}),l??null,a(e,{})]},n)})})]})}export{l as default};
 //# sourceMappingURL=iconPicker.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"iconPicker.mjs","names":[],"sources":["../../../../package/common/iconPicker/iconPicker.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport styles from './iconPicker.module.pcss';\nimport Ripple from '../ripple';\nimport type { IconPickerItem, IconPickerProps } from './iconPicker.types';\n\nfunction hasError(props: IconPickerProps): boolean {\n  const { formValidator } = props;\n  return formValidator ? (formValidator.touched && formValidator.hasError()) : false;\n}\n\nfunction isRequired(props: IconPickerProps): boolean {\n  const { isRequired: reqProp, formValidator } = props;\n  return !!(reqProp || formValidator?.validators.find(\n    (v) => (v as { validatorId?: string }).validatorId === 'required'\n  ));\n}\n\nexport default function IconPicker({\n  data = [],\n  selectedId = null,\n  label = '',\n  onChange,\n  formValidator = null,\n  isRequired: _isRequired,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: IconPickerProps) {\n  const currentValue = formValidator ? (formValidator.value as string) ?? null : selectedId;\n  const showError = hasError({ formValidator, isRequired: _isRequired });\n  const required = isRequired({ formValidator, isRequired: _isRequired });\n\n  function handleSelect(id: string) {\n    if (formValidator) formValidator.set(id);\n    onChange?.(id);\n  }\n\n  return (\n    <div\n      {...rest}\n      className={cx(styles.iconPicker, { [styles.iconPickerError]: showError }, classNames?.root, className)}\n      style={{ ...slotStyles?.root, ...style }}\n    >\n      {label && (\n        <div className={cx(styles.iconPickerLabel, classNames?.label)} style={slotStyles?.label}>\n          {label}\n          {required && ' *'}\n        </div>\n      )}\n      <div\n        className={cx(styles.iconPickerItemContainer, classNames?.itemContainer)}\n        style={slotStyles?.itemContainer}\n      >\n        {data.map(({ id, label: itemLabel, icon, customIcon }: IconPickerItem) => (\n          <div\n            key={id}\n            className={cx(\n              styles.iconPickerItem,\n              { [styles.iconPickerItemSelected]: currentValue === id },\n              classNames?.item\n            )}\n            style={slotStyles?.item}\n            title={itemLabel}\n            tabIndex={0}\n            role=\"button\"\n            onClick={() => handleSelect(id)}\n            onKeyDown={({ key }) => { if (key === 'Enter') handleSelect(id); }}\n          >\n            {icon && <FontAwesomeIcon icon={icon} />}\n            {customIcon ?? null}\n            <Ripple />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"sOAOA,SAAS,EAAS,EAAiC,CACjD,GAAM,CAAE,iBAAkB,EAC1B,OAAO,EAAiB,EAAc,SAAW,EAAc,SAAS,EAAK,EAC/E,CAEA,SAAS,EAAW,EAAiC,CACnD,GAAM,CAAE,WAAY,EAAS,iBAAkB,EAC/C,MAAO,CAAC,EAAE,GAAW,GAAe,WAAW,KAC5C,GAAO,EAA+B,cAAgB,UACzD,EACF,CAEA,SAAwB,EAAW,CACjC,OAAO,CAAC,EACR,aAAa,KACb,QAAQ,GACR,WACA,gBAAgB,KAChB,WAAY,EACZ,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACe,CAClB,IAAM,EAAe,EAAiB,EAAc,OAAoB,KAAO,EACzE,EAAY,EAAS,CAAE,gBAAe,WAAY,CAAY,CAAC,EAC/D,EAAW,EAAW,CAAE,gBAAe,WAAY,CAAY,CAAC,EAEtE,SAAS,EAAa,EAAY,CAC5B,GAAe,EAAc,IAAI,CAAE,EACvC,IAAW,CAAE,CACf,CAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,WAAY,EAAG,EAAO,iBAAkB,CAAU,EAAG,GAAY,KAAM,CAAS,EACrG,MAAO,CAAE,GAAG,GAAY,KAAM,GAAG,CAAM,WAHzC,CAKG,GACC,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,gBAAiB,GAAY,KAAK,EAAG,MAAO,GAAY,eAAlF,CACG,EACA,GAAY,IACV,IAEP,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,wBAAyB,GAAY,aAAa,EACvE,MAAO,GAAY,uBAElB,EAAK,KAAK,CAAE,KAAI,MAAO,EAAW,OAAM,gBACvC,EAAC,MAAD,CAEE,UAAW,EACT,EAAO,eACP,EAAG,EAAO,wBAAyB,IAAiB,CAAG,EACvD,GAAY,IACd,EACA,MAAO,GAAY,KACnB,MAAO,EACP,SAAU,EACV,KAAK,SACL,YAAe,EAAa,CAAE,EAC9B,WAAY,CAAE,SAAU,CAAM,IAAQ,SAAS,EAAa,CAAE,CAAG,WAZnE,CAcG,GAAQ,EAAC,EAAD,CAAuB,MAAO,CAAA,EACtC,GAAc,KACf,EAAC,EAAD,CAAS,CAAA,CACN,GAhBE,CAgBF,CACN,CACE,CAAA,CACF,GAET"}
+{"version":3,"file":"iconPicker.mjs","names":[],"sources":["../../../../package/common/iconPicker/iconPicker.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport styles from './iconPicker.module.pcss';\nimport Ripple from '../ripple';\nimport type { IconPickerItem, IconPickerProps } from './iconPicker.types';\n\nfunction hasError(props: IconPickerProps): boolean {\n  const { formValidator } = props;\n  return formValidator ? (formValidator.touched && formValidator.hasError()) : false;\n}\n\nfunction isRequired(props: IconPickerProps): boolean {\n  const { isRequired: reqProp, formValidator } = props;\n  return !!(reqProp || formValidator?.validators.find(\n    (v) => (v as { validatorId?: string }).validatorId === 'required'\n  ));\n}\n\nexport default function IconPicker({\n  data = [],\n  selectedId = null,\n  label = '',\n  onChange,\n  formValidator = null,\n  isRequired: _isRequired,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: IconPickerProps) {\n  const currentValue = formValidator ? (formValidator.value as string) ?? null : selectedId;\n  const showError = hasError({ formValidator, isRequired: _isRequired });\n  const required = isRequired({ formValidator, isRequired: _isRequired });\n\n  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const selectedIndex = data.findIndex((item) => item.id === currentValue);\n  const rovingIndex = selectedIndex >= 0 ? selectedIndex : 0;\n\n  function handleSelect(id: string) {\n    if (formValidator) formValidator.set(id);\n    onChange?.(id);\n  }\n\n  function moveTo(step: 1 | -1, fromIndex: number) {\n    if (data.length === 0) return;\n    const next = (fromIndex + step + data.length) % data.length;\n    itemRefs.current[next]?.focus();\n    handleSelect(data[next].id);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent, index: number, id: string) {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        event.preventDefault();\n        moveTo(1, index);\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        event.preventDefault();\n        moveTo(-1, index);\n        break;\n      case ' ':\n      case 'Enter':\n        event.preventDefault();\n        handleSelect(id);\n        break;\n      default:\n        break;\n    }\n  }\n\n  return (\n    <div\n      {...rest}\n      className={cx(styles.iconPicker, { [styles.iconPickerError]: showError }, classNames?.root, className)}\n      style={{ ...slotStyles?.root, ...style }}\n    >\n      {label && (\n        <div className={cx(styles.iconPickerLabel, classNames?.label)} style={slotStyles?.label}>\n          {label}\n          {required && ' *'}\n        </div>\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-label={label || undefined}\n        className={cx(styles.iconPickerItemContainer, classNames?.itemContainer)}\n        style={slotStyles?.itemContainer}\n      >\n        {data.map(({ id, label: itemLabel, icon, customIcon }: IconPickerItem, index) => {\n          const checked = currentValue === id;\n          return (\n            <div\n              key={id}\n              ref={(el) => { itemRefs.current[index] = el; }}\n              className={cx(\n                styles.iconPickerItem,\n                { [styles.iconPickerItemSelected]: checked },\n                classNames?.item\n              )}\n              style={slotStyles?.item}\n              title={itemLabel}\n              tabIndex={index === rovingIndex ? 0 : -1}\n              role=\"radio\"\n              aria-checked={checked}\n              onClick={() => handleSelect(id)}\n              onKeyDown={(event) => handleKeyDown(event, index, id)}\n            >\n              {icon && <FontAwesomeIcon icon={icon} />}\n              {customIcon ?? null}\n              <Ripple />\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"uPAOA,SAAS,EAAS,EAAiC,CACjD,GAAM,CAAE,iBAAkB,EAC1B,OAAO,EAAiB,EAAc,SAAW,EAAc,SAAS,EAAK,EAC/E,CAEA,SAAS,EAAW,EAAiC,CACnD,GAAM,CAAE,WAAY,EAAS,iBAAkB,EAC/C,MAAO,CAAC,EAAE,GAAW,GAAe,WAAW,KAC5C,GAAO,EAA+B,cAAgB,UACzD,EACF,CAEA,SAAwB,EAAW,CACjC,OAAO,CAAC,EACR,aAAa,KACb,QAAQ,GACR,WACA,gBAAgB,KAChB,WAAY,EACZ,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACe,CAClB,IAAM,EAAe,EAAiB,EAAc,OAAoB,KAAO,EACzE,EAAY,EAAS,CAAE,gBAAe,WAAY,CAAY,CAAC,EAC/D,EAAW,EAAW,CAAE,gBAAe,WAAY,CAAY,CAAC,EAEhE,EAAW,EAAkC,CAAC,CAAC,EAC/C,EAAgB,EAAK,UAAW,GAAS,EAAK,KAAO,CAAY,EACjE,EAAc,GAAiB,EAAI,EAAgB,EAEzD,SAAS,EAAa,EAAY,CAC5B,GAAe,EAAc,IAAI,CAAE,EACvC,IAAW,CAAE,CACf,CAEA,SAAS,EAAO,EAAc,EAAmB,CAC/C,GAAI,EAAK,SAAW,EAAG,OACvB,IAAM,GAAQ,EAAY,EAAO,EAAK,QAAU,EAAK,OACrD,EAAS,QAAQ,IAAO,MAAM,EAC9B,EAAa,EAAK,GAAM,EAAE,CAC5B,CAEA,SAAS,EAAc,EAA4B,EAAe,EAAY,CAC5E,OAAQ,EAAM,IAAd,CACE,IAAK,YACL,IAAK,aACH,EAAM,eAAe,EACrB,EAAO,EAAG,CAAK,EACf,MACF,IAAK,UACL,IAAK,YACH,EAAM,eAAe,EACrB,EAAO,GAAI,CAAK,EAChB,MACF,IAAK,IACL,IAAK,QACH,EAAM,eAAe,EACrB,EAAa,CAAE,EACf,MACF,QACE,KACJ,CACF,CAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,WAAY,EAAG,EAAO,iBAAkB,CAAU,EAAG,GAAY,KAAM,CAAS,EACrG,MAAO,CAAE,GAAG,GAAY,KAAM,GAAG,CAAM,WAHzC,CAKG,GACC,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,gBAAiB,GAAY,KAAK,EAAG,MAAO,GAAY,eAAlF,CACG,EACA,GAAY,IACV,IAEP,EAAC,MAAD,CACE,KAAK,aACL,aAAY,GAAS,IAAA,GACrB,UAAW,EAAG,EAAO,wBAAyB,GAAY,aAAa,EACvE,MAAO,GAAY,uBAElB,EAAK,KAAK,CAAE,KAAI,MAAO,EAAW,OAAM,cAA8B,IAAU,CAC/E,IAAM,EAAU,IAAiB,EACjC,OACE,EAAC,MAAD,CAEE,IAAM,GAAO,CAAE,EAAS,QAAQ,GAAS,CAAI,EAC7C,UAAW,EACT,EAAO,eACP,EAAG,EAAO,wBAAyB,CAAQ,EAC3C,GAAY,IACd,EACA,MAAO,GAAY,KACnB,MAAO,EACP,SAAU,IAAU,EAAc,EAAI,GACtC,KAAK,QACL,eAAc,EACd,YAAe,EAAa,CAAE,EAC9B,UAAY,GAAU,EAAc,EAAO,EAAO,CAAE,WAdtD,CAgBG,GAAQ,EAAC,EAAD,CAAuB,MAAO,CAAA,EACtC,GAAc,KACf,EAAC,EAAD,CAAS,CAAA,CACN,GAlBE,CAkBF,CAET,CAAC,CACE,CAAA,CACF,GAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"iconPicker.module.mjs","names":[],"sources":["../../../../package/common/iconPicker/iconPicker.module.pcss"],"sourcesContent":[".iconPicker {\n  border-width: 1px;\n  border-radius: var(--default-border-radius);\n  border-color: transparent;\n  border-style: solid;\n\n  &-label {\n    font-size: var(--text-small-font-size);\n    margin-bottom: 8px;\n  }\n\n  &-item {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 8px;\n    width: 24px;\n    height: 24px;\n    background: var(--background-accent);\n    border-radius: 200px;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    stroke: var(--text-color);\n    position: relative;\n\n    &:focus-visible {\n      outline: 1px solid var(--primary-color);\n    }\n\n    &-container {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: space-around;\n      gap: 8px 14px;\n    }\n\n    &-selected {\n      background: var(--primary-color);\n    }\n  }\n\n  &-error {\n    border-color: red;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"iconPicker.module.mjs","names":[],"sources":["../../../../package/common/iconPicker/iconPicker.module.pcss"],"sourcesContent":[".iconPicker {\n  border-width: 1px;\n  border-radius: var(--default-border-radius);\n  border-color: transparent;\n  border-style: solid;\n\n  &-label {\n    font-size: var(--text-small-font-size);\n    margin-bottom: 8px;\n  }\n\n  &-item {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 8px;\n    width: 24px;\n    height: 24px;\n    background: var(--background-accent);\n    border-radius: 200px;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    stroke: var(--text-color);\n    position: relative;\n\n    &:focus-visible {\n      outline: 1px solid var(--focus-border-color, var(--primary-color));\n    }\n\n    &-container {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: space-around;\n      gap: 8px 14px;\n    }\n\n    &-selected {\n      background: var(--primary-color);\n\n      /* The selected item's own background is --primary-color, which is also the\n         default --focus-border-color — use the on-primary color instead so the ring\n         stays visible on whichever item roving tabindex focuses by default. */\n      &:focus-visible {\n        outline-color: var(--text-on-primary);\n      }\n    }\n  }\n\n  &-error {\n    border-color: red;\n  }\n}\n"],"mappings":""}

package/dist/esm/common/infiniteBlock/infiniteBlock.mjs

@@ -1,2 +1,2 @@
-import e from"../loading/spinnerLoading/index.mjs";import t from"./infiniteBlock.module.mjs";import n,{useCallback as r,useRef as i,useState as a}from"react";import o from"classnames";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l(e,t){let n=e;for(;n.props.children!==null&&typeof n.props.children==`object`&&!Array.isArray(n.props.children);)n=n.props.children;let r=n.props.children;if(Array.isArray(r)){let e=r;if(!e[0]?.props?.children){for(let n of e)if(typeof n==`string`&&n.trim().length>0)return n.toLowerCase().startsWith(t)}return String(e[0].props.children).toLowerCase().startsWith(t)}return String(r).toLowerCase().startsWith(t)}function u(e,t,n){let r=e+t;return r===n?0:r<-1?n-1:r}function d({children:d,onScroll:f,className:p=``,isDataLoading:m=!1,setHighlightedIndex:h=()=>null}){let g=i(null),_=i(!1),[v,y]=a(!1),b=i(-1),x=i(null),S=r(()=>{let e=g.current;if(!e)return;let{scrollTop:t,offsetHeight:n,scrollHeight:r}=e;Math.abs(t+n-r)>5||_.current||(_.current=!0,y(!0),f().then(()=>{_.current=!1,y(!1)}))},[f]),C=r(e=>{let t=g.current;if(!t)return;let r=n.Children.toArray(d),i=b.current;switch(e.key){case`ArrowDown`:i=u(i,1,r.length);break;case`ArrowUp`:i=u(i,-1,r.length);break;default:for(let t=0;t<r.length;t++)if(l(r[t],e.key)){if(i>=t&&x.current===e.key)continue;i=t;break}}if(b.current=i,x.current=e.key,i>=0){let e=t.children[i];if(e){let n=e.offsetTop,r=n+e.offsetHeight;n<t.scrollTop?t.scrollTop=n:r>t.scrollTop+t.clientHeight&&(t.scrollTop=r-t.clientHeight)}h(i)}},[d,h]);return c(`div`,{className:o(t.infiniteBlock,p),onScroll:S,onKeyDown:C,tabIndex:0,ref:g,children:[m?s(`div`,{className:t.spinnerWrapper,children:s(e,{className:t.spinner})}):d,v&&s(`div`,{className:t.spinnerWrapper,children:s(e,{className:t.spinner})})]})}export{d as default};
+import e from"../loading/spinnerLoading/index.mjs";import t from"./infiniteBlock.module.mjs";import n,{useCallback as r,useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";function d(e){return e==null||typeof e==`boolean`?``:typeof e==`string`||typeof e==`number`?String(e):Array.isArray(e)?e.map(d).join(``):n.isValidElement(e)?d(e.props.children):``}function f(e,t,n){return e===-1?t>0?0:n-1:(e+t+n)%n}function p(e,t,n){let[r,s]=o(!1),c=a(!1),l=a(null),u=a(t);return i(()=>{u.current=t}),i(()=>{let t=e.current,r=l.current;if(n||!t||!r)return;let i=!1,a=()=>{c.current||(c.current=!0,s(!0),u.current().catch(()=>null).finally(()=>{i||(c.current=!1,s(!1),o.unobserve(r),o.observe(r))}))},o=new IntersectionObserver(([e])=>{e.isIntersecting&&a()},{root:t});return o.observe(r),()=>{i=!0,o.disconnect()}},[e,n]),{isLoading:r,sentinelRef:l}}function m(e,t){let i=a(null),o=a(-1),s=a(null);return{containerRef:i,onKeyDown:r(r=>{let a=i.current;if(!a)return;let c=n.Children.toArray(e);if(c.length===0)return;let l=o.current;if(r.key===`ArrowDown`)r.preventDefault(),l=f(l,1,c.length);else if(r.key===`ArrowUp`)r.preventDefault(),l=f(l,-1,c.length);else if(r.key.length===1){let e=r.key.toLowerCase(),t=s.current===r.key?l+1:0,n=t=>d(t).toLowerCase().startsWith(e),i=c.slice(t).findIndex(n),a=i===-1?c.slice(0,t).findIndex(n):t+i;if(s.current=r.key,a===-1)return;l=a}else return;s.current=r.key,o.current=l;let u=a.children[l];if(u){let e=u.offsetTop,t=e+u.offsetHeight;e<a.scrollTop?a.scrollTop=e:t>a.scrollTop+a.clientHeight&&(a.scrollTop=t-a.clientHeight)}t(l)},[e,t])}}function h({children:n,onScroll:r,className:i=``,isDataLoading:a=!1,setHighlightedIndex:o=()=>null}){let{containerRef:d,onKeyDown:f}=m(n,o),{isLoading:h,sentinelRef:g}=p(d,r,a);return l(`div`,{className:s(t.infiniteBlock,i),onKeyDown:f,tabIndex:0,ref:d,children:a?l(`div`,{className:t.spinnerWrapper,children:l(e,{className:t.spinner})}):u(c,{children:[n,l(`div`,{ref:g,className:t.sentinel,"aria-hidden":`true`}),h&&l(`div`,{className:t.spinnerWrapper,children:l(e,{className:t.spinner})})]})})}export{h as default};
 //# sourceMappingURL=infiniteBlock.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"infiniteBlock.mjs","names":[],"sources":["../../../../package/common/infiniteBlock/infiniteBlock.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback } from 'react';\nimport cx from 'classnames';\n\nimport styles from './infiniteBlock.module.pcss';\nimport SpinnerLoading from '../loading/spinnerLoading';\nimport type { InfiniteBlockProps } from './infiniteBlock.types';\n\n// Walk down a React element tree until we reach a string leaf or an array of children.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction childStartsWithKey(child: React.ReactElement<any>, key: string): boolean {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  let node: React.ReactElement<any> = child;\n\n  while (\n    node.props.children !== null &&\n    typeof node.props.children === 'object' &&\n    !Array.isArray(node.props.children)\n  ) {\n    node = node.props.children as typeof node;\n  }\n\n  const content: unknown = node.props.children;\n\n  if (Array.isArray(content)) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const arr = content as any[];\n    // If the first element has no children of its own, scan for a raw string\n    if (!arr[0]?.props?.children) {\n      for (const item of arr) {\n        if (typeof item === 'string' && item.trim().length > 0) {\n          return item.toLowerCase().startsWith(key);\n        }\n      }\n    }\n    return String(arr[0].props.children).toLowerCase().startsWith(key);\n  }\n\n  return String(content).toLowerCase().startsWith(key);\n}\n\nfunction clampIndex(index: number, change: number, length: number): number {\n  const next = index + change;\n  if (next === length) return 0;\n  if (next < -1) return length - 1;\n  return next;\n}\n\nfunction InfiniteBlock({\n  children,\n  onScroll,\n  className = '',\n  isDataLoading = false,\n  setHighlightedIndex = () => null,\n}: InfiniteBlockProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Use a ref (not state) for the scroll-guard so reads are always synchronous,\n  // avoiding the React-batching race where two scroll events fire before the\n  // first setState call has been committed.\n  const isScrollLoadingRef = useRef(false);\n  const [showScrollSpinner, setShowScrollSpinner] = useState(false);\n\n  // Keyboard nav state lives in refs — it doesn't affect rendering.\n  const indexRef = useRef(-1);\n  const lastKeyRef = useRef<string | null>(null);\n\n  const handleScroll = useCallback(() => {\n    const el = containerRef.current;\n    if (!el) return;\n\n    const { scrollTop, offsetHeight, scrollHeight } = el;\n\n    // Browsers calculate scrollTop with a small floating-point error under zoom,\n    // so we allow up to 5px of slack before deciding we are at the bottom.\n    if (Math.abs(scrollTop + offsetHeight - scrollHeight) > 5) return;\n    if (isScrollLoadingRef.current) return;\n\n    isScrollLoadingRef.current = true;\n    setShowScrollSpinner(true);\n    onScroll().then(() => {\n      isScrollLoadingRef.current = false;\n      setShowScrollSpinner(false);\n    });\n  }, [onScroll]);\n\n  const respondToUserInput = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const el = containerRef.current;\n      if (!el) return;\n\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const childArray = React.Children.toArray(children) as React.ReactElement<any>[];\n      let index = indexRef.current;\n\n      switch (event.key) {\n        case 'ArrowDown':\n          index = clampIndex(index, 1, childArray.length);\n          break;\n        case 'ArrowUp':\n          index = clampIndex(index, -1, childArray.length);\n          break;\n        default:\n          for (let i = 0; i < childArray.length; i++) {\n            if (childStartsWithKey(childArray[i], event.key)) {\n              if (index >= i && lastKeyRef.current === event.key) {\n                continue;\n              }\n              index = i;\n              break;\n            }\n          }\n      }\n\n      indexRef.current = index;\n      lastKeyRef.current = event.key;\n\n      if (index >= 0) {\n        const child = el.children[index] as HTMLElement | undefined;\n        if (child) {\n          const childTop = child.offsetTop;\n          const childBottom = childTop + child.offsetHeight;\n          if (childTop < el.scrollTop) {\n            el.scrollTop = childTop;\n          } else if (childBottom > el.scrollTop + el.clientHeight) {\n            el.scrollTop = childBottom - el.clientHeight;\n          }\n        }\n        setHighlightedIndex(index);\n      }\n    },\n    [children, setHighlightedIndex]\n  );\n\n  return (\n    <div\n      className={cx(styles.infiniteBlock, className)}\n      onScroll={handleScroll}\n      onKeyDown={respondToUserInput}\n      tabIndex={0}\n      ref={containerRef}\n    >\n      {isDataLoading ? (\n        <div className={styles.spinnerWrapper}>\n          <SpinnerLoading className={styles.spinner} />\n        </div>\n      ) : children}\n      {showScrollSpinner && (\n        <div className={styles.spinnerWrapper}>\n          <SpinnerLoading className={styles.spinner} />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default InfiniteBlock;\n"],"mappings":"0OASA,SAAS,EAAmB,EAAgC,EAAsB,CAEhF,IAAI,EAAgC,EAEpC,KACE,EAAK,MAAM,WAAa,MACxB,OAAO,EAAK,MAAM,UAAa,UAC/B,CAAC,MAAM,QAAQ,EAAK,MAAM,QAAQ,GAElC,EAAO,EAAK,MAAM,SAGpB,IAAM,EAAmB,EAAK,MAAM,SAEpC,GAAI,MAAM,QAAQ,CAAO,EAAG,CAE1B,IAAM,EAAM,EAEZ,GAAI,CAAC,EAAI,IAAI,OAAO,cACb,IAAM,KAAQ,EACjB,GAAI,OAAO,GAAS,UAAY,EAAK,KAAK,EAAE,OAAS,EACnD,OAAO,EAAK,YAAY,EAAE,WAAW,CAAG,CAAA,CAI9C,OAAO,OAAO,EAAI,GAAG,MAAM,QAAQ,EAAE,YAAY,EAAE,WAAW,CAAG,CACnE,CAEA,OAAO,OAAO,CAAO,EAAE,YAAY,EAAE,WAAW,CAAG,CACrD,CAEA,SAAS,EAAW,EAAe,EAAgB,EAAwB,CACzE,IAAM,EAAO,EAAQ,EAGrB,OAFI,IAAS,EAAe,EACxB,EAAO,GAAW,EAAS,EACxB,CACT,CAEA,SAAS,EAAc,CACrB,WACA,WACA,YAAY,GACZ,gBAAgB,GAChB,0BAA4B,MACP,CACrB,IAAM,EAAe,EAAuB,IAAI,EAK1C,EAAqB,EAAO,EAAK,EACjC,CAAC,EAAmB,GAAwB,EAAS,EAAK,EAG1D,EAAW,EAAO,EAAE,EACpB,EAAa,EAAsB,IAAI,EAEvC,EAAe,MAAkB,CACrC,IAAM,EAAK,EAAa,QACxB,GAAI,CAAC,EAAI,OAET,GAAM,CAAE,YAAW,eAAc,gBAAiB,EAI9C,KAAK,IAAI,EAAY,EAAe,CAAY,EAAI,GACpD,EAAmB,UAEvB,EAAmB,QAAU,GAC7B,EAAqB,EAAI,EACzB,EAAS,EAAE,SAAW,CACpB,EAAmB,QAAU,GAC7B,EAAqB,EAAK,CAC5B,CAAC,EACH,EAAG,CAAC,CAAQ,CAAC,EAEP,EAAqB,EACxB,GAA+C,CAC9C,IAAM,EAAK,EAAa,QACxB,GAAI,CAAC,EAAI,OAGT,IAAM,EAAa,EAAM,SAAS,QAAQ,CAAQ,EAC9C,EAAQ,EAAS,QAErB,OAAQ,EAAM,IAAd,CACE,IAAK,YACH,EAAQ,EAAW,EAAO,EAAG,EAAW,MAAM,EAC9C,MACF,IAAK,UACH,EAAQ,EAAW,EAAO,GAAI,EAAW,MAAM,EAC/C,MACF,QACE,IAAK,IAAI,EAAI,EAAG,EAAI,EAAW,OAAQ,IACrC,GAAI,EAAmB,EAAW,GAAI,EAAM,GAAG,EAAG,CAChD,GAAI,GAAS,GAAK,EAAW,UAAY,EAAM,IAC7C,SAEF,EAAQ,EACR,KACF,CAEN,CAKA,GAHA,EAAS,QAAU,EACnB,EAAW,QAAU,EAAM,IAEvB,GAAS,EAAG,CACd,IAAM,EAAQ,EAAG,SAAS,GAC1B,GAAI,EAAO,CACT,IAAM,EAAW,EAAM,UACjB,EAAc,EAAW,EAAM,aACjC,EAAW,EAAG,UAChB,EAAG,UAAY,EACN,EAAc,EAAG,UAAY,EAAG,eACzC,EAAG,UAAY,EAAc,EAAG,aAEpC,CACA,EAAoB,CAAK,CAC3B,CACF,EACA,CAAC,EAAU,CAAmB,CAChC,EAEA,OACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,cAAe,CAAS,EAC7C,SAAU,EACV,UAAW,EACX,SAAU,EACV,IAAK,WALP,CAOG,EACC,EAAC,MAAD,CAAK,UAAW,EAAO,wBACrB,EAAC,EAAD,CAAgB,UAAW,EAAO,OAAU,CAAA,CACzC,CAAA,EACH,EACH,GACC,EAAC,MAAD,CAAK,UAAW,EAAO,wBACrB,EAAC,EAAD,CAAgB,UAAW,EAAO,OAAU,CAAA,CACzC,CAAA,CAEJ,GAET"}
+{"version":3,"file":"infiniteBlock.mjs","names":[],"sources":["../../../../package/common/infiniteBlock/infiniteBlock.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\n\nimport styles from './infiniteBlock.module.pcss';\nimport SpinnerLoading from '../loading/spinnerLoading';\nimport type { InfiniteBlockProps } from './infiniteBlock.types';\n\n// Flattens a React node down to the text it renders, so keyboard type-ahead can match\n// against whatever a child actually displays — a plain string, a number, or something\n// wrapped in nested elements/fragments/arrays (e.g. an icon + label pair).\nfunction getNodeText(node: React.ReactNode): string {\n  if (node === null || node === undefined || typeof node === 'boolean') return '';\n  if (typeof node === 'string' || typeof node === 'number') return String(node);\n  if (Array.isArray(node)) return node.map(getNodeText).join('');\n  if (React.isValidElement<{ children?: React.ReactNode }>(node)) {\n    return getNodeText(node.props.children);\n  }\n  return '';\n}\n\n// Cycles the index by `change`, wrapping directly from last to first (and first to last) —\n// no \"nothing highlighted\" stop in between, in either direction. `-1` means nothing is\n// highlighted yet: ArrowDown from there starts at the first item, ArrowUp at the last.\nfunction clampIndex(index: number, change: number, length: number): number {\n  if (index === -1) return change > 0 ? 0 : length - 1;\n  return (index + change + length) % length;\n}\n\n// Loads more items once a sentinel element at the end of the list scrolls into view.\n// IntersectionObserver only fires on a change of intersection state, so if a page of\n// freshly-loaded items still doesn't fill the container, the sentinel stays visible and\n// we have to re-arm the observer ourselves to pick up the next page.\nfunction useInfiniteScroll(\n  containerRef: React.RefObject<HTMLDivElement | null>,\n  onScroll: () => Promise<void>,\n  disabled: boolean\n) {\n  const [isLoading, setIsLoading] = useState(false);\n  const isLoadingRef = useRef(false);\n  const sentinelRef = useRef<HTMLDivElement>(null);\n\n  // Kept in a ref so a caller passing a fresh onScroll function each render doesn't\n  // tear down and recreate the observer every time.\n  const onScrollRef = useRef(onScroll);\n  useEffect(() => {\n    onScrollRef.current = onScroll;\n  });\n\n  useEffect(() => {\n    const root = containerRef.current;\n    const sentinel = sentinelRef.current;\n    if (disabled || !root || !sentinel) return undefined;\n\n    let cancelled = false;\n\n    const loadMore = () => {\n      if (isLoadingRef.current) return;\n      isLoadingRef.current = true;\n      setIsLoading(true);\n\n      onScrollRef\n        .current()\n        .catch(() => null)\n        .finally(() => {\n          if (cancelled) return;\n          isLoadingRef.current = false;\n          setIsLoading(false);\n          observer.unobserve(sentinel);\n          observer.observe(sentinel);\n        });\n    };\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) loadMore();\n      },\n      { root }\n    );\n\n    observer.observe(sentinel);\n\n    return () => {\n      cancelled = true;\n      observer.disconnect();\n    };\n  }, [containerRef, disabled]);\n\n  return { isLoading, sentinelRef };\n}\n\n// Arrow-key navigation plus type-ahead: pressing a character key jumps to the next child\n// whose text starts with it, cycling through repeats and wrapping at the end of the list.\nfunction useTypeaheadNav(\n  children: React.ReactNode,\n  setHighlightedIndex: (index: number) => void\n) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const indexRef = useRef(-1);\n  const lastKeyRef = useRef<string | null>(null);\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const childArray = React.Children.toArray(children);\n      if (childArray.length === 0) return;\n\n      let index = indexRef.current;\n\n      if (event.key === 'ArrowDown') {\n        // Without this, the browser's own native \"scroll a focused scrollable element on\n        // arrow keys\" behavior fires alongside our scrollIntoView math below, stacking an\n        // extra native scroll on top of ours on every press until the highlighted item is\n        // pushed out of view entirely.\n        event.preventDefault();\n        index = clampIndex(index, 1, childArray.length);\n      } else if (event.key === 'ArrowUp') {\n        event.preventDefault();\n        index = clampIndex(index, -1, childArray.length);\n      } else if (event.key.length === 1) {\n        const key = event.key.toLowerCase();\n        const repeatingKey = lastKeyRef.current === event.key;\n        const searchStart = repeatingKey ? index + 1 : 0;\n        const startsWithKey = (child: React.ReactNode) =>\n          getNodeText(child).toLowerCase().startsWith(key);\n\n        const afterCurrent = childArray.slice(searchStart).findIndex(startsWithKey);\n        const match =\n          afterCurrent !== -1\n            ? searchStart + afterCurrent\n            : childArray.slice(0, searchStart).findIndex(startsWithKey);\n\n        lastKeyRef.current = event.key;\n        if (match === -1) return;\n        index = match;\n      } else {\n        return;\n      }\n\n      lastKeyRef.current = event.key;\n      indexRef.current = index;\n\n      const child = container.children[index] as HTMLElement | undefined;\n      if (child) {\n        const childTop = child.offsetTop;\n        const childBottom = childTop + child.offsetHeight;\n        if (childTop < container.scrollTop) {\n          container.scrollTop = childTop;\n        } else if (childBottom > container.scrollTop + container.clientHeight) {\n          container.scrollTop = childBottom - container.clientHeight;\n        }\n      }\n      setHighlightedIndex(index);\n    },\n    [children, setHighlightedIndex]\n  );\n\n  return { containerRef, onKeyDown };\n}\n\nfunction InfiniteBlock({\n  children,\n  onScroll,\n  className = '',\n  isDataLoading = false,\n  setHighlightedIndex = () => null,\n}: InfiniteBlockProps) {\n  const { containerRef, onKeyDown } = useTypeaheadNav(children, setHighlightedIndex);\n  const { isLoading: showScrollSpinner, sentinelRef } = useInfiniteScroll(\n    containerRef,\n    onScroll,\n    isDataLoading\n  );\n\n  return (\n    <div\n      className={cx(styles.infiniteBlock, className)}\n      onKeyDown={onKeyDown}\n      tabIndex={0}\n      ref={containerRef}\n    >\n      {isDataLoading ? (\n        <div className={styles.spinnerWrapper}>\n          <SpinnerLoading className={styles.spinner} />\n        </div>\n      ) : (\n        <>\n          {children}\n          <div ref={sentinelRef} className={styles.sentinel} aria-hidden=\"true\" />\n          {showScrollSpinner && (\n            <div className={styles.spinnerWrapper}>\n              <SpinnerLoading className={styles.spinner} />\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\nexport default InfiniteBlock;\n"],"mappings":"uQAUA,SAAS,EAAY,EAA+B,CAOlD,OANI,GAAS,MAA8B,OAAO,GAAS,UAAkB,GACzE,OAAO,GAAS,UAAY,OAAO,GAAS,SAAiB,OAAO,CAAI,EACxE,MAAM,QAAQ,CAAI,EAAU,EAAK,IAAI,CAAW,EAAE,KAAK,EAAE,EACzD,EAAM,eAA+C,CAAI,EACpD,EAAY,EAAK,MAAM,QAAQ,EAEjC,EACT,CAKA,SAAS,EAAW,EAAe,EAAgB,EAAwB,CAEzE,OADI,IAAU,GAAW,EAAS,EAAI,EAAI,EAAS,GAC3C,EAAQ,EAAS,GAAU,CACrC,CAMA,SAAS,EACP,EACA,EACA,EACA,CACA,GAAM,CAAC,EAAW,GAAgB,EAAS,EAAK,EAC1C,EAAe,EAAO,EAAK,EAC3B,EAAc,EAAuB,IAAI,EAIzC,EAAc,EAAO,CAAQ,EA4CnC,OA3CA,MAAgB,CACd,EAAY,QAAU,CACxB,CAAC,EAED,MAAgB,CACd,IAAM,EAAO,EAAa,QACpB,EAAW,EAAY,QAC7B,GAAI,GAAY,CAAC,GAAQ,CAAC,EAAU,OAEpC,IAAI,EAAY,GAEV,MAAiB,CACjB,EAAa,UACjB,EAAa,QAAU,GACvB,EAAa,EAAI,EAEjB,EACG,QAAQ,EACR,UAAY,IAAI,EAChB,YAAc,CACT,IACJ,EAAa,QAAU,GACvB,EAAa,EAAK,EAClB,EAAS,UAAU,CAAQ,EAC3B,EAAS,QAAQ,CAAQ,EAC3B,CAAC,EACL,EAEM,EAAW,IAAI,sBAClB,CAAC,KAAW,CACP,EAAM,gBAAgB,EAAS,CACrC,EACA,CAAE,MAAK,CACT,EAIA,OAFA,EAAS,QAAQ,CAAQ,MAEZ,CACX,EAAY,GACZ,EAAS,WAAW,CACtB,CACF,EAAG,CAAC,EAAc,CAAQ,CAAC,EAEpB,CAAE,YAAW,aAAY,CAClC,CAIA,SAAS,EACP,EACA,EACA,CACA,IAAM,EAAe,EAAuB,IAAI,EAC1C,EAAW,EAAO,EAAE,EACpB,EAAa,EAAsB,IAAI,EA4D7C,MAAO,CAAE,eAAc,UA1DL,EACf,GAA+C,CAC9C,IAAM,EAAY,EAAa,QAC/B,GAAI,CAAC,EAAW,OAEhB,IAAM,EAAa,EAAM,SAAS,QAAQ,CAAQ,EAClD,GAAI,EAAW,SAAW,EAAG,OAE7B,IAAI,EAAQ,EAAS,QAErB,GAAI,EAAM,MAAQ,YAKhB,EAAM,eAAe,EACrB,EAAQ,EAAW,EAAO,EAAG,EAAW,MAAM,OACzC,GAAI,EAAM,MAAQ,UACvB,EAAM,eAAe,EACrB,EAAQ,EAAW,EAAO,GAAI,EAAW,MAAM,OAC1C,GAAI,EAAM,IAAI,SAAW,EAAG,CACjC,IAAM,EAAM,EAAM,IAAI,YAAY,EAE5B,EADe,EAAW,UAAY,EAAM,IACf,EAAQ,EAAI,EACzC,EAAiB,GACrB,EAAY,CAAK,EAAE,YAAY,EAAE,WAAW,CAAG,EAE3C,EAAe,EAAW,MAAM,CAAW,EAAE,UAAU,CAAa,EACpE,EACJ,IAAiB,GAEb,EAAW,MAAM,EAAG,CAAW,EAAE,UAAU,CAAa,EADxD,EAAc,EAIpB,GADA,EAAW,QAAU,EAAM,IACvB,IAAU,GAAI,OAClB,EAAQ,CACV,MACE,OAGF,EAAW,QAAU,EAAM,IAC3B,EAAS,QAAU,EAEnB,IAAM,EAAQ,EAAU,SAAS,GACjC,GAAI,EAAO,CACT,IAAM,EAAW,EAAM,UACjB,EAAc,EAAW,EAAM,aACjC,EAAW,EAAU,UACvB,EAAU,UAAY,EACb,EAAc,EAAU,UAAY,EAAU,eACvD,EAAU,UAAY,EAAc,EAAU,aAElD,CACA,EAAoB,CAAK,CAC3B,EACA,CAAC,EAAU,CAAmB,CAGT,CAAU,CACnC,CAEA,SAAS,EAAc,CACrB,WACA,WACA,YAAY,GACZ,gBAAgB,GAChB,0BAA4B,MACP,CACrB,GAAM,CAAE,eAAc,aAAc,EAAgB,EAAU,CAAmB,EAC3E,CAAE,UAAW,EAAmB,eAAgB,EACpD,EACA,EACA,CACF,EAEA,OACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,cAAe,CAAS,EAClC,YACX,SAAU,EACV,IAAK,WAEJ,EACC,EAAC,MAAD,CAAK,UAAW,EAAO,wBACrB,EAAC,EAAD,CAAgB,UAAW,EAAO,OAAU,CAAA,CACzC,CAAA,EAEL,EAAA,EAAA,CAAA,SAAA,CACG,EACD,EAAC,MAAD,CAAK,IAAK,EAAa,UAAW,EAAO,SAAU,cAAY,MAAQ,CAAA,EACtE,GACC,EAAC,MAAD,CAAK,UAAW,EAAO,wBACrB,EAAC,EAAD,CAAgB,UAAW,EAAO,OAAU,CAAA,CACzC,CAAA,CAEP,CAAA,CAAA,CAED,CAAA,CAET"}

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

@@ -1,2 +1,2 @@
-var e={infiniteBlock:`infiniteBlock_dFv-h`,"spinner-wrapper":`spinner-wrapper_hsgWz`,spinnerWrapper:`spinner-wrapper_hsgWz`,spinner:`spinner_VjUS2`};export{e as default};
+var e={infiniteBlock:`infiniteBlock_dFv-h`,sentinel:`sentinel_n-Zie`,"spinner-wrapper":`spinner-wrapper_hsgWz`,spinnerWrapper:`spinner-wrapper_hsgWz`,spinner:`spinner_VjUS2`};export{e as default};
 //# sourceMappingURL=infiniteBlock.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"infiniteBlock.module.mjs","names":[],"sources":["../../../../package/common/infiniteBlock/infiniteBlock.module.pcss"],"sourcesContent":[".infiniteBlock {\n  max-height: none;\n}\n\n.spinner-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 0;\n}\n\n.spinner {\n  width: 32px;\n  height: 32px;\n}\n"],"mappings":""}
+{"version":3,"file":"infiniteBlock.module.mjs","names":[],"sources":["../../../../package/common/infiniteBlock/infiniteBlock.module.pcss"],"sourcesContent":[".infiniteBlock {\n  position: relative;\n  max-height: none;\n}\n\n.sentinel {\n  height: 1px;\n}\n\n.spinner-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 0;\n}\n\n.spinner {\n  width: 32px;\n  height: 32px;\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"input.module.mjs","names":[],"sources":["../../../../package/common/input/input.module.pcss"],"sourcesContent":["\n.required-mark {\n  padding: 0px 0px 0px 4px;\n  color: var(--required-mark-color, var(--error-color));\n}\n\n.input {\n  position: relative;\n  width: 100%;\n  --input-notch-height: 1.75em;\n  --input-icon-size: 1.2em;\n  --input-icon-offset: 0.6em;\n  --input-icon-gutter: 2.2em;\n  /* The visible border lives on `fieldset`/`container` below, not this root — buried inside a\n     `<label>`, out of reach of a plain ancestor selector. --group-radius-* are custom properties\n     (not defined here) that a wrapping ButtonGroup sets per corner on the position it occupies;\n     unlike border-radius itself they inherit through any nesting depth, so they reach these\n     descendants and flatten the right corners when this Input sits inside a ButtonGroup. */\n  --input-radius: var(--group-radius-tl, var(--default-border-radius)) var(--group-radius-tr, var(--default-border-radius))\n    var(--group-radius-br, var(--default-border-radius)) var(--group-radius-bl, var(--default-border-radius));\n\n  &-placeholder {\n    position: absolute;\n    top: 50%;\n    left: 7px;\n    transform: translateY(-50%);\n    transition: all 0.2s;\n    opacity: 0;\n    user-select: none;\n    pointer-events: none;\n\n    &-shown {\n      animation: 0.2s fadeIn 0.3s forwards;\n    }\n\n    &-multiline {\n      top: 14px;\n      transform: translateY(0);\n    }\n  }\n\n  &-matLabel {\n    position: absolute;\n    transition: all 0.3s;\n    left: 7px;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 1em;\n    color: var(--input-label-resting-color, var(--text-light));\n    pointer-events: none;\n    user-select: none;\n\n    &-floating {\n      top: 0;\n      bottom: auto;\n      left: 14px;\n      right: 0;\n      font-size: 0.8em;\n      color: var(--input-label-floating-color, var(--text-color));\n      transform: translateY(-50%);\n    }\n\n    &-multiline {\n      top: 14px;\n      transform: translateY(0);\n    }\n  }\n\n  &-fieldset {\n    position: absolute;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    min-width: 0;\n    box-sizing: border-box;\n    border-radius: var(--input-radius);\n    font-size: 0.8em;\n    inset: calc(var(--input-notch-height) / -2) 0 0 0;\n    padding-left: 8px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--border-color);\n    pointer-events: none;\n    user-select: none;\n\n    &-no-notch {\n      /* Only Firefox actually renders the reserved notch space as a visible overlap on\n         label-less inputs (e.g. crossing a divider directly above it in a tightly-packed\n         layout like the sidebar search box); Chrome's rendering was never broken, just\n         consistently sized with every other input. @supports (-moz-appearance: none) is a\n         reliable Firefox-only feature query, so this scopes the fix to where it's needed\n         instead of changing every browser's sizing. */\n      @supports (-moz-appearance: none) {\n        inset: 0;\n      }\n    }\n\n    &-legend {\n      display: block;\n      max-width: 0;\n      transition: max-width 0.2s;\n      white-space: nowrap;\n      padding: 0;\n\n      &-active {\n        max-width: 300px;\n      }\n\n      span {\n        line-height: var(--input-notch-height);\n        padding: 0 5px;\n        opacity: 0;\n      }\n\n      span:empty {\n        padding: 0.000001px;\n      }\n    }\n  }\n\n  &-iconLeft {\n    .input-matLabel {\n      left: var(--input-icon-gutter);\n\n      &-floating {\n        left: calc(var(--input-icon-gutter) + 0.5em);\n      }\n    }\n\n    .input-placeholder {\n      left: var(--input-icon-gutter);\n    }\n\n    .input-fieldset {\n      padding-left: var(--input-icon-gutter);\n    }\n  }\n\n  &-container {\n    display: flex;\n    align-items: center;\n    border-radius: var(--input-radius);\n    background-color: var(--input-background);\n    transition: border-color;\n    cursor: text;\n    height: 100%;\n\n    &-multiline {\n      overflow: hidden;\n      padding-top: 10px;\n      align-items: flex-start;\n    }\n\n    &-border {\n      outline: 1px solid var(--border-color);\n      transition: border-color;\n      background-color: var(--input-background);\n      outline: none;\n\n      &-focused {\n        outline-color: var(--primary-color);\n        border-color: var(--primary-color);\n      }\n\n      &-searchFocused {\n        outline-color: var(--search-input-color);\n        outline-width: 2px;\n        border-color: var(--search-input-color);\n      }\n\n      &-invalid {\n        outline-color: var(--error-border-color);\n        border-color: var(--error-border-color);\n      }\n\n      &-invalid:hover {\n        outline-color: var(--error-border-color);\n        border-color: var(--error-border-color);\n      }\n\n      &-error {\n        outline-color: var(--error-border-color);\n        border-color: var(--error-border-color);\n      }\n    }\n  }\n\n  &-label {\n    display: flex;\n    color: var(--text-color);\n    height: 100%;\n\n    &-column {\n      flex-direction: column;\n    }\n\n    &-text {\n      white-space: nowrap;\n      margin-right: 5px;\n      margin-bottom: 6px;\n      display: flex;\n      align-items: center;\n      color: color(var(--border-color) lightness(40%));\n      background-color: transparent;\n      font-size: 12px;\n      position: absolute;\n      top: -15px;\n      white-space: nowrap;\n    }\n  }\n\n  &-upper-right-label {\n    position: absolute;\n    transform: translateY(calc(-100% - 1.5px));\n    right: 8px;\n    min-height: 12px;\n    font-size: 12px;\n    color: color(var(--border-color) lightness(40%));\n  }\n\n  &-field {\n    appearance: none;\n    -webkit-appearance: none;\n    font-family: inherit;\n    font-size: inherit;\n    box-sizing: border-box;\n    resize: none;\n    width: 100%;\n    border: none;\n    border-radius: var(--default-border-radius);\n    overflow: hidden;\n    line-height: 1.25;\n    color: var(--text-color);\n    background: transparent;\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: var(--text-light);\n    }\n\n    /* The browser's own search-cancel decoration doesn't match the theme — Search has its own\n       themed clear icon (see isSearchCleared in input.tsx) that replaces it. */\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n      appearance: none;\n      display: none;\n    }\n\n    &-withIcon {\n      padding-right: var(--input-icon-gutter) !important;\n\n      &-left {\n        padding-right: 0.643em !important;\n        padding-left: var(--input-icon-gutter) !important;\n      }\n    }\n\n    &-suffix {\n      padding-right: 9px;\n    }\n\n    &-date {\n      padding: 6px 9px;\n      color-scheme: dark;\n\n      svg {\n        color: white;\n      }\n    }\n\n    &-default {\n      padding: 8px 7.5px 6px;\n    }\n\n    &[disabled] {\n      background-color: var(--disabled-input-color);\n      color: var(--disabled-font-color);\n      -webkit-text-fill-color: var(--disabled-font-color);\n      opacity: 1;\n\n      &::placeholder {\n        color: var(--disabled-font-color);\n        -webkit-text-fill-color: var(--disabled-font-color);\n      }\n    }\n\n    &-readOnly {\n      cursor: default;\n      color: var(--text-dark);\n      -webkit-text-fill-color: var(--text-dark);\n    }\n\n    &-uppercase {\n      text-transform: uppercase;\n    }\n\n    &-multiline {\n      overflow-y: auto;\n      resize: vertical;\n      padding-top: 4px;\n      min-height: 30px;\n\n      &-autoResize {\n        resize: none;\n        overflow: hidden;\n      }\n    }\n\n    &-icon {\n      appearance: none;\n      -webkit-appearance: none;\n      box-sizing: border-box;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      background-color: transparent;\n      border: none;\n      position: absolute;\n      outline: none;\n      right: var(--input-icon-offset);\n      color: var(--input-icon-color);\n      width: var(--input-icon-size) !important;\n      height: var(--input-icon-size) !important;\n      user-select: none;\n      top: 50%;\n      transform: translateY(-50%);\n\n      &:focus-visible {\n        outline: 1px solid var(--primary-color);\n        outline-offset: 2px;\n      }\n\n      &-left {\n        left: var(--input-icon-offset);\n      }\n\n      &-notClickable {\n        pointer-events: none;\n      }\n    }\n  }\n\n  &-error {\n    height: 1em;\n    padding-top: 3px;\n    color: var(--error-font-color);\n    font-size: 11px;\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 0.5;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"input.module.mjs","names":[],"sources":["../../../../package/common/input/input.module.pcss"],"sourcesContent":["\n.required-mark {\n  padding: 0px 0px 0px 4px;\n  color: var(--required-mark-color, var(--error-color));\n}\n\n.input {\n  position: relative;\n  width: 100%;\n  --input-notch-height: 1.75em;\n  --input-icon-size: 1.2em;\n  --input-icon-offset: 0.6em;\n  --input-icon-gutter: 2.2em;\n  /* The visible border lives on `fieldset`/`container` below, not this root — buried inside a\n     `<label>`, out of reach of a plain ancestor selector. --group-radius-* are custom properties\n     (not defined here) that a wrapping ButtonGroup sets per corner on the position it occupies;\n     unlike border-radius itself they inherit through any nesting depth, so they reach these\n     descendants and flatten the right corners when this Input sits inside a ButtonGroup. */\n  --input-radius: var(--group-radius-tl, var(--default-border-radius)) var(--group-radius-tr, var(--default-border-radius))\n    var(--group-radius-br, var(--default-border-radius)) var(--group-radius-bl, var(--default-border-radius));\n\n  &-placeholder {\n    position: absolute;\n    top: 50%;\n    left: 7px;\n    transform: translateY(-50%);\n    transition: all 0.2s;\n    opacity: 0;\n    user-select: none;\n    pointer-events: none;\n\n    &-shown {\n      animation: 0.2s fadeIn 0.3s forwards;\n    }\n\n    &-multiline {\n      top: 14px;\n      transform: translateY(0);\n    }\n  }\n\n  &-matLabel {\n    position: absolute;\n    transition: all 0.3s;\n    left: 7px;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 1em;\n    color: var(--input-label-resting-color, var(--text-light));\n    pointer-events: none;\n    user-select: none;\n\n    &-floating {\n      top: 0;\n      bottom: auto;\n      left: 14px;\n      right: 0;\n      font-size: 0.8em;\n      color: var(--input-label-floating-color, var(--text-color));\n      transform: translateY(-50%);\n    }\n\n    &-multiline {\n      top: 14px;\n      transform: translateY(0);\n    }\n  }\n\n  &-fieldset {\n    position: absolute;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    min-width: 0;\n    box-sizing: border-box;\n    border-radius: var(--input-radius);\n    font-size: 0.8em;\n    inset: calc(var(--input-notch-height) / -2) 0 0 0;\n    padding-left: 8px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--border-color);\n    pointer-events: none;\n    user-select: none;\n\n    &-no-notch {\n      /* Only Firefox actually renders the reserved notch space as a visible overlap on\n         label-less inputs (e.g. crossing a divider directly above it in a tightly-packed\n         layout like the sidebar search box); Chrome's rendering was never broken, just\n         consistently sized with every other input. @supports (-moz-appearance: none) is a\n         reliable Firefox-only feature query, so this scopes the fix to where it's needed\n         instead of changing every browser's sizing. */\n      @supports (-moz-appearance: none) {\n        inset: 0;\n      }\n    }\n\n    &-legend {\n      display: block;\n      max-width: 0;\n      transition: max-width 0.2s;\n      white-space: nowrap;\n      padding: 0;\n\n      &-active {\n        max-width: 300px;\n      }\n\n      span {\n        line-height: var(--input-notch-height);\n        padding: 0 5px;\n        opacity: 0;\n      }\n\n      span:empty {\n        padding: 0.000001px;\n      }\n    }\n  }\n\n  &-iconLeft {\n    .input-matLabel {\n      left: var(--input-icon-gutter);\n\n      &-floating {\n        left: calc(var(--input-icon-gutter) + 0.5em);\n      }\n    }\n\n    .input-placeholder {\n      left: var(--input-icon-gutter);\n    }\n\n    .input-fieldset {\n      padding-left: var(--input-icon-gutter);\n    }\n  }\n\n  &-container {\n    display: flex;\n    align-items: center;\n    border-radius: var(--input-radius);\n    background-color: var(--input-background);\n    transition: border-color;\n    cursor: text;\n    height: 100%;\n\n    &-multiline {\n      overflow: hidden;\n      padding-top: 10px;\n      align-items: flex-start;\n    }\n\n    &-border {\n      outline: 1px solid var(--border-color);\n      transition: border-color;\n      background-color: var(--input-background);\n      outline: none;\n\n      &-focused {\n        outline-color: var(--focus-border-color, var(--primary-color));\n        border-color: var(--focus-border-color, var(--primary-color));\n      }\n\n      &-searchFocused {\n        outline-color: var(--search-input-color);\n        outline-width: 2px;\n        border-color: var(--search-input-color);\n      }\n\n      &-invalid {\n        outline-color: var(--error-border-color);\n        border-color: var(--error-border-color);\n      }\n\n      &-invalid:hover {\n        outline-color: var(--error-border-color);\n        border-color: var(--error-border-color);\n      }\n\n      &-error {\n        outline-color: var(--error-border-color);\n        border-color: var(--error-border-color);\n      }\n    }\n  }\n\n  &-label {\n    display: flex;\n    color: var(--text-color);\n    height: 100%;\n\n    &-column {\n      flex-direction: column;\n    }\n\n    &-text {\n      white-space: nowrap;\n      margin-right: 5px;\n      margin-bottom: 6px;\n      display: flex;\n      align-items: center;\n      color: color(var(--border-color) lightness(40%));\n      background-color: transparent;\n      font-size: 12px;\n      position: absolute;\n      top: -15px;\n      white-space: nowrap;\n    }\n  }\n\n  &-upper-right-label {\n    position: absolute;\n    transform: translateY(calc(-100% - 1.5px));\n    right: 8px;\n    min-height: 12px;\n    font-size: 12px;\n    color: color(var(--border-color) lightness(40%));\n  }\n\n  &-field {\n    appearance: none;\n    -webkit-appearance: none;\n    font-family: inherit;\n    font-size: inherit;\n    box-sizing: border-box;\n    resize: none;\n    width: 100%;\n    border: none;\n    border-radius: var(--default-border-radius);\n    overflow: hidden;\n    line-height: 1.25;\n    color: var(--text-color);\n    background: transparent;\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: var(--text-light);\n    }\n\n    /* The browser's own search-cancel decoration doesn't match the theme — Search has its own\n       themed clear icon (see isSearchCleared in input.tsx) that replaces it. */\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n      appearance: none;\n      display: none;\n    }\n\n    &-withIcon {\n      padding-right: var(--input-icon-gutter) !important;\n\n      &-left {\n        padding-right: 0.643em !important;\n        padding-left: var(--input-icon-gutter) !important;\n      }\n    }\n\n    &-suffix {\n      padding-right: 9px;\n    }\n\n    &-date {\n      padding: 6px 9px;\n      color-scheme: dark;\n\n      svg {\n        color: white;\n      }\n    }\n\n    &-default {\n      padding: 8px 7.5px 6px;\n    }\n\n    &[disabled] {\n      background-color: var(--disabled-input-color);\n      color: var(--disabled-font-color);\n      -webkit-text-fill-color: var(--disabled-font-color);\n      opacity: 1;\n\n      &::placeholder {\n        color: var(--disabled-font-color);\n        -webkit-text-fill-color: var(--disabled-font-color);\n      }\n    }\n\n    &-readOnly {\n      cursor: default;\n      color: var(--text-dark);\n      -webkit-text-fill-color: var(--text-dark);\n    }\n\n    &-uppercase {\n      text-transform: uppercase;\n    }\n\n    &-multiline {\n      overflow-y: auto;\n      resize: vertical;\n      padding-top: 4px;\n      min-height: 30px;\n\n      &-autoResize {\n        resize: none;\n        overflow: hidden;\n      }\n    }\n\n    &-icon {\n      appearance: none;\n      -webkit-appearance: none;\n      box-sizing: border-box;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      background-color: transparent;\n      border: none;\n      position: absolute;\n      outline: none;\n      right: var(--input-icon-offset);\n      color: var(--input-icon-color);\n      width: var(--input-icon-size) !important;\n      height: var(--input-icon-size) !important;\n      user-select: none;\n      top: 50%;\n      transform: translateY(-50%);\n\n      &:focus-visible {\n        outline: 1px solid var(--focus-border-color, var(--primary-color));\n        outline-offset: 2px;\n      }\n\n      &-left {\n        left: var(--input-icon-offset);\n      }\n\n      &-notClickable {\n        pointer-events: none;\n      }\n    }\n  }\n\n  &-error {\n    height: 1em;\n    padding-top: 3px;\n    color: var(--error-font-color);\n    font-size: 11px;\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 0.5;\n    }\n  }\n}\n"],"mappings":""}

package/dist/esm/common/optionPicker/optionPicker.mjs

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../interactableDiv/index.mjs";import n from"./optionPicker.module.mjs";import r from"classnames";import{jsx as i,jsxs as a}from"react/jsx-runtime";function o(o){let{className:s=void 0,style:c,classNames:l,styles:u,options:d,onChange:f,value:p,...m}=e(`OptionPicker`,o),h=d.findIndex(e=>e.key===p)*100/d.length;return a(`div`,{...m,className:r(n.optionPicker,s,l?.root),style:{...c,...u?.root},children:[i(`div`,{className:r(n.optionPickerChip,l?.chip),style:{left:`${h}%`,width:`${100/d.length}%`,...u?.chip}}),d.map(e=>i(t,{onClick:t=>f(e.key,t),className:r(n.optionPickerOption,e.key===p&&n.optionPickerOptionActive,l?.option),style:u?.option,tabIndex:e.key===p?-1:0,children:e.label},e.key))]})}export{o as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../interactableDiv/index.mjs";import n from"./optionPicker.module.mjs";import{useRef as r}from"react";import i from"classnames";import{jsx as a,jsxs as o}from"react/jsx-runtime";function s(s){let{className:c=void 0,style:l,classNames:u,styles:d,options:f,onChange:p,value:m,...h}=e(`OptionPicker`,s),g=f.findIndex(e=>e.key===m)*100/f.length,_=r([]),v=f.findIndex(e=>e.key===m),y=v>=0?v:0;function b(e,t,n){if(f.length===0)return;let r=(t+e+f.length)%f.length;_.current[r]?.focus(),p(f[r].key,n)}function x(e,t){switch(e.key){case`ArrowRight`:case`ArrowDown`:e.preventDefault(),b(1,t,e);break;case`ArrowLeft`:case`ArrowUp`:e.preventDefault(),b(-1,t,e);break;default:break}}return o(`div`,{...h,role:`radiogroup`,className:i(n.optionPicker,c,u?.root),style:{...l,...d?.root},children:[a(`div`,{className:i(n.optionPickerChip,u?.chip),style:{left:`${g}%`,width:`${100/f.length}%`,...d?.chip}}),f.map((e,r)=>{let o=e.key===m;return a(t,{ref:e=>{_.current[r]=e},onClick:t=>p(e.key,t),onKeyDown:e=>x(e,r),role:`radio`,"aria-checked":o,className:i(n.optionPickerOption,o&&n.optionPickerOptionActive,u?.option),style:d?.option,tabIndex:r===y?0:-1,children:e.label},e.key)})]})}export{s as default};
 //# sourceMappingURL=optionPicker.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"optionPicker.mjs","names":[],"sources":["../../../../package/common/optionPicker/optionPicker.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { OptionPickerProps } from './optionPicker.types';\nimport cx from 'classnames';\n\nimport styles from './optionPicker.module.pcss';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults } from '../configProvider';\n\n\nfunction OptionPicker(props: OptionPickerProps): ReactElement {\n  const {\n    className = undefined,\n    style,\n    classNames,\n    styles: slotStyles,\n    options,\n    onChange,\n    value,\n    ...rest\n  } = useComponentDefaults('OptionPicker', props);\n\n  const optionPickerLeft = options.findIndex((option) => option.key === value) * 100 / options.length;\n\n  return (\n    <div {...rest} className={cx(styles.optionPicker, className, classNames?.root)} style={{ ...style, ...slotStyles?.root }}>\n      <div\n        className={cx(styles.optionPickerChip, classNames?.chip)}\n        style={{ left: `${optionPickerLeft}%`, width: `${100 / options.length}%`, ...slotStyles?.chip }}\n      />\n      {options.map((option) => (\n        <InteractableDiv\n          onClick={(e) => onChange(option.key, e)}\n          key={option.key}\n          className={cx(\n            styles.optionPickerOption,\n            option.key === value && styles.optionPickerOptionActive,\n            classNames?.option\n          )}\n          style={slotStyles?.option}\n          tabIndex={option.key === value ? -1 : 0}\n        >\n          {option.label}\n        </InteractableDiv>\n      ))}\n    </div>\n  );\n}\n\nexport default OptionPicker;\n"],"mappings":"mPASA,SAAS,EAAa,EAAwC,CAC5D,GAAM,CACJ,YAAY,IAAA,GACZ,QACA,aACA,OAAQ,EACR,UACA,WACA,QACA,GAAG,GACD,EAAqB,eAAgB,CAAK,EAExC,EAAmB,EAAQ,UAAW,GAAW,EAAO,MAAQ,CAAK,EAAI,IAAM,EAAQ,OAE7F,OACE,EAAC,MAAD,CAAK,GAAI,EAAM,UAAW,EAAG,EAAO,aAAc,EAAW,GAAY,IAAI,EAAG,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,WAAvH,CACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,iBAAkB,GAAY,IAAI,EACvD,MAAO,CAAE,KAAM,GAAG,EAAiB,GAAI,MAAO,GAAG,IAAM,EAAQ,OAAO,GAAI,GAAG,GAAY,IAAK,CAC/F,CAAA,EACA,EAAQ,IAAK,GACZ,EAAC,EAAD,CACE,QAAU,GAAM,EAAS,EAAO,IAAK,CAAC,EAEtC,UAAW,EACT,EAAO,mBACP,EAAO,MAAQ,GAAS,EAAO,yBAC/B,GAAY,MACd,EACA,MAAO,GAAY,OACnB,SAAU,EAAO,MAAQ,EAAQ,GAAK,WAErC,EAAO,KACO,EAVV,EAAO,GAUG,CAClB,CACE,GAET"}
+{"version":3,"file":"optionPicker.mjs","names":[],"sources":["../../../../package/common/optionPicker/optionPicker.tsx"],"sourcesContent":["import { useRef, type ReactElement } from 'react';\nimport { OptionPickerProps } from './optionPicker.types';\nimport cx from 'classnames';\n\nimport styles from './optionPicker.module.pcss';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults } from '../configProvider';\n\n\nfunction OptionPicker(props: OptionPickerProps): ReactElement {\n  const {\n    className = undefined,\n    style,\n    classNames,\n    styles: slotStyles,\n    options,\n    onChange,\n    value,\n    ...rest\n  } = useComponentDefaults('OptionPicker', props);\n\n  const optionPickerLeft = options.findIndex((option) => option.key === value) * 100 / options.length;\n\n  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const selectedIndex = options.findIndex((option) => option.key === value);\n  const rovingIndex = selectedIndex >= 0 ? selectedIndex : 0;\n\n  function moveTo(step: 1 | -1, fromIndex: number, event: React.KeyboardEvent<HTMLDivElement>) {\n    if (options.length === 0) return;\n    const next = (fromIndex + step + options.length) % options.length;\n    itemRefs.current[next]?.focus();\n    onChange(options[next].key, event as unknown as React.MouseEvent<HTMLDivElement, MouseEvent>);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>, index: number) {\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        moveTo(1, index, event);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        moveTo(-1, index, event);\n        break;\n      default:\n        break;\n    }\n  }\n\n  return (\n    <div\n      {...rest}\n      role=\"radiogroup\"\n      className={cx(styles.optionPicker, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      <div\n        className={cx(styles.optionPickerChip, classNames?.chip)}\n        style={{ left: `${optionPickerLeft}%`, width: `${100 / options.length}%`, ...slotStyles?.chip }}\n      />\n      {options.map((option, index) => {\n        const checked = option.key === value;\n        return (\n          <InteractableDiv\n            ref={(el) => { itemRefs.current[index] = el; }}\n            onClick={(e) => onChange(option.key, e)}\n            onKeyDown={(e) => handleKeyDown(e, index)}\n            key={option.key}\n            role=\"radio\"\n            aria-checked={checked}\n            className={cx(\n              styles.optionPickerOption,\n              checked && styles.optionPickerOptionActive,\n              classNames?.option\n            )}\n            style={slotStyles?.option}\n            tabIndex={index === rovingIndex ? 0 : -1}\n          >\n            {option.label}\n          </InteractableDiv>\n        );\n      })}\n    </div>\n  );\n}\n\nexport default OptionPicker;\n"],"mappings":"kRASA,SAAS,EAAa,EAAwC,CAC5D,GAAM,CACJ,YAAY,IAAA,GACZ,QACA,aACA,OAAQ,EACR,UACA,WACA,QACA,GAAG,GACD,EAAqB,eAAgB,CAAK,EAExC,EAAmB,EAAQ,UAAW,GAAW,EAAO,MAAQ,CAAK,EAAI,IAAM,EAAQ,OAEvF,EAAW,EAAkC,CAAC,CAAC,EAC/C,EAAgB,EAAQ,UAAW,GAAW,EAAO,MAAQ,CAAK,EAClE,EAAc,GAAiB,EAAI,EAAgB,EAEzD,SAAS,EAAO,EAAc,EAAmB,EAA4C,CAC3F,GAAI,EAAQ,SAAW,EAAG,OAC1B,IAAM,GAAQ,EAAY,EAAO,EAAQ,QAAU,EAAQ,OAC3D,EAAS,QAAQ,IAAO,MAAM,EAC9B,EAAS,EAAQ,GAAM,IAAK,CAAgE,CAC9F,CAEA,SAAS,EAAc,EAA4C,EAAe,CAChF,OAAQ,EAAM,IAAd,CACE,IAAK,aACL,IAAK,YACH,EAAM,eAAe,EACrB,EAAO,EAAG,EAAO,CAAK,EACtB,MACF,IAAK,YACL,IAAK,UACH,EAAM,eAAe,EACrB,EAAO,GAAI,EAAO,CAAK,EACvB,MACF,QACE,KACJ,CACF,CAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,KAAK,aACL,UAAW,EAAG,EAAO,aAAc,EAAW,GAAY,IAAI,EAC9D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,WAJzC,CAME,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,iBAAkB,GAAY,IAAI,EACvD,MAAO,CAAE,KAAM,GAAG,EAAiB,GAAI,MAAO,GAAG,IAAM,EAAQ,OAAO,GAAI,GAAG,GAAY,IAAK,CAC/F,CAAA,EACA,EAAQ,KAAK,EAAQ,IAAU,CAC9B,IAAM,EAAU,EAAO,MAAQ,EAC/B,OACE,EAAC,EAAD,CACE,IAAM,GAAO,CAAE,EAAS,QAAQ,GAAS,CAAI,EAC7C,QAAU,GAAM,EAAS,EAAO,IAAK,CAAC,EACtC,UAAY,GAAM,EAAc,EAAG,CAAK,EAExC,KAAK,QACL,eAAc,EACd,UAAW,EACT,EAAO,mBACP,GAAW,EAAO,yBAClB,GAAY,MACd,EACA,MAAO,GAAY,OACnB,SAAU,IAAU,EAAc,EAAI,YAErC,EAAO,KACO,EAZV,EAAO,GAYG,CAErB,CAAC,CACE,GAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"optionPicker.module.mjs","names":[],"sources":["../../../../package/common/optionPicker/optionPicker.module.pcss"],"sourcesContent":[".optionPicker{\n    display: flex;\n    width: 100%;\n    border-radius: var(--default-border-radius);\n    border: 1px solid var(--border-color);\n    justify-content: space-around;\n    position: relative;\n    overflow: hidden;\n\n    &-chip {\n        position: absolute;\n        height: 100%;\n        top: 0;\n        left: 0;\n        background: var(--primary-color);\n        border-radius: var(--default-border-radius);\n        transition: left 0.25s ease-in-out, width 0.25s ease-in-out;\n    }\n\n    &-option {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        display: block;\n        text-align: center;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n        padding: var(--spacing-m);\n        overflow: hidden;\n        text-overflow: ellipsis;\n        border-radius: var(--default-border-radius);\n        transition: color 0.25s;\n\n        &:focus {\n            outline: var(--primary-color) solid 2px;\n            outline-offset: -2px;\n        }\n\n        &-active {\n            color: var(--text-on-primary);\n        }\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"optionPicker.module.mjs","names":[],"sources":["../../../../package/common/optionPicker/optionPicker.module.pcss"],"sourcesContent":[".optionPicker{\n    display: flex;\n    width: 100%;\n    border-radius: var(--default-border-radius);\n    border: 1px solid var(--border-color);\n    transition: border-color 0.15s;\n    justify-content: space-around;\n    position: relative;\n    overflow: hidden;\n\n    /* :has(:focus-visible) rather than :focus-within, so this only lights up on\n       keyboard focus — same as the per-option ring below, not on a mouse click. */\n    &:has(:focus-visible) {\n        border-color: var(--focus-border-color, var(--primary-color));\n    }\n\n    &-chip {\n        position: absolute;\n        height: 100%;\n        top: 0;\n        left: 0;\n        background: var(--primary-color);\n        border-radius: var(--default-border-radius);\n        transition: left 0.25s ease-in-out, width 0.25s ease-in-out;\n    }\n\n    &-option {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        display: block;\n        text-align: center;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n        padding: var(--spacing-m);\n        overflow: hidden;\n        text-overflow: ellipsis;\n        border-radius: var(--default-border-radius);\n        transition: color 0.25s;\n\n        &:focus-visible {\n            outline: var(--focus-border-color, var(--primary-color)) solid 2px;\n            outline-offset: -2px;\n        }\n\n        &-active {\n            color: var(--text-on-primary);\n\n            /* The active option sits on the primary-color chip, so the default\n               primary-color outline above is invisible against it — use the\n               on-primary color instead, same as the option's own text/icon color. */\n            &:focus-visible {\n                outline-color: var(--text-on-primary);\n            }\n        }\n    }\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"radioGroup.module.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.module.pcss"],"sourcesContent":[".radioGroup {\n  --radio-size: 18px;\n  user-select: none;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  width: fit-content;\n\n  &-horizontal {\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 20px;\n  }\n\n  &-disabled {\n    filter: brightness(0.85);\n    cursor: not-allowed;\n  }\n\n  &-error &-radio:not(.radioGroup-radio-checked) {\n    border-color: var(--error-color);\n  }\n\n  &-option {\n    display: flex;\n    align-items: flex-start;\n    column-gap: 10px;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    border: 1px solid transparent;\n    border-radius: var(--default-border-radius);\n    margin: -1px;\n    color: var(--text-color);\n    font-family: var(--default-font);\n    font-size: var(--default-font-size);\n\n    &:focus-visible {\n      outline: none;\n      border-color: var(--primary-color);\n    }\n\n    &-disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n  }\n\n  &-radio {\n    flex-shrink: 0;\n    width: var(--radio-size);\n    height: var(--radio-size);\n    border-radius: 50%;\n    border: 1.8px solid var(--border-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-top: 1px;\n    transition: border-color 0.15s;\n\n    &-checked {\n      border-color: var(--primary-color);\n    }\n  }\n\n  &-dot {\n    width: calc(var(--radio-size) * 0.5);\n    height: calc(var(--radio-size) * 0.5);\n    border-radius: 50%;\n    background-color: var(--primary-color);\n    transform: scale(0);\n    transition: transform 0.15s ease;\n\n    &-checked {\n      transform: scale(1);\n    }\n  }\n\n  &-text {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n  }\n\n  &-label {\n    line-height: 1.2;\n    color: var(--text-color);\n  }\n\n  &-description {\n    font-size: 0.85em;\n    line-height: 1.3;\n    color: var(--text-dark);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"radioGroup.module.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.module.pcss"],"sourcesContent":[".radioGroup {\n  --radio-size: 18px;\n  user-select: none;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  width: fit-content;\n\n  &-horizontal {\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 20px;\n  }\n\n  &-disabled {\n    filter: brightness(0.85);\n    cursor: not-allowed;\n  }\n\n  &-error &-radio:not(.radioGroup-radio-checked) {\n    border-color: var(--error-color);\n  }\n\n  &-option {\n    display: flex;\n    align-items: flex-start;\n    column-gap: 10px;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    border: 1px solid transparent;\n    border-radius: var(--default-border-radius);\n    margin: -1px;\n    color: var(--text-color);\n    font-family: var(--default-font);\n    font-size: var(--default-font-size);\n\n    &:focus-visible {\n      outline: none;\n      border-color: var(--focus-border-color, var(--primary-color));\n    }\n\n    &-disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n  }\n\n  &-radio {\n    flex-shrink: 0;\n    width: var(--radio-size);\n    height: var(--radio-size);\n    border-radius: 50%;\n    border: 1.8px solid var(--border-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-top: 1px;\n    transition: border-color 0.15s;\n\n    &-checked {\n      border-color: var(--primary-color);\n    }\n  }\n\n  &-dot {\n    width: calc(var(--radio-size) * 0.5);\n    height: calc(var(--radio-size) * 0.5);\n    border-radius: 50%;\n    background-color: var(--primary-color);\n    transform: scale(0);\n    transition: transform 0.15s ease;\n\n    &-checked {\n      transform: scale(1);\n    }\n  }\n\n  &-text {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n  }\n\n  &-label {\n    line-height: 1.2;\n    color: var(--text-color);\n  }\n\n  &-description {\n    font-size: 0.85em;\n    line-height: 1.3;\n    color: var(--text-dark);\n  }\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"roomDrawer.module.mjs","names":[],"sources":["../../../../package/common/roomDrawer/roomDrawer.module.pcss"],"sourcesContent":[".roomDrawer {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--border-color);\n  border-radius: var(--default-border-radius);\n  overflow: hidden;\n  background: var(--background);\n  user-select: none;\n\n  &-toolbar {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 6px 8px;\n    background: var(--background-accent);\n    border-bottom: 1px solid var(--border-color);\n\n    &-sep {\n      flex: 1;\n    }\n\n    &-btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 32px;\n      height: 32px;\n      border: 1px solid transparent;\n      border-radius: var(--default-border-radius);\n      background: transparent;\n      color: var(--text-dark);\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      font-size: 13px;\n      transition: background 0.12s, color 0.12s;\n\n      &:hover:not(:disabled) {\n        background: var(--background-accent-light);\n        color: var(--text-color);\n      }\n\n      &:disabled {\n        opacity: 0.35;\n        cursor: not-allowed;\n      }\n\n      &-active {\n        background: var(--primary-accent);\n        color: var(--primary-color);\n        border-color: var(--primary-lighter);\n      }\n    }\n\n    &-zoomLabel {\n      padding: 0 4px;\n      min-width: 40px;\n      height: 32px;\n      border: 1px solid transparent;\n      border-radius: var(--default-border-radius);\n      background: transparent;\n      color: var(--text-dark);\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      font-size: 11px;\n      text-align: center;\n\n      &:hover {\n        background: var(--background-accent-light);\n        color: var(--text-color);\n      }\n    }\n  }\n\n  &-canvas {\n    display: block;\n    width: 100%;\n    cursor: crosshair;\n    user-select: none;\n\n    &-select {\n      cursor: default;\n    }\n  }\n\n  &-info {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 8px;\n    background: var(--background-accent);\n    border-top: 1px solid var(--border-color);\n\n    &-label {\n      font-size: 12px;\n      color: var(--text-dark);\n      white-space: nowrap;\n    }\n\n    &-input {\n      flex: 1;\n      max-width: 220px;\n      height: 28px;\n      padding: 0 8px;\n      border: 1px solid var(--border-color);\n      border-radius: var(--default-border-radius);\n      background: var(--background);\n      color: var(--text-color);\n      font-size: 13px;\n\n      &:focus {\n        outline: none;\n        border-color: var(--primary-color);\n      }\n    }\n\n    &-spacer {\n      flex: 1;\n    }\n\n    &-delete {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 28px;\n      height: 28px;\n      border: 1px solid var(--border-color);\n      border-radius: var(--default-border-radius);\n      background: transparent;\n      color: var(--text-dark);\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      font-size: 12px;\n      transition: background 0.12s, color 0.12s, border-color 0.12s;\n\n      &:hover {\n        background: #e53935;\n        color: #fff;\n        border-color: #e53935;\n      }\n    }\n  }\n\n  &-hint {\n    padding: 4px 8px;\n    font-size: 11px;\n    color: var(--text-dark);\n    background: var(--background-accent);\n    border-top: 1px solid var(--border-color);\n  }\n\n  &-info {\n    &-doorsBtn {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      height: 28px;\n      padding: 0 8px;\n      border: 1px solid var(--border-color);\n      border-radius: var(--default-border-radius);\n      background: transparent;\n      color: var(--text-dark);\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      font-size: 12px;\n      white-space: nowrap;\n      transition: background 0.12s, color 0.12s;\n\n      &:hover {\n        background: var(--background-accent-light);\n        color: var(--text-color);\n      }\n    }\n  }\n\n  &-doorPanel {\n    display: flex;\n    flex-direction: column;\n    background: var(--background-accent);\n    border-top: 1px solid var(--border-color);\n\n    &-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 6px 8px;\n      border-bottom: 1px solid var(--border-color);\n    }\n\n    &-icon {\n      color: var(--text-dark);\n      font-size: 12px;\n    }\n\n    &-title {\n      flex: 1;\n      font-size: 12px;\n      color: var(--text-dark);\n    }\n\n    &-done {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      height: 26px;\n      padding: 0 10px;\n      border: 1px solid var(--border-color);\n      border-radius: var(--default-border-radius);\n      background: transparent;\n      color: var(--text-dark);\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      font-size: 12px;\n      transition: background 0.12s, color 0.12s;\n\n      &:hover {\n        background: var(--primary-accent);\n        color: var(--primary-color);\n        border-color: var(--primary-lighter);\n      }\n    }\n\n    &-list {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      padding: 6px 8px;\n      max-height: 130px;\n      overflow-y: auto;\n    }\n\n    &-item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    &-label {\n      font-size: 12px;\n      color: var(--text-color);\n      min-width: 48px;\n    }\n\n    &-widthLabel {\n      font-size: 11px;\n      color: var(--text-dark);\n    }\n\n    &-empty {\n      font-size: 11px;\n      color: var(--text-dark);\n      font-style: italic;\n      padding: 2px 0;\n    }\n  }\n\n  &-canvas {\n    &-door {\n      cursor: crosshair;\n    }\n  }\n}\n\n/* ── SVG element classes ── */\n\n.doorGap {\n  stroke: var(--background);\n  stroke-width: 4;\n  stroke-linecap: butt;\n  pointer-events: none;\n}\n\n.doorMarker {\n  fill: var(--primary-color);\n  stroke: var(--background);\n  stroke-width: 0.8;\n  pointer-events: all;\n  cursor: grab;\n\n  &:active {\n    cursor: grabbing;\n  }\n}\n\n.gridLine {\n  stroke: var(--text-color);\n  stroke-width: 0.3;\n  opacity: 0.12;\n}\n\n.roomFill {\n  fill: var(--primary-accent);\n  fill-opacity: 0.08;\n  stroke: none;\n\n  &-selected {\n    fill-opacity: 0.22;\n  }\n}\n\n.roomStroke {\n  fill: none;\n  stroke: var(--primary-color);\n  stroke-width: 1.5;\n  stroke-linejoin: round;\n\n  &-selected {\n    stroke: var(--primary-lighter);\n    stroke-width: 2;\n  }\n}\n\n.roomText {\n  fill: var(--text-color);\n  stroke: none;\n  font-size: 7px;\n  pointer-events: none;\n  user-select: none;\n}\n\n.doorPanel {\n  stroke: var(--primary-color);\n  stroke-width: 1.5;\n  stroke-linecap: round;\n\n  &-selected {\n    stroke: var(--primary-lighter);\n    stroke-width: 2;\n  }\n}\n\n.doorSwing {\n  fill: none;\n  stroke: var(--primary-color);\n  stroke-width: 0.8;\n  stroke-dasharray: 3 2;\n  pointer-events: none;\n\n  &-selected {\n    stroke: var(--primary-lighter);\n  }\n}\n\n.preview {\n  fill: var(--primary-accent);\n  stroke: var(--primary-color);\n  stroke-width: 1;\n  stroke-dasharray: 4 2;\n  pointer-events: none;\n}\n\n.polyCloseTarget {\n  fill: var(--primary-color);\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.polyVertex {\n  fill: var(--primary-color);\n  stroke: none;\n  pointer-events: none;\n}\n\n.vertexHandle {\n  fill: var(--background);\n  stroke: var(--primary-color);\n  stroke-width: 1.5;\n  cursor: grab;\n  pointer-events: all;\n\n  &:hover {\n    fill: var(--primary-accent);\n    stroke: var(--primary-lighter);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"roomDrawer.module.mjs","names":[],"sources":["../../../../package/common/roomDrawer/roomDrawer.module.pcss"],"sourcesContent":[".roomDrawer {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--border-color);\n  border-radius: var(--default-border-radius);\n  overflow: hidden;\n  background: var(--background);\n  user-select: none;\n\n  &-toolbar {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 6px 8px;\n    background: var(--background-accent);\n    border-bottom: 1px solid var(--border-color);\n\n    &-sep {\n      flex: 1;\n    }\n\n    &-btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 32px;\n      height: 32px;\n      border: 1px solid transparent;\n      border-radius: var(--default-border-radius);\n      background: transparent;\n      color: var(--text-dark);\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      font-size: 13px;\n      transition: background 0.12s, color 0.12s;\n\n      &:hover:not(:disabled) {\n        background: var(--background-accent-light);\n        color: var(--text-color);\n      }\n\n      &:disabled {\n        opacity: 0.35;\n        cursor: not-allowed;\n      }\n\n      &-active {\n        background: var(--primary-accent);\n        color: var(--primary-color);\n        border-color: var(--primary-lighter);\n      }\n    }\n\n    &-zoomLabel {\n      padding: 0 4px;\n      min-width: 40px;\n      height: 32px;\n      border: 1px solid transparent;\n      border-radius: var(--default-border-radius);\n      background: transparent;\n      color: var(--text-dark);\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      font-size: 11px;\n      text-align: center;\n\n      &:hover {\n        background: var(--background-accent-light);\n        color: var(--text-color);\n      }\n    }\n  }\n\n  &-canvas {\n    display: block;\n    width: 100%;\n    cursor: crosshair;\n    user-select: none;\n\n    &-select {\n      cursor: default;\n    }\n  }\n\n  &-info {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 8px;\n    background: var(--background-accent);\n    border-top: 1px solid var(--border-color);\n\n    &-label {\n      font-size: 12px;\n      color: var(--text-dark);\n      white-space: nowrap;\n    }\n\n    &-input {\n      flex: 1;\n      max-width: 220px;\n      height: 28px;\n      padding: 0 8px;\n      border: 1px solid var(--border-color);\n      border-radius: var(--default-border-radius);\n      background: var(--background);\n      color: var(--text-color);\n      font-size: 13px;\n\n      &:focus {\n        outline: none;\n        border-color: var(--focus-border-color, var(--primary-color));\n      }\n    }\n\n    &-spacer {\n      flex: 1;\n    }\n\n    &-delete {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 28px;\n      height: 28px;\n      border: 1px solid var(--border-color);\n      border-radius: var(--default-border-radius);\n      background: transparent;\n      color: var(--text-dark);\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      font-size: 12px;\n      transition: background 0.12s, color 0.12s, border-color 0.12s;\n\n      &:hover {\n        background: #e53935;\n        color: #fff;\n        border-color: #e53935;\n      }\n    }\n  }\n\n  &-hint {\n    padding: 4px 8px;\n    font-size: 11px;\n    color: var(--text-dark);\n    background: var(--background-accent);\n    border-top: 1px solid var(--border-color);\n  }\n\n  &-info {\n    &-doorsBtn {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      height: 28px;\n      padding: 0 8px;\n      border: 1px solid var(--border-color);\n      border-radius: var(--default-border-radius);\n      background: transparent;\n      color: var(--text-dark);\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      font-size: 12px;\n      white-space: nowrap;\n      transition: background 0.12s, color 0.12s;\n\n      &:hover {\n        background: var(--background-accent-light);\n        color: var(--text-color);\n      }\n    }\n  }\n\n  &-doorPanel {\n    display: flex;\n    flex-direction: column;\n    background: var(--background-accent);\n    border-top: 1px solid var(--border-color);\n\n    &-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 6px 8px;\n      border-bottom: 1px solid var(--border-color);\n    }\n\n    &-icon {\n      color: var(--text-dark);\n      font-size: 12px;\n    }\n\n    &-title {\n      flex: 1;\n      font-size: 12px;\n      color: var(--text-dark);\n    }\n\n    &-done {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      height: 26px;\n      padding: 0 10px;\n      border: 1px solid var(--border-color);\n      border-radius: var(--default-border-radius);\n      background: transparent;\n      color: var(--text-dark);\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      font-size: 12px;\n      transition: background 0.12s, color 0.12s;\n\n      &:hover {\n        background: var(--primary-accent);\n        color: var(--primary-color);\n        border-color: var(--primary-lighter);\n      }\n    }\n\n    &-list {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      padding: 6px 8px;\n      max-height: 130px;\n      overflow-y: auto;\n    }\n\n    &-item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    &-label {\n      font-size: 12px;\n      color: var(--text-color);\n      min-width: 48px;\n    }\n\n    &-widthLabel {\n      font-size: 11px;\n      color: var(--text-dark);\n    }\n\n    &-empty {\n      font-size: 11px;\n      color: var(--text-dark);\n      font-style: italic;\n      padding: 2px 0;\n    }\n  }\n\n  &-canvas {\n    &-door {\n      cursor: crosshair;\n    }\n  }\n}\n\n/* ── SVG element classes ── */\n\n.doorGap {\n  stroke: var(--background);\n  stroke-width: 4;\n  stroke-linecap: butt;\n  pointer-events: none;\n}\n\n.doorMarker {\n  fill: var(--primary-color);\n  stroke: var(--background);\n  stroke-width: 0.8;\n  pointer-events: all;\n  cursor: grab;\n\n  &:active {\n    cursor: grabbing;\n  }\n}\n\n.gridLine {\n  stroke: var(--text-color);\n  stroke-width: 0.3;\n  opacity: 0.12;\n}\n\n.roomFill {\n  fill: var(--primary-accent);\n  fill-opacity: 0.08;\n  stroke: none;\n\n  &-selected {\n    fill-opacity: 0.22;\n  }\n}\n\n.roomStroke {\n  fill: none;\n  stroke: var(--primary-color);\n  stroke-width: 1.5;\n  stroke-linejoin: round;\n\n  &-selected {\n    stroke: var(--primary-lighter);\n    stroke-width: 2;\n  }\n}\n\n.roomText {\n  fill: var(--text-color);\n  stroke: none;\n  font-size: 7px;\n  pointer-events: none;\n  user-select: none;\n}\n\n.doorPanel {\n  stroke: var(--primary-color);\n  stroke-width: 1.5;\n  stroke-linecap: round;\n\n  &-selected {\n    stroke: var(--primary-lighter);\n    stroke-width: 2;\n  }\n}\n\n.doorSwing {\n  fill: none;\n  stroke: var(--primary-color);\n  stroke-width: 0.8;\n  stroke-dasharray: 3 2;\n  pointer-events: none;\n\n  &-selected {\n    stroke: var(--primary-lighter);\n  }\n}\n\n.preview {\n  fill: var(--primary-accent);\n  stroke: var(--primary-color);\n  stroke-width: 1;\n  stroke-dasharray: 4 2;\n  pointer-events: none;\n}\n\n.polyCloseTarget {\n  fill: var(--primary-color);\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.polyVertex {\n  fill: var(--primary-color);\n  stroke: none;\n  pointer-events: none;\n}\n\n.vertexHandle {\n  fill: var(--background);\n  stroke: var(--primary-color);\n  stroke-width: 1.5;\n  cursor: grab;\n  pointer-events: all;\n\n  &:hover {\n    fill: var(--primary-accent);\n    stroke: var(--primary-lighter);\n  }\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"switch.module.mjs","names":[],"sources":["../../../../package/common/switch/switch.module.pcss"],"sourcesContent":[".switch {\n  user-select: none;\n  display: flex;\n  align-items: center;\n  column-gap: 0.625em;\n  width: fit-content;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  border: 1px solid transparent;\n  margin: -1px;\n\n  &:focus-visible {\n    outline: none;\n    border: 1px solid var(--primary-color);\n    border-radius: var(--default-border-radius);\n  }\n\n  &-disabled {\n    filter: brightness(0.8);\n    cursor: not-allowed;\n  }\n\n  &-track {\n    width: 2.25em;\n    height: 1.25em;\n    flex-shrink: 0;\n    border-radius: var(--default-border-radius);\n    background-color: var(--border-color);\n    position: relative;\n    transition: background-color 0.2s;\n    box-sizing: border-box;\n    padding: 0.125em;\n\n    &-checked {\n      background-color: var(--primary-color);\n    }\n  }\n\n  &-thumb {\n    width: 1em;\n    height: 1em;\n    border-radius: var(--default-border-radius);\n    background-color: var(--background);\n    box-shadow: var(--card-shadow);\n    transform: translateX(0);\n    transition: transform 0.2s;\n\n    &-checked {\n      transform: translateX(1em);\n    }\n  }\n\n  &-label {\n    line-height: 100%;\n    color: var(--text-color);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"switch.module.mjs","names":[],"sources":["../../../../package/common/switch/switch.module.pcss"],"sourcesContent":[".switch {\n  user-select: none;\n  display: flex;\n  align-items: center;\n  column-gap: 0.625em;\n  width: fit-content;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  border: 1px solid transparent;\n  margin: -1px;\n\n  &:focus-visible {\n    outline: none;\n    border: 1px solid var(--focus-border-color, var(--primary-color));\n    border-radius: var(--default-border-radius);\n  }\n\n  &-disabled {\n    filter: brightness(0.8);\n    cursor: not-allowed;\n  }\n\n  &-track {\n    width: 2.25em;\n    height: 1.25em;\n    flex-shrink: 0;\n    border-radius: var(--default-border-radius);\n    background-color: var(--border-color);\n    position: relative;\n    transition: background-color 0.2s;\n    box-sizing: border-box;\n    padding: 0.125em;\n\n    &-checked {\n      background-color: var(--primary-color);\n    }\n  }\n\n  &-thumb {\n    width: 1em;\n    height: 1em;\n    border-radius: var(--default-border-radius);\n    background-color: var(--background);\n    box-shadow: var(--card-shadow);\n    transform: translateX(0);\n    transition: transform 0.2s;\n\n    &-checked {\n      transform: translateX(1em);\n    }\n  }\n\n  &-label {\n    line-height: 100%;\n    color: var(--text-color);\n  }\n}\n"],"mappings":""}

package/dist/esm/common/themeProvider/defaultTheme.mjs

@@ -1,2 +1,2 @@
-var e={id:`default`,variables:{"--grey":`#8A8A8A`,"--lightgrey":`#e0e0e0`,"--lightergrey":`#B1B1B1`,"--white":`#FFFFFF`,"--red":`#D6002A`,"--lighter-red":`#ffeae9`,"--green":`#287626`,"--lighter-green":`#C4FFC9`,"--blue":`#5873d5`,"--lighter-blue":`#C6DBFF`,"--black":`black`,"--orange":`#ff7f50`,"--lighter-orange":`#ffe5d9`,"--primary-color":`#8184d6`,"--primary-accent":`#90CAF9`,"--primary-lighter":`#9a9ce4`,"--accent-color":`var(--grey)`,"--accent-color-light":`var(--lightgrey)`,"--text-color":`var(--white)`,"--text-dark":`var(--lightergrey)`,"--text-light":`var(--lightergrey)`,"--text-on-primary":`var(--white)`,"--text-on-delete":`var(--white)`,"--border-color":`#656574`,"--background":`#393945`,"--background-accent":`#33333c`,"--background-accent-dark":`var(--grey)`,"--background-accent-light":`#484856`,"--background-modal":`#484856`,"--success-color":`var(--green)`,"--success-lighter":`var(--lighter-green)`,"--error-color":`var(--red)`,"--error-lighter":`var(--lighter-red)`,"--required-mark-color":`var(--error-color)`,"--info-color":`var(--blue)`,"--info-lighter":`var(--lighter-blue)`,"--warn-color":`var(--orange)`,"--warn-lighter":`var(--lighter-orange)`,"--default-font-size":`14px`,"--text-small-font-size":`12px`,"--header-font-size":`24px`,"--header-medium-font-size":`18px`,"--header-small-font-size":`16px`,"--default-font-weight":`400`,"--header-font-weight":`600`,"--input-background":`transparent`,"--input-icon-color":`var(--text-color)`,"--error-border-color":`var(--red)`,"--button-default-color":`var(--primary-color)`,"--button-default-border":`1px solid var(--primary-color)`,"--default-border-radius":`8px`,"--padding-sides":`15px`,"--margin-top":`10px`,"--default-font":`'Inter', sans-serif`,"--themed-font":`'Inter', sans-serif`,"--card-shadow":`0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)`,"--background-card-elevated":`var(--background-accent-light)`,"--background-card-outlined":`transparent`,"--background-card-filled":`var(--background-accent)`,"--spacing-s":`4px`,"--spacing-m":`8px`,"--spacing-l":`16px`}};export{e as defaultTheme};
+var e={id:`default`,variables:{"--grey":`#8A8A8A`,"--lightgrey":`#e0e0e0`,"--lightergrey":`#B1B1B1`,"--white":`#FFFFFF`,"--red":`#D6002A`,"--lighter-red":`#ffeae9`,"--green":`#287626`,"--lighter-green":`#C4FFC9`,"--blue":`#5873d5`,"--lighter-blue":`#C6DBFF`,"--black":`black`,"--orange":`#ff7f50`,"--lighter-orange":`#ffe5d9`,"--primary-color":`#8184d6`,"--primary-accent":`#90CAF9`,"--primary-lighter":`#9a9ce4`,"--accent-color":`var(--grey)`,"--accent-color-light":`var(--lightgrey)`,"--text-color":`var(--white)`,"--text-dark":`var(--lightergrey)`,"--text-light":`var(--lightergrey)`,"--text-on-primary":`var(--white)`,"--text-on-delete":`var(--white)`,"--border-color":`#656574`,"--focus-border-color":`var(--primary-color)`,"--background":`#393945`,"--background-accent":`#33333c`,"--background-accent-dark":`var(--grey)`,"--background-accent-light":`#484856`,"--background-modal":`#484856`,"--success-color":`var(--green)`,"--success-lighter":`var(--lighter-green)`,"--error-color":`var(--red)`,"--error-lighter":`var(--lighter-red)`,"--required-mark-color":`var(--error-color)`,"--info-color":`var(--blue)`,"--info-lighter":`var(--lighter-blue)`,"--warn-color":`var(--orange)`,"--warn-lighter":`var(--lighter-orange)`,"--default-font-size":`14px`,"--text-small-font-size":`12px`,"--header-font-size":`24px`,"--header-medium-font-size":`18px`,"--header-small-font-size":`16px`,"--default-font-weight":`400`,"--header-font-weight":`600`,"--input-background":`transparent`,"--input-icon-color":`var(--text-color)`,"--error-border-color":`var(--red)`,"--button-default-color":`var(--primary-color)`,"--button-default-border":`1px solid var(--primary-color)`,"--default-border-radius":`8px`,"--padding-sides":`15px`,"--margin-top":`10px`,"--default-font":`'Inter', sans-serif`,"--themed-font":`'Inter', sans-serif`,"--card-shadow":`0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)`,"--background-card-elevated":`var(--background-accent-light)`,"--background-card-outlined":`transparent`,"--background-card-filled":`var(--background-accent)`,"--spacing-s":`4px`,"--spacing-m":`8px`,"--spacing-l":`16px`}};export{e as defaultTheme};
 //# sourceMappingURL=defaultTheme.mjs.map

package/dist/esm/common/themeProvider/defaultTheme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.mjs","names":[],"sources":["../../../../package/common/themeProvider/defaultTheme.ts"],"sourcesContent":["import type { Theme } from './theme.types';\n\n/**\n * Built-in default theme used by ThemeProvider when no `themes` prop is\n * supplied. Provides a complete set of CSS variables so the component\n * library renders correctly out of the box.\n */\nexport const defaultTheme: Theme = {\n  id: 'default',\n  variables: {\n    '--grey': '#8A8A8A',\n    '--lightgrey': '#e0e0e0',\n    '--lightergrey': '#B1B1B1',\n    '--white': '#FFFFFF',\n    '--red': '#D6002A',\n    '--lighter-red': '#ffeae9',\n    '--green': '#287626',\n    '--lighter-green': '#C4FFC9',\n    '--blue': '#5873d5',\n    '--lighter-blue': '#C6DBFF',\n    '--black': 'black',\n    '--orange': '#ff7f50',\n    '--lighter-orange': '#ffe5d9',\n\n    '--primary-color': '#8184d6',\n    '--primary-accent': '#90CAF9',\n    '--primary-lighter': '#9a9ce4',\n    '--accent-color': 'var(--grey)',\n    '--accent-color-light': 'var(--lightgrey)',\n\n    '--text-color': 'var(--white)',\n    '--text-dark': 'var(--lightergrey)',\n    '--text-light': 'var(--lightergrey)',\n    '--text-on-primary': 'var(--white)',\n    '--text-on-delete': 'var(--white)',\n    '--border-color': '#656574',\n\n    '--background': '#393945',\n    '--background-accent': '#33333c',\n    '--background-accent-dark': 'var(--grey)',\n    '--background-accent-light': '#484856',\n    '--background-modal': '#484856',\n\n    '--success-color': 'var(--green)',\n    '--success-lighter': 'var(--lighter-green)',\n    '--error-color': 'var(--red)',\n    '--error-lighter': 'var(--lighter-red)',\n    '--required-mark-color': 'var(--error-color)',\n    '--info-color': 'var(--blue)',\n    '--info-lighter': 'var(--lighter-blue)',\n    '--warn-color': 'var(--orange)',\n    '--warn-lighter': 'var(--lighter-orange)',\n\n    '--default-font-size': '14px',\n    '--text-small-font-size': '12px',\n    '--header-font-size': '24px',\n    '--header-medium-font-size': '18px',\n    '--header-small-font-size': '16px',\n\n    '--default-font-weight': '400',\n    '--header-font-weight': '600',\n\n    '--input-background': 'transparent',\n    '--input-icon-color': 'var(--text-color)',\n    '--error-border-color': 'var(--red)',\n\n    '--button-default-color': 'var(--primary-color)',\n    '--button-default-border': '1px solid var(--primary-color)',\n\n    '--default-border-radius': '8px',\n    '--padding-sides': '15px',\n    '--margin-top': '10px',\n\n    '--default-font': \"'Inter', sans-serif\",\n    '--themed-font': \"'Inter', sans-serif\",\n\n    '--card-shadow':\n      '0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)',\n\n    '--background-card-elevated': 'var(--background-accent-light)',\n    '--background-card-outlined': 'transparent',\n    '--background-card-filled': 'var(--background-accent)',\n\n    '--spacing-s': '4px',\n    '--spacing-m': '8px',\n    '--spacing-l': '16px',\n  },\n};\n"],"mappings":"AAOA,IAAa,EAAsB,CACjC,GAAI,UACJ,UAAW,CACT,SAAU,UACV,cAAe,UACf,gBAAiB,UACjB,UAAW,UACX,QAAS,UACT,gBAAiB,UACjB,UAAW,UACX,kBAAmB,UACnB,SAAU,UACV,iBAAkB,UAClB,UAAW,QACX,WAAY,UACZ,mBAAoB,UAEpB,kBAAmB,UACnB,mBAAoB,UACpB,oBAAqB,UACrB,iBAAkB,cAClB,uBAAwB,mBAExB,eAAgB,eAChB,cAAe,qBACf,eAAgB,qBAChB,oBAAqB,eACrB,mBAAoB,eACpB,iBAAkB,UAElB,eAAgB,UAChB,sBAAuB,UACvB,2BAA4B,cAC5B,4BAA6B,UAC7B,qBAAsB,UAEtB,kBAAmB,eACnB,oBAAqB,uBACrB,gBAAiB,aACjB,kBAAmB,qBACnB,wBAAyB,qBACzB,eAAgB,cAChB,iBAAkB,sBAClB,eAAgB,gBAChB,iBAAkB,wBAElB,sBAAuB,OACvB,yBAA0B,OAC1B,qBAAsB,OACtB,4BAA6B,OAC7B,2BAA4B,OAE5B,wBAAyB,MACzB,uBAAwB,MAExB,qBAAsB,cACtB,qBAAsB,oBACtB,uBAAwB,aAExB,yBAA0B,uBAC1B,0BAA2B,iCAE3B,0BAA2B,MAC3B,kBAAmB,OACnB,eAAgB,OAEhB,iBAAkB,sBAClB,gBAAiB,sBAEjB,gBACE,8FAEF,6BAA8B,iCAC9B,6BAA8B,cAC9B,2BAA4B,2BAE5B,cAAe,MACf,cAAe,MACf,cAAe,MACjB,CACF"}
+{"version":3,"file":"defaultTheme.mjs","names":[],"sources":["../../../../package/common/themeProvider/defaultTheme.ts"],"sourcesContent":["import type { Theme } from './theme.types';\n\n/**\n * Built-in default theme used by ThemeProvider when no `themes` prop is\n * supplied. Provides a complete set of CSS variables so the component\n * library renders correctly out of the box.\n */\nexport const defaultTheme: Theme = {\n  id: 'default',\n  variables: {\n    '--grey': '#8A8A8A',\n    '--lightgrey': '#e0e0e0',\n    '--lightergrey': '#B1B1B1',\n    '--white': '#FFFFFF',\n    '--red': '#D6002A',\n    '--lighter-red': '#ffeae9',\n    '--green': '#287626',\n    '--lighter-green': '#C4FFC9',\n    '--blue': '#5873d5',\n    '--lighter-blue': '#C6DBFF',\n    '--black': 'black',\n    '--orange': '#ff7f50',\n    '--lighter-orange': '#ffe5d9',\n\n    '--primary-color': '#8184d6',\n    '--primary-accent': '#90CAF9',\n    '--primary-lighter': '#9a9ce4',\n    '--accent-color': 'var(--grey)',\n    '--accent-color-light': 'var(--lightgrey)',\n\n    '--text-color': 'var(--white)',\n    '--text-dark': 'var(--lightergrey)',\n    '--text-light': 'var(--lightergrey)',\n    '--text-on-primary': 'var(--white)',\n    '--text-on-delete': 'var(--white)',\n    '--border-color': '#656574',\n    '--focus-border-color': 'var(--primary-color)',\n\n    '--background': '#393945',\n    '--background-accent': '#33333c',\n    '--background-accent-dark': 'var(--grey)',\n    '--background-accent-light': '#484856',\n    '--background-modal': '#484856',\n\n    '--success-color': 'var(--green)',\n    '--success-lighter': 'var(--lighter-green)',\n    '--error-color': 'var(--red)',\n    '--error-lighter': 'var(--lighter-red)',\n    '--required-mark-color': 'var(--error-color)',\n    '--info-color': 'var(--blue)',\n    '--info-lighter': 'var(--lighter-blue)',\n    '--warn-color': 'var(--orange)',\n    '--warn-lighter': 'var(--lighter-orange)',\n\n    '--default-font-size': '14px',\n    '--text-small-font-size': '12px',\n    '--header-font-size': '24px',\n    '--header-medium-font-size': '18px',\n    '--header-small-font-size': '16px',\n\n    '--default-font-weight': '400',\n    '--header-font-weight': '600',\n\n    '--input-background': 'transparent',\n    '--input-icon-color': 'var(--text-color)',\n    '--error-border-color': 'var(--red)',\n\n    '--button-default-color': 'var(--primary-color)',\n    '--button-default-border': '1px solid var(--primary-color)',\n\n    '--default-border-radius': '8px',\n    '--padding-sides': '15px',\n    '--margin-top': '10px',\n\n    '--default-font': \"'Inter', sans-serif\",\n    '--themed-font': \"'Inter', sans-serif\",\n\n    '--card-shadow':\n      '0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)',\n\n    '--background-card-elevated': 'var(--background-accent-light)',\n    '--background-card-outlined': 'transparent',\n    '--background-card-filled': 'var(--background-accent)',\n\n    '--spacing-s': '4px',\n    '--spacing-m': '8px',\n    '--spacing-l': '16px',\n  },\n};\n"],"mappings":"AAOA,IAAa,EAAsB,CACjC,GAAI,UACJ,UAAW,CACT,SAAU,UACV,cAAe,UACf,gBAAiB,UACjB,UAAW,UACX,QAAS,UACT,gBAAiB,UACjB,UAAW,UACX,kBAAmB,UACnB,SAAU,UACV,iBAAkB,UAClB,UAAW,QACX,WAAY,UACZ,mBAAoB,UAEpB,kBAAmB,UACnB,mBAAoB,UACpB,oBAAqB,UACrB,iBAAkB,cAClB,uBAAwB,mBAExB,eAAgB,eAChB,cAAe,qBACf,eAAgB,qBAChB,oBAAqB,eACrB,mBAAoB,eACpB,iBAAkB,UAClB,uBAAwB,uBAExB,eAAgB,UAChB,sBAAuB,UACvB,2BAA4B,cAC5B,4BAA6B,UAC7B,qBAAsB,UAEtB,kBAAmB,eACnB,oBAAqB,uBACrB,gBAAiB,aACjB,kBAAmB,qBACnB,wBAAyB,qBACzB,eAAgB,cAChB,iBAAkB,sBAClB,eAAgB,gBAChB,iBAAkB,wBAElB,sBAAuB,OACvB,yBAA0B,OAC1B,qBAAsB,OACtB,4BAA6B,OAC7B,2BAA4B,OAE5B,wBAAyB,MACzB,uBAAwB,MAExB,qBAAsB,cACtB,qBAAsB,oBACtB,uBAAwB,aAExB,yBAA0B,uBAC1B,0BAA2B,iCAE3B,0BAA2B,MAC3B,kBAAmB,OACnB,eAAgB,OAEhB,iBAAkB,sBAClB,gBAAiB,sBAEjB,gBACE,8FAEF,6BAA8B,iCAC9B,6BAA8B,cAC9B,2BAA4B,2BAE5B,cAAe,MACf,cAAe,MACf,cAAe,MACjB,CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"timeline.module.mjs","names":[],"sources":["../../../../package/common/timeline/timeline.module.pcss"],"sourcesContent":[".timeline {\n  /* Theme tokens resolved once, each with a built-in fallback. Set any of the\n     public `--timeline-*` variables via ThemeProvider (theme-wide) or `style`\n     (per instance) to override; unset ones fall back to the values below. */\n  --custom-timeline-dot-size: var(--timeline-dot-size, 14px);\n  --custom-timeline-dot-color: var(--timeline-dot-color, var(--primary-color));\n  --custom-timeline-dot-border: var(--timeline-dot-border, var(--background));\n  --custom-timeline-line-color: var(--timeline-line-color, var(--border-color));\n  --custom-timeline-line-thickness: var(--timeline-line-thickness, 2px);\n  --custom-timeline-gap: var(--timeline-gap, 16px);\n  --custom-timeline-item-gap: var(--timeline-item-gap, 20px);\n  --custom-timeline-icon-dot-size: var(--timeline-icon-dot-size, 28px);\n\n  display: flex;\n  flex-direction: column;\n  color: var(--text-color);\n\n  &-item {\n    display: flex;\n    gap: var(--custom-timeline-gap);\n    border-radius: var(--default-border-radius);\n\n    &:last-child &-connector {\n      display: none;\n    }\n  }\n\n  &-item-clickable {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    transition: background-color 0.15s ease;\n    margin: 0px -10px;\n    padding: 0px 10px;\n\n    &:hover {\n      background-color: var(--background-accent-light);\n    }\n    &:focus-visible {\n      outline: 2px solid var(--primary-color);\n      outline-offset: -2px;\n    }\n  }\n\n  &-item-disabled {\n    opacity: 0.5;\n  }\n\n  &-marker {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  &-dot {\n    width: var(--custom-timeline-dot-size);\n    height: var(--custom-timeline-dot-size);\n    border-radius: 50%;\n    background-color: var(--custom-timeline-dot-color);\n    box-shadow: 0 0 0 3px var(--custom-timeline-dot-border);\n    flex-shrink: 0;\n\n    &:has(svg) {\n      width: var(--custom-timeline-icon-dot-size);\n      height: var(--custom-timeline-icon-dot-size);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--text-on-primary);\n      font-size: calc(var(--custom-timeline-icon-dot-size) * 0.5);\n    }\n  }\n\n  &-dot-primary {\n    background-color: var(--primary-color);\n  }\n  &-dot-success {\n    background-color: var(--success-color);\n  }\n  &-dot-warn {\n    background-color: var(--warn-color);\n  }\n  &-dot-error {\n    background-color: var(--error-color);\n  }\n\n  &-connector {\n    flex: 1 1 auto;\n    width: var(--custom-timeline-line-thickness);\n    min-height: 12px;\n    background-color: var(--custom-timeline-line-color);\n    margin: 4px 0;\n  }\n\n  &-content {\n    flex: 1 1 auto;\n    min-width: 0;\n    padding-bottom: var(--custom-timeline-item-gap);\n  }\n\n  &-header {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: 8px;\n  }\n\n  &-title {\n    font-weight: 600;\n    color: var(--text-color);\n  }\n\n  &-timestamp {\n    flex-shrink: 0;\n    color: var(--text-dark);\n    font-size: var(--text-small-font-size, 0.85em);\n    white-space: nowrap;\n  }\n\n  &-description {\n    color: var(--text-dark);\n    margin-top: 2px;\n  }\n\n  /* Right: markers + line on the right, content on the left */\n  &-right &-item {\n    flex-direction: row-reverse;\n    text-align: right;\n  }\n  &-right &-header {\n    flex-direction: row-reverse;\n  }\n\n  /* Alternate: two-column layout, entries alternating left/right of a centered line */\n  &-alternate &-item {\n    display: grid;\n    grid-template-columns: 1fr auto 1fr;\n    align-items: start;\n    gap: var(--custom-timeline-gap);\n  }\n  &-alternate &-marker {\n    grid-column: 2;\n    grid-row: 1;\n  }\n  &-alternate &-content {\n    grid-column: 1;\n    grid-row: 1;\n    text-align: right;\n  }\n  &-alternate &-header {\n    flex-direction: row-reverse;\n  }\n  &-alternate &-item-right &-content {\n    grid-column: 3;\n    text-align: left;\n  }\n  &-alternate &-item-right &-header {\n    flex-direction: row;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"timeline.module.mjs","names":[],"sources":["../../../../package/common/timeline/timeline.module.pcss"],"sourcesContent":[".timeline {\n  /* Theme tokens resolved once, each with a built-in fallback. Set any of the\n     public `--timeline-*` variables via ThemeProvider (theme-wide) or `style`\n     (per instance) to override; unset ones fall back to the values below. */\n  --custom-timeline-dot-size: var(--timeline-dot-size, 14px);\n  --custom-timeline-dot-color: var(--timeline-dot-color, var(--primary-color));\n  --custom-timeline-dot-border: var(--timeline-dot-border, var(--background));\n  --custom-timeline-line-color: var(--timeline-line-color, var(--border-color));\n  --custom-timeline-line-thickness: var(--timeline-line-thickness, 2px);\n  --custom-timeline-gap: var(--timeline-gap, 16px);\n  --custom-timeline-item-gap: var(--timeline-item-gap, 20px);\n  --custom-timeline-icon-dot-size: var(--timeline-icon-dot-size, 28px);\n\n  display: flex;\n  flex-direction: column;\n  color: var(--text-color);\n\n  &-item {\n    display: flex;\n    gap: var(--custom-timeline-gap);\n    border-radius: var(--default-border-radius);\n\n    &:last-child &-connector {\n      display: none;\n    }\n  }\n\n  &-item-clickable {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    transition: background-color 0.15s ease;\n    margin: 0px -10px;\n    padding: 0px 10px;\n\n    &:hover {\n      background-color: var(--background-accent-light);\n    }\n    &:focus-visible {\n      outline: 2px solid var(--focus-border-color, var(--primary-color));\n      outline-offset: -2px;\n    }\n  }\n\n  &-item-disabled {\n    opacity: 0.5;\n  }\n\n  &-marker {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  &-dot {\n    width: var(--custom-timeline-dot-size);\n    height: var(--custom-timeline-dot-size);\n    border-radius: 50%;\n    background-color: var(--custom-timeline-dot-color);\n    box-shadow: 0 0 0 3px var(--custom-timeline-dot-border);\n    flex-shrink: 0;\n\n    &:has(svg) {\n      width: var(--custom-timeline-icon-dot-size);\n      height: var(--custom-timeline-icon-dot-size);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--text-on-primary);\n      font-size: calc(var(--custom-timeline-icon-dot-size) * 0.5);\n    }\n  }\n\n  &-dot-primary {\n    background-color: var(--primary-color);\n  }\n  &-dot-success {\n    background-color: var(--success-color);\n  }\n  &-dot-warn {\n    background-color: var(--warn-color);\n  }\n  &-dot-error {\n    background-color: var(--error-color);\n  }\n\n  &-connector {\n    flex: 1 1 auto;\n    width: var(--custom-timeline-line-thickness);\n    min-height: 12px;\n    background-color: var(--custom-timeline-line-color);\n    margin: 4px 0;\n  }\n\n  &-content {\n    flex: 1 1 auto;\n    min-width: 0;\n    padding-bottom: var(--custom-timeline-item-gap);\n  }\n\n  &-header {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: 8px;\n  }\n\n  &-title {\n    font-weight: 600;\n    color: var(--text-color);\n  }\n\n  &-timestamp {\n    flex-shrink: 0;\n    color: var(--text-dark);\n    font-size: var(--text-small-font-size, 0.85em);\n    white-space: nowrap;\n  }\n\n  &-description {\n    color: var(--text-dark);\n    margin-top: 2px;\n  }\n\n  /* Right: markers + line on the right, content on the left */\n  &-right &-item {\n    flex-direction: row-reverse;\n    text-align: right;\n  }\n  &-right &-header {\n    flex-direction: row-reverse;\n  }\n\n  /* Alternate: two-column layout, entries alternating left/right of a centered line */\n  &-alternate &-item {\n    display: grid;\n    grid-template-columns: 1fr auto 1fr;\n    align-items: start;\n    gap: var(--custom-timeline-gap);\n  }\n  &-alternate &-marker {\n    grid-column: 2;\n    grid-row: 1;\n  }\n  &-alternate &-content {\n    grid-column: 1;\n    grid-row: 1;\n    text-align: right;\n  }\n  &-alternate &-header {\n    flex-direction: row-reverse;\n  }\n  &-alternate &-item-right &-content {\n    grid-column: 3;\n    text-align: left;\n  }\n  &-alternate &-item-right &-header {\n    flex-direction: row;\n  }\n}\n"],"mappings":""}