{ "version": 3, "sources": ["../../../node_modules/clsx/dist/clsx.m.js", "../../../node_modules/tailwind-merge/src/lib/class-utils.ts", "../../../node_modules/tailwind-merge/src/lib/lru-cache.ts", "../../../node_modules/tailwind-merge/src/lib/modifier-utils.ts", "../../../node_modules/tailwind-merge/src/lib/config-utils.ts", "../../../node_modules/tailwind-merge/src/lib/merge-classlist.ts", "../../../node_modules/tailwind-merge/src/lib/tw-join.ts", "../../../node_modules/tailwind-merge/src/lib/create-tailwind-merge.ts", "../../../node_modules/tailwind-merge/src/lib/from-theme.ts", "../../../node_modules/tailwind-merge/src/lib/validators.ts", "../../../node_modules/tailwind-merge/src/lib/default-config.ts", "../../../node_modules/tailwind-merge/src/lib/tw-merge.ts", "../../../app/uikit/components/Typography/Typography.tsx", "../../../app/uikit/hooks/typography.ts", "../../../app/uikit/hooks/button.ts", "../../../app/uikit/hooks/icon.ts", "../../../app/uikit/hooks/input.ts", "../../../app/uikit/components/Typography/index.ts", "../../../app/uikit/components/Box/Box.tsx", "../../../app/uikit/components/Box/index.ts", "../../../app/uikit/components/Spinner/Spinner.tsx", "../../../app/uikit/components/Spinner/index.ts", "../../../app/uikit/components/Button/Button.tsx", "../../../app/uikit/components/Button/index.ts", "../../../app/uikit/components/HStack/HStack.tsx", "../../../app/uikit/components/HStack/index.ts", "../../../app/uikit/components/VStack/VStack.tsx", "../../../app/uikit/components/VStack/index.ts", "../../../app/uikit/components/Center/Center.tsx", "../../../app/uikit/components/Center/index.ts", "../../../app/uikit/components/RenderBoundary/Loader.tsx", "../../../node_modules/@babel/runtime/helpers/esm/extends.js", "../../../node_modules/@radix-ui/react-context/dist/packages/react/context/src/index.ts", "../../../node_modules/@radix-ui/react-context/dist/packages/react/context/src/createContext.tsx", "../../../node_modules/@radix-ui/primitive/dist/packages/core/primitive/src/index.ts", "../../../node_modules/@radix-ui/primitive/dist/packages/core/primitive/src/primitive.tsx", "../../../node_modules/@radix-ui/react-compose-refs/dist/packages/react/compose-refs/src/index.ts", "../../../node_modules/@radix-ui/react-compose-refs/dist/packages/react/compose-refs/src/composeRefs.tsx", "../../../node_modules/@radix-ui/react-slot/dist/packages/react/slot/src/index.ts", "../../../node_modules/@radix-ui/react-slot/dist/packages/react/slot/src/Slot.tsx", "../../../node_modules/@radix-ui/react-primitive/dist/packages/react/primitive/src/index.ts", "../../../node_modules/@radix-ui/react-primitive/dist/packages/react/primitive/src/Primitive.tsx", "../../../node_modules/@radix-ui/react-use-callback-ref/dist/packages/react/use-callback-ref/src/index.ts", "../../../node_modules/@radix-ui/react-use-callback-ref/dist/packages/react/use-callback-ref/src/useCallbackRef.tsx", "../../../node_modules/@radix-ui/react-use-controllable-state/dist/packages/react/use-controllable-state/src/index.ts", "../../../node_modules/@radix-ui/react-use-controllable-state/dist/packages/react/use-controllable-state/src/useControllableState.tsx", "../../../node_modules/@radix-ui/react-direction/dist/packages/react/direction/src/index.ts", "../../../node_modules/@radix-ui/react-direction/dist/packages/react/direction/src/Direction.tsx", "../../../node_modules/@radix-ui/react-use-layout-effect/dist/packages/react/use-layout-effect/src/index.ts", "../../../node_modules/@radix-ui/react-use-layout-effect/dist/packages/react/use-layout-effect/src/useLayoutEffect.tsx", "../../../node_modules/@radix-ui/react-presence/dist/packages/react/presence/src/index.ts", "../../../node_modules/@radix-ui/react-presence/dist/packages/react/presence/src/Presence.tsx", "../../../node_modules/@radix-ui/react-presence/dist/packages/react/presence/src/useStateMachine.tsx", "../../../node_modules/@radix-ui/react-id/dist/packages/react/id/src/index.ts", "../../../node_modules/@radix-ui/react-id/dist/packages/react/id/src/id.tsx", "../../../node_modules/@radix-ui/react-collection/dist/packages/react/collection/src/index.ts", "../../../node_modules/@radix-ui/react-collection/dist/packages/react/collection/src/Collection.tsx", "../../../node_modules/@radix-ui/react-use-escape-keydown/dist/packages/react/use-escape-keydown/src/index.ts", "../../../node_modules/@radix-ui/react-use-escape-keydown/dist/packages/react/use-escape-keydown/src/useEscapeKeydown.tsx", "../../../node_modules/@radix-ui/react-dismissable-layer/dist/packages/react/dismissable-layer/src/index.ts", "../../../node_modules/@radix-ui/react-dismissable-layer/dist/packages/react/dismissable-layer/src/DismissableLayer.tsx", "../../../node_modules/@radix-ui/react-use-previous/dist/packages/react/use-previous/src/index.ts", "../../../node_modules/@radix-ui/react-use-previous/dist/packages/react/use-previous/src/usePrevious.tsx", "../../../node_modules/@radix-ui/react-visually-hidden/dist/packages/react/visually-hidden/src/index.ts", "../../../node_modules/@radix-ui/react-visually-hidden/dist/packages/react/visually-hidden/src/VisuallyHidden.tsx", "../../../node_modules/@radix-ui/react-navigation-menu/dist/packages/react/navigation-menu/src/index.ts", "../../../node_modules/@radix-ui/react-navigation-menu/dist/packages/react/navigation-menu/src/NavigationMenu.tsx", "../../../node_modules/@radix-ui/react-focus-scope/dist/packages/react/focus-scope/src/index.ts", "../../../node_modules/@radix-ui/react-focus-scope/dist/packages/react/focus-scope/src/FocusScope.tsx", "../../../node_modules/@radix-ui/react-portal/dist/packages/react/portal/src/index.ts", "../../../node_modules/@radix-ui/react-portal/dist/packages/react/portal/src/Portal.tsx", "../../../node_modules/@radix-ui/react-focus-guards/dist/packages/react/focus-guards/src/index.ts", "../../../node_modules/@radix-ui/react-focus-guards/dist/packages/react/focus-guards/src/FocusGuards.tsx", "../../../node_modules/tslib/tslib.es6.mjs", "../../../node_modules/react-remove-scroll/dist/es2015/Combination.js", "../../../node_modules/react-remove-scroll/dist/es2015/UI.js", "../../../node_modules/react-remove-scroll-bar/dist/es2015/constants.js", "../../../node_modules/use-callback-ref/dist/es2015/assignRef.js", "../../../node_modules/use-callback-ref/dist/es2015/useRef.js", "../../../node_modules/use-callback-ref/dist/es2015/useMergeRef.js", "../../../node_modules/use-sidecar/dist/es2015/medium.js", "../../../node_modules/use-sidecar/dist/es2015/exports.js", "../../../node_modules/react-remove-scroll/dist/es2015/medium.js", "../../../node_modules/react-remove-scroll/dist/es2015/SideEffect.js", "../../../node_modules/react-remove-scroll-bar/dist/es2015/component.js", "../../../node_modules/react-style-singleton/dist/es2015/hook.js", "../../../node_modules/get-nonce/dist/es2015/index.js", "../../../node_modules/react-style-singleton/dist/es2015/singleton.js", "../../../node_modules/react-style-singleton/dist/es2015/component.js", "../../../node_modules/react-remove-scroll-bar/dist/es2015/utils.js", "../../../node_modules/react-remove-scroll/dist/es2015/aggresiveCapture.js", "../../../node_modules/react-remove-scroll/dist/es2015/handleScroll.js", "../../../node_modules/react-remove-scroll/dist/es2015/sidecar.js", "../../../node_modules/aria-hidden/dist/es2015/index.js", "../../../node_modules/@radix-ui/react-dialog/dist/packages/react/dialog/src/index.ts", "../../../node_modules/@radix-ui/react-dialog/dist/packages/react/dialog/src/Dialog.tsx", "../../../node_modules/@radix-ui/react-collapsible/dist/packages/react/collapsible/src/index.ts", "../../../node_modules/@radix-ui/react-collapsible/dist/packages/react/collapsible/src/Collapsible.tsx", "../../../node_modules/@radix-ui/react-accordion/dist/packages/react/accordion/src/index.ts", "../../../node_modules/@radix-ui/react-accordion/dist/packages/react/accordion/src/Accordion.tsx", "../../../node_modules/@radix-ui/react-roving-focus/dist/packages/react/roving-focus/src/index.ts", "../../../node_modules/@radix-ui/react-roving-focus/dist/packages/react/roving-focus/src/RovingFocusGroup.tsx", "../../../node_modules/@radix-ui/react-tabs/dist/packages/react/tabs/src/index.ts", "../../../node_modules/@radix-ui/react-tabs/dist/packages/react/tabs/src/Tabs.tsx", "../../../app/uikit/components/Flex/Flex.tsx", "../../../app/uikit/components/Flex/index.ts", "../../../app/uikit/components/IconButton/IconButton.tsx", "../../../app/uikit/components/IconButton/index.ts", "../../../node_modules/markdown-to-jsx/index.tsx", "../../../app/uikit/components/Markdown/Markdown.tsx", "../../../app/uikit/components/Markdown/index.ts", "../../../app/uikit/components/Input/Input.tsx", "../../../app/uikit/components/Input/index.ts", "../../../app/uikit/components/RenderBoundary/RenderBoundary.tsx", "../../../app/uikit/components/RenderBoundary/index.ts", "../../../app/uikit/components/TextArea/TextArea.tsx", "../../../app/uikit/components/TextArea/index.ts", "../../../app/uikit/components/FileInput/FileInput.tsx", "../../../app/uikit/components/FileInput/index.ts", "../../../node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs", "../../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs", "../../../node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs", "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs", "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs", "../../../node_modules/@radix-ui/react-use-size/dist/packages/react/use-size/src/index.ts", "../../../node_modules/@radix-ui/react-use-size/dist/packages/react/use-size/src/useSize.tsx", "../../../node_modules/@radix-ui/react-popper/dist/packages/react/popper/src/index.ts", "../../../node_modules/@radix-ui/react-popper/dist/packages/react/popper/src/Popper.tsx", "../../../node_modules/@radix-ui/react-menu/dist/packages/react/menu/src/index.ts", "../../../node_modules/@radix-ui/react-menu/dist/packages/react/menu/src/Menu.tsx", "../../../node_modules/@radix-ui/react-dropdown-menu/dist/packages/react/dropdown-menu/src/index.ts", "../../../node_modules/@radix-ui/react-dropdown-menu/dist/packages/react/dropdown-menu/src/DropdownMenu.tsx", "../../../app/uikit/components/Dropdown/Dropdown.tsx", "../../../app/uikit/components/Dropdown/Portal.tsx", "../../../app/uikit/components/Dropdown/Trigger.tsx", "../../../app/uikit/components/Dropdown/Content.tsx", "../../../app/uikit/components/Dropdown/Item.tsx", "../../../node_modules/@radix-ui/number/dist/packages/core/number/src/index.ts", "../../../node_modules/@radix-ui/number/dist/packages/core/number/src/number.ts", "../../../node_modules/@radix-ui/react-select/dist/packages/react/select/src/index.ts", "../../../node_modules/@radix-ui/react-select/dist/packages/react/select/src/Select.tsx", "../../../node_modules/@radix-ui/react-checkbox/dist/packages/react/checkbox/src/index.ts", "../../../node_modules/@radix-ui/react-checkbox/dist/packages/react/checkbox/src/Checkbox.tsx", "../../../node_modules/@radix-ui/react-slider/dist/packages/react/slider/src/index.ts", "../../../node_modules/@radix-ui/react-slider/dist/packages/react/slider/src/Slider.tsx", "../../../node_modules/@radix-ui/react-toast/dist/packages/react/toast/src/index.ts", "../../../node_modules/@radix-ui/react-toast/dist/packages/react/toast/src/Toast.tsx", "../../../node_modules/@radix-ui/react-alert-dialog/dist/packages/react/alert-dialog/src/index.ts", "../../../node_modules/@radix-ui/react-alert-dialog/dist/packages/react/alert-dialog/src/AlertDialog.tsx", "../../../node_modules/@radix-ui/react-progress/dist/packages/react/progress/src/index.ts", "../../../node_modules/@radix-ui/react-progress/dist/packages/react/progress/src/Progress.tsx", "../../../node_modules/@radix-ui/react-radio-group/dist/packages/react/radio-group/src/index.ts", "../../../node_modules/@radix-ui/react-radio-group/dist/packages/react/radio-group/src/RadioGroup.tsx", "../../../node_modules/@radix-ui/react-radio-group/dist/packages/react/radio-group/src/Radio.tsx"], "sourcesContent": ["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e))for(t=0;t\n validators: ClassValidatorObject[]\n classGroupId?: ClassGroupId\n}\n\ninterface ClassValidatorObject {\n classGroupId: ClassGroupId\n validator: ClassValidator\n}\n\nconst CLASS_PART_SEPARATOR = '-'\n\nexport function createClassUtils(config: Config) {\n const classMap = createClassMap(config)\n const { conflictingClassGroups, conflictingClassGroupModifiers = {} } = config\n\n function getClassGroupId(className: string) {\n const classParts = className.split(CLASS_PART_SEPARATOR)\n\n // Classes like `-inset-1` produce an empty string as first classPart. We assume that classes for negative values are used correctly and remove it from classParts.\n if (classParts[0] === '' && classParts.length !== 1) {\n classParts.shift()\n }\n\n return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className)\n }\n\n function getConflictingClassGroupIds(classGroupId: ClassGroupId, hasPostfixModifier: boolean) {\n const conflicts = conflictingClassGroups[classGroupId] || []\n\n if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {\n return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]!]\n }\n\n return conflicts\n }\n\n return {\n getClassGroupId,\n getConflictingClassGroupIds,\n }\n}\n\nfunction getGroupRecursive(\n classParts: string[],\n classPartObject: ClassPartObject,\n): ClassGroupId | undefined {\n if (classParts.length === 0) {\n return classPartObject.classGroupId\n }\n\n const currentClassPart = classParts[0]!\n const nextClassPartObject = classPartObject.nextPart.get(currentClassPart)\n const classGroupFromNextClassPart = nextClassPartObject\n ? getGroupRecursive(classParts.slice(1), nextClassPartObject)\n : undefined\n\n if (classGroupFromNextClassPart) {\n return classGroupFromNextClassPart\n }\n\n if (classPartObject.validators.length === 0) {\n return undefined\n }\n\n const classRest = classParts.join(CLASS_PART_SEPARATOR)\n\n return classPartObject.validators.find(({ validator }) => validator(classRest))?.classGroupId\n}\n\nconst arbitraryPropertyRegex = /^\\[(.+)\\]$/\n\nfunction getGroupIdForArbitraryProperty(className: string) {\n if (arbitraryPropertyRegex.test(className)) {\n const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)![1]\n const property = arbitraryPropertyClassName?.substring(\n 0,\n arbitraryPropertyClassName.indexOf(':'),\n )\n\n if (property) {\n // I use two dots here because one dot is used as prefix for class groups in plugins\n return 'arbitrary..' + property\n }\n }\n}\n\n/**\n * Exported for testing only\n */\nexport function createClassMap(config: Config) {\n const { theme, prefix } = config\n const classMap: ClassPartObject = {\n nextPart: new Map(),\n validators: [],\n }\n\n const prefixedClassGroupEntries = getPrefixedClassGroupEntries(\n Object.entries(config.classGroups),\n prefix,\n )\n\n prefixedClassGroupEntries.forEach(([classGroupId, classGroup]) => {\n processClassesRecursively(classGroup, classMap, classGroupId, theme)\n })\n\n return classMap\n}\n\nfunction processClassesRecursively(\n classGroup: ClassGroup,\n classPartObject: ClassPartObject,\n classGroupId: ClassGroupId,\n theme: ThemeObject,\n) {\n classGroup.forEach((classDefinition) => {\n if (typeof classDefinition === 'string') {\n const classPartObjectToEdit =\n classDefinition === '' ? classPartObject : getPart(classPartObject, classDefinition)\n classPartObjectToEdit.classGroupId = classGroupId\n return\n }\n\n if (typeof classDefinition === 'function') {\n if (isThemeGetter(classDefinition)) {\n processClassesRecursively(\n classDefinition(theme),\n classPartObject,\n classGroupId,\n theme,\n )\n return\n }\n\n classPartObject.validators.push({\n validator: classDefinition,\n classGroupId,\n })\n\n return\n }\n\n Object.entries(classDefinition).forEach(([key, classGroup]) => {\n processClassesRecursively(\n classGroup,\n getPart(classPartObject, key),\n classGroupId,\n theme,\n )\n })\n })\n}\n\nfunction getPart(classPartObject: ClassPartObject, path: string) {\n let currentClassPartObject = classPartObject\n\n path.split(CLASS_PART_SEPARATOR).forEach((pathPart) => {\n if (!currentClassPartObject.nextPart.has(pathPart)) {\n currentClassPartObject.nextPart.set(pathPart, {\n nextPart: new Map(),\n validators: [],\n })\n }\n\n currentClassPartObject = currentClassPartObject.nextPart.get(pathPart)!\n })\n\n return currentClassPartObject\n}\n\nfunction isThemeGetter(func: ClassValidator | ThemeGetter): func is ThemeGetter {\n return (func as ThemeGetter).isThemeGetter\n}\n\nfunction getPrefixedClassGroupEntries(\n classGroupEntries: Array<[classGroupId: string, classGroup: ClassGroup]>,\n prefix: string | undefined,\n): Array<[classGroupId: string, classGroup: ClassGroup]> {\n if (!prefix) {\n return classGroupEntries\n }\n\n return classGroupEntries.map(([classGroupId, classGroup]) => {\n const prefixedClassGroup = classGroup.map((classDefinition) => {\n if (typeof classDefinition === 'string') {\n return prefix + classDefinition\n }\n\n if (typeof classDefinition === 'object') {\n return Object.fromEntries(\n Object.entries(classDefinition).map(([key, value]) => [prefix + key, value]),\n )\n }\n\n return classDefinition\n })\n\n return [classGroupId, prefixedClassGroup]\n })\n}\n", "// Export is needed because TypeScript complains about an error otherwise:\n// Error: …/tailwind-merge/src/config-utils.ts(8,17): semantic error TS4058: Return type of exported function has or is using name 'LruCache' from external module \"…/tailwind-merge/src/lru-cache\" but cannot be named.\nexport interface LruCache {\n get(key: Key): Value | undefined\n set(key: Key, value: Value): void\n}\n\n// LRU cache inspired from hashlru (https://github.com/dominictarr/hashlru/blob/v1.0.4/index.js) but object replaced with Map to improve performance\nexport function createLruCache(maxCacheSize: number): LruCache {\n if (maxCacheSize < 1) {\n return {\n get: () => undefined,\n set: () => {},\n }\n }\n\n let cacheSize = 0\n let cache = new Map()\n let previousCache = new Map()\n\n function update(key: Key, value: Value) {\n cache.set(key, value)\n cacheSize++\n\n if (cacheSize > maxCacheSize) {\n cacheSize = 0\n previousCache = cache\n cache = new Map()\n }\n }\n\n return {\n get(key) {\n let value = cache.get(key)\n\n if (value !== undefined) {\n return value\n }\n if ((value = previousCache.get(key)) !== undefined) {\n update(key, value)\n return value\n }\n },\n set(key, value) {\n if (cache.has(key)) {\n cache.set(key, value)\n } else {\n update(key, value)\n }\n },\n }\n}\n", "import { Config } from './types'\n\nexport const IMPORTANT_MODIFIER = '!'\n\nexport function createSplitModifiers(config: Config) {\n const separator = config.separator || ':'\n const isSeparatorSingleCharacter = separator.length === 1\n const firstSeparatorCharacter = separator[0]\n const separatorLength = separator.length\n\n // splitModifiers inspired by https://github.com/tailwindlabs/tailwindcss/blob/v3.2.2/src/util/splitAtTopLevelOnly.js\n return function splitModifiers(className: string) {\n const modifiers = []\n\n let bracketDepth = 0\n let modifierStart = 0\n let postfixModifierPosition: number | undefined\n\n for (let index = 0; index < className.length; index++) {\n let currentCharacter = className[index]\n\n if (bracketDepth === 0) {\n if (\n currentCharacter === firstSeparatorCharacter &&\n (isSeparatorSingleCharacter ||\n className.slice(index, index + separatorLength) === separator)\n ) {\n modifiers.push(className.slice(modifierStart, index))\n modifierStart = index + separatorLength\n continue\n }\n\n if (currentCharacter === '/') {\n postfixModifierPosition = index\n continue\n }\n }\n\n if (currentCharacter === '[') {\n bracketDepth++\n } else if (currentCharacter === ']') {\n bracketDepth--\n }\n }\n\n const baseClassNameWithImportantModifier =\n modifiers.length === 0 ? className : className.substring(modifierStart)\n const hasImportantModifier =\n baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER)\n const baseClassName = hasImportantModifier\n ? baseClassNameWithImportantModifier.substring(1)\n : baseClassNameWithImportantModifier\n\n const maybePostfixModifierPosition =\n postfixModifierPosition && postfixModifierPosition > modifierStart\n ? postfixModifierPosition - modifierStart\n : undefined\n\n return {\n modifiers,\n hasImportantModifier,\n baseClassName,\n maybePostfixModifierPosition,\n }\n }\n}\n\n/**\n * Sorts modifiers according to following schema:\n * - Predefined modifiers are sorted alphabetically\n * - When an arbitrary variant appears, it must be preserved which modifiers are before and after it\n */\nexport function sortModifiers(modifiers: string[]) {\n if (modifiers.length <= 1) {\n return modifiers\n }\n\n const sortedModifiers: string[] = []\n let unsortedModifiers: string[] = []\n\n modifiers.forEach((modifier) => {\n const isArbitraryVariant = modifier[0] === '['\n\n if (isArbitraryVariant) {\n sortedModifiers.push(...unsortedModifiers.sort(), modifier)\n unsortedModifiers = []\n } else {\n unsortedModifiers.push(modifier)\n }\n })\n\n sortedModifiers.push(...unsortedModifiers.sort())\n\n return sortedModifiers\n}\n", "import { createClassUtils } from './class-utils'\nimport { createLruCache } from './lru-cache'\nimport { createSplitModifiers } from './modifier-utils'\nimport { Config } from './types'\n\nexport type ConfigUtils = ReturnType\n\nexport function createConfigUtils(config: Config) {\n return {\n cache: createLruCache(config.cacheSize),\n splitModifiers: createSplitModifiers(config),\n ...createClassUtils(config),\n }\n}\n", "import { ConfigUtils } from './config-utils'\nimport { IMPORTANT_MODIFIER, sortModifiers } from './modifier-utils'\n\nconst SPLIT_CLASSES_REGEX = /\\s+/\n\nexport function mergeClassList(classList: string, configUtils: ConfigUtils) {\n const { splitModifiers, getClassGroupId, getConflictingClassGroupIds } = configUtils\n\n /**\n * Set of classGroupIds in following format:\n * `{importantModifier}{variantModifiers}{classGroupId}`\n * @example 'float'\n * @example 'hover:focus:bg-color'\n * @example 'md:!pr'\n */\n const classGroupsInConflict = new Set()\n\n return (\n classList\n .trim()\n .split(SPLIT_CLASSES_REGEX)\n .map((originalClassName) => {\n const {\n modifiers,\n hasImportantModifier,\n baseClassName,\n maybePostfixModifierPosition,\n } = splitModifiers(originalClassName)\n\n let classGroupId = getClassGroupId(\n maybePostfixModifierPosition\n ? baseClassName.substring(0, maybePostfixModifierPosition)\n : baseClassName,\n )\n\n let hasPostfixModifier = Boolean(maybePostfixModifierPosition)\n\n if (!classGroupId) {\n if (!maybePostfixModifierPosition) {\n return {\n isTailwindClass: false as const,\n originalClassName,\n }\n }\n\n classGroupId = getClassGroupId(baseClassName)\n\n if (!classGroupId) {\n return {\n isTailwindClass: false as const,\n originalClassName,\n }\n }\n\n hasPostfixModifier = false\n }\n\n const variantModifier = sortModifiers(modifiers).join(':')\n\n const modifierId = hasImportantModifier\n ? variantModifier + IMPORTANT_MODIFIER\n : variantModifier\n\n return {\n isTailwindClass: true as const,\n modifierId,\n classGroupId,\n originalClassName,\n hasPostfixModifier,\n }\n })\n .reverse()\n // Last class in conflict wins, so we need to filter conflicting classes in reverse order.\n .filter((parsed) => {\n if (!parsed.isTailwindClass) {\n return true\n }\n\n const { modifierId, classGroupId, hasPostfixModifier } = parsed\n\n const classId = modifierId + classGroupId\n\n if (classGroupsInConflict.has(classId)) {\n return false\n }\n\n classGroupsInConflict.add(classId)\n\n getConflictingClassGroupIds(classGroupId, hasPostfixModifier).forEach((group) =>\n classGroupsInConflict.add(modifierId + group),\n )\n\n return true\n })\n .reverse()\n .map((parsed) => parsed.originalClassName)\n .join(' ')\n )\n}\n", "/**\n * The code in this file is copied from https://github.com/lukeed/clsx and modified to suit the needs of tailwind-merge better.\n *\n * Specifically:\n * - Runtime code from https://github.com/lukeed/clsx/blob/v1.2.1/src/index.js\n * - TypeScript types from https://github.com/lukeed/clsx/blob/v1.2.1/clsx.d.ts\n *\n * Original code has MIT license: Copyright (c) Luke Edwards (lukeed.com)\n */\n\nexport type ClassNameValue = ClassNameArray | string | null | undefined | 0 | false\ntype ClassNameArray = ClassNameValue[]\n\nexport function twJoin(...classLists: ClassNameValue[]): string\nexport function twJoin() {\n let index = 0\n let argument: ClassNameValue\n let resolvedValue: string\n let string = ''\n\n while (index < arguments.length) {\n if ((argument = arguments[index++])) {\n if ((resolvedValue = toValue(argument))) {\n string && (string += ' ')\n string += resolvedValue\n }\n }\n }\n return string\n}\n\nfunction toValue(mix: ClassNameArray | string) {\n if (typeof mix === 'string') {\n return mix\n }\n\n let resolvedValue: string\n let string = ''\n\n for (let k = 0; k < mix.length; k++) {\n if (mix[k]) {\n if ((resolvedValue = toValue(mix[k] as ClassNameArray | string))) {\n string && (string += ' ')\n string += resolvedValue\n }\n }\n }\n\n return string\n}\n", "import { createConfigUtils } from './config-utils'\nimport { mergeClassList } from './merge-classlist'\nimport { ClassNameValue, twJoin } from './tw-join'\nimport { Config } from './types'\n\ntype CreateConfigFirst = () => Config\ntype CreateConfigSubsequent = (config: Config) => Config\ntype TailwindMerge = (...classLists: ClassNameValue[]) => string\ntype ConfigUtils = ReturnType\n\nexport function createTailwindMerge(\n ...createConfig: [CreateConfigFirst, ...CreateConfigSubsequent[]]\n): TailwindMerge {\n let configUtils: ConfigUtils\n let cacheGet: ConfigUtils['cache']['get']\n let cacheSet: ConfigUtils['cache']['set']\n let functionToCall = initTailwindMerge\n\n function initTailwindMerge(classList: string) {\n const [firstCreateConfig, ...restCreateConfig] = createConfig\n\n const config = restCreateConfig.reduce(\n (previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig),\n firstCreateConfig(),\n )\n\n configUtils = createConfigUtils(config)\n cacheGet = configUtils.cache.get\n cacheSet = configUtils.cache.set\n functionToCall = tailwindMerge\n\n return tailwindMerge(classList)\n }\n\n function tailwindMerge(classList: string) {\n const cachedResult = cacheGet(classList)\n\n if (cachedResult) {\n return cachedResult\n }\n\n const result = mergeClassList(classList, configUtils)\n cacheSet(classList, result)\n\n return result\n }\n\n return function callTailwindMerge() {\n return functionToCall(twJoin.apply(null, arguments as any))\n }\n}\n", "import { ThemeGetter, ThemeObject } from './types'\n\nexport function fromTheme(key: string): ThemeGetter {\n const themeGetter = (theme: ThemeObject) => theme[key] || []\n\n themeGetter.isThemeGetter = true as const\n\n return themeGetter\n}\n", "const arbitraryValueRegex = /^\\[(?:([a-z-]+):)?(.+)\\]$/i\nconst fractionRegex = /^\\d+\\/\\d+$/\nconst stringLengths = new Set(['px', 'full', 'screen'])\nconst tshirtUnitRegex = /^(\\d+(\\.\\d+)?)?(xs|sm|md|lg|xl)$/\nconst lengthUnitRegex =\n /\\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|^0$/\n// Shadow always begins with x and y offset separated by underscore\nconst shadowRegex = /^-?((\\d+)?\\.?(\\d+)[a-z]+|0)_-?((\\d+)?\\.?(\\d+)[a-z]+|0)/\n\nexport function isLength(value: string) {\n return (\n isNumber(value) ||\n stringLengths.has(value) ||\n fractionRegex.test(value) ||\n isArbitraryLength(value)\n )\n}\n\nexport function isArbitraryLength(value: string) {\n return getIsArbitraryValue(value, 'length', isLengthOnly)\n}\n\nexport function isArbitrarySize(value: string) {\n return getIsArbitraryValue(value, 'size', isNever)\n}\n\nexport function isArbitraryPosition(value: string) {\n return getIsArbitraryValue(value, 'position', isNever)\n}\n\nexport function isArbitraryUrl(value: string) {\n return getIsArbitraryValue(value, 'url', isUrl)\n}\n\nexport function isArbitraryNumber(value: string) {\n return getIsArbitraryValue(value, 'number', isNumber)\n}\n\n/**\n * @deprecated Will be removed in next major version. Use `isArbitraryNumber` instead.\n */\nexport const isArbitraryWeight = isArbitraryNumber\n\nexport function isNumber(value: string) {\n return !Number.isNaN(Number(value))\n}\n\nexport function isPercent(value: string) {\n return value.endsWith('%') && isNumber(value.slice(0, -1))\n}\n\nexport function isInteger(value: string) {\n return isIntegerOnly(value) || getIsArbitraryValue(value, 'number', isIntegerOnly)\n}\n\nexport function isArbitraryValue(value: string) {\n return arbitraryValueRegex.test(value)\n}\n\nexport function isAny() {\n return true\n}\n\nexport function isTshirtSize(value: string) {\n return tshirtUnitRegex.test(value)\n}\n\nexport function isArbitraryShadow(value: string) {\n return getIsArbitraryValue(value, '', isShadow)\n}\n\nfunction getIsArbitraryValue(value: string, label: string, testValue: (value: string) => boolean) {\n const result = arbitraryValueRegex.exec(value)\n\n if (result) {\n if (result[1]) {\n return result[1] === label\n }\n\n return testValue(result[2]!)\n }\n\n return false\n}\n\nfunction isLengthOnly(value: string) {\n return lengthUnitRegex.test(value)\n}\n\nfunction isNever() {\n return false\n}\n\nfunction isUrl(value: string) {\n return value.startsWith('url(')\n}\n\nfunction isIntegerOnly(value: string) {\n return Number.isInteger(Number(value))\n}\n\nfunction isShadow(value: string) {\n return shadowRegex.test(value)\n}\n", "import { fromTheme } from './from-theme'\nimport { Config } from './types'\nimport {\n isAny,\n isArbitraryLength,\n isArbitraryNumber,\n isArbitraryPosition,\n isArbitraryShadow,\n isArbitrarySize,\n isArbitraryUrl,\n isArbitraryValue,\n isInteger,\n isLength,\n isNumber,\n isPercent,\n isTshirtSize,\n} from './validators'\n\nexport function getDefaultConfig() {\n const colors = fromTheme('colors')\n const spacing = fromTheme('spacing')\n const blur = fromTheme('blur')\n const brightness = fromTheme('brightness')\n const borderColor = fromTheme('borderColor')\n const borderRadius = fromTheme('borderRadius')\n const borderSpacing = fromTheme('borderSpacing')\n const borderWidth = fromTheme('borderWidth')\n const contrast = fromTheme('contrast')\n const grayscale = fromTheme('grayscale')\n const hueRotate = fromTheme('hueRotate')\n const invert = fromTheme('invert')\n const gap = fromTheme('gap')\n const gradientColorStops = fromTheme('gradientColorStops')\n const gradientColorStopPositions = fromTheme('gradientColorStopPositions')\n const inset = fromTheme('inset')\n const margin = fromTheme('margin')\n const opacity = fromTheme('opacity')\n const padding = fromTheme('padding')\n const saturate = fromTheme('saturate')\n const scale = fromTheme('scale')\n const sepia = fromTheme('sepia')\n const skew = fromTheme('skew')\n const space = fromTheme('space')\n const translate = fromTheme('translate')\n\n const getOverscroll = () => ['auto', 'contain', 'none'] as const\n const getOverflow = () => ['auto', 'hidden', 'clip', 'visible', 'scroll'] as const\n const getSpacingWithAuto = () => ['auto', spacing] as const\n const getLengthWithEmpty = () => ['', isLength] as const\n const getNumberWithAutoAndArbitrary = () => ['auto', isNumber, isArbitraryValue] as const\n const getPositions = () =>\n [\n 'bottom',\n 'center',\n 'left',\n 'left-bottom',\n 'left-top',\n 'right',\n 'right-bottom',\n 'right-top',\n 'top',\n ] as const\n const getLineStyles = () => ['solid', 'dashed', 'dotted', 'double', 'none'] as const\n const getBlendModes = () =>\n [\n 'normal',\n 'multiply',\n 'screen',\n 'overlay',\n 'darken',\n 'lighten',\n 'color-dodge',\n 'color-burn',\n 'hard-light',\n 'soft-light',\n 'difference',\n 'exclusion',\n 'hue',\n 'saturation',\n 'color',\n 'luminosity',\n 'plus-lighter',\n ] as const\n const getAlign = () =>\n ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch'] as const\n const getZeroAndEmpty = () => ['', '0', isArbitraryValue] as const\n const getBreaks = () =>\n ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'] as const\n const getNumber = () => [isNumber, isArbitraryNumber]\n const getNumberAndArbitrary = () => [isNumber, isArbitraryValue]\n\n return {\n cacheSize: 500,\n theme: {\n colors: [isAny],\n spacing: [isLength],\n blur: ['none', '', isTshirtSize, isArbitraryLength],\n brightness: getNumber(),\n borderColor: [colors],\n borderRadius: ['none', '', 'full', isTshirtSize, isArbitraryLength],\n borderSpacing: [spacing],\n borderWidth: getLengthWithEmpty(),\n contrast: getNumber(),\n grayscale: getZeroAndEmpty(),\n hueRotate: getNumberAndArbitrary(),\n invert: getZeroAndEmpty(),\n gap: [spacing],\n gradientColorStops: [colors],\n gradientColorStopPositions: [isPercent, isArbitraryLength],\n inset: getSpacingWithAuto(),\n margin: getSpacingWithAuto(),\n opacity: getNumber(),\n padding: [spacing],\n saturate: getNumber(),\n scale: getNumber(),\n sepia: getZeroAndEmpty(),\n skew: getNumberAndArbitrary(),\n space: [spacing],\n translate: [spacing],\n },\n classGroups: {\n // Layout\n /**\n * Aspect Ratio\n * @see https://tailwindcss.com/docs/aspect-ratio\n */\n aspect: [{ aspect: ['auto', 'square', 'video', isArbitraryValue] }],\n /**\n * Container\n * @see https://tailwindcss.com/docs/container\n */\n container: ['container'],\n /**\n * Columns\n * @see https://tailwindcss.com/docs/columns\n */\n columns: [{ columns: [isTshirtSize] }],\n /**\n * Break After\n * @see https://tailwindcss.com/docs/break-after\n */\n 'break-after': [{ 'break-after': getBreaks() }],\n /**\n * Break Before\n * @see https://tailwindcss.com/docs/break-before\n */\n 'break-before': [{ 'break-before': getBreaks() }],\n /**\n * Break Inside\n * @see https://tailwindcss.com/docs/break-inside\n */\n 'break-inside': [{ 'break-inside': ['auto', 'avoid', 'avoid-page', 'avoid-column'] }],\n /**\n * Box Decoration Break\n * @see https://tailwindcss.com/docs/box-decoration-break\n */\n 'box-decoration': [{ 'box-decoration': ['slice', 'clone'] }],\n /**\n * Box Sizing\n * @see https://tailwindcss.com/docs/box-sizing\n */\n box: [{ box: ['border', 'content'] }],\n /**\n * Display\n * @see https://tailwindcss.com/docs/display\n */\n display: [\n 'block',\n 'inline-block',\n 'inline',\n 'flex',\n 'inline-flex',\n 'table',\n 'inline-table',\n 'table-caption',\n 'table-cell',\n 'table-column',\n 'table-column-group',\n 'table-footer-group',\n 'table-header-group',\n 'table-row-group',\n 'table-row',\n 'flow-root',\n 'grid',\n 'inline-grid',\n 'contents',\n 'list-item',\n 'hidden',\n ],\n /**\n * Floats\n * @see https://tailwindcss.com/docs/float\n */\n float: [{ float: ['right', 'left', 'none'] }],\n /**\n * Clear\n * @see https://tailwindcss.com/docs/clear\n */\n clear: [{ clear: ['left', 'right', 'both', 'none'] }],\n /**\n * Isolation\n * @see https://tailwindcss.com/docs/isolation\n */\n isolation: ['isolate', 'isolation-auto'],\n /**\n * Object Fit\n * @see https://tailwindcss.com/docs/object-fit\n */\n 'object-fit': [{ object: ['contain', 'cover', 'fill', 'none', 'scale-down'] }],\n /**\n * Object Position\n * @see https://tailwindcss.com/docs/object-position\n */\n 'object-position': [{ object: [...getPositions(), isArbitraryValue] }],\n /**\n * Overflow\n * @see https://tailwindcss.com/docs/overflow\n */\n overflow: [{ overflow: getOverflow() }],\n /**\n * Overflow X\n * @see https://tailwindcss.com/docs/overflow\n */\n 'overflow-x': [{ 'overflow-x': getOverflow() }],\n /**\n * Overflow Y\n * @see https://tailwindcss.com/docs/overflow\n */\n 'overflow-y': [{ 'overflow-y': getOverflow() }],\n /**\n * Overscroll Behavior\n * @see https://tailwindcss.com/docs/overscroll-behavior\n */\n overscroll: [{ overscroll: getOverscroll() }],\n /**\n * Overscroll Behavior X\n * @see https://tailwindcss.com/docs/overscroll-behavior\n */\n 'overscroll-x': [{ 'overscroll-x': getOverscroll() }],\n /**\n * Overscroll Behavior Y\n * @see https://tailwindcss.com/docs/overscroll-behavior\n */\n 'overscroll-y': [{ 'overscroll-y': getOverscroll() }],\n /**\n * Position\n * @see https://tailwindcss.com/docs/position\n */\n position: ['static', 'fixed', 'absolute', 'relative', 'sticky'],\n /**\n * Top / Right / Bottom / Left\n * @see https://tailwindcss.com/docs/top-right-bottom-left\n */\n inset: [{ inset: [inset] }],\n /**\n * Right / Left\n * @see https://tailwindcss.com/docs/top-right-bottom-left\n */\n 'inset-x': [{ 'inset-x': [inset] }],\n /**\n * Top / Bottom\n * @see https://tailwindcss.com/docs/top-right-bottom-left\n */\n 'inset-y': [{ 'inset-y': [inset] }],\n /**\n * Start\n * @see https://tailwindcss.com/docs/top-right-bottom-left\n */\n start: [{ start: [inset] }],\n /**\n * End\n * @see https://tailwindcss.com/docs/top-right-bottom-left\n */\n end: [{ end: [inset] }],\n /**\n * Top\n * @see https://tailwindcss.com/docs/top-right-bottom-left\n */\n top: [{ top: [inset] }],\n /**\n * Right\n * @see https://tailwindcss.com/docs/top-right-bottom-left\n */\n right: [{ right: [inset] }],\n /**\n * Bottom\n * @see https://tailwindcss.com/docs/top-right-bottom-left\n */\n bottom: [{ bottom: [inset] }],\n /**\n * Left\n * @see https://tailwindcss.com/docs/top-right-bottom-left\n */\n left: [{ left: [inset] }],\n /**\n * Visibility\n * @see https://tailwindcss.com/docs/visibility\n */\n visibility: ['visible', 'invisible', 'collapse'],\n /**\n * Z-Index\n * @see https://tailwindcss.com/docs/z-index\n */\n z: [{ z: ['auto', isInteger] }],\n // Flexbox and Grid\n /**\n * Flex Basis\n * @see https://tailwindcss.com/docs/flex-basis\n */\n basis: [{ basis: getSpacingWithAuto() }],\n /**\n * Flex Direction\n * @see https://tailwindcss.com/docs/flex-direction\n */\n 'flex-direction': [{ flex: ['row', 'row-reverse', 'col', 'col-reverse'] }],\n /**\n * Flex Wrap\n * @see https://tailwindcss.com/docs/flex-wrap\n */\n 'flex-wrap': [{ flex: ['wrap', 'wrap-reverse', 'nowrap'] }],\n /**\n * Flex\n * @see https://tailwindcss.com/docs/flex\n */\n flex: [{ flex: ['1', 'auto', 'initial', 'none', isArbitraryValue] }],\n /**\n * Flex Grow\n * @see https://tailwindcss.com/docs/flex-grow\n */\n grow: [{ grow: getZeroAndEmpty() }],\n /**\n * Flex Shrink\n * @see https://tailwindcss.com/docs/flex-shrink\n */\n shrink: [{ shrink: getZeroAndEmpty() }],\n /**\n * Order\n * @see https://tailwindcss.com/docs/order\n */\n order: [{ order: ['first', 'last', 'none', isInteger] }],\n /**\n * Grid Template Columns\n * @see https://tailwindcss.com/docs/grid-template-columns\n */\n 'grid-cols': [{ 'grid-cols': [isAny] }],\n /**\n * Grid Column Start / End\n * @see https://tailwindcss.com/docs/grid-column\n */\n 'col-start-end': [{ col: ['auto', { span: [isInteger] }, isArbitraryValue] }],\n /**\n * Grid Column Start\n * @see https://tailwindcss.com/docs/grid-column\n */\n 'col-start': [{ 'col-start': getNumberWithAutoAndArbitrary() }],\n /**\n * Grid Column End\n * @see https://tailwindcss.com/docs/grid-column\n */\n 'col-end': [{ 'col-end': getNumberWithAutoAndArbitrary() }],\n /**\n * Grid Template Rows\n * @see https://tailwindcss.com/docs/grid-template-rows\n */\n 'grid-rows': [{ 'grid-rows': [isAny] }],\n /**\n * Grid Row Start / End\n * @see https://tailwindcss.com/docs/grid-row\n */\n 'row-start-end': [{ row: ['auto', { span: [isInteger] }, isArbitraryValue] }],\n /**\n * Grid Row Start\n * @see https://tailwindcss.com/docs/grid-row\n */\n 'row-start': [{ 'row-start': getNumberWithAutoAndArbitrary() }],\n /**\n * Grid Row End\n * @see https://tailwindcss.com/docs/grid-row\n */\n 'row-end': [{ 'row-end': getNumberWithAutoAndArbitrary() }],\n /**\n * Grid Auto Flow\n * @see https://tailwindcss.com/docs/grid-auto-flow\n */\n 'grid-flow': [{ 'grid-flow': ['row', 'col', 'dense', 'row-dense', 'col-dense'] }],\n /**\n * Grid Auto Columns\n * @see https://tailwindcss.com/docs/grid-auto-columns\n */\n 'auto-cols': [{ 'auto-cols': ['auto', 'min', 'max', 'fr', isArbitraryValue] }],\n /**\n * Grid Auto Rows\n * @see https://tailwindcss.com/docs/grid-auto-rows\n */\n 'auto-rows': [{ 'auto-rows': ['auto', 'min', 'max', 'fr', isArbitraryValue] }],\n /**\n * Gap\n * @see https://tailwindcss.com/docs/gap\n */\n gap: [{ gap: [gap] }],\n /**\n * Gap X\n * @see https://tailwindcss.com/docs/gap\n */\n 'gap-x': [{ 'gap-x': [gap] }],\n /**\n * Gap Y\n * @see https://tailwindcss.com/docs/gap\n */\n 'gap-y': [{ 'gap-y': [gap] }],\n /**\n * Justify Content\n * @see https://tailwindcss.com/docs/justify-content\n */\n 'justify-content': [{ justify: ['normal', ...getAlign()] }],\n /**\n * Justify Items\n * @see https://tailwindcss.com/docs/justify-items\n */\n 'justify-items': [{ 'justify-items': ['start', 'end', 'center', 'stretch'] }],\n /**\n * Justify Self\n * @see https://tailwindcss.com/docs/justify-self\n */\n 'justify-self': [{ 'justify-self': ['auto', 'start', 'end', 'center', 'stretch'] }],\n /**\n * Align Content\n * @see https://tailwindcss.com/docs/align-content\n */\n 'align-content': [{ content: ['normal', ...getAlign(), 'baseline'] }],\n /**\n * Align Items\n * @see https://tailwindcss.com/docs/align-items\n */\n 'align-items': [{ items: ['start', 'end', 'center', 'baseline', 'stretch'] }],\n /**\n * Align Self\n * @see https://tailwindcss.com/docs/align-self\n */\n 'align-self': [{ self: ['auto', 'start', 'end', 'center', 'stretch', 'baseline'] }],\n /**\n * Place Content\n * @see https://tailwindcss.com/docs/place-content\n */\n 'place-content': [{ 'place-content': [...getAlign(), 'baseline'] }],\n /**\n * Place Items\n * @see https://tailwindcss.com/docs/place-items\n */\n 'place-items': [{ 'place-items': ['start', 'end', 'center', 'baseline', 'stretch'] }],\n /**\n * Place Self\n * @see https://tailwindcss.com/docs/place-self\n */\n 'place-self': [{ 'place-self': ['auto', 'start', 'end', 'center', 'stretch'] }],\n // Spacing\n /**\n * Padding\n * @see https://tailwindcss.com/docs/padding\n */\n p: [{ p: [padding] }],\n /**\n * Padding X\n * @see https://tailwindcss.com/docs/padding\n */\n px: [{ px: [padding] }],\n /**\n * Padding Y\n * @see https://tailwindcss.com/docs/padding\n */\n py: [{ py: [padding] }],\n /**\n * Padding Start\n * @see https://tailwindcss.com/docs/padding\n */\n ps: [{ ps: [padding] }],\n /**\n * Padding End\n * @see https://tailwindcss.com/docs/padding\n */\n pe: [{ pe: [padding] }],\n /**\n * Padding Top\n * @see https://tailwindcss.com/docs/padding\n */\n pt: [{ pt: [padding] }],\n /**\n * Padding Right\n * @see https://tailwindcss.com/docs/padding\n */\n pr: [{ pr: [padding] }],\n /**\n * Padding Bottom\n * @see https://tailwindcss.com/docs/padding\n */\n pb: [{ pb: [padding] }],\n /**\n * Padding Left\n * @see https://tailwindcss.com/docs/padding\n */\n pl: [{ pl: [padding] }],\n /**\n * Margin\n * @see https://tailwindcss.com/docs/margin\n */\n m: [{ m: [margin] }],\n /**\n * Margin X\n * @see https://tailwindcss.com/docs/margin\n */\n mx: [{ mx: [margin] }],\n /**\n * Margin Y\n * @see https://tailwindcss.com/docs/margin\n */\n my: [{ my: [margin] }],\n /**\n * Margin Start\n * @see https://tailwindcss.com/docs/margin\n */\n ms: [{ ms: [margin] }],\n /**\n * Margin End\n * @see https://tailwindcss.com/docs/margin\n */\n me: [{ me: [margin] }],\n /**\n * Margin Top\n * @see https://tailwindcss.com/docs/margin\n */\n mt: [{ mt: [margin] }],\n /**\n * Margin Right\n * @see https://tailwindcss.com/docs/margin\n */\n mr: [{ mr: [margin] }],\n /**\n * Margin Bottom\n * @see https://tailwindcss.com/docs/margin\n */\n mb: [{ mb: [margin] }],\n /**\n * Margin Left\n * @see https://tailwindcss.com/docs/margin\n */\n ml: [{ ml: [margin] }],\n /**\n * Space Between X\n * @see https://tailwindcss.com/docs/space\n */\n 'space-x': [{ 'space-x': [space] }],\n /**\n * Space Between X Reverse\n * @see https://tailwindcss.com/docs/space\n */\n 'space-x-reverse': ['space-x-reverse'],\n /**\n * Space Between Y\n * @see https://tailwindcss.com/docs/space\n */\n 'space-y': [{ 'space-y': [space] }],\n /**\n * Space Between Y Reverse\n * @see https://tailwindcss.com/docs/space\n */\n 'space-y-reverse': ['space-y-reverse'],\n // Sizing\n /**\n * Width\n * @see https://tailwindcss.com/docs/width\n */\n w: [{ w: ['auto', 'min', 'max', 'fit', spacing] }],\n /**\n * Min-Width\n * @see https://tailwindcss.com/docs/min-width\n */\n 'min-w': [{ 'min-w': ['min', 'max', 'fit', isLength] }],\n /**\n * Max-Width\n * @see https://tailwindcss.com/docs/max-width\n */\n 'max-w': [\n {\n 'max-w': [\n '0',\n 'none',\n 'full',\n 'min',\n 'max',\n 'fit',\n 'prose',\n { screen: [isTshirtSize] },\n isTshirtSize,\n isArbitraryLength,\n ],\n },\n ],\n /**\n * Height\n * @see https://tailwindcss.com/docs/height\n */\n h: [{ h: [spacing, 'auto', 'min', 'max', 'fit'] }],\n /**\n * Min-Height\n * @see https://tailwindcss.com/docs/min-height\n */\n 'min-h': [{ 'min-h': ['min', 'max', 'fit', isLength] }],\n /**\n * Max-Height\n * @see https://tailwindcss.com/docs/max-height\n */\n 'max-h': [{ 'max-h': [spacing, 'min', 'max', 'fit'] }],\n // Typography\n /**\n * Font Size\n * @see https://tailwindcss.com/docs/font-size\n */\n 'font-size': [{ text: ['base', isTshirtSize, isArbitraryLength] }],\n /**\n * Font Smoothing\n * @see https://tailwindcss.com/docs/font-smoothing\n */\n 'font-smoothing': ['antialiased', 'subpixel-antialiased'],\n /**\n * Font Style\n * @see https://tailwindcss.com/docs/font-style\n */\n 'font-style': ['italic', 'not-italic'],\n /**\n * Font Weight\n * @see https://tailwindcss.com/docs/font-weight\n */\n 'font-weight': [\n {\n font: [\n 'thin',\n 'extralight',\n 'light',\n 'normal',\n 'medium',\n 'semibold',\n 'bold',\n 'extrabold',\n 'black',\n isArbitraryNumber,\n ],\n },\n ],\n /**\n * Font Family\n * @see https://tailwindcss.com/docs/font-family\n */\n 'font-family': [{ font: [isAny] }],\n /**\n * Font Variant Numeric\n * @see https://tailwindcss.com/docs/font-variant-numeric\n */\n 'fvn-normal': ['normal-nums'],\n /**\n * Font Variant Numeric\n * @see https://tailwindcss.com/docs/font-variant-numeric\n */\n 'fvn-ordinal': ['ordinal'],\n /**\n * Font Variant Numeric\n * @see https://tailwindcss.com/docs/font-variant-numeric\n */\n 'fvn-slashed-zero': ['slashed-zero'],\n /**\n * Font Variant Numeric\n * @see https://tailwindcss.com/docs/font-variant-numeric\n */\n 'fvn-figure': ['lining-nums', 'oldstyle-nums'],\n /**\n * Font Variant Numeric\n * @see https://tailwindcss.com/docs/font-variant-numeric\n */\n 'fvn-spacing': ['proportional-nums', 'tabular-nums'],\n /**\n * Font Variant Numeric\n * @see https://tailwindcss.com/docs/font-variant-numeric\n */\n 'fvn-fraction': ['diagonal-fractions', 'stacked-fractons'],\n /**\n * Letter Spacing\n * @see https://tailwindcss.com/docs/letter-spacing\n */\n tracking: [\n {\n tracking: [\n 'tighter',\n 'tight',\n 'normal',\n 'wide',\n 'wider',\n 'widest',\n isArbitraryLength,\n ],\n },\n ],\n /**\n * Line Clamp\n * @see https://tailwindcss.com/docs/line-clamp\n */\n 'line-clamp': [{ 'line-clamp': ['none', isNumber, isArbitraryNumber] }],\n /**\n * Line Height\n * @see https://tailwindcss.com/docs/line-height\n */\n leading: [\n { leading: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose', isLength] },\n ],\n /**\n * List Style Image\n * @see https://tailwindcss.com/docs/list-style-image\n */\n 'list-image': [{ 'list-image': ['none', isArbitraryValue] }],\n /**\n * List Style Type\n * @see https://tailwindcss.com/docs/list-style-type\n */\n 'list-style-type': [{ list: ['none', 'disc', 'decimal', isArbitraryValue] }],\n /**\n * List Style Position\n * @see https://tailwindcss.com/docs/list-style-position\n */\n 'list-style-position': [{ list: ['inside', 'outside'] }],\n /**\n * Placeholder Color\n * @deprecated since Tailwind CSS v3.0.0\n * @see https://tailwindcss.com/docs/placeholder-color\n */\n 'placeholder-color': [{ placeholder: [colors] }],\n /**\n * Placeholder Opacity\n * @see https://tailwindcss.com/docs/placeholder-opacity\n */\n 'placeholder-opacity': [{ 'placeholder-opacity': [opacity] }],\n /**\n * Text Alignment\n * @see https://tailwindcss.com/docs/text-align\n */\n 'text-alignment': [{ text: ['left', 'center', 'right', 'justify', 'start', 'end'] }],\n /**\n * Text Color\n * @see https://tailwindcss.com/docs/text-color\n */\n 'text-color': [{ text: [colors] }],\n /**\n * Text Opacity\n * @see https://tailwindcss.com/docs/text-opacity\n */\n 'text-opacity': [{ 'text-opacity': [opacity] }],\n /**\n * Text Decoration\n * @see https://tailwindcss.com/docs/text-decoration\n */\n 'text-decoration': ['underline', 'overline', 'line-through', 'no-underline'],\n /**\n * Text Decoration Style\n * @see https://tailwindcss.com/docs/text-decoration-style\n */\n 'text-decoration-style': [{ decoration: [...getLineStyles(), 'wavy'] }],\n /**\n * Text Decoration Thickness\n * @see https://tailwindcss.com/docs/text-decoration-thickness\n */\n 'text-decoration-thickness': [{ decoration: ['auto', 'from-font', isLength] }],\n /**\n * Text Underline Offset\n * @see https://tailwindcss.com/docs/text-underline-offset\n */\n 'underline-offset': [{ 'underline-offset': ['auto', isLength] }],\n /**\n * Text Decoration Color\n * @see https://tailwindcss.com/docs/text-decoration-color\n */\n 'text-decoration-color': [{ decoration: [colors] }],\n /**\n * Text Transform\n * @see https://tailwindcss.com/docs/text-transform\n */\n 'text-transform': ['uppercase', 'lowercase', 'capitalize', 'normal-case'],\n /**\n * Text Overflow\n * @see https://tailwindcss.com/docs/text-overflow\n */\n 'text-overflow': ['truncate', 'text-ellipsis', 'text-clip'],\n /**\n * Text Indent\n * @see https://tailwindcss.com/docs/text-indent\n */\n indent: [{ indent: [spacing] }],\n /**\n * Vertical Alignment\n * @see https://tailwindcss.com/docs/vertical-align\n */\n 'vertical-align': [\n {\n align: [\n 'baseline',\n 'top',\n 'middle',\n 'bottom',\n 'text-top',\n 'text-bottom',\n 'sub',\n 'super',\n isArbitraryLength,\n ],\n },\n ],\n /**\n * Whitespace\n * @see https://tailwindcss.com/docs/whitespace\n */\n whitespace: [\n { whitespace: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'] },\n ],\n /**\n * Word Break\n * @see https://tailwindcss.com/docs/word-break\n */\n break: [{ break: ['normal', 'words', 'all', 'keep'] }],\n /**\n * Hyphens\n * @see https://tailwindcss.com/docs/hyphens\n */\n hyphens: [{ hyphens: ['none', 'manual', 'auto'] }],\n /**\n * Content\n * @see https://tailwindcss.com/docs/content\n */\n content: [{ content: ['none', isArbitraryValue] }],\n // Backgrounds\n /**\n * Background Attachment\n * @see https://tailwindcss.com/docs/background-attachment\n */\n 'bg-attachment': [{ bg: ['fixed', 'local', 'scroll'] }],\n /**\n * Background Clip\n * @see https://tailwindcss.com/docs/background-clip\n */\n 'bg-clip': [{ 'bg-clip': ['border', 'padding', 'content', 'text'] }],\n /**\n * Background Opacity\n * @deprecated since Tailwind CSS v3.0.0\n * @see https://tailwindcss.com/docs/background-opacity\n */\n 'bg-opacity': [{ 'bg-opacity': [opacity] }],\n /**\n * Background Origin\n * @see https://tailwindcss.com/docs/background-origin\n */\n 'bg-origin': [{ 'bg-origin': ['border', 'padding', 'content'] }],\n /**\n * Background Position\n * @see https://tailwindcss.com/docs/background-position\n */\n 'bg-position': [{ bg: [...getPositions(), isArbitraryPosition] }],\n /**\n * Background Repeat\n * @see https://tailwindcss.com/docs/background-repeat\n */\n 'bg-repeat': [{ bg: ['no-repeat', { repeat: ['', 'x', 'y', 'round', 'space'] }] }],\n /**\n * Background Size\n * @see https://tailwindcss.com/docs/background-size\n */\n 'bg-size': [{ bg: ['auto', 'cover', 'contain', isArbitrarySize] }],\n /**\n * Background Image\n * @see https://tailwindcss.com/docs/background-image\n */\n 'bg-image': [\n {\n bg: [\n 'none',\n { 'gradient-to': ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'] },\n isArbitraryUrl,\n ],\n },\n ],\n /**\n * Background Color\n * @see https://tailwindcss.com/docs/background-color\n */\n 'bg-color': [{ bg: [colors] }],\n /**\n * Gradient Color Stops From Position\n * @see https://tailwindcss.com/docs/gradient-color-stops\n */\n 'gradient-from-pos': [{ from: [gradientColorStopPositions] }],\n /**\n * Gradient Color Stops Via Position\n * @see https://tailwindcss.com/docs/gradient-color-stops\n */\n 'gradient-via-pos': [{ via: [gradientColorStopPositions] }],\n /**\n * Gradient Color Stops To Position\n * @see https://tailwindcss.com/docs/gradient-color-stops\n */\n 'gradient-to-pos': [{ to: [gradientColorStopPositions] }],\n /**\n * Gradient Color Stops From\n * @see https://tailwindcss.com/docs/gradient-color-stops\n */\n 'gradient-from': [{ from: [gradientColorStops] }],\n /**\n * Gradient Color Stops Via\n * @see https://tailwindcss.com/docs/gradient-color-stops\n */\n 'gradient-via': [{ via: [gradientColorStops] }],\n /**\n * Gradient Color Stops To\n * @see https://tailwindcss.com/docs/gradient-color-stops\n */\n 'gradient-to': [{ to: [gradientColorStops] }],\n // Borders\n /**\n * Border Radius\n * @see https://tailwindcss.com/docs/border-radius\n */\n rounded: [{ rounded: [borderRadius] }],\n /**\n * Border Radius Start\n * @see https://tailwindcss.com/docs/border-radius\n */\n 'rounded-s': [{ 'rounded-s': [borderRadius] }],\n /**\n * Border Radius End\n * @see https://tailwindcss.com/docs/border-radius\n */\n 'rounded-e': [{ 'rounded-e': [borderRadius] }],\n /**\n * Border Radius Top\n * @see https://tailwindcss.com/docs/border-radius\n */\n 'rounded-t': [{ 'rounded-t': [borderRadius] }],\n /**\n * Border Radius Right\n * @see https://tailwindcss.com/docs/border-radius\n */\n 'rounded-r': [{ 'rounded-r': [borderRadius] }],\n /**\n * Border Radius Bottom\n * @see https://tailwindcss.com/docs/border-radius\n */\n 'rounded-b': [{ 'rounded-b': [borderRadius] }],\n /**\n * Border Radius Left\n * @see https://tailwindcss.com/docs/border-radius\n */\n 'rounded-l': [{ 'rounded-l': [borderRadius] }],\n /**\n * Border Radius Start Start\n * @see https://tailwindcss.com/docs/border-radius\n */\n 'rounded-ss': [{ 'rounded-ss': [borderRadius] }],\n /**\n * Border Radius Start End\n * @see https://tailwindcss.com/docs/border-radius\n */\n 'rounded-se': [{ 'rounded-se': [borderRadius] }],\n /**\n * Border Radius End End\n * @see https://tailwindcss.com/docs/border-radius\n */\n 'rounded-ee': [{ 'rounded-ee': [borderRadius] }],\n /**\n * Border Radius End Start\n * @see https://tailwindcss.com/docs/border-radius\n */\n 'rounded-es': [{ 'rounded-es': [borderRadius] }],\n /**\n * Border Radius Top Left\n * @see https://tailwindcss.com/docs/border-radius\n */\n 'rounded-tl': [{ 'rounded-tl': [borderRadius] }],\n /**\n * Border Radius Top Right\n * @see https://tailwindcss.com/docs/border-radius\n */\n 'rounded-tr': [{ 'rounded-tr': [borderRadius] }],\n /**\n * Border Radius Bottom Right\n * @see https://tailwindcss.com/docs/border-radius\n */\n 'rounded-br': [{ 'rounded-br': [borderRadius] }],\n /**\n * Border Radius Bottom Left\n * @see https://tailwindcss.com/docs/border-radius\n */\n 'rounded-bl': [{ 'rounded-bl': [borderRadius] }],\n /**\n * Border Width\n * @see https://tailwindcss.com/docs/border-width\n */\n 'border-w': [{ border: [borderWidth] }],\n /**\n * Border Width X\n * @see https://tailwindcss.com/docs/border-width\n */\n 'border-w-x': [{ 'border-x': [borderWidth] }],\n /**\n * Border Width Y\n * @see https://tailwindcss.com/docs/border-width\n */\n 'border-w-y': [{ 'border-y': [borderWidth] }],\n /**\n * Border Width Start\n * @see https://tailwindcss.com/docs/border-width\n */\n 'border-w-s': [{ 'border-s': [borderWidth] }],\n /**\n * Border Width End\n * @see https://tailwindcss.com/docs/border-width\n */\n 'border-w-e': [{ 'border-e': [borderWidth] }],\n /**\n * Border Width Top\n * @see https://tailwindcss.com/docs/border-width\n */\n 'border-w-t': [{ 'border-t': [borderWidth] }],\n /**\n * Border Width Right\n * @see https://tailwindcss.com/docs/border-width\n */\n 'border-w-r': [{ 'border-r': [borderWidth] }],\n /**\n * Border Width Bottom\n * @see https://tailwindcss.com/docs/border-width\n */\n 'border-w-b': [{ 'border-b': [borderWidth] }],\n /**\n * Border Width Left\n * @see https://tailwindcss.com/docs/border-width\n */\n 'border-w-l': [{ 'border-l': [borderWidth] }],\n /**\n * Border Opacity\n * @see https://tailwindcss.com/docs/border-opacity\n */\n 'border-opacity': [{ 'border-opacity': [opacity] }],\n /**\n * Border Style\n * @see https://tailwindcss.com/docs/border-style\n */\n 'border-style': [{ border: [...getLineStyles(), 'hidden'] }],\n /**\n * Divide Width X\n * @see https://tailwindcss.com/docs/divide-width\n */\n 'divide-x': [{ 'divide-x': [borderWidth] }],\n /**\n * Divide Width X Reverse\n * @see https://tailwindcss.com/docs/divide-width\n */\n 'divide-x-reverse': ['divide-x-reverse'],\n /**\n * Divide Width Y\n * @see https://tailwindcss.com/docs/divide-width\n */\n 'divide-y': [{ 'divide-y': [borderWidth] }],\n /**\n * Divide Width Y Reverse\n * @see https://tailwindcss.com/docs/divide-width\n */\n 'divide-y-reverse': ['divide-y-reverse'],\n /**\n * Divide Opacity\n * @see https://tailwindcss.com/docs/divide-opacity\n */\n 'divide-opacity': [{ 'divide-opacity': [opacity] }],\n /**\n * Divide Style\n * @see https://tailwindcss.com/docs/divide-style\n */\n 'divide-style': [{ divide: getLineStyles() }],\n /**\n * Border Color\n * @see https://tailwindcss.com/docs/border-color\n */\n 'border-color': [{ border: [borderColor] }],\n /**\n * Border Color X\n * @see https://tailwindcss.com/docs/border-color\n */\n 'border-color-x': [{ 'border-x': [borderColor] }],\n /**\n * Border Color Y\n * @see https://tailwindcss.com/docs/border-color\n */\n 'border-color-y': [{ 'border-y': [borderColor] }],\n /**\n * Border Color Top\n * @see https://tailwindcss.com/docs/border-color\n */\n 'border-color-t': [{ 'border-t': [borderColor] }],\n /**\n * Border Color Right\n * @see https://tailwindcss.com/docs/border-color\n */\n 'border-color-r': [{ 'border-r': [borderColor] }],\n /**\n * Border Color Bottom\n * @see https://tailwindcss.com/docs/border-color\n */\n 'border-color-b': [{ 'border-b': [borderColor] }],\n /**\n * Border Color Left\n * @see https://tailwindcss.com/docs/border-color\n */\n 'border-color-l': [{ 'border-l': [borderColor] }],\n /**\n * Divide Color\n * @see https://tailwindcss.com/docs/divide-color\n */\n 'divide-color': [{ divide: [borderColor] }],\n /**\n * Outline Style\n * @see https://tailwindcss.com/docs/outline-style\n */\n 'outline-style': [{ outline: ['', ...getLineStyles()] }],\n /**\n * Outline Offset\n * @see https://tailwindcss.com/docs/outline-offset\n */\n 'outline-offset': [{ 'outline-offset': [isLength] }],\n /**\n * Outline Width\n * @see https://tailwindcss.com/docs/outline-width\n */\n 'outline-w': [{ outline: [isLength] }],\n /**\n * Outline Color\n * @see https://tailwindcss.com/docs/outline-color\n */\n 'outline-color': [{ outline: [colors] }],\n /**\n * Ring Width\n * @see https://tailwindcss.com/docs/ring-width\n */\n 'ring-w': [{ ring: getLengthWithEmpty() }],\n /**\n * Ring Width Inset\n * @see https://tailwindcss.com/docs/ring-width\n */\n 'ring-w-inset': ['ring-inset'],\n /**\n * Ring Color\n * @see https://tailwindcss.com/docs/ring-color\n */\n 'ring-color': [{ ring: [colors] }],\n /**\n * Ring Opacity\n * @see https://tailwindcss.com/docs/ring-opacity\n */\n 'ring-opacity': [{ 'ring-opacity': [opacity] }],\n /**\n * Ring Offset Width\n * @see https://tailwindcss.com/docs/ring-offset-width\n */\n 'ring-offset-w': [{ 'ring-offset': [isLength] }],\n /**\n * Ring Offset Color\n * @see https://tailwindcss.com/docs/ring-offset-color\n */\n 'ring-offset-color': [{ 'ring-offset': [colors] }],\n // Effects\n /**\n * Box Shadow\n * @see https://tailwindcss.com/docs/box-shadow\n */\n shadow: [{ shadow: ['', 'inner', 'none', isTshirtSize, isArbitraryShadow] }],\n /**\n * Box Shadow Color\n * @see https://tailwindcss.com/docs/box-shadow-color\n */\n 'shadow-color': [{ shadow: [isAny] }],\n /**\n * Opacity\n * @see https://tailwindcss.com/docs/opacity\n */\n opacity: [{ opacity: [opacity] }],\n /**\n * Mix Blend Mode\n * @see https://tailwindcss.com/docs/mix-blend-mode\n */\n 'mix-blend': [{ 'mix-blend': getBlendModes() }],\n /**\n * Background Blend Mode\n * @see https://tailwindcss.com/docs/background-blend-mode\n */\n 'bg-blend': [{ 'bg-blend': getBlendModes() }],\n // Filters\n /**\n * Filter\n * @deprecated since Tailwind CSS v3.0.0\n * @see https://tailwindcss.com/docs/filter\n */\n filter: [{ filter: ['', 'none'] }],\n /**\n * Blur\n * @see https://tailwindcss.com/docs/blur\n */\n blur: [{ blur: [blur] }],\n /**\n * Brightness\n * @see https://tailwindcss.com/docs/brightness\n */\n brightness: [{ brightness: [brightness] }],\n /**\n * Contrast\n * @see https://tailwindcss.com/docs/contrast\n */\n contrast: [{ contrast: [contrast] }],\n /**\n * Drop Shadow\n * @see https://tailwindcss.com/docs/drop-shadow\n */\n 'drop-shadow': [{ 'drop-shadow': ['', 'none', isTshirtSize, isArbitraryValue] }],\n /**\n * Grayscale\n * @see https://tailwindcss.com/docs/grayscale\n */\n grayscale: [{ grayscale: [grayscale] }],\n /**\n * Hue Rotate\n * @see https://tailwindcss.com/docs/hue-rotate\n */\n 'hue-rotate': [{ 'hue-rotate': [hueRotate] }],\n /**\n * Invert\n * @see https://tailwindcss.com/docs/invert\n */\n invert: [{ invert: [invert] }],\n /**\n * Saturate\n * @see https://tailwindcss.com/docs/saturate\n */\n saturate: [{ saturate: [saturate] }],\n /**\n * Sepia\n * @see https://tailwindcss.com/docs/sepia\n */\n sepia: [{ sepia: [sepia] }],\n /**\n * Backdrop Filter\n * @deprecated since Tailwind CSS v3.0.0\n * @see https://tailwindcss.com/docs/backdrop-filter\n */\n 'backdrop-filter': [{ 'backdrop-filter': ['', 'none'] }],\n /**\n * Backdrop Blur\n * @see https://tailwindcss.com/docs/backdrop-blur\n */\n 'backdrop-blur': [{ 'backdrop-blur': [blur] }],\n /**\n * Backdrop Brightness\n * @see https://tailwindcss.com/docs/backdrop-brightness\n */\n 'backdrop-brightness': [{ 'backdrop-brightness': [brightness] }],\n /**\n * Backdrop Contrast\n * @see https://tailwindcss.com/docs/backdrop-contrast\n */\n 'backdrop-contrast': [{ 'backdrop-contrast': [contrast] }],\n /**\n * Backdrop Grayscale\n * @see https://tailwindcss.com/docs/backdrop-grayscale\n */\n 'backdrop-grayscale': [{ 'backdrop-grayscale': [grayscale] }],\n /**\n * Backdrop Hue Rotate\n * @see https://tailwindcss.com/docs/backdrop-hue-rotate\n */\n 'backdrop-hue-rotate': [{ 'backdrop-hue-rotate': [hueRotate] }],\n /**\n * Backdrop Invert\n * @see https://tailwindcss.com/docs/backdrop-invert\n */\n 'backdrop-invert': [{ 'backdrop-invert': [invert] }],\n /**\n * Backdrop Opacity\n * @see https://tailwindcss.com/docs/backdrop-opacity\n */\n 'backdrop-opacity': [{ 'backdrop-opacity': [opacity] }],\n /**\n * Backdrop Saturate\n * @see https://tailwindcss.com/docs/backdrop-saturate\n */\n 'backdrop-saturate': [{ 'backdrop-saturate': [saturate] }],\n /**\n * Backdrop Sepia\n * @see https://tailwindcss.com/docs/backdrop-sepia\n */\n 'backdrop-sepia': [{ 'backdrop-sepia': [sepia] }],\n // Tables\n /**\n * Border Collapse\n * @see https://tailwindcss.com/docs/border-collapse\n */\n 'border-collapse': [{ border: ['collapse', 'separate'] }],\n /**\n * Border Spacing\n * @see https://tailwindcss.com/docs/border-spacing\n */\n 'border-spacing': [{ 'border-spacing': [borderSpacing] }],\n /**\n * Border Spacing X\n * @see https://tailwindcss.com/docs/border-spacing\n */\n 'border-spacing-x': [{ 'border-spacing-x': [borderSpacing] }],\n /**\n * Border Spacing Y\n * @see https://tailwindcss.com/docs/border-spacing\n */\n 'border-spacing-y': [{ 'border-spacing-y': [borderSpacing] }],\n /**\n * Table Layout\n * @see https://tailwindcss.com/docs/table-layout\n */\n 'table-layout': [{ table: ['auto', 'fixed'] }],\n /**\n * Caption Side\n * @see https://tailwindcss.com/docs/caption-side\n */\n caption: [{ caption: ['top', 'bottom'] }],\n // Transitions and Animation\n /**\n * Tranisition Property\n * @see https://tailwindcss.com/docs/transition-property\n */\n transition: [\n {\n transition: [\n 'none',\n 'all',\n '',\n 'colors',\n 'opacity',\n 'shadow',\n 'transform',\n isArbitraryValue,\n ],\n },\n ],\n /**\n * Transition Duration\n * @see https://tailwindcss.com/docs/transition-duration\n */\n duration: [{ duration: getNumberAndArbitrary() }],\n /**\n * Transition Timing Function\n * @see https://tailwindcss.com/docs/transition-timing-function\n */\n ease: [{ ease: ['linear', 'in', 'out', 'in-out', isArbitraryValue] }],\n /**\n * Transition Delay\n * @see https://tailwindcss.com/docs/transition-delay\n */\n delay: [{ delay: getNumberAndArbitrary() }],\n /**\n * Animation\n * @see https://tailwindcss.com/docs/animation\n */\n animate: [{ animate: ['none', 'spin', 'ping', 'pulse', 'bounce', isArbitraryValue] }],\n // Transforms\n /**\n * Transform\n * @see https://tailwindcss.com/docs/transform\n */\n transform: [{ transform: ['', 'gpu', 'none'] }],\n /**\n * Scale\n * @see https://tailwindcss.com/docs/scale\n */\n scale: [{ scale: [scale] }],\n /**\n * Scale X\n * @see https://tailwindcss.com/docs/scale\n */\n 'scale-x': [{ 'scale-x': [scale] }],\n /**\n * Scale Y\n * @see https://tailwindcss.com/docs/scale\n */\n 'scale-y': [{ 'scale-y': [scale] }],\n /**\n * Rotate\n * @see https://tailwindcss.com/docs/rotate\n */\n rotate: [{ rotate: [isInteger, isArbitraryValue] }],\n /**\n * Translate X\n * @see https://tailwindcss.com/docs/translate\n */\n 'translate-x': [{ 'translate-x': [translate] }],\n /**\n * Translate Y\n * @see https://tailwindcss.com/docs/translate\n */\n 'translate-y': [{ 'translate-y': [translate] }],\n /**\n * Skew X\n * @see https://tailwindcss.com/docs/skew\n */\n 'skew-x': [{ 'skew-x': [skew] }],\n /**\n * Skew Y\n * @see https://tailwindcss.com/docs/skew\n */\n 'skew-y': [{ 'skew-y': [skew] }],\n /**\n * Transform Origin\n * @see https://tailwindcss.com/docs/transform-origin\n */\n 'transform-origin': [\n {\n origin: [\n 'center',\n 'top',\n 'top-right',\n 'right',\n 'bottom-right',\n 'bottom',\n 'bottom-left',\n 'left',\n 'top-left',\n isArbitraryValue,\n ],\n },\n ],\n // Interactivity\n /**\n * Accent Color\n * @see https://tailwindcss.com/docs/accent-color\n */\n accent: [{ accent: ['auto', colors] }],\n /**\n * Appearance\n * @see https://tailwindcss.com/docs/appearance\n */\n appearance: ['appearance-none'],\n /**\n * Cursor\n * @see https://tailwindcss.com/docs/cursor\n */\n cursor: [\n {\n cursor: [\n 'auto',\n 'default',\n 'pointer',\n 'wait',\n 'text',\n 'move',\n 'help',\n 'not-allowed',\n 'none',\n 'context-menu',\n 'progress',\n 'cell',\n 'crosshair',\n 'vertical-text',\n 'alias',\n 'copy',\n 'no-drop',\n 'grab',\n 'grabbing',\n 'all-scroll',\n 'col-resize',\n 'row-resize',\n 'n-resize',\n 'e-resize',\n 's-resize',\n 'w-resize',\n 'ne-resize',\n 'nw-resize',\n 'se-resize',\n 'sw-resize',\n 'ew-resize',\n 'ns-resize',\n 'nesw-resize',\n 'nwse-resize',\n 'zoom-in',\n 'zoom-out',\n isArbitraryValue,\n ],\n },\n ],\n /**\n * Caret Color\n * @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities\n */\n 'caret-color': [{ caret: [colors] }],\n /**\n * Pointer Events\n * @see https://tailwindcss.com/docs/pointer-events\n */\n 'pointer-events': [{ 'pointer-events': ['none', 'auto'] }],\n /**\n * Resize\n * @see https://tailwindcss.com/docs/resize\n */\n resize: [{ resize: ['none', 'y', 'x', ''] }],\n /**\n * Scroll Behavior\n * @see https://tailwindcss.com/docs/scroll-behavior\n */\n 'scroll-behavior': [{ scroll: ['auto', 'smooth'] }],\n /**\n * Scroll Margin\n * @see https://tailwindcss.com/docs/scroll-margin\n */\n 'scroll-m': [{ 'scroll-m': [spacing] }],\n /**\n * Scroll Margin X\n * @see https://tailwindcss.com/docs/scroll-margin\n */\n 'scroll-mx': [{ 'scroll-mx': [spacing] }],\n /**\n * Scroll Margin Y\n * @see https://tailwindcss.com/docs/scroll-margin\n */\n 'scroll-my': [{ 'scroll-my': [spacing] }],\n /**\n * Scroll Margin Start\n * @see https://tailwindcss.com/docs/scroll-margin\n */\n 'scroll-ms': [{ 'scroll-ms': [spacing] }],\n /**\n * Scroll Margin End\n * @see https://tailwindcss.com/docs/scroll-margin\n */\n 'scroll-me': [{ 'scroll-me': [spacing] }],\n /**\n * Scroll Margin Top\n * @see https://tailwindcss.com/docs/scroll-margin\n */\n 'scroll-mt': [{ 'scroll-mt': [spacing] }],\n /**\n * Scroll Margin Right\n * @see https://tailwindcss.com/docs/scroll-margin\n */\n 'scroll-mr': [{ 'scroll-mr': [spacing] }],\n /**\n * Scroll Margin Bottom\n * @see https://tailwindcss.com/docs/scroll-margin\n */\n 'scroll-mb': [{ 'scroll-mb': [spacing] }],\n /**\n * Scroll Margin Left\n * @see https://tailwindcss.com/docs/scroll-margin\n */\n 'scroll-ml': [{ 'scroll-ml': [spacing] }],\n /**\n * Scroll Padding\n * @see https://tailwindcss.com/docs/scroll-padding\n */\n 'scroll-p': [{ 'scroll-p': [spacing] }],\n /**\n * Scroll Padding X\n * @see https://tailwindcss.com/docs/scroll-padding\n */\n 'scroll-px': [{ 'scroll-px': [spacing] }],\n /**\n * Scroll Padding Y\n * @see https://tailwindcss.com/docs/scroll-padding\n */\n 'scroll-py': [{ 'scroll-py': [spacing] }],\n /**\n * Scroll Padding Start\n * @see https://tailwindcss.com/docs/scroll-padding\n */\n 'scroll-ps': [{ 'scroll-ps': [spacing] }],\n /**\n * Scroll Padding End\n * @see https://tailwindcss.com/docs/scroll-padding\n */\n 'scroll-pe': [{ 'scroll-pe': [spacing] }],\n /**\n * Scroll Padding Top\n * @see https://tailwindcss.com/docs/scroll-padding\n */\n 'scroll-pt': [{ 'scroll-pt': [spacing] }],\n /**\n * Scroll Padding Right\n * @see https://tailwindcss.com/docs/scroll-padding\n */\n 'scroll-pr': [{ 'scroll-pr': [spacing] }],\n /**\n * Scroll Padding Bottom\n * @see https://tailwindcss.com/docs/scroll-padding\n */\n 'scroll-pb': [{ 'scroll-pb': [spacing] }],\n /**\n * Scroll Padding Left\n * @see https://tailwindcss.com/docs/scroll-padding\n */\n 'scroll-pl': [{ 'scroll-pl': [spacing] }],\n /**\n * Scroll Snap Align\n * @see https://tailwindcss.com/docs/scroll-snap-align\n */\n 'snap-align': [{ snap: ['start', 'end', 'center', 'align-none'] }],\n /**\n * Scroll Snap Stop\n * @see https://tailwindcss.com/docs/scroll-snap-stop\n */\n 'snap-stop': [{ snap: ['normal', 'always'] }],\n /**\n * Scroll Snap Type\n * @see https://tailwindcss.com/docs/scroll-snap-type\n */\n 'snap-type': [{ snap: ['none', 'x', 'y', 'both'] }],\n /**\n * Scroll Snap Type Strictness\n * @see https://tailwindcss.com/docs/scroll-snap-type\n */\n 'snap-strictness': [{ snap: ['mandatory', 'proximity'] }],\n /**\n * Touch Action\n * @see https://tailwindcss.com/docs/touch-action\n */\n touch: [\n {\n touch: [\n 'auto',\n 'none',\n 'pinch-zoom',\n 'manipulation',\n { pan: ['x', 'left', 'right', 'y', 'up', 'down'] },\n ],\n },\n ],\n /**\n * User Select\n * @see https://tailwindcss.com/docs/user-select\n */\n select: [{ select: ['none', 'text', 'all', 'auto'] }],\n /**\n * Will Change\n * @see https://tailwindcss.com/docs/will-change\n */\n 'will-change': [\n { 'will-change': ['auto', 'scroll', 'contents', 'transform', isArbitraryValue] },\n ],\n // SVG\n /**\n * Fill\n * @see https://tailwindcss.com/docs/fill\n */\n fill: [{ fill: [colors, 'none'] }],\n /**\n * Stroke Width\n * @see https://tailwindcss.com/docs/stroke-width\n */\n 'stroke-w': [{ stroke: [isLength, isArbitraryNumber] }],\n /**\n * Stroke\n * @see https://tailwindcss.com/docs/stroke\n */\n stroke: [{ stroke: [colors, 'none'] }],\n // Accessibility\n /**\n * Screen Readers\n * @see https://tailwindcss.com/docs/screen-readers\n */\n sr: ['sr-only', 'not-sr-only'],\n },\n conflictingClassGroups: {\n overflow: ['overflow-x', 'overflow-y'],\n overscroll: ['overscroll-x', 'overscroll-y'],\n inset: ['inset-x', 'inset-y', 'start', 'end', 'top', 'right', 'bottom', 'left'],\n 'inset-x': ['right', 'left'],\n 'inset-y': ['top', 'bottom'],\n flex: ['basis', 'grow', 'shrink'],\n gap: ['gap-x', 'gap-y'],\n p: ['px', 'py', 'ps', 'pe', 'pt', 'pr', 'pb', 'pl'],\n px: ['pr', 'pl'],\n py: ['pt', 'pb'],\n m: ['mx', 'my', 'ms', 'me', 'mt', 'mr', 'mb', 'ml'],\n mx: ['mr', 'ml'],\n my: ['mt', 'mb'],\n 'font-size': ['leading'],\n 'fvn-normal': [\n 'fvn-ordinal',\n 'fvn-slashed-zero',\n 'fvn-figure',\n 'fvn-spacing',\n 'fvn-fraction',\n ],\n 'fvn-ordinal': ['fvn-normal'],\n 'fvn-slashed-zero': ['fvn-normal'],\n 'fvn-figure': ['fvn-normal'],\n 'fvn-spacing': ['fvn-normal'],\n 'fvn-fraction': ['fvn-normal'],\n rounded: [\n 'rounded-s',\n 'rounded-e',\n 'rounded-t',\n 'rounded-r',\n 'rounded-b',\n 'rounded-l',\n 'rounded-ss',\n 'rounded-se',\n 'rounded-ee',\n 'rounded-es',\n 'rounded-tl',\n 'rounded-tr',\n 'rounded-br',\n 'rounded-bl',\n ],\n 'rounded-s': ['rounded-ss', 'rounded-es'],\n 'rounded-e': ['rounded-se', 'rounded-ee'],\n 'rounded-t': ['rounded-tl', 'rounded-tr'],\n 'rounded-r': ['rounded-tr', 'rounded-br'],\n 'rounded-b': ['rounded-br', 'rounded-bl'],\n 'rounded-l': ['rounded-tl', 'rounded-bl'],\n 'border-spacing': ['border-spacing-x', 'border-spacing-y'],\n 'border-w': [\n 'border-w-s',\n 'border-w-e',\n 'border-w-t',\n 'border-w-r',\n 'border-w-b',\n 'border-w-l',\n ],\n 'border-w-x': ['border-w-r', 'border-w-l'],\n 'border-w-y': ['border-w-t', 'border-w-b'],\n 'border-color': [\n 'border-color-t',\n 'border-color-r',\n 'border-color-b',\n 'border-color-l',\n ],\n 'border-color-x': ['border-color-r', 'border-color-l'],\n 'border-color-y': ['border-color-t', 'border-color-b'],\n 'scroll-m': [\n 'scroll-mx',\n 'scroll-my',\n 'scroll-ms',\n 'scroll-me',\n 'scroll-mt',\n 'scroll-mr',\n 'scroll-mb',\n 'scroll-ml',\n ],\n 'scroll-mx': ['scroll-mr', 'scroll-ml'],\n 'scroll-my': ['scroll-mt', 'scroll-mb'],\n 'scroll-p': [\n 'scroll-px',\n 'scroll-py',\n 'scroll-ps',\n 'scroll-pe',\n 'scroll-pt',\n 'scroll-pr',\n 'scroll-pb',\n 'scroll-pl',\n ],\n 'scroll-px': ['scroll-pr', 'scroll-pl'],\n 'scroll-py': ['scroll-pt', 'scroll-pb'],\n },\n conflictingClassGroupModifiers: {\n 'font-size': ['leading'],\n },\n } as const satisfies Config\n}\n", "import { createTailwindMerge } from './create-tailwind-merge'\nimport { getDefaultConfig } from './default-config'\n\nexport const twMerge = createTailwindMerge(getDefaultConfig)\n", "import { forwardRef, type ForwardRefRenderFunction } from 'react';\nimport { useTypographyClassName } from '~/uikit/hooks';\n\nimport type { TypographyVariant } from '~/uikit/theme';\nimport type { TypographyProps } from './Typography.types';\n\n\nconst headings = new Set([\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'h6',\n]);\n\nconst paragraphs = new Set([\n 'body1',\n 'body2',\n 'body3',\n 'body4',\n 'body5',\n 'body6',\n]);\n\nconst getComponent = (\n variant?: TypographyVariant\n): keyof JSX.IntrinsicElements => {\n let component = 'div';\n\n if (variant) {\n component = headings.has(variant)\n ? variant\n : paragraphs.has(variant)\n ? 'p'\n : component;\n }\n\n return component as keyof JSX.IntrinsicElements;\n};\n\nconst Typography: ForwardRefRenderFunction = (\n { variant, children, className, style, ...props },\n ref\n) => {\n const Component = getComponent(variant);\n const classes = useTypographyClassName(variant, className);\n return (\n // @ts-ignore\n \n {children}\n \n );\n};\n\nTypography.displayName = 'Typography';\n\nexport default forwardRef(Typography);\n", "import { twMerge } from 'tailwind-merge';\n\nimport type { TypographyVariant } from '~/uikit/theme';\n\n// TODO: Move this to theme file and make it configurable so that we don't have to\n// rewrite it for every new app.\nconst variantClasses: Record = {\n // HTML headings\n h1: 'text-h1',\n h2: 'text-h2',\n h3: 'text-h3',\n h4: 'text-h4',\n h5: 'text-h5',\n h6: 'text-h6',\n\n // Text looks like heading but not heading `div`\n h7: 'text-h7',\n h8: 'text-h8',\n h9: 'text-h9',\n\n // Paragraphs `p`\n body1: 'text-body1',\n body2: 'text-body2',\n body3: 'text-body3',\n body4: 'text-body4',\n body5: 'text-body5',\n body6: 'text-body5',\n\n // Any text `div`\n subtext1: 'text-subtext1',\n subtext2: 'text-subtext2',\n subtext3: 'text-subtext3',\n subtext4: 'text-subtext4',\n subtext5: 'text-subtext5',\n subtext6: 'text-subtext6',\n\n // Button texts\n\n button1: 'text-button1',\n button2: 'text-button2',\n button3: 'text-button3',\n button4: 'text-button4',\n};\n\nconst useTypographyClassName = (\n variant?: TypographyVariant,\n className?: string\n) => {\n // TODO: Memoize it when it grows in size.\n const variantClass = variantClasses[variant ?? 'body2'];\n const classes = twMerge('text-black', variantClass, className);\n return classes;\n};\n\nexport { useTypographyClassName };\n", "import clsx from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nimport type { Optional } from '~/typings/utils';\nimport type { ButtonSize, ButtonVariant } from '~/uikit/theme';\n\n// TODO: Move this to theme file and make it configurable so that we don't have to\n// rewrite it for every new app.\nconst variantClasses: Record = {\n solid: 'bg-black text-white border-black',\n outline: 'bg-transparent border-black',\n ghost: 'bg-transparent border-transparent',\n};\n\nconst sizeClasses: Record = {\n lg: 'text-button1 text-lg gap-2 h-14 min-w-14 p-3',\n md: 'text-button2 text-sm gap-2 h-12 min-w-12 px-3',\n sm: 'text-button3 text-sm gap-1 h-10 min-w-10 p-2',\n xs: 'text-button4 text-xs gap-1 h-8 min-w-8 p-1.5',\n};\n\nconst useButtonClasses = (\n {\n variant,\n size,\n }: {\n variant: ButtonVariant;\n size: ButtonSize;\n },\n ...classNames: Optional[]\n) => {\n const commonClasses = clsx(\n 'border-1',\n 'flex items-center justify-center',\n 'font-Lato font-bold',\n 'disabled:opacity-40'\n );\n return twMerge(\n commonClasses,\n `${sizeClasses[size]} ${variantClasses[variant]}`,\n ...classNames\n );\n};\n\nexport { useButtonClasses };\n", "import { twMerge } from 'tailwind-merge';\n\nimport type { Optional } from '~/typings/utils';\nimport type { IconSize } from '~/uikit/theme';\n\n// TODO: Move this to theme file and make it configurable so that we don't have to\n// rewrite it for every new app.\nconst sizeClasses: Record = {\n '2xs': 'w-3 h-3',\n xs: 'w-4 h-4',\n sm: 'w-5 h-5',\n md: 'w-6 h-6',\n lg: 'w-8 h-8',\n xl: 'w-10 h-10',\n '2xl': 'w-12 h-12',\n};\n\nconst useIconClasses = (\n {\n size,\n color,\n }: {\n size?: IconSize;\n color?: string;\n },\n ...classNames: Optional[]\n) => {\n const sizeClass = size ? sizeClasses[size] : sizeClasses.md;\n const fontColor = color ? `text-${color}` : '';\n return twMerge(sizeClass, fontColor, ...classNames);\n};\n\nexport { useIconClasses };\n", "import clsx from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nimport type { InputSize } from '~/uikit/theme';\n\nconst sizeClasses: Record> = {\n container: {\n sm: 'py-2 px-3',\n md: 'py-[11px] px-4',\n },\n input: {\n sm: 'text-sm',\n md: 'text-base',\n },\n};\n\nconst invalidClasses = {\n container: 'border-red-900',\n};\n\nconst commonClasses = {\n container: clsx(\n 'flex items-center',\n 'border border-gray-900 hover:border-black focus:border-black active:border-black'\n ),\n input: clsx(\n 'font-Lato font-regular',\n 'grow',\n 'outline-none',\n 'bg-transparent',\n 'disabled:text-gray-900'\n ),\n};\n\nconst useInputClasses = ({\n size,\n invalid,\n}: {\n invalid?: boolean;\n size: InputSize;\n}) => {\n const input = twMerge(\n commonClasses.input,\n sizeClasses.input[size],\n invalid && invalidClasses.container\n );\n const container = twMerge(\n commonClasses.container,\n sizeClasses.container[size]\n );\n\n return { input, container } as const;\n};\n\nexport { useInputClasses };\n", "import Typography from './Typography';\n\nexport default Typography;\n\nexport type {\n TypographyProps,\n TypographyVariant,\n TypographyRefType,\n} from './Typography.types';\n", "import { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BoxProps } from './Box.types';\n\nconst Box: ForwardRefRenderFunction = (\n props,\n ref\n) =>
;\n\nBox.displayName = 'Box';\n\nexport default forwardRef(Box);\n", "import Box from './Box';\n\nexport default Box;\n\nexport type { BoxProps } from './Box.types';\n", "import { useIconClasses } from '~/uikit/hooks';\n\nimport type { FC } from 'react';\nimport type { SpinnerProps } from './Spinner.types';\n\n\nconst Spinner: FC = ({ size, color, className }) => {\n const classes = useIconClasses({ size, color }, 'animate-spin', className);\n\n // TODO: Move svg to sprite sheet when we have a sprite sheet for uikit.\n return (\n \n \n \n );\n};\n\nSpinner.displayName = 'Spinner';\n\nexport default Spinner;\n", "import Spinner from './Spinner';\n\nexport default Spinner;\n", "import clsx from 'clsx';\nimport { forwardRef } from 'react';\nimport Box from '../Box';\nimport Spinner from '../Spinner';\nimport { useButtonClasses } from '~/uikit/hooks';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport type { ButtonProps } from './Button.types';\n\n\nconst getIcons = ({\n size,\n isLoading,\n rightIcon: right = null,\n leftIcon: left = null,\n}: Pick) => {\n if (!isLoading) {\n return { left, right };\n }\n const hasIcons = !!(left || right);\n const spinner = (\n \n );\n\n // we replace left or right icon in case of loading.\n if (right) {\n return { left, right: spinner };\n }\n\n return { left: spinner, right };\n};\n\nconst Button: ForwardRefRenderFunction = (\n {\n variant = 'solid',\n size = 'md',\n className,\n leftIcon = null,\n rightIcon = null,\n children,\n isLoading,\n grow = true,\n ...buttonProps\n },\n ref\n) => {\n const hasIcons = !!(leftIcon || rightIcon);\n const classes = useButtonClasses(\n { variant, size },\n 'relative max-w-full box-border uppercase',\n className\n );\n const { left, right } = getIcons({ size, leftIcon, rightIcon, isLoading });\n const hideContent = isLoading && !hasIcons;\n return (\n \n {isLoading\n ? left\n : left && (\n \n {left}\n \n )}\n {/* \n TODO: Instead of wrapping items in span apply opacity on children using\n React.mapChildren. Because of span it's challenging to truncate text\n or align items as needed.\n */}\n {children ? (\n \n {children}\n \n ) : null}\n {right && (\n {right}\n )}\n \n );\n};\n\nButton.displayName = 'Button';\n\nexport default forwardRef(Button);\n", "import Button from './Button';\n\nexport default Button;\n\nexport type { ButtonProps } from './Button.types';\n", "import { forwardRef, type ForwardRefRenderFunction } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport type { HStackProps } from './HStack.types';\n\nconst HStack: ForwardRefRenderFunction = (\n { className, ...boxProps },\n ref\n) => {\n const classes = twMerge('flex flex-row', className);\n return
;\n};\n\nexport default forwardRef(HStack);\n", "import HStack from './HStack';\n\nexport default HStack;\n", "import { forwardRef, type ForwardRefRenderFunction } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport type { VStackProps } from './VStack.types';\n\nconst VStack: ForwardRefRenderFunction = (\n { className, ...boxProps },\n ref\n) => {\n const dClasses = twMerge('flex flex-col', className);\n return
;\n};\n\nexport default forwardRef(VStack);\n", "import VStack from './VStack';\n\nexport default VStack;\n", "import { forwardRef } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport type { ForwardRefRenderFunction, HTMLAttributes } from 'react';\n\nconst Center: ForwardRefRenderFunction<\n HTMLDivElement,\n HTMLAttributes\n> = ({ className, ...divProps }, ref) => (\n \n);\n\nexport default forwardRef(Center);\n", "import Center from './Center';\n\nexport default Center;\n", "import clsx from 'clsx';\nimport Center from '../Center';\nimport Spinner from '../Spinner';\n\nconst Loader = ({\n className,\n color,\n}: {\n className?: string;\n color?: string;\n}) => (\n
\n \n
\n);\n\nexport default Loader;\n", "function _extends() {\n return _extends = Object.assign ? Object.assign.bind() : function (n) {\n for (var e = 1; e < arguments.length; e++) {\n var t = arguments[e];\n for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);\n }\n return n;\n }, _extends.apply(null, arguments);\n}\nexport { _extends as default };", "export { createContext, createContextScope } from './createContext';\nexport type { CreateScope, Scope } from './createContext';\n", "import * as React from 'react';\n\nfunction createContext(\n rootComponentName: string,\n defaultContext?: ContextValueType\n) {\n const Context = React.createContext(defaultContext);\n\n function Provider(props: ContextValueType & { children: React.ReactNode }) {\n const { children, ...context } = props;\n // Only re-memoize when prop values change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const value = React.useMemo(() => context, Object.values(context)) as ContextValueType;\n return {children};\n }\n\n function useContext(consumerName: string) {\n const context = React.useContext(Context);\n if (context) return context;\n if (defaultContext !== undefined) return defaultContext;\n // if a defaultContext wasn't specified, it's a required context.\n throw new Error(`\\`${consumerName}\\` must be used within \\`${rootComponentName}\\``);\n }\n\n Provider.displayName = rootComponentName + 'Provider';\n return [Provider, useContext] as const;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * createContextScope\n * -----------------------------------------------------------------------------------------------*/\n\ntype Scope = { [scopeName: string]: React.Context[] } | undefined;\ntype ScopeHook = (scope: Scope) => { [__scopeProp: string]: Scope };\ninterface CreateScope {\n scopeName: string;\n (): ScopeHook;\n}\n\nfunction createContextScope(scopeName: string, createContextScopeDeps: CreateScope[] = []) {\n let defaultContexts: any[] = [];\n\n /* -----------------------------------------------------------------------------------------------\n * createContext\n * ---------------------------------------------------------------------------------------------*/\n\n function createContext(\n rootComponentName: string,\n defaultContext?: ContextValueType\n ) {\n const BaseContext = React.createContext(defaultContext);\n const index = defaultContexts.length;\n defaultContexts = [...defaultContexts, defaultContext];\n\n function Provider(\n props: ContextValueType & { scope: Scope; children: React.ReactNode }\n ) {\n const { scope, children, ...context } = props;\n const Context = scope?.[scopeName][index] || BaseContext;\n // Only re-memoize when prop values change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const value = React.useMemo(() => context, Object.values(context)) as ContextValueType;\n return {children};\n }\n\n function useContext(consumerName: string, scope: Scope) {\n const Context = scope?.[scopeName][index] || BaseContext;\n const context = React.useContext(Context);\n if (context) return context;\n if (defaultContext !== undefined) return defaultContext;\n // if a defaultContext wasn't specified, it's a required context.\n throw new Error(`\\`${consumerName}\\` must be used within \\`${rootComponentName}\\``);\n }\n\n Provider.displayName = rootComponentName + 'Provider';\n return [Provider, useContext] as const;\n }\n\n /* -----------------------------------------------------------------------------------------------\n * createScope\n * ---------------------------------------------------------------------------------------------*/\n\n const createScope: CreateScope = () => {\n const scopeContexts = defaultContexts.map((defaultContext) => {\n return React.createContext(defaultContext);\n });\n return function useScope(scope: Scope) {\n const contexts = scope?.[scopeName] || scopeContexts;\n return React.useMemo(\n () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),\n [scope, contexts]\n );\n };\n };\n\n createScope.scopeName = scopeName;\n return [createContext, composeContextScopes(createScope, ...createContextScopeDeps)] as const;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * composeContextScopes\n * -----------------------------------------------------------------------------------------------*/\n\nfunction composeContextScopes(...scopes: CreateScope[]) {\n const baseScope = scopes[0];\n if (scopes.length === 1) return baseScope;\n\n const createScope: CreateScope = () => {\n const scopeHooks = scopes.map((createScope) => ({\n useScope: createScope(),\n scopeName: createScope.scopeName,\n }));\n\n return function useComposedScopes(overrideScopes) {\n const nextScopes = scopeHooks.reduce((nextScopes, { useScope, scopeName }) => {\n // We are calling a hook inside a callback which React warns against to avoid inconsistent\n // renders, however, scoping doesn't have render side effects so we ignore the rule.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const scopeProps = useScope(overrideScopes);\n const currentScope = scopeProps[`__scope${scopeName}`];\n return { ...nextScopes, ...currentScope };\n }, {});\n\n return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);\n };\n };\n\n createScope.scopeName = baseScope.scopeName;\n return createScope;\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport { createContext, createContextScope };\nexport type { CreateScope, Scope };\n", "export { composeEventHandlers } from './primitive';\n", "function composeEventHandlers(\n originalEventHandler?: (event: E) => void,\n ourEventHandler?: (event: E) => void,\n { checkForDefaultPrevented = true } = {}\n) {\n return function handleEvent(event: E) {\n originalEventHandler?.(event);\n\n if (checkForDefaultPrevented === false || !((event as unknown) as Event).defaultPrevented) {\n return ourEventHandler?.(event);\n }\n };\n}\n\nexport { composeEventHandlers };\n", "export { composeRefs, useComposedRefs } from './composeRefs';\n", "import * as React from 'react';\n\ntype PossibleRef = React.Ref | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef(ref: PossibleRef, value: T) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject).current = value;\n }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs(...refs: PossibleRef[]) {\n return (node: T) => refs.forEach((ref) => setRef(ref, node));\n}\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */\nfunction useComposedRefs(...refs: PossibleRef[]) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n", "export {\n Slot,\n Slottable,\n //\n Root,\n} from './Slot';\nexport type { SlotProps } from './Slot';\n", "import * as React from 'react';\nimport { composeRefs } from '@radix-ui/react-compose-refs';\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotProps extends React.HTMLAttributes {\n children?: React.ReactNode;\n}\n\nconst Slot = React.forwardRef((props, forwardedRef) => {\n const { children, ...slotProps } = props;\n const childrenArray = React.Children.toArray(children);\n const slottable = childrenArray.find(isSlottable);\n\n if (slottable) {\n // the new element to render is the one passed as a child of `Slottable`\n const newElement = slottable.props.children as React.ReactNode;\n\n const newChildren = childrenArray.map((child) => {\n if (child === slottable) {\n // because the new element will be the one rendered, we are only interested\n // in grabbing its children (`newElement.props.children`)\n if (React.Children.count(newElement) > 1) return React.Children.only(null);\n return React.isValidElement(newElement)\n ? (newElement.props.children as React.ReactNode)\n : null;\n } else {\n return child;\n }\n });\n\n return (\n \n {React.isValidElement(newElement)\n ? React.cloneElement(newElement, undefined, newChildren)\n : null}\n \n );\n }\n\n return (\n \n {children}\n \n );\n});\n\nSlot.displayName = 'Slot';\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotCloneProps {\n children: React.ReactNode;\n}\n\nconst SlotClone = React.forwardRef((props, forwardedRef) => {\n const { children, ...slotProps } = props;\n\n if (React.isValidElement(children)) {\n return React.cloneElement(children, {\n ...mergeProps(slotProps, children.props),\n ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,\n });\n }\n\n return React.Children.count(children) > 1 ? React.Children.only(null) : null;\n});\n\nSlotClone.displayName = 'SlotClone';\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/\n\nconst Slottable = ({ children }: { children: React.ReactNode }) => {\n return <>{children};\n};\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype AnyProps = Record;\n\nfunction isSlottable(child: React.ReactNode): child is React.ReactElement {\n return React.isValidElement(child) && child.type === Slottable;\n}\n\nfunction mergeProps(slotProps: AnyProps, childProps: AnyProps) {\n // all child props should override\n const overrideProps = { ...childProps };\n\n for (const propName in childProps) {\n const slotPropValue = slotProps[propName];\n const childPropValue = childProps[propName];\n\n const isHandler = /^on[A-Z]/.test(propName);\n if (isHandler) {\n // if the handler exists on both, we compose them\n if (slotPropValue && childPropValue) {\n overrideProps[propName] = (...args: unknown[]) => {\n childPropValue(...args);\n slotPropValue(...args);\n };\n }\n // but if it exists only on the slot, we use only this one\n else if (slotPropValue) {\n overrideProps[propName] = slotPropValue;\n }\n }\n // if it's `style`, we merge them\n else if (propName === 'style') {\n overrideProps[propName] = { ...slotPropValue, ...childPropValue };\n } else if (propName === 'className') {\n overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ');\n }\n }\n\n return { ...slotProps, ...overrideProps };\n}\n\nconst Root = Slot;\n\nexport {\n Slot,\n Slottable,\n //\n Root,\n};\nexport type { SlotProps };\n", "export {\n Primitive,\n //\n Root,\n //\n dispatchDiscreteCustomEvent,\n} from './Primitive';\nexport type { ComponentPropsWithoutRef, PrimitivePropsWithRef } from './Primitive';\n", "import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { Slot } from '@radix-ui/react-slot';\n\nconst NODES = [\n 'a',\n 'button',\n 'div',\n 'form',\n 'h2',\n 'h3',\n 'img',\n 'input',\n 'label',\n 'li',\n 'nav',\n 'ol',\n 'p',\n 'span',\n 'svg',\n 'ul',\n] as const;\n\n// Temporary while we await merge of this fix:\n// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396\n// prettier-ignore\ntype PropsWithoutRef

= P extends any ? ('ref' extends keyof P ? Pick> : P) : P;\ntype ComponentPropsWithoutRef = PropsWithoutRef<\n React.ComponentProps\n>;\n\ntype Primitives = { [E in typeof NODES[number]]: PrimitiveForwardRefComponent };\ntype PrimitivePropsWithRef = React.ComponentPropsWithRef & {\n asChild?: boolean;\n};\n\ninterface PrimitiveForwardRefComponent\n extends React.ForwardRefExoticComponent> {}\n\n/* -------------------------------------------------------------------------------------------------\n * Primitive\n * -----------------------------------------------------------------------------------------------*/\n\nconst Primitive = NODES.reduce((primitive, node) => {\n const Node = React.forwardRef((props: PrimitivePropsWithRef, forwardedRef: any) => {\n const { asChild, ...primitiveProps } = props;\n const Comp: any = asChild ? Slot : node;\n\n React.useEffect(() => {\n (window as any)[Symbol.for('radix-ui')] = true;\n }, []);\n\n return ;\n });\n\n Node.displayName = `Primitive.${node}`;\n\n return { ...primitive, [node]: Node };\n}, {} as Primitives);\n\n/* -------------------------------------------------------------------------------------------------\n * Utils\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * Flush custom event dispatch\n * https://github.com/radix-ui/primitives/pull/1378\n *\n * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.\n *\n * Internally, React prioritises events in the following order:\n * - discrete\n * - continuous\n * - default\n *\n * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350\n *\n * `discrete` is an important distinction as updates within these events are applied immediately.\n * React however, is not able to infer the priority of custom event types due to how they are detected internally.\n * Because of this, it's possible for updates from custom events to be unexpectedly batched when\n * dispatched by another `discrete` event.\n *\n * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.\n * This utility should be used when dispatching a custom event from within another `discrete` event, this utility\n * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.\n * For example:\n *\n * dispatching a known click 👎\n * target.dispatchEvent(new Event(‘click’))\n *\n * dispatching a custom type within a non-discrete event 👎\n * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}\n *\n * dispatching a custom type within a `discrete` event 👍\n * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}\n *\n * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's not recommended to use\n * this utility with them. This is because it's possible for those handlers to be called implicitly during render\n * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.\n */\n\nfunction dispatchDiscreteCustomEvent(target: E['target'], event: E) {\n if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Primitive;\n\nexport {\n Primitive,\n //\n Root,\n //\n dispatchDiscreteCustomEvent,\n};\nexport type { ComponentPropsWithoutRef, PrimitivePropsWithRef };\n", "export { useCallbackRef } from './useCallbackRef';\n", "import * as React from 'react';\n\n/**\n * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a\n * prop or avoid re-executing effects when passed as a dependency\n */\nfunction useCallbackRef any>(callback: T | undefined): T {\n const callbackRef = React.useRef(callback);\n\n React.useEffect(() => {\n callbackRef.current = callback;\n });\n\n // https://github.com/facebook/react/issues/19240\n return React.useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);\n}\n\nexport { useCallbackRef };\n", "export { useControllableState } from './useControllableState';\n", "import * as React from 'react';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\n\ntype UseControllableStateParams = {\n prop?: T | undefined;\n defaultProp?: T | undefined;\n onChange?: (state: T) => void;\n};\n\ntype SetStateFn = (prevState?: T) => T;\n\nfunction useControllableState({\n prop,\n defaultProp,\n onChange = () => {},\n}: UseControllableStateParams) {\n const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });\n const isControlled = prop !== undefined;\n const value = isControlled ? prop : uncontrolledProp;\n const handleChange = useCallbackRef(onChange);\n\n const setValue: React.Dispatch> = React.useCallback(\n (nextValue) => {\n if (isControlled) {\n const setter = nextValue as SetStateFn;\n const value = typeof nextValue === 'function' ? setter(prop) : nextValue;\n if (value !== prop) handleChange(value as T);\n } else {\n setUncontrolledProp(nextValue);\n }\n },\n [isControlled, prop, setUncontrolledProp, handleChange]\n );\n\n return [value, setValue] as const;\n}\n\nfunction useUncontrolledState({\n defaultProp,\n onChange,\n}: Omit, 'prop'>) {\n const uncontrolledState = React.useState(defaultProp);\n const [value] = uncontrolledState;\n const prevValueRef = React.useRef(value);\n const handleChange = useCallbackRef(onChange);\n\n React.useEffect(() => {\n if (prevValueRef.current !== value) {\n handleChange(value as T);\n prevValueRef.current = value;\n }\n }, [value, prevValueRef, handleChange]);\n\n return uncontrolledState;\n}\n\nexport { useControllableState };\n", "export {\n useDirection,\n //\n Provider,\n //\n DirectionProvider,\n} from './Direction';\n", "import * as React from 'react';\n\ntype Direction = 'ltr' | 'rtl';\nconst DirectionContext = React.createContext(undefined);\n\n/* -------------------------------------------------------------------------------------------------\n * Direction\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DirectionProviderProps {\n children?: React.ReactNode;\n dir: Direction;\n}\nconst DirectionProvider: React.FC = (props) => {\n const { dir, children } = props;\n return {children};\n};\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction useDirection(localDir?: Direction) {\n const globalDir = React.useContext(DirectionContext);\n return localDir || globalDir || 'ltr';\n}\n\nconst Provider = DirectionProvider;\n\nexport {\n useDirection,\n //\n Provider,\n //\n DirectionProvider,\n};\n", "export { useLayoutEffect } from './useLayoutEffect';\n", "import * as React from 'react';\n\n/**\n * On the server, React emits a warning when calling `useLayoutEffect`.\n * This is because neither `useLayoutEffect` nor `useEffect` run on the server.\n * We use this safe version which suppresses the warning by replacing it with a noop on the server.\n *\n * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect\n */\nconst useLayoutEffect = Boolean(globalThis?.document) ? React.useLayoutEffect : () => {};\n\nexport { useLayoutEffect };\n", "export { Presence } from './Presence';\nexport type { PresenceProps } from './Presence';\n", "import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useStateMachine } from './useStateMachine';\n\ninterface PresenceProps {\n children: React.ReactElement | ((props: { present: boolean }) => React.ReactElement);\n present: boolean;\n}\n\nconst Presence: React.FC = (props) => {\n const { present, children } = props;\n const presence = usePresence(present);\n\n const child = (\n typeof children === 'function'\n ? children({ present: presence.isPresent })\n : React.Children.only(children)\n ) as React.ReactElement;\n\n const ref = useComposedRefs(presence.ref, (child as any).ref);\n const forceMount = typeof children === 'function';\n return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null;\n};\n\nPresence.displayName = 'Presence';\n\n/* -------------------------------------------------------------------------------------------------\n * usePresence\n * -----------------------------------------------------------------------------------------------*/\n\nfunction usePresence(present: boolean) {\n const [node, setNode] = React.useState();\n const stylesRef = React.useRef({} as any);\n const prevPresentRef = React.useRef(present);\n const prevAnimationNameRef = React.useRef('none');\n const initialState = present ? 'mounted' : 'unmounted';\n const [state, send] = useStateMachine(initialState, {\n mounted: {\n UNMOUNT: 'unmounted',\n ANIMATION_OUT: 'unmountSuspended',\n },\n unmountSuspended: {\n MOUNT: 'mounted',\n ANIMATION_END: 'unmounted',\n },\n unmounted: {\n MOUNT: 'mounted',\n },\n });\n\n React.useEffect(() => {\n const currentAnimationName = getAnimationName(stylesRef.current);\n prevAnimationNameRef.current = state === 'mounted' ? currentAnimationName : 'none';\n }, [state]);\n\n useLayoutEffect(() => {\n const styles = stylesRef.current;\n const wasPresent = prevPresentRef.current;\n const hasPresentChanged = wasPresent !== present;\n\n if (hasPresentChanged) {\n const prevAnimationName = prevAnimationNameRef.current;\n const currentAnimationName = getAnimationName(styles);\n\n if (present) {\n send('MOUNT');\n } else if (currentAnimationName === 'none' || styles?.display === 'none') {\n // If there is no exit animation or the element is hidden, animations won't run\n // so we unmount instantly\n send('UNMOUNT');\n } else {\n /**\n * When `present` changes to `false`, we check changes to animation-name to\n * determine whether an animation has started. We chose this approach (reading\n * computed styles) because there is no `animationrun` event and `animationstart`\n * fires after `animation-delay` has expired which would be too late.\n */\n const isAnimating = prevAnimationName !== currentAnimationName;\n\n if (wasPresent && isAnimating) {\n send('ANIMATION_OUT');\n } else {\n send('UNMOUNT');\n }\n }\n\n prevPresentRef.current = present;\n }\n }, [present, send]);\n\n useLayoutEffect(() => {\n if (node) {\n /**\n * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`\n * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we\n * make sure we only trigger ANIMATION_END for the currently active animation.\n */\n const handleAnimationEnd = (event: AnimationEvent) => {\n const currentAnimationName = getAnimationName(stylesRef.current);\n const isCurrentAnimation = currentAnimationName.includes(event.animationName);\n if (event.target === node && isCurrentAnimation) {\n // With React 18 concurrency this update is applied\n // a frame after the animation ends, creating a flash of visible content.\n // By manually flushing we ensure they sync within a frame, removing the flash.\n ReactDOM.flushSync(() => send('ANIMATION_END'));\n }\n };\n const handleAnimationStart = (event: AnimationEvent) => {\n if (event.target === node) {\n // if animation occurred, store its name as the previous animation.\n prevAnimationNameRef.current = getAnimationName(stylesRef.current);\n }\n };\n node.addEventListener('animationstart', handleAnimationStart);\n node.addEventListener('animationcancel', handleAnimationEnd);\n node.addEventListener('animationend', handleAnimationEnd);\n return () => {\n node.removeEventListener('animationstart', handleAnimationStart);\n node.removeEventListener('animationcancel', handleAnimationEnd);\n node.removeEventListener('animationend', handleAnimationEnd);\n };\n } else {\n // Transition to the unmounted state if the node is removed prematurely.\n // We avoid doing so during cleanup as the node may change but still exist.\n send('ANIMATION_END');\n }\n }, [node, send]);\n\n return {\n isPresent: ['mounted', 'unmountSuspended'].includes(state),\n ref: React.useCallback((node: HTMLElement) => {\n if (node) stylesRef.current = getComputedStyle(node);\n setNode(node);\n }, []),\n };\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getAnimationName(styles?: CSSStyleDeclaration) {\n return styles?.animationName || 'none';\n}\n\nexport { Presence };\nexport type { PresenceProps };\n", "import * as React from 'react';\n\ntype Machine = { [k: string]: { [k: string]: S } };\ntype MachineState = keyof T;\ntype MachineEvent = keyof UnionToIntersection;\n\n// 🤯 https://fettblog.eu/typescript-union-to-intersection/\ntype UnionToIntersection = (T extends any ? (x: T) => any : never) extends (x: infer R) => any\n ? R\n : never;\n\nexport function useStateMachine(\n initialState: MachineState,\n machine: M & Machine>\n) {\n return React.useReducer((state: MachineState, event: MachineEvent): MachineState => {\n const nextState = (machine[state] as any)[event];\n return nextState ?? state;\n }, initialState);\n}\n", "export { useId } from './id';\n", "import * as React from 'react';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\n\n// We `toString()` to prevent bundlers from trying to `import { useId } from 'react';`\nconst useReactId = (React as any)['useId'.toString()] || (() => undefined);\nlet count = 0;\n\nfunction useId(deterministicId?: string): string {\n const [id, setId] = React.useState(useReactId());\n // React versions older than 18 will have client-side ids only.\n useLayoutEffect(() => {\n if (!deterministicId) setId((reactId) => reactId ?? String(count++));\n }, [deterministicId]);\n return deterministicId || (id ? `radix-${id}` : '');\n}\n\nexport { useId };\n", "export { createCollection } from './Collection';\nexport type { CollectionProps } from './Collection';\n", "import React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\ntype SlotProps = Radix.ComponentPropsWithoutRef;\ntype CollectionElement = HTMLElement;\ninterface CollectionProps extends SlotProps {\n scope: any;\n}\n\n// We have resorted to returning slots directly rather than exposing primitives that can then\n// be slotted like ``.\n// This is because we encountered issues with generic types that cannot be statically analysed\n// due to creating them dynamically via createCollection.\n\nfunction createCollection(name: string) {\n /* -----------------------------------------------------------------------------------------------\n * CollectionProvider\n * ---------------------------------------------------------------------------------------------*/\n\n const PROVIDER_NAME = name + 'CollectionProvider';\n const [createCollectionContext, createCollectionScope] = createContextScope(PROVIDER_NAME);\n\n type ContextValue = {\n collectionRef: React.RefObject;\n itemMap: Map, { ref: React.RefObject } & ItemData>;\n };\n\n const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(\n PROVIDER_NAME,\n { collectionRef: { current: null }, itemMap: new Map() }\n );\n\n const CollectionProvider: React.FC<{ children?: React.ReactNode; scope: any }> = (props) => {\n const { scope, children } = props;\n const ref = React.useRef(null);\n const itemMap = React.useRef(new Map()).current;\n return (\n \n {children}\n \n );\n };\n\n CollectionProvider.displayName = PROVIDER_NAME;\n\n /* -----------------------------------------------------------------------------------------------\n * CollectionSlot\n * ---------------------------------------------------------------------------------------------*/\n\n const COLLECTION_SLOT_NAME = name + 'CollectionSlot';\n\n const CollectionSlot = React.forwardRef(\n (props, forwardedRef) => {\n const { scope, children } = props;\n const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);\n const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);\n return {children};\n }\n );\n\n CollectionSlot.displayName = COLLECTION_SLOT_NAME;\n\n /* -----------------------------------------------------------------------------------------------\n * CollectionItem\n * ---------------------------------------------------------------------------------------------*/\n\n const ITEM_SLOT_NAME = name + 'CollectionItemSlot';\n const ITEM_DATA_ATTR = 'data-radix-collection-item';\n\n type CollectionItemSlotProps = ItemData & {\n children: React.ReactNode;\n scope: any;\n };\n\n const CollectionItemSlot = React.forwardRef(\n (props, forwardedRef) => {\n const { scope, children, ...itemData } = props;\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const context = useCollectionContext(ITEM_SLOT_NAME, scope);\n\n React.useEffect(() => {\n context.itemMap.set(ref, { ref, ...(itemData as unknown as ItemData) });\n return () => void context.itemMap.delete(ref);\n });\n\n return (\n \n {children}\n \n );\n }\n );\n\n CollectionItemSlot.displayName = ITEM_SLOT_NAME;\n\n /* -----------------------------------------------------------------------------------------------\n * useCollection\n * ---------------------------------------------------------------------------------------------*/\n\n function useCollection(scope: any) {\n const context = useCollectionContext(name + 'CollectionConsumer', scope);\n\n const getItems = React.useCallback(() => {\n const collectionNode = context.collectionRef.current;\n if (!collectionNode) return [];\n const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));\n const items = Array.from(context.itemMap.values());\n const orderedItems = items.sort(\n (a, b) => orderedNodes.indexOf(a.ref.current!) - orderedNodes.indexOf(b.ref.current!)\n );\n return orderedItems;\n }, [context.collectionRef, context.itemMap]);\n\n return getItems;\n }\n\n return [\n { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },\n useCollection,\n createCollectionScope,\n ] as const;\n}\n\nexport { createCollection };\nexport type { CollectionProps };\n", "export { useEscapeKeydown } from './useEscapeKeydown';\n", "import * as React from 'react';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\n\n/**\n * Listens for when the escape key is down\n */\nfunction useEscapeKeydown(\n onEscapeKeyDownProp?: (event: KeyboardEvent) => void,\n ownerDocument: Document = globalThis?.document\n) {\n const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);\n\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n onEscapeKeyDown(event);\n }\n };\n ownerDocument.addEventListener('keydown', handleKeyDown);\n return () => ownerDocument.removeEventListener('keydown', handleKeyDown);\n }, [onEscapeKeyDown, ownerDocument]);\n}\n\nexport { useEscapeKeydown };\n", "export {\n DismissableLayer,\n DismissableLayerBranch,\n //\n Root,\n Branch,\n} from './DismissableLayer';\nexport type { DismissableLayerProps } from './DismissableLayer';\n", "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { Primitive, dispatchDiscreteCustomEvent } from '@radix-ui/react-primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayer\n * -----------------------------------------------------------------------------------------------*/\n\nconst DISMISSABLE_LAYER_NAME = 'DismissableLayer';\nconst CONTEXT_UPDATE = 'dismissableLayer.update';\nconst POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';\nconst FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';\n\nlet originalBodyPointerEvents: string;\n\nconst DismissableLayerContext = React.createContext({\n layers: new Set(),\n layersWithOutsidePointerEventsDisabled: new Set(),\n branches: new Set(),\n});\n\ntype DismissableLayerElement = React.ElementRef;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef;\ninterface DismissableLayerProps extends PrimitiveDivProps {\n /**\n * When `true`, hover/focus/click interactions will be disabled on elements outside\n * the `DismissableLayer`. Users will need to click twice on outside elements to\n * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n */\n disableOutsidePointerEvents?: boolean;\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n onEscapeKeyDown?: (event: KeyboardEvent) => void;\n /**\n * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;\n /**\n * Event handler called when the focus moves outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onFocusOutside?: (event: FocusOutsideEvent) => void;\n /**\n * Event handler called when an interaction happens outside the `DismissableLayer`.\n * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.\n * Can be prevented.\n */\n onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;\n /**\n * Handler called when the `DismissableLayer` should be dismissed\n */\n onDismiss?: () => void;\n}\n\nconst DismissableLayer = React.forwardRef(\n (props, forwardedRef) => {\n const {\n disableOutsidePointerEvents = false,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n onDismiss,\n ...layerProps\n } = props;\n const context = React.useContext(DismissableLayerContext);\n const [node, setNode] = React.useState(null);\n const ownerDocument = node?.ownerDocument ?? globalThis?.document;\n const [, force] = React.useState({});\n const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node));\n const layers = Array.from(context.layers);\n const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1); // prettier-ignore\n const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore\n const index = node ? layers.indexOf(node) : -1;\n const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;\n const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;\n\n const pointerDownOutside = usePointerDownOutside((event) => {\n const target = event.target as HTMLElement;\n const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));\n if (!isPointerEventsEnabled || isPointerDownOnBranch) return;\n onPointerDownOutside?.(event);\n onInteractOutside?.(event);\n if (!event.defaultPrevented) onDismiss?.();\n }, ownerDocument);\n\n const focusOutside = useFocusOutside((event) => {\n const target = event.target as HTMLElement;\n const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));\n if (isFocusInBranch) return;\n onFocusOutside?.(event);\n onInteractOutside?.(event);\n if (!event.defaultPrevented) onDismiss?.();\n }, ownerDocument);\n\n useEscapeKeydown((event) => {\n const isHighestLayer = index === context.layers.size - 1;\n if (!isHighestLayer) return;\n onEscapeKeyDown?.(event);\n if (!event.defaultPrevented && onDismiss) {\n event.preventDefault();\n onDismiss();\n }\n }, ownerDocument);\n\n React.useEffect(() => {\n if (!node) return;\n if (disableOutsidePointerEvents) {\n if (context.layersWithOutsidePointerEventsDisabled.size === 0) {\n originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;\n ownerDocument.body.style.pointerEvents = 'none';\n }\n context.layersWithOutsidePointerEventsDisabled.add(node);\n }\n context.layers.add(node);\n dispatchUpdate();\n return () => {\n if (\n disableOutsidePointerEvents &&\n context.layersWithOutsidePointerEventsDisabled.size === 1\n ) {\n ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;\n }\n };\n }, [node, ownerDocument, disableOutsidePointerEvents, context]);\n\n /**\n * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect\n * because a change to `disableOutsidePointerEvents` would remove this layer from the stack\n * and add it to the end again so the layering order wouldn't be _creation order_.\n * We only want them to be removed from context stacks when unmounted.\n */\n React.useEffect(() => {\n return () => {\n if (!node) return;\n context.layers.delete(node);\n context.layersWithOutsidePointerEventsDisabled.delete(node);\n dispatchUpdate();\n };\n }, [node, context]);\n\n React.useEffect(() => {\n const handleUpdate = () => force({});\n document.addEventListener(CONTEXT_UPDATE, handleUpdate);\n return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);\n }, []);\n\n return (\n \n );\n }\n);\n\nDismissableLayer.displayName = DISMISSABLE_LAYER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayerBranch\n * -----------------------------------------------------------------------------------------------*/\n\nconst BRANCH_NAME = 'DismissableLayerBranch';\n\ntype DismissableLayerBranchElement = React.ElementRef;\ninterface DismissableLayerBranchProps extends PrimitiveDivProps {}\n\nconst DismissableLayerBranch = React.forwardRef<\n DismissableLayerBranchElement,\n DismissableLayerBranchProps\n>((props, forwardedRef) => {\n const context = React.useContext(DismissableLayerContext);\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n\n React.useEffect(() => {\n const node = ref.current;\n if (node) {\n context.branches.add(node);\n return () => {\n context.branches.delete(node);\n };\n }\n }, [context.branches]);\n\n return ;\n});\n\nDismissableLayerBranch.displayName = BRANCH_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;\ntype FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>;\n\n/**\n * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behaviour present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\nfunction usePointerDownOutside(\n onPointerDownOutside?: (event: PointerDownOutsideEvent) => void,\n ownerDocument: Document = globalThis?.document\n) {\n const handlePointerDownOutside = useCallbackRef(onPointerDownOutside) as EventListener;\n const isPointerInsideReactTreeRef = React.useRef(false);\n const handleClickRef = React.useRef(() => {});\n\n React.useEffect(() => {\n const handlePointerDown = (event: PointerEvent) => {\n if (event.target && !isPointerInsideReactTreeRef.current) {\n const eventDetail = { originalEvent: event };\n\n function handleAndDispatchPointerDownOutsideEvent() {\n handleAndDispatchCustomEvent(\n POINTER_DOWN_OUTSIDE,\n handlePointerDownOutside,\n eventDetail,\n { discrete: true }\n );\n }\n\n /**\n * On touch devices, we need to wait for a click event because browsers implement\n * a ~350ms delay between the time the user stops touching the display and when the\n * browser executres events. We need to ensure we don't reactivate pointer-events within\n * this timeframe otherwise the browser may execute events that should have been prevented.\n *\n * Additionally, this also lets us deal automatically with cancellations when a click event\n * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.\n *\n * This is why we also continuously remove the previous listener, because we cannot be\n * certain that it was raised, and therefore cleaned-up.\n */\n if (event.pointerType === 'touch') {\n ownerDocument.removeEventListener('click', handleClickRef.current);\n handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;\n ownerDocument.addEventListener('click', handleClickRef.current, { once: true });\n } else {\n handleAndDispatchPointerDownOutsideEvent();\n }\n }\n isPointerInsideReactTreeRef.current = false;\n };\n /**\n * if this hook executes in a component that mounts via a `pointerdown` event, the event\n * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n * this by delaying the event listener registration on the document.\n * This is not React specific, but rather how the DOM works, ie:\n * ```\n * button.addEventListener('pointerdown', () => {\n * console.log('I will log');\n * document.addEventListener('pointerdown', () => {\n * console.log('I will also log');\n * })\n * });\n */\n const timerId = window.setTimeout(() => {\n ownerDocument.addEventListener('pointerdown', handlePointerDown);\n }, 0);\n return () => {\n window.clearTimeout(timerId);\n ownerDocument.removeEventListener('pointerdown', handlePointerDown);\n ownerDocument.removeEventListener('click', handleClickRef.current);\n };\n }, [ownerDocument, handlePointerDownOutside]);\n\n return {\n // ensures we check React component tree (not just DOM tree)\n onPointerDownCapture: () => (isPointerInsideReactTreeRef.current = true),\n };\n}\n\n/**\n * Listens for when focus happens outside a react subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\nfunction useFocusOutside(\n onFocusOutside?: (event: FocusOutsideEvent) => void,\n ownerDocument: Document = globalThis?.document\n) {\n const handleFocusOutside = useCallbackRef(onFocusOutside) as EventListener;\n const isFocusInsideReactTreeRef = React.useRef(false);\n\n React.useEffect(() => {\n const handleFocus = (event: FocusEvent) => {\n if (event.target && !isFocusInsideReactTreeRef.current) {\n const eventDetail = { originalEvent: event };\n handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {\n discrete: false,\n });\n }\n };\n ownerDocument.addEventListener('focusin', handleFocus);\n return () => ownerDocument.removeEventListener('focusin', handleFocus);\n }, [ownerDocument, handleFocusOutside]);\n\n return {\n onFocusCapture: () => (isFocusInsideReactTreeRef.current = true),\n onBlurCapture: () => (isFocusInsideReactTreeRef.current = false),\n };\n}\n\nfunction dispatchUpdate() {\n const event = new CustomEvent(CONTEXT_UPDATE);\n document.dispatchEvent(event);\n}\n\nfunction handleAndDispatchCustomEvent(\n name: string,\n handler: ((event: E) => void) | undefined,\n detail: { originalEvent: OriginalEvent } & (E extends CustomEvent ? D : never),\n { discrete }: { discrete: boolean }\n) {\n const target = detail.originalEvent.target;\n const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });\n if (handler) target.addEventListener(name, handler as EventListener, { once: true });\n\n if (discrete) {\n dispatchDiscreteCustomEvent(target, event);\n } else {\n target.dispatchEvent(event);\n }\n}\n\nconst Root = DismissableLayer;\nconst Branch = DismissableLayerBranch;\n\nexport {\n DismissableLayer,\n DismissableLayerBranch,\n //\n Root,\n Branch,\n};\nexport type { DismissableLayerProps };\n", "export { usePrevious } from './usePrevious';\n", "import * as React from 'react';\n\nfunction usePrevious(value: T) {\n const ref = React.useRef({ value, previous: value });\n\n // We compare values before making an update to ensure that\n // a change has been made. This ensures the previous value is\n // persisted correctly between renders.\n return React.useMemo(() => {\n if (ref.current.value !== value) {\n ref.current.previous = ref.current.value;\n ref.current.value = value;\n }\n return ref.current.previous;\n }, [value]);\n}\n\nexport { usePrevious };\n", "export {\n VisuallyHidden,\n //\n Root,\n} from './VisuallyHidden';\nexport type { VisuallyHiddenProps } from './VisuallyHidden';\n", "import * as React from 'react';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * VisuallyHidden\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAME = 'VisuallyHidden';\n\ntype VisuallyHiddenElement = React.ElementRef;\ntype PrimitiveSpanProps = Radix.ComponentPropsWithoutRef;\ninterface VisuallyHiddenProps extends PrimitiveSpanProps {}\n\nconst VisuallyHidden = React.forwardRef(\n (props, forwardedRef) => {\n return (\n \n );\n }\n);\n\nVisuallyHidden.displayName = NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = VisuallyHidden;\n\nexport {\n VisuallyHidden,\n //\n Root,\n};\nexport type { VisuallyHiddenProps };\n", "export {\n createNavigationMenuScope,\n //\n NavigationMenu,\n NavigationMenuSub,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuContent,\n NavigationMenuViewport,\n //\n Root,\n Sub,\n List,\n Item,\n Trigger,\n Link,\n Indicator,\n Content,\n Viewport,\n} from './NavigationMenu';\nexport type {\n NavigationMenuProps,\n NavigationMenuSubProps,\n NavigationMenuListProps,\n NavigationMenuItemProps,\n NavigationMenuTriggerProps,\n NavigationMenuLinkProps,\n NavigationMenuIndicatorProps,\n NavigationMenuContentProps,\n NavigationMenuViewportProps,\n} from './NavigationMenu';\n", "/// \n\nimport * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { Primitive, dispatchDiscreteCustomEvent } from '@radix-ui/react-primitive';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { composeRefs, useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { Presence } from '@radix-ui/react-presence';\nimport { useId } from '@radix-ui/react-id';\nimport { createCollection } from '@radix-ui/react-collection';\nimport { DismissableLayer } from '@radix-ui/react-dismissable-layer';\nimport { usePrevious } from '@radix-ui/react-use-previous';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\ntype Orientation = 'vertical' | 'horizontal';\ntype Direction = 'ltr' | 'rtl';\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenu\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAVIGATION_MENU_NAME = 'NavigationMenu';\n\nconst [Collection, useCollection, createCollectionScope] = createCollection<\n NavigationMenuTriggerElement,\n { value: string }\n>(NAVIGATION_MENU_NAME);\n\nconst [FocusGroupCollection, useFocusGroupCollection, createFocusGroupCollectionScope] =\n createCollection(NAVIGATION_MENU_NAME);\n\ntype ScopedProps

= P & { __scopeNavigationMenu?: Scope };\nconst [createNavigationMenuContext, createNavigationMenuScope] = createContextScope(\n NAVIGATION_MENU_NAME,\n [createCollectionScope, createFocusGroupCollectionScope]\n);\n\ntype ContentData = {\n ref?: React.Ref;\n} & ViewportContentMounterProps;\n\ntype NavigationMenuContextValue = {\n isRootMenu: boolean;\n value: string;\n previousValue: string;\n baseId: string;\n dir: Direction;\n orientation: Orientation;\n rootNavigationMenu: NavigationMenuElement | null;\n indicatorTrack: HTMLDivElement | null;\n onIndicatorTrackChange(indicatorTrack: HTMLDivElement | null): void;\n viewport: NavigationMenuViewportElement | null;\n onViewportChange(viewport: NavigationMenuViewportElement | null): void;\n onViewportContentChange(contentValue: string, contentData: ContentData): void;\n onViewportContentRemove(contentValue: string): void;\n onTriggerEnter(itemValue: string): void;\n onTriggerLeave(): void;\n onContentEnter(): void;\n onContentLeave(): void;\n onItemSelect(itemValue: string): void;\n onItemDismiss(): void;\n};\n\nconst [NavigationMenuProviderImpl, useNavigationMenuContext] =\n createNavigationMenuContext(NAVIGATION_MENU_NAME);\n\nconst [ViewportContentProvider, useViewportContentContext] = createNavigationMenuContext<{\n items: Map;\n}>(NAVIGATION_MENU_NAME);\n\ntype NavigationMenuElement = React.ElementRef;\ntype PrimitiveNavProps = Radix.ComponentPropsWithoutRef;\ninterface NavigationMenuProps\n extends Omit,\n PrimitiveNavProps {\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n dir?: Direction;\n orientation?: Orientation;\n /**\n * The duration from when the pointer enters the trigger until the tooltip gets opened.\n * @defaultValue 200\n */\n delayDuration?: number;\n /**\n * How much time a user has to enter another trigger without incurring a delay again.\n * @defaultValue 300\n */\n skipDelayDuration?: number;\n}\n\nconst NavigationMenu = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n __scopeNavigationMenu,\n value: valueProp,\n onValueChange,\n defaultValue,\n delayDuration = 200,\n skipDelayDuration = 300,\n orientation = 'horizontal',\n dir,\n ...NavigationMenuProps\n } = props;\n const [navigationMenu, setNavigationMenu] = React.useState(null);\n const composedRef = useComposedRefs(forwardedRef, (node) => setNavigationMenu(node));\n const direction = useDirection(dir);\n const openTimerRef = React.useRef(0);\n const closeTimerRef = React.useRef(0);\n const skipDelayTimerRef = React.useRef(0);\n const [isOpenDelayed, setIsOpenDelayed] = React.useState(true);\n const [value = '', setValue] = useControllableState({\n prop: valueProp,\n onChange: (value) => {\n const isOpen = value !== '';\n const hasSkipDelayDuration = skipDelayDuration > 0;\n\n if (isOpen) {\n window.clearTimeout(skipDelayTimerRef.current);\n if (hasSkipDelayDuration) setIsOpenDelayed(false);\n } else {\n window.clearTimeout(skipDelayTimerRef.current);\n skipDelayTimerRef.current = window.setTimeout(\n () => setIsOpenDelayed(true),\n skipDelayDuration\n );\n }\n\n onValueChange?.(value);\n },\n defaultProp: defaultValue,\n });\n\n const startCloseTimer = React.useCallback(() => {\n window.clearTimeout(closeTimerRef.current);\n closeTimerRef.current = window.setTimeout(() => setValue(''), 150);\n }, [setValue]);\n\n const handleOpen = React.useCallback(\n (itemValue: string) => {\n window.clearTimeout(closeTimerRef.current);\n setValue(itemValue);\n },\n [setValue]\n );\n\n const handleDelayedOpen = React.useCallback(\n (itemValue: string) => {\n const isOpenItem = value === itemValue;\n if (isOpenItem) {\n // If the item is already open (e.g. we're transitioning from the content to the trigger)\n // then we want to clear the close timer immediately.\n window.clearTimeout(closeTimerRef.current);\n } else {\n openTimerRef.current = window.setTimeout(() => {\n window.clearTimeout(closeTimerRef.current);\n setValue(itemValue);\n }, delayDuration);\n }\n },\n [value, setValue, delayDuration]\n );\n\n React.useEffect(() => {\n return () => {\n window.clearTimeout(openTimerRef.current);\n window.clearTimeout(closeTimerRef.current);\n window.clearTimeout(skipDelayTimerRef.current);\n };\n }, []);\n\n return (\n {\n window.clearTimeout(openTimerRef.current);\n if (isOpenDelayed) handleDelayedOpen(itemValue);\n else handleOpen(itemValue);\n }}\n onTriggerLeave={() => {\n window.clearTimeout(openTimerRef.current);\n startCloseTimer();\n }}\n onContentEnter={() => window.clearTimeout(closeTimerRef.current)}\n onContentLeave={startCloseTimer}\n onItemSelect={(itemValue) => {\n setValue((prevValue) => (prevValue === itemValue ? '' : itemValue));\n }}\n onItemDismiss={() => setValue('')}\n >\n \n \n );\n }\n);\n\nNavigationMenu.displayName = NAVIGATION_MENU_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuSub\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_NAME = 'NavigationMenuSub';\n\ntype NavigationMenuSubElement = React.ElementRef;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef;\ninterface NavigationMenuSubProps\n extends Omit,\n PrimitiveDivProps {\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n orientation?: Orientation;\n}\n\nconst NavigationMenuSub = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n __scopeNavigationMenu,\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n ...subProps\n } = props;\n const context = useNavigationMenuContext(SUB_NAME, __scopeNavigationMenu);\n const [value = '', setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n return (\n setValue(itemValue)}\n onItemSelect={(itemValue) => setValue(itemValue)}\n onItemDismiss={() => setValue('')}\n >\n \n \n );\n }\n);\n\nNavigationMenuSub.displayName = SUB_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ninterface NavigationMenuProviderPrivateProps {\n isRootMenu: boolean;\n scope: Scope;\n children: React.ReactNode;\n orientation: Orientation;\n dir: Direction;\n rootNavigationMenu: NavigationMenuElement | null;\n value: string;\n onTriggerEnter(itemValue: string): void;\n onTriggerLeave?(): void;\n onContentEnter?(): void;\n onContentLeave?(): void;\n onItemSelect(itemValue: string): void;\n onItemDismiss(): void;\n}\n\ninterface NavigationMenuProviderProps extends NavigationMenuProviderPrivateProps {}\n\nconst NavigationMenuProvider: React.FC = (\n props: ScopedProps\n) => {\n const {\n scope,\n isRootMenu,\n rootNavigationMenu,\n dir,\n orientation,\n children,\n value,\n onItemSelect,\n onItemDismiss,\n onTriggerEnter,\n onTriggerLeave,\n onContentEnter,\n onContentLeave,\n } = props;\n const [viewport, setViewport] = React.useState(null);\n const [viewportContent, setViewportContent] = React.useState>(new Map());\n const [indicatorTrack, setIndicatorTrack] = React.useState(null);\n\n return (\n {\n setViewportContent((prevContent) => {\n prevContent.set(contentValue, contentData);\n return new Map(prevContent);\n });\n }, [])}\n onViewportContentRemove={React.useCallback((contentValue) => {\n setViewportContent((prevContent) => {\n if (!prevContent.has(contentValue)) return prevContent;\n prevContent.delete(contentValue);\n return new Map(prevContent);\n });\n }, [])}\n >\n \n \n {children}\n \n \n \n );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuList\n * -----------------------------------------------------------------------------------------------*/\n\nconst LIST_NAME = 'NavigationMenuList';\n\ntype NavigationMenuListElement = React.ElementRef;\ntype PrimitiveUnorderedListProps = Radix.ComponentPropsWithoutRef;\ninterface NavigationMenuListProps extends PrimitiveUnorderedListProps {}\n\nconst NavigationMenuList = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeNavigationMenu, ...listProps } = props;\n const context = useNavigationMenuContext(LIST_NAME, __scopeNavigationMenu);\n\n const list = (\n \n );\n\n return (\n \n \n {context.isRootMenu ? {list} : list}\n \n \n );\n }\n);\n\nNavigationMenuList.displayName = LIST_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'NavigationMenuItem';\n\ntype FocusProxyElement = React.ElementRef;\n\ntype NavigationMenuItemContextValue = {\n value: string;\n triggerRef: React.RefObject;\n contentRef: React.RefObject;\n focusProxyRef: React.RefObject;\n wasEscapeCloseRef: React.MutableRefObject;\n onEntryKeyDown(): void;\n onFocusProxyEnter(side: 'start' | 'end'): void;\n onRootContentClose(): void;\n onContentFocusOutside(): void;\n};\n\nconst [NavigationMenuItemContextProvider, useNavigationMenuItemContext] =\n createNavigationMenuContext(ITEM_NAME);\n\ntype NavigationMenuItemElement = React.ElementRef;\ntype PrimitiveListItemProps = Radix.ComponentPropsWithoutRef;\ninterface NavigationMenuItemProps extends PrimitiveListItemProps {\n value?: string;\n}\n\nconst NavigationMenuItem = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeNavigationMenu, value: valueProp, ...itemProps } = props;\n const autoValue = useId();\n // We need to provide an initial deterministic value as `useId` will return\n // empty string on the first render and we don't want to match our internal \"closed\" value.\n const value = valueProp || autoValue || 'LEGACY_REACT_AUTO_VALUE';\n const contentRef = React.useRef(null);\n const triggerRef = React.useRef(null);\n const focusProxyRef = React.useRef(null);\n const restoreContentTabOrderRef = React.useRef(() => {});\n const wasEscapeCloseRef = React.useRef(false);\n\n const handleContentEntry = React.useCallback((side = 'start') => {\n if (contentRef.current) {\n restoreContentTabOrderRef.current();\n const candidates = getTabbableCandidates(contentRef.current);\n if (candidates.length) focusFirst(side === 'start' ? candidates : candidates.reverse());\n }\n }, []);\n\n const handleContentExit = React.useCallback(() => {\n if (contentRef.current) {\n const candidates = getTabbableCandidates(contentRef.current);\n if (candidates.length) restoreContentTabOrderRef.current = removeFromTabOrder(candidates);\n }\n }, []);\n\n return (\n \n \n \n );\n }\n);\n\nNavigationMenuItem.displayName = ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'NavigationMenuTrigger';\n\ntype NavigationMenuTriggerElement = React.ElementRef;\ntype PrimitiveButtonProps = Radix.ComponentPropsWithoutRef;\ninterface NavigationMenuTriggerProps extends PrimitiveButtonProps {}\n\nconst NavigationMenuTrigger = React.forwardRef<\n NavigationMenuTriggerElement,\n NavigationMenuTriggerProps\n>((props: ScopedProps, forwardedRef) => {\n const { __scopeNavigationMenu, disabled, ...triggerProps } = props;\n const context = useNavigationMenuContext(TRIGGER_NAME, props.__scopeNavigationMenu);\n const itemContext = useNavigationMenuItemContext(TRIGGER_NAME, props.__scopeNavigationMenu);\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(ref, itemContext.triggerRef, forwardedRef);\n const triggerId = makeTriggerId(context.baseId, itemContext.value);\n const contentId = makeContentId(context.baseId, itemContext.value);\n const hasPointerMoveOpenedRef = React.useRef(false);\n const wasClickCloseRef = React.useRef(false);\n const open = itemContext.value === context.value;\n\n return (\n <>\n \n \n {\n wasClickCloseRef.current = false;\n itemContext.wasEscapeCloseRef.current = false;\n })}\n onPointerMove={composeEventHandlers(\n props.onPointerMove,\n whenMouse(() => {\n if (\n disabled ||\n wasClickCloseRef.current ||\n itemContext.wasEscapeCloseRef.current ||\n hasPointerMoveOpenedRef.current\n )\n return;\n context.onTriggerEnter(itemContext.value);\n hasPointerMoveOpenedRef.current = true;\n })\n )}\n onPointerLeave={composeEventHandlers(\n props.onPointerLeave,\n whenMouse(() => {\n if (disabled) return;\n context.onTriggerLeave();\n hasPointerMoveOpenedRef.current = false;\n })\n )}\n onClick={composeEventHandlers(props.onClick, () => {\n context.onItemSelect(itemContext.value);\n wasClickCloseRef.current = open;\n })}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n const verticalEntryKey = context.dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n const entryKey = { horizontal: 'ArrowDown', vertical: verticalEntryKey }[\n context.orientation\n ];\n if (open && event.key === entryKey) {\n itemContext.onEntryKeyDown();\n // Prevent FocusGroupItem from handling the event\n event.preventDefault();\n }\n })}\n />\n \n \n\n {/* Proxy tab order between trigger and content */}\n {open && (\n <>\n {\n const content = itemContext.contentRef.current;\n const prevFocusedElement = event.relatedTarget as HTMLElement | null;\n const wasTriggerFocused = prevFocusedElement === ref.current;\n const wasFocusFromContent = content?.contains(prevFocusedElement);\n\n if (wasTriggerFocused || !wasFocusFromContent) {\n itemContext.onFocusProxyEnter(wasTriggerFocused ? 'start' : 'end');\n }\n }}\n />\n\n {/* Restructure a11y tree to make content accessible to screen reader when using the viewport */}\n {context.viewport && }\n \n )}\n \n );\n});\n\nNavigationMenuTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuLink\n * -----------------------------------------------------------------------------------------------*/\n\nconst LINK_NAME = 'NavigationMenuLink';\nconst LINK_SELECT = 'navigationMenu.linkSelect';\n\ntype NavigationMenuLinkElement = React.ElementRef;\ntype PrimitiveLinkProps = Radix.ComponentPropsWithoutRef;\ninterface NavigationMenuLinkProps extends Omit {\n active?: boolean;\n onSelect?: (event: Event) => void;\n}\n\nconst NavigationMenuLink = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeNavigationMenu, active, onSelect, ...linkProps } = props;\n\n return (\n \n {\n const target = event.target as HTMLElement;\n const linkSelectEvent = new CustomEvent(LINK_SELECT, {\n bubbles: true,\n cancelable: true,\n });\n target.addEventListener(LINK_SELECT, (event) => onSelect?.(event), { once: true });\n dispatchDiscreteCustomEvent(target, linkSelectEvent);\n\n if (!linkSelectEvent.defaultPrevented && !event.metaKey) {\n const rootContentDismissEvent = new CustomEvent(ROOT_CONTENT_DISMISS, {\n bubbles: true,\n cancelable: true,\n });\n dispatchDiscreteCustomEvent(target, rootContentDismissEvent);\n }\n },\n { checkForDefaultPrevented: false }\n )}\n />\n \n );\n }\n);\n\nNavigationMenuLink.displayName = LINK_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'NavigationMenuIndicator';\n\ntype NavigationMenuIndicatorElement = NavigationMenuIndicatorImplElement;\ninterface NavigationMenuIndicatorProps extends NavigationMenuIndicatorImplProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst NavigationMenuIndicator = React.forwardRef<\n NavigationMenuIndicatorElement,\n NavigationMenuIndicatorProps\n>((props: ScopedProps, forwardedRef) => {\n const { forceMount, ...indicatorProps } = props;\n const context = useNavigationMenuContext(INDICATOR_NAME, props.__scopeNavigationMenu);\n const isVisible = Boolean(context.value);\n\n return context.indicatorTrack\n ? ReactDOM.createPortal(\n \n \n ,\n context.indicatorTrack\n )\n : null;\n});\n\nNavigationMenuIndicator.displayName = INDICATOR_NAME;\n\ntype NavigationMenuIndicatorImplElement = React.ElementRef;\ninterface NavigationMenuIndicatorImplProps extends PrimitiveDivProps {}\n\nconst NavigationMenuIndicatorImpl = React.forwardRef<\n NavigationMenuIndicatorImplElement,\n NavigationMenuIndicatorImplProps\n>((props: ScopedProps, forwardedRef) => {\n const { __scopeNavigationMenu, ...indicatorProps } = props;\n const context = useNavigationMenuContext(INDICATOR_NAME, __scopeNavigationMenu);\n const getItems = useCollection(__scopeNavigationMenu);\n const [activeTrigger, setActiveTrigger] = React.useState(\n null\n );\n const [position, setPosition] = React.useState<{ size: number; offset: number } | null>(null);\n const isHorizontal = context.orientation === 'horizontal';\n const isVisible = Boolean(context.value);\n\n React.useEffect(() => {\n const items = getItems();\n const triggerNode = items.find((item) => item.value === context.value)?.ref.current;\n if (triggerNode) setActiveTrigger(triggerNode);\n }, [getItems, context.value]);\n\n /**\n * Update position when the indicator or parent track size changes\n */\n const handlePositionChange = () => {\n if (activeTrigger) {\n setPosition({\n size: isHorizontal ? activeTrigger.offsetWidth : activeTrigger.offsetHeight,\n offset: isHorizontal ? activeTrigger.offsetLeft : activeTrigger.offsetTop,\n });\n }\n };\n useResizeObserver(activeTrigger, handlePositionChange);\n useResizeObserver(context.indicatorTrack, handlePositionChange);\n\n // We need to wait for the indicator position to be available before rendering to\n // snap immediately into position rather than transitioning from initial\n return position ? (\n \n ) : null;\n});\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'NavigationMenuContent';\n\ntype NavigationMenuContentElement = NavigationMenuContentImplElement;\ninterface NavigationMenuContentProps\n extends Omit {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst NavigationMenuContent = React.forwardRef<\n NavigationMenuContentElement,\n NavigationMenuContentProps\n>((props: ScopedProps, forwardedRef) => {\n const { forceMount, ...contentProps } = props;\n const context = useNavigationMenuContext(CONTENT_NAME, props.__scopeNavigationMenu);\n const itemContext = useNavigationMenuItemContext(CONTENT_NAME, props.__scopeNavigationMenu);\n const composedRefs = useComposedRefs(itemContext.contentRef, forwardedRef);\n const open = itemContext.value === context.value;\n\n const commonProps = {\n value: itemContext.value,\n triggerRef: itemContext.triggerRef,\n focusProxyRef: itemContext.focusProxyRef,\n wasEscapeCloseRef: itemContext.wasEscapeCloseRef,\n onContentFocusOutside: itemContext.onContentFocusOutside,\n onRootContentClose: itemContext.onRootContentClose,\n ...contentProps,\n };\n\n return !context.viewport ? (\n \n \n \n ) : (\n \n );\n});\n\nNavigationMenuContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ViewportContentMounterElement = NavigationMenuContentImplElement;\ninterface ViewportContentMounterProps extends NavigationMenuContentImplProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst ViewportContentMounter = React.forwardRef<\n ViewportContentMounterElement,\n ViewportContentMounterProps\n>((props: ScopedProps, forwardedRef) => {\n const context = useNavigationMenuContext(CONTENT_NAME, props.__scopeNavigationMenu);\n const { onViewportContentChange, onViewportContentRemove } = context;\n\n useLayoutEffect(() => {\n onViewportContentChange(props.value, {\n ref: forwardedRef,\n ...props,\n });\n }, [props, forwardedRef, onViewportContentChange]);\n\n useLayoutEffect(() => {\n return () => onViewportContentRemove(props.value);\n }, [props.value, onViewportContentRemove]);\n\n // Content is proxied into the viewport\n return null;\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst ROOT_CONTENT_DISMISS = 'navigationMenu.rootContentDismiss';\n\ntype MotionAttribute = 'to-start' | 'to-end' | 'from-start' | 'from-end';\ntype NavigationMenuContentImplElement = React.ElementRef;\ntype DismissableLayerProps = Radix.ComponentPropsWithoutRef;\n\ninterface NavigationMenuContentImplPrivateProps {\n value: string;\n triggerRef: React.RefObject;\n focusProxyRef: React.RefObject;\n wasEscapeCloseRef: React.MutableRefObject;\n onContentFocusOutside(): void;\n onRootContentClose(): void;\n}\ninterface NavigationMenuContentImplProps\n extends Omit,\n NavigationMenuContentImplPrivateProps {}\n\nconst NavigationMenuContentImpl = React.forwardRef<\n NavigationMenuContentImplElement,\n NavigationMenuContentImplProps\n>((props: ScopedProps, forwardedRef) => {\n const {\n __scopeNavigationMenu,\n value,\n triggerRef,\n focusProxyRef,\n wasEscapeCloseRef,\n onRootContentClose,\n onContentFocusOutside,\n ...contentProps\n } = props;\n const context = useNavigationMenuContext(CONTENT_NAME, __scopeNavigationMenu);\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(ref, forwardedRef);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const getItems = useCollection(__scopeNavigationMenu);\n const prevMotionAttributeRef = React.useRef(null);\n\n const { onItemDismiss } = context;\n\n React.useEffect(() => {\n const content = ref.current;\n\n // Bubble dismiss to the root content node and focus its trigger\n if (context.isRootMenu && content) {\n const handleClose = () => {\n onItemDismiss();\n onRootContentClose();\n if (content.contains(document.activeElement)) triggerRef.current?.focus();\n };\n content.addEventListener(ROOT_CONTENT_DISMISS, handleClose);\n return () => content.removeEventListener(ROOT_CONTENT_DISMISS, handleClose);\n }\n }, [context.isRootMenu, props.value, triggerRef, onItemDismiss, onRootContentClose]);\n\n const motionAttribute = React.useMemo(() => {\n const items = getItems();\n const values = items.map((item) => item.value);\n if (context.dir === 'rtl') values.reverse();\n const index = values.indexOf(context.value);\n const prevIndex = values.indexOf(context.previousValue);\n const isSelected = value === context.value;\n const wasSelected = prevIndex === values.indexOf(value);\n\n // We only want to update selected and the last selected content\n // this avoids animations being interrupted outside of that range\n if (!isSelected && !wasSelected) return prevMotionAttributeRef.current;\n\n const attribute = (() => {\n // Don't provide a direction on the initial open\n if (index !== prevIndex) {\n // If we're moving to this item from another\n if (isSelected && prevIndex !== -1) return index > prevIndex ? 'from-end' : 'from-start';\n // If we're leaving this item for another\n if (wasSelected && index !== -1) return index > prevIndex ? 'to-start' : 'to-end';\n }\n // Otherwise we're entering from closed or leaving the list\n // entirely and should not animate in any direction\n return null;\n })();\n\n prevMotionAttributeRef.current = attribute;\n return attribute;\n }, [context.previousValue, context.value, context.dir, getItems, value]);\n\n return (\n \n {\n const rootContentDismissEvent = new Event(ROOT_CONTENT_DISMISS, {\n bubbles: true,\n cancelable: true,\n });\n ref.current?.dispatchEvent(rootContentDismissEvent);\n }}\n onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) => {\n onContentFocusOutside();\n const target = event.target as HTMLElement;\n // Only dismiss content when focus moves outside of the menu\n if (context.rootNavigationMenu?.contains(target)) event.preventDefault();\n })}\n onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => {\n const target = event.target as HTMLElement;\n const isTrigger = getItems().some((item) => item.ref.current?.contains(target));\n const isRootViewport = context.isRootMenu && context.viewport?.contains(target);\n if (isTrigger || isRootViewport || !context.isRootMenu) event.preventDefault();\n })}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;\n const isTabKey = event.key === 'Tab' && !isMetaKey;\n if (isTabKey) {\n const candidates = getTabbableCandidates(event.currentTarget);\n const focusedElement = document.activeElement;\n const index = candidates.findIndex((candidate) => candidate === focusedElement);\n const isMovingBackwards = event.shiftKey;\n const nextCandidates = isMovingBackwards\n ? candidates.slice(0, index).reverse()\n : candidates.slice(index + 1, candidates.length);\n\n if (focusFirst(nextCandidates)) {\n // prevent browser tab keydown because we've handled focus\n event.preventDefault();\n } else {\n // If we can't focus that means we're at the edges\n // so focus the proxy and let browser handle\n // tab/shift+tab keypress on the proxy instead\n focusProxyRef.current?.focus();\n }\n }\n })}\n onEscapeKeyDown={composeEventHandlers(props.onEscapeKeyDown, (event) => {\n // prevent the dropdown from reopening\n // after the escape key has been pressed\n wasEscapeCloseRef.current = true;\n })}\n />\n \n );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuViewport\n * -----------------------------------------------------------------------------------------------*/\n\nconst VIEWPORT_NAME = 'NavigationMenuViewport';\n\ntype NavigationMenuViewportElement = NavigationMenuViewportImplElement;\ninterface NavigationMenuViewportProps\n extends Omit {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst NavigationMenuViewport = React.forwardRef<\n NavigationMenuViewportElement,\n NavigationMenuViewportProps\n>((props: ScopedProps, forwardedRef) => {\n const { forceMount, ...viewportProps } = props;\n const context = useNavigationMenuContext(VIEWPORT_NAME, props.__scopeNavigationMenu);\n const open = Boolean(context.value);\n\n return (\n \n \n \n );\n});\n\nNavigationMenuViewport.displayName = VIEWPORT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype NavigationMenuViewportImplElement = React.ElementRef;\ninterface NavigationMenuViewportImplProps extends PrimitiveDivProps {}\n\nconst NavigationMenuViewportImpl = React.forwardRef<\n NavigationMenuViewportImplElement,\n NavigationMenuViewportImplProps\n>((props: ScopedProps, forwardedRef) => {\n const { __scopeNavigationMenu, children, ...viewportImplProps } = props;\n const context = useNavigationMenuContext(VIEWPORT_NAME, __scopeNavigationMenu);\n const composedRefs = useComposedRefs(forwardedRef, context.onViewportChange);\n const viewportContentContext = useViewportContentContext(\n CONTENT_NAME,\n props.__scopeNavigationMenu\n );\n const [size, setSize] = React.useState<{ width: number; height: number } | null>(null);\n const [content, setContent] = React.useState(null);\n const viewportWidth = size ? size?.width + 'px' : undefined;\n const viewportHeight = size ? size?.height + 'px' : undefined;\n const open = Boolean(context.value);\n // We persist the last active content value as the viewport may be animating out\n // and we want the content to remain mounted for the lifecycle of the viewport.\n const activeContentValue = open ? context.value : context.previousValue;\n\n /**\n * Update viewport size to match the active content node.\n * We prefer offset dimensions over `getBoundingClientRect` as the latter respects CSS transform.\n * For example, if content animates in from `scale(0.5)` the dimensions would be anything\n * from `0.5` to `1` of the intended size.\n */\n const handleSizeChange = () => {\n if (content) setSize({ width: content.offsetWidth, height: content.offsetHeight });\n };\n useResizeObserver(content, handleSizeChange);\n\n return (\n \n {Array.from(viewportContentContext.items).map(([value, { ref, forceMount, ...props }]) => {\n const isActive = activeContentValue === value;\n return (\n \n {\n // We only want to update the stored node when another is available\n // as we need to smoothly transition between them.\n if (isActive && node) setContent(node);\n })}\n />\n \n );\n })}\n \n );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst FOCUS_GROUP_NAME = 'FocusGroup';\n\ntype FocusGroupElement = React.ElementRef;\ninterface FocusGroupProps extends PrimitiveDivProps {}\n\nconst FocusGroup = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeNavigationMenu, ...groupProps } = props;\n const context = useNavigationMenuContext(FOCUS_GROUP_NAME, __scopeNavigationMenu);\n\n return (\n \n \n \n \n \n );\n }\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_KEYS = ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'];\nconst FOCUS_GROUP_ITEM_NAME = 'FocusGroupItem';\n\ntype FocusGroupItemElement = React.ElementRef;\ninterface FocusGroupItemProps extends PrimitiveButtonProps {}\n\nconst FocusGroupItem = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeNavigationMenu, ...groupProps } = props;\n const getItems = useFocusGroupCollection(__scopeNavigationMenu);\n const context = useNavigationMenuContext(FOCUS_GROUP_ITEM_NAME, __scopeNavigationMenu);\n\n return (\n \n {\n const isFocusNavigationKey = ['Home', 'End', ...ARROW_KEYS].includes(event.key);\n if (isFocusNavigationKey) {\n let candidateNodes = getItems().map((item) => item.ref.current!);\n const prevItemKey = context.dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n const prevKeys = [prevItemKey, 'ArrowUp', 'End'];\n if (prevKeys.includes(event.key)) candidateNodes.reverse();\n if (ARROW_KEYS.includes(event.key)) {\n const currentIndex = candidateNodes.indexOf(event.currentTarget);\n candidateNodes = candidateNodes.slice(currentIndex + 1);\n }\n /**\n * Imperative focus during keydown is risky so we prevent React's batching updates\n * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332\n */\n setTimeout(() => focusFirst(candidateNodes));\n\n // Prevent page scroll while navigating\n event.preventDefault();\n }\n })}\n />\n \n );\n }\n);\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nfunction getTabbableCandidates(container: HTMLElement) {\n const nodes: HTMLElement[] = [];\n const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n acceptNode: (node: any) => {\n const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';\n if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;\n // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n // runtime's understanding of tabbability, so this automatically accounts\n // for any kind of element that could be tabbed to.\n return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;\n },\n });\n while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement);\n // we do not take into account the order of nodes with positive `tabIndex` as it\n // hinders accessibility to have tab order different from visual order.\n return nodes;\n}\n\nfunction focusFirst(candidates: HTMLElement[]) {\n const previouslyFocusedElement = document.activeElement;\n return candidates.some((candidate) => {\n // if focus is already where we want to go, we don't want to keep going through the candidates\n if (candidate === previouslyFocusedElement) return true;\n candidate.focus();\n return document.activeElement !== previouslyFocusedElement;\n });\n}\n\nfunction removeFromTabOrder(candidates: HTMLElement[]) {\n candidates.forEach((candidate) => {\n candidate.dataset.tabindex = candidate.getAttribute('tabindex') || '';\n candidate.setAttribute('tabindex', '-1');\n });\n return () => {\n candidates.forEach((candidate) => {\n const prevTabIndex = candidate.dataset.tabindex as string;\n candidate.setAttribute('tabindex', prevTabIndex);\n });\n };\n}\n\nfunction useResizeObserver(element: HTMLElement | null, onResize: () => void) {\n const handleResize = useCallbackRef(onResize);\n useLayoutEffect(() => {\n let rAF = 0;\n if (element) {\n /**\n * Resize Observer will throw an often benign error that says `ResizeObserver loop\n * completed with undelivered notifications`. This means that ResizeObserver was not\n * able to deliver all observations within a single animation frame, so we use\n * `requestAnimationFrame` to ensure we don't deliver unnecessary observations.\n * Further reading: https://github.com/WICG/resize-observer/issues/38\n */\n const resizeObserver = new ResizeObserver(() => {\n cancelAnimationFrame(rAF);\n rAF = window.requestAnimationFrame(handleResize);\n });\n resizeObserver.observe(element);\n return () => {\n window.cancelAnimationFrame(rAF);\n resizeObserver.unobserve(element);\n };\n }\n }, [element, handleResize]);\n}\n\nfunction getOpenState(open: boolean) {\n return open ? 'open' : 'closed';\n}\n\nfunction makeTriggerId(baseId: string, value: string) {\n return `${baseId}-trigger-${value}`;\n}\n\nfunction makeContentId(baseId: string, value: string) {\n return `${baseId}-content-${value}`;\n}\n\nfunction whenMouse(handler: React.PointerEventHandler): React.PointerEventHandler {\n return (event) => (event.pointerType === 'mouse' ? handler(event) : undefined);\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = NavigationMenu;\nconst Sub = NavigationMenuSub;\nconst List = NavigationMenuList;\nconst Item = NavigationMenuItem;\nconst Trigger = NavigationMenuTrigger;\nconst Link = NavigationMenuLink;\nconst Indicator = NavigationMenuIndicator;\nconst Content = NavigationMenuContent;\nconst Viewport = NavigationMenuViewport;\n\nexport {\n createNavigationMenuScope,\n //\n NavigationMenu,\n NavigationMenuSub,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuContent,\n NavigationMenuViewport,\n //\n Root,\n Sub,\n List,\n Item,\n Trigger,\n Link,\n Indicator,\n Content,\n Viewport,\n};\nexport type {\n NavigationMenuProps,\n NavigationMenuSubProps,\n NavigationMenuListProps,\n NavigationMenuItemProps,\n NavigationMenuTriggerProps,\n NavigationMenuLinkProps,\n NavigationMenuIndicatorProps,\n NavigationMenuContentProps,\n NavigationMenuViewportProps,\n};\n", "export {\n FocusScope,\n //\n Root,\n} from './FocusScope';\nexport type { FocusScopeProps } from './FocusScope';\n", "import * as React from 'react';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\nconst AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';\nconst AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';\nconst EVENT_OPTIONS = { bubbles: false, cancelable: true };\n\ntype FocusableTarget = HTMLElement | { focus(): void };\n\n/* -------------------------------------------------------------------------------------------------\n * FocusScope\n * -----------------------------------------------------------------------------------------------*/\n\nconst FOCUS_SCOPE_NAME = 'FocusScope';\n\ntype FocusScopeElement = React.ElementRef;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef;\ninterface FocusScopeProps extends PrimitiveDivProps {\n /**\n * When `true`, tabbing from last item will focus first tabbable\n * and shift+tab from first item will focus last tababble.\n * @defaultValue false\n */\n loop?: boolean;\n\n /**\n * When `true`, focus cannot escape the focus scope via keyboard,\n * pointer, or a programmatic focus.\n * @defaultValue false\n */\n trapped?: boolean;\n\n /**\n * Event handler called when auto-focusing on mount.\n * Can be prevented.\n */\n onMountAutoFocus?: (event: Event) => void;\n\n /**\n * Event handler called when auto-focusing on unmount.\n * Can be prevented.\n */\n onUnmountAutoFocus?: (event: Event) => void;\n}\n\nconst FocusScope = React.forwardRef((props, forwardedRef) => {\n const {\n loop = false,\n trapped = false,\n onMountAutoFocus: onMountAutoFocusProp,\n onUnmountAutoFocus: onUnmountAutoFocusProp,\n ...scopeProps\n } = props;\n const [container, setContainer] = React.useState(null);\n const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);\n const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);\n const lastFocusedElementRef = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setContainer(node));\n\n const focusScope = React.useRef({\n paused: false,\n pause() {\n this.paused = true;\n },\n resume() {\n this.paused = false;\n },\n }).current;\n\n // Takes care of trapping focus if focus is moved outside programmatically for example\n React.useEffect(() => {\n if (trapped) {\n function handleFocusIn(event: FocusEvent) {\n if (focusScope.paused || !container) return;\n const target = event.target as HTMLElement | null;\n if (container.contains(target)) {\n lastFocusedElementRef.current = target;\n } else {\n focus(lastFocusedElementRef.current, { select: true });\n }\n }\n\n function handleFocusOut(event: FocusEvent) {\n if (focusScope.paused || !container) return;\n const relatedTarget = event.relatedTarget as HTMLElement | null;\n\n // A `focusout` event with a `null` `relatedTarget` will happen in at least two cases:\n //\n // 1. When the user switches app/tabs/windows/the browser itself loses focus.\n // 2. In Google Chrome, when the focused element is removed from the DOM.\n //\n // We let the browser do its thing here because:\n //\n // 1. The browser already keeps a memory of what's focused for when the page gets refocused.\n // 2. In Google Chrome, if we try to focus the deleted focused element (as per below), it\n // throws the CPU to 100%, so we avoid doing anything for this reason here too.\n if (relatedTarget === null) return;\n\n // If the focus has moved to an actual legitimate element (`relatedTarget !== null`)\n // that is outside the container, we move focus to the last valid focused element inside.\n if (!container.contains(relatedTarget)) {\n focus(lastFocusedElementRef.current, { select: true });\n }\n }\n\n // When the focused element gets removed from the DOM, browsers move focus\n // back to the document.body. In this case, we move focus to the container\n // to keep focus trapped correctly.\n function handleMutations(mutations: MutationRecord[]) {\n const focusedElement = document.activeElement as HTMLElement | null;\n for (const mutation of mutations) {\n if (mutation.removedNodes.length > 0) {\n if (!container?.contains(focusedElement)) focus(container);\n }\n }\n }\n\n document.addEventListener('focusin', handleFocusIn);\n document.addEventListener('focusout', handleFocusOut);\n const mutationObserver = new MutationObserver(handleMutations);\n if (container) mutationObserver.observe(container, { childList: true, subtree: true });\n\n return () => {\n document.removeEventListener('focusin', handleFocusIn);\n document.removeEventListener('focusout', handleFocusOut);\n mutationObserver.disconnect();\n };\n }\n }, [trapped, container, focusScope.paused]);\n\n React.useEffect(() => {\n if (container) {\n focusScopesStack.add(focusScope);\n const previouslyFocusedElement = document.activeElement as HTMLElement | null;\n const hasFocusedCandidate = container.contains(previouslyFocusedElement);\n\n if (!hasFocusedCandidate) {\n const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);\n container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);\n container.dispatchEvent(mountEvent);\n if (!mountEvent.defaultPrevented) {\n focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });\n if (document.activeElement === previouslyFocusedElement) {\n focus(container);\n }\n }\n }\n\n return () => {\n container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);\n\n // We hit a react bug (fixed in v17) with focusing in unmount.\n // We need to delay the focus a little to get around it for now.\n // See: https://github.com/facebook/react/issues/17894\n setTimeout(() => {\n const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);\n container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);\n container.dispatchEvent(unmountEvent);\n if (!unmountEvent.defaultPrevented) {\n focus(previouslyFocusedElement ?? document.body, { select: true });\n }\n // we need to remove the listener after we `dispatchEvent`\n container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);\n\n focusScopesStack.remove(focusScope);\n }, 0);\n };\n }\n }, [container, onMountAutoFocus, onUnmountAutoFocus, focusScope]);\n\n // Takes care of looping focus (when tabbing whilst at the edges)\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (!loop && !trapped) return;\n if (focusScope.paused) return;\n\n const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;\n const focusedElement = document.activeElement as HTMLElement | null;\n\n if (isTabKey && focusedElement) {\n const container = event.currentTarget as HTMLElement;\n const [first, last] = getTabbableEdges(container);\n const hasTabbableElementsInside = first && last;\n\n // we can only wrap focus if we have tabbable edges\n if (!hasTabbableElementsInside) {\n if (focusedElement === container) event.preventDefault();\n } else {\n if (!event.shiftKey && focusedElement === last) {\n event.preventDefault();\n if (loop) focus(first, { select: true });\n } else if (event.shiftKey && focusedElement === first) {\n event.preventDefault();\n if (loop) focus(last, { select: true });\n }\n }\n }\n },\n [loop, trapped, focusScope.paused]\n );\n\n return (\n \n );\n});\n\nFocusScope.displayName = FOCUS_SCOPE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * Utils\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * Attempts focusing the first element in a list of candidates.\n * Stops when focus has actually moved.\n */\nfunction focusFirst(candidates: HTMLElement[], { select = false } = {}) {\n const previouslyFocusedElement = document.activeElement;\n for (const candidate of candidates) {\n focus(candidate, { select });\n if (document.activeElement !== previouslyFocusedElement) return;\n }\n}\n\n/**\n * Returns the first and last tabbable elements inside a container.\n */\nfunction getTabbableEdges(container: HTMLElement) {\n const candidates = getTabbableCandidates(container);\n const first = findVisible(candidates, container);\n const last = findVisible(candidates.reverse(), container);\n return [first, last] as const;\n}\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nfunction getTabbableCandidates(container: HTMLElement) {\n const nodes: HTMLElement[] = [];\n const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n acceptNode: (node: any) => {\n const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';\n if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;\n // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n // runtime's understanding of tabbability, so this automatically accounts\n // for any kind of element that could be tabbed to.\n return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;\n },\n });\n while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement);\n // we do not take into account the order of nodes with positive `tabIndex` as it\n // hinders accessibility to have tab order different from visual order.\n return nodes;\n}\n\n/**\n * Returns the first visible element in a list.\n * NOTE: Only checks visibility up to the `container`.\n */\nfunction findVisible(elements: HTMLElement[], container: HTMLElement) {\n for (const element of elements) {\n // we stop checking if it's hidden at the `container` level (excluding)\n if (!isHidden(element, { upTo: container })) return element;\n }\n}\n\nfunction isHidden(node: HTMLElement, { upTo }: { upTo?: HTMLElement }) {\n if (getComputedStyle(node).visibility === 'hidden') return true;\n while (node) {\n // we stop at `upTo` (excluding it)\n if (upTo !== undefined && node === upTo) return false;\n if (getComputedStyle(node).display === 'none') return true;\n node = node.parentElement as HTMLElement;\n }\n return false;\n}\n\nfunction isSelectableInput(element: any): element is FocusableTarget & { select: () => void } {\n return element instanceof HTMLInputElement && 'select' in element;\n}\n\nfunction focus(element?: FocusableTarget | null, { select = false } = {}) {\n // only focus if that element is focusable\n if (element && element.focus) {\n const previouslyFocusedElement = document.activeElement;\n // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users\n element.focus({ preventScroll: true });\n // only select if its not the same element, it supports selection and we need to select\n if (element !== previouslyFocusedElement && isSelectableInput(element) && select)\n element.select();\n }\n}\n\n/* -------------------------------------------------------------------------------------------------\n * FocusScope stack\n * -----------------------------------------------------------------------------------------------*/\n\ntype FocusScopeAPI = { paused: boolean; pause(): void; resume(): void };\nconst focusScopesStack = createFocusScopesStack();\n\nfunction createFocusScopesStack() {\n /** A stack of focus scopes, with the active one at the top */\n let stack: FocusScopeAPI[] = [];\n\n return {\n add(focusScope: FocusScopeAPI) {\n // pause the currently active focus scope (at the top of the stack)\n const activeFocusScope = stack[0];\n if (focusScope !== activeFocusScope) {\n activeFocusScope?.pause();\n }\n // remove in case it already exists (because we'll re-add it at the top of the stack)\n stack = arrayRemove(stack, focusScope);\n stack.unshift(focusScope);\n },\n\n remove(focusScope: FocusScopeAPI) {\n stack = arrayRemove(stack, focusScope);\n stack[0]?.resume();\n },\n };\n}\n\nfunction arrayRemove(array: T[], item: T) {\n const updatedArray = [...array];\n const index = updatedArray.indexOf(item);\n if (index !== -1) {\n updatedArray.splice(index, 1);\n }\n return updatedArray;\n}\n\nfunction removeLinks(items: HTMLElement[]) {\n return items.filter((item) => item.tagName !== 'A');\n}\n\nconst Root = FocusScope;\n\nexport {\n FocusScope,\n //\n Root,\n};\nexport type { FocusScopeProps };\n", "export {\n Portal,\n //\n Root,\n} from './Portal';\nexport type { PortalProps } from './Portal';\n", "import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * Portal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'Portal';\n\ntype PortalElement = React.ElementRef;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef;\ninterface PortalProps extends PrimitiveDivProps {\n container?: HTMLElement | null;\n}\n\nconst Portal = React.forwardRef((props, forwardedRef) => {\n const { container = globalThis?.document?.body, ...portalProps } = props;\n return container\n ? ReactDOM.createPortal(, container)\n : null;\n});\n\nPortal.displayName = PORTAL_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Portal;\n\nexport {\n Portal,\n //\n Root,\n};\nexport type { PortalProps };\n", "export {\n FocusGuards,\n //\n Root,\n //\n useFocusGuards,\n} from './FocusGuards';\n", "import * as React from 'react';\n\n/** Number of components which have requested interest to have focus guards */\nlet count = 0;\n\nfunction FocusGuards(props: any) {\n useFocusGuards();\n return props.children;\n}\n\n/**\n * Injects a pair of focus guards at the edges of the whole DOM tree\n * to ensure `focusin` & `focusout` events can be caught consistently.\n */\nfunction useFocusGuards() {\n React.useEffect(() => {\n const edgeGuards = document.querySelectorAll('[data-radix-focus-guard]');\n document.body.insertAdjacentElement('afterbegin', edgeGuards[0] ?? createFocusGuard());\n document.body.insertAdjacentElement('beforeend', edgeGuards[1] ?? createFocusGuard());\n count++;\n\n return () => {\n if (count === 1) {\n document.querySelectorAll('[data-radix-focus-guard]').forEach((node) => node.remove());\n }\n count--;\n };\n }, []);\n}\n\nfunction createFocusGuard() {\n const element = document.createElement('span');\n element.setAttribute('data-radix-focus-guard', '');\n element.tabIndex = 0;\n element.style.cssText = 'outline: none; opacity: 0; position: fixed; pointer-events: none';\n return element;\n}\n\nconst Root = FocusGuards;\n\nexport {\n FocusGuards,\n //\n Root,\n //\n useFocusGuards,\n};\n", "/******************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\n/* global Reflect, Promise, SuppressedError, Symbol, Iterator */\n\nvar extendStatics = function(d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nexport var __assign = function() {\n __assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n return t;\n }\n return __assign.apply(this, arguments);\n}\n\nexport function __rest(s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n}\n\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\n\nexport function __param(paramIndex, decorator) {\n return function (target, key) { decorator(target, key, paramIndex); }\n}\n\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\n var _, done = false;\n for (var i = decorators.length - 1; i >= 0; i--) {\n var context = {};\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\n if (kind === \"accessor\") {\n if (result === void 0) continue;\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\n if (_ = accept(result.get)) descriptor.get = _;\n if (_ = accept(result.set)) descriptor.set = _;\n if (_ = accept(result.init)) initializers.unshift(_);\n }\n else if (_ = accept(result)) {\n if (kind === \"field\") initializers.unshift(_);\n else descriptor[key] = _;\n }\n }\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\n done = true;\n};\n\nexport function __runInitializers(thisArg, initializers, value) {\n var useValue = arguments.length > 2;\n for (var i = 0; i < initializers.length; i++) {\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\n }\n return useValue ? value : void 0;\n};\n\nexport function __propKey(x) {\n return typeof x === \"symbol\" ? x : \"\".concat(x);\n};\n\nexport function __setFunctionName(f, name, prefix) {\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\n};\n\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\n\nexport function __awaiter(thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n}\n\nexport function __generator(thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === \"function\" ? Iterator : Object).prototype);\n return g.next = verb(0), g[\"throw\"] = verb(1), g[\"return\"] = verb(2), typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n}\n\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n});\n\nexport function __exportStar(m, o) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\n}\n\nexport function __values(o) {\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\n if (m) return m.call(o);\n if (o && typeof o.length === \"number\") return {\n next: function () {\n if (o && i >= o.length) o = void 0;\n return { value: o && o[i++], done: !o };\n }\n };\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n}\n\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o), r, ar = [], e;\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n }\n catch (error) { e = { error: error }; }\n finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n }\n finally { if (e) throw e.error; }\n }\n return ar;\n}\n\n/** @deprecated */\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++)\n ar = ar.concat(__read(arguments[i]));\n return ar;\n}\n\n/** @deprecated */\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\n r[k] = a[j];\n return r;\n}\n\nexport function __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\n\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\n\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\n return i = Object.create((typeof AsyncIterator === \"function\" ? AsyncIterator : Object).prototype), verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\n function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\n function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\n function fulfill(value) { resume(\"next\", value); }\n function reject(value) { resume(\"throw\", value); }\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\n}\n\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\n}\n\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator], i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\n}\n\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\n return cooked;\n};\n\nvar __setModuleDefault = Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n};\n\nvar ownKeys = function(o) {\n ownKeys = Object.getOwnPropertyNames || function (o) {\n var ar = [];\n for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;\n return ar;\n };\n return ownKeys(o);\n};\n\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== \"default\") __createBinding(result, mod, k[i]);\n __setModuleDefault(result, mod);\n return result;\n}\n\nexport function __importDefault(mod) {\n return (mod && mod.__esModule) ? mod : { default: mod };\n}\n\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n}\n\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\n}\n\nexport function __classPrivateFieldIn(state, receiver) {\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\n}\n\nexport function __addDisposableResource(env, value, async) {\n if (value !== null && value !== void 0) {\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\n var dispose, inner;\n if (async) {\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\n dispose = value[Symbol.asyncDispose];\n }\n if (dispose === void 0) {\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\n dispose = value[Symbol.dispose];\n if (async) inner = dispose;\n }\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\n if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\n env.stack.push({ value: value, dispose: dispose, async: async });\n }\n else if (async) {\n env.stack.push({ async: true });\n }\n return value;\n}\n\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n var e = new Error(message);\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n};\n\nexport function __disposeResources(env) {\n function fail(e) {\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\n env.hasError = true;\n }\n var r, s = 0;\n function next() {\n while (r = env.stack.pop()) {\n try {\n if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);\n if (r.dispose) {\n var result = r.dispose.call(r.value);\n if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\n }\n else s |= 1;\n }\n catch (e) {\n fail(e);\n }\n }\n if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();\n if (env.hasError) throw env.error;\n }\n return next();\n}\n\nexport function __rewriteRelativeImportExtension(path, preserveJsx) {\n if (typeof path === \"string\" && /^\\.\\.?\\//.test(path)) {\n return path.replace(/\\.(tsx)$|((?:\\.d)?)((?:\\.[^./]+?)?)\\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {\n return tsx ? preserveJsx ? \".jsx\" : \".js\" : d && (!ext || !cm) ? m : (d + ext + \".\" + cm.toLowerCase() + \"js\");\n });\n }\n return path;\n}\n\nexport default {\n __extends,\n __assign,\n __rest,\n __decorate,\n __param,\n __esDecorate,\n __runInitializers,\n __propKey,\n __setFunctionName,\n __metadata,\n __awaiter,\n __generator,\n __createBinding,\n __exportStar,\n __values,\n __read,\n __spread,\n __spreadArrays,\n __spreadArray,\n __await,\n __asyncGenerator,\n __asyncDelegator,\n __asyncValues,\n __makeTemplateObject,\n __importStar,\n __importDefault,\n __classPrivateFieldGet,\n __classPrivateFieldSet,\n __classPrivateFieldIn,\n __addDisposableResource,\n __disposeResources,\n __rewriteRelativeImportExtension,\n};\n", "import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { RemoveScroll } from './UI';\nimport SideCar from './sidecar';\nvar ReactRemoveScroll = React.forwardRef(function (props, ref) { return (React.createElement(RemoveScroll, __assign({}, props, { ref: ref, sideCar: SideCar }))); });\nReactRemoveScroll.classNames = RemoveScroll.classNames;\nexport default ReactRemoveScroll;\n", "import { __assign, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { fullWidthClassName, zeroRightClassName } from 'react-remove-scroll-bar/constants';\nimport { useMergeRefs } from 'use-callback-ref';\nimport { effectCar } from './medium';\nvar nothing = function () {\n return;\n};\n/**\n * Removes scrollbar from the page and contain the scroll within the Lock\n */\nvar RemoveScroll = React.forwardRef(function (props, parentRef) {\n var ref = React.useRef(null);\n var _a = React.useState({\n onScrollCapture: nothing,\n onWheelCapture: nothing,\n onTouchMoveCapture: nothing,\n }), callbacks = _a[0], setCallbacks = _a[1];\n var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? 'div' : _b, rest = __rest(props, [\"forwardProps\", \"children\", \"className\", \"removeScrollBar\", \"enabled\", \"shards\", \"sideCar\", \"noIsolation\", \"inert\", \"allowPinchZoom\", \"as\"]);\n var SideCar = sideCar;\n var containerRef = useMergeRefs([ref, parentRef]);\n var containerProps = __assign(__assign({}, rest), callbacks);\n return (React.createElement(React.Fragment, null,\n enabled && (React.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })),\n forwardProps ? (React.cloneElement(React.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef }))) : (React.createElement(Container, __assign({}, containerProps, { className: className, ref: containerRef }), children))));\n});\nRemoveScroll.defaultProps = {\n enabled: true,\n removeScrollBar: true,\n inert: false,\n};\nRemoveScroll.classNames = {\n fullWidth: fullWidthClassName,\n zeroRight: zeroRightClassName,\n};\nexport { RemoveScroll };\n", "export var zeroRightClassName = 'right-scroll-bar-position';\nexport var fullWidthClassName = 'width-before-scroll-bar';\nexport var noScrollbarsClassName = 'with-scroll-bars-hidden';\n/**\n * Name of a CSS variable containing the amount of \"hidden\" scrollbar\n * ! might be undefined ! use will fallback!\n */\nexport var removedBarSizeVariable = '--removed-body-scroll-bar-size';\n", "/**\n * Assigns a value for a given ref, no matter of the ref format\n * @param {RefObject} ref - a callback function or ref object\n * @param value - a new value\n *\n * @see https://github.com/theKashey/use-callback-ref#assignref\n * @example\n * const refObject = useRef();\n * const refFn = (ref) => {....}\n *\n * assignRef(refObject, \"refValue\");\n * assignRef(refFn, \"refValue\");\n */\nexport function assignRef(ref, value) {\n if (typeof ref === 'function') {\n ref(value);\n }\n else if (ref) {\n ref.current = value;\n }\n return ref;\n}\n", "import { useState } from 'react';\n/**\n * creates a MutableRef with ref change callback\n * @param initialValue - initial ref value\n * @param {Function} callback - a callback to run when value changes\n *\n * @example\n * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);\n * ref.current = 1;\n * // prints 0 -> 1\n *\n * @see https://reactjs.org/docs/hooks-reference.html#useref\n * @see https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref\n * @returns {MutableRefObject}\n */\nexport function useCallbackRef(initialValue, callback) {\n var ref = useState(function () { return ({\n // value\n value: initialValue,\n // last callback\n callback: callback,\n // \"memoized\" public interface\n facade: {\n get current() {\n return ref.value;\n },\n set current(value) {\n var last = ref.value;\n if (last !== value) {\n ref.value = value;\n ref.callback(value, last);\n }\n },\n },\n }); })[0];\n // update callback\n ref.callback = callback;\n return ref.facade;\n}\n", "import * as React from 'react';\nimport { assignRef } from './assignRef';\nimport { useCallbackRef } from './useRef';\nvar useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\nvar currentValues = new WeakMap();\n/**\n * Merges two or more refs together providing a single interface to set their value\n * @param {RefObject|Ref} refs\n * @returns {MutableRefObject} - a new ref, which translates all changes to {refs}\n *\n * @see {@link mergeRefs} a version without buit-in memoization\n * @see https://github.com/theKashey/use-callback-ref#usemergerefs\n * @example\n * const Component = React.forwardRef((props, ref) => {\n * const ownRef = useRef();\n * const domRef = useMergeRefs([ref, ownRef]); // \uD83D\uDC48 merge together\n * return

...
\n * }\n */\nexport function useMergeRefs(refs, defaultValue) {\n var callbackRef = useCallbackRef(defaultValue || null, function (newValue) {\n return refs.forEach(function (ref) { return assignRef(ref, newValue); });\n });\n // handle refs changes - added or removed\n useIsomorphicLayoutEffect(function () {\n var oldValue = currentValues.get(callbackRef);\n if (oldValue) {\n var prevRefs_1 = new Set(oldValue);\n var nextRefs_1 = new Set(refs);\n var current_1 = callbackRef.current;\n prevRefs_1.forEach(function (ref) {\n if (!nextRefs_1.has(ref)) {\n assignRef(ref, null);\n }\n });\n nextRefs_1.forEach(function (ref) {\n if (!prevRefs_1.has(ref)) {\n assignRef(ref, current_1);\n }\n });\n }\n currentValues.set(callbackRef, refs);\n }, [refs]);\n return callbackRef;\n}\n", "import { __assign } from \"tslib\";\nfunction ItoI(a) {\n return a;\n}\nfunction innerCreateMedium(defaults, middleware) {\n if (middleware === void 0) { middleware = ItoI; }\n var buffer = [];\n var assigned = false;\n var medium = {\n read: function () {\n if (assigned) {\n throw new Error('Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.');\n }\n if (buffer.length) {\n return buffer[buffer.length - 1];\n }\n return defaults;\n },\n useMedium: function (data) {\n var item = middleware(data, assigned);\n buffer.push(item);\n return function () {\n buffer = buffer.filter(function (x) { return x !== item; });\n };\n },\n assignSyncMedium: function (cb) {\n assigned = true;\n while (buffer.length) {\n var cbs = buffer;\n buffer = [];\n cbs.forEach(cb);\n }\n buffer = {\n push: function (x) { return cb(x); },\n filter: function () { return buffer; },\n };\n },\n assignMedium: function (cb) {\n assigned = true;\n var pendingQueue = [];\n if (buffer.length) {\n var cbs = buffer;\n buffer = [];\n cbs.forEach(cb);\n pendingQueue = buffer;\n }\n var executeQueue = function () {\n var cbs = pendingQueue;\n pendingQueue = [];\n cbs.forEach(cb);\n };\n var cycle = function () { return Promise.resolve().then(executeQueue); };\n cycle();\n buffer = {\n push: function (x) {\n pendingQueue.push(x);\n cycle();\n },\n filter: function (filter) {\n pendingQueue = pendingQueue.filter(filter);\n return buffer;\n },\n };\n },\n };\n return medium;\n}\nexport function createMedium(defaults, middleware) {\n if (middleware === void 0) { middleware = ItoI; }\n return innerCreateMedium(defaults, middleware);\n}\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport function createSidecarMedium(options) {\n if (options === void 0) { options = {}; }\n var medium = innerCreateMedium(null);\n medium.options = __assign({ async: true, ssr: false }, options);\n return medium;\n}\n", "import { __assign, __rest } from \"tslib\";\nimport * as React from 'react';\nvar SideCar = function (_a) {\n var sideCar = _a.sideCar, rest = __rest(_a, [\"sideCar\"]);\n if (!sideCar) {\n throw new Error('Sidecar: please provide `sideCar` property to import the right car');\n }\n var Target = sideCar.read();\n if (!Target) {\n throw new Error('Sidecar medium not found');\n }\n return React.createElement(Target, __assign({}, rest));\n};\nSideCar.isSideCarExport = true;\nexport function exportSidecar(medium, exported) {\n medium.useMedium(exported);\n return SideCar;\n}\n", "import { createSidecarMedium } from 'use-sidecar';\nexport var effectCar = createSidecarMedium();\n", "import { __spreadArray } from \"tslib\";\nimport * as React from 'react';\nimport { RemoveScrollBar } from 'react-remove-scroll-bar';\nimport { styleSingleton } from 'react-style-singleton';\nimport { nonPassive } from './aggresiveCapture';\nimport { handleScroll, locationCouldBeScrolled } from './handleScroll';\nexport var getTouchXY = function (event) {\n return 'changedTouches' in event ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY] : [0, 0];\n};\nexport var getDeltaXY = function (event) { return [event.deltaX, event.deltaY]; };\nvar extractRef = function (ref) {\n return ref && 'current' in ref ? ref.current : ref;\n};\nvar deltaCompare = function (x, y) { return x[0] === y[0] && x[1] === y[1]; };\nvar generateStyle = function (id) { return \"\\n .block-interactivity-\".concat(id, \" {pointer-events: none;}\\n .allow-interactivity-\").concat(id, \" {pointer-events: all;}\\n\"); };\nvar idCounter = 0;\nvar lockStack = [];\nexport function RemoveScrollSideCar(props) {\n var shouldPreventQueue = React.useRef([]);\n var touchStartRef = React.useRef([0, 0]);\n var activeAxis = React.useRef();\n var id = React.useState(idCounter++)[0];\n var Style = React.useState(function () { return styleSingleton(); })[0];\n var lastProps = React.useRef(props);\n React.useEffect(function () {\n lastProps.current = props;\n }, [props]);\n React.useEffect(function () {\n if (props.inert) {\n document.body.classList.add(\"block-interactivity-\".concat(id));\n var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);\n allow_1.forEach(function (el) { return el.classList.add(\"allow-interactivity-\".concat(id)); });\n return function () {\n document.body.classList.remove(\"block-interactivity-\".concat(id));\n allow_1.forEach(function (el) { return el.classList.remove(\"allow-interactivity-\".concat(id)); });\n };\n }\n return;\n }, [props.inert, props.lockRef.current, props.shards]);\n var shouldCancelEvent = React.useCallback(function (event, parent) {\n if ('touches' in event && event.touches.length === 2) {\n return !lastProps.current.allowPinchZoom;\n }\n var touch = getTouchXY(event);\n var touchStart = touchStartRef.current;\n var deltaX = 'deltaX' in event ? event.deltaX : touchStart[0] - touch[0];\n var deltaY = 'deltaY' in event ? event.deltaY : touchStart[1] - touch[1];\n var currentAxis;\n var target = event.target;\n var moveDirection = Math.abs(deltaX) > Math.abs(deltaY) ? 'h' : 'v';\n // allow horizontal touch move on Range inputs. They will not cause any scroll\n if ('touches' in event && moveDirection === 'h' && target.type === 'range') {\n return false;\n }\n var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);\n if (!canBeScrolledInMainDirection) {\n return true;\n }\n if (canBeScrolledInMainDirection) {\n currentAxis = moveDirection;\n }\n else {\n currentAxis = moveDirection === 'v' ? 'h' : 'v';\n canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);\n // other axis might be not scrollable\n }\n if (!canBeScrolledInMainDirection) {\n return false;\n }\n if (!activeAxis.current && 'changedTouches' in event && (deltaX || deltaY)) {\n activeAxis.current = currentAxis;\n }\n if (!currentAxis) {\n return true;\n }\n var cancelingAxis = activeAxis.current || currentAxis;\n return handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY, true);\n }, []);\n var shouldPrevent = React.useCallback(function (_event) {\n var event = _event;\n if (!lockStack.length || lockStack[lockStack.length - 1] !== Style) {\n // not the last active\n return;\n }\n var delta = 'deltaY' in event ? getDeltaXY(event) : getTouchXY(event);\n var sourceEvent = shouldPreventQueue.current.filter(function (e) { return e.name === event.type && e.target === event.target && deltaCompare(e.delta, delta); })[0];\n // self event, and should be canceled\n if (sourceEvent && sourceEvent.should) {\n if (event.cancelable) {\n event.preventDefault();\n }\n return;\n }\n // outside or shard event\n if (!sourceEvent) {\n var shardNodes = (lastProps.current.shards || [])\n .map(extractRef)\n .filter(Boolean)\n .filter(function (node) { return node.contains(event.target); });\n var shouldStop = shardNodes.length > 0 ? shouldCancelEvent(event, shardNodes[0]) : !lastProps.current.noIsolation;\n if (shouldStop) {\n if (event.cancelable) {\n event.preventDefault();\n }\n }\n }\n }, []);\n var shouldCancel = React.useCallback(function (name, delta, target, should) {\n var event = { name: name, delta: delta, target: target, should: should };\n shouldPreventQueue.current.push(event);\n setTimeout(function () {\n shouldPreventQueue.current = shouldPreventQueue.current.filter(function (e) { return e !== event; });\n }, 1);\n }, []);\n var scrollTouchStart = React.useCallback(function (event) {\n touchStartRef.current = getTouchXY(event);\n activeAxis.current = undefined;\n }, []);\n var scrollWheel = React.useCallback(function (event) {\n shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));\n }, []);\n var scrollTouchMove = React.useCallback(function (event) {\n shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));\n }, []);\n React.useEffect(function () {\n lockStack.push(Style);\n props.setCallbacks({\n onScrollCapture: scrollWheel,\n onWheelCapture: scrollWheel,\n onTouchMoveCapture: scrollTouchMove,\n });\n document.addEventListener('wheel', shouldPrevent, nonPassive);\n document.addEventListener('touchmove', shouldPrevent, nonPassive);\n document.addEventListener('touchstart', scrollTouchStart, nonPassive);\n return function () {\n lockStack = lockStack.filter(function (inst) { return inst !== Style; });\n document.removeEventListener('wheel', shouldPrevent, nonPassive);\n document.removeEventListener('touchmove', shouldPrevent, nonPassive);\n document.removeEventListener('touchstart', scrollTouchStart, nonPassive);\n };\n }, []);\n var removeScrollBar = props.removeScrollBar, inert = props.inert;\n return (React.createElement(React.Fragment, null,\n inert ? React.createElement(Style, { styles: generateStyle(id) }) : null,\n removeScrollBar ? React.createElement(RemoveScrollBar, { gapMode: \"margin\" }) : null));\n}\n", "import * as React from 'react';\nimport { styleSingleton } from 'react-style-singleton';\nimport { fullWidthClassName, zeroRightClassName, noScrollbarsClassName, removedBarSizeVariable } from './constants';\nimport { getGapWidth } from './utils';\nvar Style = styleSingleton();\nexport var lockAttribute = 'data-scroll-locked';\n// important tip - once we measure scrollBar width and remove them\n// we could not repeat this operation\n// thus we are using style-singleton - only the first \"yet correct\" style will be applied.\nvar getStyles = function (_a, allowRelative, gapMode, important) {\n var left = _a.left, top = _a.top, right = _a.right, gap = _a.gap;\n if (gapMode === void 0) { gapMode = 'margin'; }\n return \"\\n .\".concat(noScrollbarsClassName, \" {\\n overflow: hidden \").concat(important, \";\\n padding-right: \").concat(gap, \"px \").concat(important, \";\\n }\\n body[\").concat(lockAttribute, \"] {\\n overflow: hidden \").concat(important, \";\\n overscroll-behavior: contain;\\n \").concat([\n allowRelative && \"position: relative \".concat(important, \";\"),\n gapMode === 'margin' &&\n \"\\n padding-left: \".concat(left, \"px;\\n padding-top: \").concat(top, \"px;\\n padding-right: \").concat(right, \"px;\\n margin-left:0;\\n margin-top:0;\\n margin-right: \").concat(gap, \"px \").concat(important, \";\\n \"),\n gapMode === 'padding' && \"padding-right: \".concat(gap, \"px \").concat(important, \";\"),\n ]\n .filter(Boolean)\n .join(''), \"\\n }\\n \\n .\").concat(zeroRightClassName, \" {\\n right: \").concat(gap, \"px \").concat(important, \";\\n }\\n \\n .\").concat(fullWidthClassName, \" {\\n margin-right: \").concat(gap, \"px \").concat(important, \";\\n }\\n \\n .\").concat(zeroRightClassName, \" .\").concat(zeroRightClassName, \" {\\n right: 0 \").concat(important, \";\\n }\\n \\n .\").concat(fullWidthClassName, \" .\").concat(fullWidthClassName, \" {\\n margin-right: 0 \").concat(important, \";\\n }\\n \\n body[\").concat(lockAttribute, \"] {\\n \").concat(removedBarSizeVariable, \": \").concat(gap, \"px;\\n }\\n\");\n};\nvar getCurrentUseCounter = function () {\n var counter = parseInt(document.body.getAttribute(lockAttribute) || '0', 10);\n return isFinite(counter) ? counter : 0;\n};\nexport var useLockAttribute = function () {\n React.useEffect(function () {\n document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());\n return function () {\n var newCounter = getCurrentUseCounter() - 1;\n if (newCounter <= 0) {\n document.body.removeAttribute(lockAttribute);\n }\n else {\n document.body.setAttribute(lockAttribute, newCounter.toString());\n }\n };\n }, []);\n};\n/**\n * Removes page scrollbar and blocks page scroll when mounted\n */\nexport var RemoveScrollBar = function (_a) {\n var noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? 'margin' : _b;\n useLockAttribute();\n /*\n gap will be measured on every component mount\n however it will be used only by the \"first\" invocation\n due to singleton nature of d) {\n return true;\n }\n }\n current = current.parentNode;\n } while (current && current !== document.body);\n return false;\n};\nvar getVScrollVariables = function (_a) {\n var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;\n return [\n scrollTop,\n scrollHeight,\n clientHeight,\n ];\n};\nvar getHScrollVariables = function (_a) {\n var scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;\n return [\n scrollLeft,\n scrollWidth,\n clientWidth,\n ];\n};\nvar elementCouldBeScrolled = function (axis, node) {\n return axis === 'v' ? elementCouldBeVScrolled(node) : elementCouldBeHScrolled(node);\n};\nvar getScrollVariables = function (axis, node) {\n return axis === 'v' ? getVScrollVariables(node) : getHScrollVariables(node);\n};\nvar getDirectionFactor = function (axis, direction) {\n /**\n * If the element's direction is rtl (right-to-left), then scrollLeft is 0 when the scrollbar is at its rightmost position,\n * and then increasingly negative as you scroll towards the end of the content.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft\n */\n return axis === 'h' && direction === 'rtl' ? -1 : 1;\n};\nexport var handleScroll = function (axis, endTarget, event, sourceDelta, noOverscroll) {\n var directionFactor = getDirectionFactor(axis, window.getComputedStyle(endTarget).direction);\n var delta = directionFactor * sourceDelta;\n // find scrollable target\n var target = event.target;\n var targetInLock = endTarget.contains(target);\n var shouldCancelScroll = false;\n var isDeltaPositive = delta > 0;\n var availableScroll = 0;\n var availableScrollTop = 0;\n do {\n var _a = getScrollVariables(axis, target), position = _a[0], scroll_1 = _a[1], capacity = _a[2];\n var elementScroll = scroll_1 - capacity - directionFactor * position;\n if (position || elementScroll) {\n if (elementCouldBeScrolled(axis, target)) {\n availableScroll += elementScroll;\n availableScrollTop += position;\n }\n }\n target = target.parentNode;\n } while (\n // portaled content\n (!targetInLock && target !== document.body) ||\n // self content\n (targetInLock && (endTarget.contains(target) || endTarget === target)));\n if (isDeltaPositive && ((noOverscroll && availableScroll === 0) || (!noOverscroll && delta > availableScroll))) {\n shouldCancelScroll = true;\n }\n else if (!isDeltaPositive &&\n ((noOverscroll && availableScrollTop === 0) || (!noOverscroll && -delta > availableScrollTop))) {\n shouldCancelScroll = true;\n }\n return shouldCancelScroll;\n};\n", "import { exportSidecar } from 'use-sidecar';\nimport { RemoveScrollSideCar } from './SideEffect';\nimport { effectCar } from './medium';\nexport default exportSidecar(effectCar, RemoveScrollSideCar);\n", "var getDefaultParent = function (originalTarget) {\n if (typeof document === 'undefined') {\n return null;\n }\n var sampleTarget = Array.isArray(originalTarget) ? originalTarget[0] : originalTarget;\n return sampleTarget.ownerDocument.body;\n};\nvar counterMap = new WeakMap();\nvar uncontrolledNodes = new WeakMap();\nvar markerMap = {};\nvar lockCount = 0;\nvar unwrapHost = function (node) {\n return node && (node.host || unwrapHost(node.parentNode));\n};\nvar correctTargets = function (parent, targets) {\n return targets\n .map(function (target) {\n if (parent.contains(target)) {\n return target;\n }\n var correctedTarget = unwrapHost(target);\n if (correctedTarget && parent.contains(correctedTarget)) {\n return correctedTarget;\n }\n console.error('aria-hidden', target, 'in not contained inside', parent, '. Doing nothing');\n return null;\n })\n .filter(function (x) { return Boolean(x); });\n};\n/**\n * Marks everything except given node(or nodes) as aria-hidden\n * @param {Element | Element[]} originalTarget - elements to keep on the page\n * @param [parentNode] - top element, defaults to document.body\n * @param {String} [markerName] - a special attribute to mark every node\n * @param {String} [controlAttribute] - html Attribute to control\n * @return {Undo} undo command\n */\nvar applyAttributeToOthers = function (originalTarget, parentNode, markerName, controlAttribute) {\n var targets = correctTargets(parentNode, Array.isArray(originalTarget) ? originalTarget : [originalTarget]);\n if (!markerMap[markerName]) {\n markerMap[markerName] = new WeakMap();\n }\n var markerCounter = markerMap[markerName];\n var hiddenNodes = [];\n var elementsToKeep = new Set();\n var elementsToStop = new Set(targets);\n var keep = function (el) {\n if (!el || elementsToKeep.has(el)) {\n return;\n }\n elementsToKeep.add(el);\n keep(el.parentNode);\n };\n targets.forEach(keep);\n var deep = function (parent) {\n if (!parent || elementsToStop.has(parent)) {\n return;\n }\n Array.prototype.forEach.call(parent.children, function (node) {\n if (elementsToKeep.has(node)) {\n deep(node);\n }\n else {\n try {\n var attr = node.getAttribute(controlAttribute);\n var alreadyHidden = attr !== null && attr !== 'false';\n var counterValue = (counterMap.get(node) || 0) + 1;\n var markerValue = (markerCounter.get(node) || 0) + 1;\n counterMap.set(node, counterValue);\n markerCounter.set(node, markerValue);\n hiddenNodes.push(node);\n if (counterValue === 1 && alreadyHidden) {\n uncontrolledNodes.set(node, true);\n }\n if (markerValue === 1) {\n node.setAttribute(markerName, 'true');\n }\n if (!alreadyHidden) {\n node.setAttribute(controlAttribute, 'true');\n }\n }\n catch (e) {\n console.error('aria-hidden: cannot operate on ', node, e);\n }\n }\n });\n };\n deep(parentNode);\n elementsToKeep.clear();\n lockCount++;\n return function () {\n hiddenNodes.forEach(function (node) {\n var counterValue = counterMap.get(node) - 1;\n var markerValue = markerCounter.get(node) - 1;\n counterMap.set(node, counterValue);\n markerCounter.set(node, markerValue);\n if (!counterValue) {\n if (!uncontrolledNodes.has(node)) {\n node.removeAttribute(controlAttribute);\n }\n uncontrolledNodes.delete(node);\n }\n if (!markerValue) {\n node.removeAttribute(markerName);\n }\n });\n lockCount--;\n if (!lockCount) {\n // clear\n counterMap = new WeakMap();\n counterMap = new WeakMap();\n uncontrolledNodes = new WeakMap();\n markerMap = {};\n }\n };\n};\n/**\n * Marks everything except given node(or nodes) as aria-hidden\n * @param {Element | Element[]} originalTarget - elements to keep on the page\n * @param [parentNode] - top element, defaults to document.body\n * @param {String} [markerName] - a special attribute to mark every node\n * @return {Undo} undo command\n */\nexport var hideOthers = function (originalTarget, parentNode, markerName) {\n if (markerName === void 0) { markerName = 'data-aria-hidden'; }\n var targets = Array.from(Array.isArray(originalTarget) ? originalTarget : [originalTarget]);\n var activeParentNode = parentNode || getDefaultParent(originalTarget);\n if (!activeParentNode) {\n return function () { return null; };\n }\n // we should not hide ariaLive elements - https://github.com/theKashey/aria-hidden/issues/10\n targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll('[aria-live]')));\n return applyAttributeToOthers(targets, activeParentNode, markerName, 'aria-hidden');\n};\n/**\n * Marks everything except given node(or nodes) as inert\n * @param {Element | Element[]} originalTarget - elements to keep on the page\n * @param [parentNode] - top element, defaults to document.body\n * @param {String} [markerName] - a special attribute to mark every node\n * @return {Undo} undo command\n */\nexport var inertOthers = function (originalTarget, parentNode, markerName) {\n if (markerName === void 0) { markerName = 'data-inert-ed'; }\n var activeParentNode = parentNode || getDefaultParent(originalTarget);\n if (!activeParentNode) {\n return function () { return null; };\n }\n return applyAttributeToOthers(originalTarget, activeParentNode, markerName, 'inert');\n};\n/**\n * @returns if current browser supports inert\n */\nexport var supportsInert = function () {\n return typeof HTMLElement !== 'undefined' && HTMLElement.prototype.hasOwnProperty('inert');\n};\n/**\n * Automatic function to \"suppress\" DOM elements - _hide_ or _inert_ in the best possible way\n * @param {Element | Element[]} originalTarget - elements to keep on the page\n * @param [parentNode] - top element, defaults to document.body\n * @param {String} [markerName] - a special attribute to mark every node\n * @return {Undo} undo command\n */\nexport var suppressOthers = function (originalTarget, parentNode, markerName) {\n if (markerName === void 0) { markerName = 'data-suppressed'; }\n return (supportsInert() ? inertOthers : hideOthers)(originalTarget, parentNode, markerName);\n};\n", "export {\n createDialogScope,\n //\n Dialog,\n DialogTrigger,\n DialogPortal,\n DialogOverlay,\n DialogContent,\n DialogTitle,\n DialogDescription,\n DialogClose,\n //\n Root,\n Trigger,\n Portal,\n Overlay,\n Content,\n Title,\n Description,\n Close,\n //\n WarningProvider,\n} from './Dialog';\nexport type {\n DialogProps,\n DialogTriggerProps,\n DialogPortalProps,\n DialogOverlayProps,\n DialogContentProps,\n DialogTitleProps,\n DialogDescriptionProps,\n DialogCloseProps,\n} from './Dialog';\n", "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContext, createContextScope } from '@radix-ui/react-context';\nimport { useId } from '@radix-ui/react-id';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { DismissableLayer } from '@radix-ui/react-dismissable-layer';\nimport { FocusScope } from '@radix-ui/react-focus-scope';\nimport { Portal as PortalPrimitive } from '@radix-ui/react-portal';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useFocusGuards } from '@radix-ui/react-focus-guards';\nimport { RemoveScroll } from 'react-remove-scroll';\nimport { hideOthers } from 'aria-hidden';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Dialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst DIALOG_NAME = 'Dialog';\n\ntype ScopedProps

= P & { __scopeDialog?: Scope };\nconst [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);\n\ntype DialogContextValue = {\n triggerRef: React.RefObject;\n contentRef: React.RefObject;\n contentId: string;\n titleId: string;\n descriptionId: string;\n open: boolean;\n onOpenChange(open: boolean): void;\n onOpenToggle(): void;\n modal: boolean;\n};\n\nconst [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);\n\ninterface DialogProps {\n children?: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?(open: boolean): void;\n modal?: boolean;\n}\n\nconst Dialog: React.FC = (props: ScopedProps) => {\n const {\n __scopeDialog,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n modal = true,\n } = props;\n const triggerRef = React.useRef(null);\n const contentRef = React.useRef(null);\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n return (\n setOpen((prevOpen) => !prevOpen), [setOpen])}\n modal={modal}\n >\n {children}\n \n );\n};\n\nDialog.displayName = DIALOG_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'DialogTrigger';\n\ntype DialogTriggerElement = React.ElementRef;\ntype PrimitiveButtonProps = Radix.ComponentPropsWithoutRef;\ninterface DialogTriggerProps extends PrimitiveButtonProps {}\n\nconst DialogTrigger = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeDialog, ...triggerProps } = props;\n const context = useDialogContext(TRIGGER_NAME, __scopeDialog);\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);\n return (\n \n );\n }\n);\n\nDialogTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'DialogPortal';\n\ntype PortalContextValue = { forceMount?: true };\nconst [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, {\n forceMount: undefined,\n});\n\ntype PortalProps = React.ComponentPropsWithoutRef;\ninterface DialogPortalProps extends Omit {\n children?: React.ReactNode;\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst DialogPortal: React.FC = (props: ScopedProps) => {\n const { __scopeDialog, forceMount, children, container } = props;\n const context = useDialogContext(PORTAL_NAME, __scopeDialog);\n return (\n \n {React.Children.map(children, (child) => (\n \n \n {child}\n \n \n ))}\n \n );\n};\n\nDialogPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'DialogOverlay';\n\ntype DialogOverlayElement = DialogOverlayImplElement;\ninterface DialogOverlayProps extends DialogOverlayImplProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst DialogOverlay = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);\n const { forceMount = portalContext.forceMount, ...overlayProps } = props;\n const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);\n return context.modal ? (\n \n \n \n ) : null;\n }\n);\n\nDialogOverlay.displayName = OVERLAY_NAME;\n\ntype DialogOverlayImplElement = React.ElementRef;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef;\ninterface DialogOverlayImplProps extends PrimitiveDivProps {}\n\nconst DialogOverlayImpl = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeDialog, ...overlayProps } = props;\n const context = useDialogContext(OVERLAY_NAME, __scopeDialog);\n return (\n // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`\n // ie. when `Overlay` and `Content` are siblings\n \n \n \n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * DialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'DialogContent';\n\ntype DialogContentElement = DialogContentTypeElement;\ninterface DialogContentProps extends DialogContentTypeProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst DialogContent = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog);\n const { forceMount = portalContext.forceMount, ...contentProps } = props;\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n return (\n \n {context.modal ? (\n \n ) : (\n \n )}\n \n );\n }\n);\n\nDialogContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentTypeElement = DialogContentImplElement;\ninterface DialogContentTypeProps\n extends Omit {}\n\nconst DialogContentModal = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n const contentRef = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n const content = contentRef.current;\n if (content) return hideOthers(content);\n }, []);\n\n return (\n {\n event.preventDefault();\n context.triggerRef.current?.focus();\n })}\n onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => {\n const originalEvent = event.detail.originalEvent;\n const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick;\n\n // If the event is a right-click, we shouldn't close because\n // it is effectively as if we right-clicked the `Overlay`.\n if (isRightClick) event.preventDefault();\n })}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) =>\n event.preventDefault()\n )}\n />\n );\n }\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst DialogContentNonModal = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n const hasInteractedOutsideRef = React.useRef(false);\n const hasPointerDownOutsideRef = React.useRef(false);\n\n return (\n {\n props.onCloseAutoFocus?.(event);\n\n if (!event.defaultPrevented) {\n if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault();\n }\n\n hasInteractedOutsideRef.current = false;\n hasPointerDownOutsideRef.current = false;\n }}\n onInteractOutside={(event) => {\n props.onInteractOutside?.(event);\n\n if (!event.defaultPrevented) {\n hasInteractedOutsideRef.current = true;\n if (event.detail.originalEvent.type === 'pointerdown') {\n hasPointerDownOutsideRef.current = true;\n }\n }\n\n // Prevent dismissing when clicking the trigger.\n // As the trigger is already setup to close, without doing so would\n // cause it to close and immediately open.\n const target = event.target as HTMLElement;\n const targetIsTrigger = context.triggerRef.current?.contains(target);\n if (targetIsTrigger) event.preventDefault();\n\n // On Safari if the trigger is inside a container with tabIndex={0}, when clicked\n // we will get the pointer down outside event on the trigger, but then a subsequent\n // focus outside event on the container, we ignore any focus outside event when we've\n // already had a pointer down outside event.\n if (event.detail.originalEvent.type === 'focusin' && hasPointerDownOutsideRef.current) {\n event.preventDefault();\n }\n }}\n />\n );\n }\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentImplElement = React.ElementRef;\ntype DismissableLayerProps = Radix.ComponentPropsWithoutRef;\ntype FocusScopeProps = Radix.ComponentPropsWithoutRef;\ninterface DialogContentImplProps extends Omit {\n /**\n * When `true`, focus cannot escape the `Content` via keyboard,\n * pointer, or a programmatic focus.\n * @defaultValue false\n */\n trapFocus?: FocusScopeProps['trapped'];\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];\n}\n\nconst DialogContentImpl = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;\n const context = useDialogContext(CONTENT_NAME, __scopeDialog);\n const contentRef = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, contentRef);\n\n // Make sure the whole tree has focus guards as our `Dialog` will be\n // the last element in the DOM (beacuse of the `Portal`)\n useFocusGuards();\n\n return (\n <>\n \n context.onOpenChange(false)}\n />\n \n {process.env.NODE_ENV !== 'production' && (\n <>\n \n \n \n )}\n \n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'DialogTitle';\n\ntype DialogTitleElement = React.ElementRef;\ntype PrimitiveHeading2Props = Radix.ComponentPropsWithoutRef;\ninterface DialogTitleProps extends PrimitiveHeading2Props {}\n\nconst DialogTitle = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeDialog, ...titleProps } = props;\n const context = useDialogContext(TITLE_NAME, __scopeDialog);\n return ;\n }\n);\n\nDialogTitle.displayName = TITLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DESCRIPTION_NAME = 'DialogDescription';\n\ntype DialogDescriptionElement = React.ElementRef;\ntype PrimitiveParagraphProps = Radix.ComponentPropsWithoutRef;\ninterface DialogDescriptionProps extends PrimitiveParagraphProps {}\n\nconst DialogDescription = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeDialog, ...descriptionProps } = props;\n const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);\n return ;\n }\n);\n\nDialogDescription.displayName = DESCRIPTION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'DialogClose';\n\ntype DialogCloseElement = React.ElementRef;\ninterface DialogCloseProps extends PrimitiveButtonProps {}\n\nconst DialogClose = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeDialog, ...closeProps } = props;\n const context = useDialogContext(CLOSE_NAME, __scopeDialog);\n return (\n context.onOpenChange(false))}\n />\n );\n }\n);\n\nDialogClose.displayName = CLOSE_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed';\n}\n\nconst TITLE_WARNING_NAME = 'DialogTitleWarning';\n\nconst [WarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {\n contentName: CONTENT_NAME,\n titleName: TITLE_NAME,\n docsSlug: 'dialog',\n});\n\ntype TitleWarningProps = { titleId?: string };\n\nconst TitleWarning: React.FC = ({ titleId }) => {\n const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);\n\n const MESSAGE = `\\`${titleWarningContext.contentName}\\` requires a \\`${titleWarningContext.titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleWarningContext.titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;\n\n React.useEffect(() => {\n if (titleId) {\n const hasTitle = document.getElementById(titleId);\n if (!hasTitle) throw new Error(MESSAGE);\n }\n }, [MESSAGE, titleId]);\n\n return null;\n};\n\nconst DESCRIPTION_WARNING_NAME = 'DialogDescriptionWarning';\n\ntype DescriptionWarningProps = {\n contentRef: React.RefObject;\n descriptionId?: string;\n};\n\nconst DescriptionWarning: React.FC = ({ contentRef, descriptionId }) => {\n const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);\n const MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby={undefined}\\` for {${descriptionWarningContext.contentName}}.`;\n\n React.useEffect(() => {\n const describedById = contentRef.current?.getAttribute('aria-describedby');\n // if we have an id and the user hasn't set aria-describedby={undefined}\n if (descriptionId && describedById) {\n const hasDescription = document.getElementById(descriptionId);\n if (!hasDescription) console.warn(MESSAGE);\n }\n }, [MESSAGE, contentRef, descriptionId]);\n\n return null;\n};\n\nconst Root = Dialog;\nconst Trigger = DialogTrigger;\nconst Portal = DialogPortal;\nconst Overlay = DialogOverlay;\nconst Content = DialogContent;\nconst Title = DialogTitle;\nconst Description = DialogDescription;\nconst Close = DialogClose;\n\nexport {\n createDialogScope,\n //\n Dialog,\n DialogTrigger,\n DialogPortal,\n DialogOverlay,\n DialogContent,\n DialogTitle,\n DialogDescription,\n DialogClose,\n //\n Root,\n Trigger,\n Portal,\n Overlay,\n Content,\n Title,\n Description,\n Close,\n //\n WarningProvider,\n};\nexport type {\n DialogProps,\n DialogTriggerProps,\n DialogPortalProps,\n DialogOverlayProps,\n DialogContentProps,\n DialogTitleProps,\n DialogDescriptionProps,\n DialogCloseProps,\n};\n", "export {\n createCollapsibleScope,\n //\n Collapsible,\n CollapsibleTrigger,\n CollapsibleContent,\n //\n Root,\n Trigger,\n Content,\n} from './Collapsible';\nexport type {\n CollapsibleProps,\n CollapsibleTriggerProps,\n CollapsibleContentProps,\n} from './Collapsible';\n", "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Presence } from '@radix-ui/react-presence';\nimport { useId } from '@radix-ui/react-id';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Collapsible\n * -----------------------------------------------------------------------------------------------*/\n\nconst COLLAPSIBLE_NAME = 'Collapsible';\n\ntype ScopedProps

= P & { __scopeCollapsible?: Scope };\nconst [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);\n\ntype CollapsibleContextValue = {\n contentId: string;\n disabled?: boolean;\n open: boolean;\n onOpenToggle(): void;\n};\n\nconst [CollapsibleProvider, useCollapsibleContext] =\n createCollapsibleContext(COLLAPSIBLE_NAME);\n\ntype CollapsibleElement = React.ElementRef;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef;\ninterface CollapsibleProps extends PrimitiveDivProps {\n defaultOpen?: boolean;\n open?: boolean;\n disabled?: boolean;\n onOpenChange?(open: boolean): void;\n}\n\nconst Collapsible = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n __scopeCollapsible,\n open: openProp,\n defaultOpen,\n disabled,\n onOpenChange,\n ...collapsibleProps\n } = props;\n\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n return (\n setOpen((prevOpen) => !prevOpen), [setOpen])}\n >\n \n \n );\n }\n);\n\nCollapsible.displayName = COLLAPSIBLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'CollapsibleTrigger';\n\ntype CollapsibleTriggerElement = React.ElementRef;\ntype PrimitiveButtonProps = Radix.ComponentPropsWithoutRef;\ninterface CollapsibleTriggerProps extends PrimitiveButtonProps {}\n\nconst CollapsibleTrigger = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeCollapsible, ...triggerProps } = props;\n const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);\n return (\n \n );\n }\n);\n\nCollapsibleTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'CollapsibleContent';\n\ntype CollapsibleContentElement = CollapsibleContentImplElement;\ninterface CollapsibleContentProps extends Omit {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst CollapsibleContent = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { forceMount, ...contentProps } = props;\n const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);\n return (\n \n {({ present }) => (\n \n )}\n \n );\n }\n);\n\nCollapsibleContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype CollapsibleContentImplElement = React.ElementRef;\ninterface CollapsibleContentImplProps extends PrimitiveDivProps {\n present: boolean;\n}\n\nconst CollapsibleContentImpl = React.forwardRef<\n CollapsibleContentImplElement,\n CollapsibleContentImplProps\n>((props: ScopedProps, forwardedRef) => {\n const { __scopeCollapsible, present, children, ...contentProps } = props;\n const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);\n const [isPresent, setIsPresent] = React.useState(present);\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const heightRef = React.useRef(0);\n const height = heightRef.current;\n const widthRef = React.useRef(0);\n const width = widthRef.current;\n // when opening we want it to immediately open to retrieve dimensions\n // when closing we delay `present` to retrieve dimensions before closing\n const isOpen = context.open || isPresent;\n const isMountAnimationPreventedRef = React.useRef(isOpen);\n const originalStylesRef = React.useRef>();\n\n React.useEffect(() => {\n const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));\n return () => cancelAnimationFrame(rAF);\n }, []);\n\n useLayoutEffect(() => {\n const node = ref.current;\n if (node) {\n originalStylesRef.current = originalStylesRef.current || {\n transitionDuration: node.style.transitionDuration,\n animationName: node.style.animationName,\n };\n // block any animations/transitions so the element renders at its full dimensions\n node.style.transitionDuration = '0s';\n node.style.animationName = 'none';\n\n // get width and height from full dimensions\n const rect = node.getBoundingClientRect();\n heightRef.current = rect.height;\n widthRef.current = rect.width;\n\n // kick off any animations/transitions that were originally set up if it isn't the initial mount\n if (!isMountAnimationPreventedRef.current) {\n node.style.transitionDuration = originalStylesRef.current.transitionDuration;\n node.style.animationName = originalStylesRef.current.animationName;\n }\n\n setIsPresent(present);\n }\n /**\n * depends on `context.open` because it will change to `false`\n * when a close is triggered but `present` will be `false` on\n * animation end (so when close finishes). This allows us to\n * retrieve the dimensions *before* closing.\n */\n }, [context.open, present]);\n\n return (\n

= P & { __scopeAccordion?: Scope };\nconst [createAccordionContext, createAccordionScope] = createContextScope(ACCORDION_NAME, [\n createCollectionScope,\n createCollapsibleScope,\n]);\nconst useCollapsibleScope = createCollapsibleScope();\n\ntype AccordionElement = AccordionImplMultipleElement | AccordionImplSingleElement;\ninterface AccordionSingleProps extends AccordionImplSingleProps {\n type: 'single';\n}\ninterface AccordionMultipleProps extends AccordionImplMultipleProps {\n type: 'multiple';\n}\n\nconst Accordion = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { type, ...accordionProps } = props;\n const singleProps = accordionProps as AccordionImplSingleProps;\n const multipleProps = accordionProps as AccordionImplMultipleProps;\n return (\n \n {type === 'multiple' ? (\n \n ) : (\n \n )}\n \n );\n }\n);\n\nAccordion.displayName = ACCORDION_NAME;\n\nAccordion.propTypes = {\n type(props) {\n const value = props.value || props.defaultValue;\n if (props.type && !['single', 'multiple'].includes(props.type)) {\n return new Error(\n 'Invalid prop `type` supplied to `Accordion`. Expected one of `single | multiple`.'\n );\n }\n if (props.type === 'multiple' && typeof value === 'string') {\n return new Error(\n 'Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`.'\n );\n }\n if (props.type === 'single' && Array.isArray(value)) {\n return new Error(\n 'Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`.'\n );\n }\n return null;\n },\n};\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype AccordionValueContextValue = {\n value: string[];\n onItemOpen(value: string): void;\n onItemClose(value: string): void;\n};\n\nconst [AccordionValueProvider, useAccordionValueContext] =\n createAccordionContext(ACCORDION_NAME);\n\nconst [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(\n ACCORDION_NAME,\n { collapsible: false }\n);\n\ntype AccordionImplSingleElement = AccordionImplElement;\ninterface AccordionImplSingleProps extends AccordionImplProps {\n /**\n * The controlled stateful value of the accordion item whose content is expanded.\n */\n value?: string;\n /**\n * The value of the item whose content is expanded when the accordion is initially rendered. Use\n * `defaultValue` if you do not need to control the state of an accordion.\n */\n defaultValue?: string;\n /**\n * The callback that fires when the state of the accordion changes.\n */\n onValueChange?(value: string): void;\n /**\n * Whether an accordion item can be collapsed after it has been opened.\n * @default false\n */\n collapsible?: boolean;\n}\n\nconst AccordionImplSingle = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n value: valueProp,\n defaultValue,\n onValueChange = () => {},\n collapsible = false,\n ...accordionSingleProps\n } = props;\n\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue,\n onChange: onValueChange,\n });\n\n return (\n collapsible && setValue(''), [collapsible, setValue])}\n >\n \n \n \n \n );\n }\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype AccordionImplMultipleElement = AccordionImplElement;\ninterface AccordionImplMultipleProps extends AccordionImplProps {\n /**\n * The controlled stateful value of the accordion items whose contents are expanded.\n */\n value?: string[];\n /**\n * The value of the items whose contents are expanded when the accordion is initially rendered. Use\n * `defaultValue` if you do not need to control the state of an accordion.\n */\n defaultValue?: string[];\n /**\n * The callback that fires when the state of the accordion changes.\n */\n onValueChange?(value: string[]): void;\n}\n\nconst AccordionImplMultiple = React.forwardRef<\n AccordionImplMultipleElement,\n AccordionImplMultipleProps\n>((props: ScopedProps, forwardedRef) => {\n const {\n value: valueProp,\n defaultValue,\n onValueChange = () => {},\n ...accordionMultipleProps\n } = props;\n\n const [value = [], setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue,\n onChange: onValueChange,\n });\n\n const handleItemOpen = React.useCallback(\n (itemValue: string) => setValue((prevValue = []) => [...prevValue, itemValue]),\n [setValue]\n );\n\n const handleItemClose = React.useCallback(\n (itemValue: string) =>\n setValue((prevValue = []) => prevValue.filter((value) => value !== itemValue)),\n [setValue]\n );\n\n return (\n \n \n \n \n \n );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype AccordionImplContextValue = {\n disabled?: boolean;\n direction: AccordionImplProps['dir'];\n orientation: AccordionImplProps['orientation'];\n};\n\nconst [AccordionImplProvider, useAccordionContext] =\n createAccordionContext(ACCORDION_NAME);\n\ntype AccordionImplElement = React.ElementRef;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef;\ninterface AccordionImplProps extends PrimitiveDivProps {\n /**\n * Whether or not an accordion is disabled from user interaction.\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * The layout in which the Accordion operates.\n * @default vertical\n */\n orientation?: React.AriaAttributes['aria-orientation'];\n /**\n * The language read direction.\n */\n dir?: Direction;\n}\n\nconst AccordionImpl = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeAccordion, disabled, dir, orientation = 'vertical', ...accordionProps } = props;\n const accordionRef = React.useRef(null);\n const composedRefs = useComposedRefs(accordionRef, forwardedRef);\n const getItems = useCollection(__scopeAccordion);\n const direction = useDirection(dir);\n const isDirectionLTR = direction === 'ltr';\n\n const handleKeyDown = composeEventHandlers(props.onKeyDown, (event) => {\n if (!ACCORDION_KEYS.includes(event.key)) return;\n const target = event.target as HTMLElement;\n const triggerCollection = getItems().filter((item) => !item.ref.current?.disabled);\n const triggerIndex = triggerCollection.findIndex((item) => item.ref.current === target);\n const triggerCount = triggerCollection.length;\n\n if (triggerIndex === -1) return;\n\n // Prevents page scroll while user is navigating\n event.preventDefault();\n\n let nextIndex = triggerIndex;\n const homeIndex = 0;\n const endIndex = triggerCount - 1;\n\n const moveNext = () => {\n nextIndex = triggerIndex + 1;\n if (nextIndex > endIndex) {\n nextIndex = homeIndex;\n }\n };\n\n const movePrev = () => {\n nextIndex = triggerIndex - 1;\n if (nextIndex < homeIndex) {\n nextIndex = endIndex;\n }\n };\n\n switch (event.key) {\n case 'Home':\n nextIndex = homeIndex;\n break;\n case 'End':\n nextIndex = endIndex;\n break;\n case 'ArrowRight':\n if (orientation === 'horizontal') {\n if (isDirectionLTR) {\n moveNext();\n } else {\n movePrev();\n }\n }\n break;\n case 'ArrowDown':\n if (orientation === 'vertical') {\n moveNext();\n }\n break;\n case 'ArrowLeft':\n if (orientation === 'horizontal') {\n if (isDirectionLTR) {\n movePrev();\n } else {\n moveNext();\n }\n }\n break;\n case 'ArrowUp':\n if (orientation === 'vertical') {\n movePrev();\n }\n break;\n }\n\n const clampedIndex = nextIndex % triggerCount;\n triggerCollection[clampedIndex].ref.current?.focus();\n });\n\n return (\n \n \n \n \n \n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'AccordionItem';\n\ntype AccordionItemContextValue = { open?: boolean; disabled?: boolean; triggerId: string };\nconst [AccordionItemProvider, useAccordionItemContext] =\n createAccordionContext(ITEM_NAME);\n\ntype AccordionItemElement = React.ElementRef;\ntype CollapsibleProps = Radix.ComponentPropsWithoutRef;\ninterface AccordionItemProps\n extends Omit {\n /**\n * Whether or not an accordion item is disabled from user interaction.\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * A string value for the accordion item. All items within an accordion should use a unique value.\n */\n value: string;\n}\n\n/**\n * `AccordionItem` contains all of the parts of a collapsible section inside of an `Accordion`.\n */\nconst AccordionItem = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeAccordion, value, ...accordionItemProps } = props;\n const accordionContext = useAccordionContext(ITEM_NAME, __scopeAccordion);\n const valueContext = useAccordionValueContext(ITEM_NAME, __scopeAccordion);\n const collapsibleScope = useCollapsibleScope(__scopeAccordion);\n const triggerId = useId();\n const open = (value && valueContext.value.includes(value)) || false;\n const disabled = accordionContext.disabled || props.disabled;\n\n return (\n \n {\n if (open) {\n valueContext.onItemOpen(value);\n } else {\n valueContext.onItemClose(value);\n }\n }}\n />\n \n );\n }\n);\n\nAccordionItem.displayName = ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionHeader\n * -----------------------------------------------------------------------------------------------*/\n\nconst HEADER_NAME = 'AccordionHeader';\n\ntype AccordionHeaderElement = React.ElementRef;\ntype PrimitiveHeading3Props = Radix.ComponentPropsWithoutRef;\ninterface AccordionHeaderProps extends PrimitiveHeading3Props {}\n\n/**\n * `AccordionHeader` contains the content for the parts of an `AccordionItem` that will be visible\n * whether or not its content is collapsed.\n */\nconst AccordionHeader = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeAccordion, ...headerProps } = props;\n const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);\n const itemContext = useAccordionItemContext(HEADER_NAME, __scopeAccordion);\n return (\n \n );\n }\n);\n\nAccordionHeader.displayName = HEADER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'AccordionTrigger';\n\ntype AccordionTriggerElement = React.ElementRef;\ntype CollapsibleTriggerProps = Radix.ComponentPropsWithoutRef;\ninterface AccordionTriggerProps extends CollapsibleTriggerProps {}\n\n/**\n * `AccordionTrigger` is the trigger that toggles the collapsed state of an `AccordionItem`. It\n * should always be nested inside of an `AccordionHeader`.\n */\nconst AccordionTrigger = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeAccordion, ...triggerProps } = props;\n const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);\n const itemContext = useAccordionItemContext(TRIGGER_NAME, __scopeAccordion);\n const collapsibleContext = useAccordionCollapsibleContext(TRIGGER_NAME, __scopeAccordion);\n const collapsibleScope = useCollapsibleScope(__scopeAccordion);\n return (\n \n \n \n );\n }\n);\n\nAccordionTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'AccordionContent';\n\ntype AccordionContentElement = React.ElementRef;\ntype CollapsibleContentProps = Radix.ComponentPropsWithoutRef;\ninterface AccordionContentProps extends CollapsibleContentProps {}\n\n/**\n * `AccordionContent` contains the collapsible content for an `AccordionItem`.\n */\nconst AccordionContent = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeAccordion, ...contentProps } = props;\n const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);\n const itemContext = useAccordionItemContext(CONTENT_NAME, __scopeAccordion);\n const collapsibleScope = useCollapsibleScope(__scopeAccordion);\n return (\n \n );\n }\n);\n\nAccordionContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open?: boolean) {\n return open ? 'open' : 'closed';\n}\n\nconst Root = Accordion;\nconst Item = AccordionItem;\nconst Header = AccordionHeader;\nconst Trigger = AccordionTrigger;\nconst Content = AccordionContent;\n\nexport {\n createAccordionScope,\n //\n Accordion,\n AccordionItem,\n AccordionHeader,\n AccordionTrigger,\n AccordionContent,\n //\n Root,\n Item,\n Header,\n Trigger,\n Content,\n};\nexport type {\n AccordionSingleProps,\n AccordionMultipleProps,\n AccordionItemProps,\n AccordionHeaderProps,\n AccordionTriggerProps,\n AccordionContentProps,\n};\n", "export {\n createRovingFocusGroupScope,\n //\n RovingFocusGroup,\n RovingFocusGroupItem,\n //\n Root,\n Item,\n} from './RovingFocusGroup';\nexport type { RovingFocusGroupProps, RovingFocusItemProps } from './RovingFocusGroup';\n", "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createCollection } from '@radix-ui/react-collection';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useId } from '@radix-ui/react-id';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useDirection } from '@radix-ui/react-direction';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\nconst ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';\nconst EVENT_OPTIONS = { bubbles: false, cancelable: true };\n\n/* -------------------------------------------------------------------------------------------------\n * RovingFocusGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'RovingFocusGroup';\n\ntype ItemData = { id: string; focusable: boolean; active: boolean };\nconst [Collection, useCollection, createCollectionScope] = createCollection<\n HTMLSpanElement,\n ItemData\n>(GROUP_NAME);\n\ntype ScopedProps

= P & { __scopeRovingFocusGroup?: Scope };\nconst [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope(\n GROUP_NAME,\n [createCollectionScope]\n);\n\ntype Orientation = React.AriaAttributes['aria-orientation'];\ntype Direction = 'ltr' | 'rtl';\n\ninterface RovingFocusGroupOptions {\n /**\n * The orientation of the group.\n * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n */\n orientation?: Orientation;\n /**\n * The direction of navigation between items.\n */\n dir?: Direction;\n /**\n * Whether keyboard navigation should loop around\n * @defaultValue false\n */\n loop?: boolean;\n}\n\ntype RovingContextValue = RovingFocusGroupOptions & {\n currentTabStopId: string | null;\n onItemFocus(tabStopId: string): void;\n onItemShiftTab(): void;\n onFocusableItemAdd(): void;\n onFocusableItemRemove(): void;\n};\n\nconst [RovingFocusProvider, useRovingFocusContext] =\n createRovingFocusGroupContext(GROUP_NAME);\n\ntype RovingFocusGroupElement = RovingFocusGroupImplElement;\ninterface RovingFocusGroupProps extends RovingFocusGroupImplProps {}\n\nconst RovingFocusGroup = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n return (\n \n \n \n \n \n );\n }\n);\n\nRovingFocusGroup.displayName = GROUP_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype RovingFocusGroupImplElement = React.ElementRef;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef;\ninterface RovingFocusGroupImplProps\n extends Omit,\n RovingFocusGroupOptions {\n currentTabStopId?: string | null;\n defaultCurrentTabStopId?: string;\n onCurrentTabStopIdChange?: (tabStopId: string | null) => void;\n onEntryFocus?: (event: Event) => void;\n}\n\nconst RovingFocusGroupImpl = React.forwardRef<\n RovingFocusGroupImplElement,\n RovingFocusGroupImplProps\n>((props: ScopedProps, forwardedRef) => {\n const {\n __scopeRovingFocusGroup,\n orientation,\n loop = false,\n dir,\n currentTabStopId: currentTabStopIdProp,\n defaultCurrentTabStopId,\n onCurrentTabStopIdChange,\n onEntryFocus,\n ...groupProps\n } = props;\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const direction = useDirection(dir);\n const [currentTabStopId = null, setCurrentTabStopId] = useControllableState({\n prop: currentTabStopIdProp,\n defaultProp: defaultCurrentTabStopId,\n onChange: onCurrentTabStopIdChange,\n });\n const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false);\n const handleEntryFocus = useCallbackRef(onEntryFocus);\n const getItems = useCollection(__scopeRovingFocusGroup);\n const isClickFocusRef = React.useRef(false);\n const [focusableItemsCount, setFocusableItemsCount] = React.useState(0);\n\n React.useEffect(() => {\n const node = ref.current;\n if (node) {\n node.addEventListener(ENTRY_FOCUS, handleEntryFocus);\n return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);\n }\n }, [handleEntryFocus]);\n\n return (\n setCurrentTabStopId(tabStopId),\n [setCurrentTabStopId]\n )}\n onItemShiftTab={React.useCallback(() => setIsTabbingBackOut(true), [])}\n onFocusableItemAdd={React.useCallback(\n () => setFocusableItemsCount((prevCount) => prevCount + 1),\n []\n )}\n onFocusableItemRemove={React.useCallback(\n () => setFocusableItemsCount((prevCount) => prevCount - 1),\n []\n )}\n >\n {\n isClickFocusRef.current = true;\n })}\n onFocus={composeEventHandlers(props.onFocus, (event) => {\n // We normally wouldn't need this check, because we already check\n // that the focus is on the current target and not bubbling to it.\n // We do this because Safari doesn't focus buttons when clicked, and\n // instead, the wrapper will get focused and not through a bubbling event.\n const isKeyboardFocus = !isClickFocusRef.current;\n\n if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {\n const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);\n event.currentTarget.dispatchEvent(entryFocusEvent);\n\n if (!entryFocusEvent.defaultPrevented) {\n const items = getItems().filter((item) => item.focusable);\n const activeItem = items.find((item) => item.active);\n const currentItem = items.find((item) => item.id === currentTabStopId);\n const candidateItems = [activeItem, currentItem, ...items].filter(\n Boolean\n ) as typeof items;\n const candidateNodes = candidateItems.map((item) => item.ref.current!);\n focusFirst(candidateNodes);\n }\n }\n\n isClickFocusRef.current = false;\n })}\n onBlur={composeEventHandlers(props.onBlur, () => setIsTabbingBackOut(false))}\n />\n \n );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * RovingFocusGroupItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'RovingFocusGroupItem';\n\ntype RovingFocusItemElement = React.ElementRef;\ntype PrimitiveSpanProps = Radix.ComponentPropsWithoutRef;\ninterface RovingFocusItemProps extends PrimitiveSpanProps {\n tabStopId?: string;\n focusable?: boolean;\n active?: boolean;\n}\n\nconst RovingFocusGroupItem = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n __scopeRovingFocusGroup,\n focusable = true,\n active = false,\n tabStopId,\n ...itemProps\n } = props;\n const autoId = useId();\n const id = tabStopId || autoId;\n const context = useRovingFocusContext(ITEM_NAME, __scopeRovingFocusGroup);\n const isCurrentTabStop = context.currentTabStopId === id;\n const getItems = useCollection(__scopeRovingFocusGroup);\n\n const { onFocusableItemAdd, onFocusableItemRemove } = context;\n\n React.useEffect(() => {\n if (focusable) {\n onFocusableItemAdd();\n return () => onFocusableItemRemove();\n }\n }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);\n\n return (\n \n {\n // We prevent focusing non-focusable items on `mousedown`.\n // Even though the item has tabIndex={-1}, that only means take it out of the tab order.\n if (!focusable) event.preventDefault();\n // Safari doesn't focus a button when clicked so we run our logic on mousedown also\n else context.onItemFocus(id);\n })}\n onFocus={composeEventHandlers(props.onFocus, () => context.onItemFocus(id))}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n if (event.key === 'Tab' && event.shiftKey) {\n context.onItemShiftTab();\n return;\n }\n\n if (event.target !== event.currentTarget) return;\n\n const focusIntent = getFocusIntent(event, context.orientation, context.dir);\n\n if (focusIntent !== undefined) {\n event.preventDefault();\n const items = getItems().filter((item) => item.focusable);\n let candidateNodes = items.map((item) => item.ref.current!);\n\n if (focusIntent === 'last') candidateNodes.reverse();\n else if (focusIntent === 'prev' || focusIntent === 'next') {\n if (focusIntent === 'prev') candidateNodes.reverse();\n const currentIndex = candidateNodes.indexOf(event.currentTarget);\n candidateNodes = context.loop\n ? wrapArray(candidateNodes, currentIndex + 1)\n : candidateNodes.slice(currentIndex + 1);\n }\n\n /**\n * Imperative focus during keydown is risky so we prevent React's batching updates\n * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332\n */\n setTimeout(() => focusFirst(candidateNodes));\n }\n })}\n />\n \n );\n }\n);\n\nRovingFocusGroupItem.displayName = ITEM_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\n// prettier-ignore\nconst MAP_KEY_TO_FOCUS_INTENT: Record = {\n ArrowLeft: 'prev', ArrowUp: 'prev',\n ArrowRight: 'next', ArrowDown: 'next',\n PageUp: 'first', Home: 'first',\n PageDown: 'last', End: 'last',\n};\n\nfunction getDirectionAwareKey(key: string, dir?: Direction) {\n if (dir !== 'rtl') return key;\n return key === 'ArrowLeft' ? 'ArrowRight' : key === 'ArrowRight' ? 'ArrowLeft' : key;\n}\n\ntype FocusIntent = 'first' | 'last' | 'prev' | 'next';\n\nfunction getFocusIntent(event: React.KeyboardEvent, orientation?: Orientation, dir?: Direction) {\n const key = getDirectionAwareKey(event.key, dir);\n if (orientation === 'vertical' && ['ArrowLeft', 'ArrowRight'].includes(key)) return undefined;\n if (orientation === 'horizontal' && ['ArrowUp', 'ArrowDown'].includes(key)) return undefined;\n return MAP_KEY_TO_FOCUS_INTENT[key];\n}\n\nfunction focusFirst(candidates: HTMLElement[]) {\n const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;\n for (const candidate of candidates) {\n // if focus is already where we want to go, we don't want to keep going through the candidates\n if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;\n candidate.focus();\n if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;\n }\n}\n\n/**\n * Wraps an array around itself at a given start index\n * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`\n */\nfunction wrapArray(array: T[], startIndex: number) {\n return array.map((_, index) => array[(startIndex + index) % array.length]);\n}\n\nconst Root = RovingFocusGroup;\nconst Item = RovingFocusGroupItem;\n\nexport {\n createRovingFocusGroupScope,\n //\n RovingFocusGroup,\n RovingFocusGroupItem,\n //\n Root,\n Item,\n};\nexport type { RovingFocusGroupProps, RovingFocusItemProps };\n", "export {\n createTabsScope,\n //\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n //\n Root,\n List,\n Trigger,\n Content,\n} from './Tabs';\nexport type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps } from './Tabs';\n", "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useId } from '@radix-ui/react-id';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs';\n\ntype ScopedProps

= P & { __scopeTabs?: Scope };\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\ntype TabsContextValue = {\n baseId: string;\n value?: string;\n onValueChange: (value: string) => void;\n orientation?: TabsProps['orientation'];\n dir?: TabsProps['dir'];\n activationMode?: TabsProps['activationMode'];\n};\n\nconst [TabsProvider, useTabsContext] = createTabsContext(TABS_NAME);\n\ntype TabsElement = React.ElementRef;\ntype RovingFocusGroupProps = Radix.ComponentPropsWithoutRef;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef;\ninterface TabsProps extends PrimitiveDivProps {\n /** The value for the selected tab, if controlled */\n value?: string;\n /** The value of the tab to select by default, if uncontrolled */\n defaultValue?: string;\n /** A function called when a new tab is selected */\n onValueChange?: (value: string) => void;\n /**\n * The orientation the tabs are layed out.\n * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n * @defaultValue horizontal\n */\n orientation?: RovingFocusGroupProps['orientation'];\n /**\n * The direction of navigation between toolbar items.\n */\n dir?: RovingFocusGroupProps['dir'];\n /**\n * Whether a tab is activated automatically or manually.\n * @defaultValue automatic\n * */\n activationMode?: 'automatic' | 'manual';\n}\n\nconst Tabs = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n __scopeTabs,\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n dir,\n activationMode = 'automatic',\n ...tabsProps\n } = props;\n const direction = useDirection(dir);\n const [value, setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n return (\n \n \n \n );\n }\n);\n\nTabs.displayName = TABS_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList';\n\ntype TabsListElement = React.ElementRef;\ninterface TabsListProps extends PrimitiveDivProps {\n loop?: RovingFocusGroupProps['loop'];\n}\n\nconst TabsList = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeTabs, loop = true, ...listProps } = props;\n const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n return (\n \n \n \n );\n }\n);\n\nTabsList.displayName = TAB_LIST_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger';\n\ntype TabsTriggerElement = React.ElementRef;\ntype PrimitiveButtonProps = Radix.ComponentPropsWithoutRef;\ninterface TabsTriggerProps extends PrimitiveButtonProps {\n value: string;\n}\n\nconst TabsTrigger = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeTabs, value, disabled = false, ...triggerProps } = props;\n const context = useTabsContext(TRIGGER_NAME, __scopeTabs);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n return (\n \n {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n if (!disabled && event.button === 0 && event.ctrlKey === false) {\n context.onValueChange(value);\n } else {\n // prevent focus to avoid accidental activation\n event.preventDefault();\n }\n })}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n if ([' ', 'Enter'].includes(event.key)) context.onValueChange(value);\n })}\n onFocus={composeEventHandlers(props.onFocus, () => {\n // handle \"automatic\" activation if necessary\n // ie. activate tab following focus\n const isAutomaticActivation = context.activationMode !== 'manual';\n if (!isSelected && !disabled && isAutomaticActivation) {\n context.onValueChange(value);\n }\n })}\n />\n \n );\n }\n);\n\nTabsTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent';\n\ntype TabsContentElement = React.ElementRef;\ninterface TabsContentProps extends PrimitiveDivProps {\n value: string;\n\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst TabsContent = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeTabs, value, forceMount, children, ...contentProps } = props;\n const context = useTabsContext(CONTENT_NAME, __scopeTabs);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n const isMountAnimationPreventedRef = React.useRef(isSelected);\n\n React.useEffect(() => {\n const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));\n return () => cancelAnimationFrame(rAF);\n }, []);\n\n return (\n \n {({ present }) => (\n \n );\n }\n);\n\nTabsContent.displayName = CONTENT_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n return `${baseId}-trigger-${value}`;\n}\n\nfunction makeContentId(baseId: string, value: string) {\n return `${baseId}-content-${value}`;\n}\n\nconst Root = Tabs;\nconst List = TabsList;\nconst Trigger = TabsTrigger;\nconst Content = TabsContent;\n\nexport {\n createTabsScope,\n //\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n //\n Root,\n List,\n Trigger,\n Content,\n};\nexport type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps };\n", "import { forwardRef } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport type { FlexDirection, FlexProps } from './Flex.types';\n\nconst directionClasses: Record = {\n 'row-reverse': 'flex-row',\n row: 'flex-row',\n column: 'flex-col',\n 'column-reverse': 'flex-col-reverse',\n};\n\nconst growClasses: Record = {\n 0: 'grow-0',\n 1: 'grow',\n 2: 'grow-2',\n 3: 'grow-3',\n 4: 'grow-4',\n 5: 'grow-5',\n};\n\nconst Flex: ForwardRefRenderFunction = (\n { container, direction, className, grow, ...boxProps },\n ref\n) => {\n const boxClassName = twMerge(\n container ? 'flex' : null,\n direction ? directionClasses[direction] : null,\n grow ? growClasses[grow] : null,\n className\n );\n return

;\n};\n\nexport default forwardRef(Flex);\n", "import Flex from './Flex';\n\nexport default Flex;\n\nexport type { FlexProps, FlexDirection } from './Flex.types';\n", "import { forwardRef } from 'react';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport type { IconButtonProps } from './IconButton.types';\n\n// TODO: Delete this and use Button component everywhere with left/right icon.\nconst IconButton: ForwardRefRenderFunction<\n HTMLButtonElement,\n IconButtonProps\n> = ({ children, ...buttonProps }, ref) => (\n \n);\n\nexport default forwardRef(IconButton);\n", "import IconButton from './IconButton';\n\nexport default IconButton;\n\nexport type { IconButtonProps } from './IconButton.types';\n", "/* @jsx h */\n/**\n * markdown-to-jsx is a fork of [simple-markdown v0.2.2](https://github.com/Khan/simple-markdown)\n * from Khan Academy. Thank you Khan devs for making such an awesome and extensible\n * parsing infra... without it, half of the optimizations here wouldn't be feasible. 🙏🏼\n */\nimport * as React from 'react'\n\nexport namespace MarkdownToJSX {\n /**\n * RequireAtLeastOne<{ ... }> <- only requires at least one key\n */\n type RequireAtLeastOne = Pick<\n T,\n Exclude\n > &\n {\n [K in Keys]-?: Required> & Partial>>\n }[Keys]\n\n export type CreateElement = typeof React.createElement\n\n export type HTMLTags = keyof JSX.IntrinsicElements\n\n export type State = {\n _inAnchor?: boolean\n _inline?: boolean\n _inTable?: boolean\n _key?: React.Key\n _list?: boolean\n _simple?: boolean\n }\n\n export type ParserResult = {\n [key: string]: any\n type?: string\n }\n\n export type NestedParser = (\n input: string,\n state?: MarkdownToJSX.State\n ) => MarkdownToJSX.ParserResult\n\n export type Parser = (\n capture: RegExpMatchArray,\n nestedParse: NestedParser,\n state?: MarkdownToJSX.State\n ) => ParserOutput\n\n export type RuleOutput = (\n ast: MarkdownToJSX.ParserResult,\n state: MarkdownToJSX.State\n ) => JSX.Element\n\n export type Rule = {\n _match: (\n source: string,\n state: MarkdownToJSX.State,\n prevCapturedString?: string\n ) => RegExpMatchArray\n _order: Priority\n _parse: MarkdownToJSX.Parser\n _react?: (\n node: ParserOutput,\n output: RuleOutput,\n state?: MarkdownToJSX.State\n ) => React.ReactChild\n }\n\n export type Rules = {\n [key: string]: Rule\n }\n\n export type Override =\n | RequireAtLeastOne<{\n component: React.ElementType\n props: Object\n }>\n | React.ElementType\n\n export type Overrides = {\n [tag in HTMLTags]?: Override\n } & {\n [customComponent: string]: Override\n }\n\n export type Options = Partial<{\n /**\n * Ultimate control over the output of all rendered JSX.\n */\n createElement: (\n tag: Parameters[0],\n props: JSX.IntrinsicAttributes,\n ...children: React.ReactChild[]\n ) => JSX.Element\n\n /**\n * Disable the compiler's best-effort transcription of provided raw HTML\n * into JSX-equivalent. This is the functionality that prevents the need to\n * use `dangerouslySetInnerHTML` in React.\n */\n disableParsingRawHTML: boolean\n\n /**\n * Forces the compiler to always output content with a block-level wrapper\n * (`

` or any block-level syntax your markdown already contains.)\n */\n forceBlock: boolean\n\n /**\n * Forces the compiler to always output content with an inline wrapper (``)\n */\n forceInline: boolean\n\n /**\n * Supply additional HTML entity: unicode replacement mappings.\n *\n * Pass only the inner part of the entity as the key,\n * e.g. `≤` -> `{ \"le\": \"\\u2264\" }`\n *\n * By default\n * the following entities are replaced with their unicode equivalents:\n *\n * ```\n * &\n * '\n * >\n * <\n *  \n * "\n * ```\n */\n namedCodesToUnicode: {\n [key: string]: string\n }\n\n /**\n * Selectively control the output of particular HTML tags as they would be\n * emitted by the compiler.\n */\n overrides: Overrides\n\n /**\n * Declare the type of the wrapper to be used when there are multiple\n * children to render. Set to `null` to get an array of children back\n * without any wrapper, or use `React.Fragment` to get a React element\n * that won't show up in the DOM.\n */\n wrapper: React.ElementType | null\n\n /**\n * Forces the compiler to wrap results, even if there is only a single\n * child or no children.\n */\n forceWrapper: boolean\n\n /**\n * Override normalization of non-URI-safe characters for use in generating\n * HTML IDs for anchor linking purposes.\n */\n slugify: (source: string) => string\n }>\n}\n\n/** TODO: Drop for React 16? */\nconst ATTRIBUTE_TO_JSX_PROP_MAP = [\n 'allowFullScreen',\n 'allowTransparency',\n 'autoComplete',\n 'autoFocus',\n 'autoPlay',\n 'cellPadding',\n 'cellSpacing',\n 'charSet',\n 'className',\n 'classId',\n 'colSpan',\n 'contentEditable',\n 'contextMenu',\n 'crossOrigin',\n 'encType',\n 'formAction',\n 'formEncType',\n 'formMethod',\n 'formNoValidate',\n 'formTarget',\n 'frameBorder',\n 'hrefLang',\n 'inputMode',\n 'keyParams',\n 'keyType',\n 'marginHeight',\n 'marginWidth',\n 'maxLength',\n 'mediaGroup',\n 'minLength',\n 'noValidate',\n 'radioGroup',\n 'readOnly',\n 'rowSpan',\n 'spellCheck',\n 'srcDoc',\n 'srcLang',\n 'srcSet',\n 'tabIndex',\n 'useMap',\n].reduce(\n (obj, x) => {\n obj[x.toLowerCase()] = x\n return obj\n },\n { for: 'htmlFor' }\n)\n\nconst namedCodesToUnicode = {\n amp: '\\u0026',\n apos: '\\u0027',\n gt: '\\u003e',\n lt: '\\u003c',\n nbsp: '\\u00a0',\n quot: '\\u201c',\n} as const\n\nconst DO_NOT_PROCESS_HTML_ELEMENTS = ['style', 'script']\n\n/**\n * the attribute extractor regex looks for a valid attribute name,\n * followed by an equal sign (whitespace around the equal sign is allowed), followed\n * by one of the following:\n *\n * 1. a single quote-bounded string, e.g. 'foo'\n * 2. a double quote-bounded string, e.g. \"bar\"\n * 3. an interpolation, e.g. {something}\n *\n * JSX can be be interpolated into itself and is passed through the compiler using\n * the same options and setup as the current run.\n *\n * } />\n * ==================\n * ↳ children: []\n *\n * Otherwise, interpolations are handled as strings or simple booleans\n * unless HTML syntax is detected.\n *\n * \n * ===== ====\n * ↓ ↳ disabled: true\n * ↳ color: \"green\"\n *\n * Numbers are not parsed at this time due to complexities around int, float,\n * and the upcoming bigint functionality that would make handling it unwieldy.\n * Parse the string in your component as desired.\n *\n * \n * ==================\n * ↳ someBigNumber: \"123456789123456789\"\n */\nconst ATTR_EXTRACTOR_R =\n /([-A-Z0-9_:]+)(?:\\s*=\\s*(?:(?:\"((?:\\\\.|[^\"])*)\")|(?:'((?:\\\\.|[^'])*)')|(?:\\{((?:\\\\.|{[^}]*?}|[^}])*)\\})))?/gi\n\n/** TODO: Write explainers for each of these */\n\nconst AUTOLINK_MAILTO_CHECK_R = /mailto:/i\nconst BLOCK_END_R = /\\n{2,}$/\nconst BLOCKQUOTE_R = /^( *>[^\\n]+(\\n[^\\n]+)*\\n*)+\\n{2,}/\nconst BLOCKQUOTE_TRIM_LEFT_MULTILINE_R = /^ *> ?/gm\nconst BREAK_LINE_R = /^ {2,}\\n/\nconst BREAK_THEMATIC_R = /^(?:( *[-*_])){3,} *(?:\\n *)+\\n/\nconst CODE_BLOCK_FENCED_R =\n /^\\s*(`{3,}|~{3,}) *(\\S+)?([^\\n]*?)?\\n([\\s\\S]+?)\\s*\\1 *(?:\\n *)*\\n?/\nconst CODE_BLOCK_R = /^(?: {4}[^\\n]+\\n*)+(?:\\n *)+\\n?/\nconst CODE_INLINE_R = /^(`+)\\s*([\\s\\S]*?[^`])\\s*\\1(?!`)/\nconst CONSECUTIVE_NEWLINE_R = /^(?:\\n *)*\\n/\nconst CR_NEWLINE_R = /\\r\\n?/g\nconst FOOTNOTE_R = /^\\[\\^([^\\]]+)](:.*)\\n/\nconst FOOTNOTE_REFERENCE_R = /^\\[\\^([^\\]]+)]/\nconst FORMFEED_R = /\\f/g\nconst GFM_TASK_R = /^\\s*?\\[(x|\\s)\\]/\nconst HEADING_R = /^ *(#{1,6}) *([^\\n]+?)(?: +#*)?(?:\\n *)*(?:\\n|$)/\nconst HEADING_SETEXT_R = /^([^\\n]+)\\n *(=|-){3,} *(?:\\n *)+\\n/\n\n/**\n * Explanation:\n *\n * 1. Look for a starting tag, preceded by any amount of spaces\n * ^ *<\n *\n * 2. Capture the tag name (capture 1)\n * ([^ >/]+)\n *\n * 3. Ignore a space after the starting tag and capture the attribute portion of the tag (capture 2)\n * ?([^>]*)\\/{0}>\n *\n * 4. Ensure a matching closing tag is present in the rest of the input string\n * (?=[\\s\\S]*<\\/\\1>)\n *\n * 5. Capture everything until the matching closing tag -- this might include additional pairs\n * of the same tag type found in step 2 (capture 3)\n * ((?:[\\s\\S]*?(?:<\\1[^>]*>[\\s\\S]*?<\\/\\1>)*[\\s\\S]*?)*?)<\\/\\1>\n *\n * 6. Capture excess newlines afterward\n * \\n*\n */\nconst HTML_BLOCK_ELEMENT_R =\n /^ *(?!<[a-z][^ >/]* ?\\/>)<([a-z][^ >/]*) ?([^>]*)\\/{0}>\\n?(\\s*(?:<\\1[^>]*?>[\\s\\S]*?<\\/\\1>|(?!<\\1)[\\s\\S])*?)<\\/\\1>\\n*/i\n\nconst HTML_CHAR_CODE_R = /&([a-zA-Z]+);/g\n\nconst HTML_COMMENT_R = /^)/\n\n/**\n * borrowed from React 15(https://github.com/facebook/react/blob/894d20744cba99383ffd847dbd5b6e0800355a5c/src/renderers/dom/shared/HTMLDOMPropertyConfig.js)\n */\nconst HTML_CUSTOM_ATTR_R = /^(data|aria|x)-[a-z_][a-z\\d_.-]*$/\n\nconst HTML_SELF_CLOSING_ELEMENT_R =\n /^ *<([a-z][a-z0-9:]*)(?:\\s+((?:<.*?>|[^>])*))?\\/?>(?!<\\/\\1>)(\\s*\\n)?/i\nconst INTERPOLATION_R = /^\\{.*\\}$/\nconst LINK_AUTOLINK_BARE_URL_R = /^(https?:\\/\\/[^\\s<]+[^<.,:;\"')\\]\\s])/\nconst LINK_AUTOLINK_MAILTO_R = /^<([^ >]+@[^ >]+)>/\nconst LINK_AUTOLINK_R = /^<([^ >]+:\\/[^ >]+)>/\nconst CAPTURE_LETTER_AFTER_HYPHEN = /-([a-z])?/gi\nconst NP_TABLE_R = /^(.*\\|?.*)\\n *(\\|? *[-:]+ *\\|[-| :]*)\\n((?:.*\\|.*\\n)*)\\n?/\nconst PARAGRAPH_R = /^[^\\n]+(?: \\n|\\n{2,})/\nconst REFERENCE_IMAGE_OR_LINK = /^\\[([^\\]]*)\\]:\\s+]+)>?\\s*(\"([^\"]*)\")?/\nconst REFERENCE_IMAGE_R = /^!\\[([^\\]]*)\\] ?\\[([^\\]]*)\\]/\nconst REFERENCE_LINK_R = /^\\[([^\\]]*)\\] ?\\[([^\\]]*)\\]/\nconst SQUARE_BRACKETS_R = /(\\[|\\])/g\nconst SHOULD_RENDER_AS_BLOCK_R = /(\\n|^[-*]\\s|^#|^ {2,}|^-{2,}|^>\\s)/\nconst TAB_R = /\\t/g\nconst TABLE_SEPARATOR_R = /^ *\\| */\nconst TABLE_TRIM_PIPES = /(^ *\\||\\| *$)/g\nconst TABLE_CELL_END_TRIM = / *$/\nconst TABLE_CENTER_ALIGN = /^ *:-+: *$/\nconst TABLE_LEFT_ALIGN = /^ *:-+ *$/\nconst TABLE_RIGHT_ALIGN = /^ *-+: *$/\n\nconst TEXT_BOLD_R =\n /^([*_])\\1((?:\\[.*?\\][([].*?[)\\]]|<.*?>(?:.*?<.*?>)?|`.*?`|~+.*?~+|.)*?)\\1\\1(?!\\1)/\nconst TEXT_EMPHASIZED_R =\n /^([*_])((?:\\[.*?\\][([].*?[)\\]]|<.*?>(?:.*?<.*?>)?|`.*?`|~+.*?~+|.)*?)\\1(?!\\1|\\w)/\nconst TEXT_MARKED_R = /^==((?:\\[.*?\\]|<.*?>(?:.*?<.*?>)?|`.*?`|.)*?)==/\nconst TEXT_STRIKETHROUGHED_R = /^~~((?:\\[.*?\\]|<.*?>(?:.*?<.*?>)?|`.*?`|.)*?)~~/\n\nconst TEXT_ESCAPED_R = /^\\\\([^0-9A-Za-z\\s])/\nconst TEXT_PLAIN_R =\n /^[\\s\\S]+?(?=[^0-9A-Z\\s\\u00c0-\\uffff&;.()'\"]|\\d+\\.|\\n\\n| {2,}\\n|\\w+:\\S|$)/i\n\nconst TRIM_STARTING_NEWLINES = /^\\n+/\n\nconst HTML_LEFT_TRIM_AMOUNT_R = /^([ \\t]*)/\n\nconst UNESCAPE_URL_R = /\\\\([^\\\\])/g\n\ntype LIST_TYPE = 1 | 2\nconst ORDERED: LIST_TYPE = 1\nconst UNORDERED: LIST_TYPE = 2\n\nconst LIST_ITEM_END_R = / *\\n+$/\nconst LIST_LOOKBEHIND_R = /(?:^|\\n)( *)$/\n\n// recognize a `*` `-`, `+`, `1.`, `2.`... list bullet\nconst ORDERED_LIST_BULLET = '(?:\\\\d+\\\\.)'\nconst UNORDERED_LIST_BULLET = '(?:[*+-])'\n\nfunction generateListItemPrefix(type: LIST_TYPE) {\n return (\n '( *)(' +\n (type === ORDERED ? ORDERED_LIST_BULLET : UNORDERED_LIST_BULLET) +\n ') +'\n )\n}\n\n// recognize the start of a list item:\n// leading space plus a bullet plus a space (` * `)\nconst ORDERED_LIST_ITEM_PREFIX = generateListItemPrefix(ORDERED)\nconst UNORDERED_LIST_ITEM_PREFIX = generateListItemPrefix(UNORDERED)\n\nfunction generateListItemPrefixRegex(type: LIST_TYPE) {\n return new RegExp(\n '^' +\n (type === ORDERED ? ORDERED_LIST_ITEM_PREFIX : UNORDERED_LIST_ITEM_PREFIX)\n )\n}\n\nconst ORDERED_LIST_ITEM_PREFIX_R = generateListItemPrefixRegex(ORDERED)\nconst UNORDERED_LIST_ITEM_PREFIX_R = generateListItemPrefixRegex(UNORDERED)\n\nfunction generateListItemRegex(type: LIST_TYPE) {\n // recognize an individual list item:\n // * hi\n // this is part of the same item\n //\n // as is this, which is a new paragraph in the same item\n //\n // * but this is not part of the same item\n return new RegExp(\n '^' +\n (type === ORDERED\n ? ORDERED_LIST_ITEM_PREFIX\n : UNORDERED_LIST_ITEM_PREFIX) +\n '[^\\\\n]*(?:\\\\n' +\n '(?!\\\\1' +\n (type === ORDERED ? ORDERED_LIST_BULLET : UNORDERED_LIST_BULLET) +\n ' )[^\\\\n]*)*(\\\\n|$)',\n 'gm'\n )\n}\n\nconst ORDERED_LIST_ITEM_R = generateListItemRegex(ORDERED)\nconst UNORDERED_LIST_ITEM_R = generateListItemRegex(UNORDERED)\n\n// check whether a list item has paragraphs: if it does,\n// we leave the newlines at the end\nfunction generateListRegex(type: LIST_TYPE) {\n const bullet = type === ORDERED ? ORDERED_LIST_BULLET : UNORDERED_LIST_BULLET\n\n return new RegExp(\n '^( *)(' +\n bullet +\n ') ' +\n '[\\\\s\\\\S]+?(?:\\\\n{2,}(?! )' +\n '(?!\\\\1' +\n bullet +\n ' (?!' +\n bullet +\n ' ))\\\\n*' +\n // the \\\\s*$ here is so that we can parse the inside of nested\n // lists, where our content might end before we receive two `\\n`s\n '|\\\\s*\\\\n*$)'\n )\n}\n\nconst ORDERED_LIST_R = generateListRegex(ORDERED)\nconst UNORDERED_LIST_R = generateListRegex(UNORDERED)\n\nfunction generateListRule(h: any, type: LIST_TYPE) {\n const ordered = type === ORDERED\n const LIST_R = ordered ? ORDERED_LIST_R : UNORDERED_LIST_R\n const LIST_ITEM_R = ordered ? ORDERED_LIST_ITEM_R : UNORDERED_LIST_ITEM_R\n const LIST_ITEM_PREFIX_R = ordered\n ? ORDERED_LIST_ITEM_PREFIX_R\n : UNORDERED_LIST_ITEM_PREFIX_R\n\n return {\n _match(source, state, prevCapture) {\n // We only want to break into a list if we are at the start of a\n // line. This is to avoid parsing \"hi * there\" with \"* there\"\n // becoming a part of a list.\n // You might wonder, \"but that's inline, so of course it wouldn't\n // start a list?\". You would be correct! Except that some of our\n // lists can be inline, because they might be inside another list,\n // in which case we can parse with inline scope, but need to allow\n // nested lists inside this inline scope.\n const isStartOfLine = LIST_LOOKBEHIND_R.exec(prevCapture)\n const isListBlock = state._list || (!state._inline && !state._simple)\n\n if (isStartOfLine && isListBlock) {\n source = isStartOfLine[1] + source\n\n return LIST_R.exec(source)\n } else {\n return null\n }\n },\n _order: Priority.HIGH,\n _parse(capture, parse, state) {\n const bullet = capture[2]\n const start = ordered ? +bullet : undefined\n const items = capture[0]\n // recognize the end of a paragraph block inside a list item:\n // two or more newlines at end end of the item\n .replace(BLOCK_END_R, '\\n')\n .match(LIST_ITEM_R)\n\n let lastItemWasAParagraph = false\n const itemContent = items.map(function (item, i) {\n // We need to see how far indented the item is:\n const space = LIST_ITEM_PREFIX_R.exec(item)[0].length\n\n // And then we construct a regex to \"unindent\" the subsequent\n // lines of the items by that amount:\n const spaceRegex = new RegExp('^ {1,' + space + '}', 'gm')\n\n // Before processing the item, we need a couple things\n const content = item\n // remove indents on trailing lines:\n .replace(spaceRegex, '')\n // remove the bullet:\n .replace(LIST_ITEM_PREFIX_R, '')\n\n // Handling \"loose\" lists, like:\n //\n // * this is wrapped in a paragraph\n //\n // * as is this\n //\n // * as is this\n const isLastItem = i === items.length - 1\n const containsBlocks = content.indexOf('\\n\\n') !== -1\n\n // Any element in a list is a block if it contains multiple\n // newlines. The last element in the list can also be a block\n // if the previous item in the list was a block (this is\n // because non-last items in the list can end with \\n\\n, but\n // the last item can't, so we just \"inherit\" this property\n // from our previous element).\n const thisItemIsAParagraph =\n containsBlocks || (isLastItem && lastItemWasAParagraph)\n lastItemWasAParagraph = thisItemIsAParagraph\n\n // backup our state for restoration afterwards. We're going to\n // want to set state._list to true, and state._inline depending\n // on our list's looseness.\n const oldStateInline = state._inline\n const oldStateList = state._list\n state._list = true\n\n // Parse inline if we're in a tight list, or block if we're in\n // a loose list.\n let adjustedContent\n if (thisItemIsAParagraph) {\n state._inline = false\n adjustedContent = content.replace(LIST_ITEM_END_R, '\\n\\n')\n } else {\n state._inline = true\n adjustedContent = content.replace(LIST_ITEM_END_R, '')\n }\n\n const result = parse(adjustedContent, state)\n\n // Restore our state before returning\n state._inline = oldStateInline\n state._list = oldStateList\n\n return result\n })\n\n return {\n _items: itemContent,\n _ordered: ordered,\n _start: start,\n }\n },\n _react(node, output, state) {\n const Tag = node._ordered ? 'ol' : 'ul'\n\n return (\n \n {node._items.map(function generateListItem(item, i) {\n return

  • {output(item, state)}
  • \n })}\n \n )\n },\n } as MarkdownToJSX.Rule<{\n _items: MarkdownToJSX.ParserResult[]\n _ordered: boolean\n _start?: number\n }>\n}\n\nconst LINK_R = /^\\[([^\\]]*)]\\( *((?:\\([^)]*\\)|[^() ])*) *\"?([^)\"]*)?\"?\\)/\nconst IMAGE_R = /^!\\[([^\\]]*)]\\( *((?:\\([^)]*\\)|[^() ])*) *\"?([^)\"]*)?\"?\\)/\n\nconst NON_PARAGRAPH_BLOCK_SYNTAXES = [\n BLOCKQUOTE_R,\n CODE_BLOCK_FENCED_R,\n CODE_BLOCK_R,\n HEADING_R,\n HEADING_SETEXT_R,\n HTML_COMMENT_R,\n NP_TABLE_R,\n ORDERED_LIST_ITEM_R,\n ORDERED_LIST_R,\n UNORDERED_LIST_ITEM_R,\n UNORDERED_LIST_R,\n]\n\nconst BLOCK_SYNTAXES = [\n ...NON_PARAGRAPH_BLOCK_SYNTAXES,\n PARAGRAPH_R,\n HTML_BLOCK_ELEMENT_R,\n HTML_SELF_CLOSING_ELEMENT_R,\n]\n\nfunction containsBlockSyntax(input: string) {\n return BLOCK_SYNTAXES.some(r => r.test(input))\n}\n\n/** Remove symmetrical leading and trailing quotes */\nfunction unquote(str: string) {\n const first = str[0]\n if (\n (first === '\"' || first === \"'\") &&\n str.length >= 2 &&\n str[str.length - 1] === first\n ) {\n return str.slice(1, -1)\n }\n return str\n}\n\n// based on https://stackoverflow.com/a/18123682/1141611\n// not complete, but probably good enough\nfunction slugify(str: string) {\n return str\n .replace(/[ÀÁÂÃÄÅàáâãäåæÆ]/g, 'a')\n .replace(/[çÇ]/g, 'c')\n .replace(/[ðÐ]/g, 'd')\n .replace(/[ÈÉÊËéèêë]/g, 'e')\n .replace(/[ÏïÎîÍíÌì]/g, 'i')\n .replace(/[Ññ]/g, 'n')\n .replace(/[øØœŒÕõÔôÓóÒò]/g, 'o')\n .replace(/[ÜüÛûÚúÙù]/g, 'u')\n .replace(/[ŸÿÝý]/g, 'y')\n .replace(/[^a-z0-9- ]/gi, '')\n .replace(/ /gi, '-')\n .toLowerCase()\n}\n\nfunction parseTableAlignCapture(alignCapture: string) {\n if (TABLE_RIGHT_ALIGN.test(alignCapture)) {\n return 'right'\n } else if (TABLE_CENTER_ALIGN.test(alignCapture)) {\n return 'center'\n } else if (TABLE_LEFT_ALIGN.test(alignCapture)) {\n return 'left'\n }\n\n return null\n}\n\nfunction parseTableRow(\n source: string,\n parse: MarkdownToJSX.NestedParser,\n state: MarkdownToJSX.State\n) {\n const prevInTable = state._inTable\n state._inTable = true\n const tableRow = parse(source.trim(), state)\n state._inTable = prevInTable\n\n let cells = [[]]\n tableRow.forEach(function (node, i) {\n if (node.type === 'tableSeparator') {\n // Filter out empty table separators at the start/end:\n if (i !== 0 && i !== tableRow.length - 1) {\n // Split the current row:\n cells.push([])\n }\n } else {\n if (\n node.type === 'text' &&\n (tableRow[i + 1] == null || tableRow[i + 1].type === 'tableSeparator')\n ) {\n node._content = node._content.replace(TABLE_CELL_END_TRIM, '')\n }\n cells[cells.length - 1].push(node)\n }\n })\n return cells\n}\n\nfunction parseTableAlign(source: string /*, parse, state*/) {\n const alignText = source.replace(TABLE_TRIM_PIPES, '').split('|')\n\n return alignText.map(parseTableAlignCapture)\n}\n\nfunction parseTableCells(\n source: string,\n parse: MarkdownToJSX.NestedParser,\n state: MarkdownToJSX.State\n) {\n const rowsText = source.trim().split('\\n')\n\n return rowsText.map(function (rowText) {\n return parseTableRow(rowText, parse, state)\n })\n}\n\nfunction parseTable(\n capture: RegExpMatchArray,\n parse: MarkdownToJSX.NestedParser,\n state: MarkdownToJSX.State\n) {\n state._inline = true\n const header = parseTableRow(capture[1], parse, state)\n const align = parseTableAlign(capture[2])\n const cells = parseTableCells(capture[3], parse, state)\n state._inline = false\n\n return {\n _align: align,\n _cells: cells,\n _header: header,\n type: 'table',\n }\n}\n\nfunction getTableStyle(node, colIndex) {\n return node._align[colIndex] == null\n ? {}\n : {\n textAlign: node._align[colIndex],\n }\n}\n\n/** TODO: remove for react 16 */\nfunction normalizeAttributeKey(key) {\n const hyphenIndex = key.indexOf('-')\n\n if (hyphenIndex !== -1 && key.match(HTML_CUSTOM_ATTR_R) === null) {\n key = key.replace(CAPTURE_LETTER_AFTER_HYPHEN, function (_, letter) {\n return letter.toUpperCase()\n })\n }\n\n return key\n}\n\nfunction attributeValueToJSXPropValue(\n key: keyof React.AllHTMLAttributes,\n value: string\n): any {\n if (key === 'style') {\n return value.split(/;\\s?/).reduce(function (styles, kvPair) {\n const key = kvPair.slice(0, kvPair.indexOf(':'))\n\n // snake-case to camelCase\n // also handles PascalCasing vendor prefixes\n const camelCasedKey = key.replace(/(-[a-z])/g, substr =>\n substr[1].toUpperCase()\n )\n\n // key.length + 1 to skip over the colon\n styles[camelCasedKey] = kvPair.slice(key.length + 1).trim()\n\n return styles\n }, {})\n } else if (key === 'href') {\n return sanitizeUrl(value)\n } else if (value.match(INTERPOLATION_R)) {\n // return as a string and let the consumer decide what to do with it\n value = value.slice(1, value.length - 1)\n }\n\n if (value === 'true') {\n return true\n } else if (value === 'false') {\n return false\n }\n\n return value\n}\n\nfunction normalizeWhitespace(source: string): string {\n return source\n .replace(CR_NEWLINE_R, '\\n')\n .replace(FORMFEED_R, '')\n .replace(TAB_R, ' ')\n}\n\n/**\n * Creates a parser for a given set of rules, with the precedence\n * specified as a list of rules.\n *\n * @rules: an object containing\n * rule type -> {match, order, parse} objects\n * (lower order is higher precedence)\n * (Note: `order` is added to defaultRules after creation so that\n * the `order` of defaultRules in the source matches the `order`\n * of defaultRules in terms of `order` fields.)\n *\n * @returns The resulting parse function, with the following parameters:\n * @source: the input source string to be parsed\n * @state: an optional object to be threaded through parse\n * calls. Allows clients to add stateful operations to\n * parsing, such as keeping track of how many levels deep\n * some nesting is. For an example use-case, see passage-ref\n * parsing in src/widgets/passage/passage-markdown.jsx\n */\nfunction parserFor(\n rules: MarkdownToJSX.Rules\n): (\n source: string,\n state: MarkdownToJSX.State\n) => ReturnType {\n // Sorts rules in order of increasing order, then\n // ascending rule name in case of ties.\n let ruleList = Object.keys(rules)\n\n /* istanbul ignore next */\n if (process.env.NODE_ENV !== 'production') {\n ruleList.forEach(function (type) {\n let order = rules[type]._order\n if (\n process.env.NODE_ENV !== 'production' &&\n (typeof order !== 'number' || !isFinite(order))\n ) {\n console.warn(\n 'markdown-to-jsx: Invalid order for rule `' + type + '`: ' + order\n )\n }\n })\n }\n\n ruleList.sort(function (typeA, typeB) {\n let orderA = rules[typeA]._order\n let orderB = rules[typeB]._order\n\n // First sort based on increasing order\n if (orderA !== orderB) {\n return orderA - orderB\n\n // Then based on increasing unicode lexicographic ordering\n } else if (typeA < typeB) {\n return -1\n }\n\n return 1\n })\n\n function nestedParse(\n source: string,\n state: MarkdownToJSX.State\n ): MarkdownToJSX.ParserResult[] {\n let result = []\n\n // We store the previous capture so that match functions can\n // use some limited amount of lookbehind. Lists use this to\n // ensure they don't match arbitrary '- ' or '* ' in inline\n // text (see the list rule for more information).\n let prevCapture = ''\n while (source) {\n let i = 0\n while (i < ruleList.length) {\n const ruleType = ruleList[i]\n const rule = rules[ruleType]\n const capture = rule._match(source, state, prevCapture)\n\n if (capture) {\n const currCaptureString = capture[0]\n source = source.substring(currCaptureString.length)\n const parsed = rule._parse(capture, nestedParse, state)\n\n // We also let rules override the default type of\n // their parsed node if they would like to, so that\n // there can be a single output function for all links,\n // even if there are several rules to parse them.\n if (parsed.type == null) {\n parsed.type = ruleType\n }\n\n result.push(parsed)\n\n prevCapture = currCaptureString\n break\n }\n\n i++\n }\n }\n\n return result\n }\n\n return function outerParse(source, state) {\n return nestedParse(normalizeWhitespace(source), state)\n }\n}\n\n// Creates a match function for an inline scoped or simple element from a regex\nfunction inlineRegex(regex: RegExp) {\n return function match(source, state: MarkdownToJSX.State) {\n if (state._inline) {\n return regex.exec(source)\n } else {\n return null\n }\n }\n}\n\n// basically any inline element except links\nfunction simpleInlineRegex(regex: RegExp) {\n return function match(source: string, state: MarkdownToJSX.State) {\n if (state._inline || state._simple) {\n return regex.exec(source)\n } else {\n return null\n }\n }\n}\n\n// Creates a match function for a block scoped element from a regex\nfunction blockRegex(regex: RegExp) {\n return function match(source: string, state: MarkdownToJSX.State) {\n if (state._inline || state._simple) {\n return null\n } else {\n return regex.exec(source)\n }\n }\n}\n\n// Creates a match function from a regex, ignoring block/inline scope\nfunction anyScopeRegex(regex: RegExp) {\n return function match(source: string /*, state*/) {\n return regex.exec(source)\n }\n}\n\nfunction matchParagraph(\n source: string,\n state: MarkdownToJSX.State,\n prevCapturedString?: string\n) {\n if (state._inline || state._simple) {\n return null\n }\n\n if (prevCapturedString && !prevCapturedString.endsWith('\\n')) {\n // don't match continuation of a line\n return null\n }\n\n let match = ''\n\n source.split('\\n').every(line => {\n // bail out on first sign of non-paragraph block\n if (NON_PARAGRAPH_BLOCK_SYNTAXES.some(regex => regex.test(line))) {\n return false\n }\n match += line + '\\n'\n return line.trim()\n })\n\n const captured = match.trimEnd()\n if (captured == '') {\n return null\n }\n\n return [match, captured]\n}\n\nfunction reactFor(outputFunc) {\n return function nestedReactOutput(\n ast: MarkdownToJSX.ParserResult | MarkdownToJSX.ParserResult[],\n state: MarkdownToJSX.State = {}\n ): React.ReactChild[] {\n if (Array.isArray(ast)) {\n const oldKey = state._key\n const result = []\n\n // map nestedOutput over the ast, except group any text\n // nodes together into a single string output.\n let lastWasString = false\n\n for (let i = 0; i < ast.length; i++) {\n state._key = i\n\n const nodeOut = nestedReactOutput(ast[i], state)\n const isString = typeof nodeOut === 'string'\n\n if (isString && lastWasString) {\n result[result.length - 1] += nodeOut\n } else if (nodeOut !== null) {\n result.push(nodeOut)\n }\n\n lastWasString = isString\n }\n\n state._key = oldKey\n\n return result\n }\n\n return outputFunc(ast, nestedReactOutput, state)\n }\n}\n\nfunction sanitizeUrl(url: string): string | null {\n try {\n const decoded = decodeURIComponent(url).replace(/[^A-Za-z0-9/:]/g, '')\n\n if (decoded.match(/^\\s*(javascript|vbscript|data(?!:image)):/i)) {\n if (process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Anchor URL contains an unsafe JavaScript/VBScript/data expression, it will not be rendered.',\n decoded\n )\n }\n\n return null\n }\n } catch (e) {\n if (process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Anchor URL could not be decoded due to malformed syntax or characters, it will not be rendered.',\n url\n )\n }\n\n // decodeURIComponent sometimes throws a URIError\n // See `decodeURIComponent('a%AFc');`\n // http://stackoverflow.com/questions/9064536/javascript-decodeuricomponent-malformed-uri-exception\n return null\n }\n\n return url\n}\n\nfunction unescapeUrl(rawUrlString: string): string {\n return rawUrlString.replace(UNESCAPE_URL_R, '$1')\n}\n\n/**\n * Everything inline, including links.\n */\nfunction parseInline(\n parse: MarkdownToJSX.NestedParser,\n content: string,\n state: MarkdownToJSX.State\n): MarkdownToJSX.ParserResult {\n const isCurrentlyInline = state._inline || false\n const isCurrentlySimple = state._simple || false\n state._inline = true\n state._simple = true\n const result = parse(content, state)\n state._inline = isCurrentlyInline\n state._simple = isCurrentlySimple\n return result\n}\n\n/**\n * Anything inline that isn't a link.\n */\nfunction parseSimpleInline(\n parse: MarkdownToJSX.NestedParser,\n content: string,\n state: MarkdownToJSX.State\n): MarkdownToJSX.ParserResult {\n const isCurrentlyInline = state._inline || false\n const isCurrentlySimple = state._simple || false\n state._inline = false\n state._simple = true\n const result = parse(content, state)\n state._inline = isCurrentlyInline\n state._simple = isCurrentlySimple\n return result\n}\n\nfunction parseBlock(\n parse,\n content,\n state: MarkdownToJSX.State\n): MarkdownToJSX.ParserResult {\n state._inline = false\n return parse(content + '\\n\\n', state)\n}\n\nconst parseCaptureInline: MarkdownToJSX.Parser<\n ReturnType\n> = (capture, parse, state: MarkdownToJSX.State) => {\n return {\n _content: parseInline(parse, capture[1], state),\n }\n}\n\nfunction captureNothing() {\n return {}\n}\n\nfunction renderNothing() {\n return null\n}\n\nfunction ruleOutput(rules: MarkdownToJSX.Rules) {\n return function nestedRuleOutput(\n ast: MarkdownToJSX.ParserResult,\n outputFunc: MarkdownToJSX.RuleOutput,\n state: MarkdownToJSX.State\n ): React.ReactChild {\n return rules[ast.type]._react(ast, outputFunc, state)\n }\n}\n\nfunction cx(...args) {\n return args.filter(Boolean).join(' ')\n}\n\nfunction get(src: Object, path: string, fb?: any) {\n let ptr = src\n const frags = path.split('.')\n\n while (frags.length) {\n ptr = ptr[frags[0]]\n\n if (ptr === undefined) break\n else frags.shift()\n }\n\n return ptr || fb\n}\n\nfunction getTag(tag: string, overrides: MarkdownToJSX.Overrides) {\n const override = get(overrides, tag)\n\n if (!override) return tag\n\n return typeof override === 'function' ||\n (typeof override === 'object' && 'render' in override)\n ? override\n : get(overrides, `${tag}.component`, tag)\n}\n\nenum Priority {\n /**\n * anything that must scan the tree before everything else\n */\n MAX,\n /**\n * scans for block-level constructs\n */\n HIGH,\n /**\n * inline w/ more priority than other inline\n */\n MED,\n /**\n * inline elements\n */\n LOW,\n /**\n * bare text and stuff that is considered leftovers\n */\n MIN,\n}\n\nexport function compiler(\n markdown: string,\n options: MarkdownToJSX.Options = {}\n) {\n options.overrides = options.overrides || {}\n options.slugify = options.slugify || slugify\n options.namedCodesToUnicode = options.namedCodesToUnicode\n ? { ...namedCodesToUnicode, ...options.namedCodesToUnicode }\n : namedCodesToUnicode\n\n const createElementFn = options.createElement || React.createElement\n\n // JSX custom pragma\n // eslint-disable-next-line no-unused-vars\n function h(\n // locally we always will render a known string tag\n tag: MarkdownToJSX.HTMLTags,\n props: Parameters[1] & {\n className?: string\n id?: string\n },\n ...children\n ) {\n const overrideProps = get(options.overrides, `${tag}.props`, {})\n\n return createElementFn(\n getTag(tag, options.overrides),\n {\n ...props,\n ...overrideProps,\n className: cx(props?.className, overrideProps.className) || undefined,\n },\n ...children\n )\n }\n\n function compile(input: string): JSX.Element {\n let _inline = false\n\n if (options.forceInline) {\n _inline = true\n } else if (!options.forceBlock) {\n /**\n * should not contain any block-level markdown like newlines, lists, headings,\n * thematic breaks, blockquotes, tables, etc\n */\n _inline = SHOULD_RENDER_AS_BLOCK_R.test(input) === false\n }\n\n const arr = emitter(\n parser(\n _inline\n ? input\n : `${input.trimEnd().replace(TRIM_STARTING_NEWLINES, '')}\\n\\n`,\n {\n _inline,\n }\n )\n )\n\n while (\n typeof arr[arr.length - 1] === 'string' &&\n !arr[arr.length - 1].trim()\n ) {\n arr.pop()\n }\n\n if (options.wrapper === null) {\n return arr\n }\n\n const wrapper = options.wrapper || (_inline ? 'span' : 'div')\n let jsx\n\n if (arr.length > 1 || options.forceWrapper) {\n jsx = arr\n } else if (arr.length === 1) {\n jsx = arr[0]\n\n // TODO: remove this for React 16\n if (typeof jsx === 'string') {\n return {jsx}\n } else {\n return jsx\n }\n } else {\n // TODO: return null for React 16\n jsx = null\n }\n\n return React.createElement(wrapper, { key: 'outer' }, jsx)\n }\n\n function attrStringToMap(str: string): JSX.IntrinsicAttributes {\n const attributes = str.match(ATTR_EXTRACTOR_R)\n if (!attributes) {\n return null\n }\n\n return attributes.reduce(function (map, raw, index) {\n const delimiterIdx = raw.indexOf('=')\n\n if (delimiterIdx !== -1) {\n const key = normalizeAttributeKey(raw.slice(0, delimiterIdx)).trim()\n const value = unquote(raw.slice(delimiterIdx + 1).trim())\n\n const mappedKey = ATTRIBUTE_TO_JSX_PROP_MAP[key] || key\n const normalizedValue = (map[mappedKey] = attributeValueToJSXPropValue(\n key,\n value\n ))\n\n if (\n typeof normalizedValue === 'string' &&\n (HTML_BLOCK_ELEMENT_R.test(normalizedValue) ||\n HTML_SELF_CLOSING_ELEMENT_R.test(normalizedValue))\n ) {\n map[mappedKey] = React.cloneElement(compile(normalizedValue.trim()), {\n key: index,\n })\n }\n } else if (raw !== 'style') {\n map[ATTRIBUTE_TO_JSX_PROP_MAP[raw] || raw] = true\n }\n\n return map\n }, {})\n }\n\n /* istanbul ignore next */\n if (process.env.NODE_ENV !== 'production') {\n if (typeof markdown !== 'string') {\n throw new Error(`markdown-to-jsx: the first argument must be\n a string`)\n }\n\n if (\n Object.prototype.toString.call(options.overrides) !== '[object Object]'\n ) {\n throw new Error(`markdown-to-jsx: options.overrides (second argument property) must be\n undefined or an object literal with shape:\n {\n htmltagname: {\n component: string|ReactComponent(optional),\n props: object(optional)\n }\n }`)\n }\n }\n\n const footnotes: { _footnote: string; _identifier: string }[] = []\n const refs: { [key: string]: { _target: string; _title: string } } = {}\n\n /**\n * each rule's react() output function goes through our custom h() JSX pragma;\n * this allows the override functionality to be automatically applied\n */\n const rules: MarkdownToJSX.Rules = {\n blockQuote: {\n _match: blockRegex(BLOCKQUOTE_R),\n _order: Priority.HIGH,\n _parse(capture, parse, state) {\n return {\n _content: parse(\n capture[0].replace(BLOCKQUOTE_TRIM_LEFT_MULTILINE_R, ''),\n state\n ),\n }\n },\n _react(node, output, state) {\n return (\n
    \n {output(node._content, state)}\n
    \n )\n },\n } as MarkdownToJSX.Rule<{ _content: MarkdownToJSX.ParserResult }>,\n\n breakLine: {\n _match: anyScopeRegex(BREAK_LINE_R),\n _order: Priority.HIGH,\n _parse: captureNothing,\n _react(_, __, state) {\n return
    \n },\n },\n\n breakThematic: {\n _match: blockRegex(BREAK_THEMATIC_R),\n _order: Priority.HIGH,\n _parse: captureNothing,\n _react(_, __, state) {\n return
    \n },\n },\n\n codeBlock: {\n _match: blockRegex(CODE_BLOCK_R),\n _order: Priority.MAX,\n _parse(capture /*, parse, state*/) {\n return {\n _content: capture[0].replace(/^ {4}/gm, '').replace(/\\n+$/, ''),\n _lang: undefined,\n }\n },\n\n _react(node, output, state) {\n return (\n
    \n            \n              {node._content}\n            \n          
    \n )\n },\n } as MarkdownToJSX.Rule<{\n _attrs?: ReturnType\n _content: string\n _lang?: string\n }>,\n\n codeFenced: {\n _match: blockRegex(CODE_BLOCK_FENCED_R),\n _order: Priority.MAX,\n _parse(capture /*, parse, state*/) {\n return {\n // if capture[3] it's additional metadata\n _attrs: attrStringToMap(capture[3] || ''),\n _content: capture[4],\n _lang: capture[2] || undefined,\n type: 'codeBlock',\n }\n },\n },\n\n codeInline: {\n _match: simpleInlineRegex(CODE_INLINE_R),\n _order: Priority.LOW,\n _parse(capture /*, parse, state*/) {\n return {\n _content: capture[2],\n }\n },\n _react(node, output, state) {\n return {node._content}\n },\n } as MarkdownToJSX.Rule<{ _content: string }>,\n\n /**\n * footnotes are emitted at the end of compilation in a special