@ahrowe/ui 0.26.0 → 0.28.0

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

@@ -1 +1 @@
-{"version":3,"file":"input.mjs","names":[],"sources":["../../../../package/common/input/input.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback, useId } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n  faPhone,\n  faPen,\n  faEnvelope,\n  faSearch,\n  faXmark,\n  faEye as passwordHiddenIcon,\n  faEyeSlash as passwordShownIcon,\n} from '@fortawesome/free-solid-svg-icons';\nimport Tooltip from 'components/common/tooltip';\nimport AnimatedIcon from 'components/common/animatedIcon';\nimport { useComponentDefaults } from 'components/common/configProvider';\nimport styles from './input.module.pcss';\nimport type { InputProps } from './input.types';\nimport { InputType, InputIconPosition } from './input.types';\n\nfunction keyboardActivationProps(onActivate?: ((event: React.SyntheticEvent) => void) | null) {\n  if (!onActivate) return undefined;\n  return {\n    role: 'button' as const,\n    tabIndex: 0,\n    onKeyDown: (event: React.KeyboardEvent) => {\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n      event.preventDefault();\n      onActivate(event);\n    },\n  };\n}\n\nfunction Input(props: InputProps) {\n  const {\n  name = '',\n  id,\n  label = '',\n  errorMessage = '',\n  isValid = true,\n  className = '',\n  style,\n  value = '',\n  icon = null,\n  iconPosition,\n  onChange = () => {},\n  onFocus: onFocusProp = null,\n  onBlur: onBlurProp = null,\n  onMouseEnter: onMouseEnterProp = null,\n  onMouseLeave: onMouseLeaveProp = null,\n  isUppercase = false,\n  isRequired = false,\n  tabIndex = 0,\n  type = undefined,\n  isRow = false,\n  onIconClick = null,\n  parse = null,\n  formValidator = null,\n  autoFocus = false,\n  suffix = null,\n  upperRightLabel = null,\n  labelInBorder = false,\n  showCancel = false,\n  onClearClicked,\n  min = null,\n  max = null,\n  placeholder = '',\n  useMatLabelStyle = true,\n  alwaysFloatLabel = false,\n  autoComplete = null,\n  onClick = () => null,\n  readOnly = false,\n  customInput,\n  alwaysShowCancel = false,\n  multiline = false,\n  rows,\n  autoResize = false,\n  classNames,\n  styles: slotStyles,\n  disabled = false,\n  ...rest\n  } = useComponentDefaults('Input', props);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [isPasswordShown, setIsPasswordShown] = useState(false);\n  const [, forceUpdate] = useState(0);\n\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n  const fvRef = useRef(formValidator);\n\n  const generatedId = useId();\n  const inputId = id || name || generatedId;\n\n  const resizeTextarea = useCallback(() => {\n    const el = inputRef.current;\n    if (!el || !autoResize) return;\n    el.style.height = 'auto';\n    el.style.height = `${el.scrollHeight}px`;\n  }, [autoResize]);\n\n  useEffect(() => {\n    resizeTextarea();\n  }, []);\n\n  useEffect(() => {\n    if (autoFocus && inputRef.current) {\n      setTimeout(() => { inputRef.current?.focus(); }, 1);\n    }\n  }, [autoFocus]);\n\n  useEffect(() => {\n    fvRef.current = formValidator;\n    const fv = fvRef.current;\n    if (!fv) return;\n    fv.label = label ?? '';\n    fv.validate();\n    const listener = () => forceUpdate(n => n + 1);\n    fv.registerOnUpdateListener(listener);\n    return () => { fv.removeOnUpdateListener(listener); };\n  }, [formValidator, label]);\n\n  const hasError = (): boolean => {\n    return formValidator\n      ? (formValidator.touched && formValidator.hasError())\n      : (!isValid || !!errorMessage);\n  };\n\n  const computedIsRequired = (): boolean => {\n    return !!(isRequired || (formValidator && formValidator.validators.find(\n      (v) => (v as { validatorId?: string }).validatorId === 'required'\n    )));\n  };\n\n  const onMouseEnterHandler = (event: React.MouseEvent) => {\n    setIsHovered(true);\n    if (onMouseEnterProp) onMouseEnterProp(event);\n  };\n\n  const onMouseLeaveHandler = (event: React.MouseEvent) => {\n    setIsHovered(false);\n    if (onMouseLeaveProp) onMouseLeaveProp(event);\n  };\n\n  const onFocusHandler = (event: React.FocusEvent) => {\n    setIsFocused(true);\n    if (onFocusProp) onFocusProp(event);\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    if (fvRef.current) fvRef.current.touched = true;\n    setIsFocused(false);\n    if (onBlurProp) onBlurProp(event);\n  };\n\n  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string): void => {\n    let parsedEvent: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | undefined;\n    let val: string;\n\n    if (typeof event !== 'string') {\n      parsedEvent = event;\n      val = event.target.value;\n    } else {\n      val = event;\n    }\n\n    if (parse) val = parse(val);\n    if (formValidator) formValidator.set(val);\n    if (onChange) onChange(val, parsedEvent);\n    resizeTextarea();\n  };\n\n  const getInputType = (): string | undefined => {\n    if (type === InputType.Email) return undefined;\n    if (type === InputType.Phone) return 'tel';\n    if (type === InputType.Search) return 'search';\n    if (type === 'password' && isPasswordShown) return 'text';\n    return type;\n  };\n\n  const getInputMode = (): React.HTMLAttributes<HTMLInputElement>['inputMode'] => {\n    if (type === InputType.Email) return 'email';\n    if (type === InputType.Phone) return 'tel';\n    if (type === InputType.Search) return 'search';\n    return undefined;\n  };\n\n  const hasIcon =\n    type &&\n    type !== InputType.Date &&\n    type !== InputType.Iban &&\n    type !== InputType.HasNoIcon;\n\n  const isFunctionalIconType = type === InputType.Search || type === InputType.Password;\n  const hasCustomIcon = !!icon;\n  const customIconApplies = hasCustomIcon && !isFunctionalIconType;\n\n  const defaultsLeftWithoutMatLabel = type === InputType.Email || type === InputType.Phone || type === InputType.Search;\n  const resolvedIconPosition = iconPosition ?? (!useMatLabelStyle && defaultsLeftWithoutMatLabel ? InputIconPosition.Left : InputIconPosition.Right);\n  const iconIsLeft = resolvedIconPosition === InputIconPosition.Left;\n\n  const iconProps = {\n    className: cx(styles.inputFieldIcon, {\n      [styles.inputFieldIconNotClickable]: !onIconClick,\n      [styles.inputFieldIconLeft]: iconIsLeft,\n    }),\n    onClick: onIconClick ?? undefined,\n    ...keyboardActivationProps(onIconClick),\n  };\n\n  const customIcon = icon as React.ReactElement<{ className?: string; onClick?: React.MouseEventHandler }> | null;\n  const resolvedCustomIconClick = onIconClick ?? customIcon?.props.onClick;\n  const renderedIcon = customIconApplies && customIcon\n    ? React.cloneElement(customIcon, {\n        className: cx(\n          styles.inputFieldIcon,\n          {\n            [styles.inputFieldIconNotClickable]: !resolvedCustomIconClick,\n            [styles.inputFieldIconLeft]: iconIsLeft,\n          },\n          customIcon.props.className,\n        ),\n        onClick: resolvedCustomIconClick,\n        ...keyboardActivationProps(resolvedCustomIconClick as ((event: React.SyntheticEvent) => void) | undefined),\n      })\n    : null;\n\n  const hasLeftIcon = (hasIcon || hasCustomIcon) && iconIsLeft;\n\n  const passwordIconProps = {\n    className: cx(styles.inputFieldIcon, styles.inputFieldIconPassword, { [styles.inputFieldIconLeft]: iconIsLeft }),\n    onClick: () => setIsPasswordShown(!isPasswordShown),\n    ...keyboardActivationProps(() => setIsPasswordShown(!isPasswordShown)),\n    'aria-label': isPasswordShown ? 'Hide password' : 'Show password',\n  };\n\n  const hasErr = hasError();\n\n  let editedLabel = label;\n  if (editedLabel && computedIsRequired()) editedLabel = `${editedLabel} *`;\n  const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}>*</span> : null;\n\n  const currVal = formValidator ? formValidator.value : value;\n  const showFocus = isFocused && !readOnly;\n  const shouldFloatLabel = useMatLabelStyle && (alwaysFloatLabel || showFocus || currVal || type === InputType.Date);\n\n  const isSearchCleared = type === InputType.Search && !!currVal;\n\n  const customInputProps = customInput?.props as\n    | { className?: string; style?: React.CSSProperties }\n    | undefined;\n\n  function handleClear() {\n    if (formValidator) formValidator.set('');\n    onChange?.('');\n    onClearClicked?.();\n  }\n\n  return (\n    <div className={cx(styles.input, { [styles.inputIconLeft]: hasLeftIcon }, className)} style={style}>\n      <label\n        htmlFor={inputId}\n        className={cx(styles.inputLabel, classNames?.label, {\n          [styles.inputLabelColumn]: !isRow,\n          [styles.inputLabelInBorder]: labelInBorder,\n        })}\n        style={slotStyles?.label}\n      >\n        {label && !useMatLabelStyle ? (\n          <span className={styles.inputLabelText}>\n            {label}\n            {requiredMark}\n          </span>\n        ) : null}\n        {upperRightLabel && (\n          <div className={cx(styles.inputUpperRightLabel, classNames?.upperRightLabel)} style={slotStyles?.upperRightLabel}>\n            {upperRightLabel}\n          </div>\n        )}\n        <div\n          className={cx(styles.inputContainer, { [styles.inputContainerMultiline]: multiline }, classNames?.container)}\n          style={slotStyles?.container}\n          onMouseEnter={onMouseEnterHandler}\n          onMouseLeave={onMouseLeaveHandler}\n        >\n          {renderedIcon}\n          {React.cloneElement(customInput || (multiline ? <textarea /> : <input />), {\n            ...rest,\n            className: cx(\n              styles.inputField,\n              {\n                [styles.inputFieldUppercase]: isUppercase,\n                [styles.inputFieldDate]: type === InputType.Date,\n                [styles.inputFieldDefault]: type !== InputType.Date,\n                [styles.inputFieldWithIcon]: hasIcon || hasCustomIcon,\n                [styles.inputFieldWithIconLeft]: hasLeftIcon,\n                [styles.inputFieldMultiline]: multiline,\n                [styles.inputFieldMultilineAutoResize]: multiline && autoResize,\n                [styles.inputFieldReadOnly]: readOnly && !disabled,\n              },\n              classNames?.input,\n              customInputProps?.className,\n            ),\n            style: customInputProps?.style || slotStyles?.input\n              ? { ...customInputProps?.style, ...slotStyles?.input }\n              : undefined,\n            name,\n            id: inputId,\n            value: currVal,\n            tabIndex,\n            ref: customInput ? undefined : inputRef,\n            onChange: onChangeHandler,\n            onFocus: onFocusHandler,\n            onBlur: onBlurHandler,\n            placeholder: !useMatLabelStyle ? placeholder : '',\n            autoComplete,\n            onClick,\n            readOnly,\n            disabled,\n            ...(!multiline && { type: getInputType(), inputMode: rest.inputMode ?? getInputMode(), min, max }),\n            ...(multiline && rows !== undefined && { rows }),\n          })}\n          {suffix && <div className={cx(styles.inputFieldSuffix, classNames?.suffix)} style={slotStyles?.suffix}>{suffix}</div>}\n        </div>\n        <fieldset\n          className={cx(styles.inputFieldset, classNames?.fieldset, {\n            [styles.inputFieldsetNoNotch]: !label,\n            [styles.inputContainerBorderFocused]: showFocus,\n            [styles.inputContainerBorderSearchFocused]:\n              type === InputType.Search && (showFocus || !!currVal),\n            [styles.inputContainerBorderInvalid]: hasErr,\n            [styles.inputContainerBorderError]: hasErr,\n          })}\n          style={slotStyles?.fieldset}\n        >\n          <legend\n            className={cx(styles.inputFieldsetLegend, {\n              [styles.inputFieldsetLegendActive]: shouldFloatLabel,\n            })}\n          >\n            <span>{editedLabel}</span>\n          </legend>\n        </fieldset>\n        {useMatLabelStyle && label && (\n          <div\n            className={cx(styles.inputMatLabel, {\n              [styles.inputMatLabelFloating]: shouldFloatLabel,\n              [styles.inputMatLabelMultiline]: multiline && !shouldFloatLabel,\n            })}\n          >\n            {label}\n            {requiredMark}\n          </div>\n        )}\n        {useMatLabelStyle && placeholder && (\n          <div\n            className={cx(\n              styles.inputPlaceholder,\n              showFocus && !currVal && styles.inputPlaceholderShown,\n              multiline && styles.inputPlaceholderMultiline,\n            )}\n          >\n            {placeholder}\n          </div>\n        )}\n        <Tooltip\n          variant=\"error\"\n          message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage || '')}\n          isVisible={hasErr && (isFocused || isHovered)}\n        />\n      </label>\n\n      {type === InputType.Phone && !hasCustomIcon && <FontAwesomeIcon icon={faPhone} {...iconProps} />}\n      {type === InputType.Email && !hasCustomIcon && <FontAwesomeIcon icon={faEnvelope} {...iconProps} />}\n      {type === InputType.Edit && !hasCustomIcon && <FontAwesomeIcon icon={faPen} {...iconProps} />}\n      {type === InputType.Search && (\n        <AnimatedIcon\n          icon={isSearchCleared ? faXmark : faSearch}\n          className={cx(styles.inputFieldIcon, {\n            [styles.inputFieldIconNotClickable]: !isSearchCleared,\n            [styles.inputFieldIconLeft]: iconIsLeft,\n          })}\n          onClick={isSearchCleared ? handleClear : undefined}\n          {...keyboardActivationProps(isSearchCleared ? handleClear : undefined)}\n          aria-label={isSearchCleared ? 'Clear search' : undefined}\n        />\n      )}\n      {type === InputType.Password && (\n        <FontAwesomeIcon\n          icon={isPasswordShown ? passwordShownIcon : passwordHiddenIcon}\n          {...passwordIconProps}\n        />\n      )}\n\n      {((showCancel && currVal && (isFocused || isHovered)) || alwaysShowCancel) && type !== InputType.Search && (\n        <FontAwesomeIcon\n          icon={faXmark}\n          className={styles.inputFieldIcon}\n          onClick={handleClear}\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n          {...keyboardActivationProps(handleClear)}\n          aria-label=\"Clear\"\n        />\n      )}\n    </div>\n  );\n}\n\nexport default Input;\n"],"mappings":"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"}
+{"version":3,"file":"input.mjs","names":[],"sources":["../../../../package/common/input/input.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback, useId } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n  faPhone,\n  faPen,\n  faEnvelope,\n  faSearch,\n  faXmark,\n  faEye as passwordHiddenIcon,\n  faEyeSlash as passwordShownIcon,\n} from '@fortawesome/free-solid-svg-icons';\nimport Tooltip from 'components/common/tooltip';\nimport AnimatedIcon from 'components/common/animatedIcon';\nimport { useComponentDefaults } from 'components/common/configProvider';\nimport styles from './input.module.pcss';\nimport type { InputProps } from './input.types';\nimport { InputType, InputIconPosition } from './input.types';\n\nfunction keyboardActivationProps(onActivate?: ((event: React.SyntheticEvent) => void) | null) {\n  if (!onActivate) return undefined;\n  return {\n    role: 'button' as const,\n    tabIndex: 0,\n    onKeyDown: (event: React.KeyboardEvent) => {\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n      event.preventDefault();\n      onActivate(event);\n    },\n  };\n}\n\nfunction Input(props: InputProps) {\n  const {\n  name = '',\n  id,\n  label = '',\n  errorMessage = '',\n  isValid = true,\n  className = '',\n  style,\n  value = '',\n  icon = null,\n  iconPosition,\n  onChange = () => {},\n  onFocus: onFocusProp = null,\n  onBlur: onBlurProp = null,\n  onMouseEnter: onMouseEnterProp = null,\n  onMouseLeave: onMouseLeaveProp = null,\n  isUppercase = false,\n  isRequired = false,\n  tabIndex = 0,\n  type = undefined,\n  isRow = false,\n  onIconClick = null,\n  parse = null,\n  formValidator = null,\n  autoFocus = false,\n  suffix = null,\n  upperRightLabel = null,\n  labelInBorder = false,\n  showCancel = false,\n  onClearClicked,\n  min = null,\n  max = null,\n  placeholder = '',\n  useMatLabelStyle = true,\n  alwaysFloatLabel = false,\n  autoComplete = null,\n  onClick = () => null,\n  readOnly = false,\n  customInput,\n  alwaysShowCancel = false,\n  multiline = false,\n  rows,\n  autoResize = false,\n  classNames,\n  styles: slotStyles,\n  disabled = false,\n  ...rest\n  } = useComponentDefaults('Input', props);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [isPasswordShown, setIsPasswordShown] = useState(false);\n  const [, forceUpdate] = useState(0);\n\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n  const fvRef = useRef(formValidator);\n\n  const generatedId = useId();\n  const inputId = id || name || generatedId;\n\n  const currVal = formValidator ? formValidator.value : value;\n  const didSetAutoHeightRef = useRef(false);\n\n  const resizeTextarea = useCallback(() => {\n    const el = inputRef.current;\n    if (!el) return;\n    if (!autoResize) {\n      // Only undo a height this set, so an explicit one from `styles.input` survives.\n      if (didSetAutoHeightRef.current) {\n        el.style.height = '';\n        didSetAutoHeightRef.current = false;\n      }\n      return;\n    }\n    el.style.height = 'auto';\n    el.style.height = `${el.scrollHeight}px`;\n    didSetAutoHeightRef.current = true;\n  }, [autoResize]);\n\n  // `currVal` is a dependency because the value can change without passing through\n  // `onChangeHandler`: the clear button, a parent resetting it, or `formValidator.set` elsewhere.\n  useEffect(() => {\n    resizeTextarea();\n  }, [resizeTextarea, currVal]);\n\n  useEffect(() => {\n    if (autoFocus && inputRef.current) {\n      setTimeout(() => { inputRef.current?.focus(); }, 1);\n    }\n  }, [autoFocus]);\n\n  useEffect(() => {\n    fvRef.current = formValidator;\n    const fv = fvRef.current;\n    if (!fv) return;\n    fv.label = label ?? '';\n    fv.validate();\n    const listener = () => forceUpdate(n => n + 1);\n    fv.registerOnUpdateListener(listener);\n    return () => { fv.removeOnUpdateListener(listener); };\n  }, [formValidator, label]);\n\n  const hasError = (): boolean => {\n    return formValidator\n      ? (formValidator.touched && formValidator.hasError())\n      : (!isValid || !!errorMessage);\n  };\n\n  const computedIsRequired = (): boolean => {\n    return !!(isRequired || (formValidator && formValidator.validators.find(\n      (v) => (v as { validatorId?: string }).validatorId === 'required'\n    )));\n  };\n\n  const onMouseEnterHandler = (event: React.MouseEvent) => {\n    setIsHovered(true);\n    if (onMouseEnterProp) onMouseEnterProp(event);\n  };\n\n  const onMouseLeaveHandler = (event: React.MouseEvent) => {\n    setIsHovered(false);\n    if (onMouseLeaveProp) onMouseLeaveProp(event);\n  };\n\n  const onFocusHandler = (event: React.FocusEvent) => {\n    setIsFocused(true);\n    if (onFocusProp) onFocusProp(event);\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    if (fvRef.current) fvRef.current.touched = true;\n    setIsFocused(false);\n    if (onBlurProp) onBlurProp(event);\n  };\n\n  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string): void => {\n    let parsedEvent: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | undefined;\n    let val: string;\n\n    if (typeof event !== 'string') {\n      parsedEvent = event;\n      val = event.target.value;\n    } else {\n      val = event;\n    }\n\n    if (parse) val = parse(val);\n    if (formValidator) formValidator.set(val);\n    if (onChange) onChange(val, parsedEvent);\n    resizeTextarea();\n  };\n\n  const getInputType = (): string | undefined => {\n    if (type === InputType.Email) return undefined;\n    if (type === InputType.Phone) return 'tel';\n    if (type === InputType.Search) return 'search';\n    if (type === 'password' && isPasswordShown) return 'text';\n    return type;\n  };\n\n  const getInputMode = (): React.HTMLAttributes<HTMLInputElement>['inputMode'] => {\n    if (type === InputType.Email) return 'email';\n    if (type === InputType.Phone) return 'tel';\n    if (type === InputType.Search) return 'search';\n    return undefined;\n  };\n\n  const hasIcon =\n    type &&\n    type !== InputType.Date &&\n    type !== InputType.Iban &&\n    type !== InputType.HasNoIcon;\n\n  const isFunctionalIconType = type === InputType.Search || type === InputType.Password;\n  const hasCustomIcon = !!icon;\n  const customIconApplies = hasCustomIcon && !isFunctionalIconType;\n\n  const defaultsLeftWithoutMatLabel = type === InputType.Email || type === InputType.Phone || type === InputType.Search;\n  const resolvedIconPosition = iconPosition ?? (!useMatLabelStyle && defaultsLeftWithoutMatLabel ? InputIconPosition.Left : InputIconPosition.Right);\n  const iconIsLeft = resolvedIconPosition === InputIconPosition.Left;\n\n  const iconProps = {\n    className: cx(styles.inputFieldIcon, {\n      [styles.inputFieldIconNotClickable]: !onIconClick,\n      [styles.inputFieldIconLeft]: iconIsLeft,\n    }),\n    onClick: onIconClick ?? undefined,\n    ...keyboardActivationProps(onIconClick),\n  };\n\n  const customIcon = icon as React.ReactElement<{ className?: string; onClick?: React.MouseEventHandler }> | null;\n  const resolvedCustomIconClick = onIconClick ?? customIcon?.props.onClick;\n  const renderedIcon = customIconApplies && customIcon\n    ? React.cloneElement(customIcon, {\n        className: cx(\n          styles.inputFieldIcon,\n          {\n            [styles.inputFieldIconNotClickable]: !resolvedCustomIconClick,\n            [styles.inputFieldIconLeft]: iconIsLeft,\n          },\n          customIcon.props.className,\n        ),\n        onClick: resolvedCustomIconClick,\n        ...keyboardActivationProps(resolvedCustomIconClick as ((event: React.SyntheticEvent) => void) | undefined),\n      })\n    : null;\n\n  const hasLeftIcon = (hasIcon || hasCustomIcon) && iconIsLeft;\n\n  const passwordIconProps = {\n    className: cx(styles.inputFieldIcon, styles.inputFieldIconPassword, { [styles.inputFieldIconLeft]: iconIsLeft }),\n    onClick: () => setIsPasswordShown(!isPasswordShown),\n    ...keyboardActivationProps(() => setIsPasswordShown(!isPasswordShown)),\n    'aria-label': isPasswordShown ? 'Hide password' : 'Show password',\n  };\n\n  const hasErr = hasError();\n\n  let editedLabel = label;\n  if (editedLabel && computedIsRequired()) editedLabel = `${editedLabel} *`;\n  const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}>*</span> : null;\n\n  const showFocus = isFocused && !readOnly;\n  const shouldFloatLabel = useMatLabelStyle && (alwaysFloatLabel || showFocus || currVal || type === InputType.Date);\n\n  const isSearchCleared = type === InputType.Search && !!currVal;\n\n  const customInputProps = customInput?.props as\n    | { className?: string; style?: React.CSSProperties }\n    | undefined;\n\n  function handleClear() {\n    if (formValidator) formValidator.set('');\n    onChange?.('');\n    onClearClicked?.();\n  }\n\n  return (\n    <div className={cx(styles.input, { [styles.inputIconLeft]: hasLeftIcon }, className)} style={style}>\n      <label\n        htmlFor={inputId}\n        className={cx(styles.inputLabel, classNames?.label, {\n          [styles.inputLabelColumn]: !isRow,\n          [styles.inputLabelInBorder]: labelInBorder,\n        })}\n        style={slotStyles?.label}\n      >\n        {label && !useMatLabelStyle ? (\n          <span className={styles.inputLabelText}>\n            {label}\n            {requiredMark}\n          </span>\n        ) : null}\n        {upperRightLabel && (\n          <div className={cx(styles.inputUpperRightLabel, classNames?.upperRightLabel)} style={slotStyles?.upperRightLabel}>\n            {upperRightLabel}\n          </div>\n        )}\n        <div\n          className={cx(styles.inputContainer, { [styles.inputContainerMultiline]: multiline }, classNames?.container)}\n          style={slotStyles?.container}\n          onMouseEnter={onMouseEnterHandler}\n          onMouseLeave={onMouseLeaveHandler}\n        >\n          {renderedIcon}\n          {React.cloneElement(customInput || (multiline ? <textarea /> : <input />), {\n            ...rest,\n            className: cx(\n              styles.inputField,\n              {\n                [styles.inputFieldUppercase]: isUppercase,\n                [styles.inputFieldDate]: type === InputType.Date,\n                [styles.inputFieldDefault]: type !== InputType.Date,\n                [styles.inputFieldWithIcon]: hasIcon || hasCustomIcon,\n                [styles.inputFieldWithIconLeft]: hasLeftIcon,\n                [styles.inputFieldMultiline]: multiline,\n                [styles.inputFieldMultilineAutoResize]: multiline && autoResize,\n                [styles.inputFieldReadOnly]: readOnly && !disabled,\n              },\n              classNames?.input,\n              customInputProps?.className,\n            ),\n            style: customInputProps?.style || slotStyles?.input\n              ? { ...customInputProps?.style, ...slotStyles?.input }\n              : undefined,\n            name,\n            id: inputId,\n            value: currVal,\n            tabIndex,\n            ref: customInput ? undefined : inputRef,\n            onChange: onChangeHandler,\n            onFocus: onFocusHandler,\n            onBlur: onBlurHandler,\n            placeholder: !useMatLabelStyle ? placeholder : '',\n            autoComplete,\n            onClick,\n            readOnly,\n            disabled,\n            ...(!multiline && { type: getInputType(), inputMode: rest.inputMode ?? getInputMode(), min, max }),\n            ...(multiline && rows !== undefined && { rows }),\n          })}\n          {suffix && <div className={cx(styles.inputFieldSuffix, classNames?.suffix)} style={slotStyles?.suffix}>{suffix}</div>}\n        </div>\n        <fieldset\n          className={cx(styles.inputFieldset, classNames?.fieldset, {\n            [styles.inputFieldsetNoNotch]: !label,\n            [styles.inputContainerBorderFocused]: showFocus,\n            [styles.inputContainerBorderSearchFocused]:\n              type === InputType.Search && (showFocus || !!currVal),\n            [styles.inputContainerBorderInvalid]: hasErr,\n            [styles.inputContainerBorderError]: hasErr,\n          })}\n          style={slotStyles?.fieldset}\n        >\n          <legend\n            className={cx(styles.inputFieldsetLegend, {\n              [styles.inputFieldsetLegendActive]: shouldFloatLabel,\n            })}\n          >\n            <span>{editedLabel}</span>\n          </legend>\n        </fieldset>\n        {useMatLabelStyle && label && (\n          <div\n            className={cx(styles.inputMatLabel, {\n              [styles.inputMatLabelFloating]: shouldFloatLabel,\n              [styles.inputMatLabelMultiline]: multiline && !shouldFloatLabel,\n            })}\n          >\n            {label}\n            {requiredMark}\n          </div>\n        )}\n        {useMatLabelStyle && placeholder && (\n          <div\n            className={cx(\n              styles.inputPlaceholder,\n              showFocus && !currVal && styles.inputPlaceholderShown,\n              multiline && styles.inputPlaceholderMultiline,\n            )}\n          >\n            {placeholder}\n          </div>\n        )}\n        <Tooltip\n          variant=\"error\"\n          message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage || '')}\n          isVisible={hasErr && (isFocused || isHovered)}\n        />\n      </label>\n\n      {type === InputType.Phone && !hasCustomIcon && <FontAwesomeIcon icon={faPhone} {...iconProps} />}\n      {type === InputType.Email && !hasCustomIcon && <FontAwesomeIcon icon={faEnvelope} {...iconProps} />}\n      {type === InputType.Edit && !hasCustomIcon && <FontAwesomeIcon icon={faPen} {...iconProps} />}\n      {type === InputType.Search && (\n        <AnimatedIcon\n          icon={isSearchCleared ? faXmark : faSearch}\n          className={cx(styles.inputFieldIcon, {\n            [styles.inputFieldIconNotClickable]: !isSearchCleared,\n            [styles.inputFieldIconLeft]: iconIsLeft,\n          })}\n          onClick={isSearchCleared ? handleClear : undefined}\n          {...keyboardActivationProps(isSearchCleared ? handleClear : undefined)}\n          aria-label={isSearchCleared ? 'Clear search' : undefined}\n        />\n      )}\n      {type === InputType.Password && (\n        <FontAwesomeIcon\n          icon={isPasswordShown ? passwordShownIcon : passwordHiddenIcon}\n          {...passwordIconProps}\n        />\n      )}\n\n      {((showCancel && currVal && (isFocused || isHovered)) || alwaysShowCancel) && type !== InputType.Search && (\n        <FontAwesomeIcon\n          icon={faXmark}\n          className={styles.inputFieldIcon}\n          onClick={handleClear}\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n          {...keyboardActivationProps(handleClear)}\n          aria-label=\"Clear\"\n        />\n      )}\n    </div>\n  );\n}\n\nexport default Input;\n"],"mappings":"8oBAmBA,SAAS,EAAwB,EAA6D,CACvF,KACL,MAAO,CACL,KAAM,SACN,SAAU,EACV,UAAY,GAA+B,CACrC,EAAM,MAAQ,SAAW,EAAM,MAAQ,MAC3C,EAAM,eAAe,EACrB,EAAW,CAAK,EAClB,CACF,CACF,CAEA,SAAS,EAAM,EAAmB,CAChC,GAAM,CACN,QAAO,GACP,MACA,QAAQ,GACR,gBAAe,GACf,WAAU,GACV,aAAY,GACZ,SACA,SAAQ,GACR,QAAO,KACP,gBACA,eAAiB,CAAC,EAClB,QAAS,EAAc,KACvB,OAAQ,EAAa,KACrB,aAAc,EAAmB,KACjC,aAAc,GAAmB,KACjC,eAAc,GACd,cAAa,GACb,YAAW,EACX,OAAO,IAAA,GACP,SAAQ,GACR,cAAc,KACd,SAAQ,KACR,gBAAgB,KAChB,aAAY,GACZ,UAAS,KACT,mBAAkB,KAClB,iBAAgB,GAChB,cAAa,GACb,kBACA,OAAM,KACN,OAAM,KACN,cAAc,GACd,mBAAmB,GACnB,oBAAmB,GACnB,gBAAe,KACf,eAAgB,KAChB,WAAW,GACX,cACA,oBAAmB,GACnB,YAAY,GACZ,QACA,aAAa,GACb,aACA,OAAQ,EACR,YAAW,GACX,GAAG,GACC,EAAqB,QAAS,CAAK,EACjC,CAAC,EAAW,IAAgB,EAAS,EAAK,EAC1C,CAAC,GAAW,GAAgB,EAAS,EAAK,EAC1C,CAAC,EAAiB,GAAsB,EAAS,EAAK,EACtD,EAAG,IAAe,EAAS,CAAC,EAE5B,EAAW,EAA+C,IAAI,EAC9D,EAAQ,EAAO,CAAa,EAE5B,GAAc,GAAM,EACpB,EAAU,IAAM,IAAQ,GAExB,EAAU,EAAgB,EAAc,MAAQ,GAChD,EAAsB,EAAO,EAAK,EAElC,EAAiB,OAAkB,CACvC,IAAM,EAAK,EAAS,QACf,KACL,IAAI,CAAC,EAAY,CAEf,AAEE,EAAoB,WADpB,EAAG,MAAM,OAAS,GACY,IAEhC,MACF,CACA,EAAG,MAAM,OAAS,OAClB,EAAG,MAAM,OAAS,GAAG,EAAG,aAAa,IACrC,EAAoB,QAAU,EAH9B,CAIF,EAAG,CAAC,CAAU,CAAC,EAIf,MAAgB,CACd,EAAe,CACjB,EAAG,CAAC,EAAgB,CAAO,CAAC,EAE5B,MAAgB,CACV,IAAa,EAAS,SACxB,eAAiB,CAAE,EAAS,SAAS,MAAM,CAAG,EAAG,CAAC,CAEtD,EAAG,CAAC,EAAS,CAAC,EAEd,MAAgB,CACd,EAAM,QAAU,EAChB,IAAM,EAAK,EAAM,QACjB,GAAI,CAAC,EAAI,OACT,EAAG,MAAQ,GAAS,GACpB,EAAG,SAAS,EACZ,IAAM,MAAiB,GAAY,GAAK,EAAI,CAAC,EAE7C,OADA,EAAG,yBAAyB,CAAQ,MACvB,CAAE,EAAG,uBAAuB,CAAQ,CAAG,CACtD,EAAG,CAAC,EAAe,CAAK,CAAC,EAEzB,IAAM,OACG,EACF,EAAc,SAAW,EAAc,SAAS,EAChD,CAAC,IAAW,CAAC,CAAC,GAGf,OACG,CAAC,EAAE,IAAe,GAAiB,EAAc,WAAW,KAChE,GAAO,EAA+B,cAAgB,UACzD,GAGI,GAAuB,GAA4B,CACvD,EAAa,EAAI,EACb,GAAkB,EAAiB,CAAK,CAC9C,EAEM,GAAuB,GAA4B,CACvD,EAAa,EAAK,EACd,IAAkB,GAAiB,CAAK,CAC9C,EAEM,GAAkB,GAA4B,CAClD,GAAa,EAAI,EACb,GAAa,EAAY,CAAK,CACpC,EAEM,GAAiB,GAA4B,CAC7C,EAAM,UAAS,EAAM,QAAQ,QAAU,IAC3C,GAAa,EAAK,EACd,GAAY,EAAW,CAAK,CAClC,EAEM,GAAmB,GAAoF,CAC3G,IAAI,EACA,EAEA,OAAO,GAAU,SAInB,EAAM,GAHN,EAAc,EACd,EAAM,EAAM,OAAO,OAKjB,KAAO,EAAM,GAAM,CAAG,GACtB,GAAe,EAAc,IAAI,CAAG,EACpC,GAAU,EAAS,EAAK,CAAW,EACvC,EAAe,CACjB,EAEM,OAAyC,CACzC,OAAS,EAAU,MAIvB,OAHI,IAAS,EAAU,MAAc,MACjC,IAAS,EAAU,OAAe,SAClC,IAAS,YAAc,EAAwB,OAC5C,CACT,EAEM,OAA0E,CAC9E,GAAI,IAAS,EAAU,MAAO,MAAO,QACrC,GAAI,IAAS,EAAU,MAAO,MAAO,MACrC,GAAI,IAAS,EAAU,OAAQ,MAAO,QAExC,EAEM,GACJ,GACA,IAAS,EAAU,MACnB,IAAS,EAAU,MACnB,IAAS,EAAU,UAEf,GAAuB,IAAS,EAAU,QAAU,IAAS,EAAU,SACvE,EAAgB,CAAC,CAAC,GAClB,GAAoB,GAAiB,CAAC,GAEtC,GAA8B,IAAS,EAAU,OAAS,IAAS,EAAU,OAAS,IAAS,EAAU,OAEzG,GADuB,KAAiB,CAAC,GAAoB,GAA8B,EAAkB,KAAO,EAAkB,UAChG,EAAkB,KAExD,EAAY,CAChB,UAAW,EAAG,EAAO,eAAgB,EAClC,EAAO,4BAA6B,CAAC,GACrC,EAAO,oBAAqB,CAC/B,CAAC,EACD,QAAS,GAAe,IAAA,GACxB,GAAG,EAAwB,CAAW,CACxC,EAEM,EAAa,GACb,EAA0B,GAAe,GAAY,MAAM,QAC3D,GAAe,IAAqB,EACtC,GAAM,aAAa,EAAY,CAC7B,UAAW,EACT,EAAO,eACP,EACG,EAAO,4BAA6B,CAAC,GACrC,EAAO,oBAAqB,CAC/B,EACA,EAAW,MAAM,SACnB,EACA,QAAS,EACT,GAAG,EAAwB,CAA8E,CAC3G,CAAC,EACD,KAEE,IAAe,IAAW,IAAkB,EAE5C,GAAoB,CACxB,UAAW,EAAG,EAAO,eAAgB,EAAO,uBAAwB,EAAG,EAAO,oBAAqB,CAAW,CAAC,EAC/G,YAAe,EAAmB,CAAC,CAAe,EAClD,GAAG,MAA8B,EAAmB,CAAC,CAAe,CAAC,EACrE,aAAc,EAAkB,gBAAkB,eACpD,EAEM,EAAS,GAAS,EAEpB,EAAc,EACd,GAAe,GAAmB,IAAG,EAAc,GAAG,EAAY,KACtE,IAAM,GAAe,GAAmB,EAAI,EAAC,OAAD,CAAM,UAAW,EAAO,sBAAc,GAAO,CAAA,EAAI,KAEvF,EAAY,GAAa,CAAC,EAC1B,EAAmB,IAAqB,IAAoB,GAAa,GAAW,IAAS,EAAU,MAEvG,EAAkB,IAAS,EAAU,QAAU,CAAC,CAAC,EAEjD,EAAmB,GAAa,MAItC,SAAS,GAAc,CACjB,GAAe,EAAc,IAAI,EAAE,EACvC,IAAW,EAAE,EACb,KAAiB,CACnB,CAEA,OACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,MAAO,EAAG,EAAO,eAAgB,EAAY,EAAG,EAAS,EAAU,kBAA7F,CACE,EAAC,QAAD,CACE,QAAS,EACT,UAAW,EAAG,EAAO,WAAY,GAAY,MAAO,EACjD,EAAO,kBAAmB,CAAC,IAC3B,EAAO,oBAAqB,EAC/B,CAAC,EACD,MAAO,GAAY,eANrB,CAQG,GAAS,CAAC,EACT,EAAC,OAAD,CAAM,UAAW,EAAO,wBAAxB,CACG,EACA,EACG,IACJ,KACH,IACC,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,qBAAsB,GAAY,eAAe,EAAG,MAAO,GAAY,yBAC9F,EACE,CAAA,EAEP,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,eAAgB,EAAG,EAAO,yBAA0B,CAAU,EAAG,GAAY,SAAS,EAC3G,MAAO,GAAY,UACnB,aAAc,GACd,aAAc,YAJhB,CAMG,GACA,GAAM,aAAa,GAA4B,EAAZ,EAAa,WAAe,QAAhB,CAAW,CAAY,EAAI,CACzE,GAAG,EACH,UAAW,EACT,EAAO,WACP,EACG,EAAO,qBAAsB,IAC7B,EAAO,gBAAiB,IAAS,EAAU,MAC3C,EAAO,mBAAoB,IAAS,EAAU,MAC9C,EAAO,oBAAqB,IAAW,GACvC,EAAO,wBAAyB,IAChC,EAAO,qBAAsB,GAC7B,EAAO,+BAAgC,GAAa,GACpD,EAAO,oBAAqB,GAAY,CAAC,EAC5C,EACA,GAAY,MACZ,GAAkB,SACpB,EACA,MAAO,GAAkB,OAAS,GAAY,MAC1C,CAAE,GAAG,GAAkB,MAAO,GAAG,GAAY,KAAM,EACnD,IAAA,GACJ,QACA,GAAI,EACJ,MAAO,EACP,YACA,IAAK,EAAc,IAAA,GAAY,EAC/B,SAAU,GACV,QAAS,GACT,OAAQ,GACR,YAAc,EAAiC,GAAd,EACjC,gBACA,WACA,WACA,YACA,GAAI,CAAC,GAAa,CAAE,KAAM,GAAa,EAAG,UAAW,EAAK,WAAa,GAAa,EAAG,OAAK,MAAI,EAChG,GAAI,GAAa,KAAS,IAAA,IAAa,CAAE,OAAK,CAChD,CAAC,EACA,IAAU,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,iBAAkB,GAAY,MAAM,EAAG,MAAO,GAAY,gBAAS,EAAY,CAAA,CACjH,IACL,EAAC,WAAD,CACE,UAAW,EAAG,EAAO,cAAe,GAAY,SAAU,EACvD,EAAO,sBAAuB,CAAC,GAC/B,EAAO,6BAA8B,GACrC,EAAO,mCACN,IAAS,EAAU,SAAW,GAAa,CAAC,CAAC,IAC9C,EAAO,6BAA8B,GACrC,EAAO,2BAA4B,CACtC,CAAC,EACD,MAAO,GAAY,kBAEnB,EAAC,SAAD,CACE,UAAW,EAAG,EAAO,oBAAqB,EACvC,EAAO,2BAA4B,CACtC,CAAC,WAED,EAAC,OAAD,CAAA,SAAO,CAAkB,CAAA,CACnB,CAAA,CACA,CAAA,EACT,GAAoB,GACnB,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,cAAe,EACjC,EAAO,uBAAwB,GAC/B,EAAO,wBAAyB,GAAa,CAAC,CACjD,CAAC,WAJH,CAMG,EACA,EACE,IAEN,GAAoB,GACnB,EAAC,MAAD,CACE,UAAW,EACT,EAAO,iBACP,GAAa,CAAC,GAAW,EAAO,sBAChC,GAAa,EAAO,yBACtB,WAEC,CACE,CAAA,EAEP,EAAC,EAAD,CACE,QAAQ,QACR,QAAS,EAAgB,EAAc,uBAAuB,EAAK,IAAgB,GACnF,UAAW,IAAW,GAAa,GACpC,CAAA,CACI,IAEN,IAAS,EAAU,OAAS,CAAC,GAAiB,EAAC,EAAD,CAAiB,KAAM,GAAS,GAAI,CAAY,CAAA,EAC9F,IAAS,EAAU,OAAS,CAAC,GAAiB,EAAC,EAAD,CAAiB,KAAM,GAAY,GAAI,CAAY,CAAA,EACjG,IAAS,EAAU,MAAQ,CAAC,GAAiB,EAAC,EAAD,CAAiB,KAAM,GAAO,GAAI,CAAY,CAAA,EAC3F,IAAS,EAAU,QAClB,EAAC,EAAD,CACE,KAAM,EAAkB,GAAU,GAClC,UAAW,EAAG,EAAO,eAAgB,EAClC,EAAO,4BAA6B,CAAC,GACrC,EAAO,oBAAqB,CAC/B,CAAC,EACD,QAAS,EAAkB,EAAc,IAAA,GACzC,GAAI,EAAwB,EAAkB,EAAc,IAAA,EAAS,EACrE,aAAY,EAAkB,eAAiB,IAAA,EAChD,CAAA,EAEF,IAAS,EAAU,UAClB,EAAC,EAAD,CACE,KAAM,EAAkB,GAAoB,GAC5C,GAAI,EACL,CAAA,GAGA,IAAc,IAAY,GAAa,KAAe,KAAqB,IAAS,EAAU,QAC/F,EAAC,EAAD,CACE,KAAM,GACN,UAAW,EAAO,eAClB,QAAS,EACT,iBAAoB,EAAa,EAAI,EACrC,iBAAoB,EAAa,EAAK,EACtC,GAAI,EAAwB,CAAW,EACvC,aAAW,OACZ,CAAA,CAEA,GAET"}

package/dist/esm/common/inputDropdown/inputDropdown.mjs

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../bodyEnd/bodyEnd.mjs";import{useFloatingPosition as n}from"../floatingMenu/useFloatingPosition.mjs";import r from"../input/input.mjs";import i from"./inputDropdown.module.mjs";import{useCallback as a,useEffect as o,useLayoutEffect as s,useRef as c,useState as l}from"react";import u from"classnames";import{jsx as d,jsxs as f}from"react/jsx-runtime";function p(e,t){return t?t.value??``:e??``}function m(e,t){let n=t.find(t=>t.value===e);return n?n.label??n.value:e}function h(h){let{label:g=``,value:_=``,formValidator:v=null,error:y,isRequired:b=!1,items:x=[],allowCustomValue:S=!1,className:C,style:w,classNames:T,styles:E,onSelect:D=()=>null,onChange:O,placeholder:k=``,readOnly:A=!1,...j}=e(`InputDropdown`,h),M=p(_,v),[,N]=l(0),P=c(v);o(()=>{if(P.current=v,!v)return;let e=()=>N(e=>e+1);return v.registerOnUpdateListener(e),()=>{v.removeOnUpdateListener(e)}},[v]);let F=b||!!v?.validators.find(e=>e.validatorId===`required`),[I,L]=l(()=>m(M,x)),[R,z]=l(M),[B,V]=l(!1),[H,U]=l(null),W=c(null),G=c(null),K=c(null),q=E?.dropdown?.fontSize;if(s(()=>{let e=G.current,t=K.current;!B||!e||!t||q!=null||(t.style.fontSize=window.getComputedStyle(e).fontSize)},[B,q]),n({isOpen:B,triggerRef:G,anchorRef:K,panelRef:K,flipClassName:i.dropdownFlip}),M!==R){z(M);let e=x.find(e=>e.value===M);e?L(e.label??e.value):S&&L(M)}let J=x.filter(e=>(e.label??e.value).toLowerCase().includes(I.toLowerCase())),Y=()=>{A||(W.current&&=(clearTimeout(W.current),null),V(!0))},X=()=>{P.current&&(P.current.touched=!0),W.current=setTimeout(()=>{V(!1),W.current=null,S||L(m(M,x))},100)},Z=a(e=>{L(e.label??e.value),V(!1),U(null),v&&v.set(e.value),O&&O(e.value),D(e.value)},[v,O,D]),Q=a(e=>{A||(e.key===`ArrowUp`?(e.preventDefault(),U(e=>e?e-1:null)):e.key===`ArrowDown`?(e.preventDefault(),U(e=>e===null?0:Math.min(e+1,J.length-1))):e.key===`Enter`&&(H!==null&&J[H]?Z(J[H]):S&&(V(!1),U(null))))},[J,H,Z,S,A]);return f(`div`,{...j,ref:G,className:u(i.inputDropdown,T?.root,C),style:{...E?.root,...w},onFocus:Y,onBlur:X,onKeyDown:Q,children:[d(r,{label:g,value:I,readOnly:A,formValidator:null,isRequired:F,isValid:v?v.touched?!v.hasError():!0:!y,errorMessage:v?v.touched?v.getCurrentErrorMessage()??``:``:y??``,onChange:e=>{if(L(e),U(null),V(!0),S)v&&v.set(e),O&&O(e);else if(e===``)v&&v.set(``),O&&O(``),D(``);else{let t=x.find(t=>(t.label??t.value).toLowerCase()===e.toLowerCase());t&&(v&&v.set(t.value),O&&O(t.value),D(t.value))}},placeholder:k}),B&&!A&&d(t,{children:d(`div`,{ref:K,className:u(i.dropdown,i.dropdownShown,T?.dropdown),style:E?.dropdown,children:d(`div`,{className:i.dropdownScroll,children:J.map((e,t)=>d(`div`,{className:u(i.dropdownItem,H===t&&i.dropdownItemHighlighted,T?.item),style:E?.item,onMouseDown:e=>e.preventDefault(),onClick:()=>Z(e),children:e.label??e.value},`${t}_${e.label}_${e.value}`))})})})]})}export{h as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../bodyEnd/bodyEnd.mjs";import{useFloatingPosition as n}from"../floatingMenu/useFloatingPosition.mjs";import r from"../input/input.mjs";import i from"./inputDropdown.module.mjs";import{useCallback as a,useEffect as o,useLayoutEffect as s,useMemo as c,useRef as l,useState as u}from"react";import d from"classnames";import{jsx as f,jsxs as p}from"react/jsx-runtime";function m(e,t){return t?t.value??``:e??``}function h(e,t){let n=t.find(t=>t.value===e);return n?n.label??n.value:e}function g(g){let{label:_=``,value:v=``,formValidator:y=null,error:b,isRequired:x=!1,items:S=[],allowCustomValue:C=!1,maxItems:w=100,className:T,style:E,classNames:D,styles:O,onSelect:k=()=>null,onChange:A,placeholder:j=``,readOnly:M=!1,...N}=e(`InputDropdown`,g),P=m(v,y),[,F]=u(0),I=l(y);o(()=>{if(I.current=y,!y)return;let e=()=>F(e=>e+1);return y.registerOnUpdateListener(e),()=>{y.removeOnUpdateListener(e)}},[y]);let L=x||!!y?.validators.find(e=>e.validatorId===`required`),[R,z]=u(()=>h(P,S)),[B,V]=u(P),[H,U]=u(!1),[W,G]=u(null),K=l(null),q=l(null),J=l(null),Y=O?.dropdown?.fontSize;if(s(()=>{let e=q.current,t=J.current;!H||!e||!t||Y!=null||(t.style.fontSize=window.getComputedStyle(e).fontSize)},[H,Y]),n({isOpen:H,triggerRef:q,anchorRef:J,panelRef:J,flipClassName:i.dropdownFlip}),P!==B){V(P);let e=S.find(e=>e.value===P);e?z(e.label??e.value):C&&z(P)}let X=c(()=>{let e=R.toLowerCase(),t=[];for(let n of S)if((n.label??n.value).toLowerCase().includes(e)&&(t.push(n),w>0&&t.length>=w))break;return t},[S,R,w]),Z=()=>{M||(K.current&&=(clearTimeout(K.current),null),U(!0))},Q=()=>{I.current&&(I.current.touched=!0),K.current=setTimeout(()=>{U(!1),K.current=null,C||z(h(P,S))},100)},$=a(e=>{z(e.label??e.value),U(!1),G(null),y&&y.set(e.value),A&&A(e.value),k(e.value)},[y,A,k]),ee=a(e=>{M||(e.key===`ArrowUp`?(e.preventDefault(),G(e=>e?e-1:null)):e.key===`ArrowDown`?(e.preventDefault(),G(e=>e===null?0:Math.min(e+1,X.length-1))):e.key===`Enter`&&(W!==null&&X[W]?$(X[W]):C&&(U(!1),G(null))))},[X,W,$,C,M]);return p(`div`,{...N,ref:q,className:d(i.inputDropdown,D?.root,T),style:{...O?.root,...E},onFocus:Z,onBlur:Q,onKeyDown:ee,children:[f(r,{label:_,value:R,readOnly:M,formValidator:null,isRequired:L,isValid:y?y.touched?!y.hasError():!0:!b,errorMessage:y?y.touched?y.getCurrentErrorMessage()??``:``:b??``,onChange:e=>{if(z(e),G(null),U(!0),C)y&&y.set(e),A&&A(e);else if(e===``)y&&y.set(``),A&&A(``),k(``);else{let t=S.find(t=>(t.label??t.value).toLowerCase()===e.toLowerCase());t&&(y&&y.set(t.value),A&&A(t.value),k(t.value))}},placeholder:j}),H&&!M&&f(t,{children:f(`div`,{ref:J,className:d(i.dropdown,i.dropdownShown,D?.dropdown),style:O?.dropdown,children:f(`div`,{className:i.dropdownScroll,children:X.map((e,t)=>f(`div`,{className:d(i.dropdownItem,W===t&&i.dropdownItemHighlighted,D?.item),style:O?.item,onMouseDown:e=>e.preventDefault(),onClick:()=>$(e),children:e.label??e.value},`${t}_${e.label}_${e.value}`))})})})]})}export{g as default};
 //# sourceMappingURL=inputDropdown.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"inputDropdown.mjs","names":[],"sources":["../../../../package/common/inputDropdown/inputDropdown.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\nimport styles from './inputDropdown.module.pcss';\nimport Input from '../input';\nimport { useFloatingPosition } from '../floatingMenu/useFloatingPosition';\nimport { useComponentDefaults } from '../configProvider';\nimport type { InputDropdownItem, InputDropdownProps } from './inputDropdown.types';\n\nfunction getKeyFromProps(value: string | undefined, formValidator: InputDropdownProps['formValidator']): string {\n  return formValidator ? (formValidator.value as string) ?? '' : (value ?? '');\n}\n\nfunction labelForKey(key: string, items: InputDropdownItem[]): string {\n  const match = items.find((item) => item.value === key);\n  return match ? (match.label ?? match.value) : key;\n}\n\nexport default function InputDropdown(props: InputDropdownProps) {\n  const {\n  label = '',\n  value = '',\n  formValidator = null,\n  error,\n  isRequired = false,\n  items = [],\n  allowCustomValue = false,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  onSelect = () => null,\n  onChange,\n  placeholder = '',\n  readOnly = false,\n  ...rest\n  } = useComponentDefaults('InputDropdown', props);\n  const currentKey = getKeyFromProps(value, formValidator);\n  const [, forceUpdate] = useState(0);\n  const fvRef = useRef(formValidator);\n\n  useEffect(() => {\n    fvRef.current = formValidator;\n    if (!formValidator) return;\n    const listener = () => forceUpdate((n) => n + 1);\n    formValidator.registerOnUpdateListener(listener);\n    return () => { formValidator.removeOnUpdateListener(listener); };\n  }, [formValidator]);\n\n  const computedIsRequired = isRequired || !!formValidator?.validators.find(\n    (v) => (v as { validatorId?: string }).validatorId === 'required'\n  );\n\n  const [inputText, setInputText] = useState(() => labelForKey(currentKey, items));\n  const [prevKey, setPrevKey] = useState(currentKey);\n  const [isMenuShown, setIsMenuShown] = useState(false);\n  const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);\n  const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLDivElement>(null);\n\n  const menuFontSizeOverride = slotStyles?.dropdown?.fontSize;\n  useLayoutEffect(() => {\n    const trigger = triggerRef.current;\n    const menu = anchorRef.current;\n    if (!isMenuShown || !trigger || !menu || menuFontSizeOverride != null) return;\n    menu.style.fontSize = window.getComputedStyle(trigger).fontSize;\n  }, [isMenuShown, menuFontSizeOverride]);\n\n  useFloatingPosition({\n    isOpen: isMenuShown,\n    triggerRef,\n    anchorRef,\n    panelRef: anchorRef,\n    flipClassName: styles.dropdownFlip,\n  });\n\n  // Sync display text when the controlled key changes externally (e.g. parent reset).\n  if (currentKey !== prevKey) {\n    setPrevKey(currentKey);\n    const match = items.find((item) => item.value === currentKey);\n    if (match) setInputText(match.label ?? match.value);\n    else if (allowCustomValue) setInputText(currentKey);\n  }\n\n  const currItems = items.filter((item) =>\n    (item.label ?? item.value).toLowerCase().includes(inputText.toLowerCase())\n  );\n\n  const handleFocus = () => {\n    if (readOnly) return;\n    if (hideTimeoutRef.current) {\n      clearTimeout(hideTimeoutRef.current);\n      hideTimeoutRef.current = null;\n    }\n    setIsMenuShown(true);\n  };\n\n  const handleBlur = () => {\n    if (fvRef.current) fvRef.current.touched = true;\n    hideTimeoutRef.current = setTimeout(() => {\n      setIsMenuShown(false);\n      hideTimeoutRef.current = null;\n      // Without custom values, uncommitted typed text is invalid — snap the\n      // display back to the currently selected item's label.\n      if (!allowCustomValue) setInputText(labelForKey(currentKey, items));\n    }, 100);\n  };\n\n  const handleSelect = useCallback((item: InputDropdownItem) => {\n    setInputText(item.label ?? item.value);\n    setIsMenuShown(false);\n    setHighlightedIndex(null);\n    if (formValidator) formValidator.set(item.value);\n    if (onChange) onChange(item.value);\n    onSelect(item.value);\n  }, [formValidator, onChange, onSelect]);\n\n  const onKeyDown = useCallback((event: React.KeyboardEvent) => {\n    if (readOnly) return;\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      setHighlightedIndex((idx) => (!idx ? null : idx - 1));\n    } else if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      setHighlightedIndex((idx) =>\n        idx === null ? 0 : Math.min(idx + 1, currItems.length - 1)\n      );\n    } else if (event.key === 'Enter') {\n      if (highlightedIndex !== null && currItems[highlightedIndex]) {\n        handleSelect(currItems[highlightedIndex]);\n      } else if (allowCustomValue) {\n        setIsMenuShown(false);\n        setHighlightedIndex(null);\n      }\n    }\n  }, [currItems, highlightedIndex, handleSelect, allowCustomValue, readOnly]);\n\n  return (\n    <div\n      {...rest}\n      ref={triggerRef}\n      className={cx(styles.inputDropdown, classNames?.root, className)}\n      style={{ ...slotStyles?.root, ...style }}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onKeyDown={onKeyDown}\n    >\n      <Input\n        label={label}\n        value={inputText}\n        readOnly={readOnly}\n        formValidator={null}\n        isRequired={computedIsRequired}\n        isValid={formValidator ? (formValidator.touched ? !formValidator.hasError() : true) : !error}\n        errorMessage={formValidator ? (formValidator.touched ? (formValidator.getCurrentErrorMessage() ?? '') : '') : (error ?? '')}\n        onChange={(text) => {\n          setInputText(text);\n          setHighlightedIndex(null);\n          setIsMenuShown(true);\n          if (allowCustomValue) {\n            if (formValidator) formValidator.set(text);\n            if (onChange) onChange(text);\n          } else if (text === '') {\n            if (formValidator) formValidator.set('');\n            if (onChange) onChange('');\n            onSelect('');\n          } else {\n            // Emit when the typed text exactly matches an item's label/value.\n            const match = items.find(\n              (item) => (item.label ?? item.value).toLowerCase() === text.toLowerCase()\n            );\n            if (match) {\n              if (formValidator) formValidator.set(match.value);\n              if (onChange) onChange(match.value);\n              onSelect(match.value);\n            }\n          }\n        }}\n        placeholder={placeholder}\n      />\n      {isMenuShown && !readOnly && (\n        <BodyEnd>\n          <div\n            ref={anchorRef}\n            className={cx(styles.dropdown, styles.dropdownShown, classNames?.dropdown)}\n            style={slotStyles?.dropdown}\n          >\n            <div className={styles.dropdownScroll}>\n              {currItems.map((item, key) => (\n                <div\n                  key={`${key}_${item.label}_${item.value}`}\n                  className={cx(\n                    styles.dropdownItem,\n                    highlightedIndex === key && styles.dropdownItemHighlighted,\n                    classNames?.item\n                  )}\n                  style={slotStyles?.item}\n                  // Prevent the input from blurring before the click resolves.\n                  onMouseDown={(e) => e.preventDefault()}\n                  onClick={() => handleSelect(item)}\n                >\n                  {item.label ?? item.value}\n                </div>\n              ))}\n            </div>\n          </div>\n        </BodyEnd>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"inputDropdown.mjs","names":[],"sources":["../../../../package/common/inputDropdown/inputDropdown.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\nimport styles from './inputDropdown.module.pcss';\nimport Input from '../input';\nimport { useFloatingPosition } from '../floatingMenu/useFloatingPosition';\nimport { useComponentDefaults } from '../configProvider';\nimport type { InputDropdownItem, InputDropdownProps } from './inputDropdown.types';\n\nfunction getKeyFromProps(value: string | undefined, formValidator: InputDropdownProps['formValidator']): string {\n  return formValidator ? (formValidator.value as string) ?? '' : (value ?? '');\n}\n\nfunction labelForKey(key: string, items: InputDropdownItem[]): string {\n  const match = items.find((item) => item.value === key);\n  return match ? (match.label ?? match.value) : key;\n}\n\nexport default function InputDropdown(props: InputDropdownProps) {\n  const {\n  label = '',\n  value = '',\n  formValidator = null,\n  error,\n  isRequired = false,\n  items = [],\n  allowCustomValue = false,\n  maxItems = 100,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  onSelect = () => null,\n  onChange,\n  placeholder = '',\n  readOnly = false,\n  ...rest\n  } = useComponentDefaults('InputDropdown', props);\n  const currentKey = getKeyFromProps(value, formValidator);\n  const [, forceUpdate] = useState(0);\n  const fvRef = useRef(formValidator);\n\n  useEffect(() => {\n    fvRef.current = formValidator;\n    if (!formValidator) return;\n    const listener = () => forceUpdate((n) => n + 1);\n    formValidator.registerOnUpdateListener(listener);\n    return () => { formValidator.removeOnUpdateListener(listener); };\n  }, [formValidator]);\n\n  const computedIsRequired = isRequired || !!formValidator?.validators.find(\n    (v) => (v as { validatorId?: string }).validatorId === 'required'\n  );\n\n  const [inputText, setInputText] = useState(() => labelForKey(currentKey, items));\n  const [prevKey, setPrevKey] = useState(currentKey);\n  const [isMenuShown, setIsMenuShown] = useState(false);\n  const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);\n  const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLDivElement>(null);\n\n  const menuFontSizeOverride = slotStyles?.dropdown?.fontSize;\n  useLayoutEffect(() => {\n    const trigger = triggerRef.current;\n    const menu = anchorRef.current;\n    if (!isMenuShown || !trigger || !menu || menuFontSizeOverride != null) return;\n    menu.style.fontSize = window.getComputedStyle(trigger).fontSize;\n  }, [isMenuShown, menuFontSizeOverride]);\n\n  useFloatingPosition({\n    isOpen: isMenuShown,\n    triggerRef,\n    anchorRef,\n    panelRef: anchorRef,\n    flipClassName: styles.dropdownFlip,\n  });\n\n  // Sync display text when the controlled key changes externally (e.g. parent reset).\n  if (currentKey !== prevKey) {\n    setPrevKey(currentKey);\n    const match = items.find((item) => item.value === currentKey);\n    if (match) setInputText(match.label ?? match.value);\n    else if (allowCustomValue) setInputText(currentKey);\n  }\n\n  const currItems = useMemo(() => {\n    const needle = inputText.toLowerCase();\n    const matches: InputDropdownItem[] = [];\n    for (const item of items) {\n      if (!(item.label ?? item.value).toLowerCase().includes(needle)) continue;\n      matches.push(item);\n      if (maxItems > 0 && matches.length >= maxItems) break;\n    }\n    return matches;\n  }, [items, inputText, maxItems]);\n\n  const handleFocus = () => {\n    if (readOnly) return;\n    if (hideTimeoutRef.current) {\n      clearTimeout(hideTimeoutRef.current);\n      hideTimeoutRef.current = null;\n    }\n    setIsMenuShown(true);\n  };\n\n  const handleBlur = () => {\n    if (fvRef.current) fvRef.current.touched = true;\n    hideTimeoutRef.current = setTimeout(() => {\n      setIsMenuShown(false);\n      hideTimeoutRef.current = null;\n      // Without custom values, uncommitted typed text is invalid — snap the\n      // display back to the currently selected item's label.\n      if (!allowCustomValue) setInputText(labelForKey(currentKey, items));\n    }, 100);\n  };\n\n  const handleSelect = useCallback((item: InputDropdownItem) => {\n    setInputText(item.label ?? item.value);\n    setIsMenuShown(false);\n    setHighlightedIndex(null);\n    if (formValidator) formValidator.set(item.value);\n    if (onChange) onChange(item.value);\n    onSelect(item.value);\n  }, [formValidator, onChange, onSelect]);\n\n  const onKeyDown = useCallback((event: React.KeyboardEvent) => {\n    if (readOnly) return;\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      setHighlightedIndex((idx) => (!idx ? null : idx - 1));\n    } else if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      setHighlightedIndex((idx) =>\n        idx === null ? 0 : Math.min(idx + 1, currItems.length - 1)\n      );\n    } else if (event.key === 'Enter') {\n      if (highlightedIndex !== null && currItems[highlightedIndex]) {\n        handleSelect(currItems[highlightedIndex]);\n      } else if (allowCustomValue) {\n        setIsMenuShown(false);\n        setHighlightedIndex(null);\n      }\n    }\n  }, [currItems, highlightedIndex, handleSelect, allowCustomValue, readOnly]);\n\n  return (\n    <div\n      {...rest}\n      ref={triggerRef}\n      className={cx(styles.inputDropdown, classNames?.root, className)}\n      style={{ ...slotStyles?.root, ...style }}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onKeyDown={onKeyDown}\n    >\n      <Input\n        label={label}\n        value={inputText}\n        readOnly={readOnly}\n        formValidator={null}\n        isRequired={computedIsRequired}\n        isValid={formValidator ? (formValidator.touched ? !formValidator.hasError() : true) : !error}\n        errorMessage={formValidator ? (formValidator.touched ? (formValidator.getCurrentErrorMessage() ?? '') : '') : (error ?? '')}\n        onChange={(text) => {\n          setInputText(text);\n          setHighlightedIndex(null);\n          setIsMenuShown(true);\n          if (allowCustomValue) {\n            if (formValidator) formValidator.set(text);\n            if (onChange) onChange(text);\n          } else if (text === '') {\n            if (formValidator) formValidator.set('');\n            if (onChange) onChange('');\n            onSelect('');\n          } else {\n            // Emit when the typed text exactly matches an item's label/value.\n            const match = items.find(\n              (item) => (item.label ?? item.value).toLowerCase() === text.toLowerCase()\n            );\n            if (match) {\n              if (formValidator) formValidator.set(match.value);\n              if (onChange) onChange(match.value);\n              onSelect(match.value);\n            }\n          }\n        }}\n        placeholder={placeholder}\n      />\n      {isMenuShown && !readOnly && (\n        <BodyEnd>\n          <div\n            ref={anchorRef}\n            className={cx(styles.dropdown, styles.dropdownShown, classNames?.dropdown)}\n            style={slotStyles?.dropdown}\n          >\n            <div className={styles.dropdownScroll}>\n              {currItems.map((item, key) => (\n                <div\n                  key={`${key}_${item.label}_${item.value}`}\n                  className={cx(\n                    styles.dropdownItem,\n                    highlightedIndex === key && styles.dropdownItemHighlighted,\n                    classNames?.item\n                  )}\n                  style={slotStyles?.item}\n                  // Prevent the input from blurring before the click resolves.\n                  onMouseDown={(e) => e.preventDefault()}\n                  onClick={() => handleSelect(item)}\n                >\n                  {item.label ?? item.value}\n                </div>\n              ))}\n            </div>\n          </div>\n        </BodyEnd>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import e from"./gifView.module.mjs";import{useEffect as t,useState as n}from"react";import r from"classnames";import{jsx as i,jsxs as a}from"react/jsx-runtime";function o({className:o,src:s=``}){let[c,l]=n(!0);return t(()=>{l(!0)},[s]),a(`div`,{className:r(e.gifView,o),children:[i(`img`,{className:e.klipyPickerSelected,src:s,onLoad:()=>l(!1)}),c&&i(`div`,{className:e.gifViewLoading})]})}export{o as default};
+import e from"./gifView.module.mjs";import{useState as t}from"react";import n from"classnames";import{jsx as r,jsxs as i}from"react/jsx-runtime";function a({className:a,src:o=``}){let[s,c]=t(null),l=s!==o;return i(`div`,{className:n(e.gifView,a),children:[r(`img`,{className:e.klipyPickerSelected,src:o,onLoad:()=>c(o)}),l&&r(`div`,{className:e.gifViewLoading})]})}export{a as default};
 //# sourceMappingURL=gifView.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"gifView.mjs","names":[],"sources":["../../../../../../package/common/klipyPicker/components/gifView/gifView.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport cx from 'classnames';\nimport type { ReactElement } from 'react';\nimport type { GifViewProps } from './gifView.types';\nimport styles from './gifView.module.pcss';\n\nexport default function GifView({ className, src = '' }: GifViewProps): ReactElement {\n  const [isLoading, setIsLoading] = useState(true);\n\n  useEffect(() => {\n    setIsLoading(true);\n  }, [src]);\n\n  return (\n    <div className={cx(styles.gifView, className)}>\n      <img className={styles.klipyPickerSelected} src={src} onLoad={() => setIsLoading(false)} />\n      {isLoading && <div className={styles.gifViewLoading} />}\n    </div>\n  );\n}\n"],"mappings":"gKAMA,SAAwB,EAAQ,CAAE,YAAW,MAAM,IAAkC,CACnF,GAAM,CAAC,EAAW,GAAgB,EAAS,EAAI,EAM/C,OAJA,MAAgB,CACd,EAAa,EAAI,CACnB,EAAG,CAAC,CAAG,CAAC,EAGN,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,QAAS,CAAS,WAA5C,CACE,EAAC,MAAD,CAAK,UAAW,EAAO,oBAA0B,MAAK,WAAc,EAAa,EAAK,CAAI,CAAA,EACzF,GAAa,EAAC,MAAD,CAAK,UAAW,EAAO,cAAiB,CAAA,CACnD,GAET"}
+{"version":3,"file":"gifView.mjs","names":[],"sources":["../../../../../../package/common/klipyPicker/components/gifView/gifView.tsx"],"sourcesContent":["import { useState } from 'react';\nimport cx from 'classnames';\nimport type { ReactElement } from 'react';\nimport type { GifViewProps } from './gifView.types';\nimport styles from './gifView.module.pcss';\n\nexport default function GifView({ className, src = '' }: GifViewProps): ReactElement {\n  const [loadedSrc, setLoadedSrc] = useState<string | null>(null);\n  const isLoading = loadedSrc !== src;\n\n  return (\n    <div className={cx(styles.gifView, className)}>\n      <img className={styles.klipyPickerSelected} src={src} onLoad={() => setLoadedSrc(src)} />\n      {isLoading && <div className={styles.gifViewLoading} />}\n    </div>\n  );\n}\n"],"mappings":"iJAMA,SAAwB,EAAQ,CAAE,YAAW,MAAM,IAAkC,CACnF,GAAM,CAAC,EAAW,GAAgB,EAAwB,IAAI,EACxD,EAAY,IAAc,EAEhC,OACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,QAAS,CAAS,WAA5C,CACE,EAAC,MAAD,CAAK,UAAW,EAAO,oBAA0B,MAAK,WAAc,EAAa,CAAG,CAAI,CAAA,EACvF,GAAa,EAAC,MAAD,CAAK,UAAW,EAAO,cAAiB,CAAA,CACnD,GAET"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"multiSelect.mjs","names":[],"sources":["../../../../package/common/multiSelect/multiSelect.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from 'react';\nimport type { ReactElement } from 'react';\nimport cx from 'classnames';\nimport { faChevronDown, faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport Chip from 'components/common/chip';\nimport SearchInput from 'components/common/searchInput';\nimport Tooltip from 'components/common/tooltip';\nimport Popover from 'components/common/popover';\nimport { PopoverAlign, PopoverPlacement, PopoverTrigger } from '../popover/popover.types';\nimport { useComponentDefaults } from '../configProvider';\nimport type { MultiSelectItem, MultiSelectProps, MultiSelectValue } from './multiSelect.types';\n\nimport styles from './multiSelect.module.pcss';\n\nconst EMPTY: MultiSelectValue[] = [];\n\nfunction MultiSelect(props: MultiSelectProps): ReactElement {\n  const {\n    items,\n    value,\n    defaultValue = [],\n    onChange = () => {},\n    label = '',\n    alwaysFloatLabel = false,\n    placeholder = '',\n    searchable = false,\n    allowCustomValues = false,\n    createLabel = (value: string) => `Add \"${value}\"`,\n    searchPlaceholder = 'Search…',\n    emptyLabel = 'No matches',\n    maxSelected,\n    clearable = true,\n    disabled = false,\n    readOnly = false,\n    presentation,\n    formValidator = null,\n    errorMessage = '',\n    isValid = true,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    ...rest\n  } = useComponentDefaults('MultiSelect', props);\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const controlRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLDivElement>(null);\n  const listboxId = useId();\n\n  const [internalValue, setInternalValue] = useState<MultiSelectValue[]>(defaultValue);\n  const [isOpen, setIsOpen] = useState(false);\n  const [search, setSearch] = useState('');\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [panelWidth, setPanelWidth] = useState<number>();\n\n  // A ref as well as the prop: react-hooks/immutability refuses a mutation of the prop itself in\n  // an event handler, and marking the validator touched happens in one.\n  const fvRef = useRef(formValidator);\n  const [, forceUpdate] = useState(0);\n  useEffect(() => {\n    fvRef.current = formValidator;\n    const fv = fvRef.current;\n    if (!fv) return;\n    fv.label = label;\n    fv.validate();\n    const listener = () => forceUpdate((n) => n + 1);\n    fv.registerOnUpdateListener(listener);\n    return () => { fv.removeOnUpdateListener(listener); };\n  }, [formValidator, label]);\n\n  const isControlled = value !== undefined && !formValidator;\n  const rawValue = formValidator ? formValidator.value : isControlled ? value : internalValue;\n  const selected = Array.isArray(rawValue) ? (rawValue as MultiSelectValue[]) : EMPTY;\n\n  const hasError = formValidator\n    ? formValidator.touched && formValidator.hasError()\n    : !isValid || !!errorMessage;\n  const errorText = formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || '';\n\n  const isInteractive = !disabled && !readOnly;\n  const atMax = maxSelected !== undefined && selected.length >= maxSelected;\n\n  const shouldFloatLabel = alwaysFloatLabel || isOpen || isFocused || selected.length > 0;\n\n  const isSearchable = searchable || allowCustomValues;\n  const typed = search.trim();\n  const needle = isSearchable ? typed.toLowerCase() : '';\n  const matches = needle\n    ? items.filter((item) => item.label.toLowerCase().includes(needle))\n    : items;\n\n  const canCreate =\n    allowCustomValues &&\n    typed.length > 0 &&\n    !atMax &&\n    !items.some(\n      (item) => item.label.toLowerCase() === needle || String(item.key).toLowerCase() === needle\n    ) &&\n    !selected.some((key) => String(key).toLowerCase() === needle);\n\n  const visibleItems: MultiSelectItem[] = canCreate\n    ? [...matches, { key: typed, label: createLabel(typed) }]\n    : matches;\n\n  // Mapped from `selected`, not filtered from `items`, to keep the chips in pick order. A custom\n  // value has no entry in `items`, so it stands in for itself.\n  const selectedItems = selected\n    .map<MultiSelectItem | undefined>(\n      (key) =>\n        items.find((item) => item.key === key) ??\n        (allowCustomValues ? { key, label: String(key) } : undefined)\n    )\n    .filter((item): item is MultiSelectItem => item !== undefined);\n\n  function commit(next: MultiSelectValue[]) {\n    if (formValidator) formValidator.set(next);\n    else if (!isControlled) setInternalValue(next);\n    onChange(next);\n  }\n\n  function toggle(item: MultiSelectItem) {\n    if (!isInteractive || item.disabled) return;\n    if (selected.includes(item.key)) commit(selected.filter((key) => key !== item.key));\n    else if (!atMax) commit([...selected, item.key]);\n    // The typed text has become a chip, so leaving it in the box would offer to add it again.\n    if (canCreate && item.key === typed) setSearch('');\n  }\n\n  /**\n   * A focused element that unmounts fires no blur, so removing the chip or clear button that was\n   * just clicked would leave `isFocused` stuck true. Hand focus back so there is still something\n   * left to blur.\n   */\n  function keepFocusInControl() {\n    if (rootRef.current?.contains(document.activeElement)) controlRef.current?.focus();\n  }\n\n  function handleOpenChange(next: boolean) {\n    if (next && !isInteractive) return;\n    setIsOpen(next);\n    if (next) {\n      setPanelWidth(controlRef.current?.offsetWidth);\n      setActiveIndex(0);\n    } else {\n      setSearch('');\n      if (fvRef.current) fvRef.current.touched = true;\n    }\n  }\n\n  useEffect(() => {\n    if (!isOpen || !isSearchable) return;\n    searchRef.current?.querySelector('input')?.focus();\n  }, [isOpen, isSearchable]);\n\n  function handleKeyDown(event: React.KeyboardEvent) {\n    if (!isInteractive) return;\n\n    if (!isOpen) {\n      if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        handleOpenChange(true);\n      } else if (event.key === 'Backspace' && selected.length > 0) {\n        commit(selected.slice(0, -1));\n      }\n      return;\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      if (visibleItems.length === 0) return;\n      const step = event.key === 'ArrowDown' ? 1 : -1;\n      setActiveIndex((current) => (current + step + visibleItems.length) % visibleItems.length);\n    } else if (event.key === 'Home' || event.key === 'End') {\n      event.preventDefault();\n      setActiveIndex(event.key === 'Home' ? 0 : visibleItems.length - 1);\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      const item = visibleItems[activeIndex];\n      if (item) toggle(item);\n    } else if (event.key === 'Backspace' && !search && selected.length > 0) {\n      commit(selected.slice(0, -1));\n    }\n  }\n\n  const panel = (\n    <div className={cx(styles.multiSelectPanel, classNames?.panel)} style={slotStyles?.panel}>\n      {isSearchable && (\n        <div ref={searchRef} className={cx(styles.multiSelectSearch, classNames?.search)} style={slotStyles?.search}>\n          <SearchInput\n            value={search}\n            onChange={(value) => { setSearch(value); setActiveIndex(0); }}\n            placeholder={searchPlaceholder}\n            onKeyDown={handleKeyDown}\n          />\n        </div>\n      )}\n      <div\n        id={listboxId}\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        aria-label={label || undefined}\n        className={cx(styles.multiSelectOptions, classNames?.options)}\n        style={slotStyles?.options}\n      >\n        {visibleItems.length === 0 ? (\n          <div className={cx(styles.multiSelectEmpty, classNames?.empty)} style={slotStyles?.empty}>\n            {emptyLabel}\n          </div>\n        ) : (\n          visibleItems.map((item, index) => {\n            const isSelected = selected.includes(item.key);\n            const isDisabled = item.disabled || (atMax && !isSelected);\n\n            return (\n              <div\n                key={item.key}\n                id={`${listboxId}-${index}`}\n                role=\"option\"\n                aria-selected={isSelected}\n                aria-disabled={isDisabled || undefined}\n                className={cx(\n                  styles.multiSelectOption,\n                  index === activeIndex && styles.multiSelectOptionActive,\n                  isSelected && styles.multiSelectOptionSelected,\n                  isDisabled && styles.multiSelectOptionDisabled,\n                  classNames?.option\n                )}\n                style={slotStyles?.option}\n                onMouseDown={(event) => event.preventDefault()}\n                onMouseEnter={() => setActiveIndex(index)}\n                onClick={() => toggle(item)}\n              >\n                <span className={cx(styles.multiSelectOptionCheck, classNames?.optionCheck)} style={slotStyles?.optionCheck}>\n                  {isSelected && <FontAwesomeIcon icon={faCheck} />}\n                </span>\n                <span className={cx(styles.multiSelectOptionLabel, classNames?.optionLabel)} style={slotStyles?.optionLabel}>\n                  {item.label}\n                </span>\n              </div>\n            );\n          })\n        )}\n      </div>\n    </div>\n  );\n\n  return (\n    <div\n      {...rest}\n      ref={rootRef}\n      className={cx(\n        styles.multiSelect,\n        disabled && styles.multiSelectDisabled,\n        classNames?.root,\n        className\n      )}\n      style={{ ...style, ...slotStyles?.root }}\n      onMouseEnter={(event) => { setIsHovered(true); onMouseEnter?.(event); }}\n      onMouseLeave={(event) => { setIsHovered(false); onMouseLeave?.(event); }}\n      onFocus={(event) => { setIsFocused(true); onFocus?.(event); }}\n      onBlur={(event) => {\n        if (event.currentTarget.contains(event.relatedTarget as Node | null)) return;\n        setIsFocused(false);\n        onBlur?.(event);\n      }}\n    >\n      <Popover\n        isOpen={isOpen}\n        onOpenChange={handleOpenChange}\n        trigger={PopoverTrigger.Click}\n        placement={PopoverPlacement.Bottom}\n        align={PopoverAlign.Start}\n        offset={4}\n        withArrow={false}\n        disabled={!isInteractive}\n        presentation={presentation}\n        content={panel}\n        className={styles.multiSelectPopover}\n        styles={{ panel: panelWidth ? { minWidth: panelWidth } : undefined }}\n      >\n        <div\n          ref={controlRef}\n          role=\"combobox\"\n          tabIndex={disabled ? -1 : 0}\n          aria-expanded={isOpen}\n          aria-haspopup=\"listbox\"\n          aria-controls={listboxId}\n          aria-activedescendant={isOpen && visibleItems.length > 0 ? `${listboxId}-${activeIndex}` : undefined}\n          aria-disabled={disabled || undefined}\n          aria-readonly={readOnly || undefined}\n          className={cx(styles.multiSelectControl, classNames?.control)}\n          style={slotStyles?.control}\n          onKeyDown={handleKeyDown}\n        >\n          {placeholder && selectedItems.length === 0 && (\n            <span\n              className={cx(\n                styles.multiSelectPlaceholder,\n                (!label || shouldFloatLabel) && styles.multiSelectPlaceholderShown,\n                !label && styles.multiSelectPlaceholderInstant,\n                classNames?.placeholder\n              )}\n              style={slotStyles?.placeholder}\n            >\n              {placeholder}\n            </span>\n          )}\n\n          <div className={cx(styles.multiSelectValues, classNames?.values)} style={slotStyles?.values}>\n            {selectedItems.map((item) => (\n                <Chip\n                  key={item.key}\n                  text={item.label}\n                  showRemoveIcon={isInteractive}\n                  removeLabel={`Remove ${item.label}`}\n                  onMouseDown={(event) => event.preventDefault()}\n                  onRemove={() => { toggle(item); keepFocusInControl(); }}\n                  className={cx(styles.multiSelectChip, classNames?.chip)}\n                  style={slotStyles?.chip}\n                />\n            ))}\n          </div>\n\n          {clearable && isInteractive && selected.length > 0 && (\n            <button\n              type=\"button\"\n              tabIndex={-1}\n              aria-label=\"Clear selection\"\n              className={cx(styles.multiSelectClearButton, classNames?.clearButton)}\n              style={slotStyles?.clearButton}\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={(event) => { event.stopPropagation(); commit([]); keepFocusInControl(); }}\n            >\n              <FontAwesomeIcon icon={faXmark} />\n            </button>\n          )}\n\n          <FontAwesomeIcon\n            icon={faChevronDown}\n            className={cx(styles.multiSelectIcon, isOpen && styles.multiSelectIconOpen, classNames?.icon)}\n            style={slotStyles?.icon as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n          />\n\n          {label && (\n            <div\n              className={cx(\n                styles.multiSelectLabel,\n                shouldFloatLabel && styles.multiSelectLabelFloating,\n                classNames?.label\n              )}\n              style={slotStyles?.label}\n            >\n              {label}\n            </div>\n          )}\n\n          {/* The visible border lives here rather than on the control, because the legend is what\n              cuts the notch the floating label sits in. Same construction as Input. */}\n          <fieldset\n            className={cx(\n              styles.multiSelectFieldset,\n              !label && styles.multiSelectFieldsetNoNotch,\n              (isFocused || isOpen) && styles.multiSelectFieldsetFocused,\n              hasError && styles.multiSelectFieldsetError,\n              classNames?.fieldset\n            )}\n            style={slotStyles?.fieldset}\n          >\n            <legend\n              className={cx(\n                styles.multiSelectFieldsetLegend,\n                shouldFloatLabel && styles.multiSelectFieldsetLegendActive\n              )}\n            >\n              <span>{label}</span>\n            </legend>\n          </fieldset>\n        </div>\n      </Popover>\n\n      <Tooltip variant=\"error\" message={errorText} isVisible={hasError && (isFocused || isHovered)} />\n    </div>\n  );\n}\n\nexport default MultiSelect;\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+var e={multiSelect:`multiSelect_fmViY`,"multiSelect-label":`multiSelect-label_asHZ1`,multiSelectLabel:`multiSelect-label_asHZ1`,"multiSelect-label-floating":`multiSelect-label-floating_d4-Om`,multiSelectLabelFloating:`multiSelect-label-floating_d4-Om`,"multiSelect-fieldset":`multiSelect-fieldset_Eo29l`,multiSelectFieldset:`multiSelect-fieldset_Eo29l`,"multiSelect-fieldset-noNotch":`multiSelect-fieldset-noNotch_8EL3U`,multiSelectFieldsetNoNotch:`multiSelect-fieldset-noNotch_8EL3U`,"multiSelect-fieldset-focused":`multiSelect-fieldset-focused_ZC2P6`,multiSelectFieldsetFocused:`multiSelect-fieldset-focused_ZC2P6`,"multiSelect-fieldset-error":`multiSelect-fieldset-error_CWzEo`,multiSelectFieldsetError:`multiSelect-fieldset-error_CWzEo`,"multiSelect-fieldset-legend":`multiSelect-fieldset-legend_p-6nh`,multiSelectFieldsetLegend:`multiSelect-fieldset-legend_p-6nh`,"multiSelect-fieldset-legend-active":`multiSelect-fieldset-legend-active_M0L7g`,multiSelectFieldsetLegendActive:`multiSelect-fieldset-legend-active_M0L7g`,"multiSelect-popover":`multiSelect-popover_Qqt5v`,multiSelectPopover:`multiSelect-popover_Qqt5v`,"multiSelect-control":`multiSelect-control_zLb7t`,multiSelectControl:`multiSelect-control_zLb7t`,"multiSelect-values":`multiSelect-values_k1Q8x`,multiSelectValues:`multiSelect-values_k1Q8x`,"multiSelect-chip":`multiSelect-chip_xqe8Q`,multiSelectChip:`multiSelect-chip_xqe8Q`,"multiSelect-placeholder":`multiSelect-placeholder_Tjrmh`,multiSelectPlaceholder:`multiSelect-placeholder_Tjrmh`,"multiSelect-placeholder-shown":`multiSelect-placeholder-shown_8v36t`,multiSelectPlaceholderShown:`multiSelect-placeholder-shown_8v36t`,multiSelectFadeIn:`multiSelectFadeIn_rOplX`,"multiSelect-placeholder-instant":`multiSelect-placeholder-instant_r9-TD`,multiSelectPlaceholderInstant:`multiSelect-placeholder-instant_r9-TD`,"multiSelect-clearButton":`multiSelect-clearButton_FKs0m`,multiSelectClearButton:`multiSelect-clearButton_FKs0m`,"multiSelect-icon":`multiSelect-icon_ovLu-`,multiSelectIcon:`multiSelect-icon_ovLu-`,"multiSelect-icon-open":`multiSelect-icon-open_h8VAu`,multiSelectIconOpen:`multiSelect-icon-open_h8VAu`,"multiSelect-disabled":`multiSelect-disabled_Hm8mv`,multiSelectDisabled:`multiSelect-disabled_Hm8mv`,"multiSelect-panel":`multiSelect-panel_VX7gU`,multiSelectPanel:`multiSelect-panel_VX7gU`,"multiSelect-search":`multiSelect-search_g4OHX`,multiSelectSearch:`multiSelect-search_g4OHX`,"multiSelect-options":`multiSelect-options_MGZCv`,multiSelectOptions:`multiSelect-options_MGZCv`,"multiSelect-option":`multiSelect-option_hbvPY`,multiSelectOption:`multiSelect-option_hbvPY`,"multiSelect-option-active":`multiSelect-option-active_mSWFG`,multiSelectOptionActive:`multiSelect-option-active_mSWFG`,"multiSelect-option-selected":`multiSelect-option-selected_mjPq-`,multiSelectOptionSelected:`multiSelect-option-selected_mjPq-`,"multiSelect-option-disabled":`multiSelect-option-disabled_qSgYz`,multiSelectOptionDisabled:`multiSelect-option-disabled_qSgYz`,"multiSelect-optionCheck":`multiSelect-optionCheck_-YKoj`,multiSelectOptionCheck:`multiSelect-optionCheck_-YKoj`,"multiSelect-optionLabel":`multiSelect-optionLabel_CFZke`,multiSelectOptionLabel:`multiSelect-optionLabel_CFZke`,"multiSelect-empty":`multiSelect-empty_MjABY`,multiSelectEmpty:`multiSelect-empty_MjABY`};export{e as default};
+//# sourceMappingURL=multiSelect.module.mjs.map

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

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

package/dist/esm/common/overscroll/overscroll.mjs

@@ -1,2 +1,2 @@
-import e from"../../hooks/useWindowSize.mjs";import t from"./overscroll.module.mjs";import{useCallback as n,useEffect as r,useRef as i}from"react";import a from"classnames";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";function l({children:l=null,overscrollContent:u=null,overscrollContentDesktop:d=null,centerHeader:f=!0,min:p=10,max:m=80,start:h=30,unit:g=`%`,mobileOnly:_=!0,onScrollChange:v=()=>{},scrollDisabled:y=!1}){let{isMobileSize:b,height:x}=e(),S=i(null),C=i(null),w=i(null),T=i(!1),E=i(null),D=i(v);D.current=v;let O=n(e=>{let t;if(g===`%`){if(!w.current)return;let n=w.current.clientHeight;t=Math.max(n*p/100,n-e)}else t=Math.max(p,m-e);C.current&&(C.current.style.height=`${t}px`)},[p,m,g]),k=n(()=>{let e;if(g===`%`){if(!w.current)return;let t=w.current.clientHeight/m*100;e=w.current.clientHeight-h/100*t}else e=m-h;S.current&&(S.current.scrollTop=e,O(e))},[m,h,g,O]);r(()=>{let e=setTimeout(k,100);return()=>clearTimeout(e)},[k]),r(()=>{S.current&&(S.current.style.overflow=y?`hidden`:`auto`)},[y]);let A=i(b);r(()=>{b&&!A.current&&k(),A.current=b},[b,k]);let j=i(_);r(()=>{!_&&j.current&&k(),j.current=_},[_,k]);let M=i(x);r(()=>{b&&x!==M.current&&S.current&&O(S.current.scrollTop),M.current=x},[x,b,O]);function N(e){O(e.currentTarget.scrollTop),T.current||(T.current=!0,D.current(!0)),E.current&&clearTimeout(E.current),E.current=setTimeout(()=>{E.current=null,T.current=!1,D.current(!1)},500)}if(_&&!b)return d?c(`div`,{children:[d,l]}):s(o,{children:l});let P=g===`%`?`${100-p}%`:`calc(100% - ${p}px)`;return c(`div`,{className:t.overscroll,ref:S,onScroll:N,children:[s(`div`,{className:t.overscrollHeaderContainer,style:{height:`${m}${g}`},ref:w,children:s(`div`,{className:a(t.overscrollHeader,f&&t.overscrollHeaderCentered),ref:C,children:u})}),s(`div`,{style:{minHeight:P},children:l})]})}export{l as default};
+import e from"../../hooks/useWindowSize.mjs";import t from"./overscroll.module.mjs";import{useCallback as n,useEffect as r,useRef as i}from"react";import a from"classnames";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";function l({children:l=null,overscrollContent:u=null,overscrollContentDesktop:d=null,centerHeader:f=!0,min:p=10,max:m=80,start:h=30,unit:g=`%`,mobileOnly:_=!0,onScrollChange:v=()=>{},scrollDisabled:y=!1}){let{isMobileSize:b,height:x}=e(),S=i(null),C=i(null),w=i(null),T=i(!1),E=i(null),D=i(v);r(()=>{D.current=v});let O=n(e=>{let t;if(g===`%`){if(!w.current)return;let n=w.current.clientHeight;t=Math.max(n*p/100,n-e)}else t=Math.max(p,m-e);C.current&&(C.current.style.height=`${t}px`)},[p,m,g]),k=n(()=>{let e;if(g===`%`){if(!w.current)return;let t=w.current.clientHeight/m*100;e=w.current.clientHeight-h/100*t}else e=m-h;S.current&&(S.current.scrollTop=e,O(e))},[m,h,g,O]);r(()=>{let e=setTimeout(k,100);return()=>clearTimeout(e)},[k]),r(()=>{S.current&&(S.current.style.overflow=y?`hidden`:`auto`)},[y]);let A=i(b);r(()=>{b&&!A.current&&k(),A.current=b},[b,k]);let j=i(_);r(()=>{!_&&j.current&&k(),j.current=_},[_,k]);let M=i(x);r(()=>{b&&x!==M.current&&S.current&&O(S.current.scrollTop),M.current=x},[x,b,O]);function N(e){O(e.currentTarget.scrollTop),T.current||(T.current=!0,D.current(!0)),E.current&&clearTimeout(E.current),E.current=setTimeout(()=>{E.current=null,T.current=!1,D.current(!1)},500)}if(_&&!b)return d?c(`div`,{children:[d,l]}):s(o,{children:l});let P=g===`%`?`${100-p}%`:`calc(100% - ${p}px)`;return c(`div`,{className:t.overscroll,ref:S,onScroll:N,children:[s(`div`,{className:t.overscrollHeaderContainer,style:{height:`${m}${g}`},ref:w,children:s(`div`,{className:a(t.overscrollHeader,f&&t.overscrollHeaderCentered),ref:C,children:u})}),s(`div`,{style:{minHeight:P},children:l})]})}export{l as default};
 //# sourceMappingURL=overscroll.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"overscroll.mjs","names":[],"sources":["../../../../package/common/overscroll/overscroll.tsx"],"sourcesContent":["import { useRef, useEffect, useCallback } from 'react';\nimport cx from 'classnames';\nimport type { UIEvent } from 'react';\nimport useWindowSize from '../../hooks/useWindowSize';\nimport styles from './overscroll.module.pcss';\nimport type { OverscrollProps } from './overscroll.types';\n\nexport default function Overscroll({\n  children = null,\n  overscrollContent = null,\n  overscrollContentDesktop = null,\n  centerHeader = true,\n  min = 10,\n  max = 80,\n  start = 30,\n  unit = '%',\n  mobileOnly = true,\n  onScrollChange = () => {},\n  scrollDisabled = false,\n}: OverscrollProps) {\n  const { isMobileSize, height } = useWindowSize();\n\n  const overscrollRef = useRef<HTMLDivElement>(null);\n  const overscrollHeaderRef = useRef<HTMLDivElement>(null);\n  const overscrollHeaderContainerRef = useRef<HTMLDivElement>(null);\n  const isScrollingRef = useRef(false);\n  const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const onScrollChangeRef = useRef(onScrollChange);\n  onScrollChangeRef.current = onScrollChange;\n\n  const updateHeaderHeight = useCallback(\n    (scrollTop: number) => {\n      let h: number;\n      if (unit === '%') {\n        if (!overscrollHeaderContainerRef.current) return;\n        const containerH = overscrollHeaderContainerRef.current.clientHeight;\n        h = Math.max((containerH * min) / 100, containerH - scrollTop);\n      } else {\n        h = Math.max(min, max - scrollTop);\n      }\n      if (overscrollHeaderRef.current) {\n        overscrollHeaderRef.current.style.height = `${h}px`;\n      }\n    },\n    [min, max, unit],\n  );\n\n  const scrollToInitialPosition = useCallback(() => {\n    let toScroll: number;\n    if (unit === '%') {\n      if (!overscrollHeaderContainerRef.current) return;\n      const hundredPerc = (overscrollHeaderContainerRef.current.clientHeight / max) * 100;\n      toScroll =\n        overscrollHeaderContainerRef.current.clientHeight - hundredPerc * (start / 100);\n    } else {\n      toScroll = max - start;\n    }\n    if (overscrollRef.current) {\n      overscrollRef.current.scrollTop = toScroll;\n      updateHeaderHeight(toScroll);\n    }\n  }, [max, start, unit, updateHeaderHeight]);\n\n  // Initial scroll position on mount (and if scroll-related props change)\n  useEffect(() => {\n    const id = setTimeout(scrollToInitialPosition, 100);\n    return () => clearTimeout(id);\n  }, [scrollToInitialPosition]);\n\n  // Toggle overflow when scrollDisabled changes\n  useEffect(() => {\n    if (overscrollRef.current) {\n      overscrollRef.current.style.overflow = scrollDisabled ? 'hidden' : 'auto';\n    }\n  }, [scrollDisabled]);\n\n  // Scroll to initial position when entering mobile view\n  const prevIsMobileRef = useRef(isMobileSize);\n  useEffect(() => {\n    if (isMobileSize && !prevIsMobileRef.current) scrollToInitialPosition();\n    prevIsMobileRef.current = isMobileSize;\n  }, [isMobileSize, scrollToInitialPosition]);\n\n  // Scroll to initial position when mobileOnly is turned off (full overscroll DOM just mounted)\n  const prevMobileOnlyRef = useRef(mobileOnly);\n  useEffect(() => {\n    if (!mobileOnly && prevMobileOnlyRef.current) scrollToInitialPosition();\n    prevMobileOnlyRef.current = mobileOnly;\n  }, [mobileOnly, scrollToInitialPosition]);\n\n  // Update header height on window resize while in mobile view\n  const prevHeightRef = useRef(height);\n  useEffect(() => {\n    if (isMobileSize && height !== prevHeightRef.current && overscrollRef.current) {\n      updateHeaderHeight(overscrollRef.current.scrollTop);\n    }\n    prevHeightRef.current = height;\n  }, [height, isMobileSize, updateHeaderHeight]);\n\n  function handleScroll(e: UIEvent<HTMLDivElement>) {\n    updateHeaderHeight(e.currentTarget.scrollTop);\n    if (!isScrollingRef.current) {\n      isScrollingRef.current = true;\n      onScrollChangeRef.current(true);\n    }\n    if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);\n    scrollTimeoutRef.current = setTimeout(() => {\n      scrollTimeoutRef.current = null;\n      isScrollingRef.current = false;\n      onScrollChangeRef.current(false);\n    }, 500);\n  }\n\n  if (mobileOnly && !isMobileSize) {\n    if (overscrollContentDesktop) return <div>{overscrollContentDesktop}{children}</div>;\n    return <>{children}</>;\n  }\n\n  const contentMinHeight = unit === '%' ? `${100 - min}%` : `calc(100% - ${min}px)`;\n\n  return (\n    <div className={styles.overscroll} ref={overscrollRef} onScroll={handleScroll}>\n      <div\n        className={styles.overscrollHeaderContainer}\n        style={{ height: `${max}${unit}` }}\n        ref={overscrollHeaderContainerRef}\n      >\n        <div\n          className={cx(styles.overscrollHeader, centerHeader && styles.overscrollHeaderCentered)}\n          ref={overscrollHeaderRef}\n        >\n          {overscrollContent}\n        </div>\n      </div>\n      <div style={{ minHeight: contentMinHeight }}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"overscroll.mjs","names":[],"sources":["../../../../package/common/overscroll/overscroll.tsx"],"sourcesContent":["import { useRef, useEffect, useCallback } from 'react';\nimport cx from 'classnames';\nimport type { UIEvent } from 'react';\nimport useWindowSize from '../../hooks/useWindowSize';\nimport styles from './overscroll.module.pcss';\nimport type { OverscrollProps } from './overscroll.types';\n\nexport default function Overscroll({\n  children = null,\n  overscrollContent = null,\n  overscrollContentDesktop = null,\n  centerHeader = true,\n  min = 10,\n  max = 80,\n  start = 30,\n  unit = '%',\n  mobileOnly = true,\n  onScrollChange = () => {},\n  scrollDisabled = false,\n}: OverscrollProps) {\n  const { isMobileSize, height } = useWindowSize();\n\n  const overscrollRef = useRef<HTMLDivElement>(null);\n  const overscrollHeaderRef = useRef<HTMLDivElement>(null);\n  const overscrollHeaderContainerRef = useRef<HTMLDivElement>(null);\n  const isScrollingRef = useRef(false);\n  const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const onScrollChangeRef = useRef(onScrollChange);\n  useEffect(() => { onScrollChangeRef.current = onScrollChange; });\n\n  const updateHeaderHeight = useCallback(\n    (scrollTop: number) => {\n      let h: number;\n      if (unit === '%') {\n        if (!overscrollHeaderContainerRef.current) return;\n        const containerH = overscrollHeaderContainerRef.current.clientHeight;\n        h = Math.max((containerH * min) / 100, containerH - scrollTop);\n      } else {\n        h = Math.max(min, max - scrollTop);\n      }\n      if (overscrollHeaderRef.current) {\n        overscrollHeaderRef.current.style.height = `${h}px`;\n      }\n    },\n    [min, max, unit],\n  );\n\n  const scrollToInitialPosition = useCallback(() => {\n    let toScroll: number;\n    if (unit === '%') {\n      if (!overscrollHeaderContainerRef.current) return;\n      const hundredPerc = (overscrollHeaderContainerRef.current.clientHeight / max) * 100;\n      toScroll =\n        overscrollHeaderContainerRef.current.clientHeight - hundredPerc * (start / 100);\n    } else {\n      toScroll = max - start;\n    }\n    if (overscrollRef.current) {\n      overscrollRef.current.scrollTop = toScroll;\n      updateHeaderHeight(toScroll);\n    }\n  }, [max, start, unit, updateHeaderHeight]);\n\n  // Initial scroll position on mount (and if scroll-related props change)\n  useEffect(() => {\n    const id = setTimeout(scrollToInitialPosition, 100);\n    return () => clearTimeout(id);\n  }, [scrollToInitialPosition]);\n\n  // Toggle overflow when scrollDisabled changes\n  useEffect(() => {\n    if (overscrollRef.current) {\n      overscrollRef.current.style.overflow = scrollDisabled ? 'hidden' : 'auto';\n    }\n  }, [scrollDisabled]);\n\n  // Scroll to initial position when entering mobile view\n  const prevIsMobileRef = useRef(isMobileSize);\n  useEffect(() => {\n    if (isMobileSize && !prevIsMobileRef.current) scrollToInitialPosition();\n    prevIsMobileRef.current = isMobileSize;\n  }, [isMobileSize, scrollToInitialPosition]);\n\n  // Scroll to initial position when mobileOnly is turned off (full overscroll DOM just mounted)\n  const prevMobileOnlyRef = useRef(mobileOnly);\n  useEffect(() => {\n    if (!mobileOnly && prevMobileOnlyRef.current) scrollToInitialPosition();\n    prevMobileOnlyRef.current = mobileOnly;\n  }, [mobileOnly, scrollToInitialPosition]);\n\n  // Update header height on window resize while in mobile view\n  const prevHeightRef = useRef(height);\n  useEffect(() => {\n    if (isMobileSize && height !== prevHeightRef.current && overscrollRef.current) {\n      updateHeaderHeight(overscrollRef.current.scrollTop);\n    }\n    prevHeightRef.current = height;\n  }, [height, isMobileSize, updateHeaderHeight]);\n\n  function handleScroll(e: UIEvent<HTMLDivElement>) {\n    updateHeaderHeight(e.currentTarget.scrollTop);\n    if (!isScrollingRef.current) {\n      isScrollingRef.current = true;\n      onScrollChangeRef.current(true);\n    }\n    if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);\n    scrollTimeoutRef.current = setTimeout(() => {\n      scrollTimeoutRef.current = null;\n      isScrollingRef.current = false;\n      onScrollChangeRef.current(false);\n    }, 500);\n  }\n\n  if (mobileOnly && !isMobileSize) {\n    if (overscrollContentDesktop) return <div>{overscrollContentDesktop}{children}</div>;\n    return <>{children}</>;\n  }\n\n  const contentMinHeight = unit === '%' ? `${100 - min}%` : `calc(100% - ${min}px)`;\n\n  return (\n    <div className={styles.overscroll} ref={overscrollRef} onScroll={handleScroll}>\n      <div\n        className={styles.overscrollHeaderContainer}\n        style={{ height: `${max}${unit}` }}\n        ref={overscrollHeaderContainerRef}\n      >\n        <div\n          className={cx(styles.overscrollHeader, centerHeader && styles.overscrollHeaderCentered)}\n          ref={overscrollHeaderRef}\n        >\n          {overscrollContent}\n        </div>\n      </div>\n      <div style={{ minHeight: contentMinHeight }}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/esm/common/pagination/pagination.mjs

@@ -0,0 +1,2 @@
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{renderIcon as t}from"../utils/renderIcon.mjs";import n from"./pagination.module.mjs";import{useState as r}from"react";import i from"classnames";import{faAnglesLeft as a,faAnglesRight as o,faChevronLeft as s,faChevronRight as c}from"@fortawesome/free-solid-svg-icons";import{jsx as l,jsxs as u}from"react/jsx-runtime";var d=`dots`;function f(e,t){return t<e?[]:Array.from({length:t-e+1},(t,n)=>e+n)}function p(e,t){return Math.max(1,Math.min(t,Math.round(e)))}function m(e,t,n,r){if(n*2+r*2+3>=t)return f(1,t);let i=f(1,r),a=f(t-r+1,t),o=i.length>0?[d]:[],s=a.length>0?[d]:[],c=Math.max(e-n,r+1),l=Math.min(e+n,t-r),u=c>r+2,p=l<t-r-1;return!u&&p?[...f(1,r+n*2+2),...s,...a]:u&&!p?[...i,...o,...f(t-r-n*2-1,t)]:[...i,...o,...f(c,l),...s,...a]}function h(f){let{total:h,page:g,defaultPage:_=1,onChange:v=()=>{},siblings:y=1,boundaries:b=1,showControls:x=!0,showEdges:S=!1,disabled:C=!1,previousIcon:w=s,nextIcon:T=c,firstIcon:E=a,lastIcon:D=o,"aria-label":O=`Pagination`,className:k,style:A,classNames:j,styles:M,...N}=e(`Pagination`,f),P=g!==void 0,[F,I]=r(_),L=p(P?g:F,h);if(h<1)return null;function R(e){let t=p(e,h);t!==L&&(P||I(t),v(t))}let z=i(n.paginationControl,j?.control);function B(e,n,r,i,a){return l(`button`,{type:`button`,className:z,style:M?.control,"aria-label":n,disabled:C||a,onClick:()=>R(i),children:t(r)},e)}let V=L<=1,H=L>=h;return u(`nav`,{...N,"aria-label":O,className:i(n.pagination,j?.root,k),style:{...A,...M?.root},children:[S&&B(`first`,`Go to first page`,E,1,V),x&&B(`previous`,`Go to previous page`,w,L-1,V),m(L,h,y,b).map((e,t)=>e===d?l(`span`,{"aria-hidden":`true`,className:i(n.paginationEllipsis,j?.ellipsis),style:M?.ellipsis,children:`…`},`dots-${t}`):l(`button`,{type:`button`,className:i(n.paginationItem,e===L&&n.paginationItemActive,j?.item),style:M?.item,"aria-label":`Go to page ${e}`,"aria-current":e===L?`page`:void 0,disabled:C,onClick:()=>R(e),children:e},e)),x&&B(`next`,`Go to next page`,T,L+1,H),S&&B(`last`,`Go to last page`,D,h,H)]})}export{h as default};
+//# sourceMappingURL=pagination.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.mjs","names":[],"sources":["../../../../package/common/pagination/pagination.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactElement } from 'react';\nimport cx from 'classnames';\nimport {\n  faAnglesLeft,\n  faAnglesRight,\n  faChevronLeft,\n  faChevronRight,\n} from '@fortawesome/free-solid-svg-icons';\n\nimport { useComponentDefaults } from '../configProvider';\nimport type { IconContent } from '../types/icon.types';\nimport { renderIcon } from '../utils/renderIcon';\nimport type { PaginationProps } from './pagination.types';\n\nimport styles from './pagination.module.pcss';\n\nconst DOTS = 'dots';\n\ntype PaginationEntry = number | typeof DOTS;\n\nfunction range(start: number, end: number): number[] {\n  if (end < start) return [];\n  return Array.from({ length: end - start + 1 }, (_, index) => start + index);\n}\n\nfunction clampPage(page: number, total: number): number {\n  return Math.max(1, Math.min(total, Math.round(page)));\n}\n\nfunction getEntries(page: number, total: number, siblings: number, boundaries: number): PaginationEntry[] {\n  const maxEntries = siblings * 2 + boundaries * 2 + 3;\n  if (maxEntries >= total) return range(1, total);\n\n  const leftBoundary = range(1, boundaries);\n  const rightBoundary = range(total - boundaries + 1, total);\n  const leftGap: PaginationEntry[] = leftBoundary.length > 0 ? [DOTS] : [];\n  const rightGap: PaginationEntry[] = rightBoundary.length > 0 ? [DOTS] : [];\n\n  const leftSibling = Math.max(page - siblings, boundaries + 1);\n  const rightSibling = Math.min(page + siblings, total - boundaries);\n\n  const hasLeftDots = leftSibling > boundaries + 2;\n  const hasRightDots = rightSibling < total - boundaries - 1;\n\n  if (!hasLeftDots && hasRightDots) {\n    return [...range(1, boundaries + siblings * 2 + 2), ...rightGap, ...rightBoundary];\n  }\n\n  if (hasLeftDots && !hasRightDots) {\n    return [...leftBoundary, ...leftGap, ...range(total - boundaries - siblings * 2 - 1, total)];\n  }\n\n  return [\n    ...leftBoundary,\n    ...leftGap,\n    ...range(leftSibling, rightSibling),\n    ...rightGap,\n    ...rightBoundary,\n  ];\n}\n\nfunction Pagination(props: PaginationProps): ReactElement | null {\n  const {\n    total,\n    page: controlledPage,\n    defaultPage = 1,\n    onChange = () => {},\n    siblings = 1,\n    boundaries = 1,\n    showControls = true,\n    showEdges = false,\n    disabled = false,\n    previousIcon = faChevronLeft,\n    nextIcon = faChevronRight,\n    firstIcon = faAnglesLeft,\n    lastIcon = faAnglesRight,\n    'aria-label': ariaLabel = 'Pagination',\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Pagination', props);\n\n  const isControlled = controlledPage !== undefined;\n  const [internalPage, setInternalPage] = useState(defaultPage);\n  const page = clampPage(isControlled ? controlledPage! : internalPage, total);\n\n  if (total < 1) return null;\n\n  function goTo(next: number) {\n    const clamped = clampPage(next, total);\n    if (clamped === page) return;\n    if (!isControlled) setInternalPage(clamped);\n    onChange(clamped);\n  }\n\n  const controlClassName = cx(styles.paginationControl, classNames?.control);\n\n  function renderControl(key: string, label: string, icon: IconContent, target: number, isDisabled: boolean) {\n    return (\n      <button\n        key={key}\n        type=\"button\"\n        className={controlClassName}\n        style={slotStyles?.control}\n        aria-label={label}\n        disabled={disabled || isDisabled}\n        onClick={() => goTo(target)}\n      >\n        {renderIcon(icon)}\n      </button>\n    );\n  }\n\n  const isFirst = page <= 1;\n  const isLast = page >= total;\n\n  return (\n    <nav\n      {...rest}\n      aria-label={ariaLabel}\n      className={cx(styles.pagination, classNames?.root, className)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      {showEdges && renderControl('first', 'Go to first page', firstIcon, 1, isFirst)}\n      {showControls && renderControl('previous', 'Go to previous page', previousIcon, page - 1, isFirst)}\n\n      {getEntries(page, total, siblings, boundaries).map((entry, index) =>\n        entry === DOTS ? (\n          <span\n            key={`dots-${index}`}\n            aria-hidden=\"true\"\n            className={cx(styles.paginationEllipsis, classNames?.ellipsis)}\n            style={slotStyles?.ellipsis}\n          >\n            &hellip;\n          </span>\n        ) : (\n          <button\n            key={entry}\n            type=\"button\"\n            className={cx(\n              styles.paginationItem,\n              entry === page && styles.paginationItemActive,\n              classNames?.item\n            )}\n            style={slotStyles?.item}\n            aria-label={`Go to page ${entry}`}\n            aria-current={entry === page ? 'page' : undefined}\n            disabled={disabled}\n            onClick={() => goTo(entry)}\n          >\n            {entry}\n          </button>\n        )\n      )}\n\n      {showControls && renderControl('next', 'Go to next page', nextIcon, page + 1, isLast)}\n      {showEdges && renderControl('last', 'Go to last page', lastIcon, total, isLast)}\n    </nav>\n  );\n}\n\nexport default Pagination;\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+var e={pagination:`pagination_Pbz1I`,"pagination-item":`pagination-item_2SyYK`,paginationItem:`pagination-item_2SyYK`,"pagination-control":`pagination-control_T0gUc`,paginationControl:`pagination-control_T0gUc`,"pagination-item-active":`pagination-item-active_MgtgT`,paginationItemActive:`pagination-item-active_MgtgT`,"pagination-ellipsis":`pagination-ellipsis_jU--t`,paginationEllipsis:`pagination-ellipsis_jU--t`};export{e as default};
+//# sourceMappingURL=pagination.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.module.mjs","names":[],"sources":["../../../../package/common/pagination/pagination.module.pcss"],"sourcesContent":[".pagination {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--pagination-gap, 4px);\n\n  &-item,\n  &-control {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    min-width: var(--pagination-size, 36px);\n    height: var(--pagination-size, 36px);\n    padding: 0 6px;\n    border: 1px solid var(--border-color);\n    border-radius: var(--default-border-radius);\n    background: transparent;\n    color: var(--text-color);\n    font: inherit;\n    font-size: var(--default-font-size);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    transition: background-color 0.15s, color 0.15s, border-color 0.15s;\n\n    &:hover:not(:disabled) {\n      background: var(--background-accent);\n    }\n\n    &:focus-visible {\n      outline: var(--focus-border-color, var(--primary-color)) solid 2px;\n      outline-offset: -2px;\n    }\n\n    &:disabled {\n      cursor: default;\n      opacity: 0.5;\n    }\n  }\n\n  /* Ties on specificity with the shared `&-item` rule above and wins on source order, so the\n     active page keeps its fill through hover too rather than falling back to the hover surface. */\n  &-item-active {\n    border-color: var(--pagination-active-background, var(--primary-color));\n    background: var(--pagination-active-background, var(--primary-color));\n    color: var(--pagination-active-color, var(--text-on-primary));\n\n    &:hover:not(:disabled) {\n      background: var(--pagination-active-background, var(--primary-color));\n    }\n\n    /* The active item sits on the primary fill, where the default primary-color focus ring is\n       invisible — same swap OptionPicker makes for its selected option. */\n    &:focus-visible {\n      outline-color: var(--pagination-active-color, var(--text-on-primary));\n    }\n  }\n\n  &-ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--pagination-size, 36px);\n    height: var(--pagination-size, 36px);\n    color: var(--text-dark);\n    user-select: none;\n  }\n}\n"],"mappings":""}

package/dist/esm/common/popover/usePopoverPosition.mjs

@@ -1,2 +1,2 @@
-import{getScrollableAncestors as e,isHiddenByAnyAncestor as t}from"../utils/scrollAncestors.mjs";import{getVisualViewportRect as n}from"../utils/visualViewport.mjs";import{PopoverAlign as r,PopoverPlacement as i}from"./popover.types.mjs";import{useLayoutEffect as a}from"react";var o={[i.Top]:`bottom`,[i.Bottom]:`top`,[i.Left]:`right`,[i.Right]:`left`},s=8;function c({isOpen:c,placement:l,align:u,offset:d,triggerRef:f,floatingRef:p,panelRef:m,arrowRef:h}){a(()=>{if(!c)return;let a,g;function _(){let c=f.current,v=p.current,y=m.current;if(!c||!v||!y){a=requestAnimationFrame(_);return}let b=e(c);function x(){let e=c.getBoundingClientRect(),a=y.offsetWidth,f=y.offsetHeight,p=n(),m={top:e.top-p.top,bottom:p.top+p.height-e.bottom,left:e.left-p.left,right:p.left+p.width-e.right},g=l===i.Top||l===i.Bottom?f:a,_=l,x=o[l];m[_]<g+d&&m[x]>m[_]&&(_=x);let S=_===`top`||_===`bottom`,C,w;_===`bottom`?C=e.bottom+d:_===`top`?C=e.top-d-f:w=_===`right`?e.right+d:e.left-d-a,S?(w=u===r.Start?e.left:u===r.End?e.right-a:e.left+e.width/2-a/2,w=Math.max(p.left+s,Math.min(w,p.left+p.width-a-s))):(C=u===r.Start?e.top:u===r.End?e.bottom-f:e.top+e.height/2-f/2,C=Math.max(p.top+s,Math.min(C,p.top+p.height-f-s))),v.style.top=`${C}px`,v.style.left=`${w}px`,v.style.visibility=t(e,b)?`hidden`:`visible`,v.dataset.placement=_;let T=h.current;if(T){let t=T.offsetWidth/2||5;if(S){let n=e.left+e.width/2-w;T.style.setProperty(`--arrow-x`,`${Math.max(t+2,Math.min(n,a-t-2))}px`),T.style.removeProperty(`--arrow-y`)}else{let n=e.top+e.height/2-C;T.style.setProperty(`--arrow-y`,`${Math.max(t+2,Math.min(n,f-t-2))}px`),T.style.removeProperty(`--arrow-x`)}}}x();let S=[window,...b];S.forEach(e=>e.addEventListener(`scroll`,x,{passive:!0})),window.addEventListener(`resize`,x),window.visualViewport?.addEventListener(`resize`,x),window.visualViewport?.addEventListener(`scroll`,x),g=()=>{S.forEach(e=>e.removeEventListener(`scroll`,x)),window.removeEventListener(`resize`,x),window.visualViewport?.removeEventListener(`resize`,x),window.visualViewport?.removeEventListener(`scroll`,x),v.style.top=``,v.style.left=``,v.style.visibility=``}}return _(),()=>{a!==void 0&&cancelAnimationFrame(a),g?.()}},[c,l,u,d,f,p,m,h])}export{c as usePopoverPosition};
+import{isHiddenByAnyAncestor as e}from"../utils/scrollAncestors.mjs";import{getVisualViewportRect as t}from"../utils/visualViewport.mjs";import{useAnchorTracking as n}from"../hooks/useAnchorTracking.mjs";import{PopoverAlign as r,PopoverPlacement as i}from"./popover.types.mjs";var a={[i.Top]:`bottom`,[i.Bottom]:`top`,[i.Left]:`right`,[i.Right]:`left`},o=8;function s({isOpen:s,placement:c,align:l,offset:u,triggerRef:d,floatingRef:f,panelRef:p,arrowRef:m}){n({isOpen:s,triggerRef:d,elementRefs:[f,p],resizeRefs:[p],deps:[c,l,u,f,p,m],update:(n,s)=>{let d=f.current,h=p.current;if(!d||!h)return;let g=n.getBoundingClientRect(),_=h.offsetWidth,v=h.offsetHeight,y=t(),b={top:g.top-y.top,bottom:y.top+y.height-g.bottom,left:g.left-y.left,right:y.left+y.width-g.right},x=c===i.Top||c===i.Bottom?v:_,S=c,C=a[c];b[S]<x+u&&b[C]>b[S]&&(S=C);let w=S===`top`||S===`bottom`,T,E;S===`bottom`?T=g.bottom+u:S===`top`?T=g.top-u-v:E=S===`right`?g.right+u:g.left-u-_,w?(E=l===r.Start?g.left:l===r.End?g.right-_:g.left+g.width/2-_/2,E=Math.max(y.left+o,Math.min(E,y.left+y.width-_-o))):(T=l===r.Start?g.top:l===r.End?g.bottom-v:g.top+g.height/2-v/2,T=Math.max(y.top+o,Math.min(T,y.top+y.height-v-o))),d.style.top=`${T}px`,d.style.left=`${E}px`,d.style.visibility=e(g,s)?`hidden`:`visible`,d.dataset.placement=S;let D=m.current;if(D){let e=D.offsetWidth/2||5;if(w){let t=g.left+g.width/2-E;D.style.setProperty(`--arrow-x`,`${Math.max(e+2,Math.min(t,_-e-2))}px`),D.style.removeProperty(`--arrow-y`)}else{let t=g.top+g.height/2-T;D.style.setProperty(`--arrow-y`,`${Math.max(e+2,Math.min(t,v-e-2))}px`),D.style.removeProperty(`--arrow-x`)}}},teardown:()=>{let e=f.current;e&&(e.style.top=``,e.style.left=``,e.style.visibility=``)}})}export{s as usePopoverPosition};
 //# sourceMappingURL=usePopoverPosition.mjs.map

package/dist/esm/common/popover/usePopoverPosition.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePopoverPosition.mjs","names":[],"sources":["../../../../package/common/popover/usePopoverPosition.ts"],"sourcesContent":["import { useLayoutEffect, type RefObject } from 'react';\nimport { getScrollableAncestors, isHiddenByAnyAncestor } from 'components/common/utils/scrollAncestors';\nimport { getVisualViewportRect } from 'components/common/utils/visualViewport';\nimport { PopoverPlacement, PopoverAlign } from './popover.types';\n\ntype Axis = 'top' | 'bottom' | 'left' | 'right';\nconst OPPOSITE: Record<PopoverPlacement, Axis> = {\n  [PopoverPlacement.Top]: 'bottom',\n  [PopoverPlacement.Bottom]: 'top',\n  [PopoverPlacement.Left]: 'right',\n  [PopoverPlacement.Right]: 'left',\n};\n\nconst MARGIN = 8; // viewport gutter kept clear when shifting a panel back on-screen\n\nexport interface UsePopoverPositionArgs {\n  isOpen: boolean;\n  placement: PopoverPlacement;\n  align: PopoverAlign;\n  offset: number;\n  triggerRef: RefObject<HTMLElement | null>;\n  /** `position: fixed` wrapper that receives top/left/visibility and the resolved-placement data attribute. */\n  floatingRef: RefObject<HTMLElement | null>;\n  /** Visible panel, measured to decide flip and shift. */\n  panelRef: RefObject<HTMLElement | null>;\n  /** Arrow element; gets `--arrow-x` / `--arrow-y` written to it. Pass a null ref when `withArrow` is false. */\n  arrowRef: RefObject<HTMLElement | null>;\n}\n\n/**\n * Positions a portaled, `position: fixed` popover on any of the four sides of its trigger with\n * start/center/end cross-axis alignment. Flips to the opposite side when the preferred one has no\n * room, shifts back on-screen along the cross axis, points the arrow at the trigger centre, and\n * hides (not closes) the panel once the trigger scrolls behind a clipping ancestor. Position is\n * written straight to the DOM via refs — going through setState lags the browser's scroll paint.\n */\nexport function usePopoverPosition({\n  isOpen, placement, align, offset, triggerRef, floatingRef, panelRef, arrowRef,\n}: UsePopoverPositionArgs) {\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    let rafId: number | undefined;\n    let teardown: (() => void) | undefined;\n\n    // The portal target (BodyEnd's #bodyEnd) can still be missing on the first commit, so the\n    // floating ref lands one render later. Refs don't re-fire the effect, so retry each frame.\n    function trySetup() {\n      const trigger = triggerRef.current;\n      const floating = floatingRef.current;\n      const panel = panelRef.current;\n      if (!trigger || !floating || !panel) {\n        rafId = requestAnimationFrame(trySetup);\n        return;\n      }\n      const ancestors = getScrollableAncestors(trigger);\n\n      function updatePos() {\n        const t = trigger!.getBoundingClientRect();\n        const pw = panel!.offsetWidth;\n        const ph = panel!.offsetHeight;\n        // The visible area, not the full layout viewport — shrinks on mobile when a keyboard is\n        // open, so the panel flips/clamps against what's actually on screen instead of ending up\n        // hidden behind the keyboard.\n        const vv = getVisualViewportRect();\n\n        // Resolve the main-axis side, flipping when the preferred side lacks room and the\n        // opposite side has more.\n        const room: Record<Axis, number> = {\n          top: t.top - vv.top,\n          bottom: vv.top + vv.height - t.bottom,\n          left: t.left - vv.left,\n          right: vv.left + vv.width - t.right,\n        };\n        const need = (placement === PopoverPlacement.Top || placement === PopoverPlacement.Bottom) ? ph : pw;\n        let side: Axis = placement as unknown as Axis;\n        const opp = OPPOSITE[placement];\n        if (room[side] < need + offset && room[opp] > room[side]) side = opp;\n\n        const vertical = side === 'top' || side === 'bottom';\n\n        // Main axis: place the panel just outside the trigger on the resolved side.\n        let top: number;\n        let left: number;\n        if (side === 'bottom') { top = t.bottom + offset; }\n        else if (side === 'top') { top = t.top - offset - ph; }\n        else if (side === 'right') { left = t.right + offset; }\n        else { left = t.left - offset - pw; }\n\n        // Cross axis: align start/center/end against the trigger, then shift on-screen.\n        if (vertical) {\n          if (align === PopoverAlign.Start) left = t.left;\n          else if (align === PopoverAlign.End) left = t.right - pw;\n          else left = t.left + t.width / 2 - pw / 2;\n          left = Math.max(vv.left + MARGIN, Math.min(left!, vv.left + vv.width - pw - MARGIN));\n        } else {\n          if (align === PopoverAlign.Start) top = t.top;\n          else if (align === PopoverAlign.End) top = t.bottom - ph;\n          else top = t.top + t.height / 2 - ph / 2;\n          top = Math.max(vv.top + MARGIN, Math.min(top!, vv.top + vv.height - ph - MARGIN));\n        }\n\n        floating!.style.top = `${top!}px`;\n        floating!.style.left = `${left!}px`;\n        floating!.style.visibility = isHiddenByAnyAncestor(t, ancestors) ? 'hidden' : 'visible';\n        floating!.dataset.placement = side;\n\n        // Arrow: centre it on the trigger along the cross axis, clamped inside the panel edges.\n        const arrow = arrowRef.current;\n        if (arrow) {\n          const half = arrow.offsetWidth / 2 || 5;\n          if (vertical) {\n            const x = t.left + t.width / 2 - left!;\n            arrow.style.setProperty('--arrow-x', `${Math.max(half + 2, Math.min(x, pw - half - 2))}px`);\n            arrow.style.removeProperty('--arrow-y');\n          } else {\n            const y = t.top + t.height / 2 - top!;\n            arrow.style.setProperty('--arrow-y', `${Math.max(half + 2, Math.min(y, ph - half - 2))}px`);\n            arrow.style.removeProperty('--arrow-x');\n          }\n        }\n      }\n\n      updatePos();\n\n      const scrollTargets: (Window | HTMLElement)[] = [window, ...ancestors];\n      scrollTargets.forEach((tt) => tt.addEventListener('scroll', updatePos, { passive: true }));\n      window.addEventListener('resize', updatePos);\n      // `window.resize` doesn't reliably fire when a mobile keyboard opens/closes — visualViewport\n      // does, and is what the room/clamp math above is measured against.\n      window.visualViewport?.addEventListener('resize', updatePos);\n      window.visualViewport?.addEventListener('scroll', updatePos);\n      teardown = () => {\n        scrollTargets.forEach((tt) => tt.removeEventListener('scroll', updatePos));\n        window.removeEventListener('resize', updatePos);\n        window.visualViewport?.removeEventListener('resize', updatePos);\n        window.visualViewport?.removeEventListener('scroll', updatePos);\n        // Positioning is written as inline styles, which outrank any class the panel might\n        // switch to while it stays mounted — a popover turning into a bottom sheet (`useSheet`)\n        // would keep the coordinates computed for its anchored self.\n        floating!.style.top = '';\n        floating!.style.left = '';\n        floating!.style.visibility = '';\n      };\n    }\n\n    trySetup();\n\n    return () => {\n      if (rafId !== undefined) cancelAnimationFrame(rafId);\n      teardown?.();\n    };\n  }, [isOpen, placement, align, offset, triggerRef, floatingRef, panelRef, arrowRef]);\n}\n"],"mappings":"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"}
+{"version":3,"file":"usePopoverPosition.mjs","names":[],"sources":["../../../../package/common/popover/usePopoverPosition.ts"],"sourcesContent":["import { type RefObject } from 'react';\nimport { isHiddenByAnyAncestor } from 'components/common/utils/scrollAncestors';\nimport { getVisualViewportRect } from 'components/common/utils/visualViewport';\nimport { useAnchorTracking } from '../hooks/useAnchorTracking';\nimport { PopoverPlacement, PopoverAlign } from './popover.types';\n\ntype Axis = 'top' | 'bottom' | 'left' | 'right';\nconst OPPOSITE: Record<PopoverPlacement, Axis> = {\n  [PopoverPlacement.Top]: 'bottom',\n  [PopoverPlacement.Bottom]: 'top',\n  [PopoverPlacement.Left]: 'right',\n  [PopoverPlacement.Right]: 'left',\n};\n\nconst MARGIN = 8; // viewport gutter kept clear when shifting a panel back on-screen\n\nexport interface UsePopoverPositionArgs {\n  isOpen: boolean;\n  placement: PopoverPlacement;\n  align: PopoverAlign;\n  offset: number;\n  triggerRef: RefObject<HTMLElement | null>;\n  /** `position: fixed` wrapper that receives top/left/visibility and the resolved-placement data attribute. */\n  floatingRef: RefObject<HTMLElement | null>;\n  /** Visible panel, measured to decide flip and shift. */\n  panelRef: RefObject<HTMLElement | null>;\n  /** Arrow element; gets `--arrow-x` / `--arrow-y` written to it. Pass a null ref when `withArrow` is false. */\n  arrowRef: RefObject<HTMLElement | null>;\n}\n\n/**\n * Positions a portaled, `position: fixed` popover on any of the four sides of its trigger with\n * start/center/end cross-axis alignment. Flips to the opposite side when the preferred one has no\n * room, shifts back on-screen along the cross axis, points the arrow at the trigger centre, and\n * hides (not closes) the panel once the trigger scrolls behind a clipping ancestor.\n *\n * `useAnchorTracking` supplies the lifecycle around this: mount wait, ancestor resolution, and\n * re-running on scroll, viewport resize and panel size changes.\n */\nexport function usePopoverPosition({\n  isOpen, placement, align, offset, triggerRef, floatingRef, panelRef, arrowRef,\n}: UsePopoverPositionArgs) {\n  useAnchorTracking({\n    isOpen,\n    triggerRef,\n    elementRefs: [floatingRef, panelRef],\n    // The panel's own size feeds the flip decision and, on the `top`/`left` sides, the coordinate\n    // itself — so content that resizes while open has to be re-measured.\n    resizeRefs: [panelRef],\n    deps: [placement, align, offset, floatingRef, panelRef, arrowRef],\n\n    update: (trigger, ancestors) => {\n      const floating = floatingRef.current;\n      const panel = panelRef.current;\n      if (!floating || !panel) return;\n\n      const t = trigger.getBoundingClientRect();\n      const pw = panel.offsetWidth;\n      const ph = panel.offsetHeight;\n      // The visible area, not the full layout viewport — shrinks on mobile when a keyboard is\n      // open, so the panel flips/clamps against what's actually on screen instead of ending up\n      // hidden behind the keyboard.\n      const vv = getVisualViewportRect();\n\n      // Resolve the main-axis side, flipping when the preferred side lacks room and the\n      // opposite side has more.\n      const room: Record<Axis, number> = {\n        top: t.top - vv.top,\n        bottom: vv.top + vv.height - t.bottom,\n        left: t.left - vv.left,\n        right: vv.left + vv.width - t.right,\n      };\n      const need = (placement === PopoverPlacement.Top || placement === PopoverPlacement.Bottom) ? ph : pw;\n      let side: Axis = placement as unknown as Axis;\n      const opp = OPPOSITE[placement];\n      if (room[side] < need + offset && room[opp] > room[side]) side = opp;\n\n      const vertical = side === 'top' || side === 'bottom';\n\n      // Main axis: place the panel just outside the trigger on the resolved side.\n      let top: number;\n      let left: number;\n      if (side === 'bottom') { top = t.bottom + offset; }\n      else if (side === 'top') { top = t.top - offset - ph; }\n      else if (side === 'right') { left = t.right + offset; }\n      else { left = t.left - offset - pw; }\n\n      // Cross axis: align start/center/end against the trigger, then shift on-screen.\n      if (vertical) {\n        if (align === PopoverAlign.Start) left = t.left;\n        else if (align === PopoverAlign.End) left = t.right - pw;\n        else left = t.left + t.width / 2 - pw / 2;\n        left = Math.max(vv.left + MARGIN, Math.min(left!, vv.left + vv.width - pw - MARGIN));\n      } else {\n        if (align === PopoverAlign.Start) top = t.top;\n        else if (align === PopoverAlign.End) top = t.bottom - ph;\n        else top = t.top + t.height / 2 - ph / 2;\n        top = Math.max(vv.top + MARGIN, Math.min(top!, vv.top + vv.height - ph - MARGIN));\n      }\n\n      floating.style.top = `${top!}px`;\n      floating.style.left = `${left!}px`;\n      floating.style.visibility = isHiddenByAnyAncestor(t, ancestors) ? 'hidden' : 'visible';\n      floating.dataset.placement = side;\n\n      // Arrow: centre it on the trigger along the cross axis, clamped inside the panel edges.\n      const arrow = arrowRef.current;\n      if (arrow) {\n        const half = arrow.offsetWidth / 2 || 5;\n        if (vertical) {\n          const x = t.left + t.width / 2 - left!;\n          arrow.style.setProperty('--arrow-x', `${Math.max(half + 2, Math.min(x, pw - half - 2))}px`);\n          arrow.style.removeProperty('--arrow-y');\n        } else {\n          const y = t.top + t.height / 2 - top!;\n          arrow.style.setProperty('--arrow-y', `${Math.max(half + 2, Math.min(y, ph - half - 2))}px`);\n          arrow.style.removeProperty('--arrow-x');\n        }\n      }\n    },\n\n    teardown: () => {\n      // Positioning is written as inline styles, which outrank any class the panel might\n      // switch to while it stays mounted — a popover turning into a bottom sheet (`useSheet`)\n      // would keep the coordinates computed for its anchored self.\n      const floating = floatingRef.current;\n      if (!floating) return;\n      floating.style.top = '';\n      floating.style.left = '';\n      floating.style.visibility = '';\n    },\n  });\n}\n"],"mappings":"qRAOA,IAAM,EAA2C,EAC9C,EAAiB,KAAM,UACvB,EAAiB,QAAS,OAC1B,EAAiB,MAAO,SACxB,EAAiB,OAAQ,MAC5B,EAEM,EAAS,EAyBf,SAAgB,EAAmB,CACjC,SAAQ,YAAW,QAAO,SAAQ,aAAY,cAAa,WAAU,YAC5C,CACzB,EAAkB,CAChB,SACA,aACA,YAAa,CAAC,EAAa,CAAQ,EAGnC,WAAY,CAAC,CAAQ,EACrB,KAAM,CAAC,EAAW,EAAO,EAAQ,EAAa,EAAU,CAAQ,EAEhE,QAAS,EAAS,IAAc,CAC9B,IAAM,EAAW,EAAY,QACvB,EAAQ,EAAS,QACvB,GAAI,CAAC,GAAY,CAAC,EAAO,OAEzB,IAAM,EAAI,EAAQ,sBAAsB,EAClC,EAAK,EAAM,YACX,EAAK,EAAM,aAIX,EAAK,EAAsB,EAI3B,EAA6B,CACjC,IAAK,EAAE,IAAM,EAAG,IAChB,OAAQ,EAAG,IAAM,EAAG,OAAS,EAAE,OAC/B,KAAM,EAAE,KAAO,EAAG,KAClB,MAAO,EAAG,KAAO,EAAG,MAAQ,EAAE,KAChC,EACM,EAAQ,IAAc,EAAiB,KAAO,IAAc,EAAiB,OAAU,EAAK,EAC9F,EAAa,EACX,EAAM,EAAS,GACjB,EAAK,GAAQ,EAAO,GAAU,EAAK,GAAO,EAAK,KAAO,EAAO,GAEjE,IAAM,EAAW,IAAS,OAAS,IAAS,SAGxC,EACA,EACA,IAAS,SAAY,EAAM,EAAE,OAAS,EACjC,IAAS,MAAS,EAAM,EAAE,IAAM,EAAS,EAC7C,AACE,EADE,IAAS,QAAkB,EAAE,MAAQ,EAChC,EAAE,KAAO,EAAS,EAG5B,GACF,AAEK,EAFD,IAAU,EAAa,MAAc,EAAE,KAClC,IAAU,EAAa,IAAY,EAAE,MAAQ,EAC1C,EAAE,KAAO,EAAE,MAAQ,EAAI,EAAK,EACxC,EAAO,KAAK,IAAI,EAAG,KAAO,EAAQ,KAAK,IAAI,EAAO,EAAG,KAAO,EAAG,MAAQ,EAAK,CAAM,CAAC,IAEnF,AAEK,EAFD,IAAU,EAAa,MAAa,EAAE,IACjC,IAAU,EAAa,IAAW,EAAE,OAAS,EAC3C,EAAE,IAAM,EAAE,OAAS,EAAI,EAAK,EACvC,EAAM,KAAK,IAAI,EAAG,IAAM,EAAQ,KAAK,IAAI,EAAM,EAAG,IAAM,EAAG,OAAS,EAAK,CAAM,CAAC,GAGlF,EAAS,MAAM,IAAM,GAAG,EAAK,IAC7B,EAAS,MAAM,KAAO,GAAG,EAAM,IAC/B,EAAS,MAAM,WAAa,EAAsB,EAAG,CAAS,EAAI,SAAW,UAC7E,EAAS,QAAQ,UAAY,EAG7B,IAAM,EAAQ,EAAS,QACvB,GAAI,EAAO,CACT,IAAM,EAAO,EAAM,YAAc,GAAK,EACtC,GAAI,EAAU,CACZ,IAAM,EAAI,EAAE,KAAO,EAAE,MAAQ,EAAI,EACjC,EAAM,MAAM,YAAY,YAAa,GAAG,KAAK,IAAI,EAAO,EAAG,KAAK,IAAI,EAAG,EAAK,EAAO,CAAC,CAAC,EAAE,GAAG,EAC1F,EAAM,MAAM,eAAe,WAAW,CACxC,KAAO,CACL,IAAM,EAAI,EAAE,IAAM,EAAE,OAAS,EAAI,EACjC,EAAM,MAAM,YAAY,YAAa,GAAG,KAAK,IAAI,EAAO,EAAG,KAAK,IAAI,EAAG,EAAK,EAAO,CAAC,CAAC,EAAE,GAAG,EAC1F,EAAM,MAAM,eAAe,WAAW,CACxC,CACF,CACF,EAEA,aAAgB,CAId,IAAM,EAAW,EAAY,QACxB,IACL,EAAS,MAAM,IAAM,GACrB,EAAS,MAAM,KAAO,GACtB,EAAS,MAAM,WAAa,GAC9B,CACF,CAAC,CACH"}