any>(getValue: F): F {\n if (!_weakMap) {\n // Without a `WeakMap` implementation, memoization is not possible.\n return getValue;\n }\n\n const cache = new _weakMap();\n\n function memoizedGetValue(input: any): any {\n if (!input || (typeof input !== 'function' && typeof input !== 'object')) {\n // A WeakMap can only be used to test against reference values, i.e. 'function' and 'object'.\n // All other inputs cannot be memoized against in this manner.\n return getValue(input);\n }\n\n if (cache.has(input)) {\n return cache.get(input)!;\n }\n\n const value = getValue(input);\n\n cache.set(input, value);\n\n return value;\n }\n\n return memoizedGetValue as F;\n}\n\nfunction _normalizeArg(val: null | undefined): { empty: boolean } | any;\nfunction _normalizeArg(val: object): any;\nfunction _normalizeArg(val: any): any {\n if (!val) {\n return _emptyObject;\n } else if (typeof val === 'object' || typeof val === 'function') {\n return val;\n } else if (!_dictionary[val]) {\n _dictionary[val] = { val };\n }\n\n return _dictionary[val];\n}\n\nfunction _createNode(): IMemoizeNode {\n return {\n map: _weakMap ? new _weakMap() : null,\n };\n}\n","/**\n * Verifies if an application can use DOM.\n */\nexport function canUseDOM(): boolean {\n return (\n // eslint-disable-next-line no-restricted-globals\n typeof window !== 'undefined' &&\n !!(\n // eslint-disable-next-line no-restricted-globals, deprecation/deprecation\n (window.document && window.document.createElement)\n )\n );\n}\n","import { canUseDOM } from './canUseDOM';\n\n/**\n * Helper to get the document object. Note that in popup window cases, document\n * might be the wrong document, which is why we look at ownerDocument for the\n * truth.\n *\n * @public\n */\nexport function getDocument(rootElement?: HTMLElement | null): Document | undefined {\n // eslint-disable-next-line no-restricted-globals\n if (!canUseDOM() || typeof document === 'undefined') {\n return undefined;\n } else {\n const el = rootElement as Element;\n\n // eslint-disable-next-line no-restricted-globals\n return el && el.ownerDocument ? el.ownerDocument : document;\n }\n}\n","import { canUseDOM } from './canUseDOM';\n\nlet _window: Window | undefined = undefined;\n\n// Note: Accessing \"window\" in IE11 is somewhat expensive, and calling \"typeof window\"\n// hits a memory leak, whereas aliasing it and calling \"typeof _window\" does not.\n// Caching the window value at the file scope lets us minimize the impact.\ntry {\n // eslint-disable-next-line no-restricted-globals\n _window = window;\n} catch (e) {\n /* no-op */\n}\n\n/**\n * Helper to get the window object. The helper will make sure to use a cached variable\n * of \"window\", to avoid overhead and memory leaks in IE11. Note that in popup scenarios the\n * window object won't match the \"global\" window object, and for these scenarios, you should\n * pass in an element hosted within the popup.\n *\n * @public\n */\nexport function getWindow(rootElement?: Element | null): Window | undefined {\n if (!canUseDOM() || typeof _window === 'undefined') {\n return undefined;\n } else {\n const el = rootElement as Element;\n\n return el && el.ownerDocument && el.ownerDocument.defaultView ? el.ownerDocument.defaultView : _window;\n }\n}\n","import { getWindow } from './dom/getWindow';\n\n/**\n * Fetches an item from session storage without throwing an exception\n * @param key The key of the item to fetch from session storage\n */\nexport function getItem(key: string): string | null {\n let result = null;\n try {\n const win = getWindow();\n result = win ? win.sessionStorage.getItem(key) : null;\n } catch (e) {\n /* Eat the exception */\n }\n return result;\n}\n\n/**\n * Inserts an item into session storage without throwing an exception\n * @param key The key of the item to add to session storage\n * @param data The data to put into session storage\n */\nexport function setItem(key: string, data: string): void {\n try {\n getWindow()?.sessionStorage.setItem(key, data);\n } catch (e) {\n /* Eat the exception */\n }\n}\n","import { KeyCodes } from './KeyCodes';\nimport { getDocument } from './dom/getDocument';\nimport { getItem, setItem } from './sessionStorage';\nimport { setRTL as mergeStylesSetRTL } from '@fluentui/merge-styles';\n\nconst RTL_LOCAL_STORAGE_KEY = 'isRTL';\n\n// Default to undefined so that we initialize on first read.\nlet _isRTL: boolean | undefined;\n\n/**\n * Gets the rtl state of the page (returns true if in rtl.)\n */\nexport function getRTL(theme: { rtl?: boolean } = {}): boolean {\n if (theme.rtl !== undefined) {\n return theme.rtl;\n }\n if (_isRTL === undefined) {\n // Fabric supports persisting the RTL setting between page refreshes via session storage\n let savedRTL = getItem(RTL_LOCAL_STORAGE_KEY);\n if (savedRTL !== null) {\n _isRTL = savedRTL === '1';\n setRTL(_isRTL);\n }\n\n let doc = getDocument();\n if (_isRTL === undefined && doc) {\n _isRTL = ((doc.body && doc.body.getAttribute('dir')) || doc.documentElement.getAttribute('dir')) === 'rtl';\n mergeStylesSetRTL(_isRTL);\n }\n }\n\n return !!_isRTL;\n}\n\n/**\n * Sets the rtl state of the page (by adjusting the dir attribute of the html element.)\n */\nexport function setRTL(isRTL: boolean, persistSetting: boolean = false): void {\n let doc = getDocument();\n if (doc) {\n doc.documentElement.setAttribute('dir', isRTL ? 'rtl' : 'ltr');\n }\n\n if (persistSetting) {\n setItem(RTL_LOCAL_STORAGE_KEY, isRTL ? '1' : '0');\n }\n\n _isRTL = isRTL;\n mergeStylesSetRTL(_isRTL);\n}\n\n/**\n * Returns the given key, but flips right/left arrows if necessary.\n */\nexport function getRTLSafeKeyCode(key: number, theme: { rtl?: boolean } = {}): number {\n if (getRTL(theme)) {\n if (key === KeyCodes.left) {\n key = KeyCodes.right;\n } else if (key === KeyCodes.right) {\n key = KeyCodes.left;\n }\n }\n\n return key;\n}\n","import { __assign } from 'tslib';\nexport const assign = __assign;\n","import * as React from 'react';\nimport { mergeCss } from '@fluentui/merge-styles';\nimport { IStyle, ITheme } from '@fluentui/style-utilities';\nimport { getRTL, memoizeFunction } from '@fluentui/utilities';\nimport { assign } from './utilities';\nimport { IFactoryOptions } from './IComponent';\nimport {\n ISlottableReactType,\n ISlot,\n ISlots,\n ISlotDefinition,\n ISlotFactory,\n ISlotProp,\n ISlottableProps,\n ISlotOptions,\n IDefaultSlotProps,\n IProcessedSlotProps,\n ValidProps,\n ValidShorthand,\n} from './ISlots';\n\n/**\n * This function is required for any module that uses slots.\n *\n * This function is a slot resolver that automatically evaluates slot functions to generate React elements.\n * A byproduct of this resolver is that it removes slots from the React hierarchy by bypassing React.createElement.\n *\n * To use this function on a per-file basis, use the jsx directive targeting withSlots.\n * This directive must be the FIRST LINE in the file to work correctly.\n * Usage of this pragma also requires withSlots import statement.\n *\n * See React.createElement\n */\n// Can't use typeof on React.createElement since it's overloaded. Approximate createElement's signature for now\n// and widen as needed.\nexport function withSlots(\n type: ISlot
| React.FunctionComponent
| string,\n props?: (React.Attributes & P) | null,\n ...children: React.ReactNode[]\n): ReturnType> {\n const slotType = type as ISlot;\n if (slotType.isSlot) {\n // Since we are bypassing createElement, use React.Children.toArray to make sure children are\n // properly assigned keys.\n // TODO: should this be mutating? does React mutate children subprop with createElement?\n // TODO: will toArray clobber existing keys?\n // TODO: React generates warnings because it doesn't detect hidden member _store that is set in createElement.\n // Even children passed to createElement without keys don't generate this warning.\n // Is there a better way to prevent slots from appearing in hierarchy? toArray doesn't address root issue.\n children = React.Children.toArray(children);\n\n // TODO: There is something weird going on here with children embedded in props vs. rest args.\n // Comment out these lines to see. Make sure this function is doing the right things.\n if (children.length === 0) {\n return slotType(props);\n }\n\n return slotType({ ...(props as any), children });\n } else {\n // TODO: Are there some cases where children should NOT be spread? Also, spreading reraises perf question.\n // Children had to be spread to avoid breaking KeytipData in Toggle.view:\n // react-dom.development.js:18931 Uncaught TypeError: children is not a function\n // Without spread, function child is a child array of one element\n // TODO: is there a reason this can't be:\n // return React.createElement.apply(this, arguments);\n return React.createElement(type, props, ...children);\n }\n}\n\n/**\n * This function creates factories that render ouput depending on the user ISlotProp props passed in.\n * @param DefaultComponent - Base component to render when not overridden by user props.\n * @param options - Factory options, including defaultProp value for shorthand prop mapping.\n * @returns ISlotFactory function used for rendering slots.\n */\nexport function createFactory(\n DefaultComponent: React.ComponentType,\n options: IFactoryOptions = {},\n): ISlotFactory {\n const { defaultProp = 'children' } = options;\n\n const result: ISlotFactory = (\n componentProps,\n userProps,\n userSlotOptions,\n defaultStyles,\n theme,\n ) => {\n // If they passed in raw JSX, just return that.\n if (React.isValidElement(userProps)) {\n return userProps;\n }\n\n const flattenedUserProps: TProps | undefined = _translateShorthand(defaultProp as string, userProps);\n const finalProps = _constructFinalProps(defaultStyles, theme, componentProps, flattenedUserProps);\n\n if (userSlotOptions) {\n if (userSlotOptions.component) {\n // TODO: Remove cast if possible. This cast is needed because TS errors on the intrinsic portion of ReactType.\n // return ;\n const UserComponent = userSlotOptions.component as React.ComponentType;\n return ;\n }\n\n if (userSlotOptions.render) {\n return userSlotOptions.render(finalProps, DefaultComponent);\n }\n }\n\n return ;\n };\n\n return result;\n}\n\n/**\n * Default factory for components without explicit factories.\n */\nconst defaultFactory = memoizeFunction(type => createFactory(type));\n\n/**\n * This function generates slots that can be used in JSX given a definition of slots and their corresponding types.\n * @param userProps - Props as pass to component.\n * @param slots - Slot definition object defining the default slot component for each slot.\n * @returns A set of created slots that components can render in JSX.\n */\nexport function getSlots, TComponentSlots>(\n userProps: TComponentProps,\n slots: ISlotDefinition>,\n): ISlots> {\n const result: ISlots> = {} as ISlots>;\n\n // userProps already has default props mixed in by createComponent. Recast here to gain typing for this function.\n const mixedProps = userProps as TComponentProps & IDefaultSlotProps;\n\n for (const name in slots) {\n if (slots.hasOwnProperty(name)) {\n // This closure method requires the use of withSlots to prevent unnecessary rerenders. This is because React\n // detects each closure as a different component (since it is a new instance) from the previous one and then\n // forces a rerender of the entire slot subtree. For now, the only way to avoid this is to use withSlots, which\n // bypasses the call to React.createElement.\n const slot: ISlots>[keyof TComponentSlots] = (componentProps, ...args: any[]) => {\n if (args.length > 0) {\n // If React.createElement is being incorrectly used with slots, there will be additional arguments.\n // We can detect these additional arguments and error on their presence.\n throw new Error('Any module using getSlots must use withSlots. Please see withSlots javadoc for more info.');\n }\n // TODO: having TS infer types here seems to cause infinite loop.\n // use explicit types or casting to preserve typing if possible.\n // TODO: this should be a lookup on TProps property instead of being TProps directly, which is probably\n // causing the infinite loop\n return _renderSlot(\n slots[name],\n // TODO: this cast to any is hiding a relationship issue between the first two args\n componentProps as any,\n mixedProps[name],\n mixedProps.slots && mixedProps.slots[name],\n // _defaultStyles should always be present, but a check for existence is added to make view tests\n // easier to use.\n mixedProps._defaultStyles && mixedProps._defaultStyles[name],\n (mixedProps as any).theme,\n );\n };\n slot.isSlot = true;\n result[name] = slot;\n }\n }\n\n return result;\n}\n\n/**\n * Helper function that translates shorthand as needed.\n * @param defaultProp\n * @param slotProps\n */\nfunction _translateShorthand(\n defaultProp: string,\n slotProps: ISlotProp,\n): TProps | undefined {\n let transformedProps: TProps | undefined;\n\n if (typeof slotProps === 'string' || typeof slotProps === 'number' || typeof slotProps === 'boolean') {\n transformedProps = {\n [defaultProp]: slotProps as any,\n } as TProps;\n } else {\n transformedProps = slotProps as TProps;\n }\n\n return transformedProps;\n}\n\n/**\n * Helper function that constructs final styles and props given a series of props ordered by increasing priority.\n */\nfunction _constructFinalProps(\n defaultStyles: IStyle,\n theme?: ITheme,\n ...allProps: (TProps | undefined)[]\n): TProps {\n const finalProps: TProps = {} as any;\n const classNames: (string | undefined)[] = [];\n\n for (const props of allProps) {\n classNames.push(props && props.className);\n assign(finalProps, props);\n }\n\n finalProps.className = mergeCss([defaultStyles, classNames], { rtl: getRTL(theme) });\n\n return finalProps;\n}\n\n/**\n * Render a slot given component and user props. Uses component factory if available, otherwise falls back\n * to default factory.\n * @param ComponentType Factory component type.\n * @param componentProps The properties passed into slot from within the component.\n * @param userProps The user properties passed in from outside of the component.\n */\nfunction _renderSlot<\n TSlotComponent extends ISlottableReactType,\n TSlotProps extends ValidProps,\n TSlotShorthand extends ValidShorthand,\n>(\n ComponentType: TSlotComponent,\n componentProps: TSlotProps,\n userProps: ISlotProp,\n slotOptions: ISlotOptions | undefined,\n defaultStyles: IStyle,\n theme?: ITheme,\n): ReturnType {\n if (ComponentType.create !== undefined) {\n return ComponentType.create(componentProps, userProps, slotOptions, defaultStyles);\n } else {\n // TODO: need to resolve typing / generic issues passing through memoizeFunction. for now, cast to 'unknown'\n return (defaultFactory(ComponentType) as unknown as ISlotFactory)(\n componentProps,\n userProps,\n slotOptions,\n defaultStyles,\n theme,\n );\n }\n}\n","import { IKeyframes } from './IKeyframes';\nimport { getStyleOptions } from './StyleOptionsState';\nimport { Stylesheet } from './Stylesheet';\nimport { serializeRuleEntries } from './styleToClassName';\n\n/**\n * Registers keyframe definitions.\n *\n * @public\n */\nexport function keyframes(timeline: IKeyframes): string {\n const stylesheet = Stylesheet.getInstance();\n const rulesArray: string[] = [];\n\n for (const prop in timeline) {\n if (timeline.hasOwnProperty(prop)) {\n rulesArray.push(prop, '{', serializeRuleEntries(getStyleOptions(), timeline[prop]), '}');\n }\n }\n const rules = rulesArray.join('');\n\n const className = stylesheet.classNameFromKey(rules);\n\n if (className) {\n return className;\n }\n\n const name = stylesheet.getClassName();\n stylesheet.insertRule(`@keyframes ${name}{${rules}}`, true);\n stylesheet.cacheClassName(name, rules, [], ['keyframes', rules]);\n\n return name;\n}\n","import { keyframes } from '@fluentui/merge-styles';\nimport type { IAnimationStyles, IAnimationVariables } from '../types/IAnimationStyles';\nimport type { IRawStyle } from '@fluentui/merge-styles';\n\n/* Register the keyframes */\n\nconst EASING_FUNCTION_1 = 'cubic-bezier(.1,.9,.2,1)';\nconst EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)';\nconst DURATION_1 = '0.167s';\nconst DURATION_2 = '0.267s';\nconst DURATION_3 = '0.367s';\nconst DURATION_4 = '0.467s';\n\nconst FADE_IN: string = keyframes({\n from: { opacity: 0 },\n to: { opacity: 1 },\n});\n\nconst FADE_OUT: string = keyframes({\n from: { opacity: 1 },\n to: { opacity: 0, visibility: 'hidden' },\n});\n\nconst SLIDE_RIGHT_IN10: string = _createSlideInX(-10);\nconst SLIDE_RIGHT_IN20: string = _createSlideInX(-20);\nconst SLIDE_RIGHT_IN40: string = _createSlideInX(-40);\nconst SLIDE_RIGHT_IN400: string = _createSlideInX(-400);\nconst SLIDE_LEFT_IN10: string = _createSlideInX(10);\nconst SLIDE_LEFT_IN20: string = _createSlideInX(20);\nconst SLIDE_LEFT_IN40: string = _createSlideInX(40);\nconst SLIDE_LEFT_IN400: string = _createSlideInX(400);\nconst SLIDE_UP_IN10: string = _createSlideInY(10);\nconst SLIDE_UP_IN20: string = _createSlideInY(20);\nconst SLIDE_DOWN_IN10: string = _createSlideInY(-10);\nconst SLIDE_DOWN_IN20: string = _createSlideInY(-20);\n\nconst SLIDE_RIGHT_OUT10: string = _createSlideOutX(10);\nconst SLIDE_RIGHT_OUT20: string = _createSlideOutX(20);\nconst SLIDE_RIGHT_OUT40: string = _createSlideOutX(40);\nconst SLIDE_RIGHT_OUT400: string = _createSlideOutX(400);\nconst SLIDE_LEFT_OUT10: string = _createSlideOutX(-10);\nconst SLIDE_LEFT_OUT20: string = _createSlideOutX(-20);\nconst SLIDE_LEFT_OUT40: string = _createSlideOutX(-40);\nconst SLIDE_LEFT_OUT400: string = _createSlideOutX(-400);\nconst SLIDE_UP_OUT10: string = _createSlideOutY(-10);\nconst SLIDE_UP_OUT20: string = _createSlideOutY(-20);\nconst SLIDE_DOWN_OUT10: string = _createSlideOutY(10);\nconst SLIDE_DOWN_OUT20: string = _createSlideOutY(20);\n\nconst SCALE_UP100: string = keyframes({\n from: { transform: 'scale3d(.98,.98,1)' },\n to: { transform: 'scale3d(1,1,1)' },\n});\n\nconst SCALE_DOWN98: string = keyframes({\n from: { transform: 'scale3d(1,1,1)' },\n to: { transform: 'scale3d(.98,.98,1)' },\n});\n\nconst SCALE_DOWN100: string = keyframes({\n from: { transform: 'scale3d(1.03,1.03,1)' },\n to: { transform: 'scale3d(1,1,1)' },\n});\n\nconst SCALE_UP103: string = keyframes({\n from: { transform: 'scale3d(1,1,1)' },\n to: { transform: 'scale3d(1.03,1.03,1)' },\n});\n\nconst ROTATE90: string = keyframes({\n from: { transform: 'rotateZ(0deg)' },\n to: { transform: 'rotateZ(90deg)' },\n});\n\nconst ROTATE_N90: string = keyframes({\n from: { transform: 'rotateZ(0deg)' },\n to: { transform: 'rotateZ(-90deg)' },\n});\n\n/**\n * Exporting raw duraction values and easing functions to be used in custom animations\n */\nexport const AnimationVariables: IAnimationVariables = {\n easeFunction1: EASING_FUNCTION_1,\n easeFunction2: EASING_FUNCTION_2,\n durationValue1: DURATION_1,\n durationValue2: DURATION_2,\n durationValue3: DURATION_3,\n durationValue4: DURATION_4,\n};\n\n/**\n * All Fabric standard animations, exposed as json objects referencing predefined\n * keyframes. These objects can be mixed in with other class definitions.\n */\nexport const AnimationStyles: IAnimationStyles = {\n slideRightIn10: _createAnimation(`${FADE_IN},${SLIDE_RIGHT_IN10}`, DURATION_3, EASING_FUNCTION_1),\n slideRightIn20: _createAnimation(`${FADE_IN},${SLIDE_RIGHT_IN20}`, DURATION_3, EASING_FUNCTION_1),\n slideRightIn40: _createAnimation(`${FADE_IN},${SLIDE_RIGHT_IN40}`, DURATION_3, EASING_FUNCTION_1),\n slideRightIn400: _createAnimation(`${FADE_IN},${SLIDE_RIGHT_IN400}`, DURATION_3, EASING_FUNCTION_1),\n slideLeftIn10: _createAnimation(`${FADE_IN},${SLIDE_LEFT_IN10}`, DURATION_3, EASING_FUNCTION_1),\n slideLeftIn20: _createAnimation(`${FADE_IN},${SLIDE_LEFT_IN20}`, DURATION_3, EASING_FUNCTION_1),\n slideLeftIn40: _createAnimation(`${FADE_IN},${SLIDE_LEFT_IN40}`, DURATION_3, EASING_FUNCTION_1),\n slideLeftIn400: _createAnimation(`${FADE_IN},${SLIDE_LEFT_IN400}`, DURATION_3, EASING_FUNCTION_1),\n slideUpIn10: _createAnimation(`${FADE_IN},${SLIDE_UP_IN10}`, DURATION_3, EASING_FUNCTION_1),\n slideUpIn20: _createAnimation(`${FADE_IN},${SLIDE_UP_IN20}`, DURATION_3, EASING_FUNCTION_1),\n slideDownIn10: _createAnimation(`${FADE_IN},${SLIDE_DOWN_IN10}`, DURATION_3, EASING_FUNCTION_1),\n slideDownIn20: _createAnimation(`${FADE_IN},${SLIDE_DOWN_IN20}`, DURATION_3, EASING_FUNCTION_1),\n\n slideRightOut10: _createAnimation(`${FADE_OUT},${SLIDE_RIGHT_OUT10}`, DURATION_3, EASING_FUNCTION_1),\n slideRightOut20: _createAnimation(`${FADE_OUT},${SLIDE_RIGHT_OUT20}`, DURATION_3, EASING_FUNCTION_1),\n slideRightOut40: _createAnimation(`${FADE_OUT},${SLIDE_RIGHT_OUT40}`, DURATION_3, EASING_FUNCTION_1),\n slideRightOut400: _createAnimation(`${FADE_OUT},${SLIDE_RIGHT_OUT400}`, DURATION_3, EASING_FUNCTION_1),\n slideLeftOut10: _createAnimation(`${FADE_OUT},${SLIDE_LEFT_OUT10}`, DURATION_3, EASING_FUNCTION_1),\n slideLeftOut20: _createAnimation(`${FADE_OUT},${SLIDE_LEFT_OUT20}`, DURATION_3, EASING_FUNCTION_1),\n slideLeftOut40: _createAnimation(`${FADE_OUT},${SLIDE_LEFT_OUT40}`, DURATION_3, EASING_FUNCTION_1),\n slideLeftOut400: _createAnimation(`${FADE_OUT},${SLIDE_LEFT_OUT400}`, DURATION_3, EASING_FUNCTION_1),\n slideUpOut10: _createAnimation(`${FADE_OUT},${SLIDE_UP_OUT10}`, DURATION_3, EASING_FUNCTION_1),\n slideUpOut20: _createAnimation(`${FADE_OUT},${SLIDE_UP_OUT20}`, DURATION_3, EASING_FUNCTION_1),\n slideDownOut10: _createAnimation(`${FADE_OUT},${SLIDE_DOWN_OUT10}`, DURATION_3, EASING_FUNCTION_1),\n slideDownOut20: _createAnimation(`${FADE_OUT},${SLIDE_DOWN_OUT20}`, DURATION_3, EASING_FUNCTION_1),\n\n scaleUpIn100: _createAnimation(`${FADE_IN},${SCALE_UP100}`, DURATION_3, EASING_FUNCTION_1),\n scaleDownIn100: _createAnimation(`${FADE_IN},${SCALE_DOWN100}`, DURATION_3, EASING_FUNCTION_1),\n scaleUpOut103: _createAnimation(`${FADE_OUT},${SCALE_UP103}`, DURATION_1, EASING_FUNCTION_2),\n scaleDownOut98: _createAnimation(`${FADE_OUT},${SCALE_DOWN98}`, DURATION_1, EASING_FUNCTION_2),\n\n fadeIn100: _createAnimation(FADE_IN, DURATION_1, EASING_FUNCTION_2),\n fadeIn200: _createAnimation(FADE_IN, DURATION_2, EASING_FUNCTION_2),\n fadeIn400: _createAnimation(FADE_IN, DURATION_3, EASING_FUNCTION_2),\n fadeIn500: _createAnimation(FADE_IN, DURATION_4, EASING_FUNCTION_2),\n\n fadeOut100: _createAnimation(FADE_OUT, DURATION_1, EASING_FUNCTION_2),\n fadeOut200: _createAnimation(FADE_OUT, DURATION_2, EASING_FUNCTION_2),\n fadeOut400: _createAnimation(FADE_OUT, DURATION_3, EASING_FUNCTION_2),\n fadeOut500: _createAnimation(FADE_OUT, DURATION_4, EASING_FUNCTION_2),\n\n rotate90deg: _createAnimation(ROTATE90, '0.1s', EASING_FUNCTION_2),\n rotateN90deg: _createAnimation(ROTATE_N90, '0.1s', EASING_FUNCTION_2),\n\n // expandCollapse 100/200/400, delay 100/200\n};\n\nfunction _createAnimation(\n animationName: string,\n animationDuration: string,\n animationTimingFunction: string,\n): IRawStyle {\n return {\n animationName,\n animationDuration,\n animationTimingFunction,\n animationFillMode: 'both',\n };\n}\n\nfunction _createSlideInX(fromX: number): string {\n return keyframes({\n from: { transform: `translate3d(${fromX}px,0,0)`, pointerEvents: 'none' },\n to: { transform: `translate3d(0,0,0)`, pointerEvents: 'auto' },\n });\n}\n\nfunction _createSlideInY(fromY: number): string {\n return keyframes({\n from: { transform: `translate3d(0,${fromY}px,0)`, pointerEvents: 'none' },\n to: { transform: `translate3d(0,0,0)`, pointerEvents: 'auto' },\n });\n}\n\nfunction _createSlideOutX(toX: number): string {\n return keyframes({\n from: { transform: `translate3d(0,0,0)` },\n to: { transform: `translate3d(${toX}px,0,0)` },\n });\n}\n\nfunction _createSlideOutY(toY: number): string {\n return keyframes({\n from: { transform: `translate3d(0,0,0)` },\n to: { transform: `translate3d(0,${toY}px,0)` },\n });\n}\n","import { buildClassMap } from '../utilities/index';\nimport { AnimationStyles } from '../styles/index';\nimport type { IAnimationStyles } from '../interfaces/index';\n\n/**\n * {@docCategory AnimationClassNames}\n */\nexport const AnimationClassNames: { [key in keyof IAnimationStyles]?: string } = buildClassMap(AnimationStyles);\n","import type { IFontWeight } from '@fluentui/merge-styles';\n\n// Font face names to be registered.\nexport namespace LocalizedFontNames {\n export const Arabic = 'Segoe UI Web (Arabic)';\n export const Cyrillic = 'Segoe UI Web (Cyrillic)';\n export const EastEuropean = 'Segoe UI Web (East European)';\n export const Greek = 'Segoe UI Web (Greek)';\n export const Hebrew = 'Segoe UI Web (Hebrew)';\n export const Thai = 'Leelawadee UI Web';\n export const Vietnamese = 'Segoe UI Web (Vietnamese)';\n export const WestEuropean = 'Segoe UI Web (West European)';\n export const Selawik = 'Selawik Web';\n export const Armenian = 'Segoe UI Web (Armenian)';\n export const Georgian = 'Segoe UI Web (Georgian)';\n}\n\n// Font families with fallbacks, for the general regions.\nexport namespace LocalizedFontFamilies {\n export const Arabic = `'${LocalizedFontNames.Arabic}'`;\n export const ChineseSimplified = `'Microsoft Yahei UI', Verdana, Simsun`;\n export const ChineseTraditional = `'Microsoft Jhenghei UI', Pmingliu`;\n export const Cyrillic = `'${LocalizedFontNames.Cyrillic}'`;\n export const EastEuropean = `'${LocalizedFontNames.EastEuropean}'`;\n export const Greek = `'${LocalizedFontNames.Greek}'`;\n export const Hebrew = `'${LocalizedFontNames.Hebrew}'`;\n export const Hindi = `'Nirmala UI'`;\n export const Japanese = `'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka`;\n export const Korean = `'Malgun Gothic', Gulim`;\n export const Selawik = `'${LocalizedFontNames.Selawik}'`;\n export const Thai = `'Leelawadee UI Web', 'Kmer UI'`;\n export const Vietnamese = `'${LocalizedFontNames.Vietnamese}'`;\n export const WestEuropean = `'${LocalizedFontNames.WestEuropean}'`;\n export const Armenian = `'${LocalizedFontNames.Armenian}'`;\n export const Georgian = `'${LocalizedFontNames.Georgian}'`;\n}\n\n// Standard font sizes.\nexport namespace FontSizes {\n export const size10 = '10px';\n export const size12 = '12px';\n export const size14 = '14px';\n export const size16 = '16px';\n export const size18 = '18px';\n export const size20 = '20px';\n export const size24 = '24px';\n export const size28 = '28px';\n export const size32 = '32px';\n export const size42 = '42px';\n export const size68 = '68px';\n\n export const mini: string = '10px';\n export const xSmall: string = '10px';\n export const small: string = '12px';\n export const smallPlus: string = '12px';\n export const medium: string = '14px';\n export const mediumPlus: string = '16px';\n export const icon: string = '16px';\n export const large: string = '18px';\n export const xLarge: string = '20px';\n export const xLargePlus: string = '24px';\n export const xxLarge: string = '28px';\n export const xxLargePlus: string = '32px';\n export const superLarge: string = '42px';\n export const mega: string = '68px';\n}\n\n// Standard font weights.\nexport namespace FontWeights {\n export const light: IFontWeight = 100;\n export const semilight: IFontWeight = 300;\n export const regular: IFontWeight = 400;\n export const semibold: IFontWeight = 600;\n export const bold: IFontWeight = 700;\n}\n\n// Standard Icon Sizes.\nexport namespace IconFontSizes {\n export const xSmall: string = '10px';\n export const small: string = '12px';\n export const medium: string = '16px';\n export const large: string = '20px';\n}\n","import { mergeStyles } from '../MergeStyles';\n\n/**\n * Builds a class names object from a given map.\n *\n * @param styles - Map of unprocessed styles.\n * @returns Map of property name to class name.\n */\nexport function buildClassMap(styles: T): { [key in keyof T]?: string } {\n let classes: { [key in keyof T]?: string } = {};\n\n for (let styleName in styles) {\n if (styles.hasOwnProperty(styleName)) {\n let className: string;\n\n Object.defineProperty(classes, styleName, {\n get: (): string => {\n if (className === undefined) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n className = mergeStyles(styles[styleName] as any).toString();\n }\n return className;\n },\n enumerable: true,\n configurable: true,\n });\n }\n }\n\n return classes;\n}\n","import type { IRawStyle } from '@fluentui/merge-styles';\n\nexport const hiddenContentStyle: IRawStyle = {\n position: 'absolute',\n width: 1,\n height: 1,\n margin: -1,\n padding: 0,\n border: 0,\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n};\n","import { Stylesheet } from '@fluentui/merge-styles';\nimport { memoizeFunction } from '@fluentui/utilities';\nimport type { ITheme } from '../interfaces/index';\n\nexport type GlobalClassNames = Record;\n\n/**\n * Internal memoized function which simply takes in the class map and the\n * disable boolean. These immutable values can be memoized.\n */\nconst _getGlobalClassNames = memoizeFunction(\n (classNames: GlobalClassNames, disableGlobalClassNames?: boolean): GlobalClassNames => {\n const styleSheet = Stylesheet.getInstance();\n\n if (disableGlobalClassNames) {\n // disable global classnames\n return (Object.keys(classNames) as (keyof T)[]).reduce((acc, className) => {\n acc[className] = styleSheet.getClassName(classNames[className]);\n return acc;\n }, {} as GlobalClassNames);\n }\n\n // use global classnames\n return classNames;\n },\n);\n\n/**\n * Checks for the `disableGlobalClassNames` property on the `theme` to determine if it should return `classNames`\n * Note that calls to this function are memoized.\n *\n * @param classNames - The collection of global class names that apply when the flag is false. Make sure to pass in\n * the same instance on each call to benefit from memoization.\n * @param theme - The theme to check the flag on\n * @param disableGlobalClassNames - Optional. Explicitly opt in/out of disabling global classnames. Defaults to false.\n */\nexport function getGlobalClassNames(\n classNames: GlobalClassNames,\n theme: ITheme,\n disableGlobalClassNames?: boolean,\n): GlobalClassNames {\n return _getGlobalClassNames(\n classNames,\n disableGlobalClassNames !== undefined ? disableGlobalClassNames : theme.disableGlobalClassNames,\n );\n}\n","import type { IRawStyle } from '../MergeStyles';\n\nexport const HighContrastSelector = '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';\nexport const HighContrastSelectorWhite =\n // eslint-disable-next-line @fluentui/max-len\n '@media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light)';\nexport const HighContrastSelectorBlack =\n // eslint-disable-next-line @fluentui/max-len\n '@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)';\n/**\n * @deprecated Use `HighContrastSelector`\n */\nexport const EdgeChromiumHighContrastSelector =\n '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';\n\nexport const ScreenWidthMinSmall = 320;\nexport const ScreenWidthMinMedium = 480;\nexport const ScreenWidthMinLarge = 640;\nexport const ScreenWidthMinXLarge = 1024;\nexport const ScreenWidthMinXXLarge = 1366;\nexport const ScreenWidthMinXXXLarge = 1920;\nexport const ScreenWidthMaxSmall = ScreenWidthMinMedium - 1;\nexport const ScreenWidthMaxMedium = ScreenWidthMinLarge - 1;\nexport const ScreenWidthMaxLarge = ScreenWidthMinXLarge - 1;\nexport const ScreenWidthMaxXLarge = ScreenWidthMinXXLarge - 1;\nexport const ScreenWidthMaxXXLarge = ScreenWidthMinXXXLarge - 1;\n\nexport const ScreenWidthMinUhfMobile = 768;\n\nexport function getScreenSelector(min: number | undefined, max: number | undefined): string {\n const minSelector = typeof min === 'number' ? ` and (min-width: ${min}px)` : '';\n const maxSelector = typeof max === 'number' ? ` and (max-width: ${max}px)` : '';\n return `@media only screen${minSelector}${maxSelector}`;\n}\n\n/**\n * The style which turns off high contrast adjustment in browsers.\n */\nexport function getHighContrastNoAdjustStyle(): IRawStyle {\n return {\n forcedColorAdjust: 'none',\n MsHighContrastAdjust: 'none',\n };\n}\n\n/**\n * The style which turns off high contrast adjustment in (only) Edge Chromium browser.\n * @deprecated Use `getHighContrastNoAdjustStyle`\n */\n// eslint-disable-next-line deprecation/deprecation\nexport function getEdgeChromiumNoHighContrastAdjustSelector(): { [EdgeChromiumHighContrastSelector]: IRawStyle } {\n return {\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n forcedColorAdjust: 'none',\n MsHighContrastAdjust: 'none',\n },\n };\n}\n","import * as React from 'react';\nimport { getWindow } from './dom/getWindow';\nexport const IsFocusVisibleClassName = 'ms-Fabric--isFocusVisible';\nexport const IsFocusHiddenClassName = 'ms-Fabric--isFocusHidden';\n\nfunction updateClassList(el: HTMLElement | null | undefined, enabled: boolean) {\n if (el) {\n el.classList.add(enabled ? IsFocusVisibleClassName : IsFocusHiddenClassName);\n el.classList.remove(enabled ? IsFocusHiddenClassName : IsFocusVisibleClassName);\n }\n}\n\n/**\n * Sets the visibility of focus styling.\n *\n * By default, focus styles (the box surrounding a focused Button, for example) only show up when navigational\n * keypresses occur (through Tab, arrows, PgUp/PgDn, Home and End), and are hidden when mouse interactions occur.\n * This API provides an imperative way to turn them on/off.\n *\n * A use case might be when you have a keypress like ctrl-f6 navigate to a particular region on the page,\n * and want focus to show up.\n *\n * @param enabled - Whether to turn focus visibility on or off.\n * @param target - Optional target from which to get window in case no `providerElem` has been specified.\n * @param registeredProviders - Array of provider refs that are associated with a FocusRectsProvider. If no array\n * is passed in, the classnames are attached to the document body that contains `target`.\n */\nexport function setFocusVisibility(\n enabled: boolean,\n target?: Element,\n registeredProviders?: React.RefObject[],\n): void {\n if (registeredProviders) {\n registeredProviders.forEach(ref => updateClassList(ref.current, enabled));\n } else {\n updateClassList(getWindow(target)?.document.body, enabled);\n }\n}\n","export namespace ZIndexes {\n export const Nav: number = 1;\n /**\n * @deprecated Do not use\n */\n export const ScrollablePane: number = 1;\n export const FocusStyle: number = 1;\n export const Coachmark: number = 1000;\n export const Layer: number = 1000000;\n export const KeytipLayer: number = 1000001;\n}\n","import { HighContrastSelector } from './CommonStyles';\nimport { IsFocusVisibleClassName } from '@fluentui/utilities';\nimport { ZIndexes } from './zIndexes';\nimport type { IRawStyle } from '@fluentui/merge-styles';\nimport type { IGetFocusStylesOptions, ITheme } from '../interfaces/index';\n\n/**\n * Generates a focus style which can be used to define an :after focus border.\n *\n * @param theme - The theme object to use.\n * @param options - Options to customize the focus border.\n * @returns The style object.\n */\nexport function getFocusStyle(theme: ITheme, options?: IGetFocusStylesOptions): IRawStyle;\n/**\n * Generates a focus style which can be used to define an :after focus border.\n *\n * @param theme - The theme object to use.\n * @param inset - The number of pixels to inset the border.\n * @param position - The positioning applied to the container. Must\n * be 'relative' or 'absolute' so that the focus border can live around it.\n * @param highContrastStyle - Style for high contrast mode.\n * @param borderColor - Color of the border.\n * @param outlineColor - Color of the outline.\n * @param isFocusedOnly - If the styles should apply on focus or not.\n * @param borderRadius - If the style should include a rounded border.\n * @returns The style object.\n * @deprecated Use the object parameter version instead.\n */\nexport function getFocusStyle(\n theme: ITheme,\n inset?: number,\n position?: 'relative' | 'absolute',\n highContrastStyle?: IRawStyle | undefined,\n borderColor?: string,\n outlineColor?: string,\n isFocusedOnly?: boolean,\n borderRadius?: string | number | undefined,\n): IRawStyle;\nexport function getFocusStyle(\n theme: ITheme,\n insetOrOptions?: number | IGetFocusStylesOptions,\n position?: 'relative' | 'absolute',\n highContrastStyle?: IRawStyle,\n borderColor?: string,\n outlineColor?: string,\n isFocusedOnly?: boolean,\n borderRadius?: string | number | undefined,\n): IRawStyle {\n if (typeof insetOrOptions === 'number' || !insetOrOptions) {\n return _getFocusStyleInternal(theme, {\n inset: insetOrOptions,\n position,\n highContrastStyle,\n borderColor,\n outlineColor,\n isFocusedOnly,\n borderRadius,\n });\n } else {\n return _getFocusStyleInternal(theme, insetOrOptions);\n }\n}\n\nfunction _getFocusStyleInternal(theme: ITheme, options: IGetFocusStylesOptions = {}): IRawStyle {\n const {\n borderRadius,\n inset = 0,\n width = 1,\n position = 'relative',\n highContrastStyle,\n borderColor = theme.palette.white,\n outlineColor = theme.palette.neutralSecondary,\n isFocusedOnly = true,\n pointerEvents,\n } = options;\n\n return {\n // Clear browser-specific focus styles and use 'transparent' as placeholder for focus style.\n outline: 'transparent',\n // Requirement because pseudo-element is absolutely positioned.\n position,\n\n selectors: {\n // Clear the focus border in Firefox.\n // Reference: http://stackoverflow.com/a/199319/1436671\n '::-moz-focus-inner': {\n border: '0',\n },\n\n // When the element that uses this mixin is in a :focus state, add a pseudo-element to\n // create a border.\n [`.${IsFocusVisibleClassName} &${isFocusedOnly ? ':focus' : ''}:after, :host(.${IsFocusVisibleClassName}) &${\n isFocusedOnly ? ':focus' : ''\n }:after`]: {\n content: '\"\"',\n position: 'absolute',\n pointerEvents,\n left: inset + 1,\n top: inset + 1,\n bottom: inset + 1,\n right: inset + 1,\n border: `${width}px solid ${borderColor}`,\n outline: `${width}px solid ${outlineColor}`,\n zIndex: ZIndexes.FocusStyle,\n borderRadius,\n selectors: {\n [HighContrastSelector]: highContrastStyle,\n },\n },\n },\n };\n}\n\n/**\n * Generates style to clear browser specific focus styles.\n */\nexport function focusClear(): IRawStyle {\n return {\n selectors: {\n '&::-moz-focus-inner': {\n // Clear the focus border in Firefox. Reference: http://stackoverflow.com/a/199319/1436671\n border: 0,\n },\n '&': {\n // Clear browser specific focus styles and use transparent as placeholder for focus style\n outline: 'transparent',\n },\n },\n };\n}\n\n/**\n * Generates a style which can be used to set a border on focus.\n *\n * @param theme - The theme object to use.\n * @param inset - The number of pixels to inset the border (default 0)\n * @param width - The border width in pixels (default 1)\n * @param color - Color of the outline (default `theme.palette.neutralSecondary`)\n * @returns The style object.\n */\nexport function getFocusOutlineStyle(theme: ITheme, inset: number = 0, width: number = 1, color?: string): IRawStyle {\n return {\n selectors: {\n [`:global(${IsFocusVisibleClassName}) &:focus`]: {\n outline: `${width} solid ${color || theme.palette.neutralSecondary}`,\n outlineOffset: `${-inset}px`,\n },\n },\n };\n}\n\n/**\n * Generates text input border styles on focus.\n *\n * @param borderColor - Color of the border.\n * @param borderRadius - Radius of the border.\n * @param borderType - Type of the border.\n * @param borderPosition - Position of the border relative to the input element (default to -1\n * as it's the most common border width of the input element)\n * @returns The style object.\n */\nexport const getInputFocusStyle = (\n borderColor: string,\n borderRadius: string | number,\n borderType: 'border' | 'borderBottom' = 'border',\n borderPosition: number = -1,\n): IRawStyle => {\n const isBorderBottom = borderType === 'borderBottom';\n\n return {\n borderColor,\n selectors: {\n ':after': {\n pointerEvents: 'none',\n content: \"''\",\n position: 'absolute',\n left: isBorderBottom ? 0 : borderPosition,\n top: borderPosition,\n bottom: borderPosition,\n right: isBorderBottom ? 0 : borderPosition,\n [borderType]: `2px solid ${borderColor}`,\n borderRadius,\n width: borderType === 'borderBottom' ? '100%' : undefined,\n selectors: {\n [HighContrastSelector]: {\n [borderType === 'border' ? 'borderColor' : 'borderBottomColor']: 'Highlight',\n },\n },\n },\n },\n };\n};\n","import { getWindow } from './dom/getWindow';\n\n/**\n * Storing global state in local module variables has issues when more than one copy\n * if the module gets loaded on the page (due to a bundling error or simply by consuming\n * a prebundled script.)\n *\n * This file contains helpers to deal with the getting and setting local state, and allows\n * callers to get called back when it mutates.\n */\n\nconst GLOBAL_SETTINGS_PROP_NAME = '__globalSettings__';\nconst CALLBACK_STATE_PROP_NAME = '__callbacks__';\n\nlet _counter = 0;\n\n/**\n * Change description used for change callbacks in GlobalSettings.\n *\n * @public\n * {@docCategory IChangeDescription}\n */\nexport interface IChangeDescription {\n key: string;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n oldValue: any;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n value: any;\n}\n\n/**\n * Change event callback.\n *\n * @public\n * {@docCategory IChangeEventCallback}\n */\nexport interface IChangeEventCallback {\n __id__?: string;\n (changeDescription?: IChangeDescription): void;\n}\n\n/**\n * Global settings helper, which stores settings in the global (window) namespace.\n * If window is not provided, it will store settings in module scope. Provides a\n * way to observe changes as well when their values change.\n *\n * @public\n * {@docCategory GlobalSettings}\n */\nexport class GlobalSettings {\n public static getValue(key: string, defaultValue?: T | (() => T)): T {\n const globalSettings = _getGlobalSettings();\n\n if (globalSettings[key] === undefined) {\n globalSettings[key] = typeof defaultValue === 'function' ? (defaultValue as Function)() : defaultValue;\n }\n\n return globalSettings[key];\n }\n\n public static setValue(key: string, value: T): T {\n const globalSettings = _getGlobalSettings();\n const callbacks = globalSettings[CALLBACK_STATE_PROP_NAME];\n let oldValue = globalSettings[key];\n\n if (value !== oldValue) {\n globalSettings[key] = value;\n\n let changeDescription = {\n oldValue,\n value,\n key,\n };\n\n for (let id in callbacks) {\n if (callbacks.hasOwnProperty(id)) {\n callbacks[id](changeDescription);\n }\n }\n }\n\n return value;\n }\n\n public static addChangeListener(cb: IChangeEventCallback): void {\n // Note: we use generated ids on the callbacks to create a map of the callbacks, which optimizes removal.\n // (It's faster to delete a key than it is to look up the index of an object and splice an array.)\n let id = cb.__id__;\n const callbacks = _getCallbacks();\n\n if (!id) {\n id = cb.__id__ = String(_counter++);\n }\n\n callbacks[id] = cb;\n }\n\n public static removeChangeListener(cb: IChangeEventCallback): void {\n const callbacks = _getCallbacks();\n delete callbacks[cb.__id__ as string];\n }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _getGlobalSettings(): { [key: string]: any } {\n const win = getWindow();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const globalObj: { [key: string]: any } = win || {};\n\n if (!globalObj[GLOBAL_SETTINGS_PROP_NAME]) {\n globalObj[GLOBAL_SETTINGS_PROP_NAME] = {\n [CALLBACK_STATE_PROP_NAME]: {},\n };\n }\n\n return globalObj[GLOBAL_SETTINGS_PROP_NAME];\n}\n\nfunction _getCallbacks(): { [key: string]: () => void } {\n const globalSettings = _getGlobalSettings();\n return globalSettings[CALLBACK_STATE_PROP_NAME];\n}\n","import { GlobalSettings } from '../GlobalSettings';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ISettings = { [key: string]: any };\nexport type ISettingsFunction = (settings: ISettings) => ISettings;\n\n/**\n * @deprecated Use ISettings.\n */\nexport type Settings = ISettings;\n\n/**\n * @deprecated Use ISettingsFunction.\n */\nexport type SettingsFunction = ISettingsFunction;\n\nexport interface ICustomizations {\n settings: ISettings;\n scopedSettings: { [key: string]: ISettings };\n inCustomizerContext?: boolean;\n}\n\nconst CustomizationsGlobalKey = 'customizations';\nconst NO_CUSTOMIZATIONS = { settings: {}, scopedSettings: {}, inCustomizerContext: false };\n\nlet _allSettings = GlobalSettings.getValue(CustomizationsGlobalKey, {\n settings: {},\n scopedSettings: {},\n inCustomizerContext: false,\n});\n\nlet _events: (() => void)[] = [];\n\nexport class Customizations {\n private static _suppressUpdates: boolean;\n\n public static reset(): void {\n _allSettings.settings = {};\n _allSettings.scopedSettings = {};\n }\n\n /** Apply global Customization settings.\n * @example Customizations.applySettings(\\{ theme: \\{...\\} \\});\n */\n public static applySettings(settings: ISettings): void {\n _allSettings.settings = { ..._allSettings.settings, ...settings };\n Customizations._raiseChange();\n }\n\n /** Apply Customizations to a particular named scope, like a component.\n * @example Customizations.applyScopedSettings('Nav', \\{ styles: () =\\> \\{\\} \\});\n */\n public static applyScopedSettings(scopeName: string, settings: ISettings): void {\n _allSettings.scopedSettings[scopeName] = { ..._allSettings.scopedSettings[scopeName], ...settings };\n Customizations._raiseChange();\n }\n\n public static getSettings(\n properties: string[],\n scopeName?: string,\n localSettings: ICustomizations = NO_CUSTOMIZATIONS,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ): any {\n const settings: ISettings = {};\n const localScopedSettings = (scopeName && localSettings.scopedSettings[scopeName]) || {};\n const globalScopedSettings = (scopeName && _allSettings.scopedSettings[scopeName]) || {};\n\n for (let property of properties) {\n settings[property] =\n localScopedSettings[property] ||\n localSettings.settings[property] ||\n globalScopedSettings[property] ||\n _allSettings.settings[property];\n }\n\n return settings;\n }\n\n /** Used to run some code that sets Customizations without triggering an update until the end.\n * Useful for applying Customizations that don't affect anything currently rendered, or for\n * applying many customizations at once.\n * @param suppressUpdate - Do not raise the change event at the end, preventing all updates\n */\n public static applyBatchedUpdates(code: () => void, suppressUpdate?: boolean): void {\n Customizations._suppressUpdates = true;\n try {\n code();\n } catch {\n /* do nothing */\n }\n Customizations._suppressUpdates = false;\n if (!suppressUpdate) {\n Customizations._raiseChange();\n }\n }\n\n public static observe(onChange: () => void): void {\n _events.push(onChange);\n }\n\n public static unobserve(onChange: () => void): void {\n _events = _events.filter((cb: () => void) => cb !== onChange);\n }\n\n private static _raiseChange(): void {\n if (!Customizations._suppressUpdates) {\n _events.forEach((cb: () => void) => cb());\n }\n }\n}\n","// Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.\n// See LICENSE in the project root for license information.\n\n/**\n * An IThemingInstruction can specify a rawString to be preserved or a theme slot and a default value\n * to use if that slot is not specified by the theme.\n */\n\n/* eslint-disable @typescript-eslint/no-use-before-define */\n\n// Declaring a global here in case that the execution environment is Node.js (without importing the\n// entire node.js d.ts for now)\ndeclare let global: any; // eslint-disable-line @typescript-eslint/no-explicit-any\n\nexport interface IThemingInstruction {\n theme?: string;\n defaultValue?: string;\n rawString?: string;\n}\n\nexport type ThemableArray = IThemingInstruction[];\n\nexport interface ITheme {\n [key: string]: string;\n}\n\ninterface IStyleSheet {\n cssText: string;\n}\n\ninterface IExtendedHtmlStyleElement extends HTMLStyleElement {\n styleSheet: IStyleSheet;\n}\n\n/**\n * Performance Measurement of loading styles\n */\ninterface IMeasurement {\n /**\n * Count of style element injected, which is the slow operation in IE\n */\n count: number;\n /**\n * Total duration of all loadStyles exections\n */\n duration: number;\n}\n\ninterface IRunState {\n mode: Mode;\n buffer: ThemableArray[];\n flushTimer: number;\n}\n\ninterface IThemeState {\n theme: ITheme | undefined;\n lastStyleElement: IExtendedHtmlStyleElement;\n registeredStyles: IStyleRecord[]; // records of already registered non-themable styles\n registeredThemableStyles: IStyleRecord[]; // records of already registered themable styles\n loadStyles: ((processedStyles: string, rawStyles?: string | ThemableArray) => void) | undefined;\n perf: IMeasurement;\n runState: IRunState;\n}\n\ninterface IStyleRecord {\n styleElement: Element;\n themableStyle: ThemableArray;\n}\n\ninterface ICustomEvent extends Event {\n args?: T;\n}\n\n/**\n * object returned from resolveThemableArray function\n */\ninterface IThemableArrayResolveResult {\n /** this string is the processed styles in string */\n styleString: string;\n\n /** this boolean indicates if this style array is themable */\n themable: boolean;\n}\n\n/**\n * In sync mode, styles are registered as style elements synchronously with loadStyles() call.\n * In async mode, styles are buffered and registered as batch in async timer for performance purpose.\n */\nexport const enum Mode {\n sync,\n async\n}\n\n/**\n * Themable styles and non-themable styles are tracked separately\n * Specify ClearStyleOptions when calling clearStyles API to specify which group of registered styles should be cleared.\n */\nexport const enum ClearStyleOptions {\n /** only themable styles will be cleared */\n onlyThemable = 1,\n /** only non-themable styles will be cleared */\n onlyNonThemable = 2,\n /** both themable and non-themable styles will be cleared */\n all = 3\n}\n\n// Store the theming state in __themeState__ global scope for reuse in the case of duplicate\n// load-themed-styles hosted on the page.\nconst _root: any = typeof window === 'undefined' ? global : window; // eslint-disable-line @typescript-eslint/no-explicit-any\n\n// Nonce string to inject into script tag if one provided. This is used in CSP (Content Security Policy).\nconst _styleNonce: string = _root && _root.CSPSettings && _root.CSPSettings.nonce;\n\nconst _themeState: IThemeState = initializeThemeState();\n\n/**\n * Matches theming tokens. For example, \"[theme: themeSlotName, default: #FFF]\" (including the quotes).\n */\nconst _themeTokenRegex: RegExp =\n /[\\'\\\"]\\[theme:\\s*(\\w+)\\s*(?:\\,\\s*default:\\s*([\\\\\"\\']?[\\.\\,\\(\\)\\#\\-\\s\\w]*[\\.\\,\\(\\)\\#\\-\\w][\\\"\\']?))?\\s*\\][\\'\\\"]/g;\n\nconst now: () => number = () =>\n typeof performance !== 'undefined' && !!performance.now ? performance.now() : Date.now();\n\nfunction measure(func: () => void): void {\n const start: number = now();\n func();\n const end: number = now();\n _themeState.perf.duration += end - start;\n}\n\n/**\n * initialize global state object\n */\nfunction initializeThemeState(): IThemeState {\n let state: IThemeState = _root.__themeState__ || {\n theme: undefined,\n lastStyleElement: undefined,\n registeredStyles: []\n };\n\n if (!state.runState) {\n state = {\n ...state,\n perf: {\n count: 0,\n duration: 0\n },\n runState: {\n flushTimer: 0,\n mode: Mode.sync,\n buffer: []\n }\n };\n }\n if (!state.registeredThemableStyles) {\n state = {\n ...state,\n registeredThemableStyles: []\n };\n }\n _root.__themeState__ = state;\n return state;\n}\n\n/**\n * Loads a set of style text. If it is registered too early, we will register it when the window.load\n * event is fired.\n * @param {string | ThemableArray} styles Themable style text to register.\n * @param {boolean} loadAsync When true, always load styles in async mode, irrespective of current sync mode.\n */\nexport function loadStyles(styles: string | ThemableArray, loadAsync: boolean = false): void {\n measure(() => {\n const styleParts: ThemableArray = Array.isArray(styles) ? styles : splitStyles(styles);\n const { mode, buffer, flushTimer } = _themeState.runState;\n if (loadAsync || mode === Mode.async) {\n buffer.push(styleParts);\n if (!flushTimer) {\n _themeState.runState.flushTimer = asyncLoadStyles();\n }\n } else {\n applyThemableStyles(styleParts);\n }\n });\n}\n\n/**\n * Allows for customizable loadStyles logic. e.g. for server side rendering application\n * @param {(processedStyles: string, rawStyles?: string | ThemableArray) => void}\n * a loadStyles callback that gets called when styles are loaded or reloaded\n */\nexport function configureLoadStyles(\n loadStylesFn: ((processedStyles: string, rawStyles?: string | ThemableArray) => void) | undefined\n): void {\n _themeState.loadStyles = loadStylesFn;\n}\n\n/**\n * Configure run mode of load-themable-styles\n * @param mode load-themable-styles run mode, async or sync\n */\nexport function configureRunMode(mode: Mode): void {\n _themeState.runState.mode = mode;\n}\n\n/**\n * external code can call flush to synchronously force processing of currently buffered styles\n */\nexport function flush(): void {\n measure(() => {\n const styleArrays: ThemableArray[] = _themeState.runState.buffer.slice();\n _themeState.runState.buffer = [];\n const mergedStyleArray: ThemableArray = ([] as ThemableArray).concat.apply([], styleArrays);\n if (mergedStyleArray.length > 0) {\n applyThemableStyles(mergedStyleArray);\n }\n });\n}\n\n/**\n * register async loadStyles\n */\nfunction asyncLoadStyles(): number {\n return setTimeout(() => {\n _themeState.runState.flushTimer = 0;\n flush();\n }, 0);\n}\n\n/**\n * Loads a set of style text. If it is registered too early, we will register it when the window.load event\n * is fired.\n * @param {string} styleText Style to register.\n * @param {IStyleRecord} styleRecord Existing style record to re-apply.\n */\nfunction applyThemableStyles(stylesArray: ThemableArray, styleRecord?: IStyleRecord): void {\n if (_themeState.loadStyles) {\n _themeState.loadStyles(resolveThemableArray(stylesArray).styleString, stylesArray);\n } else {\n registerStyles(stylesArray);\n }\n}\n\n/**\n * Registers a set theme tokens to find and replace. If styles were already registered, they will be\n * replaced.\n * @param {theme} theme JSON object of theme tokens to values.\n */\nexport function loadTheme(theme: ITheme | undefined): void {\n _themeState.theme = theme;\n\n // reload styles.\n reloadStyles();\n}\n\n/**\n * Clear already registered style elements and style records in theme_State object\n * @param option - specify which group of registered styles should be cleared.\n * Default to be both themable and non-themable styles will be cleared\n */\nexport function clearStyles(option: ClearStyleOptions = ClearStyleOptions.all): void {\n if (option === ClearStyleOptions.all || option === ClearStyleOptions.onlyNonThemable) {\n clearStylesInternal(_themeState.registeredStyles);\n _themeState.registeredStyles = [];\n }\n if (option === ClearStyleOptions.all || option === ClearStyleOptions.onlyThemable) {\n clearStylesInternal(_themeState.registeredThemableStyles);\n _themeState.registeredThemableStyles = [];\n }\n}\n\nfunction clearStylesInternal(records: IStyleRecord[]): void {\n records.forEach((styleRecord: IStyleRecord) => {\n const styleElement: HTMLStyleElement = styleRecord && (styleRecord.styleElement as HTMLStyleElement);\n if (styleElement && styleElement.parentElement) {\n styleElement.parentElement.removeChild(styleElement);\n }\n });\n}\n\n/**\n * Reloads styles.\n */\nfunction reloadStyles(): void {\n if (_themeState.theme) {\n const themableStyles: ThemableArray[] = [];\n for (const styleRecord of _themeState.registeredThemableStyles) {\n themableStyles.push(styleRecord.themableStyle);\n }\n if (themableStyles.length > 0) {\n clearStyles(ClearStyleOptions.onlyThemable);\n applyThemableStyles(([] as ThemableArray).concat.apply([], themableStyles));\n }\n }\n}\n\n/**\n * Find theme tokens and replaces them with provided theme values.\n * @param {string} styles Tokenized styles to fix.\n */\nexport function detokenize(styles: string | undefined): string | undefined {\n if (styles) {\n styles = resolveThemableArray(splitStyles(styles)).styleString;\n }\n\n return styles;\n}\n\n/**\n * Resolves ThemingInstruction objects in an array and joins the result into a string.\n * @param {ThemableArray} splitStyleArray ThemableArray to resolve and join.\n */\nfunction resolveThemableArray(splitStyleArray: ThemableArray): IThemableArrayResolveResult {\n const { theme }: IThemeState = _themeState;\n let themable: boolean = false;\n // Resolve the array of theming instructions to an array of strings.\n // Then join the array to produce the final CSS string.\n const resolvedArray: (string | undefined)[] = (splitStyleArray || []).map(\n (currentValue: IThemingInstruction) => {\n const themeSlot: string | undefined = currentValue.theme;\n if (themeSlot) {\n themable = true;\n // A theming annotation. Resolve it.\n const themedValue: string | undefined = theme ? theme[themeSlot] : undefined;\n const defaultValue: string = currentValue.defaultValue || 'inherit';\n\n // Warn to console if we hit an unthemed value even when themes are provided, but only if \"DEBUG\" is true.\n // Allow the themedValue to be undefined to explicitly request the default value.\n if (\n theme &&\n !themedValue &&\n console &&\n !(themeSlot in theme) &&\n typeof DEBUG !== 'undefined' &&\n DEBUG\n ) {\n console.warn(`Theming value not provided for \"${themeSlot}\". Falling back to \"${defaultValue}\".`);\n }\n\n return themedValue || defaultValue;\n } else {\n // A non-themable string. Preserve it.\n return currentValue.rawString;\n }\n }\n );\n\n return {\n styleString: resolvedArray.join(''),\n themable: themable\n };\n}\n\n/**\n * Split tokenized CSS into an array of strings and theme specification objects\n * @param {string} styles Tokenized styles to split.\n */\nexport function splitStyles(styles: string): ThemableArray {\n const result: ThemableArray = [];\n if (styles) {\n let pos: number = 0; // Current position in styles.\n let tokenMatch: RegExpExecArray | null;\n while ((tokenMatch = _themeTokenRegex.exec(styles))) {\n const matchIndex: number = tokenMatch.index;\n if (matchIndex > pos) {\n result.push({\n rawString: styles.substring(pos, matchIndex)\n });\n }\n\n result.push({\n theme: tokenMatch[1],\n defaultValue: tokenMatch[2] // May be undefined\n });\n\n // index of the first character after the current match\n pos = _themeTokenRegex.lastIndex;\n }\n\n // Push the rest of the string after the last match.\n result.push({\n rawString: styles.substring(pos)\n });\n }\n\n return result;\n}\n\n/**\n * Registers a set of style text. If it is registered too early, we will register it when the\n * window.load event is fired.\n * @param {ThemableArray} styleArray Array of IThemingInstruction objects to register.\n * @param {IStyleRecord} styleRecord May specify a style Element to update.\n */\nfunction registerStyles(styleArray: ThemableArray): void {\n if (typeof document === 'undefined') {\n return;\n }\n const head: HTMLHeadElement = document.getElementsByTagName('head')[0];\n const styleElement: HTMLStyleElement = document.createElement('style');\n const { styleString, themable } = resolveThemableArray(styleArray);\n\n styleElement.setAttribute('data-load-themed-styles', 'true');\n if (_styleNonce) {\n styleElement.setAttribute('nonce', _styleNonce);\n }\n styleElement.appendChild(document.createTextNode(styleString));\n _themeState.perf.count++;\n head.appendChild(styleElement);\n\n const ev: ICustomEvent<{ newStyle: HTMLStyleElement }> = document.createEvent('HTMLEvents');\n ev.initEvent('styleinsert', true /* bubbleEvent */, false /* cancelable */);\n ev.args = {\n newStyle: styleElement\n };\n document.dispatchEvent(ev);\n\n const record: IStyleRecord = {\n styleElement: styleElement,\n themableStyle: styleArray\n };\n\n if (themable) {\n _themeState.registeredThemableStyles.push(record);\n } else {\n _themeState.registeredStyles.push(record);\n }\n}\n","import type { IPalette } from '../types/index';\n\n// When adding or removing a color, make sure you keep this consistent with IColorClassNames\n// by adding the color variants.\nexport const DefaultPalette: IPalette = {\n themeDarker: '#004578',\n themeDark: '#005a9e',\n themeDarkAlt: '#106ebe',\n themePrimary: '#0078d4',\n themeSecondary: '#2b88d8',\n themeTertiary: '#71afe5',\n themeLight: '#c7e0f4',\n themeLighter: '#deecf9',\n themeLighterAlt: '#eff6fc',\n black: '#000000',\n blackTranslucent40: 'rgba(0,0,0,.4)',\n neutralDark: '#201f1e',\n neutralPrimary: '#323130',\n neutralPrimaryAlt: '#3b3a39',\n neutralSecondary: '#605e5c',\n neutralSecondaryAlt: '#8a8886',\n neutralTertiary: '#a19f9d',\n neutralTertiaryAlt: '#c8c6c4',\n neutralQuaternary: '#d2d0ce',\n neutralQuaternaryAlt: '#e1dfdd',\n neutralLight: '#edebe9',\n neutralLighter: '#f3f2f1',\n neutralLighterAlt: '#faf9f8',\n accent: '#0078d4',\n white: '#ffffff',\n whiteTranslucent40: 'rgba(255,255,255,.4)',\n yellowDark: '#d29200',\n yellow: '#ffb900',\n yellowLight: '#fff100',\n orange: '#d83b01',\n orangeLight: '#ea4300',\n orangeLighter: '#ff8c00',\n redDark: '#a4262c',\n red: '#e81123',\n magentaDark: '#5c005c',\n magenta: '#b4009e',\n magentaLight: '#e3008c',\n purpleDark: '#32145a',\n purple: '#5c2d91',\n purpleLight: '#b4a0ff',\n blueDark: '#002050',\n blueMid: '#00188f',\n blue: '#0078d4',\n blueLight: '#00bcf2',\n tealDark: '#004b50',\n teal: '#008272',\n tealLight: '#00b294',\n greenDark: '#004b1c',\n green: '#107c10',\n greenLight: '#bad80a',\n};\n","export namespace Depths {\n export const depth0 = '0 0 0 0 transparent';\n export const depth4 = '0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)';\n export const depth8 = '0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)';\n export const depth16 = '0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)';\n export const depth64 = '0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)';\n}\n","import { Depths } from './FluentDepths';\nimport type { IEffects } from '../types/index';\n\nexport const DefaultEffects: IEffects = {\n elevation4: Depths.depth4,\n elevation8: Depths.depth8,\n elevation16: Depths.depth16,\n elevation64: Depths.depth64,\n\n roundedCorner2: '2px',\n roundedCorner4: '4px',\n roundedCorner6: '6px',\n};\n","import { IFontFace } from './IRawStyleBase';\nimport { getStyleOptions } from './StyleOptionsState';\nimport { Stylesheet } from './Stylesheet';\nimport { serializeRuleEntries } from './styleToClassName';\n\n/**\n * Registers a font face.\n * @public\n */\nexport function fontFace(font: IFontFace): void {\n const stylesheet = Stylesheet.getInstance();\n\n const rule = serializeRuleEntries(getStyleOptions(), font as {});\n\n const className = stylesheet.classNameFromKey(rule);\n\n if (className) {\n return;\n }\n\n const name = stylesheet.getClassName();\n stylesheet.insertRule(`@font-face{${rule}}`, true);\n stylesheet.cacheClassName(name, rule, [], ['font-face', rule]);\n}\n","import { FontSizes, FontWeights, LocalizedFontFamilies, LocalizedFontNames } from './FluentFonts';\nimport type { IFontWeight, IRawStyle } from '@fluentui/merge-styles';\nimport type { IFontStyles } from '../types/IFontStyles';\n\n// Fallback fonts, if specified system or web fonts are unavailable.\nconst FontFamilyFallbacks = `'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif`;\n\n// By default, we favor system fonts for the default.\n// All localized fonts use a web font and never use the system font.\nconst defaultFontFamily = `'Segoe UI', '${LocalizedFontNames.WestEuropean}'`;\n\n// Mapping of language prefix to to font family.\nconst LanguageToFontMap = {\n ar: LocalizedFontFamilies.Arabic,\n bg: LocalizedFontFamilies.Cyrillic,\n cs: LocalizedFontFamilies.EastEuropean,\n el: LocalizedFontFamilies.Greek,\n et: LocalizedFontFamilies.EastEuropean,\n he: LocalizedFontFamilies.Hebrew,\n hi: LocalizedFontFamilies.Hindi,\n hr: LocalizedFontFamilies.EastEuropean,\n hu: LocalizedFontFamilies.EastEuropean,\n ja: LocalizedFontFamilies.Japanese,\n kk: LocalizedFontFamilies.EastEuropean,\n ko: LocalizedFontFamilies.Korean,\n lt: LocalizedFontFamilies.EastEuropean,\n lv: LocalizedFontFamilies.EastEuropean,\n pl: LocalizedFontFamilies.EastEuropean,\n ru: LocalizedFontFamilies.Cyrillic,\n sk: LocalizedFontFamilies.EastEuropean,\n 'sr-latn': LocalizedFontFamilies.EastEuropean,\n th: LocalizedFontFamilies.Thai,\n tr: LocalizedFontFamilies.EastEuropean,\n uk: LocalizedFontFamilies.Cyrillic,\n vi: LocalizedFontFamilies.Vietnamese,\n 'zh-hans': LocalizedFontFamilies.ChineseSimplified,\n 'zh-hant': LocalizedFontFamilies.ChineseTraditional,\n hy: LocalizedFontFamilies.Armenian,\n ka: LocalizedFontFamilies.Georgian,\n};\n\nfunction _fontFamilyWithFallbacks(fontFamily: string): string {\n return `${fontFamily}, ${FontFamilyFallbacks}`;\n}\n\n/**\n * If there is a localized font for this language, return that.\n * Returns undefined if there is no localized font for that language.\n */\nfunction _getLocalizedFontFamily(language: string | null): string {\n for (const lang in LanguageToFontMap) {\n if (LanguageToFontMap.hasOwnProperty(lang) && language && lang.indexOf(language) === 0) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return (LanguageToFontMap as any)[lang];\n }\n }\n\n return defaultFontFamily;\n}\n\nfunction _createFont(size: string, weight: IFontWeight, fontFamily: string): IRawStyle {\n return {\n fontFamily: fontFamily,\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontSize: size,\n fontWeight: weight,\n };\n}\n\nexport function createFontStyles(localeCode: string | null): IFontStyles {\n const localizedFont = _getLocalizedFontFamily(localeCode);\n const fontFamilyWithFallback = _fontFamilyWithFallbacks(localizedFont);\n\n const fontStyles = {\n tiny: _createFont(FontSizes.mini, FontWeights.regular, fontFamilyWithFallback),\n xSmall: _createFont(FontSizes.xSmall, FontWeights.regular, fontFamilyWithFallback),\n small: _createFont(FontSizes.small, FontWeights.regular, fontFamilyWithFallback),\n smallPlus: _createFont(FontSizes.smallPlus, FontWeights.regular, fontFamilyWithFallback),\n medium: _createFont(FontSizes.medium, FontWeights.regular, fontFamilyWithFallback),\n mediumPlus: _createFont(FontSizes.mediumPlus, FontWeights.regular, fontFamilyWithFallback),\n large: _createFont(FontSizes.large, FontWeights.regular, fontFamilyWithFallback),\n xLarge: _createFont(FontSizes.xLarge, FontWeights.semibold, fontFamilyWithFallback),\n xLargePlus: _createFont(FontSizes.xLargePlus, FontWeights.semibold, fontFamilyWithFallback),\n xxLarge: _createFont(FontSizes.xxLarge, FontWeights.semibold, fontFamilyWithFallback),\n xxLargePlus: _createFont(FontSizes.xxLargePlus, FontWeights.semibold, fontFamilyWithFallback),\n superLarge: _createFont(FontSizes.superLarge, FontWeights.semibold, fontFamilyWithFallback),\n mega: _createFont(FontSizes.mega, FontWeights.semibold, fontFamilyWithFallback),\n };\n\n return fontStyles;\n}\n","import { getDocument } from './dom/getDocument';\nimport * as localStorage from './localStorage';\nimport * as sessionStorage from './sessionStorage';\n\n// Default to undefined so that we initialize on first read.\nlet _language: string | null;\n\nconst STORAGE_KEY = 'language';\n\n/**\n * Gets the language set for the page.\n * @param persistenceType - Where to persist the value. Default is `sessionStorage` if available.\n */\nexport function getLanguage(\n persistenceType: 'localStorage' | 'sessionStorage' | 'none' = 'sessionStorage',\n): string | null {\n if (_language === undefined) {\n let doc = getDocument();\n const savedLanguage =\n persistenceType === 'localStorage'\n ? localStorage.getItem(STORAGE_KEY)\n : persistenceType === 'sessionStorage'\n ? sessionStorage.getItem(STORAGE_KEY)\n : undefined;\n\n if (savedLanguage) {\n _language = savedLanguage;\n }\n\n if (_language === undefined && doc) {\n _language = doc.documentElement.getAttribute('lang');\n }\n\n if (_language === undefined) {\n _language = 'en';\n }\n }\n\n return _language;\n}\n\n/**\n * Sets the language for the page (by adjusting the lang attribute of the html element).\n * @param language - Language to set.\n * @param persistenceType - Where to persist the value. Default is `sessionStorage` if available.\n */\nexport function setLanguage(language: string, persistenceType?: 'localStorage' | 'sessionStorage' | 'none'): void;\n/**\n * Sets the language for the page (by adjusting the lang attribute of the html element).\n * @deprecated Use string parameter version.\n * @param language - Language to set.\n * @param avoidPersisting - If true, don't store the value.\n */\nexport function setLanguage(language: string, avoidPersisting?: boolean): void;\nexport function setLanguage(\n language: string,\n persistenceParam?: 'localStorage' | 'sessionStorage' | 'none' | boolean,\n): void {\n let doc = getDocument();\n\n if (doc) {\n doc.documentElement.setAttribute('lang', language);\n }\n\n const persistenceType = persistenceParam === true ? 'none' : !persistenceParam ? 'sessionStorage' : persistenceParam;\n if (persistenceType === 'localStorage') {\n localStorage.setItem(STORAGE_KEY, language);\n } else if (persistenceType === 'sessionStorage') {\n sessionStorage.setItem(STORAGE_KEY, language);\n }\n\n _language = language;\n}\n","import { fontFace } from '@fluentui/merge-styles';\nimport { FontWeights, LocalizedFontFamilies, LocalizedFontNames } from './FluentFonts';\nimport { createFontStyles } from './createFontStyles';\nimport { getLanguage, getWindow } from '@fluentui/utilities';\nimport type { IFontWeight } from '@fluentui/merge-styles';\nimport type { IFontStyles } from '../types/IFontStyles';\nimport type { IFabricConfig } from '../types/IFabricConfig';\n\n// Default urls.\nconst DefaultBaseUrl = 'https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets';\n\n// Standard font styling.\nexport const DefaultFontStyles: IFontStyles = createFontStyles(getLanguage());\n\nfunction _registerFontFace(fontFamily: string, url: string, fontWeight?: IFontWeight, localFontName?: string): void {\n fontFamily = `'${fontFamily}'`;\n\n const localFontSrc = localFontName !== undefined ? `local('${localFontName}'),` : '';\n\n fontFace({\n fontFamily,\n src: localFontSrc + `url('${url}.woff2') format('woff2'),` + `url('${url}.woff') format('woff')`,\n fontWeight,\n fontStyle: 'normal',\n fontDisplay: 'swap',\n });\n}\n\nfunction _registerFontFaceSet(\n baseUrl: string,\n fontFamily: string,\n cdnFolder: string,\n cdnFontName: string = 'segoeui',\n localFontName?: string,\n): void {\n const urlBase = `${baseUrl}/${cdnFolder}/${cdnFontName}`;\n\n _registerFontFace(fontFamily, urlBase + '-light', FontWeights.light, localFontName && localFontName + ' Light');\n _registerFontFace(\n fontFamily,\n urlBase + '-semilight',\n FontWeights.semilight,\n localFontName && localFontName + ' SemiLight',\n );\n _registerFontFace(fontFamily, urlBase + '-regular', FontWeights.regular, localFontName);\n _registerFontFace(\n fontFamily,\n urlBase + '-semibold',\n FontWeights.semibold,\n localFontName && localFontName + ' SemiBold',\n );\n _registerFontFace(fontFamily, urlBase + '-bold', FontWeights.bold, localFontName && localFontName + ' Bold');\n}\n\nexport function registerDefaultFontFaces(baseUrl: string): void {\n if (baseUrl) {\n const fontUrl = `${baseUrl}/fonts`;\n\n // Produce @font-face definitions for all supported web fonts.\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Thai, 'leelawadeeui-thai', 'leelawadeeui');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Arabic, 'segoeui-arabic');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Cyrillic, 'segoeui-cyrillic');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.EastEuropean, 'segoeui-easteuropean');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Greek, 'segoeui-greek');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Hebrew, 'segoeui-hebrew');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Vietnamese, 'segoeui-vietnamese');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.WestEuropean, 'segoeui-westeuropean', 'segoeui', 'Segoe UI');\n _registerFontFaceSet(fontUrl, LocalizedFontFamilies.Selawik, 'selawik', 'selawik');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Armenian, 'segoeui-armenian');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Georgian, 'segoeui-georgian');\n\n // Leelawadee UI (Thai) does not have a 'light' weight, so we override\n // the font-face generated above to use the 'semilight' weight instead.\n _registerFontFace('Leelawadee UI Web', `${fontUrl}/leelawadeeui-thai/leelawadeeui-semilight`, FontWeights.light);\n\n // Leelawadee UI (Thai) does not have a 'semibold' weight, so we override\n // the font-face generated above to use the 'bold' weight instead.\n _registerFontFace('Leelawadee UI Web', `${fontUrl}/leelawadeeui-thai/leelawadeeui-bold`, FontWeights.semibold);\n }\n}\n\n/**\n * Reads the fontBaseUrl from window.FabricConfig.fontBaseUrl or falls back to a default.\n */\nfunction _getFontBaseUrl(): string {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const fabricConfig: IFabricConfig | undefined = (getWindow() as any)?.FabricConfig;\n\n return fabricConfig?.fontBaseUrl ?? DefaultBaseUrl;\n}\n\n/**\n * Register the font faces.\n */\nregisterDefaultFontFaces(_getFontBaseUrl());\n","import { getWindow } from './dom/getWindow';\n\n/**\n * Fetches an item from local storage without throwing an exception\n * @param key The key of the item to fetch from local storage\n */\nexport function getItem(key: string): string | null {\n let result = null;\n try {\n const win = getWindow();\n result = win ? win.localStorage.getItem(key) : null;\n } catch (e) {\n /* Eat the exception */\n }\n return result;\n}\n\n/**\n * Inserts an item into local storage without throwing an exception\n * @param key The key of the item to add to local storage\n * @param data The data to put into local storage\n */\nexport function setItem(key: string, data: string): void {\n try {\n const win = getWindow();\n\n win && win.localStorage.setItem(key, data);\n } catch (e) {\n /* Eat the exception */\n }\n}\n","/**\n * Simple deep merge function. Takes all arguments and returns a deep copy of the objects merged\n * together in the order provided. If an object creates a circular reference, it will assign the\n * original reference.\n */\nexport function merge(target: Partial, ...args: (Partial | null | undefined | false)[]): T {\n for (const arg of args) {\n _merge(target || {}, arg as Partial);\n }\n\n return target as T;\n}\n\n/**\n * The _merge helper iterates through all props on source and assigns them to target.\n * When the value is an object, we will create a deep clone of the object. However if\n * there is a circular reference, the value will not be deep cloned and will persist\n * the reference.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _merge(target: T, source: T, circularReferences: any[] = []): T {\n circularReferences.push(source);\n\n for (let name in source) {\n if (source.hasOwnProperty(name)) {\n if (name !== '__proto__' && name !== 'constructor' && name !== 'prototype') {\n const value: T[Extract] = source[name];\n if (typeof value === 'object' && value !== null && !Array.isArray(value)) {\n const isCircularReference = circularReferences.indexOf(value) > -1;\n target[name] = (\n isCircularReference ? value : _merge(target[name] || {}, value, circularReferences)\n ) as T[Extract];\n } else {\n target[name] = value;\n }\n }\n }\n }\n\n circularReferences.pop();\n\n return target;\n}\n","import type { IEffects, IPalette, ISemanticColors } from '../types/index';\n\n/** Generates all the semantic slot colors based on the theme so far\n * We'll use these as fallbacks for semantic slots that the passed in theme did not define.\n * The caller must still mix in the customized semantic slots at the end.\n */\nexport function makeSemanticColors(\n p: IPalette,\n e: IEffects,\n s: Partial | undefined,\n isInverted: boolean,\n depComments: boolean = false,\n): ISemanticColors {\n const semanticColors: Partial = {\n primaryButtonBorder: 'transparent',\n\n errorText: !isInverted ? '#a4262c' : '#F1707B',\n\n messageText: !isInverted ? '#323130' : '#F3F2F1',\n messageLink: !isInverted ? '#005A9E' : '#6CB8F6',\n messageLinkHovered: !isInverted ? '#004578' : '#82C7FF',\n\n infoIcon: !isInverted ? '#605e5c' : '#C8C6C4',\n errorIcon: !isInverted ? '#A80000' : '#F1707B',\n blockingIcon: !isInverted ? '#FDE7E9' : '#442726',\n warningIcon: !isInverted ? '#797775' : '#C8C6C4',\n severeWarningIcon: !isInverted ? '#D83B01' : '#FCE100',\n successIcon: !isInverted ? '#107C10' : '#92C353',\n\n infoBackground: !isInverted ? '#f3f2f1' : '#323130',\n errorBackground: !isInverted ? '#FDE7E9' : '#442726',\n blockingBackground: !isInverted ? '#FDE7E9' : '#442726',\n warningBackground: !isInverted ? '#FFF4CE' : '#433519',\n severeWarningBackground: !isInverted ? '#FED9CC' : '#4F2A0F',\n successBackground: !isInverted ? '#DFF6DD' : '#393D1B',\n\n // deprecated\n warningHighlight: !isInverted ? '#ffb900' : '#fff100',\n successText: !isInverted ? '#107C10' : '#92c353',\n\n ...s,\n };\n\n const fullSemanticColors = getSemanticColors(p, e, semanticColors, isInverted);\n return _fixDeprecatedSlots(fullSemanticColors, depComments);\n}\n\n/**\n * Map partial platte and effects to partial semantic colors.\n */\nexport function getSemanticColors>(\n p: Partial | undefined,\n e: Partial | undefined,\n s: Partial | undefined,\n isInverted: boolean,\n depComments: boolean = false,\n): TResult {\n let result: Partial = {};\n\n // map palette\n const {\n white,\n black,\n themePrimary,\n themeDark,\n themeDarker,\n themeDarkAlt,\n themeLighter,\n neutralLight,\n neutralLighter,\n neutralDark,\n neutralQuaternary,\n neutralQuaternaryAlt,\n neutralPrimary,\n neutralSecondary,\n neutralSecondaryAlt,\n neutralTertiary,\n neutralTertiaryAlt,\n neutralLighterAlt,\n accent,\n } = p || {};\n\n if (white) {\n result.bodyBackground = white;\n result.bodyFrameBackground = white;\n result.accentButtonText = white;\n result.buttonBackground = white;\n result.primaryButtonText = white;\n result.primaryButtonTextHovered = white;\n result.primaryButtonTextPressed = white;\n result.inputBackground = white;\n result.inputForegroundChecked = white;\n result.listBackground = white;\n result.menuBackground = white;\n result.cardStandoutBackground = white;\n }\n if (black) {\n result.bodyTextChecked = black;\n result.buttonTextCheckedHovered = black;\n }\n if (themePrimary) {\n result.link = themePrimary;\n result.primaryButtonBackground = themePrimary;\n result.inputBackgroundChecked = themePrimary;\n result.inputIcon = themePrimary;\n result.inputFocusBorderAlt = themePrimary;\n result.menuIcon = themePrimary;\n result.menuHeader = themePrimary;\n result.accentButtonBackground = themePrimary;\n }\n if (themeDark) {\n result.primaryButtonBackgroundPressed = themeDark;\n result.inputBackgroundCheckedHovered = themeDark;\n result.inputIconHovered = themeDark;\n }\n if (themeDarker) {\n result.linkHovered = themeDarker;\n }\n if (themeDarkAlt) {\n result.primaryButtonBackgroundHovered = themeDarkAlt;\n }\n if (themeLighter) {\n result.inputPlaceholderBackgroundChecked = themeLighter;\n }\n if (neutralLight) {\n result.bodyBackgroundChecked = neutralLight;\n result.bodyFrameDivider = neutralLight;\n result.bodyDivider = neutralLight;\n result.variantBorder = neutralLight;\n result.buttonBackgroundCheckedHovered = neutralLight;\n result.buttonBackgroundPressed = neutralLight;\n result.listItemBackgroundChecked = neutralLight;\n result.listHeaderBackgroundPressed = neutralLight;\n result.menuItemBackgroundPressed = neutralLight;\n // eslint-disable-next-line deprecation/deprecation\n result.menuItemBackgroundChecked = neutralLight;\n }\n if (neutralLighter) {\n result.bodyBackgroundHovered = neutralLighter;\n result.buttonBackgroundHovered = neutralLighter;\n result.buttonBackgroundDisabled = neutralLighter;\n result.buttonBorderDisabled = neutralLighter;\n result.primaryButtonBackgroundDisabled = neutralLighter;\n result.disabledBackground = neutralLighter;\n result.listItemBackgroundHovered = neutralLighter;\n result.listHeaderBackgroundHovered = neutralLighter;\n result.menuItemBackgroundHovered = neutralLighter;\n }\n if (neutralQuaternary) {\n result.primaryButtonTextDisabled = neutralQuaternary;\n result.disabledSubtext = neutralQuaternary;\n }\n if (neutralQuaternaryAlt) {\n result.listItemBackgroundCheckedHovered = neutralQuaternaryAlt;\n }\n if (neutralTertiary) {\n result.disabledBodyText = neutralTertiary;\n result.variantBorderHovered = s?.variantBorderHovered || neutralTertiary;\n result.buttonTextDisabled = neutralTertiary;\n result.inputIconDisabled = neutralTertiary;\n result.disabledText = neutralTertiary;\n }\n if (neutralPrimary) {\n result.bodyText = neutralPrimary;\n result.actionLink = neutralPrimary;\n result.buttonText = neutralPrimary;\n result.inputBorderHovered = neutralPrimary;\n result.inputText = neutralPrimary;\n result.listText = neutralPrimary;\n result.menuItemText = neutralPrimary;\n }\n if (neutralLighterAlt) {\n result.bodyStandoutBackground = neutralLighterAlt;\n result.defaultStateBackground = neutralLighterAlt;\n }\n if (neutralDark) {\n result.actionLinkHovered = neutralDark;\n result.buttonTextHovered = neutralDark;\n result.buttonTextChecked = neutralDark;\n result.buttonTextPressed = neutralDark;\n result.inputTextHovered = neutralDark;\n result.menuItemTextHovered = neutralDark;\n }\n if (neutralSecondary) {\n result.bodySubtext = neutralSecondary;\n result.focusBorder = neutralSecondary;\n result.inputBorder = neutralSecondary;\n result.smallInputBorder = neutralSecondary;\n result.inputPlaceholderText = neutralSecondary;\n }\n if (neutralSecondaryAlt) {\n result.buttonBorder = neutralSecondaryAlt;\n }\n if (neutralTertiaryAlt) {\n result.disabledBodySubtext = neutralTertiaryAlt;\n result.disabledBorder = neutralTertiaryAlt;\n result.buttonBackgroundChecked = neutralTertiaryAlt;\n result.menuDivider = neutralTertiaryAlt;\n }\n if (accent) {\n result.accentButtonBackground = accent;\n }\n\n // map effects\n if (e?.elevation4) {\n result.cardShadow = e.elevation4;\n }\n if (!isInverted && e?.elevation8) {\n result.cardShadowHovered = e.elevation8;\n } else if (result.variantBorderHovered) {\n result.cardShadowHovered = '0 0 1px ' + result.variantBorderHovered;\n }\n\n result = {\n ...result,\n // mix in customized semantic slots\n ...s,\n };\n\n return result as TResult;\n}\n\nfunction _fixDeprecatedSlots(s: ISemanticColors, depComments: boolean): ISemanticColors {\n // Add @deprecated tag as comment if enabled\n let dep = '';\n if (depComments === true) {\n dep = ' /* @deprecated */';\n }\n\n /* eslint-disable deprecation/deprecation */\n s.listTextColor = s.listText + dep;\n s.menuItemBackgroundChecked += dep;\n s.warningHighlight += dep;\n s.warningText = s.messageText + dep;\n s.successText += dep;\n /* eslint-enable deprecation/deprecation */\n return s;\n}\n","import type { ISpacing } from '../types/index';\n\nexport const DefaultSpacing: ISpacing = {\n s2: '4px',\n s1: '8px',\n m: '16px',\n l1: '20px',\n l2: '32px',\n};\n","import { DefaultPalette } from './colors/index';\nimport { DefaultEffects } from './effects/index';\nimport { DefaultFontStyles } from './fonts/index';\nimport { mergeThemes } from './mergeThemes';\nimport { DefaultSpacing } from './spacing/index';\nimport { makeSemanticColors } from './utilities/makeSemanticColors';\nimport type { PartialTheme, Theme } from './types/index';\n\n/**\n * Creates a custom theme definition.\n * @param theme - Partial theme object.\n * @param depComments - Whether to include deprecated tags as comments for deprecated slots.\n */\nexport function createTheme(theme: PartialTheme = {}, depComments: boolean = false): Theme {\n const isInverted = !!theme.isInverted;\n const baseTheme: Theme = {\n palette: DefaultPalette,\n effects: DefaultEffects,\n fonts: DefaultFontStyles,\n spacing: DefaultSpacing,\n isInverted,\n disableGlobalClassNames: false,\n semanticColors: makeSemanticColors(DefaultPalette, DefaultEffects, undefined, isInverted, depComments),\n rtl: undefined,\n };\n\n return mergeThemes(baseTheme, theme);\n}\n","import { merge } from '@fluentui/utilities';\nimport { getSemanticColors } from './utilities/makeSemanticColors';\nimport type { IFontStyles, PartialTheme, Theme } from './types/index';\n\n/**\n * Merge a partial/full theme into a full theme and returns a merged full theme.\n */\nexport function mergeThemes(theme: Theme, partialTheme: PartialTheme = {}): Theme {\n const mergedTheme = merge({}, theme, partialTheme, {\n semanticColors: getSemanticColors(\n partialTheme.palette,\n partialTheme.effects,\n partialTheme.semanticColors,\n partialTheme.isInverted === undefined ? theme.isInverted : partialTheme.isInverted,\n ),\n }) as Theme;\n\n if (partialTheme.palette?.themePrimary && !partialTheme.palette?.accent) {\n mergedTheme.palette.accent = partialTheme.palette.themePrimary;\n }\n\n if (partialTheme.defaultFontStyle) {\n for (const fontStyle of Object.keys(mergedTheme.fonts) as (keyof IFontStyles)[]) {\n mergedTheme.fonts[fontStyle] = merge(\n mergedTheme.fonts[fontStyle],\n partialTheme.defaultFontStyle,\n partialTheme?.fonts?.[fontStyle],\n );\n }\n }\n\n return mergedTheme;\n}\n","import { Customizations, getWindow } from '@fluentui/utilities';\nimport { loadTheme as legacyLoadTheme } from '@microsoft/load-themed-styles';\nimport { createTheme } from '@fluentui/theme';\nimport type { ITheme, IPartialTheme, IFontStyles } from '../interfaces/index';\nimport type { IRawStyle } from '@fluentui/merge-styles';\n\nexport { createTheme } from '@fluentui/theme';\n\nlet _theme: ITheme = createTheme({});\nlet _onThemeChangeCallbacks: Array<(theme: ITheme) => void> = [];\n\nexport const ThemeSettingName = 'theme';\n\nexport function initializeThemeInCustomizations(): void {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const win: any = getWindow();\n\n if (win?.FabricConfig?.legacyTheme) {\n // does everything the `else` clause does and more, such as invoke legacy theming\n loadTheme(win.FabricConfig.legacyTheme);\n } else if (!Customizations.getSettings([ThemeSettingName]).theme) {\n if (win?.FabricConfig?.theme) {\n _theme = createTheme(win.FabricConfig.theme);\n }\n\n // Set the default theme.\n Customizations.applySettings({ [ThemeSettingName]: _theme });\n }\n}\n\ninitializeThemeInCustomizations();\n\n/**\n * Gets the theme object\n * @param depComments - Whether to include deprecated tags as comments for deprecated slots.\n */\nexport function getTheme(depComments: boolean = false): ITheme {\n if (depComments === true) {\n _theme = createTheme({}, depComments);\n }\n return _theme;\n}\n\n/**\n * Registers a callback that gets called whenever the theme changes.\n * This should only be used when the component cannot automatically get theme changes through its state.\n * This will not register duplicate callbacks.\n */\nexport function registerOnThemeChangeCallback(callback: (theme: ITheme) => void): void {\n if (_onThemeChangeCallbacks.indexOf(callback) === -1) {\n _onThemeChangeCallbacks.push(callback);\n }\n}\n\n/**\n * See registerOnThemeChangeCallback().\n * Removes previously registered callbacks.\n */\nexport function removeOnThemeChangeCallback(callback: (theme: ITheme) => void): void {\n const i = _onThemeChangeCallbacks.indexOf(callback);\n if (i === -1) {\n return;\n }\n\n _onThemeChangeCallbacks.splice(i, 1);\n}\n\n/**\n * Applies the theme, while filling in missing slots.\n * @param theme - Partial theme object.\n * @param depComments - Whether to include deprecated tags as comments for deprecated slots.\n */\nexport function loadTheme(theme: IPartialTheme, depComments: boolean = false): ITheme {\n _theme = createTheme(theme, depComments);\n\n // Invoke the legacy method of theming the page as well.\n legacyLoadTheme({ ..._theme.palette, ..._theme.semanticColors, ..._theme.effects, ..._loadFonts(_theme) });\n\n Customizations.applySettings({ [ThemeSettingName]: _theme });\n\n _onThemeChangeCallbacks.forEach((callback: (theme: ITheme) => void) => {\n try {\n callback(_theme);\n } catch (e) {\n // don't let a bad callback break everything else\n }\n });\n\n return _theme;\n}\n\n/**\n * Loads font variables into a JSON object.\n * @param theme - The theme object\n */\nfunction _loadFonts(theme: ITheme): { [name: string]: string } {\n const lines: { [key: string]: string } = {};\n\n for (const fontName of Object.keys(theme.fonts)) {\n const font: IRawStyle = theme.fonts[fontName as keyof IFontStyles];\n\n for (const propName of Object.keys(font)) {\n const name: string = fontName + propName.charAt(0).toUpperCase() + propName.slice(1);\n let value = font[propName as keyof IRawStyle] as string;\n\n if (propName === 'fontSize' && typeof value === 'number') {\n // if it's a number, convert it to px by default like our theming system does\n value = value + 'px';\n }\n lines[name] = value;\n }\n }\n return lines;\n}\n","import type { IRawStyle } from '@fluentui/merge-styles';\n\n// This file mimics styles and mixins from _General.Mixins.scss\nexport const normalize: IRawStyle = {\n boxShadow: 'none',\n margin: 0,\n padding: 0,\n boxSizing: 'border-box',\n};\n\nexport const noWrap: IRawStyle = {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n};\n","import type { IStyle } from '@fluentui/merge-styles';\n\n/**\n * Generates placeholder style for each of the browsers supported by `@fluentui/react`.\n * @param styles - The style to use.\n * @returns The placeholder style object for each browser depending on the placeholder directive it uses.\n */\nexport function getPlaceholderStyles(styles: IStyle): IStyle {\n return {\n selectors: {\n '::placeholder': styles, // Chrome, Safari, Opera, Firefox\n ':-ms-input-placeholder': styles, // IE 10+\n '::-ms-input-placeholder': styles, // Edge\n },\n };\n}\n","/* eslint-disable no-console */\n\nlet _warningCallback: ((message: string) => void) | undefined = undefined;\n\nexport type ISettingsMap = { [P in keyof T]?: string };\n\n/**\n * Sends a warning to console, if the api is present.\n *\n * @public\n * @param message - Warning message.\n */\nexport function warn(message: string): void {\n if (_warningCallback && process.env.NODE_ENV !== 'production') {\n _warningCallback(message);\n } else if (console && console.warn) {\n console.warn(message);\n }\n}\n\n/**\n * Configures the warning callback. Passing in undefined will reset it to use the default\n * console.warn function.\n *\n * @public\n * @param warningCallback - Callback to override the generated warnings.\n */\nexport function setWarningCallback(warningCallback?: (message: string) => void): void {\n _warningCallback = warningCallback;\n}\n","import { GlobalSettings, warn } from '@fluentui/utilities';\nimport { fontFace, mergeStyles, Stylesheet } from '@fluentui/merge-styles';\nimport type { IRawStyle, IFontFace } from '@fluentui/merge-styles';\n\nexport interface IIconSubset {\n fontFace?: IFontFace;\n icons: {\n [key: string]: string | JSX.Element;\n };\n\n style?: IRawStyle;\n /**\n * Indicates to the icon renderer that it is safe to merge any props on the original `Icon` element\n * onto the child content element registered for the icon which are valid for HTML images.\n */\n mergeImageProps?: boolean;\n}\n\nexport interface IIconSubsetRecord extends IIconSubset {\n isRegistered?: boolean;\n className?: string;\n}\n\nexport interface IIconRecord {\n code: string | undefined;\n subset: IIconSubsetRecord;\n}\n\nexport interface IIconOptions {\n /**\n * By default, registering the same set of icons will generate a console warning per duplicate icon\n * registered, because this scenario can create unexpected consequences.\n *\n * Some scenarios include:\n *\n * Icon set was previously registered using a different base url.\n * Icon set was previously registered but a different version was provided.\n * Icons in a previous registered set overlap with a new set.\n *\n * To simply ignore previously registered icons, you can specify to disable warnings. This means\n * that if an icon which was previous registered is registered again, it will be silently ignored.\n * However, consider whether the problems listed above will cause issues.\n **/\n disableWarnings: boolean;\n\n /**\n * @deprecated Use `disableWarnings` instead.\n */\n warnOnMissingIcons?: boolean;\n}\n\nexport interface IIconRecords {\n __options: IIconOptions;\n __remapped: { [key: string]: string };\n [key: string]: IIconRecord | {};\n}\n\nconst ICON_SETTING_NAME = 'icons';\n\nconst _iconSettings = GlobalSettings.getValue(ICON_SETTING_NAME, {\n __options: {\n disableWarnings: false,\n warnOnMissingIcons: true,\n },\n __remapped: {},\n});\n\n// Reset icon registration on stylesheet resets.\nconst stylesheet = Stylesheet.getInstance();\n\nif (stylesheet && stylesheet.onReset) {\n stylesheet.onReset(() => {\n for (const name in _iconSettings) {\n if (_iconSettings.hasOwnProperty(name) && !!(_iconSettings[name] as IIconRecord).subset) {\n (_iconSettings[name] as IIconRecord).subset.className = undefined;\n }\n }\n });\n}\n\n/**\n * Normalizes an icon name for consistent mapping.\n * Current implementation is to convert the icon name to lower case.\n *\n * @param name - Icon name to normalize.\n * @returns {string} Normalized icon name to use for indexing and mapping.\n */\nconst normalizeIconName = (name: string): string => name.toLowerCase();\n\n/**\n * Registers a given subset of icons.\n *\n * @param iconSubset - the icon subset definition.\n */\nexport function registerIcons(iconSubset: IIconSubset, options?: Partial): void {\n let subset = {\n ...iconSubset,\n isRegistered: false,\n className: undefined,\n };\n let { icons } = iconSubset;\n\n // Grab options, optionally mix user provided ones on top.\n options = options ? { ..._iconSettings.__options, ...options } : _iconSettings.__options;\n\n for (const iconName in icons) {\n if (icons.hasOwnProperty(iconName)) {\n const code = icons[iconName];\n const normalizedIconName = normalizeIconName(iconName);\n\n if (_iconSettings[normalizedIconName]) {\n _warnDuplicateIcon(iconName);\n } else {\n _iconSettings[normalizedIconName] = {\n code,\n subset,\n } as IIconRecord;\n }\n }\n }\n}\n\n/**\n * Unregisters icons by name.\n *\n * @param iconNames - List of icons to unregister.\n */\nexport function unregisterIcons(iconNames: string[]): void {\n const options = _iconSettings.__options;\n\n for (const iconName of iconNames) {\n const normalizedIconName = normalizeIconName(iconName);\n if (_iconSettings[normalizedIconName]) {\n delete _iconSettings[normalizedIconName];\n } else {\n // Warn that we are trying to delete an icon that doesn't exist\n if (!options.disableWarnings) {\n warn(`The icon \"${iconName}\" tried to unregister but was not registered.`);\n }\n }\n\n // Delete any aliases for this iconName\n if (_iconSettings.__remapped[normalizedIconName]) {\n delete _iconSettings.__remapped[normalizedIconName];\n }\n\n // Delete any items that were an alias for this iconName\n Object.keys(_iconSettings.__remapped).forEach((key: string) => {\n if (_iconSettings.__remapped[key] === normalizedIconName) {\n delete _iconSettings.__remapped[key];\n }\n });\n }\n}\n\n/**\n * Remaps one icon name to another.\n */\nexport function registerIconAlias(iconName: string, mappedToName: string): void {\n _iconSettings.__remapped[normalizeIconName(iconName)] = normalizeIconName(mappedToName);\n}\n\n/**\n * Gets an icon definition. If an icon is requested but the subset has yet to be registered,\n * it will get registered immediately.\n *\n * @public\n * @param name - Name of icon.\n */\nexport function getIcon(name?: string): IIconRecord | undefined {\n let icon: IIconRecord | undefined = undefined;\n const options = _iconSettings.__options;\n\n name = name ? normalizeIconName(name) : '';\n name = _iconSettings.__remapped[name] || name;\n\n if (name) {\n icon = _iconSettings[name!] as IIconRecord;\n\n if (icon) {\n let { subset } = icon;\n if (subset && subset.fontFace) {\n if (!subset.isRegistered) {\n fontFace(subset.fontFace);\n subset.isRegistered = true;\n }\n\n if (!subset.className) {\n subset.className = mergeStyles(subset.style, {\n fontFamily: subset.fontFace.fontFamily,\n fontWeight: subset.fontFace.fontWeight || 'normal',\n fontStyle: subset.fontFace.fontStyle || 'normal',\n });\n }\n }\n } else {\n // eslint-disable-next-line deprecation/deprecation\n if (!options.disableWarnings && options.warnOnMissingIcons) {\n warn(\n `The icon \"${name}\" was used but not registered. See https://github.com/microsoft/fluentui/wiki/Using-icons for more information.`,\n );\n }\n }\n }\n\n return icon;\n}\n\n/**\n * Sets the icon options.\n *\n * @public\n */\nexport function setIconOptions(options: Partial): void {\n _iconSettings.__options = {\n ..._iconSettings.__options,\n ...options,\n };\n}\n\nlet _missingIcons: string[] = [];\nlet _missingIconsTimer: ReturnType | undefined = undefined;\n\nfunction _warnDuplicateIcon(iconName: string): void {\n const options = _iconSettings.__options;\n const warningDelay = 2000;\n const maxIconsInMessage = 10;\n\n if (!options.disableWarnings) {\n _missingIcons.push(iconName);\n if (_missingIconsTimer === undefined) {\n _missingIconsTimer = setTimeout(() => {\n warn(\n `Some icons were re-registered. Applications should only call registerIcons for any given ` +\n `icon once. Redefining what an icon is may have unintended consequences. Duplicates ` +\n `include: \\n` +\n _missingIcons.slice(0, maxIconsInMessage).join(', ') +\n (_missingIcons.length > maxIconsInMessage ? ` (+ ${_missingIcons.length - maxIconsInMessage} more)` : ''),\n );\n _missingIconsTimer = undefined;\n _missingIcons = [];\n }, warningDelay);\n }\n }\n}\n","import { IStyleSet, IConcatenatedStyleSet } from './IStyleSet';\nimport { IStyleBase, IStyle } from './IStyle';\nimport { IStyleFunctionOrObject } from './IStyleFunction';\nimport { ObjectOnly } from './ObjectOnly';\nimport { ShadowConfig, isShadowConfig } from './shadowConfig';\n\ntype Missing = false | null | undefined;\ntype MissingOrShadowConfig = Missing | ShadowConfig;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSet - The first style set to be concatenated.\n */\nexport function concatStyleSets(styleSet: TStyleSet | Missing): IConcatenatedStyleSet>;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSet1 - The first style set to be concatenated.\n * @param styleSet2 - The second style set to be concatenated.\n */\nexport function concatStyleSets(\n styleSet1: TStyleSet1 | MissingOrShadowConfig,\n styleSet2: TStyleSet2 | Missing,\n): IConcatenatedStyleSet & ObjectOnly>;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSet1 - The first style set to be concatenated.\n * @param styleSet2 - The second style set to be concatenated.\n * @param styleSet3 - The third style set to be concatenated.\n */\nexport function concatStyleSets(\n styleSet1: TStyleSet1 | MissingOrShadowConfig,\n styleSet2: TStyleSet2 | Missing,\n styleSet3: TStyleSet3 | Missing,\n): IConcatenatedStyleSet & ObjectOnly & ObjectOnly>;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSet1 - The first style set to be concatenated.\n * @param styleSet2 - The second style set to be concatenated.\n * @param styleSet3 - The third style set to be concatenated.\n * @param styleSet4 - The fourth style set to be concatenated.\n */\nexport function concatStyleSets(\n styleSet1: TStyleSet1 | MissingOrShadowConfig,\n styleSet2: TStyleSet2 | Missing,\n styleSet3: TStyleSet3 | Missing,\n styleSet4: TStyleSet4 | Missing,\n): IConcatenatedStyleSet<\n ObjectOnly & ObjectOnly & ObjectOnly & ObjectOnly\n>;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSet1 - The first style set to be concatenated.\n * @param styleSet2 - The second style set to be concatenated.\n * @param styleSet3 - The third style set to be concatenated.\n * @param styleSet4 - The fourth style set to be concatenated.\n * @param styleSet5 - The fifth set to be concatenated.\n */\nexport function concatStyleSets(\n styleSet1: TStyleSet1 | MissingOrShadowConfig,\n styleSet2: TStyleSet2 | Missing,\n styleSet3: TStyleSet3 | Missing,\n styleSet4: TStyleSet4 | Missing,\n styleSet5: TStyleSet5 | Missing,\n): IConcatenatedStyleSet<\n ObjectOnly &\n ObjectOnly &\n ObjectOnly &\n ObjectOnly &\n ObjectOnly\n>;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSet1 - The first style set to be concatenated.\n * @param styleSet2 - The second style set to be concatenated.\n * @param styleSet3 - The third style set to be concatenated.\n * @param styleSet4 - The fourth style set to be concatenated.\n * @param styleSet5 - The fifth set to be concatenated.\n * @param styleSet6 - The sixth set to be concatenated.\n */\nexport function concatStyleSets(\n styleSet1: TStyleSet1 | MissingOrShadowConfig,\n styleSet2: TStyleSet2 | Missing,\n styleSet3: TStyleSet3 | Missing,\n styleSet4: TStyleSet4 | Missing,\n styleSet5: TStyleSet5 | Missing,\n styleSet6: TStyleSet6 | Missing,\n): IConcatenatedStyleSet<\n ObjectOnly &\n ObjectOnly &\n ObjectOnly &\n ObjectOnly &\n ObjectOnly &\n ObjectOnly\n>;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSets - One or more stylesets to be merged (each param can also be falsy).\n */\nexport function concatStyleSets(...styleSets: (IStyleSet | MissingOrShadowConfig)[]): IConcatenatedStyleSet;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSets - One or more stylesets to be merged (each param can also be falsy).\n */\nexport function concatStyleSets(...styleSets: any[]): IConcatenatedStyleSet {\n if (\n styleSets &&\n styleSets.length === 1 &&\n styleSets[0] &&\n !(styleSets[0] as IStyleSet).subComponentStyles &&\n !isShadowConfig(styleSets[0])\n ) {\n return styleSets[0] as IConcatenatedStyleSet;\n }\n\n const mergedSet: IConcatenatedStyleSet = {};\n\n // We process sub component styles in two phases. First we collect them, then we combine them into 1 style function.\n const workingSubcomponentStyles: { [key: string]: Array> } = {};\n\n for (const currentSet of styleSets) {\n if (currentSet && !isShadowConfig(currentSet)) {\n for (const prop in currentSet) {\n if (currentSet.hasOwnProperty(prop)) {\n if (prop === 'subComponentStyles' && currentSet.subComponentStyles !== undefined) {\n // subcomponent styles - style functions or objects\n\n const currentComponentStyles = currentSet.subComponentStyles;\n for (const subCompProp in currentComponentStyles) {\n if (currentComponentStyles.hasOwnProperty(subCompProp)) {\n if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) {\n workingSubcomponentStyles[subCompProp].push(currentComponentStyles[subCompProp]);\n } else {\n workingSubcomponentStyles[subCompProp] = [currentComponentStyles[subCompProp]];\n }\n }\n }\n\n continue;\n }\n\n // the as any casts below is a workaround for ts 2.8.\n // todo: remove cast to any in ts 2.9.\n const mergedValue: IStyle = (mergedSet as any)[prop];\n const currentValue = (currentSet as any)[prop];\n\n if (mergedValue === undefined) {\n (mergedSet as any)[prop] = currentValue;\n } else {\n (mergedSet as any)[prop] = [\n // https://github.com/Microsoft/TypeScript/issues/25474\n ...(Array.isArray(mergedValue) ? mergedValue : [mergedValue as IStyleBase]),\n ...(Array.isArray(currentValue) ? currentValue : [currentValue as IStyleBase]),\n ];\n }\n }\n }\n }\n }\n\n if (Object.keys(workingSubcomponentStyles).length > 0) {\n mergedSet.subComponentStyles = {};\n const mergedSubStyles = mergedSet.subComponentStyles;\n\n // now we process the subcomponent styles if there are any\n for (const subCompProp in workingSubcomponentStyles) {\n if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) {\n const workingSet = workingSubcomponentStyles[subCompProp];\n mergedSubStyles[subCompProp] = (styleProps: any) => {\n return concatStyleSets(\n ...workingSet.map((styleFunctionOrObject: IStyleFunctionOrObject) =>\n typeof styleFunctionOrObject === 'function' ? styleFunctionOrObject(styleProps) : styleFunctionOrObject,\n ),\n );\n };\n }\n }\n }\n\n return mergedSet;\n}\n","import { concatStyleSets } from './concatStyleSets';\nimport { IStyleSetBase } from './IStyleSet';\nimport { IStyleFunctionOrObject } from './IStyleFunction';\nimport { DeepPartialV2 as DeepPartial } from './DeepPartial';\n\n/**\n * Concatenates style sets into one, but resolves functional sets using the given props.\n * @param styleProps - Props used to resolve functional sets.\n * @param allStyles - Style sets, which can be functions or objects.\n */\nexport function concatStyleSetsWithProps(\n styleProps: TStyleProps,\n ...allStyles: (IStyleFunctionOrObject | undefined)[]\n): DeepPartial {\n const result: Array> = [];\n for (const styles of allStyles) {\n if (styles) {\n result.push(typeof styles === 'function' ? styles(styleProps) : styles);\n }\n }\n if (result.length === 1) {\n return result[0];\n } else if (result.length) {\n // cliffkoh: I cannot figure out how to avoid the cast to any here.\n // It is something to do with the use of Omit in IStyleSet.\n // It might not be necessary once Omit becomes part of lib.d.ts (when we remove our own Omit and rely on\n // the official version).\n return concatStyleSets(...result) as DeepPartial;\n }\n\n return {} as DeepPartial;\n}\n","import { concatStyleSets } from './concatStyleSets';\nimport { extractStyleParts } from './extractStyleParts';\nimport { IStyle } from './IStyle';\nimport { IStyleOptions } from './IStyleOptions';\nimport { IConcatenatedStyleSet, IProcessedStyleSet, IStyleSet } from './IStyleSet';\nimport { getStyleOptions } from './StyleOptionsState';\nimport { applyRegistration, styleToRegistration } from './styleToClassName';\nimport { ObjectOnly } from './ObjectOnly';\nimport { isShadowConfig, ShadowConfig } from './shadowConfig';\nimport { Stylesheet } from './Stylesheet';\n\ntype Missing = false | null | undefined;\ntype MissingOrShadowConfig = Missing | ShadowConfig;\n\n/**\n * Takes in one or more style set objects, each consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeStyles` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSet - The first style set to be merged and reigstered.\n */\nexport function mergeStyleSets(styleSet: TStyleSet | Missing): IProcessedStyleSet>;\n\n/**\n * Takes in one or more style set objects, each consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeStyles` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSet1 - The first style set to be merged.\n * @param styleSet2 - The second style set to be merged.\n */\nexport function mergeStyleSets(\n styleSet1: TStyleSet1 | Missing,\n styleSet2: TStyleSet2 | Missing,\n): IProcessedStyleSet & ObjectOnly>;\n\n/**\n * Takes in one or more style set objects, each consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeStyles` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSet1 - The first style set to be merged.\n * @param styleSet2 - The second style set to be merged.\n * @param styleSet3 - The third style set to be merged.\n */\nexport function mergeStyleSets(\n styleSet1: TStyleSet1 | Missing,\n styleSet2: TStyleSet2 | Missing,\n styleSet3: TStyleSet3 | Missing,\n): IProcessedStyleSet & ObjectOnly & ObjectOnly>;\n\n/**\n * Takes in one or more style set objects, each consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeStyles` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSet1 - The first style set to be merged.\n * @param styleSet2 - The second style set to be merged.\n * @param styleSet3 - The third style set to be merged.\n * @param styleSet4 - The fourth style set to be merged.\n */\nexport function mergeStyleSets(\n styleSet1: TStyleSet1 | Missing,\n styleSet2: TStyleSet2 | Missing,\n styleSet3: TStyleSet3 | Missing,\n styleSet4: TStyleSet4 | Missing,\n): IProcessedStyleSet<\n ObjectOnly & ObjectOnly & ObjectOnly & ObjectOnly\n>;\n\n/**\n * Takes in one or more style set objects, each consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeStyles` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n */\nexport function mergeStyleSets(...styleSets: Array): IProcessedStyleSet;\n\nexport function mergeStyleSets(\n shadowConfig: ShadowConfig,\n ...styleSets: Array\n): IProcessedStyleSet;\n\n/**\n * Takes in one or more style set objects, each consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeStyles` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n */\nexport function mergeStyleSets(...styleSets: any[]): IProcessedStyleSet {\n return mergeCssSets(styleSets as any, getStyleOptions());\n}\n\n/**\n * Takes in one or more style set objects, each1consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeCss` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(\n styleSets: [TStyleSet | Missing],\n options?: IStyleOptions,\n): IProcessedStyleSet>;\n\n/**\n * Takes in one or more style set objects, each1consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeCss` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(\n styleSets: [TStyleSet1 | MissingOrShadowConfig, TStyleSet2 | Missing],\n options?: IStyleOptions,\n): IProcessedStyleSet & ObjectOnly>;\n\n/**\n * Takes in one or more style set objects, each1consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeCss` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(\n styleSets: [TStyleSet1 | MissingOrShadowConfig, TStyleSet2 | Missing, TStyleSet3 | Missing],\n options?: IStyleOptions,\n): IProcessedStyleSet & ObjectOnly & ObjectOnly>;\n\n/**\n * Takes in one or more style set objects, each1consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeCss` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(\n styleSets: [TStyleSet1 | MissingOrShadowConfig, TStyleSet2 | Missing, TStyleSet3 | Missing, TStyleSet4 | Missing],\n options?: IStyleOptions,\n): IProcessedStyleSet<\n ObjectOnly & ObjectOnly & ObjectOnly & ObjectOnly\n>;\n\n/**\n * Takes in one or more style set objects, each1consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeCss` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(\n styleSet: [TStyleSet | Missing],\n options?: IStyleOptions,\n): IProcessedStyleSet>;\n\n/**\n * Takes in one or more style set objects, each1consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeCss` for each property in the object, but ensures the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(styleSets: any[], options?: IStyleOptions): IProcessedStyleSet {\n const classNameSet: IProcessedStyleSet & Record = { subComponentStyles: {} };\n\n let shadowConfig: ShadowConfig | undefined = undefined;\n let styleSet;\n if (isShadowConfig(styleSets[0])) {\n shadowConfig = styleSets[0];\n styleSet = styleSets[1];\n } else {\n styleSet = styleSets[0];\n }\n\n shadowConfig ??= options?.shadowConfig;\n\n const opts = { ...options, shadowConfig };\n\n if (!styleSet && styleSets.length <= 1) {\n return { subComponentStyles: {} } as any;\n }\n\n const sheet = Stylesheet.getInstance(shadowConfig);\n opts.stylesheet = sheet;\n const concatenatedStyleSet = concatStyleSets(...styleSets);\n\n const registrations = [];\n\n for (const styleSetArea in concatenatedStyleSet) {\n if (concatenatedStyleSet.hasOwnProperty(styleSetArea)) {\n if (styleSetArea === 'subComponentStyles') {\n classNameSet.subComponentStyles = concatenatedStyleSet.subComponentStyles || {};\n continue;\n } else if (styleSetArea === '__shadowConfig__') {\n continue;\n }\n\n const styles: IStyle = (concatenatedStyleSet as any)[styleSetArea];\n\n const { classes, objects } = extractStyleParts(sheet, styles);\n\n if (objects?.length) {\n const registration = styleToRegistration(opts || {}, { displayName: styleSetArea }, objects);\n\n if (registration) {\n registrations.push(registration);\n classNameSet[styleSetArea] = classes.concat([registration.className]).join(' ');\n }\n } else {\n classNameSet[styleSetArea] = classes.join(' ');\n }\n }\n }\n\n for (const registration of registrations) {\n if (registration) {\n applyRegistration(registration, options?.specificityMultiplier, shadowConfig);\n }\n }\n\n return classNameSet;\n}\n","export const FLUENT_CDN_BASE_URL = 'https://res.cdn.office.net/files/fabric-cdn-prod_20240129.001';\n","// A packages cache that makes sure that we don't inject the same packageName twice in the same bundle -\n// this cache is local to the module closure inside this bundle\nconst packagesCache: { [name: string]: string } = {};\n\n// Cache access to window to avoid IE11 memory leak.\nlet _win: Window | undefined = undefined;\n\ntry {\n _win = window;\n} catch (e) {\n /* no-op */\n}\n\nexport function setVersion(packageName: string, packageVersion: string): void {\n if (typeof _win !== 'undefined') {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const packages = ((_win as any).__packages__ = (_win as any).__packages__ || {});\n\n // We allow either the global packages or local packages caches to invalidate so testing can\n // just clear the global to set this state\n if (!packages[packageName] || !packagesCache[packageName]) {\n packagesCache[packageName] = packageVersion;\n const versions = (packages[packageName] = packages[packageName] || []);\n versions.push(packageVersion);\n }\n }\n}\n","import { setVersion } from './setVersion';\nexport { setVersion };\n\nsetVersion('@fluentui/set-version', '6.0.0');\n","// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/style-utilities', '8.10.15');","export { AnimationClassNames, FontClassNames, ColorClassNames } from './classNames/index';\n\nexport {\n AnimationStyles,\n AnimationVariables,\n DefaultPalette,\n DefaultEffects,\n DefaultFontStyles,\n registerDefaultFontFaces,\n FontSizes,\n FontWeights,\n IconFontSizes,\n createFontStyles,\n hiddenContentStyle,\n PulsingBeaconAnimationStyles,\n getGlobalClassNames,\n // eslint-disable-next-line deprecation/deprecation\n getFocusStyle,\n getFocusOutlineStyle,\n getInputFocusStyle,\n getThemedContext,\n focusClear,\n ThemeSettingName,\n getTheme,\n loadTheme,\n createTheme,\n registerOnThemeChangeCallback,\n removeOnThemeChangeCallback,\n HighContrastSelector,\n HighContrastSelectorWhite,\n HighContrastSelectorBlack,\n // eslint-disable-next-line deprecation/deprecation\n EdgeChromiumHighContrastSelector,\n ScreenWidthMinSmall,\n ScreenWidthMinMedium,\n ScreenWidthMinLarge,\n ScreenWidthMinXLarge,\n ScreenWidthMinXXLarge,\n ScreenWidthMinXXXLarge,\n ScreenWidthMaxSmall,\n ScreenWidthMaxMedium,\n ScreenWidthMaxLarge,\n ScreenWidthMaxXLarge,\n ScreenWidthMaxXXLarge,\n ScreenWidthMinUhfMobile,\n getScreenSelector,\n getHighContrastNoAdjustStyle,\n // eslint-disable-next-line deprecation/deprecation\n getEdgeChromiumNoHighContrastAdjustSelector,\n normalize,\n noWrap,\n getFadedOverflowStyle,\n getPlaceholderStyles,\n ZIndexes,\n} from './styles/index';\nexport type { GlobalClassNames } from './styles/index';\n\nexport {\n buildClassMap,\n getIcon,\n registerIcons,\n registerIconAlias,\n unregisterIcons,\n setIconOptions,\n getIconClassName,\n} from './utilities/index';\nexport type { IIconRecord, IIconSubset, IIconSubsetRecord, IIconOptions } from './utilities/index';\n\nexport type {\n IAnimationStyles,\n IAnimationVariables,\n IGetFocusStylesOptions,\n IEffects,\n IFontStyles,\n IPalette,\n ISemanticColors,\n ISemanticTextColors,\n ISpacing,\n ITheme,\n IPartialTheme,\n IScheme,\n ISchemeNames,\n} from './interfaces/index';\n\nexport {\n InjectionMode,\n Stylesheet,\n concatStyleSets,\n concatStyleSetsWithProps,\n fontFace,\n keyframes,\n mergeStyleSets,\n mergeStyles,\n} from './MergeStyles';\nexport type {\n IFontFace,\n IFontWeight,\n IRawStyle,\n IStyle,\n IStyleSet,\n IStyleSetBase,\n IProcessedStyleSet,\n IStyleSheetConfig,\n ICSPSettings,\n ShadowConfig,\n} from './MergeStyles';\n\nexport { FLUENT_CDN_BASE_URL } from './cdn';\n\nimport './version';\n\n// Ensure theme is initialized when this package is referenced.\nimport { initializeThemeInCustomizations } from './styles/theme';\ninitializeThemeInCustomizations();\n","import * as React from 'react';\nimport type { ICustomizations } from './Customizations';\n\nexport interface ICustomizerContext {\n customizations: ICustomizations;\n}\n\nexport const CustomizerContext = React.createContext({\n customizations: {\n inCustomizerContext: false,\n settings: {},\n scopedSettings: {},\n },\n});\n","import * as React from 'react';\nimport { concatStyleSets, IStyleSetBase, ITheme } from '@fluentui/style-utilities';\nimport { Customizations, CustomizerContext, ICustomizerContext } from '@fluentui/utilities';\nimport { createFactory } from './slots';\nimport { assign } from './utilities';\n\nimport {\n IComponentOptions,\n ICustomizationProps,\n IStyleableComponentProps,\n IStylesFunctionOrObject,\n IToken,\n ITokenFunction,\n IViewComponent,\n} from './IComponent';\nimport { IDefaultSlotProps, ISlotCreator, ValidProps } from './ISlots';\n\n/**\n * Assembles a higher order component based on the following: styles, theme, view, and state.\n * Imposes a separation of concern and centralizes styling processing to increase ease of use and robustness\n * in how components use and apply styling and theming.\n *\n * Automatically merges and applies themes and styles with theme / styleprops having the highest priority.\n * State component, if provided, is passed in props for processing. Props from state / user are automatically processed\n * and styled before finally being passed to view.\n *\n * State components should contain all stateful behavior and should not generate any JSX, but rather simply call\n * the view prop.\n *\n * Views should simply be stateless pure functions that receive all props needed for rendering their output.\n *\n * State component is optional. If state is not provided, created component is essentially a functional\n * stateless component.\n *\n * @param options - component Component options. See IComponentOptions for more detail.\n */\nexport function createComponent<\n TComponentProps extends ValidProps,\n TTokens,\n TStyleSet extends IStyleSetBase,\n TViewProps extends TComponentProps = TComponentProps,\n TStatics = {},\n>(\n view: IViewComponent,\n options: IComponentOptions = {},\n): React.FunctionComponent & TStatics {\n const { factoryOptions = {} } = options;\n const { defaultProp } = factoryOptions;\n\n const ResultComponent: React.FunctionComponent = (\n componentProps: TComponentProps & IStyleableComponentProps,\n ) => {\n const settings: ICustomizationProps = _getCustomizations(\n options.displayName,\n React.useContext(CustomizerContext),\n options.fields,\n );\n\n const stateReducer = options.state;\n\n if (stateReducer) {\n // Don't assume state will return all props, so spread useState result over component props.\n componentProps = {\n ...componentProps,\n ...stateReducer(componentProps),\n };\n }\n\n const theme = componentProps.theme || settings.theme;\n\n const tokens = _resolveTokens(componentProps, theme, options.tokens, settings.tokens, componentProps.tokens);\n const styles = _resolveStyles(\n componentProps,\n theme,\n tokens,\n options.styles,\n settings.styles,\n componentProps.styles,\n );\n\n const viewProps = {\n ...componentProps,\n styles,\n tokens,\n _defaultStyles: styles,\n theme,\n } as unknown as TViewProps & IDefaultSlotProps;\n\n return view(viewProps);\n };\n\n ResultComponent.displayName = options.displayName || view.name;\n\n // If a shorthand prop is defined, create a factory for the component.\n // TODO: This shouldn't be a concern of createComponent.. factoryOptions should just be forwarded.\n // Need to weigh creating default factories on component creation vs. memoizing them on use in slots.tsx.\n if (defaultProp) {\n (ResultComponent as ISlotCreator).create = createFactory(ResultComponent, { defaultProp });\n }\n\n assign(ResultComponent, options.statics);\n\n // Later versions of TypeSript should allow us to merge objects in a type safe way and avoid this cast.\n return ResultComponent as React.FunctionComponent & TStatics;\n}\n\n/**\n * Resolve all styles functions with both props and tokens and flatten results along with all styles objects.\n */\nfunction _resolveStyles(\n props: TProps,\n theme: ITheme,\n tokens: TTokens,\n ...allStyles: (IStylesFunctionOrObject | undefined)[]\n): ReturnType {\n return concatStyleSets(\n ...allStyles.map((styles: IStylesFunctionOrObject | undefined) =>\n typeof styles === 'function' ? styles(props, theme, tokens) : styles,\n ),\n );\n}\n\n/**\n * Resolve all tokens functions with props flatten results along with all tokens objects.\n */\nfunction _resolveTokens(\n props: TViewProps,\n theme: ITheme,\n ...allTokens: (IToken | false | null | undefined)[]\n): TTokens {\n const tokens = {};\n\n for (let currentTokens of allTokens) {\n if (currentTokens) {\n // TODO: why is this cast needed? TS seems to think there is a (TToken | Function) union from somewhere.\n currentTokens =\n typeof currentTokens === 'function'\n ? (currentTokens as ITokenFunction)(props, theme)\n : currentTokens;\n\n if (Array.isArray(currentTokens)) {\n currentTokens = _resolveTokens(props, theme, ...currentTokens);\n }\n\n assign(tokens, currentTokens);\n }\n }\n\n return tokens as TTokens;\n}\n\n/**\n * Helper function for calling Customizations.getSettings falling back to default fields.\n *\n * @param displayName Displayable name for component.\n * @param context React context passed to component containing contextual settings.\n * @param fields Optional list of properties to grab from global store and context.\n */\nfunction _getCustomizations(\n displayName: string | undefined,\n context: ICustomizerContext,\n fields?: string[],\n): ICustomizationProps {\n // TODO: do we want field props? should fields be part of IComponent and used here?\n // TODO: should we centrally define DefaultFields? (not exported from styling)\n // TODO: tie this array to ICustomizationProps, such that each array element is keyof ICustomizationProps\n const DefaultFields = ['theme', 'styles', 'tokens'];\n return Customizations.getSettings(fields || DefaultFields, displayName, context.customizations);\n}\n","const toObjectMap = (...items: (string[] | Record)[]) => {\n const result: Record = {};\n\n for (const item of items) {\n const keys = Array.isArray(item) ? item : Object.keys(item);\n\n for (const key of keys) {\n result[key] = 1;\n }\n }\n\n return result;\n};\n\n/**\n * An array of events that are allowed on every html element type.\n *\n * @public\n */\nexport const baseElementEvents = toObjectMap([\n 'onCopy',\n 'onCut',\n 'onPaste',\n 'onCompositionEnd',\n 'onCompositionStart',\n 'onCompositionUpdate',\n 'onFocus',\n 'onFocusCapture',\n 'onBlur',\n 'onBlurCapture',\n 'onChange',\n 'onInput',\n 'onSubmit',\n 'onLoad',\n 'onError',\n 'onKeyDown',\n 'onKeyDownCapture',\n 'onKeyPress',\n 'onKeyUp',\n 'onAbort',\n 'onCanPlay',\n 'onCanPlayThrough',\n 'onDurationChange',\n 'onEmptied',\n 'onEncrypted',\n 'onEnded',\n 'onLoadedData',\n 'onLoadedMetadata',\n 'onLoadStart',\n 'onPause',\n 'onPlay',\n 'onPlaying',\n 'onProgress',\n 'onRateChange',\n 'onSeeked',\n 'onSeeking',\n 'onStalled',\n 'onSuspend',\n 'onTimeUpdate',\n 'onVolumeChange',\n 'onWaiting',\n 'onClick',\n 'onClickCapture',\n 'onContextMenu',\n 'onDoubleClick',\n 'onDrag',\n 'onDragEnd',\n 'onDragEnter',\n 'onDragExit',\n 'onDragLeave',\n 'onDragOver',\n 'onDragStart',\n 'onDrop',\n 'onMouseDown',\n 'onMouseDownCapture',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseOut',\n 'onMouseOver',\n 'onMouseUp',\n 'onMouseUpCapture',\n 'onSelect',\n 'onTouchCancel',\n 'onTouchEnd',\n 'onTouchMove',\n 'onTouchStart',\n 'onScroll',\n 'onWheel',\n 'onPointerCancel',\n 'onPointerDown',\n 'onPointerEnter',\n 'onPointerLeave',\n 'onPointerMove',\n 'onPointerOut',\n 'onPointerOver',\n 'onPointerUp',\n 'onGotPointerCapture',\n 'onLostPointerCapture',\n]);\n\n/**\n * An array of element attributes which are allowed on every html element type.\n *\n * @public\n */\nexport const baseElementProperties = toObjectMap([\n 'accessKey', // global\n 'children', // global\n 'className', // global\n 'contentEditable', // global\n 'dir', // global\n 'draggable', // global\n 'hidden', // global\n 'htmlFor', // global\n 'id', // global\n 'lang', // global\n 'ref', // global\n 'role', // global\n 'style', // global\n 'tabIndex', // global\n 'title', // global\n 'translate', // global\n 'spellCheck', // global\n 'name', // global\n]);\n\n/**\n * An array of HTML element properties and events.\n *\n * @public\n */\nexport const htmlElementProperties = toObjectMap(baseElementProperties, baseElementEvents);\n\n/**\n * An array of LABEL tag properties and events.\n *\n * @public\n */\nexport const labelProperties = toObjectMap(htmlElementProperties, [\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n]);\n\n/**\n * An array of AUDIO tag properties and events.\n\n * @public\n */\nexport const audioProperties = toObjectMap(htmlElementProperties, [\n 'height', // canvas, embed, iframe, img, input, object, video\n 'loop', // audio, video\n 'muted', // audio, video\n 'preload', // audio, video\n 'src', // audio, embed, iframe, img, input, script, source, track, video\n 'width', // canvas, embed, iframe, img, input, object, video\n]);\n\n/**\n * An array of VIDEO tag properties and events.\n *\n * @public\n */\nexport const videoProperties = toObjectMap(audioProperties, [\n 'poster', // video\n]);\n\n/**\n * An array of OL tag properties and events.\n *\n * @public\n */\nexport const olProperties = toObjectMap(htmlElementProperties, [\n 'start', // ol\n]);\n\n/**\n * An array of LI tag properties and events.\n *\n * @public\n */\nexport const liProperties = toObjectMap(htmlElementProperties, [\n 'value', // button, input, li, option, meter, progress, param\n]);\n\n/**\n * An array of A tag properties and events.\n *\n * @public\n */\nexport const anchorProperties = toObjectMap(htmlElementProperties, [\n 'download', // a, area\n 'href', // a, area, base, link\n 'hrefLang', // a, area, link\n 'media', // a, area, link, source, style\n 'rel', // a, area, link\n 'target', // a, area, base, form\n 'type', // a, button, input, link, menu, object, script, source, style\n]);\n\n/**\n * An array of BUTTON tag properties and events.\n *\n * @public\n */\nexport const buttonProperties = toObjectMap(htmlElementProperties, [\n 'autoFocus', // button, input, select, textarea\n 'disabled', // button, fieldset, input, optgroup, option, select, textarea\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n 'formAction', // input, button\n 'formEncType', // input, button\n 'formMethod', // input, button\n 'formNoValidate', // input, button\n 'formTarget', // input, button\n 'type', // a, button, input, link, menu, object, script, source, style\n 'value', // button, input, li, option, meter, progress, param,\n]);\n\n/**\n * An array of INPUT tag properties and events.\n *\n * @public\n */\nexport const inputProperties = toObjectMap(buttonProperties, [\n 'accept', // input\n 'alt', // area, img, input\n 'autoCapitalize', // input, textarea\n 'autoComplete', // form, input\n 'checked', // input\n 'dirname', // input, textarea\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n 'height', // canvas, embed, iframe, img, input, object, video\n 'inputMode', // input\n 'list', // input\n 'max', // input, meter\n 'maxLength', // input, textarea\n 'min', // input, meter\n 'minLength', // input, textarea\n 'multiple', // input, select\n 'pattern', // input\n 'placeholder', // input, textarea\n 'readOnly', // input, textarea\n 'required', // input, select, textarea\n 'src', // audio, embed, iframe, img, input, script, source, track, video\n 'step', // input\n 'size', // input\n 'type', // a, button, input, link, menu, object, script, source, style\n 'value', // button, input, li, option, meter, progress, param\n 'width', // canvas, embed, iframe, img, input, object, video\n]);\n\n/**\n * An array of TEXTAREA tag properties and events.\n *\n * @public\n */\nexport const textAreaProperties = toObjectMap(buttonProperties, [\n 'autoCapitalize', // input, textarea\n 'cols', // textarea\n 'dirname', // input, textarea\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n 'maxLength', // input, textarea\n 'minLength', // input, textarea\n 'placeholder', // input, textarea\n 'readOnly', // input, textarea\n 'required', // input, select, textarea\n 'rows', // textarea\n 'wrap', // textarea\n]);\n\n/**\n * An array of SELECT tag properties and events.\n *\n * @public\n */\nexport const selectProperties = toObjectMap(buttonProperties, [\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n 'multiple', // input, select\n 'required', // input, select, textarea\n]);\n\nexport const optionProperties = toObjectMap(htmlElementProperties, [\n 'selected', // option\n 'value', // button, input, li, option, meter, progress, param\n]);\n\n/**\n * An array of TABLE tag properties and events.\n *\n * @public\n */\nexport const tableProperties = toObjectMap(htmlElementProperties, [\n 'cellPadding', // table\n 'cellSpacing', // table\n]);\n\n/**\n * An array of TR tag properties and events.\n *\n * @public\n */\nexport const trProperties = htmlElementProperties;\n\n/**\n * An array of TH tag properties and events.\n *\n * @public\n */\nexport const thProperties = toObjectMap(htmlElementProperties, [\n 'rowSpan', // td, th\n 'scope', // th\n]);\n\n/**\n * An array of TD tag properties and events.\n *\n * @public\n */\nexport const tdProperties = toObjectMap(htmlElementProperties, [\n 'colSpan', // td\n 'headers', // td\n 'rowSpan', // td, th\n 'scope', // th\n]);\n\nexport const colGroupProperties = toObjectMap(htmlElementProperties, [\n 'span', // col, colgroup\n]);\n\nexport const colProperties = toObjectMap(htmlElementProperties, [\n 'span', // col, colgroup\n]);\n\n/**\n * An array of FORM tag properties and events.\n *\n * @public\n */\nexport const formProperties = toObjectMap(htmlElementProperties, [\n 'acceptCharset', // form\n 'action', // form\n 'encType', // form\n 'encType', // form\n 'method', // form\n 'noValidate', // form\n 'target', // form\n]);\n\n/**\n * An array of IFRAME tag properties and events.\n *\n * @public\n */\nexport const iframeProperties = toObjectMap(htmlElementProperties, [\n 'allow', // iframe\n 'allowFullScreen', // iframe\n 'allowPaymentRequest', // iframe\n 'allowTransparency', // iframe\n 'csp', // iframe\n 'height', // canvas, embed, iframe, img, input, object, video\n 'importance', // iframe\n 'referrerPolicy', // iframe\n 'sandbox', // iframe\n 'src', // audio, embed, iframe, img, input, script, source, track, video\n 'srcDoc', // iframe\n 'width', // canvas, embed, iframe, img, input, object, video,\n]);\n\n/**\n * An array of IMAGE tag properties and events.\n *\n * @public\n */\nexport const imgProperties = toObjectMap(htmlElementProperties, [\n 'alt', // area, img, input\n 'crossOrigin', // img\n 'height', // canvas, embed, iframe, img, input, object, video\n 'src', // audio, embed, iframe, img, input, script, source, track, video\n 'srcSet', // img, source\n 'useMap', // img, object,\n 'width', // canvas, embed, iframe, img, input, object, video\n]);\n\n/**\n * @deprecated Use imgProperties for img elements.\n */\nexport const imageProperties = imgProperties;\n\n/**\n * An array of DIV tag properties and events.\n *\n * @public\n */\nexport const divProperties = htmlElementProperties;\n\n/**\n * Gets native supported props for an html element provided the allowance set. Use one of the property\n * sets defined (divProperties, buttonPropertes, etc) to filter out supported properties from a given\n * props set. Note that all data- and aria- prefixed attributes will be allowed.\n * NOTE: getNativeProps should always be applied first when adding props to a react component. The\n * non-native props should be applied second. This will prevent getNativeProps from overriding your custom props.\n * For example, if props passed to getNativeProps has an onClick function and getNativeProps is added to\n * the component after an onClick function is added, then the getNativeProps onClick will override it.\n *\n * @public\n * @param props - The unfiltered input props\n * @param allowedPropsNames - The array or record of allowed prop names.\n * @returns The filtered props\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function getNativeProps>(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n props: Record,\n allowedPropNames: string[] | Record,\n excludedPropNames?: string[],\n): T {\n // It'd be great to properly type this while allowing 'aria-` and 'data-' attributes like TypeScript does for\n // JSX attributes, but that ability is hardcoded into the TS compiler with no analog in TypeScript typings.\n // Then we'd be able to enforce props extends native props (including aria- and data- attributes), and then\n // return native props.\n // We should be able to do this once this PR is merged: https://github.com/microsoft/TypeScript/pull/26797\n\n const isArray = Array.isArray(allowedPropNames);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const result: Record = {};\n const keys = Object.keys(props);\n\n for (const key of keys) {\n const isNativeProp =\n (!isArray && (allowedPropNames as Record)[key]) ||\n (isArray && (allowedPropNames as string[]).indexOf(key) >= 0) ||\n key.indexOf('data-') === 0 ||\n key.indexOf('aria-') === 0;\n\n if (isNativeProp && (!excludedPropNames || excludedPropNames?.indexOf(key) === -1)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n result[key] = props![key] as any;\n }\n }\n\n return result as T;\n}\n","/**\n * Dictionary of booleans.\n *\n * @internal\n */\nexport interface IDictionary {\n [className: string]: boolean;\n}\n\n/**\n * Serializable object.\n *\n * @internal\n */\nexport interface ISerializableObject {\n toString?: () => string;\n}\n\n/**\n * css input type.\n *\n * @internal\n */\nexport type ICssInput = string | ISerializableObject | IDictionary | null | undefined | boolean;\n\n/**\n * Concatination helper, which can merge class names together. Skips over falsey values.\n *\n * @public\n */\nexport function css(...args: ICssInput[]): string {\n let classes = [];\n\n for (let arg of args) {\n if (arg) {\n if (typeof arg === 'string') {\n classes.push(arg);\n } else if (arg.hasOwnProperty('toString') && typeof arg.toString === 'function') {\n classes.push(arg.toString());\n } else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n for (let key in arg as any) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if ((arg as any)[key]) {\n classes.push(key);\n }\n }\n }\n }\n }\n\n return classes.join(' ');\n}\n","import { getGlobalClassNames } from '../../../Styling';\nimport type { IStackItemComponent, IStackItemStyles, IStackItemStylesReturnType } from './StackItem.types';\n\nexport const GlobalClassNames = {\n root: 'ms-StackItem',\n};\n\nconst alignMap: { [key: string]: string } = {\n start: 'flex-start',\n end: 'flex-end',\n};\n\nexport const StackItemStyles: IStackItemComponent['styles'] = (props, theme, tokens): IStackItemStylesReturnType => {\n const { grow, shrink, disableShrink, align, verticalFill, order, className, basis = 'auto' } = props;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n return {\n root: [\n theme.fonts.medium,\n classNames.root,\n {\n flexBasis: basis,\n margin: tokens.margin,\n padding: tokens.padding,\n height: verticalFill ? '100%' : 'auto',\n width: 'auto',\n },\n grow && {\n flexGrow: grow === true ? 1 : grow,\n },\n (disableShrink || (!grow && !shrink)) && {\n flexShrink: 0,\n },\n shrink &&\n !disableShrink && {\n flexShrink: 1,\n },\n align && {\n alignSelf: alignMap[align] || align,\n },\n order && {\n order,\n },\n className,\n ],\n // TODO: this cast may be hiding some potential issues with styling and name\n // lookups and should be removed\n } as IStackItemStyles;\n};\n","import type { ITheme } from '../../Styling';\nimport type { IStackProps } from './Stack.types';\n\n// Helper function that converts a themed spacing key (if given) to the corresponding themed spacing value.\nconst _getThemedSpacing = (space: string, theme: ITheme): string => {\n if (theme.spacing.hasOwnProperty(space)) {\n return theme.spacing[space as keyof typeof theme.spacing];\n }\n return space;\n};\n\n// Helper function that takes a gap as a string and converts it into a { value, unit } representation.\nconst _getValueUnitGap = (gap: string): { value: number; unit: string } => {\n const numericalPart = parseFloat(gap);\n const numericalValue = isNaN(numericalPart) ? 0 : numericalPart;\n const numericalString = isNaN(numericalPart) ? '' : numericalPart.toString();\n\n const unitPart = gap.substring(numericalString.toString().length);\n\n return {\n value: numericalValue,\n unit: unitPart || 'px',\n };\n};\n\n/**\n * Takes in a gap size in either a CSS-style format (e.g. 10 or \"10px\")\n * or a key of a themed spacing value (e.g. \"s1\").\n * Returns the separate numerical value of the padding (e.g. 10)\n * and the CSS unit (e.g. \"px\").\n */\nexport const parseGap = (\n gap: IStackProps['gap'],\n theme: ITheme,\n): { rowGap: { value: number; unit: string }; columnGap: { value: number; unit: string } } => {\n if (gap === undefined || gap === '') {\n return {\n rowGap: {\n value: 0,\n unit: 'px',\n },\n columnGap: {\n value: 0,\n unit: 'px',\n },\n };\n }\n\n if (typeof gap === 'number') {\n return {\n rowGap: {\n value: gap,\n unit: 'px',\n },\n columnGap: {\n value: gap,\n unit: 'px',\n },\n };\n }\n\n const splitGap = gap.split(' ');\n\n // If the array has more than two values, then return 0px.\n if (splitGap.length > 2) {\n return {\n rowGap: {\n value: 0,\n unit: 'px',\n },\n columnGap: {\n value: 0,\n unit: 'px',\n },\n };\n }\n\n // If the array has two values, then parse each one.\n if (splitGap.length === 2) {\n return {\n rowGap: _getValueUnitGap(_getThemedSpacing(splitGap[0], theme)),\n columnGap: _getValueUnitGap(_getThemedSpacing(splitGap[1], theme)),\n };\n }\n\n // Else, parse the numerical value and pass it as both the vertical and horizontal gap.\n const calculatedGap = _getValueUnitGap(_getThemedSpacing(gap, theme));\n\n return {\n rowGap: calculatedGap,\n columnGap: calculatedGap,\n };\n};\n\n/**\n * Takes in a padding in a CSS-style format (e.g. 10, \"10px\", \"10px 10px\", etc.)\n * where the separate padding values can also be the key of a themed spacing value\n * (e.g. \"s1 m\", \"10px l1 20px l2\", etc.).\n * Returns a CSS-style padding.\n */\nexport const parsePadding = (padding: number | string | undefined, theme: ITheme): number | string | undefined => {\n if (padding === undefined || typeof padding === 'number' || padding === '') {\n return padding;\n }\n\n const paddingValues = padding.split(' ');\n if (paddingValues.length < 2) {\n return _getThemedSpacing(padding, theme);\n }\n\n return paddingValues.reduce((padding1: string, padding2: string) => {\n return _getThemedSpacing(padding1, theme) + ' ' + _getThemedSpacing(padding2, theme);\n });\n};\n","import { getGlobalClassNames } from '../../Styling';\nimport { GlobalClassNames as StackItemGlobalClassNames } from './StackItem/StackItem.styles';\nimport { parseGap, parsePadding } from './StackUtils';\nimport type { IStackComponent, IStackStyles, IStackStylesReturnType } from './Stack.types';\n\nconst nameMap: { [key: string]: string } = {\n start: 'flex-start',\n end: 'flex-end',\n};\n\nexport const GlobalClassNames = {\n root: 'ms-Stack',\n inner: 'ms-Stack-inner',\n child: 'ms-Stack-child',\n};\n\nexport const styles: IStackComponent['styles'] = (props, theme, tokens): IStackStylesReturnType => {\n const {\n className,\n disableShrink,\n enableScopedSelectors,\n grow,\n horizontal,\n horizontalAlign,\n reversed,\n verticalAlign,\n verticalFill,\n wrap,\n } = props;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n /* eslint-disable deprecation/deprecation */\n const childrenGap = tokens && tokens.childrenGap ? tokens.childrenGap : props.gap;\n const maxHeight = tokens && tokens.maxHeight ? tokens.maxHeight : props.maxHeight;\n const maxWidth = tokens && tokens.maxWidth ? tokens.maxWidth : props.maxWidth;\n const padding = tokens && tokens.padding ? tokens.padding : props.padding;\n /* eslint-enable deprecation/deprecation */\n\n const { rowGap, columnGap } = parseGap(childrenGap, theme);\n\n const horizontalMargin = `${-0.5 * columnGap.value}${columnGap.unit}`;\n const verticalMargin = `${-0.5 * rowGap.value}${rowGap.unit}`;\n\n // styles to be applied to all direct children regardless of wrap or direction\n const childStyles = {\n textOverflow: 'ellipsis',\n };\n\n const childSelector = '> ' + (enableScopedSelectors ? '.' + GlobalClassNames.child : '*');\n\n const disableShrinkStyles = {\n // flexShrink styles are applied by the StackItem\n [`${childSelector}:not(.${StackItemGlobalClassNames.root})`]: {\n flexShrink: 0,\n },\n };\n\n if (wrap) {\n return {\n root: [\n classNames.root,\n {\n flexWrap: 'wrap',\n maxWidth,\n maxHeight,\n width: 'auto',\n overflow: 'visible',\n height: '100%',\n },\n horizontalAlign && {\n [horizontal ? 'justifyContent' : 'alignItems']: nameMap[horizontalAlign] || horizontalAlign,\n },\n verticalAlign && {\n [horizontal ? 'alignItems' : 'justifyContent']: nameMap[verticalAlign] || verticalAlign,\n },\n className,\n {\n // not allowed to be overridden by className\n // since this is necessary in order to prevent collapsing margins\n display: 'flex',\n },\n horizontal && {\n height: verticalFill ? '100%' : 'auto',\n },\n ],\n\n inner: [\n classNames.inner,\n {\n display: 'flex',\n flexWrap: 'wrap',\n marginLeft: horizontalMargin,\n marginRight: horizontalMargin,\n marginTop: verticalMargin,\n marginBottom: verticalMargin,\n overflow: 'visible',\n boxSizing: 'border-box',\n padding: parsePadding(padding, theme),\n // avoid unnecessary calc() calls if horizontal gap is 0\n width: columnGap.value === 0 ? '100%' : `calc(100% + ${columnGap.value}${columnGap.unit})`,\n maxWidth: '100vw',\n\n [childSelector]: {\n margin: `${0.5 * rowGap.value}${rowGap.unit} ${0.5 * columnGap.value}${columnGap.unit}`,\n\n ...childStyles,\n },\n },\n disableShrink && disableShrinkStyles,\n horizontalAlign && {\n [horizontal ? 'justifyContent' : 'alignItems']: nameMap[horizontalAlign] || horizontalAlign,\n },\n verticalAlign && {\n [horizontal ? 'alignItems' : 'justifyContent']: nameMap[verticalAlign] || verticalAlign,\n },\n horizontal && {\n flexDirection: reversed ? 'row-reverse' : 'row',\n\n // avoid unnecessary calc() calls if vertical gap is 0\n height: rowGap.value === 0 ? '100%' : `calc(100% + ${rowGap.value}${rowGap.unit})`,\n\n [childSelector]: {\n maxWidth: columnGap.value === 0 ? '100%' : `calc(100% - ${columnGap.value}${columnGap.unit})`,\n },\n },\n !horizontal && {\n flexDirection: reversed ? 'column-reverse' : 'column',\n height: `calc(100% + ${rowGap.value}${rowGap.unit})`,\n\n [childSelector]: {\n maxHeight: rowGap.value === 0 ? '100%' : `calc(100% - ${rowGap.value}${rowGap.unit})`,\n },\n },\n ],\n } as IStackStyles;\n }\n\n return {\n root: [\n classNames.root,\n {\n display: 'flex',\n flexDirection: horizontal ? (reversed ? 'row-reverse' : 'row') : reversed ? 'column-reverse' : 'column',\n flexWrap: 'nowrap',\n width: 'auto',\n height: verticalFill ? '100%' : 'auto',\n maxWidth,\n maxHeight,\n padding: parsePadding(padding, theme),\n boxSizing: 'border-box',\n\n [childSelector]: childStyles,\n },\n disableShrink && disableShrinkStyles,\n grow && {\n flexGrow: grow === true ? 1 : grow,\n },\n\n horizontalAlign && {\n [horizontal ? 'justifyContent' : 'alignItems']: nameMap[horizontalAlign] || horizontalAlign,\n },\n verticalAlign && {\n [horizontal ? 'alignItems' : 'justifyContent']: nameMap[verticalAlign] || verticalAlign,\n },\n horizontal &&\n columnGap.value > 0 && {\n // apply gap margin to every direct child except the first direct child if the direction is not reversed,\n // and the last direct one if it is\n [reversed ? `${childSelector}:not(:last-child)` : `${childSelector}:not(:first-child)`]: {\n marginLeft: `${columnGap.value}${columnGap.unit}`,\n },\n },\n !horizontal &&\n rowGap.value > 0 && {\n // apply gap margin to every direct child except the first direct child if the direction is not reversed,\n // and the last direct one if it is\n [reversed ? `${childSelector}:not(:last-child)` : `${childSelector}:not(:first-child)`]: {\n marginTop: `${rowGap.value}${rowGap.unit}`,\n },\n },\n className,\n ],\n // TODO: this cast may be hiding some potential issues with styling and name\n // lookups and should be removed\n } as IStackStyles;\n};\n","/** @jsxRuntime classic */\n/** @jsx withSlots */\nimport * as React from 'react';\nimport { withSlots, createComponent, getSlots } from '@fluentui/foundation-legacy';\nimport { getNativeProps, htmlElementProperties } from '../../../Utilities';\nimport { StackItemStyles as styles } from './StackItem.styles';\nimport type { IStackItemComponent, IStackItemProps, IStackItemSlots } from './StackItem.types';\n\nconst StackItemView: IStackItemComponent['view'] = props => {\n const { children } = props;\n const nativeProps = getNativeProps>(props, htmlElementProperties);\n // eslint-disable-next-line eqeqeq\n if (children == null) {\n return null;\n }\n\n const Slots = getSlots(props, {\n root: 'div',\n });\n\n return {children};\n};\n\nexport const StackItem: React.FunctionComponent = createComponent(StackItemView, {\n displayName: 'StackItem',\n styles,\n});\n\nexport default StackItem;\n","/** @jsxRuntime classic */\n/** @jsx withSlots */\nimport * as React from 'react';\nimport { withSlots, createComponent, getSlots } from '@fluentui/foundation-legacy';\nimport { css, getNativeProps, htmlElementProperties, warnDeprecations } from '../../Utilities';\nimport { styles, GlobalClassNames as StackGlobalClassNames } from './Stack.styles';\nimport { StackItem } from './StackItem/StackItem';\nimport type { IStackComponent, IStackProps, IStackSlots } from './Stack.types';\nimport type { IStackItemProps } from './StackItem/StackItem.types';\n\nconst StackView: IStackComponent['view'] = props => {\n const {\n as: RootType = 'div',\n disableShrink = false,\n // eslint-disable-next-line deprecation/deprecation\n doNotRenderFalsyValues = false,\n enableScopedSelectors = false,\n wrap,\n ...rest\n } = props;\n\n warnDeprecations('Stack', props, {\n gap: 'tokens.childrenGap',\n maxHeight: 'tokens.maxHeight',\n maxWidth: 'tokens.maxWidth',\n padding: 'tokens.padding',\n });\n\n const stackChildren = _processStackChildren(props.children, {\n disableShrink,\n enableScopedSelectors,\n doNotRenderFalsyValues,\n });\n\n const nativeProps = getNativeProps>(rest, htmlElementProperties);\n\n const Slots = getSlots(props, {\n root: RootType,\n inner: 'div',\n });\n\n if (wrap) {\n return (\n \n {stackChildren}\n \n );\n }\n\n return {stackChildren};\n};\n\nfunction _processStackChildren(\n children: React.ReactNode,\n {\n disableShrink,\n enableScopedSelectors,\n doNotRenderFalsyValues,\n }: { disableShrink: boolean; enableScopedSelectors: boolean; doNotRenderFalsyValues: boolean },\n): (React.ReactChild | React.ReactFragment | React.ReactPortal)[] {\n let childrenArray = React.Children.toArray(children);\n\n childrenArray = React.Children.map(childrenArray, child => {\n if (!child) {\n return doNotRenderFalsyValues ? null : child;\n }\n\n // We need to allow children that aren't falsy values, but not valid elements since they could be\n // a string like {'sample string'}\n if (!React.isValidElement(child)) {\n return child;\n }\n\n if (child.type === React.Fragment) {\n return child.props.children\n ? _processStackChildren(child.props.children, { disableShrink, enableScopedSelectors, doNotRenderFalsyValues })\n : null;\n }\n\n const childAsReactElement = child as React.ReactElement;\n\n let defaultItemProps: IStackItemProps = {};\n if (_isStackItem(child)) {\n defaultItemProps = { shrink: !disableShrink };\n }\n const childClassName = childAsReactElement.props.className;\n\n return React.cloneElement(childAsReactElement, {\n ...defaultItemProps,\n ...childAsReactElement.props,\n ...(childClassName && { className: childClassName }),\n ...(enableScopedSelectors && { className: css(StackGlobalClassNames.child, childClassName) }),\n });\n });\n\n return childrenArray;\n}\n\nfunction _isStackItem(item: React.ReactNode): item is typeof StackItem {\n // In theory, we should be able to just check item.type === StackItem.\n // However, under certain unclear circumstances (see https://github.com/microsoft/fluentui/issues/10785),\n // the object identity is different despite the function implementation being the same.\n return (\n !!item &&\n typeof item === 'object' &&\n !!(item as React.ReactElement).type &&\n // StackItem is generated by createComponent, so we need to check its displayName instead of name\n ((item as React.ReactElement).type as React.ComponentType).displayName === StackItem.displayName\n );\n}\n\nconst StackStatics = {\n Item: StackItem,\n};\n\nexport const Stack: React.FunctionComponent & {\n Item: React.FunctionComponent;\n} = createComponent(StackView, {\n displayName: 'Stack',\n styles,\n statics: StackStatics,\n});\n\nexport default Stack;\n","/** @jsxRuntime classic */\n/** @jsx withSlots */\nimport { withSlots, getSlots } from '@fluentui/foundation-legacy';\nimport { getNativeProps, htmlElementProperties } from '../../Utilities';\nimport type { ITextComponent, ITextProps, ITextSlots } from './Text.types';\n\nexport const TextView: ITextComponent['view'] = props => {\n // eslint-disable-next-line eqeqeq\n if (props.children == null) {\n return null;\n }\n\n const { block, className, as: RootType = 'span', variant, nowrap, ...rest } = props;\n\n const Slots = getSlots(props, {\n root: RootType,\n });\n\n return ;\n};\n","import * as React from 'react';\nimport { createComponent } from '@fluentui/foundation-legacy';\nimport { TextView } from './Text.view';\nimport { TextStyles as styles } from './Text.styles';\nimport type { ITextProps } from './Text.types';\n\nexport const Text: React.FunctionComponent = createComponent(TextView, {\n displayName: 'Text',\n styles,\n});\n\nexport default Text;\n","import type { ITextComponent, ITextStyles, ITextStylesReturnType, ITextProps } from './Text.types';\nimport type { ITheme } from '../../Styling';\n\nexport const TextStyles: ITextComponent['styles'] = (props: ITextProps, theme: ITheme): ITextStylesReturnType => {\n const { as, className, block, nowrap, variant } = props;\n const { fonts, semanticColors } = theme;\n const variantObject = fonts[variant || 'medium'];\n\n return {\n root: [\n variantObject,\n {\n color: variantObject.color || semanticColors.bodyText,\n display: block ? (as === 'td' ? 'table-cell' : 'block') : 'inline',\n mozOsxFontSmoothing: variantObject.MozOsxFontSmoothing,\n webkitFontSmoothing: variantObject.WebkitFontSmoothing,\n },\n nowrap && {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n },\n className,\n ],\n } as ITextStyles;\n};\n","import * as React from 'react';\nimport { arraysEqual } from './array';\n\n/**\n * Internal state type for the ref.\n */\ntype LocalState = {\n refs: (React.Ref | undefined)[];\n resolver?: (newValue: TType | TValue | null) => void;\n};\n\n/**\n * Set up a ref resolver function given internal state managed for the ref.\n * @param local Set\n */\nconst createResolver =\n (local: LocalState) =>\n (newValue: TType | TValue | null) => {\n for (const ref of local.refs) {\n if (typeof ref === 'function') {\n ref(newValue);\n } else if (ref) {\n // work around the immutability of the React.Ref type\n (ref as unknown as React.MutableRefObject).current = newValue;\n }\n }\n };\n\n/**\n * Helper to merge refs from within class components.\n */\nexport const createMergedRef = (value?: TValue) => {\n const local: LocalState = {\n refs: [] as LocalState['refs'],\n };\n\n return (\n ...newRefs: (React.Ref | undefined)[]\n ): ((newValue: TType | TValue | null) => void) => {\n if (!local.resolver || !arraysEqual(local.refs, newRefs)) {\n local.resolver = createResolver(local);\n }\n\n local.refs = newRefs;\n\n return local.resolver!;\n };\n};\n","/**\n * Helper to find the index of an item within an array, using a callback to\n * determine the match.\n *\n * @public\n * @param array - Array to search.\n * @param cb - Callback which returns true on matches.\n * @param fromIndex - Optional index to start from (defaults to 0)\n */\nexport function findIndex(array: T[], cb: (item: T, index: number) => boolean, fromIndex: number = 0): number {\n let index = -1;\n\n for (let i = fromIndex; array && i < array.length; i++) {\n if (cb(array[i], i)) {\n index = i;\n break;\n }\n }\n\n return index;\n}\n\n/**\n * Helper to find the first item within an array that satisfies the callback.\n * @param array - Array to search\n * @param cb - Callback which returns true on matches\n */\nexport function find(array: T[], cb: (item: T, index: number) => boolean): T | undefined {\n let index = findIndex(array, cb);\n\n if (index < 0) {\n return undefined;\n }\n\n return array[index];\n}\n\n/**\n * Creates an array of a given size and helper method to populate.\n *\n * @public\n * @param size - Size of array.\n * @param getItem - Callback to populate given cell index.\n */\nexport function createArray(size: number, getItem: (index: number) => T): T[] {\n let array: T[] = [];\n\n for (let i = 0; i < size; i++) {\n array.push(getItem(i));\n }\n\n return array;\n}\n\n/**\n * Convert the given array to a matrix with columnCount number\n * of columns.\n *\n * @public\n * @param items - The array to convert\n * @param columnCount - The number of columns for the resulting matrix\n * @returns A matrix of items\n */\nexport function toMatrix(items: T[], columnCount: number): T[][] {\n return items.reduce((rows: T[][], currentValue: T, index: number) => {\n if (index % columnCount === 0) {\n rows.push([currentValue]);\n } else {\n rows[rows.length - 1].push(currentValue);\n }\n return rows;\n }, [] as T[][]);\n}\n\n/**\n * Given an array, it returns a new array that does not contain the item at the given index.\n * @param array - The array to operate on\n * @param index - The index of the element to remove\n */\nexport function removeIndex(array: T[], index: number): T[] {\n return array.filter((_: T, i: number) => index !== i);\n}\n\n/**\n * Given an array, this function returns a new array where the element at a given index has been replaced.\n * @param array - The array to operate on\n * @param newElement - The element that will be placed in the new array\n * @param index - The index of the element that should be replaced\n */\nexport function replaceElement(array: T[], newElement: T, index: number): T[] {\n const copy = array.slice();\n copy[index] = newElement;\n return copy;\n}\n\n/**\n * Given an array, this function returns a new array where an element has been inserted at the given index.\n * @param array - The array to operate on\n * @param index - The index where an element should be inserted\n * @param itemToAdd - The element to insert\n */\nexport function addElementAtIndex(array: T[], index: number, itemToAdd: T): T[] {\n const copy = array.slice();\n copy.splice(index, 0, itemToAdd);\n return copy;\n}\n\n/**\n * Given an array where each element is of type T or T[], flatten it into an array of T\n * @param array - The array where each element can optionally also be an array\n */\nexport function flatten(array: (T | T[])[]): T[] {\n let result: T[] = [];\n array.forEach((item: T | T[]): T[] => (result = result.concat(item)));\n return result;\n}\n\n/**\n * Returns a boolean indicating if the two given arrays are equal in length and values.\n *\n * @param array1 - First array to compare\n * @param array2 - Second array to compare\n * @returns True if the arrays are the same length and have the same values in the same positions, false otherwise.\n */\nexport function arraysEqual(array1: T[], array2: T[]): boolean {\n if (array1.length !== array2.length) {\n return false;\n }\n for (let i = 0; i < array1.length; i++) {\n if (array1[i] !== array2[i]) {\n return false;\n }\n }\n return true;\n}\n","import { getVirtualParent } from './getVirtualParent';\n/**\n * Gets the element which is the parent of a given element.\n * If `allowVirtuaParents` is `true`, this method prefers the virtual parent over\n * real DOM parent when present.\n *\n * @public\n */\nexport function getParent(child: HTMLElement, allowVirtualParents: boolean = true): HTMLElement | null {\n if (!child) {\n return null;\n }\n\n const parent = allowVirtualParents && getVirtualParent(child);\n\n if (parent) {\n return parent;\n }\n\n // Support looking for parents in shadow DOM\n if (typeof (child as HTMLSlotElement).assignedElements !== 'function' && child.assignedSlot?.parentNode) {\n // Element is slotted\n return child.assignedSlot as HTMLElement;\n } else if (child.parentNode?.nodeType === 11) {\n // nodeType 11 is DOCUMENT_FRAGMENT\n // Element is in shadow root\n return (child.parentNode as ShadowRoot).host as HTMLElement;\n } else {\n return child.parentNode as HTMLElement;\n }\n}\n","import { isVirtualElement } from './isVirtualElement';\n/**\n * Gets the virtual parent given the child element, if it exists.\n *\n * @public\n */\nexport function getVirtualParent(child: HTMLElement): HTMLElement | undefined {\n let parent: HTMLElement | undefined;\n if (child && isVirtualElement(child)) {\n parent = child._virtual.parent;\n }\n return parent;\n}\n","import { IVirtualElement } from './IVirtualElement';\n/**\n * Determines whether or not an element has the virtual hierarchy extension.\n *\n * @public\n */\nexport function isVirtualElement(element: HTMLElement | IVirtualElement): element is IVirtualElement {\n return element && !!(element)._virtual;\n}\n","import { getParent } from './getParent';\n/**\n * Finds the first parent element where the matchFunction returns true\n * @param element - element to start searching at\n * @param matchFunction - the function that determines if the element is a match\n * @returns the matched element or null no match was found\n */\nexport function findElementRecursive(\n element: HTMLElement | null,\n matchFunction: (element: HTMLElement) => boolean,\n doc?: Document,\n): HTMLElement | null {\n // eslint-disable-next-line no-restricted-globals\n doc ??= document;\n if (!element || element === doc.body) {\n return null;\n }\n return matchFunction(element) ? element : findElementRecursive(getParent(element), matchFunction);\n}\n","export const DATA_PORTAL_ATTRIBUTE = 'data-portal-element';\n\n/**\n * Identify element as a portal by setting an attribute.\n * @param element - Element to mark as a portal.\n */\nexport function setPortalAttribute(element: HTMLElement): void {\n element.setAttribute(DATA_PORTAL_ATTRIBUTE, 'true');\n}\n","import { findElementRecursive } from './findElementRecursive';\nimport { DATA_PORTAL_ATTRIBUTE } from './setPortalAttribute';\n\n/**\n * Determine whether a target is within a portal from perspective of root or optional parent.\n * This function only works against portal components that use the setPortalAttribute function.\n * If both parent and child are within the same portal this function will return false.\n * @param target - Element to query portal containment status of.\n * @param parent - Optional parent perspective. Search for containing portal stops at parent\n * (or root if parent is undefined or invalid.)\n */\nexport function portalContainsElement(target: HTMLElement, parent?: HTMLElement, doc?: Document): boolean {\n const elementMatch = findElementRecursive(\n target,\n (testElement: HTMLElement) => parent === testElement || testElement.hasAttribute(DATA_PORTAL_ATTRIBUTE),\n doc,\n );\n return elementMatch !== null && elementMatch.hasAttribute(DATA_PORTAL_ATTRIBUTE);\n}\n","/**\n * Simulated enum for keycodes. These will get inlined by uglify when used much like an enum\n *\n * @public\n * {@docCategory KeyCodes}\n */\nexport const KeyCodes = {\n backspace: 8 as 8,\n tab: 9 as 9,\n enter: 13 as 13,\n shift: 16 as 16,\n ctrl: 17 as 17,\n alt: 18 as 18,\n pauseBreak: 19 as 19,\n capslock: 20 as 20,\n escape: 27 as 27,\n space: 32 as 32,\n pageUp: 33 as 33,\n pageDown: 34 as 34,\n end: 35 as 35,\n home: 36 as 36,\n left: 37 as 37,\n up: 38 as 38,\n right: 39 as 39,\n down: 40 as 40,\n insert: 45 as 45,\n del: 46 as 46,\n zero: 48 as 48,\n one: 49 as 49,\n two: 50 as 50,\n three: 51 as 51,\n four: 52 as 52,\n five: 53 as 53,\n six: 54 as 54,\n seven: 55 as 55,\n eight: 56 as 56,\n nine: 57 as 57,\n colon: 58 as 58,\n a: 65 as 65,\n b: 66 as 66,\n c: 67 as 67,\n d: 68 as 68,\n e: 69 as 69,\n f: 70 as 70,\n g: 71 as 71,\n h: 72 as 72,\n i: 73 as 73,\n j: 74 as 74,\n k: 75 as 75,\n l: 76 as 76,\n m: 77 as 77,\n n: 78 as 78,\n o: 79 as 79,\n p: 80 as 80,\n q: 81 as 81,\n r: 82 as 82,\n s: 83 as 83,\n t: 84 as 84,\n u: 85 as 85,\n v: 86 as 86,\n w: 87 as 87,\n x: 88 as 88,\n y: 89 as 89,\n z: 90 as 90,\n leftWindow: 91 as 91,\n rightWindow: 92 as 92,\n select: 93 as 93,\n /* eslint-disable @typescript-eslint/naming-convention */\n zero_numpad: 96 as 96,\n one_numpad: 97 as 97,\n two_numpad: 98 as 98,\n three_numpad: 99 as 99,\n four_numpad: 100 as 100,\n five_numpad: 101 as 101,\n six_numpad: 102 as 102,\n seven_numpad: 103 as 103,\n eight_numpad: 104 as 104,\n nine_numpad: 105 as 105,\n /* eslint-enable @typescript-eslint/naming-convention */\n multiply: 106 as 106,\n add: 107 as 107,\n subtract: 109 as 109,\n decimalPoint: 110 as 110,\n divide: 111 as 111,\n f1: 112 as 112,\n f2: 113 as 113,\n f3: 114 as 114,\n f4: 115 as 115,\n f5: 116 as 116,\n f6: 117 as 117,\n f7: 118 as 118,\n f8: 119 as 119,\n f9: 120 as 120,\n f10: 121 as 121,\n f11: 122 as 122,\n f12: 123 as 123,\n numlock: 144 as 144,\n scrollLock: 145 as 145,\n semicolon: 186 as 186,\n equalSign: 187 as 187,\n comma: 188 as 188,\n dash: 189 as 189,\n period: 190 as 190,\n forwardSlash: 191 as 191,\n graveAccent: 192 as 192,\n openBracket: 219 as 219,\n backSlash: 220 as 220,\n closeBracket: 221 as 221,\n singleQuote: 222 as 222,\n};\nexport type KeyCodes = number;\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n\n/**\n * Returns a single function which will call each of the given functions in the context of the\n * parent.\n */\nexport function appendFunction(parent: any, ...functions: any[]): () => void {\n if (functions.length < 2) {\n return functions[0] as () => void;\n }\n\n return (...args: any[]): void => {\n functions.forEach((f: () => void) => f && f.apply(parent, args));\n };\n}\n","import * as React from 'react';\nimport { extendComponent } from './extendComponent';\nimport type { IBaseProps } from './BaseComponent.types';\n\n/**\n * Helper to manage componentRef resolution. Internally appends logic to\n * lifetime methods to resolve componentRef to the passed in object.\n *\n * Usage: call initializeComponentRef(this) in the constructor,\n */\nexport function initializeComponentRef(obj: React.Component): void {\n extendComponent(obj, {\n componentDidMount: _onMount,\n componentDidUpdate: _onUpdate,\n componentWillUnmount: _onUnmount,\n });\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _onMount(this: any): void {\n _setComponentRef(this.props.componentRef, this);\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _onUpdate(this: any, prevProps: IBaseProps): void {\n if (prevProps.componentRef !== this.props.componentRef) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _setComponentRef((prevProps as any).componentRef, null);\n _setComponentRef(this.props.componentRef, this);\n }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _onUnmount(this: any): void {\n _setComponentRef(this.props.componentRef, null);\n}\n\nfunction _setComponentRef(componentRef: React.RefObject, value: TInterface | null): void {\n if (componentRef) {\n if (typeof componentRef === 'object') {\n (componentRef as { current: TInterface | null }).current = value;\n } else if (typeof componentRef === 'function') {\n (componentRef as Function)(value);\n }\n }\n}\n","import * as React from 'react';\nimport { appendFunction } from './appendFunction';\n\n/**\n * Extends a component's lifetime methods by appending new functions to the existing lifetime functions.\n */\nexport function extendComponent(parent: T, methods: { [key in keyof T]?: T[key] }): void {\n for (let name in methods) {\n if (methods.hasOwnProperty(name)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n parent[name] = appendFunction(parent, parent[name], methods[name]) as any;\n }\n }\n}\n","import { getWindow } from './dom/getWindow';\n\ndeclare function setTimeout(cb: Function, delay: number): number;\ndeclare function setInterval(cb: Function, delay: number): number;\n\n/**\n * Bugs often appear in async code when stuff gets disposed, but async operations don't get canceled.\n * This Async helper class solves these issues by tying async code to the lifetime of a disposable object.\n *\n * Usage: Anything class extending from BaseModel can access this helper via this.async. Otherwise create a\n * new instance of the class and remember to call dispose() during your code's dispose handler.\n *\n * @public\n */\nexport class Async {\n private _timeoutIds: { [id: number]: boolean } | null = null;\n private _immediateIds: { [id: number]: boolean } | null = null;\n private _intervalIds: { [id: number]: boolean } | null = null;\n private _animationFrameIds: { [id: number]: boolean } | null = null;\n private _isDisposed: boolean;\n private _parent: object | null;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _onErrorHandler: ((e: any) => void) | undefined;\n private _noop: () => void;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n constructor(parent?: object, onError?: (e: any) => void) {\n this._isDisposed = false;\n this._parent = parent || null;\n this._onErrorHandler = onError;\n this._noop = () => {\n /* do nothing */\n };\n }\n\n /**\n * Dispose function, clears all async operations.\n */\n public dispose(): void {\n let id;\n\n this._isDisposed = true;\n this._parent = null;\n\n // Clear timeouts.\n if (this._timeoutIds) {\n for (id in this._timeoutIds) {\n if (this._timeoutIds.hasOwnProperty(id)) {\n this.clearTimeout(parseInt(id, 10));\n }\n }\n\n this._timeoutIds = null;\n }\n\n // Clear immediates.\n if (this._immediateIds) {\n for (id in this._immediateIds) {\n if (this._immediateIds.hasOwnProperty(id)) {\n this.clearImmediate(parseInt(id, 10));\n }\n }\n\n this._immediateIds = null;\n }\n\n // Clear intervals.\n if (this._intervalIds) {\n for (id in this._intervalIds) {\n if (this._intervalIds.hasOwnProperty(id)) {\n this.clearInterval(parseInt(id, 10));\n }\n }\n this._intervalIds = null;\n }\n\n // Clear animation frames.\n if (this._animationFrameIds) {\n for (id in this._animationFrameIds) {\n if (this._animationFrameIds.hasOwnProperty(id)) {\n this.cancelAnimationFrame(parseInt(id, 10));\n }\n }\n\n this._animationFrameIds = null;\n }\n }\n\n /**\n * SetTimeout override, which will auto cancel the timeout during dispose.\n * @param callback - Callback to execute.\n * @param duration - Duration in milliseconds.\n * @returns The setTimeout id.\n */\n public setTimeout(callback: () => void, duration: number): number {\n let timeoutId = 0;\n\n if (!this._isDisposed) {\n if (!this._timeoutIds) {\n this._timeoutIds = {};\n }\n\n timeoutId = setTimeout(() => {\n // Time to execute the timeout, enqueue it as a foreground task to be executed.\n\n try {\n // Now delete the record and call the callback.\n if (this._timeoutIds) {\n delete this._timeoutIds[timeoutId];\n }\n callback.apply(this._parent);\n } catch (e) {\n this._logError(e);\n }\n }, duration);\n\n this._timeoutIds[timeoutId] = true;\n }\n\n return timeoutId;\n }\n\n /**\n * Clears the timeout.\n * @param id - Id to cancel.\n */\n public clearTimeout(id: number): void {\n if (this._timeoutIds && this._timeoutIds[id]) {\n clearTimeout(id);\n delete this._timeoutIds[id];\n }\n }\n\n /**\n * SetImmediate override, which will auto cancel the immediate during dispose.\n * @param callback - Callback to execute.\n * @param targetElement - Optional target element to use for identifying the correct window.\n * @returns The setTimeout id.\n */\n public setImmediate(callback: () => void, targetElement?: Element | null): number {\n let immediateId = 0;\n const win = getWindow(targetElement)!;\n\n if (!this._isDisposed) {\n if (!this._immediateIds) {\n this._immediateIds = {};\n }\n\n let setImmediateCallback = () => {\n // Time to execute the timeout, enqueue it as a foreground task to be executed.\n\n try {\n // Now delete the record and call the callback.\n if (this._immediateIds) {\n delete this._immediateIds[immediateId];\n }\n callback.apply(this._parent);\n } catch (e) {\n this._logError(e);\n }\n };\n\n immediateId = win.setTimeout(setImmediateCallback, 0);\n\n this._immediateIds[immediateId] = true;\n }\n\n return immediateId;\n }\n\n /**\n * Clears the immediate.\n * @param id - Id to cancel.\n * @param targetElement - Optional target element to use for identifying the correct window.\n */\n public clearImmediate(id: number, targetElement?: Element | null): void {\n const win = getWindow(targetElement)!;\n\n if (this._immediateIds && this._immediateIds[id]) {\n win.clearTimeout(id);\n delete this._immediateIds[id];\n }\n }\n\n /**\n * SetInterval override, which will auto cancel the timeout during dispose.\n * @param callback - Callback to execute.\n * @param duration - Duration in milliseconds.\n * @returns The setTimeout id.\n */\n public setInterval(callback: () => void, duration: number): number {\n let intervalId = 0;\n\n if (!this._isDisposed) {\n if (!this._intervalIds) {\n this._intervalIds = {};\n }\n\n intervalId = setInterval(() => {\n // Time to execute the interval callback, enqueue it as a foreground task to be executed.\n try {\n callback.apply(this._parent);\n } catch (e) {\n this._logError(e);\n }\n }, duration);\n\n this._intervalIds[intervalId] = true;\n }\n\n return intervalId;\n }\n\n /**\n * Clears the interval.\n * @param id - Id to cancel.\n */\n public clearInterval(id: number): void {\n if (this._intervalIds && this._intervalIds[id]) {\n clearInterval(id);\n delete this._intervalIds[id];\n }\n }\n\n /**\n * Creates a function that, when executed, will only call the func function at most once per\n * every wait milliseconds. Provide an options object to indicate that func should be invoked\n * on the leading and/or trailing edge of the wait timeout. Subsequent calls to the throttled\n * function will return the result of the last func call.\n *\n * Note: If leading and trailing options are true func will be called on the trailing edge of\n * the timeout only if the throttled function is invoked more than once during the wait timeout.\n *\n * @param func - The function to throttle.\n * @param wait - The number of milliseconds to throttle executions to. Defaults to 0.\n * @param options - The options object.\n * @returns The new throttled function.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n public throttle any>(\n func: T,\n wait?: number,\n options?: {\n leading?: boolean;\n trailing?: boolean;\n },\n ): T {\n if (this._isDisposed) {\n return this._noop as T;\n }\n\n let waitMS = wait || 0;\n let leading = true;\n let trailing = true;\n let lastExecuteTime = 0;\n let lastResult: T;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let lastArgs: any[];\n let timeoutId: number | null = null;\n\n if (options && typeof options.leading === 'boolean') {\n leading = options.leading;\n }\n\n if (options && typeof options.trailing === 'boolean') {\n trailing = options.trailing;\n }\n\n let callback = (userCall?: boolean) => {\n let now = Date.now();\n let delta = now - lastExecuteTime;\n let waitLength = leading ? waitMS - delta : waitMS;\n if (delta >= waitMS && (!userCall || leading)) {\n lastExecuteTime = now;\n if (timeoutId) {\n this.clearTimeout(timeoutId);\n timeoutId = null;\n }\n lastResult = func.apply(this._parent, lastArgs);\n } else if (timeoutId === null && trailing) {\n timeoutId = this.setTimeout(callback, waitLength);\n }\n\n return lastResult;\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let resultFunction = ((...args: any[]): any => {\n lastArgs = args;\n return callback(true);\n }) as T;\n\n return resultFunction;\n }\n\n /**\n * Creates a function that will delay the execution of func until after wait milliseconds have\n * elapsed since the last time it was invoked. Provide an options object to indicate that func\n * should be invoked on the leading and/or trailing edge of the wait timeout. Subsequent calls\n * to the debounced function will return the result of the last func call.\n *\n * Note: If leading and trailing options are true func will be called on the trailing edge of\n * the timeout only if the debounced function is invoked more than once during the wait\n * timeout.\n *\n * @param func - The function to debounce.\n * @param wait - The number of milliseconds to delay.\n * @param options - The options object.\n * @returns The new debounced function.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n public debounce any>(\n func: T,\n wait?: number,\n options?: {\n leading?: boolean;\n maxWait?: number;\n trailing?: boolean;\n },\n ): ICancelable & T {\n if (this._isDisposed) {\n let noOpFunction = (() => {\n /** Do nothing */\n }) as ICancelable & T;\n\n noOpFunction.cancel = () => {\n return;\n };\n noOpFunction.flush = (() => null) as unknown as () => ReturnType;\n noOpFunction.pending = () => false;\n\n return noOpFunction;\n }\n\n let waitMS = wait || 0;\n let leading = false;\n let trailing = true;\n let maxWait: number | null = null;\n let lastCallTime = 0;\n let lastExecuteTime = Date.now();\n let lastResult: ReturnType;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let lastArgs: any[];\n let timeoutId: number | null = null;\n\n if (options && typeof options.leading === 'boolean') {\n leading = options.leading;\n }\n\n if (options && typeof options.trailing === 'boolean') {\n trailing = options.trailing;\n }\n\n if (options && typeof options.maxWait === 'number' && !isNaN(options.maxWait)) {\n maxWait = options.maxWait;\n }\n\n let markExecuted = (time: number) => {\n if (timeoutId) {\n this.clearTimeout(timeoutId);\n timeoutId = null;\n }\n lastExecuteTime = time;\n };\n\n let invokeFunction = (time: number) => {\n markExecuted(time);\n lastResult = func.apply(this._parent, lastArgs);\n };\n\n let callback = (userCall?: boolean) => {\n let now = Date.now();\n let executeImmediately = false;\n if (userCall) {\n if (leading && now - lastCallTime >= waitMS) {\n executeImmediately = true;\n }\n lastCallTime = now;\n }\n let delta = now - lastCallTime;\n let waitLength = waitMS - delta;\n let maxWaitDelta = now - lastExecuteTime;\n let maxWaitExpired = false;\n\n if (maxWait !== null) {\n // maxWait only matters when there is a pending callback\n if (maxWaitDelta >= maxWait && timeoutId) {\n maxWaitExpired = true;\n } else {\n waitLength = Math.min(waitLength, maxWait - maxWaitDelta);\n }\n }\n\n if (delta >= waitMS || maxWaitExpired || executeImmediately) {\n invokeFunction(now);\n } else if ((timeoutId === null || !userCall) && trailing) {\n timeoutId = this.setTimeout(callback, waitLength);\n }\n\n return lastResult;\n };\n\n let pending = (): boolean => {\n return !!timeoutId;\n };\n\n let cancel = (): void => {\n if (pending()) {\n // Mark the debounced function as having executed\n markExecuted(Date.now());\n }\n };\n\n let flush = () => {\n if (pending()) {\n invokeFunction(Date.now());\n }\n\n return lastResult;\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let resultFunction = ((...args: any[]) => {\n lastArgs = args;\n return callback(true);\n }) as ICancelable & T;\n\n resultFunction.cancel = cancel;\n resultFunction.flush = flush;\n resultFunction.pending = pending;\n\n return resultFunction;\n }\n\n public requestAnimationFrame(callback: () => void, targetElement?: Element | null): number {\n let animationFrameId = 0;\n const win = getWindow(targetElement)!;\n\n if (!this._isDisposed) {\n if (!this._animationFrameIds) {\n this._animationFrameIds = {};\n }\n\n let animationFrameCallback = () => {\n try {\n // Now delete the record and call the callback.\n if (this._animationFrameIds) {\n delete this._animationFrameIds[animationFrameId];\n }\n\n callback.apply(this._parent);\n } catch (e) {\n this._logError(e);\n }\n };\n\n animationFrameId = win.requestAnimationFrame\n ? win.requestAnimationFrame(animationFrameCallback)\n : win.setTimeout(animationFrameCallback, 0);\n\n this._animationFrameIds[animationFrameId] = true;\n }\n\n return animationFrameId;\n }\n\n public cancelAnimationFrame(id: number, targetElement?: Element | null): void {\n const win = getWindow(targetElement)!;\n\n if (this._animationFrameIds && this._animationFrameIds[id]) {\n win.cancelAnimationFrame ? win.cancelAnimationFrame(id) : win.clearTimeout(id);\n delete this._animationFrameIds[id];\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n protected _logError(e: any): void {\n if (this._onErrorHandler) {\n this._onErrorHandler(e);\n }\n }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ICancelable any> = {\n flush: () => ReturnType;\n cancel: () => void;\n pending: () => boolean;\n};\n","/**\n * Compares a to b and b to a.\n *\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function shallowCompare(a: TA, b: TB): boolean {\n if (!a || !b) {\n // only return true if both a and b are falsy\n return !a && !b;\n }\n\n for (let propName in a) {\n if ((a as Object).hasOwnProperty(propName)) {\n if (!(b as Object).hasOwnProperty(propName) || (b as { [key: string]: unknown })[propName] !== a[propName]) {\n return false;\n }\n }\n }\n for (let propName in b) {\n if ((b as Object).hasOwnProperty(propName)) {\n if (!(a as Object).hasOwnProperty(propName)) {\n return false;\n }\n }\n }\n return true;\n}\n\n/**\n * Makes a resulting merge of a bunch of objects. Pass in the target object followed by 1 or more\n * objects as arguments and they will be merged sequentially into the target. Note that this will\n * shallow merge; it will not create new cloned values for target members.\n *\n * @public\n * @param target - Target object to merge following object arguments into.\n * @param args - One or more objects that will be mixed into the target in the order they are provided.\n * @returns Resulting merged target.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function assign(this: any, target: any, ...args: any[]): any {\n return filteredAssign.apply(this, [null, target].concat(args));\n}\n\n/**\n * Makes a resulting merge of a bunch of objects, but allows a filter function to be passed in to filter\n * the resulting merges. This allows for scenarios where you want to merge \"everything except that one thing\"\n * or \"properties that start with data-\". Note that this will shallow merge; it will not create new cloned\n * values for target members.\n *\n * @public\n * @param isAllowed - Callback to determine if the given propName is allowed in the result.\n * @param target - Target object to merge following object arguments into.\n * @param args - One or more objects that will be mixed into the target in the order they are provided.\n * @returns Resulting merged target.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function filteredAssign(isAllowed: (propName: string) => boolean, target: any, ...args: any[]): any {\n target = target || {};\n\n for (let sourceObject of args) {\n if (sourceObject) {\n for (let propName in sourceObject) {\n if (sourceObject.hasOwnProperty(propName) && (!isAllowed || isAllowed(propName))) {\n target[propName] = sourceObject[propName];\n }\n }\n }\n }\n\n return target;\n}\n\n/**\n * Takes an enum and iterates over each value of the enum (as a string), running the callback on each,\n * returning a mapped array.\n * @param theEnum - Enum to iterate over\n * @param callback - The first parameter the name of the entry, and the second parameter is the value\n * of that entry, which is the value you'd normally use when using the enum (usually a number).\n */\nexport function mapEnumByName(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n theEnum: any,\n callback: (name?: string, value?: string | number) => T | undefined,\n): (T | undefined)[] | undefined {\n // map to satisfy compiler since it doesn't realize we strip out undefineds in the .filter() call\n return Object.keys(theEnum)\n .map((p: string | number) => {\n // map on each property name as a string\n if (String(Number(p)) !== p) {\n // if the property is not just a number (because enums in TypeScript will map both ways)\n return callback(p as string, theEnum[p]);\n }\n return undefined;\n })\n .filter((v: T | undefined) => !!v); // only return elements with values\n}\n\n/**\n * Get all values in an object dictionary\n *\n * @param obj - The dictionary to get values for\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function values