@ahrowe/ui 0.42.0 → 0.44.0

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.tsx"],"sourcesContent":["import React, { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown as dropdownIcon } from '@fortawesome/free-solid-svg-icons';\nimport Tooltip from 'components/common/tooltip';\n\nimport Popover from '../popover';\nimport SpinnerLoading from '../loading/spinnerLoading';\nimport { useInfiniteScroll } from '../infiniteBlock/useInfiniteScroll';\nimport { edgeIndex, nextIndex, scrollOptionIntoView, type ActiveIndex } from '../utils/listNavigation';\nimport { PopoverAlign, PopoverPlacement } from '../popover/popover.types';\nimport { useComponentDefaults, usePresentationDefault } from '../configProvider';\nimport { useSheet } from '../hooks/useSheet';\nimport { Presentation } from '../configProvider/presentation.types';\nimport styles from './dropdown.module.pcss';\nimport sheetStyles from '../styles/sheet.module.pcss';\nimport type { DropdownProps, DropdownItem } from './dropdown.types';\n\n/** How long a pause resets the type-ahead buffer, matching a native `<select>`. */\nconst TYPEAHEAD_RESET_MS = 500;\n\nfunction Dropdown(props: DropdownProps) {\n  const {\n    errorMessage = '',\n    className = '',\n    style,\n    label = '',\n    value = '',\n    isValid = true,\n    tabIndex = 0,\n    isRequired = false,\n    customProps = {},\n    isRow = false,\n    disabled = false,\n    readOnly = false,\n    onScroll = () => Promise.resolve(),\n    onClick,\n    onChange,\n    onFocus: onFocusProp = null,\n    onBlur: onBlurProp = null,\n    onMouseEnter: onMouseEnterProp = null,\n    onMouseLeave: onMouseLeaveProp = null,\n    dropdownLabel: dropdownLabelProp,\n    isDropdownListWider = false,\n    formValidator = null,\n    classNames,\n    styles: slotStyles,\n    items = [],\n    useMatLabelStyle = true,\n    alwaysFloatLabel = false,\n    placeholder = '',\n    plainStyle = false,\n    scrollToSelected = false,\n    presentation: presentationProp,\n    reactRef,\n    ...rest\n  } = useComponentDefaults('Dropdown', props);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [, forceUpdate] = useState(0);\n  const fvRef = useRef(formValidator);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const [menuIsOpen, setMenuIsOpen] = useState(false);\n  // `null` is \"nothing highlighted\", the state a list opens in unless `scrollToSelected`\n  // asks for the current value. Arrowing from there enters the list at either end.\n  const [activeIndex, setActiveIndex] = useState<ActiveIndex>(null);\n  const typeahead = useRef({ buffer: '', at: 0 });\n\n  const baseId = useId();\n  const listboxId = `${baseId}-listbox`;\n  const labelId = `${baseId}-label`;\n  const optionId = (index: number) => `${baseId}-option-${index}`;\n\n  const isInteractive = !disabled && !readOnly;\n  const isOpen = menuIsOpen && isInteractive;\n\n  // The list is its own scroll container. It used to render through an `InfiniteBlock`, which\n  // also brought a tabbable container and a second key handler: inside a listbox that put a\n  // focusable element with no role in the tab order and gave the arrows two owners.\n  const { isLoading: showScrollSpinner, sentinelRef } = useInfiniteScroll(listRef, onScroll, false);\n\n  // Explicit prop → this component's global default → the app-wide one → anchored.\n  // Resolved here rather than left to Popover so that this component and the panel\n  // it opens can never disagree about whether they are presenting as a sheet.\n  const appPresentation = usePresentationDefault();\n  const presentation = presentationProp ?? appPresentation ?? Presentation.Default;\n  const { isSheet } = useSheet(presentation);\n\n  // The list reads at the field's size, which is not always the page's: a Dropdown\n  // inside something with a smaller font should not open a list at the default one.\n  // Width is Popover's job, through `width='trigger'`.\n  useLayoutEffect(() => {\n    const trigger = triggerRef.current;\n    const menu = anchorRef.current;\n    if (!isOpen || isSheet || !trigger || !menu) return;\n    menu.style.fontSize = window.getComputedStyle(trigger).fontSize;\n  }, [isOpen, isSheet]);\n\n  useEffect(() => {\n    fvRef.current = formValidator;\n    if (!fvRef.current) return;\n    fvRef.current.label = label ?? '';\n    fvRef.current.validate();\n    const listener = () => forceUpdate((n) => n + 1);\n    fvRef.current.registerOnUpdateListener(listener);\n    return () => fvRef.current?.removeOnUpdateListener(listener);\n  }, [formValidator, label]);\n\n  const currentValue = formValidator ? (formValidator.value as string | number) : value;\n  const selectedIndex = items.findIndex((item) => item.key === currentValue);\n\n  useEffect(() => {\n    if (!isOpen || activeIndex === null) return;\n    scrollOptionIntoView(listRef.current, document.getElementById(optionId(activeIndex)));\n    // optionId is derived from a stable useId, so it cannot go stale between renders.\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, activeIndex]);\n\n  const onMouseEnterHandler = (event: React.MouseEvent) => {\n    setIsHovered(true);\n    onMouseEnterProp?.(event);\n  };\n\n  const onMouseLeaveHandler = (event: React.MouseEvent) => {\n    setIsHovered(false);\n    onMouseLeaveProp?.(event);\n  };\n\n  const onFocusHandler = (event: React.FocusEvent) => {\n    setIsFocused(true);\n    onFocusProp?.(event);\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    if (fvRef.current) fvRef.current.touched = true;\n    setIsFocused(false);\n    onBlurProp?.(event);\n  };\n\n  const hasError = (): boolean => {\n    return formValidator ? formValidator.touched && formValidator.hasError() : !isValid || !!errorMessage;\n  };\n\n  const computedIsRequired = (): boolean => {\n    return !!(\n      isRequired || formValidator?.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required')\n    );\n  };\n\n  const onChangeHandler = (val: string | number): void => {\n    if (formValidator) {\n      formValidator.set(val);\n      onChange?.(formValidator.value, customProps);\n    } else {\n      onChange?.(val, customProps);\n    }\n  };\n\n  function handleOpenChange(next: boolean) {\n    if (next && !isInteractive) return;\n    setMenuIsOpen(next);\n    if (next) setActiveIndex(scrollToSelected && selectedIndex >= 0 ? selectedIndex : null);\n    else typeahead.current = { buffer: '', at: 0 };\n  }\n\n  function select(item: DropdownItem) {\n    if (item.disabled) return;\n    onChangeHandler(item.key);\n    handleOpenChange(false);\n  }\n\n  const navigation = { isDisabled: (index: number) => !!items[index].disabled };\n\n  /** Jumps to the option whose label starts with what was typed, as a native `<select>` does. */\n  function handleTypeahead(key: string) {\n    const now = Date.now();\n    const buffer = now - typeahead.current.at > TYPEAHEAD_RESET_MS ? key : typeahead.current.buffer + key;\n    typeahead.current = { buffer, at: now };\n\n    const needle = buffer.toLowerCase();\n    const match = items.findIndex(\n      (item) => !item.disabled && typeof item.label === 'string' && item.label.toLowerCase().startsWith(needle),\n    );\n    if (match === -1) return;\n    if (isOpen) setActiveIndex(match);\n    else select(items[match]);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent) {\n    if (!isInteractive) return;\n\n    if (!isOpen) {\n      if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter' || event.key === ' ') {\n        // Without this the browser turns the key into a click on the trigger, which\n        // Popover would read as a second toggle and close the list again.\n        event.preventDefault();\n        handleOpenChange(true);\n      } else if (event.key.length === 1) {\n        handleTypeahead(event.key);\n      }\n      return;\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      setActiveIndex(nextIndex(activeIndex, event.key === 'ArrowDown' ? 1 : -1, items.length, navigation));\n    } else if (event.key === 'Home' || event.key === 'End') {\n      event.preventDefault();\n      setActiveIndex(edgeIndex(event.key === 'Home' ? 'first' : 'last', items.length, navigation));\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      const item = activeIndex === null ? undefined : items[activeIndex];\n      if (item) select(item);\n      else handleOpenChange(false);\n    } else if (event.key === 'Escape' || event.key === 'Tab') {\n      handleOpenChange(false);\n    } else if (event.key.length === 1) {\n      handleTypeahead(event.key);\n    }\n  }\n\n  let dropdownLabel = dropdownLabelProp;\n  const hasErr = hasError();\n\n  items.forEach((item: DropdownItem) => {\n    if (item.key === currentValue) {\n      dropdownLabel = item.label as string;\n    }\n  });\n\n  const displayValue = dropdownLabel || currentValue;\n  const isDisplayBlank = displayValue == null || (typeof displayValue === 'string' && displayValue.trim() === '');\n\n  const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}>*</span> : null;\n  const editedLabel = label && computedIsRequired() ? `${label} *` : label;\n\n  const showFocus = isFocused && !readOnly;\n\n  return (\n    <div\n      {...rest}\n      className={cx(className, classNames?.root, styles.dropdownLabel, styles.dropdown, {\n        [styles.dropdownLabelColumn]: !isRow,\n      })}\n      style={{ ...style, ...slotStyles?.root }}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n    >\n      <div>\n        <Popover\n          // Popover owns opening and closing, including the outside click, Escape and the\n          // click on the field itself. The trigger only has to say what it wants.\n          isOpen={isOpen}\n          onOpenChange={handleOpenChange}\n          disabled={!isInteractive}\n          placement={PopoverPlacement.Bottom}\n          align={PopoverAlign.Start}\n          offset={0}\n          withArrow={false}\n          constrainWidth={false}\n          width='trigger'\n          // The focus stays on the trigger while the list is open, because that is what\n          // `aria-activedescendant` points from.\n          focusOnOpen={false}\n          presentation={presentation}\n          classNames={{ panel: styles.dropdownPanel }}\n          content={\n            <div\n              ref={anchorRef}\n              // A sheet's own panel does the clipping and the scrolling, and\n              // spans the screen rather than sizing itself to the field.\n              className={cx(!isSheet && styles.dropdownInputListAnim, {\n                [styles.dropdownInputListAnimWider]: isDropdownListWider && !isSheet,\n              })}\n            >\n              <div\n                ref={listRef}\n                id={listboxId}\n                role='listbox'\n                aria-label={label || placeholder || undefined}\n                className={cx(styles.dropdownInputList, isSheet && sheetStyles.sheetScroll, classNames?.list)}\n                style={slotStyles?.list}\n              >\n                {items.map((item: DropdownItem, index: number) => (\n                  <div\n                    key={item.key}\n                    id={optionId(index)}\n                    role='option'\n                    aria-selected={item.key === currentValue}\n                    aria-disabled={item.disabled || undefined}\n                    style={slotStyles?.option}\n                    className={cx(styles.dropdownInputListItem, classNames?.option, {\n                      [styles.dropdownInputListItemActive]: activeIndex === index,\n                      [styles.dropdownInputListItemSelected]: item.key === currentValue,\n                      [styles.dropdownInputListItemDisabled]: !!item.disabled,\n                    })}\n                    // Selecting must not move the focus off the trigger, which is what\n                    // `aria-activedescendant` is anchored to.\n                    onMouseDown={(event) => event.preventDefault()}\n                    onMouseEnter={() => setActiveIndex(index)}\n                    onClick={() => select(item)}\n                  >\n                    {item.label}\n                  </div>\n                ))}\n                <div ref={sentinelRef} className={styles.dropdownSentinel} aria-hidden='true' />\n                {showScrollSpinner && (\n                  <div className={styles.dropdownLoadMore} aria-hidden='true'>\n                    <SpinnerLoading className={styles.dropdownLoadMoreSpinner} />\n                  </div>\n                )}\n              </div>\n            </div>\n          }\n        >\n          <div\n            ref={triggerRef}\n            onFocus={onFocusHandler}\n            onBlur={onBlurHandler}\n            className={cx(\n              styles.dropdownInput,\n              {\n                [styles.dropdownInputPlain]: plainStyle,\n                [styles.dropdownInputReadOnly]: readOnly && !disabled,\n              },\n              classNames?.field,\n            )}\n            style={slotStyles?.field}\n          >\n            <button\n              tabIndex={tabIndex}\n              type='button'\n              disabled={disabled}\n              // A select-only combobox: the accessible name comes from the field's label,\n              // and the element's own content is read as its value. A plain `button` role\n              // would announce the value as the name and never mention the label.\n              role='combobox'\n              aria-haspopup='listbox'\n              aria-expanded={isOpen}\n              aria-controls={listboxId}\n              aria-activedescendant={isOpen && activeIndex !== null ? optionId(activeIndex) : undefined}\n              aria-labelledby={label ? labelId : undefined}\n              aria-label={label ? undefined : placeholder || undefined}\n              aria-readonly={readOnly || undefined}\n              className={cx(\n                styles.dropdownInputButton,\n                {\n                  [styles.dropdownInputButtonDisabled]: disabled,\n                  [styles.dropdownInputButtonReadOnly]: readOnly && !disabled,\n                },\n                classNames?.control,\n              )}\n              style={{ ...(isDropdownListWider ? { padding: '6px', border: 'none' } : {}), ...slotStyles?.control }}\n              onKeyDown={handleKeyDown}\n              onClick={onClick}\n              ref={reactRef}\n            >\n              {/* Non-breaking space when blank (same text-node layout as a\n                real value) so the button keeps a full line of height. */}\n              {isDisplayBlank ? ' ' : displayValue}\n            </button>\n            <button\n              type='button'\n              tabIndex={-1}\n              disabled={disabled}\n              // The chevron repeats what the combobox beside it already does, so it is a\n              // pointer affordance only. Announcing it would offer the same control twice.\n              aria-hidden='true'\n              className={cx(styles.dropdownInputButtonIcon, classNames?.icon)}\n              style={slotStyles?.icon}\n              // Keeping the focus where it is, rather than letting mousedown move it here:\n              // the trigger is what `aria-activedescendant` points from, and the click\n              // still reaches Popover by bubbling.\n              onMouseDown={(event: React.MouseEvent<HTMLButtonElement>) => event.preventDefault()}\n              onClick={onClick}\n            >\n              {!disabled && !readOnly && (\n                <FontAwesomeIcon\n                  icon={dropdownIcon}\n                  className={cx(styles.dropdownInputButtonIconArrow, {\n                    [styles.dropdownInputButtonIconArrowOpen]: isOpen,\n                  })}\n                />\n              )}\n            </button>\n            <fieldset\n              className={cx(styles.dropdownFieldset, {\n                [styles.dropdownBorderPlain]: plainStyle,\n                [styles.dropdownBorderFocused]: showFocus,\n                [styles.dropdownBorderInvalid]: hasErr,\n                [styles.dropdownBorderError]: hasErr,\n              })}\n            >\n              <legend\n                className={cx(styles.dropdownFieldsetLegend, {\n                  [styles.dropdownFieldsetLegendActive]:\n                    useMatLabelStyle && (alwaysFloatLabel || showFocus || !isDisplayBlank),\n                })}\n              >\n                <span>{editedLabel}</span>\n              </legend>\n            </fieldset>\n            {useMatLabelStyle && label && (\n              <div\n                id={labelId}\n                className={cx(\n                  styles.dropdownMatLabel,\n                  {\n                    [styles.dropdownMatLabelFloating]: alwaysFloatLabel || showFocus || !isDisplayBlank,\n                  },\n                  // The floating and the stacked label are two renderings of\n                  // the same thing, so one slot reaches whichever is in use.\n                  classNames?.label,\n                )}\n                style={slotStyles?.label}\n              >\n                {label}\n                {requiredMark}\n              </div>\n            )}\n            {useMatLabelStyle && placeholder && (\n              <div\n                className={cx(\n                  styles.dropdownPlaceholder,\n                  showFocus && !dropdownLabel && styles.dropdownPlaceholderShown,\n                )}\n              >\n                {placeholder}\n              </div>\n            )}\n          </div>\n        </Popover>\n      </div>\n      {label && !useMatLabelStyle && (\n        <div id={labelId} className={cx(styles.dropdownLabelText, classNames?.label)} style={slotStyles?.label}>\n          {label}\n          {requiredMark}\n        </div>\n      )}\n      <Tooltip\n        variant='error'\n        message={formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || ''}\n        isVisible={hasErr && (isFocused || isHovered)}\n      />\n    </div>\n  );\n}\n\nexport default Dropdown;\n"],"mappings":"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"}
+{"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.tsx"],"sourcesContent":["import React, { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown as dropdownIcon } from '@fortawesome/free-solid-svg-icons';\nimport Tooltip from 'components/common/tooltip';\n\nimport Popover from '../popover';\nimport Loader from '../loader';\nimport { useInfiniteScroll } from '../infiniteBlock/useInfiniteScroll';\nimport { edgeIndex, nextIndex, scrollOptionIntoView, type ActiveIndex } from '../utils/listNavigation';\nimport { PopoverAlign, PopoverPlacement } from '../popover/popover.types';\nimport { useComponentDefaults, usePresentationDefault } from '../configProvider';\nimport { useSheet } from '../hooks/useSheet';\nimport { Presentation } from '../configProvider/presentation.types';\nimport styles from './dropdown.module.pcss';\nimport sheetStyles from '../styles/sheet.module.pcss';\nimport type { DropdownProps, DropdownItem } from './dropdown.types';\n\n/** How long a pause resets the type-ahead buffer, matching a native `<select>`. */\nconst TYPEAHEAD_RESET_MS = 500;\n\nfunction Dropdown(props: DropdownProps) {\n  const {\n    errorMessage = '',\n    className = '',\n    style,\n    label = '',\n    value = '',\n    isValid = true,\n    tabIndex = 0,\n    isRequired = false,\n    customProps = {},\n    isRow = false,\n    disabled = false,\n    readOnly = false,\n    onScroll = () => Promise.resolve(),\n    onClick,\n    onChange,\n    onFocus: onFocusProp = null,\n    onBlur: onBlurProp = null,\n    onMouseEnter: onMouseEnterProp = null,\n    onMouseLeave: onMouseLeaveProp = null,\n    dropdownLabel: dropdownLabelProp,\n    isDropdownListWider = false,\n    formValidator = null,\n    classNames,\n    styles: slotStyles,\n    items = [],\n    useMatLabelStyle = true,\n    alwaysFloatLabel = false,\n    placeholder = '',\n    plainStyle = false,\n    scrollToSelected = false,\n    presentation: presentationProp,\n    reactRef,\n    ...rest\n  } = useComponentDefaults('Dropdown', props);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [, forceUpdate] = useState(0);\n  const fvRef = useRef(formValidator);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const [menuIsOpen, setMenuIsOpen] = useState(false);\n  // `null` is \"nothing highlighted\", the state a list opens in unless `scrollToSelected`\n  // asks for the current value. Arrowing from there enters the list at either end.\n  const [activeIndex, setActiveIndex] = useState<ActiveIndex>(null);\n  const typeahead = useRef({ buffer: '', at: 0 });\n\n  const baseId = useId();\n  const listboxId = `${baseId}-listbox`;\n  const labelId = `${baseId}-label`;\n  const optionId = (index: number) => `${baseId}-option-${index}`;\n\n  const isInteractive = !disabled && !readOnly;\n  const isOpen = menuIsOpen && isInteractive;\n\n  // The list is its own scroll container. It used to render through an `InfiniteBlock`, which\n  // also brought a tabbable container and a second key handler: inside a listbox that put a\n  // focusable element with no role in the tab order and gave the arrows two owners.\n  const { isLoading: showScrollSpinner, sentinelRef } = useInfiniteScroll(listRef, onScroll, false);\n\n  // Explicit prop → this component's global default → the app-wide one → anchored.\n  // Resolved here rather than left to Popover so that this component and the panel\n  // it opens can never disagree about whether they are presenting as a sheet.\n  const appPresentation = usePresentationDefault();\n  const presentation = presentationProp ?? appPresentation ?? Presentation.Default;\n  const { isSheet } = useSheet(presentation);\n\n  // The list reads at the field's size, which is not always the page's: a Dropdown\n  // inside something with a smaller font should not open a list at the default one.\n  // Width is Popover's job, through `width='trigger'`.\n  useLayoutEffect(() => {\n    const trigger = triggerRef.current;\n    const menu = anchorRef.current;\n    if (!isOpen || isSheet || !trigger || !menu) return;\n    menu.style.fontSize = window.getComputedStyle(trigger).fontSize;\n  }, [isOpen, isSheet]);\n\n  useEffect(() => {\n    fvRef.current = formValidator;\n    if (!fvRef.current) return;\n    fvRef.current.label = label ?? '';\n    fvRef.current.validate();\n    const listener = () => forceUpdate((n) => n + 1);\n    fvRef.current.registerOnUpdateListener(listener);\n    return () => fvRef.current?.removeOnUpdateListener(listener);\n  }, [formValidator, label]);\n\n  const currentValue = formValidator ? (formValidator.value as string | number) : value;\n  const selectedIndex = items.findIndex((item) => item.key === currentValue);\n\n  useEffect(() => {\n    if (!isOpen || activeIndex === null) return;\n    scrollOptionIntoView(listRef.current, document.getElementById(optionId(activeIndex)));\n    // optionId is derived from a stable useId, so it cannot go stale between renders.\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, activeIndex]);\n\n  const onMouseEnterHandler = (event: React.MouseEvent) => {\n    setIsHovered(true);\n    onMouseEnterProp?.(event);\n  };\n\n  const onMouseLeaveHandler = (event: React.MouseEvent) => {\n    setIsHovered(false);\n    onMouseLeaveProp?.(event);\n  };\n\n  const onFocusHandler = (event: React.FocusEvent) => {\n    setIsFocused(true);\n    onFocusProp?.(event);\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    if (fvRef.current) fvRef.current.touched = true;\n    setIsFocused(false);\n    onBlurProp?.(event);\n  };\n\n  const hasError = (): boolean => {\n    return formValidator ? formValidator.touched && formValidator.hasError() : !isValid || !!errorMessage;\n  };\n\n  const computedIsRequired = (): boolean => {\n    return !!(\n      isRequired || formValidator?.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required')\n    );\n  };\n\n  const onChangeHandler = (val: string | number): void => {\n    if (formValidator) {\n      formValidator.set(val);\n      onChange?.(formValidator.value, customProps);\n    } else {\n      onChange?.(val, customProps);\n    }\n  };\n\n  function handleOpenChange(next: boolean) {\n    if (next && !isInteractive) return;\n    setMenuIsOpen(next);\n    if (next) setActiveIndex(scrollToSelected && selectedIndex >= 0 ? selectedIndex : null);\n    else typeahead.current = { buffer: '', at: 0 };\n  }\n\n  function select(item: DropdownItem) {\n    if (item.disabled) return;\n    onChangeHandler(item.key);\n    handleOpenChange(false);\n  }\n\n  const navigation = { isDisabled: (index: number) => !!items[index].disabled };\n\n  /** Jumps to the option whose label starts with what was typed, as a native `<select>` does. */\n  function handleTypeahead(key: string) {\n    const now = Date.now();\n    const buffer = now - typeahead.current.at > TYPEAHEAD_RESET_MS ? key : typeahead.current.buffer + key;\n    typeahead.current = { buffer, at: now };\n\n    const needle = buffer.toLowerCase();\n    const match = items.findIndex(\n      (item) => !item.disabled && typeof item.label === 'string' && item.label.toLowerCase().startsWith(needle),\n    );\n    if (match === -1) return;\n    if (isOpen) setActiveIndex(match);\n    else select(items[match]);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent) {\n    if (!isInteractive) return;\n\n    if (!isOpen) {\n      if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter' || event.key === ' ') {\n        // Without this the browser turns the key into a click on the trigger, which\n        // Popover would read as a second toggle and close the list again.\n        event.preventDefault();\n        handleOpenChange(true);\n      } else if (event.key.length === 1) {\n        handleTypeahead(event.key);\n      }\n      return;\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      setActiveIndex(nextIndex(activeIndex, event.key === 'ArrowDown' ? 1 : -1, items.length, navigation));\n    } else if (event.key === 'Home' || event.key === 'End') {\n      event.preventDefault();\n      setActiveIndex(edgeIndex(event.key === 'Home' ? 'first' : 'last', items.length, navigation));\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      const item = activeIndex === null ? undefined : items[activeIndex];\n      if (item) select(item);\n      else handleOpenChange(false);\n    } else if (event.key === 'Escape' || event.key === 'Tab') {\n      handleOpenChange(false);\n    } else if (event.key.length === 1) {\n      handleTypeahead(event.key);\n    }\n  }\n\n  let dropdownLabel = dropdownLabelProp;\n  const hasErr = hasError();\n\n  items.forEach((item: DropdownItem) => {\n    if (item.key === currentValue) {\n      dropdownLabel = item.label as string;\n    }\n  });\n\n  const displayValue = dropdownLabel || currentValue;\n  const isDisplayBlank = displayValue == null || (typeof displayValue === 'string' && displayValue.trim() === '');\n\n  const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}>*</span> : null;\n  const editedLabel = label && computedIsRequired() ? `${label} *` : label;\n\n  const showFocus = isFocused && !readOnly;\n\n  return (\n    <div\n      {...rest}\n      className={cx(className, classNames?.root, styles.dropdownLabel, styles.dropdown, {\n        [styles.dropdownLabelColumn]: !isRow,\n      })}\n      style={{ ...style, ...slotStyles?.root }}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n    >\n      <div>\n        <Popover\n          // Popover owns opening and closing, including the outside click, Escape and the\n          // click on the field itself. The trigger only has to say what it wants.\n          isOpen={isOpen}\n          onOpenChange={handleOpenChange}\n          disabled={!isInteractive}\n          placement={PopoverPlacement.Bottom}\n          align={PopoverAlign.Start}\n          offset={0}\n          withArrow={false}\n          constrainWidth={false}\n          width='trigger'\n          // The focus stays on the trigger while the list is open, because that is what\n          // `aria-activedescendant` points from.\n          focusOnOpen={false}\n          presentation={presentation}\n          classNames={{ panel: styles.dropdownPanel }}\n          content={\n            <div\n              ref={anchorRef}\n              // A sheet's own panel does the clipping and the scrolling, and\n              // spans the screen rather than sizing itself to the field.\n              className={cx(!isSheet && styles.dropdownInputListAnim, {\n                [styles.dropdownInputListAnimWider]: isDropdownListWider && !isSheet,\n              })}\n            >\n              <div\n                ref={listRef}\n                id={listboxId}\n                role='listbox'\n                aria-label={label || placeholder || undefined}\n                className={cx(styles.dropdownInputList, isSheet && sheetStyles.sheetScroll, classNames?.list)}\n                style={slotStyles?.list}\n              >\n                {items.map((item: DropdownItem, index: number) => (\n                  <div\n                    key={item.key}\n                    id={optionId(index)}\n                    role='option'\n                    aria-selected={item.key === currentValue}\n                    aria-disabled={item.disabled || undefined}\n                    style={slotStyles?.option}\n                    className={cx(styles.dropdownInputListItem, classNames?.option, {\n                      [styles.dropdownInputListItemActive]: activeIndex === index,\n                      [styles.dropdownInputListItemSelected]: item.key === currentValue,\n                      [styles.dropdownInputListItemDisabled]: !!item.disabled,\n                    })}\n                    // Selecting must not move the focus off the trigger, which is what\n                    // `aria-activedescendant` is anchored to.\n                    onMouseDown={(event) => event.preventDefault()}\n                    onMouseEnter={() => setActiveIndex(index)}\n                    onClick={() => select(item)}\n                  >\n                    {item.label}\n                  </div>\n                ))}\n                <div ref={sentinelRef} className={styles.dropdownSentinel} aria-hidden='true' />\n                {showScrollSpinner && (\n                  <div className={styles.dropdownLoadMore} aria-hidden='true'>\n                    <Loader size={32} />\n                  </div>\n                )}\n              </div>\n            </div>\n          }\n        >\n          <div\n            ref={triggerRef}\n            onFocus={onFocusHandler}\n            onBlur={onBlurHandler}\n            className={cx(\n              styles.dropdownInput,\n              {\n                [styles.dropdownInputPlain]: plainStyle,\n                [styles.dropdownInputReadOnly]: readOnly && !disabled,\n              },\n              classNames?.field,\n            )}\n            style={slotStyles?.field}\n          >\n            <button\n              tabIndex={tabIndex}\n              type='button'\n              disabled={disabled}\n              // A select-only combobox: the accessible name comes from the field's label,\n              // and the element's own content is read as its value. A plain `button` role\n              // would announce the value as the name and never mention the label.\n              role='combobox'\n              aria-haspopup='listbox'\n              aria-expanded={isOpen}\n              aria-controls={listboxId}\n              aria-activedescendant={isOpen && activeIndex !== null ? optionId(activeIndex) : undefined}\n              aria-labelledby={label ? labelId : undefined}\n              aria-label={label ? undefined : placeholder || undefined}\n              aria-readonly={readOnly || undefined}\n              className={cx(\n                styles.dropdownInputButton,\n                {\n                  [styles.dropdownInputButtonDisabled]: disabled,\n                  [styles.dropdownInputButtonReadOnly]: readOnly && !disabled,\n                },\n                classNames?.control,\n              )}\n              style={{ ...(isDropdownListWider ? { padding: '6px', border: 'none' } : {}), ...slotStyles?.control }}\n              onKeyDown={handleKeyDown}\n              onClick={onClick}\n              ref={reactRef}\n            >\n              {/* Non-breaking space when blank (same text-node layout as a\n                real value) so the button keeps a full line of height. */}\n              {isDisplayBlank ? ' ' : displayValue}\n            </button>\n            <button\n              type='button'\n              tabIndex={-1}\n              disabled={disabled}\n              // The chevron repeats what the combobox beside it already does, so it is a\n              // pointer affordance only. Announcing it would offer the same control twice.\n              aria-hidden='true'\n              className={cx(styles.dropdownInputButtonIcon, classNames?.icon)}\n              style={slotStyles?.icon}\n              // Keeping the focus where it is, rather than letting mousedown move it here:\n              // the trigger is what `aria-activedescendant` points from, and the click\n              // still reaches Popover by bubbling.\n              onMouseDown={(event: React.MouseEvent<HTMLButtonElement>) => event.preventDefault()}\n              onClick={onClick}\n            >\n              {!disabled && !readOnly && (\n                <FontAwesomeIcon\n                  icon={dropdownIcon}\n                  className={cx(styles.dropdownInputButtonIconArrow, {\n                    [styles.dropdownInputButtonIconArrowOpen]: isOpen,\n                  })}\n                />\n              )}\n            </button>\n            <fieldset\n              className={cx(styles.dropdownFieldset, {\n                [styles.dropdownBorderPlain]: plainStyle,\n                [styles.dropdownBorderFocused]: showFocus,\n                [styles.dropdownBorderInvalid]: hasErr,\n                [styles.dropdownBorderError]: hasErr,\n              })}\n            >\n              <legend\n                className={cx(styles.dropdownFieldsetLegend, {\n                  [styles.dropdownFieldsetLegendActive]:\n                    useMatLabelStyle && (alwaysFloatLabel || showFocus || !isDisplayBlank),\n                })}\n              >\n                <span>{editedLabel}</span>\n              </legend>\n            </fieldset>\n            {useMatLabelStyle && label && (\n              <div\n                id={labelId}\n                className={cx(\n                  styles.dropdownMatLabel,\n                  {\n                    [styles.dropdownMatLabelFloating]: alwaysFloatLabel || showFocus || !isDisplayBlank,\n                  },\n                  // The floating and the stacked label are two renderings of\n                  // the same thing, so one slot reaches whichever is in use.\n                  classNames?.label,\n                )}\n                style={slotStyles?.label}\n              >\n                {label}\n                {requiredMark}\n              </div>\n            )}\n            {useMatLabelStyle && placeholder && (\n              <div\n                className={cx(\n                  styles.dropdownPlaceholder,\n                  showFocus && !dropdownLabel && styles.dropdownPlaceholderShown,\n                )}\n              >\n                {placeholder}\n              </div>\n            )}\n          </div>\n        </Popover>\n      </div>\n      {label && !useMatLabelStyle && (\n        <div id={labelId} className={cx(styles.dropdownLabelText, classNames?.label)} style={slotStyles?.label}>\n          {label}\n          {requiredMark}\n        </div>\n      )}\n      <Tooltip\n        variant='error'\n        message={formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || ''}\n        isVisible={hasErr && (isFocused || isHovered)}\n      />\n    </div>\n  );\n}\n\nexport default Dropdown;\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use client";var e=`required-mark_fy7Fm`,t=`dropdown_XTshY`,n=`dropdown-label_TIpeK`,r=`dropdown-label-column_cMCBc`,i=`dropdown-label-text_u-UKq`,a=`dropdown-input_WiPcb`,o=`dropdown-input-plain_Ap12N`,s=`dropdown-input-readOnly_3GWSO`,c=`dropdown-input-button_ziKKi`,l=`dropdown-input-button-disabled_JEaO-`,u=`dropdown-input-button-readOnly_QhBYY`,d=`dropdown-input-button-icon_jl7EY`,f=`dropdown-input-button-icon-arrow_SFJbx`,p=`dropdown-input-button-icon-arrow-open_8yQbZ`,m=`dropdown-input-list-anim_knSMT`,h=`dropdown-input-list-anim-wider_-YyLJ`,g=`dropdown-input-list_JnMbA`,_=`dropdown-input-list-item_EAy5L`,v=`dropdown-input-list-item-active_0dhia`,y=`dropdown-input-list-item-selected_hShJf`,b=`dropdown-input-list-item-disabled_3r-Yn`,x=`dropdown-fieldset_wQwTf`,S=`dropdown-fieldset-legend_a1M4L`,C=`dropdown-fieldset-legend-active_bnR5F`,w=`dropdown-placeholder_QYMPZ`,T=`dropdown-placeholder-shown_-IkNH`,E=`fadeIn_oMJZj`,D=`dropdown-matLabel_iHQnt`,O=`dropdown-matLabel-floating_zY51S`,k=`dropdown-border-focused_Te-ER`,A=`dropdown-border-plain_Bbh-3`,j=`dropdown-border-invalid_ySVaS`,M=`dropdown-border-error_-JB33`,N=`dropdownPanel_RYxpN`,P=`dropdown-sentinel_TVDF9`,F=`dropdown-load-more_UQvzV`,I=`dropdown-load-more-spinner_SOMz7`,L={"required-mark":`required-mark_fy7Fm`,requiredMark:e,dropdown:t,"dropdown-label":`dropdown-label_TIpeK`,dropdownLabel:n,"dropdown-label-column":`dropdown-label-column_cMCBc`,dropdownLabelColumn:r,"dropdown-label-text":`dropdown-label-text_u-UKq`,dropdownLabelText:i,"dropdown-input":`dropdown-input_WiPcb`,dropdownInput:a,"dropdown-input-plain":`dropdown-input-plain_Ap12N`,dropdownInputPlain:o,"dropdown-input-readOnly":`dropdown-input-readOnly_3GWSO`,dropdownInputReadOnly:s,"dropdown-input-button":`dropdown-input-button_ziKKi`,dropdownInputButton:c,"dropdown-input-button-disabled":`dropdown-input-button-disabled_JEaO-`,dropdownInputButtonDisabled:l,"dropdown-input-button-readOnly":`dropdown-input-button-readOnly_QhBYY`,dropdownInputButtonReadOnly:u,"dropdown-input-button-icon":`dropdown-input-button-icon_jl7EY`,dropdownInputButtonIcon:d,"dropdown-input-button-icon-arrow":`dropdown-input-button-icon-arrow_SFJbx`,dropdownInputButtonIconArrow:f,"dropdown-input-button-icon-arrow-open":`dropdown-input-button-icon-arrow-open_8yQbZ`,dropdownInputButtonIconArrowOpen:p,"dropdown-input-list-anim":`dropdown-input-list-anim_knSMT`,dropdownInputListAnim:m,"dropdown-input-list-anim-wider":`dropdown-input-list-anim-wider_-YyLJ`,dropdownInputListAnimWider:h,"dropdown-input-list":`dropdown-input-list_JnMbA`,dropdownInputList:g,"dropdown-input-list-item":`dropdown-input-list-item_EAy5L`,dropdownInputListItem:_,"dropdown-input-list-item-active":`dropdown-input-list-item-active_0dhia`,dropdownInputListItemActive:v,"dropdown-input-list-item-selected":`dropdown-input-list-item-selected_hShJf`,dropdownInputListItemSelected:y,"dropdown-input-list-item-disabled":`dropdown-input-list-item-disabled_3r-Yn`,dropdownInputListItemDisabled:b,"dropdown-fieldset":`dropdown-fieldset_wQwTf`,dropdownFieldset:x,"dropdown-fieldset-legend":`dropdown-fieldset-legend_a1M4L`,dropdownFieldsetLegend:S,"dropdown-fieldset-legend-active":`dropdown-fieldset-legend-active_bnR5F`,dropdownFieldsetLegendActive:C,"dropdown-placeholder":`dropdown-placeholder_QYMPZ`,dropdownPlaceholder:w,"dropdown-placeholder-shown":`dropdown-placeholder-shown_-IkNH`,dropdownPlaceholderShown:T,fadeIn:E,"dropdown-matLabel":`dropdown-matLabel_iHQnt`,dropdownMatLabel:D,"dropdown-matLabel-floating":`dropdown-matLabel-floating_zY51S`,dropdownMatLabelFloating:O,"dropdown-border-focused":`dropdown-border-focused_Te-ER`,dropdownBorderFocused:k,"dropdown-border-plain":`dropdown-border-plain_Bbh-3`,dropdownBorderPlain:A,"dropdown-border-invalid":`dropdown-border-invalid_ySVaS`,dropdownBorderInvalid:j,"dropdown-border-error":`dropdown-border-error_-JB33`,dropdownBorderError:M,dropdownPanel:N,"dropdown-sentinel":`dropdown-sentinel_TVDF9`,dropdownSentinel:P,"dropdown-load-more":`dropdown-load-more_UQvzV`,dropdownLoadMore:F,"dropdown-load-more-spinner":`dropdown-load-more-spinner_SOMz7`,dropdownLoadMoreSpinner:I};export{L as default,t as dropdown,M as dropdownBorderError,k as dropdownBorderFocused,j as dropdownBorderInvalid,A as dropdownBorderPlain,x as dropdownFieldset,S as dropdownFieldsetLegend,C as dropdownFieldsetLegendActive,a as dropdownInput,c as dropdownInputButton,l as dropdownInputButtonDisabled,d as dropdownInputButtonIcon,f as dropdownInputButtonIconArrow,p as dropdownInputButtonIconArrowOpen,u as dropdownInputButtonReadOnly,g as dropdownInputList,m as dropdownInputListAnim,h as dropdownInputListAnimWider,_ as dropdownInputListItem,v as dropdownInputListItemActive,b as dropdownInputListItemDisabled,y as dropdownInputListItemSelected,o as dropdownInputPlain,s as dropdownInputReadOnly,n as dropdownLabel,r as dropdownLabelColumn,i as dropdownLabelText,F as dropdownLoadMore,I as dropdownLoadMoreSpinner,D as dropdownMatLabel,O as dropdownMatLabelFloating,N as dropdownPanel,w as dropdownPlaceholder,T as dropdownPlaceholderShown,P as dropdownSentinel,E as fadeIn,e as requiredMark};
+"use client";var e=`required-mark_fy7Fm`,t=`dropdown_XTshY`,n=`dropdown-label_TIpeK`,r=`dropdown-label-column_cMCBc`,i=`dropdown-label-text_u-UKq`,a=`dropdown-input_WiPcb`,o=`dropdown-input-plain_Ap12N`,s=`dropdown-input-readOnly_3GWSO`,c=`dropdown-input-button_ziKKi`,l=`dropdown-input-button-disabled_JEaO-`,u=`dropdown-input-button-readOnly_QhBYY`,d=`dropdown-input-button-icon_jl7EY`,f=`dropdown-input-button-icon-arrow_SFJbx`,p=`dropdown-input-button-icon-arrow-open_8yQbZ`,m=`dropdown-input-list-anim_knSMT`,h=`dropdown-input-list-anim-wider_-YyLJ`,g=`dropdown-input-list_JnMbA`,_=`dropdown-input-list-item_EAy5L`,v=`dropdown-input-list-item-active_0dhia`,y=`dropdown-input-list-item-selected_hShJf`,b=`dropdown-input-list-item-disabled_3r-Yn`,x=`dropdown-fieldset_wQwTf`,S=`dropdown-fieldset-legend_a1M4L`,C=`dropdown-fieldset-legend-active_bnR5F`,w=`dropdown-placeholder_QYMPZ`,T=`dropdown-placeholder-shown_-IkNH`,E=`fadeIn_oMJZj`,D=`dropdown-matLabel_iHQnt`,O=`dropdown-matLabel-floating_zY51S`,k=`dropdown-border-focused_Te-ER`,A=`dropdown-border-plain_Bbh-3`,j=`dropdown-border-invalid_ySVaS`,M=`dropdown-border-error_-JB33`,N=`dropdownPanel_RYxpN`,P=`dropdown-sentinel_TVDF9`,F=`dropdown-load-more_UQvzV`,I={"required-mark":`required-mark_fy7Fm`,requiredMark:e,dropdown:t,"dropdown-label":`dropdown-label_TIpeK`,dropdownLabel:n,"dropdown-label-column":`dropdown-label-column_cMCBc`,dropdownLabelColumn:r,"dropdown-label-text":`dropdown-label-text_u-UKq`,dropdownLabelText:i,"dropdown-input":`dropdown-input_WiPcb`,dropdownInput:a,"dropdown-input-plain":`dropdown-input-plain_Ap12N`,dropdownInputPlain:o,"dropdown-input-readOnly":`dropdown-input-readOnly_3GWSO`,dropdownInputReadOnly:s,"dropdown-input-button":`dropdown-input-button_ziKKi`,dropdownInputButton:c,"dropdown-input-button-disabled":`dropdown-input-button-disabled_JEaO-`,dropdownInputButtonDisabled:l,"dropdown-input-button-readOnly":`dropdown-input-button-readOnly_QhBYY`,dropdownInputButtonReadOnly:u,"dropdown-input-button-icon":`dropdown-input-button-icon_jl7EY`,dropdownInputButtonIcon:d,"dropdown-input-button-icon-arrow":`dropdown-input-button-icon-arrow_SFJbx`,dropdownInputButtonIconArrow:f,"dropdown-input-button-icon-arrow-open":`dropdown-input-button-icon-arrow-open_8yQbZ`,dropdownInputButtonIconArrowOpen:p,"dropdown-input-list-anim":`dropdown-input-list-anim_knSMT`,dropdownInputListAnim:m,"dropdown-input-list-anim-wider":`dropdown-input-list-anim-wider_-YyLJ`,dropdownInputListAnimWider:h,"dropdown-input-list":`dropdown-input-list_JnMbA`,dropdownInputList:g,"dropdown-input-list-item":`dropdown-input-list-item_EAy5L`,dropdownInputListItem:_,"dropdown-input-list-item-active":`dropdown-input-list-item-active_0dhia`,dropdownInputListItemActive:v,"dropdown-input-list-item-selected":`dropdown-input-list-item-selected_hShJf`,dropdownInputListItemSelected:y,"dropdown-input-list-item-disabled":`dropdown-input-list-item-disabled_3r-Yn`,dropdownInputListItemDisabled:b,"dropdown-fieldset":`dropdown-fieldset_wQwTf`,dropdownFieldset:x,"dropdown-fieldset-legend":`dropdown-fieldset-legend_a1M4L`,dropdownFieldsetLegend:S,"dropdown-fieldset-legend-active":`dropdown-fieldset-legend-active_bnR5F`,dropdownFieldsetLegendActive:C,"dropdown-placeholder":`dropdown-placeholder_QYMPZ`,dropdownPlaceholder:w,"dropdown-placeholder-shown":`dropdown-placeholder-shown_-IkNH`,dropdownPlaceholderShown:T,fadeIn:E,"dropdown-matLabel":`dropdown-matLabel_iHQnt`,dropdownMatLabel:D,"dropdown-matLabel-floating":`dropdown-matLabel-floating_zY51S`,dropdownMatLabelFloating:O,"dropdown-border-focused":`dropdown-border-focused_Te-ER`,dropdownBorderFocused:k,"dropdown-border-plain":`dropdown-border-plain_Bbh-3`,dropdownBorderPlain:A,"dropdown-border-invalid":`dropdown-border-invalid_ySVaS`,dropdownBorderInvalid:j,"dropdown-border-error":`dropdown-border-error_-JB33`,dropdownBorderError:M,dropdownPanel:N,"dropdown-sentinel":`dropdown-sentinel_TVDF9`,dropdownSentinel:P,"dropdown-load-more":`dropdown-load-more_UQvzV`,dropdownLoadMore:F};export{I as default,t as dropdown,M as dropdownBorderError,k as dropdownBorderFocused,j as dropdownBorderInvalid,A as dropdownBorderPlain,x as dropdownFieldset,S as dropdownFieldsetLegend,C as dropdownFieldsetLegendActive,a as dropdownInput,c as dropdownInputButton,l as dropdownInputButtonDisabled,d as dropdownInputButtonIcon,f as dropdownInputButtonIconArrow,p as dropdownInputButtonIconArrowOpen,u as dropdownInputButtonReadOnly,g as dropdownInputList,m as dropdownInputListAnim,h as dropdownInputListAnimWider,_ as dropdownInputListItem,v as dropdownInputListItemActive,b as dropdownInputListItemDisabled,y as dropdownInputListItemSelected,o as dropdownInputPlain,s as dropdownInputReadOnly,n as dropdownLabel,r as dropdownLabelColumn,i as dropdownLabelText,F as dropdownLoadMore,D as dropdownMatLabel,O as dropdownMatLabelFloating,N as dropdownPanel,w as dropdownPlaceholder,T as dropdownPlaceholderShown,P as dropdownSentinel,E as fadeIn,e as requiredMark};
 //# sourceMappingURL=dropdown.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.module.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.module.pcss"],"sourcesContent":[".required-mark {\n  padding: 0 0 0 4px;\n  color: var(--required-mark-color, var(--error-color));\n}\n\n.dropdown {\n  position: relative;\n\n  /* Nothing inside gives the root a width, so as a flex or grid item it collapsed to the chevron\n     and drew its border through the label. `input` and `multiSelect` say the same. */\n  width: 100%;\n\n  --dropdown-notch-height: 1.75em;\n\n  /* See input.module.pcss for why this exists: the visible border lives on `-input`/`-fieldset`\n     below, not this root, so a wrapping ButtonGroup's --group-radius-* custom properties (which\n     inherit through any nesting depth, unlike border-radius itself) are what let this component\n     flatten correctly when it sits inside a ButtonGroup. */\n  --dropdown-radius: var(--group-radius-tl, var(--default-border-radius))\n    var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n    var(--group-radius-bl, var(--default-border-radius));\n\n  &-label {\n    display: flex;\n\n    &-column {\n      flex-direction: column;\n    }\n\n    &-text {\n      white-space: nowrap;\n      margin-right: 5px;\n      margin-bottom: 5px;\n      display: flex;\n      align-items: center;\n      color: var(--text-color);\n      font-size: 12px;\n      position: absolute;\n      top: -15px;\n    }\n  }\n\n  &-input {\n    position: relative;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    background-color: var(--input-background);\n    border-radius: var(--dropdown-radius);\n\n    &-plain {\n      background: transparent;\n    }\n\n    &-readOnly {\n      cursor: default;\n    }\n\n    &:focus-within {\n      outline: none;\n    }\n\n    &-button {\n      padding: 8px 20% 6px 7.5px !important;\n      background-color: transparent;\n      border: none;\n      font-family: inherit;\n      font-size: inherit;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      text-align: left;\n      width: 100%;\n      line-height: 1.25;\n      color: var(--text-color);\n\n      &-disabled {\n        background-color: var(--disabled-input-color);\n        color: var(--disabled-font-color);\n        border-radius: var(--dropdown-radius);\n      }\n\n      &-readOnly {\n        cursor: default;\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &-icon {\n        float: right;\n        background-color: transparent;\n        border: none;\n        position: absolute;\n        outline: none;\n        right: var(--spacing-s);\n        top: 50%;\n        transform: translateY(-50%);\n        color: var(--text-color);\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n\n        &-arrow {\n          transition: transform 0.25s;\n          pointer-events: none;\n\n          &-open {\n            transform: rotate(180deg);\n          }\n        }\n      }\n    }\n\n    /* Chrome, placement and the portal come from the Popover this renders inside.\n       What is left is the clipping that keeps the first and last row inside the\n       panel's rounded corners. */\n    &-list-anim {\n      overflow: hidden;\n      border-radius: inherit;\n\n      &-wider {\n        width: max-content !important;\n      }\n    }\n\n    &-list {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow-y: auto;\n      max-height: 10em;\n      list-style-type: none;\n\n      &-item {\n        border: none;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n        background-color: var(--background-modal);\n        padding: 0.5em;\n        text-align: left;\n        border-radius: 0;\n        transition: background-color 0.3s;\n\n        &-active {\n          background-color: var(--background-accent);\n        }\n\n        &-selected {\n          font-weight: 500;\n        }\n\n        &:focus {\n          outline: none;\n        }\n\n        &:hover {\n          background-color: var(--background-accent);\n        }\n\n        &-disabled {\n          background-color: var(--disabled-input-color);\n          color: var(--disabled-font-color);\n          cursor: not-allowed;\n\n          &:hover {\n            background-color: var(--disabled-input-color);\n          }\n        }\n      }\n    }\n  }\n\n  &-fieldset {\n    position: absolute;\n    width: 100%;\n    margin: 0;\n    box-sizing: border-box;\n    border-radius: var(--dropdown-radius);\n    font-size: 0.8em;\n    inset: calc(var(--dropdown-notch-height) / -2) 0 0;\n    padding-left: 8px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--border-color);\n    pointer-events: none;\n    user-select: none;\n\n    &-legend {\n      display: block;\n\n      /* Not taken from the text: an empty span gets no line box, which raised a label-less\n         field's border half a notch. */\n      height: var(--dropdown-notch-height);\n      max-width: 0;\n      transition: max-width 0.2s;\n      white-space: nowrap;\n      padding: 0;\n\n      &-active {\n        max-width: 300px;\n      }\n\n      span {\n        line-height: var(--dropdown-notch-height);\n        padding: 0 5px;\n        opacity: 0;\n      }\n\n      /* With an empty label the span would still reserve its padding, leaving a gap in\n         the fieldset's top border. Collapse it so the notch closes when there's no label. */\n      span:empty {\n        padding: 0;\n      }\n    }\n  }\n\n  &-placeholder {\n    position: absolute;\n    top: 50%;\n    left: 7px;\n    transform: translateY(-50%);\n    transition: all 0.2s;\n    opacity: 0;\n\n    &-shown {\n      animation: 0.2s fadeIn 0.3s forwards;\n    }\n  }\n\n  &-matLabel {\n    position: absolute;\n    transition: all 0.3s;\n    left: 7px;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 1em;\n    color: var(--input-label-resting-color, var(--text-light));\n    pointer-events: none;\n    user-select: none;\n\n    &-floating {\n      inset: 0 0 auto 14px;\n      font-size: 0.8em;\n      color: var(--input-label-floating-color, var(--text-color));\n      transform: translateY(-50%);\n    }\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n\n    to {\n      opacity: 0.5;\n    }\n  }\n\n  &-border {\n    &-focused {\n      outline-color: var(--focus-border-color, var(--primary-color));\n      border-color: var(--focus-border-color, var(--primary-color));\n    }\n\n    &-plain:not(&-focused) {\n      border-color: transparent;\n      outline-color: transparent;\n    }\n\n    &-invalid {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n\n    &-invalid:hover {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n\n    &-error {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n  }\n}\n\n/* The list brings its own padding and its rows reach the panel edge. */\n.dropdownPanel {\n  padding: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dropdown-matLabel,\n  .dropdown-placeholder,\n  .dropdown-input-button-icon-arrow {\n    transition: none;\n  }\n}\n\n/* The sentinel the infinite-scroll hook watches, and the spinner shown while a page loads.\n   These came with `InfiniteBlock` when the list rendered through it; the list is its own scroll\n   container now, so they live here. */\n.dropdown-sentinel {\n  height: 1px;\n}\n\n.dropdown-load-more {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 0;\n\n  &-spinner {\n    width: 32px;\n    height: 32px;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"dropdown.module.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.module.pcss"],"sourcesContent":[".required-mark {\n  padding: 0 0 0 4px;\n  color: var(--required-mark-color, var(--error-color));\n}\n\n.dropdown {\n  position: relative;\n\n  /* Nothing inside gives the root a width, so as a flex or grid item it collapsed to the chevron\n     and drew its border through the label. `input` and `multiSelect` say the same. */\n  width: 100%;\n\n  --dropdown-notch-height: 1.75em;\n\n  /* See input.module.pcss for why this exists: the visible border lives on `-input`/`-fieldset`\n     below, not this root, so a wrapping ButtonGroup's --group-radius-* custom properties (which\n     inherit through any nesting depth, unlike border-radius itself) are what let this component\n     flatten correctly when it sits inside a ButtonGroup. */\n  --dropdown-radius: var(--group-radius-tl, var(--default-border-radius))\n    var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n    var(--group-radius-bl, var(--default-border-radius));\n\n  &-label {\n    display: flex;\n\n    &-column {\n      flex-direction: column;\n    }\n\n    &-text {\n      white-space: nowrap;\n      margin-right: 5px;\n      margin-bottom: 5px;\n      display: flex;\n      align-items: center;\n      color: var(--text-color);\n      font-size: 12px;\n      position: absolute;\n      top: -15px;\n    }\n  }\n\n  &-input {\n    position: relative;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    background-color: var(--input-background);\n    border-radius: var(--dropdown-radius);\n\n    &-plain {\n      background: transparent;\n    }\n\n    &-readOnly {\n      cursor: default;\n    }\n\n    &:focus-within {\n      outline: none;\n    }\n\n    &-button {\n      padding: 8px 20% 6px 7.5px !important;\n      background-color: transparent;\n      border: none;\n      font-family: inherit;\n      font-size: inherit;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      text-align: left;\n      width: 100%;\n      line-height: 1.25;\n      color: var(--text-color);\n\n      &-disabled {\n        background-color: var(--disabled-input-color);\n        color: var(--disabled-font-color);\n        border-radius: var(--dropdown-radius);\n      }\n\n      &-readOnly {\n        cursor: default;\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &-icon {\n        float: right;\n        background-color: transparent;\n        border: none;\n        position: absolute;\n        outline: none;\n        right: var(--spacing-s);\n        top: 50%;\n        transform: translateY(-50%);\n        color: var(--text-color);\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n\n        &-arrow {\n          transition: transform 0.25s;\n          pointer-events: none;\n\n          &-open {\n            transform: rotate(180deg);\n          }\n        }\n      }\n    }\n\n    /* Chrome, placement and the portal come from the Popover this renders inside.\n       What is left is the clipping that keeps the first and last row inside the\n       panel's rounded corners. */\n    &-list-anim {\n      overflow: hidden;\n      border-radius: inherit;\n\n      &-wider {\n        width: max-content !important;\n      }\n    }\n\n    &-list {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow-y: auto;\n      max-height: 10em;\n      list-style-type: none;\n\n      &-item {\n        border: none;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n        background-color: var(--background-modal);\n        padding: 0.5em;\n        text-align: left;\n        border-radius: 0;\n        transition: background-color 0.3s;\n\n        &-active {\n          background-color: var(--background-accent);\n        }\n\n        &-selected {\n          font-weight: 500;\n        }\n\n        &:focus {\n          outline: none;\n        }\n\n        &:hover {\n          background-color: var(--background-accent);\n        }\n\n        &-disabled {\n          background-color: var(--disabled-input-color);\n          color: var(--disabled-font-color);\n          cursor: not-allowed;\n\n          &:hover {\n            background-color: var(--disabled-input-color);\n          }\n        }\n      }\n    }\n  }\n\n  &-fieldset {\n    position: absolute;\n    width: 100%;\n    margin: 0;\n    box-sizing: border-box;\n    border-radius: var(--dropdown-radius);\n    font-size: 0.8em;\n    inset: calc(var(--dropdown-notch-height) / -2) 0 0;\n    padding-left: 8px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--border-color);\n    pointer-events: none;\n    user-select: none;\n\n    &-legend {\n      display: block;\n\n      /* Not taken from the text: an empty span gets no line box, which raised a label-less\n         field's border half a notch. */\n      height: var(--dropdown-notch-height);\n      max-width: 0;\n      transition: max-width 0.2s;\n      white-space: nowrap;\n      padding: 0;\n\n      &-active {\n        max-width: 300px;\n      }\n\n      span {\n        line-height: var(--dropdown-notch-height);\n        padding: 0 5px;\n        opacity: 0;\n      }\n\n      /* With an empty label the span would still reserve its padding, leaving a gap in\n         the fieldset's top border. Collapse it so the notch closes when there's no label. */\n      span:empty {\n        padding: 0;\n      }\n    }\n  }\n\n  &-placeholder {\n    position: absolute;\n    top: 50%;\n    left: 7px;\n    transform: translateY(-50%);\n    transition: all 0.2s;\n    opacity: 0;\n\n    &-shown {\n      animation: 0.2s fadeIn 0.3s forwards;\n    }\n  }\n\n  &-matLabel {\n    position: absolute;\n    transition: all 0.3s;\n    left: 7px;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 1em;\n    color: var(--input-label-resting-color, var(--text-light));\n    pointer-events: none;\n    user-select: none;\n\n    &-floating {\n      inset: 0 0 auto 14px;\n      font-size: 0.8em;\n      color: var(--input-label-floating-color, var(--text-color));\n      transform: translateY(-50%);\n    }\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n\n    to {\n      opacity: 0.5;\n    }\n  }\n\n  &-border {\n    &-focused {\n      outline-color: var(--focus-border-color, var(--primary-color));\n      border-color: var(--focus-border-color, var(--primary-color));\n    }\n\n    &-plain:not(&-focused) {\n      border-color: transparent;\n      outline-color: transparent;\n    }\n\n    &-invalid {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n\n    &-invalid:hover {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n\n    &-error {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n  }\n}\n\n/* The list brings its own padding and its rows reach the panel edge. */\n.dropdownPanel {\n  padding: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dropdown-matLabel,\n  .dropdown-placeholder,\n  .dropdown-input-button-icon-arrow {\n    transition: none;\n  }\n}\n\n/* The sentinel the infinite-scroll hook watches, and the spinner shown while a page loads.\n   These came with `InfiniteBlock` when the list rendered through it; the list is its own scroll\n   container now, so they live here. */\n.dropdown-sentinel {\n  height: 1px;\n}\n\n.dropdown-load-more {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 0;\n}\n"],"mappings":""}

package/dist/esm/common/errorBoundary/errorBoundary.mjs

@@ -1,4 +1,4 @@
-"use client";import e from"../accordion/accordion.mjs";import t from"../button/button.mjs";import{showToast as n}from"../toast/toastService.mjs";import r from"../copyButton/copyButton.mjs";import i from"./errorBoundary.module.mjs";import a from"react";import o from"classnames";import{FontAwesomeIcon as s}from"@fortawesome/react-fontawesome";import{faArrowRotateRight as c,faTriangleExclamation as l}from"@fortawesome/free-solid-svg-icons";import{jsx as u,jsxs as d}from"react/jsx-runtime";var f={stackTrace:`Stack trace`,copy:`Copy`,copied:`Copied`,reset:`Try again`,copySuccessToast:`Stack trace copied to clipboard`,copyErrorToast:`Could not copy stack trace`};function p(e,t){let n=[e.stack??`${e.name}: ${e.message}`];return t?.componentStack&&n.push(`Component stack:${t.componentStack}`),n.join(`
+"use client";import{ThemeColor as e}from"../themeProvider/color.types.mjs";import t from"../accordion/accordion.mjs";import n from"../button/button.mjs";import{showToast as r}from"../toast/toastService.mjs";import i from"../copyButton/copyButton.mjs";import a from"./errorBoundary.module.mjs";import o from"react";import s from"classnames";import{FontAwesomeIcon as c}from"@fortawesome/react-fontawesome";import{faArrowRotateRight as l,faTriangleExclamation as u}from"@fortawesome/free-solid-svg-icons";import{jsx as d,jsxs as f}from"react/jsx-runtime";var p={stackTrace:`Stack trace`,copy:`Copy`,copied:`Copied`,reset:`Try again`,copySuccessToast:`Stack trace copied to clipboard`,copyErrorToast:`Could not copy stack trace`};function m(e,t){let n=[e.stack??`${e.name}: ${e.message}`];return t?.componentStack&&n.push(`Component stack:${t.componentStack}`),n.join(`
 
-`)}var m=class extends a.Component{constructor(...e){super(...e),this.state={error:null,errorInfo:null},this.reset=()=>{this.setState({error:null,errorInfo:null}),this.props.onReset?.()}}static getDerivedStateFromError(e){return{error:e}}componentDidCatch(e,t){this.setState({errorInfo:t}),this.props.onError?.(e,t)}componentDidUpdate(e){if(!this.state.error)return;let t=e.resetKeys??[],n=this.props.resetKeys??[];(n.length!==t.length||n.some((e,n)=>e!==t[n]))&&this.reset()}render(){let{error:a,errorInfo:m}=this.state,{children:h=null,title:g=`Something went wrong`,description:_,labels:v,fallback:y,hideStack:b=!1,className:x,style:S,classNames:C,styles:w,onError:T,onReset:E,resetKeys:D,role:O=`alert`,...k}=this.props;if(!a)return h;let A={...f,...v};return y?typeof y==`function`?y({error:a,errorInfo:m,resetErrorBoundary:this.reset}):y:d(`div`,{...k,role:O,className:o(i.errorBoundary,x,C?.root),style:{...S,...w?.root},children:[d(`div`,{className:o(i.errorBoundaryHeader,C?.header),style:w?.header,children:[u(`div`,{className:o(i.errorBoundaryBadge,C?.badge),style:w?.badge,children:u(s,{icon:l,className:o(i.errorBoundaryIcon,C?.icon),style:w?.icon})}),u(`div`,{className:o(i.errorBoundaryTitle,C?.title),style:w?.title,children:g}),u(`div`,{className:o(i.errorBoundaryDescription,C?.description),style:w?.description,children:_??a.message})]}),!b&&d(e,{title:A.stackTrace,className:o(i.errorBoundaryStack,C?.stack),style:w?.stack,children:[d(`div`,{className:o(i.errorBoundaryStackHeader,C?.stackHeader),style:w?.stackHeader,children:[u(`span`,{className:o(i.errorBoundaryStackLabel,C?.stackLabel),style:w?.stackLabel,children:a.name||`Error`}),u(r,{value:p(a,m),labels:{copy:A.copy,copied:A.copied},onCopy:()=>n(A.copySuccessToast,{type:`success`}),onError:()=>n(A.copyErrorToast,{type:`error`}),className:o(i.errorBoundaryCopyButton,C?.copyButton),style:w?.copyButton})]}),u(`pre`,{className:o(i.errorBoundaryStackTrace,C?.stackTrace),style:w?.stackTrace,children:p(a,m)})]}),u(`div`,{className:o(i.errorBoundaryActions,C?.actions),style:w?.actions,children:u(t,{onClick:this.reset,icon:c,className:o(i.errorBoundaryResetButton,C?.resetButton),style:w?.resetButton,children:A.reset})})]})}};export{m as default};
+`)}var h=class extends o.Component{constructor(...e){super(...e),this.state={error:null,errorInfo:null},this.reset=()=>{this.setState({error:null,errorInfo:null}),this.props.onReset?.()}}static getDerivedStateFromError(e){return{error:e}}componentDidCatch(e,t){this.setState({errorInfo:t}),this.props.onError?.(e,t)}componentDidUpdate(e){if(!this.state.error)return;let t=e.resetKeys??[],n=this.props.resetKeys??[];(n.length!==t.length||n.some((e,n)=>e!==t[n]))&&this.reset()}render(){let{error:o,errorInfo:h}=this.state,{children:g=null,title:_=`Something went wrong`,description:v,labels:y,fallback:b,hideStack:x=!1,className:S,style:C,classNames:w,styles:T,onError:E,onReset:D,resetKeys:O,role:k=`alert`,...A}=this.props;if(!o)return g;let j={...p,...y};return b?typeof b==`function`?b({error:o,errorInfo:h,resetErrorBoundary:this.reset}):b:f(`div`,{...A,role:k,className:s(a.errorBoundary,S,w?.root),style:{...C,...T?.root},children:[f(`div`,{className:s(a.errorBoundaryHeader,w?.header),style:T?.header,children:[d(`div`,{className:s(a.errorBoundaryBadge,w?.badge),style:T?.badge,children:d(c,{icon:u,className:s(a.errorBoundaryIcon,w?.icon),style:T?.icon})}),d(`div`,{className:s(a.errorBoundaryTitle,w?.title),style:T?.title,children:_}),d(`div`,{className:s(a.errorBoundaryDescription,w?.description),style:T?.description,children:v??o.message})]}),!x&&f(t,{title:j.stackTrace,className:s(a.errorBoundaryStack,w?.stack),style:T?.stack,children:[f(`div`,{className:s(a.errorBoundaryStackHeader,w?.stackHeader),style:T?.stackHeader,children:[d(`span`,{className:s(a.errorBoundaryStackLabel,w?.stackLabel),style:T?.stackLabel,children:o.name||`Error`}),d(i,{value:m(o,h),labels:{copy:j.copy,copied:j.copied},onCopy:()=>r(j.copySuccessToast,{color:e.Success}),onError:()=>r(j.copyErrorToast,{color:e.Error}),className:s(a.errorBoundaryCopyButton,w?.copyButton),style:T?.copyButton})]}),d(`pre`,{className:s(a.errorBoundaryStackTrace,w?.stackTrace),style:T?.stackTrace,children:m(o,h)})]}),d(`div`,{className:s(a.errorBoundaryActions,w?.actions),style:T?.actions,children:d(n,{onClick:this.reset,icon:l,className:s(a.errorBoundaryResetButton,w?.resetButton),style:T?.resetButton,children:j.reset})})]})}};export{h as default};
 //# sourceMappingURL=errorBoundary.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"errorBoundary.mjs","names":[],"sources":["../../../../package/common/errorBoundary/errorBoundary.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faTriangleExclamation, faArrowRotateRight } from '@fortawesome/free-solid-svg-icons';\n\nimport Button from '../button';\nimport Accordion from '../accordion';\nimport { showToast } from '../toast';\nimport CopyButton from '../copyButton';\nimport type { ErrorBoundaryLabels, ErrorBoundaryProps, ErrorBoundaryState } from './errorBoundary.types';\nimport styles from './errorBoundary.module.pcss';\n\nconst DEFAULT_LABELS: Required<ErrorBoundaryLabels> = {\n  stackTrace: 'Stack trace',\n  copy: 'Copy',\n  copied: 'Copied',\n  reset: 'Try again',\n  copySuccessToast: 'Stack trace copied to clipboard',\n  copyErrorToast: 'Could not copy stack trace',\n};\n\nfunction formatStackTrace(error: Error, errorInfo: React.ErrorInfo | null): string {\n  const parts = [error.stack ?? `${error.name}: ${error.message}`];\n  if (errorInfo?.componentStack) parts.push(`Component stack:${errorInfo.componentStack}`);\n  return parts.join('\\n\\n');\n}\n\nclass ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  state: ErrorBoundaryState = { error: null, errorInfo: null };\n\n  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {\n    return { error };\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {\n    this.setState({ errorInfo });\n    this.props.onError?.(error, errorInfo);\n  }\n\n  componentDidUpdate(prevProps: ErrorBoundaryProps): void {\n    if (!this.state.error) return;\n    const prevKeys = prevProps.resetKeys ?? [];\n    const nextKeys = this.props.resetKeys ?? [];\n    const changed = nextKeys.length !== prevKeys.length || nextKeys.some((key, i) => key !== prevKeys[i]);\n    if (changed) this.reset();\n  }\n\n  private reset = (): void => {\n    this.setState({ error: null, errorInfo: null });\n    this.props.onReset?.();\n  };\n\n  render(): React.ReactNode {\n    const { error, errorInfo } = this.state;\n    // onError/onReset/resetKeys are consumed elsewhere (getDerivedStateFromError,\n    // componentDidCatch, componentDidUpdate) and must not land on the root element via `rest`.\n    /* eslint-disable @typescript-eslint/no-unused-vars */\n    const {\n      children = null,\n      title = 'Something went wrong',\n      description,\n      labels: labelOverrides,\n      fallback,\n      hideStack = false,\n      className,\n      style,\n      classNames,\n      styles: slotStyles,\n      onError,\n      onReset,\n      resetKeys,\n      role = 'alert',\n      ...rest\n    } = this.props;\n\n    if (!error) return children;\n\n    const labels = { ...DEFAULT_LABELS, ...labelOverrides };\n\n    if (fallback) {\n      return typeof fallback === 'function' ? fallback({ error, errorInfo, resetErrorBoundary: this.reset }) : fallback;\n    }\n\n    return (\n      <div\n        {...rest}\n        role={role}\n        className={cx(styles.errorBoundary, className, classNames?.root)}\n        style={{ ...style, ...slotStyles?.root }}\n      >\n        <div className={cx(styles.errorBoundaryHeader, classNames?.header)} style={slotStyles?.header}>\n          <div className={cx(styles.errorBoundaryBadge, classNames?.badge)} style={slotStyles?.badge}>\n            <FontAwesomeIcon\n              icon={faTriangleExclamation}\n              className={cx(styles.errorBoundaryIcon, classNames?.icon)}\n              style={slotStyles?.icon as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n            />\n          </div>\n          <div className={cx(styles.errorBoundaryTitle, classNames?.title)} style={slotStyles?.title}>\n            {title}\n          </div>\n          <div className={cx(styles.errorBoundaryDescription, classNames?.description)} style={slotStyles?.description}>\n            {description ?? error.message}\n          </div>\n        </div>\n\n        {!hideStack && (\n          <Accordion\n            title={labels.stackTrace}\n            className={cx(styles.errorBoundaryStack, classNames?.stack)}\n            style={slotStyles?.stack}\n          >\n            <div\n              className={cx(styles.errorBoundaryStackHeader, classNames?.stackHeader)}\n              style={slotStyles?.stackHeader}\n            >\n              <span\n                className={cx(styles.errorBoundaryStackLabel, classNames?.stackLabel)}\n                style={slotStyles?.stackLabel}\n              >\n                {error.name || 'Error'}\n              </span>\n              <CopyButton\n                value={formatStackTrace(error, errorInfo)}\n                labels={{ copy: labels.copy, copied: labels.copied }}\n                onCopy={() => showToast(labels.copySuccessToast, { type: 'success' })}\n                onError={() => showToast(labels.copyErrorToast, { type: 'error' })}\n                className={cx(styles.errorBoundaryCopyButton, classNames?.copyButton)}\n                style={slotStyles?.copyButton}\n              />\n            </div>\n            <pre className={cx(styles.errorBoundaryStackTrace, classNames?.stackTrace)} style={slotStyles?.stackTrace}>\n              {formatStackTrace(error, errorInfo)}\n            </pre>\n          </Accordion>\n        )}\n\n        <div className={cx(styles.errorBoundaryActions, classNames?.actions)} style={slotStyles?.actions}>\n          <Button\n            onClick={this.reset}\n            icon={faArrowRotateRight}\n            className={cx(styles.errorBoundaryResetButton, classNames?.resetButton)}\n            style={slotStyles?.resetButton}\n          >\n            {labels.reset}\n          </Button>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default ErrorBoundary;\n"],"mappings":"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"}
+{"version":3,"file":"errorBoundary.mjs","names":[],"sources":["../../../../package/common/errorBoundary/errorBoundary.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faTriangleExclamation, faArrowRotateRight } from '@fortawesome/free-solid-svg-icons';\n\nimport Button from '../button';\nimport Accordion from '../accordion';\nimport { showToast } from '../toast';\nimport CopyButton from '../copyButton';\nimport type { ErrorBoundaryLabels, ErrorBoundaryProps, ErrorBoundaryState } from './errorBoundary.types';\nimport styles from './errorBoundary.module.pcss';\nimport { ThemeColor } from '../themeProvider/color.types';\n\nconst DEFAULT_LABELS: Required<ErrorBoundaryLabels> = {\n  stackTrace: 'Stack trace',\n  copy: 'Copy',\n  copied: 'Copied',\n  reset: 'Try again',\n  copySuccessToast: 'Stack trace copied to clipboard',\n  copyErrorToast: 'Could not copy stack trace',\n};\n\nfunction formatStackTrace(error: Error, errorInfo: React.ErrorInfo | null): string {\n  const parts = [error.stack ?? `${error.name}: ${error.message}`];\n  if (errorInfo?.componentStack) parts.push(`Component stack:${errorInfo.componentStack}`);\n  return parts.join('\\n\\n');\n}\n\nclass ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  state: ErrorBoundaryState = { error: null, errorInfo: null };\n\n  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {\n    return { error };\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {\n    this.setState({ errorInfo });\n    this.props.onError?.(error, errorInfo);\n  }\n\n  componentDidUpdate(prevProps: ErrorBoundaryProps): void {\n    if (!this.state.error) return;\n    const prevKeys = prevProps.resetKeys ?? [];\n    const nextKeys = this.props.resetKeys ?? [];\n    const changed = nextKeys.length !== prevKeys.length || nextKeys.some((key, i) => key !== prevKeys[i]);\n    if (changed) this.reset();\n  }\n\n  private reset = (): void => {\n    this.setState({ error: null, errorInfo: null });\n    this.props.onReset?.();\n  };\n\n  render(): React.ReactNode {\n    const { error, errorInfo } = this.state;\n    // onError/onReset/resetKeys are consumed elsewhere (getDerivedStateFromError,\n    // componentDidCatch, componentDidUpdate) and must not land on the root element via `rest`.\n    /* eslint-disable @typescript-eslint/no-unused-vars */\n    const {\n      children = null,\n      title = 'Something went wrong',\n      description,\n      labels: labelOverrides,\n      fallback,\n      hideStack = false,\n      className,\n      style,\n      classNames,\n      styles: slotStyles,\n      onError,\n      onReset,\n      resetKeys,\n      role = 'alert',\n      ...rest\n    } = this.props;\n\n    if (!error) return children;\n\n    const labels = { ...DEFAULT_LABELS, ...labelOverrides };\n\n    if (fallback) {\n      return typeof fallback === 'function' ? fallback({ error, errorInfo, resetErrorBoundary: this.reset }) : fallback;\n    }\n\n    return (\n      <div\n        {...rest}\n        role={role}\n        className={cx(styles.errorBoundary, className, classNames?.root)}\n        style={{ ...style, ...slotStyles?.root }}\n      >\n        <div className={cx(styles.errorBoundaryHeader, classNames?.header)} style={slotStyles?.header}>\n          <div className={cx(styles.errorBoundaryBadge, classNames?.badge)} style={slotStyles?.badge}>\n            <FontAwesomeIcon\n              icon={faTriangleExclamation}\n              className={cx(styles.errorBoundaryIcon, classNames?.icon)}\n              style={slotStyles?.icon as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n            />\n          </div>\n          <div className={cx(styles.errorBoundaryTitle, classNames?.title)} style={slotStyles?.title}>\n            {title}\n          </div>\n          <div className={cx(styles.errorBoundaryDescription, classNames?.description)} style={slotStyles?.description}>\n            {description ?? error.message}\n          </div>\n        </div>\n\n        {!hideStack && (\n          <Accordion\n            title={labels.stackTrace}\n            className={cx(styles.errorBoundaryStack, classNames?.stack)}\n            style={slotStyles?.stack}\n          >\n            <div\n              className={cx(styles.errorBoundaryStackHeader, classNames?.stackHeader)}\n              style={slotStyles?.stackHeader}\n            >\n              <span\n                className={cx(styles.errorBoundaryStackLabel, classNames?.stackLabel)}\n                style={slotStyles?.stackLabel}\n              >\n                {error.name || 'Error'}\n              </span>\n              <CopyButton\n                value={formatStackTrace(error, errorInfo)}\n                labels={{ copy: labels.copy, copied: labels.copied }}\n                onCopy={() => showToast(labels.copySuccessToast, { color: ThemeColor.Success })}\n                onError={() => showToast(labels.copyErrorToast, { color: ThemeColor.Error })}\n                className={cx(styles.errorBoundaryCopyButton, classNames?.copyButton)}\n                style={slotStyles?.copyButton}\n              />\n            </div>\n            <pre className={cx(styles.errorBoundaryStackTrace, classNames?.stackTrace)} style={slotStyles?.stackTrace}>\n              {formatStackTrace(error, errorInfo)}\n            </pre>\n          </Accordion>\n        )}\n\n        <div className={cx(styles.errorBoundaryActions, classNames?.actions)} style={slotStyles?.actions}>\n          <Button\n            onClick={this.reset}\n            icon={faArrowRotateRight}\n            className={cx(styles.errorBoundaryResetButton, classNames?.resetButton)}\n            style={slotStyles?.resetButton}\n          >\n            {labels.reset}\n          </Button>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default ErrorBoundary;\n"],"mappings":"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"}

package/dist/esm/common/fab/components/fabBase/fabBase.mjs

@@ -1,2 +1,2 @@
-"use client";import{ButtonSize as e,ButtonStyleType as t}from"../../../button/button.types.mjs";import n from"../../../button/button.mjs";import r from"./fabBase.module.mjs";import i from"classnames";import{jsx as a}from"react/jsx-runtime";var o={default:null,mini:r.fabSizeMini};function s({style:s,children:c=null,size:l=`default`,className:u=``,styleType:d=t.Primary,onClick:f=()=>{}}){return a(n,{styleType:d,size:e.Icon,className:i(r.fab,o[l],u),style:s,onClick:f,children:a(`div`,{className:r.fabContentContainer,children:a(`div`,{className:r.fabContent,children:c})})})}export{s as default};
+"use client";import{ThemeColor as e}from"../../../themeProvider/color.types.mjs";import{ButtonSize as t,ButtonStyleType as n}from"../../../button/button.types.mjs";import r from"../../../button/button.mjs";import i from"./fabBase.module.mjs";import a from"classnames";import{jsx as o}from"react/jsx-runtime";var s={default:null,mini:i.fabSizeMini};function c({style:c,children:l=null,size:u=`default`,className:d=``,styleType:f=n.Filled,color:p=e.Primary,onClick:m=()=>{}}){return o(r,{styleType:f,color:p,size:t.Icon,className:a(i.fab,s[u],d),style:c,onClick:m,children:o(`div`,{className:i.fabContentContainer,children:o(`div`,{className:i.fabContent,children:l})})})}export{c as default};
 //# sourceMappingURL=fabBase.mjs.map

package/dist/esm/common/fab/components/fabBase/fabBase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fabBase.mjs","names":[],"sources":["../../../../../../package/common/fab/components/fabBase/fabBase.tsx"],"sourcesContent":["import cx from 'classnames';\n\nimport Button from 'components/common/button';\nimport { ButtonSize, ButtonStyleType } from 'components/common/button/button.types';\nimport type { FabBaseProps, FabBaseSize } from './fabBase.types';\n\nimport styles from './fabBase.module.pcss';\n\nconst sizeClass: Record<FabBaseSize, string | null> = {\n  default: null,\n  mini: styles.fabSizeMini,\n};\n\nfunction FabBase({\n  style,\n  children = null,\n  size = 'default',\n  className = '',\n  styleType = ButtonStyleType.Primary,\n  onClick = () => {},\n}: FabBaseProps) {\n  return (\n    /* Icon is the only size that adds no padding. Any other one pushes past the width set\n       below through Button's `min-width: min-content`, and the circle becomes an ellipse. */\n    <Button\n      styleType={styleType}\n      size={ButtonSize.Icon}\n      className={cx(styles.fab, sizeClass[size], className)}\n      style={style}\n      onClick={onClick}\n    >\n      <div className={styles.fabContentContainer}>\n        <div className={styles.fabContent}>{children}</div>\n      </div>\n    </Button>\n  );\n}\n\nexport default FabBase;\n"],"mappings":"gPAQA,IAAM,EAAgD,CACpD,QAAS,KACT,KAAM,EAAO,WACf,EAEA,SAAS,EAAQ,CACf,QACA,WAAW,KACX,OAAO,UACP,YAAY,GACZ,YAAY,EAAgB,QAC5B,cAAgB,CAAC,GACF,CACf,OAGE,EAAC,EAAD,CACa,YACX,KAAM,EAAW,KACjB,UAAW,EAAG,EAAO,IAAK,EAAU,GAAO,CAAS,EAC7C,QACE,UAET,SAAA,EAAC,MAAD,CAAK,UAAW,EAAO,oBACrB,SAAA,EAAC,MAAD,CAAK,UAAW,EAAO,WAAa,UAAc,CAAA,CAC/C,CAAA,CACC,CAAA,CAEZ"}
+{"version":3,"file":"fabBase.mjs","names":[],"sources":["../../../../../../package/common/fab/components/fabBase/fabBase.tsx"],"sourcesContent":["import cx from 'classnames';\n\nimport Button from 'components/common/button';\nimport { ButtonSize, ButtonStyleType } from 'components/common/button/button.types';\nimport type { FabBaseProps, FabBaseSize } from './fabBase.types';\n\nimport styles from './fabBase.module.pcss';\nimport { ThemeColor } from '../../../themeProvider/color.types';\n\nconst sizeClass: Record<FabBaseSize, string | null> = {\n  default: null,\n  mini: styles.fabSizeMini,\n};\n\nfunction FabBase({\n  style,\n  children = null,\n  size = 'default',\n  className = '',\n  styleType = ButtonStyleType.Filled,\n  color = ThemeColor.Primary,\n  onClick = () => {},\n}: FabBaseProps) {\n  return (\n    /* Icon is the only size that adds no padding. Any other one pushes past the width set\n       below through Button's `min-width: min-content`, and the circle becomes an ellipse. */\n    <Button\n      styleType={styleType}\n      color={color}\n      size={ButtonSize.Icon}\n      className={cx(styles.fab, sizeClass[size], className)}\n      style={style}\n      onClick={onClick}\n    >\n      <div className={styles.fabContentContainer}>\n        <div className={styles.fabContent}>{children}</div>\n      </div>\n    </Button>\n  );\n}\n\nexport default FabBase;\n"],"mappings":"oTASA,IAAM,EAAgD,CACpD,QAAS,KACT,KAAM,EAAO,WACf,EAEA,SAAS,EAAQ,CACf,QACA,WAAW,KACX,OAAO,UACP,YAAY,GACZ,YAAY,EAAgB,OAC5B,QAAQ,EAAW,QACnB,cAAgB,CAAC,GACF,CACf,OAGE,EAAC,EAAD,CACa,YACJ,QACP,KAAM,EAAW,KACjB,UAAW,EAAG,EAAO,IAAK,EAAU,GAAO,CAAS,EAC7C,QACE,UAET,SAAA,EAAC,MAAD,CAAK,UAAW,EAAO,oBACrB,SAAA,EAAC,MAAD,CAAK,UAAW,EAAO,WAAa,UAAc,CAAA,CAC/C,CAAA,CACC,CAAA,CAEZ"}

package/dist/esm/common/fab/fab.mjs

@@ -1,2 +1,2 @@
-"use client";import{ButtonStyleType as e}from"../button/button.types.mjs";import{renderIcon as t}from"../utils/renderIcon.mjs";import n from"./components/fabBase/fabBase.mjs";import r from"./fab.module.mjs";import{useState as i}from"react";import a from"classnames";import{FontAwesomeIcon as o}from"@fortawesome/react-fontawesome";import{faPlus as s}from"@fortawesome/free-solid-svg-icons";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u({children:u=null,size:d=`default`,menuEntries:f=[],onMenuEntryClicked:p=()=>{},onClick:m=()=>{},closeMenuOnEntryClicked:h=!0,className:g,style:_,classNames:v,styles:y,...b}){let[x,S]=i(!1);function C(){f.length>0&&S(e=>!e),m()}function w(e,t){e.stopPropagation(),h&&S(!1),p(t)}return l(`div`,{...b,className:a(r.fabContainer,g,v?.root),style:{..._,...y?.root},children:[c(`div`,{className:a(r.fabMenuBackdrop,x&&r.fabMenuBackdropOpen,v?.backdrop),style:y?.backdrop,onClick:e=>{e.stopPropagation(),S(!1)}}),c(`div`,{onClick:e=>e.stopPropagation(),children:c(n,{className:a(r.fab,v?.button),style:y?.button,size:d,onClick:C,children:l(`div`,{className:a(r.fabIcon,x&&r.fabIconMenuOpen,v?.icon),style:y?.icon,children:[c(`div`,{className:a(r.fabIconContent,!x&&r.fabIconContentShown),children:u}),c(`div`,{className:a(r.fabIconContent,x&&r.fabIconContentShown),children:c(o,{icon:s})})]})})}),c(`div`,{className:a(r.fabMenu,v?.menu),style:y?.menu,children:f.map(({id:i,label:o,icon:s})=>l(`div`,{className:a(r.fabMenuEntry,x&&r.fabMenuEntryShown,v?.menuEntry),style:y?.menuEntry,onClick:e=>w(e,i),children:[o&&c(`div`,{className:r.fabMenuEntryLabelContainer,children:c(`div`,{className:a(r.fabMenuEntryLabel,v?.menuEntryLabel),style:y?.menuEntryLabel,children:o})}),c(n,{size:`mini`,styleType:e.Default,children:t(s)})]},i))})]})}export{u as default};
+"use client";import{ThemeColor as e}from"../themeProvider/color.types.mjs";import{ButtonStyleType as t}from"../button/button.types.mjs";import{renderIcon as n}from"../utils/renderIcon.mjs";import r from"./components/fabBase/fabBase.mjs";import i from"./fab.module.mjs";import{useState as a}from"react";import o from"classnames";import{FontAwesomeIcon as s}from"@fortawesome/react-fontawesome";import{faPlus as c}from"@fortawesome/free-solid-svg-icons";import{jsx as l,jsxs as u}from"react/jsx-runtime";function d({children:d=null,size:f=`default`,menuEntries:p=[],onMenuEntryClicked:m=()=>{},onClick:h=()=>{},closeMenuOnEntryClicked:g=!0,className:_,style:v,classNames:y,styles:b,...x}){let[S,C]=a(!1);function w(){p.length>0&&C(e=>!e),h()}function T(e,t){e.stopPropagation(),g&&C(!1),m(t)}return u(`div`,{...x,className:o(i.fabContainer,_,y?.root),style:{...v,...b?.root},children:[l(`div`,{className:o(i.fabMenuBackdrop,S&&i.fabMenuBackdropOpen,y?.backdrop),style:b?.backdrop,onClick:e=>{e.stopPropagation(),C(!1)}}),l(`div`,{onClick:e=>e.stopPropagation(),children:l(r,{className:o(i.fab,y?.button),style:b?.button,size:f,onClick:w,children:u(`div`,{className:o(i.fabIcon,S&&i.fabIconMenuOpen,y?.icon),style:b?.icon,children:[l(`div`,{className:o(i.fabIconContent,!S&&i.fabIconContentShown),children:d}),l(`div`,{className:o(i.fabIconContent,S&&i.fabIconContentShown),children:l(s,{icon:c})})]})})}),l(`div`,{className:o(i.fabMenu,y?.menu),style:b?.menu,children:p.map(({id:a,label:s,icon:c})=>u(`div`,{className:o(i.fabMenuEntry,S&&i.fabMenuEntryShown,y?.menuEntry),style:b?.menuEntry,onClick:e=>T(e,a),children:[s&&l(`div`,{className:i.fabMenuEntryLabelContainer,children:l(`div`,{className:o(i.fabMenuEntryLabel,y?.menuEntryLabel),style:b?.menuEntryLabel,children:s})}),l(r,{size:`mini`,styleType:t.Plain,color:e.Neutral,children:n(c)})]},a))})]})}export{d as default};
 //# sourceMappingURL=fab.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"fab.mjs","names":[],"sources":["../../../../package/common/fab/fab.tsx"],"sourcesContent":["import { useState } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPlus as addIcon } from '@fortawesome/free-solid-svg-icons';\nimport { ButtonStyleType } from '../button/button.types';\n\nimport FabBase from './components/fabBase';\nimport type { FabProps } from './fab.types';\n\nimport styles from './fab.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\n\nfunction Fab({\n  children = null,\n  size = 'default',\n  menuEntries = [],\n  onMenuEntryClicked = () => {},\n  onClick = () => {},\n  closeMenuOnEntryClicked = true,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: FabProps) {\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  function handleFabClick() {\n    if (menuEntries.length > 0) setMenuOpen((prev) => !prev);\n    onClick();\n  }\n\n  function handleEntryClick(e: React.MouseEvent, id: string) {\n    e.stopPropagation();\n    if (closeMenuOnEntryClicked) setMenuOpen(false);\n    onMenuEntryClicked(id);\n  }\n\n  return (\n    <div\n      {...rest}\n      className={cx(styles.fabContainer, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      <div\n        className={cx(styles.fabMenuBackdrop, menuOpen && styles.fabMenuBackdropOpen, classNames?.backdrop)}\n        style={slotStyles?.backdrop}\n        onClick={(e) => {\n          e.stopPropagation();\n          setMenuOpen(false);\n        }}\n      />\n      <div onClick={(e) => e.stopPropagation()}>\n        <FabBase\n          className={cx(styles.fab, classNames?.button)}\n          style={slotStyles?.button}\n          size={size}\n          onClick={handleFabClick}\n        >\n          <div\n            className={cx(styles.fabIcon, menuOpen && styles.fabIconMenuOpen, classNames?.icon)}\n            style={slotStyles?.icon}\n          >\n            <div className={cx(styles.fabIconContent, !menuOpen && styles.fabIconContentShown)}>{children}</div>\n            <div className={cx(styles.fabIconContent, menuOpen && styles.fabIconContentShown)}>\n              <FontAwesomeIcon icon={addIcon} />\n            </div>\n          </div>\n        </FabBase>\n      </div>\n      <div className={cx(styles.fabMenu, classNames?.menu)} style={slotStyles?.menu}>\n        {menuEntries.map(({ id, label, icon }) => (\n          <div\n            key={id}\n            className={cx(styles.fabMenuEntry, menuOpen && styles.fabMenuEntryShown, classNames?.menuEntry)}\n            style={slotStyles?.menuEntry}\n            onClick={(e) => handleEntryClick(e, id)}\n          >\n            {label && (\n              <div className={styles.fabMenuEntryLabelContainer}>\n                <div\n                  className={cx(styles.fabMenuEntryLabel, classNames?.menuEntryLabel)}\n                  style={slotStyles?.menuEntryLabel}\n                >\n                  {label}\n                </div>\n              </div>\n            )}\n            <FabBase size='mini' styleType={ButtonStyleType.Default}>\n              {renderIcon(icon)}\n            </FabBase>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport default Fab;\n"],"mappings":"wbAYA,SAAS,EAAI,CACX,WAAW,KACX,OAAO,UACP,cAAc,CAAC,EACf,yBAA2B,CAAC,EAC5B,cAAgB,CAAC,EACjB,0BAA0B,GAC1B,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACQ,CACX,GAAM,CAAC,EAAU,GAAe,EAAS,EAAK,EAE9C,SAAS,GAAiB,CACpB,EAAY,OAAS,GAAG,EAAa,GAAS,CAAC,CAAI,EACvD,EAAQ,CACV,CAEA,SAAS,EAAiB,EAAqB,EAAY,CACzD,EAAE,gBAAgB,EACd,GAAyB,EAAY,EAAK,EAC9C,EAAmB,CAAE,CACvB,CAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,aAAc,EAAW,GAAY,IAAI,EAC9D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAHzC,SAAA,CAKE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,gBAAiB,GAAY,EAAO,oBAAqB,GAAY,QAAQ,EAClG,MAAO,GAAY,SACnB,QAAU,GAAM,CACd,EAAE,gBAAgB,EAClB,EAAY,EAAK,CACnB,CACD,CAAA,EACD,EAAC,MAAD,CAAK,QAAU,GAAM,EAAE,gBAAgB,EACrC,SAAA,EAAC,EAAD,CACE,UAAW,EAAG,EAAO,IAAK,GAAY,MAAM,EAC5C,MAAO,GAAY,OACb,OACN,QAAS,EAET,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,QAAS,GAAY,EAAO,gBAAiB,GAAY,IAAI,EAClF,MAAO,GAAY,KAFrB,SAAA,CAIE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,CAAC,GAAY,EAAO,mBAAmB,EAAI,UAAc,CAAA,EACnG,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,GAAY,EAAO,mBAAmB,EAC9E,SAAA,EAAC,EAAD,CAAiB,KAAM,CAAU,CAAA,CAC9B,CAAA,CACF,GACE,CAAA,CACN,CAAA,EACL,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,QAAS,GAAY,IAAI,EAAG,MAAO,GAAY,KACtE,SAAA,EAAY,KAAK,CAAE,KAAI,QAAO,UAC7B,EAAC,MAAD,CAEE,UAAW,EAAG,EAAO,aAAc,GAAY,EAAO,kBAAmB,GAAY,SAAS,EAC9F,MAAO,GAAY,UACnB,QAAU,GAAM,EAAiB,EAAG,CAAE,EAJxC,SAAA,CAMG,GACC,EAAC,MAAD,CAAK,UAAW,EAAO,2BACrB,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,kBAAmB,GAAY,cAAc,EAClE,MAAO,GAAY,eAElB,SAAA,CACE,CAAA,CACF,CAAA,EAEP,EAAC,EAAD,CAAS,KAAK,OAAO,UAAW,EAAgB,QAC7C,SAAA,EAAW,CAAI,CACT,CAAA,CACN,CAlBE,EAAA,CAkBF,CACN,CACE,CAAA,CACF,GAET"}
+{"version":3,"file":"fab.mjs","names":[],"sources":["../../../../package/common/fab/fab.tsx"],"sourcesContent":["import { useState } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPlus as addIcon } from '@fortawesome/free-solid-svg-icons';\nimport { ButtonStyleType } from '../button/button.types';\n\nimport FabBase from './components/fabBase';\nimport type { FabProps } from './fab.types';\n\nimport styles from './fab.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\nimport { ThemeColor } from '../themeProvider/color.types';\n\nfunction Fab({\n  children = null,\n  size = 'default',\n  menuEntries = [],\n  onMenuEntryClicked = () => {},\n  onClick = () => {},\n  closeMenuOnEntryClicked = true,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: FabProps) {\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  function handleFabClick() {\n    if (menuEntries.length > 0) setMenuOpen((prev) => !prev);\n    onClick();\n  }\n\n  function handleEntryClick(e: React.MouseEvent, id: string) {\n    e.stopPropagation();\n    if (closeMenuOnEntryClicked) setMenuOpen(false);\n    onMenuEntryClicked(id);\n  }\n\n  return (\n    <div\n      {...rest}\n      className={cx(styles.fabContainer, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      <div\n        className={cx(styles.fabMenuBackdrop, menuOpen && styles.fabMenuBackdropOpen, classNames?.backdrop)}\n        style={slotStyles?.backdrop}\n        onClick={(e) => {\n          e.stopPropagation();\n          setMenuOpen(false);\n        }}\n      />\n      <div onClick={(e) => e.stopPropagation()}>\n        <FabBase\n          className={cx(styles.fab, classNames?.button)}\n          style={slotStyles?.button}\n          size={size}\n          onClick={handleFabClick}\n        >\n          <div\n            className={cx(styles.fabIcon, menuOpen && styles.fabIconMenuOpen, classNames?.icon)}\n            style={slotStyles?.icon}\n          >\n            <div className={cx(styles.fabIconContent, !menuOpen && styles.fabIconContentShown)}>{children}</div>\n            <div className={cx(styles.fabIconContent, menuOpen && styles.fabIconContentShown)}>\n              <FontAwesomeIcon icon={addIcon} />\n            </div>\n          </div>\n        </FabBase>\n      </div>\n      <div className={cx(styles.fabMenu, classNames?.menu)} style={slotStyles?.menu}>\n        {menuEntries.map(({ id, label, icon }) => (\n          <div\n            key={id}\n            className={cx(styles.fabMenuEntry, menuOpen && styles.fabMenuEntryShown, classNames?.menuEntry)}\n            style={slotStyles?.menuEntry}\n            onClick={(e) => handleEntryClick(e, id)}\n          >\n            {label && (\n              <div className={styles.fabMenuEntryLabelContainer}>\n                <div\n                  className={cx(styles.fabMenuEntryLabel, classNames?.menuEntryLabel)}\n                  style={slotStyles?.menuEntryLabel}\n                >\n                  {label}\n                </div>\n              </div>\n            )}\n            <FabBase size='mini' styleType={ButtonStyleType.Plain} color={ThemeColor.Neutral}>\n              {renderIcon(icon)}\n            </FabBase>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport default Fab;\n"],"mappings":"sfAaA,SAAS,EAAI,CACX,WAAW,KACX,OAAO,UACP,cAAc,CAAC,EACf,yBAA2B,CAAC,EAC5B,cAAgB,CAAC,EACjB,0BAA0B,GAC1B,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACQ,CACX,GAAM,CAAC,EAAU,GAAe,EAAS,EAAK,EAE9C,SAAS,GAAiB,CACpB,EAAY,OAAS,GAAG,EAAa,GAAS,CAAC,CAAI,EACvD,EAAQ,CACV,CAEA,SAAS,EAAiB,EAAqB,EAAY,CACzD,EAAE,gBAAgB,EACd,GAAyB,EAAY,EAAK,EAC9C,EAAmB,CAAE,CACvB,CAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,aAAc,EAAW,GAAY,IAAI,EAC9D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAHzC,SAAA,CAKE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,gBAAiB,GAAY,EAAO,oBAAqB,GAAY,QAAQ,EAClG,MAAO,GAAY,SACnB,QAAU,GAAM,CACd,EAAE,gBAAgB,EAClB,EAAY,EAAK,CACnB,CACD,CAAA,EACD,EAAC,MAAD,CAAK,QAAU,GAAM,EAAE,gBAAgB,EACrC,SAAA,EAAC,EAAD,CACE,UAAW,EAAG,EAAO,IAAK,GAAY,MAAM,EAC5C,MAAO,GAAY,OACb,OACN,QAAS,EAET,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,QAAS,GAAY,EAAO,gBAAiB,GAAY,IAAI,EAClF,MAAO,GAAY,KAFrB,SAAA,CAIE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,CAAC,GAAY,EAAO,mBAAmB,EAAI,UAAc,CAAA,EACnG,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,GAAY,EAAO,mBAAmB,EAC9E,SAAA,EAAC,EAAD,CAAiB,KAAM,CAAU,CAAA,CAC9B,CAAA,CACF,GACE,CAAA,CACN,CAAA,EACL,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,QAAS,GAAY,IAAI,EAAG,MAAO,GAAY,KACtE,SAAA,EAAY,KAAK,CAAE,KAAI,QAAO,UAC7B,EAAC,MAAD,CAEE,UAAW,EAAG,EAAO,aAAc,GAAY,EAAO,kBAAmB,GAAY,SAAS,EAC9F,MAAO,GAAY,UACnB,QAAU,GAAM,EAAiB,EAAG,CAAE,EAJxC,SAAA,CAMG,GACC,EAAC,MAAD,CAAK,UAAW,EAAO,2BACrB,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,kBAAmB,GAAY,cAAc,EAClE,MAAO,GAAY,eAElB,SAAA,CACE,CAAA,CACF,CAAA,EAEP,EAAC,EAAD,CAAS,KAAK,OAAO,UAAW,EAAgB,MAAO,MAAO,EAAW,QACtE,SAAA,EAAW,CAAI,CACT,CAAA,CACN,CAlBE,EAAA,CAkBF,CACN,CACE,CAAA,CACF,GAET"}

package/dist/esm/common/flip/flip.mjs

@@ -1,2 +1,2 @@
-"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{isSelfActivation as t}from"../utils/activationKey.mjs";import n from"./flip.module.mjs";import{useEffect as r,useImperativeHandle as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u(){return typeof process<`u`&&!1}function d(){return typeof window<`u`&&window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches===!0}function f(f){let{ref:p,front:m,back:h,flipped:g,defaultFlipped:_=!1,flipOnClick:v=!1,flipAxis:y=`y`,reverse:b=!1,flipDuration:x=600,perspective:S=800,disabled:C=!1,onFlip:w,onFlipEnd:T,className:E,style:D,classNames:O,styles:k,...A}=e(`Flip`,f),j=g!==void 0,[M,N]=o(_),P=j?g:M;function F(e){j||N(e),w?.(e)}let I=()=>{v&&!C&&F(!P)},L=e=>{v&&!C&&t(e)&&(e.preventDefault(),F(!P))},R=a(!1);r(()=>{if(!R.current){R.current=!0;return}d()&&T?.(P)},[P]);let z=e=>{e.target===e.currentTarget&&e.propertyName===`transform`&&T?.(P)};i(p,()=>({flip(){if(j){u()&&console.warn("Flip: flip() called on a controlled instance, update the `flipped` prop instead.");return}F(!P)},setFlipped(e){if(j){u()&&console.warn("Flip: setFlipped() called on a controlled instance, update the `flipped` prop instead.");return}F(e)},reset(){j||N(!1)}}));let B=b?-180:180,V=y===`x`&&P?B:0,H=y===`y`&&P?B:0,U=y===`x`?B:0,W=y===`y`?B:0;return c(`div`,{...A,className:s(n.flip,v&&n.flipClickable,E,O?.root),style:{...D,...k?.root},onClick:I,onKeyDown:v?L:void 0,role:v?`button`:void 0,tabIndex:v?0:void 0,"aria-pressed":v?P:void 0,children:c(`div`,{className:s(n.flipPerspective,O?.perspective),style:{perspective:S===`none`?`none`:`${S}px`,...k?.perspective},children:l(`div`,{className:s(n.flipSurface,O?.surface),style:{transform:`rotateX(${V}deg) rotateY(${H}deg)`,"--flip-duration":`${x}ms`,...k?.surface},"data-flipped":P,onTransitionEnd:z,children:[c(`div`,{className:s(n.flipFront,O?.front),style:k?.front,children:m}),c(`div`,{className:s(n.flipBack,O?.back),style:{transform:`rotateX(${U}deg) rotateY(${W}deg)`,...k?.back},children:h})]})})})}export{f as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{isSelfActivation as t}from"../utils/activationKey.mjs";import{isDev as n}from"../utils/isDev.mjs";import r from"./flip.module.mjs";import{useEffect as i,useImperativeHandle as a,useRef as o,useState as s}from"react";import c from"classnames";import{jsx as l,jsxs as u}from"react/jsx-runtime";function d(){return typeof window<`u`&&window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches===!0}function f(f){let{ref:p,front:m,back:h,flipped:g,defaultFlipped:_=!1,flipOnClick:v=!1,flipAxis:y=`y`,reverse:b=!1,flipDuration:x=600,perspective:S=800,disabled:C=!1,onFlip:w,onFlipEnd:T,className:E,style:D,classNames:O,styles:k,...A}=e(`Flip`,f),j=g!==void 0,[M,N]=s(_),P=j?g:M;function F(e){j||N(e),w?.(e)}let I=()=>{v&&!C&&F(!P)},L=e=>{v&&!C&&t(e)&&(e.preventDefault(),F(!P))},R=o(!1);i(()=>{if(!R.current){R.current=!0;return}d()&&T?.(P)},[P]);let z=e=>{e.target===e.currentTarget&&e.propertyName===`transform`&&T?.(P)};a(p,()=>({flip(){if(j){n()&&console.warn("Flip: flip() called on a controlled instance, update the `flipped` prop instead.");return}F(!P)},setFlipped(e){if(j){n()&&console.warn("Flip: setFlipped() called on a controlled instance, update the `flipped` prop instead.");return}F(e)},reset(){j||N(!1)}}));let B=b?-180:180,V=y===`x`&&P?B:0,H=y===`y`&&P?B:0,U=y===`x`?B:0,W=y===`y`?B:0;return l(`div`,{...A,className:c(r.flip,v&&r.flipClickable,E,O?.root),style:{...D,...k?.root},onClick:I,onKeyDown:v?L:void 0,role:v?`button`:void 0,tabIndex:v?0:void 0,"aria-pressed":v?P:void 0,children:l(`div`,{className:c(r.flipPerspective,O?.perspective),style:{perspective:S===`none`?`none`:`${S}px`,...k?.perspective},children:u(`div`,{className:c(r.flipSurface,O?.surface),style:{transform:`rotateX(${V}deg) rotateY(${H}deg)`,"--flip-duration":`${x}ms`,...k?.surface},"data-flipped":P,onTransitionEnd:z,children:[l(`div`,{className:c(r.flipFront,O?.front),style:k?.front,children:m}),l(`div`,{className:c(r.flipBack,O?.back),style:{transform:`rotateX(${U}deg) rotateY(${W}deg)`,...k?.back},children:h})]})})})}export{f as default};
 //# sourceMappingURL=flip.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"flip.mjs","names":[],"sources":["../../../../package/common/flip/flip.tsx"],"sourcesContent":["import { useEffect, useImperativeHandle, useRef, useState, type CSSProperties, type KeyboardEvent } from 'react';\nimport cx from 'classnames';\n\nimport { useComponentDefaults } from '../configProvider';\nimport type { FlipProps } from './flip.types';\nimport styles from './flip.module.pcss';\nimport { isSelfActivation } from '../utils/activationKey';\n\n// Module-scoped ambient typing for the bundler-replaced NODE_ENV guard below. See bodyEnd.tsx.\ndeclare const process: { env: { NODE_ENV?: string } };\n\nfunction isDev(): boolean {\n  return typeof process !== 'undefined' && process.env.NODE_ENV !== 'production';\n}\n\nfunction prefersReducedMotion(): boolean {\n  return typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;\n}\n\nfunction Flip(props: FlipProps) {\n  const {\n    ref,\n    front,\n    back,\n    flipped,\n    defaultFlipped = false,\n    flipOnClick = false,\n    flipAxis = 'y',\n    reverse = false,\n    flipDuration = 600,\n    perspective = 800,\n    disabled = false,\n    onFlip,\n    onFlipEnd,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Flip', props);\n\n  const isControlled = flipped !== undefined;\n  const [internalFlipped, setInternalFlipped] = useState(defaultFlipped);\n  const effectiveFlipped = isControlled ? flipped : internalFlipped;\n\n  function doFlip(nextFlipped: boolean) {\n    if (!isControlled) setInternalFlipped(nextFlipped);\n    onFlip?.(nextFlipped);\n  }\n\n  const handleClick = () => {\n    if (!flipOnClick || disabled) return;\n    doFlip(!effectiveFlipped);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!flipOnClick || disabled) return;\n    if (!isSelfActivation(event)) return;\n    event.preventDefault();\n    doFlip(!effectiveFlipped);\n  };\n\n  const mountedRef = useRef(false);\n  useEffect(() => {\n    if (!mountedRef.current) {\n      mountedRef.current = true;\n      return;\n    }\n    if (prefersReducedMotion()) onFlipEnd?.(effectiveFlipped);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [effectiveFlipped]);\n\n  const handleTransitionEnd = (event: React.TransitionEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget || event.propertyName !== 'transform') return;\n    onFlipEnd?.(effectiveFlipped);\n  };\n\n  useImperativeHandle(ref, () => ({\n    flip() {\n      if (isControlled) {\n        if (isDev()) {\n          console.warn('Flip: flip() called on a controlled instance, update the `flipped` prop instead.');\n        }\n        return;\n      }\n      doFlip(!effectiveFlipped);\n    },\n    setFlipped(value: boolean) {\n      if (isControlled) {\n        if (isDev()) {\n          console.warn('Flip: setFlipped() called on a controlled instance, update the `flipped` prop instead.');\n        }\n        return;\n      }\n      doFlip(value);\n    },\n    reset() {\n      if (!isControlled) setInternalFlipped(false);\n    },\n  }));\n\n  // `reverse` flips the rotation sign on the same hinge axis (+180deg vs -180deg), so adjacent\n  // flips can sweep opposite ways without changing which edge they hinge on. The back face's\n  // own static rotation (below) always uses this same sign, unconditionally: two rotations of\n  // the same sign about the same axis (surface's + back's own) sum to +/-360deg, which is a full\n  // turn back to a right-reading, forward-facing back, regardless of whether `reverse` is set.\n  const turn = reverse ? -180 : 180;\n  const flipOffsetX = flipAxis === 'x' && effectiveFlipped ? turn : 0;\n  const flipOffsetY = flipAxis === 'y' && effectiveFlipped ? turn : 0;\n  const backOffsetX = flipAxis === 'x' ? turn : 0;\n  const backOffsetY = flipAxis === 'y' ? turn : 0;\n\n  return (\n    <div\n      {...rest}\n      className={cx(styles.flip, flipOnClick && styles.flipClickable, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n      onClick={handleClick}\n      onKeyDown={flipOnClick ? handleKeyDown : undefined}\n      role={flipOnClick ? 'button' : undefined}\n      tabIndex={flipOnClick ? 0 : undefined}\n      aria-pressed={flipOnClick ? effectiveFlipped : undefined}\n    >\n      <div\n        className={cx(styles.flipPerspective, classNames?.perspective)}\n        style={{\n          perspective: perspective === 'none' ? 'none' : `${perspective}px`,\n          ...slotStyles?.perspective,\n        }}\n      >\n        <div\n          className={cx(styles.flipSurface, classNames?.surface)}\n          style={\n            {\n              transform: `rotateX(${flipOffsetX}deg) rotateY(${flipOffsetY}deg)`,\n              '--flip-duration': `${flipDuration}ms`,\n              ...slotStyles?.surface,\n            } as CSSProperties & Record<'--flip-duration', string>\n          }\n          data-flipped={effectiveFlipped}\n          onTransitionEnd={handleTransitionEnd}\n        >\n          <div className={cx(styles.flipFront, classNames?.front)} style={slotStyles?.front}>\n            {front}\n          </div>\n          <div\n            className={cx(styles.flipBack, classNames?.back)}\n            style={{\n              transform: `rotateX(${backOffsetX}deg) rotateY(${backOffsetY}deg)`,\n              ...slotStyles?.back,\n            }}\n          >\n            {back}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Flip;\n"],"mappings":"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"}
+{"version":3,"file":"flip.mjs","names":[],"sources":["../../../../package/common/flip/flip.tsx"],"sourcesContent":["import { useEffect, useImperativeHandle, useRef, useState, type CSSProperties, type KeyboardEvent } from 'react';\nimport cx from 'classnames';\n\nimport { useComponentDefaults } from '../configProvider';\nimport type { FlipProps } from './flip.types';\nimport styles from './flip.module.pcss';\nimport { isSelfActivation } from '../utils/activationKey';\nimport { isDev } from '../utils/isDev';\n\nfunction prefersReducedMotion(): boolean {\n  return typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;\n}\n\nfunction Flip(props: FlipProps) {\n  const {\n    ref,\n    front,\n    back,\n    flipped,\n    defaultFlipped = false,\n    flipOnClick = false,\n    flipAxis = 'y',\n    reverse = false,\n    flipDuration = 600,\n    perspective = 800,\n    disabled = false,\n    onFlip,\n    onFlipEnd,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Flip', props);\n\n  const isControlled = flipped !== undefined;\n  const [internalFlipped, setInternalFlipped] = useState(defaultFlipped);\n  const effectiveFlipped = isControlled ? flipped : internalFlipped;\n\n  function doFlip(nextFlipped: boolean) {\n    if (!isControlled) setInternalFlipped(nextFlipped);\n    onFlip?.(nextFlipped);\n  }\n\n  const handleClick = () => {\n    if (!flipOnClick || disabled) return;\n    doFlip(!effectiveFlipped);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!flipOnClick || disabled) return;\n    if (!isSelfActivation(event)) return;\n    event.preventDefault();\n    doFlip(!effectiveFlipped);\n  };\n\n  const mountedRef = useRef(false);\n  useEffect(() => {\n    if (!mountedRef.current) {\n      mountedRef.current = true;\n      return;\n    }\n    if (prefersReducedMotion()) onFlipEnd?.(effectiveFlipped);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [effectiveFlipped]);\n\n  const handleTransitionEnd = (event: React.TransitionEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget || event.propertyName !== 'transform') return;\n    onFlipEnd?.(effectiveFlipped);\n  };\n\n  useImperativeHandle(ref, () => ({\n    flip() {\n      if (isControlled) {\n        if (isDev()) {\n          console.warn('Flip: flip() called on a controlled instance, update the `flipped` prop instead.');\n        }\n        return;\n      }\n      doFlip(!effectiveFlipped);\n    },\n    setFlipped(value: boolean) {\n      if (isControlled) {\n        if (isDev()) {\n          console.warn('Flip: setFlipped() called on a controlled instance, update the `flipped` prop instead.');\n        }\n        return;\n      }\n      doFlip(value);\n    },\n    reset() {\n      if (!isControlled) setInternalFlipped(false);\n    },\n  }));\n\n  // `reverse` flips the rotation sign on the same hinge axis (+180deg vs -180deg), so adjacent\n  // flips can sweep opposite ways without changing which edge they hinge on. The back face's\n  // own static rotation (below) always uses this same sign, unconditionally: two rotations of\n  // the same sign about the same axis (surface's + back's own) sum to +/-360deg, which is a full\n  // turn back to a right-reading, forward-facing back, regardless of whether `reverse` is set.\n  const turn = reverse ? -180 : 180;\n  const flipOffsetX = flipAxis === 'x' && effectiveFlipped ? turn : 0;\n  const flipOffsetY = flipAxis === 'y' && effectiveFlipped ? turn : 0;\n  const backOffsetX = flipAxis === 'x' ? turn : 0;\n  const backOffsetY = flipAxis === 'y' ? turn : 0;\n\n  return (\n    <div\n      {...rest}\n      className={cx(styles.flip, flipOnClick && styles.flipClickable, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n      onClick={handleClick}\n      onKeyDown={flipOnClick ? handleKeyDown : undefined}\n      role={flipOnClick ? 'button' : undefined}\n      tabIndex={flipOnClick ? 0 : undefined}\n      aria-pressed={flipOnClick ? effectiveFlipped : undefined}\n    >\n      <div\n        className={cx(styles.flipPerspective, classNames?.perspective)}\n        style={{\n          perspective: perspective === 'none' ? 'none' : `${perspective}px`,\n          ...slotStyles?.perspective,\n        }}\n      >\n        <div\n          className={cx(styles.flipSurface, classNames?.surface)}\n          style={\n            {\n              transform: `rotateX(${flipOffsetX}deg) rotateY(${flipOffsetY}deg)`,\n              '--flip-duration': `${flipDuration}ms`,\n              ...slotStyles?.surface,\n            } as CSSProperties & Record<'--flip-duration', string>\n          }\n          data-flipped={effectiveFlipped}\n          onTransitionEnd={handleTransitionEnd}\n        >\n          <div className={cx(styles.flipFront, classNames?.front)} style={slotStyles?.front}>\n            {front}\n          </div>\n          <div\n            className={cx(styles.flipBack, classNames?.back)}\n            style={{\n              transform: `rotateX(${backOffsetX}deg) rotateY(${backOffsetY}deg)`,\n              ...slotStyles?.back,\n            }}\n          >\n            {back}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Flip;\n"],"mappings":"0YASA,SAAS,GAAgC,CACvC,OAAO,OAAO,OAAW,KAAe,OAAO,aAAa,kCAAkC,CAAC,CAAC,UAAY,EAC9G,CAEA,SAAS,EAAK,EAAkB,CAC9B,GAAM,CACJ,MACA,QACA,OACA,UACA,iBAAiB,GACjB,cAAc,GACd,WAAW,IACX,UAAU,GACV,eAAe,IACf,cAAc,IACd,WAAW,GACX,SACA,YACA,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,OAAQ,CAAK,EAEhC,EAAe,IAAY,IAAA,GAC3B,CAAC,EAAiB,GAAsB,EAAS,CAAc,EAC/D,EAAmB,EAAe,EAAU,EAElD,SAAS,EAAO,EAAsB,CAC/B,GAAc,EAAmB,CAAW,EACjD,IAAS,CAAW,CACtB,CAEA,IAAM,MAAoB,CACnB,GAAe,IACpB,EAAO,CAAC,CAAgB,CAC1B,EAEM,EAAiB,GAAyC,CACzD,GAAe,IACf,EAAiB,CAAK,IAC3B,EAAM,eAAe,EACrB,EAAO,CAAC,CAAgB,EAC1B,EAEM,EAAa,EAAO,EAAK,EAC/B,MAAgB,CACd,GAAI,CAAC,EAAW,QAAS,CACvB,EAAW,QAAU,GACrB,MACF,CACI,EAAqB,GAAG,IAAY,CAAgB,CAE1D,EAAG,CAAC,CAAgB,CAAC,EAErB,IAAM,EAAuB,GAAiD,CACxE,EAAM,SAAW,EAAM,eAAiB,EAAM,eAAiB,aACnE,IAAY,CAAgB,CAC9B,EAEA,EAAoB,OAAY,CAC9B,MAAO,CACL,GAAI,EAAc,CACZ,EAAM,GACR,QAAQ,KAAK,kFAAkF,EAEjG,MACF,CACA,EAAO,CAAC,CAAgB,CAC1B,EACA,WAAW,EAAgB,CACzB,GAAI,EAAc,CACZ,EAAM,GACR,QAAQ,KAAK,wFAAwF,EAEvG,MACF,CACA,EAAO,CAAK,CACd,EACA,OAAQ,CACD,GAAc,EAAmB,EAAK,CAC7C,CACF,EAAE,EAOF,IAAM,EAAO,EAAU,KAAO,IACxB,EAAc,IAAa,KAAO,EAAmB,EAAO,EAC5D,EAAc,IAAa,KAAO,EAAmB,EAAO,EAC5D,EAAc,IAAa,IAAM,EAAO,EACxC,EAAc,IAAa,IAAM,EAAO,EAE9C,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,KAAM,GAAe,EAAO,cAAe,EAAW,GAAY,IAAI,EAC3F,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EACvC,QAAS,EACT,UAAW,EAAc,EAAgB,IAAA,GACzC,KAAM,EAAc,SAAW,IAAA,GAC/B,SAAU,EAAc,EAAI,IAAA,GAC5B,eAAc,EAAc,EAAmB,IAAA,GAE/C,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,gBAAiB,GAAY,WAAW,EAC7D,MAAO,CACL,YAAa,IAAgB,OAAS,OAAS,GAAG,EAAY,IAC9D,GAAG,GAAY,WACjB,EAEA,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,YAAa,GAAY,OAAO,EACrD,MACE,CACE,UAAW,WAAW,EAAY,eAAe,EAAY,MAC7D,kBAAmB,GAAG,EAAa,IACnC,GAAG,GAAY,OACjB,EAEF,eAAc,EACd,gBAAiB,EAVnB,SAAA,CAYE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,UAAW,GAAY,KAAK,EAAG,MAAO,GAAY,MACzE,SAAA,CACE,CAAA,EACL,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,SAAU,GAAY,IAAI,EAC/C,MAAO,CACL,UAAW,WAAW,EAAY,eAAe,EAAY,MAC7D,GAAG,GAAY,IACjB,EAEC,SAAA,CACE,CAAA,CACF,GACF,CAAA,CACF,CAAA,CAET"}

package/dist/esm/common/kanbanBoard/KanbanColumn.mjs

@@ -1,2 +1,2 @@
-"use client";import e from"../loading/spinnerLoading/index.mjs";import t from"./kanbanBoard.module.mjs";import n from"./KanbanItem.mjs";import{useCallback as r,useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{useDroppable as u}from"@dnd-kit/core";import{SortableContext as d,useSortable as f,verticalListSortingStrategy as p}from"@dnd-kit/sortable";import{CSS as m}from"@dnd-kit/utilities";var h={type:`column`},g={draggable:!0,droppable:!0};function _({id:_,title:v,itemIds:y,items:b,renderItem:x,dragHandle:S,preserveSizeWhileEmpty:C,collapseEmptyColumns:w=!0,maxItems:T,disabled:E,getItemDisabled:D,emptyPlaceholder:O,actions:k,reorderable:A,activeIsColumn:j,columnMaxHeight:M,hasMore:N,onLoadMore:P,loadMoreThreshold:F=100,className:I,style:L,classNames:R,styles:z,...B}){let V=`column-${_}`,{setNodeRef:H,isOver:U}=u({id:V,disabled:E}),W=w&&y.length===0&&!C,G=T!=null&&y.length>T,K=a(null),q=r(e=>{K.current=e,H(e)},[H]),J=a(!1),[Y,X]=o(!1),Z=r(()=>{P&&!J.current&&(J.current=!0,X(!0),Promise.resolve(P()).finally(()=>{J.current=!1,X(!1)}))},[P]),Q=r(e=>{if(!N)return;let t=e.currentTarget;t.scrollTop+t.clientHeight>=t.scrollHeight-F&&Z()},[N,F,Z]),$=a(``);i(()=>{if(!N||!M||Y)return;let e=K.current;if(!e||e.clientHeight===0||e.scrollHeight>e.clientHeight)return;let t=`${y.length}:${e.clientHeight}`;$.current!==t&&($.current=t,Z())},[N,M,Y,y.length,Z]);let{attributes:ee,listeners:te,setNodeRef:ne,transform:re,transition:ie,isDragging:ae,isOver:oe}=f({id:_,data:h,disabled:!A&&g});return l(`div`,{...B,ref:ne,id:_,className:s(t.column,U&&!j&&t.columnOver,oe&&t.columnDropTarget,W&&t.columnEmpty,G&&t.columnOverLimit,E&&t.columnDisabled,ae&&t.columnDragging,I),style:{transform:m.Transform.toString(re),transition:ie,...L},children:[l(`div`,{className:s(t.columnHeader,A&&t.columnHeaderReorderable,R?.header),style:z?.header,...A?ee:void 0,...A?te:void 0,children:[c(`span`,{className:t.columnHeaderTitle,children:v}),l(`div`,{className:t.columnHeaderTrailing,children:[T!=null&&l(`span`,{className:s(t.columnHeaderCount,G&&t.columnHeaderCountOver,R?.count),style:z?.count,children:[y.length,`/`,T]}),k!=null&&c(`div`,{className:s(t.columnHeaderActions,R?.actions),style:z?.actions,children:k})]})]}),c(d,{id:_,items:y,strategy:p,children:l(`div`,{ref:q,className:s(t.columnItems,R?.items),style:{maxHeight:M,overflowY:M?`auto`:void 0,...z?.items},onScroll:M?Q:void 0,children:[y.length===0&&O!=null?c(`div`,{className:s(t.columnPlaceholder,R?.placeholder),style:z?.placeholder,children:O}):null,y.map(e=>c(n,{id:e,dragHandle:S,disabled:E||b[e]!==void 0&&(D?.(b[e],e)??!1),preventAsDropTarget:E,children:b[e]===void 0?null:x(b[e],e)},e)),Y&&c(`div`,{className:s(t.columnLoadingIndicator,R?.loadingIndicator),style:z?.loadingIndicator,children:c(e,{className:t.columnLoadingSpinner})})]})})]})}export{_ as default};
+"use client";import e from"../loader/loader.mjs";import t from"./kanbanBoard.module.mjs";import n from"./KanbanItem.mjs";import{useCallback as r,useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{useDroppable as u}from"@dnd-kit/core";import{SortableContext as d,useSortable as f,verticalListSortingStrategy as p}from"@dnd-kit/sortable";import{CSS as m}from"@dnd-kit/utilities";var h={type:`column`},g={draggable:!0,droppable:!0};function _({id:_,title:v,itemIds:y,items:b,renderItem:x,dragHandle:S,preserveSizeWhileEmpty:C,collapseEmptyColumns:w=!0,maxItems:T,disabled:E,getItemDisabled:D,emptyPlaceholder:O,actions:k,reorderable:A,activeIsColumn:j,columnMaxHeight:M,hasMore:N,onLoadMore:P,loadMoreThreshold:F=100,className:I,style:L,classNames:R,styles:z,...B}){let V=`column-${_}`,{setNodeRef:H,isOver:U}=u({id:V,disabled:E}),W=w&&y.length===0&&!C,G=T!=null&&y.length>T,K=a(null),q=r(e=>{K.current=e,H(e)},[H]),J=a(!1),[Y,X]=o(!1),Z=r(()=>{P&&!J.current&&(J.current=!0,X(!0),Promise.resolve(P()).finally(()=>{J.current=!1,X(!1)}))},[P]),Q=r(e=>{if(!N)return;let t=e.currentTarget;t.scrollTop+t.clientHeight>=t.scrollHeight-F&&Z()},[N,F,Z]),$=a(``);i(()=>{if(!N||!M||Y)return;let e=K.current;if(!e||e.clientHeight===0||e.scrollHeight>e.clientHeight)return;let t=`${y.length}:${e.clientHeight}`;$.current!==t&&($.current=t,Z())},[N,M,Y,y.length,Z]);let{attributes:ee,listeners:te,setNodeRef:ne,transform:re,transition:ie,isDragging:ae,isOver:oe}=f({id:_,data:h,disabled:!A&&g});return l(`div`,{...B,ref:ne,id:_,className:s(t.column,U&&!j&&t.columnOver,oe&&t.columnDropTarget,W&&t.columnEmpty,G&&t.columnOverLimit,E&&t.columnDisabled,ae&&t.columnDragging,I),style:{transform:m.Transform.toString(re),transition:ie,...L},children:[l(`div`,{className:s(t.columnHeader,A&&t.columnHeaderReorderable,R?.header),style:z?.header,...A?ee:void 0,...A?te:void 0,children:[c(`span`,{className:t.columnHeaderTitle,children:v}),l(`div`,{className:t.columnHeaderTrailing,children:[T!=null&&l(`span`,{className:s(t.columnHeaderCount,G&&t.columnHeaderCountOver,R?.count),style:z?.count,children:[y.length,`/`,T]}),k!=null&&c(`div`,{className:s(t.columnHeaderActions,R?.actions),style:z?.actions,children:k})]})]}),c(d,{id:_,items:y,strategy:p,children:l(`div`,{ref:q,className:s(t.columnItems,R?.items),style:{maxHeight:M,overflowY:M?`auto`:void 0,...z?.items},onScroll:M?Q:void 0,children:[y.length===0&&O!=null?c(`div`,{className:s(t.columnPlaceholder,R?.placeholder),style:z?.placeholder,children:O}):null,y.map(e=>c(n,{id:e,dragHandle:S,disabled:E||b[e]!==void 0&&(D?.(b[e],e)??!1),preventAsDropTarget:E,children:b[e]===void 0?null:x(b[e],e)},e)),Y&&c(`div`,{className:s(t.columnLoadingIndicator,R?.loadingIndicator),style:z?.loadingIndicator,children:c(e,{size:`2.6em`})})]})})]})}export{_ as default};
 //# sourceMappingURL=KanbanColumn.mjs.map

package/dist/esm/common/kanbanBoard/KanbanColumn.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanColumn.mjs","names":[],"sources":["../../../../package/common/kanbanBoard/KanbanColumn.tsx"],"sourcesContent":["import type { ReactNode, UIEvent } from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { useDroppable } from '@dnd-kit/core';\nimport { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport cx from 'classnames';\n\nimport type { KanbanColumnProps } from './kanbanBoard.types';\nimport styles from './kanbanBoard.module.pcss';\nimport KanbanItem from './KanbanItem';\nimport SpinnerLoading from '../loading/spinnerLoading';\n\n// Hoisted so these are referentially stable across renders — inline literals here would give\n// `useSortable` a new `data`/`disabled` object every render (every column re-renders on every\n// `dragOver` while a drag is in progress, via `shadowColumns`), which can spin dnd-kit's own\n// registration effect into a render loop that eventually trips React's \"Maximum update depth\n// exceeded\" guard. Same fix as the sensor options in `KanbanBoard.tsx`.\nconst COLUMN_SORTABLE_DATA = { type: 'column' };\nconst COLUMN_SORTABLE_DISABLED = { draggable: true, droppable: true };\n\ninterface KanbanColumnInternalProps<T> extends KanbanColumnProps {\n  itemIds: string[];\n  items: Record<string, T>;\n  renderItem: (item: T, id: string) => ReactNode;\n  dragHandle?: boolean;\n  /**\n   * Keep the column at its normal flex width even when `itemIds` is empty. Used while a drag\n   * is in progress: the empty-column collapse is driven by transient shadow state during a\n   * drag, and letting the column shrink mid-drag shifts every column's layout underneath the\n   * pointer, which can flip the collision target back and forth forever.\n   */\n  preserveSizeWhileEmpty?: boolean;\n  /** Shrink to a narrow strip when empty — see `KanbanBoardProps.collapseEmptyColumns`. Defaults to `true`. */\n  collapseEmptyColumns?: boolean;\n  /** Work-in-progress limit — see `KanbanColumnDef.maxItems`. Display-only. */\n  maxItems?: number;\n  /** Freezes the column — see `KanbanColumnDef.disabled`. */\n  disabled?: boolean;\n  /** Returns whether a specific card can't be picked up — see `KanbanBoardProps.getItemDisabled`. */\n  getItemDisabled?: (item: T, id: string) => boolean;\n  /** Custom content shown when the column has no cards — see `KanbanBoardProps.renderEmptyColumn`. */\n  emptyPlaceholder?: ReactNode;\n  /** Custom header actions — see `KanbanBoardProps.renderColumnActions`. */\n  actions?: ReactNode;\n  /** Allow the whole column to be dragged (by its header) to reorder it — see `KanbanBoardProps.reorderableColumns`. */\n  reorderable?: boolean;\n  /**\n   * Whether the card currently being dragged (if any) is actually a column. Suppresses the\n   * cards drop-target highlight, which otherwise lights up on every column a dragged column\n   * passes over — that highlight means \"drop a card here\", which doesn't apply mid-column-drag.\n   */\n  activeIsColumn?: boolean;\n  /** Bounds the column's height and makes its card list scroll — see `KanbanBoardProps.columnMaxHeight`. */\n  columnMaxHeight?: string;\n  /** Whether more items exist for this column — see `KanbanColumnDef.hasMore`. */\n  hasMore?: boolean;\n  /** Requests the next page for this column — see `KanbanBoardProps.onLoadMore`. */\n  onLoadMore?: () => void | Promise<void>;\n  /** Scroll distance from the bottom that triggers `onLoadMore` — see `KanbanBoardProps.loadMoreThreshold`. */\n  loadMoreThreshold?: number;\n}\n\nfunction KanbanColumn<T>({\n  id,\n  title,\n  itemIds,\n  items,\n  renderItem,\n  dragHandle,\n  preserveSizeWhileEmpty,\n  collapseEmptyColumns = true,\n  maxItems,\n  disabled,\n  getItemDisabled,\n  emptyPlaceholder,\n  actions,\n  reorderable,\n  activeIsColumn,\n  columnMaxHeight,\n  hasMore,\n  onLoadMore,\n  loadMoreThreshold = 100,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: KanbanColumnInternalProps<T>) {\n  const droppableId = `column-${id}`;\n  const { setNodeRef, isOver } = useDroppable({ id: droppableId, disabled });\n  const isEmpty = collapseEmptyColumns && itemIds.length === 0 && !preserveSizeWhileEmpty;\n  const isOverLimit = maxItems != null && itemIds.length > maxItems;\n\n  const itemsRef = useRef<HTMLDivElement | null>(null);\n  const setItemsRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      itemsRef.current = node;\n      setNodeRef(node);\n    },\n    [setNodeRef],\n  );\n  const isLoadingMoreRef = useRef(false);\n  const [isLoadingMore, setIsLoadingMore] = useState(false);\n\n  const triggerLoadMore = useCallback(() => {\n    if (!onLoadMore || isLoadingMoreRef.current) return;\n    isLoadingMoreRef.current = true;\n    setIsLoadingMore(true);\n    Promise.resolve(onLoadMore()).finally(() => {\n      isLoadingMoreRef.current = false;\n      setIsLoadingMore(false);\n    });\n  }, [onLoadMore]);\n\n  const handleItemsScroll = useCallback(\n    (event: UIEvent<HTMLDivElement>) => {\n      if (!hasMore) return;\n      const el = event.currentTarget;\n      if (el.scrollTop + el.clientHeight >= el.scrollHeight - loadMoreThreshold) triggerLoadMore();\n    },\n    [hasMore, loadMoreThreshold, triggerLoadMore],\n  );\n\n  // The scroll trigger above can only fire once the list actually overflows and scrolls. A batch\n  // smaller than the column's own visible height never generates a scroll event, which would\n  // otherwise dead-end pagination after the first page. Re-probes at most once per (item count,\n  // visible height) pair, so settled content can't re-ask a source that already ran dry.\n  const fillProbeRef = useRef('');\n  useEffect(() => {\n    if (!hasMore || !columnMaxHeight || isLoadingMore) return;\n    const el = itemsRef.current;\n    if (!el || el.clientHeight === 0) return;\n    if (el.scrollHeight > el.clientHeight) return;\n    const probe = `${itemIds.length}:${el.clientHeight}`;\n    if (fillProbeRef.current === probe) return;\n    fillProbeRef.current = probe;\n    triggerLoadMore();\n  }, [hasMore, columnMaxHeight, isLoadingMore, itemIds.length, triggerLoadMore]);\n\n  const {\n    attributes: columnAttributes,\n    listeners: columnListeners,\n    setNodeRef: setColumnNodeRef,\n    transform: columnTransform,\n    transition: columnTransition,\n    isDragging: isColumnDragging,\n    isOver: isColumnOver,\n  } = useSortable({\n    id,\n    data: COLUMN_SORTABLE_DATA,\n    disabled: reorderable ? false : COLUMN_SORTABLE_DISABLED,\n  });\n\n  return (\n    <div\n      {...rest}\n      ref={setColumnNodeRef}\n      id={id}\n      className={cx(\n        styles.column,\n        isOver && !activeIsColumn && styles.columnOver,\n        isColumnOver && styles.columnDropTarget,\n        isEmpty && styles.columnEmpty,\n        isOverLimit && styles.columnOverLimit,\n        disabled && styles.columnDisabled,\n        isColumnDragging && styles.columnDragging,\n        className,\n      )}\n      style={{ transform: CSS.Transform.toString(columnTransform), transition: columnTransition, ...style }}\n    >\n      <div\n        className={cx(styles.columnHeader, reorderable && styles.columnHeaderReorderable, classNames?.header)}\n        style={slotStyles?.header}\n        {...(reorderable ? columnAttributes : undefined)}\n        {...(reorderable ? columnListeners : undefined)}\n      >\n        <span className={styles.columnHeaderTitle}>{title}</span>\n        <div className={styles.columnHeaderTrailing}>\n          {maxItems != null && (\n            <span\n              className={cx(styles.columnHeaderCount, isOverLimit && styles.columnHeaderCountOver, classNames?.count)}\n              style={slotStyles?.count}\n            >\n              {itemIds.length}/{maxItems}\n            </span>\n          )}\n          {actions != null && (\n            <div className={cx(styles.columnHeaderActions, classNames?.actions)} style={slotStyles?.actions}>\n              {actions}\n            </div>\n          )}\n        </div>\n      </div>\n      <SortableContext id={id} items={itemIds} strategy={verticalListSortingStrategy}>\n        <div\n          ref={setItemsRef}\n          className={cx(styles.columnItems, classNames?.items)}\n          style={{ maxHeight: columnMaxHeight, overflowY: columnMaxHeight ? 'auto' : undefined, ...slotStyles?.items }}\n          onScroll={columnMaxHeight ? handleItemsScroll : undefined}\n        >\n          {itemIds.length === 0 && emptyPlaceholder != null ? (\n            <div className={cx(styles.columnPlaceholder, classNames?.placeholder)} style={slotStyles?.placeholder}>\n              {emptyPlaceholder}\n            </div>\n          ) : null}\n          {itemIds.map((itemId) => (\n            <KanbanItem\n              key={itemId}\n              id={itemId}\n              dragHandle={dragHandle}\n              disabled={\n                disabled || (items[itemId] !== undefined && (getItemDisabled?.(items[itemId], itemId) ?? false))\n              }\n              preventAsDropTarget={disabled}\n            >\n              {items[itemId] !== undefined ? renderItem(items[itemId], itemId) : null}\n            </KanbanItem>\n          ))}\n          {isLoadingMore && (\n            <div\n              className={cx(styles.columnLoadingIndicator, classNames?.loadingIndicator)}\n              style={slotStyles?.loadingIndicator}\n            >\n              <SpinnerLoading className={styles.columnLoadingSpinner} />\n            </div>\n          )}\n        </div>\n      </SortableContext>\n    </div>\n  );\n}\n\nexport default KanbanColumn;\n"],"mappings":"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"}
+{"version":3,"file":"KanbanColumn.mjs","names":[],"sources":["../../../../package/common/kanbanBoard/KanbanColumn.tsx"],"sourcesContent":["import type { ReactNode, UIEvent } from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { useDroppable } from '@dnd-kit/core';\nimport { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport cx from 'classnames';\n\nimport type { KanbanColumnProps } from './kanbanBoard.types';\nimport styles from './kanbanBoard.module.pcss';\nimport KanbanItem from './KanbanItem';\nimport Loader from '../loader';\n\n// Hoisted so these are referentially stable across renders — inline literals here would give\n// `useSortable` a new `data`/`disabled` object every render (every column re-renders on every\n// `dragOver` while a drag is in progress, via `shadowColumns`), which can spin dnd-kit's own\n// registration effect into a render loop that eventually trips React's \"Maximum update depth\n// exceeded\" guard. Same fix as the sensor options in `KanbanBoard.tsx`.\nconst COLUMN_SORTABLE_DATA = { type: 'column' };\nconst COLUMN_SORTABLE_DISABLED = { draggable: true, droppable: true };\n\ninterface KanbanColumnInternalProps<T> extends KanbanColumnProps {\n  itemIds: string[];\n  items: Record<string, T>;\n  renderItem: (item: T, id: string) => ReactNode;\n  dragHandle?: boolean;\n  /**\n   * Keep the column at its normal flex width even when `itemIds` is empty. Used while a drag\n   * is in progress: the empty-column collapse is driven by transient shadow state during a\n   * drag, and letting the column shrink mid-drag shifts every column's layout underneath the\n   * pointer, which can flip the collision target back and forth forever.\n   */\n  preserveSizeWhileEmpty?: boolean;\n  /** Shrink to a narrow strip when empty — see `KanbanBoardProps.collapseEmptyColumns`. Defaults to `true`. */\n  collapseEmptyColumns?: boolean;\n  /** Work-in-progress limit — see `KanbanColumnDef.maxItems`. Display-only. */\n  maxItems?: number;\n  /** Freezes the column — see `KanbanColumnDef.disabled`. */\n  disabled?: boolean;\n  /** Returns whether a specific card can't be picked up — see `KanbanBoardProps.getItemDisabled`. */\n  getItemDisabled?: (item: T, id: string) => boolean;\n  /** Custom content shown when the column has no cards — see `KanbanBoardProps.renderEmptyColumn`. */\n  emptyPlaceholder?: ReactNode;\n  /** Custom header actions — see `KanbanBoardProps.renderColumnActions`. */\n  actions?: ReactNode;\n  /** Allow the whole column to be dragged (by its header) to reorder it — see `KanbanBoardProps.reorderableColumns`. */\n  reorderable?: boolean;\n  /**\n   * Whether the card currently being dragged (if any) is actually a column. Suppresses the\n   * cards drop-target highlight, which otherwise lights up on every column a dragged column\n   * passes over — that highlight means \"drop a card here\", which doesn't apply mid-column-drag.\n   */\n  activeIsColumn?: boolean;\n  /** Bounds the column's height and makes its card list scroll — see `KanbanBoardProps.columnMaxHeight`. */\n  columnMaxHeight?: string;\n  /** Whether more items exist for this column — see `KanbanColumnDef.hasMore`. */\n  hasMore?: boolean;\n  /** Requests the next page for this column — see `KanbanBoardProps.onLoadMore`. */\n  onLoadMore?: () => void | Promise<void>;\n  /** Scroll distance from the bottom that triggers `onLoadMore` — see `KanbanBoardProps.loadMoreThreshold`. */\n  loadMoreThreshold?: number;\n}\n\nfunction KanbanColumn<T>({\n  id,\n  title,\n  itemIds,\n  items,\n  renderItem,\n  dragHandle,\n  preserveSizeWhileEmpty,\n  collapseEmptyColumns = true,\n  maxItems,\n  disabled,\n  getItemDisabled,\n  emptyPlaceholder,\n  actions,\n  reorderable,\n  activeIsColumn,\n  columnMaxHeight,\n  hasMore,\n  onLoadMore,\n  loadMoreThreshold = 100,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: KanbanColumnInternalProps<T>) {\n  const droppableId = `column-${id}`;\n  const { setNodeRef, isOver } = useDroppable({ id: droppableId, disabled });\n  const isEmpty = collapseEmptyColumns && itemIds.length === 0 && !preserveSizeWhileEmpty;\n  const isOverLimit = maxItems != null && itemIds.length > maxItems;\n\n  const itemsRef = useRef<HTMLDivElement | null>(null);\n  const setItemsRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      itemsRef.current = node;\n      setNodeRef(node);\n    },\n    [setNodeRef],\n  );\n  const isLoadingMoreRef = useRef(false);\n  const [isLoadingMore, setIsLoadingMore] = useState(false);\n\n  const triggerLoadMore = useCallback(() => {\n    if (!onLoadMore || isLoadingMoreRef.current) return;\n    isLoadingMoreRef.current = true;\n    setIsLoadingMore(true);\n    Promise.resolve(onLoadMore()).finally(() => {\n      isLoadingMoreRef.current = false;\n      setIsLoadingMore(false);\n    });\n  }, [onLoadMore]);\n\n  const handleItemsScroll = useCallback(\n    (event: UIEvent<HTMLDivElement>) => {\n      if (!hasMore) return;\n      const el = event.currentTarget;\n      if (el.scrollTop + el.clientHeight >= el.scrollHeight - loadMoreThreshold) triggerLoadMore();\n    },\n    [hasMore, loadMoreThreshold, triggerLoadMore],\n  );\n\n  // The scroll trigger above can only fire once the list actually overflows and scrolls. A batch\n  // smaller than the column's own visible height never generates a scroll event, which would\n  // otherwise dead-end pagination after the first page. Re-probes at most once per (item count,\n  // visible height) pair, so settled content can't re-ask a source that already ran dry.\n  const fillProbeRef = useRef('');\n  useEffect(() => {\n    if (!hasMore || !columnMaxHeight || isLoadingMore) return;\n    const el = itemsRef.current;\n    if (!el || el.clientHeight === 0) return;\n    if (el.scrollHeight > el.clientHeight) return;\n    const probe = `${itemIds.length}:${el.clientHeight}`;\n    if (fillProbeRef.current === probe) return;\n    fillProbeRef.current = probe;\n    triggerLoadMore();\n  }, [hasMore, columnMaxHeight, isLoadingMore, itemIds.length, triggerLoadMore]);\n\n  const {\n    attributes: columnAttributes,\n    listeners: columnListeners,\n    setNodeRef: setColumnNodeRef,\n    transform: columnTransform,\n    transition: columnTransition,\n    isDragging: isColumnDragging,\n    isOver: isColumnOver,\n  } = useSortable({\n    id,\n    data: COLUMN_SORTABLE_DATA,\n    disabled: reorderable ? false : COLUMN_SORTABLE_DISABLED,\n  });\n\n  return (\n    <div\n      {...rest}\n      ref={setColumnNodeRef}\n      id={id}\n      className={cx(\n        styles.column,\n        isOver && !activeIsColumn && styles.columnOver,\n        isColumnOver && styles.columnDropTarget,\n        isEmpty && styles.columnEmpty,\n        isOverLimit && styles.columnOverLimit,\n        disabled && styles.columnDisabled,\n        isColumnDragging && styles.columnDragging,\n        className,\n      )}\n      style={{ transform: CSS.Transform.toString(columnTransform), transition: columnTransition, ...style }}\n    >\n      <div\n        className={cx(styles.columnHeader, reorderable && styles.columnHeaderReorderable, classNames?.header)}\n        style={slotStyles?.header}\n        {...(reorderable ? columnAttributes : undefined)}\n        {...(reorderable ? columnListeners : undefined)}\n      >\n        <span className={styles.columnHeaderTitle}>{title}</span>\n        <div className={styles.columnHeaderTrailing}>\n          {maxItems != null && (\n            <span\n              className={cx(styles.columnHeaderCount, isOverLimit && styles.columnHeaderCountOver, classNames?.count)}\n              style={slotStyles?.count}\n            >\n              {itemIds.length}/{maxItems}\n            </span>\n          )}\n          {actions != null && (\n            <div className={cx(styles.columnHeaderActions, classNames?.actions)} style={slotStyles?.actions}>\n              {actions}\n            </div>\n          )}\n        </div>\n      </div>\n      <SortableContext id={id} items={itemIds} strategy={verticalListSortingStrategy}>\n        <div\n          ref={setItemsRef}\n          className={cx(styles.columnItems, classNames?.items)}\n          style={{ maxHeight: columnMaxHeight, overflowY: columnMaxHeight ? 'auto' : undefined, ...slotStyles?.items }}\n          onScroll={columnMaxHeight ? handleItemsScroll : undefined}\n        >\n          {itemIds.length === 0 && emptyPlaceholder != null ? (\n            <div className={cx(styles.columnPlaceholder, classNames?.placeholder)} style={slotStyles?.placeholder}>\n              {emptyPlaceholder}\n            </div>\n          ) : null}\n          {itemIds.map((itemId) => (\n            <KanbanItem\n              key={itemId}\n              id={itemId}\n              dragHandle={dragHandle}\n              disabled={\n                disabled || (items[itemId] !== undefined && (getItemDisabled?.(items[itemId], itemId) ?? false))\n              }\n              preventAsDropTarget={disabled}\n            >\n              {items[itemId] !== undefined ? renderItem(items[itemId], itemId) : null}\n            </KanbanItem>\n          ))}\n          {isLoadingMore && (\n            <div\n              className={cx(styles.columnLoadingIndicator, classNames?.loadingIndicator)}\n              style={slotStyles?.loadingIndicator}\n            >\n              <Loader size='2.6em' />\n            </div>\n          )}\n        </div>\n      </SortableContext>\n    </div>\n  );\n}\n\nexport default KanbanColumn;\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use client";var e=`board_6KRdw`,t=`column_NrNeF`,n=`column-empty_5KYsJ`,r=`column-over_sO7oD`,i=`column-over-limit_QmeZF`,a=`column-drop-target_mznmc`,o=`column-disabled_ehcz3`,s=`column-items_xY5er`,c=`column-dragging_6F5TK`,l=`column-drag-overlay_ctehQ`,u=`column-header_PLeKG`,d=`column-header-reorderable_Jtgii`,f=`column-header-title_FQhHQ`,p=`column-header-count_3t83e`,m=`column-header-count-over_AkAdo`,h=`column-header-trailing_6625D`,g=`column-header-actions_XKY3t`,_=`column-placeholder_WGyF-`,v=`column-loading-indicator_2Q70t`,y=`column-loading-spinner_4ca6l`,b=`item_T8CJK`,x=`item-dragging_iWurw`,S=`item-handled_l28gq`,C=`item-disabled_n8Nuq`,w=`dragOverlay_DSyKz`,T={board:e,column:t,"column-empty":`column-empty_5KYsJ`,columnEmpty:n,"column-over":`column-over_sO7oD`,columnOver:r,"column-over-limit":`column-over-limit_QmeZF`,columnOverLimit:i,"column-drop-target":`column-drop-target_mznmc`,columnDropTarget:a,"column-disabled":`column-disabled_ehcz3`,columnDisabled:o,"column-items":`column-items_xY5er`,columnItems:s,"column-dragging":`column-dragging_6F5TK`,columnDragging:c,"column-drag-overlay":`column-drag-overlay_ctehQ`,columnDragOverlay:l,"column-header":`column-header_PLeKG`,columnHeader:u,"column-header-reorderable":`column-header-reorderable_Jtgii`,columnHeaderReorderable:d,"column-header-title":`column-header-title_FQhHQ`,columnHeaderTitle:f,"column-header-count":`column-header-count_3t83e`,columnHeaderCount:p,"column-header-count-over":`column-header-count-over_AkAdo`,columnHeaderCountOver:m,"column-header-trailing":`column-header-trailing_6625D`,columnHeaderTrailing:h,"column-header-actions":`column-header-actions_XKY3t`,columnHeaderActions:g,"column-placeholder":`column-placeholder_WGyF-`,columnPlaceholder:_,"column-loading-indicator":`column-loading-indicator_2Q70t`,columnLoadingIndicator:v,"column-loading-spinner":`column-loading-spinner_4ca6l`,columnLoadingSpinner:y,item:b,"item-dragging":`item-dragging_iWurw`,itemDragging:x,"item-handled":`item-handled_l28gq`,itemHandled:S,"item-disabled":`item-disabled_n8Nuq`,itemDisabled:C,dragOverlay:w};export{e as board,t as column,o as columnDisabled,l as columnDragOverlay,c as columnDragging,a as columnDropTarget,n as columnEmpty,u as columnHeader,g as columnHeaderActions,p as columnHeaderCount,m as columnHeaderCountOver,d as columnHeaderReorderable,f as columnHeaderTitle,h as columnHeaderTrailing,s as columnItems,v as columnLoadingIndicator,y as columnLoadingSpinner,r as columnOver,i as columnOverLimit,_ as columnPlaceholder,T as default,w as dragOverlay,b as item,C as itemDisabled,x as itemDragging,S as itemHandled};
+"use client";var e=`board_6KRdw`,t=`column_NrNeF`,n=`column-empty_5KYsJ`,r=`column-over_sO7oD`,i=`column-over-limit_QmeZF`,a=`column-drop-target_mznmc`,o=`column-disabled_ehcz3`,s=`column-items_xY5er`,c=`column-dragging_6F5TK`,l=`column-drag-overlay_ctehQ`,u=`column-header_PLeKG`,d=`column-header-reorderable_Jtgii`,f=`column-header-title_FQhHQ`,p=`column-header-count_3t83e`,m=`column-header-count-over_AkAdo`,h=`column-header-trailing_6625D`,g=`column-header-actions_XKY3t`,_=`column-placeholder_WGyF-`,v=`column-loading-indicator_2Q70t`,y=`item_T8CJK`,b=`item-dragging_iWurw`,x=`item-handled_l28gq`,S=`item-disabled_n8Nuq`,C=`dragOverlay_DSyKz`,w={board:e,column:t,"column-empty":`column-empty_5KYsJ`,columnEmpty:n,"column-over":`column-over_sO7oD`,columnOver:r,"column-over-limit":`column-over-limit_QmeZF`,columnOverLimit:i,"column-drop-target":`column-drop-target_mznmc`,columnDropTarget:a,"column-disabled":`column-disabled_ehcz3`,columnDisabled:o,"column-items":`column-items_xY5er`,columnItems:s,"column-dragging":`column-dragging_6F5TK`,columnDragging:c,"column-drag-overlay":`column-drag-overlay_ctehQ`,columnDragOverlay:l,"column-header":`column-header_PLeKG`,columnHeader:u,"column-header-reorderable":`column-header-reorderable_Jtgii`,columnHeaderReorderable:d,"column-header-title":`column-header-title_FQhHQ`,columnHeaderTitle:f,"column-header-count":`column-header-count_3t83e`,columnHeaderCount:p,"column-header-count-over":`column-header-count-over_AkAdo`,columnHeaderCountOver:m,"column-header-trailing":`column-header-trailing_6625D`,columnHeaderTrailing:h,"column-header-actions":`column-header-actions_XKY3t`,columnHeaderActions:g,"column-placeholder":`column-placeholder_WGyF-`,columnPlaceholder:_,"column-loading-indicator":`column-loading-indicator_2Q70t`,columnLoadingIndicator:v,item:y,"item-dragging":`item-dragging_iWurw`,itemDragging:b,"item-handled":`item-handled_l28gq`,itemHandled:x,"item-disabled":`item-disabled_n8Nuq`,itemDisabled:S,dragOverlay:C};export{e as board,t as column,o as columnDisabled,l as columnDragOverlay,c as columnDragging,a as columnDropTarget,n as columnEmpty,u as columnHeader,g as columnHeaderActions,p as columnHeaderCount,m as columnHeaderCountOver,d as columnHeaderReorderable,f as columnHeaderTitle,h as columnHeaderTrailing,s as columnItems,v as columnLoadingIndicator,r as columnOver,i as columnOverLimit,_ as columnPlaceholder,w as default,C as dragOverlay,y as item,S as itemDisabled,b as itemDragging,x as itemHandled};
 //# sourceMappingURL=kanbanBoard.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"kanbanBoard.module.mjs","names":[],"sources":["../../../../package/common/kanbanBoard/kanbanBoard.module.pcss"],"sourcesContent":[".board {\n  display: flex;\n  gap: var(--spacing-s);\n  overflow-x: auto;\n  align-items: flex-start;\n  width: 100%;\n}\n\n.column {\n  background: var(--background-accent-light);\n  border-radius: var(--default-border-radius);\n  box-shadow: var(--card-shadow);\n  flex: 1 1 0;\n  display: flex;\n  flex-direction: column;\n  border: 2px solid transparent;\n  transition:\n    border-color 0.15s ease,\n    background 0.15s ease;\n\n  &-empty {\n    flex: 0 1 0;\n    min-width: var(--kanban-empty-column-width, 140px);\n  }\n\n  &-over {\n    border-color: var(--primary-lighter);\n    background: var(--background-accent);\n  }\n\n  &-over-limit {\n    border-color: var(--warn-color);\n  }\n\n  /* A whole column being dragged over this one, reordering — distinct from -over (a card being\n     dropped into this column's card list), even though both are dashed-free solid borders here;\n     kept as a separate class so consumers can restyle one without affecting the other. */\n  &-drop-target {\n    border-color: var(--primary-color);\n    background: var(--background-accent);\n  }\n\n  /* Dims only the cards area, not the header — header actions (e.g. an \"add card\" button) are\n     consumer-controlled and often meant to stay fully interactive even while the column itself\n     is frozen for dragging, and opacity on an ancestor can't be undone by a child's own opacity. */\n  &-disabled &-items {\n    opacity: 0.6;\n  }\n\n  &-dragging {\n    opacity: 0.4;\n  }\n\n  &-drag-overlay {\n    cursor: grabbing;\n    box-shadow:\n      0 10px 30px rgb(0 0 0 / 25%),\n      var(--card-shadow);\n    min-width: 220px;\n  }\n\n  &-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--spacing-s);\n    padding: var(--spacing-m) var(--spacing-l);\n    background: var(--background-accent);\n    border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n    font-size: var(--header-small-font-size);\n    font-weight: var(--header-font-weight);\n    color: var(--text-color);\n    border-bottom: 1px solid var(--border-color);\n\n    &-reorderable {\n      cursor: grab;\n      -webkit-tap-highlight-color: transparent;\n      touch-action: none;\n\n      &:active {\n        cursor: grabbing;\n      }\n    }\n\n    &-title {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    &-count {\n      flex-shrink: 0;\n      font-size: var(--default-font-size);\n      font-weight: var(--default-font-weight);\n      color: var(--text-dark);\n\n      &-over {\n        color: var(--warn-color);\n        font-weight: var(--header-font-weight);\n      }\n    }\n\n    &-trailing {\n      display: flex;\n      align-items: center;\n      gap: var(--spacing-s);\n      flex-shrink: 0;\n    }\n\n    &-actions {\n      display: flex;\n      align-items: center;\n      gap: var(--spacing-s);\n    }\n  }\n\n  &-items {\n    padding: var(--spacing-m);\n    display: flex;\n    flex-direction: column;\n    gap: var(--spacing-m);\n    min-height: 80px;\n    flex: 1;\n  }\n\n  &-placeholder {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    color: var(--text-dark);\n    font-size: var(--default-font-size);\n  }\n\n  &-loading-indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--spacing-s) 0;\n  }\n\n  &-loading-spinner {\n    width: 2.6em;\n    height: 2.6em;\n  }\n}\n\n.item {\n  cursor: grab;\n  touch-action: none;\n\n  &:active {\n    cursor: grabbing;\n  }\n\n  &-dragging {\n    opacity: 0.4;\n  }\n\n  &-handled {\n    cursor: default;\n    touch-action: auto;\n\n    &:active {\n      cursor: default;\n    }\n\n    [data-drag-handle] {\n      cursor: grab;\n      -webkit-tap-highlight-color: transparent;\n      touch-action: none;\n    }\n\n    [data-drag-handle]:active {\n      cursor: grabbing;\n    }\n  }\n\n  &-disabled {\n    cursor: not-allowed;\n\n    &:active {\n      cursor: not-allowed;\n    }\n\n    [data-drag-handle] {\n      cursor: not-allowed;\n    }\n\n    [data-drag-handle]:active {\n      cursor: not-allowed;\n    }\n  }\n}\n\n.dragOverlay {\n  border-radius: var(--default-border-radius);\n  cursor: grabbing;\n  box-shadow:\n    0 10px 30px rgb(0 0 0 / 25%),\n    var(--card-shadow);\n}\n"],"mappings":""}
+{"version":3,"file":"kanbanBoard.module.mjs","names":[],"sources":["../../../../package/common/kanbanBoard/kanbanBoard.module.pcss"],"sourcesContent":[".board {\n  display: flex;\n  gap: var(--spacing-s);\n  overflow-x: auto;\n  align-items: flex-start;\n  width: 100%;\n}\n\n.column {\n  background: var(--background-accent-light);\n  border-radius: var(--default-border-radius);\n  box-shadow: var(--card-shadow);\n  flex: 1 1 0;\n  display: flex;\n  flex-direction: column;\n  border: 2px solid transparent;\n  transition:\n    border-color 0.15s ease,\n    background 0.15s ease;\n\n  &-empty {\n    flex: 0 1 0;\n    min-width: var(--kanban-empty-column-width, 140px);\n  }\n\n  &-over {\n    border-color: var(--primary-lighter);\n    background: var(--background-accent);\n  }\n\n  &-over-limit {\n    border-color: var(--warn-color);\n  }\n\n  /* A whole column being dragged over this one, reordering — distinct from -over (a card being\n     dropped into this column's card list), even though both are dashed-free solid borders here;\n     kept as a separate class so consumers can restyle one without affecting the other. */\n  &-drop-target {\n    border-color: var(--primary-color);\n    background: var(--background-accent);\n  }\n\n  /* Dims only the cards area, not the header — header actions (e.g. an \"add card\" button) are\n     consumer-controlled and often meant to stay fully interactive even while the column itself\n     is frozen for dragging, and opacity on an ancestor can't be undone by a child's own opacity. */\n  &-disabled &-items {\n    opacity: 0.6;\n  }\n\n  &-dragging {\n    opacity: 0.4;\n  }\n\n  &-drag-overlay {\n    cursor: grabbing;\n    box-shadow:\n      0 10px 30px rgb(0 0 0 / 25%),\n      var(--card-shadow);\n    min-width: 220px;\n  }\n\n  &-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--spacing-s);\n    padding: var(--spacing-m) var(--spacing-l);\n    background: var(--background-accent);\n    border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n    font-size: var(--header-small-font-size);\n    font-weight: var(--header-font-weight);\n    color: var(--text-color);\n    border-bottom: 1px solid var(--border-color);\n\n    &-reorderable {\n      cursor: grab;\n      -webkit-tap-highlight-color: transparent;\n      touch-action: none;\n\n      &:active {\n        cursor: grabbing;\n      }\n    }\n\n    &-title {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    &-count {\n      flex-shrink: 0;\n      font-size: var(--default-font-size);\n      font-weight: var(--default-font-weight);\n      color: var(--text-dark);\n\n      &-over {\n        color: var(--warn-color);\n        font-weight: var(--header-font-weight);\n      }\n    }\n\n    &-trailing {\n      display: flex;\n      align-items: center;\n      gap: var(--spacing-s);\n      flex-shrink: 0;\n    }\n\n    &-actions {\n      display: flex;\n      align-items: center;\n      gap: var(--spacing-s);\n    }\n  }\n\n  &-items {\n    padding: var(--spacing-m);\n    display: flex;\n    flex-direction: column;\n    gap: var(--spacing-m);\n    min-height: 80px;\n    flex: 1;\n  }\n\n  &-placeholder {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    color: var(--text-dark);\n    font-size: var(--default-font-size);\n  }\n\n  &-loading-indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--spacing-s) 0;\n  }\n}\n\n.item {\n  cursor: grab;\n  touch-action: none;\n\n  &:active {\n    cursor: grabbing;\n  }\n\n  &-dragging {\n    opacity: 0.4;\n  }\n\n  &-handled {\n    cursor: default;\n    touch-action: auto;\n\n    &:active {\n      cursor: default;\n    }\n\n    [data-drag-handle] {\n      cursor: grab;\n      -webkit-tap-highlight-color: transparent;\n      touch-action: none;\n    }\n\n    [data-drag-handle]:active {\n      cursor: grabbing;\n    }\n  }\n\n  &-disabled {\n    cursor: not-allowed;\n\n    &:active {\n      cursor: not-allowed;\n    }\n\n    [data-drag-handle] {\n      cursor: not-allowed;\n    }\n\n    [data-drag-handle]:active {\n      cursor: not-allowed;\n    }\n  }\n}\n\n.dragOverlay {\n  border-radius: var(--default-border-radius);\n  cursor: grabbing;\n  box-shadow:\n    0 10px 30px rgb(0 0 0 / 25%),\n    var(--card-shadow);\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-"use client";import{useLabels as e}from"../configProvider/useLabels.mjs";import t from"../actionButtons/actionButtons.module.mjs";import{ButtonStyleType as n}from"../button/button.types.mjs";import r from"../button/button.mjs";import{PopoverAlign as i,PopoverPlacement as a}from"../popover/popover.types.mjs";import o from"../popover/popover.mjs";import s from"../chip/chip.mjs";import c from"../chip/chipContainer.mjs";import l from"../modal/modal.mjs";import u from"../../services/klipy.mjs";import d from"../searchInput/searchInput.mjs";import f from"./components/gifPreview/gifPreview.mjs";import p from"./components/gifView/gifView.mjs";import m from"./klipyPicker.module.mjs";import{useMemo as h,useState as g}from"react";import _ from"classnames";import{Fragment as v,jsx as y,jsxs as b}from"react/jsx-runtime";var x={search:`Pick gif`};function S({className:S,token:C=``,isModal:w=!1,onSelect:T=()=>void 0,selected:E=null,labels:D}){let O=e(`KlipyPicker`,D,x),k=h(()=>new u(C),[C]),[A,j]=g(``),[M,N]=g([]),[P,F]=g([]),[I,L]=g(null),[R,z]=g(!1);async function B(e){if(j(e),!e.trim()){N([]),F([]),L(null);return}let[{results:t=[],next:n=null},{results:r=[]}]=await Promise.all([k.search(e,{limit:18,contentfilter:`medium`}),k.searchSuggestions(e)]);N(t),L(n),F(r)}async function V(){let{results:e=[],next:t=null}=await k.search(A,{limit:36,pos:I??void 0,contentfilter:`medium`});L(t),N(t=>[...t,...e])}async function H(e){await T(e),z(!1),e&&k.registerShare(A,e.id)}function U(){return y(c,{inline:!0,className:m.klipyPickerSuggestionsContainer,children:P.map(e=>y(s,{className:m.klipyPickerSuggestionsItem,text:e,onClick:()=>B(e)},e))})}function W(){return y(f,{previewItems:M,onSelect:H,onLoadAdditional:V})}function G(){return y(d,{label:O.search,value:A,onDebounce:B,onChange:j})}return w?b(`div`,{className:_(m.klipyPicker,S),children:[b(`div`,{className:t.actionButtons,children:[y(r,{onClick:()=>z(!0),children:`Pick gif`}),E&&y(r,{styleType:n.Delete,onClick:()=>H(null),children:`Remove gif`})]}),E&&y(p,{className:m.klipyPickerSelected,src:E}),y(l,{isOpen:R,onClose:()=>z(!1),children:b(`div`,{className:m.klipyPickerModalContent,children:[G(),U(),W()]})})]}):b(`div`,{className:_(m.klipyPicker,S),children:[y(o,{placement:a.Bottom,align:i.Start,isOpen:M.length>0&&R,onOpenChange:z,closeOnTriggerClick:!1,constrainWidth:!1,content:b(v,{children:[U(),W()]}),children:G()}),E&&y(r,{styleType:n.Delete,onClick:()=>H(null),children:`Remove gif`}),E&&y(p,{className:m.klipyPickerSelected,src:E})]})}export{S as default};
+"use client";import{useLabels as e}from"../configProvider/useLabels.mjs";import{ThemeColor as t}from"../themeProvider/color.types.mjs";import n from"../actionButtons/actionButtons.module.mjs";import{ButtonStyleType as r}from"../button/button.types.mjs";import i from"../button/button.mjs";import{PopoverAlign as a,PopoverPlacement as o}from"../popover/popover.types.mjs";import s from"../popover/popover.mjs";import c from"../chip/chip.mjs";import l from"../chip/chipContainer.mjs";import u from"../modal/modal.mjs";import d from"../../services/klipy.mjs";import f from"../searchInput/searchInput.mjs";import p from"./components/gifPreview/gifPreview.mjs";import m from"./components/gifView/gifView.mjs";import h from"./klipyPicker.module.mjs";import{useMemo as g,useState as _}from"react";import v from"classnames";import{Fragment as y,jsx as b,jsxs as x}from"react/jsx-runtime";var S={search:`Pick gif`};function C({className:C,token:w=``,isModal:T=!1,onSelect:E=()=>void 0,selected:D=null,labels:O}){let k=e(`KlipyPicker`,O,S),A=g(()=>new d(w),[w]),[j,M]=_(``),[N,P]=_([]),[F,I]=_([]),[L,R]=_(null),[z,B]=_(!1);async function V(e){if(M(e),!e.trim()){P([]),I([]),R(null);return}let[{results:t=[],next:n=null},{results:r=[]}]=await Promise.all([A.search(e,{limit:18,contentfilter:`medium`}),A.searchSuggestions(e)]);P(t),R(n),I(r)}async function H(){let{results:e=[],next:t=null}=await A.search(j,{limit:36,pos:L??void 0,contentfilter:`medium`});R(t),P(t=>[...t,...e])}async function U(e){await E(e),B(!1),e&&A.registerShare(j,e.id)}function W(){return b(l,{inline:!0,className:h.klipyPickerSuggestionsContainer,children:F.map(e=>b(c,{className:h.klipyPickerSuggestionsItem,text:e,onClick:()=>V(e)},e))})}function G(){return b(p,{previewItems:N,onSelect:U,onLoadAdditional:H})}function K(){return b(f,{label:k.search,value:j,onDebounce:V,onChange:M})}return T?x(`div`,{className:v(h.klipyPicker,C),children:[x(`div`,{className:n.actionButtons,children:[b(i,{onClick:()=>B(!0),children:`Pick gif`}),D&&b(i,{styleType:r.Filled,color:t.Error,onClick:()=>U(null),children:`Remove gif`})]}),D&&b(m,{className:h.klipyPickerSelected,src:D}),b(u,{isOpen:z,onClose:()=>B(!1),children:x(`div`,{className:h.klipyPickerModalContent,children:[K(),W(),G()]})})]}):x(`div`,{className:v(h.klipyPicker,C),children:[b(s,{placement:o.Bottom,align:a.Start,isOpen:N.length>0&&z,onOpenChange:B,closeOnTriggerClick:!1,constrainWidth:!1,content:x(y,{children:[W(),G()]}),children:K()}),D&&b(i,{styleType:r.Filled,color:t.Error,onClick:()=>U(null),children:`Remove gif`}),D&&b(m,{className:h.klipyPickerSelected,src:D})]})}export{C as default};
 //# sourceMappingURL=klipyPicker.mjs.map