\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tTerms of use\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t|{' '}\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tPrivacy policy\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n}\n","/* eslint-disable no-bitwise, no-magic-numbers, sort-keys */\n\nimport { ConfigMap, FilterMap, NodeConfig } from './types';\n\n// https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories\nexport const TYPE_FLOW = 1;\nexport const TYPE_SECTION = 1 << 1;\nexport const TYPE_HEADING = 1 << 2;\nexport const TYPE_PHRASING = 1 << 3;\nexport const TYPE_EMBEDDED = 1 << 4;\nexport const TYPE_INTERACTIVE = 1 << 5;\nexport const TYPE_PALPABLE = 1 << 6;\n\n// https://developer.mozilla.org/en-US/docs/Web/HTML/Element\nconst tagConfigs: Record> = {\n\ta: {\n\t\tcontent: TYPE_FLOW | TYPE_PHRASING,\n\t\tself: false,\n\t\ttype: TYPE_FLOW | TYPE_PHRASING | TYPE_INTERACTIVE | TYPE_PALPABLE,\n\t},\n\taddress: {\n\t\tinvalid: [\n\t\t\t'h1',\n\t\t\t'h2',\n\t\t\t'h3',\n\t\t\t'h4',\n\t\t\t'h5',\n\t\t\t'h6',\n\t\t\t'address',\n\t\t\t'article',\n\t\t\t'aside',\n\t\t\t'section',\n\t\t\t'div',\n\t\t\t'header',\n\t\t\t'footer',\n\t\t],\n\t\tself: false,\n\t},\n\taudio: {\n\t\tchildren: ['track', 'source'],\n\t},\n\tbr: {\n\t\ttype: TYPE_FLOW | TYPE_PHRASING,\n\t\tvoid: true,\n\t},\n\tbody: {\n\t\tcontent:\n\t\t\tTYPE_FLOW |\n\t\t\tTYPE_SECTION |\n\t\t\tTYPE_HEADING |\n\t\t\tTYPE_PHRASING |\n\t\t\tTYPE_EMBEDDED |\n\t\t\tTYPE_INTERACTIVE |\n\t\t\tTYPE_PALPABLE,\n\t},\n\tbutton: {\n\t\tcontent: TYPE_PHRASING,\n\t\ttype: TYPE_FLOW | TYPE_PHRASING | TYPE_INTERACTIVE | TYPE_PALPABLE,\n\t},\n\tcaption: {\n\t\tcontent: TYPE_FLOW,\n\t\tparent: ['table'],\n\t},\n\tcol: {\n\t\tparent: ['colgroup'],\n\t\tvoid: true,\n\t},\n\tcolgroup: {\n\t\tchildren: ['col'],\n\t\tparent: ['table'],\n\t},\n\tdetails: {\n\t\tchildren: ['summary'],\n\t\ttype: TYPE_FLOW | TYPE_INTERACTIVE | TYPE_PALPABLE,\n\t},\n\tdd: {\n\t\tcontent: TYPE_FLOW,\n\t\tparent: ['dl'],\n\t},\n\tdl: {\n\t\tchildren: ['dt', 'dd'],\n\t\ttype: TYPE_FLOW,\n\t},\n\tdt: {\n\t\tcontent: TYPE_FLOW,\n\t\tinvalid: ['footer', 'header'],\n\t\tparent: ['dl'],\n\t},\n\tfigcaption: {\n\t\tcontent: TYPE_FLOW,\n\t\tparent: ['figure'],\n\t},\n\tfooter: {\n\t\tinvalid: ['footer', 'header'],\n\t},\n\theader: {\n\t\tinvalid: ['footer', 'header'],\n\t},\n\thr: {\n\t\ttype: TYPE_FLOW,\n\t\tvoid: true,\n\t},\n\timg: {\n\t\tvoid: true,\n\t},\n\tli: {\n\t\tcontent: TYPE_FLOW,\n\t\tparent: ['ul', 'ol', 'menu'],\n\t},\n\tmain: {\n\t\tself: false,\n\t},\n\tol: {\n\t\tchildren: ['li'],\n\t\ttype: TYPE_FLOW,\n\t},\n\tpicture: {\n\t\tchildren: ['source', 'img'],\n\t\ttype: TYPE_FLOW | TYPE_PHRASING | TYPE_EMBEDDED,\n\t},\n\trb: {\n\t\tparent: ['ruby', 'rtc'],\n\t},\n\trp: {\n\t\tparent: ['ruby', 'rtc'],\n\t},\n\trt: {\n\t\tcontent: TYPE_PHRASING,\n\t\tparent: ['ruby', 'rtc'],\n\t},\n\trtc: {\n\t\tcontent: TYPE_PHRASING,\n\t\tparent: ['ruby'],\n\t},\n\truby: {\n\t\tchildren: ['rb', 'rp', 'rt', 'rtc'],\n\t},\n\tsource: {\n\t\tparent: ['audio', 'video', 'picture'],\n\t\tvoid: true,\n\t},\n\tsummary: {\n\t\tcontent: TYPE_PHRASING,\n\t\tparent: ['details'],\n\t},\n\ttable: {\n\t\tchildren: ['caption', 'colgroup', 'thead', 'tbody', 'tfoot', 'tr'],\n\t\ttype: TYPE_FLOW,\n\t},\n\ttbody: {\n\t\tparent: ['table'],\n\t\tchildren: ['tr'],\n\t},\n\ttd: {\n\t\tcontent: TYPE_FLOW,\n\t\tparent: ['tr'],\n\t},\n\ttfoot: {\n\t\tparent: ['table'],\n\t\tchildren: ['tr'],\n\t},\n\tth: {\n\t\tcontent: TYPE_FLOW,\n\t\tparent: ['tr'],\n\t},\n\tthead: {\n\t\tparent: ['table'],\n\t\tchildren: ['tr'],\n\t},\n\ttr: {\n\t\tparent: ['table', 'tbody', 'thead', 'tfoot'],\n\t\tchildren: ['th', 'td'],\n\t},\n\ttrack: {\n\t\tparent: ['audio', 'video'],\n\t\tvoid: true,\n\t},\n\tul: {\n\t\tchildren: ['li'],\n\t\ttype: TYPE_FLOW,\n\t},\n\tvideo: {\n\t\tchildren: ['track', 'source'],\n\t},\n\twbr: {\n\t\ttype: TYPE_FLOW | TYPE_PHRASING,\n\t\tvoid: true,\n\t},\n};\n\nfunction createConfigBuilder(config: Partial): (tagName: string) => void {\n\treturn (tagName: string) => {\n\t\ttagConfigs[tagName] = {\n\t\t\t...config,\n\t\t\t...tagConfigs[tagName],\n\t\t};\n\t};\n}\n\n['address', 'main', 'div', 'figure', 'p', 'pre'].forEach(\n\tcreateConfigBuilder({\n\t\tcontent: TYPE_FLOW,\n\t\ttype: TYPE_FLOW | TYPE_PALPABLE,\n\t}),\n);\n\n[\n\t'abbr',\n\t'b',\n\t'bdi',\n\t'bdo',\n\t'cite',\n\t'code',\n\t'data',\n\t'dfn',\n\t'em',\n\t'i',\n\t'kbd',\n\t'mark',\n\t'q',\n\t'ruby',\n\t'samp',\n\t'strong',\n\t'sub',\n\t'sup',\n\t'time',\n\t'u',\n\t'var',\n].forEach(\n\tcreateConfigBuilder({\n\t\tcontent: TYPE_PHRASING,\n\t\ttype: TYPE_FLOW | TYPE_PHRASING | TYPE_PALPABLE,\n\t}),\n);\n\n['p', 'pre'].forEach(\n\tcreateConfigBuilder({\n\t\tcontent: TYPE_PHRASING,\n\t\ttype: TYPE_FLOW | TYPE_PALPABLE,\n\t}),\n);\n\n['s', 'small', 'span', 'del', 'ins'].forEach(\n\tcreateConfigBuilder({\n\t\tcontent: TYPE_PHRASING,\n\t\ttype: TYPE_FLOW | TYPE_PHRASING,\n\t}),\n);\n\n['article', 'aside', 'footer', 'header', 'nav', 'section', 'blockquote'].forEach(\n\tcreateConfigBuilder({\n\t\tcontent: TYPE_FLOW,\n\t\ttype: TYPE_FLOW | TYPE_SECTION | TYPE_PALPABLE,\n\t}),\n);\n\n['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(\n\tcreateConfigBuilder({\n\t\tcontent: TYPE_PHRASING,\n\t\ttype: TYPE_FLOW | TYPE_HEADING | TYPE_PALPABLE,\n\t}),\n);\n\n['audio', 'canvas', 'iframe', 'img', 'video'].forEach(\n\tcreateConfigBuilder({\n\t\ttype: TYPE_FLOW | TYPE_PHRASING | TYPE_EMBEDDED | TYPE_PALPABLE,\n\t}),\n);\n\n// Disable this map from being modified\nexport const TAGS: ConfigMap = Object.freeze(tagConfigs);\n\n// Tags that should never be allowed, even if the allow list is disabled\nexport const BANNED_TAG_LIST = [\n\t'applet',\n\t'base',\n\t'body',\n\t'command',\n\t'embed',\n\t'frame',\n\t'frameset',\n\t'head',\n\t'html',\n\t'link',\n\t'meta',\n\t'noscript',\n\t'object',\n\t'script',\n\t'style',\n\t'title',\n];\n\nexport const ALLOWED_TAG_LIST = Object.keys(TAGS).filter(\n\t(tag) => tag !== 'canvas' && tag !== 'iframe',\n);\n\n// Filters apply to HTML attributes\nexport const FILTER_ALLOW = 1;\nexport const FILTER_DENY = 2;\nexport const FILTER_CAST_NUMBER = 3;\nexport const FILTER_CAST_BOOL = 4;\nexport const FILTER_NO_CAST = 5;\n\n// Attributes not listed here will be denied\n// https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes\nexport const ATTRIBUTES: FilterMap = Object.freeze({\n\talt: FILTER_ALLOW,\n\tcite: FILTER_ALLOW,\n\tclass: FILTER_ALLOW,\n\tcolspan: FILTER_CAST_NUMBER,\n\tcontrols: FILTER_CAST_BOOL,\n\tdatetime: FILTER_ALLOW,\n\tdefault: FILTER_CAST_BOOL,\n\tdisabled: FILTER_CAST_BOOL,\n\tdir: FILTER_ALLOW,\n\theight: FILTER_ALLOW,\n\thref: FILTER_ALLOW,\n\tid: FILTER_ALLOW,\n\tkind: FILTER_ALLOW,\n\tlabel: FILTER_ALLOW,\n\tlang: FILTER_ALLOW,\n\tloading: FILTER_ALLOW,\n\tloop: FILTER_CAST_BOOL,\n\tmedia: FILTER_ALLOW,\n\tmuted: FILTER_CAST_BOOL,\n\tposter: FILTER_ALLOW,\n\trel: FILTER_ALLOW,\n\trole: FILTER_ALLOW,\n\trowspan: FILTER_CAST_NUMBER,\n\tscope: FILTER_ALLOW,\n\tsizes: FILTER_ALLOW,\n\tspan: FILTER_CAST_NUMBER,\n\tstart: FILTER_CAST_NUMBER,\n\tstyle: FILTER_NO_CAST,\n\tsrc: FILTER_ALLOW,\n\tsrclang: FILTER_ALLOW,\n\tsrcset: FILTER_ALLOW,\n\ttabindex: FILTER_ALLOW,\n\ttarget: FILTER_ALLOW,\n\ttitle: FILTER_ALLOW,\n\ttype: FILTER_ALLOW,\n\twidth: FILTER_ALLOW,\n});\n\n// Attributes to camel case for React props\nexport const ATTRIBUTES_TO_PROPS: Record = Object.freeze({\n\tclass: 'className',\n\tcolspan: 'colSpan',\n\tdatetime: 'dateTime',\n\trowspan: 'rowSpan',\n\tsrclang: 'srcLang',\n\tsrcset: 'srcSet',\n\ttabindex: 'tabIndex',\n});\n","import React from 'react';\nimport { ElementProps } from './types';\n\nexport function Element({\n\tattributes = {},\n\tclassName,\n\tchildren = null,\n\tselfClose = false,\n\ttagName,\n}: ElementProps) {\n\tconst Tag = tagName as 'span';\n\n\treturn selfClose ? (\n\t\t\n\t) : (\n\t\t\n\t\t\t{children}\n\t\t\n\t);\n}\n","import { ElementAttributes, FilterInterface } from './types';\n\nexport class Filter implements FilterInterface {\n\t/**\n\t * Filter and clean an HTML attribute value.\n\t */\n\tattribute(\n\t\tname: K,\n\t\tvalue: ElementAttributes[K],\n\t): ElementAttributes[K] | null | undefined {\n\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-return\n\t\treturn value;\n\t}\n\n\t/**\n\t * Filter and clean an HTML node.\n\t */\n\tnode(name: string, node: HTMLElement): HTMLElement | null {\n\t\treturn node;\n\t}\n}\n","import { Filter } from './Filter';\nimport { ElementAttributes } from './types';\n\nconst INVALID_STYLES = /(url|image|image-set)\\(/i;\n\nexport class StyleFilter extends Filter {\n\toverride attribute(\n\t\tname: K,\n\t\tvalue: ElementAttributes[K],\n\t): ElementAttributes[K] {\n\t\tif (name === 'style') {\n\t\t\tObject.keys(value).forEach((key) => {\n\t\t\t\tif (String(value[key]).match(INVALID_STYLES)) {\n\t\t\t\t\t// eslint-disable-next-line no-param-reassign\n\t\t\t\t\tdelete value[key];\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\n\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-return\n\t\treturn value;\n\t}\n}\n","/* eslint-disable no-bitwise, no-cond-assign, complexity, @typescript-eslint/no-unsafe-return */\n\nimport React from 'react';\nimport escapeHtml from 'escape-html';\nimport {\n\tALLOWED_TAG_LIST,\n\tATTRIBUTES,\n\tATTRIBUTES_TO_PROPS,\n\tBANNED_TAG_LIST,\n\tFILTER_CAST_BOOL,\n\tFILTER_CAST_NUMBER,\n\tFILTER_DENY,\n\tFILTER_NO_CAST,\n\tTAGS,\n} from './constants';\nimport { Element } from './Element';\nimport { StyleFilter } from './StyleFilter';\nimport {\n\tAttributes,\n\tAttributeValue,\n\tChildrenNode,\n\tElementAttributes,\n\tElementProps,\n\tFilterInterface,\n\tMatcherElementsMap,\n\tMatcherInterface,\n\tNode,\n\tNodeConfig,\n\tParserProps,\n} from './types';\n\nconst ELEMENT_NODE = 1;\nconst TEXT_NODE = 3;\nconst INVALID_ROOTS = /^<(!doctype|(html|head|body)(\\s|>))/i;\nconst ALLOWED_ATTRS = /^(aria-|data-|\\w+:)/iu;\nconst OPEN_TOKEN = /{{{(\\w+)\\/?}}}/;\n\nfunction createDocument() {\n\t// Maybe SSR? Just do nothing instead of crashing!\n\tif (typeof window === 'undefined' || typeof document === 'undefined') {\n\t\treturn undefined;\n\t}\n\n\treturn document.implementation.createHTMLDocument('Interweave');\n}\n\nexport class Parser {\n\tallowed: Set;\n\n\tbanned: Set;\n\n\tblocked: Set;\n\n\tcontainer?: HTMLElement;\n\n\tcontent: Node[] = [];\n\n\tprops: ParserProps;\n\n\tmatchers: MatcherInterface[];\n\n\tfilters: FilterInterface[];\n\n\tkeyIndex: number;\n\n\tconstructor(\n\t\tmarkup: string,\n\t\tprops: ParserProps = {},\n\t\tmatchers: MatcherInterface[] = [],\n\t\tfilters: FilterInterface[] = [],\n\t) {\n\t\tif (__DEV__ && markup && typeof markup !== 'string') {\n\t\t\tthrow new TypeError('Interweave parser requires a valid string.');\n\t\t}\n\n\t\tthis.props = props;\n\t\tthis.matchers = matchers;\n\t\tthis.filters = [...filters, new StyleFilter()];\n\t\tthis.keyIndex = -1;\n\t\tthis.container = this.createContainer(markup || '');\n\t\tthis.allowed = new Set(props.allowList ?? ALLOWED_TAG_LIST);\n\t\tthis.banned = new Set(BANNED_TAG_LIST);\n\t\tthis.blocked = new Set(props.blockList);\n\t}\n\n\t/**\n\t * Loop through and apply all registered attribute filters.\n\t */\n\tapplyAttributeFilters(\n\t\tname: K,\n\t\tvalue: ElementAttributes[K],\n\t): ElementAttributes[K] {\n\t\treturn this.filters.reduce(\n\t\t\t(nextValue, filter) =>\n\t\t\t\tnextValue !== null && typeof filter.attribute === 'function'\n\t\t\t\t\t? filter.attribute(name, nextValue)\n\t\t\t\t\t: nextValue,\n\t\t\tvalue,\n\t\t);\n\t}\n\n\t/**\n\t * Loop through and apply all registered node filters.\n\t */\n\tapplyNodeFilters(name: string, node: HTMLElement | null): HTMLElement | null {\n\t\t// Allow null to be returned\n\t\treturn this.filters.reduce(\n\t\t\t(nextNode, filter) =>\n\t\t\t\tnextNode !== null && typeof filter.node === 'function'\n\t\t\t\t\t? filter.node(name, nextNode)\n\t\t\t\t\t: nextNode,\n\t\t\tnode,\n\t\t);\n\t}\n\n\t/**\n\t * Loop through and apply all registered matchers to the string.\n\t * If a match is found, create a React element, and build a new array.\n\t * This array allows React to interpolate and render accordingly.\n\t */\n\tapplyMatchers(string: string, parentConfig: NodeConfig): ChildrenNode {\n\t\tconst elements: MatcherElementsMap = {};\n\t\tconst { props } = this;\n\t\tlet matchedString = string;\n\t\tlet elementIndex = 0;\n\t\tlet parts = null;\n\n\t\tthis.matchers.forEach((matcher) => {\n\t\t\tconst tagName = matcher.asTag().toLowerCase();\n\t\t\tconst config = this.getTagConfig(tagName);\n\n\t\t\t// Skip matchers that have been disabled from props or are not supported\n\t\t\tif ((props as Record)[matcher.inverseName] || !this.isTagAllowed(tagName)) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Skip matchers in which the child cannot be rendered\n\t\t\tif (!this.canRenderChild(parentConfig, config)) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Continuously trigger the matcher until no matches are found\n\t\t\tlet tokenizedString = '';\n\n\t\t\twhile (matchedString && (parts = matcher.match(matchedString))) {\n\t\t\t\tconst { index, length, match, valid, void: isVoid, ...partProps } = parts;\n\t\t\t\tconst tokenName = matcher.propName + String(elementIndex);\n\n\t\t\t\t// Piece together a new string with interpolated tokens\n\t\t\t\tif (index > 0) {\n\t\t\t\t\ttokenizedString += matchedString.slice(0, index);\n\t\t\t\t}\n\n\t\t\t\tif (valid) {\n\t\t\t\t\ttokenizedString += isVoid\n\t\t\t\t\t\t? `{{{${tokenName}/}}}`\n\t\t\t\t\t\t: `{{{${tokenName}}}}${match}{{{/${tokenName}}}}`;\n\n\t\t\t\t\tthis.keyIndex += 1;\n\n\t\t\t\t\telementIndex += 1;\n\t\t\t\t\telements[tokenName] = {\n\t\t\t\t\t\tchildren: match,\n\t\t\t\t\t\tmatcher,\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t...props,\n\t\t\t\t\t\t\t...partProps,\n\t\t\t\t\t\t\tkey: this.keyIndex,\n\t\t\t\t\t\t},\n\t\t\t\t\t};\n\t\t\t\t} else {\n\t\t\t\t\ttokenizedString += match;\n\t\t\t\t}\n\n\t\t\t\t// Reduce the string being matched against,\n\t\t\t\t// otherwise we end up in an infinite loop!\n\t\t\t\tif (matcher.greedy) {\n\t\t\t\t\tmatchedString = tokenizedString + matchedString.slice(index + length);\n\t\t\t\t\ttokenizedString = '';\n\t\t\t\t} else {\n\t\t\t\t\t// eslint-disable-next-line unicorn/explicit-length-check\n\t\t\t\t\tmatchedString = matchedString.slice(index + (length || match.length));\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Update the matched string with the tokenized string,\n\t\t\t// so that the next matcher can apply to it.\n\t\t\tif (!matcher.greedy) {\n\t\t\t\tmatchedString = tokenizedString + matchedString;\n\t\t\t}\n\t\t});\n\n\t\tif (elementIndex === 0) {\n\t\t\treturn string;\n\t\t}\n\n\t\treturn this.replaceTokens(matchedString, elements);\n\t}\n\n\t/**\n\t * Determine whether the child can be rendered within the parent.\n\t */\n\tcanRenderChild(parentConfig: NodeConfig, childConfig: NodeConfig): boolean {\n\t\tif (!parentConfig.tagName || !childConfig.tagName) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// No children\n\t\tif (parentConfig.void) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Valid children\n\t\tif (parentConfig.children.length > 0) {\n\t\t\treturn parentConfig.children.includes(childConfig.tagName);\n\t\t}\n\n\t\tif (parentConfig.invalid.length > 0 && parentConfig.invalid.includes(childConfig.tagName)) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Valid parent\n\t\tif (childConfig.parent.length > 0) {\n\t\t\treturn childConfig.parent.includes(parentConfig.tagName);\n\t\t}\n\n\t\t// Self nesting\n\t\tif (!parentConfig.self && parentConfig.tagName === childConfig.tagName) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Content category type\n\t\treturn Boolean(parentConfig && parentConfig.content & childConfig.type);\n\t}\n\n\t/**\n\t * Convert line breaks in a string to HTML ` ` tags.\n\t * If the string contains HTML, we should not convert anything,\n\t * as line breaks should be handled by ` `s in the markup itself.\n\t */\n\tconvertLineBreaks(markup: string): string {\n\t\tconst { noHtml, disableLineBreaks } = this.props;\n\n\t\tif (noHtml || disableLineBreaks || markup.match(/<((?:\\/[ a-z]+)|(?:[ a-z]+\\/))>/gi)) {\n\t\t\treturn markup;\n\t\t}\n\n\t\t// Replace carriage returns\n\t\tlet nextMarkup = markup.replace(/\\r\\n/g, '\\n');\n\n\t\t// Replace long line feeds\n\t\tnextMarkup = nextMarkup.replace(/\\n{3,}/g, '\\n\\n\\n');\n\n\t\t// Replace line feeds with ` `s\n\t\tnextMarkup = nextMarkup.replace(/\\n/g, ' ');\n\n\t\treturn nextMarkup;\n\t}\n\n\t/**\n\t * Create a detached HTML document that allows for easy HTML\n\t * parsing while not triggering scripts or loading external\n\t * resources.\n\t */\n\tcreateContainer(markup: string): HTMLElement | undefined {\n\t\tconst factory =\n\t\t\t(typeof global !== 'undefined' && global.INTERWEAVE_SSR_POLYFILL) || createDocument;\n\t\tconst doc = factory();\n\n\t\tif (!doc) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tconst tag = this.props.containerTagName ?? 'body';\n\t\tconst el = tag === 'body' || tag === 'fragment' ? doc.body : doc.createElement(tag);\n\n\t\tif (markup.match(INVALID_ROOTS)) {\n\t\t\tif (__DEV__) {\n\t\t\t\tthrow new Error('HTML documents as Interweave content are not supported.');\n\t\t\t}\n\t\t} else {\n\t\t\tel.innerHTML = this.convertLineBreaks(this.props.escapeHtml ? escapeHtml(markup) : markup);\n\t\t}\n\n\t\treturn el;\n\t}\n\n\t/**\n\t * Convert an elements attribute map to an object map.\n\t * Returns null if no attributes are defined.\n\t */\n\textractAttributes(node: HTMLElement): Attributes | null {\n\t\tconst { allowAttributes } = this.props;\n\t\tconst attributes: Attributes = {};\n\t\tlet count = 0;\n\n\t\tif (node.nodeType !== ELEMENT_NODE || !node.attributes) {\n\t\t\treturn null;\n\t\t}\n\n\t\t// @ts-expect-error Cant type iterator\n\t\t[...node.attributes].forEach((attr: Attr) => {\n\t\t\tconst { name, value } = attr;\n\t\t\tconst newName = name.toLowerCase();\n\t\t\tconst filter = ATTRIBUTES[newName] || ATTRIBUTES[name];\n\n\t\t\t// Verify the node is safe from attacks\n\t\t\tif (!this.isSafe(node)) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Do not allow denied attributes, excluding ARIA attributes\n\t\t\t// Do not allow events or XSS injections\n\t\t\tif (\n\t\t\t\t!newName.match(ALLOWED_ATTRS) &&\n\t\t\t\t((!allowAttributes && (!filter || filter === FILTER_DENY)) ||\n\t\t\t\t\tnewName.startsWith('on') ||\n\t\t\t\t\tvalue.replace(/(\\s|\\0|([9AD]);)/, '').match(/(javascript|vbscript|livescript|xss):/i))\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Apply attribute filters\n\t\t\tlet newValue: AttributeValue = newName === 'style' ? this.extractStyleAttribute(node) : value;\n\n\t\t\t// Cast to boolean\n\t\t\tif (filter === FILTER_CAST_BOOL) {\n\t\t\t\tnewValue = true;\n\n\t\t\t\t// Cast to number\n\t\t\t} else if (filter === FILTER_CAST_NUMBER) {\n\t\t\t\tnewValue = Number.parseFloat(String(newValue));\n\n\t\t\t\t// Cast to string\n\t\t\t} else if (filter !== FILTER_NO_CAST) {\n\t\t\t\tnewValue = String(newValue);\n\t\t\t}\n\n\t\t\tattributes[ATTRIBUTES_TO_PROPS[newName] || newName] = this.applyAttributeFilters(\n\t\t\t\tnewName as keyof ElementAttributes,\n\t\t\t\tnewValue,\n\t\t\t) as AttributeValue;\n\t\t\tcount += 1;\n\t\t});\n\n\t\tif (count === 0) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn attributes;\n\t}\n\n\t/**\n\t * Extract the style attribute as an object and remove values that allow for attack vectors.\n\t */\n\textractStyleAttribute(node: HTMLElement): object {\n\t\tconst styles: Record = {};\n\n\t\t// eslint-disable-next-line unicorn/prefer-spread\n\t\tArray.from(node.style).forEach((key) => {\n\t\t\tconst value = node.style[key as keyof CSSStyleDeclaration];\n\n\t\t\tif (typeof value === 'string' || typeof value === 'number') {\n\t\t\t\tstyles[key.replace(/-([a-z])/g, (match, letter) => String(letter).toUpperCase())] = value;\n\t\t\t}\n\t\t});\n\n\t\treturn styles;\n\t}\n\n\t/**\n\t * Return configuration for a specific tag.\n\t */\n\tgetTagConfig(tagName: string): NodeConfig {\n\t\tconst common = {\n\t\t\tchildren: [],\n\t\t\tcontent: 0,\n\t\t\tinvalid: [],\n\t\t\tparent: [],\n\t\t\tself: true,\n\t\t\ttagName: '',\n\t\t\ttype: 0,\n\t\t\tvoid: false,\n\t\t};\n\n\t\t// Only spread when a tag config exists,\n\t\t// otherwise we use the empty `tagName`\n\t\t// for parent config inheritance.\n\t\tif (TAGS[tagName]) {\n\t\t\treturn {\n\t\t\t\t...common,\n\t\t\t\t...TAGS[tagName],\n\t\t\t\ttagName,\n\t\t\t};\n\t\t}\n\n\t\treturn common;\n\t}\n\n\t/**\n\t * Verify that a node is safe from XSS and injection attacks.\n\t */\n\tisSafe(node: HTMLElement): boolean {\n\t\t// URLs should only support HTTP, email and phone numbers\n\t\tif (typeof HTMLAnchorElement !== 'undefined' && node instanceof HTMLAnchorElement) {\n\t\t\tconst href = node.getAttribute('href');\n\n\t\t\t// Fragment protocols start with about:\n\t\t\t// So let's just allow them\n\t\t\tif (href?.startsWith('#')) {\n\t\t\t\treturn true;\n\t\t\t}\n\n\t\t\tconst protocol = node.protocol.toLowerCase();\n\n\t\t\treturn (\n\t\t\t\tprotocol === ':' ||\n\t\t\t\tprotocol === 'http:' ||\n\t\t\t\tprotocol === 'https:' ||\n\t\t\t\tprotocol === 'mailto:' ||\n\t\t\t\tprotocol === 'tel:'\n\t\t\t);\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Verify that an HTML tag is allowed to render.\n\t */\n\tisTagAllowed(tagName: string): boolean {\n\t\tif (this.banned.has(tagName) || this.blocked.has(tagName)) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n\t\treturn this.props.allowElements || this.allowed.has(tagName);\n\t}\n\n\t/**\n\t * Parse the markup by injecting it into a detached document,\n\t * while looping over all child nodes and generating an\n\t * array to interpolate into JSX.\n\t */\n\tparse(): Node[] {\n\t\tif (!this.container) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn this.parseNode(this.container, this.getTagConfig(this.container.nodeName.toLowerCase()));\n\t}\n\n\t/**\n\t * Loop over the nodes children and generate a\n\t * list of text nodes and React elements.\n\t */\n\tparseNode(parentNode: HTMLElement, parentConfig: NodeConfig): Node[] {\n\t\tconst {\n\t\t\tnoHtml,\n\t\t\tnoHtmlExceptMatchers,\n\t\t\tallowElements,\n\t\t\ttransform,\n\t\t\ttransformOnlyAllowList,\n\t\t} = this.props;\n\t\tlet content: Node[] = [];\n\t\tlet mergedText = '';\n\n\t\t// @ts-expect-error Cant type iterator\n\t\t[...parentNode.childNodes].forEach((node: ChildNode) => {\n\t\t\t// Create React elements from HTML elements\n\t\t\tif (node.nodeType === ELEMENT_NODE) {\n\t\t\t\tconst tagName = node.nodeName.toLowerCase();\n\t\t\t\tconst config = this.getTagConfig(tagName);\n\n\t\t\t\t// Persist any previous text\n\t\t\t\tif (mergedText) {\n\t\t\t\t\tcontent.push(mergedText);\n\t\t\t\t\tmergedText = '';\n\t\t\t\t}\n\n\t\t\t\t// Apply node filters first\n\t\t\t\tconst nextNode = this.applyNodeFilters(tagName, node as HTMLElement);\n\n\t\t\t\tif (!nextNode) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Apply transformation second\n\t\t\t\tlet children;\n\n\t\t\t\tif (transform && !(transformOnlyAllowList && !this.isTagAllowed(tagName))) {\n\t\t\t\t\tthis.keyIndex += 1;\n\t\t\t\t\tconst key = this.keyIndex;\n\n\t\t\t\t\t// Must occur after key is set\n\t\t\t\t\tchildren = this.parseNode(nextNode, config);\n\n\t\t\t\t\tconst transformed = transform(nextNode, children, config);\n\n\t\t\t\t\tif (transformed === null) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif (typeof transformed !== 'undefined') {\n\t\t\t\t\t\tcontent.push(React.cloneElement(transformed as React.ReactElement, { key }));\n\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Reset as we're not using the transformation\n\t\t\t\t\tthis.keyIndex = key - 1;\n\t\t\t\t}\n\n\t\t\t\t// Never allow these tags (except via a transformer)\n\t\t\t\tif (this.banned.has(tagName)) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Only render when the following criteria is met:\n\t\t\t\t// - HTML has not been disabled\n\t\t\t\t// - Tag is allowed\n\t\t\t\t// - Child is valid within the parent\n\t\t\t\tif (\n\t\t\t\t\t!(noHtml || (noHtmlExceptMatchers && tagName !== 'br')) &&\n\t\t\t\t\tthis.isTagAllowed(tagName) &&\n\t\t\t\t\t(allowElements || this.canRenderChild(parentConfig, config))\n\t\t\t\t) {\n\t\t\t\t\tthis.keyIndex += 1;\n\n\t\t\t\t\t// Build the props as it makes it easier to test\n\t\t\t\t\tconst attributes = this.extractAttributes(nextNode);\n\t\t\t\t\tconst elementProps: ElementProps = {\n\t\t\t\t\t\ttagName,\n\t\t\t\t\t};\n\n\t\t\t\t\tif (attributes) {\n\t\t\t\t\t\telementProps.attributes = attributes;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (config.void) {\n\t\t\t\t\t\telementProps.selfClose = config.void;\n\t\t\t\t\t}\n\n\t\t\t\t\tcontent.push(\n\t\t\t\t\t\tReact.createElement(\n\t\t\t\t\t\t\tElement,\n\t\t\t\t\t\t\t{ ...elementProps, key: this.keyIndex },\n\t\t\t\t\t\t\tchildren ?? this.parseNode(nextNode, config),\n\t\t\t\t\t\t),\n\t\t\t\t\t);\n\n\t\t\t\t\t// Render the children of the current element only.\n\t\t\t\t\t// Important: If the current element is not allowed,\n\t\t\t\t\t// use the parent element for the next scope.\n\t\t\t\t} else {\n\t\t\t\t\tcontent = [\n\t\t\t\t\t\t...content,\n\t\t\t\t\t\t...this.parseNode(nextNode, config.tagName ? config : parentConfig),\n\t\t\t\t\t];\n\t\t\t\t}\n\n\t\t\t\t// Apply matchers if a text node\n\t\t\t} else if (node.nodeType === TEXT_NODE) {\n\t\t\t\tconst text =\n\t\t\t\t\tnoHtml && !noHtmlExceptMatchers\n\t\t\t\t\t\t? node.textContent\n\t\t\t\t\t\t: // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n\t\t\t\t\t\t this.applyMatchers(node.textContent || '', parentConfig);\n\n\t\t\t\tif (Array.isArray(text)) {\n\t\t\t\t\tcontent = [...content, ...text];\n\t\t\t\t} else {\n\t\t\t\t\tmergedText += text!;\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tif (mergedText) {\n\t\t\tcontent.push(mergedText);\n\t\t}\n\n\t\treturn content;\n\t}\n\n\t/**\n\t * Deconstruct the string into an array, by replacing custom tokens with React elements,\n\t * so that React can render it correctly.\n\t */\n\treplaceTokens(tokenizedString: string, elements: MatcherElementsMap): ChildrenNode {\n\t\tif (!tokenizedString.includes('{{{')) {\n\t\t\treturn tokenizedString;\n\t\t}\n\n\t\tconst nodes: Node[] = [];\n\t\tlet text = tokenizedString;\n\t\tlet open: RegExpMatchArray | null = null;\n\n\t\t// Find an open token tag\n\t\twhile ((open = text.match(OPEN_TOKEN))) {\n\t\t\tconst [match, tokenName] = open;\n\t\t\tconst startIndex = open.index!;\n\t\t\tconst isVoid = match.includes('/');\n\n\t\t\tif (__DEV__ && !elements[tokenName]) {\n\t\t\t\tthrow new Error(`Token \"${tokenName}\" found but no matching element to replace with.`);\n\t\t\t}\n\n\t\t\t// Extract the previous non-token text\n\t\t\tif (startIndex > 0) {\n\t\t\t\tnodes.push(text.slice(0, startIndex));\n\n\t\t\t\t// Reduce text so that the closing tag will be found after the opening\n\t\t\t\ttext = text.slice(startIndex);\n\t\t\t}\n\n\t\t\tconst { children, matcher, props: elementProps } = elements[tokenName];\n\t\t\tlet endIndex: number;\n\n\t\t\t// Use tag as-is if void\n\t\t\tif (isVoid) {\n\t\t\t\tendIndex = match.length;\n\n\t\t\t\tnodes.push(matcher.createElement(children, elementProps));\n\n\t\t\t\t// Find the closing tag if not void\n\t\t\t} else {\n\t\t\t\tconst close = text.match(new RegExp(`{{{/${tokenName}}}}`))!;\n\n\t\t\t\tif (__DEV__ && !close) {\n\t\t\t\t\tthrow new Error(`Closing token missing for interpolated element \"${tokenName}\".`);\n\t\t\t\t}\n\n\t\t\t\tendIndex = close.index! + close[0].length;\n\n\t\t\t\tnodes.push(\n\t\t\t\t\tmatcher.createElement(\n\t\t\t\t\t\tthis.replaceTokens(text.slice(match.length, close.index), elements),\n\t\t\t\t\t\telementProps,\n\t\t\t\t\t),\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t// Reduce text for the next interation\n\t\t\ttext = text.slice(endIndex);\n\t\t}\n\n\t\t// Extra the remaining text\n\t\tif (text.length > 0) {\n\t\t\tnodes.push(text);\n\t\t}\n\n\t\t// Reduce to a string if possible\n\t\tif (nodes.length === 0) {\n\t\t\treturn '';\n\t\t}\n\t\tif (nodes.length === 1 && typeof nodes[0] === 'string') {\n\t\t\treturn nodes[0];\n\t\t}\n\n\t\treturn nodes;\n\t}\n}\n","/* eslint-disable react/jsx-fragments */\n\nimport React from 'react';\nimport { Element } from './Element';\nimport { Parser } from './Parser';\nimport { MarkupProps } from './types';\n\nexport function Markup(props: MarkupProps) {\n\tconst {\n\t\tattributes,\n\t\tclassName,\n\t\tcontainerTagName,\n\t\tcontent,\n\t\temptyContent,\n\t\tparsedContent,\n\t\ttagName,\n\t\tnoWrap: baseNoWrap,\n\t} = props;\n\tconst tag = containerTagName ?? tagName ?? 'span';\n\tconst noWrap = tag === 'fragment' ? true : baseNoWrap;\n\tlet mainContent;\n\n\tif (parsedContent) {\n\t\tmainContent = parsedContent;\n\t} else {\n\t\tconst markup = new Parser(content ?? '', props).parse();\n\n\t\tif (markup.length > 0) {\n\t\t\tmainContent = markup;\n\t\t}\n\t}\n\n\tif (!mainContent) {\n\t\tmainContent = emptyContent;\n\t}\n\n\tif (noWrap) {\n\t\t// eslint-disable-next-line react/jsx-no-useless-fragment\n\t\treturn {mainContent};\n\t}\n\n\treturn (\n\t\t\n\t\t\t{mainContent}\n\t\t\n\t);\n}\n","/* eslint-disable promise/prefer-await-to-callbacks */\nimport React from 'react';\nimport { Markup } from './Markup';\nimport { Parser } from './Parser';\nimport { InterweaveProps } from './types';\n\nexport function Interweave(props: InterweaveProps) {\n\tconst {\n\t\tattributes,\n\t\tclassName,\n\t\tcontent = '',\n\t\tdisableFilters = false,\n\t\tdisableMatchers = false,\n\t\temptyContent = null,\n\t\tfilters = [],\n\t\tmatchers = [],\n\t\tonAfterParse = null,\n\t\tonBeforeParse = null,\n\t\ttagName = 'span',\n\t\tnoWrap = false,\n\t\t...parserProps\n\t} = props;\n\tconst allMatchers = disableMatchers ? [] : matchers;\n\tconst allFilters = disableFilters ? [] : filters;\n\tconst beforeCallbacks = onBeforeParse ? [onBeforeParse] : [];\n\tconst afterCallbacks = onAfterParse ? [onAfterParse] : [];\n\n\t// Inherit callbacks from matchers\n\tallMatchers.forEach((matcher) => {\n\t\tif (matcher.onBeforeParse) {\n\t\t\tbeforeCallbacks.push(matcher.onBeforeParse.bind(matcher));\n\t\t}\n\n\t\tif (matcher.onAfterParse) {\n\t\t\tafterCallbacks.push(matcher.onAfterParse.bind(matcher));\n\t\t}\n\t});\n\n\t// Trigger before callbacks\n\tconst markup = beforeCallbacks.reduce((string, callback) => {\n\t\tconst nextString = callback(string, props);\n\n\t\tif (__DEV__ && typeof nextString !== 'string') {\n\t\t\tthrow new TypeError('Interweave `onBeforeParse` must return a valid HTML string.');\n\t\t}\n\n\t\treturn nextString;\n\t}, content ?? '');\n\n\t// Parse the markup\n\tconst parser = new Parser(markup, parserProps, allMatchers, allFilters);\n\n\t// Trigger after callbacks\n\tconst nodes = afterCallbacks.reduce((parserNodes, callback) => {\n\t\tconst nextNodes = callback(parserNodes, props);\n\n\t\tif (__DEV__ && !Array.isArray(nextNodes)) {\n\t\t\tthrow new TypeError(\n\t\t\t\t'Interweave `onAfterParse` must return an array of strings and React elements.',\n\t\t\t);\n\t\t}\n\n\t\treturn nextNodes;\n\t}, parser.parse());\n\n\treturn (\n\t\t\n\t);\n}\n","import { Box, Grid, Icon, Typography } from '@mui/material';\nimport { makeStyles } from '@mui/styles';\nimport clsx from 'clsx';\nimport { Interweave } from 'interweave';\nimport { useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport { SEMANTIC_GROUP_ICONS } from 'constants';\nimport {\n\tuseSharedSlice,\n\tselectLabelDetailDescription,\n\tselectLabelDetailTitle,\n\tselectLabelMap,\n} from 'reducers/shared';\n\nconst useStyles = makeStyles((theme) => ({\n\ticonContainer: {\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\tbackground: '#A85400',\n\t\twidth: 50,\n\t\theight: 50,\n\t\tborderRadius: '50%',\n\t\tmarginRight: 5,\n\t},\n\ticon: {\n\t\tfontSize: '2rem',\n\t\tcolor: 'white',\n\t},\n\ttitleContainer: {\n\t\tmargin: '0 20px',\n\t},\n}));\n\nexport function GroupLabelRenderer({\n\tlabel,\n\theadingConfig = {},\n\theadingLevel = 1,\n\tisIconVisible = false,\n}) {\n\tconst { updateCurrentLabelDetail, fetchSemanticByLabelAction } =\n\t\tuseSharedSlice();\n\tconst classes = useStyles();\n\n\tconst dispatch = useDispatch();\n\n\tconst labelCache = useSelector(selectLabelMap);\n\tconst labelTitle = useSelector(selectLabelDetailTitle);\n\tconst labelDescription = useSelector(selectLabelDetailDescription);\n\n\tconst decodedLabel = encodeURIComponent(label);\n\tuseEffect(() => {\n\t\tif (!decodedLabel) return;\n\n\t\tif (!labelCache[decodedLabel]) {\n\t\t\tconst payload = {\n\t\t\t\tlabel: decodedLabel,\n\t\t\t};\n\t\t\tdispatch(fetchSemanticByLabelAction(payload));\n\t\t} else dispatch(updateCurrentLabelDetail(labelCache[decodedLabel]));\n\t}, [labelCache[decodedLabel]]);\n\n\treturn decodedLabel ? (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{isIconVisible && (\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{SEMANTIC_GROUP_ICONS[labelTitle] ||\n\t\t\t\t\t\t\t\t\tSEMANTIC_GROUP_ICONS['default']}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t)}\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{labelTitle}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t{/* */}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t) : null;\n}\n","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getAppBarUtilityClass(slot) {\n return generateUtilityClass('MuiAppBar', slot);\n}\nconst appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning']);\nexport default appBarClasses;","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"className\", \"color\", \"enableColorOnDark\", \"position\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport composeClasses from '@mui/utils/composeClasses';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport capitalize from '../utils/capitalize';\nimport Paper from '../Paper';\nimport { getAppBarUtilityClass } from './appBarClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n color,\n position,\n classes\n } = ownerState;\n const slots = {\n root: ['root', `color${capitalize(color)}`, `position${capitalize(position)}`]\n };\n return composeClasses(slots, getAppBarUtilityClass, classes);\n};\n\n// var2 is the fallback.\n// Ex. var1: 'var(--a)', var2: 'var(--b)'; return: 'var(--a, var(--b))'\nconst joinVars = (var1, var2) => var1 ? `${var1 == null ? void 0 : var1.replace(')', '')}, ${var2})` : var2;\nconst AppBarRoot = styled(Paper, {\n name: 'MuiAppBar',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, styles[`position${capitalize(ownerState.position)}`], styles[`color${capitalize(ownerState.color)}`]];\n }\n})(({\n theme,\n ownerState\n}) => {\n const backgroundColorDefault = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];\n return _extends({\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n boxSizing: 'border-box',\n // Prevent padding issue with the Modal and fixed positioned AppBar.\n flexShrink: 0\n }, ownerState.position === 'fixed' && {\n position: 'fixed',\n zIndex: (theme.vars || theme).zIndex.appBar,\n top: 0,\n left: 'auto',\n right: 0,\n '@media print': {\n // Prevent the app bar to be visible on each printed page.\n position: 'absolute'\n }\n }, ownerState.position === 'absolute' && {\n position: 'absolute',\n zIndex: (theme.vars || theme).zIndex.appBar,\n top: 0,\n left: 'auto',\n right: 0\n }, ownerState.position === 'sticky' && {\n // ⚠️ sticky is not supported by IE11.\n position: 'sticky',\n zIndex: (theme.vars || theme).zIndex.appBar,\n top: 0,\n left: 'auto',\n right: 0\n }, ownerState.position === 'static' && {\n position: 'static'\n }, ownerState.position === 'relative' && {\n position: 'relative'\n }, !theme.vars && _extends({}, ownerState.color === 'default' && {\n backgroundColor: backgroundColorDefault,\n color: theme.palette.getContrastText(backgroundColorDefault)\n }, ownerState.color && ownerState.color !== 'default' && ownerState.color !== 'inherit' && ownerState.color !== 'transparent' && {\n backgroundColor: theme.palette[ownerState.color].main,\n color: theme.palette[ownerState.color].contrastText\n }, ownerState.color === 'inherit' && {\n color: 'inherit'\n }, theme.palette.mode === 'dark' && !ownerState.enableColorOnDark && {\n backgroundColor: null,\n color: null\n }, ownerState.color === 'transparent' && _extends({\n backgroundColor: 'transparent',\n color: 'inherit'\n }, theme.palette.mode === 'dark' && {\n backgroundImage: 'none'\n })), theme.vars && _extends({}, ownerState.color === 'default' && {\n '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette.AppBar.defaultBg : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette.AppBar.defaultBg),\n '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette.text.primary : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette.text.primary)\n }, ownerState.color && !ownerState.color.match(/^(default|inherit|transparent)$/) && {\n '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].main : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main),\n '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].contrastText : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette[ownerState.color].contrastText)\n }, {\n backgroundColor: 'var(--AppBar-background)',\n color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)'\n }, ownerState.color === 'transparent' && {\n backgroundImage: 'none',\n backgroundColor: 'transparent',\n color: 'inherit'\n }));\n});\nconst AppBar = /*#__PURE__*/React.forwardRef(function AppBar(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiAppBar'\n });\n const {\n className,\n color = 'primary',\n enableColorOnDark = false,\n position = 'fixed'\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = _extends({}, props, {\n color,\n position,\n enableColorOnDark\n });\n const classes = useUtilityClasses(ownerState);\n return /*#__PURE__*/_jsx(AppBarRoot, _extends({\n square: true,\n component: \"header\",\n ownerState: ownerState,\n elevation: 4,\n className: clsx(classes.root, className, position === 'fixed' && 'mui-fixed'),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? AppBar.propTypes /* remove-proptypes */ = {\n // ┌────────────────────────────── Warning ──────────────────────────────┐\n // │ These PropTypes are generated from the TypeScript type definitions. │\n // │ To update them, edit the d.ts file and run `pnpm proptypes`. │\n // └─────────────────────────────────────────────────────────────────────┘\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The color of the component.\n * It supports both default and custom theme colors, which can be added as shown in the\n * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).\n * @default 'primary'\n */\n color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent', 'error', 'info', 'success', 'warning']), PropTypes.string]),\n /**\n * If true, the `color` prop is applied in dark mode.\n * @default false\n */\n enableColorOnDark: PropTypes.bool,\n /**\n * The positioning type. The behavior of the different options is described\n * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).\n * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.\n * @default 'fixed'\n */\n position: PropTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'sticky']),\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])\n} : void 0;\nexport default AppBar;","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"className\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport composeClasses from '@mui/utils/composeClasses';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport { getListItemIconUtilityClass } from './listItemIconClasses';\nimport ListContext from '../List/ListContext';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n alignItems,\n classes\n } = ownerState;\n const slots = {\n root: ['root', alignItems === 'flex-start' && 'alignItemsFlexStart']\n };\n return composeClasses(slots, getListItemIconUtilityClass, classes);\n};\nconst ListItemIconRoot = styled('div', {\n name: 'MuiListItemIcon',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, ownerState.alignItems === 'flex-start' && styles.alignItemsFlexStart];\n }\n})(({\n theme,\n ownerState\n}) => _extends({\n minWidth: 56,\n color: (theme.vars || theme).palette.action.active,\n flexShrink: 0,\n display: 'inline-flex'\n}, ownerState.alignItems === 'flex-start' && {\n marginTop: 8\n}));\n\n/**\n * A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.\n */\nconst ListItemIcon = /*#__PURE__*/React.forwardRef(function ListItemIcon(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiListItemIcon'\n });\n const {\n className\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const context = React.useContext(ListContext);\n const ownerState = _extends({}, props, {\n alignItems: context.alignItems\n });\n const classes = useUtilityClasses(ownerState);\n return /*#__PURE__*/_jsx(ListItemIconRoot, _extends({\n className: clsx(classes.root, className),\n ownerState: ownerState,\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? ListItemIcon.propTypes /* remove-proptypes */ = {\n // ┌────────────────────────────── Warning ──────────────────────────────┐\n // │ These PropTypes are generated from the TypeScript type definitions. │\n // │ To update them, edit the d.ts file and run `pnpm proptypes`. │\n // └─────────────────────────────────────────────────────────────────────┘\n /**\n * The content of the component, normally `Icon`, `SvgIcon`,\n * or a `@mui/icons-material` SVG icon element.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])\n} : void 0;\nexport default ListItemIcon;","import React, { useEffect } from 'react';\nimport Box from '@mui/material/Box';\nimport Avatar from '@mui/material/Avatar';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport Divider from '@mui/material/Divider';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport Logout from '@mui/icons-material/Logout';\nimport { useAuthSlice } from 'reducers/auth';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { selectUserName } from 'reducers/user/selector';\nimport { Typography } from '@mui/material';\nimport { useUserSlice } from 'reducers/user';\nimport { makeStyles } from '@mui/styles';\n\nconst useStyles = makeStyles((theme) => ({\n\tfocusVisible: {\n\t\t'&:focus': {\n\t\t\tprofileIcon: {\n\t\t\t\tbackgroundColor: '#ffffff',\n\t\t\t\tcolor: '#3374C1',\n\t\t\t},\n\t\t},\n\t},\n\tprofileIcon: {\n\t\tbackgroundColor: '#ffffff',\n\t\tcolor: '#3374C1',\n\t\t'&:focus': {\n\t\t\t'& span': {\n\t\t\t\tbackgroundColor: '#ffffff',\n\t\t\t\tcolor: 'white',\n\t\t\t},\n\t\t},\n\t},\n}));\n\nexport default function AccountMenu() {\n\tconst classes = useStyles();\n\tconst { logoutAction } = useAuthSlice();\n\tconst { fetchCurrentUserDetail } = useUserSlice();\n\tconst dispatch = useDispatch();\n\n\tconst username = useSelector(selectUserName);\n\n\tconst [anchorEl, setAnchorEl] = React.useState(null);\n\tconst open = Boolean(anchorEl);\n\n\tconst handleClick = (event) => {\n\t\tsetAnchorEl(event.currentTarget);\n\t};\n\tconst handleClose = () => {\n\t\tsetAnchorEl(null);\n\t};\n\n\tconst handleLogout = () => {\n\t\tdispatch(logoutAction());\n\t};\n\n\tuseEffect(() => {\n\t\tif (!username) {\n\t\t\tdispatch(fetchCurrentUserDetail());\n\t\t}\n\t}, [username]);\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{username?.charAt(0)?.toUpperCase()}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n","import AppBar from '@mui/material/AppBar';\nimport Box from '@mui/material/Box';\nimport Toolbar from '@mui/material/Toolbar';\nimport IconButton from '@mui/material/IconButton';\nimport Typography from '@mui/material/Typography';\nimport MenuIcon from '@mui/icons-material/Menu';\nimport Container from '@mui/material/Container';\nimport AccountMenu from './AccountMenu';\nimport { makeStyles } from '@mui/styles';\nimport { DEQUE_LOGO } from 'assets/images/common';\nimport { useNavigate } from 'react-router-dom';\n\nconst useStyles = makeStyles((theme) => ({\n\tlogoContainer: {\n\t\tdisplay: 'flex',\n\t\tmarginRight: 2,\n\t},\n\tlogo: {\n\t\tmaxHeight: 54,\n\t\tcursor: 'pointer',\n\t\tverticalAlign: 'middle',\n\t},\n\theaderNoShadow: {\n\t\tboxShadow: 'none',\n\t},\n}));\n\nconst ResponsiveAppBar = () => {\n\tconst classes = useStyles();\n\n\tconst navigate = useNavigate();\n\n\tconst handleLogoClick = () => {\n\t\tnavigate('/');\n\t};\n\n\treturn (\n\t\t theme.zIndex.drawer + 1 }}\n\t\t\tclassName={classes.headerNoShadow}\n\t\t>\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t {}}\n\t\t\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tAxe For Designers\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n};\nexport default ResponsiveAppBar;\n","import AppBar from '@mui/material/AppBar';\nimport Toolbar from '@mui/material/Toolbar';\nimport Typography from '@mui/material/Typography';\nimport Container from '@mui/material/Container';\nimport Grid from '@mui/material/Grid';\nimport clsx from 'clsx';\nimport { makeStyles } from '@mui/styles';\nimport { DEQUE_LOGO } from 'assets/images/common';\nimport { useNavigate, useLocation } from 'react-router-dom';\nimport { AuthMessageContainer } from 'components';\n\nconst useStyles = makeStyles((theme) => ({\n\trootContainer: {},\n\tlogoContainer: {\n\t\tdisplay: 'flex',\n\t\tmarginRight: 2,\n\t},\n\tlogoLink: {\n\t\tmargin: '10px 0 0 0',\n\t},\n\tlogo: {\n\t\tmaxHeight: 50,\n\t\tcursor: 'pointer',\n\t},\n\trightContainer: {\n\t\tbackgroundColor: theme.palette.white,\n\t\tpaddingRight: 18,\n\t\tminHeight: 54,\n\t\tpaddingTop: 5,\n\t},\n}));\n\nexport const AuthHeader = ({ className, ...props }) => {\n\tconst classes = useStyles();\n\tconst navigate = useNavigate();\n\tconst { pathname } = useLocation();\n\n\tconst handleLogoClick = () => {\n\t\tnavigate('/login');\n\t};\n\n\tconst handleFocus = (event) => {\n\t\tlet targetElem = event.target;\n\t\ttargetElem.setAttribute('style', \"border-bottom:'2px solid white'\");\n\t};\n\n\tconst onBlur = (event) => {\n\t\tlet targetElem = event.target;\n\t\ttargetElem.removeAttribute('style');\n\t};\n\n\tconst headerAction =\n\t\tpathname === '/login' ? (\n\t\t\t\n\t\t) : (\n\t\t\t\n\t\t);\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t{headerAction}\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n};\n","import AppBar from '@mui/material/AppBar';\nimport Toolbar from '@mui/material/Toolbar';\nimport Typography from '@mui/material/Typography';\nimport Container from '@mui/material/Container';\nimport Grid from '@mui/material/Grid';\nimport clsx from 'clsx';\nimport { makeStyles } from '@mui/styles';\nimport { DEQUE_LOGO } from 'assets/images/common';\nimport { useNavigate } from 'react-router-dom';\n\nconst useStyles = makeStyles((theme) => ({\n\trootContainer: {},\n\tlogoContainer: {\n\t\tdisplay: 'flex',\n\t\tmarginRight: 2,\n\t},\n\tlogoLink: {\n\t\tmargin: '3px 0 0 0',\n\t},\n\tlogo: {\n\t\tmaxHeight: 50,\n\t\tcursor: 'pointer',\n\t},\n\trightContainer: {\n\t\tbackgroundColor: theme.palette.white,\n\t\tpaddingRight: 18,\n\t\tminHeight: 54,\n\t\tpaddingTop: 15,\n\t},\n\tcenter: {\n\t\tmargin: '0 auto',\n\t},\n}));\n\nexport const PublicHeader = ({ className, ...props }) => {\n\tconst classes = useStyles();\n\tconst navigate = useNavigate();\n\n\tconst handleLogoClick = () => {\n\t\tnavigate('/');\n\t};\n\n\tconst handleFocus = (event) => {\n\t\tlet targetElem = event.target;\n\t\ttargetElem.setAttribute('style', \"border-bottom:'2px solid white'\");\n\t};\n\n\tconst onBlur = (event) => {\n\t\tlet targetElem = event.target;\n\t\ttargetElem.removeAttribute('style');\n\t};\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tAxe For Designers\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n};\n","import AppBar from '@mui/material/AppBar';\nimport Box from '@mui/material/Box';\nimport Toolbar from '@mui/material/Toolbar';\nimport IconButton from '@mui/material/IconButton';\nimport Typography from '@mui/material/Typography';\nimport MenuIcon from '@mui/icons-material/Menu';\nimport Container from '@mui/material/Container';\nimport AccountMenu from './AccountMenu';\nimport { makeStyles } from '@mui/styles';\nimport { DEQUE_LOGO } from 'assets/images/common';\nimport { useNavigate } from 'react-router-dom';\n\nconst useStyles = makeStyles((theme) => ({\n\tlogoContainer: {\n\t\tmarginRight: 2,\n\t},\n\tlogoLink: {\n\t\tmargin: '3px 0 0 0',\n\t},\n\tlogo: {\n\t\tmaxHeight: 54,\n\t\tcursor: 'pointer',\n\t\tverticalAlign: 'middle',\n\t},\n\theaderNoShadow: {\n\t\tboxShadow: 'none',\n\t},\n\ttitleText: {\n\t\tfontSize: '1.4rem',\n\t},\n}));\n\nexport const Header = ({ handler, noAccountMenu = false, ...props }) => {\n\tconst classes = useStyles();\n\n\tconst navigate = useNavigate();\n\n\tconst handleLogoClick = () => {\n\t\tnavigate('/');\n\t};\n\n\tconst handleFocus = (event) => {\n\t\tlet targetElem = event.target;\n\t\ttargetElem.setAttribute('style', \"border-bottom:'2px solid white'\");\n\t};\n\n\tconst onBlur = (event) => {\n\t\tlet targetElem = event.target;\n\t\ttargetElem.removeAttribute('style');\n\t};\n\n\treturn (\n\t\t theme.zIndex.drawer + 1 }}\n\t\t\t{...props}\n\t\t\tclassName={classes.headerNoShadow}\n\t\t>\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t handler()}\n\t\t\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tAxe For Designers\n\t\t\t\t\t\n\t\t\t\t\t{!noAccountMenu && (\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t)}\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n};\n\nexport * from './Header';\nexport * from './AuthHeader';\nexport * from './PublicHeader';\n","import { Box, styled } from '@mui/material';\nimport { LoadingIndicator } from 'common/LoadingIndicator';\nimport { lazyLoad } from 'utils/loadable';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n\twidth: '100%',\n\theight: '70vh',\n\tdisplay: 'flex',\n\talignItems: 'center',\n\tjustifyContent: 'center',\n}));\n\nexport const NotificationContainer = lazyLoad(\n\t() => import('./NotificationContainer'),\n\t(module) => module.NotificationContainer,\n\t{\n\t\tfallback: (\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t),\n\t},\n);\n","import { Fragment } from 'react';\nimport { Outlet } from 'react-router-dom';\n\nexport function PageRouter({ children }) {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t{children}\n\t\t\n\t);\n}\n","import * as React from 'react';\nimport {\n\tList,\n\tListItem,\n\tIcon,\n\tListItemText,\n\tBox,\n\tTypography,\n\tAccordionSummary,\n\tstyled,\n\tuseTheme,\n\tAccordion as MuiAccordion,\n\tAccordionDetails as MuiAccordionDetails,\n} from '@mui/material';\nimport { makeStyles } from '@mui/styles';\nimport clsx from 'clsx';\nimport { NavLink, useLocation } from 'react-router-dom';\nimport AssistantOutlinedIcon from '@mui/icons-material/AssistantOutlined';\nimport SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';\nimport DehazeOutlinedIcon from '@mui/icons-material/DehazeOutlined';\nimport ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined';\n\nimport MenuBookOutlinedIcon from '@mui/icons-material/MenuBookOutlined';\nimport InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';\nimport ScienceOutlinedIcon from '@mui/icons-material/ScienceOutlined';\nimport KeyboardTabIcon from '@mui/icons-material/KeyboardTab';\nimport ExpandMoreOutlinedIcon from '@mui/icons-material/ExpandMoreOutlined';\nimport ExpandLessOutlinedIcon from '@mui/icons-material/ExpandLessOutlined';\n\nconst DRAWER_CONFIG = [\n\t{\n\t\ticon: ,\n\t\ttext: 'A11y Check',\n\t},\n\t{\n\t\ticon: ,\n\t\ttext: 'Annotations',\n\t},\n\t{\n\t\ticon: ,\n\t\ttext: 'Focus Order',\n\t},\n\t{\n\t\ticon: ,\n\t\ttext: 'Documentation',\n\t\tdropicon: ,\n\t\tupicon: ,\n\t\tchild: [\n\t\t\t{\n\t\t\t\ticon: ,\n\t\t\t\ttext: 'How to Use',\n\t\t\t\tlink: 'documentation/howtouse',\n\t\t\t},\n\t\t\t{\n\t\t\t\ticon: ,\n\t\t\t\ttext: 'Product Info',\n\t\t\t\tlink: 'documentation/productinfo',\n\t\t\t},\n\t\t],\n\t},\n\t{\n\t\ticon: ,\n\t\ttext: 'Use Cases',\n\t\tdropicon: ,\n\t\tupicon: ,\n\t\tchild: [\n\t\t\t{\n\t\t\t\ticon: '',\n\t\t\t\ttext: 'Test a text node for color contrast issue',\n\t\t\t\tlink: 'use-cases/test-a-text-node-for-color-contrast-issue',\n\t\t\t},\n\t\t\t{\n\t\t\t\ticon: '',\n\t\t\t\ttext: 'Test a design for all color contrast issues',\n\t\t\t\tlink: 'use-cases/test-a-design-for-all-color-contrast-issues',\n\t\t\t},\n\t\t\t{\n\t\t\t\ticon: '',\n\t\t\t\ttext: 'Test a design for all touch target issues',\n\t\t\t\tlink: 'use-cases/test-a-design-for-all-touch-target-issues',\n\t\t\t},\n\t\t\t{\n\t\t\t\ticon: '',\n\t\t\t\ttext: 'Pass designer intent to developer',\n\t\t\t\tlink: 'use-cases/pass-designer-intent-to-developer',\n\t\t\t},\n\t\t\t{\n\t\t\t\ticon: '',\n\t\t\t\ttext: 'Pass designer intent to developer for form controls in just one click',\n\t\t\t\tlink: 'use-cases/pass-designer-intent-to-developer-for-form-controls-in-just-one-click',\n\t\t\t},\n\t\t],\n\t},\n\t{\n\t\ticon: ,\n\t\ttext: 'Beta Features',\n\t},\n\t// {\n\t// \ticon: 'campaign',\n\t// \ttext: 'Register for Beta Program',\n\t// },\n];\n\nconst useStyles = makeStyles((theme) => ({\n\ticon: {\n\t\tmarginRight: 10,\n\t},\n\ticonMarginRight0: {\n\t\tmarginRight: 0,\n\t},\n\tlistItemContainer: {\n\t\t'&:not(:last-child)': {\n\t\t\tborderBottom: '1px dashed #CCCCCC',\n\t\t},\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'center',\n\t},\n\tlistItem: {\n\t\tcolor: theme.palette.text.secondary,\n\t\ttextDecoration: 'none',\n\t\twidth: 220,\n\t\tpadding: '1rem',\n\t\tborderRadius: 5,\n\t\tmargin: 10,\n\t\tfontSize: 14,\n\t\tmaxHeight: '48px',\n\t},\n\tlistItemHoverFocus: {\n\t\tborderRadius: 5,\n\t\tmaxHeight: '48px',\n\t\t'&:hover': {\n\t\t\tbackgroundColor: theme.palette.sidebar.hover,\n\t\t\tborderRadius: 5,\n\t\t\toutline: 'none',\n\t\t\tboxShadow: 'none !important',\n\t\t},\n\t\t'&:focus': {\n\t\t\tbackgroundColor: theme.palette.sidebar.hover,\n\t\t\tborderRadius: 5,\n\t\t},\n\t},\n\tlistItemActive: {\n\t\tborder: `1px solid ${theme.palette.sidebar.borderActive}`,\n\t\tbackgroundColor: theme.palette.sidebar.hover,\n\t\t'& p': {\n\t\t\tfontWeight: 'bold',\n\t\t\tfontSize: 14,\n\t\t\tmarginTop: 2,\n\t\t},\n\t},\n\tlistItemText: {\n\t\tfontSize: 14,\n\t\tmarginTop: 2,\n\t\t'& span': {\n\t\t\tfontSize: 14,\n\t\t\tmarginTop: 2,\n\t\t},\n\t},\n\tlistItemTextActive: {\n\t\t'& span': {\n\t\t\tfontWeight: 'bold',\n\t\t\tfontSize: 14,\n\t\t\tmarginTop: 2,\n\t\t},\n\t},\n\thoverno: {\n\t\t'&:hover': {\n\t\t\tbackgroundColor: 'unset !important',\n\t\t\tcolor: 'unset !important',\n\t\t\tboxShadow: 'none !important',\n\t\t},\n\t\t'&:focus': {\n\t\t\toutline: 'none',\n\t\t\tboxShadow: 'none',\n\t\t},\n\t},\n\tsubnav: {\n\t\tcolor: theme.palette.text.secondary,\n\t\ttextDecoration: 'none',\n\t\twidth: '100%',\n\t\tpadding: '0.5rem',\n\t\tborderRadius: 5,\n\t\tmargin: 10,\n\t\tboxShadow: 'none',\n\t\tfontSize: 14,\n\t\t'&:hover': {\n\t\t\tbackgroundColor: theme.palette.sidebar.hover,\n\t\t},\n\t},\n\tuseCasesNav: {\n\t\tcolor: theme.palette.text.secondary,\n\t\ttextDecoration: 'none',\n\t\twidth: '100%',\n\t\tpadding: '0.5rem',\n\t\tborderRadius: 5,\n\t\tmargin: 10,\n\t\tboxShadow: 'none',\n\t\tfontSize: 14,\n\t\t'&:hover': {\n\t\t\tbackgroundColor: theme.palette.sidebar.hover,\n\t\t},\n\t},\n\taccordionBtnWrapper: {\n\t\tpaddingLeft: 9,\n\t\tpaddingRight: 10,\n\n\t\t'& a': {\n\t\t\tmaxHeight: 'min-content',\n\t\t},\n\t},\n\tfontSize15: {\n\t\t'& span': {\n\t\t\tfontSize: 15,\n\t\t\tmarginTop: '-2px',\n\t\t},\n\t},\n}));\n\nconst Accordion = styled((props) => (\n\t\n))(({ theme }) => ({\n\tbackgroundColor: 'transparent',\n\twidth: `100%`,\n\ttextAlign: 'left',\n\tpadding: '8px 16px 8px 0px',\n\tborderRadius: 5,\n}));\n\nconst AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({\n\tpadding: '0',\n}));\n\nexport function DrawerContent() {\n\tconst classes = useStyles();\n\tconst general = useTheme().general();\n\tconst { pathname } = useLocation();\n\tconst [expanded, setExpanded] = React.useState(false);\n\n\tconst handleChange = (panel) => (event, isExpanded) => {\n\t\tsetExpanded(isExpanded ? panel : false);\n\t};\n\n\tconst ref = React.useRef(null);\n\n\tReact.useEffect(() => {\n\t\tif (\n\t\t\tpathname == '/documentation/productinfo' ||\n\t\t\tpathname == '/documentation/howtouse'\n\t\t) {\n\t\t\tsetExpanded('panel1');\n\t\t} else if (\n\t\t\tpathname == '/use-cases/test-a-text-node-for-color-contrast-issue' ||\n\t\t\tpathname == '/use-cases/test-a-design-for-all-color-contrast-issues' ||\n\t\t\tpathname == '/use-cases/test-a-design-for-all-touch-target-issues' ||\n\t\t\tpathname ==\n\t\t\t\t'/use-cases/pass-designer-intent-to-developer-for-form-controls-in-just-one-click' ||\n\t\t\tpathname == '/use-cases/pass-designer-intent-to-developer'\n\t\t) {\n\t\t\tsetExpanded('panel2');\n\t\t} else {\n\t\t\tsetExpanded(false);\n\t\t}\n\t}, [pathname]);\n\n\tconst getActiveClassName = (text) => {\n\t\tswitch (pathname) {\n\t\t\tcase '/':\n\t\t\tcase /^\\/report(?:\\/([^\\/]+?))[\\/]?$/i.test(pathname) ? pathname : null:\n\t\t\tcase '/a11y-check':\n\t\t\t\treturn 'a11y check' === text.toLowerCase();\n\t\t\tcase /^\\/annotation(?:\\/([^\\/]+?))[\\/]?$/i.test(pathname)\n\t\t\t\t? pathname\n\t\t\t\t: null:\n\t\t\t\treturn 'annotations' === text.toLowerCase();\n\t\t\tcase /^\\/focus-order(?:\\/([^\\/]+?))[\\/]?$/i.test(pathname) ||\n\t\t\t/^\\/focus-orders$/.test(pathname)\n\t\t\t\t? pathname\n\t\t\t\t: null:\n\t\t\t\treturn 'focus order' === text.toLowerCase();\n\t\t\tdefault:\n\t\t\t\treturn pathname === '/' + text?.replace(' ', '_')?.toLowerCase();\n\t\t}\n\t};\n\n\tconst getNavigationPath = (text) => {\n\t\tswitch (text.toLowerCase()) {\n\t\t\tcase 'documentation':\n\t\t\t\treturn '/documentation';\n\t\t\tcase 'annotations':\n\t\t\t\treturn '/annotations';\n\t\t\tcase 'focus order':\n\t\t\t\treturn '/focus-orders';\n\t\t\tcase 'blogs':\n\t\t\t\treturn '/blogs';\n\t\t\tcase 'beta features':\n\t\t\t\treturn '/beta_features';\n\t\t\tcase 'how to use':\n\t\t\t\treturn '/documentation/howtouse';\n\t\t\tcase 'product info':\n\t\t\t\treturn '/documentation/productinfo';\n\t\t\tcase 'test a text node for color contrast issue':\n\t\t\t\treturn '/use-cases/test-a-text-node-for-color-contrast-issue';\n\t\t\tcase 'test a design for all color contrast issues':\n\t\t\t\treturn '/use-cases/test-a-design-for-all-color-contrast-issues';\n\t\t\tcase 'test a design for all touch target issues':\n\t\t\t\treturn '/use-cases/test-a-design-for-all-touch-target-issues';\n\t\t\tcase 'pass designer intent to developer for form controls in just one click':\n\t\t\t\treturn '/use-cases/pass-designer-intent-to-developer-for-form-controls-in-just-one-click';\n\t\t\tcase 'pass designer intent to developer':\n\t\t\t\treturn '/use-cases/pass-designer-intent-to-developer';\n\t\t\tdefault:\n\t\t\t\treturn '/a11y-check';\n\t\t}\n\t};\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t{DRAWER_CONFIG.map((item) => (\n\t\t\t\t\t\n\t\t\t\t\t\t{item.text == 'Documentation' ? (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{item.icon}\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{expanded === 'panel1' ? (\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{item.upicon}\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{item.dropicon}\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{item.child.map((child) => (\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{child.icon}\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t{child.text}\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t) : item.text == 'Use Cases' ? (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{item.icon}\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{expanded === 'panel2' ? (\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{item.upicon}\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{item.dropicon}\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{item.child.map((child) => (\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t{child.text}\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{item.icon}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)}\n\t\t\t\t\t\n\t\t\t\t))}\n\t\t\t\n\t\t\n\t);\n}\n","import { Box, Drawer, Toolbar } from '@mui/material';\nimport { DrawerContent } from './DrawerContent';\n\nconst drawerWidth = 250;\n\nexport function Sidebar({ open, handler, ...props }) {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n","// extracted by mini-css-extract-plugin\nexport default {\"text-field-container\":\"TextField_text-field-container__n01Vm\",\"text-field-label\":\"TextField_text-field-label__X7igt\",\"required-indicator\":\"TextField_required-indicator__Dw+uX\",\"error-field\":\"TextField_error-field__Fz8O7\",\"text-field-item\":\"TextField_text-field-item__HL6kJ\",\"text-field-item-container\":\"TextField_text-field-item-container__rkJqj\",\"eye-icon\":\"TextField_eye-icon__3IKCn\"};","import styles from './index.module.scss';\nimport clsx from 'clsx';\nimport { Icon } from '@mui/material';\nimport { useState } from 'react';\nimport { onPressEnter } from 'utils';\nimport { makeStyles } from '@mui/styles';\n\nconst useStyles = makeStyles((theme) => ({\n\ttextField: {\n\t\tminWidth: 'inherit',\n\t},\n}));\n\nexport function TextField({\n\tclassName,\n\tlabel,\n\tchildren,\n\thasError = false,\n\t...props\n}) {\n\tconst classes = useStyles();\n\tconst [inputType, setInputType] = useState(props.type || 'text');\n\n\tconst handleEyeClick = (event) => {\n\t\tsetInputType((prev) => {\n\t\t\tlet target = event.target;\n\t\t\tif (prev === props.type) {\n\t\t\t\ttarget?.setAttribute('aria-label', 'hide password');\n\t\t\t\treturn 'text';\n\t\t\t} else {\n\t\t\t\ttarget?.setAttribute('aria-label', 'show password');\n\t\t\t}\n\t\t\treturn props.type;\n\t\t});\n\t};\n\n\treturn (\n\t\t