npm - @consumidor-positivo/aurora - Versions diffs - 0.11.0 → 0.12.0 - Mend

@consumidor-positivo/aurora 0.11.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (195) hide show

package/dist/components/SelectField/index.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.es.js","sources":["../../../lib/components/form/SelectField/hook.ts","../../../lib/components/form/SelectField/index.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from 'react'\nimport { OptionProps } from './types'\nimport { isMobile } from '@core/utils/isMobile'\n\nexport const useSelectField = (\n options: OptionProps[],\n initialValue?: string,\n onChange?: (value: string) => void,\n onBlur?: React.FocusEventHandler,\n disabled?: boolean,\n register?: (instance: HTMLSelectElement \| null) => void,\n autocomplete: boolean = false,\n fullScreenOptions: boolean = false,\n) => {\n const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n const [selectedOption, setSelectedOption] = useState<OptionProps>({\n value: initialValue \|\| '',\n label: initialValue\n ? options.find((option) => option.value === initialValue)?.label \|\| ''\n : '',\n })\n const [activeOptionIndex, setActiveOptionIndex] = useState<number \| null>(\n null,\n )\n const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number>(0)\n const selectRef = useRef<HTMLDivElement>(null)\n const selectElementRef = useRef<HTMLSelectElement>(null)\n const [searchValue, setSearchValue] = useState<string>('')\n const activeOptionRef = useRef<HTMLLIElement \| null>(null)\n\n const fullScreenOptionsEnabled = fullScreenOptions && Boolean(isMobile())\n\n const filteredOptions =\n autocomplete \|\| fullScreenOptions\n ? options.filter((option) =>\n option.label.toLowerCase().includes(searchValue.toLowerCase()),\n )\n : options\n\n useEffect(() => {\n if (initialValue) {\n const option = options.find((option) => option.value === initialValue)\n if (option) {\n setSelectedOption({ value: option.value, label: option.label })\n }\n }\n }, [initialValue, options])\n\n useEffect(() => {\n if (register && selectElementRef.current) {\n register(selectElementRef.current)\n }\n }, [register])\n\n useEffect(() => {\n if (activeOptionRef.current) {\n activeOptionRef.current.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n })\n }\n }, [activeOptionIndex])\n\n useEffect(() => {\n const handleClickOutside = (event: PointerEvent) => {\n const isClickedOutside =\n selectRef.current &&\n !selectRef.current.contains(event.target as Node) &&\n activeOptionRef.current\n\n if (isClickedOutside) {\n setIsDropdownOpen(false)\n }\n }\n\n if (isDropdownOpen) {\n document.addEventListener('pointerup', handleClickOutside)\n } else {\n document.removeEventListener('pointerup', handleClickOutside)\n }\n\n return () => {\n document.removeEventListener('pointerup', handleClickOutside)\n }\n }, [isDropdownOpen])\n\n const toggleDropdown = () => {\n if (!isDropdownOpen && selectRef.current) {\n const { bottom } = selectRef.current.getBoundingClientRect()\n let totalPadding = 0\n let parentElement: HTMLElement \| null = selectRef.current.parentElement\n\n while (parentElement) {\n const parentPaddingBottom = parseFloat(\n window.getComputedStyle(parentElement).paddingBottom \|\| '0',\n )\n totalPadding += parentPaddingBottom\n parentElement = parentElement.parentElement\n }\n\n const availableSpaceBelow = window.innerHeight - bottom - totalPadding\n const minDropdownHeight = 212\n const calculatedHeight = Math.max(availableSpaceBelow, minDropdownHeight)\n\n setDropdownMaxHeight(calculatedHeight)\n }\n\n setIsDropdownOpen((prev) => {\n if (!prev) {\n const selectedIndex = options.findIndex(\n (option) => option.value === selectedOption.value,\n )\n setActiveOptionIndex(selectedIndex !== -1 ? selectedIndex : null)\n }\n return !prev\n })\n }\n\n const _findNextAvailableIndex = (\n currentIndex: number,\n direction: 'down' \| 'up',\n ) => {\n const step = direction === 'down' ? 1 : -1\n let nextIndex =\n (currentIndex + step + filteredOptions.length) % filteredOptions.length\n\n while (filteredOptions[nextIndex]?.disabled) {\n nextIndex =\n (nextIndex + step + filteredOptions.length) % filteredOptions.length\n }\n\n return nextIndex\n }\n\n const onKeyDownDropdown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (disabled) return\n\n const _actions: Record<string, () => void> = {\n Enter: () => {\n if (!isDropdownOpen) {\n toggleDropdown()\n return\n }\n if (\n activeOptionIndex !== null &&\n !filteredOptions[activeOptionIndex].disabled\n ) {\n e.preventDefault()\n selectOption(\n filteredOptions[activeOptionIndex].value,\n filteredOptions[activeOptionIndex].disabled,\n )\n }\n },\n ArrowDown: () => {\n e.preventDefault()\n setActiveOptionIndex((prev) =>\n _findNextAvailableIndex(prev !== null ? prev : -1, 'down'),\n )\n if (!isDropdownOpen) toggleDropdown()\n },\n ArrowUp: () => {\n e.preventDefault()\n setActiveOptionIndex((prev) =>\n _findNextAvailableIndex(\n prev !== null ? prev : filteredOptions.length,\n 'up',\n ),\n )\n if (!isDropdownOpen) toggleDropdown()\n },\n Escape: () => {\n setIsDropdownOpen(false)\n },\n }\n\n if (_actions[e.key]) {\n _actions[e.key]()\n }\n }\n\n const selectOption = (optionValue: string, optionDisabled?: boolean) => {\n if (optionDisabled) return\n\n const option = options.find((option) => option.value === optionValue)\n if (option) {\n setSelectedOption({ value: option.value, label: option.label })\n }\n\n setActiveOptionIndex(null)\n setSearchValue('')\n setTimeout(() => setIsDropdownOpen(false), 500)\n\n if (onChange) {\n onChange(optionValue)\n }\n }\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = e.target.value\n setSearchValue(value)\n\n if (onChange) {\n onChange(value)\n }\n\n if (value === '') {\n setSelectedOption({ value: '', label: '' })\n }\n\n if (!isDropdownOpen) {\n setIsDropdownOpen(true)\n }\n }\n\n const handleOnBlur = (event?: React.FocusEvent<Element>) => {\n if (onBlur) {\n setTimeout(() => {\n const getOptionByLabel = (label: string) =>\n options.find((option) => option.label === label)\n\n const elementValue = (event?.target as HTMLInputElement).value\n const selectedOptionFromElement = getOptionByLabel(elementValue)\n const customValue = fullScreenOptionsEnabled\n ? { value: '', label: '' }\n : { value: elementValue, label: '' }\n\n const targetValue = selectedOption?.value\n ? selectedOption\n : selectedOptionFromElement \|\| customValue\n\n onBlur({\n ...event,\n target: targetValue,\n } as React.FocusEvent<Element> & {\n target: OptionProps\n })\n }, 200)\n }\n }\n\n const onCloseOptions = () => {\n setIsDropdownOpen(false)\n }\n\n return {\n isDropdownOpen,\n selectRef,\n activeOptionRef,\n selectElementRef,\n toggleDropdown,\n selectOption,\n onKeyDownDropdown,\n setActiveOptionIndex,\n activeOptionIndex,\n filteredOptions,\n searchValue,\n setSearchValue,\n handleInputChange,\n dropdownMaxHeight,\n selectedOption,\n setSelectedOption,\n handleOnBlur,\n onCloseOptions,\n fullScreenOptionsEnabled\n }\n}\n","import { useId } from 'react'\nimport { createPortal } from 'react-dom'\nimport classNames from 'classnames'\nimport {\n IconChevronDown,\n IconSlash,\n IconCheck,\n IconSearch,\n} from '@components/icons'\nimport { Modal } from '@components/Modal'\nimport { Text } from '@components/Text'\nimport { Conditional } from '@components/misc'\nimport { COLOR_NEUTRAL_40 } from '@core/tokens'\nimport { isMobile } from '@core/utils/isMobile'\n\nimport Field from '../Field'\nimport { OptionProps, SelectFieldProps } from './types'\nimport { useSelectField } from './hook'\nimport './styles.scss'\n\nexport const SelectField = ({\n label,\n options,\n showOptionalLabel,\n error,\n errorMessage,\n helpMessage,\n disabled,\n required,\n value,\n onChange,\n style,\n className,\n placeholder,\n name,\n register,\n onBlur,\n autocomplete = false,\n EmptyText = 'Nada encontrado',\n fullScreenOptions = false,\n htmlType = 'text'\n}: SelectFieldProps) => {\n const labelId = useId()\n const generatedErrorId = useId()\n const errorId = error && errorMessage ? generatedErrorId : undefined\n\n const {\n isDropdownOpen,\n selectRef,\n selectElementRef,\n activeOptionRef,\n toggleDropdown,\n selectOption,\n onKeyDownDropdown,\n setActiveOptionIndex,\n activeOptionIndex,\n filteredOptions,\n searchValue,\n selectedOption,\n handleInputChange,\n dropdownMaxHeight,\n handleOnBlur,\n onCloseOptions,\n fullScreenOptionsEnabled\n } = useSelectField(\n options,\n value,\n onChange,\n onBlur,\n disabled,\n register,\n autocomplete,\n fullScreenOptions,\n )\n\n const selectClasses = classNames('au-field__select', {\n 'au-field__select--disabled': disabled,\n 'au-field__select--open': isDropdownOpen,\n 'au-field__select--required': required,\n 'au-field__select--error': error,\n [className!]: className,\n })\n\n const optionsClasses = classNames('au-field__select-options', {\n 'au-field__select-options--open': isDropdownOpen,\n })\n\n const optionClasses = (option: OptionProps, index: number) =>\n classNames('au-field__select-option', {\n 'au-field__select-option--highlighted': activeOptionIndex === index,\n 'au-field__select-option--selected':\n option.value === selectedOption.value,\n 'au-field__select-option--disabled': option.disabled,\n })\n\n const fullScreenOptionClasses = (option: OptionProps, index: number) =>\n classNames('au-field__fullscreen-options-select-option', {\n 'au-field__fullscreen-options-select-option--highlighted':\n activeOptionIndex === index,\n 'au-field__fullscreen-options-select-option--selected':\n option.value === selectedOption.value,\n 'au-field__fullscreen-options-select-option--disabled': option.disabled,\n })\n\n return (\n <>\n <Field.Root\n style={style}\n customclass={className}\n error={error}\n disabled={disabled}>\n <Field.Label\n text={label}\n labelId={labelId}\n showOptionalLabel={showOptionalLabel}\n required={required}\n error={error}\n disabled={disabled}\n />\n <div className={selectClasses}>\n <div\n className=\"au-field__select-wrapper\"\n onClick={toggleDropdown}\n onKeyDown={onKeyDownDropdown}\n tabIndex={disabled ? -1 : 0}\n ref={selectRef}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={isDropdownOpen}\n aria-labelledby={labelId}\n aria-describedby={errorId}\n aria-activedescendant={\n activeOptionIndex !== null && filteredOptions[activeOptionIndex]\n ? filteredOptions[activeOptionIndex].value\n : undefined\n }\n onBlur={handleOnBlur}>\n <input\n className=\"au-field__select-input\"\n value={(!fullScreenOptionsEnabled ? searchValue : null) \|\| selectedOption.label}\n placeholder={placeholder \|\| 'Selecionar...'}\n onChange={handleInputChange}\n readOnly={!autocomplete \|\| fullScreenOptionsEnabled}\n disabled={disabled}\n type={htmlType}\n aria-labelledby={labelId}\n />\n <div className=\"au-field__select-icon\" aria-hidden=\"true\">\n <IconChevronDown />\n </div>\n </div>\n <Conditional\n condition={!fullScreenOptionsEnabled \|\| !isMobile()}\n renderIf={\n <ul\n className={optionsClasses}\n role=\"listbox\"\n aria-live=\"polite\"\n tabIndex={-1}\n style={{\n maxHeight: `${dropdownMaxHeight}px`,\n overflowY: 'auto',\n }}>\n {filteredOptions.length === 0 ? (\n <li className=\"au-field__select-option au-field__select-option--empty\">\n {EmptyText}\n </li>\n ) : (\n filteredOptions.map((option, index) => (\n <li\n key={index}\n className={optionClasses(option, index)}\n ref={activeOptionIndex === index ? activeOptionRef : null}\n role=\"option\"\n aria-selected={option.value === selectedOption.value}\n aria-disabled={option.disabled}\n onPointerUp={() =>\n selectOption(option.value, option.disabled)\n }\n onMouseEnter={() => setActiveOptionIndex(index)}>\n {option.label}\n {option.disabled ? (\n <IconSlash aria-hidden=\"true\" />\n ) : option.value === selectedOption.value ? (\n <IconCheck aria-hidden=\"true\" />\n ) : null}\n </li>\n ))\n )}\n </ul>\n }\n />\n\n <select\n hidden\n disabled={disabled}\n value={selectedOption.value}\n onChange={(e) => selectOption(e.target.value)}\n ref={selectElementRef}\n name={name}>\n {options.map((option, index) => (\n <option key={index} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n </div>\n <Field.Message\n hasError={!!error}\n errorMessage={errorMessage}\n helpMessage={helpMessage}\n errorId={errorId}\n />\n </Field.Root>\n\n <Conditional\n condition={fullScreenOptionsEnabled}\n renderIf={\n <>\n {createPortal(\n <Modal\n isOpen={isDropdownOpen}\n onClose={onCloseOptions}\n headerContent={\n <div>\n <Text as=\"label\" variant=\"heading-small\" weight=\"bold\">\n {label}\n </Text>\n <div\n className=\"au-field__fullscreen-options-select-search-bar\"\n onKeyDown={onKeyDownDropdown}\n tabIndex={disabled ? -1 : 0}\n ref={selectRef}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={isDropdownOpen}\n aria-labelledby={labelId}\n aria-activedescendant={\n activeOptionIndex !== null &&\n filteredOptions[activeOptionIndex]\n ? filteredOptions[activeOptionIndex].value\n : undefined\n }\n onBlur={handleOnBlur}>\n <input\n className=\"au-field__select-input\"\n value={searchValue \|\| selectedOption.label}\n placeholder={'Buscar'}\n onChange={handleInputChange}\n disabled={disabled}\n type={htmlType}\n aria-label=\"Buscar\"\n />\n <div className=\"au-field__select-icon\" aria-hidden=\"true\">\n <IconSearch rawColor={COLOR_NEUTRAL_40} />\n </div>\n </div>\n </div>\n }\n content={\n <div className=\"au-field__fullscreen-options-select-options\" role=\"listbox\">\n {filteredOptions.map((option, index) => (\n <li\n key={index}\n className={fullScreenOptionClasses(option, index)}\n ref={\n activeOptionIndex === index ? activeOptionRef : null\n }\n role=\"option\"\n aria-selected={option.value === selectedOption.value}\n aria-disabled={option.disabled}\n onPointerUp={() =>\n selectOption(option.value, option.disabled)\n }\n onMouseEnter={() => setActiveOptionIndex(index)}>\n {option.label}\n {option.disabled ? (\n <IconSlash aria-hidden=\"true\" />\n ) : option.value === selectedOption.value ? (\n <IconCheck aria-hidden=\"true\" />\n ) : null}\n </li>\n ))}\n </div>\n }\n />,\n document.body,\n )}\n </>\n }\n />\n </>\n )\n}\n"],"names":["option","_a"],"mappings":"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"}
1	+ {"version":3,"file":"index.es.js","sources":["../../../lib/components/form/SelectField/hook.ts","../../../lib/components/form/SelectField/index.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from 'react'\nimport { OptionProps } from './types'\nimport { isMobile } from '@core/utils/isMobile'\n\nexport const useSelectField = (\n options: OptionProps[],\n initialValue?: string,\n onChange?: (value: string) => void,\n onBlur?: React.FocusEventHandler,\n disabled?: boolean,\n register?: (instance: HTMLSelectElement \| null) => void,\n autocomplete: boolean = false,\n fullScreenOptions: boolean = false,\n) => {\n const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n const [selectedOption, setSelectedOption] = useState<OptionProps>({\n value: initialValue \|\| '',\n label: initialValue\n ? options.find((option) => option.value === initialValue)?.label \|\| ''\n : '',\n })\n const [activeOptionIndex, setActiveOptionIndex] = useState<number \| null>(\n null,\n )\n const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number>(0)\n const selectRef = useRef<HTMLDivElement>(null)\n const selectElementRef = useRef<HTMLSelectElement>(null)\n const [searchValue, setSearchValue] = useState<string>('')\n const activeOptionRef = useRef<HTMLLIElement \| null>(null)\n\n const fullScreenOptionsEnabled = fullScreenOptions && Boolean(isMobile())\n\n const filteredOptions =\n autocomplete \|\| fullScreenOptions\n ? options.filter((option) =>\n option.label.toLowerCase().includes(searchValue.toLowerCase()),\n )\n : options\n\n useEffect(() => {\n if (initialValue) {\n const option = options.find((option) => option.value === initialValue)\n if (option) {\n setSelectedOption({ value: option.value, label: option.label })\n }\n }\n }, [initialValue, options])\n\n useEffect(() => {\n if (register && selectElementRef.current) {\n register(selectElementRef.current)\n }\n }, [register])\n\n useEffect(() => {\n if (activeOptionRef.current) {\n activeOptionRef.current.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n })\n }\n }, [activeOptionIndex])\n\n useEffect(() => {\n const handleClickOutside = (event: PointerEvent) => {\n const isClickedOutside =\n selectRef.current &&\n !selectRef.current.contains(event.target as Node) &&\n activeOptionRef.current\n\n if (isClickedOutside) {\n setIsDropdownOpen(false)\n }\n }\n\n if (isDropdownOpen) {\n document.addEventListener('pointerup', handleClickOutside)\n } else {\n document.removeEventListener('pointerup', handleClickOutside)\n }\n\n return () => {\n document.removeEventListener('pointerup', handleClickOutside)\n }\n }, [isDropdownOpen])\n\n const toggleDropdown = () => {\n if (!isDropdownOpen && selectRef.current) {\n const { bottom } = selectRef.current.getBoundingClientRect()\n let totalPadding = 0\n let parentElement: HTMLElement \| null = selectRef.current.parentElement\n\n while (parentElement) {\n const parentPaddingBottom = parseFloat(\n window.getComputedStyle(parentElement).paddingBottom \|\| '0',\n )\n totalPadding += parentPaddingBottom\n parentElement = parentElement.parentElement\n }\n\n const availableSpaceBelow = window.innerHeight - bottom - totalPadding\n const minDropdownHeight = 212\n const calculatedHeight = Math.max(availableSpaceBelow, minDropdownHeight)\n\n setDropdownMaxHeight(calculatedHeight)\n }\n\n setIsDropdownOpen((prev) => {\n if (!prev) {\n const selectedIndex = options.findIndex(\n (option) => option.value === selectedOption.value,\n )\n setActiveOptionIndex(selectedIndex !== -1 ? selectedIndex : null)\n }\n return !prev\n })\n }\n\n const _findNextAvailableIndex = (\n currentIndex: number,\n direction: 'down' \| 'up',\n ) => {\n const step = direction === 'down' ? 1 : -1\n let nextIndex =\n (currentIndex + step + filteredOptions.length) % filteredOptions.length\n\n while (filteredOptions[nextIndex]?.disabled) {\n nextIndex =\n (nextIndex + step + filteredOptions.length) % filteredOptions.length\n }\n\n return nextIndex\n }\n\n const onKeyDownDropdown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (disabled) return\n\n const _actions: Record<string, () => void> = {\n Enter: () => {\n if (!isDropdownOpen) {\n toggleDropdown()\n return\n }\n if (\n activeOptionIndex !== null &&\n !filteredOptions[activeOptionIndex].disabled\n ) {\n e.preventDefault()\n selectOption(\n filteredOptions[activeOptionIndex].value,\n filteredOptions[activeOptionIndex].disabled,\n )\n }\n },\n ArrowDown: () => {\n e.preventDefault()\n setActiveOptionIndex((prev) =>\n _findNextAvailableIndex(prev !== null ? prev : -1, 'down'),\n )\n if (!isDropdownOpen) toggleDropdown()\n },\n ArrowUp: () => {\n e.preventDefault()\n setActiveOptionIndex((prev) =>\n _findNextAvailableIndex(\n prev !== null ? prev : filteredOptions.length,\n 'up',\n ),\n )\n if (!isDropdownOpen) toggleDropdown()\n },\n Escape: () => {\n setIsDropdownOpen(false)\n },\n }\n\n if (_actions[e.key]) {\n _actions[e.key]()\n }\n }\n\n const selectOption = (optionValue: string, optionDisabled?: boolean) => {\n if (optionDisabled) return\n\n const option = options.find((option) => option.value === optionValue)\n if (option) {\n setSelectedOption({ value: option.value, label: option.label })\n }\n\n setActiveOptionIndex(null)\n setSearchValue('')\n setTimeout(() => setIsDropdownOpen(false), 500)\n\n if (onChange) {\n onChange(optionValue)\n }\n }\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = e.target.value\n setSearchValue(value)\n\n if (onChange) {\n onChange(value)\n }\n\n if (value === '') {\n setSelectedOption({ value: '', label: '' })\n }\n\n if (!isDropdownOpen) {\n setIsDropdownOpen(true)\n }\n }\n\n const handleOnBlur = (event?: React.FocusEvent<Element>) => {\n if (onBlur) {\n setTimeout(() => {\n const getOptionByLabel = (label: string) =>\n options.find((option) => option.label === label)\n\n const elementValue = (event?.target as HTMLInputElement).value\n const selectedOptionFromElement = getOptionByLabel(elementValue)\n const customValue = fullScreenOptionsEnabled\n ? { value: '', label: '' }\n : { value: elementValue, label: '' }\n\n const targetValue = selectedOption?.value\n ? selectedOption\n : selectedOptionFromElement \|\| customValue\n\n onBlur({\n ...event,\n target: targetValue,\n } as React.FocusEvent<Element> & {\n target: OptionProps\n })\n }, 200)\n }\n }\n\n const onCloseOptions = () => {\n setIsDropdownOpen(false)\n }\n\n return {\n isDropdownOpen,\n selectRef,\n activeOptionRef,\n selectElementRef,\n toggleDropdown,\n selectOption,\n onKeyDownDropdown,\n setActiveOptionIndex,\n activeOptionIndex,\n filteredOptions,\n searchValue,\n setSearchValue,\n handleInputChange,\n dropdownMaxHeight,\n selectedOption,\n setSelectedOption,\n handleOnBlur,\n onCloseOptions,\n fullScreenOptionsEnabled\n }\n}\n","import { useId } from 'react'\nimport { createPortal } from 'react-dom'\nimport classNames from 'classnames'\nimport {\n IconChevronDown,\n IconSlash,\n IconCheck,\n IconSearch,\n} from '@components/icons'\nimport { Modal } from '@components/Modal'\nimport { Text } from '@components/Text'\nimport { Conditional } from '@components/misc'\nimport { COLOR_NEUTRAL_40 } from '@core/tokens'\nimport { isMobile } from '@core/utils/isMobile'\n\nimport Field from '../Field'\nimport { OptionProps, SelectFieldProps } from './types'\nimport { useSelectField } from './hook'\nimport './styles.scss'\n\nexport const SelectField = ({\n label,\n options,\n showOptionalLabel,\n error,\n errorMessage,\n helpMessage,\n disabled,\n required,\n value,\n onChange,\n style,\n className,\n placeholder,\n name,\n register,\n onBlur,\n autocomplete = false,\n EmptyText = 'Nada encontrado',\n fullScreenOptions = false,\n htmlType = 'text',\n 'data-testid': dataTestId,\n}: SelectFieldProps) => {\n const labelId = useId()\n const generatedErrorId = useId()\n const errorId = error && errorMessage ? generatedErrorId : undefined\n\n const {\n isDropdownOpen,\n selectRef,\n selectElementRef,\n activeOptionRef,\n toggleDropdown,\n selectOption,\n onKeyDownDropdown,\n setActiveOptionIndex,\n activeOptionIndex,\n filteredOptions,\n searchValue,\n selectedOption,\n handleInputChange,\n dropdownMaxHeight,\n handleOnBlur,\n onCloseOptions,\n fullScreenOptionsEnabled\n } = useSelectField(\n options,\n value,\n onChange,\n onBlur,\n disabled,\n register,\n autocomplete,\n fullScreenOptions,\n )\n\n const selectClasses = classNames('au-field__select', {\n 'au-field__select--disabled': disabled,\n 'au-field__select--open': isDropdownOpen,\n 'au-field__select--required': required,\n 'au-field__select--error': error,\n [className!]: className,\n })\n\n const optionsClasses = classNames('au-field__select-options', {\n 'au-field__select-options--open': isDropdownOpen,\n })\n\n const optionClasses = (option: OptionProps, index: number) =>\n classNames('au-field__select-option', {\n 'au-field__select-option--highlighted': activeOptionIndex === index,\n 'au-field__select-option--selected':\n option.value === selectedOption.value,\n 'au-field__select-option--disabled': option.disabled,\n })\n\n const fullScreenOptionClasses = (option: OptionProps, index: number) =>\n classNames('au-field__fullscreen-options-select-option', {\n 'au-field__fullscreen-options-select-option--highlighted':\n activeOptionIndex === index,\n 'au-field__fullscreen-options-select-option--selected':\n option.value === selectedOption.value,\n 'au-field__fullscreen-options-select-option--disabled': option.disabled,\n })\n\n return (\n <>\n <Field.Root\n style={style}\n customclass={className}\n error={error}\n disabled={disabled}>\n <Field.Label\n text={label}\n labelId={labelId}\n showOptionalLabel={showOptionalLabel}\n required={required}\n error={error}\n disabled={disabled}\n />\n <div className={selectClasses}>\n <div\n className=\"au-field__select-wrapper\"\n data-testid={dataTestId}\n onClick={toggleDropdown}\n onKeyDown={onKeyDownDropdown}\n tabIndex={disabled ? -1 : 0}\n ref={selectRef}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={isDropdownOpen}\n aria-labelledby={labelId}\n aria-describedby={errorId}\n aria-activedescendant={\n activeOptionIndex !== null && filteredOptions[activeOptionIndex]\n ? filteredOptions[activeOptionIndex].value\n : undefined\n }\n onBlur={handleOnBlur}>\n <input\n className=\"au-field__select-input\"\n value={(!fullScreenOptionsEnabled ? searchValue : null) \|\| selectedOption.label}\n placeholder={placeholder \|\| 'Selecionar...'}\n onChange={handleInputChange}\n readOnly={!autocomplete \|\| fullScreenOptionsEnabled}\n disabled={disabled}\n type={htmlType}\n aria-labelledby={labelId}\n />\n <div className=\"au-field__select-icon\" aria-hidden=\"true\">\n <IconChevronDown />\n </div>\n </div>\n <Conditional\n condition={!fullScreenOptionsEnabled \|\| !isMobile()}\n renderIf={\n <ul\n className={optionsClasses}\n role=\"listbox\"\n aria-live=\"polite\"\n tabIndex={-1}\n style={{\n maxHeight: `${dropdownMaxHeight}px`,\n overflowY: 'auto',\n }}>\n {filteredOptions.length === 0 ? (\n <li className=\"au-field__select-option au-field__select-option--empty\">\n {EmptyText}\n </li>\n ) : (\n filteredOptions.map((option, index) => (\n <li\n key={index}\n className={optionClasses(option, index)}\n ref={activeOptionIndex === index ? activeOptionRef : null}\n role=\"option\"\n aria-selected={option.value === selectedOption.value}\n aria-disabled={option.disabled}\n onPointerUp={() =>\n selectOption(option.value, option.disabled)\n }\n onMouseEnter={() => setActiveOptionIndex(index)}>\n {option.label}\n {option.disabled ? (\n <IconSlash aria-hidden=\"true\" />\n ) : option.value === selectedOption.value ? (\n <IconCheck aria-hidden=\"true\" />\n ) : null}\n </li>\n ))\n )}\n </ul>\n }\n />\n\n <select\n hidden\n disabled={disabled}\n value={selectedOption.value}\n onChange={(e) => selectOption(e.target.value)}\n ref={selectElementRef}\n name={name}>\n {options.map((option, index) => (\n <option key={index} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n </div>\n <Field.Message\n hasError={!!error}\n errorMessage={errorMessage}\n helpMessage={helpMessage}\n errorId={errorId}\n />\n </Field.Root>\n\n <Conditional\n condition={fullScreenOptionsEnabled}\n renderIf={\n <>\n {createPortal(\n <Modal\n isOpen={isDropdownOpen}\n onClose={onCloseOptions}\n headerContent={\n <div>\n <Text as=\"label\" variant=\"heading-small\" weight=\"bold\">\n {label}\n </Text>\n <div\n className=\"au-field__fullscreen-options-select-search-bar\"\n onKeyDown={onKeyDownDropdown}\n tabIndex={disabled ? -1 : 0}\n ref={selectRef}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={isDropdownOpen}\n aria-labelledby={labelId}\n aria-activedescendant={\n activeOptionIndex !== null &&\n filteredOptions[activeOptionIndex]\n ? filteredOptions[activeOptionIndex].value\n : undefined\n }\n onBlur={handleOnBlur}>\n <input\n className=\"au-field__select-input\"\n value={searchValue \|\| selectedOption.label}\n placeholder={'Buscar'}\n onChange={handleInputChange}\n disabled={disabled}\n type={htmlType}\n aria-label=\"Buscar\"\n />\n <div className=\"au-field__select-icon\" aria-hidden=\"true\">\n <IconSearch rawColor={COLOR_NEUTRAL_40} />\n </div>\n </div>\n </div>\n }\n content={\n <div className=\"au-field__fullscreen-options-select-options\" role=\"listbox\">\n {filteredOptions.map((option, index) => (\n <li\n key={index}\n className={fullScreenOptionClasses(option, index)}\n ref={\n activeOptionIndex === index ? activeOptionRef : null\n }\n role=\"option\"\n aria-selected={option.value === selectedOption.value}\n aria-disabled={option.disabled}\n onPointerUp={() =>\n selectOption(option.value, option.disabled)\n }\n onMouseEnter={() => setActiveOptionIndex(index)}>\n {option.label}\n {option.disabled ? (\n <IconSlash aria-hidden=\"true\" />\n ) : option.value === selectedOption.value ? (\n <IconCheck aria-hidden=\"true\" />\n ) : null}\n </li>\n ))}\n </div>\n }\n />,\n document.body,\n )}\n </>\n }\n />\n </>\n )\n}\n"],"names":["option","_a"],"mappings":"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"}

package/dist/components/SelectField/styles.css CHANGED Viewed

	@@ -1 +1 @@
1	- .au-field__select{position:relative}.au-field__select-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%;height:56px;background-color:#fff;border:1px solid #454a54;border-radius:8px;box-sizing:border-box;font-size:16px;line-height:22px;overflow:hidden}.au-field__select-wrapper:focus-within{border:2px solid #0048db}.au-field__select-input{width:100%;height:100%;border:none;padding:16px 56px 16px 16px;font-family:inherit;font-size:16px;line-height:22px}.au-field__select-input:read-only{cursor:pointer}.au-field__select-icon{position:absolute;right:16px;transition:transform .2s ease}.au-field__select-options{display:flex;flex-direction:column;width:100%;max-height:212px;margin-top:16px;padding-inline-start:0;box-sizing:border-box;border:1px solid #0048db;background:#fff;border-radius:8px;overflow:hidden;cursor:auto;position:absolute;transform-origin:top left;transform:scaleY(0);opacity:0;visibility:hidden;transition:transform .2s,opacity .2s,visibility 0s .2s;z-index:1}.au-field__select-options--open{transform:scaleY(1);opacity:1;visibility:visible;transition:transform .2s,opacity .2s}.au-field__select-options::-webkit-scrollbar{width:16px}.au-field__select-options::-webkit-scrollbar-thumb{background-color:#135df5;border:4px solid #ffffff;border-radius:8px}.au-field__select-options::-webkit-scrollbar-track{background-color:#fff;border-radius:8px}.au-field__select-option{display:flex;justify-content:space-between;padding:16px 24px;cursor:pointer}.au-field__select-option:not(.au-field__select-option--selected):hover,.au-field__select-option--highlighted:not(.au-field__select-option--selected){background-color:#f6f7fa;color:#16181d}.au-field__select-option--selected{background-color:#0048db;color:#fff;font-weight:700}.au-field__select-option--selected .au-icon>svg{color:#fff}.au-field__select-option--disabled{pointer-events:none;cursor:not-allowed;background-color:#e2e4e9;color:#5e6573}.au-field__select-option--disabled .au-icon>svg{color:#5e6573}.au-field__select-option--empty{cursor:default;background-color:#e2e4e9;color:#5e6573}.au-field__select-option--empty:hover{background-color:#e2e4e9}.au-field__select--open .au-field__select-wrapper{border:2px solid #0048db}.au-field__select--open .au-field__select-wrapper .au-field__select-icon{transform:rotate(180deg)}.au-field__select--disabled{pointer-events:none;cursor:not-allowed}.au-field__select--disabled .au-field__select-wrapper{background-color:#e2e4e9}.au-field__select--disabled .au-field__select-wrapper .au-icon>svg{color:#5e6573}.au-field__select--error .au-field__select-wrapper{background-color:#f5eff0;border-color:#991717}.au-field__select--error .au-field__select-wrapper:focus{border-color:#0048db}.au-field__fullscreen-options-select-search-bar{display:flex;align-items:center;justify-content:space-between;width:100%;height:56px;margin:16px 0 24px;background-color:#fff;border:1px solid #e2e4e9;border-radius:8px;box-sizing:border-box;color:#5e6573;font-size:16px;line-height:22px;overflow:hidden}.au-field__fullscreen-options-select-search-bar:focus-within{border:2px solid #0048db}.au-field__fullscreen-options-select-options{display:flex;flex-direction:column;gap:16px;margin-right:8px}.au-field__fullscreen-options-select-option{display:flex;justify-content:space-between;padding:16px;cursor:pointer;border-radius:8px;border:1px solid #e2e4e9;color:#16181d;transition:all .2s ease-in-out}.au-field__fullscreen-options-select-option:not(.au-field__fullscreen-options-select-option--selected):hover,.au-field__fullscreen-options-select-option--highlighted:not(.au-field__fullscreen-options-select-option--selected){background-color:#f6f7fa;color:#16181d}.au-field__fullscreen-options-select-option--selected{background-color:#0048db;border-color:#0048db;color:#fff;font-weight:700}.au-field__fullscreen-options-select-option--selected .au-icon>svg{color:#fff}.au-field__fullscreen-options-select-option--disabled{pointer-events:none;cursor:not-allowed;background-color:#e2e4e9;color:#5e6573}.au-field__fullscreen-options-select-option--disabled .au-icon>svg{color:#5e6573}.au-field__fullscreen-options-select-option--empty{cursor:default;background-color:#e2e4e9;color:#5e6573}.au-field__fullscreen-options-select-option--empty:hover{background-color:#e2e4e9}.au-field:not(.au-field--error):has(.au-field__select--open) .au-field__header-label{color:#0048db}.au-field:not(.au-field--error):has(.au-field__select--open) .au-field__select-wrapper,.au-field:not(.au-field--error):has(.au-field__select--open) .au-field__select-wrapper:focus-within{border-width:1px}
1	+ .au-field__select{position:relative}.au-field__select-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%;height:56px;background-color:#fff;border:1px solid #454a54;border-radius:8px;box-sizing:border-box;font-size:16px;line-height:22px;overflow:hidden}.au-field__select-wrapper:focus-within{border:2px solid #0048db}.au-field__select-input{width:100%;height:100%;border:none;padding:16px 56px 16px 16px;font-family:inherit;font-size:16px;line-height:22px}.au-field__select-input:read-only{cursor:pointer}.au-field__select-icon{position:absolute;right:16px;transition:transform .2s ease}.au-field__select-options{display:flex;flex-direction:column;width:100%;max-height:212px;margin-top:16px;padding-inline-start:0;box-sizing:border-box;border:1px solid #0048db;background:#fff;border-radius:8px;overflow:hidden;cursor:auto;position:absolute;transform-origin:top left;transform:scaleY(0);opacity:0;visibility:hidden;transition:transform .2s,opacity .2s,visibility 0s .2s;z-index:1}.au-field__select-options--open{transform:scaleY(1);opacity:1;visibility:visible;transition:transform .2s,opacity .2s}.au-field__select-options::-webkit-scrollbar{width:16px}.au-field__select-options::-webkit-scrollbar-thumb{background-color:#135df5;border:4px solid #ffffff;border-radius:8px}.au-field__select-options::-webkit-scrollbar-track{background-color:#fff;border-radius:8px}.au-field__select-option{display:flex;justify-content:space-between;padding:16px 24px;cursor:pointer}.au-field__select-option:not(.au-field__select-option--selected):hover,.au-field__select-option--highlighted:not(.au-field__select-option--selected){background-color:#f6f7fa;color:#16181d}.au-field__select-option--selected{background-color:#0048db;color:#fff;font-weight:700}.au-field__select-option--selected .au-icon>svg{color:#fff}.au-field__select-option--disabled{pointer-events:none;cursor:not-allowed;background-color:#e2e4e9;color:#5e6573}.au-field__select-option--disabled .au-icon>svg{color:#5e6573}.au-field__select-option--empty{cursor:default;background-color:#e2e4e9;color:#5e6573}.au-field__select-option--empty:hover{background-color:#e2e4e9}.au-field__select--open .au-field__select-wrapper{border:2px solid #0048db}.au-field__select--open .au-field__select-wrapper .au-field__select-icon{transform:rotate(180deg)}.au-field__select--disabled{pointer-events:none;cursor:not-allowed}.au-field__select--disabled .au-field__select-wrapper{background-color:#e2e4e9;border-color:#5e6573}.au-field__select--disabled .au-field__select-wrapper .au-icon>svg{color:#5e6573}.au-field__select--error .au-field__select-wrapper{background-color:#f5eff0;border-color:#991717}.au-field__select--error .au-field__select-wrapper:focus{border-color:#0048db}.au-field__fullscreen-options-select-search-bar{display:flex;align-items:center;justify-content:space-between;width:100%;height:56px;margin:16px 0 24px;background-color:#fff;border:1px solid #e2e4e9;border-radius:8px;box-sizing:border-box;color:#5e6573;font-size:16px;line-height:22px;overflow:hidden}.au-field__fullscreen-options-select-search-bar:focus-within{border:2px solid #0048db}.au-field__fullscreen-options-select-options{display:flex;flex-direction:column;gap:16px;margin-right:8px}.au-field__fullscreen-options-select-option{display:flex;justify-content:space-between;padding:16px;cursor:pointer;border-radius:8px;border:1px solid #e2e4e9;color:#16181d;transition:all .2s ease-in-out}.au-field__fullscreen-options-select-option:not(.au-field__fullscreen-options-select-option--selected):hover,.au-field__fullscreen-options-select-option--highlighted:not(.au-field__fullscreen-options-select-option--selected){background-color:#f6f7fa;color:#16181d}.au-field__fullscreen-options-select-option--selected{background-color:#0048db;border-color:#0048db;color:#fff;font-weight:700}.au-field__fullscreen-options-select-option--selected .au-icon>svg{color:#fff}.au-field__fullscreen-options-select-option--disabled{pointer-events:none;cursor:not-allowed;background-color:#e2e4e9;color:#5e6573}.au-field__fullscreen-options-select-option--disabled .au-icon>svg{color:#5e6573}.au-field__fullscreen-options-select-option--empty{cursor:default;background-color:#e2e4e9;color:#5e6573}.au-field__fullscreen-options-select-option--empty:hover{background-color:#e2e4e9}.au-field:not(.au-field--error):has(.au-field__select--open) .au-field__header-label{color:#0048db}.au-field:not(.au-field--error):has(.au-field__select--open) .au-field__select-wrapper,.au-field:not(.au-field--error):has(.au-field__select--open) .au-field__select-wrapper:focus-within{border-width:1px}

package/dist/components/Skeleton/Skeleton.stories.d.ts CHANGED Viewed

@@ -6,5 +6,7 @@ type Story = StoryObj<typeof Skeleton>;
 export declare const Example: Story;
 export declare const Square: Story;
 export declare const Circle: Story;
+export declare const Icon: Story;
+export declare const Text: Story;
 export declare const Block: Story;
 export declare const NotActive: Story;

package/dist/components/Skeleton/index.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ type SkeletonProps = {
     block?: boolean;
     width?: number;
     height?: number;
+    'data-testid'?: string;
 };
-export declare const Skeleton: ({ active, shape, color, block, height, width, }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Skeleton: ({ active, shape, color, block, height, width, "data-testid": dataTestId, }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Skeleton/index.es.js CHANGED Viewed

@@ -6,7 +6,8 @@ import './styles.css';const Skeleton = ({
   color = "primary",
   block = false,
   height,
-  width
+  width,
+  "data-testid": dataTestId
 }) => {
   const skeletonClasses = classNames("au-skeleton", {
     "au-skeleton--active": active,
@@ -18,7 +19,7 @@ import './styles.css';const Skeleton = ({
     height: height ? `${height}px` : "28px",
     width: width ? `${width}px` : block ? "100%" : "80px"
   };
-  return /* @__PURE__ */ jsx("div", { className: skeletonClasses, style: skeletonSize, "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx("div", { className: skeletonClasses, style: skeletonSize, "aria-hidden": "true", "data-testid": dataTestId });
 };
 export {
   Skeleton

package/dist/components/Skeleton/index.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.es.js","sources":["../../../lib/components/Skeleton/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { CSSProperties } from 'react'\nimport './styles.scss'\n\ntype SkeletonProps = {\n active?: boolean\n shape?: 'default' \| 'square' \| 'circle'\n color?: 'primary' \| 'secondary'\n block?: boolean\n width?: number\n height?: number\n}\n\nexport const Skeleton = ({\n active = true,\n shape = 'default',\n color = 'primary',\n block = false,\n height,\n width,\n}: SkeletonProps) => {\n const skeletonClasses = classNames('au-skeleton', {\n 'au-skeleton--active': active,\n 'au-skeleton--shape-square': shape === 'square',\n 'au-skeleton--shape-circle': shape === 'circle',\n 'au-skeleton--color-secondary': color === 'secondary',\n })\n\n const skeletonSize: CSSProperties = {\n height: height ? `${height}px` : '28px',\n width: width ? `${width}px` : block ? '100%' : '80px',\n }\n\n return <div className={skeletonClasses} style={skeletonSize} aria-hidden=\"true\"></div>\n}\n"],"names":[],"mappings":";;~~AAaO~~,MAAM,WAAW,CAAC;AAAA,EACvB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;~~AACF~~,MAAqB;AACnB,QAAM,kBAAkB,WAAW,eAAe;AAAA,IAChD,uBAAuB;AAAA,IACvB,6BAA6B,UAAU;AAAA,IACvC,6BAA6B,UAAU;AAAA,IACvC,gCAAgC,UAAU;AAAA,EAAA,CAC3C;AAED,QAAM,eAA8B;AAAA,IAClC,QAAQ,SAAS,GAAG,MAAM,OAAO;AAAA,IACjC,OAAO,QAAQ,GAAG,KAAK,OAAO,QAAQ,SAAS;AAAA,EAAA;AAGjD,~~6BAAQ~~,~~OAAA~~,~~EAAI~~,WAAW,iBAAiB,OAAO,cAAc,eAAY,QAAO;~~AAClF~~;"}
1	+ {"version":3,"file":"index.es.js","sources":["../../../lib/components/Skeleton/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { CSSProperties } from 'react'\nimport './styles.scss'\n\ntype SkeletonProps = {\n active?: boolean\n shape?: 'default' \| 'square' \| 'circle'\n color?: 'primary' \| 'secondary'\n block?: boolean\n width?: number\n height?: number\n 'data-testid'?: string\n}\n\nexport const Skeleton = ({\n active = true,\n shape = 'default',\n color = 'primary',\n block = false,\n height,\n width,\n 'data-testid': dataTestId,\n}: SkeletonProps) => {\n const skeletonClasses = classNames('au-skeleton', {\n 'au-skeleton--active': active,\n 'au-skeleton--shape-square': shape === 'square',\n 'au-skeleton--shape-circle': shape === 'circle',\n 'au-skeleton--color-secondary': color === 'secondary',\n })\n\n const skeletonSize: CSSProperties = {\n height: height ? `${height}px` : '28px',\n width: width ? `${width}px` : block ? '100%' : '80px',\n }\n\n return <div className={skeletonClasses} style={skeletonSize} aria-hidden=\"true\" data-testid={dataTestId}></div>\n}\n"],"names":[],"mappings":";;AAcO,MAAM,WAAW,CAAC;AAAA,EACvB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAqB;AACnB,QAAM,kBAAkB,WAAW,eAAe;AAAA,IAChD,uBAAuB;AAAA,IACvB,6BAA6B,UAAU;AAAA,IACvC,6BAA6B,UAAU;AAAA,IACvC,gCAAgC,UAAU;AAAA,EAAA,CAC3C;AAED,QAAM,eAA8B;AAAA,IAClC,QAAQ,SAAS,GAAG,MAAM,OAAO;AAAA,IACjC,OAAO,QAAQ,GAAG,KAAK,OAAO,QAAQ,SAAS;AAAA,EAAA;AAGjD,SAAO,oBAAC,SAAI,WAAW,iBAAiB,OAAO,cAAc,eAAY,QAAO,eAAa,WAAA,CAAY;AAC3G;"}

package/dist/components/Spinner/index.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 type SpinnerProps = {
     size: number;
     color: string;
+    'data-testid'?: string;
 };
 export declare const Spinner: React.FC<SpinnerProps>;
 export {};

package/dist/components/Spinner/index.es.js CHANGED Viewed

@@ -1,5 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import './styles.css';const Spinner = ({ size, color }) => {
+import './styles.css';const Spinner = ({
+  size,
+  color,
+  "data-testid": dataTestId
+}) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -8,6 +12,7 @@ import './styles.css';const Spinner = ({ size, color }) => {
       role: "status",
       "aria-live": "polite",
       "aria-label": "Carregando",
+      "data-testid": dataTestId,
       children: /* @__PURE__ */ jsxs(
         "svg",
         {

package/dist/components/Spinner/index.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.es.js","sources":["../../../lib/components/Spinner/index.tsx"],"sourcesContent":["import './styles.scss'\n\ntype SpinnerProps = {\n size: number\n color: string\n}\n\nexport const Spinner: React.FC<SpinnerProps> = ({ size, color }) => {\n return (\n <div\n className=\"au-spinner\"\n style={{ width: size, height: size }}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Carregando\">\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 64 64\"\n width={size}\n height={size}\n color={color}>\n <defs>\n <linearGradient\n id={`au-loading-${color}`}\n gradientUnits=\"objectBoundingBox\"\n x1=\"10%\"\n y1=\"0%\"\n x2=\"90%\"\n y2=\"10%\">\n <stop offset=\"0\" stopColor={color} stopOpacity=\"1\" />\n <stop offset=\"1\" stopColor={color} stopOpacity=\"0\" />\n </linearGradient>\n </defs>\n <g strokeWidth=\"7\" strokeLinecap=\"round\" fill=\"none\">\n <path stroke={color} d=\"M60,32 A28,28 0 1 1 4,32\" />\n\n <path\n d=\"M60,32 A28,28.5 0 1 0 4,32\"\n stroke={`url(#au-loading-${color})`}\n />\n </g>\n </svg>\n </div>\n )\n}\n"],"names":[],"mappings":";~~AAOO~~,MAAM,UAAkC,CAAC,~~EAAE~~,~~MAAM~~,~~YAAY~~;~~AAClE~~,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAA;AAAA,MAC9B,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAW;AAAA,MACX,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAY;AAAA,UACZ,OAAM;AAAA,UACN,SAAQ;AAAA,UACR,OAAO;AAAA,UACP,QAAQ;AAAA,UACR;AAAA,UACA,UAAA;AAAA,YAAA,oBAAC,QAAA,EACC,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,cAAc,KAAK;AAAA,gBACvB,eAAc;AAAA,gBACd,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,UAAA;AAAA,kBAAA,oBAAC,UAAK,QAAO,KAAI,WAAW,OAAO,aAAY,KAAI;AAAA,sCAClD,QAAA,EAAK,QAAO,KAAI,WAAW,OAAO,aAAY,IAAA,CAAI;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,GAEvD;AAAA,iCACC,KAAA,EAAE,aAAY,KAAI,eAAc,SAAQ,MAAK,QAC5C,UAAA;AAAA,cAAA,oBAAC,QAAA,EAAK,QAAQ,OAAO,GAAE,4BAA2B;AAAA,cAElD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,GAAE;AAAA,kBACF,QAAQ,mBAAmB,KAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,YAClC,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"index.es.js","sources":["../../../lib/components/Spinner/index.tsx"],"sourcesContent":["import './styles.scss'\n\ntype SpinnerProps = {\n size: number\n color: string\n 'data-testid'?: string\n}\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n size,\n color,\n 'data-testid': dataTestId,\n}) => {\n return (\n <div\n className=\"au-spinner\"\n style={{ width: size, height: size }}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Carregando\"\n data-testid={dataTestId}>\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 64 64\"\n width={size}\n height={size}\n color={color}>\n <defs>\n <linearGradient\n id={`au-loading-${color}`}\n gradientUnits=\"objectBoundingBox\"\n x1=\"10%\"\n y1=\"0%\"\n x2=\"90%\"\n y2=\"10%\">\n <stop offset=\"0\" stopColor={color} stopOpacity=\"1\" />\n <stop offset=\"1\" stopColor={color} stopOpacity=\"0\" />\n </linearGradient>\n </defs>\n <g strokeWidth=\"7\" strokeLinecap=\"round\" fill=\"none\">\n <path stroke={color} d=\"M60,32 A28,28 0 1 1 4,32\" />\n\n <path\n d=\"M60,32 A28,28.5 0 1 0 4,32\"\n stroke={`url(#au-loading-${color})`}\n />\n </g>\n </svg>\n </div>\n )\n}\n"],"names":[],"mappings":";AAQO,MAAM,UAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAA;AAAA,MAC9B,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAW;AAAA,MACX,eAAa;AAAA,MACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAY;AAAA,UACZ,OAAM;AAAA,UACN,SAAQ;AAAA,UACR,OAAO;AAAA,UACP,QAAQ;AAAA,UACR;AAAA,UACA,UAAA;AAAA,YAAA,oBAAC,QAAA,EACC,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,cAAc,KAAK;AAAA,gBACvB,eAAc;AAAA,gBACd,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,UAAA;AAAA,kBAAA,oBAAC,UAAK,QAAO,KAAI,WAAW,OAAO,aAAY,KAAI;AAAA,sCAClD,QAAA,EAAK,QAAO,KAAI,WAAW,OAAO,aAAY,IAAA,CAAI;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,GAEvD;AAAA,iCACC,KAAA,EAAE,aAAY,KAAI,eAAc,SAAQ,MAAK,QAC5C,UAAA;AAAA,cAAA,oBAAC,QAAA,EAAK,QAAQ,OAAO,GAAE,4BAA2B;AAAA,cAElD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,GAAE;AAAA,kBACF,QAAQ,mBAAmB,KAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,YAClC,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/components/SubHeader/index.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ type SubHeaderProps = {
     title: string;
     handleReturn: () => void;
     handleHelpInfo?: () => void;
+    'data-testid'?: string;
 };
-export declare const SubHeader: ({ title, handleReturn, handleHelpInfo, }: SubHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SubHeader: ({ title, handleReturn, handleHelpInfo, "data-testid": dataTestId, }: SubHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SubHeader/index.es.js CHANGED Viewed

@@ -9,7 +9,8 @@ import { Button } from "../Button/index.es.js";
 import './styles.css';const SubHeader = ({
   title,
   handleReturn,
-  handleHelpInfo
+  handleHelpInfo,
+  "data-testid": dataTestId
 }) => {
   return /* @__PURE__ */ jsx(
     "div",
@@ -17,6 +18,7 @@ import './styles.css';const SubHeader = ({
       className: classNames("au-sub-header", {
         "au-sub-header--with-help": handleHelpInfo
       }),
+      "data-testid": dataTestId,
       children: /* @__PURE__ */ jsxs(Container, { customClass: "au-sub-header__container", children: [
         /* @__PURE__ */ jsx(
           Button,

package/dist/components/SubHeader/index.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.es.js","sources":["../../../lib/components/SubHeader/index.tsx"],"sourcesContent":["import { IconChevronLeft, IconHelpCircle } from '../icons/default'\n\nimport { Container } from '@components/Container'\nimport { Text } from '@components/Text'\nimport { Button } from '@components/Button'\n\nimport classNames from 'classnames'\n\nimport './styles.scss'\n\ntype SubHeaderProps = {\n title: string\n handleReturn: () => void\n handleHelpInfo?: () => void\n}\n\nexport const SubHeader = ({\n title,\n handleReturn,\n handleHelpInfo,\n}: SubHeaderProps) => {\n return (\n <div\n className={classNames('au-sub-header', {\n 'au-sub-header--with-help': handleHelpInfo,\n })}>\n <Container customClass=\"au-sub-header__container\">\n <Button\n className=\"au-sub-header__button\"\n onClick={handleReturn}\n type=\"ghost\"\n aria-label=\"Voltar\">\n <IconChevronLeft aria-hidden=\"true\" />\n </Button>\n <Text\n className=\"au-sub-header__title\"\n variant=\"heading-micro\"\n variantDesk=\"heading-small\"\n weight=\"bold\"\n as=\"div\">\n {title}\n </Text>\n {handleHelpInfo && (\n <Button\n className=\"au-sub-header__button\"\n onClick={handleHelpInfo}\n type=\"ghost\"\n aria-label=\"Ajuda\">\n <IconHelpCircle aria-hidden=\"true\" />\n </Button>\n )}\n </Container>\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;;;;~~AAgBO~~,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;~~AACF~~,MAAsB;AACpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,iBAAiB;AAAA,QACrC,4BAA4B;AAAA,MAAA,CAC7B;AAAA,MACD,UAAA,qBAAC,WAAA,EAAU,aAAY,4BACrB,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,MAAK;AAAA,YACL,cAAW;AAAA,YACX,UAAA,oBAAC,iBAAA,EAAgB,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEtC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,aAAY;AAAA,YACZ,QAAO;AAAA,YACP,IAAG;AAAA,YACF,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,kBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,MAAK;AAAA,YACL,cAAW;AAAA,YACX,UAAA,oBAAC,gBAAA,EAAe,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MACrC,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"index.es.js","sources":["../../../lib/components/SubHeader/index.tsx"],"sourcesContent":["import { IconChevronLeft, IconHelpCircle } from '../icons/default'\n\nimport { Container } from '@components/Container'\nimport { Text } from '@components/Text'\nimport { Button } from '@components/Button'\n\nimport classNames from 'classnames'\n\nimport './styles.scss'\n\ntype SubHeaderProps = {\n title: string\n handleReturn: () => void\n handleHelpInfo?: () => void\n 'data-testid'?: string\n}\n\nexport const SubHeader = ({\n title,\n handleReturn,\n handleHelpInfo,\n 'data-testid': dataTestId,\n}: SubHeaderProps) => {\n return (\n <div\n className={classNames('au-sub-header', {\n 'au-sub-header--with-help': handleHelpInfo,\n })}\n data-testid={dataTestId}>\n <Container customClass=\"au-sub-header__container\">\n <Button\n className=\"au-sub-header__button\"\n onClick={handleReturn}\n type=\"ghost\"\n aria-label=\"Voltar\">\n <IconChevronLeft aria-hidden=\"true\" />\n </Button>\n <Text\n className=\"au-sub-header__title\"\n variant=\"heading-micro\"\n variantDesk=\"heading-small\"\n weight=\"bold\"\n as=\"div\">\n {title}\n </Text>\n {handleHelpInfo && (\n <Button\n className=\"au-sub-header__button\"\n onClick={handleHelpInfo}\n type=\"ghost\"\n aria-label=\"Ajuda\">\n <IconHelpCircle aria-hidden=\"true\" />\n </Button>\n )}\n </Container>\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;;;;AAiBO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAsB;AACpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,iBAAiB;AAAA,QACrC,4BAA4B;AAAA,MAAA,CAC7B;AAAA,MACD,eAAa;AAAA,MACb,UAAA,qBAAC,WAAA,EAAU,aAAY,4BACrB,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,MAAK;AAAA,YACL,cAAW;AAAA,YACX,UAAA,oBAAC,iBAAA,EAAgB,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEtC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,aAAY;AAAA,YACZ,QAAO;AAAA,YACP,IAAG;AAAA,YACF,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,kBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,MAAK;AAAA,YACL,cAAW;AAAA,YACX,UAAA,oBAAC,gBAAA,EAAe,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MACrC,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Switch/Card/types.d.ts CHANGED Viewed

@@ -7,4 +7,5 @@ export type CardSwitchProps = {
     deactivateCallBack?: () => void;
     shouldFadeOutAfterActivate?: boolean;
     fadeOutDelayInSeconds?: number;
+    'data-testid'?: string;
 };

package/dist/components/Switch/Pure/types.d.ts CHANGED Viewed

@@ -5,4 +5,5 @@ export type SwitchProps = {
     disabled: boolean;
     activateCallBack: () => void;
     deactivateCallBack?: () => void;
+    'data-testid'?: string;
 };

package/dist/components/Tabs/index.d.ts CHANGED Viewed

@@ -6,6 +6,7 @@ export type TabsProps = {
     withLabel?: boolean;
     rightSlotChildren?: React.ReactNode;
     onClick?: (value: string) => void;
+    'data-testid'?: string;
 };
 export type TabItemProps = {
     tab: string;
@@ -13,5 +14,5 @@ export type TabItemProps = {
     children?: React.ReactElement;
     icon?: React.ReactNode;
 };
-export declare const Tabs: ({ tabs, type, initialTab, onClick, areTabsHidden, rightSlotChildren, withLabel, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ tabs, type, initialTab, onClick, areTabsHidden, rightSlotChildren, withLabel, "data-testid": dataTestId, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;

package/dist/components/Tabs/index.es.js CHANGED Viewed

@@ -11,7 +11,8 @@ import './styles.css';const Tabs = ({
   onClick,
   areTabsHidden,
   rightSlotChildren,
-  withLabel = false
+  withLabel = false,
+  "data-testid": dataTestId
 }) => {
   const [isClicked, setIsClicked] = useState(false);
   const [currButton, setCurrButton] = useState(initialTab ?? "");
@@ -50,6 +51,7 @@ import './styles.css';const Tabs = ({
         className: classNames("au-tabs", {
           [`au-tabs--type-${type}`]: !!type
         }),
+        "data-testid": dataTestId,
         children: /* @__PURE__ */ jsxs("div", { className: "au-tabs__container", children: [
           /* @__PURE__ */ jsxs("div", { className: "au-tabs__left-panel", children: [
             /* @__PURE__ */ jsx(When, { condition: !!withLabel, children: /* @__PURE__ */ jsxs(
@@ -87,7 +89,7 @@ import './styles.css';const Tabs = ({
                       children: item.title
                     }
                   ) })
-                ] });
+                ] }, item.tab);
               }),
               /* @__PURE__ */ jsx(When, { condition: type === 2, children: /* @__PURE__ */ jsx(
                 "div",

package/dist/components/Tabs/index.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.es.js","sources":["../../../lib/components/Tabs/index.tsx"],"sourcesContent":["import { useEffect, useState, useRef } from 'react'\nimport { If, Switch, Case } from '@components/misc'\nimport { Text } from '@components/Text'\nimport { Chip } from '@components/Chip'\n\nimport classNames from 'classnames'\n\nimport './styles.scss'\n\nexport type TabsProps = {\n tabs: TabItemProps[]\n type?: 1 \| 2\n areTabsHidden?: boolean\n initialTab?: string\n withLabel?: boolean\n rightSlotChildren?: React.ReactNode\n onClick?: (value: string) => void\n}\n\nexport type TabItemProps = {\n tab: string\n title: string\n children?: React.ReactElement\n icon?: React.ReactNode\n}\n\nexport const Tabs = ({\n tabs,\n type = 1,\n initialTab,\n onClick,\n areTabsHidden,\n rightSlotChildren,\n withLabel = false,\n}: TabsProps) => {\n const [isClicked, setIsClicked] = useState(false)\n const [currButton, setCurrButton] = useState(initialTab ?? '')\n const [activeTab, setActiveTab] = useState(initialTab)\n const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 })\n\n const tabsRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n setActiveTab(initialTab)\n }, [initialTab])\n\n useEffect(() => {\n if (activeTab && type === 2) {\n const container = tabsRef.current\n if (container) {\n const activeElement = container.querySelector(\n '.au-tabs__btns-option--active',\n ) as HTMLElement\n\n if (activeElement) {\n setIndicatorStyle({\n left: activeElement.offsetLeft,\n width: activeElement.offsetWidth,\n })\n }\n }\n }\n }, [activeTab, tabs, type])\n\n const handleClick = (item: TabItemProps) => {\n onClick && onClick(item.tab)\n setCurrButton(item.tab)\n setActiveTab(item.tab)\n setIsClicked(true)\n }\n\n return (\n <>\n <If condition={!areTabsHidden}>\n <div\n className={classNames('au-tabs', {\n [`au-tabs--type-${type}`]: !!type,\n })}>\n <div className=\"au-tabs__container\">\n <div className=\"au-tabs__left-panel\">\n <If condition={!!withLabel}>\n <Text\n color=\"secondary\"\n variant=\"body-small\"\n className=\"au-tabs__label\">\n Filtrar por:{' '}\n </Text>\n </If>\n <div className=\"au-tabs__btns\" ref={tabsRef}>\n {tabs.map((item: TabItemProps) => {\n return (\n <Switch>\n <Case condition={type === 1}>\n <Chip\n label={item.title}\n icon={item.icon}\n isActive={\n (isClicked && item.tab === currButton) \|\|\n activeTab === item.tab\n }\n onClick={() => handleClick(item)}\n />\n </Case>\n <Case condition={type === 2}>\n <button\n type=\"button\"\n className={classNames('au-tabs__btns-option', {\n 'au-tabs__btns-option--active':\n activeTab === item.tab,\n })}\n onClick={() => handleClick(item)}>\n {item.title}\n </button>\n </Case>\n </Switch>\n )\n })}\n <If condition={type === 2}>\n <div\n className=\"au-tabs__btns-indicator\"\n aria-hidden=\"true\"\n style={{\n left: `${indicatorStyle.left}px`,\n width: `${indicatorStyle.width}px`,\n }}\n />\n </If>\n </div>\n </div>\n <If condition={!!rightSlotChildren}>{rightSlotChildren}</If>\n </div>\n </div>\n </If>\n\n {tabs.map(({ children, tab }: TabItemProps) => {\n return (\n <div\n className={`au-tabs__children children-${tab}`}\n key={`au-tabs-${tab}`}>\n <If condition={currButton === tab \|\| activeTab === tab}>\n {children}\n </If>\n </div>\n )\n })}\n </>\n )\n}\n\nexport default Tabs\n"],"names":["If"],"mappings":";;;;;;~~AA0BO~~,MAAM,OAAO,CAAC;AAAA,EACnB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;~~AACd~~,MAAiB;AACf,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,cAAc,EAAE;AAC7D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,UAAU;AACrD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG;AAE1E,QAAM,UAAU,OAAuB,IAAI;AAE3C,YAAU,MAAM;AACd,iBAAa,UAAU;AAAA,EACzB,GAAG,CAAC,UAAU,CAAC;AAEf,YAAU,MAAM;AACd,QAAI,aAAa,SAAS,GAAG;AAC3B,YAAM,YAAY,QAAQ;AAC1B,UAAI,WAAW;AACb,cAAM,gBAAgB,UAAU;AAAA,UAC9B;AAAA,QAAA;AAGF,YAAI,eAAe;AACjB,4BAAkB;AAAA,YAChB,MAAM,cAAc;AAAA,YACpB,OAAO,cAAc;AAAA,UAAA,CACtB;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,MAAM,IAAI,CAAC;AAE1B,QAAM,cAAc,CAAC,SAAuB;AAC1C,eAAW,QAAQ,KAAK,GAAG;AAC3B,kBAAc,KAAK,GAAG;AACtB,iBAAa,KAAK,GAAG;AACrB,iBAAa,IAAI;AAAA,EACnB;AAEA,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAACA,MAAA,EAAG,WAAW,CAAC,eACd,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,WAAW,WAAW;AAAA,UAC/B,CAAC,iBAAiB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,QAAA,CAC9B;AAAA,QACD,UAAA,qBAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,YAAA,oBAACA,MAAA,EAAG,WAAW,CAAC,CAAC,WACf,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,WAAU;AAAA,gBAAiB,UAAA;AAAA,kBAAA;AAAA,kBACd;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,GAEjB;AAAA,YACA,qBAAC,OAAA,EAAI,WAAU,iBAAgB,KAAK,SACjC,UAAA;AAAA,cAAA,KAAK,IAAI,CAAC,SAAuB;AAChC,4CACG,QAAA,EACC,UAAA;AAAA,kBAAA,oBAAC,MAAA,EAAK,WAAW,SAAS,GACxB,UAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,OAAO,KAAK;AAAA,sBACZ,MAAM,KAAK;AAAA,sBACX,UACG,aAAa,KAAK,QAAQ,cAC3B,cAAc,KAAK;AAAA,sBAErB,SAAS,MAAM,YAAY,IAAI;AAAA,oBAAA;AAAA,kBAAA,GAEnC;AAAA,kBACA,oBAAC,MAAA,EAAK,WAAW,SAAS,GACxB,UAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,MAAK;AAAA,sBACL,WAAW,WAAW,wBAAwB;AAAA,wBAC5C,gCACE,cAAc,KAAK;AAAA,sBAAA,CACtB;AAAA,sBACD,SAAS,MAAM,YAAY,IAAI;AAAA,sBAC9B,UAAA,KAAK;AAAA,oBAAA;AAAA,kBAAA,EACR,CACF;AAAA,gBAAA,~~GACF~~;AAAA,cAEJ,CAAC;AAAA,cACD,oBAACA,MAAA,EAAG,WAAW,SAAS,GACtB,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,eAAY;AAAA,kBACZ,OAAO;AAAA,oBACL,MAAM,GAAG,eAAe,IAAI;AAAA,oBAC5B,OAAO,GAAG,eAAe,KAAK;AAAA,kBAAA;AAAA,gBAChC;AAAA,cAAA,EACF,CACF;AAAA,YAAA,EAAA,CACF;AAAA,UAAA,GACF;AAAA,8BACCA,MAAA,EAAG,WAAW,CAAC,CAAC,mBAAoB,UAAA,kBAAA,CAAkB;AAAA,QAAA,EAAA,CACzD;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,IAEC,KAAK,IAAI,CAAC,EAAE,UAAU,UAAwB;AAC7C,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,8BAA8B,GAAG;AAAA,UAE5C,8BAACA,MAAA,EAAG,WAAW,eAAe,OAAO,cAAc,KAChD,SAAA,CACH;AAAA,QAAA;AAAA,QAHK,WAAW,GAAG;AAAA,MAAA;AAAA,IAMzB,CAAC;AAAA,EAAA,GACH;AAEJ;"}
1	+ {"version":3,"file":"index.es.js","sources":["../../../lib/components/Tabs/index.tsx"],"sourcesContent":["import { useEffect, useState, useRef } from 'react'\nimport { If, Switch, Case } from '@components/misc'\nimport { Text } from '@components/Text'\nimport { Chip } from '@components/Chip'\n\nimport classNames from 'classnames'\n\nimport './styles.scss'\n\nexport type TabsProps = {\n tabs: TabItemProps[]\n type?: 1 \| 2\n areTabsHidden?: boolean\n initialTab?: string\n withLabel?: boolean\n rightSlotChildren?: React.ReactNode\n onClick?: (value: string) => void\n 'data-testid'?: string\n}\n\nexport type TabItemProps = {\n tab: string\n title: string\n children?: React.ReactElement\n icon?: React.ReactNode\n}\n\nexport const Tabs = ({\n tabs,\n type = 1,\n initialTab,\n onClick,\n areTabsHidden,\n rightSlotChildren,\n withLabel = false,\n 'data-testid': dataTestId,\n}: TabsProps) => {\n const [isClicked, setIsClicked] = useState(false)\n const [currButton, setCurrButton] = useState(initialTab ?? '')\n const [activeTab, setActiveTab] = useState(initialTab)\n const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 })\n\n const tabsRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n setActiveTab(initialTab)\n }, [initialTab])\n\n useEffect(() => {\n if (activeTab && type === 2) {\n const container = tabsRef.current\n if (container) {\n const activeElement = container.querySelector(\n '.au-tabs__btns-option--active',\n ) as HTMLElement\n\n if (activeElement) {\n setIndicatorStyle({\n left: activeElement.offsetLeft,\n width: activeElement.offsetWidth,\n })\n }\n }\n }\n }, [activeTab, tabs, type])\n\n const handleClick = (item: TabItemProps) => {\n onClick && onClick(item.tab)\n setCurrButton(item.tab)\n setActiveTab(item.tab)\n setIsClicked(true)\n }\n\n return (\n <>\n <If condition={!areTabsHidden}>\n <div\n className={classNames('au-tabs', {\n [`au-tabs--type-${type}`]: !!type,\n })}\n data-testid={dataTestId}>\n <div className=\"au-tabs__container\">\n <div className=\"au-tabs__left-panel\">\n <If condition={!!withLabel}>\n <Text\n color=\"secondary\"\n variant=\"body-small\"\n className=\"au-tabs__label\">\n Filtrar por:{' '}\n </Text>\n </If>\n <div className=\"au-tabs__btns\" ref={tabsRef}>\n {tabs.map((item: TabItemProps) => {\n return (\n <Switch key={item.tab}>\n <Case condition={type === 1}>\n <Chip\n label={item.title}\n icon={item.icon}\n isActive={\n (isClicked && item.tab === currButton) \|\|\n activeTab === item.tab\n }\n onClick={() => handleClick(item)}\n />\n </Case>\n <Case condition={type === 2}>\n <button\n type=\"button\"\n className={classNames('au-tabs__btns-option', {\n 'au-tabs__btns-option--active':\n activeTab === item.tab,\n })}\n onClick={() => handleClick(item)}>\n {item.title}\n </button>\n </Case>\n </Switch>\n )\n })}\n <If condition={type === 2}>\n <div\n className=\"au-tabs__btns-indicator\"\n aria-hidden=\"true\"\n style={{\n left: `${indicatorStyle.left}px`,\n width: `${indicatorStyle.width}px`,\n }}\n />\n </If>\n </div>\n </div>\n <If condition={!!rightSlotChildren}>{rightSlotChildren}</If>\n </div>\n </div>\n </If>\n\n {tabs.map(({ children, tab }: TabItemProps) => {\n return (\n <div\n className={`au-tabs__children children-${tab}`}\n key={`au-tabs-${tab}`}>\n <If condition={currButton === tab \|\| activeTab === tab}>\n {children}\n </If>\n </div>\n )\n })}\n </>\n )\n}\n\nexport default Tabs\n"],"names":["If"],"mappings":"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"}

package/dist/components/Tabs/styles.css CHANGED Viewed

	@@ -1 +1 @@
1	- .au-tabs--type-2{border-bottom:1px solid #e2e4e9}.au-tabs--type-2 button{border:0;background-color:transparent}.au-tabs--type-2 .au-tabs__btns{margin-bottom:0}.au-tabs__container{display:flex;flex-direction:column}@media(min-width:600px){.au-tabs__container{flex-direction:row;align-items:center;justify-content:space-between}}.au-tabs__left-panel{display:flex;align-items:center;gap:8px}.au-tabs__label{display:none}@media(min-width:600px){.au-tabs__label{display:unset}}.au-tabs__btns{display:flex;position:relative;white-space:nowrap;overflow-x:scroll;margin-bottom:20px}.au-tabs__btns::-webkit-scrollbar{display:none}@media(min-width:600px){.au-tabs__btns{overflow:unset;margin-bottom:0}}.au-tabs__btns-option{border:none;background:none;font:inherit;color:inherit;text-align:inherit;cursor:pointer;line-height:20px;color:#454a54;font-size:14px;font-family:Lexend Deca,sans-serif;padding:8px 16px;position:relative;transition:all .3s ease}.au-tabs__btns-option--active{color:#0048db;font-weight:700}.au-tabs__btns-indicator{position:absolute;bottom:-1px;left:0;height:2px;background-color:#0048db;transition:all .3s cubic-bezier(.4,0,.2,1)}.au-tabs__children{margin-top:24px}@media(min-width:600px){.au-tabs__children{margin-top:32px}}
1	+ .au-tabs--type-2{border-bottom:1px solid #e2e4e9}.au-tabs--type-2 button{border:0;background-color:transparent}.au-tabs--type-2 .au-tabs__btns{margin-bottom:0}.au-tabs__container{display:flex;flex-direction:column}@media(min-width:600px){.au-tabs__container{flex-direction:row;align-items:center;justify-content:space-between}}.au-tabs__left-panel{display:flex;align-items:center;gap:8px}.au-tabs__label{display:none}@media(min-width:600px){.au-tabs__label{display:unset}}.au-tabs__btns{display:flex;position:relative;white-space:nowrap;overflow-x:scroll;overflow-y:hidden;margin-bottom:20px}.au-tabs__btns::-webkit-scrollbar{display:none}@media(min-width:600px){.au-tabs__btns{overflow:unset;margin-bottom:0}}.au-tabs__btns-option{border:none;background:none;font:inherit;color:inherit;text-align:inherit;cursor:pointer;line-height:20px;color:#454a54;font-size:14px;font-family:Lexend Deca,sans-serif;padding:8px 16px;position:relative;transition:all .3s ease}.au-tabs__btns-option--active{color:#0048db;font-weight:700}.au-tabs__btns-indicator{position:absolute;bottom:-1px;left:0;height:2px;background-color:#0048db;transition:all .3s cubic-bezier(.4,0,.2,1)}.au-tabs__children{margin-top:24px}@media(min-width:600px){.au-tabs__children{margin-top:32px}}

package/dist/components/Tag/index.d.ts CHANGED Viewed

@@ -12,10 +12,11 @@ export type TagProps = {
         content?: string;
         onClick?: () => void;
     };
+    'data-testid'?: string;
 };
 /**
  * @deprecated Use `BadgeInfo` or `BadgeState` instead. `Tag` will be removed in a future major release.
  * - `BadgeInfo`: informational badge with icon + text, supports `actionButton`, `customIcon`, `color`.
  * - `BadgeState`: compact status indicator, supports `iconOnly`, `isNumberBadge`, `variant`.
  */
-export declare const Tag: ({ status, border, size, type, color, customIcon, text, children, fullWidth, actionButton, }: TagProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tag: ({ status, border, size, type, color, customIcon, text, children, fullWidth, actionButton, "data-testid": dataTestId, }: TagProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Tag/index.es.js CHANGED Viewed

@@ -6,8 +6,8 @@ import { IconAlertTriangle } from "../icons/IconAlertTriangle/index.es.js";
 import { IconCheck } from "../icons/IconCheck/index.es.js";
 import { IconInfo } from "../icons/IconInfo/index.es.js";
 import { IconSlash } from "../icons/IconSlash/index.es.js";
-import { d as COLOR_NEUTRAL_70, g as COLOR_BRAND_CYAN_50, f as COLOR_INFO_50, e as COLOR_WARNING_50, b as COLOR_ERROR_50, C as COLOR_SUCCESS_50 } from "../../tokens-eEtvWiuX.js";
 import { Conditional } from "../Conditional/index.es.js";
+import { d as COLOR_NEUTRAL_70, g as COLOR_BRAND_CYAN_50, f as COLOR_INFO_50, e as COLOR_WARNING_50, b as COLOR_ERROR_50, C as COLOR_SUCCESS_50 } from "../../tokens-CKZdIZ5O.js";
 import './styles.css';const Tag = ({
   status,
   border = "square",
@@ -18,7 +18,8 @@ import './styles.css';const Tag = ({
   text,
   children,
   fullWidth,
-  actionButton
+  actionButton,
+  "data-testid": dataTestId
 }) => {
   const statusMap = {
     success: {
@@ -57,7 +58,7 @@ import './styles.css';const Tag = ({
   });
   const isBadgeTag = type === "badge";
   const supportText = isBadgeTag ? text.toUpperCase() : text;
-  return /* @__PURE__ */ jsxs("div", { className: tagClasses, children: [
+  return /* @__PURE__ */ jsxs("div", { className: tagClasses, "data-testid": dataTestId, children: [
     /* @__PURE__ */ jsxs("div", { className: "au-tag__content", children: [
       /* @__PURE__ */ jsx(
         Conditional,

package/dist/components/Tag/index.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.es.js","sources":["../../../lib/components/Tag/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport {\n IconAlertOctagon,\n IconAlertTriangle,\n IconCheck,\n IconInfo,\n IconSlash,\n} from '@components/icons'\nimport {\n COLOR_ERROR_50,\n COLOR_INFO_50,\n COLOR_SUCCESS_50,\n COLOR_WARNING_50,\n COLOR_BRAND_CYAN_50,\n COLOR_NEUTRAL_70,\n} from '@core/tokens'\nimport './styles.scss'\nimport { Conditional } from '@components/misc'\n\nexport type TagProps = {\n status: 'info' \| 'success' \| 'error' \| 'warning' \| 'support' \| 'neutral'\n border?: 'rounded' \| 'square'\n type?: 'read-only' \| 'badge'\n color?: 'primary' \| 'secondary'\n size?: 'small' \| 'medium' \| 'large'\n text: string\n children?: React.ReactNode\n customIcon?: string \| JSX.Element\n fullWidth?: boolean\n actionButton?: { content?: string; onClick?: () => void }\n}\n\n/*\n @deprecated Use `BadgeInfo` or `BadgeState` instead. `Tag` will be removed in a future major release.\n * - `BadgeInfo`: informational badge with icon + text, supports `actionButton`, `customIcon`, `color`.\n * - `BadgeState`: compact status indicator, supports `iconOnly`, `isNumberBadge`, `variant`.\n */\nexport const Tag = ({\n status,\n border = 'square',\n size = 'medium',\n type = 'read-only',\n color = 'primary',\n customIcon,\n text,\n children,\n fullWidth,\n actionButton,\n}: TagProps) => {\n const statusMap = {\n success: {\n option: 'success',\n icon: <IconCheck rawColor={COLOR_SUCCESS_50} />,\n },\n error: {\n option: 'error',\n icon: <IconAlertOctagon rawColor={COLOR_ERROR_50} />,\n },\n warning: {\n option: 'warning',\n icon: <IconAlertTriangle rawColor={COLOR_WARNING_50} />,\n },\n info: { option: 'info', icon: <IconInfo rawColor={COLOR_INFO_50} /> },\n support: {\n option: 'support',\n icon: <IconInfo rawColor={COLOR_BRAND_CYAN_50} />,\n },\n neutral: {\n option: 'neutral',\n icon: <IconSlash rawColor={COLOR_NEUTRAL_70} />,\n },\n custom: {\n option: 'custom',\n icon: customIcon,\n },\n }\n\n const tagClasses = classNames('au-tag', {\n [`au-tag--${statusMap[status].option}`]: statusMap[status].option,\n [`au-tag--size-${size}`]: !!size,\n [`au-tag--type-${type}`]: !!type,\n [`au-tag--border-${border}`]: !!border,\n [`au-tag--color-${color}`]: !!color,\n [`au-tag--full-width`]: !!fullWidth,\n })\n\n const isBadgeTag = type === 'badge'\n const supportText = isBadgeTag ? text.toUpperCase() : text\n\n return (\n <div className={tagClasses}>\n <div className=\"au-tag__content\">\n <Conditional\n condition={!isBadgeTag}\n renderIf={\n <div className=\"au-tag__content-icon\" aria-hidden=\"true\">\n <Conditional\n condition={!!customIcon}\n renderIf={customIcon}\n renderElse={statusMap[status].icon}\n />\n </div>\n }\n />\n <p className={`au-tag__content-support-text`}>{supportText}</p>\n\n <Conditional\n condition={!!actionButton}\n renderIf={\n <button\n className=\"au-tag__action-btn\"\n onClick={actionButton?.onClick}>\n {actionButton?.content}\n </button>\n }\n />\n </div>\n {children}\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;;;;;;~~AAqCO~~,MAAM,MAAM,CAAC;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;~~AACF~~,MAAgB;AACd,QAAM,YAAY;AAAA,IAChB,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,WAAA,EAAU,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE/C,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,MAAM,oBAAC,kBAAA,EAAiB,UAAU,eAAA,CAAgB;AAAA,IAAA;AAAA,IAEpD,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,mBAAA,EAAkB,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAEvD,MAAM,EAAE,QAAQ,QAAQ,MAAM,oBAAC,UAAA,EAAS,UAAU,cAAA,CAAe,EAAA;AAAA,IACjE,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAA,EAAS,UAAU,oBAAA,CAAqB;AAAA,IAAA;AAAA,IAEjD,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,WAAA,EAAU,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE/C,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA;AAAA,EACR;AAGF,QAAM,aAAa,WAAW,UAAU;AAAA,IACtC,CAAC,WAAW,UAAU,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,MAAM,EAAE;AAAA,IAC3D,CAAC,gBAAgB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,IAC5B,CAAC,gBAAgB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,IAC5B,CAAC,kBAAkB,MAAM,EAAE,GAAG,CAAC,CAAC;AAAA,IAChC,CAAC,iBAAiB,KAAK,EAAE,GAAG,CAAC,CAAC;AAAA,IAC9B,CAAC,oBAAoB,GAAG,CAAC,CAAC;AAAA,EAAA,CAC3B;AAED,QAAM,aAAa,SAAS;AAC5B,QAAM,cAAc,aAAa,KAAK,YAAA,IAAgB;AAEtD,SACE,qBAAC,OAAA,EAAI,WAAW,~~YACd~~,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAAC;AAAA,UACZ,UACE,oBAAC,OAAA,EAAI,WAAU,wBAAuB,eAAY,QAChD,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,CAAC,CAAC;AAAA,cACb,UAAU;AAAA,cACV,YAAY,UAAU,MAAM,EAAE;AAAA,YAAA;AAAA,UAAA,EAChC,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,oBAAC,KAAA,EAAE,WAAW,gCAAiC,UAAA,aAAY;AAAA,MAE3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAAC,CAAC;AAAA,UACb,UACE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS,6CAAc;AAAA,cACtB,UAAA,6CAAc;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IAEJ,GACF;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;"}
1	+ {"version":3,"file":"index.es.js","sources":["../../../lib/components/Tag/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport {\n IconAlertOctagon,\n IconAlertTriangle,\n IconCheck,\n IconInfo,\n IconSlash,\n} from '@components/icons'\nimport {\n COLOR_ERROR_50,\n COLOR_INFO_50,\n COLOR_SUCCESS_50,\n COLOR_WARNING_50,\n COLOR_BRAND_CYAN_50,\n COLOR_NEUTRAL_70,\n} from '@core/tokens'\nimport './styles.scss'\nimport { Conditional } from '@components/misc'\n\nexport type TagProps = {\n status: 'info' \| 'success' \| 'error' \| 'warning' \| 'support' \| 'neutral'\n border?: 'rounded' \| 'square'\n type?: 'read-only' \| 'badge'\n color?: 'primary' \| 'secondary'\n size?: 'small' \| 'medium' \| 'large'\n text: string\n children?: React.ReactNode\n customIcon?: string \| JSX.Element\n fullWidth?: boolean\n actionButton?: { content?: string; onClick?: () => void }\n 'data-testid'?: string\n}\n\n/*\n @deprecated Use `BadgeInfo` or `BadgeState` instead. `Tag` will be removed in a future major release.\n * - `BadgeInfo`: informational badge with icon + text, supports `actionButton`, `customIcon`, `color`.\n * - `BadgeState`: compact status indicator, supports `iconOnly`, `isNumberBadge`, `variant`.\n */\nexport const Tag = ({\n status,\n border = 'square',\n size = 'medium',\n type = 'read-only',\n color = 'primary',\n customIcon,\n text,\n children,\n fullWidth,\n actionButton,\n 'data-testid': dataTestId,\n}: TagProps) => {\n const statusMap = {\n success: {\n option: 'success',\n icon: <IconCheck rawColor={COLOR_SUCCESS_50} />,\n },\n error: {\n option: 'error',\n icon: <IconAlertOctagon rawColor={COLOR_ERROR_50} />,\n },\n warning: {\n option: 'warning',\n icon: <IconAlertTriangle rawColor={COLOR_WARNING_50} />,\n },\n info: { option: 'info', icon: <IconInfo rawColor={COLOR_INFO_50} /> },\n support: {\n option: 'support',\n icon: <IconInfo rawColor={COLOR_BRAND_CYAN_50} />,\n },\n neutral: {\n option: 'neutral',\n icon: <IconSlash rawColor={COLOR_NEUTRAL_70} />,\n },\n custom: {\n option: 'custom',\n icon: customIcon,\n },\n }\n\n const tagClasses = classNames('au-tag', {\n [`au-tag--${statusMap[status].option}`]: statusMap[status].option,\n [`au-tag--size-${size}`]: !!size,\n [`au-tag--type-${type}`]: !!type,\n [`au-tag--border-${border}`]: !!border,\n [`au-tag--color-${color}`]: !!color,\n [`au-tag--full-width`]: !!fullWidth,\n })\n\n const isBadgeTag = type === 'badge'\n const supportText = isBadgeTag ? text.toUpperCase() : text\n\n return (\n <div className={tagClasses} data-testid={dataTestId}>\n <div className=\"au-tag__content\">\n <Conditional\n condition={!isBadgeTag}\n renderIf={\n <div className=\"au-tag__content-icon\" aria-hidden=\"true\">\n <Conditional\n condition={!!customIcon}\n renderIf={customIcon}\n renderElse={statusMap[status].icon}\n />\n </div>\n }\n />\n <p className={`au-tag__content-support-text`}>{supportText}</p>\n\n <Conditional\n condition={!!actionButton}\n renderIf={\n <button\n className=\"au-tag__action-btn\"\n onClick={actionButton?.onClick}>\n {actionButton?.content}\n </button>\n }\n />\n </div>\n {children}\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;;;;;;AAsCO,MAAM,MAAM,CAAC;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAgB;AACd,QAAM,YAAY;AAAA,IAChB,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,WAAA,EAAU,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE/C,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,MAAM,oBAAC,kBAAA,EAAiB,UAAU,eAAA,CAAgB;AAAA,IAAA;AAAA,IAEpD,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,mBAAA,EAAkB,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAEvD,MAAM,EAAE,QAAQ,QAAQ,MAAM,oBAAC,UAAA,EAAS,UAAU,cAAA,CAAe,EAAA;AAAA,IACjE,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAA,EAAS,UAAU,oBAAA,CAAqB;AAAA,IAAA;AAAA,IAEjD,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,WAAA,EAAU,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE/C,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA;AAAA,EACR;AAGF,QAAM,aAAa,WAAW,UAAU;AAAA,IACtC,CAAC,WAAW,UAAU,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,MAAM,EAAE;AAAA,IAC3D,CAAC,gBAAgB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,IAC5B,CAAC,gBAAgB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,IAC5B,CAAC,kBAAkB,MAAM,EAAE,GAAG,CAAC,CAAC;AAAA,IAChC,CAAC,iBAAiB,KAAK,EAAE,GAAG,CAAC,CAAC;AAAA,IAC9B,CAAC,oBAAoB,GAAG,CAAC,CAAC;AAAA,EAAA,CAC3B;AAED,QAAM,aAAa,SAAS;AAC5B,QAAM,cAAc,aAAa,KAAK,YAAA,IAAgB;AAEtD,SACE,qBAAC,OAAA,EAAI,WAAW,YAAY,eAAa,YACvC,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAAC;AAAA,UACZ,UACE,oBAAC,OAAA,EAAI,WAAU,wBAAuB,eAAY,QAChD,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,CAAC,CAAC;AAAA,cACb,UAAU;AAAA,cACV,YAAY,UAAU,MAAM,EAAE;AAAA,YAAA;AAAA,UAAA,EAChC,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,oBAAC,KAAA,EAAE,WAAW,gCAAiC,UAAA,aAAY;AAAA,MAE3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAAC,CAAC;AAAA,UACb,UACE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS,6CAAc;AAAA,cACtB,UAAA,6CAAc;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IAEJ,GACF;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;"}

package/dist/components/Text/styles.css CHANGED Viewed

	@@ -1 +1 @@
1	- .au-text{font-family:"Source Sans 3",sans-serif;font-weight:400}.au-text--color-common{color:#16181d}.au-text--color-secondary{color:#454a54}.au-text--color-white{color:#fff}.au-text--weight-bold{font-weight:700}.au-text--weight-semibold{font-weight:600}.au-text--weight-medium{font-weight:500}.au-text--weight-regular{font-weight:400}.au-text--weight-light{font-weight:300}.au-text--display-large,.au-text--display-medium,.au-text--display-small{font-family:Lexend Deca,sans-serif}.au-text--display-large{font-size:56px;line-height:78px}.au-text--display-medium{font-size:48px;line-height:67px}.au-text--display-small{font-size:40px;line-height:56px}.au-text--heading-big,.au-text--heading-large,.au-text--heading-medium,.au-text--heading-small,.au-text--heading-micro{font-family:Lexend Deca,sans-serif}.au-text--heading-big{font-size:32px;line-height:45px}.au-text--heading-large{font-size:28px;line-height:39px}.au-text--heading-medium{font-size:24px;line-height:34px}.au-text--heading-small{font-size:20px;line-height:28px}.au-text--heading-micro{font-size:16px;line-height:24px}.au-text--body-big,.au-text--body-large,.au-text--body-medium,.au-text--body-small{font-family:"Source Sans 3",sans-serif}.au-text--body-big{font-size:24px;line-height:34px}.au-text--body-large{font-size:20px;line-height:28px}.au-text--body-medium{font-size:16px;line-height:24px}.au-text--body-small{font-size:14px;line-height:22px}.au-text--caption{font-family:"Source Sans 3",sans-serif;font-size:12px;line-height:19px}@media(min-width:1024px){.au-text--desk-display-large,.au-text--desk-display-medium,.au-text--desk-display-small{font-family:Lexend Deca,sans-serif}.au-text--desk-display-large{font-size:56px;line-height:78px}.au-text--desk-display-medium{font-size:48px;line-height:67px}.au-text--desk-display-small{font-size:40px;line-height:56px}.au-text--desk-heading-big,.au-text--desk-heading-large,.au-text--desk-heading-medium,.au-text--desk-heading-small,.au-text--desk-heading-micro{font-family:Lexend Deca,sans-serif}.au-text--desk-heading-big{font-size:32px;line-height:45px}.au-text--desk-heading-large{font-size:28px;line-height:39px}.au-text--desk-heading-medium{font-size:24px;line-height:34px}.au-text--desk-heading-small{font-size:20px;line-height:28px}.au-text--desk-heading-micro{font-size:16px;line-height:24px}.au-text--desk-body-big,.au-text--desk-body-large,.au-text--desk-body-medium,.au-text--desk-body-small{font-family:"Source Sans 3",sans-serif}.au-text--desk-body-big{font-size:24px;line-height:34px}.au-text--desk-body-large{font-size:20px;line-height:28px}.au-text--desk-body-medium{font-size:16px;line-height:24px}.au-text--desk-body-small{font-size:14px;line-height:22px}.au-text--desk-caption{font-family:"Source Sans 3",sans-serif;font-size:12px;line-height:19px}}
1	+ .au-text{font-family:"Source Sans 3",sans-serif;font-weight:400}.au-text--color-common{color:#16181d}.au-text--color-secondary{color:#454a54}.au-text--color-white{color:#fff}.au-text--weight-bold{font-weight:700}.au-text--weight-semibold{font-weight:600}.au-text--weight-medium{font-weight:500}.au-text--weight-regular{font-weight:400}.au-text--weight-light{font-weight:300}.au-text--display-large,.au-text--display-medium,.au-text--display-small{font-family:Lexend Deca,sans-serif}.au-text--display-large{font-size:56px;line-height:78px}.au-text--display-medium{font-size:48px;line-height:67px}.au-text--display-small{font-size:40px;line-height:56px}.au-text--heading-big,.au-text--heading-large,.au-text--heading-medium,.au-text--heading-small,.au-text--heading-minimum,.au-text--heading-micro,.au-text--heading-nano{font-family:Lexend Deca,sans-serif}.au-text--heading-big{font-size:32px;line-height:45px}.au-text--heading-large{font-size:28px;line-height:39px}.au-text--heading-medium{font-size:24px;line-height:34px}.au-text--heading-small{font-size:20px;line-height:28px}.au-text--heading-minimum{font-size:18px;line-height:24px}.au-text--heading-micro{font-size:16px;line-height:24px}.au-text--heading-nano{font-size:14px;line-height:24px}.au-text--body-big,.au-text--body-large,.au-text--body-medium,.au-text--body-small{font-family:"Source Sans 3",sans-serif}.au-text--body-big{font-size:24px;line-height:34px}.au-text--body-large{font-size:20px;line-height:28px}.au-text--body-medium{font-size:16px;line-height:24px}.au-text--body-small{font-size:14px;line-height:22px}.au-text--caption{font-family:"Source Sans 3",sans-serif;font-size:12px;line-height:19px}@media(min-width:1024px){.au-text--desk-display-large,.au-text--desk-display-medium,.au-text--desk-display-small{font-family:Lexend Deca,sans-serif}.au-text--desk-display-large{font-size:56px;line-height:78px}.au-text--desk-display-medium{font-size:48px;line-height:67px}.au-text--desk-display-small{font-size:40px;line-height:56px}.au-text--desk-heading-big,.au-text--desk-heading-large,.au-text--desk-heading-medium,.au-text--desk-heading-small,.au-text--desk-heading-minimum,.au-text--desk-heading-micro,.au-text--desk-heading-nano{font-family:Lexend Deca,sans-serif}.au-text--desk-heading-big{font-size:32px;line-height:45px}.au-text--desk-heading-large{font-size:28px;line-height:39px}.au-text--desk-heading-medium{font-size:24px;line-height:34px}.au-text--desk-heading-small{font-size:20px;line-height:28px}.au-text--desk-heading-minimum{font-size:18px;line-height:24px}.au-text--desk-heading-micro{font-size:16px;line-height:24px}.au-text--desk-heading-nano{font-size:14px;line-height:24px}.au-text--desk-body-big,.au-text--desk-body-large,.au-text--desk-body-medium,.au-text--desk-body-small{font-family:"Source Sans 3",sans-serif}.au-text--desk-body-big{font-size:24px;line-height:34px}.au-text--desk-body-large{font-size:20px;line-height:28px}.au-text--desk-body-medium{font-size:16px;line-height:24px}.au-text--desk-body-small{font-size:14px;line-height:22px}.au-text--desk-caption{font-family:"Source Sans 3",sans-serif;font-size:12px;line-height:19px}}

package/dist/components/Text/types.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-type TextVariant = 'display-large' | 'display-medium' | 'display-small' | 'heading-big' | 'heading-large' | 'heading-medium' | 'heading-small' | 'heading-micro' | 'body-big' | 'body-large' | 'body-medium' | 'body-small' | 'caption';
+type TextVariant = 'display-large' | 'display-medium' | 'display-small' | 'heading-big' | 'heading-large' | 'heading-medium' | 'heading-small' | 'heading-minimum' | 'heading-micro' | 'heading-nano' | 'body-big' | 'body-large' | 'body-medium' | 'body-small' | 'caption';
 type TextWeight = 'bold' | 'semibold' | 'medium' | 'regular' | 'light';
 type TextColor = 'common' | 'secondary' | 'white';
 export interface TextProps extends React.HTMLAttributes<HTMLElement> {

package/dist/components/TokenField/index.es.js CHANGED Viewed

@@ -143,7 +143,8 @@ const TokenField = ({
   timer,
   onChangeTimer,
   onComplete,
-  onChange
+  onChange,
+  "data-testid": dataTestId
 }) => {
   const {
     tokenMap,
@@ -171,7 +172,7 @@ const TokenField = ({
             disabled
           }
         ),
-        /* @__PURE__ */ jsx("div", { ref: rootElementRef, className: "au-token-field__container", children: [...Object.values(tokenMap)].map((_, i) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { ref: rootElementRef, className: "au-token-field__container", "data-testid": dataTestId, children: [...Object.values(tokenMap)].map((_, i) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
           Field.Input,
           {
             customclass: "au-token-field__input",

package/dist/components/TokenField/index.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.es.js","sources":["../../../lib/components/form/TokenField/hook.tsx","../../../lib/components/form/TokenField/index.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from 'react'\n\ntype UseTokenInputProps = {\n size: number\n onComplete?: (token: string) => void\n onChange?: (value: string) => void\n onChangeTimer?: (time: number) => void\n timer?: number \| null\n}\n\nfunction inputtedValueIsValid(value: unknown) {\n const numberValue = Number(value)\n const isNaN = Number.isNaN(numberValue)\n return !isNaN\n}\n\nexport const useTokenField = ({\n size,\n onComplete,\n onChange,\n onChangeTimer,\n timer = null,\n}: UseTokenInputProps) => {\n const rootElementRef = useRef<HTMLDivElement \| null>(null)\n const [tokenMap, setTokenMap] = useState(_getDefaultTokens())\n const [timerTime, setTimerTime] = useState<number \| null>(timer)\n\n useEffect(_handleValueEvents, [tokenMap])\n useEffect(_handleStartTimer, [timer])\n useEffect(_handleTimerUpdate, [timerTime])\n\n function _handleValueEvents() {\n const tokenValueArray =\n Object.keys(tokenMap).map((key) => tokenMap[key]) \|\| []\n const stringField = tokenValueArray.join('')\n const isTokenValid = stringField.length === size\n if (onChange) onChange(stringField)\n\n if (!!isTokenValid && !!onComplete) {\n onComplete(stringField)\n }\n }\n\n function _handleStartTimer() {\n let interval: NodeJS.Timeout\n\n if (timer) {\n interval = setInterval(() => {\n setTimerTime((currentTime) => {\n if (!currentTime) return null\n const reachedTheLimit = currentTime === 0\n if (reachedTheLimit) {\n return timer\n } else {\n return currentTime - 1\n }\n })\n }, 1000)\n\n if (interval) {\n return () => clearInterval(interval)\n }\n }\n }\n\n function _handleTimerUpdate() {\n if (onChangeTimer && timerTime) onChangeTimer(timerTime)\n\n if (timerTime === 0) {\n setTokenMap(_getDefaultTokens())\n _resetFocus()\n }\n }\n\n function _getDefaultTokens() {\n return [...Array(size)].reduce((acc, _, i) => ({ ...acc, [i]: '' }), {})\n }\n\n function _goToNextInput(i: number) {\n const nextItem = rootElementRef?.current?.querySelector<HTMLInputElement>(\n `[data-token-i='${i + 1}']`,\n )\n if (nextItem) nextItem.focus()\n }\n\n function _resetFocus() {\n const firstItem =\n rootElementRef.current?.querySelector<HTMLInputElement>(\n `[data-token-i='0']`,\n )\n firstItem?.focus()\n }\n\n function onKeyUpHandler(e: React.KeyboardEvent<HTMLInputElement>, i: number) {\n const hasBackspacePressed = e.which === 8 \|\| e.key === 'Backspace'\n if (hasBackspacePressed) {\n const previousItem =\n rootElementRef?.current?.querySelector<HTMLInputElement>(\n `[data-token-i='${i - 1}']`,\n )\n const currentItem =\n rootElementRef?.current?.querySelector<HTMLInputElement>(\n `[data-token-i='${i}']`,\n )\n\n setTokenMap({ ...tokenMap, [i]: '' })\n if (!!previousItem && !currentItem?.value) previousItem.focus()\n }\n }\n\n function onChangeNumber(e: React.ChangeEvent<HTMLInputElement>, i: number) {\n e.preventDefault()\n let value = e?.target?.value\n const isNumberValid = inputtedValueIsValid(value)\n const isEmpty = value === ''\n\n if (isNumberValid) {\n let firstEmptyIndex = Object.keys(tokenMap).findIndex(\n (index) => tokenMap[index] === '',\n )\n\n if (value.length > 1) {\n firstEmptyIndex = firstEmptyIndex - 1\n value = value[value.length - 1]\n }\n\n if (firstEmptyIndex < 0) {\n if (value) {\n setTokenMap({ ...tokenMap, [i]: value })\n }\n\n return\n }\n\n setTokenMap({ ...tokenMap, [firstEmptyIndex]: value })\n if (!isEmpty) _goToNextInput(firstEmptyIndex)\n }\n }\n\n function onPasteNumber(e: React.ClipboardEvent<HTMLInputElement>) {\n e.preventDefault()\n const value = e.clipboardData.getData('Text')\n const isNumberValid = inputtedValueIsValid(value)\n\n if (isNumberValid) {\n const arrValue = value.split('').slice(0, size)\n setTokenMap({ ..._getDefaultTokens(), ...arrValue })\n\n _goToNextInput(arrValue.length - 1)\n } else {\n setTokenMap(_getDefaultTokens())\n }\n }\n\n return {\n onKeyUpHandler,\n onChangeNumber,\n onPasteNumber,\n tokenMap,\n rootElementRef,\n }\n}\n","import Field from '../Field'\nimport { useTokenField } from './hook'\nimport './styles.scss'\n\ntype TokenFieldProps = {\n label?: string\n disabled?: boolean\n success?: boolean\n error?: boolean\n errorMessage?: string\n helpMessage?: string\n showOptionalLabel?: boolean\n size?: number\n type?: 'number' \| 'password' \| 'text'\n style?: React.CSSProperties\n timer?: number\n onChangeTimer?: () => void\n onComplete?: (value: string) => void\n onChange?: (value: string) => void\n}\n\nexport const TokenField = ({\n label,\n disabled,\n success,\n error,\n errorMessage,\n helpMessage,\n showOptionalLabel,\n size = 6,\n type,\n style,\n timer,\n onChangeTimer,\n onComplete,\n onChange,\n}: TokenFieldProps) => {\n const {\n tokenMap,\n rootElementRef,\n onChangeNumber,\n onKeyUpHandler,\n onPasteNumber,\n } = useTokenField({ size, onComplete, onChange, onChangeTimer, timer })\n\n return (\n <Field.Root\n style={style}\n customclass=\"au-token-field\"\n success={success}\n error={error}\n disabled={disabled}>\n <Field.Label\n text={label}\n showOptionalLabel={showOptionalLabel}\n success={success}\n error={error}\n disabled={disabled}\n />\n <div ref={rootElementRef} className=\"au-token-field__container\">\n {[...Object.values(tokenMap)].map((_, i) => (\n <div key={`token-digit-${i}`}>\n <Field.Input\n customclass=\"au-token-field__input\"\n type={type \|\| 'number'}\n value={tokenMap[i]}\n disabled={disabled}\n onChange={(e) => onChangeNumber(e, i)}\n onKeyUp={(e) => onKeyUpHandler(e, i)}\n onPaste={(e) => onPasteNumber(e)}\n data-token-i={i}\n\t\t\t\t\t\t\tinputMode=\"numeric\"\n\t\t\t\t\t\t\tautoComplete=\"one-time-code\"\n />\n </div>\n ))}\n </div>\n <Field.Message hasError={!!error} errorMessage={errorMessage} helpMessage={helpMessage} />\n </Field.Root>\n )\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"index.es.js","sources":["../../../lib/components/form/TokenField/hook.tsx","../../../lib/components/form/TokenField/index.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from 'react'\n\ntype UseTokenInputProps = {\n size: number\n onComplete?: (token: string) => void\n onChange?: (value: string) => void\n onChangeTimer?: (time: number) => void\n timer?: number \| null\n}\n\nfunction inputtedValueIsValid(value: unknown) {\n const numberValue = Number(value)\n const isNaN = Number.isNaN(numberValue)\n return !isNaN\n}\n\nexport const useTokenField = ({\n size,\n onComplete,\n onChange,\n onChangeTimer,\n timer = null,\n}: UseTokenInputProps) => {\n const rootElementRef = useRef<HTMLDivElement \| null>(null)\n const [tokenMap, setTokenMap] = useState(_getDefaultTokens())\n const [timerTime, setTimerTime] = useState<number \| null>(timer)\n\n useEffect(_handleValueEvents, [tokenMap])\n useEffect(_handleStartTimer, [timer])\n useEffect(_handleTimerUpdate, [timerTime])\n\n function _handleValueEvents() {\n const tokenValueArray =\n Object.keys(tokenMap).map((key) => tokenMap[key]) \|\| []\n const stringField = tokenValueArray.join('')\n const isTokenValid = stringField.length === size\n if (onChange) onChange(stringField)\n\n if (!!isTokenValid && !!onComplete) {\n onComplete(stringField)\n }\n }\n\n function _handleStartTimer() {\n let interval: NodeJS.Timeout\n\n if (timer) {\n interval = setInterval(() => {\n setTimerTime((currentTime) => {\n if (!currentTime) return null\n const reachedTheLimit = currentTime === 0\n if (reachedTheLimit) {\n return timer\n } else {\n return currentTime - 1\n }\n })\n }, 1000)\n\n if (interval) {\n return () => clearInterval(interval)\n }\n }\n }\n\n function _handleTimerUpdate() {\n if (onChangeTimer && timerTime) onChangeTimer(timerTime)\n\n if (timerTime === 0) {\n setTokenMap(_getDefaultTokens())\n _resetFocus()\n }\n }\n\n function _getDefaultTokens() {\n return [...Array(size)].reduce((acc, _, i) => ({ ...acc, [i]: '' }), {})\n }\n\n function _goToNextInput(i: number) {\n const nextItem = rootElementRef?.current?.querySelector<HTMLInputElement>(\n `[data-token-i='${i + 1}']`,\n )\n if (nextItem) nextItem.focus()\n }\n\n function _resetFocus() {\n const firstItem =\n rootElementRef.current?.querySelector<HTMLInputElement>(\n `[data-token-i='0']`,\n )\n firstItem?.focus()\n }\n\n function onKeyUpHandler(e: React.KeyboardEvent<HTMLInputElement>, i: number) {\n const hasBackspacePressed = e.which === 8 \|\| e.key === 'Backspace'\n if (hasBackspacePressed) {\n const previousItem =\n rootElementRef?.current?.querySelector<HTMLInputElement>(\n `[data-token-i='${i - 1}']`,\n )\n const currentItem =\n rootElementRef?.current?.querySelector<HTMLInputElement>(\n `[data-token-i='${i}']`,\n )\n\n setTokenMap({ ...tokenMap, [i]: '' })\n if (!!previousItem && !currentItem?.value) previousItem.focus()\n }\n }\n\n function onChangeNumber(e: React.ChangeEvent<HTMLInputElement>, i: number) {\n e.preventDefault()\n let value = e?.target?.value\n const isNumberValid = inputtedValueIsValid(value)\n const isEmpty = value === ''\n\n if (isNumberValid) {\n let firstEmptyIndex = Object.keys(tokenMap).findIndex(\n (index) => tokenMap[index] === '',\n )\n\n if (value.length > 1) {\n firstEmptyIndex = firstEmptyIndex - 1\n value = value[value.length - 1]\n }\n\n if (firstEmptyIndex < 0) {\n if (value) {\n setTokenMap({ ...tokenMap, [i]: value })\n }\n\n return\n }\n\n setTokenMap({ ...tokenMap, [firstEmptyIndex]: value })\n if (!isEmpty) _goToNextInput(firstEmptyIndex)\n }\n }\n\n function onPasteNumber(e: React.ClipboardEvent<HTMLInputElement>) {\n e.preventDefault()\n const value = e.clipboardData.getData('Text')\n const isNumberValid = inputtedValueIsValid(value)\n\n if (isNumberValid) {\n const arrValue = value.split('').slice(0, size)\n setTokenMap({ ..._getDefaultTokens(), ...arrValue })\n\n _goToNextInput(arrValue.length - 1)\n } else {\n setTokenMap(_getDefaultTokens())\n }\n }\n\n return {\n onKeyUpHandler,\n onChangeNumber,\n onPasteNumber,\n tokenMap,\n rootElementRef,\n }\n}\n","import Field from '../Field'\nimport { useTokenField } from './hook'\nimport './styles.scss'\n\ntype TokenFieldProps = {\n label?: string\n disabled?: boolean\n success?: boolean\n error?: boolean\n errorMessage?: string\n helpMessage?: string\n showOptionalLabel?: boolean\n size?: number\n type?: 'number' \| 'password' \| 'text'\n style?: React.CSSProperties\n timer?: number\n onChangeTimer?: () => void\n onComplete?: (value: string) => void\n onChange?: (value: string) => void\n 'data-testid'?: string\n}\n\nexport const TokenField = ({\n label,\n disabled,\n success,\n error,\n errorMessage,\n helpMessage,\n showOptionalLabel,\n size = 6,\n type,\n style,\n timer,\n onChangeTimer,\n onComplete,\n onChange,\n 'data-testid': dataTestId,\n}: TokenFieldProps) => {\n const {\n tokenMap,\n rootElementRef,\n onChangeNumber,\n onKeyUpHandler,\n onPasteNumber,\n } = useTokenField({ size, onComplete, onChange, onChangeTimer, timer })\n\n return (\n <Field.Root\n style={style}\n customclass=\"au-token-field\"\n success={success}\n error={error}\n disabled={disabled}>\n <Field.Label\n text={label}\n showOptionalLabel={showOptionalLabel}\n success={success}\n error={error}\n disabled={disabled}\n />\n <div ref={rootElementRef} className=\"au-token-field__container\" data-testid={dataTestId}>\n {[...Object.values(tokenMap)].map((_, i) => (\n <div key={`token-digit-${i}`}>\n <Field.Input\n customclass=\"au-token-field__input\"\n type={type \|\| 'number'}\n value={tokenMap[i]}\n disabled={disabled}\n onChange={(e) => onChangeNumber(e, i)}\n onKeyUp={(e) => onKeyUpHandler(e, i)}\n onPaste={(e) => onPasteNumber(e)}\n data-token-i={i}\n\t\t\t\t\t\t\tinputMode=\"numeric\"\n\t\t\t\t\t\t\tautoComplete=\"one-time-code\"\n />\n </div>\n ))}\n </div>\n <Field.Message hasError={!!error} errorMessage={errorMessage} helpMessage={helpMessage} />\n </Field.Root>\n )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Tooltip/index.d.ts CHANGED Viewed

@@ -3,5 +3,6 @@ export type TooltipProps = {
     position?: 'top' | 'bottom' | 'left' | 'right';
     open?: boolean;
     children: React.ReactNode;
+    'data-testid'?: string;
 };
-export declare const Tooltip: ({ text, position, open, children, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ text, position, open, children, "data-testid": dataTestId, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;