@ahrowe/ui 0.34.0 → 0.36.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/esm/common/otpInput/otpInput.mjs

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import n from"../tooltip/tooltip.mjs";import{OtpInputCharset as r}from"./otpInput.types.mjs";import i from"./otpInput.module.mjs";import{useEffect as a,useRef as o,useState as s}from"react";import c from"classnames";import{jsx as l,jsxs as u}from"react/jsx-runtime";var d=/[0-9]/g,f=/[a-zA-Z0-9]/g,p={field:`One-time code`,digit:(e,t)=>`Digit ${e} of ${t}`};function m(e,t){let n=t===r.Alphanumeric?f:d;return(e.match(n)||[]).join(``)}function h(d){let{length:f=6,value:h,onChange:g=()=>{},onComplete:_=()=>{},formValidator:v=null,charset:y=r.Numeric,masked:b=!1,groupAfter:x=[],label:S=``,isValid:C=!0,errorMessage:w=``,isRequired:T=!1,clearOnError:E=!1,clearErrorDelay:D=900,disabled:O=!1,autoFocus:k=!1,className:A=``,style:j,classNames:M,styles:N,labels:P,...F}=e(`OtpInput`,d),I=t(`OtpInput`,P,p),L=(v?v.value:h)??``,[,R]=s(0),[z,B]=s(!1),[V,H]=s(!1),[U,W]=s(!1),G=o([]),K=o(!1);a(()=>{if(!v)return;v.validate();let e=()=>R(e=>e+1);return v.registerOnUpdateListener(e),()=>v.removeOnUpdateListener(e)},[v]),a(()=>{if(!k)return;let e=Math.min(L.length,f-1);G.current[e]?.focus()},[]);let q=v?v.touched&&v.hasError():!C||!!w,J=v?v.getCurrentErrorMessage():w||``;a(()=>{let e=q&&!K.current;if(K.current=q,!e)return;B(!0);let t=window.setTimeout(()=>B(!1),400),n=E?window.setTimeout(()=>{Y(``),G.current[0]?.focus()},D):null;return()=>{window.clearTimeout(t),n!=null&&window.clearTimeout(n)}},[q,E,D]);function Y(e){let t=L.length===f,n=m(e,y).slice(0,f);v&&v.set(n),g?.(n),n.length===f&&!t&&_?.(n)}function X(e,t){let n=L.split(``);n[e]=t,Y(n.join(``))}function Z(e,t){if(O)return;if(t===``){X(e,``);return}let n=m(t,y);if(!n)return;let r=Math.min(e,L.length);if(t.length>1){Q(r,n);return}X(r,n),r<f-1?G.current[r+1]?.focus():G.current[r]?.blur()}function Q(e,t){let n=m(t,y);if(!n)return;let r=L.padEnd(f,` `).split(``),i=e;for(let e of n){if(i>=f)break;r[i]=e,i+=1}Y(r.join(``).trimEnd());let a=Math.min(i,f-1);G.current[a]?.focus(),i>=f&&G.current[f-1]?.blur()}function $(e,t){if(O)return;let n=t.clipboardData.getData(`text`);n&&(t.preventDefault(),Q(Math.min(e,L.length),n))}function ee(e,t){if(!O){if(t.key.length===1&&!t.ctrlKey&&!t.metaKey&&!t.altKey){let n=m(t.key,y);if(n&&L[e]===n){t.preventDefault(),X(e,n),e<f-1?G.current[e+1]?.focus():G.current[e]?.blur();return}}if(t.key===`Backspace`){if(L[e]){X(e,``);return}e>0&&(t.preventDefault(),X(e-1,``),G.current[e-1]?.focus());return}if(t.key===`Delete`){L[e]&&X(e,``);return}if(t.key===`ArrowLeft`&&e>0){t.preventDefault(),G.current[e-1]?.focus();return}t.key===`ArrowRight`&&e<f-1&&(t.preventDefault(),G.current[e+1]?.focus())}}function te(e){e.target.select()}function ne(){H(!0)}function re(e){e.currentTarget.contains(e.relatedTarget)||(H(!1),v&&(v.touched=!0))}return u(`div`,{...F,className:c(i.otpInput,O&&i.otpInputDisabled,A),style:j,children:[S&&u(`div`,{className:c(i.otpInputLabel,M?.label),style:N?.label,children:[S,T&&l(`span`,{className:i.otpInputRequiredMark,children:` *`})]}),l(`div`,{role:`group`,"aria-label":S||I.field,className:c(i.otpInputBoxes,z&&i.otpInputBoxesShake,M?.inputs),style:N?.inputs,onFocus:ne,onBlur:re,onMouseEnter:()=>W(!0),onMouseLeave:()=>W(!1),children:Array.from({length:f},(e,t)=>{let n=L[t]||``;return u(`div`,{className:i.otpInputBoxWrapper,children:[l(`input`,{ref:e=>{G.current[t]=e},type:b?`password`:`text`,inputMode:y===r.Numeric?`numeric`:`text`,pattern:y===r.Numeric?`[0-9]*`:void 0,autoComplete:t===0?`one-time-code`:`off`,maxLength:1,disabled:O,value:n,"aria-label":I.digit(t+1,f),"aria-invalid":q||void 0,className:c(i.otpInputBox,q&&i.otpInputBoxError,n&&i.otpInputBoxFilled,M?.input),style:N?.input,onChange:e=>Z(t,e.target.value),onKeyDown:e=>ee(t,e),onPaste:e=>$(t,e),onFocus:te}),x.includes(t+1)&&t<f-1&&l(`span`,{className:c(i.otpInputSeparator,M?.separator),style:N?.separator})]},t)})}),l(n,{variant:`error`,message:J,isVisible:q&&(V||U)})]})}export{h as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import n from"../tooltip/tooltip.mjs";import{OtpInputCharset as r}from"./otpInput.types.mjs";import i from"./otpInput.module.mjs";import{useEffect as a,useRef as o,useState as s}from"react";import c from"classnames";import{jsx as l,jsxs as u}from"react/jsx-runtime";var d=/[0-9]/g,f=/[a-zA-Z0-9]/g,p={field:`One-time code`,digit:(e,t)=>`Digit ${e} of ${t}`};function m(e,t){let n=t===r.Alphanumeric?f:d;return(e.match(n)||[]).join(``)}function h(d){let{length:f=6,value:h,onChange:g=()=>{},onComplete:_=()=>{},formValidator:v=null,charset:y=r.Numeric,masked:b=!1,groupAfter:x=[],label:S=``,isValid:C=!0,errorMessage:w=``,isRequired:T=!1,clearOnError:E=!1,clearErrorDelay:D=900,disabled:O=!1,autoFocus:k=!1,className:A=``,style:j,classNames:M,styles:N,labels:P,...F}=e(`OtpInput`,d),I=t(`OtpInput`,P,p),L=(v?v.value:h)??``,[,R]=s(0),[z,B]=s(!1),[V,H]=s(!1),[U,W]=s(!1),G=o([]),K=o(!1);a(()=>{if(!v)return;v.validate();let e=()=>R(e=>e+1);return v.registerOnUpdateListener(e),()=>v.removeOnUpdateListener(e)},[v]),a(()=>{if(!k)return;let e=Math.min(L.length,f-1);G.current[e]?.focus()},[]);let q=v?v.touched&&v.hasError():!C||!!w,J=v?v.getCurrentErrorMessage():w||``;a(()=>{let e=q&&!K.current;if(K.current=q,!e)return;B(!0);let t=window.setTimeout(()=>B(!1),400),n=E?window.setTimeout(()=>{Y(``),G.current[0]?.focus()},D):null;return()=>{window.clearTimeout(t),n!=null&&window.clearTimeout(n)}},[q,E,D]);function Y(e){let t=L.length===f,n=m(e,y).slice(0,f);v&&v.set(n),g?.(n),n.length===f&&!t&&_?.(n)}function X(e,t){let n=L.split(``);n[e]=t,Y(n.join(``))}function Z(e,t){if(O)return;if(t===``){X(e,``);return}let n=m(t,y);if(!n)return;let r=Math.min(e,L.length);if(t.length>1){Q(r,n);return}X(r,n),r<f-1?G.current[r+1]?.focus():G.current[r]?.blur()}function Q(e,t){let n=m(t,y);if(!n)return;let r=L.padEnd(f,` `).split(``),i=e;for(let e of n){if(i>=f)break;r[i]=e,i+=1}Y(r.join(``).trimEnd());let a=Math.min(i,f-1);G.current[a]?.focus(),i>=f&&G.current[f-1]?.blur()}function $(e,t){if(O)return;let n=t.clipboardData.getData(`text`);n&&(t.preventDefault(),Q(Math.min(e,L.length),n))}function ee(e,t){if(!O){if(t.key.length===1&&!t.ctrlKey&&!t.metaKey&&!t.altKey){let n=m(t.key,y);if(n&&L[e]===n){t.preventDefault(),X(e,n),e<f-1?G.current[e+1]?.focus():G.current[e]?.blur();return}}if(t.key===`Backspace`){if(L[e]){X(e,``);return}e>0&&(t.preventDefault(),X(e-1,``),G.current[e-1]?.focus());return}if(t.key===`Delete`){L[e]&&X(e,``);return}if(t.key===`ArrowLeft`&&e>0){t.preventDefault(),G.current[e-1]?.focus();return}t.key===`ArrowRight`&&e<f-1&&(t.preventDefault(),G.current[e+1]?.focus())}}function te(e){e.target.select()}function ne(){H(!0)}function re(e){e.currentTarget.contains(e.relatedTarget)||(H(!1),v&&(v.touched=!0))}return u(`div`,{...F,className:c(i.otpInput,O&&i.otpInputDisabled,A),style:j,children:[S&&u(`div`,{className:c(i.otpInputLabel,M?.label),style:N?.label,children:[S,T&&l(`span`,{className:i.otpInputRequiredMark,children:` *`})]}),l(`div`,{role:`group`,"aria-label":S||I.field,className:c(i.otpInputBoxes,z&&i.otpInputBoxesShake,M?.inputs),style:N?.inputs,onFocus:ne,onBlur:re,onMouseEnter:()=>W(!0),onMouseLeave:()=>W(!1),children:Array.from({length:f},(e,t)=>{let n=L[t]||``;return u(`div`,{className:i.otpInputBoxWrapper,children:[l(`input`,{ref:e=>{G.current[t]=e},type:b?`password`:`text`,inputMode:y===r.Numeric?`numeric`:`text`,pattern:y===r.Numeric?`[0-9]*`:void 0,autoComplete:t===0?`one-time-code`:`off`,maxLength:1,disabled:O,value:n,"aria-label":I.digit(t+1,f),"aria-invalid":q||void 0,className:c(i.otpInputBox,q&&i.otpInputBoxError,n&&i.otpInputBoxFilled,M?.input),style:N?.input,onChange:e=>Z(t,e.target.value),onKeyDown:e=>ee(t,e),onPaste:e=>$(t,e),onFocus:te}),x.includes(t+1)&&t<f-1&&l(`span`,{className:c(i.otpInputSeparator,M?.separator),style:N?.separator})]},t)})}),l(n,{variant:`error`,message:J,isVisible:q&&(V||U)})]})}export{h as default};
 //# sourceMappingURL=otpInput.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"otpInput.mjs","names":[],"sources":["../../../../package/common/otpInput/otpInput.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Tooltip from 'components/common/tooltip';\nimport { useComponentDefaults, useLabels } from '../configProvider';\n\nimport { OtpInputCharset, type OtpInputLabels, type OtpInputProps } from './otpInput.types';\nimport styles from './otpInput.module.pcss';\n\nconst NUMERIC_RE = /[0-9]/g;\nconst ALPHANUMERIC_RE = /[a-zA-Z0-9]/g;\n\nconst DEFAULT_LABELS: Required<OtpInputLabels> = {\n  field: 'One-time code',\n  digit: (position, length) => `Digit ${position} of ${length}`,\n};\n\nfunction filterChars(raw: string, charset: OtpInputCharset): string {\n  const re = charset === OtpInputCharset.Alphanumeric ? ALPHANUMERIC_RE : NUMERIC_RE;\n  return (raw.match(re) || []).join('');\n}\n\nfunction OtpInput(props: OtpInputProps): ReactElement {\n  const {\n    length = 6,\n    value,\n    onChange = () => {},\n    onComplete = () => {},\n    formValidator = null,\n    charset = OtpInputCharset.Numeric,\n    masked = false,\n    groupAfter = [],\n    label = '',\n    isValid = true,\n    errorMessage = '',\n    isRequired = false,\n    clearOnError = false,\n    clearErrorDelay = 900,\n    disabled = false,\n    autoFocus = false,\n    className = '',\n    style,\n    classNames,\n    styles: slotStyles,\n    labels,\n    ...rest\n  } = useComponentDefaults('OtpInput', props);\n  const text = useLabels('OtpInput', labels, DEFAULT_LABELS);\n\n  const currentValue = (formValidator ? (formValidator.value as string) : value) ?? '';\n  const [, forceUpdate] = useState(0);\n  const [isShaking, setIsShaking] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n  const wasErrorRef = useRef(false);\n\n  useEffect(() => {\n    if (!formValidator) return;\n    formValidator.validate();\n    const listener = () => forceUpdate((n) => n + 1);\n    formValidator.registerOnUpdateListener(listener);\n    return () => formValidator.removeOnUpdateListener(listener);\n  }, [formValidator]);\n\n  useEffect(() => {\n    if (!autoFocus) return;\n    const firstEmpty = Math.min(currentValue.length, length - 1);\n    inputRefs.current[firstEmpty]?.focus();\n    // Only run once, on mount.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const showError = formValidator ? formValidator.touched && formValidator.hasError() : !isValid || !!errorMessage;\n  const displayedErrorMessage = formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || '';\n\n  useEffect(() => {\n    const justErrored = showError && !wasErrorRef.current;\n    wasErrorRef.current = showError;\n    if (!justErrored) return;\n\n    setIsShaking(true);\n    const shakeTimeoutId = window.setTimeout(() => setIsShaking(false), 400);\n    const clearTimeoutId = clearOnError\n      ? window.setTimeout(() => {\n          commit('');\n          inputRefs.current[0]?.focus();\n        }, clearErrorDelay)\n      : null;\n\n    return () => {\n      window.clearTimeout(shakeTimeoutId);\n      if (clearTimeoutId != null) window.clearTimeout(clearTimeoutId);\n    };\n    // Only re-evaluate on an actual error-state or config change, not on every value/render.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showError, clearOnError, clearErrorDelay]);\n\n  function commit(next: string) {\n    const wasComplete = currentValue.length === length;\n    const clipped = filterChars(next, charset).slice(0, length);\n    if (formValidator) {\n      formValidator.set(clipped);\n    }\n    onChange?.(clipped);\n    // Only fire once per genuinely new completion (going from partial to full), not on every\n    // keystroke made while correcting an already-full code.\n    if (clipped.length === length && !wasComplete) {\n      onComplete?.(clipped);\n    }\n  }\n\n  function setCharAt(index: number, char: string) {\n    const chars = currentValue.split('');\n    chars[index] = char;\n    commit(chars.join(''));\n  }\n\n  function handleChange(index: number, rawInput: string) {\n    if (disabled) return;\n    if (rawInput === '') {\n      // Box was cleared (e.g. select + delete) — Backspace itself is handled in onKeyDown.\n      setCharAt(index, '');\n      return;\n    }\n\n    const filtered = filterChars(rawInput, charset);\n    if (!filtered) {\n      // Typed an invalid/disallowed character — the controlled `value` re-render discards it.\n      return;\n    }\n\n    // Clicking straight into a box past the contiguous filled prefix (skipping ahead of\n    // empty boxes) fills the next expected slot instead, rather than leaving a gap before it\n    // that setCharAt/distributeFrom can't represent in a plain string and would silently collapse.\n    const targetIndex = Math.min(index, currentValue.length);\n\n    if (rawInput.length > 1) {\n      // Mobile autofill / SMS suggestions can drop the whole code into one box, bypassing maxLength.\n      distributeFrom(targetIndex, filtered);\n      return;\n    }\n\n    setCharAt(targetIndex, filtered);\n    if (targetIndex < length - 1) {\n      inputRefs.current[targetIndex + 1]?.focus();\n    } else {\n      inputRefs.current[targetIndex]?.blur();\n    }\n  }\n\n  function distributeFrom(startIndex: number, chars: string) {\n    const clean = filterChars(chars, charset);\n    if (!clean) return;\n    const existing = currentValue.padEnd(length, ' ').split('');\n    let cursor = startIndex;\n    for (const char of clean) {\n      if (cursor >= length) break;\n      existing[cursor] = char;\n      cursor += 1;\n    }\n    commit(existing.join('').trimEnd());\n    const nextFocus = Math.min(cursor, length - 1);\n    inputRefs.current[nextFocus]?.focus();\n    if (cursor >= length) {\n      inputRefs.current[length - 1]?.blur();\n    }\n  }\n\n  function handlePaste(index: number, event: React.ClipboardEvent<HTMLInputElement>) {\n    if (disabled) return;\n    const pasted = event.clipboardData.getData('text');\n    if (!pasted) return;\n    event.preventDefault();\n    // Same clamp as handleChange — pasting into a box past the filled prefix starts at the\n    // next expected slot instead of leaving an unrepresentable gap before it.\n    distributeFrom(Math.min(index, currentValue.length), pasted);\n  }\n\n  function handleKeyDown(index: number, event: React.KeyboardEvent<HTMLInputElement>) {\n    if (disabled) return;\n\n    // React's controlled-input onChange never fires when the resulting value is identical to\n    // what's already rendered (its value tracker sees no change) — so retyping the exact digit\n    // already in a box would otherwise silently do nothing. keydown always fires, so handle that\n    // one case here and skip the native edit entirely.\n    if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {\n      const typed = filterChars(event.key, charset);\n      if (typed && currentValue[index] === typed) {\n        event.preventDefault();\n        setCharAt(index, typed);\n        if (index < length - 1) {\n          inputRefs.current[index + 1]?.focus();\n        } else {\n          inputRefs.current[index]?.blur();\n        }\n        return;\n      }\n    }\n\n    if (event.key === 'Backspace') {\n      if (currentValue[index]) {\n        setCharAt(index, '');\n        return;\n      }\n      if (index > 0) {\n        event.preventDefault();\n        setCharAt(index - 1, '');\n        inputRefs.current[index - 1]?.focus();\n      }\n      return;\n    }\n    if (event.key === 'Delete') {\n      if (currentValue[index]) setCharAt(index, '');\n      return;\n    }\n    if (event.key === 'ArrowLeft' && index > 0) {\n      event.preventDefault();\n      inputRefs.current[index - 1]?.focus();\n      return;\n    }\n    if (event.key === 'ArrowRight' && index < length - 1) {\n      event.preventDefault();\n      inputRefs.current[index + 1]?.focus();\n    }\n  }\n\n  function handleFocus(event: React.FocusEvent<HTMLInputElement>) {\n    event.target.select();\n  }\n\n  function handleGroupFocus() {\n    setIsFocused(true);\n  }\n\n  function handleGroupBlur(event: React.FocusEvent<HTMLDivElement>) {\n    // Auto-advance moves focus between boxes constantly while typing — only treat this as\n    // leaving the group once focus actually lands outside it, not on the next box.\n    if (event.currentTarget.contains(event.relatedTarget as Node | null)) return;\n    setIsFocused(false);\n    if (formValidator) formValidator.touched = true;\n  }\n\n  return (\n    <div {...rest} className={cx(styles.otpInput, disabled && styles.otpInputDisabled, className)} style={style}>\n      {label && (\n        <div className={cx(styles.otpInputLabel, classNames?.label)} style={slotStyles?.label}>\n          {label}\n          {isRequired && <span className={styles.otpInputRequiredMark}> *</span>}\n        </div>\n      )}\n      <div\n        role='group'\n        aria-label={label || text.field}\n        className={cx(styles.otpInputBoxes, isShaking && styles.otpInputBoxesShake, classNames?.inputs)}\n        style={slotStyles?.inputs}\n        onFocus={handleGroupFocus}\n        onBlur={handleGroupBlur}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        {Array.from({ length }, (_, index) => {\n          const char = currentValue[index] || '';\n          return (\n            <div key={index} className={styles.otpInputBoxWrapper}>\n              <input\n                ref={(el) => {\n                  inputRefs.current[index] = el;\n                }}\n                type={masked ? 'password' : 'text'}\n                inputMode={charset === OtpInputCharset.Numeric ? 'numeric' : 'text'}\n                pattern={charset === OtpInputCharset.Numeric ? '[0-9]*' : undefined}\n                autoComplete={index === 0 ? 'one-time-code' : 'off'}\n                maxLength={1}\n                disabled={disabled}\n                value={char}\n                aria-label={text.digit(index + 1, length)}\n                aria-invalid={showError || undefined}\n                className={cx(\n                  styles.otpInputBox,\n                  showError && styles.otpInputBoxError,\n                  char && styles.otpInputBoxFilled,\n                  classNames?.input,\n                )}\n                style={slotStyles?.input}\n                onChange={(e) => handleChange(index, e.target.value)}\n                onKeyDown={(e) => handleKeyDown(index, e)}\n                onPaste={(e) => handlePaste(index, e)}\n                onFocus={handleFocus}\n              />\n              {groupAfter.includes(index + 1) && index < length - 1 && (\n                <span className={cx(styles.otpInputSeparator, classNames?.separator)} style={slotStyles?.separator} />\n              )}\n            </div>\n          );\n        })}\n      </div>\n      <Tooltip variant='error' message={displayedErrorMessage} isVisible={showError && (isFocused || isHovered)} />\n    </div>\n  );\n}\n\nexport default OtpInput;\n"],"mappings":"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"}
+{"version":3,"file":"otpInput.mjs","names":[],"sources":["../../../../package/common/otpInput/otpInput.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Tooltip from 'components/common/tooltip';\nimport { useComponentDefaults, useLabels } from '../configProvider';\n\nimport { OtpInputCharset, type OtpInputLabels, type OtpInputProps } from './otpInput.types';\nimport styles from './otpInput.module.pcss';\n\nconst NUMERIC_RE = /[0-9]/g;\nconst ALPHANUMERIC_RE = /[a-zA-Z0-9]/g;\n\nconst DEFAULT_LABELS: Required<OtpInputLabels> = {\n  field: 'One-time code',\n  digit: (position, length) => `Digit ${position} of ${length}`,\n};\n\nfunction filterChars(raw: string, charset: OtpInputCharset): string {\n  const re = charset === OtpInputCharset.Alphanumeric ? ALPHANUMERIC_RE : NUMERIC_RE;\n  return (raw.match(re) || []).join('');\n}\n\nfunction OtpInput(props: OtpInputProps): ReactElement {\n  const {\n    length = 6,\n    value,\n    onChange = () => {},\n    onComplete = () => {},\n    formValidator = null,\n    charset = OtpInputCharset.Numeric,\n    masked = false,\n    groupAfter = [],\n    label = '',\n    isValid = true,\n    errorMessage = '',\n    isRequired = false,\n    clearOnError = false,\n    clearErrorDelay = 900,\n    disabled = false,\n    autoFocus = false,\n    className = '',\n    style,\n    classNames,\n    styles: slotStyles,\n    labels,\n    ...rest\n  } = useComponentDefaults('OtpInput', props);\n  const text = useLabels('OtpInput', labels, DEFAULT_LABELS);\n\n  const currentValue = (formValidator ? (formValidator.value as string) : value) ?? '';\n  const [, forceUpdate] = useState(0);\n  const [isShaking, setIsShaking] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n  const wasErrorRef = useRef(false);\n\n  useEffect(() => {\n    if (!formValidator) return;\n    formValidator.validate();\n    const listener = () => forceUpdate((n) => n + 1);\n    formValidator.registerOnUpdateListener(listener);\n    return () => formValidator.removeOnUpdateListener(listener);\n  }, [formValidator]);\n\n  useEffect(() => {\n    if (!autoFocus) return;\n    const firstEmpty = Math.min(currentValue.length, length - 1);\n    inputRefs.current[firstEmpty]?.focus();\n    // Only run once, on mount.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const showError = formValidator ? formValidator.touched && formValidator.hasError() : !isValid || !!errorMessage;\n  const displayedErrorMessage = formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || '';\n\n  useEffect(() => {\n    const justErrored = showError && !wasErrorRef.current;\n    wasErrorRef.current = showError;\n    if (!justErrored) return;\n\n    setIsShaking(true);\n    const shakeTimeoutId = window.setTimeout(() => setIsShaking(false), 400);\n    const clearTimeoutId = clearOnError\n      ? window.setTimeout(() => {\n          commit('');\n          inputRefs.current[0]?.focus();\n        }, clearErrorDelay)\n      : null;\n\n    return () => {\n      window.clearTimeout(shakeTimeoutId);\n      if (clearTimeoutId != null) window.clearTimeout(clearTimeoutId);\n    };\n    // Only re-evaluate on an actual error-state or config change, not on every value/render.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showError, clearOnError, clearErrorDelay]);\n\n  function commit(next: string) {\n    const wasComplete = currentValue.length === length;\n    const clipped = filterChars(next, charset).slice(0, length);\n    if (formValidator) {\n      formValidator.set(clipped);\n    }\n    onChange?.(clipped);\n    // Only fire once per genuinely new completion (going from partial to full), not on every\n    // keystroke made while correcting an already-full code.\n    if (clipped.length === length && !wasComplete) {\n      onComplete?.(clipped);\n    }\n  }\n\n  function setCharAt(index: number, char: string) {\n    const chars = currentValue.split('');\n    chars[index] = char;\n    commit(chars.join(''));\n  }\n\n  function handleChange(index: number, rawInput: string) {\n    if (disabled) return;\n    if (rawInput === '') {\n      // Box was cleared (e.g. select + delete) — Backspace itself is handled in onKeyDown.\n      setCharAt(index, '');\n      return;\n    }\n\n    const filtered = filterChars(rawInput, charset);\n    if (!filtered) {\n      // Typed an invalid/disallowed character — the controlled `value` re-render discards it.\n      return;\n    }\n\n    // Clicking straight into a box past the contiguous filled prefix (skipping ahead of\n    // empty boxes) fills the next expected slot instead, rather than leaving a gap before it\n    // that setCharAt/distributeFrom can't represent in a plain string and would silently collapse.\n    const targetIndex = Math.min(index, currentValue.length);\n\n    if (rawInput.length > 1) {\n      // Mobile autofill / SMS suggestions can drop the whole code into one box, bypassing maxLength.\n      distributeFrom(targetIndex, filtered);\n      return;\n    }\n\n    setCharAt(targetIndex, filtered);\n    if (targetIndex < length - 1) {\n      inputRefs.current[targetIndex + 1]?.focus();\n    } else {\n      inputRefs.current[targetIndex]?.blur();\n    }\n  }\n\n  function distributeFrom(startIndex: number, chars: string) {\n    const clean = filterChars(chars, charset);\n    if (!clean) return;\n    const existing = currentValue.padEnd(length, ' ').split('');\n    let cursor = startIndex;\n    for (const char of clean) {\n      if (cursor >= length) break;\n      existing[cursor] = char;\n      cursor += 1;\n    }\n    commit(existing.join('').trimEnd());\n    const nextFocus = Math.min(cursor, length - 1);\n    inputRefs.current[nextFocus]?.focus();\n    if (cursor >= length) {\n      inputRefs.current[length - 1]?.blur();\n    }\n  }\n\n  function handlePaste(index: number, event: React.ClipboardEvent<HTMLInputElement>) {\n    if (disabled) return;\n    const pasted = event.clipboardData.getData('text');\n    if (!pasted) return;\n    event.preventDefault();\n    // Same clamp as handleChange — pasting into a box past the filled prefix starts at the\n    // next expected slot instead of leaving an unrepresentable gap before it.\n    distributeFrom(Math.min(index, currentValue.length), pasted);\n  }\n\n  function handleKeyDown(index: number, event: React.KeyboardEvent<HTMLInputElement>) {\n    if (disabled) return;\n\n    // React's controlled-input onChange never fires when the resulting value is identical to\n    // what's already rendered (its value tracker sees no change) — so retyping the exact digit\n    // already in a box would otherwise silently do nothing. keydown always fires, so handle that\n    // one case here and skip the native edit entirely.\n    if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {\n      const typed = filterChars(event.key, charset);\n      if (typed && currentValue[index] === typed) {\n        event.preventDefault();\n        setCharAt(index, typed);\n        if (index < length - 1) {\n          inputRefs.current[index + 1]?.focus();\n        } else {\n          inputRefs.current[index]?.blur();\n        }\n        return;\n      }\n    }\n\n    if (event.key === 'Backspace') {\n      if (currentValue[index]) {\n        setCharAt(index, '');\n        return;\n      }\n      if (index > 0) {\n        event.preventDefault();\n        setCharAt(index - 1, '');\n        inputRefs.current[index - 1]?.focus();\n      }\n      return;\n    }\n    if (event.key === 'Delete') {\n      if (currentValue[index]) setCharAt(index, '');\n      return;\n    }\n    if (event.key === 'ArrowLeft' && index > 0) {\n      event.preventDefault();\n      inputRefs.current[index - 1]?.focus();\n      return;\n    }\n    if (event.key === 'ArrowRight' && index < length - 1) {\n      event.preventDefault();\n      inputRefs.current[index + 1]?.focus();\n    }\n  }\n\n  function handleFocus(event: React.FocusEvent<HTMLInputElement>) {\n    event.target.select();\n  }\n\n  function handleGroupFocus() {\n    setIsFocused(true);\n  }\n\n  function handleGroupBlur(event: React.FocusEvent<HTMLDivElement>) {\n    // Auto-advance moves focus between boxes constantly while typing — only treat this as\n    // leaving the group once focus actually lands outside it, not on the next box.\n    if (event.currentTarget.contains(event.relatedTarget as Node | null)) return;\n    setIsFocused(false);\n    if (formValidator) formValidator.touched = true;\n  }\n\n  return (\n    <div {...rest} className={cx(styles.otpInput, disabled && styles.otpInputDisabled, className)} style={style}>\n      {label && (\n        <div className={cx(styles.otpInputLabel, classNames?.label)} style={slotStyles?.label}>\n          {label}\n          {isRequired && <span className={styles.otpInputRequiredMark}> *</span>}\n        </div>\n      )}\n      <div\n        role='group'\n        aria-label={label || text.field}\n        className={cx(styles.otpInputBoxes, isShaking && styles.otpInputBoxesShake, classNames?.inputs)}\n        style={slotStyles?.inputs}\n        onFocus={handleGroupFocus}\n        onBlur={handleGroupBlur}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        {Array.from({ length }, (_, index) => {\n          const char = currentValue[index] || '';\n          return (\n            <div key={index} className={styles.otpInputBoxWrapper}>\n              <input\n                ref={(el) => {\n                  inputRefs.current[index] = el;\n                }}\n                type={masked ? 'password' : 'text'}\n                inputMode={charset === OtpInputCharset.Numeric ? 'numeric' : 'text'}\n                pattern={charset === OtpInputCharset.Numeric ? '[0-9]*' : undefined}\n                autoComplete={index === 0 ? 'one-time-code' : 'off'}\n                maxLength={1}\n                disabled={disabled}\n                value={char}\n                aria-label={text.digit(index + 1, length)}\n                aria-invalid={showError || undefined}\n                className={cx(\n                  styles.otpInputBox,\n                  showError && styles.otpInputBoxError,\n                  char && styles.otpInputBoxFilled,\n                  classNames?.input,\n                )}\n                style={slotStyles?.input}\n                onChange={(e) => handleChange(index, e.target.value)}\n                onKeyDown={(e) => handleKeyDown(index, e)}\n                onPaste={(e) => handlePaste(index, e)}\n                onFocus={handleFocus}\n              />\n              {groupAfter.includes(index + 1) && index < length - 1 && (\n                <span className={cx(styles.otpInputSeparator, classNames?.separator)} style={slotStyles?.separator} />\n              )}\n            </div>\n          );\n        })}\n      </div>\n      <Tooltip variant='error' message={displayedErrorMessage} isVisible={showError && (isFocused || isHovered)} />\n    </div>\n  );\n}\n\nexport default OtpInput;\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e=`otpInput_5-tug`,t=`otpInput-label_T9X7O`,n=`otpInput-requiredMark_FNY2c`,r=`otpInput-boxes_FhhIF`,i=`otpInput-boxes-shake_c50KX`,a=`otpInputShake_TljCu`,o=`otpInput-boxWrapper_ezHbo`,s=`otpInput-box_AB6Kx`,c=`otpInput-box-filled_npNOF`,l=`otpInput-box-error_8kLDb`,u=`otpInput-separator_SArCq`,d=`otpInput-disabled_bzwE9`,f={otpInput:e,"otpInput-label":`otpInput-label_T9X7O`,otpInputLabel:t,"otpInput-requiredMark":`otpInput-requiredMark_FNY2c`,otpInputRequiredMark:n,"otpInput-boxes":`otpInput-boxes_FhhIF`,otpInputBoxes:r,"otpInput-boxes-shake":`otpInput-boxes-shake_c50KX`,otpInputBoxesShake:i,otpInputShake:a,"otpInput-boxWrapper":`otpInput-boxWrapper_ezHbo`,otpInputBoxWrapper:o,"otpInput-box":`otpInput-box_AB6Kx`,otpInputBox:s,"otpInput-box-filled":`otpInput-box-filled_npNOF`,otpInputBoxFilled:c,"otpInput-box-error":`otpInput-box-error_8kLDb`,otpInputBoxError:l,"otpInput-separator":`otpInput-separator_SArCq`,otpInputSeparator:u,"otpInput-disabled":`otpInput-disabled_bzwE9`,otpInputDisabled:d};export{f as default,e as otpInput,s as otpInputBox,l as otpInputBoxError,c as otpInputBoxFilled,o as otpInputBoxWrapper,r as otpInputBoxes,i as otpInputBoxesShake,d as otpInputDisabled,t as otpInputLabel,n as otpInputRequiredMark,u as otpInputSeparator,a as otpInputShake};
+"use client";var e=`otpInput_5-tug`,t=`otpInput-label_T9X7O`,n=`otpInput-requiredMark_FNY2c`,r=`otpInput-boxes_FhhIF`,i=`otpInput-boxes-shake_c50KX`,a=`otpInputShake_TljCu`,o=`otpInput-boxWrapper_ezHbo`,s=`otpInput-box_AB6Kx`,c=`otpInput-box-filled_npNOF`,l=`otpInput-box-error_8kLDb`,u=`otpInput-separator_SArCq`,d=`otpInput-disabled_bzwE9`,f={otpInput:e,"otpInput-label":`otpInput-label_T9X7O`,otpInputLabel:t,"otpInput-requiredMark":`otpInput-requiredMark_FNY2c`,otpInputRequiredMark:n,"otpInput-boxes":`otpInput-boxes_FhhIF`,otpInputBoxes:r,"otpInput-boxes-shake":`otpInput-boxes-shake_c50KX`,otpInputBoxesShake:i,otpInputShake:a,"otpInput-boxWrapper":`otpInput-boxWrapper_ezHbo`,otpInputBoxWrapper:o,"otpInput-box":`otpInput-box_AB6Kx`,otpInputBox:s,"otpInput-box-filled":`otpInput-box-filled_npNOF`,otpInputBoxFilled:c,"otpInput-box-error":`otpInput-box-error_8kLDb`,otpInputBoxError:l,"otpInput-separator":`otpInput-separator_SArCq`,otpInputSeparator:u,"otpInput-disabled":`otpInput-disabled_bzwE9`,otpInputDisabled:d};export{f as default,e as otpInput,s as otpInputBox,l as otpInputBoxError,c as otpInputBoxFilled,o as otpInputBoxWrapper,r as otpInputBoxes,i as otpInputBoxesShake,d as otpInputDisabled,t as otpInputLabel,n as otpInputRequiredMark,u as otpInputSeparator,a as otpInputShake};
 //# sourceMappingURL=otpInput.module.mjs.map

package/dist/esm/common/otpInput/otpInput.types.mjs

@@ -1,2 +1,2 @@
-var e=function(e){return e.Numeric=`numeric`,e.Alphanumeric=`alphanumeric`,e}({});export{e as OtpInputCharset};
+"use client";var e=function(e){return e.Numeric=`numeric`,e.Alphanumeric=`alphanumeric`,e}({});export{e as OtpInputCharset};
 //# sourceMappingURL=otpInput.types.mjs.map

package/dist/esm/common/otpInput/otpInput.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"otpInput.types.mjs","names":[],"sources":["../../../../package/common/otpInput/otpInput.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { FormValidator } from 'services/formValidation';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\nexport type OtpInputSlots = 'root' | 'label' | 'inputs' | 'input' | 'separator';\n\nexport enum OtpInputCharset {\n  /** Digits only (0-9). Shows a numeric mobile keyboard. */\n  Numeric = 'numeric',\n  /** Letters and digits. */\n  Alphanumeric = 'alphanumeric',\n}\n\n/** Text OtpInput renders of its own, for translating it. */\nexport interface OtpInputLabels {\n  /** The group of boxes, used when no `label` is given. */\n  field?: string;\n  /** One box, given its 1-based position and how many there are. */\n  digit?: (position: number, length: number) => string;\n}\n\nexport interface OtpInputProps extends Omit<HtmlProps, 'onChange'> {\n  /** Number of character boxes. Default 6. */\n  length?: number;\n  /** Current code as a plain string, e.g. \"123456\". */\n  value?: string;\n  /** Fired on every change with the full current code (may be shorter than `length`). */\n  onChange?: ((value: string) => void) | null;\n  /** Fired once, when the code reaches `length` characters. */\n  onComplete?: ((value: string) => void) | null;\n  formValidator?: FormValidator | null;\n\n  /** Restricts which characters can be typed and picks the mobile keyboard. Default `numeric`. */\n  charset?: OtpInputCharset;\n  /** Render each box's value as a dot, like a password field. */\n  masked?: boolean;\n  /** Draw a small gap after these 1-based box indices, e.g. `[3]` to split 6 boxes into 3+3. */\n  groupAfter?: number[];\n\n  label?: string;\n  isValid?: boolean;\n  /** Shown in an error Tooltip on focus/hover once `isValid` is `false` (or, with a\n   * `formValidator`, once it's touched and has an error). Persists until the value changes\n   * `isValid`/`formValidator`'s error state itself — see `clearOnError` to auto-dismiss it. */\n  errorMessage?: string;\n  isRequired?: boolean;\n  /** When an error newly appears (`isValid`/`formValidator` turning invalid), clear every box and\n   * refocus the first one after `clearErrorDelay`, so the next attempt starts clean instead of the\n   * user editing individual wrong digits (and re-triggering `onComplete` on every keystroke while\n   * the code stays at full length). Default `false`. */\n  clearOnError?: boolean;\n  /** Delay in ms before `clearOnError` clears the boxes, so the wrong code and error message are\n   * still visible for a moment first. Default `900`. */\n  clearErrorDelay?: number;\n  disabled?: boolean;\n  /** Focuses the first empty box (or the first box) on mount. */\n  autoFocus?: boolean;\n\n  className?: string;\n  style?: React.CSSProperties;\n  classNames?: SlotClassNames<OtpInputSlots>;\n  styles?: SlotStyles<OtpInputSlots>;\n  /** Overrides the text OtpInput renders of its own. Merged per key. */\n  labels?: OtpInputLabels;\n}\n"],"mappings":"AAMA,IAAY,EAAL,SAAA,EAAA,OAEL,GAAA,QAAA,UAEA,EAAA,aAAA,gBACF,EAAA,CAAA,CAAA"}
+{"version":3,"file":"otpInput.types.mjs","names":[],"sources":["../../../../package/common/otpInput/otpInput.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { FormValidator } from 'services/formValidation';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\nexport type OtpInputSlots = 'root' | 'label' | 'inputs' | 'input' | 'separator';\n\nexport enum OtpInputCharset {\n  /** Digits only (0-9). Shows a numeric mobile keyboard. */\n  Numeric = 'numeric',\n  /** Letters and digits. */\n  Alphanumeric = 'alphanumeric',\n}\n\n/** Text OtpInput renders of its own, for translating it. */\nexport interface OtpInputLabels {\n  /** The group of boxes, used when no `label` is given. */\n  field?: string;\n  /** One box, given its 1-based position and how many there are. */\n  digit?: (position: number, length: number) => string;\n}\n\nexport interface OtpInputProps extends Omit<HtmlProps, 'onChange'> {\n  /** Number of character boxes. Default 6. */\n  length?: number;\n  /** Current code as a plain string, e.g. \"123456\". */\n  value?: string;\n  /** Fired on every change with the full current code (may be shorter than `length`). */\n  onChange?: ((value: string) => void) | null;\n  /** Fired once, when the code reaches `length` characters. */\n  onComplete?: ((value: string) => void) | null;\n  formValidator?: FormValidator | null;\n\n  /** Restricts which characters can be typed and picks the mobile keyboard. Default `numeric`. */\n  charset?: OtpInputCharset;\n  /** Render each box's value as a dot, like a password field. */\n  masked?: boolean;\n  /** Draw a small gap after these 1-based box indices, e.g. `[3]` to split 6 boxes into 3+3. */\n  groupAfter?: number[];\n\n  label?: string;\n  isValid?: boolean;\n  /** Shown in an error Tooltip on focus/hover once `isValid` is `false` (or, with a\n   * `formValidator`, once it's touched and has an error). Persists until the value changes\n   * `isValid`/`formValidator`'s error state itself — see `clearOnError` to auto-dismiss it. */\n  errorMessage?: string;\n  isRequired?: boolean;\n  /** When an error newly appears (`isValid`/`formValidator` turning invalid), clear every box and\n   * refocus the first one after `clearErrorDelay`, so the next attempt starts clean instead of the\n   * user editing individual wrong digits (and re-triggering `onComplete` on every keystroke while\n   * the code stays at full length). Default `false`. */\n  clearOnError?: boolean;\n  /** Delay in ms before `clearOnError` clears the boxes, so the wrong code and error message are\n   * still visible for a moment first. Default `900`. */\n  clearErrorDelay?: number;\n  disabled?: boolean;\n  /** Focuses the first empty box (or the first box) on mount. */\n  autoFocus?: boolean;\n\n  className?: string;\n  style?: React.CSSProperties;\n  /** Ref to the root element. */\n  ref?: React.Ref<HTMLDivElement>;\n  classNames?: SlotClassNames<OtpInputSlots>;\n  styles?: SlotStyles<OtpInputSlots>;\n  /** Overrides the text OtpInput renders of its own. Merged per key. */\n  labels?: OtpInputLabels;\n}\n"],"mappings":"aAMA,IAAY,EAAL,SAAA,EAAA,OAEL,GAAA,QAAA,UAEA,EAAA,aAAA,gBACF,EAAA,CAAA,CAAA"}

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);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};
+"use client";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  useEffect(() => {\n    onScrollChangeRef.current = onScrollChange;\n  });\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 = 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)\n      return (\n        <div>\n          {overscrollContentDesktop}\n          {children}\n        </div>\n      );\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(() => {\n    onScrollChangeRef.current = onScrollChange;\n  });\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 = 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)\n      return (\n        <div>\n          {overscrollContentDesktop}\n          {children}\n        </div>\n      );\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/overscroll/overscroll.module.mjs

@@ -1,2 +1,2 @@
-var e=`overscroll_Ij750`,t=`overscroll-header_S6vYc`,n=`overscroll-header-centered_8VlsP`,r=`overscroll-header-container_iignp`,i={overscroll:e,"overscroll-header":`overscroll-header_S6vYc`,overscrollHeader:t,"overscroll-header-centered":`overscroll-header-centered_8VlsP`,overscrollHeaderCentered:n,"overscroll-header-container":`overscroll-header-container_iignp`,overscrollHeaderContainer:r};export{i as default,e as overscroll,t as overscrollHeader,n as overscrollHeaderCentered,r as overscrollHeaderContainer};
+"use client";var e=`overscroll_Ij750`,t=`overscroll-header_S6vYc`,n=`overscroll-header-centered_8VlsP`,r=`overscroll-header-container_iignp`,i={overscroll:e,"overscroll-header":`overscroll-header_S6vYc`,overscrollHeader:t,"overscroll-header-centered":`overscroll-header-centered_8VlsP`,overscrollHeaderCentered:n,"overscroll-header-container":`overscroll-header-container_iignp`,overscrollHeaderContainer:r};export{i as default,e as overscroll,t as overscrollHeader,n as overscrollHeaderCentered,r as overscrollHeaderContainer};
 //# sourceMappingURL=overscroll.module.mjs.map

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

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

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

@@ -1 +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 { faAnglesLeft, faAnglesRight, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport type { IconContent } from '../types/icon.types';\nimport { renderIcon } from '../utils/renderIcon';\nimport type { PaginationLabels, PaginationProps } from './pagination.types';\n\nimport styles from './pagination.module.pcss';\n\nconst DOTS = 'dots';\n\ntype PaginationEntry = number | typeof DOTS;\n\nconst DEFAULT_LABELS: Required<PaginationLabels> = {\n  goToPage: (page) => `Go to page ${page}`,\n  first: 'Go to first page',\n  previous: 'Go to previous page',\n  next: 'Go to next page',\n  last: 'Go to last page',\n};\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 [...leftBoundary, ...leftGap, ...range(leftSibling, rightSibling), ...rightGap, ...rightBoundary];\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    labels,\n    ...rest\n  } = useComponentDefaults('Pagination', props);\n  const text = useLabels('Pagination', labels, DEFAULT_LABELS);\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', text.first, firstIcon, 1, isFirst)}\n      {showControls && renderControl('previous', text.previous, 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(styles.paginationItem, entry === page && styles.paginationItemActive, classNames?.item)}\n            style={slotStyles?.item}\n            aria-label={text.goToPage(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', text.next, nextIcon, page + 1, isLast)}\n      {showEdges && renderControl('last', text.last, lastIcon, total, isLast)}\n    </nav>\n  );\n}\n\nexport default Pagination;\n"],"mappings":"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"}
+{"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 { faAnglesLeft, faAnglesRight, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport type { IconContent } from '../types/icon.types';\nimport { renderIcon } from '../utils/renderIcon';\nimport type { PaginationLabels, PaginationProps } from './pagination.types';\n\nimport styles from './pagination.module.pcss';\n\nconst DOTS = 'dots';\n\ntype PaginationEntry = number | typeof DOTS;\n\nconst DEFAULT_LABELS: Required<PaginationLabels> = {\n  goToPage: (page) => `Go to page ${page}`,\n  first: 'Go to first page',\n  previous: 'Go to previous page',\n  next: 'Go to next page',\n  last: 'Go to last page',\n};\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 [...leftBoundary, ...leftGap, ...range(leftSibling, rightSibling), ...rightGap, ...rightBoundary];\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    labels,\n    ...rest\n  } = useComponentDefaults('Pagination', props);\n  const text = useLabels('Pagination', labels, DEFAULT_LABELS);\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', text.first, firstIcon, 1, isFirst)}\n      {showControls && renderControl('previous', text.previous, 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(styles.paginationItem, entry === page && styles.paginationItemActive, classNames?.item)}\n            style={slotStyles?.item}\n            aria-label={text.goToPage(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', text.next, nextIcon, page + 1, isLast)}\n      {showEdges && renderControl('last', text.last, lastIcon, total, isLast)}\n    </nav>\n  );\n}\n\nexport default Pagination;\n"],"mappings":"+dAYA,IAAM,EAAO,OAIP,EAA6C,CACjD,SAAW,GAAS,cAAc,IAClC,MAAO,mBACP,SAAU,sBACV,KAAM,kBACN,KAAM,iBACR,EAEA,SAAS,EAAM,EAAe,EAAuB,CAEnD,OADI,EAAM,EAAc,CAAC,EAClB,MAAM,KAAK,CAAE,OAAQ,EAAM,EAAQ,CAAE,GAAI,EAAG,IAAU,EAAQ,CAAK,CAC5E,CAEA,SAAS,EAAU,EAAc,EAAuB,CACtD,OAAO,KAAK,IAAI,EAAG,KAAK,IAAI,EAAO,KAAK,MAAM,CAAI,CAAC,CAAC,CACtD,CAEA,SAAS,EAAW,EAAc,EAAe,EAAkB,EAAuC,CAExG,GADmB,EAAW,EAAI,EAAa,EAAI,GACjC,EAAO,OAAO,EAAM,EAAG,CAAK,EAE9C,IAAM,EAAe,EAAM,EAAG,CAAU,EAClC,EAAgB,EAAM,EAAQ,EAAa,EAAG,CAAK,EACnD,EAA6B,EAAa,OAAS,EAAI,CAAC,CAAI,EAAI,CAAC,EACjE,EAA8B,EAAc,OAAS,EAAI,CAAC,CAAI,EAAI,CAAC,EAEnE,EAAc,KAAK,IAAI,EAAO,EAAU,EAAa,CAAC,EACtD,EAAe,KAAK,IAAI,EAAO,EAAU,EAAQ,CAAU,EAE3D,EAAc,EAAc,EAAa,EACzC,EAAe,EAAe,EAAQ,EAAa,EAUzD,MARI,CAAC,GAAe,EACX,CAAC,GAAG,EAAM,EAAG,EAAa,EAAW,EAAI,CAAC,EAAG,GAAG,EAAU,GAAG,CAAa,EAG/E,GAAe,CAAC,EACX,CAAC,GAAG,EAAc,GAAG,EAAS,GAAG,EAAM,EAAQ,EAAa,EAAW,EAAI,EAAG,CAAK,CAAC,EAGtF,CAAC,GAAG,EAAc,GAAG,EAAS,GAAG,EAAM,EAAa,CAAY,EAAG,GAAG,EAAU,GAAG,CAAa,CACzG,CAEA,SAAS,EAAW,EAA6C,CAC/D,GAAM,CACJ,QACA,KAAM,EACN,cAAc,EACd,eAAiB,CAAC,EAClB,WAAW,EACX,aAAa,EACb,eAAe,GACf,YAAY,GACZ,WAAW,GACX,eAAe,EACf,WAAW,EACX,YAAY,EACZ,WAAW,EACX,aAAc,EAAY,aAC1B,YACA,QACA,aACA,OAAQ,EACR,SACA,GAAG,GACD,EAAqB,aAAc,CAAK,EACtC,EAAO,EAAU,aAAc,EAAQ,CAAc,EAErD,EAAe,IAAmB,IAAA,GAClC,CAAC,EAAc,GAAmB,EAAS,CAAW,EACtD,EAAO,EAAU,EAAe,EAAkB,EAAc,CAAK,EAE3E,GAAI,EAAQ,EAAG,OAAO,KAEtB,SAAS,EAAK,EAAc,CAC1B,IAAM,EAAU,EAAU,EAAM,CAAK,EACjC,IAAY,IACX,GAAc,EAAgB,CAAO,EAC1C,EAAS,CAAO,EAClB,CAEA,IAAM,EAAmB,EAAG,EAAO,kBAAmB,GAAY,OAAO,EAEzE,SAAS,EAAc,EAAa,EAAe,EAAmB,EAAgB,EAAqB,CACzG,OACE,EAAC,SAAD,CAEE,KAAK,SACL,UAAW,EACX,MAAO,GAAY,QACnB,aAAY,EACZ,SAAU,GAAY,EACtB,YAAe,EAAK,CAAM,EAEzB,SAAA,EAAW,CAAI,CACV,EATD,CASC,CAEZ,CAEA,IAAM,EAAU,GAAQ,EAClB,EAAS,GAAQ,EAEvB,OACE,EAAC,MAAD,CACE,GAAI,EACJ,aAAY,EACZ,UAAW,EAAG,EAAO,WAAY,GAAY,KAAM,CAAS,EAC5D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAJzC,SAAA,CAMG,GAAa,EAAc,QAAS,EAAK,MAAO,EAAW,EAAG,CAAO,EACrE,GAAgB,EAAc,WAAY,EAAK,SAAU,EAAc,EAAO,EAAG,CAAO,EAExF,EAAW,EAAM,EAAO,EAAU,CAAU,CAAC,CAAC,KAAK,EAAO,IACzD,IAAU,EACR,EAAC,OAAD,CAEE,cAAY,OACZ,UAAW,EAAG,EAAO,mBAAoB,GAAY,QAAQ,EAC7D,MAAO,GAAY,SACpB,SAAA,GAEK,EANC,QAAQ,GAMT,EAEN,EAAC,SAAD,CAEE,KAAK,SACL,UAAW,EAAG,EAAO,eAAgB,IAAU,GAAQ,EAAO,qBAAsB,GAAY,IAAI,EACpG,MAAO,GAAY,KACnB,aAAY,EAAK,SAAS,CAAK,EAC/B,eAAc,IAAU,EAAO,OAAS,IAAA,GAC9B,WACV,YAAe,EAAK,CAAK,EAExB,SAAA,CACK,EAVD,CAUC,CAEZ,EAEC,GAAgB,EAAc,OAAQ,EAAK,KAAM,EAAU,EAAO,EAAG,CAAM,EAC3E,GAAa,EAAc,OAAQ,EAAK,KAAM,EAAU,EAAO,CAAM,CACnE,GAET"}

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

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

package/dist/esm/common/planCanvas/planCanvas.mjs

@@ -1,2 +1,2 @@
-import{OpeningKind as e}from"../floorPlan/floorPlan.types.mjs";import{buildWallPaths as t,openingGeometry as n}from"../floorPlan/floorPlan.path.mjs";import r from"./planCanvas.module.mjs";import{forwardRef as i,useMemo as a}from"react";import o from"classnames";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";var u=1,d=[];function f(e){let t=e/1e6;return`${t.toFixed(+(t<10))} m²`}function p(e){return e.length===0?``:`${e.map((e,t)=>`${t===0?`M`:`L`} ${e.x},${e.y}`).join(` `)} Z`}function m(e){return[p(e.outer),...e.holes.map(p)].filter(Boolean).join(` `)}var h=i(function(i,p){let{floor:h,underlay:g,rooms:_,view:v,selection:y=d,hovered:b=null,interactiveRooms:x=!1,interactiveOpenings:S=!1,showGrid:C=!1,gridSize:w=100,showRoomLabels:T=!0,showOpeningSymbols:E=!0,getRoomColor:D,renderRoomLabel:O,getRoomLabel:k,formatArea:A=f,onRoomActivate:j,onOpeningActivate:M,onBackgroundActivate:N,onHoverChange:P,overlay:F,worldOverlay:I,size:L,className:R,style:z,classNames:B,styles:V,"aria-label":H}=i,U=v.zoom>0?1/v.zoom:1,W=u*U,G=a(()=>t(h),[h]),K=a(()=>g?Object.values(g.walls).flatMap(e=>{let t=g.nodes[e.a],n=g.nodes[e.b];return t&&n?[{id:e.id,x1:t.x,y1:t.y,x2:n.x,y2:n.y}]:[]}):[],[g]),q=e=>({x:(e.x-v.x)*v.zoom,y:(e.y-v.y)*v.zoom}),J=a(()=>{if(!C||w<=0)return null;let e=L.width*U,t=L.height*U,n=w*Math.max(1,10**Math.ceil(Math.log10(e/w/60))),r=Math.floor(v.x/n)*n,i=Math.floor(v.y/n)*n,a=[],o=[];for(let t=r;t<=v.x+e;t+=n)a.push(t);for(let e=i;e<=v.y+t;e+=n)o.push(e);return{verticals:a,horizontals:o,step:n,worldW:e,worldH:t}},[C,w,L.width,L.height,U,v.x,v.y]),Y=(e,t)=>y.some(n=>n.type===e&&n.id===t),X=(e,t)=>b?.type===e&&b.id===t,Z=a(()=>{let e=new Set(y.filter(e=>e.type===`room`).map(e=>e.id)),t=new Set;for(let n of _)if(n.roomId&&e.has(n.roomId))for(let e of n.wallIds)t.add(e);return t},[_,y]),Q=a(()=>Z.size>0?t(h,{wallIds:Z}):{groups:[],caps:[]},[h,Z]);function $(t){let i=n(h,t);if(!i)return null;let a=h.walls[t.wallId],s=a?a.thickness/2:50,{p1:u,p2:d,normal:f,dir:p,centre:m}=i,g=Y(`opening`,t.id),_=X(`opening`,t.id),v=Math.hypot(d.x-u.x,d.y-u.y),y=[];if(E&&t.kind===e.Door){let e=t.swing!==`endLeft`&&t.swing!==`endRight`,n=e?u:d,i=e?1:-1,a={x:n.x+f.x*v,y:n.y+f.y*v},o={x:n.x+p.x*v*i,y:n.y+p.y*v*i};y.push(c(`path`,{className:r.planCanvasDoorLeaf,d:`M ${n.x},${n.y} L ${a.x},${a.y}`,strokeWidth:W},`leaf`),c(`path`,{className:r.planCanvasDoorSwing,d:`M ${a.x},${a.y} A ${v},${v} 0 0,${+!e} ${o.x},${o.y}`,strokeWidth:W},`swing`))}E&&t.kind===e.Window&&y.push(c(`path`,{className:r.planCanvasWindowPane,d:`M ${u.x},${u.y} L ${d.x},${d.y}`,strokeWidth:W*2},`pane`));let b=`M ${u.x+f.x*s},${u.y+f.y*s} L ${d.x+f.x*s},${d.y+f.y*s} L ${d.x-f.x*s},${d.y-f.y*s} L ${u.x-f.x*s},${u.y-f.y*s} Z`;return l(`g`,{className:o(g&&r.planCanvasOpeningSelected,_&&r.planCanvasOpeningHovered,B?.opening),style:V?.opening,"data-opening-kind":t.kind,children:[y,c(`path`,{className:o(r.planCanvasOpeningHit,S&&r.planCanvasOpeningHitInteractive),d:b,onClick:S&&M?e=>{e.stopPropagation(),M(t.id)}:void 0,onPointerEnter:P?()=>P({type:`opening`,id:t.id}):void 0,children:S&&c(`title`,{children:t.kind})}),(g||_)&&c(`path`,{className:r.planCanvasOpeningOutline,d:b,vectorEffect:`non-scaling-stroke`}),c(`path`,{className:o(r.planCanvasJamb,Z.has(t.wallId)&&r.planCanvasJambHighlighted),d:`M ${u.x-f.x*s},${u.y-f.y*s} L ${u.x+f.x*s},${u.y+f.y*s} M ${d.x-f.x*s},${d.y-f.y*s} L ${d.x+f.x*s},${d.y+f.y*s}`,strokeWidth:W}),m&&null]},t.id)}return l(`svg`,{ref:p,className:o(r.planCanvas,R,B?.canvas),style:{...z,...V?.canvas},viewBox:`0 0 ${Math.max(1,L.width)} ${Math.max(1,L.height)}`,width:L.width,height:L.height,role:`img`,"aria-label":H,onClick:N?()=>N():void 0,onPointerLeave:P?()=>P(null):void 0,children:[l(`g`,{transform:`translate(${-v.x*v.zoom} ${-v.y*v.zoom}) scale(${v.zoom})`,children:[J&&l(`g`,{className:o(r.planCanvasGrid,B?.grid),style:V?.grid,"aria-hidden":`true`,children:[J.verticals.map(e=>c(`line`,{x1:e,y1:v.y,x2:e,y2:v.y+J.worldH,strokeWidth:U},`v${e}`)),J.horizontals.map(e=>c(`line`,{x1:v.x,y1:e,x2:v.x+J.worldW,y2:e,strokeWidth:U},`h${e}`))]}),K.length>0&&c(`g`,{className:o(r.planCanvasUnderlay,B?.underlay),style:V?.underlay,"aria-hidden":`true`,children:K.map(e=>c(`line`,{x1:e.x1,y1:e.y1,x2:e.x2,y2:e.y2,strokeWidth:1.5},e.id))}),c(`g`,{className:o(r.planCanvasRooms,B?.rooms),style:V?.rooms,children:_.map(e=>{let t=e.roomId?Y(`room`,e.roomId):!1,n=e.roomId?X(`room`,e.roomId):!1,i=e.meta?D?.(e.meta,e.area):void 0,a=k?.(e.meta,{area:e.area})??`${e.meta?.name??`Unnamed room`}, ${A(e.area)}`;return c(`path`,{className:o(r.planCanvasRoomFill,n&&r.planCanvasRoomFillHovered,x&&r.planCanvasRoomFillInteractive,B?.roomFill),"data-state":t?`selected`:n?`hovered`:void 0,style:{...V?.roomFill,...i?{fill:i}:null},d:m(e),fillRule:`evenodd`,tabIndex:x?0:void 0,role:x?`button`:void 0,"aria-pressed":x?t:void 0,onClick:x&&j&&e.roomId?t=>{t.stopPropagation(),j(e.roomId)}:void 0,onKeyDown:x&&j&&e.roomId?t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),j(e.roomId))}:void 0,onPointerEnter:P&&e.roomId?()=>P({type:`room`,id:e.roomId}):void 0,children:x&&c(`title`,{children:a})},e.id)})}),l(`g`,{className:o(r.planCanvasWalls,B?.walls),style:V?.walls,"aria-hidden":`true`,children:[c(`g`,{className:r.planCanvasWallOutline,children:G.groups.map(e=>c(`path`,{className:B?.wallBody,style:V?.wallBody,d:e.d,strokeWidth:e.thickness},`o${e.thickness}`))}),c(`g`,{className:r.planCanvasWallFill,children:G.groups.map(e=>{let t=e.thickness-2*W;return t<=0?null:c(`path`,{d:e.d,strokeWidth:t},`f${e.thickness}`)})}),l(`g`,{className:r.planCanvasRoomEdgeSelected,children:[Q.groups.map(e=>c(`path`,{className:r.planCanvasRoomEdgeOutline,d:e.d,strokeWidth:e.thickness},`o${e.thickness}`)),Q.groups.map(e=>{let t=e.thickness-2*W;return t<=0?null:c(`path`,{className:r.planCanvasRoomEdgeFill,d:e.d,strokeWidth:t},`f${e.thickness}`)})]}),c(`g`,{className:r.planCanvasWallCaps,children:G.caps.filter(e=>!Z.has(e.wallId)).map((e,t)=>c(`line`,{x1:e.a.x,y1:e.a.y,x2:e.b.x,y2:e.b.y,strokeWidth:W},`${e.wallId}-${e.reason}-${t}`))}),c(`g`,{className:r.planCanvasRoomEdgeCaps,children:Q.caps.map((e,t)=>c(`line`,{x1:e.a.x,y1:e.a.y,x2:e.b.x,y2:e.b.y,strokeWidth:W},`${e.wallId}-${e.reason}-${t}`))})]}),c(`g`,{className:o(r.planCanvasOpenings,B?.openings),style:V?.openings,children:Object.values(h.openings).map($)}),l(`g`,{className:r.planCanvasSelection,"aria-hidden":`true`,children:[y.filter(e=>e.type===`wall`).map(e=>{let t=h.walls[e.id];if(!t)return null;let n=h.nodes[t.a],i=h.nodes[t.b];return!n||!i?null:c(`line`,{x1:n.x,y1:n.y,x2:i.x,y2:i.y,strokeWidth:t.thickness,className:r.planCanvasWallSelected},e.id)}),b?.type===`wall`&&!Y(`wall`,b.id)&&(()=>{let e=h.walls[b.id];if(!e)return null;let t=h.nodes[e.a],n=h.nodes[e.b];return!t||!n?null:c(`line`,{x1:t.x,y1:t.y,x2:n.x,y2:n.y,strokeWidth:e.thickness,className:r.planCanvasWallHovered})})()]}),I]}),l(`g`,{className:o(r.planCanvasScreen,B?.overlay),style:V?.overlay,children:[T&&_.map(e=>{let t=q(e.anchor);if(t.x<-200||t.y<-200||t.x>L.width+200||t.y>L.height+200)return null;let n=O?.(e.meta,{area:e.area,faceId:e.id});return n===null?null:c(`g`,{className:o(r.planCanvasRoomLabel,B?.roomLabel),style:V?.roomLabel,transform:`translate(${t.x} ${t.y})`,"aria-hidden":`true`,children:n===void 0?l(s,{children:[c(`text`,{className:r.planCanvasRoomName,textAnchor:`middle`,children:e.meta?.name??``}),c(`text`,{className:r.planCanvasRoomArea,textAnchor:`middle`,dy:`1.2em`,children:A(e.area)})]}):n},e.id)}),F]})]})});export{h as default};
+"use client";import{OpeningKind as e}from"../floorPlan/floorPlan.types.mjs";import{buildWallPaths as t,openingGeometry as n}from"../floorPlan/floorPlan.path.mjs";import r from"./planCanvas.module.mjs";import{useMemo as i}from"react";import a from"classnames";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";var l=1,u=[];function d(e){let t=e/1e6;return`${t.toFixed(+(t<10))} m²`}function f(e){return e.length===0?``:`${e.map((e,t)=>`${t===0?`M`:`L`} ${e.x},${e.y}`).join(` `)} Z`}function p(e){return[f(e.outer),...e.holes.map(f)].filter(Boolean).join(` `)}function m(f){let{ref:m,floor:h,underlay:g,rooms:_,view:v,selection:y=u,hovered:b=null,interactiveRooms:x=!1,interactiveOpenings:S=!1,showGrid:C=!1,gridSize:w=100,showRoomLabels:T=!0,showOpeningSymbols:E=!0,getRoomColor:D,renderRoomLabel:O,getRoomLabel:k,formatArea:A=d,onRoomActivate:j,onOpeningActivate:M,onBackgroundActivate:N,onHoverChange:P,overlay:F,worldOverlay:I,size:L,className:R,style:z,classNames:B,styles:V,"aria-label":H}=f,U=v.zoom>0?1/v.zoom:1,W=l*U,G=i(()=>t(h),[h]),K=i(()=>g?Object.values(g.walls).flatMap(e=>{let t=g.nodes[e.a],n=g.nodes[e.b];return t&&n?[{id:e.id,x1:t.x,y1:t.y,x2:n.x,y2:n.y}]:[]}):[],[g]),q=e=>({x:(e.x-v.x)*v.zoom,y:(e.y-v.y)*v.zoom}),J=i(()=>{if(!C||w<=0)return null;let e=L.width*U,t=L.height*U,n=w*Math.max(1,10**Math.ceil(Math.log10(e/w/60))),r=Math.floor(v.x/n)*n,i=Math.floor(v.y/n)*n,a=[],o=[];for(let t=r;t<=v.x+e;t+=n)a.push(t);for(let e=i;e<=v.y+t;e+=n)o.push(e);return{verticals:a,horizontals:o,step:n,worldW:e,worldH:t}},[C,w,L.width,L.height,U,v.x,v.y]),Y=(e,t)=>y.some(n=>n.type===e&&n.id===t),X=(e,t)=>b?.type===e&&b.id===t,Z=i(()=>{let e=new Set(y.filter(e=>e.type===`room`).map(e=>e.id)),t=new Set;for(let n of _)if(n.roomId&&e.has(n.roomId))for(let e of n.wallIds)t.add(e);return t},[_,y]),Q=i(()=>Z.size>0?t(h,{wallIds:Z}):{groups:[],caps:[]},[h,Z]);function $(t){let i=n(h,t);if(!i)return null;let o=h.walls[t.wallId],l=o?o.thickness/2:50,{p1:u,p2:d,normal:f,dir:p,centre:m}=i,g=Y(`opening`,t.id),_=X(`opening`,t.id),v=Math.hypot(d.x-u.x,d.y-u.y),y=[];if(E&&t.kind===e.Door){let e=t.swing!==`endLeft`&&t.swing!==`endRight`,n=e?u:d,i=e?1:-1,a={x:n.x+f.x*v,y:n.y+f.y*v},o={x:n.x+p.x*v*i,y:n.y+p.y*v*i};y.push(s(`path`,{className:r.planCanvasDoorLeaf,d:`M ${n.x},${n.y} L ${a.x},${a.y}`,strokeWidth:W},`leaf`),s(`path`,{className:r.planCanvasDoorSwing,d:`M ${a.x},${a.y} A ${v},${v} 0 0,${+!e} ${o.x},${o.y}`,strokeWidth:W},`swing`))}E&&t.kind===e.Window&&y.push(s(`path`,{className:r.planCanvasWindowPane,d:`M ${u.x},${u.y} L ${d.x},${d.y}`,strokeWidth:W*2},`pane`));let b=`M ${u.x+f.x*l},${u.y+f.y*l} L ${d.x+f.x*l},${d.y+f.y*l} L ${d.x-f.x*l},${d.y-f.y*l} L ${u.x-f.x*l},${u.y-f.y*l} Z`;return c(`g`,{className:a(g&&r.planCanvasOpeningSelected,_&&r.planCanvasOpeningHovered,B?.opening),style:V?.opening,"data-opening-kind":t.kind,children:[y,s(`path`,{className:a(r.planCanvasOpeningHit,S&&r.planCanvasOpeningHitInteractive),d:b,onClick:S&&M?e=>{e.stopPropagation(),M(t.id)}:void 0,onPointerEnter:P?()=>P({type:`opening`,id:t.id}):void 0,children:S&&s(`title`,{children:t.kind})}),(g||_)&&s(`path`,{className:r.planCanvasOpeningOutline,d:b,vectorEffect:`non-scaling-stroke`}),s(`path`,{className:a(r.planCanvasJamb,Z.has(t.wallId)&&r.planCanvasJambHighlighted),d:`M ${u.x-f.x*l},${u.y-f.y*l} L ${u.x+f.x*l},${u.y+f.y*l} M ${d.x-f.x*l},${d.y-f.y*l} L ${d.x+f.x*l},${d.y+f.y*l}`,strokeWidth:W}),m&&null]},t.id)}return c(`svg`,{ref:m,className:a(r.planCanvas,R,B?.canvas),style:{...z,...V?.canvas},viewBox:`0 0 ${Math.max(1,L.width)} ${Math.max(1,L.height)}`,width:L.width,height:L.height,role:`img`,"aria-label":H,onClick:N?()=>N():void 0,onPointerLeave:P?()=>P(null):void 0,children:[c(`g`,{transform:`translate(${-v.x*v.zoom} ${-v.y*v.zoom}) scale(${v.zoom})`,children:[J&&c(`g`,{className:a(r.planCanvasGrid,B?.grid),style:V?.grid,"aria-hidden":`true`,children:[J.verticals.map(e=>s(`line`,{x1:e,y1:v.y,x2:e,y2:v.y+J.worldH,strokeWidth:U},`v${e}`)),J.horizontals.map(e=>s(`line`,{x1:v.x,y1:e,x2:v.x+J.worldW,y2:e,strokeWidth:U},`h${e}`))]}),K.length>0&&s(`g`,{className:a(r.planCanvasUnderlay,B?.underlay),style:V?.underlay,"aria-hidden":`true`,children:K.map(e=>s(`line`,{x1:e.x1,y1:e.y1,x2:e.x2,y2:e.y2,strokeWidth:1.5},e.id))}),s(`g`,{className:a(r.planCanvasRooms,B?.rooms),style:V?.rooms,children:_.map(e=>{let t=e.roomId?Y(`room`,e.roomId):!1,n=e.roomId?X(`room`,e.roomId):!1,i=e.meta?D?.(e.meta,e.area):void 0,o=k?.(e.meta,{area:e.area})??`${e.meta?.name??`Unnamed room`}, ${A(e.area)}`;return s(`path`,{className:a(r.planCanvasRoomFill,n&&r.planCanvasRoomFillHovered,x&&r.planCanvasRoomFillInteractive,B?.roomFill),"data-state":t?`selected`:n?`hovered`:void 0,style:{...V?.roomFill,...i?{fill:i}:null},d:p(e),fillRule:`evenodd`,tabIndex:x?0:void 0,role:x?`button`:void 0,"aria-pressed":x?t:void 0,onClick:x&&j&&e.roomId?t=>{t.stopPropagation(),j(e.roomId)}:void 0,onKeyDown:x&&j&&e.roomId?t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),j(e.roomId))}:void 0,onPointerEnter:P&&e.roomId?()=>P({type:`room`,id:e.roomId}):void 0,children:x&&s(`title`,{children:o})},e.id)})}),c(`g`,{className:a(r.planCanvasWalls,B?.walls),style:V?.walls,"aria-hidden":`true`,children:[s(`g`,{className:r.planCanvasWallOutline,children:G.groups.map(e=>s(`path`,{className:B?.wallBody,style:V?.wallBody,d:e.d,strokeWidth:e.thickness},`o${e.thickness}`))}),s(`g`,{className:r.planCanvasWallFill,children:G.groups.map(e=>{let t=e.thickness-2*W;return t<=0?null:s(`path`,{d:e.d,strokeWidth:t},`f${e.thickness}`)})}),c(`g`,{className:r.planCanvasRoomEdgeSelected,children:[Q.groups.map(e=>s(`path`,{className:r.planCanvasRoomEdgeOutline,d:e.d,strokeWidth:e.thickness},`o${e.thickness}`)),Q.groups.map(e=>{let t=e.thickness-2*W;return t<=0?null:s(`path`,{className:r.planCanvasRoomEdgeFill,d:e.d,strokeWidth:t},`f${e.thickness}`)})]}),s(`g`,{className:r.planCanvasWallCaps,children:G.caps.filter(e=>!Z.has(e.wallId)).map((e,t)=>s(`line`,{x1:e.a.x,y1:e.a.y,x2:e.b.x,y2:e.b.y,strokeWidth:W},`${e.wallId}-${e.reason}-${t}`))}),s(`g`,{className:r.planCanvasRoomEdgeCaps,children:Q.caps.map((e,t)=>s(`line`,{x1:e.a.x,y1:e.a.y,x2:e.b.x,y2:e.b.y,strokeWidth:W},`${e.wallId}-${e.reason}-${t}`))})]}),s(`g`,{className:a(r.planCanvasOpenings,B?.openings),style:V?.openings,children:Object.values(h.openings).map($)}),c(`g`,{className:r.planCanvasSelection,"aria-hidden":`true`,children:[y.filter(e=>e.type===`wall`).map(e=>{let t=h.walls[e.id];if(!t)return null;let n=h.nodes[t.a],i=h.nodes[t.b];return!n||!i?null:s(`line`,{x1:n.x,y1:n.y,x2:i.x,y2:i.y,strokeWidth:t.thickness,className:r.planCanvasWallSelected},e.id)}),b?.type===`wall`&&!Y(`wall`,b.id)&&(()=>{let e=h.walls[b.id];if(!e)return null;let t=h.nodes[e.a],n=h.nodes[e.b];return!t||!n?null:s(`line`,{x1:t.x,y1:t.y,x2:n.x,y2:n.y,strokeWidth:e.thickness,className:r.planCanvasWallHovered})})()]}),I]}),c(`g`,{className:a(r.planCanvasScreen,B?.overlay),style:V?.overlay,children:[T&&_.map(e=>{let t=q(e.anchor);if(t.x<-200||t.y<-200||t.x>L.width+200||t.y>L.height+200)return null;let n=O?.(e.meta,{area:e.area,faceId:e.id});return n===null?null:s(`g`,{className:a(r.planCanvasRoomLabel,B?.roomLabel),style:V?.roomLabel,transform:`translate(${t.x} ${t.y})`,"aria-hidden":`true`,children:n===void 0?c(o,{children:[s(`text`,{className:r.planCanvasRoomName,textAnchor:`middle`,children:e.meta?.name??``}),s(`text`,{className:r.planCanvasRoomArea,textAnchor:`middle`,dy:`1.2em`,children:A(e.area)})]}):n},e.id)}),F]})]})}export{m as default};
 //# sourceMappingURL=planCanvas.mjs.map