{"version":3,"file":"common-lAgrgdyk.js","sources":["../../../src/foundation/ReactLoadable/index.tsx","../../../src/foundation/Components/Loading/ComponentLoader.tsx","../../../src/temp/get-config.ts","../../../src/temp/config.ts","../../../src/foundation/Utils/useQueryString.ts","../../../src/foundation/Tracking/GoogleTagManager.ts","../../../src/foundation/Events/eventEmitter.ts","../../../src/foundation/Events/useEventEmitter.ts","../../../src/foundation/OneTrust/OneTrust.tsx","../../../src/foundation/Jss/components/PlaceholderWrapper.tsx","../../../src/project/Raceteq/_Base/Theme/styles/animations.ts","../../../src/project/Raceteq/_Base/Theme/styles/splide.ts","../../../src/project/Raceteq/_Base/Theme/styles/global.ts","../../../src/project/Raceteq/_Base/Theme/variables/colors.ts","../../../src/project/Raceteq/_Base/Theme/variables/breakpoints.ts","../../../src/project/Raceteq/_Base/Theme/variables/fonts.tsx","../../../src/project/Raceteq/_Base/Theme/variables/sizes.ts","../../../src/project/Raceteq/_Base/Theme/variables/space.ts","../../../src/project/Raceteq/_Base/Theme/variables/transition.ts","../../../src/project/Raceteq/_Base/Theme/components/Text.ts","../../../src/project/Raceteq/_Base/Theme/components/Heading.ts","../../../src/project/Raceteq/_Base/Theme/components/Link.ts","../../../src/project/Raceteq/_Base/Theme/components/Checkbox.ts","../../../src/project/Raceteq/_Base/Theme/components/Select.ts","../../../src/project/Raceteq/_Base/Theme/components/Input.ts","../../../src/project/Raceteq/_Base/Theme/components/Button.ts","../../../src/project/Raceteq/_Base/Theme/default-theme.ts","../../../src/project/Raceteq/_Base/Theme/color-themes/default-color-theme.tsx","../../../src/project/Raceteq/_Base/Theme/color-themes/light-theme.tsx","../../../src/project/Raceteq/_Base/Theme/themes.ts","../../../src/project/Raceteq/_Base/Theme/variables/imageSizes.ts","../../../src/project/Raceteq/_Base/Article/getArticleTheme.ts","../../../src/project/Raceteq/Navigation/NavigationProvider/index.tsx","../../../src/foundation/Utils/cookie.ts","../../../src/project/AramcoWorld/_Base/Theme/ColorThemeContext.tsx","../../../src/project/AramcoWorld/_Base/Theme/variables/colors.ts","../../../src/project/AramcoWorld/_Base/Theme/variables/breakpoints.ts","../../../src/project/AramcoWorld/_Base/Theme/variables/fonts.tsx","../../../src/project/AramcoWorld/_Base/Theme/variables/sizes.ts","../../../src/project/AramcoWorld/_Base/Theme/variables/space.ts","../../../src/project/AramcoWorld/_Base/Theme/styles/animations.ts","../../../src/project/AramcoWorld/_Base/Theme/styles/global.ts","../../../src/project/AramcoWorld/_Base/Theme/components/Text.ts","../../../src/project/AramcoWorld/_Base/Theme/components/Heading.ts","../../../src/project/AramcoWorld/_Base/Theme/components/Link.ts","../../../src/project/AramcoWorld/_Base/Theme/components/Button.ts","../../../src/project/AramcoWorld/_Base/Theme/components/Accordion.ts","../../../src/project/AramcoWorld/_Base/Theme/components/Input.ts","../../../src/project/AramcoWorld/_Base/Theme/components/Checkbox.ts","../../../src/project/AramcoWorld/_Base/Theme/components/Select.ts","../../../src/project/AramcoWorld/_Base/Theme/default-theme.ts","../../../src/project/AramcoWorld/_Base/Theme/color-themes/default-color-theme.tsx","../../../src/project/AramcoWorld/_Base/Theme/color-themes/lightpurple-theme.tsx","../../../src/project/AramcoWorld/_Base/Theme/color-themes/ligthblue-theme.tsx","../../../src/project/AramcoWorld/_Base/Theme/color-themes/darkblue-theme.tsx","../../../src/project/AramcoWorld/_Base/Theme/color-themes/darkgreen-theme.tsx","../../../src/project/AramcoWorld/_Base/Theme/color-themes/darkpurple-theme.tsx","../../../src/project/AramcoWorld/_Base/Theme/color-themes/darkred-theme.tsx","../../../src/project/AramcoWorld/_Base/Theme/color-themes/darkyellow-theme.tsx","../../../src/project/AramcoWorld/_Base/Theme/color-themes/midred-theme.tsx","../../../src/project/AramcoWorld/_Base/Theme/color-themes/midpurple-theme.tsx","../../../src/project/AramcoWorld/_Base/Theme/color-themes/midblue-theme.tsx","../../../src/project/AramcoWorld/_Base/Theme/color-themes/midgreen-theme.tsx","../../../src/project/AramcoWorld/_Base/Theme/color-themes/midyellow-theme.tsx","../../../src/project/AramcoWorld/_Base/Theme/color-themes/lightgreen-theme.tsx","../../../src/project/AramcoWorld/_Base/Theme/color-themes/lightred-theme.tsx","../../../src/project/AramcoWorld/_Base/Theme/color-themes/lightyellow-theme.tsx","../../../src/project/AramcoWorld/_Base/Theme/color-themes/ligthgrey-theme.tsx","../../../src/project/AramcoWorld/_Base/Theme/color-themes/midgrey-theme.tsx","../../../src/project/AramcoWorld/_Base/Theme/color-themes/darkgrey-theme.tsx","../../../src/project/AramcoWorld/_Base/Theme/themes.ts","../../../src/project/AramcoWorld/_Base/Theme/variables/imageSizes.ts","../../../src/project/AramcoStadium/_Base/Theme/components/Text.ts","../../../src/project/AramcoStadium/_Base/Theme/variables/breakpoints.ts","../../../src/project/AramcoStadium/_Base/Components/grid.tsx","../../../src/project/AramcoStadium/_Base/Components/motion-box.tsx","../../../src/foundation/Dictionary/useTranslation.ts","../../../src/project/AramcoQafilah/_Base/Theme/components/Heading.ts","../../../src/project/AramcoQafilah/_Base/Theme/components/Text.ts","../../../src/project/AramcoQafilah/_Base/Theme/styles/global.ts","../../../src/project/AramcoQafilah/_Base/Utils/mapPxToRem.ts","../../../src/project/AramcoQafilah/_Base/Theme/variables/breakpoints.ts","../../../src/project/AramcoQafilah/_Base/Theme/variables/sizes.ts","../../../src/project/AramcoQafilah/_Base/Theme/variables/zIndices.ts","../../../src/project/AramcoQafilah/_Base/Theme/variables/spacing.ts","../../../src/project/AramcoQafilah/_Base/Theme/variables/transition.ts","../../../src/project/AramcoQafilah/_Base/Theme/variables/typography.ts","../../../src/project/AramcoQafilah/_Base/Theme/components/Container.ts","../../../src/project/AramcoQafilah/_Base/Theme/variables/colors.ts","../../../src/project/AramcoQafilah/_Base/Theme/components/Buttons.ts","../../../src/project/AramcoQafilah/_Base/Theme/components/Link.ts","../../../src/project/AramcoQafilah/_Base/Theme/components/Icon.ts","../../../src/project/AramcoQafilah/_Base/Theme/components/Chip.ts","../../../src/project/AramcoQafilah/_Base/Theme/components/LinkButton.ts","../../../src/project/AramcoQafilah/_Base/Theme/components/Tag.ts","../../../src/project/AramcoQafilah/_Base/Theme/components/Input.ts","../../../src/project/AramcoQafilah/_Base/Theme/components/Select.ts","../../../src/project/AramcoQafilah/_Base/Theme/default-theme.ts","../../../src/project/AramcoQafilah/_Base/Theme/color-themes/default-color-theme.ts","../../../src/project/AramcoQafilah/_Base/Theme/color-themes/amethyst-purple-color-theme.ts","../../../src/project/AramcoQafilah/_Base/Theme/color-themes/burgundy-color-theme.ts","../../../src/project/AramcoQafilah/_Base/Theme/color-themes/dark-teal-color-theme.ts","../../../src/project/AramcoQafilah/_Base/Theme/color-themes/light-blue-color-theme.ts","../../../src/project/AramcoQafilah/_Base/Theme/color-themes/orange-color-theme.ts","../../../src/project/AramcoQafilah/_Base/Theme/color-themes/dark-green-color-theme.ts","../../../src/project/AramcoQafilah/_Base/Theme/color-themes/golden-yellow-color-theme.ts","../../../src/project/AramcoQafilah/_Base/Theme/themes.ts","../../../src/project/AramcoQafilah/_Base/Theme/variables/imageSizes.ts","../../../src/project/AramcoQafilah/_Base/Theme/getColorTheme.ts","../../../src/project/AramcoQafilah/_Base/Theme/ColorThemeContext.tsx","../../../src/project/AramcoQafilah/_Base/Components/Navigation/NavigationProvider/index.tsx","../../../src/project/AramcoQafilah/Search/SiteSearch/SearchProvider.tsx","../../../src/project/AramcoTech/_Base/theme/variables/colors.ts","../../../src/project/AramcoTech/_Base/theme/color-themes/dark-blue-color-theme.tsx","../../../src/project/AramcoTech/_Base/theme/color-themes/blue-color-theme.tsx","../../../src/project/AramcoTech/_Base/theme/color-themes/dark-green-color-theme.tsx","../../../src/project/AramcoTech/_Base/theme/color-themes/grey-color-theme.tsx","../../../src/project/AramcoTech/_Base/theme/color-themes/green-extra-color-theme.tsx","../../../src/project/AramcoTech/_Base/theme/themes.ts","../../../src/project/AramcoTech/_Base/theme/getColorTheme.ts","../../../src/foundation/Jss/useSitecoreContext.ts","../../../src/foundation/LazyHydration/index.tsx","../../../src/foundation/Jss/enhancers/lazyHydrate.tsx","../../../src/foundation/Jss/mediaApi.ts","../../../src/project/AramcoTech/_Base/theme/ColorThemeContext.tsx","../../../src/project/AramcoTech/_Base/theme/utils/mapPxToRem.ts","../../../src/project/AramcoTech/_Base/theme/components/Text.ts","../../../src/project/AramcoTech/_Base/theme/components/Heading.ts","../../../src/project/AramcoTech/_Base/theme/styles/global.ts","../../../src/project/AramcoTech/_Base/theme/variables/fonts.ts","../../../src/project/AramcoTech/_Base/theme/variables/z-index.ts","../../../src/project/AramcoTech/_Base/theme/components/Container.ts","../../../src/project/AramcoTech/_Base/theme/components/Button.ts","../../../src/project/AramcoTech/_Base/theme/components/Link.ts","../../../src/project/AramcoTech/_Base/theme/components/Icon.ts","../../../src/project/AramcoTech/_Base/theme/variables/breakpoints.ts","../../../src/project/AramcoTech/_Base/theme/default-theme.ts","../../../src/project/AramcoTech/_Base/theme/variables/imageSizes.ts","../../../src/project/AramcoTech/Navigation/MainNavigation/NavigationProvider/index.tsx","../../../src/project/Raceteq/_Base/Components/Icon/index.tsx","../../../src/project/Raceteq/_Base/Components/Link/Link.tsx","../../../src/project/Raceteq/_Base/Jss/RoutableSitecoreLink.tsx","../../../src/project/Raceteq/_Base/Jss/LinkWrapper.tsx","../../../src/foundation/Jss/components/ImageWrapper.tsx","../../../src/foundation/Jss/components/FileWrapper.tsx","../../../src/foundation/Utils/dateFormatter.ts","../../../src/foundation/Jss/components/DateWrapper.tsx","../../../src/foundation/Jss/components/TextWrapper.tsx","../../../src/foundation/Jss/components/RichTextWrapper.tsx","../../../src/foundation/Jss/components/RichTextTableWrapper.tsx","../../../src/foundation/Jss/components/FieldEditFrame.tsx","../../../src/foundation/Components/Image/LazyImage.tsx","../../../src/foundation/Jss/components/AdvanceImage.tsx","../../../src/project/Raceteq/_Base/Jss/index.ts","../../../src/project/Raceteq/_Base/Components/ContentWrapper/index.tsx","../../../src/foundation/Framer/MotionBox.ts","../../../src/project/Raceteq/_Base/Components/Ribbon/index.tsx","../../../src/foundation/Utils/urls.ts","../../../src/foundation/Api/http.ts","../../../src/foundation/Api/useService.ts","../../../src/feature/Search/services/searchContentService.ts","../../../src/project/Raceteq/_Base/Components/RichText/styles.ts","../../../src/project/Raceteq/_Base/Components/Link/ChakraRouterLink.tsx","../../../src/project/Raceteq/_Base/Theme/styles/motions.ts","../../../src/project/Raceteq/_Base/Components/ArticleTypes/ArticleBaseCard.tsx","../../../src/project/Raceteq/_Base/Components/BreadcrumbNavigation/index.tsx","../../../src/project/Raceteq/_Base/Components/GenericHeader/index.tsx","../../../src/project/AramcoWorld/_Base/Components/Link/index.tsx","../../../src/project/AramcoWorld/_Base/Jss/RoutableSitecoreLink.tsx","../../../src/project/AramcoWorld/_Base/Jss/LinkWrapper.tsx","../../../src/project/AramcoWorld/_Base/Jss/index.ts","../../../src/project/AramcoWorld/_Base/Theme/themable.tsx","../../../src/project/AramcoWorld/_Base/Components/ContentWrapper/index.tsx","../../../src/project/AramcoWorld/_Base/Components/Ribbon/index.tsx","../../../src/project/AramcoWorld/_Base/Components/RichText/styles.ts","../../../src/project/AramcoWorld/_Base/SitecoreContent/constants.ts","../../../src/project/AramcoWorld/_Base/Components/Icon/index.tsx","../../../src/project/AramcoWorld/_Base/Components/Tags/TagList.tsx","../../../src/project/AramcoWorld/_Base/Theme/styles/motions.ts","../../../src/project/AramcoWorld/_Base/Components/OneTrust/styles.ts","../../../src/project/AramcoWorld/_Base/Components/OneTrust/CookieConsent.tsx","../../../src/project/AramcoWorld/Media/SimpleImagePlaceholder/SimpleImagePlaceholder.tsx","../../../src/project/AramcoWorld/Story/StoryList/StoryListItem.tsx","../../../src/project/AramcoWorld/_Base/Components/Loading/Loader.tsx","../../../src/project/AramcoWorld/Search/ResultsList/SkeletonResultItem.tsx","../../../src/project/AramcoWorld/Search/ResultsList/index.tsx","../../../src/project/AramcoStadium/_Base/Components/component-wrapper.tsx","../../../src/project/AramcoStadium/_Base/Components/link.tsx","../../../src/project/AramcoStadium/_Base/Jss/RoutableSitecoreLink.tsx","../../../src/project/AramcoStadium/_Base/Jss/LinkWrapper.tsx","../../../src/project/AramcoStadium/_Base/Jss/index.ts","../../../src/project/AramcoStadium/_Base/Theme/variables/animation.ts","../../../src/project/AramcoStadium/_Base/Components/heading.tsx","../../../src/project/AramcoStadium/_Base/Components/text.tsx","../../../src/project/AramcoStadium/Content/RichText/styles.ts","../../../src/project/AramcoStadium/_Base/Assets/icons/arrow.tsx","../../../src/project/AramcoStadium/_Base/Components/button.tsx","../../../src/project/AramcoStadium/_Base/Theme/variables/imageSizes.ts","../../../src/project/AramcoQafilah/_Base/Components/Link.tsx","../../../src/project/AramcoQafilah/_Base/Jss/RoutableSitecoreLink.tsx","../../../src/project/AramcoQafilah/_Base/Jss/LinkWrapper.tsx","../../../src/project/AramcoQafilah/_Base/Jss/index.tsx","../../../src/project/AramcoQafilah/_Base/Components/bundleIcon.tsx","../../../src/project/AramcoQafilah/_Base/Components/UI/Button.tsx","../../../src/project/AramcoQafilah/_Base/Components/Media/image.tsx","../../../src/project/AramcoQafilah/_Base/Components/UI/moduleInViewAnimationContainer.tsx","../../../src/project/AramcoQafilah/_Base/Components/UI/imageSkeletonContainer.tsx","../../../src/project/AramcoQafilah/_Base/Components/Carousel/carousel.tsx","../../../src/project/AramcoQafilah/_Base/Components/UI/Tag.tsx","../../../src/project/AramcoQafilah/_Base/Utils/formatDate.ts","../../../src/project/AramcoQafilah/_Base/Utils/formatTime.ts","../../../src/project/AramcoQafilah/_Base/Components/UI/Chip.tsx","../../../src/project/AramcoQafilah/_Base/Components/share.tsx","../../../src/project/AramcoQafilah/_Base/Components/Beadcrumbs/Breadcrumbs.tsx","../../../src/project/AramcoQafilah/_Base/Components/PageHeader/index.tsx","../../../src/project/AramcoQafilah/_Base/Components/Cards/cardInfo.tsx","../../../src/project/AramcoQafilah/_Base/Components/Cards/featuredCard.tsx","../../../src/project/AramcoQafilah/_Base/Components/moduleHeader.tsx","../../../src/project/AramcoQafilah/_Base/Components/ListCarousel/index.tsx","../../../src/project/AramcoQafilah/_Base/Components/Cards/card.tsx","../../../src/project/AramcoQafilah/Search/SiteSearch/useSearch.tsx","../../../src/project/AramcoQafilah/Search/SiteSearch/Pagination.tsx","../../../src/project/AramcoTech/_Base/components/ui/link.tsx","../../../src/project/AramcoTech/_Base/Jss/RoutableSitecoreLink.tsx","../../../src/project/AramcoTech/_Base/Jss/LinkWrapper.tsx","../../../src/project/AramcoTech/_Base/Jss/index.tsx","../../../src/project/AramcoTech/_Base/components/ui/bundle-icon.tsx","../../../src/project/AramcoTech/_Base/components/ContentSectionBoxHeader.tsx","../../../src/project/AramcoTech/_Base/theme/flex.tsx","../../../src/project/AramcoTech/_Base/layouts/component-container-context.tsx","../../../src/project/AramcoTech/_Base/layouts/container.tsx","../../../src/project/AramcoTech/_Base/theme/animations.ts","../../../src/project/AramcoTech/_Base/layouts/component-container.tsx","../../../src/project/AramcoTech/_Base/components/eventInfo.tsx","../../../src/project/AramcoTech/_Base/components/Image/ImageComponent.tsx","../../../src/project/AramcoTech/_Base/components/Image/ImageWithCaption.tsx","../../../src/project/AramcoTech/_Base/theme/themable.tsx","../../../src/project/AramcoTech/_Base/theme/styles/motions.ts","../../../src/project/AramcoTech/_Base/components/OneTrust/styles.ts","../../../src/project/AramcoTech/_Base/components/OneTrust/CookieConsent.tsx","../../../src/project/AramcoTech/_Base/components/Video/VideoOverlay.tsx","../../../src/project/AramcoTech/_Base/components/Video/VideoComponent.tsx","../../../src/project/AramcoTech/_Base/components/Video/VideoWithCaption.tsx","../../../src/project/AramcoTech/Navigation/MainNavigation/Components/NavLink.tsx","../../../src/project/AramcoTech/Navigation/MainNavigation/Components/LanguageSelector.tsx","../../../src/project/AramcoTech/Navigation/MainNavigation/index.tsx","../../../src/project/AramcoTech/Navigation/MainNavigation/Components/SubNavLink.tsx","../../../src/project/AramcoTech/Navigation/MainNavigation/Components/SubNavigation.tsx","../../../src/project/AramcoTech/_Base/components/ui/headline.tsx","../../../src/project/AramcoTech/_Base/components/ui/ModuleLink.tsx","../../../src/project/AramcoTech/_Base/modules/Article/article-header.tsx","../../../src/project/AramcoTech/_Base/components/ui/breadcrumb.tsx","../../../src/project/AramcoTech/_Base/components/breadcrumbs.tsx","../../../src/project/AramcoTech/_Base/modules/PageHeader/PageHeader.tsx","../../../src/project/AramcoTech/_Base/modules/Carousel/carousel.tsx","../../../src/project/AramcoTech/_Base/components/ModuleHeadline.tsx","../../../src/project/AramcoTech/_Base/modules/Cards/ArticleCard.tsx","../../../src/project/AramcoTech/_Base/modules/Cards/EventCard.tsx","../../../src/project/AramcoTech/_Base/modules/Cards/Card.tsx","../../../src/project/AramcoTech/_Base/modules/Carousel/OneRowCarousel.tsx","../../../src/project/AramcoTech/_Base/modules/Cards/OneRowCards.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any, no-async-promise-executor */\r\nimport {\r\n\ttype ComponentProps,\r\n\ttype ComponentType,\r\n\tcreateContext,\r\n\ttype ReactElement,\r\n\ttype ReactNode,\r\n\tuseCallback,\r\n\tuseContext,\r\n\tuseEffect,\r\n\tuseRef,\r\n\tuseState\r\n} from 'react'\r\n\r\ntype LoaderType = () => Promise>\r\ntype LoaderTypeOptional = () => Promise> | undefined\r\n\r\nconst ALL_INITIALIZERS: LoaderType[] = []\r\nconst READY_INITIALIZERS: LoaderTypeOptional[] = []\r\nconst CaptureContext = createContext<((moduleId: string) => any) | undefined>(undefined)\r\nCaptureContext.displayName = 'Capture'\r\n\r\nexport function Capture({ report, children }: {\r\n\treport(moduleId: string): any\r\n\tchildren: ReactNode\r\n}) {\r\n\treturn (\r\n\t\t\r\n\t\t\t{children}\r\n\t\t\r\n\t);\r\n}\r\n\r\nCapture.displayName = 'Capture'\r\n\r\ntype LoadableOptions = {\r\n\tloading: ComponentType<{\r\n\t\terror?: Error | unknown\r\n\t\tretry(): any\r\n\t}>;\r\n\tloader(): Promise;\r\n\trender?(loaded: T, props: P): ReactElement;\r\n\tmodules: string[];\r\n\tmoduleId: string;\r\n}\r\n\r\nexport type LoadableComponent = ComponentType}\r\n\t? Props\r\n\t: P // this conditional branch is not 100% correct. It should be never if render property is not provided\r\n>\r\n\r\nconst isModuleReady = (moduleId: string) => {\r\n\tif (typeof window !== 'undefined') {\r\n\t\tconst isReady = window.loadedModules?.some((id: string) => id === moduleId) || false;\r\n\t\treturn isReady;\r\n\t}\r\n\r\n\treturn false;\r\n}\r\n\r\ninterface LoadState {\r\n\tpromise: Promise>\r\n\tloaded?: LoadableComponent\r\n\terror?: Error | unknown\r\n}\r\n\r\nconst load = (loader: LoaderType) => {\r\n\tconst state = {\r\n\t\tloaded: undefined,\r\n\t\terror: undefined,\r\n\t} as LoadState\r\n\r\n\tstate.promise = new Promise>(async (resolve, reject) => {\r\n\t\ttry {\r\n\t\t\tresolve(state.loaded = await loader())\r\n\t\t} catch (e) {\r\n\t\t\treject(state.error = e)\r\n\t\t}\r\n\t})\r\n\r\n\treturn state\r\n}\r\n\r\ntype LoadComponent

= {\r\n\t// __esModule: true\r\n\tdefault: ComponentType

\r\n} | ComponentType

\r\n\r\nconst resolve = (obj: LoadComponent

): ComponentType

=> (obj as any)?.__esModule ? (obj as any).default : obj\r\nconst defaultRenderer = }>(\r\n\tloaded: T,\r\n\tprops: T extends {default: ComponentType} ? P : never\r\n) => {\r\n\tconst Loaded: any = resolve(loaded)\r\n\treturn \r\n}\r\n\r\ntype LoadableState = {\r\n\terror?: Error | unknown\r\n\tloaded?: LoadableComponent\r\n}\r\n\r\nfunction createLoadableComponent(\r\n\t{\r\n\t\tloading: Loading,\r\n\t\tloader,\r\n\t\tmoduleId,\r\n\t\trender = defaultRenderer as (loaded: T, props: P) => ReactElement,\r\n\t\t...opts\r\n\t}: LoadableOptions\r\n): LoadableComponent & {\r\n\t\tdisplayName: string\r\n\t\tpreload: LoaderType\r\n\t} {\r\n\tif (!Loading) {\r\n\t\tthrow new Error('react-loadable requires a `loading` component')\r\n\t}\r\n\r\n\tlet loadState: LoadState\r\n\r\n\tconst init = () => {\r\n\t\tif (!loadState) {\r\n\t\t\tloadState = load(loader as any)\r\n\t\t}\r\n\r\n\t\treturn loadState.promise\r\n\t}\r\n\r\n\tALL_INITIALIZERS.push(init)\r\n\r\n\tif (moduleId) {\r\n\t\tREADY_INITIALIZERS.push(() => {\r\n\t\t\tif (isModuleReady(moduleId)) {\r\n\t\t\t\treturn init()\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\tconst LoadableComponent = (props: ComponentProps>) => {\r\n\t\tinit()\r\n\r\n\t\tconst report = useContext(CaptureContext)\r\n\r\n\t\t// eslint-disable-next-line prefer-const\r\n\t\tlet [state, setState] = useState>({\r\n\t\t\terror: loadState.error,\r\n\t\t\tloaded: loadState.loaded\r\n\t\t})\r\n\r\n\t\tconst mountedRef = useRef(false)\r\n\t\tuseEffect(() => {\r\n\t\t\tmountedRef.current = true\r\n\t\t\treturn () => void (mountedRef.current = false)\r\n\t\t}, [])\r\n\r\n\t\tconst loadModule = useCallback(async () => {\r\n\t\t\tif (report && Array.isArray(opts.modules)) {\r\n\t\t\t\tfor (const moduleName of opts.modules) {\r\n\t\t\t\t\treport(moduleName)\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tif (loadState.error || loadState.loaded) {\r\n\t\t\t\treturn\r\n\t\t\t}\r\n\r\n\t\t\ttry {\r\n\t\t\t\tawait loadState.promise\r\n\t\t\t} catch {\r\n\t\t\t\t// empty\r\n\t\t\t} finally {\r\n\t\t\t\tconst newState = {\r\n\t\t\t\t\terror: loadState.error,\r\n\t\t\t\t\tloaded: loadState.loaded,\r\n\t\t\t\t}\r\n\t\t\t\tif (mountedRef.current) {\r\n\t\t\t\t\tsetState(newState)\r\n\t\t\t\t} else {\r\n\t\t\t\t\tstate = newState\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}, [report, mountedRef])\r\n\r\n\t\tconst retry = useCallback(async () => {\r\n\t\t\tif (!mountedRef.current) return\r\n\t\t\tsetState({ error: undefined, loaded: undefined })\r\n\t\t\tloadState = load(loader as any)\r\n\t\t\tawait loadModule()\r\n\t\t}, [loadModule])\r\n\r\n\t\tconst firstStateRef = useRef | undefined>(state)\r\n\t\tif (firstStateRef.current) {\r\n\t\t\tloadModule()\r\n\t\t\tfirstStateRef.current = undefined\r\n\t\t}\r\n\r\n\t\treturn !state.loaded || state.error\r\n\t\t\t? \r\n\t\t\t: render(state.loaded as any, props as any)\r\n\t}\r\n\r\n\tLoadableComponent.preload = init\r\n\tLoadableComponent.displayName = `LoadableComponent(${Array.isArray(opts.modules) ? opts.modules.join('-') : ''})`\r\n\r\n\treturn LoadableComponent as any\r\n}\r\n\r\nconst flushInitializers = async (initializers: (LoaderType | LoaderTypeOptional)[]): Promise => {\r\n\tconst promises = []\r\n\r\n\twhile (initializers.length) {\r\n\t\tpromises.push(initializers.pop()!())\r\n\t}\r\n\r\n\tawait Promise.all(promises)\r\n\r\n\tif (initializers.length) {\r\n\t\treturn flushInitializers(initializers)\r\n\t}\r\n}\r\n\r\nexport const preloadAll = () => {\r\n\treturn flushInitializers(ALL_INITIALIZERS)\r\n}\r\nexport const preloadReady = () => {\r\n\treturn flushInitializers(READY_INITIALIZERS)\r\n}\r\n\r\nexport const Loadable = (opts: LoadableOptions) => createLoadableComponent(opts)","import React, { type FC } from \"react\";\r\n\r\ntype ComponentLoaderProps = {\r\n\terror?: Error | unknown;\r\n\tretry?: () => void;\r\n\tcomponentName: string;\r\n}\r\n\r\nexport const ComponentLoader: FC = (props) => {\r\n\tif (props.error) {\r\n\t\t// When the loader has errored\r\n\t\tconsole.error(props.error);\r\n\t\treturn <>;\r\n\t}\r\n\r\n\t// When the loader has just started\r\n\treturn <>;\r\n\r\n};","/* eslint-disable */\n// Do not edit this file, it is auto-generated at build time!\n// See scripts/bootstrap.ts to modify the generation of this file.\n\nconst getConfig = (env: Record) => ({\n\tsitecoreApiKey: env.SITECORE_API_KEY || \"{D1BC08B1-51C4-47F3-AB6D-99C50000C800}\",\n\tsitecoreApiHost: env.SITECORE_API_HOST || \"https://backend.aramcolife.local\",\n\tjssAppName: env.JSS_APP_NAME || \"aramco-jss\",\n\tconnected: env.CONNECTED || false,\n\tdefaultLanguage: env.DEFAULT_LANGUAGE || \"en\",\n\tprojects:\n\t{\n \"AramcoQafilah\": {\n \"projectName\": \"AramcoQafilah\",\n \"siteName\": \"aramcoqafilah\"\n },\n \"AramcoStadium\": {\n \"projectName\": \"AramcoStadium\",\n \"siteName\": \"aramcostadium\"\n },\n \"AramcoTech\": {\n \"projectName\": \"AramcoTech\",\n \"siteName\": \"aramcotech\"\n },\n \"AramcoWorld\": {\n \"projectName\": \"AramcoWorld\",\n \"siteName\": \"aramcoworld\"\n },\n \"Raceteq\": {\n \"projectName\": \"Raceteq\",\n \"siteName\": \"raceteq\"\n }\n},\n\tdevProject: { projectName: undefined, siteName: undefined },\n\n});\n\nexport type SitecoreConfig = Omit, \"projects\"> & { projects: Record };\nexport default getConfig as (env: Record) => SitecoreConfig;","import getConfig from \"./get-config\"; // eslint-disable-line\r\n\r\nconst config = getConfig(import.meta.env || {});\r\nconst isServer = typeof window === \"undefined\";\r\n\r\nif (!isServer) {\r\n\tconfig.sitecoreApiHost = \"\"; // client side we want it to use the existing hostname\r\n}\r\n\r\nexport default config;","/* eslint-disable no-prototype-builtins */\r\n/* eslint-disable @typescript-eslint/no-explicit-any */\r\n\r\nimport { useLocation } from \"react-router-dom\";\r\n\r\nexport function useQueryString>(): Partial {\r\n\tconst { search } = useLocation();\r\n\tif (!search) {\r\n\t\treturn {} as T;\r\n\t}\r\n\r\n\tconst queryString = search.substring(1); // removes \"?\"\r\n\treturn convertToQueryStringObject(queryString);\r\n}\r\n\r\nexport function convertToQueryStringObject>(str: string): Partial {\r\n\tif (!str) {\r\n\t\treturn {} as Partial;\r\n\t}\r\n\r\n\tif (str.startsWith(\"?\")) {\r\n\t\tstr = str.substring(1);\r\n\t}\r\n\r\n\ttry {\r\n\t\treturn JSON.parse('{\"' + decodeURI(str).replace(/\"/g, '\\\\\"').replace(/&/g, '\",\"').replace(/=/g, '\":\"') + '\"}') as Partial;\r\n\t} catch (e) {\r\n\t\tconsole.error(e);\r\n\t\treturn {} as Partial;\r\n\t}\r\n}\r\n","export function googleTagManagerDeniedStorageScriptTag(shouldNotRender = false) {\r\n\tif (shouldNotRender) {\r\n\t\treturn \"\";\r\n\t}\r\n\r\n\treturn `function gtag() { dataLayer.push(arguments); } gtag('consent', 'default', { 'ad_storage': 'denied', 'ad_user_data': 'denied', 'ad_personalization': 'denied', 'analytics_storage': 'denied', functionality_storage: 'denied', 'wait_for_update': 500 }); gtag('set', 'ads_data_redaction', true);`;\r\n}\r\n\r\nexport function googleTagManagerScriptTag(googleAnalyticsId: string, shouldNotRender = false) {\r\n\tif (shouldNotRender) {\r\n\t\treturn \"\";\r\n\t}\r\n\r\n\treturn `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\r\n\tnew Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],\r\n\tj=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=\r\n\t'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);\r\n\t})(window,document,'script','dataLayer','${googleAnalyticsId}');`;\r\n}\r\n\r\nexport function googleTagManagerIframe(googleAnalyticsId: string, shouldNotRender = false) {\r\n\tif (shouldNotRender) {\r\n\t\treturn \"\";\r\n\t}\r\n\r\n\treturn ``;\r\n}\r\n\r\nexport function pushDataLayer(dataLayerFn: () => GTMDataLayer) {\r\n\tif (typeof window !== \"undefined\" && typeof dataLayerFn === \"function\" && window.dataLayer && Array.isArray(window.dataLayer)) {\r\n\r\n\t\tconst dataLayer = dataLayerFn();\r\n\r\n\t\tif (dataLayer.event_type === \"click\") {\r\n\t\t\twindow.dataLayer.push({\r\n\t\t\t\tevent_name: \"\",\r\n\t\t\t\tid: \"\",\r\n\t\t\t\ttype: \"\",\r\n\t\t\t\ttext: \"\",\r\n\t\t\t\turl: \"\",\r\n\t\t\t\tcount: \"\",\r\n\t\t\t\tindex: \"\",\r\n\t\t\t\tgroup: \"\",\r\n\t\t\t\titem_level: \"\",\r\n\t\t\t\tbreadcrumb: \"\",\r\n\t\t\t\tfile_type: \"\",\r\n\t\t\t\t...dataLayer\r\n\t\t\t});\r\n\t\t} else {\r\n\t\t\twindow.dataLayer.push(dataLayer);\r\n\t\t}\r\n\t}\r\n}","/* eslint-disable @typescript-eslint/no-explicit-any */\r\n\r\ntype CallbackFn = (payload: T) => void;\r\n\r\nexport class EventEmitter {\r\n\tevents: Record[]>;\r\n\r\n\tconstructor() {\r\n\t\tthis.events = {} as any;\r\n\t}\r\n\r\n\ton(event: K, callback: CallbackFn) {\r\n\t\tif (!this.events[event]) {\r\n\t\t\tthis.events[event] = [];\r\n\t\t}\r\n\r\n\t\tthis.events[event].push(callback);\r\n\r\n\t\treturn {\r\n\t\t\toff: () => this.off(event, callback)\r\n\t\t};\r\n\t}\r\n\r\n\toff(event: K, callback: CallbackFn) {\r\n\t\tif (this.events[event] && callback) {\r\n\t\t\tthis.events[event] = this.events[event].filter(x => x !== callback);\r\n\t\t}\r\n\t}\r\n\r\n\toffAll(event: keyof T) {\r\n\t\tif (this.events[event]) {\r\n\t\t\tdelete this.events[event];\r\n\t\t}\r\n\t}\r\n\r\n\temit(event: K, payload: T[K]) {\r\n\t\tif (this.events[event]) {\r\n\t\t\tthis.events[event].forEach((callback: CallbackFn) => {\r\n\t\t\t\tcallback(payload);\r\n\t\t\t});\r\n\t\t}\r\n\t}\r\n}\r\n","/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport { EventEmitter } from \"./eventEmitter\";\r\n\r\nconst eventEmitters: any = {};\r\nexport function useEventEmitter(eventsName: T[\"name\"]): EventEmitter> {\r\n\treturn (eventEmitters[eventsName] ??= new EventEmitter());\r\n}\r\n","import React, { type FC, useEffect } from \"react\";\r\nimport { Helmet } from \"react-helmet-async\";\r\nimport { type SitecoreContextValue } from \"~/foundation/Jss\";\r\nimport { useEventEmitter } from \"~/foundation/Events\";\r\nimport { type OneTrustEvent } from \"./OneTrustEvent\";\r\n\r\n\r\ntype OneTrustProps = {\r\n\tsitecoreContext: SitecoreContextValue\r\n}\r\n\r\nexport const OneTrust: FC = ({ sitecoreContext }) => {\r\n\tconst eventEmitter = useEventEmitter(\"OneTrust\");\r\n\tconst cookieConsentContext = sitecoreContext.custom.settings.cookieConsent;\r\n\r\n\tuseEffect(() => {\r\n\t\twindow.OneTrust?.OnConsentChanged((e: any) => { // eslint-disable-line\r\n\t\t\teventEmitter.emit(\"onConsentChanged\", e);\r\n\t\t})\r\n\t}, []);\r\n\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{cookieConsentContext.oneTrustID !== \"\" &&\r\n\t\t\t\t<>\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t\r\n\t)\r\n}","/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport React, { type FC } from \"react\";\r\nimport { Placeholder, type PlaceholderComponentProps } from \"@sitecore-jss/sitecore-jss-react\"; // eslint-disable-line no-restricted-imports\r\nimport { type ComponentRendering } from \"@sitecore-jss/sitecore-jss/layout\";\r\n\r\ntype PlaceholderWrapperProps = PlaceholderComponentProps & {\r\n\tcustomReactKey?: (placeholderData: ComponentRendering[], rendering: ComponentRendering, index: number) => string;\r\n\tappendKey?: string;\r\n}\r\n\r\nconst PlaceholderWrapper: FC = (props): any => {\r\n\r\n\tlet customReactKey = props.customReactKey;\r\n\tif (!customReactKey) {\r\n\t\tcustomReactKey = (placeholderData, rendering, index) => {\r\n\t\t\tconst key = rendering.uid\r\n\t\t\t\t? `${rendering.uid}-${index}`\r\n\t\t\t\t: `component-${index}`;\r\n\r\n\t\t\treturn key;\r\n\t\t}\r\n\t}\r\n\r\n\treturn ;\r\n};\r\n\r\nexport default PlaceholderWrapper;","export const keyFrames = (isRtl: boolean) => ({\r\n\tkeyFrames: {\r\n\t\t\"@keyframes fadeIn\": {\r\n\t\t\tfrom: {\r\n\t\t\t\topacity: 0,\r\n\t\t\t},\r\n\t\t\tto: {\r\n\t\t\t\topacity: 1\r\n\t\t\t}\r\n\t\t},\r\n\t\t\"@keyframes hoverIn\": {\r\n\t\t\tfrom: {\r\n\t\t\t\ttransform: isRtl ? \"translateX(105%)\" : \"translateX(-105%)\",\r\n\t\t\t},\r\n\t\t\tto: {\r\n\t\t\t\ttransform: \"translateX(0%)\",\r\n\t\t\t}\r\n\t\t},\r\n\t\t\"@keyframes hoverOut\": {\r\n\t\t\tfrom: {\r\n\t\t\t\ttransform: \"translateX(0)\",\r\n\t\t\t},\r\n\t\t\tto: {\r\n\t\t\t\ttransform: isRtl ? \"translateX(-105%)\" : \"translateX(105%)\",\r\n\t\t\t}\r\n\t\t},\r\n\t\t\"@keyframes skeleton\": {\r\n\t\t\tfrom: {\r\n\t\t\t\tborderColor: \"var(--chakra-colors-primary-brightGrey)\",\r\n\t\t\t\tbackground: \"var(--chakra-colors-primary-brightGrey)\",\r\n\t\t\t},\r\n\t\t\tto: {\r\n\t\t\t\tborderColor: \"var(--chakra-colors-primary-neutralGrey)\",\r\n\t\t\t\tbackground: \"var(--chakra-colors-primary-neutralGrey)\",\r\n\t\t\t}\r\n\t\t},\r\n\t}\r\n});\r\n\r\nexport const animations = (isRtl: boolean, color = \"currentColor\", duration = \".25s\", height = \"1px\") => ({\r\n\tunderline: {\r\n\t\tposition: \"relative\",\r\n\t\tbackground: `linear-gradient(${color}, ${color}) ${isRtl ? \"right\" : \"left\"} bottom no-repeat`,\r\n\t\tbackgroundSize: `0% ${height}`,\r\n\t\ttransition: `background-size ${duration}`,\r\n\r\n\t\t\"&:hover\": {\r\n\t\t\tbackgroundSize: `100% ${height}`\r\n\t\t},\r\n\t},\r\n\tunderlineSwoosh: {\r\n\t\tposition: \"relative\",\r\n\t\toverflow: \"hidden\",\r\n\t\t\"&:after\": {\r\n\t\t\tcontent: \"''\",\r\n\t\t\tdisplay: [\"none\", null, null, \"block\"],\r\n\t\t\tposition: \"absolute\",\r\n\t\t\tbottom: \"0\",\r\n\t\t\tw: \"100%\",\r\n\t\t\th: \"1px\",\r\n\t\t\tbackgroundColor: color,\r\n\t\t\ttransform: isRtl ? \"translateX(105%)\" : \"translateX(-105%)\",\r\n\t\t\tanimationName: \"hoverOut\",\r\n\t\t\tanimationTimingFunction: \"aramcoCubic\",\r\n\t\t\tanimationDuration: duration,\r\n\t\t},\r\n\t\t\"&:hover\": {\r\n\t\t\t\"&:after\": {\r\n\t\t\t\ttransform: \"translateX(0)\",\r\n\t\t\t\tanimationName: \"hoverIn\"\r\n\t\t\t}\r\n\t\t},\r\n\t},\r\n});","export const splideStyles = {\r\n\t'.splide__spinner': {\r\n\t\tdisplay: \"none !important\"\r\n\t},\r\n\t\"@keyframes splide-loading\": {\r\n\t\tfrom: {\r\n\t\t\ttransform: \"rotate(0)\",\r\n\t\t},\r\n\t\tto: {\r\n\t\t\ttransform: \"rotate(1turn)\"\r\n\t\t},\r\n\t},\r\n\t\".splide__track--draggable\": {\r\n\t\tWebkitTouchCallout: \"none\",\r\n\t\tuserSelect: \"none\",\r\n\t},\r\n\t\".splide__track--fade > .splide__list > .splide__slide\": {\r\n\t\tmargin: \"0!important\",\r\n\t\topacity: 0,\r\n\t\tzIndex: 0\r\n\t},\r\n\t\".splide__track--fade > .splide__list > .splide__slide.is-active\": {\r\n\t\topacity: 1,\r\n\t\tzIndex: 1,\r\n\t},\r\n\t\".splide--rtl\": {\r\n\t\tdirection: \"rtl\"\r\n\t},\r\n\t\".splide__track--ttb > .splide__list\": {\r\n\t\tdisplay: \"block\"\r\n\t},\r\n\t\".splide__container\": {\r\n\t\tboxSizing: \"border-box\",\r\n\t\tposition: \"relative\"\r\n\t},\r\n\t\".splide__list\": {\r\n\t\tbackfaceVisibility: \"hidden\",\r\n\t\tdisplay: \"flex\",\r\n\t\theight: \"100%\",\r\n\t\tmargin: \"0!important\",\r\n\t\tpadding: \"0!important\"\r\n\t},\r\n\t\".splide.is-initialized:not(.is-active) .splide__list\": {\r\n\t\tdisplay: \"block\"\r\n\t},\r\n\t\".splide__pagination\": {\r\n\t\talignItems: \"center\",\r\n\t\tdisplay: \"flex\",\r\n\t\tflexWrap: \"wrap\",\r\n\t\tjustifyContent: \"center\",\r\n\t\tmargin: \"0\",\r\n\t\tpointerEvents: \"none\"\r\n\t},\r\n\t\".splide__pagination li\": {\r\n\t\tdisplay: \"inline-block\",\r\n\t\tlineHeight: 1,\r\n\t\tlistStyleType: \"none\",\r\n\t\tmargin: 0,\r\n\t\tpointerEvents: \"auto\"\r\n\t},\r\n\t\".splide:not(.is-overflow) .splide__pagination\": {\r\n\t\tdisplay: \"none\"\r\n\t},\r\n\t\".splide__progress__bar\": {\r\n\t\twidth: 0\r\n\t},\r\n\t\".splide\": {\r\n\t\tposition: \"relative\",\r\n\t\tvisibility: \"hidden\"\r\n\t},\r\n\t\".splide.is-initialized, .splide.is-rendered\": {\r\n\t\tvisibility: \"visible\"\r\n\t},\r\n\t\".splide__slide\": {\r\n\t\tbackfaceVisibility: \"hidden\",\r\n\t\tboxSizing: \"border-box\",\r\n\t\tflexShrink: 0,\r\n\t\tlistStyleType: \"none!important\",\r\n\t\tmargin: 0,\r\n\t\tposition: \"relative\"\r\n\t},\r\n\t\".splide__slide img\": {\r\n\t\tverticalAlign: \"bottom\"\r\n\t},\r\n\t\".splide__sr\": {\r\n\t\tclip: \"rect(0 0 0 0)\",\r\n\t\tborder: 0,\r\n\t\theight: \"1px\",\r\n\t\tmargin: \"-1px\",\r\n\t\toverflow: \"hidden\",\r\n\t\tpadding: 0,\r\n\t\tposition: \"absolute\",\r\n\t\twidth: \"1px\"\r\n\t},\r\n\t\".splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause\": {\r\n\t\tdisplay: \"none\"\r\n\t},\r\n\t\".splide__toggle.is-active .splide__toggle__pause\": {\r\n\t\tdisplay: \"inline\"\r\n\t},\r\n\t\".splide__track\": {\r\n\t\toverflow: \"hidden\",\r\n\t\tposition: \"relative\",\r\n\t\tzIndex: 0\r\n\t}\r\n}","import { keyFrames } from \"./animations\";\r\nimport { splideStyles } from \"./splide\";\r\n\r\nexport const getGlobalStyling = (isRtl: boolean) => ({\r\n\tglobal: {\r\n\t\t...keyFrames(isRtl).keyFrames,\r\n\t\thtml: {\r\n\t\t\t//scrollBehavior: \"smooth\",\r\n\t\t},\r\n\t\tbody: {\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tcolor: 'primary.dark',\r\n\t\t\tbg: 'primary.grey',//'blackAlpha.50',\r\n\t\t\tlineHeight: 'base',\r\n\t\t\t'button, a': {\r\n\t\t\t\t'&:focus-visible': {\r\n\t\t\t\t\toutlineStyle: \"solid\",\r\n\t\t\t\t\toutlineWidth: \"1px\",\r\n\t\t\t\t\toutlineColor: \"primary.aramcoBlue\",\r\n\t\t\t\t\toutlineOffset: \"-1px\"\r\n\t\t\t\t},\r\n\r\n\t\t\t\t\"&.primary\": {\r\n\t\t\t\t\t\".pseudo-arrow, .link-arrow\": {\r\n\t\t\t\t\t\ttransitionProperty: \"opacity, transform\",\r\n\t\t\t\t\t\ttransitionDuration: \".5s\",\r\n\t\t\t\t\t\ttransitionTimingFunction: \"ease-out\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\".pseudo-arrow\": {\r\n\t\t\t\t\t\tdisplay: [\"none\", null, null, \"block\"],\r\n\t\t\t\t\t\topacity: 0,\r\n\t\t\t\t\t\ttransform: \"translateX(-50%)\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\".link-arrow\": {\r\n\t\t\t\t\t\ttransform: \"translateX(0)\",\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\"&:hover\": {\r\n\t\t\t\t\t\t\".pseudo-arrow\": {\r\n\t\t\t\t\t\t\ttransform: \"translateX(50%)\",\r\n\t\t\t\t\t\t\topacity: 1,\r\n\t\t\t\t\t\t\ttransitionDelay: \".15s\"\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\".link-arrow\": {\r\n\t\t\t\t\t\t\ttransform: \"translateX(100%)\",\r\n\t\t\t\t\t\t\topacity: 0,\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\t\"&.primaryCorner\": {\r\n\t\t\t\t\t\".pseudo-arrow, .link-arrow\": {\r\n\t\t\t\t\t\ttransitionProperty: \"opacity, transform\",\r\n\t\t\t\t\t\ttransitionDuration: \".5s\",\r\n\t\t\t\t\t\ttransitionTimingFunction: \"ease-out\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\".pseudo-arrow\": {\r\n\t\t\t\t\t\tdisplay: [\"none\", null, null, \"block\"],\r\n\t\t\t\t\t\topacity: 0,\r\n\t\t\t\t\t\ttransform: \"translateX(-50%)\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\".link-arrow\": {\r\n\t\t\t\t\t\ttransform: \"translateX(0)\",\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\"&:hover\": {\r\n\t\t\t\t\t\t\".pseudo-arrow\": {\r\n\t\t\t\t\t\t\ttransform: \"translateX(50%)\",\r\n\t\t\t\t\t\t\topacity: 1,\r\n\t\t\t\t\t\t\ttransitionDelay: \".15s\"\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\".link-arrow\": {\r\n\t\t\t\t\t\t\ttransform: \"translateX(100%)\",\r\n\t\t\t\t\t\t\topacity: 0,\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\t...splideStyles,\r\n\t\t\"div.rte-table\": {\r\n\t\t\toverflowX: \"auto\",\r\n\r\n\t\t\t\"thead tr\": {\r\n\t\t\t\tbgColor: \"primary.white\"\r\n\t\t\t},\r\n\r\n\t\t\t\"tr\": {\r\n\t\t\t\tborderBottom: \"1px solid\",\r\n\t\t\t\tborderColor: \"primary.greyMedium\",\r\n\t\t\t},\r\n\r\n\t\t\t\"td, th\": {\r\n\t\t\t\tp: \"1rem\",\r\n\t\t\t\tminWidth: [\"8rem\", null, null, \"12rem\"],\r\n\t\t\t\tfontSize: [\".75rem\", null, null, \".8125rem\"],\r\n\t\t\t\tlineHeight: [\"1.25\", null, null, \"1.38\"],\r\n\t\t\t\tletterSpacing: [\"-0.02em\", null, null, \"-0.03em\"],\r\n\t\t\t},\r\n\r\n\t\t\t\"th\": {\r\n\t\t\t\ttextAlign: isRtl ? \"right\" : \"left\",\r\n\t\t\t\tfontWeight: 750,\r\n\t\t\t},\r\n\r\n\t\t\t\"table\": {\r\n\t\t\t\tborder: \"0\",\r\n\t\t\t\twidth: \"100%\"\r\n\t\t\t},\r\n\r\n\t\t\t\"table thead\": {\r\n\t\t\t\tborder: \"none\",\r\n\t\t\t\toverflow: \"hidden\",\r\n\t\t\t\tpadding: \"0\",\r\n\t\t\t},\r\n\r\n\t\t\t\"table td\": {\r\n\t\t\t\tmarginBottom: 0,\r\n\t\t\t},\r\n\t\t},\r\n\r\n\t\t\".chakra-modal__content-container, .chakra-modal__overlay\": {\r\n\t\t\tzIndex: 4\r\n\t\t},\r\n\r\n\t\t\".chakra-modal__content-container[role='alertdialog'], .chakra-modal__overlay[role='alertdialog']\": {\r\n\t\t\tzIndex: 1000,\r\n\t\t},\r\n\r\n\t\t\".chakra-portal [data-popper-placement]\": {\r\n\t\t\tzIndex: \"11\" // Topping the overlay\r\n\t\t},\r\n\r\n\t\t\".animate-page-wrapper.is-loading\": {\r\n\t\t\t\".container, .page-footer\": {\r\n\t\t\t\topacity: 0\r\n\t\t\t},\r\n\t\t},\r\n\r\n\t\t\".container\": {\r\n\t\t\tposition: \"relative\",\r\n\t\t\topacity: 1,\r\n\t\t\ttransitionDuration: `.125s`,\r\n\t\t\ttransitionTimingFunction: \"aramcoCubic\",\r\n\t\t\ttransitionProperty: \"opacity\",\r\n\t\t\tminHeight: \"90vh\",\r\n\t\t},\r\n\r\n\t\t\"input[type]\": {\r\n\t\t\t\"&:focus, &:focus-within, &:focus-visible\": {\r\n\t\t\t\tboxShadow: \"none !important\"\r\n\t\t\t}\r\n\t\t},\r\n\r\n\t\t\".LazyLoad\": {\r\n\t\t\tposition: \"relative\",\r\n\r\n\t\t\t\"&:not(.is-visible)\": {\r\n\t\t\t\t\"&:after\": {\r\n\t\t\t\t\tcontent: \"''\",\r\n\t\t\t\t\tposition: \"absolute\",\r\n\t\t\t\t\theight: \"100%\",\r\n\t\t\t\t\twidth: \"100%\",\r\n\t\t\t\t\tanimationName: \"skeleton\",\r\n\t\t\t\t\tanimationIterationCount: \"infinite\",\r\n\t\t\t\t\tanimationTimingFunction: \"linear\",\r\n\t\t\t\t\tanimationDuration: \"0.8s\",\r\n\t\t\t\t\tanimationDirection: \"alternate\"\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\r\n\t\t\"img.fadeIn\": {\r\n\t\t\tanimation: \"fadeIn .5s ease-in-out forwards\"\r\n\t\t},\r\n\r\n\t}\r\n});","const primary = {\r\n\tdark: \"#1A1A1A\",\r\n\tgreyDark: \"#646464\",\r\n\tgreyMedium: \"#999B9D\",\r\n\tgrey: \"#D2D6DA\",\r\n\tgreyLight: \"#F3F3F3\",\r\n\tgreyUltraLight: \"#FBF4F4\",\r\n\twhite: \"#FFF\",\r\n\twrong: \"#FF9090\",\r\n\tyellow: \"#FFF96E\",\r\n\tred: \"#C51315\",\r\n\tblue: \"#1480DB\",\r\n\tdarkBlue: \"#1368b0\",\r\n\tgreen: \"#00AD4A\",\r\n};\r\n\r\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\r\nexport const getColors = (rtl: boolean) => ({\r\n\tprimary,\r\n});\r\n\r\ntype ColorsObj = ReturnType;\r\nexport type Colors = (ColorsObj[keyof ColorsObj]) | \"currentColor\";","export const breakpoints = {\r\n\tbase: '0em',\r\n\tsm: '30rem', //480px\r\n\tmd: '48rem', //768px\r\n\tlg: '62rem', //992px\r\n\txl: '90rem', //1440px\r\n\t'2xl': '120rem', //1920px\r\n}","export const fonts = (rtl: boolean) => ({\r\n\tfonts: {\r\n\t\theading: `'Oxanium', sans-serif`,\r\n\t\tbody: rtl ? `'Oxanium', sans-serif` : `'Oxanium', sans-serif`,\r\n\t}\r\n})\r\n","import type { ChakraTheme } from \"@chakra-ui/react\";\r\n\r\nexport const sizes: ChakraTheme[\"sizes\"] = {\r\n\t// base 1 = '4px'\r\n\tcontentWrapperWidthXL: '98rem',//max content width of 1440px\r\n\tmodulePY__SM: \"2.5rem\",\r\n\tmodulePY__LG: \"4rem\",\r\n\tarticleCornerSMWidth: \"2.59375rem\",\r\n\tarticleCornerSMHeight: \"3rem\",\r\n\tarticleCornerLGWidth: \"3.24375rem\",\r\n\tarticleCornerLGHeight: \"3.75rem\",\r\n\tarticleCornerXLWidth: \"6.875rem\",\r\n\tarticleCornerXLHeight: \"7.9375rem\",\r\n\tarticleCardRoundedCorner: \"0.5rem\",\r\n\tarticleCornerBoxSpacing: \"240px\",\r\n\theaderHeightBase: \"3.75rem\",\r\n\theaderHeightLG: \"4.375rem\",\r\n\t600: \"37.5rem\",\r\n\t880: \"55rem\",\r\n};","import type { ChakraTheme } from \"@chakra-ui/react\";\r\n\r\nexport const space: ChakraTheme[\"space\"] = {\r\n\t//base 1 = '4px'\r\n\tgridGutter: '2.125rem',\r\n\tpageGutter: '2rem',\r\n}","import type { ChakraTheme } from \"@chakra-ui/react\";\r\nimport type { Optional } from \"utility-types\";\r\n\r\nexport const transition: Optional = {\r\n\teasing: {\r\n\t\taramcoCubic: \"cubic-bezier(.35,1,.45,1)\",\r\n\t}\r\n};\r\n","import { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\n\r\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\r\nexport const text = (rtl: boolean): ComponentStyleConfig => ({\r\n\tbaseStyle: {\r\n\t\tfontFamily: 'heading',\r\n\t\tfontWeight: '300',\r\n\t\tlineHeight: 'base',\r\n\t},\r\n\tsizes: {\r\n\t\theadlineLight: {\r\n\t\t\tfontSize: [\"1.75rem\", null, null, \"2.5rem\"],//[\"28px\", null, null, \"40px\"],\r\n\t\t\tfontWeight: \"300\",\r\n\t\t\tlineHeight: \"1\",\r\n\t\t\tletterSpacing: [\"-0.035rem\", null, null, \"-0.05rem\"],\r\n\t\t},\r\n\t\theadline1: {\r\n\t\t\tfontSize: [\"2.25rem\", null, null, \"3.125rem\"],//[\"36px\", null, null, \"50px\"],\r\n\t\t\tfontWeight: '750',\r\n\t\t\tlineHeight: ['1.28', null, null, \"1.2\"],\r\n\t\t\tletterSpacing: \"-0.03em\",\r\n\t\t},\r\n\t\theadline2: {\r\n\t\t\tfontSize: [\"1.625rem\", null, null, \"2.125rem\"],//[\"26px\", null, null, \"34px\"],\r\n\t\t\tfontWeight: '750',\r\n\t\t\tlineHeight: ['1.29', null, null, \"1.31\"],\r\n\t\t\tletterSpacing: \"-0.03em\",\r\n\t\t},\r\n\t\theadline2Light: {\r\n\t\t\tfontSize: [\"1.625rem\", null, null, \"2.125rem\"],//[\"26px\", null, null, \"34px\"],\r\n\t\t\tfontWeight: '300',\r\n\t\t\tlineHeight: ['1.29', null, null, \"1.31\"],\r\n\t\t\tletterSpacing: \"-0.01em\",\r\n\t\t},\r\n\t\theadline3: {\r\n\t\t\tfontSize: [\"1.3125rem\", null, null, \"1.75rem\"],//[\"21px\", null, null, \"28px\"],\r\n\t\t\tfontWeight: '750',\r\n\t\t\tlineHeight: ['1.28', null, null, \"1.32\"],\r\n\t\t\tletterSpacing: \"-0.03em\",\r\n\t\t},\r\n\t\theadline3Light: {\r\n\t\t\tfontSize: [\"1.3125rem\", null, null, \"1.75rem\"],//[\"21px\", null, null, \"28px\"],\r\n\t\t\tfontWeight: '300',\r\n\t\t\tlineHeight: ['1.28', null, null, \"1.3\"],\r\n\t\t\tletterSpacing: \"-0.01em\",\r\n\t\t},\r\n\t\theadline4: {\r\n\t\t\tfontSize: [\"1.0625rem\", null, null, \"1.25rem\"],//[\"17px\", null, null, \"20px\"],\r\n\t\t\tfontWeight: '750',\r\n\t\t\tlineHeight: ['1.41', null, null, \"1.35\"],\r\n\t\t\tletterSpacing: \"-0.03em\",\r\n\t\t},\r\n\t\theadline4Light: {\r\n\t\t\tfontSize: [\"1.0625rem\", null, null, \"1.25rem\"],//[\"17px\", null, null, \"20px\"],\r\n\t\t\tfontWeight: '300',\r\n\t\t\tlineHeight: ['1.41', null, null, \"1.35\"],\r\n\t\t\tletterSpacing: \"-0.01em\",\r\n\t\t},\r\n\t\theadline5: {\r\n\t\t\tfontWeight: \"750\",\r\n\t\t\tfontSize: [\".75rem\", null, null, \".8125rem\"], //[\"12px\", null, null, \"13px\"],\r\n\t\t\tlineHeight: [\"1.25\", null, null, \"1.38\"],\r\n\t\t\tletterSpacing: [\"-0.02em\", null, null, \"-0.03em\"],\r\n\t\t},\r\n\t\tbody: {\r\n\t\t\tfontSize: [\"1.0625rem\", null, null, \"1.125rem\"], //[\"17px\", null, null, \"18px\"],\r\n\t\t\tfontWeight: \"300\",\r\n\t\t\tlineHeight: [\"1.41\", null, null, \"1.5\"],\r\n\t\t\tletterSpacing: \"-0.01em\",\r\n\t\t},\r\n\t\tbodySmall: {\r\n\t\t\tfontSize: [\".9375rem\", null, null, \"1rem\"], //[\"15px\", null, null, \"16px\"],\r\n\t\t\tfontWeight: \"300\",\r\n\t\t\tlineHeight: [\"1.47\", null, null, \"1.5\"],\r\n\t\t\tletterSpacing: \"-0.01em\",\r\n\t\t},\r\n\t},\r\n\tvariants: {\r\n\t\t'tagBold': {\r\n\t\t\tfontWeight: \"750\",\r\n\t\t\tfontSize: [\".75rem\", null, null, \".8125rem\"], //[\"12px\", null, null, \"13px\"],\r\n\t\t\tlineHeight: [\"1.25\", null, null, \"1.38\"],\r\n\t\t\tletterSpacing: [\"-0.02em\", null, null, \"-0.03em\"],\r\n\t\t},\r\n\t\t'tagLight': {\r\n\t\t\tfontWeight: \"300\",\r\n\t\t\tfontSize: [\".75rem\", null, null, \".8125rem\"], //[\"12px\", null, null, \"13px\"],\r\n\t\t\tlineHeight: [\"1.25\", null, null, \"1.38\"],\r\n\t\t\tletterSpacing: [\"-0.02em\", null, null, \"-0.02em\"],\r\n\t\t},\r\n\t\t'tag': {\r\n\t\t\tfontWeight: \"400\",\r\n\t\t\tfontSize: [\".75rem\", null, null, \".8125rem\"], //[\"12px\", null, null, \"13px\"],\r\n\t\t\tlineHeight: [\"1.25\", null, null, \"1.38\"],\r\n\t\t\tletterSpacing: [\"-0.02em\", null, null, \"-0.02em\"],\r\n\t\t},\r\n\t\t\"breadcrumb\": {\r\n\t\t\tfontWeight: \"300\",\r\n\t\t\tfontSize: \".75rem\",\r\n\t\t\tlineHeight: \"2\",\r\n\t\t\tletterSpacing: \"-0.02em\",\r\n\t\t}\r\n\t},\r\n});\r\n","import { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\nimport { text as ThemeTextStyling } from \"./Text\";\r\n\r\nexport const Heading = (rtl = false): ComponentStyleConfig => ({\r\n\t// The styles all Headings have in common\r\n\tbaseStyle: {\r\n\t\tfontFamily: 'heading',\r\n\t\tfontWeight: '300',\r\n\t\tlineHeight: 'base',\r\n\t},\r\n\tsizes: {\r\n\t\t...ThemeTextStyling(rtl).sizes\r\n\t},\r\n});","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\n\r\nexport const getLinkVariants = (isRtl: boolean) => ({\r\n\t'primary': {\r\n\t\tdisplay: 'inline-flex',\r\n\t\talignItems: 'center',\r\n\t\tfontSize: [\".9375rem\", null, null, \"1rem\"], //[\"15px\", null, null, \"16px\"],\r\n\t\tfontWeight: \"300\",\r\n\t\tlineHeight: [\"1.47\", null, null, \"1.5\"],\r\n\t\tletterSpacing: \"-0.01em\",\r\n\t},\r\n\t'primaryCorner': {\r\n\t\tdisplay: \"inline-flex\",\r\n\t\talignItems: \"center\",\r\n\t\tjustifyContent: \"center\",\r\n\t\tgap: 4,\r\n\t\th: \"fit-content\",\r\n\t\tw: \"fit-content\",\r\n\t\tbackgroundColor: \"primary.dark\",\r\n\t\ttextColor: \"primary.white\",\r\n\t\ttextTransform: \"lowercase\",\r\n\t\tfontWeight: \"light\",\r\n\t\tpy: 3,\r\n\t\tpl: 6,\r\n\t\tpr: 7,\r\n\t\tfontFamily: 'body',\r\n\t\ttransition: \".6s cubic-bezier(.35,1,.45,1) all\",\r\n\t\tclipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%)\",\r\n\t\t'&:hover, &:active': {\r\n\t\t\tbackgroundColor: \"primary.white\",\r\n\t\t\ttextColor: \"primary.dark\",\r\n\t\t},\r\n\t},\r\n\t'unstyled': {\r\n\t\tfontFamily: 'inherit',\r\n\t\tfontWeight: 'inherit',\r\n\t\ttransition: \"none\",\r\n\t\t'&:hover': {\r\n\t\t\ttextDecoration: \"none\"\r\n\t\t}\r\n\t}\r\n});\r\n\r\nexport type LinkVariant = keyof (ReturnType);\r\n\r\nexport const Link = (isRtl: boolean): ComponentStyleConfig => ({\r\n\tbaseStyle: {\r\n\t\tfontFamily: 'body',\r\n\t\tfontWeight: '300',\r\n\t\ttransition: \"color .3s ease-in-out\",\r\n\t},\r\n\tvariants: getLinkVariants(isRtl),\r\n\tdefaultProps: {\r\n\t\tvariant: 'unstyled',\r\n\t},\r\n});","import { createMultiStyleConfigHelpers, defineStyle } from \"@chakra-ui/react\";\r\nimport { checkboxAnatomy } from '@chakra-ui/anatomy'\r\n\r\nconst { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(checkboxAnatomy.keys);\r\n\r\nconst baseStyle = definePartsStyle({\r\n\tcontrol: {\r\n\t\tborderRadius: \"0px\",\r\n\t\tborder: \"1px solid\",\r\n\t\tborderColor: \"primary.dark\",\r\n\t\tw: \"1.5rem\",\r\n\t\th: \"1.5rem\",\r\n\t\toverflow: \"hidden\",\r\n\t\ttransition: \".6s cubic-bezier(.35,1,.45,1) all\",\r\n\t},\r\n\ticon: {\r\n\t\tcolor: \"primary.dark\",\r\n\t\th: \"2rem\",\r\n\t\tw: \"2rem\",\r\n\t\ttransition: \".6s cubic-bezier(.35,1,.45,1) all\",\r\n\t},\r\n\tlabel: {\r\n\t\tms: \"0.5rem\",\r\n\t\ttransition: \".6s cubic-bezier(.35,1,.45,1) all\",\r\n\t}\r\n});\r\n\r\nconst sizes = {\r\n\tmd: definePartsStyle({\r\n\t\tlabel: defineStyle({\r\n\t\t\tfontSize: \"xs\",\r\n\t\t\tfontFamily: \"body\",\r\n\t\t\tfontWeight: \"400\",\r\n\t\t\tlineHeight: \"1.125rem\",\r\n\t\t\tletterSpacing: \"wider\"\r\n\t\t})\r\n\t})\r\n}\r\n\r\nexport const Checkbox = defineMultiStyleConfig({ sizes, baseStyle })\r\n","import { createMultiStyleConfigHelpers } from \"@chakra-ui/react\";\r\nimport { selectAnatomy } from '@chakra-ui/anatomy'\r\n\r\nconst { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(selectAnatomy.keys);\r\n\r\nconst baseStyle = definePartsStyle({\r\n\r\n});\r\n\r\nconst newsletter = definePartsStyle({\r\n\tfield: {\r\n\t\tcursor: \"pointer\",\r\n\t\tpx: 0,\r\n\t\tpb: 3,\r\n\t\tpt: 6,\r\n\t\tborderRadius: 0,\r\n\t\theight: \"full\",\r\n\t\tcolor: \"primary.greyDark\",\r\n\t\tborderBottom: 1,\r\n\t\tborderStyle: \"dashed\",\r\n\t\tborderColor: \"primary.dark\",\r\n\t\t_placeholderShown: {\r\n\t\t\tborderStyle: \"dashed\",\r\n\t\t\tborderColor: \"primary.dark\"\r\n\t\t},\r\n\t\t_hover: {\r\n\t\t\tcolor: \"primary.dark\",\r\n\t\t\tborderStyle: \"solid\",\r\n\t\t},\r\n\t\t_focus: {\r\n\t\t\tcolor: \"primary.dark\",\r\n\t\t\tborderStyle: \"solid\"\r\n\t\t},\r\n\t\t_autofill: {\r\n\t\t\ttextFillColor: \"primary.dark\",\r\n\t\t\tboxShadow: \"0 0 0px 1000px #FFF inset\",\r\n\t\t\ttransition: \"background-color 5000s ease-in-out 0s\",\r\n\t\t},\r\n\t},\r\n\ticon: {\r\n\t\tcolor: \"primary.greyDark\",\r\n\t\tright: 0,\r\n\t}\r\n})\r\n\r\nexport const Select = defineMultiStyleConfig({ baseStyle, variants: { newsletter } })\r\n","import { createMultiStyleConfigHelpers } from \"@chakra-ui/react\";\r\nimport { inputAnatomy } from '@chakra-ui/anatomy'\r\n\r\nconst { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(inputAnatomy.keys);\r\n\r\nconst baseStyle = definePartsStyle({\r\n\tfield: {\r\n\t\t_placeholder: {\r\n\t\t\tcolor: \"primary.greyDark\"\r\n\t\t},\r\n\t},\r\n});\r\n\r\nconst newsletter = definePartsStyle({\r\n\tfield: {\r\n\t\t_placeholder: {\r\n\t\t\tcolor: \"primary.greyDark\",\r\n\t\t\tpb: 0,\r\n\t\t},\r\n\t\tborderRadius: 0,\r\n\t\tpx: 0,\r\n\t\tpb: 2,\r\n\t\theight: \"full\",\r\n\t\tborderBottom: 1,\r\n\t\tborderStyle: \"solid\",\r\n\t\tborderColor: \"primary.dark\",\r\n\t\t_placeholderShown: {\r\n\t\t\tborderStyle: \"dashed\",\r\n\t\t\tborderColor: \"primary.dark\"\r\n\t\t},\r\n\t\t_hover: {\r\n\t\t\tcolor: \"primary.dark\",\r\n\t\t\tborderStyle: \"solid\",\r\n\t\t},\r\n\t\t_focus: {\r\n\t\t\tcolor: \"primary.dark\",\r\n\t\t\tborderStyle: \"solid\"\r\n\t\t},\r\n\t\t_invalid: {\r\n\t\t\tcolor: \"primary.wrong\",\r\n\t\t},\r\n\t\t_autofill: {\r\n\t\t\ttextFillColor: \"primary.dark\",\r\n\t\t\tboxShadow: \"0 0 0px 1000px #FFF inset\",\r\n\t\t\ttransition: \"background-color 5000s ease-in-out 0s\",\r\n\t\t},\r\n\t\ttransition: \"border 0.5s ease-in-out\"\r\n\t},\r\n});\r\n\r\nexport const Input = defineMultiStyleConfig({ baseStyle, variants: { newsletter } })\r\n","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\n\r\nexport const getButtonVariants = (isRtl: boolean) => ({\r\n\t'unstyled': {\r\n\t\tdisplay: \"inline-flex\",\r\n\t\th: \"fit-content\",\r\n\t\tw: \"fit-content\",\r\n\t\ttextTransform: \"lowercase\",\r\n\t\tpy: 0,\r\n\t\tpx: 0,\r\n\t\ttransition: \".6s cubic-bezier(.35,1,.45,1) all\",\r\n\t\tminWidth: \"fit-content\",\r\n\t},\r\n\t'secondaryGrey': {\r\n\t\tdisplay: \"inline-flex\",\r\n\t\talignItems: \"center\",\r\n\t\tjustifyContent: \"center\",\r\n\t\tgap: 4,\r\n\t\th: \"fit-content\",\r\n\t\tw: \"fit-content\",\r\n\t\tbackgroundColor: \"primary.grey\",\r\n\t\ttextColor: \"primary.dark\",\r\n\t\ttextTransform: \"lowercase\",\r\n\t\tfontWeight: \"light\",\r\n\t\tpy: 3,\r\n\t\tpx: 6,\r\n\t\tfontFamily: 'body',\r\n\t\ttransition: \".6s cubic-bezier(.35,1,.45,1) all\",\r\n\t},\r\n\t'primaryCorner': {\r\n\t\tdisplay: \"inline-flex\",\r\n\t\talignItems: \"center\",\r\n\t\tjustifyContent: \"center\",\r\n\t\tgap: 4,\r\n\t\th: \"fit-content\",\r\n\t\tw: \"fit-content\",\r\n\t\tminWidth: \"fit-content\",\r\n\t\tbackgroundColor: \"primary.dark\",\r\n\t\ttextColor: \"primary.white\",\r\n\t\ttextTransform: \"lowercase\",\r\n\t\tfontWeight: \"light\",\r\n\t\tpy: 3,\r\n\t\tpl: 6,\r\n\t\tpr: 10,\r\n\t\tfontFamily: 'body',\r\n\t\ttransition: \".6s cubic-bezier(.35,1,.45,1) all\",\r\n\t\tborderRadius: \"0.5rem 0rem 0rem 0.5rem\",\r\n\t\tclipPath: \"polygon(100% 0%, 0% 0%,0% 100%, calc(100% - var(--chakra-sizes-articleCornerSMWidth)) 100%, calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .95) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .002), calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .91) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .0078), calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .86) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .0178), calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .82) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .031), calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .78) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .0485), calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .74) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .069), calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .705) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .0927), calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .672) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .1196), calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .641) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .1496), calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .614) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .1821), 100% calc(100% - var(--chakra-sizes-articleCornerSMHeight)))\",\r\n\t\t'&:hover, &:active': {\r\n\t\t\tbackgroundColor: \"primary.white\",\r\n\t\t\ttextColor: \"primary.dark\",\r\n\t\t},\r\n\t},\r\n\t'primaryCornerLight': {\r\n\t\tdisplay: \"inline-flex\",\r\n\t\talignItems: \"center\",\r\n\t\tjustifyContent: \"center\",\r\n\t\tgap: 4,\r\n\t\th: \"fit-content\",\r\n\t\tw: \"fit-content\",\r\n\t\tminWidth: \"fit-content\",\r\n\t\tbackgroundColor: \"primary.white\",\r\n\t\ttextColor: \"primary.dark\",\r\n\t\ttextTransform: \"lowercase\",\r\n\t\tfontWeight: \"light\",\r\n\t\tpy: 3,\r\n\t\tpl: 6,\r\n\t\tpr: 10,\r\n\t\tfontFamily: 'body',\r\n\t\ttransition: \".6s cubic-bezier(.35,1,.45,1) all\",\r\n\t\tborderRadius: \"0.5rem 0rem 0rem 0.5rem\",\r\n\t\tclipPath: \"polygon(100% 0%, 0% 0%,0% 100%, calc(100% - var(--chakra-sizes-articleCornerSMWidth)) 100%, calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .95) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .002), calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .91) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .0078), calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .86) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .0178), calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .82) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .031), calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .78) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .0485), calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .74) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .069), calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .705) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .0927), calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .672) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .1196), calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .641) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .1496), calc(100% - var(--chakra-sizes-articleCornerSMWidth) * .614) calc(100% - var(--chakra-sizes-articleCornerSMHeight) * .1821), 100% calc(100% - var(--chakra-sizes-articleCornerSMHeight)))\",\r\n\t\t'&:hover, &:active': {\r\n\t\t\tbackgroundColor: \"primary.dark\",\r\n\t\t\ttextColor: \"primary.white\",\r\n\t\t},\r\n\t},\r\n\t'primaryCornerNewsletter': {\r\n\t\tdisplay: \"inline-flex\",\r\n\t\talignItems: \"center\",\r\n\t\tjustifyContent: \"center\",\r\n\t\tgap: 4,\r\n\t\th: \"fit-content\",\r\n\t\tw: \"fit-content\",\r\n\t\tminWidth: \"fit-content\",\r\n\t\tbackgroundColor: \"primary.blue\",\r\n\t\tcolor: \"primary.white\",\r\n\t\ttextTransform: \"lowercase\",\r\n\t\tfontWeight: \"light\",\r\n\t\tpy: 3,\r\n\t\tpr: 6,\r\n\t\tpl: 10,\r\n\t\tfontFamily: 'body',\r\n\t\ttransition: \".6s cubic-bezier(.35,1,.45,1) background\",\r\n\t\tborderTopRightRadius: \"0.5rem\",\r\n\t\tborderBottomRightRadius: \"0.5rem\",\r\n\t\tclipPath: \"polygon(0% 100%, 100% 100%, 100% 0%, calc(var(--chakra-sizes-articleCornerSMWidth)) 0%, calc(var(--chakra-sizes-articleCornerSMWidth) * .95) calc(var(--chakra-sizes-articleCornerSMHeight) * .002), calc(var(--chakra-sizes-articleCornerSMWidth) * .91) calc(var(--chakra-sizes-articleCornerSMHeight) * .0078), calc(var(--chakra-sizes-articleCornerSMWidth) * .86) calc(var(--chakra-sizes-articleCornerSMHeight) * .0178), calc(var(--chakra-sizes-articleCornerSMWidth) * .82) calc(var(--chakra-sizes-articleCornerSMHeight) * .031), calc(var(--chakra-sizes-articleCornerSMWidth) * .78) calc(var(--chakra-sizes-articleCornerSMHeight) * .0485), calc(var(--chakra-sizes-articleCornerSMWidth) * .74) calc(var(--chakra-sizes-articleCornerSMHeight) * .069), calc(var(--chakra-sizes-articleCornerSMWidth) * .705) calc(var(--chakra-sizes-articleCornerSMHeight) * .0927), calc(var(--chakra-sizes-articleCornerSMWidth) * .672) calc(var(--chakra-sizes-articleCornerSMHeight) * .1196), calc(var(--chakra-sizes-articleCornerSMWidth) * .641) calc(var(--chakra-sizes-articleCornerSMHeight) * .1496), calc(var(--chakra-sizes-articleCornerSMWidth) * .614) calc(var(--chakra-sizes-articleCornerSMHeight) * .1821), 0% calc(var(--chakra-sizes-articleCornerSMHeight)))\",\r\n\t\t'&:hover, &:active': {\r\n\t\t\tbackgroundColor: \"primary.darkBlue\",\r\n\t\t},\r\n\t},\r\n});\r\n\r\nexport type ButtonVariant = keyof (ReturnType);\r\n\r\nexport const Button = (isRtl: boolean): ComponentStyleConfig => ({\r\n\tbaseStyle: {\r\n\t\tfontFamily: 'body',\r\n\t\tfontWeight: '300',\r\n\t\th: \"fit-content\",\r\n\t\tw: \"fit-content\",\r\n\t},\r\n\tvariants: getButtonVariants(isRtl),\r\n});","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { extendBaseTheme } from \"@chakra-ui/react\";\r\nimport { getGlobalStyling } from \"./styles/global\";\r\nimport { getColors } from \"./variables/colors\";\r\nimport { breakpoints } from \"./variables/breakpoints\";\r\nimport { fonts } from \"./variables/fonts\";\r\nimport { sizes } from \"./variables/sizes\";\r\nimport { space } from \"./variables/space\";\r\nimport { transition } from \"./variables/transition\";\r\nimport { text } from \"./components/Text\";\r\nimport { Heading } from \"./components/Heading\";\r\nimport { Link } from \"./components/Link\";\r\nimport { type DeepPartial } from \"utility-types\";\r\nimport { Checkbox } from \"./components/Checkbox\";\r\nimport { Select } from \"./components/Select\";\r\nimport { Input } from \"./components/Input\";\r\nimport deepmerge from \"deepmerge\";\r\nimport { theme as chakraTheme } from \"@chakra-ui/theme\";\r\nimport { Button } from \"./components/Button\";\r\n\r\nconst {\r\n\tButton: ChakraButton,\r\n\tLink: ChakraLink,\r\n\tHeading: ChakraHeading,\r\n\tMenu: ChakraMenu,\r\n\tPopover: ChakraPopover,\r\n\tInput: ChakraInput,\r\n\tCheckbox: ChakraCheckbox,\r\n\tRadio: ChakraRadio,\r\n\tSelect: ChakraSelect\r\n} = chakraTheme.components;\r\n\r\nconst defaultTheme = (rtl: boolean) => ({\r\n\tname: \"Default\",\r\n\tdirection: rtl ? \"rtl\" : \"ltr\",\r\n\tcolors: getColors(rtl),\r\n\tbreakpoints,\r\n\t...fonts(rtl),\r\n\t//...fontSizes(rtl),\r\n\tsizes,\r\n\tspace,\r\n\ttransition,\r\n\tstyles: {\r\n\t\t...getGlobalStyling(rtl)\r\n\t},\r\n\t//this can be used to change variables based on _rtl/_ltr\r\n\tcomponents: {\r\n\t\tText: {\r\n\t\t\t...text(rtl),\r\n\t\t},\r\n\t\tHeading: {\r\n\t\t\t...ChakraHeading,\r\n\t\t\t...Heading(rtl)\r\n\t\t},\r\n\t\tButton: {\r\n\t\t\t...ChakraButton,\r\n\t\t\t...Button(rtl)\r\n\t\t},\r\n\t\tLink: {\r\n\t\t\t...ChakraLink,\r\n\t\t\t...Link(rtl)\r\n\t\t},\r\n\t\tMenu: {\r\n\t\t\t...ChakraMenu,\r\n\t\t},\r\n\t\tInput: {\r\n\t\t\t...deepmerge(ChakraInput, Input)\r\n\t\t},\r\n\t\tRadio: ChakraRadio,\r\n\t\tCheckbox: {\r\n\t\t\t...deepmerge(ChakraCheckbox, Checkbox)\r\n\t\t},\r\n\t\tSelect: {\r\n\t\t\t...deepmerge(ChakraSelect, Select)\r\n\t\t}\r\n\t},\r\n});\r\n\r\nexport type Theme = DeepPartial> & {\r\n\tname: string;\r\n};\r\n\r\nexport function getDefaultTheme(rtl = false) {\r\n\tconst theme = defaultTheme(rtl);\r\n\treturn extendBaseTheme(theme) as Theme;\r\n}\r\n\r\n// used to generate chakra-types and storybook\r\nexport default getDefaultTheme(false);","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nexport const getDefaultColorTheme = (rtl: boolean) => ({\r\n\tname: \"Dark\",\r\n\tarticle: {\r\n\t\tbg: \"primary.dark\",\r\n\t\tcolor: \"primary.white\"\r\n\t}\r\n});\r\n\r\nexport type ColorTheme = ReturnType;","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { type ColorTheme } from \"..\";\r\n\r\nexport const getLightColorTheme = (rtl: boolean): ColorTheme => ({\r\n\tname: \"Light\",\r\n\tarticle: {\r\n\t\tbg: \"primary.white\",\r\n\t\tcolor: \"primary.dark\"\r\n\t}\r\n});","import { getDefaultColorTheme } from \"./color-themes/default-color-theme\";\r\nimport { getLightColorTheme } from \"./color-themes/light-theme\";\r\n\r\nexport const themes = {\r\n\t\"1\": getDefaultColorTheme,\r\n\t\"2\": getLightColorTheme\r\n};\r\n\r\nexport type ColorThemeId = keyof typeof themes;","/**\r\n * Used in backend to whitelist sizes\r\n * When sizes are changed or added, run `npm run build`\r\n */\r\n\r\n/**\r\n * Values can be:\r\n * w (width)\r\n * h (height)\r\n * mw (max width)\r\n * mh (max height)\r\n * cw (crop width)\r\n * ch (crop height)\r\n */\r\nexport const imageSizes = {\r\n\tnone: {\r\n\t\tmw: 10,\r\n\t},\r\n\tdefaultWide: { //16:9\r\n\t\tsm: {\r\n\t\t\tcw: 384,\r\n\t\t\tch: 216,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tcw: 768,\r\n\t\t\tch: 432,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tcw: 1152,\r\n\t\t\tch: 648,\r\n\t\t},\r\n\t\txl: {\r\n\t\t\tcw: 1440,\r\n\t\t\tch: 810,\r\n\t\t}\r\n\t},\r\n\tdefaultWideParallax: { //215 : 125\r\n\t\tsm: {\r\n\t\t\tcw: 384,\r\n\t\t\tch: 223,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tcw: 768,\r\n\t\t\tch: 447,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tcw: 1152,\r\n\t\t\tch: 670,\r\n\t\t},\r\n\t\txl: {\r\n\t\t\tcw: 1440,\r\n\t\t\tch: 837,\r\n\t\t},\r\n\t\txxl: {\r\n\t\t\tcw: 1760,\r\n\t\t\tch: 1023,\r\n\t\t}\r\n\t},\r\n\twide: { //215 : 100\r\n\t\tsm: {\r\n\t\t\tcw: 384,\r\n\t\t\tch: 179,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tcw: 768,\r\n\t\t\tch: 357,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tcw: 1152,\r\n\t\t\tch: 536,\r\n\t\t},\r\n\t\txl: {\r\n\t\t\tcw: 1440,\r\n\t\t\tch: 670,\r\n\t\t}\r\n\t},\r\n\timageCarousel: {\r\n\t\tsm: {\r\n\t\t\tcw: 687,\r\n\t\t\tch: 422,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tcw: 441,\r\n\t\t\tch: 259,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tcw: 867,\r\n\t\t\tch: 570,\r\n\t\t},\r\n\t}\r\n\r\n}","import { type ItemReference } from \"~/foundation/Jss\";\r\nimport { type ColorThemeId, themes } from \"../Theme\";\r\nimport { type PageThemeBase } from \"~/foundation/Theme/generated-types\";\r\n\r\nexport const getColorTheme = (colorThemeId: ColorThemeId | undefined) => {\r\n\treturn themes[colorThemeId || \"1\"](false);\r\n}\r\n\r\nexport const getArticleTheme = (article: ItemReference) => {\r\n\treturn getColorTheme(article.fields.pageColorTheme?.value as ColorThemeId);\r\n}","import React, { type FC, useContext, useState, type ReactNode } from \"react\";\r\n\r\ntype NavigationContextType = {\r\n\tisSearchOpen: boolean;\r\n\tisMobileMenuOpen: boolean;\r\n\ttoggleMobileMenu: (force?: boolean) => void;\r\n\ttoggleSearch: (force?: boolean) => void;\r\n};\r\n\r\ntype NavigationProviderProps = {\r\n\tchildren: ReactNode;\r\n};\r\n\r\nconst NavigationContext = React.createContext(undefined);\r\n\r\nexport const useNavigationContext = () => {\r\n\tconst context = useContext(NavigationContext);\r\n\tif (!context) {\r\n\t\tthrow new Error(\"useNavigationContext must be used within a NavigationProvider\");\r\n\t}\r\n\treturn context;\r\n};\r\n\r\nexport const NavigationProvider: FC = ({ children }) => {\r\n\tconst [isSearchOpen, setIsSearchOpen] = useState(false);\r\n\tconst [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\r\n\r\n\tconst toggleMobileMenu = (force = false) => {\r\n\t\tsetIsMobileMenuOpen((prev) => {\r\n\t\t\tif (force || (!prev && isSearchOpen)) {\r\n\t\t\t\tsetIsSearchOpen(false); // Close search if it's open\r\n\t\t\t}\r\n\t\t\treturn !prev;\r\n\t\t});\r\n\t};\r\n\r\n\tconst toggleSearch = (force = false) => {\r\n\t\tsetIsSearchOpen((prev) => {\r\n\t\t\tif (force || (!prev && isMobileMenuOpen)) {\r\n\t\t\t\tsetIsMobileMenuOpen(false); // Close mobile menu if it's open\r\n\t\t\t}\r\n\t\t\treturn !prev;\r\n\t\t});\r\n\t};\r\n\r\n\tconst value: NavigationContextType = {\r\n\t\tisMobileMenuOpen,\r\n\t\tisSearchOpen,\r\n\t\ttoggleMobileMenu,\r\n\t\ttoggleSearch,\r\n\t};\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{children}\r\n\t\t\r\n\t);\r\n};","export const getCookie = (name: string) => {\r\n\treturn document.cookie.split(\"; \").reduce((r, v) => {\r\n\t\tconst parts = v.split(\"=\");\r\n\t\treturn parts[0] === name ? decodeURIComponent(parts[1]) : r;\r\n\t}, \"\");\r\n};\r\n\r\nexport const setCookie = (name: string, value: string, days: number): void => {\r\n\tconst expires = new Date();\r\n\texpires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000); // Set expiration time in days\r\n\tdocument.cookie = `${name}=${encodeURIComponent(value)};expires=${expires.toUTCString()};path=/`;\r\n};\r\n\r\nexport const getFullCookie = (name: string) => {\r\n\treturn document.cookie.split(\"; \").reduce((r, v) => {\r\n\t\tconst parts = v.split(\"=\");\r\n\t\treturn parts[0] === name ? decodeURIComponent(parts as never) : r;\r\n\t}, \"\");\r\n};\r\n\r\nexport const getOneTrustTargetingConsent = () => {\r\n\tconst targetingGroup = \"C0004\";\r\n\tlet targetingConsent = false;\r\n\r\n\tconst oneTrustCookie = getFullCookie(\"OptanonConsent\");\r\n\r\n\tif (oneTrustCookie && oneTrustCookie.includes(`${targetingGroup}:1`)) {\r\n\t\ttargetingConsent = true;\r\n\t}\r\n\r\n\treturn targetingConsent;\r\n}\r\n","import React, { type FC, useState } from \"react\";\r\nimport { type ColorTheme } from \"./color-themes/default-color-theme\";\r\n\r\n// eslint-disable-next-line\r\nexport const ColorThemeContext = React.createContext<[ColorTheme, React.Dispatch>]>(null as any);\r\n\r\ntype ColorThemeProviderProps = {\r\n\tcolorTheme: ColorTheme;\r\n\tchildren: React.ReactNode;\r\n}\r\n\r\nexport const ColorThemeProvider: FC = ({ colorTheme, children }) => {\r\n\tconst colorThemeState = useState(colorTheme);\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{children}\r\n\t\t\r\n\t);\r\n};","const AWPrimary = {\r\n\tdark: \"#151D2B\",\r\n\tmidDark: \"#202630\",\r\n\tsoftDark: \"#3F4A65\",\r\n\tdarkRed: \"#4A2020\",\r\n\tred: \"#A01D00\",\r\n\tmidRed: \"#FC6D4E\",\r\n\tlightRed: \"#FFDEDA\",\r\n\tdarkOrange: \"#472C20\",\r\n\tmidOrange: \"#FF9A3E\",\r\n\tlightOrange: \"#FBEDBC\",\r\n\tdarkYellow: \"#484900\",\r\n\tmidYellow: \"#F9E423\",\r\n\tlightYellow: \"#FFF8B7\",\r\n\tdarkGreen: \"#023730\",\r\n\tmidGreen: \"#CDEB69\",\r\n\tlightGreen: \"#D0FFDD\",\r\n\tdarkBlue: \"#1B3D56\",\r\n\tdarkerBlue: \"#00B4D4\",\r\n\tmidBlue: \"#6FE7FE\",\r\n\tlightBlue: \"#CAF7FF\",\r\n\tdarkPurple: \"#451E77\",\r\n\tmidPurple: \"#C680FF\",\r\n\tlightPurple: \"#EBD2FF\",\r\n};\r\n\r\nconst AWFunctional = {\r\n\tblack: \"#000\",\r\n\tdarkGray: \"#9CA0A5\",\r\n\tmidGray: \"#C7C9CC\",\r\n\tsoftGray: \"#ECEDEE\",\r\n\tlightGray: \"#E9E9E9\",\r\n\tlighterGray: \"#F0F0F0\",\r\n\twhite: \"#FFF\",\r\n};\r\nconst AWFunctionalRgb = {\r\n\twhite: \"255,255,255\",\r\n\tgrey: \"21, 29, 43\",\r\n\tdark: \"21, 29, 43\",\r\n}\r\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\r\nexport const colors = {\r\n\tAWPrimary,\r\n\tAWFunctional,\r\n\tAWFunctionalRgb\r\n};","export const breakpoints = {\r\n\tbase: '0em',\r\n\tsm: '30rem', //480px\r\n\tmd: '48rem', //768px\r\n\tlg: '62rem', //992px\r\n\txl: '80rem', //1280px\r\n\t'2xl': '96rem', //1536px\r\n}","export const fonts = {\r\n\tbody: `'Manrope', sans-serif`,\r\n\theading: `'Gambetta', serif`,\r\n};\r\n","import type { ChakraTheme } from \"@chakra-ui/react\";\r\n\r\nexport const sizes: ChakraTheme[\"sizes\"] = {\r\n\t// base 1 = '4px'\r\n\tcontentWrapperWidthXL: '95.5rem',//max content width of 1464px\r\n\tmodulePY__SM: \"1.5rem\",\r\n\tmodulePY__MD: \"2rem\",\r\n\tmodulePY__LG: \"2.5rem\",\r\n\tmodulePY__XL: \"3rem\",\r\n\tmodulePY__XXL: \"4.5rem\", //lots of different vertical spacings in design. Lets try to make a system\r\n\tpageMarginSM: \"1rem\",\r\n\tpageMarginLG: \"2rem\",\r\n\theaderHXS: \"3.75rem\",\r\n\theaderHLG: \"4.1875rem\", //67px\r\n\theaderHLGExpanded: \"11.3125rem\", //181px\r\n\theaderHLGExpandedTop: \"7.15rem\", // 144px\r\n\theaderExpandedLogoWidth: \"18rem\", // Altered from design or it can't fit.\r\n\theaderExpandedLogoWidthLG: \"10.777rem\",\r\n\theaderExpandedLogoHeightLG: \"1.588rem\",\r\n\theaderExpandedLogoWidthSM: \"7.875rem\",\r\n\t640: \"40rem\",\r\n\t866: \"54.125rem\",\r\n\t1164: \"72.75rem\",\r\n};","import type { ChakraTheme } from \"@chakra-ui/react\";\r\n\r\nexport const space: ChakraTheme[\"space\"] = {\r\n\t//base 1 = '4px'\r\n\tgridGutter: '2.125rem',\r\n\tpageGutter: '2rem',\r\n}","export const keyFrames = () => ({\r\n\tkeyFrames: {\r\n\t\t\"@keyframes skeleton\": {\r\n\t\t\tfrom: {\r\n\t\t\t\tborderColor: \"var(--chakra-colors-primary-brightGrey)\",\r\n\t\t\t\tbackground: \"var(--chakra-colors-primary-brightGrey)\",\r\n\t\t\t},\r\n\t\t\tto: {\r\n\t\t\t\tborderColor: \"var(--chakra-colors-primary-neutralGrey)\",\r\n\t\t\t\tbackground: \"var(--chakra-colors-primary-neutralGrey)\",\r\n\t\t\t}\r\n\t\t},\r\n\t}\r\n});","import { keyFrames } from \"./animations\";\r\n\r\nexport const getGlobalStyling = {\r\n\tglobal: {\r\n\t\t...keyFrames().keyFrames,\r\n\t\tbody: {\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tcolor: 'AWPrimary.dark',\r\n\t\t\tbg: 'AWFunctional.white',\r\n\r\n\t\t\t'button': {\r\n\t\t\t\t'&:focus-visible': {\r\n\t\t\t\t\toutlineStyle: \"solid\",\r\n\t\t\t\t\toutlineWidth: \"1px\",\r\n\t\t\t\t\toutlineColor: \"AWPrimary.midOrange\",\r\n\t\t\t\t\toutlineOffset: \"1px\"\r\n\t\t\t\t},\r\n\t\t\t},\r\n\t\t\t'input[type=\"search\"]': {\r\n\t\t\t\t\"-webkit-appearance\": \"auto\"\r\n\t\t\t}\r\n\t\t},\r\n\t\t\".page-wrapper\": {\r\n\t\t\tdisplay: \"flex\",\r\n\t\t\tflexDirection: \"column\",\r\n\t\t\tminH: \"100vh\",\r\n\t\t\tminW: \"100%\",\r\n\t\t},\r\n\t\t\".container\": {\r\n\t\t\tflexGrow: 1,\r\n\t\t},\r\n\t\t\".nav__logo-main\": {\r\n\t\t\t// w: [\"8.59375rem\", null, null, \"10.7774375rem\"],\r\n\t\t\t// h: [\"1.265625rem\", null, null, \"1.5875rem\"],\r\n\t\t\t\"svg\": {\r\n\t\t\t\tfill: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\t\t\tw: \"100%\",\r\n\t\t\t\th: \"100%\",\r\n\t\t\t}\r\n\t\t},\r\n\t\t\".searchFilters__radioGroup\": {\r\n\t\t\t\"input[type='radio']\": {\r\n\t\t\t\tposition: \"relative\",\r\n\t\t\t\tappearance: \"none\",\r\n\t\t\t\twidth: \"1.5625rem\",\r\n\t\t\t\theight: \"1.5625rem\",\r\n\t\t\t\tborderRadius: \"0.25rem\",\r\n\t\t\t\tborder: \"1px solid\",\r\n\t\t\t\tborderColor: \"AWFunctional.darkGray\",\r\n\t\t\t\tbackground: \"transparent url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIgOSIgd2lkdGg9IjEyIiBoZWlnaHQ9IjkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMSA1LjM3NUwzLjcyNzI3IDhMMTEgMSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+') center no-repeat\",\r\n\t\t\t\tbackgroundColor: \"AWFunctional.white\",\r\n\t\t\t\tcursor: \"pointer\",\r\n\t\t\t\t\"&:checked\": {\r\n\t\t\t\t\tbackgroundColor: \"AWPrimary.dark\",\r\n\t\t\t\t\ttransition: \"background-color 0.3s\",\r\n\t\t\t\t},\r\n\t\t\t},\r\n\t\t},\r\n\t\t\".lazyLoadList .LazyLoad\": {\r\n\t\t\tposition: \"relative\",\r\n\r\n\t\t\t\"&:not(.is-visible)\": {\r\n\t\t\t\t\"&:after\": {\r\n\t\t\t\t\tcontent: \"''\",\r\n\t\t\t\t\tposition: \"absolute\",\r\n\t\t\t\t\theight: \"100%\",\r\n\t\t\t\t\twidth: \"100%\",\r\n\t\t\t\t\tanimationName: \"skeleton\",\r\n\t\t\t\t\tanimationIterationCount: \"infinite\",\r\n\t\t\t\t\tanimationTimingFunction: \"linear\",\r\n\t\t\t\t\tanimationDuration: \"0.5s\",\r\n\t\t\t\t\tanimationDirection: \"alternate\"\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\t\".lazyLoadList img[loading='lazy']\": {\r\n\t\t\topacity: 0,\r\n\t\t\ttransition: \"all .5s ease-in-out\",\r\n\r\n\t\t\t\"&.image-loaded\": {\r\n\t\t\t\topacity: 1\r\n\t\t\t},\r\n\t\t},\r\n\t\t\"*:focus-visible\": {\r\n\t\t\toutline: \".375rem double black\",\r\n\t\t\tboxShadow: \"0 0 0 .25rem white\",\r\n\t\t\tborderRadius: \".125rem\",\r\n\t\t},\r\n\t}\r\n};\r\n","\r\nexport const Text = () => ({\r\n\tsizes: {\r\n\t\tdesktopHeadline1Big: { //H1-XL\r\n\t\t\tfontFamily: 'heading',\r\n\t\t\tfontSize: \"5.5rem\",\r\n\t\t\tfontWeight: \"500\",\r\n\t\t\tlineHeight: \".9\",\r\n\t\t\tletterSpacing: \"-0.03em\",\r\n\t\t},\r\n\t\tinfoBannerBigHeadline1: { //H1-XL\r\n\t\t\tfontFamily: 'heading',\r\n\t\t\tfontSize: \"7rem\",\r\n\t\t\tfontWeight: \"500\",\r\n\t\t\tlineHeight: \".9\",\r\n\t\t\tletterSpacing: \"-0.03em\",\r\n\t\t},\r\n\t\tdesktopHeadline1: { //H1-L\r\n\t\t\tfontFamily: 'heading',\r\n\t\t\tfontSize: \"4rem\",\r\n\t\t\tfontWeight: \"500\",\r\n\t\t\tlineHeight: \"1.1\",\r\n\t\t\tletterSpacing: \"-0.03em\",\r\n\t\t},\r\n\t\tmobileHeadline1: { //H1-L\r\n\t\t\tfontFamily: 'heading',\r\n\t\t\tfontSize: \"3rem\",\r\n\t\t\tfontWeight: \"500\",\r\n\t\t\tlineHeight: \"1.2\",\r\n\t\t\tletterSpacing: \"-0.03em\",\r\n\t\t},\r\n\t\tdesktopHeadline2: { //H2-M\r\n\t\t\tfontFamily: 'heading',\r\n\t\t\tfontSize: \"3rem\",\r\n\t\t\tfontWeight: \"500\",\r\n\t\t\tlineHeight: \"1.1\",\r\n\t\t\tletterSpacing: \"-0.03em\",\r\n\t\t},\r\n\t\tmobileHeadline2: { //H2-M\r\n\t\t\tfontFamily: 'heading',\r\n\t\t\tfontSize: \"2.5rem\",\r\n\t\t\tfontWeight: \"400\",\r\n\t\t\tlineHeight: \"1.1\",\r\n\t\t\tletterSpacing: \"-0.03em\",\r\n\t\t},\r\n\t\tdesktopHeadline3: { //H3-S\r\n\t\t\tfontFamily: 'heading',\r\n\t\t\tfontSize: \"2.75rem\",\r\n\t\t\tfontWeight: \"400\",\r\n\t\t\tlineHeight: \"1.1\",\r\n\t\t\tletterSpacing: \"0\",\r\n\t\t},\r\n\t\tmobileHeadline3: { //H3-Mobile\r\n\t\t\tfontFamily: 'heading',\r\n\t\t\tfontSize: \"1.75rem\",\r\n\t\t\tfontWeight: \"400\",\r\n\t\t\tlineHeight: \"1\",\r\n\t\t\tletterSpacing: \"-0.03em\",\r\n\t\t},\r\n\t\tdesktopHeadline4: { //H4-XS\r\n\t\t\tfontFamily: 'heading',\r\n\t\t\tfontSize: \"2.5rem\",\r\n\t\t\tfontWeight: \"400\",\r\n\t\t\tlineHeight: \"1\",\r\n\t\t\tletterSpacing: \"-0.03em\",\r\n\t\t},\r\n\t\tmobileHeadline4: { //H3-Mobile\r\n\t\t\tfontFamily: 'heading',\r\n\t\t\tfontSize: \"1.5rem\",\r\n\t\t\tfontWeight: \"400\",\r\n\t\t\tlineHeight: \"1.1\",\r\n\t\t\tletterSpacing: \"-0.03em\",\r\n\t\t},\r\n\t\tdesktopHeadline5: { //H5-XXS\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \"1.5rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"1.2\",\r\n\t\t},\r\n\t\tmobileHeadline5: { //H5-XXS\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \"1.25rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"1.2\",\r\n\t\t},\r\n\t\tdesktopHeadline6: { //H6-XXXS\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \"1.125rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"1.2\",\r\n\t\t},\r\n\t\tmobileHeadline6: { //H6-XXXS\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \"1.125rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"1.2\",\r\n\t\t},\r\n\t\tdesktopHeadline7: { //H7-XXXS\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \"1rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"1.2\",\r\n\t\t},\r\n\t\tmobileHeadline7: { //H7-XXXS\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \"1rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"1.2\",\r\n\t\t},\r\n\t\tp24: {\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \"1.5rem\",\r\n\t\t\tfontWeight: \"400\",\r\n\t\t\tlineHeight: \"1.4\",\r\n\t\t\tletterSpacing: \"0.01em\",\r\n\t\t},\r\n\t\tp18: {\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \"1.125rem\",\r\n\t\t\tfontWeight: \"500\",\r\n\t\t\tlineHeight: \"1.4\",\r\n\t\t\tletterSpacing: \"0.01em\",\r\n\t\t},\r\n\t\tp16: {\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \"1rem\",\r\n\t\t\tfontWeight: \"400\",\r\n\t\t\tlineHeight: \"1.5\",\r\n\t\t\tletterSpacing: \"0.01em\",\r\n\t\t},\r\n\t\tps: {\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \".75rem\",\r\n\t\t\tfontWeight: \"400\",\r\n\t\t},\r\n\t\tsmall: {\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \".75rem\",\r\n\t\t\tfontWeight: \"400\",\r\n\t\t\tlineHeight: \"1.3\",\r\n\t\t},\r\n\t\tdesktopHero: {\r\n\t\t\tfontFamily: 'heading',\r\n\t\t\tfontSize: \"4rem\",\r\n\t\t\tfontWeight: \"500\",\r\n\t\t\tlineHeight: \".9\",\r\n\t\t\tletterSpacing: \"-0.131rem\",\r\n\t\t},\r\n\t\ttabletHero: {\r\n\t\t\tfontFamily: 'heading',\r\n\t\t\tfontSize: \"3rem\",\r\n\t\t\tfontWeight: \"500\",\r\n\t\t\tlineHeight: \".9\",\r\n\t\t\tletterSpacing: \"-0.131rem\",\r\n\t\t},\r\n\t\tmobileHero: {\r\n\t\t\tfontFamily: 'heading',\r\n\t\t\tfontSize: \"2rem\",\r\n\t\t\tfontWeight: \"500\",\r\n\t\t\tlineHeight: \"1.1\",\r\n\t\t\tletterSpacing: \"-0.090rem\",\r\n\t\t}\r\n\t},\r\n\tvariants: {\r\n\t\t//responsive styles for bodyTexts - imported in richtext styling\r\n\t\t//[p16, null, null, p18]\r\n\t\tbodyText: {\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: [\"1rem\", null, null, \"1.125rem\"],\r\n\t\t\tfontWeight: [\"400\", null, null, \"500\"],\r\n\t\t\tlineHeight: [\"1.5\", null, null, \"1.4\"],\r\n\t\t\tletterSpacing: \"0.01em\",\r\n\t\t},\r\n\t\t//responsive styles for smaller bodyTexts - imported in richtext styling for image-captions\r\n\t\t//[ps, null, null, p16]\r\n\t\tbodyTextSmall: {\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: [\".75rem\", null, null, \"1rem\"],\r\n\t\t\tfontWeight: \"400\",\r\n\t\t\tlineHeight: \"1.5\",\r\n\t\t\tletterSpacing: \"0.01em\",\r\n\t\t},\r\n\t\tnavigationLinks: {\r\n\t\t\t//OBS this css chunk is imported in none chakra components such as NavLink, so do not use chakra theme variables with shortname\r\n\t\t\tfontFamily: \"var(--chakra-fonts-body)\",\r\n\t\t\tfontSize: \".875rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"normal\",\r\n\t\t\ttextUnderlineOffset: \".375rem\",\r\n\t\t\ttransition: \"color .3s\",\r\n\t\t\t_hover: {\r\n\t\t\t\tcolor: \"var(--chakra-colors-AWPrimary-midBlue)\"\r\n\t\t\t}\r\n\t\t},\r\n\t\tcloseText: {\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \".6976875rem\",\r\n\t\t\tfontWeight: \"500\",\r\n\t\t\tlineHeight: \"normal\",\r\n\t\t},\r\n\t\ttag: {\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \".75rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"1.2\",\r\n\t\t\tletterSpacing: \"0\",\r\n\t\t\tdisplay: \"inline-flex\",\r\n\t\t\th: \"1.3125rem\",\r\n\t\t\talignItems: \"center\",\r\n\t\t\tbg: \"rgba(21, 29, 43, 0.08)\",\r\n\t\t\tborder: \"1px solid rgba(21, 29, 43, 0.20)\",\r\n\t\t\tborderRadius: \"1.25rem\",\r\n\t\t\tpx: \"2\",\r\n\t\t},\r\n\t\tdefaultCategoryTag: {\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \".75rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"1.2\",\r\n\t\t\tletterSpacing: \"0\",\r\n\t\t\tdisplay: \"inline-flex\",\r\n\t\t\th: \"1.3125rem\",\r\n\t\t\talignItems: \"center\",\r\n\t\t\tbg: \"rgba(21, 29, 43, 0.08)\",\r\n\t\t\tborder: \"1px solid rgba(21, 29, 43, 0.20)\",\r\n\t\t\tborderRadius: \"1.25rem\",\r\n\t\t\tpx: \"2\",\r\n\t\t},\r\n\t\tdefaultSubCategoryTag: {\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \".75rem\",\r\n\t\t\tfontWeight: \"400\",\r\n\t\t\tlineHeight: \"1.2\",\r\n\t\t\tletterSpacing: \"0\",\r\n\t\t\tdisplay: \"inline-flex\",\r\n\t\t\th: \"1.3125rem\",\r\n\t\t\talignItems: \"center\",\r\n\t\t\tbackgroundColor: \"rgba(21, 29, 43, 0.08)\",\r\n\t\t\tborder: \"1px solid rgba(21, 29, 43, 0.08)\",\r\n\t\t\tborderRadius: \"1.25rem\",\r\n\t\t\tpx: \"2\",\r\n\t\t},\r\n\t\tdefaultCategoryTagDark: {\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \".75rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"1.2\",\r\n\t\t\tletterSpacing: \"0\",\r\n\t\t\tdisplay: \"inline-flex\",\r\n\t\t\th: \"1.3125rem\",\r\n\t\t\talignItems: \"center\",\r\n\t\t\tbackgroundColor: \"rgba(255, 255, 255, 0.18)\",\r\n\t\t\tborder: \"1px solid rgba(255, 255, 255, 0.20)\",\r\n\t\t\tborderRadius: \"1.25rem\",\r\n\t\t\tpx: \"2\",\r\n\t\t\tcolor: 'white'\r\n\t\t},\r\n\t\tdefaultSubCategoryTagDark: {\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \".75rem\",\r\n\t\t\tfontWeight: \"400\",\r\n\t\t\tlineHeight: \"1.2\",\r\n\t\t\tletterSpacing: \"0\",\r\n\t\t\tdisplay: \"inline-flex\",\r\n\t\t\th: \"1.3125rem\",\r\n\t\t\talignItems: \"center\",\r\n\t\t\tbackgroundColor: \"rgba(255, 255, 255, 0.18)\",\r\n\t\t\tborder: \"1px solid rgba(255, 255, 255, 0.18)\",\r\n\t\t\tborderRadius: \"1.25rem\",\r\n\t\t\tpx: \"2\",\r\n\t\t\tcolor: 'white'\r\n\t\t},\r\n\t\tcta: {\r\n\t\t\t//OBS this css chunk is imported in none chakra components such as NavLink, so do not use chakra theme variables with shortname\r\n\t\t\tfontFamily: \"var(--chakra-fonts-body)\",\r\n\t\t\tfontSize: \".9375rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"normal\",\r\n\t\t\tletterSpacing: \"-0.02em\",\r\n\t\t},\r\n\t\tctaSmall: {\r\n\t\t\t//OBS this css chunk is imported in none chakra components such as NavLink, so do not use chakra theme variables with shortname\r\n\t\t\tfontFamily: \"var(--chakra-fonts-body)\",\r\n\t\t\tfontSize: \".875rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"normal\",\r\n\t\t},\r\n\t\tsearchDesktop: {\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \"3.5rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"1.2\",\r\n\t\t\tletterSpacing: \"-0.03\",\r\n\t\t},\r\n\t\tsearchMobile: {\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \"2rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"1.2\",\r\n\t\t\tletterSpacing: \"-0.03\",\r\n\t\t},\r\n\t\theaderLogoText: {\r\n\t\t\tcolor: \"AWFunctional.white\",\r\n\t\t\tfontFamily: \"heading\",\r\n\t\t\tfontSize: \"1rem\", // This + the logo size when header expanded is altered from design, responsively too large if not minified\r\n\t\t\tfontWeight: \"700\",\r\n\t\t\tlineHeight: \"1.2\",\r\n\t\t\tmarginBottom: \"-4px\",\r\n\t\t},\r\n\t\theaderLogoTextHeroLG: {\r\n\t\t\tcolor: \"AWPrimary.lightBlue\",\r\n\t\t\tfontFamily: \"heading\",\r\n\t\t\tfontSize: \"1.158rem\",\r\n\t\t\tfontWeight: \"400\",\r\n\t\t\tlineHeight: \"1.1\",\r\n\t\t\tmarginBottom: \"-4px\",\r\n\t\t},\r\n\t\theaderLogoTextHeroSM: {\r\n\t\t\tcolor: \"AWPrimary.lightBlue\",\r\n\t\t\tfontFamily: \"heading\",\r\n\t\t\tfontSize: \"0.7443rem\",\r\n\t\t\tfontWeight: \"700\",\r\n\t\t\tlineHeight: \"1.1\",\r\n\t\t},\r\n\t\ttagTransparent: {\r\n\t\t\tcolor: \"AWFunctional.white\",\r\n\t\t\tfontFamily: 'body',\r\n\t\t\tfontSize: \".75rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"1.2\",\r\n\t\t\tletterSpacing: \"0\",\r\n\t\t\tdisplay: \"inline-flex\",\r\n\t\t\th: \"1.3125rem\",\r\n\t\t\talignItems: \"center\",\r\n\t\t\tbg: \"rgba(255, 255, 255, 0.18)\",\r\n\t\t\tborder: \"1px solid rgba(255, 255, 255, 0.20)\",\r\n\t\t\tborderRadius: \"1.25rem\",\r\n\t\t\tpx: \"2\",\r\n\t\t},\r\n\t\tlabel: {\r\n\t\t\tfontFamily: \"body\",\r\n\t\t\tfontSize: \".9375rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"normal\",\r\n\t\t\tletterSpacing: \"-0.02em\",\r\n\t\t}\r\n\t},\r\n});\r\n","import { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\nimport { Text as ThemeTextStyling } from \"./Text\";\r\n\r\nexport const Heading = (): ComponentStyleConfig => ({\r\n\tsizes: {\r\n\t\t...ThemeTextStyling().sizes\r\n\t},\r\n});","import { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\nimport { Text as ThemeTextStyling } from \"./Text\";\r\n\r\nexport const getLinkSizes = () => ({\r\n\t//OBS this css chunk is imported in none chakra components such as NavLink, so do not use chakra theme variables with shortname\r\n\tsm: {\r\n\t\t...ThemeTextStyling().variants?.ctaSmall,\r\n\t\tpadding: \".5rem 1.25rem\",\r\n\t},\r\n\tlg: {\r\n\t\t...ThemeTextStyling().variants?.cta,\r\n\t\tpadding: \".75rem 2.125rem\",\r\n\t},\r\n});\r\n\r\nexport const getLinkVariants = () => ({\r\n\tprimaryDark: {\r\n\t\tbackgroundColor: \"AWPrimary.dark\",\r\n\t\ttextColor: \"AWFunctional.white\",\r\n\t\tfontWeight: \"light\",\r\n\t\tpy: 3,\r\n\t\tpx: 6,\r\n\t\tborderRadius: \"full\",\r\n\t\t\"&:hover, &:active\": {\r\n\t\t\tbackgroundColor: \"AWPrimary.softDark\",\r\n\t\t},\r\n\t},\r\n\tdefaultBlue: {\r\n\t\tbackgroundColor: \"AWPrimary.midBlue\",\r\n\t\ttextColor: \"AWPrimary.darkBlue\",\r\n\t\tborderRadius: \"full\",\r\n\t\t\"&:hover, &:active\": {\r\n\t\t\tbackgroundColor: \"#00B4D4\"\r\n\t\t}\r\n\t},\r\n\t//OBS this css chunk is imported in none chakra components such as NavLink, so do not use chakra theme variables with shortname\r\n\tprimaryOutline: {\r\n\t\twhiteSpace: \"nowrap\",\r\n\t\tbackgroundColor: \"transparent\",\r\n\t\ttextColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tborder: \"1px solid\",\r\n\t\tborderColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tpy: 3,\r\n\t\tpx: 6,\r\n\t\tfontWeight: \"600\",\r\n\t\talignItems: \"center\",\r\n\t\tborderRadius: \"var(--chakra-radii-full)\",\r\n\t\ttransition: \"color, background .3s\",\r\n\t\t_disabled: {\r\n\t\t\tbackgroundColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\t\tcolor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\t\t\"& svg\": {\r\n\t\t\t\tcolor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\t\t\tstrokeColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\t\t}\r\n\t\t},\r\n\t\t\"&:hover, &:active\": {\r\n\t\t\tbackgroundColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\t\tcolor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\t\t\"& svg\": {\r\n\t\t\t\tcolor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\t\t\tstrokeColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\t\t}\r\n\t\t},\r\n\t\t_focusVisible: {\r\n\t\t\toutline: \"1px solid\",\r\n\t\t\toutlineColor: \"var(--chakra-colors-AWPrimary-dark)\"\r\n\t\t},\r\n\t},\r\n\tprimarySmallOutline: {\r\n\t\tbackgroundColor: \"transparent\",\r\n\t\ttextColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tfontWeight: \"light\",\r\n\t\tborder: \"1px solid\",\r\n\t\tborderColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\theight: \"fit-content\",\r\n\t\twidth: \"fit-content\",\r\n\t\tpadding: \"var(--chakra-sizes-2) var(--chakra-sizes-6)\",\r\n\t\talignItems: \"center\",\r\n\t\tborderRadius: \"3.625rem\",\r\n\t\ttransition: \"color, background .3s\",\r\n\t\t\"&:hover, &:active\": {\r\n\t\t\tbackgroundColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\t\tcolor: \"white\",\r\n\t\t},\r\n\t},\r\n\ttag: {\r\n\t\tpadding: \"0.325rem 0.5rem\",\r\n\t\tborder: \"1px solid\",\r\n\t\tborderRadius: \"3.625rem\",\r\n\t\tfontSize: \"0.75rem\",\r\n\t\tbackgroundColor: \"#ededed\"\r\n\t},\r\n\tunstyled: {\r\n\t\tfontFamily: \"inherit\",\r\n\t\tfontWeight: \"inherit\",\r\n\t\ttransition: \"none\",\r\n\t\t\"&:hover, &:active\": {\r\n\t\t\ttextDecoration: \"none\",\r\n\t\t},\r\n\t},\r\n\tctaBlue: {\r\n\t\tfontFamily: 'body',\r\n\t\tfontSize: \".9375rem\",\r\n\t\tfontWeight: \"600\",\r\n\t\tlineHeight: \"normal\",\r\n\t\tletterSpacing: \"-0.02em\",\r\n\t\tbackgroundColor: \"AWPrimary.midBlue\",\r\n\t\tcolor: \"AWPrimary.darkBlue\",\r\n\t\tpx: 6,\r\n\t\tpy: 3,\r\n\t\tborderRadius: \"full\",\r\n\t\ttransition: \"background-color .3s cubic-bezier(.35,1,.45,1)\",\r\n\t\t\"&:hover, &:active\": {\r\n\t\t\tbackgroundColor: \"AWPrimary.lightBlue\",\r\n\t\t},\r\n\t},\r\n\toutlineDark: {\r\n\t\tpy: 3,\r\n\t\tpx: 6,\r\n\t\tborderRadius: \"full\",\r\n\t\tfontFamily: 'body',\r\n\t\tfontSize: \".875rem\",\r\n\t\tfontWeight: \"600\",\r\n\t\tlineHeight: \"normal\",\r\n\t\tborder: \"1px solid\",\r\n\t\tborderColor: \"AWPrimary.dark\",\r\n\t\ttextColor: \"AWPrimary.dark\",\r\n\t\tbackgroundColor: \"AWFunctional.white\",\r\n\t\ttransition: \"all .3s cubic-bezier(.35,1,.45,1)\",\r\n\t\t\"&:hover, &:active\": {\r\n\t\t\tbackgroundColor: \"AWPrimary.dark\",\r\n\t\t\ttextColor: \"AWFunctional.white\",\r\n\t\t},\r\n\t},\r\n\tprimaryBlue: {\r\n\t\tbackgroundColor: \"AWPrimary.midBlue\",\r\n\t\ttextColor: \"AWPrimary.dark\",\r\n\t\tfontWeight: 600,\r\n\t\tpy: 2,\r\n\t\tpx: 6,\r\n\t\tborderRadius: \"full\",\r\n\t\t\"&:hover, &:active\": {\r\n\t\t\tbackgroundColor: \"AWPrimary.darkerBlue\",\r\n\t\t},\r\n\t\t_focusVisible: {\r\n\t\t\toutline: \"1px solid\",\r\n\t\t\toutlineCoor: \"AWPrimary.dark\"\r\n\t\t},\r\n\t},\r\n\tfilterTag: {\r\n\t\tfontFamily: 'body',\r\n\t\tfontSize: \".75rem\",\r\n\t\tfontWeight: \"600\",\r\n\t\tlineHeight: \"1.2\",\r\n\t\tletterSpacing: \"0\",\r\n\t\tdisplay: \"inline-flex\",\r\n\t\talignItems: \"center\",\r\n\t\tbg: \"rgba(21, 29, 43, 0.08)\",\r\n\t\tborderRadius: \"1.25rem\",\r\n\t\t_focusVisible: {\r\n\t\t\toutline: \"1px solid\",\r\n\t\t\toutlineColor: \"AWPrimary.dark\"\r\n\t\t},\r\n\t\tpadding: \"0.375rem 0.5rem\",\r\n\t\tjustifyContent: \"center\",\r\n\t\tgap: \"0.25rem\",\r\n\t\tflexWrap: \"wrap\",\r\n\t\t_hover: {\r\n\t\t\tbg: \"rgba(21, 29, 43, 0.24)\"\r\n\t\t}\r\n\t},\r\n\tsubmitFilterList: {\r\n\t\ttextAlign: \"center\",\r\n\t\tcursor: \"pointer\",\r\n\t\tdisplay: \"inline-block\",\r\n\t\talignItems: \"center\",\r\n\t\tjustifyContent: \"center\",\r\n\t\tbackgroundColor: \"AWPrimary.midBlue\",\r\n\t\ttextColor: \"AWPrimary.dark\",\r\n\t\tfontWeight: 600,\r\n\t\twidth: \"fit-content\",\r\n\t\theight: \"fit-content\",\r\n\t\tpy: 3,\r\n\t\tpx: 6,\r\n\t\tborderRadius: \"full\",\r\n\t\t\"&:hover, &:active\": {\r\n\t\t\tbackgroundColor: \"AWPrimary.darkerBlue\",\r\n\t\t},\r\n\t\t_focusVisible: {\r\n\t\t\toutline: \"1px solid\",\r\n\t\t},\r\n\t}\r\n});\r\n\r\nexport const LinkBaseStyle = {\r\n\tbaseStyle: {\r\n\t\theight: \"fit-content\",\r\n\t\twidth: \"fit-content\",\r\n\t\talignItems: \"center\",\r\n\t\ttransition: \"all ease 0.3s\",\r\n\t\t\"&[aria-disabled=true]\": {\r\n\t\t\topacity: .6,\r\n\t\t\tcursor: \"not-allowed\"\r\n\t\t},\r\n\t\t_focusVisible: {\r\n\t\t\toutline: \"1.5px solid\",\r\n\t\t\toutlineColor: \"var(--chakra-colors-AWPrimary-dark)\"\r\n\t\t},\r\n\t},\r\n}\r\n\r\nexport type LinkSize = keyof ReturnType;\r\nexport type LinkVariant = keyof ReturnType;\r\n\r\nexport const Link = (): ComponentStyleConfig => ({\r\n\t...LinkBaseStyle,\r\n\tsizes: getLinkSizes(),\r\n\tvariants: getLinkVariants(),\r\n\tdefaultProps: {\r\n\t\t_firstLetter: {\r\n\t\t\ttextTransform: \"uppercase\",\r\n\t\t}\r\n\t},\r\n});\r\n","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\nimport { getLinkSizes, getLinkVariants, LinkBaseStyle } from \"./Link\";\r\n\r\nexport const Button = (): ComponentStyleConfig => {\r\n\treturn {\r\n\t\t...LinkBaseStyle,\r\n\t\tsizes: getLinkSizes(),\r\n\t\tvariants: getLinkVariants(),\r\n\t\tdefaultProps: {\r\n\t\t\t// variant: 'unstyled',\r\n\t\t},\r\n\t};\r\n};\r\n","import { type ComponentStyleConfig, extendTheme } from \"@chakra-ui/react\";\r\n\r\nconst getAccordionVariants = () => ({\r\n\tdefaultAccordion: {\r\n\t\tpanel: {\r\n\t\t\tborder: \"none\",\r\n\t\t\tpadding: [\"0.875rem 1rem 1.125rem 0\", \"1.875rem 5rem 3.125rem 0\"],\r\n\t\t\tcolor: \"AWPrimary.dark\",\r\n\t\t},\r\n\t\ticon: {\r\n\t\t\tboxSize: \"2rem\",\r\n\t\t\t\"& svg\": {\r\n\t\t\t\twidth: \"100%\",\r\n\t\t\t\theight: \"100%\",\r\n\t\t\t\tcolor: \"AWPrimary.dark\",\r\n\t\t\t},\r\n\t\t},\r\n\t\tbutton: {\r\n\t\t\t//py: [4, 9],\r\n\t\t\tpx: 0,\r\n\t\t\tcolor: \"AWPrimary.dark\",\r\n\t\t\t_expanded: {\r\n\t\t\t\tcolor: \"AWPrimary.softDark\",\r\n\t\t\t\ticon: {\r\n\t\t\t\t\tcolor: \"AWPrimary.softDark\",\r\n\t\t\t\t},\r\n\t\t\t},\r\n\t\t\t_collapsed: {\r\n\t\t\t\tcolor: \"AWPrimary.dark\",\r\n\t\t\t\ticon: {\r\n\t\t\t\t\tcolor: \"AWPrimary.softDark\",\r\n\t\t\t\t},\r\n\t\t\t},\r\n\t\t\t_hover: {\r\n\t\t\t\tcolor: \"AWPrimary.softDark\",\r\n\t\t\t\tbgColor: \"transparent\",\r\n\t\t\t\ticon: {\r\n\t\t\t\t\tcolor: \"AWPrimary.softDark\",\r\n\t\t\t\t},\r\n\t\t\t},\r\n\t\t},\r\n\t},\r\n});\r\n\r\nexport const Accordion = (): ComponentStyleConfig => ({\r\n\tvariants: getAccordionVariants(),\r\n\tdefaultProps: {\r\n\t\tvariant: \"defaultAccordion\",\r\n\t},\r\n});\r\n\r\nconst theme = extendTheme({\r\n\tcomponents: {\r\n\t\tAccordion: Accordion(),\r\n\t},\r\n});\r\n\r\nexport default theme;\r\n","import { createMultiStyleConfigHelpers } from \"@chakra-ui/react\";\r\nimport { inputAnatomy } from '@chakra-ui/anatomy'\r\n\r\nconst { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(inputAnatomy.keys);\r\n\r\nconst baseStyle = definePartsStyle({\r\n\tfield: {\r\n\t\t_placeholder: {\r\n\t\t\tcolor: \"primary.greyDark\"\r\n\t\t},\r\n\t},\r\n});\r\n\r\nconst searchModalDesktop = definePartsStyle({\r\n\tfield: {\r\n\t\tcolor: \"AWFunctional.white\",\r\n\t\tfontFamily: \"body\",\r\n\t\tfontSize: \"3.5rem\",\r\n\t\tfontWeight: \"600\",\r\n\t\tlineHeight: \"1.2\",\r\n\t\tletterSpacing: \"-0.03\",\r\n\t\tborderRadius: 0,\r\n\t\tbg: \"AWPrimary.dark\",\r\n\t\theight: \"full\",\r\n\t\t_placeholder: {\r\n\t\t\tcolor: \"AWFunctional.white\",\r\n\t\t\topacity: 0.2,\r\n\t\t},\r\n\t\t_autofill: {\r\n\t\t\tborder: \"1px solid transparent\",\r\n\t\t\ttextFillColor: \"#c6c6c6\",\r\n\t\t\tboxShadow: \"0 0 0px 1000px var(--chakra-colors-AWPrimary-dark) inset\",\r\n\t\t\ttransition: \"background-color 5000s ease-in-out 0s\",\r\n\t\t},\r\n\t\tpx: 0,\r\n\t},\r\n});\r\n\r\nconst searchModalMobile = definePartsStyle({\r\n\tfield: {\r\n\t\tcolor: \"AWFunctional.white\",\r\n\t\tfontFamily: \"body\",\r\n\t\tfontSize: \"2rem\",\r\n\t\tfontWeight: \"600\",\r\n\t\tlineHeight: \"1.2\",\r\n\t\tletterSpacing: \"-0.06\",\r\n\t\tborderRadius: 0,\r\n\t\tbg: \"AWPrimary.dark\",\r\n\t\theight: \"full\",\r\n\t\t_placeholder: {\r\n\t\t\tcolor: \"AWFunctional.white\",\r\n\t\t\topacity: 0.2,\r\n\t\t},\r\n\t\t_autofill: {\r\n\t\t\tborder: \"1px solid transparent\",\r\n\t\t\ttextFillColor: \"#c6c6c6\",\r\n\t\t\tboxShadow: \"0 0 0px 1000px var(--chakra-colors-AWPrimary-dark) inset\",\r\n\t\t\ttransition: \"background-color 5000s ease-in-out 0s\",\r\n\t\t},\r\n\t\tpx: 0,\r\n\t},\r\n});\r\n\r\nconst searchPageInput = definePartsStyle({\r\n\tfield: {\r\n\t\tcolor: \"AWPrimary.dark\",\r\n\t\tfontFamily: \"body\",\r\n\t\tfontSize: \"1rem\",\r\n\t\tfontWeight: \"600\",\r\n\t\tlineHeight: \"1.2\",\r\n\t\tletterSpacing: \"-0.03\",\r\n\t\tborderRadius: \"full\",\r\n\t\t// border: \"1px solid\",\r\n\t\t// borderColor: \"AWPrimary.dark\",\r\n\t\theight: \"full\",\r\n\t\t_placeholder: {\r\n\t\t\tcolor: \"AWPrimary.dark\",\r\n\t\t\topacity: 0.5,\r\n\t\t},\r\n\t\t// px: 4,\r\n\t\t// py: 2,\r\n\t\t_autofill: {\r\n\t\t\tcolor: \"AWPrimary.dark\",\r\n\t\t\tfontFamily: \"body\",\r\n\t\t\tfontSize: \"1rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"1.2\",\r\n\t\t\tletterSpacing: \"-0.03\",\r\n\t\t\tborder: \"1px solid transparent\",\r\n\t\t\ttextFillColor: \"#c6c6c6\",\r\n\t\t\tboxShadow: \"0 0 0px 1000px var(--chakra-colors-AWFunctional-white) inset\",\r\n\t\t\ttransition: \"background-color 5000s ease-in-out 0s\",\r\n\t\t},\r\n\t},\r\n});\r\n\r\nconst searchFilterList = definePartsStyle({\r\n\tfield: {\r\n\t\tps: 3,\r\n\t\tpy: 3,\r\n\t\tborderRadius: 0,\r\n\t\twidth: \"full\",\r\n\t\theight: \"full\",\r\n\t\ttextAlign: \"start\",\r\n\t\tcolor: \"inherit\",\r\n\t\tbackgroundColor: \"transparent\",\r\n\t\tborderBottom: \"1px solid\",\r\n\t\tborderColor: \"inherit\",\r\n\t\toutline: \"0px\",\r\n\t\toutlineColor: \"none\",\r\n\t\tfontFamily: \"body\",\r\n\t\tfontSize: \"1.125rem\",\r\n\t\tfontWeight: \"600\",\r\n\t\tlineHeight: \"1.2\",\r\n\t\t\"&:hover, &:active\": {\r\n\t\t\tbackgroundColor: \"transparent\",\r\n\t\t\tcolor: \"inherit\",\r\n\t\t\t\"& svg\": {\r\n\t\t\t\tcolor: \"inherit\",\r\n\t\t\t\tstrokeColor: \"inherit\",\r\n\t\t\t}\r\n\t\t},\r\n\t\t_focusVisible: {\r\n\t\t\toutline: \"1px solid\",\r\n\t\t\toutlineColor: \"inherit\"\r\n\t\t},\r\n\t\t_placeholder: {\r\n\t\t\tcolor: \"inherit\",\r\n\t\t},\r\n\t\t_autofill: {\r\n\t\t\tcolor: \"inherit\",\r\n\t\t\ttextColor: \"inherit\",\r\n\t\t\tletterSpacing: \"-0.03\",\r\n\t\t\ttextFillColor: \"inherit\",\r\n\t\t\tboxShadow: \"0 0 0px 1000px inherit inset\",\r\n\t\t\ttransition: \"background-color 50000s ease-in-out 0s\",\r\n\t\t},\r\n\t\t\"&input:-webkit-autofill, &input:-webkit-autofill:hover, &input:-webkit-autofill:focus\": {\r\n\t\t\tfontFamily: \"body\",\r\n\t\t\tfontSize: \"1.125rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"1.2\",\r\n\t\t\tcolor: \"inherit\",\r\n\t\t\ttextColor: \"inherit\",\r\n\t\t\ttextFillColor: \"inherit\",\r\n\t\t}\r\n\t}\r\n});\r\n\r\nconst formInput = definePartsStyle({\r\n\tfield: {\r\n\t\tps: 3,\r\n\t\tpy: 3,\r\n\t\tborderRadius: 0,\r\n\t\twidth: \"full\",\r\n\t\theight: \"full\",\r\n\t\ttextAlign: \"start\",\r\n\t\tcolor: \"inherit\",\r\n\t\tbackgroundColor: \"transparent\",\r\n\t\tborderBottom: \"1px solid\",\r\n\t\tborderColor: \"inherit\",\r\n\t\toutline: \"0px\",\r\n\t\toutlineColor: \"none\",\r\n\t\tfontFamily: \"body\",\r\n\t\tfontSize: \"1.5rem\",\r\n\t\tfontWeight: \"600\",\r\n\t\tlineHeight: \"1.2\",\r\n\t\t\"&:hover, &:active\": {\r\n\t\t\tbackgroundColor: \"transparent\",\r\n\t\t\tcolor: \"inherit\",\r\n\t\t\t\"& svg\": {\r\n\t\t\t\tcolor: \"inherit\",\r\n\t\t\t\tstrokeColor: \"inherit\",\r\n\t\t\t}\r\n\t\t},\r\n\t\t_focusVisible: {\r\n\t\t\toutline: \"1px solid\",\r\n\t\t\toutlineColor: \"inherit\"\r\n\t\t},\r\n\t\t_placeholder: {\r\n\t\t\tcolor: \"inherit\",\r\n\t\t},\r\n\t\t_autofill: {\r\n\t\t\tcolor: \"inherit\",\r\n\t\t\ttextColor: \"inherit\",\r\n\t\t\tletterSpacing: \"-0.03\",\r\n\t\t\ttextFillColor: \"inherit\",\r\n\t\t\tboxShadow: \"0 0 0px 1000px inherit inset\",\r\n\t\t\ttransition: \"background-color 50000s ease-in-out 0s\",\r\n\t\t},\r\n\t\t\"&input:-webkit-autofill, &input:-webkit-autofill:hover, &input:-webkit-autofill:focus\": {\r\n\t\t\tfontFamily: \"body\",\r\n\t\t\tfontSize: \"1.5rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"1.2\",\r\n\t\t\tcolor: \"inherit\",\r\n\t\t\ttextColor: \"inherit\",\r\n\t\t\ttextFillColor: \"inherit\",\r\n\t\t}\r\n\t}\r\n});\r\n\r\nexport const Input = defineMultiStyleConfig({\r\n\tbaseStyle,\r\n\tvariants: {\r\n\t\tsearchModalDesktop,\r\n\t\tsearchModalMobile,\r\n\t\tsearchPageInput,\r\n\t\tsearchFilterList,\r\n\t\tformInput\r\n\t}\r\n});\r\n","import { createMultiStyleConfigHelpers, defineStyle } from \"@chakra-ui/react\";\r\nimport { checkboxAnatomy } from '@chakra-ui/anatomy'\r\n\r\nconst { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(checkboxAnatomy.keys);\r\n\r\nconst baseStyle = definePartsStyle({\r\n\tcontrol: {\r\n\t\t_checked: {\r\n\t\t\tbackgroundColor: \"AWPrimary.dark\",\r\n\t\t\tborderColor: \"AWPrimary.dark\",\r\n\t\t\tfill: \"AWFunctional.white\",\r\n\t\t\tcolor: \"AWFunctional.white\",\r\n\t\t},\r\n\t\tborder: \"1px solid\",\r\n\t\tborderColor: \"AWFunctional.darkGray\",\r\n\t\th: \"1.5625rem\",\r\n\t\tw: \"1.5625rem\",\r\n\t\toverflow: \"hidden\",\r\n\t\tborderRadius: \"0.25rem\",\r\n\t\t_focusVisible: {\r\n\t\t\toutline: \"1px solid\",\r\n\t\t\toutlineColor: \"AWPrimary.dark\",\r\n\t\t}\r\n\t},\r\n\ticon: {\r\n\t\tcolor: \"AWFunctional.white\",\r\n\t\th: \"auto\",\r\n\t\tw: \"12px\",\r\n\t\t_checked: {\r\n\t\t\tfill: \"AWFunctional.white\",\r\n\t\t},\r\n\t},\r\n\tlabel: {\r\n\t\tms: 2,\r\n\t},\r\n});\r\n\r\nconst sizes = {\r\n\tmd: definePartsStyle({\r\n\t\tlabel: defineStyle({\r\n\t\t\tfontFamily: \"body\",\r\n\t\t\tfontSize: \".9375rem\",\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"normal\",\r\n\t\t\tletterSpacing: \"-0.02em\",\r\n\t\t})\r\n\t})\r\n}\r\n\r\nexport const Checkbox = defineMultiStyleConfig({ sizes, baseStyle })\r\n","import { createMultiStyleConfigHelpers } from \"@chakra-ui/react\";\r\nimport { selectAnatomy } from '@chakra-ui/anatomy'\r\n\r\nconst { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(selectAnatomy.keys);\r\n\r\nconst baseStyle = definePartsStyle({\r\n\ttextColor: \"AWPrimary.dark\",\r\n\tfield: {\r\n\t\tbackgroundColor: \"transparent\",\r\n\t\ttextColor: \"AWPrimary.dark\",\r\n\t\tfontWeight: \"light\",\r\n\t\toutline: \"1px solid\",\r\n\t\toutlineColor: \"AWPrimary.dark\",\r\n\t\tpy: [2],\r\n\t\tps: [6],\r\n\t\tpe: [9],\r\n\t\tpaddingInlineEnd: [10],\r\n\t\ttextAlign: \"center\",\r\n\t\talignItems: \"center\",\r\n\t\tborderRadius: \"full\",\r\n\t\t\"&:hover, &:active\": {\r\n\t\t\tbackgroundColor: \"AWPrimary.dark\",\r\n\t\t\tcolor: \"AWFunctional.white\",\r\n\t\t\t\"& svg\": {\r\n\t\t\t\tcolor: \"AWFunctional.white\",\r\n\t\t\t\tstrokeColor: \"AWFunctional.white\",\r\n\t\t\t}\r\n\t\t},\r\n\t},\r\n\ticon: {\r\n\t\t\"&:hover, &:active\": {\r\n\t\t\tbackgroundColor: \"AWPrimary.dark\",\r\n\t\t\tcolor: \"AWFunctional.white\",\r\n\t\t\t\"& svg\": {\r\n\t\t\t\tcolor: \"AWFunctional.white\",\r\n\t\t\t\tstrokeColor: \"AWFunctional.white\",\r\n\t\t\t}\r\n\t\t},\r\n\t},\r\n\r\n});\r\n\r\nconst sorting = definePartsStyle({\r\n\tfield: {\r\n\t\tcursor: \"pointer\",\r\n\t\tps: 2,\r\n\t\tpy: 2,\r\n\t\ttextAlign: \"start\",\r\n\t\tborderRadius: \"0.25rem\",\r\n\t\theight: \"full\",\r\n\t\tbackgroundColor: \"AWFunctional.lighterGray\",\r\n\t\tcolor: \"AWPrimary.dark\",\r\n\t\tborder: \"none\",\r\n\t\toutline: \"0px\",\r\n\t\toutlineColor: \"none\",\r\n\t\t\"&:hover, &:active\": {\r\n\t\t\tbackgroundColor: \"AWFunctional.lighterGray\",\r\n\t\t\tcolor: \"AWPrimary.dark\",\r\n\t\t\t\"& svg\": {\r\n\t\t\t\tcolor: \"AWPrimary.dark\",\r\n\t\t\t\tstrokeColor: \"AWPrimary.dark\",\r\n\t\t\t}\r\n\t\t},\r\n\t\t_focusVisible: {\r\n\t\t\toutline: \"1px solid\",\r\n\t\t\toutlineColor: \"AWPrimary.dark\"\r\n\t\t},\r\n\t},\r\n\ticon: {\r\n\t\tcolor: \"AWPrimary.dark\",\r\n\t\tright: 0,\r\n\t\tposition: \"relative\",\r\n\t\tpe: 2,\r\n\t}\r\n})\r\n\r\nconst filterList = definePartsStyle({\r\n\twidth: \"full\",\r\n\tfield: {\r\n\t\tcursor: \"pointer\",\r\n\t\tbackgroundColor: \"transparent\",\r\n\t\tps: 3,\r\n\t\tpy: 3,\r\n\t\tborderRadius: 0,\r\n\t\tminWidth: \"5rem\",\r\n\t\twidth: \"full\",\r\n\t\theight: \"full\",\r\n\t\ttextAlign: \"start\",\r\n\t\tcolor: \"inherit\",\r\n\t\tborderBottom: \"1px solid\",\r\n\t\tborderColor: \"inherit\",\r\n\t\toutline: \"0px\",\r\n\t\toutlineColor: \"none\",\r\n\t\tfontFamily: \"body\",\r\n\t\tfontSize: \"1.125rem\",\r\n\t\tfontWeight: \"600\",\r\n\t\tlineHeight: \"1.2\",\r\n\t\t\"&:hover, &:active\": {\r\n\t\t\tbackgroundColor: \"transparent\",\r\n\t\t\tcolor: \"inherit\",\r\n\t\t\t\"& svg\": {\r\n\t\t\t\tcolor: \"inherit\",\r\n\t\t\t\tstrokeColor: \"inherit\",\r\n\t\t\t}\r\n\t\t},\r\n\t\t_focusVisible: {\r\n\t\t\toutline: \"1px solid\",\r\n\t\t\toutlineColor: \"inherit\"\r\n\t\t},\r\n\t\t\"&:focus:not(:focus-visible)\": {\r\n\t\t\toutline: \"none\",\r\n\t\t},\r\n\t},\r\n})\r\n\r\nconst filterListSmall = definePartsStyle({\r\n\twidth: \"full\",\r\n\tfield: {\r\n\t\ttransition: \"outline 2s ease-in-out\",\r\n\t\tcursor: \"pointer\",\r\n\t\tpx: 2,\r\n\t\tpy: 3,\r\n\t\tborderRadius: 0,\r\n\t\twidth: \"full\",\r\n\t\theight: \"full\",\r\n\t\ttextAlign: \"start\",\r\n\t\tcolor: \"AWPrimary.dark\",\r\n\t\tborderBottom: \"1px solid\",\r\n\t\tborderColor: \"AWPrimary.dark\",\r\n\t\toutline: \"0px\",\r\n\t\toutlineColor: \"none\",\r\n\t\t\"&:hover, &:active\": {\r\n\t\t\tbackgroundColor: \"transparent\",\r\n\t\t\tcolor: \"AWPrimary.dark\",\r\n\t\t\t\"& svg\": {\r\n\t\t\t\tcolor: \"AWPrimary.dark\",\r\n\t\t\t\tstrokeColor: \"AWPrimary.dark\",\r\n\t\t\t}\r\n\t\t},\r\n\t\t_focusVisible: {\r\n\t\t\toutline: \"1px solid\",\r\n\t\t\toutlineColor: \"AWPrimary.dark\"\r\n\t\t},\r\n\t\ticon: {\r\n\t\t\tcolor: \"AWPrimary.dark\",\r\n\t\t\tright: 0,\r\n\t\t\tposition: \"relative\",\r\n\t\t}\r\n\t},\r\n})\r\n\r\nexport const Select = defineMultiStyleConfig({ baseStyle, variants: { sorting, filterList, filterListSmall } })\r\n","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { extendBaseTheme } from \"@chakra-ui/react\";\r\nimport { type DeepPartial } from \"utility-types\";\r\nimport { colors } from \"./variables/colors\";\r\nimport { breakpoints } from \"./variables/breakpoints\";\r\nimport { fonts } from \"./variables/fonts\";\r\nimport { sizes } from \"./variables/sizes\";\r\nimport { space } from \"./variables/space\";\r\nimport { getGlobalStyling } from \"./styles/global\";\r\nimport { theme as chakraTheme } from \"@chakra-ui/theme\";\r\nimport { Heading } from \"./components/Heading\";\r\nimport { Button } from \"./components/Button\";\r\nimport { Link } from \"./components/Link\";\r\nimport { Text } from \"./components/Text\";\r\nimport { Accordion } from \"./components/Accordion\";\r\nimport deepmerge from \"deepmerge\";\r\nimport { Input } from \"./components/Input\";\r\nimport { Checkbox } from \"./components/Checkbox\";\r\nimport { Select } from \"./components/Select\";\r\n\r\nconst {\r\n\tButton: ChakraButton,\r\n\tLink: ChakraLink,\r\n\tHeading: ChakraHeading,\r\n\tAccordion: ChakraAccordion,\r\n\tInput: ChakraInput,\r\n\tCheckbox: ChakraCheckbox,\r\n\t// \tMenu: ChakraMenu,\r\n\t// \tPopover: ChakraPopover,\r\n\t// \tRadio: ChakraRadio,\r\n\tSelect: ChakraSelect\r\n} = chakraTheme.components;\r\n\r\nconst defaultTheme = () => ({\r\n\tname: \"Default\",\r\n\tcolors,\r\n\tbreakpoints,\r\n\tfonts,\r\n\tsizes,\r\n\tspace,\r\n\tstyles: {\r\n\t\t...getGlobalStyling,\r\n\t},\r\n\tcomponents: {\r\n\t\tText: {\r\n\t\t\t...Text(),\r\n\t\t},\r\n\t\tHeading: {\r\n\t\t\t...ChakraHeading,\r\n\t\t\t...Heading(),\r\n\t\t},\r\n\t\tButton: {\r\n\t\t\t...ChakraButton,\r\n\t\t\t...Button(),\r\n\t\t},\r\n\t\tLink: {\r\n\t\t\t...ChakraLink,\r\n\t\t\t...Link(),\r\n\t\t},\r\n\t\tAccordion: {\r\n\t\t\t...ChakraAccordion,\r\n\t\t\t...Accordion(),\r\n\t\t},\r\n\t\t// \tMenu: {\r\n\t\t// \t\t...ChakraMenu,\r\n\t\t// \t},\r\n\t\tInput: {\r\n\t\t\t...deepmerge(ChakraInput, Input)\r\n\t\t},\r\n\t\tCheckbox: {\r\n\t\t\t...deepmerge(ChakraCheckbox, Checkbox)\r\n\t\t},\r\n\t\t// \tRadio: ChakraRadio,\r\n\t\tSelect: {\r\n\t\t\t...deepmerge(ChakraSelect, Select)\r\n\t\t}\r\n\t},\r\n});\r\n\r\nexport type Theme = DeepPartial> & {\r\n\tname: string;\r\n};\r\n\r\nexport function getDefaultTheme() {\r\n\tconst theme = defaultTheme();\r\n\treturn extendBaseTheme(theme) as Theme;\r\n}\r\n\r\n// used to generate chakra-types\r\nexport default getDefaultTheme();\r\n","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nexport const getDefaultColorTheme = () => ({\r\n\tname: \"Default\",\r\n\tribbon: {\r\n\t\tprimaryBg: \"transparent\",\r\n\t\tprimaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryColorAlpha: \"rgba(var(--chakra-colors-AWFunctionalRgb-dark), 0.3)\",\r\n\t\tprimaryColorBigText: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tquoteSecondaryColor: \"var(--chakra-colors-AWPrimary-midPurple)\",\r\n\t\tquoteSmallText: \"var(--chakra-colors-AWPrimary-midPurple)\",\r\n\t\tsecondaryBg: \"var(--chakra-colors-AWFunctional-lighterGray)\",\r\n\t\tsecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tmidColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonBg: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryButtonHoverBg: \"var(--chakra-colors-AWPrimary-softDark)\",\r\n\t\tprimaryBorderColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\ttagDefaultDarkBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.18)\",\r\n\t\ttagDefaultDarkBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\ttagDefaultBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\tprogressBarBg: \"var(--chakra-colors-AWPrimary-midBlue)\",\r\n\t},\r\n});\r\n\r\nexport type ColorTheme = ReturnType;","import { type ColorTheme } from \"..\";\r\n\r\nexport const getLightPurpleColorTheme = (): ColorTheme => ({\r\n\tname: \"Light Purple\",\r\n\tribbon: {\r\n\t\tprimaryBg: \"var(--chakra-colors-AWPrimary-lightPurple)\",\r\n\t\tprimaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryColorAlpha: \"rgba(var(--chakra-colors-AWFunctionalRgb-dark), 0.3)\",\r\n\t\tprimaryColorBigText: \"var(--chakra-colors-AWPrimary-darkPurple)\",\r\n\t\tquoteSecondaryColor: \"var(--chakra-colors-AWPrimary-darkPurple)\",\r\n\t\tquoteSmallText: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tsecondaryBg: \"var(--chakra-colors-AWPrimary-midPurple)\",\r\n\t\tsecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tmidColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonBg: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryButtonHoverBg: \"var(--chakra-colors-AWPrimary-softDark)\",\r\n\t\tprimaryBorderColor: \"var(--chakra-colors-AWPrimary-darkPurple)\",\r\n\t\ttagDefaultDarkBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultDarkBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\ttagDefaultBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\tprogressBarBg: \"var(--chakra-colors-AWPrimary-lightPurple)\",\r\n\t},\r\n});","import { type ColorTheme } from \"..\";\r\n\r\nexport const getLightBlueColorTheme = (): ColorTheme => ({\r\n\tname: \"Light Blue\",\r\n\tribbon: {\r\n\t\tprimaryBg: \"var(--chakra-colors-AWPrimary-lightBlue)\",\r\n\t\tprimaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryColorAlpha: \"rgba(var(--chakra-colors-AWFunctionalRgb-dark), 0.3)\",\r\n\t\tprimaryColorBigText: \"var(--chakra-colors-AWPrimary-darkBlue)\",\r\n\t\tquoteSecondaryColor: \"var(--chakra-colors-AWPrimary-darkBlue)\",\r\n\t\tquoteSmallText: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tsecondaryBg: \"var(--chakra-colors-AWPrimary-midBlue)\",\r\n\t\tsecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tmidColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonBg: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryButtonHoverBg: \"var(--chakra-colors-AWPrimary-softDark)\",\r\n\t\tprimaryBorderColor: \"var(--chakra-colors-AWPrimary-darkBlue)\",\r\n\t\ttagDefaultDarkBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultDarkBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\ttagDefaultBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\tprogressBarBg: \"var(--chakra-colors-AWPrimary-lightBlue)\",\r\n\t},\r\n});","import { type ColorTheme } from \"..\";\r\nexport const getDarkBlueColorTheme = (): ColorTheme => ({\r\n\tname: \"Dark Blue\",\r\n\tribbon: {\r\n\t\tprimaryBg: \"var(--chakra-colors-AWPrimary-darkBlue)\",\r\n\t\tprimaryColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryColorAlpha: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.3)\",\r\n\t\tprimaryColorBigText: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tquoteSecondaryColor: \"var(--chakra-colors-AWPrimary-midBlue)\",\r\n\t\tquoteSmallText: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tsecondaryBg: \"var(--chakra-colors-AWPrimary-lightBlue)\",\r\n\t\tsecondaryColor: \"var(--chakra-colors-AWPrimary-lightBlue)\",\r\n\t\tmidColor: \"var(--chakra-colors-AWPrimary-midBlue)\",\r\n\t\tprimaryButtonBg: \"var(--chakra-colors-AWPrimary-midBlue)\",\r\n\t\tprimaryButtonColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonHoverBg: \"#00B4D4\",\r\n\t\tprimaryBorderColor: \"var(--chakra-colors-AWPrimary-midBlue)\",\r\n\t\ttagDefaultDarkBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultDarkBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\ttagDefaultBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.18)\",\r\n\t\ttagDefaultBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.2)\",\r\n\t\tprogressBarBg: \"var(--chakra-colors-AWPrimary-darkBlue)\",\r\n\t},\r\n});","import { type ColorTheme } from \"..\";\r\n\r\nexport const getDarkGreenColorTheme = (): ColorTheme => ({\r\n\tname: \"Dark Green\",\r\n\tribbon: {\r\n\t\tprimaryBg: \"var(--chakra-colors-AWPrimary-darkGreen)\",\r\n\t\tprimaryColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryColorAlpha: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.3)\",\r\n\t\tprimaryColorBigText: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tquoteSecondaryColor: \"var(--chakra-colors-AWPrimary-midGreen)\",\r\n\t\tquoteSmallText: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tsecondaryBg: \"var(--chakra-colors-AWPrimary-lightGreen)\",\r\n\t\tsecondaryColor: \"var(--chakra-colors-AWPrimary-lightGreen)\",\r\n\t\tmidColor: \"var(--chakra-colors-AWPrimary-midGreen)\",\r\n\t\tprimaryButtonBg: \"var(--chakra-colors-AWPrimary-midGreen)\",\r\n\t\tprimaryButtonColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonHoverBg: \"#AECA52\",\r\n\t\tprimaryBorderColor: \"var(--chakra-colors-AWPrimary-midGreen)\",\r\n\t\ttagDefaultDarkBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultDarkBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\ttagDefaultBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.18)\",\r\n\t\ttagDefaultBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.2)\",\r\n\t\tprogressBarBg: \"var(--chakra-colors-AWPrimary-darkGreen)\",\r\n\t},\r\n});","import { type ColorTheme } from \"..\";\r\n\r\nexport const getDarkPurpleColorTheme = (): ColorTheme => ({\r\n\tname: \"Dark Purple\",\r\n\tribbon: {\r\n\t\tprimaryBg: \"var(--chakra-colors-AWPrimary-darkPurple)\",\r\n\t\tprimaryColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryColorAlpha: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.3)\",\r\n\t\tprimaryColorBigText: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tquoteSecondaryColor: \"var(--chakra-colors-AWPrimary-midPurple)\",\r\n\t\tquoteSmallText: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tsecondaryBg: \"var(--chakra-colors-AWPrimary-lightPurple)\",\r\n\t\tsecondaryColor: \"var(--chakra-colors-AWPrimary-lightPurple)\",\r\n\t\tmidColor: \"var(--chakra-colors-AWPrimary-midPurple)\",\r\n\t\tprimaryButtonBg: \"var(--chakra-colors-AWPrimary-midPurple)\",\r\n\t\tprimaryButtonColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonHoverBg: \"#b374e7\",\r\n\t\tprimaryBorderColor: \"var(--chakra-colors-AWPrimary-midPurple)\",\r\n\t\ttagDefaultDarkBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultDarkBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\ttagDefaultBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.18)\",\r\n\t\ttagDefaultBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.2)\",\r\n\t\tprogressBarBg: \"var(--chakra-colors-AWPrimary-darkPurple)\",\r\n\t},\r\n});","import { type ColorTheme } from \"..\";\r\n\r\nexport const getDarkRedColorTheme = (): ColorTheme => ({\r\n\tname: \"Dark Red\",\r\n\tribbon: {\r\n\t\tprimaryBg: \"var(--chakra-colors-AWPrimary-darkRed)\",\r\n\t\tprimaryColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryColorAlpha: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.3)\",\r\n\t\tprimaryColorBigText: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tquoteSecondaryColor: \"var(--chakra-colors-AWPrimary-midRed)\",\r\n\t\tquoteSmallText: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tsecondaryBg: \"var(--chakra-colors-AWPrimary-lightRed)\",\r\n\t\tsecondaryColor: \"var(--chakra-colors-AWPrimary-lightRed)\",\r\n\t\tmidColor: \"var(--chakra-colors-AWPrimary-midRed)\",\r\n\t\tprimaryButtonBg: \"var(--chakra-colors-AWPrimary-midRed)\",\r\n\t\tprimaryButtonColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonHoverBg: \"#DB5032\",\r\n\t\tprimaryBorderColor: \"var(--chakra-colors-AWPrimary-midRed)\",\r\n\t\ttagDefaultDarkBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultDarkBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\ttagDefaultBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.18)\",\r\n\t\ttagDefaultBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.2)\",\r\n\t\tprogressBarBg: \"var(--chakra-colors-AWPrimary-darkRed)\",\r\n\t},\r\n});","import { type ColorTheme } from \"..\";\r\n\r\nexport const getDarkYellowColorTheme = (): ColorTheme => ({\r\n\tname: \"Dark Yellow\",\r\n\tribbon: {\r\n\t\tprimaryBg: \"var(--chakra-colors-AWPrimary-darkYellow)\",\r\n\t\tprimaryColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryColorAlpha: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.3)\",\r\n\t\tprimaryColorBigText: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tquoteSecondaryColor: \"var(--chakra-colors-AWPrimary-midYellow)\",\r\n\t\tquoteSmallText: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tsecondaryBg: \"var(--chakra-colors-AWPrimary-lightYellow)\",\r\n\t\tsecondaryColor: \"var(--chakra-colors-AWPrimary-lightYellow)\",\r\n\t\tmidColor: \"var(--chakra-colors-AWPrimary-midYellow)\",\r\n\t\tprimaryButtonBg: \"var(--chakra-colors-AWPrimary-midYellow)\",\r\n\t\tprimaryButtonColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonHoverBg: \"#E1CF29\",\r\n\t\tprimaryBorderColor: \"var(--chakra-colors-AWPrimary-midYellow)\",\r\n\t\ttagDefaultDarkBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultDarkBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\ttagDefaultBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.18)\",\r\n\t\ttagDefaultBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.2)\",\r\n\t\tprogressBarBg: \"var(--chakra-colors-AWPrimary-darkYellow)\",\r\n\t},\r\n});","import { type ColorTheme } from \"..\";\r\n\r\nexport const getMidRedColorTheme = (): ColorTheme => ({\r\n\tname: \"Mid Red\",\r\n\tribbon: {\r\n\t\tprimaryBg: \"var(--chakra-colors-AWPrimary-midRed)\",\r\n\t\tprimaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryColorAlpha: \"rgba(var(--chakra-colors-AWFunctionalRgb-dark), 0.3)\",\r\n\t\tprimaryColorBigText: \"var(--chakra-colors-AWPrimary-darkRed)\",\r\n\t\tquoteSecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tquoteSmallText: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tsecondaryBg: \"var(--chakra-colors-AWPrimary-lightRed)\",\r\n\t\tsecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tmidColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonBg: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryButtonHoverBg: \"var(--chakra-colors-AWPrimary-softDark)\",\r\n\t\tprimaryBorderColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\ttagDefaultDarkBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultDarkBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\ttagDefaultBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\tprogressBarBg: \"var(--chakra-colors-AWPrimary-midRed)\",\r\n\t},\r\n});","import { type ColorTheme } from \"..\";\r\n\r\nexport const getMidPurpleColorTheme = (): ColorTheme => ({\r\n\tname: \"Mid Purple\",\r\n\tribbon: {\r\n\t\tprimaryBg: \"var(--chakra-colors-AWPrimary-midPurple)\",\r\n\t\tprimaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryColorAlpha: \"rgba(var(--chakra-colors-AWFunctionalRgb-dark), 0.3)\",\r\n\t\tprimaryColorBigText: \"var(--chakra-colors-AWPrimary-darkPurple)\",\r\n\t\tquoteSecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tquoteSmallText: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tsecondaryBg: \"var(--chakra-colors-AWPrimary-lightPurple)\",\r\n\t\tsecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tmidColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonBg: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryButtonHoverBg: \"var(--chakra-colors-AWPrimary-softDark)\",\r\n\t\tprimaryBorderColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\ttagDefaultDarkBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultDarkBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\ttagDefaultBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\tprogressBarBg: \"var(--chakra-colors-AWPrimary-midPurple)\",\r\n\t},\r\n});","import { type ColorTheme } from \"..\";\r\n\r\nexport const getMidBlueColorTheme = (): ColorTheme => ({\r\n\tname: \"Mid Blue\",\r\n\tribbon: {\r\n\t\tprimaryBg: \"var(--chakra-colors-AWPrimary-midBlue)\",\r\n\t\tprimaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryColorAlpha: \"rgba(var(--chakra-colors-AWFunctionalRgb-dark), 0.3)\",\r\n\t\tprimaryColorBigText: \"var(--chakra-colors-AWPrimary-darkBlue)\",\r\n\t\tquoteSecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tquoteSmallText: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tsecondaryBg: \"var(--chakra-colors-AWPrimary-lightBlue)\",\r\n\t\tsecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tmidColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonBg: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryButtonHoverBg: \"var(--chakra-colors-AWPrimary-softDark)\",\r\n\t\tprimaryBorderColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\ttagDefaultDarkBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultDarkBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\ttagDefaultBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\tprogressBarBg: \"var(--chakra-colors-AWPrimary-midBlue)\",\r\n\t}\r\n});\r\n\r\n","import { type ColorTheme } from \"..\";\r\n\r\nexport const getMidGreenColorTheme = (): ColorTheme => ({\r\n\tname: \"Mid Green\",\r\n\tribbon: {\r\n\t\tprimaryBg: \"var(--chakra-colors-AWPrimary-midGreen)\",\r\n\t\tprimaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryColorAlpha: \"rgba(var(--chakra-colors-AWFunctionalRgb-dark), 0.3)\",\r\n\t\tprimaryColorBigText: \"var(--chakra-colors-AWPrimary-darkGreen)\",\r\n\t\tquoteSecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tquoteSmallText: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tsecondaryBg: \"var(--chakra-colors-AWPrimary-lightGreen)\",\r\n\t\tsecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tmidColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonBg: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryButtonHoverBg: \"var(--chakra-colors-AWPrimary-softDark)\",\r\n\t\tprimaryBorderColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\ttagDefaultDarkBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultDarkBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\ttagDefaultBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\tprogressBarBg: \"var(--chakra-colors-AWPrimary-midGreen)\",\r\n\t},\r\n});","import { type ColorTheme } from \"..\";\r\n\r\nexport const getMidYellowColorTheme = (): ColorTheme => ({\r\n\tname: \"Mid Yellow\",\r\n\tribbon: {\r\n\t\tprimaryBg: \"var(--chakra-colors-AWPrimary-midYellow)\",\r\n\t\tprimaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryColorAlpha: \"rgba(var(--chakra-colors-AWFunctionalRgb-dark), 0.3)\",\r\n\t\tprimaryColorBigText: \"var(--chakra-colors-AWPrimary-darkYellow)\",\r\n\t\tquoteSecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tquoteSmallText: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tsecondaryBg: \"var(--chakra-colors-AWPrimary-lightYellow)\",\r\n\t\tsecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tmidColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonBg: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryButtonHoverBg: \"var(--chakra-colors-AWPrimary-softDark)\",\r\n\t\tprimaryBorderColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\ttagDefaultDarkBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultDarkBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\ttagDefaultBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\tprogressBarBg: \"var(--chakra-colors-AWPrimary-midYellow)\",\r\n\t},\r\n});","import { type ColorTheme } from \"..\";\r\n\r\nexport const getLightGreenColorTheme = (): ColorTheme => ({\r\n\tname: \"Light Green\",\r\n\tribbon: {\r\n\t\tprimaryBg: \"var(--chakra-colors-AWPrimary-lightGreen)\",\r\n\t\tprimaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryColorAlpha: \"rgba(var(--chakra-colors-AWFunctionalRgb-dark), 0.3)\",\r\n\t\tprimaryColorBigText: \"var(--chakra-colors-AWPrimary-darkGreen)\",\r\n\t\tquoteSecondaryColor: \"var(--chakra-colors-AWPrimary-darkGreen)\",\r\n\t\tquoteSmallText: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tsecondaryBg: \"var(--chakra-colors-AWPrimary-midGreen)\",\r\n\t\tsecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tmidColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonBg: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryButtonHoverBg: \"var(--chakra-colors-AWPrimary-softDark)\",\r\n\t\tprimaryBorderColor: \"var(--chakra-colors-AWPrimary-darkGreen)\",\r\n\t\ttagDefaultDarkBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultDarkBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\ttagDefaultBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\tprogressBarBg: \"var(--chakra-colors-AWPrimary-midGreen)\",\r\n\t},\r\n});","import { type ColorTheme } from \"..\";\r\n\r\nexport const getLightRedColorTheme = (): ColorTheme => ({\r\n\tname: \"Light Red\",\r\n\tribbon: {\r\n\t\tprimaryBg: \"var(--chakra-colors-AWPrimary-lightRed)\",\r\n\t\tprimaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryColorAlpha: \"rgba(var(--chakra-colors-AWFunctionalRgb-dark), 0.3)\",\r\n\t\tprimaryColorBigText: \"var(--chakra-colors-AWPrimary-darkRed)\",\r\n\t\tquoteSecondaryColor: \"var(--chakra-colors-AWPrimary-darkRed)\",\r\n\t\tquoteSmallText: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tsecondaryBg: \"var(--chakra-colors-AWPrimary-midRed)\",\r\n\t\tsecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tmidColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonBg: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryButtonHoverBg: \"var(--chakra-colors-AWPrimary-softDark)\",\r\n\t\tprimaryBorderColor: \"var(--chakra-colors-AWPrimary-darkRed)\",\r\n\t\ttagDefaultDarkBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultDarkBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\ttagDefaultBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\tprogressBarBg: \"var(--chakra-colors-AWPrimary-midRed)\",\r\n\t},\r\n});","import { type ColorTheme } from \"..\";\r\n\r\nexport const getLightYellowColorTheme = (): ColorTheme => ({\r\n\tname: \"Light Yellow\",\r\n\tribbon: {\r\n\t\tprimaryBg: \"var(--chakra-colors-AWPrimary-lightYellow)\",\r\n\t\tprimaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryColorAlpha: \"rgba(var(--chakra-colors-AWFunctionalRgb-dark), 0.3)\",\r\n\t\tprimaryColorBigText: \"var(--chakra-colors-AWPrimary-darkYellow)\",\r\n\t\tquoteSecondaryColor: \"var(--chakra-colors-AWPrimary-darkYellow)\",\r\n\t\tquoteSmallText: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tsecondaryBg: \"var(--chakra-colors-AWPrimary-midYellow)\",\r\n\t\tsecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tmidColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonBg: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryButtonHoverBg: \"var(--chakra-colors-AWPrimary-softDark)\",\r\n\t\tprimaryBorderColor: \"var(--chakra-colors-AWPrimary-darkYellow)\",\r\n\t\ttagDefaultDarkBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultDarkBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\ttagDefaultBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\tprogressBarBg: \"var(--chakra-colors-AWPrimary-midYellow)\",\r\n\t},\r\n});","import { type ColorTheme } from \"..\";\r\n\r\nexport const getLightGreyColorTheme = (): ColorTheme => ({\r\n\tname: \"Light Grey\",\r\n\tribbon: {\r\n\t\tprimaryBg: \"var(--chakra-colors-AWFunctional-lightGray)\",\r\n\t\tprimaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryColorAlpha: \"rgba(var(--chakra-colors-AWFunctionalRgb-dark), 0.3)\",\r\n\t\tprimaryColorBigText: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tquoteSecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tquoteSmallText: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tsecondaryBg: \"var(--chakra-colors-AWFunctional-midGray)\",\r\n\t\tsecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tmidColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonBg: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryButtonHoverBg: \"var(--chakra-colors-AWPrimary-softDark)\",\r\n\t\tprimaryBorderColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\ttagDefaultDarkBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultDarkBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\ttagDefaultBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\tprogressBarBg: \"var(--chakra-colors-AWFunctional-lightGray)\",\r\n\t},\r\n});","import { type ColorTheme } from \"..\";\r\n\r\nexport const getMidGreyColorTheme = (): ColorTheme => ({\r\n\tname: \"Mid Grey\",\r\n\tribbon: {\r\n\t\tprimaryBg: \"var(--chakra-colors-AWFunctional-midGray)\",\r\n\t\tprimaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryColorAlpha: \"rgba(var(--chakra-colors-AWFunctionalRgb-dark), 0.3)\",\r\n\t\tprimaryColorBigText: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tquoteSecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tquoteSmallText: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tsecondaryBg: \"var(--chakra-colors-AWFunctional-lightGray)\",\r\n\t\tsecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tmidColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonBg: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryButtonHoverBg: \"var(--chakra-colors-AWPrimary-softDark)\",\r\n\t\tprimaryBorderColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\ttagDefaultDarkBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultDarkBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\ttagDefaultBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.08)\",\r\n\t\ttagDefaultBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-grey), 0.2)\",\r\n\t\tprogressBarBg: \"var(--chakra-colors-AWFunctional-midGray)\",\r\n\t}\r\n});\r\n\r\n","import { type ColorTheme } from \"..\";\r\nexport const getDarkGreyColorTheme = (): ColorTheme => ({\r\n\tname: \"Dark Grey\",\r\n\tribbon: {\r\n\t\tprimaryBg: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryColorAlpha: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.3)\",\r\n\t\tprimaryColorBigText: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tquoteSecondaryColor: \"var(--chakra-colors-AWPrimary-midGray)\",\r\n\t\tquoteSmallText: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tsecondaryBg: \"var(--chakra-colors-AWFunctional-lightGray)\",\r\n\t\tsecondaryColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tmidColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonBg: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\tprimaryButtonColor: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t\tprimaryButtonHoverBg: \"var(--chakra-colors-AWFunctional-midGray)\",\r\n\t\tprimaryBorderColor: \"var(--chakra-colors-AWFunctional-white)\",\r\n\t\ttagDefaultDarkBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.08)\",\r\n\t\ttagDefaultDarkBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.2)\",\r\n\t\ttagDefaultBgColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.18)\",\r\n\t\ttagDefaultBorderColor: \"rgba(var(--chakra-colors-AWFunctionalRgb-white), 0.2)\",\r\n\t\tprogressBarBg: \"var(--chakra-colors-AWPrimary-dark)\",\r\n\t},\r\n});","import { getDefaultColorTheme } from \"./color-themes/default-color-theme\";\r\nimport { getLightPurpleColorTheme } from \"./color-themes/lightpurple-theme\";\r\nimport { getLightBlueColorTheme } from \"./color-themes/ligthblue-theme\";\r\nimport { getDarkBlueColorTheme } from \"./color-themes/darkblue-theme\";\r\nimport { getDarkGreenColorTheme } from \"./color-themes/darkgreen-theme\";\r\nimport { getDarkPurpleColorTheme } from \"./color-themes/darkpurple-theme\";\r\nimport { getDarkRedColorTheme } from \"./color-themes/darkred-theme\";\r\nimport { getDarkYellowColorTheme } from \"./color-themes/darkyellow-theme\";\r\nimport { getMidRedColorTheme } from \"./color-themes/midred-theme\";\r\nimport { getMidPurpleColorTheme } from \"./color-themes/midpurple-theme\";\r\nimport { getMidBlueColorTheme } from \"./color-themes/midblue-theme\";\r\nimport { getMidGreenColorTheme } from \"./color-themes/midgreen-theme\";\r\nimport { getMidYellowColorTheme } from \"./color-themes/midyellow-theme\";\r\nimport { getLightGreenColorTheme } from \"./color-themes/lightgreen-theme\";\r\nimport { getLightRedColorTheme } from \"./color-themes/lightred-theme\";\r\nimport { getLightYellowColorTheme } from \"./color-themes/lightyellow-theme\";\r\nimport { getLightGreyColorTheme } from \"./color-themes/ligthgrey-theme\";\r\nimport { getMidGreyColorTheme } from \"./color-themes/midgrey-theme\";\r\nimport { getDarkGreyColorTheme } from \"./color-themes/darkgrey-theme\";\r\n\r\nexport const themes = {\r\n\t\"theme_01\": getDefaultColorTheme,\r\n\t\"theme_02\": getLightGreenColorTheme,\r\n\t\"theme_03\": getLightBlueColorTheme,\r\n\t\"theme_04\": getLightPurpleColorTheme,\r\n\t\"theme_05\": getLightRedColorTheme,\r\n\t\"theme_06\": getLightYellowColorTheme,\r\n\t\"theme_07\": getLightGreyColorTheme,\r\n\t\"theme_08\": getMidGreenColorTheme,\r\n\t\"theme_09\": getMidBlueColorTheme,\r\n\t\"theme_10\": getMidPurpleColorTheme,\r\n\t\"theme_11\": getMidRedColorTheme,\r\n\t\"theme_12\": getMidYellowColorTheme,\r\n\t\"theme_13\": getMidGreyColorTheme,\r\n\t\"theme_14\": getDarkGreenColorTheme,\r\n\t\"theme_15\": getDarkBlueColorTheme,\r\n\t\"theme_16\": getDarkPurpleColorTheme,\r\n\t\"theme_17\": getDarkRedColorTheme,\r\n\t\"theme_18\": getDarkYellowColorTheme,\r\n\t\"theme_19\": getDarkGreyColorTheme,\r\n};\r\n\r\nexport type ColorThemeId = keyof typeof themes;","/**\r\n * Used in backend to whitelist sizes\r\n * When sizes are changed or added, run `npm run build`\r\n */\r\n\r\n/**\r\n * Values can be:\r\n * w (width)\r\n * h (height)\r\n * mw (max width)\r\n * mh (max height)\r\n * cw (crop width)\r\n * ch (crop height)\r\n */\r\nexport const imageSizes = {\r\n\tnone: {\r\n\t\tmw: 10,\r\n\t},\r\n\tdefault: { //16:9\r\n\t\tsm: {\r\n\t\t\tcw: 384,\r\n\t\t\tch: 216,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tcw: 768,\r\n\t\t\tch: 432,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tcw: 1152,\r\n\t\t\tch: 648,\r\n\t\t},\r\n\t\txl: {\r\n\t\t\tcw: 1440,\r\n\t\t\tch: 810,\r\n\t\t}\r\n\t},\r\n\twide: { //3 : 1 - fx. StoryPageHeader\r\n\t\tsm: {\r\n\t\t\tcw: 480,\r\n\t\t\tch: 160,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tcw: 768,\r\n\t\t\tch: 256,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tcw: 1281,\r\n\t\t\tch: 427,\r\n\t\t},\r\n\t\txl: {\r\n\t\t\tcw: 1464,\r\n\t\t\tch: 488,\r\n\t\t}\r\n\t},\r\n\tcontentSection: {\r\n\t\tsm: {\r\n\t\t\tcw: 384,\r\n\t\t\tch: 216,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tcw: 866,\r\n\t\t\tch: 488,\r\n\t\t}\r\n\t},\r\n\tfitContentWrapper: {\r\n\t\tsm: {\r\n\t\t\tw: 390,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tw: 866,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tw: 1184,\r\n\t\t},\r\n\t\txl: {\r\n\t\t\tw: 1464,\r\n\t\t}\r\n\t},\r\n\tarticleList: { // 4 : 3\r\n\t\tsm: {\r\n\t\t\tcw: 480,\r\n\t\t\tch: 360,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tcw: 768,\r\n\t\t\tch: 576,\r\n\t\t},\r\n\t},\r\n\thighlightedContent: {\r\n\t\tnarrow: {\r\n\t\t\tsm: {\r\n\t\t\t\tw: 171\r\n\t\t\t},\r\n\t\t\tlg: {\r\n\t\t\t\tw: 268\r\n\t\t\t}\r\n\t\t},\r\n\t\twide: {\r\n\t\t\tsm: {\r\n\t\t\t\tw: 480\r\n\t\t\t},\r\n\t\t\tmd: {\r\n\t\t\t\tw: 768\r\n\t\t\t},\r\n\t\t\tlg: {\r\n\t\t\t\tw: 566\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\trecipe: {\r\n\t\tsm: {\r\n\t\t\tcw: 480,\r\n\t\t\tch: 509,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tcw: 764,\r\n\t\t\tch: 810,\r\n\t\t}\r\n\t},\r\n\treview: {\r\n\t\tsm: {\r\n\t\t\th: 312\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\th: 512\r\n\t\t}\r\n\t},\r\n\tcontributor: {\r\n\t\tsm: {\r\n\t\t\tcw: 300,\r\n\t\t\tch: 300,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tcw: 178,\r\n\t\t\tch: 200,\r\n\t\t},\r\n\t},\r\n\tsquare: {\r\n\t\txs: {\r\n\t\t\tcw: 140,\r\n\t\t\tch: 140\r\n\t\t},\r\n\t\tsm: {\r\n\t\t\tcw: 265,\r\n\t\t\tch: 265\r\n\t\t}\r\n\t},\r\n\tarticleAuthor: {\r\n\t\tsm: {\r\n\t\t\tcw: 186,\r\n\t\t\tch: 186\r\n\t\t},\r\n\t},\r\n\tvideoList: {\r\n\t\tsm: {\r\n\t\t\tcw: 169,\r\n\t\t\tch: 107\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tcw: 417,\r\n\t\t\tch: 261\r\n\r\n\t\t}\r\n\t}\r\n}","import { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\n\r\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\r\nexport const text = (isRtl: boolean): ComponentStyleConfig => {\r\n\tconst ts = isRtl ? 1.2 : 1;\r\n\r\n\treturn {\r\n\t\tbaseStyle: {\r\n\t\t\tlineHeight: 'base',\r\n\t\t},\r\n\t\tsizes: {\r\n\t\t\tdisplay: {\r\n\t\t\t\tfontVariationSettings: \"'wght' 70\",\r\n\t\t\t\tfontSize: [\r\n\t\t\t\t\t`${ts * 5}rem`, // \r\n\t\t\t\t\tnull,\r\n\t\t\t\t\tnull,\r\n\t\t\t\t\t`${ts * 6.2}rem`,\r\n\t\t\t\t\t`${ts * 6.875}rem`\r\n\t\t\t\t],\r\n\t\t\t\tlineHeight: \"1\",\r\n\t\t\t\tletterSpacing: [\r\n\t\t\t\t\t`${ts * -0.25}rem`, \r\n\t\t\t\t\tnull, \r\n\t\t\t\t\t`${ts * -0.34375}rem`\r\n\t\t\t\t],\r\n\t\t\t},\r\n\r\n\t\t\th1: {\r\n\t\t\t\tfontSize: [\r\n\t\t\t\t\t`${ts * 2.375}rem`, \r\n\t\t\t\t\tnull, \r\n\t\t\t\t\t`${ts * 4}rem`\r\n\t\t\t\t],\r\n\t\t\t\tfontWeight: \"400\",\r\n\t\t\t\tlineHeight: `${ts * 1.1}`, \r\n\t\t\t},\r\n\t\t\th2: {\r\n\t\t\t\tfontSize: [\r\n\t\t\t\t\t`${ts * 1.75}rem`, \r\n\t\t\t\t\tnull, \r\n\t\t\t\t\t`${ts * 3}rem`\r\n\t\t\t\t],\r\n\t\t\t\tfontWeight: \"400\",\r\n\t\t\t\tlineHeight: `${ts * 1.1}`,\r\n\t\t\t},\r\n\t\t\th3: {\r\n\t\t\t\tfontSize: [\r\n\t\t\t\t\t`${ts * 1.25}rem`,\r\n\t\t\t\t\tnull,\r\n\t\t\t\t\t`${ts * 2}rem`\r\n\t\t\t\t],\r\n\t\t\t\tfontWeight: \"400\",\r\n\t\t\t\tlineHeight: `${ts * 1.1}`,\r\n\t\t\t},\r\n\t\t\th4: {\r\n\t\t\t\tfontSize: [\r\n\t\t\t\t\t`${ts * 1.125}rem`,\r\n\t\t\t\t\tnull,\r\n\t\t\t\t\t`${ts * 1.5}rem`\r\n\t\t\t\t],\r\n\t\t\t\tfontWeight: \"400\",\r\n\t\t\t\tlineHeight: `${ts * 1.1}`,\r\n\t\t\t},\r\n\t\t\th5: {\r\n\t\t\t\tfontSize: [\r\n\t\t\t\t\t`${ts * 0.875}rem`,\r\n\t\t\t\t\tnull,\r\n\t\t\t\t\t`${ts * 1}rem`\r\n\t\t\t\t],\r\n\t\t\t\tfontWeight: \"400\",\r\n\t\t\t\tlineHeight: `${ts * 1.1}`,\r\n\t\t\t},\r\n\t\t\tbodyLarge: {\r\n\t\t\t\tfontSize: `${ts * 1.375}rem`,\r\n\t\t\t\tfontWeight: \"500\",\r\n\t\t\t\tlineHeight: `${ts * 1.5}`,\r\n\t\t\t},\r\n\t\t\tbodySmall: {\r\n\t\t\t\tfontSize: `${ts * 1.125}rem`,\r\n\t\t\t\tfontWeight: \"500\",\r\n\t\t\t\tlineHeight: `${ts * 1.5}`,\r\n\t\t\t},\r\n\t\t\tcta: {\r\n\t\t\t\tfontSize: `${ts * 0.853125}rem`,\r\n\t\t\t\tfontWeight: \"400\",\r\n\t\t\t},\r\n\t\t\tcaption: {\r\n\t\t\t\tfontSize: [\r\n\t\t\t\t\t`${ts * 0.721875}rem`, \r\n\t\t\t\t\tnull, \r\n\t\t\t\t\t`${ts * 0.875}rem`\r\n\t\t\t\t],\r\n\t\t\t\ttextTransform: 'uppercase',\r\n\t\t\t\tfontWeight: \"500\",\r\n\t\t\t\tlineHeight: `${ts * 1.1}`,\r\n\t\t\t\tletterSpacing: ['-0.01375rem', null, '0']\r\n\t\t\t},\r\n\t\t},\r\n\t\tvariants: {\r\n\t\t\t\r\n\t\t},\r\n\t}\r\n}\r\n","export const breakpoints = {\r\n\tbase: '0em',\r\n\tsm: '30rem', //480px\r\n\tmd: '48rem', //768px\r\n\tlg: '62rem', //992px\r\n\txl: '90rem', //1440px\r\n\t'2xl': '120rem', //1920px\r\n}","import { Grid as ChakraGrid, GridItem as ChakraGridItem, type GridProps as ChakraGridProps, type GridItemProps } from '@chakra-ui/react';\r\n\r\nexport type GridProps = ChakraGridProps;\r\n\r\nexport const Grid = ({ children, ...rest }: GridProps) => {\r\n\treturn ({children})\r\n}\r\n\r\nexport const GridItem = ({ children, ...rest }: GridItemProps) => {\r\n\treturn {children}\r\n};","import { Box } from \"@chakra-ui/react\";\r\nimport { motion } from \"framer-motion\";\r\n\r\nexport const MotionBox = motion(Box);","/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/ban-types */\r\nimport i18n from \"i18next\";\r\nimport { useTranslation as i18nUseTranslation } from \"react-i18next\"; // eslint-disable-line no-restricted-imports\r\n\r\ntype PropsPath = {\r\n\t[P in keyof T]: T[P] extends object\r\n\t\t// @ts-ignore\r\n\t\t? `${string & P}` | `${string & P}.${PropsPath}`\r\n\t\t: `${string & P}`\r\n}[T extends string[] ? (number & keyof T) : keyof T];\r\n\r\nfunction format(str: string, args: string[]): string {\r\n\treturn str.replace(/{(\\d+)}/g, (match, number) => {\r\n\t\treturn typeof args[number] !== 'undefined'\r\n\t\t\t? args[number]\r\n\t\t\t: match;\r\n\t});\r\n}\r\n\r\nexport function useTranslation() {\r\n\tconst { t } = i18nUseTranslation();\r\n\r\n\tconst translate = (key: PropsPath, ...formatArgs: string[]): string => {\r\n\t\tlet translation = \"\";\r\n\t\t// @ts-ignore\r\n\t\tif (i18n.exists(key as string)) {\r\n\t\t\ttranslation = t(key);\r\n\t\t} else {\r\n\t\t\tconsole.warn(`Dictionary key '${key}' is missing`);\r\n\t\t\ttranslation = \"\";\r\n\t\t}\r\n\r\n\t\treturn format(translation, formatArgs);\r\n\t}\r\n\r\n\treturn [translate];\r\n}","import { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\n\r\nexport const Heading = (): ComponentStyleConfig => ({\r\n\tbaseStyle: {\r\n\t\tfontFamily: \"heading\",\r\n\t\tfontWeight: \"normal\",\r\n\t\tlineHeight: \"shorter\",\r\n\t},\r\n\tsizes: {\r\n\t\th1: {\r\n\t\t\tfontSize: [\"4xl\", null, null, \"6xl\"],\r\n\t\t},\r\n\t\th2: {\r\n\t\t\tfontSize: [\"3xl\", null, null, \"5xl\"],\r\n\t\t},\r\n\t\th3: {\r\n\t\t\tfontSize: [\"2xl\", null, null, \"4xl\"],\r\n\t\t\tfontWeight: [\"light\", null, null, \"normal\"],\r\n\t\t},\r\n\t\th4: {\r\n\t\t\tfontSize: [\"xl\", null, null, \"3xl\"],\r\n\t\t\tlineHeight: [\"short\", null, null, \"shorter\"],\r\n\t\t},\r\n\t\th5: {\r\n\t\t\tfontSize: [\"lg\", null, null, \"xl\"],\r\n\t\t\tfontWeight: \"light\",\r\n\t\t\tlineHeight: \"short\",\r\n\t\t},\r\n\t\th6: {\r\n\t\t\tfontSize: [\"xmd\", null, null, \"lg\"],\r\n\t\t\tlineHeight: [\"tall\", null, null, \"short\"],\r\n\t\t},\r\n\t\tarticleCard: {\r\n\t\t\tfontSize: [\"2xl\", null, null, null, \"4xl\"],\r\n\t\t\tfontWeight: [\"light\", null, null, \"normal\"],\r\n\t\t\tlineHeight: \"tall\",\r\n\t\t}\r\n\t},\r\n\tvariants: {},\r\n});\r\n","import { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\n\r\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\r\nexport const Text = (): ComponentStyleConfig => ({\r\n\tbaseStyle: {\r\n\t\tfontFamily: \"body\",\r\n\t\tfontSize: \"md\",\r\n\t\tfontWeight: \"normal\",\r\n\t\tlineHeight: \"tall\",\r\n\t},\r\n\tsizes: {\r\n\t\tbodyS: {\r\n\t\t\tfontSize: \"xs\",\r\n\t\t\tlineHeight: \"tall\",\r\n\t\t},\r\n\t\tbodyL: {\r\n\t\t\tfontSize: [\"md\", null, null, \"xmd\"],\r\n\t\t},\r\n\t\tcardTrumpet: {\r\n\t\t\tfontSize: [\"lg\", null, null, \"xl\"],\r\n\t\t},\r\n\t\tcardIssueNumber: {\r\n\t\t\tfontSize: [\"xl\", null, null, \"3xl\"],\r\n\t\t},\r\n\t\tcaption: {\r\n\t\t\tfontSize: \"xs\",\r\n\t\t\tlineHeight: \"tall\",\r\n\t\t},\r\n\t\tquote: {\r\n\t\t\tfontSize: [\"3xl\", null, null, \"5xl\"],\r\n\t\t\tlineHeight: \"shorter\",\r\n\t\t},\r\n\t\tquoteSign: {\r\n\t\t\tfontSize: [\"5xl\", null, null, \"7xl\"],\r\n\t\t\tlineHeight: [1.2, null, null, 1.1],\r\n\t\t},\r\n\t\tshareLabel: {\r\n\t\t\tfontSize: [\"md\", null, null, \"lg\"],\r\n\t\t\tlineHeight: \"taller\",\r\n\t\t}\r\n\t},\r\n\tvariants: {},\r\n});\r\n\r\n","import { Heading } from \"../components/Heading\";\r\nimport { Text } from \"../components/Text\";\r\n\r\nexport const getGlobalStyling = () => {\r\n\treturn ({\r\n\t\tglobal: {\r\n\t\t\thtml: {},\r\n\t\t\tbody: {},\r\n\t\t\t\".visually-hidden\": {\r\n\t\t\t\tclip: \"rect(0 0 0 0)\",\r\n\t\t\t\tclipPath: \"inset(50%)\",\r\n\t\t\t\theight: \"1px\",\r\n\t\t\t\toverflow: \"hidden\",\r\n\t\t\t\tposition: \"absolute\",\r\n\t\t\t\twhiteSpace: \"nowrap\",\r\n\t\t\t\twidth: \"1px\",\r\n\t\t\t},\r\n\t\t\t\"not('.page-editing')\": {\r\n\t\t\t\t\"*:focus-visible\": {\r\n\t\t\t\t\toutline: \".375rem double black !important\",\r\n\t\t\t\t\tboxShadow: \"0 0 0 .25rem white\",\r\n\t\t\t\t\tborderRadius: \".125rem\",\r\n\t\t\t\t},\r\n\t\t\t},\r\n\t\t\t\".richText\": {\r\n\t\t\t\t\"> div *:last-child,> *:last-child\": {\r\n\t\t\t\t\tmb: \"0\",\r\n\t\t\t\t},\r\n\t\t\t\t\"h1,h2,h3,h4,h5,h6,blockquote,p,ul,ol\": {\r\n\t\t\t\t\t\":first-of-type\": {\r\n\t\t\t\t\t\tmt: \"0\",\r\n\t\t\t\t\t},\r\n\t\t\t\t},\r\n\t\t\t\t\"h1,h2,h3,h4,h5,h6\": {\r\n\t\t\t\t\tmb: \"md\",\r\n\t\t\t\t},\r\n\t\t\t\t\"h1,h2,h3,h4\": {\r\n\t\t\t\t\t...Heading().sizes?.h4,\r\n\t\t\t\t},\r\n\t\t\t\t\"h5,h6\": {\r\n\t\t\t\t\t...Heading().sizes?.h5,\r\n\t\t\t\t},\r\n\t\t\t\tp: {\r\n\t\t\t\t\t\"> strong:first-of-type\": {\r\n\t\t\t\t\t\tdisplay: \"block\",\r\n\t\t\t\t\t\tfontSize: \"1.5rem\", // 24px\r\n\t\t\t\t\t\tmarginBottom: [\"md\", null, null, \"md\"],\r\n\t\t\t\t\t},\r\n\t\t\t\t\tcolor: \"primary.dark\",\r\n\t\t\t\t\t...Text().sizes?.bodyL,\r\n\t\t\t\t\tmb: \"md\",\r\n\t\t\t\t\tstrong: {\r\n\t\t\t\t\t\tfontWeight: \"600\",\r\n\t\t\t\t\t},\r\n\t\t\t\t\tem: {\r\n\t\t\t\t\t\tfontStyle: \"italic\",\r\n\t\t\t\t\t},\r\n\t\t\t\t},\r\n\t\t\t\ta: {\r\n\t\t\t\t\ttextDecoration: \"underline\",\r\n\t\t\t\t\tcursor: \"pointer\",\r\n\t\t\t\t\toutline: \"none\",\r\n\t\t\t\t\twordBreak: \"break-word\",\r\n\t\t\t\t\t_focusVisible: {\r\n\t\t\t\t\t\toutline: \"1px dotted black\",\r\n\t\t\t\t\t\toutlineOffset: \"2px\",\r\n\t\t\t\t\t\toutlineColor: \"black\",\r\n\t\t\t\t\t\ttextDecoration: \"underline dotted\",\r\n\t\t\t\t\t},\r\n\t\t\t\t\t_hover: {\r\n\t\t\t\t\t\toutline: \"none\",\r\n\t\t\t\t\t\ttextDecoration: \"none\",\r\n\t\t\t\t\t},\r\n\t\t\t\t},\r\n\t\t\t\t\"ul, ol\": {\r\n\t\t\t\t\t...Text().sizes?.bodyL,\r\n\t\t\t\t\tdisplay: \"block\",\r\n\t\t\t\t\tw: \"auto\",\r\n\t\t\t\t\tmb: \"md\",\r\n\t\t\t\t\tml: 0,\r\n\t\t\t\t\tmr: \"lmd\",\r\n\t\t\t\t\t\"> li\": {\r\n\t\t\t\t\t\tmb: \"xs\",\r\n\t\t\t\t\t\tstrong: {\r\n\t\t\t\t\t\t\tfontWeight: \"600\",\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\tem: {\r\n\t\t\t\t\t\t\tfontStyle: \"italic\",\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t},\r\n\t\t\t\t},\r\n\t\t\t\tul: {\r\n\t\t\t\t\tlistStyle: \"disc\",\r\n\t\t\t\t},\r\n\t\t\t\tol: {\r\n\t\t\t\t\tlistStyle: \"arabic-indic\",\r\n\t\t\t\t},\r\n\t\t\t\tstrong: {\r\n\t\t\t\t\tfontWeight: \"normal\",\r\n\t\t\t\t},\r\n\t\t\t\tem: {\r\n\t\t\t\t\tfontStyle: \"normal\",\r\n\t\t\t\t},\r\n\t\t\t},\r\n\t\t\t\".articleRichText\": {\r\n\t\t\t\tfigure: {\r\n\t\t\t\t\twidth: \"100%\",\r\n\t\t\t\t\tmarginTop: \"md\",\r\n\t\t\t\t\tmarginBottom: \"md\",\r\n\r\n\t\t\t\t\t\"a[href*='.jpg'],img\": {\r\n\t\t\t\t\t\tmargin: \"none\",\r\n\t\t\t\t\t\twidth: \"100%\",\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\"&.alignleft:has(img)\": {\r\n\t\t\t\t\t\twidth: [\"100%\", null, null, \"40% !important\"],\r\n\t\t\t\t\t\tfloat: [\"none\", null, null, \"right\"],\r\n\t\t\t\t\t\tmarginLeft: 0,\r\n\t\t\t\t\t\tmarginRight: [\"none\", null, null, \"lmd\"],\r\n\t\t\t\t\t\t\"+ p\": {\r\n\t\t\t\t\t\t\tdisplay: \"block\",\r\n\t\t\t\t\t\t\twidth: [\"100%\", null, null, \"auto !important\"],\r\n\t\t\t\t\t\t\t// paddingLeft: [\"0\", null, null, \"lmd\"],\r\n\t\t\t\t\t\t\tmarginLeft: 0,\r\n\t\t\t\t\t\t\tmarginRight: 0,\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\"&.alignright:has(img)\": {\r\n\t\t\t\t\t\twidth: [\"100%\", null, null, \"40% !important\"],\r\n\t\t\t\t\t\tfloat: [\"none\", null, null, \"left\"],\r\n\t\t\t\t\t\tmarginLeft: [\"none\", null, null, \"lmd\"],\r\n\t\t\t\t\t\tmarginRight: 0,\r\n\t\t\t\t\t\t\"+ p\": {\r\n\t\t\t\t\t\t\tdisplay: \"block\",\r\n\t\t\t\t\t\t\twidth: [\"100%\", null, null, \"auto !important\"],\r\n\t\t\t\t\t\t\t// paddingRight: [\"0\", null, null, \"lmd\"],\r\n\t\t\t\t\t\t\tmarginLeft: 0,\r\n\t\t\t\t\t\t\tmarginRight: 0,\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t},\r\n\t\t\t\t},\r\n\t\t\t\tfigcaption: {\r\n\t\t\t\t\tmarginTop: \"md\",\r\n\t\t\t\t},\r\n\t\t\t\t\".gallery\": {\r\n\t\t\t\t\tdisplay: \"flex\",\r\n\t\t\t\t\tflexDirection: \"row\",\r\n\t\t\t\t\tflexWrap: \"no-wrap\",\r\n\t\t\t\t\tgap: \"md\",\r\n\t\t\t\t\t\".gallery-item\": {\r\n\t\t\t\t\t\tmaxWidth: \"50%\",\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\t\"p\": {\r\n\t\t\t\t\tdisplay: \"inline-block\",\r\n\t\t\t\t\tmarginBottom: [\"md\", null, null, \"lg\"],\r\n\r\n\t\t\t\t\t\"a[href*='.jpg']\": {\r\n\t\t\t\t\t\tpointerEvents: \"none\",\r\n\r\n\t\t\t\t\t\timg: {\r\n\t\t\t\t\t\t\tmargin: \"none\",\r\n\t\t\t\t\t\t\twidth: \"100%\",\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t},\r\n\r\n\t\t\t\t\tbr: {\r\n\t\t\t\t\t\tcontent: \"''\",\r\n\t\t\t\t\t\tdisplay: \"block\",\r\n\t\t\t\t\t\twidth: [\"100%\", null, null, \"50%\"],\r\n\t\t\t\t\t\tmarginBottom: [\"md\", null, null, \"lg\"],\r\n\t\t\t\t\t},\r\n\r\n\t\t\t\t\t_odd: {\r\n\t\t\t\t\t\t\"a[href*='.jpg'], img\": {\r\n\t\t\t\t\t\t\tfloat: [\"none\", null, null, \"right\"],\r\n\t\t\t\t\t\t\tmarginRight: [\"none\", null, null, \"lmd\"],\r\n\t\t\t\t\t\t\tmarginLeft: \"none\",\r\n\t\t\t\t\t\t\tmarginTop: \"none\",\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t},\r\n\r\n\t\t\t\t\t_even: {\r\n\t\t\t\t\t\t// Note to self:\r\n\t\t\t\t\t\t// might change to left later.\r\n\t\t\t\t\t\tfloat: [\"none\", null, null, \"none\"],\r\n\t\t\t\t\t\tmarginLeft: [\"none\", null, null, \"lmd\"],\r\n\t\t\t\t\t\tmarginRight: \"none\",\r\n\t\t\t\t\t\tmarginTop: \"none\",\r\n\t\t\t\t\t\t// border: \"10px solid red\",\r\n\t\t\t\t\t},\r\n\r\n\t\t\t\t\t\"a[href*='.jpg'], img\": {\r\n\t\t\t\t\t\tdisplay: [\"block\", null, null, \"inline-block\"],\r\n\t\t\t\t\t\twidth: [\"100%\", null, null, \"50%\"],\r\n\t\t\t\t\t\tmarginTop: \"md\",\r\n\t\t\t\t\t\tmarginBottom: [\"md\", null, null, \"lg\"],\r\n\r\n\t\t\t\t\t\t_odd: {\r\n\t\t\t\t\t\t\tfloat: [\"none\", null, null, \"right\"],\r\n\t\t\t\t\t\t\tmarginRight: [\"none\", null, null, \"md\"],\r\n\t\t\t\t\t\t\tmarginLeft: \"none\",\r\n\t\t\t\t\t\t},\r\n\r\n\t\t\t\t\t\t_even: {\r\n\t\t\t\t\t\t\tfloat: [\"none\", null, null, \"left\"],\r\n\t\t\t\t\t\t\tmarginLeft: [\"none\", null, null, \"md\"],\r\n\t\t\t\t\t\t\tmarginRight: \"none\",\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t},\r\n\t\t\t\t},\r\n\r\n\t\t\t\thr: {\r\n\t\t\t\t\tmarginTop: \"xs\",\r\n\t\t\t\t\tmarginBottom: \"md\",\r\n\t\t\t\t},\r\n\r\n\t\t\t},\r\n\t\t}\r\n\t})\r\n\r\n};\r\n","import type { RecursiveObject } from \"@chakra-ui/react\";\r\nimport { rem } from \"polished\";\r\n\r\nexport const mapPxToRem = (\r\n\tvalues: object,\r\n\tbase: string | number = \"16px\"\r\n): RecursiveObject =>\r\n\tObject.assign(\r\n\t\t{},\r\n\t\t...Object.entries(values).map(([key, value]: [string, string]) => ({\r\n\t\t\t[key]: rem(value, base),\r\n\t\t}))\r\n\t);\r\nexport const pxToRem = (\r\n\tvalue: string,\r\n\tbase: string | number = \"16px\"\r\n): string => rem(value, base);\r\n","import { mapPxToRem } from \"../../Utils/mapPxToRem\";\r\n\r\nconst breakpoints = mapPxToRem({\r\n\tbase: \"0px\",\r\n\tsm: \"390px\",\r\n\tmd: \"769px\",\r\n\tlg: \"993px\",\r\n\txl: \"1441px\",\r\n});\r\n\r\nexport default breakpoints;","import { pxToRem } from \"../../Utils/mapPxToRem\";\r\n\r\nconst header = {\r\n\theaderHeight: pxToRem(\"80px\"),\r\n}\r\n\r\nconst container = {\r\n\tmax: pxToRem(\"2100px\"),\r\n\tcontent: pxToRem(\"1092px\"),\r\n}\r\n\r\nconst sizes = {\r\n\twfull: \"100vw\",\r\n\thfull: \"100vh\",\r\n\tmax: \"max-content\",\r\n\tmin: \"min-content\",\r\n\tfull: \"100%\",\r\n\tcontainer,\r\n\t...header,\r\n\tmoduleTitleStickyTop: `calc(${header.headerHeight} + ${pxToRem(\"20px\")})`,\r\n};\r\n\r\nexport default sizes;\r\n","const zIndices = {\r\n\thide: -1,\r\n\tauto: \"auto\",\r\n\tbase: 0,\r\n\theader: 10,\r\n\toverHeader: 100,\r\n\tlevel1: 1,\r\n\tlevel2: 2,\r\n\tlevel3: 3,\r\n};\r\n\r\nexport default zIndices;\r\n","import { mapPxToRem } from \"../../Utils/mapPxToRem\";\r\n\r\nconst spacings: Record = {\r\n\tnone: \"0px\",\r\n\txxs: \"5px\",\r\n\txs: \"10px\",\r\n\tsm: \"15px\",\r\n\tmd: \"20px\",\r\n\tlmd: \"30px\",\r\n\tlg: \"40px\",\r\n\tsxl: \"48px\",\r\n\txl: \"60px\",\r\n\txxl: \"80px\",\r\n};\r\n\r\nconst spacing = mapPxToRem(spacings);\r\n\r\nexport default spacing;\r\n","const transition = {\r\n};\r\n\r\nexport default transition;","import { mapPxToRem } from \"../../Utils/mapPxToRem\";\r\n\r\nconst typography = {\r\n\tlineHeights: {\r\n\t\tsmall: 0.8,\r\n\t\tnormal: \"normal\",\r\n\t\tnone: 1,\r\n\t\tshorter: 1.3,\r\n\t\tshort: 1.4,\r\n\t\tbase: 1.45,\r\n\t\ttall: 1.5,\r\n\t\ttaller: 1.6,\r\n\t},\r\n\r\n\tfontWeights: {\r\n\t\tlight: 300,\r\n\t\tnormal: 400,\r\n\t\t// medium: 500,\r\n\t\tbold: 700,\r\n\t},\r\n\r\n\tfonts: {\r\n\t\theading: `'Almarai', \"sans-serif\"`,\r\n\t\tbody: `'Almarai', \"sans-serif\"`,\r\n\t},\r\n\r\n\tfontSizes: mapPxToRem({\r\n\t\txs: \"14px\",\r\n\t\tsm: \"15px\",\r\n\t\tmd: \"16px\",\r\n\t\txmd: \"18px\",\r\n\t\tlg: \"20px\",\r\n\t\txl: \"24px\",\r\n\t\t\"2xl\": \"28px\",\r\n\t\t\"3xl\": \"32px\",\r\n\t\t\"4xl\": \"40px\",\r\n\t\t\"5xl\": \"64px\",\r\n\t\t\"6xl\": \"96px\",\r\n\t\t\"7xl\": \"120px\",\r\n\t}),\r\n};\r\n\r\nexport default typography;\r\n","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\n\r\nexport const Container = (rtl = true): ComponentStyleConfig => ({\r\n\tbaseStyle: {\r\n\t\tw: \"full\",\r\n\t\tmaxW: \"container.max\",\r\n\t\tmargin: '0 auto',\r\n\t\tpx: [\"md\", null, null, \"lg\"],\r\n\t},\r\n\tsizes: {\r\n\t\tarticleContent: {\r\n\t\t\tmaxW: \"container.content\",\r\n\t\t},\r\n\t},\r\n\tvariants: {},\r\n});\r\n","import { transparentize } from \"polished\"\r\n\r\nconst primary = {\r\n\twhite: '#FFF',\r\n\tblack: '#000',\r\n\tdark: \"rgb(17, 17, 17)\",\r\n}\r\n\r\nconst secondary = {\r\n\tdarkGreen: \"#143630\",\r\n\tgoldenYellow: \"#F5CB5C\"\r\n}\r\n\r\nconst topics = {\r\n\tlightBlue: \"#B4C5E4\",\r\n\tamethystPurple: \"#5F45B6\",\r\n\torange: \"#F39B41\",\r\n\tburgundy: \"#5C2751\",\r\n\tdarkTeal: \"#08605F\",\r\n}\r\n\r\nconst tags = {\r\n\tlifeBg: \"#e6efef\",\r\n\tlifeText: \"#064d4c\",\r\n\tsciencesBg: \"#efe9ee\",\r\n\tsciencesText: \"#4b2e83\",\r\n\tthoughtsBg: \"#fdebd9\",\r\n\tthoughtsText: \"#794e20\",\r\n\tartsBg: \"#efecf8\",\r\n\tartsText: \"#4c3792\",\r\n\tliteratureBg: \"#e1e8f4\",\r\n\tliteratureText: \"#484f5b\",\r\n}\r\n\r\nconst support = {\r\n\tgrayBlue: \"#484F5B\",\r\n}\r\n\r\nconst tints = {\r\n\tblack: {\r\n\t\t70: transparentize(0.3, primary.black),\r\n\t\t50: transparentize(0.5, primary.black),\r\n\t\t30: transparentize(0.7, primary.black),\r\n\t\t10: transparentize(0.9, primary.black),\r\n\t\t5: transparentize(0.95, primary.black),\r\n\t},\r\n\twhite: {\r\n\t\t70: transparentize(0.3, primary.white),\r\n\t\t60: transparentize(0.4, primary.white),\r\n\t\t50: transparentize(0.5, primary.white),\r\n\t\t40: transparentize(0.6, primary.white),\r\n\t\t30: transparentize(0.7, primary.white),\r\n\t\t20: transparentize(0.8, primary.white),\r\n\t\t10: transparentize(0.9, primary.white),\r\n\t\t5: transparentize(0.95, primary.white),\r\n\t},\r\n\tdark: {\r\n\t\t80: transparentize(0.2, primary.dark),\r\n\t\t70: transparentize(0.3, primary.dark),\r\n\t\t60: transparentize(0.4, primary.dark),\r\n\t\t50: transparentize(0.5, primary.dark),\r\n\t\t40: transparentize(0.6, primary.dark),\r\n\t\t30: transparentize(0.7, primary.dark),\r\n\t\t20: transparentize(0.8, primary.dark),\r\n\t\t10: transparentize(0.9, primary.dark),\r\n\t\t5: transparentize(0.95, primary.dark),\r\n\t}\r\n}\r\n\r\nconst overlays = {\r\n\tgeneric: `\r\n\t\tlinear-gradient(\r\n\t\t\t180deg,\r\n\t\t\trgba(17, 17, 17, 0.8) 0%,\r\n\t\t\trgba(17, 17, 17, 0.3) 10%,\r\n\t\t\trgba(17, 17, 17, 0.3) 25%,\r\n\t\t\trgba(17, 17, 17, 0.5) 35%,\r\n\t\t\trgba(17, 17, 17, 0.7) 50%,\r\n\t\t\trgba(17, 17, 17, 0.8) 100%\r\n\t\t)\r\n\t`,\r\n\tsliderAuthorCard: `\r\n\t\tlinear-gradient(\r\n\t\t\t180deg, \r\n\t\t\trgba(17, 17, 17, 0) 0%,\r\n\t\t\trgba(17, 17, 17, 0.3) 40%,\r\n\t\t\trgba(17, 17, 17, 0.9) 80%\r\n\t\t)\r\n\t`,\r\n\tpodcastCard: `\r\n\t\tlinear-gradient(\r\n\t\t\t180deg, \r\n\t\t\trgba(17, 17, 17, 0.2) -20%,\r\n\t\t\trgba(17, 17, 17, 0.9) 80%\r\n\t\t)\r\n\t`,\r\n}\r\n\r\nexport const colors = {\r\n\tprimary,\r\n\tsecondary,\r\n\ttopics,\r\n\tsupport,\r\n\ttints,\r\n\ttags,\r\n\toverlays,\r\n}","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\nimport { colors } from \"../variables/colors\";\r\n\r\nexport const getButtonVariants = (isRtl = true, useHover = true) => ({\r\n\t\"light\": {\r\n\t\tbg: colors.primary.white,\r\n\t\tcolor: 'black',\r\n\t\tborder: `1px solid ${colors.primary.white}`,\r\n\t\t_hover: useHover ? {\r\n\t\t\tbg: 'transparent',\r\n\t\t\tcolor: colors.primary.white,\r\n\t\t} : {},\r\n\t},\r\n\t\"dark\": {\r\n\t\tbg: colors.primary.dark,\r\n\t\tcolor: colors.primary.white,\r\n\t\tborder: `1px solid ${colors.primary.dark}`,\r\n\t\t_hover: useHover ? {\r\n\t\t\tbg: 'transparent',\r\n\t\t\tcolor: colors.primary.dark,\r\n\t\t} : {},\r\n\t},\r\n\t\"unstyled\": {\r\n\t\tbg: 'transparent',\r\n\t\tcolor: 'inherit',\r\n\t\tboxShadow: 'none',\r\n\t\t_hover: useHover ? {\r\n\t\t\tbg: 'transparent',\r\n\t\t} : {},\r\n\t},\r\n\t\"unstyled-w-hover-dark\": {\r\n\t\tbg: 'transparent',\r\n\t\tcolor: colors.primary.dark,\r\n\t\tboxShadow: 'none',\r\n\t\tborder: `1px solid transparent`,\r\n\t\t_hover: useHover ? {\r\n\t\t\tbg: 'transparent',\r\n\t\t\tcolor: colors.primary.dark,\r\n\t\t\tborder: `1px solid ${colors.primary.dark}`,\r\n\t\t} : {},\r\n\t},\r\n\t\"unstyled-w-hover-light\": {\r\n\t\tbg: 'transparent',\r\n\t\tcolor: colors.primary.white,\r\n\t\tboxShadow: 'none',\r\n\t\tborder: `1px solid transparent`,\r\n\t\t_hover: useHover ? {\r\n\t\t\tbg: 'transparent',\r\n\t\t\tcolor: colors.primary.white,\r\n\t\t\tborder: `1px solid ${colors.primary.white}`,\r\n\t\t} : {},\r\n\t},\r\n\t\"bordered-dark\": {\r\n\t\tbg: 'transparent',\r\n\t\tcolor: colors.primary.dark,\r\n\t\tborder: `1px solid ${colors.primary.dark}`,\r\n\t\t_hover: useHover ? {\r\n\t\t\tbg: colors.primary.dark,\r\n\t\t\tcolor: colors.primary.white,\r\n\t\t} : {},\r\n\t},\r\n\t\"bordered-light\": {\r\n\t\tbg: 'transparent',\r\n\t\tcolor: colors.primary.white,\r\n\t\tborder: `1px solid ${colors.primary.white}`,\r\n\t\t_hover: useHover ? {\r\n\t\t\tbg: colors.primary.white,\r\n\t\t\tcolor: colors.primary.dark,\r\n\t\t} : {},\r\n\t},\r\n});\r\n\r\nexport const getBaseButtonStyles = (isRtl: boolean) => ({\r\n\tfontFamily: 'body',\r\n\tfontWeight: '400',\r\n\ttransition: 'background-color 0.2s, color 0.2s',\r\n})\r\n\r\nexport const getBaseButtonSizesStyles = (isRtl: boolean) => ({\r\n\tlg: {\r\n\t\tfontSize: 'sm',\r\n\t\tpx: 'md',\r\n\t\tpy: \"xs\",\r\n\t},\r\n\tmd: {\r\n\t\tfontSize: 'sm',\r\n\t\tpx: 'md',\r\n\t\tpy: \"xxs\",\r\n\t}\r\n})\r\n\r\nexport type ButtonVariant = keyof (ReturnType);\r\n\r\nexport const Button = (isRtl: boolean): ComponentStyleConfig => ({\r\n\tbaseStyle: getBaseButtonStyles(isRtl),\r\n\tsizes: getBaseButtonSizesStyles(isRtl),\r\n\tvariants: getButtonVariants(isRtl),\r\n});","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\n\r\nexport const Link = (rtl = true): ComponentStyleConfig => ({\r\n\tbaseStyle: {\r\n\t\tfontFamily: \"body\",\r\n\t\tdisplay: \"inline-flex\",\r\n\r\n\t\t_focusVisible: {\r\n\t\t\toutline: \".375rem double black\",\r\n\t\t\toutlineOffset: \"1px\",\r\n\t\t\tboxShadow: \"0 0 0 .25rem white\",\r\n\t\t\tborderRadius: \".125rem\",\r\n\r\n\t\t\t_before: {\r\n\t\t\t\toutline: \"none\",\r\n\t\t\t\tboxShadow: \"none\",\r\n\t\t\t},\r\n\t\t},\r\n\t},\r\n\tsizes: {\r\n\t\tlinkS: {\r\n\t\t\tfontSize: \"xs\",\r\n\t\t\tlineHeight: \"base\",\r\n\t\t},\r\n\t\tfooterSubscribeLink: {\r\n\t\t\tfontSize: [\"2xl\", null, null, \"4xl\"],\r\n\t\t\tlineHeight: \"shorter\"\r\n\t\t},\r\n\t\tsmallBodyBold: {},\r\n\t\tbannerLink: {},\r\n\t\tmoduleLink: {},\r\n\t},\r\n\tvariants: {\r\n\t\tfullWidth: {\r\n\t\t\twidth: \"100%\",\r\n\t\t},\r\n\t\tfooterSocial: {},\r\n\t\tfooterLink: {\r\n\t\t\ttransition: \"all 0.3s ease-in-out\",\r\n\t\t\t_hover: {\r\n\t\t\t\tcolor: \"secondary.goldenYellow\",\r\n\t\t\t}\r\n\t\t},\r\n\t\tmoduleLink: {},\r\n\t},\r\n});\r\n","import { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\nimport { pxToRem } from \"../../Utils/mapPxToRem\";\r\n\r\nexport const Icon = (): ComponentStyleConfig => ({\r\n\t// The styles all Headings have in common\r\n\tbaseStyle: {\r\n\t\tboxSize: pxToRem(\"16px\"),\r\n\t},\r\n\tsizes: {\r\n\t\tlg: {\r\n\t\t\tboxSize: pxToRem(\"24px\"),\r\n\t\t},\r\n\t\tsxl: {\r\n\t\t\tboxSize: pxToRem(\"32px\"),\r\n\t\t},\r\n\t\txl: {\r\n\t\t\tboxSize: pxToRem(\"48px\"),\r\n\t\t},\r\n\t\txxl: {\r\n\t\t\tboxSize: pxToRem(\"64px\"),\r\n\t\t},\r\n\t\tlogo: {\r\n\t\t\tboxSize: pxToRem(\"16px\"),\r\n\t\t}\r\n\t},\r\n});\r\n","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\nimport { getBaseButtonSizesStyles, getBaseButtonStyles, getButtonVariants } from \"./Buttons\";\r\n\r\nexport type ChipVariant = keyof (ReturnType);\r\n\r\nexport const Chip = (isRtl: boolean): ComponentStyleConfig => ({\r\n\tbaseStyle: getBaseButtonStyles(isRtl),\r\n\tsizes: getBaseButtonSizesStyles(isRtl),\r\n\tvariants: getButtonVariants(isRtl, false),\r\n\tdefaultProps: {\r\n\t\tsize: \"lg\",\r\n\t\tvariant: \"dark\",\r\n\t},\r\n});","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\nimport { getBaseButtonSizesStyles, getBaseButtonStyles, getButtonVariants } from \"./Buttons\";\r\n\r\nexport type LinkButtonVariant = keyof (ReturnType);\r\n\r\nexport const LinkButton = (isRtl: boolean): ComponentStyleConfig => ({\r\n\tbaseStyle: getBaseButtonStyles(isRtl),\r\n\tsizes: getBaseButtonSizesStyles(isRtl),\r\n\tvariants: getButtonVariants(isRtl),\r\n\tdefaultProps: {\r\n\t\tsize: \"lg\",\r\n\t\tvariant: \"dark\",\r\n\t},\r\n});","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\nimport { colors } from \"../variables/colors\";\r\n\r\nexport const getTagVariants = () => ({\r\n\t'dark': {\r\n\t\tbackgroundColor: colors.tints.dark[10],\r\n\t\tcolor: colors.primary.dark,\r\n\t\tcontainer: {\r\n\t\t\tbackgroundColor: colors.tints.dark[10],\r\n\t\t\tcolor: colors.primary.dark,\r\n\t\t},\r\n\t},\r\n\t'light': {\r\n\t\tcontainer: {\r\n\t\t\tbackgroundColor: colors.tints.white[10],\r\n\t\t\tcolor: colors.primary.white,\r\n\t\t}\r\n\t},\r\n\t'colored': {\r\n\t\tcontainer: {\r\n\t\t\tbackgroundColor: \"inherit\",\r\n\t\t\tcolor: \"inherit\",\r\n\t\t}\r\n\t},\r\n});\r\n\r\nexport type TagVariant = keyof (ReturnType);\r\n\r\nexport const Tag = (): ComponentStyleConfig => ({\r\n\tbaseStyle: {\r\n\t\tcontainer: {\r\n\t\t\tfontSize: 'xs',\r\n\t\t\tpx: 'xs',\r\n\t\t\tpy: \"xxs\",\r\n\t\t}\r\n\t},\r\n\tvariants: getTagVariants(),\r\n\tdefaultProps: {\r\n\t\tvariant: \"dark\",\r\n\t},\r\n});","import { createMultiStyleConfigHelpers } from \"@chakra-ui/react\";\r\nimport { inputAnatomy } from '@chakra-ui/anatomy'\r\nimport { pxToRem } from \"../../Utils/mapPxToRem\";\r\n\r\nconst { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(inputAnatomy.keys);\r\n\r\nexport const baseStyle = definePartsStyle({\r\n\tfield: {\r\n\t\tboxSizing: \"border-box\",\r\n\t\tdisplay: \"flex\",\r\n\t\tflexDirection: \"row\",\r\n\t\tjustifyContent: \"space-between\",\r\n\t\talignItems: \"center\",\r\n\t\tpadding: \"12px 10px\",\r\n\t\tgap: \"10px\",\r\n\r\n\t\tbackgroundColor: \"transparent\",\r\n\r\n\t\twidth: \"100%\",\r\n\t\theight: \"56px\",\r\n\r\n\t\tborderWidth: \"1px\",\r\n\t\tborderStyle: \"solid\",\r\n\t\tborderColor: \"#111111\",\r\n\t\tborderRadius: \"0\",\r\n\r\n\t\tflex: \"none\",\r\n\t\talignSelf: \"stretch\",\r\n\t\tflexGrow: 0,\r\n\r\n\t\t_placeholder: {\r\n\t\t\tcolor: \"tints.black.50\",\r\n\t\t}\r\n\t}\r\n});\r\n\r\nconst search = definePartsStyle({\r\n\tfield: {\r\n\t\theight: \"56px\",\r\n\t\tfontSize: [\"md\", null, null, pxToRem(\"64px\")],\r\n\t\tborderColor: \"primary.white\",\r\n\t\tbackgroundColor: \"secondary.darkGreen\",\r\n\t\tborderBottom: \"1px solid white\",\r\n\t\tfocusBorderColor: \"blue.500\",\r\n\t\tcolor: \"white\",\r\n\t\twidth: \"100%\",\r\n\t\tpaddingY: pxToRem(\"52px\"),\r\n\t\tborderTop: \"none\",\r\n\t\tborderLeft: \"none\",\r\n\t\tborderRight: \"none\",\r\n\t\t_placeholder: {\r\n\t\t\tcolor: \"rgba(255, 255, 255, 0.5)\",\r\n\t\t}\r\n\t}\r\n});\r\n\r\n\r\n\r\nexport const Input = defineMultiStyleConfig({\r\n\tbaseStyle,\r\n\tvariants: {\r\n\t\tsearch,\r\n\t}\r\n});\r\n","import { createMultiStyleConfigHelpers } from \"@chakra-ui/react\";\r\nimport { selectAnatomy } from '@chakra-ui/anatomy'\r\nimport { baseStyle as inputBaseStyle } from \"./Input\";\r\n\r\nconst { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(selectAnatomy.keys);\r\n\r\nconst baseStyle = definePartsStyle({\r\n\t...inputBaseStyle,\r\n});\r\n\r\nconst lightTheme = definePartsStyle({\r\n\tfield: {\r\n\t\tborderBottom: \"1px solid white\",\r\n\t}\r\n})\r\n\r\nexport const Select = defineMultiStyleConfig({\r\n\tbaseStyle: {\r\n\t\t...baseStyle,\r\n\t\tfield: {\r\n\t\t\t...baseStyle.field,\r\n\t\t}\r\n\t},\r\n\tvariants: {\r\n\t\tlight: lightTheme\r\n\t}\r\n})\r\n","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { extendBaseTheme } from \"@chakra-ui/react\";\r\nimport { type DeepPartial } from \"utility-types\";\r\nimport { getGlobalStyling } from \"./styles/global\";\r\nimport breakpoints from \"./variables/breakpoints\";\r\nimport sizes from \"./variables/sizes\";\r\nimport zIndices from \"./variables/zIndices\";\r\nimport spacing from \"./variables/spacing\";\r\nimport transition from \"./variables/transition\";\r\nimport typography from \"./variables/typography\";\r\nimport { theme as chakraTheme } from \"@chakra-ui/theme\";\r\nimport { Container } from \"./components/Container\";\r\nimport { Heading } from \"./components/Heading\";\r\nimport { Button } from \"./components/Buttons\";\r\nimport { Text } from \"./components/Text\";\r\nimport { Link } from \"./components/Link\";\r\nimport { Icon } from \"./components/Icon\";\r\nimport { colors } from \"./variables/colors\";\r\nimport { Chip } from \"./components/Chip\";\r\nimport { LinkButton } from \"./components/LinkButton\";\r\nimport { Tag } from \"./components/Tag\";\r\nimport { Select } from \"./components/Select\";\r\nimport { Input } from \"./components/Input\";\r\nimport deepmerge from \"deepmerge\";\r\n\r\nconst {\r\n\tButton: ChakraButton,\r\n\tHeading: ChakraHeading,\r\n\tSelect: ChakraSelect,\r\n\tInput: ChakraInput,\r\n} = chakraTheme.components;\r\n\r\nconst foundations = (rtl = true) => ({\r\n\tgetGlobalStyling: getGlobalStyling(),\r\n\tdirection: rtl ? \"rtl\" : \"ltr\",\r\n\tbreakpoints,\r\n\tcolors,\r\n\tsizes,\r\n\tspace: spacing,\r\n\ttransition,\r\n\t...typography,\r\n\tzIndices,\r\n});\r\n\r\nconst components = (rtl: boolean = true) => ({\r\n\tContainer: {\r\n\t\t...Container(),\r\n\t},\r\n\tText: {\r\n\t\t...Text(),\r\n\t},\r\n\tHeading: {\r\n\t\t...ChakraHeading,\r\n\t\t...Heading(),\r\n\t},\r\n\tButton: {\r\n\t\t...ChakraButton,\r\n\t\t...Button(rtl),\r\n\t},\r\n\tLink: {\r\n\t\t...Link(rtl),\r\n\t},\r\n\tIcon: {\r\n\t\t...Icon(),\r\n\t},\r\n\tChip: {\r\n\t\t...Chip(rtl),\r\n\t},\r\n\tLinkButton: {\r\n\t\t...LinkButton(rtl),\r\n\t},\r\n\tTag: {\r\n\t\t...Tag(),\r\n\t},\r\n\tSelect: {\r\n\t\t...deepmerge(ChakraSelect, Select)\r\n\t},\r\n\tInput: {\r\n\t\t...deepmerge(ChakraInput, Input)\r\n\t}\r\n});\r\n\r\nconst defaultTheme = (rtl: boolean) => ({\r\n\tname: \"Default\",\r\n\t...foundations(rtl),\r\n\tcomponents: components(rtl),\r\n\tstyles: getGlobalStyling(),\r\n});\r\n\r\nexport type Theme = DeepPartial> & {\r\n\tname: string;\r\n};\r\n\r\nexport function getDefaultTheme(rtl = false) {\r\n\tconst theme = defaultTheme(rtl);\r\n\treturn extendBaseTheme(theme) as Theme;\r\n}\r\n\r\n// used to generate chakra-types\r\nexport default getDefaultTheme(false);\r\n","import { colors } from \"../variables/colors\";\r\nimport { type ColorTheme } from \"./color-theme\";\r\n\r\nexport const getDefaultColorTheme = (): ColorTheme => ({\r\n\tname: \"Default\",\r\n\tisDarkBg: true,\r\n\tcolors: {\r\n\t\tprimaryColor: colors.secondary.darkGreen,\r\n\t\tdark: \"#0C2340\",\r\n\t\tlight: \"#F5F5F5\",\r\n\t\tcardTextColor: colors.primary.white,\r\n\t\ttags: {\r\n\t\t\tbackgroundColor: colors.tags.artsBg,\r\n\t\t\tcolor: colors.tags.artsText,\r\n\t\t},\r\n\t\tquoteTextColor: colors.secondary.darkGreen,\r\n\t}\r\n});","import { colors } from \"../variables/colors\";\r\nimport { type ColorTheme } from \"./color-theme\";\r\n\r\nexport const getAmethystPurpleColorTheme = (): ColorTheme => ({\r\n\tname: \"Amethyst Purple\",\r\n\tisDarkBg: true,\r\n\tcolors: {\r\n\t\tprimaryColor: colors.topics.amethystPurple,\r\n\t\tdark: \"#0C2340\",\r\n\t\tlight: \"#F5F5F5\",\r\n\t\tcardTextColor: colors.primary.white,\r\n\t\ttags: {\r\n\t\t\tbackgroundColor: colors.tags.artsBg,\r\n\t\t\tcolor: colors.tags.artsText,\r\n\t\t},\r\n\t\tquoteTextColor: colors.topics.amethystPurple,\r\n\t}\r\n});","import { colors } from \"../variables/colors\";\r\nimport { type ColorTheme } from \"./color-theme\";\r\n\r\nexport const getBurgundyColorTheme = (): ColorTheme => ({\r\n\tname: \"Burgundy\",\r\n\tisDarkBg: true,\r\n\tcolors: {\r\n\t\tprimaryColor: colors.topics.burgundy,\r\n\t\tdark: \"#0C2340\",\r\n\t\tlight: \"#F5F5F5\",\r\n\t\tcardTextColor: colors.primary.white,\r\n\t\ttags: {\r\n\t\t\tbackgroundColor: colors.tags.sciencesBg,\r\n\t\t\tcolor: colors.tags.sciencesText,\r\n\t\t},\r\n\t\tquoteTextColor: colors.topics.burgundy,\r\n\t}\r\n});","import { colors } from \"../variables/colors\";\r\nimport { type ColorTheme } from \"./color-theme\";\r\n\r\nexport const getDarkTealColorTheme = (): ColorTheme => ({\r\n\tname: \"Dark Teal\",\r\n\tisDarkBg: true,\r\n\tcolors: {\r\n\t\tprimaryColor: colors.topics.darkTeal,\r\n\t\tdark: \"#0C2340\",\r\n\t\tlight: \"#F5F5F5\",\r\n\t\tcardTextColor: colors.primary.white,\r\n\t\ttags: {\r\n\t\t\tbackgroundColor: colors.tags.lifeBg,\r\n\t\t\tcolor: colors.tags.lifeText,\r\n\t\t},\r\n\t\tquoteTextColor: colors.topics.darkTeal,\r\n\t}\r\n});","import { colors } from \"../variables/colors\";\r\nimport { type ColorTheme } from \"./color-theme\";\r\n\r\nexport const getLightBlueColorTheme = (): ColorTheme => ({\r\n\tname: \"Light Blue\",\r\n\tisDarkBg: false,\r\n\tcolors: {\r\n\t\tprimaryColor: colors.topics.lightBlue,\r\n\t\tdark: \"#0C2340\",\r\n\t\tlight: \"#F5F5F5\",\r\n\t\tcardTextColor: colors.primary.dark,\r\n\t\ttags: {\r\n\t\t\tbackgroundColor: colors.tags.literatureBg,\r\n\t\t\tcolor: colors.tags.literatureText,\r\n\t\t},\r\n\t\tquoteTextColor: colors.tags.literatureText,\r\n\t}\r\n});","import { colors } from \"../variables/colors\";\r\nimport { type ColorTheme } from \"./color-theme\";\r\n\r\nexport const getOrangeColorTheme = (): ColorTheme => ({\r\n\tname: \"Orange\",\r\n\tisDarkBg: false,\r\n\tcolors: {\r\n\t\tprimaryColor: colors.topics.orange,\r\n\t\tdark: \"#0C2340\",\r\n\t\tlight: \"#F5F5F5\",\r\n\t\tcardTextColor: colors.primary.dark,\r\n\t\ttags: {\r\n\t\t\tbackgroundColor: colors.tags.thoughtsBg,\r\n\t\t\tcolor: colors.tags.thoughtsText,\r\n\t\t},\r\n\t\tquoteTextColor: colors.topics.orange,\r\n\t}\r\n});","import { colors } from \"../variables/colors\";\r\nimport { type ColorTheme } from \"./color-theme\";\r\n\r\nexport const getDarkGreenColorTheme = (): ColorTheme => ({\r\n\tname: \"Dark Green\",\r\n\tisDarkBg: true,\r\n\tcolors: {\r\n\t\tprimaryColor: colors.secondary.darkGreen,\r\n\t\tdark: \"#0C2340\",\r\n\t\tlight: \"#F5F5F5\",\r\n\t\tcardTextColor: colors.primary.white,\r\n\t\ttags: {\r\n\t\t\tbackgroundColor: colors.tags.artsBg,\r\n\t\t\tcolor: colors.tags.artsText,\r\n\t\t},\r\n\t\tquoteTextColor: colors.secondary.darkGreen,\r\n\t}\r\n});","import { colors } from \"../variables/colors\";\r\nimport { type ColorTheme } from \"./color-theme\";\r\n\r\nexport const getGoldenYellowColorTheme = (): ColorTheme => ({\r\n\tname: \"Golden Yellow\",\r\n\tisDarkBg: false,\r\n\tcolors: {\r\n\t\tprimaryColor: colors.secondary.goldenYellow,\r\n\t\tdark: \"#0C2340\",\r\n\t\tlight: \"#F5F5F5\",\r\n\t\tcardTextColor: colors.primary.dark,\r\n\t\ttags: {\r\n\t\t\tbackgroundColor: colors.tags.artsBg,\r\n\t\t\tcolor: colors.tags.artsText,\r\n\t\t},\r\n\t\tquoteTextColor: colors.secondary.goldenYellow,\r\n\t}\r\n});","import { getDefaultColorTheme } from \"./color-themes/default-color-theme\";\r\nimport { getAmethystPurpleColorTheme } from \"./color-themes/amethyst-purple-color-theme\";\r\nimport { getBurgundyColorTheme } from \"./color-themes/burgundy-color-theme\";\r\nimport { getDarkTealColorTheme } from \"./color-themes/dark-teal-color-theme\";\r\nimport { getLightBlueColorTheme } from \"./color-themes/light-blue-color-theme\";\r\nimport { getOrangeColorTheme } from \"./color-themes/orange-color-theme\";\r\nimport { getDarkGreenColorTheme } from \"./color-themes/dark-green-color-theme\";\r\nimport { getGoldenYellowColorTheme } from \"./color-themes/golden-yellow-color-theme\";\r\n\r\nexport const themes = {\r\n\t\"default\": getDefaultColorTheme,\r\n\t\"light_blue\": getLightBlueColorTheme,\r\n\t\"orange\": getOrangeColorTheme,\r\n\t\"amethyst_purple\": getAmethystPurpleColorTheme,\r\n\t\"burgundy\": getBurgundyColorTheme,\r\n\t\"dark_teal\": getDarkTealColorTheme,\r\n\t\"dark_green\": getDarkGreenColorTheme,\r\n\t\"golden_yellow\": getGoldenYellowColorTheme,\r\n};\r\n\r\nexport const defaultThemeName = Object.keys(themes)[0] as ColorThemeId;\r\n\r\nexport type ColorThemeId = keyof typeof themes;","/**\r\n * Used in backend to whitelist sizes\r\n * When sizes are changed or added, run `npm run build`\r\n */\r\n\r\n/**\r\n * Values can be:\r\n * w (width)\r\n * h (height)\r\n * mw (max width)\r\n * mh (max height)\r\n * cw (crop width)\r\n * ch (crop height)\r\n */\r\nexport const imageSizes = {\r\n\tnone: {\r\n\t\tmw: 10,\r\n\t},\r\n\tdefault: { //16:9\r\n\t\tsm: {\r\n\t\t\tcw: 384,\r\n\t\t\tch: 216,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tcw: 768,\r\n\t\t\tch: 432,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tcw: 1152,\r\n\t\t\tch: 648,\r\n\t\t},\r\n\t\txl: {\r\n\t\t\tcw: 1440,\r\n\t\t\tch: 810,\r\n\t\t}\r\n\t},\r\n};","import { type ColorThemeId, defaultThemeName, themes } from \"./themes\";\r\n\r\nexport const getColorTheme = (colorThemeId: ColorThemeId | undefined) => {\r\n\tconst theme = themes[colorThemeId ?? defaultThemeName];\r\n\tif (theme) {\r\n\t\treturn theme();\r\n\t}\r\n\r\n\treturn themes.dark_green();\r\n}\r\n","import React, { type FC, useContext, useState } from \"react\";\r\nimport { type ColorTheme } from \"./color-themes/color-theme\";\r\n\r\n// eslint-disable-next-line\r\nexport const ColorThemeContext = React.createContext<[ColorTheme, React.Dispatch>]>(null as any);\r\n\r\ntype ColorThemeProviderProps = {\r\n\tcolorTheme: ColorTheme;\r\n\tchildren: React.ReactNode;\r\n}\r\n\r\nexport const ColorThemeProvider: FC = ({ colorTheme, children }) => {\r\n\tconst colorThemeState = useState(colorTheme);\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{children}\r\n\t\t\r\n\t);\r\n};\r\n\r\nexport const useColorTheme = () => {\r\n\tconst [theme] = useContext(ColorThemeContext);\r\n\tif (!theme) {\r\n\t\tthrow new Error(\"useColorTheme must be used within a ColorThemeProvider\");\r\n\t}\r\n\treturn theme;\r\n};","import React, { type FC, useContext, useState, type ReactNode } from \"react\";\r\n\r\ntype NavigationContextType = {\r\n\tisSearchOpen: boolean;\r\n\tisMobileMenuOpen: boolean;\r\n\ttoggleMobileMenu: (force?: boolean) => void;\r\n\ttoggleSearch: (force?: boolean) => void;\r\n\tactiveSubmenus?: { [key: string]: boolean };\r\n\tsetActiveSubmenus?: (submenus: { [key: string]: boolean }) => void;\r\n\tsetIsMobileMenuOpen?: (isOpen: boolean) => void;\r\n};\r\n\r\ntype NavigationProviderProps = {\r\n\tchildren: ReactNode;\r\n};\r\n\r\nconst NavigationContext = React.createContext(undefined);\r\n\r\nexport const useNavigationContext = () => {\r\n\tconst context = useContext(NavigationContext);\r\n\tif (!context) {\r\n\t\tthrow new Error(\"useNavigationContext must be used within a NavigationProvider\");\r\n\t}\r\n\treturn context;\r\n};\r\n\r\nexport const NavigationProvider: FC = ({ children }) => {\r\n\tconst [isSearchOpen, setIsSearchOpen] = useState(false);\r\n\tconst [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\r\n\tconst [activeSubmenus, setActiveSubmenus] = useState<{ [key: string]: boolean }>({});\r\n\r\n\tconst toggleMobileMenu = (force = false) => {\r\n\t\tsetIsMobileMenuOpen((prev) => {\r\n\t\t\tif (force || (!prev && isSearchOpen)) {\r\n\t\t\t\tsetIsSearchOpen(false); // Close search if it's open\r\n\t\t\t}\r\n\t\t\treturn !prev;\r\n\t\t});\r\n\t};\r\n\r\n\tconst toggleSearch = (force = false) => {\r\n\t\tsetIsSearchOpen((prev) => {\r\n\t\t\tif (force || (!prev && isMobileMenuOpen)) {\r\n\t\t\t\tsetIsMobileMenuOpen(false); // Close mobile menu if it's open\r\n\t\t\t}\r\n\t\t\treturn !prev;\r\n\t\t});\r\n\t};\r\n\r\n\tconst value: NavigationContextType = {\r\n\t\tisMobileMenuOpen,\r\n\t\tisSearchOpen,\r\n\t\ttoggleMobileMenu,\r\n\t\ttoggleSearch,\r\n\t\tactiveSubmenus,\r\n\t\tsetActiveSubmenus,\r\n\t\tsetIsMobileMenuOpen,\r\n\t};\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{children}\r\n\t\t\r\n\t);\r\n};","import React, { type FC, createContext, useEffect, useState } from \"react\";\r\nimport { useSearchParams } from \"react-router-dom\";\r\nimport { type SearchFilterModel } from \"~/feature/Search/generated-types\";\r\n\r\ntype SearchContextData = {\r\n\tfacets: SearchFilterModel;\r\n\ttotalResultsCount: number;\r\n\tsetTotalResultsCount: React.Dispatch>;\r\n\tloadingResults: boolean;\r\n\tsetLoadingResults: React.Dispatch>;\r\n}\r\n\r\nexport const SearchContext = createContext({ facets: {} } as any); // eslint-disable-line @typescript-eslint/no-explicit-any\r\n\r\ntype SearchProviderProps = {\r\n\tchildren: React.ReactNode;\r\n}\r\n\r\nexport const SearchProvider: FC = ({ children }) => {\r\n\tconst [facets, setFacets] = useState({});\r\n\tconst [totalResultsCount, setTotalResultsCount] = useState(0);\r\n\tconst [loadingResults, setLoadingResults] = useState(false);\r\n\tconst [searchParams] = useSearchParams();\r\n\r\n\tuseEffect(() => {\r\n\t\tconst urlParams = new URLSearchParams(searchParams);\r\n\t\tconst params = Object.fromEntries(urlParams);\r\n\t\tsetFacets(params);\r\n\t}, [searchParams]);\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{children}\r\n\t\t\r\n\t);\r\n};","const TechBase = {\r\n\tlight: \"rgb(255, 255, 255)\", //#FFF,\r\n\tdark: \"rgb(34, 34, 34)\", //#222222,\r\n\tgrey: \"rgb(103, 106, 110)\", //#676A6E,\r\n\tblack: \"rgb(0, 0, 0)\", //#000\"\r\n\twhite: \"rgb(255, 255, 255)\", //#FFF\",\r\n\tgreyBorder: \"rgb(221, 221, 221)\", //#DDDDDD\r\n\tlightGrey: \"rgb(235, 235, 235)\", //#EBEBEB,\r\n\tdividerGrey: \"rgb(245, 245, 245)\" //#F5F5F5\",\r\n};\r\n\r\nconst TechPrimary = {\r\n\tdarkGreen: 'rgb(0, 132, 61)', // #00843D\r\n\tblue: 'rgb(0, 163, 224)', // #00A3E0\r\n\tdarkBlue: 'rgb(0, 51, 160)', // #0033A0\r\n\tgreen: 'rgb(132, 189, 0)', // #84BD00\r\n\tgreenExtra: 'rgb(110, 194, 97)', // #6EC261\r\n}\r\n\r\nconst TechSpecial = {\r\n\tdarkGreen: \"rgb(0, 119, 55)\", // #00773A\r\n\tblue: 'rgb(0, 149, 205)', // #0095CD\r\n\tdarkBlue: 'rgb(0, 46, 144)', // #002E90\r\n\tgreenExtra: 'rgb(88, 155, 78)' // #589B4E\r\n}\r\n\r\nexport const colors = {\r\n\tTechBase,\r\n\tTechPrimary,\r\n\tTechSpecial,\r\n}\r\n","import { colors } from \"../variables/colors\";\r\n\r\nexport enum ThemeVariant {\r\n\tgrey, white, themed\r\n}\r\n\r\nexport enum LogoVariant {\r\n\tlight = 0, dark = 1\r\n}\r\n\r\nexport type HighlightsColors = {\r\n\tprimaryFont: string;\r\n\tsecondaryFont: string;\r\n\tprimaryBG: string;\r\n\tsecondaryBG: string;\r\n\tprimarySubheaderFont: string;\r\n\tsecondarySubheaderFont: string;\r\n\tprimaryDescriptionFont: string;\r\n\tsecondaryDescriptionFont: string;\r\n\tcontactCardFontColor?: string;\r\n}\r\n\r\nexport type ThemeVariantColors = {\r\n\tprimaryColor: string;\r\n\tmoduleBackgroundColor: string;\r\n\tsecondaryBackgroundColor: string;\r\n\tspecialColor: string;\r\n\theadlineColor: string;\r\n\tbodyColor: string;\r\n\tfontColorPrimary?: string;\r\n\tcardBG?: string;\r\n\tcardFontColor?: string;\r\n\tcontactCardFontColor?: string;\r\n\tfooterCtaColor: string;\r\n\tlistCardBG: string;\r\n\tnavigationFontColorPrimary: string;\r\n\thighlightsColors: HighlightsColors;\r\n\theroTextColor?: string;\r\n\tbannerLinkColor?: string,\r\n}\r\n\r\nexport type ColorTheme = {\r\n\tname: string;\r\n\tvariants: Record;\r\n\tlogo: LogoVariant;\r\n}\r\n\r\nexport type VariantThemeId = keyof ColorTheme[\"variants\"];\r\n\r\nexport type GetColorTheme = () => ColorTheme;\r\n\r\nexport const getDarkBlueColorTheme: GetColorTheme = () => ({\r\n\tname: \"Dark Blue\",\r\n\tlogo: LogoVariant.light,\r\n\tvariants: {\r\n\t\tgrey: {\r\n\t\t\tnavigationFontColorPrimary: colors.TechBase.light,\r\n\t\t\tprimaryColor: colors.TechPrimary.darkBlue,\r\n\t\t\tmoduleBackgroundColor: colors.TechBase.dividerGrey,\r\n\t\t\tsecondaryBackgroundColor: colors.TechBase.light,\r\n\t\t\tspecialColor: colors.TechPrimary.darkBlue,\r\n\t\t\theadlineColor: colors.TechPrimary.darkBlue,\r\n\t\t\tbodyColor: colors.TechBase.dark,\r\n\t\t\tfontColorPrimary: colors.TechBase.dark,\r\n\t\t\tcardBG: colors.TechBase.white,\r\n\t\t\tcardFontColor: colors.TechBase.dark,\r\n\t\t\tlistCardBG: colors.TechBase.light,\r\n\t\t\tfooterCtaColor: colors.TechBase.light,\r\n\t\t\tbannerLinkColor: colors.TechPrimary.darkBlue,\r\n\t\t\tcontactCardFontColor: colors.TechBase.dark,\r\n\r\n\t\t\thighlightsColors: {\r\n\t\t\t\tprimaryFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryBG: colors.TechPrimary.darkBlue,\r\n\t\t\t\tsecondaryBG: colors.TechBase.light,\r\n\t\t\t\tprimarySubheaderFont: colors.TechBase.light,\r\n\t\t\t\tsecondarySubheaderFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryDescriptionFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryDescriptionFont: colors.TechBase.dark,\r\n\t\t\t\tcontactCardFontColor: colors.TechPrimary.darkBlue\r\n\t\t\t}\r\n\t\t},\r\n\t\twhite: {\r\n\t\t\tnavigationFontColorPrimary: colors.TechBase.light,\r\n\t\t\tprimaryColor: colors.TechPrimary.darkBlue,\r\n\t\t\tmoduleBackgroundColor: colors.TechBase.light,\r\n\t\t\tsecondaryBackgroundColor: colors.TechBase.grey,\r\n\t\t\tspecialColor: colors.TechPrimary.darkBlue,\r\n\t\t\theadlineColor: colors.TechPrimary.darkBlue,\r\n\t\t\tbodyColor: colors.TechBase.dark,\r\n\t\t\tfontColorPrimary: colors.TechBase.dark,\r\n\t\t\tcardBG: colors.TechBase.dividerGrey,\r\n\t\t\tcardFontColor: colors.TechBase.dark,\r\n\t\t\tlistCardBG: colors.TechBase.light,\r\n\t\t\tfooterCtaColor: colors.TechBase.light,\r\n\t\t\tbannerLinkColor: colors.TechPrimary.darkBlue,\r\n\t\t\tcontactCardFontColor: colors.TechBase.dark,\r\n\r\n\t\t\thighlightsColors: {\r\n\t\t\t\tprimaryFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryBG: colors.TechPrimary.darkBlue,\r\n\t\t\t\tsecondaryBG: colors.TechBase.dividerGrey,\r\n\t\t\t\tprimarySubheaderFont: colors.TechBase.light,\r\n\t\t\t\tsecondarySubheaderFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryDescriptionFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryDescriptionFont: colors.TechBase.dark,\r\n\t\t\t\tcontactCardFontColor: colors.TechPrimary.darkBlue\r\n\t\t\t}\r\n\t\t},\r\n\t\tthemed: {\r\n\t\t\tnavigationFontColorPrimary: colors.TechBase.light,\r\n\t\t\tprimaryColor: colors.TechPrimary.darkBlue,\r\n\t\t\tmoduleBackgroundColor: colors.TechPrimary.darkBlue,\r\n\t\t\tsecondaryBackgroundColor: colors.TechBase.light,\r\n\t\t\tspecialColor: colors.TechPrimary.green,\r\n\t\t\theadlineColor: colors.TechBase.light,\r\n\t\t\tbodyColor: colors.TechBase.light,\r\n\t\t\tfontColorPrimary: colors.TechBase.light,\r\n\t\t\tcardBG: colors.TechSpecial.darkBlue,\r\n\t\t\tcardFontColor: colors.TechBase.light,\r\n\t\t\tlistCardBG: colors.TechBase.light,\r\n\t\t\tfooterCtaColor: colors.TechBase.light,\r\n\t\t\tbannerLinkColor: colors.TechBase.light,\r\n\t\t\tcontactCardFontColor: colors.TechBase.light,\r\n\r\n\t\t\thighlightsColors: {\r\n\t\t\t\tprimaryFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryFont: colors.TechBase.light,\r\n\t\t\t\tprimaryBG: colors.TechSpecial.darkBlue,\r\n\t\t\t\tsecondaryBG: colors.TechSpecial.darkBlue,\r\n\t\t\t\tprimarySubheaderFont: colors.TechBase.light,\r\n\t\t\t\tsecondarySubheaderFont: colors.TechBase.light,\r\n\t\t\t\tprimaryDescriptionFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryDescriptionFont: colors.TechBase.light,\r\n\t\t\t\tcontactCardFontColor: colors.TechBase.light,\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n});\r\n","import { colors } from \"../variables/colors\";\r\nimport { type GetColorTheme, LogoVariant } from \"./dark-blue-color-theme\";\r\n\r\nexport const getBlueColorTheme: GetColorTheme = () => ({\r\n\tname: \"Blue\",\r\n\tlogo: LogoVariant.light,\r\n\tvariants: {\r\n\t\tgrey: {\r\n\t\t\tnavigationFontColorPrimary: colors.TechBase.light,\r\n\t\t\tmoduleBackgroundColor: colors.TechBase.dividerGrey,\r\n\t\t\tsecondaryBackgroundColor: colors.TechBase.light,\r\n\t\t\tspecialColor: colors.TechPrimary.darkBlue,\r\n\t\t\theadlineColor: colors.TechPrimary.darkBlue,\r\n\t\t\tbodyColor: colors.TechBase.dark,\r\n\t\t\tprimaryColor: colors.TechPrimary.blue,\r\n\t\t\tcardBG: colors.TechBase.white,\r\n\t\t\tcardFontColor: colors.TechBase.dark,\r\n\t\t\tfontColorPrimary: colors.TechBase.dark,\r\n\t\t\tlistCardBG: colors.TechBase.light,\r\n\t\t\tfooterCtaColor: colors.TechBase.light,\r\n\t\t\tbannerLinkColor: colors.TechPrimary.darkBlue,\r\n\t\t\tcontactCardFontColor: colors.TechBase.light,\r\n\r\n\t\t\thighlightsColors: {\r\n\t\t\t\tprimaryFont: colors.TechSpecial.darkBlue,\r\n\t\t\t\tsecondaryFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryBG: colors.TechPrimary.blue,\r\n\t\t\t\tsecondaryBG: colors.TechBase.light,\r\n\t\t\t\tprimarySubheaderFont: colors.TechSpecial.darkBlue,\r\n\t\t\t\tsecondarySubheaderFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryDescriptionFont: colors.TechBase.dark,\r\n\t\t\t\tsecondaryDescriptionFont: colors.TechBase.dark,\r\n\t\t\t\tcontactCardFontColor: colors.TechSpecial.darkBlue,\r\n\t\t\t}\r\n\t\t},\r\n\t\twhite: {\r\n\t\t\tnavigationFontColorPrimary: colors.TechBase.light,\r\n\t\t\tmoduleBackgroundColor: colors.TechBase.light,\r\n\t\t\tsecondaryBackgroundColor: colors.TechBase.grey,\r\n\t\t\tspecialColor: colors.TechPrimary.darkBlue,\r\n\t\t\theadlineColor: colors.TechPrimary.darkBlue,\r\n\t\t\tbodyColor: colors.TechBase.dark,\r\n\t\t\tprimaryColor: colors.TechPrimary.blue,\r\n\t\t\tcardBG: colors.TechBase.dividerGrey,\r\n\t\t\tcardFontColor: colors.TechBase.dark,\r\n\t\t\tfontColorPrimary: colors.TechBase.dark,\r\n\t\t\tlistCardBG: colors.TechBase.light,\r\n\t\t\tfooterCtaColor: colors.TechBase.light,\r\n\t\t\tbannerLinkColor: colors.TechPrimary.darkBlue,\r\n\t\t\tcontactCardFontColor: colors.TechBase.light,\r\n\r\n\t\t\thighlightsColors: {\r\n\t\t\t\tprimaryFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tsecondaryFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryBG: colors.TechPrimary.blue,\r\n\t\t\t\tsecondaryBG: colors.TechBase.dividerGrey,\r\n\t\t\t\tprimarySubheaderFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tsecondarySubheaderFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryDescriptionFont: colors.TechBase.dark,\r\n\t\t\t\tsecondaryDescriptionFont: colors.TechBase.dark,\r\n\t\t\t\tcontactCardFontColor: colors.TechSpecial.darkBlue,\r\n\t\t\t}\r\n\t\t},\r\n\t\tthemed: {\r\n\t\t\tnavigationFontColorPrimary: colors.TechBase.light,\r\n\t\t\tmoduleBackgroundColor: colors.TechPrimary.blue,\r\n\t\t\tsecondaryBackgroundColor: colors.TechBase.light,\r\n\t\t\tspecialColor: colors.TechSpecial.darkBlue,\r\n\t\t\theadlineColor: colors.TechSpecial.darkBlue,\r\n\t\t\tbodyColor: colors.TechBase.light,\r\n\t\t\tprimaryColor: colors.TechPrimary.blue,\r\n\t\t\tcardBG: colors.TechSpecial.blue,\r\n\t\t\tcardFontColor: colors.TechBase.light,\r\n\t\t\tfontColorPrimary: colors.TechBase.light,\r\n\t\t\tlistCardBG: colors.TechBase.light,\r\n\t\t\tfooterCtaColor: colors.TechBase.light,\r\n\t\t\theroTextColor: colors.TechBase.dark,\r\n\t\t\tbannerLinkColor: colors.TechBase.light,\r\n\t\t\tcontactCardFontColor: colors.TechBase.light,\r\n\r\n\t\t\thighlightsColors: {\r\n\t\t\t\tprimaryFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryFont: colors.TechBase.light,\r\n\t\t\t\tprimaryBG: colors.TechSpecial.blue,\r\n\t\t\t\tsecondaryBG: colors.TechSpecial.blue,\r\n\t\t\t\tprimarySubheaderFont: colors.TechBase.light,\r\n\t\t\t\tsecondarySubheaderFont: colors.TechBase.light,\r\n\t\t\t\tprimaryDescriptionFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryDescriptionFont: colors.TechBase.light,\r\n\t\t\t\tcontactCardFontColor: colors.TechBase.light,\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n});\r\n","import { colors } from \"../variables/colors\";\r\nimport { type GetColorTheme, LogoVariant } from \"./dark-blue-color-theme\";\r\n\r\nexport const getDarkGreenColorTheme: GetColorTheme = () => ({\r\n\tname: \"Dark Green\",\r\n\tlogo: LogoVariant.light,\r\n\tvariants: {\r\n\t\tgrey: {\r\n\t\t\tnavigationFontColorPrimary: colors.TechBase.light,\r\n\t\t\tmoduleBackgroundColor: colors.TechBase.dividerGrey,\r\n\t\t\tsecondaryBackgroundColor: colors.TechBase.light,\r\n\t\t\tspecialColor: colors.TechPrimary.green,\r\n\t\t\theadlineColor: colors.TechPrimary.darkGreen,\r\n\t\t\tbodyColor: colors.TechBase.dark,\r\n\t\t\tprimaryColor: colors.TechPrimary.darkGreen,\r\n\t\t\tcardBG: colors.TechBase.white,\r\n\t\t\tcardFontColor: colors.TechBase.dark,\r\n\t\t\tfontColorPrimary: colors.TechBase.light,\r\n\t\t\tlistCardBG: colors.TechBase.light,\r\n\t\t\tfooterCtaColor: colors.TechBase.light,\r\n\t\t\tbannerLinkColor: colors.TechPrimary.darkGreen,\r\n\t\t\tcontactCardFontColor: colors.TechBase.dark,\r\n\r\n\t\t\thighlightsColors: {\r\n\t\t\t\tprimaryFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryFont: colors.TechSpecial.darkGreen,\r\n\t\t\t\tprimaryBG: colors.TechSpecial.darkGreen,\r\n\t\t\t\tsecondaryBG: colors.TechBase.light,\r\n\t\t\t\tprimarySubheaderFont: colors.TechBase.light,\r\n\t\t\t\tsecondarySubheaderFont: colors.TechSpecial.darkGreen,\r\n\t\t\t\tprimaryDescriptionFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryDescriptionFont: colors.TechBase.dark,\r\n\t\t\t\tcontactCardFontColor: colors.TechSpecial.darkGreen,\r\n\t\t\t}\r\n\t\t},\r\n\t\twhite: {\r\n\t\t\tnavigationFontColorPrimary: colors.TechBase.light,\r\n\t\t\tmoduleBackgroundColor: colors.TechBase.light,\r\n\t\t\tsecondaryBackgroundColor: colors.TechBase.grey,\r\n\t\t\tspecialColor: colors.TechPrimary.green,\r\n\t\t\theadlineColor: colors.TechPrimary.darkGreen,\r\n\t\t\tbodyColor: colors.TechBase.dark,\r\n\t\t\tprimaryColor: colors.TechPrimary.darkGreen,\r\n\t\t\tcardBG: colors.TechBase.dividerGrey,\r\n\t\t\tcardFontColor: colors.TechBase.dark,\r\n\t\t\tfontColorPrimary: colors.TechBase.dark,\r\n\t\t\tlistCardBG: colors.TechBase.light,\r\n\t\t\tfooterCtaColor: colors.TechBase.light,\r\n\t\t\tbannerLinkColor: colors.TechPrimary.darkGreen,\r\n\t\t\tcontactCardFontColor: colors.TechBase.dark,\r\n\r\n\t\t\thighlightsColors: {\r\n\t\t\t\tprimaryFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryFont: colors.TechSpecial.darkGreen,\r\n\t\t\t\tprimaryBG: colors.TechSpecial.darkGreen,\r\n\t\t\t\tsecondaryBG: colors.TechBase.dividerGrey,\r\n\t\t\t\tprimarySubheaderFont: colors.TechBase.light,\r\n\t\t\t\tsecondarySubheaderFont: colors.TechSpecial.darkGreen,\r\n\t\t\t\tprimaryDescriptionFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryDescriptionFont: colors.TechBase.dark,\r\n\t\t\t\tcontactCardFontColor: colors.TechSpecial.darkGreen,\r\n\t\t\t}\r\n\t\t},\r\n\t\tthemed: {\r\n\t\t\tnavigationFontColorPrimary: colors.TechBase.light,\r\n\t\t\tmoduleBackgroundColor: colors.TechPrimary.darkGreen,\r\n\t\t\tsecondaryBackgroundColor: colors.TechBase.light,\r\n\t\t\tspecialColor: colors.TechPrimary.green,\r\n\t\t\theadlineColor: colors.TechBase.light,\r\n\t\t\tbodyColor: colors.TechBase.light,\r\n\t\t\tprimaryColor: colors.TechPrimary.darkGreen,\r\n\t\t\tcardBG: colors.TechSpecial.darkGreen,\r\n\t\t\tcardFontColor: colors.TechBase.light,\r\n\t\t\tfontColorPrimary: colors.TechBase.light,\r\n\t\t\tlistCardBG: colors.TechBase.light,\r\n\t\t\tfooterCtaColor: colors.TechBase.light,\r\n\t\t\tbannerLinkColor: colors.TechBase.light,\r\n\t\t\tcontactCardFontColor: colors.TechBase.light,\r\n\r\n\t\t\thighlightsColors: {\r\n\t\t\t\tprimaryFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryFont: colors.TechBase.light,\r\n\t\t\t\tprimaryBG: colors.TechSpecial.darkGreen,\r\n\t\t\t\tsecondaryBG: colors.TechSpecial.darkGreen,\r\n\t\t\t\tprimarySubheaderFont: colors.TechBase.light,\r\n\t\t\t\tsecondarySubheaderFont: colors.TechBase.light,\r\n\t\t\t\tprimaryDescriptionFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryDescriptionFont: colors.TechBase.light,\r\n\t\t\t\tcontactCardFontColor: colors.TechBase.light,\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n});\r\n","import { colors } from \"../variables/colors\";\r\nimport { type GetColorTheme, LogoVariant } from \"./dark-blue-color-theme\";\r\n\r\nexport const getGreyColorTheme: GetColorTheme = () => ({\r\n\tname: \"Grey\",\r\n\tlogo: LogoVariant.dark,\r\n\tvariants: {\r\n\t\tgrey: {\r\n\t\t\tnavigationFontColorPrimary: colors.TechBase.dark,\r\n\t\t\tprimaryColor: colors.TechBase.lightGrey,\r\n\t\t\tmoduleBackgroundColor: colors.TechBase.dividerGrey,\r\n\t\t\tsecondaryBackgroundColor: colors.TechBase.light,\r\n\t\t\tspecialColor: colors.TechSpecial.darkBlue,\r\n\t\t\theadlineColor: colors.TechSpecial.darkBlue,\r\n\t\t\tbodyColor: colors.TechBase.dark,\r\n\t\t\tfontColorPrimary: colors.TechBase.light,\r\n\t\t\tcardBG: colors.TechBase.white,\r\n\t\t\tcardFontColor: colors.TechBase.dark,\r\n\t\t\tlistCardBG: colors.TechBase.light,\r\n\t\t\tfooterCtaColor: colors.TechBase.light,\r\n\t\t\tbannerLinkColor: colors.TechPrimary.darkBlue,\r\n\t\t\tcontactCardFontColor: colors.TechBase.dark,\r\n\r\n\t\t\thighlightsColors: {\r\n\t\t\t\tprimaryFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryBG: colors.TechPrimary.darkBlue,\r\n\t\t\t\tsecondaryBG: colors.TechBase.light,\r\n\t\t\t\tprimarySubheaderFont: colors.TechBase.light,\r\n\t\t\t\tsecondarySubheaderFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryDescriptionFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryDescriptionFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tcontactCardFontColor: colors.TechPrimary.darkBlue,\r\n\t\t\t}\r\n\t\t},\r\n\t\twhite: {\r\n\t\t\tnavigationFontColorPrimary: colors.TechBase.dark,\r\n\t\t\tprimaryColor: colors.TechBase.lightGrey,\r\n\t\t\tmoduleBackgroundColor: colors.TechBase.light,\r\n\t\t\tsecondaryBackgroundColor: colors.TechBase.grey,\r\n\t\t\tspecialColor: colors.TechSpecial.darkBlue,\r\n\t\t\theadlineColor: colors.TechSpecial.darkBlue,\r\n\t\t\tbodyColor: colors.TechBase.dark,\r\n\t\t\tfontColorPrimary: colors.TechBase.dark,\r\n\t\t\tcardBG: colors.TechBase.dividerGrey,\r\n\t\t\tcardFontColor: colors.TechBase.dark,\r\n\t\t\tlistCardBG: colors.TechBase.light,\r\n\t\t\tfooterCtaColor: colors.TechBase.light,\r\n\t\t\tbannerLinkColor: colors.TechPrimary.darkBlue,\r\n\t\t\tcontactCardFontColor: colors.TechBase.dark,\r\n\r\n\t\t\thighlightsColors: {\r\n\t\t\t\tprimaryFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryBG: colors.TechPrimary.darkBlue,\r\n\t\t\t\tsecondaryBG: colors.TechBase.dividerGrey,\r\n\t\t\t\tprimarySubheaderFont: colors.TechBase.light,\r\n\t\t\t\tsecondarySubheaderFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryDescriptionFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryDescriptionFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tcontactCardFontColor: colors.TechPrimary.darkBlue,\r\n\t\t\t}\r\n\t\t},\r\n\t\tthemed: {\r\n\t\t\tnavigationFontColorPrimary: colors.TechBase.dark,\r\n\t\t\tprimaryColor: colors.TechBase.lightGrey,\r\n\t\t\tmoduleBackgroundColor: colors.TechBase.lightGrey,\r\n\t\t\tsecondaryBackgroundColor: colors.TechBase.light,\r\n\t\t\tspecialColor: colors.TechSpecial.darkBlue,\r\n\t\t\theadlineColor: colors.TechSpecial.darkBlue,\r\n\t\t\tbodyColor: colors.TechBase.light,\r\n\t\t\tfontColorPrimary: colors.TechBase.dark,\r\n\t\t\tcardBG: colors.TechSpecial.darkBlue,\r\n\t\t\tcardFontColor: colors.TechBase.light,\r\n\t\t\tlistCardBG: colors.TechBase.light,\r\n\t\t\tfooterCtaColor: colors.TechSpecial.darkBlue,\r\n\t\t\tbannerLinkColor: colors.TechBase.light,\r\n\t\t\tcontactCardFontColor: colors.TechBase.dark,\r\n\r\n\t\t\thighlightsColors: {\r\n\t\t\t\tprimaryFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryBG: colors.TechPrimary.darkBlue,\r\n\t\t\t\tsecondaryBG: colors.TechBase.light,\r\n\t\t\t\tprimarySubheaderFont: colors.TechBase.light,\r\n\t\t\t\tsecondarySubheaderFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryDescriptionFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryDescriptionFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tcontactCardFontColor: colors.TechPrimary.darkBlue,\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n});\r\n","import { colors } from \"../variables/colors\";\r\nimport { type GetColorTheme, LogoVariant } from \"./dark-blue-color-theme\";\r\n\r\nexport const getGreenExtraColorTheme: GetColorTheme = () => ({\r\n\tname: \"Green Extra\",\r\n\tlogo: LogoVariant.light,\r\n\tvariants: {\r\n\t\tgrey: {\r\n\t\t\tnavigationFontColorPrimary: colors.TechBase.light,\r\n\t\t\tmoduleBackgroundColor: colors.TechBase.dividerGrey,\r\n\t\t\tsecondaryBackgroundColor: colors.TechBase.light,\r\n\t\t\tspecialColor: colors.TechPrimary.green,\r\n\t\t\theadlineColor: colors.TechPrimary.greenExtra,\r\n\t\t\tbodyColor: colors.TechBase.dark,\r\n\t\t\tprimaryColor: colors.TechPrimary.greenExtra,\r\n\t\t\tcardBG: colors.TechBase.white,\r\n\t\t\tcardFontColor: colors.TechBase.dark,\r\n\t\t\tfontColorPrimary: colors.TechBase.light,\r\n\t\t\tlistCardBG: colors.TechBase.light,\r\n\t\t\tfooterCtaColor: colors.TechBase.light,\r\n\t\t\tbannerLinkColor: colors.TechPrimary.greenExtra,\r\n\t\t\tcontactCardFontColor: colors.TechBase.dark,\r\n\r\n\t\t\thighlightsColors: {\r\n\t\t\t\tprimaryFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryBG: colors.TechPrimary.darkBlue,\r\n\t\t\t\tsecondaryBG: colors.TechBase.light,\r\n\t\t\t\tprimarySubheaderFont: colors.TechBase.light,\r\n\t\t\t\tsecondarySubheaderFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryDescriptionFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryDescriptionFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tcontactCardFontColor: colors.TechPrimary.darkGreen,\r\n\t\t\t}\r\n\t\t},\r\n\t\twhite: {\r\n\t\t\tnavigationFontColorPrimary: colors.TechBase.light,\r\n\t\t\tmoduleBackgroundColor: colors.TechBase.light,\r\n\t\t\tsecondaryBackgroundColor: colors.TechBase.grey,\r\n\t\t\tspecialColor: colors.TechPrimary.green,\r\n\t\t\theadlineColor: colors.TechPrimary.greenExtra,\r\n\t\t\tbodyColor: colors.TechBase.dark,\r\n\t\t\tprimaryColor: colors.TechPrimary.greenExtra,\r\n\t\t\tcardBG: colors.TechBase.dividerGrey,\r\n\t\t\tcardFontColor: colors.TechBase.dark,\r\n\t\t\tfontColorPrimary: colors.TechBase.dark,\r\n\t\t\tlistCardBG: colors.TechBase.light,\r\n\t\t\tfooterCtaColor: colors.TechBase.light,\r\n\t\t\tbannerLinkColor: colors.TechPrimary.greenExtra,\r\n\t\t\tcontactCardFontColor: colors.TechBase.dark,\r\n\r\n\t\t\thighlightsColors: {\r\n\t\t\t\tprimaryFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryBG: colors.TechPrimary.darkBlue,\r\n\t\t\t\tsecondaryBG: colors.TechBase.light,\r\n\t\t\t\tprimarySubheaderFont: colors.TechBase.light,\r\n\t\t\t\tsecondarySubheaderFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryDescriptionFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryDescriptionFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tcontactCardFontColor: colors.TechPrimary.darkGreen,\r\n\t\t\t}\r\n\t\t},\r\n\t\tthemed: {\r\n\t\t\tnavigationFontColorPrimary: colors.TechBase.light,\r\n\t\t\tmoduleBackgroundColor: colors.TechPrimary.greenExtra,\r\n\t\t\tsecondaryBackgroundColor: colors.TechBase.light,\r\n\t\t\tspecialColor: colors.TechPrimary.green,\r\n\t\t\theadlineColor: colors.TechBase.light,\r\n\t\t\tbodyColor: colors.TechBase.light,\r\n\t\t\tprimaryColor: colors.TechPrimary.greenExtra,\r\n\t\t\tcardBG: colors.TechSpecial.greenExtra,\r\n\t\t\tcardFontColor: colors.TechBase.light,\r\n\t\t\tfontColorPrimary: colors.TechBase.light,\r\n\t\t\tlistCardBG: colors.TechBase.light,\r\n\t\t\tfooterCtaColor: colors.TechBase.light,\r\n\t\t\tbannerLinkColor: colors.TechBase.light,\r\n\t\t\tcontactCardFontColor: colors.TechBase.dark,\r\n\r\n\t\t\thighlightsColors: {\r\n\t\t\t\tprimaryFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryBG: colors.TechPrimary.darkBlue,\r\n\t\t\t\tsecondaryBG: colors.TechBase.light,\r\n\t\t\t\tprimarySubheaderFont: colors.TechBase.light,\r\n\t\t\t\tsecondarySubheaderFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tprimaryDescriptionFont: colors.TechBase.light,\r\n\t\t\t\tsecondaryDescriptionFont: colors.TechPrimary.darkBlue,\r\n\t\t\t\tcontactCardFontColor: colors.TechBase.dark,\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n});\r\n","\r\nimport { getDarkBlueColorTheme } from \"./color-themes/dark-blue-color-theme\";\r\nimport { getBlueColorTheme } from \"./color-themes/blue-color-theme\";\r\nimport { getDarkGreenColorTheme } from \"./color-themes/dark-green-color-theme\";\r\nimport { getGreyColorTheme } from \"./color-themes/grey-color-theme\";\r\nimport { getGreenExtraColorTheme } from \"./color-themes/green-extra-color-theme\";\r\n\r\nexport const themes = {\r\n\t\"dark_blue\": getDarkBlueColorTheme,\r\n\t\"blue\": getBlueColorTheme,\r\n\t\"dark_green\": getDarkGreenColorTheme,\r\n\t\"grey\": getGreyColorTheme,\r\n\t\"green_extra\": getGreenExtraColorTheme,\r\n};\r\n\r\nexport type ColorThemeId = keyof typeof themes;","import { type VariantThemeId, type ThemeVariantColors, type ColorTheme } from \"./color-themes/dark-blue-color-theme\";\r\nimport { type ColorThemeId, themes } from \"./themes\";\r\n\r\nexport const getColorTheme = (colorThemeId: ColorThemeId): ColorTheme => {\r\n\treturn themes[colorThemeId]?.() || themes.dark_blue();\r\n}\r\n\r\nexport const getColorThemeVariant = (colorThemeId: ColorThemeId, variant: VariantThemeId): ThemeVariantColors => {\r\n\tconst theme = getColorTheme(colorThemeId);\r\n\treturn theme.variants[variant] || theme.variants.white;\r\n}\r\n","/* eslint-disable @typescript-eslint/no-explicit-any, no-restricted-imports */\r\nimport {\r\n\ttype RouteData as DefaultRouteData,\r\n\tuseSitecoreContext as defaultUseSitecoreContext,\r\n\ttype LayoutServiceContext as DefaultLayoutServiceContext,\r\n\ttype LayoutServiceContextData as DefaultLayoutServiceContextData,\r\n\ttype WithSitecoreContextOptions\r\n} from \"@sitecore-jss/sitecore-jss-react\";\r\nimport { type CustomContext } from \"./generated-types\";\r\n\r\nexport type LayoutServiceContextData = Omit & {\r\n\tcontext: SitecoreContextValue;\r\n}\r\n\r\nexport type LayoutServiceData = {\r\n\tsitecore: LayoutServiceContextData & {\r\n\t\troute: RouteData | null;\r\n\t};\r\n}\r\n\r\nexport type RouteData = Omit & {\r\n\tfields?: TContextFields;\r\n}\r\n\r\nexport type SitecoreContextValue = DefaultLayoutServiceContext & {\r\n\troute?: RouteData;\r\n\titemId: string;\r\n\tcustom: Omit & { projectData: TProjectDataContext };\r\n}\r\n\r\nexport type UseSitecoreContext = Omit, \"sitecoreContext\"> & {\r\n\tsitecoreContext: SitecoreContextValue;\r\n};\r\n\r\nexport function useSitecoreContext(options?: WithSitecoreContextOptions) {\r\n\treturn defaultUseSitecoreContext(options) as UseSitecoreContext;\r\n}","import React from \"react\";\r\nconst isBrowser = typeof window !== \"undefined\";\r\n\r\nexport type LazyProps = {\r\n\tssrOnly?: boolean;\r\n\twhenIdle?: boolean;\r\n\twhenVisible?: boolean | IntersectionObserverInit;\r\n\tnoWrapper?: boolean | keyof JSX.IntrinsicElements;\r\n\tdidHydrate?: VoidFunction;\r\n\tpromise?: Promise;\r\n\ton?: (keyof HTMLElementEventMap)[] | keyof HTMLElementEventMap;\r\n\tchildren: React.ReactElement;\r\n};\r\n\r\ntype Props = Omit, \"dangerouslySetInnerHTML\"> &\r\nLazyProps;\r\n\r\ntype VoidFunction = () => void;\r\n\r\n// React currently throws a warning when using useLayoutEffect on the server.\r\nconst useIsomorphicLayoutEffect = isBrowser\r\n\t? React.useLayoutEffect\r\n\t: React.useEffect;\r\n\r\nfunction reducer() {\r\n\treturn true;\r\n}\r\n\r\nfunction LazyHydrate(props: Props) {\r\n\tconst childRef = React.useRef(null);\r\n\r\n\t// Always render on server\r\n\tconst [hydrated, hydrate] = React.useReducer(reducer, !isBrowser);\r\n\r\n\tconst {\r\n\t\tnoWrapper,\r\n\t\tssrOnly,\r\n\t\twhenIdle,\r\n\t\twhenVisible,\r\n\t\tpromise, // pass a promise which hydrates\r\n\t\ton = [],\r\n\t\tchildren,\r\n\t\tdidHydrate, // callback for hydration\r\n\t\t...rest\r\n\t} = props;\r\n\r\n\tuseIsomorphicLayoutEffect(() => {\r\n\t\t// No SSR Content\r\n\t\tif (!childRef.current?.hasChildNodes()) {\r\n\t\t\thydrate();\r\n\t\t}\r\n\t}, []);\r\n\r\n\tReact.useEffect(() => {\r\n\t\tif (hydrated && didHydrate) {\r\n\t\t\tdidHydrate();\r\n\t\t}\r\n\t}, [hydrated]);\r\n\r\n\tReact.useEffect(() => {\r\n\t\tif (ssrOnly || hydrated) return;\r\n\t\tconst rootElement = childRef.current;\r\n\r\n\t\tconst cleanupFns: VoidFunction[] = [];\r\n\t\tfunction cleanup() {\r\n\t\t\tcleanupFns.forEach(fn => {\r\n\t\t\t\tfn();\r\n\t\t\t});\r\n\t\t}\r\n\r\n\t\tif (promise) {\r\n\t\t\tpromise.then(hydrate, hydrate);\r\n\t\t}\r\n\r\n\t\tif (whenVisible) {\r\n\t\t\tconst element = noWrapper\r\n\t\t\t\t? rootElement\r\n\t\t\t\t: // As root node does not have any box model, it cannot intersect.\r\n\t\t\t\trootElement?.firstElementChild;\r\n\r\n\t\t\tif (element && typeof IntersectionObserver !== \"undefined\") {\r\n\t\t\t\tconst observerOptions =\r\n\t\t\t\t\ttypeof whenVisible === \"object\"\r\n\t\t\t\t\t\t? whenVisible\r\n\t\t\t\t\t\t: {\r\n\t\t\t\t\t\t\trootMargin: \"0px\"\r\n\t\t\t\t\t\t};\r\n\r\n\t\t\t\tconst io = new IntersectionObserver(entries => {\r\n\t\t\t\t\tentries.forEach(entry => {\r\n\t\t\t\t\t\tif (entry.isIntersecting || entry.intersectionRatio > 0) {\r\n\t\t\t\t\t\t\thydrate();\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t});\r\n\t\t\t\t}, observerOptions);\r\n\r\n\t\t\t\tio.observe(element);\r\n\r\n\t\t\t\tcleanupFns.push(() => {\r\n\t\t\t\t\tio.disconnect();\r\n\t\t\t\t});\r\n\t\t\t} else {\r\n\t\t\t\treturn hydrate();\r\n\t\t\t}\r\n\t\t}\r\n\t\tif (whenIdle) {\r\n\t\t\tif (typeof requestIdleCallback !== \"undefined\") {\r\n\t\t\t\tconst idleCallbackId = requestIdleCallback(hydrate, { timeout: 500 });\r\n\t\t\t\tcleanupFns.push(() => {\r\n\t\t\t\t\tcancelIdleCallback(idleCallbackId);\r\n\t\t\t\t});\r\n\t\t\t} else {\r\n\t\t\t\tconst id = setTimeout(hydrate, 2000);\r\n\t\t\t\tcleanupFns.push(() => {\r\n\t\t\t\t\tclearTimeout(id);\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tconst events = ([] as Array).concat(on);\r\n\r\n\t\tevents.forEach(event => {\r\n\t\t\trootElement?.addEventListener(event, hydrate, {\r\n\t\t\t\tonce: true,\r\n\t\t\t\tpassive: true\r\n\t\t\t});\r\n\t\t\tcleanupFns.push(() => {\r\n\t\t\t\trootElement?.removeEventListener(event, hydrate, {});\r\n\t\t\t});\r\n\t\t});\r\n\r\n\t\treturn cleanup;\r\n\t}, [\r\n\t\thydrated,\r\n\t\ton,\r\n\t\tssrOnly,\r\n\t\twhenIdle,\r\n\t\twhenVisible,\r\n\t\tdidHydrate,\r\n\t\tpromise,\r\n\t\tnoWrapper\r\n\t]);\r\n\r\n\tconst WrapperElement = ((typeof noWrapper === \"string\"\r\n\t\t? noWrapper\r\n\t\t: rest.as || \"div\") as unknown) as React.FC>;\r\n\r\n\tif (hydrated) {\r\n\t\tif (noWrapper) {\r\n\t\t\treturn children;\r\n\t\t}\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t{children}\r\n\t\t\t\r\n\t\t);\r\n\t} else {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t);\r\n\t}\r\n}\r\n\r\nexport default LazyHydrate;","/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport React from \"react\";\r\nimport { isEditorActive } from \"@sitecore-jss/sitecore-jss-react\"; // eslint-disable-line\r\nimport { type Rendering } from \"../Rendering\";\r\nimport LazyHydrate from \"~/foundation/LazyHydration\";\r\n\r\ntype RenderingProps = {\r\n\trendering: Rendering;\r\n\tas: string\r\n}\r\n\r\nexport const lazyHydrate =

(InputComponent: React.ComponentType

, as: string) => {\r\n\tconst hydrate = (props: P & RenderingProps) => {\r\n\t\tif (isEditorActive()) {\r\n\t\t\treturn ;\r\n\t\t}\r\n\r\n\t\treturn (\r\n\t\t\t// overriding style prop from LazyHydrate to avoid \"display: contents\"\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t);\r\n\t}\r\n\r\n\thydrate.displayName = \"hydrate\";\r\n\r\n\treturn hydrate;\r\n}","import { ImageSizeParameters, mediaApi } from \"@sitecore-jss/sitecore-jss-react\"; // eslint-disable-line\r\nimport URL from \"url-parse\";\r\n\r\n// finds the Sitecore media URL prefix\r\nconst mediaUrlPrefixRegex = /\\/([-~]{1})\\/media\\//i;\r\n\r\n/**\r\n * Makes a request to Sitecore Content Service for the specified item path.\r\n * @param {string} editorMarkup the markup to parse\r\n * @returns {Object | null} found image tag; null in case if not found\r\n */\r\nexport const findEditorImageTag = mediaApi.findEditorImageTag;\r\n\r\n/**\r\n * Get required query string params which should be merged with user params\r\n * @param {object} qs layout service parsed query string\r\n * @returns {object} requiredParams\r\n */\r\nexport const getRequiredParams = mediaApi.getRequiredParams;\r\n\r\n/**\r\n * Replace `/~/media` or `/-/media` with `/~/jssmedia` or `/-/jssmedia`, respectively.\r\n * Can use `mediaUrlPrefix` in order to use a custom prefix.\r\n * @param {string} url The URL to replace the media URL prefix in\r\n * @param {RegExp} [mediaUrlPrefix=mediaUrlPrefixRegex] The regex to match the media URL prefix\r\n * @returns {string} The URL with the media URL prefix replaced\r\n */\r\nexport const replaceMediaUrlPrefix = mediaApi.replaceMediaUrlPrefix;\r\n\r\n/**\r\n * Prepares a Sitecore media URL with `params` for use by the JSS media handler.\r\n * This is done by replacing `/~/media` or `/-/media` with `/~/jssmedia` or `/-/jssmedia`, respectively.\r\n * Provided `params` are used as the querystring parameters for the media URL.\r\n * Can use `mediaUrlPrefix` in order to use a custom prefix.\r\n * If no `params` are sent, the original media URL is returned.\r\n * @param {string} url The URL to prepare\r\n * @param {Object} [params] The querystring parameters to use\r\n * @param {RegExp} [mediaUrlPrefix=mediaUrlPrefixRegex] The regex to match the media URL prefix\r\n * @returns {string} The prepared URL\r\n */\r\nexport const updateImageUrl = (\r\n\turl: string,\r\n\tparams?: { [key: string]: string | number | undefined } | null,\r\n\tmediaUrlPrefix: RegExp = mediaUrlPrefixRegex\r\n) => {\r\n\tif (!params || Object.keys(params).length === 0) {\r\n\t\t// if params aren't supplied, no need to run it through JSS media handler\r\n\t\treturn url;\r\n\t}\r\n\r\n\tconst parsed = URL(replaceMediaUrlPrefix(url, mediaUrlPrefix), {}, true);\r\n\tconst query = { ...parsed.query, ...params };\r\n\tparsed.set(\"query\", query);\r\n\treturn parsed.toString();\r\n};\r\n\r\n/**\r\n * Receives an array of `srcSet` parameters that are iterated and used as parameters to generate\r\n * a corresponding set of updated Sitecore media URLs via @see updateImageUrl. The result is a comma-delimited\r\n * list of media URLs with respective dimension parameters.\r\n *\r\n * @example\r\n * // returns '/ipsum.jpg?h=1000&w=1000 1000w, /ipsum.jpg?mh=250&mw=250 250w'\r\n * getSrcSet('/ipsum.jpg', [{ h: 1000, w: 1000 }, { mh: 250, mw: 250 } ])\r\n *\r\n * More information about `srcSet`: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img}\r\n *\r\n * @param {string} url The URL to prepare\r\n * @param {Array} srcSet The array of parameters to use\r\n * @param {Object} [imageParams] The querystring parameters to use\r\n * @param {RegExp} [mediaUrlPrefix] The regex to match the media URL prefix\r\n * @returns {string} The prepared URL\r\n */\r\nexport const getSrcSet = (\r\n\turl: string,\r\n\tsrcSet: Array<{ [key: string]: string | number | undefined }>,\r\n\timageParams?: { [key: string]: string | number | undefined },\r\n\tmediaUrlPrefix?: RegExp\r\n) => {\r\n\treturn srcSet\r\n\t\t.map((params) => {\r\n\t\t\tconst newParams = { ...imageParams, ...params } as { [key: string]: string | undefined };\r\n\t\t\tconst imageWidth = newParams.w || newParams.mw || newParams.cw;\r\n\t\t\tconst imageHeight = newParams.h || newParams.mh || newParams.ch;\r\n\t\t\tif (!imageWidth && !imageHeight) {\r\n\t\t\t\treturn null;\r\n\t\t\t}\r\n\r\n\t\t\t// Prefer widths\r\n\t\t\tif (imageWidth || imageHeight) {\r\n\t\t\t\treturn `${updateImageUrl(url, newParams, mediaUrlPrefix)} ${imageWidth || imageHeight}w`;\r\n\t\t\t}\r\n\t\t})\r\n\t\t.filter(Boolean)\r\n\t\t.join(', ');\r\n};\r\n\r\n","import React, { type FC, useContext, useState } from \"react\";\r\nimport { type VariantThemeId, type ThemeVariantColors } from \"./color-themes/dark-blue-color-theme\";\r\nimport { getColorThemeVariant } from \"./getColorTheme\";\r\nimport { useSitecoreContext } from \"~/foundation/Jss\";\r\nimport { type AramcoTechProjectDataContext, type ThemePickerBase } from \"../../generated-types\";\r\nimport { type ColorThemeId } from \"./themes\";\r\n\r\n// eslint-disable-next-line\r\nexport const ColorThemeContext = React.createContext<[ThemeVariantColors, React.Dispatch>]>(null as any);\r\n\r\ntype ColorThemeProviderProps = {\r\n\tcolorTheme: ThemeVariantColors;\r\n\tchildren: React.ReactNode;\r\n}\r\n\r\nexport const ColorThemeProvider: FC = ({ colorTheme, children }) => {\r\n\tconst colorThemeState = useState(colorTheme);\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{children}\r\n\t\t\r\n\t);\r\n};\r\n\r\nexport const useColorTheme = () => {\r\n\tconst [theme] = useContext(ColorThemeContext);\r\n\tif (!theme) {\r\n\t\tthrow new Error(\"useColorTheme must be used within a ColorThemeProvider\");\r\n\t}\r\n\treturn theme;\r\n};\r\n\r\nexport const useSetColorTheme = () => {\r\n\tconst [, setColorTheme] = useContext(ColorThemeContext);\r\n\tif (!setColorTheme) {\r\n\t\tthrow new Error(\"useSetColorTheme must be used within a ColorThemeProvider\");\r\n\t}\r\n\treturn setColorTheme;\r\n};\r\n\r\nexport const useColorThemeVariant = (variant: VariantThemeId) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\tconst pageTheme = (sitecoreContext?.custom?.projectData.pageTheme || \"dark_blue\") as ColorThemeId;\r\n\tconst themeVariant = getColorThemeVariant(pageTheme, variant)\r\n\tif (!themeVariant) {\r\n\t\tthrow new Error(\"useColorTheme must be used within a ColorThemeProvider\");\r\n\t}\r\n\treturn themeVariant;\r\n};","import type { RecursiveObject } from \"@chakra-ui/react\";\r\nimport { rem } from \"polished\";\r\n\r\nexport const mapPxToRem = (\r\n\tvalues: object,\r\n\tbase: string | number = \"16px\"\r\n): RecursiveObject =>\r\n\tObject.assign(\r\n\t\t{},\r\n\t\t...Object.entries(values).map(([key, value]: [string, string]) => ({\r\n\t\t\t[key]: rem(value, base),\r\n\t\t}))\r\n\t);\r\nexport const pxToRem = (\r\n\tvalue: string,\r\n\tbase: string | number = \"16px\"\r\n): string => rem(value, base);\r\n","import { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\nimport { pxToRem } from \"../utils/mapPxToRem\";\r\nimport { colors } from \"../variables/colors\";\r\n\r\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\r\nexport const text = (rtl: boolean): ComponentStyleConfig => ({\r\n\tbaseStyle: {\r\n\t\tfontFamily: \"manifa\",\r\n\t\tfontWeight: \"600\",\r\n\t\tlineHeight: \"base\",\r\n\t},\r\n\tsizes: {\r\n\t\t// Headers\r\n\t\theadline1: {\r\n\t\t\tfontSize: [\"2.625rem\", null, null, \"3.75rem\"], // [42px, null, null, 60px]\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: [\"1\", null, null, \"1\"], // [42/42, null, null, 60/60]\r\n\t\t\tletterSpacing: \"0em\",\r\n\t\t},\r\n\t\theadline2: {\r\n\t\t\tfontSize: [\"2.25rem\", null, null, \"2.625rem\"], // [36px, null, null, 42px]\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: [\"1.028\", null, null, \"1\"], // [37/36, null, null, 42/42]\r\n\t\t\tletterSpacing: \"0em\",\r\n\t\t},\r\n\t\theadline3: {\r\n\t\t\tfontSize: [pxToRem(\"32px\"), null, null, pxToRem(\"36px\")], // [32px, null, null, 36px]\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: [pxToRem(\"34px\"), null, null, pxToRem(\"38px\")], // [34/32, null, null, 38/36]\r\n\t\t\tletterSpacing: [\"0.02em\", null, null, \"0.02em\"], // [0.64px, null, null, 0.72px]\r\n\t\t},\r\n\t\theadline4: {\r\n\t\t\tfontSize: [\"1.625rem\", null, null, \"1.875rem\"], // [26px, null, null, 30px]\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: [\"1.077\", null, null, \"1.067\"], // [28/26, null, null, 32/30]\r\n\t\t\tletterSpacing: \"0em\",\r\n\t\t},\r\n\t\theadline5: {\r\n\t\t\tfontSize: [pxToRem(\"22px\"), null, null, pxToRem(\"26px\")], // [22px, null, null, 26px]\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: [rtl ? pxToRem(\"34px\") : pxToRem(\"25px\"), null, null, rtl ? pxToRem(\"40px\") : pxToRem(\"28px\")], // [25/22, null, null, 28/26]\r\n\t\t\tletterSpacing: \"0em\",\r\n\t\t},\r\n\t\theadline6: {\r\n\t\t\tfontSize: [pxToRem(\"20px\"), null, null, pxToRem(\"22px\")], // [20px, null, null, 22px]\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: [rtl ? pxToRem(\"33px\") : pxToRem(\"24px\"), null, null, rtl ? pxToRem(\"36px\") : pxToRem(\"25px\")], // [24/20, null, null, 25/22]\r\n\t\t\tletterSpacing: \"0em\",\r\n\t\t},\r\n\t\tsubheader: {\r\n\t\t\tfontSize: [\"1.125rem\", null, null, \"1.375rem\"], // [18px, null, null, 22px]\r\n\t\t\tfontWeight: \"400\",\r\n\t\t\tlineHeight: [\"1.222\", null, null, \"1.136\"], // [22/18, null, null, 25/22]\r\n\t\t\tletterSpacing: \"0em\",\r\n\t\t},\r\n\t\tbodyBold: {\r\n\t\t\tfontSize: [pxToRem('16px'), null, null, pxToRem('17px')], // [16px, null, null, 17px]\r\n\t\t\tfontWeight: \"700\",\r\n\t\t\tlineHeight: [pxToRem('24px'), null, null, pxToRem('26px')], // [24/16, null, null, 26/17]\r\n\t\t\tletterSpacing: \"0em\",\r\n\t\t\tfontFamily: \"ghawar\",\r\n\t\t},\r\n\t\tbody: {\r\n\t\t\tfontSize: [pxToRem('16px'), null, null, pxToRem('17px')], // [16px, null, null, 17px]\r\n\t\t\tfontWeight: rtl ? \"400\" : \"300\",\r\n\t\t\tlineHeight: [pxToRem('24px'), null, null, pxToRem('26px')], // [24/16, null, null, 26/17]\r\n\t\t\tletterSpacing: \"0em\",\r\n\t\t\tfontFamily: \"ghawar\",\r\n\t\t},\r\n\t\tsmallBodyBold: {\r\n\t\t\tfontSize: [\"0.813rem\", null, null, \"0.875rem\"], // [13px, null, null, 14px]\r\n\t\t\tfontWeight: \"700\",\r\n\t\t\tlineHeight: [\"1.538\", null, null, \"1.571\"], // [20/13, null, null, 22/14]\r\n\t\t\tletterSpacing: \"0em\",\r\n\t\t\tfontFamily: \"ghawar\",\r\n\t\t},\r\n\t\tsmallBody: {\r\n\t\t\tfontSize: [\"0.813rem\", null, null, \"0.875rem\"], // [13px, null, null, 14px]\r\n\t\t\tfontWeight: \"300\",\r\n\t\t\tlineHeight: [\"1.538\", null, null, \"1.571\"], // [20/13, null, null, 22/14]\r\n\t\t\tletterSpacing: \"0em\",\r\n\t\t\tfontFamily: \"ghawar\",\r\n\t\t},\r\n\t\ttag: {\r\n\t\t\tfontSize: pxToRem(\"10px\"), // 10px\r\n\t\t\tfontWeight: \"300\",\r\n\t\t\tlineHeight: pxToRem(\"16px\"), // 16/10\r\n\t\t\tletterSpacing: \"0em\",\r\n\t\t\tfontFamily: \"ghawar\",\r\n\t\t},\r\n\t\tbread: {\r\n\t\t\tfontSize: \"0.875rem\", // 14px\r\n\t\t\tfontWeight: \"200\",\r\n\t\t\tlineHeight: \"1.429\", // 20/14\r\n\t\t\tletterSpacing: \"0.04em\", // 0.56px\r\n\t\t},\r\n\t\tlinkBtn: {\r\n\t\t\tfontSize: [\"1.25rem\", null, null, \"1.375rem\"], // [20px, null, null, 22px]\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: [\"1.2\", null, null, \"1.273\"], // [24/20, null, null, 28/22]\r\n\t\t\tletterSpacing: [\"0.01em\", null, null, \"0.01em\"], // [0.2px, null, null, 0.22px]\r\n\t\t},\r\n\t\tmoduleLinks: {\r\n\t\t\tfontSize: \"1.125rem\", // 18px\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: \"1.222\", // 22/18\r\n\t\t\tletterSpacing: \"0em\",\r\n\t\t},\r\n\t\timageCaption: {\r\n\t\t\tfontSize: pxToRem(\"14px\"),\r\n\t\t\tfontWeight: \"400\",\r\n\t\t\tlineHeight: pxToRem(\"20px\"), // [20/13, null, null, 22/14]\r\n\t\t\tletterSpacing: pxToRem(\"0.56px\"),\r\n\t\t\tfontFamily: \"ghawar\",\r\n\t\t},\r\n\t\tquoteIcon: {\r\n\t\t\tfontSize: pxToRem(\"65px\"),\r\n\t\t\tlineHeight: [pxToRem(\"30px\"), null, null, pxToRem(\"56px\")],\r\n\t\t\tfontWeight: 700,\r\n\t\t\tletterSpacing: pxToRem(\"-1px\"),\r\n\t\t},\r\n\t\tquoteText: {\r\n\t\t\tfontSize: pxToRem(\"30px\"),\r\n\t\t\tlineHeight: pxToRem(\"32px\"),\r\n\t\t\tfontWeight: 600,\r\n\t\t\tfontStyle: \"normal\",\r\n\t\t},\r\n\t\tquoteCite: {\r\n\t\t\tfontSize: pxToRem(\"22px\"),\r\n\t\t\tlineHeight: pxToRem(\"25px\"),\r\n\t\t\tfontWeight: 600,\r\n\t\t\tfontStyle: \"normal\",\r\n\t\t},\r\n\t\tquoteCiteTitle: {\r\n\t\t\tfontSize: pxToRem(\"14px\"),\r\n\t\t\tlineHeight: pxToRem(\"22px\"),\r\n\t\t\tfontWeight: 300,\r\n\t\t\tfontStyle: \"normal\",\r\n\t\t\tfontFamily: \"ghawar\",\r\n\t\t},\r\n\t\tModuleLinkText: {\r\n\t\t\tfontSize: [pxToRem(\"20px\"), null, null, pxToRem(\"22px\")], // [20px, null, null, 22px]\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: pxToRem(\"28px\"),\r\n\t\t\tletterSpacing: [pxToRem(\"0.2px\"), null, null, pxToRem(\"0.22px\")], // [0.2px, null, null, 0.22px]\r\n\t\t}\r\n\t},\r\n\tvariants: {\r\n\t\theadlineDescBtn: {\r\n\t\t\th: \"fit-content\",\r\n\t\t\tw: \"fit-content\",\r\n\t\t\tdisplay: \"inline-flex\",\r\n\t\t\talignItems: \"center\",\r\n\t\t\tgap: 5,\r\n\t\t},\r\n\t\ttag: {\r\n\t\t\tbackground: colors.TechBase.dividerGrey,\r\n\t\t\tpadding: `${pxToRem(\"4px\")} ${pxToRem(\"10px\")}`,\r\n\t\t},\r\n\t\tquoteIcon: {\r\n\t\t\tposition: [\"static\", null, null, \"absolute\"],\r\n\t\t\ttop: 0,\r\n\t\t\tleft: rtl ? \"auto\" : 0,\r\n\t\t\tright: rtl ? 0 : \"auto\",\r\n\t\t\ttransform: {\r\n\t\t\t\tlg: rtl ? \"translateX(35px) scaleX(-1)\" : \"translateX(-35px)\"\r\n\t\t\t},\r\n\t\t}\r\n\t},\r\n});\r\n","import { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\nimport { text as ThemeTextStyling } from \"./Text\";\r\nimport { pxToRem } from \"../utils/mapPxToRem\";\r\n\r\nexport const Heading = (rtl = false): ComponentStyleConfig => ({\r\n\t// The styles all Headings have in common\r\n\tbaseStyle: {\r\n\t\tfontFamily: \"manifa\",\r\n\t\tfontWeight: \"600\",\r\n\t\tlineHeight: \"base\",\r\n\t},\r\n\tsizes: {\r\n\t\t...ThemeTextStyling(rtl).sizes,\r\n\t\tarticleHeaderHeading: {\r\n\t\t\tfontSize: [pxToRem(\"42px\"), null, null, pxToRem(\"60px\")],\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: [pxToRem(\"42px\"), null, null, pxToRem(\"60px\")],\r\n\t\t\tletterSpacing: \"0em\",\r\n\t\t},\r\n\t\tarticleHeaderSubheading: {\r\n\t\t\tfontSize: [pxToRem(\"22px\"), null, null, pxToRem(\"26px\")],\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: [pxToRem(\"25px\"), null, null, pxToRem(\"28px\")],\r\n\t\t\tletterSpacing: \"0em\",\r\n\t\t},\r\n\t},\r\n\tvariants: {},\r\n});\r\n","import { text } from \"../components/Text\";\r\nimport { Heading } from \"../components/Heading\";\r\nimport { pxToRem } from \"../utils/mapPxToRem\";\r\n\r\nexport const getGlobalStyling = (isRtl: boolean) => {\r\n\treturn ({\r\n\t\tglobal: {\r\n\t\t\thtml: {\r\n\t\t\t\t//scrollBehavior: \"smooth\",\r\n\t\t\t},\r\n\t\t\tbody: {},\r\n\t\t\t\"not('.page-editing')\": {\r\n\t\t\t\t\"*:focus-visible\": {\r\n\t\t\t\t\toutline: \".375rem double black !important\",\r\n\t\t\t\t\tboxShadow: \"0 0 0 .25rem white\",\r\n\t\t\t\t\tborderRadius: \".125rem\",\r\n\t\t\t\t},\r\n\t\t\t},\r\n\t\t\t\".visually-hidden\": {\r\n\t\t\t\tclip: \"rect(0 0 0 0)\",\r\n\t\t\t\tclipPath: \"inset(50%)\",\r\n\t\t\t\theight: \"1px\",\r\n\t\t\t\toverflow: \"hidden\",\r\n\t\t\t\tposition: \"absolute\",\r\n\t\t\t\twhiteSpace: \"nowrap\",\r\n\t\t\t\twidth: \"1px\",\r\n\t\t\t},\r\n\t\t\t\".richText\": {\r\n\t\t\t\t\"> div *:last-child\": {\r\n\t\t\t\t\tmb: \"0\",\r\n\t\t\t\t},\r\n\t\t\t\t\"h1,h2,h3,h4,h5,h6,blockquote,p,ul,ol\": {\r\n\t\t\t\t\t\":first-of-type\": {\r\n\t\t\t\t\t\tmt: \"0\",\r\n\t\t\t\t\t},\r\n\t\t\t\t},\r\n\t\t\t\t\"h1,h2,h3\": {\r\n\t\t\t\t\t...Heading(isRtl).sizes?.headline5,\r\n\t\t\t\t},\r\n\t\t\t\t\"h4,h5,h6\": {\r\n\t\t\t\t\t...Heading(isRtl).sizes?.headline6,\r\n\t\t\t\t},\r\n\t\t\t\tp: {\r\n\t\t\t\t\t...text(isRtl).sizes?.body,\r\n\t\t\t\t\tmb: \"1.5rem\",\r\n\t\t\t\t\tstrong: {\r\n\t\t\t\t\t\tfontWeight: \"600\",\r\n\t\t\t\t\t},\r\n\t\t\t\t\tem: {\r\n\t\t\t\t\t\tfontStyle: \"italic\",\r\n\t\t\t\t\t},\r\n\t\t\t\t},\r\n\t\t\t\ta: {\r\n\t\t\t\t\ttextDecoration: \"underline\",\r\n\t\t\t\t\tcursor: \"pointer\",\r\n\t\t\t\t\toutline: \"none\",\r\n\t\t\t\t\twordBreak: \"break-word\",\r\n\t\t\t\t\t_focusVisible: {\r\n\t\t\t\t\t\toutline: \"1px dotted black\",\r\n\t\t\t\t\t\toutlineOffset: \"2px\",\r\n\t\t\t\t\t\toutlineColor: \"black\",\r\n\t\t\t\t\t\ttextDecoration: \"underline dotted\",\r\n\t\t\t\t\t},\r\n\t\t\t\t\t_hover: {\r\n\t\t\t\t\t\toutline: \"none\",\r\n\t\t\t\t\t\ttextDecoration: \"none\",\r\n\t\t\t\t\t},\r\n\t\t\t\t},\r\n\t\t\t\t\"ul, ol\": {\r\n\t\t\t\t\t...text(isRtl).sizes?.body,\r\n\t\t\t\t\tmb: \"1.5rem\",\r\n\t\t\t\t\tml: isRtl ? 0 : pxToRem(\"30px\"),\r\n\t\t\t\t\tmr: isRtl ? pxToRem(\"30px\") : 0,\r\n\t\t\t\t\t\"> li\": {\r\n\t\t\t\t\t\tmb: \"0.5em\",\r\n\t\t\t\t\t\tstrong: {\r\n\t\t\t\t\t\t\tfontWeight: \"600\",\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\tem: {\r\n\t\t\t\t\t\t\tfontStyle: \"italic\",\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t},\r\n\t\t\t\t},\r\n\t\t\t\tol: {\r\n\t\t\t\t\tlistStyle: isRtl ? \"arabic-indic\" : \"normal\",\r\n\t\t\t\t},\r\n\t\t\t\tstrong: {\r\n\t\t\t\t\tfontWeight: \"normal\",\r\n\t\t\t\t},\r\n\t\t\t\tem: {\r\n\t\t\t\t\tfontStyle: \"normal\",\r\n\t\t\t\t},\r\n\r\n\t\t\t}\r\n\t\t},\r\n\t})\r\n};\r\n","export const fonts = () => ({\r\n\tfonts: {\r\n\t\tmanifa: `'ManifaPro2', sans-serif`,\r\n\t\tghawar: `'Ghawar', sans-serif`,\r\n\t}\r\n})\r\n","const zIndices = {\r\n\thide: -1,\r\n\tauto: \"auto\",\r\n\tbase: 0,\r\n\toverHeader: 100,\r\n};\r\n\r\nexport default zIndices;\r\n","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\n\r\nexport const Container = (rtl = false): ComponentStyleConfig => ({\r\n\tbaseStyle: {\r\n\t\tmaxW: \"100%\",\r\n\t},\r\n\tvariants: {\r\n\t\tresponsive: {\r\n\t\t\t// Up to 479px\r\n\t\t\tsm: { maxW: \"80%\" },\r\n\t\t\t// 480px - 767px\r\n\t\t\tmd: { maxW: \"90%\" },\r\n\t\t\t// 768px - 991px\r\n\t\t\tlg: { maxW: \"960px\" },\r\n\t\t\t// 992px - 1279px\r\n\t\t\txl: { maxW: \"1152px\" },\r\n\t\t\t// 1280px - 1535px\r\n\t\t\t\"2xl\": { maxW: \"1184px\" },\r\n\t\t\t// 1536px - 1919px\r\n\t\t\t\"3xl\": { maxW: \"1350px\" },\r\n\t\t\t// 1920px and up\r\n\t\t\t\"4xl\": { maxW: \"1440px\" },\r\n\t\t},\r\n\t},\r\n});\r\n","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\n\r\nexport const getButtonVariants = (isRtl: boolean) => ({\r\n\tlg: {\r\n\t\tgap: 5,\r\n\t},\r\n\tsm: {\r\n\t\tgap: 3,\r\n\t},\r\n});\r\n\r\nexport type ButtonVariant = keyof (ReturnType);\r\n\r\nexport const Button = (isRtl: boolean): ComponentStyleConfig => ({\r\n\tbaseStyle: {\r\n\t\tfontFamily: 'manifa',\r\n\t\tfontWeight: '600',\r\n\t\th: \"fit-content\",\r\n\t\tw: \"fit-content\",\r\n\t\tdisplay: \"inline-flex\",\r\n\t\tgap: 5,\r\n\r\n\t\t_focusVisible: {\r\n\t\t\toutline: \".375rem double black\",\r\n\t\t\toutlineOffset: \"1px\",\r\n\t\t\tboxShadow: \"0 0 0 .25rem white\",\r\n\t\t\tborderRadius: \".125rem\",\r\n\r\n\t\t\t_before: {\r\n\t\t\t\toutline: \"none\",\r\n\t\t\t\tboxShadow: \"none\",\r\n\t\t\t},\r\n\t\t}\r\n\t},\r\n\tvariants: getButtonVariants(isRtl),\r\n});","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\nimport { colors } from \"../variables/colors\";\r\nimport { pxToRem } from \"../utils/mapPxToRem\";\r\n\r\nexport const Link = (isRtl: boolean): ComponentStyleConfig => ({\r\n\tbaseStyle: {\r\n\t\tfontFamily: \"manifa\",\r\n\t\tdisplay: \"inline-flex\",\r\n\r\n\t\t_focusVisible: {\r\n\t\t\toutline: \".375rem double black\",\r\n\t\t\toutlineOffset: \"1px\",\r\n\t\t\tboxShadow: \"0 0 0 .25rem white\",\r\n\t\t\tborderRadius: \".125rem\",\r\n\r\n\t\t\t_before: {\r\n\t\t\t\toutline: \"none\",\r\n\t\t\t\tboxShadow: \"none\",\r\n\t\t\t},\r\n\t\t},\r\n\t},\r\n\tsizes: {\r\n\t\tlg: {\r\n\t\t\tgap: 5,\r\n\t\t},\r\n\t\tsm: {\r\n\t\t\tgap: 3,\r\n\t\t},\r\n\t\tsmallBodyBold: {\r\n\t\t\tfontSize: [pxToRem(\"13px\"), null, null, pxToRem(\"14px\")], // [13px, null, null, 14px]\r\n\t\t\tfontWeight: \"700\",\r\n\t\t\tlineHeight: [pxToRem(\"20px\"), null, null, pxToRem(\"22px\")], // [20/13, null, null, 22/14]\r\n\t\t\tletterSpacing: \"0em\",\r\n\t\t\tfontFamily: \"ghawar\",\r\n\t\t},\r\n\t\tbannerLink: {\r\n\t\t\tfontSize: [pxToRem(\"20px\"), null, null, pxToRem(\"22px\")], // [13px, null, null, 14px]\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: [pxToRem(\"24px\"), null, null, pxToRem(\"28px\")], // [20/13, null, null, 22/14]\r\n\t\t\tletterSpacing: \"0em\",\r\n\t\t},\r\n\t\tmoduleLink: {\r\n\t\t\tfontSize: [pxToRem(\"20px\"), null, null, pxToRem(\"22px\")], // [20px, null, null, 22px]\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: pxToRem(\"28px\"),\r\n\t\t\tletterSpacing: [pxToRem(\"0.2px\"), null, null, pxToRem(\"0.22px\")], // [0.2px, null, null, 0.22px]\r\n\t\t\ttextTransform: \"capitalize\",\r\n\t\t}\r\n\t},\r\n\tvariants: {\r\n\t\tfullWidth: {\r\n\t\t\twidth: \"100%\",\r\n\t\t},\r\n\t\tfooterSocial: {\r\n\t\t\talignItems: \"center\",\r\n\t\t\tjustifyContent: \"center\",\r\n\t\t\twidth: 30,\r\n\t\t\theight: 30,\r\n\t\t\tborder: \"1px solid black\",\r\n\t\t\ttransition: \"all 0.2s\",\r\n\r\n\t\t\tsvg: {\r\n\t\t\t\ttransition: \"all 0.2s\",\r\n\t\t\t},\r\n\r\n\t\t\t_hover: {\r\n\t\t\t\tbackground: \"black\",\r\n\r\n\t\t\t\tsvg: {\r\n\t\t\t\t\tfill: \"white!important\",\r\n\t\t\t\t},\r\n\t\t\t},\r\n\t\t},\r\n\t\tfooterLink: {\r\n\t\t\tpy: pxToRem(\"6px\"),\r\n\t\t\tborderTop: `1px solid ${colors.TechBase.greyBorder}`,\r\n\t\t\tborderBottom: `1px solid ${colors.TechBase.greyBorder}`,\r\n\t\t\tfontSize: pxToRem(\"14px\"),\r\n\t\t\tfontWeight: 700,\r\n\t\t\tlineHeight: pxToRem(\"22px\"),\r\n\t\t\tminW: [null, null, null, \"100px\"],\r\n\t\t},\r\n\t\tmoduleLink: {\r\n\t\t\tfontFamily: \"manifa\",\r\n\t\t\tfontSize: [pxToRem(\"20px\"), null, null, pxToRem(\"22px\")], // [20px, null, null, 22px]\r\n\t\t\tfontWeight: \"600\",\r\n\t\t\tlineHeight: pxToRem(\"28px\"),\r\n\t\t\tletterSpacing: [pxToRem(\"0.2px\"), null, null, pxToRem(\"0.22px\")], // [0.2px, null, null, 0.22px]\r\n\t\t\th: \"fit-content\",\r\n\t\t\tw: \"fit-content\",\r\n\t\t\tdisplay: \"inline-flex\",\r\n\t\t\talignItems: \"center\",\r\n\t\t\tgap: 5,\r\n\t\t},\r\n\t},\r\n});\r\n","import { type ComponentStyleConfig } from \"@chakra-ui/react\";\r\nimport { pxToRem } from \"../utils/mapPxToRem\";\r\n\r\nexport const Icon = (): ComponentStyleConfig => ({\r\n\t// The styles all Headings have in common\r\n\tbaseStyle: {\r\n\t\tboxSize: pxToRem(\"16px\"),\r\n\t},\r\n\tsizes: {\r\n\t\tsm: {\r\n\t\t\tboxSize: pxToRem(\"16px\"),\r\n\t\t},\r\n\t\tsmmax: {\r\n\t\t\tboxSize: pxToRem(\"20px\"),\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tboxSize: pxToRem(\"25px\"),\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tboxSize: pxToRem(\"40px\"),\r\n\t\t},\r\n\t\txl: {\r\n\t\t\tboxSize: pxToRem(\"66px\"),\r\n\t\t},\r\n\t},\r\n});\r\n","export const breakpoints = {\r\n\t// 480px\r\n\tsm: '30rem',\r\n\t// 768px\r\n\tmd: '48rem',\r\n\t// 992px \r\n\tlg: '62rem',\r\n\t// 1280px\r\n\txl: '80rem',\r\n\t// 1348px\r\n\t\"2xl\": '84.25rem',\r\n\t// 1536px\r\n\t'3xl': '96rem',\r\n\t// 1920px and up\r\n\t'4xl': '120rem',\r\n\t// 2240 and up\r\n\t'5xl': '140rem',\r\n\t// 2560 and up\r\n\t'6xl': '160rem'\r\n};","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { extendBaseTheme } from \"@chakra-ui/react\";\r\nimport { type DeepPartial } from \"utility-types\";\r\nimport { getGlobalStyling } from \"./styles/global\";\r\n\r\nimport { colors } from \"./variables/colors\";\r\nimport { fonts } from \"./variables/fonts\";\r\nimport zIndex from \"./variables/z-index\";\r\nimport { theme as chakraTheme } from \"@chakra-ui/theme\";\r\n\r\nimport { Container } from \"./components/Container\";\r\nimport { Heading } from \"./components/Heading\";\r\nimport { Button } from \"./components/Button\";\r\nimport { text } from \"./components/Text\";\r\nimport { Link } from \"./components/Link\";\r\nimport { Icon } from \"./components/Icon\";\r\nimport { breakpoints } from \"./variables/breakpoints\";\r\n\r\nconst { Button: ChakraButton, Heading: ChakraHeading } = chakraTheme.components;\r\n\r\nconst foundations = (rtl: boolean) => ({\r\n\tgetGlobalStyling: getGlobalStyling(rtl),\r\n\tdirection: rtl ? \"rtl\" : \"ltr\",\r\n\t...fonts(),\r\n\tcolors,\r\n\tbreakpoints,\r\n\tzIndex,\r\n});\r\n\r\nconst components = (rtl: boolean) => ({\r\n\tContainer: {\r\n\t\t...Container(),\r\n\t},\r\n\tText: {\r\n\t\t...text(rtl),\r\n\t},\r\n\tHeading: {\r\n\t\t...ChakraHeading,\r\n\t\t...Heading(),\r\n\t},\r\n\tButton: {\r\n\t\t...ChakraButton,\r\n\t\t...text(rtl),\r\n\t\t...Button(rtl),\r\n\t},\r\n\tLink: {\r\n\t\t...Link(rtl),\r\n\t},\r\n\tIcon: {\r\n\t\t...Icon(),\r\n\t},\r\n});\r\n\r\nconst defaultTheme = (rtl: boolean) => ({\r\n\tname: \"Default\",\r\n\t...foundations(rtl),\r\n\tcomponents: components(rtl),\r\n\tstyles: getGlobalStyling(rtl),\r\n});\r\n\r\nexport type Theme = DeepPartial> & {\r\n\tname: string;\r\n};\r\n\r\nexport function getDefaultTheme(rtl = false) {\r\n\tconst theme = defaultTheme(rtl);\r\n\treturn extendBaseTheme(theme) as Theme;\r\n}\r\n\r\n// used to generate chakra-types\r\nexport default getDefaultTheme(false);\r\n","/**\r\n * Used in backend to whitelist sizes\r\n * When sizes are changed or added, run `npm run build`\r\n\r\n/**\r\n * Values can be:\r\n * w (width)\r\n * h (height)\r\n * mw (max width)\r\n * mh (max height)\r\n * cw (crop width)\r\n * ch (crop height)\r\n */\r\nexport const imageSizes = {\r\n\tnone: {\r\n\t\tmw: 10,\r\n\t},\r\n\tdefaultWide: { //16:9\r\n\t\tsm: {\r\n\t\t\tcw: 384,\r\n\t\t\tch: 216,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tcw: 768,\r\n\t\t\tch: 432,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tcw: 1152,\r\n\t\t\tch: 648,\r\n\t\t},\r\n\t\txl: {\r\n\t\t\tcw: 1440,\r\n\t\t\tch: 810,\r\n\t\t}\r\n\t},\r\n\tparallax: {\r\n\t\tsm: {\r\n\t\t\tmw: 600,\r\n\t\t\tch: 360,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tmw: 1200,\r\n\t\t\tch: 700,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tmw: 1440,\r\n\t\t\tch: 839,\r\n\t\t},\r\n\t\txl: {\r\n\t\t\tmw: 1900,\r\n\t\t\tch: 1110,\r\n\t\t}\r\n\t},\r\n\tfullImage: {\r\n\t\tsm: {\r\n\t\t\tmw: 384,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tmw: 768,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tmw: 1184,\r\n\t\t},\r\n\t\txl: {\r\n\t\t\tmw: 1440,\r\n\t\t}\r\n\t},\r\n\twide: { //215 : 100\r\n\t\tsm: {\r\n\t\t\tcw: 384,\r\n\t\t\tch: 179,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tcw: 768,\r\n\t\t\tch: 357,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tcw: 1152,\r\n\t\t\tch: 536,\r\n\t\t},\r\n\t\txl: {\r\n\t\t\tcw: 1440,\r\n\t\t\tch: 670,\r\n\t\t}\r\n\t},\r\n\timageCarousel: {\r\n\t\tsm: {\r\n\t\t\tcw: 687,\r\n\t\t\tch: 422,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tcw: 441,\r\n\t\t\tch: 259,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tcw: 867,\r\n\t\t\tch: 570,\r\n\t\t},\r\n\t},\r\n\tpeoplePageHeader: {\r\n\t\tsm: {\r\n\t\t\tcw: 384,\r\n\t\t\tch: 263,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tcw: 671,\r\n\t\t\tch: 460,\r\n\t\t},\r\n\t},\r\n\tarticleHeader: {\r\n\t\tsm: {\r\n\t\t\tcw: 384,\r\n\t\t\tch: 250,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tcw: 671,\r\n\t\t\tch: 460,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\thalfWidth: {\r\n\t\t\t\tcw: 1300,\r\n\t\t\t\tch: 757,\r\n\t\t\t},\r\n\t\t\tfullWidth: {\r\n\t\t\t\tcw: 1920,\r\n\t\t\t\tch: 370,\r\n\t\t\t},\r\n\t\t},\r\n\t\tfullImage: {\r\n\t\t\tsm: {\r\n\t\t\t\tmw: 600,\r\n\t\t\t},\r\n\t\t\tmd: {\r\n\t\t\t\tmw: 1184,\r\n\t\t\t},\r\n\t\t\tlg: {\r\n\t\t\t\tmw: 1440,\r\n\t\t\t},\r\n\t\t\txl: {\r\n\t\t\t\tmw: 1920,\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\tbanner: {\r\n\t\tsm: {\r\n\t\t\tcw: 1000,\r\n\t\t\tch: 1000,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tsmallImage: {\r\n\t\t\t\tcw: 900,\r\n\t\t\t\tch: 600,\r\n\t\t\t},\r\n\t\t\tbigImage: {\r\n\t\t\t\tcw: 900,\r\n\t\t\t\tch: 900,\r\n\t\t\t},\r\n\t\t},\r\n\t\tfullImage: {\r\n\t\t\tmw: 1184,\r\n\t\t}\r\n\t},\r\n\tcards: {\r\n\t\tpeople: {\r\n\t\t\tcw: 191,\r\n\t\t\tch: 191\r\n\t\t}\r\n\t},\r\n\timageCards: {\r\n\t\tmw: 592\r\n\t}\r\n};\r\n","import React, { type FC, useContext, useState, type ReactNode } from \"react\";\r\n\r\ntype NavigationContextType = {\r\n\tisSearchOpen: boolean;\r\n\tisMobileMenuOpen: boolean;\r\n\ttoggleMobileMenu: (force?: boolean) => void;\r\n\ttoggleSearch: (force?: boolean) => void;\r\n\tactiveSubmenus?: { [key: string]: boolean };\r\n\tsetActiveSubmenus?: (submenus: { [key: string]: boolean }) => void;\r\n\tsetIsMobileMenuOpen?: (isOpen: boolean) => void;\r\n};\r\n\r\ntype NavigationProviderProps = {\r\n\tchildren: ReactNode;\r\n};\r\n\r\nconst NavigationContext = React.createContext(undefined);\r\n\r\nexport const useNavigationContext = () => {\r\n\tconst context = useContext(NavigationContext);\r\n\tif (!context) {\r\n\t\tthrow new Error(\"useNavigationContext must be used within a NavigationProvider\");\r\n\t}\r\n\treturn context;\r\n};\r\n\r\nexport const NavigationProvider: FC = ({ children }) => {\r\n\tconst [isSearchOpen, setIsSearchOpen] = useState(false);\r\n\tconst [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\r\n\tconst [activeSubmenus, setActiveSubmenus] = useState<{ [key: string]: boolean }>({});\r\n\r\n\tconst toggleMobileMenu = (force = false) => {\r\n\t\tsetIsMobileMenuOpen((prev) => {\r\n\t\t\tif (force || (!prev && isSearchOpen)) {\r\n\t\t\t\tsetIsSearchOpen(false); // Close search if it's open\r\n\t\t\t}\r\n\t\t\treturn !prev;\r\n\t\t});\r\n\t};\r\n\r\n\tconst toggleSearch = (force = false) => {\r\n\t\tsetIsSearchOpen((prev) => {\r\n\t\t\tif (force || (!prev && isMobileMenuOpen)) {\r\n\t\t\t\tsetIsMobileMenuOpen(false); // Close mobile menu if it's open\r\n\t\t\t}\r\n\t\t\treturn !prev;\r\n\t\t});\r\n\t};\r\n\r\n\tconst value: NavigationContextType = {\r\n\t\tisMobileMenuOpen,\r\n\t\tisSearchOpen,\r\n\t\ttoggleMobileMenu,\r\n\t\ttoggleSearch,\r\n\t\tactiveSubmenus,\r\n\t\tsetActiveSubmenus,\r\n\t\tsetIsMobileMenuOpen,\r\n\t};\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{children}\r\n\t\t\r\n\t);\r\n};","import React from \"react\";\r\nimport { Icon } from \"@chakra-ui/icon\";\r\nimport { type IconProps } from \"@chakra-ui/react\";\r\n\r\nexport const IconArrowRight = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconTeq = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconApix = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconQuote = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconSearch = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconPlay = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconPlayOutline = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const LinkedIn = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const YouTube = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const Twitter = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const Instagram = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const Facebook = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const TikTok = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const PoweredByAramco = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\t\r\n\t\t\r\n\t\t\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconFlags = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconStar = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconStarOutline = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconCheck = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconCross = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconChevronDown = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconPlus = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconMail = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n","/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport React, { type FC } from \"react\";\r\nimport { Box, Flex, Link as ChakraLink, type LinkProps as ChakraLinkProps } from \"@chakra-ui/react\";\r\nimport { IconArrowRight } from \"../Icon\";\r\nimport {\r\n\tLink as RouterLink,\r\n\ttype LinkProps as RouterLinkProps,\r\n} from \"react-router-dom\";\r\nimport { type LinkVariant } from \"../../Theme/components/Link\";\r\nimport { pushDataLayer } from \"~/foundation/Tracking/GoogleTagManager\";\r\n\r\nexport type LinkProps = ChakraLinkProps & {\r\n\tto?: RouterLinkProps[\"to\"];\r\n\tvariant?: LinkVariant;\r\n\tariaLabel?: string;\r\n\tlinkLabel?: string;\r\n\ttarget?: string;\r\n\tclassName?: string;\r\n\trel?: string;\r\n\tchildren?: RouterLinkProps[\"children\"];\r\n\tdataLayer?: () => GTMDataLayer;\r\n};\r\n\r\n// eslint-disable-next-line\r\nexport const Link: FC = ({\r\n\tto,\r\n\tvariant,\r\n\tariaLabel,\r\n\ttarget,\r\n\tclassName,\r\n\trel,\r\n\tchildren,\r\n\tdataLayer,\r\n\t...rest\r\n}) => {\r\n\tconst ref = React.createRef();\r\n\r\n\treturn (\r\n\t\t {\r\n\t\t\t\t\tpushDataLayer(dataLayer);\r\n\t\t\t\t},\r\n\t\t\t})}\r\n\t\t\t{...rest}\r\n\t\t>\r\n\t\t\t{children &&\r\n\t\t\t\t{children}\r\n\t\t\t}\r\n\t\t\t{variant === \"primary\" &&\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t\t{variant === \"primaryCorner\" &&\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t\r\n\t);\r\n};\r\n","import React, { type FC } from 'react';\r\nimport { Link } from \"../Components/Link\";\r\nimport { type LinkVariant } from \"../Theme/components/Link\";\r\nimport { Link as SitecoreLink } from '@sitecore-jss/sitecore-jss-react'; // eslint-disable-line no-restricted-imports\r\nimport { useSitecoreContext, type LinkFieldValue } from \"~/foundation/Jss\";\r\nimport type { LinkProps as SitecoreLinkProps } from '@sitecore-jss/sitecore-jss-react/types/components/Link';\r\nimport type { Optional } from \"utility-types\";\r\nimport { IconArrowRight } from \"../Components/Icon\";\r\nimport { Flex, Link as ChakraLink } from \"@chakra-ui/react\";\r\n\r\nexport type LinkProps = Optional & {\r\n\tvariant?: LinkVariant;\r\n\tcolor?: string;\r\n\tariaLabel?: string;\r\n\tdataLayer?: () => GTMDataLayer;\r\n}\r\n\r\n/** React component that turns Sitecore link values that start with / into react-router route links */\r\nconst RoutableSitecoreLink: FC = (props) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\r\n\tconst editable = props.editable ?? true;\r\n\r\n\tif (!props?.field && !sitecoreContext.pageEditing) {\r\n\t\treturn <>;\r\n\t}\r\n\r\n\tconst value = props.field?.value as LinkFieldValue | undefined;\r\n\tconst href = value?.href;\r\n\tconst hasValidHref = props.field && props.field.value && href;\r\n\tconst isEditing = editable && (props.field?.editableFirstPart || props.field?.editableLastPart);\r\n\r\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n\tconst { variant, ariaLabel, color, ...sitecoreProps } = props;\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{hasValidHref && !isEditing\r\n\t\t\t\t? (\r\n\t\t\t\t\t<>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{props.children || value?.text || href || \"\"}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t)\r\n\t\t\t\t: (\r\n\t\t\t\t\t<>\r\n\t\t\t\t\t\t{/* eslint-disable-next-line */}\r\n\t\t\t\t\t\t{/* @ts-ignore */}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t{props.variant === \"primary\" &&\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t)\r\n\t\t\t}\r\n\t\t\r\n\t);\r\n};\r\n\r\n\r\n\r\nexport default RoutableSitecoreLink;","import React, { type FC } from \"react\";\r\nimport { useSitecoreContext } from \"@sitecore-jss/sitecore-jss-react\"; // eslint-disable-line no-restricted-imports\r\nimport RoutableSitecoreLink, { type LinkProps } from \"./RoutableSitecoreLink\";\r\n\r\nconst LinkWrapper: FC = (props) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\r\n\tif (!props?.field && !sitecoreContext.pageEditing) {\r\n\t\treturn <>;\r\n\t}\r\n\r\n\treturn ;\r\n};\r\n\r\nexport default LinkWrapper;","import React, { type FC } from \"react\";\r\nimport { Image, useSitecoreContext } from \"@sitecore-jss/sitecore-jss-react\"; // eslint-disable-line no-restricted-imports\r\nimport { type ImageProps, type ImageFieldValue } from \"../\";\r\nimport LazyLoad from 'react-lazy-load';\r\nimport parse from 'html-react-parser';\r\n\r\n// To avoid deprecation warning...\r\nImage.defaultProps = undefined;\r\n\r\nconst ImageWrapper: FC = (props) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\r\n\tconst newProps = { alt: \"\", ...props };\r\n\tdelete newProps.lazy;\r\n\r\n\tif (sitecoreContext.pageEditing) {\r\n\t\treturn ;\r\n\t}\r\n\r\n\tif (props.field?.value) {\r\n\t\tconst { height, width } = props.field.value as ImageFieldValue;\r\n\r\n\t\tif (props.field.value.svgContent) {\r\n\t\t\tif (!props.lazy) {\r\n\t\t\t\t//return \r\n\t\t\t\treturn <>{parse(props.field.value.svgContent)};\r\n\t\t\t}\r\n\r\n\t\t\tif (!props.field.value) {\r\n\t\t\t\treturn ;\r\n\t\t\t}\r\n\r\n\t\t\treturn (\r\n\t\t\t\t\r\n\t\t\t\t\t<>{parse(props.field.value.svgContent)}\r\n\t\t\t\t\r\n\t\t\t)\r\n\t\t}\r\n\r\n\t\tif (props.lazy) {\r\n\t\t\tconst { height, width } = props.field.value as ImageFieldValue;\r\n\r\n\t\t\treturn (\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t);\r\n\t\t}\r\n\t}\r\n\r\n\r\n\treturn ;\r\n};\r\n\r\nexport default ImageWrapper;","import React, { type FC } from \"react\";\r\nimport { File, useSitecoreContext } from \"@sitecore-jss/sitecore-jss-react\"; // eslint-disable-line no-restricted-imports\r\nimport { type FileProps as SitecoreFileProps } from '@sitecore-jss/sitecore-jss-react/types/components/File';\r\nimport type { Optional } from \"utility-types\";\r\n\r\ntype FileProps = Optional\r\n\r\nconst FileWrapper: FC = (props) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\r\n\tif (!props?.field && !sitecoreContext.pageEditing) {\r\n\t\treturn <>;\r\n\t}\r\n\r\n\treturn ;\r\n};\r\n\r\nexport default FileWrapper;","import { format as formatDate } from \"date-fns\";\r\nimport { toZonedTime } from \"date-fns-tz\";\r\nimport { arSA } from \"date-fns/locale\";\r\n\r\nconst localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;\r\n\r\nexport const dateFormatter = (date: Date, isRtl: boolean, format?: string) => {\r\n\treturn formatDate(\r\n\t\ttoZonedTime(date, localTimeZone),\r\n\t\tformat || \"MMMM dd, yyyy\",\r\n\t\t{ locale: isRtl ? arSA : undefined } // this is taken from AramcoLife. Bjørn made this.\r\n\t)\r\n}","import React, { type FC } from \"react\";\r\nimport { DateField } from \"@sitecore-jss/sitecore-jss-react\"; // eslint-disable-line no-restricted-imports\r\nimport { type DateFieldProps as SitecoreDateFieldProps } from \"@sitecore-jss/sitecore-jss-react/types/components/Date\";\r\nimport { useSitecoreContext } from \"../useSitecoreContext\";\r\nimport { dateFormatter } from \"~/foundation/Utils/dateFormatter\";\r\n\r\ntype DateFieldProps = Partial & {\r\n\tformat?: string;\r\n};\r\n\r\n// To avoid deprecation warning...\r\nDateField.defaultProps = undefined;\r\n\r\nconst DateWrapper: FC = ({\r\n\teditable = true,\r\n\t...props\r\n}) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\tconst newProps = { editable, ...props };\r\n\r\n\tif (!newProps?.field && !sitecoreContext.pageEditing) {\r\n\t\treturn <>;\r\n\t}\r\n\r\n\tif (!newProps?.render) {\r\n\t\tnewProps.render = date => {\r\n\t\t\tif (!date) {\r\n\t\t\t\treturn \"\";\r\n\t\t\t}\r\n\r\n\t\t\t// if date field in Sitecore is empty, date will be januar 1, 0001\r\n\t\t\treturn dateFormatter(\r\n\t\t\t\tdate,\r\n\t\t\t\tsitecoreContext.custom.settings.isRtl,\r\n\t\t\t\tprops.format || sitecoreContext.custom.settings.dateFormat\r\n\t\t\t)\r\n\t\t}\r\n\t}\r\n\r\n\treturn ;\r\n};\r\n\r\nexport default DateWrapper;","import React, { type FC } from \"react\";\r\nimport { Text, type TextField, useSitecoreContext } from \"@sitecore-jss/sitecore-jss-react\"; // eslint-disable-line no-restricted-imports\r\nimport { type TextProps as SitecoreTextProps } from '@sitecore-jss/sitecore-jss-react/types/components/Text';\r\n\r\nexport type TextProps = Omit & {\r\n\tfield?: TextField;\r\n\ttag?: React.ElementType\r\n}\r\n\r\n// To avoid deprecation warning...\r\nText.defaultProps = undefined;\r\n\r\nconst TextWrapper: FC = ({\r\n\teditable = true,\r\n\tencode = true,\r\n\t...props\r\n}) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\r\n\tif (!props?.field && !sitecoreContext.pageEditing) {\r\n\t\treturn <>;\r\n\t}\r\n\r\n\tconst newProps = { editable, encode, ...props };\r\n\r\n\treturn ;\r\n};\r\n\r\nexport default TextWrapper;","import React, { type FC } from \"react\";\r\nimport { useSitecoreContext, RichText } from \"@sitecore-jss/sitecore-jss-react\"; // eslint-disable-line no-restricted-imports\r\nimport { type RichTextProps as SitecoreRichTextProps } from \"@sitecore-jss/sitecore-jss-react/types/components/RichText\";\r\nimport type { Optional } from \"utility-types\";\r\n\r\ntype RichTextProps = Optional;\r\n\r\nconst RichTextWrapper: FC = (props) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\r\n\tif (!props?.field && !sitecoreContext.pageEditing) {\r\n\t\treturn <>;\r\n\t}\r\n\r\n\treturn ;\r\n};\r\n\r\nexport default RichTextWrapper;\r\n","/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport React, { type FC, useEffect, useState } from \"react\";\r\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { type RichTextProps as SitecoreRichTextProps } from '@sitecore-jss/sitecore-jss-react/types/components/RichText';\r\nimport { type RichTextField, useSitecoreContext } from \"..\";\r\nimport parse, { Element, type HTMLReactParserOptions, domToReact } from 'html-react-parser';\r\n\r\ntype RichTextTableWrapperProps = SitecoreRichTextProps & {\r\n\tfield?: RichTextField\r\n};\r\n\r\nconst RichTextTableWrapper: FC = (props) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\tconst [richTextComponent, setRichTextComponent] = useState()\r\n\r\n\tif (sitecoreContext.pageEditing) {\r\n\t\treturn ;\r\n\t}\r\n\r\n\tif (!props?.field?.value) {\r\n\t\treturn <>;\r\n\t}\r\n\r\n\tuseEffect(() => {\r\n\t\tconst thTexts: string[] = [];\r\n\r\n\t\tconst parseOptions: HTMLReactParserOptions = {\r\n\r\n\t\t\treplace: (domNode) => {\r\n\r\n\t\t\t\tif (domNode instanceof Element && domNode.attribs) {\r\n\r\n\t\t\t\t\tif (domNode.type === \"tag\" && domNode.name === \"table\") {\r\n\t\t\t\t\t\tconst tbody: any = domNode.children.filter((node: any) => node.type === \"tag\" && node.name === \"tbody\")?.[0];\r\n\r\n\t\t\t\t\t\tif (tbody) {\r\n\t\t\t\t\t\t\tconst tableRows = tbody.children.filter((node: any) => node.type === \"tag\" && node.name === \"tr\");\r\n\t\t\t\t\t\t\tconst firstTableRow = tableRows[0];\r\n\t\t\t\t\t\t\tconst restTableRows = tableRows.slice(1);\r\n\r\n\t\t\t\t\t\t\tif (firstTableRow) {\r\n\t\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t\t

\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{firstTableRow.children.map((node: any, index: number) => {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (node.type === \"tag\" && node.name === \"td\") {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst text = (node.children?.[0] as any)?.data;\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthTexts.push(text);\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t}).filter(Boolean)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t{restTableRows.map((node: any, index: number) => {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tlet tdIndex = 0;\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{node.children.map((childNode: any, childIndex: number) => {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (childNode.type === \"tag\" && childNode.name === \"td\") {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttdIndex++;\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}).filter(Boolean)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t\t\t})}\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
{text}
{domToReact(childNode.children)}
\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\tsetRichTextComponent(parse(props.field?.value || \"\", parseOptions) as React.JSX.Element);\r\n\t}, [])\r\n\r\n\treturn richTextComponent;\r\n};\r\n\r\nexport default RichTextTableWrapper;","import React, { type FC } from 'react';\r\nimport { useSitecoreContext } from '../useSitecoreContext';\r\n\r\n// taken from https://sitecore.stackexchange.com/questions/24307/edit-frame-with-sitecore-jss\r\n\r\nexport type FieldEditFrameProps = {\r\n\titemId?: string;\r\n\tfields?: string[];\r\n\theader?: string;\r\n\ticon?: string;\r\n\tdisabledIcon?: string;\r\n\ttooltip?: string;\r\n\tcommand?: string;\r\n\tcommandDisplayName?: string;\r\n\tdatabaseName?: string;\r\n\tlanguage?: string;\r\n\thideIfNotPageEditing?: boolean;\r\n\tchildren: any; // eslint-disable-line\r\n};\r\n\r\nconst FieldEditFrameWrapper: FC = ({\r\n\titemId,\r\n\tfields,\r\n\theader,\r\n\ticon,\r\n\tdisabledIcon,\r\n\ttooltip,\r\n\tcommand,\r\n\tcommandDisplayName,\r\n\tdatabaseName,\r\n\tlanguage,\r\n\tchildren\r\n}) => {\r\n\t// ensure fields and itemId are configured\r\n\tif (!itemId || !fields) {\r\n\t\treturn null;\r\n\t}\r\n\r\n\t// item uri for edit frame target\r\n\tconst contextItemUri = `sitecore://${databaseName}/${itemId}?lang=${language}`;\r\n\r\n\t// click action for edit frame command\r\n\tconst clickCommandAction = `webedit:fieldeditor(command=${command},fields=${fields.join(\r\n\t\t\"|\"\r\n\t)},id=${itemId})`;\r\n\r\n\t// click for command for the edit frame\r\n\tconst clickCommand = {\r\n\t\tclick: `javascript:Sitecore.PageModes.PageEditor.postRequest('${clickCommandAction}',null,false)`,\r\n\t\theader: header,\r\n\t\ticon: icon,\r\n\t\tdisabledIcon: disabledIcon,\r\n\t\tisDivider: false,\r\n\t\ttooltip: tooltip || `Edit the following fields: ${fields.join(\", \")}`,\r\n\t\ttype: null\r\n\t};\r\n\r\n\t// command data that is serialized for the edit frame\r\n\tconst commandData = {\r\n\t\tcommands: [clickCommand],\r\n\t\tcontextItemUri: contextItemUri,\r\n\t\tcustom: {},\r\n\t\tdisplayName: commandDisplayName || 'Edit Properties',\r\n\t\texpandedDisplayName: \"\"\r\n\t};\r\n\r\n\t// edit frame attributes\r\n\tconst divAttrs = {\r\n\t\t'sc_item': contextItemUri,\r\n\t\t'sc-part-of': 'editframe'\r\n\t}\r\n\r\n\tlet isEmpty = true;\r\n\tif (typeof children === \"object\" && !Array.isArray(children)) {\r\n\t\tif (children?.props?.field?.value?.src && children?.props?.pageEditing) {\r\n\t\t\tisEmpty = false;\r\n\t\t}\r\n\t}\r\n\r\n\treturn (\r\n\t\t
\r\n\t\t\t{JSON.stringify(commandData)}\r\n\t\t\t{children}\r\n\t\t
\r\n\t);\r\n};\r\n\r\nconst FieldEditFrame: React.FC = ({\r\n\tchildren,\r\n\titemId = \"\",\r\n\tfields = [],\r\n\thideIfNotPageEditing,\r\n\tdatabaseName,\r\n\tlanguage,\r\n\ticon = \"/temp/iconcache/people/16x16/cubes_blue.png\",\r\n\tdisabledIcon = \"/temp/cubes_blue_disabled16x16.png\",\r\n\tcommand = \"{70C4EED5-D4CD-4D7D-9763-80C42504F5E7}\",\r\n\t...otherProps\r\n}) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\r\n\t// check if we're in experience editor and configured properly\r\n\tconst shouldRender = sitecoreContext.pageEditing && itemId && fields && fields.length;\r\n\r\n\t// hide if not in page editing mode and prop is passed telling us to hide\r\n\tif (!shouldRender || hideIfNotPageEditing) {\r\n\t\treturn <>{children};\r\n\t}\r\n\r\n\t// build the props for our edit frame\r\n\tconst wrapperProps = {\r\n\t\titemId: itemId || sitecoreContext.itemId,\r\n\t\tfields,\r\n\t\tdatabaseName: databaseName || sitecoreContext.route?.databaseName || \"master\",\r\n\t\tlanguage: language || sitecoreContext.language,\r\n\t\tsitecoreContext,\r\n\t\ticon,\r\n\t\tdisabledIcon,\r\n\t\tcommand,\r\n\t\t...otherProps\r\n\t}\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{children}\r\n\t\t\r\n\t);\r\n}\r\n\r\nexport { FieldEditFrame };","import { type FC, useEffect, useRef, useState } from \"react\";\r\n// eslint-disable-next-line no-restricted-imports\r\nimport { Image as ChakraImage, type ImageProps as ChakraImageProps } from \"@chakra-ui/react\";\r\n\r\nexport type LazyImageProps = ChakraImageProps & {\r\n\tsetClassName?: boolean;\r\n};\r\n\r\nexport const LazyImage: FC = (props) => {\r\n\tconst imageRef = useRef(null);\r\n\tconst [loaded, setLoaded] = useState(false);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!loaded && imageRef.current?.complete) {\r\n\t\t\tsetLoaded(true);\r\n\t\t\timageRef.current.classList.add(\"image-loaded\");\r\n\t\t}\r\n\t}, []);\r\n\r\n\treturn (\r\n\t\t {\r\n\t\t\t(e.target as HTMLImageElement).classList.add(\"image-loaded\");\r\n\t\t\tsetLoaded(true);\r\n\t\t\tprops.onLoad && props.onLoad(e)\r\n\t\t}}/>\r\n\t)\r\n}","import React, { type FC, type PropsWithChildren } from \"react\";\r\nimport { type ImageField, type ImageSizeParameters } from \"@sitecore-jss/sitecore-jss-react\";\r\nimport { FieldEditFrame } from \"./FieldEditFrame\";\r\nimport { useSitecoreContext } from \"../useSitecoreContext\";\r\n// eslint-disable-next-line no-restricted-imports\r\nimport { Image as ChakraImage, type ImageProps as ChakraImageProps } from \"@chakra-ui/react\";\r\nimport { mediaApi } from \"..\";\r\nimport { LazyImage } from \"~/foundation/Components/Image/LazyImage\";\r\n\r\ntype ChakraImagePropsWithoutSrcSet = Omit;\r\n\r\ntype RenderImageProps = ChakraImagePropsWithoutSrcSet & SharedProps & {\r\n\tfield: ImageField;\r\n\tpageEditing: boolean;\r\n}\r\n\r\ntype SharedProps = {\r\n\tsrcSet?: ImageSizeParameters[];\r\n\timageParams?: { [paramName: string]: string | number };\r\n\tmediaUrlPrefix?: RegExp;\r\n\tlazy?: boolean;\r\n}\r\n\r\nconst RenderImage: FC = ({ field, srcSet, imageParams, mediaUrlPrefix, pageEditing, lazy = true, ...rest }) => {\r\n\tconst { src, alt } = field.value || {};\r\n\r\n\tif (!src && pageEditing) {\r\n\t\treturn <>;\r\n\t}\r\n\r\n\tif (!src) {\r\n\t\treturn <>;\r\n\t}\r\n\r\n\tconst newAttrs: { [attr: string]: unknown } = {\r\n\t\talt: alt ?? \"\",\r\n\t\t...rest\r\n\t};\r\n\r\n\t// update image URL for jss handler and image rendering params\r\n\tconst resolvedSrc = mediaApi.updateImageUrl(src, imageParams, mediaUrlPrefix);\r\n\tif (srcSet) {\r\n\t\t// replace with HTML-formatted srcset, including updated image URLs\r\n\t\tnewAttrs.srcSet = mediaApi.getSrcSet(resolvedSrc, srcSet, imageParams, mediaUrlPrefix);\r\n\t}\r\n\t// always output original src as fallback for older browsers\r\n\tnewAttrs.src = resolvedSrc;\r\n\r\n\tif (pageEditing || !lazy) {\r\n\t\treturn ;\r\n\t}\r\n\r\n\treturn (\r\n\t\t\r\n\t);\r\n}\r\n\r\ntype AdvanceImageProps = ChakraImagePropsWithoutSrcSet & SharedProps & {\r\n\t/**\r\n\t * itemId: Id of the item the advance image in on. Usually rendering.dataSource or sitecoreContext.itemId\r\n\t */\r\n\titemId?: string;\r\n\r\n\t/**\r\n\t * fields object. Usually props.fields or sitecoreContext.route.fields\r\n\t */\r\n\tfields?: T;\r\n\tfieldName?: keyof T;\r\n\teditable?: boolean;\r\n\tfieldNames?: keyof T[] | string[];\r\n\tfield?: ImageField;\r\n\tlazyHeight?: string | number;\r\n\tlazyWidth?: string | number;\r\n}\r\n\r\nexport function AdvanceImage({ itemId, fields, fieldName, field, fieldNames, editable = true, lazy = true, ...rest }: PropsWithChildren>) {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\r\n\tif (!itemId && editable) {\r\n\t\tconsole.warn(\"AdvanceImage - itemId is required\");\r\n\t\treturn <>;\r\n\t}\r\n\r\n\tif (field && fields) {\r\n\t\tconsole.warn(\"AdvanceImage: both fields and field cannot be set\")\r\n\t}\r\n\r\n\tlet fieldObj = field;\r\n\tif (!field && fields && fieldName) {\r\n\t\tfieldObj = fields[fieldName] as ImageField;\r\n\t}\r\n\r\n\tif (!fieldObj) {\r\n\t\tconsole.warn(`AdvanceImage: Field not found ${fieldName as string} on item ${itemId}`);\r\n\t\treturn <>;\r\n\t}\r\n\r\n\tif (!fieldObj.value?.src && !sitecoreContext.pageEditing) {\r\n\t\treturn <>;\r\n\t}\r\n\r\n\tif (!editable) {\r\n\t\treturn ;\r\n\t}\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\r\n\t)\r\n}","import { default as Link } from \"./LinkWrapper\";\r\nimport { default as Image } from \"~/foundation/Jss/components/ImageWrapper\";\r\nimport { default as File } from \"~/foundation/Jss/components/FileWrapper\";\r\nimport { default as Date } from \"~/foundation/Jss/components/DateWrapper\";\r\nimport { default as Text } from \"~/foundation/Jss/components/TextWrapper\";\r\nimport { default as Placeholder } from \"~/foundation/Jss/components/PlaceholderWrapper\";\r\nimport { default as RichText } from \"~/foundation/Jss/components/RichTextWrapper\";\r\nimport { default as RichTextTable } from \"~/foundation/Jss/components/RichTextTableWrapper\";\r\nimport { AdvanceImage } from \"~/foundation/Jss/components/AdvanceImage\";\r\nimport { FieldEditFrame } from \"~/foundation/Jss/components/FieldEditFrame\";\r\n\r\nexport const sc = {\r\n\tImage,\r\n\tFile,\r\n\tDate,\r\n\tText,\r\n\tPlaceholder,\r\n\tAdvanceImage,\r\n\tFieldEditFrame,\r\n\tLink,\r\n\tRichText,\r\n\tRichTextTable\r\n}","import React from \"react\";\r\nimport { Box, type BoxProps, forwardRef } from \"@chakra-ui/react\";\r\n\r\nexport const ContentWrapper = forwardRef((props, ref) => (\r\n\t\r\n));","import { type BoxProps, type ButtonProps, Box, Button } from \"@chakra-ui/react\";\r\nimport { motion } from \"framer-motion\";\r\n\r\ntype MotionBoxTypes = Omit;\r\ntype MotionButtonTypes = Omit;\r\n\r\nexport const MotionBox = motion(Box);\r\nexport const MotionButton = motion(Button);\r\n","import React from \"react\";\r\nimport { forwardRef, useStyleConfig, type BoxProps, type ThemingProps, Box } from \"@chakra-ui/react\";\r\n\r\nexport type RibbonProps = BoxProps & ThemingProps;\r\n\r\nexport const Ribbon = forwardRef((props, ref) => {\r\n\r\n\tconst { variant, ...rest } = props;\r\n\tconst styles = useStyleConfig(\"Ribbon\", { variant });\r\n\r\n\treturn ;\r\n});","import config from \"~/temp/config\";\r\n\r\nexport function getFileNameFromUrl(url: string, includeExtension = true) {\r\n\tlet fileName = url;\r\n\r\n\tif (fileName.indexOf(\"?\") > -1) {\r\n\t\tfileName = fileName.substring(0, fileName.indexOf(\"?\"));\r\n\t}\r\n\r\n\tif (fileName.lastIndexOf(\"/\") > -1) {\r\n\t\tfileName = fileName.substring(fileName.lastIndexOf(\"/\") + 1);\r\n\t}\r\n\r\n\tif (!includeExtension) {\r\n\t\tif (fileName.lastIndexOf(\".\") > -1) {\r\n\t\t\tfileName = fileName.substring(0, fileName.lastIndexOf(\".\"));\r\n\t\t}\r\n\t}\r\n\r\n\treturn fileName;\r\n}\r\n\r\nexport function getFileNameExtension(url: string) {\r\n\tconst fileName = getFileNameFromUrl(url);\r\n\r\n\tif (fileName.indexOf(\".\") > -1) {\r\n\t\treturn fileName.substring(fileName.indexOf(\".\") + 1);\r\n\t}\r\n\r\n\treturn fileName;\r\n}\r\n\r\nexport function getFullUrl(url: string): string {\r\n\tlet finalUrl = url;\r\n\tif (!finalUrl.startsWith(\"http\")) {\r\n\t\tif (url.startsWith(\"/\")) {\r\n\t\t\turl = url.substring(1);\r\n\t\t}\r\n\r\n\t\tfinalUrl = `${config.sitecoreApiHost}/${url}`;\r\n\t}\r\n\r\n\treturn finalUrl;\r\n}\r\n","import { getFullUrl } from \"~/foundation/Utils\";\r\nimport { type ApiError } from \"./types\";\r\nimport config from \"~/temp/config\";\r\n\r\nexport type Http = typeof http;\r\nexport type ApiRequestMethods = \"GET\" | \"PUT\" | \"POST\" | \"DELETE\";\r\nexport type ServiceEndpointMeta = [method: ApiRequestMethods, url: string];\r\nexport type Meta = Record;\r\n\r\n\r\ntype FetchData = {\r\n\tparams?: { [key: string]: any }, // eslint-disable-line\r\n\tbody?: T,\r\n\tqueryStrings?: { [key: string]: any }; // eslint-disable-line\r\n};\r\n\r\nexport type ApiResponse = {\r\n\tstatusCode: number;\r\n\tdata?: TSuccess,\r\n\terror?: ApiError | unknown\r\n}\r\n\r\nexport const http = {\r\n\tfetch: (meta: ServiceEndpointMeta, data?: FetchData): Promise> => {\r\n\r\n\t\tconst [method, endpoint] = meta;\r\n\t\tconst url = getFullUrl(endpoint);\r\n\r\n\t\tconst fetchObj: RequestInit = {\r\n\t\t\tmethod,\r\n\t\t\theaders: {\r\n\t\t\t\t'content-type': 'application/json;charset=UTF-8',\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\tif (data?.body) {\r\n\t\t\tfetchObj.body = JSON.stringify(data.body);\r\n\t\t}\r\n\r\n\t\tlet finalUrl = url;\r\n\r\n\t\tif (data?.params) {\r\n\t\t\tObject.keys(data.params).forEach(param => {\r\n\t\t\t\tfinalUrl = finalUrl.replace(`/:${param}`, `/${data.params?.[param]}`)\r\n\t\t\t});\r\n\t\t}\r\n\r\n\t\tfinalUrl = `${finalUrl}?sc_apikey=${config.sitecoreApiKey}`;\r\n\r\n\t\tif (config.devProject?.siteName) {\r\n\t\t\tfinalUrl += `&sc_site=${config.devProject.siteName}`\r\n\t\t}\r\n\r\n\t\tif (data?.queryStrings) {\r\n\t\t\tconst queryStrings: string[] = [];\r\n\t\t\tObject.keys(data.queryStrings).forEach(queryStringKey => {\r\n\t\t\t\tconst queryStringValue = data.queryStrings?.[queryStringKey];\r\n\t\t\t\tif (queryStringValue) {\r\n\t\t\t\t\tqueryStrings.push(`${queryStringKey}=${queryStringValue}`);\r\n\t\t\t\t}\r\n\t\t\t});\r\n\r\n\t\t\tfinalUrl = `${finalUrl}&${queryStrings.join(\"&\")}`;\r\n\t\t}\r\n\r\n\t\tconst promise = new Promise>((resolve, reject) => {\r\n\t\t\tfetch(finalUrl, fetchObj)\r\n\t\t\t\t.then(response => {\r\n\t\t\t\t\tconst { status, ok } = response;\r\n\r\n\t\t\t\t\tresponse.json()\r\n\t\t\t\t\t\t// eslint-disable-next-line\r\n\t\t\t\t\t\t.then((jsonResponse: any) => {\r\n\t\t\t\t\t\t\tif (!ok) {\r\n\t\t\t\t\t\t\t\tif (status === 500) { // InternalServerError\r\n\t\t\t\t\t\t\t\t\tconsole.error(jsonResponse);\r\n\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\treject({\r\n\t\t\t\t\t\t\t\t\tstatusCode: status,\r\n\t\t\t\t\t\t\t\t\terror: jsonResponse\r\n\t\t\t\t\t\t\t\t});\r\n\r\n\t\t\t\t\t\t\t\treturn;\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\tresolve({\r\n\t\t\t\t\t\t\t\tstatusCode: status,\r\n\t\t\t\t\t\t\t\tdata: jsonResponse\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t})\r\n\t\t\t\t\t\t.catch((error) => {\r\n\t\t\t\t\t\t\treject(error);\r\n\t\t\t\t\t\t})\r\n\t\t\t\t})\r\n\t\t\t\t.catch((error) => {\r\n\t\t\t\t\treject(error);\r\n\t\t\t\t})\r\n\t\t});\r\n\r\n\t\treturn promise;\r\n\t},\r\n\r\n\tget: async (url: string): Promise> => {\r\n\r\n\t\tconst fullUrl = getFullUrl(url);\r\n\t\tconst response = await fetch(fullUrl);\r\n\t\tconst jsonResponse = await response.json();\r\n\r\n\t\tif (!response.ok) {\r\n\t\t\treturn {\r\n\t\t\t\tstatusCode: response.status,\r\n\t\t\t\terror: jsonResponse\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn {\r\n\t\t\tstatusCode: response.status,\r\n\t\t\tdata: jsonResponse as TResponse\r\n\t\t}\r\n\t},\r\n\r\n\tpost: async (url: string, data: TRequest): Promise> => {\r\n\t\tconst fullUrl = getFullUrl(url);\r\n\t\tconst response = await fetch(fullUrl, {\r\n\t\t\tmethod: \"POST\",\r\n\t\t\theaders: {\r\n\t\t\t\t'content-type': 'application/json;charset=UTF-8',\r\n\t\t\t},\r\n\t\t\tbody: JSON.stringify(data)\r\n\t\t});\r\n\r\n\t\tconst jsonResponse = await response.json();\r\n\r\n\t\tif (!response.ok) {\r\n\t\t\treturn {\r\n\t\t\t\tstatusCode: response.status,\r\n\t\t\t\terror: jsonResponse\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn {\r\n\t\t\tstatusCode: response.status,\r\n\t\t\tdata: jsonResponse as TResponse\r\n\t\t}\r\n\t},\r\n\r\n\tput: async (url: string, data: TRequest): Promise> => {\r\n\t\tconst fullUrl = getFullUrl(url);\r\n\t\tconst response = await fetch(fullUrl, {\r\n\t\t\tmethod: \"PUT\",\r\n\t\t\theaders: {\r\n\t\t\t\t'content-type': 'application/json;charset=UTF-8',\r\n\t\t\t},\r\n\t\t\tbody: JSON.stringify(data)\r\n\t\t});\r\n\r\n\t\tconst jsonResponse = await response.json();\r\n\r\n\t\tif (!response.ok) {\r\n\t\t\treturn {\r\n\t\t\t\tstatusCode: response.status,\r\n\t\t\t\terror: jsonResponse\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn {\r\n\t\t\tstatusCode: response.status,\r\n\t\t\tdata: jsonResponse as TResponse\r\n\t\t}\r\n\t},\r\n\r\n\tdelete: async (url: string): Promise> => {\r\n\t\tconst fullUrl = getFullUrl(url);\r\n\t\tconst response = await fetch(fullUrl);\r\n\t\tconst jsonResponse = await response.json();\r\n\r\n\t\tif (!response.ok) {\r\n\t\t\treturn {\r\n\t\t\t\tstatusCode: response.status,\r\n\t\t\t\terror: jsonResponse\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn {\r\n\t\t\tstatusCode: response.status,\r\n\t\t\tdata: jsonResponse as TResponse\r\n\t\t}\r\n\t},\r\n};","/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport { useEffect, useState } from \"react\";\r\nimport { type ApiError } from \"./types\";\r\nimport { type ApiResponse } from \"./http\";\r\n\r\ntype UseServiceState = {\r\n\tresult: T | null;\r\n\terror: ApiError | null;\r\n\tloading: boolean;\r\n};\r\n\r\nexport function useService(getServiceRequest: () => Promise>, dependencies: any[] = []): [T | null, ApiError | null, boolean] {\r\n\tconst [state, setState] = useState>({\r\n\t\tresult: null,\r\n\t\terror: null,\r\n\t\tloading: true\r\n\t});\r\n\r\n\tuseEffect(() => {\r\n\t\tconst request$ = getServiceRequest();\r\n\t\tif (!request$) return;\r\n\r\n\t\tsetState({\r\n\t\t\tresult: state.result,\r\n\t\t\terror: state.error,\r\n\t\t\tloading: true\r\n\t\t})\r\n\r\n\t\trequest$\r\n\t\t\t.then(response => {\r\n\t\t\t\tsetState({\r\n\t\t\t\t\tresult: response.data ?? null,\r\n\t\t\t\t\terror: (response.error as ApiError) ?? null,\r\n\t\t\t\t\tloading: false\r\n\t\t\t\t})\r\n\t\t\t})\r\n\t\t\t.catch(error => {\r\n\t\t\t\tsetState({\r\n\t\t\t\t\tresult: null,\r\n\t\t\t\t\terror: { message: \"Fetch error\", data: error },\r\n\t\t\t\t\tloading: false\r\n\t\t\t\t});\r\n\t\t\t});\r\n\r\n\t\t// return () => {\r\n\t\t// we are not able to cancel fetches\r\n\t\t// };\r\n\r\n\t}, dependencies);\r\n\r\n\treturn [state.result, state.error, state.loading];\r\n}","/* eslint-disable */\r\n//------------------------------------------------------------------------------\r\n// \r\n// This code was generated by a tool.\r\n//\r\n//\r\n// Changes to this file may cause incorrect behavior and will be lost if\r\n// the code is regenerated.\r\n// \r\n//------------------------------------------------------------------------------\r\n\r\nimport { http, type Meta } from \"~/foundation/Api\";\r\nimport { SearchResponseModel } from \"~/feature/Search/generated-types\";\r\nimport { SearchFilterModel } from \"~/feature/Search/generated-types\";\r\nimport { EventSearchFilterModel } from \"~/feature/Search/generated-types\";\r\nimport { LessonSearchFilterModel } from \"~/feature/Search/generated-types\";\r\n\r\nexport const searchContentServiceMeta: Meta = {\r\n\tallSearch: [\"GET\", \"/api/v1/search/content/all/:context\"],\r\n\teventSearch: [\"GET\", \"/api/v1/search/content/event/:context\"],\r\n\tlessonSearch: [\"GET\", \"/api/v1/search/content/lesson/:context\"],\r\n};\r\n\r\n// Feature.Search.WebApi.SearchContentApiController\r\nexport const searchContentService = {\r\n\tasync allSearch(context: /* Guid */ string, queryStrings: SearchFilterModel) {\r\n\t\treturn await http.fetch(searchContentServiceMeta.allSearch, { params: { context }, queryStrings });\r\n\t},\r\n\tasync eventSearch(context: /* Guid */ string, queryStrings: EventSearchFilterModel) {\r\n\t\treturn await http.fetch(searchContentServiceMeta.eventSearch, { params: { context }, queryStrings });\r\n\t},\r\n\tasync lessonSearch(context: /* Guid */ string, queryStrings: LessonSearchFilterModel) {\r\n\t\treturn await http.fetch(searchContentServiceMeta.lessonSearch, { params: { context }, queryStrings });\r\n\t},\r\n};\r\n","import { text as ThemeTextStyling } from \"../../Theme/components/Text\";\r\nimport { getButtonVariants as ButtonStyling } from \"../../Theme/components/Button\";\r\n\r\nexport const RichTextStyling = (rtl: boolean) => ({\r\n\tsx: {\r\n\t\t...ThemeTextStyling(rtl).sizes?.body,\r\n\r\n\t\t'p, li, td': {\r\n\t\t\t...ThemeTextStyling(rtl).sizes?.body,\r\n\t\t\tmb: '1.775rem',\r\n\t\t\t'&:last-child': {\r\n\t\t\t\tmb: '0'\r\n\t\t\t},\r\n\t\t\t\"+ h1, + h2\": {\r\n\t\t\t\tmt: [\"8\", null, null, \"12\"],\r\n\t\t\t}\r\n\t\t},\r\n\t\t'ul, ol': {\r\n\t\t\tps: ['1.65rem', null, null, '1.75rem'],\r\n\t\t\tmy: '1.75rem',\r\n\t\t\t'&:last-child': {\r\n\t\t\t\tmb: '0'\r\n\t\t\t},\r\n\r\n\t\t\t\"li\": {\r\n\t\t\t\tps: \".625rem\",\r\n\t\t\t\tmb: \"2\"\r\n\t\t\t},\r\n\t\t\t\"+ h1, + h2\": {\r\n\t\t\t\tmt: [\"8\", null, null, \"12\"],\r\n\t\t\t}\r\n\t\t},\r\n\t\t'a': {\r\n\t\t\tposition: \"relative\",\r\n\t\t\tdisplay: \"inline\",\r\n\t\t\ttextDecoration: \"underline\",\r\n\t\t\tcursor: \"pointer\",\r\n\t\t\t\"+ h1, + h2\": {\r\n\t\t\t\tmt: [\"8\", null, null, \"12\"],\r\n\t\t\t},\r\n\t\t},\r\n\t\t'.tag': {\r\n\t\t\t...ThemeTextStyling(rtl).variants?.tag,\r\n\t\t},\r\n\t\t'& a.dark': {\r\n\t\t\t...ButtonStyling(rtl).primaryCorner,\r\n\t\t\ttextDecoration: \"none\",\r\n\t\t},\r\n\t\t'& a.white': {\r\n\t\t\t...ButtonStyling(rtl).primaryCornerLight,\r\n\t\t\ttextDecoration: \"none\",\r\n\t\t},\r\n\t\t\"h1, h2\": {\r\n\t\t\t...ThemeTextStyling(rtl).sizes?.headline2,\r\n\t\t\tmb: [\"6\", null, null, \"9\"],\r\n\t\t},\r\n\t\t\"h3\": {\r\n\t\t\t...ThemeTextStyling(rtl).sizes?.headline3,\r\n\t\t},\r\n\t\t\"h4\": {\r\n\t\t\t...ThemeTextStyling(rtl).sizes?.headline4,\r\n\t\t},\r\n\t\t\"h5\": {\r\n\t\t\t...ThemeTextStyling(rtl).sizes?.headline5,\r\n\t\t},\r\n\t\t\"h6\": {\r\n\t\t\t...ThemeTextStyling(rtl).sizes?.headline6,\r\n\t\t}\r\n\t}\r\n});","import React, { type FC } from \"react\";\r\nimport { Link as ChakraLink, type LinkProps as ChakraLinkProps } from \"@chakra-ui/react\";\r\nimport { Link as RouterLink, type LinkProps as RouterLinkProps } from \"react-router-dom\";\r\nimport { type Optional } from \"utility-types\";\r\n\r\ntype ChakraRouterLinkProps = Omit & Optional & {\r\n\tref?: ((string | ((instance: HTMLAnchorElement | null) => void) | React.RefObject) & (((instance: HTMLAnchorElement | null) => void) | React.RefObject)) | null | undefined\r\n};\r\n\r\nexport const ChakraRouterLink: FC = ({ to, as, ...rest }) => {\r\n\r\n\tif (!to) {\r\n\t\treturn \r\n\t}\r\n\r\n\treturn (\r\n\t\t\r\n\t)\r\n}","export const articleListImageMotion = {\r\n\tblur: {\r\n\t\tscale: 1,\r\n\t\ttransition: {\r\n\t\t\tduration: .5,\r\n\t\t\tease: \"easeOut\"\r\n\t\t}\r\n\t},\r\n\thover: {\r\n\t\tscale: 1.015,\r\n\t\ttransition: {\r\n\t\t\tduration: .5,\r\n\t\t\tease: \"easeOut\"\r\n\t\t}\r\n\t}\r\n};\r\n\r\nexport const videoThumbnailMotion = {\r\n\tblur: {\r\n\t\tscale: 1,\r\n\t\ttransition: {\r\n\t\t\tduration: .5,\r\n\t\t\tease: \"easeOut\"\r\n\t\t}\r\n\t},\r\n\thover: {\r\n\t\tscale: 1.015,\r\n\t\ttransition: {\r\n\t\t\tduration: .5,\r\n\t\t\tease: \"easeOut\"\r\n\t\t}\r\n\t}\r\n};\r\n\r\nexport const articleListArrowMotion = {\r\n\tblur: {\r\n\t\topacity: 0,\r\n\t\tx: -16,\r\n\t\ttransition: {\r\n\t\t\tease: \"easeOut\",\r\n\t\t\topacity: {\r\n\t\t\t\tduration: .2,\r\n\t\t\t},\r\n\t\t}\r\n\t},\r\n\thover: {\r\n\t\topacity: 1,\r\n\t\tx: 0,\r\n\t\ttransition: {\r\n\t\t\tduration: .5,\r\n\t\t\tease: \"easeOut\"\r\n\t\t}\r\n\t}\r\n};\r\n\r\nexport const quizCardContainerMotion = {\r\n\tblur: {\r\n\t\topacity: 0,\r\n\t\ttransition: {\r\n\t\t\tease: \"easeOut\",\r\n\t\t\topacity: {\r\n\t\t\t\tduration: .5,\r\n\t\t\t},\r\n\t\t}\r\n\t},\r\n\tdefault: {\r\n\t\topacity: 1,\r\n\t\ttransition: {\r\n\t\t\tduration: .5,\r\n\t\t\tease: \"easeOut\",\r\n\t\t\tstaggerChildren: 0.1,\r\n\t\t\tdelayChildren: .3,\r\n\t\t}\r\n\t}\r\n}\r\n\r\nexport const quizImageContainerMotion = {\r\n\tblur: {\r\n\t\topacity: 0,\r\n\t\ty: 30,\r\n\t\ttransition: {\r\n\t\t\tease: \"easeOut\",\r\n\t\t\topacity: {\r\n\t\t\t\tduration: .7,\r\n\t\t\t},\r\n\t\t}\r\n\t},\r\n\tdefault: {\r\n\t\topacity: 1,\r\n\t\ty: 0,\r\n\t\ttransition: {\r\n\t\t\tduration: .7,\r\n\t\t\tease: \"easeOut\",\r\n\t\t}\r\n\t},\r\n}\r\n\r\nexport const quizCardItemMotion = {\r\n\tblur: {\r\n\t\topacity: 0,\r\n\t\ty: 30,\r\n\t\ttransition: {\r\n\t\t\tease: \"easeOut\",\r\n\t\t\topacity: {\r\n\t\t\t\tduration: .6,\r\n\t\t\t},\r\n\t\t}\r\n\t},\r\n\tdefault: {\r\n\t\topacity: 1,\r\n\t\ty: 0,\r\n\t\ttransition: {\r\n\t\t\tduration: .6,\r\n\t\t\tease: \"easeOut\",\r\n\t\t}\r\n\t},\r\n}\r\n\r\nexport const newsletterContainerMotion = {\r\n\tblur: {\r\n\t\topacity: 0,\r\n\t\ttransition: {\r\n\t\t\tease: \"easeOut\",\r\n\t\t\topacity: {\r\n\t\t\t\tduration: .5,\r\n\t\t\t},\r\n\t\t}\r\n\t},\r\n\tdefault: {\r\n\t\topacity: 1,\r\n\t\ttransition: {\r\n\t\t\tduration: .5,\r\n\t\t\tease: \"easeOut\",\r\n\t\t\tstaggerChildren: 0.1,\r\n\t\t\tdelayChildren: .3,\r\n\t\t}\r\n\t}\r\n}\r\n\r\nexport const newsletterItemMotion = {\r\n\tblur: {\r\n\t\topacity: 0,\r\n\t\ty: 30,\r\n\t\ttransition: {\r\n\t\t\tease: \"easeOut\",\r\n\t\t\topacity: {\r\n\t\t\t\tduration: .6,\r\n\t\t\t},\r\n\t\t}\r\n\t},\r\n\tdefault: {\r\n\t\topacity: 1,\r\n\t\ty: 0,\r\n\t\ttransition: {\r\n\t\t\tduration: .6,\r\n\t\t\tease: \"easeOut\",\r\n\t\t}\r\n\t},\r\n}\r\n\r\nexport const newsletterCTA = {\r\n\thidden: {\r\n\t\topacity: 0,\r\n\t\ty: 50,\r\n\t},\r\n\tshow: {\r\n\t\topacity: 1,\r\n\t\ty: 0,\r\n\t},\r\n}\r\n\r\ninterface PlayButtonMotionOptions {\r\n\toffset: number; // The responsive offset for the play button animation in px\r\n}\r\n\r\nexport const playButtonOutlineMotion = ({ offset }: PlayButtonMotionOptions) => ({\r\n\tblur: {\r\n\t\topacity: 0,\r\n\t\ttransform: `translate(calc(-50% - ${offset}px), -50%)`\r\n\t},\r\n\thover: {\r\n\t\topacity: [0, 1, 0, 0, 1],\r\n\t\ttransform: [\r\n\t\t\t`translate(calc(-50% - ${offset}px), -50%)`,\r\n\t\t\t\"translate(-50%, -50%)\",\r\n\t\t\t`translate(calc(-50% + ${offset}px), -50%)`,\r\n\t\t\t`translate(calc(-50% - ${offset}px), -50%)`,\r\n\t\t\t\"translate(-50%, -50%)\"\r\n\t\t],\r\n\t\ttransition: {\r\n\t\t\tduration: 0.7,\r\n\t\t\tease: \"easeOut\",\r\n\t\t},\r\n\t},\r\n\tafter: {\r\n\t\topacity: 1,\r\n\t\tx: 0\r\n\t}\r\n});\r\n\r\nexport const playButtonMotion = ({ offset }: PlayButtonMotionOptions) => ({\r\n\tblur: {\r\n\t\topacity: 1,\r\n\t\ttransform: \"translate(-50%, -50%)\"\r\n\t},\r\n\thover: {\r\n\t\topacity: [1, 0, 0, 1, 0],\r\n\t\ttransform: [\r\n\t\t\t\"translate(-50%, -50%)\",\r\n\t\t\t`translate(calc(-50% + ${offset}px), -50%)`,\r\n\t\t\t`translate(calc(-50% - ${offset}px), -50%)`,\r\n\t\t\t\"translate(-50%, -50%)\",\r\n\t\t\t`translate(calc(-50% + ${offset}px), -50%)`\r\n\t\t],\r\n\t\ttransition: {\r\n\t\t\tduration: 0.7,\r\n\t\t\tease: \"easeOut\",\r\n\t\t},\r\n\t},\r\n\tafter: {\r\n\t\topacity: 1,\r\n\t\tx: 0\r\n\t}\r\n});\r\n","import React, { type FC } from \"react\";\r\nimport { useTranslation } from \"~/foundation/Dictionary\";\r\nimport { type GlobalDictionary } from \"../../../dictionary\";\r\nimport { useSitecoreContext } from \"@sitecore-jss/sitecore-jss-react\";\r\nimport { sc } from \"../../Jss\";\r\nimport { type Article, type ArticleExternal } from \"../../../generated-types\";\r\nimport { type Tag } from \"~/foundation/SitecoreContent/generated-types\";\r\nimport { type ItemReference } from \"~/foundation/Jss\";\r\nimport { getArticleTheme } from \"../../Article/getArticleTheme\";\r\nimport { MotionBox } from \"~/foundation/Framer/MotionBox\";\r\nimport { ChakraRouterLink } from \"../Link/ChakraRouterLink\";\r\nimport { AspectRatio, Box, Flex, Heading, Text as ChakraText, Link, useMediaQuery } from \"@chakra-ui/react\";\r\nimport { articleListImageMotion, articleListArrowMotion } from \"../../Theme/styles/motions\";\r\nimport { imageSizes } from \"../../Theme\";\r\nimport { breakpoints } from \"../../Theme/variables/breakpoints\";\r\nimport { IconArrowRight } from \"../Icon\";\r\nimport cursor from \"~/foundation/Assets/svg/cursors/hover-cursor.svg\";\r\nimport cursorExt from \"~/foundation/Assets/svg/cursors/hover-cursor-ext.svg\";\r\n\r\ntype ArticleBaseCardProps = {\r\n\tarticle: ItemReference
;\r\n}\r\n\r\nconst ArticleBaseCard: FC = ({ article }) => {\r\n\tconst [t] = useTranslation();\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\tconst articleTheme = getArticleTheme(article);\r\n\tconst [isLgBreakpointOrAbove] = useMediaQuery(`(min-width: ${breakpoints.lg})`);\r\n\r\n\tconst LinkComponent = article.fields?.externalLink ? Link : ChakraRouterLink;\r\n\tconst linkProps = article.fields?.externalLink ? { href: article.fields.externalLink?.value?.href, target: article.fields.externalLink?.value?.target } : { to: article.url };\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t{(article.fields.image?.value?.src || sitecoreContext.pageEditing) &&\r\n\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t\t{isLgBreakpointOrAbove && (\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t{((article.fields.listTeaserTitle?.value || article.fields.listTeaserText?.value) || sitecoreContext.pageEditing) &&\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{(article.fields.topicTags && article.fields.topicTags?.length > 0) &&\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{article.fields.topicTags?.map((tag: ItemReference, index: number) => (\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t{(article.fields.topicTags?.length && index < article.fields.topicTags?.length - 1) &&\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t, \r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t{article.fields.externalLink?.value?.href && (\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{t(\"article.externalLabel\")}\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t\t{(article.fields.listTeaserTitle?.value || sitecoreContext.pageEditing) &&\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t{/*{(article.fields.listTeaserText?.value || sitecoreContext.pageEditing) &&*/}\r\n\t\t\t\t\t\t\t{/*\t*/}\r\n\t\t\t\t\t\t\t{/*\t\t*/}\r\n\t\t\t\t\t\t\t{/*\t*/}\r\n\t\t\t\t\t\t\t{/*}*/}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t);\r\n};\r\n\r\nexport default ArticleBaseCard;","import React from \"react\";\r\nimport { useSitecoreContext } from \"~/foundation/Jss\";\r\nimport { Link } from \"../Link\";\r\nimport { Box, Text as ChakraText } from \"@chakra-ui/react\";\r\n\r\nexport const BreadcrumbNavigation = () => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\tconst breadcrumbItems = sitecoreContext.custom.breadcrumbItems?.items || [];\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{breadcrumbItems.map((breadcrumbItem, index) => {\r\n\t\t\t\treturn (\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{breadcrumbItem.title}\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{index !== breadcrumbItems.length - 1 && \"/\"}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t)\r\n\t\t\t})}\r\n\t\t\r\n\t)\r\n}","import React, { type FC } from \"react\";\r\nimport { sc } from \"../../../_Base/Jss\";\r\nimport { Box, Flex, Heading, Text } from \"@chakra-ui/react\";\r\nimport { type GenericHeaderBase } from \"~/foundation/SitecoreContent/generated-types\";\r\nimport { IconTeq } from \"../Icon\";\r\nimport { useSitecoreContext } from \"@sitecore-jss/sitecore-jss-react\";\r\n\r\ntype GenericHeaderProps = GenericHeaderBase & { hideTeq?: boolean };\r\n\r\nconst GenericHeader: FC = ({ headline, link, trumpet, hideTeq, ...rest }) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t\r\n\t\t\t\t{(headline?.value || sitecoreContext.pageEditing) && (\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{headline?.value}\r\n\t\t\t\t\t\t\t{!hideTeq &&\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t{trumpet?.value && (\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{trumpet.value?.toLowerCase()}\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t\r\n\t\t\t\t)}\r\n\r\n\t\t\t\t{(link?.value.href || sitecoreContext.pageEditing) &&\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t}\r\n\t\t\t\r\n\t\t\r\n\t);\r\n}\r\n\r\nexport default GenericHeader;","/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport React, { type FC } from \"react\";\r\nimport { Link as ChakraLink, type LinkProps as ChakraLinkProps } from \"@chakra-ui/react\";\r\nimport {\r\n\tLink as RouterLink,\r\n\ttype LinkProps as RouterLinkProps,\r\n} from \"react-router-dom\";\r\nimport { type LinkSize, type LinkVariant } from \"../../Theme/components/Link\";\r\nimport { pushDataLayer } from \"~/foundation/Tracking/GoogleTagManager\";\r\n\r\nexport type LinkProps = ChakraLinkProps & {\r\n\tto?: RouterLinkProps[\"to\"];\r\n\tsize?: LinkSize;\r\n\tvariant?: LinkVariant;\r\n\tariaLabel?: string;\r\n\tlinkLabel?: string;\r\n\ttarget?: string;\r\n\tclassName?: string;\r\n\trel?: string;\r\n\tchildren?: RouterLinkProps[\"children\"];\r\n\tdataLayer?: () => GTMDataLayer;\r\n};\r\n\r\nexport const Link: FC = ({\r\n\tto,\r\n\tsize,\r\n\tvariant,\r\n\tariaLabel,\r\n\ttarget,\r\n\tclassName,\r\n\trel,\r\n\tchildren,\r\n\tdataLayer,\r\n\t...rest\r\n}) => {\r\n\tconst ref = React.createRef();\r\n\r\n\treturn (\r\n\t\t {\r\n\t\t\t\t\tpushDataLayer(dataLayer);\r\n\t\t\t\t},\r\n\t\t\t})}\r\n\t\t\t{...rest}\r\n\t\t>\r\n\t\t\t{children &&\r\n\t\t\t\t{children}\r\n\t\t\t}\r\n\t\t\r\n\t);\r\n};\r\n","import React, { type FC } from 'react';\r\nimport { type LinkSize, type LinkVariant } from \"../Theme/components/Link\";\r\nimport { Link as SitecoreLink } from '@sitecore-jss/sitecore-jss-react'; // eslint-disable-line no-restricted-imports\r\nimport { type LinkFieldValue, useSitecoreContext } from \"~/foundation/Jss\";\r\nimport type { LinkProps as SitecoreLinkProps } from '@sitecore-jss/sitecore-jss-react/types/components/Link';\r\nimport type { Optional } from \"utility-types\";\r\nimport { Link as ChakraLink } from \"@chakra-ui/react\";\r\nimport { Link } from \"../Components/Link\";\r\n\r\nexport type LinkProps = Optional & {\r\n\tvariant?: LinkVariant;\r\n\tsize?: LinkSize;\r\n\tbgColor?: string;\r\n\tcolor?: string;\r\n\tbgColorHover?: string;\r\n\tariaLabel?: string;\r\n\tdataLayer?: () => GTMDataLayer;\r\n}\r\n\r\n/** React component that turns Sitecore link values that start with / into react-router route links */\r\nconst RoutableSitecoreLink: FC = (props) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\tconst editable = props.editable ?? true;\r\n\tconst value = props.field?.value as LinkFieldValue | undefined;\r\n\tconst href = value?.href;\r\n\tconst hasValidHref = props.field && props.field.value && href;\r\n\tconst isEditing = editable && (props.field?.editableFirstPart || props.field?.editableLastPart);\r\n\r\n\tif (!hasValidHref && !sitecoreContext.pageEditing) {\r\n\t\treturn <>;\r\n\t}\r\n\r\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n\tconst { variant, ariaLabel, color, ...sitecoreProps } = props;\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t{!isEditing\r\n\t\t\t\t?\r\n\t\t\t\t<>\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{props.children || value?.text || href || \"\"}\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t:\r\n\t\t\t\t\r\n\t\t\t\t\t{/*eslint-disable-next-line*/}\r\n\t\t\t\t\t\t{/*@ts-ignore*/}\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t\r\n\t);\r\n};\r\n\r\n\r\n\r\nexport default RoutableSitecoreLink;","import React, { type FC } from \"react\";\r\nimport { useSitecoreContext } from \"@sitecore-jss/sitecore-jss-react\"; // eslint-disable-line no-restricted-imports\r\nimport RoutableSitecoreLink, { type LinkProps } from \"./RoutableSitecoreLink\";\r\n\r\nconst LinkWrapper: FC = (props) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\r\n\tif (!props?.field && !sitecoreContext.pageEditing) {\r\n\t\treturn <>;\r\n\t}\r\n\r\n\treturn ;\r\n};\r\n\r\nexport default LinkWrapper;","import { default as Link } from \"./LinkWrapper\";\r\nimport { default as Image } from \"~/foundation/Jss/components/ImageWrapper\";\r\nimport { default as File } from \"~/foundation/Jss/components/FileWrapper\";\r\nimport { default as Date } from \"~/foundation/Jss/components/DateWrapper\";\r\nimport { default as Text } from \"~/foundation/Jss/components/TextWrapper\";\r\nimport { default as Placeholder } from \"~/foundation/Jss/components/PlaceholderWrapper\";\r\nimport { default as RichText } from \"~/foundation/Jss/components/RichTextWrapper\";\r\nimport { default as RichTextTable } from \"~/foundation/Jss/components/RichTextTableWrapper\";\r\nimport { AdvanceImage } from \"~/foundation/Jss/components/AdvanceImage\";\r\nimport { FieldEditFrame } from \"~/foundation/Jss/components/FieldEditFrame\";\r\n\r\nexport const sc = {\r\n\tImage,\r\n\tFile,\r\n\tDate,\r\n\tText,\r\n\tPlaceholder,\r\n\tAdvanceImage,\r\n\tFieldEditFrame,\r\n\tLink,\r\n\tRichText,\r\n\tRichTextTable\r\n}","import React from \"react\";\r\nimport { type PageThemeBase } from \"~/foundation/Theme/generated-types\";\r\nimport { type ColorTheme } from \"./color-themes/default-color-theme\";\r\nimport { type ColorThemeId, themes } from \"./themes\";\r\nimport { ColorThemeProvider } from \"./ColorThemeContext\";\r\nimport { useSitecoreContext } from \"~/foundation/Jss\";\r\nimport { type ColorThemeRenderingParameter } from \"../../generated-types\";\r\n\r\nexport type WithThemeProps = {\r\n\tparams: ColorThemeRenderingParameter;\r\n}\r\n\r\nexport function getColorTheme(themeId: ColorThemeId | undefined): ColorTheme | null {\r\n\tlet colorTheme: ColorTheme | null = null;\r\n\tif (themeId) {\r\n\t\tconst colorThemeFn = themes[themeId];\r\n\t\tif (colorThemeFn && typeof colorThemeFn === \"function\") {\r\n\t\t\tcolorTheme = colorThemeFn();\r\n\t\t}\r\n\t}\r\n\r\n\treturn colorTheme;\r\n}\r\n\r\nexport function themable() {\r\n\treturn function themable

(InputComponent: React.FC

) {\r\n\r\n\t\tconst Themable = (props: P) => {\r\n\t\t\tconst colorTheme = getColorTheme(props.params.backgroundTheme as ColorThemeId);\r\n\t\t\tif (colorTheme) {\r\n\t\t\t\treturn (\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t);\r\n\t\t\t}\r\n\r\n\t\t\treturn \r\n\t\t}\r\n\r\n\t\tThemable.displayName = \"Themable\";\r\n\r\n\t\treturn Themable;\r\n\t};\r\n}\r\n\r\nexport function usePageTheme() {\r\n\treturn function usePageTheme

(InputComponent: React.FC

) {\r\n\r\n\t\tconst UsePageTheme = (props: P) => {\r\n\t\t\tconst { sitecoreContext } = useSitecoreContext();\r\n\r\n\t\t\tconst colorTheme = getColorTheme(sitecoreContext.route?.fields?.pageColorTheme?.value as ColorThemeId);\r\n\t\t\tif (colorTheme) {\r\n\t\t\t\treturn (\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t);\r\n\t\t\t}\r\n\r\n\t\t\treturn \r\n\t\t}\r\n\r\n\t\tUsePageTheme.displayName = \"UsePageTheme\";\r\n\r\n\t\treturn UsePageTheme;\r\n\t};\r\n}\r\n\r\n","import React from \"react\";\r\nimport { Box, type BoxProps, forwardRef } from \"@chakra-ui/react\";\r\n\r\nexport const ContentWrapper = forwardRef((props, ref) => (\r\n\t\r\n));","import React, { useContext } from \"react\";\r\nimport { forwardRef, useStyleConfig, type BoxProps, type ThemingProps, Box } from \"@chakra-ui/react\";\r\nimport { ColorThemeContext } from \"../../Theme/ColorThemeContext\";\r\n\r\nexport type RibbonProps = BoxProps & ThemingProps;\r\n\r\nexport const Ribbon = forwardRef((props, ref) => {\r\n\tconst [theme] = useContext(ColorThemeContext);\r\n\tconst { variant, ...rest } = props;\r\n\tconst styles = useStyleConfig(\"Ribbon\", { variant });\r\n\r\n\treturn ;\r\n});","import { Text as ThemeTextStyling } from \"../../Theme/components/Text\";\r\n\r\nexport const RichTextStyling = () => ({\r\n\tsx: {\r\n\t\t...RichTextStylingBase()\r\n\t}\r\n});\r\n\r\n//Base richtext styling are also used as base styling on migrated articles in ArticleTextMigrated\r\nexport const RichTextStylingBase = () => ({\r\n\t...ThemeTextStyling().variants.bodyText,\r\n\r\n\t'p, li, td': {\r\n\t\t...ThemeTextStyling().variants.bodyText,\r\n\t\tlineHeight: \"1.5\",\r\n\t\tmb: '1.775rem',\r\n\t\t'&:last-child': {\r\n\t\t\tmb: '0'\r\n\t\t},\r\n\t\t\"+ h1, + h2\": {\r\n\t\t\tmt: [\"8\", null, null, \"12\"],\r\n\t\t}\r\n\t},\r\n\t\"h1, h2\": {\r\n\t\t...ThemeTextStyling().sizes?.desktopHeadline5,\r\n\t\tmb: [\"4\", null, null, \"6\"],\r\n\t},\r\n\t\"h3, h4, h5, h6\": {\r\n\t\t...ThemeTextStyling().sizes?.desktopHeadline6,\r\n\t\tmb: [\"1\", null, null, \"2\"],\r\n\t},\r\n\t'ul, ol': {\r\n\t\tps: ['1.65rem', null, null, '1.75rem'],\r\n\t\tmb: '1.75rem',\r\n\t\t'&:last-child': {\r\n\t\t\tmb: '0'\r\n\t\t},\r\n\r\n\t\t\"li\": {\r\n\t\t\tmb: \"2\"\r\n\t\t},\r\n\t\t\"ul, ol\": {\r\n\t\t\tmt: \"2\"\r\n\t\t},\r\n\t\t\"+ h1, + h2\": {\r\n\t\t\tmt: [\"8\", null, null, \"12\"],\r\n\t\t}\r\n\t},\r\n\t'a': {\r\n\t\tposition: \"relative\",\r\n\t\tdisplay: \"inline\",\r\n\t\ttextDecoration: \"underline\",\r\n\t\tcursor: \"pointer\",\r\n\t\t\"+ h1, + h2\": {\r\n\t\t\tmt: [\"8\", null, null, \"12\"],\r\n\t\t},\r\n\t},\r\n\t\"table\": {\r\n\t\tdisplay: \"block\",\r\n\t\tcolor: \"AWPrimary.dark\",\r\n\t\tbackground: \"white\",\r\n\t\tborderCollapse: \"collapse\",\r\n\t\toverflow: \"auto\",\r\n\t\tmaxW: \"100%\",\r\n\t\tmb: '1.75rem',\r\n\t\t\"caption\": {\r\n\t\t\tpadding: \".5em\"\r\n\t\t},\r\n\t\t\"td, th\": {\r\n\t\t\tpadding: \".5em\",\r\n\t\t\tborderStyle: \"solid\",\r\n\t\t\tborderWidth: \"1px\",\r\n\t\t\tborderColor: \"AWFunctional.midGray\",\r\n\t\t},\r\n\t\t\"th\": {\r\n\t\t\tbackgroundColor: \"AWFunctional.lightGray\",\r\n\t\t}\r\n\t}\r\n});","export default {\r\n\ttemplateIds: {\r\n\t\tpageTypes: {\r\n\t\t\tlearningCenterSectionTemplateId: \"BF17E413-FA45-4FB3-BC9D-37CE0962F595\",\r\n\t\t\tstorySectionTemplateId: \"57C5380B-2A3B-4F81-A60B-D3C4B5D78AAA\",\r\n\t\t\tstoryCategoryTemplateId: \"FF234796-0B2D-4613-98FE-C472CF0B99A6\",\r\n\t\t},\r\n\t},\r\n\ttemplateNames: {\r\n\t\tlearningCenterSectionTemplateName: \"Learning Center Section Page\",\r\n\t},\r\n\tplaceholderNames: {\r\n\t\tmain: \"page-main\",\r\n\t\tcontentSection: \"aw-content-section-main\",\r\n\t},\r\n};\r\n","import React from \"react\";\r\nimport { Icon } from \"@chakra-ui/icon\";\r\nimport { type IconProps } from \"@chakra-ui/react\";\r\n\r\nexport const IconMenu = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconClose = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconCloseSmall = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconAccordion = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconWatch = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconPlay = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconArrowDown = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconSearch = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconLearningCenter = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconListChecks = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\t\r\n\t\t\r\n\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconBook = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconChevronDown = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconCheckmark = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\nexport const IconClock = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconWarmUp = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconClockHalf = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconVisualAnalysis = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconRecipe = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconArrowUpRight = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\r\n\r\n);\r\n\r\nexport const IconMapPin = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconMail = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\nexport const IconRequired = (props: IconProps) => (\r\n\t\r\n\t\t\r\n\t\t\r\n\t\r\n);\r\n\r\n\r\n","import { Text as ChakraText, ListItem, UnorderedList } from \"@chakra-ui/react\";\r\nimport { type FC, useContext } from \"react\";\r\nimport { type ItemReference } from \"~/foundation/Jss\";\r\nimport { type Tag } from \"~/foundation/SitecoreContent/generated-types\";\r\nimport { ColorThemeContext } from \"../../Theme/ColorThemeContext\";\r\nimport { type GlobalDictionary } from \"../../../dictionary\";\r\nimport { useTranslation } from \"~/foundation/Dictionary\";\r\ninterface SimpleTag {\r\n\tid: string;\r\n\ttitle?: string;\r\n}\r\n\r\ninterface TagListProps {\r\n\ttags: (ItemReference | SimpleTag)[];\r\n\tvariant?: string;\r\n\tbackgroundColor?: string;\r\n\tborderColor?: string;\r\n\ttextColor?: string;\r\n\tclassName?: string;\r\n}\r\n\r\nconst TagList: FC = ({\r\n\ttags,\r\n\tvariant = \"defaultCategoryTagDark\",\r\n\tbackgroundColor,\r\n\tborderColor,\r\n\ttextColor,\r\n\tclassName\r\n}) => {\r\n\tconst [theme] = useContext(ColorThemeContext);\r\n\r\n\t// Set default styles if not provided\r\n\tconst bg = backgroundColor || theme.ribbon.tagDefaultDarkBgColor;\r\n\tconst border = borderColor || theme.ribbon.tagDefaultDarkBorderColor;\r\n\tconst color = textColor || theme.ribbon.primaryColor;\r\n\tconst [t] = useTranslation();\r\n\r\n\tif (!tags || tags.length === 0) return <>;\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{tags.map((tag) => {\r\n\t\t\t\tconst tagTitle =\r\n\t\t\t\t\t\"fields\" in tag\r\n\t\t\t\t\t\t? tag.fields?.title?.value || tag.name\r\n\t\t\t\t\t\t: tag.title || \"Untitled\";\r\n\r\n\t\t\t\treturn (\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{tagTitle}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t);\r\n\t\t\t})}\r\n\t\t\r\n\t);\r\n};\r\n\r\nexport default TagList;\r\n","export const articleListImageMotion = {\r\n\thidden: {\r\n\t\topacity: 0\r\n\t},\r\n\tblur: {\r\n\t\topacity: 1,\r\n\t\tscale: 1,\r\n\t\ttransition: {\r\n\t\t\tduration: .5,\r\n\t\t\tease: \"easeOut\"\r\n\t\t}\r\n\t},\r\n\thover: {\r\n\t\topacity: 1,\r\n\t\tscale: 1.025,\r\n\t\ttransition: {\r\n\t\t\tduration: .5,\r\n\t\t\tease: \"easeOut\"\r\n\t\t}\r\n\t}\r\n};\r\n\r\nexport const videoThumbnailMotion = {\r\n\tblur: {\r\n\t\tscale: 1,\r\n\t\ttransition: {\r\n\t\t\tduration: .5,\r\n\t\t\tease: \"easeOut\"\r\n\t\t}\r\n\t},\r\n\thover: {\r\n\t\tscale: 1.015,\r\n\t\ttransition: {\r\n\t\t\tduration: .5,\r\n\t\t\tease: \"easeOut\"\r\n\t\t}\r\n\t}\r\n};\r\n\r\nexport const articleListArrowMotion = {\r\n\tblur: {\r\n\t\topacity: 0,\r\n\t\tx: -16,\r\n\t\ttransition: {\r\n\t\t\tease: \"easeOut\",\r\n\t\t\topacity: {\r\n\t\t\t\tduration: .2,\r\n\t\t\t},\r\n\t\t}\r\n\t},\r\n\thover: {\r\n\t\topacity: 1,\r\n\t\tx: 0,\r\n\t\ttransition: {\r\n\t\t\tduration: .5,\r\n\t\t\tease: \"easeOut\"\r\n\t\t}\r\n\t}\r\n};\r\n\r\nexport const quizCardContainerMotion = {\r\n\tblur: {\r\n\t\topacity: 0,\r\n\t\ttransition: {\r\n\t\t\tease: \"easeOut\",\r\n\t\t\topacity: {\r\n\t\t\t\tduration: .5,\r\n\t\t\t},\r\n\t\t}\r\n\t},\r\n\tdefault: {\r\n\t\topacity: 1,\r\n\t\ttransition: {\r\n\t\t\tduration: .5,\r\n\t\t\tease: \"easeOut\",\r\n\t\t\tstaggerChildren: 0.1,\r\n\t\t\tdelayChildren: .3,\r\n\t\t}\r\n\t}\r\n}\r\n\r\nexport const quizImageContainerMotion = {\r\n\tblur: {\r\n\t\topacity: 0,\r\n\t\ty: 30,\r\n\t\ttransition: {\r\n\t\t\tease: \"easeOut\",\r\n\t\t\topacity: {\r\n\t\t\t\tduration: .7,\r\n\t\t\t},\r\n\t\t}\r\n\t},\r\n\tdefault: {\r\n\t\topacity: 1,\r\n\t\ty: 0,\r\n\t\ttransition: {\r\n\t\t\tduration: .7,\r\n\t\t\tease: \"easeOut\",\r\n\t\t}\r\n\t},\r\n}\r\n\r\nexport const quizCardItemMotion = {\r\n\tblur: {\r\n\t\topacity: 0,\r\n\t\ty: 30,\r\n\t\ttransition: {\r\n\t\t\tease: \"easeOut\",\r\n\t\t\topacity: {\r\n\t\t\t\tduration: .6,\r\n\t\t\t},\r\n\t\t}\r\n\t},\r\n\tdefault: {\r\n\t\topacity: 1,\r\n\t\ty: 0,\r\n\t\ttransition: {\r\n\t\t\tduration: .6,\r\n\t\t\tease: \"easeOut\",\r\n\t\t}\r\n\t},\r\n}\r\n\r\nexport const newsletterContainerMotion = {\r\n\tblur: {\r\n\t\topacity: 0,\r\n\t\ttransition: {\r\n\t\t\tease: \"easeOut\",\r\n\t\t\topacity: {\r\n\t\t\t\tduration: .5,\r\n\t\t\t},\r\n\t\t}\r\n\t},\r\n\tdefault: {\r\n\t\topacity: 1,\r\n\t\ttransition: {\r\n\t\t\tduration: .5,\r\n\t\t\tease: \"easeOut\",\r\n\t\t\tstaggerChildren: 0.1,\r\n\t\t\tdelayChildren: .3,\r\n\t\t}\r\n\t}\r\n}\r\n\r\nexport const newsletterItemMotion = {\r\n\tblur: {\r\n\t\topacity: 0,\r\n\t\ty: 30,\r\n\t\ttransition: {\r\n\t\t\tease: \"easeOut\",\r\n\t\t\topacity: {\r\n\t\t\t\tduration: .6,\r\n\t\t\t},\r\n\t\t}\r\n\t},\r\n\tdefault: {\r\n\t\topacity: 1,\r\n\t\ty: 0,\r\n\t\ttransition: {\r\n\t\t\tduration: .6,\r\n\t\t\tease: \"easeOut\",\r\n\t\t}\r\n\t},\r\n}\r\n\r\ninterface PlayButtonMotionOptions {\r\n\toffset: number; // The responsive offset for the play button animation in px\r\n}\r\n\r\nexport const playButtonOutlineMotion = ({ offset }: PlayButtonMotionOptions) => ({\r\n\tblur: {\r\n\t\topacity: 0,\r\n\t\ttransform: `translate(calc(-50% - ${offset}px), -50%)`\r\n\t},\r\n\thover: {\r\n\t\topacity: [0, 1, 0, 0, 1],\r\n\t\ttransform: [\r\n\t\t\t`translate(calc(-50% - ${offset}px), -50%)`,\r\n\t\t\t\"translate(-50%, -50%)\",\r\n\t\t\t`translate(calc(-50% + ${offset}px), -50%)`,\r\n\t\t\t`translate(calc(-50% - ${offset}px), -50%)`,\r\n\t\t\t\"translate(-50%, -50%)\"\r\n\t\t],\r\n\t\ttransition: {\r\n\t\t\tduration: 0.7,\r\n\t\t\tease: \"easeOut\",\r\n\t\t},\r\n\t},\r\n\tafter: {\r\n\t\topacity: 1,\r\n\t\tx: 0\r\n\t}\r\n});\r\n\r\nexport const playButtonMotion = ({ offset }: PlayButtonMotionOptions) => ({\r\n\tblur: {\r\n\t\topacity: 1,\r\n\t\ttransform: \"translate(-50%, -50%)\"\r\n\t},\r\n\thover: {\r\n\t\topacity: [1, 0, 0, 1, 0],\r\n\t\ttransform: [\r\n\t\t\t\"translate(-50%, -50%)\",\r\n\t\t\t`translate(calc(-50% + ${offset}px), -50%)`,\r\n\t\t\t`translate(calc(-50% - ${offset}px), -50%)`,\r\n\t\t\t\"translate(-50%, -50%)\",\r\n\t\t\t`translate(calc(-50% + ${offset}px), -50%)`\r\n\t\t],\r\n\t\ttransition: {\r\n\t\t\tduration: 0.7,\r\n\t\t\tease: \"easeOut\",\r\n\t\t},\r\n\t},\r\n\tafter: {\r\n\t\topacity: 1,\r\n\t\tx: 0\r\n\t}\r\n});\r\n\r\nexport const headerMotionVariants = {\r\n\tcontainer: {\r\n\t\topen: {\r\n\t\t\ttransform: \"translateY(0%)\",\r\n\t\t},\r\n\t\tclosed: {\r\n\t\t\ttransform: \"translateY(-100%)\",\r\n\t\t},\r\n\t},\r\n\tlogo: {\r\n\t\tinitial: {\r\n\t\t\ttransform: \"translateY(0%)\",\r\n\t\t},\r\n\t\tfirst: {\r\n\t\t\ttransform: \"translateY(0%)\",\r\n\t\t},\r\n\t\tsecond: {\r\n\t\t\ttransform: \"translateY(0%)\",\r\n\t\t},\r\n\t}\r\n}\r\n\r\nexport const motionVariantsHomePage = (isXL: boolean) => ({\r\n\tcontainer: {\r\n\t\tdefault: {\r\n\t\t\ttransform: \"translateY(0%)\",\r\n\t\t},\r\n\t\tinitial: {\r\n\t\t\ttransform: \"translateY(-150%)\",\r\n\t\t},\r\n\t\topen: {\r\n\t\t\ttransform: \"translateY(0%)\",\r\n\t\t},\r\n\t\tclosed: {\r\n\t\t\ttransform: \"translateY(-100%)\",\r\n\t\t},\r\n\t\tfirst: {\r\n\t\t\ttransform: \"translateY(0%)\",\r\n\t\t\tpaddingTop: isXL ? \"var(--chakra-sizes-headerHLGExpandedTop)\" : 0,\r\n\t\t},\r\n\t\tsecond: {\r\n\t\t\ttransform: \"translateY(0%)\",\r\n\t\t\tpaddingTop: \"0rem\",\r\n\t\t},\r\n\t},\r\n\tlogo: {\r\n\t\tinitial: {\r\n\t\t\ttransform: isXL ? \"translateY(-200%)\" : \"translateY(0%)\",\r\n\t\t},\r\n\t\tfirst: {\r\n\t\t\ttransform: isXL ? \"translateY(-200%)\" : \"translateY(0%)\",\r\n\t\t},\r\n\t\tsecond: {\r\n\t\t\ttransform: \"translateY(0%)\",\r\n\t\t},\r\n\t},\r\n\tsvg: {\r\n\t\tinitial: {\r\n\t\t\twidth: isXL ? \"var(--chakra-sizes-headerExpandedLogoWidth)\" : \"var(--chakra-sizes-headerExpandedLogoWidthSM)\",\r\n\t\t\theight: \"auto\",\r\n\t\t},\r\n\t\tfirst: {\r\n\t\t\twidth: isXL ? \"var(--chakra-sizes-headerExpandedLogoWidth)\" : \"var(--chakra-sizes-headerExpandedLogoWidthSM)\",\r\n\t\t\theight: \"auto\",\r\n\t\t},\r\n\t\tsecond: {\r\n\t\t\twidth: isXL ? \"var(--chakra-sizes-headerExpandedLogoWidthLG)\" : \"var(--chakra-sizes-headerExpandedLogoWidthSM)\",\r\n\t\t\theight: isXL ? \"var(--chakra-sizes-headerExpandedLogoHeightLG)\" : \"auto\",\r\n\t\t}\r\n\t},\r\n\tlogoSecondary: {\r\n\t\tinitial: {\r\n\t\t\topacity: \"100%\",\r\n\t\t\tmarginLeft: \"1.19rem\"\r\n\t\t},\r\n\t\tfirst: {\r\n\t\t\topacity: \"100%\",\r\n\t\t\tmarginLeft: \"1.19rem\"\r\n\t\t},\r\n\t\tsecond: {\r\n\t\t\topacity: \"0%\",\r\n\t\t\theight: \"0\",\r\n\t\t\twidth: \"0\",\r\n\t\t\tmarginLeft: \"0rem\"\r\n\t\t}\r\n\t}\r\n});\r\n\r\nexport const fadeUp = {\r\n\tinitial: {\r\n\t\ty: \"25px\",\r\n\t\topacity: \"0%\",\r\n\t},\r\n\tactive: {\r\n\t\ty: \"0\",\r\n\t\topacity: \"100%\",\r\n\t}\r\n}\r\n\r\nexport const worldTransitions = {\r\n\tdefault: {\r\n\t\tease: \"easeOut\",//[.35, 1, .45, 1],\r\n\t\tduration: .3,\r\n\t},\r\n\teaseOutSlow: {\r\n\t\tease: \"easeOut\",//[.35, 1, .45, 1],\r\n\t\tduration: .8,\r\n\t}\r\n}\r\n\r\nexport const resultsContainer = {\r\n\thidden: { opacity: 0 },\r\n\tshow: {\r\n\t\topacity: 1,\r\n\t\ttransition: {\r\n\t\t\tduration: .5,\r\n\t\t\tstaggerChildren: 0.1\r\n\t\t}\r\n\t}\r\n}\r\n\r\nexport const fadeIn = {\r\n\thidden: { opacity: 0 },\r\n\tshow: { opacity: 1 }\r\n}\r\n","export const CookieConsentStyling = {\r\n\t\"sx\": {\r\n\t\t\"&[src]\": {\r\n\t\t\tdisplay: \"none\"\r\n\t\t}\r\n\t}\r\n}","import React, { type FC } from \"react\";\r\nimport { Box, type BoxProps, Button, Heading, Text as ChakraText } from \"@chakra-ui/react\";\r\nimport { useTranslation } from \"~/foundation/Dictionary\";\r\nimport { CookieConsentStyling } from \"./styles\";\r\nimport { type GlobalDictionary } from \"../../../dictionary\";\r\n\r\ntype CookieConsentProps = BoxProps;\r\n\r\nexport const CookieConsent: FC = (props) => {\r\n\tconst [t] = useTranslation();\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t{t(\"general.cookies.cookieTitle\")}\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t{t(\"general.cookies.cookieText\")}\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t)\r\n}","import React from \"react\"\r\nimport { Box } from \"@chakra-ui/react\"\r\n\r\ntype SimpleImagePlaceholderProps = {\r\n\tbg?: string\r\n\tmissingAltText?: string\r\n}\r\n\r\nconst SimpleImagePlaceholder = ({ bg = \"AWFunctional.softGray\", missingAltText }: SimpleImagePlaceholderProps) => {\r\n\treturn (\r\n\t\t\r\n\t\t\t{missingAltText && (\r\n\t\t\t\t\r\n\t\t\t)}\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t)\r\n}\r\n\r\nexport default SimpleImagePlaceholder;","import React, { type FC } from \"react\";\r\nimport { type ISearchResultItemModel, type SearchResultTopicModel } from \"~/feature/Search/generated-types\";\r\nimport { Text as ChakraText, Heading, AspectRatio, Flex } from \"@chakra-ui/react\";\r\nimport { mediaApi } from \"~/foundation/Jss\";\r\nimport { imageSizes } from \"../../_Base/Theme\";\r\nimport { LazyImage } from \"~/foundation/Components/Image/LazyImage\";\r\nimport { MotionBox } from \"~/foundation/Framer/MotionBox\";\r\nimport SimpleImagePlaceholder from \"../../Media/SimpleImagePlaceholder/SimpleImagePlaceholder\";\r\nimport { fadeIn } from \"../../_Base/Theme/styles/motions\";\r\nimport { sizes } from \"../../_Base/Theme/variables/sizes\";\r\nimport { Link } from \"../../_Base/Components/Link\";\r\n\r\nexport enum AspectRatioOption {\r\n\tdefault = \"default\",\r\n\tcover = \"cover\",\r\n\tauto = \"auto\"\r\n}\r\ninterface StoryListItemProps extends ISearchResultItemModel {\r\n\tgridColumn?: string;\r\n\taspectRatio?: AspectRatioOption;\r\n\tisExternal?: boolean;\r\n}\r\n\r\nconst StoryListItem: FC = ({\r\n\turl,\r\n\tsmallImage,\r\n\ttitle,\r\n\ttags,\r\n\tdescription,\r\n\tgridColumn,\r\n\taspectRatio,\r\n\tisExternal\r\n}) => {\r\n\r\n\t// Get img aspect ratio\r\n\tconst imageW = Number(smallImage?.width) || 4;\r\n\tconst imageH = Number(smallImage?.height) || 3;\r\n\r\n\tlet ratio = 4 / 3;\r\n\tif (aspectRatio === AspectRatioOption.cover) {\r\n\t\tratio = 3 / 4;\r\n\t} else if (aspectRatio === AspectRatioOption.auto) {\r\n\t\t// calc aspect ratio from dimensions, fallback 4 / 3\r\n\t\tratio = imageW / imageH;\r\n\t}\r\n\r\n\tconst remToPx = (remValue: string, base: number = 16): number => {\r\n\t\tconst numericValue = parseFloat(remValue.replace('rem', '').trim());\r\n\t\treturn numericValue * base;\r\n\t};\r\n\r\n\tconst contentWrapperWidthPx = remToPx(String(sizes.contentWrapperWidthXL));\r\n\r\n\tconst getSrcSet = () => {\r\n\t\tif (aspectRatio === AspectRatioOption.cover) {\r\n\t\t\treturn imageSizes.review.md;\r\n\t\t} else if (aspectRatio === AspectRatioOption.auto) {\r\n\t\t\tconst baseWidth = contentWrapperWidthPx / 4;\r\n\t\t\tconst baseHeight = baseWidth / ratio;\r\n\r\n\t\t\treturn {\r\n\t\t\t\tcw: baseWidth,\r\n\t\t\t\tch: baseHeight\r\n\t\t\t};\r\n\t\t}\r\n\t\treturn imageSizes.articleList.sm;\r\n\t};\r\n\r\n\tconst srcSet = getSrcSet();\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t{smallImage?.url ? (\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t)}\r\n\t\t\t\t\r\n\r\n\t\t\t\t{title &&\r\n\t\t\t\t\t{title}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t{tags && tags?.length > 0 && (\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{tags?.map((tagItem: SearchResultTopicModel, i) => (\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{tagItem.title}\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t\r\n\t\t\t\t)}\r\n\r\n\t\t\t\t{description &&\r\n\t\t\t\t\t\r\n\t\t\t\t}\r\n\t\t\t\r\n\t\t\r\n\t);\r\n};\r\n\r\nexport default StoryListItem;","import React from \"react\";\r\nimport { Box, type BoxProps, useToken } from \"@chakra-ui/react\";\r\n\r\nconst getStyles: (color: string) => BoxProps[\"sx\"] = (color: string) => ({\r\n\tposition: \"relative\",\r\n\twidth: \"10px\",\r\n\theight: \"10px\",\r\n\tborderRadius: \"5px\",\r\n\tbackgroundColor: color,\r\n\tcolor: color,\r\n\tanimation: \"dot-flashing 1s infinite linear alternate\",\r\n\tanimationDelay: \"0.5s\",\r\n\r\n\t\"&:before, &:after\": {\r\n\t\tcontent: \"''\",\r\n\t\tdisplay: \"inline-block\",\r\n\t\tposition: \"absolute\",\r\n\t\ttop: 0,\r\n\t},\r\n\t\"&:before\": {\r\n\t\tleft: \"-15px\",\r\n\t\twidth: \"10px\",\r\n\t\theight: \"10px\",\r\n\t\tborderRadius: \"5px\",\r\n\t\tbackgroundColor: color,\r\n\t\tcolor: color,\r\n\t\tanimation: \"dot-flashing 1s infinite alternate\",\r\n\t\tanimationDelay: \"0s\",\r\n\t},\r\n\t\"&:after\": {\r\n\t\tleft: \"15px\",\r\n\t\twidth: \"10px\",\r\n\t\theight: \"10px\",\r\n\t\tborderRadius: \"5px\",\r\n\t\tbackgroundColor: color,\r\n\t\tcolor: color,\r\n\t\tanimation: \"dot-flashing 1s infinite alternate\",\r\n\t\tanimationDelay: \"1s\",\r\n\t},\r\n\r\n\t\"@keyframes dot-flashing\": {\r\n\t\t\"0%\": {\r\n\t\t\tbackgroundColor: color,\r\n\t\t},\r\n\t\t\"50%, 100%\": {\r\n\t\t\tbackgroundColor: `rgba(0, 127, 173, 0.2)`,\r\n\t\t}\r\n\t}\r\n})\r\n\r\nexport const ButtonLoader = () => {\r\n\tconst [dotColor] = useToken(\"colors\", [\"AWFunctional.darkGray\"])\r\n\r\n\treturn \r\n};\r\n\r\n","import React, { type FC } from \"react\";\r\nimport { AspectRatio, Flex, Box, Skeleton, SkeletonText } from \"@chakra-ui/react\";\r\nimport { MotionBox } from \"~/foundation/Framer/MotionBox\";\r\nimport { fadeIn, worldTransitions } from \"../../_Base/Theme/styles/motions\";\r\nimport { AspectRatioOption } from \"../../Story/StoryList/StoryListItem\";\r\n\r\ntype SkeletonResultItemProps = {\r\n\tgridColumn?: string;\r\n\taspectRatio?: AspectRatioOption;\r\n}\r\n\r\nconst SkeletonResultItem: FC = ({ gridColumn, aspectRatio }) => {\r\n\tconst ratio = aspectRatio === AspectRatioOption.cover ? (3 / 4) : (4 / 3);\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\r\n\t\t\t\t\r\n\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t);\r\n};\r\n\r\nexport default SkeletonResultItem;","import React, { type FC, useEffect, useRef } from \"react\";\r\nimport { sc } from \"../../_Base/Jss\";\r\nimport { type TextField, useSitecoreContext } from \"~/foundation/Jss\";\r\nimport { Box, Button, Heading, VisuallyHidden, Text as ChakraText, useMediaQuery } from \"@chakra-ui/react\";\r\nimport { type ISearchResultItemModel } from \"~/feature/Search/generated-types\";\r\nimport { MotionBox } from \"~/foundation/Framer/MotionBox\";\r\nimport StoryListItem, { AspectRatioOption } from \"../../Story/StoryList/StoryListItem\";\r\nimport { ButtonLoader } from \"../../_Base/Components/Loading/Loader\";\r\nimport { useTranslation } from \"~/foundation/Dictionary\";\r\nimport { type GlobalDictionary } from \"../../dictionary\";\r\nimport { fadeIn, resultsContainer, worldTransitions } from \"../../_Base/Theme/styles/motions\";\r\nimport SkeletonResultItem from \"./SkeletonResultItem\";\r\nimport { breakpoints } from \"../../_Base/Theme/variables/breakpoints\";\r\n\r\ntype ResultsListProps = {\r\n\theadline?: TextField | string | undefined;\r\n\tloadMore: boolean;\r\n\tresults?: Array;\r\n\tisLoading: boolean;\r\n\tpage: number;\r\n\tpageSize: number | undefined;\r\n\ttotalResultCount: number;\r\n\tsetPage?: React.Dispatch>;\r\n\tuselayout?: boolean;\r\n\tloadMoreSuffix?: string;\r\n\tskeletonLoad?: boolean;\r\n\tfilterType?: string | undefined;\r\n}\r\n\r\nconst ResultsList: FC = ({\r\n\theadline,\r\n\tloadMore,\r\n\tresults,\r\n\tisLoading,\r\n\tpage,\r\n\tpageSize,\r\n\ttotalResultCount,\r\n\tsetPage = () => { },\r\n\tuselayout,\r\n\tloadMoreSuffix,\r\n\tskeletonLoad,\r\n\tfilterType = undefined\r\n}) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\tconst [t] = useTranslation();\r\n\tconst [isLgBreakpointOrAbove] = useMediaQuery(`(min-width: ${breakpoints.lg})`);\r\n\tconst [isMdBreakpointOrAbove] = useMediaQuery(`(min-width: ${breakpoints.md})`);\r\n\r\n\tconst storyList = useRef(null);\r\n\tconst statusMessage = useRef(null);\r\n\tconst allContentLoaded = totalResultCount <= ((pageSize || 0) * page);\r\n\r\n\tconst updatePage = () => {\r\n\t\tif (totalResultCount) {\r\n\t\t\tif (totalResultCount > ((pageSize || 0) * page)) {\r\n\t\t\t\tsetPage(page => page + 1)\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t// Focus on newest item after loading is done and results are updated\r\n\tuseEffect(() => {\r\n\t\tif (storyList.current && loadMore && page > 1 && !isLoading) {\r\n\t\t\tconst focusIndex = (page - 1) * (pageSize || 0);\r\n\t\t\tconst firstAddedItem = storyList.current.childNodes[focusIndex]?.childNodes[0] as HTMLAnchorElement;\r\n\t\t\tfirstAddedItem?.focus();\r\n\t\t}\r\n\t}, [results, isLoading]);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (statusMessage.current) {\r\n\t\t\tstatusMessage.current.textContent =\r\n\t\t\t\tisLoading ?\r\n\t\t\t\t\t(t(\"resultsList.loadingContent\") || \"Loading content\")\r\n\t\t\t\t\t:\r\n\t\t\t\t\t(t(\"resultsList.contentLoaded\") || \"Done loading content\");\r\n\t\t}\r\n\t}, [isLoading]);\r\n\r\n\tconst getGridLayout = (index: number) => {\r\n\t\tif (!uselayout) {\r\n\t\t\treturn [\"span 1\"];\r\n\t\t}\r\n\r\n\t\tlet gridColsLg = 3; // Default cols, lg bp and above\r\n\t\tif (filterType !== \"review\" && filterType !== \"issue\" && !isLgBreakpointOrAbove) {\r\n\t\t\tgridColsLg = 2;\r\n\t\t}\r\n\t\tconst row = Math.floor(index / gridColsLg);\r\n\r\n\t\tif (filterType === \"review\" || filterType === \"issue\") {\r\n\t\t\tif (isLgBreakpointOrAbove) {\r\n\t\t\t\treturn [\"span 3\"];\r\n\t\t\t} else if (isMdBreakpointOrAbove) {\r\n\t\t\t\treturn [\"span 4\"];\r\n\t\t\t} else {\r\n\t\t\t\treturn [\"span 6\"];\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tlet layouts = [\r\n\t\t\t[\"span 4\", \"span 6\"],\r\n\t\t\t[\"span 6\", \"span 4\"],\r\n\t\t\t[\"span 3\", \"span 7\"],\r\n\t\t\t[\"span 4\", \"span 6\"],\r\n\t\t\t[\"span 6\", \"span 4\"],\r\n\t\t\t[\"span 3\", \"span 7\"]\r\n\t\t];\r\n\r\n\t\tif (isLgBreakpointOrAbove) {\r\n\t\t\tlayouts = [\r\n\t\t\t\t[\"span 4\", \"span 3\", \"span 3\"],\r\n\t\t\t\t[\"span 3\", \"span 3\", \"span 4\"]\r\n\t\t\t];\r\n\t\t}\r\n\r\n\t\treturn layouts[row % layouts.length];\r\n\t};\r\n\r\n\tconst getTemplateGrid = (filterType?: string) => {\r\n\t\tif (!uselayout) {\r\n\t\t\treturn \"1fr 1fr 1fr\";\r\n\t\t}\r\n\t\tif (filterType === \"review\" || filterType === \"issue\") {\r\n\t\t\treturn \"repeat(12, 1fr)\";\r\n\t\t}\r\n\t\treturn \"repeat(10, 1fr)\";\r\n\t};\r\n\r\n\tconst renderSkeletons = () => {\r\n\t\tlet defaultSkeletonAmount = 3;\r\n\r\n\t\tif (filterType !== \"review\" && filterType !== \"issue\" && !isLgBreakpointOrAbove) {\r\n\t\t\tdefaultSkeletonAmount = 2;\r\n\t\t}\r\n\r\n\t\tif (filterType === \"review\" || filterType === \"issue\") {\r\n\t\t\tif (isLgBreakpointOrAbove) {\r\n\t\t\t\tdefaultSkeletonAmount = 4;\r\n\t\t\t} else if (isMdBreakpointOrAbove) {\r\n\t\t\t\tdefaultSkeletonAmount = 3;\r\n\t\t\t} else {\r\n\t\t\t\tdefaultSkeletonAmount = 2;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tconst skeletons = [];\r\n\t\tfor (let i = 0; i < defaultSkeletonAmount; i++) {\r\n\t\t\tconst layout = getGridLayout(i);\r\n\t\t\tconst gridColumn = layout ? layout[i % layout.length] : \"auto\";\r\n\t\t\tskeletons.push(\r\n\t\t\t\t\r\n\t\t\t);\r\n\t\t}\r\n\t\treturn skeletons;\r\n\t};\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{(headline || sitecoreContext.pageEditing) &&\r\n\t\t\t\t\r\n\t\t\t\t\t{typeof headline === \"string\" ? (\r\n\t\t\t\t\t\theadline\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t)}\r\n\t\t\t\t\r\n\t\t\t}\r\n\r\n\t\t\t{loadMore &&\r\n\t\t\t\t\r\n\t\t\t}\r\n\r\n\t\t\t{results && results?.length > 0 ? (\r\n\t\t\t\t\r\n\t\t\t\t\t{results.map((listItem, i) => {\r\n\t\t\t\t\t\t// if (!listItem.url) return null;\r\n\t\t\t\t\t\tconst layout = getGridLayout(i); // Get the layout for the row\r\n\t\t\t\t\t\tconst itemIndexWithinRow = i % layout.length; // Get the item index within that row\r\n\t\t\t\t\t\tconst gridColumn = layout[itemIndexWithinRow] || \"auto\"; // Get the grid column based on the item index within the row\r\n\r\n\t\t\t\t\t\tlet aspectRatio = AspectRatioOption.default;\r\n\t\t\t\t\t\tif (listItem.section === \"Reviews\") {\r\n\t\t\t\t\t\t\taspectRatio = AspectRatioOption.auto;\r\n\t\t\t\t\t\t} else if (listItem.contentType === \"Issue\") {\r\n\t\t\t\t\t\t\taspectRatio = AspectRatioOption.cover;\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t// Render skeleton if loading more results\r\n\t\t\t\t\t\tif (isLoading && skeletonLoad) {\r\n\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t})}\r\n\t\t\t\t\r\n\t\t\t) : (\r\n\t\t\t\t(!isLoading ? (\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{t(\"general.search.noResultsLabel\")}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t) : (\r\n\t\t\t\t\t<>\r\n\t\t\t\t\t\t{skeletonLoad && (\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{renderSkeletons()}\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t\r\n\t\t\t\t))\r\n\t\t\t)}\r\n\r\n\t\t\t{loadMore && totalResultCount > 0 &&\r\n\t\t\t\t}\r\n\t\t\t\t\tonClick={updatePage}\r\n\t\t\t\t>\r\n\t\t\t\t\t{allContentLoaded ? t(\"general.search.allContentLoaded\") : t(\"general.search.loadMoreLabel\")}\r\n\r\n\t\t\t\t\t{loadMoreSuffix && !allContentLoaded && (\r\n\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t{\" \"}\r\n\t\t\t\t\t\t\t{loadMoreSuffix}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t)}\r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t\r\n\t);\r\n};\r\n\r\nexport default ResultsList;","import { Box, type BoxProps as ChakraBoxProps } from \"@chakra-ui/react\";\r\n\r\nexport type ComponentWrapperProps = ChakraBoxProps;\r\n\r\nexport const ComponentWrapper = ({ children, bg, ...props }: ComponentWrapperProps) => {\r\n\treturn ({children})\r\n}","/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport React, { type FC } from \"react\";\r\nimport { Link as ChakraLink, type LinkProps as ChakraLinkProps } from \"@chakra-ui/react\";\r\nimport {\r\n\tLink as RouterLink,\r\n\ttype LinkProps as RouterLinkProps,\r\n} from \"react-router-dom\";\r\nimport { pushDataLayer } from \"~/foundation/Tracking/GoogleTagManager\";\r\n\r\nexport type LinkProps = ChakraLinkProps & {\r\n\tto?: RouterLinkProps[\"to\"];\r\n\tsize?: string;\r\n\tvariant?: string;\r\n\tariaLabel?: string;\r\n\tlinkLabel?: string;\r\n\ttarget?: string;\r\n\tclassName?: string;\r\n\trel?: string;\r\n\tchildren?: RouterLinkProps[\"children\"];\r\n\tdataLayer?: () => GTMDataLayer;\r\n};\r\n\r\nexport const Link: FC = ({\r\n\tto,\r\n\tsize,\r\n\tvariant,\r\n\tariaLabel,\r\n\ttarget,\r\n\tclassName,\r\n\trel,\r\n\tchildren,\r\n\tdataLayer,\r\n\t...rest\r\n}) => {\r\n\tconst ref = React.createRef();\r\n\r\n\treturn (\r\n\t\t {\r\n\t\t\t\t\tpushDataLayer(dataLayer);\r\n\t\t\t\t},\r\n\t\t\t})}\r\n\t\t\t{...rest}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t\r\n\t);\r\n};\r\n","import { Link as ChakraLink } from \"@chakra-ui/react\";\r\nimport { Link as SitecoreLink } from '@sitecore-jss/sitecore-jss-react'; // eslint-disable-line no-restricted-imports\r\nimport type { LinkProps as SitecoreLinkProps } from '@sitecore-jss/sitecore-jss-react/types/components/Link';\r\nimport { type FC } from 'react';\r\nimport type { Optional } from \"utility-types\";\r\nimport { type LinkFieldValue, useSitecoreContext } from \"~/foundation/Jss\";\r\nimport { Link } from \"../Components/link\";\r\n\r\nexport type LinkProps = Optional & {\r\n\tvariant?: string;\r\n\tsize?: string;\r\n\tbgColor?: string;\r\n\tcolor?: string;\r\n\tbgColorHover?: string;\r\n\tariaLabel?: string;\r\n\tdataLayer?: () => GTMDataLayer;\r\n}\r\n\r\n/** React component that turns Sitecore link values that start with / into react-router route links */\r\nconst RoutableSitecoreLink: FC = (props) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\tconst editable = props.editable ?? true;\r\n\tconst value = props.field?.value as LinkFieldValue | undefined;\r\n\tconst href = value?.href;\r\n\tconst hasValidHref = props.field && props.field.value && href;\r\n\tconst isEditing = editable && (props.field?.editableFirstPart || props.field?.editableLastPart);\r\n\r\n\tif (!hasValidHref && !sitecoreContext.pageEditing) {\r\n\t\treturn <>;\r\n\t}\r\n\r\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n\tconst { variant, ariaLabel, color, ...sitecoreProps } = props;\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t{!isEditing\r\n\t\t\t\t?\r\n\t\t\t\t\r\n\t\t\t\t\t{props.children || value?.text || href || \"\"}\r\n\t\t\t\t\r\n\t\t\t\t:\r\n\t\t\t\t\r\n\t\t\t\t\t{/*eslint-disable-next-line*/}\r\n\t\t\t\t\t{/*@ts-ignore*/}\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t\r\n\t);\r\n};\r\n\r\n\r\n\r\nexport default RoutableSitecoreLink;","import React, { type FC } from \"react\";\r\nimport { useSitecoreContext } from \"@sitecore-jss/sitecore-jss-react\"; // eslint-disable-line no-restricted-imports\r\nimport RoutableSitecoreLink, { type LinkProps } from \"./RoutableSitecoreLink\";\r\n\r\nconst LinkWrapper: FC = (props) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\r\n\tif (!props?.field && !sitecoreContext.pageEditing) {\r\n\t\treturn <>;\r\n\t}\r\n\r\n\treturn ;\r\n};\r\n\r\nexport default LinkWrapper;","import { AdvanceImage } from \"~/foundation/Jss/components/AdvanceImage\";\r\nimport { default as Date } from \"~/foundation/Jss/components/DateWrapper\";\r\nimport { FieldEditFrame } from \"~/foundation/Jss/components/FieldEditFrame\";\r\nimport { default as File } from \"~/foundation/Jss/components/FileWrapper\";\r\nimport { default as Image } from \"~/foundation/Jss/components/ImageWrapper\";\r\nimport { default as Placeholder } from \"~/foundation/Jss/components/PlaceholderWrapper\";\r\nimport { default as RichTextTable } from \"~/foundation/Jss/components/RichTextTableWrapper\";\r\nimport { default as RichText } from \"~/foundation/Jss/components/RichTextWrapper\";\r\nimport { default as Text } from \"~/foundation/Jss/components/TextWrapper\";\r\nimport { default as Link } from \"./LinkWrapper\";\r\n\r\nexport const sc = {\r\n\tLink,\r\n\tImage,\r\n\tFile,\r\n\tDate,\r\n\tText,\r\n\tPlaceholder,\r\n\tAdvanceImage,\r\n\tFieldEditFrame,\r\n\tRichText,\r\n\tRichTextTable\r\n}","import { cubicBezier } from \"framer-motion\"\r\n\r\ntype AnimationOptionsProps = {\r\n ease?: string,\r\n duration?: number,\r\n delay?: number,\r\n}\r\nexport const galleryCurve = cubicBezier(0.81, 0, 0.23, 1)\r\nexport const curve = \"easeOut\" //cubicBezier(.03,.7,.57,.93) //cubicBezier(0.81, 0, 0.23, 1)\r\nexport const counterCurve = cubicBezier(.03,.7,.57,.93)\r\nexport const animationOptions = ({ ease, duration, delay }: AnimationOptionsProps) => ({ ease: ease ?? curve, duration: duration ?? 0.3, delay: delay ?? 0.2 })","import { Box, Heading, type HeadingProps } from \"@chakra-ui/react\";\r\nimport { motion, useInView } from \"framer-motion\";\r\nimport { useRef } from \"react\";\r\nimport { type TextProps } from \"~/foundation/Jss/components/TextWrapper\";\r\nimport { sc } from \"../Jss\";\r\nimport { animationOptions } from \"../Theme/variables/animation\";\r\n\r\nconst MotionText = motion(Heading)\r\n\r\ntype PresenceHeadingProps = TextProps & HeadingProps & {\r\n\tonce?: boolean\r\n\tduration?: number\r\n}\r\n\r\nexport const PresenceHeading = ({ field, size, duration, once = true, ...props }: PresenceHeadingProps) => {\r\n\tconst inViewRef = useRef(null)\r\n\tconst isInView = useInView(inViewRef, { once })\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t)\r\n\r\n}","import { Box, Text, type TextProps } from \"@chakra-ui/react\";\r\nimport { motion, useInView } from \"framer-motion\";\r\nimport { useMemo, useRef } from \"react\";\r\nimport { type TextProps as SCTextProps } from \"~/foundation/Jss/components/TextWrapper\";\r\nimport { sc } from \"../../_Base/Jss\";\r\nimport { animationOptions } from \"../Theme/variables/animation\";\r\n\r\nconst MotionText = motion(Text)\r\n\r\ntype PresenceTextProps = TextProps & SCTextProps & {\r\n\tonce?: boolean\r\n\tisRtl?: boolean\r\n\tisDate?: boolean\r\n\tchildren?: React.ReactNode\r\n}\r\n\r\nexport const PresenceText = ({ field, children, once = true, isRtl = false, isDate = false, ...props }: PresenceTextProps) => {\r\n\tconst inViewRef = useRef(null)\r\n\tconst isInView = useInView(inViewRef, { once })\r\n\r\n\tconst formattedField = useMemo(() => {\r\n\t\tif (isDate) {\r\n\t\t\tconst date = field?.value ? new Date(field.value) : new Date();\r\n\t\t\tconst options = { year: 'numeric' as const, month: 'short' as const, day: 'numeric' as const };\r\n\t\t\tconst locale = isRtl ? \"ar-EG\" : \"en-US\";\r\n\t\t\tconst formattedDate = new Intl.DateTimeFormat(locale, options).format(date);\r\n\t\t\treturn { ...field, value: formattedDate }\r\n\t\t}\r\n\t\treturn field\r\n\t}, [field, isRtl, isDate])\r\n\r\n\tif (!field && !children) return null;\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t{formattedField ? : children}\r\n\t\t\t\r\n\t\t\r\n\t)\r\n}","import { text as ThemeTextStyling } from \"../../_Base/Theme/components/Text\";\r\n\r\nexport const RichTextStyling = (isRtl: boolean) => ({\r\n\tsx: {\r\n\t\t...RichTextStylingBase(isRtl),\r\n\t},\r\n});\r\n\r\nexport const RichTextStylingBase = (isRtl: boolean) => ({\r\n\t...ThemeTextStyling(isRtl).sizes?.bodyLarge,\r\n\r\n\t'p, li': {\r\n\t\t...ThemeTextStyling(isRtl).sizes?.bodyLarge,\r\n\t\tmb: '2rem',\r\n\t\t'&:last-child': {\r\n\t\t\tmb: '0',\r\n\t\t},\r\n\t},\r\n\t\"h1, h2, h3, h4, h5, h6\": {\r\n\t\t...ThemeTextStyling(isRtl).sizes?.h3,\r\n\t\tmb: [\"2rem\", \"2rem\", \"3rem\", \"4rem\"],\r\n\t},\r\n\t'a': {\r\n\t\tposition: \"relative\",\r\n\t\tdisplay: \"inline\",\r\n\t\ttextDecoration: \"underline\",\r\n\t\tcursor: \"pointer\",\r\n\t\t\"+ h1, + h2\": {\r\n\t\t\tmt: [\"8\", null, null, \"12\"],\r\n\t\t},\r\n\t},\r\n\t'blockquote': {\r\n\t\t...ThemeTextStyling(isRtl).sizes?.h4,\r\n\t\tposition: \"relative\",\r\n\t\tm: \"2rem\",\r\n\t\tmy: \"4rem\",\r\n\t\t'&:before': {\r\n\t\t\tcontent: \"'“'\",\r\n\t\t\tfontSize: '5rem',\r\n\t\t\tcolor: \"red\",\r\n\t\t\tposition: \"absolute\",\r\n\t\t\ttop: \"-3rem\",\r\n\t\t},\r\n\t},\r\n\t'figure': {\r\n\t\tmy: [\"auto\", \"auto\", \"auto\", \"4rem\"],\r\n\t},\r\n\t'.image-image': {\r\n\t\tdisplay: \"flex\",\r\n\t\tjustifyContent: \"center\",\r\n\t\talignItems: \"center\",\r\n\t},\r\n\t'img': {\r\n\t\tm: 'auto',\r\n\t\tmy: [\"auto\", \"auto\", \"auto\", \"1rem\"],\r\n\t\tscale: [\"1\", \"1\", \"1\", \"1.1\"],\r\n\t\tmaxWidth: [\"100%\", \"100%\", \"100%\", \"130%\"],\r\n\t},\r\n\t'figcaption': {\r\n\t\t...ThemeTextStyling(isRtl).sizes?.bodySmall,\r\n\t\tcolor: \"primary.darkGrey\",\r\n\t\tmt: \"0.5rem\",\r\n\t}\r\n});","import { type Ref, type SVGProps, forwardRef, memo } from \"react\"\r\nconst SvgComponent = (\r\n\t{ fill, transform, ...props }: SVGProps & {fill?: string, transform?: string},\r\n\tref: Ref\r\n) => (\r\n\t\r\n\t\t\r\n\t\r\n)\r\nconst ForwardRef = forwardRef(SvgComponent)\r\nconst Memo = memo(ForwardRef)\r\nexport default Memo\r\n","import { Box, Button as ChakraButton, type BoxProps, type ButtonProps as ChakraButtonProps, type LinkProps } from '@chakra-ui/react';\r\nimport { useInView } from \"framer-motion\";\r\nimport { forwardRef, useRef, type ReactNode } from 'react';\r\nimport Arrow from '../Assets/icons/arrow';\r\nimport { type ButtonVariant } from '../Theme/components/Button';\r\nimport { animationOptions } from '../Theme/variables/animation';\r\nimport { MotionBox } from './motion-box';\r\n\r\ntype ButtonProps = ChakraButtonProps & LinkProps & {\r\n\ticon?: \"none\" | \"left\" | \"right\";\r\n\tvariant: ButtonVariant;\r\n\tchildren?: ReactNode;\r\n}\r\n\r\nexport const Button = ({ children, variant, icon = \"none\", ...rest }: ButtonProps) => (\r\n\t\r\n\t\t\r\n\t\t\t{icon === \"left\" && }\r\n\t\t\t{children}\r\n\t\t\t{icon === \"right\" && }\r\n\t\t\r\n\t\r\n)\r\n\r\ntype TransitionType = {\r\n\tonce?: boolean,\r\n\twrapperProps?: BoxProps\r\n}\r\n\r\nexport const PresenceButton = forwardRef(({ children, variant, wrapperProps, once = true, ...props }: ButtonProps & LinkProps & TransitionType) => {\r\n\tconst inViewRef = useRef(null)\r\n\tconst isInView = useInView(inViewRef, { once })\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t{children}\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t)\r\n})\r\n\r\nPresenceButton.displayName = \"PresenceButton\";","/**\r\n * Used in backend to whitelist sizes\r\n * When sizes are changed or added, run `npm run build`\r\n */\r\n\r\n/**\r\n * Values can be:\r\n * w (width)\r\n * h (height)\r\n * mw (max width)\r\n * mh (max height)\r\n * cw (crop width)\r\n * ch (crop height)\r\n */\r\nexport const imageSizes = {\r\n\tnone: {\r\n\t\tmw: 10,\r\n\t},\r\n\tpartners: {\r\n\t\tsm: {\r\n\t\t\tmw: 155,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tmw: 310,\r\n\t\t}\r\n\r\n\t},\r\n\tdefaultWide: { //16:9\r\n\t\tsm: {\r\n\t\t\tcw: 384,\r\n\t\t\tch: 216,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tcw: 768,\r\n\t\t\tch: 432,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tcw: 1152,\r\n\t\t\tch: 648,\r\n\t\t},\r\n\t\txl: {\r\n\t\t\tcw: 1440,\r\n\t\t\tch: 810,\r\n\t\t}\r\n\t},\r\n\tdefaultWideParallax: { //215 : 125\r\n\t\tsm: {\r\n\t\t\tcw: 384,\r\n\t\t\tch: 223,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tcw: 768,\r\n\t\t\tch: 447,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tcw: 1152,\r\n\t\t\tch: 670,\r\n\t\t},\r\n\t\txl: {\r\n\t\t\tcw: 1440,\r\n\t\t\tch: 837,\r\n\t\t},\r\n\t\txxl: {\r\n\t\t\tcw: 1760,\r\n\t\t\tch: 1023,\r\n\t\t}\r\n\t},\r\n\twide: { //215 : 100\r\n\t\tsm: {\r\n\t\t\tcw: 384,\r\n\t\t\tch: 179,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tcw: 768,\r\n\t\t\tch: 357,\r\n\t\t},\r\n\t\tlg: {\r\n\t\t\tcw: 1152,\r\n\t\t\tch: 536,\r\n\t\t},\r\n\t\txl: {\r\n\t\t\tcw: 1440,\r\n\t\t\tch: 670,\r\n\t\t}\r\n\t},\r\n\timageCarousel: {\r\n\t\tbase: {\r\n\t\t\tcw: 350,\r\n\t\t\tch: 466,\r\n\t\t},\r\n\t\tmd: {\r\n\t\t\tcw: 700,\r\n\t\t\tch: 932,\r\n\t\t},\r\n\t},\r\n\tthumbnail: {\r\n\t\tbase: {\r\n\t\t\tcw: 78,\r\n\t\t\tch: 52,\r\n\t\t},\r\n\t}\r\n\r\n}","/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport React, { type FC } from \"react\";\r\nimport { Link as ChakraLink, type LinkProps as ChakraLinkProps } from \"@chakra-ui/react\";\r\nimport {\r\n\tLink as RouterLink,\r\n\ttype LinkProps as RouterLinkProps,\r\n} from \"react-router-dom\";\r\nimport { pushDataLayer } from \"~/foundation/Tracking/GoogleTagManager\";\r\n\r\nexport type LinkProps = ChakraLinkProps & {\r\n\tref?: React.RefObject;\r\n\tto?: RouterLinkProps[\"to\"];\r\n\tsize?: string;\r\n\tvariant?: string;\r\n\tariaLabel?: string;\r\n\tlinkLabel?: string;\r\n\ttarget?: string;\r\n\tclassName?: string;\r\n\trel?: string;\r\n\tchildren?: RouterLinkProps[\"children\"];\r\n\tdownload?: boolean;\r\n\tdataLayer?: () => GTMDataLayer;\r\n};\r\n\r\nexport const Link: FC = ({\r\n\tref,\r\n\tto,\r\n\tsize,\r\n\tvariant,\r\n\tariaLabel,\r\n\ttarget,\r\n\tclassName,\r\n\trel,\r\n\tchildren,\r\n\tdownload,\r\n\tdataLayer,\r\n\t...rest\r\n}) => {\r\n\tconst anchorRef = ref ?? React.createRef();\r\n\r\n\treturn (\r\n\t\t {\r\n\t\t\t\t\tpushDataLayer(dataLayer);\r\n\t\t\t\t},\r\n\t\t\t})}\r\n\t\t\t{...rest}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t\r\n\t);\r\n};\r\n","import { type FC } from 'react';\r\nimport { Link as SitecoreLink } from '@sitecore-jss/sitecore-jss-react'; // eslint-disable-line no-restricted-imports\r\nimport { type LinkFieldValue, useSitecoreContext } from \"~/foundation/Jss\";\r\nimport type { LinkProps as SitecoreLinkProps } from '@sitecore-jss/sitecore-jss-react/types/components/Link';\r\nimport type { Optional } from \"utility-types\";\r\nimport { Link as ChakraLink } from \"@chakra-ui/react\";\r\nimport { Link } from \"../Components/Link\";\r\n\r\nexport type LinkProps = Optional & {\r\n\tvariant?: string;\r\n\tsize?: string;\r\n\tbgColor?: string;\r\n\tcolor?: string;\r\n\tbgColorHover?: string;\r\n\tariaLabel?: string;\r\n\tdataLayer?: () => GTMDataLayer;\r\n}\r\n\r\n/** React component that turns Sitecore link values that start with / into react-router route links */\r\nconst RoutableSitecoreLink: FC = (props) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\tconst editable = props.editable ?? true;\r\n\tconst value = props.field?.value as LinkFieldValue | undefined;\r\n\tconst href = value?.href;\r\n\tconst hasValidHref = props.field?.value && href;\r\n\tconst isEditing = editable && (props.field?.editableFirstPart || props.field?.editableLastPart);\r\n\r\n\tif (!hasValidHref && !sitecoreContext.pageEditing) {\r\n\t\treturn <>;\r\n\t}\r\n\r\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n\tconst { variant, ariaLabel, color, ...sitecoreProps } = props;\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t{!isEditing\r\n\t\t\t\t?\r\n\t\t\t\t\r\n\t\t\t\t\t{props.children || value?.text || href || \"\"}\r\n\t\t\t\t\r\n\t\t\t\t:\r\n\t\t\t\t\r\n\t\t\t\t\t{/*eslint-disable-next-line*/}\r\n\t\t\t\t\t{/*@ts-ignore*/}\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t\r\n\t);\r\n};\r\n\r\n\r\n\r\nexport default RoutableSitecoreLink;","import { type FC } from \"react\";\r\nimport { useSitecoreContext } from \"@sitecore-jss/sitecore-jss-react\"; // eslint-disable-line no-restricted-imports\r\nimport RoutableSitecoreLink, { type LinkProps } from \"./RoutableSitecoreLink\";\r\n\r\nconst LinkWrapper: FC = (props) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\r\n\tif (!props?.field && !sitecoreContext.pageEditing) {\r\n\t\treturn <>;\r\n\t}\r\n\r\n\treturn ;\r\n};\r\n\r\nexport default LinkWrapper;","import { Placeholder } from \"~/foundation/Jss/components\";\r\nimport { default as Image } from \"~/foundation/Jss/components/ImageWrapper\";\r\nimport { default as RichText } from \"~/foundation/Jss/components/RichTextWrapper\";\r\nimport { default as File } from \"~/foundation/Jss/components/FileWrapper\";\r\nimport { default as Date } from \"~/foundation/Jss/components/DateWrapper\";\r\nimport { AdvanceImage } from \"~/foundation/Jss/components/AdvanceImage\";\r\nimport { default as Text } from \"~/foundation/Jss/components/TextWrapper\";\r\nimport { default as Link } from \"./LinkWrapper\";\r\n\r\nexport const sc = {\r\n\tPlaceholder,\r\n\tImage,\r\n\tText,\r\n\tRichText,\r\n\tAdvanceImage,\r\n\tLink,\r\n\tFile,\r\n\tDate,\r\n}","import { Icon, forwardRef, type IconProps } from \"@chakra-ui/react\";\r\n\r\nexport interface BundleIconProps extends IconProps {\r\n\tname: \"arrow-left\" | \"checkmark\" | \"chevron-down\" | \"chevron-left\" | \"close\" |\r\n\t\"download\" | \"facebook\" | \"grid\" | \"menu\" | \"minus\"\r\n\t| \"play\" | \"plus\" | \"search\" | \"slider-horizontal\" | \"upload\" | \"whatsapp\"\r\n\t| \"x\" | \"youtube\" | \"qafilah-logo\" | \"quote\" | \"listen\" | \"pause\";\r\n\tsize?: string | (string | number | null)[] | number;\r\n\tisRtl?: boolean;\r\n}\r\n\r\nconst BundleIcon = forwardRef(\r\n\t({ name, isRtl, ...props }, ref) => {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t);\r\n\t}\r\n);\r\nexport default BundleIcon;\r\n","import { Box, Button as ChakraButton, type ButtonProps as ChakraButtonProps, useStyleConfig, Text } from \"@chakra-ui/react\";\r\nimport BundleIcon, { type BundleIconProps } from \"../bundleIcon\";\r\nimport { Link, type LinkProps } from \"../Link\";\r\nimport { colors } from \"../../Theme/variables/colors\";\r\nimport { useTranslation } from \"~/foundation/Dictionary\";\r\nimport type { GlobalDictionary } from \"../../../dictionary\";\r\nimport { type ColorThemeId } from \"../../Theme\";\r\nimport { getColorTheme } from \"../../Theme/getColorTheme\";\r\n\r\n// Define a custom type for the size prop\r\nexport type CustomButtonSize = 'lg' | 'md';\r\n\r\n// Extend ChakraButtonProps with the custom size type\r\nexport type ButtonProps = Omit & {\r\n\tsize?: CustomButtonSize;\r\n};\r\n\r\nexport type ButtonIconProps = ButtonProps & {\r\n\ticon: BundleIconProps['name'];\r\n\ticonPosition?: \"before\" | \"after\";\r\n\tisSidePadding?: boolean;\r\n\ticonSize?: string;\r\n\treversed?: boolean;\r\n};\r\n\r\nexport type LinkButtonProps = LinkProps & ButtonProps & {\r\n\ttheme?: ColorThemeId;\r\n}\r\n\r\nexport type LinkTagButtonProps = LinkButtonProps & { theme?: ColorThemeId };\r\n\r\nexport type LinkButtonIconProps = LinkButtonProps & {\r\n\ticon: BundleIconProps['name'];\r\n\ticonPosition?: \"before\" | \"after\";\r\n\tisSidePadding?: boolean;\r\n};\r\n\r\nexport type ReadmoreButtonProps = ButtonProps & {\r\n\tbeforeText?: string;\r\n};\r\n\r\nexport type ReadmoreLinkProps = LinkButtonProps & ReadmoreButtonProps;\r\n\r\nconst Button = ({\r\n\tchildren,\r\n\t...rest\r\n}: ButtonProps) => {\r\n\treturn (\r\n\t\t\r\n\t\t\t{children}\r\n\t\t\r\n\t)\r\n};\r\n\r\nconst ButtonIcon = ({\r\n\tchildren,\r\n\ticon,\r\n\ticonPosition = \"before\",\r\n\tisSidePadding = true,\r\n\ticonSize,\r\n\t...rest\r\n}: ButtonIconProps) => {\r\n\tconst { size, reversed } = rest;\r\n\tlet iSize = size === 'lg' ? '1.5em' : '1.25em';\r\n\tif (iconSize) {\r\n\t\tiSize = iconSize\r\n\t}\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t{children && reversed ? \r\n\t\t\t\t\t{children}\r\n\t\t\t\t : null}\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t{children && !reversed ? \r\n\t\t\t\t{children}\r\n\t\t\t : null}\r\n\t\t\r\n\t)\r\n};\r\n\r\nconst LinkButton: React.FC = ({\r\n\tvariant,\r\n\tsize,\r\n\tchildren,\r\n\ttheme,\r\n\t...rest\r\n}) => {\r\n\tconst styles = useStyleConfig(\"LinkButton\", { variant, size, ...rest });\r\n\tconst { tags } = getColorTheme(theme).colors;\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t{children}\r\n\t\t\t\r\n\t\t\r\n\t);\r\n};\r\n\r\nconst LinkButtonIcon: React.FC = (\r\n\t{ variant, size, children, icon, iconPosition = \"before\", isSidePadding = true, ...rest }) => {\r\n\tconst styles = useStyleConfig(\"LinkButton\", { variant, size, ...rest });\r\n\tconst iconSize = size === 'lg' ? '1.5em' : '1.25em';\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t{children ? \r\n\t\t\t\t\t{children}\r\n\t\t\t\t : null}\r\n\t\t\t\r\n\t\t\r\n\t);\r\n};\r\n\r\nconst ReadmoreButton: React.FC = ({\r\n\tbeforeText,\r\n\tchildren,\r\n\t...rest\r\n}) => {\r\n\tconst [t] = useTranslation();\r\n\tconst before = beforeText ?? t('button.readmore.beforeText');\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t{before}\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t{children}\r\n\t\t\t\r\n\t\t\r\n\t)\r\n}\r\n\r\nconst ReadmoreLink: React.FC = ({\r\n\tbeforeText,\r\n\tchildren,\r\n\t...rest\r\n}) => {\r\n\tconst [t] = useTranslation();\r\n\tconst before = beforeText ?? t('button.readmore.beforeText');\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t{before}\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t{children}\r\n\t\t\t\t\r\n\t\t\t\r\n\r\n\t\t\r\n\t)\r\n}\r\n\r\nexport {\r\n\tButton,\r\n\tButtonIcon,\r\n\tLinkButton,\r\n\tLinkButtonIcon,\r\n\tReadmoreButton,\r\n\tReadmoreLink,\r\n};","import { AspectRatio, Flex, Text, type ResponsiveValue } from \"@chakra-ui/react\";\r\nimport { type TextField, useSitecoreContext } from \"~/foundation/Jss\";\r\nimport { sc } from \"../../Jss\";\r\n\r\ntype ImageProps = {\r\n\taspectRatio?: ResponsiveValue;\r\n\taspectRatioContainer?: boolean;\r\n\tisDesktopAspectRatio?: boolean;\r\n\tcaption?: TextField;\r\n\tchildren: React.ReactNode;\r\n}\r\n\r\nconst Image: React.FC = ({ aspectRatio, aspectRatioContainer = true, isDesktopAspectRatio = true, caption, children }) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{aspectRatioContainer ?\r\n\t\t\t\t\r\n\t\t\t\t\t{children}\r\n\t\t\t\t\r\n\t\t\t\t:\r\n\t\t\t\tchildren\r\n\t\t\t}\r\n\t\t\t{(caption?.value || sitecoreContext.pageEditing) &&\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t}\r\n\t\t\r\n\t);\r\n}\r\n\r\nexport default Image;","import { MotionBox } from \"~/foundation/Framer/MotionBox\";\r\n\r\ntype ModuleInViewAnimationContainerProps = {\r\n\tclassName?: string;\r\n\tchildren: React.ReactNode;\r\n};\r\n\r\nconst ModuleInViewAnimationContainer = ({ className, children, ...rest }: ModuleInViewAnimationContainerProps) => {\r\n\treturn (\r\n\t\t\r\n\t\t\t{children}\r\n\t\t\r\n\t);\r\n};\r\n\r\nexport default ModuleInViewAnimationContainer;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { Skeleton } from \"@chakra-ui/react\";\r\nimport { sc } from \"../../Jss\";\r\n\r\ntype ImageSkeletonContainerProps = {\r\n\tchildren?: React.ReactNode;\r\n\tadvancedImageProps?: object;\r\n}\r\n\r\nconst ImageSkeletonContainer = ({ children, advancedImageProps }: ImageSkeletonContainerProps) => {\r\n\tconst [isImgLoaded, setIsImgLoaded] = useState(false);\r\n\tconst [renderedChildren, setRenderedChildren] = useState(null);\r\n\r\n\tconst renderChildren = () => {\r\n\t\treturn React.Children?.map(children, (child: React.ReactNode) => {\r\n\t\t\treturn React.cloneElement(child as React.ReactElement, {\r\n\t\t\t\tonLoad: handleImgLoad,\r\n\t\t\t\topacity: isImgLoaded ? 1 : 0,\r\n\t\t\t\ttransition: \"opacity 0.3s ease\",\r\n\t\t\t})\r\n\t\t})\r\n\t}\r\n\r\n\tuseEffect(() => {\r\n\t\tsetRenderedChildren(renderChildren());\r\n\t}, [children, isImgLoaded]);\r\n\r\n\tconst handleImgLoad = () => {\r\n\t\tsetIsImgLoaded(true);\r\n\t};\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t{!isImgLoaded && }\r\n\t\t\t{children ?\r\n\t\t\t\trenderedChildren\r\n\t\t\t\t:\r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t\r\n\t)\r\n}\r\n\r\nexport default ImageSkeletonContainer;\r\n\r\n","import {\r\n\tA11y as CarouselA11y,\r\n\tNavigation as CarouselNavigation,\r\n\tPagination as CarouselPagination,\r\n\tAutoplay as CarouselAutoplay,\r\n\tEffectFade as CarouselEffectFade,\r\n\tEffectCreative as CarouselEffectCreative,\r\n\tScrollbar as CarouselScrollbar\r\n} from \"swiper/modules\";\r\n\r\nimport {\r\n\ttype SwiperClass as CarouselClass,\r\n\ttype SwiperProps as CarouselProps,\r\n\ttype SwiperSlideProps as CarouselSlideProps,\r\n\tSwiper,\r\n\tSwiperSlide,\r\n} from \"swiper/react\";\r\n\r\nimport { chakra } from \"@chakra-ui/react\";\r\n\r\nimport \"swiper/css\";\r\nimport \"swiper/css/scrollbar\";\r\nimport \"swiper/css/a11y\";\r\nimport \"swiper/css/navigation\";\r\nimport \"swiper/css/effect-fade\";\r\n\r\nconst Carousel = chakra(Swiper);\r\nconst CarouselSlide = chakra(SwiperSlide);\r\n\r\n// https://github.com/nolimits4web/swiper/issues/4413\r\nCarouselSlide.displayName = \"SwiperSlide\";\r\n\r\nexport {\r\n\tCarousel,\r\n\tCarouselA11y,\r\n\tCarouselNavigation,\r\n\tCarouselSlide,\r\n\tCarouselPagination,\r\n\tCarouselAutoplay,\r\n\tCarouselEffectFade,\r\n\tCarouselEffectCreative,\r\n\tCarouselScrollbar\r\n};\r\nexport type { CarouselClass, CarouselProps, CarouselSlideProps };\r\n\r\n","import { Tag as ChakraTag, TagLabel, type TagProps as ChakraTagProps } from \"@chakra-ui/react\"\r\nimport { useColorTheme } from \"../../Theme/ColorThemeContext\";\r\nimport { type TextField } from \"~/foundation/Jss\";\r\n// import { useColorTheme } from \"../../Theme/ColorThemeContext\";\r\n\r\nexport interface TopicTag {\r\n\tid: string;\r\n\tname: string;\r\n\tfields: {\r\n\t\ttitle: TextField;\r\n\t\ttheme: {\r\n\t\t\tvalue: string;\r\n\t\t};\r\n\t};\r\n}\r\n\r\nexport type TagProps = ChakraTagProps\r\n\r\nconst Tag = ({\r\n\tvariant,\r\n\tchildren,\r\n\t...props\r\n}: TagProps) => {\r\n\tconst { backgroundColor, color } = useColorTheme().colors.tags;\r\n\t// Determine props conditionally based on the variant\r\n\tconst conditionalProps = variant === 'colored'\r\n\t\t? { bg: backgroundColor, color: color }\r\n\t\t: {};\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{children}\r\n\t\t\r\n\t)\r\n}\r\n\r\nexport { Tag }","export const formatDate = (input: Date | string): string => {\r\n\tconst date = typeof input === \"string\" ? new Date(input) : input;\r\n\r\n\tif (isNaN(date.getTime())) {\r\n\t\tthrow new Error(\"Invalid date input\");\r\n\t}\r\n\r\n\tconst options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };\r\n\treturn date.toLocaleDateString('ar-EG', options);\r\n}","import { type GlobalDictionary } from \"../../dictionary\";\r\nimport { useTranslation } from \"~/foundation/Dictionary\";\r\n//import { convertNumbersToAr } from \"./convertNumbersToAr\";\r\n\r\nconst getTimeUnitText = (singularUnit: string, twoUnit: string, pluralUnit: string, value: number) => {\r\n\tif (value === 1) {\r\n\t\treturn singularUnit;\r\n\t}\r\n\r\n\tif (value === 2) {\r\n\t\treturn twoUnit;\r\n\t}\r\n\r\n\t//return convertNumbersToAr(`${value} ${value > 10 ? singularUnit : pluralUnit}`);\r\n\treturn `${value} ${value > 10 ? singularUnit : pluralUnit}`;\r\n}\r\n\r\nexport const formatTime = (minutes: number): string => {\r\n\tconst [t] = useTranslation();\r\n\r\n\tif (minutes < 1) {\r\n\t\tconst seconds = Math.round(minutes * 60);\r\n\t\treturn getTimeUnitText(t(\"time.second\"), t(\"time.twoSeconds\"), t(\"time.seconds\"), seconds);\r\n\t}\r\n\r\n\tif (minutes < 60) {\r\n\t\treturn getTimeUnitText(t(\"time.minute\"), t(\"time.twoMinutes\"), t(\"time.minutes\"), minutes);\r\n\t}\r\n\r\n\tconst hours = Math.floor(minutes / 60);\r\n\tconst mins = minutes % 60;\r\n\r\n\tconst hourText = getTimeUnitText(t(\"time.hour\"), t(\"time.twoHours\"), t(\"time.hours\"), hours);\r\n\tconst minuteText = getTimeUnitText(t(\"time.minute\"), t(\"time.twoMinutes\"), t(\"time.minutes\"), mins);\r\n\r\n\treturn `${hours !== 0 ? hourText : ''} ${mins !== 0 ? t(\"general.and\") : ''} ${mins !== 0 ? minuteText : ''}`;\r\n}","import { Box, type BoxProps, useStyleConfig } from \"@chakra-ui/react\"\r\nimport { type CustomButtonSize } from \"./Button\";\r\nimport BundleIcon, { type BundleIconProps } from \"../bundleIcon\";\r\n\r\nexport type ChipProps = BoxProps & {\r\n\tsize?: CustomButtonSize;\r\n}\r\n\r\nexport type ChipIconProps = ChipProps & {\r\n\ticon: BundleIconProps['name'];\r\n}\r\n\r\nconst Chip: React.FC = ({ variant, size, children, ...rest }) => {\r\n\tconst styles = useStyleConfig(\"Chip\", { variant, size, ...rest });\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{children}\r\n\t\t\r\n\t);\r\n};\r\n\r\nconst ChipIcon: React.FC = (\r\n\t{ variant, size, children, icon, ...rest }) => {\r\n\tconst styles = useStyleConfig(\"Chip\", { variant, size, ...rest });\r\n\tconst iconSize = size === 'lg' ? '1.5em' : '1.25em';\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t{children ? \r\n\t\t\t\t{children}\r\n\t\t\t : null}\r\n\t\t\r\n\t);\r\n};\r\n\r\nexport { Chip, ChipIcon }\r\n","import { useState, useEffect } from \"react\";\r\nimport { Box, Flex, Button, List, ListItem, Text } from \"@chakra-ui/react\";\r\nimport { type GlobalDictionary } from \"../../dictionary\";\r\nimport { useTranslation } from \"~/foundation/Dictionary\";\r\nimport BundleIcon from \"./bundleIcon\";\r\nimport { Chip } from \"./UI/Chip\";\r\nimport { useSitecoreContext } from \"~/foundation/Jss\";\r\n\r\nexport type sitecoreContextType = {\r\n\tcustom: {\r\n\t\tprojectData?: {\r\n\t\t\tshareNames?: string[];\r\n\t\t};\r\n\t};\r\n};\r\n\r\ntype ShareBannerProps = {\r\n\tcomponentName?: string,\r\n\tisDarkBgTheme?: boolean,\r\n}\r\n\r\nconst ShareIconsList = ({ componentName = 'share-button', isDarkBgTheme = false }: ShareBannerProps) => {\r\n\tconst [documentURL, setDocumentURL] = useState(\"\");\r\n\tconst pageUrl = encodeURIComponent(documentURL);\r\n\tconst POPUP_SIZE = 570;\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\tconst projectData = (sitecoreContext as sitecoreContextType).custom.projectData;\r\n\tconst socialMediaList = projectData?.shareNames ?? [];\r\n\r\n\tconst socialWindow = (url: string) => {\r\n\t\tconst left = (screen.width - POPUP_SIZE) / 2;\r\n\t\tconst top = (screen.height - POPUP_SIZE) / 2;\r\n\t\tconst params = `menubar=no,toolbar=no,status=no,width=570,height=570,top=${top},left=${left}`;\r\n\t\twindow.open(url, \"NewWindow\", params);\r\n\t};\r\n\r\n\tconst SocialMediaIcons: { [key: string]: { icon: 'x' | 'whatsapp' | 'facebook', url: string } } = {\r\n\t\tTwitter: {\r\n\t\t\ticon: \"x\",\r\n\t\t\turl: `https://twitter.com/intent/tweet?url=${pageUrl}`\r\n\t\t},\r\n\t\tWhatsapp: {\r\n\t\t\ticon: \"whatsapp\",\r\n\t\t\turl: `https://wa.me/?text=${pageUrl}`\r\n\t\t},\r\n\t\tFacebook: {\r\n\t\t\ticon: \"facebook\",\r\n\t\t\turl: `https://www.facebook.com/sharer/sharer.php?u=${pageUrl}`\r\n\t\t}\r\n\t};\r\n\r\n\tconst getIconColor = () => {\r\n\t\tif (componentName === 'share-button') {\r\n\t\t\treturn isDarkBgTheme ? \"primary.black\" : \"primary.white\";\r\n\t\t}\r\n\t\treturn isDarkBgTheme ? \"primary.white\" : \"primary.black\";\r\n\t}\r\n\r\n\r\n\tuseEffect(() => {\r\n\t\tsetDocumentURL(document.URL);\r\n\t}, []);\r\n\r\n\treturn (\r\n\t\tsocialMediaList.map((item: string) => {\r\n\t\t\treturn (\r\n\t\t\t\t\r\n\t\t\t\t\t socialWindow(SocialMediaIcons[item].url)}\r\n\t\t\t\t\t\t{...SocialMediaIcons[item].icon === \"whatsapp\" && { dataAction: \"share/whatsapp/share\" }}\r\n\t\t\t\t\t>\r\n\r\n\t\t\t\t\t\t{item && }\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t)\r\n\t\t})\r\n\r\n\t)\r\n}\r\n\r\nexport const ShareButton = ({ isDarkBgTheme = false }: ShareBannerProps) => {\r\n\tconst [t] = useTranslation();\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\tconst projectData = (sitecoreContext as sitecoreContextType).custom.projectData;\r\n\tconst socialMediaList = projectData?.shareNames ?? [];\r\n\r\n\treturn (\r\n\t\tsocialMediaList && socialMediaList.length > 0 && \r\n\t\t\t{t('socialMedia.shareLabel')}\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t)\r\n}\r\n\r\nexport const ShareBanner = ({ isDarkBgTheme = false }: ShareBannerProps) => {\r\n\tconst [t] = useTranslation();\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\tconst projectData = (sitecoreContext as sitecoreContextType).custom.projectData;\r\n\tconst socialMediaList = projectData?.shareNames ?? [];\r\n\r\n\treturn (\r\n\t\tsocialMediaList && socialMediaList.length > 0 && \r\n\t\t\t{t('socialMedia.shareLabel')}\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t)\r\n}\r\n","import { Box, Text } from \"@chakra-ui/react\";\r\nimport { type BreadcrumbItem } from \"~/foundation/SitecoreContent/generated-types\";\r\nimport { Link } from \"../Link\";\r\n\r\nconst Breadcrumbs = ({\r\n\tbreadcrumbItems,\r\n\tisDark\r\n}: {\r\n\tbreadcrumbItems: BreadcrumbItem[],\r\n\tisDark?: boolean\r\n}) => {\r\n\treturn (\r\n\t\t

\r\n\t)\r\n}\r\n\r\nexport { Breadcrumbs }","import { type FC } from \"react\";\r\nimport { Box, Container, Heading } from \"@chakra-ui/react\";\r\nimport { Breadcrumbs } from \"../Beadcrumbs/Breadcrumbs\";\r\nimport { type BreadcrumbItem } from \"~/foundation/SitecoreContent/generated-types\";\r\nimport { type MainNavigationItemModel } from \"~/feature/Navigation/generated-types\";\r\nimport { LinkButton } from \"../UI/Button\";\r\nimport { useLocation } from \"react-router-dom\";\r\nimport { type ColorThemeId } from \"../../Theme\";\r\nimport { getColorTheme } from \"../../Theme/getColorTheme\";\r\n\r\ntype PageHeaderProps = {\r\n\theadline: string;\r\n\ttrumpet?: string;\r\n\tbreadcrumbItems: BreadcrumbItem[];\r\n\tmenuItems?: MainNavigationItemModel[] | undefined;\r\n\tbgColor?: string;\r\n\ttheme?: ColorThemeId;\r\n};\r\n\r\nconst PageHeader: FC = ({\r\n\theadline,\r\n\tbreadcrumbItems,\r\n\tmenuItems,\r\n\ttheme = \"dark_green\"\r\n}) => {\r\n\tconst location = useLocation();\r\n\tconst { isDarkBg } = getColorTheme(theme);\r\n\tconst { primaryColor } = getColorTheme(theme).colors;\r\n\tconst parentItem = breadcrumbItems.length > 1 ? breadcrumbItems[breadcrumbItems.length - 2] : null;\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\r\n\t\t\t\t{parentItem ?\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{parentItem?.title}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t: null\r\n\t\t\t\t}\r\n\t\t\t\t{headline && \r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{headline}\r\n\t\t\t\t\t\r\n\t\t\t\t}\r\n\t\t\t\t{\r\n\t\t\t\t\tmenuItems && menuItems.length > 0 ? (\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{menuItems.map((item, index) => (\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t{item.title ?? 'title missing'}\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t) : null\r\n\t\t\t\t}\r\n\t\t\t\r\n\t\t\r\n\t);\r\n};\r\n\r\nexport { PageHeader };\r\n\r\n","import { Flex, Text } from \"@chakra-ui/react\";\r\nimport { type TextField } from \"~/foundation/Jss\";\r\nimport { Link } from \"../Link\";\r\nimport { useSitecoreContext } from \"~/foundation/Jss/useSitecoreContext\";\r\nimport { pxToRem } from \"../../Utils/mapPxToRem\";\r\nexport interface AuthorInCardInfoProps {\r\n\tid?: string;\r\n\turl?: string;\r\n\tfields?: {\r\n\t\tfullName?: TextField;\r\n\t}\r\n}\r\n\r\ntype AuthorDisplayProps = {\r\n\tid?: string;\r\n\tname?: string;\r\n\turl?: string;\r\n}\r\n\r\ntype CardInfoProps = {\r\n\tid?: string;\r\n\tparams: Array;\r\n\tisDarkBgTheme: boolean;\r\n}\r\n\r\nconst CardInfo = ({ id, params, isDarkBgTheme }: CardInfoProps) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{params.map((param, index) => (\r\n\t\t\t\tparam && \r\n\t\t\t\t\t{(typeof param === 'string' || typeof param === 'number') ?\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{param}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t:\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{param?.name ?? \"\"}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t))}\r\n\r\n\t\t\r\n\t);\r\n}\r\n\r\nexport default CardInfo;","import { type ResponsiveValue, AspectRatio, Box, Container, Flex, Heading, List, ListItem, Text } from \"@chakra-ui/react\";\r\nimport { Link } from \"../Link\";\r\nimport { Tag } from \"../UI/Tag\";\r\nimport { formatDate } from \"../../Utils/formatDate\";\r\nimport CardInfo from \"./cardInfo\";\r\nimport { type TextField, type FileField, useSitecoreContext } from \"~/foundation/Jss\";\r\nimport { sc } from \"../../Jss\";\r\nimport { formatTime } from \"../../Utils/formatTime\";\r\n\r\ntype FeaturedCardContent = {\r\n\tisDarkBg?: boolean;\r\n\tcardTextColor?: string;\r\n\tid: string;\r\n\ttype?: \"article\" | \"issue\";\r\n\timage?: React.ReactNode;\r\n\timageDirection?: \"left\" | \"right\";\r\n\taspectRatio?: ResponsiveValue;\r\n\tisImageCover?: boolean;\r\n\ttrumpet?: TextField;\r\n\ttitle?: TextField;\r\n\tdescription?: TextField;\r\n\ttopics?: {\r\n\t\tid: string;\r\n\t\tname: string;\r\n\t\ttitle: string;\r\n\t\ttheme: string;\r\n\t}[];\r\n\tauthors?: {\r\n\t\tid?: string;\r\n\t\tname: string,\r\n\t\turl: string,\r\n\t}[];\r\n\tdate?: Date | string;\r\n\tarticleLength?: number;\r\n\tissueNumber?: string;\r\n\tissueMonth?: string;\r\n\tcardSpacing?: \"lg\" | \"xxl\";\r\n\tbuttons?: React.ReactNode;\r\n\toverrides?: {\r\n\t\ttrumpet?: boolean;\r\n\t\ttitle?: boolean;\r\n\t\tdescription?: boolean;\r\n\t}\r\n\tissueFile?: FileField;\r\n}\r\n\r\nexport type FeaturedCardProps = FeaturedCardContent & {\r\n\turl?: string;\r\n\turlTitle?: string;\r\n\tprimaryColor?: string;\r\n}\r\n\r\nconst FeaturedCardContent = ({ isDarkBg = true, cardTextColor, id, type = \"article\", image, imageDirection = \"right\", aspectRatio, isImageCover = true, trumpet, title, description, topics, authors, date, articleLength, issueNumber, issueMonth, buttons, overrides, ...rest }: FeaturedCardContent) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{trumpet && type !== \"issue\" && {trumpet?.value}}\r\n\t\t\t\r\n\t\t\t\t{image}\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t{(trumpet || type === \"issue\") && \r\n\t\t\t\t\t{type === \"issue\" && \r\n\t\t\t\t\t\t{issueNumber && {issueNumber}}\r\n\t\t\t\t\t\t{(issueMonth || date) && }\r\n\t\t\t\t\t}\r\n\t\t\t\t\t{(trumpet?.value || sitecoreContext.pageEditing) && \r\n\t\t\t\t\t\t{overrides?.trumpet ?\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t:\r\n\t\t\t\t\t\t\ttrumpet?.value\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\t{topics && topics.length > 0 && \r\n\t\t\t\t\t\t{topics.map((topic) => (\r\n\t\t\t\t\t\t\ttopic.title !== \"\" && \r\n\t\t\t\t\t\t\t\t{topic.title}\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t}\r\n\t\t\t\t\t{(title?.value || sitecoreContext.pageEditing) && \r\n\t\t\t\t\t\t{overrides?.title ?\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t:\r\n\t\t\t\t\t\t\ttitle?.value\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t\t{(description?.value || sitecoreContext.pageEditing) && \r\n\t\t\t\t\t\t{overrides?.description ?\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t:\r\n\t\t\t\t\t\t\tdescription?.value\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t\t{(authors || date || articleLength) && type !== \"issue\" && \r\n\t\t\t\t\t\t author.name) ?? []), date ? formatDate(date) : undefined, articleLength ? formatTime(articleLength) : undefined]} isDarkBgTheme={isDarkBg} />\r\n\t\t\t\t\t}\r\n\t\t\t\t\t{buttons && \r\n\t\t\t\t\t\t{buttons}\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t)\r\n}\r\n\r\nconst FeaturedCard = ({ primaryColor = \"secondary.darkGreen\", url, urlTitle, type = \"article\", title, cardSpacing = \"lg\", ...rest }: FeaturedCardProps) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t{\r\n\t\t\t\t\turl && type !== \"issue\" && !sitecoreContext.pageEditing ?\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t:\r\n\t\t\t\t\t\t\r\n\t\t\t\t}\r\n\t\t\t\r\n\t\t\r\n\t)\r\n}\r\n\r\nexport default FeaturedCard;","import { Flex, Heading, Box } from \"@chakra-ui/react\";\r\nimport { LinkButtonIcon } from \"./UI/Button\";\r\nimport { useSitecoreContext, type TextField, type LinkField } from \"~/foundation/Jss\";\r\nimport { sc } from \"../Jss\"\r\nimport sizes from \"../Theme/variables/sizes\";\r\n\r\ntype ModuleHeaderProps = {\r\n\tisEditable?: boolean;\r\n\ttitle?: TextField | {\r\n\t\tvalue: string;\r\n\t};\r\n\ttitleSize?: \"sm\" | \"lg\";\r\n\tlink?: LinkField | {\r\n\t\tvalue?: {\r\n\t\t\thref?: string;\r\n\t\t\ttext?: string;\r\n\t\t\ttarget?: string;\r\n\t\t}\r\n\t};\r\n\torientation?: \"horizontal\" | \"vertical\";\r\n\tisDarkBgTheme?: boolean;\r\n\tisSticky?: boolean;\r\n}\r\n\r\nexport const ModuleHeader = ({ isEditable = true, title, titleSize = \"sm\", link, orientation = \"horizontal\", isDarkBgTheme = true, isSticky = false }: ModuleHeaderProps) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\r\n\treturn (\r\n\t\t(title?.value || link?.value?.href || sitecoreContext.pageEditing) && \r\n\t\t\t\r\n\t\t\t\t{(title?.value || sitecoreContext.pageEditing) && \r\n\t\t\t\t\t{isEditable ? : title?.value}\r\n\t\t\t\t}\r\n\t\t\t\t{link?.value?.href && (!sitecoreContext.pageEditing || (sitecoreContext.pageEditing && !isEditable)) &&\r\n\t\t\t\t\t{link?.value.text}\r\n\t\t\t\t}\r\n\t\t\t\t{sitecoreContext.pageEditing && isEditable &&\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t}\r\n\t\t\t\r\n\t\t\r\n\t)\r\n}","import { useState, useEffect } from \"react\";\r\nimport { Box, Flex, Container, Button } from \"@chakra-ui/react\";\r\nimport {\r\n\tCarousel,\r\n\tCarouselA11y,\r\n\ttype CarouselClass,\r\n\tCarouselNavigation,\r\n\tCarouselScrollbar,\r\n} from \"../Carousel/carousel\";\r\nimport BundleIcon from \"../bundleIcon\";\r\nimport { useTranslation } from \"~/foundation/Dictionary\";\r\nimport { type GlobalDictionary } from \"../../../dictionary\";\r\n\r\ntype ListCarouselProps = {\r\n\tchildren: React.ReactNode,\r\n\tid: string,\r\n\tisDarkBg?: boolean,\r\n\tslidesPerView?: number,\r\n\tbreakpoints?: Record,\r\n\tnumberOfItems: number,\r\n\tmaxItems: number,\r\n}\r\n\r\nconst ListCarousel = ({ children, id, isDarkBg = false, slidesPerView = 1, breakpoints, numberOfItems, maxItems, ...rest }: ListCarouselProps) => {\r\n\tconst [swiperInstance, setSwiperInstance] = useState(null);\r\n\tconst [isClient, setIsClient] = useState(false);\r\n\tconst [t] = useTranslation();\r\n\r\n\tuseEffect(() => {\r\n\t\tsetIsClient(true);\r\n\t}, []);\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t{isClient &&\r\n\t\t\t\t\t maxItems && {\r\n\t\t\t\t\t\t\tscrollbar: {\r\n\t\t\t\t\t\t\t\tel: `#${id} .swiper-scrollbar`,\r\n\t\t\t\t\t\t\t\tdraggable: true,\r\n\t\t\t\t\t\t\t\tenabled: numberOfItems > maxItems,\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tsx={{\r\n\t\t\t\t\t\t\twidth: \"100%\",\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t//overflowX=\"auto\"\r\n\t\t\t\t\t\tpl={[\"sm!important\", null, null, \"lmd!important\"]}\r\n\t\t\t\t\t\t{...rest}>\r\n\t\t\t\t\t\t{children}\r\n\t\t\t\t\t\r\n\t\t\t\t}\r\n\t\t\t\r\n\t\t\t maxItems ? \"block\" : \"none\"]}>\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t);\r\n};\r\n\r\nexport default ListCarousel;","import { AspectRatio, Box, Flex, Heading, List, ListItem, Text, type ResponsiveValue } from \"@chakra-ui/react\";\r\nimport { formatDate } from \"../../Utils/formatDate\";\r\nimport CardInfo from \"./cardInfo\";\r\nimport { ChipIcon } from \"../UI/Chip\";\r\nimport { Tag } from \"../UI/Tag\"\r\nimport { LazyImage } from \"~/foundation/Components/Image/LazyImage\";\r\nimport { pxToRem } from \"../../Utils/mapPxToRem\";\r\nimport { formatTime } from \"../../Utils/formatTime\";\r\nimport { Link } from \"../Link\";\r\nimport { transparentize } from \"polished\";\r\nimport { getColorTheme } from \"../../Theme/getColorTheme\";\r\nimport { type ColorThemeId } from \"../../Theme/themes\";\r\n\r\n\r\nexport type CardTopicProps = {\r\n\tid: string;\r\n\ttitle: string;\r\n\ttheme: string;\r\n}\r\n\r\nexport type CardAuthorProps = {\r\n\tid: string;\r\n\tfullName: string;\r\n}\r\n\r\ntype CardContentProps = {\r\n\tid: string;\r\n\ttitle?: string;\r\n\tteaser?: string;\r\n\ttopics?: CardTopicProps[];\r\n\tisTopicColored?: boolean;\r\n\tauthors?: CardAuthorProps[];\r\n\tdate?: Date | string;\r\n\tarticleLength?: string | number;\r\n\tisDarkBgTheme: boolean;\r\n\tissueMonth?: string;\r\n}\r\n\r\ntype CardVariant = \"default\" | \"search\"\r\n\r\ntype CardSharedProps = CardContentProps & {\r\n\timage?: {\r\n\t\turl: string;\r\n\t\talt: string;\r\n\t};\r\n\taspectRatio?: ResponsiveValue;\r\n\thoverColor?: string;\r\n\tisMobileCards?: boolean;\r\n\tvariant?: CardVariant;\r\n}\r\n\r\ntype CardProps = CardSharedProps & {\r\n\turl?: string;\r\n\ttype?: string;\r\n}\r\n\r\nexport const getAspectRatio = (index: number, isSlider: boolean = false) => {\r\n\tif (!isSlider) {\r\n\t\tif (index === 0 || (index + 1) % 6 === 0 || index % 6 === 0) return 3 / 2;\r\n\t}\r\n\tif (index % 3 === 0 && isSlider) return 3 / 2;\r\n\tif (index - 1 === 0 || (index + 2) % 6 === 0 || (index - 1) % 6 === 0) return 16 / 9;\r\n\treturn 9 / 8;\r\n};\r\n\r\nconst CardContent = ({ id, title, teaser, topics, authors, date, articleLength, isDarkBgTheme, isTopicColored = true }: CardContentProps) => {\r\n\tconst getTagVariant = () => {\r\n\t\tif (isTopicColored) return \"colored\";\r\n\t\treturn isDarkBgTheme ? \"light\" : \"dark\";\r\n\t}\r\n\r\n\tconst getTagTheme = (theme?: ColorThemeId) => {\r\n\t\tconst { colors: { tags } } = getColorTheme(theme);\r\n\t\treturn tags;\r\n\t}\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t{topics && \r\n\t\t\t\t{topics?.map((topic) => (\r\n\t\t\t\t\ttopic.title && \r\n\t\t\t\t\t\t{topic.title}\r\n\t\t\t\t\t\r\n\t\t\t\t))}\r\n\t\t\t}\r\n\t\t\t{title && {title}}\r\n\t\t\t{teaser && {teaser}}\r\n\t\t\t{(authors || date || articleLength) && \r\n\t\t\t\t author.fullName) ?? []), date ? formatDate(date) : undefined, articleLength ? formatTime(Number(articleLength)) : undefined]} isDarkBgTheme={isDarkBgTheme} />\r\n\t\t\t}\r\n\t\t\r\n\t)\r\n}\r\n\r\nconst PodcastCard = ({ id, title, image, topics, authors, date, aspectRatio = 1, articleLength, isDarkBgTheme = true }: CardSharedProps) => {\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t)\r\n}\r\n\r\nconst IssueCard = ({ id, title, image, date, aspectRatio = 1, isDarkBgTheme = true, issueMonth }: CardSharedProps) => {\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t{image && image.url !== \"\" &&\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t}\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t{(issueMonth || date) && \r\n\t\t\t\t\t\t\r\n\t\t\t\t\t}\r\n\t\t\t\t\t{title && {title}}\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t)\r\n}\r\n\r\nconst ArticleCard = ({ variant = \"default\", id, title, teaser, image, topics, authors, date, aspectRatio = 3 / 2, hoverColor = \"transparent\", articleLength, isDarkBgTheme = false, isMobileCards = true, isTopicColored = true }: CardSharedProps) => {\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t{image && image.url !== \"\" &&\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t}\r\n\t\t\t\t{image?.url === \"\" &&\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t}\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t)\r\n}\r\n\r\nconst Card = ({ id, type = \"article\", url, title, ...rest }: CardProps) => {\r\n\treturn (\r\n\t\t\r\n\t\t\t{type === \"article\" && }\r\n\t\t\t{type === \"podcast\" && }\r\n\t\t\t{type === \"issue\" && }\r\n\t\t\r\n\t)\r\n}\r\n\r\nexport default Card;","import { useEffect, useState } from \"react\";\r\nimport { type ItemReference } from \"~/foundation/Jss\";\r\nimport { type SearchFilterModel } from \"~/feature/Search/generated-types\";\r\nimport { searchContentService } from \"~/feature/Search/services/searchContentService\";\r\nimport { type ISiteSearchResultItemModel } from \"../ArticleList\";\r\n\r\ninterface SearchComponentProps {\r\n\tsearchRoot: string;\r\n\tonResultsChange?: (results: ISiteSearchResultItemModel[] | null) => void;\r\n\tonTotalResultsChange: (count: number) => void;\r\n\tonLoadingChange?: (loading: boolean) => void;\r\n\tpageSize?: number;\r\n}\r\n\r\nexport const useSearch = ({\r\n\tsearchRoot,\r\n\tonResultsChange,\r\n\tonTotalResultsChange,\r\n\tonLoadingChange,\r\n\tpageSize = 12\r\n}: SearchComponentProps) => {\r\n\tconst [searchQuery, setSearchQuery] = useState(\"\");\r\n\tconst [categories, setCategories] = useState([]);\r\n\tconst [page, setPage] = useState(1);\r\n\tconst [initialLoad, setInitialLoad] = useState(true);\r\n\tconst defaultPageSize = 12;\r\n\tconst [loading, setLoading] = useState(false);\r\n\r\n\tconst handleSearch = () => {\r\n\t\tonLoadingChange && onLoadingChange(true);\r\n\t\tsetLoading(true);\r\n\t\tsetInitialLoad(false);\r\n\r\n\t\tconst apiQueryStrings: SearchFilterModel = {\r\n\t\t\tquery: searchQuery,\r\n\t\t\tpage,\r\n\t\t\tpageSize: pageSize ?? defaultPageSize,\r\n\t\t\tsort: 'date',\r\n\t\t\tcategories: categories.map(c => c.id).join('|'),\r\n\t\t};\r\n\r\n\t\tsearchContentService.allSearch(searchRoot, apiQueryStrings)\r\n\t\t\t.then(response => {\r\n\t\t\t\tif (response && response.statusCode === 200 && response.data) {\r\n\t\t\t\t\tif (Array.isArray(response.data.results)) {\r\n\t\t\t\t\t\tonResultsChange && onResultsChange(response.data.results.map(result => ({\r\n\t\t\t\t\t\t\t...result,\r\n\t\t\t\t\t\t\ttopicTags: [] // Add missing required topicTags property\r\n\t\t\t\t\t\t})));\r\n\t\t\t\t\t\tonTotalResultsChange(response.data.totalResults);\r\n\t\t\t\t\t\tonLoadingChange && onLoadingChange(false);\r\n\t\t\t\t\t\tsetLoading(false);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t\t\t.catch(() => {\r\n\t\t\t\tconsole.error(\"Error fetching search results\");\r\n\t\t\t\tonLoadingChange && onLoadingChange(false);\r\n\t\t\t\tsetLoading(false);\r\n\t\t\t});\r\n\t};\r\n\r\n\tconst handleCategorySelect = (category: ItemReference) => {\r\n\t\tsetPage(1);\r\n\t\tsetCategories(prev =>\r\n\t\t\tprev.includes(category)\r\n\t\t\t\t? prev.filter(c => c !== category)\r\n\t\t\t\t: [...prev, category]\r\n\t\t);\r\n\t};\r\n\r\n\tconst resetSearch = () => {\r\n\t\tsetSearchQuery(\"\");\r\n\t\tsetCategories([]);\r\n\t\tsetPage(1);\r\n\t\tonTotalResultsChange(0);\r\n\t\tonResultsChange && onResultsChange(null);\r\n\t\tonLoadingChange && onLoadingChange(false);\r\n\t\tsetInitialLoad(true);\r\n\t};\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!initialLoad) {\r\n\t\t\thandleSearch();\r\n\t\t}\r\n\t}, [categories, page]);\r\n\r\n\treturn {\r\n\t\tsearchQuery,\r\n\t\tsetSearchQuery,\r\n\t\tcategories,\r\n\t\tpage,\r\n\t\tsetPage,\r\n\t\thandleSearch,\r\n\t\thandleCategorySelect,\r\n\t\tresetSearch,\r\n\t\tinitialLoad,\r\n\t\tloading,\r\n\t\tpageSize,\r\n\t\tsetInitialLoad\r\n\t};\r\n};","import { type FC } from 'react';\r\nimport { Flex, Button } from \"@chakra-ui/react\";\r\nimport { ButtonIcon } from '../../_Base/Components/UI/Button';\r\nimport { pxToRem } from '../../_Base/Utils/mapPxToRem';\r\n\r\ninterface PaginationProps {\r\n\tcurrentPage: number;\r\n\ttotalPages: number;\r\n\tmaxVisiblePages?: number;\r\n\tonPageChange: (page: number) => void;\r\n\tvariant?: 'light' | 'dark';\r\n}\r\n\r\nconst Pagination: FC = ({\r\n\tcurrentPage,\r\n\ttotalPages,\r\n\tmaxVisiblePages = 5,\r\n\tonPageChange,\r\n\tvariant = 'dark'\r\n}) => {\r\n\tif (totalPages <= 1) return null;\r\n\r\n\tconst buttonVariant = variant === 'dark' ? 'unstyled-w-hover-dark' : 'unstyled-w-hover-light';\r\n\tconst pageButtonVariant = variant === 'dark' ? 'bordered-dark' : 'bordered-light';\r\n\tconst activePageButtonVariant = variant === 'dark' ? 'dark' : 'light';\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t onPageChange(currentPage - 1)}\r\n\t\t\t\tisDisabled={currentPage === 1}\r\n\t\t\t\tpadding={pxToRem(\"8px\")}\r\n\t\t\t/>\r\n\r\n\t\t\t{[...Array(Math.min(maxVisiblePages, totalPages))].map((_, idx) => {\r\n\t\t\t\tlet pageNum;\r\n\t\t\t\tif (totalPages <= maxVisiblePages) {\r\n\t\t\t\t\tpageNum = idx + 1;\r\n\t\t\t\t} else {\r\n\t\t\t\t\tconst middle = Math.floor(maxVisiblePages / 2);\r\n\t\t\t\t\tif (currentPage <= middle) {\r\n\t\t\t\t\t\tpageNum = idx + 1;\r\n\t\t\t\t\t} else if (currentPage > totalPages - middle) {\r\n\t\t\t\t\t\tpageNum = totalPages - maxVisiblePages + idx + 1;\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tpageNum = currentPage - middle + idx;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\treturn (\r\n\t\t\t\t\t onPageChange(pageNum)}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{pageNum}\r\n\t\t\t\t\t\r\n\t\t\t\t);\r\n\t\t\t})}\r\n\r\n\t\t\t onPageChange(currentPage + 1)}\r\n\t\t\t\tisDisabled={currentPage === totalPages}\r\n\t\t\t\tpadding={pxToRem(\"8px\")}\r\n\t\t\t/>\r\n\t\t\r\n\t);\r\n};\r\n\r\nexport default Pagination;","/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport React, { type FC } from \"react\";\r\nimport { Link as ChakraLink, type LinkProps as ChakraLinkProps } from \"@chakra-ui/react\";\r\nimport {\r\n\tLink as RouterLink,\r\n\ttype LinkProps as RouterLinkProps,\r\n} from \"react-router-dom\";\r\nimport { pushDataLayer } from \"~/foundation/Tracking/GoogleTagManager\";\r\n\r\nexport type LinkProps = ChakraLinkProps & {\r\n\tto?: RouterLinkProps[\"to\"];\r\n\tsize?: string;\r\n\tvariant?: string;\r\n\tariaLabel?: string;\r\n\tlinkLabel?: string;\r\n\ttarget?: string;\r\n\tclassName?: string;\r\n\trel?: string;\r\n\tchildren?: RouterLinkProps[\"children\"];\r\n\tdataLayer?: () => GTMDataLayer;\r\n};\r\n\r\nexport const Link: FC = ({\r\n\tto,\r\n\tsize,\r\n\tvariant,\r\n\tariaLabel,\r\n\ttarget,\r\n\tclassName,\r\n\trel,\r\n\tchildren,\r\n\tdataLayer,\r\n\t...rest\r\n}) => {\r\n\tconst ref = React.createRef();\r\n\r\n\treturn (\r\n\t\t {\r\n\t\t\t\t\tpushDataLayer(dataLayer);\r\n\t\t\t\t},\r\n\t\t\t})}\r\n\t\t\t{...rest}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t\r\n\t);\r\n};\r\n","import React, { type FC } from 'react';\r\nimport { Link as SitecoreLink } from '@sitecore-jss/sitecore-jss-react'; // eslint-disable-line no-restricted-imports\r\nimport { type LinkFieldValue, useSitecoreContext } from \"~/foundation/Jss\";\r\nimport type { LinkProps as SitecoreLinkProps } from '@sitecore-jss/sitecore-jss-react/types/components/Link';\r\nimport type { Optional } from \"utility-types\";\r\nimport { Link as ChakraLink } from \"@chakra-ui/react\";\r\nimport { Link } from \"../components/ui/link\";\r\n\r\nexport type LinkProps = Optional & {\r\n\tvariant?: string;\r\n\tsize?: string;\r\n\tbgColor?: string;\r\n\tcolor?: string;\r\n\tbgColorHover?: string;\r\n\tariaLabel?: string;\r\n\tdataLayer?: () => GTMDataLayer;\r\n}\r\n\r\n/** React component that turns Sitecore link values that start with / into react-router route links */\r\nconst RoutableSitecoreLink: FC = (props) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\tconst editable = props.editable ?? true;\r\n\tconst value = props.field?.value as LinkFieldValue | undefined;\r\n\tconst href = value?.href;\r\n\tconst hasValidHref = props.field && props.field.value && href;\r\n\tconst isEditing = editable && (props.field?.editableFirstPart || props.field?.editableLastPart);\r\n\r\n\tif (!hasValidHref && !sitecoreContext.pageEditing) {\r\n\t\treturn <>;\r\n\t}\r\n\r\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n\tconst { variant, ariaLabel, color, ...sitecoreProps } = props;\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t{!isEditing\r\n\t\t\t\t?\r\n\t\t\t\t\r\n\t\t\t\t\t{props.children || value?.text || href || \"\"}\r\n\t\t\t\t\r\n\t\t\t\t:\r\n\t\t\t\t\r\n\t\t\t\t\t{/*eslint-disable-next-line*/}\r\n\t\t\t\t\t{/*@ts-ignore*/}\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t\r\n\t);\r\n};\r\n\r\n\r\n\r\nexport default RoutableSitecoreLink;","import React, { type FC } from \"react\";\r\nimport { useSitecoreContext } from \"@sitecore-jss/sitecore-jss-react\"; // eslint-disable-line no-restricted-imports\r\nimport RoutableSitecoreLink, { type LinkProps } from \"./RoutableSitecoreLink\";\r\n\r\nconst LinkWrapper: FC = (props) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\r\n\tif (!props?.field && !sitecoreContext.pageEditing) {\r\n\t\treturn <>;\r\n\t}\r\n\r\n\treturn ;\r\n};\r\n\r\nexport default LinkWrapper;","import { Placeholder } from \"~/foundation/Jss/components\";\r\nimport { default as Image } from \"~/foundation/Jss/components/ImageWrapper\";\r\nimport { default as RichText } from \"~/foundation/Jss/components/RichTextWrapper\";\r\nimport { default as File } from \"~/foundation/Jss/components/FileWrapper\";\r\nimport { default as Date } from \"~/foundation/Jss/components/DateWrapper\";\r\nimport { AdvanceImage } from \"~/foundation/Jss/components/AdvanceImage\";\r\nimport { default as Text } from \"~/foundation/Jss/components/TextWrapper\";\r\nimport { default as Link } from \"./LinkWrapper\";\r\n\r\nexport const sc = {\r\n\tPlaceholder,\r\n\tImage,\r\n\tText,\r\n\tRichText,\r\n\tAdvanceImage,\r\n\tLink,\r\n\tFile,\r\n\tDate,\r\n}","import { Icon, forwardRef, type IconProps } from \"@chakra-ui/react\";\r\n\r\nexport interface BundleIconProps extends IconProps {\r\n\tname: \"facebook\" | \"instagram\" | \"x\" | \"linkedin\" | \"button-arrow\" |\r\n\t\"chevron\" | \"close\" | \"download-arrow\" | \"envelop\" | \"phone\" | \"play\" |\r\n\t\"add-image\" | \"calendar\" | \"clock\" | \"map-pin\" | \"loupe\";\r\n\tsize?: string | (string | number | null)[] | number;\r\n\tisRtl?: boolean;\r\n}\r\n\r\nconst BundleIcon = forwardRef(\r\n\t({ name, isRtl, ...props }, ref) => {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t);\r\n\t}\r\n);\r\nexport default BundleIcon;\r\n","import { type TextField } from \"~/foundation/Jss\";\r\nimport { Box, Flex, Heading, HStack, } from \"@chakra-ui/react\";\r\nimport { pxToRem } from \"../theme/utils/mapPxToRem\";\r\nimport { sc } from \"../Jss\";\r\nimport BundleIcon from \"./ui/bundle-icon\";\r\n\r\ntype ContentSectionBoxHeaderProps = {\r\n\tprimaryColor?: string,\r\n\ttitle?: TextField,\r\n\ticonName?: \"download-arrow\" | \"envelop\",\r\n\ticonSize?: string,\r\n\tisIconRtl?: boolean,\r\n};\r\n\r\nconst ContentSectionBoxHeader = ({ primaryColor, title, iconName, iconSize, isIconRtl }: ContentSectionBoxHeaderProps) => {\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t{iconName && \r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t\r\n\t)\r\n}\r\n\r\nexport default ContentSectionBoxHeader;\r\n\r\n","import type { ReactNode } from \"react\";\r\nimport {\r\n\tFlex as ChakraFlex,\r\n\ttype FlexProps as ChakraFlexProps,\r\n} from \"@chakra-ui/react\";\r\n\r\ntype FlexProps = ChakraFlexProps & {\r\n\tchildren: ReactNode;\r\n};\r\n\r\nexport const Flex = ({ children, ...rest }: FlexProps) => {\r\n\treturn (\r\n\t\t\r\n\t\t\t{children}\r\n\t\t\r\n\t);\r\n};\r\n","import React, { createContext, type FC, useContext, useState } from \"react\";\r\n\r\ntype ContainerContextType = {\r\n\tdivider?: 'both' | 'top' | 'bottom' | 'none';\r\n\tthemed?: boolean;\r\n}\r\n\r\nconst defaultContainerContext: ContainerContextType = {\r\n\tdivider: 'none',\r\n\tthemed: false,\r\n}\r\n\r\nexport const ContainerContext = createContext(defaultContainerContext);\r\n\r\ntype ContainerContextProps = {\r\n\tchildren: React.ReactNode;\r\n}\r\n\r\nexport const ColorThemeProvider: FC = ({ children }) => {\r\n\tconst [constainerState] = useState(defaultContainerContext);\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{children}\r\n\t\t\r\n\t);\r\n};\r\n\r\nexport const useContainerContext = () => {\r\n\tconst context = useContext(ContainerContext);\r\n\tif (!context) {\r\n\t\tthrow new Error(\"useContainerContext must be used within a ContainerContextProvider\");\r\n\t}\r\n\treturn context;\r\n};\r\n","import { Container as ChakraContainer, type ContainerProps } from \"@chakra-ui/react\";\r\nimport { pxToRem } from \"../theme/utils/mapPxToRem\";\r\n\r\nconst Container = ({ children, ...rest }: ContainerProps) => {\r\n\treturn (\r\n\t\t\r\n\t\t\t{children}\r\n\t\t\r\n\t);\r\n};\r\n\r\nexport { Container };","import { keyframes } from \"@chakra-ui/react\";\r\n\r\nexport const groupHoverAfterArrowStyleCards = (isRtl = false) => (\r\n\t{\r\n\t\ttransform: !isRtl ? \"translateX(8px)\" : \"translateX(-8px) scaleX(-1)\",\r\n\t}\r\n);\r\n\r\nexport const groupHoverBeforeArrowStyle = {\r\n\twidth: \"40px\",\r\n\tmr: \"16px\",\r\n}\r\n\r\nexport const groupHoverArrowStyle = (isRtl = false) => (\r\n\t{\r\n\t\ttransform: !isRtl ? \"translateX(8px)\" : \"translateX(-8px) scaleX(-1)\",\r\n\t}\r\n)\r\n\r\nexport const fadeIn = keyframes`\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n`;\r\n\r\nexport const fadeOut = keyframes`\r\n from { opacity: 1; }\r\n to { opacity: 0; }\r\n`;\r\n\r\nexport const reveal = keyframes`\r\n to { opacity: 1; transform: translate(0); }\r\n`;","import { Box, type BoxProps } from \"@chakra-ui/react\";\r\nimport { type ReactNode } from \"react\";\r\nimport { useColorTheme } from \"../theme/ColorThemeContext\";\r\nimport { ContainerContext } from \"./component-container-context\";\r\nimport { pxToRem } from \"../theme/utils/mapPxToRem\";\r\nimport { Container } from \"./container\";\r\nimport { useSitecoreContext } from \"~/foundation/Jss\";\r\nimport { fadeIn } from \"../theme/animations\";\r\n\r\ntype ComponentContainerProps = BoxProps & {\r\n\tdivider?: \"both\" | \"top\" | \"bottom\" | 'none';\r\n\tthemed?: boolean;\r\n\tinnerTopPadding?: string | number | Array;\r\n\tinnerBottomPadding?: string | number | Array;\r\n\tisContentSection?: boolean;\r\n\tchildren: ReactNode;\r\n\tuseInnerContainer?: boolean;\r\n\tcustomBgColor?: string;\r\n\tbgImg?: string;\r\n\tuseOverflowX?: boolean;\r\n};\r\n\r\nconst subpageContainerStyles = ({\r\n\treversedLinearGradient,\r\n\timg,\r\n\tisRtl,\r\n}: {\r\n\treversedLinearGradient: string;\r\n\timg: string;\r\n\tisRtl: boolean;\r\n}) => ({\r\n\tbackground: `${reversedLinearGradient}, url(${img})`,\r\n\tbackgroundRepeat: \"no-repeat\",\r\n\tbackgroundSize: {\r\n\t\tbase: \"cover\",\r\n\t\tlg: \"cover\",\r\n\t},\r\n\tbackgroundPosition: \"right center\",\r\n\ttransform: isRtl ? \"scaleX(-1)\" : \"none\",\r\n});\r\n\r\nconst ComponentContainerContent = ({\r\n\tdivider = \"both\",\r\n\tinnerTopPadding = pxToRem(\"65px\"),\r\n\tinnerBottomPadding = pxToRem(\"65px\"),\r\n\tchildren,\r\n\tuseInnerContainer = true,\r\n\tcustomBgColor,\r\n\tuseOverflowX = true,\r\n\tbgImg,\r\n}: ComponentContainerProps) => {\r\n\tconst { moduleBackgroundColor } = useColorTheme();\r\n\tconst isItPaddingArray = Array.isArray(innerTopPadding);\r\n\tconst isIbPaddingArray = Array.isArray(innerBottomPadding);\r\n\tconst isDividerTopOrBoth = divider === \"top\" || divider === \"both\";\r\n\tconst isDividerBottomOrBoth = divider === \"bottom\" || divider === \"both\";\r\n\tconst isTopPaddingZero = typeof innerTopPadding === \"number\" && innerTopPadding === 0;\r\n\tconst isBottomPaddingZero = typeof innerBottomPadding === \"number\" && innerBottomPadding === 0;\r\n\tconst topPadding = isTopPaddingZero ? \"0px\" : innerTopPadding;\r\n\tconst bottomPadding = isBottomPaddingZero ? \"0px\" : innerBottomPadding;\r\n\r\n\tconst itPadding = isItPaddingArray ?\r\n\t\t(isDividerTopOrBoth ?\r\n\t\t\tinnerTopPadding.map(padding => {\r\n\t\t\t\treturn `calc(5.49vw + ${isTopPaddingZero ? \"0px\" : padding})`;\r\n\t\t\t}) : topPadding)\r\n\t\t: (isDividerTopOrBoth ? `calc(5.49vw + ${topPadding})` : topPadding);\r\n\r\n\tconst ibPadding = isIbPaddingArray ?\r\n\t\t(isDividerBottomOrBoth ?\r\n\t\t\tinnerBottomPadding.map(padding => {\r\n\t\t\t\treturn `calc(5.49vw + ${isBottomPaddingZero ? \"0px\" : padding})`;\r\n\t\t\t}) : bottomPadding)\r\n\t\t: (isDividerBottomOrBoth ? `calc(5.49vw + ${bottomPadding})` : bottomPadding);\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{useInnerContainer ? (\r\n\t\t\t\t\r\n\t\t\t\t\t{children}\r\n\t\t\t\t\r\n\t\t\t) : (\r\n\t\t\t\t<>{children}\r\n\t\t\t)}\r\n\t\t\r\n\t)\r\n}\r\n\r\nexport const ComponentContainer = ({\r\n\tdivider = \"both\",\r\n\tthemed = false,\r\n\tinnerTopPadding = pxToRem(\"65px\"),\r\n\tinnerBottomPadding = pxToRem(\"65px\"),\r\n\tchildren,\r\n\tuseInnerContainer = true,\r\n\tcustomBgColor,\r\n\tbgImg,\r\n\tuseOverflowX = true,\r\n\t...rest\r\n}: ComponentContainerProps) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\tconst { moduleBackgroundColor } = useColorTheme();\r\n\tconst isRtl = sitecoreContext.custom.settings.isRtl;\r\n\tconst reversedLinearGradient = `linear-gradient(319.43deg, ${(customBgColor ?? moduleBackgroundColor).replace('rgb', 'rgba').replace(')', ', 0)')} -68.76%, ${(customBgColor ?? moduleBackgroundColor)} 53.27%), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2))`;\r\n\tconst clipPath = divider === 'none' ? 'unset' : `polygon(0 ${divider === \"top\" || divider === \"both\" ? \"clamp(0px, 5.49vw, 79px)\" : \"0px\"}, 100% 0, 100% calc(100% - ${divider === \"bottom\" || divider === \"both\" ? \"clamp(0px, 5.49vw, 79px)\" : \"0px\"}), 0 100%)`;\r\n\tconst clipPathRTL = divider === 'none' ? 'unset' : `polygon(0 ${divider === \"bottom\" || divider === \"both\" ? \"calc(100% - clamp(0px, 5.49vw, 79px))\" : \"100%\"}, 100% 100%, 100% ${divider === \"top\" || divider === \"both\" ? \"clamp(0px, 5.49vw, 79px)\" : \"0px\"}, 0 0)`;\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t{bgImg ?\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{children}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t:\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{children}\r\n\t\t\t\t\t\r\n\t\t\t\t}\r\n\t\t\t\r\n\t\t\r\n\t);\r\n};\r\n","import { Box, Flex, Text } from \"@chakra-ui/react\";\r\nimport BundleIcon from \"../../_Base/components/ui/bundle-icon\";\r\nimport { sc } from \"../../_Base/Jss\";\r\nimport { useSitecoreContext, type TextField } from \"~/foundation/Jss\";\r\nimport { useColorTheme } from \"../../_Base/theme/ColorThemeContext\";\r\nimport { pxToRem } from \"../../_Base/theme/utils/mapPxToRem\";\r\n\r\ntype InfoRowProps = {\r\n\ticonName: \"calendar\" | \"map-pin\" | \"clock\";\r\n\tinfo?: TextField | string;\r\n\tisDate?: boolean;\r\n\tcustomColor?: string;\r\n};\r\n\r\ntype eventInfoProps = {\r\n\tdate?: TextField | string,\r\n\ttime?: TextField | string,\r\n\tlocation?: TextField | string,\r\n\tcustomColor?: string;\r\n}\r\n\r\nconst InfoRow = ({ iconName, info, isDate = false, customColor }: InfoRowProps) => {\r\n\tconst { moduleBackgroundColor } = useColorTheme();\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\tconst isRtl = sitecoreContext.custom.settings.isRtl;\r\n\r\n\treturn (\r\n\t\t((typeof info === \"string\" ? info : info?.value) || sitecoreContext.pageEditing) && \r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t{typeof info === \"string\" ? {info} : <>\r\n\t\t\t\t\t\t{isDate ?\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t:\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t)\r\n};\r\n\r\nexport const EventInfo = ({ date, time, location, customColor }: eventInfoProps) => {\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\r\n\t)\r\n}\r\n\r\nexport const EventBox = ({ date, time, location, customColor, ...rest }: eventInfoProps) => {\r\n\tconst { moduleBackgroundColor } = useColorTheme();\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\r\n\t)\r\n}\r\n","import { Box } from \"@chakra-ui/react\";\r\nimport { type ImageProps } from \"./ImageTypes\";\r\nimport BundleIcon from \"../ui/bundle-icon\";\r\nimport { useColorTheme } from \"../../theme/ColorThemeContext\";\r\nimport { useSitecoreContext } from \"~/foundation/Jss\";\r\n\r\nconst ImageComponent = ({ isImgSrc = false, isShadow = false, children }: ImageProps) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\tconst { primaryColor } = useColorTheme();\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{children}\r\n\t\t\t{(!isImgSrc && sitecoreContext.pageEditing) && (\r\n\t\t\t\t\r\n\t\t\t)}\r\n\t\t\r\n\t)\r\n}\r\n\r\nexport default ImageComponent;\r\n","import { Flex as ChakraFlex, Text, Box } from \"@chakra-ui/react\";\r\nimport { pxToRem } from \"../../theme/utils/mapPxToRem\";\r\nimport { useSitecoreContext } from \"~/foundation/Jss\";\r\nimport { sc } from \"../../Jss\";\r\nimport { type ImageProps } from \"./ImageTypes\";\r\nimport ImageComponent from \"./ImageComponent\";\r\n\r\nconst ImageWithCaption = ({ isWrapper = true, caption, height = 0, aspectRatio, children, ...rest }: ImageProps) => {\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\tconst isRtl = sitecoreContext.custom.settings.isRtl;\r\n\tconst { isImgSrc, ...flexAttributes } = rest;\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t\r\n\t\t\t\t{aspectRatio ?\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{isWrapper ?\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{children}\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t:\r\n\t\t\t\t\t\t\tchildren\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\t:\r\n\t\t\t\t\tisWrapper ?\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{children}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t:\r\n\t\t\t\t\t\tchildren\r\n\t\t\t\t}\r\n\t\t\t\r\n\t\t\t{(caption?.value || sitecoreContext.pageEditing) &&\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t\r\n\t)\r\n};\r\n\r\nexport default ImageWithCaption;\r\n","import { useSitecoreContext } from \"~/foundation/Jss\";\r\nimport { ColorThemeProvider } from \"./ColorThemeContext\";\r\nimport { getColorThemeVariant } from \"./getColorTheme\";\r\nimport { type AramcoTechProjectDataContext, type ThemePickerBase, type ThemeRenderingParameters } from \"../../generated-types\";\r\nimport { type ColorThemeId } from \"./themes\";\r\nimport { type ThemeVariant, type VariantThemeId } from \"./color-themes/dark-blue-color-theme\";\r\n\r\nexport type WithThemeProps = {\r\n\tparams: ThemeRenderingParameters;\r\n}\r\n\r\nexport function themable(allowedThemes: ThemeVariant[] | null = null) {\r\n\treturn function themable

(InputComponent: React.FC

) {\r\n\r\n\t\tconst Themable = (props: P) => {\r\n\t\t\tconst { sitecoreContext } = useSitecoreContext();\r\n\t\t\tlet pageTheme = (sitecoreContext?.custom.projectData.pageTheme || \"dark_blue\") as ColorThemeId;\r\n\t\t\tlet variant = (props.params.themePicker || \"white\") as VariantThemeId;\r\n\r\n\t\t\tif (variant?.includes(\"|\")) {\r\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n\t\t\t\t[pageTheme, variant] = variant.split('|') as [ColorThemeId, VariantThemeId];\r\n\t\t\t}\r\n\r\n\t\t\tconst colorTheme = getColorThemeVariant(pageTheme, variant);\r\n\t\t\tif (colorTheme) {\r\n\t\t\t\treturn (\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t);\r\n\t\t\t}\r\n\r\n\t\t\treturn \r\n\t\t}\r\n\r\n\t\tThemable.allowedThemes = allowedThemes;\r\n\t\tThemable.displayName = \"Themable\";\r\n\r\n\t\treturn Themable;\r\n\t};\r\n}","export const videoThumbnailMotion = {\r\n\tblur: {\r\n\t\tscale: 1,\r\n\t\ttransition: {\r\n\t\t\tduration: .5,\r\n\t\t\tease: \"easeOut\"\r\n\t\t}\r\n\t},\r\n\thover: {\r\n\t\tscale: 1.015,\r\n\t\ttransition: {\r\n\t\t\tduration: .5,\r\n\t\t\tease: \"easeOut\"\r\n\t\t}\r\n\t}\r\n};","export const CookieConsentStyling = {\r\n\t\"sx\": {\r\n\t\t\"&[src]\": {\r\n\t\t\tdisplay: \"none\"\r\n\t\t}\r\n\t}\r\n}","import { type FC } from \"react\";\r\nimport { Box, type BoxProps, Button, Heading, Text as ChakraText } from \"@chakra-ui/react\";\r\nimport { useTranslation } from \"~/foundation/Dictionary\";\r\nimport { CookieConsentStyling } from \"./styles\";\r\nimport { type GlobalDictionary } from \"../../../dictionary\";\r\n\r\ntype CookieConsentProps = BoxProps;\r\n\r\nexport const CookieConsent: FC = (props) => {\r\n\tconst [t] = useTranslation();\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t{t(\"general.cookies.cookieTitle\")}\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t{t(\"general.cookies.cookieText\")}\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t)\r\n}","import { type ReactNode, useEffect, useState } from \"react\";\r\nimport { AspectRatio, Button, Flex } from \"@chakra-ui/react\";\r\nimport zIndices from \"../../theme/variables/z-index\";\r\nimport { createPortal } from 'react-dom';\r\nimport { pxToRem } from \"../../theme/utils/mapPxToRem\";\r\nimport BundleIcon from \"../ui/bundle-icon\";\r\nimport { type GlobalDictionary } from \"../../../dictionary\";\r\nimport { useTranslation } from \"~/foundation/Dictionary\";\r\n\r\ntype VideoOverlayProps = {\r\n\tshowOverlayHandle: (showOverlay: boolean) => void;\r\n\tchildren: ReactNode;\r\n}\r\n\r\nconst VideoOverlay = ({ showOverlayHandle, children }: VideoOverlayProps) => {\r\n\tconst [t] = useTranslation();\r\n\tconst [showOverlay, setShowOverlay] = useState(true);\r\n\r\n\tuseEffect(() => {\r\n\t\tdocument.body.style.overflow = \"hidden\";\r\n\t\treturn () => {\r\n\t\t\tdocument.body.style.overflow = \"auto\";\r\n\t\t}\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tshowOverlayHandle(showOverlay);\r\n\t}, [showOverlay]);\r\n\r\n\treturn (\r\n\t\tcreatePortal(\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t{children}\r\n\t\t\t\r\n\t\t, document.body)\r\n\t)\r\n}\r\n\r\nexport default VideoOverlay;\r\n","import { useEffect, useRef, useState } from \"react\";\r\nimport { type VideoComponentProps } from \"./VideoTypes\";\r\nimport { useSitecoreContext } from \"~/foundation/Jss\";\r\nimport { AspectRatio, Box, Text, Flex } from \"@chakra-ui/react\";\r\nimport { videoThumbnailMotion } from \"../../../_Base/theme/styles/motions\";\r\nimport { MotionBox } from \"~/foundation/Framer/MotionBox\";\r\nimport { useEventEmitter } from \"~/foundation/Events\";\r\nimport { type OneTrustEvent } from \"~/foundation/OneTrust/OneTrustEvent\";\r\nimport { getOneTrustTargetingConsent } from \"~/foundation/Utils/cookie\";\r\nimport { useInView } from \"framer-motion\";\r\nimport { pxToRem } from \"../../../_Base/theme/utils/mapPxToRem\";\r\nimport { CookieConsent } from \"../../../_Base/components/OneTrust/CookieConsent\";\r\nimport BundleIcon from \"../../../_Base/components/ui/bundle-icon\";\r\nimport ImageComponent from \"../Image/ImageComponent\";\r\nimport VideoOverlay from \"./VideoOverlay\";\r\n\r\nconst VideoPlayIcon = () => (\r\n\t\r\n\t\t\r\n\t\r\n);\r\n\r\nconst Video = ({ videoId, videoTitle, caption, isAspectRatio, isOverlay = false, isImgSrc = false, children }: VideoComponentProps) => {\r\n\tconst [showVideoOverlay, setShowVideoOverlay] = useState(false);\r\n\tconst [loaded, setLoaded] = useState(false);\r\n\tconst { sitecoreContext } = useSitecoreContext();\r\n\tconst moduleRef = useRef(null);\r\n\tconst isInView = useInView(moduleRef);\r\n\tconst [hasTargetingConsent, setHasTargetingConsent] = useState(false);\r\n\tconst eventEmitter = useEventEmitter(\"OneTrust\");\r\n\tconst isRtl = sitecoreContext.custom.settings.isRtl;\r\n\r\n\tconst handleKeyDown = (event: React.KeyboardEvent) => {\r\n\t\tif (event.key === \"Enter\") {\r\n\t\t\tsetLoaded(true);\r\n\t\t}\r\n\t};\r\n\r\n\tuseEffect(() => {\r\n\t\tsetHasTargetingConsent(getOneTrustTargetingConsent());\r\n\t\teventEmitter.on(\"onConsentChanged\", () => {\r\n\t\t\tsetHasTargetingConsent(getOneTrustTargetingConsent());\r\n\t\t})\r\n\t\tif (isOverlay) {\r\n\t\t\tsetShowVideoOverlay(true);\r\n\t\t}\r\n\t}, [])\r\n\r\n\tuseEffect(() => {\r\n\t\tif (loaded) {\r\n\t\t\tsetShowVideoOverlay(true);\r\n\t\t}\r\n\t}, [loaded]);\r\n\r\n\treturn (\r\n\t\tloaded ||\r\n\t\t\t//(isInView && !sitecoreContext.custom.settings.cookieConsent.useOneTrust) ||\r\n\t\t\t(isInView && hasTargetingConsent && sitecoreContext.custom.settings.cookieConsent.useOneTrust) ?\r\n\t\t\t<>\r\n\t\t\t\t{isOverlay ?\r\n\t\t\t\t\t<>\r\n\t\t\t\t\t\t setShowVideoOverlay(true)} cursor=\"pointer\" width=\"100%\" height=\"100%\">\r\n\t\t\t\t\t\t\t setLoaded(true)} onKeyDown={handleKeyDown} tabIndex={0} _hover={{ cursor: \"pointer\" }}>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{children}\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{!sitecoreContext.pageEditing && }\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t{showVideoOverlay && \r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t