@veracity/vui 5.4.0-alpha.manual.2609151045 → 5.4.0

package/dist/textField/textField.js.map

@@ -1 +1 @@
-{"version":3,"file":"textField.js","names":[],"sources":["../../src/textField/textField.tsx"],"sourcesContent":["import type { RefObject } from 'react'\n\nimport { useEffect, useId, useMemo, useState } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport type { SystemProps } from '../system'\nimport type { ChangeEvent, PropsOf } from '../utils'\nimport type { TextFieldProps } from './textField.types'\n\nimport Box from '../box'\nimport { IconButton } from '../button'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { T } from '../t'\nimport { cs, filterUndefined, isString } from '../utils'\nimport { clearIconSize, displayValueOnlyTextSize, fieldColors } from './consts'\nimport { TextFieldProvider } from './context'\nimport {\n  clampValue,\n  createSyntheticChangeEvent,\n  filterAutoCompleteOption,\n  getHelpTextMargin,\n  getInitialCount,\n  resolveLabel,\n} from './helpers'\nimport TextFieldAutoComplete from './textFieldAutoComplete'\nimport TextFieldHelpText from './textFieldHelpText'\nimport TextFieldIcon from './textFieldIcon'\n\nexport const TextFieldControlBase = styled.divBox<{ $multiline?: boolean }>`\n  align-items: center;\n  color: ${fieldColors.inputText};\n  background-color: white;\n  border-radius: none;\n  border-width: 1px;\n  display: flex;\n  flex-shrink: 0;\n  gap: 8px;\n  outline: none;\n  padding: 0 8px;\n  position: relative;\n  transform: translate3d(0, 0, 0);\n  transition-duration: 0s;\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: ${fieldColors.disabledBackground};\n    border-color: ${fieldColors.disabledBackground};\n    color: ${fieldColors.disabledForeground};\n    & > .vui-icon {\n      color: ${fieldColors.disabledForeground};\n    }\n    & > .vui-icon > path {\n      fill: ${fieldColors.disabledForeground};\n    }\n  }\n\n  /* nested adornment buttons (itemLeft/itemRight, clear) rely on this container's own focus-within ring */\n  & button:focus-visible {\n    --x-ring-color: transparent;\n    outline: none;\n  }\n\n  ${({ $multiline }) =>\n    $multiline &&\n    `\n    align-items: stretch;\n    flex-direction: column;\n    gap: 0;\n    padding: 0;\n  `}\n`\n\nexport const TextFieldInputBase = styled.input`\n  align-self: stretch;\n  background-color: transparent;\n  border: none;\n  border-radius: none;\n  color: inherit;\n  flex: 1;\n  font-size: inherit;\n  min-width: 0;\n  outline: none;\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true']::placeholder {\n    cursor: not-allowed;\n  }\n`\n\nexport const TextFieldTextareaBase = styled.textareaBox`\n  background-color: transparent;\n  border: none;\n  color: inherit;\n  flex: 1 1 auto;\n  font-size: inherit;\n  outline: none;\n  padding: 4px;\n  resize: none;\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n`\n\n/**\n * Displays a text field wrapped in a div to allow extra content, like counter, side icons or buttons.\n * Renders a native `<input>` when `rows` is unset or `<= 1`, and a `<textarea>` when `rows > 1`.\n * Forwards many relevant props to the inner field. Handles different states, like loading or error.\n * Exposes some props to the children via context.\n */\nexport const TextField = vui<'div', TextFieldProps>((props, ref) => {\n  const {\n    // identity & native attributes\n    ariaLabel,\n    autoComplete,\n    autoFocus,\n    className,\n    id: idProp,\n    name,\n    disabled,\n    readOnly,\n    required,\n\n    // value & change handling\n    defaultValue,\n    value,\n    onChange: onChangeProp,\n    onBlur,\n    onFocus,\n\n    // native field constraints\n    max,\n    maxLength,\n    min,\n    minLength,\n    pattern,\n    placeholder,\n    step,\n    type = 'text',\n\n    // multiline-only\n    cols,\n    resize,\n    rows,\n\n    // label\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n\n    // help/error/loading/counter states\n    helpText,\n    errorText,\n    loading,\n    showCount,\n    displayValueOnly,\n\n    // adornments (input-only)\n    allowClear,\n    startIcon,\n    itemLeft,\n    itemRight,\n\n    // autocomplete (input-only)\n    autoCompleteOptions,\n    autoCompleteMaxHeight,\n\n    // custom field override\n    field,\n    fieldProps,\n    fieldRef,\n\n    // sizing/theming\n    size = 'lg',\n    variant,\n\n    ...rest\n  } = props\n\n  const isMultiline = (rows ?? 0) > 1\n\n  const generatedId = useId()\n  const [count, setCount] = useState(() => getInitialCount(props))\n  const [valueInternal, setValueInternal] = useState(value ?? defaultValue ?? '')\n  // caps the resize handle to the textarea's `rows`-driven height plus its padding/border\n  const minHeight = isMultiline && resize && rows ? `calc(${rows} * 1lh + 10px)` : undefined\n  // errorText forces the red variant; loading forces the grey variant\n  const effectiveVariant = errorText ? 'red' : loading ? 'grey' : variant\n\n  const id = idProp || generatedId\n\n  const styles = useStyleConfig('Input', { ...props, variant: effectiveVariant })\n  // the theme's fixed `h` is single-line only; multiline height comes from the native `rows` attribute\n  const { h: _containerHeight, ...containerStylesMultiline } = styles.container ?? {}\n  const containerStyles = isMultiline ? containerStylesMultiline : styles.container\n\n  // sub-components (Icon, HelpText) resolve styles from the same effective variant as the container,\n  // so error/loading overrides are reflected in their styling too\n  const context = useMemo(\n    () => filterUndefined({ disabled, id, size, variant: effectiveVariant }),\n    [disabled, id, size, effectiveVariant],\n  )\n\n  function onChange(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n    const value = clampValue(e.target.value, maxLength)\n\n    setValueInternal(value)\n    setCount(value?.length)\n    // keep the forwarded event consistent with the clamped internal state, so a controlled\n    // parent reading `e.target.value` can't diverge from what the field displays\n    if (value !== e.target.value) {\n      e.target.value = value\n    }\n    onChangeProp?.(e)\n  }\n\n  function onAutoCompleteSelect(value: string) {\n    onChange(createSyntheticChangeEvent(value, 'autoCompleteSelect') as unknown as ChangeEvent<HTMLInputElement>)\n  }\n\n  function onClear() {\n    setValueInternal('')\n    setCount(0)\n    onChange(createSyntheticChangeEvent('', 'onClear') as unknown as ChangeEvent<HTMLInputElement>)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    // disabled overrides everything (state, readOnly); readOnly only overrides when there's no active state\n    bg: disabled ? fieldColors.disabledBackground : readOnly ? fieldColors.readOnlyBackground : undefined,\n    borderColor: disabled\n      ? fieldColors.disabledBackground\n      : readOnly && !loading\n        ? fieldColors.readOnlyBorder\n        : undefined,\n  })\n\n  const fieldAliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    'aria-label': ariaLabel,\n  })\n\n  // link the field to its help/error text so screen readers announce it\n  const helpTextId = helpText ? `${id}-help-text` : undefined\n  const errorTextId = errorText ? `${id}-error-text` : undefined\n  const ariaDescribedBy = [helpTextId, errorTextId].filter(Boolean).join(' ') || undefined\n\n  const commonFieldProps = {\n    value: valueInternal,\n    ...styles.field,\n    ...fieldAliasedProps,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': errorText ? true : undefined,\n  }\n\n  // valid on both <input> and <textarea>\n  const sharedFieldProps = {\n    autoFocus,\n    disabled,\n    id,\n    maxLength,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    placeholder,\n    readOnly,\n    required,\n  }\n\n  const textareaFieldProps = {\n    ...sharedFieldProps,\n    cols,\n    rows,\n    ...commonFieldProps,\n    ...(fieldProps as PropsOf<'textarea', SystemProps>),\n  }\n\n  const inputFieldProps = {\n    ...sharedFieldProps,\n    max,\n    min,\n    minLength,\n    pattern,\n    step,\n    type,\n    autoComplete: autoCompleteOptions?.length ? 'off' : autoComplete,\n    ...commonFieldProps,\n    ...(fieldProps as PropsOf<'input', SystemProps>),\n  }\n\n  useEffect(() => {\n    if (value === undefined && defaultValue !== undefined) return\n    setValueInternal(value ?? '')\n    setCount(value?.toString()?.length ? `${value}`.length : 0)\n  }, [value])\n\n  const filterAutoCompleteOptions = (i: string) => filterAutoCompleteOption(`${valueInternal}`, i)\n\n  const resolvedLabel = resolveLabel(label, id, disabled, labelMarkOptional, labelTooltipText, styles.label)\n\n  const counterNode = showCount && (\n    <T\n      className=\"vui-textFieldCount\"\n      color={maxLength && count > maxLength ? fieldColors.error : fieldColors.helpText}\n      position=\"absolute\"\n      right={0}\n      size=\"sm\"\n      top=\"100%\"\n    >\n      {count} {maxLength ? `/ ${maxLength}` : null}\n    </T>\n  )\n\n  // hidden type needs no visible container; render only the native input, but still forward\n  // refs, props and change handling so it behaves like any other TextField\n  if (type === 'hidden') {\n    return (\n      <input\n        defaultValue={defaultValue}\n        id={id}\n        name={name}\n        onChange={onChange}\n        ref={fieldRef as RefObject<HTMLInputElement | null> | undefined}\n        type=\"hidden\"\n        value={valueInternal as string}\n        {...(fieldProps as PropsOf<'input', SystemProps>)}\n      />\n    )\n  }\n\n  return (\n    <TextFieldProvider value={context}>\n      {displayValueOnly ? (\n        <T className={cs('vui-textField-value', className)} size={displayValueOnlyTextSize[size]}>\n          {value || defaultValue}\n        </T>\n      ) : (\n        <TextFieldAutoComplete\n          autoCompleteMaxHeight={autoCompleteMaxHeight}\n          autoCompleteOptions={isMultiline ? undefined : autoCompleteOptions}\n          filterAutoCompleteOptions={filterAutoCompleteOptions}\n          onAutoCompleteSelect={onAutoCompleteSelect}\n        >\n          <Box className=\"vui-textFieldContainer\" column gap=\"4px\" ref={ref} {...rest}>\n            {resolvedLabel}\n\n            <TextFieldControlBase\n              $multiline={isMultiline}\n              className={cs('vui-textField', className)}\n              minH={isMultiline && resize ? minHeight : undefined}\n              overflow={isMultiline && resize ? 'auto' : undefined}\n              resize={isMultiline && resize ? 'vertical' : undefined}\n              {...containerStyles}\n              {...aliasedProps}\n            >\n              {!isMultiline && (\n                <>\n                  {itemLeft}\n                  {isString(startIcon) ? <TextFieldIcon name={startIcon} /> : startIcon}\n                </>\n              )}\n              {field ??\n                (isMultiline ? (\n                  <TextFieldTextareaBase className=\"vui-textFieldField\" ref={fieldRef} {...textareaFieldProps} />\n                ) : (\n                  <TextFieldInputBase className=\"vui-textFieldField\" ref={fieldRef} {...inputFieldProps} />\n                ))}\n              {!isMultiline && (\n                <>\n                  {itemRight}\n                  {loading && (\n                    <TextFieldIcon\n                      animation=\"vui-spin 0.6s linear infinite\"\n                      name=\"uiSpinnerThird\"\n                      pathFill={[fieldColors.loading, fieldColors.loadingBar]}\n                    />\n                  )}\n                  {allowClear && !!valueInternal && (\n                    <IconButton\n                      icon=\"uiTimes\"\n                      onClick={onClear}\n                      size={clearIconSize[size]}\n                      title=\"Clear\"\n                      variant=\"tertiary\"\n                    />\n                  )}\n                </>\n              )}\n              {counterNode}\n            </TextFieldControlBase>\n            {!!helpText && (\n              <TextFieldHelpText id={helpTextId} mr={getHelpTextMargin(showCount)}>\n                {helpText}\n              </TextFieldHelpText>\n            )}\n            {!!errorText && (\n              <TextFieldHelpText id={errorTextId} isError mr={getHelpTextMargin(showCount)}>\n                {errorText}\n              </TextFieldHelpText>\n            )}\n          </Box>\n        </TextFieldAutoComplete>\n      )}\n    </TextFieldProvider>\n  )\n}) as VuiComponent<'div', TextFieldProps> & {\n  AutoComplete: typeof TextFieldAutoComplete\n  HelpText: typeof TextFieldHelpText\n  Icon: typeof TextFieldIcon\n}\n\nTextField.AutoComplete = TextFieldAutoComplete\nTextField.HelpText = TextFieldHelpText\nTextField.Icon = TextFieldIcon\nTextField.displayName = 'TextField'\n\nexport default TextField\n"],"mappings":"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"}
+{"version":3,"file":"textField.js","names":[],"sources":["../../src/textField/textField.tsx"],"sourcesContent":["import type { ReactNode, RefObject } from 'react'\n\nimport { useEffect, useId, useMemo, useState } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport type { SystemProps } from '../system'\nimport type { ChangeEvent, PropsOf } from '../utils'\nimport type { TextFieldProps } from './textField.types'\n\nimport Box from '../box'\nimport { IconButton } from '../button'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { T } from '../t'\nimport { cs, filterUndefined, isString } from '../utils'\nimport { clearIconSize, containerGap, displayValueOnlyTextSize, fieldColors, helpRowGap } from './consts'\nimport { TextFieldProvider } from './context'\nimport {\n  clampValue,\n  createSyntheticChangeEvent,\n  filterAutoCompleteOption,\n  getInitialCount,\n  resolveLabel,\n} from './helpers'\nimport TextFieldAutoComplete from './textFieldAutoComplete'\nimport TextFieldHelpText from './textFieldHelpText'\nimport TextFieldIcon from './textFieldIcon'\n\nexport const TextFieldControlBase = styled.divBox<{ $multiline?: boolean }>`\n  align-items: center;\n  color: ${fieldColors.inputText};\n  background-color: white;\n  border-radius: none;\n  border-width: 1px;\n  display: flex;\n  flex-shrink: 0;\n  gap: 8px;\n  outline: none;\n  padding: 0 8px;\n  position: relative;\n  transform: translate3d(0, 0, 0);\n  transition-duration: 0s;\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: ${fieldColors.disabledBackground};\n    border-color: ${fieldColors.disabledBackground};\n    color: ${fieldColors.disabledForeground};\n    & > .vui-icon {\n      color: ${fieldColors.disabledForeground};\n    }\n    & > .vui-icon > path {\n      fill: ${fieldColors.disabledForeground};\n    }\n  }\n\n  /* nested adornment buttons (itemLeft/itemRight, clear) rely on this container's own focus-within ring */\n  & button:focus-visible {\n    --x-ring-color: transparent;\n    outline: none;\n  }\n\n  ${({ $multiline }) =>\n    $multiline &&\n    `\n    align-items: stretch;\n    flex-direction: column;\n    gap: 0;\n    padding: 0;\n  `}\n`\n\nexport const TextFieldInputBase = styled.input`\n  align-self: stretch;\n  background-color: transparent;\n  border: none;\n  border-radius: none;\n  color: inherit;\n  flex: 1;\n  font-size: inherit;\n  min-width: 0;\n  outline: none;\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true']::placeholder {\n    cursor: not-allowed;\n  }\n`\n\nexport const TextFieldTextareaBase = styled.textareaBox`\n  background-color: transparent;\n  border: none;\n  color: inherit;\n  flex: 1 1 auto;\n  font-size: inherit;\n  outline: none;\n  padding: 4px;\n  resize: none;\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n`\n\ntype TextFieldFooterProps = {\n  count: number\n  descriptionId?: string\n  errorText?: ReactNode\n  helpText?: ReactNode\n  maxLength?: number\n  showCount?: boolean\n}\n\n/** Renders the help/error text alongside the character counter in a single row. */\nfunction TextFieldFooter({ count, descriptionId, errorText, helpText, maxLength, showCount }: TextFieldFooterProps) {\n  if (!helpText && !errorText && !showCount) return null\n\n  // errorText overrides helpText; both share the same slot\n  const message = errorText ?? helpText\n  const isCountOverMax = !!maxLength && count > maxLength\n\n  return (\n    <Box alignItems=\"flex-start\" gap={helpRowGap}>\n      <Box flex=\"1\">\n        {message && (\n          <TextFieldHelpText id={descriptionId} isError={!!errorText}>\n            {message}\n          </TextFieldHelpText>\n        )}\n      </Box>\n      {showCount && (\n        <TextFieldHelpText className=\"vui-textFieldCount\" isError={isCountOverMax}>\n          {count} {maxLength ? `/ ${maxLength}` : null}\n        </TextFieldHelpText>\n      )}\n    </Box>\n  )\n}\n\n/**\n * Displays a text field wrapped in a div to allow extra content, like counter, side icons or buttons.\n * Renders a native `<input>` when `rows` is unset or `<= 1`, and a `<textarea>` when `rows > 1`.\n * Forwards many relevant props to the inner field. Handles different states, like loading or error.\n * Exposes some props to the children via context.\n */\nexport const TextField = vui<'div', TextFieldProps>((props, ref) => {\n  const {\n    // identity & native attributes\n    ariaLabel,\n    autoComplete,\n    autoFocus,\n    className,\n    id: idProp,\n    name,\n    disabled,\n    readOnly,\n    required,\n\n    // value & change handling\n    defaultValue,\n    value,\n    onChange: onChangeProp,\n    onBlur,\n    onFocus,\n\n    // native field constraints\n    max,\n    maxLength,\n    min,\n    minLength,\n    pattern,\n    placeholder,\n    step,\n    type = 'text',\n\n    // multiline-only\n    cols,\n    resize,\n    rows,\n\n    // label\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n\n    // help/error/loading/counter states\n    helpText,\n    errorText,\n    loading,\n    showCount,\n    displayValueOnly,\n\n    // adornments (input-only)\n    allowClear,\n    startIcon,\n    itemLeft,\n    itemRight,\n\n    // autocomplete (input-only)\n    autoCompleteOptions,\n    autoCompleteMaxHeight,\n\n    // custom field override\n    field,\n    fieldProps,\n    fieldRef,\n\n    // sizing/theming\n    size = 'lg',\n    variant,\n\n    ...rest\n  } = props\n\n  const isMultiline = (rows ?? 0) > 1\n\n  const generatedId = useId()\n  const [count, setCount] = useState(() => getInitialCount(props))\n  const [valueInternal, setValueInternal] = useState(value ?? defaultValue ?? '')\n  // caps the resize handle to the textarea's `rows`-driven height plus its padding/border\n  const minHeight = isMultiline && resize && rows ? `calc(${rows} * 1lh + 10px)` : undefined\n  // errorText forces the red variant; loading forces the grey variant\n  const effectiveVariant = errorText ? 'red' : loading ? 'grey' : variant\n\n  const id = idProp || generatedId\n\n  const styles = useStyleConfig('Input', { ...props, variant: effectiveVariant })\n  // the theme's fixed `h` is single-line only; multiline height comes from the native `rows` attribute\n  const { h: _containerHeight, ...containerStylesMultiline } = styles.container ?? {}\n  const containerStyles = isMultiline ? containerStylesMultiline : styles.container\n\n  // sub-components (Icon, HelpText) resolve styles from the same effective variant as the container,\n  // so error/loading overrides are reflected in their styling too\n  const context = useMemo(\n    () => filterUndefined({ disabled, id, size, variant: effectiveVariant }),\n    [disabled, id, size, effectiveVariant],\n  )\n\n  function onChange(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n    const value = clampValue(e.target.value, maxLength)\n\n    setValueInternal(value)\n    setCount(value?.length)\n    // keep the forwarded event consistent with the clamped internal state, so a controlled\n    // parent reading `e.target.value` can't diverge from what the field displays\n    if (value !== e.target.value) {\n      e.target.value = value\n    }\n    onChangeProp?.(e)\n  }\n\n  function onAutoCompleteSelect(value: string) {\n    onChange(createSyntheticChangeEvent(value, 'autoCompleteSelect') as unknown as ChangeEvent<HTMLInputElement>)\n  }\n\n  function onClear() {\n    setValueInternal('')\n    setCount(0)\n    onChange(createSyntheticChangeEvent('', 'onClear') as unknown as ChangeEvent<HTMLInputElement>)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    // disabled overrides everything (state, readOnly); readOnly only overrides when there's no active state\n    bg: disabled ? fieldColors.disabledBackground : readOnly ? fieldColors.readOnlyBackground : undefined,\n    borderColor: disabled\n      ? fieldColors.disabledBackground\n      : readOnly && !loading\n        ? fieldColors.readOnlyBorder\n        : undefined,\n  })\n\n  const fieldAliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    'aria-label': ariaLabel,\n  })\n\n  // link the field to its help/error text so screen readers announce it; errorText overrides helpText\n  const descriptionId = helpText || errorText ? `${id}-description` : undefined\n\n  const commonFieldProps = {\n    value: valueInternal,\n    ...styles.field,\n    ...fieldAliasedProps,\n    'aria-describedby': descriptionId,\n    'aria-invalid': errorText ? true : undefined,\n  }\n\n  // valid on both <input> and <textarea>\n  const sharedFieldProps = {\n    autoFocus,\n    disabled,\n    id,\n    maxLength,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    placeholder,\n    readOnly,\n    required,\n  }\n\n  const textareaFieldProps = {\n    ...sharedFieldProps,\n    cols,\n    rows,\n    ...commonFieldProps,\n    ...(fieldProps as PropsOf<'textarea', SystemProps>),\n  }\n\n  const inputFieldProps = {\n    ...sharedFieldProps,\n    max,\n    min,\n    minLength,\n    pattern,\n    step,\n    type,\n    autoComplete: autoCompleteOptions?.length ? 'off' : autoComplete,\n    ...commonFieldProps,\n    ...(fieldProps as PropsOf<'input', SystemProps>),\n  }\n\n  useEffect(() => {\n    if (value === undefined && defaultValue !== undefined) return\n    setValueInternal(value ?? '')\n    setCount(value?.toString()?.length ? `${value}`.length : 0)\n  }, [value])\n\n  const filterAutoCompleteOptions = (i: string) => filterAutoCompleteOption(`${valueInternal}`, i)\n\n  const resolvedLabel = resolveLabel(label, id, disabled, labelMarkOptional, labelTooltipText, styles.label)\n\n  // hidden type needs no visible container; render only the native input, but still forward\n  // refs, props and change handling so it behaves like any other TextField\n  if (type === 'hidden') {\n    return (\n      <input\n        defaultValue={defaultValue}\n        id={id}\n        name={name}\n        onChange={onChange}\n        ref={fieldRef as RefObject<HTMLInputElement | null> | undefined}\n        type=\"hidden\"\n        value={valueInternal as string}\n        {...(fieldProps as PropsOf<'input', SystemProps>)}\n      />\n    )\n  }\n\n  return (\n    <TextFieldProvider value={context}>\n      {displayValueOnly ? (\n        <T className={cs('vui-textField-value', className)} size={displayValueOnlyTextSize[size]}>\n          {value || defaultValue}\n        </T>\n      ) : (\n        <TextFieldAutoComplete\n          autoCompleteMaxHeight={autoCompleteMaxHeight}\n          autoCompleteOptions={isMultiline ? undefined : autoCompleteOptions}\n          filterAutoCompleteOptions={filterAutoCompleteOptions}\n          onAutoCompleteSelect={onAutoCompleteSelect}\n        >\n          <Box className=\"vui-textFieldContainer\" column gap={containerGap} ref={ref} {...rest}>\n            {resolvedLabel}\n\n            <TextFieldControlBase\n              $multiline={isMultiline}\n              className={cs('vui-textField', className)}\n              minH={isMultiline && resize ? minHeight : undefined}\n              overflow={isMultiline && resize ? 'auto' : undefined}\n              resize={isMultiline && resize ? 'vertical' : undefined}\n              {...containerStyles}\n              {...aliasedProps}\n            >\n              {!isMultiline && (\n                <>\n                  {itemLeft}\n                  {isString(startIcon) ? <TextFieldIcon name={startIcon} /> : startIcon}\n                </>\n              )}\n              {field ??\n                (isMultiline ? (\n                  <TextFieldTextareaBase className=\"vui-textFieldField\" ref={fieldRef} {...textareaFieldProps} />\n                ) : (\n                  <TextFieldInputBase className=\"vui-textFieldField\" ref={fieldRef} {...inputFieldProps} />\n                ))}\n              {!isMultiline && (\n                <>\n                  {itemRight}\n                  {loading && (\n                    <TextFieldIcon\n                      animation=\"vui-spin 0.6s linear infinite\"\n                      name=\"uiSpinnerThird\"\n                      pathFill={[fieldColors.loading, fieldColors.loadingBar]}\n                    />\n                  )}\n                  {allowClear && !!valueInternal && (\n                    <IconButton\n                      icon=\"uiTimes\"\n                      onClick={onClear}\n                      size={clearIconSize[size]}\n                      title=\"Clear\"\n                      variant=\"tertiary\"\n                    />\n                  )}\n                </>\n              )}\n            </TextFieldControlBase>\n            <TextFieldFooter\n              count={count}\n              descriptionId={descriptionId}\n              errorText={errorText}\n              helpText={helpText}\n              maxLength={maxLength}\n              showCount={showCount}\n            />\n          </Box>\n        </TextFieldAutoComplete>\n      )}\n    </TextFieldProvider>\n  )\n}) as VuiComponent<'div', TextFieldProps> & {\n  AutoComplete: typeof TextFieldAutoComplete\n  HelpText: typeof TextFieldHelpText\n  Icon: typeof TextFieldIcon\n}\n\nTextField.AutoComplete = TextFieldAutoComplete\nTextField.HelpText = TextFieldHelpText\nTextField.Icon = TextFieldIcon\nTextField.displayName = 'TextField'\n\nexport default TextField\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA2BA,MAAa,uBAAuB,OAAO,MAAgC;;WAEhE,YAAY,UAAU;;;;;;;;;;;;;;;;;wBAiBT,YAAY,mBAAmB;oBACnC,YAAY,mBAAmB;aACtC,YAAY,mBAAmB;;eAE7B,YAAY,mBAAmB;;;cAGhC,YAAY,mBAAmB;;;;;;;;;;KAUxC,EAAE,iBACH,cACA;;;;;IAKA;;AAGJ,MAAa,qBAAqB,OAAO,KAAK;;;;;;;;;;;;;;;;AAiB9C,MAAa,wBAAwB,OAAO,WAAW;;;;;;;;;;;;;;;;AA0BvD,SAAS,gBAAgB,EAAE,OAAO,eAAe,WAAW,UAAU,WAAW,aAAmC;CAClH,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,WAAW,OAAO;CAGlD,MAAM,UAAU,aAAa;CAG7B,OACE,qBAAC,KAAD;EAAK,YAAW;EAAa;YAA7B,CACE,oBAAC,KAAD;GAAK,MAAK;aACP,WACC,oBAAC,mBAAD;IAAmB,IAAI;IAAe,SAAS,CAAC,CAAC;cAC9C;GACgB;EAElB,IACJ,aACC,qBAAC,mBAAD;GAAmB,WAAU;GAAqB,SAZjC,CAAC,CAAC,aAAa,QAAQ;aAYxC;IACG;IAAM;IAAE,YAAY,KAAK,cAAc;GACvB;IAElB;;AAET;;;;;;;AAQA,MAAa,YAAY,KAA4B,OAAO,QAAQ;CAClE,MAAM,EAEJ,WACA,cACA,WACA,WACA,IAAI,QACJ,MACA,UACA,UACA,UAGA,cACA,OACA,UAAU,cACV,QACA,SAGA,KACA,WACA,KACA,WACA,SACA,aACA,MACA,OAAO,QAGP,MACA,QACA,MAGA,OACA,mBACA,kBAGA,UACA,WACA,SACA,WACA,kBAGA,YACA,WACA,UACA,WAGA,qBACA,uBAGA,OACA,YACA,UAGA,OAAO,MACP,SAEA,GAAG,SACD;CAEJ,MAAM,eAAe,QAAQ,KAAK;CAElC,MAAM,cAAc,MAAM;CAC1B,MAAM,CAAC,OAAO,YAAY,eAAe,gBAAgB,KAAK,CAAC;CAC/D,MAAM,CAAC,eAAe,oBAAoB,SAAS,SAAS,gBAAgB,EAAE;CAE9E,MAAM,YAAY,eAAe,UAAU,OAAO,QAAQ,KAAK,kBAAkB;CAEjF,MAAM,mBAAmB,YAAY,QAAQ,UAAU,SAAS;CAEhE,MAAM,KAAK,UAAU;CAErB,MAAM,SAAS,eAAe,SAAS;EAAE,GAAG;EAAO,SAAS;CAAiB,CAAC;CAE9E,MAAM,EAAE,GAAG,kBAAkB,GAAG,6BAA6B,OAAO,aAAa,CAAC;CAClF,MAAM,kBAAkB,cAAc,2BAA2B,OAAO;CAIxE,MAAM,UAAU,cACR,gBAAgB;EAAE;EAAU;EAAI;EAAM,SAAS;CAAiB,CAAC,GACvE;EAAC;EAAU;EAAI;EAAM;CAAgB,CACvC;CAEA,SAAS,SAAS,GAAwD;EACxE,MAAM,QAAQ,WAAW,EAAE,OAAO,OAAO,SAAS;EAElD,iBAAiB,KAAK;EACtB,SAAS,OAAO,MAAM;EAGtB,IAAI,UAAU,EAAE,OAAO,OACrB,EAAE,OAAO,QAAQ;EAEnB,eAAe,CAAC;CAClB;CAEA,SAAS,qBAAqB,OAAe;EAC3C,SAAS,2BAA2B,OAAO,oBAAoB,CAA6C;CAC9G;CAEA,SAAS,UAAU;EACjB,iBAAiB,EAAE;EACnB,SAAS,CAAC;EACV,SAAS,2BAA2B,IAAI,SAAS,CAA6C;CAChG;CAEA,MAAM,eAAe,gBAAgB;EACnC,iBAAiB;EAEjB,IAAI,WAAW,YAAY,qBAAqB,WAAW,YAAY,qBAAqB;EAC5F,aAAa,WACT,YAAY,qBACZ,YAAY,CAAC,UACX,YAAY,iBACZ;CACR,CAAC;CAED,MAAM,oBAAoB,gBAAgB;EACxC,iBAAiB;EACjB,cAAc;CAChB,CAAC;CAGD,MAAM,gBAAgB,YAAY,YAAY,GAAG,GAAG,gBAAgB;CAEpE,MAAM,mBAAmB;EACvB,OAAO;EACP,GAAG,OAAO;EACV,GAAG;EACH,oBAAoB;EACpB,gBAAgB,YAAY,OAAO;CACrC;CAGA,MAAM,mBAAmB;EACvB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,MAAM,qBAAqB;EACzB,GAAG;EACH;EACA;EACA,GAAG;EACH,GAAI;CACN;CAEA,MAAM,kBAAkB;EACtB,GAAG;EACH;EACA;EACA;EACA;EACA;EACA;EACA,cAAc,qBAAqB,SAAS,QAAQ;EACpD,GAAG;EACH,GAAI;CACN;CAEA,gBAAgB;EACd,IAAI,UAAU,UAAa,iBAAiB,QAAW;EACvD,iBAAiB,SAAS,EAAE;EAC5B,SAAS,OAAO,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,SAAS,CAAC;CAC5D,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,6BAA6B,MAAc,yBAAyB,GAAG,iBAAiB,CAAC;CAE/F,MAAM,gBAAgB,aAAa,OAAO,IAAI,UAAU,mBAAmB,kBAAkB,OAAO,KAAK;CAIzG,IAAI,SAAS,UACX,OACE,oBAAC,SAAD;EACgB;EACV;EACE;EACI;EACV,KAAK;EACL,MAAK;EACL,OAAO;EACP,GAAK;CACN;CAIL,OACE,oBAAC,mBAAD;EAAmB,OAAO;YACvB,mBACC,oBAAC,GAAD;GAAG,WAAW,GAAG,uBAAuB,SAAS;GAAG,MAAM,yBAAyB;aAChF,SAAS;EACT,KAEH,oBAAC,uBAAD;GACyB;GACvB,qBAAqB,cAAc,SAAY;GACpB;GACL;aAEtB,qBAAC,KAAD;IAAK,WAAU;IAAyB;IAAO;IAAwB;IAAK,GAAI;cAAhF;KACG;KAED,qBAAC,sBAAD;MACE,YAAY;MACZ,WAAW,GAAG,iBAAiB,SAAS;MACxC,MAAM,eAAe,SAAS,YAAY;MAC1C,UAAU,eAAe,SAAS,SAAS;MAC3C,QAAQ,eAAe,SAAS,aAAa;MAC7C,GAAI;MACJ,GAAI;gBAPN;OASG,CAAC,eACA,8CACG,UACA,SAAS,SAAS,IAAI,oBAAC,eAAD,EAAe,MAAM,UAAY,KAAI,SAC5D;OAEH,UACE,cACC,oBAAC,uBAAD;QAAuB,WAAU;QAAqB,KAAK;QAAU,GAAI;OAAqB,KAE9F,oBAAC,oBAAD;QAAoB,WAAU;QAAqB,KAAK;QAAU,GAAI;OAAkB;OAE3F,CAAC,eACA;QACG;QACA,WACC,oBAAC,eAAD;SACE,WAAU;SACV,MAAK;SACL,UAAU,CAAC,YAAY,SAAS,YAAY,UAAU;QACvD;QAEF,cAAc,CAAC,CAAC,iBACf,oBAAC,YAAD;SACE,MAAK;SACL,SAAS;SACT,MAAM,cAAc;SACpB,OAAM;SACN,SAAQ;QACT;OAEH;MAEgB;;KACtB,oBAAC,iBAAD;MACS;MACQ;MACJ;MACD;MACC;MACA;KACZ;IACE;;EACgB;CAER;AAEvB,CAAC;AAMD,UAAU,eAAe;AACzB,UAAU,WAAW;AACrB,UAAU,OAAO;AACjB,UAAU,cAAc"}

package/dist/textField/textFieldAutoComplete.js

@@ -35,5 +35,5 @@ const TextFieldAutoComplete = memo(function TextFieldAutoComplete({ autoComplete
 
 //#endregion
 export { TextFieldAutoComplete, TextFieldAutoComplete as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=textFieldAutoComplete.js.map

package/dist/textField/textFieldHelpText.js

@@ -46,5 +46,5 @@ TextFieldHelpText.displayName = "TextFieldHelpText";
 
 //#endregion
 export { TextFieldHelpText, TextFieldHelpText as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=textFieldHelpText.js.map

package/dist/textField/textFieldIcon.js

@@ -25,5 +25,5 @@ TextFieldIcon.displayName = "TextFieldIcon";
 
 //#endregion
 export { TextFieldIcon, TextFieldIcon as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=textFieldIcon.js.map

package/dist/textField/theme.js

@@ -85,5 +85,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=theme.js.map

package/dist/textarea/textarea.js

@@ -26,5 +26,5 @@ Textarea.displayName = "Textarea";
 
 //#endregion
 export { Textarea, Textarea as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=textarea.js.map

package/dist/textarea/theme.js

@@ -55,5 +55,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=theme.js.map

package/dist/theme/components.js

@@ -124,5 +124,5 @@ var components_default = {
 
 //#endregion
 export { components_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=components.js.map

package/dist/theme/defaultTheme.js

@@ -9,5 +9,5 @@ const defaultTheme = {
 
 //#endregion
 export { defaultTheme as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=defaultTheme.js.map

package/dist/theme/extendTheme.js

@@ -9,5 +9,5 @@ function extendTheme(extensions) {
 
 //#endregion
 export { extendTheme };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=extendTheme.js.map

package/dist/theme/foundations/animations.js

@@ -16,5 +16,5 @@ var animations_default = {
 
 //#endregion
 export { animations_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=animations.js.map

package/dist/theme/foundations/borders.js

@@ -3,5 +3,5 @@ var borders_default = {};
 
 //#endregion
 export { borders_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=borders.js.map

package/dist/theme/foundations/colors.js

@@ -480,5 +480,5 @@ var colors_default = {
 
 //#endregion
 export { blue, darkBlue, colors_default as default, digiGreen, disabled, earth, energyRed, focusColor, green, grey, landGreen, pink, prussian, red, sandstone, seaBlue, skyBlue, sunflower, terracotta, warmGrey, yellow };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=colors.js.map

package/dist/theme/foundations/durations.js

@@ -8,5 +8,5 @@ var durations_default = {
 
 //#endregion
 export { durations_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=durations.js.map

package/dist/theme/foundations/fontSizes.js

@@ -8,5 +8,5 @@ var fontSizes_default = {
 
 //#endregion
 export { fontSizes_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=fontSizes.js.map

package/dist/theme/foundations/fontWeights.js

@@ -7,5 +7,5 @@ var fontWeights_default = {
 
 //#endregion
 export { fontWeights_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=fontWeights.js.map

package/dist/theme/foundations/fonts.js

@@ -7,5 +7,5 @@ var fonts_default = {
 
 //#endregion
 export { fonts_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=fonts.js.map

package/dist/theme/foundations/gridTemplateColumns.js

@@ -16,5 +16,5 @@ var gridTemplateColumns_default = {
 
 //#endregion
 export { gridTemplateColumns_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=gridTemplateColumns.js.map

package/dist/theme/foundations/gridTemplateRows.js

@@ -10,5 +10,5 @@ var gridTemplateRows_default = {
 
 //#endregion
 export { gridTemplateRows_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=gridTemplateRows.js.map

package/dist/theme/foundations/index.js

@@ -45,5 +45,5 @@ var foundations_default = {
 
 //#endregion
 export { foundations_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=index.js.map

package/dist/theme/foundations/radii.js

@@ -14,5 +14,5 @@ var radii_default = {
 
 //#endregion
 export { radii_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=radii.js.map

package/dist/theme/foundations/ringWidths.js

@@ -3,5 +3,5 @@ var ringWidths_default = {};
 
 //#endregion
 export { ringWidths_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=ringWidths.js.map

package/dist/theme/foundations/screens.js

@@ -11,5 +11,5 @@ var screens_default = {
 
 //#endregion
 export { screens_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=screens.js.map

package/dist/theme/foundations/shadows.js

@@ -39,5 +39,5 @@ var shadows_default = {
 
 //#endregion
 export { shadows_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=shadows.js.map

package/dist/theme/foundations/sizes.js

@@ -3,5 +3,5 @@ var sizes_default = {};
 
 //#endregion
 export { sizes_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=sizes.js.map

package/dist/theme/foundations/spaces.js

@@ -31,5 +31,5 @@ var spaces_default = {
 
 //#endregion
 export { spaces_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=spaces.js.map

package/dist/theme/foundations/timingFunctions.js

@@ -3,5 +3,5 @@ var timingFunctions_default = {};
 
 //#endregion
 export { timingFunctions_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=timingFunctions.js.map

package/dist/theme/foundations/transformers.js

@@ -14,5 +14,5 @@ var transformers_default = {
 
 //#endregion
 export { transformers_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=transformers.js.map

package/dist/theme/foundations/transforms.js

@@ -3,5 +3,5 @@ var transforms_default = {};
 
 //#endregion
 export { transforms_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=transforms.js.map

package/dist/theme/foundations/transitions.js

@@ -3,5 +3,5 @@ var transitions_default = {};
 
 //#endregion
 export { transitions_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=transitions.js.map

package/dist/theme/foundations/zIndices.js

@@ -11,5 +11,5 @@ var zIndices_default = {
 
 //#endregion
 export { zIndices_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=zIndices.js.map

package/dist/theme/themePlaceholder.js

@@ -14,5 +14,5 @@ var themePlaceholder_default = {
 
 //#endregion
 export { themePlaceholder_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=themePlaceholder.js.map

package/dist/toast/ToastItem.js

@@ -199,5 +199,5 @@ ToastItem.displayName = "ToastItem";
 
 //#endregion
 export { ToastItem };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=ToastItem.js.map

package/dist/toast/Toaster.js

@@ -43,5 +43,5 @@ var Toaster_default = memo(Toaster);
 
 //#endregion
 export { ToastItem, Toaster_default as default, toasterWidth };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=Toaster.js.map

package/dist/toast/theme.js

@@ -28,5 +28,5 @@ const intentStyle = Object.fromEntries(Object.entries(intentTokens).map(([intent
 
 //#endregion
 export { intentStyle };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=theme.js.map

package/dist/toast/useToast.js

@@ -102,5 +102,5 @@ const useToast = () => {
 
 //#endregion
 export { defaultDuration, fastToastDuration, slowToastDuration, useToast };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=useToast.js.map

package/dist/tooltip/consts.js

@@ -6,5 +6,5 @@ const bg = {
 
 //#endregion
 export { bg };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=consts.js.map

package/dist/tooltip/tooltip.js

@@ -115,5 +115,5 @@ Tooltip.displayName = "Tooltip";
 
 //#endregion
 export { Tooltip, Tooltip as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=tooltip.js.map

package/dist/tooltip/tooltipContent.js

@@ -24,5 +24,5 @@ TooltipContent.displayName = "TooltipContent";
 
 //#endregion
 export { TooltipContent };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=tooltipContent.js.map

package/dist/tree/context.js

@@ -5,5 +5,5 @@ const [TreeProvider, useTreeContext] = createContext({ isOptional: true });
 
 //#endregion
 export { TreeProvider, useTreeContext };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=context.js.map

package/dist/tree/theme.js

@@ -76,5 +76,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=theme.js.map

package/dist/tree/tree.js

@@ -99,5 +99,5 @@ Tree.displayName = "Tree";
 
 //#endregion
 export { Tree, Tree as default, TreeBase };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=tree.js.map

package/dist/tree/treeIcon.js

@@ -22,5 +22,5 @@ TreeIcon.displayName = "TreeIcon";
 
 //#endregion
 export { TreeIcon, TreeIcon as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=treeIcon.js.map

package/dist/tree/treeItem.js

@@ -127,5 +127,5 @@ TreeItem.displayName = "TreeItem";
 
 //#endregion
 export { TreeItem, TreeItem as default, TreeItemBase };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=treeItem.js.map

package/dist/tree/treeText.js

@@ -24,5 +24,5 @@ TreeText.displayName = "TreeText";
 
 //#endregion
 export { TreeText, TreeText as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=treeText.js.map

package/dist/tree/useTreeState.js

@@ -14,5 +14,5 @@ const useTreeState = (activeItemId) => {
 
 //#endregion
 export { useTreeState };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=useTreeState.js.map

package/dist/tutorial/consts.js

@@ -7,5 +7,5 @@ const tutorialColors = {
 
 //#endregion
 export { tutorialColors };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=consts.js.map

package/dist/tutorial/tutorial.js

@@ -42,5 +42,5 @@ Tutorial.displayName = "Tutorial";
 
 //#endregion
 export { Tutorial };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=tutorial.js.map

package/dist/tutorial/tutorialCard.js

@@ -158,5 +158,5 @@ TutorialCard.displayName = "TutorialCard";
 
 //#endregion
 export { TutorialCard };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=tutorialCard.js.map

package/dist/tutorial/tutorialStep.js

@@ -20,5 +20,5 @@ TutorialStep.displayName = "TutorialStep";
 
 //#endregion
 export { TutorialStep };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=tutorialStep.js.map

package/dist/utils/array.js

@@ -18,5 +18,5 @@ function toggleItem(array, item) {
 
 //#endregion
 export { compareBy, toggleItem };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=array.js.map

package/dist/utils/assertion.js

@@ -32,5 +32,5 @@ function isString(value) {
 
 //#endregion
 export { isArray, isFunction, isJsx, isNumber, isObject, isReactText, isString };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=assertion.js.map

package/dist/utils/consts.js

@@ -6,5 +6,5 @@ const dimmedBorderColor = "grey.40";
 
 //#endregion
 export { __DEV__, activeClassName, activeItemShade, dimmedBorderColor };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=consts.js.map

package/dist/utils/dates.js

@@ -55,5 +55,5 @@ const getCurrentYear = () => {
 
 //#endregion
 export { formatIsoDate, generateDateByUTCValue, getCurrentYear, getDateUTCValue, isValidDate, parseIsoDate, sameDate, sameYear, sameYearSameMonth, utcDateToLocale, validateDateFormat };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=dates.js.map

package/dist/utils/dom.js

@@ -12,5 +12,5 @@ const removeBodyClass = (className) => document.body.classList.remove(className)
 
 //#endregion
 export { addBodyClass, addElement, removeBodyClass, removeElement };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=dom.js.map

package/dist/utils/formatDate.js

@@ -79,5 +79,5 @@ function formatDate(date, format = "DD MM YYYY", options) {
 
 //#endregion
 export { dateFormats, formatDate };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=formatDate.js.map

package/dist/utils/function.js

@@ -16,5 +16,5 @@ function runIfFn(valueOrFn, ...args) {
 
 //#endregion
 export { callAll, noop, runIfFn };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=function.js.map

package/dist/utils/images.js

@@ -20,5 +20,5 @@ function loadImageUrl(url) {
 
 //#endregion
 export { loadImageUrl };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=images.js.map

package/dist/utils/number.js

@@ -6,5 +6,5 @@ function random(start = 0, end = 1e6) {
 
 //#endregion
 export { random };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=number.js.map

package/dist/utils/object.js

@@ -32,5 +32,5 @@ function objectFilter(object, fn) {
 
 //#endregion
 export { filterUndefined, merge, objectFilter };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=object.js.map

package/dist/utils/react.js

@@ -109,5 +109,5 @@ function useIsMounted() {
 
 //#endregion
 export { assignRef, createContext$1 as createContext, mergeRefs, useCallbackRef, useClickOutside, useControlled, useIds, useIsMounted };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=react.js.map

package/dist/utils/string.js

@@ -19,5 +19,5 @@ const generateMenuItemId = (title, level = 0) => {
 
 //#endregion
 export { generateMenuItemId, normalizeToId };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=string.js.map

package/dist/utils/styles.js

@@ -75,5 +75,5 @@ const ellipsisOverflow = {
 
 //#endregion
 export { HSLToRGBA, cs, ellipsisOverflow, hexToRGBA, parseHSL, vuiColorToRGBA };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=styles.js.map

package/dist/utils/uid.js

@@ -3,5 +3,5 @@ const uid = (prefix) => `${prefix ? `${prefix}_` : ""}${Date.now().toString(36)
 
 //#endregion
 export { uid };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=uid.js.map

package/dist/utils/window.js

@@ -3,5 +3,5 @@ const isActivePath = (path) => !!path && window.location.pathname.includes(path)
 
 //#endregion
 export { isActivePath };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=window.js.map