@ahrowe/ui 0.27.0 → 0.29.0

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

@@ -1 +1 @@
-{"version":3,"file":"klipyPicker.mjs","names":[],"sources":["../../../../package/common/klipyPicker/klipyPicker.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport cx from 'classnames';\nimport type { ReactElement, ReactNode } from 'react';\nimport KlipyService from 'services/klipy';\nimport type { KlipyResult } from 'services/klipy';\nimport SearchInput from '../searchInput';\nimport GifPreview from './components/gifPreview';\nimport FloatingMenu from '../floatingMenu';\nimport Button, { ButtonStyleType } from '../button';\nimport Modal from '../modal';\nimport Chip, { ChipContainer } from '../chip';\nimport GifView from './components/gifView';\nimport type { KlipyPickerProps } from './klipyPicker.types';\nimport styles from './klipyPicker.module.pcss';\nimport actionButtonStyles from 'components/common/actionButtons/actionButtons.module.pcss';\nimport { Align } from '../floatingMenu/floatingMenu.types';\n\nexport default function KlipyPicker({\n  className,\n  token = '',\n  isModal = false,\n  onSelect = () => undefined,\n  selected = null,\n}: KlipyPickerProps): ReactElement {\n  const klipyService = useMemo(() => new KlipyService(token), [token]);\n\n  const [searchText, setSearchText] = useState('');\n  const [currentPreviews, setCurrentPreviews] = useState<KlipyResult[]>([]);\n  const [currentSuggestions, setCurrentSuggestions] = useState<string[]>([]);\n  const [lastNext, setLastNext] = useState<string | null>(null);\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  async function searchFor(query: string) {\n    setSearchText(query);\n    if (!query.trim()) {\n      setCurrentPreviews([]);\n      setCurrentSuggestions([]);\n      setLastNext(null);\n      return;\n    }\n    const [{ results: searchResults = [], next = null }, { results: suggestionResults = [] }] =\n      await Promise.all([\n        klipyService.search(query, { limit: 18, contentfilter: 'medium' }),\n        klipyService.searchSuggestions(query),\n      ]);\n    setCurrentPreviews(searchResults);\n    setLastNext(next);\n    setCurrentSuggestions(suggestionResults);\n  }\n\n  async function handleLoadAdditional() {\n    const { results: searchResults = [], next = null } = await klipyService.search(searchText, {\n      limit: 36,\n      pos: lastNext ?? undefined,\n      contentfilter: 'medium',\n    });\n    setLastNext(next);\n    setCurrentPreviews((prev) => [...prev, ...searchResults]);\n  }\n\n  async function handlePreviewSelect(preview: KlipyResult | null) {\n    await onSelect(preview);\n    setIsMenuOpen(false);\n    if (preview) klipyService.registerShare(searchText, preview.id);\n  }\n\n  function renderSuggestions(): ReactNode {\n    return (\n      <ChipContainer inline className={styles.klipyPickerSuggestionsContainer}>\n        {currentSuggestions.map((suggestion) => (\n          <Chip\n            className={styles.klipyPickerSuggestionsItem}\n            key={suggestion}\n            text={suggestion}\n            onClick={() => searchFor(suggestion)}\n          />\n        ))}\n      </ChipContainer>\n    );\n  }\n\n  function renderPreviewPicker(): ReactNode {\n    return (\n      <GifPreview\n        previewItems={currentPreviews}\n        onSelect={handlePreviewSelect}\n        onLoadAdditional={handleLoadAdditional}\n      />\n    );\n  }\n\n  function renderSearchInput(): ReactNode {\n    return (\n      <SearchInput\n        label=\"Pick gif\"\n        value={searchText}\n        onDebounce={searchFor}\n        onChange={setSearchText}\n      />\n    );\n  }\n\n  if (isModal) {\n    return (\n      <div className={cx(styles.klipyPicker, className)}>\n        <div className={actionButtonStyles.actionButtons}>\n          <Button onClick={() => setIsMenuOpen(true)}>Pick gif</Button>\n          {selected && (\n            <Button styleType={ButtonStyleType.Delete} onClick={() => handlePreviewSelect(null)}>\n              Remove gif\n            </Button>\n          )}\n        </div>\n        {selected && <GifView className={styles.klipyPickerSelected} src={selected} />}\n        <Modal isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)}>\n          <div className={styles.klipyPickerModalContent}>\n            {renderSearchInput()}\n            {renderSuggestions()}\n            {renderPreviewPicker()}\n          </div>\n        </Modal>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(styles.klipyPicker, className)}>\n      <FloatingMenu\n        align={Align.Left}\n        isOpen={currentPreviews.length > 0 && isMenuOpen}\n        onOpenChange={setIsMenuOpen}\n        dontCloseOnChildClick\n        content={\n          <>\n            {renderSuggestions()}\n            {renderPreviewPicker()}\n          </>\n        }\n      >\n        {renderSearchInput()}\n      </FloatingMenu>\n      {selected && (\n        <Button styleType={ButtonStyleType.Delete} onClick={() => handlePreviewSelect(null)}>\n          Remove gif\n        </Button>\n      )}\n      {selected && <GifView className={styles.klipyPickerSelected} src={selected} />}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"klipyPicker.mjs","names":[],"sources":["../../../../package/common/klipyPicker/klipyPicker.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport cx from 'classnames';\nimport type { ReactElement, ReactNode } from 'react';\nimport KlipyService from 'services/klipy';\nimport type { KlipyResult } from 'services/klipy';\nimport SearchInput from '../searchInput';\nimport GifPreview from './components/gifPreview';\nimport FloatingMenu from '../floatingMenu';\nimport Button, { ButtonStyleType } from '../button';\nimport Modal from '../modal';\nimport Chip, { ChipContainer } from '../chip';\nimport GifView from './components/gifView';\nimport type { KlipyPickerProps } from './klipyPicker.types';\nimport styles from './klipyPicker.module.pcss';\nimport actionButtonStyles from 'components/common/actionButtons/actionButtons.module.pcss';\nimport { Align } from '../floatingMenu/floatingMenu.types';\n\nexport default function KlipyPicker({\n  className,\n  token = '',\n  isModal = false,\n  onSelect = () => undefined,\n  selected = null,\n}: KlipyPickerProps): ReactElement {\n  const klipyService = useMemo(() => new KlipyService(token), [token]);\n\n  const [searchText, setSearchText] = useState('');\n  const [currentPreviews, setCurrentPreviews] = useState<KlipyResult[]>([]);\n  const [currentSuggestions, setCurrentSuggestions] = useState<string[]>([]);\n  const [lastNext, setLastNext] = useState<string | null>(null);\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  async function searchFor(query: string) {\n    setSearchText(query);\n    if (!query.trim()) {\n      setCurrentPreviews([]);\n      setCurrentSuggestions([]);\n      setLastNext(null);\n      return;\n    }\n    const [{ results: searchResults = [], next = null }, { results: suggestionResults = [] }] = await Promise.all([\n      klipyService.search(query, { limit: 18, contentfilter: 'medium' }),\n      klipyService.searchSuggestions(query),\n    ]);\n    setCurrentPreviews(searchResults);\n    setLastNext(next);\n    setCurrentSuggestions(suggestionResults);\n  }\n\n  async function handleLoadAdditional() {\n    const { results: searchResults = [], next = null } = await klipyService.search(searchText, {\n      limit: 36,\n      pos: lastNext ?? undefined,\n      contentfilter: 'medium',\n    });\n    setLastNext(next);\n    setCurrentPreviews((prev) => [...prev, ...searchResults]);\n  }\n\n  async function handlePreviewSelect(preview: KlipyResult | null) {\n    await onSelect(preview);\n    setIsMenuOpen(false);\n    if (preview) klipyService.registerShare(searchText, preview.id);\n  }\n\n  function renderSuggestions(): ReactNode {\n    return (\n      <ChipContainer inline className={styles.klipyPickerSuggestionsContainer}>\n        {currentSuggestions.map((suggestion) => (\n          <Chip\n            className={styles.klipyPickerSuggestionsItem}\n            key={suggestion}\n            text={suggestion}\n            onClick={() => searchFor(suggestion)}\n          />\n        ))}\n      </ChipContainer>\n    );\n  }\n\n  function renderPreviewPicker(): ReactNode {\n    return (\n      <GifPreview\n        previewItems={currentPreviews}\n        onSelect={handlePreviewSelect}\n        onLoadAdditional={handleLoadAdditional}\n      />\n    );\n  }\n\n  function renderSearchInput(): ReactNode {\n    return <SearchInput label='Pick gif' value={searchText} onDebounce={searchFor} onChange={setSearchText} />;\n  }\n\n  if (isModal) {\n    return (\n      <div className={cx(styles.klipyPicker, className)}>\n        <div className={actionButtonStyles.actionButtons}>\n          <Button onClick={() => setIsMenuOpen(true)}>Pick gif</Button>\n          {selected && (\n            <Button styleType={ButtonStyleType.Delete} onClick={() => handlePreviewSelect(null)}>\n              Remove gif\n            </Button>\n          )}\n        </div>\n        {selected && <GifView className={styles.klipyPickerSelected} src={selected} />}\n        <Modal isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)}>\n          <div className={styles.klipyPickerModalContent}>\n            {renderSearchInput()}\n            {renderSuggestions()}\n            {renderPreviewPicker()}\n          </div>\n        </Modal>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(styles.klipyPicker, className)}>\n      <FloatingMenu\n        align={Align.Left}\n        isOpen={currentPreviews.length > 0 && isMenuOpen}\n        onOpenChange={setIsMenuOpen}\n        dontCloseOnChildClick\n        content={\n          <>\n            {renderSuggestions()}\n            {renderPreviewPicker()}\n          </>\n        }\n      >\n        {renderSearchInput()}\n      </FloatingMenu>\n      {selected && (\n        <Button styleType={ButtonStyleType.Delete} onClick={() => handlePreviewSelect(null)}>\n          Remove gif\n        </Button>\n      )}\n      {selected && <GifView className={styles.klipyPickerSelected} src={selected} />}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e={"klipyPicker-selected":`klipyPicker-selected_Watxl`,klipyPickerSelected:`klipyPicker-selected_Watxl`,"klipyPicker-modal-content":`klipyPicker-modal-content_3CBV9`,klipyPickerModalContent:`klipyPicker-modal-content_3CBV9`,"klipyPicker-suggestions-container":`klipyPicker-suggestions-container_-csDI`,klipyPickerSuggestionsContainer:`klipyPicker-suggestions-container_-csDI`,"klipyPicker-suggestions-item":`klipyPicker-suggestions-item_nHHSA`,klipyPickerSuggestionsItem:`klipyPicker-suggestions-item_nHHSA`};export{e as default};
+var e=`klipyPicker-selected_Watxl`,t=`klipyPicker-modal-content_3CBV9`,n=`klipyPicker-suggestions-container_-csDI`,r=`klipyPicker-suggestions-item_nHHSA`,i={"klipyPicker-selected":`klipyPicker-selected_Watxl`,klipyPickerSelected:e,"klipyPicker-modal-content":`klipyPicker-modal-content_3CBV9`,klipyPickerModalContent:t,"klipyPicker-suggestions-container":`klipyPicker-suggestions-container_-csDI`,klipyPickerSuggestionsContainer:n,"klipyPicker-suggestions-item":`klipyPicker-suggestions-item_nHHSA`,klipyPickerSuggestionsItem:r};export{i as default,t as klipyPickerModalContent,e as klipyPickerSelected,n as klipyPickerSuggestionsContainer,r as klipyPickerSuggestionsItem};
 //# sourceMappingURL=klipyPicker.module.mjs.map

package/dist/esm/common/loading/iconLoading/iconLoading.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"iconLoading.mjs","names":[],"sources":["../../../../../package/common/loading/iconLoading/iconLoading.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\n\nimport styles from './iconLoading.module.pcss';\n\nfunction IconLoading({ className = '' }) {\n  return (\n    <div className={cx(styles.iconLoading, className)}>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-8 -1 16 14\">\n        <path\n          className={styles.iconLoadingFirst}\n          d=\"M 0 0 C 3 5 6 5 6 12\"\n          strokeWidth=\"1.7\"\n          fill=\"none\"\n        />\n        <path\n          className={styles.iconLoadingFirst}\n          d=\"M 0 0 C -3 5 -6 5 -6 12\"\n          strokeWidth=\"1.7\"\n          fill=\"none\"\n        />\n        <path className={styles.iconLoadingFirst} d=\"M 0 0 L 0 10\" strokeWidth=\"1.7\" fill=\"none\" />\n        <path\n          className={styles.iconLoadingSecond}\n          d=\"M 0.1 10 C -3 10 -4 10 -6 12\"\n          strokeWidth=\"1.7\"\n          fill=\"none\"\n        />\n        <path\n          className={styles.iconLoadingSecond}\n          d=\"M -0.1 10 C 3 10 4 10 6 12\"\n          strokeWidth=\"1.7\"\n          fill=\"none\"\n        />\n      </svg>\n    </div>\n  );\n}\n\nexport default IconLoading;\n"],"mappings":"kIAKA,SAAS,EAAY,CAAE,YAAY,IAAM,CACvC,OACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,YAAa,CAAS,WAC9C,EAAC,MAAD,CAAK,MAAM,6BAA6B,QAAQ,uBAAhD,CACE,EAAC,OAAD,CACE,UAAW,EAAO,iBAClB,EAAE,uBACF,YAAY,MACZ,KAAK,MACN,CAAA,EACD,EAAC,OAAD,CACE,UAAW,EAAO,iBAClB,EAAE,0BACF,YAAY,MACZ,KAAK,MACN,CAAA,EACD,EAAC,OAAD,CAAM,UAAW,EAAO,iBAAkB,EAAE,eAAe,YAAY,MAAM,KAAK,MAAQ,CAAA,EAC1F,EAAC,OAAD,CACE,UAAW,EAAO,kBAClB,EAAE,+BACF,YAAY,MACZ,KAAK,MACN,CAAA,EACD,EAAC,OAAD,CACE,UAAW,EAAO,kBAClB,EAAE,6BACF,YAAY,MACZ,KAAK,MACN,CAAA,CACE,GACF,CAAA,CAET"}
+{"version":3,"file":"iconLoading.mjs","names":[],"sources":["../../../../../package/common/loading/iconLoading/iconLoading.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\n\nimport styles from './iconLoading.module.pcss';\n\nfunction IconLoading({ className = '' }) {\n  return (\n    <div className={cx(styles.iconLoading, className)}>\n      <svg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -1 16 14'>\n        <path className={styles.iconLoadingFirst} d='M 0 0 C 3 5 6 5 6 12' strokeWidth='1.7' fill='none' />\n        <path className={styles.iconLoadingFirst} d='M 0 0 C -3 5 -6 5 -6 12' strokeWidth='1.7' fill='none' />\n        <path className={styles.iconLoadingFirst} d='M 0 0 L 0 10' strokeWidth='1.7' fill='none' />\n        <path className={styles.iconLoadingSecond} d='M 0.1 10 C -3 10 -4 10 -6 12' strokeWidth='1.7' fill='none' />\n        <path className={styles.iconLoadingSecond} d='M -0.1 10 C 3 10 4 10 6 12' strokeWidth='1.7' fill='none' />\n      </svg>\n    </div>\n  );\n}\n\nexport default IconLoading;\n"],"mappings":"kIAKA,SAAS,EAAY,CAAE,YAAY,IAAM,CACvC,OACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,YAAa,CAAS,EAC9C,SAAA,EAAC,MAAD,CAAK,MAAM,6BAA6B,QAAQ,cAAhD,SAAA,CACE,EAAC,OAAD,CAAM,UAAW,EAAO,iBAAkB,EAAE,uBAAuB,YAAY,MAAM,KAAK,MAAQ,CAAA,EAClG,EAAC,OAAD,CAAM,UAAW,EAAO,iBAAkB,EAAE,0BAA0B,YAAY,MAAM,KAAK,MAAQ,CAAA,EACrG,EAAC,OAAD,CAAM,UAAW,EAAO,iBAAkB,EAAE,eAAe,YAAY,MAAM,KAAK,MAAQ,CAAA,EAC1F,EAAC,OAAD,CAAM,UAAW,EAAO,kBAAmB,EAAE,+BAA+B,YAAY,MAAM,KAAK,MAAQ,CAAA,EAC3G,EAAC,OAAD,CAAM,UAAW,EAAO,kBAAmB,EAAE,6BAA6B,YAAY,MAAM,KAAK,MAAQ,CAAA,CACtG,GACF,CAAA,CAET"}

package/dist/esm/common/loading/iconLoading/iconLoading.module.mjs

@@ -1,2 +1,2 @@
-var e={iconLoading:`iconLoading_wovj4`,"spin-to-oblivion":`spin-to-oblivion_0tZtm`,spinToOblivion:`spin-to-oblivion_0tZtm`,"iconLoading-first":`iconLoading-first_SBwP3`,iconLoadingFirst:`iconLoading-first_SBwP3`,"draw-line":`draw-line_1NiWA`,drawLine:`draw-line_1NiWA`,"iconLoading-second":`iconLoading-second_nHrW3`,iconLoadingSecond:`iconLoading-second_nHrW3`,"draw-line-two":`draw-line-two_HmaHl`,drawLineTwo:`draw-line-two_HmaHl`};export{e as default};
+var e=`iconLoading_wovj4`,t=`spin-to-oblivion_0tZtm`,n=`iconLoading-first_SBwP3`,r=`draw-line_1NiWA`,i=`iconLoading-second_nHrW3`,a=`draw-line-two_HmaHl`,o={iconLoading:e,"spin-to-oblivion":`spin-to-oblivion_0tZtm`,spinToOblivion:t,"iconLoading-first":`iconLoading-first_SBwP3`,iconLoadingFirst:n,"draw-line":`draw-line_1NiWA`,drawLine:r,"iconLoading-second":`iconLoading-second_nHrW3`,iconLoadingSecond:i,"draw-line-two":`draw-line-two_HmaHl`,drawLineTwo:a};export{o as default,r as drawLine,a as drawLineTwo,e as iconLoading,n as iconLoadingFirst,i as iconLoadingSecond,t as spinToOblivion};
 //# sourceMappingURL=iconLoading.module.mjs.map

package/dist/esm/common/loading/iconLoading/iconLoading.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"iconLoading.module.mjs","names":[],"sources":["../../../../../package/common/loading/iconLoading/iconLoading.module.pcss"],"sourcesContent":[".iconLoading {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  user-select: none;\n  pointer-events: none;\n\n  --draw-duration: 0.8s;\n  --delay: 0.4s;\n\n  svg {\n    stroke-dasharray: 14;\n    stroke-dashoffset: 14;\n    width: 200px;\n    aspect-ratio: 1;\n    animation: calc(var(--draw-duration) * 3) spin-to-oblivion var(--delay) infinite;\n    transform: rotate(0deg);\n    stroke: var(--primary-color);\n    stroke-linecap: round;\n  }\n\n  &-first {\n    animation: calc(var(--draw-duration) * 3) draw-line var(--delay) infinite;\n  }\n\n  &-second {\n    animation: calc(var(--draw-duration) * 3) draw-line-two var(--delay) infinite;\n  }\n\n  @keyframes draw-line {\n    33% {\n      stroke-dashoffset: 0;\n    }\n    95% {\n      stroke-dashoffset: 0;\n    }\n    96% {\n      stroke-dashoffset: 14;\n    }\n  }\n\n  @keyframes draw-line-two {\n    33% {\n      stroke-dashoffset: 14;\n    }\n    66% {\n      stroke-dashoffset: 0;\n    }\n    95% {\n      stroke-dashoffset: 0;\n    }\n    96% {\n      stroke-dashoffset: 14;\n    }\n  }\n\n  @keyframes spin-to-oblivion {\n    50% {\n      transform: rotate(180deg);\n    }\n    75% {\n      transform: rotate(180deg) scale(0);\n    }\n    100% {\n      transform: rotate(180deg) scale(0);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"iconLoading.module.mjs","names":[],"sources":["../../../../../package/common/loading/iconLoading/iconLoading.module.pcss"],"sourcesContent":[".iconLoading {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  user-select: none;\n  pointer-events: none;\n\n  --draw-duration: 0.8s;\n  --delay: 0.4s;\n\n  svg {\n    stroke-dasharray: 14;\n    stroke-dashoffset: 14;\n    width: 200px;\n    aspect-ratio: 1;\n    animation: calc(var(--draw-duration) * 3) spin-to-oblivion var(--delay) infinite;\n    transform: rotate(0deg);\n    stroke: var(--primary-color);\n    stroke-linecap: round;\n  }\n\n  &-first {\n    animation: calc(var(--draw-duration) * 3) draw-line var(--delay) infinite;\n  }\n\n  &-second {\n    animation: calc(var(--draw-duration) * 3) draw-line-two var(--delay) infinite;\n  }\n\n  @keyframes draw-line {\n    33% {\n      stroke-dashoffset: 0;\n    }\n\n    95% {\n      stroke-dashoffset: 0;\n    }\n\n    96% {\n      stroke-dashoffset: 14;\n    }\n  }\n\n  @keyframes draw-line-two {\n    33% {\n      stroke-dashoffset: 14;\n    }\n\n    66% {\n      stroke-dashoffset: 0;\n    }\n\n    95% {\n      stroke-dashoffset: 0;\n    }\n\n    96% {\n      stroke-dashoffset: 14;\n    }\n  }\n\n  @keyframes spin-to-oblivion {\n    50% {\n      transform: rotate(180deg);\n    }\n\n    75% {\n      transform: rotate(180deg) scale(0);\n    }\n\n    100% {\n      transform: rotate(180deg) scale(0);\n    }\n  }\n}\n"],"mappings":""}

package/dist/esm/common/loading/spinnerLoading/spinnerLoading.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spinnerLoading.mjs","names":[],"sources":["../../../../../package/common/loading/spinnerLoading/spinnerLoading.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport styles from './spinnerLoading.module.pcss';\n\ninterface Properties {\n  className?: string | undefined;\n}\n\nfunction SpinnerLoading({ className }: Properties): ReactElement {\n  return (\n    <svg\n      data-testid=\"spinner\"\n      className={cx(styles.spinnerLoading, className)}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 100 100\"\n      fill=\"none\"\n      stroke=\"var(--primary-color)\"\n    >\n      <circle cx=\"50\" cy=\"50\" r=\"45\" strokeWidth=\"10\" />\n    </svg>\n  );\n}\n\nSpinnerLoading.defaultProps = {\n  className: undefined,\n};\n\nexport default SpinnerLoading;\n"],"mappings":"6GASA,SAAS,EAAe,CAAE,aAAuC,CAC/D,OACE,EAAC,MAAD,CACE,cAAY,UACZ,UAAW,EAAG,EAAO,eAAgB,CAAS,EAC9C,MAAM,6BACN,QAAQ,cACR,KAAK,OACL,OAAO,gCAEP,EAAC,SAAD,CAAQ,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,YAAY,IAAM,CAAA,CAC9C,CAAA,CAET,CAEA,EAAe,aAAe,CAC5B,UAAW,IAAA,EACb"}
+{"version":3,"file":"spinnerLoading.mjs","names":[],"sources":["../../../../../package/common/loading/spinnerLoading/spinnerLoading.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport styles from './spinnerLoading.module.pcss';\n\ninterface Properties {\n  className?: string | undefined;\n}\n\nfunction SpinnerLoading({ className }: Properties): ReactElement {\n  return (\n    <svg\n      data-testid='spinner'\n      className={cx(styles.spinnerLoading, className)}\n      xmlns='http://www.w3.org/2000/svg'\n      viewBox='0 0 100 100'\n      fill='none'\n      stroke='var(--primary-color)'\n    >\n      <circle cx='50' cy='50' r='45' strokeWidth='10' />\n    </svg>\n  );\n}\n\nSpinnerLoading.defaultProps = {\n  className: undefined,\n};\n\nexport default SpinnerLoading;\n"],"mappings":"6GASA,SAAS,EAAe,CAAE,aAAuC,CAC/D,OACE,EAAC,MAAD,CACE,cAAY,UACZ,UAAW,EAAG,EAAO,eAAgB,CAAS,EAC9C,MAAM,6BACN,QAAQ,cACR,KAAK,OACL,OAAO,uBAEP,SAAA,EAAC,SAAD,CAAQ,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,YAAY,IAAM,CAAA,CAC9C,CAAA,CAET,CAEA,EAAe,aAAe,CAC5B,UAAW,IAAA,EACb"}

package/dist/esm/common/loading/spinnerLoading/spinnerLoading.module.mjs

@@ -1,2 +1,2 @@
-var e={"spinner-loading":`spinner-loading_qbxX-`,spinnerLoading:`spinner-loading_qbxX-`,"animate-spinner":`animate-spinner_6HoVF`,animateSpinner:`animate-spinner_6HoVF`,spin:`spin_axdh6`};export{e as default};
+var e=`spinner-loading_qbxX-`,t=`animate-spinner_6HoVF`,n=`spin_axdh6`,r={"spinner-loading":`spinner-loading_qbxX-`,spinnerLoading:e,"animate-spinner":`animate-spinner_6HoVF`,animateSpinner:t,spin:n};export{t as animateSpinner,r as default,n as spin,e as spinnerLoading};
 //# sourceMappingURL=spinnerLoading.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"modal.mjs","names":[],"sources":["../../../../package/common/modal/modal.tsx"],"sourcesContent":["import cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\n\nimport styles from './modal.module.pcss';\nimport sheetStyles from 'components/common/styles/sheet.module.pcss';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faXmark as closeIcon } from '@fortawesome/free-solid-svg-icons';\nimport { ModalProps } from './modal.types';\nimport { useEffect, useId, useRef, useState } from 'react';\nimport { useVisualViewportSize } from 'components/common/hooks/useVisualViewportSize';\nimport { useOverlay } from 'components/common/hooks/useOverlay';\nimport { useSheet } from 'components/common/hooks/useSheet';\nimport { useComponentDefaults, usePresentationDefault } from 'components/common/configProvider';\n\nfunction Modal(props: ModalProps) {\n  const {\n  children = null,\n  title = '',\n  isOpen = false,\n  onClose = () => null,\n  className = '',\n  style,\n  hideHeader = false,\n  closeOnEscape = true,\n  presentation: presentationProp,\n  classNames,\n  styles: slotStyles,\n  ...rest\n  } = useComponentDefaults('Modal', props);\n  const [isRendered, setIsRendered] = useState(isOpen);\n  const [animateIn, setAnimateIn] = useState(isOpen);\n  const modalRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  // Centering/sizing against the actually-visible viewport (not the full layout viewport) keeps\n  // the modal — and whatever's focused inside it — from ending up under a mobile keyboard.\n  const { height: viewportHeight, offsetTop: viewportOffsetTop } = useVisualViewportSize();\n  // Explicit prop → this component's global default → the app-wide one. There's no built-in\n  // fallback to add: `Default` and no presentation at all both mean the ordinary centred dialog.\n  const appPresentation = usePresentationDefault();\n  const presentation = presentationProp ?? appPresentation;\n  const { isSheet, sheetStyle } = useSheet(presentation);\n\n  useEffect(() => {\n    if (isOpen) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setIsRendered(isOpen);\n      setTimeout(() => setAnimateIn(true), 1);\n    } else {\n      setAnimateIn(false);\n      setTimeout(() => setIsRendered(isOpen), 300);\n    }\n  }, [isOpen]);\n\n  // Keyed on `animateIn` rather than `isOpen`, because the panel this needs to focus and trap\n  // focus inside of only mounts once that flips.\n  useOverlay({\n    isActive: isRendered && animateIn,\n    containerRef: modalRef,\n    onEscape: closeOnEscape ? onClose : undefined,\n  });\n\n  if (!isRendered) return null;\n\n  const hasHeaderTitle = !hideHeader && !!title;\n\n  return (\n    <BodyEnd>\n      <div\n        className={cx(styles.modalContainer, classNames?.container)}\n        style={{ height: viewportHeight, top: viewportOffsetTop, ...slotStyles?.container }}\n      >\n        <div\n          className={cx(styles.modalWrapper, animateIn && styles.modalWrapperShown, classNames?.backdrop)}\n          style={slotStyles?.backdrop}\n          onClick={onClose}\n        />\n        {animateIn && (\n          <div\n            {...rest}\n            ref={modalRef}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={hasHeaderTitle ? titleId : undefined}\n            // Focusable so the trap has somewhere to put focus when the content has no tabbables.\n            tabIndex={-1}\n            className={cx(\n              styles.modal,\n              animateIn && styles.modalShown,\n              // The panel is its own sheet surface here: there's no inner panel to fill, since\n              // Modal already splits itself into a fixed header and a scrolling body.\n              isSheet && [sheetStyles.sheet, sheetStyles.sheetSurface, styles.modalSheet],\n              className,\n              classNames?.modal,\n            )}\n            style={{ ...(isSheet ? sheetStyle : undefined), ...style, ...slotStyles?.modal }}\n            onClick={(e) => e.stopPropagation()}\n          >\n            {!hideHeader && (\n              <div className={cx(styles.modalHeader, classNames?.header)} style={slotStyles?.header}>\n                <div id={titleId} className={classNames?.title} style={slotStyles?.title}>{title}</div>\n                <button\n                  type=\"button\"\n                  onClick={onClose}\n                  aria-label=\"Close\"\n                  className={cx(styles.modalCloseButton, classNames?.closeButton)}\n                  style={slotStyles?.closeButton}\n                >\n                  <FontAwesomeIcon icon={closeIcon} />\n                </button>\n              </div>\n            )}\n            <div className={cx(styles.modalBody, classNames?.body)} style={slotStyles?.body}>\n              {children}\n            </div>\n          </div>\n        )}\n      </div>\n    </BodyEnd>\n  );\n}\n\nexport default Modal;\n"],"mappings":"+sBAcA,SAAS,EAAM,EAAmB,CAChC,GAAM,CACN,WAAW,KACX,QAAQ,GACR,SAAS,GACT,cAAgB,KAChB,YAAY,GACZ,QACA,aAAa,GACb,gBAAgB,GAChB,aAAc,EACd,aACA,OAAQ,EACR,GAAG,GACC,EAAqB,QAAS,CAAK,EACjC,CAAC,EAAY,GAAiB,EAAS,CAAM,EAC7C,CAAC,EAAW,GAAgB,EAAS,CAAM,EAC3C,EAAW,EAAuB,IAAI,EACtC,EAAU,EAAM,EAGhB,CAAE,OAAQ,EAAgB,UAAW,GAAsB,EAAsB,EAGjF,EAAkB,EAAuB,EAEzC,CAAE,UAAS,cAAe,EADX,GAAoB,CACY,EAqBrD,GAnBA,MAAgB,CACV,GAEF,EAAc,CAAM,EACpB,eAAiB,EAAa,EAAI,EAAG,CAAC,IAEtC,EAAa,EAAK,EAClB,eAAiB,EAAc,CAAM,EAAG,GAAG,EAE/C,EAAG,CAAC,CAAM,CAAC,EAIX,EAAW,CACT,SAAU,GAAc,EACxB,aAAc,EACd,SAAU,EAAgB,EAAU,IAAA,EACtC,CAAC,EAEG,CAAC,EAAY,OAAO,KAExB,IAAM,EAAiB,CAAC,GAAc,CAAC,CAAC,EAExC,OACE,EAAC,EAAD,CAAA,SACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,eAAgB,GAAY,SAAS,EAC1D,MAAO,CAAE,OAAQ,EAAgB,IAAK,EAAmB,GAAG,GAAY,SAAU,WAFpF,CAIE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,aAAc,GAAa,EAAO,kBAAmB,GAAY,QAAQ,EAC9F,MAAO,GAAY,SACnB,QAAS,CACV,CAAA,EACA,GACC,EAAC,MAAD,CACE,GAAI,EACJ,IAAK,EACL,KAAK,SACL,aAAW,OACX,kBAAiB,EAAiB,EAAU,IAAA,GAE5C,SAAU,GACV,UAAW,EACT,EAAO,MACP,GAAa,EAAO,WAGpB,GAAW,CAAC,EAAY,MAAO,EAAY,aAAc,EAAO,UAAU,EAC1E,EACA,GAAY,KACd,EACA,MAAO,CAAE,GAAI,EAAU,EAAa,IAAA,GAAY,GAAG,EAAO,GAAG,GAAY,KAAM,EAC/E,QAAU,GAAM,EAAE,gBAAgB,WAlBpC,CAoBG,CAAC,GACA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,YAAa,GAAY,MAAM,EAAG,MAAO,GAAY,gBAA/E,CACE,EAAC,MAAD,CAAK,GAAI,EAAS,UAAW,GAAY,MAAO,MAAO,GAAY,eAAQ,CAAW,CAAA,EACtF,EAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,aAAW,QACX,UAAW,EAAG,EAAO,iBAAkB,GAAY,WAAW,EAC9D,MAAO,GAAY,qBAEnB,EAAC,EAAD,CAAiB,KAAM,CAAY,CAAA,CAC7B,CAAA,CACL,IAEP,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,UAAW,GAAY,IAAI,EAAG,MAAO,GAAY,KACxE,UACE,CAAA,CACF,GAEJ,GACE,CAAA,CAEb"}
+{"version":3,"file":"modal.mjs","names":[],"sources":["../../../../package/common/modal/modal.tsx"],"sourcesContent":["import cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\n\nimport styles from './modal.module.pcss';\nimport sheetStyles from 'components/common/styles/sheet.module.pcss';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faXmark as closeIcon } from '@fortawesome/free-solid-svg-icons';\nimport { ModalProps } from './modal.types';\nimport { useEffect, useId, useRef, useState } from 'react';\nimport { useVisualViewportSize } from 'components/common/hooks/useVisualViewportSize';\nimport { useOverlay } from 'components/common/hooks/useOverlay';\nimport { useSheet } from 'components/common/hooks/useSheet';\nimport { useComponentDefaults, usePresentationDefault } from 'components/common/configProvider';\n\nfunction Modal(props: ModalProps) {\n  const {\n    children = null,\n    title = '',\n    isOpen = false,\n    onClose = () => null,\n    className = '',\n    style,\n    hideHeader = false,\n    closeOnEscape = true,\n    presentation: presentationProp,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Modal', props);\n  const [isRendered, setIsRendered] = useState(isOpen);\n  const [animateIn, setAnimateIn] = useState(isOpen);\n  const modalRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  // Centering/sizing against the actually-visible viewport (not the full layout viewport) keeps\n  // the modal — and whatever's focused inside it — from ending up under a mobile keyboard.\n  const { height: viewportHeight, offsetTop: viewportOffsetTop } = useVisualViewportSize();\n  // Explicit prop → this component's global default → the app-wide one. There's no built-in\n  // fallback to add: `Default` and no presentation at all both mean the ordinary centred dialog.\n  const appPresentation = usePresentationDefault();\n  const presentation = presentationProp ?? appPresentation;\n  const { isSheet, sheetStyle } = useSheet(presentation);\n\n  useEffect(() => {\n    if (isOpen) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setIsRendered(isOpen);\n      setTimeout(() => setAnimateIn(true), 1);\n    } else {\n      setAnimateIn(false);\n      setTimeout(() => setIsRendered(isOpen), 300);\n    }\n  }, [isOpen]);\n\n  // Keyed on `animateIn` rather than `isOpen`, because the panel this needs to focus and trap\n  // focus inside of only mounts once that flips.\n  useOverlay({\n    isActive: isRendered && animateIn,\n    containerRef: modalRef,\n    onEscape: closeOnEscape ? onClose : undefined,\n  });\n\n  if (!isRendered) return null;\n\n  const hasHeaderTitle = !hideHeader && !!title;\n\n  return (\n    <BodyEnd>\n      <div\n        className={cx(styles.modalContainer, classNames?.container)}\n        style={{ height: viewportHeight, top: viewportOffsetTop, ...slotStyles?.container }}\n      >\n        <div\n          className={cx(styles.modalWrapper, animateIn && styles.modalWrapperShown, classNames?.backdrop)}\n          style={slotStyles?.backdrop}\n          onClick={onClose}\n        />\n        {animateIn && (\n          <div\n            {...rest}\n            ref={modalRef}\n            role='dialog'\n            aria-modal='true'\n            aria-labelledby={hasHeaderTitle ? titleId : undefined}\n            // Focusable so the trap has somewhere to put focus when the content has no tabbables.\n            tabIndex={-1}\n            className={cx(\n              styles.modal,\n              animateIn && styles.modalShown,\n              // The panel is its own sheet surface here: there's no inner panel to fill, since\n              // Modal already splits itself into a fixed header and a scrolling body.\n              isSheet && [sheetStyles.sheet, sheetStyles.sheetSurface, styles.modalSheet],\n              className,\n              classNames?.modal,\n            )}\n            style={{ ...(isSheet ? sheetStyle : undefined), ...style, ...slotStyles?.modal }}\n            onClick={(e) => e.stopPropagation()}\n          >\n            {!hideHeader && (\n              <div className={cx(styles.modalHeader, classNames?.header)} style={slotStyles?.header}>\n                <div id={titleId} className={classNames?.title} style={slotStyles?.title}>\n                  {title}\n                </div>\n                <button\n                  type='button'\n                  onClick={onClose}\n                  aria-label='Close'\n                  className={cx(styles.modalCloseButton, classNames?.closeButton)}\n                  style={slotStyles?.closeButton}\n                >\n                  <FontAwesomeIcon icon={closeIcon} />\n                </button>\n              </div>\n            )}\n            <div className={cx(styles.modalBody, classNames?.body)} style={slotStyles?.body}>\n              {children}\n            </div>\n          </div>\n        )}\n      </div>\n    </BodyEnd>\n  );\n}\n\nexport default Modal;\n"],"mappings":"+sBAcA,SAAS,EAAM,EAAmB,CAChC,GAAM,CACJ,WAAW,KACX,QAAQ,GACR,SAAS,GACT,cAAgB,KAChB,YAAY,GACZ,QACA,aAAa,GACb,gBAAgB,GAChB,aAAc,EACd,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,QAAS,CAAK,EACjC,CAAC,EAAY,GAAiB,EAAS,CAAM,EAC7C,CAAC,EAAW,GAAgB,EAAS,CAAM,EAC3C,EAAW,EAAuB,IAAI,EACtC,EAAU,EAAM,EAGhB,CAAE,OAAQ,EAAgB,UAAW,GAAsB,EAAsB,EAGjF,EAAkB,EAAuB,EAEzC,CAAE,UAAS,cAAe,EADX,GAAoB,CACY,EAqBrD,GAnBA,MAAgB,CACV,GAEF,EAAc,CAAM,EACpB,eAAiB,EAAa,EAAI,EAAG,CAAC,IAEtC,EAAa,EAAK,EAClB,eAAiB,EAAc,CAAM,EAAG,GAAG,EAE/C,EAAG,CAAC,CAAM,CAAC,EAIX,EAAW,CACT,SAAU,GAAc,EACxB,aAAc,EACd,SAAU,EAAgB,EAAU,IAAA,EACtC,CAAC,EAEG,CAAC,EAAY,OAAO,KAExB,IAAM,EAAiB,CAAC,GAAc,CAAC,CAAC,EAExC,OACE,EAAC,EAAD,CAAA,SACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,eAAgB,GAAY,SAAS,EAC1D,MAAO,CAAE,OAAQ,EAAgB,IAAK,EAAmB,GAAG,GAAY,SAAU,EAFpF,SAAA,CAIE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,aAAc,GAAa,EAAO,kBAAmB,GAAY,QAAQ,EAC9F,MAAO,GAAY,SACnB,QAAS,CACV,CAAA,EACA,GACC,EAAC,MAAD,CACE,GAAI,EACJ,IAAK,EACL,KAAK,SACL,aAAW,OACX,kBAAiB,EAAiB,EAAU,IAAA,GAE5C,SAAU,GACV,UAAW,EACT,EAAO,MACP,GAAa,EAAO,WAGpB,GAAW,CAAC,EAAY,MAAO,EAAY,aAAc,EAAO,UAAU,EAC1E,EACA,GAAY,KACd,EACA,MAAO,CAAE,GAAI,EAAU,EAAa,IAAA,GAAY,GAAG,EAAO,GAAG,GAAY,KAAM,EAC/E,QAAU,GAAM,EAAE,gBAAgB,EAlBpC,SAAA,CAoBG,CAAC,GACA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,YAAa,GAAY,MAAM,EAAG,MAAO,GAAY,OAA/E,SAAA,CACE,EAAC,MAAD,CAAK,GAAI,EAAS,UAAW,GAAY,MAAO,MAAO,GAAY,MAChE,SAAA,CACE,CAAA,EACL,EAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,aAAW,QACX,UAAW,EAAG,EAAO,iBAAkB,GAAY,WAAW,EAC9D,MAAO,GAAY,YAEnB,SAAA,EAAC,EAAD,CAAiB,KAAM,CAAY,CAAA,CAC7B,CAAA,CACL,CAEP,CAAA,EAAA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,UAAW,GAAY,IAAI,EAAG,MAAO,GAAY,KACxE,UACE,CAAA,CACF,CAEJ,CAAA,CAAA,CACE,CAAA,CAAA,CAAA,CAEb"}

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

@@ -1,2 +1,2 @@
-var e={modal:`modal_L-Fkd`,slideIn:`slideIn_RVIHR`,fadeIn:`fadeIn_XSuIE`,"modal-sheet":`modal-sheet_WkXR4`,modalSheet:`modal-sheet_WkXR4`,"modal-container":`modal-container_qwKIm`,modalContainer:`modal-container_qwKIm`,"modal-header":`modal-header_DhsRr`,modalHeader:`modal-header_DhsRr`,"modal-body":`modal-body_Mmn0-`,modalBody:`modal-body_Mmn0-`,"modal-close-button":`modal-close-button_UMZjq`,modalCloseButton:`modal-close-button_UMZjq`,"modal-wrapper":`modal-wrapper_r5wzq`,modalWrapper:`modal-wrapper_r5wzq`,"modal-wrapper-shown":`modal-wrapper-shown_F0BgK`,modalWrapperShown:`modal-wrapper-shown_F0BgK`};export{e as default};
+var e=`modal_L-Fkd`,t=`slideIn_RVIHR`,n=`fadeIn_XSuIE`,r=`modal-sheet_WkXR4`,i=`modal-container_qwKIm`,a=`modal-header_DhsRr`,o=`modal-body_Mmn0-`,s=`modal-close-button_UMZjq`,c=`modal-wrapper_r5wzq`,l=`modal-wrapper-shown_F0BgK`,u={modal:e,slideIn:t,fadeIn:n,"modal-sheet":`modal-sheet_WkXR4`,modalSheet:r,"modal-container":`modal-container_qwKIm`,modalContainer:i,"modal-header":`modal-header_DhsRr`,modalHeader:a,"modal-body":`modal-body_Mmn0-`,modalBody:o,"modal-close-button":`modal-close-button_UMZjq`,modalCloseButton:s,"modal-wrapper":`modal-wrapper_r5wzq`,modalWrapper:c,"modal-wrapper-shown":`modal-wrapper-shown_F0BgK`,modalWrapperShown:l};export{u as default,n as fadeIn,e as modal,o as modalBody,s as modalCloseButton,i as modalContainer,a as modalHeader,r as modalSheet,c as modalWrapper,l as modalWrapperShown,t as slideIn};
 //# sourceMappingURL=modal.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"modal.module.mjs","names":[],"sources":["../../../../package/common/modal/modal.module.pcss"],"sourcesContent":["\n.modal {\n  padding: 16px;\n  border-radius: var(--default-border-radius);\n  background: var(--background-modal);\n  color: var(--text-color);\n  font-family: var(--default-font);\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  transform-origin: bottom center;\n  animation:\n    slideIn 0.2s,\n    fadeIn 0.3s forwards;\n  max-width: 95%;\n  max-height: 95%;\n  /* The panel itself never scrolls, so the header stays put; `&-body` is what scrolls. */\n  overflow: hidden;\n\n  @media (max-width: 767px) {\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  /* A sheet-presented modal carries forms and detail views, not a short menu, so it takes more\n     of the screen than the shared default — and keeps the panel's own 16px at the bottom edge. */\n  &-sheet {\n    --sheet-max-height: 90dvh;\n    --sheet-safe-padding: 16px;\n  }\n\n  &-container {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    top: 0;\n    left: 0;\n  }\n\n  &-header {\n    display: flex;\n    gap: 8px;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n    flex: 0 0 auto;\n\n    div {\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  &-body {\n    /* `min-height: 0` lets this shrink below its content's height so it, not the panel, scrolls. */\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow: auto;\n    margin: -0.6em;\n    padding: 0.6em;\n  }\n\n  &-close-button {\n    flex-shrink: 0;\n    background: none;\n    border: none;\n    padding: 0;\n    color: inherit;\n    font-size: inherit;\n    line-height: 1;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &-wrapper {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    background: #00000052;\n    top: 0;\n    left: 0;\n    transition: all 0.3s ease-in-out;\n    opacity: 0;\n\n    &-shown {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes slideIn {\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(0.99);\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"modal.module.mjs","names":[],"sources":["../../../../package/common/modal/modal.module.pcss"],"sourcesContent":[".modal {\n  padding: 16px;\n  border-radius: var(--default-border-radius);\n  background: var(--background-modal);\n  color: var(--text-color);\n  font-family: var(--default-font);\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  transform-origin: bottom center;\n  animation:\n    slideIn 0.2s,\n    fadeIn 0.3s forwards;\n  max-width: 95%;\n  max-height: 95%;\n\n  /* The panel itself never scrolls, so the header stays put; `&-body` is what scrolls. */\n  overflow: hidden;\n\n  @media (width <= 767px) {\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  /* A sheet-presented modal carries forms and detail views, not a short menu, so it takes more\n     of the screen than the shared default — and keeps the panel's own 16px at the bottom edge. */\n  &-sheet {\n    --sheet-max-height: 90dvh;\n    --sheet-safe-padding: 16px;\n  }\n\n  &-container {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    top: 0;\n    left: 0;\n  }\n\n  &-header {\n    display: flex;\n    gap: 8px;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n    flex: 0 0 auto;\n\n    div {\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  &-body {\n    /* `min-height: 0` lets this shrink below its content's height so it, not the panel, scrolls. */\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow: auto;\n    margin: -0.6em;\n    padding: 0.6em;\n  }\n\n  &-close-button {\n    flex-shrink: 0;\n    background: none;\n    border: none;\n    padding: 0;\n    color: inherit;\n    font-size: inherit;\n    line-height: 1;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &-wrapper {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    background: #00000052;\n    top: 0;\n    left: 0;\n    transition: all 0.3s ease-in-out;\n    opacity: 0;\n\n    &-shown {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes slideIn {\n  from {\n    transform: scale(0);\n  }\n\n  to {\n    transform: scale(0.99);\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n"],"mappings":""}

package/dist/esm/common/multiSelect/multiSelect.mjs

@@ -0,0 +1,2 @@
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../chip/chip.mjs";import n from"../tooltip/tooltip.mjs";import r from"../searchInput/searchInput.mjs";import{PopoverAlign as ee,PopoverPlacement as te,PopoverTrigger as ne}from"../popover/popover.types.mjs";import re from"../popover/popover.mjs";import i from"./multiSelect.module.mjs";import{useEffect as a,useId as ie,useRef as o,useState as s}from"react";import c from"classnames";import{FontAwesomeIcon as l}from"@fortawesome/react-fontawesome";import{faCheck as ae,faChevronDown as oe,faXmark as se}from"@fortawesome/free-solid-svg-icons";import{jsx as u,jsxs as d}from"react/jsx-runtime";var ce=[];function f(f){let{items:p,value:m,defaultValue:le=[],onChange:ue=()=>{},label:h=``,alwaysFloatLabel:de=!1,placeholder:g=``,searchable:fe=!1,allowCustomValues:_=!1,createLabel:pe=e=>`Add "${e}"`,searchPlaceholder:me=`Search…`,emptyLabel:he=`No matches`,maxSelected:v,clearable:ge=!0,disabled:y=!1,readOnly:_e=!1,presentation:ve,formValidator:b=null,errorMessage:x=``,isValid:ye=!0,className:be,style:xe,classNames:S,styles:C,onMouseEnter:Se,onMouseLeave:Ce,onFocus:we,onBlur:Te,...Ee}=e(`MultiSelect`,f),w=o(null),T=o(null),E=o(null),D=ie(),[De,Oe]=s(le),[O,ke]=s(!1),[k,A]=s(``),[j,M]=s(0),[N,P]=s(!1),[Ae,F]=s(!1),[I,je]=s(),L=o(b),[,Me]=s(0);a(()=>{L.current=b;let e=L.current;if(!e)return;e.label=h,e.validate();let t=()=>Me(e=>e+1);return e.registerOnUpdateListener(t),()=>{e.removeOnUpdateListener(t)}},[b,h]);let R=m!==void 0&&!b,z=b?b.value:R?m:De,B=Array.isArray(z)?z:ce,V=b?b.touched&&b.hasError():!ye||!!x,Ne=b?b.getCurrentErrorMessage():x||``,H=!y&&!_e,U=v!==void 0&&B.length>=v,W=de||O||N||B.length>0,G=fe||_,K=k.trim(),q=G?K.toLowerCase():``,J=q?p.filter(e=>e.label.toLowerCase().includes(q)):p,Y=_&&K.length>0&&!U&&!p.some(e=>e.label.toLowerCase()===q||String(e.key).toLowerCase()===q)&&!B.some(e=>String(e).toLowerCase()===q),X=Y?[...J,{key:K,label:pe(K)}]:J,Pe=B.map(e=>p.find(t=>t.key===e)??(_?{key:e,label:String(e)}:void 0)).filter(e=>e!==void 0);function Z(e){b?b.set(e):R||Oe(e),ue(e)}function Q(e){H&&!e.disabled&&(B.includes(e.key)?Z(B.filter(t=>t!==e.key)):U||Z([...B,e.key]),Y&&e.key===K&&A(``))}function Fe(){w.current?.contains(document.activeElement)&&T.current?.focus()}function Ie(e){(!e||H)&&(ke(e),e?(je(T.current?.offsetWidth),M(0)):(A(``),L.current&&(L.current.touched=!0)))}a(()=>{O&&G&&E.current?.querySelector(`input`)?.focus()},[O,G]);function $(e){if(H){if(!O){e.key===`ArrowDown`||e.key===`Enter`||e.key===` `?(e.preventDefault(),Ie(!0)):e.key===`Backspace`&&B.length>0&&Z(B.slice(0,-1));return}if(e.key===`ArrowDown`||e.key===`ArrowUp`){if(e.preventDefault(),X.length===0)return;let t=e.key===`ArrowDown`?1:-1;M(e=>(e+t+X.length)%X.length)}else if(e.key===`Home`||e.key===`End`)e.preventDefault(),M(e.key===`Home`?0:X.length-1);else if(e.key===`Enter`){e.preventDefault();let t=X[j];t&&Q(t)}else e.key===`Backspace`&&!k&&B.length>0&&Z(B.slice(0,-1))}}let Le=d(`div`,{className:c(i.multiSelectPanel,S?.panel),style:C?.panel,children:[G&&u(`div`,{ref:E,className:c(i.multiSelectSearch,S?.search),style:C?.search,children:u(r,{value:k,onChange:e=>{A(e),M(0)},placeholder:me,onKeyDown:$})}),u(`div`,{id:D,role:`listbox`,"aria-multiselectable":`true`,"aria-label":h||void 0,className:c(i.multiSelectOptions,S?.options),style:C?.options,children:X.length===0?u(`div`,{className:c(i.multiSelectEmpty,S?.empty),style:C?.empty,children:he}):X.map((e,t)=>{let n=B.includes(e.key),r=e.disabled||U&&!n;return d(`div`,{id:`${D}-${t}`,role:`option`,"aria-selected":n,"aria-disabled":r||void 0,className:c(i.multiSelectOption,t===j&&i.multiSelectOptionActive,n&&i.multiSelectOptionSelected,r&&i.multiSelectOptionDisabled,S?.option),style:C?.option,onMouseDown:e=>e.preventDefault(),onMouseEnter:()=>M(t),onClick:()=>Q(e),children:[u(`span`,{className:c(i.multiSelectOptionCheck,S?.optionCheck),style:C?.optionCheck,children:n&&u(l,{icon:ae})}),u(`span`,{className:c(i.multiSelectOptionLabel,S?.optionLabel),style:C?.optionLabel,children:e.label})]},e.key)})})]});return d(`div`,{...Ee,ref:w,className:c(i.multiSelect,y&&i.multiSelectDisabled,S?.root,be),style:{...xe,...C?.root},onMouseEnter:e=>{F(!0),Se?.(e)},onMouseLeave:e=>{F(!1),Ce?.(e)},onFocus:e=>{P(!0),we?.(e)},onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(P(!1),Te?.(e))},children:[u(re,{isOpen:O,onOpenChange:Ie,trigger:ne.Click,placement:te.Bottom,align:ee.Start,offset:4,withArrow:!1,disabled:!H,presentation:ve,content:Le,className:i.multiSelectPopover,styles:{panel:I?{minWidth:I}:void 0},children:d(`div`,{ref:T,role:`combobox`,tabIndex:y?-1:0,"aria-expanded":O,"aria-haspopup":`listbox`,"aria-controls":D,"aria-activedescendant":O&&X.length>0?`${D}-${j}`:void 0,"aria-disabled":y||void 0,"aria-readonly":_e||void 0,className:c(i.multiSelectControl,S?.control),style:C?.control,onKeyDown:$,children:[g&&Pe.length===0&&u(`span`,{className:c(i.multiSelectPlaceholder,(!h||W)&&i.multiSelectPlaceholderShown,!h&&i.multiSelectPlaceholderInstant,S?.placeholder),style:C?.placeholder,children:g}),u(`div`,{className:c(i.multiSelectValues,S?.values),style:C?.values,children:Pe.map(e=>u(t,{text:e.label,showRemoveIcon:H,removeLabel:`Remove ${e.label}`,onMouseDown:e=>e.preventDefault(),onRemove:()=>{Q(e),Fe()},className:c(i.multiSelectChip,S?.chip),style:C?.chip},e.key))}),ge&&H&&B.length>0&&u(`button`,{type:`button`,tabIndex:-1,"aria-label":`Clear selection`,className:c(i.multiSelectClearButton,S?.clearButton),style:C?.clearButton,onMouseDown:e=>e.preventDefault(),onClick:e=>{e.stopPropagation(),Z([]),Fe()},children:u(l,{icon:se})}),u(l,{icon:oe,className:c(i.multiSelectIcon,O&&i.multiSelectIconOpen,S?.icon),style:C?.icon}),h&&u(`div`,{className:c(i.multiSelectLabel,W&&i.multiSelectLabelFloating,S?.label),style:C?.label,children:h}),u(`fieldset`,{className:c(i.multiSelectFieldset,!h&&i.multiSelectFieldsetNoNotch,(N||O)&&i.multiSelectFieldsetFocused,V&&i.multiSelectFieldsetError,S?.fieldset),style:C?.fieldset,children:u(`legend`,{className:c(i.multiSelectFieldsetLegend,W&&i.multiSelectFieldsetLegendActive),children:u(`span`,{children:h})})})]})}),u(n,{variant:`error`,message:Ne,isVisible:V&&(N||Ae)})]})}export{f as default};
+//# sourceMappingURL=multiSelect.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multiSelect.mjs","names":[],"sources":["../../../../package/common/multiSelect/multiSelect.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from 'react';\nimport type { ReactElement } from 'react';\nimport cx from 'classnames';\nimport { faChevronDown, faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport Chip from 'components/common/chip';\nimport SearchInput from 'components/common/searchInput';\nimport Tooltip from 'components/common/tooltip';\nimport Popover from 'components/common/popover';\nimport { PopoverAlign, PopoverPlacement, PopoverTrigger } from '../popover/popover.types';\nimport { useComponentDefaults } from '../configProvider';\nimport type { MultiSelectItem, MultiSelectProps, MultiSelectValue } from './multiSelect.types';\n\nimport styles from './multiSelect.module.pcss';\n\nconst EMPTY: MultiSelectValue[] = [];\n\nfunction MultiSelect(props: MultiSelectProps): ReactElement {\n  const {\n    items,\n    value,\n    defaultValue = [],\n    onChange = () => {},\n    label = '',\n    alwaysFloatLabel = false,\n    placeholder = '',\n    searchable = false,\n    allowCustomValues = false,\n    createLabel = (value: string) => `Add \"${value}\"`,\n    searchPlaceholder = 'Search…',\n    emptyLabel = 'No matches',\n    maxSelected,\n    clearable = true,\n    disabled = false,\n    readOnly = false,\n    presentation,\n    formValidator = null,\n    errorMessage = '',\n    isValid = true,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    ...rest\n  } = useComponentDefaults('MultiSelect', props);\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const controlRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLDivElement>(null);\n  const listboxId = useId();\n\n  const [internalValue, setInternalValue] = useState<MultiSelectValue[]>(defaultValue);\n  const [isOpen, setIsOpen] = useState(false);\n  const [search, setSearch] = useState('');\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [panelWidth, setPanelWidth] = useState<number>();\n\n  // A ref as well as the prop: react-hooks/immutability refuses a mutation of the prop itself in\n  // an event handler, and marking the validator touched happens in one.\n  const fvRef = useRef(formValidator);\n  const [, forceUpdate] = useState(0);\n  useEffect(() => {\n    fvRef.current = formValidator;\n    const fv = fvRef.current;\n    if (!fv) return;\n    fv.label = label;\n    fv.validate();\n    const listener = () => forceUpdate((n) => n + 1);\n    fv.registerOnUpdateListener(listener);\n    return () => {\n      fv.removeOnUpdateListener(listener);\n    };\n  }, [formValidator, label]);\n\n  const isControlled = value !== undefined && !formValidator;\n  const rawValue = formValidator ? formValidator.value : isControlled ? value : internalValue;\n  const selected = Array.isArray(rawValue) ? (rawValue as MultiSelectValue[]) : EMPTY;\n\n  const hasError = formValidator ? formValidator.touched && formValidator.hasError() : !isValid || !!errorMessage;\n  const errorText = formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || '';\n\n  const isInteractive = !disabled && !readOnly;\n  const atMax = maxSelected !== undefined && selected.length >= maxSelected;\n\n  const shouldFloatLabel = alwaysFloatLabel || isOpen || isFocused || selected.length > 0;\n\n  const isSearchable = searchable || allowCustomValues;\n  const typed = search.trim();\n  const needle = isSearchable ? typed.toLowerCase() : '';\n  const matches = needle ? items.filter((item) => item.label.toLowerCase().includes(needle)) : items;\n\n  const canCreate =\n    allowCustomValues &&\n    typed.length > 0 &&\n    !atMax &&\n    !items.some((item) => item.label.toLowerCase() === needle || String(item.key).toLowerCase() === needle) &&\n    !selected.some((key) => String(key).toLowerCase() === needle);\n\n  const visibleItems: MultiSelectItem[] = canCreate ? [...matches, { key: typed, label: createLabel(typed) }] : matches;\n\n  // Mapped from `selected`, not filtered from `items`, to keep the chips in pick order. A custom\n  // value has no entry in `items`, so it stands in for itself.\n  const selectedItems = selected\n    .map<MultiSelectItem | undefined>(\n      (key) => items.find((item) => item.key === key) ?? (allowCustomValues ? { key, label: String(key) } : undefined),\n    )\n    .filter((item): item is MultiSelectItem => item !== undefined);\n\n  function commit(next: MultiSelectValue[]) {\n    if (formValidator) formValidator.set(next);\n    else if (!isControlled) setInternalValue(next);\n    onChange(next);\n  }\n\n  function toggle(item: MultiSelectItem) {\n    if (!isInteractive || item.disabled) return;\n    if (selected.includes(item.key)) commit(selected.filter((key) => key !== item.key));\n    else if (!atMax) commit([...selected, item.key]);\n    // The typed text has become a chip, so leaving it in the box would offer to add it again.\n    if (canCreate && item.key === typed) setSearch('');\n  }\n\n  /**\n   * A focused element that unmounts fires no blur, so removing the chip or clear button that was\n   * just clicked would leave `isFocused` stuck true. Hand focus back so there is still something\n   * left to blur.\n   */\n  function keepFocusInControl() {\n    if (rootRef.current?.contains(document.activeElement)) controlRef.current?.focus();\n  }\n\n  function handleOpenChange(next: boolean) {\n    if (next && !isInteractive) return;\n    setIsOpen(next);\n    if (next) {\n      setPanelWidth(controlRef.current?.offsetWidth);\n      setActiveIndex(0);\n    } else {\n      setSearch('');\n      if (fvRef.current) fvRef.current.touched = true;\n    }\n  }\n\n  useEffect(() => {\n    if (!isOpen || !isSearchable) return;\n    searchRef.current?.querySelector('input')?.focus();\n  }, [isOpen, isSearchable]);\n\n  function handleKeyDown(event: React.KeyboardEvent) {\n    if (!isInteractive) return;\n\n    if (!isOpen) {\n      if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        handleOpenChange(true);\n      } else if (event.key === 'Backspace' && selected.length > 0) {\n        commit(selected.slice(0, -1));\n      }\n      return;\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      if (visibleItems.length === 0) return;\n      const step = event.key === 'ArrowDown' ? 1 : -1;\n      setActiveIndex((current) => (current + step + visibleItems.length) % visibleItems.length);\n    } else if (event.key === 'Home' || event.key === 'End') {\n      event.preventDefault();\n      setActiveIndex(event.key === 'Home' ? 0 : visibleItems.length - 1);\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      const item = visibleItems[activeIndex];\n      if (item) toggle(item);\n    } else if (event.key === 'Backspace' && !search && selected.length > 0) {\n      commit(selected.slice(0, -1));\n    }\n  }\n\n  const panel = (\n    <div className={cx(styles.multiSelectPanel, classNames?.panel)} style={slotStyles?.panel}>\n      {isSearchable && (\n        <div ref={searchRef} className={cx(styles.multiSelectSearch, classNames?.search)} style={slotStyles?.search}>\n          <SearchInput\n            value={search}\n            onChange={(value) => {\n              setSearch(value);\n              setActiveIndex(0);\n            }}\n            placeholder={searchPlaceholder}\n            onKeyDown={handleKeyDown}\n          />\n        </div>\n      )}\n      <div\n        id={listboxId}\n        role='listbox'\n        aria-multiselectable='true'\n        aria-label={label || undefined}\n        className={cx(styles.multiSelectOptions, classNames?.options)}\n        style={slotStyles?.options}\n      >\n        {visibleItems.length === 0 ? (\n          <div className={cx(styles.multiSelectEmpty, classNames?.empty)} style={slotStyles?.empty}>\n            {emptyLabel}\n          </div>\n        ) : (\n          visibleItems.map((item, index) => {\n            const isSelected = selected.includes(item.key);\n            const isDisabled = item.disabled || (atMax && !isSelected);\n\n            return (\n              <div\n                key={item.key}\n                id={`${listboxId}-${index}`}\n                role='option'\n                aria-selected={isSelected}\n                aria-disabled={isDisabled || undefined}\n                className={cx(\n                  styles.multiSelectOption,\n                  index === activeIndex && styles.multiSelectOptionActive,\n                  isSelected && styles.multiSelectOptionSelected,\n                  isDisabled && styles.multiSelectOptionDisabled,\n                  classNames?.option,\n                )}\n                style={slotStyles?.option}\n                onMouseDown={(event) => event.preventDefault()}\n                onMouseEnter={() => setActiveIndex(index)}\n                onClick={() => toggle(item)}\n              >\n                <span\n                  className={cx(styles.multiSelectOptionCheck, classNames?.optionCheck)}\n                  style={slotStyles?.optionCheck}\n                >\n                  {isSelected && <FontAwesomeIcon icon={faCheck} />}\n                </span>\n                <span\n                  className={cx(styles.multiSelectOptionLabel, classNames?.optionLabel)}\n                  style={slotStyles?.optionLabel}\n                >\n                  {item.label}\n                </span>\n              </div>\n            );\n          })\n        )}\n      </div>\n    </div>\n  );\n\n  return (\n    <div\n      {...rest}\n      ref={rootRef}\n      className={cx(styles.multiSelect, disabled && styles.multiSelectDisabled, classNames?.root, className)}\n      style={{ ...style, ...slotStyles?.root }}\n      onMouseEnter={(event) => {\n        setIsHovered(true);\n        onMouseEnter?.(event);\n      }}\n      onMouseLeave={(event) => {\n        setIsHovered(false);\n        onMouseLeave?.(event);\n      }}\n      onFocus={(event) => {\n        setIsFocused(true);\n        onFocus?.(event);\n      }}\n      onBlur={(event) => {\n        if (event.currentTarget.contains(event.relatedTarget as Node | null)) return;\n        setIsFocused(false);\n        onBlur?.(event);\n      }}\n    >\n      <Popover\n        isOpen={isOpen}\n        onOpenChange={handleOpenChange}\n        trigger={PopoverTrigger.Click}\n        placement={PopoverPlacement.Bottom}\n        align={PopoverAlign.Start}\n        offset={4}\n        withArrow={false}\n        disabled={!isInteractive}\n        presentation={presentation}\n        content={panel}\n        className={styles.multiSelectPopover}\n        styles={{ panel: panelWidth ? { minWidth: panelWidth } : undefined }}\n      >\n        <div\n          ref={controlRef}\n          role='combobox'\n          tabIndex={disabled ? -1 : 0}\n          aria-expanded={isOpen}\n          aria-haspopup='listbox'\n          aria-controls={listboxId}\n          aria-activedescendant={isOpen && visibleItems.length > 0 ? `${listboxId}-${activeIndex}` : undefined}\n          aria-disabled={disabled || undefined}\n          aria-readonly={readOnly || undefined}\n          className={cx(styles.multiSelectControl, classNames?.control)}\n          style={slotStyles?.control}\n          onKeyDown={handleKeyDown}\n        >\n          {placeholder && selectedItems.length === 0 && (\n            <span\n              className={cx(\n                styles.multiSelectPlaceholder,\n                (!label || shouldFloatLabel) && styles.multiSelectPlaceholderShown,\n                !label && styles.multiSelectPlaceholderInstant,\n                classNames?.placeholder,\n              )}\n              style={slotStyles?.placeholder}\n            >\n              {placeholder}\n            </span>\n          )}\n\n          <div className={cx(styles.multiSelectValues, classNames?.values)} style={slotStyles?.values}>\n            {selectedItems.map((item) => (\n              <Chip\n                key={item.key}\n                text={item.label}\n                showRemoveIcon={isInteractive}\n                removeLabel={`Remove ${item.label}`}\n                onMouseDown={(event) => event.preventDefault()}\n                onRemove={() => {\n                  toggle(item);\n                  keepFocusInControl();\n                }}\n                className={cx(styles.multiSelectChip, classNames?.chip)}\n                style={slotStyles?.chip}\n              />\n            ))}\n          </div>\n\n          {clearable && isInteractive && selected.length > 0 && (\n            <button\n              type='button'\n              tabIndex={-1}\n              aria-label='Clear selection'\n              className={cx(styles.multiSelectClearButton, classNames?.clearButton)}\n              style={slotStyles?.clearButton}\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={(event) => {\n                event.stopPropagation();\n                commit([]);\n                keepFocusInControl();\n              }}\n            >\n              <FontAwesomeIcon icon={faXmark} />\n            </button>\n          )}\n\n          <FontAwesomeIcon\n            icon={faChevronDown}\n            className={cx(styles.multiSelectIcon, isOpen && styles.multiSelectIconOpen, classNames?.icon)}\n            style={slotStyles?.icon as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n          />\n\n          {label && (\n            <div\n              className={cx(\n                styles.multiSelectLabel,\n                shouldFloatLabel && styles.multiSelectLabelFloating,\n                classNames?.label,\n              )}\n              style={slotStyles?.label}\n            >\n              {label}\n            </div>\n          )}\n\n          {/* The visible border lives here rather than on the control, because the legend is what\n              cuts the notch the floating label sits in. Same construction as Input. */}\n          <fieldset\n            className={cx(\n              styles.multiSelectFieldset,\n              !label && styles.multiSelectFieldsetNoNotch,\n              (isFocused || isOpen) && styles.multiSelectFieldsetFocused,\n              hasError && styles.multiSelectFieldsetError,\n              classNames?.fieldset,\n            )}\n            style={slotStyles?.fieldset}\n          >\n            <legend\n              className={cx(\n                styles.multiSelectFieldsetLegend,\n                shouldFloatLabel && styles.multiSelectFieldsetLegendActive,\n              )}\n            >\n              <span>{label}</span>\n            </legend>\n          </fieldset>\n        </div>\n      </Popover>\n\n      <Tooltip variant='error' message={errorText} isVisible={hasError && (isFocused || isHovered)} />\n    </div>\n  );\n}\n\nexport default MultiSelect;\n"],"mappings":"krBAgBA,IAAM,GAA4B,CAAC,EAEnC,SAAS,EAAY,EAAuC,CAC1D,GAAM,CACJ,QACA,QACA,gBAAe,CAAC,EAChB,gBAAiB,CAAC,EAClB,QAAQ,GACR,oBAAmB,GACnB,cAAc,GACd,cAAa,GACb,oBAAoB,GACpB,eAAe,GAAkB,QAAQ,EAAM,GAC/C,qBAAoB,UACpB,cAAa,aACb,cACA,aAAY,GACZ,WAAW,GACX,YAAW,GACX,gBACA,gBAAgB,KAChB,eAAe,GACf,WAAU,GACV,aACA,SACA,aACA,OAAQ,EACR,gBACA,gBACA,WACA,UACA,GAAG,IACD,EAAqB,cAAe,CAAK,EAEvC,EAAU,EAAuB,IAAI,EACrC,EAAa,EAAuB,IAAI,EACxC,EAAY,EAAuB,IAAI,EACvC,EAAY,GAAM,EAElB,CAAC,GAAe,IAAoB,EAA6B,EAAY,EAC7E,CAAC,EAAQ,IAAa,EAAS,EAAK,EACpC,CAAC,EAAQ,GAAa,EAAS,EAAE,EACjC,CAAC,EAAa,GAAkB,EAAS,CAAC,EAC1C,CAAC,EAAW,GAAgB,EAAS,EAAK,EAC1C,CAAC,GAAW,GAAgB,EAAS,EAAK,EAC1C,CAAC,EAAY,IAAiB,EAAiB,EAI/C,EAAQ,EAAO,CAAa,EAC5B,EAAG,IAAe,EAAS,CAAC,EAClC,MAAgB,CACd,EAAM,QAAU,EAChB,IAAM,EAAK,EAAM,QACjB,GAAI,CAAC,EAAI,OACT,EAAG,MAAQ,EACX,EAAG,SAAS,EACZ,IAAM,MAAiB,GAAa,GAAM,EAAI,CAAC,EAE/C,OADA,EAAG,yBAAyB,CAAQ,MACvB,CACX,EAAG,uBAAuB,CAAQ,CACpC,CACF,EAAG,CAAC,EAAe,CAAK,CAAC,EAEzB,IAAM,EAAe,IAAU,IAAA,IAAa,CAAC,EACvC,EAAW,EAAgB,EAAc,MAAQ,EAAe,EAAQ,GACxE,EAAW,MAAM,QAAQ,CAAQ,EAAK,EAAkC,GAExE,EAAW,EAAgB,EAAc,SAAW,EAAc,SAAS,EAAI,CAAC,IAAW,CAAC,CAAC,EAC7F,GAAY,EAAgB,EAAc,uBAAuB,EAAI,GAAgB,GAErF,EAAgB,CAAC,GAAY,CAAC,GAC9B,EAAQ,IAAgB,IAAA,IAAa,EAAS,QAAU,EAExD,EAAmB,IAAoB,GAAU,GAAa,EAAS,OAAS,EAEhF,EAAe,IAAc,EAC7B,EAAQ,EAAO,KAAK,EACpB,EAAS,EAAe,EAAM,YAAY,EAAI,GAC9C,EAAU,EAAS,EAAM,OAAQ,GAAS,EAAK,MAAM,YAAY,CAAC,CAAC,SAAS,CAAM,CAAC,EAAI,EAEvF,EACJ,GACA,EAAM,OAAS,GACf,CAAC,GACD,CAAC,EAAM,KAAM,GAAS,EAAK,MAAM,YAAY,IAAM,GAAU,OAAO,EAAK,GAAG,CAAC,CAAC,YAAY,IAAM,CAAM,GACtG,CAAC,EAAS,KAAM,GAAQ,OAAO,CAAG,CAAC,CAAC,YAAY,IAAM,CAAM,EAExD,EAAkC,EAAY,CAAC,GAAG,EAAS,CAAE,IAAK,EAAO,MAAO,GAAY,CAAK,CAAE,CAAC,EAAI,EAIxG,GAAgB,EACnB,IACE,GAAQ,EAAM,KAAM,GAAS,EAAK,MAAQ,CAAG,IAAM,EAAoB,CAAE,MAAK,MAAO,OAAO,CAAG,CAAE,EAAI,IAAA,GACxG,CAAC,CACA,OAAQ,GAAkC,IAAS,IAAA,EAAS,EAE/D,SAAS,EAAO,EAA0B,CACpC,EAAe,EAAc,IAAI,CAAI,EAC/B,GAAc,GAAiB,CAAI,EAC7C,GAAS,CAAI,CACf,CAEA,SAAS,EAAO,EAAuB,CAChC,GAAiB,GAAK,WACvB,EAAS,SAAS,EAAK,GAAG,EAAG,EAAO,EAAS,OAAQ,GAAQ,IAAQ,EAAK,GAAG,CAAC,EACxE,GAAO,EAAO,CAAC,GAAG,EAAU,EAAK,GAAG,CAAC,EAE3C,GAAa,EAAK,MAAQ,GAAO,EAAU,EAAE,EACnD,CAOA,SAAS,IAAqB,CACxB,EAAQ,SAAS,SAAS,SAAS,aAAa,GAAG,EAAW,SAAS,MAAM,CACnF,CAEA,SAAS,GAAiB,EAAe,EACnC,IAAS,KACb,GAAU,CAAI,EACV,GACF,GAAc,EAAW,SAAS,WAAW,EAC7C,EAAe,CAAC,IAEhB,EAAU,EAAE,EACR,EAAM,UAAS,EAAM,QAAQ,QAAU,KAE/C,CAEA,MAAgB,CACT,GAAW,GAChB,EAAU,SAAS,cAAc,OAAO,CAAC,EAAE,MAAM,CACnD,EAAG,CAAC,EAAQ,CAAY,CAAC,EAEzB,SAAS,EAAc,EAA4B,CAC5C,KAEL,IAAI,CAAC,EAAQ,CACP,EAAM,MAAQ,aAAe,EAAM,MAAQ,SAAW,EAAM,MAAQ,KACtE,EAAM,eAAe,EACrB,GAAiB,EAAI,GACZ,EAAM,MAAQ,aAAe,EAAS,OAAS,GACxD,EAAO,EAAS,MAAM,EAAG,EAAE,CAAC,EAE9B,MACF,CAEA,GAAI,EAAM,MAAQ,aAAe,EAAM,MAAQ,UAAW,CAExD,GADA,EAAM,eAAe,EACjB,EAAa,SAAW,EAAG,OAC/B,IAAM,EAAO,EAAM,MAAQ,YAAc,EAAI,GAC7C,EAAgB,IAAa,EAAU,EAAO,EAAa,QAAU,EAAa,MAAM,CAC1F,MAAO,GAAI,EAAM,MAAQ,QAAU,EAAM,MAAQ,MAC/C,EAAM,eAAe,EACrB,EAAe,EAAM,MAAQ,OAAS,EAAI,EAAa,OAAS,CAAC,OAC5D,GAAI,EAAM,MAAQ,QAAS,CAChC,EAAM,eAAe,EACrB,IAAM,EAAO,EAAa,GACtB,GAAM,EAAO,CAAI,CACvB,MAAW,EAAM,MAAQ,aAAe,CAAC,GAAU,EAAS,OAAS,GACnE,EAAO,EAAS,MAAM,EAAG,EAAE,CAAC,CAf9B,CAiBF,CAEA,IAAM,GACJ,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,iBAAkB,GAAY,KAAK,EAAG,MAAO,GAAY,MAAnF,SAAA,CACG,GACC,EAAC,MAAD,CAAK,IAAK,EAAW,UAAW,EAAG,EAAO,kBAAmB,GAAY,MAAM,EAAG,MAAO,GAAY,OACnG,SAAA,EAAC,EAAD,CACE,MAAO,EACP,SAAW,GAAU,CACnB,EAAU,CAAK,EACf,EAAe,CAAC,CAClB,EACA,YAAa,GACb,UAAW,CACZ,CAAA,CACE,CAAA,EAEP,EAAC,MAAD,CACE,GAAI,EACJ,KAAK,UACL,uBAAqB,OACrB,aAAY,GAAS,IAAA,GACrB,UAAW,EAAG,EAAO,mBAAoB,GAAY,OAAO,EAC5D,MAAO,GAAY,QAElB,SAAA,EAAa,SAAW,EACvB,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,iBAAkB,GAAY,KAAK,EAAG,MAAO,GAAY,MAChF,SAAA,EACE,CAAA,EAEL,EAAa,KAAK,EAAM,IAAU,CAChC,IAAM,EAAa,EAAS,SAAS,EAAK,GAAG,EACvC,EAAa,EAAK,UAAa,GAAS,CAAC,EAE/C,OACE,EAAC,MAAD,CAEE,GAAI,GAAG,EAAU,GAAG,IACpB,KAAK,SACL,gBAAe,EACf,gBAAe,GAAc,IAAA,GAC7B,UAAW,EACT,EAAO,kBACP,IAAU,GAAe,EAAO,wBAChC,GAAc,EAAO,0BACrB,GAAc,EAAO,0BACrB,GAAY,MACd,EACA,MAAO,GAAY,OACnB,YAAc,GAAU,EAAM,eAAe,EAC7C,iBAAoB,EAAe,CAAK,EACxC,YAAe,EAAO,CAAI,EAhB5B,SAAA,CAkBE,EAAC,OAAD,CACE,UAAW,EAAG,EAAO,uBAAwB,GAAY,WAAW,EACpE,MAAO,GAAY,YAElB,SAAA,GAAc,EAAC,EAAD,CAAiB,KAAM,EAAU,CAAA,CAC5C,CAAA,EACN,EAAC,OAAD,CACE,UAAW,EAAG,EAAO,uBAAwB,GAAY,WAAW,EACpE,MAAO,GAAY,YAElB,SAAA,EAAK,KACF,CAAA,CACH,CA7BE,EAAA,EAAK,GA6BP,CAET,CAAC,CAEA,CAAA,CACF,IAGP,OACE,EAAC,MAAD,CACE,GAAI,GACJ,IAAK,EACL,UAAW,EAAG,EAAO,YAAa,GAAY,EAAO,oBAAqB,GAAY,KAAM,EAAS,EACrG,MAAO,CAAE,GAAG,GAAO,GAAG,GAAY,IAAK,EACvC,aAAe,GAAU,CACvB,EAAa,EAAI,EACjB,KAAe,CAAK,CACtB,EACA,aAAe,GAAU,CACvB,EAAa,EAAK,EAClB,KAAe,CAAK,CACtB,EACA,QAAU,GAAU,CAClB,EAAa,EAAI,EACjB,KAAU,CAAK,CACjB,EACA,OAAS,GAAU,CACb,EAAM,cAAc,SAAS,EAAM,aAA4B,IACnE,EAAa,EAAK,EAClB,KAAS,CAAK,EAChB,EArBF,SAAA,CAuBE,EAAC,GAAD,CACU,SACR,aAAc,GACd,QAAS,GAAe,MACxB,UAAW,GAAiB,OAC5B,MAAO,GAAa,MACpB,OAAQ,EACR,UAAW,GACX,SAAU,CAAC,EACG,gBACd,QAAS,GACT,UAAW,EAAO,mBAClB,OAAQ,CAAE,MAAO,EAAa,CAAE,SAAU,CAAW,EAAI,IAAA,EAAU,EAEnE,SAAA,EAAC,MAAD,CACE,IAAK,EACL,KAAK,WACL,SAAU,EAAW,GAAK,EAC1B,gBAAe,EACf,gBAAc,UACd,gBAAe,EACf,wBAAuB,GAAU,EAAa,OAAS,EAAI,GAAG,EAAU,GAAG,IAAgB,IAAA,GAC3F,gBAAe,GAAY,IAAA,GAC3B,gBAAe,IAAY,IAAA,GAC3B,UAAW,EAAG,EAAO,mBAAoB,GAAY,OAAO,EAC5D,MAAO,GAAY,QACnB,UAAW,EAZb,SAAA,CAcG,GAAe,GAAc,SAAW,GACvC,EAAC,OAAD,CACE,UAAW,EACT,EAAO,wBACN,CAAC,GAAS,IAAqB,EAAO,4BACvC,CAAC,GAAS,EAAO,8BACjB,GAAY,WACd,EACA,MAAO,GAAY,YAElB,SAAA,CACG,CAAA,EAGR,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,kBAAmB,GAAY,MAAM,EAAG,MAAO,GAAY,OAClF,SAAA,GAAc,IAAK,GAClB,EAAC,EAAD,CAEE,KAAM,EAAK,MACX,eAAgB,EAChB,YAAa,UAAU,EAAK,QAC5B,YAAc,GAAU,EAAM,eAAe,EAC7C,aAAgB,CACd,EAAO,CAAI,EACX,GAAmB,CACrB,EACA,UAAW,EAAG,EAAO,gBAAiB,GAAY,IAAI,EACtD,MAAO,GAAY,IACpB,EAXM,EAAK,GAWX,CACF,CACE,CAAA,EAEJ,IAAa,GAAiB,EAAS,OAAS,GAC/C,EAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,aAAW,kBACX,UAAW,EAAG,EAAO,uBAAwB,GAAY,WAAW,EACpE,MAAO,GAAY,YACnB,YAAc,GAAU,EAAM,eAAe,EAC7C,QAAU,GAAU,CAClB,EAAM,gBAAgB,EACtB,EAAO,CAAC,CAAC,EACT,GAAmB,CACrB,EAEA,SAAA,EAAC,EAAD,CAAiB,KAAM,EAAU,CAAA,CAC3B,CAAA,EAGV,EAAC,EAAD,CACE,KAAM,GACN,UAAW,EAAG,EAAO,gBAAiB,GAAU,EAAO,oBAAqB,GAAY,IAAI,EAC5F,MAAO,GAAY,IACpB,CAAA,EAEA,GACC,EAAC,MAAD,CACE,UAAW,EACT,EAAO,iBACP,GAAoB,EAAO,yBAC3B,GAAY,KACd,EACA,MAAO,GAAY,MAElB,SAAA,CACE,CAAA,EAKP,EAAC,WAAD,CACE,UAAW,EACT,EAAO,oBACP,CAAC,GAAS,EAAO,4BAChB,GAAa,IAAW,EAAO,2BAChC,GAAY,EAAO,yBACnB,GAAY,QACd,EACA,MAAO,GAAY,SAEnB,SAAA,EAAC,SAAD,CACE,UAAW,EACT,EAAO,0BACP,GAAoB,EAAO,+BAC7B,EAEA,SAAA,EAAC,OAAD,CAAA,SAAO,CAAY,CAAA,CACb,CAAA,CACA,CAAA,CACP,GACE,CAAA,EAET,EAAC,EAAD,CAAS,QAAQ,QAAQ,QAAS,GAAW,UAAW,IAAa,GAAa,GAAa,CAAA,CAC5F,GAET"}

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

@@ -0,0 +1,2 @@
+var e=`multiSelect_fmViY`,t=`multiSelect-label_asHZ1`,n=`multiSelect-label-floating_d4-Om`,r=`multiSelect-fieldset_Eo29l`,i=`multiSelect-fieldset-noNotch_8EL3U`,a=`multiSelect-fieldset-focused_ZC2P6`,o=`multiSelect-fieldset-error_CWzEo`,s=`multiSelect-fieldset-legend_p-6nh`,c=`multiSelect-fieldset-legend-active_M0L7g`,l=`multiSelect-popover_Qqt5v`,u=`multiSelect-control_zLb7t`,d=`multiSelect-values_k1Q8x`,f=`multiSelect-chip_xqe8Q`,p=`multiSelect-placeholder_Tjrmh`,m=`multiSelect-placeholder-shown_8v36t`,h=`multiSelectFadeIn_rOplX`,g=`multiSelect-placeholder-instant_r9-TD`,_=`multiSelect-clearButton_FKs0m`,v=`multiSelect-icon_ovLu-`,y=`multiSelect-icon-open_h8VAu`,b=`multiSelect-disabled_Hm8mv`,x=`multiSelect-panel_VX7gU`,S=`multiSelect-search_g4OHX`,C=`multiSelect-options_MGZCv`,w=`multiSelect-option_hbvPY`,T=`multiSelect-option-active_mSWFG`,E=`multiSelect-option-selected_mjPq-`,D=`multiSelect-option-disabled_qSgYz`,O=`multiSelect-optionCheck_-YKoj`,k=`multiSelect-optionLabel_CFZke`,A=`multiSelect-empty_MjABY`,j={multiSelect:e,"multiSelect-label":`multiSelect-label_asHZ1`,multiSelectLabel:t,"multiSelect-label-floating":`multiSelect-label-floating_d4-Om`,multiSelectLabelFloating:n,"multiSelect-fieldset":`multiSelect-fieldset_Eo29l`,multiSelectFieldset:r,"multiSelect-fieldset-noNotch":`multiSelect-fieldset-noNotch_8EL3U`,multiSelectFieldsetNoNotch:i,"multiSelect-fieldset-focused":`multiSelect-fieldset-focused_ZC2P6`,multiSelectFieldsetFocused:a,"multiSelect-fieldset-error":`multiSelect-fieldset-error_CWzEo`,multiSelectFieldsetError:o,"multiSelect-fieldset-legend":`multiSelect-fieldset-legend_p-6nh`,multiSelectFieldsetLegend:s,"multiSelect-fieldset-legend-active":`multiSelect-fieldset-legend-active_M0L7g`,multiSelectFieldsetLegendActive:c,"multiSelect-popover":`multiSelect-popover_Qqt5v`,multiSelectPopover:l,"multiSelect-control":`multiSelect-control_zLb7t`,multiSelectControl:u,"multiSelect-values":`multiSelect-values_k1Q8x`,multiSelectValues:d,"multiSelect-chip":`multiSelect-chip_xqe8Q`,multiSelectChip:f,"multiSelect-placeholder":`multiSelect-placeholder_Tjrmh`,multiSelectPlaceholder:p,"multiSelect-placeholder-shown":`multiSelect-placeholder-shown_8v36t`,multiSelectPlaceholderShown:m,multiSelectFadeIn:h,"multiSelect-placeholder-instant":`multiSelect-placeholder-instant_r9-TD`,multiSelectPlaceholderInstant:g,"multiSelect-clearButton":`multiSelect-clearButton_FKs0m`,multiSelectClearButton:_,"multiSelect-icon":`multiSelect-icon_ovLu-`,multiSelectIcon:v,"multiSelect-icon-open":`multiSelect-icon-open_h8VAu`,multiSelectIconOpen:y,"multiSelect-disabled":`multiSelect-disabled_Hm8mv`,multiSelectDisabled:b,"multiSelect-panel":`multiSelect-panel_VX7gU`,multiSelectPanel:x,"multiSelect-search":`multiSelect-search_g4OHX`,multiSelectSearch:S,"multiSelect-options":`multiSelect-options_MGZCv`,multiSelectOptions:C,"multiSelect-option":`multiSelect-option_hbvPY`,multiSelectOption:w,"multiSelect-option-active":`multiSelect-option-active_mSWFG`,multiSelectOptionActive:T,"multiSelect-option-selected":`multiSelect-option-selected_mjPq-`,multiSelectOptionSelected:E,"multiSelect-option-disabled":`multiSelect-option-disabled_qSgYz`,multiSelectOptionDisabled:D,"multiSelect-optionCheck":`multiSelect-optionCheck_-YKoj`,multiSelectOptionCheck:O,"multiSelect-optionLabel":`multiSelect-optionLabel_CFZke`,multiSelectOptionLabel:k,"multiSelect-empty":`multiSelect-empty_MjABY`,multiSelectEmpty:A};export{j as default,e as multiSelect,f as multiSelectChip,_ as multiSelectClearButton,u as multiSelectControl,b as multiSelectDisabled,A as multiSelectEmpty,h as multiSelectFadeIn,r as multiSelectFieldset,o as multiSelectFieldsetError,a as multiSelectFieldsetFocused,s as multiSelectFieldsetLegend,c as multiSelectFieldsetLegendActive,i as multiSelectFieldsetNoNotch,v as multiSelectIcon,y as multiSelectIconOpen,t as multiSelectLabel,n as multiSelectLabelFloating,w as multiSelectOption,T as multiSelectOptionActive,O as multiSelectOptionCheck,D as multiSelectOptionDisabled,k as multiSelectOptionLabel,E as multiSelectOptionSelected,C as multiSelectOptions,x as multiSelectPanel,p as multiSelectPlaceholder,g as multiSelectPlaceholderInstant,m as multiSelectPlaceholderShown,l as multiSelectPopover,S as multiSelectSearch,d as multiSelectValues};
+//# sourceMappingURL=multiSelect.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multiSelect.module.mjs","names":[],"sources":["../../../../package/common/multiSelect/multiSelect.module.pcss"],"sourcesContent":[".multiSelect {\n  position: relative;\n  width: 100%;\n\n  /* Input's notch geometry, so both labels float to the same height in a form row. */\n  --multi-select-notch-height: 1.75em;\n\n  &-label {\n    position: absolute;\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    transition: all 0.3s;\n\n    &-floating {\n      top: 0;\n      bottom: auto;\n      left: 14px;\n      font-size: 0.8em;\n      color: var(--input-label-floating-color, var(--text-color));\n    }\n  }\n\n  /* The field's border lives here, not on the control: the legend has to cut the notch out of it. */\n  &-fieldset {\n    position: absolute;\n    inset: calc(var(--multi-select-notch-height) / -2) 0 0;\n    width: 100%;\n    margin: 0;\n    padding: 0 0 0 8px;\n    min-width: 0;\n    box-sizing: border-box;\n    border: 1px solid var(--border-color);\n    border-radius: var(--default-border-radius);\n    font-size: 0.8em;\n    pointer-events: none;\n    user-select: none;\n    transition: border-color 0.15s;\n\n    &-noNotch {\n      /* Resetting this everywhere would leave a label-less field shorter than its neighbours.\n         Only Firefox renders the reserved space as an overlap, so scope it there, as Input does. */\n      @supports (-moz-appearance: none) {\n        inset: 0;\n      }\n    }\n\n    &-focused {\n      border-color: var(--focus-border-color, var(--primary-color));\n    }\n\n    &-error {\n      border-color: var(--error-border-color, var(--error-color));\n    }\n\n    &-legend {\n      display: block;\n      max-width: 0;\n      padding: 0;\n      white-space: nowrap;\n      transition: max-width 0.2s;\n\n      &-active {\n        max-width: 300px;\n      }\n\n      span {\n        line-height: var(--multi-select-notch-height);\n        padding: 0 5px;\n        opacity: 0;\n      }\n\n      span:empty {\n        padding: 0.000001px;\n      }\n    }\n  }\n\n  /* Popover wraps its trigger in two inline-flex divs, neither of which would fill the field. */\n  &-popover {\n    width: 100%;\n\n    > * {\n      width: 100%;\n    }\n  }\n\n  &-control {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    box-sizing: border-box;\n    width: 100%;\n\n    /* Input and Dropdown both resolve to this: a 1.25 line-height plus 14px of padding. Kept as\n       the formula rather than a flat 34px so it still matches them at another font size. */\n    min-height: var(--multi-select-min-height, calc(1.25em + 14px));\n    padding: 2px 8px;\n    border-radius: var(--default-border-radius);\n    background: var(--input-background, var(--background));\n    color: var(--text-color);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    /* An outline here would draw a second, un-notched rectangle over the fieldset's border. */\n    &:focus-visible {\n      outline: none;\n\n      .multiSelect-fieldset {\n        border-color: var(--focus-border-color, var(--primary-color));\n      }\n    }\n  }\n\n  &-values {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 4px;\n    flex: 1;\n    min-width: 0;\n  }\n\n  /* At full size a Chip is nearly as tall as the field, so one row would set the height instead\n     of fitting inside it. Shrinking the font shrinks the text and the 1em remove icon together. */\n  &-chip {\n    max-width: 100%;\n    min-width: 0;\n    font-size: 0.8em;\n\n    /* FontAwesome's `vertical-align: -0.125em` makes the inline remove icon reserve 1.6px of\n       descender space: the difference between a 34px field and a 34.4px one. */\n    svg {\n      display: block;\n    }\n  }\n\n  /* Faded in on a delay rather than swapped in: the label takes 0.3s to float clear, and showing\n     the placeholder as it starts moving puts the two on top of each other. As Input does it. */\n  &-placeholder {\n    position: absolute;\n    left: 8px;\n    right: 1.75em;\n    top: 50%;\n    transform: translateY(-50%);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    opacity: 0;\n    color: var(--input-label-resting-color, var(--text-light));\n    pointer-events: none;\n    user-select: none;\n\n    &-shown {\n      animation: 0.2s multiSelectFadeIn 0.3s forwards;\n    }\n\n    /* Nothing to wait for without a label. Must stay after `-shown` to win the specificity tie. */\n    &-instant {\n      animation-delay: 0s;\n    }\n  }\n\n  @keyframes multiSelectFadeIn {\n    from {\n      opacity: 0;\n    }\n\n    to {\n      opacity: 1;\n    }\n  }\n\n  &-clearButton {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    width: 22px;\n    height: 22px;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: transparent;\n    color: var(--text-dark);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:hover {\n      background: var(--background-accent);\n      color: var(--text-color);\n    }\n  }\n\n  &-icon {\n    flex: none;\n    color: var(--input-icon-color, var(--text-dark));\n    transition: transform 0.2s;\n\n    &-open {\n      transform: rotate(180deg);\n    }\n  }\n\n  &-disabled {\n    opacity: 0.5;\n\n    .multiSelect-control {\n      cursor: default;\n    }\n  }\n}\n\n/* Portalled, so a sibling of the field rather than a descendant, and not nestable above. */\n.multiSelect-panel {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  min-width: 180px;\n}\n\n.multiSelect-search {\n  flex: none;\n}\n\n.multiSelect-options {\n  display: flex;\n  flex-direction: column;\n  max-height: var(--multi-select-panel-height, 260px);\n  overflow-y: auto;\n}\n\n.multiSelect-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  border-radius: var(--default-border-radius);\n  color: var(--text-color);\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n\n  &-active {\n    background: var(--background-accent);\n  }\n\n  &-selected {\n    color: var(--primary-color);\n    font-weight: 600;\n  }\n\n  &-disabled {\n    opacity: 0.45;\n    cursor: default;\n    pointer-events: none;\n  }\n}\n\n.multiSelect-optionCheck {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: 1em;\n  color: var(--primary-color);\n}\n\n.multiSelect-optionLabel {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.multiSelect-empty {\n  padding: 12px 10px;\n  color: var(--text-dark);\n  text-align: center;\n}\n"],"mappings":""}

package/dist/esm/common/numberInput/numberInput.mjs

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{ButtonSize as t}from"../button/button.types.mjs";import n from"../button/button.mjs";import r from"../hooks/useCoarsePointer.mjs";import i from"../buttonGroup/buttonGroup.mjs";import ee from"../input/input.mjs";import a from"./numberInput.module.mjs";import o from"./useStepRepeat.mjs";import s from"react";import c from"classnames";import{FontAwesomeIcon as l}from"@fortawesome/react-fontawesome";import{faChevronDown as te,faChevronUp as u,faMinus as ne,faPlus as d}from"@fortawesome/free-solid-svg-icons";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{NumericFormat as re}from"react-number-format";function m({label:e,disabled:t,direction:n,onStart:r,onStop:i}){return{tabIndex:-1,disabled:t,"aria-label":e,onPointerDown:e=>{e.button!==0&&e.pointerType===`mouse`||(e.preventDefault(),r(n,e.shiftKey?10:1))},onPointerUp:i,onPointerCancel:i,onContextMenu:e=>e.preventDefault()}}function h(e){return f(`button`,{type:`button`,...m(e),className:a.arrowBtn,children:f(l,{icon:e.icon,"aria-hidden":`true`})})}function g(e){let{disabled:r,...i}=m(e);return f(n,{...i,className:a.splitBtn,size:t.Icon,disabled:r,icon:e.icon})}function _(t){let n=s.useRef(void 0),{value:l,onChange:m,formValidator:_,label:ie,error:v,className:y,style:b,allowNegative:x=!1,decimalSeparator:ae,thousandSeparator:oe,prefix:se,suffix:ce,decimalScale:S,fixedDecimalScale:C=!0,placeholder:w,sign:T,showArrows:E=!1,step:D=1,min:O,max:k,arrowsLayout:A=`auto`,increaseLabel:j=`Increase`,decreaseLabel:M=`Decrease`,readOnly:N=!1,disabled:P=!1,isRequired:le=!1,onKeyDown:F,...ue}=e(`NumberInput`,t),[,de]=s.useState(0);s.useEffect(()=>{if(n.current=_,!_)return;let e=()=>de(e=>e+1);return _.registerOnUpdateListener(e),()=>{_.removeOnUpdateListener(e)}},[_]);let fe=le||!!_?.validators.find(e=>e.validatorId===`required`),I=_==null?l:_.value,L=T!=null&&I!=null?Math.abs(Number(I)):I,R=L==null?``:String(L);function z(e){let t=e;t!==void 0&&(T===`-`&&(t=-Math.abs(t)),T===`+`&&(t=Math.abs(t))),_?.set(t??null),m?.(t)}function B(e){let t=e;return!x&&T!==`-`&&(t=Math.max(0,t)),T===`-`&&(t=Math.min(0,t)),O!==void 0&&(t=Math.max(O,t)),k!==void 0&&(t=Math.min(k,t)),t}let V=I!=null&&I!==``?Number(I):0;function H(){if(N||P||I==null||I===``)return;let e=Number(I);if(!Number.isFinite(e))return;let t=B(e);t!==e&&z(t)}function U(e){if(N||P)return!1;let t=B(V+e);return t===V?!1:(z(t),!0)}let{start:pe,stop:me}=o(e=>U(e*D));function he(e){if(e.key===`Enter`){H(),F?.(e);return}if(!G){F?.(e);return}if(e.key===`ArrowUp`){e.preventDefault(),U(e.shiftKey?D*10:D);return}if(e.key===`ArrowDown`){e.preventDefault(),U(e.shiftKey?-D*10:-D);return}F?.(e)}let W=T===`-`?`-`:T===`+`?`+`:se,ge=r(),G=E&&!N&&!P,K=A===`split`||A===`auto`&&ge,q=B(V+D)!==V,J=B(V-D)!==V,Y={onStart:pe,onStop:me},X=G&&!K?p(`div`,{className:a.arrows,children:[f(h,{label:j,icon:u,disabled:!q,direction:1,...Y}),f(h,{label:M,icon:te,disabled:!J,direction:-1,...Y})]}):null,_e=G?{role:`spinbutton`,"aria-valuenow":Number.isFinite(V)?V:void 0,"aria-valuemin":O,"aria-valuemax":k,"aria-valuetext":R||void 0}:{},Z=_?_.touched?!_.hasError():!0:!v,Q=G&&K,$=f(ee,{label:ie,className:c(a.numberInput,{[a.numberInputSplit]:Q},Q?void 0:y),style:Q?void 0:b,value:R,onChange:()=>{},formValidator:null,isRequired:fe,onBlur:()=>{H(),n.current&&(n.current.touched=!0)},isValid:Z,errorMessage:_?_.touched?_.getCurrentErrorMessage()??``:``:v??``,placeholder:w,readOnly:N,disabled:P,suffix:X,classNames:X?{suffix:a.arrowSuffix}:void 0,inputMode:S===0?`numeric`:`decimal`,customInput:f(re,{onValueChange:e=>z(e.floatValue),allowNegative:T==null?x:!1,decimalSeparator:ae,thousandSeparator:oe,decimalScale:S,fixedDecimalScale:C,prefix:W,suffix:ce,onKeyDown:he,..._e,...ue})});return Q?p(i,{className:c(a.split,{[a.splitInvalid]:!Z},y),style:b,children:[f(g,{label:M,icon:ne,disabled:!J,direction:-1,...Y}),$,f(g,{label:j,icon:d,disabled:!q,direction:1,...Y})]}):$}export{_ as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{ButtonSize as t}from"../button/button.types.mjs";import n from"../button/button.mjs";import r from"../hooks/useCoarsePointer.mjs";import i from"../buttonGroup/buttonGroup.mjs";import ee from"../input/input.mjs";import a from"./numberInput.module.mjs";import o from"./useStepRepeat.mjs";import s from"react";import c from"classnames";import{FontAwesomeIcon as l}from"@fortawesome/react-fontawesome";import{faChevronDown as te,faChevronUp as u,faMinus as ne,faPlus as d}from"@fortawesome/free-solid-svg-icons";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{NumericFormat as re}from"react-number-format";function m({label:e,disabled:t,direction:n,onStart:r,onStop:i}){return{tabIndex:-1,disabled:t,"aria-label":e,onPointerDown:e=>{(e.button===0||e.pointerType!==`mouse`)&&(e.preventDefault(),r(n,e.shiftKey?10:1))},onPointerUp:i,onPointerCancel:i,onContextMenu:e=>e.preventDefault()}}function h(e){return f(`button`,{type:`button`,...m(e),className:a.arrowBtn,children:f(l,{icon:e.icon,"aria-hidden":`true`})})}function g(e){let{disabled:r,...i}=m(e);return f(n,{...i,className:a.splitBtn,size:t.Icon,disabled:r,icon:e.icon})}function _(t){let n=s.useRef(void 0),{value:l,onChange:m,formValidator:_,label:ie,error:v,className:y,style:b,allowNegative:x=!1,decimalSeparator:ae,thousandSeparator:oe,prefix:se,suffix:ce,decimalScale:S,fixedDecimalScale:C=!0,placeholder:w,sign:T,showArrows:E=!1,step:D=1,min:O,max:k,arrowsLayout:A=`auto`,increaseLabel:j=`Increase`,decreaseLabel:M=`Decrease`,readOnly:N=!1,disabled:P=!1,isRequired:le=!1,onKeyDown:F,...ue}=e(`NumberInput`,t),[,de]=s.useState(0);s.useEffect(()=>{if(n.current=_,!_)return;let e=()=>de(e=>e+1);return _.registerOnUpdateListener(e),()=>{_.removeOnUpdateListener(e)}},[_]);let fe=le||!!_?.validators.find(e=>e.validatorId===`required`),I=_==null?l:_.value,L=T!=null&&I!=null?Math.abs(Number(I)):I,R=L==null?``:String(L);function z(e){let t=e;t!==void 0&&(T===`-`&&(t=-Math.abs(t)),T===`+`&&(t=Math.abs(t))),_?.set(t??null),m?.(t)}function B(e){let t=e;return!x&&T!==`-`&&(t=Math.max(0,t)),T===`-`&&(t=Math.min(0,t)),O!==void 0&&(t=Math.max(O,t)),k!==void 0&&(t=Math.min(k,t)),t}let V=I!=null&&I!==``?Number(I):0;function H(){if(N||P||I==null||I===``)return;let e=Number(I);if(!Number.isFinite(e))return;let t=B(e);t!==e&&z(t)}function U(e){if(N||P)return!1;let t=B(V+e);return t!==V&&(z(t),!0)}let{start:pe,stop:me}=o(e=>U(e*D));function he(e){if(e.key===`Enter`){H(),F?.(e);return}if(!G){F?.(e);return}if(e.key===`ArrowUp`){e.preventDefault(),U(e.shiftKey?D*10:D);return}if(e.key===`ArrowDown`){e.preventDefault(),U(e.shiftKey?-D*10:-D);return}F?.(e)}let W=T===`-`?`-`:T===`+`?`+`:se,ge=r(),G=E&&!N&&!P,K=A===`split`||A===`auto`&&ge,q=B(V+D)!==V,J=B(V-D)!==V,Y={onStart:pe,onStop:me},X=G&&!K?p(`div`,{className:a.arrows,children:[f(h,{label:j,icon:u,disabled:!q,direction:1,...Y}),f(h,{label:M,icon:te,disabled:!J,direction:-1,...Y})]}):null,_e=G?{role:`spinbutton`,"aria-valuenow":Number.isFinite(V)?V:void 0,"aria-valuemin":O,"aria-valuemax":k,"aria-valuetext":R||void 0}:{},Z=_?!_.touched||!_.hasError():!v,Q=G&&K,$=f(ee,{label:ie,className:c(a.numberInput,{[a.numberInputSplit]:Q},Q?void 0:y),style:Q?void 0:b,value:R,onChange:()=>{},formValidator:null,isRequired:fe,onBlur:()=>{H(),n.current&&(n.current.touched=!0)},isValid:Z,errorMessage:_?_.touched?_.getCurrentErrorMessage()??``:``:v??``,placeholder:w,readOnly:N,disabled:P,suffix:X,classNames:X?{suffix:a.arrowSuffix}:void 0,inputMode:S===0?`numeric`:`decimal`,customInput:f(re,{onValueChange:e=>z(e.floatValue),allowNegative:T==null&&x,decimalSeparator:ae,thousandSeparator:oe,decimalScale:S,fixedDecimalScale:C,prefix:W,suffix:ce,onKeyDown:he,..._e,...ue})});return Q?p(i,{className:c(a.split,{[a.splitInvalid]:!Z},y),style:b,children:[f(g,{label:M,icon:ne,disabled:!J,direction:-1,...Y}),$,f(g,{label:j,icon:d,disabled:!q,direction:1,...Y})]}):$}export{_ as default};
 //# sourceMappingURL=numberInput.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"numberInput.mjs","names":[],"sources":["../../../../package/common/numberInput/numberInput.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React from 'react';\nimport cx from 'classnames';\nimport { NumericFormat } from 'react-number-format';\nimport type { FormValidator } from 'services/formValidation';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronUp, faChevronDown, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';\n\nimport styles from './numberInput.module.pcss';\nimport Input from '../input';\nimport Button from '../button';\nimport ButtonGroup from '../buttonGroup';\nimport { ButtonSize } from '../button/button.types';\nimport { useComponentDefaults } from '../configProvider';\nimport { useCoarsePointer } from '../hooks/useCoarsePointer';\nimport { useStepRepeat } from './useStepRepeat';\nimport type { NumberInputProps } from './numberInput.types';\n\nexport type { NumberInputProps, NumberInputArrowsLayout } from './numberInput.types';\n\ninterface StepButtonProps {\n  label: string;\n  icon: typeof faPlus;\n  disabled: boolean;\n  direction: 1 | -1;\n  onStart: (direction: 1 | -1, multiplier: number) => void;\n  onStop: () => void;\n}\n\n/** Press-and-hold behaviour shared by both stepper layouts. */\nfunction stepButtonProps({ label, disabled, direction, onStart, onStop }: StepButtonProps) {\n  return {\n    // The input keeps the tab stop — it carries role=\"spinbutton\", which announces the value\n    // and the arrow-key affordance, so two more tab stops per field would be noise.\n    tabIndex: -1,\n    disabled,\n    'aria-label': label,\n    // pointerdown (not click) keeps focus in the field and responds immediately on touch.\n    // Deliberately no setPointerCapture: capturing retargets the following click to the captured\n    // element, past the node Button's ripple listens on. useStepRepeat watches the window for\n    // the release instead.\n    onPointerDown: (e: React.PointerEvent<HTMLElement>) => {\n      if (e.button !== 0 && e.pointerType === 'mouse') return;\n      e.preventDefault();\n      onStart(direction, e.shiftKey ? 10 : 1);\n    },\n    onPointerUp: onStop,\n    onPointerCancel: onStop,\n    onContextMenu: (e: React.SyntheticEvent) => e.preventDefault(),\n  };\n}\n\n/** Stacked-layout chevron: borderless, sits inside the field's border. */\nfunction ChevronStepButton(props: StepButtonProps): ReactElement {\n  return (\n    <button type=\"button\" {...stepButtonProps(props)} className={styles.arrowBtn}>\n      <FontAwesomeIcon icon={props.icon} aria-hidden=\"true\" />\n    </button>\n  );\n}\n\n/** Split-layout stepper: a standalone control, so a real Button. */\nfunction SplitStepButton(props: StepButtonProps): ReactElement {\n  const { disabled, ...handlers } = stepButtonProps(props);\n  return (\n    <Button\n      {...handlers}\n      className={styles.splitBtn}\n      size={ButtonSize.Icon}\n      disabled={disabled}\n      icon={props.icon}\n    />\n  );\n}\n\nfunction NumberInput(props: NumberInputProps): ReactElement {\n  const fvRef = React.useRef<FormValidator | null | undefined>(undefined);\n  const {\n  value,\n  onChange,\n  formValidator,\n  label,\n  error,\n  className,\n  style,\n  allowNegative = false,\n  decimalSeparator,\n  thousandSeparator,\n  prefix,\n  suffix,\n  decimalScale,\n  fixedDecimalScale = true,\n  placeholder,\n  sign,\n  showArrows = false,\n  step = 1,\n  min,\n  max,\n  arrowsLayout = 'auto',\n  increaseLabel = 'Increase',\n  decreaseLabel = 'Decrease',\n  readOnly = false,\n  disabled = false,\n  isRequired = false,\n  onKeyDown: onKeyDownProp,\n  ...rest\n  } = useComponentDefaults('NumberInput', props);\n  const [, forceUpdate] = React.useState(0);\n  React.useEffect(() => {\n    fvRef.current = formValidator;\n    if (!formValidator) return;\n    const listener = () => forceUpdate((n) => n + 1);\n    formValidator.registerOnUpdateListener(listener);\n    return () => { formValidator.removeOnUpdateListener(listener); };\n  }, [formValidator]);\n  const computedIsRequired = isRequired || !!formValidator?.validators.find(\n    (v) => (v as { validatorId?: string }).validatorId === 'required'\n  );\n  const rawValue = formValidator != null ? formValidator.value as number | string : value;\n  // When a sign is forced, display the absolute value — the prefix character carries the sign visually.\n  const displayValue = sign != null && rawValue != null ? Math.abs(Number(rawValue)) : rawValue;\n  const controlledValue = displayValue != null ? String(displayValue) : '';\n\n  function handleValueChange(floatValue: number | undefined) {\n    let out = floatValue;\n    if (out !== undefined) {\n      if (sign === '-') out = -Math.abs(out);\n      if (sign === '+') out =  Math.abs(out);\n    }\n    if (formValidator != null) formValidator.set(out ?? null);\n    onChange?.(out);\n  }\n\n  function clamp(next: number): number {\n    let out = next;\n    if (!allowNegative && sign !== '-') out = Math.max(0, out);\n    if (sign === '-') out = Math.min(0, out);\n    if (min !== undefined) out = Math.max(min, out);\n    if (max !== undefined) out = Math.min(max, out);\n    return out;\n  }\n\n  const currentNumber = rawValue != null && rawValue !== '' ? Number(rawValue) : 0;\n\n  /**\n   * Called on blur and Enter, never per keystroke: rejecting an out-of-bounds edit as it is\n   * typed swallows keystrokes on their way somewhere valid (with `max: 10`, typing `1` in front\n   * of `8` to reach `18`). An empty field is skipped so a `min` is never typed in for the user.\n   */\n  function clampToBounds() {\n    if (readOnly || disabled) return;\n    if (rawValue == null || rawValue === '') return;\n    const n = Number(rawValue);\n    if (!Number.isFinite(n)) return;\n    const next = clamp(n);\n    if (next !== n) handleValueChange(next);\n  }\n\n  /** Returns whether the value moved, which is how useStepRepeat knows to end a hold at a bound. */\n  function handleStep(delta: number): boolean {\n    if (readOnly || disabled) return false;\n    const next = clamp(currentNumber + delta);\n    if (next === currentNumber) return false;\n    handleValueChange(next);\n    return true;\n  }\n\n  const { start: startRepeat, stop: stopRepeat } = useStepRepeat((delta) => handleStep(delta * step));\n\n  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n    // Enter submits the surrounding form without ever blurring, so the blur clamp would not run.\n    // Before the stepper guard, since the bounds apply with or without steppers.\n    if (e.key === 'Enter') {\n      clampToBounds();\n      onKeyDownProp?.(e);\n      return;\n    }\n    if (!showStepper) { onKeyDownProp?.(e); return; }\n    if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      handleStep(e.shiftKey ? step * 10 : step);\n      return;\n    }\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      handleStep(e.shiftKey ? -step * 10 : -step);\n      return;\n    }\n    onKeyDownProp?.(e);\n  }\n\n  const resolvedPrefix = sign === '-' ? '-' : sign === '+' ? '+' : prefix;\n\n  const isCoarsePointer = useCoarsePointer();\n  const showStepper = showArrows && !readOnly && !disabled;\n  const isSplit = arrowsLayout === 'split' || (arrowsLayout === 'auto' && isCoarsePointer);\n\n  const canIncrease = clamp(currentNumber + step) !== currentNumber;\n  const canDecrease = clamp(currentNumber - step) !== currentNumber;\n\n  const stepperProps = { onStart: startRepeat, onStop: stopRepeat };\n\n  const stackedArrows = showStepper && !isSplit ? (\n    <div className={styles.arrows}>\n      <ChevronStepButton\n        label={increaseLabel}\n        icon={faChevronUp}\n        disabled={!canIncrease}\n        direction={1}\n        {...stepperProps}\n      />\n      <ChevronStepButton\n        label={decreaseLabel}\n        icon={faChevronDown}\n        disabled={!canDecrease}\n        direction={-1}\n        {...stepperProps}\n      />\n    </div>\n  ) : null;\n\n  // aria-* is spread onto NumericFormat, which forwards unknown props to the DOM input.\n  // Input's own cloneElement doesn't set these keys, so they survive the clone.\n  const spinButtonProps = showStepper\n    ? {\n      role: 'spinbutton',\n      'aria-valuenow': Number.isFinite(currentNumber) ? currentNumber : undefined,\n      'aria-valuemin': min,\n      'aria-valuemax': max,\n      'aria-valuetext': controlledValue || undefined,\n    }\n    : {};\n\n  // Shared with the split group, whose buttons have to mirror the field's invalid state — they\n  // form one continuous border.\n  const isValid = formValidator ? (formValidator.touched ? !formValidator.hasError() : true) : !error;\n\n  // In the split layout the ButtonGroup is the root, so the consumer's className and style\n  // belong there rather than on the Input.\n  const isSplitGroup = showStepper && isSplit;\n\n  const input = (\n    <Input\n      label={label}\n      className={cx(styles.numberInput, { [styles.numberInputSplit]: isSplitGroup }, isSplitGroup ? undefined : className)}\n      style={isSplitGroup ? undefined : style}\n      value={controlledValue}\n      onChange={() => {}}\n      formValidator={null}\n      isRequired={computedIsRequired}\n      onBlur={() => { clampToBounds(); if (fvRef.current) fvRef.current.touched = true; }}\n      isValid={isValid}\n      errorMessage={formValidator ? (formValidator.touched ? (formValidator.getCurrentErrorMessage() ?? '') : '') : (error ?? '')}\n      placeholder={placeholder}\n      readOnly={readOnly}\n      disabled={disabled}\n      suffix={stackedArrows}\n      // Input centres its suffix wrapper; this lets the chevrons claim the field's full height.\n      classNames={stackedArrows ? { suffix: styles.arrowSuffix } : undefined}\n      inputMode={decimalScale === 0 ? 'numeric' : 'decimal'}\n      customInput={\n        <NumericFormat\n          onValueChange={(vals) => handleValueChange(vals.floatValue)}\n          allowNegative={sign != null ? false : allowNegative}\n          decimalSeparator={decimalSeparator}\n          thousandSeparator={thousandSeparator}\n          decimalScale={decimalScale}\n          fixedDecimalScale={fixedDecimalScale}\n          prefix={resolvedPrefix}\n          suffix={suffix}\n          onKeyDown={handleKeyDown}\n          {...spinButtonProps}\n          {...rest}\n        />\n      }\n    />\n  );\n\n  if (!isSplitGroup) return input;\n\n  return (\n    // ButtonGroup collapses the doubled borders and flattens the inner corners, so the three\n    // read as one control.\n    <ButtonGroup className={cx(styles.split, { [styles.splitInvalid]: !isValid }, className)} style={style}>\n      <SplitStepButton\n        label={decreaseLabel}\n        icon={faMinus}\n        disabled={!canDecrease}\n        direction={-1}\n        {...stepperProps}\n      />\n      {input}\n      <SplitStepButton\n        label={increaseLabel}\n        icon={faPlus}\n        disabled={!canIncrease}\n        direction={1}\n        {...stepperProps}\n      />\n    </ButtonGroup>\n  );\n}\n\nexport default NumberInput;\n"],"mappings":"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"}
+{"version":3,"file":"numberInput.mjs","names":[],"sources":["../../../../package/common/numberInput/numberInput.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React from 'react';\nimport cx from 'classnames';\nimport { NumericFormat } from 'react-number-format';\nimport type { FormValidator } from 'services/formValidation';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronUp, faChevronDown, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';\n\nimport styles from './numberInput.module.pcss';\nimport Input from '../input';\nimport Button from '../button';\nimport ButtonGroup from '../buttonGroup';\nimport { ButtonSize } from '../button/button.types';\nimport { useComponentDefaults } from '../configProvider';\nimport { useCoarsePointer } from '../hooks/useCoarsePointer';\nimport { useStepRepeat } from './useStepRepeat';\nimport type { NumberInputProps } from './numberInput.types';\n\nexport type { NumberInputProps, NumberInputArrowsLayout } from './numberInput.types';\n\ninterface StepButtonProps {\n  label: string;\n  icon: typeof faPlus;\n  disabled: boolean;\n  direction: 1 | -1;\n  onStart: (direction: 1 | -1, multiplier: number) => void;\n  onStop: () => void;\n}\n\n/** Press-and-hold behaviour shared by both stepper layouts. */\nfunction stepButtonProps({ label, disabled, direction, onStart, onStop }: StepButtonProps) {\n  return {\n    // The input keeps the tab stop — it carries role=\"spinbutton\", which announces the value\n    // and the arrow-key affordance, so two more tab stops per field would be noise.\n    tabIndex: -1,\n    disabled,\n    'aria-label': label,\n    // pointerdown (not click) keeps focus in the field and responds immediately on touch.\n    // Deliberately no setPointerCapture: capturing retargets the following click to the captured\n    // element, past the node Button's ripple listens on. useStepRepeat watches the window for\n    // the release instead.\n    onPointerDown: (e: React.PointerEvent<HTMLElement>) => {\n      if (e.button !== 0 && e.pointerType === 'mouse') return;\n      e.preventDefault();\n      onStart(direction, e.shiftKey ? 10 : 1);\n    },\n    onPointerUp: onStop,\n    onPointerCancel: onStop,\n    onContextMenu: (e: React.SyntheticEvent) => e.preventDefault(),\n  };\n}\n\n/** Stacked-layout chevron: borderless, sits inside the field's border. */\nfunction ChevronStepButton(props: StepButtonProps): ReactElement {\n  return (\n    <button type='button' {...stepButtonProps(props)} className={styles.arrowBtn}>\n      <FontAwesomeIcon icon={props.icon} aria-hidden='true' />\n    </button>\n  );\n}\n\n/** Split-layout stepper: a standalone control, so a real Button. */\nfunction SplitStepButton(props: StepButtonProps): ReactElement {\n  const { disabled, ...handlers } = stepButtonProps(props);\n  return (\n    <Button {...handlers} className={styles.splitBtn} size={ButtonSize.Icon} disabled={disabled} icon={props.icon} />\n  );\n}\n\nfunction NumberInput(props: NumberInputProps): ReactElement {\n  const fvRef = React.useRef<FormValidator | null | undefined>(undefined);\n  const {\n    value,\n    onChange,\n    formValidator,\n    label,\n    error,\n    className,\n    style,\n    allowNegative = false,\n    decimalSeparator,\n    thousandSeparator,\n    prefix,\n    suffix,\n    decimalScale,\n    fixedDecimalScale = true,\n    placeholder,\n    sign,\n    showArrows = false,\n    step = 1,\n    min,\n    max,\n    arrowsLayout = 'auto',\n    increaseLabel = 'Increase',\n    decreaseLabel = 'Decrease',\n    readOnly = false,\n    disabled = false,\n    isRequired = false,\n    onKeyDown: onKeyDownProp,\n    ...rest\n  } = useComponentDefaults('NumberInput', props);\n  const [, forceUpdate] = React.useState(0);\n  React.useEffect(() => {\n    fvRef.current = formValidator;\n    if (!formValidator) return;\n    const listener = () => forceUpdate((n) => n + 1);\n    formValidator.registerOnUpdateListener(listener);\n    return () => {\n      formValidator.removeOnUpdateListener(listener);\n    };\n  }, [formValidator]);\n  const computedIsRequired =\n    isRequired || !!formValidator?.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required');\n  const rawValue = formValidator != null ? (formValidator.value as number | string) : value;\n  // When a sign is forced, display the absolute value — the prefix character carries the sign visually.\n  const displayValue = sign != null && rawValue != null ? Math.abs(Number(rawValue)) : rawValue;\n  const controlledValue = displayValue != null ? String(displayValue) : '';\n\n  function handleValueChange(floatValue: number | undefined) {\n    let out = floatValue;\n    if (out !== undefined) {\n      if (sign === '-') out = -Math.abs(out);\n      if (sign === '+') out = Math.abs(out);\n    }\n    if (formValidator != null) formValidator.set(out ?? null);\n    onChange?.(out);\n  }\n\n  function clamp(next: number): number {\n    let out = next;\n    if (!allowNegative && sign !== '-') out = Math.max(0, out);\n    if (sign === '-') out = Math.min(0, out);\n    if (min !== undefined) out = Math.max(min, out);\n    if (max !== undefined) out = Math.min(max, out);\n    return out;\n  }\n\n  const currentNumber = rawValue != null && rawValue !== '' ? Number(rawValue) : 0;\n\n  /**\n   * Called on blur and Enter, never per keystroke: rejecting an out-of-bounds edit as it is\n   * typed swallows keystrokes on their way somewhere valid (with `max: 10`, typing `1` in front\n   * of `8` to reach `18`). An empty field is skipped so a `min` is never typed in for the user.\n   */\n  function clampToBounds() {\n    if (readOnly || disabled) return;\n    if (rawValue == null || rawValue === '') return;\n    const n = Number(rawValue);\n    if (!Number.isFinite(n)) return;\n    const next = clamp(n);\n    if (next !== n) handleValueChange(next);\n  }\n\n  /** Returns whether the value moved, which is how useStepRepeat knows to end a hold at a bound. */\n  function handleStep(delta: number): boolean {\n    if (readOnly || disabled) return false;\n    const next = clamp(currentNumber + delta);\n    if (next === currentNumber) return false;\n    handleValueChange(next);\n    return true;\n  }\n\n  const { start: startRepeat, stop: stopRepeat } = useStepRepeat((delta) => handleStep(delta * step));\n\n  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n    // Enter submits the surrounding form without ever blurring, so the blur clamp would not run.\n    // Before the stepper guard, since the bounds apply with or without steppers.\n    if (e.key === 'Enter') {\n      clampToBounds();\n      onKeyDownProp?.(e);\n      return;\n    }\n    if (!showStepper) {\n      onKeyDownProp?.(e);\n      return;\n    }\n    if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      handleStep(e.shiftKey ? step * 10 : step);\n      return;\n    }\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      handleStep(e.shiftKey ? -step * 10 : -step);\n      return;\n    }\n    onKeyDownProp?.(e);\n  }\n\n  const resolvedPrefix = sign === '-' ? '-' : sign === '+' ? '+' : prefix;\n\n  const isCoarsePointer = useCoarsePointer();\n  const showStepper = showArrows && !readOnly && !disabled;\n  const isSplit = arrowsLayout === 'split' || (arrowsLayout === 'auto' && isCoarsePointer);\n\n  const canIncrease = clamp(currentNumber + step) !== currentNumber;\n  const canDecrease = clamp(currentNumber - step) !== currentNumber;\n\n  const stepperProps = { onStart: startRepeat, onStop: stopRepeat };\n\n  const stackedArrows =\n    showStepper && !isSplit ? (\n      <div className={styles.arrows}>\n        <ChevronStepButton\n          label={increaseLabel}\n          icon={faChevronUp}\n          disabled={!canIncrease}\n          direction={1}\n          {...stepperProps}\n        />\n        <ChevronStepButton\n          label={decreaseLabel}\n          icon={faChevronDown}\n          disabled={!canDecrease}\n          direction={-1}\n          {...stepperProps}\n        />\n      </div>\n    ) : null;\n\n  // aria-* is spread onto NumericFormat, which forwards unknown props to the DOM input.\n  // Input's own cloneElement doesn't set these keys, so they survive the clone.\n  const spinButtonProps = showStepper\n    ? {\n        role: 'spinbutton',\n        'aria-valuenow': Number.isFinite(currentNumber) ? currentNumber : undefined,\n        'aria-valuemin': min,\n        'aria-valuemax': max,\n        'aria-valuetext': controlledValue || undefined,\n      }\n    : {};\n\n  // Shared with the split group, whose buttons have to mirror the field's invalid state — they\n  // form one continuous border.\n  const isValid = formValidator ? (formValidator.touched ? !formValidator.hasError() : true) : !error;\n\n  // In the split layout the ButtonGroup is the root, so the consumer's className and style\n  // belong there rather than on the Input.\n  const isSplitGroup = showStepper && isSplit;\n\n  const input = (\n    <Input\n      label={label}\n      className={cx(\n        styles.numberInput,\n        { [styles.numberInputSplit]: isSplitGroup },\n        isSplitGroup ? undefined : className,\n      )}\n      style={isSplitGroup ? undefined : style}\n      value={controlledValue}\n      onChange={() => {}}\n      formValidator={null}\n      isRequired={computedIsRequired}\n      onBlur={() => {\n        clampToBounds();\n        if (fvRef.current) fvRef.current.touched = true;\n      }}\n      isValid={isValid}\n      errorMessage={\n        formValidator ? (formValidator.touched ? (formValidator.getCurrentErrorMessage() ?? '') : '') : (error ?? '')\n      }\n      placeholder={placeholder}\n      readOnly={readOnly}\n      disabled={disabled}\n      suffix={stackedArrows}\n      // Input centres its suffix wrapper; this lets the chevrons claim the field's full height.\n      classNames={stackedArrows ? { suffix: styles.arrowSuffix } : undefined}\n      inputMode={decimalScale === 0 ? 'numeric' : 'decimal'}\n      customInput={\n        <NumericFormat\n          onValueChange={(vals) => handleValueChange(vals.floatValue)}\n          allowNegative={sign != null ? false : allowNegative}\n          decimalSeparator={decimalSeparator}\n          thousandSeparator={thousandSeparator}\n          decimalScale={decimalScale}\n          fixedDecimalScale={fixedDecimalScale}\n          prefix={resolvedPrefix}\n          suffix={suffix}\n          onKeyDown={handleKeyDown}\n          {...spinButtonProps}\n          {...rest}\n        />\n      }\n    />\n  );\n\n  if (!isSplitGroup) return input;\n\n  return (\n    // ButtonGroup collapses the doubled borders and flattens the inner corners, so the three\n    // read as one control.\n    <ButtonGroup className={cx(styles.split, { [styles.splitInvalid]: !isValid }, className)} style={style}>\n      <SplitStepButton label={decreaseLabel} icon={faMinus} disabled={!canDecrease} direction={-1} {...stepperProps} />\n      {input}\n      <SplitStepButton label={increaseLabel} icon={faPlus} disabled={!canIncrease} direction={1} {...stepperProps} />\n    </ButtonGroup>\n  );\n}\n\nexport default NumberInput;\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e={"numberInput-split":`numberInput-split_1kFLr`,numberInputSplit:`numberInput-split_1kFLr`,arrowSuffix:`arrowSuffix_QECPG`,arrows:`arrows_yjRlc`,arrowBtn:`arrowBtn_DbJoa`,split:`split_FYvfQ`,splitBtn:`splitBtn_MquuB`,"split-invalid":`split-invalid_F94dA`,splitInvalid:`split-invalid_F94dA`};export{e as default};
+var e=`numberInput-split_1kFLr`,t=`arrowSuffix_QECPG`,n=`arrows_yjRlc`,r=`arrowBtn_DbJoa`,i=`split_FYvfQ`,a=`splitBtn_MquuB`,o=`split-invalid_F94dA`,s={"numberInput-split":`numberInput-split_1kFLr`,numberInputSplit:e,arrowSuffix:t,arrows:n,arrowBtn:r,split:i,splitBtn:a,"split-invalid":`split-invalid_F94dA`,splitInvalid:o};export{r as arrowBtn,t as arrowSuffix,n as arrows,s as default,e as numberInputSplit,i as split,a as splitBtn,o as splitInvalid};
 //# sourceMappingURL=numberInput.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"numberInput.module.mjs","names":[],"sources":["../../../../package/common/numberInput/numberInput.module.pcss"],"sourcesContent":[".numberInput {\n  /* Only set when the split layout wraps this input in a flex row. */\n  &-split {\n    flex: 1;\n    min-width: 0;\n  }\n}\n\n/* ── Stacked layout: chevrons inside the field's right edge (mouse-oriented) ───────── */\n\n/* Input's `suffix` slot: stretch to the field so the chevrons get its full height. */\n.arrowSuffix {\n  align-self: stretch;\n  display: flex;\n  padding-right: 0;\n}\n\n.arrows {\n  display: flex;\n  flex-direction: column;\n  align-self: stretch;\n  border-left: 1px solid var(--border-color);\n  /* Sitting flush against the field's edge, the chevrons' background would square off its\n     rounded corner, so it is clipped. Read from --group-radius-* like Input's own border, so it\n     still flattens inside a ButtonGroup. */\n  overflow: hidden;\n  border-top-right-radius: var(--group-radius-tr, var(--default-border-radius));\n  border-bottom-right-radius: var(--group-radius-br, var(--default-border-radius));\n}\n\n.arrowBtn {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0 0.5em;\n  /* No min-height: the two halves divide the field's own height, so a stepper never makes a\n     NumberInput taller than a plain Input. In em, so it tracks the field's text size. */\n  min-width: 1.75em;\n  font-size: 0.75em;\n  line-height: 1;\n  color: var(--text-dark);\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  /* So a long press reads as a hold, not a text gesture. */\n  touch-action: manipulation;\n  user-select: none;\n  -webkit-user-select: none;\n  -webkit-touch-callout: none;\n  transition: color 0.15s, opacity 0.15s;\n\n  &:disabled {\n    cursor: default;\n    opacity: 0.35;\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--focus-border-color, var(--primary-color));\n    outline-offset: -2px;\n  }\n\n  /* (hover: hover) only — on touch a :hover state latches after a tap until you tap elsewhere.\n\n     Colour-only, unlike the --background-accent-light hover surface used elsewhere in the\n     library: this button sits flush against .arrows' 1px --border-color divider, and in dark\n     palettes those two tokens are close enough in luminance that painting the surface right up\n     to the line eats most of the divider's already-low contrast, under the pointer. Tuning the\n     hover colour per theme would not hold — the collision is between three tokens (divider,\n     hover surface, field background), so any new theme can reintroduce it. The chevron turning\n     --primary-color is affordance enough on a target this small. */\n  @media (hover: hover) {\n    &:hover:not(:disabled) {\n      color: var(--primary-color);\n    }\n  }\n\n  &:active:not(:disabled) {\n    color: var(--primary-color);\n  }\n}\n\n/* ── Split layout: full-height − / + flanking the field (touch-oriented) ───────────── */\n\n/* ButtonGroup is inline-flex; a form field fills its row instead, with the Input taking the\n   slack (see .numberInput-split). The class is repeated to beat `.buttonGroup`'s own `display`\n   without depending on which CSS module the bundler emits first. */\n.split.split {\n  display: flex;\n  width: 100%;\n}\n\n.splitBtn {\n  /* Set through Button's own theme hooks: custom properties cascade, so no specificity fight.\n     Same surface and border as the field, so the three read as one control.\n\n     Resting state only, deliberately — Button has no :hover or :active anywhere, and press\n     feedback across the library is the Ripple. */\n  --button-default-background: var(--input-background);\n  --button-default-color: var(--text-dark);\n  --button-default-border: 1px solid var(--border-color);\n\n  flex: 0 0 auto;\n  /* No fixed height — ButtonGroup stretches these to the field.\n\n     The width repeats Input's own height formula (`line-height: 1.25` plus the 8px/6px padding\n     of `.input-field-default`) to come out square at any text size, and must follow it if that\n     padding changes. `aspect-ratio: 1` cannot do this: a flex item's main size is resolved from\n     its content before the stretched cross size exists. */\n  align-self: stretch;\n  width: calc(1.25em + 14px);\n  touch-action: manipulation;\n  user-select: none;\n  -webkit-user-select: none;\n  -webkit-touch-callout: none;\n  transition: opacity 0.15s;\n\n  &:disabled {\n    opacity: 0.35;\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--focus-border-color, var(--primary-color));\n    outline-offset: 2px;\n  }\n}\n\n/* One continuous border, so the buttons follow the field's focus and error colours — left grey,\n   the group reads as a box inside a box. */\n.split:focus-within .splitBtn {\n  --button-default-border: 1px solid var(--focus-border-color, var(--primary-color));\n}\n\n.split-invalid .splitBtn {\n  --button-default-border: 1px solid var(--error-border-color);\n}\n"],"mappings":""}
+{"version":3,"file":"numberInput.module.mjs","names":[],"sources":["../../../../package/common/numberInput/numberInput.module.pcss"],"sourcesContent":[".numberInput {\n  /* Only set when the split layout wraps this input in a flex row. */\n  &-split {\n    flex: 1;\n    min-width: 0;\n  }\n}\n\n/* ── Stacked layout: chevrons inside the field's right edge (mouse-oriented) ───────── */\n\n/* Input's `suffix` slot: stretch to the field so the chevrons get its full height. */\n.arrowSuffix {\n  align-self: stretch;\n  display: flex;\n  padding-right: 0;\n}\n\n.arrows {\n  display: flex;\n  flex-direction: column;\n  align-self: stretch;\n  border-left: 1px solid var(--border-color);\n\n  /* Sitting flush against the field's edge, the chevrons' background would square off its\n     rounded corner, so it is clipped. Read from --group-radius-* like Input's own border, so it\n     still flattens inside a ButtonGroup. */\n  overflow: hidden;\n  border-top-right-radius: var(--group-radius-tr, var(--default-border-radius));\n  border-bottom-right-radius: var(--group-radius-br, var(--default-border-radius));\n}\n\n.arrowBtn {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0 0.5em;\n\n  /* No min-height: the two halves divide the field's own height, so a stepper never makes a\n     NumberInput taller than a plain Input. In em, so it tracks the field's text size. */\n  min-width: 1.75em;\n  font-size: 0.75em;\n  line-height: 1;\n  color: var(--text-dark);\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n\n  /* So a long press reads as a hold, not a text gesture. */\n  touch-action: manipulation;\n  user-select: none;\n  -webkit-user-select: none;\n  -webkit-touch-callout: none;\n  transition:\n    color 0.15s,\n    opacity 0.15s;\n\n  &:disabled {\n    cursor: default;\n    opacity: 0.35;\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--focus-border-color, var(--primary-color));\n    outline-offset: -2px;\n  }\n\n  /* (hover: hover) only — on touch a :hover state latches after a tap until you tap elsewhere.\n\n     Colour-only, unlike the --background-accent-light hover surface used elsewhere in the\n     library: this button sits flush against .arrows' 1px --border-color divider, and in dark\n     palettes those two tokens are close enough in luminance that painting the surface right up\n     to the line eats most of the divider's already-low contrast, under the pointer. Tuning the\n     hover colour per theme would not hold — the collision is between three tokens (divider,\n     hover surface, field background), so any new theme can reintroduce it. The chevron turning\n     --primary-color is affordance enough on a target this small. */\n  @media (hover: hover) {\n    &:hover:not(:disabled) {\n      color: var(--primary-color);\n    }\n  }\n\n  &:active:not(:disabled) {\n    color: var(--primary-color);\n  }\n}\n\n/* ── Split layout: full-height − / + flanking the field (touch-oriented) ───────────── */\n\n/* ButtonGroup is inline-flex; a form field fills its row instead, with the Input taking the\n   slack (see .numberInput-split). The class is repeated to beat `.buttonGroup`'s own `display`\n   without depending on which CSS module the bundler emits first. */\n.split.split {\n  display: flex;\n  width: 100%;\n}\n\n.splitBtn {\n  /* Set through Button's own theme hooks: custom properties cascade, so no specificity fight.\n     Same surface and border as the field, so the three read as one control.\n\n     Resting state only, deliberately — Button has no :hover or :active anywhere, and press\n     feedback across the library is the Ripple. */\n  --button-default-background: var(--input-background);\n  --button-default-color: var(--text-dark);\n  --button-default-border: 1px solid var(--border-color);\n\n  flex: 0 0 auto;\n\n  /* No fixed height — ButtonGroup stretches these to the field.\n\n     The width repeats Input's own height formula (`line-height: 1.25` plus the 8px/6px padding\n     of `.input-field-default`) to come out square at any text size, and must follow it if that\n     padding changes. `aspect-ratio: 1` cannot do this: a flex item's main size is resolved from\n     its content before the stretched cross size exists. */\n  align-self: stretch;\n  width: calc(1.25em + 14px);\n  touch-action: manipulation;\n  user-select: none;\n  -webkit-user-select: none;\n  -webkit-touch-callout: none;\n  transition: opacity 0.15s;\n\n  &:disabled {\n    opacity: 0.35;\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--focus-border-color, var(--primary-color));\n    outline-offset: 2px;\n  }\n}\n\n/* One continuous border, so the buttons follow the field's focus and error colours — left grey,\n   the group reads as a box inside a box. */\n.split:focus-within .splitBtn {\n  --button-default-border: 1px solid var(--focus-border-color, var(--primary-color));\n}\n\n.split-invalid .splitBtn {\n  --button-default-border: 1px solid var(--error-border-color);\n}\n"],"mappings":""}

package/dist/esm/common/numberInput/useStepRepeat.mjs

@@ -1,2 +1,2 @@
-import{useCallback as e,useEffect as t,useRef as n}from"react";var r=400,i=120,a=50,o=1e3;function s(s){let c=n(null),l=n(null),u=n(s);u.current=s;let d=n(null),f=e(()=>{if(c.current!==null&&(clearTimeout(c.current),c.current=null),l.current!==null&&(clearInterval(l.current),l.current=null),typeof window>`u`)return;let{onEndEvent:e}=d.current;window.removeEventListener(`pointerup`,e),window.removeEventListener(`pointercancel`,e),window.removeEventListener(`pointermove`,e),window.removeEventListener(`blur`,e),document.removeEventListener(`visibilitychange`,e)},[]);d.current={stop:f,onEndEvent:e=>{e.type===`pointermove`&&e.buttons!==0||e.type===`visibilitychange`&&!document.hidden||d.current.stop()}};let p=e((e,t)=>{f();let{onEndEvent:n}=d.current;window.addEventListener(`pointerup`,n),window.addEventListener(`pointercancel`,n),window.addEventListener(`pointermove`,n),window.addEventListener(`blur`,n),document.addEventListener(`visibilitychange`,n);let s=()=>{u.current(e*t)||f()};s(),c.current=setTimeout(()=>{c.current=null;let e=Date.now(),t=!1,n=()=>{s(),l.current!==null&&!t&&Date.now()-e>=o&&(t=!0,l.current!==null&&clearInterval(l.current),l.current=setInterval(n,a))};l.current=setInterval(n,i)},r)},[f]);return t(()=>f,[f]),{start:p,stop:f}}export{s as default};
+import{useCallback as e,useEffect as t,useRef as n}from"react";var r=400,i=120,a=50,o=1e3;function s(s){let c=n(null),l=n(null),u=n(s);u.current=s;let d=n(null),f=e(()=>{if(c.current!==null&&(clearTimeout(c.current),c.current=null),l.current!==null&&(clearInterval(l.current),l.current=null),typeof window>`u`)return;let{onEndEvent:e}=d.current;window.removeEventListener(`pointerup`,e),window.removeEventListener(`pointercancel`,e),window.removeEventListener(`pointermove`,e),window.removeEventListener(`blur`,e),document.removeEventListener(`visibilitychange`,e)},[]);d.current={stop:f,onEndEvent:e=>{(e.type!==`pointermove`||e.buttons===0)&&(e.type!==`visibilitychange`||document.hidden)&&d.current.stop()}};let p=e((e,t)=>{f();let{onEndEvent:n}=d.current;window.addEventListener(`pointerup`,n),window.addEventListener(`pointercancel`,n),window.addEventListener(`pointermove`,n),window.addEventListener(`blur`,n),document.addEventListener(`visibilitychange`,n);let s=()=>{u.current(e*t)||f()};s(),c.current=setTimeout(()=>{c.current=null;let e=Date.now(),t=!1,n=()=>{s(),l.current!==null&&!t&&Date.now()-e>=o&&(t=!0,l.current!==null&&clearInterval(l.current),l.current=setInterval(n,a))};l.current=setInterval(n,i)},r)},[f]);return t(()=>f,[f]),{start:p,stop:f}}export{s as default,s as useStepRepeat};
 //# sourceMappingURL=useStepRepeat.mjs.map

package/dist/esm/common/numberInput/useStepRepeat.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useStepRepeat.mjs","names":[],"sources":["../../../../package/common/numberInput/useStepRepeat.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\n/** Time a button must be held before the value starts repeating. */\nconst INITIAL_DELAY_MS = 400;\n/** Interval between repeats right after the hold kicks in. */\nconst SLOW_INTERVAL_MS = 120;\n/** Interval the repeat accelerates to once the hold has been going a while. */\nconst FAST_INTERVAL_MS = 50;\n/** How long the slow phase lasts before switching to `FAST_INTERVAL_MS`. */\nconst ACCELERATE_AFTER_MS = 1000;\n\nexport interface UseStepRepeatResult {\n  /** Fires one step immediately, then starts the hold-to-repeat timer. */\n  start: (direction: 1 | -1, multiplier: number) => void;\n  /** Cancels a running repeat. Safe to call when nothing is running. */\n  stop: () => void;\n}\n\n/**\n * Hold-to-repeat for the stepper buttons: one step on press, then an accelerating repeat.\n *\n * The release is watched on `window` rather than by capturing the pointer, which would retarget\n * the following click past the node Button's ripple listens on. Capture would have guaranteed a\n * `pointerup`, so the extra listeners cover the ways a press can end without one.\n *\n * `onStep` returns whether anything changed; `false` ends the repeat, so a hold at a bound stops.\n */\nexport function useStepRepeat(onStep: (delta: number) => boolean): UseStepRepeatResult {\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);\n  // Read at repeat time, so a repeat always steps from the latest value.\n  const onStepRef = useRef(onStep);\n  onStepRef.current = onStep;\n\n  // One stable reference to attach and detach with; `stop` and `onEndEvent` also refer to each\n  // other, so both go through the ref.\n  const handlersRef = useRef<{ stop: () => void; onEndEvent: (e: Event) => void }>(null!);\n\n  const stop = useCallback(() => {\n    if (timeoutRef.current !== null) { clearTimeout(timeoutRef.current); timeoutRef.current = null; }\n    if (intervalRef.current !== null) { clearInterval(intervalRef.current); intervalRef.current = null; }\n    if (typeof window === 'undefined') return;\n    const { onEndEvent } = handlersRef.current;\n    window.removeEventListener('pointerup', onEndEvent);\n    window.removeEventListener('pointercancel', onEndEvent);\n    window.removeEventListener('pointermove', onEndEvent);\n    window.removeEventListener('blur', onEndEvent);\n    document.removeEventListener('visibilitychange', onEndEvent);\n  }, []);\n\n  handlersRef.current = {\n    stop,\n    onEndEvent: (e: Event) => {\n      // A move ends the hold only if nothing is pressed — how a mouse released outside the\n      // window reports itself on re-entry.\n      if (e.type === 'pointermove' && (e as PointerEvent).buttons !== 0) return;\n      if (e.type === 'visibilitychange' && !document.hidden) return;\n      handlersRef.current.stop();\n    },\n  };\n\n  const start = useCallback((direction: 1 | -1, multiplier: number) => {\n    stop();\n    const { onEndEvent } = handlersRef.current;\n    window.addEventListener('pointerup', onEndEvent);\n    window.addEventListener('pointercancel', onEndEvent);\n    window.addEventListener('pointermove', onEndEvent);\n    window.addEventListener('blur', onEndEvent);\n    document.addEventListener('visibilitychange', onEndEvent);\n\n    const fire = () => { if (!onStepRef.current(direction * multiplier)) stop(); };\n    fire();\n\n    timeoutRef.current = setTimeout(() => {\n      timeoutRef.current = null;\n      const startedAt = Date.now();\n      let isFast = false;\n      const tick = () => {\n        fire();\n        if (intervalRef.current === null) return;\n        if (!isFast && Date.now() - startedAt >= ACCELERATE_AFTER_MS) {\n          isFast = true;\n          if (intervalRef.current !== null) clearInterval(intervalRef.current);\n          intervalRef.current = setInterval(tick, FAST_INTERVAL_MS);\n        }\n      };\n      intervalRef.current = setInterval(tick, SLOW_INTERVAL_MS);\n    }, INITIAL_DELAY_MS);\n  }, [stop]);\n\n  useEffect(() => stop, [stop]);\n\n  return { start, stop };\n}\n\nexport default useStepRepeat;\n"],"mappings":"+DAGA,IAAM,EAAmB,IAEnB,EAAmB,IAEnB,EAAmB,GAEnB,EAAsB,IAkB5B,SAAgB,EAAc,EAAyD,CACrF,IAAM,EAAa,EAA6C,IAAI,EAC9D,EAAc,EAA8C,IAAI,EAEhE,EAAY,EAAO,CAAM,EAC/B,EAAU,QAAU,EAIpB,IAAM,EAAc,EAA6D,IAAK,EAEhF,EAAO,MAAkB,CAG7B,GAFI,EAAW,UAAY,OAAQ,aAAa,EAAW,OAAO,EAAG,EAAW,QAAU,MACtF,EAAY,UAAY,OAAQ,cAAc,EAAY,OAAO,EAAG,EAAY,QAAU,MAC1F,OAAO,OAAW,IAAa,OACnC,GAAM,CAAE,cAAe,EAAY,QACnC,OAAO,oBAAoB,YAAa,CAAU,EAClD,OAAO,oBAAoB,gBAAiB,CAAU,EACtD,OAAO,oBAAoB,cAAe,CAAU,EACpD,OAAO,oBAAoB,OAAQ,CAAU,EAC7C,SAAS,oBAAoB,mBAAoB,CAAU,CAC7D,EAAG,CAAC,CAAC,EAEL,EAAY,QAAU,CACpB,OACA,WAAa,GAAa,CAGpB,EAAE,OAAS,eAAkB,EAAmB,UAAY,GAC5D,EAAE,OAAS,oBAAsB,CAAC,SAAS,QAC/C,EAAY,QAAQ,KAAK,CAC3B,CACF,EAEA,IAAM,EAAQ,GAAa,EAAmB,IAAuB,CACnE,EAAK,EACL,GAAM,CAAE,cAAe,EAAY,QACnC,OAAO,iBAAiB,YAAa,CAAU,EAC/C,OAAO,iBAAiB,gBAAiB,CAAU,EACnD,OAAO,iBAAiB,cAAe,CAAU,EACjD,OAAO,iBAAiB,OAAQ,CAAU,EAC1C,SAAS,iBAAiB,mBAAoB,CAAU,EAExD,IAAM,MAAa,CAAO,EAAU,QAAQ,EAAY,CAAU,GAAG,EAAK,CAAG,EAC7E,EAAK,EAEL,EAAW,QAAU,eAAiB,CACpC,EAAW,QAAU,KACrB,IAAM,EAAY,KAAK,IAAI,EACvB,EAAS,GACP,MAAa,CACjB,EAAK,EACD,EAAY,UAAY,MACxB,CAAC,GAAU,KAAK,IAAI,EAAI,GAAa,IACvC,EAAS,GACL,EAAY,UAAY,MAAM,cAAc,EAAY,OAAO,EACnE,EAAY,QAAU,YAAY,EAAM,CAAgB,EAE5D,EACA,EAAY,QAAU,YAAY,EAAM,CAAgB,CAC1D,EAAG,CAAgB,CACrB,EAAG,CAAC,CAAI,CAAC,EAIT,OAFA,MAAgB,EAAM,CAAC,CAAI,CAAC,EAErB,CAAE,QAAO,MAAK,CACvB"}
+{"version":3,"file":"useStepRepeat.mjs","names":[],"sources":["../../../../package/common/numberInput/useStepRepeat.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\n/** Time a button must be held before the value starts repeating. */\nconst INITIAL_DELAY_MS = 400;\n/** Interval between repeats right after the hold kicks in. */\nconst SLOW_INTERVAL_MS = 120;\n/** Interval the repeat accelerates to once the hold has been going a while. */\nconst FAST_INTERVAL_MS = 50;\n/** How long the slow phase lasts before switching to `FAST_INTERVAL_MS`. */\nconst ACCELERATE_AFTER_MS = 1000;\n\nexport interface UseStepRepeatResult {\n  /** Fires one step immediately, then starts the hold-to-repeat timer. */\n  start: (direction: 1 | -1, multiplier: number) => void;\n  /** Cancels a running repeat. Safe to call when nothing is running. */\n  stop: () => void;\n}\n\n/**\n * Hold-to-repeat for the stepper buttons: one step on press, then an accelerating repeat.\n *\n * The release is watched on `window` rather than by capturing the pointer, which would retarget\n * the following click past the node Button's ripple listens on. Capture would have guaranteed a\n * `pointerup`, so the extra listeners cover the ways a press can end without one.\n *\n * `onStep` returns whether anything changed; `false` ends the repeat, so a hold at a bound stops.\n */\nexport function useStepRepeat(onStep: (delta: number) => boolean): UseStepRepeatResult {\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);\n  // Read at repeat time, so a repeat always steps from the latest value.\n  const onStepRef = useRef(onStep);\n  onStepRef.current = onStep;\n\n  // One stable reference to attach and detach with; `stop` and `onEndEvent` also refer to each\n  // other, so both go through the ref.\n  const handlersRef = useRef<{ stop: () => void; onEndEvent: (e: Event) => void }>(null!);\n\n  const stop = useCallback(() => {\n    if (timeoutRef.current !== null) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n    if (intervalRef.current !== null) {\n      clearInterval(intervalRef.current);\n      intervalRef.current = null;\n    }\n    if (typeof window === 'undefined') return;\n    const { onEndEvent } = handlersRef.current;\n    window.removeEventListener('pointerup', onEndEvent);\n    window.removeEventListener('pointercancel', onEndEvent);\n    window.removeEventListener('pointermove', onEndEvent);\n    window.removeEventListener('blur', onEndEvent);\n    document.removeEventListener('visibilitychange', onEndEvent);\n  }, []);\n\n  handlersRef.current = {\n    stop,\n    onEndEvent: (e: Event) => {\n      // A move ends the hold only if nothing is pressed — how a mouse released outside the\n      // window reports itself on re-entry.\n      if (e.type === 'pointermove' && (e as PointerEvent).buttons !== 0) return;\n      if (e.type === 'visibilitychange' && !document.hidden) return;\n      handlersRef.current.stop();\n    },\n  };\n\n  const start = useCallback(\n    (direction: 1 | -1, multiplier: number) => {\n      stop();\n      const { onEndEvent } = handlersRef.current;\n      window.addEventListener('pointerup', onEndEvent);\n      window.addEventListener('pointercancel', onEndEvent);\n      window.addEventListener('pointermove', onEndEvent);\n      window.addEventListener('blur', onEndEvent);\n      document.addEventListener('visibilitychange', onEndEvent);\n\n      const fire = () => {\n        if (!onStepRef.current(direction * multiplier)) stop();\n      };\n      fire();\n\n      timeoutRef.current = setTimeout(() => {\n        timeoutRef.current = null;\n        const startedAt = Date.now();\n        let isFast = false;\n        const tick = () => {\n          fire();\n          if (intervalRef.current === null) return;\n          if (!isFast && Date.now() - startedAt >= ACCELERATE_AFTER_MS) {\n            isFast = true;\n            if (intervalRef.current !== null) clearInterval(intervalRef.current);\n            intervalRef.current = setInterval(tick, FAST_INTERVAL_MS);\n          }\n        };\n        intervalRef.current = setInterval(tick, SLOW_INTERVAL_MS);\n      }, INITIAL_DELAY_MS);\n    },\n    [stop],\n  );\n\n  useEffect(() => stop, [stop]);\n\n  return { start, stop };\n}\n\nexport default useStepRepeat;\n"],"mappings":"+DAGA,IAAM,EAAmB,IAEnB,EAAmB,IAEnB,EAAmB,GAEnB,EAAsB,IAkB5B,SAAgB,EAAc,EAAyD,CACrF,IAAM,EAAa,EAA6C,IAAI,EAC9D,EAAc,EAA8C,IAAI,EAEhE,EAAY,EAAO,CAAM,EAC/B,EAAU,QAAU,EAIpB,IAAM,EAAc,EAA6D,IAAK,EAEhF,EAAO,MAAkB,CAS7B,GARI,EAAW,UAAY,OACzB,aAAa,EAAW,OAAO,EAC/B,EAAW,QAAU,MAEnB,EAAY,UAAY,OAC1B,cAAc,EAAY,OAAO,EACjC,EAAY,QAAU,MAEpB,OAAO,OAAW,IAAa,OACnC,GAAM,CAAE,cAAe,EAAY,QACnC,OAAO,oBAAoB,YAAa,CAAU,EAClD,OAAO,oBAAoB,gBAAiB,CAAU,EACtD,OAAO,oBAAoB,cAAe,CAAU,EACpD,OAAO,oBAAoB,OAAQ,CAAU,EAC7C,SAAS,oBAAoB,mBAAoB,CAAU,CAC7D,EAAG,CAAC,CAAC,EAEL,EAAY,QAAU,CACpB,OACA,WAAa,GAAa,EAGpB,EAAE,OAAS,eAAkB,EAAmB,UAAY,KAC5D,EAAE,OAAS,oBAAuB,SAAS,SAC/C,EAAY,QAAQ,KAAK,CAC3B,CACF,EAEA,IAAM,EAAQ,GACX,EAAmB,IAAuB,CACzC,EAAK,EACL,GAAM,CAAE,cAAe,EAAY,QACnC,OAAO,iBAAiB,YAAa,CAAU,EAC/C,OAAO,iBAAiB,gBAAiB,CAAU,EACnD,OAAO,iBAAiB,cAAe,CAAU,EACjD,OAAO,iBAAiB,OAAQ,CAAU,EAC1C,SAAS,iBAAiB,mBAAoB,CAAU,EAExD,IAAM,MAAa,CACZ,EAAU,QAAQ,EAAY,CAAU,GAAG,EAAK,CACvD,EACA,EAAK,EAEL,EAAW,QAAU,eAAiB,CACpC,EAAW,QAAU,KACrB,IAAM,EAAY,KAAK,IAAI,EACvB,EAAS,GACP,MAAa,CACjB,EAAK,EACD,EAAY,UAAY,MACxB,CAAC,GAAU,KAAK,IAAI,EAAI,GAAa,IACvC,EAAS,GACL,EAAY,UAAY,MAAM,cAAc,EAAY,OAAO,EACnE,EAAY,QAAU,YAAY,EAAM,CAAgB,EAE5D,EACA,EAAY,QAAU,YAAY,EAAM,CAAgB,CAC1D,EAAG,CAAgB,CACrB,EACA,CAAC,CAAI,CACP,EAIA,OAFA,MAAgB,EAAM,CAAC,CAAI,CAAC,EAErB,CAAE,QAAO,MAAK,CACvB"}

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{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};
+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)}}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 { 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"}
+{"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\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) => {\n              itemRefs.current[index] = el;\n            }}\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(styles.optionPickerOption, checked && styles.optionPickerOptionActive, classNames?.option)}\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":"kRAQA,SAAS,EAAa,EAAwC,CAC5D,GAAM,CACJ,YAAY,IAAA,GACZ,QACA,aACA,OAAQ,EACR,UACA,WACA,QACA,GAAG,GACD,EAAqB,eAAgB,CAAK,EAExC,EAAoB,EAAQ,UAAW,GAAW,EAAO,MAAQ,CAAK,EAAI,IAAO,EAAQ,OAEzF,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,EAAK,EAAE,MAAM,EAC9B,EAAS,EAAQ,EAAK,CAAC,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,CAI3B,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,EAJzC,SAAA,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,CACX,EAAS,QAAQ,GAAS,CAC5B,EACA,QAAU,GAAM,EAAS,EAAO,IAAK,CAAC,EACtC,UAAY,GAAM,EAAc,EAAG,CAAK,EAExC,KAAK,QACL,eAAc,EACd,UAAW,EAAG,EAAO,mBAAoB,GAAW,EAAO,yBAA0B,GAAY,MAAM,EACvG,MAAO,GAAY,OACnB,SAAU,IAAU,EAAc,EAAI,GAErC,SAAA,EAAO,KACO,EARV,EAAO,GAQG,CAErB,CAAC,CACE,GAET"}

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

@@ -1,2 +1,2 @@
-var e={optionPicker:`optionPicker_Yx82s`,"optionPicker-chip":`optionPicker-chip_ywtvr`,optionPickerChip:`optionPicker-chip_ywtvr`,"optionPicker-option":`optionPicker-option_uq0vK`,optionPickerOption:`optionPicker-option_uq0vK`,"optionPicker-option-active":`optionPicker-option-active_yUECW`,optionPickerOptionActive:`optionPicker-option-active_yUECW`};export{e as default};
+var e=`optionPicker_Yx82s`,t=`optionPicker-chip_ywtvr`,n=`optionPicker-option_uq0vK`,r=`optionPicker-option-active_yUECW`,i={optionPicker:e,"optionPicker-chip":`optionPicker-chip_ywtvr`,optionPickerChip:t,"optionPicker-option":`optionPicker-option_uq0vK`,optionPickerOption:n,"optionPicker-option-active":`optionPicker-option-active_yUECW`,optionPickerOptionActive:r};export{i as default,e as optionPicker,t as optionPickerChip,n as optionPickerOption,r as optionPickerOptionActive};
 //# sourceMappingURL=optionPicker.module.mjs.map

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    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        align-content: center;\n        text-align: center;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n        padding: var(--option-picker-padding, var(--spacing-m));\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        border-radius: var(--default-border-radius);\n        transition: color 0.25s;\n        box-sizing: border-box;\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":""}
+{"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:\n      left 0.25s ease-in-out,\n      width 0.25s ease-in-out;\n  }\n\n  &-option {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    display: block;\n    align-content: center;\n    text-align: center;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    padding: var(--option-picker-padding, var(--spacing-m));\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    border-radius: var(--default-border-radius);\n    transition: color 0.25s;\n    box-sizing: border-box;\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":""}