@mrshmllw/smores-react 16.2.13 → 16.2.15

package/dist/TextInput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FocusEvent,\n  AnimationEvent,\n  FormEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLInputAutoCompleteAttribute,\n} from 'react'\n\nimport { Box } from '../Box'\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport {\n  Input,\n  InputLeadingIconContainer,\n  StyledFrontIcon,\n  StyledTrailingIcon,\n} from '../fields/components/CommonInput'\nimport { useUniqueId } from '../utils/id'\nimport { useTheme } from 'styled-components'\n\ninterface Props extends CommonFieldProps {\n  type?: 'text' | 'email' | 'password' | 'time' | 'date' | 'tel'\n  placeholder: string\n  name?: string\n  value: string\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  /**\n   * Triggers after animation end (animation duration is 2s),\n   * the animation starts when a user selects or hovers over an autofill option\n   */\n  onAutoFill?: () => void\n}\n\ntype InputMode = 'text' | 'email' | 'numeric'\n\n/** on change or on input required */\ntype InputProps = (\n  | {\n      /** on change is required and on input optional */\n      onChange: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLInputElement>) => void\n    }\n  | {\n      /** on input is required and on change optional */\n      onChange?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLInputElement>) => void\n    }\n) & {\n  autoCompleteAttr?: HTMLInputAutoCompleteAttribute\n  inputModeAttr?: InputMode\n}\n\nexport type TextInputProps = Props & InputProps\n\n/**\n * A reusable TextInput component that supports various input types, custom styling, icons,\n * and autofill detection.\n *\n * ### Caveats:\n * - `onAutoFill` triggers after animation end (animation duration is 2s),\n * the animation starts when a user selects or hovers over an autofill option\n */\nexport const TextInput = forwardRef(function TextInput(\n  {\n    id: idProp,\n    type = 'text',\n    placeholder,\n    name,\n    value,\n    error = false,\n    onBlur,\n    onChange,\n    onInputChange,\n    onAutoFill,\n    disabled = false,\n    frontIcon,\n    frontIconComponent,\n    trailingIconComponent,\n    trailingIcon,\n    fallbackStyle,\n    autoCompleteAttr = 'off',\n    inputModeAttr,\n    ...fieldProps\n  }: TextInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const id = useUniqueId(idProp)\n  const theme = useTheme()\n\n  const handleAnimationEnd = (e: AnimationEvent<HTMLInputElement>) => {\n    if (e.animationName === 'onAutoFillStart' && onAutoFill && !!value) {\n      onAutoFill()\n    }\n  }\n\n  const frontIconToRender = frontIconComponent ? (\n    <InputLeadingIconContainer $size={20} $iconColor={theme.color.text.subtle}>\n      {frontIconComponent}\n    </InputLeadingIconContainer>\n  ) : frontIcon ? (\n    <StyledFrontIcon\n      $disabled={disabled}\n      render={frontIcon}\n      color=\"color.icon.base\"\n    />\n  ) : null\n\n  const trailingIconToRender = trailingIconComponent ? (\n    <InputLeadingIconContainer $size={20} $iconColor={theme.color.text.subtle}>\n      {trailingIconComponent}\n    </InputLeadingIconContainer>\n  ) : trailingIcon ? (\n    <StyledTrailingIcon\n      $disabled={disabled}\n      render={trailingIcon}\n      color=\"color.icon.base\"\n    />\n  ) : null\n\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <Box flex alignItems=\"center\" justifyContent=\"flex-start\">\n        {frontIconToRender && frontIconToRender}\n        <Input\n          disabled={disabled}\n          type={type}\n          id={id}\n          name={name}\n          ref={ref}\n          onAnimationEnd={handleAnimationEnd}\n          placeholder={placeholder}\n          value={value}\n          $error={error}\n          $frontIcon={Boolean(frontIconToRender)}\n          $fallbackStyle={fallbackStyle}\n          autoComplete={autoCompleteAttr}\n          onChange={(e: FormEvent<HTMLInputElement>) => {\n            onChange?.(e.currentTarget.value)\n            onInputChange?.(e)\n          }}\n          onBlur={onBlur}\n          inputMode={inputModeAttr}\n        />\n        {trailingIconToRender && trailingIconToRender}\n      </Box>\n    </Field>\n  )\n})\n"]}
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FocusEvent,\n  AnimationEvent,\n  FormEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLInputAutoCompleteAttribute,\n} from 'react'\n\nimport { Box } from '../Box'\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport {\n  Input,\n  InputLeadingIconContainer,\n  StyledFrontIcon,\n  StyledTrailingIcon,\n} from '../fields/components/CommonInput'\nimport { useUniqueId } from '../utils/id'\nimport { useTheme } from 'styled-components'\n\ninterface Props extends CommonFieldProps {\n  type?: 'text' | 'email' | 'password' | 'time' | 'date' | 'tel'\n  placeholder: string\n  name?: string\n  value: string\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  /**\n   * Triggers after animation end (animation duration is 2s),\n   * the animation starts when a user selects or hovers over an autofill option\n   */\n  onAutoFill?: () => void\n}\n\ntype InputMode = 'text' | 'email' | 'numeric'\n\n/** on change or on input required */\ntype InputProps = (\n  | {\n      /** on change is required and on input optional */\n      onChange: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLInputElement>) => void\n    }\n  | {\n      /** on input is required and on change optional */\n      onChange?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLInputElement>) => void\n    }\n) & {\n  autoCompleteAttr?: HTMLInputAutoCompleteAttribute\n  inputModeAttr?: InputMode\n}\n\nexport type TextInputProps = Props & InputProps\n\n/**\n * A reusable TextInput component that supports various input types, custom styling, icons,\n * and autofill detection.\n *\n * ### Caveats:\n * - `onAutoFill` triggers after animation end (animation duration is 2s),\n * the animation starts when a user selects or hovers over an autofill option\n */\nexport const TextInput = forwardRef(function TextInput(\n  {\n    id: idProp,\n    type = 'text',\n    placeholder,\n    name,\n    value,\n    error = false,\n    onBlur,\n    onChange,\n    onInputChange,\n    onAutoFill,\n    disabled = false,\n    frontIcon,\n    frontIconComponent,\n    trailingIconComponent,\n    trailingIcon,\n    fallbackStyle,\n    autoCompleteAttr = 'off',\n    inputModeAttr,\n    ...fieldProps\n  }: TextInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const id = useUniqueId(idProp)\n  const theme = useTheme()\n\n  const handleAnimationEnd = (e: AnimationEvent<HTMLInputElement>) => {\n    if (e.animationName === 'onAutoFillStart' && onAutoFill && !!value) {\n      onAutoFill()\n    }\n  }\n\n  const frontIconToRender = frontIconComponent ? (\n    <InputLeadingIconContainer $size={20} $iconColor={theme.color.text.subtle}>\n      {frontIconComponent}\n    </InputLeadingIconContainer>\n  ) : frontIcon ? (\n    <StyledFrontIcon\n      $disabled={disabled}\n      render={frontIcon}\n      color=\"color.icon.base\"\n    />\n  ) : null\n\n  const trailingIconToRender = trailingIconComponent ? (\n    <InputLeadingIconContainer $size={20} $iconColor={theme.color.text.subtle}>\n      {trailingIconComponent}\n    </InputLeadingIconContainer>\n  ) : trailingIcon ? (\n    <StyledTrailingIcon\n      $disabled={disabled}\n      render={trailingIcon}\n      color=\"color.icon.base\"\n    />\n  ) : null\n\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <Box flex alignItems=\"center\" justifyContent=\"flex-start\">\n        {frontIconToRender}\n        <Input\n          disabled={disabled}\n          type={type}\n          id={id}\n          name={name}\n          ref={ref}\n          onAnimationEnd={handleAnimationEnd}\n          placeholder={placeholder}\n          value={value}\n          $error={error}\n          $frontIcon={Boolean(frontIconToRender)}\n          $fallbackStyle={fallbackStyle}\n          autoComplete={autoCompleteAttr}\n          onChange={(e: FormEvent<HTMLInputElement>) => {\n            onChange?.(e.currentTarget.value)\n            onInputChange?.(e)\n          }}\n          onBlur={onBlur}\n          inputMode={inputModeAttr}\n        />\n        {trailingIconToRender}\n      </Box>\n    </Field>\n  )\n})\n"]}

package/dist/Textarea/Textarea.js

@@ -5,7 +5,7 @@ import { Field } from '../fields/Field';
 import { useUniqueId } from '../utils/id';
 export const Textarea = forwardRef(function Textarea({ id: idProp, name, value, onChange, onInputChange, resize = 'none', error = false, placeholder, disabled = false, maxLength, onBlur, rows = 4, fallbackStyle, ...fieldProps }, ref) {
     const id = useUniqueId(idProp);
-    return (_jsx(Field, { ...fieldProps, htmlFor: id, error: error, children: _jsx(StyledTextArea, { ref: ref, "$error": error, id: id, name: name, disabled: disabled, "$resize": resize, "$fallbackStyle": fallbackStyle, placeholder: placeholder, value: value, onChange: (e) => {
+    return (_jsx(Field, { ...fieldProps, htmlFor: id, error: error, children: _jsx(StyledTextArea, { ref: ref, $error: error, id: id, name: name, disabled: disabled, $resize: resize, $fallbackStyle: fallbackStyle, placeholder: placeholder, value: value, onChange: (e) => {
                 onChange?.(e.currentTarget.value);
                 onInputChange?.(e);
             }, maxLength: maxLength, onBlur: onBlur, rows: rows }) }));

package/dist/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuC,UAAU,EAAE,MAAM,OAAO,CAAA;AACvE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AA+BzC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EACE,EAAE,EAAE,MAAM,EACV,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,aAAa,EACb,MAAM,GAAG,MAAM,EACf,KAAK,GAAG,KAAK,EACb,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,MAAM,EACN,IAAI,GAAG,CAAC,EACR,aAAa,EACb,GAAG,UAAU,EACC,EAChB,GAAsC;IAEtC,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL,KAAC,KAAK,OAAK,UAAU,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,YAC9C,KAAC,cAAc,IACb,GAAG,EAAE,GAAG,YACA,KAAK,EACb,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,aACT,MAAM,oBACC,aAAa,EAC7B,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAiC,EAAE,EAAE;gBAC9C,QAAQ,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;gBACjC,aAAa,EAAE,CAAC,CAAC,CAAC,CAAA;YACpB,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,GACV,GACI,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AASF,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAU;;;;gBAIhC,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAE,CAC1C,cAAc;IACZ,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;IAC/B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;sBACf,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;WAKnD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;YACnC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;YACxB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC;aACpD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;kBACrC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CACpC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;oBAMvD,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CACpC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;;CAE1E,CAAA","sourcesContent":["import { FocusEvent, FormEvent, ForwardedRef, forwardRef } from 'react'\nimport styled from 'styled-components'\n\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { useUniqueId } from '../utils/id'\nimport { MarginProps } from '../utils/space'\n\ntype BaseProps = {\n  id?: string\n  placeholder?: string\n  name?: string\n  value: string\n  error?: boolean\n  errorMsg?: string\n  resize?: 'none' | 'both'\n  disabled?: boolean\n  maxLength?: number\n  onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void\n  rows?: number\n  fallbackStyle?: boolean\n} & CommonFieldProps &\n  MarginProps\n\ntype TruncateProps =\n  | {\n      onChange: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLTextAreaElement>) => void\n    }\n  | {\n      onChange?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLTextAreaElement>) => void\n    }\n\nexport type TextareaProps = BaseProps & TruncateProps\n\nexport const Textarea = forwardRef(function Textarea(\n  {\n    id: idProp,\n    name,\n    value,\n    onChange,\n    onInputChange,\n    resize = 'none',\n    error = false,\n    placeholder,\n    disabled = false,\n    maxLength,\n    onBlur,\n    rows = 4,\n    fallbackStyle,\n    ...fieldProps\n  }: TextareaProps,\n  ref: ForwardedRef<HTMLTextAreaElement>,\n) {\n  const id = useUniqueId(idProp)\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <StyledTextArea\n        ref={ref}\n        $error={error}\n        id={id}\n        name={name}\n        disabled={disabled}\n        $resize={resize}\n        $fallbackStyle={fallbackStyle}\n        placeholder={placeholder}\n        value={value}\n        onChange={(e: FormEvent<HTMLTextAreaElement>) => {\n          onChange?.(e.currentTarget.value)\n          onInputChange?.(e)\n        }}\n        maxLength={maxLength}\n        onBlur={onBlur}\n        rows={rows}\n      />\n    </Field>\n  )\n})\n\ninterface TextArea {\n  $resize: 'none' | 'both'\n  disabled: boolean\n  $error: boolean\n  $fallbackStyle?: boolean\n}\n\nconst StyledTextArea = styled.textarea<TextArea>`\n  font-size: 16px;\n  font: inherit;\n  line-height: 20px;\n  background: ${({ $fallbackStyle, theme }) =>\n    $fallbackStyle\n      ? theme.color.surface.base[300]\n      : theme.color.background['000']};\n  border: 2px solid ${({ theme }) => theme.color.border.subtle};\n  box-sizing: border-box;\n  border-radius: 12px;\n  width: 100%;\n  padding: 18px 14px;\n  color: ${({ theme }) => theme.color.text.base};\n  resize: ${({ $resize }) => $resize};\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'text')};\n  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};\n  border-color: ${({ $error, theme }) =>\n    $error ? theme.color.feedback.negative[200] : theme.color.border.subtle};\n  outline: none;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    border-color: ${({ $error, theme }) =>\n      $error ? theme.color.feedback.negative[200] : theme.color.border.base};\n  }\n`\n"]}
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuC,UAAU,EAAE,MAAM,OAAO,CAAA;AACvE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AA+BzC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EACE,EAAE,EAAE,MAAM,EACV,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,aAAa,EACb,MAAM,GAAG,MAAM,EACf,KAAK,GAAG,KAAK,EACb,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,MAAM,EACN,IAAI,GAAG,CAAC,EACR,aAAa,EACb,GAAG,UAAU,EACC,EAChB,GAAsC;IAEtC,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL,KAAC,KAAK,OAAK,UAAU,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,YAC9C,KAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,KAAK,EACb,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,aAAa,EAC7B,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAiC,EAAE,EAAE;gBAC9C,QAAQ,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;gBACjC,aAAa,EAAE,CAAC,CAAC,CAAC,CAAA;YACpB,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,GACV,GACI,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AASF,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAU;;;;gBAIhC,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAE,CAC1C,cAAc;IACZ,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;IAC/B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;sBACf,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;WAKnD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;YACnC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;YACxB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC;aACpD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;kBACrC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CACpC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;oBAMvD,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CACpC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;;CAE1E,CAAA","sourcesContent":["import { FocusEvent, FormEvent, ForwardedRef, forwardRef } from 'react'\nimport styled from 'styled-components'\n\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { useUniqueId } from '../utils/id'\nimport { MarginProps } from '../utils/space'\n\ntype BaseProps = {\n  id?: string\n  placeholder?: string\n  name?: string\n  value: string\n  error?: boolean\n  errorMsg?: string\n  resize?: 'none' | 'both'\n  disabled?: boolean\n  maxLength?: number\n  onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void\n  rows?: number\n  fallbackStyle?: boolean\n} & CommonFieldProps &\n  MarginProps\n\ntype TruncateProps =\n  | {\n      onChange: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLTextAreaElement>) => void\n    }\n  | {\n      onChange?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLTextAreaElement>) => void\n    }\n\nexport type TextareaProps = BaseProps & TruncateProps\n\nexport const Textarea = forwardRef(function Textarea(\n  {\n    id: idProp,\n    name,\n    value,\n    onChange,\n    onInputChange,\n    resize = 'none',\n    error = false,\n    placeholder,\n    disabled = false,\n    maxLength,\n    onBlur,\n    rows = 4,\n    fallbackStyle,\n    ...fieldProps\n  }: TextareaProps,\n  ref: ForwardedRef<HTMLTextAreaElement>,\n) {\n  const id = useUniqueId(idProp)\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <StyledTextArea\n        ref={ref}\n        $error={error}\n        id={id}\n        name={name}\n        disabled={disabled}\n        $resize={resize}\n        $fallbackStyle={fallbackStyle}\n        placeholder={placeholder}\n        value={value}\n        onChange={(e: FormEvent<HTMLTextAreaElement>) => {\n          onChange?.(e.currentTarget.value)\n          onInputChange?.(e)\n        }}\n        maxLength={maxLength}\n        onBlur={onBlur}\n        rows={rows}\n      />\n    </Field>\n  )\n})\n\ninterface TextArea {\n  $resize: 'none' | 'both'\n  disabled: boolean\n  $error: boolean\n  $fallbackStyle?: boolean\n}\n\nconst StyledTextArea = styled.textarea<TextArea>`\n  font-size: 16px;\n  font: inherit;\n  line-height: 20px;\n  background: ${({ $fallbackStyle, theme }) =>\n    $fallbackStyle\n      ? theme.color.surface.base[300]\n      : theme.color.background['000']};\n  border: 2px solid ${({ theme }) => theme.color.border.subtle};\n  box-sizing: border-box;\n  border-radius: 12px;\n  width: 100%;\n  padding: 18px 14px;\n  color: ${({ theme }) => theme.color.text.base};\n  resize: ${({ $resize }) => $resize};\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'text')};\n  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};\n  border-color: ${({ $error, theme }) =>\n    $error ? theme.color.feedback.negative[200] : theme.color.border.subtle};\n  outline: none;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    border-color: ${({ $error, theme }) =>\n      $error ? theme.color.feedback.negative[200] : theme.color.border.base};\n  }\n`\n"]}

package/dist/ThemeProvider/utils/colourMap.d.ts

@@ -5,6 +5,6 @@ import { Theme } from '../ThemeProvider';
 export type NewColor = Prettify<Flatten<Pick<typeof designTokens, 'color' | 'extended1' | 'thirdParty'>>>;
 export type ColorTypes = Color | NewColor;
 export declare const resolveToThemeColor: (color: ColorTypes, theme: Theme) => string;
-export declare const getColorPath: (color: ColorTypes) => "meta" | "x" | "sesame" | "onfido" | "rac" | "color.text.base" | "color.text.subtle" | "color.text.contrast" | "color.text.inverse" | "color.text.nonEssential" | "color.icon.base" | "color.icon.subtle" | "color.icon.contrast" | "color.icon.inverse" | "color.icon.nonEssential" | "color.border.base" | "color.border.subtle" | "color.border.contrast" | "color.interactive.primary.base" | "color.interactive.primary.hover" | "color.interactive.primary.pressed" | "color.interactive.primary.selected" | "color.interactive.secondary.base" | "color.interactive.secondary.hover" | "color.interactive.secondary.pressed" | "color.interactive.secondary.selected" | "color.interactive.neutral.strong.base" | "color.interactive.neutral.strong.hover" | "color.interactive.neutral.strong.pressed" | "color.interactive.neutral.strong.selected" | "color.interactive.neutral.strong.selectedHover" | "color.interactive.neutral.subtle.base" | "color.interactive.neutral.subtle.hover" | "color.interactive.neutral.subtle.pressed" | "color.interactive.neutral.subtle.selected" | "color.interactive.neutral.subtle.selectedHover" | "color.background.100" | "color.background.200" | "color.background.000" | "color.surface.base.400" | "color.surface.base.100" | "color.surface.base.200" | "color.surface.base.300" | "color.surface.base.000" | "color.surface.base.900" | "color.surface.brand.400" | "color.surface.brand.100" | "color.surface.brand.200" | "color.surface.brand.300" | "color.surface.brand.accent1" | "color.surface.brand.accent2" | "color.surface.brand.accent3" | "color.surface.brand.accent4" | "color.feedback.inactive.50" | "color.feedback.inactive.100" | "color.feedback.negative.100" | "color.feedback.negative.200" | "color.feedback.negative.300" | "color.feedback.positive.100" | "color.feedback.positive.200" | "color.feedback.positive.300" | "color.feedback.notice.100" | "color.feedback.notice.200" | "color.feedback.informative.100" | "color.feedback.informative.200" | "color.focus.onLight" | "color.focus.onDark" | "color.illustration.neutral.400" | "color.illustration.neutral.100" | "color.illustration.neutral.200" | "color.illustration.neutral.300" | "color.illustration.neutral.000" | "color.illustration.neutral.900" | "color.illustration.accent1.100" | "color.illustration.accent1.200" | "color.illustration.accent2.100" | "color.illustration.accent2.200" | "color.illustration.accent3.100" | "color.illustration.accent3.200" | "color.illustration.accent4.100" | "color.illustration.accent4.200" | "extended1.20" | "extended1.100" | "compareTheMarket" | "ravelin" | "stripe" | "intercom" | "checkout" | "hometree" | "premfina" | "thirdParty.onfido" | "thirdParty.rac" | "thirdParty.compareTheMarket" | "thirdParty.facebook" | "thirdParty.ravelin" | "thirdParty.confusedCom" | "thirdParty.stripe" | "thirdParty.intercom" | "thirdParty.twitter" | "thirdParty.checkout" | "thirdParty.hometree" | "thirdParty.premfina" | "lollipop" | "marshmallowPink" | "bubblegum" | "fairyFloss" | "boba" | "liquorice" | "chia" | "custard" | "mascarpone" | "coconut" | "cream" | "spearmint" | "feijoa" | "blueberry" | "macaroon" | "pistachio" | "matcha" | "caramel" | "peanut" | "marzipan" | "oatmeal" | "satsuma" | "strawberry" | "watermelon" | "apple" | "mint" | "lemon" | "sherbert" | "tangerine" | "confused";
+export declare const getColorPath: (color: ColorTypes) => "apple" | "blueberry" | "boba" | "bubblegum" | "caramel" | "checkout" | "chia" | "coconut" | "color.background.000" | "color.background.100" | "color.background.200" | "color.border.base" | "color.border.contrast" | "color.border.subtle" | "color.feedback.inactive.100" | "color.feedback.inactive.50" | "color.feedback.informative.100" | "color.feedback.informative.200" | "color.feedback.negative.100" | "color.feedback.negative.200" | "color.feedback.negative.300" | "color.feedback.notice.100" | "color.feedback.notice.200" | "color.feedback.positive.100" | "color.feedback.positive.200" | "color.feedback.positive.300" | "color.focus.onDark" | "color.focus.onLight" | "color.icon.base" | "color.icon.contrast" | "color.icon.inverse" | "color.icon.nonEssential" | "color.icon.subtle" | "color.illustration.accent1.100" | "color.illustration.accent1.200" | "color.illustration.accent2.100" | "color.illustration.accent2.200" | "color.illustration.accent3.100" | "color.illustration.accent3.200" | "color.illustration.accent4.100" | "color.illustration.accent4.200" | "color.illustration.neutral.000" | "color.illustration.neutral.100" | "color.illustration.neutral.200" | "color.illustration.neutral.300" | "color.illustration.neutral.400" | "color.illustration.neutral.900" | "color.interactive.neutral.strong.base" | "color.interactive.neutral.strong.hover" | "color.interactive.neutral.strong.pressed" | "color.interactive.neutral.strong.selected" | "color.interactive.neutral.strong.selectedHover" | "color.interactive.neutral.subtle.base" | "color.interactive.neutral.subtle.hover" | "color.interactive.neutral.subtle.pressed" | "color.interactive.neutral.subtle.selected" | "color.interactive.neutral.subtle.selectedHover" | "color.interactive.primary.base" | "color.interactive.primary.hover" | "color.interactive.primary.pressed" | "color.interactive.primary.selected" | "color.interactive.secondary.base" | "color.interactive.secondary.hover" | "color.interactive.secondary.pressed" | "color.interactive.secondary.selected" | "color.surface.base.000" | "color.surface.base.100" | "color.surface.base.200" | "color.surface.base.300" | "color.surface.base.400" | "color.surface.base.900" | "color.surface.brand.100" | "color.surface.brand.200" | "color.surface.brand.300" | "color.surface.brand.400" | "color.surface.brand.accent1" | "color.surface.brand.accent2" | "color.surface.brand.accent3" | "color.surface.brand.accent4" | "color.text.base" | "color.text.contrast" | "color.text.inverse" | "color.text.nonEssential" | "color.text.subtle" | "compareTheMarket" | "confused" | "cream" | "custard" | "extended1.100" | "extended1.20" | "fairyFloss" | "feijoa" | "hometree" | "intercom" | "lemon" | "liquorice" | "lollipop" | "macaroon" | "marshmallowPink" | "marzipan" | "mascarpone" | "matcha" | "meta" | "mint" | "oatmeal" | "onfido" | "peanut" | "pistachio" | "premfina" | "rac" | "ravelin" | "satsuma" | "sesame" | "sherbert" | "spearmint" | "strawberry" | "stripe" | "tangerine" | "thirdParty.checkout" | "thirdParty.compareTheMarket" | "thirdParty.confusedCom" | "thirdParty.facebook" | "thirdParty.hometree" | "thirdParty.intercom" | "thirdParty.onfido" | "thirdParty.premfina" | "thirdParty.rac" | "thirdParty.ravelin" | "thirdParty.stripe" | "thirdParty.twitter" | "watermelon" | "x";
 export declare const formatDesignTokenColor: () => string;
 export declare const legacyColorMap: Record<Color, NewColor>;

package/dist/Toggle/Toggle.js

@@ -8,11 +8,11 @@ export const Toggle = ({ id, checked, onToggle, disabled, bgColor, ...marginProp
     const resolvedBgColor = bgColor
         ? resolveToThemeColor(bgColor, theme)
         : undefined;
-    return (_jsxs(Switch, { forwardedAs: "label", htmlFor: id, ...marginProps, children: [_jsx(Checkbox, { id: id, disabled: disabled, type: "checkbox", checked: checked, onChange: onToggle, "$bgColor": resolvedBgColor, onKeyDown: (e) => {
+    return (_jsxs(Switch, { forwardedAs: "label", htmlFor: id, ...marginProps, children: [_jsx(Checkbox, { id: id, disabled: disabled, type: "checkbox", checked: checked, onChange: onToggle, $bgColor: resolvedBgColor, onKeyDown: (e) => {
                     if (e.key === 'Enter') {
                         onToggle();
                     }
-                }, "aria-label": "toggle" }), _jsx(Slider, { "$disabled": disabled })] }));
+                }, "aria-label": "toggle" }), _jsx(Slider, { $disabled: disabled })] }));
 };
 const Switch = styled(Box) `
   position: relative;

package/dist/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/Toggle/Toggle.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AAazC,MAAM,CAAC,MAAM,MAAM,GAAc,CAAC,EAChC,EAAE,EACF,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,eAAe,GAAG,OAAO;QAC7B,CAAC,CAAC,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC;QACrC,CAAC,CAAC,SAAS,CAAA;IAEb,OAAO,CACL,MAAC,MAAM,IAAC,WAAW,EAAC,OAAO,EAAC,OAAO,EAAE,EAAE,KAAM,WAAW,aACtD,KAAC,QAAQ,IACP,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,cACR,eAAe,EACzB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;wBACtB,QAAQ,EAAE,CAAA;oBACZ,CAAC;gBACH,CAAC,gBACU,QAAQ,GACnB,EACF,KAAC,MAAM,iBAAY,QAAQ,GAAI,IACxB,CACV,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;CAWzB,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAyB;;;;;;;sBAO7B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;;;;;;;;;;;;;wBAa/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;IAKhE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACP,CAAC,CAAC,GAAG,CAAA;;SAEF;IACH,CAAC,CAAC,GAAG,CAAA;;gCAEqB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAChC,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC;;SAE1C;CACR,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAuB;IAChD,YAAY,CAAC,EAAE,QAAQ,EAAE,qBAAqB,MAAM,EAAE,EAAE,CAAC;;gBAE7C,MAAM;wBACE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAC1C,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;;;;gBAI9C,MAAM;;;CAGrB,CAAA","sourcesContent":["import { FC } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { focusOutline } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport {\n  ColorTypes,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\n\nexport type Props = {\n  /** unique ID */\n  id?: string\n  /** checked flag  */\n  checked: boolean\n  disabled?: boolean\n  /** onToggle listener  */\n  onToggle: () => void\n  bgColor?: ColorTypes\n} & MarginProps\n\nexport const Toggle: FC<Props> = ({\n  id,\n  checked,\n  onToggle,\n  disabled,\n  bgColor,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n\n  const resolvedBgColor = bgColor\n    ? resolveToThemeColor(bgColor, theme)\n    : undefined\n\n  return (\n    <Switch forwardedAs=\"label\" htmlFor={id} {...marginProps}>\n      <Checkbox\n        id={id}\n        disabled={disabled}\n        type=\"checkbox\"\n        checked={checked}\n        onChange={onToggle}\n        $bgColor={resolvedBgColor}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            onToggle()\n          }\n        }}\n        aria-label=\"toggle\"\n      />\n      <Slider $disabled={disabled} />\n    </Switch>\n  )\n}\n\nconst Switch = styled(Box)`\n  position: relative;\n  display: inline-block;\n  width: 56px;\n  height: 32px;\n\n  input {\n    opacity: 0;\n    width: 0;\n    height: 0;\n  }\n`\n\nconst Slider = styled.span<{ $disabled?: boolean }>`\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ${({ theme }) => theme.color.feedback.inactive[100]};\n  border: none;\n  border-radius: 28px;\n  transition: 0.2s background-color;\n  outline: none;\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 24px;\n    width: 24px;\n    left: 4px;\n    bottom: 4px;\n    background-color: ${({ theme }) => theme.color.surface.base[100]};\n    transition: 0.2s transform;\n    border-radius: 50%;\n  }\n\n  ${({ $disabled }) =>\n    $disabled\n      ? css`\n          cursor: not-allowed;\n        `\n      : css`\n          &:hover {\n            background-color: ${({ theme }) =>\n              theme.color.illustration.neutral[400]};\n          }\n        `}\n`\n\nconst Checkbox = styled.input<{ $bgColor?: string }>`\n  ${focusOutline({ selector: `&:focus-visible + ${Slider}` })}\n\n  &:checked + ${Slider} {\n    background-color: ${({ $bgColor, theme }) =>\n      $bgColor ? $bgColor : theme.color.feedback.positive[200]};\n    border: none;\n  }\n\n  &:checked + ${Slider}:before {\n    transform: translateX(24px);\n  }\n`\n"]}
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/Toggle/Toggle.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AAazC,MAAM,CAAC,MAAM,MAAM,GAAc,CAAC,EAChC,EAAE,EACF,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,eAAe,GAAG,OAAO;QAC7B,CAAC,CAAC,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC;QACrC,CAAC,CAAC,SAAS,CAAA;IAEb,OAAO,CACL,MAAC,MAAM,IAAC,WAAW,EAAC,OAAO,EAAC,OAAO,EAAE,EAAE,KAAM,WAAW,aACtD,KAAC,QAAQ,IACP,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,eAAe,EACzB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;wBACtB,QAAQ,EAAE,CAAA;oBACZ,CAAC;gBACH,CAAC,gBACU,QAAQ,GACnB,EACF,KAAC,MAAM,IAAC,SAAS,EAAE,QAAQ,GAAI,IACxB,CACV,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;CAWzB,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAyB;;;;;;;sBAO7B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;;;;;;;;;;;;;wBAa/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;IAKhE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACP,CAAC,CAAC,GAAG,CAAA;;SAEF;IACH,CAAC,CAAC,GAAG,CAAA;;gCAEqB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAChC,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC;;SAE1C;CACR,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAuB;IAChD,YAAY,CAAC,EAAE,QAAQ,EAAE,qBAAqB,MAAM,EAAE,EAAE,CAAC;;gBAE7C,MAAM;wBACE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAC1C,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;;;;gBAI9C,MAAM;;;CAGrB,CAAA","sourcesContent":["import { FC } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { focusOutline } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport {\n  ColorTypes,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\n\nexport type Props = {\n  /** unique ID */\n  id?: string\n  /** checked flag  */\n  checked: boolean\n  disabled?: boolean\n  /** onToggle listener  */\n  onToggle: () => void\n  bgColor?: ColorTypes\n} & MarginProps\n\nexport const Toggle: FC<Props> = ({\n  id,\n  checked,\n  onToggle,\n  disabled,\n  bgColor,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n\n  const resolvedBgColor = bgColor\n    ? resolveToThemeColor(bgColor, theme)\n    : undefined\n\n  return (\n    <Switch forwardedAs=\"label\" htmlFor={id} {...marginProps}>\n      <Checkbox\n        id={id}\n        disabled={disabled}\n        type=\"checkbox\"\n        checked={checked}\n        onChange={onToggle}\n        $bgColor={resolvedBgColor}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            onToggle()\n          }\n        }}\n        aria-label=\"toggle\"\n      />\n      <Slider $disabled={disabled} />\n    </Switch>\n  )\n}\n\nconst Switch = styled(Box)`\n  position: relative;\n  display: inline-block;\n  width: 56px;\n  height: 32px;\n\n  input {\n    opacity: 0;\n    width: 0;\n    height: 0;\n  }\n`\n\nconst Slider = styled.span<{ $disabled?: boolean }>`\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ${({ theme }) => theme.color.feedback.inactive[100]};\n  border: none;\n  border-radius: 28px;\n  transition: 0.2s background-color;\n  outline: none;\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 24px;\n    width: 24px;\n    left: 4px;\n    bottom: 4px;\n    background-color: ${({ theme }) => theme.color.surface.base[100]};\n    transition: 0.2s transform;\n    border-radius: 50%;\n  }\n\n  ${({ $disabled }) =>\n    $disabled\n      ? css`\n          cursor: not-allowed;\n        `\n      : css`\n          &:hover {\n            background-color: ${({ theme }) =>\n              theme.color.illustration.neutral[400]};\n          }\n        `}\n`\n\nconst Checkbox = styled.input<{ $bgColor?: string }>`\n  ${focusOutline({ selector: `&:focus-visible + ${Slider}` })}\n\n  &:checked + ${Slider} {\n    background-color: ${({ $bgColor, theme }) =>\n      $bgColor ? $bgColor : theme.color.feedback.positive[200]};\n    border: none;\n  }\n\n  &:checked + ${Slider}:before {\n    transform: translateX(24px);\n  }\n`\n"]}

package/dist/Tooltip/Tooltip.d.ts

@@ -27,10 +27,10 @@ export interface TooltipProps {
 }
 export type TooltipVariant = 'primary' | 'fallback' | 'bubblegum';
 export declare const Tooltip: FC<TooltipProps>;
-export declare const Tip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$maxWidth" | "$background"> & {
+export declare const Tip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$background" | "$maxWidth"> & {
     $maxWidth?: number;
     $background: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$maxWidth" | "$background"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$background" | "$maxWidth"> & {
     $maxWidth?: number;
     $background: string;
 }, never>>> & string;

package/dist/Tooltip/Tooltip.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { arrow, autoUpdate, flip, FloatingArrow, FloatingPortal, inline, offset, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from '@floating-ui/react';
 import { useRef, useState } from 'react';
 import styled, { css, useTheme } from 'styled-components';
@@ -36,6 +36,7 @@ export const Tooltip = ({ children, title, content, position, maxWidth = 500, un
             flip(),
             shift(),
             inlineProp ? inline() : undefined,
+            // oxlint-disable-next-line react/react-compiler
             arrow({ element: arrowRef, padding: 14 }),
         ],
         whileElementsMounted: autoUpdate,
@@ -52,7 +53,11 @@ export const Tooltip = ({ children, title, content, position, maxWidth = 500, un
         dismiss,
         role,
     ]);
-    return (_jsxs(_Fragment, { children: [_jsx(UnderlinedChild, { id: randomId, "$underline": underline, ref: refs.setReference, ...getReferenceProps(), children: children }), showTip && (_jsx(FloatingPortal, { root: portalContainer, children: _jsxs(Tip, { ref: refs.setFloating, className: "tooltip", "$maxWidth": maxWidth, "$background": resolvedBgColor, style: floatingStyles, ...getFloatingProps(), children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, fill: resolvedBgColor }), title && (_jsx(Text, { tag: "h5", typo: "headline-small", color: variantValue.textColor, children: title })), (typeof content === 'string' && (_jsx(Text, { typo: "body-regular", color: variantValue.textColor, children: content }))) ||
+    return (_jsxs(_Fragment, { children: [_jsx(UnderlinedChild, { id: randomId, $underline: underline, ref: refs.setReference, ...getReferenceProps(), children: children }), showTip && (_jsx(FloatingPortal, { root: portalContainer, children: _jsxs(Tip
+                // oxlint-disable-next-line react/react-compiler
+                , { 
+                    // oxlint-disable-next-line react/react-compiler
+                    ref: refs.setFloating, className: "tooltip", $maxWidth: maxWidth, $background: resolvedBgColor, style: floatingStyles, ...getFloatingProps(), children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, fill: resolvedBgColor }), title && (_jsx(Text, { tag: "h5", typo: "headline-small", color: variantValue.textColor, children: title })), (typeof content === 'string' && (_jsx(Text, { typo: "body-regular", color: variantValue.textColor, children: content }))) ||
                             content] }) }))] }));
 };
 const UnderlinedChild = styled(Box) `

package/dist/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  arrow,\n  autoUpdate,\n  flip,\n  FloatingArrow,\n  FloatingPortal,\n  inline,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  type Side,\n} from '@floating-ui/react'\nimport { FC, ReactNode, RefObject, useRef, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\nexport interface TooltipProps {\n  children: ReactNode\n  content: string | ReactNode\n  position?: Side\n  maxWidth?: number\n  title?: string\n  underline?: boolean\n  variant?: TooltipVariant\n  portalContainer?: HTMLElement | null | RefObject<HTMLElement | null>\n  /**\n   * If true, the tooltip will position iReact.tself inline its children\n   *\n   * Used for inline content like blocks of text that span multiple lines\n   *\n   * @example\n   * ```tsx\n   * <Text>\n   *   Marshmallow car insurance, the best insurance in town.\n   *   <Tooltip inline content=\"Tooltip content\">Hover here</Tooltip>\n   *   to learn more as the Policy Holder\n   * </Text>\n   * ```\n   */\n  inline?: boolean\n}\n\nexport type TooltipVariant = 'primary' | 'fallback' | 'bubblegum'\n\ntype VariantValue = { textColor: NewColor; bgColor: NewColor }\n\nconst tooltipVariants: Record<TooltipVariant, VariantValue> = {\n  primary: {\n    textColor: 'color.text.base',\n    bgColor: 'color.surface.base.300',\n  },\n  fallback: {\n    textColor: 'color.surface.base.000',\n    bgColor: 'color.illustration.accent1.100',\n  },\n  bubblegum: {\n    textColor: 'color.text.base',\n    bgColor: 'color.surface.brand.200',\n  },\n}\n\nconst ARROW_HEIGHT = 8\nconst GAP = 4\n\nexport const Tooltip: FC<TooltipProps> = ({\n  children,\n  title,\n  content,\n  position,\n  maxWidth = 500,\n  underline = false,\n  portalContainer,\n  inline: inlineProp,\n  variant = 'primary',\n}) => {\n  const [showTip, setShowTip] = useState<boolean>(false)\n  const theme = useTheme()\n  const arrowRef = useRef(null)\n\n  const variantValue = tooltipVariants[variant]\n\n  const randomId = crypto.randomUUID()\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: showTip,\n    placement: position,\n    onOpenChange: setShowTip,\n    middleware: [\n      offset(ARROW_HEIGHT + GAP),\n      flip(),\n      shift(),\n      inlineProp ? inline() : undefined,\n      arrow({ element: arrowRef, padding: 14 }),\n    ],\n    whileElementsMounted: autoUpdate,\n  })\n\n  const hover = useHover(context, { move: false })\n  const focus = useFocus(context)\n  const dismiss = useDismiss(context)\n  const role = useRole(context, { role: 'tooltip' })\n\n  const resolvedBgColor = resolveToThemeColor(variantValue.bgColor, theme)\n\n  // Merge all the interactions into prop getters\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    hover,\n    focus,\n    dismiss,\n    role,\n  ])\n\n  return (\n    <>\n      <UnderlinedChild\n        id={randomId}\n        $underline={underline}\n        ref={refs.setReference}\n        {...getReferenceProps()}\n      >\n        {children}\n      </UnderlinedChild>\n      {showTip && (\n        <FloatingPortal root={portalContainer}>\n          <Tip\n            ref={refs.setFloating}\n            className=\"tooltip\"\n            $maxWidth={maxWidth}\n            $background={resolvedBgColor}\n            style={floatingStyles}\n            {...getFloatingProps()}\n          >\n            <FloatingArrow\n              ref={arrowRef}\n              context={context}\n              fill={resolvedBgColor}\n            />\n            {title && (\n              <Text\n                tag=\"h5\"\n                typo=\"headline-small\"\n                color={variantValue.textColor}\n              >\n                {title}\n              </Text>\n            )}\n            {(typeof content === 'string' && (\n              <Text typo=\"body-regular\" color={variantValue.textColor}>\n                {content}\n              </Text>\n            )) ||\n              content}\n          </Tip>\n        </FloatingPortal>\n      )}\n    </>\n  )\n}\n\nconst UnderlinedChild = styled(Box)<{ $underline: boolean }>`\n  cursor: pointer;\n  width: fit-content;\n  display: inline-flex;\n\n  ${({ $underline, theme }) =>\n    $underline &&\n    css`\n      border-bottom: 1px dashed ${theme.color.surface.brand[300]};\n    `}\n`\n\nexport const Tip = styled.div<{\n  $maxWidth?: number\n  $background: string\n}>`\n  position: absolute;\n  margin: auto;\n  z-index: 1000;\n  background: ${({ $background }) => $background};\n  padding: 16px 12px 20px;\n  border-radius: 16px;\n  max-width: 450px;\n  pointer-events: none;\n  cursor: default;\n\n  // this is the trick that will make sure the content can go up to maxWidth\n  margin-right: ${({ $maxWidth }) => $maxWidth && -$maxWidth / 2 + 'px'};\n  max-width: ${({ $maxWidth }) => $maxWidth && $maxWidth + 'px'};\n`\n"]}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  arrow,\n  autoUpdate,\n  flip,\n  FloatingArrow,\n  FloatingPortal,\n  inline,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  type Side,\n} from '@floating-ui/react'\nimport { FC, ReactNode, RefObject, useRef, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\nexport interface TooltipProps {\n  children: ReactNode\n  content: string | ReactNode\n  position?: Side\n  maxWidth?: number\n  title?: string\n  underline?: boolean\n  variant?: TooltipVariant\n  portalContainer?: HTMLElement | null | RefObject<HTMLElement | null>\n  /**\n   * If true, the tooltip will position iReact.tself inline its children\n   *\n   * Used for inline content like blocks of text that span multiple lines\n   *\n   * @example\n   * ```tsx\n   * <Text>\n   *   Marshmallow car insurance, the best insurance in town.\n   *   <Tooltip inline content=\"Tooltip content\">Hover here</Tooltip>\n   *   to learn more as the Policy Holder\n   * </Text>\n   * ```\n   */\n  inline?: boolean\n}\n\nexport type TooltipVariant = 'primary' | 'fallback' | 'bubblegum'\n\ntype VariantValue = { textColor: NewColor; bgColor: NewColor }\n\nconst tooltipVariants: Record<TooltipVariant, VariantValue> = {\n  primary: {\n    textColor: 'color.text.base',\n    bgColor: 'color.surface.base.300',\n  },\n  fallback: {\n    textColor: 'color.surface.base.000',\n    bgColor: 'color.illustration.accent1.100',\n  },\n  bubblegum: {\n    textColor: 'color.text.base',\n    bgColor: 'color.surface.brand.200',\n  },\n}\n\nconst ARROW_HEIGHT = 8\nconst GAP = 4\n\nexport const Tooltip: FC<TooltipProps> = ({\n  children,\n  title,\n  content,\n  position,\n  maxWidth = 500,\n  underline = false,\n  portalContainer,\n  inline: inlineProp,\n  variant = 'primary',\n}) => {\n  const [showTip, setShowTip] = useState<boolean>(false)\n  const theme = useTheme()\n  const arrowRef = useRef(null)\n\n  const variantValue = tooltipVariants[variant]\n\n  const randomId = crypto.randomUUID()\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: showTip,\n    placement: position,\n    onOpenChange: setShowTip,\n    middleware: [\n      offset(ARROW_HEIGHT + GAP),\n      flip(),\n      shift(),\n      inlineProp ? inline() : undefined,\n      // oxlint-disable-next-line react/react-compiler\n      arrow({ element: arrowRef, padding: 14 }),\n    ],\n    whileElementsMounted: autoUpdate,\n  })\n\n  const hover = useHover(context, { move: false })\n  const focus = useFocus(context)\n  const dismiss = useDismiss(context)\n  const role = useRole(context, { role: 'tooltip' })\n\n  const resolvedBgColor = resolveToThemeColor(variantValue.bgColor, theme)\n\n  // Merge all the interactions into prop getters\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    hover,\n    focus,\n    dismiss,\n    role,\n  ])\n\n  return (\n    <>\n      <UnderlinedChild\n        id={randomId}\n        $underline={underline}\n        ref={refs.setReference}\n        {...getReferenceProps()}\n      >\n        {children}\n      </UnderlinedChild>\n      {showTip && (\n        <FloatingPortal root={portalContainer}>\n          <Tip\n            // oxlint-disable-next-line react/react-compiler\n            ref={refs.setFloating}\n            className=\"tooltip\"\n            $maxWidth={maxWidth}\n            $background={resolvedBgColor}\n            style={floatingStyles}\n            {...getFloatingProps()}\n          >\n            <FloatingArrow\n              ref={arrowRef}\n              context={context}\n              fill={resolvedBgColor}\n            />\n            {title && (\n              <Text\n                tag=\"h5\"\n                typo=\"headline-small\"\n                color={variantValue.textColor}\n              >\n                {title}\n              </Text>\n            )}\n            {(typeof content === 'string' && (\n              <Text typo=\"body-regular\" color={variantValue.textColor}>\n                {content}\n              </Text>\n            )) ||\n              content}\n          </Tip>\n        </FloatingPortal>\n      )}\n    </>\n  )\n}\n\nconst UnderlinedChild = styled(Box)<{ $underline: boolean }>`\n  cursor: pointer;\n  width: fit-content;\n  display: inline-flex;\n\n  ${({ $underline, theme }) =>\n    $underline &&\n    css`\n      border-bottom: 1px dashed ${theme.color.surface.brand[300]};\n    `}\n`\n\nexport const Tip = styled.div<{\n  $maxWidth?: number\n  $background: string\n}>`\n  position: absolute;\n  margin: auto;\n  z-index: 1000;\n  background: ${({ $background }) => $background};\n  padding: 16px 12px 20px;\n  border-radius: 16px;\n  max-width: 450px;\n  pointer-events: none;\n  cursor: default;\n\n  // this is the trick that will make sure the content can go up to maxWidth\n  margin-right: ${({ $maxWidth }) => $maxWidth && -$maxWidth / 2 + 'px'};\n  max-width: ${({ $maxWidth }) => $maxWidth && $maxWidth + 'px'};\n`\n"]}

package/dist/beta/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/beta/index.js

@@ -1,2 +1,2 @@
-"use strict";
+export {};
 //# sourceMappingURL=index.js.map

package/dist/beta/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/beta/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/beta/index.ts"],"names":[],"mappings":"","sourcesContent":["export {}\n"]}

package/dist/fields/components/CommonInput.d.ts

@@ -13,19 +13,19 @@ interface SIcon {
     $disabled?: boolean;
 }
 export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof IInput> & IInput, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof IInput> & IInput, never>>> & string;
-export declare const InputLeadingIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$size" | "$iconColor"> & {
+export declare const InputLeadingIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
     $size: import("../../types").IconSize;
     $iconColor?: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$size" | "$iconColor"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
     $size: import("../../types").IconSize;
     $iconColor?: string;
 }, never>>, "as" | "forwardedAs"> & {
     as?: import("styled-components").WebTarget | undefined;
     forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "$disabled"> & SIcon, never> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$size" | "$iconColor"> & {
+}, "$disabled"> & SIcon, never> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
     $size: import("../../types").IconSize;
     $iconColor?: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$size" | "$iconColor"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
     $size: import("../../types").IconSize;
     $iconColor?: string;
 }, never>>, "as" | "forwardedAs"> & {
@@ -58,19 +58,19 @@ export declare const StyledTrailingIcon: import("styled-components/dist/types").
     color?: import("../..").ColorTypes;
     rotate?: number;
 } & import("../..").MarginProps, "$disabled"> & SIcon, never>>> & string & Omit<import("react").FC<import("../../Icon/Icon").IconProps>, keyof import("react").Component<any, {}, any>>;
-export declare const InputTrailingIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$size" | "$iconColor"> & {
+export declare const InputTrailingIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
     $size: import("../../types").IconSize;
     $iconColor?: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$size" | "$iconColor"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
     $size: import("../../types").IconSize;
     $iconColor?: string;
 }, never>>, "as" | "forwardedAs"> & {
     as?: import("styled-components").WebTarget | undefined;
     forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "$disabled"> & SIcon, never> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$size" | "$iconColor"> & {
+}, "$disabled"> & SIcon, never> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
     $size: import("../../types").IconSize;
     $iconColor?: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$size" | "$iconColor"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
     $size: import("../../types").IconSize;
     $iconColor?: string;
 }, never>>, "as" | "forwardedAs"> & {

package/dist/fields/components/InternalField.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
 import { Box } from '../../Box';
 import { Icon } from '../../Icon';
@@ -8,7 +8,7 @@ export const InternalField = ({ children, fieldType, renderAsTitle, htmlFor, cla
     const textColor = error ? 'color.feedback.negative.200' : 'color.text.subtle';
     return (_jsxs(Container, { forwardedAs: fieldType === 'field' ? 'div' : 'fieldset', className: className, ...marginProps, children: [label && (_jsx(_Fragment, { children: renderAsTitle ? (_jsxs(Box, { mb: "space.200", children: [_jsx(Text, { tag: labelTag, typo: "heading-small", htmlFor: htmlFor, children: label }), assistiveText && (_jsx(Text, { tag: "p", color: "sesame", mt: "space.050", children: assistiveText }))] })) : (_jsxs(Text, { tag: labelTag, typo: "label", color: textColor, htmlFor: htmlFor, mb: "space.050", children: [label, required && (_jsx(Text, { tag: "span", typo: "body-small", color: "color.feedback.negative.200", children: "*" }))] })) })), _jsx(Box, { children: children }), fieldType === 'field' && assistiveText && !renderAsTitle && (_jsx(Text, { tag: labelTag, typo: "caption", color: textColor, mt: "space.050", children: assistiveText })), error &&
                 errorMsg &&
-                (typeof errorMsg === 'string' ? (_jsxs(Box, { flex: true, alignItems: "center", mt: "space.100", gap: "space.050", children: [_jsx(Icon, { render: "warning", size: 16, color: "color.feedback.negative.200" }), _jsx(Text, { tag: "span", typo: "caption", color: "color.feedback.negative.200", children: errorMsg })] })) : (_jsx(Box, { mt: "space.100", children: errorMsg }))), completed !== undefined && (_jsx(AnimationWrapper, { "$displayStatus": completed, "$isError": !!(error && errorMsg), children: _jsxs(StatusWrapper, { mt: 'space.100', children: [_jsx(Icon, { render: "included", size: 16, color: "color.feedback.positive.200" }), _jsx(Text, { typo: "caption", color: "color.feedback.positive.200", children: "Complete" })] }) }))] }));
+                (typeof errorMsg === 'string' ? (_jsxs(Box, { flex: true, alignItems: "center", mt: "space.100", gap: "space.050", children: [_jsx(Icon, { render: "warning", size: 16, color: "color.feedback.negative.200" }), _jsx(Text, { tag: "span", typo: "caption", color: "color.feedback.negative.200", children: errorMsg })] })) : (_jsx(Box, { mt: "space.100", children: errorMsg }))), completed !== undefined && (_jsx(AnimationWrapper, { $displayStatus: completed, $isError: !!(error && errorMsg), children: _jsxs(StatusWrapper, { mt: 'space.100', children: [_jsx(Icon, { render: "included", size: 16, color: "color.feedback.positive.200" }), _jsx(Text, { typo: "caption", color: "color.feedback.positive.200", children: "Complete" })] }) }))] }));
 };
 const AnimationWrapper = styled(Box) `
   width: 0;

package/dist/fields/components/InternalField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalField.js","sourceRoot":"","sources":["../../../src/fields/components/InternalField.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAUjC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,aAAa,EACb,OAAO,EACP,SAAS,EACT,KAAK,EACL,aAAa,EACb,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,GAAG,WAAW,EACK,EAAE,EAAE;IACvB,MAAM,QAAQ,GAAG,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAA;IAE3D,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,mBAAmB,CAAA;IAC7E,OAAO,CACL,MAAC,SAAS,IACR,WAAW,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,EACvD,SAAS,EAAE,SAAS,KAChB,WAAW,aAEd,KAAK,IAAI,CACR,4BACG,aAAa,CAAC,CAAC,CAAC,CACf,MAAC,GAAG,IAAC,EAAE,EAAC,WAAW,aACjB,KAAC,IAAI,IAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAC,eAAe,EAAC,OAAO,EAAE,OAAO,YACvD,KAAK,GACD,EAEN,aAAa,IAAI,CAChB,KAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,WAAW,YACxC,aAAa,GACT,CACR,IACG,CACP,CAAC,CAAC,CAAC,CACF,MAAC,IAAI,IACH,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAC,WAAW,aAEb,KAAK,EACL,QAAQ,IAAI,CACX,KAAC,IAAI,IACH,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,YAAY,EACjB,KAAK,EAAC,6BAA6B,kBAG9B,CACR,IACI,CACR,GACA,CACJ,EAED,KAAC,GAAG,cAAE,QAAQ,GAAO,EACpB,SAAS,KAAK,OAAO,IAAI,aAAa,IAAI,CAAC,aAAa,IAAI,CAC3D,KAAC,IAAI,IACH,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,SAAS,EAChB,EAAE,EAAC,WAAW,YAEb,aAAa,GACT,CACR,EAEA,KAAK;gBACJ,QAAQ;gBACR,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC9B,MAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,EAAE,EAAC,WAAW,EAAC,GAAG,EAAC,WAAW,aAC1D,KAAC,IAAI,IACH,MAAM,EAAC,SAAS,EAChB,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,6BAA6B,GACnC,EACF,KAAC,IAAI,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,6BAA6B,YAChE,QAAQ,GACJ,IACH,CACP,CAAC,CAAC,CAAC,CACF,KAAC,GAAG,IAAC,EAAE,EAAC,WAAW,YAAE,QAAQ,GAAO,CACrC,CAAC,EAGH,SAAS,KAAK,SAAS,IAAI,CAC1B,KAAC,gBAAgB,sBACC,SAAS,cACf,CAAC,CAAC,CAAC,KAAK,IAAI,QAAQ,CAAC,YAE/B,MAAC,aAAa,IAAC,EAAE,EAAE,WAAW,aAC5B,KAAC,IAAI,IACH,MAAM,EAAC,UAAU,EACjB,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,6BAA6B,GACnC,EACF,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,6BAA6B,yBAEjD,IACO,GACC,CACpB,IACS,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAGlC;;;;IAIE,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CACvB,cAAc;IACd,GAAG,CAAA;;;KAGF;;;IAGD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,QAAQ;IACR,GAAG,CAAA;;KAEF;CACJ,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;SAGxB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;CACzC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;CAQ5B,CAAA","sourcesContent":["import { ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../../Box'\nimport { Icon } from '../../Icon'\nimport { Text } from '../../Text'\nimport { CommonFieldProps } from '../commonFieldTypes'\n\ninterface InternalFieldProps extends CommonFieldProps {\n  children: ReactNode\n  className?: string\n  htmlFor?: string\n  fieldType: 'field' | 'fieldset'\n}\n\nexport const InternalField = ({\n  children,\n  fieldType,\n  renderAsTitle,\n  htmlFor,\n  className,\n  label,\n  assistiveText,\n  error,\n  errorMsg,\n  required,\n  completed,\n  ...marginProps\n}: InternalFieldProps) => {\n  const labelTag = fieldType === 'field' ? 'label' : 'legend'\n\n  const textColor = error ? 'color.feedback.negative.200' : 'color.text.subtle'\n  return (\n    <Container\n      forwardedAs={fieldType === 'field' ? 'div' : 'fieldset'}\n      className={className}\n      {...marginProps}\n    >\n      {label && (\n        <>\n          {renderAsTitle ? (\n            <Box mb=\"space.200\">\n              <Text tag={labelTag} typo=\"heading-small\" htmlFor={htmlFor}>\n                {label}\n              </Text>\n\n              {assistiveText && (\n                <Text tag=\"p\" color=\"sesame\" mt=\"space.050\">\n                  {assistiveText}\n                </Text>\n              )}\n            </Box>\n          ) : (\n            <Text\n              tag={labelTag}\n              typo=\"label\"\n              color={textColor}\n              htmlFor={htmlFor}\n              mb=\"space.050\"\n            >\n              {label}\n              {required && (\n                <Text\n                  tag=\"span\"\n                  typo=\"body-small\"\n                  color=\"color.feedback.negative.200\"\n                >\n                  *\n                </Text>\n              )}\n            </Text>\n          )}\n        </>\n      )}\n\n      <Box>{children}</Box>\n      {fieldType === 'field' && assistiveText && !renderAsTitle && (\n        <Text\n          tag={labelTag}\n          typo=\"caption\"\n          color={textColor}\n          mt=\"space.050\"\n        >\n          {assistiveText}\n        </Text>\n      )}\n\n      {error &&\n        errorMsg &&\n        (typeof errorMsg === 'string' ? (\n          <Box flex alignItems=\"center\" mt=\"space.100\" gap=\"space.050\">\n            <Icon\n              render=\"warning\"\n              size={16}\n              color=\"color.feedback.negative.200\"\n            />\n            <Text tag=\"span\" typo=\"caption\" color=\"color.feedback.negative.200\">\n              {errorMsg}\n            </Text>\n          </Box>\n        ) : (\n          <Box mt=\"space.100\">{errorMsg}</Box>\n        ))}\n\n      {/* When completed is false, whitespace is rendered */}\n      {completed !== undefined && (\n        <AnimationWrapper\n          $displayStatus={completed}\n          $isError={!!(error && errorMsg)}\n        >\n          <StatusWrapper mt={'space.100'}>\n            <Icon\n              render=\"included\"\n              size={16}\n              color=\"color.feedback.positive.200\"\n            />\n            <Text typo=\"caption\" color=\"color.feedback.positive.200\">\n              Complete\n            </Text>\n          </StatusWrapper>\n        </AnimationWrapper>\n      )}\n    </Container>\n  )\n}\n\nconst AnimationWrapper = styled(Box)<{\n  $displayStatus: boolean\n  $isError: boolean\n}>`\n  width: 0;\n  overflow: hidden;\n\n  ${({ $displayStatus }) =>\n    $displayStatus &&\n    css`\n      transition: width 0.6s ease-in;\n      width: 100%;\n    `}\n\n  /* This enables animation to appear when previous state is error */\n  ${({ $isError }) =>\n    $isError &&\n    css`\n      height: 0;\n    `}\n`\n\nconst StatusWrapper = styled(Box)`\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.space['050']};\n`\n\nconst Container = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n\n  // In case, the element is a 'fieldset', we remove the border\n  border: 0;\n`\n"]}
+{"version":3,"file":"InternalField.js","sourceRoot":"","sources":["../../../src/fields/components/InternalField.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../../Box'\nimport { Icon } from '../../Icon'\nimport { Text } from '../../Text'\nimport { CommonFieldProps } from '../commonFieldTypes'\n\ninterface InternalFieldProps extends CommonFieldProps {\n  children: ReactNode\n  className?: string\n  htmlFor?: string\n  fieldType: 'field' | 'fieldset'\n}\n\nexport const InternalField = ({\n  children,\n  fieldType,\n  renderAsTitle,\n  htmlFor,\n  className,\n  label,\n  assistiveText,\n  error,\n  errorMsg,\n  required,\n  completed,\n  ...marginProps\n}: InternalFieldProps) => {\n  const labelTag = fieldType === 'field' ? 'label' : 'legend'\n\n  const textColor = error ? 'color.feedback.negative.200' : 'color.text.subtle'\n  return (\n    <Container\n      forwardedAs={fieldType === 'field' ? 'div' : 'fieldset'}\n      className={className}\n      {...marginProps}\n    >\n      {label && (\n        <>\n          {renderAsTitle ? (\n            <Box mb=\"space.200\">\n              <Text tag={labelTag} typo=\"heading-small\" htmlFor={htmlFor}>\n                {label}\n              </Text>\n\n              {assistiveText && (\n                <Text tag=\"p\" color=\"sesame\" mt=\"space.050\">\n                  {assistiveText}\n                </Text>\n              )}\n            </Box>\n          ) : (\n            <Text\n              tag={labelTag}\n              typo=\"label\"\n              color={textColor}\n              htmlFor={htmlFor}\n              mb=\"space.050\"\n            >\n              {label}\n              {required && (\n                <Text\n                  tag=\"span\"\n                  typo=\"body-small\"\n                  color=\"color.feedback.negative.200\"\n                >\n                  *\n                </Text>\n              )}\n            </Text>\n          )}\n        </>\n      )}\n\n      <Box>{children}</Box>\n      {fieldType === 'field' && assistiveText && !renderAsTitle && (\n        <Text tag={labelTag} typo=\"caption\" color={textColor} mt=\"space.050\">\n          {assistiveText}\n        </Text>\n      )}\n\n      {error &&\n        errorMsg &&\n        (typeof errorMsg === 'string' ? (\n          <Box flex alignItems=\"center\" mt=\"space.100\" gap=\"space.050\">\n            <Icon\n              render=\"warning\"\n              size={16}\n              color=\"color.feedback.negative.200\"\n            />\n            <Text tag=\"span\" typo=\"caption\" color=\"color.feedback.negative.200\">\n              {errorMsg}\n            </Text>\n          </Box>\n        ) : (\n          <Box mt=\"space.100\">{errorMsg}</Box>\n        ))}\n\n      {/* When completed is false, whitespace is rendered */}\n      {completed !== undefined && (\n        <AnimationWrapper\n          $displayStatus={completed}\n          $isError={!!(error && errorMsg)}\n        >\n          <StatusWrapper mt={'space.100'}>\n            <Icon\n              render=\"included\"\n              size={16}\n              color=\"color.feedback.positive.200\"\n            />\n            <Text typo=\"caption\" color=\"color.feedback.positive.200\">\n              Complete\n            </Text>\n          </StatusWrapper>\n        </AnimationWrapper>\n      )}\n    </Container>\n  )\n}\n\nconst AnimationWrapper = styled(Box)<{\n  $displayStatus: boolean\n  $isError: boolean\n}>`\n  width: 0;\n  overflow: hidden;\n\n  ${({ $displayStatus }) =>\n    $displayStatus &&\n    css`\n      transition: width 0.6s ease-in;\n      width: 100%;\n    `}\n\n  /* This enables animation to appear when previous state is error */\n  ${({ $isError }) =>\n    $isError &&\n    css`\n      height: 0;\n    `}\n`\n\nconst StatusWrapper = styled(Box)`\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.space['050']};\n`\n\nconst Container = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n\n  // In case, the element is a 'fieldset', we remove the border\n  border: 0;\n`\n"]}

package/dist/sharedStyles/shared.styles.d.ts

@@ -1,8 +1,8 @@
 import { IconSize } from '../types';
-export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$size" | "$iconColor"> & {
+export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
     $size: IconSize;
     $iconColor?: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$size" | "$iconColor"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
     $size: IconSize;
     $iconColor?: string;
 }, never>>> & string;

package/dist/testUtils/index.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { RenderOptions } from '@testing-library/react';
-declare const customRender: (ui: ReactElement, options?: Omit<RenderOptions, "wrapper">) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+declare const customRender: (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
 export * from '@testing-library/react';
 export * from '@testing-library/jest-dom/vitest';
 export * from 'jest-styled-components';

package/dist/utils/dateOfBirth/dateOfBirthValidator.utils.d.ts

@@ -1,11 +1,11 @@
 import { DateObject } from '../../TextDateOfBirthInput';
-declare const dateFields: readonly ["day", "month", "year"];
+declare const dateFields: readonly ['day', 'month', 'year'];
 export declare const monthsArray: string[];
 export declare const validators: Record<(typeof dateFields)[number], (dateField: string | undefined | null) => boolean>;
 export declare const isAllowedValue: (value: string | null | undefined) => boolean;
-export declare const getInvalidInputFields: (dateObject: DateObject) => ("month" | "day" | "year")[];
-export declare const getMissingFields: (dateObject: DateObject) => ("month" | "day" | "year")[];
-export declare const getImpossibleFields: (dateObject: DateObject) => ("month" | "day" | "year")[];
+export declare const getInvalidInputFields: (dateObject: DateObject) => ("day" | "month" | "year")[];
+export declare const getMissingFields: (dateObject: DateObject) => ("day" | "month" | "year")[];
+export declare const getImpossibleFields: (dateObject: DateObject) => ("day" | "month" | "year")[];
 export declare const humanReadableJoin: (arr: string[]) => string;
 export declare const createMissingFieldErrorMessage: (missingFields: string[]) => string;
 export declare const createImpossibleFieldErrorMessage: (impossibleFields: string[]) => string;

package/dist/utils/focusOutline.js.map

@@ -1 +1 @@
-{"version":3,"file":"focusOutline.js","sourceRoot":"","sources":["../../src/utils/focusOutline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAEvC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,GAAG,iBAAiB,MACH,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;IAGjC,QAAQ;yBACa,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;;;CAGlE,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;yBAEX,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;;;CAGlE,CAAA","sourcesContent":["import { css } from 'styled-components'\n\nexport const focusOutline = ({\n  selector = '&:focus-visible',\n}: { selector?: string } = {}) => css`\n  outline: 0;\n\n  ${selector} {\n    outline: 2px solid ${({ theme }) => theme.color.border.contrast};\n    outline-offset: 2px;\n  }\n`\n\nexport const focusOutlineStyle = css`\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.color.border.contrast};\n    outline-offset: 2px;\n  }\n`\n"]}
+{"version":3,"file":"focusOutline.js","sourceRoot":"","sources":["../../src/utils/focusOutline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAEvC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,GAAG,iBAAiB,GAC7B,GAA0B,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;IAGjC,QAAQ;yBACa,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;;;CAGlE,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;yBAEX,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;;;CAGlE,CAAA","sourcesContent":["import { css } from 'styled-components'\n\nexport const focusOutline = ({\n  selector = '&:focus-visible',\n}: { selector?: string } = {}) => css`\n  outline: 0;\n\n  ${selector} {\n    outline: 2px solid ${({ theme }) => theme.color.border.contrast};\n    outline-offset: 2px;\n  }\n`\n\nexport const focusOutlineStyle = css`\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.color.border.contrast};\n    outline-offset: 2px;\n  }\n`\n"]}

package/dist/utils/space.d.ts

@@ -7,7 +7,7 @@ export type ThemeSpacing = Prettify<Flatten<Pick<Theme, 'space'>>>;
 export type SpacingProp = '0' | LegacySpacing | ThemeSpacing | {
     custom: number | string;
 };
-export declare const resolveSpacing: (value: SpacingProp | "auto", theme?: Theme) => string;
+export declare const resolveSpacing: (value: SpacingProp | 'auto', theme?: Theme) => string;
 export interface MarginProps {
     m?: ResponsiveProp<SpacingProp>;
     mx?: ResponsiveProp<SpacingProp | 'auto'>;

package/dist/utils/space.js.map

@@ -1 +1 @@
-{"version":3,"file":"space.js","sourceRoot":"","sources":["../../src/utils/space.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Theme } from '../ThemeProvider/ThemeProvider'\nimport { Flatten, Prettify } from '../types'\nimport { getFromObject } from './getFromObject'\nimport { resolveResponsiveProp, ResponsiveProp } from './responsiveProp'\nimport { TransientProps } from './utilTypes'\n\ntype LegacySpacing = '8px' | '12px' | '16px' | '24px' | '32px' | '48px' | '64px'\n\nexport type ThemeSpacing = Prettify<Flatten<Pick<Theme, 'space'>>>\n\nexport type SpacingProp =\n  | '0'\n  | LegacySpacing\n  | ThemeSpacing\n  | { custom: number | string }\n\nexport const resolveSpacing = (value: SpacingProp | 'auto', theme?: Theme) => {\n  if (typeof value === 'string') {\n    if (theme) {\n      const spacingValue = getFromObject({\n        obj: theme,\n        path: value,\n      })\n\n      if (spacingValue !== undefined) {\n        return String(spacingValue)\n      }\n    }\n\n    return value\n  }\n\n  if (typeof value.custom === 'string') {\n    return value.custom\n  }\n\n  return `${value.custom}px`\n}\n\nexport interface MarginProps {\n  m?: ResponsiveProp<SpacingProp>\n  mx?: ResponsiveProp<SpacingProp | 'auto'>\n  my?: ResponsiveProp<SpacingProp>\n  ml?: ResponsiveProp<SpacingProp>\n  mr?: ResponsiveProp<SpacingProp>\n  mt?: ResponsiveProp<SpacingProp>\n  mb?: ResponsiveProp<SpacingProp>\n}\n\nexport interface PaddingProps {\n  p?: ResponsiveProp<SpacingProp>\n  px?: ResponsiveProp<SpacingProp>\n  py?: ResponsiveProp<SpacingProp>\n  pl?: ResponsiveProp<SpacingProp>\n  pr?: ResponsiveProp<SpacingProp>\n  pt?: ResponsiveProp<SpacingProp>\n  pb?: ResponsiveProp<SpacingProp>\n}\n\nexport type TransientMarginProps = TransientProps<MarginProps>\nexport type TransientPaddingProps = TransientProps<PaddingProps>\n\nexport const margin = (\n  props: TransientMarginProps & { theme: Theme },\n): string => {\n  const { $m, $mx, $my, $ml, $mr, $mt, $mb, theme } = props\n\n  return `\n    ${\n      $m\n        ? resolveResponsiveProp(\n            $m,\n            (value) => `margin: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $mx\n        ? resolveResponsiveProp(\n            $mx,\n            (value) => `\n        margin-left: ${resolveSpacing(value, theme)};\n        margin-right: ${resolveSpacing(value, theme)};\n      `,\n          )\n        : ''\n    }\n    ${\n      $my\n        ? resolveResponsiveProp(\n            $my,\n            (value) => `\n        margin-top: ${resolveSpacing(value, theme)};\n        margin-bottom: ${resolveSpacing(value, theme)};\n      `,\n          )\n        : ''\n    }\n    ${\n      $ml\n        ? resolveResponsiveProp(\n            $ml,\n            (value) => `margin-left: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $mr\n        ? resolveResponsiveProp(\n            $mr,\n            (value) => `margin-right: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $mt\n        ? resolveResponsiveProp(\n            $mt,\n            (value) => `margin-top: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $mb\n        ? resolveResponsiveProp(\n            $mb,\n            (value) => `margin-bottom: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n  `\n}\n\nexport const padding = (\n  props: TransientPaddingProps & { theme: Theme },\n): string => {\n  const { $p, $px, $py, $pl, $pr, $pt, $pb, theme } = props\n\n  return `\n    ${\n      $p\n        ? resolveResponsiveProp(\n            $p,\n            (value) => `padding: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $px\n        ? resolveResponsiveProp(\n            $px,\n            (value) => `\n        padding-left: ${resolveSpacing(value, theme)};\n        padding-right: ${resolveSpacing(value, theme)};\n      `,\n          )\n        : ''\n    }\n    ${\n      $py\n        ? resolveResponsiveProp(\n            $py,\n            (value) => `\n        padding-top: ${resolveSpacing(value, theme)};\n        padding-bottom: ${resolveSpacing(value, theme)};\n      `,\n          )\n        : ''\n    }\n    ${\n      $pl\n        ? resolveResponsiveProp(\n            $pl,\n            (value) => `padding-left: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $pr\n        ? resolveResponsiveProp(\n            $pr,\n            (value) => `padding-right: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $pt\n        ? resolveResponsiveProp(\n            $pt,\n            (value) => `padding-top: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $pb\n        ? resolveResponsiveProp(\n            $pb,\n            (value) => `padding-bottom: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n  `\n}\n"]}
+{"version":3,"file":"space.js","sourceRoot":"","sources":["../../src/utils/space.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Theme } from '../ThemeProvider/ThemeProvider'\nimport { Flatten, Prettify } from '../types'\nimport { getFromObject } from './getFromObject'\nimport { resolveResponsiveProp, ResponsiveProp } from './responsiveProp'\nimport { TransientProps } from './utilTypes'\n\ntype LegacySpacing = '8px' | '12px' | '16px' | '24px' | '32px' | '48px' | '64px'\n\nexport type ThemeSpacing = Prettify<Flatten<Pick<Theme, 'space'>>>\n\nexport type SpacingProp =\n  '0' | LegacySpacing | ThemeSpacing | { custom: number | string }\n\nexport const resolveSpacing = (value: SpacingProp | 'auto', theme?: Theme) => {\n  if (typeof value === 'string') {\n    if (theme) {\n      const spacingValue = getFromObject({\n        obj: theme,\n        path: value,\n      })\n\n      if (spacingValue !== undefined) {\n        return String(spacingValue)\n      }\n    }\n\n    return value\n  }\n\n  if (typeof value.custom === 'string') {\n    return value.custom\n  }\n\n  return `${value.custom}px`\n}\n\nexport interface MarginProps {\n  m?: ResponsiveProp<SpacingProp>\n  mx?: ResponsiveProp<SpacingProp | 'auto'>\n  my?: ResponsiveProp<SpacingProp>\n  ml?: ResponsiveProp<SpacingProp>\n  mr?: ResponsiveProp<SpacingProp>\n  mt?: ResponsiveProp<SpacingProp>\n  mb?: ResponsiveProp<SpacingProp>\n}\n\nexport interface PaddingProps {\n  p?: ResponsiveProp<SpacingProp>\n  px?: ResponsiveProp<SpacingProp>\n  py?: ResponsiveProp<SpacingProp>\n  pl?: ResponsiveProp<SpacingProp>\n  pr?: ResponsiveProp<SpacingProp>\n  pt?: ResponsiveProp<SpacingProp>\n  pb?: ResponsiveProp<SpacingProp>\n}\n\nexport type TransientMarginProps = TransientProps<MarginProps>\nexport type TransientPaddingProps = TransientProps<PaddingProps>\n\nexport const margin = (\n  props: TransientMarginProps & { theme: Theme },\n): string => {\n  const { $m, $mx, $my, $ml, $mr, $mt, $mb, theme } = props\n\n  return `\n    ${\n      $m\n        ? resolveResponsiveProp(\n            $m,\n            (value) => `margin: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $mx\n        ? resolveResponsiveProp(\n            $mx,\n            (value) => `\n        margin-left: ${resolveSpacing(value, theme)};\n        margin-right: ${resolveSpacing(value, theme)};\n      `,\n          )\n        : ''\n    }\n    ${\n      $my\n        ? resolveResponsiveProp(\n            $my,\n            (value) => `\n        margin-top: ${resolveSpacing(value, theme)};\n        margin-bottom: ${resolveSpacing(value, theme)};\n      `,\n          )\n        : ''\n    }\n    ${\n      $ml\n        ? resolveResponsiveProp(\n            $ml,\n            (value) => `margin-left: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $mr\n        ? resolveResponsiveProp(\n            $mr,\n            (value) => `margin-right: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $mt\n        ? resolveResponsiveProp(\n            $mt,\n            (value) => `margin-top: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $mb\n        ? resolveResponsiveProp(\n            $mb,\n            (value) => `margin-bottom: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n  `\n}\n\nexport const padding = (\n  props: TransientPaddingProps & { theme: Theme },\n): string => {\n  const { $p, $px, $py, $pl, $pr, $pt, $pb, theme } = props\n\n  return `\n    ${\n      $p\n        ? resolveResponsiveProp(\n            $p,\n            (value) => `padding: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $px\n        ? resolveResponsiveProp(\n            $px,\n            (value) => `\n        padding-left: ${resolveSpacing(value, theme)};\n        padding-right: ${resolveSpacing(value, theme)};\n      `,\n          )\n        : ''\n    }\n    ${\n      $py\n        ? resolveResponsiveProp(\n            $py,\n            (value) => `\n        padding-top: ${resolveSpacing(value, theme)};\n        padding-bottom: ${resolveSpacing(value, theme)};\n      `,\n          )\n        : ''\n    }\n    ${\n      $pl\n        ? resolveResponsiveProp(\n            $pl,\n            (value) => `padding-left: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $pr\n        ? resolveResponsiveProp(\n            $pr,\n            (value) => `padding-right: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $pt\n        ? resolveResponsiveProp(\n            $pt,\n            (value) => `padding-top: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $pb\n        ? resolveResponsiveProp(\n            $pb,\n            (value) => `padding-bottom: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n  `\n}\n"]}

package/dist/utils/useWindowSize.js

@@ -49,6 +49,7 @@ export function useWindowSize(targetRef) {
             height: isBrowser ? window.innerHeight : 0,
         };
     }, [targetRef, isBrowser]);
+    // oxlint-disable-next-line react/react-compiler
     const [viewport, setViewport] = useState(getSize());
     // Element-specific effect when a ref is provided
     useEffect(() => {

package/dist/utils/useWindowSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWindowSize.js","sourceRoot":"","sources":["../../src/utils/useWindowSize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAa,MAAM,OAAO,CAAA;AAInE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,aAAa,CAC3B,SAAyC;IAEzC,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,WAAW,CAAA;IAE/C,MAAM,OAAO,GAAG,WAAW,CAAC,GAAiB,EAAE;QAC7C,IAAI,SAAS,EAAE,OAAO,EAAE,CAAC;YACvB,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,CAAA;YAC5B,OAAO;gBACL,KAAK,EAAE,EAAE,EAAE,WAAW,IAAI,CAAC;gBAC3B,MAAM,EAAE,EAAE,EAAE,YAAY,IAAI,CAAC;aAC9B,CAAA;QACH,CAAC;QACD,OAAO;YACL,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;YACxC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;SAC3C,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAA;IAE1B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAe,OAAO,EAAE,CAAC,CAAA;IAEjE,iDAAiD;IACjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS;YAAE,OAAM;QACtB,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,CAAA;QAC5B,IAAI,CAAC,EAAE;YAAE,OAAM;QAEf,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC,CAAA;QAClD,MAAM,QAAQ,GACZ,OAAO,cAAc,KAAK,WAAW;YACnC,CAAC,CAAC,IAAI,cAAc,CAAC,aAAa,CAAC;YACnC,CAAC,CAAC,IAAI,CAAA;QACV,IAAI,QAAQ;YAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;QAClC,IAAI,SAAS;YAAE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;QAC/D,aAAa,EAAE,CAAA;QACf,OAAO,GAAG,EAAE;YACV,IAAI,QAAQ;gBAAE,QAAQ,CAAC,UAAU,EAAE,CAAA;YACnC,IAAI,SAAS;gBAAE,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;QACpE,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAA;IAEnC,8CAA8C;IAC9C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS;YAAE,OAAM;QACrB,SAAS,YAAY;YACnB,WAAW,CAAC,OAAO,EAAE,CAAC,CAAA;QACxB,CAAC;QACD,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;YAC/C,YAAY,EAAE,CAAA;YACd,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;QACjE,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAA;IAEnC,OAAO,QAAQ,CAAA;AACjB,CAAC","sourcesContent":["import { useState, useEffect, useCallback, RefObject } from 'react'\n\nexport type MeasuredSize = { width: number; height: number }\n\n/**\n * Hook: useWindowSize\n *\n * Responsive measurement utility that returns the current `width` and `height`.\n *\n * Default behaviour (no ref provided):\n * - Tracks the browser viewport using `window.innerWidth` / `window.innerHeight`.\n * - Updates on window resize events.\n *\n * Element measurement (ref provided):\n * - Tracks the rendered size (`offsetWidth` / `offsetHeight`) of the referenced element.\n * - Reacts to intrinsic layout changes via `ResizeObserver` plus window resize as a fallback.\n * - Returns `0` for dimensions until the element is mounted.\n *\n * Performance notes:\n * - Uses a single observer per provided element ref.\n * - Avoid passing a new ref object each render; keep it stable with `useRef`.\n *\n * Return shape is stable: `{ width: number; height: number }`.\n *\n * Example (viewport):\n * ```tsx\n * const { width, height } = useWindowSize();\n * ```\n *\n * Example (element):\n * ```tsx\n * const boxRef = useRef<HTMLDivElement>(null);\n * const size = useWindowSize(boxRef);\n * return <div ref={boxRef}>Measured width: {size.width}</div>;\n * ```\n *\n * @param targetRef Optional ref to an HTMLElement whose size you want to observe.\n * @returns Current measured size `{ width, height }`.\n */\nexport function useWindowSize(\n  targetRef?: RefObject<HTMLElement | null>,\n): MeasuredSize {\n  const isBrowser = typeof window !== 'undefined'\n\n  const getSize = useCallback((): MeasuredSize => {\n    if (targetRef?.current) {\n      const el = targetRef.current\n      return {\n        width: el?.offsetWidth ?? 0,\n        height: el?.offsetHeight ?? 0,\n      }\n    }\n    return {\n      width: isBrowser ? window.innerWidth : 0,\n      height: isBrowser ? window.innerHeight : 0,\n    }\n  }, [targetRef, isBrowser])\n\n  const [viewport, setViewport] = useState<MeasuredSize>(getSize())\n\n  // Element-specific effect when a ref is provided\n  useEffect(() => {\n    if (!targetRef) return\n    const el = targetRef.current\n    if (!el) return\n\n    const handleObserve = () => setViewport(getSize())\n    const observer =\n      typeof ResizeObserver !== 'undefined'\n        ? new ResizeObserver(handleObserve)\n        : null\n    if (observer) observer.observe(el)\n    if (isBrowser) window.addEventListener('resize', handleObserve)\n    handleObserve()\n    return () => {\n      if (observer) observer.disconnect()\n      if (isBrowser) window.removeEventListener('resize', handleObserve)\n    }\n  }, [getSize, isBrowser, targetRef])\n\n  // Window fallback effect when no ref provided\n  useEffect(() => {\n    if (targetRef) return\n    function handleResize() {\n      setViewport(getSize())\n    }\n    if (isBrowser) {\n      window.addEventListener('resize', handleResize)\n      handleResize()\n      return () => window.removeEventListener('resize', handleResize)\n    }\n  }, [getSize, isBrowser, targetRef])\n\n  return viewport\n}\n"]}
+{"version":3,"file":"useWindowSize.js","sourceRoot":"","sources":["../../src/utils/useWindowSize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAa,MAAM,OAAO,CAAA;AAInE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,aAAa,CAC3B,SAAyC;IAEzC,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,WAAW,CAAA;IAE/C,MAAM,OAAO,GAAG,WAAW,CAAC,GAAiB,EAAE;QAC7C,IAAI,SAAS,EAAE,OAAO,EAAE,CAAC;YACvB,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,CAAA;YAC5B,OAAO;gBACL,KAAK,EAAE,EAAE,EAAE,WAAW,IAAI,CAAC;gBAC3B,MAAM,EAAE,EAAE,EAAE,YAAY,IAAI,CAAC;aAC9B,CAAA;QACH,CAAC;QACD,OAAO;YACL,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;YACxC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;SAC3C,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAA;IAE1B,gDAAgD;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAe,OAAO,EAAE,CAAC,CAAA;IAEjE,iDAAiD;IACjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS;YAAE,OAAM;QACtB,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,CAAA;QAC5B,IAAI,CAAC,EAAE;YAAE,OAAM;QAEf,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC,CAAA;QAClD,MAAM,QAAQ,GACZ,OAAO,cAAc,KAAK,WAAW;YACnC,CAAC,CAAC,IAAI,cAAc,CAAC,aAAa,CAAC;YACnC,CAAC,CAAC,IAAI,CAAA;QACV,IAAI,QAAQ;YAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;QAClC,IAAI,SAAS;YAAE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;QAC/D,aAAa,EAAE,CAAA;QACf,OAAO,GAAG,EAAE;YACV,IAAI,QAAQ;gBAAE,QAAQ,CAAC,UAAU,EAAE,CAAA;YACnC,IAAI,SAAS;gBAAE,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;QACpE,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAA;IAEnC,8CAA8C;IAC9C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS;YAAE,OAAM;QACrB,SAAS,YAAY;YACnB,WAAW,CAAC,OAAO,EAAE,CAAC,CAAA;QACxB,CAAC;QACD,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;YAC/C,YAAY,EAAE,CAAA;YACd,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;QACjE,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAA;IAEnC,OAAO,QAAQ,CAAA;AACjB,CAAC","sourcesContent":["import { useState, useEffect, useCallback, RefObject } from 'react'\n\nexport type MeasuredSize = { width: number; height: number }\n\n/**\n * Hook: useWindowSize\n *\n * Responsive measurement utility that returns the current `width` and `height`.\n *\n * Default behaviour (no ref provided):\n * - Tracks the browser viewport using `window.innerWidth` / `window.innerHeight`.\n * - Updates on window resize events.\n *\n * Element measurement (ref provided):\n * - Tracks the rendered size (`offsetWidth` / `offsetHeight`) of the referenced element.\n * - Reacts to intrinsic layout changes via `ResizeObserver` plus window resize as a fallback.\n * - Returns `0` for dimensions until the element is mounted.\n *\n * Performance notes:\n * - Uses a single observer per provided element ref.\n * - Avoid passing a new ref object each render; keep it stable with `useRef`.\n *\n * Return shape is stable: `{ width: number; height: number }`.\n *\n * Example (viewport):\n * ```tsx\n * const { width, height } = useWindowSize();\n * ```\n *\n * Example (element):\n * ```tsx\n * const boxRef = useRef<HTMLDivElement>(null);\n * const size = useWindowSize(boxRef);\n * return <div ref={boxRef}>Measured width: {size.width}</div>;\n * ```\n *\n * @param targetRef Optional ref to an HTMLElement whose size you want to observe.\n * @returns Current measured size `{ width, height }`.\n */\nexport function useWindowSize(\n  targetRef?: RefObject<HTMLElement | null>,\n): MeasuredSize {\n  const isBrowser = typeof window !== 'undefined'\n\n  const getSize = useCallback((): MeasuredSize => {\n    if (targetRef?.current) {\n      const el = targetRef.current\n      return {\n        width: el?.offsetWidth ?? 0,\n        height: el?.offsetHeight ?? 0,\n      }\n    }\n    return {\n      width: isBrowser ? window.innerWidth : 0,\n      height: isBrowser ? window.innerHeight : 0,\n    }\n  }, [targetRef, isBrowser])\n\n  // oxlint-disable-next-line react/react-compiler\n  const [viewport, setViewport] = useState<MeasuredSize>(getSize())\n\n  // Element-specific effect when a ref is provided\n  useEffect(() => {\n    if (!targetRef) return\n    const el = targetRef.current\n    if (!el) return\n\n    const handleObserve = () => setViewport(getSize())\n    const observer =\n      typeof ResizeObserver !== 'undefined'\n        ? new ResizeObserver(handleObserve)\n        : null\n    if (observer) observer.observe(el)\n    if (isBrowser) window.addEventListener('resize', handleObserve)\n    handleObserve()\n    return () => {\n      if (observer) observer.disconnect()\n      if (isBrowser) window.removeEventListener('resize', handleObserve)\n    }\n  }, [getSize, isBrowser, targetRef])\n\n  // Window fallback effect when no ref provided\n  useEffect(() => {\n    if (targetRef) return\n    function handleResize() {\n      setViewport(getSize())\n    }\n    if (isBrowser) {\n      window.addEventListener('resize', handleResize)\n      handleResize()\n      return () => window.removeEventListener('resize', handleResize)\n    }\n  }, [getSize, isBrowser, targetRef])\n\n  return viewport\n}\n"]}