{"version":3,"file":"mst-libs-ui.js","sources":["../../../libs/ui/src/core/Emotion.ts","../../../libs/ui/src/lib/Icon/IconCollections.ts","../../../libs/ui/src/lib/Icon/Icon.tsx","../../../libs/ui/src/lib/Loader/index.tsx","../../../libs/ui/src/lib/Button/components/Divider.tsx","../../../libs/ui/src/lib/Button/constants.tsx","../../../libs/ui/src/lib/Button/utils.tsx","../../../libs/ui/src/lib/Button/Button.tsx","../../../libs/ui/src/lib/Hooks/ComponentLifecycle.tsx","../../../libs/ui/src/lib/ErrorBoundary/index.tsx","../../../libs/ui/src/lib/Loading/index.tsx","../../../libs/ui/src/lib/RenderStore/index.tsx","../../../libs/ui/src/lib/Hooks/UsePortalOffset.tsx","../../../libs/ui/src/lib/Alert/Alert.tsx","../../../libs/ui/src/lib/Tooltip/constants.ts","../../../libs/ui/src/lib/Tooltip/index.tsx","../../../libs/ui/src/lib/RecordPhoto/utils.ts","../../../libs/ui/src/lib/RecordPhoto/components/ImageContent.tsx","../../../libs/ui/src/lib/RecordPhoto/components/IconContent.tsx","../../../libs/ui/src/lib/RecordPhoto/components/UsernameContent.tsx","../../../libs/ui/src/lib/RecordPhoto/components/ContentType.tsx","../../../libs/ui/src/lib/RecordPhoto/RecordPhoto.tsx","../../../libs/ui/src/lib/Fields/ActionFields/FuzzyRecordLookup/RecordMenuItem.tsx","../../../libs/ui/src/lib/Fields/ActionFields/FuzzyRecordLookup/config.ts","../../../libs/ui/src/lib/IconButton/constants.tsx","../../../libs/ui/src/lib/IconButton/utils.tsx","../../../libs/ui/src/lib/Hooks/useEventAnimation.tsx","../../../libs/ui/src/lib/IconButton/IconButton.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionFieldButton.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionFieldSharedStyles.tsx","../../../libs/ui/src/lib/Fields/ActionFields/BorderLabelInside.tsx","../../../libs/ui/src/core/RecordTypeStyles.ts","../../../libs/ui/src/lib/Fields/ActionFields/ActionField.tsx","../../../libs/ui/src/lib/Fields/ActionFields/FieldValidationHelpers.ts","../../../libs/ui/src/lib/Fields/ActionFields/FieldInput_BasicText.tsx","../../../libs/ui/src/lib/Chip/ChipBase.tsx","../../../libs/ui/src/lib/Chip/LogicalChip.tsx","../../../libs/ui/src/lib/Chip/ListChip.tsx","../../../libs/ui/src/lib/Chip/FilterChip.tsx","../../../libs/ui/src/lib/DropdownMenu/animations.ts","../../../libs/ui/src/lib/Hooks/UseMeasureElement.ts","../../../libs/ui/src/lib/Popover/index.tsx","../../../libs/ui/src/lib/TruncatedText/index.tsx","../../../libs/ui/src/lib/Fields/ActionFields/FieldInput_Select.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_Text.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_Select.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_Phone.tsx","../../../libs/ui/src/lib/Fields/ActionFields/FieldInput_SingleEmail.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_Email.tsx","../../../libs/ui/src/lib/Fields/ActionFields/FieldInput_BasicTextArea.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_TextArea.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_Dropdown.tsx","../../../libs/ui/src/lib/Fields/ActionFields/FieldInput_DateTime.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_DateTime.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_MultiSelect.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_Password.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_LastName.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_Title.tsx","../../../libs/ui/src/lib/Fields/ActionFields/FieldInput_Currency.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_Currency.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_CurrencyType.tsx","../../../libs/ui/src/lib/Fields/ActionFields/FieldInput_URL.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_URL.tsx","../../../libs/ui/src/lib/Fields/ActionFields/FieldInput__PostalCode.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_Postal.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_RC4.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_RSA.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_Shell.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_Bool.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_AdminText.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_Username.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_Degree.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_IndustryCode.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_Industry.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_Specialty.tsx","../../../libs/ui/src/lib/Fields/ActionFields/FieldInput_Number.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_Number.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_EmailOrURL.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_Enum.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_DateOnly.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_CompanyName.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_CompanySymbol.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_NameContact.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_PipelineTemplate.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_DateTimeRange.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_Rollup.tsx","../../../libs/ui/src/lib/Fields/ActionFields/FuzzyRecordLookup/createFuzzySearch.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_ContactSearch/ContactSearchValue.tsx","../../../apps/web/src/base/hooks/useFetchCandidate.ts","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_ContactSearch/ContactSearch.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_Owner.tsx","../../../libs/ui/src/lib/Fields/ActionFields/index.tsx","../../../libs/ui/src/lib/utils.ts","../../../libs/ui/src/lib/Switch/constants.ts","../../../libs/ui/src/lib/Switch/utils.ts","../../../libs/ui/src/lib/Switch/components/SwitchLabel.tsx","../../../libs/ui/src/lib/Switch/Switch.tsx","../../../libs/ui/src/lib/Apertures/Aperture.tsx","../../../libs/ui/src/assets/animations/check-animation-bg-1.svg","../../../libs/ui/src/assets/animations/check-animation-bg-2.svg","../../../libs/ui/src/assets/animations/check-animation-bg-3.svg","../../../libs/ui/src/lib/RequestAnimator/animations/CheckAnimation.tsx","../../../libs/ui/src/lib/RequestAnimator/index.tsx","../../../libs/ui/src/lib/Checkbox/components/CheckboxLabel.tsx","../../../libs/ui/src/lib/Checkbox/index.tsx","../../../libs/ui/src/lib/IconLink/index.tsx","../../../libs/ui/src/lib/DropdownMenu/DropdownMenuItem.tsx","../../../libs/ui/src/lib/DropdownMenu/constants.ts","../../../libs/ui/src/lib/DropdownMenu/DropdownMenuList.tsx","../../../libs/ui/src/lib/DropdownMenu/utils.ts","../../../libs/ui/src/lib/DropdownMenu/index.tsx","../../../libs/ui/src/lib/Popover/PopoverButton.tsx","../../../libs/ui/src/lib/Tag/Tag.constants.ts","../../../libs/ui/src/lib/Tag/LabelTag.tsx","../../../libs/ui/src/lib/Tag/KeywordTag.tsx","../../../libs/ui/src/lib/Fields/ActionFields/FuzzyRecordLookup/FuzzyRecordLookup.tsx","../../../libs/ui/src/lib/Hooks/UseOnClickOutside.ts","../../../libs/ui/src/lib/Fields/ActionFields/FieldInput_AutoComplete.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_AutoComplete.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_ByInputType.tsx","../../../libs/ui/src/lib/Hooks/useLocationParts.ts","../../../libs/ui/src/lib/ContextMenu/ContextMenuList.tsx","../../../libs/ui/src/lib/ContextMenu/index.tsx","../../../libs/ui/src/lib/CSSIcon/CSSIcon.tsx","../../../libs/ui/src/lib/DndWrapper/index.tsx","../../../libs/ui/src/lib/ToggleGroup/index.tsx","../../../libs/ui/src/lib/VirtualTable/components/TableHeader.tsx","../../../libs/ui/src/lib/VirtualTable/components/Table.tsx","../../../libs/ui/src/lib/VirtualTable/components/HeaderCheckbox/components/RecordAction.tsx","../../../libs/ui/src/lib/VirtualTable/components/HeaderCheckbox/components/NumberInput.tsx","../../../libs/ui/src/lib/VirtualTable/components/HeaderCheckbox/index.tsx","../../../libs/ui/src/lib/VirtualTable/index.tsx","../../../libs/ui/src/lib/Apertures/Grid/Renderers/TableGridRenderer.tsx","../../../libs/ui/src/lib/Apertures/Grid/Renderers/ListGridRenderer.tsx","../../../libs/ui/src/lib/BoardCardColumn/BoardCardColumn.tsx","../../../libs/ui/src/lib/BoardCard/BoardCard.tsx","../../../libs/ui/src/lib/Apertures/Grid/Renderers/CardGridRenderer.tsx","../../../libs/ui/src/lib/Apertures/Grid/Renderers/GroupedGridRenderer.tsx","../../../libs/ui/src/lib/Apertures/Grid/GridAperture.tsx","../../../libs/ui/src/lib/Apertures/Grid/QueryBuilder/QueryHelpers.tsx","../../../libs/ui/src/lib/Fields/DisplayFieldValue/ActionText.tsx","../../../libs/ui/src/lib/Fields/DisplayFieldValue/Currency.tsx","../../../libs/ui/src/lib/Fields/DisplayFieldValue/DateTime.tsx","../../../libs/ui/src/lib/Fields/DisplayFieldValue/DateTimeRange.tsx","../../../libs/ui/src/lib/Fields/DisplayFieldValue/MultiSelect.tsx","../../../libs/ui/src/lib/Fields/DisplayFieldValue/PlainText.tsx","../../../libs/ui/src/lib/Fields/DisplayFieldValue/index.tsx","../../../libs/ui/src/lib/Fields/DisplayFieldValue/ByInputType.tsx","../../../libs/ui/src/lib/Apertures/Grid/Widgets.tsx","../../../libs/ui/src/lib/Apertures/Grid/QueryBuilder/QueryElement.tsx","../../../libs/ui/src/lib/Apertures/Grid/QueryBuilder/QueryRuleField.tsx","../../../libs/ui/src/lib/Apertures/Grid/QueryBuilder/QueryGroup.tsx","../../../libs/ui/src/lib/Apertures/Grid/QueryBuilder/QueryBuilder.tsx","../../../libs/ui/src/lib/Apertures/Grid/GridRecordLoader.tsx","../../../libs/ui/src/lib/OverflowScrollContainer/utils.ts","../../../libs/ui/src/lib/OverflowScrollContainer/index.tsx","../../../libs/ui/src/lib/Apertures/LayoutAperture.tsx","../../../libs/ui/src/lib/FileDropArea/FileDropArea.tsx","../../../libs/ui/src/lib/Animations/ClipboardAnimation.tsx","../../../libs/ui/src/lib/Fields/ActionFields/FieldInput_Phone.tsx","../../../libs/ui/src/lib/Fields/ActionFields/ActionField_PhoneNumber.tsx","../../../libs/ui/src/lib/NotificationBanner/index.tsx","../../../libs/ui/src/lib/ReorderableList/index.tsx","../../../libs/ui/src/lib/TabsPanel/TabTooltip.tsx","../../../libs/ui/src/lib/TabsPanel/Tab.tsx","../../../libs/ui/src/lib/TabsPanel/DraggableDropdownMenu.tsx","../../../libs/ui/src/lib/TabsPanel/TabsSelectorMenu.tsx","../../../libs/ui/src/lib/TabsPanel/TabsPanel.tsx","../../../libs/ui/src/lib/TabColumn/TabColumn.tsx","../../../libs/ui/src/lib/UserAvatar/constants.ts","../../../libs/ui/src/lib/UserAvatar/components/AvatarImage.tsx","../../../libs/ui/src/lib/UserAvatar/components/AvatarPlaceholder.tsx","../../../libs/ui/src/lib/UserAvatar/components/OnlineStatusBadge.tsx","../../../libs/ui/src/lib/UserAvatar/index.tsx","../../../libs/ui/src/lib/Separators/types.tsx","../../../libs/ui/src/lib/Separators/index.tsx","../../../libs/ui/src/lib/HelpScreen/index.tsx","../../../libs/ui/src/lib/Tabs/Tab.tsx","../../../libs/ui/src/lib/Tabs/index.tsx","../../../libs/ui/src/lib/Tabs/TabsHeader.tsx","../../../libs/ui/src/lib/Accordion/AccordionTrigger.tsx","../../../libs/ui/src/lib/Accordion/AccordionItem.tsx","../../../libs/ui/src/lib/Accordion/Accordion.tsx","../../../libs/ui/src/lib/Flyout/Flyout.tsx","../../../libs/ui/src/lib/Button/ActionButton.tsx","../../../libs/ui/src/lib/Chip/types.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport createEmotion, { Emotion } from '@emotion/css/create-instance';\nimport { untracked } from 'mobx';\n\n/**\n * Retrieves any existing emotion\n */\nfunction getEmotion() {\n\tlet emotionDialog: Emotion = undefined;\n\tlet emotionParent: Emotion = undefined;\n\tlet emotionCapture: Emotion = undefined;\n\n\t//capture specific emotion instance.\n\tif (top.document.querySelector('#crx-root')) {\n\t\t//fallback to window for the options menu\n\t\tconst shadowDomIframeWindow: Window =\n\t\t\ttop?.document?.querySelector('#crx-root')?.shadowRoot.querySelector('iframe').contentWindow ?? window;\n\t\tconst shadowDomIframeDocument = shadowDomIframeWindow?.document;\n\t\tlet emotionContainer = shadowDomIframeDocument.head.querySelector('style#emotion-container');\n\n\t\tif (!emotionContainer) {\n\t\t\t//add emotion to the page\n\t\t\temotionContainer = document.createElement('style');\n\t\t\temotionContainer.id = 'emotion-container';\n\t\t\tshadowDomIframeDocument.head.appendChild(emotionContainer);\n\t\t\t//trex is arbitrary, just used for fun while debugging and its going to stick around cause why not.\n\t\t\temotionCapture = createEmotion({ key: 'capture-trex', container: emotionContainer });\n\t\t\tshadowDomIframeWindow.PCR_WINDOW_EMO = emotionCapture;\n\t\t} else {\n\t\t\temotionCapture = shadowDomIframeWindow.PCR_WINDOW_EMO;\n\t\t}\n\t\treturn { emotionCapture };\n\t}\n\n\tlet currentDialog: any;\n\ttry {\n\t\tcurrentDialog = untracked(() => top?.DialogManager?.currentlyFocusedDialog);\n\t} catch {\n\t\t//ignore error if dialogManager doesn't exist yet\n\t}\n\n\t/**\n\t * dialogWindow should first check for the current dialog in focus and see if it contains an iframe to grab a window refernce\n\t * If that iframe / contentwindow doesnt exist then that means we might have a regular react dialog with no iframe nested inside the iframe dialog so lets check for that.\n\t * we check for that by seeing if the current dialog has a non top openerWindow and then assign if so then dialogwindow is set to that opener window.\n\t */\n\tconst dialogWindow =\n\t\tcurrentDialog?.iframeRef?.current?.contentWindow ??\n\t\t(currentDialog?.openerDialog?.iframeRef?.current?.contentWindow !== window.top &&\n\t\t\tcurrentDialog?.openerDialog?.iframeRef?.current?.contentWindow);\n\tif (dialogWindow) {\n\t\temotionDialog = dialogWindow.PCR_WINDOW_EMO;\n\t\temotionParent = dialogWindow.parent.PCR_WINDOW_EMO;\n\t}\n\n\tlet emotionWindow: Emotion = window.PCR_WINDOW_EMO;\n\tif (!emotionParent && window.parent) {\n\t\temotionParent = window.parent.PCR_WINDOW_EMO;\n\t}\n\tif (!emotionWindow) {\n\t\t//do not use emotion in the reactCache or psession frames, use the dialog or TOP emotion instead\n\t\tif (window.name === 'reactCache' || window.name === 'psession') {\n\t\t\temotionWindow = emotionDialog ?? emotionParent;\n\t\t} else {\n\t\t\t//trex is arbitrary, just used for fun while debugging and its going to stick around cause why not.\n\t\t\t//Search 'trex' to find all key setup instances used between createEmotion and createCache with emotion.\n\t\t\temotionWindow = createEmotion({ key: 'trex' });\n\t\t\twindow.PCR_WINDOW_EMO = emotionWindow;\n\t\t}\n\t}\n\t//don't return Window and Dialog emotions if they are the same object\n\tif (emotionWindow === emotionDialog) {\n\t\temotionDialog = undefined;\n\t}\n\t//don't return Window and Top emotions if they are the same object\n\tif (emotionWindow === emotionParent) {\n\t\temotionParent = undefined;\n\t}\n\n\t//emotion top to make sure a class exists at the top for all react overlay items (dialogs, notifications, etc)\n\tconst emotionTop = window.top.PCR_WINDOW_EMO;\n\n\treturn { emotionParent, emotionWindow, emotionDialog, emotionTop, emotionCapture };\n}\n\n/**\n * Define a new emotion class name in all emotion contexts\n */\nfunction getEmotionClassName(funcName: string, ...args: Array) {\n\tconst { emotionParent, emotionWindow, emotionDialog, emotionTop, emotionCapture } = getEmotion();\n\n\tlet className: string;\n\tlet parentClassName: string;\n\n\tif (emotionWindow) {\n\t\tclassName = emotionWindow[funcName](...args);\n\t}\n\n\tif (emotionParent) {\n\t\t//if we are in a child frame then we want to feed our styles to the parent frame to sync\n\t\tparentClassName = emotionParent[funcName](...args);\n\t}\n\n\tif (emotionDialog) {\n\t\t//if we are in a dialog frame then we want to feed our styles to the dialog frame to sync\n\t\t//the className should always match, but even if it doesn't we know that we are in the context of a dialog, so it's safe to reuse className\n\t\tclassName = emotionDialog[funcName](...args);\n\t}\n\n\tif (emotionTop) {\n\t\tclassName = emotionTop[funcName](...args);\n\t}\n\n\tif (emotionCapture) {\n\t\tclassName = emotionCapture[funcName](...args);\n\t}\n\n\t//sanity check, if emotion isn't returning the same classname between frames, we should error log it in the console so we can fix it\n\tif (emotionWindow && emotionParent && className !== parentClassName) {\n\t\tlet output = '';\n\t\ttry {\n\t\t\tconst s: string[] = args;\n\t\t\tfor (let i = 0; i < s[0].length; i++) {\n\t\t\t\tif (i > 0) {\n\t\t\t\t\toutput += s[i];\n\t\t\t\t}\n\t\t\t\toutput += s[0][i];\n\t\t\t}\n\t\t} catch (_e) {\n\t\t\t/*ignore any errors if we can't recreate the raw css */\n\t\t}\n\n\t\tconsole.error(\n\t\t\t`Emotion classnames do not match between frames: parent=${parentClassName} window[${window.name}]=${className}`,\n\t\t\t{\n\t\t\t\temotions: {\n\t\t\t\t\ttop: emotionParent,\n\t\t\t\t\twindow: emotionWindow,\n\t\t\t\t\tdialog: emotionDialog\n\t\t\t\t},\n\t\t\t\tcssTemplate: args,\n\t\t\t\tcssRaw: output\n\t\t\t}\n\t\t);\n\n\t\t//return both classes, one will be used, one will be ignored... not ideal but needed until the logged error above is corrected.\n\t\treturn `${className} ${parentClassName}`;\n\t} else {\n\t\treturn className;\n\t}\n}\n\n/**\n * Generate a new class name with emotion.\n * @param args\n * @returns\n */\nexport function css(...args: any): string {\n\treturn getEmotionClassName('css', ...args);\n}\n\n/**\n * Concatinate class names and combine common styles within emotion generated classes to generate a new class definition\n * @param args\n * @returns\n */\nexport function cx(...args: Array): string {\n\treturn getEmotionClassName('cx', ...args);\n}\n\n/**\n * Used to define css keyframe animation classes\n * @param args\n * @returns\n */\nexport function keyframes(...args: Array): string {\n\treturn getEmotionClassName('keyframes', ...args);\n}\n\n/**\n * Inject emotion generated styles as a global style\n * @param args\n * @returns\n */\nexport function injectGlobal(...args: any): string {\n\treturn getEmotionClassName('injectGlobal', ...args);\n}\n\nexport const PREFLIGHT_CLASS = 'pcr-preflight';\n\n/**\n * Applies the preflight class to a dom element\n * @param element element for the class to applied on\n */\nexport function AddPreflightClassToElement(element: Element) {\n\t//add class name to mounting point to apply preflight normalization\n\tif (!element.classList.contains(PREFLIGHT_CLASS)) {\n\t\telement.classList.add(PREFLIGHT_CLASS);\n\t}\n}\n\n/**\n * Injects into the page the styles necessary for the preflight normalization styles\n */\nexport function injectGlobalPreflightStyles() {\n\tconst styles = GetParsedPreFlightStyles();\n\tinjectGlobal`\n ${styles.map(value => {\n\t\t\t//inject just the normal preflight for classes nested under, not on the same node itself\n\t\t\treturn `:where(.${PREFLIGHT_CLASS} ${value[0]}) ${value[1]} `;\n\t\t})}\n `;\n}\n\n/**\n * Parse through the stylesheet generated by windicss for the preflight and put the rules in a format we can iterate over.\n * @returns a list of tuples representing style rules of the preflight\n */\nfunction GetParsedPreFlightStyles(): string[][] {\n\tconst PREFLIGHT_STYLES = `\n [type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {\n --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: #514dd6;\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n border-color: #514dd6;\n }=====\n [type='text'], [type='email'], [type='url'], [type='password'], [type='number'], [type='date'], [type='datetime-local'], [type='month'], [type='search'], [type='tel'], [type='time'], [type='week'], [multiple], textarea, select {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: #fff;\n border-color: #6b7280;\n border-width: 1px;\n border-radius: 0px;\n padding-top: 0.5rem;\n padding-right: 0.75rem;\n padding-bottom: 0.5rem;\n padding-left: 0.75rem;\n font-size: 1rem;\n line-height: 1.5rem;\n }=====\n [type='checkbox'], [type='radio'] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n display: inline-block;\n vertical-align: middle;\n background-origin: border-box;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n flex-shrink: 0;\n height: 1rem;\n width: 1rem;\n color: #514dd6;\n background-color: #fff;\n border-color: #6b7280;\n border-width: 1px;\n }=====\n [type='checkbox']:focus, [type='radio']:focus {\n --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n --tw-ring-offset-width: 2px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: #514dd6;\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n border-color: #6b7280;\n }=====\n [type='checkbox']:checked, [type='radio']:checked {\n border-color: transparent;\n background-color: currentColor;\n background-size: 100% 100%;\n background-position: center;\n background-repeat: no-repeat;\n }=====\n [type='checkbox']:checked:hover, [type='checkbox']:checked:focus, [type='radio']:checked:hover, [type='radio']:checked:focus {\n border-color: transparent;\n background-color: currentColor;\n }=====\n [type='checkbox']:indeterminate:hover, [type='checkbox']:indeterminate:focus {\n border-color: transparent;\n background-color: currentColor;\n }=====\n :root {\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n }=====\n :-moz-focusring {\n outline: 1px dotted ButtonText;\n }=====\n :-moz-ui-invalid {\n box-shadow: none;\n }=====\n ::moz-focus-inner {\n border-style: none;\n padding: 0;\n }=====\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }=====\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }=====\n ::-webkit-file-upload-button {\n -webkit-appearance: button;\n font: inherit;\n }=====\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }=====\n ::-webkit-date-and-time-value {\n min-height: 1.5em;\n }=====\n [type='search'] {\n -webkit-appearance: textfield;\n outline-offset: -2px;\n }=====\n [multiple] {\n background-image: initial;\n background-position: initial;\n background-repeat: unset;\n background-size: initial;\n padding-right: 0.75rem;\n -webkit-print-color-adjust: unset;\n print-color-adjust: unset;\n }=====\n [type='checkbox'] {\n border-radius: 0px;\n }=====\n [type='radio'] {\n border-radius: 100%;\n }=====\n [type='checkbox']:checked {\n background-image: url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\");\n }=====\n [type='radio']:checked {\n background-image: url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e\");\n }=====\n [type='checkbox']:indeterminate {\n background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e\");\n border-color: transparent;\n background-color: currentColor;\n background-size: 100% 100%;\n background-position: center;\n background-repeat: no-repeat;\n }=====\n [type='file'] {\n background: unset;\n border-color: inherit;\n border-width: 0;\n border-radius: 0;\n padding: 0;\n font-size: unset;\n line-height: inherit;\n }=====\n [type='file']:focus {\n outline: 1px solid ButtonText;\n outline: 1px auto -webkit-focus-ring-color;\n }=====\n abbr[title] {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }=====\n a {\n color: inherit;\n text-decoration: inherit;\n }=====\n body {\n margin: 0;\n font-family: inherit;\n line-height: inherit;\n }=====\n b, strong {\n font-weight: bolder;\n }=====\n button, select {\n text-transform: none;\n }=====\n button, [type='button'], [type='reset'], [type='submit'] {\n -webkit-appearance: button;\n }=====\n button {\n background-color: transparent;\n background-image: none;\n }=====\n button, [role=\"button\"] {\n cursor: pointer;\n }=====\n html {\n -webkit-text-size-adjust: 100%;\n font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Lato,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";\n line-height: 1.5;\n\tfont-size: 100%;\n }=====\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }=====\n h3, h2, h1, p, hr, h4, h5, pre {\n margin: 0;\n }=====\n h3, h2, h1, h4, h5 {\n font-size: inherit;\n font-weight: inherit;\n }=====\n input, button, select, textarea {\n font-family: inherit;\n font-size: 100%;\n line-height: 1.15;\n margin: 0;\n padding: 0;\n xline-height: inherit;\n color: inherit;\n }=====\n *, ::before, ::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n border-color: #e5e7eb;\n }=====\n * {\n --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgba(98, 105, 227, 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n }=====\n img {\n border-style: solid;\n }=====\n input::placeholder {\n opacity: 1;\n color: #9ca3af;\n }=====\n input::webkit-input-placeholder {\n opacity: 1;\n color: #9ca3af;\n }=====\n input::-moz-placeholder {\n opacity: 1;\n color: #9ca3af;\n }=====\n input:-ms-input-placeholder {\n opacity: 1;\n color: #9ca3af;\n }=====\n input::-ms-input-placeholder {\n opacity: 1;\n color: #9ca3af;\n }=====\n iframe, img, svg, video {\n display: block;\n vertical-align: middle;\n }=====\n img, video {\n max-width: 100%;\n height: auto;\n }=====input::-moz-placeholder, textarea::-moz-placeholder {\n color: #6b7280;\n opacity: 1;\n }=====\n input::-ms-input-placeholder, textarea::-ms-input-placeholder {\n color: #6b7280;\n opacity: 1;\n }=====\n input::placeholder, textarea::placeholder {\n color: #6b7280;\n opacity: 1;\n }=====\n ol, ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }=====\n pre, code {\n font-size: 1em;\n font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;\n }=====\n select {\n background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");\n background-position: right 0.5rem center;\n background-repeat: no-repeat;\n background-size: 1.5em 1.5em;\n padding-right: 2.5rem;\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }=====\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }=====\n textarea {\n resize: vertical;\n }=====\n textarea::placeholder {\n opacity: 1;\n color: #9ca3af;\n }=====\n textarea::webkit-input-placeholder {\n opacity: 1;\n color: #9ca3af;\n }=====\n textarea::-moz-placeholder {\n opacity: 1;\n color: #9ca3af;\n }=====\n textarea:-ms-input-placeholder {\n opacity: 1;\n color: #9ca3af;\n }=====\n textarea::-ms-input-placeholder {\n opacity: 1;\n color: #9ca3af;\n }=====\n button:focus, button:active {\n\tbox-shadow: unset !important;\n\tbackground-image: none !important;\n }\n `;\n\n\tconst parsedStyles = [];\n\tPREFLIGHT_STYLES.split('=====').forEach(item => {\n\t\tconst temp = item.split('{');\n\t\tconst selectors = temp[0].split(',');\n\t\tselectors.forEach(selector => {\n\t\t\tparsedStyles.push([selector.replace('\\n', ''), `{${temp[1]}`]);\n\t\t});\n\t});\n\n\treturn parsedStyles;\n}\n","/**\n * Collection map of all the icons given to us via the @iconify/bi npm package\n */\nexport const BootstrapIconCollection = {\n\t'123': 'i-bi-123',\n\t'alarm-fill': 'i-bi-alarm-fill',\n\talarm: 'i-bi-alarm',\n\t'align-bottom': 'i-bi-align-bottom',\n\t'align-center': 'i-bi-align-center',\n\t'align-end': 'i-bi-align-end',\n\t'align-middle': 'i-bi-align-middle',\n\t'align-start': 'i-bi-align-start',\n\t'align-top': 'i-bi-align-top',\n\talt: 'i-bi-alt',\n\t'app-indicator': 'i-bi-app-indicator',\n\tapp: 'i-bi-app',\n\t'archive-fill': 'i-bi-archive-fill',\n\tarchive: 'i-bi-archive',\n\t'arrow-90deg-down': 'i-bi-arrow-90deg-down',\n\t'arrow-90deg-left': 'i-bi-arrow-90deg-left',\n\t'arrow-90deg-right': 'i-bi-arrow-90deg-right',\n\t'arrow-90deg-up': 'i-bi-arrow-90deg-up',\n\t'arrow-bar-down': 'i-bi-arrow-bar-down',\n\t'arrow-bar-left': 'i-bi-arrow-bar-left',\n\t'arrow-bar-right': 'i-bi-arrow-bar-right',\n\t'arrow-bar-up': 'i-bi-arrow-bar-up',\n\t'arrow-clockwise': 'i-bi-arrow-clockwise',\n\t'arrow-counterclockwise': 'i-bi-arrow-counterclockwise',\n\t'arrow-down-circle-fill': 'i-bi-arrow-down-circle-fill',\n\t'arrow-down-circle': 'i-bi-arrow-down-circle',\n\t'arrow-down-left-circle-fill': 'i-bi-arrow-down-left-circle-fill',\n\t'arrow-down-left-circle': 'i-bi-arrow-down-left-circle',\n\t'arrow-down-left-square-fill': 'i-bi-arrow-down-left-square-fill',\n\t'arrow-down-left-square': 'i-bi-arrow-down-left-square',\n\t'arrow-down-left': 'i-bi-arrow-down-left',\n\t'arrow-down-right-circle-fill': 'i-bi-arrow-down-right-circle-fill',\n\t'arrow-down-right-circle': 'i-bi-arrow-down-right-circle',\n\t'arrow-down-right-square-fill': 'i-bi-arrow-down-right-square-fill',\n\t'arrow-down-right-square': 'i-bi-arrow-down-right-square',\n\t'arrow-down-right': 'i-bi-arrow-down-right',\n\t'arrow-down-short': 'i-bi-arrow-down-short',\n\t'arrow-down-square-fill': 'i-bi-arrow-down-square-fill',\n\t'arrow-down-square': 'i-bi-arrow-down-square',\n\t'arrow-down-up': 'i-bi-arrow-down-up',\n\t'arrow-down': 'i-bi-arrow-down',\n\t'arrow-left-circle-fill': 'i-bi-arrow-left-circle-fill',\n\t'arrow-left-circle': 'i-bi-arrow-left-circle',\n\t'arrow-left-right': 'i-bi-arrow-left-right',\n\t'arrow-left-short': 'i-bi-arrow-left-short',\n\t'arrow-left-square-fill': 'i-bi-arrow-left-square-fill',\n\t'arrow-left-square': 'i-bi-arrow-left-square',\n\t'arrow-left': 'i-bi-arrow-left',\n\t'arrow-repeat': 'i-bi-arrow-repeat',\n\t'arrow-return-left': 'i-bi-arrow-return-left',\n\t'arrow-return-right': 'i-bi-arrow-return-right',\n\t'arrow-right-circle-fill': 'i-bi-arrow-right-circle-fill',\n\t'arrow-right-circle': 'i-bi-arrow-right-circle',\n\t'arrow-right-short': 'i-bi-arrow-right-short',\n\t'arrow-right-square-fill': 'i-bi-arrow-right-square-fill',\n\t'arrow-right-square': 'i-bi-arrow-right-square',\n\t'arrow-right': 'i-bi-arrow-right',\n\t'arrow-up-circle-fill': 'i-bi-arrow-up-circle-fill',\n\t'arrow-up-circle': 'i-bi-arrow-up-circle',\n\t'arrow-up-left-circle-fill': 'i-bi-arrow-up-left-circle-fill',\n\t'arrow-up-left-circle': 'i-bi-arrow-up-left-circle',\n\t'arrow-up-left-square-fill': 'i-bi-arrow-up-left-square-fill',\n\t'arrow-up-left-square': 'i-bi-arrow-up-left-square',\n\t'arrow-up-left': 'i-bi-arrow-up-left',\n\t'arrow-up-right-circle-fill': 'i-bi-arrow-up-right-circle-fill',\n\t'arrow-up-right-circle': 'i-bi-arrow-up-right-circle',\n\t'arrow-up-right-square-fill': 'i-bi-arrow-up-right-square-fill',\n\t'arrow-up-right-square': 'i-bi-arrow-up-right-square',\n\t'arrow-up-right': 'i-bi-arrow-up-right',\n\t'arrow-up-short': 'i-bi-arrow-up-short',\n\t'arrow-up-square-fill': 'i-bi-arrow-up-square-fill',\n\t'arrow-up-square': 'i-bi-arrow-up-square',\n\t'arrow-up': 'i-bi-arrow-up',\n\t'arrows-angle-contract': 'i-bi-arrows-angle-contract',\n\t'arrows-angle-expand': 'i-bi-arrows-angle-expand',\n\t'arrows-collapse': 'i-bi-arrows-collapse',\n\t'arrows-expand': 'i-bi-arrows-expand',\n\t'arrows-fullscreen': 'i-bi-arrows-fullscreen',\n\t'arrows-move': 'i-bi-arrows-move',\n\t'aspect-ratio-fill': 'i-bi-aspect-ratio-fill',\n\t'aspect-ratio': 'i-bi-aspect-ratio',\n\tasterisk: 'i-bi-asterisk',\n\tat: 'i-bi-at',\n\t'award-fill': 'i-bi-award-fill',\n\taward: 'i-bi-award',\n\tback: 'i-bi-back',\n\t'backspace-fill': 'i-bi-backspace-fill',\n\t'backspace-reverse-fill': 'i-bi-backspace-reverse-fill',\n\t'backspace-reverse': 'i-bi-backspace-reverse',\n\tbackspace: 'i-bi-backspace',\n\t'badge-3d-fill': 'i-bi-badge-3d-fill',\n\t'badge-3d': 'i-bi-badge-3d',\n\t'badge-4k-fill': 'i-bi-badge-4k-fill',\n\t'badge-4k': 'i-bi-badge-4k',\n\t'badge-8k-fill': 'i-bi-badge-8k-fill',\n\t'badge-8k': 'i-bi-badge-8k',\n\t'badge-ad-fill': 'i-bi-badge-ad-fill',\n\t'badge-ad': 'i-bi-badge-ad',\n\t'badge-ar-fill': 'i-bi-badge-ar-fill',\n\t'badge-ar': 'i-bi-badge-ar',\n\t'badge-cc-fill': 'i-bi-badge-cc-fill',\n\t'badge-cc': 'i-bi-badge-cc',\n\t'badge-hd-fill': 'i-bi-badge-hd-fill',\n\t'badge-hd': 'i-bi-badge-hd',\n\t'badge-tm-fill': 'i-bi-badge-tm-fill',\n\t'badge-tm': 'i-bi-badge-tm',\n\t'badge-vo-fill': 'i-bi-badge-vo-fill',\n\t'badge-vo': 'i-bi-badge-vo',\n\t'badge-vr-fill': 'i-bi-badge-vr-fill',\n\t'badge-vr': 'i-bi-badge-vr',\n\t'badge-wc-fill': 'i-bi-badge-wc-fill',\n\t'badge-wc': 'i-bi-badge-wc',\n\t'bag-check-fill': 'i-bi-bag-check-fill',\n\t'bag-check': 'i-bi-bag-check',\n\t'bag-dash-fill': 'i-bi-bag-dash-fill',\n\t'bag-dash': 'i-bi-bag-dash',\n\t'bag-fill': 'i-bi-bag-fill',\n\t'bag-plus-fill': 'i-bi-bag-plus-fill',\n\t'bag-plus': 'i-bi-bag-plus',\n\t'bag-x-fill': 'i-bi-bag-x-fill',\n\t'bag-x': 'i-bi-bag-x',\n\tbag: 'i-bi-bag',\n\t'bar-chart-fill': 'i-bi-bar-chart-fill',\n\t'bar-chart-line-fill': 'i-bi-bar-chart-line-fill',\n\t'bar-chart-line': 'i-bi-bar-chart-line',\n\t'bar-chart-steps': 'i-bi-bar-chart-steps',\n\t'bar-chart': 'i-bi-bar-chart',\n\t'basket-fill': 'i-bi-basket-fill',\n\tbasket: 'i-bi-basket',\n\t'basket2-fill': 'i-bi-basket2-fill',\n\tbasket2: 'i-bi-basket2',\n\t'basket3-fill': 'i-bi-basket3-fill',\n\tbasket3: 'i-bi-basket3',\n\t'battery-charging': 'i-bi-battery-charging',\n\t'battery-full': 'i-bi-battery-full',\n\t'battery-half': 'i-bi-battery-half',\n\tbattery: 'i-bi-battery',\n\t'bell-fill': 'i-bi-bell-fill',\n\tbell: 'i-bi-bell',\n\tbezier: 'i-bi-bezier',\n\tbezier2: 'i-bi-bezier2',\n\tbicycle: 'i-bi-bicycle',\n\t'binoculars-fill': 'i-bi-binoculars-fill',\n\tbinoculars: 'i-bi-binoculars',\n\t'blockquote-left': 'i-bi-blockquote-left',\n\t'blockquote-right': 'i-bi-blockquote-right',\n\t'book-fill': 'i-bi-book-fill',\n\t'book-half': 'i-bi-book-half',\n\tbook: 'i-bi-book',\n\t'bookmark-check-fill': 'i-bi-bookmark-check-fill',\n\t'bookmark-check': 'i-bi-bookmark-check',\n\t'bookmark-dash-fill': 'i-bi-bookmark-dash-fill',\n\t'bookmark-dash': 'i-bi-bookmark-dash',\n\t'bookmark-fill': 'i-bi-bookmark-fill',\n\t'bookmark-heart-fill': 'i-bi-bookmark-heart-fill',\n\t'bookmark-heart': 'i-bi-bookmark-heart',\n\t'bookmark-plus-fill': 'i-bi-bookmark-plus-fill',\n\t'bookmark-plus': 'i-bi-bookmark-plus',\n\t'bookmark-star-fill': 'i-bi-bookmark-star-fill',\n\t'bookmark-star': 'i-bi-bookmark-star',\n\t'bookmark-x-fill': 'i-bi-bookmark-x-fill',\n\t'bookmark-x': 'i-bi-bookmark-x',\n\tbookmark: 'i-bi-bookmark',\n\t'bookmarks-fill': 'i-bi-bookmarks-fill',\n\tbookmarks: 'i-bi-bookmarks',\n\tbookshelf: 'i-bi-bookshelf',\n\t'bootstrap-fill': 'i-bi-bootstrap-fill',\n\t'bootstrap-reboot': 'i-bi-bootstrap-reboot',\n\tbootstrap: 'i-bi-bootstrap',\n\t'border-all': 'i-bi-border-all',\n\t'border-bottom': 'i-bi-border-bottom',\n\t'border-center': 'i-bi-border-center',\n\t'border-inner': 'i-bi-border-inner',\n\t'border-left': 'i-bi-border-left',\n\t'border-middle': 'i-bi-border-middle',\n\t'border-outer': 'i-bi-border-outer',\n\t'border-right': 'i-bi-border-right',\n\t'border-style': 'i-bi-border-style',\n\t'border-top': 'i-bi-border-top',\n\t'border-width': 'i-bi-border-width',\n\tborder: 'i-bi-border',\n\t'bounding-box-circles': 'i-bi-bounding-box-circles',\n\t'bounding-box': 'i-bi-bounding-box',\n\t'box-arrow-down-left': 'i-bi-box-arrow-down-left',\n\t'box-arrow-down-right': 'i-bi-box-arrow-down-right',\n\t'box-arrow-down': 'i-bi-box-arrow-down',\n\t'box-arrow-in-down-left': 'i-bi-box-arrow-in-down-left',\n\t'box-arrow-in-down-right': 'i-bi-box-arrow-in-down-right',\n\t'box-arrow-in-down': 'i-bi-box-arrow-in-down',\n\t'box-arrow-in-left': 'i-bi-box-arrow-in-left',\n\t'box-arrow-in-right': 'i-bi-box-arrow-in-right',\n\t'box-arrow-in-up-left': 'i-bi-box-arrow-in-up-left',\n\t'box-arrow-in-up-right': 'i-bi-box-arrow-in-up-right',\n\t'box-arrow-in-up': 'i-bi-box-arrow-in-up',\n\t'box-arrow-left': 'i-bi-box-arrow-left',\n\t'box-arrow-right': 'i-bi-box-arrow-right',\n\t'box-arrow-up-left': 'i-bi-box-arrow-up-left',\n\t'box-arrow-up-right': 'i-bi-box-arrow-up-right',\n\t'box-arrow-up': 'i-bi-box-arrow-up',\n\t'box-seam': 'i-bi-box-seam',\n\tbox: 'i-bi-box',\n\tbraces: 'i-bi-braces',\n\tbricks: 'i-bi-bricks',\n\t'briefcase-fill': 'i-bi-briefcase-fill',\n\tbriefcase: 'i-bi-briefcase',\n\t'brightness-alt-high-fill': 'i-bi-brightness-alt-high-fill',\n\t'brightness-alt-high': 'i-bi-brightness-alt-high',\n\t'brightness-alt-low-fill': 'i-bi-brightness-alt-low-fill',\n\t'brightness-alt-low': 'i-bi-brightness-alt-low',\n\t'brightness-high-fill': 'i-bi-brightness-high-fill',\n\t'brightness-high': 'i-bi-brightness-high',\n\t'brightness-low-fill': 'i-bi-brightness-low-fill',\n\t'brightness-low': 'i-bi-brightness-low',\n\t'broadcast-pin': 'i-bi-broadcast-pin',\n\tbroadcast: 'i-bi-broadcast',\n\t'brush-fill': 'i-bi-brush-fill',\n\tbrush: 'i-bi-brush',\n\t'bucket-fill': 'i-bi-bucket-fill',\n\tbucket: 'i-bi-bucket',\n\t'bug-fill': 'i-bi-bug-fill',\n\tbug: 'i-bi-bug',\n\tbuilding: 'i-bi-building',\n\tbullseye: 'i-bi-bullseye',\n\t'calculator-fill': 'i-bi-calculator-fill',\n\tcalculator: 'i-bi-calculator',\n\t'calendar-check-fill': 'i-bi-calendar-check-fill',\n\t'calendar-check': 'i-bi-calendar-check',\n\t'calendar-date-fill': 'i-bi-calendar-date-fill',\n\t'calendar-date': 'i-bi-calendar-date',\n\t'calendar-day-fill': 'i-bi-calendar-day-fill',\n\t'calendar-day': 'i-bi-calendar-day',\n\t'calendar-event-fill': 'i-bi-calendar-event-fill',\n\t'calendar-event': 'i-bi-calendar-event',\n\t'calendar-fill': 'i-bi-calendar-fill',\n\t'calendar-minus-fill': 'i-bi-calendar-minus-fill',\n\t'calendar-minus': 'i-bi-calendar-minus',\n\t'calendar-month-fill': 'i-bi-calendar-month-fill',\n\t'calendar-month': 'i-bi-calendar-month',\n\t'calendar-plus-fill': 'i-bi-calendar-plus-fill',\n\t'calendar-plus': 'i-bi-calendar-plus',\n\t'calendar-range-fill': 'i-bi-calendar-range-fill',\n\t'calendar-range': 'i-bi-calendar-range',\n\t'calendar-week-fill': 'i-bi-calendar-week-fill',\n\t'calendar-week': 'i-bi-calendar-week',\n\t'calendar-x-fill': 'i-bi-calendar-x-fill',\n\t'calendar-x': 'i-bi-calendar-x',\n\tcalendar: 'i-bi-calendar',\n\t'calendar2-check-fill': 'i-bi-calendar2-check-fill',\n\t'calendar2-check': 'i-bi-calendar2-check',\n\t'calendar2-date-fill': 'i-bi-calendar2-date-fill',\n\t'calendar2-date': 'i-bi-calendar2-date',\n\t'calendar2-day-fill': 'i-bi-calendar2-day-fill',\n\t'calendar2-day': 'i-bi-calendar2-day',\n\t'calendar2-event-fill': 'i-bi-calendar2-event-fill',\n\t'calendar2-event': 'i-bi-calendar2-event',\n\t'calendar2-fill': 'i-bi-calendar2-fill',\n\t'calendar2-minus-fill': 'i-bi-calendar2-minus-fill',\n\t'calendar2-minus': 'i-bi-calendar2-minus',\n\t'calendar2-month-fill': 'i-bi-calendar2-month-fill',\n\t'calendar2-month': 'i-bi-calendar2-month',\n\t'calendar2-plus-fill': 'i-bi-calendar2-plus-fill',\n\t'calendar2-plus': 'i-bi-calendar2-plus',\n\t'calendar2-range-fill': 'i-bi-calendar2-range-fill',\n\t'calendar2-range': 'i-bi-calendar2-range',\n\t'calendar2-week-fill': 'i-bi-calendar2-week-fill',\n\t'calendar2-week': 'i-bi-calendar2-week',\n\t'calendar2-x-fill': 'i-bi-calendar2-x-fill',\n\t'calendar2-x': 'i-bi-calendar2-x',\n\tcalendar2: 'i-bi-calendar2',\n\t'calendar3-event-fill': 'i-bi-calendar3-event-fill',\n\t'calendar3-event': 'i-bi-calendar3-event',\n\t'calendar3-fill': 'i-bi-calendar3-fill',\n\t'calendar3-range-fill': 'i-bi-calendar3-range-fill',\n\t'calendar3-range': 'i-bi-calendar3-range',\n\t'calendar3-week-fill': 'i-bi-calendar3-week-fill',\n\t'calendar3-week': 'i-bi-calendar3-week',\n\tcalendar3: 'i-bi-calendar3',\n\t'calendar4-event': 'i-bi-calendar4-event',\n\t'calendar4-range': 'i-bi-calendar4-range',\n\t'calendar4-week': 'i-bi-calendar4-week',\n\tcalendar4: 'i-bi-calendar4',\n\t'camera-fill': 'i-bi-camera-fill',\n\t'camera-reels-fill': 'i-bi-camera-reels-fill',\n\t'camera-reels': 'i-bi-camera-reels',\n\t'camera-video-fill': 'i-bi-camera-video-fill',\n\t'camera-video-off-fill': 'i-bi-camera-video-off-fill',\n\t'camera-video-off': 'i-bi-camera-video-off',\n\t'camera-video': 'i-bi-camera-video',\n\tcamera: 'i-bi-camera',\n\tcamera2: 'i-bi-camera2',\n\t'capslock-fill': 'i-bi-capslock-fill',\n\tcapslock: 'i-bi-capslock',\n\t'card-checklist': 'i-bi-card-checklist',\n\t'card-heading': 'i-bi-card-heading',\n\t'card-image': 'i-bi-card-image',\n\t'card-list': 'i-bi-card-list',\n\t'card-text': 'i-bi-card-text',\n\t'caret-down-fill': 'i-bi-caret-down-fill',\n\t'caret-down-square-fill': 'i-bi-caret-down-square-fill',\n\t'caret-down-square': 'i-bi-caret-down-square',\n\t'caret-down': 'i-bi-caret-down',\n\t'caret-left-fill': 'i-bi-caret-left-fill',\n\t'caret-left-square-fill': 'i-bi-caret-left-square-fill',\n\t'caret-left-square': 'i-bi-caret-left-square',\n\t'caret-left': 'i-bi-caret-left',\n\t'caret-right-fill': 'i-bi-caret-right-fill',\n\t'caret-right-square-fill': 'i-bi-caret-right-square-fill',\n\t'caret-right-square': 'i-bi-caret-right-square',\n\t'caret-right': 'i-bi-caret-right',\n\t'caret-up-fill': 'i-bi-caret-up-fill',\n\t'caret-up-square-fill': 'i-bi-caret-up-square-fill',\n\t'caret-up-square': 'i-bi-caret-up-square',\n\t'caret-up': 'i-bi-caret-up',\n\t'cart-check-fill': 'i-bi-cart-check-fill',\n\t'cart-check': 'i-bi-cart-check',\n\t'cart-dash-fill': 'i-bi-cart-dash-fill',\n\t'cart-dash': 'i-bi-cart-dash',\n\t'cart-fill': 'i-bi-cart-fill',\n\t'cart-plus-fill': 'i-bi-cart-plus-fill',\n\t'cart-plus': 'i-bi-cart-plus',\n\t'cart-x-fill': 'i-bi-cart-x-fill',\n\t'cart-x': 'i-bi-cart-x',\n\tcart: 'i-bi-cart',\n\tcart2: 'i-bi-cart2',\n\tcart3: 'i-bi-cart3',\n\tcart4: 'i-bi-cart4',\n\t'cash-stack': 'i-bi-cash-stack',\n\tcash: 'i-bi-cash',\n\tcast: 'i-bi-cast',\n\t'chat-dots-fill': 'i-bi-chat-dots-fill',\n\t'chat-dots': 'i-bi-chat-dots',\n\t'chat-fill': 'i-bi-chat-fill',\n\t'chat-left-dots-fill': 'i-bi-chat-left-dots-fill',\n\t'chat-left-dots': 'i-bi-chat-left-dots',\n\t'chat-left-fill': 'i-bi-chat-left-fill',\n\t'chat-left-quote-fill': 'i-bi-chat-left-quote-fill',\n\t'chat-left-quote': 'i-bi-chat-left-quote',\n\t'chat-left-text-fill': 'i-bi-chat-left-text-fill',\n\t'chat-left-text': 'i-bi-chat-left-text',\n\t'chat-left': 'i-bi-chat-left',\n\t'chat-quote-fill': 'i-bi-chat-quote-fill',\n\t'chat-quote': 'i-bi-chat-quote',\n\t'chat-right-dots-fill': 'i-bi-chat-right-dots-fill',\n\t'chat-right-dots': 'i-bi-chat-right-dots',\n\t'chat-right-fill': 'i-bi-chat-right-fill',\n\t'chat-right-quote-fill': 'i-bi-chat-right-quote-fill',\n\t'chat-right-quote': 'i-bi-chat-right-quote',\n\t'chat-right-text-fill': 'i-bi-chat-right-text-fill',\n\t'chat-right-text': 'i-bi-chat-right-text',\n\t'chat-right': 'i-bi-chat-right',\n\t'chat-square-dots-fill': 'i-bi-chat-square-dots-fill',\n\t'chat-square-dots': 'i-bi-chat-square-dots',\n\t'chat-square-fill': 'i-bi-chat-square-fill',\n\t'chat-square-quote-fill': 'i-bi-chat-square-quote-fill',\n\t'chat-square-quote': 'i-bi-chat-square-quote',\n\t'chat-square-text-fill': 'i-bi-chat-square-text-fill',\n\t'chat-square-text': 'i-bi-chat-square-text',\n\t'chat-square': 'i-bi-chat-square',\n\t'chat-text-fill': 'i-bi-chat-text-fill',\n\t'chat-text': 'i-bi-chat-text',\n\tchat: 'i-bi-chat',\n\t'check-all': 'i-bi-check-all',\n\t'check-circle-fill': 'i-bi-check-circle-fill',\n\t'check-circle': 'i-bi-check-circle',\n\t'check-square-fill': 'i-bi-check-square-fill',\n\t'check-square': 'i-bi-check-square',\n\tcheck: 'i-bi-check',\n\t'check2-all': 'i-bi-check2-all',\n\t'check2-circle': 'i-bi-check2-circle',\n\t'check2-square': 'i-bi-check2-square',\n\tcheck2: 'i-bi-check2',\n\t'chevron-bar-contract': 'i-bi-chevron-bar-contract',\n\t'chevron-bar-down': 'i-bi-chevron-bar-down',\n\t'chevron-bar-expand': 'i-bi-chevron-bar-expand',\n\t'chevron-bar-left': 'i-bi-chevron-bar-left',\n\t'chevron-bar-right': 'i-bi-chevron-bar-right',\n\t'chevron-bar-up': 'i-bi-chevron-bar-up',\n\t'chevron-compact-down': 'i-bi-chevron-compact-down',\n\t'chevron-compact-left': 'i-bi-chevron-compact-left',\n\t'chevron-compact-right': 'i-bi-chevron-compact-right',\n\t'chevron-compact-up': 'i-bi-chevron-compact-up',\n\t'chevron-contract': 'i-bi-chevron-contract',\n\t'chevron-double-down': 'i-bi-chevron-double-down',\n\t'chevron-double-left': 'i-bi-chevron-double-left',\n\t'chevron-double-right': 'i-bi-chevron-double-right',\n\t'chevron-double-up': 'i-bi-chevron-double-up',\n\t'chevron-down': 'i-bi-chevron-down',\n\t'chevron-expand': 'i-bi-chevron-expand',\n\t'chevron-left': 'i-bi-chevron-left',\n\t'chevron-right': 'i-bi-chevron-right',\n\t'chevron-up': 'i-bi-chevron-up',\n\t'circle-fill': 'i-bi-circle-fill',\n\t'circle-half': 'i-bi-circle-half',\n\t'circle-square': 'i-bi-circle-square',\n\tcircle: 'i-bi-circle',\n\t'clipboard-check': 'i-bi-clipboard-check',\n\t'clipboard-data': 'i-bi-clipboard-data',\n\t'clipboard-minus': 'i-bi-clipboard-minus',\n\t'clipboard-plus': 'i-bi-clipboard-plus',\n\t'clipboard-x': 'i-bi-clipboard-x',\n\tclipboard: 'i-bi-clipboard',\n\t'clock-fill': 'i-bi-clock-fill',\n\t'clock-history': 'i-bi-clock-history',\n\tclock: 'i-bi-clock',\n\t'cloud-arrow-down-fill': 'i-bi-cloud-arrow-down-fill',\n\t'cloud-arrow-down': 'i-bi-cloud-arrow-down',\n\t'cloud-arrow-up-fill': 'i-bi-cloud-arrow-up-fill',\n\t'cloud-arrow-up': 'i-bi-cloud-arrow-up',\n\t'cloud-check-fill': 'i-bi-cloud-check-fill',\n\t'cloud-check': 'i-bi-cloud-check',\n\t'cloud-download-fill': 'i-bi-cloud-download-fill',\n\t'cloud-download': 'i-bi-cloud-download',\n\t'cloud-drizzle-fill': 'i-bi-cloud-drizzle-fill',\n\t'cloud-drizzle': 'i-bi-cloud-drizzle',\n\t'cloud-fill': 'i-bi-cloud-fill',\n\t'cloud-fog-fill': 'i-bi-cloud-fog-fill',\n\t'cloud-fog': 'i-bi-cloud-fog',\n\t'cloud-fog2-fill': 'i-bi-cloud-fog2-fill',\n\t'cloud-fog2': 'i-bi-cloud-fog2',\n\t'cloud-hail-fill': 'i-bi-cloud-hail-fill',\n\t'cloud-hail': 'i-bi-cloud-hail',\n\t'cloud-haze-fill': 'i-bi-cloud-haze-fill',\n\t'cloud-haze': 'i-bi-cloud-haze',\n\t'cloud-haze2-fill': 'i-bi-cloud-haze2-fill',\n\t'cloud-lightning-fill': 'i-bi-cloud-lightning-fill',\n\t'cloud-lightning-rain-fill': 'i-bi-cloud-lightning-rain-fill',\n\t'cloud-lightning-rain': 'i-bi-cloud-lightning-rain',\n\t'cloud-lightning': 'i-bi-cloud-lightning',\n\t'cloud-minus-fill': 'i-bi-cloud-minus-fill',\n\t'cloud-minus': 'i-bi-cloud-minus',\n\t'cloud-moon-fill': 'i-bi-cloud-moon-fill',\n\t'cloud-moon': 'i-bi-cloud-moon',\n\t'cloud-plus-fill': 'i-bi-cloud-plus-fill',\n\t'cloud-plus': 'i-bi-cloud-plus',\n\t'cloud-rain-fill': 'i-bi-cloud-rain-fill',\n\t'cloud-rain-heavy-fill': 'i-bi-cloud-rain-heavy-fill',\n\t'cloud-rain-heavy': 'i-bi-cloud-rain-heavy',\n\t'cloud-rain': 'i-bi-cloud-rain',\n\t'cloud-slash-fill': 'i-bi-cloud-slash-fill',\n\t'cloud-slash': 'i-bi-cloud-slash',\n\t'cloud-sleet-fill': 'i-bi-cloud-sleet-fill',\n\t'cloud-sleet': 'i-bi-cloud-sleet',\n\t'cloud-snow-fill': 'i-bi-cloud-snow-fill',\n\t'cloud-snow': 'i-bi-cloud-snow',\n\t'cloud-sun-fill': 'i-bi-cloud-sun-fill',\n\t'cloud-sun': 'i-bi-cloud-sun',\n\t'cloud-upload-fill': 'i-bi-cloud-upload-fill',\n\t'cloud-upload': 'i-bi-cloud-upload',\n\tcloud: 'i-bi-cloud',\n\t'clouds-fill': 'i-bi-clouds-fill',\n\tclouds: 'i-bi-clouds',\n\t'cloudy-fill': 'i-bi-cloudy-fill',\n\tcloudy: 'i-bi-cloudy',\n\t'code-slash': 'i-bi-code-slash',\n\t'code-square': 'i-bi-code-square',\n\tcode: 'i-bi-code',\n\t'collection-fill': 'i-bi-collection-fill',\n\t'collection-play-fill': 'i-bi-collection-play-fill',\n\t'collection-play': 'i-bi-collection-play',\n\tcollection: 'i-bi-collection',\n\t'columns-gap': 'i-bi-columns-gap',\n\tcolumns: 'i-bi-columns',\n\tcommand: 'i-bi-command',\n\t'compass-fill': 'i-bi-compass-fill',\n\tcompass: 'i-bi-compass',\n\t'cone-striped': 'i-bi-cone-striped',\n\tcone: 'i-bi-cone',\n\tcontroller: 'i-bi-controller',\n\t'cpu-fill': 'i-bi-cpu-fill',\n\tcpu: 'i-bi-cpu',\n\t'credit-card-2-back-fill': 'i-bi-credit-card-2-back-fill',\n\t'credit-card-2-back': 'i-bi-credit-card-2-back',\n\t'credit-card-2-front-fill': 'i-bi-credit-card-2-front-fill',\n\t'credit-card-2-front': 'i-bi-credit-card-2-front',\n\t'credit-card-fill': 'i-bi-credit-card-fill',\n\t'credit-card': 'i-bi-credit-card',\n\tcrop: 'i-bi-crop',\n\t'cup-fill': 'i-bi-cup-fill',\n\t'cup-straw': 'i-bi-cup-straw',\n\tcup: 'i-bi-cup',\n\t'cursor-fill': 'i-bi-cursor-fill',\n\t'cursor-text': 'i-bi-cursor-text',\n\tcursor: 'i-bi-cursor',\n\t'dash-circle-dotted': 'i-bi-dash-circle-dotted',\n\t'dash-circle-fill': 'i-bi-dash-circle-fill',\n\t'dash-circle': 'i-bi-dash-circle',\n\t'dash-square-dotted': 'i-bi-dash-square-dotted',\n\t'dash-square-fill': 'i-bi-dash-square-fill',\n\t'dash-square': 'i-bi-dash-square',\n\tdash: 'i-bi-dash',\n\t'diagram-2-fill': 'i-bi-diagram-2-fill',\n\t'diagram-2': 'i-bi-diagram-2',\n\t'diagram-3-fill': 'i-bi-diagram-3-fill',\n\t'diagram-3': 'i-bi-diagram-3',\n\t'diamond-fill': 'i-bi-diamond-fill',\n\t'diamond-half': 'i-bi-diamond-half',\n\tdiamond: 'i-bi-diamond',\n\t'dice-1-fill': 'i-bi-dice-1-fill',\n\t'dice-1': 'i-bi-dice-1',\n\t'dice-2-fill': 'i-bi-dice-2-fill',\n\t'dice-2': 'i-bi-dice-2',\n\t'dice-3-fill': 'i-bi-dice-3-fill',\n\t'dice-3': 'i-bi-dice-3',\n\t'dice-4-fill': 'i-bi-dice-4-fill',\n\t'dice-4': 'i-bi-dice-4',\n\t'dice-5-fill': 'i-bi-dice-5-fill',\n\t'dice-5': 'i-bi-dice-5',\n\t'dice-6-fill': 'i-bi-dice-6-fill',\n\t'dice-6': 'i-bi-dice-6',\n\t'disc-fill': 'i-bi-disc-fill',\n\tdisc: 'i-bi-disc',\n\tdiscord: 'i-bi-discord',\n\t'display-fill': 'i-bi-display-fill',\n\tdisplay: 'i-bi-display',\n\t'distribute-horizontal': 'i-bi-distribute-horizontal',\n\t'distribute-vertical': 'i-bi-distribute-vertical',\n\t'door-closed-fill': 'i-bi-door-closed-fill',\n\t'door-closed': 'i-bi-door-closed',\n\t'door-open-fill': 'i-bi-door-open-fill',\n\t'door-open': 'i-bi-door-open',\n\tdot: 'i-bi-dot',\n\tdownload: 'i-bi-download',\n\t'droplet-fill': 'i-bi-droplet-fill',\n\t'droplet-half': 'i-bi-droplet-half',\n\tdroplet: 'i-bi-droplet',\n\tearbuds: 'i-bi-earbuds',\n\t'easel-fill': 'i-bi-easel-fill',\n\teasel: 'i-bi-easel',\n\t'egg-fill': 'i-bi-egg-fill',\n\t'egg-fried': 'i-bi-egg-fried',\n\tegg: 'i-bi-egg',\n\t'eject-fill': 'i-bi-eject-fill',\n\teject: 'i-bi-eject',\n\t'emoji-angry-fill': 'i-bi-emoji-angry-fill',\n\t'emoji-angry': 'i-bi-emoji-angry',\n\t'emoji-dizzy-fill': 'i-bi-emoji-dizzy-fill',\n\t'emoji-dizzy': 'i-bi-emoji-dizzy',\n\t'emoji-expressionless-fill': 'i-bi-emoji-expressionless-fill',\n\t'emoji-expressionless': 'i-bi-emoji-expressionless',\n\t'emoji-frown-fill': 'i-bi-emoji-frown-fill',\n\t'emoji-frown': 'i-bi-emoji-frown',\n\t'emoji-heart-eyes-fill': 'i-bi-emoji-heart-eyes-fill',\n\t'emoji-heart-eyes': 'i-bi-emoji-heart-eyes',\n\t'emoji-laughing-fill': 'i-bi-emoji-laughing-fill',\n\t'emoji-laughing': 'i-bi-emoji-laughing',\n\t'emoji-neutral-fill': 'i-bi-emoji-neutral-fill',\n\t'emoji-neutral': 'i-bi-emoji-neutral',\n\t'emoji-smile-fill': 'i-bi-emoji-smile-fill',\n\t'emoji-smile-upside-down-fill': 'i-bi-emoji-smile-upside-down-fill',\n\t'emoji-smile-upside-down': 'i-bi-emoji-smile-upside-down',\n\t'emoji-smile': 'i-bi-emoji-smile',\n\t'emoji-sunglasses-fill': 'i-bi-emoji-sunglasses-fill',\n\t'emoji-sunglasses': 'i-bi-emoji-sunglasses',\n\t'emoji-wink-fill': 'i-bi-emoji-wink-fill',\n\t'emoji-wink': 'i-bi-emoji-wink',\n\t'envelope-fill': 'i-bi-envelope-fill',\n\t'envelope-open-fill': 'i-bi-envelope-open-fill',\n\t'envelope-open': 'i-bi-envelope-open',\n\tenvelope: 'i-bi-envelope',\n\t'eraser-fill': 'i-bi-eraser-fill',\n\teraser: 'i-bi-eraser',\n\t'exclamation-circle-fill': 'i-bi-exclamation-circle-fill',\n\t'exclamation-circle': 'i-bi-exclamation-circle',\n\t'exclamation-diamond-fill': 'i-bi-exclamation-diamond-fill',\n\t'exclamation-diamond': 'i-bi-exclamation-diamond',\n\t'exclamation-octagon-fill': 'i-bi-exclamation-octagon-fill',\n\t'exclamation-octagon': 'i-bi-exclamation-octagon',\n\t'exclamation-square-fill': 'i-bi-exclamation-square-fill',\n\t'exclamation-square': 'i-bi-exclamation-square',\n\t'exclamation-triangle-fill': 'i-bi-exclamation-triangle-fill',\n\t'exclamation-triangle': 'i-bi-exclamation-triangle',\n\texclamation: 'i-bi-exclamation',\n\texclude: 'i-bi-exclude',\n\t'eye-fill': 'i-bi-eye-fill',\n\t'eye-slash-fill': 'i-bi-eye-slash-fill',\n\t'eye-slash': 'i-bi-eye-slash',\n\teye: 'i-bi-eye',\n\teyedropper: 'i-bi-eyedropper',\n\teyeglasses: 'i-bi-eyeglasses',\n\tfacebook: 'i-bi-facebook',\n\t'file-arrow-down-fill': 'i-bi-file-arrow-down-fill',\n\t'file-arrow-down': 'i-bi-file-arrow-down',\n\t'file-arrow-up-fill': 'i-bi-file-arrow-up-fill',\n\t'file-arrow-up': 'i-bi-file-arrow-up',\n\t'file-bar-graph-fill': 'i-bi-file-bar-graph-fill',\n\t'file-bar-graph': 'i-bi-file-bar-graph',\n\t'file-binary-fill': 'i-bi-file-binary-fill',\n\t'file-binary': 'i-bi-file-binary',\n\t'file-break-fill': 'i-bi-file-break-fill',\n\t'file-break': 'i-bi-file-break',\n\t'file-check-fill': 'i-bi-file-check-fill',\n\t'file-check': 'i-bi-file-check',\n\t'file-code-fill': 'i-bi-file-code-fill',\n\t'file-code': 'i-bi-file-code',\n\t'file-diff-fill': 'i-bi-file-diff-fill',\n\t'file-diff': 'i-bi-file-diff',\n\t'file-earmark-arrow-down-fill': 'i-bi-file-earmark-arrow-down-fill',\n\t'file-earmark-arrow-down': 'i-bi-file-earmark-arrow-down',\n\t'file-earmark-arrow-up-fill': 'i-bi-file-earmark-arrow-up-fill',\n\t'file-earmark-arrow-up': 'i-bi-file-earmark-arrow-up',\n\t'file-earmark-bar-graph-fill': 'i-bi-file-earmark-bar-graph-fill',\n\t'file-earmark-bar-graph': 'i-bi-file-earmark-bar-graph',\n\t'file-earmark-binary-fill': 'i-bi-file-earmark-binary-fill',\n\t'file-earmark-binary': 'i-bi-file-earmark-binary',\n\t'file-earmark-break-fill': 'i-bi-file-earmark-break-fill',\n\t'file-earmark-break': 'i-bi-file-earmark-break',\n\t'file-earmark-check-fill': 'i-bi-file-earmark-check-fill',\n\t'file-earmark-check': 'i-bi-file-earmark-check',\n\t'file-earmark-code-fill': 'i-bi-file-earmark-code-fill',\n\t'file-earmark-code': 'i-bi-file-earmark-code',\n\t'file-earmark-diff-fill': 'i-bi-file-earmark-diff-fill',\n\t'file-earmark-diff': 'i-bi-file-earmark-diff',\n\t'file-earmark-easel-fill': 'i-bi-file-earmark-easel-fill',\n\t'file-earmark-easel': 'i-bi-file-earmark-easel',\n\t'file-earmark-excel-fill': 'i-bi-file-earmark-excel-fill',\n\t'file-earmark-excel': 'i-bi-file-earmark-excel',\n\t'file-earmark-fill': 'i-bi-file-earmark-fill',\n\t'file-earmark-font-fill': 'i-bi-file-earmark-font-fill',\n\t'file-earmark-font': 'i-bi-file-earmark-font',\n\t'file-earmark-image-fill': 'i-bi-file-earmark-image-fill',\n\t'file-earmark-image': 'i-bi-file-earmark-image',\n\t'file-earmark-lock-fill': 'i-bi-file-earmark-lock-fill',\n\t'file-earmark-lock': 'i-bi-file-earmark-lock',\n\t'file-earmark-lock2-fill': 'i-bi-file-earmark-lock2-fill',\n\t'file-earmark-lock2': 'i-bi-file-earmark-lock2',\n\t'file-earmark-medical-fill': 'i-bi-file-earmark-medical-fill',\n\t'file-earmark-medical': 'i-bi-file-earmark-medical',\n\t'file-earmark-minus-fill': 'i-bi-file-earmark-minus-fill',\n\t'file-earmark-minus': 'i-bi-file-earmark-minus',\n\t'file-earmark-music-fill': 'i-bi-file-earmark-music-fill',\n\t'file-earmark-music': 'i-bi-file-earmark-music',\n\t'file-earmark-person-fill': 'i-bi-file-earmark-person-fill',\n\t'file-earmark-person': 'i-bi-file-earmark-person',\n\t'file-earmark-play-fill': 'i-bi-file-earmark-play-fill',\n\t'file-earmark-play': 'i-bi-file-earmark-play',\n\t'file-earmark-plus-fill': 'i-bi-file-earmark-plus-fill',\n\t'file-earmark-plus': 'i-bi-file-earmark-plus',\n\t'file-earmark-post-fill': 'i-bi-file-earmark-post-fill',\n\t'file-earmark-post': 'i-bi-file-earmark-post',\n\t'file-earmark-ppt-fill': 'i-bi-file-earmark-ppt-fill',\n\t'file-earmark-ppt': 'i-bi-file-earmark-ppt',\n\t'file-earmark-richtext-fill': 'i-bi-file-earmark-richtext-fill',\n\t'file-earmark-richtext': 'i-bi-file-earmark-richtext',\n\t'file-earmark-ruled-fill': 'i-bi-file-earmark-ruled-fill',\n\t'file-earmark-ruled': 'i-bi-file-earmark-ruled',\n\t'file-earmark-slides-fill': 'i-bi-file-earmark-slides-fill',\n\t'file-earmark-slides': 'i-bi-file-earmark-slides',\n\t'file-earmark-spreadsheet-fill': 'i-bi-file-earmark-spreadsheet-fill',\n\t'file-earmark-spreadsheet': 'i-bi-file-earmark-spreadsheet',\n\t'file-earmark-text-fill': 'i-bi-file-earmark-text-fill',\n\t'file-earmark-text': 'i-bi-file-earmark-text',\n\t'file-earmark-word-fill': 'i-bi-file-earmark-word-fill',\n\t'file-earmark-word': 'i-bi-file-earmark-word',\n\t'file-earmark-x-fill': 'i-bi-file-earmark-x-fill',\n\t'file-earmark-x': 'i-bi-file-earmark-x',\n\t'file-earmark-zip-fill': 'i-bi-file-earmark-zip-fill',\n\t'file-earmark-zip': 'i-bi-file-earmark-zip',\n\t'file-earmark': 'i-bi-file-earmark',\n\t'file-easel-fill': 'i-bi-file-easel-fill',\n\t'file-easel': 'i-bi-file-easel',\n\t'file-excel-fill': 'i-bi-file-excel-fill',\n\t'file-excel': 'i-bi-file-excel',\n\t'file-fill': 'i-bi-file-fill',\n\t'file-font-fill': 'i-bi-file-font-fill',\n\t'file-font': 'i-bi-file-font',\n\t'file-image-fill': 'i-bi-file-image-fill',\n\t'file-image': 'i-bi-file-image',\n\t'file-lock-fill': 'i-bi-file-lock-fill',\n\t'file-lock': 'i-bi-file-lock',\n\t'file-lock2-fill': 'i-bi-file-lock2-fill',\n\t'file-lock2': 'i-bi-file-lock2',\n\t'file-medical-fill': 'i-bi-file-medical-fill',\n\t'file-medical': 'i-bi-file-medical',\n\t'file-minus-fill': 'i-bi-file-minus-fill',\n\t'file-minus': 'i-bi-file-minus',\n\t'file-music-fill': 'i-bi-file-music-fill',\n\t'file-music': 'i-bi-file-music',\n\t'file-person-fill': 'i-bi-file-person-fill',\n\t'file-person': 'i-bi-file-person',\n\t'file-play-fill': 'i-bi-file-play-fill',\n\t'file-play': 'i-bi-file-play',\n\t'file-plus-fill': 'i-bi-file-plus-fill',\n\t'file-plus': 'i-bi-file-plus',\n\t'file-post-fill': 'i-bi-file-post-fill',\n\t'file-post': 'i-bi-file-post',\n\t'file-ppt-fill': 'i-bi-file-ppt-fill',\n\t'file-ppt': 'i-bi-file-ppt',\n\t'file-richtext-fill': 'i-bi-file-richtext-fill',\n\t'file-richtext': 'i-bi-file-richtext',\n\t'file-ruled-fill': 'i-bi-file-ruled-fill',\n\t'file-ruled': 'i-bi-file-ruled',\n\t'file-slides-fill': 'i-bi-file-slides-fill',\n\t'file-slides': 'i-bi-file-slides',\n\t'file-spreadsheet-fill': 'i-bi-file-spreadsheet-fill',\n\t'file-spreadsheet': 'i-bi-file-spreadsheet',\n\t'file-text-fill': 'i-bi-file-text-fill',\n\t'file-text': 'i-bi-file-text',\n\t'file-word-fill': 'i-bi-file-word-fill',\n\t'file-word': 'i-bi-file-word',\n\t'file-x-fill': 'i-bi-file-x-fill',\n\t'file-x': 'i-bi-file-x',\n\t'file-zip-fill': 'i-bi-file-zip-fill',\n\t'file-zip': 'i-bi-file-zip',\n\tfile: 'i-bi-file',\n\t'files-alt': 'i-bi-files-alt',\n\tfiles: 'i-bi-files',\n\tfilm: 'i-bi-film',\n\t'filter-circle-fill': 'i-bi-filter-circle-fill',\n\t'filter-circle': 'i-bi-filter-circle',\n\t'filter-left': 'i-bi-filter-left',\n\t'filter-right': 'i-bi-filter-right',\n\t'filter-square-fill': 'i-bi-filter-square-fill',\n\t'filter-square': 'i-bi-filter-square',\n\tfilter: 'i-bi-filter',\n\t'flag-fill': 'i-bi-flag-fill',\n\tflag: 'i-bi-flag',\n\tflower1: 'i-bi-flower1',\n\tflower2: 'i-bi-flower2',\n\tflower3: 'i-bi-flower3',\n\t'folder-check': 'i-bi-folder-check',\n\t'folder-fill': 'i-bi-folder-fill',\n\t'folder-minus': 'i-bi-folder-minus',\n\t'folder-plus': 'i-bi-folder-plus',\n\t'folder-symlink-fill': 'i-bi-folder-symlink-fill',\n\t'folder-symlink': 'i-bi-folder-symlink',\n\t'folder-x': 'i-bi-folder-x',\n\tfolder: 'i-bi-folder',\n\t'folder2-open': 'i-bi-folder2-open',\n\tfolder2: 'i-bi-folder2',\n\tfonts: 'i-bi-fonts',\n\t'forward-fill': 'i-bi-forward-fill',\n\tforward: 'i-bi-forward',\n\tfront: 'i-bi-front',\n\t'fullscreen-exit': 'i-bi-fullscreen-exit',\n\tfullscreen: 'i-bi-fullscreen',\n\t'funnel-fill': 'i-bi-funnel-fill',\n\tfunnel: 'i-bi-funnel',\n\t'gear-fill': 'i-bi-gear-fill',\n\t'gear-wide-connected': 'i-bi-gear-wide-connected',\n\t'gear-wide': 'i-bi-gear-wide',\n\tgear: 'i-bi-gear',\n\tgem: 'i-bi-gem',\n\t'geo-alt-fill': 'i-bi-geo-alt-fill',\n\t'geo-alt': 'i-bi-geo-alt',\n\t'geo-fill': 'i-bi-geo-fill',\n\tgeo: 'i-bi-geo',\n\t'gift-fill': 'i-bi-gift-fill',\n\tgift: 'i-bi-gift',\n\tgithub: 'i-bi-github',\n\tglobe: 'i-bi-globe',\n\tglobe2: 'i-bi-globe2',\n\tgoogle: 'i-bi-google',\n\t'graph-down': 'i-bi-graph-down',\n\t'graph-up': 'i-bi-graph-up',\n\t'grid-1x2-fill': 'i-bi-grid-1x2-fill',\n\t'grid-1x2': 'i-bi-grid-1x2',\n\t'grid-3x2-gap-fill': 'i-bi-grid-3x2-gap-fill',\n\t'grid-3x2-gap': 'i-bi-grid-3x2-gap',\n\t'grid-3x2': 'i-bi-grid-3x2',\n\t'grid-3x3-gap-fill': 'i-bi-grid-3x3-gap-fill',\n\t'grid-3x3-gap': 'i-bi-grid-3x3-gap',\n\t'grid-3x3': 'i-bi-grid-3x3',\n\t'grid-fill': 'i-bi-grid-fill',\n\tgrid: 'i-bi-grid',\n\t'grip-horizontal': 'i-bi-grip-horizontal',\n\t'grip-vertical': 'i-bi-grip-vertical',\n\thammer: 'i-bi-hammer',\n\t'hand-index-fill': 'i-bi-hand-index-fill',\n\t'hand-index-thumb-fill': 'i-bi-hand-index-thumb-fill',\n\t'hand-index-thumb': 'i-bi-hand-index-thumb',\n\t'hand-index': 'i-bi-hand-index',\n\t'hand-thumbs-down-fill': 'i-bi-hand-thumbs-down-fill',\n\t'hand-thumbs-down': 'i-bi-hand-thumbs-down',\n\t'hand-thumbs-up-fill': 'i-bi-hand-thumbs-up-fill',\n\t'hand-thumbs-up': 'i-bi-hand-thumbs-up',\n\t'handbag-fill': 'i-bi-handbag-fill',\n\thandbag: 'i-bi-handbag',\n\thash: 'i-bi-hash',\n\t'hdd-fill': 'i-bi-hdd-fill',\n\t'hdd-network-fill': 'i-bi-hdd-network-fill',\n\t'hdd-network': 'i-bi-hdd-network',\n\t'hdd-rack-fill': 'i-bi-hdd-rack-fill',\n\t'hdd-rack': 'i-bi-hdd-rack',\n\t'hdd-stack-fill': 'i-bi-hdd-stack-fill',\n\t'hdd-stack': 'i-bi-hdd-stack',\n\thdd: 'i-bi-hdd',\n\theadphones: 'i-bi-headphones',\n\theadset: 'i-bi-headset',\n\t'heart-fill': 'i-bi-heart-fill',\n\t'heart-half': 'i-bi-heart-half',\n\theart: 'i-bi-heart',\n\t'heptagon-fill': 'i-bi-heptagon-fill',\n\t'heptagon-half': 'i-bi-heptagon-half',\n\theptagon: 'i-bi-heptagon',\n\t'hexagon-fill': 'i-bi-hexagon-fill',\n\t'hexagon-half': 'i-bi-hexagon-half',\n\thexagon: 'i-bi-hexagon',\n\t'hourglass-bottom': 'i-bi-hourglass-bottom',\n\t'hourglass-split': 'i-bi-hourglass-split',\n\t'hourglass-top': 'i-bi-hourglass-top',\n\thourglass: 'i-bi-hourglass',\n\t'house-door-fill': 'i-bi-house-door-fill',\n\t'house-door': 'i-bi-house-door',\n\t'house-fill': 'i-bi-house-fill',\n\thouse: 'i-bi-house',\n\thr: 'i-bi-hr',\n\thurricane: 'i-bi-hurricane',\n\t'image-alt': 'i-bi-image-alt',\n\t'image-fill': 'i-bi-image-fill',\n\timage: 'i-bi-image',\n\timages: 'i-bi-images',\n\t'inbox-fill': 'i-bi-inbox-fill',\n\tinbox: 'i-bi-inbox',\n\t'inboxes-fill': 'i-bi-inboxes-fill',\n\tinboxes: 'i-bi-inboxes',\n\t'info-circle-fill': 'i-bi-info-circle-fill',\n\t'info-circle': 'i-bi-info-circle',\n\t'info-square-fill': 'i-bi-info-square-fill',\n\t'info-square': 'i-bi-info-square',\n\tinfo: 'i-bi-info',\n\t'input-cursor-text': 'i-bi-input-cursor-text',\n\t'input-cursor': 'i-bi-input-cursor',\n\tinstagram: 'i-bi-instagram',\n\tintersect: 'i-bi-intersect',\n\t'journal-album': 'i-bi-journal-album',\n\t'journal-arrow-down': 'i-bi-journal-arrow-down',\n\t'journal-arrow-up': 'i-bi-journal-arrow-up',\n\t'journal-bookmark-fill': 'i-bi-journal-bookmark-fill',\n\t'journal-bookmark': 'i-bi-journal-bookmark',\n\t'journal-check': 'i-bi-journal-check',\n\t'journal-code': 'i-bi-journal-code',\n\t'journal-medical': 'i-bi-journal-medical',\n\t'journal-minus': 'i-bi-journal-minus',\n\t'journal-plus': 'i-bi-journal-plus',\n\t'journal-richtext': 'i-bi-journal-richtext',\n\t'journal-text': 'i-bi-journal-text',\n\t'journal-x': 'i-bi-journal-x',\n\tjournal: 'i-bi-journal',\n\tjournals: 'i-bi-journals',\n\tjoystick: 'i-bi-joystick',\n\t'justify-left': 'i-bi-justify-left',\n\t'justify-right': 'i-bi-justify-right',\n\tjustify: 'i-bi-justify',\n\t'kanban-fill': 'i-bi-kanban-fill',\n\tkanban: 'i-bi-kanban',\n\t'key-fill': 'i-bi-key-fill',\n\tkey: 'i-bi-key',\n\t'keyboard-fill': 'i-bi-keyboard-fill',\n\tkeyboard: 'i-bi-keyboard',\n\tladder: 'i-bi-ladder',\n\t'lamp-fill': 'i-bi-lamp-fill',\n\tlamp: 'i-bi-lamp',\n\t'laptop-fill': 'i-bi-laptop-fill',\n\tlaptop: 'i-bi-laptop',\n\t'layer-backward': 'i-bi-layer-backward',\n\t'layer-forward': 'i-bi-layer-forward',\n\t'layers-fill': 'i-bi-layers-fill',\n\t'layers-half': 'i-bi-layers-half',\n\tlayers: 'i-bi-layers',\n\t'layout-sidebar-inset-reverse': 'i-bi-layout-sidebar-inset-reverse',\n\t'layout-sidebar-inset': 'i-bi-layout-sidebar-inset',\n\t'layout-sidebar-reverse': 'i-bi-layout-sidebar-reverse',\n\t'layout-sidebar': 'i-bi-layout-sidebar',\n\t'layout-split': 'i-bi-layout-split',\n\t'layout-text-sidebar-reverse': 'i-bi-layout-text-sidebar-reverse',\n\t'layout-text-sidebar': 'i-bi-layout-text-sidebar',\n\t'layout-text-window-reverse': 'i-bi-layout-text-window-reverse',\n\t'layout-text-window': 'i-bi-layout-text-window',\n\t'layout-three-columns': 'i-bi-layout-three-columns',\n\t'layout-wtf': 'i-bi-layout-wtf',\n\t'life-preserver': 'i-bi-life-preserver',\n\t'lightbulb-fill': 'i-bi-lightbulb-fill',\n\t'lightbulb-off-fill': 'i-bi-lightbulb-off-fill',\n\t'lightbulb-off': 'i-bi-lightbulb-off',\n\tlightbulb: 'i-bi-lightbulb',\n\t'lightning-charge-fill': 'i-bi-lightning-charge-fill',\n\t'lightning-charge': 'i-bi-lightning-charge',\n\t'lightning-fill': 'i-bi-lightning-fill',\n\tlightning: 'i-bi-lightning',\n\t'link-45deg': 'i-bi-link-45deg',\n\tlink: 'i-bi-link',\n\tlinkedin: 'i-bi-linkedin',\n\t'list-check': 'i-bi-list-check',\n\t'list-nested': 'i-bi-list-nested',\n\t'list-ol': 'i-bi-list-ol',\n\t'list-stars': 'i-bi-list-stars',\n\t'list-task': 'i-bi-list-task',\n\t'list-ul': 'i-bi-list-ul',\n\tlist: 'i-bi-list',\n\t'lock-fill': 'i-bi-lock-fill',\n\tlock: 'i-bi-lock',\n\tmailbox: 'i-bi-mailbox',\n\tmailbox2: 'i-bi-mailbox2',\n\t'map-fill': 'i-bi-map-fill',\n\tmap: 'i-bi-map',\n\t'markdown-fill': 'i-bi-markdown-fill',\n\tmarkdown: 'i-bi-markdown',\n\tmask: 'i-bi-mask',\n\t'megaphone-fill': 'i-bi-megaphone-fill',\n\tmegaphone: 'i-bi-megaphone',\n\t'menu-app-fill': 'i-bi-menu-app-fill',\n\t'menu-app': 'i-bi-menu-app',\n\t'menu-button-fill': 'i-bi-menu-button-fill',\n\t'menu-button-wide-fill': 'i-bi-menu-button-wide-fill',\n\t'menu-button-wide': 'i-bi-menu-button-wide',\n\t'menu-button': 'i-bi-menu-button',\n\t'menu-down': 'i-bi-menu-down',\n\t'menu-up': 'i-bi-menu-up',\n\t'mic-fill': 'i-bi-mic-fill',\n\t'mic-mute-fill': 'i-bi-mic-mute-fill',\n\t'mic-mute': 'i-bi-mic-mute',\n\tmic: 'i-bi-mic',\n\t'minecart-loaded': 'i-bi-minecart-loaded',\n\tminecart: 'i-bi-minecart',\n\tmoisture: 'i-bi-moisture',\n\t'moon-fill': 'i-bi-moon-fill',\n\t'moon-stars-fill': 'i-bi-moon-stars-fill',\n\t'moon-stars': 'i-bi-moon-stars',\n\tmoon: 'i-bi-moon',\n\t'mouse-fill': 'i-bi-mouse-fill',\n\tmouse: 'i-bi-mouse',\n\t'mouse2-fill': 'i-bi-mouse2-fill',\n\tmouse2: 'i-bi-mouse2',\n\t'mouse3-fill': 'i-bi-mouse3-fill',\n\tmouse3: 'i-bi-mouse3',\n\t'music-note-beamed': 'i-bi-music-note-beamed',\n\t'music-note-list': 'i-bi-music-note-list',\n\t'music-note': 'i-bi-music-note',\n\t'music-player-fill': 'i-bi-music-player-fill',\n\t'music-player': 'i-bi-music-player',\n\tnewspaper: 'i-bi-newspaper',\n\t'node-minus-fill': 'i-bi-node-minus-fill',\n\t'node-minus': 'i-bi-node-minus',\n\t'node-plus-fill': 'i-bi-node-plus-fill',\n\t'node-plus': 'i-bi-node-plus',\n\t'nut-fill': 'i-bi-nut-fill',\n\tnut: 'i-bi-nut',\n\t'octagon-fill': 'i-bi-octagon-fill',\n\t'octagon-half': 'i-bi-octagon-half',\n\toctagon: 'i-bi-octagon',\n\toption: 'i-bi-option',\n\toutlet: 'i-bi-outlet',\n\t'paint-bucket': 'i-bi-paint-bucket',\n\t'palette-fill': 'i-bi-palette-fill',\n\tpalette: 'i-bi-palette',\n\tpalette2: 'i-bi-palette2',\n\tpaperclip: 'i-bi-paperclip',\n\tparagraph: 'i-bi-paragraph',\n\t'patch-check-fill': 'i-bi-patch-check-fill',\n\t'patch-check': 'i-bi-patch-check',\n\t'patch-exclamation-fill': 'i-bi-patch-exclamation-fill',\n\t'patch-exclamation': 'i-bi-patch-exclamation',\n\t'patch-minus-fill': 'i-bi-patch-minus-fill',\n\t'patch-minus': 'i-bi-patch-minus',\n\t'patch-plus-fill': 'i-bi-patch-plus-fill',\n\t'patch-plus': 'i-bi-patch-plus',\n\t'patch-question-fill': 'i-bi-patch-question-fill',\n\t'patch-question': 'i-bi-patch-question',\n\t'pause-btn-fill': 'i-bi-pause-btn-fill',\n\t'pause-btn': 'i-bi-pause-btn',\n\t'pause-circle-fill': 'i-bi-pause-circle-fill',\n\t'pause-circle': 'i-bi-pause-circle',\n\t'pause-fill': 'i-bi-pause-fill',\n\tpause: 'i-bi-pause',\n\t'peace-fill': 'i-bi-peace-fill',\n\tpeace: 'i-bi-peace',\n\t'pen-fill': 'i-bi-pen-fill',\n\tpen: 'i-bi-pen',\n\t'pencil-fill': 'i-bi-pencil-fill',\n\t'pencil-square': 'i-bi-pencil-square',\n\tpencil: 'i-bi-pencil',\n\t'pentagon-fill': 'i-bi-pentagon-fill',\n\t'pentagon-half': 'i-bi-pentagon-half',\n\tpentagon: 'i-bi-pentagon',\n\t'people-fill': 'i-bi-people-fill',\n\tpeople: 'i-bi-people',\n\tpercent: 'i-bi-percent',\n\t'person-badge-fill': 'i-bi-person-badge-fill',\n\t'person-badge': 'i-bi-person-badge',\n\t'person-bounding-box': 'i-bi-person-bounding-box',\n\t'person-check-fill': 'i-bi-person-check-fill',\n\t'person-check': 'i-bi-person-check',\n\t'person-circle': 'i-bi-person-circle',\n\t'person-dash-fill': 'i-bi-person-dash-fill',\n\t'person-dash': 'i-bi-person-dash',\n\t'person-fill': 'i-bi-person-fill',\n\t'person-lines-fill': 'i-bi-person-lines-fill',\n\t'person-plus-fill': 'i-bi-person-plus-fill',\n\t'person-plus': 'i-bi-person-plus',\n\t'person-square': 'i-bi-person-square',\n\t'person-x-fill': 'i-bi-person-x-fill',\n\t'person-x': 'i-bi-person-x',\n\tperson: 'i-bi-person',\n\t'phone-fill': 'i-bi-phone-fill',\n\t'phone-landscape-fill': 'i-bi-phone-landscape-fill',\n\t'phone-landscape': 'i-bi-phone-landscape',\n\t'phone-vibrate-fill': 'i-bi-phone-vibrate-fill',\n\t'phone-vibrate': 'i-bi-phone-vibrate',\n\tphone: 'i-bi-phone',\n\t'pie-chart-fill': 'i-bi-pie-chart-fill',\n\t'pie-chart': 'i-bi-pie-chart',\n\t'pin-angle-fill': 'i-bi-pin-angle-fill',\n\t'pin-angle': 'i-bi-pin-angle',\n\t'pin-fill': 'i-bi-pin-fill',\n\tpin: 'i-bi-pin',\n\t'pip-fill': 'i-bi-pip-fill',\n\tpip: 'i-bi-pip',\n\t'play-btn-fill': 'i-bi-play-btn-fill',\n\t'play-btn': 'i-bi-play-btn',\n\t'play-circle-fill': 'i-bi-play-circle-fill',\n\t'play-circle': 'i-bi-play-circle',\n\t'play-fill': 'i-bi-play-fill',\n\tplay: 'i-bi-play',\n\t'plug-fill': 'i-bi-plug-fill',\n\tplug: 'i-bi-plug',\n\t'plus-circle-dotted': 'i-bi-plus-circle-dotted',\n\t'plus-circle-fill': 'i-bi-plus-circle-fill',\n\t'plus-circle': 'i-bi-plus-circle',\n\t'plus-square-dotted': 'i-bi-plus-square-dotted',\n\t'plus-square-fill': 'i-bi-plus-square-fill',\n\t'plus-square': 'i-bi-plus-square',\n\tplus: 'i-bi-plus',\n\tpower: 'i-bi-power',\n\t'printer-fill': 'i-bi-printer-fill',\n\tprinter: 'i-bi-printer',\n\t'puzzle-fill': 'i-bi-puzzle-fill',\n\tpuzzle: 'i-bi-puzzle',\n\t'question-circle-fill': 'i-bi-question-circle-fill',\n\t'question-circle': 'i-bi-question-circle',\n\t'question-diamond-fill': 'i-bi-question-diamond-fill',\n\t'question-diamond': 'i-bi-question-diamond',\n\t'question-octagon-fill': 'i-bi-question-octagon-fill',\n\t'question-octagon': 'i-bi-question-octagon',\n\t'question-square-fill': 'i-bi-question-square-fill',\n\t'question-square': 'i-bi-question-square',\n\tquestion: 'i-bi-question',\n\trainbow: 'i-bi-rainbow',\n\t'receipt-cutoff': 'i-bi-receipt-cutoff',\n\treceipt: 'i-bi-receipt',\n\t'reception-0': 'i-bi-reception-0',\n\t'reception-1': 'i-bi-reception-1',\n\t'reception-2': 'i-bi-reception-2',\n\t'reception-3': 'i-bi-reception-3',\n\t'reception-4': 'i-bi-reception-4',\n\t'record-btn-fill': 'i-bi-record-btn-fill',\n\t'record-btn': 'i-bi-record-btn',\n\t'record-circle-fill': 'i-bi-record-circle-fill',\n\t'record-circle': 'i-bi-record-circle',\n\t'record-fill': 'i-bi-record-fill',\n\trecord: 'i-bi-record',\n\t'record2-fill': 'i-bi-record2-fill',\n\trecord2: 'i-bi-record2',\n\t'reply-all-fill': 'i-bi-reply-all-fill',\n\t'reply-all': 'i-bi-reply-all',\n\t'reply-fill': 'i-bi-reply-fill',\n\treply: 'i-bi-reply',\n\t'rss-fill': 'i-bi-rss-fill',\n\trss: 'i-bi-rss',\n\trulers: 'i-bi-rulers',\n\t'save-fill': 'i-bi-save-fill',\n\tsave: 'i-bi-save',\n\t'save2-fill': 'i-bi-save2-fill',\n\tsave2: 'i-bi-save2',\n\tscissors: 'i-bi-scissors',\n\tscrewdriver: 'i-bi-screwdriver',\n\tsearch: 'i-bi-search',\n\t'segmented-nav': 'i-bi-segmented-nav',\n\tserver: 'i-bi-server',\n\t'share-fill': 'i-bi-share-fill',\n\tshare: 'i-bi-share',\n\t'shield-check': 'i-bi-shield-check',\n\t'shield-exclamation': 'i-bi-shield-exclamation',\n\t'shield-fill-check': 'i-bi-shield-fill-check',\n\t'shield-fill-exclamation': 'i-bi-shield-fill-exclamation',\n\t'shield-fill-minus': 'i-bi-shield-fill-minus',\n\t'shield-fill-plus': 'i-bi-shield-fill-plus',\n\t'shield-fill-x': 'i-bi-shield-fill-x',\n\t'shield-fill': 'i-bi-shield-fill',\n\t'shield-lock-fill': 'i-bi-shield-lock-fill',\n\t'shield-lock': 'i-bi-shield-lock',\n\t'shield-minus': 'i-bi-shield-minus',\n\t'shield-plus': 'i-bi-shield-plus',\n\t'shield-shaded': 'i-bi-shield-shaded',\n\t'shield-slash-fill': 'i-bi-shield-slash-fill',\n\t'shield-slash': 'i-bi-shield-slash',\n\t'shield-x': 'i-bi-shield-x',\n\tshield: 'i-bi-shield',\n\t'shift-fill': 'i-bi-shift-fill',\n\tshift: 'i-bi-shift',\n\t'shop-window': 'i-bi-shop-window',\n\tshop: 'i-bi-shop',\n\tshuffle: 'i-bi-shuffle',\n\t'signpost-2-fill': 'i-bi-signpost-2-fill',\n\t'signpost-2': 'i-bi-signpost-2',\n\t'signpost-fill': 'i-bi-signpost-fill',\n\t'signpost-split-fill': 'i-bi-signpost-split-fill',\n\t'signpost-split': 'i-bi-signpost-split',\n\tsignpost: 'i-bi-signpost',\n\t'sim-fill': 'i-bi-sim-fill',\n\tsim: 'i-bi-sim',\n\t'skip-backward-btn-fill': 'i-bi-skip-backward-btn-fill',\n\t'skip-backward-btn': 'i-bi-skip-backward-btn',\n\t'skip-backward-circle-fill': 'i-bi-skip-backward-circle-fill',\n\t'skip-backward-circle': 'i-bi-skip-backward-circle',\n\t'skip-backward-fill': 'i-bi-skip-backward-fill',\n\t'skip-backward': 'i-bi-skip-backward',\n\t'skip-end-btn-fill': 'i-bi-skip-end-btn-fill',\n\t'skip-end-btn': 'i-bi-skip-end-btn',\n\t'skip-end-circle-fill': 'i-bi-skip-end-circle-fill',\n\t'skip-end-circle': 'i-bi-skip-end-circle',\n\t'skip-end-fill': 'i-bi-skip-end-fill',\n\t'skip-end': 'i-bi-skip-end',\n\t'skip-forward-btn-fill': 'i-bi-skip-forward-btn-fill',\n\t'skip-forward-btn': 'i-bi-skip-forward-btn',\n\t'skip-forward-circle-fill': 'i-bi-skip-forward-circle-fill',\n\t'skip-forward-circle': 'i-bi-skip-forward-circle',\n\t'skip-forward-fill': 'i-bi-skip-forward-fill',\n\t'skip-forward': 'i-bi-skip-forward',\n\t'skip-start-btn-fill': 'i-bi-skip-start-btn-fill',\n\t'skip-start-btn': 'i-bi-skip-start-btn',\n\t'skip-start-circle-fill': 'i-bi-skip-start-circle-fill',\n\t'skip-start-circle': 'i-bi-skip-start-circle',\n\t'skip-start-fill': 'i-bi-skip-start-fill',\n\t'skip-start': 'i-bi-skip-start',\n\tslack: 'i-bi-slack',\n\t'slash-circle-fill': 'i-bi-slash-circle-fill',\n\t'slash-circle': 'i-bi-slash-circle',\n\t'slash-square-fill': 'i-bi-slash-square-fill',\n\t'slash-square': 'i-bi-slash-square',\n\tslash: 'i-bi-slash',\n\tsliders: 'i-bi-sliders',\n\tsmartwatch: 'i-bi-smartwatch',\n\tsnow: 'i-bi-snow',\n\tsnow2: 'i-bi-snow2',\n\tsnow3: 'i-bi-snow3',\n\t'sort-alpha-down-alt': 'i-bi-sort-alpha-down-alt',\n\t'sort-alpha-down': 'i-bi-sort-alpha-down',\n\t'sort-alpha-up-alt': 'i-bi-sort-alpha-up-alt',\n\t'sort-alpha-up': 'i-bi-sort-alpha-up',\n\t'sort-down-alt': 'i-bi-sort-down-alt',\n\t'sort-down': 'i-bi-sort-down',\n\t'sort-numeric-down-alt': 'i-bi-sort-numeric-down-alt',\n\t'sort-numeric-down': 'i-bi-sort-numeric-down',\n\t'sort-numeric-up-alt': 'i-bi-sort-numeric-up-alt',\n\t'sort-numeric-up': 'i-bi-sort-numeric-up',\n\t'sort-up-alt': 'i-bi-sort-up-alt',\n\t'sort-up': 'i-bi-sort-up',\n\tsoundwave: 'i-bi-soundwave',\n\t'speaker-fill': 'i-bi-speaker-fill',\n\tspeaker: 'i-bi-speaker',\n\tspeedometer: 'i-bi-speedometer',\n\tspeedometer2: 'i-bi-speedometer2',\n\tspellcheck: 'i-bi-spellcheck',\n\t'square-fill': 'i-bi-square-fill',\n\t'square-half': 'i-bi-square-half',\n\tsquare: 'i-bi-square',\n\tstack: 'i-bi-stack',\n\t'star-fill': 'i-bi-star-fill',\n\t'star-half': 'i-bi-star-half',\n\tstar: 'i-bi-star',\n\tstars: 'i-bi-stars',\n\t'stickies-fill': 'i-bi-stickies-fill',\n\tstickies: 'i-bi-stickies',\n\t'sticky-fill': 'i-bi-sticky-fill',\n\tsticky: 'i-bi-sticky',\n\t'stop-btn-fill': 'i-bi-stop-btn-fill',\n\t'stop-btn': 'i-bi-stop-btn',\n\t'stop-circle-fill': 'i-bi-stop-circle-fill',\n\t'stop-circle': 'i-bi-stop-circle',\n\t'stop-fill': 'i-bi-stop-fill',\n\tstop: 'i-bi-stop',\n\t'stoplights-fill': 'i-bi-stoplights-fill',\n\tstoplights: 'i-bi-stoplights',\n\t'stopwatch-fill': 'i-bi-stopwatch-fill',\n\tstopwatch: 'i-bi-stopwatch',\n\tsubtract: 'i-bi-subtract',\n\t'suit-club-fill': 'i-bi-suit-club-fill',\n\t'suit-club': 'i-bi-suit-club',\n\t'suit-diamond-fill': 'i-bi-suit-diamond-fill',\n\t'suit-diamond': 'i-bi-suit-diamond',\n\t'suit-heart-fill': 'i-bi-suit-heart-fill',\n\t'suit-heart': 'i-bi-suit-heart',\n\t'suit-spade-fill': 'i-bi-suit-spade-fill',\n\t'suit-spade': 'i-bi-suit-spade',\n\t'sun-fill': 'i-bi-sun-fill',\n\tsun: 'i-bi-sun',\n\tsunglasses: 'i-bi-sunglasses',\n\t'sunrise-fill': 'i-bi-sunrise-fill',\n\tsunrise: 'i-bi-sunrise',\n\t'sunset-fill': 'i-bi-sunset-fill',\n\tsunset: 'i-bi-sunset',\n\t'symmetry-horizontal': 'i-bi-symmetry-horizontal',\n\t'symmetry-vertical': 'i-bi-symmetry-vertical',\n\ttable: 'i-bi-table',\n\t'tablet-fill': 'i-bi-tablet-fill',\n\t'tablet-landscape-fill': 'i-bi-tablet-landscape-fill',\n\t'tablet-landscape': 'i-bi-tablet-landscape',\n\ttablet: 'i-bi-tablet',\n\t'tag-fill': 'i-bi-tag-fill',\n\ttag: 'i-bi-tag',\n\t'tags-fill': 'i-bi-tags-fill',\n\ttags: 'i-bi-tags',\n\ttelegram: 'i-bi-telegram',\n\t'telephone-fill': 'i-bi-telephone-fill',\n\t'telephone-forward-fill': 'i-bi-telephone-forward-fill',\n\t'telephone-forward': 'i-bi-telephone-forward',\n\t'telephone-inbound-fill': 'i-bi-telephone-inbound-fill',\n\t'telephone-inbound': 'i-bi-telephone-inbound',\n\t'telephone-minus-fill': 'i-bi-telephone-minus-fill',\n\t'telephone-minus': 'i-bi-telephone-minus',\n\t'telephone-outbound-fill': 'i-bi-telephone-outbound-fill',\n\t'telephone-outbound': 'i-bi-telephone-outbound',\n\t'telephone-plus-fill': 'i-bi-telephone-plus-fill',\n\t'telephone-plus': 'i-bi-telephone-plus',\n\t'telephone-x-fill': 'i-bi-telephone-x-fill',\n\t'telephone-x': 'i-bi-telephone-x',\n\ttelephone: 'i-bi-telephone',\n\t'terminal-fill': 'i-bi-terminal-fill',\n\tterminal: 'i-bi-terminal',\n\t'text-center': 'i-bi-text-center',\n\t'text-indent-left': 'i-bi-text-indent-left',\n\t'text-indent-right': 'i-bi-text-indent-right',\n\t'text-left': 'i-bi-text-left',\n\t'text-paragraph': 'i-bi-text-paragraph',\n\t'text-right': 'i-bi-text-right',\n\t'textarea-resize': 'i-bi-textarea-resize',\n\t'textarea-t': 'i-bi-textarea-t',\n\ttextarea: 'i-bi-textarea',\n\t'thermometer-half': 'i-bi-thermometer-half',\n\t'thermometer-high': 'i-bi-thermometer-high',\n\t'thermometer-low': 'i-bi-thermometer-low',\n\t'thermometer-snow': 'i-bi-thermometer-snow',\n\t'thermometer-sun': 'i-bi-thermometer-sun',\n\tthermometer: 'i-bi-thermometer',\n\t'three-dots-vertical': 'i-bi-three-dots-vertical',\n\t'three-dots': 'i-bi-three-dots',\n\t'toggle-off': 'i-bi-toggle-off',\n\t'toggle-on': 'i-bi-toggle-on',\n\t'toggle2-off': 'i-bi-toggle2-off',\n\t'toggle2-on': 'i-bi-toggle2-on',\n\ttoggles: 'i-bi-toggles',\n\ttoggles2: 'i-bi-toggles2',\n\ttools: 'i-bi-tools',\n\ttornado: 'i-bi-tornado',\n\t'trash-fill': 'i-bi-trash-fill',\n\ttrash: 'i-bi-trash',\n\t'trash2-fill': 'i-bi-trash2-fill',\n\ttrash2: 'i-bi-trash2',\n\t'tree-fill': 'i-bi-tree-fill',\n\ttree: 'i-bi-tree',\n\t'triangle-fill': 'i-bi-triangle-fill',\n\t'triangle-half': 'i-bi-triangle-half',\n\ttriangle: 'i-bi-triangle',\n\t'trophy-fill': 'i-bi-trophy-fill',\n\ttrophy: 'i-bi-trophy',\n\t'tropical-storm': 'i-bi-tropical-storm',\n\t'truck-flatbed': 'i-bi-truck-flatbed',\n\ttruck: 'i-bi-truck',\n\ttsunami: 'i-bi-tsunami',\n\t'tv-fill': 'i-bi-tv-fill',\n\ttv: 'i-bi-tv',\n\ttwitch: 'i-bi-twitch',\n\ttwitter: 'i-bi-twitter',\n\t'type-bold': 'i-bi-type-bold',\n\t'type-h1': 'i-bi-type-h1',\n\t'type-h2': 'i-bi-type-h2',\n\t'type-h3': 'i-bi-type-h3',\n\t'type-italic': 'i-bi-type-italic',\n\t'type-strikethrough': 'i-bi-type-strikethrough',\n\t'type-underline': 'i-bi-type-underline',\n\ttype: 'i-bi-type',\n\t'ui-checks-grid': 'i-bi-ui-checks-grid',\n\t'ui-checks': 'i-bi-ui-checks',\n\t'ui-radios-grid': 'i-bi-ui-radios-grid',\n\t'ui-radios': 'i-bi-ui-radios',\n\t'umbrella-fill': 'i-bi-umbrella-fill',\n\tumbrella: 'i-bi-umbrella',\n\tunion: 'i-bi-union',\n\t'unlock-fill': 'i-bi-unlock-fill',\n\tunlock: 'i-bi-unlock',\n\t'upc-scan': 'i-bi-upc-scan',\n\tupc: 'i-bi-upc',\n\tupload: 'i-bi-upload',\n\t'vector-pen': 'i-bi-vector-pen',\n\t'view-list': 'i-bi-view-list',\n\t'view-stacked': 'i-bi-view-stacked',\n\t'vinyl-fill': 'i-bi-vinyl-fill',\n\tvinyl: 'i-bi-vinyl',\n\tvoicemail: 'i-bi-voicemail',\n\t'volume-down-fill': 'i-bi-volume-down-fill',\n\t'volume-down': 'i-bi-volume-down',\n\t'volume-mute-fill': 'i-bi-volume-mute-fill',\n\t'volume-mute': 'i-bi-volume-mute',\n\t'volume-off-fill': 'i-bi-volume-off-fill',\n\t'volume-off': 'i-bi-volume-off',\n\t'volume-up-fill': 'i-bi-volume-up-fill',\n\t'volume-up': 'i-bi-volume-up',\n\tvr: 'i-bi-vr',\n\t'wallet-fill': 'i-bi-wallet-fill',\n\twallet: 'i-bi-wallet',\n\twallet2: 'i-bi-wallet2',\n\twatch: 'i-bi-watch',\n\twater: 'i-bi-water',\n\twhatsapp: 'i-bi-whatsapp',\n\t'wifi-1': 'i-bi-wifi-1',\n\t'wifi-2': 'i-bi-wifi-2',\n\t'wifi-off': 'i-bi-wifi-off',\n\twifi: 'i-bi-wifi',\n\twind: 'i-bi-wind',\n\t'window-dock': 'i-bi-window-dock',\n\t'window-sidebar': 'i-bi-window-sidebar',\n\twindow: 'i-bi-window',\n\twrench: 'i-bi-wrench',\n\t'x-circle-fill': 'i-bi-x-circle-fill',\n\t'x-circle': 'i-bi-x-circle',\n\t'x-diamond-fill': 'i-bi-x-diamond-fill',\n\t'x-diamond': 'i-bi-x-diamond',\n\t'x-octagon-fill': 'i-bi-x-octagon-fill',\n\t'x-octagon': 'i-bi-x-octagon',\n\t'x-square-fill': 'i-bi-x-square-fill',\n\t'x-square': 'i-bi-x-square',\n\tx: 'i-bi-x',\n\tyoutube: 'i-bi-youtube',\n\t'zoom-in': 'i-bi-zoom-in',\n\t'zoom-out': 'i-bi-zoom-out',\n\tbank: 'i-bi-bank',\n\tbank2: 'i-bi-bank2',\n\t'bell-slash-fill': 'i-bi-bell-slash-fill',\n\t'bell-slash': 'i-bi-bell-slash',\n\t'cash-coin': 'i-bi-cash-coin',\n\t'check-lg': 'i-bi-check-lg',\n\tcoin: 'i-bi-coin',\n\t'currency-bitcoin': 'i-bi-currency-bitcoin',\n\t'currency-dollar': 'i-bi-currency-dollar',\n\t'currency-euro': 'i-bi-currency-euro',\n\t'currency-exchange': 'i-bi-currency-exchange',\n\t'currency-pound': 'i-bi-currency-pound',\n\t'currency-yen': 'i-bi-currency-yen',\n\t'dash-lg': 'i-bi-dash-lg',\n\t'exclamation-lg': 'i-bi-exclamation-lg',\n\t'file-earmark-pdf-fill': 'i-bi-file-earmark-pdf-fill',\n\t'file-earmark-pdf': 'i-bi-file-earmark-pdf',\n\t'file-pdf-fill': 'i-bi-file-pdf-fill',\n\t'file-pdf': 'i-bi-file-pdf',\n\t'gender-ambiguous': 'i-bi-gender-ambiguous',\n\t'gender-female': 'i-bi-gender-female',\n\t'gender-male': 'i-bi-gender-male',\n\t'gender-trans': 'i-bi-gender-trans',\n\t'headset-vr': 'i-bi-headset-vr',\n\t'info-lg': 'i-bi-info-lg',\n\tmastodon: 'i-bi-mastodon',\n\tmessenger: 'i-bi-messenger',\n\t'piggy-bank-fill': 'i-bi-piggy-bank-fill',\n\t'piggy-bank': 'i-bi-piggy-bank',\n\t'pin-map-fill': 'i-bi-pin-map-fill',\n\t'pin-map': 'i-bi-pin-map',\n\t'plus-lg': 'i-bi-plus-lg',\n\t'question-lg': 'i-bi-question-lg',\n\trecycle: 'i-bi-recycle',\n\treddit: 'i-bi-reddit',\n\t'safe-fill': 'i-bi-safe-fill',\n\t'safe2-fill': 'i-bi-safe2-fill',\n\tsafe2: 'i-bi-safe2',\n\t'sd-card-fill': 'i-bi-sd-card-fill',\n\t'sd-card': 'i-bi-sd-card',\n\tskype: 'i-bi-skype',\n\t'slash-lg': 'i-bi-slash-lg',\n\ttranslate: 'i-bi-translate',\n\t'x-lg': 'i-bi-x-lg',\n\tsafe: 'i-bi-safe',\n\tapple: 'i-bi-apple',\n\tmicrosoft: 'i-bi-microsoft',\n\twindows: 'i-bi-windows',\n\tbehance: 'i-bi-behance',\n\tdribbble: 'i-bi-dribbble',\n\tline: 'i-bi-line',\n\tmedium: 'i-bi-medium',\n\tpaypal: 'i-bi-paypal',\n\tpinterest: 'i-bi-pinterest',\n\tsignal: 'i-bi-signal',\n\tsnapchat: 'i-bi-snapchat',\n\tspotify: 'i-bi-spotify',\n\t'stack-overflow': 'i-bi-stack-overflow',\n\tstrava: 'i-bi-strava',\n\twordpress: 'i-bi-wordpress',\n\tvimeo: 'i-bi-vimeo',\n\tactivity: 'i-bi-activity',\n\t'easel2-fill': 'i-bi-easel2-fill',\n\teasel2: 'i-bi-easel2',\n\t'easel3-fill': 'i-bi-easel3-fill',\n\teasel3: 'i-bi-easel3',\n\tfan: 'i-bi-fan',\n\tfingerprint: 'i-bi-fingerprint',\n\t'graph-down-arrow': 'i-bi-graph-down-arrow',\n\t'graph-up-arrow': 'i-bi-graph-up-arrow',\n\thypnotize: 'i-bi-hypnotize',\n\tmagic: 'i-bi-magic',\n\t'person-rolodex': 'i-bi-person-rolodex',\n\t'person-video': 'i-bi-person-video',\n\t'person-video2': 'i-bi-person-video2',\n\t'person-video3': 'i-bi-person-video3',\n\t'person-workspace': 'i-bi-person-workspace',\n\tradioactive: 'i-bi-radioactive',\n\t'webcam-fill': 'i-bi-webcam-fill',\n\twebcam: 'i-bi-webcam',\n\t'yin-yang': 'i-bi-yin-yang',\n\t'bandaid-fill': 'i-bi-bandaid-fill',\n\tbandaid: 'i-bi-bandaid',\n\tbluetooth: 'i-bi-bluetooth',\n\t'body-text': 'i-bi-body-text',\n\tboombox: 'i-bi-boombox',\n\tboxes: 'i-bi-boxes',\n\t'dpad-fill': 'i-bi-dpad-fill',\n\tdpad: 'i-bi-dpad',\n\t'ear-fill': 'i-bi-ear-fill',\n\tear: 'i-bi-ear',\n\t'envelope-check-fill': 'i-bi-envelope-check-fill',\n\t'envelope-check': 'i-bi-envelope-check',\n\t'envelope-dash-fill': 'i-bi-envelope-dash-fill',\n\t'envelope-dash': 'i-bi-envelope-dash',\n\t'envelope-exclamation-fill': 'i-bi-envelope-exclamation-fill',\n\t'envelope-exclamation': 'i-bi-envelope-exclamation',\n\t'envelope-plus-fill': 'i-bi-envelope-plus-fill',\n\t'envelope-plus': 'i-bi-envelope-plus',\n\t'envelope-slash-fill': 'i-bi-envelope-slash-fill',\n\t'envelope-slash': 'i-bi-envelope-slash',\n\t'envelope-x-fill': 'i-bi-envelope-x-fill',\n\t'envelope-x': 'i-bi-envelope-x',\n\t'explicit-fill': 'i-bi-explicit-fill',\n\texplicit: 'i-bi-explicit',\n\tgit: 'i-bi-git',\n\tinfinity: 'i-bi-infinity',\n\t'list-columns-reverse': 'i-bi-list-columns-reverse',\n\t'list-columns': 'i-bi-list-columns',\n\tmeta: 'i-bi-meta',\n\t'nintendo-switch': 'i-bi-nintendo-switch',\n\t'pc-display-horizontal': 'i-bi-pc-display-horizontal',\n\t'pc-display': 'i-bi-pc-display',\n\t'pc-horizontal': 'i-bi-pc-horizontal',\n\tpc: 'i-bi-pc',\n\tplaystation: 'i-bi-playstation',\n\t'plus-slash-minus': 'i-bi-plus-slash-minus',\n\t'projector-fill': 'i-bi-projector-fill',\n\tprojector: 'i-bi-projector',\n\t'qr-code-scan': 'i-bi-qr-code-scan',\n\t'qr-code': 'i-bi-qr-code',\n\tquora: 'i-bi-quora',\n\tquote: 'i-bi-quote',\n\trobot: 'i-bi-robot',\n\t'send-check-fill': 'i-bi-send-check-fill',\n\t'send-check': 'i-bi-send-check',\n\t'send-dash-fill': 'i-bi-send-dash-fill',\n\t'send-dash': 'i-bi-send-dash',\n\t'send-exclamation-fill': 'i-bi-send-exclamation-fill',\n\t'send-exclamation': 'i-bi-send-exclamation',\n\t'send-fill': 'i-bi-send-fill',\n\t'send-plus-fill': 'i-bi-send-plus-fill',\n\t'send-plus': 'i-bi-send-plus',\n\t'send-slash-fill': 'i-bi-send-slash-fill',\n\t'send-slash': 'i-bi-send-slash',\n\t'send-x-fill': 'i-bi-send-x-fill',\n\t'send-x': 'i-bi-send-x',\n\tsend: 'i-bi-send',\n\tsteam: 'i-bi-steam',\n\t'terminal-dash': 'i-bi-terminal-dash',\n\t'terminal-plus': 'i-bi-terminal-plus',\n\t'terminal-split': 'i-bi-terminal-split',\n\t'ticket-detailed-fill': 'i-bi-ticket-detailed-fill',\n\t'ticket-detailed': 'i-bi-ticket-detailed',\n\t'ticket-fill': 'i-bi-ticket-fill',\n\t'ticket-perforated-fill': 'i-bi-ticket-perforated-fill',\n\t'ticket-perforated': 'i-bi-ticket-perforated',\n\tticket: 'i-bi-ticket',\n\ttiktok: 'i-bi-tiktok',\n\t'window-dash': 'i-bi-window-dash',\n\t'window-desktop': 'i-bi-window-desktop',\n\t'window-fullscreen': 'i-bi-window-fullscreen',\n\t'window-plus': 'i-bi-window-plus',\n\t'window-split': 'i-bi-window-split',\n\t'window-stack': 'i-bi-window-stack',\n\t'window-x': 'i-bi-window-x',\n\txbox: 'i-bi-xbox',\n\tethernet: 'i-bi-ethernet',\n\t'hdmi-fill': 'i-bi-hdmi-fill',\n\thdmi: 'i-bi-hdmi',\n\t'usb-c-fill': 'i-bi-usb-c-fill',\n\t'usb-c': 'i-bi-usb-c',\n\t'usb-fill': 'i-bi-usb-fill',\n\t'usb-plug-fill': 'i-bi-usb-plug-fill',\n\t'usb-plug': 'i-bi-usb-plug',\n\t'usb-symbol': 'i-bi-usb-symbol',\n\tusb: 'i-bi-usb',\n\t'boombox-fill': 'i-bi-boombox-fill',\n\tdisplayport: 'i-bi-displayport',\n\t'gpu-card': 'i-bi-gpu-card',\n\tmemory: 'i-bi-memory',\n\t'modem-fill': 'i-bi-modem-fill',\n\tmodem: 'i-bi-modem',\n\t'motherboard-fill': 'i-bi-motherboard-fill',\n\tmotherboard: 'i-bi-motherboard',\n\t'optical-audio-fill': 'i-bi-optical-audio-fill',\n\t'optical-audio': 'i-bi-optical-audio',\n\t'pci-card': 'i-bi-pci-card',\n\t'router-fill': 'i-bi-router-fill',\n\trouter: 'i-bi-router',\n\t'thunderbolt-fill': 'i-bi-thunderbolt-fill',\n\tthunderbolt: 'i-bi-thunderbolt',\n\t'usb-drive-fill': 'i-bi-usb-drive-fill',\n\t'usb-drive': 'i-bi-usb-drive',\n\t'usb-micro-fill': 'i-bi-usb-micro-fill',\n\t'usb-micro': 'i-bi-usb-micro',\n\t'usb-mini-fill': 'i-bi-usb-mini-fill',\n\t'usb-mini': 'i-bi-usb-mini',\n\t'cloud-haze2': 'i-bi-cloud-haze2',\n\t'device-hdd-fill': 'i-bi-device-hdd-fill',\n\t'device-hdd': 'i-bi-device-hdd',\n\t'device-ssd-fill': 'i-bi-device-ssd-fill',\n\t'device-ssd': 'i-bi-device-ssd',\n\t'displayport-fill': 'i-bi-displayport-fill',\n\t'mortarboard-fill': 'i-bi-mortarboard-fill',\n\tmortarboard: 'i-bi-mortarboard',\n\t'terminal-x': 'i-bi-terminal-x',\n\t'arrow-through-heart-fill': 'i-bi-arrow-through-heart-fill',\n\t'arrow-through-heart': 'i-bi-arrow-through-heart',\n\t'badge-sd-fill': 'i-bi-badge-sd-fill',\n\t'badge-sd': 'i-bi-badge-sd',\n\t'bag-heart-fill': 'i-bi-bag-heart-fill',\n\t'bag-heart': 'i-bi-bag-heart',\n\t'balloon-fill': 'i-bi-balloon-fill',\n\t'balloon-heart-fill': 'i-bi-balloon-heart-fill',\n\t'balloon-heart': 'i-bi-balloon-heart',\n\tballoon: 'i-bi-balloon',\n\t'box2-fill': 'i-bi-box2-fill',\n\t'box2-heart-fill': 'i-bi-box2-heart-fill',\n\t'box2-heart': 'i-bi-box2-heart',\n\tbox2: 'i-bi-box2',\n\t'braces-asterisk': 'i-bi-braces-asterisk',\n\t'calendar-heart-fill': 'i-bi-calendar-heart-fill',\n\t'calendar-heart': 'i-bi-calendar-heart',\n\t'calendar2-heart-fill': 'i-bi-calendar2-heart-fill',\n\t'calendar2-heart': 'i-bi-calendar2-heart',\n\t'chat-heart-fill': 'i-bi-chat-heart-fill',\n\t'chat-heart': 'i-bi-chat-heart',\n\t'chat-left-heart-fill': 'i-bi-chat-left-heart-fill',\n\t'chat-left-heart': 'i-bi-chat-left-heart',\n\t'chat-right-heart-fill': 'i-bi-chat-right-heart-fill',\n\t'chat-right-heart': 'i-bi-chat-right-heart',\n\t'chat-square-heart-fill': 'i-bi-chat-square-heart-fill',\n\t'chat-square-heart': 'i-bi-chat-square-heart',\n\t'clipboard-check-fill': 'i-bi-clipboard-check-fill',\n\t'clipboard-data-fill': 'i-bi-clipboard-data-fill',\n\t'clipboard-fill': 'i-bi-clipboard-fill',\n\t'clipboard-heart-fill': 'i-bi-clipboard-heart-fill',\n\t'clipboard-heart': 'i-bi-clipboard-heart',\n\t'clipboard-minus-fill': 'i-bi-clipboard-minus-fill',\n\t'clipboard-plus-fill': 'i-bi-clipboard-plus-fill',\n\t'clipboard-pulse': 'i-bi-clipboard-pulse',\n\t'clipboard-x-fill': 'i-bi-clipboard-x-fill',\n\t'clipboard2-check-fill': 'i-bi-clipboard2-check-fill',\n\t'clipboard2-check': 'i-bi-clipboard2-check',\n\t'clipboard2-data-fill': 'i-bi-clipboard2-data-fill',\n\t'clipboard2-data': 'i-bi-clipboard2-data',\n\t'clipboard2-fill': 'i-bi-clipboard2-fill',\n\t'clipboard2-heart-fill': 'i-bi-clipboard2-heart-fill',\n\t'clipboard2-heart': 'i-bi-clipboard2-heart',\n\t'clipboard2-minus-fill': 'i-bi-clipboard2-minus-fill',\n\t'clipboard2-minus': 'i-bi-clipboard2-minus',\n\t'clipboard2-plus-fill': 'i-bi-clipboard2-plus-fill',\n\t'clipboard2-plus': 'i-bi-clipboard2-plus',\n\t'clipboard2-pulse-fill': 'i-bi-clipboard2-pulse-fill',\n\t'clipboard2-pulse': 'i-bi-clipboard2-pulse',\n\t'clipboard2-x-fill': 'i-bi-clipboard2-x-fill',\n\t'clipboard2-x': 'i-bi-clipboard2-x',\n\tclipboard2: 'i-bi-clipboard2',\n\t'emoji-kiss-fill': 'i-bi-emoji-kiss-fill',\n\t'emoji-kiss': 'i-bi-emoji-kiss',\n\t'envelope-heart-fill': 'i-bi-envelope-heart-fill',\n\t'envelope-heart': 'i-bi-envelope-heart',\n\t'envelope-open-heart-fill': 'i-bi-envelope-open-heart-fill',\n\t'envelope-open-heart': 'i-bi-envelope-open-heart',\n\t'envelope-paper-fill': 'i-bi-envelope-paper-fill',\n\t'envelope-paper-heart-fill': 'i-bi-envelope-paper-heart-fill',\n\t'envelope-paper-heart': 'i-bi-envelope-paper-heart',\n\t'envelope-paper': 'i-bi-envelope-paper',\n\t'filetype-aac': 'i-bi-filetype-aac',\n\t'filetype-ai': 'i-bi-filetype-ai',\n\t'filetype-bmp': 'i-bi-filetype-bmp',\n\t'filetype-cs': 'i-bi-filetype-cs',\n\t'filetype-css': 'i-bi-filetype-css',\n\t'filetype-csv': 'i-bi-filetype-csv',\n\t'filetype-doc': 'i-bi-filetype-doc',\n\t'filetype-docx': 'i-bi-filetype-docx',\n\t'filetype-exe': 'i-bi-filetype-exe',\n\t'filetype-gif': 'i-bi-filetype-gif',\n\t'filetype-heic': 'i-bi-filetype-heic',\n\t'filetype-html': 'i-bi-filetype-html',\n\t'filetype-java': 'i-bi-filetype-java',\n\t'filetype-jpg': 'i-bi-filetype-jpg',\n\t'filetype-js': 'i-bi-filetype-js',\n\t'filetype-jsx': 'i-bi-filetype-jsx',\n\t'filetype-key': 'i-bi-filetype-key',\n\t'filetype-m4p': 'i-bi-filetype-m4p',\n\t'filetype-md': 'i-bi-filetype-md',\n\t'filetype-mdx': 'i-bi-filetype-mdx',\n\t'filetype-mov': 'i-bi-filetype-mov',\n\t'filetype-mp3': 'i-bi-filetype-mp3',\n\t'filetype-mp4': 'i-bi-filetype-mp4',\n\t'filetype-otf': 'i-bi-filetype-otf',\n\t'filetype-pdf': 'i-bi-filetype-pdf',\n\t'filetype-php': 'i-bi-filetype-php',\n\t'filetype-png': 'i-bi-filetype-png',\n\t'filetype-ppt': 'i-bi-filetype-ppt',\n\t'filetype-psd': 'i-bi-filetype-psd',\n\t'filetype-py': 'i-bi-filetype-py',\n\t'filetype-raw': 'i-bi-filetype-raw',\n\t'filetype-rb': 'i-bi-filetype-rb',\n\t'filetype-sass': 'i-bi-filetype-sass',\n\t'filetype-scss': 'i-bi-filetype-scss',\n\t'filetype-sh': 'i-bi-filetype-sh',\n\t'filetype-svg': 'i-bi-filetype-svg',\n\t'filetype-tiff': 'i-bi-filetype-tiff',\n\t'filetype-tsx': 'i-bi-filetype-tsx',\n\t'filetype-ttf': 'i-bi-filetype-ttf',\n\t'filetype-txt': 'i-bi-filetype-txt',\n\t'filetype-wav': 'i-bi-filetype-wav',\n\t'filetype-woff': 'i-bi-filetype-woff',\n\t'filetype-xls': 'i-bi-filetype-xls',\n\t'filetype-xml': 'i-bi-filetype-xml',\n\t'filetype-yml': 'i-bi-filetype-yml',\n\t'heart-arrow': 'i-bi-heart-arrow',\n\t'heart-pulse-fill': 'i-bi-heart-pulse-fill',\n\t'heart-pulse': 'i-bi-heart-pulse',\n\t'heartbreak-fill': 'i-bi-heartbreak-fill',\n\theartbreak: 'i-bi-heartbreak',\n\thearts: 'i-bi-hearts',\n\t'hospital-fill': 'i-bi-hospital-fill',\n\thospital: 'i-bi-hospital',\n\t'house-heart-fill': 'i-bi-house-heart-fill',\n\t'house-heart': 'i-bi-house-heart',\n\tincognito: 'i-bi-incognito',\n\t'magnet-fill': 'i-bi-magnet-fill',\n\tmagnet: 'i-bi-magnet',\n\t'person-heart': 'i-bi-person-heart',\n\t'person-hearts': 'i-bi-person-hearts',\n\t'phone-flip': 'i-bi-phone-flip',\n\tplugin: 'i-bi-plugin',\n\t'postage-fill': 'i-bi-postage-fill',\n\t'postage-heart-fill': 'i-bi-postage-heart-fill',\n\t'postage-heart': 'i-bi-postage-heart',\n\tpostage: 'i-bi-postage',\n\t'postcard-fill': 'i-bi-postcard-fill',\n\t'postcard-heart-fill': 'i-bi-postcard-heart-fill',\n\t'postcard-heart': 'i-bi-postcard-heart',\n\tpostcard: 'i-bi-postcard',\n\t'search-heart-fill': 'i-bi-search-heart-fill',\n\t'search-heart': 'i-bi-search-heart',\n\t'sliders2-vertical': 'i-bi-sliders2-vertical',\n\tsliders2: 'i-bi-sliders2',\n\t'trash3-fill': 'i-bi-trash3-fill',\n\ttrash3: 'i-bi-trash3',\n\tvalentine: 'i-bi-valentine',\n\tvalentine2: 'i-bi-valentine2',\n\t'wrench-adjustable-circle-fill': 'i-bi-wrench-adjustable-circle-fill',\n\t'wrench-adjustable-circle': 'i-bi-wrench-adjustable-circle',\n\t'wrench-adjustable': 'i-bi-wrench-adjustable',\n\t'filetype-json': 'i-bi-filetype-json',\n\t'filetype-pptx': 'i-bi-filetype-pptx',\n\t'filetype-xlsx': 'i-bi-filetype-xlsx',\n\t'1-circle-fill': 'i-bi-1-circle-fill',\n\t'1-circle': 'i-bi-1-circle',\n\t'1-square-fill': 'i-bi-1-square-fill',\n\t'1-square': 'i-bi-1-square',\n\t'2-circle-fill': 'i-bi-2-circle-fill',\n\t'2-circle': 'i-bi-2-circle',\n\t'2-square-fill': 'i-bi-2-square-fill',\n\t'2-square': 'i-bi-2-square',\n\t'3-circle-fill': 'i-bi-3-circle-fill',\n\t'3-circle': 'i-bi-3-circle',\n\t'3-square-fill': 'i-bi-3-square-fill',\n\t'3-square': 'i-bi-3-square',\n\t'4-circle-fill': 'i-bi-4-circle-fill',\n\t'4-circle': 'i-bi-4-circle',\n\t'4-square-fill': 'i-bi-4-square-fill',\n\t'4-square': 'i-bi-4-square',\n\t'5-circle-fill': 'i-bi-5-circle-fill',\n\t'5-circle': 'i-bi-5-circle',\n\t'5-square-fill': 'i-bi-5-square-fill',\n\t'5-square': 'i-bi-5-square',\n\t'6-circle-fill': 'i-bi-6-circle-fill',\n\t'6-circle': 'i-bi-6-circle',\n\t'6-square-fill': 'i-bi-6-square-fill',\n\t'6-square': 'i-bi-6-square',\n\t'7-circle-fill': 'i-bi-7-circle-fill',\n\t'7-circle': 'i-bi-7-circle',\n\t'7-square-fill': 'i-bi-7-square-fill',\n\t'7-square': 'i-bi-7-square',\n\t'8-circle-fill': 'i-bi-8-circle-fill',\n\t'8-circle': 'i-bi-8-circle',\n\t'8-square-fill': 'i-bi-8-square-fill',\n\t'8-square': 'i-bi-8-square',\n\t'9-circle-fill': 'i-bi-9-circle-fill',\n\t'9-circle': 'i-bi-9-circle',\n\t'9-square-fill': 'i-bi-9-square-fill',\n\t'9-square': 'i-bi-9-square',\n\t'airplane-engines-fill': 'i-bi-airplane-engines-fill',\n\t'airplane-engines': 'i-bi-airplane-engines',\n\t'airplane-fill': 'i-bi-airplane-fill',\n\tairplane: 'i-bi-airplane',\n\talexa: 'i-bi-alexa',\n\talipay: 'i-bi-alipay',\n\tandroid: 'i-bi-android',\n\tandroid2: 'i-bi-android2',\n\t'box-fill': 'i-bi-box-fill',\n\t'box-seam-fill': 'i-bi-box-seam-fill',\n\t'browser-chrome': 'i-bi-browser-chrome',\n\t'browser-edge': 'i-bi-browser-edge',\n\t'browser-firefox': 'i-bi-browser-firefox',\n\t'browser-safari': 'i-bi-browser-safari',\n\t'c-circle-fill': 'i-bi-c-circle-fill',\n\t'c-circle': 'i-bi-c-circle',\n\t'c-square-fill': 'i-bi-c-square-fill',\n\t'c-square': 'i-bi-c-square',\n\t'capsule-pill': 'i-bi-capsule-pill',\n\tcapsule: 'i-bi-capsule',\n\t'car-front-fill': 'i-bi-car-front-fill',\n\t'car-front': 'i-bi-car-front',\n\t'cassette-fill': 'i-bi-cassette-fill',\n\tcassette: 'i-bi-cassette',\n\t'cc-circle-fill': 'i-bi-cc-circle-fill',\n\t'cc-circle': 'i-bi-cc-circle',\n\t'cc-square-fill': 'i-bi-cc-square-fill',\n\t'cc-square': 'i-bi-cc-square',\n\t'cup-hot-fill': 'i-bi-cup-hot-fill',\n\t'cup-hot': 'i-bi-cup-hot',\n\t'currency-rupee': 'i-bi-currency-rupee',\n\tdropbox: 'i-bi-dropbox',\n\tescape: 'i-bi-escape',\n\t'fast-forward-btn-fill': 'i-bi-fast-forward-btn-fill',\n\t'fast-forward-btn': 'i-bi-fast-forward-btn',\n\t'fast-forward-circle-fill': 'i-bi-fast-forward-circle-fill',\n\t'fast-forward-circle': 'i-bi-fast-forward-circle',\n\t'fast-forward-fill': 'i-bi-fast-forward-fill',\n\t'fast-forward': 'i-bi-fast-forward',\n\t'filetype-sql': 'i-bi-filetype-sql',\n\tfire: 'i-bi-fire',\n\t'google-play': 'i-bi-google-play',\n\t'h-circle-fill': 'i-bi-h-circle-fill',\n\t'h-circle': 'i-bi-h-circle',\n\t'h-square-fill': 'i-bi-h-square-fill',\n\t'h-square': 'i-bi-h-square',\n\tindent: 'i-bi-indent',\n\t'lungs-fill': 'i-bi-lungs-fill',\n\tlungs: 'i-bi-lungs',\n\t'microsoft-teams': 'i-bi-microsoft-teams',\n\t'p-circle-fill': 'i-bi-p-circle-fill',\n\t'p-circle': 'i-bi-p-circle',\n\t'p-square-fill': 'i-bi-p-square-fill',\n\t'p-square': 'i-bi-p-square',\n\t'pass-fill': 'i-bi-pass-fill',\n\tpass: 'i-bi-pass',\n\tprescription: 'i-bi-prescription',\n\tprescription2: 'i-bi-prescription2',\n\t'r-circle-fill': 'i-bi-r-circle-fill',\n\t'r-circle': 'i-bi-r-circle',\n\t'r-square-fill': 'i-bi-r-square-fill',\n\t'r-square': 'i-bi-r-square',\n\t'repeat-1': 'i-bi-repeat-1',\n\trepeat: 'i-bi-repeat',\n\t'rewind-btn-fill': 'i-bi-rewind-btn-fill',\n\t'rewind-btn': 'i-bi-rewind-btn',\n\t'rewind-circle-fill': 'i-bi-rewind-circle-fill',\n\t'rewind-circle': 'i-bi-rewind-circle',\n\t'rewind-fill': 'i-bi-rewind-fill',\n\trewind: 'i-bi-rewind',\n\t'train-freight-front-fill': 'i-bi-train-freight-front-fill',\n\t'train-freight-front': 'i-bi-train-freight-front',\n\t'train-front-fill': 'i-bi-train-front-fill',\n\t'train-front': 'i-bi-train-front',\n\t'train-lightrail-front-fill': 'i-bi-train-lightrail-front-fill',\n\t'train-lightrail-front': 'i-bi-train-lightrail-front',\n\t'truck-front-fill': 'i-bi-truck-front-fill',\n\t'truck-front': 'i-bi-truck-front',\n\tubuntu: 'i-bi-ubuntu',\n\tunindent: 'i-bi-unindent',\n\tunity: 'i-bi-unity',\n\t'universal-access-circle': 'i-bi-universal-access-circle',\n\t'universal-access': 'i-bi-universal-access',\n\tvirus: 'i-bi-virus',\n\tvirus2: 'i-bi-virus2',\n\twechat: 'i-bi-wechat',\n\tyelp: 'i-bi-yelp',\n\t'sign-stop-fill': 'i-bi-sign-stop-fill',\n\t'sign-stop-lights-fill': 'i-bi-sign-stop-lights-fill',\n\t'sign-stop-lights': 'i-bi-sign-stop-lights',\n\t'sign-stop': 'i-bi-sign-stop',\n\t'sign-turn-left-fill': 'i-bi-sign-turn-left-fill',\n\t'sign-turn-left': 'i-bi-sign-turn-left',\n\t'sign-turn-right-fill': 'i-bi-sign-turn-right-fill',\n\t'sign-turn-right': 'i-bi-sign-turn-right',\n\t'sign-turn-slight-left-fill': 'i-bi-sign-turn-slight-left-fill',\n\t'sign-turn-slight-left': 'i-bi-sign-turn-slight-left',\n\t'sign-turn-slight-right-fill': 'i-bi-sign-turn-slight-right-fill',\n\t'sign-turn-slight-right': 'i-bi-sign-turn-slight-right',\n\t'sign-yield-fill': 'i-bi-sign-yield-fill',\n\t'sign-yield': 'i-bi-sign-yield',\n\t'ev-station-fill': 'i-bi-ev-station-fill',\n\t'ev-station': 'i-bi-ev-station',\n\t'fuel-pump-diesel-fill': 'i-bi-fuel-pump-diesel-fill',\n\t'fuel-pump-diesel': 'i-bi-fuel-pump-diesel',\n\t'fuel-pump-fill': 'i-bi-fuel-pump-fill',\n\t'fuel-pump': 'i-bi-fuel-pump',\n\t'0-circle-fill': 'i-bi-0-circle-fill',\n\t'0-circle': 'i-bi-0-circle',\n\t'0-square-fill': 'i-bi-0-square-fill',\n\t'0-square': 'i-bi-0-square',\n\t'rocket-fill': 'i-bi-rocket-fill',\n\t'rocket-takeoff-fill': 'i-bi-rocket-takeoff-fill',\n\t'rocket-takeoff': 'i-bi-rocket-takeoff',\n\trocket: 'i-bi-rocket',\n\tstripe: 'i-bi-stripe',\n\tsubscript: 'i-bi-subscript',\n\tsuperscript: 'i-bi-superscript',\n\ttrello: 'i-bi-trello',\n\t'envelope-at-fill': 'i-bi-envelope-at-fill',\n\t'envelope-at': 'i-bi-envelope-at',\n\tregex: 'i-bi-regex',\n\t'text-wrap': 'i-bi-text-wrap',\n\t'sign-dead-end-fill': 'i-bi-sign-dead-end-fill',\n\t'sign-dead-end': 'i-bi-sign-dead-end',\n\t'sign-do-not-enter-fill': 'i-bi-sign-do-not-enter-fill',\n\t'sign-do-not-enter': 'i-bi-sign-do-not-enter',\n\t'sign-intersection-fill': 'i-bi-sign-intersection-fill',\n\t'sign-intersection-side-fill': 'i-bi-sign-intersection-side-fill',\n\t'sign-intersection-side': 'i-bi-sign-intersection-side',\n\t'sign-intersection-t-fill': 'i-bi-sign-intersection-t-fill',\n\t'sign-intersection-t': 'i-bi-sign-intersection-t',\n\t'sign-intersection-y-fill': 'i-bi-sign-intersection-y-fill',\n\t'sign-intersection-y': 'i-bi-sign-intersection-y',\n\t'sign-intersection': 'i-bi-sign-intersection',\n\t'sign-merge-left-fill': 'i-bi-sign-merge-left-fill',\n\t'sign-merge-left': 'i-bi-sign-merge-left',\n\t'sign-merge-right-fill': 'i-bi-sign-merge-right-fill',\n\t'sign-merge-right': 'i-bi-sign-merge-right',\n\t'sign-no-left-turn-fill': 'i-bi-sign-no-left-turn-fill',\n\t'sign-no-left-turn': 'i-bi-sign-no-left-turn',\n\t'sign-no-parking-fill': 'i-bi-sign-no-parking-fill',\n\t'sign-no-parking': 'i-bi-sign-no-parking',\n\t'sign-no-right-turn-fill': 'i-bi-sign-no-right-turn-fill',\n\t'sign-no-right-turn': 'i-bi-sign-no-right-turn',\n\t'sign-railroad-fill': 'i-bi-sign-railroad-fill',\n\t'sign-railroad': 'i-bi-sign-railroad',\n\t'building-add': 'i-bi-building-add',\n\t'building-check': 'i-bi-building-check',\n\t'building-dash': 'i-bi-building-dash',\n\t'building-down': 'i-bi-building-down',\n\t'building-exclamation': 'i-bi-building-exclamation',\n\t'building-fill-add': 'i-bi-building-fill-add',\n\t'building-fill-check': 'i-bi-building-fill-check',\n\t'building-fill-dash': 'i-bi-building-fill-dash',\n\t'building-fill-down': 'i-bi-building-fill-down',\n\t'building-fill-exclamation': 'i-bi-building-fill-exclamation',\n\t'building-fill-gear': 'i-bi-building-fill-gear',\n\t'building-fill-lock': 'i-bi-building-fill-lock',\n\t'building-fill-slash': 'i-bi-building-fill-slash',\n\t'building-fill-up': 'i-bi-building-fill-up',\n\t'building-fill-x': 'i-bi-building-fill-x',\n\t'building-fill': 'i-bi-building-fill',\n\t'building-gear': 'i-bi-building-gear',\n\t'building-lock': 'i-bi-building-lock',\n\t'building-slash': 'i-bi-building-slash',\n\t'building-up': 'i-bi-building-up',\n\t'building-x': 'i-bi-building-x',\n\t'buildings-fill': 'i-bi-buildings-fill',\n\tbuildings: 'i-bi-buildings',\n\t'bus-front-fill': 'i-bi-bus-front-fill',\n\t'bus-front': 'i-bi-bus-front',\n\t'ev-front-fill': 'i-bi-ev-front-fill',\n\t'ev-front': 'i-bi-ev-front',\n\t'globe-americas': 'i-bi-globe-americas',\n\t'globe-asia-australia': 'i-bi-globe-asia-australia',\n\t'globe-central-south-asia': 'i-bi-globe-central-south-asia',\n\t'globe-europe-africa': 'i-bi-globe-europe-africa',\n\t'house-add-fill': 'i-bi-house-add-fill',\n\t'house-add': 'i-bi-house-add',\n\t'house-check-fill': 'i-bi-house-check-fill',\n\t'house-check': 'i-bi-house-check',\n\t'house-dash-fill': 'i-bi-house-dash-fill',\n\t'house-dash': 'i-bi-house-dash',\n\t'house-down-fill': 'i-bi-house-down-fill',\n\t'house-down': 'i-bi-house-down',\n\t'house-exclamation-fill': 'i-bi-house-exclamation-fill',\n\t'house-exclamation': 'i-bi-house-exclamation',\n\t'house-gear-fill': 'i-bi-house-gear-fill',\n\t'house-gear': 'i-bi-house-gear',\n\t'house-lock-fill': 'i-bi-house-lock-fill',\n\t'house-lock': 'i-bi-house-lock',\n\t'house-slash-fill': 'i-bi-house-slash-fill',\n\t'house-slash': 'i-bi-house-slash',\n\t'house-up-fill': 'i-bi-house-up-fill',\n\t'house-up': 'i-bi-house-up',\n\t'house-x-fill': 'i-bi-house-x-fill',\n\t'house-x': 'i-bi-house-x',\n\t'person-add': 'i-bi-person-add',\n\t'person-down': 'i-bi-person-down',\n\t'person-exclamation': 'i-bi-person-exclamation',\n\t'person-fill-add': 'i-bi-person-fill-add',\n\t'person-fill-check': 'i-bi-person-fill-check',\n\t'person-fill-dash': 'i-bi-person-fill-dash',\n\t'person-fill-down': 'i-bi-person-fill-down',\n\t'person-fill-exclamation': 'i-bi-person-fill-exclamation',\n\t'person-fill-gear': 'i-bi-person-fill-gear',\n\t'person-fill-lock': 'i-bi-person-fill-lock',\n\t'person-fill-slash': 'i-bi-person-fill-slash',\n\t'person-fill-up': 'i-bi-person-fill-up',\n\t'person-fill-x': 'i-bi-person-fill-x',\n\t'person-gear': 'i-bi-person-gear',\n\t'person-lock': 'i-bi-person-lock',\n\t'person-slash': 'i-bi-person-slash',\n\t'person-up': 'i-bi-person-up',\n\tscooter: 'i-bi-scooter',\n\t'taxi-front-fill': 'i-bi-taxi-front-fill',\n\t'taxi-front': 'i-bi-taxi-front',\n\tamd: 'i-bi-amd',\n\t'database-add': 'i-bi-database-add',\n\t'database-check': 'i-bi-database-check',\n\t'database-dash': 'i-bi-database-dash',\n\t'database-down': 'i-bi-database-down',\n\t'database-exclamation': 'i-bi-database-exclamation',\n\t'database-fill-add': 'i-bi-database-fill-add',\n\t'database-fill-check': 'i-bi-database-fill-check',\n\t'database-fill-dash': 'i-bi-database-fill-dash',\n\t'database-fill-down': 'i-bi-database-fill-down',\n\t'database-fill-exclamation': 'i-bi-database-fill-exclamation',\n\t'database-fill-gear': 'i-bi-database-fill-gear',\n\t'database-fill-lock': 'i-bi-database-fill-lock',\n\t'database-fill-slash': 'i-bi-database-fill-slash',\n\t'database-fill-up': 'i-bi-database-fill-up',\n\t'database-fill-x': 'i-bi-database-fill-x',\n\t'database-fill': 'i-bi-database-fill',\n\t'database-gear': 'i-bi-database-gear',\n\t'database-lock': 'i-bi-database-lock',\n\t'database-slash': 'i-bi-database-slash',\n\t'database-up': 'i-bi-database-up',\n\t'database-x': 'i-bi-database-x',\n\tdatabase: 'i-bi-database',\n\t'houses-fill': 'i-bi-houses-fill',\n\thouses: 'i-bi-houses',\n\tnvidia: 'i-bi-nvidia',\n\t'person-vcard-fill': 'i-bi-person-vcard-fill',\n\t'person-vcard': 'i-bi-person-vcard',\n\t'sina-weibo': 'i-bi-sina-weibo',\n\t'tencent-qq': 'i-bi-tencent-qq',\n\twikipedia: 'i-bi-wikipedia'\n} as const;\n\nexport type BootstrapIconAlias = keyof typeof BootstrapIconCollection;\nexport type BootstrapIconName = (typeof BootstrapIconCollection)[BootstrapIconAlias];\n\n/**\n * Map of all PCR10 icons.\n * SVGs added to stylesheet via the UnoCSS configuration.\n */\nexport const PCR10IconCollection = {\n\t'hexagon-rounded': 'i-ten-hexagon-rounded',\n\tactivities: 'i-ten-activities',\n\tanalytics: 'i-ten-analytics',\n\t'circle-arrow': 'i-ten-circle-arrow',\n\tcompany: 'i-ten-company',\n\t'last-search': 'i-ten-last-search',\n\tlogout: 'i-ten-logout',\n\tname: 'i-ten-name',\n\tposition: 'i-ten-position',\n\treports: 'i-ten-reports',\n\trollup: 'i-ten-rollup',\n\tschedule: 'i-ten-schedule',\n\tsequencing: 'i-ten-sequencing',\n\t'sequence-jump-arrow': 'i-ten-sequence-jump-arrow',\n\t'sequence-pipeline-step': 'i-ten-sequence-pipeline-step',\n\t'simple-sequencing': 'i-ten-simple-sequencing',\n\t'sequencing-other-action': 'i-ten-sequencing-other-action',\n\t'sequence-template': 'i-ten-sequence-template',\n\t'parse-resume': 'i-ten-parse-resume',\n\tdeals: 'i-ten-deals',\n\t'add-deals': 'i-ten-add-deals',\n\tsettings: 'i-ten-settings',\n\tsupport: 'i-ten-support',\n\tPCR: 'i-ten-logo-pcr-ten',\n\t'pcr-hexagon': 'i-ten-pcr-hexagon',\n\t'switch-moon': 'i-ten-theme-toggler-moon',\n\t'switch-sun': 'i-ten-theme-toggler-sun',\n\t'save-floppy': 'i-ten-save',\n\t'colorized-social-apple': 'i-integrations-apple-light dark:i-integrations-apple-dark',\n\t'colorized-social-facebook': 'i-integrations-facebook',\n\t'colorized-social-google': 'i-integrations-google',\n\t'colorized-social-linkedin': 'i-integrations-linkedin',\n\t'colorized-social-microsoft': 'i-integrations-microsoft',\n\t'colorized-social-logo-apple': 'i-integrations-apple-logo-light dark:i-integrations-apple-logo-dark',\n\t'colorized-social-logo-facebook': 'i-integrations-facebook_logo',\n\t'colorized-social-logo-google': 'i-integrations-google_logo',\n\t'colorized-social-logo-linkedin': 'i-integrations-linkedin_logo',\n\t'colorized-social-logo-microsoft': 'i-integrations-microsoft_logo',\n\t'colorized-social-logo-x': 'i-integrations-x_logo',\n\t'colorized-social-logo-tiny': 'i-integrations-tiny_logo',\n\t'colorized-jobshare-logo-linkedin': 'i-integrations-jobshare_linkedin_logo',\n\t'colorized-jobshare-logo-facebook': 'i-integrations-jobshare_facebook_logo',\n\t'xing-outline': 'i-ten-xing-outline',\n\txing: 'i-ten-xing-filled',\n\tbrain: 'i-ten-brain',\n\t'search-hexagon': 'i-ten-search-hexagon',\n\t'recently-viewed': 'i-ten-recently-viewed',\n\t'recently-modified': 'i-ten-recently-modified',\n\t'add-name': 'i-ten-add-name',\n\t'add-company': 'i-ten-add-company',\n\t'add-position': 'i-ten-add-position',\n\t'add-rollup': 'i-ten-add-rollup',\n\t'saved-searches': 'i-ten-saved-searches',\n\t'ai-generator-light': 'i-ten-ai-generator-light',\n\t//Aliased to PCR9 until brought to new set. Needed for casing consistency.\n\tprofile: 'icon-Profile',\n\t'custom-indicator': 'i-ten-custom-indicator',\n\t'no-permissions': 'i-ten-no-permissions',\n\tautomatic: 'i-ten-automatic',\n\t'manual-step': 'i-ten-manual-step',\n\tzoomphone: 'i-ten-zoom-phone',\n\tringcentral: 'i-ten-ringcentral',\n\t'cursor-globe': 'i-ten-cursor-globe'\n} as const;\n\nexport type PCR10IconAlias = keyof typeof PCR10IconCollection;\nexport type PCR10IconName = (typeof PCR10IconCollection)[PCR10IconAlias];\n\n/**\n * Map of all icons (and dark/light combinations) for PCR Capture supported sites.\n * These icons have pre-applied colors, and will not accept the text color.\n * They are configured to render as images in the UnoCSS configuration.\n */\nexport const CaptureSiteIconCollection = {\n\t'colorized-careerbuilder-dark': 'i-capture-careerbuilder-dark',\n\t'colorized-careerbuilder': 'i-capture-careerbuilder-light dark:i-capture-careerbuilder-dark',\n\t'colorized-elempleo-dark': 'i-capture-elempleo-dark',\n\t'colorized-elempleo': 'i-capture-elempleo-light dark:i-capture-elempleo-dark',\n\t'colorized-facebook-dark': 'i-capture-facebook-dark',\n\t'colorized-facebook': 'i-capture-facebook-light dark:i-capture-facebook-dark',\n\t'colorized-indeed-dark': 'i-capture-indeed-dark',\n\t'colorized-indeed': 'i-capture-indeed-light dark:i-capture-indeed-dark',\n\t'colorized-jobstreet-dark': 'i-capture-jobstreet-dark',\n\t'colorized-jobstreet': 'i-capture-jobstreet-light dark:i-capture-jobstreet-dark',\n\t'colorized-linkedin-dark': 'i-capture-linkedin-dark',\n\t'colorized-linkedin': 'i-capture-linkedin-light dark:i-capture-linkedin-dark',\n\t'colorized-monster-dark': 'i-capture-monster-dark',\n\t'colorized-monster': 'i-capture-monster-light dark:i-capture-monster-dark',\n\t'colorized-resumelibrary-dark': 'i-capture-resumelibrary-dark',\n\t'colorized-resumelibrary': 'i-capture-resumelibrary-light dark:i-capture-resumelibrary-dark',\n\t'colorized-seamless-dark': 'i-capture-seamless-dark',\n\t'colorized-seamless': 'i-capture-seamless-light dark:i-capture-seamless-dark',\n\t'colorized-xing-dark': 'i-capture-xing-dark',\n\t'colorized-xing': 'i-capture-xing-light dark:i-capture-xing-dark',\n\t'colorized-zoominfo-dark': 'i-capture-zoominfo-dark',\n\t'colorized-zoominfo': 'i-capture-zoominfo-light dark:i-capture-zoominfo-dark'\n} as const;\n\nexport type CaptureSiteIconAlias = keyof typeof CaptureSiteIconCollection;\nexport type CaptureSiteIconName = (typeof CaptureSiteIconCollection)[CaptureSiteIconAlias];\n\n/**\n * Collection map of all the icons we self host via the web public font folder\n */\nexport const PCR9IconCollection = {\n\tActivities1: 'icon-Activities1',\n\tActivities2: 'icon-Activities2',\n\tActivities: 'icon-Activities',\n\t'Activities-solid1': 'icon-Activities-solid1',\n\t'Activities-solid': 'icon-Activities-solid',\n\tActivity: 'icon-Activity',\n\t'Activity-solid': 'icon-Activity-solid',\n\tAdd: 'icon-Add',\n\tAddDoc: 'icon-AddDoc',\n\tAddName: 'icon-AddName',\n\tAddPresentation: 'icon-AddPresentation',\n\tAddRecord: 'icon-AddRecord',\n\tAddressBook: 'icon-AddressBook',\n\tAdjustAlt: 'icon-AdjustAlt',\n\tAdvancedSearch2: 'icon-AdvancedSearch2',\n\tAdvancedSearch: 'icon-AdvancedSearch',\n\tAirplane2: 'icon-Airplane2',\n\tAirplane: 'icon-Airplane',\n\tAlarm2: 'icon-Alarm2',\n\tAlarm: 'icon-Alarm',\n\tAllContractors: 'icon-AllContractors',\n\t'Analytics-01': 'icon-Analytics-01',\n\t'Analytics-solid': 'icon-Analytics-solid',\n\tApproval: 'icon-Approval',\n\tAssessments: 'icon-Assessments',\n\tAssigned: 'icon-Assigned',\n\tAssociations1: 'icon-Associations1',\n\tAssociations: 'icon-Associations',\n\tAttachments: 'icon-Attachments',\n\tAttempt: 'icon-Attempt',\n\tAudit: 'icon-Audit',\n\tAuthority: 'icon-Authority',\n\tAutomation: 'icon-Automation',\n\tAvailable: 'icon-Available',\n\tAx: 'icon-Ax',\n\tAzure: 'icon-Azure',\n\tBack1: 'icon-Back1',\n\tBack: 'icon-Back',\n\tBar: 'icon-Bar',\n\tBars: 'icon-Bars',\n\tBaseball: 'icon-Baseball',\n\tBasicSearch: 'icon-BasicSearch',\n\tBasketball: 'icon-Basketball',\n\tBasketballHoop: 'icon-BasketballHoop',\n\tBeachUmbrella: 'icon-BeachUmbrella',\n\tBeer: 'icon-Beer',\n\tBellOff: 'icon-BellOff',\n\tBellOn: 'icon-BellOn',\n\tBellOutline: 'icon-BellOutline',\n\tBin: 'icon-Bin',\n\tBinoculars: 'icon-Binoculars',\n\tBirthdayCake: 'icon-BirthdayCake',\n\tBlank: 'icon-Blank',\n\tBook: 'icon-Book',\n\tBookmark: 'icon-Bookmark',\n\t'Bookmark-solid': 'icon-Bookmark-solid',\n\tBoot: 'icon-Boot',\n\tBreak: 'icon-Break',\n\tBreakEnd: 'icon-BreakEnd',\n\tBriefcase2: 'icon-Briefcase2',\n\tBriefcase: 'icon-Briefcase',\n\tBuilding: 'icon-Building',\n\tBullhorn2: 'icon-Bullhorn2',\n\tBullhorn: 'icon-Bullhorn',\n\tBus: 'icon-Bus',\n\tCSS: 'icon-CSS',\n\tCSV: 'icon-CSV',\n\tCake: 'icon-Cake',\n\tCalendar2: 'icon-Calendar2',\n\tCalendar21: 'icon-Calendar21',\n\tCalendar: 'icon-Calendar',\n\t'Calendar-solid': 'icon-Calendar-solid',\n\tCalendarDay: 'icon-CalendarDay',\n\tCalendarList: 'icon-CalendarList',\n\tCalendarMonth: 'icon-CalendarMonth',\n\tCalendarWeek: 'icon-CalendarWeek',\n\tCallPlanner: 'icon-CallPlanner',\n\tCamera: 'icon-Camera',\n\tCanendarList: 'icon-CanendarList',\n\tCar2: 'icon-Car2',\n\tCar: 'icon-Car',\n\tCareerbuilder: 'icon-Careerbuilder',\n\tCars: 'icon-Cars',\n\tCart2: 'icon-Cart2',\n\tCart: 'icon-Cart',\n\tCharts: 'icon-Charts',\n\tCheck: 'icon-Check',\n\tChevronRight1: 'icon-ChevronRight1',\n\tChevronRight: 'icon-ChevronRight',\n\tCleaning: 'icon-Cleaning',\n\tClearStatus: 'icon-ClearStatus',\n\tClipboard: 'icon-Clipboard',\n\tClock2: 'icon-Clock2',\n\tClockIn1: 'icon-ClockIn1',\n\tClockIn: 'icon-ClockIn',\n\tClockOut1: 'icon-ClockOut1',\n\tClockOut: 'icon-ClockOut',\n\tClosed: 'icon-Closed',\n\tCode: 'icon-Code',\n\tCoffee: 'icon-Coffee',\n\tCogwheel: 'icon-Cogwheel',\n\tCoins: 'icon-Coins',\n\tCompany: 'icon-Company',\n\t'Company-solid1': 'icon-Company-solid1',\n\t'Company-solid': 'icon-Company-solid',\n\tCompare: 'icon-Compare',\n\tConnectPeople: 'icon-ConnectPeople',\n\tContract: 'icon-Contract',\n\t'Contract-solid': 'icon-Contract-solid',\n\tCopy: 'icon-Copy',\n\tCopyDatabase: 'icon-CopyDatabase',\n\tCreditCard: 'icon-CreditCard',\n\tCustomize: 'icon-Customize',\n\tCutlery: 'icon-Cutlery',\n\tDashboard3: 'icon-Dashboard3',\n\t'Dashboard3-solid': 'icon-Dashboard3-solid',\n\tDashboard: 'icon-Dashboard',\n\t'Dashboard-solid': 'icon-Dashboard-solid',\n\tDatabase: 'icon-Database',\n\tDefaultCompanySearch: 'icon-DefaultCompanySearch',\n\tDelete1: 'icon-Delete1',\n\tDelete2: 'icon-Delete2',\n\tDelete3: 'icon-Delete3',\n\tDelete4: 'icon-Delete4',\n\tDelete5: 'icon-Delete5',\n\tDelete6: 'icon-Delete6',\n\tDelete7: 'icon-Delete7',\n\tDelete10: 'icon-Delete10',\n\tDelete: 'icon-Delete',\n\tDemo1: 'icon-Demo1',\n\tDemo: 'icon-Demo',\n\tDetails: 'icon-Details',\n\tDice: 'icon-Dice',\n\tDisplay: 'icon-Display',\n\tDog: 'icon-Dog',\n\tDoubleArrowLeft: 'icon-DoubleArrowLeft',\n\tDoubleArrowRight: 'icon-DoubleArrowRight',\n\tDownArrow: 'icon-DownArrow',\n\tDownload: 'icon-Download',\n\tDrag: 'icon-Drag',\n\tDrink: 'icon-Drink',\n\tDrop: 'icon-Drop',\n\tDumbell: 'icon-Dumbell',\n\tDuplicate: 'icon-Duplicate',\n\tEEOC: 'icon-EEOC',\n\tEat1: 'icon-Eat1',\n\tEat: 'icon-Eat',\n\tEdit2: 'icon-Edit2',\n\tEdit: 'icon-Edit',\n\tEducation: 'icon-Education',\n\tEmployeeBadge: 'icon-EmployeeBadge',\n\tEnvelope: 'icon-Envelope',\n\tEquipmentCodes: 'icon-EquipmentCodes',\n\tEraser: 'icon-Eraser',\n\tExclamationTriangle: 'icon-ExclamationTriangle',\n\tExpenses: 'icon-Expenses',\n\tExport: 'icon-Export',\n\tExportProfile: 'icon-ExportProfile',\n\tEye: 'icon-Eye',\n\tEyedropper: 'icon-Eyedropper',\n\tFacebook: 'icon-Facebook',\n\t'Facebook-2': 'icon-Facebook-2',\n\t'Facebook-solid': 'icon-Facebook-solid',\n\tFacetimeVideo: 'icon-FacetimeVideo',\n\tFastFood: 'icon-FastFood',\n\tFeedback: 'icon-Feedback',\n\t'Feedback-solid': 'icon-Feedback-solid',\n\tFeedbackSolid: 'icon-FeedbackSolid',\n\tFilePcr: 'icon-FilePcr',\n\tFilePdf: 'icon-FilePdf',\n\tFilm: 'icon-Film',\n\tFilter: 'icon-Filter',\n\t'Filter-solid': 'icon-Filter-solid',\n\tFire: 'icon-Fire',\n\tFirstLastArrow: 'icon-FirstLastArrow',\n\tFlag: 'icon-Flag',\n\tFootball: 'icon-Football',\n\tFormLetter: 'icon-FormLetter',\n\tForward: 'icon-Forward',\n\tFree: 'icon-Free',\n\tFresh: 'icon-Fresh',\n\tFreshExport: 'icon-FreshExport',\n\tGamepad: 'icon-Gamepad',\n\tGetAll: 'icon-GetAll',\n\tGetFyre: 'icon-GetFyre',\n\tGetNew: 'icon-GetNew',\n\tGift: 'icon-Gift',\n\tGlass: 'icon-Glass',\n\tGlobeAmericas: 'icon-GlobeAmericas',\n\tGoogle: 'icon-Google',\n\t'Google-solid': 'icon-Google-solid',\n\tGooglePlus: 'icon-GooglePlus',\n\tGoogleSheets: 'icon-GoogleSheets',\n\tGovernment: 'icon-Government',\n\tGroup2: 'icon-Group2',\n\tGroup3: 'icon-Group3',\n\tGroup: 'icon-Group',\n\tHTML: 'icon-HTML',\n\tHandShake: 'icon-HandShake',\n\tHeadphones: 'icon-Headphones',\n\tHeadset1: 'icon-Headset1',\n\tHeadset: 'icon-Headset',\n\tHeart: 'icon-Heart',\n\t'Heart-solid': 'icon-Heart-solid',\n\tHelp: 'icon-Help',\n\t'Help-solid': 'icon-Help-solid',\n\tHelpIcon: 'icon-HelpIcon',\n\tHidden: 'icon-Hidden',\n\tHigh: 'icon-High',\n\tHiringAuthority: 'icon-HiringAuthority',\n\tHistory: 'icon-History',\n\tHome2: 'icon-Home2',\n\tHome: 'icon-Home',\n\t'Home-solid': 'icon-Home-solid',\n\tHours: 'icon-Hours',\n\tImage: 'icon-Image',\n\tImport: 'icon-Import',\n\tIndeed: 'icon-Indeed',\n\t'Indeed-solid': 'icon-Indeed-solid',\n\tIndustry: 'icon-Industry',\n\tInformation: 'icon-Information',\n\tInquiries: 'icon-Inquiries',\n\tInstall: 'icon-Install',\n\tInterviews: 'icon-Interviews',\n\tKeynote: 'icon-Keynote',\n\tKeys1: 'icon-Keys1',\n\tKeys: 'icon-Keys',\n\t'Keys-solid': 'icon-Keys-solid',\n\tKeywords: 'icon-Keywords',\n\tLaptop: 'icon-Laptop',\n\tLastArrow: 'icon-LastArrow',\n\tLayout: 'icon-Layout',\n\tLeaf: 'icon-Leaf',\n\tLeftScroll: 'icon-LeftScroll',\n\tLicense: 'icon-License',\n\tLightbulb: 'icon-Lightbulb',\n\tLink: 'icon-Link',\n\tLinkedIn: 'icon-LinkedIn',\n\t'LinkedIn-solid': 'icon-LinkedIn-solid',\n\tLinkedinSquare: 'icon-LinkedinSquare',\n\tLock: 'icon-Lock',\n\tLogBook: 'icon-LogBook',\n\tLogging: 'icon-Logging',\n\tLogin: 'icon-Login',\n\tLow: 'icon-Low',\n\tLuggage: 'icon-Luggage',\n\tMacbook: 'icon-Macbook',\n\tMagic: 'icon-Magic',\n\tMail: 'icon-Mail',\n\tMailOpen2: 'icon-MailOpen2',\n\tMailOpen: 'icon-MailOpen',\n\t'MailOpen-solid': 'icon-MailOpen-solid',\n\tMap: 'icon-Map',\n\tMapMarker: 'icon-MapMarker',\n\t'MapMarker-solid': 'icon-MapMarker-solid',\n\tMaximize: 'icon-Maximize',\n\tMedium: 'icon-Medium',\n\tMeeting: 'icon-Meeting',\n\tMenuDropdown: 'icon-MenuDropdown',\n\tMerge: 'icon-Merge',\n\tMicrosoft: 'icon-Microsoft',\n\t'Microsoft-solid': 'icon-Microsoft-solid',\n\tMidArrow: 'icon-MidArrow',\n\tMilitary: 'icon-Military',\n\tMinimize: 'icon-Minimize',\n\tMobile2: 'icon-Mobile2',\n\tMobile: 'icon-Mobile',\n\tMonitor: 'icon-Monitor',\n\tMonster: 'icon-Monster',\n\tMore: 'icon-More',\n\tMouse: 'icon-Mouse',\n\tMove: 'icon-Move',\n\tMoveDatabase: 'icon-MoveDatabase',\n\tMsExcel: 'icon-MsExcel',\n\tMsOffice365: 'icon-MsOffice365',\n\tMultiCal: 'icon-MultiCal',\n\tMultiCog: 'icon-MultiCog',\n\t'MultiCog-solid': 'icon-MultiCog-solid',\n\tMusic: 'icon-Music',\n\tName: 'icon-Name',\n\t'Name-solid': 'icon-Name-solid',\n\tNameStatus_Clock: 'icon-NameStatus_Clock',\n\tNameStatus_Hex: 'icon-NameStatus_Hex',\n\tNew: 'icon-New',\n\tNewWindow: 'icon-NewWindow',\n\tNoBulk: 'icon-NoBulk',\n\tNotAvailable: 'icon-NotAvailable',\n\tNotes2: 'icon-Notes2',\n\tNotes21: 'icon-Notes21',\n\tNotes: 'icon-Notes',\n\tOpen: 'icon-Open',\n\tOpportunity1: 'icon-Opportunity1',\n\tOpportunity: 'icon-Opportunity',\n\tOpportunityAdd: 'icon-OpportunityAdd',\n\tOutlook: 'icon-Outlook',\n\tPaid: 'icon-Paid',\n\tPants: 'icon-Pants',\n\tPaperclip: 'icon-Paperclip',\n\tParents: 'icon-Parents',\n\tPhone1: 'icon-Phone1',\n\tPhone2: 'icon-Phone2',\n\tPhone3: 'icon-Phone3',\n\tPhone4: 'icon-Phone4',\n\tPhoto: 'icon-Photo',\n\tPicture2: 'icon-Picture2',\n\tPicture: 'icon-Picture',\n\tPie: 'icon-Pie',\n\tPieChart: 'icon-PieChart',\n\tPin1: 'icon-Pin1',\n\tPin: 'icon-Pin',\n\t'Pin-solid': 'icon-Pin-solid',\n\tPinterest: 'icon-Pinterest',\n\tPipeline: 'icon-Pipeline',\n\t'Pipeline-solid': 'icon-Pipeline-solid',\n\tPizza: 'icon-Pizza',\n\tPlacement: 'icon-Placement',\n\t'Placement-solid': 'icon-Placement-solid',\n\tPlay: 'icon-Play',\n\tPlug: 'icon-Plug',\n\t'Plug-solid': 'icon-Plug-solid',\n\tPlusCircle: 'icon-PlusCircle',\n\tPopOut: 'icon-PopOut',\n\tPopout: 'icon-Popout',\n\tPosition: 'icon-Position',\n\t'Position-solid1': 'icon-Position-solid1',\n\t'Position-solid11': 'icon-Position-solid11',\n\t'Position-solid': 'icon-Position-solid',\n\tPostJob: 'icon-PostJob',\n\tPrint2: 'icon-Print2',\n\tPrint: 'icon-Print',\n\t'Print-solid': 'icon-Print-solid',\n\tProfile: 'icon-Profile',\n\tProfit: 'icon-Profit',\n\tProjector: 'icon-Projector',\n\tQuickAdd: 'icon-QuickAdd',\n\tRSS: 'icon-RSS',\n\tReceipt: 'icon-Receipt',\n\tRedo: 'icon-Redo',\n\tRefresh: 'icon-Refresh',\n\tRegistration: 'icon-Registration',\n\tRemoveOauth: 'icon-RemoveOauth',\n\tReply: 'icon-Reply',\n\tReplyAll: 'icon-ReplyAll',\n\tReports: 'icon-Reports',\n\t'Reports-solid1': 'icon-Reports-solid1',\n\t'Reports-solid': 'icon-Reports-solid',\n\tRequest: 'icon-Request',\n\tRestore: 'icon-Restore',\n\tRestoreWindow: 'icon-RestoreWindow',\n\tResults: 'icon-Results',\n\tResume2: 'icon-Resume2',\n\tResume: 'icon-Resume',\n\tRightScroll: 'icon-RightScroll',\n\tRoad: 'icon-Road',\n\tRollup: 'icon-Rollup',\n\t'Rollup-solid1': 'icon-Rollup-solid1',\n\t'Rollup-solid': 'icon-Rollup-solid',\n\tRouting1: 'icon-Routing1',\n\tRouting: 'icon-Routing',\n\tRuler: 'icon-Ruler',\n\tSMS3: 'icon-SMS3',\n\tSMS: 'icon-SMS',\n\tSave2: 'icon-Save2',\n\tSave: 'icon-Save',\n\t'Save-solid2': 'icon-Save-solid2',\n\t'Save-solid': 'icon-Save-solid',\n\tSchedule1: 'icon-Schedule1',\n\tSchedule: 'icon-Schedule',\n\t'Schedule-solid1': 'icon-Schedule-solid1',\n\t'Schedule-solid': 'icon-Schedule-solid',\n\tScoring: 'icon-Scoring',\n\tScout: 'icon-Scout',\n\tSecurity: 'icon-Security',\n\t'Security-solid': 'icon-Security-solid',\n\tSequencing: 'icon-Sequencing',\n\t'Sequencing-solid': 'icon-Sequencing-solid',\n\tSettings2: 'icon-Settings2',\n\t'Settings2-solid': 'icon-Settings2-solid',\n\tSettings: 'icon-Settings',\n\t'Settings-solid': 'icon-Settings-solid',\n\tShare: 'icon-Share',\n\tShareStatus: 'icon-ShareStatus',\n\t'ShareStatus-solid': 'icon-ShareStatus-solid',\n\tShellApp: 'icon-ShellApp',\n\tShoePrints: 'icon-ShoePrints',\n\tShovelOutline: 'icon-ShovelOutline',\n\tShovelSolid: 'icon-ShovelSolid',\n\tShuffle: 'icon-Shuffle',\n\tSignature: 'icon-Signature',\n\tSkillCodes: 'icon-SkillCodes',\n\tSnowflake: 'icon-Snowflake',\n\tSort: 'icon-Sort',\n\tSplitScreenFlyin: 'icon-SplitScreenFlyin',\n\tSplitScreenHoriz: 'icon-SplitScreenHoriz',\n\tSplitScreenVert: 'icon-SplitScreenVert',\n\tStage0: 'icon-Stage0',\n\tStage0Square: 'icon-Stage0Square',\n\tStage1: 'icon-Stage1',\n\tStage1Square: 'icon-Stage1Square',\n\tStage2: 'icon-Stage2',\n\tStage2Square: 'icon-Stage2Square',\n\tStage3: 'icon-Stage3',\n\tStage3Square: 'icon-Stage3Square',\n\tStage4: 'icon-Stage4',\n\tStage4Square: 'icon-Stage4Square',\n\tStage5: 'icon-Stage5',\n\tStage5Square: 'icon-Stage5Square',\n\tStage6: 'icon-Stage6',\n\tStage6Square: 'icon-Stage6Square',\n\tStage7: 'icon-Stage7',\n\tStage7Square: 'icon-Stage7Square',\n\tStage8: 'icon-Stage8',\n\tStage8Square: 'icon-Stage8Square',\n\tStage9: 'icon-Stage9',\n\tStage9Square: 'icon-Stage9Square',\n\tStage10: 'icon-Stage10',\n\tStage10Square: 'icon-Stage10Square',\n\tStage11: 'icon-Stage11',\n\tStage11Square: 'icon-Stage11Square',\n\tStage: 'icon-Stage',\n\tStarEmpty: 'icon-StarEmpty',\n\tStarFill: 'icon-StarFill',\n\tStarHalf: 'icon-StarHalf',\n\tStationary: 'icon-Stationary',\n\tStats: 'icon-Stats',\n\tStep: 'icon-Step',\n\tStepOutline: 'icon-StepOutline',\n\tStopwatch: 'icon-Stopwatch',\n\tSummary: 'icon-Summary',\n\tSweater: 'icon-Sweater',\n\tTableTennis: 'icon-TableTennis',\n\tTag2: 'icon-Tag2',\n\tTag: 'icon-Tag',\n\t'Tag-solid': 'icon-Tag-solid',\n\tTags2: 'icon-Tags2',\n\tTags: 'icon-Tags',\n\t'Tags-solid': 'icon-Tags-solid',\n\tTarget: 'icon-Target',\n\tTask: 'icon-Task',\n\tTemplate: 'icon-Template',\n\tTextKernel: 'icon-TextKernel',\n\tTimeSheet: 'icon-TimeSheet',\n\t'TimeSheet-solid': 'icon-TimeSheet-solid',\n\tTint: 'icon-Tint',\n\tTrain: 'icon-Train',\n\tTransactions: 'icon-Transactions',\n\t'Transactions-solid': 'icon-Transactions-solid',\n\tTshirt: 'icon-Tshirt',\n\tTwitter: 'icon-Twitter',\n\tTwitterSquare: 'icon-TwitterSquare',\n\tUmbrella: 'icon-Umbrella',\n\tUndo: 'icon-Undo',\n\tUpDownArrow: 'icon-UpDownArrow',\n\tUpdateGroup: 'icon-UpdateGroup',\n\tUpgrade: 'icon-Upgrade',\n\tUpload: 'icon-Upload',\n\tUserGirl: 'icon-UserGirl',\n\tUserMan: 'icon-UserMan',\n\tUsers1: 'icon-Users1',\n\tUsers: 'icon-Users',\n\t'Users-solid': 'icon-Users-solid',\n\tVendor: 'icon-Vendor',\n\tWarning: 'icon-Warning',\n\tWeb: 'icon-Web',\n\tWord: 'icon-Word',\n\tWrong: 'icon-Wrong',\n\t'Wrong-solid': 'icon-Wrong-solid',\n\tX: 'icon-X',\n\tYahoo: 'icon-Yahoo',\n\t'Yahoo-solid': 'icon-Yahoo-solid',\n\tZoom: 'icon-Zoom',\n\tZoominfo: 'icon-Zoominfo',\n\t'action-redo': 'icon-action-redo',\n\t'action-undo': 'icon-action-undo',\n\tanchor: 'icon-anchor',\n\tapple: 'icon-apple',\n\t'arrow-down': 'icon-arrow-down',\n\t'arrow-down-circle': 'icon-arrow-down-circle',\n\t'arrow-left': 'icon-arrow-left',\n\t'arrow-left-circle': 'icon-arrow-left-circle',\n\t'arrow-right': 'icon-arrow-right',\n\t'arrow-right-circle': 'icon-arrow-right-circle',\n\t'arrow-up': 'icon-arrow-up',\n\t'arrow-up-circle': 'icon-arrow-up-circle',\n\tbadge: 'icon-badge',\n\tbag: 'icon-bag',\n\tban: 'icon-ban',\n\tbasket: 'icon-basket',\n\t'basket-loaded': 'icon-basket-loaded',\n\tbell: 'icon-bell',\n\t'book-open': 'icon-book-open',\n\tbriefcase: 'icon-briefcase',\n\tbubble: 'icon-bubble',\n\t'bubbles-Activities': 'icon-bubbles-Activities',\n\tbulb: 'icon-bulb',\n\tbullhorn: 'icon-bullhorn',\n\tcalculator: 'icon-calculator',\n\tcalender: 'icon-calender',\n\t'call-end': 'icon-call-end',\n\t'call-in': 'icon-call-in',\n\t'call-out': 'icon-call-out',\n\tcamera: 'icon-camera',\n\tcamrecorder: 'icon-camrecorder',\n\tchart: 'icon-chart',\n\tcheckCircle: 'icon-checkCircle',\n\tchemistry: 'icon-chemistry',\n\tclock: 'icon-clock',\n\tclose: 'icon-close',\n\t'cloud-download': 'icon-cloud-download',\n\t'cloud-upload': 'icon-cloud-upload',\n\tcompass: 'icon-compass',\n\t'control-end': 'icon-control-end',\n\t'control-forward': 'icon-control-forward',\n\t'control-pause': 'icon-control-pause',\n\t'control-play': 'icon-control-play',\n\t'control-rewind': 'icon-control-rewind',\n\t'control-start': 'icon-control-start',\n\t'credit-card': 'icon-credit-card',\n\tcrop: 'icon-crop',\n\tcup: 'icon-cup',\n\tcursor: 'icon-cursor',\n\t'cursor-move': 'icon-cursor-move',\n\tdaXtraLogo: 'icon-daXtraLogo',\n\tdiamond: 'icon-diamond',\n\tdirection: 'icon-direction',\n\tdirections: 'icon-directions',\n\tdisc: 'icon-disc',\n\tdislike: 'icon-dislike',\n\tdoc: 'icon-doc',\n\tdocs: 'icon-docs',\n\tdrawar: 'icon-drawar',\n\tdrop: 'icon-drop',\n\tearphones: 'icon-earphones',\n\t'earphones-alt': 'icon-earphones-alt',\n\temotsmile: 'icon-emotsmile',\n\tenergy: 'icon-energy',\n\t'envelope-open': 'icon-envelope-open',\n\tenvolope: 'icon-envolope',\n\t'envolope-letter': 'icon-envolope-letter',\n\tequalizer: 'icon-equalizer',\n\teraser: 'icon-eraser',\n\tevent: 'icon-event',\n\texclamation: 'icon-exclamation',\n\teye1: 'icon-eye1',\n\teye: 'icon-eye',\n\teyeglass: 'icon-eyeglass',\n\tfeed: 'icon-feed',\n\tfile: 'icon-file',\n\t'file-word': 'icon-file-word',\n\tfilm: 'icon-film',\n\tfire: 'icon-fire',\n\tflag: 'icon-flag',\n\tfolder: 'icon-folder',\n\t'folder-alt': 'icon-folder-alt',\n\tfolderlocked: 'icon-folderlocked',\n\tframe: 'icon-frame',\n\t'game-controller': 'icon-game-controller',\n\tghost: 'icon-ghost',\n\tglobe: 'icon-globe',\n\t'globe-alt': 'icon-globe-alt',\n\tgraduation: 'icon-graduation',\n\tgraph: 'icon-graph',\n\thandbag: 'icon-handbag',\n\theart: 'icon-heart',\n\thireEZ: 'icon-hireEZ',\n\thome: 'icon-home',\n\thourglass: 'icon-hourglass',\n\tiMac: 'icon-iMac',\n\tiPad: 'icon-iPad',\n\tiPhone: 'icon-iPhone',\n\tinfo: 'icon-info',\n\tkey: 'icon-key',\n\tlayers: 'icon-layers',\n\tlike: 'icon-like',\n\tlink: 'icon-link',\n\tlist: 'icon-list',\n\t'location-pin': 'icon-location-pin',\n\tlock: 'icon-lock',\n\t'lock-open': 'icon-lock-open',\n\tlogin: 'icon-login',\n\tloop: 'icon-loop',\n\t'magic-wand': 'icon-magic-wand',\n\tmagnet: 'icon-magnet',\n\tmagnifier: 'icon-magnifier',\n\t'magnifier-add': 'icon-magnifier-add',\n\t'magnifier-remove': 'icon-magnifier-remove',\n\tmap: 'icon-map',\n\tmenu: 'icon-menu',\n\t'menu-Bars': 'icon-menu-Bars',\n\tmicrophone: 'icon-microphone',\n\tminus: 'icon-minus',\n\tmouse: 'icon-mouse',\n\tmultiCog: 'icon-multiCog',\n\t'music-tone': 'icon-music-tone',\n\t'music-tone-alt': 'icon-music-tone-alt',\n\tmustache: 'icon-mustache',\n\tnote: 'icon-note',\n\tnotebook: 'icon-notebook',\n\toptions: 'icon-options',\n\t'options-vertical': 'icon-options-vertical',\n\torganization: 'icon-organization',\n\t'paper-clip': 'icon-paper-clip',\n\t'paper-plane': 'icon-paper-plane',\n\tpaypal: 'icon-paypal',\n\tpencil: 'icon-pencil',\n\tpeople: 'icon-people',\n\tphone: 'icon-phone',\n\tpicture: 'icon-picture',\n\t'pie-chart': 'icon-pie-chart',\n\tpin: 'icon-pin',\n\tplane: 'icon-plane',\n\tplaylist: 'icon-playlist',\n\tplus: 'icon-plus',\n\tpower: 'icon-power',\n\tpresent: 'icon-present',\n\tprinter: 'icon-printer',\n\tpuzzle: 'icon-puzzle',\n\tqr: 'icon-qr',\n\t'qrcode-light': 'icon-qrcode-light',\n\tquestion: 'icon-question',\n\tredo: 'icon-redo',\n\trefresh: 'icon-refresh',\n\treload: 'icon-reload',\n\trocket: 'icon-rocket',\n\trss: 'icon-rss',\n\t'screen-desktop': 'icon-screen-desktop',\n\t'screen-smartphone': 'icon-screen-smartphone',\n\t'screen-tablet': 'icon-screen-tablet',\n\tshare: 'icon-share',\n\t'share-alt-Popout': 'icon-share-alt-Popout',\n\tshield: 'icon-shield',\n\tshuffle: 'icon-shuffle',\n\t'sign-in-alt-light': 'icon-sign-in-alt-light',\n\t'sign-out-alt-light': 'icon-sign-out-alt-light',\n\t'size-actual': 'icon-size-actual',\n\t'size-fullscreen': 'icon-size-fullscreen',\n\t'social-behance': 'icon-social-behance',\n\t'social-dribbble': 'icon-social-dribbble',\n\t'social-dropbox': 'icon-social-dropbox',\n\t'social-facebook': 'icon-social-facebook',\n\t'social-foursqare': 'icon-social-foursqare',\n\t'social-github': 'icon-social-github',\n\t'social-google': 'icon-social-google',\n\t'social-instagram': 'icon-social-instagram',\n\t'social-linkedin': 'icon-social-linkedin',\n\t'social-pintarest': 'icon-social-pintarest',\n\t'social-reddit': 'icon-social-reddit',\n\t'social-skype': 'icon-social-skype',\n\t'social-soundcloud': 'icon-social-soundcloud',\n\t'social-spotify': 'icon-social-spotify',\n\t'social-steam': 'icon-social-steam',\n\t'social-stumbleupon': 'icon-social-stumbleupon',\n\t'social-tumblr': 'icon-social-tumblr',\n\t'social-twitter': 'icon-social-twitter',\n\t'social-vkontakte': 'icon-social-vkontakte',\n\t'social-youtube': 'icon-social-youtube',\n\tspeech: 'icon-speech',\n\tspeedometer: 'icon-speedometer',\n\tstar: 'icon-star',\n\t'symble-female': 'icon-symble-female',\n\t'symbol-male': 'icon-symbol-male',\n\ttag: 'icon-tag',\n\ttarget: 'icon-target',\n\ttrash: 'icon-trash',\n\ttrophy: 'icon-trophy',\n\tumbrella: 'icon-umbrella',\n\tupload: 'icon-upload',\n\tuser: 'icon-user',\n\t'user-female': 'icon-user-female',\n\t'user-follow': 'icon-user-follow',\n\t'user-following': 'icon-user-following',\n\t'user-unfollow': 'icon-user-unfollow',\n\tusers: 'icon-users',\n\tvector: 'icon-vector',\n\t'volume-1': 'icon-volume-1',\n\t'volume-2': 'icon-volume-2',\n\t'volume-off': 'icon-volume-off',\n\twallet: 'icon-wallet',\n\twrench: 'icon-wrench'\n} as const;\n\nexport type PCR9IconAlias = keyof typeof PCR9IconCollection;\nexport type PCR9IconName = (typeof PCR9IconCollection)[PCR9IconAlias];\n","import * as React from 'react';\nimport {\n\tBootstrapIconAlias,\n\tBootstrapIconCollection,\n\tPCR10IconAlias,\n\tPCR10IconCollection,\n\tCaptureSiteIconCollection,\n\tPCR9IconAlias,\n\tPCR9IconCollection\n} from './IconCollections';\nimport { IconBaseProps, UnionIconAlias } from './types';\n\n/**\n * Collection of icons currently in use.\n * Note: PCR9IconCollection will eventually be removed.\n * Should only be used within base UI components such as IconButton and Icon.\n */\nexport const PCRIconCollection = {\n\t//TODO: remove the PCR9 icons after they have been refactored out of the React code.\n\t...PCR9IconCollection,\n\t...BootstrapIconCollection,\n\t...PCR10IconCollection,\n\t...CaptureSiteIconCollection\n};\n\n/** Available sizes of IconButton for general use. */\nexport type IconSize = keyof typeof ICON_SIZES_MAP;\n\n/**\n * Map of icon sizes classes.\n * Should only be used within base UI components such as IconButton and Icon.\n * @private - Do not use outside of Icon component.\n * @props {IconSize} size - The size of the icon.\n * @returns {string} The size class for the icon.\n */\nexport const ICON_SIZES_MAP = {\n\tfit: 'min-w-min min-h-min text-inherit',\n\t'2xs': 'text-2.5',\n\txs: 'text-xs',\n\tsm: 'text-sm',\n\tmd: 'text-base',\n\tlg: 'text-lg',\n\txl: 'text-xl',\n\t'2xl': 'text-2xl',\n\t'3xl': 'text-3xl',\n\t'4xl': 'text-4xl',\n\t'5xl': 'text-5xl',\n\t'6xl': 'text-6xl',\n\tOLDLG: 'text-1.75rem',\n\tOLDXL: 'text-2rem'\n};\n\n/**\n * A simple icon component for display purposes or composition within larger components.\n * @param {IconBaseProps} props - The props for the Icon component.\n * @returns {React.JSX.Element | null} The Icon component.\n */\nexport const Icon = ({\n\ticon,\n\tsize = 'xl',\n\tcolor = 'gray',\n\tdisabled\n}: IconBaseProps): React.JSX.Element | null => {\n\tconst iconSize = ICON_SIZES_MAP[size];\n\n\t// TODO: temporary. Remove upon completion of NineIcon removal.\n\tlet iconKey = icon as string;\n\n\tReact.useEffect(() => {\n\t\tif ((process.env as any).NODE_ENV === 'development') {\n\t\t\tif (icon?.startsWith('icon-')) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`[Icon.tsx]: Icon name begins with 'icon-' (refactor to new pattern) \\n Icon: ${icon} \\n Size: ${size} \\n Color: ${color}`\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}, [icon, size, color]);\n\n\tif (!icon) {\n\t\ticonKey = 'BasketballHoop' as PCR9IconAlias;\n\t} else if (icon.startsWith('icon-')) {\n\t\t//accept for the temporary case of using old 9 icons in action fields.\n\t\ticonKey = icon.replace('icon-', '');\n\t}\n\n\tconst iconColor = color === 'current' ? 'text-current' : `component-icon-${color}`;\n\n\treturn (\n\t\t
\n\t\t\t\n\t\t
\n\t);\n};\n\n/**\n * NineIcon is a deprecated component that will be removed in the future.\n * @deprecated Use Icon instead.\n * @param {IconBaseProps} props - The props for the NineIcon component.\n * @returns {React.JSX.Element} The NineIcon component.\n */\nexport function NineIcon(props: IconBaseProps): React.JSX.Element {\n\t// TODO: Major typing cheese. Should keep people from using Icon for PCR9 icons\n\t// Removes the need for an iconBase refactor later\n\treturn ;\n}\n\nexport type ColorableIconProps = IconBaseProps;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport { LoaderProps } from './types';\n\nexport type LoaderSize = keyof typeof SIZE_MAP;\n\n// Mapping for size values to ensure consistent sizing\nconst SIZE_MAP = {\n\txs: 6,\n\tsm: 8,\n\tmd: 10,\n\tbase: 10,\n\tlg: 12,\n\txl: 16,\n\t'2xl': 16,\n\t'3xl': 16,\n\tOLDSM: 8,\n\tOLDMD: 10,\n\tOLDLG: 12\n};\n\n/**\n * Loader component. Displays a loading animation.\n * @param {LoaderProps} props - The properties for the Loader component.\n * @param {string} props.label - Optional label to display next to the loader.\n * @param {LoaderSize} [props.size='lg'] - The size of the loader.\n * @returns {React.JSX.Element} The Loader component.\n */\nexport const Loader = ({ label, size = 'lg' }: LoaderProps): React.JSX.Element => {\n\t// Get the current size value based on the provided size prop\n\tconst currentSize = SIZE_MAP[size] || 10;\n\n\t/**\n\t * The loading animation.\n\t * @returns {React.JSX.Element}\n\t */\n\tconst LoadingAnimation = (): React.JSX.Element => (\n\t\t
\n\t\t\t{label && {label}}\n\t\t\t\n\t\t\t\t{Array(3)\n\t\t\t\t\t.fill(0)\n\t\t\t\t\t.map((_, idx) => (\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
\n\t\t
\n\t);\n\n\treturn ;\n};\n","import * as React from 'react';\nimport { cleanHTMLClasses } from '@mst/utils/lib/HtmlHelpers/CleanHTMLClasses';\nimport { ButtonColorOption } from '../types';\nimport { ButtonSize } from '../constants';\n\ninterface DividerProps {\n\t/** The variant of the button */\n\tvariant: 'filled' | 'outlined';\n\t/** The color of the button */\n\tcolor?: ButtonColorOption;\n\t/** The size of the button */\n\tsize: ButtonSize;\n\t/** Whether the button is disabled or not */\n\tisDisabled?: boolean;\n}\n\n/** Map of size to height classes */\nconst sizeToHeightMap: {\n\t[K in ButtonSize]: string;\n} = {\n\txs: 'min-h-4',\n\tsm: 'min-h-4',\n\tmd: 'min-h-5',\n\tlg: 'min-h-6',\n\txl: 'min-h-7',\n\t'2xl': 'min-h-7',\n\t'3xl': 'min-h-7',\n\tOLDSM: 'min-h-5',\n\tOLDMD: 'min-h-6',\n\tOLDLG: 'min-h-7'\n};\n\n/**\n * Divider component: Renders a divider between the text and icon, if conditions are met\n *\n * @param {DividerProps} props - Props for the Divider component\n * @returns {React.JSX.Element | null} - Divider component or null if conditions aren't met\n */\nexport const Divider: React.FC = ({\n\tvariant = 'filled',\n\tcolor = 'default',\n\tsize = 'sm',\n\tisDisabled = false\n}: DividerProps): React.JSX.Element | null => {\n\t/** Base classes for the divider */\n\tconst baseClasses = `\n flex justify-center items-center w-px rounded-full\n ${sizeToHeightMap[size] || 'md'}\n ${isDisabled ? 'opacity-50' : ''}\n component-button-${variant}-${color}-divider\n `.trim();\n\n\treturn
;\n};\n","import { IconSize } from '../Icon';\n\nexport type ButtonSize = keyof typeof BUTTON_SIZES_MAP;\n\nexport const BUTTON_TEXT_SIZE_MAP = {\n\txs: 'text-xs',\n\tsm: 'text-xs',\n\tmd: 'text-sm',\n\tlg: 'text-base',\n\tOLDSM: 'text-sm',\n\txl: 'text-xl',\n\tOLDMD: 'text-xl',\n\tOLDLG: 'text-xl',\n\t'2xl': 'text-xl',\n\t'3xl': 'text-xl'\n};\n\n/**\n * Button sizes map - used to set the size of the button\n * @param {BaseSize} - The size of the button\n * @returns {string} - The size of the button\n */\nexport const BUTTON_SIZES_MAP = {\n\txs: `${BUTTON_TEXT_SIZE_MAP['xs']} min-w-17`,\n\tsm: `${BUTTON_TEXT_SIZE_MAP['sm']} min-w-25`,\n\tmd: `${BUTTON_TEXT_SIZE_MAP['md']} min-w-28`,\n\tlg: `${BUTTON_TEXT_SIZE_MAP['lg']} min-w-31`,\n\tOLDSM: `${BUTTON_TEXT_SIZE_MAP['OLDSM']} min-w-24`,\n\txl: `${BUTTON_TEXT_SIZE_MAP['xl']} min-w-36`,\n\tOLDMD: `${BUTTON_TEXT_SIZE_MAP['OLDMD']} min-w-28`,\n\tOLDLG: `${BUTTON_TEXT_SIZE_MAP['OLDLG']} min-w-31`,\n\t'2xl': `${BUTTON_TEXT_SIZE_MAP['2xl']} min-w-36`,\n\t'3xl': `${BUTTON_TEXT_SIZE_MAP['3xl']} min-w-36`\n};\n\n/**\n * These heights are specific to force to a certain height for when icons are NOT on top or bottom\n */\nexport const BUTTON_HEIGHT_SIZES_MAP = {\n\txs: 'h-6',\n\tsm: 'h-6',\n\tmd: 'h-7',\n\tlg: 'h-8',\n\tOLDSM: 'h-8',\n\txl: 'h-9',\n\tOLDMD: 'h-9',\n\tOLDLG: 'h-12',\n\t'2xl': 'h-9', //needs matching spec\n\t'3xl': 'h-9' //needs matching spec\n};\n\n/**\n * In contrast to BUTTON_HEIGHT_SIZES_MAP this is the min heights for when icons ARE on top or bottom.\n */\nexport const BUTTON_HEIGHT_ICON_TOP_SIZES_MAP = {\n\txs: 'min-h-6',\n\tsm: 'min-h-6',\n\tmd: 'min-h-7',\n\tlg: 'min-h-8',\n\tOLDSM: 'min-h-8',\n\txl: 'min-h-10',\n\tOLDMD: 'min-h-9',\n\tOLDLG: 'min-h-12',\n\t'2xl': 'min-h-12',\n\t'3xl': 'min-h-12'\n};\n\n/**\n * Maps our button sizing to icon sizing for use when the icon is next to the text horizontally.\n */\nexport const BUTTON_SIDE_ICON_SIZES_MAP: {\n\t[K in ButtonSize]: IconSize;\n} = {\n\txs: '2xs',\n\tsm: 'xs',\n\tmd: 'md',\n\tlg: 'md',\n\txl: 'lg',\n\tOLDSM: 'sm',\n\tOLDMD: 'lg',\n\tOLDLG: 'xl',\n\t'2xl': 'lg', //needs matching spec\n\t'3xl': 'lg' //needs matching spec\n};\n\n/**\n * Maps our button sizing to icon sizing for use when the icon is ontop of or below the text on the button.\n */\nexport const BUTTON_VERTICAL_ICON_SIZES_MAP: {\n\t[K in ButtonSize]: IconSize;\n} = {\n\txs: 'xs',\n\tsm: 'xs',\n\tmd: 'xs',\n\tlg: 'md',\n\txl: 'md',\n\tOLDSM: 'md',\n\tOLDMD: 'lg',\n\tOLDLG: 'xl',\n\t'2xl': 'lg',\n\t'3xl': 'xl'\n};\n\n/**\n * This gives us a base width for the content of the button. An optional Icon and text.\n */\nexport const BUTTON_MAIN_CONTENT_SIZE_MAP: {\n\t[K in ButtonSize]: string;\n} = {\n\txs: 'min-w-15',\n\tsm: 'min-w-17',\n\tmd: 'min-w-20',\n\tlg: 'min-w-23',\n\txl: 'min-w-28',\n\tOLDSM: 'min-w-0',\n\tOLDMD: 'min-w-0',\n\tOLDLG: 'min-w-0',\n\t'2xl': 'min-w-28',\n\t'3xl': 'min-w-28'\n};\n\n/**\n * Horizontal padding for the button overall\n */\nexport const BUTTON_HORIZONTAL_PADDING_MAP: {\n\t[K in ButtonSize]: string;\n} = {\n\txs: 'px-1',\n\tsm: 'px-4',\n\tmd: 'px-4',\n\tlg: 'px-4',\n\txl: 'px-4',\n\tOLDSM: 'px-4',\n\tOLDMD: 'px-4',\n\tOLDLG: 'px-4',\n\t'2xl': 'px-4',\n\t'3xl': 'px-4'\n};\n\n/**\n * Horizontal padding just for the icon on the right when that side is specified.\n */\nexport const BUTTON_HORIZONTAL_PADDING_ICON_RIGHT_MAP: {\n\t[K in ButtonSize]: string;\n} = {\n\txs: 'px-1',\n\tsm: 'px-2',\n\tmd: 'px-2',\n\tlg: 'px-2',\n\txl: 'px-2',\n\tOLDSM: 'px-2',\n\tOLDMD: 'px-2',\n\tOLDLG: 'px-2',\n\t'2xl': 'px-2', // needs spec\n\t'3xl': 'px-2' // needs spec\n};\n\n/**\n * Vertical padding for the button text overall\n */\nexport const BUTTON_VERTICAL_PADDING_MAP: {\n\t[K in ButtonSize]: string;\n} = {\n\txs: 'pb-1',\n\tsm: 'pb-1',\n\tmd: 'pb-1',\n\tlg: 'pb-1',\n\txl: 'pb-1',\n\tOLDSM: 'pb-1',\n\tOLDMD: 'pb-1',\n\tOLDLG: 'pb-1',\n\t'2xl': 'pb-1.5',\n\t'3xl': 'pb-3.5'\n};\n\n/**\n * Vertical padding just for the icon on the top when that side is specified.\n */\nexport const BUTTON_VERTICAL_PADDING_ICON_TOP_MAP: {\n\t[K in ButtonSize]: string;\n} = {\n\txs: 'pt-1',\n\tsm: 'pt-1',\n\tmd: 'pt-1',\n\tlg: 'pt-1',\n\txl: 'pt-1',\n\tOLDSM: 'pt-1',\n\tOLDMD: 'pt-1',\n\tOLDLG: 'pt-1',\n\t'2xl': 'pt-1.5',\n\t'3xl': 'pt-3.5'\n};\n","import { cleanHTMLClasses } from '../../../../utils/src/lib/HtmlHelpers/CleanHTMLClasses';\nimport { BUTTON_HEIGHT_ICON_TOP_SIZES_MAP, BUTTON_HEIGHT_SIZES_MAP, BUTTON_SIZES_MAP } from './constants';\nimport { ButtonProps, MarginType, MarginValue, MarginOptions } from './types';\n\n/**\n * Extracts margins from a string or number, similar to CSS margin built-in behavior.\n * @param {string | number} value - A string or number representing margins.\n * @returns {string[]} An array of margin classes.\n * @example\n * extractMargins('10 10 10 10') // ['mt-10', 'mr-10', 'mb-10', 'ml-10']\n */\nconst extractMargins = (value: string | number): string[] => {\n\tif (typeof value !== 'string') {\n\t\treturn [];\n\t}\n\n\t// Split string into array of values\n\tconst values = value.split(' ').map(v => v.trim());\n\tconst marginKeys = ['mt', 'mr', 'mb', 'ml'];\n\n\t// Normalize values array to have exactly 4 elements\n\tswitch (values.length) {\n\t\tcase 1:\n\t\t\tvalues.push(values[0], values[0], values[0]);\n\t\t\tbreak;\n\t\tcase 2:\n\t\t\tvalues.push(values[0], values[1]);\n\t\t\tbreak;\n\t\tcase 3:\n\t\t\tvalues.push(values[1]);\n\t\t\tbreak;\n\t\tcase 4:\n\t\t\tbreak;\n\t\tdefault:\n\t\t\tvalues.splice(4);\n\t}\n\n\treturn values.map((marginValue, index) => `${marginKeys[index]}-${marginValue}`);\n};\n\n/**\n * Generates CSS margin classes based on provided options.\n * @param {MarginOptions} options - Margin options for generating the classes.\n * @returns {string} A string of generated margin classes.\n */\nconst generateMarginClasses = (options: MarginOptions): string => {\n\tif (!options) {\n\t\treturn '';\n\t}\n\n\tconst marginMap: Record = {\n\t\tm: options.m,\n\t\tmt: options.mt,\n\t\tmb: options.mb,\n\t\tml: options.ml,\n\t\tmr: options.mr,\n\t\tmx: options.mx,\n\t\tmy: options.my\n\t};\n\n\treturn Object.entries(marginMap)\n\t\t.filter(([, value]) => value !== undefined)\n\t\t.map(([marginClass, value]) => {\n\t\t\tif (marginClass === 'm') {\n\t\t\t\treturn extractMargins(value as string | number).join(' ');\n\t\t\t}\n\t\t\treturn `${marginClass}-${value as string | number}`;\n\t\t})\n\t\t.join(' ');\n};\n\n/**\n * Returns default button classes.\n * @returns {string} Default button classes.\n */\nconst getDefaultClasses = (): string =>\n\t'text-center transition-all overflow-hidden duration-200 border rounded outline-none whitespace-nowrap select-none';\n\n/**\n * Returns size-specific button classes.\n * @param {string} size - The size of the button.\n * @returns {string} Size-specific button classes.\n */\nconst getSizeClasses = (size: string, iconPosition?: string): string => {\n\treturn cleanHTMLClasses(\n\t\t`${BUTTON_SIZES_MAP[size]} ${iconPosition?.toLowerCase?.() === 'top' ? BUTTON_HEIGHT_ICON_TOP_SIZES_MAP[size] : BUTTON_HEIGHT_SIZES_MAP[size]}`\n\t);\n};\n\n/**\n * Returns icon position-specific button classes.\n * @param {string} [iconPosition] - The position of the icon.\n * @returns {string} Icon position-specific button classes.\n */\nconst getIconPositionClasses = (iconPosition?: string): string =>\n\ticonPosition === 'top' ? 'flex flex-col items-center gap-1 leading-none' : 'flex items-center justify-center';\n\n/**\n * Returns loading state-specific button classes.\n * @param {boolean} [loading] - Whether the button is in a loading state.\n * @returns {string} Loading state-specific button classes.\n */\nconst getLoadingStateClasses = (loading?: boolean): string => (loading ? 'pointer-events-none user-select-none' : '');\n\n/**\n * Returns full-width state-specific button classes.\n * @param {boolean} [fullWidth] - Whether the button should be full width.\n * @returns {string} Full-width state-specific button classes.\n */\nconst getFullWidthClasses = (fullWidth?: boolean): string => (fullWidth ? 'w-full' : '');\n\n/**\n * Returns element alignment-specific button classes.\n * @param {boolean} [icon] - Whether the button has an icon.\n * @param {boolean} [fullWidth] - Whether the button is full width.\n * @param {string} [iconPosition] - The position of the icon.\n * @returns {string} Element alignment-specific button classes.\n */\nconst getElementsAlignmentClasses = (icon?: boolean, fullWidth?: boolean, iconPosition?: string): string =>\n\ticon && fullWidth && iconPosition === 'right' ? 'justify-between' : 'justify-center';\n\n/**\n * Returns disabled state-specific button classes.\n * @param {boolean} [disabled] - Whether the button is disabled.\n * @returns {string} Disabled state-specific button classes.\n */\nconst getDisabledStateClasses = (disabled?: boolean): string => (disabled ? 'cursor-not-allowed' : '');\n\n/**\n * Creates button classes: Generates CSS classes for the button based on props and additional classes.\n * @param {ButtonProps} props - Button properties.\n * @returns {string} A string of button classes.\n */\nexport const createButtonClasses = (props: ButtonProps): string => {\n\tconst { icon, iconPosition, size, loading, fullWidth, disabled, m, mt, mb, ml, mr } = props;\n\n\tconst defaultClasses = getDefaultClasses();\n\tconst sizeClasses = getSizeClasses(size, iconPosition);\n\tconst iconPositionClasses = getIconPositionClasses(iconPosition);\n\tconst loadingStateClasses = getLoadingStateClasses(loading);\n\tconst fullWidthClasses = getFullWidthClasses(fullWidth);\n\tconst elementsAlignmentClasses = getElementsAlignmentClasses(!!icon, fullWidth, iconPosition);\n\tconst marginClasses = generateMarginClasses({ m, mt, mb, ml, mr });\n\tconst disabledStateClasses = getDisabledStateClasses(disabled);\n\n\treturn [\n\t\tdefaultClasses,\n\t\tsizeClasses,\n\t\ticonPositionClasses,\n\t\tloadingStateClasses,\n\t\tfullWidthClasses,\n\t\telementsAlignmentClasses,\n\t\tmarginClasses,\n\t\tdisabledStateClasses\n\t]\n\t\t.filter(Boolean)\n\t\t.join(' ');\n};\n","import * as React from 'react';\nimport { ButtonProps } from './types';\nimport { Icon, UnionIconAlias } from '../Icon';\nimport { Loader } from '../Loader';\nimport { Divider } from './components/Divider';\nimport { createButtonClasses } from './utils';\nimport {\n\tBUTTON_HORIZONTAL_PADDING_ICON_RIGHT_MAP,\n\tBUTTON_HORIZONTAL_PADDING_MAP,\n\tBUTTON_MAIN_CONTENT_SIZE_MAP,\n\tBUTTON_SIDE_ICON_SIZES_MAP,\n\tBUTTON_TEXT_SIZE_MAP,\n\tBUTTON_VERTICAL_ICON_SIZES_MAP,\n\tBUTTON_VERTICAL_PADDING_ICON_TOP_MAP,\n\tBUTTON_VERTICAL_PADDING_MAP\n} from './constants';\nimport { cleanHTMLClasses } from '@mst/utils/lib/HtmlHelpers/CleanHTMLClasses';\n\n/**\n * Button component: Main button component that takes in various properties and renders a customizable button\n *\n * @param {ButtonProps} props - Button properties\n * @returns {React.JSX.Element} - The button component with the provided properties\n */\nexport const Button = React.forwardRef(\n\t(\n\t\t{\n\t\t\tid,\n\t\t\ticon,\n\t\t\tlabel,\n\t\t\tonClick,\n\t\t\tsize = 'OLDSM',\n\t\t\tvariant = 'filled',\n\t\t\tcolor = 'default',\n\t\t\ticonPosition = 'left',\n\t\t\ttype = 'button',\n\t\t\tfullWidth,\n\t\t\tdisabled,\n\t\t\tloading,\n\t\t\tloadingText,\n\t\t\tm,\n\t\t\tmt,\n\t\t\tmb,\n\t\t\tml,\n\t\t\tmr,\n\t\t\t...restProps\n\t\t}: ButtonProps,\n\t\tref: React.Ref\n\t): React.JSX.Element => {\n\t\t/**\n\t\t * buttonClasses: The classes for the button\n\t\t */\n\t\tconst buttonRootClasses = `${createButtonClasses({\n\t\t\tlabel,\n\t\t\ticon,\n\t\t\ticonPosition,\n\t\t\tsize,\n\t\t\tloading,\n\t\t\tfullWidth,\n\t\t\tdisabled,\n\t\t\tm,\n\t\t\tmt,\n\t\t\tmb,\n\t\t\tml,\n\t\t\tmr\n\t\t})} component-button-${variant}-${color}`;\n\n\t\t/**\n\t\t * onClickHandler: Handles the onClick event for the button\n\t\t *\n\t\t * @description - Blurs the button to remove focus after click and calls the provided onClick function if it exists\n\t\t * @param {React.MouseEvent} e - The click event\n\t\t */\n\t\tconst onClickHandler = React.useCallback(\n\t\t\t(e: React.MouseEvent) => {\n\t\t\t\te.currentTarget.blur();\n\t\t\t\tif (onClick) {\n\t\t\t\t\tonClick(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[onClick]\n\t\t);\n\n\t\t/**\n\t\t * onKeyDownHandler: Handles the onKeyDown event for the button\n\t\t *\n\t\t * @description - If the 'Enter' key is pressed, stops propagation, prevents default behavior, and invokes the provided onClick function if it exists\n\t\t * @param {React.KeyboardEvent} e - The keyboard event\n\t\t */\n\t\tconst onKeyDownHandler = React.useCallback(\n\t\t\t(e: React.KeyboardEvent) => {\n\t\t\t\tif (e.key === 'Enter' || e.keyCode === 13) {\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tif (onClick) {\n\t\t\t\t\t\tonClick(e as unknown as React.MouseEvent);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\t[onClick]\n\t\t);\n\n\t\treturn (\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t{/* Icon on Top */}\n\t\t\t\t\t{icon && iconPosition === 'top' && !loading && (\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\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t{/* Icon on Left */}\n\t\t\t\t\t\t\t\t{icon && iconPosition === 'left' && !loading && (\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\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t{/* Label and Loading State */}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{loading ? : label}\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\n\t\t\t\t\t\t{/* Icon on Right with Divider */}\n\t\t\t\t\t\t{icon && iconPosition === 'right' && !loading && (\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\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\n\t\t);\n\t}\n);\n\nButton.displayName = 'Button';\n","/* eslint-disable */\nimport { useEffect, useLayoutEffect } from 'react';\n\n/**\n * Lifecycle method, fires after a component mounts\n * @param f Callback function that is fired.\n */\nexport const useComponentDidMount = (f: () => void): void => {\n\tuseEffect(() => {\n\t\tf && f();\n\t}, []);\n};\n\n/**\n * Lifecycle method, fires before a component unmounts\n * @param f Callback function that is fired.\n */\nexport const useComponentWillUnmount = (f: () => void): void => {\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tf && f();\n\t\t};\n\t}, []);\n};\n\n/**\n * Lifecycle method, fires synchronously after a component renders, but just before the DOM is updated\n *\n * Use this if you need to update something directly related to the current render to prevent it from flickering.\n * @param f Callback function that is fired.\n */\nexport const useComponentDidUpdate = (f: () => void): void => {\n\tuseLayoutEffect(() => {\n\t\tf && f();\n\t});\n};\n\n/**\n * Lifecycle method, fires after a component renders and the DOM is updated.\n *\n * Use this for all side effects, unless you are updating directly related to the current render and it's causing a flicker.\n * @param f Callback function that is fired.\n */\nexport const useComponentDidUpdateAsync = (f: () => void): void => {\n\tuseEffect(() => {\n\t\tf && f();\n\t});\n};\n","import * as React from 'react';\nimport { observable, action, makeObservable } from 'mobx';\nimport { observer } from 'mobx-react';\nimport { Button } from '../../lib/Button/Button';\nimport { Icon } from '../Icon/Icon';\n\n/**\n * Type definitions for the props of the ErrorBoundary component.\n */\ninterface ErrorBoundaryProps {\n\t/** Callback function invoked when an error occurs. */\n\tonError?: (error: Error, errorInfo: React.ErrorInfo) => void;\n\n\t/** Callback function invoked when the user chooses to reset the section. */\n\tonReset?: () => void;\n\n\t/** Custom error message to be displayed. */\n\terrorMessage?: string;\n\n\t/** Child components wrapped inside the ErrorBoundary. */\n\tchildren?: React.ReactNode;\n}\n\n/**\n * Type definitions for the state of the ErrorBoundary component.\n */\ninterface ErrorBoundaryState {\n\thasError: boolean;\n\terror?: Error;\n\terrorInfo?: React.ErrorInfo;\n}\n\n/**\n * An ErrorBoundary component that catches errors in child component trees and displays a fallback UI.\n * Provides an option to reset the error state and consult support for help.\n *\n * @component\n */\n@observer\nexport class ErrorBoundary extends React.Component {\n\t/** Store detailed information about the caught error. */\n\t@observable private errorInfo?: React.ErrorInfo;\n\n\tconstructor(props: ErrorBoundaryProps) {\n\t\tsuper(props);\n\t\tmakeObservable(this);\n\t\tthis.state = { hasError: false };\n\t}\n\n\t/**\n\t * Lifecycle method to catch errors in child components.\n\t *\n\t * @param error - The caught error.\n\t * @returns Updated state with error details.\n\t */\n\tstatic getDerivedStateFromError(error: Error): ErrorBoundaryState {\n\t\treturn { hasError: true, error };\n\t}\n\n\t/**\n\t * Lifecycle method invoked after catching an error.\n\t * Used for side effects like logging the error.\n\t *\n\t * @param error - The caught error.\n\t * @param errorInfo - Information about the caught error.\n\t */\n\tcomponentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {\n\t\tthis.setErrorInfo(errorInfo);\n\t\tthis.props.onError?.(error, errorInfo);\n\t}\n\n\t/**\n\t * MobX action to set the error information.\n\t *\n\t * @param errorInfo - Information about the caught error.\n\t */\n\t@action\n\tprivate setErrorInfo(errorInfo: React.ErrorInfo): void {\n\t\tthis.errorInfo = errorInfo;\n\t}\n\n\t/**\n\t * Handle the click event on the 'Refresh Section' button.\n\t */\n\tprivate handleResetClick = (): void => {\n\t\tthis.props.onReset?.();\n\t\tthis.setState({ hasError: false });\n\t};\n\n\trender(): React.ReactNode {\n\t\treturn (\n\t\t\t
\n\t\t\t\t{this.state.hasError ? (\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\tError\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tOops, something went wrong.\n\t\t\t\t\t\t\t\t\n\t\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
\n\t\t\t\t\t
\n\t\t\t\t) : (\n\t\t\t\t\tthis.props.children\n\t\t\t\t)}\n\t\t\t
\n\t\t);\n\t}\n}\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport { useLocalObservable } from 'mobx-react-lite';\n\ninterface LoadingScreenProps {\n\t/** The text to display while loading. Defaults to 'Loading...' */\n\tloadingText?: string;\n}\n\n/**\n * A Loading Screen component that displays a loading text with an animated spinner.\n * @param props The props of the LoadingScreen component.\n * @returns {React.JSX.Element} The LoadingScreen component.\n */\nexport const LoadingScreen: React.FC = ({ loadingText = 'Loading...' }): React.JSX.Element => {\n\t/** State for the loading screen, includes text, overlay and opacity settings. */\n\tconst state = useLocalObservable(() => ({\n\t\tloadingText,\n\t\thideOverlay: true,\n\t\tfullOpacity: false\n\t}));\n\n\t/** Animation settings for the spinner. */\n\tconst spinnerAnimation = {\n\t\tanimate: { scale: [0, 1, 0] },\n\t\ttransition: {\n\t\t\tduration: 2.1,\n\t\t\trepeatType: 'loop' as const,\n\t\t\tease: 'easeInOut'\n\t\t}\n\t};\n\n\treturn (\n\t\t\n\t\t\t
\n\t\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{state.loadingText}\n\t\t\t\n\t\t\n\t);\n};\n","import * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { makeObservable, observable } from 'mobx';\nimport { Observer, observer } from 'mobx-react';\nimport { useComponentDidMount, useComponentDidUpdateAsync, useComponentWillUnmount } from '../Hooks/ComponentLifecycle';\nimport { ErrorBoundary } from '../ErrorBoundary';\nimport { LoadingScreen as Loading } from '../Loading';\nimport { AddPreflightClassToElement } from '../../core/Emotion';\nimport { LoadingState } from '@mst/api/models/GlobalEnums';\nimport { RunWhen } from '@mst/utils/lib/FunctionHelpers/RunWhen';\n\n/**\n * Base class for constructing a render store.\n * v1.2\n */\nexport class RenderStore {\n\tpublic __objectname = 'RenderStore'; //used for reflection do not delete.\n\n\t/** useage of this.constructor.name will ONLY work in development. Once the code in minified, this.constructor.name will return $c for the constructor name\n\t * we are leaving in this.constructor.name for debugging help in dev, but removiong the $ in the build so that the special character can't cause problems when\n\t * the uniqueId is used as an element ID (such as in the function renderSelfToDOM)\n\t */\n\tpublic uniqueId: string = `${this.constructor.name?.replaceAll?.('$', '')}-${Math.random().toString(36).slice(2, 9)}`;\n\tpublic domRenderRoot = undefined;\n\n\tconstructor() {\n\t\tthis.setupRender();\n\t\t// makeObservable(this);\n\t}\n\n\tsetupRender(): void {\n\t\t//Binding render this way automatically makes our descendant renders covered by observer.\n\t\t//This saves us from having to wrap each render function in observer.\n\t\tconst RenderStoreParentElement = (props?: unknown) => {\n\t\t\tuseComponentDidMount(this.componentDidMount);\n\t\t\tuseComponentDidUpdateAsync(this.componentDidUpdate);\n\t\t\tuseComponentWillUnmount(this.componentWillUnmount);\n\n\t\t\treturn (\n\t\t\t\t\n\t\t\t\t\t{() => this._render(props)}\n\t\t\t\t\n\t\t\t);\n\t\t};\n\t\tthis.render = RenderStoreParentElement;\n\t}\n\n\t_swapContext(renderStore: typeof RenderStore): void {\n\t\tthis.setupRender = renderStore.prototype.setupRender;\n\t\tthis.setupRender();\n\t}\n\n\t/**\n\t * Functions that get called in the react lifecycle of rendering.\n\t */\n\tcomponentDidMount(): void {\n\t\treturn;\n\t}\n\tcomponentDidUpdate(): void {\n\t\treturn;\n\t}\n\tcomponentWillUnmount(): void {\n\t\treturn;\n\t}\n\n\t/**\n\t * ErrorBoundary on error function\n\t */\n\t// biome-ignore lint/correctness/noUnusedVariables: \n\tonErrorBoundaryError = (error: Error, errorInfo: React.ErrorInfo): void => {\n\t\treturn;\n\t};\n\n\t/**\n\t * ErrorBoundary on reset function\n\t */\n\t// biome-ignore lint/correctness/noUnusedVariables: \n\tonErrorBoundaryReset = (error: Error, errorInfo: React.ErrorInfo): void => {\n\t\treturn;\n\t};\n\n\tprivate _render = this.render.bind(this);\n\t/**\n\t * Use to render this store as a component. Takes props like a normal functional component\n\t * but gains the benefit of the context of 'this' store's instance.\n\t * @usage \n\t * @param props takes props like any functional component.\n\t */\n\t// biome-ignore lint/correctness/noUnusedVariables: \n\trender(props: unknown): JSX.Element {\n\t\treturn null;\n\t}\n\n\t/**\n\t * DOM Element that the component is rendered on\n\t */\n\tprivate _DOMElement: Element;\n\trenderOnDOM(elementId: string | Element, props: object, currDocument?: Document): void {\n\t\tthis.unmountDOM();\n\n\t\t//incase document isn't fully loaded a body yet.\n\t\tRunWhen(\n\t\t\t() => {\n\t\t\t\t//if using the same renderstore we should have a domRenderRoot\n\t\t\t\tif (!this.domRenderRoot) {\n\t\t\t\t\t//look for the root from the element itself\n\t\t\t\t\tthis.domRenderRoot = this._DOMElement['__ReactRoot'];\n\t\t\t\t}\n\t\t\t\t//if we still can't find the root then create a new one\n\t\t\t\tif (!this.domRenderRoot) {\n\t\t\t\t\tthis.domRenderRoot = createRoot(this._DOMElement);\n\t\t\t\t}\n\t\t\t\tthis.domRenderRoot.render();\n\n\t\t\t\t//store a reference to the root in the DOM element\n\t\t\t\tthis._DOMElement['__ReactRoot'] = this.domRenderRoot;\n\t\t\t},\n\t\t\t() => {\n\t\t\t\tif (typeof elementId === 'string') {\n\t\t\t\t\tconst doc: Document = currDocument ? currDocument : window.document;\n\t\t\t\t\tthis._DOMElement = doc?.getElementById(elementId);\n\t\t\t\t} else {\n\t\t\t\t\tthis._DOMElement = elementId;\n\t\t\t\t}\n\n\t\t\t\t//add class name to mounting point to apply preflight normalization\n\t\t\t\tAddPreflightClassToElement(this._DOMElement);\n\t\t\t\t//add lato font class\n\t\t\t\tthis._DOMElement.classList.add('font-lato');\n\t\t\t\tthis._DOMElement.classList.add('sh-bg-secondary');\n\t\t\t\tthis._DOMElement.classList.add('sh-text-primary');\n\n\t\t\t\treturn this._DOMElement ? true : false;\n\t\t\t}\n\t\t);\n\t}\n\n\trenderSelfToDOM(currDocument?: Document): any {\n\t\tthis.unmountDOM();\n\n\t\tconst idOfMountedElement = `${this.uniqueId}-render-self`;\n\t\tconst document = currDocument ? currDocument : window.top.document;\n\n\t\t//make sure there isn't a node with the same unique name that we're about to render... unlikely\n\t\tconst mountedElement = document.querySelector(`#${idOfMountedElement}`);\n\t\tif (mountedElement) {\n\t\t\tthis.domRenderRoot?.unmount();\n\t\t}\n\n\t\tconst newMountedElement = document.createElement('div');\n\t\tnewMountedElement.id = idOfMountedElement;\n\t\t//incase document isnt fully loaded a body yet.\n\t\tRunWhen(\n\t\t\t() => {\n\t\t\t\tdocument.body.appendChild(newMountedElement);\n\t\t\t\tthis.renderOnDOM(newMountedElement, null, document);\n\t\t\t},\n\t\t\t() => {\n\t\t\t\tif (document?.body?.appendChild) {\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\treturn false;\n\t\t\t}\n\t\t);\n\n\t\treturn { mountedElement: newMountedElement };\n\t}\n\n\t/**\n\t * This will unmount the component from the DOM, and also remove the DOM node that was created\n\t * If the component isn't mounted, this will not do anything\n\t */\n\tunmountDOM(): boolean {\n\t\tlet success = false;\n\t\tif (this._DOMElement && this.domRenderRoot) {\n\t\t\tthis.domRenderRoot?.unmount();\n\t\t\tthis._DOMElement.remove();\n\t\t\tdelete this._DOMElement;\n\t\t\tconsole.log(`Unmounting component from DOM`);\n\t\t\tsuccess = true;\n\t\t}\n\t\treturn success;\n\t}\n\t//codesandbox with simple anchor example: https://codesandbox.io/s/simple-renderstore-anchor-sample-2u3ij\n\t/**\n\t * link this render store to another render store.\n\t */\n\tpublic anchorStore: () => RenderStore;\n\tprotected isAnchor = false;\n\tpublic anchorLinks: RenderStore[] = []; //anchor links is a useful debugging tool to look through the connected stores.\n\t/**\n\t * Links this RenderStore to another RenderStore higher up through the instance tree.\n\t * @param store This passed in store reference will either pass along an anchor or set itself as the anchor to this render store.\n\t */\n\tpublic linkTo(store: RenderStore): any {\n\t\tif (store.isAnchor) {\n\t\t\t//if the store is set as an anchor then set this anchorStore to retrieve that anchor.\n\t\t\t//the main reason to have a isAnchor instead of just relying on if anchorStore exists is\n\t\t\t//to allow for a store to be an anchor and also have a different anchorStore than itself\n\t\t\t//allowing us to chain back up from anchor to anchor\n\t\t\tthis.anchorStore = () => store;\n\t\t\tstore.anchorLinks.push(this);\n\t\t} else {\n\t\t\t//otherwise decide on if we need to define an anchor store\n\t\t\t//or if we are just passing through the stores anchor store.\n\t\t\tif (!store.anchorStore) {\n\t\t\t\t//if the store passed in doesnt have an anchorStore defined then we should set it as one\n\t\t\t\t//and set this anchorStore to point to that.\n\t\t\t\tstore.isAnchor = true;\n\t\t\t\tstore.anchorStore = () => store;\n\t\t\t\tstore.anchorLinks.push(this);\n\t\t\t\tthis.anchorStore = () => store.anchorStore();\n\t\t\t} else {\n\t\t\t\t//if anchorStore exists on store then just pass through.\n\t\t\t\tthis.anchorStore = () => store.anchorStore();\n\t\t\t}\n\t\t}\n\t\treturn this;\n\t}\n\n\t// ---------------- LEAVING THIS FOR NOW BUT NEEDS REFACTORED ---------------- //\n\t//@todo JTB\n\t//Compatibility with mobile modelbase\n\t//this allows a renderstore to replace a modelbase\n\tonNavigation: any = () => null;\n\tdisplayData(): void {\n\t\t//must override\n\t}\n\n\t// ---------------- LEAVING THIS FOR NOW BUT NEEDS REFACTORED ---------------- //\n\t//@todo JTB\n\t/**\n\t * Storage for cache\n\t */\n\tpublic renderJSXCache: object = {};\n\n\t// ---------------- LEAVING THIS FOR NOW BUT NEEDS REFACTORED ---------------- //\n\t//@todo JTB\n\t/**\n\t * Hook-like functionality to cache renderstore\n\t * @param key\n\t * @param renderJSX\n\t * @returns\n\t */\n\tpublic useRenderStoreMemo = (JSXcallbackFunction: () => JSX.Element, dependancyArray: Array): JSX.Element => {\n\t\tconst serializedkey = JSON.stringify(dependancyArray);\n\t\tif (serializedkey && this.renderJSXCache[serializedkey]) {\n\t\t\treturn this.renderJSXCache[serializedkey];\n\t\t} else {\n\t\t\tif (serializedkey) {\n\t\t\t\tthis.renderJSXCache[serializedkey] = JSXcallbackFunction();\n\t\t\t}\n\t\t\treturn JSXcallbackFunction();\n\t\t}\n\t};\n}\n\n/**\n * A Renderstore with specific overrides relating to a page's lifecycle.\n * This includes automatic loading and error boundary\n */\nexport abstract class PageRenderStore extends RenderStore {\n\t@observable isLoading: LoadingState = LoadingState.Loading;\n\n\tpublic abstract renderOnDone(props: Partial<{ children: JSX.Element | JSX.Element[] }>): JSX.Element;\n\tpublic abstract renderOnLoading?(props: Partial<{ children: JSX.Element | JSX.Element[] }>): JSX.Element;\n\tpublic abstract renderOnError?(props: Partial<{ children: JSX.Element | JSX.Element[] }>): JSX.Element;\n\tpublic abstract renderAlways?(\n\t\tprops: Partial<{ children: JSX.Element | JSX.Element[] }>,\n\t\tcontent: JSX.Element | JSX.Element[]\n\t): JSX.Element;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tmakeObservable(this);\n\t}\n\n\trender(props: never): JSX.Element {\n\t\tlet Content = () => <>;\n\n\t\tswitch (this.isLoading) {\n\t\t\tcase LoadingState.Done:\n\t\t\t\tContent = observer(() => (this.renderOnDone ? this.renderOnDone(props) :
Unconfigured page...
));\n\t\t\t\tbreak;\n\t\t\tcase LoadingState.Loading:\n\t\t\t\t// No Loading State\n\t\t\t\tif (this.renderOnLoading) {\n\t\t\t\t\tthis.isLoading = LoadingState.Done;\n\t\t\t\t}\n\t\t\t\tContent = observer(() => (this.renderOnLoading ? this.renderOnLoading(props) : ));\n\t\t\t\tbreak;\n\t\t\tcase LoadingState.Error:\n\t\t\t\tContent = observer(() => (this.renderOnError ? this.renderOnError(props) :
An error occurred...
));\n\t\t\t\tbreak;\n\t\t}\n\n\t\tconst currentRender = this.renderAlways ? (\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t) : (\n\t\t\t\n\t\t);\n\n\t\treturn currentRender;\n\t}\n}\n\nexport interface LifecycleWrapperProps {\n\tchildren?: any;\n\tcomponentDidMount?: () => void;\n\tcomponentDidUpdate?: () => void;\n\tcomponentWillUnmount?: () => void;\n}\n\n/** Wrapper function for class component react lifecycle functions */\nexport function LifecycleWrapper(props: LifecycleWrapperProps): JSX.Element {\n\tuseComponentDidMount(() => props.componentDidMount?.());\n\tuseComponentDidUpdateAsync(() => props.componentDidUpdate?.());\n\tuseComponentWillUnmount(() => props.componentWillUnmount?.());\n\treturn props.children;\n}\n","import * as React from 'react';\nimport { AppIdType } from '@mst/api/api/SessionApi';\nimport { GetCaptureBody } from '@mst/utils/lib/Capture';\nimport { getFrameOffset } from '@mst/utils/lib/dom/dom';\nimport { Session } from '@mst/global';\n\ntype PortalTargetRetrievalsLookup = { [K in AppIdType]: () => HTMLElement };\n/**Collection of lookups of which app portals to what target typically */\nexport const portalTargetRetrievals: PortalTargetRetrievalsLookup = {\n\tPCR10: () => top.document.querySelector('#main-zone'),\n\tCAPTURE: () => GetCaptureBody(),\n\tPCR9: () => top.document.body,\n\tMOBILE: () => top.document.body,\n\tSTORYBOOK: () => window.document.body\n};\n/**\n * Grabs \"main\" element for one of our defined applicatations. See PortalTargetRetrievalsLookup for more details of which targets map to which app.\n * @param portalTargetOverride set your own portal target and choose your own adventures.\n * @returns the target element desired to portal to.\n */\nexport function useAppPortalTarget(\n\tportalTargetOverride?: HTMLElement,\n\twindowOverride?: Window\n): {\n\ttargetPortalElement: HTMLElement;\n\tsetTargetPortalElement: React.Dispatch>;\n\ttargetPortalElementRect: DOMRect;\n\ttargetPortalElementBodyRect: DOMRect;\n\ttargetPortalElementWindow: Window;\n\twin: Window;\n\twinH: number;\n\twinW: number;\n\twinX: number;\n\twinY: number;\n} {\n\tconst [targetPortalElement, setTargetPortalElement] = React.useState(\n\t\tportalTargetOverride ?? portalTargetRetrievals?.[Session.appId]?.() ?? top.document.body\n\t);\n\tconst [win, setWin] = React.useState(windowOverride ?? window);\n\tconst [winH, setWinH] = React.useState(win.innerHeight);\n\tconst [winW, setWinW] = React.useState(win.innerWidth);\n\tconst [winX, setWinX] = React.useState(0);\n\tconst [winY, setWinY] = React.useState(0);\n\t//when the window resizes we want to trigger a reset of offset calculation, this is where winH and winW change and then get passed in as dependencies in the next hook.\n\tReact.useEffect(() => {\n\t\tconst handleResize = () => {\n\t\t\tsetWin(windowOverride ?? window);\n\t\t\tsetWinH(window.innerHeight);\n\t\t\tsetWinW(window.innerWidth);\n\t\t};\n\t\tconst handleMouseOver = () => {\n\t\t\tconst boundingClientIFrame = win.frameElement?.getBoundingClientRect();\n\t\t\tif (boundingClientIFrame) {\n\t\t\t\tsetWinX(boundingClientIFrame.x);\n\t\t\t\tsetWinY(boundingClientIFrame.y);\n\t\t\t}\n\t\t};\n\t\twindow.addEventListener('resize', handleResize);\n\t\twindow.addEventListener('mouseover', handleMouseOver);\n\t\treturn () => {\n\t\t\twindow.removeEventListener('resize', handleResize);\n\t\t\twindow.removeEventListener('mouseover', handleMouseOver);\n\t\t};\n\t}, []);\n\n\tconst targetPortalElementRect = React.useMemo(\n\t\t() => targetPortalElement.getBoundingClientRect(),\n\t\t[targetPortalElement, winH, winW, winY, winX]\n\t);\n\tconst targetPortalElementBodyRect = React.useMemo(\n\t\t() => targetPortalElement.ownerDocument.body.getBoundingClientRect(),\n\t\t[targetPortalElement, winH, winW, winY, winX]\n\t);\n\tconst targetPortalElementWindow = React.useMemo(\n\t\t() => targetPortalElement.ownerDocument.defaultView,\n\t\t[targetPortalElement, winH, winW, winY, winX]\n\t);\n\n\treturn {\n\t\ttargetPortalElement,\n\t\tsetTargetPortalElement,\n\t\ttargetPortalElementRect,\n\t\ttargetPortalElementBodyRect,\n\t\ttargetPortalElementWindow,\n\t\twin,\n\t\twinH,\n\t\twinW,\n\t\twinX,\n\t\twinY\n\t};\n}\n\n/**\n * Build out parts for portalling across our different applications. What to target, and how to get the offsets depending on application id.\n * @returns an object holding information on an element to target when portalling and additional info regarding offset positioning relative to the iframe this may be in or even iframe nested in.\n */\nexport function usePortalOffset(props?: { portalTargetOverride?: HTMLElement; windowOverride?: Window }): {\n\t/**Typically offset from the top.document.body element in the horizonal plane */\n\txFrameOffset: number;\n\t/**Typically offset from the top.document.body element in the vertical plane */\n\tyFrameOffset: number;\n\t/**Target element in which we want to portal to. Different per appid */\n\ttargetPortalElement: HTMLElement;\n\ttargetPortalElementRect: DOMRect;\n\ttargetPortalElementBodyRect: DOMRect;\n\ttargetPortalElementWindow: Window;\n} {\n\tconst portalTargetOverride = props?.portalTargetOverride;\n\tconst [xOffset, setXOffset] = React.useState(0);\n\tconst [yOffset, setYOffset] = React.useState(0);\n\n\tconst {\n\t\ttargetPortalElement,\n\t\ttargetPortalElementRect,\n\t\ttargetPortalElementBodyRect,\n\t\ttargetPortalElementWindow,\n\t\twin,\n\t\twinH,\n\t\twinW,\n\t\twinX,\n\t\twinY\n\t} = useAppPortalTarget(portalTargetOverride, props.windowOverride);\n\n\tReact.useEffect(() => {\n\t\t//setting up as variables and not directly setting our react state hooks so if we need to add additional tweaks for additional\n\t\t//offset then we can just append onto the stack of summing of offsets.\n\t\tlet startingXOffset = 0;\n\t\tlet startingYOffset = 0;\n\n\t\t//find any iframe offset, we know we are in an iframe if we are not the top window. The getFrameOffset function will crawl through any\n\t\t//nested iframes all the way up to top.document.body and sum the total offset for a given side.\n\t\t//IMPORTANT: CAPTURE win is not the iframe its rendering in but instead the root page that is being captured.\n\t\tif (win !== top && targetPortalElementWindow === top) {\n\t\t\tstartingXOffset += getFrameOffset(win.document.body, 'left');\n\t\t\tstartingYOffset += getFrameOffset(win.document.body, 'top');\n\t\t}\n\n\t\tsetXOffset(startingXOffset);\n\t\tsetYOffset(startingYOffset);\n\t}, [win, targetPortalElement, winH, winW, winX, winY, portalTargetOverride]);\n\n\treturn {\n\t\txFrameOffset: xOffset,\n\t\tyFrameOffset: yOffset,\n\t\ttargetPortalElement,\n\t\ttargetPortalElementRect,\n\t\ttargetPortalElementBodyRect,\n\t\ttargetPortalElementWindow\n\t};\n}\n","import * as React from 'react';\nimport { observer } from 'mobx-react';\nimport { AlertProps } from './types';\nimport { Button } from '../Button/Button';\nimport { Icon } from '../Icon';\n\nexport const Alert = observer((props: AlertProps): React.ReactElement => {\n\tconst { title, text, color = 'info', icon = 'star', onConfirm, onCancel, disableCancel } = props;\n\n\tconst buttonColor = color === 'danger' ? 'error' : color;\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
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t{title}\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{text}\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\n\t\t\t
\n\t\t\t\t{!disableCancel &&
\n\t\t\n\t);\n});\n","export const DEFAULT_DELAY_DURATION = 300;\r\n","import * as React from 'react';\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IRootProps, ITriggerProps, IContentProps, IArrowProps, SimpleTooltipProps } from './types';\nimport { DEFAULT_DELAY_DURATION } from './constants';\nimport { usePortalOffset } from '../Hooks/UsePortalOffset';\n\n/**\n * Example usage of building out a tooltip\n * @returns a tooltip with a trigger and content\n */\nexport function Example(): React.JSX.Element {\n\tconst { Root, Trigger, Content, Arrow } = createTooltipComponents();\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t
Hover me for a bit for a tooltip
\n\t\t\t
\n\t\t\t\n\t\t\t\t
I say hello to thee
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t);\n}\n\n/**\n * A SimpleTooltip component that wraps a trigger component and displays a string of text when trigger is interacted.\n * @NOTE - DO NOT MODIFY, USE THE createTooltipComponents() OR IMPORT DIRECTLY PARTS IF YOU NEED SOME OTHER TOOLTIP VARIETY!\n * @param portal - (optional) An HTML Element which determines where the tooltip will be mounted.\n * @param children - Child component that triggers the tooltip when interacted. If your child is a span that needs to truncate text then try asChild prop.\n * @param text - The contents (a string) to be displayed in the tooltip. DO NOT USE JSX AS TEXT VALUE\n * @returns a Tooltip component\n */\nexport const SimpleTooltip: React.FC = ({\n\tportal,\n\tchildren,\n\ttext,\n\ticon,\n\ticonPosition,\n\tside,\n\tasChild\n}: SimpleTooltipProps): React.JSX.Element => {\n\tconst { Root, Trigger, Content } = createTooltipComponents();\n\treturn (\n\t\t\n\t\t\t{asChild ? children :
{children}
}
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{text}\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t);\n};\n\nSimpleTooltip.displayName = 'SimpleTooltip';\n\n/**\n * Creates a tooltip Root, Trigger, and Content components for use in a tooltip\n * @returns an object with the tooltip components\n * @example const { Root, Trigger, Content } = createTooltipComponents();\n */\nexport function createTooltipComponents(): {\n\tRoot: React.FC;\n\tTrigger: (props: ITriggerProps) => React.JSX.Element;\n\tContent: React.FC;\n\tArrow: (props: IArrowProps) => React.JSX.Element;\n} {\n\treturn {\n\t\tRoot,\n\t\tTrigger,\n\t\tContent,\n\t\tArrow\n\t};\n}\n\n/**\n * Base node for building a tooltip\n * @param {IRootProps} props\n * @returns Root node for tooltip component\n */\nexport function Root(props: IRootProps): React.JSX.Element {\n\tconst childrenList = React.Children.toArray(props.children);\n\tconst triggerSlot = childrenList.find((child: React.ReactNode) => React.isValidElement(child) && child.type === Trigger);\n\tconst contentSlot = childrenList.find((child: React.ReactNode) => React.isValidElement(child) && child.type === Content);\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t{triggerSlot}\n\t\t\t\t{contentSlot}\n\t\t\t\n\t\t\n\t);\n}\n\nRoot.displayName = 'TooltipRoot';\n\n/**\n * Element that triggers the tooltip to open on hover\n * @param {ITriggerProps} props\n * @returns Trigger node for tooltip component\n */\nexport function Trigger(props: ITriggerProps): React.JSX.Element {\n\treturn (\n\t\t\n\t\t\t{props.children}\n\t\t\n\t);\n}\n\n/**\n * Content that shows when tooltip is open\n * @param {IContentProps} props\n * @returns Content node for tooltip component\n */\nexport const Content = (props: IContentProps): React.JSX.Element => {\n\tconst { children, portal, sideOffset, alignOffset, side, align, icon, iconPosition = 'left' } = props;\n\tconst childrenList = React.Children.toArray(children);\n\tconst arrowSlot = childrenList.find((child: React.JSX.Element) => child.type === Arrow);\n\tconst { targetPortalElement, xFrameOffset, yFrameOffset } = usePortalOffset({ portalTargetOverride: portal });\n\tconst [totalSideOffset, setTotalSideOffset] = React.useState(0);\n\tconst [totalAlignOffset, setTotalAlignOffset] = React.useState(0);\n\n\t//sync offsets from props\n\tReact.useEffect(() => {\n\t\tsetTotalSideOffset(sideOffset || 0);\n\t\tsetTotalAlignOffset(alignOffset || 0);\n\t}, [sideOffset, alignOffset]);\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t<>\n\t\t\t\t\t{icon && iconPosition === 'left' &&
}\n\t\t\t\t\t{children}\n\t\t\t\t\t{icon && iconPosition === 'right' &&
}\n\t\t\t\t\n\t\t\t\t{arrowSlot}\n\t\t\t\n\t\t\n\t);\n};\n\n/**\n * Arrow part of the tooltip. Leave out to hide.\n * @param {IArrowProps} props\n * @returns Arrow node for tooltip component\n */\nexport function Arrow(props: IArrowProps): React.JSX.Element {\n\treturn ;\n}\n","import { BaseSize } from '../../types';\nimport { StyleGenerator } from './types';\n\n/**\n * Calculate avatar size based on provided size parameter\n * @param {string} size - The size parameter (\"sm\", \"md\", \"lg\", \"xl\")\n * @returns {number} The calculated avatar size in pixels\n */\nexport const getAvatarSize = (size: BaseSize | undefined): number => {\n\tswitch (size) {\n\t\tcase 'xs':\n\t\t\treturn 28;\n\t\tcase 'sm':\n\t\t\treturn 44;\n\t\tcase 'md':\n\t\tcase 'base':\n\t\t\treturn 60;\n\t\tcase 'lg':\n\t\t\treturn 92;\n\t\tcase 'xl':\n\t\t\treturn 120;\n\t\tdefault:\n\t\t\treturn 44;\n\t}\n};\n/**\n * Calculate icon size based on provided size parameter\n * @param {string} size - The size parameter (\"sm\", \"md\", \"lg\", \"xl\")\n * @returns {number} The calculated avatar size in pixels\n */\nexport const getIconSize = (size: BaseSize | undefined): number => {\n\tswitch (size) {\n\t\tcase 'xs':\n\t\t\treturn 12;\n\t\tcase 'sm':\n\t\t\treturn 20;\n\t\tcase 'md':\n\t\tcase 'base':\n\t\t\treturn 24;\n\t\tcase 'lg':\n\t\t\treturn 38;\n\t\tdefault:\n\t\t\treturn 24;\n\t}\n};\n\n/**\n * Calculate username size based on provided size parameter\n */\nexport const getUserNameSize = (size: BaseSize | undefined): string => {\n\tswitch (size) {\n\t\tcase 'xs':\n\t\t\treturn '2xs';\n\t\tcase 'sm':\n\t\t\treturn 'sm';\n\t\tcase 'md':\n\t\t\treturn 'md';\n\t\tcase 'lg':\n\t\tcase 'xl':\n\t\t\treturn '2xl';\n\t\tdefault:\n\t\t\treturn 'xs';\n\t}\n};\n\n/**\n * Get the image source URL based on the provided source\n * @param {string} src - The source URL of the image, as a 64bit encoded string.\n * @returns {string} The image source URL\n */\nexport const getImageSrc = (src: string): string => {\n\tif (!src) {\n\t\treturn null;\n\t}\n\tif (src.startsWith('http') || src.startsWith('data:image')) {\n\t\treturn src;\n\t}\n\n\treturn `data:image/png;base64,${src}`;\n};\n\n/**\n * Get the initials of the username\n * @param {string} username - The name of the user.\n * @returns {string} The initials of the username\n */\nexport const getInitials = (username: string): string => {\n\tif (!username) {\n\t\treturn ''; // return an empty string if username is not defined or empty\n\t}\n\n\tconst matches = username.match(/\\b\\w/g) || [];\n\n\tif (matches.length <= 1) {\n\t\t// If there's one or no words, return the first two characters\n\t\treturn username.slice(0, 2).toUpperCase();\n\t} else {\n\t\t// Otherwise, return the first character of the first word and the first character of the last word\n\t\treturn (matches[0] + matches[matches.length - 1]).toUpperCase();\n\t}\n};\n\n/**\n * Returns a style generator function based on the styleGenerator function provided\n * If the style input is not provided, it returns a default value\n *\n * @param {StyleGenerator} styleGenerator - Function that generates the style\n * @param {string} defaultValue - Default value for the style\n * @returns {function} - Function that generates the style\n */\nexport const styleFactory =\n\t(styleGenerator: StyleGenerator, defaultValue: string = ''): any =>\n\t(...styleInput: any[]) =>\n\t\tstyleInput.length ? styleGenerator(...styleInput) : defaultValue;\n","import * as React from 'react';\n\ntype ImageContentProps = {\n\timgSrc: string;\n\tavatarSize: number;\n\tonError: () => void;\n};\n\n/**\n * ImageContent Component\n * Renders the image based on the source\n *\n * @param {Object} props - Props for ImageContent component\n * @param {string} props.imgSrc - The image source URL\n * @param {number} props.avatarSize - The size of the avatar\n * @returns {React.JSX.Element} - Returns the JSX for the ImageContent component\n */\nexport const ImageContent: React.FC = ({\n\timgSrc,\n\tavatarSize,\n\tonError\n}: ImageContentProps): React.JSX.Element => (\n\t\n);\n","import * as React from 'react';\n\nimport { BaseSize } from '../../../types';\nimport { Icon, UnionIconAlias } from '../../Icon';\nimport { getIconSize } from '../utils';\n\n/**\n * IconContent Component\n * Renders the icon\n *\n * @param {Object} props - Props for IconContent component\n * @param {BaseSize} props.size - The size of the icon content\n * @param {string} props.icon - The icon name\n * @returns {React.JSX.Element} - Returns the JSX for the IconContent component\n */\nexport const IconContent = ({ size, icon }: { size: BaseSize; icon: string }): React.JSX.Element => {\n\treturn (\n\t\t
\n\t\t\t\n\t\t
\n\t);\n};\n","import * as React from 'react';\n\ninterface UsernameContentProps {\n\tusernameSize: string;\n\tinitials: string;\n}\n\n/**\n * UsernameContent Component\n * Renders the username initials\n *\n * @param {Object} props - Props for UsernameContent component\n * @param {string} props.usernameSize - The size of the username\n * @param {string} props.initials - The username initials\n * @returns {React.JSX.Element} - Returns the JSX for the UsernameContent component\n */\nexport const UsernameContent = ({ usernameSize, initials }: UsernameContentProps): React.JSX.Element => (\n\t
\n\t\t{initials}\n\t
\n);\n","import { ImageContent } from './ImageContent';\nimport { IconContent } from './IconContent';\nimport { UsernameContent } from './UsernameContent';\n\nexport const ContentType = {\n\tImageContent,\n\tIconContent,\n\tUsernameContent\n};\n","import * as React from 'react';\nimport { RecordPhotoProps } from './types';\nimport { getAvatarSize, getImageSrc, getInitials, getUserNameSize, styleFactory } from './utils';\nimport { ContentType } from './components/ContentType';\nimport { Icon } from '../Icon';\n\n/**\n * RecordPhoto Component\n * Renders the avatar with a photo, icon, or initials based on the passed props.\n *\n * @param {RecordPhotoProps} props - Props for RecordPhoto component\n */\nexport const RecordPhoto = ({\n\trecordName,\n\timgSrc,\n\ticon,\n\tonClick,\n\tsize = 'xs',\n\tcolor = 'name',\n\tvariant = 'shaded',\n\tonMouseEnter,\n\tonMouseLeave,\n\tuseOverlay,\n\toverlayIcon\n}: RecordPhotoProps) => {\n\t// Generate avatar and recordName size based on the size prop\n\tconst avatarSize = React.useMemo(() => getAvatarSize(size), [size]);\n\tconst usernameSize = React.useMemo(() => getUserNameSize(size), [size]);\n\n\t// Generate image source and initials based on the imgSrc and recordName props\n\tconst getImgSrc = React.useMemo(() => getImageSrc(imgSrc), [imgSrc]);\n\tconst initials = React.useMemo(() => getInitials(recordName), [recordName]);\n\n\t// Generate styles based on props\n\tconst generateAvatarSizeStyle = (avatarSize: number): string => `w-[${avatarSize}px] h-[${avatarSize}px]`;\n\n\t// Generate style getters\n\tconst getAvatarSizeStyle = styleFactory(generateAvatarSizeStyle);\n\n\t// Common style for all components\n\tconst commonStyle =\n\t\t'border-0 flex items-center justify-center rounded-full group overflow-hidden transition-all duration-300 ease-in-out';\n\n\t// Get styles based on props\n\tconst avatarSizeStyle = getAvatarSizeStyle(avatarSize);\n\n\tconst variantStyle = `component-recordphoto-${variant}-${color}`;\n\n\tconst overlayVariantClass = `component-recordphoto-${variant}-${color}-overlay`;\n\tlet overlayIconToUse = overlayIcon;\n\tif (overlayIconToUse === undefined) {\n\t\t//default fallback for simple use in editing a record photo\n\t\tif (imgSrc) {\n\t\t\toverlayIconToUse = 'pencil';\n\t\t} else {\n\t\t\toverlayIconToUse = 'upload';\n\t\t}\n\t}\n\n\t// Generate button style based on props and styles\n\tconst recordPhotoStyles = [commonStyle, avatarSizeStyle, variantStyle, onClick ? 'cursor-pointer' : ''].join(' ');\n\n\t// State for handling image loading error\n\tconst [imgError, setImgError] = React.useState(false);\n\n\t// Error handler for image loading\n\tconst handleError = () => {\n\t\tsetImgError(true);\n\t};\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t{/* Display content based on the available props */}\n\t\t\t\t{/* specificity: imgSrc > icon > variant > recordName */}\n\t\t\t\t{imgSrc && !imgError ? (\n\t\t\t\t\t\n\t\t\t\t) : icon ? (\n\t\t\t\t\t\n\t\t\t\t) : (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t
\n\t\t\t{useOverlay && (\n\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\n\t\t\t\t\n\t\t\t)}\n\t\t\n\t);\n};\n","import * as React from 'react';\nimport { SimpleTooltip } from '@mst/ui/lib/Tooltip';\nimport { Icon } from '@mst/ui/lib/Icon';\nimport { OptionProps } from 'react-select';\nimport { RecordPhoto } from '@mst/ui/lib/RecordPhoto/RecordPhoto';\nimport { RecordMenuItemProps as CustomOptionProps } from './types';\n\ntype RecordMenuItemProps = OptionProps<{ customOptionProps: CustomOptionProps; value: string; __isNew__?: boolean }>;\n\n/**\n * A component specific to rollup fuzzy searches - Adds the 'create new' message to an empty list of options for a rollup fuzzy search.\n */\nexport function RollupMenuItem(props: RecordMenuItemProps): JSX.Element {\n\tconst { data, options } = props;\n\n\t/** If a new option then return the custom new option create component. */\n\tconst isNew = data.__isNew__;\n\n\tif (isNew) {\n\t\treturn (\n\t\t\t
\n\t\t\t\t{options.length === 1 &&
No results
}\n\t\t\t\t
Create new rollup \"{data.value.trim()}\"
\n\t\t\t
\n\t\t);\n\t} else {\n\t\treturn ;\n\t}\n}\n\n/**\n * A more advanced menu item for dropdown selects. Shows a record photo if the recordPhotoType prop is provided.\n * recordName and recordPrimaryText form the first line of the option.\n * If recordSecondaryText is provided, it will be shown as a second line with softer text styles.\n */\nexport function RecordMenuItem(props: RecordMenuItemProps): JSX.Element {\n\tconst { data } = props;\n\n\t/** The data object passed into the custom option component. */\n\tif (!data.customOptionProps) {\n\t\treturn null;\n\t}\n\n\tconst {\n\t\trecordPhotoType: type,\n\t\timage,\n\t\tisRecentRecord,\n\t\trecordName,\n\t\trecordPrimaryText,\n\t\trecordSecondaryText\n\t} = data.customOptionProps;\n\n\t//ref for first line of text in menu item\n\tconst primaryTextRef: React.MutableRefObject = React.useRef();\n\t//ref for second line of text in menu item\n\tconst secondaryTextRef: React.MutableRefObject = React.useRef();\n\n\tconst [showTooltip, setShowTooltip] = React.useState(false);\n\n\t/** Primary text of the option. */\n\tconst primaryText = `${recordName} ${recordPrimaryText ? `| ${recordPrimaryText}` : ''}`;\n\n\t//If either line of text will overflow, show the tooltip\n\tReact.useEffect(() => {\n\t\tsetShowTooltip(\n\t\t\tprimaryTextRef.current?.offsetWidth < primaryTextRef.current?.scrollWidth ||\n\t\t\t\tsecondaryTextRef.current?.offsetWidth < secondaryTextRef.current?.scrollWidth\n\t\t);\n\t}, []);\n\n\t/** Content of the option. */\n\tconst content = (\n\t\t
\n\t\t\t{isRecentRecord && (\n\t\t\t\t
\n\t\t\t\t\t{' '}\n\t\t\t\t
\n\t\t\t)}\n\t\t\t{type && (\n\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\t\t
\n\t\t\t\t\t{primaryText}\n\t\t\t\t
\n\t\t\t\t{recordSecondaryText && (\n\t\t\t\t\t
\n\t\t\t\t\t\t{recordSecondaryText}\n\t\t\t\t\t
\n\t\t\t\t)}\n\t\t\t
\n\t\t
\n\t);\n\n\treturn showTooltip ? (\n\t\t\n\t\t\t\t\t{primaryText}\n\t\t\t\t\t
\n\t\t\t\t\t{recordSecondaryText}\n\t\t\t\t\n\t\t\t}\n\t\t>\n\t\t\t{content}\n\t\t\n\t) : (\n\t\tcontent\n\t);\n}\n","import { FuzzyRecord, RecordMenuItemProps } from './types';\nimport { FieldRecordType } from '@mst/api/models/ConfiguredField';\nimport { FieldValuesLookupMode } from '@mst/api/models/generated/FieldValuesLookupMode';\nimport { BasicResponse } from '@mst/api/api/base/response/BasicResponse';\nimport { IOption } from '@mst/api/models/GlobalEnums';\nimport { RecordType } from '@mst/api/models/RecordType';\nimport { CandidateRecordV2 } from '@mst/api/models/CandidateRecord';\nimport { CompanyRecordV2 } from '@mst/api/models/CompanyRecord';\nimport { PositionRecordV2 } from '@mst/api/models/PositionRecord';\nimport { RollupListRecord } from '@mst/api/models/RollupListRecord';\nimport { CandidateApiV2 } from '@mst/api/api/CandidateApi';\nimport { CompanyApiV2 } from '@mst/api/api/CompanyApi';\nimport { PositionApiV2 } from '@mst/api/api/PositionApi';\nimport { ProfileTemplateApi } from '@mst/api/api/ProfileTemplateApi';\nimport { RollupListsApi } from '@mst/api/api/RollupListsApi';\nimport { RecentlyViewedApi } from '@mst/api/api/RecentlyViewedApi';\nimport { ProfileTemplate } from '@mst/api/models/generated/ProfileTemplate';\nimport { RollupMenuItem } from './RecordMenuItem';\nimport { FieldInput_SelectProps } from '../FieldInput_Select';\nimport { UserNameApi } from '@mst/api/api/UserNameApi';\nimport User from '@mst/api/models/User';\nimport { escapeQueryValue } from '@mst/api/api/base/BasePcrApi';\n\n/**\n * A collection of API instances used by the fuzzy record lookup component.\n */\nconst Api: {\n\tcandidateApiV2: CandidateApiV2;\n\tcompanyApiV2: CompanyApiV2;\n\tpositionApiV2: PositionApiV2;\n\tprofileTemplateApi: ProfileTemplateApi;\n\trollupListsApi: RollupListsApi;\n\trecentlyViewedApi: RecentlyViewedApi;\n\tusernameApi: UserNameApi;\n} = {\n\tcandidateApiV2: new CandidateApiV2(),\n\tcompanyApiV2: new CompanyApiV2(),\n\tpositionApiV2: new PositionApiV2(),\n\tprofileTemplateApi: new ProfileTemplateApi(),\n\trollupListsApi: new RollupListsApi(),\n\trecentlyViewedApi: new RecentlyViewedApi(),\n\tusernameApi: new UserNameApi()\n};\n\n/** Empty response for the searchLookup function. */\nexport const empty_response: BasicResponse<[]> = {\n\tdata: [],\n\ttotalRecords: 0,\n\tfromCache: undefined,\n\theaders: undefined,\n\terror: undefined,\n\tstatus: 200\n};\n\n/**\n * A collection of SearchLookup settings. All return the universal 'label' for the record and the record's ID.\n * These searchLookup functions also return extra data for the RecordMenuItem custom option component.\n * YOU MUST PASS THE 'disableStockFiltering' to your select to search on any data that is NOT in the label for each option.\n */\nexport const FuzzySearchLookups = {\n\tname: async (\n\t\tdetails: { searchValue: string; page: number },\n\t\tfilterQuery?: string,\n\t\tdisableRecentlyViewed?: boolean\n\t): Promise> => {\n\t\tconst { searchValue, page } = details;\n\n\t\tlet response: BasicResponse;\n\n\t\t//If nothing has been entered yet, try recent records\n\t\tif (!searchValue) {\n\t\t\tif (!disableRecentlyViewed) {\n\t\t\t\tconst recentlyViewedRecords = await Api.recentlyViewedApi.getRecentlyViewed(RecordType.Name);\n\n\t\t\t\tif (recentlyViewedRecords?.candidates?.length) {\n\t\t\t\t\tresponse = await Api.candidateApiV2.getMultiple(recentlyViewedRecords.candidates.slice(0, 4), 'CandidateId', {\n\t\t\t\t\t\tquery: filterQuery,\n\t\t\t\t\t\tfields: 'FirstName, LastName, PhotographThumb, CandidateId, Title, EmailAddress, MobilePhone, CompanyId'\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (disableRecentlyViewed && filterQuery) {\n\t\t\t\tresponse = await Api.candidateApiV2.search({\n\t\t\t\t\tquery: filterQuery,\n\t\t\t\t\tpage: page > 0 ? page : 1,\n\t\t\t\t\tfields: 'FirstName, LastName, PhotographThumb, CandidateId, Title, EmailAddress, MobilePhone, CompanyId'\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tif (!response) {\n\t\t\t\tresponse = empty_response;\n\t\t\t}\n\t\t}\n\n\t\t//Else, do fuzzy search\n\t\telse {\n\t\t\tlet query = '';\n\t\t\tconst escapedValue = escapeQueryValue(searchValue);\n\t\t\tconst firstorlast = escapedValue?.trim().split(' ');\n\t\t\tif (firstorlast.length > 1) {\n\t\t\t\tquery = `(FirstName sw '${firstorlast[0]}' AND LastName sw '${firstorlast.slice(1).join(' ')}')`;\n\t\t\t} else {\n\t\t\t\tquery = `LastName sw '${escapedValue}' OR FirstName sw '${escapedValue}'`;\n\t\t\t}\n\t\t\tif (escapedValue?.startsWith('@') && escapedValue.length > 1) {\n\t\t\t\tquery += ` OR EmailAddress co '${escapedValue}'`;\n\t\t\t} else {\n\t\t\t\tquery += ` OR EmailAddress sw '${escapedValue}'`;\n\t\t\t}\n\n\t\t\tquery += ` OR Title co '${escapedValue}' OR MobilePhone sw '${escapedValue}'`;\n\n\t\t\tif (filterQuery) {\n\t\t\t\tquery = `${filterQuery} AND (${query})`;\n\t\t\t}\n\n\t\t\tresponse = await Api.candidateApiV2.search({\n\t\t\t\tquery,\n\t\t\t\tpage: page > 0 ? page : 1,\n\t\t\t\tfields: 'FirstName, LastName, PhotographThumb, CandidateId, Title, EmailAddress, MobilePhone, CompanyId'\n\t\t\t});\n\t\t}\n\n\t\treturn {\n\t\t\t...response,\n\t\t\tdata: response.data?.map(record => {\n\t\t\t\tlet secondaryText = '';\n\t\t\t\tif (record.EmailAddress && record.MobilePhone) {\n\t\t\t\t\tsecondaryText = `${record.EmailAddress} | ${record.MobilePhone}`;\n\t\t\t\t} else {\n\t\t\t\t\tsecondaryText = record.EmailAddress ?? record.MobilePhone ?? '';\n\t\t\t\t}\n\t\t\t\t//return normal option which ALSO includes props for the custom option component\n\t\t\t\treturn {\n\t\t\t\t\tlabel: record.fullName,\n\t\t\t\t\tvalue: record.CandidateId,\n\t\t\t\t\tcustomOptionProps: {\n\t\t\t\t\t\tisRecentRecord: !searchValue && !disableRecentlyViewed,\n\t\t\t\t\t\trecordPhotoType: 'name',\n\t\t\t\t\t\trecordName: record.fullName,\n\t\t\t\t\t\timage: record.PhotographThumb,\n\t\t\t\t\t\trecordPrimaryText: record.Title,\n\t\t\t\t\t\trecordSecondaryText: secondaryText,\n\t\t\t\t\t\trecord\n\t\t\t\t\t} as RecordMenuItemProps\n\t\t\t\t};\n\t\t\t})\n\t\t};\n\t},\n\tcompany: async (\n\t\tdetails: { searchValue: string; page: number },\n\t\tfilterQuery?: string,\n\t\tdisableRecentlyViewed?: boolean\n\t): Promise> => {\n\t\tconst { searchValue, page } = details;\n\n\t\tlet response: BasicResponse;\n\n\t\t//If nothing has been entered yet, try recent records\n\t\tif (!searchValue) {\n\t\t\tif (!disableRecentlyViewed) {\n\t\t\t\tconst recentlyViewedRecords = await Api.recentlyViewedApi.getRecentlyViewed(RecordType.Company);\n\t\t\t\tif (recentlyViewedRecords?.companies?.length) {\n\t\t\t\t\tresponse = await Api.companyApiV2.getMultiple(recentlyViewedRecords.companies.slice(0, 4), 'CompanyId', {\n\t\t\t\t\t\tquery: filterQuery,\n\t\t\t\t\t\tfields: 'CompanyName, CompanyId, Logo, Industry, Specialty, City, State'\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (disableRecentlyViewed && filterQuery) {\n\t\t\t\tresponse = await Api.companyApiV2.search({\n\t\t\t\t\tquery: filterQuery,\n\t\t\t\t\tpage: page,\n\t\t\t\t\tfields: 'CompanyName, CompanyId, Logo, Industry, Specialty, City, State'\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tif (!response) {\n\t\t\t\tresponse = empty_response;\n\t\t\t}\n\t\t}\n\n\t\t//Else, do fuzzy search\n\t\telse {\n\t\t\tconst escapedValue = escapeQueryValue(searchValue);\n\t\t\tlet query = `CompanyName co '${escapedValue}' OR City sw '${escapedValue}' OR State sw '${escapedValue}' OR Industry co '${escapedValue}' OR Specialty co '${escapedValue}'`;\n\n\t\t\tif (filterQuery) {\n\t\t\t\tquery = `${filterQuery} AND (${query})`;\n\t\t\t}\n\n\t\t\tresponse = await Api.companyApiV2.search({\n\t\t\t\tquery: query,\n\t\t\t\tpage: page,\n\t\t\t\tfields: 'CompanyName, CompanyId, Logo, Industry, Specialty, City, State'\n\t\t\t});\n\t\t}\n\n\t\treturn {\n\t\t\t...response,\n\t\t\tdata: response.data?.map(record => {\n\t\t\t\tlet primaryText = '';\n\t\t\t\tif (record.Industry && record.Specialty) {\n\t\t\t\t\tprimaryText = `${record.Industry} | ${record.Specialty}`;\n\t\t\t\t} else {\n\t\t\t\t\tprimaryText = record.Industry ?? record.Specialty ?? '';\n\t\t\t\t}\n\n\t\t\t\tlet secondaryText = '';\n\n\t\t\t\tif (record.City && record.State) {\n\t\t\t\t\tsecondaryText = `${record.City}, ${record.State}`;\n\t\t\t\t} else {\n\t\t\t\t\tsecondaryText = record.City ?? record.State ?? '';\n\t\t\t\t}\n\n\t\t\t\t//return normal option which ALSO includes props for the custom option component\n\t\t\t\treturn {\n\t\t\t\t\tlabel: record.CompanyName,\n\t\t\t\t\tvalue: record.CompanyId,\n\t\t\t\t\tcustomOptionProps: {\n\t\t\t\t\t\tisRecentRecord: !searchValue && !disableRecentlyViewed,\n\t\t\t\t\t\trecordPhotoType: 'company',\n\t\t\t\t\t\trecordName: record.CompanyName,\n\t\t\t\t\t\timage: record.Logo,\n\t\t\t\t\t\trecordPrimaryText: primaryText,\n\t\t\t\t\t\trecordSecondaryText: secondaryText,\n\t\t\t\t\t\trecord\n\t\t\t\t\t} as RecordMenuItemProps\n\t\t\t\t};\n\t\t\t})\n\t\t};\n\t},\n\tposition: async (\n\t\tdetails: { searchValue: string; page: number },\n\t\tfilterQuery?: string,\n\t\tdisableRecentlyViewed?: boolean\n\t): Promise> => {\n\t\tconst { searchValue, page } = details;\n\n\t\tlet response: BasicResponse;\n\n\t\t//If nothing has been entered yet, try recent records\n\t\tif (!searchValue) {\n\t\t\tif (!disableRecentlyViewed) {\n\t\t\t\tconst recentlyViewedRecords = await Api.recentlyViewedApi.getRecentlyViewed(RecordType.Position);\n\n\t\t\t\tif (recentlyViewedRecords?.positions?.length) {\n\t\t\t\t\tresponse = await Api.positionApiV2.getMultiple(recentlyViewedRecords.positions.slice(0, 4), 'JobId', {\n\t\t\t\t\t\tquery: filterQuery,\n\t\t\t\t\t\tfields: 'JobTitle, JobId, PositionId, Logo, Company.CompanyName, City, State'\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (disableRecentlyViewed && filterQuery) {\n\t\t\t\tresponse = await Api.positionApiV2.search({\n\t\t\t\t\tquery: filterQuery,\n\t\t\t\t\tpage: page,\n\t\t\t\t\tfields: 'JobTitle, JobId, PositionId, Logo, Company.CompanyName, City, State'\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tif (!response) {\n\t\t\t\tresponse = empty_response;\n\t\t\t}\n\t\t}\n\n\t\t//Else, do fuzzy search\n\t\telse {\n\t\t\tconst escapedValue = escapeQueryValue(searchValue);\n\t\t\tlet query = `JobTitle co '${escapedValue}' OR Company.CompanyName co '${escapedValue}' OR City sw '${escapedValue}' OR State sw '${escapedValue}' OR PositionId co '${escapedValue}'`;\n\n\t\t\tif (filterQuery) {\n\t\t\t\tquery = `${filterQuery} AND (${query})`;\n\t\t\t}\n\n\t\t\tresponse = await Api.positionApiV2.search({\n\t\t\t\tquery: query,\n\t\t\t\tpage: page,\n\t\t\t\tfields: 'JobTitle, JobId, PositionId, Logo, Company.CompanyName, City, State'\n\t\t\t});\n\t\t}\n\n\t\treturn {\n\t\t\t...response,\n\t\t\tdata: response.data?.map(record => {\n\t\t\t\tlet secondaryText = '';\n\n\t\t\t\tif (record.City || record.State) {\n\t\t\t\t\tif (record.City && record.State) {\n\t\t\t\t\t\tsecondaryText += `${record.City}, ${record.State}`;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsecondaryText += record.City ?? record.State;\n\t\t\t\t\t}\n\t\t\t\t\tif (record.PositionId) {\n\t\t\t\t\t\tsecondaryText += ` | ${record.PositionId}`;\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tsecondaryText = `${record.PositionId ?? ''}`;\n\t\t\t\t}\n\n\t\t\t\t//return normal option which ALSO includes props for the custom option component\n\t\t\t\treturn {\n\t\t\t\t\tlabel: record.JobTitle,\n\t\t\t\t\tvalue: record.JobId.toString(),\n\t\t\t\t\tcustomOptionProps: {\n\t\t\t\t\t\tisRecentRecord: !searchValue && !disableRecentlyViewed,\n\t\t\t\t\t\trecordPhotoType: 'position',\n\t\t\t\t\t\trecordName: record.JobTitle,\n\t\t\t\t\t\timage: record.Logo as unknown as string,\n\t\t\t\t\t\trecordPrimaryText: record.Company.CompanyName,\n\t\t\t\t\t\trecordSecondaryText: secondaryText,\n\t\t\t\t\t\trecord\n\t\t\t\t\t} as RecordMenuItemProps\n\t\t\t\t};\n\t\t\t})\n\t\t};\n\t},\n\tprofile: async (details: { searchValue: string; page: number }, filterQuery?: string): Promise> => {\n\t\tconst { searchValue, page } = details;\n\n\t\tlet query = ``;\n\n\t\tif (searchValue) {\n\t\t\tconst escapedValue = escapeQueryValue(searchValue);\n\t\t\tif (filterQuery) {\n\t\t\t\tquery = `Description co '${escapedValue}' AND (${filterQuery})`;\n\t\t\t} else {\n\t\t\t\tquery = `Description co '${escapedValue}'`;\n\t\t\t}\n\t\t} else if (filterQuery) {\n\t\t\tquery = filterQuery;\n\t\t}\n\n\t\tconst response = await Api.profileTemplateApi.searchTemplates({\n\t\t\tquery: searchValue ? query : filterQuery,\n\t\t\tpage: page\n\t\t});\n\n\t\t//return normal option which ALSO includes props for the custom option component\n\t\treturn {\n\t\t\t...response,\n\t\t\tdata: response.data?.map(record => ({\n\t\t\t\tlabel: record.Description,\n\t\t\t\tvalue: record.ProfileTemplateId,\n\t\t\t\tcustomOptionProps: {\n\t\t\t\t\trecordName: record.Description,\n\t\t\t\t\trecord\n\t\t\t\t} as RecordMenuItemProps\n\t\t\t}))\n\t\t};\n\t},\n\tusers: async (details: { searchValue: string; page: number }, filterQuery?: string): Promise> => {\n\t\tconst { searchValue, page } = details;\n\n\t\tlet query = ``;\n\n\t\tif (searchValue) {\n\t\t\tconst escapedValue = escapeQueryValue(searchValue);\n\t\t\tif (filterQuery) {\n\t\t\t\tquery = `UserName sw '${escapedValue}' AND (${filterQuery})`;\n\t\t\t} else {\n\t\t\t\tquery = `UserName sw '${escapedValue}'`;\n\t\t\t}\n\t\t} else if (filterQuery) {\n\t\t\tquery = filterQuery;\n\t\t}\n\n\t\tconst response = await Api.usernameApi.search({\n\t\t\tquery: searchValue ? query : filterQuery,\n\t\t\tpage: page\n\t\t});\n\n\t\t//return normal option which ALSO includes props for the custom option component\n\t\treturn {\n\t\t\t...response,\n\t\t\tdata: response.data?.map(record => ({\n\t\t\t\tlabel: record.UserName,\n\t\t\t\tvalue: record.UserName,\n\t\t\t\tcustomOptionProps: {\n\t\t\t\t\trecordName: record.UserName,\n\t\t\t\t\trecordSecondaryText: undefined,\n\t\t\t\t\trecord\n\t\t\t\t} as RecordMenuItemProps\n\t\t\t}))\n\t\t};\n\t},\n\trollup: async (\n\t\tdetails: { searchValue: string; page: number },\n\t\tfilterQuery?: string,\n\t\tdisableRecentlyViewed?: boolean\n\t): Promise> => {\n\t\tconst { searchValue, page } = details;\n\n\t\tlet response: BasicResponse;\n\n\t\t//If nothing has been entered yet, try recent records\n\t\tif (!searchValue) {\n\t\t\tif (!disableRecentlyViewed) {\n\t\t\t\tconst recentlyViewedRecords = await Api.recentlyViewedApi.getRecentlyViewed(RecordType.Rollup);\n\n\t\t\t\tif (recentlyViewedRecords?.rollups?.length) {\n\t\t\t\t\tresponse = await Api.rollupListsApi.getMultiple(recentlyViewedRecords.rollups.slice(0, 4), 'RollupCode', {\n\t\t\t\t\t\tquery: filterQuery\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (disableRecentlyViewed && filterQuery) {\n\t\t\t\tresponse = await Api.rollupListsApi.search({\n\t\t\t\t\tquery: filterQuery,\n\t\t\t\t\tpage: page\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tif (!response) {\n\t\t\t\tresponse = empty_response;\n\t\t\t}\n\t\t}\n\n\t\t//Else, do search\n\t\telse {\n\t\t\tconst escapedValue = escapeQueryValue(searchValue);\n\t\t\tlet query = `Description co '${escapedValue}' or RollupCode co '${escapedValue}'`;\n\n\t\t\tif (filterQuery) {\n\t\t\t\tquery = `${filterQuery} AND (${query})`;\n\t\t\t}\n\n\t\t\tresponse = await Api.rollupListsApi.search({\n\t\t\t\tquery: query,\n\t\t\t\tpage: page\n\t\t\t});\n\t\t}\n\n\t\t//return normal option which ALSO includes props for the custom option component\n\t\treturn {\n\t\t\t...response,\n\t\t\tdata: response.data?.map(record => ({\n\t\t\t\tlabel: record.Description,\n\t\t\t\tvalue: record.RollupCode,\n\t\t\t\tcustomOptionProps: {\n\t\t\t\t\tisRecentRecord: !searchValue && !disableRecentlyViewed,\n\t\t\t\t\trecordName: record.Description,\n\t\t\t\t\trecordSecondaryText: record.RollupCode,\n\t\t\t\t\trecord\n\t\t\t\t} as RecordMenuItemProps\n\t\t\t}))\n\t\t};\n\t}\n};\n\n/**\n * A collection of RenderStore configurations to be passed into a FieldStore constructor.\n * All implement some extra searchLookup functionality to enable fuzzy searching and the use of a new Option component, also in this file.\n * YOU MUST PASS THE 'disableStockFiltering' to your select to search on any data that is NOT in the label for each option.\n */\nexport const FuzzyFieldStoreConfigurations: { [key: FuzzyRecord]: Partial } = {\n\tname: {\n\t\tlabel: 'Select a name',\n\t\tautoCompleteMode: true,\n\t\tfieldName: 'FirstName',\n\t\tfieldRecordType: FieldRecordType.Name,\n\t\tlookupSearchMode: FieldValuesLookupMode.Search,\n\t\tplaceholder: 'Type to search...',\n\t\tsearchLookup: FuzzySearchLookups.name\n\t},\n\tcompany: {\n\t\tlabel: 'Select a company',\n\t\tautoCompleteMode: true,\n\t\tfieldName: 'CompanyName',\n\t\tfieldRecordType: FieldRecordType.Company,\n\t\tlookupSearchMode: FieldValuesLookupMode.Search,\n\t\tplaceholder: 'Type to search...',\n\t\tsearchLookup: FuzzySearchLookups.company\n\t},\n\tposition: {\n\t\tlabel: 'Select a position',\n\t\tautoCompleteMode: true,\n\t\tfieldName: 'JobTitle',\n\t\tfieldRecordType: FieldRecordType.Position,\n\t\tlookupSearchMode: FieldValuesLookupMode.Search,\n\t\tplaceholder: 'Type to search...',\n\t\tsearchLookup: FuzzySearchLookups.position\n\t},\n\trollup: {\n\t\tlabel: 'Select a rollup',\n\t\tautoCompleteMode: true,\n\t\tfieldName: 'Description',\n\t\tcharacterLimit: 20,\n\t\t//todo: incorrect. No rollup type. Does not affect functionality with overridden searchLookup.\n\t\tfieldRecordType: FieldRecordType.name,\n\t\tlookupSearchMode: FieldValuesLookupMode.Search,\n\t\tplaceholder: 'Type to search...',\n\t\tsearchLookup: FuzzySearchLookups.rollup,\n\t\tcustomOptionComponent: RollupMenuItem,\n\t\tallowCustomOption: true\n\t},\n\tprofile: {\n\t\tlabel: 'Select a profile',\n\t\tautoCompleteMode: true,\n\t\tfieldName: 'Description',\n\t\t//todo: incorrect. No rollup type. Does not affect functionality with overridden searchLookup.\n\t\tfieldRecordType: FieldRecordType.name,\n\t\tlookupSearchMode: FieldValuesLookupMode.Search,\n\t\tplaceholder: 'Type to search...',\n\t\tsearchLookup: FuzzySearchLookups.profile\n\t},\n\tusers: {\n\t\tlabel: 'Select a user',\n\t\tautoCompleteMode: true,\n\t\tfieldName: 'Username',\n\t\tfieldRecordType: FieldRecordType.Users,\n\t\tlookupSearchMode: FieldValuesLookupMode.Search,\n\t\tplaceholder: 'Type to search...',\n\t\tsearchLookup: FuzzySearchLookups.users\n\t}\n};\n","/** Available sizes of IconButton for general use. */\nexport type IconButtonSize = keyof typeof ICON_BUTTON_SIZES_MAP;\n\n/**\n * Button sizes map - used to set the size of the button icon\n */\nexport const ICON_BUTTON_SIZES_MAP = {\n\tfit: 'w-full h-full text-inherit',\n\txs: 'text-2xs w-5 h-5',\n\tsm: 'text-xs w-6 h-6',\n\tmd: 'text-xs w-7 h-7',\n\tlg: 'text-sm w-8 h-8',\n\txl: 'text-base w-9 h-9',\n\t'2xl': 'text-lg w-10 h-10',\n\tOLD2XL: 'text-2xl w-12 h-12'\n};\n","import { ICON_BUTTON_SIZES_MAP } from './constants';\n\n/**\n * Generates a button's className string based on the given IconButtonBaseProps.\n * @param {IconButtonBaseProps} props - The IconButtonBaseProps object.\n * @returns {string} Button className string.\n */\nconst defaultStyles = 'inline-flex items-center justify-center border focus:outline-none';\n\n/**\n * Returns the size style based on the size and isRounded flag.\n * @param {string} size - The size of the button.\n * @param {boolean} isRounded - Whether the button should have rounded corners.\n * @returns {string} Size style string.\n */\nconst getSizeStyle = (size: string): string => ICON_BUTTON_SIZES_MAP[size];\n\n/**\n * Returns the disabled style based on the disabled flag.\n * @param {boolean} disabled - Whether the button should be disabled.\n * @returns {string} Disabled style string.\n */\nconst getDisabledStyle = (disabled: boolean): string => (disabled ? 'opacity-60 cursor-not-allowed' : '');\n\n/**\n * Returns the border radius style based on the isRounded flag.\n * @param {boolean} isRounded - Whether the button should have rounded corners.\n * @returns {string} Border radius style string.\n */\nconst getBorderRadiusStyle = (isRounded: boolean): string => (isRounded ? 'rounded-full' : 'rounded-md');\n\n/**\n * Returns the cursor style based on the onClick flag.\n * @param {boolean} onClick - Whether the button should have a pointer cursor.\n * @returns {string} Cursor style string.\n */\nconst getCursorStyle = (onClick: boolean): string => (onClick ? 'cursor-pointer' : 'cursor-default');\n\n/**\n * Generates a button's className string based on the given IconButtonBaseProps.\n * @returns {string} Button className string.\n */\nexport const getButtonClassName = ({\n\tsize,\n\tdisabled,\n\tisRounded,\n\tfullWidth,\n\tonClick\n}: {\n\tsize: string;\n\tdisabled: boolean;\n\tisRounded: boolean;\n\tfullWidth: boolean;\n\tonClick: boolean;\n}): string => {\n\tconst borderRadiusStyle = getBorderRadiusStyle(isRounded);\n\tconst cursorStyle = getCursorStyle(!!onClick);\n\tconst disabledStyle = getDisabledStyle(disabled);\n\tconst sizeStyle = getSizeStyle(size);\n\tconst fullWidthStyle = fullWidth ? 'w-full' : '';\n\n\treturn `${defaultStyles} ${borderRadiusStyle} ${cursorStyle} ${disabledStyle} ${sizeStyle} ${fullWidthStyle}`;\n};\n","import * as React from 'react';\n\n/**\n * Defines a set of animation class names as an enum-like object.\n * These constants represent CSS classes for various animations.\n * @enum {string} - The animation name.\n * @see https://tailwindcss.com/docs/animation\n * @see https://animate.style/\n */\nexport const AnimationsNames = {\n\tflip: 'animate-flip',\n\twobble: 'animate-wobble',\n\tspin: 'animate-spin',\n\tnone: 'animate-none'\n} as const;\n\n/**\n * Type definition for `AnimationsNamesTypes`.\n * Represents the keys of `AnimationsNames` object.\n */\nexport type AnimationsNamesTypes = keyof typeof AnimationsNames;\n\n/**\n * Enum-like object defining animation duration class names.\n * These constants are CSS classes for different animation durations.\n * @enum {string} - The animation duration.\n */\nexport const AnimationDurations = {\n\tfast: 'animate-duration-0.75s',\n\tnormal: 'animate-duration-1s',\n\tslow: 'animate-duration-1.25s'\n} as const;\n\n/**\n * Type definition for `AnimationDurationsTypes`.\n * Represents the keys of `AnimationDurations` object.\n */\nexport type AnimationDurationsTypes = keyof typeof AnimationDurations;\n\n/**\n * Enum-like object for defining the number of animation cycles.\n * These constants are CSS classes that specify the animation repetition count.\n * @enum {string} - The animation cycle count.\n */\nexport const AnimationCycles = {\n\t1: 'animate-count-1',\n\t2: 'animate-count-2',\n\t3: 'animate-count-3',\n\tinfinite: 'animate-count-infinite'\n} as const;\n\n/**\n * Type definition for `AnimationCyclesTypes`.\n * Represents the keys of `AnimationCycles` object.\n */\nexport type AnimationCyclesTypes = keyof typeof AnimationCycles;\n\n/**\n * Custom hook for managing event-driven animations.\n * This hook provides functionality to apply and control animations.\n *\n * @param animationName - The type of animation to be applied, based on `AnimationsNames`.\n * @param duration - Duration of the animation, defaults to 'normal'. Uses `AnimationDurations`.\n * @param cycles - The number of animation cycles, or 'infinite' for continuous. Uses `AnimationCycles`.\n * @returns A tuple consisting of the CSS class for the animation and a function to toggle the animation.\n */\nexport function useEventAnimation(\n\tanimationName: AnimationsNamesTypes,\n\tduration: AnimationDurationsTypes = 'normal',\n\tcycles: AnimationCyclesTypes = 1\n): [string, () => void] {\n\tconst [animationClassName, setAnimationClassName] = React.useState('');\n\tconst [isAnimating, setIsAnimating] = React.useState(false);\n\n\tReact.useEffect(() => {\n\t\tif (isAnimating) {\n\t\t\t// Construct the complete animation class string from individual components.\n\t\t\tsetAnimationClassName(`${AnimationsNames[animationName]} ${AnimationDurations[duration]} ${AnimationCycles[cycles]}`);\n\n\t\t\tif (cycles !== 'infinite') {\n\t\t\t\t// Calculate the total duration for finite animation cycles.\n\t\t\t\tconst durationMap = { fast: 750, normal: 1000, slow: 1250 };\n\t\t\t\tconst timeoutDuration = durationMap[duration] * Number(cycles);\n\n\t\t\t\t// Set a timeout to reset animation state after it completes.\n\t\t\t\tconst timeoutId = setTimeout(() => {\n\t\t\t\t\tsetAnimationClassName('');\n\t\t\t\t\tsetIsAnimating(false);\n\t\t\t\t}, timeoutDuration);\n\n\t\t\t\t// Cleanup: Clear the timeout when the component unmounts or dependencies change.\n\t\t\t\treturn () => clearTimeout(timeoutId);\n\t\t\t}\n\t\t} else {\n\t\t\t// Clear the animation class when the animation is not active.\n\t\t\tsetAnimationClassName('');\n\t\t}\n\n\t\t// Cleanup function for useEffect.\n\t\treturn () => undefined;\n\t}, [isAnimating, animationName, duration, cycles]);\n\n\t// Function to toggle the animation on or off.\n\tconst toggleAnimation = React.useCallback(() => {\n\t\tsetIsAnimating(prev => !prev);\n\t}, []);\n\n\treturn [animationClassName, toggleAnimation];\n}\n","import * as React from 'react';\nimport { IconButtonBaseProps, IconButtonProps, NineIconButtonProps } from './types';\nimport { getButtonClassName } from './utils';\nimport * as Tooltip from '../Tooltip';\nimport { PCRIconCollection } from '../Icon';\nimport { useEventAnimation } from '../Hooks/useEventAnimation';\n\n/**\n * IconButton including Bootstrap, PCR10, and Capture Site icons.\n * If the icon is not found in this collection, the PCR9 collection is still accessible.\n */\nexport const IconButton = (props: IconButtonProps): React.JSX.Element => {\n\treturn ;\n};\n\n/**\n * Besides specific icons that are unique to PCR, avoid using this component. Use the IconButton instead.\n * @deprecated - Moving to IconButton for latest IconButton usage.\n */\nexport const NineIconButton = (props: NineIconButtonProps): React.JSX.Element => {\n\treturn ;\n};\n\n/**\n * BaseIconButton is a button with an icon that can be used to trigger an action or link to a new page, or to display a tooltip.\n * @param {IconButtonBaseProps} props\n * @returns {React.JSX.Element}\n */\nconst BaseIconButton = ({\n\ttitle,\n\tlabel,\n\ticon,\n\tvariant = 'outlined',\n\tsize = 'lg',\n\tcolor = 'default',\n\tdisabled = false,\n\tisRounded = true,\n\tonClick,\n\ttooltipPlacement,\n\ttooltipIcon,\n\ttooltipIconPlacement,\n\tid,\n\tclickAnimation: AnimationName,\n\tdurationAnimation: AnimationDuration,\n\tcyclesAnimation: AnimationCycles,\n\tfullWidth,\n\tariaSelected\n}: IconButtonBaseProps): React.JSX.Element => {\n\tconst [animationClassName, toggleAnimation] = useEventAnimation(\n\t\tAnimationName ?? 'none',\n\t\tAnimationDuration ?? 'normal',\n\t\tAnimationCycles ?? 1\n\t);\n\n\t/** The class name for the button. */\n\tconst buttonContainerClass = `${getButtonClassName({\n\t\tsize,\n\t\tdisabled,\n\t\tisRounded,\n\t\tfullWidth,\n\t\tonClick: onClick !== undefined\n\t})} component-iconbutton-${variant}-${color} group${animationClassName && toggleAnimation ? ` ${animationClassName}` : ''}`;\n\n\tlet iconClassName = `min-w-min min-h-min ${PCRIconCollection[icon]} component-iconbutton-${variant}-${color}-icon`;\n\n\tif (disabled) {\n\t\ticonClassName += ` component-iconbutton-${variant}-${color}-icon-i-disabled`;\n\t}\n\n\tReact.useEffect(() => {\n\t\tif ((process.env as any).NODE_ENV === 'development' && icon.includes('icon-')) {\n\t\t\tconsole.warn(\n\t\t\t\t`[IconButton] The icon prop contains the string \"icon\". Remove \"icon-\" from the prop and consider refactoring to an icon from the updated set.`\n\t\t\t);\n\t\t}\n\t}, [icon]);\n\n\t/**\n\t * Handles the onClick event for the button.\n\t * @param {React.MouseEvent} event - The event object.\n\t * @returns {void}\n\t */\n\tconst handleOnClick = (event: React.MouseEvent): void => {\n\t\tif (!disabled) {\n\t\t\ttoggleAnimation();\n\t\t\tonClick?.(event);\n\t\t}\n\t};\n\n\t/**\n\t * The button content\n\t */\n\tconst buttonContent: React.JSX.Element = (\n\t\t// eslint-disable-next-line jsx-a11y/role-supports-aria-props\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n\n\treturn (\n\t\t\n\t\t\t{buttonContent}\n\t\t\t\n\t\t\t\t{label}\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n};\n","import * as React from 'react';\nimport { Component } from 'react';\nimport { observer } from 'mobx-react';\nimport { Field_Action } from '@mst/api/models/FieldAction';\nimport { Icon, IconColor, UnionIconAlias } from '../../Icon';\nimport { SimpleTooltip } from '@mst/ui/lib/Tooltip';\n\ninterface ActionField_ActionButtonProps extends Field_Action {\n\tdisabled?: boolean;\n\trecordColor?: string;\n}\n/**\n * Used inside of ActionField to render out how an action should look via a button.\n * @property task - callback to run when an action is activated\n * @property icon - icon to show on the action button\n */\n@observer\nexport class ActionField_ActionButton extends Component {\n\tonClick = (): void => {\n\t\tif (this.props.disabled) {\n\t\t\treturn;\n\t\t}\n\t\tthis.props.task();\n\t};\n\n\trender(): JSX.Element {\n\t\tlet textStyles = 'text-basegray-700 hover:text-lightblue-600 dark:text-basegray-50 hover:dark:text-basegray-300';\n\t\tif (this.props.disabled) {\n\t\t\ttextStyles = 'text-basegray-400 dark:( text-baseblue-600 )';\n\t\t}\n\n\t\treturn (\n\t\t\t
\n\t\t\t\t{this.props.buttonOverride ? (\n\t\t\t\t\tthis.props.buttonOverride\n\t\t\t\t) : this.props.title || this.props.tooltip ? (\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\t\t\n\t\t\t\t)}\n\t\t\t
\n\t\t);\n\t}\n}\n\nconst S = {\n\tbutton: (\n\t\tprops: ActionField_ActionButtonProps\n\t) => `action-btn bg-transparent p-px m-0 flex justify-center items-center text-center box-border h-4 w-fit border-none last:mr-0.5\n\t\t${props.disabled ? 'cursor-default' : 'cursor-pointer'}`\n};\n","import { css } from '../../../core/Emotion';\nimport { FieldStore } from '@mst/api/models/FieldStore';\n\n//Styles to be shared across action fields. Changing here will cause changes across all.\nexport class FieldInputSharedStyles {\n\t/**\n\t * Sets up the basic styles for a input in an action field.\n\t * 1. unstyles the input\n\t * 2. fills the input to the available containing element.\n\t */\n\tstatic initInputStyle = (): string => {\n\t\treturn `${FieldInputSharedStyles.unstyleInput()} ${FieldInputSharedStyles.centerAndFillInput()}`;\n\t};\n\n\tstatic basedOnInputState = (props: FieldStore): string => {\n\t\tlet textColor = 'text-basegray-400 dark:text-baseblue-300';\n\t\tlet textHoverColor = 'group-hover/actionfield:text-basegray-700 dark:group-hover/actionfield:text-basegray-100';\n\t\tconst focusStyles = 'group-focus-within/actionfield:text-basegray-700 dark:group-focus-within/actionfield:text-basegray-100';\n\n\t\tif (props.fieldRecordType) {\n\t\t\tswitch (props.fieldRecordType) {\n\t\t\t\tcase 'candidates':\n\t\t\t\t\ttextColor += ' selection-bg-teal-500';\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'companies':\n\t\t\t\t\ttextColor += ' selection-bg-lavender-500';\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'positions':\n\t\t\t\t\ttextColor += ' selection-bg-aqua-500';\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tif (props.isDisabled || props.readonly) {\n\t\t\ttextHoverColor = '';\n\t\t\ttextColor = 'text-basegray-300';\n\t\t}\n\n\t\tif (props.isDirty) {\n\t\t\ttextColor = 'text-basegray-400 dark:text-baseblue-200';\n\t\t}\n\n\t\treturn `!px-2 !py-0 !text-xs ${props.readonly || props.isDisabled ? `${disabledCursorClass()} pointer-events-none` : ``} ${textColor} ${textHoverColor} ${focusStyles}`;\n\t};\n\n\tpublic static unstyleInput = () =>\n\t\t`appearance-none m-0 bg-transparent ${css`\n\t\t\tborder: 0px;\n\t\t\t.dark & {\n\t\t\t\tborder: 0px;\n\t\t\t}\n\t\t\t&:focus {\n\t\t\t\tborder: 0px;\n\t\t\t\t.dark & {\n\t\t\t\t\tborder: 0px;\n\t\t\t\t}\n\t\t\t\toutline: none;\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\t&:active {\n\t\t\t\tborder: 0px;\n\t\t\t\t.dark & {\n\t\t\t\t\tborder: 0px;\n\t\t\t\t}\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t`}`;\n\n\tprivate static centerAndFillInput = () => `w-full h-full min-h-4 flex items-center box-border`;\n}\n\n/**\n * TODO: move and adjust this configuration if/when this cursor style should become the global \"not-allowed\" cursor style\n */\nexport const disabledCursorClass = () => css`cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAC0ElEQVQ4T2WTTUwTURDH3+wuFWjaChcNJzHUA8HU1DZBjPFYJQRINAEvGA0iRr3LqeXqQQ+eJEQT1GiagJAYDeFA8CK2W2ghfJQI2mAwhK/Gfnd33zjbdlHLu7T7Zub3/vN/84CVrUgkYlZVqRMF6ToyrKOwAAw3OVc+mSvFycbGxp8AwI0yMP4gIgTnVtsEQXhFe7ZyMH0jYzwOXHlUW2sZqa+vz+o5BYBeHF5c69U0NlTaTCLjE4i5Sc5Rk4SqKwjQQTFrIc4zj3O5tK+lpSVTAATnolcB2MciTFORpwdqbLZndrs9ZyiRZdkGkvUJHXa7kMeT/d/X14fB7/eLp+2O/RJdo1+RwnFVTdyTXK5RF4BiQKanpyVLbd0w4+wmnbSbx9QFCC2s3UINXxA5Q5K7BKh8TY1ZycCEpib6JIBRl8t1CJG3tqrZdmKboGZS+hDk+dVx6qoDeXbmuLW63WQyiTv72RglWAgSV3mqv9npHCXnVUNJMLI6ARzaEZUxCM1HA2Svm/PkkID4QD8tFovV7OxlfxSUIN9TMX2/AnHMUBIKr/QhCs/Jza9/AervlwLAXSMpEFg6KVZULJOKmnJPQvMrd5AJdGNagFqIvidpnZyngwJqrQTYNaQubmycyMWVtXJPmGAZp71WzlU/hMLRLkT2jooy1EaX2+n8QP1SV8VVaKfkia5E05IDomR5SmN1jCvJG6APUSi8FtevkfPcLBN5r9vhWD4CKXlCecZV76iScrYwSKGljUuYVz4X5ygXECTutZrNXxoaGlKDg4Po9XolWQ67QTLPUArNCWOqlvE0u85NHb6FYGS5G7j4tjiNmEXMzyOqMhMhIzGTE5l0kUJVelwC1uNwnHmjP6pDgB6YXfh2XtLUKZoLcv7IQjJum4v5a+6mplnjRf4H0Et8Pp/Q1tl9mSA9DOEU6VFI0Saq+ZGDg1+yx+NJ/Yv+A8+djlmI1ZSQAAAAAElFTkSuQmCC') 8 8, not-allowed;`;\n","import * as React from 'react';\nimport { SyntheticEvent } from 'react';\nimport { observer } from 'mobx-react';\nimport { FieldStore } from '@mst/api/models/FieldStore';\nimport { isObservableArray } from 'mobx';\nimport { css } from '@mst/ui/core/Emotion';\nimport { disabledCursorClass } from './ActionFieldSharedStyles';\nimport BrowserHelper from '@mst/utils/lib/Browser/BrowserHelper';\nimport { Session } from '@mst/stores/lib/GlobalState/GlobalState';\n\nexport type FieldWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'fit';\n\nexport interface BorderLabelInsideProps extends FieldStore {\n\t/** click event for when the label is clicked */\n\tonLabelClick?: () => void;\n\t/** toggle to show no border */\n\tnoBorder?: boolean;\n\t/** children to render within, most commonly the field input */\n\tchildren?: React.ReactNode;\n\t/** Helper text to be shown (validation hints will override this text) */\n\thelperText?: string;\n\t/** A width variant defined by the ActionField spec (choose 'fit' to fill width) */\n\twidth?: FieldWidth;\n\t/** Determines the height of the field in pixels, or \"fit\" for full height */\n\theight?: number | 'fit';\n\t/** Applies a background color to the field (always true in PCR9) */\n\topaque?: boolean;\n}\n\nexport const FIELD_WIDTH_MAP: {\n\t[K in FieldWidth]: string;\n} = {\n\txs: 'w-30 max-w-30',\n\tsm: 'w-35 max-w-35',\n\tmd: 'w-40 max-w-40',\n\tlg: 'w-45 max-w-45',\n\txl: 'w-50 max-w-50',\n\tfit: 'w-full'\n};\n\nconst BorderColor = (props: BorderLabelInsideProps) => {\n\tlet borderColor = 'border-basegray-200 dark:border-baseblue-400';\n\tlet borderFocusColor = 'focus-within:(border-basegray-300 dark:border-baseblue-200)';\n\tlet borderHoverColor = 'hover:(border-basegray-300 )';\n\tconst borderSize = 'border';\n\tlet labelColor = 'text-basegray-300 dark:text-baseblue-200';\n\n\tif (props.isDirty) {\n\t\tborderColor = 'border-baseblue-300 dark:border-baseblue-200';\n\t}\n\tif (props.isWarningHighlighted === true) {\n\t\tborderColor = 'border-gold-500';\n\t\tborderFocusColor = 'focus-within:(border-gold-600 dark:border-gold-300)';\n\t\tborderHoverColor = 'hover:(border-gold-800 dark:border-gold-300)';\n\t}\n\tif (props.isValid === false) {\n\t\tborderColor = 'border-cherry-500';\n\t\tborderFocusColor = 'focus-within:(border-cherry-600 dark:border-cherry-400)';\n\t\tborderHoverColor = 'hover:(border-cherry-900 dark:border-cherry-400)';\n\t}\n\tif (props.isFocused && props.isValid) {\n\t\tborderColor = 'border-shamrock-500';\n\t\tborderFocusColor = 'focus-within:(border-shamrock-600 dark:border-shamrock-400)';\n\t\tborderHoverColor = 'hover:(border-shamrock-600 dark:border-shamrock-400)';\n\t}\n\tif (props.isDisabled || props.readonly) {\n\t\tborderColor = 'border-basegray-200 dark:border-baseblue-500';\n\t\tlabelColor = 'text-basegray-200 dark:text-baseblue-500';\n\t\tborderHoverColor = '';\n\t\tborderFocusColor = '';\n\t}\n\tif (props.isDirty && props.isFocused) {\n\t\t//validity state currently fulfills this case, but it has been left here to match the old setup in case we decide to do something different here\n\t}\n\n\tif (props.noBorder) {\n\t\tborderColor = 'border-0';\n\t\tborderHoverColor = '';\n\t\tborderFocusColor = '';\n\t}\n\n\tlet bg = '';\n\n\t//Fields should always be opaque in older products\n\tif (props.opaque || (Session.appId !== 'PCR10' && Session.appId !== 'CAPTURE')) {\n\t\tbg = 'sh-bg-secondary';\n\t}\n\n\treturn {\n\t\tborder: [borderSize, borderColor, borderFocusColor, borderHoverColor, bg].join(' '),\n\t\tlabel: labelColor\n\t};\n};\n\n/**\n * Checks for undefined, null, and empty strings.\n * Easy check for a lack of data without mistakenly considering falsy values as nullish\n */\nfunction isNullish(value) {\n\treturn [undefined, null, ''].includes(value);\n}\n\n/**\n * A function to determine \"Does this FieldStore have a value?\"\n * Should be used in generic cases - if you know what type of store you're working with, check directly\n */\nexport const FieldStoreHasValue = (store: FieldStore): boolean => {\n\tconst value: unknown = store?.value?.();\n\t//if the value is an array...\n\tif (Array.isArray(value)) {\n\t\t//and there is a non-nullish value\n\t\tif (value.some(v => !isNullish(v))) {\n\t\t\treturn true;\n\t\t}\n\t\treturn false;\n\t} else if (typeof value === 'object') {\n\t\t//select option has 'value' key, custom field has 'Value' key\n\t\tif (!isNullish(value?.value) || !isNullish(value?.Value)) {\n\t\t\treturn true;\n\t\t}\n\t\treturn false;\n\t} else if (value || value === 0) {\n\t\treturn true;\n\t}\n\treturn false;\n};\n\nfunction currentCharacterCount(value): number {\n\tlet val = value ?? '';\n\tif (Array.isArray(val)) {\n\t\tval = val[0] ?? '';\n\t}\n\tif (isObservableArray(val)) {\n\t\tval = val[0] ?? '';\n\t}\n\treturn val.length;\n}\n\nexport const BorderLabelInside = observer((props: BorderLabelInsideProps) => {\n\tconst {\n\t\tlabel,\n\t\tplaceholder,\n\t\thelperText,\n\t\tcharacterLimit,\n\t\tdisplayCharacterLimit,\n\t\tvalidityInfo,\n\t\twidth: size = 'fit',\n\t\tonLabelClick,\n\t\treadonly,\n\t\tisDisabled,\n\t\theight,\n\t\tchildren\n\t} = props;\n\n\tconst ref = React.useRef();\n\n\tconst shouldBehaveDisabled = readonly || isDisabled;\n\n\tconst labelClick = React.useCallback(\n\t\t(e: SyntheticEvent): void => {\n\t\t\tif (!e.target.classList.contains('pfieldset')) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (BrowserHelper.isTouchDevice()) {\n\t\t\t\tref.current.querySelector('select')?.focus(); //handles focusing any input\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (!shouldBehaveDisabled) {\n\t\t\t\t//clicking the field outside of the input should focus the input too.\n\t\t\t\tref.current.querySelector('input')?.focus(); //handles focusing any input\n\t\t\t\t//handles opening the date time picker\n\t\t\t\tref.current.querySelector('#date-time-input')?.click();\n\t\t\t} else {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t\te?.stopPropagation();\n\n\t\t\tif (onLabelClick) {\n\t\t\t\tonLabelClick?.();\n\t\t\t}\n\t\t},\n\t\t[shouldBehaveDisabled, onLabelClick]\n\t);\n\n\tconst hasValue = FieldStoreHasValue(props);\n\n\tconst hasText = !!placeholder || hasValue;\n\n\tconst subtext = validityInfo?.hint ?? helperText;\n\n\tconst { border: borderColors, label: labelColors } = BorderColor(props);\n\n\tconst topLeftLabelStyles = 'text-2xs translate-y-0 !px-0.5 top--0.25 font-bold';\n\t//If something inside the field (an input) is focused,place the label in its top-left (normal) position\n\tconst labelFocusStyles = `group-focus-within/actionfield:(min-w-max text-2xs translate-y-0 !px-0.5 top--0.25 font-bold)`;\n\n\tconst labelPlacementStyles = `relative duration-100 ml-6px mb--0.5 ${labelFocusStyles} ${label && hasText ? topLeftLabelStyles : 'translate-y-3 text-xs w-0 !px-0'}`;\n\n\t//Specific to TextArea...for now\n\tconst shouldShowCharacterLimit = characterLimit && displayCharacterLimit && props.inputType === 'Textarea';\n\n\tlet wrapperHeightClass = 'max-h-min';\n\tlet contentHeightClass = '';\n\n\tif (height !== undefined) {\n\t\twrapperHeightClass = height === 'fit' ? 'h-full' : css`height: ${height}px;`;\n\t\tcontentHeightClass = 'h-full';\n\t}\n\n\treturn (\n\t\t
\n\t\t\t\n\t\t\t\t{label && (\n\t\t\t\t\t\n\t\t\t\t\t\t{label}\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{children}\n\t\t\t\n\t\t\t
\n\t\t\t\t{subtext ? (\n\t\t\t\t\t\n\t\t\t\t\t\t{subtext}\n\t\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{shouldShowCharacterLimit && (\n\t\t\t\t\t\n\t\t\t\t\t\t{currentCharacterCount(props.value())} / {characterLimit}\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t
\n\t\t
\n\t);\n});\n","import { FieldRecordType } from '@mst/api/models/ConfiguredField';\n\n/**\n * Retrieve the theme colors variables for a specific record type string\n * @param fieldRecordType string of record type in lowercase (candidates | companies | positions)\n * @returns string value of the css variable '--theme-Name'\n */\nexport function getRecordTypeColor(fieldRecordType: FieldRecordType): string {\n\tif (fieldRecordType) {\n\t\tif (fieldRecordType === 'candidates') {\n\t\t\treturn '--theme-Name';\n\t\t}\n\t\tif (fieldRecordType === 'companies') {\n\t\t\treturn '--theme-Company';\n\t\t}\n\t\tif (fieldRecordType === 'positions') {\n\t\t\treturn '--theme-Position';\n\t\t}\n\t}\n\treturn '--theme-LinkColor';\n}\n","import * as React from 'react';\nimport { useRef, useState } from 'react';\nimport { observer } from 'mobx-react';\nimport { css } from '../../../core/Emotion';\nimport { useOnClickOutside } from '../../Hooks/UseOnClickOutside';\nimport { Field_Action } from '@mst/api/models/FieldAction';\nimport { FieldStore } from '@mst/api/models/FieldStore';\nimport { ActionField_ActionButton } from './ActionFieldButton';\nimport { BorderLabelInside, FIELD_WIDTH_MAP, FieldWidth } from './BorderLabelInside';\nimport { getRecordTypeColor } from '../../../core/RecordTypeStyles';\n\nexport interface ActionFieldProps extends FieldStore {\n\tchildren?: JSX.Element | string;\n\tclassName?: string;\n\tminWidth?: number;\n\tdisableBorderAndLabel?: boolean;\n\ttypeOverride?: string;\n\t/** A width variant defined by the ActionField spec (choose 'fit' to fill width) */\n\twidth?: FieldWidth;\n\t/** Determines the height of the field in pixels, or \"fit\" for full height */\n\theight?: number | 'fit';\n}\n\n/**\n * Action field commonly used in field lists. Contains a field input and some buttons to take aciton on.\n * @param props ActionFieldProps thats a combination of some extra props and a partial fieldstore\n * @returns\n */\nexport const ActionField = observer((props: ActionFieldProps): JSX.Element => {\n\tconst numActions: number = props.actions?.().length;\n\tconst actions: JSX.Element = numActions > 0 && (\n\t\t
\n\t\t\t{props\n\t\t\t\t.actions?.()\n\t\t\t\t.filter(\n\t\t\t\t\t(actionButtonProps: Field_Action) =>\n\t\t\t\t\t\t!actionButtonProps.showOnViewMode || actionButtonProps.showOnViewMode === props.viewmode\n\t\t\t\t)\n\t\t\t\t.map(\n\t\t\t\t\t(actionButtonProps: Field_Action, index: number) =>\n\t\t\t\t\t\tactionButtonProps && (\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t{/*numActions = index+1*/}\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)}\n\t\t
\n\t);\n\tconst classes: string = `text-2xs ${S.container(props)} ${FIELD_WIDTH_MAP[props.width ?? 'fit']} ${props.className ?? ''} actionfield`;\n\n\tconst inputArea = (\n\t\t
\n\t\t\t{props.children}\n\t\t
\n\t);\n\n\treturn (\n\t\t
\n\t\t\t{props.viewmode === 'noneditable' ? (\n\t\t\t\t
\n\t\t\t\t\t{/**FIELD AREA */}\n\t\t\t\t\t{inputArea}\n\t\t\t\t\t{/**ACTION BUTTON AREA */}\n\t\t\t\t\t{actions}\n\t\t\t\t
\n\t\t\t) : (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{/**FIELD AREA */}\n\t\t\t\t\t\t{inputArea}\n\t\t\t\t\t\t{/**ACTION BUTTON AREA */}\n\t\t\t\t\t\t{actions}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)}\n\t\t
\n\t);\n});\n\nconst ActionFieldWrapper = observer(props => {\n\treturn (\n\t\t
\n\t\t\t{props.children}\n\t\t
\n\t);\n});\n\n//currently just using a red background to test valid checks\nconst S = {\n\tdefaults: { minWidth: 350 },\n\tcontainer: (props: FieldStore & ActionFieldProps) => css`\n min-width:${props.disableMinWidth || props.width !== 'fit' ? '0' : (props.minWidth ?? S.defaults.minWidth)}px;\n\t\twidth: ${props.width === 'fit' || !props.width ? 'full' : props.width};\n display:flex;\n flex-direction:row;\n ${props.actionsAtTop ? '' : 'align-items:center;'}\n input{\n background-color: transparent !important;\n &:focus{box-shadow: none;}\n }\n `\n};\n","import { FieldStore } from '@mst/api/models/FieldStore';\n\n/**\n * This is the default value of an encrypted field that is pushed from the API if it is not allowed to decrypt.\n */\nexport const ENCRYPTED_VALUE: string = '***************';\n\n/**\n * Check if the field is required and empty\n * @param props\n * @returns returns true if not required or if required is greater than 1 character\n */\nexport function validCheckForRequired(props: Partial, runWhenFalse?: (reason?: string) => void) {\n\tconst fieldValue = props.value?.()?.toString() ?? ''; //if undefined it will fall back to empty string\n\t//if fieldValue is an empty string or an empty array then it will not be considered filled in.\n\tif (props.required && fieldValue.length === 0) {\n\t\trunWhenFalse?.(undefined);\n\t\treturn false;\n\t}\n\treturn true;\n}\n\n/**\n * Check if the field exceeds the character limit\n * @param props\n * @returns returns true as long as character limit is in bounds\n */\nexport function validCheckForCharacterLimit(\n\tfieldValue: T,\n\tfieldStore: Partial,\n\trunWhenFalse?: (reason?: string) => void\n) {\n\t// const fieldValue = props.value?.()?.toString() ?? '';\n\tlet isValid = true;\n\t//only check validity past this point if we have a non zero character limit\n\t//otherwise short circuit and return true\n\tif (!fieldStore.characterLimit) {\n\t\treturn true;\n\t}\n\tlet valuesToTest = [fieldValue] as string[];\n\tif (Array.isArray(fieldValue)) {\n\t\tvaluesToTest = [...fieldValue] as string[];\n\t}\n\tvaluesToTest.every(value => {\n\t\tif (fieldStore.characterLimit && value?.toString().length > fieldStore.characterLimit) {\n\t\t\tisValid = false;\n\t\t}\n\t});\n\tif (!isValid) {\n\t\trunWhenFalse?.(`Over character limit for this field value of: \"${fieldValue}\"`);\n\t}\n\treturn isValid;\n}\n\n/**\n * Validate against a pattern if provided\n * @param props\n * @returns returns true when validity regex pattern is truthy\n */\nexport function validCheckForValidityPattern(\n\tfieldValue: T,\n\tfieldStore: Partial,\n\trunWhenFalse?: (reason?: string) => void\n) {\n\tlet isValid = true;\n\tlet fieldValues = [fieldValue] as string[];\n\tif (Array.isArray(fieldValue)) {\n\t\tfieldValues = [...fieldValue] as string[];\n\t}\n\tfieldValues.every((value: string) => {\n\t\tif (fieldStore.validityInfo?.pattern && fieldValue) {\n\t\t\t//The RegExp is always a string due to ...spread operators on props throwing\n\t\t\t//errors when RegExp [objects] are inadvertantly mounted on a DOM element.\n\t\t\tconst pattern = new RegExp(fieldStore.validityInfo.pattern, fieldStore.validityInfo.flags);\n\n\t\t\t//If fieldValue is a single value, check it directly\n\t\t\tisValid = pattern.test(value);\n\t\t}\n\t});\n\tif (!isValid) {\n\t\trunWhenFalse?.(fieldStore?.validityInfo?.hint);\n\t}\n\n\treturn isValid;\n}\n\n/**\n * Special case: if the field value is an encrypted value, mark as valid\n * @param props\n * @returns returns true if field value matches encrypted value\n */\nexport function validCheckForEncrypted(props: Partial, runWhenFalse?: (reason?: string) => void) {\n\tconst fieldValue = props.value?.()?.toString() ?? '';\n\tif (fieldValue === ENCRYPTED_VALUE) {\n\t\treturn true;\n\t}\n\trunWhenFalse?.(undefined);\n\treturn false;\n}\n","import * as React from 'react';\nimport { SyntheticEvent, Component, createRef } from 'react';\nimport { observable, makeObservable, autorun } from 'mobx';\nimport { observer } from 'mobx-react';\nimport { FieldStore } from '@mst/api/models/FieldStore';\nimport { FieldInputSharedStyles } from './ActionFieldSharedStyles';\nimport {\n\tvalidCheckForCharacterLimit,\n\tvalidCheckForEncrypted,\n\tvalidCheckForRequired,\n\tvalidCheckForValidityPattern\n} from './FieldValidationHelpers';\n\nexport interface FieldInput_BasicTextProps extends FieldStore {\n\tforwardRef?: any;\n\ttitle?: string;\n\ttypeOverride?: string;\n\tname?: string;\n\tid?: string;\n}\n\n@observer\nexport class FieldInput_BasicText extends Component {\n\t@observable _value = '';\n\t@observable ref: any = createRef();\n\n\tonBlur = (): void => {\n\t\tthis.props.checkValidity?.();\n\t\tthis.props.onBlur?.();\n\t\t//resync local state with prop value state on blur\n\t\tthis._value = this.props.value()?.toString();\n\t};\n\n\tonFocus = (): void => {\n\t\tif ((!this.props.isDirty && this.props.highlightAllOnSelect) || this.props.isDisabled || this.props.readonly) {\n\t\t\tthis.ref?.select?.();\n\t\t}\n\n\t\tif (!this.props.isDisabled && !this.props.readonly) {\n\t\t\tthis.props.onFocus?.();\n\t\t\tthis.props.checkValidity?.();\n\t\t}\n\t};\n\n\t_debounceTimeout;\n\tonChange = (e: SyntheticEvent): void => {\n\t\t/** SETUP / CLEANUP FROM LAST CHANGE CALL */\n\t\t// change value\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tconst value = (e?.target as HTMLInputElement)?.value ?? this.props.value() ?? '';\n\n\t\tconst DEBOUNCE_DELAY = this.props?.textInputDebounceTime ?? 300;\n\n\t\t// clear timeout before isvalid return so we dont do the latest timeout\n\t\tif (this._debounceTimeout) {\n\t\t\tclearTimeout(this._debounceTimeout);\n\t\t\tthis._debounceTimeout = undefined;\n\t\t}\n\n\t\t// return before setting value so we dont get an extra value change once we hit the character limit\n\t\t// NOT VALIDATION, just checking character limit.\n\t\tif (!validCheckForCharacterLimit(value, this.props)) {\n\t\t\treturn;\n\t\t}\n\n\t\t/** LOGIC FOR ACTUAL CHANGING AND SIDE EFFECTS */\n\t\tthis._value = value.toString();\n\n\t\tconst onChangeFieldStore = () => {\n\t\t\tthis.props.onChange?.(this._value, undefined, e);\n\t\t\tthis.props.checkValidity?.();\n\t\t\tthis.props.setDirty?.(true);\n\t\t};\n\n\t\tif (this.props?.useTextInputDebounce) {\n\t\t\t// setup our debounce\n\t\t\tthis._debounceTimeout = setTimeout(() => {\n\t\t\t\tonChangeFieldStore();\n\t\t\t\tthis._debounceTimeout = undefined;\n\t\t\t}, DEBOUNCE_DELAY);\n\t\t} else {\n\t\t\tonChangeFieldStore();\n\t\t}\n\t};\n\n\tonEnter = (e: React.KeyboardEvent): void => {\n\t\tif (e.key === 'Enter') {\n\t\t\tthis.props.onEnter?.();\n\t\t} else {\n\t\t\tthis.props.onKeyDown?.(e);\n\t\t}\n\t};\n\n\tonKeyUp = (e: React.KeyboardEvent): void => {\n\t\tthis.props.onKeyUp?.(e);\n\t};\n\n\tconstructor(props: FieldInput_BasicTextProps) {\n\t\tsuper(props);\n\t\tmakeObservable(this);\n\n\t\t// set the DEFAULT validity logic for this component\n\t\tthis.props?.setValidityLogic?.(() => DefaultTextValidityLogic(this.props));\n\n\t\tautorun(() => {\n\t\t\tthis._value = this.props.value() as string;\n\t\t});\n\t}\n\n\trender(): JSX.Element {\n\t\tif (this.props.viewmode === 'noneditable') {\n\t\t\treturn
{this.props.value()}
;\n\t\t}\n\n\t\tconst className = `sh-bg-secondary ${FieldInputSharedStyles.initInputStyle()} ${FieldInputSharedStyles.basedOnInputState(\n\t\t\tthis.props\n\t\t)}`;\n\n\t\treturn (\n\t\t\t {\n\t\t\t\t\tthis.ref = ref;\n\t\t\t\t\tthis.props.forwardRef?.(this.ref);\n\t\t\t\t\tthis.props.setInputRef?.(this.ref);\n\t\t\t\t}}\n\t\t\t\tdata-cy={`${this.props?.label ? this.props.label : 'basicText'}-input`}\n\t\t\t\tdata-component=\"FieldInput_BasicText\"\n\t\t\t\tclassName={`${className}`}\n\t\t\t\ttype={this.props.typeOverride ?? 'text'}\n\t\t\t\tvalue={this._value ?? ''}\n\t\t\t\tmaxLength={this.props.characterLimit}\n\t\t\t\tonChange={this.onChange}\n\t\t\t\tonKeyDown={this.onEnter}\n\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\tonBlur={this.onBlur}\n\t\t\t\tonFocus={this.onFocus}\n\t\t\t\tonClick={this.props.onClick}\n\t\t\t\tplaceholder={this.props.placeholder ?? ''}\n\t\t\t\tdisabled={this.props.isDisabled ?? false}\n\t\t\t\treadOnly={this.props.readonly ?? false}\n\t\t\t\ttitle={this.props.title}\n\t\t\t\tname={this.props.name}\n\t\t\t\tid={this.props.id}\n\t\t\t/>\n\t\t);\n\t}\n}\n\n/**\n * Default FieldInput text validity checks. This will call setValid on the fieldstore\n * @assumption This will be called after onChange happens such that fieldValue is the latest changed value in the fieldstore props.\n */\nexport function DefaultTextValidityLogic(readonlyProps: FieldStore): boolean {\n\t// Retrieve the current props if a function is provided\n\tconst props = readonlyProps.current ? readonlyProps.current() : readonlyProps;\n\n\t// Get the field value as a string, defaulting to an empty string if undefined\n\tconst fieldValue = props.value?.()?.toString() ?? '';\n\n\tlet isValid = true;\n\tlet hint: string | undefined = undefined;\n\n\t// Check if the field is required and empty\n\tisValid =\n\t\tisValid &&\n\t\tvalidCheckForRequired(props, reason => {\n\t\t\thint = reason;\n\t\t});\n\n\t// Check if the field exceeds the character limit\n\tisValid =\n\t\tisValid &&\n\t\tvalidCheckForCharacterLimit(fieldValue, props, reason => {\n\t\t\thint = reason;\n\t\t});\n\n\t// Validate against a pattern if provided\n\tisValid =\n\t\tisValid &&\n\t\tvalidCheckForValidityPattern(fieldValue, props, reason => {\n\t\t\thint = reason;\n\t\t});\n\n\t// Special case: if the field value is an encrypted value, mark as valid\n\tif (validCheckForEncrypted(props)) {\n\t\tisValid = true;\n\t\thint = undefined;\n\t}\n\n\t// Set the validity status on the field store\n\tprops.setValid(isValid, hint);\n\treturn isValid;\n}\n","import * as React from 'react';\nimport { Icon, UnionIconAlias } from '../Icon';\nimport { ChipColor, ChipVariant } from './types';\n\nexport interface ChipBaseProps {\n\t/** List, Logical, or Filter. All intended for different purposes outlined in their definitions. */\n\tvariant: ChipVariant;\n\t/** The text or numeric content of the chip */\n\tlabel: string | number;\n\t/** Optional color. Options vary by variant. */\n\tcolor?: ChipColor;\n\t/** Left icon, used in list chips to indicate record type */\n\tleftIcon?: UnionIconAlias;\n\t/** Fired when the 'remove' icon is clicked */\n\tonIconClick?: (e: React.MouseEvent) => void;\n\t/** Fired when anywhere except the 'remove' icon is clicked */\n\tonChipClick?: (e: React.MouseEvent) => void;\n\t/** 'lg' except in certain ListChips, which are intended for use in fields. */\n\tsize?: 'lg' | 'sm';\n\t/** Determines whether the chip is being dragged */\n\tisDragging?: boolean;\n\t/** Should display 'linkish' styles (aka underline) on hover */\n\tisLinkish?: boolean;\n\t/** Determines whether the 'active' or 'inactive' chip styles for 'filter' variant should be shown */\n\tisActive?: boolean;\n\t/** Determines whether the chip is disabled */\n\tdisabled?: boolean;\n\t/** Flags a chip as deactivated, this is different from disabled because the remove icon will still be functional */\n\tdeactivated?: boolean;\n\t/** Truncates the chip label, if container is too small */\n\ttruncate?: boolean;\n\t/** className never should be used. */\n\tclassName?: never;\n\t/** style never should be used. */\n\tstyle?: never;\n}\n\n/** Styles that apply to ALL chip variants and subvariants in their respective sizes */\nconst CHIP_SIZE_STYLES = {\n\tsm: 'h-4 text-2xs py-0.5 min-w-min px-1',\n\tlg: 'h-6 text-xs py-1'\n};\n\n/**\n * The chip base.\n */\nexport default function ChipBase(props: ChipBaseProps): React.JSX.Element {\n\tconst {\n\t\tvariant,\n\t\tlabel,\n\t\tcolor = 'default',\n\t\tisActive,\n\t\tdisabled,\n\t\tdeactivated,\n\t\tonIconClick,\n\t\tonChipClick,\n\t\tsize = 'lg',\n\t\tisLinkish,\n\t\ttruncate = true,\n\t\tleftIcon\n\t} = props;\n\n\tconst shouldShowIcon = !!onIconClick;\n\n\tconst cursorStyles = onChipClick ? 'cursor-pointer' : 'cursor-default';\n\n\tconst linkishStyles = isLinkish ? 'hover:underline' : '';\n\n\t//Variant padding is handled here. Many variants and subvariants have specific padding requirements.\n\tconst paddingStyles = React.useMemo(() => {\n\t\tif (size === 'lg') {\n\t\t\t// Filter chips require a little extra styling\n\t\t\tif (variant === 'filter') {\n\t\t\t\t// AND/OR FILTER operator chips have specific padding\n\t\t\t\tif (color === 'blue-gray') {\n\t\t\t\t\treturn `px-2 min-w-10`;\n\t\t\t\t}\n\t\t\t\t//Filter chips with left icon are 'compact' but NOT small\n\t\t\t\tif (leftIcon) {\n\t\t\t\t\treturn `px-2 ${isActive ? '' : 'border'}`;\n\t\t\t\t}\n\t\t\t\t// All other lg filter chips\n\t\t\t\treturn `px-4 min-w-10 ${!disabled && isActive ? '' : 'border'}`;\n\t\t\t}\n\t\t\t// If an icon is being shown, extra padding needs to be added around the icon as well.\n\t\t\tif (shouldShowIcon) {\n\t\t\t\treturn `px-4 min-w-10`;\n\t\t\t}\n\t\t\t// standard 'lg' chip padding and sizing\n\t\t\telse {\n\t\t\t\treturn 'px-2 min-w-8';\n\t\t\t}\n\t\t}\n\n\t\tif (variant === 'filter') {\n\t\t\treturn 'px-2';\n\t\t}\n\n\t\t//small chip standard padding\n\t\treturn '';\n\t}, [size, variant, shouldShowIcon, color, leftIcon, disabled, isActive]);\n\n\tlet colorStyles = `component-chip-${variant}-${color}`;\n\n\tif (isActive) {\n\t\tcolorStyles = `component-chip-${variant}-${color}-enabled`;\n\t}\n\n\tif (disabled) {\n\t\tcolorStyles = `component-chip-${variant}-disabled cursor-not-allowed`;\n\t}\n\n\tif (deactivated) {\n\t\tcolorStyles += ` bg-opacity-30`;\n\t}\n\n\tconst chipStyles = `rounded-1 flex flex-row items-center justify-center max-w-min ${!disabled ? 'hover:shadow' : ''} ${paddingStyles} ${cursorStyles} ${CHIP_SIZE_STYLES[size]} ${colorStyles} ${linkishStyles}`;\n\n\treturn (\n\t\t
\n\t\t\t{leftIcon && (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)}\n\t\t\t
{label}
\n\t\t\t{shouldShowIcon && (\n\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 * as React from 'react';\nimport ChipBase from './ChipBase';\nimport { LogicalChipColor } from './types';\nimport { Icon } from '../Icon';\n\n/** Base interface for LogicalChip props */\nexport interface LogicalChipCommonProps {\n\t/** Fired when the chip is clicked */\n\tonChipClick?: (e: React.MouseEvent) => void;\n\t/** Rotates the chip slightly to indicate dragging */\n\tisDragging?: boolean;\n\t/** Changes the chip to the 'error' color. */\n\tisError?: boolean;\n\t/** className never should be used. */\n\tclassName?: never;\n\t/** style never should be used. */\n\tstyle?: never;\n\t/** flag that puts the chip in a deactivated state where the remove icon is still enabled, but the chip is grayed out */\n\tisDeactivated?: boolean;\n}\n\nexport type LogicalChipText = 'and' | 'or' | '[' | ']';\n\n/** The set of props which are provided or narrowed in scope for specific variants */\ninterface LogicalVariantProps extends LogicalChipCommonProps {\n\t/** 'logical' chips handle the other syntactical bits for building a query. */\n\tvariant: 'logical';\n\t/** Any text for a 'data' chip, but narrowed to specific syntax for 'logical' chips */\n\tlabel: LogicalChipText;\n\t/** isEditing never should be used. */\n\tisEditing?: never;\n\t/** onRemove never should be used. */\n\tonRemove?: never;\n}\n\ninterface DataVariantProps extends LogicalChipCommonProps {\n\t/** 'data' chips display an assertion or partial assertion. */\n\tvariant: 'data';\n\t/** Applied record related colors and icons to visually associate the chip with a record */\n\tsubvariant?: 'name' | 'company' | 'position' | 'content';\n\t/** enables visual indication for custom fields */\n\tisCustomField?: boolean;\n\t/** Any text for a 'data' chip, but narrowed to specific syntax for 'logical' chips */\n\tlabel: string;\n\t/** Fired when the 'remove' icon is clicked */\n\tonRemove?: (e: React.MouseEvent) => void;\n\t/** Only necessary for 'data' chips. Changes the chip to 'edit' color. */\n\tisEditing?: boolean;\n}\n\ntype LogicalChipProps = LogicalVariantProps | DataVariantProps;\n\n/**\n * A Logical Chip. Comes with two variants, with slightly differing prop interfaces.\n * See the types defined in the LogicalChip file to see exactly what is omitted and/or more strictly defined.\n */\nexport const LogicalChip: React.FC = (props): React.JSX.Element => {\n\tconst { onChipClick, isError, isDragging } = props;\n\n\tlet color: LogicalChipColor = 'default';\n\n\tconst isDataChip = props.variant === 'data';\n\n\tlet icon;\n\n\tif (isError) {\n\t\tcolor = 'error';\n\t}\n\n\tlet removeEventCallback = undefined;\n\n\t// variant specific properties! You can't pass these if it's not a 'data' variant.\n\tif (props.variant === 'data') {\n\t\tif (!isError) {\n\t\t\tif (props.isEditing) {\n\t\t\t\tcolor = 'edit';\n\t\t\t} else if (isDataChip) {\n\t\t\t\tif (props.subvariant === 'content') {\n\t\t\t\t\tcolor = 'blue';\n\t\t\t\t\ticon = 'body-text';\n\t\t\t\t} else {\n\t\t\t\t\tcolor = props.subvariant ?? 'blue';\n\t\t\t\t\ticon = props.isCustomField ? 'custom-indicator' : props.subvariant;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tremoveEventCallback = props.onRemove;\n\t}\n\n\treturn (\n\t\t
\n\t\t\t\n\t\t\t{isError && isDataChip && (\n\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 * as React from 'react';\nimport ChipBase from './ChipBase';\nimport { ListChipColor } from './types';\nimport { UnionIconAlias } from '../Icon';\n\n/** Base interface for ListChip props */\nexport interface ListChipCommonProps {\n\t/** className never should be used. */\n\tclassName?: never;\n\t/** style never should be used. */\n\tstyle?: never;\n}\n\n/** Size options for list chips */\ntype ListTextChipSizes = 'lg' | 'sm';\n\n/** The set of props which are provided or narrowed in scope for specific variants */\nexport interface ListTextProps extends ListChipCommonProps {\n\t/** 'text' variant used to show text representing an item in a list of items */\n\tvariant: 'text';\n\t/** Use 'lg' unless in the context of a field. */\n\tsize: ListTextChipSizes;\n\t/** The text content of the chip */\n\tlabel: string;\n\t/** Optional color applied to the 'text' variant. Defaults to gray. */\n\tcolor?: ListChipColor;\n\t/** Fired when the 'remove' icon is clicked */\n\tonRemove: (e: React.MouseEvent) => void;\n\t/** Icon to be shown on the left of the chip */\n\ticon?: UnionIconAlias;\n\t/** OnClick never should be used. */\n\tonClick?: never;\n}\n\nexport interface ListCounterProps extends ListChipCommonProps {\n\t/** 'counter' variant intended to show the count of items in a list */\n\tvariant: 'counter';\n\t/** Only size 'sm' for the counter variant */\n\tsize: 'sm';\n\t/** The numeric content of the chip */\n\tlabel: number;\n\t/** Fired when the chip is clicked */\n\tonClick: (e: React.MouseEvent) => void;\n\t/** onRemove never should be used. */\n\tonRemove?: never;\n\t/** Color never should be used. */\n\tcolor?: never;\n\t/** Icon never should be used. */\n\ticon?: never;\n}\n\n/** ListChip props are a union of all possible props for all variants */\nexport type ListChipProps = ListTextProps | ListCounterProps;\n\n/**\n * A chip intended for use in/around lists. The small text and counter chips are intended for use in fields.\n */\nexport const ListChip: React.FC = (props): React.JSX.Element => {\n\tconst { variant, ...sharedProps } = props;\n\n\tlet onChipClick: ListCounterProps['onClick'],\n\t\tonRightIconClick: ListTextProps['onRemove'],\n\t\ticon: ListTextProps['icon'] = undefined;\n\n\tif (variant === 'counter') {\n\t\tonChipClick = props.onClick;\n\t} else {\n\t\tonRightIconClick = props.onRemove;\n\t\ticon = props.icon;\n\t}\n\n\treturn (\n\t\t\n\t);\n};\n","import * as React from 'react';\nimport ChipBase from './ChipBase';\nimport { FilterChipColor } from './types';\nimport { UnionIconAlias } from '../Icon';\n\ninterface FilterChipProps {\n\t/** The color applied to the chip */\n\tcolor?: FilterChipColor;\n\t/** Changes the appearance of the chip to show it is currently 'active' */\n\tisActive?: boolean;\n\t/** The label text to be shown in the chip */\n\tlabel: string;\n\t/** Whether the chip is disabled */\n\tdisabled?: boolean;\n\t/** When provided, makes the filter chip 'compact' - intended to be used with a count for a label */\n\ticon?: UnionIconAlias;\n\t/** Runs whenever any area of the chip is clicked */\n\tonClick: (e: React.MouseEvent) => void;\n\t/** size: reduces padding */\n\tsize?: 'lg' | 'sm';\n\t/** className never should be used. */\n\tclassName?: never;\n\t/** style never should be used. */\n\tstyle?: never;\n}\n\n/**\n * A filter chip. Indended to indicate the toggling of filters on lists.\n * If active, the 'active' color state is used.\n */\nexport function FilterChip(props: FilterChipProps): React.JSX.Element {\n\tconst { isActive = false, onClick, disabled, icon, ...sharedProps } = props;\n\n\treturn (\n\t\t\n\t);\n}\n","import { Transition } from 'framer-motion';\n\ninterface AnimationProps {\n\t/** Opacity values: starting value and end value respectively */\n\topacity: [number, number];\n\t/** Vertical position values (in pixels) for the animation: starting value and end value respectively */\n\ty?: [number, number];\n\t/** Horizontal position values (in pixels) for the animation: starting value and end value respectively */\n\tx?: [number, number];\n}\n\n/**\n * The default duration for animations, represented in seconds.\n */\nexport const animationDuration = 0.4;\n\n/**\n * The cubic-bezier timing function for animations.\n * Array format: [x1, y1, x2, y2]\n */\nexport const animationTimingFunction: [number, number, number, number] = [0.4, 0, 0.2, 1];\n\n/**\n * Returns the animation properties based on the specified side.\n *\n * @param side - The side from which the animation originates ('top', 'right', 'bottom', 'left').\n * @returns Animation properties for the specified side.\n */\nconst getAnimationProps = (side: string): AnimationProps => {\n\tswitch (side) {\n\t\tcase 'top':\n\t\t\treturn { opacity: [0, 1], y: [-8, 0] };\n\t\tcase 'right':\n\t\t\treturn { opacity: [0, 1], x: [8, 0] };\n\t\tcase 'bottom':\n\t\t\treturn { opacity: [0, 1], y: [8, 0] };\n\t\tcase 'left':\n\t\t\treturn { opacity: [0, 1], x: [-8, 0] };\n\t\tdefault:\n\t\t\treturn { opacity: [0, 1], y: [8, 0] };\n\t}\n};\n\ninterface ContentAnimation {\n\t/** Initial animation properties, before the animation starts */\n\tinitial: { opacity: number };\n\t/** Properties that define how the animation takes place */\n\tanimate: AnimationProps;\n\t/** Details about how the transition between animations should be handled */\n\ttransition: Transition;\n}\n\n/**\n * Constructs and returns the animation properties based on the specified side.\n *\n * @param side - Optional parameter defining the side from which the animation originates.\n * Defaults to 'bottom' if not provided.\n * @returns A set of properties to be used for content animation.\n */\nconst contentAnimation = (side: string = 'bottom'): ContentAnimation => {\n\treturn {\n\t\tinitial: { opacity: 0 },\n\t\tanimate: getAnimationProps(side),\n\t\ttransition: { duration: animationDuration, ease: animationTimingFunction }\n\t};\n};\n\nexport default contentAnimation;\n","import useMeasure, { RectReadOnly } from 'react-use-measure';\nimport { ResizeObserver } from '@juggle/resize-observer';\n\nexport interface MeasureElementOptions {\n\t// Debounce events in milliseconds\n\tdebounce?: number | { scroll: number; resize: number };\n\t// React to nested scroll changes, don't use this if you know your view is static\n\tscroll?: boolean;\n}\n\ndeclare type Result = [(element: HTMLElement | null) => void, RectReadOnly, () => void];\n\n/**\n * Using the returned ref to connect to an element, this can give the size and location details of that elements bounds.\n * @param options MeasureElementOptions to configure how the element is measured\n */\nexport function useMeasureElement(options?: MeasureElementOptions): Result {\n\treturn useMeasure({ ...options, polyfill: ResizeObserver });\n}\n","import * as React from 'react';\nimport * as PopoverRadix from '@radix-ui/react-popover';\nimport { IRootProps, ITriggerProps, IContentProps, IArrowProps, ICloseProps } from './types';\nimport contentAnimation from '../DropdownMenu/animations';\nimport { motion } from 'framer-motion';\nimport { useAppPortalTarget, usePortalOffset } from '../Hooks/UsePortalOffset';\nimport { useMeasureElement } from '../Hooks/UseMeasureElement';\n\n/**\n * Structure similar to and based around Radix-UI popover with limited set of props exposed on an as need basis.\n * See Radix-UI docs for additional documentation on exposed props and to see what else is possible.\n * https://www.radix-ui.com/primitives/docs/components/popover\n */\n\n/**\n * Example usage of building out a popover\n */\nexport function Example(): React.JSX.Element {\n\t//object to pretend as the import * as Popover from '@mst/ui/lib/Popover';\n\tconst Popover = {\n\t\tRoot,\n\t\tTrigger,\n\t\tContent,\n\t\tArrow,\n\t\tClose\n\t};\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t
I am the trigger
\n\t\t\t
\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
Hello world
\n\t\t\t\t\tClose\n\t\t\t\t
\n\t\t\t\t{/* */}\n\t\t\t
\n\t\t
\n\t);\n}\n\nconst PopoverContext = React.createContext(null);\n\n/**\n * Base node for building a popover\n * @param props\n * @returns\n */\nexport function Root(props: IRootProps): React.JSX.Element {\n\tconst childrenList = React.Children.toArray(props.children);\n\tconst triggerSlot = childrenList.filter((child: React.JSX.Element) => child.type === Trigger)?.[0];\n\tconst contentSlot = childrenList.filter((child: React.JSX.Element) => child.type === Content)?.[0];\n\n\tconst triggerElRef = React.useRef(null);\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t{triggerSlot}\n\t\t\t\t{contentSlot}\n\t\t\t\n\t\t\n\t);\n}\n\n/**\n * Element that triggers the popover to open on click\n * @param props\n * @returns\n */\nexport function Trigger(props: ITriggerProps): React.JSX.Element {\n\tconst popoverContext = React.useContext(PopoverContext);\n\n\treturn (\n\t\t\n\t\t\t{props.children}\n\t\t\n\t);\n}\n\n/**\n * Content that shows when popover is open, ALWAYS portaled out.\n * We build out our content using the Radix-UI popover.content.\n * See for content help: https://www.radix-ui.com/primitives/docs/components/popover#content\n * @param props\n * @returns\n */\nexport function Content(props: IContentProps): React.JSX.Element {\n\tconst { portal, children, style: propStyle, ...restProps } = props;\n\tconst childrenList = React.Children.toArray(children);\n\tconst arrowSlot = childrenList.filter((child: React.ReactElement) => child.type === Arrow)?.[0];\n\tconst className = `text-base${props.className ? ` ${props.className}` : ''}`;\n\tconst style = {\n\t\t...propStyle,\n\t\tzIndex: 2200000000 //we want a high z-index so popover content stays above everything even after portalled.\n\t};\n\tconst { win } = useAppPortalTarget();\n\tconst { targetPortalElement, targetPortalElementRect, targetPortalElementWindow } = usePortalOffset({\n\t\tportalTargetOverride: portal\n\t});\n\t//measuredEl and contentRef will be attached to the child of content to measure the size of the content\n\tconst [contentRef, measuredEl] = useMeasureElement();\n\t//the related trigger for the popover will be pulled from the popover context\n\tconst popoverContext = React.useContext(PopoverContext);\n\n\tconst sideOffsetInit = props.sideOffset ?? 0;\n\tconst alignOffsetInit = props.alignOffset ?? 0;\n\tconst [sideOffsetNew, setSideOffsetNew] = React.useState(sideOffsetInit);\n\tconst [alignOffsetNew, setAlignOffsetNew] = React.useState(alignOffsetInit);\n\tconst [side, setSide] = React.useState(props.side);\n\tconst [align, setAlign] = React.useState<'center' | 'start' | 'end'>(props.align ?? 'center');\n\tconst [avoidCollisions, setAvoidCollisions] = React.useState(true);\n\n\tReact.useLayoutEffect(() => {\n\t\t/** If trigger has been found defined from context then we will have a client rect to get sizing from */\n\t\tconst triggerElementRect = popoverContext?.triggerElRef?.current?.getBoundingClientRect?.();\n\t\t/** Window of the trigger element, used to match against current window and top later down below. See isDealingWithIframeHell @RelatedTo IFRAMEHELL */\n\t\tconst triggerElWindow = popoverContext?.triggerElRef?.current?.ownerDocument?.defaultView;\n\t\t/** Is our triggerelement's window the same as the target portal window, if so we dont want to do the below offsets, just let radix do its thing @RelatedTo IFRAMEHELL*/\n\t\tconst triggerElIsInPortalTargetWindow = triggerElWindow === targetPortalElementWindow;\n\t\t/** Is our triggerelement's window the same as the window the popover js running context. This is not always the same. (e.g. capture with its iframe has missmatches with this) @RelatedTo IFRAMEHELL*/\n\t\tconst triggerElIsRunningInSameJSContextWin = triggerElWindow === win;\n\t\t/** We are in some sort of handling portalling from an iframe @RelatedTo IFRAMEHELL*/\n\t\tconst IS_DEALING_WITH_IFRAME_HELL =\n\t\t\ttriggerElWindow !== globalThis.top && (!triggerElIsInPortalTargetWindow || !triggerElIsRunningInSameJSContextWin);\n\n\t\t/**\n\t\t * do offset if we have measurements for the trigger element AND\n\t\t * trigger window is not the top window AND\n\t\t * BOTH\n\t\t * trigger is NOT already portalled to our target portal window\n\t\t * OR\n\t\t * trigger is NOT already in the same js window context.\n\t\t */\n\t\tif (triggerElementRect && IS_DEALING_WITH_IFRAME_HELL) {\n\t\t\t//add frame portalling offset\n\t\t\tsetSideOffsetNew(sideOffsetInit);\n\t\t\tsetAlignOffsetNew(alignOffsetInit);\n\n\t\t\t//override side prop to force in this scenario depending on trigger location and halfway point on page\n\t\t\tsetSide('bottom');\n\t\t\tsetAvoidCollisions(false);\n\n\t\t\tif (triggerElementRect && measuredEl) {\n\t\t\t\tconst COLLISION_BUFFER = 50;\n\t\t\t\tconst relativeYTriggerPosition = triggerElementRect.top;\n\t\t\t\tconst relativeXTriggerPosition = triggerElementRect.left;\n\t\t\t\tconst spaceNeededToOpenPopoverDown = triggerElementRect.height + measuredEl.height + COLLISION_BUFFER;\n\t\t\t\tconst spaceNeededToOpenPopoverRight = triggerElementRect.width + measuredEl.width + COLLISION_BUFFER;\n\t\t\t\t//Handle vertical position\n\t\t\t\tif (relativeYTriggerPosition > targetPortalElementRect.height - spaceNeededToOpenPopoverDown) {\n\t\t\t\t\t//we want to reoffset as if we are opening up, even though we are positioning bottom\n\t\t\t\t\tsetSideOffsetNew(sideOffsetInit - triggerElementRect.height - measuredEl.height);\n\t\t\t\t\t// sideOffsetNew = yFrameOffset - sideOffsetInit - triggerElementRect.height - measuredEl.height;\n\t\t\t\t}\n\t\t\t\tif (relativeYTriggerPosition < spaceNeededToOpenPopoverDown) {\n\t\t\t\t\t//we want to reoffset as if we are opening up, even though we are positioning bottom\n\t\t\t\t\tsetSideOffsetNew(sideOffsetInit);\n\t\t\t\t}\n\t\t\t\t//Handle horizontal position\n\t\t\t\tif (relativeXTriggerPosition > targetPortalElementRect.width - spaceNeededToOpenPopoverRight) {\n\t\t\t\t\tsetAlign('start');\n\t\t\t\t\tsetAlignOffsetNew(alignOffsetInit + triggerElementRect.width - measuredEl.width);\n\t\t\t\t}\n\t\t\t\tif (relativeXTriggerPosition < spaceNeededToOpenPopoverRight) {\n\t\t\t\t\tsetAlign('start');\n\t\t\t\t\tsetAlignOffsetNew(alignOffsetInit);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}, [\n\t\ttargetPortalElement,\n\t\ttargetPortalElementWindow,\n\t\ttargetPortalElementRect,\n\t\tavoidCollisions,\n\t\tmeasuredEl,\n\t\tpopoverContext.triggerElRef,\n\t\tsideOffsetInit,\n\t\talignOffsetInit,\n\t\twin\n\t]);\n\n\treturn (\n\t\t\n\t\t\t {\n\t\t\t\t\t// only way to prevent radix from taking focus is by calling event.preventDefault\n\t\t\t\t\tif (restProps.preventAutoFocus) {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t\trestProps.onOpenAutoFocus?.(e);\n\t\t\t\t}}\n\t\t\t\t//stop mousedown propagation from exiting popover content\n\t\t\t\tonMouseDown={e => e.stopPropagation()}\n\t\t\t>\n\t\t\t\t\n\t\t\t\t\t{children}\n\t\t\t\t\t{arrowSlot}\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n\n/**\n * Arrow part of the popover. Leave out to hide.\n * @param props\n * @returns\n */\nexport function Arrow(props: IArrowProps): React.JSX.Element {\n\treturn ;\n}\n\n/**\n * Button to close the popover from within. Leave out to hide.\n * @param props\n * @returns\n */\nexport function Close(props: ICloseProps): React.JSX.Element {\n\treturn {props.children};\n}\n","import * as React from 'react';\nimport * as Tooltip from '../Tooltip';\n\n/**\n * Truncates text and provides a tooltip when placed inside a width-constrained element.\n */\nexport const TruncatedText = (props: { text: string }): JSX.Element => {\n\tconst { text } = props;\n\n\tconst ref = React.useRef(null);\n\n\tconst [isTextTruncated, setIsTextTruncated] = React.useState(false);\n\n\tReact.useLayoutEffect(() => {\n\t\tconst span = ref.current;\n\t\tif (span) {\n\t\t\t//using the isTruncated utility prevents this effect from being called?\n\t\t\tconst isTruncated = span.scrollWidth > span.clientWidth;\n\t\t\tsetIsTextTruncated(isTruncated);\n\t\t}\n\t}, []);\n\n\tconst contents = (\n\t\t\n\t\t\t{text}\n\t\t\n\t);\n\n\treturn isTextTruncated ? (\n\t\t\n\t\t\t{contents}\n\n\t\t\t\n\t\t\t\t{text}\n\t\t\t\t\n\t\t\t\n\t\t\n\t) : (\n\t\tcontents\n\t);\n};\n","import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { observer } from 'mobx-react';\nimport { action, computed, isObservableArray, makeObservable, observable, reaction } from 'mobx';\nimport { CacheProvider } from '@emotion/react';\nimport createCache from '@emotion/cache';\nimport { BasicResponse } from '@mst/api/api/base/response/BasicResponse';\nimport { FieldStore_FieldType, IOption } from '@mst/api/models/GlobalEnums';\nimport BrowserHelper from '@mst/utils/lib/Browser/BrowserHelper';\nimport Select, {\n\tGroupHeadingProps,\n\tLoadingIndicatorProps,\n\tMenuListProps,\n\tMenuProps,\n\tMultiValueProps,\n\tNoticeProps,\n\tOptionProps,\n\tSingleValueProps,\n\tValueContainerProps,\n\tcomponents\n} from 'react-select';\nimport CreatableSelect from 'react-select/creatable';\nimport { FieldValue } from '@mst/api/models/FieldValue';\nimport { ListChip } from '@mst/ui/lib/Chip';\nimport { ListChipColor } from '@mst/ui/lib/Chip/types';\nimport { Icon } from '@mst/ui/lib/Icon';\nimport { Loader } from '@mst/ui/lib/Loader';\nimport { getThemeKeyByRecordType } from '@mst/utils/lib/ColorUtils';\nimport { Has } from '@mst/utils/lib/Object/Has';\nimport { css, cx } from '@mst/ui/core/Emotion';\nimport { ActionFieldProps } from './ActionField';\nimport { CORE_PALETTE } from '../../../../../../ColorPalette';\nimport { useAppPortalTarget } from '../../Hooks/UsePortalOffset';\nimport * as Popover from '@mst/ui/lib/Popover';\nimport { FieldRecordType } from '@mst/api/models/ConfiguredField';\nimport { TruncatedList as ReactTruncatedList } from 'react-truncate-list';\nimport 'react-truncate-list/dist/styles.css';\nimport { Session } from '@mst/global';\nimport { FieldStore } from '../../../../../api/src/models/FieldStore';\nimport { validCheckForCharacterLimit, validCheckForRequired, validCheckForValidityPattern } from './FieldValidationHelpers';\nimport { FieldInputSharedStyles } from './ActionFieldSharedStyles';\nimport { ControlProps } from 'react-select/dist/declarations/src/components/Control';\nimport { TruncatedText } from '../../TruncatedText';\n\n//@todo: JTB refactor how this piece utilizes dialog calls.\n// import { Dialog } from '../Dialog/Dialog';\nclass Dialog {}\n\nenum InputChangeActionTypes {\n\tSetValue = 'set-value',\n\tInputChange = 'input-change',\n\tInputBlur = 'input-blur',\n\tMenuClose = 'menu-close'\n}\n\nexport interface FieldInput_SelectProps extends ActionFieldProps {\n\tcustomOptionComponent?: (props: any) => JSX.Element;\n\tcustomMenuComponent?: (props: any) => JSX.Element;\n\tcustomSingleValueComponent?: (props: any) => JSX.Element;\n\tcustomNoOptionsMessageComponent?: (props: any) => JSX.Element;\n\tcustomLoadingMessageComponent?: (props: any) => JSX.Element;\n\tcustomLoadingIndicatorComponent?: (props: any) => JSX.Element;\n\tdisableSearchable?: boolean;\n\tportalToSelf?: boolean;\n\tmenuPlacement?: 'auto' | 'top' | 'bottom';\n\tclearOnEnter?: boolean;\n\tonlySearchLabel?: boolean;\n\t/** Disables \"filter by label\" behavior and clientside filtering of \"previously searched results\" while new ones load */\n\tdisableStockFiltering?: boolean;\n\tnoNewOptionWithEmptyInputValue?: boolean;\n\ttabSelectsValue?: boolean;\n\t/** DO NOT USE UNLESS YOU ARE SURE YOU KNOW WHAT MESS YOU ARE GETTING INTO */\n\tuseRdndDragHack?: boolean;\n}\n\ntype ActionTypes = 'clear' | 'create-option' | 'deselect-option' | 'pop-value' | 'remove-value' | 'select-option' | 'set-value';\n\n/**\n * helper function to get the parent of the object getting scrolled\n * @param node - the node to check for scroll\n * @returns the parent node that is scrollable or null if none found\n */\nfunction getScrollParent(node: HTMLElement): HTMLElement {\n\tif (node == null) {\n\t\treturn null;\n\t}\n\n\tif (node.scrollHeight > node.clientHeight) {\n\t\treturn node;\n\t} else {\n\t\treturn getScrollParent(node.parentElement);\n\t}\n}\n\n/**\n * Get value color for a record type to be used in the select\n * @param fieldRecordType - the record type to get the color for the select\n * @returns the color for the record type\n */\nexport function getSelectColor(fieldRecordType: string): { light: string; dark: string } {\n\treturn getThemeKeyByRecordType(fieldRecordType);\n}\n\n/**\n * Converts a field record type to the UI lib standardized record color names\n */\nexport function getRecordTypeColorName(fieldRecordType: FieldRecordType): ListChipColor {\n\tlet color: ListChipColor = 'default';\n\n\tswitch (fieldRecordType) {\n\t\tcase 'candidates':\n\t\t\tcolor = 'name';\n\t\t\tbreak;\n\t\tcase 'companies':\n\t\t\tcolor = 'company';\n\t\t\tbreak;\n\t\tcase 'positions':\n\t\t\tcolor = 'position';\n\t\t\tbreak;\n\t}\n\n\treturn color;\n}\n\n/**\n * Determines if the given value is clearable.\n *\n * @param {string | string[] | IOption | IOption[]} value - The value to check.\n * @param {boolean | undefined | null} disableClear - Whether the value is clearable.\n * @returns {boolean} - True if the value is clearable, otherwise false.\n */\nexport function isValueClearable(\n\tvalue: string | string[] | IOption | IOption[],\n\tdisableClear?: boolean | undefined | null\n): boolean {\n\t// If disableClear is explicitly defined, return its value\n\tif (disableClear !== undefined && disableClear !== null) {\n\t\treturn !disableClear;\n\t}\n\t// Check if value is non-empty string or non-empty string array\n\tif (\n\t\t(typeof value === 'string' && value.length > 0) ||\n\t\t(typeof value === 'number' && value > 0) ||\n\t\t(Array.isArray(value) && value.length > 0)\n\t) {\n\t\treturn true;\n\t}\n\n\t// Check if value is a non-empty IOption or IOption array\n\tif (\n\t\ttypeof value === 'object' &&\n\t\tvalue !== null &&\n\t\t(('value' in value && value?.value?.toString().length > 0) ||\n\t\t\t(Array.isArray(value) && value.some(opt => opt.value?.toString().length > 0)))\n\t) {\n\t\treturn true;\n\t}\n\n\t// If none of the above, return false\n\treturn false;\n}\n\n/**\n * Renders a truncated list of chips\n * Intended only for use in multiselects and details\n * @TODO get a spec, then migrate to an independent UI module\n */\nexport function TruncatedList(props: {\n\tchildren: React.ReactNode[];\n\ttruncatorColor?: ListChipColor;\n\tpopoverAlign?: 'start' | 'center' | 'end';\n}): JSX.Element {\n\tconst { children, truncatorColor, popoverAlign } = props;\n\n\tconst renderTruncator = ({ hiddenItemsCount }) => {\n\t\treturn (\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\te.stopPropagation();\n\t\t\t\t\t\t\t\te.preventDefault();\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
\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
\n\t\t\t\t\t\t\t\t{(children as Array)?.slice?.(children.length - hiddenItemsCount)?.map((value, index) => {\n\t\t\t\t\t\t\t\t\treturn
{value}
;\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\treturn (\n\t\t\n\t\t\t{children}\n\t\t\n\t);\n}\n\n/**\n * Field Input to handle a Select (Multiple and Single).\n */\n@observer\nexport class FieldInput_Select extends React.Component {\n\t@observable dialogSelections = this.props.value?.();\n\t/** used as a container for results returned via an api call when searching and no options have been provided by props */\n\t@observable searchedOptions: Array<{ label: string; value: any } | IOption> = []; //used as a container for results returned via an api call.\n\t/** Saves the last known defined list of searchedOptions for re-retrieval after searched options may have been cleared. */\n\t@observable previouslySearchedOptions: Array<{ label: string; value: any } | IOption> = [];\n\t@observable private _isLoadingSearch = false;\n\t/** Setting this to true will show the loading indicator in the dropdown menu of the select. It is controlled via passing this to our react-select config */\n\t@computed get isLoadingSearch(): boolean {\n\t\treturn this._isLoadingSearch;\n\t}\n\t/** Setting this to true will show the loading indicator in the dropdown menu of the select. It is controlled via passing this to our react-select config */\n\t@action setIsLoadingSearch = (value: boolean): void => {\n\t\tthis._isLoadingSearch = value;\n\t};\n\t@observable timeout = undefined;\n\t@observable searchInputValue: string = '';\n\t@observable ref: any = React.createRef();\n\t@observable menuPlacement: 'top' | 'bottom' = 'bottom';\n\t@observable private _forceMenuOpen = false;\n\t@computed get forceMenuOpen(): boolean {\n\t\treturn this._forceMenuOpen;\n\t}\n\t@action setForceMenuOpen = (value: boolean): void => {\n\t\tthis._forceMenuOpen = value;\n\t};\n\t@observable selectRef: any = React.createRef();\n\t@observable focused: boolean = false;\n\n\tmenuRef: any;\n\n\tconstructor(props: FieldInput_SelectProps) {\n\t\tsuper(props);\n\t\tmakeObservable(this);\n\n\t\t// set the DEFAULT validity logic for this component\n\t\tthis.props?.setValidityLogic?.(() => DefaultSelectValidityLogic(this.props as FieldStore));\n\n\t\t// load options for initial selected values, selected values only have the value and not the label so load options to lookup the label\n\t\tconst hasSelectedValues =\n\t\t\t(Array.isArray(this.selectedValues) && this.selectedValues.length > 0) ||\n\t\t\t(!Array.isArray(this.selectedValues) && this.selectedValues?.value);\n\t\tif (hasSelectedValues && !this.options?.length && this.searchIsEnabled) {\n\t\t\tthis._lookupOptions(this.props.value() as string);\n\t\t}\n\n\t\t//TODO: this reconciles the field store focus state.\n\t\t//We still have instances of selects that are not directly associated with a render store\n\t\treaction(\n\t\t\t() => this.props.isFocused,\n\t\t\t(isFocused: boolean) => {\n\t\t\t\tthis.focused = isFocused;\n\t\t\t}\n\t\t);\n\t}\n\n\t@computed get options(): Array<{ label: string; value: any } | IOption> {\n\t\t//pull options from the fieldstore options first\n\t\tif (this.props.options?.length > 0) {\n\t\t\treturn this.props.options;\n\t\t}\n\t\t//if not available then fallback to searched options\n\t\tif (this.searchedOptions?.length > 0) {\n\t\t\treturn this.searchedOptions;\n\t\t}\n\t\t//if not available then fallback to previously searched\n\t\t//do not return previously searched options for display if stock filtering is disabled\n\t\t//when used for a reference to data cleared out of searchedOptions, it should be referenced directly\n\t\tif (this.previouslySearchedOptions?.length > 0 && !this.props.disableStockFiltering) {\n\t\t\treturn this.previouslySearchedOptions;\n\t\t}\n\n\t\treturn [];\n\t}\n\n\t@computed get allOptions(): Array<{ label: string; value: any; isFixed?: boolean } | IOption> {\n\t\tconst options =\n\t\t\tthis.options?.length > 0\n\t\t\t\t? this.options?.filter((option: IOption) => option?.value !== undefined || option?.options !== undefined)\n\t\t\t\t: []; //remove any undefined values unless there are groups\n\n\t\t/** This allows enableSelectAll to default to true */\n\t\tif (this.props.enableSelectAll !== false && this.props.isMulti) {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tvalue: 'selall',\n\t\t\t\t\tlabel: 'Select All',\n\t\t\t\t\tisFixed: true\n\t\t\t\t},\n\t\t\t\t...options\n\t\t\t];\n\t\t}\n\t\treturn options;\n\t}\n\n\t@computed get mobileOptions(): JSX.Element[] {\n\t\tlet selectedval = [];\n\t\tif (Array.isArray(this.selectedValues)) {\n\t\t\tselectedval = this.selectedValues;\n\t\t} else if (isObservableArray(this.selectedValues)) {\n\t\t\tselectedval = this.selectedValues;\n\t\t} else {\n\t\t\tselectedval = [this.selectedValues];\n\t\t}\n\t\tconst opts = [\n\t\t\t{\n\t\t\t\tvalue: '',\n\t\t\t\tlabel: ''\n\t\t\t},\n\t\t\t...this.allOptions.filter(opt => selectedval.findIndex(o => o.value === opt.value) < 0)\n\t\t];\n\t\treturn opts.map(opt => (\n\t\t\t\n\t\t));\n\t}\n\n\t@computed get selectedValues():\n\t\t| Array<{ value: string; label: string | JSX.Element }>\n\t\t| { value: string; label: string | JSX.Element } {\n\t\tlet val;\n\t\tif (this.props.isMulti) {\n\t\t\tval = this.props.value?.() ? this.props.value?.() : [];\n\t\t} else {\n\t\t\tval = this.props.value?.() ?? '';\n\t\t}\n\t\tif (Has(val, 'value')) {\n\t\t\treturn val as IOption;\n\t\t}\n\t\tif (Array.isArray(val)) {\n\t\t\treturn val.map(v => ({\n\t\t\t\tvalue: v,\n\t\t\t\tlabel: this.options.find(opt => opt.value === v)?.label ?? v\n\t\t\t})) as IOption[];\n\t\t}\n\t\tif (isObservableArray(val)) {\n\t\t\treturn val.map(v => ({\n\t\t\t\tvalue: v,\n\t\t\t\tlabel: this.options.find(opt => opt.value === v)?.label ?? v\n\t\t\t})) as IOption[];\n\t\t}\n\t\tif (val === '' && !this.props.isMulti && this.props.placeholder) {\n\t\t\t//if there are no selected values and we have a placeholder then show it\n\t\t\treturn null;\n\t\t}\n\t\treturn { value: val, label: this.options.find(opt => opt.value === val)?.label ?? val } as IOption;\n\t}\n\n\t@computed get commonProps(): Partial\n\t\t\t\t\t{this.mobileOptions}\n\t\t\t\t\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t{this.props.allowCustomOption ? (\n\t\t\t\t\t\t\n\t\t\t\t\t) : (\n\t\t\t\t\t\t;\n}\n","import * as React from 'react';\nimport { observable, makeObservable, computed } from 'mobx';\nimport { observer, Observer } from 'mobx-react';\nimport { DateTime } from 'luxon';\nimport { Calendar } from 'react-calendar';\nimport { CORE_PALETTE } from '../../../../../../ColorPalette';\nimport { FieldStore } from '@mst/api/models/FieldStore';\nimport {\n\tDateTimeFormat,\n\tDateTimeISOForServerToIdentifyAsUTC,\n\tDateTimeISOWithNoTZOffset,\n\tDateTimeToLocale\n} from '@mst/utils/lib/DateAndTime/DateTimeUtil';\nimport { darken, getThemeKeyByRecordType, lighten } from '@mst/utils/lib/ColorUtils';\nimport { css } from '../../../core/Emotion';\nimport * as Popover from '../../Popover';\nimport { validCheckForRequired } from './FieldValidationHelpers';\nimport { Icon } from '../../Icon';\nimport { FieldInputSharedStyles } from './ActionFieldSharedStyles';\n\nexport enum DateTimeMode {\n\tDateOnly = 'DateOnly',\n\tTimeOnly = 'TimeOnly',\n\tDateAndTime = 'DateAndTime',\n\tDateWithSeparateTime = 'DateWithSeparateTime',\n\tMonthAndYear = 'MonthAndYear',\n\tDateRange = 'DateRange'\n}\n\ninterface FieldInput_DateTimeProps {\n\tdateTimeMode: DateTimeMode;\n\tforceOpen?: boolean;\n\tinitCallback?: any;\n\tforwardRef?: any;\n\tchangeFormatAsUTC?: boolean;\n\tstartOrEnd?: 'start' | 'end';\n\tjumpInterval?: JumpInterval;\n\tonEndClick?: () => void;\n\tforwardOpen?: (fn: (value: boolean) => void) => void;\n}\n\n/**\n * Action field to handle date and time.\n */\n@observer\nexport class FieldInput_DateTime extends React.Component {\n\t@observable isOpen = false;\n\t@observable textInputValue = '';\n\t@observable activeStartDate = new Date();\n\t@observable clickableRef = React.createRef();\n\n\tchangeDate = (newDate: Date): void => {\n\t\tlet dateAsString = undefined;\n\n\t\tif (newDate.toString() !== 'Invalid Date') {\n\t\t\tdateAsString = this.props.changeFormatAsUTC\n\t\t\t\t? DateTimeISOForServerToIdentifyAsUTC(newDate)\n\t\t\t\t: DateTimeISOWithNoTZOffset(newDate);\n\t\t}\n\n\t\tthis.props.onChange?.(dateAsString);\n\t\tthis.onBlur();\n\t\tthis.props.setDirty?.(true);\n\t\tthis.props.checkValidity?.();\n\t};\n\n\tchangeDates = (newDates: Date[]): void => {\n\t\tif (newDates.length <= 1) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst datesAsString = [undefined, undefined];\n\n\t\tif (newDates[0].toString() !== 'Invalid Date') {\n\t\t\tdatesAsString[0] = this.props.changeFormatAsUTC\n\t\t\t\t? DateTimeISOForServerToIdentifyAsUTC(newDates[0])\n\t\t\t\t: DateTimeISOWithNoTZOffset(newDates[0]);\n\t\t}\n\n\t\tif (newDates[1].toString() !== 'Invalid Date') {\n\t\t\tdatesAsString[1] = this.props.changeFormatAsUTC\n\t\t\t\t? DateTimeISOForServerToIdentifyAsUTC(newDates[1])\n\t\t\t\t: DateTimeISOWithNoTZOffset(newDates[1]);\n\t\t}\n\n\t\tthis.props.onChange?.(datesAsString);\n\t\tthis.onBlur();\n\t\tthis.props.setDirty?.(true);\n\t\tthis.props.checkValidity?.();\n\t};\n\n\tconstructor(props: FieldStore & FieldInput_DateTimeProps) {\n\t\tsuper(props);\n\t\tmakeObservable(this);\n\n\t\tthis.props.setValidityLogic?.((): boolean => {\n\t\t\tconst props = this.props.current ? this.props.current() : this.props;\n\t\t\tlet isValid = true;\n\t\t\tlet hint = undefined;\n\t\t\tisValid = validCheckForRequired(props, reason => {\n\t\t\t\thint = reason;\n\t\t\t});\n\t\t\tprops.setValid(isValid, hint);\n\t\t\treturn isValid;\n\t\t});\n\n\t\tif (this.props.forwardOpen) {\n\t\t\tthis.props.forwardOpen((value: boolean) => (this.isOpen = value));\n\t\t}\n\t}\n\n\t// Computed property to check if it's TimeOnly mode\n\t@computed get isTimeOnly(): boolean {\n\t\treturn this.props.dateTimeMode === DateTimeMode.TimeOnly;\n\t}\n\n\t// Computed property to check if clearing is allowed\n\t@computed get canClear(): boolean {\n\t\treturn !this.props.isDisabled && !this.props.readonly && (!this.props.disableClear || this.isTimeOnly);\n\t}\n\n\t// Computed property to check if the date has value(s)\n\t@computed get hasValue(): boolean {\n\t\tif (Array.isArray(this.date)) {\n\t\t\treturn this.date.every(value => value instanceof Date);\n\t\t}\n\t\treturn this.date instanceof Date;\n\t}\n\n\t@computed get date(): Date | Date[] {\n\t\tif (this.props.dateTimeMode === DateTimeMode.DateRange) {\n\t\t\tlet startDate = new Date();\n\t\t\tlet endDate = new Date();\n\t\t\tconst dtValue = this.props.value();\n\t\t\tif (Array.isArray(dtValue) && dtValue.length > 0) {\n\t\t\t\tconst dtList = dtValue?.length > 0 ? dtValue : [];\n\t\t\t\tif (dtList.length > 0) {\n\t\t\t\t\tstartDate = new Date(dtList[0]);\n\t\t\t\t\tendDate = new Date(dtList[1]);\n\t\t\t\t\tif (startDate.toString() === 'Invalid Date') {\n\t\t\t\t\t\tstartDate = undefined;\n\t\t\t\t\t\tif (this.isOpen) {\n\t\t\t\t\t\t\tstartDate = DateTime.local().set({ hour: 0, minute: 0, second: 0, millisecond: 0 }).toJSDate();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif (endDate.toString() === 'Invalid Date') {\n\t\t\t\t\t\tendDate = undefined;\n\t\t\t\t\t\tif (this.isOpen) {\n\t\t\t\t\t\t\tendDate = DateTime.local().set({ hour: 0, minute: 0, second: 0, millisecond: 0 }).toJSDate();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn [startDate, endDate];\n\t\t\t}\n\t\t}\n\n\t\tlet dateValue: Date = new Date();\n\t\tconst dt = this.props.value() ? this.props.value().toString() : '';\n\t\tdateValue = new Date(dt);\n\t\tif (dateValue.toString() === 'Invalid Date') {\n\t\t\tdateValue = undefined;\n\t\t\tif (this.isOpen) {\n\t\t\t\tdateValue = DateTime.local().set({ hour: 0, minute: 0, second: 0, millisecond: 0 }).toJSDate();\n\t\t\t}\n\t\t}\n\t\treturn dateValue;\n\t}\n\n\tonBlur = (): void => {\n\t\tif (this.isOpen === true) {\n\t\t\tthis.isOpen = false;\n\t\t}\n\t\tif (this.props.isFocused) {\n\t\t\tthis.props.checkValidity?.();\n\t\t\tthis.props.onBlur?.();\n\t\t}\n\t};\n\n\tonFocus = (): void => {\n\t\t//initialize on first focus for time\n\t\tif (this.props.dateTimeMode === DateTimeMode.TimeOnly) {\n\t\t\tthis.textInputValue = this.getTextDateTimeOutput();\n\t\t}\n\t\tthis.props.onFocus?.();\n\t\tthis.props.checkValidity?.();\n\t};\n\n\tgetTextDateTimeOutput = (): string => {\n\t\tif (!this.props.value() || !this.props.value()?.[0]) {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (this.props.dateTimeMode === DateTimeMode.DateRange) {\n\t\t\tconst [startDate, endDate] = this.date as Date[];\n\t\t\tif (this.props.startOrEnd === 'start' && endDate) {\n\t\t\t\treturn DateTimeToLocale(startDate, DateTimeFormat.DateSimple);\n\t\t\t} else if (endDate) {\n\t\t\t\treturn DateTimeToLocale(endDate, DateTimeFormat.DateSimple);\n\t\t\t} else {\n\t\t\t\treturn '';\n\t\t\t}\n\t\t}\n\n\t\tconst date: Date = this.date as Date;\n\t\tconst dt = this.props.value() ? this.props.value() : '';\n\t\tif (dt.length <= 0 || this.props.value() === undefined) {\n\t\t\treturn '';\n\t\t}\n\t\tif (this.props.dateTimeMode === DateTimeMode.DateAndTime) {\n\t\t\treturn DateTimeToLocale(date, DateTimeFormat.DateTimeSimple);\n\t\t} else if (this.props.dateTimeMode === DateTimeMode.MonthAndYear) {\n\t\t\treturn DateTimeToLocale(date, DateTimeFormat.DateMonthAndYear);\n\t\t} else if (this.props.dateTimeMode === DateTimeMode.DateWithSeparateTime) {\n\t\t\treturn DateTimeToLocale(date, DateTimeFormat.DateSimple);\n\t\t} else if (this.props.dateTimeMode === DateTimeMode.DateOnly) {\n\t\t\treturn DateTimeToLocale(date, DateTimeFormat.DateSimple);\n\t\t} else if (this.props.dateTimeMode === DateTimeMode.TimeOnly) {\n\t\t\treturn DateTimeToLocale(date, DateTimeFormat.TimeShort);\n\t\t}\n\t};\n\n\t@computed get textInputOutput(): string {\n\t\treturn this.getTextDateTimeOutput();\n\t}\n\n\t//clear out the date to be undefined.\n\tclearDate = (e: React.SyntheticEvent): void => {\n\t\te.stopPropagation();\n\t\tthis.isOpen = false;\n\t\tif (this.date !== undefined) {\n\t\t\tthis.props.setDirty?.(true);\n\t\t}\n\t\tthis.props.onChange?.(null);\n\t\tthis.onBlur();\n\t};\n\n\tprivate helperCleanStartDate = (startDateTime: DateTime) => {\n\t\tlet newDateTime = DateTime.fromJSDate(new Date());\n\t\tnewDateTime = newDateTime.set({\n\t\t\tyear: startDateTime.year,\n\t\t\tday: startDateTime.day,\n\t\t\tmonth: startDateTime.month,\n\t\t\thour: 0,\n\t\t\tminute: 0,\n\t\t\tsecond: 0,\n\t\t\tmillisecond: 0\n\t\t});\n\t\treturn newDateTime;\n\t};\n\n\tprivate helperCleanEndDate = (endDateTime: DateTime) => {\n\t\tlet newDateTime = DateTime.fromJSDate(new Date());\n\t\tnewDateTime = newDateTime.set({\n\t\t\tyear: endDateTime.year,\n\t\t\tday: endDateTime.day,\n\t\t\tmonth: endDateTime.month,\n\t\t\thour: 23,\n\t\t\tminute: 59,\n\t\t\tsecond: 59,\n\t\t\tmillisecond: 999\n\t\t});\n\t\treturn newDateTime;\n\t};\n\n\tcalendarOnClickDay = value => {\n\t\tif (Array.isArray(this.date)) {\n\t\t\tconst dateOne = DateTime.fromJSDate(this.date[0]);\n\t\t\tconst dateTwo = DateTime.fromJSDate(this.date[1]);\n\t\t\tconst currentStartDate = this.helperCleanStartDate(dateOne);\n\t\t\tconst currentEndDate = this.helperCleanEndDate(dateTwo);\n\t\t\tconst isStart = this.props.startOrEnd === 'start';\n\t\t\tconst clickedDate = DateTime.fromJSDate(value);\n\t\t\tlet cleanedClickedDate = clickedDate;\n\t\t\tif (isStart) {\n\t\t\t\tcleanedClickedDate = this.helperCleanStartDate(clickedDate);\n\t\t\t} else {\n\t\t\t\tcleanedClickedDate = this.helperCleanEndDate(clickedDate);\n\t\t\t}\n\n\t\t\t//when we dont have a full date range yet, return\n\t\t\tif (!dateOne || !dateTwo || dateOne.equals(dateTwo)) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t//clicked within range, choose dates depending on which picker we started with.\n\t\t\tif (cleanedClickedDate >= currentStartDate && cleanedClickedDate <= currentEndDate) {\n\t\t\t\tthis.isOpen = false;\n\t\t\t\tconst newStartDate = isStart ? cleanedClickedDate.toJSDate() : currentStartDate.toJSDate();\n\t\t\t\tconst newEndDate = !isStart ? cleanedClickedDate.toJSDate() : currentEndDate.toJSDate();\n\t\t\t\tthis.changeDates([newStartDate, newEndDate]);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (isStart) {\n\t\t\t\tif (cleanedClickedDate > currentStartDate) {\n\t\t\t\t\t//should restart picker, fallback to default range behavior in calendarOnChange\n\t\t\t\t} else {\n\t\t\t\t\t//outside of range, less than existing start date, select new start date and close\n\t\t\t\t\tthis.isOpen = false;\n\t\t\t\t\tthis.changeDates([cleanedClickedDate.toJSDate(), currentEndDate.toJSDate()]);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (cleanedClickedDate > currentEndDate) {\n\t\t\t\t\t//outside of range, greater than existing end date, select new end date and close\n\t\t\t\t\tthis.isOpen = false;\n\t\t\t\t\tthis.changeDates([currentStartDate.toJSDate(), cleanedClickedDate.toJSDate()]);\n\t\t\t\t} else {\n\t\t\t\t\t//should restart picker, fallback to default range behavior in calendarOnChange\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tcalendarOnChange = (value: Date | Date[], event: React.SyntheticEvent) => {\n\t\tevent?.stopPropagation();\n\t\tif (this.props.dateTimeMode === DateTimeMode.DateRange) {\n\t\t\tlet startDate = undefined;\n\t\t\tlet endDate = undefined;\n\t\t\t//start date\n\t\t\tconst valueDTOne = DateTime.fromJSDate(value[0]);\n\t\t\tstartDate = this.helperCleanStartDate(valueDTOne);\n\n\t\t\t//end date\n\t\t\tconst valueDTTwo = DateTime.fromJSDate(value[1]);\n\t\t\tendDate = this.helperCleanEndDate(valueDTTwo);\n\n\t\t\tthis.changeDates([startDate.toJSDate(), endDate.toJSDate()]);\n\t\t} else {\n\t\t\t//single date time picker\n\t\t\tconst valueDT = DateTime.fromJSDate(value as Date);\n\t\t\tlet currentDate = DateTime.fromJSDate(\n\t\t\t\t(this.date as Date) ?? DateTime.local().set({ hour: 0, minute: 0, second: 0, millisecond: 0 }).toJSDate()\n\t\t\t);\n\n\t\t\tcurrentDate = currentDate.set({\n\t\t\t\tyear: valueDT.year,\n\t\t\t\tday: valueDT.day,\n\t\t\t\tmonth: valueDT.month\n\t\t\t});\n\n\t\t\tthis.changeDate(currentDate.toJSDate());\n\t\t}\n\t};\n\n\trender(): JSX.Element {\n\t\tif (this.props.viewmode === 'noneditable') {\n\t\t\treturn (\n\t\t\t\t
\n\t\t\t\t\t{this.textInputOutput}\n\t\t\t\t
\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t {\n\t\t\t\t\tthis.clickableRef = ref;\n\t\t\t\t\tthis.props.forwardRef?.(ref);\n\t\t\t\t}}\n\t\t\t\tclassName={`flex w-full h-full`}\n\t\t\t\tonClick={() => {\n\t\t\t\t\t!this.props.isDisabled && !this.props.readonly && this.onFocus();\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t {\n\t\t\t\t\t\tif (!this.props.isDisabled && !this.props.readonly) {\n\t\t\t\t\t\t\tthis.isOpen = e;\n\t\t\t\t\t\t}\n\t\t\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\tif (e.key === 'Enter') {\n\t\t\t\t\t\t\t\t\t\tthis.clickableRef.current.click();\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\tdisabled={this.props.isDisabled || this.props.readonly}\n\t\t\t\t\t\t\t\tvalue={this.textInputOutput}\n\t\t\t\t\t\t\t\tclassName={`${FieldInputSharedStyles.initInputStyle()} ${FieldInputSharedStyles.basedOnInputState(this.props)} ${S.inputStyles(this.props.startOrEnd)}`}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{(this.props.startOrEnd === undefined || this.props.startOrEnd === 'end') &&\n\t\t\t\t\t\t\t\tthis.canClear &&\n\t\t\t\t\t\t\t\tthis.hasValue &&\n\t\t\t\t\t\t\t\t!this.isTimeOnly && (\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
\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{(this.props.startOrEnd === undefined || this.props.startOrEnd === 'end') && (\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\t\n\t\t\t\t\t\t e.stopPropagation()}\n\t\t\t\t\t\t\tonMouseDown={e => e.stopPropagation()}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.props.dateTimeMode !== DateTimeMode.TimeOnly && !this.props.isDisabled && (\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\t\t {\n\t\t\t\t\t\t\t\t\t\t\t\tif (action === 'onChange') {\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tthis.activeStartDate = activeStartDate;\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\tonClickDay={this.calendarOnClickDay}\n\t\t\t\t\t\t\t\t\t\t\tcalendarType={'US'}\n\t\t\t\t\t\t\t\t\t\t\tonClickMonth={(value: Date) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (this.props.dateTimeMode === DateTimeMode.MonthAndYear) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst valueDT = DateTime.fromJSDate(value);\n\t\t\t\t\t\t\t\t\t\t\t\t\tlet currentDate = DateTime.fromJSDate(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(this.date as Date) ??\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tDateTime.local().set({ hour: 0, minute: 0, second: 0, millisecond: 0 }).toJSDate()\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentDate = currentDate.set({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tyear: valueDT.year,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tday: valueDT.day,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tmonth: valueDT.month\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.changeDate(currentDate.toJSDate());\n\t\t\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\tclassName={S.themeCalendar(getThemeKeyByRecordType(this.props.fieldRecordType))}\n\t\t\t\t\t\t\t\t\t\t\tselectRange={this.props.dateTimeMode === DateTimeMode.DateRange}\n\t\t\t\t\t\t\t\t\t\t\tonChange={this.calendarOnChange}\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\n\t\t\t\t\t\t\t{(this.props.dateTimeMode === DateTimeMode.DateAndTime || this.props.dateTimeMode === DateTimeMode.TimeOnly) && (\n\t\t\t\t\t\t\t\t {\n\t\t\t\t\t\t\t\t\t\tthis.changeDate(newDate);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tclassName={S.themeTimeSlider()}\n\t\t\t\t\t\t\t\t\tjumpInterval={this.props.jumpInterval}\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\nconst S = {\n\tclearDateIcon: () =>\n\t\t`fill-basegray-700 dark:(fill-basegray-50) ${css`\n right:28px;\n top:2px;\n svg{\n display: inline-block;\n line-height: 1;\n stroke-width: 0;\n }\n `}`,\n\tthemeTimeSlider: () => 'sh-bg-secondary',\n\ticonStyle: () => css`\n position:absolute;\n right:0px;\n top:0px;\n height:100%;\n display:flex;\n align-items:center;\n z-index:10;\n width:28px;\n `,\n\tthemeCalendar: (color: { light: string; dark: string }) => css`\n border: 0px solid black !important;\n width: 275px !important;\n background-color: ${CORE_PALETTE.light[600]};\n color: ${CORE_PALETTE.basegray[700]};\n .dark & {\n background-color: ${CORE_PALETTE.dark[600]};\n color: ${CORE_PALETTE.basegray[100]};\n }\n\n button {\n color: ${CORE_PALETTE.basegray[700]} !important;\n background-color: ${CORE_PALETTE.light[600]};\n }\n\n .dark & button {\n color: ${CORE_PALETTE.basegray[50]} !important;\n background-color: ${CORE_PALETTE.dark[600]};\n }\n\n //FROM REACT-CALENDAR STYLES start\n .react-calendar {\n width: 350px;\n max-width: 100%;\n background: white;\n border: 1px solid #a0a096;\n font-family: Arial,Helvetica,sans-serif;\n line-height: 1.125em\n }\n\n .react-calendar--doubleView {\n width: 700px\n }\n\n .react-calendar--doubleView .react-calendar__viewContainer {\n display: flex;\n margin: -.5em\n }\n\n .react-calendar--doubleView .react-calendar__viewContainer>* {\n width: 50%;\n margin: .5em\n }\n\n .react-calendar,.react-calendar *,.react-calendar *:before,.react-calendar *:after {\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n box-sizing: border-box\n }\n\n .react-calendar button {\n margin: 0;\n border: 0;\n outline: none\n }\n\n .react-calendar button:enabled:hover {\n cursor: pointer\n }\n\n .react-calendar__navigation {\n display: flex;\n height: 44px;\n margin-bottom: 1em\n }\n\n .react-calendar__navigation button {\n min-width: 44px;\n background: none\n }\n\n .react-calendar__navigation button:disabled {\n background-color: #f0f0f0\n }\n\n .react-calendar__navigation button:enabled:hover,.react-calendar__navigation button:enabled:focus {\n background-color: #e6e6e6\n }\n\n .react-calendar__month-view__weekdays {\n text-align: center;\n text-transform: uppercase;\n font-weight: 700;\n font-size: .75em\n }\n\n .react-calendar__month-view__weekdays__weekday {\n padding: .5em\n }\n\n .react-calendar__month-view__weekNumbers .react-calendar__tile {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: .75em;\n font-weight: 700\n }\n\n .react-calendar__month-view__days__day--weekend {\n color: #d10000\n }\n\n .react-calendar__month-view__days__day--neighboringMonth {\n color: #757575\n }\n\n .react-calendar__year-view .react-calendar__tile,.react-calendar__decade-view .react-calendar__tile,.react-calendar__century-view .react-calendar__tile {\n padding: 2em .5em\n }\n\n .react-calendar__tile {\n max-width: 100%;\n padding: 10px 6.6667px;\n background: none;\n text-align: center;\n line-height: 16px\n }\n\n .react-calendar__tile:disabled {\n background-color: #f0f0f0\n }\n\n .react-calendar__tile:enabled:hover,.react-calendar__tile:enabled:focus {\n background-color: #e6e6e6\n }\n\n .react-calendar__tile--now {\n background: #ffff76\n }\n\n .react-calendar__tile--now:enabled:hover,.react-calendar__tile--now:enabled:focus {\n background: #ffffa9\n }\n\n .react-calendar__tile--hasActive {\n background: #76baff\n }\n\n .react-calendar__tile--hasActive:enabled:hover,.react-calendar__tile--hasActive:enabled:focus {\n background: #a9d4ff\n }\n\n .react-calendar__tile--active {\n background: #006edc;\n color: #fff\n }\n\n .react-calendar__tile--active:enabled:hover,.react-calendar__tile--active:enabled:focus {\n background: #1087ff\n }\n\n .react-calendar--selectRange .react-calendar__tile--hover {\n background-color: #e6e6e6\n }\n //FROM REACT-CALENDAR STYELES END\n\n\n .react-calendar__month-view__weekdays__weekday {\n color: ${CORE_PALETTE.basegray[700]} !important;\n }\n\n .dark & .react-calendar__month-view__weekdays__weekday {\n color: ${CORE_PALETTE.basegray[50]} !important;\n }\n\n .react-calendar__month-view__days__day--weekend {\n color: ${CORE_PALETTE.basegray[400]} !important;\n }\n\n .dark & .react-calendar__month-view__days__day--weekend {\n color: ${CORE_PALETTE.basegray[100]} !important;\n }\n\n .react-calendar__tile--now {\n background: ${CORE_PALETTE.light[900]};\n }\n\n .dark & .react-calendar__tile--now {\n background: ${CORE_PALETTE.dark[900]};\n }\n\n .react-calendar__tile--hasActive {\n background: ${CORE_PALETTE.light[300]};\n color: ${CORE_PALETTE.basegray[700]} !important;\n }\n\n .dark & .react-calendar__tile--hasActive {\n background: ${CORE_PALETTE.light[300]};\n color: ${CORE_PALETTE.basegray[50]} !important;\n }\n\n .react-calendar__navigation button:enabled:hover,\n .react-calendar__navigation button:enabled:focus {\n background-color: ${CORE_PALETTE.light[900]} !important;\n }\n\n .dark & .react-calendar__navigation button:enabled:hover,\n .dark & .react-calendar__navigation button:enabled:focus {\n background-color: ${CORE_PALETTE.dark[900]} !important;\n }\n\n .react-calendar__tile:enabled:hover,\n .react-calendar__tile:enabled:focus {\n background-color: ${color.light} !important;\n color: ${CORE_PALETTE.basegray[700]} !important;\n }\n\n .dark & .react-calendar__tile:enabled:hover,\n .dark & .react-calendar__tile:enabled:focus {\n background-color: ${color.dark} !important;\n color: ${CORE_PALETTE.basegray[700]} !important;\n }\n\n .react-calendar__tile--active {\n background: ${color.light};\n color: ${CORE_PALETTE.basegray[700]} !important;\n }\n .react-calendar__tile--range{\n background: ${lighten(color.light, 20, true)};\n color: ${CORE_PALETTE.basegray[700]} !important;\n }\n .react-calendar__tile--rangeStart{\n background: ${color.light};\n color: ${CORE_PALETTE.basegray[700]} !important;\n }\n .react-calendar__tile--rangeEnd{\n background: ${color.light};\n color: ${CORE_PALETTE.basegray[700]} !important;\n }\n .react-calendar__navigation button[disabled] {\n background-color: ${CORE_PALETTE.light[600]};\n }\n &.react-calendar--selectRange .react-calendar__tile--hover {\n background: ${lighten(color.light, 20, true)} !important;\n color: ${CORE_PALETTE.basegray[700]} !important;\n }\n\n .dark & .react-calendar__tile--active {\n background: ${color.dark};\n color: ${CORE_PALETTE.basegray[50]} !important;\n }\n .dark & .react-calendar__tile--range{\n background: ${lighten(color.dark, 20, true)};\n color: ${CORE_PALETTE.basegray[600]} !important;\n }\n .dark & .react-calendar__tile--rangeStart{\n background: ${color.dark};\n color: ${CORE_PALETTE.basegray[600]} !important;\n }\n .dark & .react-calendar__tile--rangeEnd{\n background: ${color.dark};\n color: ${CORE_PALETTE.basegray[600]} !important;\n }\n .dark & .react-calendar__navigation button[disabled] {\n background-color: ${CORE_PALETTE.dark[600]};\n }\n .dark &.react-calendar--selectRange .react-calendar__tile--hover {\n background: ${lighten(color.dark, 20, true)} !important;\n color: ${CORE_PALETTE.basegray[600]} !important;\n }\n `,\n\tinputStyles: (startOrEnd: 'start' | 'end' | undefined) => {\n\t\tswitch (startOrEnd) {\n\t\t\tcase 'start':\n\t\t\t\treturn '!pr-0.5';\n\t\t\tcase 'end':\n\t\t\t\treturn '!pl-0.5 !pr-0 overflow-clip';\n\t\t\tdefault:\n\t\t\t\treturn 'overflow-clip';\n\t\t}\n\t}\n};\n\nexport enum JumpInterval {\n\tQUARTERLY = 15,\n\tHALF_HOUR = 30,\n\tHOURLY = 60\n}\n\nexport interface TimeSliderProps {\n\tdateTime?: Date;\n\tonChange: (date: Date) => void;\n\tclassName?: string;\n\tonHoverOption?: (timeAsText: string) => void;\n\tjumpInterval?: JumpInterval;\n}\n\nconst MINUTES_JUMP = 15;\nconst MINUTES_IN_A_DAY = 1440 - 15; //subtract 15 minutes since 12am is represented by 0 so we don't need it to also appear for 1440\n\nexport const TimeSlider = observer((props: TimeSliderProps) => {\n\tconst dateTime = props.dateTime ?? new Date();\n\tconst [timeValues, setTimeValues] = React.useState([]);\n\tconst ref: any = React.useRef(null);\n\tconst currentDate = DateTime.fromJSDate(dateTime);\n\tconst now = DateTime.fromJSDate(new Date());\n\n\tconst jumpInterval: number = props.jumpInterval ? props.jumpInterval : MINUTES_JUMP;\n\n\tReact.useEffect(() => {\n\t\tlet tempArray = [];\n\t\tfor (let i = 0; i <= MINUTES_IN_A_DAY; i += jumpInterval) {\n\t\t\ttempArray.push(i);\n\t\t}\n\t\ttempArray = tempArray.map((item, index) => {\n\t\t\tconst hour = Math.floor(item / 60);\n\t\t\tconst minute = item % 60;\n\t\t\tconst datetime = now.set({ hour, minute });\n\t\t\treturn {\n\t\t\t\ttext: DateTimeToLocale(datetime.toJSDate(), DateTimeFormat.TimeShort),\n\t\t\t\thour,\n\t\t\t\tminute,\n\t\t\t\tjsDate: datetime.toJSDate(),\n\t\t\t\tid: index\n\t\t\t};\n\t\t});\n\n\t\tsetTimeValues(tempArray);\n\t\tsetTimeout(() => {\n\t\t\tref.current?.scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tblock: 'start'\n\t\t\t});\n\t\t}, 10);\n\t}, []);\n\n\t/** onSelection handle */\n\tfunction onSelection(date: Date) {\n\t\tconst baseValueDate = new Date(dateTime);\n\t\tconst timeValueDate = new Date(date);\n\n\t\tbaseValueDate.setHours(timeValueDate.getHours());\n\t\tbaseValueDate.setMinutes(timeValueDate.getMinutes());\n\n\t\tprops.onChange(baseValueDate);\n\t}\n\n\tconst minuteSelect = Math.floor(currentDate.minute / jumpInterval) * jumpInterval;\n\tconst hourSelect = currentDate.hour;\n\tconst minutesAreDivisibleByFifteen = !(currentDate.minute % 15 > 0);\n\n\treturn (\n\t\t\n\t\t\t
\n\t\t\t\t{timeValues.map(item => (\n\t\t\t\t\t {\n\t\t\t\t\t\t\tonSelection(item.jsDate);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t\t\tprops.onHoverOption?.(item.text);\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.text}\n\t\t\t\t\t
\n\t\t\t\t))}\n\t\t\t\n\t\t\n\t);\n});\n\nconst Style_TimeSlider = {\n\twrapper: () => css`\n height:256px;\n width:250px;\n font-size: 16px;\n box-sizing:border-box;\n padding: 0px 12px 0px 8px;\n overflow-y:auto;\n overflow-x:none;\n `,\n\ttimeValue: isSelected => css`\n height:40px;\n width:100%;\n display:flex;\n padding-left:4px;\n cursor:pointer;\n align-items:center;\n ${\n\t\t\t\t\tisSelected\n\t\t\t\t\t\t? `\n background-color:${CORE_PALETTE.blue[500]};\n color:${CORE_PALETTE.basegray[100]};\n `\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n &:hover{\n background-color:${CORE_PALETTE.green[500]};\n color:${CORE_PALETTE.basegray[100]};\n }\n\n .dark & {\n ${\n\t\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t\t? `\n background-color:${CORE_PALETTE.blue[500]};\n color:${CORE_PALETTE.basegray[700]};\n `\n\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t}\n &:hover{\n background-color:${CORE_PALETTE.green[500]};\n color:${CORE_PALETTE.basegray[700]};\n }\n }\n `,\n\tscrollBar: (width?: number) => css`\n ::-webkit-scrollbar:horizontal {\n height:${width ?? 10}px;\n }\n ::-webkit-scrollbar {\n width: ${width ?? 10}px;\n background-color: ${CORE_PALETTE.light[300]};\n }\n .dark &::-webkit-scrollbar {\n width: ${width ?? 10}px;\n background-color: ${darken(CORE_PALETTE.light[300], undefined, true)};\n }\n ::-webkit-resizer {\n background-color: ${CORE_PALETTE.light[50]};\n border-color: ${CORE_PALETTE.light[50]};\n }\n .dark &::-webkit-resizer {\n background-color: ${CORE_PALETTE.dark[600]};\n border-color: ${CORE_PALETTE.dark[600]};\n }\n ::-webkit-scrollbar-track {\n transition: 0.5s background-color;\n background-color: ${CORE_PALETTE.light[300]};\n border-radius: 10px;\n }\n .dark &::-webkit-scrollbar-track {\n transition: 0.5s background-color;\n background-color: ${darken(CORE_PALETTE.light[300], 3, true)};\n border-radius: 10px;\n }\n ::-webkit-scrollbar-thumb {\n transition: 1s background-color;\n background-color: ${CORE_PALETTE.light[900]};\n border-radius: 10px;\n border: 1px solid ${CORE_PALETTE.light[300]};\n }\n .dark &::-webkit-scrollbar-thumb {\n transition: 1s background-color;\n background-color: ${CORE_PALETTE.dark[900]};\n border-radius: 10px;\n border: 1px solid ${darken(CORE_PALETTE.dark[600], 3, true)};\n }\n ::-webkit-scrollbar-thumb:hover {\n\n background-color: ${CORE_PALETTE.light[50]};\n }\n .dark &::-webkit-scrollbar-thumb:hover {\n\n background-color: ${CORE_PALETTE.light[300]};\n }\n *:focus, *:active {\n outline: none !important;\n outline-width: 0px !important;\n box-shadow: none !important;\n }\n .disabled{\n opacity:0.3;\n }\n `\n};\n","import * as React from 'react';\nimport { FieldStore } from '@mst/api/models/FieldStore';\nimport { ActionField } from './ActionField';\nimport { DateTimeMode, FieldInput_DateTime, JumpInterval } from './FieldInput_DateTime';\n\ninterface IDateTimeProps extends Partial {\n\tminWidth?: number;\n\tchangeFormatAsUTC?: boolean;\n\ttimeOnly?: boolean;\n\tjumpInterval?: JumpInterval;\n}\n\n/**\n * Date and Time picker with options to show or hide different parts.\n * @param props\n * @param fieldActions\n */\nexport const DateTime = (props: IDateTimeProps): JSX.Element => {\n\tconst { minWidth, changeFormatAsUTC } = props;\n\n\tif (props.dateOnly) {\n\t\tlet dateTimeMode = DateTimeMode.DateOnly;\n\t\tif (props.monthAndYearOnly) {\n\t\t\tdateTimeMode = DateTimeMode.MonthAndYear;\n\t\t}\n\t\treturn (\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t);\n\t}\n\tif (props.timeOnly) {\n\t\tconst dateTimeMode = DateTimeMode.TimeOnly;\n\t\treturn (\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t);\n\t}\n\treturn (\n\t\t
\n\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\n\t\t
\n\t);\n};\n","import * as React from 'react';\nimport { ActionField } from './ActionField';\nimport { FieldInput_Select, FieldInput_SelectProps } from './FieldInput_Select';\n\n/**\n * Multi select dropdown that combines multiselect checkbox and normal multi select\n * depending on what props are specified\n * @param props\n */\nexport const MultiSelect = (props: FieldInput_SelectProps): JSX.Element => {\n\treturn (\n\t\t\n\t\t\t\n\t\t\n\t);\n};\n","import * as React from 'react';\nimport { FieldStore } from '@mst/api/models/FieldStore';\nimport { ActionField } from './ActionField';\nimport { FieldInput_BasicText } from './FieldInput_BasicText';\n\n/**\n * Password input.\n * @param props\n * @param fieldActions\n */\nexport const Password = (props: FieldStore): JSX.Element => {\n\treturn (\n\t\t\n\t\t\t\n\t\t\n\t);\n};\n","import * as React from 'react';\nimport { Text } from './ActionField_Text';\nimport { FieldStore } from '@mst/api/models/FieldStore';\nimport { Field_Action } from '@mst/api/models/FieldAction';\n\n/**\n * Action field to map to our custom configured field type of Last Name used on the candidate field for last name.\n * @param props\n * @returns\n * @deprecated This was only created with for the sake of the additional static actions.\n * Those are being removed and placed else where off the field so this no longer is valid and will be cleaned up\n * once things are stable and we are sure we dont need this unique field moving forward.\n */\nexport function LastName(props: FieldStore): JSX.Element {\n\tconst actionsOverride = () => [...(props.actions?.() ?? []), ...LastNameSetupAvailableActions(props, props.availableActions)()];\n\treturn ;\n}\n\n/**\n * Combines together actions for an last name field given the field store for the last name and a list of available actions.\n * NOTE: UNKNOWN and ANY types used here are used because we do NOT want to bring in typeing of FieldAction that live in the web app.\n * The hope is to bring up available actions to a higher global lib at some point and maybe merge and up with ActionUI.\n * @param fieldStore fieldstore of inputType last name usually to pull values from for use inside the action fields.\n * @param availableActions list of configured Field_Actions defined specific to a record type.\n * @returns\n */\nexport function LastNameSetupAvailableActions(fieldStore: FieldStore, availableActions: unknown): () => Field_Action[] {\n\tif (availableActions) {\n\t\treturn () => [\n\t\t\t...(fieldStore.actions?.() ?? [])\n\t\t\t// (availableActions as any).Clipboard(),\n\t\t\t// (availableActions as any).SocialNetworking()\n\t\t];\n\t}\n\treturn () => [...(fieldStore.actions?.() ?? [])];\n}\n","import * as React from 'react';\nimport { FieldStore } from '@mst/api/models/FieldStore';\nimport { Select } from './ActionField_Select';\nimport { FieldValuesLookupMode } from '@mst/api/models/generated/FieldValuesLookupMode';\nimport { Preferences } from '@mst/global';\n\n/**\n * Action field to map to our custom configured field type of Title used on the candidate and position fields for title.\n * @param props\n * @returns\n */\nexport const Title = (props: FieldStore): JSX.Element => {\n\tconst allowCustomOptionOverride = Preferences.User.Use_Titles_Table_instead_of_On_The_Fly_Titles_Dropdown_Box ? false : true;\n\tconst lookupSearchModeOverride = Preferences.User.Use_Titles_Table_instead_of_On_The_Fly_Titles_Dropdown_Box\n\t\t? FieldValuesLookupMode.Lookup\n\t\t: FieldValuesLookupMode.Search;\n\treturn