npm - @hashicorp/mds-react - Versions diffs - 0.9.12 → 0.9.14 - Mend

@hashicorp/mds-react 0.9.12 → 0.9.14

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 (143) hide show

package/components/combo-box-primitive/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/combo-box-primitive/index.tsx"],"sourcesContent":["'use client'\n\nimport {\n\tcreateContext,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseId,\n\tuseState,\n} from 'react'\nimport { TextInputBase } from '../form/text-input'\n\ntype TComboBoxItem = {\n\tid: string\n\tvalue: string\n\tlabel: string\n}\n\nconst idWithPrefix = (prefix: string, id: string) => {\n\treturn `${prefix}__${id}`\n}\n\n/*\n Something to note as you move through the code\n * The distinction between the native browser focus and the visually focused item\n \n The native browser focus only ever alternates between the toggle and the search input, focus should never be on an individual {@link ComboBox.Item}\n * The currently selected item is visually identified with css and marked in the accessibility tree with `aria-selected`\n \n You can see more in the [combobox aria guide](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).\n \n To make this terse in our implementation, we use the term `vFocus` to refer to the visually focused {@link ComboBox.Item}\n /\nconst NOTHING_VFOCUSED = -1\n\ntype ComboBoxIds = {\n\ttoggle?: string\n\tpopover?: string\n\tlistbox?: string\n}\n\nfunction assertUniqueIds(ids: ComboBoxIds) {\n\tconst idToKeysMap = new Map<string, string[]>()\n\tfor (const [key, id] of Object.entries(ids)) {\n\t\tif (!id) continue\n\t\tconst existingKeys = idToKeysMap.get(id) \|\| []\n\t\tidToKeysMap.set(id, [...existingKeys, key])\n\t}\n\n\t// tells the caller specifically which ids are duplicated\n\tfor (const [id, keys] of idToKeysMap) {\n\t\tif (keys.length > 1) {\n\t\t\tthrow new Error(\n\t\t\t\t`ComboBox: id '${id}' is duplicated in ${keys.join(', ')}`\n\t\t\t)\n\t\t}\n\t}\n}\n\n/\n internally, we generate them if not provided\n * so we can assert truthiness\n /\ntype InternalComboBoxIds = {\n\ttoggle: string\n\tpopover: string\n\tlistbox: string\n}\n\ninterface ComboBoxContext {\n\taddItem: (item: TComboBoxItem) => void\n\tselectItem: (item: TComboBoxItem) => void\n\tvFocusByIdx: (idx: number) => void\n\tvFocus: (item: TComboBoxItem) => void\n\tvFocusNext: () => void\n\tvFocusPrev: () => void\n\tgetSelectedItem: () => TComboBoxItem \| null\n\tgetVFocusedItem: () => TComboBoxItem \| null\n\tgetItems: () => TComboBoxItem[]\n\tremoveItem: (item: TComboBoxItem) => void\n\tsearchInputRef: React.RefObject<HTMLInputElement>\n\ttoggleRef: React.RefObject<HTMLDivElement>\n\tlistRef: React.RefObject<HTMLUListElement>\n\tisOpen: boolean\n\tclosePopover: () => void\n\topenPopover: () => void\n\thandleVFocusKeyboardControls: (e: React.KeyboardEvent) => void\n\tids: React.MutableRefObject<InternalComboBoxIds>\n}\n\nconst ComboBoxContext = createContext<ComboBoxContext \| null>(null)\n\nconst useComboBox = (): ComboBoxContext => {\n\tconst ctx = useContext(ComboBoxContext)\n\tif (!ctx) {\n\t\tthrow new Error('useComboBox must be used within a ComboBoxProvider')\n\t}\n\treturn ctx\n}\n\ninterface ComboBoxProviderProps {\n\tchildren: React.ReactNode\n\t/\n\t This does not loop the items, it loops the focus when the items are exhausted.\n\t * Meaning that if set to `true` and the user navigates to the last {@link ComboBox.Item} and presses `ArrowDown`,\n\t * the focus will not loop back around to the first {@link ComboBox.Item}, it will return focus to the {@link ComboBox.Trigger} and close the popover.\n\t * Otherwise, if set to `false` and the user navigates to the last {@link ComboBox.Item} and presses `ArrowDown`,\n\t * it will just remain there.\n\t \n\t @default true\n\t /\n\tkeyboardFocusLoop?: boolean\n\tids?: ComboBoxIds\n\tonChangeVFocusedOption?: (option: TComboBoxItem) => void\n\tonChangeSelectedOption?: (option: TComboBoxItem) => void\n}\n\nconst ComboBoxProvider = ({\n\tchildren,\n\tkeyboardFocusLoop = true,\n\tids: providedIds = {},\n\tonChangeVFocusedOption,\n\tonChangeSelectedOption,\n}: ComboBoxProviderProps) => {\n\tassertUniqueIds(providedIds)\n\n\tconst itemsRef = useRef<TComboBoxItem[]>([])\n\tconst internalUsedIds = useRef(new Set<TComboBoxItem['id']>())\n\tconst [selectedItem, _setSelectedItem] = useState<TComboBoxItem \| null>(null)\n\tconst [vFocusedItemIdx, _setVFocusedItemIdx] = useState(NOTHING_VFOCUSED)\n\tconst toggleRef = useRef<HTMLDivElement>(null)\n\tconst searchInputRef = useRef<HTMLInputElement>(null)\n\tconst [isOpen, setIsOpen] = useState(false)\n\tconst listRef = useRef<HTMLUListElement>(null)\n\n\tconst fallBackToggleId = idWithPrefix('hashi-combo-box-toggle', useId())\n\tconst fallBackPopoverId = idWithPrefix('hashi-combo-box-popover', useId())\n\tconst fallBackListboxId = idWithPrefix('hashi-combo-box-listbox', useId())\n\n\t// proxy the react state to simulate event listeners\n\tconst setSelectedItem = useCallback(\n\t\t(item: TComboBoxItem) => {\n\t\t\t_setSelectedItem(item)\n\t\t\tonChangeSelectedOption?.(item)\n\t\t},\n\t\t[onChangeSelectedOption]\n\t)\n\n\tconst setVFocusedItemIdx = useCallback(\n\t\t(idx: number) => {\n\t\t\t_setVFocusedItemIdx(idx)\n\t\t\tonChangeVFocusedOption?.(itemsRef.current[idx])\n\t\t},\n\t\t[onChangeVFocusedOption]\n\t)\n\n\tconst ids = useRef<InternalComboBoxIds>({\n\t\ttoggle: providedIds.toggle ?? fallBackToggleId,\n\t\tpopover: providedIds.popover ?? fallBackPopoverId,\n\t\tlistbox: providedIds.listbox ?? fallBackListboxId,\n\t})\n\n\tconst vFocusByIdx = useCallback(\n\t\t(idx: number) => {\n\t\t\tsetVFocusedItemIdx(idx)\n\t\t},\n\t\t[setVFocusedItemIdx]\n\t)\n\n\tconst vFocusNext = useCallback(() => {\n\t\tconst items = itemsRef.current\n\t\tif (vFocusedItemIdx === NOTHING_VFOCUSED) return 0\n\t\tconst potentialNextIndex = vFocusedItemIdx + 1\n\t\tconst isAtEnd = potentialNextIndex >= items.length\n\t\tlet idx\n\t\tif (isAtEnd && keyboardFocusLoop) {\n\t\t\tidx = NOTHING_VFOCUSED\n\t\t\tsetIsOpen(false)\n\t\t} else {\n\t\t\tidx = isAtEnd ? vFocusedItemIdx : potentialNextIndex\n\t\t}\n\n\t\tvFocusByIdx(idx)\n\t}, [keyboardFocusLoop, vFocusedItemIdx, vFocusByIdx])\n\n\tconst vFocusPrev = useCallback(() => {\n\t\tif (vFocusedItemIdx === NOTHING_VFOCUSED) return 0\n\t\tconst potentialPreviousIndex = vFocusedItemIdx - 1\n\t\tconst isAtStart = potentialPreviousIndex < 0\n\t\tlet idx\n\t\tif (isAtStart && keyboardFocusLoop) {\n\t\t\tidx = NOTHING_VFOCUSED\n\t\t\tsetIsOpen(false)\n\t\t} else {\n\t\t\tidx = isAtStart ? vFocusedItemIdx : potentialPreviousIndex\n\t\t}\n\n\t\tvFocusByIdx(idx)\n\t}, [keyboardFocusLoop, vFocusedItemIdx, vFocusByIdx])\n\n\tconst vFocus = useCallback(\n\t\t(item: TComboBoxItem) => {\n\t\t\tconst foundItemIndex = itemsRef.current.findIndex((i) => i.id === item.id)\n\t\t\tif (foundItemIndex === -1) {\n\t\t\t\tconsole.error('ComboBox: Item not found', item)\n\t\t\t\treturn\n\t\t\t}\n\t\t\tsetVFocusedItemIdx(foundItemIndex)\n\t\t},\n\t\t[setVFocusedItemIdx]\n\t)\n\n\tconst getVFocusedItem = useCallback(() => {\n\t\tif (vFocusedItemIdx === NOTHING_VFOCUSED) return null\n\t\treturn itemsRef.current[vFocusedItemIdx] \|\| null\n\t}, [vFocusedItemIdx])\n\n\tconst selectItem = useCallback(\n\t\t(item: TComboBoxItem) => {\n\t\t\tconst foundItemIndex = itemsRef.current.findIndex((i) => i.id === item.id)\n\t\t\tif (foundItemIndex === -1) {\n\t\t\t\tconsole.error(\n\t\t\t\t\t'ComboBox: Item not found, Selected item not updated',\n\t\t\t\t\titem\n\t\t\t\t)\n\t\t\t\treturn\n\t\t\t}\n\t\t\tsetSelectedItem(item)\n\t\t\tsetIsOpen(false)\n\t\t},\n\t\t[setSelectedItem]\n\t)\n\n\tconst getSelectedItem = useCallback(() => {\n\t\treturn selectedItem\n\t}, [selectedItem])\n\n\tconst addItem = useCallback((item: TComboBoxItem) => {\n\t\tif (internalUsedIds.current.has(item.id)) {\n\t\t\tconst existing = itemsRef.current.find((i) => i.id === item.id)\n\t\t\tconst attemptedToAdd = item\n\t\t\tconst dupes = JSON.stringify({\n\t\t\t\texisting,\n\t\t\t\tattemptedToAdd,\n\t\t\t})\n\t\t\tconst errMessage = `Each ComboBox.Item must have a unique id.\\n Found items with duplicate ids: ${dupes}`\n\t\t\tthrow Error(errMessage)\n\t\t}\n\t\tinternalUsedIds.current.add(item.id)\n\t\titemsRef.current.push(item)\n\t}, [])\n\n\tconst getItems = useCallback(() => {\n\t\treturn itemsRef.current\n\t}, [])\n\n\tconst removeItem = useCallback((item: TComboBoxItem) => {\n\t\tinternalUsedIds.current.delete(item.id)\n\t\titemsRef.current = itemsRef.current.filter((i) => i.id !== item.id)\n\t}, [])\n\n\tuseEffect(() => {\n\t\tif (isOpen) {\n\t\t\tsearchInputRef.current?.focus()\n\t\t}\n\t}, [isOpen, searchInputRef, toggleRef])\n\n\t// if someone navigates to an item, via the keyboard, scroll it into view\n\tuseEffect(() => {\n\t\tconst vFocusedItem = getVFocusedItem()\n\t\tconst list = listRef.current\n\t\tif (vFocusedItem && list) {\n\t\t\tconst itemElement = list.querySelector(\n\t\t\t\t`[data-combo-box-item-id=\"${vFocusedItem.id}\"]`\n\t\t\t)\n\t\t\titemElement?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })\n\t\t}\n\t}, [getVFocusedItem])\n\n\tconst closePopover = useCallback(() => {\n\t\tsetIsOpen(false)\n\t\tsetVFocusedItemIdx(NOTHING_VFOCUSED)\n\t}, [setVFocusedItemIdx])\n\n\tconst openPopover = useCallback(() => {\n\t\tsetIsOpen(true)\n\t}, [])\n\n\t// we need this event handler in several places because\n\t// it has to be attached to a focused element\n\t// if there is a search input in use, that will be the focused element\n\t// otherwise, it will be the toggle element\n\tconst handleVFocusKeyboardControls = (e: React.KeyboardEvent) => {\n\t\tconst isScrollingKey = e.key === 'ArrowDown' \|\| e.key === 'ArrowUp'\n\t\tconst isSpaceKey = e.key === ' '\n\t\tconst hasSearchInput = searchInputRef.current !== null\n\t\tconst isSpacePressWithoutSearchInput = isSpaceKey && !hasSearchInput\n\t\tif (isScrollingKey \|\| isSpacePressWithoutSearchInput) {\n\t\t\te.preventDefault()\n\t\t}\n\n\t\tswitch (e.key) {\n\t\t\tcase 'Escape': {\n\t\t\t\tclosePopover()\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tconst nothingVFocused = getVFocusedItem() === null\n\t\t\t\t// if someone presses down on the search input whilst nothing is vFocused, vFocus the first item\n\t\t\t\tif (isOpen && nothingVFocused) {\n\t\t\t\t\tvFocusByIdx(0)\n\t\t\t\t} else {\n\t\t\t\t\tvFocusNext()\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tvFocusPrev()\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'Enter': {\n\t\t\t\tconst currItem = getVFocusedItem()\n\t\t\t\tif (currItem) {\n\t\t\t\t\tselectItem(currItem)\n\t\t\t\t}\n\t\t\t\tclosePopover()\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tdefault:\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\treturn (\n\t\t<ComboBoxContext.Provider\n\t\t\tvalue={{\n\t\t\t\taddItem,\n\t\t\t\tselectItem,\n\t\t\t\tvFocus,\n\t\t\t\tvFocusByIdx,\n\t\t\t\tvFocusNext,\n\t\t\t\tvFocusPrev,\n\t\t\t\tgetSelectedItem,\n\t\t\t\tgetVFocusedItem,\n\t\t\t\tgetItems,\n\t\t\t\tremoveItem,\n\t\t\t\tsearchInputRef,\n\t\t\t\ttoggleRef,\n\t\t\t\tlistRef,\n\t\t\t\tisOpen,\n\t\t\t\tclosePopover,\n\t\t\t\topenPopover,\n\t\t\t\tids,\n\t\t\t\thandleVFocusKeyboardControls,\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t</ComboBoxContext.Provider>\n\t)\n}\n\ninterface ComboBoxItemProps\n\textends Omit<\n\t\tReact.HTMLAttributes<HTMLLIElement>,\n\t\t'role' \| 'aria-selected' \| 'onClick' \| 'onKeyDown' \| 'onMouseEnter'\n\t> {\n\tvalue: string\n\tlabel: string\n}\n\nconst ComboBoxItem = ({\n\tid: providedId,\n\tvalue,\n\tlabel,\n\tchildren,\n\t...restProps\n}: React.PropsWithChildren<ComboBoxItemProps>) => {\n\tconst generatedId = idWithPrefix('hashi-combo-box-item', useId())\n\tconst id = providedId ?? generatedId\n\tconst { addItem, removeItem, getVFocusedItem, vFocus, selectItem } =\n\t\tuseComboBox()\n\n\tuseEffect(() => {\n\t\taddItem({ id, value, label })\n\t\treturn () => removeItem({ id, value, label })\n\t}, [addItem, id, removeItem, value, label])\n\n\tconst isVFocused = getVFocusedItem()?.id === id\n\n\treturn (\n\t\t<li\n\t\t\tdata-combo-box-item-id={id}\n\t\t\trole=\"option\"\n\t\t\taria-selected={isVFocused}\n\t\t\tdata-vfocused={isVFocused}\n\t\t\tonClick={() => selectItem({ id, value, label })}\n\t\t\tonMouseEnter={() => vFocus({ id, value, label })}\n\t\t\t{...restProps}\n\t\t>\n\t\t\t{children}\n\t\t</li>\n\t)\n}\n\ninterface ComboBoxTriggerProps {\n\tchildren: React.ReactNode\n\tclassName?: string\n}\n\nconst ComboBoxTrigger = ({ children, className }: ComboBoxTriggerProps) => {\n\tconst {\n\t\ttoggleRef,\n\t\topenPopover,\n\t\tclosePopover,\n\t\tisOpen,\n\t\tids,\n\t\thandleVFocusKeyboardControls,\n\t\tsearchInputRef,\n\t} = useComboBox()\n\n\tconst handleClick = (e: React.MouseEvent) => {\n\t\te.stopPropagation() // an external click may be registered as an outside click which will close the popover\n\t\tif (isOpen) {\n\t\t\tclosePopover()\n\t\t} else {\n\t\t\topenPopover()\n\t\t}\n\t}\n\n\tconst handleKeyDown = (e: React.KeyboardEvent) => {\n\t\tconst isOpenKey =\n\t\t\te.key === 'Enter' \|\| e.key === 'ArrowDown' \|\| e.key === ' '\n\t\tconst isClosed = isOpen === false\n\n\t\tif (isOpenKey && isClosed) {\n\t\t\te.preventDefault()\n\t\t\topenPopover()\n\t\t\treturn\n\t\t}\n\n\t\tconst hasSearchInput = searchInputRef.current !== null\n\t\t// if there is a search input, the event handler will be bound there\n\t\tif (!hasSearchInput && isOpen) {\n\t\t\thandleVFocusKeyboardControls(e)\n\t\t}\n\t}\n\n\tconst getOnBlur = () => {\n\t\treturn (e: React.FocusEvent) => {\n\t\t\tconst isClickInside = e.relatedTarget?.closest('[data-combo-box-popover]')\n\t\t\tif (isClickInside) return\n\t\t\tconst hasSearchInput = searchInputRef.current !== null\n\t\t\tif (!hasSearchInput) {\n\t\t\t\tclosePopover()\n\t\t\t}\n\t\t}\n\t}\n\n\treturn (\n\t\t<div\n\t\t\trole=\"combobox\"\n\t\t\tonClick={handleClick}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\ttabIndex={0}\n\t\t\tref={toggleRef}\n\t\t\taria-haspopup=\"listbox\"\n\t\t\taria-expanded={isOpen}\n\t\t\taria-controls={ids.current.popover}\n\t\t\tclassName={className}\n\t\t\tonBlur={getOnBlur()}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\ninterface ComboBoxValueProps {\n\tplaceholder?: string\n}\n\nconst ComboBoxValue = ({\n\tplaceholder = 'Select an option',\n}: ComboBoxValueProps) => {\n\tconst { getSelectedItem } = useComboBox()\n\treturn <>{getSelectedItem()?.label ?? placeholder}</>\n}\n\ninterface ComboBoxPopoverProps {\n\tchildren: React.ReactNode\n\tclassName?: string\n}\n\nconst ComboBoxPopover = ({ children, className }: ComboBoxPopoverProps) => {\n\tconst { isOpen, ids, closePopover } = useComboBox()\n\n\tuseEffect(() => {\n\t\tconst handleClickOutside = (e: MouseEvent) => {\n\t\t\tif (!isOpen) return\n\t\t\tconst target = e.target as HTMLElement\n\t\t\tconst isClickInside = target.closest('[data-combo-box-popover]')\n\t\t\tif (isClickInside) return\n\t\t\tclosePopover()\n\t\t}\n\n\t\tdocument.addEventListener('click', handleClickOutside)\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('click', handleClickOutside)\n\t\t}\n\t}, [isOpen, closePopover])\n\n\tif (!isOpen) return null\n\n\treturn (\n\t\t<div id={ids.current.popover} data-combo-box-popover className={className}>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\ninterface ComboBoxListProps extends React.PropsWithChildren {\n\t/\n\t Not rendered, used to hint assistive technologies,\n\t * indicate the type of options available in the popover\n\t * eg. Schools \| Languages \| Countries\n\t */\n\tlabel: string\n\tclassName?: string\n\tmaxHeight?: `${number}em` \| `${number}px` \| `${number}%`\n\tonScroll?: (e: React.UIEvent<HTMLUListElement>) => void\n}\n\nconst ComboBoxList = ({\n\tlabel,\n\tchildren,\n\tclassName = '',\n\tmaxHeight,\n\tonScroll,\n}: ComboBoxListProps) => {\n\tconst { ids, listRef } = useComboBox()\n\n\treturn (\n\t\t<ul\n\t\t\tid={ids.current.listbox}\n\t\t\taria-label={label}\n\t\t\trole=\"listbox\"\n\t\t\ttabIndex={-1}\n\t\t\tref={listRef}\n\t\t\tclassName={className}\n\t\t\tstyle={{ maxHeight }}\n\t\t\tonScroll={onScroll}\n\t\t>\n\t\t\t{children}\n\t\t</ul>\n\t)\n}\n\ninterface ComboBoxSearchInputProps {\n\tplaceholder?: string\n\tvalue?: string\n\tonChange?: (event: React.ChangeEvent<HTMLInputElement>) => void\n\tonBlur?: () => void\n}\n\nconst ComboBoxSearchInput = ({\n\tplaceholder = 'Search',\n\tvalue,\n\tonChange,\n\tonBlur,\n}: ComboBoxSearchInputProps) => {\n\tconst {\n\t\tsearchInputRef,\n\t\tgetVFocusedItem,\n\t\thandleVFocusKeyboardControls,\n\t\tclosePopover,\n\t} = useComboBox()\n\n\treturn (\n\t\t<TextInputBase\n\t\t\tfield={{\n\t\t\t\ttype: 'search',\n\t\t\t\tref: searchInputRef,\n\t\t\t\tautoComplete: 'off',\n\t\t\t\t'aria-haspopup': 'listbox',\n\t\t\t\t'aria-autocomplete': 'list',\n\t\t\t\trole: 'combobox',\n\t\t\t\t'aria-activedescendant': getVFocusedItem()?.id ?? '',\n\t\t\t\tplaceholder,\n\t\t\t\tvalue,\n\t\t\t\tonChange,\n\t\t\t\tonKeyDown: handleVFocusKeyboardControls,\n\t\t\t\tonBlur: (e) => {\n\t\t\t\t\te.stopPropagation()\n\t\t\t\t\tconst isClickInside = e.relatedTarget?.closest(\n\t\t\t\t\t\t'[data-combo-box-popover]'\n\t\t\t\t\t)\n\t\t\t\t\tif (isClickInside) return\n\t\t\t\t\tclosePopover()\n\t\t\t\t\tonBlur?.()\n\t\t\t\t},\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nexport type { TComboBoxItem, ComboBoxListProps, ComboBoxSearchInputProps }\n\nexport const ComboBox = Object.freeze({\n\tRoot: ComboBoxProvider,\n\tTrigger: ComboBoxTrigger,\n\tPopover: ComboBoxPopover,\n\tSearchInput: ComboBoxSearchInput,\n\tList: ComboBoxList,\n\tItem: ComboBoxItem,\n\tValue: ComboBoxValue,\n})\n"],"names":["idWithPrefix","prefix","id","NOTHING_VFOCUSED","assertUniqueIds","ids","idToKeysMap","key","existingKeys","keys","ComboBoxContext","createContext","ctx","useContext","ComboBoxProvider","children","keyboardFocusLoop","providedIds","onChangeVFocusedOption","onChangeSelectedOption","itemsRef","internalUsedIds","useRef","selectedItem","_setSelectedItem","useState","vFocusedItemIdx","toggleRef","searchInputRef","isOpen","setIsOpen","listRef","fallBackToggleId","useId","fallBackPopoverId","fallBackListboxId","useCallback","item","setVFocusedItemIdx","idx","_setVFocusedItemIdx","vFocusByIdx","vFocusNext","items","potentialNextIndex","isAtEnd","vFocusPrev","potentialPreviousIndex","isAtStart","foundItemIndex","i","getVFocusedItem","setSelectedItem","addItem","existing","errMessage","getItems","removeItem","useEffect","vFocusedItem","list","closePopover","openPopover","handleVFocusKeyboardControls","isScrollingKey","isSpaceKey","hasSearchInput","nothingVFocused","currItem","selectItem","jsx","vFocus","getSelectedItem","ComboBoxItem","providedId","value","label","restProps","generatedId","useComboBox","isVFocused","ComboBoxTrigger","className","handleClick","e","getOnBlur","handleKeyDown","placeholder","Fragment","ComboBoxPopover","handleClickOutside","ComboBoxList","maxHeight","onScroll","ComboBoxSearchInput","onChange","onBlur","TextInputBase","ComboBox","ComboBoxValue"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/combo-box-primitive/index.tsx"],"sourcesContent":["'use client'\n\nimport {\n\tcreateContext,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseId,\n\tuseState,\n} from 'react'\nimport { TextInputBase } from '../form/text-input'\n\ntype TComboBoxItem = {\n\tid: string\n\tvalue: string\n\tlabel: string\n}\n\nconst idWithPrefix = (prefix: string, id: string) => {\n\treturn `${prefix}__${id}`\n}\n\n/*\n Something to note as you move through the code\n * The distinction between the native browser focus and the visually focused item\n \n The native browser focus only ever alternates between the toggle and the search input, focus should never be on an individual {@link ComboBox.Item}\n * The currently selected item is visually identified with css and marked in the accessibility tree with `aria-selected`\n \n You can see more in the [combobox aria guide](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).\n \n To make this terse in our implementation, we use the term `vFocus` to refer to the visually focused {@link ComboBox.Item}\n /\nconst NOTHING_VFOCUSED = -1\n\ntype ComboBoxIds = {\n\ttoggle?: string\n\tpopover?: string\n\tlistbox?: string\n}\n\nfunction assertUniqueIds(ids: ComboBoxIds) {\n\tconst idToKeysMap = new Map<string, string[]>()\n\tfor (const [key, id] of Object.entries(ids)) {\n\t\tif (!id) continue\n\t\tconst existingKeys = idToKeysMap.get(id) \|\| []\n\t\tidToKeysMap.set(id, [...existingKeys, key])\n\t}\n\n\t// tells the caller specifically which ids are duplicated\n\tfor (const [id, keys] of idToKeysMap) {\n\t\tif (keys.length > 1) {\n\t\t\tthrow new Error(\n\t\t\t\t`ComboBox: id '${id}' is duplicated in ${keys.join(', ')}`,\n\t\t\t)\n\t\t}\n\t}\n}\n\n/\n internally, we generate them if not provided\n * so we can assert truthiness\n /\ntype InternalComboBoxIds = {\n\ttoggle: string\n\tpopover: string\n\tlistbox: string\n}\n\ninterface ComboBoxContext {\n\taddItem: (item: TComboBoxItem) => void\n\tselectItem: (item: TComboBoxItem) => void\n\tvFocusByIdx: (idx: number) => void\n\tvFocus: (item: TComboBoxItem) => void\n\tvFocusNext: () => void\n\tvFocusPrev: () => void\n\tgetSelectedItem: () => TComboBoxItem \| null\n\tgetVFocusedItem: () => TComboBoxItem \| null\n\tgetItems: () => TComboBoxItem[]\n\tremoveItem: (item: TComboBoxItem) => void\n\tsearchInputRef: React.RefObject<HTMLInputElement>\n\ttoggleRef: React.RefObject<HTMLDivElement>\n\tlistRef: React.RefObject<HTMLUListElement>\n\tisOpen: boolean\n\tclosePopover: () => void\n\topenPopover: () => void\n\thandleVFocusKeyboardControls: (e: React.KeyboardEvent) => void\n\tids: React.MutableRefObject<InternalComboBoxIds>\n}\n\nconst ComboBoxContext = createContext<ComboBoxContext \| null>(null)\n\nconst useComboBox = (): ComboBoxContext => {\n\tconst ctx = useContext(ComboBoxContext)\n\tif (!ctx) {\n\t\tthrow new Error('useComboBox must be used within a ComboBoxProvider')\n\t}\n\treturn ctx\n}\n\ninterface ComboBoxProviderProps {\n\tchildren: React.ReactNode\n\t/\n\t This does not loop the items, it loops the focus when the items are exhausted.\n\t * Meaning that if set to `true` and the user navigates to the last {@link ComboBox.Item} and presses `ArrowDown`,\n\t * the focus will not loop back around to the first {@link ComboBox.Item}, it will return focus to the {@link ComboBox.Trigger} and close the popover.\n\t * Otherwise, if set to `false` and the user navigates to the last {@link ComboBox.Item} and presses `ArrowDown`,\n\t * it will just remain there.\n\t \n\t @default true\n\t /\n\tkeyboardFocusLoop?: boolean\n\tids?: ComboBoxIds\n\tonChangeVFocusedOption?: (option: TComboBoxItem) => void\n\tonChangeSelectedOption?: (option: TComboBoxItem) => void\n}\n\nconst ComboBoxProvider = ({\n\tchildren,\n\tkeyboardFocusLoop = true,\n\tids: providedIds = {},\n\tonChangeVFocusedOption,\n\tonChangeSelectedOption,\n}: ComboBoxProviderProps) => {\n\tassertUniqueIds(providedIds)\n\n\tconst itemsRef = useRef<TComboBoxItem[]>([])\n\tconst internalUsedIds = useRef(new Set<TComboBoxItem['id']>())\n\tconst [selectedItem, _setSelectedItem] = useState<TComboBoxItem \| null>(null)\n\tconst [vFocusedItemIdx, _setVFocusedItemIdx] = useState(NOTHING_VFOCUSED)\n\tconst toggleRef = useRef<HTMLDivElement>(null)\n\tconst searchInputRef = useRef<HTMLInputElement>(null)\n\tconst [isOpen, setIsOpen] = useState(false)\n\tconst listRef = useRef<HTMLUListElement>(null)\n\n\tconst fallBackToggleId = idWithPrefix('hashi-combo-box-toggle', useId())\n\tconst fallBackPopoverId = idWithPrefix('hashi-combo-box-popover', useId())\n\tconst fallBackListboxId = idWithPrefix('hashi-combo-box-listbox', useId())\n\n\t// proxy the react state to simulate event listeners\n\tconst setSelectedItem = useCallback(\n\t\t(item: TComboBoxItem) => {\n\t\t\t_setSelectedItem(item)\n\t\t\tonChangeSelectedOption?.(item)\n\t\t},\n\t\t[onChangeSelectedOption],\n\t)\n\n\tconst setVFocusedItemIdx = useCallback(\n\t\t(idx: number) => {\n\t\t\t_setVFocusedItemIdx(idx)\n\t\t\tonChangeVFocusedOption?.(itemsRef.current[idx])\n\t\t},\n\t\t[onChangeVFocusedOption],\n\t)\n\n\tconst ids = useRef<InternalComboBoxIds>({\n\t\ttoggle: providedIds.toggle ?? fallBackToggleId,\n\t\tpopover: providedIds.popover ?? fallBackPopoverId,\n\t\tlistbox: providedIds.listbox ?? fallBackListboxId,\n\t})\n\n\tconst vFocusByIdx = useCallback(\n\t\t(idx: number) => {\n\t\t\tsetVFocusedItemIdx(idx)\n\t\t},\n\t\t[setVFocusedItemIdx],\n\t)\n\n\tconst vFocusNext = useCallback(() => {\n\t\tconst items = itemsRef.current\n\t\tif (vFocusedItemIdx === NOTHING_VFOCUSED) return 0\n\t\tconst potentialNextIndex = vFocusedItemIdx + 1\n\t\tconst isAtEnd = potentialNextIndex >= items.length\n\t\tlet idx\n\t\tif (isAtEnd && keyboardFocusLoop) {\n\t\t\tidx = NOTHING_VFOCUSED\n\t\t\tsetIsOpen(false)\n\t\t} else {\n\t\t\tidx = isAtEnd ? vFocusedItemIdx : potentialNextIndex\n\t\t}\n\n\t\tvFocusByIdx(idx)\n\t}, [keyboardFocusLoop, vFocusedItemIdx, vFocusByIdx])\n\n\tconst vFocusPrev = useCallback(() => {\n\t\tif (vFocusedItemIdx === NOTHING_VFOCUSED) return 0\n\t\tconst potentialPreviousIndex = vFocusedItemIdx - 1\n\t\tconst isAtStart = potentialPreviousIndex < 0\n\t\tlet idx\n\t\tif (isAtStart && keyboardFocusLoop) {\n\t\t\tidx = NOTHING_VFOCUSED\n\t\t\tsetIsOpen(false)\n\t\t} else {\n\t\t\tidx = isAtStart ? vFocusedItemIdx : potentialPreviousIndex\n\t\t}\n\n\t\tvFocusByIdx(idx)\n\t}, [keyboardFocusLoop, vFocusedItemIdx, vFocusByIdx])\n\n\tconst vFocus = useCallback(\n\t\t(item: TComboBoxItem) => {\n\t\t\tconst foundItemIndex = itemsRef.current.findIndex((i) => i.id === item.id)\n\t\t\tif (foundItemIndex === -1) {\n\t\t\t\tconsole.error('ComboBox: Item not found', item)\n\t\t\t\treturn\n\t\t\t}\n\t\t\tsetVFocusedItemIdx(foundItemIndex)\n\t\t},\n\t\t[setVFocusedItemIdx],\n\t)\n\n\tconst getVFocusedItem = useCallback(() => {\n\t\tif (vFocusedItemIdx === NOTHING_VFOCUSED) return null\n\t\treturn itemsRef.current[vFocusedItemIdx] \|\| null\n\t}, [vFocusedItemIdx])\n\n\tconst selectItem = useCallback(\n\t\t(item: TComboBoxItem) => {\n\t\t\tconst foundItemIndex = itemsRef.current.findIndex((i) => i.id === item.id)\n\t\t\tif (foundItemIndex === -1) {\n\t\t\t\tconsole.error(\n\t\t\t\t\t'ComboBox: Item not found, Selected item not updated',\n\t\t\t\t\titem,\n\t\t\t\t)\n\t\t\t\treturn\n\t\t\t}\n\t\t\tsetSelectedItem(item)\n\t\t\tsetIsOpen(false)\n\t\t},\n\t\t[setSelectedItem],\n\t)\n\n\tconst getSelectedItem = useCallback(() => {\n\t\treturn selectedItem\n\t}, [selectedItem])\n\n\tconst addItem = useCallback((item: TComboBoxItem) => {\n\t\tif (internalUsedIds.current.has(item.id)) {\n\t\t\tconst existing = itemsRef.current.find((i) => i.id === item.id)\n\t\t\tconst attemptedToAdd = item\n\t\t\tconst dupes = JSON.stringify({\n\t\t\t\texisting,\n\t\t\t\tattemptedToAdd,\n\t\t\t})\n\t\t\tconst errMessage = `Each ComboBox.Item must have a unique id.\\n Found items with duplicate ids: ${dupes}`\n\t\t\tthrow Error(errMessage)\n\t\t}\n\t\tinternalUsedIds.current.add(item.id)\n\t\titemsRef.current.push(item)\n\t}, [])\n\n\tconst getItems = useCallback(() => {\n\t\treturn itemsRef.current\n\t}, [])\n\n\tconst removeItem = useCallback((item: TComboBoxItem) => {\n\t\tinternalUsedIds.current.delete(item.id)\n\t\titemsRef.current = itemsRef.current.filter((i) => i.id !== item.id)\n\t}, [])\n\n\tuseEffect(() => {\n\t\tif (isOpen) {\n\t\t\tsearchInputRef.current?.focus()\n\t\t}\n\t}, [isOpen, searchInputRef, toggleRef])\n\n\t// if someone navigates to an item, via the keyboard, scroll it into view\n\tuseEffect(() => {\n\t\tconst vFocusedItem = getVFocusedItem()\n\t\tconst list = listRef.current\n\t\tif (vFocusedItem && list) {\n\t\t\tconst itemElement = list.querySelector(\n\t\t\t\t`[data-combo-box-item-id=\"${vFocusedItem.id}\"]`,\n\t\t\t)\n\t\t\titemElement?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })\n\t\t}\n\t}, [getVFocusedItem])\n\n\tconst closePopover = useCallback(() => {\n\t\tsetIsOpen(false)\n\t\tsetVFocusedItemIdx(NOTHING_VFOCUSED)\n\t}, [setVFocusedItemIdx])\n\n\tconst openPopover = useCallback(() => {\n\t\tsetIsOpen(true)\n\t}, [])\n\n\t// we need this event handler in several places because\n\t// it has to be attached to a focused element\n\t// if there is a search input in use, that will be the focused element\n\t// otherwise, it will be the toggle element\n\tconst handleVFocusKeyboardControls = (e: React.KeyboardEvent) => {\n\t\tconst isScrollingKey = e.key === 'ArrowDown' \|\| e.key === 'ArrowUp'\n\t\tconst isSpaceKey = e.key === ' '\n\t\tconst hasSearchInput = searchInputRef.current !== null\n\t\tconst isSpacePressWithoutSearchInput = isSpaceKey && !hasSearchInput\n\t\tif (isScrollingKey \|\| isSpacePressWithoutSearchInput) {\n\t\t\te.preventDefault()\n\t\t}\n\n\t\tswitch (e.key) {\n\t\t\tcase 'Escape': {\n\t\t\t\tclosePopover()\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tconst nothingVFocused = getVFocusedItem() === null\n\t\t\t\t// if someone presses down on the search input whilst nothing is vFocused, vFocus the first item\n\t\t\t\tif (isOpen && nothingVFocused) {\n\t\t\t\t\tvFocusByIdx(0)\n\t\t\t\t} else {\n\t\t\t\t\tvFocusNext()\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tvFocusPrev()\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'Enter': {\n\t\t\t\tconst currItem = getVFocusedItem()\n\t\t\t\tif (currItem) {\n\t\t\t\t\tselectItem(currItem)\n\t\t\t\t}\n\t\t\t\tclosePopover()\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tdefault:\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\treturn (\n\t\t<ComboBoxContext.Provider\n\t\t\tvalue={{\n\t\t\t\taddItem,\n\t\t\t\tselectItem,\n\t\t\t\tvFocus,\n\t\t\t\tvFocusByIdx,\n\t\t\t\tvFocusNext,\n\t\t\t\tvFocusPrev,\n\t\t\t\tgetSelectedItem,\n\t\t\t\tgetVFocusedItem,\n\t\t\t\tgetItems,\n\t\t\t\tremoveItem,\n\t\t\t\tsearchInputRef,\n\t\t\t\ttoggleRef,\n\t\t\t\tlistRef,\n\t\t\t\tisOpen,\n\t\t\t\tclosePopover,\n\t\t\t\topenPopover,\n\t\t\t\tids,\n\t\t\t\thandleVFocusKeyboardControls,\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t</ComboBoxContext.Provider>\n\t)\n}\n\ninterface ComboBoxItemProps extends Omit<\n\tReact.HTMLAttributes<HTMLLIElement>,\n\t'role' \| 'aria-selected' \| 'onClick' \| 'onKeyDown' \| 'onMouseEnter'\n> {\n\tvalue: string\n\tlabel: string\n}\n\nconst ComboBoxItem = ({\n\tid: providedId,\n\tvalue,\n\tlabel,\n\tchildren,\n\t...restProps\n}: React.PropsWithChildren<ComboBoxItemProps>) => {\n\tconst generatedId = idWithPrefix('hashi-combo-box-item', useId())\n\tconst id = providedId ?? generatedId\n\tconst { addItem, removeItem, getVFocusedItem, vFocus, selectItem } =\n\t\tuseComboBox()\n\n\tuseEffect(() => {\n\t\taddItem({ id, value, label })\n\t\treturn () => removeItem({ id, value, label })\n\t}, [addItem, id, removeItem, value, label])\n\n\tconst isVFocused = getVFocusedItem()?.id === id\n\n\treturn (\n\t\t<li\n\t\t\tdata-combo-box-item-id={id}\n\t\t\trole=\"option\"\n\t\t\taria-selected={isVFocused}\n\t\t\tdata-vfocused={isVFocused}\n\t\t\tonClick={() => selectItem({ id, value, label })}\n\t\t\tonMouseEnter={() => vFocus({ id, value, label })}\n\t\t\t{...restProps}\n\t\t>\n\t\t\t{children}\n\t\t</li>\n\t)\n}\n\ninterface ComboBoxTriggerProps {\n\tchildren: React.ReactNode\n\tclassName?: string\n}\n\nconst ComboBoxTrigger = ({ children, className }: ComboBoxTriggerProps) => {\n\tconst {\n\t\ttoggleRef,\n\t\topenPopover,\n\t\tclosePopover,\n\t\tisOpen,\n\t\tids,\n\t\thandleVFocusKeyboardControls,\n\t\tsearchInputRef,\n\t} = useComboBox()\n\n\tconst handleClick = (e: React.MouseEvent) => {\n\t\te.stopPropagation() // an external click may be registered as an outside click which will close the popover\n\t\tif (isOpen) {\n\t\t\tclosePopover()\n\t\t} else {\n\t\t\topenPopover()\n\t\t}\n\t}\n\n\tconst handleKeyDown = (e: React.KeyboardEvent) => {\n\t\tconst isOpenKey =\n\t\t\te.key === 'Enter' \|\| e.key === 'ArrowDown' \|\| e.key === ' '\n\t\tconst isClosed = isOpen === false\n\n\t\tif (isOpenKey && isClosed) {\n\t\t\te.preventDefault()\n\t\t\topenPopover()\n\t\t\treturn\n\t\t}\n\n\t\tconst hasSearchInput = searchInputRef.current !== null\n\t\t// if there is a search input, the event handler will be bound there\n\t\tif (!hasSearchInput && isOpen) {\n\t\t\thandleVFocusKeyboardControls(e)\n\t\t}\n\t}\n\n\tconst getOnBlur = () => {\n\t\treturn (e: React.FocusEvent) => {\n\t\t\tconst isClickInside = e.relatedTarget?.closest('[data-combo-box-popover]')\n\t\t\tif (isClickInside) return\n\t\t\tconst hasSearchInput = searchInputRef.current !== null\n\t\t\tif (!hasSearchInput) {\n\t\t\t\tclosePopover()\n\t\t\t}\n\t\t}\n\t}\n\n\treturn (\n\t\t<div\n\t\t\trole=\"combobox\"\n\t\t\tonClick={handleClick}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\ttabIndex={0}\n\t\t\tref={toggleRef}\n\t\t\taria-haspopup=\"listbox\"\n\t\t\taria-expanded={isOpen}\n\t\t\taria-controls={ids.current.popover}\n\t\t\tclassName={className}\n\t\t\tonBlur={getOnBlur()}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\ninterface ComboBoxValueProps {\n\tplaceholder?: string\n}\n\nconst ComboBoxValue = ({\n\tplaceholder = 'Select an option',\n}: ComboBoxValueProps) => {\n\tconst { getSelectedItem } = useComboBox()\n\treturn <>{getSelectedItem()?.label ?? placeholder}</>\n}\n\ninterface ComboBoxPopoverProps {\n\tchildren: React.ReactNode\n\tclassName?: string\n}\n\nconst ComboBoxPopover = ({ children, className }: ComboBoxPopoverProps) => {\n\tconst { isOpen, ids, closePopover } = useComboBox()\n\n\tuseEffect(() => {\n\t\tconst handleClickOutside = (e: MouseEvent) => {\n\t\t\tif (!isOpen) return\n\t\t\tconst target = e.target as HTMLElement\n\t\t\tconst isClickInside = target.closest('[data-combo-box-popover]')\n\t\t\tif (isClickInside) return\n\t\t\tclosePopover()\n\t\t}\n\n\t\tdocument.addEventListener('click', handleClickOutside)\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('click', handleClickOutside)\n\t\t}\n\t}, [isOpen, closePopover])\n\n\tif (!isOpen) return null\n\n\treturn (\n\t\t<div id={ids.current.popover} data-combo-box-popover className={className}>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\ninterface ComboBoxListProps extends React.PropsWithChildren {\n\t/\n\t Not rendered, used to hint assistive technologies,\n\t * indicate the type of options available in the popover\n\t * eg. Schools \| Languages \| Countries\n\t */\n\tlabel: string\n\tclassName?: string\n\tmaxHeight?: `${number}em` \| `${number}px` \| `${number}%`\n\tonScroll?: (e: React.UIEvent<HTMLUListElement>) => void\n}\n\nconst ComboBoxList = ({\n\tlabel,\n\tchildren,\n\tclassName = '',\n\tmaxHeight,\n\tonScroll,\n}: ComboBoxListProps) => {\n\tconst { ids, listRef } = useComboBox()\n\n\treturn (\n\t\t<ul\n\t\t\tid={ids.current.listbox}\n\t\t\taria-label={label}\n\t\t\trole=\"listbox\"\n\t\t\ttabIndex={-1}\n\t\t\tref={listRef}\n\t\t\tclassName={className}\n\t\t\tstyle={{ maxHeight }}\n\t\t\tonScroll={onScroll}\n\t\t>\n\t\t\t{children}\n\t\t</ul>\n\t)\n}\n\ninterface ComboBoxSearchInputProps {\n\tplaceholder?: string\n\tvalue?: string\n\tonChange?: (event: React.ChangeEvent<HTMLInputElement>) => void\n\tonBlur?: () => void\n}\n\nconst ComboBoxSearchInput = ({\n\tplaceholder = 'Search',\n\tvalue,\n\tonChange,\n\tonBlur,\n}: ComboBoxSearchInputProps) => {\n\tconst {\n\t\tsearchInputRef,\n\t\tgetVFocusedItem,\n\t\thandleVFocusKeyboardControls,\n\t\tclosePopover,\n\t} = useComboBox()\n\n\treturn (\n\t\t<TextInputBase\n\t\t\tfield={{\n\t\t\t\ttype: 'search',\n\t\t\t\tref: searchInputRef,\n\t\t\t\tautoComplete: 'off',\n\t\t\t\t'aria-haspopup': 'listbox',\n\t\t\t\t'aria-autocomplete': 'list',\n\t\t\t\trole: 'combobox',\n\t\t\t\t'aria-activedescendant': getVFocusedItem()?.id ?? '',\n\t\t\t\tplaceholder,\n\t\t\t\tvalue,\n\t\t\t\tonChange,\n\t\t\t\tonKeyDown: handleVFocusKeyboardControls,\n\t\t\t\tonBlur: (e) => {\n\t\t\t\t\te.stopPropagation()\n\t\t\t\t\tconst isClickInside = e.relatedTarget?.closest(\n\t\t\t\t\t\t'[data-combo-box-popover]',\n\t\t\t\t\t)\n\t\t\t\t\tif (isClickInside) return\n\t\t\t\t\tclosePopover()\n\t\t\t\t\tonBlur?.()\n\t\t\t\t},\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nexport type { TComboBoxItem, ComboBoxListProps, ComboBoxSearchInputProps }\n\nexport const ComboBox = Object.freeze({\n\tRoot: ComboBoxProvider,\n\tTrigger: ComboBoxTrigger,\n\tPopover: ComboBoxPopover,\n\tSearchInput: ComboBoxSearchInput,\n\tList: ComboBoxList,\n\tItem: ComboBoxItem,\n\tValue: ComboBoxValue,\n})\n"],"names":["idWithPrefix","prefix","id","NOTHING_VFOCUSED","assertUniqueIds","ids","idToKeysMap","key","existingKeys","keys","ComboBoxContext","createContext","ctx","useContext","ComboBoxProvider","children","keyboardFocusLoop","providedIds","onChangeVFocusedOption","onChangeSelectedOption","itemsRef","internalUsedIds","useRef","selectedItem","_setSelectedItem","useState","vFocusedItemIdx","toggleRef","searchInputRef","isOpen","setIsOpen","listRef","fallBackToggleId","useId","fallBackPopoverId","fallBackListboxId","useCallback","item","setVFocusedItemIdx","idx","_setVFocusedItemIdx","vFocusByIdx","vFocusNext","items","potentialNextIndex","isAtEnd","vFocusPrev","potentialPreviousIndex","isAtStart","foundItemIndex","i","getVFocusedItem","setSelectedItem","addItem","existing","errMessage","getItems","removeItem","useEffect","vFocusedItem","list","closePopover","openPopover","handleVFocusKeyboardControls","isScrollingKey","isSpaceKey","hasSearchInput","nothingVFocused","currItem","selectItem","jsx","vFocus","getSelectedItem","ComboBoxItem","providedId","value","label","restProps","generatedId","useComboBox","isVFocused","ComboBoxTrigger","className","handleClick","e","getOnBlur","handleKeyDown","placeholder","Fragment","ComboBoxPopover","handleClickOutside","ComboBoxList","maxHeight","onScroll","ComboBoxSearchInput","onChange","onBlur","TextInputBase","ComboBox","ComboBoxValue"],"mappings":";;;;AAoBC,MAAAA,IAAgB,CAAAC,GAAOC,MACxB,GAAAD,CAAA,KAAAC,CAAA,IAqBAC,IAAyB;AACxB,SAAMC,GAAAC,GAAA;AACN,QAAAC,IAA+B,oBAAQ,IAAG;AACzC,aAAS,CAAAC,GAAAL,CAAA,KAAA,OAAA,QAAAG,CAAA,GAAA;AACT,QAAA,CAAAH,EAAM;AACN,UAAAM,IAAqBF,EAAG,IAAAJ,CAAc,KAAI,CAAA;AAC3C,IAAAI,EAAA,IAAAJ,GAAA,CAAA,GAAAM,GAAAD,CAAA,CAAA;AAAA,EAGA;AACC,aAAS,CAAAL,GAAAO,CAAS,KAAGH;AACpB,QAAAG,WAAU;AAAA;QAEV,iBAAAP,CAAA,sBAAAO,EAAA,KAAA,IAAA,CAAA;AAAA,MACD;AAmCF;AAEA,MAAMC,IAAcC,EAAuB,IAAA,OAC9B;AACZ,QAAKC,IAAKC,EAAAH,CAAA;AACT,MAAA,CAAAE;AACD,UAAA,IAAA,MAAA,oDAAA;AAED,SAAAA;AAmBA,GACCE,KAAA,CAAA;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC,IAAmB;AAAA,EACnB,KAAAC,IAAA,CAAA;AAAA,EACA,wBAAAC;AAAA,EACD,wBAAAC;AACC,MAAA;AAEA,EAAAf,GAAMa,CAAqC;AAC3C,QAAMG,MAAkB,CAAA,CAAA,GAClBC,IAAeC,EAAoB,oBAA+B,IAAI,CAAA,GACtE,CAACC,GAAAC,CAAiB,IAAAC,EAAuB,IAAA,GACzC,CAAAC,IAAuC,IAAAD,EAAAtB,CAAA,GACvCwB,IAAAL,EAAiB,OACjBM,IAASN,EAAa,IAAA,GACtB,CAAAO,GAAAC,KAAuCL,EAAA,EAAA,GAEvCM,MAAA,IAAmB,GACnBC,IAAAhC,EAAoB,0BAAaiC,EAA2B,CAAA,GAC5DC,IAAoBlC,EAAa,2BAA2BiC,EAAA,CAAO,GAGnEE,IAAkBnC,EAAA,2BAAAiC,EAAA,CAAA,OACEG;AAAA,IACxB,CAAAC,MAAA;AACA,MAAAb,EAAAa,CAAA,GACDlB,IAAAkB,CAAA;AAAA,IACA;AAAA,IACD,CAAAlB,CAAA;AAAA,EAEA,GACEmB,IAAgBF;AAAA,IAChB,CAAAG,MAAA;AACA,MAAAC,EAAAD,IACDrB,IAAAE,EAAA,QAAAmB,CAAA,CAAA;AAAA,IACA;AAAA,IACD,CAAArB,CAAA;AAAA,EAEA,OACSI,EAAA;AAAA,IACR,QAAAL;IACA,SAASA,EAAY,WAAWiB;AAAA,IAChC,SAAAjB,EAAA,WAAAkB;AAAA,EAED,CAAA,GACEM,IAAgBL;AAAA,IAChB,CAAAG,MAAA;AACD,MAAAD,EAAAC,CAAA;AAAA,IACA;AAAA,IACD,CAAAD,CAAA;AAAA,EAEA,GACCI,IAAcN,EAAS,MAAA;AACvB,UAAIO,IAAAvB,EAAA;AACJ,QAAAM,QAA2B,QAAkB;AAC7C,UAAMkB,QAAsC,GACxCC,IAAAD,KAAAD,EAAA;AACJ,QAAIJ;AACH,IAAAM,KAAM7B,KACNuB,IAAApC,GACD2B,EAAO,EAAA,KAEPS,IAAAM,IAAAnB,IAAAkB,KAGGL,CAAA;AAAA,EAEJ,GAAA,CAAAvB,GAAmBU,GAAkBe,CAAA,CAAA,GAChCK,IAAAV,EAAoB,MAAA;AACxB,QAAAV,MAAMvB,EAAyB,QAAkB;AACjD,UAAM4C,IAAYrB,IAAyB,GACvCsB,IAAAD,IAAA;AACJ,QAAIR;AACH,IAAAS,KAAMhC,KACNuB,IAAApC,GACD2B,EAAO,EAAA,KAEPS,IAAAS,IAAAtB,IAAAqB,KAGGR,CAAA;AAAA,EAEJ,GAAA,CAAAvB,GAAeU,GAAAe,CAAA,CAAA,OACWL;AAAA,IACxB,CAAAC,MAAM;AACN,YAAIY,IAAmB7B,EAAI,QAAA,UAAA,CAAA8B,MAAAA,EAAA,OAAAb,EAAA,EAAA;AAC1B,gBAAc,IAAA;AACd,gBAAA,MAAA,4BAAAA,CAAA;AACD;AAAA,MACA;AACD,MAAAC,EAAAW,CAAA;AAAA,IACA;AAAA,IACD,CAAAX,CAAA;AAAA,EAEA,GACKa,IAAAf,EAAoB,MACxBV,MAAwBvB,IAAoB,OACzCiB,EAAA,QAAgBM,CAAA,KAAA,MAEpB,CAAAA,CAAmB,CAAA,OACOU;AAAA,IACxB,CAAAC,MAAM;AAEL,UADsBjB,EAAI,QAAA,UAAA,CAAA8B,MAAAA,EAAA,OAAAb,EAAA,EAAA,MAClB,IAAA;AAAA,gBACP;AAAA,UACA;AAAA,UACDA;AAAA,QACA;AACD;AAAA,MACA;AACA,MAAAe,EAAef,CAAA,GAChBP,EAAA,EAAA;AAAA,IACA;AAAA,IACD,CAAAsB,CAAA;AAAA,EAEA,OACQhB,EAAA,MACJb,KAEY,IACX8B,IAAAjB,EAAgB,CAAAC,MAAY;AAC/B,kBAA0B,IAAAA,EAAQ,EAAA,GAAM;AACxC,YAAMiB,IAAAlC,EAAiB,QAAA,KAAA,CAAA8B,MAAAA,EAAA,OAAAb,EAAA,EAAA,GAKJkB,IAAA;AAAA,mCAHlB,KAAA,UAAA;AAAA,QACA,UAAAD;AAAA,QACA;MACD,CAAA,CACsB;AACvB,YAAA,MAAAC,CAAA;AAAA,IACA;AACA,IAAAlC,EAAS,YAAiBgB,EAAA,EAAA,GAC3BjB,EAAK,QAAA,KAAAiB,CAAA;AAAA,EAEL,GAAA,CAAA,CAAA,GACCmB,IAAOpB,EAAS,MACZhB,EAAA,cAGJqC,IAAgBrB,GAAQC,MAAc;AACtC,IAAAhB,EAAS,eAAmBgB,EAAQ,EAAA,GACrCjB,EAAK,UAAAA,EAAA,QAAA,OAAA,CAAA,MAAA,EAAA,OAAAiB,EAAA,EAAA;AAAA,EAEL,GAAA,CAAA,CAAA;AACC,EAAAqB,QAAY;AACX,IAAA7B,KACDD,EAAA,SAAA,MAAA;AAAA,EAID,GAAA,CAAAC,GAAUD,GAAMD,CAAA,CAAA,GACf+B,EAAM,MAAA;AACN,UAAMC,IAAeR,EAAA,GACjBS,IAAA7B,EAAgB;AACnB,IAAA4B,UACCC,EAAA;AAAA,MACD,4BAAAD,EAAA,EAAA;AAAA,IACA,GACD,eAAA,EAAA,OAAA,WAAA,UAAA,SAAA,CAAA;AAAA,EAGD,GAAA,CAAAR,CAAM,CAAA;AACL,QAAAU,IAAezB,EAAA,MAAA;AACf,IAAAN,EAAA,EAAA,GACDQ,EAAInC,CAAmB;AAAA,EAEvB,GAAA,CAAAmC,CAAoB,CAAA,GACnBwB,IAAc1B,EAAA,MAAA;AACf,IAAAN,EAAK,EAAA;AAAA,EAML,GAAA,CAAA,CAAA,GACCiC,IAAiC,CAAA,MAAA;AACjC,UAAMC,IAAe,UAAQ,eAAA,EAAA,QAAA,WACvBC,IAAA,EAAA,aACAC,IAAAtC,EAAA;AAKS,aAHZoC,KADmBC,KAAA,CAAgCC,MAEtD,EAAA,eAAA,UAGM;AAAA,MACJ,eAAA;AACA,QAAAL,EAAA;AACD;AAAA,MACA;AAAA,MACC,kBAAM;AAEN,cAAIM,IAAUhB,EAAiB,MAAA;AAC9B,QAAAtB,KAAYsC,IACb1B,EAAO,CAAA,IAEPC,EAAA;AAED;AAAA,MACA;AAAA,MACC,gBAAW;AACX,QAAAI,EAAA;AACD;AAAA,MACA;AAAA,MACC,KAAA,SAAM;AACN,kBAAcK,EAAA;AACb,QAAAiB,KACDC,EAAAD,CAAA,GAEAP,EAAA;AACD;AAAA,MAEC;AAAA,IAEH;AAAA,EAEA;AACC,SAAiB,gBAAAS;AAAA,IAAhB5D,EAAA;AAAA,IAAA;AAAA,MACO,OACN;AAAA,QACA,SAAA2C;AAAA,QACA,YAAAgB;AAAA,QACA,QAAAE;AAAA,QACA,aAAA9B;AAAA,QACA,YAAAC;AAAA,QACA,YAAAI;AAAA,QACA,iBAAA0B;AAAA,QACA,iBAAArB;AAAA,QACA,UAAAK;AAAA,QACA,YAAAC;AAAA,QACA,gBAAA7B;AAAA,QACA,WAAAD;AAAA,QACA,SAAAI;AAAA,QACA,QAAAF;AAAA,QACA,cAAAgC;AAAA,QACA,aAAAC;AAAA,QACA,KAAAzD;AAAA,QACD,8BAAA0D;AAAA,MAEC;AAAA,MAAA,UAAAhD;AAAA,IACF;AAAA,EAEF;AAUA,GACK0D,KAAA,CAAA;AAAA,EACJ,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAA7D;AAAA,EACD,GAAA8D;AACC,MAAA;AACA,QAAMC,IAAK9E,EAAc,wBAAAiC,EAAA,CAAA,GACnB/B,IAAEwE,QAGR,EAAA,SAAArB,GAAgB,YAAAI,GAAA,iBAAAN,GAAA,QAAAoB,GAAA,YAAAF,EAAA,IAAAU,EAAA;AACf,EAAArB,EAAQ,OACRL,EAAO,EAAA,IAAAnD,GAAM,OAAAyE,GAAA,OAAAC,EAAa,CAAA,GACvB,QAAa,EAAA,IAAA1E,GAAY,OAAAyE,GAAO,OAAAC,EAAM,CAAA,IAE1C,CAAAvB,MAAMI,GAAakB,GAAgBC;AAEnC,cACC,GAAA,OAAA1E;AAAA,SAAC,gBAAAoE;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,0BAAKpE;AAAA,MACL,MAAA;AAAA,MACA,iBAAe8E;AAAA,MACf,iBAAeA;AAAA,MACf,SAAA,MAAcX,EAAM,EAAO,IAAAnE,GAAE,OAAAyE,GAAI,OAAAC;MAChC,cAAG,MAAAL,EAAA,EAAA,IAAArE,GAAA,OAAAyE,GAAA,OAAAC,EAAA,CAAA;AAAA,MAEH,GAAAC;AAAA,MAAA,UAAA9D;AAAA,IACF;AAAA,EAEF;AAOA,GACCkE,KAAM,CAAA,EAAA,UAAAlE,GAAA,WAAAmE,EAAA,MAAA;AAAA,QACL;AAAA,IACA,WAAAvD;AAAA,IACA,aAAAmC;AAAA,IACA,cAAAD;AAAA,IACA,QAAAhC;AAAA,IACA,KAAAxB;AAAA,IACA,8BAAA0D;AAAA;EAGD,IAAAgB,EAAM,GACHI,IAAA,CAAgBC,MAAA;AAClB,IAAAA,EAAA,gBAAY,OAEZvB,EAAO,IAEPC,EAAA;AAAA,EAGD,OAEI,CAAAsB;AAIF,SAHgBA,EAAA,QAAW,WAAAA,EAAA,QAAA,eAAAA,EAAA,QAAA,QAEXvD,MAAU,IACT;AACjB,MAAAuD,iBAAY,GACZtB,EAAA;AACD;AAAA,IAEA;AAGC,IAAA,EADsBlC,EAAQ,YAAA,SAC9BC,KACDkC,EAAAqB,CAAA;AAAA,EAGD,GACCC,IAAgC,MAC/B,CAAMD,MAAA;AAEN,QADmBA,EAAA,eAAA,QAAA,0BAAA,EACb;AAEL,IADoBxD,EAAA,YAAA,QAErBiC,EAAA;AAAA,EAEF;AAGC,SAAC,gBAAAS;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,MAAA;AAAA,MACA,SAAAa;AAAA,MACA,WAAUG;AAAA,MACV,UAAK;AAAA,MACL,KAAA3D;AAAA,MACA,iBAAe;AAAA,MACf,iBAAeE;AAAA,MACf,iBAAAxB,EAAA,QAAA;AAAA,MACA,WAAA6E;AAAA,MAEC,QAAAG,EAAA;AAAA,MAAA,UAAAtE;AAAA,IACF;AAAA,EAEF;AAMA,QACe,CAAA;AAAA,EACf,aAAAwE,IAA0B;AACzB;AACA,QAAA,EAAA,iBAAAf,EAAO,IAAAO,EAAG;AACX,SAAA,gBAAAT,EAAAkB,GAAA,EAAA,UAAAhB,EAAA,GAAA,SAAAe,EAAA,CAAA;AAOA,GACCE,KAAqB,CAAA,EAAA,UAAA1E,gBAAiB,MAAY;AAElD,QAAA,EAAA,QAAAc,GAAgB,KAAAxB,GAAA,cAAAwD,EAAA,IAAAkB,EAAA;AAiBhB,SAhBCrB,EAAM,MAAA;AACL,UAAIgC,IAAS,CAAAN,MAAA;AAIb,MAHA,CAAAvD,cAEmB,QAAA,0BAAA,KAEpBgC,EAAA;AAAA,IAEA;AACA,oBAAO,iBAAM,SAAA6B,CAAA,SACH;AACV,eAAA,oBAAA,SAAAA,CAAA;AAAA,IACD;AAAA,EAEA,GAAA,CAAI7D,IAAgB,CAAA,GAEpBA,IAKD,gBAAAyC,EAAA,OAAA,EAAA,IAAAjE,EAAA,QAAA,SAAA,0BAAA,IAAA,WAAA6E,GAAA,UAAAnE,EAAA,CAAA,IALC;AAmBD,GACC4E,KAAA,CAAA;AAAA,EACA,OAAAf;AAAA,EACA,UAAA7D;AAAA,EACA,WAAAmE,IAAA;AAAA,EACA,WAAAU;AAAA,EACD,UAAAC;AACC,MAAA;AAEA,iCACCd,EAAA;AAAA,SAAC,gBAAAT;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,IAAAjE,EAAA,QAAY;AAAA,MACZ,cAAKuE;AAAA,MACL,MAAA;AAAA,MACA,UAAK;AAAA,MACL,KAAA7C;AAAA,MACA,WAAAmD;AAAA,MACA,OAAA,EAAA,WAAAU,EAAA;AAAA,MAEC,UAAAC;AAAA,MAAA,UAAA9E;AAAA,IACF;AAAA,EAEF;AASA,GACC+E,KAAc,CAAA;AAAA,EACd,aAAAP,IAAA;AAAA,EACA,OAAAZ;AAAA,EACA,UAAAoB;AAAA,EACD,QAAAC;AACC,MAAA;AAAM,QACL;AAAA,IACA,gBAAApE;AAAA,IACA,iBAAAuB;AAAA,IACA,8BAAAY;AAAA;EAGD;AACC,SAAC,gBAAAO;AAAA,IAAA2B;AAAA,IAAA;AAAA,MACO;QAEN,MAAK;AAAA,QACL,KAAArE;AAAA,QACA,cAAA;AAAA,QACA,iBAAA;AAAA,QACA,qBAAM;AAAA,QACN;QACA,yBAAAuB,EAAA,GAAA,MAAA;AAAA,QACA,aAAAoC;AAAA,QACA,OAAAZ;AAAA,QACA,UAAAoB;AAAA,QACA,WAAShC;AAAA,QACR,QAAE,CAAAqB,MAAA;AAKF,UAJAA,kBAAM,GACL,CAAAA,EAAA,eAAA;AAAA,YACD;AAAA,UACA,MAEAvB,EAAS,GACVmC,IAAA;AAAA,QAAA;AAAA,MACD;AAAA,IACD;AAAA,EAEF;AAIO,GACNE,KAAM,OAAA,OAAA;AAAA,EACN,MAAApF;AAAA,EACA,SAASmE;AAAA,EACT,SAAAQ;AAAA,EACA,aAAMK;AAAA,EACN,MAAMH;AAAA,EACN,MAAAlB;AAAA,EACA,OAAA0B;;"}

package/components/dialog-primitive/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/dialog-primitive/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { DismissButton } from '../dismiss-button'\nimport type { DetailedHTMLProps, DialogHTMLAttributes } from 'react'\nimport s from './dialog.module.scss'\n\ninterface OverlayProps {\n\tclassName?: string\n}\n\nconst Overlay = ({ className }: OverlayProps) => {\n\treturn <div className={classNames(s.overlay, className)}></div>\n}\n\ninterface DialogProps~~\n\textends~~ DetailedHTMLProps<\n\t\tDialogHTMLAttributes<HTMLDialogElement>,\n\t\tHTMLDialogElement\n\t> {\n\tonDismiss: () => void\n}\n\nconst Wrapper = ({ children, className, onDismiss, ...rest }: DialogProps) => {\n\treturn (\n\t\t<dialog className={classNames(s.wrapper, className)} {...rest}>\n\t\t\t<DismissButton onClick={onDismiss} className={s.dismiss} />\n\t\t\t{children}\n\t\t</dialog>\n\t)\n}\n\nconst Dialog = {\n\tOverlay,\n\tWrapper,\n}\n\nexport { Dialog }\n"],"names":["Overlay","className","classNames","s","Wrapper","children","onDismiss","rest","jsxs","jsx","DismissButton","Dialog"],"mappings":";;;;AASA,MAAMA,IAAU,CAAC,EAAE,WAAAC,0BACV,OAAA,EAAI,WAAWC,EAAWC,EAAE,SAASF,CAAS,GAAG,~~GAWpDG~~,IAAU,CAAC,EAAE,UAAAC,GAAU,WAAAJ,GAAW,WAAAK,GAAW,GAAGC,QAEpD,gBAAAC,EAAC,YAAO,WAAWN,EAAWC,EAAE,SAASF,CAAS,GAAI,GAAGM,GACxD,UAAA;AAAA,EAAA,gBAAAE,EAACC,GAAA,EAAc,SAASJ,GAAW,WAAWH,EAAE,SAAS;AAAA,EACxDE;AAAA,GACF,GAIIM,IAAS;AAAA,EACd,SAAAX;AAAA,EACA,SAAAI;AACD;"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/dialog-primitive/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { DismissButton } from '../dismiss-button'\nimport type { DetailedHTMLProps, DialogHTMLAttributes } from 'react'\nimport s from './dialog.module.scss'\n\ninterface OverlayProps {\n\tclassName?: string\n}\n\nconst Overlay = ({ className }: OverlayProps) => {\n\treturn <div className={classNames(s.overlay, className)}></div>\n}\n\ninterface DialogProps extends DetailedHTMLProps<\n\tDialogHTMLAttributes<HTMLDialogElement>,\n\tHTMLDialogElement\n> {\n\tonDismiss: () => void\n}\n\nconst Wrapper = ({ children, className, onDismiss, ...rest }: DialogProps) => {\n\treturn (\n\t\t<dialog className={classNames(s.wrapper, className)} {...rest}>\n\t\t\t<DismissButton onClick={onDismiss} className={s.dismiss} />\n\t\t\t{children}\n\t\t</dialog>\n\t)\n}\n\nconst Dialog = {\n\tOverlay,\n\tWrapper,\n}\n\nexport { Dialog }\n"],"names":["Overlay","className","classNames","s","Wrapper","children","onDismiss","rest","jsxs","jsx","DismissButton","Dialog"],"mappings":";;;;AASA,MAAMA,IAAU,CAAC,EAAE,WAAAC,0BACV,OAAA,EAAI,WAAWC,EAAWC,EAAE,SAASF,CAAS,GAAG,GAUpDG,IAAU,CAAC,EAAE,UAAAC,GAAU,WAAAJ,GAAW,WAAAK,GAAW,GAAGC,QAEpD,gBAAAC,EAAC,YAAO,WAAWN,EAAWC,EAAE,SAASF,CAAS,GAAI,GAAGM,GACxD,UAAA;AAAA,EAAA,gBAAAE,EAACC,GAAA,EAAc,SAASJ,GAAW,WAAWH,EAAE,SAAS;AAAA,EACxDE;AAAA,GACF,GAIIM,IAAS;AAAA,EACd,SAAAX;AAAA,EACA,SAAAI;AACD;"}

package/components/disclosure-primitive/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/disclosure-primitive/index.tsx"],"sourcesContent":["'use client'\n\nimport ~~type~~ { ~~PropsWithChildren~~ } from 'react'\nimport {~~\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n\tuseCallback,\n\tuseId,\n\ttype~~ HTMLAttributes~~,\n~~} from 'react'\nimport classNames from 'classnames'\nimport {\n\tDisclosurePrimitiveContext,\n\tuseDisclosurePrimitive,\n\ttype DisclosurePrimitiveContextState,\n} from './use-disclosure-primitive'\nimport s from './styles.module.css'\n\ninterface DisclosurePrimitiveProviderProps~~\n\textends~~ HTMLAttributes<HTMLDivElement> {\n\t/*\n\t Callback fired when the disclosure is closed (optional)\n\t /\n\tonClose?: () => void\n\t/\n\t Hook into this trackedIsOpen property to access the state of isOpen\n\t * @default false\n\t * */\n\ttrackedIsOpen?: boolean\n\tcontainsInteractive?: boolean\n\tariaLabel?: string\n}\n\nconst Provider = ({\n\tonClose,\n\tchildren,\n\tclassName,\n\ttrackedIsOpen = false,\n\tcontainsInteractive = false,\n\tariaLabel = 'Toggle display',\n\t...rest\n}: DisclosurePrimitiveProviderProps) => {\n\tconst [isOpen, setIsOpen] = useState(trackedIsOpen)\n\tconst contentId = 'content-' + useId()\n\n\t// update the provider state if the trackedIsOpen prop changes\n\tuseEffect(() => {\n\t\tsetIsOpen(trackedIsOpen)\n\t}, [trackedIsOpen])\n\n\tconst closeDisclosure = useCallback(() => {\n\t\tsetIsOpen(false)\n\t\tif (onClose) {\n\t\t\tonClose()\n\t\t}\n\t}, [setIsOpen, onClose])\n\n\tconst onClickToggle = useCallback(() => {\n\t\tsetIsOpen((prevState) => !prevState)\n\t}, [setIsOpen])\n\n\tconst contextValue: DisclosurePrimitiveContextState = useMemo(\n\t\t() => ({\n\t\t\tisOpen,\n\t\t\tonClickToggle,\n\t\t\tcloseDisclosure,\n\t\t\tcontentId,\n\t\t\tcontainsInteractive,\n\t\t\tariaLabel,\n\t\t}),\n\t\t[\n\t\t\tisOpen,\n\t\t\tonClickToggle,\n\t\t\tcloseDisclosure,\n\t\t\tcontentId,\n\t\t\tcontainsInteractive,\n\t\t\tariaLabel,\n\t\t]\n\t)\n\n\treturn (\n\t\t<DisclosurePrimitiveContext.Provider value={contextValue}>\n\t\t\t<div\n\t\t\t\tclassName={classNames(s['disclosure-primitive'], className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</DisclosurePrimitiveContext.Provider>\n\t)\n}\n\nconst Content = ({ children }: PropsWithChildren) => {\n\tconst { isOpen } = useDisclosurePrimitive()\n\tif (!isOpen) {\n\t\treturn null\n\t}\n\n\treturn <>{children}</>\n}\n\nconst DisclosurePrimitive = { Provider, Content }\n\nexport { DisclosurePrimitive }\n"],"names":["Provider","onClose","children","className","trackedIsOpen","containsInteractive","ariaLabel","rest","isOpen","setIsOpen","contentId","useId","useEffect","closeDisclosure","useCallback","prevState","contextValue","useMemo","onClickToggle","jsx","DisclosurePrimitiveContext","classNames","s","useDisclosurePrimitive","Fragment"],"mappings":";;;;;;~~AAkCkB~~,MACjBA,IAAA,CAAA;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC,IAAA;AAAA,EACA,qBAAAC,IAAY;AAAA,EACZ,WAAAC,IAAG;AAAA,EACJ,GAAAC;AACC,MAAA;AACA,QAAM,CAAAC,GAAAC,CAAY,MAAaL,CAAM,GAGrCM,IAAgB,aAAAC,EAAA;AACf,EAAAC,EAAA,MAAU;AACX,IAAAH,EAAIL,CAAc;AAAA,EAElB,GAAA,CAAAA,CAAM,CAAA;AACL,QAAAS,IAAeC,EAAA,MAAA;AACf,IAAAL,IAAa,QAEbR,EAAA;AAAA,EAGD,GAAA,CAAAQ,GAAMR,CAAgB,CAAA,OACVa,QAAwB;AACpC,IAAAL,EAAI,CAASM,MAAC,CAAAA,CAAA;AAAA,EAEd,GAAA,CAAAN,CAAM,CAAA,GACLO,IAAOC;AAAA,IAAA,OACN;AAAA,MACA,QAAAT;AAAA,MACA,eAAAU;AAAA,MACA,iBAAAL;AAAA,MACA,WAAAH;AAAA,MACA,qBAAAL;AAAA,MACD,WAAAC;AAAA,IACA;AAAA,IAAA;AAAA,MAECE;AAAA,MACAU;AAAA,MACAL;AAAA,MACAH;AAAA,MACAL;AAAA,MAAAC;AAAA,IAEF;AAAA,EAEA;AAEE,SAAC,gBAAAa,EAAAC,EAAA,UAAA,EAAA,OAAAJ,GAAA,UAAA,gBAAAG;AAAA,IAAA;AAAA,IAAA;AAAA,MAEC,WAAGE,EAAAC,EAAA,sBAAA,GAAAnB,CAAA;AAAA,MAEH,GAAAI;AAAA,MAAA,UAAAL;AAAA;EAIL,EAAA,CAAA;AAEA,OACS,CAAA,EAAO,UAAAA;AACf,QAAK,EAAA,QAAAM,EAAQ,IAAAe,EAAA;AACZ,aAIF,gBAAAJ,EAAAK,GAAA,EAAA,UAAAtB,EAAA,CAAA,IAHC;AAKD;"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/disclosure-primitive/index.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useMemo, useState, useCallback, useId } from 'react'\nimport type { PropsWithChildren, HTMLAttributes } from 'react'\nimport classNames from 'classnames'\nimport {\n\tDisclosurePrimitiveContext,\n\tuseDisclosurePrimitive,\n\ttype DisclosurePrimitiveContextState,\n} from './use-disclosure-primitive'\nimport s from './styles.module.css'\n\ninterface DisclosurePrimitiveProviderProps extends HTMLAttributes<HTMLDivElement> {\n\t/*\n\t Callback fired when the disclosure is closed (optional)\n\t /\n\tonClose?: () => void\n\t/\n\t Hook into this trackedIsOpen property to access the state of isOpen\n\t * @default false\n\t * */\n\ttrackedIsOpen?: boolean\n\tcontainsInteractive?: boolean\n\tariaLabel?: string\n}\n\nconst Provider = ({\n\tonClose,\n\tchildren,\n\tclassName,\n\ttrackedIsOpen = false,\n\tcontainsInteractive = false,\n\tariaLabel = 'Toggle display',\n\t...rest\n}: DisclosurePrimitiveProviderProps) => {\n\tconst [isOpen, setIsOpen] = useState(trackedIsOpen)\n\tconst contentId = 'content-' + useId()\n\n\t// update the provider state if the trackedIsOpen prop changes\n\tuseEffect(() => {\n\t\tsetIsOpen(trackedIsOpen)\n\t}, [trackedIsOpen])\n\n\tconst closeDisclosure = useCallback(() => {\n\t\tsetIsOpen(false)\n\t\tif (onClose) {\n\t\t\tonClose()\n\t\t}\n\t}, [setIsOpen, onClose])\n\n\tconst onClickToggle = useCallback(() => {\n\t\tsetIsOpen((prevState) => !prevState)\n\t}, [setIsOpen])\n\n\tconst contextValue: DisclosurePrimitiveContextState = useMemo(\n\t\t() => ({\n\t\t\tisOpen,\n\t\t\tonClickToggle,\n\t\t\tcloseDisclosure,\n\t\t\tcontentId,\n\t\t\tcontainsInteractive,\n\t\t\tariaLabel,\n\t\t}),\n\t\t[\n\t\t\tisOpen,\n\t\t\tonClickToggle,\n\t\t\tcloseDisclosure,\n\t\t\tcontentId,\n\t\t\tcontainsInteractive,\n\t\t\tariaLabel,\n\t\t],\n\t)\n\n\treturn (\n\t\t<DisclosurePrimitiveContext.Provider value={contextValue}>\n\t\t\t<div\n\t\t\t\tclassName={classNames(s['disclosure-primitive'], className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</DisclosurePrimitiveContext.Provider>\n\t)\n}\n\nconst Content = ({ children }: PropsWithChildren) => {\n\tconst { isOpen } = useDisclosurePrimitive()\n\tif (!isOpen) {\n\t\treturn null\n\t}\n\n\treturn <>{children}</>\n}\n\nconst DisclosurePrimitive = { Provider, Content }\n\nexport { DisclosurePrimitive }\n"],"names":["Provider","onClose","children","className","trackedIsOpen","containsInteractive","ariaLabel","rest","isOpen","setIsOpen","contentId","useId","useEffect","closeDisclosure","useCallback","prevState","contextValue","useMemo","onClickToggle","jsx","DisclosurePrimitiveContext","classNames","s","useDisclosurePrimitive","Fragment"],"mappings":";;;;;;AA0BkB,MACjBA,IAAA,CAAA;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC,IAAA;AAAA,EACA,qBAAAC,IAAY;AAAA,EACZ,WAAAC,IAAG;AAAA,EACJ,GAAAC;AACC,MAAA;AACA,QAAM,CAAAC,GAAAC,CAAY,MAAaL,CAAM,GAGrCM,IAAgB,aAAAC,EAAA;AACf,EAAAC,EAAA,MAAU;AACX,IAAAH,EAAIL,CAAc;AAAA,EAElB,GAAA,CAAAA,CAAM,CAAA;AACL,QAAAS,IAAeC,EAAA,MAAA;AACf,IAAAL,IAAa,QAEbR,EAAA;AAAA,EAGD,GAAA,CAAAQ,GAAMR,CAAgB,CAAA,OACVa,QAAwB;AACpC,IAAAL,EAAI,CAASM,MAAC,CAAAA,CAAA;AAAA,EAEd,GAAA,CAAAN,CAAM,CAAA,GACLO,IAAOC;AAAA,IAAA,OACN;AAAA,MACA,QAAAT;AAAA,MACA,eAAAU;AAAA,MACA,iBAAAL;AAAA,MACA,WAAAH;AAAA,MACA,qBAAAL;AAAA,MACD,WAAAC;AAAA,IACA;AAAA,IAAA;AAAA,MAECE;AAAA,MACAU;AAAA,MACAL;AAAA,MACAH;AAAA,MACAL;AAAA,MAAAC;AAAA,IAEF;AAAA,EAEA;AAEE,SAAC,gBAAAa,EAAAC,EAAA,UAAA,EAAA,OAAAJ,GAAA,UAAA,gBAAAG;AAAA,IAAA;AAAA,IAAA;AAAA,MAEC,WAAGE,EAAAC,EAAA,sBAAA,GAAAnB,CAAA;AAAA,MAEH,GAAAI;AAAA,MAAA,UAAAL;AAAA;EAIL,EAAA,CAAA;AAEA,OACS,CAAA,EAAO,UAAAA;AACf,QAAK,EAAA,QAAAM,EAAQ,IAAAe,EAAA;AACZ,aAIF,gBAAAJ,EAAAK,GAAA,EAAA,UAAAtB,EAAA,CAAA,IAHC;AAKD;"}

package/components/disclosure-primitive/use-disclosure-primitive.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-disclosure-primitive.js","sources":["../../../src/components/disclosure-primitive/use-disclosure-primitive.ts"],"sourcesContent":["'use client'\n\nimport { createContext, useContext, type MouseEventHandler } from 'react'\n\nexport interface DisclosurePrimitiveContextState {\n\tisOpen: boolean\n\tonClickToggle: MouseEventHandler<HTMLButtonElement>\n\tcloseDisclosure: () => void\n\tcontentId: string\n\tcontainsInteractive: boolean\n\tariaLabel: string\n}\n\nexport const DisclosurePrimitiveContext = createContext<\n\tDisclosurePrimitiveContextState \| undefined\n>(undefined)\nDisclosurePrimitiveContext.displayName = 'DisclosurePrimitiveContext'\n\nexport function useDisclosurePrimitive(): DisclosurePrimitiveContextState {\n\tconst context = useContext(DisclosurePrimitiveContext)\n\tif (context === undefined) {\n\t\tthrow new Error(\n\t\t\t'useDisclosurePrimitive must be used within a DisclosurePrimitiveContext.Provider'\n\t\t)\n\t}\n\treturn context\n}\n"],"names":["DisclosurePrimitiveContext","createContext","useDisclosurePrimitive","context","useContext"],"mappings":";;AAgBA,MAAAA,IAA2BC,EAAc,MAAA;AAElCD,gBAAmE;AACzE,SAAME;AACN,QAAIC,IAAYC,EAAWJ,CAAA;AAC1B,MAAAG,MAAU;AAAA,UACT,IAAA;AAAA,MACD;AAAA,IACD;AAED,SAAAA;;"}
1	+ {"version":3,"file":"use-disclosure-primitive.js","sources":["../../../src/components/disclosure-primitive/use-disclosure-primitive.ts"],"sourcesContent":["'use client'\n\nimport { createContext, useContext, type MouseEventHandler } from 'react'\n\nexport interface DisclosurePrimitiveContextState {\n\tisOpen: boolean\n\tonClickToggle: MouseEventHandler<HTMLButtonElement>\n\tcloseDisclosure: () => void\n\tcontentId: string\n\tcontainsInteractive: boolean\n\tariaLabel: string\n}\n\nexport const DisclosurePrimitiveContext = createContext<\n\tDisclosurePrimitiveContextState \| undefined\n>(undefined)\nDisclosurePrimitiveContext.displayName = 'DisclosurePrimitiveContext'\n\nexport function useDisclosurePrimitive(): DisclosurePrimitiveContextState {\n\tconst context = useContext(DisclosurePrimitiveContext)\n\tif (context === undefined) {\n\t\tthrow new Error(\n\t\t\t'useDisclosurePrimitive must be used within a DisclosurePrimitiveContext.Provider',\n\t\t)\n\t}\n\treturn context\n}\n"],"names":["DisclosurePrimitiveContext","createContext","useDisclosurePrimitive","context","useContext"],"mappings":";;AAgBA,MAAAA,IAA2BC,EAAc,MAAA;AAElCD,gBAAmE;AACzE,SAAME;AACN,QAAIC,IAAYC,EAAWJ,CAAA;AAC1B,MAAAG,MAAU;AAAA,UACT,IAAA;AAAA,MACD;AAAA,IACD;AAED,SAAAA;;"}

package/components/dismiss-button/styles.module.scss CHANGED Viewed

@@ -22,10 +22,5 @@
 	}
 	/* notice: this is used not only for the focus, but also to increase the clickable area */
-	@include hds-focus-ring-with-pseudo-element(
-		$top: -4px,
-		$right: -4px,
-		$bottom: -4px,
-		$left: -4px
-	);
+	@include hds-focus-ring-with-pseudo-element($top: -4px, $right: -4px, $bottom: -4px, $left: -4px);
 }

package/components/dropdown/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/dropdown/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport * as MenuPrimitive from '../menu-primitive'\nimport { ToggleButton } from './toggle-button'\nimport type { DropdownToggleButtonProps } from './toggle-button'\nimport { ListItem } from './list-item'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport s from './styles.module.css'\n\ninterface DropdownProps extends HTMLAttributes<HTMLDivElement> {\n\t/*\n\t If true, container is given full width styles. (Added by web presence team)\n\t /\n\tisFullWidth?: boolean\n\t/\n\t Callback function invoked when the Dropdown is closed, if provided.\n\t /\n\tonClose?: () => void\n}\n\nconst Root = ({\n\tisFullWidth,\n\tonClose,\n\tchildren,\n\tclassName,\n\t...rest\n}: DropdownProps) => {\n\treturn (\n\t\t<MenuPrimitive.Provider\n\t\t\tclassName={classNames(\n\t\t\t\t{\n\t\t\t\t\t[s['width-full']]: isFullWidth,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tonClose={onClose}\n\t\t\tisFullWidth={isFullWidth}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</MenuPrimitive.Provider>\n\t)\n}\n\ninterface DropdownContentProps {\n\tlistPosition?:\n\t\t\| 'right'\n\t\t\| 'left'\n\t\t\| 'bottom-left'\n\t\t\| 'bottom-right'\n\t\t\| 'top-left'\n\t\t\| 'top-right'\n\twidth?: `${number}px` \| `${number}em` \| `${number}%`\n\t/\n\t If a height prop is provided then the list will have a fixed height.\n\t */\n\theight?: `${number}px` \| `${number}em`\n\tchildren: ReactNode\n}\n\nconst Content = ({\n\tlistPosition = 'bottom-right',\n\twidth,\n\theight,\n\tchildren,\n}: DropdownContentProps) => {\n\treturn (\n\t\t<MenuPrimitive.Content>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts.content,\n\t\t\t\t\ts[`content-position-${listPosition}`],\n\t\t\t\t\t{ [s['content-fixed-width']]: !!width }\n\t\t\t\t)}\n\t\t\t\tstyle={{ width, height }}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</MenuPrimitive.Content>\n\t)\n}\n\nconst List = ({ children }: { children: ReactNode }) => {\n\treturn <ul className={s.list}>{children}</ul>\n}\n\ninterface DropdownHeaderFooterProps extends HTMLAttributes<HTMLDivElement> {\n\thasDivider?: boolean\n}\n\nconst Header = ({\n\thasDivider,\n\tchildren,\n\t...rest\n}: DropdownHeaderFooterProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(s.header, {\n\t\t\t\t[s['header-with-divider']]: hasDivider,\n\t\t\t})}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nconst Footer = ({\n\thasDivider,\n\tchildren,\n\t...rest\n}: DropdownHeaderFooterProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(s.footer, {\n\t\t\t\t[s['footer-with-divider']]: hasDivider,\n\t\t\t})}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nRoot.displayName = 'Dropdown.Root'\nContent.displayName = 'Dropdown.Content'\nList.displayName = 'Dropdown.List'\nHeader.displayName = 'Dropdown.Header'\nFooter.displayName = 'Dropdown.Footer'\n\nconst Dropdown = { Root, ToggleButton, Content, List, Header, Footer, ListItem }\n\nexport type {\n\tDropdownProps,\n\tDropdownContentProps,\n\tDropdownHeaderFooterProps,\n\tDropdownToggleButtonProps,\n}\nexport { Dropdown }\n"],"names":["Root","isFullWidth","onClose","children","className","rest","jsx","MenuPrimitive.Provider","classNames","s","Content","listPosition","width","height","MenuPrimitive.Content","List","Header","hasDivider","Footer","Dropdown","ToggleButton","ListItem"],"mappings":";;;;;;AAmBA,MAAMA,IAAO,CAAC;AAAA,EACb,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACA,WAAWC;AAAA,MACV;AAAA,QACC,CAACC,EAAE,YAAY,CAAC,GAAGR;AAAA,MAAA;AAAA,MAEpBG;AAAA,IAAA;AAAA,IAED,SAAAF;AAAA,IACA,aAAAD;AAAA,IACC,GAAGI;AAAA,IAEH,UAAAF;AAAA,EAAA;AAAA,GAqBEO,IAAU,CAAC;AAAA,EAChB,cAAAC,IAAe;AAAA,EACf,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAV;AACD,MAEE,gBAAAG,EAACQ,GAAA,EACA,UAAA,gBAAAR;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWE;AAAA,MACVC,EAAE;AAAA,MACFA,EAAE,oBAAoBE,CAAY,EAAE;AAAA,MACpC,EAAE,CAACF,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAACG,EAAA;AAAA,IAAM;AAAA,IAEvC,OAAO,EAAE,OAAAA,GAAO,QAAAC,EAAA;AAAA,IAEf,UAAAV;AAAA,EAAA;AAAA,GAEH,GAIIY,IAAO,CAAC,EAAE,UAAAZ,QACR,gBAAAG,EAAC,MAAA,EAAG,WAAWG,EAAE,MAAO,UAAAN,GAAS,GAOnCa,IAAS,CAAC;AAAA,EACf,YAAAC;AAAA,EACA,UAAAd;AAAA,EACA,GAAGE;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWE,EAAWC,EAAE,QAAQ;AAAA,MAC/B,CAACA,EAAE,qBAAqB,CAAC,GAAGQ;AAAA,IAAA,CAC5B;AAAA,IACA,GAAGZ;AAAA,IAEH,UAAAF;AAAA,EAAA;AAAA,GAKEe,IAAS,CAAC;AAAA,EACf,YAAAD;AAAA,EACA,UAAAd;AAAA,EACA,GAAGE;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWE,EAAWC,EAAE,QAAQ;AAAA,MAC/B,CAACA,EAAE,qBAAqB,CAAC,GAAGQ;AAAA,IAAA,CAC5B;AAAA,IACA,GAAGZ;AAAA,IAEH,UAAAF;AAAA,EAAA;AAAA;AAKJH,EAAK,cAAc;AACnBU,EAAQ,cAAc;AACtBK,EAAK,cAAc;AACnBC,EAAO,cAAc;AACrBE,EAAO,cAAc;AAErB,MAAMC,IAAW,EAAE,MAAAnB,GAAM,cAAAoB,GAAc,SAAAV,GAAS,MAAAK,GAAM,QAAAC,GAAQ,QAAAE,GAAQ,UAAAG,EAAA;"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/dropdown/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport * as MenuPrimitive from '../menu-primitive'\nimport { ToggleButton } from './toggle-button'\nimport type { DropdownToggleButtonProps } from './toggle-button'\nimport { ListItem } from './list-item'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport s from './styles.module.css'\n\ninterface DropdownProps extends HTMLAttributes<HTMLDivElement> {\n\t/*\n\t If true, container is given full width styles. (Added by web presence team)\n\t /\n\tisFullWidth?: boolean\n\t/\n\t Callback function invoked when the Dropdown is closed, if provided.\n\t /\n\tonClose?: () => void\n}\n\nconst Root = ({\n\tisFullWidth,\n\tonClose,\n\tchildren,\n\tclassName,\n\t...rest\n}: DropdownProps) => {\n\treturn (\n\t\t<MenuPrimitive.Provider\n\t\t\tclassName={classNames(\n\t\t\t\t{\n\t\t\t\t\t[s['width-full']]: isFullWidth,\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonClose={onClose}\n\t\t\tisFullWidth={isFullWidth}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</MenuPrimitive.Provider>\n\t)\n}\n\ninterface DropdownContentProps {\n\tlistPosition?:\n\t\t\| 'right'\n\t\t\| 'left'\n\t\t\| 'bottom-left'\n\t\t\| 'bottom-right'\n\t\t\| 'top-left'\n\t\t\| 'top-right'\n\twidth?: `${number}px` \| `${number}em` \| `${number}%`\n\t/\n\t If a height prop is provided then the list will have a fixed height.\n\t */\n\theight?: `${number}px` \| `${number}em`\n\tchildren: ReactNode\n}\n\nconst Content = ({\n\tlistPosition = 'bottom-right',\n\twidth,\n\theight,\n\tchildren,\n}: DropdownContentProps) => {\n\treturn (\n\t\t<MenuPrimitive.Content>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts.content,\n\t\t\t\t\ts[`content-position-${listPosition}`],\n\t\t\t\t\t{ [s['content-fixed-width']]: !!width },\n\t\t\t\t)}\n\t\t\t\tstyle={{ width, height }}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</MenuPrimitive.Content>\n\t)\n}\n\nconst List = ({ children }: { children: ReactNode }) => {\n\treturn <ul className={s.list}>{children}</ul>\n}\n\ninterface DropdownHeaderFooterProps extends HTMLAttributes<HTMLDivElement> {\n\thasDivider?: boolean\n}\n\nconst Header = ({\n\thasDivider,\n\tchildren,\n\t...rest\n}: DropdownHeaderFooterProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(s.header, {\n\t\t\t\t[s['header-with-divider']]: hasDivider,\n\t\t\t})}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nconst Footer = ({\n\thasDivider,\n\tchildren,\n\t...rest\n}: DropdownHeaderFooterProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(s.footer, {\n\t\t\t\t[s['footer-with-divider']]: hasDivider,\n\t\t\t})}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nRoot.displayName = 'Dropdown.Root'\nContent.displayName = 'Dropdown.Content'\nList.displayName = 'Dropdown.List'\nHeader.displayName = 'Dropdown.Header'\nFooter.displayName = 'Dropdown.Footer'\n\nconst Dropdown = { Root, ToggleButton, Content, List, Header, Footer, ListItem }\n\nexport type {\n\tDropdownProps,\n\tDropdownContentProps,\n\tDropdownHeaderFooterProps,\n\tDropdownToggleButtonProps,\n}\nexport { Dropdown }\n"],"names":["Root","isFullWidth","onClose","children","className","rest","jsx","MenuPrimitive.Provider","classNames","s","Content","listPosition","width","height","MenuPrimitive.Content","List","Header","hasDivider","Footer","Dropdown","ToggleButton","ListItem"],"mappings":";;;;;;AAmBA,MAAMA,IAAO,CAAC;AAAA,EACb,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACA,WAAWC;AAAA,MACV;AAAA,QACC,CAACC,EAAE,YAAY,CAAC,GAAGR;AAAA,MAAA;AAAA,MAEpBG;AAAA,IAAA;AAAA,IAED,SAAAF;AAAA,IACA,aAAAD;AAAA,IACC,GAAGI;AAAA,IAEH,UAAAF;AAAA,EAAA;AAAA,GAqBEO,IAAU,CAAC;AAAA,EAChB,cAAAC,IAAe;AAAA,EACf,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAV;AACD,MAEE,gBAAAG,EAACQ,GAAA,EACA,UAAA,gBAAAR;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWE;AAAA,MACVC,EAAE;AAAA,MACFA,EAAE,oBAAoBE,CAAY,EAAE;AAAA,MACpC,EAAE,CAACF,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAACG,EAAA;AAAA,IAAM;AAAA,IAEvC,OAAO,EAAE,OAAAA,GAAO,QAAAC,EAAA;AAAA,IAEf,UAAAV;AAAA,EAAA;AAAA,GAEH,GAIIY,IAAO,CAAC,EAAE,UAAAZ,QACR,gBAAAG,EAAC,MAAA,EAAG,WAAWG,EAAE,MAAO,UAAAN,GAAS,GAOnCa,IAAS,CAAC;AAAA,EACf,YAAAC;AAAA,EACA,UAAAd;AAAA,EACA,GAAGE;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWE,EAAWC,EAAE,QAAQ;AAAA,MAC/B,CAACA,EAAE,qBAAqB,CAAC,GAAGQ;AAAA,IAAA,CAC5B;AAAA,IACA,GAAGZ;AAAA,IAEH,UAAAF;AAAA,EAAA;AAAA,GAKEe,IAAS,CAAC;AAAA,EACf,YAAAD;AAAA,EACA,UAAAd;AAAA,EACA,GAAGE;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWE,EAAWC,EAAE,QAAQ;AAAA,MAC/B,CAACA,EAAE,qBAAqB,CAAC,GAAGQ;AAAA,IAAA,CAC5B;AAAA,IACA,GAAGZ;AAAA,IAEH,UAAAF;AAAA,EAAA;AAAA;AAKJH,EAAK,cAAc;AACnBU,EAAQ,cAAc;AACtBK,EAAK,cAAc;AACnBC,EAAO,cAAc;AACrBE,EAAO,cAAc;AAErB,MAAMC,IAAW,EAAE,MAAAnB,GAAM,cAAAoB,GAAc,SAAAV,GAAS,MAAAK,GAAM,QAAAC,GAAQ,QAAAE,GAAQ,UAAAG,EAAA;"}

package/components/dropdown/list-item/styles.module.css CHANGED Viewed

@@ -125,9 +125,7 @@
 		--current-color-active: var(--mds-color-foreground-action-active);
 		&::after {
-			--current-focus-ring-box-shadow: var(
-				--mds-focus-ring-action-box-shadow
-			);
+			--current-focus-ring-box-shadow: var(--mds-focus-ring-action-box-shadow);
 		}
 	}
 }
@@ -144,9 +142,7 @@
 		&::after {
 			--current-background-color: var(--mds-color-surface-critical);
-			--current-focus-ring-box-shadow: var(
-				--mds-focus-ring-critical-box-shadow
-			);
+			--current-focus-ring-box-shadow: var(--mds-focus-ring-critical-box-shadow);
 		}
 	}
 }

package/components/dropdown/list-item/title.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"title.js","sources":["../../../../src/components/dropdown/list-item/title.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\nimport classNames from 'classnames'\nimport s from './styles.module.css'\n\ninterface ListItemTitleProps\n\~~textends Omit~~<~~HTMLAttributes<~~HTMLLIElement>, 'className'> {\n\ttext: string\n}\n\nconst ListItemTitle = ({ text, ...rest }: ListItemTitleProps) => {\n\treturn (\n\t\t<li className={classNames(s['list-item'], s.title)} {...rest}>\n\t\t\t{text}\n\t\t</li>\n\t)\n}\n\nListItemTitle.displayName = 'Dropdown.ListItem.Title'\n\nexport type { ListItemTitleProps }\nexport { ListItemTitle }\n"],"names":["ListItemTitle","text","rest","jsx","classNames","s"],"mappings":";;;~~AASA~~,MAAMA,IAAgB,CAAC,EAAE,MAAAC,GAAM,GAAGC,QAEhC,gBAAAC,EAAC,MAAA,EAAG,WAAWC,EAAWC,EAAE,WAAW,GAAGA,EAAE,KAAK,GAAI,GAAGH,GACtD,UAAAD,EAAA,CACF;AAIFD,EAAc,cAAc;"}
1	+ {"version":3,"file":"title.js","sources":["../../../../src/components/dropdown/list-item/title.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\nimport classNames from 'classnames'\nimport s from './styles.module.css'\n\ninterface ListItemTitleProps extends Omit<\n\tHTMLAttributes<HTMLLIElement>,\n\t'className'\n> {\n\ttext: string\n}\n\nconst ListItemTitle = ({ text, ...rest }: ListItemTitleProps) => {\n\treturn (\n\t\t<li className={classNames(s['list-item'], s.title)} {...rest}>\n\t\t\t{text}\n\t\t</li>\n\t)\n}\n\nListItemTitle.displayName = 'Dropdown.ListItem.Title'\n\nexport type { ListItemTitleProps }\nexport { ListItemTitle }\n"],"names":["ListItemTitle","text","rest","jsx","classNames","s"],"mappings":";;;AAWA,MAAMA,IAAgB,CAAC,EAAE,MAAAC,GAAM,GAAGC,QAEhC,gBAAAC,EAAC,MAAA,EAAG,WAAWC,EAAWC,EAAE,WAAW,GAAGA,EAAE,KAAK,GAAI,GAAGH,GACtD,UAAAD,EAAA,CACF;AAIFD,EAAc,cAAc;"}

package/components/dropdown/toggle-button/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/dropdown/toggle-button/index.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport { Badge } from '../../badge'\nimport { BadgeCount } from '../../badge-count'\nimport { Toggle } from '../../menu-primitive'\nimport { useMenuPrimitive } from '../../menu-primitive/use-menu-primitive'\nimport type { FlightIconName } from '../../flight-icon'\nimport { FlightIcon } from '../../flight-icon'\nimport type { ButtonHTMLAttributes } from 'react'\nimport s from './styles.module.scss'\n\ninterface DropdownToggleButtonProps~~\n\textends~~ ButtonHTMLAttributes<HTMLButtonElement> {\n\t/*\n\t Text of the ToggleButton. If no text value is defined, an error will be thrown.\n\t /\n\ttext: string\n\tcolor?: 'primary' \| 'secondary'\n\tsize?: 'small' \| 'medium'\n\ticon?: string\n\tisFullWidth?: boolean\n\t/\n\t Displays an optional count indicator using the Badge Count component.\n\t /\n\tcount?: string\n\t/\n\t Displays an optional badge indicator using the Badge component.\n\t /\n\tbadge?: string\n\t/\n\t Appends an icon to the optional badge indicator.\n\t */\n\tbadgeIcon?: FlightIconName\n}\n\nconst ToggleButton = ({\n\ttext,\n\tcolor = 'primary',\n\tsize = 'medium',\n\ticon,\n\tisFullWidth,\n\tcount,\n\tbadge,\n\tbadgeIcon,\n\tdisabled,\n\t...rest\n}: DropdownToggleButtonProps) => {\n\tconst { isOpen, onClickToggle } = useMenuPrimitive()\n\tconst badgeType = color === 'primary' \|\| disabled ? 'filled' : 'inverted'\n\tconst iconSize = size === 'small' ? 12 : 16\n\n\treturn (\n\t\t<Toggle>\n\t\t\t<button\n\t\t\t\taria-expanded={isOpen}\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts['toggle-button'],\n\t\t\t\t\ts[`size-${size}`],\n\t\t\t\t\ts[`color-${color}`],\n\t\t\t\t\t{\n\t\t\t\t\t\t[s['width-full']]: isFullWidth,\n\t\t\t\t\t}\n\t\t\t\t)}\n\t\t\t\tonClick={onClickToggle}\n\t\t\t\tdisabled={disabled}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{icon && <FlightIcon name={icon} size={iconSize} />}\n\t\t\t\t<div className={s.text}>{text}</div>\n\t\t\t\t{count && <BadgeCount text={count} size=\"small\" type={badgeType} />}\n\t\t\t\t{badge && (\n\t\t\t\t\t<Badge text={badge} icon={badgeIcon} size=\"small\" type={badgeType} />\n\t\t\t\t)}\n\t\t\t\t<Chevron />\n\t\t\t</button>\n\t\t</Toggle>\n\t)\n}\n\nToggleButton.displayName = 'Dropdown.ToggleButton'\n\nconst Chevron = () => {\n\treturn <FlightIcon name=\"chevron-down\" isInlineBlock={false} />\n}\n\nexport type { DropdownToggleButtonProps }\nexport { ToggleButton }\n"],"names":["ToggleButton","text","color","size","icon","isFullWidth","count","badge","badgeIcon","disabled","rest","isOpen","onClickToggle","useMenuPrimitive","badgeType","iconSize","jsx","Toggle","jsxs","classNames","s","BadgeCount","Badge","Chevron","FlightIcon"],"mappings":";;;;;;;;;~~AAoCsB~~,MACrBA,IAAA,CAAA;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAO;AAAA,EACP,MAAAC,IAAA;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACD,GAAAC;AACC,MAAA;AACA,QAAM,EAAA,QAAAC,GAAA,eAAAC,EAAsB,IAAAC,EAAa,GACnCC,IAAWZ,MAAS,aAAeO,IAAA,WAAA,YAEzCM,IAAAZ,gBACE,KACA;AAAA,SAAC,gBAAAa,EAAAC,GAAA,EAAA,UAAA,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,iBAAKP;AAAA,MACL,MAAA;AAAA,MAAW,WACRQ;AAAA,QACFC,EAAE,eAAc;AAAA,QAChBA,EAAE,SAAS,EAAK;AAAA,QAChBA,EAAA,SAAAlB,CAAA,EAAA;AAAA,QAAA;AAAA,UACoB,CAAAkB,EAAA,YAAA,CAAA,GAAAf;AAAA,QAErB;AAAA,MACA;AAAA,MACA,SAAAO;AAAA,MACC,UAAAH;AAAA,MAEA;MAAA,UAAA;AAAA,QAAgDL,KAChD,gBAAAY,KAAe,EAAE,MAAOZ,GAAA,MAAAW,EAAK,CAAA;AAAA,QAC7B,gBAAAC,EAAA,SAAU,WAAAI,QAAW,UAAanB,EAAK,CAAA;AAAA,QACvCK,KACA,gBAAAU,EAACK,GAAM,EAAA,MAAMf,SAAa,SAAW,MAAKQ,EAAQ,CAAA;AAAA,QAAiBP,KAEnE,gBAAAS,EAAAM,GAAQ,EAAA,MAAAf,GAAA,MAAAC,GAAA,MAAA,SAAA,MAAAM,EAAA,CAAA;AAAA,QAAA,gBAAAE,EAAAO,GAAA,CAAA,CAAA;AAAA,MAAA;AAAA;EAIb,EAAA,CAAA;AAEA;AAEAvB,gBAAsB;AACrB,MAAAuB,IAAA,MACD,gBAAAP,EAAAQ,GAAA,EAAA,MAAA,gBAAA,eAAA,GAAA,CAAA;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/dropdown/toggle-button/index.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport { Badge } from '../../badge'\nimport { BadgeCount } from '../../badge-count'\nimport { Toggle } from '../../menu-primitive'\nimport { useMenuPrimitive } from '../../menu-primitive/use-menu-primitive'\nimport type { FlightIconName } from '../../flight-icon'\nimport { FlightIcon } from '../../flight-icon'\nimport type { ButtonHTMLAttributes } from 'react'\nimport s from './styles.module.scss'\n\ninterface DropdownToggleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n\t/*\n\t Text of the ToggleButton. If no text value is defined, an error will be thrown.\n\t /\n\ttext: string\n\tcolor?: 'primary' \| 'secondary'\n\tsize?: 'small' \| 'medium'\n\ticon?: string\n\tisFullWidth?: boolean\n\t/\n\t Displays an optional count indicator using the Badge Count component.\n\t /\n\tcount?: string\n\t/\n\t Displays an optional badge indicator using the Badge component.\n\t /\n\tbadge?: string\n\t/\n\t Appends an icon to the optional badge indicator.\n\t */\n\tbadgeIcon?: FlightIconName\n}\n\nconst ToggleButton = ({\n\ttext,\n\tcolor = 'primary',\n\tsize = 'medium',\n\ticon,\n\tisFullWidth,\n\tcount,\n\tbadge,\n\tbadgeIcon,\n\tdisabled,\n\t...rest\n}: DropdownToggleButtonProps) => {\n\tconst { isOpen, onClickToggle } = useMenuPrimitive()\n\tconst badgeType = color === 'primary' \|\| disabled ? 'filled' : 'inverted'\n\tconst iconSize = size === 'small' ? 12 : 16\n\n\treturn (\n\t\t<Toggle>\n\t\t\t<button\n\t\t\t\taria-expanded={isOpen}\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts['toggle-button'],\n\t\t\t\t\ts[`size-${size}`],\n\t\t\t\t\ts[`color-${color}`],\n\t\t\t\t\t{\n\t\t\t\t\t\t[s['width-full']]: isFullWidth,\n\t\t\t\t\t},\n\t\t\t\t)}\n\t\t\t\tonClick={onClickToggle}\n\t\t\t\tdisabled={disabled}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{icon && <FlightIcon name={icon} size={iconSize} />}\n\t\t\t\t<div className={s.text}>{text}</div>\n\t\t\t\t{count && <BadgeCount text={count} size=\"small\" type={badgeType} />}\n\t\t\t\t{badge && (\n\t\t\t\t\t<Badge text={badge} icon={badgeIcon} size=\"small\" type={badgeType} />\n\t\t\t\t)}\n\t\t\t\t<Chevron />\n\t\t\t</button>\n\t\t</Toggle>\n\t)\n}\n\nToggleButton.displayName = 'Dropdown.ToggleButton'\n\nconst Chevron = () => {\n\treturn <FlightIcon name=\"chevron-down\" isInlineBlock={false} />\n}\n\nexport type { DropdownToggleButtonProps }\nexport { ToggleButton }\n"],"names":["ToggleButton","text","color","size","icon","isFullWidth","count","badge","badgeIcon","disabled","rest","isOpen","onClickToggle","useMenuPrimitive","badgeType","iconSize","jsx","Toggle","jsxs","classNames","s","BadgeCount","Badge","Chevron","FlightIcon"],"mappings":";;;;;;;;;AAmCsB,MACrBA,IAAA,CAAA;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAO;AAAA,EACP,MAAAC,IAAA;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACD,GAAAC;AACC,MAAA;AACA,QAAM,EAAA,QAAAC,GAAA,eAAAC,EAAsB,IAAAC,EAAa,GACnCC,IAAWZ,MAAS,aAAeO,IAAA,WAAA,YAEzCM,IAAAZ,gBACE,KACA;AAAA,SAAC,gBAAAa,EAAAC,GAAA,EAAA,UAAA,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,iBAAKP;AAAA,MACL,MAAA;AAAA,MAAW,WACRQ;AAAA,QACFC,EAAE,eAAc;AAAA,QAChBA,EAAE,SAAS,EAAK;AAAA,QAChBA,EAAA,SAAAlB,CAAA,EAAA;AAAA,QAAA;AAAA,UACoB,CAAAkB,EAAA,YAAA,CAAA,GAAAf;AAAA,QAErB;AAAA,MACA;AAAA,MACA,SAAAO;AAAA,MACC,UAAAH;AAAA,MAEA;MAAA,UAAA;AAAA,QAAgDL,KAChD,gBAAAY,KAAe,EAAE,MAAOZ,GAAA,MAAAW,EAAK,CAAA;AAAA,QAC7B,gBAAAC,EAAA,SAAU,WAAAI,QAAW,UAAanB,EAAK,CAAA;AAAA,QACvCK,KACA,gBAAAU,EAACK,GAAM,EAAA,MAAMf,SAAa,SAAW,MAAKQ,EAAQ,CAAA;AAAA,QAAiBP,KAEnE,gBAAAS,EAAAM,GAAQ,EAAA,MAAAf,GAAA,MAAAC,GAAA,MAAA,SAAA,MAAAM,EAAA,CAAA;AAAA,QAAA,gBAAAE,EAAAO,GAAA,CAAA,CAAA;AAAA,MAAA;AAAA;EAIb,EAAA,CAAA;AAEA;AAEAvB,gBAAsB;AACrB,MAAAuB,IAAA,MACD,gBAAAP,EAAAQ,GAAA,EAAA,MAAA,gBAAA,eAAA,GAAA,CAAA;"}

package/components/dropdown/toggle-button/styles.module.scss CHANGED Viewed

@@ -1,25 +1,25 @@
 @use 'styles/mixins/button' as *;
 .toggle-button {
-	@include hds-button();
+	@include hds-button;
 	&:focus {
-		@include hds-button-state-focus();
+		@include hds-button-state-focus;
 	}
 	&:disabled,
 	&:disabled:focus,
 	&:disabled:hover {
-		@include hds-button-state-disabled();
+		@include hds-button-state-disabled;
 	}
 }
 .color-primary {
-	@include hds-button-color-primary();
+	@include hds-button-color-primary;
 }
 .color-secondary {
-	@include hds-button-color-secondary();
+	@include hds-button-color-secondary;
 }
 .width-full {

package/components/flight-icon/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/flight-icon/index.tsx"],"sourcesContent":["'use client'\n\nimport svgSprite from '@hashicorp/flight-icons/svg-sprite/svg-sprite.svg'\nimport classNames from 'classnames'\nimport { useId, type SVGProps } from 'react'\nimport type { IconName } from '@hashicorp/flight-icons/svg'\nimport s from './flight-icon.module.css'\n\nconst FLIGHT_ICON_SIZES = [12, 16, 24, 32] as const\ntype FlightIconSize = (typeof FLIGHT_ICON_SIZES)[number]\n\nconst SPRITE_SIZE_MAP = {\n\t12: 16,\n\t16: 16,\n\t24: 24,\n\t32: 24,\n} as const\n\ntype FlightIconName = IconName \| (string & Record<never, never>)\n\ninterface FlightIconProps extends SVGProps<SVGSVGElement> {\n\t/*\n\t The name of the icon you wish to use. Search for existing icon\n\t * names in the Icon library.\n\t /\n\tname: FlightIconName\n\n\t/\n\t The `color` prop can be used to change the color. It works by setting\n\t * the value of the icon SVG’s fill property.\n\t /\n\tcolor?: string\n\n\t/\n\t The `size` prop can be used to change the size.\n\t /\n\tsize?: FlightIconSize\n\n\t/\n\t Determines whether the icon will stretch to fill the parent container.\n\t * Setting it to `true` will make the icon have a height and width of 100%\n\t * and a display of `block`.\n\t /\n\tstretched?: boolean\n\n\t/\n\t Sets the `display` style for the icon. Setting it to `false` will make\n\t * the icon have a display of `block`.\n\t /\n\tisInlineBlock?: boolean\n\n\t/\n\t Use to add accessible text to standalone icons. This will also change\n\t * the `aria-hidden` value to `false` instead of the default value of `true`.\n\t */\n\ttitle?: string\n\tclassName?: string\n}\n\n// When an SVG file is imported in Next.js, it is an object with a `src`\n// property. However, tools like Webpack and Vite default to returning a URL.\n// This runtime check allows the component to work in all of these cases.\nconst svgSpriteSrc =\n\ttypeof svgSprite === 'string' ? svgSprite : (svgSprite as { src: string }).src\n\nconst FlightIcon = ({\n\tname,\n\tcolor = 'currentColor',\n\tsize = 16,\n\tstretched = false,\n\tisInlineBlock = true,\n\ttitle,\n\tclassName,\n\t...rest\n}: FlightIconProps) => {\n\tconst iconId = useId()\n\tconst titleId = useId()\n\n\tconst spriteSize = SPRITE_SIZE_MAP[size]\n\n\treturn (\n\t\t<svg\n\t\t\tclassName={classNames(\n\t\t\t\ts['flight-icon'],\n\t\t\t\t`flight-icon-${name}`,\n\t\t\t\t{\n\t\t\t\t\t[s['display-inline']]: isInlineBlock && !stretched,\n\t\t\t\t\t[s['loading']]: name === 'loading',\n\t\t\t\t\t[s['running']]: name === 'running',\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...rest}\n\t\t\taria-hidden={title ? 'false' : 'true'}\n\t\t\taria-labelledby={title ? titleId : undefined}\n\t\t\tfill={color}\n\t\t\tid={iconId}\n\t\t\trole={title ? 'img' : undefined}\n\t\t\twidth={stretched ? '100%' : size}\n\t\t\theight={stretched ? '100%' : size}\n\t\t\tviewBox={`0 0 ${spriteSize} ${spriteSize}`}\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t{title ? (\n\t\t\t\t<>\n\t\t\t\t\t<title id={titleId}>{title}</title>\n\t\t\t\t\t<g role=\"presentation\">\n\t\t\t\t\t\t<use href={`${svgSpriteSrc}#flight-${name}-${spriteSize}`}></use>\n\t\t\t\t\t</g>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<use href={`${svgSpriteSrc}#flight-${name}-${spriteSize}`}></use>\n\t\t\t)}\n\t\t</svg>\n\t)\n}\n\nFlightIcon.displayName = 'FlightIcon'\n\nexport type { FlightIconProps, FlightIconSize, FlightIconName }\nexport { FlightIcon, FLIGHT_ICON_SIZES }\n"],"names":["FLIGHT_ICON_SIZES","SPRITE_SIZE_MAP","svgSpriteSrc","svgSprite","FlightIcon","name","color","size","stretched","isInlineBlock","title","className","rest","iconId","titleId","useId","jsx","classNames","spriteSize","jsxs","Fragment"],"mappings":";;;;;;AAWA,MAAMA,IAAkB,CAAA,IAAA,IAAA,IAAA,EAAA,GACnBC,IAAA;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACL,IAAA;AA8CA,GAGMC,IAAc,OAAAC,KAAA,WAAAA,IAAAA,EAAA,KACnBC,IAAA,CAAA;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAO;AAAA,EACP,MAAAC,IAAA;AAAA,EACA,WAAAC,IAAA;AAAA,EACA,eAAAC,IAAA;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACD,GAAAC;AACC,MAAA;AACA,QAAMC,MAAU,GAEVC,IAAAC,EAAa,SAGlBR,CAAA;AAAA,SAAC,gBAAAS;AAAA,IAAA;AAAA,IAAA;AAAA,MACW,WACRC;AAAA,QACF,eAAe;AAAA,QACf,eAAAZ,CAAA;AAAA,QAAA;AAAA,UAEC,CAAC,EAAE,gBAAa,CAAA,QAAS,CAAAG;AAAA,UACzB,CAAC,EAAE,OAAU,GAAGH,MAAS;AAAA,UAC1B,CAAA,EAAA,OAAA,GAAAA,MAAA;AAAA,QACA;AAAA,QACDM;AAAA,MACC;AAAA,MACD;MACA,mBAAiB,UAAQ;AAAA,MACzB,mBAAMD,IAAAI,IAAA;AAAA,MACN,MAAIR;AAAA,MACJ,IAAAO;AAAA,MACA,MAAAH,IAAO,QAAY;AAAA,MACnB,OAAAF;MACA,QAAAA,IAAgB,SAAUD;AAAA,MAC1B,SAAM,OAAAW,CAAA,IAAAA,CAAA;AAAA,MAEL,OAAA;AAAA,MAEC,UAAAR,IAAO,gBAAAS,EAAIC,GAAU,EAAA,UAAA;AAAA,QACrB,gBAAAJ,EAAC,SAAE,EAAA,IAAKF,GAAA,UACPJ;QAEF,gBAAAM,EAAA,KAEC,EAAA,MAAA,gBAAa,UAA+B,gBAAAA,EAAA,OAAU,EAAI,MAAA,GAAAd,CAAA,WAAAG,CAAA,IAAAa,CAAA,GAAA,CAAA,EAAA,CAAA;AAAA,MAAA,EAAA,CAAA,IAAA,gBAAAF,EAAA,OAAA,EAAA,MAAA,GAAAd,CAAA,WAAAG,CAAA,IAAAa,CAAA,GAAA,CAAA;AAAA,IAE7D;AAAA,EAEF;AAEA;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/flight-icon/index.tsx"],"sourcesContent":["'use client'\n\nimport svgSprite from '@hashicorp/flight-icons/svg-sprite/svg-sprite.svg'\nimport classNames from 'classnames'\nimport { useId, type SVGProps } from 'react'\nimport type { IconName } from '@hashicorp/flight-icons/svg'\nimport s from './flight-icon.module.css'\n\nconst FLIGHT_ICON_SIZES = [12, 16, 24, 32] as const\ntype FlightIconSize = (typeof FLIGHT_ICON_SIZES)[number]\n\nconst SPRITE_SIZE_MAP = {\n\t12: 16,\n\t16: 16,\n\t24: 24,\n\t32: 24,\n} as const\n\ntype FlightIconName = IconName \| (string & Record<never, never>)\n\ninterface FlightIconProps extends SVGProps<SVGSVGElement> {\n\t/*\n\t The name of the icon you wish to use. Search for existing icon\n\t * names in the Icon library.\n\t /\n\tname: FlightIconName\n\n\t/\n\t The `color` prop can be used to change the color. It works by setting\n\t * the value of the icon SVG’s fill property.\n\t /\n\tcolor?: string\n\n\t/\n\t The `size` prop can be used to change the size.\n\t /\n\tsize?: FlightIconSize\n\n\t/\n\t Determines whether the icon will stretch to fill the parent container.\n\t * Setting it to `true` will make the icon have a height and width of 100%\n\t * and a display of `block`.\n\t /\n\tstretched?: boolean\n\n\t/\n\t Sets the `display` style for the icon. Setting it to `false` will make\n\t * the icon have a display of `block`.\n\t /\n\tisInlineBlock?: boolean\n\n\t/\n\t Use to add accessible text to standalone icons. This will also change\n\t * the `aria-hidden` value to `false` instead of the default value of `true`.\n\t */\n\ttitle?: string\n\tclassName?: string\n}\n\n// When an SVG file is imported in Next.js, it is an object with a `src`\n// property. However, tools like Webpack and Vite default to returning a URL.\n// This runtime check allows the component to work in all of these cases.\nconst svgSpriteSrc =\n\ttypeof svgSprite === 'string' ? svgSprite : (svgSprite as { src: string }).src\n\nconst FlightIcon = ({\n\tname,\n\tcolor = 'currentColor',\n\tsize = 16,\n\tstretched = false,\n\tisInlineBlock = true,\n\ttitle,\n\tclassName,\n\t...rest\n}: FlightIconProps) => {\n\tconst iconId = useId()\n\tconst titleId = useId()\n\n\tconst spriteSize = SPRITE_SIZE_MAP[size]\n\n\treturn (\n\t\t<svg\n\t\t\tclassName={classNames(\n\t\t\t\ts['flight-icon'],\n\t\t\t\t`flight-icon-${name}`,\n\t\t\t\t{\n\t\t\t\t\t[s['display-inline']]: isInlineBlock && !stretched,\n\t\t\t\t\t[s['loading']]: name === 'loading',\n\t\t\t\t\t[s['running']]: name === 'running',\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t\taria-hidden={title ? 'false' : 'true'}\n\t\t\taria-labelledby={title ? titleId : undefined}\n\t\t\tfill={color}\n\t\t\tid={iconId}\n\t\t\trole={title ? 'img' : undefined}\n\t\t\twidth={stretched ? '100%' : size}\n\t\t\theight={stretched ? '100%' : size}\n\t\t\tviewBox={`0 0 ${spriteSize} ${spriteSize}`}\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t{title ? (\n\t\t\t\t<>\n\t\t\t\t\t<title id={titleId}>{title}</title>\n\t\t\t\t\t<g role=\"presentation\">\n\t\t\t\t\t\t<use href={`${svgSpriteSrc}#flight-${name}-${spriteSize}`}></use>\n\t\t\t\t\t</g>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<use href={`${svgSpriteSrc}#flight-${name}-${spriteSize}`}></use>\n\t\t\t)}\n\t\t</svg>\n\t)\n}\n\nFlightIcon.displayName = 'FlightIcon'\n\nexport type { FlightIconProps, FlightIconSize, FlightIconName }\nexport { FlightIcon, FLIGHT_ICON_SIZES }\n"],"names":["FLIGHT_ICON_SIZES","SPRITE_SIZE_MAP","svgSpriteSrc","svgSprite","FlightIcon","name","color","size","stretched","isInlineBlock","title","className","rest","iconId","titleId","useId","jsx","classNames","spriteSize","jsxs","Fragment"],"mappings":";;;;;;AAWA,MAAMA,IAAkB,CAAA,IAAA,IAAA,IAAA,EAAA,GACnBC,IAAA;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACL,IAAA;AA8CA,GAGMC,IAAc,OAAAC,KAAA,WAAAA,IAAAA,EAAA,KACnBC,IAAA,CAAA;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAO;AAAA,EACP,MAAAC,IAAA;AAAA,EACA,WAAAC,IAAA;AAAA,EACA,eAAAC,IAAA;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACD,GAAAC;AACC,MAAA;AACA,QAAMC,MAAU,GAEVC,IAAAC,EAAa,SAGlBR,CAAA;AAAA,SAAC,gBAAAS;AAAA,IAAA;AAAA,IAAA;AAAA,MACW,WACRC;AAAA,QACF,eAAe;AAAA,QACf,eAAAZ,CAAA;AAAA,QAAA;AAAA,UAEC,CAAC,EAAE,gBAAa,CAAA,QAAS,CAAAG;AAAA,UACzB,CAAC,EAAE,OAAU,GAAGH,MAAS;AAAA,UAC1B,CAAA,EAAA,OAAA,GAAAA,MAAA;AAAA,QACA;AAAA,QACDM;AAAA,MACC;AAAA,MACD;MACA,mBAAiB,UAAQ;AAAA,MACzB,mBAAMD,IAAAI,IAAA;AAAA,MACN,MAAIR;AAAA,MACJ,IAAAO;AAAA,MACA,MAAAH,IAAO,QAAY;AAAA,MACnB,OAAAF;MACA,QAAAA,IAAgB,SAAUD;AAAA,MAC1B,SAAM,OAAAW,CAAA,IAAAA,CAAA;AAAA,MAEL,OAAA;AAAA,MAEC,UAAAR,IAAO,gBAAAS,EAAIC,GAAU,EAAA,UAAA;AAAA,QACrB,gBAAAJ,EAAC,SAAE,EAAA,IAAKF,GAAA,UACPJ;QAEF,gBAAAM,EAAA,KAEC,EAAA,MAAA,gBAAa,UAA+B,gBAAAA,EAAA,OAAU,EAAI,MAAA,GAAAd,CAAA,WAAAG,CAAA,IAAAa,CAAA,GAAA,CAAA,EAAA,CAAA;AAAA,MAAA,EAAA,CAAA,IAAA,gBAAAF,EAAA,OAAA,EAAA,MAAA,GAAAd,CAAA,WAAAG,CAAA,IAAAa,CAAA,GAAA,CAAA;AAAA,IAE7D;AAAA,EAEF;AAEA;;"}

package/components/form/checkbox/form-checkbox.module.css CHANGED Viewed

@@ -4,8 +4,7 @@
 	margin: 0;
 	padding: 0;
 	background-position: center center;
-	background-size: var(--mds-form-checkbox-background-image-size)
-		var(--mds-form-checkbox-background-image-size);
+	background-size: var(--mds-form-checkbox-background-image-size) var(--mds-form-checkbox-background-image-size);
 	border-style: solid;
 	border-width: var(--mds-form-checkbox-border-width);
 	border-radius: var(--mds-form-checkbox-border-radius);
@@ -30,9 +29,7 @@
 	&:indeterminate {
 		background-color: var(--mds-form-control-checked-surface-color-default);
-		background-image: var(
-			--mds-form-checkbox-background-image-data-url-indeterminate
-		);
+		background-image: var(--mds-form-checkbox-background-image-data-url-indeterminate);
 		border-color: var(--mds-form-control-checked-border-color-default);
 	}
@@ -67,9 +64,7 @@
 	&:disabled:checked {
 		background-color: var(--mds-form-control-disabled-surface-color);
-		background-image: var(
-			--mds-form-checkbox-background-image-data-url-disabled
-		);
+		background-image: var(--mds-form-checkbox-background-image-data-url-disabled);
 		border-color: var(--mds-form-control-disabled-border-color);
 		box-shadow: none;
 		cursor: not-allowed;
@@ -77,9 +72,7 @@
 	&:disabled:indeterminate {
 		background-color: var(--mds-form-control-disabled-surface-color);
-		background-image: var(
-			--mds-form-checkbox-background-image-data-url-indeterminate-disabled
-		);
+		background-image: var(--mds-form-checkbox-background-image-data-url-indeterminate-disabled);
 		background-repeat: no-repeat;
 		border-color: var(--mds-form-control-disabled-border-color);
 		box-shadow: none;

package/components/form/file-input/form-file-input.module.scss CHANGED Viewed

@@ -74,7 +74,7 @@
 		color: var(--mds-color-foreground-disabled);
 		&::file-selector-button {
-			@include hds-button-state-disabled();
+			@include hds-button-state-disabled;
 			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cg fill='%238c909c'%3E%3Cpath d='M4.24 5.8a.75.75 0 001.06-.04l1.95-2.1v6.59a.75.75 0 001.5 0V3.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.101.001L4.2 4.74a.75.75 0 00.04 1.06z'/%3E%3Cpath d='M1.75 9a.75.75 0 01.75.75v3c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-3a.75.75 0 011.5 0v3A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-3A.75.75 0 011.75 9z'/%3E%3C/g%3E%3C/svg%3E");
 		}
 	}

package/components/form/radio/form-radio.module.scss CHANGED Viewed

@@ -10,8 +10,7 @@
 	margin: 0;
 	padding: 0;
 	background-position: center center;
-	background-size: var(--mds-form-radio-background-image-size)
-		var(--mds-form-radio-background-image-size);
+	background-size: var(--mds-form-radio-background-image-size) var(--mds-form-radio-background-image-size);
 	border-style: solid;
 	border-width: var(--mds-form-radio-border-width);
 	border-radius: 50%;
@@ -64,9 +63,7 @@
 	&:disabled:checked {
 		background-color: var(--mds-form-control-disabled-surface-color);
-		background-image: var(
-			--mds-form-radio-background-image-data-url-disabled
-		);
+		background-image: var(--mds-form-radio-background-image-data-url-disabled);
 		border-color: var(--mds-form-control-disabled-border-color);
 		box-shadow: none;
 		cursor: not-allowed;

package/components/form/radio-card/form-radio-card.module.css CHANGED Viewed

@@ -24,8 +24,7 @@
 	display: flex;
 	flex-direction: column;
 	background-color: var(--mds-color-surface-primary);
-	border: var(--mds-form-radiocard-border-width) solid
-		var(--mds-color-border-primary);
+	border: var(--mds-form-radiocard-border-width) solid var(--mds-color-border-primary);
 	border-radius: var(--mds-form-radiocard-border-radius);
 	box-shadow: var(--mds-elevation-mid-box-shadow);
 	cursor: pointer;

package/components/form/radio-card/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/form/radio-card/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { useId } from 'react'\nimport { Badge } from '../../badge'\nimport { FlightIcon } from '../../flight-icon'\nimport { RadioBase } from '../radio'\nimport { RadioCardGroup } from './group'\nimport Label from './label'\nimport Description from './description'\nimport type { HTMLProps, ReactNode } from 'react'\nimport type { BadgeProps } from '../../badge'\nimport s from './form-radio-card.module.css'\n\nexport const DEFAULT_CONTROL_POSITION = 'bottom'\nexport const DEFAULT_ALIGNMENT = 'left'\nexport const CONTROL_POSITIONS = ['bottom', 'left'] as const\nexport const ALIGNMENTS = ['left', 'center'] as const\n\ninterface RadioCardProps {\n\t/*\n\t Sets the position of the form control in relation to the Radio Card content.\n\t /\n\tcontrolPosition?: (typeof CONTROL_POSITIONS)[number]\n\t/\n\t Sets the alignment of the Radio Card content.\n\t /\n\talignment?: (typeof ALIGNMENTS)[number]\n\t/\n\t any valid CSS width (%, vw, etc)\n\t * This parameter will set the width of the card, wrapping cards on multiple rows if necessary.\n\t * You can use it to define the number of Radio Cards shown per row (for example `25%`\n\t * will result in 4 cards).\n\t /\n\tmaxWidth?: `${number}px` \| `${number}vw` \| `${number}%`\n\t/\n\t Renders <Badge /> component.\n\t /\n\tbadges?: Array<BadgeProps>\n\t/\n\t The name of the flight icon to render.\n\t /\n\ticon?: string\n\t/\n\t The label text.\n\t /\n\tlabel?: string\n\t/\n\t The description text.\n\t /\n\tdescription?: string\n\t/\n\t * Optional children rendered below the label and description (if provided).\n\t */\n\tchildren?: ReactNode\n\tfield: HTMLProps<HTMLInputElement>\n\tid?: string\n}\n\nconst RadioCard = ({\n\tcontrolPosition = DEFAULT_CONTROL_POSITION,\n\talignment = DEFAULT_ALIGNMENT,\n\tmaxWidth,\n\tfield,\n\ticon,\n\tlabel,\n\tdescription,\n\tbadges,\n\tchildren,\n}: RadioCardProps) => {\n\tconst generatedId = useId()\n\n\treturn (\n\t\t<label\n\t\t\thtmlFor={generatedId}\n\t\t\tstyle={{ maxWidth }}\n\t\t\tclassName={classNames(\n\t\t\t\ts['radio-card'],\n\t\t\t\ts[`control-${controlPosition}`],\n\t\t\t\ts[`align-${alignment}`],\n\t\t\t\t{\n\t\t\t\t\t[s['checked']]: field.checked,\n\t\t\t\t\t[s['disabled']]: field.disabled,\n\t\t\t\t\t[s['has-fixed-width']]: maxWidth,\n\t\t\t\t\t[s['has-fluid-width']]: !maxWidth,\n\t\t\t\t}\n\t\t\t)}\n\t\t>\n\t\t\t<span className={s['content']}>\n\t\t\t\t{icon && (\n\t\t\t\t\t<FlightIcon\n\t\t\t\t\t\tname={icon}\n\t\t\t\t\t\tsize={24}\n\t\t\t\t\t\tisInlineBlock={false}\n\t\t\t\t\t\tclassName={classNames({\n\t\t\t\t\t\t\t[s['icon-center']]: alignment === 'center',\n\t\t\t\t\t\t})}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{label && <Label label={label} />}\n\t\t\t\t{badges?.length ? (\n\t\t\t\t\t<div className={s.badges}>\n\t\t\t\t\t\t{badges.map((badge) => (\n\t\t\t\t\t\t\t<Badge {...badge} key={badge.text} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t\t{description && <Description description={description} />}\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t\t<span className={s['control-wrapper']}>\n\t\t\t\t<RadioBase className={s.control} id={generatedId} field={field} />\n\t\t\t</span>\n\t\t</label>\n\t)\n}\n\nRadioCard.displayName = 'RadioCard'\n\nexport { RadioCardGroup, RadioCard }\n"],"names":["DEFAULT_CONTROL_POSITION","DEFAULT_ALIGNMENT","RadioCard","controlPosition","alignment","maxWidth","field","icon","label","description","badges","children","generatedId","useId","jsxs","classNames","s","jsx","FlightIcon","Label","badge","createElement","Badge","Description","RadioBase"],"mappings":";;;;;;;;;AAYO,MAAMA,IAA2B,UAC3BC,IAAoB,QA4C3BC,IAAY,CAAC;AAAA,EAClB,iBAAAC,IAAkBH;AAAA,EAClB,WAAAI,IAAYH;AAAA,EACZ,UAAAI;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AACD,MAAsB;AACrB,QAAMC,IAAcC,EAAA;AAEpB,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,SAASF;AAAA,MACT,OAAO,EAAE,UAAAP,EAAA;AAAA,MACT,WAAWU;AAAA,QACVC,EAAE,YAAY;AAAA,QACdA,EAAE,WAAWb,CAAe,EAAE;AAAA,QAC9Ba,EAAE,SAASZ,CAAS,EAAE;AAAA,QACtB;AAAA,UACC,CAACY,EAAE,OAAU,GAAGV,EAAM;AAAA,UACtB,CAACU,EAAE,QAAW,GAAGV,EAAM;AAAA,UACvB,CAACU,EAAE,iBAAiB,CAAC,GAAGX;AAAA,UACxB,CAACW,EAAE,iBAAiB,CAAC,GAAG,CAACX;AAAA,QAAA;AAAA,MAC1B;AAAA,MAGD,UAAA;AAAA,QAAA,gBAAAS,EAAC,QAAA,EAAK,WAAWE,EAAE,SACjB,UAAA;AAAA,UAAAT,KACA,gBAAAU;AAAA,YAACC;AAAA,YAAA;AAAA,cACA,MAAMX;AAAA,cACN,MAAM;AAAA,cACN,eAAe;AAAA,cACf,WAAWQ,EAAW;AAAA,gBACrB,CAACC,EAAE,aAAa,CAAC,GAAGZ,MAAc;AAAA,cAAA,CAClC;AAAA,YAAA;AAAA,UAAA;AAAA,UAGFI,KAAS,gBAAAS,EAACE,GAAA,EAAM,OAAAX,EAAA,CAAc;AAAA,UAC9BE,GAAQ,SACR,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAE,QAChB,YAAO,IAAI,CAACI,MACZ,gBAAAC,EAACC,GAAA,EAAO,GAAGF,GAAO,KAAKA,EAAM,KAAA,CAAM,CACnC,GACF,IACG;AAAA,UACHX,KAAe,gBAAAQ,EAACM,GAAA,EAAY,aAAAd,EAAA,CAA0B;AAAA,UACtDE;AAAA,QAAA,GACF;AAAA,QACA,gBAAAM,EAAC,QAAA,EAAK,WAAWD,EAAE,iBAAiB,GACnC,UAAA,gBAAAC,EAACO,GAAA,EAAU,WAAWR,EAAE,SAAS,IAAIJ,GAAa,OAAAN,GAAc,EAAA,CACjE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH;AAEAJ,EAAU,cAAc;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/form/radio-card/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { useId } from 'react'\nimport { Badge } from '../../badge'\nimport { FlightIcon } from '../../flight-icon'\nimport { RadioBase } from '../radio'\nimport { RadioCardGroup } from './group'\nimport Label from './label'\nimport Description from './description'\nimport type { HTMLProps, ReactNode } from 'react'\nimport type { BadgeProps } from '../../badge'\nimport s from './form-radio-card.module.css'\n\nexport const DEFAULT_CONTROL_POSITION = 'bottom'\nexport const DEFAULT_ALIGNMENT = 'left'\nexport const CONTROL_POSITIONS = ['bottom', 'left'] as const\nexport const ALIGNMENTS = ['left', 'center'] as const\n\ninterface RadioCardProps {\n\t/*\n\t Sets the position of the form control in relation to the Radio Card content.\n\t /\n\tcontrolPosition?: (typeof CONTROL_POSITIONS)[number]\n\t/\n\t Sets the alignment of the Radio Card content.\n\t /\n\talignment?: (typeof ALIGNMENTS)[number]\n\t/\n\t any valid CSS width (%, vw, etc)\n\t * This parameter will set the width of the card, wrapping cards on multiple rows if necessary.\n\t * You can use it to define the number of Radio Cards shown per row (for example `25%`\n\t * will result in 4 cards).\n\t /\n\tmaxWidth?: `${number}px` \| `${number}vw` \| `${number}%`\n\t/\n\t Renders <Badge /> component.\n\t /\n\tbadges?: Array<BadgeProps>\n\t/\n\t The name of the flight icon to render.\n\t /\n\ticon?: string\n\t/\n\t The label text.\n\t /\n\tlabel?: string\n\t/\n\t The description text.\n\t /\n\tdescription?: string\n\t/\n\t * Optional children rendered below the label and description (if provided).\n\t */\n\tchildren?: ReactNode\n\tfield: HTMLProps<HTMLInputElement>\n\tid?: string\n}\n\nconst RadioCard = ({\n\tcontrolPosition = DEFAULT_CONTROL_POSITION,\n\talignment = DEFAULT_ALIGNMENT,\n\tmaxWidth,\n\tfield,\n\ticon,\n\tlabel,\n\tdescription,\n\tbadges,\n\tchildren,\n}: RadioCardProps) => {\n\tconst generatedId = useId()\n\n\treturn (\n\t\t<label\n\t\t\thtmlFor={generatedId}\n\t\t\tstyle={{ maxWidth }}\n\t\t\tclassName={classNames(\n\t\t\t\ts['radio-card'],\n\t\t\t\ts[`control-${controlPosition}`],\n\t\t\t\ts[`align-${alignment}`],\n\t\t\t\t{\n\t\t\t\t\t[s['checked']]: field.checked,\n\t\t\t\t\t[s['disabled']]: field.disabled,\n\t\t\t\t\t[s['has-fixed-width']]: maxWidth,\n\t\t\t\t\t[s['has-fluid-width']]: !maxWidth,\n\t\t\t\t},\n\t\t\t)}\n\t\t>\n\t\t\t<span className={s['content']}>\n\t\t\t\t{icon && (\n\t\t\t\t\t<FlightIcon\n\t\t\t\t\t\tname={icon}\n\t\t\t\t\t\tsize={24}\n\t\t\t\t\t\tisInlineBlock={false}\n\t\t\t\t\t\tclassName={classNames({\n\t\t\t\t\t\t\t[s['icon-center']]: alignment === 'center',\n\t\t\t\t\t\t})}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{label && <Label label={label} />}\n\t\t\t\t{badges?.length ? (\n\t\t\t\t\t<div className={s.badges}>\n\t\t\t\t\t\t{badges.map((badge) => (\n\t\t\t\t\t\t\t<Badge {...badge} key={badge.text} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t\t{description && <Description description={description} />}\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t\t<span className={s['control-wrapper']}>\n\t\t\t\t<RadioBase className={s.control} id={generatedId} field={field} />\n\t\t\t</span>\n\t\t</label>\n\t)\n}\n\nRadioCard.displayName = 'RadioCard'\n\nexport { RadioCardGroup, RadioCard }\n"],"names":["DEFAULT_CONTROL_POSITION","DEFAULT_ALIGNMENT","RadioCard","controlPosition","alignment","maxWidth","field","icon","label","description","badges","children","generatedId","useId","jsxs","classNames","s","jsx","FlightIcon","Label","badge","createElement","Badge","Description","RadioBase"],"mappings":";;;;;;;;;AAYO,MAAMA,IAA2B,UAC3BC,IAAoB,QA4C3BC,IAAY,CAAC;AAAA,EAClB,iBAAAC,IAAkBH;AAAA,EAClB,WAAAI,IAAYH;AAAA,EACZ,UAAAI;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AACD,MAAsB;AACrB,QAAMC,IAAcC,EAAA;AAEpB,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,SAASF;AAAA,MACT,OAAO,EAAE,UAAAP,EAAA;AAAA,MACT,WAAWU;AAAA,QACVC,EAAE,YAAY;AAAA,QACdA,EAAE,WAAWb,CAAe,EAAE;AAAA,QAC9Ba,EAAE,SAASZ,CAAS,EAAE;AAAA,QACtB;AAAA,UACC,CAACY,EAAE,OAAU,GAAGV,EAAM;AAAA,UACtB,CAACU,EAAE,QAAW,GAAGV,EAAM;AAAA,UACvB,CAACU,EAAE,iBAAiB,CAAC,GAAGX;AAAA,UACxB,CAACW,EAAE,iBAAiB,CAAC,GAAG,CAACX;AAAA,QAAA;AAAA,MAC1B;AAAA,MAGD,UAAA;AAAA,QAAA,gBAAAS,EAAC,QAAA,EAAK,WAAWE,EAAE,SACjB,UAAA;AAAA,UAAAT,KACA,gBAAAU;AAAA,YAACC;AAAA,YAAA;AAAA,cACA,MAAMX;AAAA,cACN,MAAM;AAAA,cACN,eAAe;AAAA,cACf,WAAWQ,EAAW;AAAA,gBACrB,CAACC,EAAE,aAAa,CAAC,GAAGZ,MAAc;AAAA,cAAA,CAClC;AAAA,YAAA;AAAA,UAAA;AAAA,UAGFI,KAAS,gBAAAS,EAACE,GAAA,EAAM,OAAAX,EAAA,CAAc;AAAA,UAC9BE,GAAQ,SACR,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAE,QAChB,YAAO,IAAI,CAACI,MACZ,gBAAAC,EAACC,GAAA,EAAO,GAAGF,GAAO,KAAKA,EAAM,KAAA,CAAM,CACnC,GACF,IACG;AAAA,UACHX,KAAe,gBAAAQ,EAACM,GAAA,EAAY,aAAAd,EAAA,CAA0B;AAAA,UACtDE;AAAA,QAAA,GACF;AAAA,QACA,gBAAAM,EAAC,QAAA,EAAK,WAAWD,EAAE,iBAAiB,GACnC,UAAA,gBAAAC,EAACO,GAAA,EAAU,WAAWR,EAAE,SAAS,IAAIJ,GAAa,OAAAN,GAAc,EAAA,CACjE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH;AAEAJ,EAAU,cAAc;"}

package/components/form/select/form-select.module.css CHANGED Viewed

@@ -8,22 +8,16 @@
 	composes: mds-typography-font-weight-regular from global;
 	max-width: 100%;
 	padding: var(--mds-padding);
-	padding-right: calc(
-		var(--mds-padding) + 24px
-	); /* extra space for the icon */
+	padding-right: calc(var(--mds-padding) + 24px); /* extra space for the icon */
 	color: var(--mds-form-control-base-foreground-value-color);
 	background-color: var(--mds-form-control-base-surface-color-default);
 	background-image: var(--mds-form-select-background-image-data-url);
 	background-repeat: no-repeat;
-	background-position: right
-		var(--mds-form-select-background-image-position-right-x) top
-		var(--mds-form-select-background-image-position-top-y); /* we have to take into account the border */
-	background-size: var(--mds-form-select-background-image-size)
-		var(--mds-form-select-background-image-size);
-	border: var(--mds-form-control-border-width) solid
-		var(--mds-form-control-base-border-color-default);
+	background-position: right var(--mds-form-select-background-image-position-right-x) top var(--mds-form-select-background-image-position-top-y); /* we have to take into account the border */
+	background-size: var(--mds-form-select-background-image-size) var(--mds-form-select-background-image-size);
+	border: var(--mds-form-control-border-width) solid var(--mds-form-control-base-border-color-default);
 	border-radius: var(--mds-form-control-border-radius);
 	box-shadow: var(--mds-elevation-low-box-shadow);
 	appearance: none;
@@ -49,9 +43,7 @@
 	&:disabled {
 		color: var(--mds-form-control-disabled-foreground-color);
 		background-color: var(--mds-form-control-disabled-surface-color);
-		background-image: var(
-			--mds-form-select-background-image-data-url-disabled
-		);
+		background-image: var(--mds-form-select-background-image-data-url-disabled);
 		border-color: var(--mds-form-control-disabled-border-color);
 		box-shadow: none;
 		cursor: not-allowed;

package/components/form/select/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/form/select/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { HTMLProps, ReactNode } from 'react'\nimport { useId } from 'react'\nimport { Field } from '../field'\nimport s from './form-select.module.css'\n\ninterface SelectBaseProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\trequired?: boolean\n\tclassName?: string\n\tid: string\n\tfield: HTMLProps<HTMLSelectElement>\n\tchildren: ReactNode\n\tsize: 'medium' \| 'large'\n\terror?: ReactNode\n\tdisabled?: boolean\n}\n\nconst SelectBase = ({\n\tisInvalid,\n\tisLoading,\n\tclassName,\n\tid,\n\tfield,\n\tchildren,\n\tsize,\n\terror,\n\t...rest\n}: SelectBaseProps) => {\n\treturn (\n\t\t<select\n\t\t\tid={id}\n\t\t\tclassName={classNames(\n\t\t\t\ts.select,\n\t\t\t\ts[size],\n\t\t\t\t{\n\t\t\t\t\t[s.invalid]: isInvalid,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\taria-describedby={`${error ? 'error' : 'helper-text'}-${id}`}\n\t\t\t{...field}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</select>\n\t)\n}\n\ninterface SelectFieldProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\tisRequired?: boolean\n\tisOptional?: boolean\n\tid?: string\n\tlabel?: ReactNode\n\thelperText?: ReactNode\n\terror?: ReactNode\n\tfield: HTMLProps<HTMLSelectElement>\n\tchildren: ReactNode\n\tclassName?: string\n\tsize?: 'medium' \| 'large'\n\tdisabled?: boolean\n\tmultiple?: boolean\n}\n\nconst SelectField = ({\n\tisInvalid,\n\tisLoading,\n\tisRequired,\n\tisOptional,\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tchildren,\n\tclassName,\n\tsize = 'medium',\n\t...rest\n}: SelectFieldProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<Field\n\t\t\tlabel={label}\n\t\t\thelperText={helperText}\n\t\t\terror={error}\n\t\t\tisRequired={isRequired}\n\t\t\tisOptional={isOptional}\n\t\t\tid={inputId}\n\t\t\tlayout=\"vertical\"\n\t\t\tclassName={className}\n\t\t>\n\t\t\t<SelectBase\n\t\t\t\tid={inputId}\n\t\t\t\tisInvalid={isInvalid}\n\t\t\t\trequired={isRequired}\n\t\t\t\tfield={field}\n\t\t\t\tsize={size}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</SelectBase>\n\t\t</Field>\n\t)\n}\n\nSelectField.displayName = 'SelectField'\n\nexport { SelectField }\n"],"names":["SelectBase","isInvalid","isLoading","className","id","field","children","size","error","rest","jsx","classNames","s","SelectField","isRequired","isOptional","label","helperText","generatedId","useId","inputId","Field"],"mappings":";;;;;AAmBA,MAAMA,IAAa,CAAC;AAAA,EACnB,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,IAAAN;AAAA,IACA,WAAWO;AAAA,MACVC,EAAE;AAAA,MACFA,EAAEL,CAAI;AAAA,MACN;AAAA,QACC,CAACK,EAAE,OAAO,GAAGX;AAAA,MAAA;AAAA,MAEdE;AAAA,IAAA;AAAA,IAED,oBAAkB,GAAGK,IAAQ,UAAU,aAAa,IAAIJ,CAAE;AAAA,IACzD,GAAGC;AAAA,IACH,GAAGI;AAAA,IAEH,UAAAH;AAAA,EAAA;AAAA,GAsBEO,IAAc,CAAC;AAAA,EACpB,WAAAZ;AAAA,EACA,WAAAC;AAAA,EACA,YAAAY;AAAA,EACA,YAAAC;AAAA,EACA,IAAAX;AAAA,EACA,OAAAY;AAAA,EACA,YAAAC;AAAA,EACA,OAAAT;AAAA,EACA,OAAAH;AAAA,EACA,UAAAC;AAAA,EACA,WAAAH;AAAA,EACA,MAAAI,IAAO;AAAA,EACP,GAAGE;AACJ,MAAwB;AACvB,QAAMS,IAAcC,EAAA,GACdC,IAAUhB,KAAMc;AAEtB,SACC,gBAAAR;AAAA,IAACW;AAAA,IAAA;AAAA,MACA,OAAAL;AAAA,MACA,YAAAC;AAAA,MACA,OAAAT;AAAA,MACA,YAAAM;AAAA,MACA,YAAAC;AAAA,MACA,IAAIK;AAAA,MACJ,QAAO;AAAA,MACP,WAAAjB;AAAA,MAEA,UAAA,gBAAAO;AAAA,QAACV;AAAA,QAAA;AAAA,UACA,IAAIoB;AAAA,UACJ,WAAAnB;AAAA,UACA,UAAUa;AAAA,UACV,OAAAT;AAAA,UACA,MAAAE;AAAA,UACC,GAAGE;AAAA,UAEH,UAAAH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGH;AAEAO,EAAY,cAAc;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/form/select/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { HTMLProps, ReactNode } from 'react'\nimport { useId } from 'react'\nimport { Field } from '../field'\nimport s from './form-select.module.css'\n\ninterface SelectBaseProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\trequired?: boolean\n\tclassName?: string\n\tid: string\n\tfield: HTMLProps<HTMLSelectElement>\n\tchildren: ReactNode\n\tsize: 'medium' \| 'large'\n\terror?: ReactNode\n\tdisabled?: boolean\n}\n\nconst SelectBase = ({\n\tisInvalid,\n\tisLoading,\n\tclassName,\n\tid,\n\tfield,\n\tchildren,\n\tsize,\n\terror,\n\t...rest\n}: SelectBaseProps) => {\n\treturn (\n\t\t<select\n\t\t\tid={id}\n\t\t\tclassName={classNames(\n\t\t\t\ts.select,\n\t\t\t\ts[size],\n\t\t\t\t{\n\t\t\t\t\t[s.invalid]: isInvalid,\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\taria-describedby={`${error ? 'error' : 'helper-text'}-${id}`}\n\t\t\t{...field}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</select>\n\t)\n}\n\ninterface SelectFieldProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\tisRequired?: boolean\n\tisOptional?: boolean\n\tid?: string\n\tlabel?: ReactNode\n\thelperText?: ReactNode\n\terror?: ReactNode\n\tfield: HTMLProps<HTMLSelectElement>\n\tchildren: ReactNode\n\tclassName?: string\n\tsize?: 'medium' \| 'large'\n\tdisabled?: boolean\n\tmultiple?: boolean\n}\n\nconst SelectField = ({\n\tisInvalid,\n\tisLoading,\n\tisRequired,\n\tisOptional,\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tchildren,\n\tclassName,\n\tsize = 'medium',\n\t...rest\n}: SelectFieldProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<Field\n\t\t\tlabel={label}\n\t\t\thelperText={helperText}\n\t\t\terror={error}\n\t\t\tisRequired={isRequired}\n\t\t\tisOptional={isOptional}\n\t\t\tid={inputId}\n\t\t\tlayout=\"vertical\"\n\t\t\tclassName={className}\n\t\t>\n\t\t\t<SelectBase\n\t\t\t\tid={inputId}\n\t\t\t\tisInvalid={isInvalid}\n\t\t\t\trequired={isRequired}\n\t\t\t\tfield={field}\n\t\t\t\tsize={size}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</SelectBase>\n\t\t</Field>\n\t)\n}\n\nSelectField.displayName = 'SelectField'\n\nexport { SelectField }\n"],"names":["SelectBase","isInvalid","isLoading","className","id","field","children","size","error","rest","jsx","classNames","s","SelectField","isRequired","isOptional","label","helperText","generatedId","useId","inputId","Field"],"mappings":";;;;;AAmBA,MAAMA,IAAa,CAAC;AAAA,EACnB,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,IAAAN;AAAA,IACA,WAAWO;AAAA,MACVC,EAAE;AAAA,MACFA,EAAEL,CAAI;AAAA,MACN;AAAA,QACC,CAACK,EAAE,OAAO,GAAGX;AAAA,MAAA;AAAA,MAEdE;AAAA,IAAA;AAAA,IAED,oBAAkB,GAAGK,IAAQ,UAAU,aAAa,IAAIJ,CAAE;AAAA,IACzD,GAAGC;AAAA,IACH,GAAGI;AAAA,IAEH,UAAAH;AAAA,EAAA;AAAA,GAsBEO,IAAc,CAAC;AAAA,EACpB,WAAAZ;AAAA,EACA,WAAAC;AAAA,EACA,YAAAY;AAAA,EACA,YAAAC;AAAA,EACA,IAAAX;AAAA,EACA,OAAAY;AAAA,EACA,YAAAC;AAAA,EACA,OAAAT;AAAA,EACA,OAAAH;AAAA,EACA,UAAAC;AAAA,EACA,WAAAH;AAAA,EACA,MAAAI,IAAO;AAAA,EACP,GAAGE;AACJ,MAAwB;AACvB,QAAMS,IAAcC,EAAA,GACdC,IAAUhB,KAAMc;AAEtB,SACC,gBAAAR;AAAA,IAACW;AAAA,IAAA;AAAA,MACA,OAAAL;AAAA,MACA,YAAAC;AAAA,MACA,OAAAT;AAAA,MACA,YAAAM;AAAA,MACA,YAAAC;AAAA,MACA,IAAIK;AAAA,MACJ,QAAO;AAAA,MACP,WAAAjB;AAAA,MAEA,UAAA,gBAAAO;AAAA,QAACV;AAAA,QAAA;AAAA,UACA,IAAIoB;AAAA,UACJ,WAAAnB;AAAA,UACA,UAAUa;AAAA,UACV,OAAAT;AAAA,UACA,MAAAE;AAAA,UACC,GAAGE;AAAA,UAEH,UAAAH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGH;AAEAO,EAAY,cAAc;"}

package/components/form/super-select/form-super-select.module.css CHANGED Viewed

@@ -15,18 +15,14 @@
 	min-height: 3rem;
 	background-position: right 11px top 16px; /* we have to take into account the border */
 	padding: var(--mds-padding);
-	padding-right: calc(
-		var(--mds-padding) + 24px
-	); /* extra space for the icon */
+	padding-right: calc(var(--mds-padding) + 24px); /* extra space for the icon */
 	color: var(--mds-form-control-base-foreground-value-color);
 	background-color: var(--mds-form-control-base-surface-color-default);
 	background-image: var(--mds-form-select-background-image-data-url);
 	background-repeat: no-repeat;
-	background-size: var(--mds-form-select-background-image-size)
-		var(--mds-form-select-background-image-size);
-	border: var(--mds-form-control-border-width) solid
-		var(--mds-form-control-base-border-color-default);
+	background-size: var(--mds-form-select-background-image-size) var(--mds-form-select-background-image-size);
+	border: var(--mds-form-control-border-width) solid var(--mds-form-control-base-border-color-default);
 	border-radius: var(--mds-form-control-border-radius);
 	box-shadow: var(--mds-elevation-low-box-shadow);
 	appearance: none;
@@ -52,9 +48,7 @@
 	&:disabled {
 		color: var(--mds-form-control-disabled-foreground-color);
 		background-color: var(--mds-form-control-disabled-surface-color);
-		background-image: var(
-			--mds-form-select-background-image-data-url-disabled
-		);
+		background-image: var(--mds-form-select-background-image-data-url-disabled);
 		border-color: var(--mds-form-control-disabled-border-color);
 		box-shadow: none;
 		cursor: not-allowed;