\n To avoid product deactivation, add your payment details now. Your\n payment details will be stored in your account for the following plans\n and any future purchases you make.\n
\n \n\n
{children}
\n\n \n
\n
Monthly total
\n
{formattedTotalPrice}
\n
\n
(excluding tax)
\n
\n \n
\n
\n );\n};\n\nexport { EntitlementsPopup };\n","var isBrowser = \"object\" !== 'undefined';\nfunction getRegisteredStyles(registered, registeredStyles, classNames) {\n var rawClassName = '';\n classNames.split(' ').forEach(function (className) {\n if (registered[className] !== undefined) {\n registeredStyles.push(registered[className] + \";\");\n } else {\n rawClassName += className + \" \";\n }\n });\n return rawClassName;\n}\nvar registerStyles = function registerStyles(cache, serialized, isStringTag) {\n var className = cache.key + \"-\" + serialized.name;\n\n if ( // we only need to add the styles to the registered cache if the\n // class name could be used further down\n // the tree but if it's a string tag, we know it won't\n // so we don't have to add it to registered cache.\n // this improves memory usage since we can avoid storing the whole style string\n (isStringTag === false || // we need to always store it if we're in compat mode and\n // in node since emotion-server relies on whether a style is in\n // the registered cache to know whether a style is global or not\n // also, note that this check will be dead code eliminated in the browser\n isBrowser === false ) && cache.registered[className] === undefined) {\n cache.registered[className] = serialized.styles;\n }\n};\nvar insertStyles = function insertStyles(cache, serialized, isStringTag) {\n registerStyles(cache, serialized, isStringTag);\n var className = cache.key + \"-\" + serialized.name;\n\n if (cache.inserted[serialized.name] === undefined) {\n var current = serialized;\n\n do {\n cache.insert(serialized === current ? \".\" + className : '', current, cache.sheet, true);\n\n current = current.next;\n } while (current !== undefined);\n }\n};\n\nexport { getRegisteredStyles, insertStyles, registerStyles };\n","import * as React from 'react';\nimport { useContext, forwardRef } from 'react';\nimport createCache from '@emotion/cache';\nimport _extends from '@babel/runtime/helpers/esm/extends';\nimport weakMemoize from '@emotion/weak-memoize';\nimport hoistNonReactStatics from '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js';\nimport { getRegisteredStyles, registerStyles, insertStyles } from '@emotion/utils';\nimport { serializeStyles } from '@emotion/serialize';\nimport { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';\n\nvar isBrowser = \"object\" !== 'undefined';\nvar hasOwnProperty = {}.hasOwnProperty;\n\nvar EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case\n// because this module is primarily intended for the browser and node\n// but it's also required in react native and similar environments sometimes\n// and we could have a special build just for that\n// but this is much easier and the native packages\n// might use a different theme context in the future anyway\ntypeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({\n key: 'css'\n}) : null);\n\nif (process.env.NODE_ENV !== 'production') {\n EmotionCacheContext.displayName = 'EmotionCacheContext';\n}\n\nvar CacheProvider = EmotionCacheContext.Provider;\nvar __unsafe_useEmotionCache = function useEmotionCache() {\n return useContext(EmotionCacheContext);\n};\n\nvar withEmotionCache = function withEmotionCache(func) {\n // $FlowFixMe\n return /*#__PURE__*/forwardRef(function (props, ref) {\n // the cache will never be null in the browser\n var cache = useContext(EmotionCacheContext);\n return func(props, cache, ref);\n });\n};\n\nif (!isBrowser) {\n withEmotionCache = function withEmotionCache(func) {\n return function (props) {\n var cache = useContext(EmotionCacheContext);\n\n if (cache === null) {\n // yes, we're potentially creating this on every render\n // it doesn't actually matter though since it's only on the server\n // so there will only every be a single render\n // that could change in the future because of suspense and etc. but for now,\n // this works and i don't want to optimise for a future thing that we aren't sure about\n cache = createCache({\n key: 'css'\n });\n return /*#__PURE__*/React.createElement(EmotionCacheContext.Provider, {\n value: cache\n }, func(props, cache));\n } else {\n return func(props, cache);\n }\n };\n };\n}\n\nvar ThemeContext = /* #__PURE__ */React.createContext({});\n\nif (process.env.NODE_ENV !== 'production') {\n ThemeContext.displayName = 'EmotionThemeContext';\n}\n\nvar useTheme = function useTheme() {\n return React.useContext(ThemeContext);\n};\n\nvar getTheme = function getTheme(outerTheme, theme) {\n if (typeof theme === 'function') {\n var mergedTheme = theme(outerTheme);\n\n if (process.env.NODE_ENV !== 'production' && (mergedTheme == null || typeof mergedTheme !== 'object' || Array.isArray(mergedTheme))) {\n throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!');\n }\n\n return mergedTheme;\n }\n\n if (process.env.NODE_ENV !== 'production' && (theme == null || typeof theme !== 'object' || Array.isArray(theme))) {\n throw new Error('[ThemeProvider] Please make your theme prop a plain object');\n }\n\n return _extends({}, outerTheme, theme);\n};\n\nvar createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {\n return weakMemoize(function (theme) {\n return getTheme(outerTheme, theme);\n });\n});\nvar ThemeProvider = function ThemeProvider(props) {\n var theme = React.useContext(ThemeContext);\n\n if (props.theme !== theme) {\n theme = createCacheWithTheme(theme)(props.theme);\n }\n\n return /*#__PURE__*/React.createElement(ThemeContext.Provider, {\n value: theme\n }, props.children);\n};\nfunction withTheme(Component) {\n var componentName = Component.displayName || Component.name || 'Component';\n\n var render = function render(props, ref) {\n var theme = React.useContext(ThemeContext);\n return /*#__PURE__*/React.createElement(Component, _extends({\n theme: theme,\n ref: ref\n }, props));\n }; // $FlowFixMe\n\n\n var WithTheme = /*#__PURE__*/React.forwardRef(render);\n WithTheme.displayName = \"WithTheme(\" + componentName + \")\";\n return hoistNonReactStatics(WithTheme, Component);\n}\n\nvar getLastPart = function getLastPart(functionName) {\n // The match may be something like 'Object.createEmotionProps' or\n // 'Loader.prototype.render'\n var parts = functionName.split('.');\n return parts[parts.length - 1];\n};\n\nvar getFunctionNameFromStackTraceLine = function getFunctionNameFromStackTraceLine(line) {\n // V8\n var match = /^\\s+at\\s+([A-Za-z0-9$.]+)\\s/.exec(line);\n if (match) return getLastPart(match[1]); // Safari / Firefox\n\n match = /^([A-Za-z0-9$.]+)@/.exec(line);\n if (match) return getLastPart(match[1]);\n return undefined;\n};\n\nvar internalReactFunctionNames = /* #__PURE__ */new Set(['renderWithHooks', 'processChild', 'finishClassComponent', 'renderToString']); // These identifiers come from error stacks, so they have to be valid JS\n// identifiers, thus we only need to replace what is a valid character for JS,\n// but not for CSS.\n\nvar sanitizeIdentifier = function sanitizeIdentifier(identifier) {\n return identifier.replace(/\\$/g, '-');\n};\n\nvar getLabelFromStackTrace = function getLabelFromStackTrace(stackTrace) {\n if (!stackTrace) return undefined;\n var lines = stackTrace.split('\\n');\n\n for (var i = 0; i < lines.length; i++) {\n var functionName = getFunctionNameFromStackTraceLine(lines[i]); // The first line of V8 stack traces is just \"Error\"\n\n if (!functionName) continue; // If we reach one of these, we have gone too far and should quit\n\n if (internalReactFunctionNames.has(functionName)) break; // The component name is the first function in the stack that starts with an\n // uppercase letter\n\n if (/^[A-Z]/.test(functionName)) return sanitizeIdentifier(functionName);\n }\n\n return undefined;\n};\n\nvar typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';\nvar labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';\nvar createEmotionProps = function createEmotionProps(type, props) {\n if (process.env.NODE_ENV !== 'production' && typeof props.css === 'string' && // check if there is a css declaration\n props.css.indexOf(':') !== -1) {\n throw new Error(\"Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css`\" + props.css + \"`\");\n }\n\n var newProps = {};\n\n for (var key in props) {\n if (hasOwnProperty.call(props, key)) {\n newProps[key] = props[key];\n }\n }\n\n newProps[typePropName] = type; // For performance, only call getLabelFromStackTrace in development and when\n // the label hasn't already been computed\n\n if (process.env.NODE_ENV !== 'production' && !!props.css && (typeof props.css !== 'object' || typeof props.css.name !== 'string' || props.css.name.indexOf('-') === -1)) {\n var label = getLabelFromStackTrace(new Error().stack);\n if (label) newProps[labelPropName] = label;\n }\n\n return newProps;\n};\n\nvar Insertion = function Insertion(_ref) {\n var cache = _ref.cache,\n serialized = _ref.serialized,\n isStringTag = _ref.isStringTag;\n registerStyles(cache, serialized, isStringTag);\n useInsertionEffectAlwaysWithSyncFallback(function () {\n return insertStyles(cache, serialized, isStringTag);\n });\n\n return null;\n};\n\nvar Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {\n var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works\n // not passing the registered cache to serializeStyles because it would\n // make certain babel optimisations not possible\n\n if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {\n cssProp = cache.registered[cssProp];\n }\n\n var WrappedComponent = props[typePropName];\n var registeredStyles = [cssProp];\n var className = '';\n\n if (typeof props.className === 'string') {\n className = getRegisteredStyles(cache.registered, registeredStyles, props.className);\n } else if (props.className != null) {\n className = props.className + \" \";\n }\n\n var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext));\n\n if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {\n var labelFromStack = props[labelPropName];\n\n if (labelFromStack) {\n serialized = serializeStyles([serialized, 'label:' + labelFromStack + ';']);\n }\n }\n\n className += cache.key + \"-\" + serialized.name;\n var newProps = {};\n\n for (var key in props) {\n if (hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && (process.env.NODE_ENV === 'production' || key !== labelPropName)) {\n newProps[key] = props[key];\n }\n }\n\n newProps.ref = ref;\n newProps.className = className;\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {\n cache: cache,\n serialized: serialized,\n isStringTag: typeof WrappedComponent === 'string'\n }), /*#__PURE__*/React.createElement(WrappedComponent, newProps));\n});\n\nif (process.env.NODE_ENV !== 'production') {\n Emotion.displayName = 'EmotionCssPropInternal';\n}\n\nvar Emotion$1 = Emotion;\n\nexport { CacheProvider as C, Emotion$1 as E, ThemeContext as T, __unsafe_useEmotionCache as _, ThemeProvider as a, withTheme as b, createEmotionProps as c, hasOwnProperty as h, isBrowser as i, useTheme as u, withEmotionCache as w };\n","import { h as hasOwnProperty, E as Emotion, c as createEmotionProps, w as withEmotionCache, T as ThemeContext, i as isBrowser$1 } from './emotion-element-c39617d8.browser.esm.js';\nexport { C as CacheProvider, T as ThemeContext, a as ThemeProvider, _ as __unsafe_useEmotionCache, u as useTheme, w as withEmotionCache, b as withTheme } from './emotion-element-c39617d8.browser.esm.js';\nimport * as React from 'react';\nimport { insertStyles, registerStyles, getRegisteredStyles } from '@emotion/utils';\nimport { useInsertionEffectWithLayoutFallback, useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';\nimport { serializeStyles } from '@emotion/serialize';\nimport '@emotion/cache';\nimport '@babel/runtime/helpers/extends';\nimport '@emotion/weak-memoize';\nimport '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js';\nimport 'hoist-non-react-statics';\n\nvar pkg = {\n\tname: \"@emotion/react\",\n\tversion: \"11.11.1\",\n\tmain: \"dist/emotion-react.cjs.js\",\n\tmodule: \"dist/emotion-react.esm.js\",\n\tbrowser: {\n\t\t\"./dist/emotion-react.esm.js\": \"./dist/emotion-react.browser.esm.js\"\n\t},\n\texports: {\n\t\t\".\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./dist/emotion-react.worker.esm.js\",\n\t\t\t\tbrowser: \"./dist/emotion-react.browser.esm.js\",\n\t\t\t\t\"default\": \"./dist/emotion-react.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./dist/emotion-react.cjs.mjs\",\n\t\t\t\"default\": \"./dist/emotion-react.cjs.js\"\n\t\t},\n\t\t\"./jsx-runtime\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./jsx-runtime/dist/emotion-react-jsx-runtime.worker.esm.js\",\n\t\t\t\tbrowser: \"./jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js\",\n\t\t\t\t\"default\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.mjs\",\n\t\t\t\"default\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js\"\n\t\t},\n\t\t\"./_isolated-hnrs\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.worker.esm.js\",\n\t\t\t\tbrowser: \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js\",\n\t\t\t\t\"default\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.mjs\",\n\t\t\t\"default\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.js\"\n\t\t},\n\t\t\"./jsx-dev-runtime\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.worker.esm.js\",\n\t\t\t\tbrowser: \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.esm.js\",\n\t\t\t\t\"default\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.mjs\",\n\t\t\t\"default\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.js\"\n\t\t},\n\t\t\"./package.json\": \"./package.json\",\n\t\t\"./types/css-prop\": \"./types/css-prop.d.ts\",\n\t\t\"./macro\": {\n\t\t\ttypes: {\n\t\t\t\t\"import\": \"./macro.d.mts\",\n\t\t\t\t\"default\": \"./macro.d.ts\"\n\t\t\t},\n\t\t\t\"default\": \"./macro.js\"\n\t\t}\n\t},\n\ttypes: \"types/index.d.ts\",\n\tfiles: [\n\t\t\"src\",\n\t\t\"dist\",\n\t\t\"jsx-runtime\",\n\t\t\"jsx-dev-runtime\",\n\t\t\"_isolated-hnrs\",\n\t\t\"types/*.d.ts\",\n\t\t\"macro.*\"\n\t],\n\tsideEffects: false,\n\tauthor: \"Emotion Contributors\",\n\tlicense: \"MIT\",\n\tscripts: {\n\t\t\"test:typescript\": \"dtslint types\"\n\t},\n\tdependencies: {\n\t\t\"@babel/runtime\": \"^7.18.3\",\n\t\t\"@emotion/babel-plugin\": \"^11.11.0\",\n\t\t\"@emotion/cache\": \"^11.11.0\",\n\t\t\"@emotion/serialize\": \"^1.1.2\",\n\t\t\"@emotion/use-insertion-effect-with-fallbacks\": \"^1.0.1\",\n\t\t\"@emotion/utils\": \"^1.2.1\",\n\t\t\"@emotion/weak-memoize\": \"^0.3.1\",\n\t\t\"hoist-non-react-statics\": \"^3.3.1\"\n\t},\n\tpeerDependencies: {\n\t\treact: \">=16.8.0\"\n\t},\n\tpeerDependenciesMeta: {\n\t\t\"@types/react\": {\n\t\t\toptional: true\n\t\t}\n\t},\n\tdevDependencies: {\n\t\t\"@definitelytyped/dtslint\": \"0.0.112\",\n\t\t\"@emotion/css\": \"11.11.0\",\n\t\t\"@emotion/css-prettifier\": \"1.1.3\",\n\t\t\"@emotion/server\": \"11.11.0\",\n\t\t\"@emotion/styled\": \"11.11.0\",\n\t\t\"html-tag-names\": \"^1.1.2\",\n\t\treact: \"16.14.0\",\n\t\t\"svg-tag-names\": \"^1.1.1\",\n\t\ttypescript: \"^4.5.5\"\n\t},\n\trepository: \"https://github.com/emotion-js/emotion/tree/main/packages/react\",\n\tpublishConfig: {\n\t\taccess: \"public\"\n\t},\n\t\"umd:main\": \"dist/emotion-react.umd.min.js\",\n\tpreconstruct: {\n\t\tentrypoints: [\n\t\t\t\"./index.js\",\n\t\t\t\"./jsx-runtime.js\",\n\t\t\t\"./jsx-dev-runtime.js\",\n\t\t\t\"./_isolated-hnrs.js\"\n\t\t],\n\t\tumdName: \"emotionReact\",\n\t\texports: {\n\t\t\tenvConditions: [\n\t\t\t\t\"browser\",\n\t\t\t\t\"worker\"\n\t\t\t],\n\t\t\textra: {\n\t\t\t\t\"./types/css-prop\": \"./types/css-prop.d.ts\",\n\t\t\t\t\"./macro\": {\n\t\t\t\t\ttypes: {\n\t\t\t\t\t\t\"import\": \"./macro.d.mts\",\n\t\t\t\t\t\t\"default\": \"./macro.d.ts\"\n\t\t\t\t\t},\n\t\t\t\t\t\"default\": \"./macro.js\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n};\n\nvar jsx = function jsx(type, props) {\n var args = arguments;\n\n if (props == null || !hasOwnProperty.call(props, 'css')) {\n // $FlowFixMe\n return React.createElement.apply(undefined, args);\n }\n\n var argsLength = args.length;\n var createElementArgArray = new Array(argsLength);\n createElementArgArray[0] = Emotion;\n createElementArgArray[1] = createEmotionProps(type, props);\n\n for (var i = 2; i < argsLength; i++) {\n createElementArgArray[i] = args[i];\n } // $FlowFixMe\n\n\n return React.createElement.apply(null, createElementArgArray);\n};\n\nvar warnedAboutCssPropForGlobal = false; // maintain place over rerenders.\n// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild\n// initial client-side render from SSR, use place of hydrating tag\n\nvar Global = /* #__PURE__ */withEmotionCache(function (props, cache) {\n if (process.env.NODE_ENV !== 'production' && !warnedAboutCssPropForGlobal && ( // check for className as well since the user is\n // probably using the custom createElement which\n // means it will be turned into a className prop\n // $FlowFixMe I don't really want to add it to the type since it shouldn't be used\n props.className || props.css)) {\n console.error(\"It looks like you're using the css prop on Global, did you mean to use the styles prop instead?\");\n warnedAboutCssPropForGlobal = true;\n }\n\n var styles = props.styles;\n var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext));\n\n if (!isBrowser$1) {\n var _ref;\n\n var serializedNames = serialized.name;\n var serializedStyles = serialized.styles;\n var next = serialized.next;\n\n while (next !== undefined) {\n serializedNames += ' ' + next.name;\n serializedStyles += next.styles;\n next = next.next;\n }\n\n var shouldCache = cache.compat === true;\n var rules = cache.insert(\"\", {\n name: serializedNames,\n styles: serializedStyles\n }, cache.sheet, shouldCache);\n\n if (shouldCache) {\n return null;\n }\n\n return /*#__PURE__*/React.createElement(\"style\", (_ref = {}, _ref[\"data-emotion\"] = cache.key + \"-global \" + serializedNames, _ref.dangerouslySetInnerHTML = {\n __html: rules\n }, _ref.nonce = cache.sheet.nonce, _ref));\n } // yes, i know these hooks are used conditionally\n // but it is based on a constant that will never change at runtime\n // it's effectively like having two implementations and switching them out\n // so it's not actually breaking anything\n\n\n var sheetRef = React.useRef();\n useInsertionEffectWithLayoutFallback(function () {\n var key = cache.key + \"-global\"; // use case of https://github.com/emotion-js/emotion/issues/2675\n\n var sheet = new cache.sheet.constructor({\n key: key,\n nonce: cache.sheet.nonce,\n container: cache.sheet.container,\n speedy: cache.sheet.isSpeedy\n });\n var rehydrating = false; // $FlowFixMe\n\n var node = document.querySelector(\"style[data-emotion=\\\"\" + key + \" \" + serialized.name + \"\\\"]\");\n\n if (cache.sheet.tags.length) {\n sheet.before = cache.sheet.tags[0];\n }\n\n if (node !== null) {\n rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other s\n\n node.setAttribute('data-emotion', key);\n sheet.hydrate([node]);\n }\n\n sheetRef.current = [sheet, rehydrating];\n return function () {\n sheet.flush();\n };\n }, [cache]);\n useInsertionEffectWithLayoutFallback(function () {\n var sheetRefCurrent = sheetRef.current;\n var sheet = sheetRefCurrent[0],\n rehydrating = sheetRefCurrent[1];\n\n if (rehydrating) {\n sheetRefCurrent[1] = false;\n return;\n }\n\n if (serialized.next !== undefined) {\n // insert keyframes\n insertStyles(cache, serialized.next, true);\n }\n\n if (sheet.tags.length) {\n // if this doesn't exist then it will be null so the style element will be appended\n var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;\n sheet.before = element;\n sheet.flush();\n }\n\n cache.insert(\"\", serialized, sheet, false);\n }, [cache, serialized.name]);\n return null;\n});\n\nif (process.env.NODE_ENV !== 'production') {\n Global.displayName = 'EmotionGlobal';\n}\n\nfunction css() {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return serializeStyles(args);\n}\n\nvar keyframes = function keyframes() {\n var insertable = css.apply(void 0, arguments);\n var name = \"animation-\" + insertable.name; // $FlowFixMe\n\n return {\n name: name,\n styles: \"@keyframes \" + name + \"{\" + insertable.styles + \"}\",\n anim: 1,\n toString: function toString() {\n return \"_EMO_\" + this.name + \"_\" + this.styles + \"_EMO_\";\n }\n };\n};\n\nvar classnames = function classnames(args) {\n var len = args.length;\n var i = 0;\n var cls = '';\n\n for (; i < len; i++) {\n var arg = args[i];\n if (arg == null) continue;\n var toAdd = void 0;\n\n switch (typeof arg) {\n case 'boolean':\n break;\n\n case 'object':\n {\n if (Array.isArray(arg)) {\n toAdd = classnames(arg);\n } else {\n if (process.env.NODE_ENV !== 'production' && arg.styles !== undefined && arg.name !== undefined) {\n console.error('You have passed styles created with `css` from `@emotion/react` package to the `cx`.\\n' + '`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from component.');\n }\n\n toAdd = '';\n\n for (var k in arg) {\n if (arg[k] && k) {\n toAdd && (toAdd += ' ');\n toAdd += k;\n }\n }\n }\n\n break;\n }\n\n default:\n {\n toAdd = arg;\n }\n }\n\n if (toAdd) {\n cls && (cls += ' ');\n cls += toAdd;\n }\n }\n\n return cls;\n};\n\nfunction merge(registered, css, className) {\n var registeredStyles = [];\n var rawClassName = getRegisteredStyles(registered, registeredStyles, className);\n\n if (registeredStyles.length < 2) {\n return className;\n }\n\n return rawClassName + css(registeredStyles);\n}\n\nvar Insertion = function Insertion(_ref) {\n var cache = _ref.cache,\n serializedArr = _ref.serializedArr;\n useInsertionEffectAlwaysWithSyncFallback(function () {\n\n for (var i = 0; i < serializedArr.length; i++) {\n insertStyles(cache, serializedArr[i], false);\n }\n });\n\n return null;\n};\n\nvar ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {\n var hasRendered = false;\n var serializedArr = [];\n\n var css = function css() {\n if (hasRendered && process.env.NODE_ENV !== 'production') {\n throw new Error('css can only be used during render');\n }\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n var serialized = serializeStyles(args, cache.registered);\n serializedArr.push(serialized); // registration has to happen here as the result of this might get consumed by `cx`\n\n registerStyles(cache, serialized, false);\n return cache.key + \"-\" + serialized.name;\n };\n\n var cx = function cx() {\n if (hasRendered && process.env.NODE_ENV !== 'production') {\n throw new Error('cx can only be used during render');\n }\n\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n return merge(cache.registered, css, classnames(args));\n };\n\n var content = {\n css: css,\n cx: cx,\n theme: React.useContext(ThemeContext)\n };\n var ele = props.children(content);\n hasRendered = true;\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {\n cache: cache,\n serializedArr: serializedArr\n }), ele);\n});\n\nif (process.env.NODE_ENV !== 'production') {\n ClassNames.displayName = 'EmotionClassNames';\n}\n\nif (process.env.NODE_ENV !== 'production') {\n var isBrowser = \"object\" !== 'undefined'; // #1727, #2905 for some reason Jest and Vitest evaluate modules twice if some consuming module gets mocked\n\n var isTestEnv = typeof jest !== 'undefined' || typeof vi !== 'undefined';\n\n if (isBrowser && !isTestEnv) {\n // globalThis has wide browser support - https://caniuse.com/?search=globalThis, Node.js 12 and later\n var globalContext = // $FlowIgnore\n typeof globalThis !== 'undefined' ? globalThis // eslint-disable-line no-undef\n : isBrowser ? window : global;\n var globalKey = \"__EMOTION_REACT_\" + pkg.version.split('.')[0] + \"__\";\n\n if (globalContext[globalKey]) {\n console.warn('You are loading @emotion/react when it is already loaded. Running ' + 'multiple instances may cause problems. This can happen if multiple ' + 'versions are used, or if multiple builds of the same version are ' + 'used.');\n }\n\n globalContext[globalKey] = true;\n }\n}\n\nexport { ClassNames, Global, jsx as createElement, css, jsx, keyframes };\n","/**\n * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}\n *\n * The color map is used to map a background color token to a matching text color that will meet contrast.\n *\n * @codegen <>\n * @codegenCommand yarn codegen-styles\n * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <>\n */\nexport default {\n 'neutral.bold': 'inverse',\n 'neutral.bold.hovered': 'inverse',\n 'neutral.bold.pressed': 'inverse',\n 'selected.bold': 'inverse',\n 'selected.bold.hovered': 'inverse',\n 'selected.bold.pressed': 'inverse',\n 'brand.bold': 'inverse',\n 'brand.bold.hovered': 'inverse',\n 'brand.bold.pressed': 'inverse',\n 'brand.boldest': 'inverse',\n 'brand.boldest.hovered': 'inverse',\n 'brand.boldest.pressed': 'inverse',\n 'danger.bold': 'inverse',\n 'danger.bold.hovered': 'inverse',\n 'danger.bold.pressed': 'inverse',\n 'warning.bold': 'warning.inverse',\n 'warning.bold.hovered': 'warning.inverse',\n 'warning.bold.pressed': 'warning.inverse',\n 'success.bold': 'inverse',\n 'success.bold.hovered': 'inverse',\n 'success.bold.pressed': 'inverse',\n 'discovery.bold': 'inverse',\n 'discovery.bold.hovered': 'inverse',\n 'discovery.bold.pressed': 'inverse',\n 'information.bold': 'inverse',\n 'information.bold.hovered': 'inverse',\n 'information.bold.pressed': 'inverse'\n};","import { createContext, useContext } from 'react';\n\n/**\n * __Surface context__\n *\n * A surface context provides context information on the current background (if set).\n */\nexport const SurfaceContext = /*#__PURE__*/createContext('elevation.surface');\n\n/**\n * __useSurface__\n *\n * Return the current surface. If no parent sets a surface color it falls back to the default surface.\n *\n * @see SurfaceContext\n */\nexport const useSurface = () => {\n return useContext(SurfaceContext);\n};\nSurfaceContext.displayName = 'SurfaceProvider';","/** @jsx jsx */\nimport { createContext, Fragment, useContext } from 'react';\nimport { css, jsx } from '@emotion/react';\nimport invariant from 'tiny-invariant';\nimport surfaceColorMap from '../internal/color-map';\nimport { useSurface } from './surface-provider';\nconst asAllowlist = ['span', 'div', 'p', 'strong'];\nconst textAlignMap = {\n center: css({\n textAlign: 'center'\n }),\n end: css({\n textAlign: 'end'\n }),\n start: css({\n textAlign: 'start'\n })\n};\nconst textTransformMap = {\n none: css({\n textTransform: 'none'\n }),\n lowercase: css({\n textTransform: 'lowercase'\n }),\n uppercase: css({\n textTransform: 'uppercase'\n })\n};\nconst verticalAlignMap = {\n top: css({\n verticalAlign: 'top'\n }),\n middle: css({\n verticalAlign: 'middle'\n }),\n bottom: css({\n verticalAlign: 'bottom'\n })\n};\nconst baseStyles = css({\n boxSizing: 'border-box',\n margin: \"var(--ds-space-0, 0px)\",\n padding: \"var(--ds-space-0, 0px)\"\n});\nconst truncateStyles = css({\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap'\n});\n\n/**\n * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.\n */\nconst useColor = colorProp => {\n const surface = useSurface();\n const inverseTextColor = surfaceColorMap[surface];\n\n /**\n * Where the color of the surface is inverted we override the user choice\n * as there is no valid choice that is not covered by the override.\n */\n const color = inverseTextColor !== null && inverseTextColor !== void 0 ? inverseTextColor : colorProp;\n return color;\n};\nconst HasTextAncestorContext = /*#__PURE__*/createContext(false);\nconst useHasTextAncestor = () => useContext(HasTextAncestorContext);\n\n/**\n * __Text__\n *\n * Text is a primitive component that has the Atlassian Design System's design guidelines baked in.\n * This includes considerations for text attributes such as color, font size, font weight, and line height.\n * It renders a `span` by default.\n *\n * @internal\n */\nconst Text = ({\n children,\n ...props\n}) => {\n const {\n as: Component = 'span',\n color: colorProp,\n fontSize,\n fontWeight,\n lineHeight,\n shouldTruncate = false,\n textAlign,\n textTransform,\n verticalAlign,\n testId,\n UNSAFE_style,\n id\n } = props;\n invariant(asAllowlist.includes(Component), `@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"${Component}\"`);\n const color = useColor(colorProp);\n const isWrapped = useHasTextAncestor();\n\n /**\n * If the text is already wrapped and applies no props we can just\n * render the children directly as a fragment.\n */\n if (isWrapped && Object.keys(props).length === 0) {\n return jsx(Fragment, null, children);\n }\n const component = jsx(Component, {\n style: UNSAFE_style,\n css: [baseStyles, fontFamilyMap.sans, color && textColorMap[color], fontSize && fontSizeMap[fontSize], fontWeight && fontWeightMap[fontWeight], lineHeight && lineHeightMap[lineHeight], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], textTransform && textTransformMap[textTransform], verticalAlign && verticalAlignMap[verticalAlign]],\n \"data-testid\": testId,\n id: id\n }, children);\n return isWrapped ?\n // no need to re-apply context if the text is already wrapped\n component : jsx(HasTextAncestorContext.Provider, {\n value: true\n }, component);\n};\nexport default Text;\n\n/**\n * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}\n * @codegen <>\n * @codegenId typography\n * @codegenCommand yarn codegen-styles\n * @codegenParams [\"fontSize\", \"fontWeight\", \"fontFamily\", \"lineHeight\"]\n * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <>\n */\nconst fontSizeMap = {\n 'size.050': css({\n fontSize: \"var(--ds-font-size-050, 11px)\"\n }),\n 'size.075': css({\n fontSize: \"var(--ds-font-size-075, 12px)\"\n }),\n 'size.100': css({\n fontSize: \"var(--ds-font-size-100, 14px)\"\n }),\n 'size.200': css({\n fontSize: \"var(--ds-font-size-200, 16px)\"\n }),\n 'size.300': css({\n fontSize: \"var(--ds-font-size-300, 20px)\"\n }),\n 'size.400': css({\n fontSize: \"var(--ds-font-size-400, 24px)\"\n }),\n 'size.500': css({\n fontSize: \"var(--ds-font-size-500, 29px)\"\n }),\n 'size.600': css({\n fontSize: \"var(--ds-font-size-600, 35px)\"\n })\n};\nconst fontWeightMap = {\n bold: css({\n fontWeight: \"var(--ds-font-weight-bold, 700)\"\n }),\n medium: css({\n fontWeight: \"var(--ds-font-weight-medium, 500)\"\n }),\n regular: css({\n fontWeight: \"var(--ds-font-weight-regular, 400)\"\n }),\n semibold: css({\n fontWeight: \"var(--ds-font-weight-semibold, 600)\"\n })\n};\nconst fontFamilyMap = {\n body: css({\n fontFamily: \"var(--ds-font-family-body, ui-sans-serif, \\\"Segoe UI\\\", Ubuntu, system-ui, \\\"Helvetica Neue\\\", sans-serif)\"\n }),\n brand: css({\n fontFamily: \"var(--ds-font-family-brand, Charlie Sans)\"\n }),\n code: css({\n fontFamily: \"var(--ds-font-family-code, ui-monospace, Menlo, \\\"Segoe UI Mono\\\", \\\"Ubuntu Mono\\\", monospace)\"\n }),\n heading: css({\n fontFamily: \"var(--ds-font-family-heading, ui-sans-serif, \\\"Segoe UI\\\", Ubuntu, system-ui, \\\"Helvetica Neue\\\", sans-serif)\"\n }),\n monospace: css({\n fontFamily: \"var(--ds-font-family-monospace, ui-monospace, Menlo, \\\"Segoe UI Mono\\\", \\\"Ubuntu Mono\\\", monospace)\"\n }),\n sans: css({\n fontFamily: \"var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \\\"Segoe UI\\\", \\\"Roboto\\\", \\\"Oxygen\\\", \\\"Ubuntu\\\", \\\"Fira Sans\\\", \\\"Droid Sans\\\", \\\"Helvetica Neue\\\", sans-serif)\"\n })\n};\nconst lineHeightMap = {\n 'lineHeight.1': css({\n lineHeight: \"var(--ds-font-lineHeight-1, 1)\"\n }),\n 'lineHeight.100': css({\n lineHeight: \"var(--ds-font-lineHeight-100, 16px)\"\n }),\n 'lineHeight.200': css({\n lineHeight: \"var(--ds-font-lineHeight-200, 20px)\"\n }),\n 'lineHeight.300': css({\n lineHeight: \"var(--ds-font-lineHeight-300, 24px)\"\n }),\n 'lineHeight.400': css({\n lineHeight: \"var(--ds-font-lineHeight-400, 28px)\"\n }),\n 'lineHeight.500': css({\n lineHeight: \"var(--ds-font-lineHeight-500, 32px)\"\n }),\n 'lineHeight.600': css({\n lineHeight: \"var(--ds-font-lineHeight-600, 40px)\"\n })\n};\n/**\n * @codegenEnd\n */\n/**\n * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}\n * @codegen <>\n * @codegenId colors\n * @codegenCommand yarn codegen-styles\n * @codegenParams [\"text\"]\n * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <>\n */\nconst textColorMap = {\n 'color.text': css({\n color: \"var(--ds-text, #172B4D)\"\n }),\n disabled: css({\n color: \"var(--ds-text-disabled, #A5ADBA)\"\n }),\n inverse: css({\n color: \"var(--ds-text-inverse, #FFFFFF)\"\n }),\n selected: css({\n color: \"var(--ds-text-selected, #0052CC)\"\n }),\n brand: css({\n color: \"var(--ds-text-brand, #0065FF)\"\n }),\n danger: css({\n color: \"var(--ds-text-danger, #DE350B)\"\n }),\n warning: css({\n color: \"var(--ds-text-warning, #974F0C)\"\n }),\n 'warning.inverse': css({\n color: \"var(--ds-text-warning-inverse, #172B4D)\"\n }),\n success: css({\n color: \"var(--ds-text-success, #006644)\"\n }),\n discovery: css({\n color: \"var(--ds-text-discovery, #403294)\"\n }),\n information: css({\n color: \"var(--ds-text-information, #0052CC)\"\n }),\n subtlest: css({\n color: \"var(--ds-text-subtlest, #7A869A)\"\n }),\n subtle: css({\n color: \"var(--ds-text-subtle, #42526E)\"\n })\n};\n\n/**\n * @codegenEnd\n */","import * as React from 'react';\nimport { useContext, forwardRef } from 'react';\nimport createCache from '@emotion/cache';\nimport _extends from '@babel/runtime/helpers/esm/extends';\nimport weakMemoize from '@emotion/weak-memoize';\nimport hoistNonReactStatics from '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js';\nimport { getRegisteredStyles, registerStyles, insertStyles } from '@emotion/utils';\nimport { serializeStyles } from '@emotion/serialize';\nimport { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';\n\nvar isBrowser = \"object\" !== 'undefined';\nvar hasOwnProperty = {}.hasOwnProperty;\n\nvar EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case\n// because this module is primarily intended for the browser and node\n// but it's also required in react native and similar environments sometimes\n// and we could have a special build just for that\n// but this is much easier and the native packages\n// might use a different theme context in the future anyway\ntypeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({\n key: 'css'\n}) : null);\n\nif (process.env.NODE_ENV !== 'production') {\n EmotionCacheContext.displayName = 'EmotionCacheContext';\n}\n\nvar CacheProvider = EmotionCacheContext.Provider;\nvar __unsafe_useEmotionCache = function useEmotionCache() {\n return useContext(EmotionCacheContext);\n};\n\nvar withEmotionCache = function withEmotionCache(func) {\n // $FlowFixMe\n return /*#__PURE__*/forwardRef(function (props, ref) {\n // the cache will never be null in the browser\n var cache = useContext(EmotionCacheContext);\n return func(props, cache, ref);\n });\n};\n\nif (!isBrowser) {\n withEmotionCache = function withEmotionCache(func) {\n return function (props) {\n var cache = useContext(EmotionCacheContext);\n\n if (cache === null) {\n // yes, we're potentially creating this on every render\n // it doesn't actually matter though since it's only on the server\n // so there will only every be a single render\n // that could change in the future because of suspense and etc. but for now,\n // this works and i don't want to optimise for a future thing that we aren't sure about\n cache = createCache({\n key: 'css'\n });\n return /*#__PURE__*/React.createElement(EmotionCacheContext.Provider, {\n value: cache\n }, func(props, cache));\n } else {\n return func(props, cache);\n }\n };\n };\n}\n\nvar ThemeContext = /* #__PURE__ */React.createContext({});\n\nif (process.env.NODE_ENV !== 'production') {\n ThemeContext.displayName = 'EmotionThemeContext';\n}\n\nvar useTheme = function useTheme() {\n return React.useContext(ThemeContext);\n};\n\nvar getTheme = function getTheme(outerTheme, theme) {\n if (typeof theme === 'function') {\n var mergedTheme = theme(outerTheme);\n\n if (process.env.NODE_ENV !== 'production' && (mergedTheme == null || typeof mergedTheme !== 'object' || Array.isArray(mergedTheme))) {\n throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!');\n }\n\n return mergedTheme;\n }\n\n if (process.env.NODE_ENV !== 'production' && (theme == null || typeof theme !== 'object' || Array.isArray(theme))) {\n throw new Error('[ThemeProvider] Please make your theme prop a plain object');\n }\n\n return _extends({}, outerTheme, theme);\n};\n\nvar createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {\n return weakMemoize(function (theme) {\n return getTheme(outerTheme, theme);\n });\n});\nvar ThemeProvider = function ThemeProvider(props) {\n var theme = React.useContext(ThemeContext);\n\n if (props.theme !== theme) {\n theme = createCacheWithTheme(theme)(props.theme);\n }\n\n return /*#__PURE__*/React.createElement(ThemeContext.Provider, {\n value: theme\n }, props.children);\n};\nfunction withTheme(Component) {\n var componentName = Component.displayName || Component.name || 'Component';\n\n var render = function render(props, ref) {\n var theme = React.useContext(ThemeContext);\n return /*#__PURE__*/React.createElement(Component, _extends({\n theme: theme,\n ref: ref\n }, props));\n }; // $FlowFixMe\n\n\n var WithTheme = /*#__PURE__*/React.forwardRef(render);\n WithTheme.displayName = \"WithTheme(\" + componentName + \")\";\n return hoistNonReactStatics(WithTheme, Component);\n}\n\nvar getLastPart = function getLastPart(functionName) {\n // The match may be something like 'Object.createEmotionProps' or\n // 'Loader.prototype.render'\n var parts = functionName.split('.');\n return parts[parts.length - 1];\n};\n\nvar getFunctionNameFromStackTraceLine = function getFunctionNameFromStackTraceLine(line) {\n // V8\n var match = /^\\s+at\\s+([A-Za-z0-9$.]+)\\s/.exec(line);\n if (match) return getLastPart(match[1]); // Safari / Firefox\n\n match = /^([A-Za-z0-9$.]+)@/.exec(line);\n if (match) return getLastPart(match[1]);\n return undefined;\n};\n\nvar internalReactFunctionNames = /* #__PURE__ */new Set(['renderWithHooks', 'processChild', 'finishClassComponent', 'renderToString']); // These identifiers come from error stacks, so they have to be valid JS\n// identifiers, thus we only need to replace what is a valid character for JS,\n// but not for CSS.\n\nvar sanitizeIdentifier = function sanitizeIdentifier(identifier) {\n return identifier.replace(/\\$/g, '-');\n};\n\nvar getLabelFromStackTrace = function getLabelFromStackTrace(stackTrace) {\n if (!stackTrace) return undefined;\n var lines = stackTrace.split('\\n');\n\n for (var i = 0; i < lines.length; i++) {\n var functionName = getFunctionNameFromStackTraceLine(lines[i]); // The first line of V8 stack traces is just \"Error\"\n\n if (!functionName) continue; // If we reach one of these, we have gone too far and should quit\n\n if (internalReactFunctionNames.has(functionName)) break; // The component name is the first function in the stack that starts with an\n // uppercase letter\n\n if (/^[A-Z]/.test(functionName)) return sanitizeIdentifier(functionName);\n }\n\n return undefined;\n};\n\nvar typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';\nvar labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';\nvar createEmotionProps = function createEmotionProps(type, props) {\n if (process.env.NODE_ENV !== 'production' && typeof props.css === 'string' && // check if there is a css declaration\n props.css.indexOf(':') !== -1) {\n throw new Error(\"Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css`\" + props.css + \"`\");\n }\n\n var newProps = {};\n\n for (var key in props) {\n if (hasOwnProperty.call(props, key)) {\n newProps[key] = props[key];\n }\n }\n\n newProps[typePropName] = type; // For performance, only call getLabelFromStackTrace in development and when\n // the label hasn't already been computed\n\n if (process.env.NODE_ENV !== 'production' && !!props.css && (typeof props.css !== 'object' || typeof props.css.name !== 'string' || props.css.name.indexOf('-') === -1)) {\n var label = getLabelFromStackTrace(new Error().stack);\n if (label) newProps[labelPropName] = label;\n }\n\n return newProps;\n};\n\nvar Insertion = function Insertion(_ref) {\n var cache = _ref.cache,\n serialized = _ref.serialized,\n isStringTag = _ref.isStringTag;\n registerStyles(cache, serialized, isStringTag);\n useInsertionEffectAlwaysWithSyncFallback(function () {\n return insertStyles(cache, serialized, isStringTag);\n });\n\n return null;\n};\n\nvar Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {\n var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works\n // not passing the registered cache to serializeStyles because it would\n // make certain babel optimisations not possible\n\n if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {\n cssProp = cache.registered[cssProp];\n }\n\n var WrappedComponent = props[typePropName];\n var registeredStyles = [cssProp];\n var className = '';\n\n if (typeof props.className === 'string') {\n className = getRegisteredStyles(cache.registered, registeredStyles, props.className);\n } else if (props.className != null) {\n className = props.className + \" \";\n }\n\n var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext));\n\n if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {\n var labelFromStack = props[labelPropName];\n\n if (labelFromStack) {\n serialized = serializeStyles([serialized, 'label:' + labelFromStack + ';']);\n }\n }\n\n className += cache.key + \"-\" + serialized.name;\n var newProps = {};\n\n for (var key in props) {\n if (hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && (process.env.NODE_ENV === 'production' || key !== labelPropName)) {\n newProps[key] = props[key];\n }\n }\n\n newProps.ref = ref;\n newProps.className = className;\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {\n cache: cache,\n serialized: serialized,\n isStringTag: typeof WrappedComponent === 'string'\n }), /*#__PURE__*/React.createElement(WrappedComponent, newProps));\n});\n\nif (process.env.NODE_ENV !== 'production') {\n Emotion.displayName = 'EmotionCssPropInternal';\n}\n\nvar Emotion$1 = Emotion;\n\nexport { CacheProvider as C, Emotion$1 as E, ThemeContext as T, __unsafe_useEmotionCache as _, ThemeProvider as a, withTheme as b, createEmotionProps as c, hasOwnProperty as h, isBrowser as i, useTheme as u, withEmotionCache as w };\n","import { h as hasOwnProperty, E as Emotion, c as createEmotionProps, w as withEmotionCache, T as ThemeContext, i as isBrowser$1 } from './emotion-element-c39617d8.browser.esm.js';\nexport { C as CacheProvider, T as ThemeContext, a as ThemeProvider, _ as __unsafe_useEmotionCache, u as useTheme, w as withEmotionCache, b as withTheme } from './emotion-element-c39617d8.browser.esm.js';\nimport * as React from 'react';\nimport { insertStyles, registerStyles, getRegisteredStyles } from '@emotion/utils';\nimport { useInsertionEffectWithLayoutFallback, useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';\nimport { serializeStyles } from '@emotion/serialize';\nimport '@emotion/cache';\nimport '@babel/runtime/helpers/extends';\nimport '@emotion/weak-memoize';\nimport '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js';\nimport 'hoist-non-react-statics';\n\nvar pkg = {\n\tname: \"@emotion/react\",\n\tversion: \"11.11.1\",\n\tmain: \"dist/emotion-react.cjs.js\",\n\tmodule: \"dist/emotion-react.esm.js\",\n\tbrowser: {\n\t\t\"./dist/emotion-react.esm.js\": \"./dist/emotion-react.browser.esm.js\"\n\t},\n\texports: {\n\t\t\".\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./dist/emotion-react.worker.esm.js\",\n\t\t\t\tbrowser: \"./dist/emotion-react.browser.esm.js\",\n\t\t\t\t\"default\": \"./dist/emotion-react.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./dist/emotion-react.cjs.mjs\",\n\t\t\t\"default\": \"./dist/emotion-react.cjs.js\"\n\t\t},\n\t\t\"./jsx-runtime\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./jsx-runtime/dist/emotion-react-jsx-runtime.worker.esm.js\",\n\t\t\t\tbrowser: \"./jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js\",\n\t\t\t\t\"default\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.mjs\",\n\t\t\t\"default\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js\"\n\t\t},\n\t\t\"./_isolated-hnrs\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.worker.esm.js\",\n\t\t\t\tbrowser: \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js\",\n\t\t\t\t\"default\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.mjs\",\n\t\t\t\"default\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.js\"\n\t\t},\n\t\t\"./jsx-dev-runtime\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.worker.esm.js\",\n\t\t\t\tbrowser: \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.esm.js\",\n\t\t\t\t\"default\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.mjs\",\n\t\t\t\"default\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.js\"\n\t\t},\n\t\t\"./package.json\": \"./package.json\",\n\t\t\"./types/css-prop\": \"./types/css-prop.d.ts\",\n\t\t\"./macro\": {\n\t\t\ttypes: {\n\t\t\t\t\"import\": \"./macro.d.mts\",\n\t\t\t\t\"default\": \"./macro.d.ts\"\n\t\t\t},\n\t\t\t\"default\": \"./macro.js\"\n\t\t}\n\t},\n\ttypes: \"types/index.d.ts\",\n\tfiles: [\n\t\t\"src\",\n\t\t\"dist\",\n\t\t\"jsx-runtime\",\n\t\t\"jsx-dev-runtime\",\n\t\t\"_isolated-hnrs\",\n\t\t\"types/*.d.ts\",\n\t\t\"macro.*\"\n\t],\n\tsideEffects: false,\n\tauthor: \"Emotion Contributors\",\n\tlicense: \"MIT\",\n\tscripts: {\n\t\t\"test:typescript\": \"dtslint types\"\n\t},\n\tdependencies: {\n\t\t\"@babel/runtime\": \"^7.18.3\",\n\t\t\"@emotion/babel-plugin\": \"^11.11.0\",\n\t\t\"@emotion/cache\": \"^11.11.0\",\n\t\t\"@emotion/serialize\": \"^1.1.2\",\n\t\t\"@emotion/use-insertion-effect-with-fallbacks\": \"^1.0.1\",\n\t\t\"@emotion/utils\": \"^1.2.1\",\n\t\t\"@emotion/weak-memoize\": \"^0.3.1\",\n\t\t\"hoist-non-react-statics\": \"^3.3.1\"\n\t},\n\tpeerDependencies: {\n\t\treact: \">=16.8.0\"\n\t},\n\tpeerDependenciesMeta: {\n\t\t\"@types/react\": {\n\t\t\toptional: true\n\t\t}\n\t},\n\tdevDependencies: {\n\t\t\"@definitelytyped/dtslint\": \"0.0.112\",\n\t\t\"@emotion/css\": \"11.11.0\",\n\t\t\"@emotion/css-prettifier\": \"1.1.3\",\n\t\t\"@emotion/server\": \"11.11.0\",\n\t\t\"@emotion/styled\": \"11.11.0\",\n\t\t\"html-tag-names\": \"^1.1.2\",\n\t\treact: \"16.14.0\",\n\t\t\"svg-tag-names\": \"^1.1.1\",\n\t\ttypescript: \"^4.5.5\"\n\t},\n\trepository: \"https://github.com/emotion-js/emotion/tree/main/packages/react\",\n\tpublishConfig: {\n\t\taccess: \"public\"\n\t},\n\t\"umd:main\": \"dist/emotion-react.umd.min.js\",\n\tpreconstruct: {\n\t\tentrypoints: [\n\t\t\t\"./index.js\",\n\t\t\t\"./jsx-runtime.js\",\n\t\t\t\"./jsx-dev-runtime.js\",\n\t\t\t\"./_isolated-hnrs.js\"\n\t\t],\n\t\tumdName: \"emotionReact\",\n\t\texports: {\n\t\t\tenvConditions: [\n\t\t\t\t\"browser\",\n\t\t\t\t\"worker\"\n\t\t\t],\n\t\t\textra: {\n\t\t\t\t\"./types/css-prop\": \"./types/css-prop.d.ts\",\n\t\t\t\t\"./macro\": {\n\t\t\t\t\ttypes: {\n\t\t\t\t\t\t\"import\": \"./macro.d.mts\",\n\t\t\t\t\t\t\"default\": \"./macro.d.ts\"\n\t\t\t\t\t},\n\t\t\t\t\t\"default\": \"./macro.js\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n};\n\nvar jsx = function jsx(type, props) {\n var args = arguments;\n\n if (props == null || !hasOwnProperty.call(props, 'css')) {\n // $FlowFixMe\n return React.createElement.apply(undefined, args);\n }\n\n var argsLength = args.length;\n var createElementArgArray = new Array(argsLength);\n createElementArgArray[0] = Emotion;\n createElementArgArray[1] = createEmotionProps(type, props);\n\n for (var i = 2; i < argsLength; i++) {\n createElementArgArray[i] = args[i];\n } // $FlowFixMe\n\n\n return React.createElement.apply(null, createElementArgArray);\n};\n\nvar warnedAboutCssPropForGlobal = false; // maintain place over rerenders.\n// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild\n// initial client-side render from SSR, use place of hydrating tag\n\nvar Global = /* #__PURE__ */withEmotionCache(function (props, cache) {\n if (process.env.NODE_ENV !== 'production' && !warnedAboutCssPropForGlobal && ( // check for className as well since the user is\n // probably using the custom createElement which\n // means it will be turned into a className prop\n // $FlowFixMe I don't really want to add it to the type since it shouldn't be used\n props.className || props.css)) {\n console.error(\"It looks like you're using the css prop on Global, did you mean to use the styles prop instead?\");\n warnedAboutCssPropForGlobal = true;\n }\n\n var styles = props.styles;\n var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext));\n\n if (!isBrowser$1) {\n var _ref;\n\n var serializedNames = serialized.name;\n var serializedStyles = serialized.styles;\n var next = serialized.next;\n\n while (next !== undefined) {\n serializedNames += ' ' + next.name;\n serializedStyles += next.styles;\n next = next.next;\n }\n\n var shouldCache = cache.compat === true;\n var rules = cache.insert(\"\", {\n name: serializedNames,\n styles: serializedStyles\n }, cache.sheet, shouldCache);\n\n if (shouldCache) {\n return null;\n }\n\n return /*#__PURE__*/React.createElement(\"style\", (_ref = {}, _ref[\"data-emotion\"] = cache.key + \"-global \" + serializedNames, _ref.dangerouslySetInnerHTML = {\n __html: rules\n }, _ref.nonce = cache.sheet.nonce, _ref));\n } // yes, i know these hooks are used conditionally\n // but it is based on a constant that will never change at runtime\n // it's effectively like having two implementations and switching them out\n // so it's not actually breaking anything\n\n\n var sheetRef = React.useRef();\n useInsertionEffectWithLayoutFallback(function () {\n var key = cache.key + \"-global\"; // use case of https://github.com/emotion-js/emotion/issues/2675\n\n var sheet = new cache.sheet.constructor({\n key: key,\n nonce: cache.sheet.nonce,\n container: cache.sheet.container,\n speedy: cache.sheet.isSpeedy\n });\n var rehydrating = false; // $FlowFixMe\n\n var node = document.querySelector(\"style[data-emotion=\\\"\" + key + \" \" + serialized.name + \"\\\"]\");\n\n if (cache.sheet.tags.length) {\n sheet.before = cache.sheet.tags[0];\n }\n\n if (node !== null) {\n rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other s\n\n node.setAttribute('data-emotion', key);\n sheet.hydrate([node]);\n }\n\n sheetRef.current = [sheet, rehydrating];\n return function () {\n sheet.flush();\n };\n }, [cache]);\n useInsertionEffectWithLayoutFallback(function () {\n var sheetRefCurrent = sheetRef.current;\n var sheet = sheetRefCurrent[0],\n rehydrating = sheetRefCurrent[1];\n\n if (rehydrating) {\n sheetRefCurrent[1] = false;\n return;\n }\n\n if (serialized.next !== undefined) {\n // insert keyframes\n insertStyles(cache, serialized.next, true);\n }\n\n if (sheet.tags.length) {\n // if this doesn't exist then it will be null so the style element will be appended\n var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;\n sheet.before = element;\n sheet.flush();\n }\n\n cache.insert(\"\", serialized, sheet, false);\n }, [cache, serialized.name]);\n return null;\n});\n\nif (process.env.NODE_ENV !== 'production') {\n Global.displayName = 'EmotionGlobal';\n}\n\nfunction css() {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return serializeStyles(args);\n}\n\nvar keyframes = function keyframes() {\n var insertable = css.apply(void 0, arguments);\n var name = \"animation-\" + insertable.name; // $FlowFixMe\n\n return {\n name: name,\n styles: \"@keyframes \" + name + \"{\" + insertable.styles + \"}\",\n anim: 1,\n toString: function toString() {\n return \"_EMO_\" + this.name + \"_\" + this.styles + \"_EMO_\";\n }\n };\n};\n\nvar classnames = function classnames(args) {\n var len = args.length;\n var i = 0;\n var cls = '';\n\n for (; i < len; i++) {\n var arg = args[i];\n if (arg == null) continue;\n var toAdd = void 0;\n\n switch (typeof arg) {\n case 'boolean':\n break;\n\n case 'object':\n {\n if (Array.isArray(arg)) {\n toAdd = classnames(arg);\n } else {\n if (process.env.NODE_ENV !== 'production' && arg.styles !== undefined && arg.name !== undefined) {\n console.error('You have passed styles created with `css` from `@emotion/react` package to the `cx`.\\n' + '`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from component.');\n }\n\n toAdd = '';\n\n for (var k in arg) {\n if (arg[k] && k) {\n toAdd && (toAdd += ' ');\n toAdd += k;\n }\n }\n }\n\n break;\n }\n\n default:\n {\n toAdd = arg;\n }\n }\n\n if (toAdd) {\n cls && (cls += ' ');\n cls += toAdd;\n }\n }\n\n return cls;\n};\n\nfunction merge(registered, css, className) {\n var registeredStyles = [];\n var rawClassName = getRegisteredStyles(registered, registeredStyles, className);\n\n if (registeredStyles.length < 2) {\n return className;\n }\n\n return rawClassName + css(registeredStyles);\n}\n\nvar Insertion = function Insertion(_ref) {\n var cache = _ref.cache,\n serializedArr = _ref.serializedArr;\n useInsertionEffectAlwaysWithSyncFallback(function () {\n\n for (var i = 0; i < serializedArr.length; i++) {\n insertStyles(cache, serializedArr[i], false);\n }\n });\n\n return null;\n};\n\nvar ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {\n var hasRendered = false;\n var serializedArr = [];\n\n var css = function css() {\n if (hasRendered && process.env.NODE_ENV !== 'production') {\n throw new Error('css can only be used during render');\n }\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n var serialized = serializeStyles(args, cache.registered);\n serializedArr.push(serialized); // registration has to happen here as the result of this might get consumed by `cx`\n\n registerStyles(cache, serialized, false);\n return cache.key + \"-\" + serialized.name;\n };\n\n var cx = function cx() {\n if (hasRendered && process.env.NODE_ENV !== 'production') {\n throw new Error('cx can only be used during render');\n }\n\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n return merge(cache.registered, css, classnames(args));\n };\n\n var content = {\n css: css,\n cx: cx,\n theme: React.useContext(ThemeContext)\n };\n var ele = props.children(content);\n hasRendered = true;\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {\n cache: cache,\n serializedArr: serializedArr\n }), ele);\n});\n\nif (process.env.NODE_ENV !== 'production') {\n ClassNames.displayName = 'EmotionClassNames';\n}\n\nif (process.env.NODE_ENV !== 'production') {\n var isBrowser = \"object\" !== 'undefined'; // #1727, #2905 for some reason Jest and Vitest evaluate modules twice if some consuming module gets mocked\n\n var isTestEnv = typeof jest !== 'undefined' || typeof vi !== 'undefined';\n\n if (isBrowser && !isTestEnv) {\n // globalThis has wide browser support - https://caniuse.com/?search=globalThis, Node.js 12 and later\n var globalContext = // $FlowIgnore\n typeof globalThis !== 'undefined' ? globalThis // eslint-disable-line no-undef\n : isBrowser ? window : global;\n var globalKey = \"__EMOTION_REACT_\" + pkg.version.split('.')[0] + \"__\";\n\n if (globalContext[globalKey]) {\n console.warn('You are loading @emotion/react when it is already loaded. Running ' + 'multiple instances may cause problems. This can happen if multiple ' + 'versions are used, or if multiple builds of the same version are ' + 'used.');\n }\n\n globalContext[globalKey] = true;\n }\n}\n\nexport { ClassNames, Global, jsx as createElement, css, jsx, keyframes };\n","export const THEME_DATA_ATTRIBUTE = 'data-theme';\nexport const COLOR_MODE_ATTRIBUTE = 'data-color-mode';\nexport const CONTRAST_MODE_ATTRIBUTE = 'data-contrast-mode';\nexport const CUSTOM_THEME_ATTRIBUTE = 'data-custom-theme';\nexport const DEFAULT_THEME = 'light';\nexport const CSS_PREFIX = 'ds';\nexport const CSS_VAR_FULL = ['opacity', 'font', 'space', 'border'];\nexport const TOKEN_NOT_FOUND_CSS_VAR = `--${CSS_PREFIX}-token-not-found`;\nexport const CURRENT_SURFACE_CSS_VAR = `--${CSS_PREFIX}-elevation-surface-current`;","import { css } from '@emotion/react';\nimport { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';\n\n/**\n * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}\n * @codegen <>\n * @codegenId dimensions\n * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles\n * @codegenParams [\"dimensions\"]\n * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <>\n */\nexport const dimensionMap = {\n '100%': '100%',\n 'size.100': '1rem',\n 'size.200': '1.5rem',\n 'size.300': '2rem',\n 'size.400': '2.5rem',\n 'size.500': '3rem',\n 'size.600': '6rem',\n 'size.1000': '12rem'\n};\n/**\n * @codegenEnd\n */\n/**\n * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}\n * @codegen <>\n * @codegenId spacing\n * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles\n * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <>\n */\nexport const spaceMap = {\n 'space.0': \"var(--ds-space-0, 0px)\",\n 'space.025': \"var(--ds-space-025, 2px)\",\n 'space.050': \"var(--ds-space-050, 4px)\",\n 'space.075': \"var(--ds-space-075, 6px)\",\n 'space.100': \"var(--ds-space-100, 8px)\",\n 'space.150': \"var(--ds-space-150, 12px)\",\n 'space.200': \"var(--ds-space-200, 16px)\",\n 'space.250': \"var(--ds-space-250, 20px)\",\n 'space.300': \"var(--ds-space-300, 24px)\",\n 'space.400': \"var(--ds-space-400, 32px)\",\n 'space.500': \"var(--ds-space-500, 40px)\",\n 'space.600': \"var(--ds-space-600, 48px)\",\n 'space.800': \"var(--ds-space-800, 64px)\",\n 'space.1000': \"var(--ds-space-1000, 80px)\"\n};\nexport const negativeSpaceMap = {\n 'space.negative.025': \"var(--ds-space-negative-025, -2px)\",\n 'space.negative.050': \"var(--ds-space-negative-050, -4px)\",\n 'space.negative.075': \"var(--ds-space-negative-075, -6px)\",\n 'space.negative.100': \"var(--ds-space-negative-100, -8px)\",\n 'space.negative.150': \"var(--ds-space-negative-150, -12px)\",\n 'space.negative.200': \"var(--ds-space-negative-200, -16px)\",\n 'space.negative.250': \"var(--ds-space-negative-250, -20px)\",\n 'space.negative.300': \"var(--ds-space-negative-300, -24px)\",\n 'space.negative.400': \"var(--ds-space-negative-400, -32px)\"\n};\n/**\n * @codegenEnd\n */\n/**\n * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}\n * @codegen <>\n * @codegenId inverse-colors\n * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles\n * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <>\n */\nexport const inverseColorMap = {\n 'color.background.neutral.bold': 'color.text.inverse',\n 'color.background.neutral.bold.hovered': 'color.text.inverse',\n 'color.background.neutral.bold.pressed': 'color.text.inverse',\n 'color.background.selected.bold': 'color.text.inverse',\n 'color.background.selected.bold.hovered': 'color.text.inverse',\n 'color.background.selected.bold.pressed': 'color.text.inverse',\n 'color.background.brand.bold': 'color.text.inverse',\n 'color.background.brand.bold.hovered': 'color.text.inverse',\n 'color.background.brand.bold.pressed': 'color.text.inverse',\n 'color.background.brand.boldest': 'color.text.inverse',\n 'color.background.brand.boldest.hovered': 'color.text.inverse',\n 'color.background.brand.boldest.pressed': 'color.text.inverse',\n 'color.background.danger.bold': 'color.text.inverse',\n 'color.background.danger.bold.hovered': 'color.text.inverse',\n 'color.background.danger.bold.pressed': 'color.text.inverse',\n 'color.background.warning.bold': 'color.text.warning.inverse',\n 'color.background.warning.bold.hovered': 'color.text.warning.inverse',\n 'color.background.warning.bold.pressed': 'color.text.warning.inverse',\n 'color.background.success.bold': 'color.text.inverse',\n 'color.background.success.bold.hovered': 'color.text.inverse',\n 'color.background.success.bold.pressed': 'color.text.inverse',\n 'color.background.discovery.bold': 'color.text.inverse',\n 'color.background.discovery.bold.hovered': 'color.text.inverse',\n 'color.background.discovery.bold.pressed': 'color.text.inverse',\n 'color.background.information.bold': 'color.text.inverse',\n 'color.background.information.bold.hovered': 'color.text.inverse',\n 'color.background.information.bold.pressed': 'color.text.inverse'\n};\n\n/**\n * @codegenEnd\n */\n\n/**\n * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}\n * @codegen <>\n * @codegenId colors\n * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles\n * @codegenParams [\"border\", \"background\", \"shadow\", \"text\", \"fill\", \"surface\"]\n * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <>\n */\nexport const borderColorMap = {\n 'color.border': \"var(--ds-border, #091e4221)\",\n 'color.border.accent.lime': \"var(--ds-border-accent-lime, #6A9A23)\",\n 'color.border.accent.red': \"var(--ds-border-accent-red, #FF5630)\",\n 'color.border.accent.orange': \"var(--ds-border-accent-orange, #D94008)\",\n 'color.border.accent.yellow': \"var(--ds-border-accent-yellow, #FFAB00)\",\n 'color.border.accent.green': \"var(--ds-border-accent-green, #36B37E)\",\n 'color.border.accent.teal': \"var(--ds-border-accent-teal, #00B8D9)\",\n 'color.border.accent.blue': \"var(--ds-border-accent-blue, #0065FF)\",\n 'color.border.accent.purple': \"var(--ds-border-accent-purple, #6554C0)\",\n 'color.border.accent.magenta': \"var(--ds-border-accent-magenta, #CD519D)\",\n 'color.border.accent.gray': \"var(--ds-border-accent-gray, #5E6C84)\",\n 'color.border.disabled': \"var(--ds-border-disabled, #FAFBFC)\",\n 'color.border.focused': \"var(--ds-border-focused, #2684FF)\",\n 'color.border.input': \"var(--ds-border-input, #FAFBFC)\",\n 'color.border.inverse': \"var(--ds-border-inverse, #FFFFFF)\",\n 'color.border.selected': \"var(--ds-border-selected, #0052CC)\",\n 'color.border.brand': \"var(--ds-border-brand, #0052CC)\",\n 'color.border.danger': \"var(--ds-border-danger, #FF5630)\",\n 'color.border.warning': \"var(--ds-border-warning, #FFC400)\",\n 'color.border.success': \"var(--ds-border-success, #00875A)\",\n 'color.border.discovery': \"var(--ds-border-discovery, #998DD9)\",\n 'color.border.information': \"var(--ds-border-information, #0065FF)\",\n 'color.border.bold': \"var(--ds-border-bold, #344563)\"\n};\nexport const backgroundColorMap = {\n 'color.background.accent.lime.subtlest': \"var(--ds-background-accent-lime-subtlest, #EEFBDA)\",\n 'color.background.accent.lime.subtlest.hovered': \"var(--ds-background-accent-lime-subtlest-hovered, #D3F1A7)\",\n 'color.background.accent.lime.subtlest.pressed': \"var(--ds-background-accent-lime-subtlest-pressed, #B3DF72)\",\n 'color.background.accent.lime.subtler': \"var(--ds-background-accent-lime-subtler, #D3F1A7)\",\n 'color.background.accent.lime.subtler.hovered': \"var(--ds-background-accent-lime-subtler-hovered, #B3DF72)\",\n 'color.background.accent.lime.subtler.pressed': \"var(--ds-background-accent-lime-subtler-pressed, #94C748)\",\n 'color.background.accent.lime.subtle': \"var(--ds-background-accent-lime-subtle, #94C748)\",\n 'color.background.accent.lime.subtle.hovered': \"var(--ds-background-accent-lime-subtle-hovered, #B3DF72)\",\n 'color.background.accent.lime.subtle.pressed': \"var(--ds-background-accent-lime-subtle-pressed, #D3F1A7)\",\n 'color.background.accent.lime.bolder': \"var(--ds-background-accent-lime-bolder, #5B7F24)\",\n 'color.background.accent.lime.bolder.hovered': \"var(--ds-background-accent-lime-bolder-hovered, #37471F)\",\n 'color.background.accent.lime.bolder.pressed': \"var(--ds-background-accent-lime-bolder-pressed, #37471F)\",\n 'color.background.accent.red.subtlest': \"var(--ds-background-accent-red-subtlest, #FF8F73)\",\n 'color.background.accent.red.subtlest.hovered': \"var(--ds-background-accent-red-subtlest-hovered, #FF7452)\",\n 'color.background.accent.red.subtlest.pressed': \"var(--ds-background-accent-red-subtlest-pressed, #FF5630)\",\n 'color.background.accent.red.subtler': \"var(--ds-background-accent-red-subtler, #FF7452)\",\n 'color.background.accent.red.subtler.hovered': \"var(--ds-background-accent-red-subtler-hovered, #FF5630)\",\n 'color.background.accent.red.subtler.pressed': \"var(--ds-background-accent-red-subtler-pressed, #DE350B)\",\n 'color.background.accent.red.subtle': \"var(--ds-background-accent-red-subtle, #DE350B)\",\n 'color.background.accent.red.subtle.hovered': \"var(--ds-background-accent-red-subtle-hovered, #FF5630)\",\n 'color.background.accent.red.subtle.pressed': \"var(--ds-background-accent-red-subtle-pressed, #FF7452)\",\n 'color.background.accent.red.bolder': \"var(--ds-background-accent-red-bolder, #DE350B)\",\n 'color.background.accent.red.bolder.hovered': \"var(--ds-background-accent-red-bolder-hovered, #FF5630)\",\n 'color.background.accent.red.bolder.pressed': \"var(--ds-background-accent-red-bolder-pressed, #FF7452)\",\n 'color.background.accent.orange.subtlest': \"var(--ds-background-accent-orange-subtlest, #F18D13)\",\n 'color.background.accent.orange.subtlest.hovered': \"var(--ds-background-accent-orange-subtlest-hovered, #FEC57B)\",\n 'color.background.accent.orange.subtlest.pressed': \"var(--ds-background-accent-orange-subtlest-pressed, #FFE2BD)\",\n 'color.background.accent.orange.subtler': \"var(--ds-background-accent-orange-subtler, #B65C02)\",\n 'color.background.accent.orange.subtler.hovered': \"var(--ds-background-accent-orange-subtler-hovered, #F18D13)\",\n 'color.background.accent.orange.subtler.pressed': \"var(--ds-background-accent-orange-subtler-pressed, #FEC57B)\",\n 'color.background.accent.orange.subtle': \"var(--ds-background-accent-orange-subtle, #5F3811)\",\n 'color.background.accent.orange.subtle.hovered': \"var(--ds-background-accent-orange-subtle-hovered, #974F0C)\",\n 'color.background.accent.orange.subtle.pressed': \"var(--ds-background-accent-orange-subtle-pressed, #B65C02)\",\n 'color.background.accent.orange.bolder': \"var(--ds-background-accent-orange-bolder, #43290F)\",\n 'color.background.accent.orange.bolder.hovered': \"var(--ds-background-accent-orange-bolder-hovered, #5F3811)\",\n 'color.background.accent.orange.bolder.pressed': \"var(--ds-background-accent-orange-bolder-pressed, #974F0C)\",\n 'color.background.accent.yellow.subtlest': \"var(--ds-background-accent-yellow-subtlest, #FFE380)\",\n 'color.background.accent.yellow.subtlest.hovered': \"var(--ds-background-accent-yellow-subtlest-hovered, #FFC400)\",\n 'color.background.accent.yellow.subtlest.pressed': \"var(--ds-background-accent-yellow-subtlest-pressed, #FFAB00)\",\n 'color.background.accent.yellow.subtler': \"var(--ds-background-accent-yellow-subtler, #FFC400)\",\n 'color.background.accent.yellow.subtler.hovered': \"var(--ds-background-accent-yellow-subtler-hovered, #FFAB00)\",\n 'color.background.accent.yellow.subtler.pressed': \"var(--ds-background-accent-yellow-subtler-pressed, #FF991F)\",\n 'color.background.accent.yellow.subtle': \"var(--ds-background-accent-yellow-subtle, #FF991F)\",\n 'color.background.accent.yellow.subtle.hovered': \"var(--ds-background-accent-yellow-subtle-hovered, #FFAB00)\",\n 'color.background.accent.yellow.subtle.pressed': \"var(--ds-background-accent-yellow-subtle-pressed, #FFC400)\",\n 'color.background.accent.yellow.bolder': \"var(--ds-background-accent-yellow-bolder, #FF991F)\",\n 'color.background.accent.yellow.bolder.hovered': \"var(--ds-background-accent-yellow-bolder-hovered, #FFAB00)\",\n 'color.background.accent.yellow.bolder.pressed': \"var(--ds-background-accent-yellow-bolder-pressed, #FFC400)\",\n 'color.background.accent.green.subtlest': \"var(--ds-background-accent-green-subtlest, #79F2C0)\",\n 'color.background.accent.green.subtlest.hovered': \"var(--ds-background-accent-green-subtlest-hovered, #57D9A3)\",\n 'color.background.accent.green.subtlest.pressed': \"var(--ds-background-accent-green-subtlest-pressed, #36B37E)\",\n 'color.background.accent.green.subtler': \"var(--ds-background-accent-green-subtler, #57D9A3)\",\n 'color.background.accent.green.subtler.hovered': \"var(--ds-background-accent-green-subtler-hovered, #36B37E)\",\n 'color.background.accent.green.subtler.pressed': \"var(--ds-background-accent-green-subtler-pressed, #00875A)\",\n 'color.background.accent.green.subtle': \"var(--ds-background-accent-green-subtle, #00875A)\",\n 'color.background.accent.green.subtle.hovered': \"var(--ds-background-accent-green-subtle-hovered, #36B37E)\",\n 'color.background.accent.green.subtle.pressed': \"var(--ds-background-accent-green-subtle-pressed, #57D9A3)\",\n 'color.background.accent.green.bolder': \"var(--ds-background-accent-green-bolder, #00875A)\",\n 'color.background.accent.green.bolder.hovered': \"var(--ds-background-accent-green-bolder-hovered, #36B37E)\",\n 'color.background.accent.green.bolder.pressed': \"var(--ds-background-accent-green-bolder-pressed, #57D9A3)\",\n 'color.background.accent.teal.subtlest': \"var(--ds-background-accent-teal-subtlest, #79E2F2)\",\n 'color.background.accent.teal.subtlest.hovered': \"var(--ds-background-accent-teal-subtlest-hovered, #00C7E6)\",\n 'color.background.accent.teal.subtlest.pressed': \"var(--ds-background-accent-teal-subtlest-pressed, #00B8D9)\",\n 'color.background.accent.teal.subtler': \"var(--ds-background-accent-teal-subtler, #00C7E6)\",\n 'color.background.accent.teal.subtler.hovered': \"var(--ds-background-accent-teal-subtler-hovered, #00B8D9)\",\n 'color.background.accent.teal.subtler.pressed': \"var(--ds-background-accent-teal-subtler-pressed, #00A3BF)\",\n 'color.background.accent.teal.subtle': \"var(--ds-background-accent-teal-subtle, #00A3BF)\",\n 'color.background.accent.teal.subtle.hovered': \"var(--ds-background-accent-teal-subtle-hovered, #00B8D9)\",\n 'color.background.accent.teal.subtle.pressed': \"var(--ds-background-accent-teal-subtle-pressed, #00C7E6)\",\n 'color.background.accent.teal.bolder': \"var(--ds-background-accent-teal-bolder, #00A3BF)\",\n 'color.background.accent.teal.bolder.hovered': \"var(--ds-background-accent-teal-bolder-hovered, #00B8D9)\",\n 'color.background.accent.teal.bolder.pressed': \"var(--ds-background-accent-teal-bolder-pressed, #00C7E6)\",\n 'color.background.accent.blue.subtlest': \"var(--ds-background-accent-blue-subtlest, #4C9AFF)\",\n 'color.background.accent.blue.subtlest.hovered': \"var(--ds-background-accent-blue-subtlest-hovered, #2684FF)\",\n 'color.background.accent.blue.subtlest.pressed': \"var(--ds-background-accent-blue-subtlest-pressed, #0065FF)\",\n 'color.background.accent.blue.subtler': \"var(--ds-background-accent-blue-subtler, #2684FF)\",\n 'color.background.accent.blue.subtler.hovered': \"var(--ds-background-accent-blue-subtler-hovered, #0065FF)\",\n 'color.background.accent.blue.subtler.pressed': \"var(--ds-background-accent-blue-subtler-pressed, #0052CC)\",\n 'color.background.accent.blue.subtle': \"var(--ds-background-accent-blue-subtle, #0052CC)\",\n 'color.background.accent.blue.subtle.hovered': \"var(--ds-background-accent-blue-subtle-hovered, #0065FF)\",\n 'color.background.accent.blue.subtle.pressed': \"var(--ds-background-accent-blue-subtle-pressed, #2684FF)\",\n 'color.background.accent.blue.bolder': \"var(--ds-background-accent-blue-bolder, #0052CC)\",\n 'color.background.accent.blue.bolder.hovered': \"var(--ds-background-accent-blue-bolder-hovered, #0065FF)\",\n 'color.background.accent.blue.bolder.pressed': \"var(--ds-background-accent-blue-bolder-pressed, #2684FF)\",\n 'color.background.accent.purple.subtlest': \"var(--ds-background-accent-purple-subtlest, #998DD9)\",\n 'color.background.accent.purple.subtlest.hovered': \"var(--ds-background-accent-purple-subtlest-hovered, #8777D9)\",\n 'color.background.accent.purple.subtlest.pressed': \"var(--ds-background-accent-purple-subtlest-pressed, #6554C0)\",\n 'color.background.accent.purple.subtler': \"var(--ds-background-accent-purple-subtler, #8777D9)\",\n 'color.background.accent.purple.subtler.hovered': \"var(--ds-background-accent-purple-subtler-hovered, #6554C0)\",\n 'color.background.accent.purple.subtler.pressed': \"var(--ds-background-accent-purple-subtler-pressed, #5243AA)\",\n 'color.background.accent.purple.subtle': \"var(--ds-background-accent-purple-subtle, #5243AA)\",\n 'color.background.accent.purple.subtle.hovered': \"var(--ds-background-accent-purple-subtle-hovered, #6554C0)\",\n 'color.background.accent.purple.subtle.pressed': \"var(--ds-background-accent-purple-subtle-pressed, #8777D9)\",\n 'color.background.accent.purple.bolder': \"var(--ds-background-accent-purple-bolder, #5243AA)\",\n 'color.background.accent.purple.bolder.hovered': \"var(--ds-background-accent-purple-bolder-hovered, #6554C0)\",\n 'color.background.accent.purple.bolder.pressed': \"var(--ds-background-accent-purple-bolder-pressed, #8777D9)\",\n 'color.background.accent.magenta.subtlest': \"var(--ds-background-accent-magenta-subtlest, #FFECF8)\",\n 'color.background.accent.magenta.subtlest.hovered': \"var(--ds-background-accent-magenta-subtlest-hovered, #FDD0EC)\",\n 'color.background.accent.magenta.subtlest.pressed': \"var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)\",\n 'color.background.accent.magenta.subtler': \"var(--ds-background-accent-magenta-subtler, #FDD0EC)\",\n 'color.background.accent.magenta.subtler.hovered': \"var(--ds-background-accent-magenta-subtler-hovered, #F797D2)\",\n 'color.background.accent.magenta.subtler.pressed': \"var(--ds-background-accent-magenta-subtler-pressed, #E774BB)\",\n 'color.background.accent.magenta.subtle': \"var(--ds-background-accent-magenta-subtle, #E774BB)\",\n 'color.background.accent.magenta.subtle.hovered': \"var(--ds-background-accent-magenta-subtle-hovered, #F797D2)\",\n 'color.background.accent.magenta.subtle.pressed': \"var(--ds-background-accent-magenta-subtle-pressed, #FDD0EC)\",\n 'color.background.accent.magenta.bolder': \"var(--ds-background-accent-magenta-bolder, #AE4787)\",\n 'color.background.accent.magenta.bolder.hovered': \"var(--ds-background-accent-magenta-bolder-hovered, #943D73)\",\n 'color.background.accent.magenta.bolder.pressed': \"var(--ds-background-accent-magenta-bolder-pressed, #50253F)\",\n 'color.background.accent.gray.subtlest': \"var(--ds-background-accent-gray-subtlest, #6B778C)\",\n 'color.background.accent.gray.subtlest.hovered': \"var(--ds-background-accent-gray-subtlest-hovered, #5E6C84)\",\n 'color.background.accent.gray.subtlest.pressed': \"var(--ds-background-accent-gray-subtlest-pressed, #505F79)\",\n 'color.background.accent.gray.subtler': \"var(--ds-background-accent-gray-subtler, #5E6C84)\",\n 'color.background.accent.gray.subtler.hovered': \"var(--ds-background-accent-gray-subtler-hovered, #505F79)\",\n 'color.background.accent.gray.subtler.pressed': \"var(--ds-background-accent-gray-subtler-pressed, #42526E)\",\n 'color.background.accent.gray.subtle': \"var(--ds-background-accent-gray-subtle, #505F79)\",\n 'color.background.accent.gray.subtle.hovered': \"var(--ds-background-accent-gray-subtle-hovered, #5E6C84)\",\n 'color.background.accent.gray.subtle.pressed': \"var(--ds-background-accent-gray-subtle-pressed, #6B778C)\",\n 'color.background.accent.gray.bolder': \"var(--ds-background-accent-gray-bolder, #42526E)\",\n 'color.background.accent.gray.bolder.hovered': \"var(--ds-background-accent-gray-bolder-hovered, #344563)\",\n 'color.background.accent.gray.bolder.pressed': \"var(--ds-background-accent-gray-bolder-pressed, #253858)\",\n 'color.background.disabled': \"var(--ds-background-disabled, #091e4289)\",\n 'color.background.input': \"var(--ds-background-input, #FAFBFC)\",\n 'color.background.input.hovered': \"var(--ds-background-input-hovered, #EBECF0)\",\n 'color.background.input.pressed': \"var(--ds-background-input-pressed, #FFFFFF)\",\n 'color.background.inverse.subtle': \"var(--ds-background-inverse-subtle, #00000029)\",\n 'color.background.inverse.subtle.hovered': \"var(--ds-background-inverse-subtle-hovered, #0000003D)\",\n 'color.background.inverse.subtle.pressed': \"var(--ds-background-inverse-subtle-pressed, #00000052)\",\n 'color.background.neutral': \"var(--ds-background-neutral, #DFE1E6)\",\n 'color.background.neutral.hovered': \"var(--ds-background-neutral-hovered, #091e4214)\",\n 'color.background.neutral.pressed': \"var(--ds-background-neutral-pressed, #B3D4FF)\",\n 'color.background.neutral.subtle': \"var(--ds-background-neutral-subtle, transparent)\",\n 'color.background.neutral.subtle.hovered': \"var(--ds-background-neutral-subtle-hovered, #091e4214)\",\n 'color.background.neutral.subtle.pressed': \"var(--ds-background-neutral-subtle-pressed, #B3D4FF)\",\n 'color.background.neutral.bold': \"var(--ds-background-neutral-bold, #42526E)\",\n 'color.background.neutral.bold.hovered': \"var(--ds-background-neutral-bold-hovered, #505F79)\",\n 'color.background.neutral.bold.pressed': \"var(--ds-background-neutral-bold-pressed, #344563)\",\n 'color.background.selected': \"var(--ds-background-selected, #DEEBFF)\",\n 'color.background.selected.hovered': \"var(--ds-background-selected-hovered, #B3D4FF)\",\n 'color.background.selected.pressed': \"var(--ds-background-selected-pressed, #4C9AFF)\",\n 'color.background.selected.bold': \"var(--ds-background-selected-bold, #0052CC)\",\n 'color.background.selected.bold.hovered': \"var(--ds-background-selected-bold-hovered, #2684FF)\",\n 'color.background.selected.bold.pressed': \"var(--ds-background-selected-bold-pressed, #0052CC)\",\n 'color.background.brand.subtlest': \"var(--ds-background-brand-subtlest, #B3D4FF)\",\n 'color.background.brand.subtlest.hovered': \"var(--ds-background-brand-subtlest-hovered, #DEEBFF)\",\n 'color.background.brand.subtlest.pressed': \"var(--ds-background-brand-subtlest-pressed, #4C9AFF)\",\n 'color.background.brand.bold': \"var(--ds-background-brand-bold, #0052CC)\",\n 'color.background.brand.bold.hovered': \"var(--ds-background-brand-bold-hovered, #0065FF)\",\n 'color.background.brand.bold.pressed': \"var(--ds-background-brand-bold-pressed, #0747A6)\",\n 'color.background.brand.boldest': \"var(--ds-background-brand-boldest, #0747A6)\",\n 'color.background.brand.boldest.hovered': \"var(--ds-background-brand-boldest-hovered, #0052CC)\",\n 'color.background.brand.boldest.pressed': \"var(--ds-background-brand-boldest-pressed, #0747A6)\",\n 'color.background.danger': \"var(--ds-background-danger, #FFEBE6)\",\n 'color.background.danger.hovered': \"var(--ds-background-danger-hovered, #FFBDAD)\",\n 'color.background.danger.pressed': \"var(--ds-background-danger-pressed, #FF8F73)\",\n 'color.background.danger.bold': \"var(--ds-background-danger-bold, #DE350B)\",\n 'color.background.danger.bold.hovered': \"var(--ds-background-danger-bold-hovered, #FF5630)\",\n 'color.background.danger.bold.pressed': \"var(--ds-background-danger-bold-pressed, #BF2600)\",\n 'color.background.warning': \"var(--ds-background-warning, #FFFAE6)\",\n 'color.background.warning.hovered': \"var(--ds-background-warning-hovered, #FFF0B3)\",\n 'color.background.warning.pressed': \"var(--ds-background-warning-pressed, #FFE380)\",\n 'color.background.warning.bold': \"var(--ds-background-warning-bold, #FFAB00)\",\n 'color.background.warning.bold.hovered': \"var(--ds-background-warning-bold-hovered, #FFC400)\",\n 'color.background.warning.bold.pressed': \"var(--ds-background-warning-bold-pressed, #FF991F)\",\n 'color.background.success': \"var(--ds-background-success, #E3FCEF)\",\n 'color.background.success.hovered': \"var(--ds-background-success-hovered, #ABF5D1)\",\n 'color.background.success.pressed': \"var(--ds-background-success-pressed, #79F2C0)\",\n 'color.background.success.bold': \"var(--ds-background-success-bold, #00875A)\",\n 'color.background.success.bold.hovered': \"var(--ds-background-success-bold-hovered, #57D9A3)\",\n 'color.background.success.bold.pressed': \"var(--ds-background-success-bold-pressed, #00875A)\",\n 'color.background.discovery': \"var(--ds-background-discovery, #EAE6FF)\",\n 'color.background.discovery.hovered': \"var(--ds-background-discovery-hovered, #C0B6F2)\",\n 'color.background.discovery.pressed': \"var(--ds-background-discovery-pressed, #998DD9)\",\n 'color.background.discovery.bold': \"var(--ds-background-discovery-bold, #5243AA)\",\n 'color.background.discovery.bold.hovered': \"var(--ds-background-discovery-bold-hovered, #8777D9)\",\n 'color.background.discovery.bold.pressed': \"var(--ds-background-discovery-bold-pressed, #5243AA)\",\n 'color.background.information': \"var(--ds-background-information, #DEEBFF)\",\n 'color.background.information.hovered': \"var(--ds-background-information-hovered, #B3D4FF)\",\n 'color.background.information.pressed': \"var(--ds-background-information-pressed, #4C9AFF)\",\n 'color.background.information.bold': \"var(--ds-background-information-bold, #0052CC)\",\n 'color.background.information.bold.hovered': \"var(--ds-background-information-bold-hovered, #2684FF)\",\n 'color.background.information.bold.pressed': \"var(--ds-background-information-bold-pressed, #0052CC)\",\n 'color.blanket': \"var(--ds-blanket, #091e4289)\",\n 'color.blanket.selected': \"var(--ds-blanket-selected, #388BFF14)\",\n 'color.blanket.danger': \"var(--ds-blanket-danger, #EF5C4814)\",\n 'elevation.surface': \"var(--ds-surface, #FFFFFF)\",\n 'elevation.surface.hovered': \"var(--ds-surface-hovered, #FAFBFC)\",\n 'elevation.surface.pressed': \"var(--ds-surface-pressed, #F4F5F7)\",\n 'elevation.surface.overlay': \"var(--ds-surface-overlay, #FFFFFF)\",\n 'elevation.surface.overlay.hovered': \"var(--ds-surface-overlay-hovered, #FAFBFC)\",\n 'elevation.surface.overlay.pressed': \"var(--ds-surface-overlay-pressed, #F4F5F7)\",\n 'elevation.surface.raised': \"var(--ds-surface-raised, #FFFFFF)\",\n 'elevation.surface.raised.hovered': \"var(--ds-surface-raised-hovered, #FAFBFC)\",\n 'elevation.surface.raised.pressed': \"var(--ds-surface-raised-pressed, #F4F5F7)\",\n 'elevation.surface.sunken': \"var(--ds-surface-sunken, #F4F5F7)\",\n 'utility.elevation.surface.current': \"var(--ds-elevation-surface-current, #FFFFFF)\"\n};\nexport const shadowMap = {\n 'elevation.shadow.overflow': \"var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)\",\n 'elevation.shadow.overflow.perimeter': \"var(--ds-shadow-overflow-perimeter, #091e421f)\",\n 'elevation.shadow.overflow.spread': \"var(--ds-shadow-overflow-spread, #091e4229)\",\n 'elevation.shadow.overlay': \"var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)\",\n 'elevation.shadow.raised': \"var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)\"\n};\nexport const textColorMap = {\n 'color.text': \"var(--ds-text, #172B4D)\",\n 'color.text.accent.lime': \"var(--ds-text-accent-lime, #4C6B1F)\",\n 'color.text.accent.lime.bolder': \"var(--ds-text-accent-lime-bolder, #37471F)\",\n 'color.text.accent.red': \"var(--ds-text-accent-red, #DE350B)\",\n 'color.text.accent.red.bolder': \"var(--ds-text-accent-red-bolder, #BF2600)\",\n 'color.text.accent.orange': \"var(--ds-text-accent-orange, #F18D13)\",\n 'color.text.accent.orange.bolder': \"var(--ds-text-accent-orange-bolder, #B65C02)\",\n 'color.text.accent.yellow': \"var(--ds-text-accent-yellow, #FF991F)\",\n 'color.text.accent.yellow.bolder': \"var(--ds-text-accent-yellow-bolder, #FF8B00)\",\n 'color.text.accent.green': \"var(--ds-text-accent-green, #00875A)\",\n 'color.text.accent.green.bolder': \"var(--ds-text-accent-green-bolder, #006644)\",\n 'color.text.accent.teal': \"var(--ds-text-accent-teal, #00A3BF)\",\n 'color.text.accent.teal.bolder': \"var(--ds-text-accent-teal-bolder, #008DA6)\",\n 'color.text.accent.blue': \"var(--ds-text-accent-blue, #0052CC)\",\n 'color.text.accent.blue.bolder': \"var(--ds-text-accent-blue-bolder, #0747A6)\",\n 'color.text.accent.purple': \"var(--ds-text-accent-purple, #5243AA)\",\n 'color.text.accent.purple.bolder': \"var(--ds-text-accent-purple-bolder, #403294)\",\n 'color.text.accent.magenta': \"var(--ds-text-accent-magenta, #E774BB)\",\n 'color.text.accent.magenta.bolder': \"var(--ds-text-accent-magenta-bolder, #DA62AC)\",\n 'color.text.accent.gray': \"var(--ds-text-accent-gray, #505F79)\",\n 'color.text.accent.gray.bolder': \"var(--ds-text-accent-gray-bolder, #172B4D)\",\n 'color.text.disabled': \"var(--ds-text-disabled, #A5ADBA)\",\n 'color.text.inverse': \"var(--ds-text-inverse, #FFFFFF)\",\n 'color.text.selected': \"var(--ds-text-selected, #0052CC)\",\n 'color.text.brand': \"var(--ds-text-brand, #0065FF)\",\n 'color.text.danger': \"var(--ds-text-danger, #DE350B)\",\n 'color.text.warning': \"var(--ds-text-warning, #974F0C)\",\n 'color.text.warning.inverse': \"var(--ds-text-warning-inverse, #172B4D)\",\n 'color.text.success': \"var(--ds-text-success, #006644)\",\n 'color.text.discovery': \"var(--ds-text-discovery, #403294)\",\n 'color.text.information': \"var(--ds-text-information, #0052CC)\",\n 'color.text.subtlest': \"var(--ds-text-subtlest, #7A869A)\",\n 'color.text.subtle': \"var(--ds-text-subtle, #42526E)\",\n 'color.link': \"var(--ds-link, #0052CC)\",\n 'color.link.pressed': \"var(--ds-link-pressed, #0747A6)\",\n 'color.link.visited': \"var(--ds-link-visited, #403294)\"\n};\nexport const fillMap = {\n 'color.icon': \"var(--ds-icon, #505F79)\",\n 'color.icon.accent.lime': \"var(--ds-icon-accent-lime, #6A9A23)\",\n 'color.icon.accent.red': \"var(--ds-icon-accent-red, #FF5630)\",\n 'color.icon.accent.orange': \"var(--ds-icon-accent-orange, #D94008)\",\n 'color.icon.accent.yellow': \"var(--ds-icon-accent-yellow, #FFAB00)\",\n 'color.icon.accent.green': \"var(--ds-icon-accent-green, #36B37E)\",\n 'color.icon.accent.teal': \"var(--ds-icon-accent-teal, #00B8D9)\",\n 'color.icon.accent.blue': \"var(--ds-icon-accent-blue, #0065FF)\",\n 'color.icon.accent.purple': \"var(--ds-icon-accent-purple, #6554C0)\",\n 'color.icon.accent.magenta': \"var(--ds-icon-accent-magenta, #CD519D)\",\n 'color.icon.accent.gray': \"var(--ds-icon-accent-gray, #5E6C84)\",\n 'color.icon.disabled': \"var(--ds-icon-disabled, #8993A4)\",\n 'color.icon.inverse': \"var(--ds-icon-inverse, #FFFFFF)\",\n 'color.icon.selected': \"var(--ds-icon-selected, #0052CC)\",\n 'color.icon.brand': \"var(--ds-icon-brand, #0065FF)\",\n 'color.icon.danger': \"var(--ds-icon-danger, #DE350B)\",\n 'color.icon.warning': \"var(--ds-icon-warning, #FFC400)\",\n 'color.icon.warning.inverse': \"var(--ds-icon-warning-inverse, #253858)\",\n 'color.icon.success': \"var(--ds-icon-success, #00875A)\",\n 'color.icon.discovery': \"var(--ds-icon-discovery, #8777D9)\",\n 'color.icon.information': \"var(--ds-icon-information, #0747A6)\",\n 'color.icon.subtle': \"var(--ds-icon-subtle, #6B778C)\"\n};\nexport const surfaceColorMap = {\n 'elevation.surface': \"var(--ds-surface, #FFFFFF)\",\n 'elevation.surface.hovered': \"var(--ds-surface-hovered, #FAFBFC)\",\n 'elevation.surface.pressed': \"var(--ds-surface-pressed, #F4F5F7)\",\n 'elevation.surface.overlay': \"var(--ds-surface-overlay, #FFFFFF)\",\n 'elevation.surface.overlay.hovered': \"var(--ds-surface-overlay-hovered, #FAFBFC)\",\n 'elevation.surface.overlay.pressed': \"var(--ds-surface-overlay-pressed, #F4F5F7)\",\n 'elevation.surface.raised': \"var(--ds-surface-raised, #FFFFFF)\",\n 'elevation.surface.raised.hovered': \"var(--ds-surface-raised-hovered, #FAFBFC)\",\n 'elevation.surface.raised.pressed': \"var(--ds-surface-raised-pressed, #F4F5F7)\",\n 'elevation.surface.sunken': \"var(--ds-surface-sunken, #F4F5F7)\"\n};\n/**\n * @codegenEnd\n */\n/**\n * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}\n * @codegen <>\n * @codegenId misc\n * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles\n * @codegenParams [\"layer\"]\n * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <>\n * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <>\n */\nexport const layerMap = {\n card: 100,\n navigation: 200,\n dialog: 300,\n layer: 400,\n blanket: 500,\n modal: 510,\n flag: 600,\n spotlight: 700,\n tooltip: 800\n};\n/**\n * @codegenEnd\n */\n/**\n * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}\n * @codegen <>\n * @codegenId border\n * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles\n * @codegenParams [\"width\", \"radius\"]\n * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <>\n */\nexport const borderWidthMap = {\n 'border.width': \"var(--ds-border-width, 1px)\",\n 'border.width.0': \"var(--ds-border-width-0, 0px)\",\n 'border.width.indicator': \"var(--ds-border-width-indicator, 3px)\",\n 'border.width.outline': \"var(--ds-border-width-outline, 2px)\"\n};\nexport const borderRadiusMap = {\n 'border.radius.050': \"var(--ds-border-radius-050, 2px)\",\n 'border.radius': \"var(--ds-border-radius, 3px)\",\n 'border.radius.100': \"var(--ds-border-radius-100, 3px)\",\n 'border.radius.200': \"var(--ds-border-radius-200, 8px)\",\n 'border.radius.300': \"var(--ds-border-radius-300, 12px)\",\n 'border.radius.400': \"var(--ds-border-radius-400, 16px)\",\n 'border.radius.circle': \"var(--ds-border-radius-circle, 32032px)\"\n};\n/**\n * @codegenEnd\n */\n/**\n * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}\n * @codegen <>\n * @codegenId typography\n * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles\n * @codegenParams [\"fontSize\", \"fontWeight\", \"fontFamily\", \"lineHeight\", \"body\", \"ui\"]\n * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <>\n * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <>\n */\nexport const fontSizeMap = {\n 'font.size.050': \"var(--ds-font-size-050, 11px)\",\n 'font.size.075': \"var(--ds-font-size-075, 12px)\",\n 'font.size.100': \"var(--ds-font-size-100, 14px)\",\n 'font.size.200': \"var(--ds-font-size-200, 16px)\",\n 'font.size.300': \"var(--ds-font-size-300, 20px)\",\n 'font.size.400': \"var(--ds-font-size-400, 24px)\",\n 'font.size.500': \"var(--ds-font-size-500, 29px)\",\n 'font.size.600': \"var(--ds-font-size-600, 35px)\"\n};\nexport const fontWeightMap = {\n 'font.weight.bold': \"var(--ds-font-weight-bold, 700)\",\n 'font.weight.medium': \"var(--ds-font-weight-medium, 500)\",\n 'font.weight.regular': \"var(--ds-font-weight-regular, 400)\",\n 'font.weight.semibold': \"var(--ds-font-weight-semibold, 600)\"\n};\nexport const fontFamilyMap = {\n 'font.family.body': \"var(--ds-font-family-body, ui-sans-serif, \\\"Segoe UI\\\", Ubuntu, system-ui, \\\"Helvetica Neue\\\", sans-serif)\",\n 'font.family.brand': \"var(--ds-font-family-brand, Charlie Sans)\",\n 'font.family.code': \"var(--ds-font-family-code, ui-monospace, Menlo, \\\"Segoe UI Mono\\\", \\\"Ubuntu Mono\\\", monospace)\",\n 'font.family.heading': \"var(--ds-font-family-heading, ui-sans-serif, \\\"Segoe UI\\\", Ubuntu, system-ui, \\\"Helvetica Neue\\\", sans-serif)\",\n 'font.family.monospace': \"var(--ds-font-family-monospace, ui-monospace, Menlo, \\\"Segoe UI Mono\\\", \\\"Ubuntu Mono\\\", monospace)\",\n 'font.family.sans': \"var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \\\"Segoe UI\\\", \\\"Roboto\\\", \\\"Oxygen\\\", \\\"Ubuntu\\\", \\\"Fira Sans\\\", \\\"Droid Sans\\\", \\\"Helvetica Neue\\\", sans-serif)\"\n};\nexport const lineHeightMap = {\n 'font.lineHeight.1': \"var(--ds-font-lineHeight-1, 1)\",\n 'font.lineHeight.100': \"var(--ds-font-lineHeight-100, 16px)\",\n 'font.lineHeight.200': \"var(--ds-font-lineHeight-200, 20px)\",\n 'font.lineHeight.300': \"var(--ds-font-lineHeight-300, 24px)\",\n 'font.lineHeight.400': \"var(--ds-font-lineHeight-400, 28px)\",\n 'font.lineHeight.500': \"var(--ds-font-lineHeight-500, 32px)\",\n 'font.lineHeight.600': \"var(--ds-font-lineHeight-600, 40px)\"\n};\nexport const bodyTextMap = {\n body: \"var(--ds-font-body, normal 400 14px/20px var(--ds-font-family-body))\",\n 'body.large': \"var(--ds-font-body-large, normal 400 16px/24px var(--ds-font-family-body))\",\n 'body.small': \"var(--ds-font-body-small, normal 400 11px/20px var(--ds-font-family-body))\"\n};\nexport const uiTextMap = {\n ui: \"var(--ds-font-ui, normal 400 14px/1 var(--ds-font-family-body))\",\n 'ui.small': \"var(--ds-font-ui-small, normal 400 11px/1 var(--ds-font-family-body))\"\n};\n\n/**\n * @codegenEnd\n */\n\n// Generate maps for Box props. backgroundColor, padding, etc\nconst spacingProperties = [\n// Used by Box\n'padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd',\n// Used by Inline and Stack\n'gap', 'rowGap', 'columnGap'];\nconst getSerializedStylesMap = (cssProperty, tokenMap) => {\n return Object.keys(tokenMap).reduce((emotionSpacingMap, token) => {\n emotionSpacingMap[token] = css({\n [cssProperty]: tokenMap[token]\n });\n return emotionSpacingMap;\n }, {});\n};\nexport const paddingStylesMap = spacingProperties.reduce((styleMap, spacingProperty) => {\n styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, spaceMap);\n return styleMap;\n}, {});\nexport const spaceStylesMap = spacingProperties.reduce((styleMap, spacingProperty) => {\n styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, spaceMap);\n return styleMap;\n}, {});\nexport const backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);\nexport const textColorStylesMap = getSerializedStylesMap('color', textColorMap);\nexport const fontSizeStylesMap = getSerializedStylesMap('fontSize', fontSizeMap);\nexport const fontWeightStylesMap = getSerializedStylesMap('fontWeight', fontWeightMap);\nexport const fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);\nexport const lineHeightStylesMap = getSerializedStylesMap('lineHeight', lineHeightMap);\nexport const bodyTextStylesMap = getSerializedStylesMap('font', bodyTextMap);\nexport const uiTextStylesMap = getSerializedStylesMap('font', uiTextMap);\nexport const surfaceColorStylesMap = getSerializedStylesMap(CURRENT_SURFACE_CSS_VAR, surfaceColorMap);\nexport const isSurfaceColorToken = color => surfaceColorMap[color] !== undefined;","/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */\nimport { css as cssEmotion } from '@emotion/react';\nimport { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';\nconst tokensMap = {\n backgroundColor: backgroundColorMap,\n blockSize: dimensionMap,\n borderColor: borderColorMap,\n borderRadius: borderRadiusMap,\n borderWidth: borderWidthMap,\n bottom: spaceMap,\n boxShadow: shadowMap,\n color: textColorMap,\n columnGap: spaceMap,\n gap: spaceMap,\n height: dimensionMap,\n inlineSize: dimensionMap,\n inset: spaceMap,\n insetBlock: spaceMap,\n insetBlockEnd: spaceMap,\n insetBlockStart: spaceMap,\n insetInline: spaceMap,\n insetInlineEnd: spaceMap,\n insetInlineStart: spaceMap,\n margin: spaceMap,\n marginBlock: spaceMap,\n marginBlockEnd: spaceMap,\n marginBlockStart: spaceMap,\n marginBottom: spaceMap,\n marginInline: spaceMap,\n marginInlineEnd: spaceMap,\n marginInlineStart: spaceMap,\n marginLeft: spaceMap,\n marginRight: spaceMap,\n marginTop: spaceMap,\n left: spaceMap,\n maxBlockSize: dimensionMap,\n maxHeight: dimensionMap,\n maxInlineSize: dimensionMap,\n maxWidth: dimensionMap,\n minBlockSize: dimensionMap,\n minHeight: dimensionMap,\n minInlineSize: dimensionMap,\n minWidth: dimensionMap,\n outlineOffset: spaceMap,\n outlineWidth: borderWidthMap,\n outlineColor: borderColorMap,\n padding: spaceMap,\n paddingBlock: spaceMap,\n paddingBlockEnd: spaceMap,\n paddingBlockStart: spaceMap,\n paddingBottom: spaceMap,\n paddingInline: spaceMap,\n paddingInlineEnd: spaceMap,\n paddingInlineStart: spaceMap,\n paddingLeft: spaceMap,\n paddingRight: spaceMap,\n paddingTop: spaceMap,\n right: spaceMap,\n rowGap: spaceMap,\n top: spaceMap,\n width: dimensionMap,\n zIndex: layerMap\n};\nconst uniqueSymbol = Symbol('UNSAFE_INTERNAL_styles');\nconst isSafeEnvToThrow = () => typeof process === 'object' && typeof process.env === 'object' && process.env.NODE_ENV !== 'production';\nconst reNestedSelectors = /(\\.|\\s|&+|\\*\\>|#|\\[.*\\])/;\nconst safeSelectors = /^@media .*$|^::?.*$|^@supports .*$/;\nconst transformStyles = styleObj => {\n if (!styleObj || typeof styleObj !== 'object') {\n return styleObj;\n }\n\n // If styles are defined as a CSSObject[], recursively call on each element until we reach CSSObject\n if (Array.isArray(styleObj)) {\n return styleObj.map(transformStyles);\n }\n\n // Modifies styleObj in place. Be careful.\n Object.entries(styleObj).forEach(([key, value]) => {\n // If key is a pseudo class or a pseudo element, then value should be an object.\n // So, call transformStyles on the value\n if (typeof value === 'object' && safeSelectors.test(key)) {\n styleObj[key] = transformStyles(value);\n return;\n }\n if (isSafeEnvToThrow()) {\n // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`\n if (reNestedSelectors.test(key)) {\n throw new Error(`Styles not supported for key '${key}'.`);\n }\n }\n\n // We have now dealt with all the special cases, so,\n // check whether what remains is a style property\n // that can be transformed.\n if (!(key in tokensMap)) {\n return;\n }\n const tokenValue = tokensMap[key][value];\n styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;\n });\n return styleObj;\n};\nconst baseXcss = style => {\n const transformedStyles = transformStyles(style);\n return {\n [uniqueSymbol]: cssEmotion(transformedStyles)\n };\n};\n\n/**\n * @internal used in primitives\n * @returns a collection of styles that can be applied to the respective primitive\n */\n\nexport const parseXcss = args => {\n if (Array.isArray(args)) {\n return args.map(x => x && parseXcss(x)).filter(Boolean);\n }\n const {\n [uniqueSymbol]: styles\n } = args;\n if (typeof process && process.env.NODE_ENV === 'development' && typeof styles === 'undefined') {\n throw new Error('Styles generated from unsafe source, use the `xcss` export from `@atlaskit/primitives`.');\n }\n return styles;\n};\n\n// Media queries should not contain nested media queries\n\n// Pseudos should not contain nested pseudos, or media queries\n\n/**\n * ### xcss\n *\n * `xcss` is a safer, tokens-first approach to CSS-in-JS. It allows token-backed values for\n * CSS application.\n *\n * ```tsx\n * const styles = xcss({\n * padding: 'space.100'\n * })\n * ```\n */\nexport function xcss(style) {\n return baseXcss(style);\n}","import { createContext, useContext } from 'react';\n/**\n * __Surface context__\n *\n * A surface context provides context information on the current background (if set).\n */\nexport const SurfaceContext = /*#__PURE__*/createContext('elevation.surface');\n\n/**\n * __useSurface__\n *\n * Return the current surface. If no parent sets a surface color it falls back to the default surface.\n *\n * @see SurfaceContext\n */\nexport const useSurface = () => {\n return useContext(SurfaceContext);\n};\nSurfaceContext.displayName = 'SurfaceProvider';","import _extends from \"@babel/runtime/helpers/extends\";\n/** @jsx jsx */\nimport { forwardRef } from 'react';\nimport { css, jsx } from '@emotion/react';\nimport { backgroundColorStylesMap, isSurfaceColorToken, paddingStylesMap, surfaceColorStylesMap } from '../xcss/style-maps.partial';\nimport { parseXcss } from '../xcss/xcss';\nimport { SurfaceContext } from './internal/surface-provider';\n\n// Can either Exclude or Extract - here we're excluding all SVG-related elements\n\n// Basically just ElementType but without ComponentType, it makes sense to keep the \"Type\" suffix\n// eslint-disable-next-line @repo/internal/react/consistent-types-definitions\n/**\n * __Box__\n *\n * A Box is a primitive component that has the design decisions of the Atlassian Design System baked in.\n * Renders a `div` by default.\n *\n * - [Examples](https://atlassian.design/components/primitives/box/examples)\n * - [Code](https://atlassian.design/components/primitives/box/code)\n * - [Usage](https://atlassian.design/components/primitives/box/usage)\n */\nexport const Box = /*#__PURE__*/forwardRef(({\n as = 'div',\n children,\n backgroundColor,\n padding,\n paddingBlock,\n paddingBlockStart,\n paddingBlockEnd,\n paddingInline,\n paddingInlineStart,\n paddingInlineEnd,\n style,\n testId,\n xcss,\n ...htmlAttributes\n}, ref) => {\n const Component = as;\n // This is to remove className from safeHtmlAttributes\n // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed\n const {\n className: _spreadClass,\n ...safeHtmlAttributes\n } = htmlAttributes;\n const className = xcss && parseXcss(xcss);\n const node =\n // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable\n jsx(Component, _extends({\n style: style\n // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.\n ,\n ref: ref\n // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props\n }, safeHtmlAttributes, {\n css: [baseStyles, backgroundColor && backgroundColorStylesMap[backgroundColor], isSurfaceColorToken(backgroundColor) && surfaceColorStylesMap[backgroundColor], padding && paddingStylesMap.padding[padding], paddingBlock && paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],\n // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage\n className],\n \"data-testid\": testId\n }), children);\n return backgroundColor ? jsx(SurfaceContext.Provider, {\n value: backgroundColor\n }, node) : node;\n});\nexport default Box;\nconst baseStyles = css({\n boxSizing: 'border-box',\n appearance: 'none',\n border: 'none'\n});","/* eslint-disable @atlassian/tangerine/import/entry-points */\n/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */\n/* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */\n\nimport React, { memo } from 'react';\nimport Text from '@atlaskit/ds-explorations/text';\nimport { Box, xcss } from '@atlaskit/primitives';\nconst baseStyles = xcss({\n display: 'inline-flex',\n borderRadius: 'border.radius',\n position: 'static',\n overflow: 'hidden'\n});\n/**\n * __Lozenge__\n *\n * A lozenge is a visual indicator used to highlight an item's status for quick recognition.\n *\n * - [Examples](https://atlassian.design/components/lozenge/examples)\n * - [Code](https://atlassian.design/components/lozenge/code)\n * - [Usage](https://atlassian.design/components/lozenge/usage)\n */\nconst Lozenge = /*#__PURE__*/memo(({\n children,\n testId,\n isBold = false,\n appearance = 'default',\n maxWidth = 200,\n style\n}) => {\n const appearanceStyle = isBold ? 'bold' : 'subtle';\n const appearanceType = appearance in backgroundColors[appearanceStyle] ? appearance : 'default';\n const maxWidthValue = typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`;\n const maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);\n return /*#__PURE__*/React.createElement(Box, {\n as: \"span\",\n backgroundColor: backgroundColors[appearanceStyle][appearanceType],\n style: {\n backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,\n maxWidth: maxWidthIsPc ? maxWidth : '100%'\n },\n paddingInline: \"space.050\",\n xcss: baseStyles,\n testId: testId\n }, /*#__PURE__*/React.createElement(Text, {\n fontSize: \"size.050\",\n fontWeight: \"bold\",\n lineHeight: \"lineHeight.100\",\n textTransform: \"uppercase\",\n color: textColors[appearanceStyle][appearanceType],\n shouldTruncate: true,\n UNSAFE_style: {\n color: style === null || style === void 0 ? void 0 : style.color,\n // to negate paddingInline specified on Box above\n maxWidth: maxWidthIsPc ? '100%' : `calc(${maxWidthValue} - ${\"var(--ds-space-100, 8px)\"})`\n },\n testId: testId && `${testId}--text`\n }, children));\n});\nLozenge.displayName = 'Lozenge';\nexport default Lozenge;\n\n// Lozenge colors\nconst backgroundColors = {\n bold: {\n default: 'color.background.neutral.bold',\n inprogress: 'color.background.information.bold',\n moved: 'color.background.warning.bold',\n new: 'color.background.discovery.bold',\n removed: 'color.background.danger.bold',\n success: 'color.background.success.bold'\n },\n subtle: {\n default: 'color.background.neutral',\n inprogress: 'color.background.information',\n moved: 'color.background.warning',\n new: 'color.background.discovery',\n removed: 'color.background.danger',\n success: 'color.background.success'\n }\n};\nconst textColors = {\n bold: {\n default: 'inverse',\n inprogress: 'inverse',\n moved: 'warning.inverse',\n new: 'inverse',\n removed: 'inverse',\n success: 'inverse'\n },\n subtle: {\n default: 'subtle',\n inprogress: 'information',\n moved: 'warning',\n new: 'discovery',\n removed: 'danger',\n success: 'success'\n }\n};","/**\n * These are the default parameters for LogoProps if the user does not specify values.\n */\nexport const defaultLogoParams = {\n iconColor: 'inherit',\n iconGradientStart: 'inherit',\n iconGradientStop: 'inherit',\n label: '',\n size: 'medium',\n textColor: 'currentColor'\n};\n\n/**\n * The props for the that takes the svg and turns it into a component.\n */\n\nexport const sizes = {\n xsmall: 16,\n small: 24,\n medium: 32,\n large: 40,\n xlarge: 48\n};\n\n/**\n * In order to pass linting rules, these props were renamed to be more descriptive i.e. props renamed to LogoProps and\n * defaultParams to defaultLogoParams. However, this is a breaking change as it is a file with public entry points. The code\n * below is here to keep Logo backwards compatible.\n * See the ticket here: https://product-fabric.atlassian.net/browse/DSP-4086.\n *\n * Note that some consumers are accessing this using like so: import { Props } from '@atlaskit/logo/constants', this should\n * still work despite `LogoProps` being in a different types.tsx file.\n *\n */\n\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-175 Internal documentation for deprecation (no external access)} This has been renamed, please import `LogoProps` instead.\n */\n// eslint-disable-next-line @repo/internal/react/consistent-types-definitions\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-176 Internal documentation for deprecation (no external access)} This has been renamed, please import `defaultLogoParams` instead.\n */\nexport const DefaultProps = defaultLogoParams;","import deprecationWarning from '@atlaskit/ds-lib/deprecation-warning';\nimport { B200, N30A, skeleton as skeletonColor } from './colors';\nexport const CHANNEL = '__ATLASKIT_THEME__';\nexport const DEFAULT_THEME_MODE = 'light';\nexport const THEME_MODES = ['light', 'dark'];\n\n/*\n These theme values are expressed as functions so that if we decide to make\n them dependent on props in the future, it wouldn't require a significant\n refactor everywhere they are being used.\n*/\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * @deprecated Use `token('border.radius', '3px')` instead.\n */\nexport const borderRadius = () => 3;\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * @deprecated Use `token('space.100', '8px')` instead with any of the space tokens.\n * Available space tokens can be found on {@link https://atlassian.design/foundations/spacing/#scale}\n */\nexport const gridSize = () => 8;\nexport const fontSize = () => 14;\nexport const fontSizeSmall = () => 11;\nexport const fontFamily = () => `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`;\nexport const codeFontFamily = () => `'SFMono-Medium', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace`;\n\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * Please use `@atlaskit/focus-ring` instead.\n */\nexport const focusRing = (color = `var(--ds-border-focused, ${B200})`, outlineWidth = gridSize() / 4) => {\n deprecationWarning('@atlaskit/theme', 'focus ring mixin', 'Please use `@atlaskit/focus-ring` instead.');\n return `\n &:focus {\n outline: none;\n box-shadow: 0px 0px 0px ${outlineWidth}px ${color};\n }\n`;\n};\n\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * Please use `@atlaskit/focus-ring` instead.\n */\nexport const noFocusRing = () => `\n box-shadow: none;\n`;\nexport const layers = {\n card: () => 100,\n navigation: () => 200,\n dialog: () => 300,\n layer: () => 400,\n blanket: () => 500,\n modal: () => 510,\n flag: () => 600,\n spotlight: () => 700,\n tooltip: () => 9999\n};\n\n// eslint-disable-next-line @atlaskit/design-system/use-visually-hidden\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * Please use `@atlaskit/visually-hidden`\n */\nexport const visuallyHidden = () => {\n deprecationWarning('@atlaskit/theme', 'visually hidden mixin', 'Please use `@atlaskit/visually-hidden` instead.');\n return {\n border: '0 !important',\n clip: 'rect(1px, 1px, 1px, 1px) !important',\n height: '1px !important',\n overflow: 'hidden !important',\n padding: '0 !important',\n position: 'absolute !important',\n width: '1px !important',\n whiteSpace: 'nowrap !important'\n };\n};\n\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * Please use `@atlaskit/visually-hidden`\n */\nexport const assistive = visuallyHidden;\n\n/**\n * These styles are mirrored in:\n * packages/design-system/menu/src/internal/components/skeleton-shimmer.tsx\n *\n * Please update both.\n */\nexport const skeletonShimmer = () => ({\n css: {\n backgroundColor: `var(--ds-skeleton, ${skeletonColor()})`,\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n animationDirection: 'alternate'\n },\n keyframes: {\n from: {\n backgroundColor: `var(--ds-skeleton, ${skeletonColor()})`\n },\n to: {\n backgroundColor: `var(--ds-skeleton-subtle, ${N30A})`\n }\n }\n});","import { CHANNEL, DEFAULT_THEME_MODE, THEME_MODES } from '../constants';\n// Resolves the different types of theme objects in the current API\nexport default function getTheme(props) {\n if (props && props.theme) {\n // Theme is the global Atlaskit theme\n if (CHANNEL in props.theme) {\n return props.theme[CHANNEL];\n }\n // User has provided alternative modes\n else if ('mode' in props.theme && THEME_MODES.includes(props.theme.mode)) {\n return props.theme;\n }\n }\n // If format not supported (or no theme provided), return standard theme\n return {\n mode: DEFAULT_THEME_MODE\n };\n}","/* eslint-disable prefer-rest-params */\n\nimport getTheme from './get-theme';\n// Unpack custom variants, and get correct value for the current theme\nfunction themedVariants(variantProp, variants) {\n return props => {\n const theme = getTheme(props);\n if (props && props[variantProp] && variants) {\n const modes = variants[props[variantProp]];\n if (modes && modes[theme.mode]) {\n const value = modes[theme.mode];\n if (value) {\n return value;\n } // TS believes value can be undefined\n }\n }\n\n return '';\n };\n}\nexport default function themed(modesOrVariant, variantModes) {\n if (typeof modesOrVariant === 'string') {\n return themedVariants(modesOrVariant, variantModes);\n }\n const modes = modesOrVariant;\n return props => {\n // Get theme from the user's props\n const theme = getTheme(props);\n // User isn't required to provide both light and dark values\n if (theme.mode in modes) {\n const value = modes[theme.mode]; // TS believes value can be undefined\n if (value) {\n return value;\n }\n }\n return '';\n };\n}","/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */\n\nimport themed from './utils/themed';\n\n// Reds\nexport const R50 = '#FFEBE6';\nexport const R75 = '#FFBDAD';\nexport const R100 = '#FF8F73';\nexport const R200 = '#FF7452';\nexport const R300 = '#FF5630';\nexport const R400 = '#DE350B';\nexport const R500 = '#BF2600';\n\n// Yellows\nexport const Y50 = '#FFFAE6';\nexport const Y75 = '#FFF0B3';\nexport const Y100 = '#FFE380';\nexport const Y200 = '#FFC400';\nexport const Y300 = '#FFAB00';\nexport const Y400 = '#FF991F';\nexport const Y500 = '#FF8B00';\n\n// Greens\nexport const G50 = '#E3FCEF';\nexport const G75 = '#ABF5D1';\nexport const G100 = '#79F2C0';\nexport const G200 = '#57D9A3';\nexport const G300 = '#36B37E';\nexport const G400 = '#00875A';\nexport const G500 = '#006644';\n\n// Blues\nexport const B50 = '#DEEBFF';\nexport const B75 = '#B3D4FF';\nexport const B100 = '#4C9AFF';\nexport const B200 = '#2684FF';\nexport const B300 = '#0065FF';\nexport const B400 = '#0052CC';\nexport const B500 = '#0747A6';\n\n// Purples\nexport const P50 = '#EAE6FF';\nexport const P75 = '#C0B6F2';\nexport const P100 = '#998DD9';\nexport const P200 = '#8777D9';\nexport const P300 = '#6554C0';\nexport const P400 = '#5243AA';\nexport const P500 = '#403294';\n\n// Teals\nexport const T50 = '#E6FCFF';\nexport const T75 = '#B3F5FF';\nexport const T100 = '#79E2F2';\nexport const T200 = '#00C7E6';\nexport const T300 = '#00B8D9';\nexport const T400 = '#00A3BF';\nexport const T500 = '#008DA6';\n\n// Neutrals\nexport const N0 = '#FFFFFF';\nexport const N10 = '#FAFBFC';\nexport const N20 = '#F4F5F7';\nexport const N30 = '#EBECF0';\nexport const N40 = '#DFE1E6';\nexport const N50 = '#C1C7D0';\nexport const N60 = '#B3BAC5';\nexport const N70 = '#A5ADBA';\nexport const N80 = '#97A0AF';\nexport const N90 = '#8993A4';\nexport const N100 = '#7A869A';\nexport const N200 = '#6B778C';\nexport const N300 = '#5E6C84';\nexport const N400 = '#505F79';\nexport const N500 = '#42526E';\nexport const N600 = '#344563';\nexport const N700 = '#253858';\nexport const N800 = '#172B4D';\n\n// ATTENTION: update the tints if you update this\nexport const N900 = '#091E42';\n\n// Each tint is made of N900 and an alpha channel\nexport const N10A = 'rgba(9, 30, 66, 0.02)';\nexport const N20A = 'rgba(9, 30, 66, 0.04)';\nexport const N30A = 'rgba(9, 30, 66, 0.08)';\nexport const N40A = 'rgba(9, 30, 66, 0.13)';\nexport const N50A = 'rgba(9, 30, 66, 0.25)';\nexport const N60A = 'rgba(9, 30, 66, 0.31)';\nexport const N70A = 'rgba(9, 30, 66, 0.36)';\nexport const N80A = 'rgba(9, 30, 66, 0.42)';\nexport const N90A = 'rgba(9, 30, 66, 0.48)';\nexport const N100A = 'rgba(9, 30, 66, 0.54)';\nexport const N200A = 'rgba(9, 30, 66, 0.60)';\nexport const N300A = 'rgba(9, 30, 66, 0.66)';\nexport const N400A = 'rgba(9, 30, 66, 0.71)';\nexport const N500A = 'rgba(9, 30, 66, 0.77)';\nexport const N600A = 'rgba(9, 30, 66, 0.82)';\nexport const N700A = 'rgba(9, 30, 66, 0.89)';\nexport const N800A = 'rgba(9, 30, 66, 0.95)';\n\n// Dark Mode Neutrals\nexport const DN900 = '#E6EDFA';\nexport const DN800 = '#DCE5F5';\nexport const DN700 = '#CED9EB';\nexport const DN600 = '#B8C7E0';\nexport const DN500 = '#ABBBD6';\nexport const DN400 = '#9FB0CC';\nexport const DN300 = '#8C9CB8';\nexport const DN200 = '#7988A3';\nexport const DN100 = '#67758F';\nexport const DN90 = '#56637A';\nexport const DN80 = '#455166';\nexport const DN70 = '#3B475C';\nexport const DN60 = '#313D52';\nexport const DN50 = '#283447';\nexport const DN40 = '#202B3D';\nexport const DN30 = '#1B2638';\nexport const DN20 = '#121A29';\nexport const DN10 = '#0E1624';\n\n// ATTENTION: update the tints if you update this\nexport const DN0 = '#0D1424';\n\n// Each dark tint is made of DN0 and an alpha channel\nexport const DN800A = 'rgba(13, 20, 36, 0.06)';\nexport const DN700A = 'rgba(13, 20, 36, 0.14)';\nexport const DN600A = 'rgba(13, 20, 36, 0.18)';\nexport const DN500A = 'rgba(13, 20, 36, 0.29)';\nexport const DN400A = 'rgba(13, 20, 36, 0.36)';\nexport const DN300A = 'rgba(13, 20, 36, 0.40)';\nexport const DN200A = 'rgba(13, 20, 36, 0.47)';\nexport const DN100A = 'rgba(13, 20, 36, 0.53)';\nexport const DN90A = 'rgba(13, 20, 36, 0.63)';\nexport const DN80A = 'rgba(13, 20, 36, 0.73)';\nexport const DN70A = 'rgba(13, 20, 36, 0.78)';\nexport const DN60A = 'rgba(13, 20, 36, 0.81)';\nexport const DN50A = 'rgba(13, 20, 36, 0.85)';\nexport const DN40A = 'rgba(13, 20, 36, 0.89)';\nexport const DN30A = 'rgba(13, 20, 36, 0.92)';\nexport const DN20A = 'rgba(13, 20, 36, 0.95)';\nexport const DN10A = 'rgba(13, 20, 36, 0.97)';\n\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * @deprecated use `token('elevation.surface')` instead.\n */\nexport const background = themed({\n light: `var(--ds-surface, ${N0})`,\n dark: `var(--ds-surface, ${DN30})`\n});\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * @deprecated use `token('color.background.selected')` instead.\n */\nexport const backgroundActive = themed({\n light: `var(--ds-background-selected, ${B50})`,\n dark: `var(--ds-background-selected, ${B75})`\n});\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * @deprecated use `token('color.background.neutral.hovered')` instead.\n */\nexport const backgroundHover = themed({\n light: `var(--ds-background-neutral-hovered, ${N30})`,\n dark: `var(--ds-background-neutral-hovered, ${DN70})`\n});\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * @deprecated use `token('elevation.surface.overlay')` instead.\n */\nexport const backgroundOnLayer = themed({\n light: `var(--ds-surface-overlay, ${N0})`,\n dark: `var(--ds-surface-overlay, ${DN50})`\n});\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * @deprecated use `token('color.text')` instead.\n */\nexport const text = themed({\n light: `var(--ds-text, ${N900})`,\n dark: `var(--ds-text, ${DN600})`\n});\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * @deprecated use `token('color.text')` instead.\n */\nexport const textHover = themed({\n light: `var(--ds-text, ${N800})`,\n dark: `var(--ds-text, ${DN600})`\n});\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * @deprecated use `token('color.text.selected')` instead.\n */\nexport const textActive = themed({\n light: `var(--ds-text-selected, ${B400})`,\n dark: `var(--ds-text-selected, ${B400})`\n});\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * @deprecated use `token('color.text.subtlest')` instead.\n */\nexport const subtleText = themed({\n light: `var(--ds-text-subtlest, ${N200})`,\n dark: `var(--ds-text-subtlest, ${DN300})`\n});\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * @deprecated use token('color.text.subtlest', N200) instead. Use DN200 as the fallback color for dark mode.\n */\nexport const placeholderText = themed({\n light: `var(--ds-text-subtlest, ${N200})`,\n dark: `var(--ds-text-subtlest, ${DN200})`\n});\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * @deprecated use `token('color.text')` instead.\n */\nexport const heading = themed({\n light: `var(--ds-text, ${N800})`,\n dark: `var(--ds-text, ${DN600})`\n});\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * @deprecated use `token('color.text.subtlest')` instead.\n */\nexport const subtleHeading = themed({\n light: `var(--ds-text-subtlest, ${N200})`,\n dark: `var(--ds-text-subtlest, ${DN300})`\n});\nexport const codeBlock = themed({\n light: N20,\n dark: DN50\n});\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * @deprecated use `token('color.link')` instead.\n */\nexport const link = themed({\n light: `var(--ds-link, ${B400})`,\n dark: `var(--ds-link, ${B100})`\n});\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * @deprecated use `token('color.link.pressed')` instead.\n */\nexport const linkHover = themed({\n light: `var(--ds-link-pressed, ${B300})`,\n dark: `var(--ds-link-pressed, ${B200})`\n});\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * @deprecated use `token('color.link.pressed')` instead.\n */\nexport const linkActive = themed({\n light: `var(--ds-link-pressed, ${B500})`,\n dark: `var(--ds-link-pressed, ${B100})`\n});\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * @deprecated use `token('color.border.focused', B200)` instead.\n */\nexport const linkOutline = themed({\n light: `var(--ds-border-focused, ${B200})`,\n dark: `var(--ds-border-focused, ${B200})`\n});\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * @deprecated use `token('color.background.brand.bold')` instead.\n */\nexport const primary = themed({\n light: `var(--ds-background-brand-bold, ${B400})`,\n dark: `var(--ds-background-brand-bold, ${B100})`\n});\nexport const blue = themed({\n light: B400,\n dark: B100\n});\nexport const teal = themed({\n light: T300,\n dark: T200\n});\nexport const purple = themed({\n light: P300,\n dark: P100\n});\nexport const red = themed({\n light: R300,\n dark: R300\n});\nexport const yellow = themed({\n light: Y300,\n dark: Y300\n});\nexport const green = themed({\n light: G300,\n dark: G300\n});\n\n/**\n * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}\n * @deprecated use `token('color.skeleton')` instead.\n */\nexport const skeleton = () => `var(--ds-skeleton, ${N20A})`;","/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */\nimport { B200, B400, N0, N100, N400, N50, N600, N800 } from '@atlaskit/theme/colors';\n// TODO: This is where we need to add tokens for all appearance color values\nexport const getColorsFromAppearance = appearance => {\n let iconGradientStart, iconGradientStop, iconColor, textColor, atlassianLogoTextColor;\n switch (appearance) {\n case 'brand':\n iconGradientStart = B400;\n iconGradientStop = B200;\n iconColor = B200;\n textColor = `var(--ds-text, ${N800})`;\n // This is only used for the top level Atlassian wordmark (see AtlassianLogo\n // or AtlassianStartLogo for example), and is only different for the Brand\n // appearance - a bold brand color. For other appearances,\n // atlassianLogoTextColor is the same as textColor.\n atlassianLogoTextColor = B400;\n break;\n case 'neutral':\n iconGradientStart = N600;\n iconGradientStop = N100;\n iconColor = N100;\n textColor = N400;\n atlassianLogoTextColor = N400;\n break;\n case 'inverse':\n iconGradientStart = N50;\n iconGradientStop = N0;\n iconColor = N0;\n textColor = `var(--ds-text-inverse, ${N0})`;\n atlassianLogoTextColor = `var(--ds-text-inverse, ${N0})`;\n break;\n }\n return {\n iconGradientStart,\n iconGradientStop,\n iconColor,\n textColor,\n atlassianLogoTextColor\n };\n};","import * as React from 'react';\nimport { useContext, forwardRef } from 'react';\nimport createCache from '@emotion/cache';\nimport _extends from '@babel/runtime/helpers/esm/extends';\nimport weakMemoize from '@emotion/weak-memoize';\nimport hoistNonReactStatics from '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js';\nimport { getRegisteredStyles, registerStyles, insertStyles } from '@emotion/utils';\nimport { serializeStyles } from '@emotion/serialize';\nimport { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';\n\nvar isBrowser = \"object\" !== 'undefined';\nvar hasOwnProperty = {}.hasOwnProperty;\n\nvar EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case\n// because this module is primarily intended for the browser and node\n// but it's also required in react native and similar environments sometimes\n// and we could have a special build just for that\n// but this is much easier and the native packages\n// might use a different theme context in the future anyway\ntypeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({\n key: 'css'\n}) : null);\n\nif (process.env.NODE_ENV !== 'production') {\n EmotionCacheContext.displayName = 'EmotionCacheContext';\n}\n\nvar CacheProvider = EmotionCacheContext.Provider;\nvar __unsafe_useEmotionCache = function useEmotionCache() {\n return useContext(EmotionCacheContext);\n};\n\nvar withEmotionCache = function withEmotionCache(func) {\n // $FlowFixMe\n return /*#__PURE__*/forwardRef(function (props, ref) {\n // the cache will never be null in the browser\n var cache = useContext(EmotionCacheContext);\n return func(props, cache, ref);\n });\n};\n\nif (!isBrowser) {\n withEmotionCache = function withEmotionCache(func) {\n return function (props) {\n var cache = useContext(EmotionCacheContext);\n\n if (cache === null) {\n // yes, we're potentially creating this on every render\n // it doesn't actually matter though since it's only on the server\n // so there will only every be a single render\n // that could change in the future because of suspense and etc. but for now,\n // this works and i don't want to optimise for a future thing that we aren't sure about\n cache = createCache({\n key: 'css'\n });\n return /*#__PURE__*/React.createElement(EmotionCacheContext.Provider, {\n value: cache\n }, func(props, cache));\n } else {\n return func(props, cache);\n }\n };\n };\n}\n\nvar ThemeContext = /* #__PURE__ */React.createContext({});\n\nif (process.env.NODE_ENV !== 'production') {\n ThemeContext.displayName = 'EmotionThemeContext';\n}\n\nvar useTheme = function useTheme() {\n return React.useContext(ThemeContext);\n};\n\nvar getTheme = function getTheme(outerTheme, theme) {\n if (typeof theme === 'function') {\n var mergedTheme = theme(outerTheme);\n\n if (process.env.NODE_ENV !== 'production' && (mergedTheme == null || typeof mergedTheme !== 'object' || Array.isArray(mergedTheme))) {\n throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!');\n }\n\n return mergedTheme;\n }\n\n if (process.env.NODE_ENV !== 'production' && (theme == null || typeof theme !== 'object' || Array.isArray(theme))) {\n throw new Error('[ThemeProvider] Please make your theme prop a plain object');\n }\n\n return _extends({}, outerTheme, theme);\n};\n\nvar createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {\n return weakMemoize(function (theme) {\n return getTheme(outerTheme, theme);\n });\n});\nvar ThemeProvider = function ThemeProvider(props) {\n var theme = React.useContext(ThemeContext);\n\n if (props.theme !== theme) {\n theme = createCacheWithTheme(theme)(props.theme);\n }\n\n return /*#__PURE__*/React.createElement(ThemeContext.Provider, {\n value: theme\n }, props.children);\n};\nfunction withTheme(Component) {\n var componentName = Component.displayName || Component.name || 'Component';\n\n var render = function render(props, ref) {\n var theme = React.useContext(ThemeContext);\n return /*#__PURE__*/React.createElement(Component, _extends({\n theme: theme,\n ref: ref\n }, props));\n }; // $FlowFixMe\n\n\n var WithTheme = /*#__PURE__*/React.forwardRef(render);\n WithTheme.displayName = \"WithTheme(\" + componentName + \")\";\n return hoistNonReactStatics(WithTheme, Component);\n}\n\nvar getLastPart = function getLastPart(functionName) {\n // The match may be something like 'Object.createEmotionProps' or\n // 'Loader.prototype.render'\n var parts = functionName.split('.');\n return parts[parts.length - 1];\n};\n\nvar getFunctionNameFromStackTraceLine = function getFunctionNameFromStackTraceLine(line) {\n // V8\n var match = /^\\s+at\\s+([A-Za-z0-9$.]+)\\s/.exec(line);\n if (match) return getLastPart(match[1]); // Safari / Firefox\n\n match = /^([A-Za-z0-9$.]+)@/.exec(line);\n if (match) return getLastPart(match[1]);\n return undefined;\n};\n\nvar internalReactFunctionNames = /* #__PURE__ */new Set(['renderWithHooks', 'processChild', 'finishClassComponent', 'renderToString']); // These identifiers come from error stacks, so they have to be valid JS\n// identifiers, thus we only need to replace what is a valid character for JS,\n// but not for CSS.\n\nvar sanitizeIdentifier = function sanitizeIdentifier(identifier) {\n return identifier.replace(/\\$/g, '-');\n};\n\nvar getLabelFromStackTrace = function getLabelFromStackTrace(stackTrace) {\n if (!stackTrace) return undefined;\n var lines = stackTrace.split('\\n');\n\n for (var i = 0; i < lines.length; i++) {\n var functionName = getFunctionNameFromStackTraceLine(lines[i]); // The first line of V8 stack traces is just \"Error\"\n\n if (!functionName) continue; // If we reach one of these, we have gone too far and should quit\n\n if (internalReactFunctionNames.has(functionName)) break; // The component name is the first function in the stack that starts with an\n // uppercase letter\n\n if (/^[A-Z]/.test(functionName)) return sanitizeIdentifier(functionName);\n }\n\n return undefined;\n};\n\nvar typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';\nvar labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';\nvar createEmotionProps = function createEmotionProps(type, props) {\n if (process.env.NODE_ENV !== 'production' && typeof props.css === 'string' && // check if there is a css declaration\n props.css.indexOf(':') !== -1) {\n throw new Error(\"Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css`\" + props.css + \"`\");\n }\n\n var newProps = {};\n\n for (var key in props) {\n if (hasOwnProperty.call(props, key)) {\n newProps[key] = props[key];\n }\n }\n\n newProps[typePropName] = type; // For performance, only call getLabelFromStackTrace in development and when\n // the label hasn't already been computed\n\n if (process.env.NODE_ENV !== 'production' && !!props.css && (typeof props.css !== 'object' || typeof props.css.name !== 'string' || props.css.name.indexOf('-') === -1)) {\n var label = getLabelFromStackTrace(new Error().stack);\n if (label) newProps[labelPropName] = label;\n }\n\n return newProps;\n};\n\nvar Insertion = function Insertion(_ref) {\n var cache = _ref.cache,\n serialized = _ref.serialized,\n isStringTag = _ref.isStringTag;\n registerStyles(cache, serialized, isStringTag);\n useInsertionEffectAlwaysWithSyncFallback(function () {\n return insertStyles(cache, serialized, isStringTag);\n });\n\n return null;\n};\n\nvar Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {\n var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works\n // not passing the registered cache to serializeStyles because it would\n // make certain babel optimisations not possible\n\n if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {\n cssProp = cache.registered[cssProp];\n }\n\n var WrappedComponent = props[typePropName];\n var registeredStyles = [cssProp];\n var className = '';\n\n if (typeof props.className === 'string') {\n className = getRegisteredStyles(cache.registered, registeredStyles, props.className);\n } else if (props.className != null) {\n className = props.className + \" \";\n }\n\n var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext));\n\n if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {\n var labelFromStack = props[labelPropName];\n\n if (labelFromStack) {\n serialized = serializeStyles([serialized, 'label:' + labelFromStack + ';']);\n }\n }\n\n className += cache.key + \"-\" + serialized.name;\n var newProps = {};\n\n for (var key in props) {\n if (hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && (process.env.NODE_ENV === 'production' || key !== labelPropName)) {\n newProps[key] = props[key];\n }\n }\n\n newProps.ref = ref;\n newProps.className = className;\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {\n cache: cache,\n serialized: serialized,\n isStringTag: typeof WrappedComponent === 'string'\n }), /*#__PURE__*/React.createElement(WrappedComponent, newProps));\n});\n\nif (process.env.NODE_ENV !== 'production') {\n Emotion.displayName = 'EmotionCssPropInternal';\n}\n\nvar Emotion$1 = Emotion;\n\nexport { CacheProvider as C, Emotion$1 as E, ThemeContext as T, __unsafe_useEmotionCache as _, ThemeProvider as a, withTheme as b, createEmotionProps as c, hasOwnProperty as h, isBrowser as i, useTheme as u, withEmotionCache as w };\n","import { h as hasOwnProperty, E as Emotion, c as createEmotionProps, w as withEmotionCache, T as ThemeContext, i as isBrowser$1 } from './emotion-element-c39617d8.browser.esm.js';\nexport { C as CacheProvider, T as ThemeContext, a as ThemeProvider, _ as __unsafe_useEmotionCache, u as useTheme, w as withEmotionCache, b as withTheme } from './emotion-element-c39617d8.browser.esm.js';\nimport * as React from 'react';\nimport { insertStyles, registerStyles, getRegisteredStyles } from '@emotion/utils';\nimport { useInsertionEffectWithLayoutFallback, useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';\nimport { serializeStyles } from '@emotion/serialize';\nimport '@emotion/cache';\nimport '@babel/runtime/helpers/extends';\nimport '@emotion/weak-memoize';\nimport '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js';\nimport 'hoist-non-react-statics';\n\nvar pkg = {\n\tname: \"@emotion/react\",\n\tversion: \"11.11.1\",\n\tmain: \"dist/emotion-react.cjs.js\",\n\tmodule: \"dist/emotion-react.esm.js\",\n\tbrowser: {\n\t\t\"./dist/emotion-react.esm.js\": \"./dist/emotion-react.browser.esm.js\"\n\t},\n\texports: {\n\t\t\".\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./dist/emotion-react.worker.esm.js\",\n\t\t\t\tbrowser: \"./dist/emotion-react.browser.esm.js\",\n\t\t\t\t\"default\": \"./dist/emotion-react.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./dist/emotion-react.cjs.mjs\",\n\t\t\t\"default\": \"./dist/emotion-react.cjs.js\"\n\t\t},\n\t\t\"./jsx-runtime\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./jsx-runtime/dist/emotion-react-jsx-runtime.worker.esm.js\",\n\t\t\t\tbrowser: \"./jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js\",\n\t\t\t\t\"default\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.mjs\",\n\t\t\t\"default\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js\"\n\t\t},\n\t\t\"./_isolated-hnrs\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.worker.esm.js\",\n\t\t\t\tbrowser: \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js\",\n\t\t\t\t\"default\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.mjs\",\n\t\t\t\"default\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.js\"\n\t\t},\n\t\t\"./jsx-dev-runtime\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.worker.esm.js\",\n\t\t\t\tbrowser: \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.esm.js\",\n\t\t\t\t\"default\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.mjs\",\n\t\t\t\"default\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.js\"\n\t\t},\n\t\t\"./package.json\": \"./package.json\",\n\t\t\"./types/css-prop\": \"./types/css-prop.d.ts\",\n\t\t\"./macro\": {\n\t\t\ttypes: {\n\t\t\t\t\"import\": \"./macro.d.mts\",\n\t\t\t\t\"default\": \"./macro.d.ts\"\n\t\t\t},\n\t\t\t\"default\": \"./macro.js\"\n\t\t}\n\t},\n\ttypes: \"types/index.d.ts\",\n\tfiles: [\n\t\t\"src\",\n\t\t\"dist\",\n\t\t\"jsx-runtime\",\n\t\t\"jsx-dev-runtime\",\n\t\t\"_isolated-hnrs\",\n\t\t\"types/*.d.ts\",\n\t\t\"macro.*\"\n\t],\n\tsideEffects: false,\n\tauthor: \"Emotion Contributors\",\n\tlicense: \"MIT\",\n\tscripts: {\n\t\t\"test:typescript\": \"dtslint types\"\n\t},\n\tdependencies: {\n\t\t\"@babel/runtime\": \"^7.18.3\",\n\t\t\"@emotion/babel-plugin\": \"^11.11.0\",\n\t\t\"@emotion/cache\": \"^11.11.0\",\n\t\t\"@emotion/serialize\": \"^1.1.2\",\n\t\t\"@emotion/use-insertion-effect-with-fallbacks\": \"^1.0.1\",\n\t\t\"@emotion/utils\": \"^1.2.1\",\n\t\t\"@emotion/weak-memoize\": \"^0.3.1\",\n\t\t\"hoist-non-react-statics\": \"^3.3.1\"\n\t},\n\tpeerDependencies: {\n\t\treact: \">=16.8.0\"\n\t},\n\tpeerDependenciesMeta: {\n\t\t\"@types/react\": {\n\t\t\toptional: true\n\t\t}\n\t},\n\tdevDependencies: {\n\t\t\"@definitelytyped/dtslint\": \"0.0.112\",\n\t\t\"@emotion/css\": \"11.11.0\",\n\t\t\"@emotion/css-prettifier\": \"1.1.3\",\n\t\t\"@emotion/server\": \"11.11.0\",\n\t\t\"@emotion/styled\": \"11.11.0\",\n\t\t\"html-tag-names\": \"^1.1.2\",\n\t\treact: \"16.14.0\",\n\t\t\"svg-tag-names\": \"^1.1.1\",\n\t\ttypescript: \"^4.5.5\"\n\t},\n\trepository: \"https://github.com/emotion-js/emotion/tree/main/packages/react\",\n\tpublishConfig: {\n\t\taccess: \"public\"\n\t},\n\t\"umd:main\": \"dist/emotion-react.umd.min.js\",\n\tpreconstruct: {\n\t\tentrypoints: [\n\t\t\t\"./index.js\",\n\t\t\t\"./jsx-runtime.js\",\n\t\t\t\"./jsx-dev-runtime.js\",\n\t\t\t\"./_isolated-hnrs.js\"\n\t\t],\n\t\tumdName: \"emotionReact\",\n\t\texports: {\n\t\t\tenvConditions: [\n\t\t\t\t\"browser\",\n\t\t\t\t\"worker\"\n\t\t\t],\n\t\t\textra: {\n\t\t\t\t\"./types/css-prop\": \"./types/css-prop.d.ts\",\n\t\t\t\t\"./macro\": {\n\t\t\t\t\ttypes: {\n\t\t\t\t\t\t\"import\": \"./macro.d.mts\",\n\t\t\t\t\t\t\"default\": \"./macro.d.ts\"\n\t\t\t\t\t},\n\t\t\t\t\t\"default\": \"./macro.js\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n};\n\nvar jsx = function jsx(type, props) {\n var args = arguments;\n\n if (props == null || !hasOwnProperty.call(props, 'css')) {\n // $FlowFixMe\n return React.createElement.apply(undefined, args);\n }\n\n var argsLength = args.length;\n var createElementArgArray = new Array(argsLength);\n createElementArgArray[0] = Emotion;\n createElementArgArray[1] = createEmotionProps(type, props);\n\n for (var i = 2; i < argsLength; i++) {\n createElementArgArray[i] = args[i];\n } // $FlowFixMe\n\n\n return React.createElement.apply(null, createElementArgArray);\n};\n\nvar warnedAboutCssPropForGlobal = false; // maintain place over rerenders.\n// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild\n// initial client-side render from SSR, use place of hydrating tag\n\nvar Global = /* #__PURE__ */withEmotionCache(function (props, cache) {\n if (process.env.NODE_ENV !== 'production' && !warnedAboutCssPropForGlobal && ( // check for className as well since the user is\n // probably using the custom createElement which\n // means it will be turned into a className prop\n // $FlowFixMe I don't really want to add it to the type since it shouldn't be used\n props.className || props.css)) {\n console.error(\"It looks like you're using the css prop on Global, did you mean to use the styles prop instead?\");\n warnedAboutCssPropForGlobal = true;\n }\n\n var styles = props.styles;\n var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext));\n\n if (!isBrowser$1) {\n var _ref;\n\n var serializedNames = serialized.name;\n var serializedStyles = serialized.styles;\n var next = serialized.next;\n\n while (next !== undefined) {\n serializedNames += ' ' + next.name;\n serializedStyles += next.styles;\n next = next.next;\n }\n\n var shouldCache = cache.compat === true;\n var rules = cache.insert(\"\", {\n name: serializedNames,\n styles: serializedStyles\n }, cache.sheet, shouldCache);\n\n if (shouldCache) {\n return null;\n }\n\n return /*#__PURE__*/React.createElement(\"style\", (_ref = {}, _ref[\"data-emotion\"] = cache.key + \"-global \" + serializedNames, _ref.dangerouslySetInnerHTML = {\n __html: rules\n }, _ref.nonce = cache.sheet.nonce, _ref));\n } // yes, i know these hooks are used conditionally\n // but it is based on a constant that will never change at runtime\n // it's effectively like having two implementations and switching them out\n // so it's not actually breaking anything\n\n\n var sheetRef = React.useRef();\n useInsertionEffectWithLayoutFallback(function () {\n var key = cache.key + \"-global\"; // use case of https://github.com/emotion-js/emotion/issues/2675\n\n var sheet = new cache.sheet.constructor({\n key: key,\n nonce: cache.sheet.nonce,\n container: cache.sheet.container,\n speedy: cache.sheet.isSpeedy\n });\n var rehydrating = false; // $FlowFixMe\n\n var node = document.querySelector(\"style[data-emotion=\\\"\" + key + \" \" + serialized.name + \"\\\"]\");\n\n if (cache.sheet.tags.length) {\n sheet.before = cache.sheet.tags[0];\n }\n\n if (node !== null) {\n rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other s\n\n node.setAttribute('data-emotion', key);\n sheet.hydrate([node]);\n }\n\n sheetRef.current = [sheet, rehydrating];\n return function () {\n sheet.flush();\n };\n }, [cache]);\n useInsertionEffectWithLayoutFallback(function () {\n var sheetRefCurrent = sheetRef.current;\n var sheet = sheetRefCurrent[0],\n rehydrating = sheetRefCurrent[1];\n\n if (rehydrating) {\n sheetRefCurrent[1] = false;\n return;\n }\n\n if (serialized.next !== undefined) {\n // insert keyframes\n insertStyles(cache, serialized.next, true);\n }\n\n if (sheet.tags.length) {\n // if this doesn't exist then it will be null so the style element will be appended\n var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;\n sheet.before = element;\n sheet.flush();\n }\n\n cache.insert(\"\", serialized, sheet, false);\n }, [cache, serialized.name]);\n return null;\n});\n\nif (process.env.NODE_ENV !== 'production') {\n Global.displayName = 'EmotionGlobal';\n}\n\nfunction css() {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return serializeStyles(args);\n}\n\nvar keyframes = function keyframes() {\n var insertable = css.apply(void 0, arguments);\n var name = \"animation-\" + insertable.name; // $FlowFixMe\n\n return {\n name: name,\n styles: \"@keyframes \" + name + \"{\" + insertable.styles + \"}\",\n anim: 1,\n toString: function toString() {\n return \"_EMO_\" + this.name + \"_\" + this.styles + \"_EMO_\";\n }\n };\n};\n\nvar classnames = function classnames(args) {\n var len = args.length;\n var i = 0;\n var cls = '';\n\n for (; i < len; i++) {\n var arg = args[i];\n if (arg == null) continue;\n var toAdd = void 0;\n\n switch (typeof arg) {\n case 'boolean':\n break;\n\n case 'object':\n {\n if (Array.isArray(arg)) {\n toAdd = classnames(arg);\n } else {\n if (process.env.NODE_ENV !== 'production' && arg.styles !== undefined && arg.name !== undefined) {\n console.error('You have passed styles created with `css` from `@emotion/react` package to the `cx`.\\n' + '`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from component.');\n }\n\n toAdd = '';\n\n for (var k in arg) {\n if (arg[k] && k) {\n toAdd && (toAdd += ' ');\n toAdd += k;\n }\n }\n }\n\n break;\n }\n\n default:\n {\n toAdd = arg;\n }\n }\n\n if (toAdd) {\n cls && (cls += ' ');\n cls += toAdd;\n }\n }\n\n return cls;\n};\n\nfunction merge(registered, css, className) {\n var registeredStyles = [];\n var rawClassName = getRegisteredStyles(registered, registeredStyles, className);\n\n if (registeredStyles.length < 2) {\n return className;\n }\n\n return rawClassName + css(registeredStyles);\n}\n\nvar Insertion = function Insertion(_ref) {\n var cache = _ref.cache,\n serializedArr = _ref.serializedArr;\n useInsertionEffectAlwaysWithSyncFallback(function () {\n\n for (var i = 0; i < serializedArr.length; i++) {\n insertStyles(cache, serializedArr[i], false);\n }\n });\n\n return null;\n};\n\nvar ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {\n var hasRendered = false;\n var serializedArr = [];\n\n var css = function css() {\n if (hasRendered && process.env.NODE_ENV !== 'production') {\n throw new Error('css can only be used during render');\n }\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n var serialized = serializeStyles(args, cache.registered);\n serializedArr.push(serialized); // registration has to happen here as the result of this might get consumed by `cx`\n\n registerStyles(cache, serialized, false);\n return cache.key + \"-\" + serialized.name;\n };\n\n var cx = function cx() {\n if (hasRendered && process.env.NODE_ENV !== 'production') {\n throw new Error('cx can only be used during render');\n }\n\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n return merge(cache.registered, css, classnames(args));\n };\n\n var content = {\n css: css,\n cx: cx,\n theme: React.useContext(ThemeContext)\n };\n var ele = props.children(content);\n hasRendered = true;\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {\n cache: cache,\n serializedArr: serializedArr\n }), ele);\n});\n\nif (process.env.NODE_ENV !== 'production') {\n ClassNames.displayName = 'EmotionClassNames';\n}\n\nif (process.env.NODE_ENV !== 'production') {\n var isBrowser = \"object\" !== 'undefined'; // #1727, #2905 for some reason Jest and Vitest evaluate modules twice if some consuming module gets mocked\n\n var isTestEnv = typeof jest !== 'undefined' || typeof vi !== 'undefined';\n\n if (isBrowser && !isTestEnv) {\n // globalThis has wide browser support - https://caniuse.com/?search=globalThis, Node.js 12 and later\n var globalContext = // $FlowIgnore\n typeof globalThis !== 'undefined' ? globalThis // eslint-disable-line no-undef\n : isBrowser ? window : global;\n var globalKey = \"__EMOTION_REACT_\" + pkg.version.split('.')[0] + \"__\";\n\n if (globalContext[globalKey]) {\n console.warn('You are loading @emotion/react when it is already loaded. Running ' + 'multiple instances may cause problems. This can happen if multiple ' + 'versions are used, or if multiple builds of the same version are ' + 'used.');\n }\n\n globalContext[globalKey] = true;\n }\n}\n\nexport { ClassNames, Global, jsx as createElement, css, jsx, keyframes };\n","import _extends from \"@babel/runtime/helpers/extends\";\n/** @jsx jsx */\n\nimport { css, jsx } from '@emotion/react';\nimport { sizes } from './constants';\nconst CSS_VAR_COLOR = '--logo-color';\nconst CSS_VAR_FILL = '--logo-fill';\nconst baseWrapperStyles = css({\n display: 'inline-block',\n position: 'relative',\n color: `var(${CSS_VAR_COLOR})`,\n fill: `var(${CSS_VAR_FILL})`,\n lineHeight: 1,\n userSelect: 'none',\n whiteSpace: 'normal',\n // eslint-disable-next-line @atlaskit/design-system/no-nested-styles\n '> svg': {\n height: '100%',\n fill: 'inherit'\n }\n});\nconst stopColorStyles = css({\n // eslint-disable-next-line @atlaskit/design-system/no-nested-styles\n stop: {\n stopColor: 'currentColor'\n }\n});\nconst sizeStyles = Object.entries(sizes).reduce((acc, [key, val]) => {\n acc[key] = css({\n height: `${val}px`\n });\n return acc;\n}, {});\n\n/**\n * __Wrapper__\n *\n * An internal component used by `@atlaskit/logo` to render logo SVGs with correct styles.\n */\nconst Wrapper = ({\n label,\n svg,\n size,\n appearance,\n iconGradientStart,\n iconGradientStop,\n iconColor,\n textColor,\n testId: userDefinedTestId,\n ...rest\n}) => {\n const shouldApplyStopColor = iconGradientStart === 'inherit' && iconGradientStop === 'inherit' && appearance === undefined;\n const testId = userDefinedTestId && `${userDefinedTestId}--wrapper`;\n return jsx(\"span\", _extends({\n css: [baseWrapperStyles, shouldApplyStopColor && stopColorStyles, size && sizeStyles[size]],\n \"data-testid\": testId,\n style: {\n [CSS_VAR_COLOR]: iconColor,\n [CSS_VAR_FILL]: textColor\n },\n \"aria-label\": label ? label : undefined,\n role: label ? 'img' : undefined,\n dangerouslySetInnerHTML: {\n __html: svg\n }\n // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props\n }, rest));\n};\nexport default Wrapper;","/* eslint-disable max-len */\nimport React from 'react';\nimport { uid } from 'react-uid';\nimport { defaultLogoParams } from '../constants';\nimport { getColorsFromAppearance } from '../utils';\nimport Wrapper from '../wrapper';\nconst svg = ({\n appearance,\n iconGradientStart,\n iconGradientStop,\n iconColor\n}) => {\n let colors = {\n iconGradientStart,\n iconGradientStop,\n iconColor\n };\n // Will be fixed upon removal of deprecated iconGradientStart and\n // iconGradientStop props, or with React 18's useId() hook when we update.\n // eslint-disable-next-line @repo/internal/react/disallow-unstable-values\n let id = uid({\n iconGradientStart: iconGradientStop\n });\n if (appearance) {\n colors = getColorsFromAppearance(appearance);\n }\n return `\n `;\n};\n\n/**\n * __Jira software icon__\n *\n * The Jira Software icon without an accompanying wordmark.\n *\n * - [Examples](https://atlassian.design/components/logo/examples)\n * - [Code](https://atlassian.design/components/logo/code)\n * - [Usage](https://atlassian.design/components/logo/usage)\n */\nexport const JiraSoftwareIcon = ({\n appearance,\n label = 'Jira Software',\n size = defaultLogoParams.size,\n testId,\n iconColor = defaultLogoParams.iconColor,\n iconGradientStart = defaultLogoParams.iconGradientStart,\n iconGradientStop = defaultLogoParams.iconGradientStop,\n textColor = defaultLogoParams.textColor\n}) => {\n return /*#__PURE__*/React.createElement(Wrapper, {\n appearance: appearance,\n label: label,\n svg: svg({\n appearance,\n iconGradientStart,\n iconGradientStop,\n iconColor\n }),\n iconColor: iconColor,\n iconGradientStart: iconGradientStart,\n iconGradientStop: iconGradientStop,\n size: size,\n testId: testId,\n textColor: textColor\n });\n};","/* eslint-disable max-len */\nimport React from 'react';\nimport { uid } from 'react-uid';\nimport { defaultLogoParams } from '../constants';\nimport { getColorsFromAppearance } from '../utils';\nimport Wrapper from '../wrapper';\nconst svg = ({\n appearance,\n iconGradientStart,\n iconGradientStop,\n iconColor\n}) => {\n let colors = {\n iconGradientStart,\n iconGradientStop,\n iconColor\n };\n // Will be fixed upon removal of deprecated iconGradientStart and\n // iconGradientStop props, or with React 18's useId() hook when we update.\n // eslint-disable-next-line @repo/internal/react/disallow-unstable-values\n let id = uid({\n iconGradientStart: iconGradientStop\n });\n if (appearance) {\n colors = getColorsFromAppearance(appearance);\n }\n return `\n `;\n};\n\n/**\n * __Jira Service Management icon__\n *\n * The Jira Service Management icon without an accompanying wordmark.\n *\n * - [Examples](https://atlassian.design/components/logo/examples)\n * - [Code](https://atlassian.design/components/logo/code)\n * - [Usage](https://atlassian.design/components/logo/usage)\n */\nexport const JiraServiceManagementIcon = ({\n appearance,\n label = 'Jira Service Management',\n size = defaultLogoParams.size,\n testId,\n iconColor = defaultLogoParams.iconColor,\n iconGradientStart = defaultLogoParams.iconGradientStart,\n iconGradientStop = defaultLogoParams.iconGradientStop,\n textColor = defaultLogoParams.textColor\n}) => {\n return /*#__PURE__*/React.createElement(Wrapper, {\n appearance: appearance,\n label: label,\n svg: svg({\n appearance,\n iconGradientStart,\n iconGradientStop,\n iconColor\n }),\n iconColor: iconColor,\n iconGradientStart: iconGradientStart,\n iconGradientStop: iconGradientStop,\n size: size,\n testId: testId,\n textColor: textColor\n });\n};","/* eslint-disable max-len */\nimport React from 'react';\nimport { uid } from 'react-uid';\nimport { defaultLogoParams } from '../constants';\nimport { getColorsFromAppearance } from '../utils';\nimport Wrapper from '../wrapper';\nconst svg = ({\n appearance,\n iconGradientStart,\n iconGradientStop,\n iconColor\n}) => {\n let colors = {\n iconGradientStart,\n iconGradientStop,\n iconColor\n };\n // Will be fixed upon removal of deprecated iconGradientStart and\n // iconGradientStop props, or with React 18's useId() hook when we update.\n // eslint-disable-next-line @repo/internal/react/disallow-unstable-values\n let id = uid({\n iconGradientStart: iconGradientStop\n });\n if (appearance) {\n colors = getColorsFromAppearance(appearance);\n }\n return `\n \n \n \n \n \n \n \n `;\n};\n\n/**\n * __Jira Work Management icon__\n *\n * The Jira Work Management icon without an accompanying wordmark.\n *\n * - [Examples](https://atlassian.design/components/logo/examples)\n * - [Code](https://atlassian.design/components/logo/code)\n * - [Usage](https://atlassian.design/components/logo/usage)\n */\nexport const JiraWorkManagementIcon = ({\n appearance,\n label = 'Jira Work Management',\n size = defaultLogoParams.size,\n testId,\n iconColor = defaultLogoParams.iconColor,\n iconGradientStart = defaultLogoParams.iconGradientStart,\n iconGradientStop = defaultLogoParams.iconGradientStop,\n textColor = defaultLogoParams.textColor\n}) => {\n return /*#__PURE__*/React.createElement(Wrapper, {\n appearance: appearance,\n label: label,\n svg: svg({\n appearance,\n iconGradientStart,\n iconGradientStop,\n iconColor\n }),\n iconColor: iconColor,\n iconGradientStart: iconGradientStart,\n iconGradientStop: iconGradientStop,\n size: size,\n testId: testId,\n textColor: textColor\n });\n};","/* eslint-disable max-len */\nimport React from 'react';\nimport { uid } from 'react-uid';\nimport { defaultLogoParams } from '../constants';\nimport { getColorsFromAppearance } from '../utils';\nimport Wrapper from '../wrapper';\nconst svg = ({\n appearance,\n iconGradientStart,\n iconGradientStop,\n iconColor\n}) => {\n let colors = {\n iconGradientStart,\n iconGradientStop,\n iconColor\n };\n // Will be fixed upon removal of deprecated iconGradientStart and\n // iconGradientStop props, or with React 18's useId() hook when we update.\n // eslint-disable-next-line @repo/internal/react/disallow-unstable-values\n let id = uid({\n iconGradientStart: iconGradientStop\n });\n if (appearance) {\n colors = getColorsFromAppearance(appearance);\n }\n return `\n \n \n \n \n \n \n \n \n \n`;\n};\n\n/**\n * __Jira Product Discovery icon__\n *\n * The Jira Product Discovery icon without an accompanying wordmark.\n *\n * - [Examples](https://atlassian.design/components/logo/examples)\n * - [Code](https://atlassian.design/components/logo/code)\n * - [Usage](https://atlassian.design/components/logo/usage)\n */\nexport const JiraProductDiscoveryIcon = ({\n appearance,\n label = 'Jira Product Discovery',\n size = defaultLogoParams.size,\n testId,\n iconColor = defaultLogoParams.iconColor,\n iconGradientStart = defaultLogoParams.iconGradientStart,\n iconGradientStop = defaultLogoParams.iconGradientStop,\n textColor = defaultLogoParams.textColor\n}) => {\n return /*#__PURE__*/React.createElement(Wrapper, {\n appearance: appearance,\n label: label,\n svg: svg({\n appearance,\n iconGradientStart,\n iconGradientStop,\n iconColor\n }),\n iconColor: iconColor,\n iconGradientStart: iconGradientStart,\n iconGradientStop: iconGradientStop,\n size: size,\n testId: testId,\n textColor: textColor\n });\n};","/* eslint-disable max-len */\nimport React from 'react';\nimport { uid } from 'react-uid';\nimport { defaultLogoParams } from '../constants';\nimport { getColorsFromAppearance } from '../utils';\nimport Wrapper from '../wrapper';\nconst svg = ({\n appearance,\n iconGradientStart,\n iconGradientStop,\n iconColor\n}) => {\n let colors = {\n iconGradientStart,\n iconGradientStop,\n iconColor\n };\n // Will be fixed upon removal of deprecated iconGradientStart and\n // iconGradientStop props, or with React 18's useId() hook when we update.\n // eslint-disable-next-line @repo/internal/react/disallow-unstable-values\n let id = uid({\n iconGradientStart: iconGradientStop\n });\n if (appearance) {\n colors = getColorsFromAppearance(appearance);\n }\n return `\n `;\n};\n\n/**\n * __Confluence icon__\n *\n * The Confluence icon without an accompanying wordmark.\n *\n * - [Examples](https://atlassian.design/components/logo/examples)\n * - [Code](https://atlassian.design/components/logo/code)\n * - [Usage](https://atlassian.design/components/logo/usage)\n */\nexport const ConfluenceIcon = ({\n appearance,\n label = 'Confluence',\n size = defaultLogoParams.size,\n testId,\n iconColor = defaultLogoParams.iconColor,\n iconGradientStart = defaultLogoParams.iconGradientStart,\n iconGradientStop = defaultLogoParams.iconGradientStop,\n textColor = defaultLogoParams.textColor\n}) => {\n return /*#__PURE__*/React.createElement(Wrapper, {\n appearance: appearance,\n label: label,\n svg: svg({\n appearance,\n iconGradientStart,\n iconGradientStop,\n iconColor\n }),\n iconColor: iconColor,\n iconGradientStart: iconGradientStart,\n iconGradientStop: iconGradientStop,\n size: size,\n testId: testId,\n textColor: textColor\n });\n};","import {\n JiraSoftwareIcon,\n JiraServiceManagementIcon,\n JiraWorkManagementIcon,\n JiraProductDiscoveryIcon,\n ConfluenceIcon\n} from '@atlaskit/logo';\n\nexport interface Entitlement {\n entitlementId: string;\n siteName: string;\n productAndPlanName: string;\n productKey: ProductKey;\n daysLeftInTrial: number;\n}\n\nexport type Edition = 'free' | 'standard' | 'premium';\n\nexport interface Product {\n edition: Edition;\n trialEndDate: string;\n\n invoiceGroupId: string;\n ccpTransactionAccountId: string;\n ccpEntitlementId: string;\n}\n\nexport interface Site {\n hostname: string;\n products?: Record;\n}\n\nconst JSW_KEY = 'jira-software.ondemand';\nconst JSM_KEY = 'jira-servicedesk.ondemand';\nconst JWM_KEY = 'jira-core.ondemand';\nconst JPD_KEY = 'jira-product-discovery';\nconst CONFLUENCE_KEY = 'confluence.ondemand';\n\nexport type ProductKey =\n | typeof JSW_KEY\n | typeof JSM_KEY\n | typeof JWM_KEY\n | typeof JPD_KEY\n | typeof CONFLUENCE_KEY;\n\nexport const PRODUCT_NAME_BY_KEY = {\n [JSW_KEY]: 'Jira Software',\n [JSM_KEY]: 'Jira Service Management',\n [JWM_KEY]: 'Jira Work Management',\n [JPD_KEY]: 'Jira Product Discovery',\n [CONFLUENCE_KEY]: 'Confluence'\n};\n\nexport const PRODUCT_ICON_BY_KEY = {\n [JSW_KEY]: JiraSoftwareIcon,\n [JSM_KEY]: JiraServiceManagementIcon,\n [JWM_KEY]: JiraWorkManagementIcon,\n [JPD_KEY]: JiraProductDiscoveryIcon,\n [CONFLUENCE_KEY]: ConfluenceIcon\n};\n","import { css } from '@emotion/react';\nimport { wplToken } from '@atlassiansox/wpl-token';\nimport { getColor } from '@atlassiansox/wpl-utils';\n\nexport const containerStyle = css`\n padding: ${wplToken('space.300')} 0;\n\n &:first-child {\n padding-top: 0;\n }\n\n &:last-child {\n padding-bottom: 0;\n }\n\n &:not(:last-child) {\n border-bottom: 1px solid ${getColor('n50')};\n }\n`;\n\nexport const mainContentStyle = css`\n display: flex;\n align-items: start;\n font-size: 16px;\n font-weight: 600;\n margin: ${wplToken('space.100')} 0;\n line-height: 24px;\n`;\n\nexport const productTextStyle = css`\n display: flex;\n align-items: start;\n flex: 1 1 auto;\n`;\n\nexport const productNameStyle = css`\n text-transform: capitalize;\n display: inline-block;\n`;\n\nexport const totalCostStyle = css`\n text-align: right;\n flex-shrink: 0;\n`;\n\nexport const rightAlignedStyle = css`\n text-align: right;\n`;\n\nexport const subContentStyle = css`\n display: flex;\n font-size: 14px;\n color: ${getColor('n300')};\n margin: ${wplToken('space.100')} 0;\n\n div {\n flex: 1 1 auto;\n }\n`;\n","import Lozenge from '@atlaskit/lozenge';\nimport { ProductKey, PRODUCT_ICON_BY_KEY } from '../../../models';\nimport {\n containerStyle,\n mainContentStyle,\n productTextStyle,\n productNameStyle,\n totalCostStyle,\n rightAlignedStyle,\n subContentStyle\n} from './entitlement-item.styles';\n\nexport interface EntitlementItemProps {\n daysLeft: number;\n productKey: ProductKey;\n productAndPlanName: string;\n siteName: string;\n formattedTotalPrice: string;\n usersPriceBreakdown: string;\n}\n\nconst EntitlementItem = ({\n daysLeft,\n productKey,\n productAndPlanName,\n siteName,\n formattedTotalPrice,\n usersPriceBreakdown\n}: EntitlementItemProps) => {\n const IconComponent = PRODUCT_ICON_BY_KEY[productKey];\n\n const pluralize = (count: number) => count !== 1 && 's';\n\n return (\n
\n \n {daysLeft} day{pluralize(daysLeft)} left on trial\n \n
\n
\n \n
{productAndPlanName}
\n
\n
{formattedTotalPrice}
\n
\n
\n
{siteName}
\n
{usersPriceBreakdown}
\n
\n
\n );\n};\n\nexport { EntitlementItem };\n","import { css } from '@emotion/react';\n\nexport const containerStyle = css`\n display: inline-block;\n`;\n","const fetchAPI = async (url: string, initObj?: RequestInit) => {\n let baseURL = '/gateway/api';\n\n if (location && location.hostname !== 'www.atlassian.com') {\n baseURL = 'https://wac.stg.internal.atlassian.com' + baseURL;\n }\n\n return fetch(baseURL + url, { credentials: 'include', ...initObj });\n};\n\nexport { fetchAPI };\n","import { seconds } from '@wilkins-software/time-conversion-helpers';\nimport { useEffect, useRef, useState } from 'react';\nimport {\n Entitlement,\n Site,\n ProductKey,\n PRODUCT_NAME_BY_KEY\n} from '../../models';\nimport { fetchAPI } from '../utils';\n\nconst mapSiteToEntitlements = async (\n site: Site\n): Promise<[Entitlement[]?, string?, string?]> => {\n let foundInvoiceGroupId: string | undefined;\n let foundTransactionId: string | undefined;\n let entitlements: Entitlement[] = [];\n\n if (!site.products) {\n return [];\n }\n\n // iterate over products in site in order to find\n // products with same invoiceGroupId and ccpTransactionId\n for (const [productKey, product] of Object.entries(site.products)) {\n const { ccpTransactionAccountId, invoiceGroupId } = product;\n\n if (\n !invoiceGroupId ||\n !ccpTransactionAccountId ||\n !Object.keys(PRODUCT_NAME_BY_KEY).includes(productKey)\n ) {\n continue;\n }\n\n // on finding first ids set them as those to look for\n if (!foundInvoiceGroupId && !foundTransactionId) {\n foundInvoiceGroupId = invoiceGroupId;\n foundTransactionId = ccpTransactionAccountId;\n }\n\n // return eligible entitlements in format required by UI\n entitlements = Object.entries(site.products)\n .filter(([productKey]) =>\n // only include Jira family and Confluence\n Object.keys(PRODUCT_NAME_BY_KEY).includes(productKey)\n )\n .filter(\n // only products with ids matching the first set found\n ([_, { invoiceGroupId, ccpTransactionAccountId }]) =>\n invoiceGroupId === foundInvoiceGroupId &&\n ccpTransactionAccountId === foundTransactionId\n )\n .map(([productKey, currentProduct]) => {\n const hostname: string = site.hostname ?? '';\n\n // strip hostname of protocol and TLD\n const siteURLMatch = /https:\\/\\/(.*).com/.exec(hostname);\n const siteName = (siteURLMatch && siteURLMatch[1]) ?? '';\n\n return {\n entitlementId: currentProduct.ccpEntitlementId,\n\n siteName,\n\n // get product name plus capitalized plan (aka 'edition')\n productAndPlanName:\n PRODUCT_NAME_BY_KEY[productKey as ProductKey] +\n ' ' +\n currentProduct.edition.slice(0, 1).toUpperCase() +\n currentProduct.edition.slice(1),\n\n productKey: productKey as ProductKey,\n\n daysLeftInTrial: seconds(\n (new Date(currentProduct.trialEndDate).valueOf() - Date.now()) /\n 1000\n ).toDays()\n };\n });\n }\n\n if (!foundTransactionId) {\n return [];\n }\n\n // check that this invoice is not invoiceable, meaning payment details\n // have not yet been added\n const invoiceGroupResp = await fetchAPI(\n `/ccp/api/v1/invoice-groups/${foundInvoiceGroupId}/status`,\n {\n headers: { ['X-transaction-account']: foundTransactionId }\n }\n );\n\n const { ok, status, statusText } = invoiceGroupResp;\n if (!ok) {\n // TODO: should this be an analytics event?\n console.error(`Call to /invoice-groups/ failed: ${status} ${statusText}`);\n\n return [];\n }\n\n const { invoiceable } = await invoiceGroupResp.json();\n if (invoiceable) {\n return [];\n }\n\n // only show the first five\n return [entitlements.slice(0, 5), foundTransactionId, foundInvoiceGroupId];\n};\n\nconst useEntitlements = (): [Entitlement[], string, string] => {\n const hasRun = useRef(false);\n const [cachedEntitlements, setCachedEntitlements] = useState();\n const [transactionAccountId, setTransactionAccountId] = useState('');\n const [invoiceGroupId, setInvoiceGroupId] = useState('');\n\n useEffect(() => {\n if (hasRun.current) {\n return;\n }\n\n hasRun.current = true;\n void (async () => {\n const productHubInfo = await fetchAPI('/producthub/info');\n\n const { ok, status, statusText } = productHubInfo;\n if (!ok) {\n // TODO: should this be an analytics event?\n console.error(\n `Call to /producthub/info failed with status ${status} ${statusText}`\n );\n\n return;\n }\n\n const { sites } = await productHubInfo.json();\n if (!sites || sites.length === 0) {\n return;\n }\n\n let siteIdx = 0;\n let entitlements: Entitlement[] = [];\n let recvTransactionAccountId;\n let recvInvoiceGroupId;\n\n // iterate over sites to find one with one or more eligible entitlement\n while (entitlements.length === 0 && siteIdx < sites.length) {\n const site = sites[siteIdx];\n if (site) {\n const [foundEntitlements, taId, iGroupId] =\n await mapSiteToEntitlements(site);\n\n entitlements = foundEntitlements ?? [];\n recvTransactionAccountId = taId;\n recvInvoiceGroupId = iGroupId;\n }\n\n siteIdx++;\n }\n\n setCachedEntitlements(entitlements);\n setTransactionAccountId(recvTransactionAccountId ?? '');\n setInvoiceGroupId(recvInvoiceGroupId ?? '');\n })();\n });\n\n return [cachedEntitlements ?? [], transactionAccountId, invoiceGroupId];\n};\n\nexport { useEntitlements };\n","var seconds = function seconds(numberOfSeconds) {\n return {\n toMilliseconds: function toMilliseconds() {\n return Math.round(numberOfSeconds * 1000);\n },\n toSeconds: function toSeconds() {\n return Math.round(numberOfSeconds);\n },\n toMinutes: function toMinutes() {\n return Math.round(numberOfSeconds / 60);\n },\n toHours: function toHours() {\n return Math.round(numberOfSeconds / (60 * 60));\n },\n toDays: function toDays() {\n return Math.round(numberOfSeconds / (60 * 60 * 24));\n },\n toWeeks: function toWeeks() {\n return Math.round(numberOfSeconds / (60 * 60 * 24 * 7));\n },\n toMonths: function toMonths() {\n return Math.round(numberOfSeconds / (60 * 60 * 24 * 30));\n },\n toYears: function toYears() {\n return Math.round(numberOfSeconds / (60 * 60 * 24 * 365));\n }\n };\n};\nvar minutes = function minutes(numberOfMinutes) {\n return {\n toMilliseconds: function toMilliseconds() {\n return Math.round(numberOfMinutes * 60 * 1000);\n },\n toSeconds: function toSeconds() {\n return Math.round(numberOfMinutes * 60);\n },\n toMinutes: function toMinutes() {\n return Math.round(numberOfMinutes);\n },\n toHours: function toHours() {\n return Math.round(numberOfMinutes / 60);\n },\n toDays: function toDays() {\n return Math.round(numberOfMinutes / (60 * 24));\n },\n toWeeks: function toWeeks() {\n return Math.round(numberOfMinutes / (60 * 24 * 7));\n },\n toMonths: function toMonths() {\n return Math.round(numberOfMinutes / (60 * 24 * 30));\n },\n toYears: function toYears() {\n return Math.round(numberOfMinutes / (60 * 24 * 365));\n }\n };\n};\nvar hours = function hours(numberOfHours) {\n return {\n toMilliseconds: function toMilliseconds() {\n return Math.round(numberOfHours * 60 * 60 * 1000);\n },\n toSeconds: function toSeconds() {\n return Math.round(numberOfHours * 60 * 60);\n },\n toMinutes: function toMinutes() {\n return Math.round(numberOfHours * 60);\n },\n toHours: function toHours() {\n return Math.round(numberOfHours);\n },\n toDays: function toDays() {\n return Math.round(numberOfHours / 24);\n },\n toWeeks: function toWeeks() {\n return Math.round(numberOfHours / (24 * 7));\n },\n toMonths: function toMonths() {\n return Math.round(numberOfHours / (24 * 30));\n },\n toYears: function toYears() {\n return Math.round(numberOfHours / (24 * 365));\n }\n };\n};\nvar days = function days(numberOfDays) {\n return {\n toMilliseconds: function toMilliseconds() {\n return Math.round(numberOfDays * 24 * 60 * 60 * 1000);\n },\n toSeconds: function toSeconds() {\n return Math.round(numberOfDays * 24 * 60 * 60);\n },\n toMinutes: function toMinutes() {\n return Math.round(numberOfDays * 24 * 60);\n },\n toHours: function toHours() {\n return Math.round(numberOfDays * 24);\n },\n toDays: function toDays() {\n return Math.round(numberOfDays);\n },\n toWeeks: function toWeeks() {\n return Math.round(numberOfDays / 7);\n },\n toMonths: function toMonths() {\n return Math.round(numberOfDays / 30);\n },\n toYears: function toYears() {\n return Math.round(numberOfDays / 365);\n }\n };\n};\nvar weeks = function weeks(numberOfWeeks) {\n return {\n toMilliseconds: function toMilliseconds() {\n return Math.round(numberOfWeeks * 7 * 24 * 60 * 60 * 1000);\n },\n toSeconds: function toSeconds() {\n return Math.round(numberOfWeeks * 7 * 24 * 60 * 60);\n },\n toMinutes: function toMinutes() {\n return Math.round(numberOfWeeks * 7 * 24 * 60);\n },\n toHours: function toHours() {\n return Math.round(numberOfWeeks * 7 * 24);\n },\n toDays: function toDays() {\n return Math.round(numberOfWeeks * 7);\n },\n toWeeks: function toWeeks() {\n return Math.round(numberOfWeeks);\n },\n toMonths: function toMonths() {\n return Math.round(numberOfWeeks / 4.34524);\n },\n toYears: function toYears() {\n return Math.round(numberOfWeeks / 52.1429);\n }\n };\n};\nvar months = function months(numberOfMonths) {\n return {\n toMilliseconds: function toMilliseconds() {\n return Math.round(numberOfMonths * 30 * 24 * 60 * 60 * 1000);\n },\n toSeconds: function toSeconds() {\n return Math.round(numberOfMonths * 30 * 24 * 60 * 60);\n },\n toMinutes: function toMinutes() {\n return Math.round(numberOfMonths * 30 * 24 * 60);\n },\n toHours: function toHours() {\n return Math.round(numberOfMonths * 30 * 24);\n },\n toDays: function toDays() {\n return Math.round(numberOfMonths * 30);\n },\n toWeeks: function toWeeks() {\n return Math.round(numberOfMonths * 30 / 7);\n },\n toMonths: function toMonths() {\n return Math.round(numberOfMonths);\n },\n toYears: function toYears() {\n return Math.round(numberOfMonths / 12);\n }\n };\n};\nvar years = function years(numberOfYears) {\n return {\n toMilliseconds: function toMilliseconds() {\n return Math.round(numberOfYears * 365 * 24 * 60 * 60 * 1000);\n },\n toSeconds: function toSeconds() {\n return Math.round(numberOfYears * 365 * 24 * 60 * 60);\n },\n toMinutes: function toMinutes() {\n return Math.round(numberOfYears * 365 * 24 * 60);\n },\n toHours: function toHours() {\n return Math.round(numberOfYears * 365 * 24);\n },\n toDays: function toDays() {\n return Math.round(numberOfYears * 365);\n },\n toWeeks: function toWeeks() {\n return Math.round(numberOfYears * 365 / 7);\n },\n toMonths: function toMonths() {\n return Math.round(numberOfYears * 365 / 30);\n },\n toYears: function toYears() {\n return Math.round(numberOfYears);\n }\n };\n};\n\nexport { days, hours, minutes, months, seconds, weeks, years };\n//# sourceMappingURL=time-conversion-helpers.esm.js.map\n","import { useEffect, useRef, useState } from 'react';\nimport { fetchAPI } from '../utils';\nimport { Entitlement } from '../../models';\n\nexport interface EntitlementListing extends Entitlement {\n formattedTotalPrice: string;\n usersPriceBreakdown: string;\n}\n\ninterface EstimateResponse {\n entitlementId: string;\n items: ReadonlyArray<{\n total: number;\n chargeQuantity: {\n chargeElement: string;\n quantity: string;\n };\n }>;\n}\n\nconst formatPrice = new Intl.NumberFormat('en-US', {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n style: 'currency',\n currency: 'USD'\n}).format;\n\nconst useEntitlementListings = (\n entitlements: Entitlement[]\n): [string, EntitlementListing[]] => {\n const hasRun = useRef(false);\n\n const [formattedTotalPrice, setFormattedTotalPrice] = useState('');\n const [estimates, setEstimates] = useState([]);\n\n useEffect(() => {\n // only fetch (and only once) when we receive the entitlements\n if (entitlements.length === 0) {\n return;\n }\n\n if (hasRun.current === true) {\n return;\n }\n\n hasRun.current = true;\n\n let totalPrice = 0;\n const compiledEstimates = [];\n\n const entitlementById: Record = {};\n for (const entitlement of entitlements) {\n entitlementById[entitlement.entitlementId] = entitlement;\n }\n\n void (async () => {\n const allEstimateResponses = await Promise.all(\n entitlements.map(({ entitlementId }) =>\n fetchAPI('/ccp/api/v1/bill/estimate?entitlementId=' + entitlementId)\n )\n );\n\n for (const estimateResp of allEstimateResponses) {\n const { ok, status, statusText } = estimateResp;\n if (!ok) {\n console.error(\n `Call to /estimate for failed with error: ${status} ${statusText}`\n );\n\n continue;\n }\n\n const { entitlementId, items } =\n (await estimateResp.json()) as EstimateResponse;\n\n if (!items || items.length === 0) {\n console.error(\n \"Call to /estimate failed, 'items' were null or empty in response.\"\n );\n\n return;\n }\n\n const item = items[0];\n if (!item) {\n return;\n }\n\n const { chargeQuantity, total } = item;\n totalPrice += total;\n\n const { chargeElement, quantity } = chargeQuantity;\n\n const entitlement = entitlementById[entitlementId];\n if (entitlement) {\n const { siteName, productAndPlanName, productKey, daysLeftInTrial } =\n entitlement;\n\n const areDefined = [\n siteName,\n productAndPlanName,\n daysLeftInTrial\n ].every((v) => v !== undefined);\n\n if (areDefined) {\n const estimate: EntitlementListing = {\n entitlementId,\n siteName,\n productAndPlanName,\n productKey,\n daysLeftInTrial,\n formattedTotalPrice: formatPrice(total),\n usersPriceBreakdown: `${quantity} ${chargeElement}s x $${\n total / parseInt(quantity)\n } each`\n };\n\n compiledEstimates.push(estimate);\n }\n }\n }\n\n setFormattedTotalPrice(formatPrice(totalPrice));\n setEstimates(compiledEstimates);\n })();\n });\n\n return [formattedTotalPrice, estimates];\n};\n\nexport { useEntitlementListings };\n","import { useAnalyticsEvents } from '@atlaskit/analytics-next';\nimport { Popup } from '@atlaskit/popup';\nimport { ExtractPropsFromDefinitionVersion } from '@atlassiansox/bxp-definition-sdk';\nimport { useState } from 'react';\nimport type definition from '../../../definition';\nimport CartButton from '../components/cart-button/cart-button';\nimport {\n EntitlementItem,\n EntitlementsPopup\n} from '../components/entitlements-popup';\nimport { TRACKING_EVENT_NAMES } from '../utils/constants';\nimport { containerStyle } from './admin-trial-cart.styles';\nimport { useEntitlements } from './hooks';\nimport { useEntitlementListings } from './hooks/use-entitlement-listings';\n\nexport type ModulePropsV0 = ExtractPropsFromDefinitionVersion<\n typeof definition,\n 0\n>;\n\nconst AdminTrialCart = ({}: ModulePropsV0) => {\n const [entitlements, transactionAccountId, invoiceGroupId] =\n useEntitlements();\n const [formattedTotalPrice, estimates] = useEntitlementListings(\n entitlements ?? []\n );\n\n const [popupOpen, setPopupOpen] = useState(false);\n const { createAnalyticsEvent } = useAnalyticsEvents();\n\n const isProd = location.hostname === 'www.atlassian.com';\n\n const handleCartClick = () => {\n createAnalyticsEvent({\n eventName: TRACKING_EVENT_NAMES.wacCartIconClicked,\n action: 'clicked',\n actionSubject: 'button',\n actionSubjectId: 'wacCartIcon',\n attributes: {\n popoverOpen: !popupOpen\n }\n }).fire();\n\n if (popupOpen) {\n handleClosePopup();\n } else {\n setPopupOpen(true);\n }\n };\n\n const handleClosePopup = () => {\n createAnalyticsEvent({\n eventName: TRACKING_EVENT_NAMES.wacCartPopoverClosed,\n action: 'closed',\n actionSubjectId: 'wacCartPopover'\n }).fire();\n setPopupOpen(false);\n };\n\n if (!entitlements) {\n return ;\n }\n\n return (\n
\n);\n\nexport default CartBtn;\n","import AdminTrialCartV0, { ModulePropsV0 } from './versions/v0';\n\n// TODO: create a fn for this\n// https://bitbucket.org/atlassian/jluong/src/spike/libraries/web-platform-sdk/src/utils.ts\ntype VersionSelectType = {\n readonly version: number;\n readonly fields: ModulePropsV0;\n};\n\nconst versionSelect = ({ version, fields }: VersionSelectType) => {\n switch (version) {\n case 0:\n return ;\n default:\n throw new Error('Unknown module version');\n }\n};\n\nexport default versionSelect;\n","/**\n * Copyright (c) 2014-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\n/**\n * Similar to invariant but only logs a warning if the condition is not met.\n * This can be used to log issues in development environments in critical\n * paths. Removing the logging code for production environments will keep the\n * same logic and follow the same code paths.\n */\n\nvar __DEV__ = process.env.NODE_ENV !== 'production';\n\nvar warning = function() {};\n\nif (__DEV__) {\n var printWarning = function printWarning(format, args) {\n var len = arguments.length;\n args = new Array(len > 1 ? len - 1 : 0);\n for (var key = 1; key < len; key++) {\n args[key - 1] = arguments[key];\n }\n var argIndex = 0;\n var message = 'Warning: ' +\n format.replace(/%s/g, function() {\n return args[argIndex++];\n });\n if (typeof console !== 'undefined') {\n console.error(message);\n }\n try {\n // --- Welcome to debugging React ---\n // This error was thrown as a convenience so that you can use this stack\n // to find the callsite that caused this warning to fire.\n throw new Error(message);\n } catch (x) {}\n }\n\n warning = function(condition, format, args) {\n var len = arguments.length;\n args = new Array(len > 2 ? len - 2 : 0);\n for (var key = 2; key < len; key++) {\n args[key - 2] = arguments[key];\n }\n if (format === undefined) {\n throw new Error(\n '`warning(condition, format, ...args)` requires a warning ' +\n 'message argument'\n );\n }\n if (!condition) {\n printWarning.apply(null, [format].concat(args));\n }\n };\n}\n\nmodule.exports = warning;\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nconst errors_1 = require(\"./errors\");\nconst types_1 = require(\"../types\");\nconst version_1 = require(\"../version\");\nconst DEFAULT_REQUEST_TIMEOUT_MS = 2000;\nconst PROD_BASE_URL = 'https://api.atlassian.com/flags';\nconst STAGING_BASE_URL = 'https://api.stg.atlassian.com/flags';\nconst DEV_BASE_URL = 'https://api.dev.atlassian.com/flags';\nconst GATEWAY_BASE_URL = '/gateway/api/flags';\nclass Fetcher {\n static async fetchClientSdk(fetcherOptions) {\n const { targetApp } = fetcherOptions;\n const url = `/api/v2/frontend/clientSdkKey/${targetApp}`;\n try {\n return await this.fetchRequest(url, 'GET', fetcherOptions);\n }\n catch (error) {\n if (error instanceof Error) {\n throw error;\n }\n throw Error('Failed to retrieve client sdk key');\n }\n }\n static async fetchExperimentValues(fetcherOptions, identifiers, customAttributes) {\n const requestBody = {\n identifiers,\n customAttributes,\n targetApp: fetcherOptions.targetApp\n };\n try {\n return await this.fetchRequest('/api/v2/frontend/experimentValues', 'POST', fetcherOptions, requestBody);\n }\n catch (error) {\n if (error instanceof Error) {\n throw error;\n }\n throw Error('Failed to retrieve experiment values');\n }\n }\n static async handleResponseError(response) {\n if (!response.ok) {\n // Use text() instead of json() as the error body might not be json data\n const body = await response.text();\n throw new errors_1.ResponseError(`Non 2xx response status received, status: ${response.status}, body: ${JSON.stringify(body)}`);\n }\n if (response.status === 204) {\n throw new errors_1.ResponseError('Unexpected 204 response');\n }\n }\n static async extractResponseBody(response) {\n const value = await response.text();\n return JSON.parse(value);\n }\n static getBaseUrl(serviceEnv, useGatewayUrl = false) {\n if (useGatewayUrl) {\n return GATEWAY_BASE_URL;\n }\n switch (serviceEnv) {\n case types_1.FeatureGateEnvironment.Development:\n return DEV_BASE_URL;\n case types_1.FeatureGateEnvironment.Staging:\n return STAGING_BASE_URL;\n default:\n return PROD_BASE_URL;\n }\n }\n static async fetchRequest(path, method, fetcherOptions, body) {\n const baseUrl = Fetcher.getBaseUrl(fetcherOptions.environment, fetcherOptions.useGatewayURL);\n const fetchTimeout = fetcherOptions.fetchTimeoutMs || DEFAULT_REQUEST_TIMEOUT_MS;\n let abortSignal;\n if (AbortSignal.timeout) {\n abortSignal = AbortSignal.timeout(fetchTimeout);\n }\n else if (AbortController) {\n const abortController = new AbortController();\n abortSignal = abortController.signal;\n setTimeout(() => abortController.abort(), fetchTimeout);\n }\n const response = await fetch(`${baseUrl}${path}`, Object.assign({ method, headers: {\n 'Content-Type': 'application/json',\n 'X-Client-Name': 'feature-gate-js-client',\n 'X-Client-Version': version_1.CLIENT_VERSION,\n 'X-API-KEY': fetcherOptions.apiKey\n }, signal: abortSignal }, (body && { body: JSON.stringify(body) })));\n await this.handleResponseError(response);\n return await this.extractResponseBody(response);\n }\n}\nexports.default = Fetcher;\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.ResponseError = void 0;\nclass ResponseError extends Error {\n constructor(message) {\n super(message);\n }\n}\nexports.ResponseError = ResponseError;\n","\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.default = void 0;\nvar Fetcher_1 = require(\"./Fetcher\");\nObject.defineProperty(exports, \"default\", { enumerable: true, get: function () { return __importDefault(Fetcher_1).default; } });\n","\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __exportStar = (this && this.__exportStar) || function(m, exports) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);\n};\nvar __rest = (this && this.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.EvaluationReason = exports.DynamicConfig = void 0;\nconst statsig_js_lite_1 = __importStar(require(\"statsig-js-lite\"));\nvar statsig_js_lite_2 = require(\"statsig-js-lite\");\nObject.defineProperty(exports, \"DynamicConfig\", { enumerable: true, get: function () { return statsig_js_lite_2.DynamicConfig; } });\nObject.defineProperty(exports, \"EvaluationReason\", { enumerable: true, get: function () { return statsig_js_lite_2.EvaluationReason; } });\nconst fetcher_1 = __importDefault(require(\"./fetcher\"));\n__exportStar(require(\"./types\"), exports);\nconst DEFAULT_CLIENT_KEY = 'client-default-key';\nclass FeatureGates {\n static async initialize(clientOptions, identifiers, customAttributes) {\n if (FeatureGates.initPromise) {\n if (!FeatureGates.shallowEquals(clientOptions, FeatureGates.initOptions)) {\n console.warn('Feature Gates client already initialized with different options. New options were not applied.');\n }\n return FeatureGates.initPromise;\n }\n FeatureGates.initOptions = clientOptions;\n FeatureGates.initPromise = FeatureGates.init(clientOptions, identifiers, customAttributes).then(() => {\n FeatureGates.initCompleted = true;\n });\n return FeatureGates.initPromise;\n }\n static async initializeFromValues(clientOptions, identifiers, customAttributes, initializeValues = {}) {\n if (FeatureGates.initPromise) {\n if (!FeatureGates.shallowEquals(clientOptions, FeatureGates.initOptions)) {\n console.warn('Feature Gates client already initialized with different options. New options were not applied.');\n }\n return FeatureGates.initPromise;\n }\n FeatureGates.initOptions = clientOptions;\n FeatureGates.initPromise = FeatureGates.initFromValues(clientOptions, identifiers, customAttributes, initializeValues).then(() => {\n FeatureGates.initCompleted = true;\n });\n return FeatureGates.initPromise;\n }\n /**\n * This method updates the user using a network call to fetch the new set of values.\n * @param fetchOptions {FetcherOptions}\n * @param identifiers {Identifiers}\n * @param customAttributes {CustomAttributes}\n */\n static async updateUser(fetchOptions, identifiers, customAttributes) {\n const initializeValuesProducer = () => fetcher_1.default.fetchExperimentValues(fetchOptions, identifiers, customAttributes).then(({ experimentValues, customAttributes }) => ({\n experimentValues,\n customAttributesFromFetch: customAttributes\n }));\n await FeatureGates.updateUserUsingInitializeValuesProducer(initializeValuesProducer, identifiers, customAttributes);\n }\n /**\n * This method updates the user given a new set of bootstrap values obtained from one of the server-side SDKs.\n *\n * @param identifiers {Identifiers}\n * @param customAttributes {CustomAttributes}\n * @param initializeValues {Record}\n */\n static async updateUserWithValues(identifiers, customAttributes, initializeValues = {}) {\n const initializeValuesProducer = () => Promise.resolve({\n experimentValues: initializeValues,\n customAttributesFromFetch: customAttributes\n });\n await FeatureGates.updateUserUsingInitializeValuesProducer(initializeValuesProducer, identifiers, customAttributes);\n }\n static initializeCalled() {\n return FeatureGates.initPromise != null;\n }\n static initializeCompleted() {\n return FeatureGates.initCompleted;\n }\n static checkGate(gateName) {\n return statsig_js_lite_1.default.checkGate(gateName);\n }\n /**\n * Returns the entire config for a given experiment.\n *\n * @param {string} experimentName - The name of the experiment\n * @param {Object} options\n * @param {boolean} options.fireExperimentExposure - Whether or not to fire the exposure event for the experiment.\n * @returns The config for an experiment\n * @example\n * ```ts\n * const experimentConfig = FeatureGates.getExperiment('example-experiment-name');\n * const backgroundColor: string = experimentConfig.get('backgroundColor', 'yellow');\n * ```\n */\n static getExperiment(experimentName, options) {\n try {\n const defaultOptions = {\n fireExperimentExposure: true\n };\n const { fireExperimentExposure } = Object.assign(Object.assign({}, defaultOptions), options);\n const evalMethod = fireExperimentExposure\n ? statsig_js_lite_1.default.getExperiment.bind(statsig_js_lite_1.default)\n : statsig_js_lite_1.default.getExperimentWithExposureLoggingDisabled.bind(statsig_js_lite_1.default);\n return evalMethod(experimentName);\n }\n catch (error) {\n // Log the first occurrence of the error\n if (!FeatureGates.hasGetExperimentErrorOccurred) {\n console.warn({\n msg: 'An error has occurred getting the experiment. Only the first occurrence of this error is logged.',\n experimentName,\n error\n });\n FeatureGates.hasGetExperimentErrorOccurred = true;\n }\n // Return a default value\n return new statsig_js_lite_1.DynamicConfig(experimentName, {}, '', {\n time: Date.now(),\n reason: statsig_js_lite_1.EvaluationReason.Error\n });\n }\n }\n /**\n * Returns the value of a given parameter in an experiment config.\n *\n * @template T\n * @param {string} experimentName - The name of the experiment\n * @param {string} parameterName - The name of the parameter to fetch from the experiment config\n * @param {T} defaultValue - The value to serve if the experiment or parameter do not exist, or if the returned value does not match the expected type.\n * @param {Object} options\n * @param {boolean} options.fireExperimentExposure - Whether or not to fire the exposure event for the experiment.\n * @param {function} options.typeGuard - A function that asserts that the return value has the expected type. If this function returns false, then the default value will be returned instead. This can be set to protect your code from unexpected values being set remotely. By default, this will be done by asserting that the default value and value are the same primitive type.\n * @returns The value of the parameter if the experiment and parameter both exist, otherwise the default value.\n * @example\n ``` ts\n type ValidColor = 'blue' | 'red' | 'yellow';\n type ValidColorTypeCheck = (value: unknown) => value is ValidColor;\n\n const isValidColor: ValidColorTypeCheck =\n (value: unknown) => typeof value === 'string' && ['blue', 'red', 'yellow'].includes(value);\n\n const buttonColor: ValidColor = FeatureGates.getExperimentValue(\n 'example-experiment-name',\n 'backgroundColor',\n 'yellow',\n {\n typeGuard: isValidColor\n }\n );\n ```\n */\n static getExperimentValue(experimentName, parameterName, defaultValue, options) {\n const experiment = FeatureGates.getExperiment(experimentName, options);\n try {\n const defaultOptions = {};\n const { typeGuard } = Object.assign(Object.assign({}, defaultOptions), options);\n return experiment.get(parameterName, defaultValue, typeGuard);\n }\n catch (error) {\n // Log the first occurrence of the error\n if (!FeatureGates.hasGetExperimentValueErrorOccurred) {\n console.warn({\n msg: 'An error has occurred getting the experiment value. Only the first occurrence of this error is logged.',\n experimentName,\n defaultValue,\n options,\n error\n });\n FeatureGates.hasGetExperimentValueErrorOccurred = true;\n }\n return defaultValue;\n }\n }\n static manuallyLogExperimentExposure(experimentName) {\n statsig_js_lite_1.default.manuallyLogExperimentExposure(experimentName);\n }\n static shutdownStatsig() {\n statsig_js_lite_1.default.shutdown();\n }\n /**\n * Adds a new override for the given gate.\n *\n * This method is additive, meaning you can call it multiple times with different gate names to build\n * your full set of overrides.\n *\n * Overrides are persisted to the `STATSIG_JS_LITE_LOCAL_OVERRIDES` key in localStorage, so they will\n * continue to affect every client that is initialized on the same domain after this method is called.\n * If you are using this API for testing purposes, you should call ${@link clearGateOverride} after\n * your tests are completed to remove this localStorage entry.\n *\n * @param {string} gateName\n * @param {boolean} value\n */\n static overrideGate(gateName, value) {\n statsig_js_lite_1.default.overrideGate(gateName, value);\n }\n /**\n * Removes any overrides that have been set for the given gate.\n * @param {string} gateName\n */\n static clearGateOverride(gateName) {\n statsig_js_lite_1.default.overrideGate(gateName, null);\n }\n /**\n * Adds a new override for the given config (or experiment).\n *\n * This method is additive, meaning you can call it multiple times with different experiment names to build\n * your full set of overrides.\n *\n * Overrides are persisted to the `STATSIG_JS_LITE_LOCAL_OVERRIDES` key in localStorage, so they will\n * continue to affect every client that is initialized on the same domain after this method is called.\n * If you are using this API for testing purposes, you should call ${@link clearConfigOverride} after\n * your tests are completed to remove this localStorage entry.\n *\n * @param {string} experimentName\n * @param {object} values\n */\n static overrideConfig(experimentName, values) {\n statsig_js_lite_1.default.overrideConfig(experimentName, values);\n }\n /**\n * Removes any overrides that have been set for the given experiment.\n * @param {string} experimentName\n */\n static clearConfigOverride(experimentName) {\n statsig_js_lite_1.default.overrideConfig(experimentName, null);\n }\n /**\n * Set overrides for gates, experiments and layers in batch.\n *\n * Note that these overrides are **not** additive and will completely replace any that have been added\n * via prior calls to {@link overrideConfig} or {@link overrideGate}.\n *\n * Overrides are persisted to the `STATSIG_JS_LITE_LOCAL_OVERRIDES` key in localStorage, so they will\n * continue to affect every client that is initialized on the same domain after this method is called.\n * If you are using this API for testing purposes, you should call ${@link clearAllOverrides} after\n * your tests are completed to remove this localStorage entry.\n *\n * @param {object} overrides\n */\n static setOverrides(overrides) {\n statsig_js_lite_1.default.setOverrides(overrides);\n }\n /**\n * Clears overrides for all gates, configs (including experiments) and layers.\n */\n static clearAllOverrides() {\n statsig_js_lite_1.default.setOverrides(null);\n }\n /**\n * Returns whether the given identifiers and customAttributes align with the current\n * set that is being used by the client.\n *\n * If this method returns false, then the {@link updateUser} or {@link updateUserWithValues}\n * methods can be used to re-align these values.\n *\n * @param identifiers\n * @param customAttributes\n * @returns a flag indicating whether the clients current configuration aligns with the given values\n */\n static isCurrentUser(identifiers, customAttributes) {\n return (FeatureGates.shallowEquals(FeatureGates.currentIdentifiers, identifiers) &&\n FeatureGates.shallowEquals(FeatureGates.currentAttributes, customAttributes));\n }\n /**\n * This method initializes the client using a network call to fetch the bootstrap values for the given user.\n *\n * @param clientOptions\n * @param identifiers\n * @param customAttributes\n * @private\n */\n static async init(clientOptions, identifiers, customAttributes) {\n const fromValuesClientOptions = Object.assign(Object.assign({}, clientOptions), { disableCurrentPageLogging: true });\n let experimentValues;\n let customAttributesFromResult;\n try {\n // If client sdk key fetch fails, an error would be thrown and handled instead of waiting for the experiment\n // values request to be settled, and it will fall back to use default values.\n const clientSdkKeyPromise = fetcher_1.default.fetchClientSdk(clientOptions).then((value) => (fromValuesClientOptions.sdkKey = value.clientSdkKey));\n const experimentValuesPromise = fetcher_1.default.fetchExperimentValues(clientOptions, identifiers, customAttributes);\n // Only wait for the experiment values request to finish and try to initialise the client with experiment\n // values if both requests are successful. Else an error would be thrown and handled by the catch\n const [, experimentValuesResult] = await Promise.all([\n clientSdkKeyPromise,\n experimentValuesPromise\n ]);\n experimentValues = experimentValuesResult.experimentValues;\n customAttributesFromResult =\n experimentValuesResult.customAttributes;\n }\n catch (error) {\n if (error instanceof Error) {\n console.error(`Error occurred when trying to fetch the Feature Gates client values, error: ${error === null || error === void 0 ? void 0 : error.message}`);\n }\n console.warn(`Initialising Statsig client without values`);\n await FeatureGates.initFromValues(fromValuesClientOptions, identifiers, customAttributes);\n throw error;\n }\n await this.initFromValues(fromValuesClientOptions, identifiers, customAttributesFromResult, experimentValues);\n }\n /**\n * This method initializes the client using a set of boostrap values obtained from one of the server-side SDKs.\n *\n * @param clientOptions\n * @param identifiers\n * @param customAttributes\n * @param initializeValues\n * @private\n */\n static async initFromValues(clientOptions, identifiers, customAttributes, initializeValues = {}) {\n const user = this.toStatsigUser(identifiers, customAttributes);\n FeatureGates.currentIdentifiers = identifiers;\n FeatureGates.currentAttributes = customAttributes;\n if (!clientOptions.sdkKey) {\n clientOptions.sdkKey = DEFAULT_CLIENT_KEY;\n }\n const { sdkKey } = clientOptions;\n const statsigOptions = this.toStatsigOptions(clientOptions, initializeValues);\n try {\n await statsig_js_lite_1.default.initialize(sdkKey, user, statsigOptions);\n }\n catch (error) {\n if (error instanceof Error) {\n console.error(`Error occurred when trying to initialise the Statsig client, error: ${error === null || error === void 0 ? void 0 : error.message}`);\n }\n console.warn(`Initialising Statsig client with default sdk key and without values`);\n await statsig_js_lite_1.default.initialize(DEFAULT_CLIENT_KEY, user, Object.assign(Object.assign({}, statsigOptions), { initializeValues: {} }));\n throw error;\n }\n }\n /**\n * This method creates an instance of StatsigUser from the given set of identifiers and attributes.\n *\n * @param identifiers\n * @param customAttributes\n * @private\n */\n static toStatsigUser(identifiers, customAttributes) {\n const user = {\n customIDs: identifiers,\n custom: customAttributes\n };\n if (identifiers.atlassianAccountId) {\n user.userID = identifiers.atlassianAccountId;\n }\n return user;\n }\n /**\n * This method updates the user for this client with the bootstrap values returned from a given Promise.\n * It uses the customAttributes from fetching experiment values to update the Statsig user but\n * uses the customAttributes from given input to check if the user has changed.\n *\n * @param identifiers\n * @param customAttributes\n * @param initializeValuesPromise\n * @private\n */\n static async updateUserUsingInitializeValuesProducer(getInitializeValues, identifiers, customAttributes) {\n if (!FeatureGates.initPromise) {\n throw new Error('The FeatureGates client must be initialized before you can update the user.');\n }\n // If the user isn't changing at all, then exit immediately\n if (FeatureGates.isCurrentUser(identifiers, customAttributes)) {\n return FeatureGates.initPromise;\n }\n // Wait for the current initialize/update to finish\n const originalInitPromise = FeatureGates.initPromise;\n try {\n await FeatureGates.initPromise;\n }\n catch (err) {\n // Proceed with the user update even if the init failed, since this update\n // may put the client back into a valid state.\n }\n const initializeValuesPromise = getInitializeValues();\n const updateUserPromise = FeatureGates.updateStatsigClientUser(initializeValuesPromise, identifiers, customAttributes);\n // We replace the init promise here since we are essentially re-initializing the client at this point.\n // Any subsequent calls to await FeatureGates.initialize() or FeatureGates.updateUser() will now also await this user update.\n FeatureGates.initPromise = updateUserPromise.catch(() => {\n // If the update failed then it changed nothing, so revert back to the original promise.\n FeatureGates.initPromise = originalInitPromise;\n });\n return updateUserPromise;\n }\n /**\n * This method updates the user on the nested Statsig client\n *\n * @param identifiers\n * @param customAttributes\n * @param initializeValuesPromise\n * @private\n */\n static async updateStatsigClientUser(initializeValuesPromise, identifiers, customAttributes) {\n var _a, _b;\n let initializeValues, user;\n try {\n initializeValues = await initializeValuesPromise;\n user = FeatureGates.toStatsigUser(identifiers, initializeValues.customAttributesFromFetch);\n }\n catch (err) {\n // Make sure the updateUserCompletionCallback is called for any errors in our custom code.\n // This is not necessary for the updateUserWithValues call, because the Statsig client will already invoke the callback itself.\n const errMsg = err instanceof Error ? err.message : JSON.stringify(err);\n (_b = (_a = FeatureGates.initOptions).updateUserCompletionCallback) === null || _b === void 0 ? void 0 : _b.call(_a, false, errMsg);\n throw err;\n }\n const success = statsig_js_lite_1.default.updateUserWithValues(user, initializeValues.experimentValues);\n if (success) {\n FeatureGates.currentIdentifiers = identifiers;\n FeatureGates.currentAttributes = customAttributes;\n }\n else {\n throw new Error('Failed to update user. An unexpected error occured.');\n }\n }\n /**\n * This method transforms the options given by the user into the format accepted by the Statsig client.\n *\n * @param options\n * @private\n */\n static toStatsigOptions(options, initializeValues) {\n const { \n // De-structured to remove from restClientOptions\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n sdkKey, \n // De-structured to remove from restClientOptions\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n updateUserCompletionCallback } = options, restClientOptions = __rest(options, [\"sdkKey\", \"updateUserCompletionCallback\"]);\n return Object.assign(Object.assign(Object.assign({}, restClientOptions), { initializeValues, environment: {\n tier: options.environment\n }, disableCurrentPageLogging: true }), (options.updateUserCompletionCallback && {\n updateUserCompletionCallback: FeatureGates.toStatsigUpdateUserCompletionCallback(options.updateUserCompletionCallback)\n }));\n }\n /**\n * This method transforms an UpdateUserCompletionCallback in our own format into the format accepted by the Statsig client.\n *\n * @param callback\n * @private\n */\n static toStatsigUpdateUserCompletionCallback(callback) {\n /**\n * The duration passed to the callback indicates how long the update took, but it is deceptive since it only times the\n * Statsig code and doesn't account for all of the extra custom work we do to obtain the bootstrap values.\n * As a result, we just suppress this parameter in our own callback rather than trying to keep it accurate.\n */\n return (_duration, success, message) => {\n callback(success, message);\n };\n }\n static shallowEquals(objectA, objectB) {\n if (!objectA && !objectB) {\n return true;\n }\n if (!objectA || !objectB) {\n return false;\n }\n const aEntries = Object.entries(objectA);\n const bEntries = Object.entries(objectB);\n if (aEntries.length !== bEntries.length) {\n return false;\n }\n const ascendingKeyOrder = ([key1], [key2]) => key1.localeCompare(key2);\n aEntries.sort(ascendingKeyOrder);\n bEntries.sort(ascendingKeyOrder);\n for (let i = 0; i < aEntries.length; i++) {\n const [, aValue] = aEntries[i];\n const [, bValue] = bEntries[i];\n if (aValue !== bValue) {\n return false;\n }\n }\n return true;\n }\n}\nFeatureGates.initPromise = null;\nFeatureGates.initCompleted = false;\nFeatureGates.hasGetExperimentErrorOccurred = false;\nFeatureGates.hasGetExperimentValueErrorOccurred = false;\nexports.default = FeatureGates;\n// This makes it possible to get a reference to the FeatureGates client at runtime.\n// This is important for overriding values in Cyprus tests, as there needs to be a\n// way to get the exact instance for a window in order to mock some of its methods.\nif (typeof window !== 'undefined') {\n window.__FEATUREGATES_JS__ = FeatureGates;\n}\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.FeatureGateEnvironment = void 0;\nvar FeatureGateEnvironment;\n(function (FeatureGateEnvironment) {\n FeatureGateEnvironment[\"Development\"] = \"development\";\n FeatureGateEnvironment[\"Staging\"] = \"staging\";\n FeatureGateEnvironment[\"Production\"] = \"production\";\n})(FeatureGateEnvironment || (exports.FeatureGateEnvironment = FeatureGateEnvironment = {}));\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.CLIENT_VERSION = void 0;\nexports.CLIENT_VERSION = \"4.5.0\";\n","\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.FeatureGatesInitialization = void 0;\nconst react_1 = require(\"react\");\nconst feature_gate_js_client_1 = __importDefault(require(\"@atlassian/feature-gate-js-client\"));\nconst utils_1 = require(\"./utils\");\n/**\n * This component initializes the @atlassian/feature-flag-js-client by fetching the gate and experiment\n * evaluations for the given user, and blocks rendering of the children until the rendering is complete.\n */\nconst FeatureGatesInitialization = ({ children, enabled = true, identifiers, customAttributes, options, initializingComponent, overrides, onReady }) => {\n // Rather than checking the state of all overrides, we can just assume that if overrides are provided\n // then some sort of update will need to be performed, and hold off rendering until the useEffect is run.\n const [isInitialized, setInitialized] = (0, react_1.useState)(!overrides &&\n (0, utils_1.isClientAlreadyInCorrectState)(identifiers, customAttributes));\n // Use a ref for the options, so that we can use them within the following useEffect\n // without adding options as a dependency.\n // This avoids the user updating every time an option is changed.\n const optionsRef = (0, react_1.useRef)(options);\n (0, react_1.useEffect)(() => {\n optionsRef.current = options;\n }, [options]);\n (0, react_1.useEffect)(() => {\n if (enabled) {\n if ((0, utils_1.isClientAlreadyInCorrectState)(identifiers, customAttributes)) {\n (0, utils_1.applyOverrides)(overrides);\n setInitialized(true);\n onReady === null || onReady === void 0 ? void 0 : onReady();\n }\n else {\n const initPromise = feature_gate_js_client_1.default.initializeCalled()\n ? feature_gate_js_client_1.default.updateUser(optionsRef.current, identifiers, customAttributes)\n : feature_gate_js_client_1.default.initialize(optionsRef.current, identifiers, customAttributes);\n void initPromise\n .then(() => (0, utils_1.applyOverrides)(overrides))\n .catch((err) => (0, utils_1.toError)(err))\n .then((err) => {\n setInitialized(true);\n onReady === null || onReady === void 0 ? void 0 : onReady(err || undefined);\n });\n }\n }\n else {\n setInitialized(true);\n onReady === null || onReady === void 0 ? void 0 : onReady();\n }\n return () => (0, utils_1.clearOverrides)(overrides);\n }, [enabled, identifiers, customAttributes, overrides]);\n return (0, utils_1.pickChildToRender)(enabled, isInitialized, children, initializingComponent);\n};\nexports.FeatureGatesInitialization = FeatureGatesInitialization;\nexports.default = exports.FeatureGatesInitialization;\n","\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.FeatureGatesInitializationWithDefaults = void 0;\nconst react_1 = require(\"react\");\nconst feature_gate_js_client_1 = __importDefault(require(\"@atlassian/feature-gate-js-client\"));\nconst utils_1 = require(\"./utils\");\n/**\n * This component initializes the @atlassian/feature-flag-js-client by fetching the gate and experiment\n * evaluations for the given user, and blocks rendering of the children until the rendering is complete.\n */\nconst FeatureGatesInitializationWithDefaults = ({ children, enabled = true, identifiers, customAttributes, options, overrides, onReady }) => {\n // Rather than checking the state of all overrides, we can just assume that if overrides are provided\n // then some sort of update will need to be performed, and hold off rendering until the useEffect is run.\n const [isInitialized, setInitialized] = (0, react_1.useState)(!overrides &&\n (0, utils_1.isClientAlreadyInCorrectState)(identifiers, customAttributes));\n // Use a ref for the options, so that we can use them within the following useEffect\n // without adding options as a dependency.\n // This avoids the user updating every time an option is changed.\n const optionsRef = (0, react_1.useRef)(options);\n (0, react_1.useEffect)(() => {\n optionsRef.current = options;\n }, [options]);\n (0, react_1.useEffect)(() => {\n if (enabled) {\n if ((0, utils_1.isClientAlreadyInCorrectState)(identifiers, customAttributes)) {\n (0, utils_1.applyOverrides)(overrides);\n setInitialized(true);\n onReady === null || onReady === void 0 ? void 0 : onReady();\n }\n else {\n setInitialized(false);\n const initPromise = feature_gate_js_client_1.default.initializeCalled()\n ? feature_gate_js_client_1.default.updateUserWithValues(identifiers, customAttributes)\n : feature_gate_js_client_1.default.initializeFromValues(Object.assign({ sdkKey: 'client-default-key' }, (optionsRef.current || {})), identifiers, customAttributes);\n void initPromise\n .then(() => (0, utils_1.applyOverrides)(overrides))\n .catch((err) => (0, utils_1.toError)(err))\n .then((err) => {\n setInitialized(true);\n onReady === null || onReady === void 0 ? void 0 : onReady(err || undefined);\n });\n }\n }\n else {\n setInitialized(true);\n onReady === null || onReady === void 0 ? void 0 : onReady();\n }\n return () => (0, utils_1.clearOverrides)(overrides);\n }, [enabled, identifiers, customAttributes, overrides]);\n return (0, utils_1.pickChildToRender)(enabled, isInitialized, children);\n};\nexports.FeatureGatesInitializationWithDefaults = FeatureGatesInitializationWithDefaults;\nexports.default = exports.FeatureGatesInitializationWithDefaults;\n","\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.FeatureGatesInitializationWithValues = void 0;\nconst react_1 = require(\"react\");\nconst feature_gate_js_client_1 = __importDefault(require(\"@atlassian/feature-gate-js-client\"));\nconst utils_1 = require(\"./utils\");\n/**\n * This component initializes the @atlassian/feature-flag-js-client by fetching the gate and experiment\n * evaluations for the given user, and blocks rendering of the children until the rendering is complete.\n */\nconst FeatureGatesInitializationWithValues = ({ children, enabled = true, identifiers, customAttributes, options, initializeValues, overrides, onReady }) => {\n // Rather than checking the state of all overrides, we can just assume that if overrides are provided\n // then some sort of update will need to be performed, and hold off rendering until the useEffect is run.\n const [isInitialized, setInitialized] = (0, react_1.useState)(!overrides &&\n (0, utils_1.isClientAlreadyInCorrectState)(identifiers, customAttributes));\n // Use a ref for the options, so that we can use them within the following useEffect\n // without adding options as a dependency.\n // This avoids the user updating every time an option is changed.\n const optionsRef = (0, react_1.useRef)(options);\n (0, react_1.useEffect)(() => {\n optionsRef.current = options;\n }, [options]);\n (0, react_1.useEffect)(() => {\n if (enabled) {\n if ((0, utils_1.isClientAlreadyInCorrectState)(identifiers, customAttributes)) {\n (0, utils_1.applyOverrides)(overrides);\n setInitialized(true);\n onReady === null || onReady === void 0 ? void 0 : onReady();\n }\n else {\n setInitialized(false);\n const initPromise = feature_gate_js_client_1.default.initializeCalled()\n ? feature_gate_js_client_1.default.updateUserWithValues(identifiers, customAttributes, initializeValues)\n : feature_gate_js_client_1.default.initializeFromValues(optionsRef.current, identifiers, customAttributes, initializeValues);\n void initPromise\n .then(() => (0, utils_1.applyOverrides)(overrides))\n .catch((err) => (0, utils_1.toError)(err))\n .then((err) => {\n setInitialized(true);\n onReady === null || onReady === void 0 ? void 0 : onReady(err || undefined);\n });\n }\n }\n else {\n setInitialized(true);\n onReady === null || onReady === void 0 ? void 0 : onReady();\n }\n return () => (0, utils_1.clearOverrides)(overrides);\n }, [enabled, identifiers, customAttributes, initializeValues, overrides]);\n return (0, utils_1.pickChildToRender)(enabled, isInitialized, children);\n};\nexports.FeatureGatesInitializationWithValues = FeatureGatesInitializationWithValues;\nexports.default = exports.FeatureGatesInitializationWithValues;\n","\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __exportStar = (this && this.__exportStar) || function(m, exports) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\n__exportStar(require(\"./FeatureGatesInitialization\"), exports);\n__exportStar(require(\"./FeatureGatesInitializationWithDefaults\"), exports);\n__exportStar(require(\"./FeatureGatesInitializationWithValues\"), exports);\n","\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.clearOverrides = exports.applyOverrides = exports.toError = exports.pickChildToRender = exports.isClientAlreadyInCorrectState = void 0;\nconst react_1 = __importDefault(require(\"react\"));\nconst feature_gate_js_client_1 = __importDefault(require(\"@atlassian/feature-gate-js-client\"));\nlet hasWarnedAboutMissingOverrideSupport = false;\nfunction isClientAlreadyInCorrectState(identifiers, customAttributes) {\n var _a, _b;\n // If either of these methods don't exist (ie. if the product is using {\n var _a;\n (_a = feature_gate_js_client_1.default.overrideGate) === null || _a === void 0 ? void 0 : _a.call(feature_gate_js_client_1.default, gateName, value);\n });\n Object.entries((overrides === null || overrides === void 0 ? void 0 : overrides.configs) || {}).forEach(([configName, values]) => {\n var _a;\n (_a = feature_gate_js_client_1.default.overrideConfig) === null || _a === void 0 ? void 0 : _a.call(feature_gate_js_client_1.default, configName, values);\n });\n}\nexports.applyOverrides = applyOverrides;\nfunction clearOverrides(overrides) {\n Object.keys((overrides === null || overrides === void 0 ? void 0 : overrides.gates) || {}).forEach((gateName) => {\n var _a;\n (_a = feature_gate_js_client_1.default.clearGateOverride) === null || _a === void 0 ? void 0 : _a.call(feature_gate_js_client_1.default, gateName);\n });\n Object.keys((overrides === null || overrides === void 0 ? void 0 : overrides.configs) || {}).forEach((configName) => {\n var _a;\n (_a = feature_gate_js_client_1.default.clearConfigOverride) === null || _a === void 0 ? void 0 : _a.call(feature_gate_js_client_1.default, configName);\n });\n}\nexports.clearOverrides = clearOverrides;\n"],"names":["LevelContext","createContext","TopLevelContext","topLevelRef","current","setTopLevel","LevelProvider","children","currentLevel","useContext","useEffect","Provider","value","LayeringProvider","useRef","useMemo","level","UNSAFE_LAYERING","isNested","content","ESCAPE","useCloseOnEscapePress","onClose","isDisabled","escapePressed","isLayerDisabled","UNSAFE_useLayering","onKeyDown","useCallback","e","isDisabledLayer","key","onKeyUp","document","type","listener","capture","EMPTY_MODIFIERS","usePopper","referenceElement","popperElement","options","prevOptions","optionsWithDefaults","onFirstUpdate","placement","strategy","modifiers","_React$useState","styles","popper","position","left","top","arrow","attributes","state","setState","updateStateModifier","name","enabled","phase","fn","_ref","elements","Object","keys","map","element","requires","popperOptions","newOptions","concat","popperInstanceRef","setOptions","popperInstance","createPopper","destroy","update","forceUpdate","NOOP","NOOP_PROMISE","Promise","resolve","Popper","_ref$placement","_ref$strategy","_ref$modifiers","innerRef","referenceNode","Manager","setPopperElement","_React$useState2","arrowElement","setArrowElement","_usePopper","childrenProps","ref","style","hasPopperEscaped","modifiersData","hide","isReferenceHidden","arrowProps","constantModifiers","flipVariations","padding","boundary","rootBoundary","defaultChildrenFn","defaultOffset","offset","offsetX","offsetY","internalModifiers","mergedModifiers","cache","serialized","isStringTag","className","undefined","registered","hasOwnProperty","EmotionCacheContext","HTMLElement","func","forwardRef","props","typePropName","Insertion","inserted","insert","sheet","next","Emotion$1","cssProp","css","WrappedComponent","registeredStyles","classNames","rawClassName","split","forEach","push","newProps","call","jsx","args","arguments","argsLength","length","createElementArgArray","Array","createEmotionProps","i","_len","_key","createContainer","zIndex","container","createElement","getPortalParent","parentElement","querySelector","parent","display","body","appendChild","removePortalContainer","removeChild","appendPortalContainerIfNotAppended","InternalPortal","createPortal","useIsomorphicLayoutEffect","window","useLayoutEffect","zIndexToName","getLayerName","firePortalEvent","eventName","event","detail","layer","Number","CustomEvent","getEvent","dispatchEvent","Portal","mountStrategy","isSubsequentRender","setIsSubsequentRender","useState","useMountEffect","zIndexNumber","CHANNEL","DEFAULT_THEME_MODE","THEME_MODES","theme","includes","mode","themed","modesOrVariant","variantModes","variantProp","variants","modes","R300","Y300","G300","B100","B400","N0","N200","N800","DN600","DN300","DN50","RepositionOnUpdate","light","dark","isFirstRenderRef","Fragment","popupStyles","boxSizing","flex","backgroundColor","borderRadius","boxShadow","outline","popupOverflowStyles","overflow","DefaultPopupComponent","shouldRenderToParent","htmlAttributes","isOpen","id","testId","fallbackPlacements","shouldFlip","popupComponent","PopupContainer","autoFocus","triggerRef","shouldUseCaptureOnOutsideClick","popupRef","setPopupRef","initialFocusRef","setInitialFocusRef","noop","trapConfig","clickOutsideDeactivates","escapeDeactivates","initialFocus","fallbackFocus","returnFocusOnDeactivate","focusTrap","frameId","requestAnimationFrame","activate","cancelAnimationFrame","deactivate","useFocusManager","closePopup","target","contains","isClickOnPopup","isClickOnTrigger","useCloseManager","node","tabIndex","Popup","memo","trigger","setTriggerRef","renderPopperWrapper","Reference","__assign","this","assign","t","s","n","p","prototype","apply","defineProperty","exports","bindAll","bind_1","toOptions","bindings","sharedOptions","unbinds","original","binding","getBinding","bind","unbind","_a","addEventListener","removeEventListener","enumerable","get","bind_all_1","tabbable","listeningFocusTrap","tryFocus","focus","activeElement","tagName","toLowerCase","select","module","userOptions","tabbableNodes","firstTabbableNode","lastTabbableNode","nodeFocusedBeforeActivation","active","paused","tabEvent","config","trap","activateOptions","defaultedActivateOptions","onActivate","addListeners","pause","removeListeners","unpause","deactivateOptions","defaultedDeactivateOptions","returnFocus","onDeactivate","setTimeout","updateTabbableNodes","getNodeForOption","Error","firstFocusNode","checkFocus","checkClick","checkPointerDown","checkKey","optionName","optionValue","preventDefault","stopImmediatePropagation","blur","shiftKey","readjustFocus","keyCode","hasAttribute","getAttribute","currentFocusIndex","indexOf","handleTab","isEscapeEvent","hasElementType","Element","hasMap","Map","hasSet","Set","hasArrayBuffer","ArrayBuffer","isView","equal","a","b","constructor","it","isArray","size","entries","done","has","RegExp","source","flags","valueOf","toString","$$typeof","error","message","match","console","warn","ManagerReferenceNodeContext","ManagerReferenceNodeSetterContext","setReferenceNode","hasUnmounted","handleSetReferenceNode","refHandler","Boolean","unwrapArray","arg","safeInvoke","setRef","fromEntries","reduce","acc","generateUID","counter","WeakMap","uid","item","index","set","el","candidate","candidateIndexAttr","candidateIndex","elementDocument","ownerDocument","basicTabbables","orderedTabbables","isUnavailable","isOffCache","isOff","nodeComputedStyle","documentElement","result","defaultView","getComputedStyle","parentNode","computedStyle","visibility","createIsUnavailable","candidateSelectors","candidates","querySelectorAll","join","includeContainer","matches","msMatchesSelector","webkitMatchesSelector","some","candidateSelector","slice","unshift","l","parseInt","isNaN","disabled","sort","api","init","converter","defaultAttributes","expires","Date","now","toUTCString","encodeURIComponent","replace","decodeURIComponent","escape","stringifiedAttributes","attributeName","cookie","write","create","cookies","jar","parts","found","read","remove","withAttributes","withConverter","freeze","path","AnalyticsEvent","payload","updater","UIAnalyticsEvent","super","hasFired","context","handlers","JSON","parse","stringify","channel","handler","useAnalyticsEvents","analyticsContext","createAnalyticsEvent","getAtlaskitAnalyticsContext","getAtlaskitAnalyticsEventHandlers","containerStyle","buttonStyle","indicatorStyle","CartIcon","numberOfProductTrials","width","height","viewBox","fill","xmlns","opacity","d","fillRule","clipRule","onClick","title","TRACKING_EVENT_NAMES","spacingTokens","color","background","accent","blue","bolder","subtle","subtler","subtlest","gray","green","magenta","orange","purple","red","teal","yellow","brand","default","hovered","pressed","bold","danger","discovery","information","input","selected","success","warning","blanket","border","inverse","elevation","surface","footer","solid","alternate1","alternate2","alternate3","primary","overlay","raised","icon","link","text","utility","MISSING_TOKEN","alternate","isValidNestedObject","rawTokens","getValue","tokenName","colorBackgroundDefaultTokens","colorBorderDefaultTokens","colorTextDefaultTokens","wplToken","headerContainerStyle","headerStyle","descriptionStyle","dividerStyle","footerContainerStyle","totalValueStyle","taxSubtextStyle","buttonWrapper","EntitlementsPopup","formattedTotalPrice","addPaymentDetailsURL","analyticsAttributes","invoicedGroupId","transactionAccountId","atlassianAccountId","wacCartPopoverViewed","action","actionSubjectId","fire","wacCartAddPaymentDetailsButtonClicked","actionSubject","url","SurfaceContext","displayName","asAllowlist","textAlignMap","center","textAlign","end","start","textTransformMap","none","textTransform","lowercase","uppercase","verticalAlignMap","verticalAlign","middle","bottom","baseStyles","margin","truncateStyles","textOverflow","whiteSpace","HasTextAncestorContext","as","Component","colorProp","fontSize","fontWeight","lineHeight","shouldTruncate","UNSAFE_style","inverseTextColor","useColor","isWrapped","component","fontFamilyMap","sans","textColorMap","fontSizeMap","fontWeightMap","lineHeightMap","medium","regular","semibold","fontFamily","code","heading","monospace","dimensionMap","spaceMap","borderColorMap","backgroundColorMap","surfaceColorMap","borderWidthMap","spacingProperties","getSerializedStylesMap","cssProperty","tokenMap","emotionSpacingMap","token","paddingStylesMap","styleMap","spacingProperty","backgroundColorStylesMap","surfaceColorStylesMap","ui","isSurfaceColorToken","tokensMap","blockSize","borderColor","borderWidth","columnGap","gap","inlineSize","inset","insetBlock","insetBlockEnd","insetBlockStart","insetInline","insetInlineEnd","insetInlineStart","marginBlock","marginBlockEnd","marginBlockStart","marginBottom","marginInline","marginInlineEnd","marginInlineStart","marginLeft","marginRight","marginTop","maxBlockSize","maxHeight","maxInlineSize","maxWidth","minBlockSize","minHeight","minInlineSize","minWidth","outlineOffset","outlineWidth","outlineColor","paddingBlock","paddingBlockEnd","paddingBlockStart","paddingBottom","paddingInline","paddingInlineEnd","paddingInlineStart","paddingLeft","paddingRight","paddingTop","right","rowGap","card","navigation","dialog","modal","flag","spotlight","tooltip","uniqueSymbol","Symbol","safeSelectors","transformStyles","styleObj","test","tokenValue","parseXcss","x","filter","xcss","_spreadClass","safeHtmlAttributes","appearance","transformedStyles","baseXcss","Lozenge","isBold","appearanceStyle","appearanceType","backgroundColors","maxWidthValue","maxWidthIsPc","textColors","inprogress","moved","new","removed","defaultLogoParams","N100","N400","getColorsFromAppearance","iconGradientStart","iconGradientStop","iconColor","textColor","atlassianLogoTextColor","CSS_VAR_COLOR","CSS_VAR_FILL","baseWrapperStyles","userSelect","stopColorStyles","stop","stopColor","sizeStyles","xsmall","small","large","xlarge","val","label","svg","userDefinedTestId","rest","shouldApplyStopColor","role","dangerouslySetInnerHTML","__html","colors","JSW_KEY","JSM_KEY","JWM_KEY","JPD_KEY","CONFLUENCE_KEY","PRODUCT_NAME_BY_KEY","PRODUCT_ICON_BY_KEY","mainContentStyle","productTextStyle","productNameStyle","totalCostStyle","rightAlignedStyle","subContentStyle","EntitlementItem","daysLeft","productKey","productAndPlanName","siteName","usersPriceBreakdown","IconComponent","count","fetchAPI","async","initObj","baseURL","location","hostname","fetch","credentials","mapSiteToEntitlements","site","foundInvoiceGroupId","foundTransactionId","entitlements","products","product","ccpTransactionAccountId","invoiceGroupId","_","currentProduct","siteURLMatch","exec","entitlementId","ccpEntitlementId","edition","toUpperCase","daysLeftInTrial","numberOfSeconds","trialEndDate","toMilliseconds","Math","round","toSeconds","toMinutes","toHours","toDays","toWeeks","toMonths","toYears","invoiceGroupResp","headers","ok","status","statusText","invoiceable","json","formatPrice","Intl","NumberFormat","minimumFractionDigits","maximumFractionDigits","currency","format","hasRun","cachedEntitlements","setCachedEntitlements","setTransactionAccountId","setInvoiceGroupId","productHubInfo","sites","recvTransactionAccountId","recvInvoiceGroupId","siteIdx","foundEntitlements","taId","iGroupId","useEntitlements","estimates","setFormattedTotalPrice","setEstimates","totalPrice","compiledEstimates","entitlementById","entitlement","allEstimateResponses","all","estimateResp","items","chargeQuantity","total","chargeElement","quantity","every","v","estimate","useEntitlementListings","popupOpen","setPopupOpen","isProd","handleCartClick","wacCartIconClicked","popoverOpen","handleClosePopup","wacCartPopoverClosed","triggerProps","FeatureGateWrapper","environment","FeatureGateEnvironment","apiKey","FeatureGatesInitialization","targetApp","identifiers","FeatureGatedAdminTrialCart","versionDefinitionV0","description","channels","fieldDefinitions","validations","isRequired","schema","versions","React","version","fields","versionSelect","errors_1","types_1","version_1","Fetcher","static","fetcherOptions","fetchRequest","customAttributes","requestBody","response","ResponseError","serviceEnv","useGatewayUrl","Development","Staging","method","baseUrl","getBaseUrl","useGatewayURL","fetchTimeout","fetchTimeoutMs","abortSignal","AbortSignal","timeout","AbortController","abortController","signal","abort","CLIENT_VERSION","handleResponseError","extractResponseBody","__importDefault","mod","__esModule","Fetcher_1","__createBinding","o","m","k","k2","desc","getOwnPropertyDescriptor","writable","configurable","__setModuleDefault","__importStar","__exportStar","__rest","getOwnPropertySymbols","propertyIsEnumerable","EvaluationReason","DynamicConfig","statsig_js_lite_1","statsig_js_lite_2","fetcher_1","DEFAULT_CLIENT_KEY","FeatureGates","clientOptions","initPromise","shallowEquals","initOptions","then","initCompleted","initializeValues","initFromValues","fetchOptions","updateUserUsingInitializeValuesProducer","fetchExperimentValues","experimentValues","customAttributesFromFetch","gateName","checkGate","experimentName","defaultOptions","fireExperimentExposure","getExperiment","getExperimentWithExposureLoggingDisabled","hasGetExperimentErrorOccurred","msg","time","reason","parameterName","defaultValue","experiment","typeGuard","hasGetExperimentValueErrorOccurred","manuallyLogExperimentExposure","shutdown","overrideGate","values","overrideConfig","overrides","setOverrides","currentIdentifiers","currentAttributes","fromValuesClientOptions","disableCurrentPageLogging","customAttributesFromResult","clientSdkKeyPromise","fetchClientSdk","sdkKey","clientSdkKey","experimentValuesPromise","experimentValuesResult","user","toStatsigUser","statsigOptions","toStatsigOptions","initialize","customIDs","custom","userID","getInitializeValues","isCurrentUser","originalInitPromise","err","initializeValuesPromise","updateUserPromise","updateStatsigClientUser","catch","_b","errMsg","updateUserCompletionCallback","updateUserWithValues","restClientOptions","tier","toStatsigUpdateUserCompletionCallback","callback","_duration","objectA","objectB","aEntries","bEntries","ascendingKeyOrder","key1","key2","localeCompare","aValue","bValue","__FEATUREGATES_JS__","react_1","feature_gate_js_client_1","utils_1","initializingComponent","onReady","isInitialized","setInitialized","isClientAlreadyInCorrectState","optionsRef","applyOverrides","initializeCalled","updateUser","toError","clearOverrides","pickChildToRender","FeatureGatesInitializationWithDefaults","initializeFromValues","FeatureGatesInitializationWithValues","hasWarnedAboutMissingOverrideSupport","initializeCompleted","gates","configs","configName","clearGateOverride","clearConfigOverride"],"sourceRoot":""}