@atom-learning/components 6.9.0 → 6.11.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 clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\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  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 = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\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      emphasis,\n      ...rest\n    },\n    ref\n  ): JSX.Element => {\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      state: externalState || (hasError ? 'error' : undefined),\n      'aria-invalid': externalAriaInvalid || hasError || undefined,\n      className: clsx(\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={clsx(\n            emphasis !== 'bold' && 'border-r-none rounded-r-none'\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\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={clsx(\n            emphasis !== 'bold' && 'border-l-none rounded-l-none'\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\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)\n\nNumberInput.displayName = 'NumberInput'\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 clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\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 = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\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    },\n    ref\n  ): JSX.Element => {\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: clsx(\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={clsx(\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={clsx(\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)\n\nNumberInput.displayName = 'NumberInput'\n"],"mappings":"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"}

package/dist/components/number-input/NumberInputStepper.d.ts

@@ -12,8 +12,9 @@ declare const StyledStepperButton: React.ForwardRefExoticComponent<Omit<Omit<Omi
 }, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../../types/navigatorActions.types").NavigatorActions> & {
     children: React.ReactNode;
     label: string;
-} & Omit<import("../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types/navigatorActions.types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "emphasis" | "fieldAppearance"> & {
+} & Omit<import("../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types/navigatorActions.types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "emphasis" | "fieldAppearance" | "fieldTheme"> & {
     fieldAppearance?: "standard" | "modern" | undefined;
+    fieldTheme?: "grey" | "white" | undefined;
     emphasis?: "bold" | undefined;
 } & {
     as?: React.ElementType;

package/dist/components/number-input/NumberInputStepper.js

@@ -26,6 +26,10 @@ var StyledStepperButton = styled(ActionIcon, {
 				"hover:bg-grey-200!"
 			]
 		},
+		fieldTheme: {
+			white: [],
+			grey: []
+		},
 		emphasis: { bold: [
 			"[&_svg]:text-primary-700",
 			"hover:bg-primary-100!",
@@ -34,18 +38,26 @@ var StyledStepperButton = styled(ActionIcon, {
 			"active:[&_svg]:text-primary-900!"
 		] }
 	},
-	compoundVariants: [{
-		fieldAppearance: "standard",
-		emphasis: "bold",
-		class: ["bg-white", "border-primary-800!"]
-	}, {
-		fieldAppearance: "modern",
-		emphasis: "bold",
-		class: ["bg-white!", "hover:bg-primary-100!"]
-	}]
+	compoundVariants: [
+		{
+			fieldAppearance: "modern",
+			fieldTheme: "white",
+			class: ["bg-white"]
+		},
+		{
+			fieldAppearance: "standard",
+			emphasis: "bold",
+			class: ["bg-white", "border-primary-800!"]
+		},
+		{
+			fieldAppearance: "modern",
+			emphasis: "bold",
+			class: ["bg-white!", "hover:bg-primary-100!"]
+		}
+	]
 });
 var NumberInputStepper = React$1.forwardRef((props, forwardedRef) => {
-	const { icon, disabledTooltipContent, showTooltip, fieldAppearance = "standard", ...rest } = props;
+	const { icon, disabledTooltipContent, showTooltip, fieldAppearance = "standard", fieldTheme, ...rest } = props;
 	/**
 	* Focus has been removed from the button
 	* as the increment and decrement buttons should be keyboard accessible via arrow keys.
@@ -59,6 +71,7 @@ var NumberInputStepper = React$1.forwardRef((props, forwardedRef) => {
 		tabIndex: -1,
 		appearance: "outline",
 		fieldAppearance,
+		fieldTheme,
 		ref: forwardedRef,
 		...rest
 	}, /* @__PURE__ */ React$1.createElement(Icon, { is: icon })))), showTooltip && /* @__PURE__ */ React$1.createElement(Tooltip.Content, null, disabledTooltipContent));

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInputStepper.js","names":[],"sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Tooltip } from '../tooltip/Tooltip'\n\nconst StyledStepperButton = styled(ActionIcon, {\n  base: [\n    'rounded-md',\n    'z-1',\n    'h-full!',\n    'hover:[&_svg]:text-grey-800',\n    'hover:bg-grey-100',\n    '[&_svg]:text-grey-700',\n    'active:[&_svg]:text-grey-900',\n    'active:bg-grey-200',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    fieldAppearance: {\n      standard: ['bg-white', 'border-grey-800!'],\n      modern: ['bg-grey-100', 'border-grey-100!', 'hover:bg-grey-200!']\n    },\n    emphasis: {\n      bold: [\n        '[&_svg]:text-primary-700',\n        'hover:bg-primary-100!',\n        'hover:[&_svg]:text-primary-800!',\n        'active:bg-primary-200!',\n        'active:[&_svg]:text-primary-900!'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      fieldAppearance: 'standard',\n      emphasis: 'bold',\n      class: ['bg-white', 'border-primary-800!']\n    },\n    {\n      fieldAppearance: 'modern',\n      emphasis: 'bold',\n      class: ['bg-white!', 'hover:bg-primary-100!']\n    }\n  ]\n})\n\ntype NumberInputStepperProps = Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'children'\n> &\n  Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n    icon: React.FC<React.SVGProps<SVGSVGElement>>\n    showTooltip?: boolean\n    disabledTooltipContent?: string\n  }\n\nexport const NumberInputStepper = React.forwardRef<\n  HTMLButtonElement,\n  NumberInputStepperProps\n>((props, forwardedRef) => {\n  const {\n    icon,\n    disabledTooltipContent,\n    showTooltip,\n    fieldAppearance = 'standard',\n    ...rest\n  } = props\n\n  /**\n   * Focus has been removed from the button\n   * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n   * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n   */\n  return (\n    <Tooltip>\n      <Tooltip.Trigger asChild>\n        <span className=\"z-1\" tabIndex={-1}>\n          <StyledStepperButton\n            hasTooltip={false}\n            tabIndex={-1}\n            appearance=\"outline\"\n            fieldAppearance={fieldAppearance}\n            ref={forwardedRef}\n            {...rest}\n          >\n            <Icon is={icon} />\n          </StyledStepperButton>\n        </span>\n      </Tooltip.Trigger>\n      {showTooltip && (\n        <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n      )}\n    </Tooltip>\n  )\n})\n"],"mappings":";;;;;;AAQA,IAAM,sBAAsB,OAAO,YAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,iBAAiB;GACf,UAAU,CAAC,YAAY,mBAAmB;GAC1C,QAAQ;IAAC;IAAe;IAAoB;IAAqB;GAClE;EACD,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACD,kBAAkB,CAChB;EACE,iBAAiB;EACjB,UAAU;EACV,OAAO,CAAC,YAAY,sBAAsB;EAC3C,EACD;EACE,iBAAiB;EACjB,UAAU;EACV,OAAO,CAAC,aAAa,wBAAwB;EAC9C,CACF;CACF,CAAC;AAYF,IAAa,qBAAqB,QAAM,YAGrC,OAAO,iBAAiB;CACzB,MAAM,EACJ,MACA,wBACA,aACA,kBAAkB,YAClB,GAAG,SACD;;;;;;AAOJ,QACE,wBAAA,cAAC,SAAA,MACC,wBAAA,cAAC,QAAQ,SAAT,EAAiB,SAAA,MAaC,EAZhB,wBAAA,cAAC,QAAD;EAAM,WAAU;EAAM,UAAU;EAWzB,EAVL,wBAAA,cAAC,qBAAD;EACE,YAAY;EACZ,UAAU;EACV,YAAW;EACM;EACjB,KAAK;EACL,GAAI;EAGgB,EADpB,wBAAA,cAAC,MAAD,EAAM,IAAI,MAAQ,CAAA,CACE,CACjB,CACS,EACjB,eACC,wBAAA,cAAC,QAAQ,SAAA,MAAS,uBAAyC,CAErD;EAEZ"}
+{"version":3,"file":"NumberInputStepper.js","names":[],"sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Tooltip } from '../tooltip/Tooltip'\n\nconst StyledStepperButton = styled(ActionIcon, {\n  base: [\n    'rounded-md',\n    'z-1',\n    'h-full!',\n    'hover:[&_svg]:text-grey-800',\n    'hover:bg-grey-100',\n    '[&_svg]:text-grey-700',\n    'active:[&_svg]:text-grey-900',\n    'active:bg-grey-200',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    fieldAppearance: {\n      standard: ['bg-white', 'border-grey-800!'],\n      modern: ['bg-grey-100', 'border-grey-100!', 'hover:bg-grey-200!']\n    },\n    fieldTheme: {\n      white: [],\n      grey: []\n    },\n    emphasis: {\n      bold: [\n        '[&_svg]:text-primary-700',\n        'hover:bg-primary-100!',\n        'hover:[&_svg]:text-primary-800!',\n        'active:bg-primary-200!',\n        'active:[&_svg]:text-primary-900!'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      fieldAppearance: 'modern',\n      fieldTheme: 'white',\n      class: ['bg-white']\n    },\n    {\n      fieldAppearance: 'standard',\n      emphasis: 'bold',\n      class: ['bg-white', 'border-primary-800!']\n    },\n    {\n      fieldAppearance: 'modern',\n      emphasis: 'bold',\n      class: ['bg-white!', 'hover:bg-primary-100!']\n    }\n  ]\n})\n\ntype NumberInputStepperProps = Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'children'\n> &\n  Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n    icon: React.FC<React.SVGProps<SVGSVGElement>>\n    showTooltip?: boolean\n    disabledTooltipContent?: string\n  }\n\nexport const NumberInputStepper = React.forwardRef<\n  HTMLButtonElement,\n  NumberInputStepperProps\n>((props, forwardedRef) => {\n  const {\n    icon,\n    disabledTooltipContent,\n    showTooltip,\n    fieldAppearance = 'standard',\n    fieldTheme,\n    ...rest\n  } = props\n\n  /**\n   * Focus has been removed from the button\n   * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n   * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n   */\n  return (\n    <Tooltip>\n      <Tooltip.Trigger asChild>\n        <span className=\"z-1\" tabIndex={-1}>\n          <StyledStepperButton\n            hasTooltip={false}\n            tabIndex={-1}\n            appearance=\"outline\"\n            fieldAppearance={fieldAppearance}\n            fieldTheme={fieldTheme}\n            ref={forwardedRef}\n            {...rest}\n          >\n            <Icon is={icon} />\n          </StyledStepperButton>\n        </span>\n      </Tooltip.Trigger>\n      {showTooltip && (\n        <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n      )}\n    </Tooltip>\n  )\n})\n"],"mappings":";;;;;;AAQA,IAAM,sBAAsB,OAAO,YAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,iBAAiB;GACf,UAAU,CAAC,YAAY,mBAAmB;GAC1C,QAAQ;IAAC;IAAe;IAAoB;IAAqB;GAClE;EACD,YAAY;GACV,OAAO,EAAE;GACT,MAAM,EAAE;GACT;EACD,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACD,kBAAkB;EAChB;GACE,iBAAiB;GACjB,YAAY;GACZ,OAAO,CAAC,WAAW;GACpB;EACD;GACE,iBAAiB;GACjB,UAAU;GACV,OAAO,CAAC,YAAY,sBAAsB;GAC3C;EACD;GACE,iBAAiB;GACjB,UAAU;GACV,OAAO,CAAC,aAAa,wBAAwB;GAC9C;EACF;CACF,CAAC;AAYF,IAAa,qBAAqB,QAAM,YAGrC,OAAO,iBAAiB;CACzB,MAAM,EACJ,MACA,wBACA,aACA,kBAAkB,YAClB,YACA,GAAG,SACD;;;;;;AAOJ,QACE,wBAAA,cAAC,SAAA,MACC,wBAAA,cAAC,QAAQ,SAAT,EAAiB,SAAA,MAcC,EAbhB,wBAAA,cAAC,QAAD;EAAM,WAAU;EAAM,UAAU;EAYzB,EAXL,wBAAA,cAAC,qBAAD;EACE,YAAY;EACZ,UAAU;EACV,YAAW;EACM;EACL;EACZ,KAAK;EACL,GAAI;EAGgB,EADpB,wBAAA,cAAC,MAAD,EAAM,IAAI,MAAQ,CAAA,CACE,CACjB,CACS,EACjB,eACC,wBAAA,cAAC,QAAQ,SAAA,MAAS,uBAAyC,CAErD;EAEZ"}

package/dist/components/number-input-field/NumberInputField.d.ts

@@ -14,6 +14,6 @@ export interface NumberInputFieldProps extends NumberInputProps {
     validation?: ValidationOptions;
 }
 export declare const NumberInputField: {
-    ({ className, defaultValue, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, ...remainingProps }: NumberInputFieldProps): React.JSX.Element;
+    ({ className, defaultValue, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, theme, ...remainingProps }: NumberInputFieldProps): React.JSX.Element;
     displayName: string;
 };

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

@@ -5,7 +5,7 @@ import { NumberInput } from "../number-input/NumberInput.js";
 import * as React$1 from "react";
 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, ...remainingProps }) => {
+var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, theme, ...remainingProps }) => {
 	const { control } = useFormContext();
 	const context = useFormCustomContext();
 	const { field: { ref, onChange, value: innerValue, name: innerName } } = useController({
@@ -16,6 +16,7 @@ var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt,
 	});
 	const { error } = useFieldError(name);
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	React$1.useEffect(() => {
 		if (typeof value !== "undefined") onChange(value);
 	}, [value]);
@@ -44,6 +45,7 @@ var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt,
 		},
 		value: innerValue,
 		appearance: formAppearance,
+		theme: formTheme,
 		...remainingProps
 	}));
 };

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 '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { ValidationOptions } from '~/components/form/validation'\n\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  ...remainingProps\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\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        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"mappings":";;;;;;;AAqBA,IAAa,oBAAoB,EAC/B,WACA,eAAe,GACf,WACA,OACA,QACA,aACA,OACA,MACA,YACA,eACA,YACA,GAAG,qBACwB;CAC3B,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC;CACF,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,iBAAiB,SAAS,cAAc;AAE9C,SAAM,gBAAgB;AAEpB,MAAI,OAAO,UAAU,YAAa,UAAS,MAAM;IAChD,CAAC,MAAM,CAAC;AAEX,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAgBC,EAdb,wBAAA,cAAC,aAAD;EACE,IAAI;EACJ,MAAM;EACD;EACL,GAAK,SAAS;GAAE,OAAO;GAAS,gBAAgB;GAAM;EACxC;EACd,gBAAgB,aAAa;AAC3B,YAAS,SAAS;AAClB,mBAAgB,SAAS;;EAE3B,OAAO;EACP,YAAY;EACZ,GAAI;EACJ,CAAA,CACW;;AAInB,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 '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { ValidationOptions } from '~/components/form/validation'\n\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  ...remainingProps\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        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"mappings":";;;;;;;AAqBA,IAAa,oBAAoB,EAC/B,WACA,eAAe,GACf,WACA,OACA,QACA,aACA,OACA,MACA,YACA,eACA,YACA,OACA,GAAG,qBACwB;CAC3B,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC;CACF,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,SAAM,gBAAgB;AAEpB,MAAI,OAAO,UAAU,YAAa,UAAS,MAAM;IAChD,CAAC,MAAM,CAAC;AAEX,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAiBC,EAfb,wBAAA,cAAC,aAAD;EACE,IAAI;EACJ,MAAM;EACD;EACL,GAAK,SAAS;GAAE,OAAO;GAAS,gBAAgB;GAAM;EACxC;EACd,gBAAgB,aAAa;AAC3B,YAAS,SAAS;AAClB,mBAAgB,SAAS;;EAE3B,OAAO;EACP,YAAY;EACZ,OAAO;EACP,GAAI;EACJ,CAAA,CACW;;AAInB,iBAAiB,cAAc"}

package/dist/components/password-field/PasswordField.d.ts

@@ -5,7 +5,7 @@ type PasswordFieldProps = React.ComponentProps<typeof PasswordInput> & Omit<Fiel
     label?: string;
 };
 export declare const PasswordField: {
-    ({ className, hideLabel, label, name, prompt, description, validation, appearance, ...remainingProps }: PasswordFieldProps): React.JSX.Element;
+    ({ className, hideLabel, label, name, prompt, description, validation, appearance, theme, ...remainingProps }: PasswordFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/password-field/PasswordField.js

@@ -6,12 +6,13 @@ import clsx from "clsx";
 import * as React$1 from "react";
 import { useFormContext } from "react-hook-form";
 //#region src/components/password-field/PasswordField.tsx
-var PasswordField = ({ className, hideLabel, label = "Password", name, prompt = void 0, description, validation, appearance, ...remainingProps }) => {
+var PasswordField = ({ className, hideLabel, label = "Password", name, prompt = void 0, description, validation, appearance, theme, ...remainingProps }) => {
 	const { register } = useFormContext();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
 		description,
 		error,
@@ -28,6 +29,7 @@ var PasswordField = ({ className, hideLabel, label = "Password", name, prompt =
 		id: name,
 		ref,
 		appearance: formAppearance,
+		theme: formTheme,
 		...error !== void 0 && { state: "error" },
 		...remainingProps
 	}));

package/dist/components/password-field/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":[],"sources":["../../../src/components/password-field/PasswordField.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { PasswordInput } from '~/components/password-input/PasswordInput'\n\ntype PasswordFieldProps = React.ComponentProps<typeof PasswordInput> &\n  Omit<FieldElementWrapperProps, 'label'> & {\n    label?: string\n  }\n\nexport const PasswordField = ({\n  className,\n  hideLabel,\n  label = 'Password',\n  name,\n  prompt = undefined,\n  description,\n  validation,\n  appearance,\n  ...remainingProps\n}: PasswordFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n\n  return (\n    <FieldWrapper\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      className={clsx(className, 'relative')}\n    >\n      <PasswordInput\n        autoComplete=\"current-password\"\n        name={name}\n        id={name}\n        ref={ref}\n        appearance={formAppearance}\n        {...(error !== undefined && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nPasswordField.displayName = 'PasswordField'\n"],"mappings":";;;;;;;;AAiBA,IAAa,iBAAiB,EAC5B,WACA,WACA,QAAQ,YACR,MACA,SAAS,KAAA,GACT,aACA,YACA,YACA,GAAG,qBACqB;CACxB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;AAE9C,QACE,wBAAA,cAAC,cAAD;EACe;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EACZ,WAAW,KAAK,WAAW,WAAW;EAWzB,EATb,wBAAA,cAAC,eAAD;EACE,cAAa;EACP;EACN,IAAI;EACC;EACL,YAAY;EACZ,GAAK,UAAU,KAAA,KAAa,EAAE,OAAO,SAAS;EAC9C,GAAI;EACJ,CAAA,CACW;;AAInB,cAAc,cAAc"}
+{"version":3,"file":"PasswordField.js","names":[],"sources":["../../../src/components/password-field/PasswordField.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { PasswordInput } from '~/components/password-input/PasswordInput'\n\ntype PasswordFieldProps = React.ComponentProps<typeof PasswordInput> &\n  Omit<FieldElementWrapperProps, 'label'> & {\n    label?: string\n  }\n\nexport const PasswordField = ({\n  className,\n  hideLabel,\n  label = 'Password',\n  name,\n  prompt = undefined,\n  description,\n  validation,\n  appearance,\n  theme,\n  ...remainingProps\n}: PasswordFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\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      className={clsx(className, 'relative')}\n    >\n      <PasswordInput\n        autoComplete=\"current-password\"\n        name={name}\n        id={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error !== undefined && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nPasswordField.displayName = 'PasswordField'\n"],"mappings":";;;;;;;;AAiBA,IAAa,iBAAiB,EAC5B,WACA,WACA,QAAQ,YACR,MACA,SAAS,KAAA,GACT,aACA,YACA,YACA,OACA,GAAG,qBACqB;CACxB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,wBAAA,cAAC,cAAD;EACe;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EACZ,WAAW,KAAK,WAAW,WAAW;EAYzB,EAVb,wBAAA,cAAC,eAAD;EACE,cAAa;EACP;EACN,IAAI;EACC;EACL,YAAY;EACZ,OAAO;EACP,GAAK,UAAU,KAAA,KAAa,EAAE,OAAO,SAAS;EAC9C,GAAI;EACJ,CAAA,CACW;;AAInB,cAAc,cAAc"}

package/dist/components/search-field/SearchField.d.ts

@@ -3,7 +3,7 @@ import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWr
 import { SearchInputProps } from '../../components/search-input/SearchInput';
 type SearchFieldProps = SearchInputProps & FieldElementWrapperProps;
 export declare const SearchField: {
-    ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }: SearchFieldProps): React.JSX.Element;
+    ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }: SearchFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/search-field/SearchField.js

@@ -5,12 +5,13 @@ import { SearchInput } from "../search-input/SearchInput.js";
 import * as React$1 from "react";
 import { useFormContext } from "react-hook-form";
 //#region src/components/search-field/SearchField.tsx
-var SearchField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }) => {
+var SearchField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }) => {
 	const { register } = useFormContext();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
 		className,
 		description,
@@ -26,6 +27,7 @@ var SearchField = ({ className, hideLabel, label, name, validation, prompt, desc
 		name,
 		ref,
 		appearance: formAppearance,
+		theme: formTheme,
 		...error && { state: "error" },
 		...remainingProps
 	}));

package/dist/components/search-field/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","names":[],"sources":["../../../src/components/search-field/SearchField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport {\n  SearchInput,\n  SearchInputProps\n} from '~/components/search-input/SearchInput'\n\ntype SearchFieldProps = SearchInputProps & FieldElementWrapperProps\n\nexport const SearchField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: SearchFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\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      <SearchInput\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nSearchField.displayName = 'SearchField'\n"],"mappings":";;;;;;;AAgBA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,GAAG,qBACmB;CACtB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;AAE9C,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAUC,EARb,wBAAA,cAAC,aAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,CAAA,CACW;;AAInB,YAAY,cAAc"}
+{"version":3,"file":"SearchField.js","names":[],"sources":["../../../src/components/search-field/SearchField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport {\n  SearchInput,\n  SearchInputProps\n} from '~/components/search-input/SearchInput'\n\ntype SearchFieldProps = SearchInputProps & FieldElementWrapperProps\n\nexport const SearchField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  theme,\n  ...remainingProps\n}: SearchFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\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      <SearchInput\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nSearchField.displayName = 'SearchField'\n"],"mappings":";;;;;;;AAgBA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,OACA,GAAG,qBACmB;CACtB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAWC,EATb,wBAAA,cAAC,aAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,OAAO;EACP,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,CAAA,CACW;;AAInB,YAAY,cAAc"}

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

@@ -25,7 +25,7 @@ var StyledIcon = styled(Icon, {
 		lg: ["right-2.5", "size-5"]
 	} }
 });
-var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...remainingProps }, ref) => {
+var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", theme, className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...remainingProps }, ref) => {
 	const [inputElRef, setInputElRef] = useCallbackRef();
 	const [innerValue, setInnerValue] = React$1.useState(defaultValue);
 	const [activeIcon, setActiveIcon] = React$1.useState(defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
@@ -69,6 +69,7 @@ var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", cl
 	return /* @__PURE__ */ React$1.createElement(InputBackground, {
 		size,
 		appearance,
+		theme,
 		className: clsx("relative", "w-auto", className)
 	}, /* @__PURE__ */ React$1.createElement(InputText, {
 		ref: setInputElRef,

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 clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport { Input, InputBackground, InputText } from '~/components/input/Input'\nimport { styled } from '~/styled'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\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 = React.forwardRef<HTMLInputElement, SearchInputProps>(\n  (\n    {\n      size = 'md',\n      appearance = 'standard',\n      className,\n      value,\n      defaultValue = '',\n      onValueChange,\n      clearText = 'Clear',\n      onChange,\n      ...remainingProps\n    },\n    ref\n  ) => {\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={clsx(\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        className={clsx('relative', 'w-auto', className)}\n      >\n        <InputText\n          ref={setInputElRef}\n          size={size}\n          type=\"search\"\n          {...remainingProps}\n          value={innerValue}\n          onChange={handleOnChange}\n          className={clsx(\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)\n\nSearchInput.displayName = 'SearchInput'\n"],"mappings":";;;;;;;;;;AAqBA,IAAK,aAAL,yBAAA,YAAA;AACE,YAAA,YAAA;AACA,YAAA,WAAA;;EAFG,cAAA,EAAA,CAGJ;AAED,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;EAAsB;CAC1D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,aAAa,SAAS;EAC3B,IAAI,CAAC,aAAa,SAAS;EAC5B,EACF;CACF,CAAC;AAEF,IAAa,cAAc,QAAM,YAE7B,EACE,OAAO,MACP,aAAa,YACb,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,kBAEL,QACG;CACH,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;CACpD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,aAAa;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SACxC,eAAe,WAAW,QAAQ,WAAW,OAC9C;AACD,SAAM,gBAAgB;AACpB,MAAI,OAAO,UAAU,YAAa;AAClC,gBAAc,MAAM;AACpB,gBAAc,QAAQ,WAAW,QAAQ,WAAW,OAAO;IAC1D,CAAC,MAAM,CAAC;CAEX,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,SAAM,oBAAoB,WAAW,WAAW,QAA4B;CAE5E,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;AAOd,GAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,QACD,EAAE,MACqB,OAAO,SAAS,GAAG;EAC3C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,MACV,CAAC;AACF,UAAQ,cAAc,IAAI;AAC1B,UAAQ,OAAO;AACf,kBAAgB,GAAG;;CAGrB,MAAM,kBAAkB,UAA+C;AACrE,aAAW,MAAM;EAEjB,MAAM,WAAW,MAAM,OAAO;AAC9B,gBAAc,SAAS;AACvB,kBAAgB,SAAS;AACzB,gBAAc,WAAW,WAAW,QAAQ,WAAW,OAAO;;CAGhE,MAAM,gBAAgB;AACpB,MAAI,eAAe,WAAW,OAC5B,QACE,wBAAA,cAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,KACT,QAAQ,OAAO,WAAW,UAC1B,WACA,mBACD;GACD,CAAA;AAGN,SACE,wBAAA,cAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;GAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR;;AAIjB,QACE,wBAAA,cAAC,iBAAD;EACQ;EACM;EACZ,WAAW,KAAK,YAAY,UAAU,UAAU;EAiBhC,EAfhB,wBAAA,cAAC,WAAD;EACE,KAAK;EACC;EACN,MAAK;EACL,GAAI;EACJ,OAAO;EACP,UAAU;EACV,WAAW,KACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,qDACD;EACD,CAAA,EACD,SAAS,CACM;EAGvB;AAED,YAAY,cAAc"}
+{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport { Input, InputBackground, InputText } from '~/components/input/Input'\nimport { styled } from '~/styled'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\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 = React.forwardRef<HTMLInputElement, SearchInputProps>(\n  (\n    {\n      size = 'md',\n      appearance = 'standard',\n      theme,\n      className,\n      value,\n      defaultValue = '',\n      onValueChange,\n      clearText = 'Clear',\n      onChange,\n      ...remainingProps\n    },\n    ref\n  ) => {\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={clsx(\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={clsx('relative', 'w-auto', className)}\n      >\n        <InputText\n          ref={setInputElRef}\n          size={size}\n          type=\"search\"\n          {...remainingProps}\n          value={innerValue}\n          onChange={handleOnChange}\n          className={clsx(\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)\n\nSearchInput.displayName = 'SearchInput'\n"],"mappings":";;;;;;;;;;AAqBA,IAAK,aAAL,yBAAA,YAAA;AACE,YAAA,YAAA;AACA,YAAA,WAAA;;EAFG,cAAA,EAAA,CAGJ;AAED,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;EAAsB;CAC1D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,aAAa,SAAS;EAC3B,IAAI,CAAC,aAAa,SAAS;EAC5B,EACF;CACF,CAAC;AAEF,IAAa,cAAc,QAAM,YAE7B,EACE,OAAO,MACP,aAAa,YACb,OACA,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,kBAEL,QACG;CACH,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;CACpD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,aAAa;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SACxC,eAAe,WAAW,QAAQ,WAAW,OAC9C;AACD,SAAM,gBAAgB;AACpB,MAAI,OAAO,UAAU,YAAa;AAClC,gBAAc,MAAM;AACpB,gBAAc,QAAQ,WAAW,QAAQ,WAAW,OAAO;IAC1D,CAAC,MAAM,CAAC;CAEX,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,SAAM,oBAAoB,WAAW,WAAW,QAA4B;CAE5E,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;AAOd,GAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,QACD,EAAE,MACqB,OAAO,SAAS,GAAG;EAC3C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,MACV,CAAC;AACF,UAAQ,cAAc,IAAI;AAC1B,UAAQ,OAAO;AACf,kBAAgB,GAAG;;CAGrB,MAAM,kBAAkB,UAA+C;AACrE,aAAW,MAAM;EAEjB,MAAM,WAAW,MAAM,OAAO;AAC9B,gBAAc,SAAS;AACvB,kBAAgB,SAAS;AACzB,gBAAc,WAAW,WAAW,QAAQ,WAAW,OAAO;;CAGhE,MAAM,gBAAgB;AACpB,MAAI,eAAe,WAAW,OAC5B,QACE,wBAAA,cAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,KACT,QAAQ,OAAO,WAAW,UAC1B,WACA,mBACD;GACD,CAAA;AAGN,SACE,wBAAA,cAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;GAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR;;AAIjB,QACE,wBAAA,cAAC,iBAAD;EACQ;EACM;EACL;EACP,WAAW,KAAK,YAAY,UAAU,UAAU;EAiBhC,EAfhB,wBAAA,cAAC,WAAD;EACE,KAAK;EACC;EACN,MAAK;EACL,GAAI;EACJ,OAAO;EACP,UAAU;EACV,WAAW,KACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,qDACD;EACD,CAAA,EACD,SAAS,CACM;EAGvB;AAED,YAAY,cAAc"}

package/dist/components/select/Select.d.ts

@@ -2,9 +2,10 @@ import * as React from 'react';
 import { Override } from '../../utilities/types';
 declare const StyledSelect: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
     ref?: ((instance: HTMLSelectElement | null) => void) | React.RefObject<HTMLSelectElement> | null | undefined;
-}, "appearance" | "size" | "state"> & {
+}, "appearance" | "size" | "theme" | "state"> & {
     size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
     state?: ("error" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "error">>) | undefined;
+    theme?: ("grey" | "white" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "grey" | "white">>) | undefined;
     appearance?: ("standard" | "modern" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "standard" | "modern">>) | undefined;
 } & {
     as?: React.ElementType;

package/dist/components/select/Select.js

@@ -48,6 +48,10 @@ var StyledSelect = styled("select", {
 			]
 		},
 		state: { error: [] },
+		theme: {
+			white: [],
+			grey: []
+		},
 		appearance: {
 			standard: [
 				"bg-white",
@@ -67,15 +71,28 @@ var StyledSelect = styled("select", {
 			]
 		}
 	},
-	compoundVariants: [{
-		state: "error",
-		appearance: "standard",
-		class: ["border-danger"]
-	}, {
-		state: "error",
-		appearance: "modern",
-		class: ["bg-danger-light", "focus:outline-danger"]
-	}]
+	compoundVariants: [
+		{
+			state: "error",
+			appearance: "standard",
+			class: ["border-danger"]
+		},
+		{
+			state: "error",
+			appearance: "modern",
+			class: ["bg-danger-light", "focus:outline-danger"]
+		},
+		{
+			appearance: "modern",
+			theme: "white",
+			class: ["bg-white"]
+		},
+		{
+			appearance: "modern",
+			theme: "grey",
+			class: ["bg-grey-100"]
+		}
+	]
 }, { enabledResponsiveVariants: true });
 var Select = React$1.forwardRef(({ placeholder, children, size = "md", appearance = "standard", ...remainingProps }, ref) => {
 	const props = {

package/dist/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled(\n  'select',\n  {\n    base: [\n      'bg-(image:--bg-chevron)',\n      'appearance-none',\n      '[background-repeat:no-repeat,repeat-x]',\n      'rounded-md',\n      'text-grey-1000',\n      'block',\n      'font-body',\n      'font-normal',\n      'leading-[1.4]',\n      'w-full',\n      'hover:cursor-pointer',\n      '-ms-expand:hidden',\n      'disabled:opacity-30',\n      'disabled:cursor-not-allowed',\n      '*[[disabled]]:opacity-30',\n      '*[[disabled]]:cursor-not-allowed'\n    ],\n    variants: {\n      size: {\n        sm: [\n          'bg-position-[right_--spacing(2)_top_50%,0_0]',\n          'bg-size-[18px_auto,100%]',\n          'text-sm',\n          'h-8',\n          'pl-2',\n          'pr-8'\n        ],\n        md: [\n          'bg-position-[right_--spacing(3)_top_50%,0_0]',\n          'bg-size-[20px_auto,100%]',\n          'text-md',\n          'h-10',\n          'pl-3',\n          'pr-10'\n        ],\n        lg: [\n          'bg-position-[right_--spacing(3)_top_50%,0_0]',\n          'bg-size-[20px_auto,100%]',\n          'text-md',\n          'h-12',\n          'pl-3',\n          'pr-10'\n        ]\n      },\n      state: {\n        error: []\n      },\n      appearance: {\n        standard: [\n          'bg-white',\n          'border',\n          'border-grey-700',\n          'focus:border-primary-800',\n          'focus:outline-none'\n        ],\n        modern: [\n          'bg-grey-100',\n          'border-none',\n          'focus:outline-2',\n          'focus:outline-blue-800',\n          'focus:outline-offset-1',\n          'focus:outline-solid',\n          'focus:z-1'\n        ]\n      }\n    },\n    compoundVariants: [\n      {\n        state: 'error',\n        appearance: 'standard',\n        class: ['border-danger']\n      },\n      {\n        state: 'error',\n        appearance: 'modern',\n        class: ['bg-danger-light', 'focus:outline-danger']\n      }\n    ]\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    as?: never\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n  (\n    {\n      placeholder,\n      children,\n      size = 'md',\n      appearance = 'standard',\n      ...remainingProps\n    },\n    ref\n  ) => {\n    // Type assertion needed due to responsive variant size prop compatibility\n    const props: React.ComponentProps<typeof StyledSelect> = {\n      size,\n      appearance,\n      ref,\n      ...remainingProps\n    }\n\n    if (\n      [remainingProps.value, remainingProps.defaultValue].every(\n        (value) => value === undefined\n      )\n    ) {\n      props.defaultValue = ''\n    }\n\n    return (\n      <StyledSelect {...props}>\n        {placeholder && (\n          <option disabled hidden value=\"\">\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n    )\n  }\n)\n\nSelect.displayName = 'Select'\n"],"mappings":";;;AAKA,IAAM,eAAe,OACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACD,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACF;CACD,kBAAkB,CAChB;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,gBAAgB;EACzB,EACD;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,mBAAmB,uBAAuB;EACnD,CACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAgBD,IAAa,SAAS,QAAM,YAExB,EACE,aACA,UACA,OAAO,MACP,aAAa,YACb,GAAG,kBAEL,QACG;CAEH,MAAM,QAAmD;EACvD;EACA;EACA;EACA,GAAG;EACJ;AAED,KACE,CAAC,eAAe,OAAO,eAAe,aAAa,CAAC,OACjD,UAAU,UAAU,KAAA,EACtB,CAED,OAAM,eAAe;AAGvB,QACE,wBAAA,cAAC,cAAiB,OACf,eACC,wBAAA,cAAC,UAAD;EAAQ,UAAA;EAAS,QAAA;EAAO,OAAM;EAErB,EADN,YACM,EAEV,SACY;EAGpB;AAED,OAAO,cAAc"}
+{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled(\n  'select',\n  {\n    base: [\n      'bg-(image:--bg-chevron)',\n      'appearance-none',\n      '[background-repeat:no-repeat,repeat-x]',\n      'rounded-md',\n      'text-grey-1000',\n      'block',\n      'font-body',\n      'font-normal',\n      'leading-[1.4]',\n      'w-full',\n      'hover:cursor-pointer',\n      '-ms-expand:hidden',\n      'disabled:opacity-30',\n      'disabled:cursor-not-allowed',\n      '*[[disabled]]:opacity-30',\n      '*[[disabled]]:cursor-not-allowed'\n    ],\n    variants: {\n      size: {\n        sm: [\n          'bg-position-[right_--spacing(2)_top_50%,0_0]',\n          'bg-size-[18px_auto,100%]',\n          'text-sm',\n          'h-8',\n          'pl-2',\n          'pr-8'\n        ],\n        md: [\n          'bg-position-[right_--spacing(3)_top_50%,0_0]',\n          'bg-size-[20px_auto,100%]',\n          'text-md',\n          'h-10',\n          'pl-3',\n          'pr-10'\n        ],\n        lg: [\n          'bg-position-[right_--spacing(3)_top_50%,0_0]',\n          'bg-size-[20px_auto,100%]',\n          'text-md',\n          'h-12',\n          'pl-3',\n          'pr-10'\n        ]\n      },\n      state: {\n        error: []\n      },\n      theme: {\n        white: [],\n        grey: []\n      },\n      appearance: {\n        standard: [\n          'bg-white',\n          'border',\n          'border-grey-700',\n          'focus:border-primary-800',\n          'focus:outline-none'\n        ],\n        modern: [\n          'bg-grey-100',\n          'border-none',\n          'focus:outline-2',\n          'focus:outline-blue-800',\n          'focus:outline-offset-1',\n          'focus:outline-solid',\n          'focus:z-1'\n        ]\n      }\n    },\n    compoundVariants: [\n      {\n        state: 'error',\n        appearance: 'standard',\n        class: ['border-danger']\n      },\n      {\n        state: 'error',\n        appearance: 'modern',\n        class: ['bg-danger-light', 'focus:outline-danger']\n      },\n      {\n        appearance: 'modern',\n        theme: 'white',\n        class: ['bg-white']\n      },\n      {\n        appearance: 'modern',\n        theme: 'grey',\n        class: ['bg-grey-100']\n      }\n    ]\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    as?: never\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n  (\n    {\n      placeholder,\n      children,\n      size = 'md',\n      appearance = 'standard',\n      ...remainingProps\n    },\n    ref\n  ) => {\n    // Type assertion needed due to responsive variant size prop compatibility\n    const props: React.ComponentProps<typeof StyledSelect> = {\n      size,\n      appearance,\n      ref,\n      ...remainingProps\n    }\n\n    if (\n      [remainingProps.value, remainingProps.defaultValue].every(\n        (value) => value === undefined\n      )\n    ) {\n      props.defaultValue = ''\n    }\n\n    return (\n      <StyledSelect {...props}>\n        {placeholder && (\n          <option disabled hidden value=\"\">\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n    )\n  }\n)\n\nSelect.displayName = 'Select'\n"],"mappings":";;;AAKA,IAAM,eAAe,OACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACD,OAAO;GACL,OAAO,EAAE;GACT,MAAM,EAAE;GACT;EACD,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACF;CACD,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,gBAAgB;GACzB;EACD;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,uBAAuB;GACnD;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,WAAW;GACpB;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,cAAc;GACvB;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAgBD,IAAa,SAAS,QAAM,YAExB,EACE,aACA,UACA,OAAO,MACP,aAAa,YACb,GAAG,kBAEL,QACG;CAEH,MAAM,QAAmD;EACvD;EACA;EACA;EACA,GAAG;EACJ;AAED,KACE,CAAC,eAAe,OAAO,eAAe,aAAa,CAAC,OACjD,UAAU,UAAU,KAAA,EACtB,CAED,OAAM,eAAe;AAGvB,QACE,wBAAA,cAAC,cAAiB,OACf,eACC,wBAAA,cAAC,UAAD;EAAQ,UAAA;EAAS,QAAA;EAAO,OAAM;EAErB,EADN,YACM,EAEV,SACY;EAGpB;AAED,OAAO,cAAc"}

package/dist/components/select-field/SelectField.d.ts

@@ -3,7 +3,7 @@ import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWr
 import { SelectProps } from '../../components/select/Select';
 type SelectFieldProps = SelectProps & FieldElementWrapperProps;
 export declare const SelectField: {
-    ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, ...remainingProps }: SelectFieldProps): React.JSX.Element;
+    ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, theme, ...remainingProps }: SelectFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/select-field/SelectField.js

@@ -5,12 +5,13 @@ import { Select } from "../select/Select.js";
 import * as React$1 from "react";
 import { useFormContext } from "react-hook-form";
 //#region src/components/select-field/SelectField.tsx
-var SelectField = ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, ...remainingProps }) => {
+var SelectField = ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, theme, ...remainingProps }) => {
 	const { register } = useFormContext();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
 		className,
 		description,
@@ -25,6 +26,7 @@ var SelectField = ({ className, hideLabel, children, name, label, validation, pr
 		name,
 		id: name,
 		appearance: formAppearance,
+		theme: formTheme,
 		...remainingProps,
 		ref,
 		...error && { state: "error" }

package/dist/components/select-field/SelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","names":[],"sources":["../../../src/components/select-field/SelectField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { Select, SelectProps } from '~/components/select/Select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n  className,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: SelectFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\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      <Select\n        name={name}\n        id={name}\n        appearance={formAppearance}\n        {...remainingProps}\n        ref={ref}\n        {...(error && { state: 'error' })}\n      >\n        {children}\n      </Select>\n    </FieldWrapper>\n  )\n}\n\nSelectField.displayName = 'SelectField'\n"],"mappings":";;;;;;;AAaA,IAAa,eAAe,EAC1B,WACA,WACA,UACA,MACA,OACA,YACA,QACA,aACA,YACA,GAAG,qBACmB;CACtB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;AAE9C,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAYC,EAVb,wBAAA,cAAC,QAAD;EACQ;EACN,IAAI;EACJ,YAAY;EACZ,GAAI;EACC;EACL,GAAK,SAAS,EAAE,OAAO,SAAS;EAGzB,EADN,SACM,CACI;;AAInB,YAAY,cAAc"}
+{"version":3,"file":"SelectField.js","names":[],"sources":["../../../src/components/select-field/SelectField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { Select, SelectProps } from '~/components/select/Select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n  className,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  appearance,\n  theme,\n  ...remainingProps\n}: SelectFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\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      <Select\n        name={name}\n        id={name}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...remainingProps}\n        ref={ref}\n        {...(error && { state: 'error' })}\n      >\n        {children}\n      </Select>\n    </FieldWrapper>\n  )\n}\n\nSelectField.displayName = 'SelectField'\n"],"mappings":";;;;;;;AAaA,IAAa,eAAe,EAC1B,WACA,WACA,UACA,MACA,OACA,YACA,QACA,aACA,YACA,OACA,GAAG,qBACmB;CACtB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAaC,EAXb,wBAAA,cAAC,QAAD;EACQ;EACN,IAAI;EACJ,YAAY;EACZ,OAAO;EACP,GAAI;EACC;EACL,GAAK,SAAS,EAAE,OAAO,SAAS;EAGzB,EADN,SACM,CACI;;AAInB,YAAY,cAAc"}

package/dist/components/textarea/Textarea.d.ts

@@ -1,18 +1,20 @@
 import * as React from 'react';
 declare const StyledTextarea: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
     ref?: ((instance: HTMLTextAreaElement | null) => void) | React.RefObject<HTMLTextAreaElement> | null | undefined;
-}, "appearance" | "state"> & {
+}, "appearance" | "theme" | "state"> & {
     appearance?: "standard" | "modern" | undefined;
     state?: "error" | undefined;
+    theme?: "grey" | "white" | undefined;
 } & {
     as?: React.ElementType;
 }>;
 export type TextareaProps = React.ComponentProps<typeof StyledTextarea>;
 export declare const Textarea: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
     ref?: ((instance: HTMLTextAreaElement | null) => void) | React.RefObject<HTMLTextAreaElement> | null | undefined;
-}, "appearance" | "state"> & {
+}, "appearance" | "theme" | "state"> & {
     appearance?: "standard" | "modern" | undefined;
     state?: "error" | undefined;
+    theme?: "grey" | "white" | undefined;
 } & {
     as?: React.ElementType;
 }, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/textarea/Textarea.js

@@ -43,18 +43,35 @@ var StyledTextarea = styled("textarea", {
 				"focus-within:z-1"
 			]
 		},
-		state: { error: [] }
+		state: { error: [] },
+		theme: {
+			white: [],
+			grey: []
+		}
 	},
 	defaultVariants: { appearance: "standard" },
-	compoundVariants: [{
-		state: "error",
-		appearance: "standard",
-		class: ["border-danger"]
-	}, {
-		state: "error",
-		appearance: "modern",
-		class: ["bg-danger-light", "focus-within:outline-danger"]
-	}]
+	compoundVariants: [
+		{
+			state: "error",
+			appearance: "standard",
+			class: ["border-danger"]
+		},
+		{
+			state: "error",
+			appearance: "modern",
+			class: ["bg-danger-light", "focus-within:outline-danger"]
+		},
+		{
+			appearance: "modern",
+			theme: "white",
+			class: ["bg-white"]
+		},
+		{
+			appearance: "modern",
+			theme: "grey",
+			class: ["bg-grey-100"]
+		}
+	]
 });
 var Textarea = React$1.forwardRef((props, ref) => /* @__PURE__ */ React$1.createElement(StyledTextarea, {
 	...props,

package/dist/components/textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledTextarea = styled('textarea', {\n  base: [\n    'shadow-none',\n    'appearance-none',\n    'rounded-md',\n    'box-border',\n    'text-grey-1000',\n    'font-body',\n    'font-normal',\n    'text-md',\n    'leading-[1.4]',\n    'm-0',\n    'min-h-24',\n    'px-3',\n    'py-3',\n    'resize-y',\n    'w-full',\n    'disabled:bg-grey-200',\n    'disabled:cursor-not-allowed',\n    'disabled:text-grey-800',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700'\n  ],\n  variants: {\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-800',\n        'focus-within:border-primary-800',\n        'focus-within:outline-none'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1'\n      ]\n    },\n    state: {\n      error: []\n    }\n  },\n  defaultVariants: {\n    appearance: 'standard'\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    }\n  ]\n})\n\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (props, ref) => <StyledTextarea {...props} ref={ref} />\n)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;AAIA,IAAM,iBAAiB,OAAO,YAAY;CACxC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACF;CACD,iBAAiB,EACf,YAAY,YACb;CACD,kBAAkB,CAChB;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,gBAAgB;EACzB,EACD;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,mBAAmB,8BAA8B;EAC1D,CACF;CACF,CAAC;AAIF,IAAa,WAAW,QAAM,YAC3B,OAAO,QAAQ,wBAAA,cAAC,gBAAD;CAAgB,GAAI;CAAY;CAAO,CAAA,CACxD;AAED,SAAS,cAAc"}
+{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledTextarea = styled('textarea', {\n  base: [\n    'shadow-none',\n    'appearance-none',\n    'rounded-md',\n    'box-border',\n    'text-grey-1000',\n    'font-body',\n    'font-normal',\n    'text-md',\n    'leading-[1.4]',\n    'm-0',\n    'min-h-24',\n    'px-3',\n    'py-3',\n    'resize-y',\n    'w-full',\n    'disabled:bg-grey-200',\n    'disabled:cursor-not-allowed',\n    'disabled:text-grey-800',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700'\n  ],\n  variants: {\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-800',\n        'focus-within:border-primary-800',\n        'focus-within:outline-none'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1'\n      ]\n    },\n    state: {\n      error: []\n    },\n    theme: {\n      white: [],\n      grey: []\n    }\n  },\n  defaultVariants: {\n    appearance: 'standard'\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    },\n    {\n      appearance: 'modern',\n      theme: 'white',\n      class: ['bg-white']\n    },\n    {\n      appearance: 'modern',\n      theme: 'grey',\n      class: ['bg-grey-100']\n    }\n  ]\n})\n\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (props, ref) => <StyledTextarea {...props} ref={ref} />\n)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;AAIA,IAAM,iBAAiB,OAAO,YAAY;CACxC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACD,OAAO;GACL,OAAO,EAAE;GACT,MAAM,EAAE;GACT;EACF;CACD,iBAAiB,EACf,YAAY,YACb;CACD,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,gBAAgB;GACzB;EACD;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,8BAA8B;GAC1D;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,WAAW;GACpB;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,cAAc;GACvB;EACF;CACF,CAAC;AAIF,IAAa,WAAW,QAAM,YAC3B,OAAO,QAAQ,wBAAA,cAAC,gBAAD;CAAgB,GAAI;CAAY;CAAO,CAAA,CACxD;AAED,SAAS,cAAc"}

package/dist/components/textarea-field/TextareaField.d.ts

@@ -3,7 +3,7 @@ import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWr
 import { TextareaProps } from '../../components/textarea/Textarea';
 type TextareaFieldProps = TextareaProps & FieldElementWrapperProps;
 export declare const TextareaField: {
-    ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }: TextareaFieldProps): React.JSX.Element;
+    ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }: TextareaFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};