@atom-learning/components 9.0.0-beta.5 → 10.0.0

package/dist/components/number-input/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","names":[],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { Input } from '../input/Input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  appearance?: 'standard' | 'modern'\n  theme?: 'white' | 'grey'\n  emphasis?: 'bold'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  className?: string\n}\n\nconst NumberInputContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    },\n    emphasis: {\n      bold: ['gap-0']\n    }\n  }\n})\n\nexport const NumberInput = ({\n  ref,\n  value,\n  defaultValue = 0,\n  onValueChange,\n  min = 0,\n  max = Number.MAX_SAFE_INTEGER,\n  step = 1,\n  disabled: isDisabled = false,\n  readonly: isReadOnly = false,\n  size = 'md',\n  stepperButtonLabels: stepperButtonLabelsProp,\n  disabledTooltipContent: disabledTooltipContentProp,\n  className,\n  appearance = 'standard',\n  theme,\n  emphasis,\n  ...rest\n}: NumberInputProps & {\n  ref?: React.Ref<HTMLInputElement>\n}) => {\n  const [internalValue, setInternalValue] = React.useState<number>(\n    value || defaultValue\n  )\n  React.useEffect(() => {\n    // Update the internal value to match what is passed in.\n    if (typeof value !== 'undefined') setInternalValue(value)\n  }, [value])\n\n  const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n  React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n  const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n  const stepperButtonLabels = {\n    increment: 'increment',\n    decrement: 'decrement',\n    ...stepperButtonLabelsProp\n  }\n\n  const disabledTooltipContent = {\n    decrement: `Cannot enter values below ${min}`,\n    increment: `Cannot enter values above ${max}`,\n    ...disabledTooltipContentProp\n  }\n\n  const isAtMax = internalValue >= max\n  const isAtMin = internalValue <= min\n\n  const clamp = React.useCallback(\n    (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n    [max, min]\n  )\n\n  const updateValue = React.useCallback(\n    (newValue: number) => {\n      onValueChange?.(newValue)\n      setInternalValue(newValue)\n    },\n    [onValueChange]\n  )\n\n  const onInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n      updateValue(parsedValue)\n    },\n    [updateValue]\n  )\n\n  const increment = React.useCallback(() => {\n    if (isAtMax || isReadOnly) return\n    inputRef?.current?.focus()\n    const newValue = Number(internalValue) + step\n    updateValue(clamp(newValue))\n  }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n  const decrement = React.useCallback(() => {\n    if (isAtMin || isReadOnly) return\n    inputRef?.current?.focus()\n    const newValue = Number(internalValue) - step\n    updateValue(clamp(newValue))\n  }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.nativeEvent.isComposing) return\n\n      /**\n       * Keyboard Accessibility\n       *\n       * We want to increase or decrease the input's value\n       * based on if the user the arrow keys.\n       *\n       * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n       */\n      const eventKey = event.key\n\n      const keyMap: Record<string, React.KeyboardEventHandler> = {\n        ArrowUp: increment,\n        ArrowRight: increment,\n        ArrowDown: decrement,\n        ArrowLeft: decrement,\n        Home: () => updateValue(min),\n        End: () => updateValue(max)\n      }\n\n      const action = keyMap[eventKey]\n\n      if (action) {\n        event.preventDefault()\n        action(event)\n      }\n    },\n    [increment, decrement, updateValue, min, max]\n  )\n\n  const hasError = internalValue < min || internalValue > max\n  const {\n    state: externalState,\n    'aria-invalid': externalAriaInvalid,\n    ...restProps\n  } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n  const inputProps: React.ComponentProps<typeof Input> = {\n    type: 'number',\n    value: internalValue,\n    ...restProps,\n    onChange: onInputChange,\n    onKeyDown,\n    size,\n    appearance,\n    theme,\n    state: externalState || (hasError ? 'error' : undefined),\n    'aria-invalid': externalAriaInvalid || hasError || undefined,\n    className: cn(\n      'rounded-none',\n      'w-16',\n      '[&_>_input]:text-center',\n      'disabled:opacity-30',\n      'disabled:pointer-events-none',\n      emphasis === 'bold' && [\n        'rounded-1',\n        '[&_>_input[aria-invalid=true]]:text-danger',\n        'focus-within:[&_>_input]:text-grey-1000'\n      ],\n      emphasis === 'bold' &&\n        appearance === 'standard' && [\n          'border-none',\n          '[&:has([aria-invalid=true])]:border-2',\n          '[&:has([aria-invalid=true])]:border-danger',\n          'focus-within:border-2',\n          'focus-within:border-blue-800'\n        ]\n    ),\n    ref: inputRef,\n    readOnly: isReadOnly,\n    disabled: isDisabled,\n    'aria-valuemin': min,\n    'aria-valuemax': max,\n    'aria-valuenow': internalValue,\n    role: 'spinbutton'\n  }\n\n  return (\n    <NumberInputContainer\n      appearance={appearance}\n      emphasis={emphasis}\n      className={className}\n    >\n      <NumberInputStepper\n        onClick={decrement}\n        icon={Minus}\n        className={cn(\n          emphasis !== 'bold' && ['border-r-none', 'rounded-r-none']\n        )}\n        size={iconSize}\n        fieldAppearance={appearance}\n        fieldTheme={theme}\n        emphasis={emphasis}\n        disabled={isAtMin || isDisabled}\n        showTooltip={isAtMin && !isDisabled}\n        disabledTooltipContent={disabledTooltipContent.decrement}\n        label={stepperButtonLabels.decrement}\n      />\n      <Input {...inputProps} />\n      <NumberInputStepper\n        onClick={increment}\n        icon={Plus}\n        className={cn(\n          emphasis !== 'bold' && ['border-l-none', 'rounded-l-none']\n        )}\n        size={iconSize}\n        fieldAppearance={appearance}\n        fieldTheme={theme}\n        emphasis={emphasis}\n        disabled={isAtMax || isDisabled}\n        showTooltip={isAtMax && !isDisabled}\n        disabledTooltipContent={disabledTooltipContent.increment}\n        label={stepperButtonLabels.increment}\n      />\n    </NumberInputContainer>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"NumberInput.js","names":[],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport { useComposedRefs } from '@radix-ui/react-compose-refs'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { Input } from '../input/Input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  appearance?: 'standard' | 'modern'\n  theme?: 'white' | 'grey'\n  emphasis?: 'bold'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  className?: string\n}\n\nconst NumberInputContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    },\n    emphasis: {\n      bold: ['gap-0']\n    }\n  }\n})\n\nexport const NumberInput = ({\n  ref,\n  value,\n  defaultValue = 0,\n  onValueChange,\n  min = 0,\n  max = Number.MAX_SAFE_INTEGER,\n  step = 1,\n  disabled: isDisabled = false,\n  readonly: isReadOnly = false,\n  size = 'md',\n  stepperButtonLabels: stepperButtonLabelsProp,\n  disabledTooltipContent: disabledTooltipContentProp,\n  className,\n  appearance = 'standard',\n  theme,\n  emphasis,\n  ...rest\n}: NumberInputProps & {\n  ref?: React.Ref<HTMLInputElement>\n}) => {\n  // `?? defaultValue` (not `||`): a controlled `value={0}` is a value, not\n  // an absence. `currentValue` is derived during render — mirroring the prop\n  // into state via an effect would paint one stale frame per update.\n  const [internalValue, setInternalValue] = React.useState<number>(\n    value ?? defaultValue\n  )\n  const currentValue = value ?? internalValue\n\n  const inputRef = React.useRef<HTMLInputElement | null>(null)\n  const composedInputRef = useComposedRefs(ref, inputRef)\n\n  const iconSize = getFieldIconSize(size)\n\n  const stepperButtonLabels = {\n    increment: 'increment',\n    decrement: 'decrement',\n    ...stepperButtonLabelsProp\n  }\n\n  const disabledTooltipContent = {\n    decrement: `Cannot enter values below ${min}`,\n    increment: `Cannot enter values above ${max}`,\n    ...disabledTooltipContentProp\n  }\n\n  const isAtMax = currentValue >= max\n  const isAtMin = currentValue <= min\n\n  const clamp = React.useCallback(\n    (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n    [max, min]\n  )\n\n  const updateValue = React.useCallback(\n    (newValue: number) => {\n      onValueChange?.(newValue)\n      setInternalValue(newValue)\n    },\n    [onValueChange]\n  )\n\n  const onInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n      updateValue(parsedValue)\n    },\n    [updateValue]\n  )\n\n  const increment = React.useCallback(() => {\n    if (isAtMax || isReadOnly) return\n    inputRef?.current?.focus()\n    const newValue = Number(currentValue) + step\n    updateValue(clamp(newValue))\n  }, [clamp, isAtMax, isReadOnly, step, updateValue, currentValue])\n\n  const decrement = React.useCallback(() => {\n    if (isAtMin || isReadOnly) return\n    inputRef?.current?.focus()\n    const newValue = Number(currentValue) - step\n    updateValue(clamp(newValue))\n  }, [clamp, isAtMin, isReadOnly, min, step, updateValue, currentValue])\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.nativeEvent.isComposing) return\n\n      /**\n       * Keyboard Accessibility\n       *\n       * We want to increase or decrease the input's value\n       * based on if the user the arrow keys.\n       *\n       * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n       */\n      const eventKey = event.key\n\n      const keyMap: Record<string, React.KeyboardEventHandler> = {\n        ArrowUp: increment,\n        ArrowRight: increment,\n        ArrowDown: decrement,\n        ArrowLeft: decrement,\n        Home: () => updateValue(min),\n        End: () => updateValue(max)\n      }\n\n      const action = keyMap[eventKey]\n\n      if (action) {\n        event.preventDefault()\n        action(event)\n      }\n    },\n    [increment, decrement, updateValue, min, max]\n  )\n\n  const hasError = currentValue < min || currentValue > max\n  const {\n    state: externalState,\n    'aria-invalid': externalAriaInvalid,\n    ...restProps\n  } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n  const inputProps: React.ComponentProps<typeof Input> = {\n    type: 'number',\n    value: currentValue,\n    ...restProps,\n    onChange: onInputChange,\n    onKeyDown,\n    size,\n    appearance,\n    theme,\n    state: externalState || (hasError ? 'error' : undefined),\n    'aria-invalid': externalAriaInvalid || hasError || undefined,\n    className: cn(\n      'rounded-none',\n      'w-16',\n      '[&_>_input]:text-center',\n      'disabled:opacity-30',\n      'disabled:pointer-events-none',\n      emphasis === 'bold' && [\n        'rounded-1',\n        '[&_>_input[aria-invalid=true]]:text-danger',\n        'focus-within:[&_>_input]:text-grey-1000'\n      ],\n      emphasis === 'bold' &&\n        appearance === 'standard' && [\n          'border-none',\n          '[&:has([aria-invalid=true])]:border-2',\n          '[&:has([aria-invalid=true])]:border-danger',\n          'focus-within:border-2',\n          'focus-within:border-blue-800'\n        ]\n    ),\n    ref: composedInputRef,\n    readOnly: isReadOnly,\n    disabled: isDisabled,\n    'aria-valuemin': min,\n    'aria-valuemax': max,\n    'aria-valuenow': currentValue,\n    role: 'spinbutton'\n  }\n\n  return (\n    <NumberInputContainer\n      appearance={appearance}\n      emphasis={emphasis}\n      className={className}\n    >\n      <NumberInputStepper\n        onClick={decrement}\n        icon={Minus}\n        className={cn(\n          emphasis !== 'bold' && ['border-r-none', 'rounded-r-none']\n        )}\n        size={iconSize}\n        fieldAppearance={appearance}\n        fieldTheme={theme}\n        emphasis={emphasis}\n        disabled={isAtMin || isDisabled}\n        showTooltip={isAtMin && !isDisabled}\n        disabledTooltipContent={disabledTooltipContent.decrement}\n        label={stepperButtonLabels.decrement}\n      />\n      <Input {...inputProps} />\n      <NumberInputStepper\n        onClick={increment}\n        icon={Plus}\n        className={cn(\n          emphasis !== 'bold' && ['border-l-none', 'rounded-l-none']\n        )}\n        size={iconSize}\n        fieldAppearance={appearance}\n        fieldTheme={theme}\n        emphasis={emphasis}\n        disabled={isAtMax || isDisabled}\n        showTooltip={isAtMax && !isDisabled}\n        disabledTooltipContent={disabledTooltipContent.increment}\n        label={stepperButtonLabels.increment}\n      />\n    </NumberInputContainer>\n  )\n}\n"],"mappings":"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"}

package/dist/components/number-input-field/NumberInputField.js

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 import { useController, useFormContext } from "react-hook-form";
 //#region src/components/number-input-field/NumberInputField.tsx
 var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, theme, ...rest }) => {
-	const { control } = useFormContext();
+	const { control, setValue } = useFormContext();
 	const context = useFormCustomContext();
 	const { field: { ref, onChange, value: innerValue, name: innerName } } = useController({
 		name,
@@ -19,8 +19,12 @@ var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt,
 	const formAppearance = context?.appearance || appearance;
 	const formTheme = context?.theme ?? theme;
 	React$1.useEffect(() => {
-		if (typeof value !== "undefined") onChange(value);
-	}, [value]);
+		if (typeof value !== "undefined") setValue(name, value, { shouldDirty: false });
+	}, [
+		value,
+		name,
+		setValue
+	]);
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		className,
 		description,

package/dist/components/number-input-field/NumberInputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInputField.js","names":[],"sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\nimport type { ValidationOptions } from '../form/validation'\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n  className?: string\n  hideLabel?: boolean\n  description?: string\n  label: string\n  name: string\n  prompt?: { link: string; label: string }\n  validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n  className,\n  defaultValue = 0,\n  hideLabel,\n  value,\n  prompt,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  appearance,\n  theme,\n  ...rest\n}: NumberInputFieldProps) => {\n  const { control } = useFormContext()\n  const context = useFormCustomContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (typeof value !== 'undefined') onChange(value)\n  }, [value])\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <NumberInput\n        id={name}\n        name={innerName}\n        ref={ref}\n        {...(error && { state: 'error', 'aria-invalid': true })}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...rest}\n      />\n    </FieldWrapper>\n  )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"mappings":";;;;;;;;AAoBA,IAAa,oBAAoB,EAC/B,WACA,eAAe,GACf,WACA,OACA,QACA,aACA,OACA,MACA,YACA,eACA,YACA,OACA,GAAG,WACwB;CAC3B,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CACD,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;CAEpC,QAAM,gBAAgB;EAEpB,IAAI,OAAO,UAAU,aAAa,SAAS,KAAK;CAClD,GAAG,CAAC,KAAK,CAAC;CAEV,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;YAEZ,oBAAC,aAAD;GACE,IAAI;GACJ,MAAM;GACD;GACL,GAAK,SAAS;IAAE,OAAO;IAAS,gBAAgB;GAAK;GACvC;GACd,gBAAgB,aAAa;IAC3B,SAAS,QAAQ;IACjB,gBAAgB,QAAQ;GAC1B;GACA,OAAO;GACP,YAAY;GACZ,OAAO;GACP,GAAI;EACL,CAAA;CACW,CAAA;AAElB;AAEA,iBAAiB,cAAc"}
+{"version":3,"file":"NumberInputField.js","names":[],"sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\nimport type { ValidationOptions } from '../form/validation'\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n  className?: string\n  hideLabel?: boolean\n  description?: string\n  label: string\n  name: string\n  prompt?: { link: string; label: string }\n  validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n  className,\n  defaultValue = 0,\n  hideLabel,\n  value,\n  prompt,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  appearance,\n  theme,\n  ...rest\n}: NumberInputFieldProps) => {\n  const { control, setValue } = useFormContext()\n  const context = useFormCustomContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  React.useEffect(() => {\n    // Sync an externally-controlled `value` into react-hook-form without\n    // marking the field dirty/touched — this isn't user input.\n    if (typeof value !== 'undefined')\n      setValue(name, value, { shouldDirty: false })\n  }, [value, name, setValue])\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <NumberInput\n        id={name}\n        name={innerName}\n        ref={ref}\n        {...(error && { state: 'error', 'aria-invalid': true })}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...rest}\n      />\n    </FieldWrapper>\n  )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"mappings":";;;;;;;;AAoBA,IAAa,oBAAoB,EAC/B,WACA,eAAe,GACf,WACA,OACA,QACA,aACA,OACA,MACA,YACA,eACA,YACA,OACA,GAAG,WACwB;CAC3B,MAAM,EAAE,SAAS,aAAa,eAAe;CAC7C,MAAM,UAAU,qBAAqB;CACrC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CACD,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;CAEpC,QAAM,gBAAgB;EAGpB,IAAI,OAAO,UAAU,aACnB,SAAS,MAAM,OAAO,EAAE,aAAa,MAAM,CAAC;CAChD,GAAG;EAAC;EAAO;EAAM;CAAQ,CAAC;CAE1B,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;YAEZ,oBAAC,aAAD;GACE,IAAI;GACJ,MAAM;GACD;GACL,GAAK,SAAS;IAAE,OAAO;IAAS,gBAAgB;GAAK;GACvC;GACd,gBAAgB,aAAa;IAC3B,SAAS,QAAQ;IACjB,gBAAgB,QAAQ;GAC1B;GACA,OAAO;GACP,YAAY;GACZ,OAAO;GACP,GAAI;EACL,CAAA;CACW,CAAA;AAElB;AAEA,iBAAiB,cAAc"}

package/dist/components/pagination/Pagination.context.js

@@ -15,7 +15,11 @@ var PaginationContext = React$1.createContext({
 	indicatedPages: [],
 	disabledPages: []
 });
-var PaginationProvider = ({ onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = [], disabledPages = [], onItemHover = () => null, labels = {}, children }) => {
+var DEFAULT_LABELS = {};
+var DEFAULT_ON_ITEM_HOVER = () => null;
+var DEFAULT_INDICATED_PAGES = [];
+var DEFAULT_DISABLED_PAGES = [];
+var PaginationProvider = ({ onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = DEFAULT_INDICATED_PAGES, disabledPages = DEFAULT_DISABLED_PAGES, onItemHover = DEFAULT_ON_ITEM_HOVER, labels = DEFAULT_LABELS, children }) => {
 	const [internalCurrentPage, setInternalCurrentPage] = React$1.useState(1);
 	const currentPage = selectedPage || internalCurrentPage;
 	const goToPage = React$1.useCallback((pageNumber) => {
@@ -30,38 +34,41 @@ var PaginationProvider = ({ onSelectedPageChange, selectedPage, visibleElementsC
 	const goToNextPage = React$1.useCallback(() => {
 		if (nextAvailablePage) goToPage(nextAvailablePage);
 	}, [goToPage, nextAvailablePage]);
-	const paginationItems = getPaginationElementsToRender(currentPage, pagesCount, visibleElementsCount);
-	const value = React$1.useMemo(() => {
-		return {
+	const paginationItems = React$1.useMemo(() => getPaginationElementsToRender(currentPage, pagesCount, visibleElementsCount), [
+		currentPage,
+		pagesCount,
+		visibleElementsCount
+	]);
+	return /* @__PURE__ */ jsx(PaginationContext, {
+		value: React$1.useMemo(() => {
+			return {
+				goToNextPage,
+				goToPreviousPage,
+				goToPage,
+				currentPage,
+				paginationItems,
+				indicatedPages,
+				disabledPages,
+				pagesCount,
+				onItemHover,
+				previousAvailablePage,
+				nextAvailablePage,
+				labels
+			};
+		}, [
 			goToNextPage,
 			goToPreviousPage,
 			goToPage,
 			currentPage,
-			paginationItems,
 			indicatedPages,
+			paginationItems,
 			disabledPages,
 			pagesCount,
 			onItemHover,
 			previousAvailablePage,
 			nextAvailablePage,
 			labels
-		};
-	}, [
-		goToNextPage,
-		goToPreviousPage,
-		goToPage,
-		currentPage,
-		indicatedPages,
-		paginationItems,
-		disabledPages,
-		pagesCount,
-		onItemHover,
-		previousAvailablePage,
-		nextAvailablePage,
-		labels
-	]);
-	return /* @__PURE__ */ jsx(PaginationContext.Provider, {
-		value,
+		]),
 		children
 	});
 };

package/dist/components/pagination/Pagination.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.context.js","names":[],"sources":["../../../src/components/pagination/Pagination.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { VisibleElementsAmount } from './pagination.constants'\nimport {\n  findNextAvailablePage,\n  findPreviousAvailablePage,\n  getPaginationElementsToRender\n} from './pagination.helper'\nimport type { PaginationContextValue, PaginationProviderProps } from './types'\n\nexport const PaginationContext = React.createContext<PaginationContextValue>({\n  goToPage: () => null,\n  goToPreviousPage: () => null,\n  goToNextPage: () => null,\n  currentPage: 1,\n  pagesCount: 0,\n  onItemHover: () => null,\n  paginationItems: [],\n  labels: {},\n  indicatedPages: [],\n  disabledPages: []\n})\n\nexport const PaginationProvider = ({\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = [],\n  disabledPages = [],\n  onItemHover = () => null,\n  labels = {},\n  children\n}: React.PropsWithChildren<PaginationProviderProps>) => {\n  const [internalCurrentPage, setInternalCurrentPage] = React.useState(1)\n\n  const currentPage = selectedPage || internalCurrentPage\n\n  const goToPage = React.useCallback(\n    (pageNumber: number) => {\n      setInternalCurrentPage(pageNumber)\n      onSelectedPageChange?.(pageNumber)\n    },\n    [onSelectedPageChange]\n  )\n\n  const previousPage = currentPage - 1\n  const previousAvailablePage = findPreviousAvailablePage(\n    previousPage,\n    disabledPages\n  )\n\n  const goToPreviousPage = React.useCallback(() => {\n    if (previousAvailablePage) goToPage(previousAvailablePage)\n  }, [goToPage, previousAvailablePage])\n\n  const nextPage = currentPage + 1\n  const nextAvailablePage = findNextAvailablePage(\n    nextPage,\n    disabledPages,\n    pagesCount\n  )\n  const goToNextPage = React.useCallback(() => {\n    if (nextAvailablePage) goToPage(nextAvailablePage)\n  }, [goToPage, nextAvailablePage])\n\n  const paginationItems = getPaginationElementsToRender(\n    currentPage,\n    pagesCount,\n    visibleElementsCount\n  )\n\n  const value = React.useMemo(() => {\n    return {\n      goToNextPage,\n      goToPreviousPage,\n      goToPage,\n      currentPage,\n      paginationItems,\n      indicatedPages,\n      disabledPages,\n      pagesCount,\n      onItemHover,\n      previousAvailablePage,\n      nextAvailablePage,\n      labels\n    }\n  }, [\n    goToNextPage,\n    goToPreviousPage,\n    goToPage,\n    currentPage,\n    indicatedPages,\n    paginationItems,\n    disabledPages,\n    pagesCount,\n    onItemHover,\n    previousAvailablePage,\n    nextAvailablePage,\n    labels\n  ])\n\n  return (\n    <PaginationContext.Provider value={value}>\n      {children}\n    </PaginationContext.Provider>\n  )\n}\n"],"mappings":";;;;;AAUA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,gBAAgB;CAChB,wBAAwB;CACxB,oBAAoB;CACpB,aAAa;CACb,YAAY;CACZ,mBAAmB;CACnB,iBAAiB,CAAC;CAClB,QAAQ,CAAC;CACT,gBAAgB,CAAC;CACjB,eAAe,CAAC;AAClB,CAAC;AAED,IAAa,sBAAsB,EACjC,sBACA,cACA,uBAAuB,sBAAsB,MAC7C,YACA,iBAAiB,CAAC,GAClB,gBAAgB,CAAC,GACjB,oBAAoB,MACpB,SAAS,CAAC,GACV,eACsD;CACtD,MAAM,CAAC,qBAAqB,0BAA0B,QAAM,SAAS,CAAC;CAEtE,MAAM,cAAc,gBAAgB;CAEpC,MAAM,WAAW,QAAM,aACpB,eAAuB;EACtB,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;CACnC,GACA,CAAC,oBAAoB,CACvB;CAGA,MAAM,wBAAwB,0BADT,cAAc,GAGjC,aACF;CAEA,MAAM,mBAAmB,QAAM,kBAAkB;EAC/C,IAAI,uBAAuB,SAAS,qBAAqB;CAC3D,GAAG,CAAC,UAAU,qBAAqB,CAAC;CAGpC,MAAM,oBAAoB,sBADT,cAAc,GAG7B,eACA,UACF;CACA,MAAM,eAAe,QAAM,kBAAkB;EAC3C,IAAI,mBAAmB,SAAS,iBAAiB;CACnD,GAAG,CAAC,UAAU,iBAAiB,CAAC;CAEhC,MAAM,kBAAkB,8BACtB,aACA,YACA,oBACF;CAEA,MAAM,QAAQ,QAAM,cAAc;EAChC,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,kBAAkB,UAAnB;EAAmC;EAChC;CACyB,CAAA;AAEhC"}
+{"version":3,"file":"Pagination.context.js","names":[],"sources":["../../../src/components/pagination/Pagination.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { VisibleElementsAmount } from './pagination.constants'\nimport {\n  findNextAvailablePage,\n  findPreviousAvailablePage,\n  getPaginationElementsToRender\n} from './pagination.helper'\nimport type { PaginationContextValue, PaginationProviderProps } from './types'\n\nexport const PaginationContext = React.createContext<PaginationContextValue>({\n  goToPage: () => null,\n  goToPreviousPage: () => null,\n  goToNextPage: () => null,\n  currentPage: 1,\n  pagesCount: 0,\n  onItemHover: () => null,\n  paginationItems: [],\n  labels: {},\n  indicatedPages: [],\n  disabledPages: []\n})\n\n// Module-level defaults: inline `= {}` / `= () => null` defaults would mint\n// a new identity every render and the value useMemo below could never hit.\nconst DEFAULT_LABELS = {}\nconst DEFAULT_ON_ITEM_HOVER = () => null\nconst DEFAULT_INDICATED_PAGES: number[] = []\nconst DEFAULT_DISABLED_PAGES: number[] = []\n\nexport const PaginationProvider = ({\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = DEFAULT_INDICATED_PAGES,\n  disabledPages = DEFAULT_DISABLED_PAGES,\n  onItemHover = DEFAULT_ON_ITEM_HOVER,\n  labels = DEFAULT_LABELS,\n  children\n}: React.PropsWithChildren<PaginationProviderProps>) => {\n  const [internalCurrentPage, setInternalCurrentPage] = React.useState(1)\n\n  const currentPage = selectedPage || internalCurrentPage\n\n  const goToPage = React.useCallback(\n    (pageNumber: number) => {\n      setInternalCurrentPage(pageNumber)\n      onSelectedPageChange?.(pageNumber)\n    },\n    [onSelectedPageChange]\n  )\n\n  const previousPage = currentPage - 1\n  const previousAvailablePage = findPreviousAvailablePage(\n    previousPage,\n    disabledPages\n  )\n\n  const goToPreviousPage = React.useCallback(() => {\n    if (previousAvailablePage) goToPage(previousAvailablePage)\n  }, [goToPage, previousAvailablePage])\n\n  const nextPage = currentPage + 1\n  const nextAvailablePage = findNextAvailablePage(\n    nextPage,\n    disabledPages,\n    pagesCount\n  )\n  const goToNextPage = React.useCallback(() => {\n    if (nextAvailablePage) goToPage(nextAvailablePage)\n  }, [goToPage, nextAvailablePage])\n\n  const paginationItems = React.useMemo(\n    () =>\n      getPaginationElementsToRender(\n        currentPage,\n        pagesCount,\n        visibleElementsCount\n      ),\n    [currentPage, pagesCount, visibleElementsCount]\n  )\n\n  const value = React.useMemo(() => {\n    return {\n      goToNextPage,\n      goToPreviousPage,\n      goToPage,\n      currentPage,\n      paginationItems,\n      indicatedPages,\n      disabledPages,\n      pagesCount,\n      onItemHover,\n      previousAvailablePage,\n      nextAvailablePage,\n      labels\n    }\n  }, [\n    goToNextPage,\n    goToPreviousPage,\n    goToPage,\n    currentPage,\n    indicatedPages,\n    paginationItems,\n    disabledPages,\n    pagesCount,\n    onItemHover,\n    previousAvailablePage,\n    nextAvailablePage,\n    labels\n  ])\n\n  return <PaginationContext value={value}>{children}</PaginationContext>\n}\n"],"mappings":";;;;;AAUA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,gBAAgB;CAChB,wBAAwB;CACxB,oBAAoB;CACpB,aAAa;CACb,YAAY;CACZ,mBAAmB;CACnB,iBAAiB,CAAC;CAClB,QAAQ,CAAC;CACT,gBAAgB,CAAC;CACjB,eAAe,CAAC;AAClB,CAAC;AAID,IAAM,iBAAiB,CAAC;AACxB,IAAM,8BAA8B;AACpC,IAAM,0BAAoC,CAAC;AAC3C,IAAM,yBAAmC,CAAC;AAE1C,IAAa,sBAAsB,EACjC,sBACA,cACA,uBAAuB,sBAAsB,MAC7C,YACA,iBAAiB,yBACjB,gBAAgB,wBAChB,cAAc,uBACd,SAAS,gBACT,eACsD;CACtD,MAAM,CAAC,qBAAqB,0BAA0B,QAAM,SAAS,CAAC;CAEtE,MAAM,cAAc,gBAAgB;CAEpC,MAAM,WAAW,QAAM,aACpB,eAAuB;EACtB,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;CACnC,GACA,CAAC,oBAAoB,CACvB;CAGA,MAAM,wBAAwB,0BADT,cAAc,GAGjC,aACF;CAEA,MAAM,mBAAmB,QAAM,kBAAkB;EAC/C,IAAI,uBAAuB,SAAS,qBAAqB;CAC3D,GAAG,CAAC,UAAU,qBAAqB,CAAC;CAGpC,MAAM,oBAAoB,sBADT,cAAc,GAG7B,eACA,UACF;CACA,MAAM,eAAe,QAAM,kBAAkB;EAC3C,IAAI,mBAAmB,SAAS,iBAAiB;CACnD,GAAG,CAAC,UAAU,iBAAiB,CAAC;CAEhC,MAAM,kBAAkB,QAAM,cAE1B,8BACE,aACA,YACA,oBACF,GACF;EAAC;EAAa;EAAY;CAAoB,CAChD;CAgCA,OAAO,oBAAC,mBAAD;EAA0B,OA9BnB,QAAM,cAAc;GAChC,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF,GAAG;GACD;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAEiC;EAAQ;CAA4B,CAAA;AACvE"}

package/dist/components/pagination/usePagination.js

@@ -2,7 +2,7 @@ import { PaginationContext } from "./Pagination.context.js";
 import * as React$1 from "react";
 //#region src/components/pagination/usePagination.tsx
 var usePagination = () => {
-	const context = React$1.useContext(PaginationContext);
+	const context = React$1.use(PaginationContext);
 	if (!context) throw new Error("Ensure that you wrap any components with the PaginationProvider component");
 	return context;
 };

package/dist/components/pagination/usePagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePagination.js","names":[],"sources":["../../../src/components/pagination/usePagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PaginationContext } from './Pagination.context'\nimport type { PaginationContextValue } from './types'\n\nexport const usePagination = (): PaginationContextValue => {\n  const context = React.useContext(PaginationContext)\n\n  if (!context) {\n    throw new Error(\n      'Ensure that you wrap any components with the PaginationProvider component'\n    )\n  }\n\n  return context\n}\n"],"mappings":";;;AAKA,IAAa,sBAA8C;CACzD,MAAM,UAAU,QAAM,WAAW,iBAAiB;CAElD,IAAI,CAAC,SACH,MAAM,IAAI,MACR,2EACF;CAGF,OAAO;AACT"}
+{"version":3,"file":"usePagination.js","names":[],"sources":["../../../src/components/pagination/usePagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PaginationContext } from './Pagination.context'\nimport type { PaginationContextValue } from './types'\n\nexport const usePagination = (): PaginationContextValue => {\n  const context = React.use(PaginationContext)\n\n  if (!context) {\n    throw new Error(\n      'Ensure that you wrap any components with the PaginationProvider component'\n    )\n  }\n\n  return context\n}\n"],"mappings":";;;AAKA,IAAa,sBAA8C;CACzD,MAAM,UAAU,QAAM,IAAI,iBAAiB;CAE3C,IAAI,CAAC,SACH,MAAM,IAAI,MACR,2EACF;CAGF,OAAO;AACT"}

package/dist/components/password-input/PasswordInput.js

@@ -3,7 +3,6 @@ import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
 import { Input } from "../input/Input.js";
-import * as React$1 from "react";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Eye, EyeCrossed } from "@atom-learning/icons";
@@ -11,7 +10,7 @@ import { Eye, EyeCrossed } from "@atom-learning/icons";
 var PasswordInput = ({ ref, className, hidePasswordText = "Hide password", showPasswordText = "Show password", size = "md", ...restProps }) => {
 	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 	const togglePasswordVisibility = () => setIsPasswordVisible((currentState) => !currentState);
-	const iconSize = React$1.useMemo(() => getFieldIconSize(size), [size]);
+	const iconSize = getFieldIconSize(size);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("relative", className),
 		children: [/* @__PURE__ */ jsx(Input, {

package/dist/components/password-input/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","names":[],"sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { cn } from '../../styled'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport type { InputProps } from '../input/Input'\nimport { Input } from '../input/Input'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n  hidePasswordText?: string\n  showPasswordText?: string\n}\n\nexport const PasswordInput = ({\n  ref,\n  className,\n  hidePasswordText = 'Hide password',\n  showPasswordText = 'Show password',\n  size = 'md',\n  ...restProps\n}: PasswordInputProps) => {\n  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n  const togglePasswordVisibility = () =>\n    setIsPasswordVisible((currentState) => !currentState)\n\n  const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n  return (\n    <div className={cn('relative', className)}>\n      <Input\n        {...restProps}\n        size={size}\n        type={isPasswordVisible ? 'text' : 'password'}\n        ref={ref}\n        className=\"pr-6\"\n      />\n      <ActionIcon\n        appearance=\"simple\"\n        theme=\"neutral\"\n        label={isPasswordVisible ? hidePasswordText : showPasswordText}\n        onClick={togglePasswordVisibility}\n        onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n        size={iconSize}\n        className={cn(\n          size === 'lg' ? 'bottom-1' : 'bottom-0',\n          'absolute',\n          'right-0'\n        )}\n      >\n        <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n      </ActionIcon>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,iBAAiB,EAC5B,KACA,WACA,mBAAmB,iBACnB,mBAAmB,iBACnB,OAAO,MACP,GAAG,gBACqB;CACxB,MAAM,CAAC,mBAAmB,wBAAwB,SAAkB,KAAK;CACzE,MAAM,iCACJ,sBAAsB,iBAAiB,CAAC,YAAY;CAEtD,MAAM,WAAW,QAAM,cAAc,iBAAiB,IAAI,GAAG,CAAC,IAAI,CAAC;CAEnE,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,SAAS;YAAxC,CACE,oBAAC,OAAD;GACE,GAAI;GACE;GACN,MAAM,oBAAoB,SAAS;GAC9B;GACL,WAAU;EACX,CAAA,GACD,oBAAC,YAAD;GACE,YAAW;GACX,OAAM;GACN,OAAO,oBAAoB,mBAAmB;GAC9C,SAAS;GACT,cAAc,MAAM,EAAE,eAAe;GACrC,MAAM;GACN,WAAW,GACT,SAAS,OAAO,aAAa,YAC7B,YACA,SACF;aAEA,oBAAC,MAAD,EAAM,IAAI,oBAAoB,MAAM,WAAa,CAAA;EACvC,CAAA,CACT;;AAET"}
+{"version":3,"file":"PasswordInput.js","names":[],"sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { cn } from '../../styled'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport type { InputProps } from '../input/Input'\nimport { Input } from '../input/Input'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n  hidePasswordText?: string\n  showPasswordText?: string\n}\n\nexport const PasswordInput = ({\n  ref,\n  className,\n  hidePasswordText = 'Hide password',\n  showPasswordText = 'Show password',\n  size = 'md',\n  ...restProps\n}: PasswordInputProps) => {\n  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n  const togglePasswordVisibility = () =>\n    setIsPasswordVisible((currentState) => !currentState)\n\n  const iconSize = getFieldIconSize(size)\n\n  return (\n    <div className={cn('relative', className)}>\n      <Input\n        {...restProps}\n        size={size}\n        type={isPasswordVisible ? 'text' : 'password'}\n        ref={ref}\n        className=\"pr-6\"\n      />\n      <ActionIcon\n        appearance=\"simple\"\n        theme=\"neutral\"\n        label={isPasswordVisible ? hidePasswordText : showPasswordText}\n        onClick={togglePasswordVisibility}\n        onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n        size={iconSize}\n        className={cn(\n          size === 'lg' ? 'bottom-1' : 'bottom-0',\n          'absolute',\n          'right-0'\n        )}\n      >\n        <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n      </ActionIcon>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AAgBA,IAAa,iBAAiB,EAC5B,KACA,WACA,mBAAmB,iBACnB,mBAAmB,iBACnB,OAAO,MACP,GAAG,gBACqB;CACxB,MAAM,CAAC,mBAAmB,wBAAwB,SAAkB,KAAK;CACzE,MAAM,iCACJ,sBAAsB,iBAAiB,CAAC,YAAY;CAEtD,MAAM,WAAW,iBAAiB,IAAI;CAEtC,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,SAAS;YAAxC,CACE,oBAAC,OAAD;GACE,GAAI;GACE;GACN,MAAM,oBAAoB,SAAS;GAC9B;GACL,WAAU;EACX,CAAA,GACD,oBAAC,YAAD;GACE,YAAW;GACX,OAAM;GACN,OAAO,oBAAoB,mBAAmB;GAC9C,SAAS;GACT,cAAc,MAAM,EAAE,eAAe;GACrC,MAAM;GACN,WAAW,GACT,SAAS,OAAO,aAAa,YAC7B,YACA,SACF;aAEA,oBAAC,MAAD,EAAM,IAAI,oBAAoB,MAAM,WAAa,CAAA;EACvC,CAAA,CACT;;AAET"}

package/dist/components/radio-button-field/RadioButtonField.js

@@ -16,7 +16,7 @@ var Fieldset = styled("fieldset", { base: [
 	"min-w-0"
 ] });
 var RadioButtonFieldComponent = ({ children, className, direction = "column", defaultValue, value, description, label, name, validation, onValueChange, ...rest }) => {
-	const { control } = useFormContext();
+	const { control, setValue } = useFormContext();
 	const { field: { ref, onChange, value: innerValue } } = useController({
 		name,
 		control,
@@ -25,8 +25,12 @@ var RadioButtonFieldComponent = ({ children, className, direction = "column", de
 	});
 	const { error } = useFieldError(name);
 	React$1.useEffect(() => {
-		if (typeof value !== "undefined") onChange(value);
-	}, [value]);
+		if (typeof value !== "undefined") setValue(name, value, { shouldDirty: false });
+	}, [
+		value,
+		name,
+		setValue
+	]);
 	return /* @__PURE__ */ jsxs(Fieldset, {
 		className,
 		children: [

package/dist/components/radio-button-field/RadioButtonField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonField.js","names":[],"sources":["../../../src/components/radio-button-field/RadioButtonField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { styled } from '../../styled'\nimport { Description as FieldDescription } from '../field-wrapper/FieldDescription'\nimport type { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { Label } from '../label/Label'\nimport { RadioButtonGroup } from '../radio-button/RadioButtonGroup'\nimport { RadioField } from './RadioField'\n\nconst Fieldset = styled('fieldset', {\n  base: ['border-0', 'p-0', 'm-0', 'min-w-0']\n})\n\ntype RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> &\n  FieldElementWrapperProps\n\nconst RadioButtonFieldComponent = ({\n  children,\n  className,\n  direction = 'column',\n  defaultValue,\n  value,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  ...rest\n}: RadioButtonFieldProps) => {\n  const { control } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (typeof value !== 'undefined') onChange(value)\n  }, [value])\n\n  return (\n    <Fieldset className={className}>\n      <Label\n        as=\"legend\"\n        required={Boolean(validation?.required)}\n        className=\"mb-3 p-0\"\n      >\n        {label}\n      </Label>\n      {description && (\n        <FieldDescription className=\"mb-3\">{description}</FieldDescription>\n      )}\n\n      <RadioButtonGroup\n        ref={ref}\n        direction={direction}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        {...rest}\n      >\n        {children}\n      </RadioButtonGroup>\n\n      {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    </Fieldset>\n  )\n}\n\nexport const RadioButtonField = /* @__PURE__ */ Object.assign(\n  RadioButtonFieldComponent,\n  {\n    Item: RadioField\n  }\n)\n\nRadioButtonFieldComponent.displayName = 'RadioButtonField'\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,WAAW,OAAO,YAAY,EAClC,MAAM;CAAC;CAAY;CAAO;CAAO;AAAS,EAC5C,CAAC;AAKD,IAAM,6BAA6B,EACjC,UACA,WACA,YAAY,UACZ,cACA,OACA,aACA,OACA,MACA,YACA,eACA,GAAG,WACwB;CAC3B,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,iBAC7B,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CACD,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,QAAM,gBAAgB;EAEpB,IAAI,OAAO,UAAU,aAAa,SAAS,KAAK;CAClD,GAAG,CAAC,KAAK,CAAC;CAEV,OACE,qBAAC,UAAD;EAAqB;YAArB;GACE,oBAAC,OAAD;IACE,IAAG;IACH,UAAU,QAAQ,YAAY,QAAQ;IACtC,WAAU;cAET;GACI,CAAA;GACN,eACC,oBAAC,aAAD;IAAkB,WAAU;cAAQ;GAA8B,CAAA;GAGpE,oBAAC,kBAAD;IACO;IACM;IACG;IACd,gBAAgB,aAAa;KAC3B,SAAS,QAAQ;KACjB,gBAAgB,QAAQ;IAC1B;IACA,OAAO;IACP,GAAI;IAEH;GACe,CAAA;GAEjB,SAAS,oBAAC,eAAD;IAAe,WAAU;cAAQ;GAAqB,CAAA;EACxD;;AAEd;AAEA,IAAa,mBAAmC,uBAAO,OACrD,2BACA,EACE,MAAM,WACR,CACF;AAEA,0BAA0B,cAAc"}
+{"version":3,"file":"RadioButtonField.js","names":[],"sources":["../../../src/components/radio-button-field/RadioButtonField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { styled } from '../../styled'\nimport { Description as FieldDescription } from '../field-wrapper/FieldDescription'\nimport type { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { Label } from '../label/Label'\nimport { RadioButtonGroup } from '../radio-button/RadioButtonGroup'\nimport { RadioField } from './RadioField'\n\nconst Fieldset = styled('fieldset', {\n  base: ['border-0', 'p-0', 'm-0', 'min-w-0']\n})\n\ntype RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> &\n  FieldElementWrapperProps\n\nconst RadioButtonFieldComponent = ({\n  children,\n  className,\n  direction = 'column',\n  defaultValue,\n  value,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  ...rest\n}: RadioButtonFieldProps) => {\n  const { control, setValue } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  React.useEffect(() => {\n    // Sync an externally-controlled `value` into react-hook-form without\n    // marking the field dirty/touched — this isn't user input.\n    if (typeof value !== 'undefined')\n      setValue(name, value, { shouldDirty: false })\n  }, [value, name, setValue])\n\n  return (\n    <Fieldset className={className}>\n      <Label\n        as=\"legend\"\n        required={Boolean(validation?.required)}\n        className=\"mb-3 p-0\"\n      >\n        {label}\n      </Label>\n      {description && (\n        <FieldDescription className=\"mb-3\">{description}</FieldDescription>\n      )}\n\n      <RadioButtonGroup\n        ref={ref}\n        direction={direction}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        {...rest}\n      >\n        {children}\n      </RadioButtonGroup>\n\n      {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    </Fieldset>\n  )\n}\n\nexport const RadioButtonField = /* @__PURE__ */ Object.assign(\n  RadioButtonFieldComponent,\n  {\n    Item: RadioField\n  }\n)\n\nRadioButtonFieldComponent.displayName = 'RadioButtonField'\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,WAAW,OAAO,YAAY,EAClC,MAAM;CAAC;CAAY;CAAO;CAAO;AAAS,EAC5C,CAAC;AAKD,IAAM,6BAA6B,EACjC,UACA,WACA,YAAY,UACZ,cACA,OACA,aACA,OACA,MACA,YACA,eACA,GAAG,WACwB;CAC3B,MAAM,EAAE,SAAS,aAAa,eAAe;CAC7C,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,iBAC7B,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CACD,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,QAAM,gBAAgB;EAGpB,IAAI,OAAO,UAAU,aACnB,SAAS,MAAM,OAAO,EAAE,aAAa,MAAM,CAAC;CAChD,GAAG;EAAC;EAAO;EAAM;CAAQ,CAAC;CAE1B,OACE,qBAAC,UAAD;EAAqB;YAArB;GACE,oBAAC,OAAD;IACE,IAAG;IACH,UAAU,QAAQ,YAAY,QAAQ;IACtC,WAAU;cAET;GACI,CAAA;GACN,eACC,oBAAC,aAAD;IAAkB,WAAU;cAAQ;GAA8B,CAAA;GAGpE,oBAAC,kBAAD;IACO;IACM;IACG;IACd,gBAAgB,aAAa;KAC3B,SAAS,QAAQ;KACjB,gBAAgB,QAAQ;IAC1B;IACA,OAAO;IACP,GAAI;IAEH;GACe,CAAA;GAEjB,SAAS,oBAAC,eAAD;IAAe,WAAU;cAAQ;GAAqB,CAAA;EACxD;;AAEd;AAEA,IAAa,mBAAmC,uBAAO,OACrD,2BACA,EACE,MAAM,WACR,CACF;AAEA,0BAA0B,cAAc"}

package/dist/components/search-input/SearchInput.js

@@ -5,6 +5,7 @@ import { useCallbackRef } from "../../utilities/hooks/useCallbackRef.js";
 import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
 import { InputBackground, InputText } from "../input/Input.js";
 import * as React$1 from "react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close, Search } from "@atom-learning/icons";
 //#region src/components/search-input/SearchInput.tsx
@@ -23,14 +24,10 @@ var StyledIcon = styled(Icon, {
 var SearchInput = ({ ref, size = "md", appearance = "standard", theme, className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...rest }) => {
 	const [inputElRef, setInputElRef] = useCallbackRef();
 	const [innerValue, setInnerValue] = React$1.useState(defaultValue);
-	const [activeIcon, setActiveIcon] = React$1.useState(defaultValue ? "CLEAR" : "SEARCH");
-	React$1.useEffect(() => {
-		if (typeof value === "undefined") return;
-		setInnerValue(value);
-		setActiveIcon(value ? "CLEAR" : "SEARCH");
-	}, [value]);
-	const iconSize = React$1.useMemo(() => getFieldIconSize(size), [size]);
-	React$1.useImperativeHandle(ref, () => inputElRef.current);
+	const currentValue = value ?? innerValue;
+	const activeIcon = currentValue ? "CLEAR" : "SEARCH";
+	const iconSize = getFieldIconSize(size);
+	const composedInputRef = useComposedRefs(ref, setInputElRef);
 	const handleClear = () => {
 		const inputEl = inputElRef.current;
 		if (!inputEl) return;
@@ -45,7 +42,6 @@ var SearchInput = ({ ref, size = "md", appearance = "standard", theme, className
 		const newValue = event.target.value;
 		setInnerValue(newValue);
 		onValueChange?.(newValue);
-		setActiveIcon(newValue ? "CLEAR" : "SEARCH");
 	};
 	const getIcon = () => {
 		if (activeIcon === "SEARCH") return /* @__PURE__ */ jsx(StyledIcon, {
@@ -68,11 +64,11 @@ var SearchInput = ({ ref, size = "md", appearance = "standard", theme, className
 		theme,
 		className: cn("relative", "w-auto", className),
 		children: [/* @__PURE__ */ jsx(InputText, {
-			ref: setInputElRef,
+			ref: composedInputRef,
 			size,
 			type: "search",
 			...rest,
-			value: innerValue,
+			value: currentValue,
 			onChange: handleOnChange,
 			className: cn(size === "sm" ? "pr-8" : "pr-10", "[&::-webkit-search-decoration]:appearance-none", "[&::-webkit-search-cancel-button]:appearance-none", "[&::-webkit-search-results-button]:appearance-none")
 		}), getIcon()]

package/dist/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { useCallbackRef } from '../../utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Input, InputBackground, InputText } from '../input/Input'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  base: ['text-grey-700', 'absolute', 'pointer-events-none'],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-2.5', 'size-5'],\n      lg: ['right-2.5', 'size-5']\n    }\n  }\n})\n\nexport const SearchInput = ({\n  ref,\n  size = 'md',\n  appearance = 'standard',\n  theme,\n  className,\n  value,\n  defaultValue = '',\n  onValueChange,\n  clearText = 'Clear',\n  onChange,\n  ...rest\n}: SearchInputProps) => {\n  const [inputElRef, setInputElRef] = useCallbackRef()\n  const [innerValue, setInnerValue] = React.useState(defaultValue)\n  const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n    defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n  )\n  React.useEffect(() => {\n    if (typeof value === 'undefined') return\n    setInnerValue(value)\n    setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n  }, [value])\n\n  const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n  React.useImperativeHandle(ref, () => inputElRef.current as HTMLInputElement)\n\n  const handleClear = () => {\n    const inputEl = inputElRef.current\n    if (!inputEl) return\n\n    // https://stackoverflow.com/a/46012210\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      window.HTMLInputElement.prototype,\n      'value'\n    )?.set\n    nativeInputValueSetter?.call?.(inputEl, '')\n    const ev2 = new Event('input', {\n      bubbles: true\n    })\n    inputEl.dispatchEvent(ev2)\n    inputEl.focus()\n    onValueChange?.('')\n  }\n\n  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event)\n\n    const newValue = event.target.value\n    setInnerValue(newValue)\n    onValueChange?.(newValue)\n    setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n  }\n\n  const getIcon = () => {\n    if (activeIcon === INPUT_ICON.SEARCH)\n      return (\n        <StyledIcon\n          is={Search}\n          size={size}\n          className={cn(\n            size == 'sm' ? 'size-4' : 'size-5',\n            'top-1/2',\n            '-translate-y-1/2'\n          )}\n        />\n      )\n\n    return (\n      <ActionIcon\n        label={clearText}\n        theme=\"neutral\"\n        size={iconSize}\n        onClick={handleClear}\n        className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    )\n  }\n\n  return (\n    <InputBackground\n      size={size}\n      appearance={appearance}\n      theme={theme}\n      className={cn('relative', 'w-auto', className)}\n    >\n      <InputText\n        ref={setInputElRef}\n        size={size}\n        type=\"search\"\n        {...rest}\n        value={innerValue}\n        onChange={handleOnChange}\n        className={cn(\n          size === 'sm' ? 'pr-8' : 'pr-10',\n          '[&::-webkit-search-decoration]:appearance-none',\n          '[&::-webkit-search-cancel-button]:appearance-none',\n          '[&::-webkit-search-results-button]:appearance-none'\n        )}\n      />\n      {getIcon()}\n    </InputBackground>\n  )\n}\n"],"mappings":";;;;;;;;;;AAyBA,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;CAAqB;CACzD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,aAAa,QAAQ;EAC1B,IAAI,CAAC,aAAa,QAAQ;CAC5B,EACF;AACF,CAAC;AAED,IAAa,eAAe,EAC1B,KACA,OAAO,MACP,aAAa,YACb,OACA,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,WACmB;CACtB,MAAM,CAAC,YAAY,iBAAiB,eAAe;CACnD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,YAAY;CAC/D,MAAM,CAAC,YAAY,iBAAiB,QAAM,SACxC,eAAA,UAAA,QACF;CACA,QAAM,gBAAgB;EACpB,IAAI,OAAO,UAAU,aAAa;EAClC,cAAc,KAAK;EACnB,cAAc,QAAA,UAAA,QAA4C;CAC5D,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,WAAW,QAAM,cAAc,iBAAiB,IAAI,GAAG,CAAC,IAAI,CAAC;CAEnE,QAAM,oBAAoB,WAAW,WAAW,OAA2B;CAE3E,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAOd,CAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,OACF,CAAC,EAAE,IAAA,EACqB,OAAO,SAAS,EAAE;EAC1C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,KACX,CAAC;EACD,QAAQ,cAAc,GAAG;EACzB,QAAQ,MAAM;EACd,gBAAgB,EAAE;CACpB;CAEA,MAAM,kBAAkB,UAA+C;EACrE,WAAW,KAAK;EAEhB,MAAM,WAAW,MAAM,OAAO;EAC9B,cAAc,QAAQ;EACtB,gBAAgB,QAAQ;EACxB,cAAc,WAAA,UAAA,QAA+C;CAC/D;CAEA,MAAM,gBAAgB;EACpB,IAAI,eAAA,UACF,OACE,oBAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,GACT,QAAQ,OAAO,WAAW,UAC1B,WACA,kBACF;EACD,CAAA;EAGL,OACE,oBAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACR,CAAA;CAEhB;CAEA,OACE,qBAAC,iBAAD;EACQ;EACM;EACL;EACP,WAAW,GAAG,YAAY,UAAU,SAAS;YAJ/C,CAME,oBAAC,WAAD;GACE,KAAK;GACC;GACN,MAAK;GACL,GAAI;GACJ,OAAO;GACP,UAAU;GACV,WAAW,GACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,oDACF;EACD,CAAA,GACA,QAAQ,CACM;;AAErB"}
+{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport { useComposedRefs } from '@radix-ui/react-compose-refs'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { useCallbackRef } from '../../utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Input, InputBackground, InputText } from '../input/Input'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  base: ['text-grey-700', 'absolute', 'pointer-events-none'],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-2.5', 'size-5'],\n      lg: ['right-2.5', 'size-5']\n    }\n  }\n})\n\nexport const SearchInput = ({\n  ref,\n  size = 'md',\n  appearance = 'standard',\n  theme,\n  className,\n  value,\n  defaultValue = '',\n  onValueChange,\n  clearText = 'Clear',\n  onChange,\n  ...rest\n}: SearchInputProps) => {\n  const [inputElRef, setInputElRef] = useCallbackRef()\n  const [innerValue, setInnerValue] = React.useState(defaultValue)\n  // Derived during render — mirroring `value` into state via an effect would\n  // paint one stale frame per controlled update.\n  const currentValue = value ?? innerValue\n  const activeIcon = currentValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n\n  const iconSize = getFieldIconSize(size)\n\n  const composedInputRef = useComposedRefs(\n    ref as React.Ref<HTMLElement>,\n    setInputElRef\n  )\n\n  const handleClear = () => {\n    const inputEl = inputElRef.current\n    if (!inputEl) return\n\n    // https://stackoverflow.com/a/46012210\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      window.HTMLInputElement.prototype,\n      'value'\n    )?.set\n    nativeInputValueSetter?.call?.(inputEl, '')\n    const ev2 = new Event('input', {\n      bubbles: true\n    })\n    inputEl.dispatchEvent(ev2)\n    inputEl.focus()\n    onValueChange?.('')\n  }\n\n  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event)\n\n    const newValue = event.target.value\n    setInnerValue(newValue)\n    onValueChange?.(newValue)\n  }\n\n  const getIcon = () => {\n    if (activeIcon === INPUT_ICON.SEARCH)\n      return (\n        <StyledIcon\n          is={Search}\n          size={size}\n          className={cn(\n            size == 'sm' ? 'size-4' : 'size-5',\n            'top-1/2',\n            '-translate-y-1/2'\n          )}\n        />\n      )\n\n    return (\n      <ActionIcon\n        label={clearText}\n        theme=\"neutral\"\n        size={iconSize}\n        onClick={handleClear}\n        className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    )\n  }\n\n  return (\n    <InputBackground\n      size={size}\n      appearance={appearance}\n      theme={theme}\n      className={cn('relative', 'w-auto', className)}\n    >\n      <InputText\n        ref={composedInputRef}\n        size={size}\n        type=\"search\"\n        {...rest}\n        value={currentValue}\n        onChange={handleOnChange}\n        className={cn(\n          size === 'sm' ? 'pr-8' : 'pr-10',\n          '[&::-webkit-search-decoration]:appearance-none',\n          '[&::-webkit-search-cancel-button]:appearance-none',\n          '[&::-webkit-search-results-button]:appearance-none'\n        )}\n      />\n      {getIcon()}\n    </InputBackground>\n  )\n}\n"],"mappings":";;;;;;;;;;;AA0BA,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;CAAqB;CACzD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,aAAa,QAAQ;EAC1B,IAAI,CAAC,aAAa,QAAQ;CAC5B,EACF;AACF,CAAC;AAED,IAAa,eAAe,EAC1B,KACA,OAAO,MACP,aAAa,YACb,OACA,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,WACmB;CACtB,MAAM,CAAC,YAAY,iBAAiB,eAAe;CACnD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,YAAY;CAG/D,MAAM,eAAe,SAAS;CAC9B,MAAM,aAAa,eAAA,UAAA;CAEnB,MAAM,WAAW,iBAAiB,IAAI;CAEtC,MAAM,mBAAmB,gBACvB,KACA,aACF;CAEA,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAOd,CAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,OACF,CAAC,EAAE,IAAA,EACqB,OAAO,SAAS,EAAE;EAC1C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,KACX,CAAC;EACD,QAAQ,cAAc,GAAG;EACzB,QAAQ,MAAM;EACd,gBAAgB,EAAE;CACpB;CAEA,MAAM,kBAAkB,UAA+C;EACrE,WAAW,KAAK;EAEhB,MAAM,WAAW,MAAM,OAAO;EAC9B,cAAc,QAAQ;EACtB,gBAAgB,QAAQ;CAC1B;CAEA,MAAM,gBAAgB;EACpB,IAAI,eAAA,UACF,OACE,oBAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,GACT,QAAQ,OAAO,WAAW,UAC1B,WACA,kBACF;EACD,CAAA;EAGL,OACE,oBAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACR,CAAA;CAEhB;CAEA,OACE,qBAAC,iBAAD;EACQ;EACM;EACL;EACP,WAAW,GAAG,YAAY,UAAU,SAAS;YAJ/C,CAME,oBAAC,WAAD;GACE,KAAK;GACC;GACN,MAAK;GACL,GAAI;GACJ,OAAO;GACP,UAAU;GACV,WAAW,GACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,oDACF;EACD,CAAA,GACA,QAAQ,CACM;;AAErB"}

package/dist/components/section-message/SectionMessage.context.js

@@ -5,26 +5,25 @@ var SectionMessageContext = React$1.createContext(null);
 var SectionMessageProvider = ({ theme = "info", children }) => {
 	const [hasIcon, setHasIcon] = React$1.useState(false);
 	const [hasDismiss, setHasDismiss] = React$1.useState(false);
-	const value = React$1.useMemo(() => ({
-		theme,
-		hasIcon,
-		setHasIcon,
-		hasDismiss,
-		setHasDismiss
-	}), [
-		theme,
-		hasIcon,
-		setHasIcon,
-		hasDismiss,
-		setHasDismiss
-	]);
-	return /* @__PURE__ */ jsx(SectionMessageContext.Provider, {
-		value,
+	return /* @__PURE__ */ jsx(SectionMessageContext, {
+		value: React$1.useMemo(() => ({
+			theme,
+			hasIcon,
+			setHasIcon,
+			hasDismiss,
+			setHasDismiss
+		}), [
+			theme,
+			hasIcon,
+			setHasIcon,
+			hasDismiss,
+			setHasDismiss
+		]),
 		children
 	});
 };
 var useSectionMessageContext = () => {
-	const context = React$1.useContext(SectionMessageContext);
+	const context = React$1.use(SectionMessageContext);
 	if (!context) throw new Error("useSectionMessageContext must be used within a SectionMessageProvider");
 	return context;
 };

package/dist/components/section-message/SectionMessage.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessage.context.js","names":[],"sources":["../../../src/components/section-message/SectionMessage.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { SectionMessageTheme } from './SectionMessage'\n\nexport type SectionMessageContextValue = {\n  theme: SectionMessageTheme\n  hasIcon: boolean\n  setHasIcon: React.Dispatch<React.SetStateAction<boolean>>\n  hasDismiss: boolean\n  setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>\n}\nexport type SectionMessageProviderProps = {\n  theme: SectionMessageTheme\n  children: React.ReactNode\n}\n\nexport const SectionMessageContext =\n  React.createContext<SectionMessageContextValue | null>(null)\n\nexport const SectionMessageProvider = ({\n  theme = 'info',\n  children\n}: SectionMessageProviderProps) => {\n  const [hasIcon, setHasIcon] = React.useState(false)\n  const [hasDismiss, setHasDismiss] = React.useState(false)\n\n  const value = React.useMemo<SectionMessageContextValue>(\n    () => ({ theme, hasIcon, setHasIcon, hasDismiss, setHasDismiss }),\n    [theme, hasIcon, setHasIcon, hasDismiss, setHasDismiss]\n  )\n\n  return (\n    <SectionMessageContext.Provider value={value}>\n      {children}\n    </SectionMessageContext.Provider>\n  )\n}\n\nexport const useSectionMessageContext = (): SectionMessageContextValue => {\n  const context = React.useContext(SectionMessageContext)\n\n  if (!context) {\n    throw new Error(\n      'useSectionMessageContext must be used within a SectionMessageProvider'\n    )\n  }\n\n  return context\n}\n"],"mappings":";;;AAgBA,IAAa,wBACX,QAAM,cAAiD,IAAI;AAE7D,IAAa,0BAA0B,EACrC,QAAQ,QACR,eACiC;CACjC,MAAM,CAAC,SAAS,cAAc,QAAM,SAAS,KAAK;CAClD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,KAAK;CAExD,MAAM,QAAQ,QAAM,eACX;EAAE;EAAO;EAAS;EAAY;EAAY;CAAc,IAC/D;EAAC;EAAO;EAAS;EAAY;EAAY;CAAa,CACxD;CAEA,OACE,oBAAC,sBAAsB,UAAvB;EAAuC;EACpC;CAC6B,CAAA;AAEpC;AAEA,IAAa,iCAA6D;CACxE,MAAM,UAAU,QAAM,WAAW,qBAAqB;CAEtD,IAAI,CAAC,SACH,MAAM,IAAI,MACR,uEACF;CAGF,OAAO;AACT"}
+{"version":3,"file":"SectionMessage.context.js","names":[],"sources":["../../../src/components/section-message/SectionMessage.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { SectionMessageTheme } from './SectionMessage'\n\nexport type SectionMessageContextValue = {\n  theme: SectionMessageTheme\n  hasIcon: boolean\n  setHasIcon: React.Dispatch<React.SetStateAction<boolean>>\n  hasDismiss: boolean\n  setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>\n}\nexport type SectionMessageProviderProps = {\n  theme: SectionMessageTheme\n  children: React.ReactNode\n}\n\nexport const SectionMessageContext =\n  React.createContext<SectionMessageContextValue | null>(null)\n\nexport const SectionMessageProvider = ({\n  theme = 'info',\n  children\n}: SectionMessageProviderProps) => {\n  const [hasIcon, setHasIcon] = React.useState(false)\n  const [hasDismiss, setHasDismiss] = React.useState(false)\n\n  const value = React.useMemo<SectionMessageContextValue>(\n    () => ({ theme, hasIcon, setHasIcon, hasDismiss, setHasDismiss }),\n    [theme, hasIcon, setHasIcon, hasDismiss, setHasDismiss]\n  )\n\n  return <SectionMessageContext value={value}>{children}</SectionMessageContext>\n}\n\nexport const useSectionMessageContext = (): SectionMessageContextValue => {\n  const context = React.use(SectionMessageContext)\n\n  if (!context) {\n    throw new Error(\n      'useSectionMessageContext must be used within a SectionMessageProvider'\n    )\n  }\n\n  return context\n}\n"],"mappings":";;;AAgBA,IAAa,wBACX,QAAM,cAAiD,IAAI;AAE7D,IAAa,0BAA0B,EACrC,QAAQ,QACR,eACiC;CACjC,MAAM,CAAC,SAAS,cAAc,QAAM,SAAS,KAAK;CAClD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,KAAK;CAOxD,OAAO,oBAAC,uBAAD;EAA8B,OALvB,QAAM,eACX;GAAE;GAAO;GAAS;GAAY;GAAY;EAAc,IAC/D;GAAC;GAAO;GAAS;GAAY;GAAY;EAAa,CAGnB;EAAQ;CAAgC,CAAA;AAC/E;AAEA,IAAa,iCAA6D;CACxE,MAAM,UAAU,QAAM,IAAI,qBAAqB;CAE/C,IAAI,CAAC,SACH,MAAM,IAAI,MACR,uEACF;CAGF,OAAO;AACT"}

package/dist/components/segmented-control/SegmentedControlBadge.js

@@ -10,7 +10,7 @@ var badgeSizeMap = {
 	lg: "sm"
 };
 var SegmentedControlBadge = ({ className, ...rest }) => {
-	const { size } = React$1.useContext(SegmentedControlContext);
+	const { size } = React$1.use(SegmentedControlContext);
 	return /* @__PURE__ */ jsx(Badge, {
 		...rest,
 		size: badgeSizeMap[size],

package/dist/components/segmented-control/SegmentedControlBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlBadge.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlBadge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Badge } from '../badge/Badge'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst badgeSizeMap = {\n  sm: 'xs',\n  md: 'xs',\n  lg: 'sm'\n}\n\nexport const SegmentedControlBadge = ({\n  className,\n  ...rest\n}: Omit<React.ComponentProps<typeof Badge>, 'size'>) => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return (\n    <Badge\n      {...rest}\n      size={badgeSizeMap[size as string]}\n      className={cn('border-none', 'font-normal', className)}\n    />\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,yBAAyB,EACpC,WACA,GAAG,WACmD;CACtD,MAAM,EAAE,SAAS,QAAM,WAAW,uBAAuB;CAEzD,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,MAAM,aAAa;EACnB,WAAW,GAAG,eAAe,eAAe,SAAS;CACtD,CAAA;AAEL"}
+{"version":3,"file":"SegmentedControlBadge.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlBadge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Badge } from '../badge/Badge'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst badgeSizeMap = {\n  sm: 'xs',\n  md: 'xs',\n  lg: 'sm'\n}\n\nexport const SegmentedControlBadge = ({\n  className,\n  ...rest\n}: Omit<React.ComponentProps<typeof Badge>, 'size'>) => {\n  const { size } = React.use(SegmentedControlContext)\n\n  return (\n    <Badge\n      {...rest}\n      size={badgeSizeMap[size as string]}\n      className={cn('border-none', 'font-normal', className)}\n    />\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,yBAAyB,EACpC,WACA,GAAG,WACmD;CACtD,MAAM,EAAE,SAAS,QAAM,IAAI,uBAAuB;CAElD,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,MAAM,aAAa;EACnB,WAAW,GAAG,eAAe,eAAe,SAAS;CACtD,CAAA;AAEL"}

package/dist/components/segmented-control/SegmentedControlDescription.js

@@ -17,7 +17,7 @@ var StyledText = styled(Text, {
 	} }
 }, { enableResponsiveVariants: true });
 var SegmentedControlDescription = (props) => {
-	const { size } = React$1.useContext(SegmentedControlContext);
+	const { size } = React$1.use(SegmentedControlContext);
 	return /* @__PURE__ */ jsx(StyledText, {
 		...props,
 		size

package/dist/components/segmented-control/SegmentedControlDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlDescription.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst StyledText = styled(\n  Text,\n  {\n    base: ['font-body', 'text-text-subtle', 'font-normal'],\n    variants: {\n      size: {\n        sm: ['text-xs', 'leading-[1.6]'],\n        md: ['text-sm', 'leading-[1.53]'],\n        lg: ['text-md', 'leading-normal']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport const SegmentedControlDescription = (\n  props: Omit<React.ComponentProps<typeof StyledText>, 'size'>\n) => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <StyledText {...props} size={size} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,aAAa,OACjB,MACA;CACE,MAAM;EAAC;EAAa;EAAoB;CAAa;CACrD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,eAAe;EAC/B,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;CAClC,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAa,+BACX,UACG;CACH,MAAM,EAAE,SAAS,QAAM,WAAW,uBAAuB;CAEzD,OAAO,oBAAC,YAAD;EAAY,GAAI;EAAa;CAAO,CAAA;AAC7C"}
+{"version":3,"file":"SegmentedControlDescription.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst StyledText = styled(\n  Text,\n  {\n    base: ['font-body', 'text-text-subtle', 'font-normal'],\n    variants: {\n      size: {\n        sm: ['text-xs', 'leading-[1.6]'],\n        md: ['text-sm', 'leading-[1.53]'],\n        lg: ['text-md', 'leading-normal']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport const SegmentedControlDescription = (\n  props: Omit<React.ComponentProps<typeof StyledText>, 'size'>\n) => {\n  const { size } = React.use(SegmentedControlContext)\n\n  return <StyledText {...props} size={size} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,aAAa,OACjB,MACA;CACE,MAAM;EAAC;EAAa;EAAoB;CAAa;CACrD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,eAAe;EAC/B,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;CAClC,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAa,+BACX,UACG;CACH,MAAM,EAAE,SAAS,QAAM,IAAI,uBAAuB;CAElD,OAAO,oBAAC,YAAD;EAAY,GAAI;EAAa;CAAO,CAAA;AAC7C"}

package/dist/components/segmented-control/SegmentedControlHeading.js

@@ -13,7 +13,7 @@ var StyledHeading = styled(Text, {
 	} }
 }, { enableResponsiveVariants: true });
 var SegmentedControlHeading = (props) => {
-	const { size } = React$1.useContext(SegmentedControlContext);
+	const { size } = React$1.use(SegmentedControlContext);
 	return /* @__PURE__ */ jsx(StyledHeading, {
 		...props,
 		size

package/dist/components/segmented-control/SegmentedControlHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlHeading.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst StyledHeading = styled(\n  Text,\n  {\n    base: ['font-body', 'text-text-regular'],\n    variants: {\n      size: {\n        sm: ['text-sm', 'leading-[1.53]'],\n        md: ['text-md', 'leading-normal'],\n        lg: ['text-lg', 'leading-[1.52]']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport const SegmentedControlHeading = (\n  props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n) => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <StyledHeading {...props} size={size} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,OACpB,MACA;CACE,MAAM,CAAC,aAAa,mBAAmB;CACvC,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;CAClC,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAa,2BACX,UACG;CACH,MAAM,EAAE,SAAS,QAAM,WAAW,uBAAuB;CAEzD,OAAO,oBAAC,eAAD;EAAe,GAAI;EAAa;CAAO,CAAA;AAChD"}
+{"version":3,"file":"SegmentedControlHeading.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst StyledHeading = styled(\n  Text,\n  {\n    base: ['font-body', 'text-text-regular'],\n    variants: {\n      size: {\n        sm: ['text-sm', 'leading-[1.53]'],\n        md: ['text-md', 'leading-normal'],\n        lg: ['text-lg', 'leading-[1.52]']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport const SegmentedControlHeading = (\n  props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n) => {\n  const { size } = React.use(SegmentedControlContext)\n\n  return <StyledHeading {...props} size={size} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,OACpB,MACA;CACE,MAAM,CAAC,aAAa,mBAAmB;CACvC,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;CAClC,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAa,2BACX,UACG;CACH,MAAM,EAAE,SAAS,QAAM,IAAI,uBAAuB;CAElD,OAAO,oBAAC,eAAD;EAAe,GAAI;EAAa;CAAO,CAAA;AAChD"}

package/dist/components/segmented-control/SegmentedControlIcon.js

@@ -9,7 +9,7 @@ var sizeMap = {
 	lg: "md"
 };
 var SegmentedControlIcon = (props) => {
-	const { size } = React$1.useContext(SegmentedControlContext);
+	const { size } = React$1.use(SegmentedControlContext);
 	return /* @__PURE__ */ jsx(Icon, {
 		...props,
 		size: sizeMap[size]

package/dist/components/segmented-control/SegmentedControlIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlIcon.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '../icon/Icon'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst sizeMap = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md'\n}\n\nexport const SegmentedControlIcon = (\n  props: Omit<React.ComponentProps<typeof Icon>, 'size'>\n) => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return (\n    <Icon\n      {...(props as React.ComponentProps<typeof Icon>)}\n      size={sizeMap[size as string]}\n    />\n  )\n}\n"],"mappings":";;;;;AAKA,IAAM,UAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,wBACX,UACG;CACH,MAAM,EAAE,SAAS,QAAM,WAAW,uBAAuB;CAEzD,OACE,oBAAC,MAAD;EACE,GAAK;EACL,MAAM,QAAQ;CACf,CAAA;AAEL"}
+{"version":3,"file":"SegmentedControlIcon.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '../icon/Icon'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst sizeMap = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md'\n}\n\nexport const SegmentedControlIcon = (\n  props: Omit<React.ComponentProps<typeof Icon>, 'size'>\n) => {\n  const { size } = React.use(SegmentedControlContext)\n\n  return (\n    <Icon\n      {...(props as React.ComponentProps<typeof Icon>)}\n      size={sizeMap[size as string]}\n    />\n  )\n}\n"],"mappings":";;;;;AAKA,IAAM,UAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,wBACX,UACG;CACH,MAAM,EAAE,SAAS,QAAM,IAAI,uBAAuB;CAElD,OACE,oBAAC,MAAD;EACE,GAAK;EACL,MAAM,QAAQ;CACf,CAAA;AAEL"}

package/dist/components/segmented-control/SegmentedControlItem.js

@@ -64,7 +64,7 @@ var StyledItem = styled(Trigger, {
 	}
 }, { enableResponsiveVariants: true });
 var SegmentedControlItem = ({ ref, children, ...rest }) => {
-	const { size, theme } = React$1.useContext(SegmentedControlContext);
+	const { size, theme } = React$1.use(SegmentedControlContext);
 	return /* @__PURE__ */ jsx(StyledItem, {
 		...rest,
 		theme,

package/dist/components/segmented-control/SegmentedControlItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItem.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst StyledItem = styled(\n  Trigger,\n  {\n    base: [\n      'relative',\n      'bg-transparent',\n      'rounded-md',\n      'z-2',\n      'min-w-35',\n      'border-2',\n      'border-transparent',\n      'cursor-pointer',\n      'select-none',\n      'flex',\n      'flex-col',\n      'items-center',\n      'justify-center',\n      'data-[state=active]:border-2',\n      'data-[state=active]:border-transparent',\n      'data-[state=active]:focus-visible:border-primary-800',\n      'data-[state=active]:focus-visible:shadow-none',\n      'data-[state=active]:font-semibold',\n      'data-[state=active]:shadow-none',\n      'data-[state=active]:text-(--text-bold)',\n      'data-[state=inactive]:font-normal',\n      'data-[state=inactive]:text-grey-900',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'focus-visible:outline-none'\n    ],\n    variants: {\n      theme: {\n        primary: [\n          'data-[state=inactive]:hover:bg-primary-300',\n          'focus-visible:border-primary-800'\n        ],\n        marsh: [\n          'data-[state=inactive]:hover:bg-marsh-300',\n          'focus-visible:border-marsh-800'\n        ]\n      },\n      size: {\n        sm: ['flex-[unset]', 'gap-3', 'px-6', 'py-4'],\n        md: ['flex-1', 'gap-4', 'px-4', 'py-6'],\n        lg: ['flex-1', 'gap-4', 'px-4', 'py-6']\n      }\n    },\n    defaultVariants: {\n      size: 'md',\n      theme: 'primary'\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport const SegmentedControlItem = ({\n  ref,\n  children,\n  ...rest\n}: Omit<React.ComponentProps<typeof StyledItem>, 'size'>) => {\n  const { size, theme } = React.useContext(SegmentedControlContext)\n\n  return (\n    <StyledItem {...rest} theme={theme} size={size} ref={ref}>\n      {children}\n    </StyledItem>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,aAAa,OACjB,SACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,SAAS,CACP,8CACA,kCACF;GACA,OAAO,CACL,4CACA,gCACF;EACF;EACA,MAAM;GACJ,IAAI;IAAC;IAAgB;IAAS;IAAQ;GAAM;GAC5C,IAAI;IAAC;IAAU;IAAS;IAAQ;GAAM;GACtC,IAAI;IAAC;IAAU;IAAS;IAAQ;GAAM;EACxC;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAa,wBAAwB,EACnC,KACA,UACA,GAAG,WACwD;CAC3D,MAAM,EAAE,MAAM,UAAU,QAAM,WAAW,uBAAuB;CAEhE,OACE,oBAAC,YAAD;EAAY,GAAI;EAAa;EAAa;EAAW;EAClD;CACS,CAAA;AAEhB"}
+{"version":3,"file":"SegmentedControlItem.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst StyledItem = styled(\n  Trigger,\n  {\n    base: [\n      'relative',\n      'bg-transparent',\n      'rounded-md',\n      'z-2',\n      'min-w-35',\n      'border-2',\n      'border-transparent',\n      'cursor-pointer',\n      'select-none',\n      'flex',\n      'flex-col',\n      'items-center',\n      'justify-center',\n      'data-[state=active]:border-2',\n      'data-[state=active]:border-transparent',\n      'data-[state=active]:focus-visible:border-primary-800',\n      'data-[state=active]:focus-visible:shadow-none',\n      'data-[state=active]:font-semibold',\n      'data-[state=active]:shadow-none',\n      'data-[state=active]:text-(--text-bold)',\n      'data-[state=inactive]:font-normal',\n      'data-[state=inactive]:text-grey-900',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'focus-visible:outline-none'\n    ],\n    variants: {\n      theme: {\n        primary: [\n          'data-[state=inactive]:hover:bg-primary-300',\n          'focus-visible:border-primary-800'\n        ],\n        marsh: [\n          'data-[state=inactive]:hover:bg-marsh-300',\n          'focus-visible:border-marsh-800'\n        ]\n      },\n      size: {\n        sm: ['flex-[unset]', 'gap-3', 'px-6', 'py-4'],\n        md: ['flex-1', 'gap-4', 'px-4', 'py-6'],\n        lg: ['flex-1', 'gap-4', 'px-4', 'py-6']\n      }\n    },\n    defaultVariants: {\n      size: 'md',\n      theme: 'primary'\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport const SegmentedControlItem = ({\n  ref,\n  children,\n  ...rest\n}: Omit<React.ComponentProps<typeof StyledItem>, 'size'>) => {\n  const { size, theme } = React.use(SegmentedControlContext)\n\n  return (\n    <StyledItem {...rest} theme={theme} size={size} ref={ref}>\n      {children}\n    </StyledItem>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,aAAa,OACjB,SACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,SAAS,CACP,8CACA,kCACF;GACA,OAAO,CACL,4CACA,gCACF;EACF;EACA,MAAM;GACJ,IAAI;IAAC;IAAgB;IAAS;IAAQ;GAAM;GAC5C,IAAI;IAAC;IAAU;IAAS;IAAQ;GAAM;GACtC,IAAI;IAAC;IAAU;IAAS;IAAQ;GAAM;EACxC;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAa,wBAAwB,EACnC,KACA,UACA,GAAG,WACwD;CAC3D,MAAM,EAAE,MAAM,UAAU,QAAM,IAAI,uBAAuB;CAEzD,OACE,oBAAC,YAAD;EAAY,GAAI;EAAa;EAAa;EAAW;EAClD;CACS,CAAA;AAEhB"}